/* Mobile/tablet refinement and clearer WhatsApp icon. Added 28 July 2026. */

/* Crisp WhatsApp mark used in the desktop nav and mobile shortcut. */
.nav-whatsapp-icon svg,
.mobile-whatsapp-shortcut svg{
  overflow:visible;
}
.nav-whatsapp-icon .wa-bubble,
.mobile-whatsapp-shortcut .wa-bubble{
  fill:none;
  stroke:currentColor;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav-whatsapp-icon .wa-phone,
.mobile-whatsapp-shortcut .wa-phone{
  fill:currentColor;
}
.nav-whatsapp-icon{
  background:#20b963;
  border-color:#20b963;
  box-shadow:0 12px 28px rgba(32,185,99,.28);
}
.nav-whatsapp-icon:hover{
  background:#169c52;
  box-shadow:0 15px 32px rgba(32,185,99,.34);
}
.nav-icon-label{display:none}
.mobile-header-actions{display:none}

/* The client review title remains centred on every screen size. */
#reviews .review-heading-centered{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
#reviews .review-heading-centered .eyebrow{justify-content:center}
#reviews .review-heading-centered > p:not(.eyebrow){margin-left:auto;margin-right:auto}

@media (max-width:1050px){
  :root{--container:min(100% - 36px, 920px)}
  html{scroll-padding-top:78px}
  body{overflow-x:hidden}

  .nav-wrap{height:72px;gap:14px}
  .brand img{width:166px}
  .mobile-header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
  .mobile-whatsapp-shortcut{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    flex:none;
    color:#fff;
    background:#20b963;
    border:1px solid rgba(255,255,255,.66);
    border-radius:50%;
    box-shadow:0 10px 24px rgba(32,185,99,.28);
  }
  .mobile-whatsapp-shortcut svg{width:27px;height:27px}
  .menu-toggle{
    width:44px;
    height:44px;
    padding:10px;
    border:1px solid rgba(7,17,31,.10);
    border-radius:50%;
    background:#fff;
    box-shadow:0 8px 20px rgba(7,17,31,.07);
  }
  .menu-toggle span{width:21px}

  .site-nav{
    inset:72px 12px auto;
    max-height:calc(100svh - 84px);
    overflow:auto;
    gap:3px;
    padding:18px;
    border:1px solid rgba(7,17,31,.10);
    border-radius:0 0 22px 22px;
    box-shadow:0 24px 55px rgba(7,17,31,.16);
  }
  .site-nav > a:not(.nav-cta):not(.nav-icon-link){
    padding:12px 14px!important;
    border-radius:12px;
  }
  .site-nav > a:not(.nav-cta):not(.nav-icon-link):hover,
  .site-nav > a:not(.nav-cta):not(.nav-icon-link).is-active{background:#f7f1e1}
  .site-nav > a:not(.nav-cta):not(.nav-icon-link)::after{display:none}
  .nav-icon-link{
    width:100%;
    height:48px;
    margin-top:7px;
    padding:0 16px!important;
    justify-content:flex-start;
    gap:11px;
    border-radius:12px;
  }
  .nav-icon-link svg{width:24px!important;height:24px!important;flex:none}
  .nav-icon-label{display:inline;font-size:.86rem;font-weight:800}
  .nav-call-icon{background:#f4f6f9}
  .nav-whatsapp-icon{color:#fff}
  .nav-cta{margin-top:8px;padding:14px 18px!important;text-align:center}

  .hero{padding:102px 0 54px}
  .hero-wide-container{width:var(--container)}
  .hero-grid{gap:34px}
  .hero-copy{max-width:760px}
  .hero h1{
    max-width:740px;
    font-size:clamp(3.2rem,8.6vw,4.6rem);
    line-height:.98;
    letter-spacing:-.055em;
  }
  .hero-description{
    margin-top:18px;
    padding:14px 16px;
    border-left:3px solid #dda72c;
    border-radius:0 14px 14px 0;
    background:rgba(255,255,255,.65);
    box-shadow:0 10px 24px rgba(7,17,31,.05);
  }
  .hero-description .hero-text,
  .hero-description .hero-support{
    margin:0;
    font-size:.94rem;
    line-height:1.5;
  }
  .hero-description .hero-text{font-weight:600;color:#40536b}
  .hero-description .hero-support{margin-top:4px;font-weight:500;color:#5b6c80}
  .hero-actions{margin-top:18px;gap:10px}
  .hero-actions .btn{min-height:50px}
  .hero-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
  .hero-proof span{justify-content:center;text-align:center;padding:9px 8px;font-size:.68rem}
  .hero-visual{max-width:760px}
  .hero-image-card{aspect-ratio:1.28/1;border-radius:24px}
  .hero-image-card > picture > img{object-position:61% center}
  .hero-image-caption{left:22px;right:22px;bottom:18px}

  .section,.contact-section{padding:72px 0}
  .section-heading{margin-bottom:34px}
  .service-grid{gap:16px}
  .process-layout,.faq-layout,.contact-grid{gap:38px}

  /* Process photography is now included on tablet and mobile too. */
  #process .process-item{
    grid-template-columns:48px minmax(0,1fr);
    gap:14px 16px;
    align-items:start;
  }
  #process .process-image{
    display:block;
    grid-column:1/-1;
    width:100%;
    height:190px;
    margin-top:4px;
    overflow:hidden;
    border-radius:15px;
    border:1px solid rgba(82,48,0,.16);
    background:#ead8a5;
    box-shadow:0 10px 24px rgba(91,52,0,.13);
  }
  #process .process-image img{width:100%;height:100%;object-fit:cover}

  .about-grid{grid-template-columns:minmax(260px,.72fr) 1fr;align-items:center}
  .about-visual{max-width:440px;margin-inline:auto}
  .about-copy .about-cta{width:auto}
}

@media (max-width:760px){
  :root{--container:min(100% - 24px, 100%)}
  html{scroll-padding-top:70px}
  .nav-wrap{height:68px}
  .brand img{width:146px}
  .mobile-whatsapp-shortcut,.menu-toggle{width:41px;height:41px}
  .mobile-whatsapp-shortcut svg{width:25px;height:25px}
  .site-nav{inset:68px 8px auto;padding:14px;border-radius:0 0 18px 18px}

  .hero{padding:88px 0 46px}
  .hero-grid{gap:26px}
  .hero h1{
    font-size:clamp(2.45rem,12.7vw,3.55rem);
    line-height:.99;
    letter-spacing:-.052em;
  }
  .hero-desktop-break{display:none}
  .hero-description{margin-top:15px;padding:12px 13px}
  .hero-description .hero-text,
  .hero-description .hero-support{font-size:.84rem;line-height:1.48}
  .hero-actions{display:grid;grid-template-columns:1fr;margin-top:15px}
  .hero-actions .btn{width:100%;min-height:48px;padding:13px 16px}
  .hero-proof{margin-top:10px}
  .hero-proof span{font-size:.62rem;padding:8px 6px}
  .hero-image-card{aspect-ratio:1.12/1;border-radius:20px}
  .hero-image-caption{left:16px;right:16px;bottom:14px}
  .hero-image-caption small{font-size:.61rem}
  .hero-image-caption strong{font-size:.94rem}

  .section,.contact-section{padding:62px 0}
  .section-heading{margin-bottom:28px}
  .section-heading h2{font-size:clamp(2rem,9.5vw,2.9rem)}
  .section-heading p:not(.eyebrow){font-size:.9rem;line-height:1.6}
  .eyebrow{margin-bottom:13px;font-size:.67rem}

  .service-card{min-height:360px!important;border-radius:18px}
  .service-card-media{height:138px}
  .service-card-body{padding:20px 19px 21px}
  .service-card-body h3{font-size:1.1rem}
  .service-card-body p{font-size:.82rem;line-height:1.58}

  .work-card-large,.work-card{min-height:390px}
  .work-overlay{padding:22px}
  .work-overlay p{font-size:.82rem;line-height:1.55}
  .work-promise{padding:23px}

  #process .process-layout{gap:28px}
  #process .process-list{gap:12px}
  #process .process-item{grid-template-columns:38px minmax(0,1fr);padding:16px!important;gap:10px 12px}
  #process .process-item > span{padding-top:4px}
  #process .process-item h3{font-size:1.12rem;line-height:1.25}
  #process .process-item p{font-size:.82rem;line-height:1.58}
  #process .process-image{height:154px;margin-top:3px;border-radius:12px}

  .about-grid{grid-template-columns:1fr;gap:30px}
  .about-visual{width:min(100%,380px)}
  .about-visual img{border-radius:20px}
  .founder-tag{left:12px;right:12px;bottom:12px;padding:12px}
  .founder-tag strong{font-size:.9rem}
  .founder-tag span{font-size:.65rem;line-height:1.4}
  .about-copy h2{font-size:clamp(2.1rem,10vw,3rem)}
  .about-points div{padding:14px}
  .about-copy .about-cta{width:100%;margin-top:18px}

  .moving-reviews-section .section-heading{margin-bottom:24px}
  .moving-review-card{width:min(84vw,300px)}
  .moving-reviews-note{display:none}

  .faq-layout{gap:28px}
  .theme-black .faq-item,.theme-black .faq-item:hover{padding-inline:14px}
  .faq-item button{padding:18px 0;font-size:.88rem}
  .faq-answer{padding-right:8px;font-size:.82rem}

  .contact-grid{gap:30px}
  .contact-copy h2{font-size:clamp(2.2rem,10.4vw,3.2rem)}
  .contact-copy > p:not(.eyebrow){font-size:.9rem}
  .contact-direct{margin-top:20px}
  .lead-form{padding:21px 16px;border-radius:18px}
  .form-head h3{font-size:1.42rem}

  .footer-grid{grid-template-columns:1fr;gap:26px}
  .footer-brand{grid-column:auto}
  .footer-grid > div:last-child{grid-column:auto}
  .footer-bottom{gap:8px;margin-top:28px}
  .site-footer{padding-bottom:24px}
}

@media (max-width:390px){
  .brand img{width:136px}
  .mobile-header-actions{gap:6px}
  .mobile-whatsapp-shortcut,.menu-toggle{width:39px;height:39px}
  .hero h1{font-size:clamp(2.25rem,12.2vw,3rem)}
  .hero-proof span{font-size:.58rem}
  #process .process-image{height:142px}
}