/* Porchlight — marketing site. Brand: amber porch glow, dusk blue, warm cream. */
:root{
  --porch-amber:#E8943A; --lantern-glow:#F4B860; --ember:#C2651F;
  --dusk:#1E2A3A; --twilight:#2E4156; --cream:#FBF6EC; --paper:#FFFFFF;
  --ink:#1B2027; --slate:#4A5462; --line:rgba(30,42,58,.10);
  --moss:#3F7D58; --sky:#5E8BB0;
  --maxw:1140px; --readw:720px;
  --shadow:0 14px 40px rgba(30,42,58,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Fraunces","Source Serif 4",Georgia,serif; line-height:1.14; color:var(--dusk); font-weight:600; letter-spacing:-.01em; text-wrap:balance}
h1{font-size:clamp(2.3rem,5vw,3.5rem); margin:.1em 0 .35em}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem); margin:0 0 .5em}
h3{font-size:1.28rem; margin:0 0 .4em}
p{margin:0 0 1.1em}
a{color:var(--ember); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
em{font-style:italic}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.read{max-width:var(--readw); margin:0 auto; padding:0 24px}
.center{text-align:center}
.narrow{max-width:62ch; margin-inline:auto}
.eyebrow{text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:700; color:var(--ember); margin:0 0 .5em}
.lead{font-size:1.2rem; color:var(--slate)}

/* Buttons */
.btn{display:inline-block; background:var(--porch-amber); color:var(--dusk)!important; font-weight:600; padding:13px 26px; border-radius:999px; box-shadow:0 6px 18px rgba(232,148,58,.34); transition:transform .15s,box-shadow .15s; white-space:nowrap}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(232,148,58,.5); text-decoration:none}
.btn-lg{padding:15px 30px; font-size:1.05rem}
.btn-sm{padding:9px 18px; font-size:.92rem}
.btn-ghost{background:transparent; color:var(--dusk)!important; border:1.6px solid rgba(30,42,58,.22); box-shadow:none}
.btn-ghost:hover{border-color:var(--ember); background:rgba(194,101,31,.06)}
.hero .btn-ghost, .cta-band .btn-ghost{color:var(--cream)!important; border-color:rgba(244,184,96,.55)}
.hero .btn-ghost:hover, .cta-band .btn-ghost:hover{background:rgba(244,184,96,.12)}
.btn-ghost.dark{color:var(--dusk)!important}

/* Header */
.site-head{position:sticky; top:0; z-index:50; background:rgba(251,246,236,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex; align-items:center; gap:18px; height:68px}
.brand{display:flex; align-items:center; gap:10px; font-family:"Fraunces",serif; font-weight:600; font-size:1.38rem; color:var(--dusk)}
.brand:hover{text-decoration:none}
.lamp{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 50% 38%,var(--lantern-glow),var(--porch-amber) 58%,var(--ember));box-shadow:0 0 16px 3px rgba(232,148,58,.55); flex:none}
.nav{display:flex; gap:6px; margin-left:auto}
.navlink{color:var(--slate); font-size:.96rem; padding:6px 12px; font-weight:500; border-radius:8px}
.navlink:hover{color:var(--ember); text-decoration:none; background:rgba(194,101,31,.06)}
.nav-cta{display:flex; align-items:center; gap:10px}
.nav-cta .signin{color:var(--dusk); font-weight:600}

/* Hero */
.hero{background:linear-gradient(165deg,var(--dusk),var(--twilight)); color:var(--cream); position:relative; overflow:hidden}
.hero::after{content:"";position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(244,184,96,.28),transparent 64%);pointer-events:none}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; padding:82px 24px 86px; position:relative; z-index:1}
.hero h1{color:var(--cream)}
.hero .eyebrow{color:var(--lantern-glow)}
.hero .lede{font-size:1.22rem; color:#dbe1e9; max-width:52ch; margin-bottom:1.7em}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.trustline{margin-top:1.5em; font-size:.9rem; color:#b9c2cd}
/* Hero media + story chip */
.hero-media{position:relative}
.hero-media>img{border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.38); aspect-ratio:15/11; object-fit:cover; width:100%}
.story-chip{position:absolute; left:-24px; bottom:-26px; max-width:300px; background:var(--paper); color:var(--ink); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow); border:1px solid var(--line)}
.chip-label{font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--ember)}
.chip-quote{font-family:"Fraunces",serif; font-size:1.08rem; line-height:1.34; color:var(--dusk); margin:.5em 0 .55em}
.chip-by{font-size:.82rem; color:var(--slate)}

/* Generic section rhythm */
.section{padding:74px 0}
.band{padding:60px 0; background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band h2{margin-bottom:.4em}
.section-tint{background:#F4ECDC}
.section-dark{background:var(--dusk); color:var(--cream)}
.section-dark h2,.section-dark h3{color:var(--cream)}
.section .eyebrow.center,.section-dark .eyebrow{text-align:center}

/* How it works — steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
.step{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:30px 26px; box-shadow:0 4px 16px rgba(30,42,58,.05)}
.step-num{display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--dusk); color:var(--lantern-glow); font-family:"Fraunces",serif; font-weight:700; font-size:1.2rem; margin-bottom:14px}
.step h3{color:var(--dusk)}
.step p{color:var(--slate); font-size:.99rem; margin:0}

/* Who it's for — faces */
.faces{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px}
.face{background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 6px 20px rgba(30,42,58,.06)}
.face>img{width:100%; aspect-ratio:3/2; object-fit:cover}
.face-body{padding:24px 24px 28px}
.face-body h3{color:var(--dusk)}
.face-body p{color:var(--slate); font-size:1rem; margin:0}

/* Outcomes */
.outcomes{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:42px; max-width:920px; margin-inline:auto}
.outcome{background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--porch-amber); border-radius:12px; padding:24px 26px}
.outcome h3{color:var(--dusk); font-size:1.18rem; margin-bottom:.3em}
.outcome p{color:var(--slate); font-size:1rem; margin:0}

/* Evidence */
.evidence-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.evidence-fig{margin:0}
.evidence-fig img{border-radius:18px; box-shadow:0 18px 44px rgba(0,0,0,.34); aspect-ratio:2/1; object-fit:cover; width:100%}

/* Article cards (with images) */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:24px; margin-top:40px}
.card{background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 4px 16px rgba(30,42,58,.05); transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow); text-decoration:none}
.card-img{width:100%; aspect-ratio:2/1; object-fit:cover}
.card-pad{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1}
.card .tag{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:var(--ember)}
.card h3{margin:.45em 0 .35em; color:var(--dusk); font-size:1.16rem}
.card p{color:var(--slate); font-size:.97rem; margin:0}
.card .more{margin-top:auto; padding-top:16px; color:var(--ember); font-weight:600; font-size:.92rem}

/* Pricing */
.price-card{max-width:560px; margin-inline:auto; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:42px 38px; text-align:center; box-shadow:var(--shadow)}
.price-amt{font-family:"Fraunces",serif; font-size:3.4rem; color:var(--dusk); font-weight:700; line-height:1; margin:.1em 0 .25em}
.price-amt span{font-size:1.1rem; color:var(--slate); font-weight:500; font-family:"Inter",sans-serif}
.price-sub{color:var(--slate); font-size:1rem; max-width:42ch; margin-inline:auto}
.price-list{list-style:none; padding:0; margin:22px auto; max-width:34ch; text-align:left}
.price-list li{position:relative; padding-left:30px; margin-bottom:11px; color:var(--ink); font-size:1rem}
.price-list li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--moss); font-weight:800}
.price-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px}

/* CTA band */
.cta-band{background:linear-gradient(160deg,var(--dusk),var(--twilight)); color:var(--cream); border-radius:22px; padding:54px 40px; text-align:center; box-shadow:var(--shadow); position:relative; overflow:hidden}
.cta-band::after{content:"";position:absolute;left:50%;top:-140px;transform:translateX(-50%);width:480px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(244,184,96,.22),transparent 65%)}
.cta-band h2{color:var(--cream); margin-bottom:.3em; position:relative}
.cta-band p{font-size:1.18rem; max-width:50ch; margin:0 auto 1.6em; color:#dbe1e9; position:relative}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative}

/* ===== Article body styles (article pages) ===== */
.article-head{background:linear-gradient(160deg,var(--dusk),var(--twilight)); color:var(--cream); padding:66px 0 52px}
.article-head .read{padding-top:0}
.article-head .kicker{color:var(--lantern-glow); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; font-weight:700}
.article-head h1{color:var(--cream); margin-top:.3em}
.article-head .sub{color:#dbe1e9; font-size:1.18rem; max-width:60ch}
.article-hero{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.article-hero img{width:100%; aspect-ratio:2/1; object-fit:cover; border-radius:18px; margin-top:-34px; box-shadow:var(--shadow); position:relative; z-index:2}
.article-body{padding:46px 0 40px}
.article-body h2{border-top:1px solid var(--line); padding-top:1.2em; margin-top:1.6em}
.article-body figure{margin:1.8em 0}
.article-body figure img{border-radius:14px}
.article-body figcaption{font-size:.86rem; color:var(--slate); margin-top:.5em; text-align:center}
blockquote{margin:1.6em 0; padding:18px 26px; background:var(--paper); border-left:4px solid var(--porch-amber); border-radius:0 12px 12px 0; font-size:1.08rem; color:var(--dusk)}
blockquote cite{display:block; margin-top:.6em; font-size:.9rem; color:var(--slate); font-style:normal}
.callout{background:rgba(63,125,88,.08); border:1px solid rgba(63,125,88,.25); border-radius:12px; padding:22px 24px; margin:1.8em 0}
.callout h3{margin-top:0; color:var(--moss)}
.pull{font-family:"Fraunces",serif; font-size:1.5rem; line-height:1.35; color:var(--ember); margin:1.4em 0; font-weight:500}
ul.clean li,ol li{margin-bottom:.5em}
.refs{overflow-wrap:anywhere; font-size:.9rem; color:var(--slate); border-top:1px solid var(--line); margin-top:2.4em; padding-top:1.4em}
.refs h3{font-size:1rem; color:var(--slate)}
.refs ol{padding-left:1.2em}
.note{font-size:.86rem; color:var(--slate); font-style:italic}
.article-head .byline{color:#aeb8c4; font-size:.9rem; margin-top:1em}
.keypoints{background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--porch-amber); border-radius:0 12px 12px 0; padding:18px 24px; margin:0 0 1.8em; box-shadow:var(--shadow)}
.keypoints h3{margin-top:0; font-size:1.05rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ember); font-family:"Inter",sans-serif}
.keypoints ul{margin:0; padding-left:1.2em}
.table-scroll{overflow-x:auto; margin:1.6em 0}
table.data{width:100%; border-collapse:collapse; font-size:.95rem; background:var(--paper); border-radius:12px; overflow:hidden}
table.data th,table.data td{padding:10px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
table.data th{background:var(--dusk); color:#fff; font-weight:600}
.next-reads{margin-top:40px}
.next-reads .cards{margin-top:18px}

/* Footer */
footer{background:var(--dusk); color:#aeb8c4; padding:54px 0 44px; font-size:.94rem}
footer a{color:var(--lantern-glow)}
footer a:hover{color:var(--cream)}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:36px}
footer .brand{color:var(--cream)}
.footer-col h4{color:var(--cream); font-family:"Inter",sans-serif; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; margin:0 0 .9em}
.footer-col a{display:block; margin-bottom:.6em; color:#c8bca8}
.footer-col a:hover{color:var(--lantern-glow)}
.disclaimer{font-size:.82rem; color:#8b97a4; max-width:46ch; margin-top:14px}

/* Responsive */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:54px; padding:64px 24px 70px}
  .hero-media{max-width:520px}
  .evidence-grid{grid-template-columns:1fr; gap:30px}
  .steps,.faces{grid-template-columns:1fr}
  .outcomes{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  body{font-size:17px}
  .nav{display:none}
  .story-chip{left:0; right:0; max-width:none; bottom:-18px}
  .hero-media{margin-bottom:24px}
  .footer-grid{grid-template-columns:1fr}
  .price-card{padding:34px 24px}
}

/* GeekWire feature band */
.gw-feature{background:var(--cream); padding:56px 0 8px}
.gw-card{display:grid; grid-template-columns:minmax(260px,.9fr) 1.3fr; gap:44px; align-items:center; background:var(--paper); border:1px solid var(--line); border-top:5px solid #C94E27; border-radius:20px; padding:40px 48px; box-shadow:var(--shadow); color:var(--ink); transition:transform .18s, box-shadow .18s}
.gw-card:hover{text-decoration:none; transform:translateY(-3px); box-shadow:0 20px 50px rgba(30,42,58,.16)}
.gw-logo-col{display:flex; flex-direction:column; gap:14px}
.gw-kicker{text-transform:uppercase; letter-spacing:.16em; font-size:.8rem; font-weight:700; color:var(--slate)}
.gw-logo{width:100%; max-width:380px; height:auto}
.gw-meta{font-size:.92rem; color:var(--slate)}
.gw-copy h2{font-size:clamp(1.45rem,2.6vw,2rem); margin:0 0 .45em}
.gw-copy blockquote{margin:0 0 1em; padding-left:18px; border-left:3px solid var(--porch-amber); font-family:"Fraunces",Georgia,serif; font-style:italic; font-size:1.18rem; color:var(--slate)}
.gw-read{font-weight:700; color:#C94E27}
.gw-card:hover .gw-read{text-decoration:underline}
.gw-top{padding-top:40px}
@media (max-width:820px){
  .gw-feature{padding:36px 0 0}
  .gw-card{grid-template-columns:1fr; gap:20px; padding:26px 22px}
  .gw-logo{max-width:260px}
}
.gw-press{grid-template-columns:1fr; gap:18px; padding:30px 32px; margin:0 0 36px}
.gw-press .gw-logo{max-width:300px}
.gw-press h3{font-size:1.35rem}

/* Aging Well Podcast feature band */
.pod-feature{background:var(--cream); padding:32px 0 8px}
.pod-card{display:grid; grid-template-columns:1.25fr 1fr; gap:44px; align-items:center; background:linear-gradient(165deg,var(--dusk),var(--twilight)); color:var(--cream); border-radius:22px; padding:34px; box-shadow:0 24px 60px rgba(30,42,58,.28)}
.pod-video{position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; box-shadow:0 12px 30px rgba(0,0,0,.35)}
.pod-video iframe,.yt-facade{position:absolute; inset:0; width:100%; height:100%; border:0}
.yt-facade{padding:0; cursor:pointer; background:#000}
.yt-facade img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s, opacity .3s; opacity:.92}
.yt-facade:hover img{transform:scale(1.03); opacity:1}
.yt-play{position:absolute; left:50%; top:50%; width:78px; height:78px; margin:-39px 0 0 -39px; border-radius:50%; background:var(--porch-amber); box-shadow:0 0 0 10px rgba(232,148,58,.25),0 10px 30px rgba(0,0,0,.4); transition:transform .18s}
.yt-play:after{content:""; position:absolute; left:31px; top:24px; border-style:solid; border-width:15px 0 15px 24px; border-color:transparent transparent transparent var(--dusk)}
.yt-facade:hover .yt-play{transform:scale(1.08)}
.pod-kicker{display:inline-flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:700; color:var(--lantern-glow)}
.pod-dot{width:9px; height:9px; border-radius:50%; background:#E25B45; box-shadow:0 0 0 4px rgba(226,91,69,.25)}
.pod-copy h2{color:var(--cream); font-size:clamp(1.45rem,2.6vw,2.05rem); margin:.4em 0 .5em; line-height:1.18}
.pod-copy p{color:rgba(251,246,236,.86); margin:0 0 1.1em}
.pod-actions{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px}
.btn-ghost-dark{background:transparent; color:var(--cream)!important; border:1.5px solid rgba(244,184,96,.55); box-shadow:none}
.pod-clips{list-style:none; margin:0; padding:14px 0 0; border-top:1px solid rgba(251,246,236,.14); display:grid; gap:8px}
.pod-clips a{color:var(--cream); font-size:.95rem}
.pod-clips span{display:inline-block; min-width:44px; font-variant-numeric:tabular-nums; color:var(--lantern-glow); font-weight:600}
.as-heard{margin:18px 0 0; font-size:.95rem; color:rgba(251,246,236,.8)}
.as-heard a{color:var(--lantern-glow); font-weight:600}
@media (max-width:900px){
  .pod-feature{padding:36px 0 0}
  .pod-card{grid-template-columns:1fr; gap:22px; padding:18px 18px 26px}
}
.pod-press{border-top-color:var(--porch-amber)}
.pod-thumb{width:100%; max-width:300px; border-radius:10px}

/* Contact form (2026-10-12): posts to lb-leads (leads.levelbrook.com/lead) on Box B, mailed to the team inbox */
.pl-contact{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px; align-items:start}
@media (max-width:860px){.pl-contact{grid-template-columns:1fr; gap:22px}}
.pl-contact .note{color:var(--slate); font-size:1.05rem}
.pl-contact .sig{font-family:"Fraunces",Georgia,serif; color:var(--dusk); font-size:1.12rem; margin-top:.4em}
.pl-contact .alt{font-size:.95rem; color:var(--slate)}
.pl-form{background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:30px 28px; box-shadow:var(--shadow); position:relative}
.pl-form label{display:block; font-size:.9rem; font-weight:600; color:var(--dusk); margin:0 0 6px}
.pl-form label small{font-weight:400; color:var(--slate)}
.pl-form input,.pl-form textarea{width:100%; border:1.4px solid rgba(30,42,58,.18); border-radius:12px; padding:12px 14px; font:inherit; font-size:1rem; background:var(--cream); color:var(--ink)}
.pl-form input:focus,.pl-form textarea:focus{outline:none; border-color:var(--porch-amber); box-shadow:0 0 0 3px rgba(232,148,58,.18)}
.pl-form textarea{min-height:130px; resize:vertical}
.pl-form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){.pl-form .row{grid-template-columns:1fr} .pl-form{padding:24px 18px}}
.pl-form .f{margin:0 0 16px}
.pl-form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.pl-form button{border:0; cursor:pointer; font:inherit}
.pl-form button[disabled]{opacity:.6; cursor:default; transform:none}
.pl-form .fine{display:block; margin-top:12px; font-size:.86rem; color:var(--slate)}
.pl-form .msg{display:none; margin:12px 0 0; font-size:.95rem; color:#a23b12}
.pl-form .msg.err{display:block}
.pl-form .done{display:none; font-size:1.08rem; line-height:1.65; color:var(--dusk)}
.pl-form.sent form{display:none}
.pl-form.sent .done{display:block}