:root{
    --image-radius--img-desktop-small: .5rem;
} 


body {
    background-color: #f4f7f7;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

img {
    width:100%;
    height:auto;
}

.hero {
    padding: 60px 0;
}

.heading-style_h1 {
    font-size: 3.5rem;
    font-weight: 500;
    line-height: 110%;
}

.heading-style_h2 {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 110%;
}

.heading-style_h3 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 110%;
}


.hero h1 {
    font-size: 3.5rem;
    font-weight: 500;
    line-height: 110%;
}

.hero .container {
    padding-left: 4rem;
    padding-right: 4rem;
}

.home_text-comp {
    grid-column-gap: 7.5rem;
    grid-row-gap: 7.5rem;
    flex-flow: column;
    display: flex;
}

.content-grid {
    grid-column-gap: 1rem;
    grid-row-gap: 5rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
    width: 100%;
}

.content-wrap.width-80 {
    max-width: 30rem;
}

.content-wrap {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
}

.content-grid-span.is-hidden-on-tablet{
    grid-area: span 1 / span 1 / span 1 / span 1;
}
    
.content-wrap.width-60 {
    max-width: 60rem;
}
.width-40 {
    max-width: 40rem;
}


.project-card_link {
    text-decoration: none;
    color: inherit;
}

.project-card_info {
    margin-top: 1.5rem;
}

.project-card_item {
    margin-bottom: 4rem;
}

.project-card_image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: var(--image-radius--img-desktop-small);
}

.project-card_title {
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 130%;
}

.project-card_filter-wrap {
    margin-top: .5rem;
    grid-column-gap: .255rem;
    grid-row-gap: .255rem;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}

.project-card_category {
    white-space: nowrap;
    border: 1px solid;
    border-radius: 1rem;
    margin-bottom: 0;
    padding: .25rem .5rem;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1;
}

.project-hero_intro {
    font-weight: 500;
}



/* Construction page */
.construction-page{padding:120px 0;background:linear-gradient(180deg,#f7fafc 0%,#fff 100%);min-height:60vh;display:flex;align-items:center}
.construction-page{padding:0;background:linear-gradient(180deg,#f7fafc 0%,#fff 100%);min-height:100vh;display:flex;align-items:center;justify-content:center}
.construction-inner{text-align:center;margin:0 auto;max-width:760px}
.construction-logo{height:72px;margin-bottom:22px}
.construction-logo-text{font-weight:800;font-size:22px;margin-bottom:12px}
.construction-page h1{font-size:36px;margin:0 0 12px;color:#071028}
.construction-page p{color:#33434a;font-size:18px;margin:0 0 12px}
.construction-page .small{opacity:0.7;font-size:14px}
.construction-page .btn{background:#061226;color:#fff;padding:12px 18px;border-radius:8px;text-decoration:none;display:inline-block;margin-top:14px}

/* Hide header/footer while on construction template */
body.construction-mode .site-header,
body.construction-mode .site-footer {
	display: none !important;
}

/* Make sure the main content area doesn't get extra offset */
body.construction-mode #site-content{padding-top:0;padding-bottom:0}


.reveal-on-scroll{opacity:0;transform:translate3d(0px,50px,0) scale3d(1,1,1) rotate(0deg) rotateZ(0deg) skew(0deg,0deg);transition:transform .75s cubic-bezier(.2,.9,.2,1),opacity .6s ease;will-change:transform,opacity}
.reveal-on-scroll.is-visible{opacity:1;transform:translate3d(0px,0px,0) scale3d(1,1,1) rotate(0deg) rotateZ(0deg) skew(0deg,0deg)}

.project-content_image img {
    border-radius: var(--image-radius--img-desktop-small);
  
}


/* Page transition overlay (single-bar translateY animation) */
.transition{position:fixed;inset:0;z-index:9999;pointer-events:none;display:flex;align-items:center;justify-content:center;background:transparent}
	.transition-inner{position:relative;width:100%;height:100vh;overflow:hidden}
	.transition .tbar{position:absolute;left:0;top:0;width:100%;height:100%;background:#061226;transform:translateY(0%);transition:transform .9s cubic-bezier(.2,.9,.2,1);will-change:transform}
	.transition .transition-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:1;transition:opacity .6s ease}
	.transition .transition-logo img{height:48px;filter:brightness(0) invert(1)}

	/* Enter: slide the single bar up to cover, then out */
	.transition.is-entering .tbar{transform:translateY(0)}
	.transition.is-entered .tbar{transform:translateY(0%);transition-duration:.75s; height:0%; transition:all 0.75s ease;}
	.transition.is-entered .transition-logo{opacity:0}

	/* Leaving: show bar then navigate (JS controls timing) */
	.transition.is-leaving{pointer-events:auto}
	.transition.is-leaving .tbar{transform:translateY(0);transition-duration:.7s}

/* hide overlay once done */
.transition.hidden{display:none}

/* Preview helper: force overlay visible when body has `show-transition` */
body.show-transition .transition,
body.show-transition .transition.hidden{
	display:flex !important;
	pointer-events:auto !important;
}