/* SPFI landing — section-specific styles (built on base.css tokens) v3 */

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--line)}
.site-header__row{display:flex;align-items:center;gap:24px;height:92px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand__logo{height:38px;width:auto;display:block}
.brand__mark{font-weight:700;letter-spacing:.02em}
.brand__rest{font-weight:500}
.footer__logo{width:150px;height:auto;margin-bottom:6px}
.site-nav{display:flex;gap:26px;margin-left:auto}
.site-nav a{color:var(--ink);font-weight:500;font-size:15px}
.site-nav a:hover{color:var(--teal);text-decoration:none}
.site-header__cta{padding:10px 20px;font-size:15px}
@media(max-width:760px){
  .site-nav{display:none}
  .site-header__cta{margin-left:auto}
}

/* Hero */
.hero{position:relative;min-height:84vh;display:flex;align-items:center;padding:0;overflow:hidden;color:#fff}
.hero__bg{position:absolute;inset:0;background-color:var(--teal);
  background-image:linear-gradient(100deg,rgba(15,35,80,.93) 0%,rgba(15,35,80,.80) 38%,rgba(15,35,80,.40) 68%,rgba(15,35,80,.18) 100%),
    url('/assets/img/hero.jpg');
  background-size:cover;background-position:center right}
.hero__inner{position:relative;padding-top:80px;padding-bottom:80px;max-width:760px;margin-left:max(24px,calc((100vw - var(--wrap))/2 + 24px))}
.hero h1{color:#fff}
.hero__lede{color:#dfeaee;max-width:54ch}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero__trust{margin-top:22px;font-size:14px;color:#bcd0d7;letter-spacing:.02em}
@media(max-width:600px){.hero{min-height:auto;padding:64px 0}.hero__inner{margin:0 auto}}

/* Trust strip */
.trust{padding:22px 0;background:var(--cool);border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;gap:14px 36px;justify-content:center;align-items:center}
.trust__item{display:flex;align-items:center;gap:9px;color:var(--teal);font-weight:500;font-size:15px}
.trust__item svg{color:var(--blue);flex:none}

/* Our approach / promise */
.promise__grid{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;align-items:center}
.promise__lead .lede{margin:0;max-width:none}
.promise__note{border-left:4px solid var(--coral)}
.promise__note h3{margin-top:0}
.promise__note p{color:var(--muted);margin-bottom:12px}
.promise__note p:last-child{margin-bottom:0}
@media(max-width:860px){.promise__grid{grid-template-columns:1fr;gap:24px}}

/* How it works */
.step{position:relative;padding-top:30px}
.step__num{position:absolute;top:-18px;left:24px;width:40px;height:40px;border-radius:50%;
  background:var(--teal);color:#fff;font-family:var(--serif);font-weight:600;font-size:18px;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.step h3{margin-top:10px}
.step p{margin:0;color:var(--muted)}

/* Criteria */
.criteria__grid{align-items:start}
.criteria__h{padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.clist{list-style:none;margin:0;padding:0}
.clist li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.clist li:last-child{border-bottom:0}
.clist__ic{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin-top:1px}
.clist__ic--ok{background:rgba(63,150,90,.14);color:#2f8b4f}
.clist__ic--dot{background:rgba(64,150,184,.16)}
.clist__ic--dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue)}
.criteria__note{margin:28px auto 0;max-width:70ch;text-align:center;font-size:14px;color:var(--muted)}

/* Prepare */
.prepare__grid{margin-bottom:8px}
.prepare__item{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:22px}
.prepare__item svg{color:var(--teal);flex:none;margin-top:2px}
.prepare__item strong{display:block;color:var(--teal);font-size:17px;margin-bottom:2px}
.prepare__item p{margin:0;color:var(--muted);font-size:15px}
.prepare__hint{margin:22px auto 0;max-width:64ch;text-align:center;color:var(--muted);font-size:15px}

/* Why */
.why__card{text-align:left}
.why__ic{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;
  background:rgba(17,66,86,.07);color:var(--teal);margin-bottom:14px}
.why__card h3{margin-bottom:6px}
.why__card p{margin:0;color:var(--muted);font-size:15px}

/* FAQ */
.faq__wrap{max-width:820px}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
.faq__item summary{cursor:pointer;padding:18px 22px;font-weight:600;color:var(--teal);font-size:17px;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font-family:var(--serif);font-size:24px;color:var(--blue);font-weight:400;line-height:1}
.faq__item[open] summary::after{content:"–"}
.faq__item p{margin:0;padding:0 22px 20px;color:var(--muted)}
.faq__item p a{color:var(--blue)}

/* Final CTA */
.cta__lede{font-size:19px;color:#cfe0e6;max-width:54ch;margin:0 auto 28px}

/* Footer */
.footer{background:var(--teal-700);color:#cddde2;padding:64px 0 28px}
.footer a{color:#cddde2}
.footer a:hover{color:#fff}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1.4fr;gap:40px}
.footer .brand{color:#fff}
.footer .brand__mark,.footer .brand__rest{color:#fff}
.footer__brand p{margin:12px 0;color:#9fb8c0;max-width:36ch}
.footer address{font-style:normal;line-height:1.7;color:#cddde2}
.footer__links{display:flex;flex-direction:column;gap:9px}
.footer__links h4{font-family:var(--serif);color:#fff;margin:0 0 6px}
.footer__eho{display:flex;gap:14px;align-items:flex-start;color:#cddde2}
.footer__eho svg{color:#fff;flex:none}
.footer__eho p{font-size:13px;line-height:1.55;color:#9fb8c0;margin:0}
.footer__bar{display:flex;justify-content:space-between;align-items:center;margin-top:44px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#9fb8c0}
@media(max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}.footer__eho{grid-column:1/-1}}
@media(max-width:600px){.footer__grid{grid-template-columns:1fr}}