/* ============================================================ TOKENS — sampled directly from the RKH logo indigo #3D3F82 · green #87B35C · caduceus red #C1272D ============================================================ */ :root{ --indigo-900:#2A2566; --indigo-800:#37307A; --indigo-700:#443C99; /* logo indigo — primary */ --indigo-500:#6058B0; --indigo-100:#DCD9F0; --indigo-050:#EFEDF9; --green:#80B048; /* logo green, reserved for the shield motif */ --green-deep:#35521C; /* dark surfaces */ --green-deep2:#4A6E28; /* dark surface gradient end */ --green-soft:#B7D493; /* text and accents on dark */ --green-mid:#5E8228; /* buttons and accents on light */ --green-pastel:#E9F3DC; /* pastel surface */ --green-pastel2:#F5FAEE;/* pastel surface, lighter */ --green-700:#5E8228; /* darkened for text contrast */ --green-100:#E9F3DC; --green-050:#F3F8EC; --red:#C1272D; /* caduceus red — emergency only */ --red-dk:#96181D; --ink:#22243A; --ink-600:#454962; --ink-400:#6E7390; --rule:#DFE0EB; --surface:#FFFFFF; --surface-alt:#F6F7FB; --disp:"Barlow Semi Condensed",Impact,"Arial Narrow",sans-serif; --sans:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --wrap:1300px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:hidden} body{ margin:0;font-family:var(--sans);font-size:17px;line-height:1.62; color:var(--ink);background:var(--surface);overflow-x:hidden; } img{max-width:100%;display:block} a{color:var(--indigo-700)} h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.12;margin:0;letter-spacing:.005em} h1{font-size:clamp(2.4rem,6vw,4.1rem);font-weight:700} h2{font-size:clamp(1.75rem,3.8vw,2.7rem);font-weight:700} h3{font-size:1.3rem;font-weight:600} p{margin:0 0 var(--s2)} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s3)} .lede{font-size:1.1rem;color:var(--ink-600);max-width:62ch} section{padding-block:var(--s6)} :focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px} .skip{position:absolute;left:-9999px;top:0;background:#fff;padding:12px 20px;z-index:999} .skip:focus{left:8px;top:8px} .tbc{border-bottom:2px dotted var(--green-700);cursor:help} /* Shield motif: a two-tone rule taken from the split of the logo mark. Used to open section heads and stat items. */ .shieldrule{ width:4px;flex:0 0 4px;align-self:stretch;min-height:44px;border-radius:2px; background:linear-gradient(180deg,var(--green) 0 50%,var(--indigo-700) 50% 100%); } /* ── DRAFT BANNER (remove before launch) ─────────────────── */ .draftbar{background:var(--indigo-900);color:#C9CBE4;font-size:.83rem;padding:9px 0;line-height:1.5} .draftbar b{color:var(--green)} /* ── BUTTONS ─────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--disp);font-size:1.05rem;font-weight:600;letter-spacing:.015em; padding:13px 26px;border-radius:6px;border:1.5px solid transparent; text-decoration:none;cursor:pointer;transition:background .16s,color .16s,border-color .16s;min-height:48px; } .btn--primary{background:var(--indigo-700);color:#fff} .btn--primary:hover{background:var(--indigo-900)} .btn--green{background:var(--green);color:#1E2A12} .btn--green:hover{background:var(--green-700);color:#fff} .btn--ghost{background:transparent;color:var(--indigo-700);border-color:var(--indigo-700)} .btn--ghost:hover{background:var(--indigo-050)} .btn--onDark{background:#fff;color:var(--indigo-700)} .btn--onDark:hover{background:var(--indigo-100)} .btn--outlineLight{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)} .btn--outlineLight:hover{background:rgba(255,255,255,.12)} .btn--sm{padding:8px 16px;font-size:.95rem;min-height:40px} /* ── HEADER ──────────────────────────────────────────────── */ .utility{background:var(--indigo-900);color:#B9BBD8;font-size:.86rem} .utility .wrap{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;justify-content:space-between;padding-block:8px} .utility a{color:#fff;text-decoration:none;font-weight:600} .utility a:hover{text-decoration:underline} .utility .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:7px;vertical-align:middle} .masthead{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:saturate(1.3) blur(8px);border-bottom:1px solid var(--rule);padding-top:env(safe-area-inset-top,0px)} .masthead .wrap{display:flex;align-items:center;gap:var(--s3);padding-block:10px} .logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto} .logo img{height:50px;width:auto} .logo .txt{display:flex;flex-direction:column;line-height:1} .logo .n1{font-family:var(--disp);font-size:1.18rem;font-weight:700;color:var(--indigo-700);letter-spacing:.03em;text-transform:uppercase} .logo .n2{ font-family:var(--disp);font-size:.66rem;font-weight:500;color:var(--ink-600); letter-spacing:.17em;text-transform:uppercase;margin-top:5px;padding-top:4px; border-top:2px solid var(--green); } .nav{margin-left:auto;display:flex;align-items:center;gap:2px} .nav a{ font-family:var(--disp);text-decoration:none;color:var(--ink);font-size:1.02rem;font-weight:500; padding:9px 11px;border-radius:5px;white-space:nowrap; } .nav a:hover{background:var(--indigo-050);color:var(--indigo-700)} .nav .btn{margin-left:10px} .burger{margin-left:auto;display:none;background:none;border:1.5px solid var(--rule);border-radius:7px;padding:10px 12px;cursor:pointer} .burger span{display:block;width:20px;height:2px;background:var(--indigo-700);margin:4px 0} /* ── HERO ────────────────────────────────────────────────── */ .hero{background:linear-gradient(165deg,#2F3164 0%,#3D3F82 62%,#474AA0 100%);color:#fff;padding-block:var(--s7) var(--s6);position:relative;overflow:hidden} .hero::after{ content:"";position:absolute;right:-8%;bottom:-45%;width:620px;height:620px;border-radius:50%; background:radial-gradient(circle,rgba(135,179,92,.30),transparent 62%);pointer-events:none; } .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.18fr .82fr;gap:var(--s6);align-items:center} .since{ display:inline-flex;align-items:baseline;gap:9px;font-family:var(--disp); font-size:.95rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:#C4D8AC;margin-bottom:var(--s3); } .since b{font-size:1.5rem;font-weight:700;color:var(--green);letter-spacing:.02em} .hero h1{color:#fff;max-width:13ch} .hero p{color:#C6C8E6;font-size:1.14rem;max-width:47ch;margin-top:var(--s3)} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s4)} .hero-emerg{ margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.2); display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:.96rem;color:#C6C8E6; } .hero-emerg a{color:#fff;font-weight:600;font-size:1.2rem;text-decoration:none;font-variant-numeric:tabular-nums;font-family:var(--disp)} .hero-emerg a:hover{text-decoration:underline} .photoframe{ border:1.5px dashed rgba(255,255,255,.38);border-radius:12px;aspect-ratio:4/5; display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s3);background:rgba(255,255,255,.06); } .photoframe strong{display:block;color:#fff;font-family:var(--disp);font-size:1.1rem;font-weight:600;margin-bottom:5px} .photoframe span{font-size:.85rem;color:#AFB2D8;line-height:1.5} /* ── QUICK ACTIONS ───────────────────────────────────────── */ .quick{margin-top:-38px;position:relative;z-index:5;padding-block:0} .quick .grid{ display:grid;grid-template-columns:repeat(4,1fr);background:#fff; border:1px solid var(--rule);border-radius:10px;overflow:hidden; box-shadow:0 10px 30px rgba(61,63,130,.14); } .quick a{ display:flex;flex-direction:column;gap:5px;padding:var(--s3);text-decoration:none;color:var(--ink); border-right:1px solid var(--rule);border-top:4px solid transparent;transition:background .16s,border-color .16s; } .quick a:last-child{border-right:0} .quick a:hover{background:var(--indigo-050);border-top-color:var(--green)} .quick .q-t{font-family:var(--disp);font-size:1.2rem;font-weight:600;color:var(--indigo-700)} .quick .q-s{font-size:.88rem;color:var(--ink-600);line-height:1.5} .quick svg{width:24px;height:24px;stroke:var(--green-700);fill:none;stroke-width:1.7;margin-bottom:3px} .quick a.is-emerg .q-t{color:var(--red)} .quick a.is-emerg svg{stroke:var(--red)} .quick a.is-emerg:hover{background:#FDF2F2;border-top-color:var(--red)} /* ── STATS ───────────────────────────────────────────────── */ .stats ul{list-style:none;margin:0;padding:var(--s4) 0;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s3);border-block:1px solid var(--rule)} .stats li{display:flex;gap:var(--s2)} .stats .num{font-family:var(--disp);font-size:2.5rem;font-weight:700;color:var(--indigo-700);line-height:.95;display:block} .stats .lbl{font-size:.9rem;color:var(--ink-600);margin-top:7px;display:block;line-height:1.4} .stats .note{font-size:.83rem;color:var(--ink-400);margin-top:var(--s2)} /* ── ABOUT ───────────────────────────────────────────────── */ .about{background:var(--surface-alt)} .about .wrap{display:grid;grid-template-columns:.88fr 1.12fr;gap:var(--s6);align-items:center} .about .frame{border:1.5px dashed var(--rule);border-radius:12px;background:#fff;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s3)} .about .frame strong{font-family:var(--disp);font-size:1.1rem;color:var(--indigo-700);display:block;margin-bottom:4px} .about .frame span{font-size:.85rem;color:var(--ink-400);line-height:1.5} .motto{ font-family:var(--disp);font-size:1.45rem;font-weight:600;color:var(--indigo-700); border-left:4px solid var(--green);padding-left:var(--s3);margin:var(--s4) 0;line-height:1.35; } /* ── SECTION HEADS ───────────────────────────────────────── */ .shead{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:flex-end;justify-content:space-between;margin-bottom:var(--s5)} .shead .inner{display:flex;gap:var(--s3);align-items:stretch} .shead p{margin:9px 0 0;color:var(--ink-600);max-width:56ch} /* ── SPECIALITIES ────────────────────────────────────────── */ .spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)} .spec-grid a{ background:#fff;padding:var(--s3);text-decoration:none;color:var(--ink); display:flex;flex-direction:column;gap:6px;min-height:158px; border-left:3px solid transparent;transition:background .16s,border-color .16s; } .spec-grid a:hover{background:var(--green-050);border-left-color:var(--green)} .spec-grid .s-n{font-family:var(--disp);font-size:1.28rem;font-weight:600;color:var(--indigo-700);line-height:1.15} .spec-grid .s-d{font-size:.89rem;color:var(--ink-600);line-height:1.55} .spec-grid .s-c{margin-top:auto;font-size:.8rem;color:var(--ink-400)} /* ── DOCTOR FINDER ───────────────────────────────────────── */ .finder{background:var(--indigo-900);color:#fff} .finder h2{color:#fff} .finder .shead p{color:#AEB1D2} .controls{ display:grid;grid-template-columns:1.9fr 1fr;gap:12px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16); border-radius:10px;padding:14px;margin-bottom:var(--s3); } /* three group tabs — active tab carries the shield's green edge */ .tabwrap{margin-bottom:var(--s3)} .tabs{ display:grid;grid-template-columns:repeat(3,1fr);gap:2px; border-bottom:1px solid rgba(255,255,255,.18); } .tab{ display:flex;flex-direction:column;align-items:flex-start;gap:3px; font-family:var(--disp);color:#A6A9CE;background:none;border:0;cursor:pointer;text-align:left; padding:16px 18px;border-bottom:3px solid transparent;margin-bottom:-1px; transition:color .15s,border-color .15s,background .15s; } .tab:hover{color:#fff;background:rgba(255,255,255,.06)} .tab .lab{font-size:1.28rem;font-weight:600;letter-spacing:.015em;line-height:1.1} .tab .cnt{font-family:var(--sans);font-size:.85rem;font-weight:500;color:#8286AE} .tab[aria-selected="true"]{color:#fff;border-bottom-color:var(--green)} .tab[aria-selected="true"] .cnt{color:var(--green)} .tabnote{font-size:.94rem;color:#A6A9CE;margin:var(--s2) 0 0;max-width:64ch} .controls label{display:block;font-family:var(--disp);font-size:.82rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#A6A9CE;margin-bottom:6px} .controls input,.controls select{ width:100%;font-family:var(--sans);font-size:1rem;padding:11px 13px;border-radius:6px; border:1.5px solid rgba(255,255,255,.24);background:#1C1E3B;color:#fff;min-height:46px; } .controls input::placeholder{color:#8286AE} .controls select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#A6A9CE 50%),linear-gradient(135deg,#A6A9CE 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;background-size:6px 6px;background-repeat:no-repeat} .rescount{font-size:.92rem;color:#A6A9CE;margin-bottom:var(--s2)} .dlist{border-top:1px solid rgba(255,255,255,.16)} .drow{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--s3);align-items:center;padding:18px 4px;border-bottom:1px solid rgba(255,255,255,.13)} .avatar{ width:52px;height:52px;flex:0 0 auto;border-radius:6px; background:linear-gradient(180deg,var(--green) 0 50%,var(--indigo-500) 50% 100%); color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:1.12rem;letter-spacing:.03em; text-shadow:0 1px 2px rgba(0,0,0,.35); } .dname{font-family:var(--disp);font-size:1.32rem;font-weight:600;color:#fff;line-height:1.15} .dqual{font-size:.85rem;color:#A6A9CE;line-height:1.5;margin-top:3px} .dspec{display:inline-block;font-family:var(--disp);font-size:.88rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin-top:5px} .dqual{display:block;font-size:.82rem;color:#A6A9CE;margin-top:2px} .dtime{text-align:right;font-variant-numeric:tabular-nums;font-size:.94rem;color:#DCDDEE;max-width:236px;line-height:1.5} .dtime em{display:block;font-style:normal;font-size:.78rem;color:#8286AE;margin-top:2px} .drow .btn{white-space:nowrap} .noresult{padding:var(--s5) 0;color:#A6A9CE;border-bottom:1px solid rgba(255,255,255,.13)} .noresult b{color:#fff;font-family:var(--disp);font-size:1.3rem;display:block;margin-bottom:6px} .finder-foot{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:space-between} .finder-foot small{color:#8286AE;font-size:.84rem;max-width:60ch;line-height:1.55} /* ── WHY ─────────────────────────────────────────────────── */ .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)} .why-grid h3{color:var(--indigo-700);margin-bottom:8px;padding-top:var(--s2);border-top:3px solid var(--green)} .why-grid p{font-size:.95rem;color:var(--ink-600);margin:0} /* ── FACILITIES ──────────────────────────────────────────── */ .fac{background:var(--surface-alt)} .fac-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)} .fac-col h3{color:var(--indigo-700);font-size:1.2rem;margin-bottom:12px} .fac-col ul{list-style:none;margin:0;padding:0} .fac-col li{padding:8px 0 8px 22px;position:relative;font-size:.95rem;color:var(--ink-600);border-bottom:1px solid var(--rule)} .fac-col li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:9px;border-radius:2px;background:var(--green-100);border:1.5px solid var(--green-700)} /* ── JOURNEY ─────────────────────────────────────────────── */ .journey ol{list-style:none;counter-reset:j;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)} .journey li{counter-increment:j;position:relative;padding-top:var(--s4)} .journey li::before{ content:counter(j);position:absolute;top:0;left:0;width:32px;height:32px;border-radius:5px; background:var(--indigo-050);color:var(--indigo-700);display:grid;place-items:center; font-family:var(--disp);font-weight:700;font-size:1rem;border-bottom:3px solid var(--green); } .journey li::after{content:"";position:absolute;top:16px;left:40px;right:-8px;height:1.5px;background:var(--rule)} .journey li:last-child::after{display:none} .journey .j-t{font-family:var(--disp);font-size:1.12rem;font-weight:600;color:var(--indigo-700);display:block;margin-bottom:3px} .journey .j-d{font-size:.88rem;color:var(--ink-600)} /* ── PANEL ───────────────────────────────────────────────── */ .panel{background:var(--green-050);border:1px solid var(--green-100);border-left:5px solid var(--green);border-radius:10px;padding:var(--s4);display:grid;grid-template-columns:1.2fr auto;gap:var(--s4);align-items:center} .panel h3{color:var(--indigo-700);font-size:1.45rem;margin-bottom:7px} .panel p{margin:0;color:var(--ink-600)} /* ── EMERGENCY BAND ──────────────────────────────────────── */ .emergband{background:var(--red);color:#fff;padding-block:var(--s5)} .emergband .wrap{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between} .emergband h2{color:#fff;margin-bottom:6px} .emergband p{color:#F7D4D5;margin:0;max-width:52ch} .emergband .acts{display:flex;flex-wrap:wrap;gap:12px} .emergband .btn--onDark{color:var(--red)} /* ── CONTACT ─────────────────────────────────────────────── */ .contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)} .nap{font-style:normal;line-height:1.8;font-size:1.02rem} .nap .row{display:grid;grid-template-columns:100px 1fr;gap:var(--s2);padding:11px 0;border-bottom:1px solid var(--rule)} .nap .k{font-family:var(--disp);color:var(--ink-400);font-size:.85rem;letter-spacing:.09em;text-transform:uppercase;padding-top:5px} .nap a{text-decoration:none;font-weight:600} .nap a:hover{text-decoration:underline} .mapframe{border:1.5px dashed var(--rule);border-radius:10px;background:var(--surface-alt);min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s3);margin-top:var(--s3)} .mapframe strong{font-family:var(--disp);font-size:1.1rem;color:var(--indigo-700)} .mapframe span{font-size:.84rem;color:var(--ink-400)} form fieldset{border:0;margin:0;padding:0} form .f{margin-bottom:var(--s2)} form label{display:block;font-size:.88rem;color:var(--ink-600);margin-bottom:5px;font-weight:500} form input,form select,form textarea{width:100%;font-family:var(--sans);font-size:1rem;padding:12px 13px;border:1.5px solid var(--rule);border-radius:7px;background:#fff;color:var(--ink);min-height:48px} form textarea{min-height:110px;resize:vertical} form input:focus,form select:focus,form textarea:focus{border-color:var(--indigo-500)} .formcard{background:var(--surface-alt);border:1px solid var(--rule);border-top:4px solid var(--indigo-700);border-radius:10px;padding:var(--s4)} .formcard h3{color:var(--indigo-700);font-size:1.5rem;margin-bottom:6px} .formnote{font-size:.87rem;color:#4A3B14;background:#FBF4E2;border:1px solid #E8D9AE;border-radius:7px;padding:12px 14px;margin:var(--s2) 0 var(--s3)} /* ── FOOTER ──────────────────────────────────────────────── */ footer{background:var(--indigo-900);color:#B0B3D2;padding-block:var(--s6) var(--s4);font-size:.94rem} .fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:var(--s4)} footer h4,footer .fh{font-family:var(--disp);color:#fff;font-size:1.1rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:var(--s2);padding-bottom:7px;border-bottom:2px solid var(--green)} footer ul{list-style:none;margin:0;padding:0} footer li{margin-bottom:9px} footer a{color:#B0B3D2;text-decoration:none} footer a:hover{color:#fff;text-decoration:underline} .flogo{display:flex;align-items:center;gap:11px;margin-bottom:var(--s3)} .flogo img{height:56px;width:auto} .flogo .n1{font-family:var(--disp);font-size:1.12rem;font-weight:700;color:#fff;letter-spacing:.03em;text-transform:uppercase;line-height:1.1} .flogo .n2{font-family:var(--disp);font-size:.64rem;font-weight:500;color:var(--green);letter-spacing:.16em;text-transform:uppercase;margin-top:4px} .fbrand p{font-size:.9rem;line-height:1.7;color:#9296BC;max-width:36ch} .fbot{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.15);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);justify-content:space-between;font-size:.86rem;color:#8286AE} .fbot ul{display:flex;flex-wrap:wrap;gap:var(--s3)} .fbot li{margin:0} /* ── MOBILE BAR ──────────────────────────────────────────── */ .mobar{display:none} /* ── RESPONSIVE ──────────────────────────────────────────── */ @media (max-width:1080px){ .quick .grid{grid-template-columns:repeat(2,1fr)} .quick a:nth-child(2){border-right:0} .quick a:nth-child(-n+2){border-bottom:1px solid var(--rule)} .spec-grid{grid-template-columns:repeat(3,1fr)} .stats ul{grid-template-columns:repeat(3,1fr);gap:var(--s4)} .why-grid{grid-template-columns:repeat(2,1fr)} .journey ol{grid-template-columns:repeat(3,1fr);gap:var(--s4)} .journey li::after{display:none} .fcols{grid-template-columns:repeat(3,1fr)} } @media (max-width:880px){ body{font-size:16px;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))} section{padding-block:var(--s5)} .nav{display:none} .burger{display:block} .nav.is-open{ display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;top:100%;left:0;right:0; background:#fff;border-bottom:1px solid var(--rule);padding:var(--s2) var(--s3) var(--s3); box-shadow:0 12px 26px rgba(61,63,130,.14); } .nav.is-open a{padding:13px 10px;border-bottom:1px solid var(--rule)} .nav.is-open .btn{margin:var(--s2) 0 0} .logo img{height:42px} .logo .n1{font-size:1.02rem} .hero{padding-block:var(--s5)} .hero .wrap{grid-template-columns:1fr;gap:var(--s4)} .photoframe{aspect-ratio:16/10} .about .wrap,.contact .wrap{grid-template-columns:1fr;gap:var(--s4)} .about .frame{aspect-ratio:16/10} .controls{grid-template-columns:1fr} .tab{padding:12px 10px} .tab .lab{font-size:1.02rem} .tab .cnt{font-size:.78rem} .drow{grid-template-columns:auto 1fr;gap:var(--s2) var(--s3);padding:var(--s3) 4px} .dtime{grid-column:1/-1;text-align:left;max-width:none;padding-left:68px} .drow .btn{grid-column:1/-1;justify-self:start;margin-left:68px} .fac-grid{grid-template-columns:1fr;gap:var(--s3)} .panel{grid-template-columns:1fr} .fcols{grid-template-columns:repeat(2,1fr)} .mobar{ display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;z-index:80; background:#fff;border-top:1px solid var(--rule);box-shadow:0 -4px 16px rgba(61,63,130,.14); padding-bottom:env(safe-area-inset-bottom,0px); } .mobar a{ display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;text-decoration:none; color:var(--ink);font-family:var(--disp);font-size:.82rem;font-weight:600;letter-spacing:.03em; border-right:1px solid var(--rule);min-height:64px;justify-content:center; } .mobar a:last-child{border-right:0} .mobar svg{width:20px;height:20px;stroke:var(--indigo-700);fill:none;stroke-width:1.8} .mobar a.is-emerg{color:var(--red)} .mobar a.is-emerg svg{stroke:var(--red)} } @media (max-width:560px){ .quick .grid{grid-template-columns:1fr} .quick a{border-right:0;border-bottom:1px solid var(--rule)} .quick a:last-child{border-bottom:0} .spec-grid{grid-template-columns:repeat(2,1fr)} .stats ul{grid-template-columns:repeat(2,1fr)} .why-grid,.journey ol,.fcols{grid-template-columns:1fr} .utility .wrap{justify-content:flex-start} .dtime,.drow .btn{padding-left:0;margin-left:0} .logo .n2{display:none} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} .pagehero{background:linear-gradient(165deg,#2F3164 0%,#3D3F82 70%,#474AA0 100%);color:#fff;padding-block:var(--s6) var(--s5);position:relative;overflow:hidden} .pagehero::after{content:"";position:absolute;right:-6%;bottom:-55%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(135,179,92,.28),transparent 62%);pointer-events:none} .pagehero .wrap{position:relative;z-index:1} .pagehero h1{color:#fff;max-width:18ch;font-size:clamp(2.1rem,5vw,3.4rem)} .pagehero p{color:#C6C8E6;font-size:1.12rem;max-width:58ch;margin-top:var(--s3)} .crumb{font-family:var(--disp);font-size:.9rem;letter-spacing:.09em;text-transform:uppercase;color:#A6A9CE;margin-bottom:var(--s3)} .crumb a{color:var(--green);text-decoration:none} .crumb a:hover{text-decoration:underline} .abhero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:center} @media (max-width:1000px){.abhero-grid{grid-template-columns:1fr}} .abhero-film .filmcard{aspect-ratio:16/9} .founder-note{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.18);color:#C6C8E6!important} .founder-note b{color:#fff} figure{margin:0} .shot{border-radius:12px;overflow:hidden;background:var(--surface-alt)} .shot img{width:100%;height:100%;object-fit:cover;display:block} .shot figcaption{font-size:.84rem;color:var(--ink-400);padding:10px 2px 0;line-height:1.45} .hero--photo{background:#2F3164} .hero--photo .bg{position:absolute;inset:0;z-index:0} .hero--photo .bg img{width:100%;height:100%;object-fit:cover;opacity:.30} .hero--photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,#2F3164 0%,rgba(47,49,100,.92) 46%,rgba(61,63,130,.55) 100%)} .hero--photo .wrap{z-index:2} /* free-consultation schedule / data tables */ .freecare{background:var(--green-050);border-top:4px solid var(--green)} .sched{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--rule);border-radius:10px;overflow:hidden} .sched th.sched td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--rule);font-size:1rem} .sched thead th{font-family:var(--disp);font-size:.86rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--indigo-700);border-bottom:0} .sched tbody tr:last-child td{border-bottom:0} .sched tbody tr:nth-child(odd){background:var(--surface-alt)} .sched .day{font-family:var(--disp);font-weight:600;font-size:1.15rem;color:var(--indigo-700);white-space:nowrap} .sched .free{display:inline-block;font-family:var(--disp);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#1E2A12;background:var(--green);border-radius:4px;padding:3px 9px} .sched td.n{text-align:right;font-variant-numeric:tabular-nums} .sched th.n{text-align:right} .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .verify{background:#FBF4E2;border:1px solid #E8D9AE;border-left:5px solid #D6A02E;border-radius:9px;padding:var(--s3);margin:var(--s3) 0} .verify h4{font-family:var(--disp);font-size:1.15rem;color:#6B5210;margin-bottom:7px;letter-spacing:.02em} .verify p{color:#4A3B14;font-size:.95rem;margin:0 0 9px} .verify p:last-child{margin-bottom:0} .verify ul{margin:0;padding-left:19px;color:#4A3B14;font-size:.94rem} .verify li{margin-bottom:6px} .verify li:last-child{margin-bottom:0} .safety{background:#FDF2F2;border:1px solid #F0C9C7;border-left:5px solid var(--red);border-radius:9px;padding:var(--s3);margin:var(--s3) 0} .safety h4{font-family:var(--disp);font-size:1.15rem;color:var(--red-dk);margin-bottom:7px} .safety p{color:#5C2320;font-size:.95rem;margin:0} .safety p + p{margin-top:9px} .specs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)} .spec{border:1px solid var(--rule);border-top:4px solid var(--indigo-700);border-radius:9px;padding:var(--s3);background:#fff} .spec .big{font-family:var(--disp);font-size:2.3rem;font-weight:700;color:var(--indigo-700);line-height:1;display:block} .spec .cap{font-size:.94rem;color:var(--ink-600);margin-top:7px;display:block;line-height:1.45} .timeline{list-style:none;margin:var(--s4) 0 0;padding:0;border-left:2px solid var(--green)} .timeline li{position:relative;padding:0 0 var(--s4) var(--s4)} .timeline li::before{content:"";position:absolute;left:-7px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid #fff} .timeline li:last-child{padding-bottom:0} .timeline .yr{font-family:var(--disp);font-size:1.5rem;font-weight:700;color:var(--indigo-700);display:block;line-height:1} .timeline .ev{font-size:.98rem;color:var(--ink-600);margin-top:5px;display:block} .awards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)} .award{border:1px solid var(--rule);border-radius:9px;padding:var(--s3);background:#fff} .award h3{color:var(--indigo-700);font-size:1.14rem;margin-bottom:6px;line-height:1.25} .award p{font-size:.92rem;color:var(--ink-600);margin:0} .award .by{display:block;font-size:.85rem;color:var(--green-700);margin-top:8px;font-weight:500} .board{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)} .board h3{color:var(--indigo-700);font-size:1.2rem;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--green)} .board ul{list-style:none;margin:0;padding:0} .board li{padding:7px 0;border-bottom:1px solid var(--rule);font-size:.94rem;color:var(--ink-600)} .board li b{color:var(--ink);font-weight:600} .split{display:grid;grid-template-columns:1.25fr .75fr;gap:var(--s6);align-items:start} .aside{background:var(--surface-alt);border:1px solid var(--rule);border-radius:10px;padding:var(--s4)} .aside h3{color:var(--indigo-700);font-size:1.3rem;margin-bottom:10px} .aside ul{list-style:none;margin:0 0 var(--s3);padding:0} .aside li{padding:8px 0;border-bottom:1px solid var(--rule);font-size:.94rem;color:var(--ink-600)} .therapies{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)} .therapy{background:#fff;padding:var(--s3);border-left:3px solid transparent;transition:background .15s,border-color .15s} .therapy:hover{background:var(--green-050);border-left-color:var(--green)} .therapy h3{color:var(--indigo-700);font-size:1.24rem;margin-bottom:6px} .therapy .san{font-family:var(--disp);font-size:.82rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--green-700);display:block;margin-bottom:4px} .therapy p{font-size:.93rem;color:var(--ink-600);margin:0} .steps{counter-reset:st;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)} .steps li{counter-increment:st;padding-top:var(--s4);position:relative} .steps li::before{content:counter(st);position:absolute;top:0;left:0;width:32px;height:32px;border-radius:5px;background:var(--indigo-050);color:var(--indigo-700);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:1rem;border-bottom:3px solid var(--green)} .steps .st-t{font-family:var(--disp);font-size:1.1rem;font-weight:600;color:var(--indigo-700);display:block;margin-bottom:3px} .steps .st-d{font-size:.9rem;color:var(--ink-600)} /* department detail cards */ .depts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)} .dept{border:1px solid var(--rule);border-radius:10px;padding:var(--s3);background:#fff;border-left:4px solid var(--indigo-700)} .dept.is-soon{border-left-color:var(--ink-400);background:var(--surface-alt)} .dept h3{color:var(--indigo-700);font-size:1.3rem;margin-bottom:6px} .dept p{font-size:.95rem;color:var(--ink-600);margin:0 0 10px} .dept .meta{display:flex;flex-wrap:wrap;gap:8px} .pill{display:inline-block;font-family:var(--disp);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:4px;padding:3px 9px} .pill--free{background:var(--green);color:#1E2A12} .pill--vol{background:var(--indigo-050);color:var(--indigo-700)} .pill--soon{background:#EDEEF4;color:var(--ink-600)} /* insurer grid */ .insurers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)} .insurer{background:#fff;padding:14px 18px;font-size:.95rem;color:var(--ink)} .insurer small{display:block;color:var(--ink-400);font-size:.82rem;margin-top:2px} /* gallery */ .gfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s4)} .gbtn{font-family:var(--disp);font-size:1rem;font-weight:500;padding:9px 16px;border-radius:6px;border:1.5px solid var(--rule);background:#fff;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,color .15s} .gbtn:hover{border-color:var(--indigo-500)} .gbtn[aria-pressed="true"]{background:var(--indigo-700);border-color:var(--indigo-700);color:#fff} .ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)} .gitem{border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#fff;padding:0;cursor:zoom-in;text-align:left;font:inherit;color:inherit;display:block} .gitem img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .gitem figcaption{padding:12px 14px 14px} .gitem .gt{font-family:var(--disp);font-size:1.08rem;font-weight:600;color:var(--indigo-700);display:block;line-height:1.2} .gitem .gd{font-size:.87rem;color:var(--ink-600);margin-top:4px;display:block;line-height:1.45} .lightbox{position:fixed;inset:0;z-index:200;background:rgba(18,20,40,.93);display:none;align-items:center;justify-content:center;padding:var(--s3)} .lightbox.is-open{display:flex} .lightbox img{max-width:min(1100px,94vw);max-height:80vh;object-fit:contain;border-radius:8px} .lbclose{position:absolute;top:16px;right:18px;background:rgba(255,255,255,.14);border:0;color:#fff;font-size:1.6rem;line-height:1;width:44px;height:44px;border-radius:8px;cursor:pointer} .lbcap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#DCDDEE;font-size:.95rem;padding-inline:var(--s3)} /* contact detail rows */ .cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)} .ccard{border:1px solid var(--rule);border-radius:10px;padding:var(--s3);background:#fff;border-top:4px solid var(--green)} .ccard h3{color:var(--indigo-700);font-size:1.2rem;margin-bottom:8px} .ccard p{font-size:.95rem;color:var(--ink-600);margin:0 0 8px} .ccard a{font-weight:600;text-decoration:none} .ccard a:hover{text-decoration:underline} @media (max-width:1180px){ .specs{grid-template-columns:repeat(2,1fr)} .awards.board.insurers.ggrid{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .depts{grid-template-columns:1fr} } @media (max-width:880px){ .split{grid-template-columns:1fr;gap:var(--s4)} .specs.awards.board.therapies.steps.insurers.ggrid.cgrid{grid-template-columns:1fr} .pagehero{padding-block:var(--s5)} .sched th.sched td{padding:11px 12px;font-size:.94rem} .sched .day{font-size:1.05rem} } /* compact day strip, replaces the full schedule table on the homepage */ .daystrip{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:10px;overflow:hidden} .daystrip a{background:#fff;padding:var(--s3) var(--s2);text-decoration:none;display:flex;flex-direction:column;gap:5px;transition:background .15s} .daystrip a:hover{background:var(--green-050)} .daystrip .dy{font-family:var(--disp);font-size:.82rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--green-700)} .daystrip .sp{font-family:var(--disp);font-size:1.2rem;font-weight:600;color:var(--indigo-700);line-height:1.12} .wamini{display:inline-flex;align-items:center;gap:5px;font-family:var(--disp);font-size:.78rem;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:#17843F;margin-top:6px} .wamini::before{content:"";width:9px;height:9px;border-radius:50%;background:#1DA851} /* department name chips, breadth at a glance, no blurbs */ .deptchips{display:flex;flex-wrap:wrap;gap:8px} .deptchips a{font-family:var(--disp);font-size:1.06rem;font-weight:500;color:var(--ink);text-decoration:none; background:#fff;border:1.5px solid var(--rule);border-radius:7px;padding:9px 15px;transition:border-color .15s,background .15s,color .15s} .deptchips a:hover{border-color:var(--indigo-700);background:var(--indigo-050);color:var(--indigo-700)} @media (max-width:880px){ .daystrip{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .daystrip{grid-template-columns:1fr} } /* ═══ visual pass: carry the logo's green through the page ═══ */ /* the draft banner should not be the loudest thing on screen */ .draftbar{background:#1A1C33;color:#8A8EBC;font-size:.78rem;padding:6px 0} .draftbar b{color:#7E9C55} /* hero, full-bleed photograph, readable type over it */ .hero--photo{min-height:min(88vh,760px);display:flex;align-items:center} .hero--photo .bg img{opacity:.42} .hero--photo::before{background:linear-gradient(100deg,rgba(26,28,52,.96) 0%,rgba(47,49,100,.88) 44%,rgba(61,63,130,.42) 100%)} .hero--photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;z-index:3; background:linear-gradient(90deg,var(--green) 0 50%,var(--indigo-500) 50% 100%)} .hero h1{font-size:clamp(2.6rem,6.4vw,4.6rem);letter-spacing:-.012em} .hero p{font-size:1.18rem;color:#D3D5F0} .hero .shot{box-shadow:0 24px 60px rgba(10,12,30,.45);border:1px solid rgba(255,255,255,.14)} /* quick actions, colour, not four grey boxes */ .quick .grid{box-shadow:0 18px 44px rgba(36,38,71,.16);border:0} .quick a{border-top:5px solid var(--green);gap:7px;padding:var(--s4) var(--s3)} .quick a:nth-child(2){border-top-color:var(--indigo-700)} .quick a:nth-child(3){border-top-color:var(--red)} .quick a:nth-child(4){border-top-color:var(--green-700)} .quick svg{width:30px;height:30px;stroke-width:1.6} .quick .q-t{font-size:1.3rem} /* stats band, tinted, alternating brand colours */ .stats{background:var(--indigo-050);border-block:1px solid var(--indigo-100)} .stats ul{border:0;padding-block:0} .stats .num{font-size:2.9rem} .stats li:nth-child(even) .num{color:var(--green-700)} .stats .lbl{color:var(--ink-600)} .stats .note{color:var(--ink-400)} /* section headings get the two-tone rule at a readable size */ .shead{margin-bottom:var(--s4)} .shieldrule{width:6px;flex-basis:6px;border-radius:3px} /* department cards, visual, not plain text chips */ .deptgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)} .deptgrid a{ background:#fff;border:1px solid var(--rule);border-radius:10px;padding:18px 18px 16px; text-decoration:none;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden; transition:border-color .16s,transform .16s,box-shadow .16s; } .deptgrid a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--indigo-700)} .deptgrid a:nth-child(3n)::before{background:var(--green)} .deptgrid a:nth-child(3n+2)::before{background:var(--indigo-500)} .deptgrid a:hover{border-color:var(--indigo-500);transform:translateY(-2px);box-shadow:0 10px 24px rgba(36,38,71,.12)} .deptgrid .dn{font-family:var(--disp);font-size:1.16rem;font-weight:600;color:var(--indigo-700);line-height:1.15} .deptgrid .dv{font-size:.84rem;color:var(--ink-400);font-variant-numeric:tabular-nums} .deptgrid .dfree{font-family:var(--disp);font-size:.74rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--green-700)} /* day strip, give it brand weight */ .freecare{background:linear-gradient(180deg,var(--green-050),#fff);border-top:5px solid var(--green)} .daystrip a{padding:var(--s4) var(--s3);border-top:3px solid transparent} .daystrip a:hover{border-top-color:var(--green)} .daystrip .sp{font-size:1.3rem} /* photo band */ .photoband{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)} .photoband a{border-radius:10px;overflow:hidden;display:block;position:relative;aspect-ratio:4/3;background:var(--surface-alt)} .photoband img{width:100%;height:100%;object-fit:cover;transition:transform .3s} .photoband a:hover img{transform:scale(1.04)} .photoband .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;color:#fff; font-family:var(--disp);font-size:1.02rem;font-weight:600;line-height:1.2; background:linear-gradient(180deg,transparent,rgba(18,20,40,.86))} /* about split, larger image, tighter text */ .about .wrap{grid-template-columns:1fr 1fr} .about .shot{box-shadow:0 18px 44px rgba(36,38,71,.14)} .motto{font-size:1.6rem;border-left-width:5px} /* emergency band keeps its weight but gains the rule */ .emergband{border-top:5px solid #8E1E17} @media (max-width:1180px){ .deptgrid{grid-template-columns:repeat(3,1fr)} .photoband{grid-template-columns:repeat(2,1fr)} } @media (max-width:880px){ .hero--photo{min-height:0} .deptgrid{grid-template-columns:repeat(2,1fr)} .about .wrap{grid-template-columns:1fr} } @media (max-width:520px){ .deptgrid{grid-template-columns:1fr} .photoband{grid-template-columns:1fr} } /* ── press & recognition strip ───────────────────────────── */ .press{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)} .pcard{background:#fff;border:1px solid var(--rule);border-radius:10px;overflow:hidden;display:flex;flex-direction:column} .pcard .pimg{aspect-ratio:4/3;overflow:hidden;background:var(--surface-alt)} .pcard .pimg img{width:100%;height:100%;object-fit:cover;object-position:top} .pcard .pbody{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1} .pcard .psrc{font-family:var(--disp);font-size:.74rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--green-700)} .pcard .pt{font-family:var(--disp);font-size:1.14rem;font-weight:600;color:var(--indigo-700);line-height:1.18} .pcard .pd{font-size:.88rem;color:var(--ink-600);line-height:1.5} .pcard .pdate{margin-top:auto;font-size:.8rem;color:var(--ink-400);padding-top:8px} /* ── insurance tie-ups ───────────────────────────────────── */ .insstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:10px;overflow:hidden} .insstrip span{background:#fff;padding:18px 14px;display:flex;align-items:center;justify-content:center;text-align:center; font-family:var(--disp);font-size:.98rem;font-weight:500;color:var(--indigo-700);line-height:1.2;min-height:78px} .insstrip span.more{background:var(--indigo-050);color:var(--indigo-700);font-weight:600} /* ── donation appeal cards ───────────────────────────────── */ .give{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)} .gcard{border:1px solid var(--rule);border-radius:10px;padding:var(--s4) var(--s3);background:#fff; border-top:5px solid var(--green);display:flex;flex-direction:column;gap:8px} .gcard h3{color:var(--indigo-700);font-size:1.3rem;line-height:1.15} .gcard p{font-size:.95rem;color:var(--ink-600);margin:0} .gcard .amt{font-family:var(--disp);font-size:2rem;font-weight:700;color:var(--green-700);line-height:1} .gcard .btn{margin-top:auto;align-self:flex-start} @media (max-width:1180px){ .press{grid-template-columns:repeat(2,1fr)} .insstrip{grid-template-columns:repeat(4,1fr)} .give{grid-template-columns:1fr} } @media (max-width:640px){ .press{grid-template-columns:1fr} .insstrip{grid-template-columns:repeat(2,1fr)} } /* ── insurer logo wall ─────────────────────────────────────── Each tile loads logos/.svg. Until that file exists the onerror handler swaps in the insurer's name, so the wall is never broken and never empty, it just gets better when the official artwork arrives. */ .logowall{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)} .logotile{ background:#fff;border:1px solid var(--rule);border-radius:10px; min-height:96px;padding:18px 16px;display:flex;align-items:center;justify-content:center; transition:border-color .16s,box-shadow .16s,transform .16s; } .logotile:hover{border-color:var(--indigo-500);box-shadow:0 8px 20px rgba(36,38,71,.10);transform:translateY(-2px)} .logotile img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain; filter:grayscale(1);opacity:.78;transition:filter .2s,opacity .2s} .logotile:hover img{filter:grayscale(0);opacity:1} .logotile .name{ font-family:var(--disp);font-size:1.02rem;font-weight:600;color:var(--indigo-700); text-align:center;line-height:1.2;letter-spacing:.01em; } .logotile .name small{display:block;font-family:var(--sans);font-size:.72rem;font-weight:500; letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400);margin-top:5px} .logotile.more{background:var(--indigo-050);border-color:var(--indigo-100)} .logotile.more a{font-family:var(--disp);font-size:1.06rem;font-weight:600;color:var(--indigo-700);text-decoration:none} .logogroup{font-family:var(--disp);font-size:.8rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase; color:var(--green-700);margin:0 0 var(--s2);display:flex;align-items:center;gap:12px} .logogroup::after{content:"";flex:1;height:1px;background:var(--rule)} .logogroup + .logowall{margin-bottom:var(--s4)} @media (max-width:1180px){.logowall{grid-template-columns:repeat(4,1fr)}} @media (max-width:720px){.logowall{grid-template-columns:repeat(3,1fr)} .logotile{min-height:80px;padding:12px 10px} .logotile .name{font-size:.9rem}} @media (max-width:440px){.logowall{grid-template-columns:repeat(2,1fr)}} .logowall--full{grid-template-columns:repeat(5,1fr)} .logowall--full .logotile{min-height:104px} .logowall--full .logotile .name{font-size:.96rem} .logowall--full .logotile .name small{text-transform:none;letter-spacing:.01em;font-size:.71rem;color:var(--ink-400)} @media (max-width:1180px){.logowall--full{grid-template-columns:repeat(3,1fr)}} @media (max-width:720px){.logowall--full{grid-template-columns:repeat(2,1fr)}} /* ════════════════════════════════════════════════════════════ COLOUR RHYTHM, full-bleed indigo bands alternating with light sections, green carrying every call to action. ════════════════════════════════════════════════════════════ */ /* dark band utility */ .band-dark{background:var(--indigo-900);color:#fff;position:relative} .band-dark::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px; background:linear-gradient(90deg,var(--green) 0 50%,var(--indigo-500) 50% 100%)} .band-dark h2.band-dark h3.band-dark h4{color:#fff} .band-dark p.band-dark li.band-dark .lbl.band-dark .cap{color:#B7BAE6} .band-dark .shead p{color:#AEB1D2} .band-dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5)} .band-dark .btn--ghost:hover{background:rgba(255,255,255,.12)} .band-dark .note{color:#8E92C4} /* deep indigo variant for wide bands */ .band-deep{background:linear-gradient(160deg,#1C1E3B 0%,#2F3164 55%,#3A3C79 100%);color:#fff} .band-deep h2.band-deep h3{color:#fff} .band-deep p{color:#BDC0EA} .band-deep .shead p{color:#AEB1D2} /* ── green carries the actions ───────────────────────────── */ .btn--primary{background:var(--green-700);color:#fff} .btn--primary:hover{background:#4C7329} .masthead .btn--primary{background:var(--green-700)} .masthead .btn--primary:hover{background:#4C7329} .btn--green{background:var(--green);color:#16220C;font-weight:600} .btn--green:hover{background:#96C468;color:#16220C} /* ── quick actions: coloured icon chips, stronger cards ──── */ .quick .grid{border-radius:14px} .quick a{padding:var(--s4) var(--s3) var(--s4)} .quick svg{background:var(--green-100);border-radius:10px;padding:9px;width:24px;height:24px; box-sizing:content-box;stroke:var(--green-700);margin-bottom:10px} .quick a:nth-child(2) svg{background:var(--indigo-050);stroke:var(--indigo-700)} .quick a:nth-child(3) svg{background:#FBE3E2;stroke:var(--red)} .quick a:nth-child(4) svg{background:var(--indigo-050);stroke:var(--indigo-700)} /* ── stats on the dark band ──────────────────────────────── */ .stats.band-dark{background:var(--indigo-900);border:0} .stats.band-dark ul{border:0;padding-block:var(--s5)} .stats.band-dark .num{color:var(--green);font-size:3.1rem} .stats.band-dark li:nth-child(even) .num{color:#fff} .stats.band-dark .lbl{color:#AEB1D2} .stats.band-dark .shieldrule{background:linear-gradient(180deg,var(--green) 0 50%,rgba(255,255,255,.5) 50% 100%)} /* ── departments on the dark band ────────────────────────── */ .band-dark .deptgrid a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)} .band-dark .deptgrid a:hover{background:rgba(255,255,255,.12);border-color:var(--green);transform:translateY(-3px); box-shadow:0 14px 30px rgba(0,0,0,.32)} .band-dark .deptgrid .dn{color:#fff} .band-dark .deptgrid .dv{color:#9DA1D0} .band-dark .deptgrid .dfree{color:var(--green)} .band-dark .deptgrid a::before{background:var(--green)} .band-dark .deptgrid a:nth-child(3n)::before{background:var(--indigo-500)} .band-dark .deptgrid a:nth-child(3n+2)::before{background:#fff} /* ── section eyebrow, the way strong hospital sites open ─── */ .eyebrow{font-family:var(--disp);font-size:.84rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--green-700);display:block;margin-bottom:10px} .band-dark .eyebrow.band-deep .eyebrow{color:var(--green)} /* ── free care: green is the whole point of this section ─── */ .freecare{background:linear-gradient(165deg,#3F6B22 0%,#5E8A36 60%,#6E9C42 100%);border-top:0;color:#fff} .freecare h2{color:#fff} .freecare .shead p{color:#DCEBC9} .freecare .btn--primary{background:#fff;color:var(--green-700)} .freecare .btn--primary:hover{background:#EAF3DD} .freecare .daystrip{background:rgba(255,255,255,.22);border:0;box-shadow:0 16px 40px rgba(20,40,10,.28)} .freecare .daystrip a{background:#fff} .freecare .daystrip a:hover{background:var(--green-050)} .freecare .note{color:#DCEBC9!important} .freecare .sched thead th{background:var(--indigo-900)} /* ── logo wall reads better on a light band ──────────────── */ .band-dark .logotile{background:rgba(255,255,255,.94)} .band-dark .logogroup{color:var(--green)} .band-dark .logogroup::after{background:rgba(255,255,255,.22)} /* ── press cards ─────────────────────────────────────────── */ .band-dark .pcard{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)} .band-dark .pcard .pt{color:#fff} .band-dark .pcard .pd{color:#AEB1D2} .band-dark .pcard .psrc{color:var(--green)} .band-dark .pcard .pdate{color:#8E92C4} .band-dark .pcard .pimg{background:rgba(0,0,0,.25)} /* ── about split gains a green rule and more weight ──────── */ .about{background:var(--surface-alt);border-top:1px solid var(--rule)} .motto{border-left-color:var(--green);color:var(--indigo-700)} /* ── headings a touch larger, the way the benchmark runs ─── */ h2{font-size:clamp(1.9rem,4vw,3rem)} .shead{margin-bottom:var(--s5)} /* press cards without a photograph get a brand-coloured plate, so all four cards have the same visual weight */ .pimg--mark{display:flex;align-items:center;justify-content:center; background:linear-gradient(150deg,var(--indigo-700),var(--indigo-500))} .pimg--mark.is-green{background:linear-gradient(150deg,var(--green-700),var(--green))} .pimg--mark svg{width:58px;height:58px;stroke:rgba(255,255,255,.92);fill:none;stroke-width:1.4} .band-dark .pimg--mark{background:linear-gradient(150deg,#3D3F82,#5B5EA6)} .band-dark .pimg--mark.is-green{background:linear-gradient(150deg,#5E8A36,#87B35C)} /* ════════════════════════════════════════════════════════════ GREEN, TONED DOWN The logo green is saturated. At full strength across a whole band it reads lime, so it is kept for the shield motif and small marks; surfaces use a deep forest green and text on dark uses a soft sage. ════════════════════════════════════════════════════════════ */ /* free-care band: deep forest, not bright */ .freecare{background:linear-gradient(162deg,var(--green-deep) 0%,#35521F 55%,var(--green-deep2) 100%);color:#fff} .freecare h2{color:#fff} .freecare .eyebrow{color:var(--green-soft)} .freecare .shead p{color:#CBD9BC} .freecare .note{color:#B6C8A6!important} .freecare .btn--primary{background:#fff;color:var(--green-deep)} .freecare .btn--primary:hover{background:#E8EFE0} .freecare .daystrip{background:rgba(255,255,255,.16);box-shadow:0 16px 44px rgba(10,22,4,.34)} .freecare .daystrip .dy{color:var(--green-mid)} .freecare .daystrip a:hover{background:#F2F7EC} /* accents on dark bands: sage, not lime */ .band-dark .eyebrow,.band-deep .eyebrow{color:var(--green-soft)} .stats.band-dark .num{color:#fff} .stats.band-dark li:nth-child(even) .num{color:var(--green-soft)} .band-dark .deptgrid .dfree{color:var(--green-soft)} .band-dark .deptgrid a:hover{border-color:var(--green-soft)} .band-dark .pcard .psrc{color:var(--green-soft)} .band-dark .logogroup{color:var(--green-soft)} .hero .since b{color:var(--green-soft)} /* accents on light: deeper green */ .eyebrow{color:var(--green-mid)} .logogroup{color:var(--green-mid)} .therapy .san,.dept .pill--free,.deptgrid .dfree{color:var(--green-mid)} .award .by,.fac-col li::before{border-color:var(--green-mid)} .fac-col li::before{background:#E7EEDF} .why-grid h3{border-top-color:var(--green-mid)} footer h4,footer .fh{border-bottom-color:var(--green-mid)} .flogo .n2{color:var(--green-soft)} .logo .n2{border-top-color:var(--green-mid)} /* buttons: sober green, white text */ .btn--primary{background:var(--green-mid);color:#fff} .btn--primary:hover{background:#456628} .masthead .btn--primary{background:var(--green-mid)} .masthead .btn--primary:hover{background:#456628} .btn--green{background:var(--green-mid);color:#fff} .btn--green:hover{background:#456628;color:#fff} /* quick-action icon chips: muted tints */ .quick svg{background:#E7EEDF;stroke:var(--green-mid)} .quick a{border-top-color:var(--green-mid)} .quick a:nth-child(4){border-top-color:var(--green-mid)} /* the two-tone shield rule keeps the true logo colours, it is small */ .shieldrule{background:linear-gradient(180deg,var(--green) 0 50%,var(--indigo-700) 50% 100%)} .band-dark::after{background:linear-gradient(90deg,var(--green-mid) 0 50%,var(--indigo-500) 50% 100%)} .hero--photo::after{background:linear-gradient(90deg,var(--green-mid) 0 50%,var(--indigo-500) 50% 100%)} /* donation and misc green edges */ .gcard{border-top-color:var(--green-mid)} .ccard{border-top-color:var(--green-mid)} .panel{background:#F4F8EF;border-color:#DCE7D0;border-left-color:var(--green-mid)} .motto{border-left-color:var(--green-mid)} .journey li::before{border-bottom-color:var(--green-mid)} .steps li::before{border-bottom-color:var(--green-mid)} .spec-grid a:hover{background:#F4F8EF;border-left-color:var(--green-mid)} .therapy:hover{background:#F4F8EF;border-left-color:var(--green-mid)} :focus-visible{outline-color:var(--green-mid)} .daystrip a:hover{border-top-color:var(--green-mid)} .draftbar b{color:var(--green-soft)} /* ════════════════════════════════════════════════════════════ Green works as an accent, not as a large surface. The free-care section is now a light band with a pale sage tint and a green top rule; green survives in the rule, the eyebrow and the day labels only. ════════════════════════════════════════════════════════════ */ .freecare{background:#F5F8F0;border-top:4px solid var(--green-mid);color:var(--ink)} .freecare::after{content:none} .freecare h2{color:var(--indigo-700)} .freecare .eyebrow{color:var(--green-mid)} .freecare .shead p{color:var(--ink-600)} .freecare .note,.freecare .note *{color:var(--ink-400)!important} .freecare .btn--primary{background:var(--green-mid);color:#fff} .freecare .btn--primary:hover{background:#456628} .freecare .daystrip{background:var(--rule);border:1px solid var(--rule);box-shadow:0 8px 22px rgba(36,38,71,.08)} .freecare .daystrip a{background:#fff} .freecare .daystrip a:hover{background:#EEF4E6} .freecare .daystrip .dy{color:var(--green-mid)} .freecare .daystrip .sp{color:var(--indigo-700)} .freecare .sched thead th{background:var(--indigo-700)} .freecare .shieldrule{background:linear-gradient(180deg,var(--green-mid) 0 50%,var(--indigo-700) 50% 100%)} /* ── pastel green surfaces ───────────────────────────────── */ .freecare{background:linear-gradient(170deg,var(--green-pastel) 0%,var(--green-pastel2) 100%); border-top:4px solid var(--green-mid)} .freecare .daystrip{background:#CFE3BE;border-color:#CFE3BE} .freecare .daystrip a:hover{background:var(--green-pastel2)} /* carry the same pastel through the supporting green moments */ .panel{background:var(--green-pastel2);border-color:#D8E8C8;border-left-color:var(--green-mid)} .quick svg{background:var(--green-pastel)} .spec-grid a:hover{background:var(--green-pastel2)} .therapy:hover{background:var(--green-pastel2)} .fac-col li::before{background:var(--green-pastel);border-color:var(--green-mid)} .dept .pill--free{background:var(--green-pastel);color:#3D5C1F} .gcard{background:#fff;border-top-color:var(--green-mid)} .logotile:hover{border-color:var(--green-mid)} /* ── department icons ────────────────────────────────────── */ .dicon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px; border-radius:11px;background:var(--green-pastel);color:var(--green-mid);flex:0 0 auto;margin-bottom:12px} .dicon svg{width:26px;height:26px} .dept .dicon{background:var(--indigo-050);color:var(--indigo-700)} .dept:nth-child(3n) .dicon{background:var(--green-pastel);color:var(--green-mid)} .dept.is-soon .dicon{background:#EDEEF4;color:var(--ink-400)} .deptgrid .dicon{width:38px;height:38px;border-radius:9px;margin-bottom:9px} .deptgrid .dicon svg{width:22px;height:22px} .band-dark .dicon{background:rgba(255,255,255,.12);color:#fff} .band-dark .deptgrid a:nth-child(3n) .dicon{background:rgba(179,203,154,.24);color:var(--green-soft)} /* department detail cards get room for the icon */ .dept{display:flex;flex-direction:column} .dept h3{margin-bottom:6px} /* ── horizontal bar chart, replaces the volumes table ────── */ .barchart{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--rule); border-radius:12px;padding:var(--s3) var(--s3) var(--s2)} .barrow{display:grid;grid-template-columns:210px 1fr 120px;gap:var(--s3);align-items:center;padding:9px 0; border-bottom:1px solid var(--surface-alt)} .barrow:last-child{border-bottom:0} .blabel{font-family:var(--disp);font-size:1rem;font-weight:500;color:var(--indigo-700);line-height:1.15} .btrack{position:relative;height:26px;display:flex;flex-direction:column;justify-content:center;gap:3px} .bbar{display:block;height:10px;border-radius:3px;min-width:2px} .bbar--opd{background:var(--indigo-700)} .bbar--adm{background:var(--green-mid);height:7px;opacity:.85} .bval{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--disp);font-size:1.06rem; font-weight:600;color:var(--ink)} .bval em{display:block;font-style:normal;font-family:var(--sans);font-size:.78rem;font-weight:500; color:var(--ink-400);margin-top:1px} .chartkey{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s3);font-size:.9rem;color:var(--ink-600)} .chartkey span{display:inline-flex;align-items:center;gap:8px} .chartkey i{width:16px;height:10px;border-radius:3px;display:inline-block} /* ── diagnostics cards with a visual head ───────────────── */ .diaggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)} .diagcard{border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column} .diaghead{padding:var(--s4) var(--s3);display:flex;align-items:center;gap:var(--s2); background:linear-gradient(140deg,var(--indigo-800),var(--indigo-500));color:#fff} .diagcard:nth-child(2) .diaghead{background:linear-gradient(140deg,#3F6B22,#6E9C42)} .diagcard:nth-child(3) .diaghead{background:linear-gradient(140deg,#2F3164,#5B5EA6)} .diaghead .dicon{background:rgba(255,255,255,.18);color:#fff;margin:0;width:52px;height:52px} .diaghead .dicon svg{width:30px;height:30px} .diaghead h3{color:#fff;font-size:1.35rem;margin:0} .diagcard ul{list-style:none;margin:0;padding:var(--s3)} .diagcard li{padding:9px 0 9px 24px;position:relative;font-size:.95rem;color:var(--ink-600); border-bottom:1px solid var(--surface-alt)} .diagcard li:last-child{border-bottom:0} .diagcard li::before{content:"";position:absolute;left:0;top:15px;width:8px;height:8px;border-radius:2px; background:var(--green-pastel);border:1.5px solid var(--green-mid)} /* ── government scheme cards with icons ─────────────────── */ .ccard .dicon{margin-bottom:10px} @media (max-width:1180px){ .diaggrid{grid-template-columns:1fr} .barrow{grid-template-columns:160px 1fr 100px;gap:var(--s2)} } @media (max-width:720px){ .barrow{grid-template-columns:1fr;gap:6px;padding:12px 0} .bval{text-align:left} .bval em{display:inline;margin-left:8px} } /* ── WhatsApp booking ────────────────────────────────────── */ .btn--wa{background:#1DA851;color:#fff;border-color:#1DA851} .btn--wa:hover{background:#17843F;color:#fff} .btn--wa svg{width:20px;height:20px;flex:0 0 auto} .btn--waLight{background:#fff;color:#17843F;border-color:#BFE3CC} .btn--waLight:hover{background:#EAF7EF;color:#136B33} .btn--waLight svg{width:20px;height:20px;color:#1DA851} .band-dark .btn--waLight{background:rgba(255,255,255,.95)} /* small inline WhatsApp link on cards */ .walink{display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-size:.92rem; font-weight:600;color:#17843F;text-decoration:none;margin-top:10px} .walink svg{width:16px;height:16px} .walink:hover{text-decoration:underline} .band-dark .walink{color:#7FD69F} /* floating WhatsApp button */ .wafab{ position:fixed;right:20px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:90;display:inline-flex;align-items:center;gap:10px; background:#1DA851;color:#fff;text-decoration:none;padding:13px 20px 13px 16px;border-radius:999px; font-family:var(--disp);font-size:1.04rem;font-weight:600;letter-spacing:.01em; box-shadow:0 10px 28px rgba(23,132,63,.36);transition:background .16s,transform .16s; } .wafab:hover{background:#17843F;transform:translateY(-2px)} .wafab svg{width:24px;height:24px} @media (max-width:880px){ .wafab{bottom:calc(84px + env(safe-area-inset-bottom,0px));right:14px;padding:12px;border-radius:50%} .wafab span{display:none} } @media (prefers-reduced-motion:reduce){.wafab:hover{transform:none}} /* ── collapsed hospital notes ────────────────────────────── */ details.verify{background:#FBF4E2;border:1px solid #E8D9AE;border-left:5px solid #D6A02E; border-radius:9px;padding:0;margin:var(--s3) 0} details.verify summary{ cursor:pointer;list-style:none;padding:12px 16px;font-family:var(--disp);font-size:1rem; font-weight:600;color:#6B5210;display:flex;align-items:center;gap:10px; } details.verify summary::-webkit-details-marker{display:none} details.verify summary::before{content:"+";font-size:1.15rem;line-height:1;width:18px;text-align:center;color:#A87E1A} details.verify[open] summary::before{content:"–"} details.verify summary:hover{color:#4A3B14} details.verify .vbody{padding:0 16px 14px 44px} details.verify .vbody p{color:#4A3B14;font-size:.93rem;margin:0 0 8px} details.verify .vbody p:last-child{margin-bottom:0} details.verify .vbody ul{margin:0;padding-left:18px;color:#4A3B14;font-size:.92rem} details.verify .vbody li{margin-bottom:5px} /* real logo tiles: uniform optical size, greyscale until hover */ .logotile.has-logo{padding:14px 18px} .logotile.has-logo img{max-height:46px;max-width:100%;width:auto;height:auto;object-fit:contain; filter:grayscale(1);opacity:.8;transition:filter .2s,opacity .2s} .logotile.has-logo:hover img{filter:grayscale(0);opacity:1} .logotile.has-logo.is-tall img{max-height:62px} .logowall--full .logotile.has-logo img{max-height:52px} .logowall--full .logotile.has-logo.is-tall img{max-height:70px} @media (max-width:720px){.logotile.has-logo img{max-height:34px} .logotile.has-logo.is-tall img{max-height:48px}} /* the WhatsApp mark, wherever it appears in text links */ .waicon{width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:-.18em;margin-right:6px} .utility a .waicon,footer a .waicon{width:15px;height:15px;color:#3FD37F} .masthead .btn--wa .waicon{margin-right:4px} .utility a,footer a{display:inline-flex;align-items:center} /* day cards: the mark replaces the plain dot */ .wamini::before{display:none} .wamini .waicon{width:14px;height:14px;color:#1DA851;margin-right:4px} /* the knocked-out handset takes the colour of whatever sits behind it */ .btn--wa{--wa-knock:#1DA851} .btn--wa:hover{--wa-knock:#17843F} .wafab{--wa-knock:#1DA851} .wafab:hover{--wa-knock:#17843F} .btn--waLight{--wa-knock:#fff} .utility{--wa-knock:#242647} footer{--wa-knock:#242647} .band-dark{--wa-knock:#242647} .freecare,.daystrip a{--wa-knock:#fff} .waicon{width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:-.18em;margin-right:6px} .utility a .waicon,footer a .waicon{width:15px;height:15px;color:#3FD37F} .wamini .waicon{width:15px;height:15px;color:#1DA851;margin-right:5px} .walink .waicon{width:16px;height:16px} .quick a svg.waicon{width:30px;height:30px;padding:9px;box-sizing:content-box;margin-right:0} /* single-line wordmark now the sub-line is gone */ .logo .n1{font-size:1.28rem;letter-spacing:.035em} .logo .txt{justify-content:center} .logo img{height:52px} .flogo .n1{font-size:1.2rem;line-height:1.1} @media (max-width:880px){.logo .n1{font-size:1.08rem}.logo img{height:44px}} /* ════════════════════════════════════════════════════════════ DEPARTMENT TILES — illustration led ════════════════════════════════════════════════════════════ */ .dshot{ display:grid;place-items:center;width:96px;height:96px;border-radius:50%;flex:0 0 auto; background:radial-gradient(circle at 50% 38%, #fff 0%, var(--green-pastel) 72%, #D6E7C4 100%); box-shadow:0 0 0 1px rgba(85,126,49,.18), 0 8px 20px rgba(36,38,71,.10); overflow:hidden;position:relative;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s; } .dshot img{width:82%;height:82%;object-fit:contain;display:block; transition:transform .35s cubic-bezier(.2,.7,.3,1)} .dshot::after{content:"";position:absolute;inset:0;border-radius:50%; background:linear-gradient(150deg,rgba(255,255,255,.55),transparent 55%);pointer-events:none} /* full department card */ .dept{align-items:flex-start} .dept .dshot{width:104px;height:104px;margin-bottom:var(--s3)} .dept:hover .dshot{transform:translateY(-3px) scale(1.03);box-shadow:0 0 0 1px rgba(85,126,49,.3),0 14px 30px rgba(36,38,71,.16)} .dept:hover .dshot img{transform:scale(1.06)} .dept .dicon{display:none} /* homepage grid tile */ .deptgrid a{align-items:flex-start;padding:22px 20px 18px} .deptgrid .dshot{width:76px;height:76px;margin-bottom:12px} .deptgrid a:hover .dshot{transform:translateY(-3px) scale(1.04)} .deptgrid a:hover .dshot img{transform:scale(1.07)} .deptgrid .dicon{display:none} .band-dark .dshot{ background:radial-gradient(circle at 50% 38%, #fff 0%, #EDF5E4 70%, #D6E7C4 100%); box-shadow:0 0 0 1px rgba(255,255,255,.22), 0 10px 24px rgba(0,0,0,.28); } /* ── reveal on scroll ────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(22px); transition:opacity .62s cubic-bezier(.2,.7,.3,1), transform .62s cubic-bezier(.2,.7,.3,1)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .dshot,.dshot img{transition:none} } @media (max-width:880px){ .dept .dshot{width:86px;height:86px} .deptgrid .dshot{width:66px;height:66px} } /* ════════════════════════════════════════════════════════════ PREMIUM PASS Softer layered shadows, calmer borders, more air, a tighter and more confident type hierarchy. ════════════════════════════════════════════════════════════ */ :root{ --rule:#E6E8F0; --shadow-sm:0 1px 2px rgba(24,26,52,.04), 0 2px 8px rgba(24,26,52,.04); --shadow-md:0 2px 4px rgba(24,26,52,.04), 0 12px 28px rgba(24,26,52,.07); --shadow-lg:0 4px 8px rgba(24,26,52,.05), 0 24px 56px rgba(24,26,52,.10); } section{padding-block:var(--s7)} @media (max-width:880px){section{padding-block:var(--s6)}} h2{letter-spacing:-.018em;line-height:1.06} h3{letter-spacing:-.008em} .lede{font-size:1.16rem;line-height:1.62;color:var(--ink-600)} .eyebrow{font-size:.78rem;letter-spacing:.24em} /* cards: hairline border plus a layered shadow, not a heavy box */ .dept,.ccard,.gcard,.award,.scheme,.diagcard,.pcard,.logotile,.quick .grid,.aside,.formcard,.barchart{ box-shadow:var(--shadow-sm);border-color:var(--rule)} .dept:hover,.award:hover,.diagcard:hover{box-shadow:var(--shadow-md)} .dept,.ccard,.gcard,.diagcard,.award,.scheme{border-radius:14px} .dept{padding:var(--s4) var(--s4) var(--s4)} .quick .grid{box-shadow:var(--shadow-lg)} /* department grid: more air, quieter rules */ .deptgrid{gap:var(--s3)} .deptgrid a{border-radius:14px;padding:26px 22px 22px;box-shadow:var(--shadow-sm)} .deptgrid a:hover{box-shadow:var(--shadow-md)} .deptgrid .dn{font-size:1.2rem;letter-spacing:-.005em} /* section heads sit further from their content */ .shead{margin-bottom:var(--s6)} .shead p{margin-top:12px} /* ── the year in numbers ─────────────────────────────────── */ .yearstory{background:var(--surface-alt);border-top:1px solid var(--rule)} .ys-lead{max-width:56ch;margin-bottom:var(--s6)} .ys-lead h2{margin-bottom:6px} .ys-hero{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5); padding:var(--s5) 0;border-block:1px solid var(--rule);margin-bottom:var(--s6)} .ys-fig{display:flex;flex-direction:column;gap:10px} .ys-num{font-family:var(--disp);font-size:clamp(3rem,6vw,4.6rem);font-weight:700;line-height:.92; letter-spacing:-.03em;color:var(--indigo-700);font-variant-numeric:tabular-nums} .ys-fig:nth-child(2) .ys-num{color:var(--green-mid)} .ys-cap{font-size:1rem;color:var(--ink-600);max-width:24ch;line-height:1.5} .ys-beats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s6)} .beat{position:relative;padding-left:var(--s4);border-left:2px solid var(--rule)} .beat:nth-child(odd){border-left-color:var(--indigo-100)} .beat:nth-child(even){border-left-color:#D8E8C8} .beat-n{font-family:var(--disp);font-size:2.1rem;font-weight:700;color:var(--green-mid); line-height:1;display:block;margin-bottom:10px;letter-spacing:-.02em} .beat:nth-child(odd) .beat-n{color:var(--indigo-700)} .beat h3{font-size:1.3rem;color:var(--ink);margin-bottom:8px} .beat p{font-size:1rem;color:var(--ink-600);margin:0;line-height:1.62} .ys-src{margin-top:var(--s5);font-size:.86rem;color:var(--ink-400)} @media (max-width:880px){ .ys-hero{grid-template-columns:1fr;gap:var(--s4)} .ys-beats{grid-template-columns:1fr;gap:var(--s4)} } /* ── supplied brand lockup ───────────────────────────────── */ .logo{gap:0} .logo .logo-lockup{height:54px;width:auto;display:block} .flogo{display:block;margin-bottom:var(--s3)} .flogo .logo-lockup{height:58px;width:auto;max-width:100%} @media (max-width:1240px){.logo .logo-lockup{height:48px}} @media (max-width:880px){.logo .logo-lockup{height:42px}} @media (max-width:420px){.logo .logo-lockup{height:36px}} /* ════════════════════════════════════════════════════════════ DEPARTMENT TILES — premium treatment A soft rounded plate instead of a hard circle, a larger illustration, and a hover that lifts rather than flashes. ════════════════════════════════════════════════════════════ */ .dshot{ width:88px;height:88px;border-radius:22px; background:linear-gradient(158deg,#FFFFFF 0%,var(--green-pastel2) 46%,var(--green-pastel) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(42,37,102,.06), 0 10px 22px rgba(42,37,102,.09); border:1px solid rgba(94,130,40,.14); transition:transform .42s cubic-bezier(.16,.8,.3,1), box-shadow .42s cubic-bezier(.16,.8,.3,1), border-color .42s; } .dshot img{width:78%;height:78%;transition:transform .42s cubic-bezier(.16,.8,.3,1)} .dshot::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(155deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 46%); } /* ── homepage grid on the dark band ──────────────────────── */ .deptgrid{gap:18px} .deptgrid a{ border-radius:18px;padding:26px 24px 24px; background:linear-gradient(168deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.035) 100%); border:1px solid rgba(255,255,255,.13); box-shadow:0 1px 2px rgba(0,0,0,.18); } .deptgrid a::before{width:3px;opacity:.85;border-radius:18px 0 0 18px} .deptgrid .dshot{width:78px;height:78px;border-radius:20px;margin-bottom:18px} .band-dark .dshot{ background:linear-gradient(158deg,#FFFFFF 0%,#F3F8EC 52%,#E4EFD5 100%); border-color:rgba(255,255,255,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(0,0,0,.30); } .deptgrid .dn{font-size:1.24rem;font-weight:600;letter-spacing:-.008em;line-height:1.2} .deptgrid .dv,.deptgrid .dfree{ display:inline-block;margin-top:10px;font-family:var(--disp);font-size:.78rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:6px; } .band-dark .deptgrid .dv{background:rgba(255,255,255,.1);color:#CFD2EE} .band-dark .deptgrid .dfree{background:rgba(128,176,72,.22);color:var(--green-soft)} .deptgrid a:hover{ transform:translateY(-4px); background:linear-gradient(168deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.06) 100%); border-color:rgba(183,212,147,.55); box-shadow:0 18px 40px rgba(0,0,0,.34); } .deptgrid a:hover .dshot{transform:translateY(-2px) scale(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 16px 32px rgba(0,0,0,.38)} .deptgrid a:hover .dshot img{transform:scale(1.07) rotate(-1.5deg)} /* ── departments page cards ──────────────────────────────── */ .dept{border-radius:18px;padding:30px 28px 26px;border-left-width:3px; transition:transform .42s cubic-bezier(.16,.8,.3,1), box-shadow .42s, border-color .42s} .dept .dshot{width:96px;height:96px;border-radius:24px;margin-bottom:20px} .dept h3{font-size:1.42rem;letter-spacing:-.012em} .dept p{line-height:1.6} .dept:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--green-mid)} .dept:hover .dshot{transform:translateY(-2px) scale(1.03)} .dept:hover .dshot img{transform:scale(1.06) rotate(-1.5deg)} .pill--vol{background:var(--indigo-050);color:var(--indigo-700)} .pill{padding:5px 11px;border-radius:6px;letter-spacing:.09em} @media (max-width:880px){ .deptgrid .dshot{width:68px;height:68px;border-radius:17px} .dept .dshot{width:82px;height:82px;border-radius:20px} .deptgrid a{padding:22px 20px} } @media (prefers-reduced-motion:reduce){ .dshot,.dshot img,.deptgrid a,.dept{transition:none} .deptgrid a:hover,.dept:hover{transform:none} } /* ════════════════════════════════════════════════════════════ DEPARTMENT TILES — premium treatment ════════════════════════════════════════════════════════════ */ /* the dark band gets depth rather than a flat fill */ .band-dark{ background: radial-gradient(900px 420px at 12% -10%, rgba(96,88,176,.55), transparent 62%), radial-gradient(700px 380px at 92% 8%, rgba(128,176,72,.16), transparent 60%), linear-gradient(170deg,#2A2566 0%,#312B74 55%,#282364 100%); } /* ── homepage grid ───────────────────────────────────────── */ .deptgrid{gap:18px} .deptgrid a{ position:relative;overflow:hidden;isolation:isolate; background:linear-gradient(165deg, rgba(255,255,255,.085), rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.13); border-radius:18px;padding:26px 24px 24px; box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 10px 30px rgba(12,10,40,.24); transition:transform .4s cubic-bezier(.2,.7,.25,1), border-color .3s, box-shadow .4s, background .3s; } .deptgrid a::before{ /* replaces the old left colour bar */ content:"";position:absolute;inset:-1px;border-radius:19px;padding:1px; background:linear-gradient(150deg, rgba(128,176,72,.85), rgba(96,88,176,.5) 45%, transparent 70%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; opacity:0;transition:opacity .35s;z-index:1; } .deptgrid a::after{ /* soft glow that wakes on hover */ content:"";position:absolute;width:190px;height:190px;right:-70px;top:-70px;border-radius:50%; background:radial-gradient(circle, rgba(128,176,72,.34), transparent 68%); opacity:0;transition:opacity .45s;z-index:0; } .deptgrid a:hover{ transform:translateY(-5px); background:linear-gradient(165deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border-color:rgba(183,212,147,.45); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 22px 46px rgba(10,8,34,.44); } .deptgrid a:hover::before,.deptgrid a:hover::after{opacity:1} .deptgrid a > *{position:relative;z-index:2} .deptgrid .dshot{ width:92px;height:92px;margin-bottom:16px; background:radial-gradient(circle at 50% 34%, #fff 0%, #F6FAF0 62%, #E4EFD4 100%); box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 10px 22px rgba(10,8,34,.32); } .deptgrid .dshot img{width:78%;height:78%} .deptgrid a:hover .dshot{transform:translateY(-2px) scale(1.05)} .deptgrid .dn{font-size:1.24rem;font-weight:600;color:#fff;letter-spacing:-.005em;line-height:1.2} .deptgrid .dv{color:#B6B4DE;font-size:.86rem;margin-top:5px} .deptgrid .dfree{color:var(--green-soft);margin-top:5px} /* an arrow that slides in, so the tile reads as a link */ .deptgrid a .go{ position:absolute;right:20px;bottom:20px;width:30px;height:30px;border-radius:50%; background:rgba(255,255,255,.1);display:grid;place-items:center; opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s,background .3s;z-index:2; } .deptgrid a:hover .go{opacity:1;transform:none;background:var(--green-mid)} .deptgrid a .go svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.2} /* ── departments page card ───────────────────────────────── */ .dept{ position:relative;overflow:hidden;background:#fff;border:1px solid var(--rule); border-left:0;border-radius:18px;padding:30px 28px 28px; box-shadow:0 1px 2px rgba(24,26,52,.04), 0 10px 26px rgba(24,26,52,.055); transition:transform .4s cubic-bezier(.2,.7,.25,1), box-shadow .4s, border-color .3s; } .dept::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,var(--green),var(--indigo-500));opacity:.85; } .dept::after{ content:"";position:absolute;right:-90px;top:-90px;width:220px;height:220px;border-radius:50%; background:radial-gradient(circle, var(--green-pastel2), transparent 70%);opacity:0;transition:opacity .45s; } .dept:hover{transform:translateY(-4px);border-color:#D8E0EE; box-shadow:0 2px 4px rgba(24,26,52,.05), 0 22px 48px rgba(24,26,52,.11)} .dept:hover::after{opacity:1} .dept > *{position:relative;z-index:1} .dept.is-soon::before{background:linear-gradient(180deg,#C9CCDA,#AFB3C6)} .dept .dshot{ width:112px;height:112px;margin-bottom:var(--s3); background:radial-gradient(circle at 50% 34%, #fff 0%, var(--green-pastel2) 58%, var(--green-pastel) 100%); box-shadow:0 0 0 1px rgba(94,130,40,.16), 0 12px 26px rgba(24,26,52,.10); } .dept h3{font-size:1.42rem} .dept p{font-size:.98rem;line-height:1.6} .pill{border-radius:999px;padding:5px 12px} @media (max-width:880px){ .deptgrid .dshot{width:78px;height:78px} .dept{padding:24px 22px} .dept .dshot{width:92px;height:92px} } /* squircle, with the radius scaled to the tile so it reads as one shape */ .dshot{border-radius:28%} .deptgrid .dshot{width:92px;height:92px;border-radius:26px;margin-bottom:16px} .dept .dshot{width:112px;height:112px;border-radius:32px;margin-bottom:var(--s3)} .deptgrid .dshot img,.dept .dshot img{width:76%;height:76%} @media (max-width:880px){ .deptgrid .dshot{width:76px;height:76px;border-radius:22px} .dept .dshot{width:94px;height:94px;border-radius:27px} } /* ── a real middle register between body and headline ────── */ .statement{font-family:var(--disp);font-size:clamp(1.55rem,2.5vw,2.15rem);font-weight:600; line-height:1.28;letter-spacing:-.012em;color:var(--indigo-700);max-width:22ch} .statement--light{color:#fff} .sub{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.55;color:var(--ink-600);max-width:46ch} /* ── hero: one full-bleed image, type over it ────────────── */ .hero--photo{min-height:min(92vh,820px);display:flex;align-items:flex-end;padding-block:0} .hero--photo .bg img{opacity:1;object-position:center 42%} .hero--photo::before{background: linear-gradient(to top, rgba(20,17,56,.94) 0%, rgba(24,20,66,.78) 34%, rgba(30,25,80,.34) 62%, rgba(36,30,92,.30) 100%), linear-gradient(105deg, rgba(20,17,56,.72) 0%, rgba(20,17,56,.10) 62%)} .hero--photo .wrap{display:block;padding-block:var(--s7) var(--s6);width:100%} .hero .since{margin-bottom:var(--s3)} .hero h1{max-width:15ch;font-size:clamp(2.8rem,6.6vw,5.2rem);text-shadow:0 2px 30px rgba(10,8,40,.35)} .hero p{max-width:50ch;font-size:1.2rem;color:#D8DAF2} .hero-cta{margin-top:var(--s4)} .hero-emerg{border-top-color:rgba(255,255,255,.26);max-width:560px} .herostrip{position:relative;z-index:2;margin-top:var(--s5);padding-top:var(--s3); border-top:1px solid rgba(255,255,255,.18);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)} .herostrip span{display:flex;flex-direction:column;gap:2px} .herostrip b{font-family:var(--disp);font-size:1.9rem;font-weight:700;color:#fff;line-height:1} .herostrip i{font-style:normal;font-size:.86rem;color:#B6B4DE} .mappanel{margin-top:var(--s3);border-radius:16px;overflow:hidden;color:#fff; background:linear-gradient(150deg,#2A2566,#443C99 60%,#524AAE);padding:var(--s4); display:flex;flex-direction:column;gap:14px;box-shadow:0 16px 40px rgba(24,26,52,.18)} .mappanel h3{color:#fff;font-size:1.35rem;margin:0} .mappanel p{color:#C3C1E6;margin:0;font-size:.96rem} .mappanel .coords{font-variant-numeric:tabular-nums;font-size:.86rem;color:#9E9BD0} @media (max-width:880px){ .hero--photo{min-height:0} .hero--photo .wrap{padding-block:var(--s6) var(--s5)} .herostrip b{font-size:1.5rem} } /* ── recognition strip ───────────────────────────────────── */ .recog{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--s6);align-items:start} .recog-lead .statement{margin:10px 0 var(--s4)} .recog-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.16)} .recog-list li{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.16);display:flex; flex-direction:column;gap:3px} .recog-list b{font-family:var(--disp);font-size:1.16rem;font-weight:600;color:#fff} .recog-list i{font-style:normal;font-size:.88rem;color:#A9A6D6} @media (max-width:880px){.recog{grid-template-columns:1fr;gap:var(--s4)}} /* ════════════════════════════════════════════════════════════ DEPARTMENT MARQUEE — two rows drifting in opposite directions ════════════════════════════════════════════════════════════ */ .marquee{position:relative;overflow:hidden;margin-inline:calc(50% - 50vw);padding-inline:0} .marquee + .marquee{margin-top:18px} .marquee::before,.marquee::after{ content:"";position:absolute;top:0;bottom:0;width:clamp(48px,9vw,160px);z-index:3;pointer-events:none} .marquee::before{left:0;background:linear-gradient(90deg,#2C2670 12%,rgba(44,38,112,0))} .marquee::after{right:0;background:linear-gradient(270deg,#2C2670 12%,rgba(44,38,112,0))} .mq-track{display:flex;gap:18px;width:max-content;will-change:transform; animation:mq-slide var(--mq-dur,72s) linear infinite} .marquee--rev .mq-track{animation-direction:reverse} @keyframes mq-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} /* pause when someone wants to read or interact */ .marquee:hover .mq-track, .marquee:focus-within .mq-track{animation-play-state:paused} /* the tiles themselves keep their treatment, just fixed width */ .mq-track > a{ flex:0 0 282px;width:282px;position:relative;overflow:hidden;isolation:isolate; background:linear-gradient(165deg, rgba(255,255,255,.085), rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:24px 22px 22px; text-decoration:none;display:flex;flex-direction:column; box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 10px 30px rgba(12,10,40,.24); transition:transform .35s cubic-bezier(.2,.7,.25,1), border-color .3s, background .3s, box-shadow .35s; } .mq-track > a:hover{transform:translateY(-4px); background:linear-gradient(165deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border-color:rgba(183,212,147,.45); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 20px 42px rgba(10,8,34,.42)} .mq-track .dshot{width:78px;height:78px;border-radius:22px;margin-bottom:14px; background:radial-gradient(circle at 50% 34%, #fff 0%, #F6FAF0 62%, #E4EFD4 100%); box-shadow:0 0 0 1px rgba(255,255,255,.35), 0 10px 22px rgba(10,8,34,.32)} .mq-track .dshot img{width:76%;height:76%} .mq-track .dn{font-family:var(--disp);font-size:1.16rem;font-weight:600;color:#fff;line-height:1.2} .mq-track .dv{font-size:.82rem;color:#B6B4DE;margin-top:6px} .mq-track .dfree{font-family:var(--disp);font-size:.74rem;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--green-soft);margin-top:6px} .mq-track .go{display:none} /* someone who prefers less motion gets a normal scrollable row */ @media (prefers-reduced-motion:reduce){ .mq-track{animation:none;width:auto} .marquee{overflow-x:auto;scrollbar-width:thin} } @media (max-width:880px){ .mq-track > a{flex-basis:238px;width:238px;padding:20px 18px 18px} .mq-track .dshot{width:66px;height:66px;border-radius:19px} } /* ════════════════════════════════════════════════════════════ RECOGNITION — award photography, not a bullet list ════════════════════════════════════════════════════════════ */ .recwall{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .reccard{ position:relative;overflow:hidden;border-radius:18px;display:flex;flex-direction:column; background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.14); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 14px 34px rgba(10,8,34,.30); transition:transform .4s cubic-bezier(.2,.7,.25,1), box-shadow .4s, border-color .3s; } .reccard:hover{transform:translateY(-5px);border-color:rgba(183,212,147,.45); box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 26px 54px rgba(8,6,30,.46)} .reccard .pic{position:relative;overflow:hidden;background:#1E1A4C} .reccard .pic img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .6s cubic-bezier(.2,.7,.25,1)} .reccard:hover .pic img{transform:scale(1.05)} .reccard .pic::after{content:"";position:absolute;inset:0; background:linear-gradient(to top, rgba(20,16,56,.72), rgba(20,16,56,0) 55%)} .reccard .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1} .reccard .src{font-family:var(--disp);font-size:.72rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--green-soft)} .reccard h3{font-size:1.12rem;color:#fff;line-height:1.24;margin:0} .reccard p{font-size:.88rem;color:#B0ADDC;margin:0;line-height:1.5} /* the Governor award leads, spanning two columns with a taller frame */ .reccard--lead{grid-column:span 2;grid-row:span 2} .reccard--lead .pic{flex:1;min-height:250px} .reccard--lead .body{padding:22px 26px 26px;gap:8px} .reccard--lead h3{font-size:1.55rem;letter-spacing:-.01em} .reccard--lead p{font-size:.96rem} .reccard .pic{height:150px} .reccard--lead .pic{height:auto} /* the certificate is a document, so show it whole rather than cropped */ .reccard--doc .pic{background:#F4F5FA} .reccard--doc .pic img{object-fit:contain;padding:10px} .reccard--doc .pic::after{display:none} @media (max-width:1100px){ .recwall{grid-template-columns:repeat(2,1fr)} .reccard--lead{grid-column:span 2;grid-row:auto} .reccard--lead .pic{min-height:220px} } @media (max-width:640px){ .recwall{grid-template-columns:1fr} .reccard--lead{grid-column:span 1} } /* footer lockup sits on a white plate so the navy shield and the wordmark both stay legible against the dark band */ .flogo{display:inline-block;background:#fff;border-radius:12px;padding:12px 16px; box-shadow:0 8px 24px rgba(8,6,30,.28);margin-bottom:var(--s3)} .flogo .logo-lockup{height:50px;width:auto;display:block} @media (max-width:880px){.flogo .logo-lockup{height:42px}} /* ════════════════════════════════════════════════════════════ ABOUT — milestones, facts, questions. Not an essay. ════════════════════════════════════════════════════════════ */ .miles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);counter-reset:ms} .mile{position:relative;padding-top:var(--s4);border-top:2px solid var(--rule)} .mile:nth-child(1){border-top-color:var(--green)} .mile:nth-child(2){border-top-color:var(--green-mid)} .mile:nth-child(3){border-top-color:var(--indigo-500)} .mile:nth-child(4){border-top-color:var(--indigo-700)} .mile .yr{font-family:var(--disp);font-size:2.6rem;font-weight:700;color:var(--indigo-700); line-height:.95;letter-spacing:-.025em;display:block} .mile h3{font-size:1.16rem;margin:12px 0 6px;color:var(--ink)} .mile p{font-size:.95rem;color:var(--ink-600);margin:0;line-height:1.55} .mile .shot{margin-top:16px;border-radius:12px;overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-sm)} .mile .shot img{width:100%;height:100%;object-fit:cover} .glance{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule); border:1px solid var(--rule);border-radius:16px;overflow:hidden} .glance div{background:#fff;padding:26px 20px;display:flex;flex-direction:column;gap:6px} .glance b{font-family:var(--disp);font-size:2.2rem;font-weight:700;color:var(--indigo-700);line-height:1; letter-spacing:-.02em} .glance span{font-size:.88rem;color:var(--ink-600);line-height:1.4} .glance div:nth-child(even) b{color:var(--green-mid)} /* FAQ accordion */ .faq{border-top:1px solid var(--rule)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{ cursor:pointer;list-style:none;padding:22px 48px 22px 0;position:relative; font-family:var(--disp);font-size:1.22rem;font-weight:600;color:var(--indigo-700);line-height:1.3; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-7px; border-right:2px solid var(--green-mid);border-bottom:2px solid var(--green-mid); transform:rotate(45deg);transition:transform .25s; } .faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px} .faq summary:hover{color:var(--indigo-900)} .faq .ans{padding:0 var(--s5) 24px 0;color:var(--ink-600);font-size:1rem;line-height:1.65;max-width:78ch} .faq .ans p{margin:0 0 10px} .faq .ans p:last-child{margin:0} @media (max-width:1100px){ .miles{grid-template-columns:repeat(2,1fr);gap:var(--s4)} .glance{grid-template-columns:repeat(3,1fr)} } @media (max-width:640px){ .miles{grid-template-columns:1fr} .glance{grid-template-columns:repeat(2,1fr)} .faq summary{font-size:1.08rem} } /* ════════════════════════════════════════════════════════════ HOMEPAGE STORY — asymmetric, overlapping, not another card grid ════════════════════════════════════════════════════════════ */ .storyband{background:var(--surface);position:relative;overflow:hidden} .storyband::before{content:"";position:absolute;left:0;top:0;bottom:0;width:38%; background:linear-gradient(120deg,var(--green-pastel2),#fff 70%);z-index:0} .storyband .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr; gap:var(--s7);align-items:center} .story-art{position:relative;padding:0 0 64px 0} .story-art .big{border-radius:20px;overflow:hidden;aspect-ratio:4/5; box-shadow:0 30px 70px rgba(24,26,52,.22)} .story-art .big img{width:100%;height:100%;object-fit:cover;display:block} .story-art .small{position:absolute;right:-28px;bottom:0;width:54%;border-radius:16px;overflow:hidden; border:6px solid #fff;box-shadow:0 24px 54px rgba(24,26,52,.26)} .story-art .small img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover} .story-art .badge{position:absolute;left:-22px;top:32px;z-index:2; background:var(--indigo-700);color:#fff;border-radius:14px;padding:16px 20px; box-shadow:0 18px 40px rgba(24,26,52,.3)} .story-art .badge b{display:block;font-family:var(--disp);font-size:2rem;font-weight:700;line-height:1} .story-art .badge i{font-style:normal;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase; color:var(--green-soft)} .story-copy h2{font-size:clamp(2rem,3.2vw,2.9rem);line-height:1.1;margin-bottom:var(--s3);max-width:17ch} .story-beats{list-style:none;margin:var(--s4) 0 0;padding:0} .story-beats li{display:grid;grid-template-columns:86px 1fr;gap:var(--s3); padding:18px 0;border-top:1px solid var(--rule)} .story-beats li:last-child{border-bottom:1px solid var(--rule)} .story-beats .yr{font-family:var(--disp);font-size:1.22rem;font-weight:700;color:var(--green-mid); letter-spacing:.02em;padding-top:2px} .story-beats p{margin:0;font-size:1rem;color:var(--ink-600);line-height:1.6} .story-close{margin-top:var(--s4);font-family:var(--disp);font-size:1.3rem;font-weight:600; color:var(--indigo-700);line-height:1.35;max-width:32ch} @media (max-width:1000px){ .storyband::before{display:none} .storyband .wrap{grid-template-columns:1fr;gap:var(--s5)} .story-art{padding-bottom:0;max-width:520px} .story-art .small{position:static;width:auto;margin-top:16px;border-width:0} .story-art .badge{left:16px;top:16px} } /* ── detail pages: doctors and specialities ──────────────── */ .pagehero--tight{padding-block:var(--s6) var(--s5);min-height:0} .pagehero--tight h1{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:20ch} .docname{font-family:var(--disp);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;color:#fff; margin:6px 0 4px;letter-spacing:-.01em} .freeflag{display:inline-block;font-family:var(--disp);font-size:.84rem;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:#1E2A12;background:var(--green); border-radius:999px;padding:6px 14px;margin-top:14px} .opd{border-top:1px solid var(--rule)} .opd div{display:grid;grid-template-columns:140px 1fr;gap:var(--s3);padding:16px 0; border-bottom:1px solid var(--rule)} .opd span{font-family:var(--disp);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-400);padding-top:3px} .opd b{font-family:var(--disp);font-size:1.12rem;font-weight:600;color:var(--indigo-700)} .opd b a{color:inherit} .ticklist{list-style:none;margin:var(--s3) 0 0;padding:0;columns:2;column-gap:var(--s5)} .ticklist li{padding:9px 0 9px 26px;position:relative;font-size:1rem;color:var(--ink-600); border-bottom:1px solid var(--rule);break-inside:avoid} .ticklist li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:9px;border-radius:2px; background:var(--green-pastel);border:1.5px solid var(--green-mid)} .peers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .peers li.none{grid-column:1/-1;color:var(--ink-400);font-size:.95rem} .peers a{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--rule); border-radius:14px;padding:20px;text-decoration:none;box-shadow:var(--shadow-sm); transition:transform .3s,box-shadow .3s,border-color .3s} .peers a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--indigo-500)} .peers b{font-family:var(--disp);font-size:1.1rem;color:var(--indigo-700);line-height:1.2} .peers i{font-style:normal;font-size:.84rem;color:var(--ink-600);line-height:1.45} .peers em{font-style:normal;font-size:.8rem;color:var(--green-mid);font-weight:500;margin-top:4px} .dshot-wrap{display:block;margin-bottom:var(--s3)} .dshot-wrap .dshot{width:96px;height:96px} .flagnote{background:#FBF4E2;border-left:4px solid #D6A02E;border-radius:8px;padding:12px 16px; color:#4A3B14;font-size:.92rem;margin-top:var(--s3)} @media (max-width:1100px){.peers{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.peers{grid-template-columns:1fr}.ticklist{columns:1}} /* ════════════════════════════════════════════════════════════ TRIAGE HERO — the three states a visitor arrives in ════════════════════════════════════════════════════════════ */ .triage{position:relative;z-index:4;margin-top:calc(var(--s6) * -1)} .triage .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .tcard{ position:relative;overflow:hidden;isolation:isolate;border-radius:20px;padding:30px 28px 26px; text-decoration:none;display:flex;flex-direction:column;gap:8px;min-height:190px; background:#fff;border:1px solid var(--rule);box-shadow:0 20px 50px rgba(24,26,52,.16); transition:transform .4s cubic-bezier(.2,.7,.25,1), box-shadow .4s; } .tcard:hover{transform:translateY(-6px);box-shadow:0 30px 64px rgba(24,26,52,.24)} .tcard .t-k{font-family:var(--disp);font-size:.76rem;font-weight:600;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-400)} .tcard h2{font-size:1.72rem;line-height:1.12;color:var(--indigo-700);margin:0} .tcard p{font-size:.95rem;color:var(--ink-600);margin:0} .tcard .t-go{margin-top:auto;font-family:var(--disp);font-weight:600;font-size:1rem; color:var(--green-mid);display:inline-flex;align-items:center;gap:8px} .tcard .t-go::after{content:"→";transition:transform .3s} .tcard:hover .t-go::after{transform:translateX(5px)} .tcard::before{content:"";position:absolute;inset:0 0 auto 0;height:5px} .tcard--emerg::before{background:var(--red)} .tcard--emerg h2,.tcard--emerg .t-go{color:var(--red)} .tcard--doc::before{background:var(--indigo-700)} .tcard--free::before{background:var(--green)} .tcard--free{background:linear-gradient(160deg,var(--green-pastel2),#fff 70%)} /* ════════════════════════════════════════════════════════════ TODAY — computed live, not written ════════════════════════════════════════════════════════════ */ .today{background:var(--indigo-900);color:#fff;position:relative;overflow:hidden} .today::before{content:"";position:absolute;inset:0; background:radial-gradient(760px 400px at 8% -10%,rgba(96,88,176,.55),transparent 62%), radial-gradient(620px 340px at 92% 10%,rgba(128,176,72,.18),transparent 60%)} .today .wrap{position:relative;z-index:1} .today h2{color:#fff} .todaybar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:var(--s5)} .livedot{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(128,176,72,.22)} .livedot.is-shut{background:#E2705F;box-shadow:0 0 0 5px rgba(226,112,95,.2)} .todaybar .st{font-family:var(--disp);font-size:1rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--green-soft)} .todaybar .st.is-shut{color:#F0A99B} .todaybar .dt{font-size:.95rem;color:#A9A6D6} .todaygrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s6);align-items:start} .freecard{ border-radius:22px;padding:34px 32px;color:#12210B; background:linear-gradient(155deg,#BFDD9C,#9BC96F 60%,#8DBE5E); box-shadow:0 26px 60px rgba(10,30,4,.36);position:relative;overflow:hidden; } .freecard::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px; border-radius:50%;background:rgba(255,255,255,.22)} .freecard .lab{font-family:var(--disp);font-size:.78rem;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:#3A5A18;position:relative} .freecard .spec{font-family:var(--disp);font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700; line-height:1.05;letter-spacing:-.02em;margin:10px 0 8px;position:relative} .freecard p{margin:0;font-size:1rem;color:#26400F;position:relative;max-width:30ch} .freecard .btn{margin-top:22px;position:relative} .freecard .wkl{position:relative;margin-top:22px;padding-top:16px;border-top:1px solid rgba(20,45,5,.18); display:flex;flex-wrap:wrap;gap:6px} .freecard .wkl span{font-family:var(--disp);font-size:.78rem;font-weight:600;letter-spacing:.08em; text-transform:uppercase;padding:5px 10px;border-radius:999px;color:#3A5A18;background:rgba(255,255,255,.45)} .freecard .wkl span.on{background:#17320A;color:#CFE8AE} .docnow{border-top:1px solid rgba(255,255,255,.16)} .docnow li{list-style:none;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center; padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.14)} .docnow .av{width:44px;height:44px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(160deg,var(--green),var(--indigo-500));color:#fff; font-family:var(--disp);font-weight:700;font-size:.95rem} .docnow b{font-family:var(--disp);font-size:1.1rem;font-weight:600;color:#fff;display:block;line-height:1.2} .docnow i{font-style:normal;font-size:.84rem;color:#A9A6D6} .docnow .tm{font-variant-numeric:tabular-nums;font-size:.9rem;color:#CFCDEA;text-align:right} .docnow .more{padding:16px 2px 0;font-size:.92rem;color:#A9A6D6} @media (max-width:1000px){ .triage .wrap{grid-template-columns:1fr} .triage{margin-top:calc(var(--s5) * -1)} .todaygrid{grid-template-columns:1fr;gap:var(--s4)} } /* ════════════════════════════════════════════════════════════ VIDEO SLOTS — drop an mp4 in and it plays; until then the poster frame shows, so nothing ever looks broken. ════════════════════════════════════════════════════════════ */ .hero--photo .bg video{width:100%;height:100%;object-fit:cover;display:block} .videoframe{position:relative;border-radius:20px;overflow:hidden;background:#1E1A4C; box-shadow:0 30px 70px rgba(24,26,52,.22)} .videoframe video,.videoframe img{width:100%;height:100%;object-fit:cover;display:block} .videoframe .playbtn{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3; width:74px;height:74px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.94);display:grid;place-items:center; box-shadow:0 14px 34px rgba(10,8,34,.4);transition:transform .3s,background .3s} .videoframe .playbtn:hover{transform:translate(-50%,-50%) scale(1.07);background:#fff} .videoframe .playbtn svg{width:26px;height:26px;fill:var(--indigo-700);margin-left:4px} .videoframe.is-playing .playbtn{opacity:0;pointer-events:none} .videoframe::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(20,16,56,.42),transparent 52%)} .videoframe.is-playing::after{opacity:0;transition:opacity .3s} /* ════════════════════════════════════════════════════════════ FREE-CLINIC WEEK RIBBON ════════════════════════════════════════════════════════════ */ .weekribbon{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .wday{ position:relative;background:#fff;border:1px solid var(--rule);border-radius:18px; padding:22px 18px 20px;text-decoration:none;display:flex;flex-direction:column;align-items:flex-start; gap:10px;box-shadow:var(--shadow-sm);overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.25,1),box-shadow .35s,border-color .3s; } .wday:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--green-mid)} .wday .dshot{width:64px;height:64px;border-radius:18px;margin:0} .wday .dshot img{width:74%;height:74%} .wday .d{font-family:var(--disp);font-size:.78rem;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--green-mid)} .wday .n{font-family:var(--disp);font-size:1.2rem;font-weight:600;color:var(--indigo-700);line-height:1.16} .wday .free{margin-top:auto;font-family:var(--disp);font-size:.74rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:#1E2A12;background:var(--green);border-radius:999px;padding:4px 10px} .wday.is-today{border-color:var(--green-mid);box-shadow:0 0 0 3px rgba(94,130,40,.16),var(--shadow-md)} .wday .todayflag{position:absolute;top:0;right:0;background:var(--green-mid);color:#fff; font-family:var(--disp);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:5px 12px;border-bottom-left-radius:12px;display:none} .wday.is-today .todayflag{display:block} /* ════════════════════════════════════════════════════════════ TIMELINE — one connected rail, equal treatment for each step ════════════════════════════════════════════════════════════ */ .rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4); padding-top:var(--s5)} .rail::before{content:"";position:absolute;left:0;right:0;top:calc(var(--s5) - 9px);height:2px; background:linear-gradient(90deg,var(--green),var(--green-mid) 34%,var(--indigo-500) 68%,var(--indigo-700))} .railstep{position:relative} .railstep::before{content:"";position:absolute;left:0;top:calc(-1 * var(--s5) + 3px); width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--green-mid)} .railstep:nth-child(3)::before,.railstep:nth-child(4)::before{border-color:var(--indigo-700)} .railstep .yr{font-family:var(--disp);font-size:2.5rem;font-weight:700;color:var(--indigo-700); line-height:1;letter-spacing:-.025em;display:block} .railstep h3{font-size:1.14rem;margin:12px 0 6px;color:var(--ink)} .railstep p{font-size:.95rem;color:var(--ink-600);margin:0;line-height:1.55} @media (max-width:1000px){ .weekribbon{grid-template-columns:repeat(3,1fr)} .rail{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)} .rail::before{display:none} .railstep{padding-left:var(--s4);border-left:2px solid var(--rule)} .railstep::before{left:-9px;top:4px} } @media (max-width:620px){ .weekribbon{grid-template-columns:repeat(2,1fr)} .rail{grid-template-columns:1fr} } /* ── CSR page video column ───────────────────────────────── */ .csrvideo{position:sticky;top:104px} .csrvideo .videoframe{aspect-ratio:4/5} .videoframe .vlabel{ position:absolute;left:18px;bottom:18px;z-index:3; font-family:var(--disp);font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:#12210B;background:var(--green);border-radius:999px;padding:6px 14px; } .videoframe.is-playing .vlabel{display:none} .vcap{margin:14px 0 0;font-size:.92rem;color:var(--ink-400);line-height:1.5} .vstats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--s3)} .vstats div{background:var(--green-pastel2);border:1px solid #D8E8C8;border-radius:14px;padding:18px 16px} .vstats b{display:block;font-family:var(--disp);font-size:2rem;font-weight:700;color:var(--green-mid);line-height:1} .vstats span{display:block;font-size:.86rem;color:var(--ink-600);margin-top:5px;line-height:1.35} @media (max-width:880px){.csrvideo{position:static}.csrvideo .videoframe{aspect-ratio:16/10}} /* ════════════════════════════════════════════════════════════ CHAPTERS — illustrated milestones with overlapping year tabs ════════════════════════════════════════════════════════════ */ .chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:ch} .chapter{counter-increment:ch;position:relative;display:flex;flex-direction:column} .chapter .frame{ position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#F4F5FA; box-shadow:0 2px 4px rgba(24,26,52,.04), 0 18px 40px rgba(24,26,52,.10); transition:transform .45s cubic-bezier(.2,.7,.25,1), box-shadow .45s; } .chapter:hover .frame{transform:translateY(-6px); box-shadow:0 4px 8px rgba(24,26,52,.05), 0 30px 60px rgba(24,26,52,.16)} .chapter .frame svg,.chapter .frame img{width:100%;height:100%;display:block;object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.25,1)} .chapter:hover .frame svg,.chapter:hover .frame img{transform:scale(1.045)} .chapter .frame::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(68,60,153,.08)} .chapter .frame--photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(30,26,76,.30),transparent 45%)} /* chapter number, top right of the frame */ .chapter .frame .num{position:absolute;top:14px;right:16px;z-index:2; font-family:var(--disp);font-size:.78rem;font-weight:700;letter-spacing:.16em; color:var(--indigo-700);background:rgba(255,255,255,.88);backdrop-filter:blur(4px); border-radius:999px;padding:5px 11px} .chapter .frame--photo .num{color:#fff;background:rgba(30,26,76,.45)} /* the year tab overlaps the bottom edge of the frame */ .chapter .tab{ position:relative;z-index:3;align-self:flex-start;margin:-30px 0 0 18px; background:#fff;border-radius:14px;padding:10px 18px 8px; box-shadow:0 10px 26px rgba(24,26,52,.14); } .chapter .tab b{font-family:var(--disp);font-size:2.3rem;font-weight:700;line-height:1; letter-spacing:-.025em;color:var(--indigo-700);display:block} .chapter:nth-child(1) .tab{border-bottom:3px solid var(--green)} .chapter:nth-child(2) .tab{border-bottom:3px solid var(--green-mid)} .chapter:nth-child(3) .tab{border-bottom:3px solid var(--indigo-500)} .chapter:nth-child(4) .tab{border-bottom:3px solid var(--indigo-700)} .chapter .txt{padding:18px 6px 0} .chapter h3{font-size:1.2rem;color:var(--ink);margin:0 0 6px;line-height:1.2} .chapter p{font-size:.95rem;color:var(--ink-600);margin:0;line-height:1.56} /* a quiet connector between chapters on wide screens */ @media (min-width:1101px){ .chapter:not(:last-child)::after{ content:"";position:absolute;top:calc(75% * 0 + 0px);right:-18px;width:14px;height:2px; display:none} } @media (max-width:1100px){.chapters{grid-template-columns:repeat(2,1fr);gap:36px 22px}} @media (max-width:620px){.chapters{grid-template-columns:1fr}} /* ════════════════════════════════════════════════════════════ NUMBERS BENTO — every figure carries a visual ════════════════════════════════════════════════════════════ */ .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:18px} .bx{position:relative;overflow:hidden;border-radius:20px;background:#fff;border:1px solid var(--rule); box-shadow:0 2px 4px rgba(24,26,52,.04),0 14px 34px rgba(24,26,52,.07); padding:24px;display:flex;flex-direction:column;justify-content:flex-end; transition:transform .45s cubic-bezier(.2,.7,.25,1),box-shadow .45s} .bx:hover{transform:translateY(-5px);box-shadow:0 4px 8px rgba(24,26,52,.05),0 26px 54px rgba(24,26,52,.13)} .bx b{font-family:var(--disp);font-size:3rem;font-weight:700;line-height:.95;letter-spacing:-.03em; color:var(--indigo-700);position:relative;z-index:2;display:block} .bx span.l{font-size:.96rem;color:var(--ink-600);margin-top:6px;position:relative;z-index:2;line-height:1.35} /* the lead tile: a real photograph */ .bx--hero{grid-column:span 2;grid-row:span 2;padding:32px;border:0} .bx--hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.25,1)} .bx--hero:hover img.bg{transform:scale(1.05)} .bx--hero::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(24,20,70,.92) 0%,rgba(24,20,70,.55) 42%,rgba(24,20,70,.05) 78%)} .bx--hero b{color:#fff;font-size:clamp(4.5rem,8vw,6.6rem)} .bx--hero span.l{color:#DAD8F2;font-size:1.12rem;max-width:28ch} .bx--hero .tag{position:absolute;top:22px;left:22px;z-index:2;font-family:var(--disp);font-size:.74rem; font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#12210B;background:var(--green); border-radius:999px;padding:6px 13px} /* illustrated tiles */ .bx .art{position:absolute;top:18px;right:18px;z-index:1} .bx .art .dshot{width:86px;height:86px;border-radius:24px;margin:0} .bx:hover .art .dshot{transform:rotate(-4deg) scale(1.06)} .bx--green{background:linear-gradient(160deg,var(--green-pastel2),#fff 70%)} .bx--green b{color:var(--green-mid)} .bx--violet{background:linear-gradient(160deg,var(--indigo-050),#fff 70%)} /* departments tile: a small mosaic */ .bx .mosaic{position:absolute;top:18px;right:18px;display:grid;grid-template-columns:repeat(2,44px);gap:7px;z-index:1} .bx .mosaic .dshot{width:44px;height:44px;border-radius:13px;margin:0} .bx .mosaic .dshot img{width:78%;height:78%} /* photo accent tile */ .bx--photo{padding:24px;border:0} .bx--photo img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9} .bx--photo::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(24,20,70,.9),rgba(24,20,70,.1) 70%)} .bx--photo b{color:#fff}.bx--photo span.l{color:#DAD8F2} /* the trust tile runs the full width */ .bx--wide{grid-column:1 / -1;grid-row:span 1;flex-direction:row;align-items:center;gap:28px; justify-content:flex-start;background:linear-gradient(120deg,#2A2566,#443C99 60%,#524AAE);border:0} .bx--wide .shieldimg{width:96px;height:96px;flex:0 0 auto;border-radius:22px;background:#fff; display:grid;place-items:center;box-shadow:0 12px 28px rgba(8,6,30,.3)} .bx--wide .shieldimg img{width:70%;height:auto} .bx--wide b{color:#fff;font-size:4rem} .bx--wide .wt{display:flex;flex-direction:column} .bx--wide span.l{color:#D0CEEE;font-size:1.1rem;margin-top:4px} .bx--wide .wq{margin-left:auto;max-width:34ch;font-family:var(--disp);font-size:1.28rem;font-weight:600; color:#fff;line-height:1.35;border-left:3px solid var(--green);padding-left:22px} @media (max-width:1100px){ .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px} .bx--hero{grid-column:span 2;grid-row:span 2} .bx--wide{flex-wrap:wrap}.bx--wide .wq{margin-left:0;max-width:none} } @media (max-width:620px){ .bento{grid-template-columns:1fr;grid-auto-rows:auto} .bx{min-height:170px}.bx--hero{grid-column:span 1;grid-row:span 1;min-height:320px} .bx--wide{grid-column:span 1} } /* ════════════════════════════════════════════════════════════ VISION & MISSION — photo-led statements ════════════════════════════════════════════════════════════ */ .vm{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:var(--s7)} .vmcard{position:relative;overflow:hidden;border-radius:22px;min-height:400px; display:flex;flex-direction:column;justify-content:flex-end;padding:34px 34px 36px;color:#fff; box-shadow:0 22px 50px rgba(24,26,52,.18)} .vmcard img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.25,1)} .vmcard:hover img.bg{transform:scale(1.05)} .vmcard::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,rgba(26,22,72,.95) 0%,rgba(26,22,72,.78) 38%,rgba(26,22,72,.2) 75%,rgba(26,22,72,.05) 100%)} .vmcard--mission::before{background:linear-gradient(to top,rgba(24,44,10,.95) 0%,rgba(40,64,18,.8) 38%,rgba(40,64,18,.18) 75%,rgba(40,64,18,.04) 100%)} .vmcard > *{position:relative;z-index:2} .vmcard .vk{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-bottom:18px; font-family:var(--disp);font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:#12210B;background:var(--green);border-radius:999px;padding:7px 14px} .vmcard--mission .vk{background:#fff;color:var(--green-mid)} .vmcard .vk svg{width:15px;height:15px} .vmcard blockquote{margin:0;font-family:var(--disp);font-size:clamp(1.45rem,2.2vw,1.9rem);font-weight:600; line-height:1.28;letter-spacing:-.01em;max-width:26ch} .vmcard blockquote::before{content:"C";display:block;font-size:4rem;line-height:.6;color:var(--green); margin-bottom:10px;font-family:Georgia,serif} .vmcard--mission blockquote::before{color:#C9E3A8} /* ════════════════════════════════════════════════════════════ VALUES — a diagram around the trust's mark ════════════════════════════════════════════════════════════ */ .vdia{display:grid;grid-template-columns:1fr 300px 1fr;grid-template-rows:auto auto; gap:26px 58px;align-items:center;position:relative} .vcore{grid-column:2;grid-row:1 / 3;justify-self:center;position:relative;width:280px;height:280px; display:grid;place-items:center} .vcore::before,.vcore::after{content:"";position:absolute;border-radius:50%; border:1.5px dashed rgba(68,60,153,.25)} .vcore::before{inset:-26px} .vcore::after{inset:-54px;border-style:solid;border-color:rgba(128,176,72,.18)} .vcore .disc{position:relative;z-index:1;width:100%;height:100%;border-radius:50%; background:radial-gradient(circle at 35% 28%,#5A52B8,#443C99 55%,#2A2566); box-shadow:0 26px 60px rgba(42,37,102,.4), inset 0 2px 0 rgba(255,255,255,.12); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center} .vcore .disc .sh{width:92px;height:92px;border-radius:26px;background:#fff;display:grid;place-items:center; box-shadow:0 10px 26px rgba(8,6,30,.3)} .vcore .disc .sh img{width:70%} .vcore .disc b{font-family:var(--disp);font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:.01em} .vcore .disc i{font-style:normal;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-soft)} .vnode{position:relative;background:#fff;border:1px solid var(--rule);border-radius:18px;padding:22px 22px 22px 24px; display:flex;gap:16px;align-items:flex-start;box-shadow:0 2px 4px rgba(24,26,52,.04),0 14px 34px rgba(24,26,52,.07); transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s} .vnode:hover{transform:translateY(-4px);box-shadow:0 4px 8px rgba(24,26,52,.05),0 24px 50px rgba(24,26,52,.12)} .vnode .ic{flex:0 0 auto;width:52px;height:52px;border-radius:15px;display:grid;place-items:center; background:var(--indigo-050);color:var(--indigo-700)} .vnode:nth-of-type(2n) .ic{background:var(--green-pastel);color:var(--green-mid)} .vnode .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .vnode .n{font-family:var(--disp);font-size:.74rem;font-weight:700;letter-spacing:.16em;color:var(--ink-400);display:block;margin-bottom:4px} .vnode h3{font-size:1.14rem;color:var(--ink);margin:0;line-height:1.3} /* connector from each node to the core */ .vnode::after{content:"";position:absolute;top:50%;height:2px;width:58px; background:linear-gradient(90deg,var(--green),var(--indigo-500))} .vnode.l::after{right:-58px} .vnode.r::after{left:-58px;background:linear-gradient(270deg,var(--green),var(--indigo-500))} .vnode.l{grid-column:1}.vnode.r{grid-column:3} .qpol{margin-top:var(--s6);display:grid;grid-template-columns:auto 1fr auto;gap:var(--s4);align-items:center; background:linear-gradient(120deg,var(--green-pastel2),#fff 70%);border:1px solid #D8E8C8;border-radius:20px; padding:26px 30px} .qpol .qi{width:62px;height:62px;border-radius:18px;background:var(--green-mid);color:#fff;display:grid;place-items:center} .qpol .qi svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .qpol h3{font-size:1.3rem;color:var(--indigo-700);margin:0 0 4px} .qpol p{margin:0;color:var(--ink-600);font-size:.98rem;max-width:70ch} @media (max-width:1100px){ .vdia{grid-template-columns:1fr 1fr;gap:18px} .vcore{grid-column:1 / -1;grid-row:auto;order:-1;margin:40px 0 50px;width:240px;height:240px} .vnode.l,.vnode.r{grid-column:auto} .vnode::after{display:none} } @media (max-width:800px){ .vm{grid-template-columns:1fr} .vmcard{min-height:340px} .vdia{grid-template-columns:1fr} .qpol{grid-template-columns:1fr;text-align:left} } /* fixes: stronger overlay for legibility, clean icon strokes, white core text */ .vmcard blockquote::before{content:none} .vmcard{justify-content:flex-end} .vmcard::before{background:linear-gradient(to top,rgba(26,22,72,.96) 0%,rgba(26,22,72,.86) 45%,rgba(26,22,72,.45) 78%,rgba(26,22,72,.22) 100%)} .vmcard--mission::before{background:linear-gradient(to top,rgba(22,40,8,.96) 0%,rgba(34,58,14,.86) 45%,rgba(34,58,14,.45) 78%,rgba(34,58,14,.2) 100%)} .vmcard blockquote{text-shadow:0 2px 18px rgba(0,0,0,.35);border-left:3px solid var(--green);padding-left:20px} .vmcard--mission blockquote{border-left-color:#C9E3A8} .vk svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .vcore .disc b{color:#fff !important} .vcore .disc i{color:var(--green-soft) !important} /* the photo must sit beneath its overlay, not above it */ .vmcard > img.bg{z-index:0} /* ════════════════════════════════════════════════════════════ INFRASTRUCTURE — real photographs, then illustrated groups ════════════════════════════════════════════════════════════ */ .infra-photos{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:var(--s6)} .infra-photos figure{position:relative;margin:0;border-radius:20px;overflow:hidden;min-height:320px; box-shadow:0 18px 44px rgba(24,26,52,.14)} .infra-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.25,1)} .infra-photos figure:hover img{transform:scale(1.05)} .infra-photos figure::after{content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(26,22,72,.86),rgba(26,22,72,0) 55%)} .infra-photos figcaption{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#fff} .infra-photos figcaption b{display:block;font-family:var(--disp);font-size:1.45rem;font-weight:700;line-height:1.15} .infra-photos figcaption span{font-size:.92rem;color:#D4D2EE} .infra-photos .chip{position:absolute;top:18px;left:18px;z-index:2;font-family:var(--disp);font-size:.72rem; font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#12210B;background:var(--green); border-radius:999px;padding:6px 12px} .fgroups{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .fg{background:#fff;border:1px solid var(--rule);border-radius:20px;overflow:hidden; box-shadow:0 2px 4px rgba(24,26,52,.04),0 14px 34px rgba(24,26,52,.07);display:flex;flex-direction:column; transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s} .fg:hover{transform:translateY(-5px);box-shadow:0 4px 8px rgba(24,26,52,.05),0 26px 54px rgba(24,26,52,.13)} .fg .fh{position:relative;height:168px;display:flex;align-items:center;justify-content:center;gap:14px;overflow:hidden} .fg:nth-child(1) .fh{background:radial-gradient(circle at 50% 40%,#fff,#F0E9F4 55%,#E2DDF3)} .fg:nth-child(2) .fh{background:radial-gradient(circle at 50% 40%,#fff,#E9F1F8 55%,#DCE8F4)} .fg:nth-child(3) .fh{background:radial-gradient(circle at 50% 40%,#fff,var(--green-pastel2) 55%,var(--green-pastel))} .fg .fh .dshot{width:92px;height:92px;border-radius:26px;margin:0; box-shadow:0 12px 28px rgba(24,26,52,.14)} .fg .fh .dshot:nth-child(2){width:74px;height:74px;border-radius:21px;transform:translateY(16px)} .fg:hover .fh .dshot{transform:translateY(-3px) scale(1.04)} .fg:hover .fh .dshot:nth-child(2){transform:translateY(12px) scale(1.04)} .fg .fh svg.ct{width:100%;height:100%;object-fit:cover} .fg .fh .cnt{position:absolute;top:14px;right:14px;font-family:var(--disp);font-size:.74rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--indigo-700);background:rgba(255,255,255,.9); border-radius:999px;padding:5px 11px} .fg .fb{padding:22px 24px 24px} .fg h3{font-size:1.3rem;color:var(--indigo-700);margin:0 0 12px} .fg ul{list-style:none;margin:0;padding:0} .fg li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule); font-size:.96rem;color:var(--ink-600)} .fg li:last-child{border-bottom:0} .fg li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--green-mid); box-shadow:0 0 0 4px var(--green-pastel)} .fg li.soon{color:var(--ink-400)} .fg li.soon::before{background:#C9CCDA;box-shadow:0 0 0 4px #EEEFF5} @media (max-width:1100px){.fgroups{grid-template-columns:1fr}.infra-photos{grid-template-columns:1fr}} /* chapters as an archival photo series */ .chapter .frame{aspect-ratio:16/10;background:#E8E4DC} .chapter .frame img{object-fit:cover} .chapter .frame .cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:2; font-family:var(--disp);font-size:.78rem;font-weight:600;letter-spacing:.06em;color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.5);opacity:.95} .chapter .frame::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(20,16,40,.5),transparent 42%)} .chapter .tab{margin-top:-26px} /* captions ride the top edge so the year tab never covers them */ .chapter .frame .cap{top:14px;bottom:auto;left:14px;right:64px; background:rgba(20,16,40,.52);backdrop-filter:blur(4px);border-radius:999px;padding:5px 12px; width:max-content;max-width:calc(100% - 78px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; text-shadow:none;font-size:.74rem} .chapter .frame::before{background:linear-gradient(to bottom,rgba(20,16,40,.28),transparent 34%)} /* vision: the building itself; mission: proof it is being delivered */ .vmcard--vision img.bg{object-position:center 40%} .vmcard--proof{background:linear-gradient(155deg,#2E4A18 0%,#3E6222 55%,#4E7A2C 100%);justify-content:space-between} .vmcard--proof::before{content:none} .vmcard--proof::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%; background:radial-gradient(circle,rgba(201,227,168,.22),transparent 70%);z-index:0} .vproof{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px;position:relative;z-index:2} .vproof div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:16px 14px} .vproof svg{width:22px;height:22px;fill:none;stroke:#C9E3A8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px} .vproof b{display:block;font-family:var(--disp);font-size:1.9rem;font-weight:700;line-height:1;color:#fff;letter-spacing:-.02em} .vproof span{display:block;font-size:.8rem;color:#D6E9C0;margin-top:6px;line-height:1.35} @media (max-width:620px){.vproof{grid-template-columns:1fr}} /* ════════════════════════════════════════════════════════════ VALUES — four illustrated commitments ════════════════════════════════════════════════════════════ */ .vals{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .vals::before{content:"";position:absolute;left:8%;right:8%;top:calc(var(--vh,150px) + 0px);height:2px;z-index:0; background:linear-gradient(90deg,var(--green),var(--green-mid) 34%,var(--indigo-500) 68%,var(--indigo-700));opacity:.35} .val{position:relative;z-index:1;background:#fff;border:1px solid var(--rule);border-radius:22px;overflow:hidden; display:flex;flex-direction:column; box-shadow:0 2px 4px rgba(24,26,52,.04),0 16px 38px rgba(24,26,52,.08); transition:transform .45s cubic-bezier(.2,.7,.25,1),box-shadow .45s} .val:hover{transform:translateY(-6px);box-shadow:0 4px 8px rgba(24,26,52,.05),0 28px 58px rgba(24,26,52,.15)} .val .art{aspect-ratio:16/10;overflow:hidden} .val .art svg{width:100%;height:100%;display:block;transition:transform .7s cubic-bezier(.2,.7,.25,1)} .val:hover .art svg{transform:scale(1.06)} .val .body{padding:0 24px 26px;position:relative} .val .no{position:relative;margin:-22px 0 14px;width:44px;height:44px;border-radius:14px;display:grid;place-items:center; font-family:var(--disp);font-size:1.02rem;font-weight:700;color:#fff; background:linear-gradient(150deg,var(--indigo-500),var(--indigo-700));box-shadow:0 10px 22px rgba(42,37,102,.3)} .val:nth-child(odd) .no{background:linear-gradient(150deg,var(--green),var(--green-mid));box-shadow:0 10px 22px rgba(60,90,20,.28)} .val h3{font-size:1.22rem;color:var(--indigo-700);margin:0 0 8px;line-height:1.22} .val p{font-size:.94rem;color:var(--ink-600);margin:0;line-height:1.55} @media (max-width:1100px){.vals{grid-template-columns:repeat(2,1fr)}.vals::before{display:none}} @media (max-width:620px){.vals{grid-template-columns:1fr}} /* ════════════════════════════════════════════════════════════ ROLLING FACILITY HEADERS — video first, then graphics ════════════════════════════════════════════════════════════ */ .fg .fh.roll{height:210px;display:block;padding:0} .roll .slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; opacity:0;transform:scale(1.04);transition:opacity .9s ease, transform 3.6s ease} .roll .slide.is-on{opacity:1;transform:scale(1)} .roll .slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .roll .slide svg.ct{width:100%;height:100%} .roll .slide .dshot{width:124px;height:124px;border-radius:34px;box-shadow:0 16px 36px rgba(24,26,52,.18)} .roll .slide .dshot img{width:76%;height:76%} .roll .slide .lbl{position:absolute;left:16px;bottom:14px;z-index:3;font-family:var(--disp);font-size:.76rem; font-weight:600;letter-spacing:.06em;color:var(--indigo-700);background:rgba(255,255,255,.9); backdrop-filter:blur(4px);border-radius:999px;padding:5px 12px} .roll .slide--video .lbl{color:#fff;background:rgba(20,16,40,.5)} .roll .dots{position:absolute;right:16px;bottom:18px;z-index:4;display:flex;gap:6px} .roll .dots i{width:7px;height:7px;border-radius:50%;background:rgba(68,60,153,.25);transition:width .3s,background .3s} .roll .dots i.on{width:20px;border-radius:4px;background:var(--indigo-700)} .roll .cnt{z-index:4} @media (prefers-reduced-motion:reduce){.roll .slide{transition:none;transform:none}} /* photographic rolling headers */ .fg .fh.roll{height:232px;background:#1E1A4C} .roll .slide img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transform:scale(1.08);transition:transform 6s ease} .roll .slide.is-on img.ph{transform:scale(1)} .roll .slide::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(20,16,50,.62),rgba(20,16,50,0) 48%)} .roll .slide .lbl{z-index:3;color:#fff;background:rgba(20,16,50,.46);backdrop-filter:blur(6px)} .roll .dots i{background:rgba(255,255,255,.45)} .roll .dots i.on{background:#fff} .roll .cnt{background:rgba(255,255,255,.92)} .facnote{margin-top:var(--s4);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline; font-size:.84rem;color:var(--ink-400)} .facnote details{display:inline} .facnote summary{cursor:pointer;color:var(--indigo-700);font-weight:500;display:inline} .facnote ol{margin:10px 0 0;padding-left:18px;columns:2;column-gap:28px;font-size:.8rem;color:var(--ink-600)} .facnote li{margin-bottom:5px;break-inside:avoid} .facnote a{color:var(--indigo-700)} @media (max-width:800px){.facnote ol{columns:1}} /* ════════════════════════════════════════════════════════════ THERAPIES — photographic cards with WhatsApp booking ════════════════════════════════════════════════════════════ */ .therapies.is-photo{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .therapy--photo{padding:0;border:1px solid var(--rule);border-left:1px solid var(--rule);border-radius:20px;overflow:hidden; background:#fff;display:flex;flex-direction:column; box-shadow:0 2px 4px rgba(24,26,52,.04),0 14px 34px rgba(24,26,52,.08); transition:transform .45s cubic-bezier(.2,.7,.25,1),box-shadow .45s} .therapy--photo:hover{transform:translateY(-6px);background:#fff;border-left-color:var(--rule); box-shadow:0 4px 8px rgba(24,26,52,.05),0 28px 58px rgba(24,26,52,.15)} .therapy--photo .tp{position:relative;aspect-ratio:1/1;overflow:hidden;background:#EFE7DA} .therapy--photo .tp img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.25,1)} .therapy--photo:hover .tp img{transform:scale(1.07)} .therapy--photo .tp::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,20,10,.55),transparent 45%)} .therapy--photo .tp .san{position:absolute;left:14px;bottom:12px;z-index:2;margin:0;color:#fff; font-family:var(--disp);font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; background:rgba(30,20,10,.38);backdrop-filter:blur(4px);border-radius:999px;padding:5px 11px} .therapy--photo .tp .cat{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--disp);font-size:.7rem; font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-mid);background:rgba(255,255,255,.92); border-radius:999px;padding:4px 10px} .therapy--photo .tb{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .therapy--photo h3{font-size:1.28rem;color:var(--indigo-700);margin:0} .therapy--photo p{font-size:.92rem;color:var(--ink-600);margin:0;line-height:1.55;flex:1} .therapy--photo .wabook{margin-top:10px;align-self:stretch;justify-content:center;display:inline-flex;align-items:center;gap:8px; background:#1DA851;color:#fff;border-radius:12px;padding:11px 14px;text-decoration:none; font-family:var(--disp);font-size:.98rem;font-weight:600;--wa-knock:#1DA851;transition:background .2s} .therapy--photo .wabook:hover{background:#17843F;--wa-knock:#17843F} .therapy--photo .wabook .waicon{width:19px;height:19px;margin:0} /* category filter */ .tfilter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 var(--s4)} .tfilter button{border:1px solid var(--rule);background:#fff;border-radius:999px;padding:9px 16px;cursor:pointer; font-family:var(--disp);font-size:.95rem;font-weight:600;color:var(--ink-600);transition:all .2s} .tfilter button b{font-weight:700;color:var(--ink-400);margin-left:6px} .tfilter button:hover{border-color:var(--green-mid);color:var(--green-mid)} .tfilter button.on{background:var(--indigo-700);border-color:var(--indigo-700);color:#fff} .tfilter button.on b{color:var(--green-soft)} .therapy--photo.is-hidden{display:none} @media (max-width:1100px){.therapies.is-photo{grid-template-columns:repeat(3,1fr)}} @media (max-width:800px){.therapies.is-photo{grid-template-columns:repeat(2,1fr)}} @media (max-width:480px){.therapies.is-photo{grid-template-columns:1fr}} /* the old list styling set a grey backdrop and hairline gaps; the photo grid needs neither */ .therapies.is-photo{background:none;border:0;border-radius:0;overflow:visible;box-shadow:none;padding:0} /* ════════════════════════════════════════════════════════════ RECOGNITION CAROUSEL — three at a time ════════════════════════════════════════════════════════════ */ .rcar{--per:3;--gap:22px;position:relative} .rcar .rview{overflow:hidden;margin:-14px;padding:14px} .rcar .rtrack{display:flex;gap:var(--gap);transition:transform .8s cubic-bezier(.65,0,.25,1);will-change:transform} .rcar .reccard{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));grid-column:auto;grid-row:auto; opacity:.55;transform:scale(.97);transition:opacity .6s, transform .6s, box-shadow .45s, border-color .3s} .rcar .reccard.in-view{opacity:1;transform:none} .rcar .reccard .pic{height:230px} .rcar .reccard--doc .pic{background:#F4F5FA} .rcar .reccard h3{font-size:1.24rem} .rcar .reccard .body{min-height:132px} .rnav{display:flex;align-items:center;gap:10px} .rnav button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06); color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s} .rnav button:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6)} .rnav button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .rnav button:disabled{opacity:.35;cursor:default} .rdots{display:flex;justify-content:center;gap:10px;margin-top:var(--s4)} .rdots button{width:10px;height:10px;border-radius:999px;border:0;padding:0;cursor:pointer; background:rgba(255,255,255,.3);transition:width .35s,background .35s} .rdots button.on{width:34px;background:var(--green)} .rprog{height:3px;border-radius:2px;background:rgba(255,255,255,.12);margin-top:14px;overflow:hidden;max-width:220px;margin-inline:auto} .rprog i{display:block;height:100%;width:0;background:var(--green-soft)} .rprog i.run{animation:rfill var(--rdur,5.5s) linear forwards} @keyframes rfill{to{width:100%}} @media (max-width:1100px){.rcar{--per:2}} @media (max-width:640px){.rcar{--per:1}.rnav button{width:42px;height:42px}} @media (prefers-reduced-motion:reduce){.rcar .rtrack{transition:none}.rprog{display:none}} /* mission: pastel green, indigo type — a light partner to the dark vision card */ .vmcard--proof{ background:linear-gradient(150deg,#F6FAF0 0%,#EAF4DF 55%,#DDEDCC 100%); border:1px solid #D2E5BD;color:var(--ink); box-shadow:0 2px 4px rgba(24,26,52,.04),0 22px 50px rgba(60,90,20,.12)} .vmcard--proof::after{background:radial-gradient(circle,rgba(255,255,255,.75),transparent 70%)} .vmcard--proof .vk{background:var(--green-mid);color:#fff} .vmcard--proof blockquote{color:var(--indigo-700);text-shadow:none;border-left-color:var(--green)} .vmcard--proof .vproof div{background:#fff;border:1px solid #D8E8C8; box-shadow:0 8px 20px rgba(60,90,20,.08)} .vmcard--proof .vproof svg{stroke:var(--green-mid)} .vmcard--proof .vproof b{color:var(--indigo-700)} .vmcard--proof .vproof div:nth-child(2) b{color:var(--green-mid)} .vmcard--proof .vproof span{color:var(--ink-600)} /* ════════════════════════════════════════════════════════════ NATUROPATHY — warm, earthy, its own identity ════════════════════════════════════════════════════════════ */ .pagehero--wellness{ background:radial-gradient(900px 500px at 85% 30%, rgba(214,170,110,.35), transparent 60%), linear-gradient(135deg,#4A2E1C 0%,#6B4428 52%,#8A5E36 100%); overflow:hidden} .pagehero--wellness::before,.pagehero--wellness::after{display:none} .pagehero--wellness .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s6);align-items:center; padding-block:var(--s7)} .pagehero--wellness .crumb,.pagehero--wellness .crumb a{color:#E8D2B4} .pagehero--wellness .brand{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px; font-family:var(--disp);font-size:.8rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#F2D9A8} .pagehero--wellness .brand svg{width:22px;height:22px;fill:none;stroke:#C9E3A8;stroke-width:1.6} .pagehero--wellness h1{color:#FFF8EE;max-width:14ch} .pagehero--wellness p{color:#F1E3CE;max-width:46ch} .pagehero--wellness .btn--outlineLight{border-color:rgba(255,240,220,.5);color:#FFF8EE} .wcollage{position:relative;height:440px} .wcollage figure{position:absolute;margin:0;border-radius:22px;overflow:hidden; box-shadow:0 26px 60px rgba(30,15,5,.45);border:5px solid rgba(255,248,238,.9)} .wcollage img{width:100%;height:100%;object-fit:cover;display:block} .wcollage .c1{width:58%;height:78%;left:4%;top:4%;z-index:2} .wcollage .c2{width:44%;height:50%;right:0;top:0;z-index:1} .wcollage .c3{width:46%;height:48%;right:6%;bottom:0;z-index:3} .wcollage .leaf{position:absolute;left:-2%;bottom:6%;z-index:4;background:#FFF8EE;color:#6B4428; border-radius:16px;padding:12px 16px;box-shadow:0 14px 30px rgba(30,15,5,.3); font-family:var(--disp);font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:10px} .wcollage .leaf b{font-size:1.7rem;color:#5E8228;line-height:1} .wellintro{background:linear-gradient(180deg,#FBF6EE 0%,#FFFDF9 100%)} .wellintro .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--s6);align-items:center} .wmosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:200px 200px;gap:14px} .wmosaic figure{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 14px 34px rgba(80,50,20,.14)} .wmosaic figure:first-child{grid-row:span 2} .wmosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.25,1)} .wmosaic figure:hover img{transform:scale(1.06)} .wellintro .eyebrow{color:#8A5E36} .wellintro h2{color:#3E2A1A;margin-bottom:12px} .wellintro .lede{color:#6B5540} .wfacts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:var(--s4) 0} .wfact{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #EFE3D2;border-radius:16px;padding:16px 16px; box-shadow:0 6px 18px rgba(80,50,20,.06)} .wfact .i{flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#F3E7D6;color:#8A5E36} .wfact:nth-child(even) .i{background:#EAF3DD;color:#5E8228} .wfact .i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .wfact b{display:block;font-family:var(--disp);font-size:1.06rem;font-weight:600;color:#3E2A1A;line-height:1.25} .wfact span{display:block;font-size:.86rem;color:#7A6552;margin-top:3px;line-height:1.45} .wnote{font-size:.92rem;color:#7A6552;margin:0 0 var(--s3)} @media (max-width:1000px){ .pagehero--wellness .wrap,.wellintro .wrap{grid-template-columns:1fr} .wcollage{height:360px} } @media (max-width:560px){.wfacts{grid-template-columns:1fr}.wmosaic{grid-template-rows:160px 160px}.wcollage{height:300px}} /* ════════════════════════════════════════════════════════════ NATUROPATHY BOOKING — warm panel, form sends to WhatsApp ════════════════════════════════════════════════════════════ */ .wellbook{background:linear-gradient(160deg,#F7EEDF 0%,#FBF6EE 55%,#F3E7D6 100%);position:relative;overflow:hidden} .wellbook::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%; background:radial-gradient(circle,rgba(201,227,168,.35),transparent 70%)} .wellbook .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:stretch} .wbleft{display:flex;flex-direction:column;gap:var(--s3)} .wbleft .eyebrow{color:#8A5E36} .wbleft h2{color:#3E2A1A;margin:0} .wbleft .lede{color:#6B5540;margin:0} .wbphoto{position:relative;border-radius:22px;overflow:hidden;min-height:230px;flex:1; box-shadow:0 20px 46px rgba(80,50,20,.18)} .wbphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .wbphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(50,30,15,.7),transparent 55%)} .wbphoto .cap{position:absolute;left:20px;bottom:18px;z-index:2;color:#FFF8EE;font-family:var(--disp); font-size:1.2rem;font-weight:600;line-height:1.25;max-width:24ch} .wbsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .wbsteps li{background:#fff;border:1px solid #EFE3D2;border-radius:16px;padding:16px 14px; box-shadow:0 6px 18px rgba(80,50,20,.06)} .wbsteps .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;margin-bottom:8px; background:#8A5E36;color:#fff;font-family:var(--disp);font-weight:700;font-size:.9rem} .wbsteps li:nth-child(2) .n{background:#5E8228} .wbsteps li:nth-child(3) .n{background:#443C99} .wbsteps b{display:block;font-family:var(--disp);font-size:1.02rem;color:#3E2A1A;line-height:1.2} .wbsteps span{display:block;font-size:.84rem;color:#7A6552;margin-top:4px;line-height:1.4} .wbform{background:#fff;border:1px solid #EFE3D2;border-radius:24px;overflow:hidden; box-shadow:0 26px 60px rgba(80,50,20,.14);display:flex;flex-direction:column} .wbform .top{background:linear-gradient(120deg,#6B4428,#8A5E36);color:#FFF8EE;padding:22px 26px} .wbform .top h3{color:#FFF8EE;margin:0 0 4px;font-size:1.4rem} .wbform .top p{margin:0;font-size:.92rem;color:#F1E3CE} .wbform form{padding:22px 26px 26px;display:flex;flex-direction:column;gap:14px} .wbform .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .wbform label{display:block;font-family:var(--disp);font-size:.9rem;font-weight:600;color:#5A4430;margin-bottom:6px} .wbform input,.wbform select,.wbform textarea{width:100%;box-sizing:border-box;border:1px solid #E6D8C4;border-radius:12px; background:#FFFCF7;padding:12px 14px;font:inherit;font-size:.98rem;color:#3E2A1A;transition:border-color .2s,box-shadow .2s} .wbform input:focus,.wbform select:focus,.wbform textarea:focus{outline:0;border-color:#8A5E36;box-shadow:0 0 0 4px rgba(138,94,54,.14)} .wbform textarea{min-height:88px;resize:vertical} .wbtime{display:flex;gap:8px;flex-wrap:wrap} .wbtime label{margin:0;cursor:pointer} .wbtime input{position:absolute;opacity:0;width:1px;height:1px} .wbtime span{display:inline-block;border:1px solid #E6D8C4;background:#FFFCF7;border-radius:999px;padding:8px 14px; font-family:var(--disp);font-size:.9rem;font-weight:600;color:#6B5540;transition:all .2s} .wbtime input:checked + span{background:#8A5E36;border-color:#8A5E36;color:#fff} .wbtime input:focus-visible + span{box-shadow:0 0 0 3px rgba(138,94,54,.3)} .wbform .send{margin-top:4px;width:100%;justify-content:center;font-size:1.05rem;padding:14px} .wbform .alt{margin:0;text-align:center;font-size:.88rem;color:#7A6552} .wbform .alt a{color:#8A5E36;font-weight:600} @media (max-width:1000px){.wellbook .wrap{grid-template-columns:1fr}.wbphoto{min-height:220px}} @media (max-width:560px){.wbsteps{grid-template-columns:1fr}.wbform .row2{grid-template-columns:1fr}} /* ════════════════════════════════════════════════════════════ CSR & DONATIONS — benchmarked on Narayan Seva, built premium ════════════════════════════════════════════════════════════ */ .btn--donate{background:linear-gradient(135deg,#E8742A,#D95F1C);color:#fff;border:0;--wa-knock:#D95F1C; box-shadow:0 12px 28px rgba(217,95,28,.35);font-weight:700} .btn--donate:hover{background:linear-gradient(135deg,#D9661F,#C2531A);color:#fff;--wa-knock:#C2531A} .chead{max-width:62ch;margin-bottom:var(--s5)} .chead h2{margin:8px 0 10px} .chead p{color:var(--ink-600);font-size:1.08rem;margin:0} /* hero */ .cshero{position:relative;min-height:min(92vh,860px);display:flex;flex-direction:column;justify-content:flex-end; color:#fff;overflow:hidden;padding:0} .cshero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%; animation:csZoom 18s ease-out both} @keyframes csZoom{from{transform:scale(1.08)}to{transform:scale(1)}} .cshero::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(24,20,66,.92) 0%,rgba(24,20,66,.72) 42%,rgba(24,20,66,.18) 78%), linear-gradient(to top,rgba(20,16,56,.85) 0%,transparent 40%)} .cshero > .wrap{position:relative;z-index:2;padding-block:var(--s7) var(--s5)} .cshero .kick{display:inline-block;font-family:var(--disp);font-size:.82rem;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:#F6C28B;margin-bottom:16px} .cshero h1{color:#fff;font-size:clamp(2.6rem,6vw,4.9rem);line-height:1.02;max-width:13ch;margin:0 0 18px;letter-spacing:-.02em} .cshero h1 em{font-style:normal;color:#F6C28B} .cshero p{max-width:52ch;font-size:1.18rem;color:#DDDBF2;margin:0 0 26px} .cshero .cta{display:flex;flex-wrap:wrap;gap:12px} .cshero .btn--donate{font-size:1.1rem;padding:16px 32px} .cshero .impact{position:relative;z-index:2;background:rgba(255,255,255,.08);backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.16)} .cshero .impact .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-block:22px} .cshero .impact div{padding:0 18px;border-left:1px solid rgba(255,255,255,.16)} .cshero .impact div:first-child{border-left:0;padding-left:0} .cshero .impact b{display:block;font-family:var(--disp);font-size:2.3rem;font-weight:700;line-height:1;color:#fff} .cshero .impact span{font-size:.9rem;color:#C9C6E8} /* pillars */ .cpillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .cpil{position:relative;border-radius:24px;overflow:hidden;min-height:480px;display:flex;align-items:flex-end; box-shadow:0 22px 50px rgba(24,26,52,.18)} .cpil img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.25,1)} .cpil:hover img{transform:scale(1.07)} .cpil::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,56,.95) 0%,rgba(20,16,56,.55) 45%,rgba(20,16,56,.05) 75%)} .cpil .ov{position:relative;z-index:2;padding:28px;color:#fff} .cpil .ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.14); backdrop-filter:blur(6px);margin-bottom:14px} .cpil .ico svg{width:26px;height:26px;fill:none;stroke:#F6C28B;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .cpil h3{color:#fff;font-size:1.9rem;margin:0 0 8px} .cpil p{color:#DDDBF2;margin:0 0 16px;font-size:.98rem;line-height:1.55} .cpil a{color:#F6C28B;font-family:var(--disp);font-weight:700;text-decoration:none;font-size:1rem} .cpil a:hover{color:#fff} /* journey */ .cjourney-sec{background:linear-gradient(180deg,#FFF8F1,#fff)} .cjourney{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;position:relative} .cjourney::before{content:"";position:absolute;left:10%;right:10%;top:38px;height:3px;border-radius:2px; background:linear-gradient(90deg,#F6C28B,#E8742A 40%,var(--indigo-500) 75%,var(--green))} .cjourney li{position:relative;text-align:center;padding:0 6px} .cjourney .st{position:relative;z-index:1;display:grid;place-items:center;width:78px;height:78px;margin:0 auto 16px; border-radius:50%;background:#fff;border:3px solid #F6C28B;box-shadow:0 12px 28px rgba(217,95,28,.18)} .cjourney li:nth-child(3) .st{border-color:#E8742A} .cjourney li:nth-child(4) .st{border-color:var(--indigo-500)} .cjourney li:nth-child(5) .st{border-color:var(--green);background:var(--green-pastel2)} .cjourney .st svg{width:32px;height:32px;fill:none;stroke:#443C99;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .cjourney b{display:block;font-family:var(--disp);font-size:1.18rem;color:var(--indigo-700);margin-bottom:4px} .cjourney span{display:block;font-size:.9rem;color:var(--ink-600);line-height:1.45} /* donation panel */ .cgive-sec{background:var(--surface-alt)} .cgive{display:grid;grid-template-columns:1.15fr 1fr;border-radius:28px;overflow:hidden; box-shadow:0 30px 70px rgba(24,26,52,.18);background:#fff} .cgive .gl{padding:40px 42px;background:linear-gradient(160deg,#2A2566,#3A3288 60%,#443C99);color:#fff} .cgive .gl .eyebrow{color:#F6C28B} .cgive .gl h2{color:#fff;margin:6px 0 22px} .giveform label{display:block;font-family:var(--disp);font-size:.9rem;font-weight:600;color:#D7D4F0;margin-bottom:6px} .freq{display:inline-flex;background:rgba(255,255,255,.1);border-radius:999px;padding:5px;margin-bottom:18px} .freq label,.amts label{margin:0;cursor:pointer} .freq input,.amts input{position:absolute;opacity:0;width:1px;height:1px} .freq span{display:block;padding:9px 20px;border-radius:999px;font-family:var(--disp);font-weight:600;color:#D7D4F0;transition:all .2s} .freq input:checked + span{background:#fff;color:var(--indigo-700)} .amts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px} .amts span{display:block;text-align:center;padding:15px 8px;border-radius:14px;border:1.5px solid rgba(255,255,255,.2); font-family:var(--disp);font-size:1.25rem;font-weight:700;color:#fff;transition:all .2s} .amts span:hover{border-color:rgba(246,194,139,.7)} .amts input:checked + span{background:#F6C28B;border-color:#F6C28B;color:#2A2566;box-shadow:0 10px 24px rgba(246,194,139,.3)} .amts input:focus-visible + span,.freq input:focus-visible + span{outline:3px solid #F6C28B;outline-offset:2px} .giveform .other{display:none;margin-bottom:16px} .giveform .other.on{display:block} .giveform input[type=number],.giveform input[type=text],.giveform select{width:100%;box-sizing:border-box; border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;border-radius:12px; padding:13px 14px;font:inherit;font-size:1rem} .giveform select option{color:#222} .giveform input::placeholder{color:#A9A6D6} .giveform input:focus,.giveform select:focus{outline:0;border-color:#F6C28B} .giveform .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px} .giveform .go{width:100%;justify-content:center;font-size:1.12rem;padding:17px} .giveform .go .waicon{width:22px;height:22px} .giveform .how{margin:12px 0 0;font-size:.86rem;color:#B9B6DE;text-align:center} .cgive .gr{display:flex;flex-direction:column} .cgive .gr img{width:100%;height:230px;object-fit:cover} .cgive .gri{padding:30px 34px;flex:1;display:flex;flex-direction:column} .cgive .gri h3{color:var(--indigo-700);margin:0 0 14px;font-size:1.4rem} .cgive .gri ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .cgive .gri li{display:flex;gap:14px;align-items:flex-start} .cgive .gri li svg{flex:0 0 auto;width:40px;height:40px;padding:9px;box-sizing:border-box;border-radius:12px; background:#FFF1E6;fill:none;stroke:#D95F1C;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .cgive .gri li b{display:block;font-family:var(--disp);color:var(--ink);font-size:1.02rem} .cgive .gri li span{font-size:.9rem;color:var(--ink-600);line-height:1.4} .cgive .gri .call{margin:auto 0 0;padding-top:18px;font-size:.95rem;color:var(--ink-600)} .cgive .gri .call a{color:#D95F1C;font-weight:700} /* trust band */ .ctrust-sec{padding-block:var(--s5);background:#fff;border-block:1px solid var(--rule)} .ctrust{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .ctrust div{display:flex;flex-direction:column;align-items:flex-start;gap:4px} .ctrust span svg{width:36px;height:36px;fill:none;stroke:#D95F1C;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px} .ctrust b{font-family:var(--disp);font-size:1.08rem;color:var(--indigo-700);line-height:1.25} .ctrust i{font-style:normal;font-size:.86rem;color:var(--ink-400)} /* CSR partner */ .cpartner{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s6);align-items:center} .cpartner .pimg{position:relative;border-radius:24px;overflow:hidden;min-height:460px;box-shadow:0 26px 60px rgba(24,26,52,.18)} .cpartner .pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .cpartner .tag{position:absolute;left:18px;top:18px;background:#fff;color:var(--indigo-700);border-radius:999px; padding:7px 14px;font-family:var(--disp);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase} .cpartner h2{margin:8px 0 12px} .psteps{list-style:none;margin:var(--s4) 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;counter-reset:ps} .psteps li{counter-increment:ps;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:16px 16px 16px 58px;position:relative; box-shadow:var(--shadow-sm)} .psteps li::before{content:counter(ps);position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:50%; display:grid;place-items:center;background:var(--indigo-700);color:#fff;font-family:var(--disp);font-weight:700;font-size:.9rem} .psteps b{display:block;font-family:var(--disp);color:var(--ink);font-size:1.04rem} .psteps span{font-size:.88rem;color:var(--ink-600)} /* closing band */ .cclose{background:linear-gradient(120deg,#2A2566,#443C99);text-align:center;padding-block:var(--s6)} .cclose p{font-family:var(--disp);font-size:clamp(1.6rem,3vw,2.4rem);font-weight:600;color:#fff;max-width:28ch;margin:0 auto 24px;line-height:1.25} .cclose em{font-style:normal;color:#F6C28B} .cclose .btn--donate{font-size:1.1rem;padding:16px 34px} @media (max-width:1100px){ .cpillars{grid-template-columns:1fr}.cpil{min-height:380px} .cjourney{grid-template-columns:1fr 1fr;row-gap:28px}.cjourney::before{display:none} .cgive,.cpartner{grid-template-columns:1fr} .ctrust{grid-template-columns:1fr 1fr} .cshero .impact .wrap{grid-template-columns:1fr 1fr;row-gap:16px} .cshero .impact div:nth-child(3){border-left:0;padding-left:0} } @media (max-width:620px){ .cjourney,.psteps,.giveform .row2,.ctrust{grid-template-columns:1fr} .cgive .gl{padding:28px 22px}.amts span{font-size:1.1rem} .cpartner .pimg{min-height:300px} } @media (prefers-reduced-motion:reduce){.cshero .bg{animation:none}} /* in a flex column, auto margins shrink the container; keep it full width */ .cshero > .wrap,.cshero .impact .wrap{width:100%;box-sizing:border-box} /* ════════════════════════════════════════════════════════════ FIRST VISIT — a journey with an action at every stop ════════════════════════════════════════════════════════════ */ .visit{background:linear-gradient(180deg,#F7F6FC 0%,#fff 100%);position:relative;overflow:hidden} .visit::before{content:"";position:absolute;left:-160px;top:-160px;width:460px;height:460px;border-radius:50%; background:radial-gradient(circle,rgba(128,176,72,.14),transparent 70%)} .visit .wrap{position:relative} .vtrack{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;position:relative} .vtrack::before{content:"";position:absolute;left:8%;right:8%;top:44px;height:4px;border-radius:2px; background:linear-gradient(90deg,var(--green) 0%,var(--green-mid) 30%,var(--indigo-500) 65%,var(--indigo-700) 100%);opacity:.9} .vstop{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center} .vstop .disc{position:relative;z-index:1;width:88px;height:88px;border-radius:50%;display:grid;place-items:center; background:#fff;border:4px solid var(--green);box-shadow:0 14px 30px rgba(24,26,52,.12); transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s} .vstop:nth-child(2) .disc{border-color:var(--green-mid)} .vstop:nth-child(3) .disc{border-color:#7E9A4E} .vstop:nth-child(4) .disc{border-color:var(--indigo-500)} .vstop:nth-child(5) .disc{border-color:#524AAE} .vstop:nth-child(6) .disc{border-color:var(--indigo-700)} .vstop .disc svg{width:36px;height:36px;fill:none;stroke:var(--indigo-700);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .vstop .num{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center; background:var(--indigo-700);color:#fff;font-family:var(--disp);font-weight:700;font-size:.85rem;border:3px solid #fff} .vstop:nth-child(-n+3) .num{background:var(--green-mid)} .vcard{margin-top:18px;background:#fff;border:1px solid var(--rule);border-radius:18px;padding:20px 16px 18px;width:100%; box-sizing:border-box;flex:1;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-sm); transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s,border-color .3s} .vstop:hover .disc{transform:translateY(-4px) scale(1.04);box-shadow:0 20px 40px rgba(24,26,52,.18)} .vstop:hover .vcard{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#D8DCEA} .vcard b{font-family:var(--disp);font-size:1.18rem;color:var(--indigo-700)} .vcard span{font-size:.9rem;color:var(--ink-600);line-height:1.5;flex:1} .vcard a{margin-top:8px;font-family:var(--disp);font-weight:600;font-size:.92rem;color:var(--green-mid);text-decoration:none; display:inline-flex;align-items:center;justify-content:center;gap:6px} .vcard a:hover{color:var(--indigo-700)} .vcard a.wa{color:#17843F} .vcard a .waicon{width:16px;height:16px;margin:0} .vfoot{margin-top:var(--s5);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px; background:#fff;border:1px solid var(--rule);border-radius:18px;padding:18px 24px;box-shadow:var(--shadow-sm)} .vfoot p{margin:0;font-family:var(--disp);font-size:1.12rem;font-weight:600;color:var(--ink)} .vfoot .btns{display:flex;gap:10px;flex-wrap:wrap} @media (max-width:1100px){ .vtrack{grid-template-columns:repeat(3,1fr);row-gap:30px} .vtrack::before{display:none} } @media (max-width:620px){ .vtrack{grid-template-columns:1fr} .vstop{flex-direction:row;align-items:flex-start;text-align:left;gap:16px} .vstop .disc{width:64px;height:64px;flex:0 0 auto}.vstop .disc svg{width:28px;height:28px} .vcard{margin-top:0}.vcard a{justify-content:flex-start} } /* ════════════════════════════════════════════════════════════ NUMBERS BAND — one photograph, six figures, one line style ════════════════════════════════════════════════════════════ */ .numband{position:relative;overflow:hidden;color:#fff;padding-block:var(--s7)} .numband .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%} .numband::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(120deg,rgba(24,20,66,.95) 0%,rgba(36,30,92,.9) 50%,rgba(52,44,120,.82) 100%)} .numband .wrap{position:relative;z-index:2} .numband .nhead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s6)} .numband .eyebrow{color:var(--green-soft)} .numband h2{color:#fff;margin:8px 0 0} .numband .nlead{max-width:40ch;color:#C9C6E8;margin:0;font-size:1.05rem} .nums{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid rgba(255,255,255,.18)} .nums div{padding:28px 18px 6px;border-left:1px solid rgba(255,255,255,.12)} .nums div:first-child{border-left:0;padding-left:0} .nums svg{width:30px;height:30px;fill:none;stroke:var(--green-soft);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px} .nums b{display:block;font-family:var(--disp);font-size:clamp(2.4rem,3.6vw,3.4rem);font-weight:700;line-height:1; letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums} .nums span{display:block;margin-top:8px;font-size:.95rem;color:#C9C6E8;line-height:1.35} .numnote{margin-top:var(--s5);display:flex;align-items:center;gap:16px;padding:18px 22px;border-radius:16px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)} .numnote img{width:44px;height:auto;flex:0 0 auto;background:#fff;border-radius:12px;padding:6px} .numnote p{margin:0;font-family:var(--disp);font-size:1.12rem;font-weight:600;color:#fff} .numnote p span{color:var(--green-soft)} @media (max-width:1100px){ .nums{grid-template-columns:repeat(3,1fr)} .nums div:nth-child(4){border-left:0;padding-left:0} .nums div:nth-child(n+4){border-top:1px solid rgba(255,255,255,.12)} } @media (max-width:560px){ .nums{grid-template-columns:repeat(2,1fr)} .nums div{border-left:0;padding-left:0} .nums div:nth-child(odd){padding-right:14px} .nums div:nth-child(even){border-left:1px solid rgba(255,255,255,.12);padding-left:16px} .nums div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)} } /* recognition cards on About: collapse properly on smaller screens */ @media (max-width:1100px){.awards{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media (max-width:560px){.awards{grid-template-columns:minmax(0,1fr)!important}} .awards > *{min-width:0} /* ════════════════════════════════════════════════════════════ GOVERNMENT SCHEMES — each with an application route ════════════════════════════════════════════════════════════ */ .sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .scard{position:relative;background:#fff;border:1px solid var(--rule);border-radius:20px;padding:26px 26px 22px; display:flex;flex-direction:column;gap:8px;overflow:hidden;box-shadow:var(--shadow-sm); transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s,border-color .3s} .scard::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--green),var(--indigo-500))} .scard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#D8DCEA} .sico{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--indigo-050);margin-bottom:6px} .scard:nth-child(even) .sico{background:var(--green-pastel)} .sico svg{width:26px;height:26px;fill:none;stroke:var(--indigo-700);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .scard:nth-child(even) .sico svg{stroke:var(--green-mid)} .scard h3{font-size:1.28rem;color:var(--indigo-700);margin:0} .scard p{margin:0;color:var(--ink-600);font-size:.96rem;line-height:1.55} .scard .bring{font-size:.88rem;color:var(--ink-400);padding-top:4px} .scard .bring b{color:var(--ink-600);font-weight:600} .sact{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--rule)} .sact .btn .waicon{width:17px;height:17px} .scall{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:600;font-size:.95rem; color:var(--indigo-700);text-decoration:none} .scall svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .scall:hover{color:var(--green-mid)} .shelp{margin-top:var(--s5);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap; background:linear-gradient(120deg,var(--green-pastel2),#fff 70%);border:1px solid #D8E8C8;border-radius:20px;padding:24px 28px} .shelp b{display:block;font-family:var(--disp);font-size:1.3rem;color:var(--indigo-700);margin-bottom:4px} .shelp span{color:var(--ink-600);font-size:.98rem} .shelp .sb{display:flex;gap:10px;flex-wrap:wrap} @media (max-width:900px){.sgrid{grid-template-columns:1fr}} /* ════════════════════════════════════════════════════════════ CASHLESS — four steps you can read at a glance ════════════════════════════════════════════════════════════ */ .cashless{background:linear-gradient(180deg,#F7F6FC,#fff)} .cflow{list-style:none;margin:var(--s5) 0 0;padding:0;display:flex;align-items:stretch;gap:0} .cstep{flex:1;background:#fff;border:1px solid var(--rule);border-radius:20px;padding:26px 20px 22px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:var(--shadow-sm); transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s} .cstep:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .cic{position:relative;display:grid;place-items:center;width:68px;height:68px;border-radius:20px;margin-bottom:8px; background:linear-gradient(150deg,var(--indigo-050),#fff);border:1px solid var(--indigo-100)} .cstep:nth-child(3) .cic,.cstep:nth-child(7) .cic{background:linear-gradient(150deg,var(--green-pastel),#fff);border-color:#D8E8C8} .cic svg{width:32px;height:32px;fill:none;stroke:var(--indigo-700);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .cstep:nth-child(3) .cic svg,.cstep:nth-child(7) .cic svg{stroke:var(--green-mid)} .cic i{position:absolute;top:-8px;right:-8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center; background:var(--indigo-700);color:#fff;font-style:normal;font-family:var(--disp);font-weight:700;font-size:.82rem;border:3px solid #fff} .cstep b{font-family:var(--disp);font-size:1.2rem;color:var(--indigo-700)} .cstep > span:last-child{font-size:.92rem;color:var(--ink-600);line-height:1.45} .carr{flex:0 0 44px;display:grid;place-items:center} .carr svg{width:24px;height:24px;fill:none;stroke:var(--green-mid);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .cbring{margin-top:var(--s4);display:flex;align-items:center;gap:16px;flex-wrap:wrap} .cbring > b{font-family:var(--disp);font-size:1.05rem;color:var(--ink)} .cbring ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px} .cbring li{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--rule);border-radius:999px; padding:8px 14px 8px 10px;font-size:.92rem;color:var(--ink-600)} .cbring li svg{width:16px;height:16px;fill:none;stroke:var(--green-mid);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .ccta{margin-top:var(--s4);display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap; background:linear-gradient(120deg,var(--indigo-050),#fff 70%);border:1px solid var(--indigo-100);border-radius:20px;padding:22px 26px} .ccta b{display:block;font-family:var(--disp);font-size:1.25rem;color:var(--indigo-700);margin-bottom:3px} .ccta span{color:var(--ink-600);font-size:.96rem} .ccta .bb{display:flex;gap:10px;flex-wrap:wrap} .cemerg{margin:16px 0 0;display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--ink-600)} .cemerg span{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(193,39,45,.14)} @media (max-width:1000px){ .cflow{flex-direction:column;gap:10px} .carr{flex-basis:auto;transform:rotate(90deg);height:28px} } /* ════════════════════════════════════════════════════════════ INSURANCE PAGE ════════════════════════════════════════════════════════════ */ .inshero{background:radial-gradient(800px 420px at 90% 10%,rgba(128,176,72,.22),transparent 60%), linear-gradient(135deg,#221E58 0%,#332C80 55%,#443C99 100%);color:#fff;overflow:hidden} .inshero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:center;padding-block:var(--s7) var(--s6)} .inshero .crumb,.inshero .crumb a{color:#BDB9E6} .inshero .kick{display:inline-block;font-family:var(--disp);font-size:.82rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--green-soft);margin:6px 0 14px} .inshero h1{color:#fff;font-size:clamp(2.5rem,5.4vw,4.4rem);line-height:1.02;margin:0 0 16px;letter-spacing:-.02em} .inshero h1 em{font-style:normal;color:var(--green-soft)} .inshero .ih-l > p{color:#D6D3F0;font-size:1.15rem;max-width:46ch;margin:0 0 28px} .ih-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.16)} .ih-stats div{padding:18px 16px 0;border-left:1px solid rgba(255,255,255,.14)} .ih-stats div:first-child{border-left:0;padding-left:0} .ih-stats b{display:block;font-family:var(--disp);font-size:2.3rem;font-weight:700;line-height:1;color:#fff} .ih-stats span{display:block;font-size:.86rem;color:#BDB9E6;margin-top:6px;line-height:1.35} .checker{background:#fff;border-radius:24px;padding:28px;box-shadow:0 30px 70px rgba(8,6,30,.4);color:var(--ink)} .ck-k{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-size:1.35rem;font-weight:700;color:var(--indigo-700);margin-bottom:14px} .ck-k svg{width:24px;height:24px;fill:none;stroke:var(--green-mid);stroke-width:2;stroke-linecap:round} .ck-in{width:100%;box-sizing:border-box;border:2px solid var(--indigo-100);border-radius:14px;padding:15px 16px;font:inherit;font-size:1.05rem; color:var(--ink);background:#FAFAFE;transition:border-color .2s,box-shadow .2s} .ck-in:focus{outline:0;border-color:var(--indigo-500);box-shadow:0 0 0 4px rgba(96,88,176,.14)} .ck-out{min-height:118px;margin:14px 0 16px;display:flex;flex-direction:column;gap:8px} .ck-hint{color:var(--ink-400);font-size:.94rem} .ck-hit{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:var(--green-pastel2);border:1px solid #D8E8C8} .ck-hit svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--green-mid);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .ck-hit b{font-family:var(--disp);font-size:1.02rem;color:var(--ink)} .ck-hit i{margin-left:auto;font-style:normal;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-mid)} .ck-miss{padding:14px;border-radius:12px;background:#FFF6EC;border:1px solid #F3DDBF;color:#6B4A20;font-size:.95rem;line-height:1.5} .ck-miss b{display:block;font-family:var(--disp);font-size:1.05rem;color:#6B4A20;margin-bottom:3px} .ck-miss a{color:#B4621C;font-weight:700;cursor:pointer} .ck-wa{width:100%;justify-content:center} .reimb{background:#fff} .rb{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s6);align-items:center;background:linear-gradient(135deg,#FFF8F0,#fff 60%); border:1px solid #F3E4D2;border-radius:28px;padding:40px 42px} .rb-l h2{margin:8px 0 10px} .rsteps{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .rsteps li{background:#fff;border:1px solid #F0E3D2;border-radius:16px;padding:18px 16px;box-shadow:0 6px 18px rgba(120,80,30,.06)} .rsteps span{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#FFF1E2;margin-bottom:10px} .rsteps span svg{width:22px;height:22px;fill:none;stroke:#C0682A;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .rsteps b{display:block;font-family:var(--disp);font-size:1.08rem;color:var(--ink)} .rsteps i{display:block;font-style:normal;font-size:.88rem;color:var(--ink-600);margin-top:3px;line-height:1.4} .rb-r{background:#fff;border-radius:20px;padding:26px;box-shadow:0 16px 40px rgba(120,80,30,.1)} .rb-r > b{display:block;font-family:var(--disp);font-size:1.2rem;color:var(--indigo-700);margin-bottom:12px} .rb-r ul{list-style:none;margin:0;padding:0} .rb-r li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:.96rem;color:var(--ink-600)} .rb-r li:last-child{border-bottom:0} .rb-r li svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--green-mid);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .insfaq{background:var(--surface-alt)} .insclose{background:linear-gradient(120deg,#2A2566,#443C99);color:#fff;padding-block:var(--s5)} .insclose .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .insclose b{display:block;font-family:var(--disp);font-size:1.6rem;color:#fff} .insclose span{color:#D6D3F0} .insclose .bb{display:flex;gap:10px;flex-wrap:wrap} @media (max-width:1000px){ .inshero .wrap,.rb{grid-template-columns:1fr} .rb{padding:28px 22px} } @media (max-width:620px){.rsteps{grid-template-columns:1fr}.ih-stats b{font-size:1.8rem}} .inshero{padding-block:0} .inshero .wrap{padding-block:var(--s6) var(--s6)} /* ════════════════════════════════════════════════════════════ CONTACT PAGE ════════════════════════════════════════════════════════════ */ .cthero{padding-block:0;background:radial-gradient(760px 420px at 12% 0%,rgba(128,176,72,.16),transparent 60%), linear-gradient(180deg,#F5F4FC 0%,#fff 100%)} .cthero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:center;padding-block:var(--s6)} .cthero .kick{display:inline-block;font-family:var(--disp);font-size:.82rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--green-mid);margin:6px 0 12px} .cthero h1{font-size:clamp(2.5rem,5vw,4.1rem);line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin:0 0 14px} .cthero h1 em{font-style:normal;color:var(--indigo-500)} .cthero .ch-l > p{font-size:1.15rem;color:var(--ink-600);max-width:44ch;margin:0 0 26px} .ch-acts{display:flex;flex-direction:column;gap:12px;max-width:460px} .cha{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:18px;background:#fff;border:1px solid var(--rule); text-decoration:none;box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.2,.7,.25,1),box-shadow .3s,border-color .3s} .cha:hover{transform:translateX(6px);box-shadow:var(--shadow-md)} .cha .i{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;flex:0 0 auto} .cha .i svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .cha .i .waicon{width:26px;height:26px;margin:0} .cha i{display:block;font-style:normal;font-size:.84rem;color:var(--ink-400);font-weight:500} .cha b{display:block;font-family:var(--disp);font-size:1.28rem;color:var(--ink);line-height:1.15} .cha--call .i{background:linear-gradient(150deg,var(--indigo-500),var(--indigo-700))} .cha--wa .i{background:#1DA851;color:#fff;--wa-knock:#1DA851} .cha--wa:hover{border-color:#9FD8B3} .cha--sos .i{background:linear-gradient(150deg,#E0474D,#B8232A)} .cha--sos b{color:#B8232A} .cha--sos:hover{border-color:#F2B7B9} .ch-photo{position:relative;margin:0;border-radius:28px;overflow:hidden;aspect-ratio:4/4.3;box-shadow:0 30px 70px rgba(24,26,52,.22)} .ch-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ch-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,56,.85),transparent 45%)} .ch-photo .open{position:absolute;top:18px;left:18px;z-index:2;display:inline-flex;align-items:center;gap:9px;background:#fff;border-radius:999px; padding:8px 14px;font-family:var(--disp);font-weight:600;font-size:.92rem;color:var(--ink);box-shadow:0 8px 20px rgba(0,0,0,.15)} .ch-photo .open i{width:9px;height:9px;border-radius:50%;background:#2DBE60;box-shadow:0 0 0 4px rgba(45,190,96,.22);animation:pulseDot 2s infinite} @keyframes pulseDot{50%{box-shadow:0 0 0 8px rgba(45,190,96,0)}} .ch-photo figcaption{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .ch-photo figcaption span{display:flex;align-items:center;gap:8px;color:#fff;max-width:30ch} .ch-photo figcaption svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--green-soft);stroke-width:1.9} .ch-photo figcaption b{font-weight:500;font-size:.95rem;line-height:1.35} .ctbook{background:#fff} .ctbook .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--s5);align-items:start} .mapframe{border-radius:24px;overflow:hidden;height:340px;box-shadow:var(--shadow-md);border:1px solid var(--rule); background:linear-gradient(135deg,#E8ECF6,#F3F6EC)} .mapframe iframe{width:100%;height:100%;border:0;display:block} .cinfo{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:4px} .cinfo li{display:flex;gap:14px;align-items:flex-start;padding:12px 4px;border-bottom:1px solid var(--rule)} .cinfo li:last-child{border-bottom:0} .cinfo span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--indigo-050);flex:0 0 auto} .cinfo span svg{width:19px;height:19px;fill:none;stroke:var(--indigo-700);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .cinfo b{display:block;font-family:var(--disp);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);margin-bottom:2px} .cinfo div{font-size:1rem;color:var(--ink)} .cinfo a{color:var(--indigo-700);font-weight:600;text-decoration:none} .apptcard{background:#fff;border:1px solid var(--rule);border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(24,26,52,.14)} .apptcard .top{padding:28px 30px 22px;background:linear-gradient(135deg,#2A2566,#443C99);color:#fff} .apptcard .top .eyebrow{color:var(--green-soft)} .apptcard .top h2{color:#fff;font-size:1.75rem;margin:6px 0 6px;line-height:1.15} .apptcard .top p{margin:0;color:#D0CDEE;font-size:.95rem} .apptform{padding:24px 30px 28px;display:flex;flex-direction:column;gap:16px} .apptform .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .apptform label{display:block;font-family:var(--disp);font-size:.9rem;font-weight:600;color:var(--ink-600);margin-bottom:6px} .apptform input[type=text],.apptform input[type=tel],.apptform select,.apptform textarea{width:100%;box-sizing:border-box;border:1.5px solid #E1E3EE; border-radius:12px;background:#FAFAFE;padding:12px 14px;font:inherit;font-size:.98rem;color:var(--ink);transition:border-color .2s,box-shadow .2s} .apptform input:focus,.apptform select:focus,.apptform textarea:focus{outline:0;border-color:var(--indigo-500);box-shadow:0 0 0 4px rgba(96,88,176,.12)} .apptform textarea{min-height:80px;resize:vertical} .apptform .chips{display:flex;flex-wrap:wrap;gap:8px} .apptform .chips label{margin:0;cursor:pointer} .apptform .chips input{position:absolute;opacity:0;width:1px;height:1px} .apptform .chips span{display:inline-block;min-width:50px;text-align:center;border:1.5px solid #E1E3EE;background:#FAFAFE;border-radius:12px;padding:9px 14px; font-family:var(--disp);font-size:.95rem;font-weight:600;color:var(--ink-600);transition:all .2s} .apptform .chips span:hover{border-color:var(--indigo-500)} .apptform .chips input:checked + span{background:var(--indigo-700);border-color:var(--indigo-700);color:#fff;box-shadow:0 8px 18px rgba(68,60,153,.25)} .apptform .chips input:focus-visible + span{outline:3px solid var(--green-soft);outline-offset:2px} .apptform .send{width:100%;justify-content:center;font-size:1.08rem;padding:15px} .apptform .alt{margin:0;text-align:center;font-size:.9rem;color:var(--ink-400)} .apptform .alt a{color:var(--indigo-700);font-weight:600} .ctwho{background:var(--surface-alt)} .wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .wt{position:relative;background:#fff;border:1px solid var(--rule);border-radius:22px;padding:26px 24px 22px;display:flex;flex-direction:column;gap:8px; overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s} .wt:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)} .wt::after{content:"";position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:var(--indigo-050);opacity:.7} .wt--red::after{background:#FDECEC}.wt--green::after{background:var(--green-pastel2)}.wt--amber::after{background:#FFF1E4} .wi{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:17px;margin-bottom:6px; background:linear-gradient(150deg,var(--indigo-500),var(--indigo-700));box-shadow:0 10px 22px rgba(68,60,153,.25)} .wt--red .wi{background:linear-gradient(150deg,#E0474D,#B8232A);box-shadow:0 10px 22px rgba(184,35,42,.25)} .wt--green .wi{background:linear-gradient(150deg,#8DBE5E,#5E8228);box-shadow:0 10px 22px rgba(94,130,40,.25)} .wt--amber .wi{background:linear-gradient(150deg,#F0A04B,#D95F1C);box-shadow:0 10px 22px rgba(217,95,28,.25)} .wi svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .wt h3{position:relative;z-index:1;font-size:1.25rem;color:var(--ink);margin:0} .wt p{position:relative;z-index:1;margin:0;color:var(--ink-600);font-size:.95rem;line-height:1.5;flex:1} .wt ul{position:relative;z-index:1;list-style:none;margin:2px 0 0;padding:0} .wt ul li{display:flex;align-items:flex-start;gap:10px;padding:5px 0;font-size:.88rem;color:var(--ink-600);line-height:1.4} .wli-ic{flex:none;width:19px;height:19px;margin-top:1px} .wli-ic circle{fill:var(--indigo-500)} .wli-ic path{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .wt--green .wli-ic circle{fill:#5E8228} .wgrid{position:relative} .wgrid--vs{grid-template-columns:1fr 1fr} .wgrid-or{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--rule);display:grid;place-items:center;font-weight:800;font-size:.7rem;letter-spacing:.06em;color:var(--ink-500,#6b7280);box-shadow:var(--shadow-sm)} @media (max-width:600px){.wgrid--vs{grid-template-columns:1fr}.wgrid-or{display:none}} .wb{position:relative;z-index:1;margin-top:12px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 16px; text-decoration:none;font-family:var(--disp);font-weight:600;font-size:.98rem;background:var(--indigo-050);color:var(--indigo-700);transition:all .2s} .wb:hover{background:var(--indigo-700);color:#fff} .wb svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .wb--red{background:#FDECEC;color:#B8232A}.wb--red:hover{background:#B8232A;color:#fff} .wb--wa{background:#1DA851;color:#fff;--wa-knock:#1DA851}.wb--wa:hover{background:#17843F;color:#fff;--wa-knock:#17843F} .wb--wa .waicon{width:18px;height:18px;margin:0} .wb--amber{background:#FFF1E4;color:#C0551A}.wb--amber:hover{background:#D95F1C;color:#fff} @media (max-width:1000px){ .cthero .wrap,.ctbook .wrap{grid-template-columns:1fr} .ch-photo{aspect-ratio:16/11} .wgrid{grid-template-columns:1fr 1fr} } @media (max-width:600px){.wgrid,.apptform .row2{grid-template-columns:1fr}.mapframe{height:260px}} @media (prefers-reduced-motion:reduce){.ch-photo .open i{animation:none}} /* an older directions-panel rule padded every .mapframe; the contact map fills its frame */ .ctbook .mapframe{padding:0;height:360px} .ctbook .mapframe iframe{border-radius:0} /* directions on the photo: white pill, not a dark green fill */ .ch-photo figcaption .btn{background:#fff;color:var(--indigo-700);border:0;box-shadow:0 8px 20px rgba(0,0,0,.18)} .ch-photo figcaption .btn:hover{background:var(--indigo-050);color:var(--indigo-700)} .logotile.has-logo{flex-direction:column;gap:6px} .logotile .was{display:block;font-size:.7rem;color:var(--ink-400);text-align:center;line-height:1.3} /* insurance page: patients scan for their own insurer's brand, so show logos in full colour */ .logowall--full .logotile.has-logo img{filter:none!important;opacity:1!important} .logowall--full .logotile.has-logo{transition:transform .3s,box-shadow .3s} .logowall--full .logotile.has-logo:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} /* ════════════════════════════════════════════════════════════ BRAND FILM — preview in place, zooms to a player on click ════════════════════════════════════════════════════════════ */ .storyband .story-art{padding:0} .filmcard{position:relative;display:block;border-radius:26px;overflow:hidden;aspect-ratio:16/9;cursor:pointer; box-shadow:0 34px 80px rgba(24,26,52,.26);outline:none;transition:transform .5s cubic-bezier(.2,.7,.25,1),box-shadow .5s} .filmcard:hover,.filmcard:focus-visible{transform:scale(1.02);box-shadow:0 44px 96px rgba(24,26,52,.34)} .filmcard:focus-visible{outline:3px solid var(--green);outline-offset:4px} .fc-media{position:absolute;inset:0;background:#1E1A4C center/cover no-repeat} .fc-media video{width:100%;height:100%;object-fit:cover;display:block} .filmcard::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(20,16,56,.78) 0%,rgba(20,16,56,.1) 45%,rgba(20,16,56,.05) 100%)} .fc-play{position:absolute;left:50%;top:50%;z-index:2;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%; display:grid;place-items:center;background:rgba(255,255,255,.95);box-shadow:0 16px 40px rgba(0,0,0,.35); transition:transform .35s cubic-bezier(.2,.7,.25,1)} .fc-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:filmRing 2.2s ease-out infinite} @keyframes filmRing{from{transform:scale(.9);opacity:1}to{transform:scale(1.35);opacity:0}} .fc-play svg{width:32px;height:32px;fill:var(--indigo-700);margin-left:5px} .filmcard:hover .fc-play{transform:scale(1.1)} .fc-cap{position:absolute;left:24px;bottom:20px;z-index:2;color:#fff} .fc-cap b{display:block;font-family:var(--disp);font-size:1.4rem;font-weight:700;line-height:1.1} .fc-cap span{font-size:.92rem;color:#DDDBF2} .filmlb{position:fixed;inset:0;z-index:2000;display:none;place-items:center;padding:20px} .filmlb.on{display:grid} .fl-back{position:absolute;inset:0;background:rgba(10,8,30,.9);backdrop-filter:blur(8px);animation:flFade .35s ease} @keyframes flFade{from{opacity:0}to{opacity:1}} .fl-box{position:relative;width:min(92vw,1280px,calc((100vh - 60px) * 16 / 9));aspect-ratio:16/9;border-radius:18px;overflow:hidden; background:#000;box-shadow:0 50px 120px rgba(0,0,0,.6)} .fl-slot,.fl-slot video{width:100%;height:100%;display:block} .fl-slot video{object-fit:contain;background:#000} .fl-x{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer; background:rgba(255,255,255,.92);color:var(--ink);font-size:1.6rem;line-height:1;display:grid;place-items:center; box-shadow:0 8px 20px rgba(0,0,0,.35)} .fl-x:hover{background:#fff} html.filmopen{overflow:hidden} @media (max-width:600px){.fc-play{width:68px;height:68px;margin:-34px 0 0 -34px}.fc-cap b{font-size:1.15rem}.filmlb{padding:0}.fl-box{border-radius:0;width:100vw}} @media (prefers-reduced-motion:reduce){.fc-play::before{animation:none}.filmcard{transition:none}} /* the film carries its own lower-third titles, so our caption sits at the top */ .fc-cap{top:20px;bottom:auto} .filmcard::after{background:linear-gradient(to bottom,rgba(20,16,56,.72) 0%,rgba(20,16,56,.08) 38%,rgba(20,16,56,0) 60%,rgba(20,16,56,.18) 100%)} /* doctor profile header, name-and-speciality roster */ .dochead{display:flex;align-items:center;gap:22px;margin:6px 0 22px} .docav{flex:0 0 auto;display:grid;place-items:center;width:92px;height:92px;border-radius:26px; background:linear-gradient(150deg,var(--green),var(--indigo-500));color:#fff;font-family:var(--disp);font-size:2.1rem;font-weight:700; box-shadow:0 16px 36px rgba(8,6,30,.35);border:3px solid rgba(255,255,255,.3)} .dochead .docname{color:#fff;font-size:clamp(2rem,4vw,3rem);margin:4px 0 6px} .dochead p{margin:0;color:#D6D3F0} .docqual{margin-top:4px !important;font-size:.9rem;color:#B7B4DE !important} .finder .controls:has(.qonly){grid-template-columns:1fr} @media (max-width:560px){.dochead{flex-direction:column;align-items:flex-start}.docav{width:72px;height:72px;font-size:1.6rem}} .finder .tabs{grid-template-columns:repeat(4,1fr)!important} .finder .drow{grid-template-columns:auto 1fr auto auto!important} @media (max-width:700px){.finder .tabs{grid-template-columns:repeat(2,1fr)!important}} /* ════════════════════════════════════════════════════════════ DIAGNOSTICS & ALLIED — photo carousel synced with its list ════════════════════════════════════════════════════════════ */ .diagsec{background:var(--surface-alt)} .dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .dcard{background:#fff;border:1px solid var(--rule);border-radius:24px;overflow:hidden;display:flex;flex-direction:column; box-shadow:0 2px 4px rgba(24,26,52,.04),0 18px 44px rgba(24,26,52,.09);transition:transform .45s cubic-bezier(.2,.7,.25,1),box-shadow .45s} .dcard:hover{transform:translateY(-5px);box-shadow:0 4px 8px rgba(24,26,52,.05),0 28px 60px rgba(24,26,52,.15)} .dcar{position:relative;aspect-ratio:16/10;overflow:hidden;background:#1E1A4C} .dslide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease} .dslide.is-on{opacity:1} .dslide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);transition:transform 5s ease} .dslide.is-on img{transform:scale(1)} .dcar::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(20,16,50,.6),transparent 45%)} .dcap{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--disp);font-weight:600;font-size:.95rem;color:#fff; background:rgba(20,16,50,.45);backdrop-filter:blur(6px);border-radius:999px;padding:6px 13px} .ddots{position:absolute;right:16px;bottom:20px;z-index:2;display:flex;gap:6px} .ddots i{width:7px;height:7px;border-radius:4px;background:rgba(255,255,255,.5);transition:width .3s,background .3s} .ddots i.on{width:20px;background:#fff} .dbody{padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px;flex:1} .dh{display:flex;gap:14px;align-items:center} .dic{flex:0 0 auto;display:grid;place-items:center;width:50px;height:50px;border-radius:15px;box-shadow:0 10px 22px rgba(24,26,52,.18)} .dic svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .dcard--indigo .dic{background:linear-gradient(150deg,var(--indigo-500),var(--indigo-700))} .dcard--green .dic{background:linear-gradient(150deg,#8DBE5E,#5E8228)} .dcard--amber .dic{background:linear-gradient(150deg,#F0A04B,#D95F1C)} .dh h3{margin:0;font-size:1.35rem;color:var(--ink)} .dh p{margin:2px 0 0;font-size:.9rem;color:var(--ink-600)} .dlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .dlist li{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:12px;transition:background .25s} .dlist button{flex:1;text-align:left;border:0;background:none;cursor:pointer;padding:10px 12px;border-radius:12px; font:inherit;font-size:.97rem;color:var(--ink-600);display:flex;align-items:center;gap:10px} .dlist button::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#CBD0E0;transition:all .25s} .dlist li.on{background:var(--indigo-050)} .dlist li.on button{color:var(--indigo-700);font-weight:600} .dlist li.on button::before{background:var(--indigo-700);box-shadow:0 0 0 4px rgba(68,60,153,.15)} .dcard--green .dlist li.on{background:var(--green-pastel2)} .dcard--green .dlist li.on button{color:#3F5E1C} .dcard--green .dlist li.on button::before{background:var(--green-mid);box-shadow:0 0 0 4px rgba(94,130,40,.18)} .dcard--amber .dlist li.on{background:#FFF3E8} .dcard--amber .dlist li.on button{color:#A8511A} .dcard--amber .dlist li.on button::before{background:#D95F1C;box-shadow:0 0 0 4px rgba(217,95,28,.16)} .dlist button:hover{color:var(--ink)} .dmore{flex:0 0 auto;margin-right:12px;font-family:var(--disp);font-weight:600;font-size:.88rem;color:#C0551A;text-decoration:none} .dnote{margin-top:var(--s4)} @media (max-width:1100px){.dgrid{grid-template-columns:1fr 1fr}} @media (max-width:700px){.dgrid{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.dslide,.dslide img{transition:none}.dslide img{transform:none}} /* ════════════════════════════════════════════════════════════ DEPARTMENT CARDS — indigo with white type ════════════════════════════════════════════════════════════ */ .depts .dept{position:relative;overflow:hidden;border:0;border-radius:22px;padding:26px 24px 22px;color:#fff; background:radial-gradient(420px 220px at 100% 0%,rgba(128,176,72,.22),transparent 60%), linear-gradient(150deg,#2A2566 0%,#3A3288 55%,#4B42A6 100%); box-shadow:0 18px 44px rgba(30,24,90,.22);display:flex;flex-direction:column;gap:10px; transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s} .depts .dept::before{display:none} .depts .dept:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(30,24,90,.34)} .depts .dept .dshot{width:72px;height:72px;border-radius:20px;margin:0 0 4px;background:#fff; box-shadow:0 10px 24px rgba(8,6,30,.3)} .depts .dept .dshot img{width:78%;height:78%} .depts .dept h3{margin:0;font-size:1.3rem;line-height:1.2} .depts .dept h3 a{color:#fff;text-decoration:none} .depts .dept h3 a:hover{color:var(--green-soft)} .depts .dept p{margin:0;color:#D4D1F0;font-size:.95rem;line-height:1.55;flex:1} .depts .dept .meta{display:flex;flex-wrap:wrap;gap:8px} .depts .dept .pill{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18)} .depts .dept .pill--free{background:var(--green);color:#12210B;border-color:var(--green)} .depts .dept .pill--soon{background:rgba(255,255,255,.18);color:#fff} .depts .dept .dfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)} .depts .dept .dlink{font-family:var(--disp);font-weight:600;font-size:.95rem;color:#fff;text-decoration:none} .depts .dept .dlink:hover{color:var(--green-soft)} .depts .dept .walink{display:inline-flex;align-items:center;gap:7px;margin:0;padding:8px 14px;border-radius:999px; background:#1DA851;color:#fff;font-family:var(--disp);font-weight:600;font-size:.9rem;text-decoration:none;--wa-knock:#1DA851} .depts .dept .walink:hover{background:#17843F;--wa-knock:#17843F} .depts .dept .walink .waicon{width:16px;height:16px;margin:0} .depts .dept.is-soon{background:linear-gradient(150deg,#3D3A5E,#4E4A78);box-shadow:0 12px 30px rgba(30,24,90,.16)} .depts .dept .dfoot{align-self:stretch;width:100%;box-sizing:border-box;margin-top:auto} .depts .dept > *{max-width:100%} /* CSR hero: copy on the left, the film on the right */ .cshero > .wrap.cs-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:center} .cs-film{display:flex;justify-content:flex-end} .filmcard--portrait{aspect-ratio:4/5;width:100%;max-width:420px;max-height:560px} .filmcard--portrait .fc-play{width:78px;height:78px;margin:-39px 0 0 -39px} .filmcard--portrait .fc-cap b{font-size:1.25rem} .fl-box{width:min(92vw,1280px,calc((100vh - 60px) * var(--r,1.7778)))!important;aspect-ratio:var(--ar,16/9)!important} @media (max-width:1000px){.cshero > .wrap.cs-grid{grid-template-columns:1fr}.cs-film{justify-content:flex-start}.filmcard--portrait{max-width:360px}} /* CSR hero: the film is the picture, so the backdrop is clean indigo with a warm glow behind it */ .cshero .bg{display:none} .cshero{background: radial-gradient(620px 520px at 78% 42%, rgba(246,194,139,.20), transparent 62%), radial-gradient(700px 480px at 8% 100%, rgba(128,176,72,.14), transparent 60%), linear-gradient(135deg,#1E1A4C 0%,#2A2566 45%,#3A3288 100%)} .cshero::before{background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 1.5px) 0 0/26px 26px} .cshero .impact{background:rgba(255,255,255,.06)} .cs-film .filmcard{box-shadow:0 40px 90px rgba(8,6,30,.55), 0 0 0 1px rgba(255,255,255,.08)} /* pillar cards: keep faces clear of the text band */ .cpil img{object-position:center 30%} .cpartner .pimg img{object-position:center 40%} .cpartner .pimg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,50,.72),transparent 38%);pointer-events:none} .cpartner .pcap{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff;font-size:.9rem;line-height:1.4} .cpartner .tag{z-index:2} /* ════════════════════════════════════════════════════════════ FOOTER — everything a patient might look for, in one place ════════════════════════════════════════════════════════════ */ footer .factbar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:var(--s6)} footer .fact{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:18px;text-decoration:none; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:background .2s,transform .3s} footer .fact:hover{background:rgba(255,255,255,.11);transform:translateY(-2px)} footer .fact .fi{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:14px; background:linear-gradient(150deg,var(--indigo-500),#6A62C4)} footer .fact .fi svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} footer .fact--sos .fi{background:linear-gradient(150deg,#E0474D,#B8232A)} footer .fact--wa .fi{background:#1DA851;color:#fff} footer .fact--wa .fi .waicon{width:24px;height:24px;margin:0;stroke:none} footer .fact i{display:block;font-style:normal;font-size:.82rem;color:#B7B3E0} footer .fact b{display:block;font-family:var(--disp);font-size:1.2rem;color:#fff;line-height:1.2} footer .fcols{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr!important;gap:var(--s5)!important} footer .fcontact{list-style:none;margin:var(--s3) 0 0;padding:0;display:flex;flex-direction:column;gap:10px} footer .fcontact li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:#C9C6E8;line-height:1.45} footer .fcontact svg{flex:0 0 auto;width:17px;height:17px;margin-top:2px;fill:none;stroke:var(--green-soft);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} footer .fcontact a{color:#fff;text-decoration:none;font-weight:500} footer .fcontact a:hover{color:var(--green-soft)} footer .fbadges{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)} footer .fbadges span{font-family:var(--disp);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--green-soft);border:1px solid rgba(183,212,147,.35);border-radius:999px;padding:5px 11px} footer .ffree{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} footer .ffree li{display:flex;gap:10px;font-size:.92rem;color:#C9C6E8} footer .ffree b{flex:0 0 36px;font-family:var(--disp);color:var(--green-soft);font-weight:700} footer .fmore{display:inline-block;margin-top:12px;font-family:var(--disp);font-weight:600;color:var(--green-soft)!important;text-decoration:none} footer .fmore:hover{color:#fff!important} footer .fbot{flex-direction:column;align-items:flex-start;gap:8px} footer .fbot .fdisc{font-size:.84rem;color:#9D99CC} footer .fbot .fdisc a{color:#fff} @media (max-width:1100px){footer .fcols{grid-template-columns:1fr 1fr 1fr!important}footer .fbrand{grid-column:1 / -1}} @media (max-width:700px){footer .factbar{grid-template-columns:1fr}footer .fcols{grid-template-columns:1fr 1fr!important}} @media (max-width:420px){footer .fcols{grid-template-columns:1fr!important}} footer .fsocial{display:flex;align-items:center;gap:10px;margin-top:var(--s3)} footer .fsocial > span{font-family:var(--disp);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#B7B3E0;margin-right:4px} footer .soc{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);transition:transform .25s,background .25s,border-color .25s} footer .soc svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} footer .soc svg .dot,footer .soc svg .fill{fill:#fff;stroke:none} footer .soc:hover{transform:translateY(-3px);border-color:transparent} footer .soc--ig:hover{background:linear-gradient(45deg,#F58529,#DD2A7B 50%,#8134AF)} footer .soc--fb:hover{background:#1877F2} /* ════════════════════════════════════════════════════════════ CSR FIRST SCREEN — the film, edge to edge, nothing else ════════════════════════════════════════════════════════════ */ .csvid{position:relative;padding:0;background:#0E0B26} .filmcard.filmhero{display:block;aspect-ratio:auto;height:calc(100vh - 108px);min-height:460px;max-height:980px; border-radius:0;box-shadow:none;transform:none!important} .filmhero .fc-media video{object-fit:cover} .filmhero::after{background:linear-gradient(to top,rgba(10,8,30,.55) 0%,rgba(10,8,30,0) 30%)} .fh-cta{position:absolute;left:clamp(20px,5vw,72px);bottom:clamp(22px,5vh,48px);z-index:3;display:flex;align-items:center;gap:14px; padding:10px 20px 10px 10px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.22);color:#fff;transition:background .25s,transform .3s} .filmhero:hover .fh-cta,.filmhero:focus-visible .fh-cta{background:rgba(255,255,255,.24);transform:translateY(-2px)} .fh-cta .pl{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.3)} .fh-cta .pl svg{width:20px;height:20px;fill:var(--indigo-700);margin-left:3px} .fh-cta b{display:block;font-family:var(--disp);font-size:1.15rem;line-height:1.1} .fh-cta i{display:block;font-style:normal;font-size:.85rem;color:#DDDBF2} .fh-scroll{position:absolute;right:clamp(20px,5vw,72px);bottom:clamp(30px,5.5vh,56px);z-index:3;width:30px;height:48px;border-radius:16px; border:2px solid rgba(255,255,255,.7);display:flex;justify-content:center} .fh-scroll span{width:4px;height:9px;border-radius:2px;background:#fff;margin-top:9px;animation:fhScroll 1.8s ease-in-out infinite} @keyframes fhScroll{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}} /* the copy that used to sit on the photo now has its own calm section */ .cshero--copy{min-height:0} .cshero--copy > .wrap.cs-grid{grid-template-columns:1fr;padding-block:var(--s6) var(--s5)} .cshero--copy .cs-copy{max-width:780px} @media (max-width:700px){.filmcard.filmhero{height:auto;aspect-ratio:16/10;min-height:0}.fh-scroll{display:none}.fh-cta{padding:8px 16px 8px 8px}.fh-cta .pl{width:40px;height:40px}} @media (prefers-reduced-motion:reduce){.fh-scroll span{animation:none}} .filmcard.filmhero{height:calc(100vh - 113px);height:calc(100svh - 113px)} .fh-scroll{right:auto;left:50%;margin-left:-15px} .cshero--copy{scroll-margin-top:80px} /* ════════════════════════════════════════════════════════════ GALLERY — eight albums ════════════════════════════════════════════════════════════ */ .gfilter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s4)} .gbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);background:#fff;border-radius:999px; padding:9px 16px;cursor:pointer;font-family:var(--disp);font-size:.95rem;font-weight:600;color:var(--ink-600);transition:all .2s} .gbtn b{font-weight:700;font-size:.8rem;color:var(--ink-400);background:var(--surface-alt);border-radius:999px;padding:1px 8px} .gbtn:hover{border-color:var(--indigo-500);color:var(--indigo-700)} .gbtn[aria-pressed="true"]{background:var(--indigo-700);border-color:var(--indigo-700);color:#fff} .gbtn[aria-pressed="true"] b{background:rgba(255,255,255,.18);color:#fff} .ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .gitem{position:relative;display:block;padding:0;border:0;border-radius:18px;overflow:hidden;cursor:zoom-in;background:#1E1A4C; aspect-ratio:3/2;box-shadow:0 10px 26px rgba(24,26,52,.12);transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s} .gitem:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(24,26,52,.2)} .gitem img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.25,1)} .gitem:hover img{transform:scale(1.06)} .gitem figcaption{position:absolute;inset:auto 0 0 0;padding:40px 18px 14px;text-align:left; background:linear-gradient(to top,rgba(14,11,38,.85),transparent);display:flex;flex-direction:column;gap:2px} .gitem .gt{font-family:var(--disp);font-size:1.08rem;font-weight:600;color:#fff} .gitem .gd{font-size:.84rem;color:#D4D1F0;opacity:0;max-height:0;transition:opacity .3s,max-height .3s} .gitem:hover .gd,.gitem:focus-visible .gd{opacity:1;max-height:3em} .gitem:nth-child(7n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:auto} @media (max-width:900px){.ggrid{grid-template-columns:repeat(2,1fr)}.gitem:nth-child(7n+1){grid-column:span 2;grid-row:auto;aspect-ratio:3/2}} @media (max-width:520px){.ggrid{grid-template-columns:1fr}.gitem:nth-child(7n+1){grid-column:auto}.gitem .gd{opacity:1;max-height:3em}} .ggrid{grid-auto-flow:dense} /* sound control on the CSR film */ .fh-sound{position:absolute;top:clamp(16px,3vh,28px);right:clamp(20px,5vw,72px);z-index:4;display:inline-flex;align-items:center;gap:10px; padding:10px 18px 10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3);cursor:pointer; background:rgba(14,11,38,.5);backdrop-filter:blur(10px);color:#fff;font-family:var(--disp);font-weight:600;font-size:1rem; transition:background .25s,transform .25s} .fh-sound:hover{background:rgba(14,11,38,.7);transform:translateY(-1px)} .fh-sound svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .fh-sound svg path:first-child{fill:#fff} .fh-sound .s-on,.fh-sound .t-on{display:none} .fh-sound.on .s-on,.fh-sound.on .t-on{display:inline} .fh-sound.on .s-off,.fh-sound.on .t-off{display:none} .fh-sound:not(.on){animation:soundPulse 2.4s ease-in-out infinite} @keyframes soundPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}50%{box-shadow:0 0 0 10px rgba(255,255,255,0)}} @media (prefers-reduced-motion:reduce){.fh-sound{animation:none!important}} /* ════════════════════════════════════════════════════════════ GALLERY — albums, album view, full-screen viewer ════════════════════════════════════════════════════════════ */ .galwrap{background:linear-gradient(180deg,#F7F6FC,#fff 40%)} .galhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:var(--s5)} .galhead h2{margin:6px 0 0} .albums{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 26px} .alb{position:relative;display:block;padding:0;border:0;background:none;cursor:pointer;text-align:left} .alb-stack{position:relative;display:block;aspect-ratio:4/3;border-radius:18px} .alb-stack::before,.alb-stack::after{content:"";position:absolute;inset:0;border-radius:18px;background:#fff; box-shadow:0 6px 18px rgba(24,26,52,.10);transition:transform .45s cubic-bezier(.2,.7,.25,1)} .alb-stack::before{transform:rotate(-4deg) translate(-6px,6px);background:#E9E7F6} .alb-stack::after{transform:rotate(2.5deg) translate(6px,3px);background:#F1F7EA} .alb-stack img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;border-radius:18px; border:5px solid #fff;box-sizing:border-box;box-shadow:0 18px 40px rgba(24,26,52,.18);transition:transform .45s cubic-bezier(.2,.7,.25,1)} .alb:hover .alb-stack img,.alb:focus-visible .alb-stack img{transform:translateY(-6px)} .alb:hover .alb-stack::before{transform:rotate(-7deg) translate(-12px,8px)} .alb:hover .alb-stack::after{transform:rotate(5deg) translate(12px,4px)} .alb-meta{display:block;margin-top:18px} .alb-meta b{display:block;font-family:var(--disp);font-size:1.22rem;color:var(--ink)} .alb-meta i{font-style:normal;font-size:.9rem;color:var(--ink-400)} .alb-go{position:absolute;right:4px;bottom:6px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%; background:var(--indigo-050);color:var(--indigo-700);font-weight:700;transition:all .25s} .alb:hover .alb-go{background:var(--indigo-700);color:#fff;transform:translateX(3px)} .alb:focus-visible{outline:3px solid var(--green);outline-offset:6px;border-radius:18px} .gvbar{display:flex;align-items:center;gap:22px;margin-bottom:var(--s4);flex-wrap:wrap} .gvback{border:1px solid var(--rule);background:#fff;border-radius:999px;padding:10px 18px;cursor:pointer; font-family:var(--disp);font-weight:600;font-size:.98rem;color:var(--indigo-700);transition:all .2s} .gvback:hover{background:var(--indigo-700);color:#fff;border-color:var(--indigo-700)} .gvtitle{margin:0;font-size:clamp(1.6rem,3vw,2.3rem)} .gvcount{font-size:.95rem;color:var(--ink-400)} .gset{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .gset[hidden]{display:none} .gph{position:relative;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:zoom-in;aspect-ratio:3/2;background:#1E1A4C; box-shadow:0 10px 26px rgba(24,26,52,.12);transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s; animation:gphIn .5s cubic-bezier(.2,.7,.25,1) both} .gset .gph:nth-child(2){animation-delay:.04s}.gset .gph:nth-child(3){animation-delay:.08s}.gset .gph:nth-child(4){animation-delay:.12s} .gset .gph:nth-child(5){animation-delay:.16s}.gset .gph:nth-child(6){animation-delay:.2s} @keyframes gphIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .gph:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(24,26,52,.2)} .gph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.25,1)} .gph:hover img{transform:scale(1.05)} .gph-cap{position:absolute;inset:auto 0 0 0;padding:36px 16px 13px;text-align:left;background:linear-gradient(to top,rgba(14,11,38,.82),transparent)} .gph-cap b{display:block;font-family:var(--disp);font-size:1.02rem;color:#fff} .gph-cap i{display:block;font-style:normal;font-size:.82rem;color:#D4D1F0;opacity:0;max-height:0;transition:opacity .3s,max-height .3s} .gph:hover .gph-cap i{opacity:1;max-height:3em} .glb{position:fixed;inset:0;z-index:2100;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:24px} .glb[hidden]{display:none} .glb-back{position:absolute;inset:0;background:rgba(10,8,26,.94);backdrop-filter:blur(8px);animation:flFade .3s ease} .glb-fig{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:100%;min-width:0} .glb-img{max-width:100%;max-height:calc(100vh - 150px);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:glbIn .35s ease} @keyframes glbIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}} .glb-fig figcaption{text-align:center;color:#fff;max-width:70ch} .glb-t{display:block;font-family:var(--disp);font-size:1.25rem} .glb-d{display:block;font-size:.95rem;color:#C9C6E8;margin-top:2px} .glb-n{display:block;font-style:normal;font-size:.82rem;letter-spacing:.14em;color:#8E8AC0;margin-top:6px} .glb-nav,.glb-x{position:relative;z-index:2;border:0;cursor:pointer;display:grid;place-items:center;color:#fff; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);transition:background .2s} .glb-nav{width:56px;height:56px;border-radius:50%;font-size:2rem;line-height:1} .glb-nav:hover,.glb-x:hover{background:rgba(255,255,255,.22)} .glb-x{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;font-size:1.7rem} html.glbopen{overflow:hidden} @media (max-width:1100px){.albums{grid-template-columns:repeat(2,1fr)}.gset{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.albums,.gset{grid-template-columns:1fr}.glb{grid-template-columns:1fr;padding:12px} .glb-nav{position:absolute;bottom:22px;width:48px;height:48px}.glb-prev{left:22px}.glb-next{right:22px} .gph-cap i{opacity:1;max-height:3em}} @media (prefers-reduced-motion:reduce){.gph,.glb-img{animation:none}} /* buttons do not inherit the site font by default */ .alb,.gph,.gvback{font:inherit} .alb-meta i{font-family:var(--body,inherit)} /* the stacked-prints effect, clearly visible */ .alb-stack::before{transform:rotate(-5deg) translate(-10px,10px);background:#DCD9F0;box-shadow:0 8px 20px rgba(24,26,52,.14)} .alb-stack::after{transform:rotate(3.5deg) translate(10px,6px);background:#E6F1D9;box-shadow:0 8px 20px rgba(24,26,52,.12)} .alb:hover .alb-stack::before{transform:rotate(-8deg) translate(-16px,12px)} .alb:hover .alb-stack::after{transform:rotate(6deg) translate(16px,8px)} .albums{padding:10px 12px 0} /* album view: magazine rhythm on six columns */ .gset{grid-template-columns:repeat(6,1fr);gap:18px} .gph.s2{grid-column:span 2}.gph.s3{grid-column:span 3}.gph.s6{grid-column:span 6;aspect-ratio:21/9} @media (max-width:1100px){.gset{grid-template-columns:repeat(2,1fr)}.gph.s2,.gph.s3{grid-column:span 1}.gph.s6{grid-column:span 2}} @media (max-width:560px){.gset{grid-template-columns:1fr}.gph.s6{grid-column:span 1;aspect-ratio:3/2}} /* ════════════════════════════════════════════════════════════ PRESIDENT — media left, vision right ════════════════════════════════════════════════════════════ */ .president{background:linear-gradient(180deg,#F7F6FC 0%,#fff 100%);position:relative;overflow:hidden} .president::before{content:"";position:absolute;right:-160px;top:-120px;width:480px;height:480px;border-radius:50%; background:radial-gradient(circle,rgba(128,176,72,.14),transparent 70%)} .pres-grid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s6);align-items:center} .presmedia,.presfilm{margin:0;position:relative;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px rgba(24,26,52,.22)} .presmedia img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;object-position:center 30%} .presmedia::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,11,38,.6),transparent 40%)} .presmedia figcaption{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;font-family:var(--disp);font-weight:600;font-size:.95rem; background:rgba(14,11,38,.4);backdrop-filter:blur(6px);border-radius:999px;padding:6px 14px} .presfilm{aspect-ratio:16/10} .pres-right .eyebrow{color:var(--green-mid)} .pres-right h2{margin:6px 0 2px;font-size:clamp(2rem,3.4vw,2.8rem)} .pres-role{margin:0 0 16px;font-family:var(--disp);font-weight:600;font-size:1.05rem;color:var(--indigo-500)} .pres-right .lede{color:var(--ink-600);margin:0 0 18px} .pres-vision{margin:0 0 22px;padding:20px 22px 20px 26px;border-left:4px solid var(--green);border-radius:0 16px 16px 0; background:linear-gradient(120deg,var(--indigo-050),#fff 80%);font-family:var(--disp);font-size:1.3rem;font-weight:600; line-height:1.35;color:var(--indigo-700)} .pv-k{display:block;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-mid);margin-bottom:8px} .pres-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px} .pres-points li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:14px; box-shadow:var(--shadow-sm);font-size:.88rem;color:var(--ink-600);line-height:1.4} .pres-points span{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--indigo-050)} .pres-points li:nth-child(even) span{background:var(--green-pastel)} .pres-points svg{width:19px;height:19px;fill:none;stroke:var(--indigo-700);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pres-points li:nth-child(even) svg{stroke:var(--green-mid)} .pres-points b{display:block;font-family:var(--disp);font-size:.98rem;color:var(--ink);margin-bottom:2px} @media (max-width:1000px){.pres-grid{grid-template-columns:1fr}} @media (max-width:560px){.pres-points{grid-template-columns:1fr}} .presmedia figcaption{top:16px;bottom:auto} .presmedia::after{background:linear-gradient(to bottom,rgba(14,11,38,.45),transparent 30%)} .presmedia img{object-position:center 70%} /* quick-action WhatsApp card: the icon in WhatsApp green with a white handset */ .q-wa svg{color:#1DA851!important;--wa-knock:#fff;background:#E6F7EC!important} .q-wa:hover svg{color:#fff!important;--wa-knock:#1DA851;background:#1DA851!important} .q-wa svg,.q-wa svg path:first-child{fill:#1DA851!important;stroke:none!important} .q-wa svg path:last-child{fill:#fff!important;stroke:none!important} .q-wa:hover svg,.q-wa:hover svg path:first-child{fill:#fff!important} .q-wa:hover svg path:last-child{fill:#1DA851!important} /* ════════════════════════════════════════════════════════════ ONLINE CONSULTATION ON WHATSAPP ════════════════════════════════════════════════════════════ */ .onc{position:relative;overflow:hidden;background:linear-gradient(135deg,#F2FAF4 0%,#fff 45%,#F4F3FC 100%)} .onc::before{content:"";position:absolute;right:-180px;top:-160px;width:560px;height:560px;border-radius:50%; background:radial-gradient(circle,rgba(29,168,81,.13),transparent 70%)} .onc-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s6);align-items:center} .onc-l .eyebrow{color:#17843F} .onc-l h2{margin:8px 0 12px;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.08} .onc-l h2 em{font-style:normal;color:#17843F} .onc-l .lede{color:var(--ink-600);max-width:52ch;margin:0 0 22px} .onc-steps{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:12px;counter-reset:oc} .onc-steps li{position:relative;display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--rule);border-radius:16px; padding:14px 16px;box-shadow:var(--shadow-sm)} .onc-steps li:not(:last-child)::after{content:"";position:absolute;left:37px;bottom:-13px;width:2px;height:12px;background:#BDE5CB} .onc-steps .i{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#E6F7EC} .onc-steps .i svg{width:22px;height:22px;fill:none;stroke:#17843F;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .onc-steps b{display:block;font-family:var(--disp);font-size:1.08rem;color:var(--ink)} .onc-steps i{display:block;font-style:normal;font-size:.9rem;color:var(--ink-600);line-height:1.45;margin-top:2px} .oncform{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:18px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:12px} .oncform .row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .oncform label{display:block;font-family:var(--disp);font-size:.86rem;font-weight:600;color:var(--ink-600);margin-bottom:5px} .oncform input,.oncform select{width:100%;box-sizing:border-box;border:1.5px solid #E1E3EE;border-radius:12px;background:#FAFAFE;padding:11px 13px; font:inherit;font-size:.96rem;color:var(--ink)} .oncform input:focus,.oncform select:focus{outline:0;border-color:#1DA851;box-shadow:0 0 0 4px rgba(29,168,81,.14)} .oncform .go{width:100%;justify-content:center;font-size:1.05rem;padding:14px} .onc-note,.onc-sos{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:.9rem;color:var(--ink-600);line-height:1.45} .onc-note svg,.onc-sos svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px;fill:none;stroke:#17843F;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .onc-sos{margin-top:8px;color:#8C2328} .onc-sos svg{stroke:#C1272D} .onc-sos a{color:#C1272D;font-weight:700} .onc-r{display:flex;flex-direction:column;align-items:center} .phone{width:min(360px,100%);border-radius:40px;padding:12px;background:#1A1830;box-shadow:0 40px 90px rgba(24,26,52,.35),inset 0 0 0 2px #2F2C4F} .ph-top{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:30px 30px 0 0;background:#075E54;color:#fff} .ph-av{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;overflow:hidden} .ph-av img{width:30px;height:auto} .ph-top b{display:block;font-family:var(--disp);font-size:1rem} .ph-top i{display:block;font-style:normal;font-size:.78rem;color:#C8E6DF} .ph-chat{min-height:430px;padding:16px 12px 18px;border-radius:0 0 30px 30px;display:flex;flex-direction:column;gap:10px; background:#ECE5DD radial-gradient(circle at 1px 1px,rgba(0,0,0,.04) 1px,transparent 1.5px) 0 0/18px 18px} .msg{max-width:84%;padding:9px 12px;border-radius:12px;font-size:.88rem;line-height:1.4;color:#1E1E1E;box-shadow:0 1px 1px rgba(0,0,0,.08)} .msg.me{align-self:flex-end;background:#DCF8C6;border-top-right-radius:4px} .msg.them{align-self:flex-start;background:#fff;border-top-left-radius:4px} .msg b{display:block;color:#17843F;font-family:var(--disp);margin-bottom:2px} .msg.file{display:flex;align-items:center;gap:8px} .msg .fi svg{width:26px;height:26px;fill:none;stroke:#17843F;stroke-width:1.6} .call{align-self:stretch;display:flex;align-items:center;gap:12px;margin-top:6px;padding:12px 14px;border-radius:16px;background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.12)} .call .ci{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#E6F7EC} .call .ci svg{width:20px;height:20px;fill:none;stroke:#17843F;stroke-width:1.8} .call b{display:block;font-family:var(--disp);font-size:.95rem;color:#1E1E1E} .call i{display:block;font-style:normal;font-size:.8rem;color:#667} .call .acc{margin-left:auto;width:40px;height:40px;border-radius:50%;background:#1DA851;box-shadow:0 0 0 0 rgba(29,168,81,.5);animation:callPulse 1.6s infinite} @keyframes callPulse{70%{box-shadow:0 0 0 14px rgba(29,168,81,0)}100%{box-shadow:0 0 0 0 rgba(29,168,81,0)}} .ph-cap{margin:14px 0 0;font-size:.86rem;color:var(--ink-400)} /* messages arrive one by one when the phone scrolls into view */ .phone .msg,.phone .call{opacity:0;transform:translateY(10px)} .phone.is-in .msg,.phone.is-in .call{animation:msgIn .45s cubic-bezier(.2,.7,.25,1) forwards} .phone.is-in .m1{animation-delay:.2s}.phone.is-in .m2{animation-delay:.9s}.phone.is-in .m3{animation-delay:1.6s} .phone.is-in .m4{animation-delay:2.4s}.phone.is-in .m5{animation-delay:3.3s} @keyframes msgIn{to{opacity:1;transform:none}} @media (max-width:1000px){.onc-grid{grid-template-columns:1fr}.onc-r{order:-1}} @media (max-width:560px){.oncform .row{grid-template-columns:1fr}.ph-chat{min-height:0}} @media (prefers-reduced-motion:reduce){.phone .msg,.phone .call{opacity:1;transform:none;animation:none!important}.call .acc{animation:none}} .call .acc{display:grid;place-items:center} .call .acc svg{width:18px;height:18px;fill:#fff;stroke:none} /* online consultation: the three steps read 1 -> 2 -> 3 in one row */ .onc-grid{align-items:center} .onc-l .lede{margin-bottom:18px} .onc-steps{flex-direction:row;gap:0;margin-bottom:18px;align-items:stretch} .onc-steps li{flex:1;flex-direction:column;gap:8px;padding:16px 14px;border-radius:16px} .onc-steps li:not(:last-child){margin-right:34px} .onc-steps li:not(:last-child)::after{content:"";left:auto;right:-27px;top:50%;bottom:auto;width:20px;height:20px;margin-top:-10px; background:no-repeat center/20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317843F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")} .onc-steps .i{width:40px;height:40px} .onc-steps .n{display:block;font-style:normal;font-family:var(--disp);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#17843F;margin-bottom:2px} .onc-steps b{font-size:1rem;line-height:1.2} .onc-steps i{font-size:.84rem} .oncform{padding:16px;gap:10px} .oncform .row{grid-template-columns:1fr 1fr 1.3fr;gap:10px} .onc-note{margin-top:12px} .onc-sos{margin-top:6px} .ph-chat{min-height:0} @media (max-width:1000px){.onc-steps li:not(:last-child){margin-right:30px}} @media (max-width:700px){.onc-steps{flex-direction:column;gap:30px}.onc-steps li:not(:last-child){margin-right:0} .onc-steps li:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-25px;margin:0 0 0 -10px;transform:rotate(90deg)} .oncform .row{grid-template-columns:1fr}} /* quick actions: five cards, online consultation highlighted */ .quick .grid{grid-template-columns:repeat(5,1fr)!important} .quick .grid > a{position:relative} .q-onc{background:linear-gradient(160deg,#F1FAF4,#fff 70%)!important} .q-onc::before{background:#1DA851!important} .q-onc svg{color:#17843F!important;stroke:#17843F!important;background:#E6F7EC!important;fill:none!important} .q-onc .q-t{color:#17843F!important} .q-new{position:absolute;top:18px;right:18px;font-family:var(--disp);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:#fff;background:#1DA851;border-radius:999px;padding:4px 9px;box-shadow:0 6px 14px rgba(29,168,81,.3)} @media (max-width:1100px){.quick .grid{grid-template-columns:repeat(3,1fr)!important}} @media (max-width:700px){.quick .grid{grid-template-columns:repeat(2,1fr)!important}} @media (max-width:440px){.quick .grid{grid-template-columns:1fr!important}} .onc,#freecare,#online-consultation{scroll-margin-top:80px} /* ════════════════════════════════════════════════════════════ CAREERS ════════════════════════════════════════════════════════════ */ .carhero{padding-block:0;background:radial-gradient(760px 420px at 90% 10%,rgba(128,176,72,.2),transparent 60%),linear-gradient(135deg,#221E58,#332C80 55%,#443C99);color:#fff} .carhero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s6);align-items:center;padding-block:var(--s6)} .carhero .crumb,.carhero .crumb a{color:#BDB9E6} .carhero .kick{display:inline-block;font-family:var(--disp);font-size:.82rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--green-soft);margin:6px 0 12px} .carhero h1{color:#fff;font-size:clamp(2.4rem,4.8vw,3.9rem);line-height:1.04;margin:0 0 14px;letter-spacing:-.02em} .carhero h1 em{font-style:normal;color:var(--green-soft)} .carhero .ch-copy > p{color:#D6D3F0;font-size:1.12rem;max-width:46ch;margin:0 0 24px} .carhero .cta{display:flex;gap:12px;flex-wrap:wrap} .ch-photo{position:relative;margin:0;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px rgba(8,6,30,.45)} .ch-photo img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover} .ch-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,11,38,.6),transparent 40%)} .ch-photo figcaption{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;font-family:var(--disp);font-weight:600;font-size:.95rem} .carwhy{padding-block:var(--s5);background:#fff;border-bottom:1px solid var(--rule)} .cw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .cw{display:flex;flex-direction:column;gap:4px} .cw span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--indigo-050);margin-bottom:8px} .cw:nth-child(2) span{background:var(--green-pastel)} .cw span svg{width:22px;height:22px;fill:none;stroke:var(--indigo-700);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .cw:nth-child(2) span svg{stroke:var(--green-mid)} .cw b{font-family:var(--disp);font-size:1.15rem;color:var(--ink)} .cw i{font-style:normal;font-size:.94rem;color:var(--ink-600)} .carjobs{background:var(--surface-alt);scroll-margin-top:80px} .jobs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .job{position:relative;background:#fff;border:1px solid var(--rule);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:10px; box-shadow:var(--shadow-sm);transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s} .job:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .job-h{display:flex;gap:14px;align-items:center} .ji,.vi{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(150deg,var(--indigo-500),var(--indigo-700));box-shadow:0 10px 22px rgba(68,60,153,.25)} .job:nth-child(even) .ji{background:linear-gradient(150deg,#8DBE5E,#5E8228);box-shadow:0 10px 22px rgba(94,130,40,.25)} .ji svg,.vi svg{width:25px;height:25px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .jd{display:block;font-family:var(--disp);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-mid)} .job h3,.vendor h3{margin:2px 0 0;font-size:1.35rem;color:var(--ink)} .jt{position:absolute;top:22px;right:22px;font-family:var(--disp);font-size:.8rem;font-weight:600;color:var(--indigo-700);background:var(--indigo-050);border-radius:999px;padding:5px 12px} .job p{margin:0;color:var(--ink-600);font-size:.96rem;line-height:1.55} .job ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1} .job li{position:relative;padding-left:22px;font-size:.92rem;color:var(--ink-600)} .job li::before{content:"";position:absolute;left:4px;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--green)} .jbtn{margin-top:8px;justify-content:center} .vendor{margin-top:20px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;border-radius:22px;padding:24px 26px; background:linear-gradient(120deg,#FFF6EC,#fff 70%);border:1px solid #F3E1C8;scroll-margin-top:80px} .vendor .vi{background:linear-gradient(150deg,#F0A04B,#D95F1C);box-shadow:0 10px 22px rgba(217,95,28,.25)} .vendor .jd{color:#C0551A} .vendor p{margin:6px 0 0;color:var(--ink-600);font-size:.95rem} .genapp{margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;border:1px dashed #C9CDE0;border-radius:18px;padding:18px 22px} .genapp b{display:block;font-family:var(--disp);font-size:1.15rem;color:var(--indigo-700)} .genapp span{color:var(--ink-600);font-size:.95rem} .chsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .chsteps li{position:relative;background:#fff;border:1px solid var(--rule);border-radius:20px;padding:24px 20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:6px} .chsteps .n{position:absolute;top:18px;right:20px;font-family:var(--disp);font-size:2.4rem;font-weight:700;color:var(--indigo-050);line-height:1} .chsteps .ci{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#E6F7EC;margin-bottom:6px} .chsteps .ci svg{width:22px;height:22px;fill:none;stroke:#17843F;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .chsteps b{font-family:var(--disp);font-size:1.15rem;color:var(--ink)} .chsteps i{font-style:normal;font-size:.92rem;color:var(--ink-600);line-height:1.5} .carsafe{margin:var(--s4) 0 0;display:flex;gap:12px;align-items:flex-start;background:#FDF2F2;border:1px solid #F4CFD0;border-radius:16px;padding:16px 18px;color:#7E2227;font-size:.95rem} .carsafe svg{flex:0 0 auto;width:22px;height:22px;fill:none;stroke:#C1272D;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} @media (max-width:1000px){.carhero .wrap{grid-template-columns:1fr}.jobs{grid-template-columns:1fr}.vendor{grid-template-columns:auto 1fr}.vendor .btn{grid-column:1 / -1}} @media (max-width:640px){.cw-grid,.chsteps{grid-template-columns:1fr}.jt{position:static;align-self:flex-start}} .btn--light{background:#fff;color:var(--indigo-700);border:0;box-shadow:0 10px 24px rgba(8,6,30,.25)} .btn--light:hover{background:var(--indigo-050);color:var(--indigo-700)} /* careers: life at the hospital carousel */ .lifecar{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:#1E1A4C;box-shadow:0 30px 70px rgba(8,6,30,.45)} .lc-track,.lc-s{position:absolute;inset:0;margin:0} .lc-s{opacity:0;transition:opacity 1s ease} .lc-s.is-on{opacity:1} .lc-s img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);transition:transform 6s ease-out} .lc-s.is-on img{transform:scale(1)} .lifecar::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(14,11,38,.8) 0%,rgba(14,11,38,0) 42%),linear-gradient(to bottom,rgba(14,11,38,.35),transparent 22%)} .lc-tag{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--disp);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#fff;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 12px} .lc-foot{position:absolute;left:20px;right:16px;bottom:20px;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:14px} .lc-cap{margin:0;color:#fff;font-family:var(--disp);font-weight:600;font-size:1.15rem;line-height:1.25;max-width:26ch;transition:opacity .4s} .lc-ctrl{display:flex;align-items:center;gap:8px;flex:0 0 auto} .lc-ctrl button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.14);backdrop-filter:blur(6px); color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s} .lc-ctrl button:hover{background:rgba(255,255,255,.3)} .lc-count{font-family:var(--disp);font-size:.85rem;color:#DDDBF2;min-width:44px;text-align:center} .lc-bar{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;background:rgba(255,255,255,.18)} .lc-bar i{display:block;height:100%;width:0;background:var(--green-soft)} .lifecar.run .lc-bar i{animation:lcBar var(--lc-t,4.5s) linear forwards} @keyframes lcBar{from{width:0}to{width:100%}} @media (prefers-reduced-motion:reduce){.lc-s img{transition:none;transform:none}.lifecar.run .lc-bar i{animation:none}} /* president section, video version */ .pres-grid{align-items:start} .pres-left{position:sticky;top:96px} .presfilm{aspect-ratio:16/9} .pres-under{margin:16px 4px 0;font-family:var(--disp);font-size:1.25rem;font-weight:600;color:var(--indigo-700)} .pres-under span{display:block;font-size:.95rem;font-weight:500;color:var(--ink-400);margin-top:2px} .pv-hi{display:block;margin-top:10px;font-size:1rem;font-weight:500;color:var(--ink-600);line-height:1.5} .pres-right .lede{margin:0 0 14px} .pres-plan{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:12px} .pres-plan li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--rule);border-radius:16px;padding:16px 18px; box-shadow:var(--shadow-sm);font-size:.93rem;color:var(--ink-600);line-height:1.5} .pres-plan span{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--indigo-050)} .pres-plan li:nth-child(2) span{background:#FDECEC} .pres-plan li:nth-child(3) span{background:#FFF1E4} .pres-plan svg{width:22px;height:22px;fill:none;stroke:var(--indigo-700);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pres-plan li:nth-child(2) svg{stroke:#C1272D} .pres-plan li:nth-child(3) svg{stroke:#D95F1C} .pres-plan b{display:block;font-family:var(--disp);font-size:1.08rem;color:var(--ink);margin-bottom:2px} .pres-cta{display:flex;gap:12px;flex-wrap:wrap} @media (max-width:1000px){.pres-left{position:static}} /* social links in the top bar */ .ub-r{display:flex;align-items:center;gap:18px} .ub-soc{display:flex;gap:6px;padding-left:16px;border-left:1px solid rgba(255,255,255,.25)} .ub-soc a{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:#fff;opacity:.85;transition:opacity .2s,background .2s} .ub-soc a:hover{opacity:1;background:rgba(255,255,255,.14)} .ub-soc svg{width:15px;height:15px} @media (max-width:700px){.ub-r > span:first-child{display:none}.ub-soc{border-left:0;padding-left:0}} /* follow row on the contact page */ .cfollow{display:flex;align-items:center;gap:12px;margin-top:var(--s3);padding:14px 16px;border-radius:16px;background:var(--surface-alt);border:1px solid var(--rule)} .cfollow b{font-family:var(--disp);color:var(--ink);margin-right:auto} .cfollow a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;text-decoration:none;font-family:var(--disp);font-weight:600;font-size:.95rem;color:#fff} .cfollow a svg{width:18px;height:18px} .cfollow .ig{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)} .cfollow .fb{background:#1877F2} /* the nav carries nine items, so it collapses earlier than the rest of the layout */ @media (max-width:1240px){ .masthead .nav{display:none} .masthead .burger{display:block} .masthead .nav.is-open{ display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;top:100%;left:0;right:0; background:#fff;border-bottom:1px solid var(--rule);padding:var(--s2) var(--s3) var(--s3); box-shadow:0 12px 26px rgba(61,63,130,.14); } .masthead .nav.is-open a{padding:13px 10px;border-bottom:1px solid var(--rule)} .masthead .nav.is-open .btn{margin:var(--s2) 0 0} } @media (min-width:1241px){ .masthead .wrap{max-width:1320px} .nav a{font-size:.95rem;padding:9px 9px} } /* single-file router */ .page{display:none} .page.is-active{display:block} .pressx{display:block;background:linear-gradient(180deg,#fff,#F7F6FC);scroll-margin-top:80px} .ar,.nw-clip,.nw-read,.prv button{font:inherit} .news{display:grid;grid-template-columns:1fr 1fr;gap:22px} .nw{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:24px;overflow:hidden;box-shadow:0 18px 44px rgba(24,26,52,.10)} .nw-clips{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;padding:14px;background:linear-gradient(135deg,#F1EFE8,#E8E6DD)} .nw-clip{padding:0;border:0;cursor:zoom-in;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 8px 20px rgba(40,30,10,.18);height:210px; transition:transform .35s cubic-bezier(.2,.7,.25,1)} .nw-clip:first-child{transform:rotate(-1.2deg)}.nw-clip:last-child{transform:rotate(1.4deg)} .nw-clip:hover{transform:rotate(0) translateY(-4px) scale(1.02)} .nw-clip img{width:100%;height:100%;object-fit:cover;object-position:top;display:block} .nw-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1} .nw-src{font-family:var(--disp);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-mid)} .nw h3{margin:0;font-size:1.45rem;color:var(--ink);line-height:1.2} .nw p{margin:0;color:var(--ink-600);font-size:.97rem;line-height:1.6} .nw-tags{display:flex;flex-wrap:wrap;gap:6px} .nw-tags span{font-size:.8rem;font-weight:600;color:var(--indigo-700);background:var(--indigo-050);border-radius:999px;padding:4px 10px} .nw-read{align-self:flex-start;margin-top:auto;border:0;background:none;padding:6px 0 0;cursor:pointer;font:inherit;font-family:var(--disp);font-weight:700;color:var(--green-mid);font-size:1rem} .nw-read:hover{color:var(--indigo-700)} .arch-h{margin:var(--s6) 0 var(--s3)} .arch-h h3{margin:0;font-size:1.6rem;color:var(--ink)} .arch-h p{margin:4px 0 0;color:var(--ink-400)} .arch{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;grid-auto-flow:dense;gap:14px} .ar{position:relative;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:zoom-in;background:#1E1A4C;box-shadow:0 10px 24px rgba(24,26,52,.14); transition:transform .4s cubic-bezier(.2,.7,.25,1),box-shadow .4s} .ar.ar-w{grid-column:span 2} .ar:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(24,26,52,.22)} .ar img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.25,1)} .ar:hover img{transform:scale(1.05)} .ar-c{position:absolute;inset:auto 0 0 0;padding:30px 14px 12px;text-align:left;background:linear-gradient(to top,rgba(14,11,38,.88),transparent)} .ar-c b{display:block;font-family:var(--disp);font-size:.98rem;color:#fff;line-height:1.25} .ar-c i{display:block;font-style:normal;font-size:.8rem;color:#D4D1F0;margin-top:2px} .prv{position:fixed;inset:0;z-index:2200;display:none;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:24px} .prv.on{display:grid} .prv-back{position:absolute;inset:0;background:rgba(10,8,26,.94);backdrop-filter:blur(8px)} .prv figure{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;max-height:100%} .prv img{max-width:100%;max-height:calc(100vh - 140px);border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6);background:#fff} .prv figcaption{text-align:center;color:#fff}.prv figcaption b{display:block;font-family:var(--disp);font-size:1.2rem} .prv figcaption span{display:block;font-size:.92rem;color:#C9C6E8}.prv figcaption i{display:block;font-style:normal;font-size:.8rem;letter-spacing:.14em;color:#8E8AC0;margin-top:4px} .prv button{position:relative;z-index:2;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center} .prv .pv-nav{width:54px;height:54px;border-radius:50%;font-size:2rem;line-height:1} .prv .pv-x{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;font-size:1.6rem} .press-more{margin:var(--s4) 0 0;text-align:center} .press-more a{font-family:var(--disp);font-weight:700;color:var(--green-soft);text-decoration:none;font-size:1.05rem} .press-more a:hover{color:#fff} @media (max-width:1000px){.news{grid-template-columns:1fr}.arch{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.arch{grid-template-columns:1fr;grid-auto-rows:220px}.ar.ar-w{grid-column:auto}.nw-clip{height:170px} .prv{grid-template-columns:1fr;padding:12px}.prv .pv-nav{position:absolute;bottom:20px;width:46px;height:46px}.prv .pv-prev{left:20px}.prv .pv-next{right:20px}} .pagehero--team{position:relative;overflow:hidden;background:#221E58} .pagehero--team::before{content:"";position:absolute;inset:0; background:url("../../../../uploads/rkh/rkh-photo-26.jpg") center 32%/cover no-repeat;opacity:.42} .pagehero--team::after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(20,16,56,.96) 0%,rgba(26,22,72,.90) 45%,rgba(40,34,104,.74) 75%,rgba(52,44,120,.62) 100%)} .pagehero--team > .wrap{position:relative;z-index:3} .pagehero--team > *:not(.wrap){display:none} @media (max-width:700px){.pagehero--team::before{background-position:center 38%}} .arch-h{margin:var(--s6) 0 var(--s3)} .arch-h h3{margin:0;font-size:1.6rem;color:var(--ink)} .arch-h p{margin:4px 0 0;color:var(--ink-400)} .scans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .sc{position:relative;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:zoom-in;background:#F1EFE8;font:inherit; aspect-ratio:3/4;box-shadow:0 10px 26px rgba(24,26,52,.14);transition:transform .45s cubic-bezier(.2,.7,.25,1),box-shadow .45s} .sc.sc-w{grid-column:span 2;aspect-ratio:3/2} .sc:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 26px 54px rgba(24,26,52,.26);z-index:2} .sc img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .8s cubic-bezier(.2,.7,.25,1)} .sc:hover img{transform:scale(1.04)} .sc-c{position:absolute;inset:auto 0 0 0;padding:36px 14px 13px;text-align:left;background:linear-gradient(to top,rgba(14,11,38,.92),rgba(14,11,38,.5) 55%,transparent); opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s} .sc:hover .sc-c,.sc:focus-visible .sc-c{opacity:1;transform:none} .sc-c b{display:block;font-family:var(--disp);font-size:1rem;color:#fff;line-height:1.25} .sc-c i{display:block;font-style:normal;font-size:.82rem;color:#D4D1F0;margin-top:2px} @media (max-width:1000px){.scans{grid-template-columns:repeat(2,1fr)}.sc.sc-w{grid-column:span 2}} @media (max-width:560px){.scans{grid-template-columns:1fr}.sc.sc-w{grid-column:auto;aspect-ratio:3/4}.sc-c{opacity:1;transform:none}} /* ── WordPress integration ─────────────────────────────── */ html{scroll-padding-top:96px} [id]{scroll-margin-top:96px} body.admin-bar .masthead{top:32px} @media (max-width:782px){body.admin-bar .masthead{top:46px}} .page{display:block} .rkh-entry{max-width:760px;margin-inline:auto;padding-block:var(--s6)} .rkh-entry h2{margin-top:var(--s5)} .rkh-entry p,.rkh-entry li{margin-top:var(--s3)} .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap} .docav img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block} footer .fh{line-height:1.12;letter-spacing:.05em} /* a11y contrast 2026-09-29 */ :root{--green-mid:#587A25;--green-700:#587A25;--ink-400:#666B87} .btn--wa{background:#11813B;border-color:#11813B;--wa-knock:#11813B} .q-new{background:#11813B} .tab .cnt,.dtime em,.finder-foot small,.fbot,.fbot span,.controls input::placeholder{color:#9A9DC4} .emergband p{color:#FFEDEE} .crumb a{text-decoration:underline;text-underline-offset:3px} .rdots{gap:0;margin:calc(var(--s4) - 7px) 0 -7px} .rdots button{box-sizing:content-box;padding:7px;background-clip:content-box} .rdots button.on{background-clip:content-box} /* seo content 2026-10-13 */ .rkh-about,.rkh-faq,.rkh-otherdepts{padding:var(--s7,56px) 0} .rkh-about{background:#fff} .rkh-about p{max-width:72ch;margin:0 0 var(--s3,16px);color:var(--ink-600)} .rkh-about h3{font-size:1.15rem;margin:0 0 10px} .rkh-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s5,32px);margin-top:var(--s4,24px)} .rkh-faq{background:var(--surface-alt,#F6F7FB)} .rkh-faq h2,.rkh-otherdepts h2{margin-bottom:var(--s4,24px)} .faqlist{max-width:860px} .faqlist details{background:#fff;border:1px solid var(--rule);border-radius:12px;margin-bottom:10px} .faqlist summary{cursor:pointer;padding:16px 20px;font-family:var(--disp);font-weight:600;font-size:1.05rem;color:var(--indigo-900,#2A2566);list-style:none} .faqlist summary::-webkit-details-marker{display:none} .faqlist summary::after{content:'+';float:right;font-weight:700;color:var(--green-700)} .faqlist details[open] summary::after{content:'\2013'} .faqa{padding:0 20px 16px;color:var(--ink-600)} .faqa p{margin:0} .faqa a{color:var(--indigo-700);text-decoration:underline} .rkh-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px} .rkh-chips a{display:inline-block;padding:9px 16px;border:1px solid var(--rule);border-radius:999px;background:#fff;color:var(--indigo-700);text-decoration:none;font-weight:500} .rkh-chips a:hover{border-color:var(--indigo-500)} .fdisc a[href*=privacy]{margin-left:6px}