/* fx/forged-w4.css: lane w4 (2026-09-29). #the-details, #ownership, #start on /forged-sites/. Prefix .w4- */

/* ── 1. #the-details: a calmer, numbered stack that warms as you read ── */
#the-details{counter-reset:w4d}
#the-details .fs-detail{counter-increment:w4d;transition:background-color .35s ease,box-shadow .35s ease}
#the-details .fs-detail summary{padding:20px 0 20px 14px;min-height:64px;gap:18px}
#the-details .fs-detail summary>span:not(.fs-plus){flex:1 1 auto;min-width:0}
#the-details .fs-detail summary::before{content:counter(w4d,decimal-leading-zero) / "";flex:0 0 2.1em;align-self:flex-start;padding-top:.5em;font:600 .74rem/1 var(--fx-sans);letter-spacing:.08em;color:#6b6879;transition:color .4s ease}
#the-details .fs-detail.w4-read summary::before{color:#c93812}
#the-details .fs-detail:hover{background:#faf8f4}
#the-details .fs-detail summary strong{transition:color .25s ease}
#the-details .fs-detail summary:hover strong{color:#9d2b0e}
#the-details .fs-detail[open]{background:linear-gradient(90deg,#fff6ee,#fff 55%);box-shadow:inset 3px 0 0 #e64925}
#the-details .fs-detail-body{padding-left:calc(32px + 1.554rem)}
#the-details .fs-plus{transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
#the-details .fs-plus:before,#the-details .fs-plus:after{transition:background-color .3s ease,transform .25s ease}
#the-details .fs-detail[open] .fs-plus{background:#c93812;border-color:#c93812;box-shadow:0 0 0 4px #f9dd9a66}
#the-details .fs-detail[open] .fs-plus:before,#the-details .fs-detail[open] .fs-plus:after{background:#fff}
.w4-meter{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--fs-muted)}
.w4-meter-bars{display:inline-flex;gap:4px}
.w4-meter-bars i{display:block;width:12px;height:6px;border-radius:2px;background:#d3d0dc;transition:background-color .4s ease,box-shadow .4s ease}
.w4-meter-bars i.w4-on{background:#e64925;box-shadow:0 0 6px #e6492580}
.w4-meter.w4-all .w4-meter-bars i{background:#f0a24a;box-shadow:0 0 6px #f9dd9a}
.w4-stamp{position:fixed;right:24px;bottom:24px;width:124px;z-index:80;pointer-events:none;transform:rotate(-9deg);filter:drop-shadow(0 6px 12px #07051a33);transition:opacity .8s ease}
.w4-stamp.w4-gone{opacity:0}
.w4-stamp svg{display:block;width:100%;height:auto}
.w4-sparks{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:4}
.w4-sparks i{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#f9dd9a;box-shadow:0 0 6px #f97352;animation:w4-spark .7s var(--fx-ease-out) forwards}
@keyframes w4-spark{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}

/* ── 2. #ownership: six labelled blocks, the way out in plain sight ── */
.fs-page #ownership .w4-own{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px;margin:26px 0 26px}
.w4-own-block{position:relative;padding-top:14px;border-top:1px solid #d9d3c8}
.fs-page #ownership .w4-own-block h3{display:flex;align-items:center;gap:9px;margin:0 0 8px;font:600 .74rem/1.4 var(--fx-sans);letter-spacing:.13em;text-transform:uppercase;color:var(--fs-navy)}
.w4-own-block h3::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:#8f8b9c;transition:background-color .8s ease,box-shadow .8s ease}
.w4-own-block.w4-in h3::before,html:not(.fx-js) .w4-own-block h3::before{background:#e64925;box-shadow:0 0 0 3px #e6492524,0 0 8px #f9735299}
.fs-page #ownership .w4-own-block p{margin:0;font-size:.93rem;line-height:1.62}
.w4-hl{font-weight:600;color:var(--fs-navy);background:linear-gradient(transparent 60%,#f9dd9a99 0);-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* a11y 2026-10-01: blocks unroll top to bottom with a soft mask instead of fading in, so text is never
   drawn at partial opacity (an axe pass mid-transition reads full-strength color, not a faded one). */
.w4-arm{transform:translateY(12px);-webkit-mask-image:linear-gradient(180deg,#000 44%,transparent 56%);mask-image:linear-gradient(180deg,#000 44%,transparent 56%);
  -webkit-mask-size:100% 250%;mask-size:100% 250%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 100%;mask-position:0 100%}
.w4-arm.w4-in{transform:none;-webkit-mask-position:0 0;mask-position:0 0;transition:-webkit-mask-position .8s var(--fx-ease-out),mask-position .8s var(--fx-ease-out),transform .7s var(--fx-ease-out)}
.fs-page #ownership a.w4-exit{display:inline-block;padding:10px 0;font-weight:600;border-radius:8px;transition:box-shadow .5s ease,background-color .5s ease}
.w4-exit::before{content:"";display:inline-block;vertical-align:-5px;width:20px;height:20px;margin-right:9px;background:currentColor;-webkit-mask:var(--w4-key) center/contain no-repeat;mask:var(--w4-key) center/contain no-repeat}
.fs-page #ownership a.w4-exit.w4-lit{background:#fbeec4;box-shadow:0 0 0 6px #fbeec4,0 0 26px 8px #f9dd9a}
:root{--w4-key:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7 7a5 5 0 1 0 0 10A5 5 0 0 0 7 7zm0 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4z'/%3E%3Cpath d='M12.6 10.8H23v2.4h-1.6v3.2H19v-3.2h-1.3v2.2h-2.4v-2.2h-2.7z'/%3E%3C/svg%3E");
  --w4-hammer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 4.5h14V3.2c0-.6.4-1 1-1h3c.6 0 1 .4 1 1v7.6c0 .6-.4 1-1 1h-3c-.6 0-1-.4-1-1V9.5h-12A1.5 1.5 0 0 1 1 8V6c0-.8.7-1.5 1.5-1.5zM8.2 9.4h3.6v11.2a1.8 1.8 0 0 1-3.6 0z'/%3E%3C/svg%3E")}
.w4-chest{position:relative;min-width:0}
.w4-chest img{display:block;width:100%;border-radius:16px;mix-blend-mode:multiply}
.w4-key{position:absolute;left:32%;top:38%;width:21%;z-index:2;pointer-events:none;filter:drop-shadow(0 0 10px #f9dd9acc) drop-shadow(0 4px 6px #14114233)}
.w4-key svg{display:block;width:100%;height:auto;overflow:visible}
.w4-key.w4-float{position:fixed;left:auto;top:auto;right:22px;bottom:22px;width:84px;z-index:80;transition:opacity .8s ease}
.w4-key.w4-gone{opacity:0}

/* ── 3. #start: the promise up front, the rest behind labels, the form as the finish line ── */
.w4-promise{margin:0 0 22px;padding:18px 20px;border:1px solid #efd9c9;border-radius:14px;background:#fff8f2;box-shadow:inset 3px 0 0 #e64925}
.w4-promise p{margin:0!important}
.w4-promise .w4-hl{font-weight:500}
.w4-more-group{margin:0 0 22px;border-bottom:1px solid var(--fs-line)}
.w4-more{border-top:1px solid var(--fs-line)}
.fs-page .w4-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;padding:10px 2px;font-weight:600;font-size:.92rem;color:var(--fs-navy)}
.w4-more summary::-webkit-details-marker{display:none}
.w4-more summary::after{content:"";flex:0 0 9px;height:9px;margin:0 6px -3px 0;border-right:2px solid #c93812;border-bottom:2px solid #c93812;transform:translateY(-4px) rotate(45deg);transition:transform .3s var(--fx-ease-out)}
.w4-more[open] summary::after{transform:translateY(1px) rotate(225deg)}
.w4-more summary:hover{color:#9d2b0e}
.fs-page .w4-more .fs-detail-body{max-width:none;padding:0 0 16px;font-size:.93rem}
.fs-page #fs-inquiry{position:relative;border-top:3px solid #c93812;box-shadow:0 18px 50px -12px #14114222}
.w4-heat{position:absolute;left:20px;right:20px;top:-3px;height:3px;border-radius:3px;pointer-events:none;background:linear-gradient(90deg,#f97352,#f9dd9a);box-shadow:0 0 10px #f9dd9ab3;transform-origin:left center;transform:scaleX(var(--w4p,0));transition:transform .7s var(--fx-ease-out)}
#fs-inquiry .fs-fields>div{position:relative}
.fs-page #fs-inquiry :is(input,select,textarea){transition:border-color .7s ease,box-shadow .7s ease,background-color .7s ease}
.fs-page #fs-inquiry :is(input,select,textarea):focus{border-color:#b45309;background-color:#fffdf9;box-shadow:0 0 0 4px #f9dd9a80,0 10px 26px -12px #e64925aa;transition-duration:.2s}
.fs-page #fs-inquiry :is(input,select,textarea):focus-visible{outline:3px solid #b45309;outline-offset:2px}
.fs-page #fs-inquiry [aria-invalid="true"]:focus{border-color:#ab2516}
.fs-page #fs-inquiry .w4-cool :is(input,textarea,select):not(:focus):not([aria-invalid="true"]){border-color:#4a6b8a;background-image:var(--w4-check);background-repeat:no-repeat;background-size:16px 16px;background-position:right 14px center}
.fs-page #fs-inquiry .w4-cool input{padding-right:40px}
.fs-page #fs-inquiry .w4-cool select:not(:focus){background-position:right 44px center}
.fs-page #fs-inquiry .w4-cool textarea:not(:focus){background-position:right 12px top 14px}
:root{--w4-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.2' fill='%23276a3c'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.w4-steam{position:absolute;right:16px;width:12px;height:18px;margin-top:-26px;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,#9fb4c8aa,transparent);animation:w4-steam 1.1s ease-out forwards}
@keyframes w4-steam{from{opacity:.9;transform:translateY(8px) scale(.6)}to{opacity:0;transform:translateY(-16px) scale(1.5)}}
.fs-page #fs-submit{position:relative;isolation:isolate}
.fs-page #fs-submit::before{content:"";flex:0 0 18px;height:18px;background:currentColor;-webkit-mask:var(--w4-hammer) center/contain no-repeat;mask:var(--w4-hammer) center/contain no-repeat;transform-origin:42% 92%;transform:scaleX(-1) rotate(35deg);transition:transform .3s var(--fx-ease-out)}
.fs-page #fs-submit:is(:hover,:focus-visible):not(:disabled)::before{transform:scaleX(-1) rotate(-28deg)}
.fs-page #fs-submit::after{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px #f9dd9a,0 0 24px 3px #f97352aa;opacity:0;transition:opacity .8s ease}
.fs-page #fs-inquiry.w4-ready #fs-submit::after{opacity:1}
.fs-page #fs-submit.w4-strike::before{animation:w4-strike .45s var(--fx-ease-forge)}
.fs-page #fs-submit.w4-strike{animation:w4-anvil .45s ease}
@keyframes w4-strike{0%{transform:scaleX(-1) rotate(-34deg)}52%{transform:scaleX(-1) rotate(62deg)}70%{transform:scaleX(-1) rotate(46deg)}100%{transform:scaleX(-1) rotate(35deg)}}
@keyframes w4-anvil{0%,45%{transform:none}55%{transform:scale(.975,.955)}75%{transform:scale(1.008)}100%{transform:none}}

/* ── motion, small screens, print ── */
@media (prefers-reduced-motion:no-preference){
  #the-details .fs-detail[open]>.fs-detail-body>*{animation:w4-drop .5s var(--fx-ease-out) both}
  #the-details .fs-detail[open]>.fs-detail-body>:nth-child(2){animation-delay:.05s}
  #the-details .fs-detail[open]>.fs-detail-body>:nth-child(n+3){animation-delay:.1s}
  .w4-stamp.w4-press{animation:w4-press .6s var(--fx-ease-forge) both}
  .w4-key.w4-rise{animation:w4-rise 1.3s var(--fx-ease-out) both}
  .fs-page #fs-inquiry.w4-ready.w4-ignite #fs-submit::after{animation:w4-ignite 1.4s ease-out}
}
@keyframes w4-drop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes w4-press{0%{opacity:0;transform:rotate(-24deg) scale(1.7)}55%{opacity:1;transform:rotate(-9deg) scale(.9)}78%{transform:rotate(-9deg) scale(1.04)}100%{opacity:1;transform:rotate(-9deg) scale(1)}}
@keyframes w4-rise{0%{opacity:0;transform:translateY(60%) rotate(0)}45%{opacity:1;transform:translateY(-8%) rotate(0)}70%{transform:translateY(0) rotate(0)}85%{transform:rotate(-100deg)}100%{opacity:1;transform:rotate(-90deg)}}
@keyframes w4-ignite{0%{opacity:0}30%{opacity:1}60%{opacity:.55}100%{opacity:1}}
.w4-key:not(.w4-float){transform:rotate(-90deg)}
@media (prefers-reduced-motion:reduce){
  #the-details .fs-detail,.w4-meter-bars i,.w4-own-block h3::before,.fs-page #fs-inquiry :is(input,select,textarea),.w4-heat,.fs-page #fs-submit::before,.fs-page #fs-submit::after{transition:none}
  .w4-arm{transform:none;-webkit-mask-image:none;mask-image:none}
  .w4-steam,.w4-sparks{display:none}
  .fs-page #fs-submit.w4-strike,.fs-page #fs-submit.w4-strike::before{animation:none}
}
@media (max-width:700px){
  #the-details .fs-detail summary{gap:12px;padding-left:8px}
  #the-details .fs-detail-body{padding-left:8px}
  .fs-page #ownership .w4-own{grid-template-columns:1fr;gap:18px;margin:20px 0 18px}
  .w4-chest{max-width:200px;margin:auto}
  .w4-stamp{width:104px;right:16px;bottom:16px}
}
@media print{
  .w4-arm{opacity:1!important;transform:none!important;-webkit-mask-image:none!important;mask-image:none!important}
  .w4-meter,.w4-stamp,.w4-key,.w4-heat,.w4-sparks,.w4-steam{display:none!important}
  .w4-more::details-content{content-visibility:visible!important;display:block!important}
  .w4-more>*:not(summary){display:block!important}
  .fs-page #ownership .w4-own{display:block}
  .w4-own-block{margin-bottom:10px}
  .w4-promise{box-shadow:none;background:none}
}