/* Scoped chapter experience; existing product and inquiry pages are untouched. */
.experience-page { background:#04060a; color:#f2f2f0; }
.experience-page .preview-banner[hidden] { display:none; }
.experience-shell { --exp-orange:#ff7916; --exp-line:#353a40; --exp-muted:#b5bac1; display:grid; grid-template-columns:minmax(190px, 225px) minmax(0,1fr); max-width:1600px; margin:0 auto; background:#080a0d; border-inline:1px solid #ffffff0d; }
.experience-contents { position:sticky; top:0; align-self:start; display:grid; gap:2px; padding:36px 16px 30px 24px; min-height:650px; background:#090b0e; border-right:1px solid #ffffff18; }
.contents-label { margin:0 0 22px 12px; color:#8d929a; font-size:10px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; }
.experience-contents a { display:flex; align-items:center; gap:13px; min-height:45px; padding:11px 10px 11px 13px; border-left:2px solid transparent; color:#b4b9c0; font-size:13px; font-weight:650; text-decoration:none; line-height:1.3; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.experience-contents a span { color:var(--exp-orange); font-size:10px; letter-spacing:.04em; font-weight:800; }
.experience-contents a:hover { color:#fff; background:#ffffff0a; }
.experience-contents a[aria-current="step"] { color:#fff; border-left-color:var(--exp-orange); background:linear-gradient(90deg,#ff791625,transparent); }
.contents-foot { align-self:end; display:flex; align-items:center; gap:9px; margin:100px 0 0 12px; color:#8c929a; font-size:10px; line-height:1.5; letter-spacing:.08em; text-transform:uppercase; }
.contents-foot span { flex:none; width:6px; height:6px; border-radius:50%; background:var(--exp-orange); box-shadow:0 0 12px var(--exp-orange); }
.experience-main { min-width:0; }
.experience-stage { position:relative; isolation:isolate; overflow:hidden; min-height:650px; display:block; background:radial-gradient(circle at 78% 43%,#a94b0c23,transparent 37%),linear-gradient(150deg,#11151b,#07090c 55%,#0b0d10); }
.experience-shell.is-enhanced .experience-stage { display:flex; align-items:center; }
.experience-stage::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.33; background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:linear-gradient(90deg,transparent 13%,#000); mask-image:linear-gradient(90deg,transparent 13%,#000); }
.experience-stage::after { content:""; position:absolute; z-index:-1; width:min(53vw,650px); height:min(53vw,650px); right:-21%; top:3%; border:1px solid #ff79162e; border-radius:50%; box-shadow:0 0 0 75px #ff791608,0 0 0 145px #ff791605; pointer-events:none; }
.experience-circuit { position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
.experience-circuit::before { content:""; position:absolute; right:12%; top:18%; width:7px; height:7px; border-radius:50%; background:var(--exp-orange); box-shadow:0 0 16px var(--exp-orange),0 0 35px #ff791655; }
.experience-stage[data-trace-direction="left"] { --trace-left:-44%; --trace-top:-10%; }
.experience-stage[data-trace-direction="top"] { --trace-left:85%; --trace-top:-250px; }
.experience-stage[data-trace-direction="right"] { --trace-left:105%; --trace-top:110%; }
.experience-stage[data-trace-direction="bottom"] { --trace-left:16%; --trace-top:calc(100% + 250px); }
.experience-circuit::after { content:""; position:absolute; left:var(--trace-left,-44%); top:var(--trace-top,26%); width:44%; height:2px; opacity:0; background:var(--trace-gradient,linear-gradient(90deg,transparent,var(--exp-orange) 70%,#fff6dc)); filter:drop-shadow(0 0 7px var(--exp-orange)); transform:rotate(var(--trace-angle,14deg)) translateX(0); }
.experience-stage.is-transitioning .experience-circuit::after { animation:experience-trace .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes experience-trace { 0%{opacity:0;transform:rotate(var(--trace-angle,14deg)) translateX(0)} 14%{opacity:1} 82%{opacity:1} 100%{opacity:0;transform:rotate(var(--trace-angle,14deg)) translateX(var(--trace-distance,1200px))} }
.experience-scene { width:100%; min-height:650px; padding:clamp(35px,5vw,76px); position:relative; display:flex; flex-direction:column; justify-content:center; border-bottom:1px solid #ffffff18; }
.experience-shell.is-enhanced .experience-scene { border-bottom:0; animation:experience-arrive .55s cubic-bezier(.2,.8,.2,1) both; }
.experience-shell.is-enhanced .experience-scene:not(.is-active) { display:none; }
@keyframes experience-arrive { from{opacity:.35;transform:translateY(18px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} }
.scene-copy { position:relative; z-index:1; max-width:630px; }
.scene-kicker { display:flex; align-items:center; gap:10px; color:var(--exp-orange); font-size:11px; font-weight:800; letter-spacing:.21em; text-transform:uppercase; line-height:1.5; margin:0 0 24px; }
.scene-kicker::before { content:""; display:block; width:25px; height:1px; flex:none; background:var(--exp-orange); box-shadow:0 0 10px var(--exp-orange); }
.experience-scene h1,.experience-scene h2 { max-width:760px; margin:0 0 25px; color:#f2f2f0; font-family:Inter,Arial,sans-serif; font-size:clamp(39px,5.5vw,76px); font-weight:800; letter-spacing:-.062em; line-height:1.04; text-transform:uppercase; }
.experience-scene h1 em,.experience-scene h2 em { color:var(--exp-orange); font-style:normal; }
.scene-lede { max-width:600px; margin:0 0 30px; color:#c2c7cd; font-size:clamp(15px,1.5vw,18px); line-height:1.65; }
.scene-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.scene-button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:50px; padding:13px 20px; border:1px solid transparent; border-radius:7px; font-size:13px; font-weight:800; line-height:1.3; text-decoration:none; transition:transform .25s ease,background .25s ease,box-shadow .25s ease; }
.scene-button-primary { color:#160b02; background:var(--exp-orange); box-shadow:0 8px 30px #ff791629; }
.scene-button-primary:hover { color:#160b02; transform:translateY(-3px); box-shadow:0 9px 34px #ff791650; }
.scene-button-outline { color:#f2f2f0; background:#ff791608; border-color:#ad531ea8; }
.scene-button-outline:hover { color:#fff; background:#ff79161d; border-color:var(--exp-orange); }
.scene-aside { margin:38px 0 0; color:#8f969d; font-size:11px; letter-spacing:.11em; text-transform:uppercase; }
.experience-art { position:absolute; right:-4%; top:50%; width:min(49%,470px); height:auto; transform:translateY(-50%); opacity:.57; mix-blend-mode:screen; -webkit-mask-image:radial-gradient(circle,#000 44%,transparent 75%); mask-image:radial-gradient(circle,#000 44%,transparent 75%); pointer-events:none; }
.path-grid,.work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:850px; }
.path-choice { min-height:195px; display:flex; flex-direction:column; justify-content:space-between; padding:24px; background:linear-gradient(145deg,#1a1e24,#101318); border:1px solid var(--exp-line); border-radius:10px; color:#f5f5f3; text-decoration:none; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.path-choice:hover { color:#fff; transform:translateY(-5px); border-color:var(--exp-orange); box-shadow:0 12px 35px #ff791619; }
.path-symbol { color:var(--exp-orange); font-size:29px; line-height:1; }
.path-choice strong { display:block; margin:16px 0 7px; font-size:21px; letter-spacing:-.02em; }
.path-choice strong span { color:var(--exp-orange); }
.path-choice small { color:#adb3ba; font-size:13px; line-height:1.5; }
.possibilities-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; max-width:940px; }
.possibilities-grid article { min-height:180px; padding:20px 18px 23px; border-top:2px solid var(--exp-orange); background:linear-gradient(180deg,#1a1e23,#101319); }
.possibilities-grid article span { display:block; margin-bottom:23px; color:var(--exp-orange); font-size:10px; font-weight:800; letter-spacing:.13em; }
.possibilities-grid h3 { margin:0 0 10px; color:#f5f5f3; font-size:17px; line-height:1.25; }
.possibilities-grid p { color:#b7bdc4; font-size:12px; line-height:1.5; }
.experience-scene [data-audience] + [data-audience] { margin-top:40px; }
.experience-shell.is-enhanced .experience-scene [data-audience] + [data-audience] { margin-top:0; }
.audience-switch { display:none; }
.experience-shell.is-enhanced .audience-switch { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.audience-switch span { margin-right:7px; color:#aeb4bb; font-size:11px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.audience-switch button { min-height:34px; padding:7px 13px; border:1px solid #535a63; border-radius:4px; background:#ffffff08; color:#ccd1d7; font-size:11px; font-weight:750; cursor:pointer; }
.audience-switch button:hover { border-color:var(--exp-orange); color:#fff; }
.audience-switch button[aria-pressed="true"] { border-color:var(--exp-orange); background:#ff791625; color:#fff; }
.work-grid { max-width:770px; }
.work-item { position:relative; display:block; min-height:195px; padding:23px; background:#15191f; border:1px solid #363b42; color:#f2f2f0; text-decoration:none; }
.work-item::after { content:"↗"; position:absolute; top:16px; right:18px; color:var(--exp-orange); font-size:22px; }
.work-item span { display:block; color:var(--exp-orange); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.work-item h3 { margin:35px 0 6px; font-size:25px; }
.work-item p { max-width:285px; color:#b7bdc4; font-size:12px; line-height:1.5; }
.work-item strong { display:block; color:#f2f2f0; font-size:11px; margin-top:18px; }
a.work-item:hover { border-color:var(--exp-orange); background:#1b2026; }
.pricing-callout { max-width:740px; padding:26px 30px; margin-top:4px; border-left:3px solid var(--exp-orange); background:linear-gradient(90deg,#ff791625,#ff791605); }
.pricing-callout strong { display:block; font-size:clamp(22px,2.5vw,31px); font-weight:800; letter-spacing:-.035em; line-height:1.25; }
.pricing-callout p { margin-top:13px; color:#c5c9cd; font-size:13px; line-height:1.55; }
.pricing-note { max-width:700px; margin:18px 0 0; color:#aeb4bb; font-size:12px; line-height:1.55; }
.pricing-link { margin-top:23px; }
.experience-controls { display:none; min-height:61px; padding:0 29px; align-items:center; justify-content:space-between; gap:15px; background:#0c0f13; border-top:1px solid #ffffff1a; }
.experience-shell.is-enhanced .experience-controls { display:flex; }
.experience-controls button { min-width:90px; min-height:44px; padding:9px 0; border:0; background:transparent; color:#f2f2f0; font-size:13px; font-weight:800; cursor:pointer; }
.experience-controls button:hover { color:var(--exp-orange); }
.experience-controls button:disabled { color:#777d85; cursor:default; }
.experience-controls span { color:var(--exp-orange); font-size:11px; font-weight:800; letter-spacing:.18em; }
.experience-page a:focus-visible,.experience-page button:focus-visible { outline:3px solid #ffb166; outline-offset:4px; }
@media(max-width:900px) {
  .experience-shell { grid-template-columns:170px minmax(0,1fr); }
  .experience-contents { padding-inline:11px; }
  .experience-scene { padding:36px; }
  .experience-art { right:-17%; width:65%; opacity:.4; }
}
@media(max-width:760px) {
  .experience-shell { display:block; }
  .experience-contents { position:static; display:flex; flex-wrap:wrap; gap:2px 5px; min-height:0; padding:10px 15px; border-right:0; border-bottom:1px solid #ffffff20; }
  .contents-label,.contents-foot { display:none; }
  .experience-contents a { min-height:39px; padding:8px; border-left:0; border-bottom:2px solid transparent; font-size:12px; }
  .experience-contents a[aria-current="step"] { border-bottom-color:var(--exp-orange); }
  .experience-stage { min-height:610px; }
  .experience-scene { min-height:610px; padding:39px 6%; }
  .experience-art { right:-21%; width:78%; opacity:.25; }
  .experience-scene h1,.experience-scene h2 { font-size:clamp(38px,7.6vw,62px); }
}
@media(max-width:560px) {
  .experience-stage,.experience-scene { min-height:670px; }
  .experience-scene { padding:35px 6%; }
  .experience-scene h1,.experience-scene h2 { font-size:clamp(35px,10vw,48px); }
  .scene-lede { font-size:15px; }
  .path-grid,.work-grid { grid-template-columns:1fr; gap:10px; }
  .path-choice { min-height:145px; padding:17px; }
  .path-choice strong { margin-top:10px; }
  .possibilities-grid { grid-template-columns:1fr; gap:9px; }
  .possibilities-grid article { min-height:0; padding:12px 15px; }
  .possibilities-grid article span { margin-bottom:8px; }
  .possibilities-grid h3 { margin-bottom:5px; }
  .work-item { min-height:0; padding:18px; }
  .work-item h3 { margin-top:15px; }
  .work-item strong { margin-top:10px; }
  .pricing-callout { padding:18px; }
  .pricing-callout strong { font-size:22px; }
  .audience-switch { gap:5px; }
  .audience-switch span { width:100%; }
  .experience-controls { padding-inline:15px; }
  .experience-controls button { min-width:65px; }
}
@media(prefers-reduced-motion:reduce) {
  .experience-shell *, .experience-shell *::before, .experience-shell *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
