/* Buttons (the guide pages load only articles.css, which has none of these) */
.btn{display:inline-block;padding:14px 28px;border-radius:999px;text-decoration:none;font-weight:800;font-size:16px;font-family:inherit;border:0;cursor:pointer;transition:transform .15s,box-shadow .2s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#3a2e07;box-shadow:0 6px 18px rgba(202,166,74,.4)}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(47,107,102,.35)}
/* Caring for Our Parents - Phoenix: motion + interaction layer (shared by every page).
   Calm by design: slower, softer movement for an audience that is often reading on a phone
   at the end of a long day. ui.js drives the classes; the page reads fine without it. */
h1,h2,h3{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
html{scroll-behavior:smooth}
/* Header compacts on scroll, gold reading-progress line along its bottom edge */
header.top{position:relative;z-index:50;transition:padding .3s ease,box-shadow .3s ease}
@media(min-width:761px){header.top{position:sticky;top:0}}
body.scrolled header.top{padding-top:9px;padding-bottom:9px;box-shadow:0 8px 28px -12px rgba(28,52,49,.6)}
.progressbar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--gold),#e2c56f);pointer-events:none}
header.top nav a{position:relative;display:inline-block;padding:4px 0;transition:color .2s ease}
header.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
header.top nav a:hover::after{transform:scaleX(1)}
/* Scroll reveals: rise in softly, siblings staggered via --d */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0)*90ms)}
.reveal.is-visible{opacity:1;transform:none}
/* Cursor spotlight: a warm glow follows the pointer across a card */
.spot{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s ease;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(202,166,74,.16),rgba(47,107,102,.06) 45%,transparent 70%);z-index:1}
.spot:hover::after{opacity:1}
/* Buttons: soft gloss sweep; ui.js nudges them toward the cursor */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s ease;pointer-events:none}
.btn:hover::before{left:120%}
/* Hero: the photo drifts slowly (Ken Burns), the words rise in one by one */
.hero{overflow:hidden;background:#1c3431}
.hero::before{content:"";position:absolute;inset:-4%;background:url(/img/cfop-hero.jpg) center 32%/cover no-repeat;animation:drift 28s ease-in-out infinite alternate;z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(28,52,49,.74),rgba(28,52,49,.86));z-index:1}
.hero>*{position:relative;z-index:2}
@keyframes drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.2%,1.5%)}}
.hero>*{animation:heroin 1s cubic-bezier(.2,.7,.2,1) both}
.hero h1 ~ *{animation-delay:.35s}
.hero h1 ~ * ~ *{animation-delay:.55s}
@keyframes heroin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.w{display:inline-block;animation:wordin .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*.07s)}
@keyframes wordin{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
/* "alone." gets a soft gold underline that draws itself once the words land */
.ul{background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 92%/0% 3px;animation:ulgrow .7s cubic-bezier(.2,.7,.2,1) 1s both;padding-bottom:2px}
@keyframes ulgrow{to{background-size:100% 3px}}
/* Section eyebrow labels */
.eyebrow{display:block;text-align:center;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
/* Quiet lifts on hover across the page */
.pillar{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.pillar:hover{transform:translateY(-5px);box-shadow:0 6px 12px rgba(36,79,75,.08),0 22px 40px -14px rgba(36,79,75,.28)}
.pillar .ic{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pillar:hover .ic{transform:scale(1.15) rotate(-4deg)}
.expert{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.expert .banner{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
a.expert:hover .banner{transform:scale(1.03)}
.expert .visit{transition:color .2s ease,transform .25s ease}
a.expert:hover .visit{transform:translateX(4px)}
.rescard,.faq,.acard,.procard{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.rescard:hover,.faq:hover,.procard:hover{transform:translateY(-3px);box-shadow:0 6px 12px rgba(36,79,75,.08),0 18px 34px -14px rgba(36,79,75,.24)}
.gallery img{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease}
.gallery img:hover{transform:scale(1.03) rotate(-.5deg);box-shadow:0 18px 36px -14px rgba(28,52,49,.45)}
/* FAQ accordion: question stays put, the answer folds open */
.faq h3{margin:0;cursor:pointer;padding-right:34px;position:relative;user-select:none}
.faq h3::after{content:"";position:absolute;right:2px;top:.35em;width:10px;height:10px;border-right:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);transform:rotate(45deg);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.faq.open h3::after{transform:rotate(225deg);top:.6em}
.faq p{max-height:0;overflow:hidden;margin:0;transition:max-height .5s cubic-bezier(.2,.7,.2,1),margin .35s ease,opacity .4s ease;opacity:0}
.faq.open p{max-height:400px;margin-top:8px;opacity:1}
.faq h3:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:6px}
/* Newsletter popup (ui.js shows it after 10s, once per device, ever; ?popup=1 forces it) */
.nlpop{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(28,52,49,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .35s ease}
.nlpop[hidden]{display:none}
.nlpop:not(.show){pointer-events:none}
.nlpop.show{opacity:1}
.nlpop-card{position:relative;display:grid;grid-template-columns:300px 1fr;width:min(820px,100%);background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);transform:translateY(24px) scale(.96);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.nlpop.show .nlpop-card{transform:none}
.nlpop-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--teal-dk);font-size:26px;line-height:1;cursor:pointer;z-index:3;transition:background .2s,transform .2s}
.nlpop-x:hover{background:var(--gold);color:#3a2e07;transform:rotate(90deg)}
.nlpop-photo{position:relative;min-height:100%}
.nlpop-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.nlpop-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,52,49,.05),rgba(28,52,49,.6))}
.nlpop-chip{position:absolute;left:18px;bottom:18px;z-index:2;background:var(--gold);color:#3a2e07;font-weight:900;font-size:13px;letter-spacing:.04em;padding:7px 12px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.nlpop-body{padding:38px 38px 30px;text-align:left}
.nlpop-body .eyebrow{text-align:left;margin-bottom:8px}
.nlpop-body h2{font-size:clamp(23px,2.8vw,30px);margin:0 0 14px;line-height:1.18;text-align:left}
.nlpop-list{list-style:none;padding:0;margin:0 0 20px;color:var(--ink);font-size:15.5px}
.nlpop-list li{position:relative;padding-left:26px;margin:7px 0}
.nlpop-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--gold);font-weight:900}
.nlpop-form{display:flex;gap:10px;flex-wrap:wrap}
.nlpop-email{flex:1 1 200px;padding:14px 18px;font-size:16px;font-family:inherit;border:2px solid rgba(47,107,102,.3);border-radius:999px;outline:none;transition:border-color .2s,box-shadow .2s}
.nlpop-email:focus{border-color:var(--teal);box-shadow:0 0 0 5px rgba(47,107,102,.15)}
.nlpop-form .btn{white-space:nowrap}
.nlpop-form .btn[disabled]{opacity:.7;cursor:wait;transform:none}
.nlpop-fine{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.nlpop-err{margin:6px 0 0;font-size:14px;color:#b3261e;min-height:1em}
.nlpop-done{grid-column:1/-1;text-align:center;padding:54px 38px}
.nlpop-check{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--teal);color:#fff;font-size:34px;font-weight:900;display:flex;align-items:center;justify-content:center;animation:popin .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes popin{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.nlpop-done h2{margin:0 0 8px}
.nlpop-done p{color:var(--muted);margin:0 0 18px}
@media(max-width:700px){.nlpop{align-items:flex-end;padding:0}.nlpop-card{grid-template-columns:1fr;width:100%;border-radius:22px 22px 0 0;max-height:92vh;overflow:auto}.nlpop-photo{height:120px}.nlpop-body{padding:24px 22px 22px}.nlpop-body h2{font-size:22px}.nlpop-list{font-size:14.5px;margin-bottom:14px}}
/* Back to top */
.totop{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;background:var(--teal-dk);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(28,52,49,.6);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s,background .2s;z-index:70}
.totop.show{opacity:1;transform:none}
.totop:hover{background:var(--gold);color:#3a2e07}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .ul{background-size:100% 3px}
  .faq p{max-height:none;opacity:1;margin-top:8px}
  .faq h3{cursor:default}
  .faq h3::after{display:none}
}