/* ===== Layout play: About, Why JSI, FAQ, Scorecard. Wording unchanged. ===== */

/* ---------- ABOUT ---------- */
.ab-story{padding-top:3.5rem}
.ab-story-grid{grid-template-columns:minmax(300px,.8fr) 1.2fr;gap:4.5rem}
.ab-founder{border-radius:30px;padding:2.6rem 2.4rem;background:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,.015));box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18)}
.ab-founder h2{font-size:clamp(2.2rem,3.6vw,3.1rem)}
.ab-story-main{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(255,255,255,.18)}
.ab-block{display:grid;grid-template-columns:clamp(70px,9vw,120px) 1fr;column-gap:1.6rem;align-items:start;padding:2.4rem 0;border:0;border-bottom:1px solid rgba(255,255,255,.18);border-radius:0;background:none}
.ab-block .ab-n{position:static;font:200 clamp(3.4rem,6vw,5.4rem)/.9 'Urbanist',sans-serif;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55);letter-spacing:-.03em}
.ab-block h3{grid-column:2;font-size:1.7rem;margin-bottom:.9rem}
.ab-block p{grid-column:2;font-size:1.08rem;color:#c2c2c2;max-width:62ch}
.ab-quote{position:relative;margin:4.2rem 0 0;padding:3.4rem 0;border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
.ab-quote::before{content:"\201C";position:absolute;left:50%;top:-3.2rem;transform:translateX(-50%);font:800 5.5rem/1 'Urbanist',sans-serif;color:rgba(255,255,255,.85);background:none;padding:0}
.ab-quote p{max-width:980px}
.ab-process{padding-top:4rem}
.ab-steps{gap:1.2rem;text-align:left;align-items:stretch}
.ab-line{display:none}
.ab-step{align-items:flex-start;gap:.5rem;padding:2rem 1.7rem 2.1rem;border-radius:26px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01));transition:transform .25s,border-color .25s,background .25s}
.ab-step:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.5);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02))}
.ab-step::after{content:"";position:absolute;left:1.7rem;right:1.7rem;top:0;height:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));opacity:.7}
.ab-orb{width:84px;height:84px;margin-bottom:.4rem}
.ab-orb svg{width:34px;height:34px}
.ab-step h3{margin:1rem 0 0;font-size:1.45rem}
.ab-step p{max-width:none;font-size:.98rem;color:#cfcfcf}
.ab-cta-card{border-radius:36px;padding:4rem 2rem;background:radial-gradient(700px 320px at 50% 0,rgba(255,255,255,.14),transparent 70%),linear-gradient(160deg,#151515,#070707)}
@media(max-width:900px){
  .ab-story-grid{grid-template-columns:1fr;gap:2.4rem}
  .ab-block{grid-template-columns:70px 1fr;padding:2rem 0}
  .ab-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .ab-block{grid-template-columns:1fr}.ab-block .ab-n,.ab-block h3,.ab-block p{grid-column:1}
  .ab-block .ab-n{font-size:3.4rem;margin-bottom:.6rem}
  .ab-steps{grid-template-columns:1fr}
  .ab-step{display:grid;grid-template-columns:84px 1fr;column-gap:1.2rem;align-items:start}
  .ab-orb{grid-row:1/4}.ab-step h3{margin:.3rem 0 0}.ab-step::after{display:none}
}

/* ---------- WHY JSI ---------- */
.wy-bento{grid-template-columns:repeat(12,1fr);gap:1.2rem}
.wy-feature{grid-column:span 7;grid-row:span 2;padding:3rem;min-height:520px}
.wy-feature h3{font-size:clamp(2.2rem,3.8vw,3.4rem)}
.wy-feature p{font-size:1.18rem}
.wy-bento>.wy-card:nth-child(2),.wy-bento>.wy-card:nth-child(3){grid-column:span 5}
.wy-bento>.wy-card:nth-child(n+4){grid-column:span 4}
.wy-card{border-radius:28px;padding:2.2rem;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.012)),#0b0b0b}
.wy-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);opacity:.6}
.wy-card::after{content:"";position:absolute;width:260px;height:260px;right:-90px;bottom:-110px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%);transition:transform .4s,opacity .4s;opacity:.6;pointer-events:none}
.wy-card:hover::after{transform:scale(1.3);opacity:1}
.wy-bento>.wy-card:not(.wy-feature){display:grid;grid-template-columns:auto 1fr;column-gap:1.3rem;row-gap:.6rem;align-content:start}
.wy-bento>.wy-card:not(.wy-feature) .wy-ico{grid-row:1/3}
.wy-bento>.wy-card:nth-child(n+4):not(.wy-feature){grid-template-columns:1fr}
.wy-bento>.wy-card:nth-child(n+4):not(.wy-feature) .wy-ico{grid-row:auto}
.wy-bento>.wy-card:not(.wy-feature) h3{align-self:center}
@media(max-width:900px){
  .wy-bento{grid-template-columns:1fr 1fr}
  .wy-feature{grid-column:1/-1;grid-row:auto;min-height:0}
  .wy-bento>.wy-card:nth-child(2),.wy-bento>.wy-card:nth-child(3),.wy-bento>.wy-card:nth-child(n+4){grid-column:span 1}
}
@media(max-width:600px){
  .wy-bento{grid-template-columns:1fr}
  .wy-bento>.wy-card:nth-child(2),.wy-bento>.wy-card:nth-child(3),.wy-bento>.wy-card:nth-child(n+4){grid-column:1}
  .wy-feature{padding:2rem}
}
.wy-final-card{border-radius:36px;padding:4rem 2rem}

/* ---------- FAQ ---------- */
.fq .wrap{max-width:1040px}
.fq-layout{grid-template-columns:1fr;gap:1.6rem}
.fq-nav{position:sticky;top:78px;z-index:30;display:flex;overflow-x:auto;gap:.5rem;padding:.7rem;border-radius:999px;background:rgba(8,8,8,.78);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 50px rgba(0,0,0,.5);scrollbar-width:none}
.fq-nav::-webkit-scrollbar{display:none}
.fq-nav .t{display:none}
.fq-nav a{flex:none;white-space:nowrap;padding:.55rem 1rem;border:1px solid rgba(255,255,255,.14);border-radius:999px;gap:.55rem}
.fq-nav a.ask{display:flex;margin:0 0 0 auto;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.55rem 1rem}
.fq-main{display:grid;gap:1.4rem}
.faq-card{display:grid;grid-template-columns:230px 1fr;column-gap:2.4rem;padding:2rem 2.2rem 2rem 2rem;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.01)),#0a0a0a}
.faq-card{grid-auto-rows:min-content;align-content:start}
.fq .faq-card .faq-cat{display:block;height:auto;grid-column:1;grid-row:1/span 40;align-self:start;position:static;font:800 1.45rem/1.15 'Urbanist',sans-serif;color:#fff;padding:.2rem 0 1rem;margin:0;border-bottom:0;max-width:210px}
.faq-card .faq-cat::after{content:"";display:block;width:34px;height:2px;margin-top:1rem;background:linear-gradient(90deg,#fff,transparent)}
.faq-card .faq-item{grid-column:2}
.faq-card .faq-item summary{padding-top:1.05rem;padding-bottom:1.05rem}
.fq-search input{padding-top:1.2rem;padding-bottom:1.2rem;font-size:1.05rem;background:rgba(255,255,255,.06)}
.fq-search{max-width:680px}
.fq-cta{border-radius:34px;padding:3.6rem 2rem}
@media(max-width:820px){
  .fq-nav{top:70px;border-radius:20px}
  .faq-card{grid-template-columns:1fr;padding:1.6rem 1.3rem}
  .faq-card .faq-cat{grid-row:auto;position:static;max-width:none;padding-bottom:.4rem}
  .faq-card .faq-item{grid-column:1}
}

/* ---------- SCORECARD ---------- */
.sc-chips{gap:.8rem;margin-top:1.6rem}
.sc-chips span{padding:.75rem 1.3rem;font-size:.95rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.sc-card{max-width:1040px;padding:2.6rem 2.8rem 2.2rem;border-radius:36px;box-shadow:0 50px 120px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.26)}
.sc-card .sc-progress{height:8px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.sc-card .sc-progress span{border-radius:999px;background:linear-gradient(90deg,#8d8d8d,#fff);box-shadow:0 0 18px rgba(255,255,255,.5)}
.sc-card .sc-meta{margin-top:1rem;letter-spacing:.14em}
.sc-card h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.12;margin:1.4rem 0 1.8rem;max-width:30ch}
.sc-card .sc-options{gap:1rem}
.sc-card .sc-option{min-height:96px;padding:1.3rem 1.5rem;border-radius:22px;font-size:1.15rem;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.2);transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.sc-card .sc-option:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.7);background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04));box-shadow:0 18px 40px rgba(0,0,0,.45)}
.sc-card .sc-why{margin-top:1.4rem;padding:1rem 1.2rem;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.sc-card .sc-controls{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14)}
.ity-final .wrap{max-width:900px;padding:3.6rem 2rem;border-radius:36px;border:1px solid rgba(255,255,255,.2);background:radial-gradient(700px 300px at 50% 0,rgba(255,255,255,.1),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.ity-final-actions{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}
@media(max-width:700px){
  .sc-card{padding:1.6rem 1.3rem}
  .sc-card .sc-option{min-height:72px}
  .ity-final .wrap{padding:2.4rem 1.2rem;border-radius:26px}
}

@media(max-width:600px){
  .wy-bento>.wy-card:not(.wy-feature){grid-template-columns:1fr}
  .wy-bento>.wy-card:not(.wy-feature) .wy-ico{grid-row:auto}
  .sc-card .sc-meta{letter-spacing:.08em;font-size:.7rem}
}


/* ===== BLEND: Why JSI + Scorecard sit directly on the background (no boxes) ===== */
/* Why JSI */
.wy-bento{gap:0;border-top:0}
.wy-card,.wy-feature{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none!important}
.wy-card::after,.wy-feature::after{display:none}
.wy-card::before{left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.08));opacity:1}
.wy-card{padding:2.2rem 2rem 2.4rem 0}
.wy-card:hover h3{color:#fff;text-shadow:0 0 24px rgba(255,255,255,.35)}
.wy-bento>.wy-card{margin-right:2rem}
.wy-bento>.wy-card:nth-child(3),.wy-bento>.wy-card:nth-child(6){margin-right:0}
.wy-feature{padding:3rem 3rem 3rem 0;min-height:480px}
.wy-feature .wy-ico{left:0}
.wy-ico{background:rgba(255,255,255,.04);box-shadow:none}
.wy-hero h1,.wy-hero p,.wy-card h3,.wy-card p{text-shadow:0 2px 24px rgba(0,0,0,.65)}
.wy-final .wy-final-card{background:none!important;border:0!important;box-shadow:none!important;border-top:1px solid rgba(255,255,255,.2)!important;border-radius:0!important;padding:4rem 1rem}
@media(max-width:900px){.wy-bento>.wy-card{margin-right:0}.wy-card{padding-right:0}}

/* Scorecard */
.sc-card{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:1rem 0 0!important;border-radius:0}
.sc-card .sc-progress{background:rgba(255,255,255,.14)}
.sc-card h2,.sc-card .sc-meta,.sc-card .sc-why{text-shadow:0 2px 26px rgba(0,0,0,.75)}
.sc-card .sc-option{background:transparent!important;border:1px solid rgba(255,255,255,.34)!important;box-shadow:none}
.sc-card .sc-option:hover:not(.is-selected){background:rgba(255,255,255,.08)!important;border-color:#fff!important;box-shadow:none}
.sc-card .sc-option.is-selected{background:#fff!important;color:#050505}
.sc-card .sc-why{background:none;border:0;border-left:2px solid rgba(255,255,255,.4);border-radius:0;padding:.3rem 0 .3rem 1rem}
.sc-card .sc-controls{border-top:1px solid rgba(255,255,255,.2)}
.ity-final .wrap{background:none!important;border:0!important;border-radius:0!important;border-top:1px solid rgba(255,255,255,.2)!important;box-shadow:none!important}
.sc-chips span{background:transparent;box-shadow:none}


/* ===== BACKGROUNDS: swap the file name to try another one ===== */
.about-page{--page-photo:url('/images/bg-options/05-metal-1.jpg');--page-photo-overlay:linear-gradient(rgba(5,5,5,.12),rgba(5,5,5,.3));--page-photo-position:center}
.why-jsi-page{--page-photo:url('/images/bg-options/01-beams-4.jpg');--page-photo-overlay:linear-gradient(rgba(5,5,5,.36),rgba(5,5,5,.62));--page-photo-position:center}
.ity-page{--page-photo:url('/images/bg-options/02-glass-1.jpg');--page-photo-overlay:linear-gradient(rgba(5,5,5,.36),rgba(5,5,5,.62));--page-photo-position:center}
@media(max-width:700px){
  .about-page{--page-photo:url('/images/bg-options/05-metal-1.jpg');--page-photo-position:center;--page-photo-overlay:linear-gradient(rgba(5,5,5,.2),rgba(5,5,5,.4))}
  .why-jsi-page{--page-photo:url('/images/bg-options/01-beams-4.jpg');--page-photo-overlay:linear-gradient(rgba(5,5,5,.2),rgba(5,5,5,.4))}
  .ity-page{--page-photo:url('/images/bg-options/02-glass-1.jpg');--page-photo-overlay:linear-gradient(rgba(5,5,5,.2),rgba(5,5,5,.4))}
}

/* ===== ABOUT hero: drop the rings + logo mark, give the headline the room ===== */
.ab-hero{padding-bottom:1rem}


/* ===== Hero backgrounds picked from the JSI Hero Backgrounds folder ===== */
.why-jsi-page{--page-photo:url('/images/bg-hero/angular-vertex.jpg');--page-photo-overlay:linear-gradient(rgba(5,5,5,.12),rgba(5,5,5,.3));--page-photo-position:center}
.ity-page{--page-photo:url('/images/bg-hero/crossing-ribbons.jpg');--page-photo-overlay:linear-gradient(rgba(5,5,5,.1),rgba(5,5,5,.28));--page-photo-position:center}
.faq-page,body.faq-page{--page-photo:url('/images/bg-hero/folded-fins.jpg');--page-photo-overlay:linear-gradient(rgba(5,5,5,.05),rgba(5,5,5,.22));--page-photo-position:center}
@media(max-width:700px){
  .why-jsi-page{--page-photo:url('/images/bg-hero/angular-vertex.jpg');--page-photo-position:62% center;--page-photo-overlay:linear-gradient(rgba(5,5,5,.2),rgba(5,5,5,.4))}
  .ity-page{--page-photo:url('/images/bg-hero/crossing-ribbons.jpg');--page-photo-position:60% center;--page-photo-overlay:linear-gradient(rgba(5,5,5,.2),rgba(5,5,5,.4))}
  .faq-page,body.faq-page{--page-photo:url('/images/bg-hero/folded-fins.jpg');--page-photo-position:72% center;--page-photo-overlay:linear-gradient(rgba(5,5,5,.15),rgba(5,5,5,.32))}
}


/* ===== ABOUT hero: new background + logo as a framed plaque (no rings) ===== */
.about-page{--page-photo:url('/images/bg-hero/diagonal-ridge.jpg')!important;--page-photo-overlay:linear-gradient(rgba(5,5,5,.1),rgba(5,5,5,.3))!important;--page-photo-position:center}
.ab-hero-grid{grid-template-columns:1.2fr .8fr!important;gap:3rem;align-items:center}
.ab-hero-mark{display:grid!important;aspect-ratio:auto;max-width:430px;width:100%;justify-self:end;place-items:center;padding:3.2rem 2.4rem;position:relative}
.ab-hero-mark .ring{display:none}
.ab-hero-mark::before,.ab-hero-mark::after{content:"";position:absolute;width:56px;height:56px;border:2px solid rgba(255,255,255,.75);pointer-events:none}
.ab-hero-mark::before{left:0;top:0;border-right:0;border-bottom:0}
.ab-hero-mark::after{right:0;bottom:0;border-left:0;border-top:0}
.ab-hero-mark .core{width:100%;aspect-ratio:auto;border-radius:0;border:0;background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent 75%);box-shadow:none;padding:1.4rem 0;position:relative}
.ab-hero-mark .core::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
.ab-hero-mark .core::after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}
.ab-hero-mark .core img{width:78%;max-width:300px;filter:drop-shadow(0 12px 40px rgba(0,0,0,.55))}
@media(max-width:900px){
  .ab-hero-grid{grid-template-columns:1fr!important}
  .ab-hero-mark{justify-self:center;max-width:320px;margin-top:1.4rem}
}