/* Shared compact navigation for phones and tablets. */
.mobile-menu-toggle{display:none}
@media(max-width:1000px){
  .header.header{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;padding:16px 5vw;min-height:76px;background:#fff}
  .header.header .brand{max-width:calc(100% - 100px);flex:1 1 auto;padding:0;min-width:0}
  .header.header .brand-logo{width:225px;max-width:100%;height:auto}
  .header .header-note{display:none}
  .header.mobile-nav-ready>.mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:8px 0 8px 12px;border:0;background:transparent;color:#102538;font:600 12px 'Segoe UI',Arial,sans-serif;letter-spacing:.04em}
  .menu-icon{display:block;width:19px;height:12px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
  .menu-icon:after{content:'';position:absolute;left:0;right:0;top:4px;border-top:2px solid currentColor}
  .header.header>nav{flex-basis:100%;flex-direction:column;gap:0;margin-top:14px;border-top:1px solid #dce5ec;padding-top:8px}
  .header.header>nav a,.header.header>nav a:first-child{display:block;padding:12px 0;font-size:12px;letter-spacing:.08em;min-height:44px}
  .header.header>.company-menu{flex-basis:100%;margin:0;font-size:12px}
  .header>.company-menu summary{padding:12px 0;min-height:44px}
  .header .company-menu>nav{position:static;min-width:0;width:100%;padding:0 14px;box-shadow:none;border:0;border-left:2px solid #dce5ec;gap:0}
  .header.mobile-nav-ready:not(.mobile-menu-open)>nav,.header.mobile-nav-ready:not(.mobile-menu-open)>.company-menu{display:none}
  .hero{height:auto;min-height:calc(100svh - 76px);max-height:none}
  .hero-copy{padding:64px 6vw 110px}
}
@media(max-width:760px){
  .hero h1{font-size:clamp(4.7rem,20vw,6.2rem)}
  .hero .eyebrow{margin-bottom:28px}
}

/* Preserve the entire photograph on small screens. */
@media(max-width:760px){
 .photo-feature:first-child img,.photo-feature.secondary img,.craft-image img,
 .curated-card:nth-child(n) img,.latest-architecture-grid img,.full-card img,
 .portfolio-hero-image img,.project-card:nth-child(n) img,
 .company-story img,.service-photo-strip img{
   display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;
 }
 .image-button:hover img,.project-card button:hover img{transform:none}
}

/* Portfolio navigation must not override the shared company dropdown. */
.header.header .company-menu>nav{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:0}
.header.header .company-menu>nav a{display:block!important;white-space:normal;overflow-wrap:break-word;min-height:44px;text-align:left}
.portfolio-page .header>nav a[aria-current=page]{border-bottom:0;color:#357c9e}
@media(max-width:1000px){
 .header.header>nav{align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;text-align:left}
 .header.header>nav a,.portfolio-page .header.header>nav a[aria-current=page]{border:0}
 .header.header>nav a:after,.header.header .company-menu>nav a:after{display:none}
 .header.header .company-menu>nav{padding:0 0 0 18px;gap:0;border-left:1px solid #dce5ec}
 .header.header .company-menu>nav a{padding:10px 0!important;line-height:24px;font-size:12px;letter-spacing:.015em}
 .header.header .company-menu summary{padding:12px 0}
 .mobile-menu-open .menu-icon{height:18px;border:0}
 .mobile-menu-open .menu-icon:before,.mobile-menu-open .menu-icon:after{content:'';position:absolute;left:0;right:0;top:8px;border-top:2px solid currentColor;transform:rotate(45deg)}
 .mobile-menu-open .menu-icon:after{transform:rotate(-45deg)}
}

/* Three equal strokes, centered on a consistent 6px rhythm. */
@media(max-width:1000px){
 .header .menu-icon{position:relative;width:19px;height:14px;border:0;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
 .header .menu-icon:before,.header .menu-icon:after{content:'';position:absolute;left:0;right:0;height:2px;border:0;background:currentColor;transform:none}
 .header .menu-icon:before{top:0}
 .header .menu-icon:after{top:12px}
 .header.mobile-menu-open .menu-icon{background:none}
 .header.mobile-menu-open .menu-icon:before{top:6px;transform:rotate(45deg)}
 .header.mobile-menu-open .menu-icon:after{top:6px;transform:rotate(-45deg)}
}

/* Sticky header with a quick overlay menu that does not move the page. */
.header.header{position:sticky;top:0;z-index:40}
.mobile-nav-panel{display:contents}
@media(max-width:1000px){
 .header.header{position:sticky;top:0;flex-wrap:nowrap}
 .header.header .mobile-nav-panel{display:block;position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - 77px);overflow-y:auto;overscroll-behavior:contain;padding:10px 5vw 18px;background:#fff;border-bottom:1px solid #dce5ec;border-radius:0 0 14px 14px;box-shadow:0 14px 25px #08152120;clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden;transform:translateY(-6px);transition:clip-path .18s ease-out,opacity .15s ease-out,transform .18s ease-out,visibility .18s}
 .header.header.mobile-menu-open .mobile-nav-panel{clip-path:inset(0 0 0 0);opacity:1;visibility:visible;transform:translateY(0)}
 .header.header .mobile-nav-panel>nav{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:0;margin:0;padding:0;border:0}
 .header.header .mobile-nav-panel>nav a,.header.header .mobile-nav-panel>nav a:first-child{display:block;padding:12px 0;min-height:44px;border:0;font-size:12px;letter-spacing:.08em}
 .header.header .mobile-nav-panel>nav a:after{display:none}
 .header.header .mobile-nav-panel>.company-menu{display:block;margin:0;font-size:12px}
 .header.header .mobile-nav-panel>.company-menu summary{padding:12px 0;min-height:44px}
 .header.header .mobile-nav-panel .company-menu>nav{position:static;min-width:0;width:100%;padding-left:18px;box-shadow:none;border:0;border-left:1px solid #dce5ec}
}
@media(prefers-reduced-motion:reduce){.header.header .mobile-nav-panel{transition:none}}
/* Match section links to the actual sticky header, without a second large gap. */
@media(max-width:1000px){
 html{scroll-padding-top:var(--site-header-height,76px)}
 #architecture,#film,#collection{scroll-margin-top:0;padding-top:18px}
}
/* Compact film introduction and fill the widescreen preview on phones. */
@media(max-width:760px){
 #film .film-heading{gap:16px;margin-bottom:24px}
 #film .film-heading .section-label{margin-bottom:20px}
 #film .film-heading h2{font-size:clamp(2.6rem,10vw,3.2rem)}
 #film .film-heading p{margin:0;font-size:.95rem;line-height:1.55}
 #film .film-stage video{object-fit:cover}
 #film .film-play{gap:14px;font-size:.9rem;letter-spacing:.08em}
 #film .play-circle{width:56px;height:56px}
 #film .film-footer{padding-top:20px}
}
/* Keep the header pinned even when mobile browsers restore a scrolled page. */
.header.header{position:fixed;top:0;left:0;right:0;width:100%;z-index:40}
body{padding-top:var(--site-header-height,77px)}
html{scroll-padding-top:var(--site-header-height,77px)}