/* Internal pages share the approved home frame and navigation states. */
body.internal-frame{--frame-gap:24px;--nav-state-bg:#B83D04;--nav-state-text:#EDEDE8}
.internal-frame .header,.internal-frame .header.scrolled{top:36px;left:36px;right:36px;height:76px;padding:0;background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
.internal-frame .header-inner{height:76px;max-width:1280px;padding:10px 20px;gap:20px;border:1px solid transparent;border-radius:999px;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:none;transition:max-width .35s ease,height .35s ease,padding .35s ease,background-color .35s ease,border-color .35s ease}
.internal-frame .header.scrolled{top:12px;left:var(--frame-gap);right:var(--frame-gap)}
.internal-frame .header.scrolled .header-inner{height:64px;max-width:1120px;padding:8px 18px;gap:16px;border-color:color-mix(in srgb,var(--line-strong) 65%,transparent);background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.internal-frame .header .logo img{width:44px;height:44px}
.internal-frame .header.scrolled .logo img{width:36px;height:36px}
.internal-frame .header .logo span{font-size:13px}
.internal-frame .header.scrolled .logo span{font-size:12px}
.internal-frame .header .nav{gap:2px}
.internal-frame .header .nav a{padding:10px 12px;border-radius:999px;transform:none}
.internal-frame .header .nav a::after{display:none}
.internal-frame .header .nav a:hover,.internal-frame .header .nav a[aria-current="page"],.internal-frame .lang-btn.active,.internal-frame .lang-btn:hover{background:var(--nav-state-bg);color:var(--nav-state-text)}
.internal-frame .header .header-right{gap:10px}
.internal-frame .header .header-contact{min-height:44px;padding:10px 16px;font-size:13px;max-width:none;white-space:nowrap;border-radius:999px}
.internal-frame .mobile-preferences{display:none}
.internal-frame :is(.case-hero,.document-hero,.work-hero){position:relative;isolation:isolate;overflow:hidden;margin:var(--frame-gap) var(--frame-gap) 48px;border:1px solid var(--line);border-radius:32px;background:var(--bg);padding:160px 0 48px}
.internal-frame .case-hero-bleed{min-height:calc(100svh - var(--frame-gap)*2);padding:clamp(220px,30svh,330px) 0 40px}
/* One diagonal fade rises from the lower-left copy area; no separate top overlay. */
.internal-frame .case-hero-bleed::before{display:none}
body.internal-frame[data-page] .case-hero-bleed::after{background:linear-gradient(35deg,color-mix(in srgb,var(--bg) 98%,transparent) 0%,color-mix(in srgb,var(--bg) 96%,transparent) 20%,color-mix(in srgb,var(--bg) 90%,transparent) 35%,color-mix(in srgb,var(--bg) 72%,transparent) 48%,color-mix(in srgb,var(--bg) 38%,transparent) 62%,color-mix(in srgb,var(--bg) 8%,transparent) 78%,transparent 92%)}
.internal-frame :is(.case-hero,.document-hero,.work-hero)>.container{padding-inline:40px}
.internal-frame .case-title{font-size:clamp(32px,4.2vw,60px);font-weight:500;line-height:1.08}
.internal-frame .case-meta{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.internal-frame .case-meta>div{padding:20px;border-radius:20px}
.internal-frame .footer--compact{margin:0 var(--frame-gap);border-top:0;border-radius:32px 32px 0 0}
.internal-frame .footer--compact>.container{padding-inline:40px}
@media(min-width:1051px) and (max-width:1180px){
.internal-frame .header .logo span{display:none}
.internal-frame .header-inner{gap:12px}
.internal-frame .header .nav a{padding:10px}
.internal-frame .header .header-right{gap:8px}
}
@media(max-width:1050px){
body.internal-frame{--frame-gap:16px}
.internal-frame .header{top:28px;left:28px;right:28px;height:64px}
.internal-frame .header.scrolled{left:16px;right:16px;height:64px}
.internal-frame .header-inner,.internal-frame .header.scrolled .header-inner{height:64px;padding:8px 12px;gap:12px;max-width:1280px}
.internal-frame .header .logo span,.internal-frame .header .nav{display:none}
.internal-frame .header .logo img,.internal-frame .header.scrolled .logo img{width:40px;height:40px}
.internal-frame .header .header-right{margin-left:auto;gap:10px}
.internal-frame .header .burger{display:block;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.internal-frame .burger span{left:12px;width:20px}
.internal-frame .burger span:nth-child(1){top:14px}
.internal-frame .burger span:nth-child(3){bottom:14px}
.internal-frame .burger.open span:nth-child(1){top:50%}
.internal-frame .burger.open span:nth-child(3){bottom:50%}
.internal-frame .mobile-menu{display:flex;position:fixed;z-index:99;flex-direction:column;align-items:stretch;overflow-y:auto;overscroll-behavior:contain;top:100px;bottom:16px;left:16px;right:16px;padding:24px;gap:12px;border:1px solid var(--line-strong);border-radius:28px;background:var(--bg);transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;overflow-y:auto}
.internal-frame .mobile-menu.open{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.internal-frame .mobile-menu>a{font-size:clamp(22px,4svh,30px);padding:12px 16px;border-radius:999px}
.internal-frame .mobile-menu>a:hover,.internal-frame .mobile-menu>a[aria-current="page"]{background:var(--nav-state-bg);color:var(--nav-state-text)}
.internal-frame .mobile-preferences{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:auto;padding:20px 16px 8px;border-top:1px solid var(--line)}
.internal-frame .mobile-preferences>span{width:100%;font-size:13px;color:var(--ink-muted)}
.internal-frame .mobile-preferences .lang-btn{min-width:44px;min-height:44px}
.internal-frame .mobile-preferences .theme-toggle{width:48px;height:48px}
.internal-frame :is(.case-hero,.document-hero,.work-hero)>.container,.internal-frame .footer--compact>.container{padding-inline:32px}
.internal-frame .case-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
body.internal-frame{--frame-gap:12px}
.internal-frame .header{top:24px;left:24px;right:24px}
.internal-frame .header.scrolled{left:12px;right:12px}
.internal-frame :is(.case-hero,.document-hero,.work-hero){border-radius:24px;margin-bottom:32px;padding:128px 0 32px}
.internal-frame .case-hero-bleed{padding-top:240px;min-height:0}
.internal-frame :is(.case-hero,.document-hero,.work-hero)>.container,.internal-frame .footer--compact>.container{padding-inline:20px}
.internal-frame .case-meta{gap:12px}
.internal-frame .case-meta>div{padding:16px;border-radius:16px}
.internal-frame .case-meta p{font-size:13px}
.internal-frame .mobile-menu{top:96px;left:12px;right:12px;bottom:12px;border-radius:24px}
.internal-frame .footer--compact{border-radius:24px 24px 0 0}
}
@media(max-width:380px){.internal-frame .case-meta{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.internal-frame .header,.internal-frame .header-inner,.internal-frame .mobile-menu{transition:none!important}}


/* Retain the diagonal direction on mobile while supporting the stacked copy. */
@media(max-width:760px){body.internal-frame[data-page] .case-hero-bleed::after{background:linear-gradient(35deg,color-mix(in srgb,var(--bg) 98%,transparent) 0%,color-mix(in srgb,var(--bg) 94%,transparent) 30%,color-mix(in srgb,var(--bg) 82%,transparent) 46%,color-mix(in srgb,var(--bg) 45%,transparent) 62%,color-mix(in srgb,var(--bg) 10%,transparent) 78%,transparent 92%)}}

/* The hero card provides its own boundary; avoid a second full-width divider. */
.internal-frame :is(.case-hero,.document-hero,.work-hero)+section{border-top:0}

/* Let whitespace and headings carry the case narrative; keep component borders. */
.internal-frame .case-block,.internal-frame .case-nav{border-top:0}
.internal-frame .document-overview,.internal-frame .role-list li{border-bottom:0}

/* Case hero badges identify project type and domain; status belongs in metadata. */
body.internal-frame :is(.case-hero,.document-hero) .case-label{
display:table;max-width:100%;min-height:30px;margin:0 0 24px;padding:5px 12px;
border:1px solid var(--line-strong);border-radius:999px;
background:color-mix(in srgb,var(--bg) 95%,var(--ink) 5%);color:var(--ink-soft);
font:500 12px/1.5 'Rubik',sans-serif;letter-spacing:.02em;text-transform:none;overflow-wrap:anywhere;
}
body.internal-frame :is(.case-hero,.document-hero) .case-label::before{display:none}
.internal-frame .case-draft-note{font-size:13px;line-height:1.5;color:var(--ink-soft);margin-top:20px}

/* Editorial subheadings in the narrative column share the case accent. */
.internal-frame .case-subblock h3,
.internal-frame .visual-story-copy h3{color:var(--accent)}