/* SCC Web Design — premium refinement layer, September 2026 */
.studio2026 .site-header{background:linear-gradient(180deg,rgba(11,14,13,.78),rgba(11,14,13,.48));border-bottom:1px solid rgba(255,255,255,.10);backdrop-filter:blur(22px) saturate(125%);-webkit-backdrop-filter:blur(22px) saturate(125%);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.studio2026 .site-header.is-scrolled{background:rgba(12,15,14,.88);border-bottom-color:rgba(255,255,255,.14);box-shadow:0 12px 36px rgba(0,0,0,.16)}
.studio2026 .brand{min-width:0;text-decoration:none;display:flex;align-items:center}
.studio2026 .brand img{display:block;width:150px;height:auto;max-height:46px;object-fit:contain;border-radius:0;background:transparent;box-shadow:none}
.studio2026 .nav-links a{transition:color .2s ease,opacity .2s ease,border-color .2s ease}
.studio2026 .menu-toggle{border-radius:999px;transition:background .2s ease}
.studio2026 .menu-toggle:hover{background:rgba(255,255,255,.07)}

/* Keep large editorial sections from visually colliding. */
.work-section,.systems,.method,.cta-stage{position:relative;isolation:isolate}
.section-head{position:relative;z-index:2}
.portfolio-grid{position:relative;z-index:1;isolation:isolate}
.portfolio-card{contain:paint;isolation:isolate;color:#fff!important}
.portfolio-card:after{inset:18% 0 0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 30%,rgba(0,0,0,.82) 100%)}
.portfolio-card .pc-copy{max-width:min(88%,620px);color:#fff!important;text-shadow:0 2px 16px rgba(0,0,0,.38)}
.portfolio-card .pc-copy small,.portfolio-card .pc-copy h3{color:#fff!important}
.case-feature{position:relative;isolation:isolate}
.case-visual{display:block;contain:paint;isolation:isolate;box-shadow:0 18px 45px rgba(17,21,20,.08)}
.case-visual img,.site-window img,.portfolio-card img{background:#d8dbd5}
.case-visual.media-failed,.site-window.media-failed,.portfolio-card.media-failed{background:linear-gradient(135deg,#202521,#101312)}
.case-visual.media-failed img,.site-window.media-failed img,.portfolio-card.media-failed img{display:none}
.case-visual.media-failed:before,.site-window.media-failed:before,.portfolio-card.media-failed:before{content:'Project image temporarily unavailable';position:absolute;inset:0;display:grid;place-items:center;padding:2rem;text-align:center;color:rgba(255,255,255,.68);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;z-index:1}

/* Evidence-led case studies. */
.evidence-frame.has-media{background:#0f1211}
.evidence-frame .evidence-media{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#dfe3dc;border-bottom:1px solid rgba(17,21,20,.12)}
.evidence-frame .evidence-caption{padding:13px 16px;background:#f4f1e9;color:#59645d;font-size:.72rem;line-height:1.5;border-bottom:1px solid rgba(17,21,20,.1)}
.evidence-frame .evidence-copy.compact{min-height:240px;padding:30px}
.case-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.case-proof article{padding:22px;border:1px solid rgba(17,21,20,.13);border-radius:18px;background:#fff}
.case-proof strong{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#617068;margin-bottom:8px}
.case-proof p{margin:0;color:#626a64;line-height:1.6}

/* Slightly richer motion without turning the interface into a demo reel. */
[data-reveal]{transform:translateY(24px) scale(.992);transition:opacity .72s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1)}
[data-reveal].is-visible{transform:none}
.studio-hero:after{animation:studio-grid-drift 22s linear infinite}
@keyframes studio-grid-drift{from{background-position:0 0}to{background-position:48px 48px}}

@media(max-width:900px){.case-proof{grid-template-columns:1fr}}
@media(max-width:760px){
  .studio2026 .site-header{background:rgba(247,244,237,.97);border-bottom:1px solid rgba(17,21,20,.11);box-shadow:0 6px 22px rgba(17,21,20,.06);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%)}
  .studio2026 .site-header.is-scrolled{background:rgba(247,244,237,.985);border-bottom-color:rgba(17,21,20,.14);box-shadow:0 8px 24px rgba(17,21,20,.09)}
  .studio2026 .nav{min-height:72px;width:min(var(--max),92vw);gap:12px;padding:8px 0}
  .studio2026 .brand img{width:154px;height:auto;max-height:48px;border-radius:0;background:transparent;box-shadow:none;mix-blend-mode:multiply}
  .studio2026 .menu-toggle{width:42px;height:42px}
  .studio2026 .menu-toggle span,.studio2026 .menu-toggle span:before,.studio2026 .menu-toggle span:after{width:22px;height:2px;background:#111514;border-radius:4px}
  .studio2026 .nav-links{top:72px;background:rgba(247,244,237,.99);border-bottom:1px solid rgba(17,21,20,.12);box-shadow:0 18px 34px rgba(17,21,20,.10)}
  .studio2026 .nav-links a{color:#111514}
  .studio2026 .nav-cta{border-color:rgba(17,21,20,.24)}
  .studio-hero{padding-top:108px}
  .studio-hero h1{margin-top:18px}
  .studio-hero .lead{line-height:1.55}
  .case-feature{padding-bottom:44px}
  .case-feature.reverse{padding-bottom:30px}
  .work-section .section-head[style]{margin-top:0!important}
  .case-visual{min-height:380px}
  .portfolio-card:nth-child(n){min-height:300px}
  .portfolio-card .pc-copy{left:22px;right:22px;bottom:22px}
  .pc-copy h3{font-size:clamp(2rem,10vw,3rem);line-height:.98}
  .evidence-frame .evidence-copy.compact{min-height:210px;padding:24px}
}

@media(max-width:460px){
  .studio2026 .wrap,.hero-layout,.trust-row,.studio2026 .nav{width:92vw}
  .studio2026 .brand img{width:148px;max-height:46px}
  .studio-hero{padding-top:104px}
  .studio-hero h1{font-size:clamp(3rem,14.4vw,4.65rem);line-height:.92}
  .hero-overline{font-size:.66rem;letter-spacing:.14em}
  .hero-actions{gap:9px}
  .scc-btn{min-height:48px;padding-inline:17px}
  .portfolio-card:nth-child(n){min-height:330px}
}

@media(prefers-reduced-motion:reduce){
  .studio-hero:after{animation:none}
  [data-reveal]{transition:none;transform:none}
  .site-window,.case-visual img,.portfolio-card img,.scc-btn{transition:none}
}