/*
 * Insighterz homepage responsive system — v3.2.1
 * Loaded last on the front page so every homepage section uses one predictable
 * breakpoint system after the editorial/production art-direction layers.
 */

.home-page{
  --home-gap:clamp(28px,4.5vw,72px);
}

.home-page main{
  width:100%;
  max-width:100%;
  overflow-x:clip;
}

/* Every direct layout child must be shrinkable. This prevents long ACF copy,
   buttons, labels and cards from silently widening a grid/flex track. */
.home-page :where(
  .hero-copy,.hero-visual,.intro-grid>*,.section-head>*,.service-row>*,
  .featured-project>*,.project-grid>*,.process-item>*,.numbers-intro>*,
  .numbers-grid>*,.testimonial-grid>*,.insight-grid>*,.contact-panel>*,
  .exp-head>*,.system-flow>*,.industry-ledger>a>*,.tech-rail>*
){min-width:0}

.home-page :where(h1,h2,h3,p,strong,span,a){overflow-wrap:break-word}
.home-page :where(.hero-visual,.project-visual,.project-card,.insight-card,.system-board,.industry-ledger,.tech-rail){max-width:100%}
.home-page :where(.visual-canvas img,.project-visual img){max-width:100%;height:100%}

/* HERO — percentages + a flex gap previously made the two columns wider than
   their container on common desktop widths. A real grid keeps the total at 100%. */
.home-page .hero{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:var(--home-gap);
  align-items:center;
}
.home-page .hero-copy,.home-page .hero-visual{width:auto;max-width:none}
.home-page .hero h1{max-width:100%}
.home-page .hero-lede{max-width:64ch}
.home-page .hero-proof{display:flex;flex-wrap:wrap;gap:28px clamp(22px,3.2vw,44px)}
.home-page .visual-frame{height:clamp(520px,45vw,650px);max-height:650px}

/* INTRO */
.home-page .intro-grid{
  grid-template-columns:minmax(0,1.18fr) minmax(280px,.72fr);
  gap:clamp(40px,6vw,90px);
}
.home-page .principles-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Section headings have a predictable editorial split instead of a fixed-width
   paragraph fighting a flex heading. */
.home-page .section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,360px);
  gap:clamp(28px,5vw,60px);
  align-items:end;
}
.home-page .section-head>p{width:auto;max-width:360px;justify-self:end}
.home-page .section-head>.text-arrow{justify-self:end;align-self:end}

/* SERVICES */
.home-page .service-row{
  grid-template-columns:44px 44px minmax(220px,.88fr) minmax(260px,1.12fr) 40px;
  gap:clamp(14px,2vw,22px);
}
.home-page .service-name,.home-page .service-desc{min-width:0}
.home-page .service-desc{max-width:none}

/* PROJECTS */
.home-page .featured-project{
  grid-template-columns:minmax(0,1.42fr) minmax(300px,.72fr);
  gap:clamp(30px,4vw,50px);
}
.home-page .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-page .project-visual-main{min-height:clamp(460px,42vw,570px)}
.home-page .project-card .project-visual{height:clamp(300px,29vw,390px)}

/* PROCESS */
.home-page .process-item{
  grid-template-columns:48px 48px minmax(0,1.25fr) minmax(170px,.75fr);
  gap:clamp(14px,2vw,25px);
}
.home-page .process-item>span{max-width:260px;text-align:right}

/* NUMBERS / TESTIMONIAL / INSIGHTS */
.home-page .numbers-intro{grid-template-columns:minmax(200px,.62fr) minmax(0,1.38fr)}
.home-page .numbers-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-page .testimonial-grid{grid-template-columns:minmax(190px,.34fr) minmax(0,1fr)}
.home-page .insight-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Expanded homepage sections */
.home-page .exp-head{grid-template-columns:minmax(0,1.12fr) minmax(280px,.68fr)}
.home-page .system-flow{grid-template-columns:repeat(5,minmax(0,1fr))}
.home-page .system-node{min-width:0}
.home-page .industry-ledger a{grid-template-columns:minmax(180px,.65fr) minmax(0,1.35fr) 24px}
.home-page .tech-rail{grid-template-columns:repeat(6,minmax(0,1fr))}

/* CTA */
.home-page .contact-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
.home-page .contact-copy{min-width:0}

/* ---------------------------------------------
   Compact desktop / laptop
   --------------------------------------------- */
@media (max-width:1280px){
  .home-page .hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:42px}
  .home-page .visual-frame{height:clamp(500px,48vw,610px)}
  .home-page .hero-proof{margin-top:48px}

  .home-page .service-row{grid-template-columns:40px 42px minmax(210px,.85fr) minmax(240px,1.15fr) 38px;gap:16px}
  .home-page .featured-project{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:34px}

  .home-page .insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-page .insight-card:last-child{grid-column:1/-1;min-height:280px}

  .home-page .system-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home-page .system-node::after{display:none}
  .home-page .tech-rail{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------------------------------------------
   Small desktop / landscape tablet
   --------------------------------------------- */
@media (max-width:1120px){
  .home-page .hero{
    grid-template-columns:1fr;
    gap:34px;
    min-height:auto;
    padding-top:128px;
  }
  .home-page .hero-copy,.home-page .hero-visual{width:100%}
  .home-page .hero-copy{max-width:880px}
  .home-page .visual-frame{height:clamp(500px,62vw,620px)}

  .home-page .intro-grid{grid-template-columns:1fr;gap:32px}
  .home-page .intro-copy{max-width:760px}

  .home-page .principles-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home-page .principles-grid article{padding:28px}

  .home-page .service-row{
    grid-template-columns:38px 42px minmax(0,1fr) 38px;
    grid-template-rows:auto auto;
    align-items:start;
    padding:24px 0;
    min-height:0;
  }
  .home-page .service-index{grid-column:1;grid-row:1/3;padding-top:9px}
  .home-page .service-icon{grid-column:2;grid-row:1/3}
  .home-page .service-name{grid-column:3;grid-row:1}
  .home-page .service-desc{grid-column:3;grid-row:2;margin-top:8px;display:block}
  .home-page .service-arrow{grid-column:4;grid-row:1/3;align-self:center}

  .home-page .featured-project{grid-template-columns:1fr}
  .home-page .project-content{max-width:780px;padding-right:0}
  .home-page .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

  .home-page .process-item{
    grid-template-columns:44px 44px minmax(0,1fr);
    grid-template-rows:auto auto;
    padding:24px 0;
  }
  .home-page .process-item>span{grid-column:3;grid-row:2;justify-self:start;text-align:left;margin:4px 0 0;max-width:none}

  .home-page .numbers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-page .numbers-grid article:nth-child(2n){border-right:0}
  .home-page .numbers-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}

  .home-page .testimonial-grid{grid-template-columns:minmax(160px,.28fr) minmax(0,1fr);gap:42px}

  .home-page .exp-head{grid-template-columns:1fr;gap:20px}
  .home-page .exp-head p{max-width:760px}
  .home-page .industry-ledger a{grid-template-columns:minmax(160px,.55fr) minmax(0,1.45fr) 24px}

  .home-page .contact-panel{grid-template-columns:1fr;gap:32px;align-items:start}
  .home-page .contact-actions{justify-self:start}
}

/* ---------------------------------------------
   Tablet
   --------------------------------------------- */
@media (max-width:900px){
  .home-page .section-head{grid-template-columns:1fr;gap:20px;align-items:start}
  .home-page .section-head>p,.home-page .section-head>.text-arrow{justify-self:start;max-width:680px}

  .home-page .principles-grid{grid-template-columns:1fr}
  .home-page .principles-grid article{border-right:0;border-bottom:1px solid var(--line)}
  .home-page .principles-grid article:last-child{border-bottom:0}

  .home-page .project-grid{grid-template-columns:1fr}
  .home-page .project-card .project-visual{height:clamp(300px,52vw,420px)}

  .home-page .testimonial-grid{grid-template-columns:1fr;gap:28px}
  .home-page .testimonial-content{min-width:0}

  .home-page .insight-grid{grid-template-columns:1fr}
  .home-page .insight-card:last-child{grid-column:auto}

  .home-page .system-flow{grid-template-columns:repeat(2,minmax(0,1fr));padding:24px}
  .home-page .industry-ledger a{grid-template-columns:minmax(140px,.55fr) minmax(0,1fr) 22px;gap:16px}
}

/* ---------------------------------------------
   Phones
   --------------------------------------------- */
@media (max-width:780px){
  .home-page main{overflow-x:hidden}
  .home-page .hero{padding-top:108px;padding-bottom:66px;gap:24px}
  .home-page .hero h1{font-size:clamp(42px,12vw,60px)}
  .home-page .hero-actions{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
  .home-page .hero-actions .btn{width:100%;min-width:0}
  .home-page .hero-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:36px}
  .home-page .proof-item{padding-left:10px;min-width:0}
  .home-page .proof-item p{white-space:normal}

  .home-page .visual-frame{height:clamp(390px,112vw,500px);min-height:0}
  .home-page .visual-stat{width:138px}
  .home-page .visual-footer{gap:8px}
  .home-page .visual-footer span{min-width:0;text-align:center}

  .home-page .capability-strip .marquee{width:100%}

  .home-page .intro,.home-page .services,.home-page .showcase,.home-page .process,.home-page .insights{padding-top:82px;padding-bottom:86px}
  .home-page .display-title{font-size:clamp(34px,9vw,44px)}

  .home-page .service-row{
    grid-template-columns:36px minmax(0,1fr) 32px;
    gap:12px;
    padding:22px 0;
  }
  .home-page .service-index{display:none}
  .home-page .service-icon{grid-column:1;grid-row:1/3;width:34px;height:34px}
  .home-page .service-name{grid-column:2;grid-row:1}
  .home-page .service-name h3{font-size:18px}
  .home-page .service-name span{display:block;margin-top:5px}
  .home-page .service-desc{grid-column:2;grid-row:2;font-size:13px;line-height:1.7;margin-top:9px}
  .home-page .service-arrow{grid-column:3;grid-row:1/3;width:30px;height:30px;align-self:center}

  .home-page .project-visual-main{min-height:0;height:clamp(280px,72vw,380px)}
  .home-page .project-card .project-visual{height:clamp(260px,68vw,340px)}
  .home-page .project-content h3{font-size:clamp(30px,8vw,38px)}

  .home-page .process-item{
    grid-template-columns:38px minmax(0,1fr);
    grid-template-rows:auto auto auto;
    gap:7px 14px;
    min-height:0;
    padding:22px 0;
  }
  .home-page .process-num{grid-column:1;grid-row:1;color:#718494}
  .home-page .process-icon{grid-column:1;grid-row:2;width:36px;height:36px}
  .home-page .process-item>div:not(.process-num):not(.process-icon){grid-column:2;grid-row:1/3}
  .home-page .process-item>span{grid-column:2;grid-row:3;margin:5px 0 0}

  .home-page .numbers-panel{padding:0}
  .home-page .numbers-intro{grid-template-columns:1fr;gap:14px;padding:28px 0}
  .home-page .numbers-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-page .numbers-grid article{padding:26px 16px}

  .home-page .testimonial-grid{padding:34px 0}
  .home-page .testimonial-content blockquote{font-size:clamp(26px,7vw,34px)}
  .home-page .testimonial-person{gap:12px}

  .home-page .insight-card{min-height:280px;padding:24px}

  .home-page .exp-section{padding-top:76px!important;padding-bottom:76px!important}
  .home-page .exp-head h2{font-size:clamp(32px,8.7vw,40px)}
  .home-page .system-board-head{height:auto;min-height:48px;padding:13px 14px;gap:12px;flex-wrap:wrap}
  .home-page .system-flow{grid-template-columns:1fr;padding:16px;gap:10px}
  .home-page .system-node{min-height:100px}
  .home-page .industry-ledger a{grid-template-columns:minmax(0,1fr) 22px;padding:19px 18px}
  .home-page .industry-ledger small{grid-column:1;grid-row:2}
  .home-page .industry-ledger i{grid-column:2;grid-row:1/3;align-self:center}
  .home-page .tech-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-page .tech-rail span{min-height:72px;padding:10px}

  .home-page .contact-panel{padding:30px 24px;gap:28px}
  .home-page .contact-copy h2{font-size:clamp(34px,9vw,44px)}
  .home-page .contact-actions{display:grid;grid-template-columns:minmax(0,1fr) 52px;width:100%;gap:10px}
  .home-page .contact-actions .btn-light{width:100%;min-width:0}
}

@media (max-width:560px){
  .home-page .hero-proof{grid-template-columns:1fr 1fr}
  .home-page .proof-item:nth-child(3){grid-column:1/-1}

  .home-page .visual-chrome{padding:0 12px}
  .home-page .chrome-title{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .home-page .chrome-status{font-size:0}
  .home-page .chrome-status i{display:block}
  .home-page .visual-footer{font-size:7px;padding:0 8px}
  .home-page .visual-stat.stat-right{display:none}

  .home-page .numbers-grid{grid-template-columns:1fr}
  .home-page .numbers-grid article{border-right:0!important;border-bottom:1px solid var(--line)!important}
  .home-page .numbers-grid article:last-child{border-bottom:0!important}

  .home-page .tech-rail{grid-template-columns:1fr 1fr}
}

@media (max-width:420px){
  .home-page .hero h1{font-size:clamp(38px,11.5vw,48px)}
  .home-page .hero-proof{grid-template-columns:1fr}
  .home-page .proof-item:nth-child(3){grid-column:auto}
  .home-page .visual-frame{height:380px}
  .home-page .visual-stat.stat-left{transform:scale(.76)!important;transform-origin:left bottom}

  .home-page .service-row{grid-template-columns:34px minmax(0,1fr) 30px;gap:10px}
  .home-page .service-desc{font-size:12.5px}

  .home-page .contact-actions{grid-template-columns:1fr}
  .home-page .circle-btn{width:100%;height:48px}

  .home-page .tech-rail{grid-template-columns:1fr}
}