/* Mental Resilience Counseling GROUNDS ARE WHITE. Alex has ruled twice that tan and beige are out; the secondary surface is a neutral grey, never a warm cream. The gold is sampled from their own phoenix emblem (#D8A83A family), not approximated, and the ground is a WARM near-black so the gold sits in the same temperature family rather than fighting a blue-grey. Type floor is 16px everywhere, including labels, footers and captions. */ :root{ --ink:#12100E; /* warm near-black */ --ink-2:#1C1915; /* raised dark surface */ --ink-3:#2A251E; --gold:#C8912B; /* on light grounds, passes contrast on paper */ --gold-lift:#E4B94F; /* on dark grounds */ --gold-soft:#F5E6C0; --paper:#FFFFFF; --paper-2:#F4F4F5; --white:#fff; --text:#221E18; --muted:#6F675A; --muted-dark:#B3A992; --line:#E4E4E7; --line-dark:rgba(255,255,255,.13); --display:'Fraunces',Georgia,serif; --body:'Figtree',ui-sans-serif,system-ui,-apple-system,sans-serif; --wrap:1200px; --gut:clamp(20px,5vw,60px); --r:14px; } /* --------------------------------------------------------------------------- DEFAULT INLINE SVG SIZE. ⚠️ An inline with a viewBox and no width or height expands to fill its container. Every icon rule in this file is scoped (.btn svg, .soc svg, .ticks svg), so an icon dropped into markup that matches none of them rendered as a 1000px arrow across the whole page. This is the floor that makes that impossible. Specificity 0,0,1: any scoped rule below still overrides it. --------------------------------------------------------------------------- */ svg{width:1em;height:1em;flex:none} *,*::before,*::after{box-sizing:border-box} html,body{overflow-x:clip} /* both: an off-canvas panel widens alone */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--text); font:400 17px/1.7 var(--body);-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} /* height:auto, or the HTML height attribute squashes any image we only set a CSS width on */ a{color:var(--gold);text-underline-offset:3px} h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12; letter-spacing:-.015em;margin:0;text-wrap:balance} h1{font-size:clamp(36px,4.6vw,60px)} h2{font-size:clamp(28px,3.6vw,44px)} h3{font-size:clamp(20px,1.9vw,25px)} p{margin:0 0 1.15em} .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)} .sec{padding:clamp(60px,8vw,110px) 0} .sec-tight{padding:clamp(42px,5.5vw,72px) 0} .lede{font-size:clamp(18px,1.55vw,21px);line-height:1.65;color:var(--muted)} .dark .lede{color:var(--muted-dark)} .eyebrow{font:600 16px/1 var(--body);letter-spacing:.17em;text-transform:uppercase; color:var(--gold);margin:0 0 18px;display:block} .dark .eyebrow{color:var(--gold-lift)} .measure{max-width:66ch} .skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:16px;z-index:200;background:var(--white); padding:12px 18px;border-radius:8px;box-shadow:0 8px 30px #0003} :focus-visible{outline:3px solid var(--gold-lift);outline-offset:3px;border-radius:4px} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font:600 17px/1 var(--body); padding:16px 26px;border-radius:999px;border:1.5px solid transparent; text-decoration:none;cursor:pointer; transition:transform .18s,background .18s,color .18s,border-color .18s} .btn:hover{transform:translateY(-2px)} .btn-fill{background:var(--gold);color:#17130C} .btn-fill:hover{background:var(--gold-lift)} .btn-ghost{border-color:var(--line);color:var(--text)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold)} .dark .btn-ghost{border-color:var(--line-dark);color:#fff} .dark .btn-ghost:hover{border-color:var(--gold-lift);color:var(--gold-lift)} .btn svg{width:18px;height:18px;flex:none} /* ---------- header ---------- */ .hdr{position:sticky;top:0;z-index:60;background:#12100Ef2; backdrop-filter:blur(12px);border-bottom:1px solid var(--line-dark)} .hdr-in{display:flex;align-items:center;gap:20px;max-width:var(--wrap); margin:0 auto;padding:12px var(--gut)} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none} .brand img{height:46px;width:auto} .brand-txt{display:flex;flex-direction:column;line-height:1.05} .brand-txt b{font:600 19px/1.1 var(--display);color:#fff;letter-spacing:-.01em} .brand-txt i{font:500 16px/1.1 var(--body);font-style:normal; letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lift);margin-top:4px} /* 16px is a hard floor with no exceptions, so the sub-label does not shrink on a narrow phone: it is hidden and the emblem carries the brand instead. The accessible name still comes from the link's aria-label. */ .brand-txt i{font-size:16px;letter-spacing:.16em} @media(max-width:430px){.brand-txt b{font-size:17px}.brand-txt i{display:none}} .nav{margin-left:auto;display:flex;align-items:center;gap:22px} .nav a{font:500 16px/1 var(--body);color:#EDE6D8;text-decoration:none; padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap} .nav a:hover,.nav a[aria-current=page]{color:var(--gold-lift);border-color:var(--gold-lift)} .hdr .btn{padding:12px 20px;font-size:16px} /* Cascade fix. `.nav a` is (0,1,1) and `.btn-fill` is (0,1,0), so the nav link color was winning and the header button rendered its label in the nav's text color. On Mane that produced a solid black box with invisible text. Raise the button rules to match inside the nav. */ .nav a.btn-fill{color:#17130C} .nav a.btn-ghost{color:#fff;border-color:var(--line-dark)} .burger{display:none;margin-left:auto;background:none;border:0;padding:10px; cursor:pointer;color:#EDE6D8} .burger svg{width:26px;height:26px} @media(max-width:1060px){ /* ⚠️ THE DRAWER IS position:fixed AND IT LIVES INSIDE .hdr. A backdrop-filter creates a containing block for fixed descendants, so with the blur on the header the drawer was positioned against the 74px HEADER BOX instead of the viewport: it opened as a 122px sliver of an 844px screen. It looked open to any check asking "is it on screen", which is exactly what ours asked. The header is already #12100Ef2, 94% opaque, so dropping the blur at these widths costs nothing visible. */ .hdr{backdrop-filter:none;-webkit-backdrop-filter:none} .nav{position:fixed;inset:0 0 0 auto;width:min(86vw,350px);background:var(--ink-2); flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px; padding:96px 26px 26px;transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);margin-left:0;overflow-y:auto} .nav[data-open=true]{transform:translateX(0)} .nav a{font-size:19px;padding:15px 0;border-bottom:1px solid var(--line-dark)} .nav a:hover,.nav a[aria-current=page]{border-color:var(--line-dark)} .nav .btn{margin-top:18px;justify-content:center} .burger{display:block} .scrim{position:fixed;inset:0;background:#000;opacity:0;visibility:hidden; transition:opacity .3s,visibility .3s;z-index:55} .scrim[data-open=true]{opacity:.55;visibility:visible} } /* ---------- hero ---------- */ .hero{position:relative;background:var(--ink);color:#fff;overflow:hidden; padding:clamp(64px,9vw,118px) 0 clamp(56px,7vw,96px)} .hero::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(112% 86% at 76% 12%,#C8912B2e,transparent 62%)} .hero-in{position:relative;z-index:2;display:grid;gap:clamp(36px,5vw,66px); grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center} .hero h1{color:#fff} .hero .lede{color:var(--muted-dark);max-width:50ch;margin-top:20px} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} .hero-mark{justify-self:center;max-width:380px} .hero-mark img{width:100%;filter:drop-shadow(0 22px 60px #00000080)} @media(max-width:940px){ .hero-in{grid-template-columns:1fr} .hero-mark{max-width:240px;order:-1} } .dark{background:var(--ink);color:#fff} .dark h2,.dark h3{color:#fff} .tint{background:var(--paper-2)} /* ---------- checklist ---------- */ .ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px} .ticks li{display:grid;grid-template-columns:24px 1fr;gap:13px;align-items:start; font-size:17px;line-height:1.6} .ticks svg{width:22px;height:22px;color:var(--gold);margin-top:3px} .dark .ticks svg{color:var(--gold-lift)} .cols2{columns:2;column-gap:40px} .cols2 li{break-inside:avoid;margin-bottom:14px} @media(max-width:760px){.cols2{columns:1}} /* ---------- PHOENIX model ---------- The single letters ARE the acronym, so they carry meaning. This is not the decorative 01/02/03 numbering the house style bans. */ .phoenix{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:44px} .ph{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:12px; padding:22px 14px;text-align:center} .ph b{display:block;font-family:var(--display);font-size:34px;font-weight:600; color:var(--gold-lift);line-height:1} .ph span{display:block;margin-top:10px;font:500 16px/1.35 var(--body); color:var(--muted-dark)} @media(max-width:900px){.phoenix{grid-template-columns:repeat(4,1fr)}} @media(max-width:560px){.phoenix{grid-template-columns:repeat(2,1fr)}} /* ---------- care grid ---------- */ .care{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px} .care a{display:flex;flex-direction:column;gap:10px;background:var(--white); border:1px solid var(--line);border-radius:var(--r);padding:26px; text-decoration:none;color:var(--text);transition:transform .25s,border-color .25s} .care a:hover{transform:translateY(-3px);border-color:var(--gold)} .care h3{font-size:21px} .care p{margin:0;font-size:16px;color:var(--muted);flex:1} .care .go{display:inline-flex;align-items:center;gap:8px;font:600 16px/1 var(--body); color:var(--gold)} .care .go svg{width:17px;height:17px} @media(max-width:900px){.care{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.care{grid-template-columns:1fr}} /* ---------- split ---------- */ .split{display:grid;gap:clamp(32px,5vw,70px); grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center} @media(max-width:900px){.split{grid-template-columns:1fr}} .shot{border-radius:var(--r);overflow:hidden;background:var(--paper-2)} .shot img{width:100%} /* ---------- rates ---------- */ .rates{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px} .rate{background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:28px} .rate h3{font-size:20px;margin-bottom:16px} .rate dl{margin:0;display:grid;gap:10px} .rate .row{display:flex;justify-content:space-between;gap:16px; padding-bottom:10px;border-bottom:1px solid var(--line);font-size:17px} .rate .row:last-child{border-bottom:0;padding-bottom:0} .rate .row b{font-weight:600;font-variant-numeric:tabular-nums} @media(max-width:900px){.rates{grid-template-columns:1fr}} .chips{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none} .chips li{font:500 16px/1 var(--body);background:var(--white); border:1px solid var(--line);border-radius:999px;padding:11px 17px} /* ---------- prose ---------- */ .prose{max-width:70ch} .prose p{font-size:17px;line-height:1.75} .prose h3{margin:34px 0 12px} .prose ul{margin:0 0 1.2em;padding-left:0;list-style:none;display:grid;gap:12px} .prose ul li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:17px} .prose ul svg{width:20px;height:20px;color:var(--gold);margin-top:4px} /* ---------- form ---------- */ .form{background:var(--white);border:1px solid var(--line);border-radius:var(--r); padding:clamp(24px,3.4vw,36px)} .dark .form{background:var(--ink-2);border-color:var(--line-dark)} .fld{margin-bottom:18px} .fld label{display:block;font:600 16px/1 var(--body);margin-bottom:8px} .fld input,.fld textarea,.fld select{width:100%;font:400 17px/1.5 var(--body); color:var(--text);background:var(--paper);border:1px solid var(--line); border-radius:10px;padding:14px 16px} .dark .fld input,.dark .fld textarea{background:var(--ink); border-color:var(--line-dark);color:#fff} .fld textarea{min-height:130px;resize:vertical} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} @media(max-width:600px){.grid2{grid-template-columns:1fr}} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-note{font-size:16px;color:var(--muted);margin:14px 0 0} .dark .form-note{color:var(--muted-dark)} .msg{margin-top:16px;font:600 17px/1.5 var(--body);display:none} .msg[data-on]{display:block} .msg.ok{color:#1c7a4a}.msg.err{color:#b3261e} .dark .msg.ok{color:#68d49d}.dark .msg.err{color:#ff9d95} /* ---------- contact strip ---------- */ .cstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px} .cstrip .k{font:600 16px/1 var(--body);letter-spacing:.14em;text-transform:uppercase; color:var(--muted-dark);display:block;margin-bottom:10px} .cstrip a,.cstrip p{font-size:17px;margin:0;color:#fff;text-decoration:none} .cstrip a:hover{color:var(--gold-lift)} @media(max-width:760px){.cstrip{grid-template-columns:1fr;gap:18px}} /* ---------- footer ---------- */ .foot{background:var(--ink);color:#fff;padding:clamp(52px,6.5vw,82px) 0 28px; border-top:1px solid var(--line-dark)} .foot-top{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:38px} .foot img{height:clamp(104px,9vw,132px);width:auto} .foot p{color:var(--muted-dark);font-size:17px} .foot h4{font:600 16px/1 var(--body);letter-spacing:.14em;text-transform:uppercase; color:#fff;margin:0 0 16px} .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .foot a{color:var(--muted-dark);text-decoration:none;font-size:17px} .foot a:hover{color:var(--gold-lift)} .foot-bottom{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center; margin-top:44px;padding-top:22px;border-top:1px solid var(--line-dark); font-size:16px;color:var(--muted-dark)} /* ---------- reveal ---------- Default VISIBLE. Only a page whose JS reached addReady() hides them, so a thrown error leaves a readable page instead of a blank one. */ .rv{opacity:1} .ready .rv{opacity:0;transform:translateY(20px)} .ready .rv.in{opacity:1;transform:none; transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)} @media(prefers-reduced-motion:reduce){ .ready .rv,.ready .rv.in{opacity:1;transform:none;transition:none} *{animation-duration:.01ms!important;transition-duration:.01ms!important} html{scroll-behavior:auto} } /* FAQ accordion.
rather than a script, so the answer is in the HTML on first paint and Google can read it. His own site loads answers on click, which is why 19 of his 20 are invisible to search. Same behavior for a visitor, opposite outcome for search. */ .faq-list{display:grid;gap:12px;margin-top:34px} .faq-i{border:1px solid var(--line,#e3e6ea);border-radius:12px;background:#fff; overflow:hidden} .faq-i summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px; font-size:1.06rem;font-weight:600;position:relative} .faq-i summary::-webkit-details-marker{display:none} .faq-i summary::after{content:"";position:absolute;right:22px;top:50%; width:13px;height:2px;background:currentColor;transition:transform .2s ease} .faq-i summary::before{content:"";position:absolute;right:28px;top:50%; width:2px;height:13px;margin-top:-6px;background:currentColor; transition:opacity .2s ease,transform .2s ease} .faq-i[open] summary::before{opacity:0;transform:rotate(90deg)} .faq-i summary:focus-visible{outline:3px solid var(--gold,#C8912B);outline-offset:-3px} .faq-a{padding:0 22px 20px;font-size:1rem;line-height:1.65} .faq-a p{margin:0;max-width:72ch} /* Hero photograph. The scrim is near solid on the left where the type sits, because a gradient cannot guarantee contrast it has not measured. */ .hero.has-photo .hero-bg{position:absolute;inset:0;z-index:0} .hero.has-photo .hero-bg img{width:100%;height:100%;object-fit:cover; object-position:center 60%} .hero.has-photo::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(11,18,26,.94) 0%,rgba(11,18,26,.86) 42%, rgba(11,18,26,.55) 100%)} /* --------------------------------------------------------------------------- BLOG. Three posts, so a three-up that collapses rather than a dense grid. --------------------------------------------------------------------------- */ .posts{display:grid;gap:clamp(22px,2.6vw,34px);margin-top:clamp(32px,4vw,52px); grid-template-columns:repeat(3,1fr)} .post-c{background:var(--paper);border:1px solid var(--line);border-radius:var(--r); overflow:hidden;transition:transform .25s ease,box-shadow .25s ease} .post-c:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,16,14,.10)} .post-c a{display:block;text-decoration:none;color:inherit;height:100%} .post-c img{width:100%;height:220px;object-fit:cover;display:block} .post-b{padding:22px} .post-b h3{font:600 1.22rem/1.3 var(--display);margin:6px 0 0;text-wrap:balance} .post-c:hover .post-b h3{color:var(--gold)} /* 16px floor: this is meta text and the obvious place to undershoot it. */ .post-m{font:600 1rem/1.5 var(--body);color:var(--muted);letter-spacing:.01em;margin:0} .post-m a{color:var(--gold);text-decoration:none} .post-m a:hover{text-decoration:underline} .post-h{font:600 clamp(2rem,4.2vw,3rem)/1.12 var(--display);margin:10px 0 14px; text-wrap:balance} .post-hero{margin:clamp(26px,3.4vw,40px) 0;border-radius:var(--r);overflow:hidden} .post-hero img{width:100%;height:auto;display:block} /* --------------------------------------------------------------------------- EVENTS. The date rail reads first, which is what anyone scanning an events page is actually looking for. --------------------------------------------------------------------------- */ .ev-h{font:600 1.35rem/1.3 var(--display);margin:clamp(30px,3.6vw,44px) 0 18px} .evs{display:grid;gap:20px} .ev-c{display:grid;grid-template-columns:230px 1fr;border:1px solid var(--line); border-radius:var(--r);overflow:hidden;background:var(--paper)} .ev-d{background:var(--ink);color:var(--white);padding:26px 24px;display:flex; flex-direction:column;justify-content:center;gap:8px} .ev-d span:first-child{font:600 1.12rem/1.32 var(--display);color:var(--gold-lift)} .ev-d span:last-child{font:500 1rem/1.4 var(--body);color:var(--muted-dark)} .ev-b{padding:26px 28px} .ev-b h3{font:600 1.32rem/1.3 var(--display);margin:0;text-wrap:balance} .ev-m{font:500 1rem/1.5 var(--body);color:var(--muted);margin:8px 0 0} @media (max-width:900px){ .posts{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .posts{grid-template-columns:1fr} .post-c img{height:200px} .ev-c{grid-template-columns:1fr} .ev-d{padding:20px 22px;flex-direction:row;gap:14px;flex-wrap:wrap; align-items:baseline} .ev-b{padding:22px} } /* --------------------------------------------------------------------------- PAGE HERO. A shallower band than the home hero: it carries the page title over a photograph instead of a plain text header. The scrim is a measured overlay, not a hopeful gradient, because the type sits on whatever the photograph is doing underneath. --------------------------------------------------------------------------- */ .phero{position:relative;background:var(--ink);color:#fff;overflow:hidden; padding:clamp(58px,7.4vw,104px) 0 clamp(52px,6.2vw,88px)} .phero-bg{position:absolute;inset:0;z-index:0} .phero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%} .phero::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(11,18,26,.92) 0%,rgba(11,18,26,.82) 46%, rgba(11,18,26,.50) 100%)} .phero-in{position:relative;z-index:2;max-width:62ch} .phero h1{color:#fff;margin:10px 0 0; font:600 clamp(2.1rem,4.6vw,3.35rem)/1.1 var(--display);text-wrap:balance} .phero .eyebrow{color:var(--gold-lift)} .phero .lede{color:var(--muted-dark);margin-top:18px;max-width:52ch} /* The band already supplies the top space the old text header had. */ .phero + .sec-tight{padding-top:clamp(40px,5vw,64px)} /* A page title promoted from h2 to h1 for document structure. It is the same size it always was: this is a semantics fix, not a design change. */ h1.as-h2{font-size:clamp(28px,3.6vw,44px)} /* Crisis line. Not decorative, and never below the 16px floor. */ .crisis{font:500 1rem/1.6 var(--body);color:var(--muted-dark); border-top:1px solid var(--line-dark);margin:28px 0 0;padding:20px 0 0; max-width:70ch} .crisis a{color:var(--gold-lift);font-weight:600} /* Social row. 44px hit target, which is the accessible minimum, and the mark itself sits at 21px inside it. */ .soc{display:flex;gap:10px;margin:26px 0 0;flex-wrap:wrap} .soc a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; color:var(--muted-dark);border:1px solid var(--line-dark); transition:color .2s ease,border-color .2s ease,background .2s ease} .soc a:hover{color:var(--ink);background:var(--gold-lift); border-color:var(--gold-lift)} .soc a:focus-visible{outline:3px solid var(--gold-lift);outline-offset:2px} .soc svg{width:21px;height:21px;display:block} /* Book covers. They are purchase links now, so they behave like links. */ .bks{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2vw,26px); margin-top:clamp(32px,4vw,52px)} .bk{text-decoration:none;color:inherit;display:block} .bk img{width:100%;height:auto;border-radius:10px;display:block; box-shadow:0 10px 26px rgba(18,16,14,.12);transition:transform .25s ease} .bk:hover img{transform:translateY(-5px)} .bk span{display:block;margin-top:12px;font:600 1rem/1.4 var(--body)} .bk:hover span{color:var(--gold)} @media (max-width:1000px){.bks{grid-template-columns:repeat(3,1fr)}} @media (max-width:560px){.bks{grid-template-columns:repeat(2,1fr)}} /* Compact service list for the home page. All thirteen links, none of the blurbs. 16px floor holds: these are 1rem. */ .care-min{list-style:none;padding:0;margin:clamp(26px,3vw,40px) 0 0;display:grid; grid-template-columns:repeat(3,1fr);gap:2px 26px} .care-min li{border-bottom:1px solid var(--line)} .care-min a{display:block;padding:14px 2px;text-decoration:none;color:var(--text); font:600 1rem/1.4 var(--body);transition:color .18s ease,padding .18s ease} .care-min a:hover{color:var(--gold);padding-left:8px} /* The three tracks, and the limits on them. */ .trks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px); margin-top:clamp(30px,3.6vw,46px)} .trk{border:1px solid var(--line);border-radius:var(--r);padding:26px; background:var(--paper)} .trk h3{font:600 1.22rem/1.3 var(--display);margin:0} .trk-m{font:600 1rem/1.4 var(--body);color:var(--gold);margin:8px 0 12px} .trk p{margin:0;font-size:1rem;line-height:1.6} .bnd-h{font:600 1.3rem/1.3 var(--display);margin:0} .bnds{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px); margin-top:20px} .bnd{border-left:3px solid var(--gold);padding:4px 0 4px 18px} .bnd h3{font:600 1.06rem/1.35 var(--body);margin:0} .bnd p{margin:8px 0 0;font-size:1rem;line-height:1.6;color:var(--muted)} @media (max-width:900px){ .care-min{grid-template-columns:repeat(2,1fr)} .trks{grid-template-columns:1fr} .bnds{grid-template-columns:1fr} } @media (max-width:560px){.care-min{grid-template-columns:1fr}} .foot-legal{margin:22px 0 0;font:500 1rem/1.5 var(--body)} .foot-legal a{color:var(--muted-dark);text-decoration:none} .foot-legal a:hover{color:var(--gold-lift);text-decoration:underline} /* A text link that carries an arrow. */ .ilink{font:600 1rem/1.5 var(--body);color:var(--gold);text-decoration:none; display:inline-flex;align-items:center;gap:8px} .ilink:hover{text-decoration:underline} .ilink svg{width:17px;height:17px} /* mobile drawer fix deployed 2026-09-22 21:25:32 */