/*
  BLACK EVEREST — phone-only polish
  Loaded only at <= 767px, so the desktop design remains unchanged.
*/

:root{
  --container:calc(100% - 40px);
}

html{
  scroll-padding-top:86px;
  overflow-x:hidden;
}

body{
  overflow-x:hidden;
}

.container{
  width:var(--container);
  max-width:560px;
}

/* Header / logo */
.topbar{
  padding:16px 0 12px;
}

.topbar__inner{
  display:flex;
  justify-content:center;
  align-items:center;
}

.brand{
  width:100%;
  justify-content:center;
}

.brand img{
  width:188px;
  height:76px;
  margin-inline:auto;
  object-position:center center;
}

.topbar__details{
  display:none;
}

.nav-wrap{
  padding:8px 0 10px;
}

.nav-shell{
  min-height:68px;
  padding:8px 9px 8px 13px;
  gap:10px;
  border-radius:20px;
}

.menu-toggle{
  display:grid;
  place-items:center;
  flex:0 0 46px;
  width:46px;
  height:46px;
}

.menu-toggle span{
  width:24px;
  margin:3px auto;
}

.nav-shell>.button{
  margin-left:auto;
  min-height:50px;
  padding:0 18px;
  border-radius:15px;
  font-size:11px;
  white-space:nowrap;
}

.nav-phone{
  display:none;
}

.primary-nav{
  top:77px;
  left:0;
  width:100%;
  padding:12px 18px;
  border-radius:18px;
}

.nav-link{
  padding:14px 2px;
  font-size:13px;
}

/* Hero */
.hero{
  padding:36px 0 54px;
}

.hero__watermark{
  top:45px;
  left:50%;
  transform:translateX(-50%);
  width:var(--container);
  max-width:560px;
  overflow:hidden;
  font-size:clamp(44px,13.1vw,58px);
  text-align:left;
  line-height:.82;
}

.crumb{
  gap:8px;
  margin-bottom:60px;
  font-size:7.5px;
  white-space:nowrap;
}

.hero__grid{
  display:block;
}

.hero__copy{
  width:100%;
  max-width:none;
  padding:0;
}

.eyebrow{
  gap:11px;
  margin-bottom:18px;
  font-size:9px;
}

.eyebrow::before{
  width:34px;
}

.hero h1{
  max-width:100%;
  margin-bottom:22px;
  font-size:clamp(50px,14.8vw,62px);
  line-height:.94;
  letter-spacing:-.025em;
}

.hero__copy>p{
  max-width:none;
  margin-bottom:25px;
  font-size:12.5px;
  line-height:1.78;
}

.hero__actions{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.82fr);
  gap:10px;
  margin-bottom:22px;
}

.hero__actions .button{
  width:100%;
  min-width:0;
  min-height:52px;
  padding-inline:12px;
  font-size:11px;
}

.proof-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  gap:8px;
  margin-bottom:0;
  font-size:8.3px;
}

.proof-row span{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:5px;
  min-width:0;
  white-space:nowrap;
}

.proof-row b{
  font-size:11px;
}

/* Neat mobile collage: same photos, phone-specific geometry */
.hero-collage{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:10px;
  width:100%;
  max-width:520px;
  min-height:0;
  margin:54px auto 0;
  padding:0;
}

.hero-photo{
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  border:4px solid #fff;
  border-radius:17px;
  box-shadow:0 17px 42px rgba(18,27,43,.12);
}

.hero-photo--main{
  grid-column:1;
  grid-row:1;
  aspect-ratio:.76;
}

.hero-photo--main img{
  object-position:center 50%;
}

.hero-photo--side{
  grid-column:2;
  grid-row:1;
  aspect-ratio:.83;
  align-self:start;
  margin-top:-28px;
}

.hero-photo--side img{
  object-position:center 44%;
}

.hero-badge{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:94px;
  height:94px;
  padding:11px;
  border-width:4px;
  box-shadow:0 12px 30px rgba(17,19,24,.22);
}

.hero-badge img{
  width:74px;
}

/* Promise */
.promise__grid{
  grid-template-columns:1fr;
}

.promise__grid>div{
  display:grid;
  grid-template-columns:52px 1fr;
  align-items:center;
  gap:12px;
  min-height:88px;
  padding:16px 0;
  border-right:0;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.promise__grid>div:first-child{
  padding-left:0;
}

.promise__grid>div:last-child{
  border-bottom:0;
}

.promise strong{
  font-size:34px;
  text-align:left;
}

.promise span{
  font-size:14px;
}

.promise small{
  font-size:9px;
}

/* Shared section rhythm */
.section{
  padding:66px 0;
}

.section h2{
  font-size:clamp(47px,13.2vw,56px);
  line-height:.94;
}

.section-head{
  display:block;
  margin-bottom:27px;
}

.section-head>p{
  max-width:none;
  margin-top:18px;
  padding:0;
  font-size:11.5px;
  line-height:1.75;
}

/* About: no off-center absolute canvas on phone */
.about__grid{
  display:flex;
  flex-direction:column;
  gap:48px;
}

.about__visual{
  position:relative;
  width:100%;
  max-width:none;
  min-height:0;
}

.about__photo{
  position:relative;
  inset:auto;
  width:100%;
  aspect-ratio:.82;
  border-radius:21px;
}

.about__photo img{
  object-position:center center;
}

.about__mini-card{
  right:14px;
  bottom:14px;
  width:min(230px,66%);
  padding:17px 18px;
  border-radius:17px;
}

.about__mini-card strong{
  font-size:23px;
}

.about__copy{
  width:100%;
}

.about__copy .lead{
  max-width:none;
  margin:21px 0 17px;
  font-size:14px;
  line-height:1.58;
}

.about__copy p:not(.lead){
  max-width:none;
  font-size:11.5px;
  line-height:1.85;
}

.about__points{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin:20px 0 23px;
}

.about__points span{
  min-width:0;
  padding:9px 6px;
  text-align:center;
  font-size:8.2px;
  white-space:nowrap;
}

.text-link{
  font-size:12px;
}

/* Services */
.services-grid{
  grid-template-columns:1fr;
  gap:11px;
}

.service-card{
  min-height:0;
  padding:19px 19px 20px;
  border-radius:17px;
}

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

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

.service-card h3{
  margin:0 0 7px;
  font-size:27px;
}

.service-card p{
  font-size:11px;
  line-height:1.7;
}

.services-cta{
  margin-top:11px;
  padding:19px;
  border-radius:17px;
  align-items:flex-start;
  flex-direction:column;
  gap:13px;
}

.services-cta>div{
  display:block;
}

.services-cta span{
  display:block;
  margin-top:5px;
  line-height:1.65;
}

/* Projects */
.project-grid{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:none;
  gap:12px;
}

.project-card,
.project-card--feature,
.project-card:nth-child(4){
  grid-column:auto;
  grid-row:auto;
  width:100%;
  height:auto;
  aspect-ratio:1.28;
  border-radius:18px;
}

.project-card--feature{
  aspect-ratio:1.08;
}

.project-card img{
  object-position:center center;
}

.project-card>span{
  left:16px;
  right:16px;
  bottom:15px;
}

.project-card strong{
  font-size:22px;
}

/* Process — compact rows on mobile */
.process{
  padding:54px 0;
}

.process__inner{
  display:block;
}

.process__intro{
  margin-bottom:28px;
}

.process__intro h2{
  max-width:100%;
  font-size:clamp(46px,13vw,54px);
}

.process__steps{
  display:block;
  border-radius:17px;
}

.process__steps>div{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:12px;
  min-height:0;
  padding:18px 17px;
  border-right:0;
  border-bottom:1px solid var(--line-dark);
}

.process__steps>div:last-child{
  border-bottom:0;
}

.process__steps b{
  font-size:34px;
}

.process__steps span{
  padding-top:1px;
}

.process__steps strong{
  font-size:21px;
}

.process__steps small{
  margin-top:6px;
  font-size:9px;
}

/* Contact */
.contact{
  padding:60px 0;
}

.contact-card{
  display:block;
  padding:25px 20px;
  border-radius:20px;
}

.contact-card h2{
  font-size:clamp(48px,13vw,56px);
}

.contact-card__copy>p{
  max-width:none;
  margin:17px 0 21px;
  font-size:11.5px;
  line-height:1.75;
}

.contact-card__actions{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:9px;
}

.contact-card__actions .button{
  width:100%;
  min-width:0;
  padding-inline:10px;
}

.contact-card__details{
  margin-top:29px;
  padding:14px 0 0;
  border-left:0;
  border-top:1px solid var(--line);
}

.contact-card__details>a,
.contact-card__details>div{
  grid-template-columns:1fr auto;
  gap:3px 12px;
  padding:15px 0;
}

.contact-card__details small{
  grid-column:1/-1;
}

.contact-card__details strong{
  font-size:11px;
}

.contact-card__details span{
  margin-top:0;
  font-size:8px;
}

/* Footer: centered brand on phone */
.footer{
  padding:30px 0 20px;
}

.footer__top{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:19px;
  text-align:center;
  padding-bottom:23px;
}

.footer__brand{
  display:flex;
  justify-content:center;
  width:100%;
}

.footer__brand img{
  width:180px;
  margin-inline:auto;
}

.footer__nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px 18px;
}

.footer__phone{
  justify-self:auto;
}

.footer__bottom{
  align-items:center;
  text-align:center;
  flex-direction:column;
  gap:7px;
}

/* Modal / lightbox */
.modal,
.lightbox{
  padding:12px;
}

.modal__panel{
  max-height:calc(100dvh - 24px);
  padding:29px 17px 22px;
  border-radius:19px;
}

.modal h2{
  padding-right:34px;
  font-size:44px;
}

.form-grid{
  grid-template-columns:1fr;
  gap:11px;
}

.form-grid__full{
  grid-column:auto;
}

.form-actions{
  align-items:stretch;
  flex-direction:column;
}

.form-actions .button{
  width:100%;
}

.lightbox__panel{
  max-width:calc(100vw - 24px);
  max-height:calc(100dvh - 24px);
  border-radius:18px;
}

.lightbox__panel img{
  max-height:calc(100dvh - 92px);
}

/* Very narrow phones */
@media (max-width:380px){
  :root{--container:calc(100% - 28px)}
  .brand img{width:174px}
  .nav-shell>.button{padding-inline:13px;font-size:10px}
  .hero h1{font-size:49px}
  .hero__actions{grid-template-columns:1.22fr .78fr}
  .proof-row{font-size:7.6px;gap:5px}
  .hero-badge{width:84px;height:84px}.hero-badge img{width:66px}
  .about__points{grid-template-columns:1fr 1fr}.about__points span:last-child{grid-column:1/-1}
  .contact-card__actions{grid-template-columns:1fr}
}

/* v3.2 mobile — carousel */
.work-carousel{margin-top:29px;padding-top:25px}
.work-carousel__head{display:block;margin-bottom:15px}
.work-carousel__head h3{font-size:31px}
.work-carousel__head p{font-size:10px;line-height:1.65;max-width:94%}
.work-carousel__controls{display:none}
.work-carousel__viewport{gap:10px;margin-right:calc((100vw - var(--container))/ -2);padding-right:24px;padding-bottom:11px}
.work-placeholder{flex:0 0 min(82vw,310px);min-height:220px;padding:18px;border-radius:18px}
.work-placeholder strong{font-size:28px}
.work-placeholder__mark{width:34px;height:34px}
.work-carousel__dots{justify-content:flex-start;margin-top:0}

/* v3.2 mobile — quote form */
.modal__intro{font-size:10.5px;line-height:1.6;margin-bottom:17px}
.form-section{padding-top:16px;margin-top:16px}
.form-section legend{gap:9px}
.form-section legend>b{font-size:21px}
.form-section legend strong{font-size:18px}
.form-section legend small{font-size:8px}
.form-section .form-grid{margin-top:13px}
.form-grid input,.form-grid select,.form-grid textarea{min-height:46px;font-size:13px;padding:12px}
.form-grid textarea{min-height:118px}
.contact-choice__label{font-size:9px;margin-bottom:7px}
.contact-choice__options{gap:8px}
.choice-pill span{min-height:46px;font-size:11px!important;border-radius:12px}
.form-actions--quote{gap:9px;margin-top:17px}
.form-actions--quote small{max-width:none;text-align:center;font-size:8.5px;line-height:1.55}


/* ===== mobile readability polish ===== */

.hero{
  background:#eef1f4;
}

.hero__copy>p{
  color:#4b5360;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(17,19,24,.06);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 8px 18px rgba(17,19,24,.04);
}

.promise{
  background:#0d1016;
}

.promise__grid>div{
  grid-template-columns:58px 1fr;
  min-height:98px;
  padding:18px 0;
  gap:14px;
}

.promise strong{
  font-size:38px;
}

.promise span{
  font-size:16px;
  line-height:1.04;
}

.promise small{
  margin-top:4px;
  font-size:10px;
  color:#c0c7d2;
}