/* Clear colors, small coding worlds, and room for the person behind them.
   Intentionally last: no photographic tint, fog layer, or grey image filter. */
.experience-page{--experience-accent:#b8decd;background:#08151d}
.experience-page .site-header{background:#08151d;backdrop-filter:none}
.experience-page .intro-section{background:#08151d;grid-template-columns:1.1fr 1fr;gap:0 5vw;padding-top:8rem;min-height:880px}
.experience-page .intro-world{background:none}
.experience-page .experience-particles{opacity:.32}
.experience-page .intro-copy{padding:2rem 0 3rem}
.experience-page .intro-copy h1{font-size:clamp(4rem,7.4vw,8.6rem);line-height:.95;letter-spacing:-.055em}
.experience-page .intro-name-line:last-child{color:#b8decd}
.experience-page .intro-visual{display:grid;gap:1.25rem;width:100%;max-width:530px;padding:1rem 0 2rem;transform:none;justify-self:end}
.experience-page .intro-portrait{width:82%;max-width:none;justify-self:end;border:1px solid #bdd6cc38;border-radius:18px;clip-path:none;transform:none;box-shadow:none}
.experience-page .intro-portrait>img{height:320px;filter:none;object-position:center 23%}
.experience-page .intro-portrait figcaption{background:#10252f;padding:.9rem 1.2rem;font-size:.75rem}
.coding-scene{position:relative;min-width:0;background:#08151d;border:1px solid #bdd6cc25;border-radius:18px;overflow:hidden}
.coding-scene>img{display:block;width:100%;height:250px;object-fit:cover;object-position:70% 55%;filter:none}
.coding-scene>span{display:flex;align-items:center;gap:.6rem;padding:.8rem 1.1rem;background:#10252f;color:#dbeae2;font:.65rem var(--mono)}
.coding-scene>span>i{display:block;width:6px;height:6px;flex-shrink:0;border-radius:50%;background:#b8decd}
.experience-page .studio-services{background:#0c1c26}
.experience-page .studio-service-grid{gap:1.6rem}
.experience-page .studio-service{background:#10252f;border:1px solid #bed8cd26;border-radius:16px;overflow:hidden;padding:0 1.4rem 1.4rem}
.experience-page .studio-service:hover,.experience-page .studio-service:focus-within{background:#10252f;border-color:#b8decd88;transform:translateY(-4px)}
.experience-page .service-landscape{height:auto;aspect-ratio:3/2;border-radius:0;margin-bottom:1.5rem}
.experience-page .service-landscape>img,.experience-page .studio-service:hover .service-landscape>img{filter:none;object-fit:contain;object-position:center;transform:none}
.experience-page .service-landscape::after,.experience-page .service-landscape>span{display:none}
.experience-page .service-index{font-size:.65rem;line-height:1.6}
.experience-page .studio-service ul{font-size:.83rem}
.experience-page .studio-service>a{font-size:.83rem}
.experience-page .engineering-scene{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:3rem 4vw;min-height:0;padding-block:6rem;background:#08151d}
.experience-page .engineering-copy{grid-column:1;grid-row:1;max-width:none}
.experience-page .engineering-copy h2{font-size:clamp(2.2rem,3.2vw,3.7rem)}
.experience-page .engineering-world{position:relative;inset:auto;grid-column:2;grid-row:1;z-index:0;width:100%;overflow:visible;min-width:0}
.experience-page .engineering-world>img{display:block;position:relative;inset:auto;width:100%;height:auto;object-fit:contain;opacity:1;filter:none;transform:none;animation:none}
.experience-page .engineering-world::after{display:none}
.experience-page .engineering-diagram{grid-column:1/-1;grid-row:2;width:100%;max-width:none;margin-top:0}
.experience-page .diagram-node{background:#10252f;border-radius:12px;backdrop-filter:none;box-shadow:none}
.experience-page .studio-about{background:#f5f7f3}
.experience-page .studio-process{background:#0c1c26}
.experience-page .studio-projects{background:#08151d}
.experience-page .project-editorial{min-height:0;padding:0;display:flex;border-radius:18px;overflow:hidden;background:#10252f;isolation:auto;gap:0}
.experience-page .project-editorial>img{position:relative;inset:auto;z-index:auto;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;filter:none}
.experience-page .project-editorial::before,.experience-page .project-editorial>b{display:none}
.experience-page .project-editorial>span{padding:1.25rem 1.5rem 0;line-height:1.6;font-size:.55rem}
.experience-page .project-editorial>strong{margin:1rem 0;padding:0 1.5rem;text-shadow:none;font:500 1.8rem/1.2 var(--sans)}
.experience-page .project-editorial>div{padding:0 1.5rem 1.5rem}
.experience-page .studio-contact{background:#10252f}
.experience-page .intro-actions .studio-button,.experience-page .studio-projects .studio-button,.experience-page .header-contact{border-radius:6px}
.experience-page .intro-actions .studio-button>span{color:#345e4f}
.project-page .archive-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:1.5rem 4vw;min-height:660px;background:#08151d;align-content:center;justify-content:normal}
.project-page .archive-hero>.scene-image{position:relative;inset:auto;grid-column:2;grid-row:1/5;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;opacity:1;filter:none;transform:none;align-self:center;border-radius:18px}
.project-page .archive-hero>.scene-shade{display:none}
.project-page .archive-hero>:not(.scene-image){grid-column:1}
.project-page .archive-hero h1{font-size:clamp(2.8rem,4.5vw,5rem)}
.project-page .case-dark{background:#08151d}
.project-page #modernization .case-visual{min-height:0;display:flex;align-items:center;background:#08151d}
.project-page #modernization .case-visual>img{height:auto;object-fit:contain;filter:none}
.project-page #modernization .case-visual::after{display:none}
@keyframes clearExperienceEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes codingHello{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:no-preference){
  .experience-page.experience-ready .intro-copy{animation:clearExperienceEnter .8s .05s both}
  .experience-page.experience-ready .intro-visual{animation:clearExperienceEnter .9s .15s both}
  .experience-page .is-scene-visible .coding-scene>img{animation:codingHello 7s ease-in-out infinite}
}
@media(min-width:1650px){.experience-page .intro-section{min-height:980px}.experience-page .intro-portrait>img{height:380px}.coding-scene>img{height:280px}}
@media(max-width:1100px){.experience-page .intro-section{min-height:0;padding-top:7.5rem;gap:0 3vw}.experience-page .intro-portrait{width:94%}.experience-page .intro-portrait>img{height:310px}.coding-scene>img{height:210px}.experience-page .intro-visual{padding-left:0}.experience-page .studio-service{padding-inline:1rem}.experience-page .service-landscape{width:calc(100% + 2rem);margin-left:-1rem}}
@media(max-width:800px){.experience-page .engineering-scene{grid-template-columns:1fr;gap:2rem;padding-block:4rem}.experience-page .engineering-world{grid-column:1;grid-row:2;max-width:560px;justify-self:center}.experience-page .engineering-diagram{grid-row:3}.project-page .archive-hero{grid-template-columns:1fr;padding-top:8rem}.project-page .archive-hero>.scene-image{grid-column:1;grid-row:5;max-width:600px;justify-self:center}}
@media(max-width:650px){
  .experience-page .intro-section{grid-template-columns:1fr;padding-top:7rem;gap:0}
  .experience-page .intro-copy{padding:0 0 2rem}
  .experience-page .intro-copy h1{font-size:clamp(3.6rem,16vw,6rem);line-height:.98}
  .experience-page .intro-visual{width:100%;padding:0 0 1rem;gap:1rem;max-width:440px;justify-self:center;margin-top:0}
  .experience-page .intro-portrait{width:100%;border-radius:14px}
  .experience-page .intro-portrait>img{height:clamp(300px,95vw,390px);object-position:center 24%}
  .coding-scene{border-radius:14px}
  .coding-scene>img{height:auto;aspect-ratio:3/2;object-fit:contain}
  .coding-scene>span{font-size:.58rem}
  .experience-page .intro-bottom{margin-top:0}
  .experience-page .studio-service{padding:0 1.3rem 1.3rem}
  .experience-page .service-landscape{height:auto;width:calc(100% + 2.6rem);margin-left:-1.3rem}
  .experience-page .project-editorial{min-height:0}
  .experience-page .engineering-copy h2{font-size:2.2rem}
  .project-page .archive-hero{min-height:0;gap:1.5rem;padding-bottom:3rem}
}
@media(prefers-reduced-motion:reduce){.experience-page .coding-scene>img{animation:none}}

/* Full contrast: opaque surfaces, true white type, and no milky entrance fade.
   The source photographs, illustrations, logo, and logo intro are untouched. */
.experience-page,.experience-page .intro-section,.experience-page .site-header,
.experience-page .engineering-scene,.experience-page .studio-projects,
.experience-page .demo-intro,.experience-page .site-footer,
.project-page .archive-hero,.project-page .case-dark{background:#020608}
.experience-page .studio-services,.experience-page .studio-process{background:#050c10}
.experience-page .studio-service,.experience-page .studio-service:hover,
.experience-page .studio-service:focus-within,.experience-page .diagram-node,
.experience-page .project-editorial,.experience-page .studio-contact,
.experience-page .intro-portrait figcaption,.coding-scene>span{background:#081217}
.experience-page .studio-about,.project-page .light-scene,
.project-page .case-light,.project-page .web-case-light{background:#fff}
.experience-page{color:#fff}
.experience-page .intro-copy h1,.experience-page .intro-specialty,
.experience-page .studio-service h3,.experience-page .section-heading h2,
.experience-page .engineering-copy h2,.experience-page .studio-projects h2,
.experience-page .contact-intro h2{color:#fff;text-shadow:none}
.experience-page .intro-greeting,.experience-page .intro-lead,
.experience-page .section-heading>p:last-child,.experience-page .studio-service p,
.experience-page .studio-service ul,.experience-page .studio-hardware p:not(.eyebrow),
.experience-page .engineering-copy>p:not(.eyebrow),.experience-page .process-steps p,
.experience-page .studio-projects p:not(.eyebrow),.experience-page .demo-intro>p:last-child,
.experience-page .contact-intro>p:not(.eyebrow),.experience-page .form-note,
.experience-page .intro-portrait figcaption,.experience-page .diagram-node>small,
.project-page .archive-hero>p{color:#e8eff2}
.experience-page .intro-name-line:last-child{color:#b8decd}
.experience-page .intro-copy,.experience-page .intro-visual{filter:none}
.experience-page .reveal,.project-page .reveal{opacity:1;transition-property:transform}
.experience-page main img,.project-page main img{filter:none;mix-blend-mode:normal}
.experience-page .world-atmosphere,.experience-page .world-grid{display:none}
.experience-page .service-landscape::after,.experience-page .engineering-world::after,
.experience-page .project-editorial::before,.project-page .scene-shade{display:none}
@keyframes clearExperienceEnter{from{opacity:1;transform:translateY(18px)}to{opacity:1;transform:none}}

/* The loading screen has its own background, independent of the page. */
.experience-page .boot,.project-page .boot{--green:#95e005;background:#020608;background-image:none;backdrop-filter:none}
.boot .glyph-three,.boot .boot-brand b,.experience-page .boot .boot-code b{color:var(--green)}
.boot::before,.boot::after{content:none;display:none}
.boot .logo-glyph{filter:none;text-shadow:none}
.boot .boot-close{background:#081217;backdrop-filter:none}
.boot.done .boot-core{animation-name:clearBootExit}
@keyframes clearBootExit{to{opacity:0;transform:scale(1.08)}}

/* Natural business portrait: composition only, no retouching/toning in CSS. */
.experience-page .portrait-business>img{object-position:50% 16%;filter:none;opacity:1}