/* Full-bleed surfaces; bounded, readable content on large displays. */
:root{--pad:max(clamp(24px,5.3vw,86px),calc((100vw - 1600px)/2),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--header-height:calc(86px + env(safe-area-inset-top,0px))}
html{scroll-padding-top:calc(var(--header-height) + 20px)}
.site-header{padding-top:env(safe-area-inset-top,0px)}
.desktop-nav{gap:clamp(18px,2.5vw,32px)}
.desktop-nav a{display:flex;align-items:center;min-height:44px}
.desktop-nav a:last-child{padding-bottom:0}
.menu-toggle,.motion-toggle{width:44px;min-width:44px;height:44px;min-height:44px;flex-shrink:0}
.motion-toggle:disabled{opacity:.55;cursor:default}
.mobile-nav{top:var(--header-height);max-height:calc(100vh - var(--header-height));max-height:calc(100dvh - var(--header-height));overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}
.mobile-nav a{min-height:48px}
.work-tabs button{min-height:44px}
.wordmark,.hero-main,.work-title>div,.work-panels,.contact-layout>*,.footer-connect{min-width:0}

/* Content determines height, including after rotation or text zoom. */
.hero{display:grid;grid-template-rows:1fr auto;height:auto;min-height:min(100svh,1100px);max-height:none}
.hero-stage{height:auto;min-height:0;padding:calc(var(--header-height) + 92px) var(--pad) 52px}
.hero-bottom{position:relative;inset:auto;margin:0 var(--pad);height:auto;min-height:76px;padding:10px 0 max(10px,env(safe-area-inset-bottom,0px))}
.hero-intro .text-link{min-height:44px;display:inline-flex;align-items:center}
.hero-bottom>a{min-height:44px;display:inline-flex;align-items:center}
.hero-top{top:calc(var(--header-height) + 28px)}
.hero-bottom>p{min-width:0}

.footer-connect>a:first-child{min-width:0;overflow-wrap:anywhere}
.site-footer .linkedin-link{flex-shrink:0;width:44px;min-height:44px}
.site-footer{padding-bottom:max(22px,env(safe-area-inset-bottom,0px))}

/* A shorter laptop window still gets a balanced, complete hero. */
@media(min-width:761px) and (max-height:800px){
  .hero-stage{padding-top:calc(var(--header-height) + 70px);padding-bottom:32px}
  .hero-stage h1{font-size:clamp(60px,min(8.1vw,12.5svh),104px)}
  .hero-stage .hero-mark{width:min(100%,400px,53svh)}
  .hero-stage .hero-intro{margin-top:24px}
  .hero-intro>p{font-size:18px}
  .hero-intro .text-link{margin-top:18px}
  .hero-bottom{min-height:64px}
}

/* Tablet work gets the full width, with controls above the exhibit. */
@media(max-width:1024px){
  .work-viewer{display:block;padding:44px var(--pad) 38px}
  .work-rail{padding:0;margin-bottom:30px}
  .work-tabs{flex-direction:row;gap:0;border-bottom:1px solid #7f9a8933}
  .work-tabs button{flex:1;min-width:0;align-items:center;text-align:center;padding:12px 8px 16px;font-size:clamp(17px,2.2vw,22px);letter-spacing:-.45px}
  .work-indicator{top:auto;bottom:-1px;left:0;width:var(--indicator-size,33.333%);height:2px;transform:translateX(var(--indicator-position,0px));transition:transform .65s var(--ease-out),width .65s var(--ease-out)}
  .product-artifact img,.identity-artifact img{transform:none}
  .identity-artifact{min-height:clamp(220px,32vw,350px)}
}
@media(min-width:761px) and (max-width:1200px){
  .workflow{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 24px;margin-top:36px}
  .workflow li{padding:17px 0 0}
  .workflow h4{font-size:24px;margin:0 0 8px}
}

@media(max-width:760px){
  :root{--pad:max(24px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--header-height:calc(78px + env(safe-area-inset-top,0px))}
  .hero{min-height:0}
  .hero-stage{padding:calc(var(--header-height) + 76px) var(--pad) 36px;gap:24px}
  .hero-top{top:calc(var(--header-height) + 22px)}
  .hero-bottom{min-height:74px;gap:12px}
  .hero-bottom .motion-toggle{width:44px;height:44px}
  .section,.site-footer{padding-left:var(--pad);padding-right:var(--pad)}
  .work-viewer{padding-top:30px;padding-bottom:32px}
  .work-rail{margin-bottom:24px}
  .work-tabs button{padding:10px 4px 14px;font-size:17px}
  .footer-policies a{min-height:44px}
  .footer-connect>a{min-height:44px}
}

/* Landscape phones keep the mark beside the copy instead of stacking two screens. */
@media(min-width:540px) and (max-height:540px){
  :root{--header-height:calc(64px + env(safe-area-inset-top,0px))}
  .hero{min-height:100svh}
  .hero-top{top:calc(var(--header-height) + 14px)}
  .consultancy-note{font-size:12px;max-width:none}
  .hero-stage{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:24px;padding:calc(var(--header-height) + 52px) var(--pad) 24px}
  .hero-stage h1{font-size:clamp(38px,min(6.5vw,12svh),64px)}
  .hero-stage .hero-mark{grid-row:auto;width:min(100%,280px,48svh)}
  .hero-stage .hero-intro{margin-top:18px}
  .hero-intro>p{font-size:15px;line-height:1.5}
  .hero-intro .text-link{margin-top:12px}
  .hero-bottom{min-height:60px;padding-top:8px;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
}
@media(pointer:coarse){
  .footer-policies a,.footer-connect>a{min-height:44px}
  .service-row summary:hover h3{transform:none}
}
@media(max-width:360px){.hero-bottom>a{display:none}}
@media(prefers-reduced-motion:reduce){.work-indicator{transition:none}}
/* Partners and contact share one continuous, edge-to-edge material surface. */
.closing-section.contact-section{padding:0}
.closing-section .partners-section{position:relative;margin:0;padding:28px var(--pad) 0;background:transparent;border:0;box-shadow:none;scroll-margin-top:-20px}
.closing-section .partners{width:100%;margin:0;padding:0;gap:clamp(24px,5vw,80px);background:transparent;border:0;box-shadow:none;color:#c2d5ca}
.closing-section .partners>div{min-height:76px}
.closing-section .partner-label{font-size:14px}
.closing-section .partner{height:76px;min-height:76px;opacity:1}
.closing-section .partner img{filter:brightness(0) invert(1);opacity:.86;transition:opacity .25s ease}
.closing-section .partner:hover img,.closing-section .partner:focus-visible img{opacity:1}
.closing-section .contact-layout{margin:0;padding:70px var(--pad) 90px}
@media(max-width:760px){
 .closing-section .partners-section{padding-top:24px}
 .closing-section .partners{gap:12px 24px}
 .closing-section .partners>div{min-height:0}
 .closing-section .partner{height:64px;min-height:64px}
 .closing-section .partner.alpha img{width:min(165px,100%)}
 .closing-section .partner.fractal img{height:54px}
 .closing-section .contact-layout{padding-top:48px;padding-bottom:56px}
}