/* Senior Reliance Group — referral/matching service
   Design matched to approved mockup: navy + coral + teal, warm hero,
   light-blue quiz panel. Accessible, senior-friendly, conversion-focused. */

:root{
  --navy:#14336b;
  --navy-deep:#0e2450;
  --blue:#1b4b8f;
  --coral:#df4f38;
  --coral-dark:#c33f2b;
  --teal:#12808a;
  --teal-dark:#0e6a72;
  --cream:#f7efe4;
  --panel:#e9f1fb;
  --paper:#ffffff;
  --bg:#ffffff;
  --ink:#1f2a3a;
  --ink-soft:#546074;
  --line:#e4e7ee;
  --line-warm:#e7ddcd;
  --shadow:0 8px 30px rgba(20,51,107,.10);
  --shadow-sm:0 3px 12px rgba(20,51,107,.08);
  --radius:16px;
  --maxw:1240px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Helvetica Neue",Arial,system-ui,sans-serif;
  font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--navy);line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.01em;}
h1{font-size:clamp(2.3rem,4.6vw,3.5rem);}
h2{font-size:clamp(1.7rem,3.3vw,2.4rem);}
h3{font-size:1.22rem;}
p{margin:0 0 1em;}
a{color:var(--blue);text-decoration:none;}
img{max-width:100%;display:block;}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px;}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  font-weight:700;font-size:1.02rem;padding:15px 26px;border-radius:12px;border:2px solid transparent;
  transition:transform .05s ease,background .2s ease,box-shadow .2s ease;text-align:center;}
.btn:active{transform:translateY(1px);}
.btn--teal{background:var(--teal);color:#fff;box-shadow:var(--shadow-sm);}
.btn--teal:hover{background:var(--teal-dark);}
.btn--navy{background:var(--navy);color:#fff;}
.btn--navy:hover{background:var(--navy-deep);}
.btn--coral{background:var(--coral);color:#fff;}
.btn--coral:hover{background:var(--coral-dark);}
.btn--outline{background:#fff;color:var(--navy);border-color:var(--navy);}
.btn--outline:hover{background:var(--navy);color:#fff;}
.btn--lg{padding:17px 30px;font-size:1.1rem;}
.btn--block{width:100%;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;gap:20px;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;padding:14px 26px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);font-weight:800;font-size:1.14rem;line-height:1.05;}
.brand small{display:block;font-weight:800;}
.nav__links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;}
.nav__links a{display:block;padding:10px 14px;border-radius:9px;color:var(--ink);font-weight:600;font-size:1rem;}
.nav__links a:hover{background:var(--cream);color:var(--navy);}
.nav__actions{display:flex;align-items:center;gap:12px;}
.nav__toggle{display:none;background:none;border:2px solid var(--line);border-radius:9px;padding:8px 11px;font-size:1.15rem;cursor:pointer;}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,#fbf5ec 0%,var(--cream) 100%);border-bottom:1px solid var(--line-warm);}
.hero__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;padding:56px 0 60px;}
.hero h1{color:var(--navy);}
.hero .lead{font-size:1.28rem;color:#33405a;max-width:32ch;margin-bottom:26px;}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.hero__micro{margin-top:16px;color:var(--ink-soft);font-size:.98rem;font-weight:600;}
.hero__micro b{color:var(--teal-dark);}
.hero__photo{position:relative;border-radius:20px;overflow:hidden;min-height:380px;box-shadow:var(--shadow);
  background:linear-gradient(135deg,#dfe8f5,#efe3d3);}
.hero__photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.img-slot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;color:#5b6b86;font-weight:700;text-align:center;padding:20px;}
.img-slot svg{opacity:.5;}
.img-slot span{font-size:.85rem;font-weight:600;opacity:.85;}

/* ---------- Section scaffolding ---------- */
section{padding:60px 0;}
.section--tint{background:#f9fafc;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section__head{max-width:52ch;margin-bottom:34px;}
.section__head.center{margin-inline:auto;text-align:center;}
.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.8rem;font-weight:800;color:var(--coral);margin:0 0 .6em;}

/* ---------- Services ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.svc{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;}
.svc__body{padding:24px 24px 10px;}
.svc__head{display:flex;gap:14px;align-items:flex-start;margin-bottom:10px;}
.svc__icon{width:48px;height:48px;border-radius:12px;flex:none;display:grid;place-items:center;}
.svc__icon.di{background:#e4f3f4;color:var(--teal-dark);}
.svc__icon.ig{background:#e7effb;color:var(--blue);}
.svc__icon.hc{background:#fdeae6;color:var(--coral);}
.svc h3{margin:0 0 2px;}
.svc p{color:var(--ink-soft);font-size:1rem;margin:0;}
.svc__photo{position:relative;height:150px;margin:6px 24px 0;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,#e7edf6,#f0e7d8);}
.svc__photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.svc__foot{padding:16px 24px 22px;margin-top:auto;}
.svc__foot .btn{width:100%;}

/* ---------- Match region (quiz + form) ---------- */
.match{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
.quiz{background:var(--panel);border:1px solid #d3e2f6;border-radius:var(--radius);padding:28px;}
.quiz__title{text-align:center;color:var(--navy);}
.quiz__progress{display:flex;gap:8px;margin:16px 0 8px;}
.quiz__progress i{height:7px;border-radius:99px;background:#c4d6ef;flex:1;transition:background .3s;}
.quiz__progress i.on{background:var(--blue);}
.quiz__step-label{font-weight:700;color:var(--blue);font-size:.92rem;margin-bottom:6px;}
.quiz__q{font-size:1.25rem;color:var(--navy);font-weight:800;margin:6px 0 14px;}
.quiz__opts{display:flex;flex-direction:column;gap:10px;}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  background:#fff;border:2px solid #d8e3f2;border-radius:12px;padding:14px 16px;font-size:1.05rem;font-weight:600;color:var(--ink);}
.opt:hover{border-color:var(--blue);}
.opt.sel{border-color:var(--blue);background:#eff5fe;box-shadow:0 0 0 3px rgba(27,75,143,.12);}
.opt .ic{width:26px;height:26px;flex:none;color:var(--blue);display:grid;place-items:center;}
.opt.care .ic{color:var(--coral);}
.quiz__nav{display:flex;justify-content:space-between;gap:12px;margin-top:16px;}
.quiz__foot{display:flex;gap:10px;align-items:flex-start;margin-top:14px;color:var(--blue);font-size:.85rem;font-weight:600;}
.quiz__foot svg{flex:none;margin-top:2px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* ---------- Form ---------- */
.lead-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm);}
.lead-form h3{text-align:center;font-size:1.4rem;margin-bottom:18px;}
.field{margin-bottom:14px;}
.field label{display:block;font-weight:700;font-size:.92rem;color:var(--navy);margin-bottom:6px;}
.field label .opt-tag{color:var(--ink-soft);font-weight:600;}
.field input,.field select,.field textarea{width:100%;padding:13px 14px;font-size:1.02rem;border:2px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink);font-family:inherit;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(18,128,138,.14);}
.field textarea{min-height:110px;resize:vertical;}
.consent{display:flex;gap:12px;align-items:flex-start;margin:6px 0 16px;font-size:.86rem;color:var(--ink-soft);line-height:1.5;}
.consent-note{font-size:.76rem;color:var(--ink-soft);line-height:1.55;margin:6px 0 8px;max-height:150px;overflow:auto;padding:10px 12px;background:#f7f9fc;border:1px solid var(--line);border-radius:8px;}
.consent input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--teal);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form__status{margin-top:14px;font-size:1rem;display:none;}
.form__status.show{display:block;}
.form__status.ok{color:var(--teal-dark);font-weight:700;}
.form__status.err{color:var(--coral-dark);font-weight:700;}
.form__legal{display:flex;gap:16px;justify-content:center;margin-top:14px;font-size:.85rem;}
.form__legal a{color:var(--blue);font-weight:600;}

/* ---------- How it works strip ---------- */
.how{background:#f4f7fb;border:1px solid var(--line);border-radius:var(--radius);padding:24px 28px;margin-top:26px;}
.how__title{font-weight:800;color:var(--navy);font-size:1.2rem;margin-bottom:16px;}
.how__steps{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;}
.step-chip{display:flex;align-items:center;gap:12px;flex:1 1 240px;min-width:220px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.step-chip .n{width:38px;height:38px;border-radius:99px;color:#fff;font-weight:800;display:grid;place-items:center;font-size:1rem;flex:none;}
.step-chip.s1 .n{background:var(--teal);}
.step-chip.s2 .n{background:var(--blue);}
.step-chip.s3 .n{background:var(--coral);}
.step-chip span{font-size:1rem;color:var(--ink);font-weight:600;}
.how__talk{display:flex;align-items:center;gap:16px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);flex-wrap:wrap;}
.how__talk .ph{width:52px;height:52px;border-radius:99px;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none;}
.how__talk h4{margin:0;color:var(--navy);}
.how__talk p{margin:0;color:var(--ink-soft);font-size:.95rem;max-width:32ch;}
.how__talk .btn{margin-left:auto;}

/* ---------- Steps (full page) ---------- */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.stepcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);}
.stepcard .n{width:46px;height:46px;border-radius:99px;background:var(--navy);color:#fff;font-weight:800;display:grid;place-items:center;margin-bottom:14px;}
.stepcard p{color:var(--ink-soft);margin:0;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy);color:#e7eefb;text-align:center;}
.cta-band h2{color:#fff;}
.cta-band p{color:#c3d0e8;max-width:46ch;margin-inline:auto;}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-deep);color:#b7c4dc;}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding:52px 0 30px;}
.footer__brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:800;margin-bottom:12px;}
.site-footer h4{color:#fff;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer li{padding:5px 0;}
.site-footer a{color:#cdd8ec;}
.site-footer a:hover{color:#fff;text-decoration:underline;}
.disclaimer{border-top:1px solid rgba(255,255,255,.12);padding:18px 0 30px;font-size:.85rem;color:#8fa0bd;
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;justify-content:space-between;}
.disclaimer .txt{max-width:70ch;}

/* ---------- Note banner (editor hints) ---------- */
.editnote{background:#fff8e8;border:1px solid #f0dca6;border-radius:12px;padding:14px 18px;color:#6b4e12;font-size:.9rem;margin-top:20px;}

/* ---------- Disclosures ---------- */
.disclosures{background:#f4f7fb;border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;}
.disclosures h4{margin:0 0 10px;color:var(--navy);font-size:1.05rem;}
.disclosures ul{margin:0;padding-left:1.1em;color:var(--ink-soft);font-size:.95rem;}
.disclosures li{padding:3px 0;}

/* ---------- Resources directory ---------- */
.res-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.res-group{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-sm);}
.res-group h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;}
.res-group h3 .dot{width:12px;height:12px;border-radius:99px;flex:none;}
.res-list{list-style:none;margin:0;padding:0;}
.res-list li{padding:12px 0;border-bottom:1px solid var(--line);}
.res-list li:last-child{border-bottom:none;}
.res-list .name{font-weight:700;color:var(--navy);}
.res-list .desc{color:var(--ink-soft);font-size:.95rem;}
.res-list .meta{font-size:.9rem;margin-top:2px;}
.res-list a{color:var(--teal-dark);font-weight:600;}

/* ---------- Blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.blog-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.blog-card__top{height:8px;}
.blog-card__body{padding:22px 24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.blog-card .tag{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--coral);}
.blog-card h3{margin:0;font-size:1.14rem;}
.blog-card p{color:var(--ink-soft);font-size:.97rem;margin:0;}
.blog-card a.more{margin-top:auto;font-weight:700;color:var(--teal-dark);}
.article{max-width:760px;margin:0 auto;}
.article .byline{color:var(--ink-soft);font-size:.95rem;margin:0 0 1.4em;}
.article .lede{font-size:1.24rem;color:var(--ink-soft);line-height:1.6;}
.article h2{margin:1.5em 0 .4em;font-size:1.5rem;}
.article h3{margin:1.2em 0 .3em;font-size:1.2rem;}
.article p,.article li{font-size:1.08rem;color:var(--ink);line-height:1.75;}
.article ul{padding-left:1.2em;margin:0 0 1.1em;}
.article li{padding:3px 0;}
.article .callout{background:#eef4fb;border-left:4px solid var(--blue);padding:14px 18px;border-radius:8px;margin:1.4em 0;font-size:1rem;color:#22374f;}

/* ---------- KPI stat tiles ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px;box-shadow:var(--shadow-sm);text-align:center;}
.kpi__num{font-size:2.3rem;font-weight:800;line-height:1;color:var(--teal-dark);}
.kpi__label{color:var(--ink);font-size:.98rem;margin-top:10px;font-weight:600;line-height:1.4;}
.kpi__sub{color:var(--ink-soft);font-size:.78rem;margin-top:8px;text-transform:uppercase;letter-spacing:.05em;}

/* ---------- Donut charts ---------- */
.donuts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.donut{position:relative;text-align:center;outline:none;padding:6px 4px;cursor:default;}
.donut svg{width:150px;height:150px;transform:rotate(-90deg);transition:filter .2s ease, transform .2s ease;}
.donut__track{fill:none;stroke:#e6ebf2;stroke-width:12;}
.donut__val{fill:none;stroke:var(--c);stroke-width:12;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;
  transition:stroke-dashoffset 1.2s cubic-bezier(.22,.61,.36,1);}
.donut.on .donut__val{stroke-dashoffset:calc(327 - 327 * var(--pct) / 100);}
.donut__center{position:absolute;top:6px;left:0;right:0;height:150px;display:grid;place-items:center;pointer-events:none;}
.donut__num{font-size:1.8rem;font-weight:800;color:var(--c);}
.donut figcaption{margin-top:10px;font-weight:700;color:var(--ink);font-size:.98rem;line-height:1.35;}
.donut figcaption small{display:block;color:var(--ink-soft);font-weight:500;font-size:.85rem;margin-top:2px;}
.donut:hover svg,.donut:focus svg{filter:drop-shadow(0 8px 16px rgba(20,51,107,.20));transform:rotate(-90deg) scale(1.03);}
.donut__tip{position:absolute;bottom:calc(100% - 8px);left:50%;transform:translateX(-50%) translateY(6px);
  background:#14336b;color:#fff;padding:11px 13px;border-radius:10px;font-size:.8rem;line-height:1.4;width:230px;max-width:80vw;
  opacity:0;visibility:hidden;transition:.18s ease;z-index:30;box-shadow:0 10px 24px rgba(0,0,0,.22);}
.donut:hover .donut__tip,.donut:focus .donut__tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.donut__tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#14336b;}

.only-mobile{display:none;}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .site-header .nav__links{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--line);padding:8px 18px 16px;box-shadow:var(--shadow);}
  .site-header .nav__links.open{display:flex;}
  .site-header .nav__links a{padding:14px 10px;font-size:1.08rem;border-bottom:1px solid var(--line);}
  .site-header .nav__toggle{display:block;}
  .site-header .only-mobile{display:block;}
  .site-header .nav__actions .btn--outline{display:none;}
}
@media (max-width:1000px){
  .res-groups{grid-template-columns:1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .kpis{grid-template-columns:1fr 1fr;}
  .donuts{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){ .kpis{grid-template-columns:1fr;} .donuts{grid-template-columns:1fr;} }
@media (max-width:1000px){
  .hero__grid,.match{grid-template-columns:1fr;}
  .svc-grid{grid-template-columns:1fr;}
  .steps3{grid-template-columns:1fr;}
  .footer__top{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .nav__links{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fff;border-bottom:1px solid var(--line);padding:8px 18px 16px;box-shadow:var(--shadow);}
  .nav__links.open{display:flex;}
  .nav__links a{padding:14px 10px;font-size:1.08rem;border-bottom:1px solid var(--line);}
  .nav__toggle{display:block;}
  .nav__actions .btn{padding:11px 16px;font-size:.95rem;}
  .field-row{grid-template-columns:1fr;}
  .footer__top{grid-template-columns:1fr;}
}