/* McKenzie and Sons — shared stylesheet
   Compiled from the Claude Design canvas source archived in design/.
   Page-specific layout tokens are scoped under body classes
   (.page-home / .page-residential / .page-contact / .page-about) because the
   four source pages reuse the same CSS custom-property names for different
   things (e.g. --dir). */

*{box-sizing:border-box}

/* Only the root element clips horizontal overflow. Doing this on body too
   (as the original canvas inline styles did) makes body compute overflow-y:auto
   and turns it into its own nested scroll container, which silently breaks
   window.scrollTo, anchor-link jumps (#projects) and IntersectionObserver-driven
   reveals. Keep it on html only. */
html{overflow-x:hidden}
html,body{margin:0;padding:0}
body{background:#fff;color:#000;font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;position:relative;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:#182B6D;text-decoration:none}
a:hover{color:#182B6D}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
::selection{background:#182B6D;color:#fff}
[data-rail]{scrollbar-width:none;-ms-overflow-style:none}
[data-rail]::-webkit-scrollbar{display:none}

/* ---------- shared tokens ---------- */
:root{
  --pad:22px;
  --nav-zone:78px;--nav-fs:22px;--nav-gap:26px;--nav-pad-l:22px;--menu-display:flex;--navbar-display:none;
  --h1:40px;--body-fs:16px;--lead:20px;
  --band-py:64px;
  --foot-item:15px;--copy:11px;--ct-br:block;
  --rv-y:20px;--rv-blur:8px;--rv-dur:.85s
}
@media (min-width:768px){:root{
  --pad:44px;--nav-fs:24px;
  --h1:60px;--body-fs:18px;--lead:24px;
  --band-py:96px;
  --foot-item:17px;--copy:13px
}}
@media (min-width:1200px){:root{
  --pad:80px;--navbar-display:block;--menu-display:none;--nav-zone:112px;--nav-fs:26px;--nav-gap:40px;--nav-pad-l:calc(36.77% + 45px);
  --h1:72px;--body-fs:20px;--lead:28px;
  --band-py:132px;
  --foot-item:22px;--copy:15px;--ct-br:none
}}
@media (min-width:1600px){:root{
  --pad:130px;--nav-fs:36px;--nav-gap:50px;
  --h1:96px;--lead:36px;
  --foot-item:26px;--copy:16px
}}

[data-reveal]{opacity:0;transform:translateY(var(--rv-y));filter:blur(var(--rv-blur));transition:opacity var(--rv-dur) ease,transform var(--rv-dur) cubic-bezier(.16,.84,.24,1),filter var(--rv-dur) ease;will-change:opacity,transform,filter}
[data-reveal][data-in="1"]{opacity:1;transform:none;filter:blur(0)}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;filter:none;transition:none}}

/* ---------- nav ---------- */
.site-nav{position:fixed;top:0;left:0;right:0;height:var(--nav-zone);z-index:60;display:var(--navbar-display)}
[data-nav-bg]{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.62) 62%,rgba(255,255,255,0) 100%);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);pointer-events:none;opacity:0;transition:opacity .55s ease}
[data-nav="1"] [data-nav-bg]{opacity:1}
[data-nav-inner]{position:relative;display:flex;align-items:center;height:100%;gap:var(--nav-gap);padding-left:var(--nav-pad-l);opacity:0;transform:translateY(-14px);filter:blur(9px);pointer-events:none;transition:opacity .45s ease,transform .6s cubic-bezier(.16,.84,.24,1),filter .5s ease}
[data-nav="1"] [data-nav-inner]{opacity:1;transform:none;filter:blur(0);pointer-events:auto}
.nav-link{font-size:var(--nav-fs);font-weight:275;color:#000;line-height:1;padding:6px 0;border-bottom:1px solid rgba(24,43,109,0);transition:border-color .35s ease,color .35s ease}
.nav-link:hover,.nav-link.is-current{color:#182B6D;border-bottom-color:#182B6D}

.menu-btn{position:fixed;top:14px;right:14px;z-index:90;display:var(--menu-display);width:46px;height:46px;border-radius:50%;background:rgba(24,43,109,.94);align-items:center;justify-content:center;backdrop-filter:blur(8px);box-shadow:0 6px 22px rgba(24,43,109,.28)}
.menu-btn span{display:block;width:17px;height:1.5px;background:#fff;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}

.mobile-menu{position:fixed;inset:0;z-index:95;background:#182B6D;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 var(--pad);opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s}
.mobile-menu[data-menu="1"]{opacity:1;visibility:visible}
.mobile-menu-close{position:absolute;top:14px;right:20px;width:44px;height:44px;color:#fff;font-size:30px;font-weight:200;line-height:1}
.mobile-menu a{font-size:30px;font-weight:200;color:#fff;padding:12px 0}
.mobile-menu a.is-current{color:rgba(255,255,255,.55)}
.mobile-menu .brand{margin-top:26px;font-size:14px;font-weight:200;color:rgba(255,255,255,.6);letter-spacing:.14em}

/* ---------- buttons / pills ---------- */
.btn{display:flex;align-items:center;justify-content:center;border-radius:50px;color:#fff;font-weight:300;line-height:1;white-space:nowrap;transition:transform .4s cubic-bezier(.16,.84,.24,1),box-shadow .4s ease,background .4s ease}
.btn-primary{background:#162764}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(24,43,109,.26);background:#182B6D;color:#fff}
.btn-secondary{background:#E4E4E4;color:#182B6D}
.btn-secondary:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.12);background:#EDEDED;color:#182B6D}
.btn-pill-light{background:#fff;color:#182B6D}
.btn-pill-light:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.28);color:#182B6D}

/* ---------- footer ---------- */
.site-footer{background:#fff}
.foot-link{color:#182B6D;transition:color .35s ease,transform .35s ease}
.foot-link:hover{color:#182B6D;transform:translateX(3px)}
.foot-contact-link{color:#000;transition:color .35s ease}
.foot-contact-link:hover{color:#182B6D}
.foot-copy{margin:0;font-size:var(--copy);font-weight:200;letter-spacing:.06em;color:#000;text-align:center}

/* =========================================================
   Home
   ========================================================= */
.page-home{
  --hero-dir:column;--hero-panel-w:100%;--hero-panel-flex:0 0 auto;--hero-panel-pt:70px;--hero-panel-pb:34px;--hero-logo-w:56%;--hero-logo-max:212px;
  --hero-right-pt:52px;--hero-right-pb:70px;--hero-right-pl:22px;--hero-min:auto;
  --h1-gap:38px;
  --btn-fs:14.4px;--btn-h:46.8px;--btn-px:28.8px;--pill-px:32px;--btn-dir:column;--btn-w:100%;--btn-just:stretch;
  --band-h2:30px;
  --sec-pt:78px;--sec-pb:78px;--sec-h2:34px;--sec-h2-mb:46px;
  --proj-display:flex;--proj-cols:none;--card-w:78vw;--card-gap:16px;--rail-pad:22px;--rail-of:auto;
  --proj-title:20px;--proj-cap:13px;
  --advice-fs:19vw;--advice-dir:column;--advice-align:flex-start;--advice-pad:22px;--advice-sink:.05em;
  --advice-sub:16px;--advice-pt:46px;--advice-pb:58px;--advice-just:center;--arrow-display:none;
  --pill-w:100%;--pill-fs:16px;--pill-h:54px;
  --foot-dir:column;--foot-logo-w:168px;--foot-cols:1fr 1fr;--foot-head:18px;--foot-gap:38px
}
@media (min-width:768px){.page-home{
  --hero-panel-pt:80px;--hero-panel-pb:44px;--hero-logo-max:280px;--hero-right-pt:72px;--hero-right-pb:96px;--hero-right-pl:44px;
  --h1-gap:56px;
  --btn-fs:19.8px;--btn-h:59.4px;--btn-px:41.4px;--pill-px:46px;--btn-dir:row;--btn-w:auto;--btn-just:flex-start;
  --band-h2:52px;
  --sec-pt:112px;--sec-pb:112px;--sec-h2:56px;--sec-h2-mb:72px;
  --proj-display:grid;--proj-cols:1fr 1fr;--card-w:auto;--card-gap:44px;--rail-pad:var(--pad);--rail-of:visible;
  --proj-title:26px;--proj-cap:15px;
  --advice-fs:13.2vw;--advice-dir:row;--advice-align:baseline;--advice-pad:0;
  --advice-sub:22px;--advice-pt:64px;--advice-pb:78px;
  --pill-w:auto;--pill-fs:22px;--pill-h:70px;
  --foot-logo-w:240px;--foot-cols:repeat(4,1fr);--foot-head:22px;--foot-gap:56px
}}
@media (min-width:1200px){.page-home{
  --hero-dir:row;--hero-panel-w:36.77%;--hero-panel-flex:0 0 36.77%;--hero-panel-pt:100px;--hero-panel-pb:0;--hero-logo-w:100%;--hero-logo-max:706px;
  --hero-right-pl:10%;--hero-right-pt:0;--hero-right-pb:0;--hero-min:100vh;
  --h1-gap:clamp(48px,11vh,150px);
  --btn-fs:23.4px;--btn-h:68.4px;--btn-px:46.8px;--pill-px:52px;
  --band-h2:72px;
  --sec-pt:150px;--sec-pb:150px;--sec-h2:72px;--sec-h2-mb:104px;
  --card-gap:90px;--proj-title:30px;--proj-cap:17px;
  --advice-sub:28px;--advice-just:flex-end;--arrow-display:block;--advice-pt:78px;--advice-pb:96px;
  --pill-fs:26px;--pill-h:80px;
  --foot-logo-w:320px;--foot-head:26px;--foot-gap:70px
}}
@media (min-width:1600px){.page-home{
  --h1-gap:clamp(48px,11vh,150px);
  --band-h2:96px;
  --btn-fs:32.4px;--btn-h:80.1px;--btn-px:52.2px;--pill-px:58px;
  --proj-title:36px;--proj-cap:20px;--card-gap:160px;
  --advice-sub:36px;--pill-fs:36px;--pill-h:89px;
  --foot-head:32px;--foot-gap:70px
}}

.home-hero{display:flex;flex-direction:var(--hero-dir);min-height:var(--hero-min);background:#fff}
.home-hero-panel{flex:var(--hero-panel-flex);width:var(--hero-panel-w);background:#182B6D;display:flex;align-items:flex-start;justify-content:center;padding:var(--hero-panel-pt) 0 var(--hero-panel-pb)}
.home-hero-panel img{width:var(--hero-logo-w);max-width:var(--hero-logo-max);height:auto}
.home-hero-copy{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--h1-gap);padding:var(--hero-right-pt) var(--pad) var(--hero-right-pb) var(--hero-right-pl)}
.home-hero-copy h1{margin:0;font-size:var(--h1);font-weight:200;line-height:100%;color:#182B6D;text-wrap:pretty}
.home-hero-actions{display:flex;flex-direction:var(--btn-dir);align-items:var(--btn-just);gap:14px}
.home-hero-actions .btn{width:var(--btn-w);height:var(--btn-h);padding:0 var(--btn-px);font-size:var(--btn-fs)}

.home-band{position:relative;background:#182B6D;padding:var(--band-py) var(--pad);text-align:center}
.home-band h2{margin:0;font-size:var(--band-h2);font-weight:200;line-height:110%;color:#fff;text-wrap:balance}

.home-projects{background:#fff;padding:var(--sec-pt) 0 var(--sec-pb)}
.home-projects h2{margin:0 0 var(--sec-h2-mb);padding:0 var(--pad);font-size:var(--sec-h2);font-weight:100;line-height:100%;color:#000;text-align:center;text-wrap:balance}
.project-rail{display:var(--proj-display);grid-template-columns:var(--proj-cols);gap:var(--card-gap);overflow-x:var(--rail-of);padding:0 var(--rail-pad) 6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.project-card{flex:0 0 var(--card-w);width:var(--card-w);min-width:0;scroll-snap-align:center;display:flex;flex-direction:column;gap:14px}
.project-card h3{margin:0;font-size:var(--proj-title);font-weight:300;line-height:110%;color:#182B6D}
.project-card p{margin:0;font-size:var(--proj-cap);font-weight:300;line-height:130%;color:#000;text-align:right}
.project-frame{position:relative;aspect-ratio:3/2;overflow:hidden;background:#D9D9D9;cursor:pointer;width:100%;text-align:left;border-radius:0}
.project-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.project-frame .layer{position:absolute;inset:0}
.project-frame .layer-before{z-index:1}
.project-frame .layer-after{z-index:2;transition:transform .78s cubic-bezier(.16,.84,.24,1)}
.project-frame[data-swapped="1"] .layer-after{transform:translateY(-100.5%)}
.project-frame .tag{position:absolute;bottom:10px;right:10px;z-index:3;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;letter-spacing:.16em;color:#fff;text-transform:uppercase;background:rgba(24,43,109,.72);padding:4px 9px;border-radius:3px;pointer-events:none}
.project-frame .tag-before{display:none}
.project-frame[data-swapped="1"] .tag-after{display:none}
.project-frame[data-swapped="1"] .tag-before{display:block}
.project-frame.is-placeholder .layer{display:flex;align-items:center;justify-content:center}
.project-frame.is-placeholder .layer-before{background:repeating-linear-gradient(135deg,#C9C9CE 0 12px,#D4D4D9 12px 24px)}
.project-frame.is-placeholder .layer-after{background:repeating-linear-gradient(135deg,#D9D9D9 0 12px,#E4E4E4 12px 24px)}
.project-frame.is-placeholder span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.2em;color:rgba(0,0,0,.5);text-transform:uppercase}
@media (hover:hover){
  .project-frame:hover .layer-after{transform:translateY(-100.5%)}
  .project-frame:hover .tag-after{display:none}
  .project-frame:hover .tag-before{display:block}
}

.home-advice{background:#fff}
.home-advice h2{position:relative;z-index:2;top:5px;display:flex;flex-direction:var(--advice-dir);align-items:var(--advice-align);justify-content:center;gap:0 .22em;margin:0 0 calc(-1 * var(--advice-sink));padding:0 var(--advice-pad);font-size:var(--advice-fs);font-weight:700;line-height:.82;color:#182B6D;white-space:nowrap}
.home-advice h2 .q-wrap{display:inline-flex;align-items:baseline}
.home-advice h2 .q-mark{position:relative;top:15px;display:inline-block;font-size:1.34em;line-height:.7}
.home-advice h2 .q-dot{position:absolute;right:.19em;top:0;line-height:.7;color:#fff}
.home-advice-band{position:relative;z-index:1;background:#182B6D;padding:var(--advice-pt) var(--pad) var(--advice-pb)}
.home-advice-band p{position:relative;z-index:2;margin:0;font-size:var(--advice-sub);font-weight:300;line-height:120%;color:#fff;text-align:center}
.home-advice-cta{display:flex;align-items:center;justify-content:var(--advice-just);gap:26px;margin-top:34px}
.home-advice-cta img{display:var(--arrow-display);width:auto;height:84px;flex:0 0 auto;transform:scaleY(-1)}
.home-advice-cta .btn{width:var(--pill-w);height:var(--pill-h);padding:0 var(--pill-px);font-size:var(--pill-fs)}

.home-footer{padding:var(--foot-pt,58px) var(--pad) var(--foot-pb,36px)}
.home-footer .foot-row{display:flex;flex-direction:var(--foot-dir);align-items:flex-start;gap:var(--foot-gap)}
.home-footer .foot-row>img{width:var(--foot-logo-w);height:auto;flex:0 0 auto}
.home-footer .foot-grid{display:grid;grid-template-columns:var(--foot-cols);gap:var(--foot-gap) 24px;flex:1 1 auto;width:100%;padding-top:6px}
.home-footer .foot-col{display:flex;flex-direction:column;gap:16px}
.home-footer .foot-col>span{font-size:var(--foot-head);font-weight:200;line-height:1;color:#000}
.home-footer .foot-col a{font-size:var(--foot-item);font-weight:100;line-height:1}
.home-footer .foot-col a.foot-contact-link{font-weight:300;line-height:1.2}
.home-footer .foot-copy{margin:64px 0 0}

/* =========================================================
   Residential
   ========================================================= */
.page-residential{--sec-py:70px;--cols:1fr;--foot-logo-w:168px}
@media (min-width:768px){.page-residential{--sec-py:104px;--cols:1fr 1fr;--foot-logo-w:240px}}
@media (min-width:1200px){.page-residential{--sec-py:140px;--cols:repeat(3,1fr);--foot-logo-w:320px}}

.res-header{position:relative;background:#182B6D;padding:calc(var(--band-py) + 40px) var(--pad) var(--band-py)}
.res-header h1{margin:0;font-size:var(--h1);font-weight:200;line-height:100%;color:#fff}
.res-header p{margin:26px 0 0;max-width:20em;font-size:var(--lead);font-weight:200;line-height:135%;color:rgba(255,255,255,.72)}

.res-services{padding:var(--sec-py) var(--pad)}
.res-services-grid{display:grid;grid-template-columns:var(--cols);gap:56px 44px}
.res-service{display:flex;flex-direction:column;gap:16px;padding-top:22px;border-top:1px solid rgba(0,0,0,.12)}
.res-service h2{margin:0;font-size:var(--lead);font-weight:300;line-height:120%;color:#182B6D}
.res-service p{margin:0;font-size:var(--body-fs);font-weight:200;line-height:150%;color:#000}
.res-services .btn{display:inline-flex;margin-top:64px;height:var(--lead);padding:calc(var(--lead) * .9) calc(var(--lead) * 1.6);font-size:var(--body-fs)}

.simple-footer{padding:0 var(--pad) 44px}
.simple-footer .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-top:38px;border-top:1px solid rgba(0,0,0,.1)}
.simple-footer img{width:var(--foot-logo-w);height:auto}
.simple-footer .contact-col{display:flex;flex-direction:column;gap:10px}
.simple-footer .contact-col a{font-size:var(--foot-item);font-weight:300;color:#000}

/* =========================================================
   Contact
   ========================================================= */
.page-contact{--dir:column;--col-flex:0 0 auto;--foot-logo-w:168px}
@media (min-width:768px){.page-contact{--foot-logo-w:240px}}
@media (min-width:1200px){.page-contact{--dir:row;--col-flex:1 1 0;--foot-logo-w:320px}}

.contact-page-body{position:relative;min-height:100vh;display:flex;flex-direction:column}
.contact-section{flex:1 1 auto;display:flex;flex-direction:var(--dir);align-items:flex-start;gap:56px;padding:calc(var(--sec-py,70px) + 40px) var(--pad) var(--sec-py,70px)}
.contact-section h1{flex:var(--col-flex);margin:0;font-size:var(--h1);font-weight:200;line-height:100%;color:#182B6D}
.contact-info{flex:var(--col-flex);display:flex;flex-direction:column;gap:34px;width:100%}
.contact-item{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid rgba(0,0,0,.12)}
.contact-item .kicker{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.2em;color:rgba(0,0,0,.4)}
.contact-item a{font-size:var(--lead);font-weight:300;line-height:120%;color:#182B6D}
.contact-item p{margin:0;font-size:var(--body-fs);font-weight:200;line-height:150%;color:#000}
.contact-info .btn{height:calc(var(--lead) * 2.6);font-size:var(--body-fs)}
.contact-logo-band{position:relative;background:#182B6D;padding:var(--band-py) var(--pad);text-align:center}
.contact-logo-band img{width:var(--foot-logo-w);height:auto;margin:0 auto}

@media (min-width:768px){.page-residential{--sec-py:104px}}
.page-contact .contact-section{padding-top:calc(var(--sec-py,70px) + 40px)}

/* =========================================================
   About
   ========================================================= */
.page-about{--dir:column;--panel-w:100%;--panel-flex:0 0 auto}
@media (min-width:1200px){.page-about{--dir:row;--panel-w:36.77%;--panel-flex:0 0 36.77%}}

.about-hero{display:flex;flex-direction:var(--dir);align-items:stretch}
.about-hero-panel{flex:var(--panel-flex);width:var(--panel-w);background:#182B6D;display:flex;align-items:center;justify-content:center;padding:calc(var(--band-py) + 30px) var(--pad) var(--band-py)}
.about-hero-panel img{width:56%;max-width:300px;height:auto}
.about-hero-copy{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:34px;padding:70px var(--pad)}
.about-hero-copy h1{margin:0;font-size:var(--h1);font-weight:200;line-height:100%;color:#182B6D}
.about-hero-copy p{margin:0;max-width:26em;font-size:var(--body-fs);font-weight:200;line-height:160%;color:#000;text-wrap:pretty}
.about-legal-links{display:flex;flex-direction:column;gap:14px;padding-top:24px;border-top:1px solid rgba(0,0,0,.12)}
.about-legal-links a{font-size:var(--foot-item);font-weight:100}
.about-hero-copy .btn{align-self:flex-start;display:inline-flex;height:calc(var(--lead) * 2.6);padding:0 calc(var(--lead) * 1.8);font-size:var(--body-fs)}

.about-footer{padding:0 var(--pad) 44px}
.about-footer p{margin:0;padding-top:38px;border-top:1px solid rgba(0,0,0,.1);font-size:13px;font-weight:200;letter-spacing:.06em;color:#000;text-align:center}