:root{
  /* Matrix brand palette */
  --matrix-charcoal:#333333;
  --matrix-paper:#f7f5f2;
  --matrix-taupe:#c9c1b8;
  --matrix-green:#3f4a40;
  --matrix-grey:#8e8e8e;
  --matrix-caramel:#b48655;

  /* Site tokens */
  --ink:var(--matrix-charcoal);
  --muted:#6f6f6f;
  --paper:var(--matrix-paper);
  --soft:var(--matrix-taupe);
  --white:#ffffff;
  --line:rgba(51,51,51,.16);
  --accent:var(--matrix-caramel);
  --accent-dark:var(--matrix-green);
  --charcoal:var(--matrix-charcoal);
  --max:1180px;
  --ease:cubic-bezier(.2,.75,.24,1);

  --font-heading:"Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-ui:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:"Open Sans", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.55;font-weight:400}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.eyebrow{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#3f4a40;font-weight:600}
.hero .eyebrow {
  color: #f7f5f2;
}

.hero .eyebrow::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin-top: 14px;
  background: #b48655;
}
.container{width:min(calc(100% - 40px),var(--max));margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 18px;border:1px solid var(--ink);font-family:var(--font-ui);font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;transition:.25s var(--ease);background:transparent;color:var(--ink)}
.btn:hover{background:var(--ink);color:var(--paper);transform:translateY(-1px)}
.btn.light{border-color:rgba(255,255,255,.78);color:#fff}
.btn.light:hover{background:#fff;color:#111}

.site-header{position:fixed;inset:0 0 auto;z-index:10;transition:.25s var(--ease);color:#fff}
.site-header.scrolled,.site-header.solid{background:rgba(247,245,242,.94);color:var(--ink);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{width:210px;color:currentColor}
.nav-links{display:flex;gap:26px;align-items:center;font-family:var(--font-ui);font-size:.70rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600}
.nav-links a{opacity:.9}
.nav-links a:hover{opacity:1;color:var(--accent)}
.menu-btn{display:none;background:none;border:0;color:currentColor;font-size:1.6rem}

.hero{min-height:92vh;position:relative;display:grid;place-items:end start;color:#fff;overflow:hidden}
.hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.35)),
    url("../images/port-sydney-executive-home-hero.webp") center / cover no-repeat;
}
.project-hero {

  background: var(--charcoal);

}
.project-hero {
  min-height: 74vh;
}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(51,51,51,.72),rgba(51,51,51,.22) 54%,rgba(51,51,51,.5)),var(--hero) center/cover no-repeat;transform:scale(1.02)}
.hero .content{position:relative;padding:150px 0 90px;width:min(760px,calc(100% - 40px));margin-left:max(20px,calc((100vw - var(--max))/2))}
.hero h1{font-family:var(--font-heading);font-weight:500;font-size:clamp(2.75rem,6.5vw,6.2rem);line-height:1.02;margin:14px 0 24px;letter-spacing:-0.012em}
.hero p{font-size:clamp(1.02rem,1.75vw,1.25rem);max-width:640px;color:rgba(255,255,255,.88);font-weight:400}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

.section{padding:92px 0}
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:min(8vw,80px);align-items:center}
.section-title{font-family:var(--font-heading);font-weight:500;font-size:clamp(2.05rem,4.15vw,3.85rem);line-height:1.08;letter-spacing:-.045em;margin:12px 0 18px;color:var(--ink)}
.lead{font-size:1.12rem;color:var(--muted);max-width:760px}

.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:42px}
.proof{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:130px;background:rgba(255,255,255,.22)}
.proof strong{display:block;font-family:var(--font-heading);font-size:2.35rem;font-weight:400;color:var(--accent-dark);letter-spacing:-.04em}
.proof span{color:var(--muted);font-size:.88rem}

.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.project-card{position:relative;background:var(--white);overflow:hidden;min-height:440px;border:1px solid rgba(51,51,51,.08)}
.project-card img{height:100%;width:100%;object-fit:cover;transition:.6s var(--ease);position:absolute;inset:0}
.project-card:hover img{transform:scale(1.05)}
.project-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(51,51,51,.04),rgba(51,51,51,.74))}
.project-info{position:absolute;inset:auto 0 0;z-index:1;padding:28px;color:#fff}
.project-info h3{font-family:var(--font-heading);font-size:1.7rem;font-weight:400;letter-spacing:-.035em;margin:.25rem 0}
.meta{display:flex;flex-wrap:wrap;gap:12px;color:rgba(255,255,255,.84);font-size:.9rem}

.dark-band{background:var(--charcoal);color:var(--paper);padding:92px 0}
.dark-band .section-title{color:var(--paper)}
.dark-band .eyebrow{color:var(--matrix-caramel)}
.service-grid,.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.15);margin-top:42px}
.service,.process-step{background:var(--charcoal);padding:30px;min-height:250px}
.service h3,.process-step h3{font-family:var(--font-heading);font-weight:400;font-size:1.42rem;letter-spacing:-.03em;margin:12px 0;color:var(--paper)}
.service p,.process-step p{color:rgba(247,245,242,.72)}
.process-step .num{font-family:var(--font-ui);font-size:.78rem;letter-spacing:.16em;color:var(--matrix-caramel);font-weight:700}

.footer{padding:55px 0;background:#111;color:#eee}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1f 1fr;gap:40px}
.footer .brand{width:220px}
.footer p,.footer a{color:rgba(255,255,255,.68);font-size:.92rem}
.footer strong{font-family:var(--font-ui);letter-spacing:.04em;color:#fff}

.page-hero{padding:170px 0 70px;background:var(--charcoal);color:var(--paper)}
.page-hero h1{font-family:var(--font-heading);font-size:clamp(2.75rem,5.9vw,5.3rem);line-height:1.04;font-weight:400;letter-spacing:-.055em;margin:12px 0;color:var(--paper)}
.page-hero .lead{color:rgba(247,245,242,.78)}
.filter-bar{display:flex;gap:12px;flex-wrap:wrap;margin:36px 0}
.filter-bar span{border:1px solid var(--line);padding:10px 14px;font-family:var(--font-ui);font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;font-weight:700;background:rgba(255,255,255,.22)}

.facts{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin:34px 0}
.fact{padding:22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.22)}
.fact b{display:block;font-family:var(--font-ui);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--accent-dark);margin-bottom:8px;font-weight:700}

.gallery{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
.gallery img{height:520px;width:100%;object-fit:cover}
.gallery .stack{display:grid;gap:20px}
.gallery .stack img{height:250px}

.contact-panel{background:#fff;padding:34px;border:1px solid rgba(51,51,51,.08)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
label{display:grid;gap:7px;font-family:var(--font-ui);font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:700}
input,select,textarea{width:100%;border:1px solid var(--line);background:var(--matrix-paper);padding:14px;font:inherit;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(180,134,85,.28);border-color:var(--matrix-caramel)}
textarea{min-height:140px;resize:vertical}
.placeholder-note{border:1px dashed var(--accent);padding:18px;color:var(--muted);background:rgba(180,134,85,.08);margin-top:24px}
.mobile-note{display:none}

@media (max-width: 840px){
  .nav{height:72px}
  .brand{width:170px}
  .nav-links{display:none;position:absolute;inset:72px 0 auto;background:rgba(247,245,242,.98);color:var(--ink);padding:25px;flex-direction:column;align-items:flex-start}
  .nav-links.open{display:flex}
  .menu-btn{display:block}
  .hero .content{padding:120px 0 72px}
  .split,.footer-grid{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .project-grid,.service-grid,.process-grid{grid-template-columns:1fr}
  .project-card{min-height:280px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr}
  .gallery img,.gallery .stack img{height:auto}
  .form-grid{grid-template-columns:1fr}
  .mobile-note{display:block}
}

/* Header logo colour transition */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: #f7f5f2;
  background: linear-gradient(to bottom, rgba(0,0,0,.34), rgba(0,0,0,0));
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), backdrop-filter .28s var(--ease);
}

.site-header.scrolled,
.site-header.solid {
  color: #333333;
  background: rgba(247,245,242,.96);
  border-bottom: 1px solid rgba(51,51,51,.14);
  backdrop-filter: blur(14px);
}

.brand {
  position: relative;
  display: block;
  width: 210px;
  height: 58px;
}

.brand-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  transition: opacity .28s var(--ease);
}

.brand-logo--black {
  opacity: 0;
}

.brand-logo--white {
  opacity: 1;
}

.site-header.scrolled .brand-logo--black,
.site-header.solid .brand-logo--black {
  opacity: 1;
}

.site-header.scrolled .brand-logo--white,
.site-header.solid .brand-logo--white {
  opacity: 0;
}

.nav-links a,
.menu-btn {
  color: currentColor;
}

@media (max-width: 840px) {
  .brand {
    width: 178px;
    height: 50px;
  }
}

.site-footer {
  background: #111111;
  color: #f7f5f2;
  padding: 3.25rem 0 2.5rem;
}

.footer-inner {
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
}

.footer-top {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 2.5rem;
}

.footer-brand {
  display: inline-block;
  width: 62px;
  flex: 0 0 auto;
}

.footer-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.footer-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-brand-text strong {
  font-family: var(--font-nav);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
}

.footer-brand-text span {
  color: rgba(247, 245, 242, 0.62);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr 1fr;
  gap: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(247, 245, 242, 0.14);
}

.footer-grid h3 {
  color: #ffffff;
  font-family: var(--font-nav);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.footer-grid p,
.footer-grid a {
  color: rgba(247, 245, 242, 0.66);
  line-height: 1.75;
  text-decoration: none;
}

.footer-grid a:hover {
  color: #ffffff;
}

@media (max-width: 760px) {
  .site-footer {
    padding: 2.75rem 0 2rem;
  }

  .footer-top {
    margin-bottom: 2rem;
  }

  .footer-brand {
    width: 54px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding-top: 1.75rem;
  }
}

/* ---------- Thank You Page ---------- */

.thank-you-page {
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding: 10rem 0 6rem;
  background: var(--charcoal);
  color: var(--paper);
}

.thank-you-content {
  max-width: 900px;
}

.thank-you-content .eyebrow {
  margin-bottom: 1.25rem;
  color: var(--matrix-caramel);
}

.thank-you-content h1 {
  max-width: 850px;
  margin: 0 0 1.75rem;
  color: var(--paper);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 6vw, 5.75rem);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.05em;
}

.thank-you-content .lead {
  max-width: 680px;
  margin: 0;
  color: rgba(247, 245, 242, 0.76);
  font-size: 1.08rem;
  line-height: 1.8;
}

.thank-you-actions {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.thank-you-home-link {
  color: rgba(247, 245, 242, 0.72);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.thank-you-home-link:hover {
  color: var(--paper);
}

@media (max-width: 760px) {
  .thank-you-page {
    min-height: 68vh;
    padding: 8.5rem 0 4.5rem;
  }

  .thank-you-content h1 {
    font-size: clamp(2.75rem, 13vw, 4.25rem);
  }

  .thank-you-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 1.4rem;
  }
}

.header-inner {
  width: min(1440px, calc(100% - 4rem));
  margin: 0 auto;
}

/* Clean solid header layout for inner pages / thank-you page */
.site-header.solid {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(247, 245, 242, 0.96);
  border-bottom: 1px solid rgba(51, 51, 51, 0.14);
  color: #333333;
  z-index: 100;
}

.site-header.solid .header-inner {
  width: min(1440px, calc(100% - 4rem));
}

.site-header.solid .brand {
  width: 210px;
  height: 58px;
  flex: 0 0 auto;
}

.site-header.solid .nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.75rem;
  flex-wrap: nowrap;
}

.site-header.solid .nav-links a {
  color: #333333;
  white-space: nowrap;
}

.container,
.header-inner,
.hero-inner,
.hero-content,
.footer-inner {
  width: min(1440px, calc(100% - 4rem));
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 760px) {
  .container,
  .header-inner,
  .hero-inner,
  .hero-content,
  .footer-inner {
    width: min(100% - 2rem, 1440px);
  }
}

.portfolio-hero .eyebrow,

.page-hero .eyebrow {

  color: #c9c1b8;

}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.75rem;
}

.filter-btn {
  appearance: none;
  padding: 0.7rem 1.1rem;
  border: 1px solid rgba(51, 51, 51, 0.2);
  background: transparent;
  color: #77716a;
  font: inherit;
  font-family: var(--font-nav);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.filter-btn:hover {
  border-color: #3f4a40;
  color: #3f4a40;
}

.filter-btn.active {
  border-color: #3f4a40;
  background: #3f4a40;
  color: #f7f5f2;
}

.project-card.is-hidden {

  display: none !important;

}

.project-card {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.project-card.is-fading {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.project-card.is-hidden {
  display: none !important;
}

/* Project card layering and eyebrow visibility */
.project-card {
  position: relative;
  isolation: isolate;
}

.project-card img {
  z-index: 0;
}

.project-card::after {
  z-index: 1;
  pointer-events: none;
}

.project-info {
  z-index: 2;
}

.project-card .eyebrow {
  position: relative;
  z-index: 3;
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.7rem;
  background: rgba(63, 74, 64, 0.96);
  color: #f7f5f2;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Individual project pages */

.project-hero {
  min-height: 82vh;
}

.project-hero .content {
  padding-bottom: 6rem;
}

.project-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}

.project-intro .section-title {
  max-width: 850px;
}

.project-intro-copy {
  padding-top: 2rem;
}

.project-intro-copy p:not(.lead) {
  color: var(--muted);
  max-width: 640px;
}

.project-overview .facts {
  margin-top: 4.5rem;
}


.project-scope .section-title {
  margin-bottom: 0;
}

.project-scope p {
  color: rgba(247, 245, 242, 0.72);
}

.project-scope .lead {
  color: rgba(247, 245, 242, 0.9);
}

.project-nav-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.project-nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 2.25rem 0;
}

.project-nav-link strong {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 400;
}

.project-nav-next {
  align-items: flex-end;
  text-align: right;
  border-left: 1px solid var(--line);
  padding-left: 2rem;
}

.project-nav-back {
  padding-right: 2rem;
}

.project-nav-link:hover strong {
  color: var(--accent);
}

@media (max-width: 840px) {
  .project-hero {
    min-height: 52vh;
    background-position: center center;
  }
.project-hero .content {

    padding-bottom: 3rem;

  }
  .project-intro {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .project-intro-copy {
    padding-top: 0;
  }

  .project-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .project-gallery-main {
    grid-row: auto;
  }


  .project-nav-inner {
    grid-template-columns: 1fr;
  }

  .project-nav-next {
    align-items: flex-start;
    text-align: left;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
  }
}

.project-hero {
  background-color: var(--charcoal);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.project-hero::before {
  display: none;
}
/* ---------- Project Specs ---------- */

.project-specs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;

    margin:3rem 0 5rem;

    background:#d8d4cf;
}

.project-spec{

    background:#f7f5f2;

    padding:3rem 2rem;

    text-align:center;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    /* transition:.25s ease; */
}

/* .project-spec:hover{

     background:#f2efeb; 

     transform:translateY(-3px); 
} */

.project-spec-value{

    font-family:var(--font-heading);

    font-size:clamp(2rem,3vw,2.8rem);

    line-height:1;

    color:var(--ink);

    margin-bottom:.75rem;
}

.project-spec-label{

    font-family:var(--font-ui);

    font-size:.72rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#6b6b6b;
}

@media (max-width:900px){

    .project-specs{

        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:600px){

    .project-specs{

        grid-template-columns:1fr;
    }

    .project-spec{

        padding:2.5rem 1.5rem;
    }
}

.project-overview {
  padding: 0;
}

.project-specs {
  margin: 0;
}

.project-spec-value--text {
font-family: var(--font-ui);

    font-size: 1.25rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.project-gallery-section .container {
  width: min(1600px, calc(100% - 2rem));
}

.project-gallery {
  display: grid;
  gap: 0.9rem;
  margin-top: 2rem;
}

.project-gallery figure {
  margin: 0;
  overflow: hidden;
  background: transparent;
  min-height: 300px;
  aspect-ratio: auto;
}

.project-gallery img {
  display: block;
  width: 100%;
  height: auto;
}

.gallery-wide img {
  width: 100%;
}

.gallery-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: start;
}

@media (max-width: 760px) {

  .project-gallery figure {
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    background: transparent;
  }

  .project-gallery img {
    width: 100%;
    height: auto;
    display: block;
  }

}
@media (max-width: 760px) {
  .project-gallery-section .container {
    width: min(100% - 1rem, 1600px);
  }

  .gallery-pair {
    grid-template-columns: 1fr;
  }

  .project-gallery,
  .gallery-pair {
    gap: 0.5rem;
  }
}

.photo-credit {
    margin-top: 2rem;
    text-align: right;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: #8a8a8a;
    letter-spacing: .04em;
}

.photo-credit span {
    color: var(--text);
}

/* ---------- Renovation Before / After Gallery ---------- */
/* ---------- Renovation Before / After Gallery ---------- */

.renovation-gallery-section {
  padding: 5rem 0 6rem;
  background: #f1efeb;
}

.renovation-gallery-container {
  width: min(1040px, calc(100% - 4rem));
}

.renovation-gallery-group {
   display: grid;

    grid-template-columns: 240px minmax(0, 1fr);

    gap: 3rem;

    align-items: start;
}

.renovation-gallery-heading {
 position: sticky;

    top: 7rem;

    width: 220px;
}

.renovation-gallery-heading .eyebrow {
  margin-bottom: 1rem;
}

.renovation-gallery-heading p {
  margin: 0;
  max-width: 220px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* Consistent image grid */
.renovation-gallery-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 12px;
}

/* Remove default figure spacing */
.renovation-gallery-grid figure {
  margin: 0;

  aspect-ratio: 4 / 3;

  overflow: hidden;

  background: #d8d4cf;
}

/* Crop each image consistently */
.renovation-gallery-grid img {
 display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  /* Crops out the white canvas baked into several files */

  /*transform: scale(1.08);*/
}

.renovation-gallery-grid figure:last-child:nth-child(odd) {

  grid-column: 1 / -1;

  aspect-ratio: 16 / 9;

}

/* Divider between Before and After */
.renovation-gallery-divider {
  height: 1px;
  margin: 5rem 0;
  background: rgba(51, 51, 51, 0.16);
}

.renovation-gallery-after .eyebrow {
  color: var(--matrix-caramel);
}

@media (max-width: 840px) {
  .renovation-gallery-section {
    padding: 3.5rem 0 4rem;
  }

  .renovation-gallery-container {
    width: min(100% - 2rem, 1120px);
  }

  .renovation-gallery-group {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .renovation-gallery-heading {
    position: static;
  }

  .renovation-gallery-heading p {
    max-width: 520px;
  }

  .renovation-gallery-divider {
    margin: 3.5rem 0;
  }
}

@media (max-width: 600px) {
  .renovation-gallery-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.static-card:hover {

    transform: none;

    box-shadow: none;

}

.static-card:hover img {

    transform: none;

}

.static-card img {

    transition: none;

}

.section-intro p{

    max-width:680px;

    font-size:.92rem;

    line-height:1.9;

    letter-spacing:.01em;

    color:#777;

}
.services-cta{

    margin-top:4rem;

    padding-top:3rem;

    border-top:1px solid var(--line);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:2rem;

}

.services-cta p{

    margin:0;

    max-width:700px;

    color:var(--muted);

    font-size:1rem;

    line-height:1.8;

}

.services-cta .btn{

    flex-shrink:0;

}
.page-hero + .dark-band {

    padding-top: 10px;   /* currently 92px */

}

@media (max-width: 840px) {

  .site-header.solid .nav-links,

  .site-header.scrolled .nav-links {

    display: none;

    position: absolute;

    top: 72px;

    left: 0;

    right: 0;

    padding: 2rem;

    background: rgba(247, 245, 242, 0.98);

    color: var(--ink);

    flex-direction: column;

    align-items: center;

    gap: 2rem;

    border-bottom: 1px solid var(--line);

  }

  .site-header.solid .nav-links.open,

  .site-header.scrolled .nav-links.open {

    display: flex;

  }

}

.experience-band {
    padding: 6rem 0 4rem;
}

.experience-content {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}

.experience-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.experience-number {
    font-family:var(--font-heading);

    font-size:clamp(7rem,11vw,10rem);

    line-height:.82;

    letter-spacing:-.06em;

    color:var(--matrix-caramel);
}
.experience-label{

    margin-top:.6rem;

    font-family:var(--font-heading);

    font-style:italic;

    font-size:1.1rem;

    line-height:1.3;

    color:var(--matrix-caramel);

}
.experience-stat .eyebrow {
    margin-top: 1.5rem;
    color: var(--matrix-green);
}

.experience-copy {
    width: 100%;
    max-width: none;
}

.experience-copy h2 {
    margin: 0 0 1.5rem;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4.2vw, 4rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.experience-copy p {
    max-width: 820px;
    margin: 0;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.85;
}
.featured-work {
    padding-top: 5rem;
    border-top: 1px solid var(--line);
}
@media (max-width: 840px) {
    .experience-band {
        padding: 4.5rem 0;
    }

    .experience-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .experience-number span {
        font-size: clamp(5rem, 24vw, 7rem);
    }

    .featured-work {
        padding-top: 4rem;
    }
}
/* ---------- About Page ---------- */

.about-copy {
  max-width: 700px;
}

.about-copy p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.8;
}

.about-copy .lead {
  color: var(--ink);
  font-size: 1.12rem;
}

.about-image-section {
  padding: 0 0 6rem;
}

.about-team-image {
  margin: 0;
  overflow: hidden;
  background: var(--soft);
}

.about-team-image img {
  display: block;
  width: 100%;
  height: clamp(420px, 48vw, 720px);
  object-fit: cover;
  object-position: center;
}

.about-values {
  padding-top: 0;
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.about-value {
  padding: 2.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.18);
}

.about-value .eyebrow {
  margin-bottom: 1rem;
  color: var(--matrix-caramel);
}

.about-value h3 {
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.3;
}

.about-value p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

@media (max-width: 840px) {
  .about-image-section {
    padding-bottom: 4rem;
  }

  .about-team-image img {
    height: auto;
  }

  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-value {
    padding: 2rem;
  }
}
/* ---------- Process Page ---------- */

.process-section {
  padding-top: 5rem;
}

.process-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.process-page-step {
  min-height: 310px;
  padding: clamp(2rem, 3vw, 3rem);
  background: rgba(255, 255, 255, 0.2);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.process-page-step .num {
  margin-bottom: 1.5rem;
  font-family: var(--font-ui);
  color: var(--matrix-caramel);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.process-page-step h3 {
  margin: 0 0 1.25rem;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.process-page-step p {
  max-width: 360px;
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.75;
}

@media (max-width: 1000px) {
  .process-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .process-section {
    padding-top: 3.5rem;
  }

  .process-page-grid {
    grid-template-columns: 1fr;
  }

  .process-page-step {
    min-height: auto;
    padding: 2rem;
  }
}

.contact-hero {
    padding-top: 150px;
    padding-bottom: 72px;
}

.contact-hero h1 {
    max-width: 1050px;
    margin-bottom: 1.5rem;
}

.contact-hero .lead {
    max-width: 650px;
    margin: 0;
    color: rgba(247, 245, 242, 0.76);
    font-size: 1.08rem;
    line-height: 1.7;
}
.services-layout{
    display:grid;
    grid-template-columns:0.95fr 1.25fr;
    gap:2rem;
    align-items:stretch;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    border-top:1px solid var(--line);
    border-left:1px solid var(--line);
}

.service-card{

    min-height:260px;

    padding:2.5rem;

    background:rgba(255,255,255,.18);

    border-right:1px solid var(--line);

    border-bottom:1px solid var(--line);

}

.service-card .num{

    margin-bottom:1.5rem;

    font-family:var(--font-ui);

    color:var(--matrix-caramel);

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.16em;

}

.service-card h3{

    margin:0 0 1rem;

    color:var(--ink);

    font-family:var(--font-heading);

    font-size:1.6rem;

    font-weight:400;

}

.service-card p{

    margin:0;

    color:var(--muted);

    line-height:1.75;

}

.services-image{

    overflow:hidden;

}

.services-image img{

      width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}
@media (max-width: 900px) {

  .services-layout {
    grid-template-columns: 1fr;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .services-image {
    height: 420px;
    order: -1;
  }

}


/* ---------- Footer ---------- */

.footer-grid{
    display:grid;
    grid-template-columns:90px 1.2fr 1fr 1fr;
    gap:5rem;
    align-items:start;
    padding-top:2rem;
    border-top:1px solid rgba(247,245,242,.14);
}

.footer-logo-column{
    display:flex;
    align-items:flex-start;
}

.footer-brand{
    display:block;
    width:80px;
}

.footer-brand img{
    width:100%;
    height:auto;
}

.footer-bottom{
    margin-top:3rem;
    padding-top:1.5rem;
    border-top:1px solid rgba(247,245,242,.14);
}

.footer-bottom p{
    margin:0;
    color:rgba(247,245,242,.55);
    font-size:.9rem;
}

@media (max-width: 760px) {

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .footer-trust {
    justify-content: flex-start;
  }

}
/* ---------- Tarion Certification ---------- */

.about-certification{
    background:#ffffff;
    border-top:1px solid var(--line);
}

.certification-layout{
    display:grid;
    grid-template-columns:140px minmax(0,1fr);
    gap:4rem;
    align-items:center;
}

.certification-badge{
    display:flex;
    justify-content:center;
    align-items:center;
}

.certification-badge img{
    width:110px;
    height:auto;
}

.certification-content .eyebrow{
    margin-bottom:1rem;
}

.certification-content p:not(.lead){
    max-width:720px;
    color:var(--muted);
    line-height:1.8;
}

@media (max-width:760px){

    .certification-layout{
        grid-template-columns:1fr;
        gap:2rem;
        text-align:center;
    }

    .certification-content p{
        margin-left:auto;
        margin-right:auto;
    }

    .certification-badge img{
        width:95px;
    }

}
/* ---------- Legal Page Hero ---------- */

.legal-hero{
  padding: 9rem 0 3.5rem;
  background: var(--charcoal);
  color: var(--paper);
}

.legal-hero .eyebrow{
  margin-bottom: 1rem;
  color: var(--matrix-taupe);
}

.legal-hero h1{
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--paper);
}

.legal-effective{
  margin: 1rem 0 0;
  color: rgba(247,245,242,.62);
  font-size: .95rem;
}

@media (max-width: 760px){
  .legal-hero{
    padding: 7.5rem 0 3rem;
  }
}