@font-face{
font-family:"Lemon Milk";
src:url("https://cityhomebuilders.com.au/wp-content/uploads/2026/09/LEMONMILK-Light.ttf") format("truetype");
font-weight:300;
font-style:normal;
font-display:swap;
}
@font-face{
font-family:"Lemon Milk";
src:url("https://cityhomebuilders.com.au/wp-content/uploads/2026/09/LEMONMILK-Medium.ttf") format("truetype");
font-weight:500;
font-style:normal;
font-display:swap;
}

html.chb-path-modal-open,body.chb-path-modal-open{overflow:hidden!important}
.chb-build-path,.chb-build-path *{box-sizing:border-box;border-radius:0!important}

.chb-build-path{
position:relative;
display:block;
margin:0!important;
border:0!important;
background:var(--chb-light);
color:#15171a;
padding:72px 0 82px;
overflow:hidden;
}

/* intentionally no top rule / decorative line */
.chb-build-path:before,
.chb-build-path:after{display:none!important;content:none!important}

.chb-build-path__shell{
width:min(100%,1620px);
margin:0 auto;
padding:0 26px;
}

.chb-build-path__header{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
margin:0 auto 28px;
max-width:760px;
}

.chb-path-eyebrow{
display:inline-flex;
align-items:center;
gap:11px;
font-family:"Lemon Milk",Arial,sans-serif;
font-weight:300;
font-size:7px;
line-height:1;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--chb-gold);
margin-bottom:10px;
}

.chb-path-eyebrow:before,
.chb-path-eyebrow:after{
content:"";
display:block;
width:24px;
height:1px;
background:var(--chb-gold);
}

.chb-build-path h2,
.chb-path-modal h3{
font-family:"Lemon Milk",Arial,sans-serif!important;
font-weight:500!important;
text-transform:uppercase!important;
letter-spacing:-.04em;
}

.chb-build-path h2{
font-size:clamp(30px,3.6vw,48px);
line-height:.98;
margin:0;
}

.chb-build-path__header>p{
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
line-height:1.6;
color:#6a6a67;
margin:15px auto 0;
max-width:470px;
text-transform:none!important;
}


.chb-build-path__shell:not(:has(.chb-build-path__header)){
padding-top:0;
}
.chb-build-path__shell:not(:has(.chb-build-path__header)) .chb-build-path__grid{
margin-top:0;
}

.chb-build-path__grid{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:10px;
}

.chb-path-card{
position:relative;
isolation:isolate;
height:410px;
padding:0;
overflow:hidden;
border:0!important;
outline:0;
background:#161719;
color:#fff;
text-align:left;
cursor:pointer;
}

.chb-path-card__image,
.chb-path-card__shade{
position:absolute;
inset:0;
}

.chb-path-card__image{
z-index:-3;
background:center/cover no-repeat;
transition:transform .5s cubic-bezier(.2,.75,.2,1),filter .35s ease;
}

.chb-path-card__shade{
z-index:-2;
background:linear-gradient(180deg,rgba(0,0,0,.01) 40%,rgba(0,0,0,.72) 100%);
}

.chb-path-card__content{
position:absolute;
left:0;
right:0;
bottom:0;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:17px 16px 16px;
border-top:1px solid rgba(255,255,255,.16);
}

.chb-path-card strong{
font-family:"Lemon Milk",Arial,sans-serif;
font-weight:500;
font-size:clamp(14px,1.05vw,18px);
line-height:1.08;
letter-spacing:-.02em;
text-transform:uppercase;
color:#fff;
}

.chb-path-card__arrow{
width:17px;
height:17px;
flex:0 0 auto;
color:var(--chb-gold);
transition:transform .22s ease;
}

.chb-path-card:hover .chb-path-card__image{
transform:scale(1.04);
filter:saturate(1.06);
}

.chb-path-card:hover .chb-path-card__arrow{
transform:translateX(4px);
}

/* POPUP */
.chb-path-modal{
display:none;
position:fixed;
inset:0;
z-index:999999;
}
.chb-path-modal.is-open{display:block}
.chb-path-modal__backdrop{
position:absolute;
inset:0;
background:rgba(8,10,11,.76);
backdrop-filter:blur(7px);
}
.chb-path-modal__panel{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:min(1120px,calc(100% - 48px));
height:min(680px,calc(100vh - 64px));
display:grid;
grid-template-columns:1.08fr .92fr;
background:#fff;
overflow:hidden;
box-shadow:0 28px 90px rgba(0,0,0,.30);
}
.chb-path-modal__close{
position:absolute;
right:18px;
top:18px;
z-index:5;
width:44px;
height:44px;
border:1px solid rgba(0,0,0,.12);
background:#fff;
color:#111;
display:grid;
place-items:center;
cursor:pointer;
}
.chb-path-modal__close svg{width:20px;height:20px}
.chb-path-modal__image{
position:relative;
background:center/cover no-repeat;
}
.chb-path-modal__image:after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));
}
.chb-path-modal__image>span{
position:absolute;
left:24px;
bottom:16px;
z-index:2;
font-family:"Lemon Milk",Arial,sans-serif;
font-weight:500;
font-size:88px;
line-height:1;
letter-spacing:-.06em;
color:rgba(255,255,255,.82);
}
.chb-path-modal__body{
padding:60px 54px;
display:flex;
flex-direction:column;
justify-content:center;
overflow:auto;
}
.chb-path-modal__body .chb-path-eyebrow{
align-self:flex-start;
}
.chb-path-modal__body .chb-path-eyebrow:after{display:none}
.chb-path-modal h3{
font-size:clamp(38px,4vw,60px);
line-height:.98;
margin:18px 0 22px;
}
.chb-path-modal__body>p{
font-family:Arial,Helvetica,sans-serif;
font-size:17px;
line-height:1.75;
color:#626262;
margin:0 0 32px;
text-transform:none!important;
}
.chb-path-modal__cta{
align-self:flex-start;
display:inline-flex;
align-items:center;
justify-content:center;
gap:16px;
min-height:52px;
padding:0 24px;
background:var(--chb-gold);
color:#111!important;
font-family:"Lemon Milk",Arial,sans-serif;
font-weight:500;
font-size:9px;
letter-spacing:.08em;
text-transform:uppercase;
text-decoration:none!important;
}
.chb-path-modal__cta svg{width:17px;height:17px}

/* REVEAL */
.chb-path-reveal{
opacity:0;
transform:translateY(14px);
transition:opacity .55s ease,transform .55s ease;
}
.chb-path-reveal.is-visible{
opacity:1;
transform:none;
}

@media(max-width:1100px){
.chb-build-path__grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}

/* MOBILE — 2 ACROSS */
@media(max-width:700px){
.chb-build-path{
padding:28px 0 34px;
}
.chb-build-path__shell{
padding:0 8px;
}
.chb-build-path__header{
margin-bottom:24px;
}
.chb-path-eyebrow{
font-size:6px;
margin-bottom:11px;
}
.chb-path-eyebrow:before,
.chb-path-eyebrow:after{
width:20px;
}
.chb-build-path h2{
font-size:28px;
line-height:1;
}
.chb-build-path__header>p{
font-size:12px;
line-height:1.55;
margin-top:10px;
max-width:280px;
}
.chb-build-path__grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
}
.chb-path-card{
height:220px;
}
.chb-path-card__content{
padding:12px 10px 11px;
gap:6px;
}
.chb-path-card strong{
font-size:12px;
line-height:1.05;
}
.chb-path-card__arrow{
width:13px;
height:13px;
}

/* fullscreen mobile popup */
.chb-path-modal__panel{
width:100%;
height:100%;
max-height:none;
grid-template-columns:1fr;
grid-template-rows:38vh 1fr;
}
.chb-path-modal__body{
padding:32px 20px 38px;
}
.chb-path-modal h3{
font-size:36px;
}
.chb-path-modal__image>span{
font-size:60px;
left:18px;
bottom:10px;
}
}

@media(prefers-reduced-motion:reduce){
.chb-path-reveal{
opacity:1;
transform:none;
transition:none;
}
.chb-path-card__image{transition:none}
}

@media(min-width:1500px){
  .chb-build-path__shell{padding-left:24px;padding-right:24px}
  .chb-path-card{height:430px}
}


@media(max-width:700px){
  .chb-build-path__grid > .chb-path-card:last-child:nth-child(odd){
    grid-column:1 / -1;
  }
}


.chb-build-path h2{
max-width:620px;
}
.chb-build-path__header>p{
color:#6f6f6b;
}


/* =========================================================
   v1.3.2 — MOBILE HEIGHT INCREASE
   Keep the same layout, just give the section/cards more height.
   ========================================================= */
@media(max-width:700px){
  .chb-build-path{
    padding:42px 0 48px;
  }

  .chb-build-path__header{
    margin-bottom:30px;
  }

  .chb-path-card{
    height:270px;
  }
}