/*
  BLACK EVEREST v3.4 — FINAL MOBILE DESIGN BASELINE
  --------------------------------------------------
  Phone-only finishing pass. Desktop remains unchanged.
  This file is intentionally loaded last at <= 767px.
  Future functionality should be added on top of this visual baseline.
*/

/* 1. Tighter overall rhythm without making the page feel cramped */
.hero{
  padding-bottom:46px;
}

.hero-collage{
  margin-top:42px;
}

.section{
  padding-top:60px;
  padding-bottom:60px;
}

.about.section{
  padding-top:60px;
  padding-bottom:60px;
}

.services.section{
  padding-top:58px;
  padding-bottom:58px;
}

.projects.section{
  padding-top:60px;
  padding-bottom:60px;
}

/* 2. About — keep the impact, reduce the oversized mobile headline slightly */
.about__grid{
  gap:42px;
}

.about__copy h2{
  font-size:clamp(44px,12.2vw,51px);
  line-height:.95;
}

.about__copy .lead{
  margin-top:20px;
}

.about__points{
  margin-top:18px;
  margin-bottom:21px;
}

/* 3. Services intro — same visual language, calmer scale */
.services .section-head{
  margin-bottom:23px;
}

.services .section-head h2{
  font-size:clamp(44px,12.2vw,51px);
  line-height:.95;
}

.services .section-head>p{
  margin-top:15px;
}

/* 4. Services cards — about 20–25% shorter while preserving readability */
.services-grid{
  gap:10px;
}

.service-card{
  padding:16px 18px 17px;
  border-radius:17px;
}

.service-card__top{
  margin-bottom:13px;
}

.service-card__top span{
  font-size:21px;
}

.service-card h3{
  margin-bottom:6px;
  font-size:29px;
  line-height:1;
}

.service-card p{
  margin:0;
  font-size:13.5px;
  line-height:1.58;
}

.services-cta{
  margin-top:10px;
  padding:17px 18px;
  gap:11px;
}

.services-cta strong{
  font-size:24px;
}

.services-cta span{
  margin-top:4px;
  line-height:1.55;
}

/* 5. Recent Work — intentionally preserve the approved heading/photo scale */
.projects .section-head{
  margin-bottom:25px;
}

.project-grid{
  gap:11px;
}

/* 6. Future gallery — make the swipe affordance obvious by peeking the next card */
.work-carousel{
  margin-top:28px;
  padding-top:24px;
}

.work-carousel__head{
  margin-bottom:15px;
}

.work-carousel__viewport{
  gap:10px;
  padding-right:22px;
}

.work-placeholder{
  flex:0 0 min(80vw,326px);
  min-height:210px;
  padding:18px;
}

/* 7. How It Works — match Recent Work rather than taking a whole screen */
.process{
  padding-top:50px;
  padding-bottom:50px;
}

.process__intro{
  margin-bottom:24px;
}

.process__intro h2{
  max-width:100%;
  font-size:clamp(45px,12vw,52px);
  line-height:.94;
}

.process__steps>div{
  padding-top:17px;
  padding-bottom:17px;
}

/* 8. Contact/footer — slightly tighter end of page, no redesign */
.contact{
  padding-top:56px;
  padding-bottom:56px;
}

.footer{
  padding-top:28px;
}

/* 9. Very narrow phones */
@media (max-width:380px){
  .hero-collage{margin-top:38px}
  .about__copy h2,
  .services .section-head h2,
  .process__intro h2{font-size:45px}
  .service-card{padding:15px 16px 16px}
  .service-card h3{font-size:27px}
  .work-placeholder{flex-basis:82vw}
}


/* =========================================================
   v3.4 functional navigation polish
   After choosing a section on mobile, the hamburger remains
   available as a small translucent floating control.
   ========================================================= */

.nav-wrap.mobile-docked{
  position:fixed;
  top:max(12px, env(safe-area-inset-top));
  left:0;
  right:0;
  z-index:1400;
  padding:0;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  pointer-events:none;
}

.nav-wrap.mobile-docked>.container{
  width:auto;
  max-width:none;
  margin:0;
  padding:0;
}

.nav-wrap.mobile-docked .nav-shell{
  width:58px;
  min-height:58px;
  margin-left:14px;
  padding:6px;
  gap:0;
  border:1px solid rgba(206,213,223,.78);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 28px rgba(18,27,43,.12);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
  pointer-events:none;
  transition:
    width .24s ease,
    min-height .24s ease,
    margin .24s ease,
    padding .24s ease,
    background .24s ease,
    box-shadow .24s ease;
}

.nav-wrap.mobile-docked .menu-toggle{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  flex:0 0 46px;
  width:46px;
  height:46px;
  margin:0;
  opacity:.52;
  pointer-events:auto;
  transition:opacity .18s ease, transform .18s ease;
  -webkit-tap-highlight-color:transparent;
}

.nav-wrap.mobile-docked .menu-toggle:active{
  opacity:.82;
  transform:scale(.96);
}

.nav-wrap.mobile-docked .menu-toggle span{
  background:#101216;
}

.nav-wrap.mobile-docked .nav-shell>.button{
  display:none;
}

.nav-wrap.mobile-docked .primary-nav{
  display:none;
}

/* When the floating hamburger is tapped, restore the familiar
   navigation panel without changing the approved v3.4 design. */
.nav-wrap.mobile-docked.menu-open{
  pointer-events:auto;
}

.nav-wrap.mobile-docked.menu-open>.container{
  width:calc(100% - 28px);
  max-width:560px;
  margin:0 auto;
}

.nav-wrap.mobile-docked.menu-open .nav-shell{
  width:100%;
  min-height:68px;
  margin-left:0;
  padding:8px 9px 8px 13px;
  gap:10px;
  border-radius:20px;
  background:rgba(255,255,255,.96);
  box-shadow:0 15px 42px rgba(18,27,43,.14);
  pointer-events:auto;
}

.nav-wrap.mobile-docked.menu-open .menu-toggle{
  opacity:1;
}

.nav-wrap.mobile-docked.menu-open .nav-shell>.button{
  display:inline-flex;
}

.nav-wrap.mobile-docked.menu-open .primary-nav.open{
  display:flex;
  top:77px;
  left:0;
  width:100%;
}

/* Extra room for phones with narrow safe areas. */
@media (max-width:380px){
  .nav-wrap.mobile-docked .nav-shell{
    margin-left:10px;
  }

  .nav-wrap.mobile-docked.menu-open>.container{
    width:calc(100% - 20px);
  }
}