/* BRASSLINE's chapter rhythm: fire, brass, and warm ink. */
:root { --fire:#ec6747; --brass:#ffd269; --red:#a93829; }
.header { background:linear-gradient(90deg,#171315,#36221d 72%,#171315);box-shadow:inset 0 -3px 0 #ec674755 }
.brand-mark i { background:var(--fire) }
.header nav a { position:relative;transition:color .25s,transform .3s }
.header nav a::after { content:"";position:absolute;left:0;right:100%;bottom:-.4rem;height:2px;background:var(--brass);transition:right .35s }
.header nav a:hover,.header nav a:focus-visible { color:var(--brass);transform:translateY(-2px) }
.header nav a:hover::after,.header nav a:focus-visible::after { right:0 }
.hero { position:relative;background:linear-gradient(110deg,#111011ef,#3d1b17c9 48%,#130e0dec),url("./financial-flow-hero.webp") center/cover no-repeat }
.hero::before { content:"";position:absolute;inset:0 0 auto;height:8px;background:linear-gradient(90deg,var(--fire) 0 23%,var(--brass) 23% 39%,transparent 39% 68%,var(--copper) 68%);z-index:1 }
.hero::after { content:"";position:absolute;width:min(40vw,560px);aspect-ratio:1;border-radius:50%;left:34%;top:20%;border:1px solid #ffd26972;box-shadow:0 0 0 24px #ec674718,0 0 0 60px #ffd2690e;pointer-events:none }
.hero-copy,.planner { position:relative;z-index:1 }
.hero h1 em { color:var(--brass);text-shadow:0 8px 38px #ec67478a }
.hero .eyebrow,.hero-sequence b { color:var(--brass) }
.eyebrow-line { background:var(--fire) }
.hero-sequence { border-top:2px solid var(--fire);background:linear-gradient(90deg,#ec67472c,transparent);padding:1.1rem 1rem;margin-left:-1rem }
.planner { border-color:#e7a25e;box-shadow:17px 20px 0 #ec67473b,0 40px 110px #000b;transition:transform .45s,box-shadow .45s }
.planner:hover { transform:translateY(-5px);box-shadow:20px 26px 0 #ec67474c,0 45px 120px #000b }
.planner-head,.planner-result>span { color:var(--brass) }
.planner-result strong:not(.invalid) { color:#fff5de;text-shadow:0 0 38px #ffd2694c }
.flow { height:13px;transform:skewX(-10deg);border-left:4px solid var(--fire) }
.flow span { transition:width .65s cubic-bezier(.22,.7,.23,1) }
.text-link,.dark-link { transition:color .3s,padding-left .3s,background .3s }
.text-link:hover,.text-link:focus-visible,.dark-link:hover,.dark-link:focus-visible { padding-left:.7rem }

.purpose { background:linear-gradient(145deg,#f39451,#df6343 58%,#b34230) }
.purpose::before { content:"01 / 02 / 03";position:absolute;top:4rem;right:-3.6rem;transform:rotate(90deg);font:700 1.2rem Antonio,Impact,sans-serif;letter-spacing:.5em;color:#fff0cd;opacity:.7 }
.purpose::after { content:"";position:absolute;width:45vw;height:45vw;max-width:600px;max-height:600px;border:2px solid #ffe5b64f;border-radius:50%;left:-12%;bottom:-45%;pointer-events:none }
.purpose .eyebrow { color:#431d13 }
.purpose h2 em { color:#fff4c9!important;background:#8b3023;padding:.03em .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;text-shadow:0 4px 0 #542016,0 13px 35px #541b1bad }
.purpose-copy p { color:#2e1915 }
.purpose-figure { filter:drop-shadow(0 18px 30px #72271e75) }
.figure-block { background:linear-gradient(125deg,#281a17 20%,#8b3023 68%,var(--brass));box-shadow:18px 20px 0 var(--brass),26px 28px 28px #54201599 }
.figure-block.one { height:55% }.figure-block.three { height:72% }

.whatif { position:relative;overflow:hidden;background:radial-gradient(circle at 75% 15%,#a23c2f,#50251f 30%,#1d1718 74%) }
.whatif::before { content:"";position:absolute;inset:0;background:repeating-linear-gradient(-28deg,transparent 0 90px,#ffd2690b 91px 92px);pointer-events:none }
.whatif-intro,.whatif-workbench { position:relative;z-index:1 }
.whatif h2 em { color:#ffbd76!important }
.scenario-rule { border-color:#f1956275 }.scenario-rule strong { color:var(--brass) }
.whatif-workbench { background:linear-gradient(140deg,#fff0d8,#f3d8ba);border-left-color:var(--fire);box-shadow:25px 30px 0 #9b3b2f9c }
.workbench-head { color:#883225 }
.whatif-workbench output,.scenario-figures>div:nth-child(2) strong { color:#b7452c }
.whatif-workbench input[type=range],.goal-share input[type=range] { accent-color:#dd583a }
.scenario-track span { height:19px;transition:width .6s cubic-bezier(.22,.7,.23,1),background .25s }
.scenario-track span:nth-child(2) { background:var(--fire) }

.goal-section { position:relative;overflow:hidden;background:linear-gradient(130deg,#fff0cf,#ffcf75 64%,#eea65a) }
.goal-section::before { content:"";width:35vw;aspect-ratio:1;max-width:480px;position:absolute;right:-10%;top:-18%;border:20px solid #fa75594a;border-radius:50%;pointer-events:none }
.goal-section .section-heading,.goal-card { position:relative;z-index:1 }
.goal-section .eyebrow { color:#8d3526 }.goal-section h2 em { color:#ba402a!important }
.goal-card { background:linear-gradient(155deg,#44221e,#24191a);border-top:9px solid var(--fire);box-shadow:20px 20px 0 #c7442b;transition:transform .5s,box-shadow .5s }
.goal-card:hover { transform:translate(-5px,-5px);box-shadow:25px 25px 0 #c7442b }
.goal-card-top,.goal-readout>span,.goal-share output { color:var(--brass) }
.goal-stages i { background:var(--fire);transition:transform .4s }
.goal-stages i:nth-child(2n) { background:var(--brass) }
.goal-card:hover .goal-stages i:nth-child(2n) { transform:skew(-16deg) translateY(-6px) }

.principles { position:relative;background:linear-gradient(120deg,#171618,#2d1b1a 70%,#421d1a) }
.principles::before { content:"";position:absolute;top:0;left:4vw;width:65%;height:5px;background:linear-gradient(90deg,var(--fire),var(--brass),transparent) }
.principle-list article { transition:background .35s,padding-left .35s,transform .35s }
.principle-list article:hover { transform:translateX(6px);background:linear-gradient(90deg,#ec674729,transparent);padding-left:.6rem }
.principle-list article>span { color:var(--brass) }
.field-notes { position:relative;background:linear-gradient(145deg,#ffd981,#f8b95f 55%,#ed8f55) }
.field-notes::before { content:"";position:absolute;inset:0 0 auto;height:9px;background:repeating-linear-gradient(90deg,#a5382a 0 55px,#ffd981 55px 90px);pointer-events:none }
.notes-heading h2 em { color:#ae3427!important }.notes-arrow { color:#a5382a;transition:transform .3s }
.notes-list a:hover .notes-arrow,.notes-list a:focus-visible .notes-arrow { transform:translate(3px,-3px) }
.questions { position:relative;background:linear-gradient(135deg,#4c2421,#943d2d 66%,#633025) }
.questions::before { content:"?";position:absolute;right:4vw;top:1rem;font:700 clamp(8rem,21vw,23rem)/1 Antonio,Impact,sans-serif;color:#ffd26914;pointer-events:none }
.questions .eyebrow { color:var(--brass) }.faq,.faq details { border-color:#f5c88b85 }
.faq summary { transition:color .25s,padding-left .3s }
.faq summary:hover,.faq summary:focus-visible { color:var(--brass);padding-left:.4rem }
footer { background:linear-gradient(90deg,#151315,#32201c);border-top:5px solid var(--fire) }
.back-top { background:var(--brass);box-shadow:7px 7px 0 var(--fire);transition:transform .35s,opacity .35s,background .25s,box-shadow .3s }
.back-top:hover,.back-top:focus-visible { background:var(--fire);box-shadow:10px 10px 0 var(--brass) }

@keyframes chapter-enter { from { transform:translateY(28px);filter:saturate(.7) } to { transform:translateY(0);filter:saturate(1) } }
@keyframes orbit-breathe { 0%,100% { transform:translateX(-50%) rotateX(62deg) rotate(0deg);opacity:.7 } 50% { transform:translateX(-50%) rotateX(62deg) rotate(22deg);opacity:1 } }
@keyframes figure-rise { 0%,100% { transform:skewY(-8deg) translateY(0) } 50% { transform:skewY(-8deg) translateY(-10px) } }
@keyframes ring-drift { 0%,100% { transform:translateY(0) } 50% { transform:translateY(14px) } }
@media(prefers-reduced-motion:no-preference) {
  main section:not(.hero).in-view { animation:chapter-enter .9s cubic-bezier(.16,.78,.2,1) both }
  .purpose .figure-ring { animation:orbit-breathe 8s ease-in-out infinite }
  .purpose .figure-block.two { animation:figure-rise 6s ease-in-out infinite }
  .hero::after { animation:ring-drift 9s ease-in-out infinite }
}
@media(max-width:580px) {
  .hero::after { width:78vw;left:27%;top:8% }
  .purpose::before { display:none }
  .whatif-workbench { box-shadow:8px 8px 0 #9b3b2f9c }
  .goal-card,.goal-card:hover { box-shadow:9px 9px 0 #c7442b;transform:none }
  .back-top { box-shadow:4px 4px 0 var(--fire) }
}
@media(prefers-reduced-motion:reduce) {
  main section:not(.hero).in-view,.purpose .figure-ring,.purpose .figure-block.two,.hero::after { animation:none }
  .header nav a,.header nav a::after,.planner,.text-link,.dark-link,.goal-card,.principle-list article,.faq summary,.notes-arrow,.back-top { transition:none }
  .planner:hover,.goal-card:hover,.principle-list article:hover { transform:none }
}