/* North Shore: mist-grey stone relief, forest accents and a clear reading scale. */
:root{
 --north-relief:url('/assets/backgrounds/coastal-relief-wide-v1.webp');
 --north-detail:url('/assets/backgrounds/coastal-relief-mobile-v1.webp');
 --north-header:url('/assets/backgrounds/coastal-relief-header-v1.webp');
 --muted:#526255;
}
html{scrollbar-gutter:stable}
body{font-size:17px;font-weight:450;line-height:1.7}
h1,h2,h3{letter-spacing:-.025em}
.lead{font-size:18px;line-height:1.7}
.section-heading p,.service-item p,.scope-block p,.material-card p,.match-panel p,.ready-card p,.detail-card p,.cta-box p,.faq-list details p,.process-step p{font-size:16px;line-height:1.7}
.caption,.section-note,.ready-note,.source-links{font-size:13px;line-height:1.65}
.footer-links a,.site-footer p{font-size:14px;line-height:1.75}
.work-caption p{font-size:14px;line-height:1.65}
.intro-photo figcaption{font-size:12px;line-height:1.6}
.material-reference figcaption{font-size:13px;line-height:1.65}
.button{min-height:54px;border-radius:12px;font-size:14px;line-height:1.45;gap:15px}
.button-icon{width:30px;height:30px;border-radius:9px}
.button:hover{transform:none}
.material-card:hover{transform:none;box-shadow:0 6px 18px #18382c0b}
.button:focus-visible,.contact-trigger:focus-visible,.icon-button:focus-visible,.mobile-links a:focus-visible{outline:2px solid #547b63;outline-offset:4px}
[data-dialog-initial-focus]:focus{outline:none}
/* Solid paper base prevents the scrolled page showing through the header. */
.site-header,.site-header.is-scrolled{
 background-color:#f7f6f1;
 background-image:linear-gradient(180deg,#f7f6f1e6,#f7f6f1bd),var(--north-header);
 background-size:cover;
 background-position:center,center 58%;
 background-repeat:no-repeat;
 backdrop-filter:none;-webkit-backdrop-filter:none;
 border-bottom:1px solid #cbd5c9;
 box-shadow:inset 0 1px 0 #fff,0 3px 12px #18382c0a;
}
.site-header.is-scrolled{box-shadow:inset 0 1px 0 #fff,0 4px 15px #18382c13}
.site-header.is-scrolled::before{content:'';position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:calc(env(safe-area-inset-top,0px) + 2px);background:#f7f6f1;pointer-events:none}
.contact-trigger.mobile-call{font-size:12px}
/* Shared artwork is decorative; installation and material photographs stay distinct. */
.stone-intro,.form-intro{
 background-color:#f4f5ee;
 background-image:linear-gradient(110deg,#f7f6f1ed,#f7f6f1de),var(--north-relief);
 background-position:center,center 57%;
 background-size:cover;
 background-repeat:no-repeat;
 border-bottom:1px solid #dce2d6;
}
.stone-section,.soft-section{
 background-color:#f0f3eb;
 background-image:linear-gradient(#f5f6efde,#f5f6efde),var(--north-relief);
 background-size:cover;
 background-position:center,center 65%;
 background-repeat:no-repeat;
 border-block:1px solid #dbe2d6;
}
.finder,.cta-box,.location-card,.note{
 background-color:#eff3e9;
 background-image:linear-gradient(125deg,#f4f6eff0,#f4f6efde),var(--north-relief);
 background-size:cover;
 background-position:center,center 69%;
 background-repeat:no-repeat;
 border-color:#ced9cb;
 box-shadow:inset 0 1px 0 #ffffffc9,0 5px 18px #18382c07;
}
.dark-section{
 background-color:#18382c;
 background-image:linear-gradient(110deg,#18382cf0,#18382ce8),var(--north-relief);
 background-size:cover;
 background-position:center,center 72%;
 background-repeat:no-repeat;
}
.site-footer{
 background-color:#ecf0e6;
 background-image:linear-gradient(110deg,#eff2eaf0,#eff2eae3),var(--north-relief);
 background-size:cover;
 background-position:center,center 74%;
 background-repeat:no-repeat;
}
.ready-card,.detail-card{background-color:#fffefae8;box-shadow:inset 0 1px 0 #fff,0 4px 14px #18382c06}
.material-card,.showroom-card{box-shadow:inset 0 1px 0 #fff,0 4px 16px #18382c08}
/* Full-height narrow drawer, compact destinations and bottom actions. */
.mobile-menu{
 inset:8px 8px 8px auto;margin:0;
 width:min(48vw,352px);max-width:48vw;
 height:calc(100vh - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);
 padding:max(18px,env(safe-area-inset-top,0px)) 15px max(18px,env(safe-area-inset-bottom,0px));
 border:1px solid #fffff9;border-radius:18px;
 background-color:#f5f7ef;
 background-image:linear-gradient(180deg,#fafbf6f7 0%,#fafbf6ed 45%,#fafbf6ad 100%),var(--north-detail);
 background-size:cover;background-position:center,center 67%;background-repeat:no-repeat;
 box-shadow:-8px 10px 45px #142a222b;
 scrollbar-width:thin;scrollbar-color:#abbca9 transparent;
}
.mobile-menu[open]{display:flex;flex-direction:column}
.mobile-menu .menu-head{flex-shrink:0;min-height:44px;margin:0 0 20px;gap:8px}
.mobile-menu .drawer-label{font-family:var(--font-body);font-size:16px;font-weight:550;line-height:1.4;letter-spacing:0;color:#536b58;margin:0}
.mobile-menu .icon-button{width:40px;height:40px;min-width:40px;border:1px solid #ccd8c8;background:#fcfdf8e6;padding:9px;box-shadow:inset 0 1px 0 #fff}
.mobile-links{display:grid;gap:7px;flex-shrink:0;margin:0 0 20px}
.mobile-links>a{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:52px;padding:12px 12px;border:1px solid #d5dfd0;border-radius:10px;background:#fffef9e6;font-size:17px;font-weight:550;line-height:1.45;letter-spacing:0;text-decoration:none}
.mobile-links>a:hover{background:#edf3e7;border-color:#adbea8}
.mobile-links>a[aria-current=page]{color:#244a3b;background:#e6eedf;border-color:#afc3a8;box-shadow:inset 3px 0 0 #66885e;font-weight:600}
.menu-item-icon{display:grid;place-items:center;width:20px;flex:0 0 20px;color:#557650}
.menu-item-icon .ui-icon{width:19px;height:19px;margin:0}
.menu-item-label{min-width:0}
.menu-actions{display:grid;flex-shrink:0;gap:9px;margin-top:auto;padding-top:16px;border-top:1px solid #cbd8c4}
.menu-actions>.button{justify-content:flex-start;gap:9px;min-height:53px;padding:12px 10px;font-size:15px;line-height:1.45;font-weight:600;border-radius:11px}
.menu-actions .menu-project .menu-item-icon{color:#e8efdd}
.menu-actions .menu-contact .menu-item-icon{color:#4c7148}
.menu-actions .menu-contact{background:#fffef6e6;border-color:#b9cbb0;color:#294b36}
/* Contact choices remain clear above a quieter relief layer. */
.contact-drawer{
 inset:12px 12px auto auto;width:min(430px,calc(100vw - 24px));max-width:calc(100vw - 24px);height:fit-content;max-height:calc(100dvh - 24px);padding:25px;border-radius:20px;
 background-color:#f7f9f2;background-image:linear-gradient(135deg,#fcfdf8f5,#fcfdf8de),var(--north-detail);
 background-size:cover;background-position:center,center 66%;background-repeat:no-repeat;
 scrollbar-width:thin;scrollbar-color:#abbca9 transparent;
}
.drawer-heading{margin-bottom:17px}
.drawer-heading .eyebrow{font-size:10px;line-height:1.5}
.contact-drawer h2{font-size:30px;line-height:1.2;letter-spacing:-.025em;margin-bottom:10px}
.drawer-intro{font-size:16px;line-height:1.6;margin-bottom:20px}
.contact-action{min-height:82px;padding:15px;gap:13px;background-color:#fffef9e8;border-color:#d2ddcd;border-radius:12px}
.contact-action-primary{background:#244a3b;border-color:#244a3b;color:#fff}
.contact-action-primary:hover{background:#18382c;border-color:#18382c;color:#fff}
.contact-action-primary small,.contact-action-primary em{color:#e7efdf}
.contact-action-primary .contact-action-icon{color:#fff;background:#ffffff12;border-color:#ffffff30}
.contact-action-primary .contact-action-arrow{color:#eef4e8}
.contact-action strong{font-size:17px;line-height:1.5;overflow-wrap:anywhere}
.contact-action small,.contact-action em{font-size:12px;line-height:1.6}
.contact-action-icon{width:36px;height:36px;border-radius:10px}
.contact-action-arrow{width:16px;height:16px}
.drawer-project p{font-size:15px;line-height:1.65}
.drawer-project .button-project{min-height:53px;font-size:15px}
.drawer-full-contact{font-size:14px;line-height:1.5;min-height:44px}
/* Existing five-step planner: improve its reading scale, retain local-only behavior. */
#project-form{font-family:var(--font-body)}
#project-form .pf-sidebar{background-color:#eef3e7;background-image:linear-gradient(#f7faf1ed,#f7faf1df),var(--north-detail);background-size:cover;background-position:center,center 68%}
#project-form .pf-intro{font-size:16px;line-height:1.7}
#project-form .pf-field-label{font-size:15px;line-height:1.6}
#project-form .pf-choice-copy strong{font-size:15px;line-height:1.45}
#project-form .pf-choice-copy>span{font-size:14px;line-height:1.65}
#project-form .pf-small,#project-form .pf-footnote,#project-form .pf-retention-note,#project-form .pf-sidebar-note{font-size:13px;line-height:1.7}
#project-form .pf-progress button{font-size:12px;line-height:1.5}
#project-form .pf-summary-card p{font-size:14px;line-height:1.65}
@media(max-width:850px){
 body{font-size:16px;font-weight:475;line-height:1.7}
 .section-heading p,.service-item p,.scope-block p,.material-card p,.match-panel p,.ready-card p,.detail-card p,.cta-box p,.faq-list details p,.process-step p{font-size:15px;line-height:1.7}
 .lead,.intro-copy .lead{font-size:16px;line-height:1.7}
 .caption,.section-note,.ready-note{font-size:13px}
 .footer-links a,.site-footer p{font-size:14px}
 .work-caption p{font-size:13px}
 .material-reference figcaption{font-size:12px}
 .intro-photo figcaption{font-size:12px}
 .mobile-cta .button-project,.mobile-cta .contact-trigger.mobile-contact{font-size:14px;min-height:50px}
 .mobile-menu{padding-inline:12px;border-radius:16px}
 .mobile-menu .menu-head{margin-bottom:15px;gap:7px}
 .mobile-menu .drawer-label{font-size:15px}
 .mobile-menu .icon-button{width:38px;height:38px;min-width:38px}
 .mobile-links{gap:6px;margin-bottom:16px}
 .mobile-links>a{font-size:16px;min-height:50px;padding:12px 9px;gap:8px}
 .menu-actions{gap:8px;padding-top:14px}
 .menu-actions>.button{font-size:14px;min-height:51px;padding:12px 9px;gap:8px}
 .contact-drawer{padding:22px}
 .contact-drawer h2{font-size:28px}
 .drawer-intro{font-size:15px}
 .contact-action{padding:14px 12px;gap:11px}
 .contact-action strong{font-size:16px}
 .drawer-project .button-project{font-size:14px}
 .drawer-full-contact{font-size:13px}
}
@media(max-width:850px){
 :root{--north-relief:url('/assets/backgrounds/coastal-relief-mobile-v1.webp')}
 .site-header{background-position:center,58% 55%}
 .stone-intro,.form-intro{background-image:linear-gradient(180deg,#f7f6f1f0,#f7f6f1de),var(--north-relief);background-position:center,center 60%}
 .stone-section,.soft-section{background-position:center,center 64%}
 .cta-box,.finder,.note,.location-card{background-position:center,center 67%}
 .dark-section,.site-footer{background-position:center,center 72%}
}
@media(max-width:374px){
 .contact-trigger.mobile-call{font-size:11px}
 .mobile-menu{padding-inline:10px}
 .mobile-links>a{font-size:15px;padding-inline:8px;gap:7px}
 .mobile-menu .menu-item-icon{width:18px;flex-basis:18px}
 .mobile-menu .menu-item-icon .ui-icon{width:18px;height:18px}
 .menu-actions>.button{font-size:14px;padding-inline:8px;gap:7px}
 .contact-drawer{padding:19px}
 .contact-action strong{font-size:15px}
 .contact-action-arrow{display:none}
 .mobile-cta .button-project,.mobile-cta .contact-trigger.mobile-contact{font-size:13px}
}
@media(max-height:620px){
 .mobile-menu .menu-head{margin-bottom:10px}
 .mobile-links{gap:5px;margin-bottom:12px}
 .mobile-links>a{min-height:44px;padding-block:9px}
 .menu-actions{padding-top:11px}
 .menu-actions>.button{min-height:46px;padding-block:10px}
 .contact-drawer{padding-block:17px}
 .contact-action{min-height:72px;padding-block:11px}
 .drawer-project{margin-top:15px;padding-top:14px}
 .drawer-project p{margin-bottom:12px}
}
@media print{
 .stone-intro,.form-intro,.stone-section,.soft-section,.cta-box,.finder,.note,.location-card,.dark-section,.site-footer,#project-form .pf-sidebar{background-image:none}
}