/* INDALO v281 — responsive hardening + single-layer hero backgrounds.
   Loaded last so legacy breakpoint rules cannot re-introduce overflow or tiny touch targets. */

html,
body{
  max-width:100%;
  overflow-x:clip;
}
img,video,iframe,svg{max-width:100%}

/* ---------- Header / mobile navigation ---------- */
@media (max-width:991.98px){
  .header .burger,
  .nav__close{
    min-width:46px !important;
    min-height:46px !important;
  }
  .header .nav__submenu-toggle{
    min-width:46px !important;
    min-height:46px !important;
    margin:6px !important;
  }
  .header .nav__row{
    grid-template-columns:minmax(0,1fr) 58px !important;
  }
}

/* ---------- Home hero ---------- */
/* Preserve the source aspect ratio. The old 100% 100% rule distorted interiors. */
#hero .hero__bg{
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
@media (min-width:1200px){
  /* v281: show the complete 2560x1200 source frame without distortion or crop.
     The second layer is ONLY a colour gradient that fills letterbox space; it is
     not another copy of the photograph, so no duplicate/seam can appear. */
  #hero .hero__bg{
    background-repeat:no-repeat,no-repeat !important;
    background-size:contain,100% 100% !important;
    background-position:center center,center center !important;
  }
  #hero .hero__slide:nth-child(1) .hero__bg{
    background-image:
      url('hero-wide/invest-standard.webp?v=281'),
      linear-gradient(90deg,rgb(90,76,66) 0%,rgb(142,137,134) 100%) !important;
  }
  #hero .hero__slide:nth-child(2) .hero__bg{
    background-image:
      url('hero-wide/management-standard.webp?v=281'),
      linear-gradient(90deg,rgb(176,173,168) 0%,rgb(189,192,192) 100%) !important;
  }
  #hero .hero__slide:nth-child(3) .hero__bg{
    background-image:
      url('hero-wide/supply-standard.webp?v=281'),
      linear-gradient(90deg,rgb(78,68,57) 0%,rgb(225,225,221) 100%) !important;
  }
}
/* Keep the requested lowered desktop composition on tall screens, but prevent it
   from pushing content below the viewport on laptops / short desktop windows. */
@media (min-width:1200px) and (max-height:900px){
  #hero .hero__content{top:48px !important}
}
@media (min-width:1200px) and (max-height:760px){
  #hero .hero__content{top:0 !important}
  #hero .hero__inner.container-xl{padding-top:52px !important}
}

/* Tablet and mobile: hero must fit the actual visible viewport. */
@media (max-width:991.98px){
  #hero .hero__slider{
    height:calc(100vh - var(--header-h)) !important;
    height:calc(100svh - var(--header-h)) !important;
    min-height:0 !important;
  }
  #hero .hero__inner.container-xl{
    padding-left:64px !important;
    padding-right:64px !important;
  }
  #hero .hero__nav-btn{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
  }
  #hero .hero__nav-btn--prev{left:8px !important}
  #hero .hero__nav-btn--next{right:8px !important}
  #hero .hero__dot,
  #hero .hero__dot.is-active{
    min-width:44px !important;
    width:44px !important;
    min-height:44px !important;
    height:44px !important;
    flex-basis:44px !important;
  }
}

@media (max-width:767.98px){
  #hero .hero__inner.container-xl{
    padding:clamp(22px,4.4vh,36px) 58px 16px !important;
  }
  #hero .hero__content,
  #hero .hero__main{
    width:100% !important;
    max-width:100% !important;
  }
  #hero .hero__main .hero__title{
    font-size:clamp(30px,9.2vw,42px) !important;
    line-height:1.01 !important;
  }
  #hero .hero__action{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-top:14px !important;
  }
  #hero .hero__action .btn,
  #hero .hero__action .hero__btn-secondary{
    width:100% !important;
    min-width:0 !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 12px !important;
    white-space:normal !important;
    text-align:center !important;
  }
  #hero .hero-av-slot{
    width:100% !important;
    max-width:100% !important;
    margin-top:13px !important;
  }
  #hero #heroAvTools.hero-av-tools{gap:7px !important}
  #hero #heroAvTools .hero-av-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
  }
  #hero #heroAvTools .hero-av-tool,
  #hero #heroAvTools .hero-av-btn{
    width:100% !important;
    min-width:0 !important;
  }
  #hero #heroAvTools .hero-av-btn{
    min-height:42px !important;
    height:42px !important;
    padding:0 10px !important;
  }
  #hero .hero__controls{
    min-height:44px !important;
    height:44px !important;
    margin-top:8px !important;
  }
}

/* Very short phones / landscape phones: compact everything rather than forcing
   the old 620–650px minimum height. */
@media (max-width:991.98px) and (max-height:600px){
  #hero .hero__slider{
    height:calc(100svh - var(--header-h)) !important;
    min-height:0 !important;
  }
  #hero .hero__inner.container-xl{
    padding:12px 60px 8px !important;
  }
  #hero .hero__main .hero__title{
    font-size:clamp(25px,5vw,33px) !important;
    line-height:.98 !important;
  }
  #hero .hero__action{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:7px !important;
    margin-top:8px !important;
  }
  #hero .hero__action .btn,
  #hero .hero__action .hero__btn-secondary{
    width:auto !important;
    flex:1 1 0 !important;
    min-width:0 !important;
    height:36px !important;
    min-height:36px !important;
    padding:0 8px !important;
    font-size:9.5px !important;
    line-height:1.1 !important;
  }
  #hero .hero-av-slot{
    width:min(100%,310px) !important;
    margin-top:8px !important;
  }
  #hero #heroAvTools.hero-av-tools{gap:4px !important}
  #hero #heroAvTools .hero-av-tools__eyebrow{font-size:8px !important}
  #hero #heroAvTools .hero-av-btn{
    height:36px !important;
    min-height:36px !important;
    padding:0 8px !important;
    gap:6px !important;
  }
  #hero #heroAvTools .hero-av-btn__icon{
    width:24px !important;
    height:24px !important;
    flex-basis:24px !important;
  }
  #hero #heroAvTools .hero-av-btn__copy strong{font-size:10px !important}
  #hero .hero__controls{
    min-height:36px !important;
    height:36px !important;
    margin-top:3px !important;
  }
  #hero .hero__dot,
  #hero .hero__dot.is-active{
    min-width:44px !important;
    width:44px !important;
    min-height:36px !important;
    height:36px !important;
  }
}

/* ---------- Home projects ---------- */
@media (max-width:575.98px){
  #projects .toolbar{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
    max-width:100% !important;
    margin-right:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }
  #projects .filter-btn{
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    height:auto !important;
    padding:9px 10px !important;
    white-space:normal !important;
    line-height:1.2 !important;
  }
  #projects .filter-btn:first-child{grid-column:1/-1}

  #projects .slider-dots{
    gap:0 !important;
    margin-top:12px !important;
  }
  #projects .slider-dot,
  #projects .slider-dot.is-active{
    position:relative !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }
  #projects .slider-dot::before{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    width:8px !important;
    height:8px !important;
    border-radius:50% !important;
    background:#d8cec2 !important;
    transform:translate(-50%,-50%) !important;
  }
  #projects .slider-dot.is-active::before{
    width:18px !important;
    border-radius:999px !important;
    background:#a97945 !important;
  }
}

/* ---------- Home "5 in 1" ---------- */
@media (max-width:430px){
  #process.home-process-v270-exact .hp270-row{
    grid-template-columns:58px minmax(0,1fr) !important;
    gap:10px !important;
    min-height:0 !important;
    padding:14px 0 16px !important;
  }
  #process.home-process-v270-exact .hp270-media{
    grid-column:1/-1 !important;
    width:100% !important;
    height:176px !important;
  }
  #process.home-process-v270-exact .hp270-num{
    width:auto !important;
    justify-self:start !important;
    text-align:left !important;
    padding-top:4px !important;
    font-size:25px !important;
  }
  #process.home-process-v270-exact .hp270-copy{
    padding:0 !important;
  }
  #process.home-process-v270-exact .hp270-copy h3{
    font-size:25px !important;
    line-height:1.06 !important;
  }
  #process.home-process-v270-exact .hp270-copy p{
    margin-top:9px !important;
    font-size:12.5px !important;
    line-height:1.55 !important;
  }
}

/* ---------- Professional page ---------- */
@media (max-width:767.98px){
  .pro-page,
  .pro-page .pro-hero,
  .pro-page .pro-hero__grid,
  .pro-page .pro-hero__copy{
    min-width:0 !important;
    max-width:100% !important;
  }
  .pro-page .pro-hero h1{
    width:100% !important;
    max-width:100% !important;
    font-size:clamp(31px,9.2vw,40px) !important;
    line-height:1.02 !important;
    letter-spacing:-.035em !important;
    text-wrap:wrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
  .pro-page .pro-hero h1 span{display:block !important}
  .pro-page .pro-hero__lead{max-width:100% !important}
  .pro-page .pro-visual{width:100% !important;max-width:100% !important}
}
@media (max-width:359.98px){
  .pro-page .pro-hero h1{font-size:30px !important}
}

/* ---------- Generic safety for narrow pages ---------- */
@media (max-width:575.98px){
  main :where(h1,h2,h3,p,a,span,strong){max-width:100%}
  main :where(h1,h2,h3){overflow-wrap:break-word}
  input,select,textarea,button{max-width:100%}
}