/* Gutterify's public visual treatment. Brand colours remain managed in Studio. */
:root { --ink: #202125; --muted: #5a5d61; --surface: #f3f3f1; --radius: 4px; --radius-sm: 3px; }
body { font-family: var(--font, 'Rubik', system-ui, sans-serif); }
h1, h2, h3, h4, .btn { font-family: var(--font-head, 'Rubik', system-ui, sans-serif); }
.site-header { background: #fff; backdrop-filter: none; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.brand-utility { background: #222427; color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.brand-utility-inner { min-height: 33px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand-utility a { color: #fff; letter-spacing: .02em; text-transform: none; }
.gutterify-mark { width: 1.805rem; height: 1.805rem; border: 3px solid var(--primary); border-radius: 2px; border-top: none; position: relative; flex: none; box-sizing: border-box; }
.gutterify-mark::before { content: ''; position: absolute; top: -3px; left: 0; right: 0; height: 3px; background: var(--primary); }
.gutterify-mark::after { content: ''; position: absolute; top: 2px; left: 50%; width: 6px; height: 60%; background: var(--primary); transform: translateX(-50%); border-radius: 1px; }
.gutterify-mark span { display: none; }
.header-inner { min-height: 84px; }
.brand-wordmark { display: flex; flex-direction: column; align-items: center; color: var(--ink); font-size: 1.9rem; font-weight: 900; letter-spacing: 0; line-height: .95; text-transform: uppercase; }
.brand-wordmark::first-letter { color: var(--ink); }
.nav-item > a, .nav-item > .nav-dropdown-toggle { color: #292a2c; font-weight: 700; }
.nav-item > a, .nav-item > .nav-dropdown-toggle { position: relative; min-height: 48px; padding-inline: 1rem; border-radius: 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.nav-item > a::after, .nav-item > .nav-dropdown-toggle::after { content: ''; position: absolute; left: 1rem; right: 1rem; bottom: 2px; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav-item.open > .nav-dropdown-toggle::after, .nav-item.is-current > a::after, .nav-item > a:hover::after, .nav-item > .nav-dropdown-toggle:hover::after { transform: scaleX(1); }
.nav-item > a:hover, .nav-item.is-current > a, .nav-dropdown-toggle:hover, .nav-item.is-current > .nav-dropdown-toggle { background: transparent; }
.services-mega-menu { width: min(850px, calc(100vw - 3rem)); padding: 0; border: 1px solid #ddd; border-top: 3px solid var(--primary); border-radius: 0; }
.services-mega-menu::before { display: none; }
.nav-item.open .services-mega-menu { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.services-mega-intro { padding: 1.7rem; background: #242628; color: #fff; }
.services-mega-intro > span { color: var(--ink); font-size: .65rem; font-weight: 700; letter-spacing: .12em; }
.services-mega-intro strong { display: block; margin: .65rem 0; color: #fff; font-size: 1.35rem; line-height: 1.15; }
.services-mega-intro p { margin: 0 0 1rem; color: #ddd; font-size: .88rem; line-height: 1.5; }
.services-mega-intro a { padding: 0; color: #fff; font-weight: 700; font-size: .83rem; }
.services-mega-intro a:hover { background: transparent; color: #fff; text-decoration: underline; }
.services-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; padding: 1.5rem; }
.services-mega-group h2 { padding: 0 0 .65rem; margin: 0 0 .4rem; color: var(--ink); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.services-mega-group a.services-mega-link { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .7rem 0; border-bottom: 1px solid #eee; border-radius: 0; }
.services-mega-link strong, .services-mega-link small { display: block; }
.services-mega-link strong { font-size: .9rem; color: var(--ink); }
.services-mega-link small { margin-top: .25rem; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.services-mega-arrow { color: var(--primary); font-size: 1.1rem; }
.services-mega-group a.services-mega-link:hover { background: transparent; }
.btn-primary, .btn-outline { background: #c65100; border-color: #171717; color: #fff; border-radius: 2px; text-transform: uppercase; letter-spacing: .035em; font-size: .82rem; padding: 1rem 1.45rem; }
.btn-primary:hover, .btn-outline:hover { background: #b84b00; border-color: #171717; filter: none; color: #fff; }
.gutterify-hero { position: relative; min-height: min(690px, 78vh); background: #36383a; color: white; overflow: hidden; }
.gutterify-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gutterify-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,18,20,.87) 0%, rgba(16,18,20,.68) 42%, rgba(16,18,20,.08) 100%); }
.gutterify-hero-inner { position: relative; z-index: 1; min-height: inherit; display: flex; align-items: center; padding-top: 5rem; padding-bottom: 5rem; }
.gutterify-hero-copy { max-width: 680px; }
.gutterify-hero-eyebrow { color: #fff; font-size: .85rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.gutterify-hero h1 { color: #fff; font-size: clamp(3rem, 6vw, 5.9rem); line-height: .98; font-weight: 800; letter-spacing: -.045em; margin: 0 0 1.4rem; }
.gutterify-hero h1 span { color: #fff; }
.gutterify-hero-lead { max-width: 33rem; font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: #fff; line-height: 1.55; margin: 0 0 2rem; }
.section-head h2 { font-size: clamp(2rem, 3.3vw, 3.2rem); letter-spacing: -.035em; line-height: 1.05; }
.eyebrow { color: var(--ink); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.service-card, .feature-card, .location-card, .post-card { border-radius: 3px; box-shadow: none; }
.service-card { border-top: 4px solid var(--primary); }
.feature-num { background: var(--primary); color: #fff; }
.cta-band, .cta-band.section-band--blue, .cta-band.section-band--white { background: var(--surface) !important; }
.cta-band.cta-band--home-white { background: #fff !important; }
.gutterify-footer { background: #191b1d; color: #fff; }
.gutterify-footer-main { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.6fr); align-items: start; gap: clamp(2rem, 4vw, 4rem); padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.gutterify-footer-brand { display: inline-flex; align-items: center; gap: .75rem; color: #fff; font-size: 1.8rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.gutterify-footer-brand:hover { color: #fff; text-decoration: none; }
.gutterify-footer-brand small { display: block; margin-top: .4rem; font-size: .55rem; letter-spacing: .18em; }
.gutterify-footer-intro h2 { color: #fff; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.05; letter-spacing: -.035em; max-width: 10em; margin: .5rem 0 1rem; }
.gutterify-footer-intro p { max-width: 28rem; color: #c9c9c9; }
.gutterify-footer-intro { align-self: start; padding: clamp(1.5rem, 2.5vw, 2.25rem); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); border-top: 4px solid var(--primary); border-radius: var(--radius); }
.gutterify-footer-intro .gutterify-footer-brand { margin-bottom: 1.25rem; }
.gutterify-footer-cta { display: inline-flex; min-height: 3rem; gap: 1.25rem; align-items: center; justify-content: space-between; margin-top: .25rem; padding: .85rem 1.1rem; border: 0; border-radius: var(--radius-sm); background: #c65100; color: #fff; font-weight: 800; }
.gutterify-footer-cta:hover { color: #fff; text-decoration: none; background: #b84b00; }
.gutterify-footer-cta span { color: #fff; font-size: 1.3rem; }
.gutterify-footer-links { display: grid; grid-template-columns: minmax(145px, 1fr) minmax(105px, .75fr) minmax(210px, 1.3fr); gap: clamp(1.25rem, 2.5vw, 2rem); align-content: start; padding-top: .5rem; }
.gutterify-footer-links h3 { color: #fff; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 1.25rem; }
.gutterify-footer-links ul { list-style: none; margin: 0; padding: 0; }
.gutterify-footer-links li { margin-bottom: .8rem; }
.gutterify-footer-links a { color: #dedede; }
.gutterify-footer-links a:hover { color: #fff; }
.gutterify-footer-contact > a { display: block; margin-bottom: .8rem; overflow-wrap: anywhere; }
.gutterify-footer-contact p { color: #c9c9c9; margin-top: 1.25rem; line-height: 1.7; }
.gutterify-footer-social { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; }
.gutterify-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid #4b4b4b; padding-top: 1.25rem; padding-bottom: 1.25rem; color: #bcbcbc; font-size: .85rem; }
.gutterify-footer-bottom p { margin: 0; }
.gutterify-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.gutterify-footer-bottom a { color: #dedede; }
/* Shared components on service, location, contact and legal pages. */
.page-hero, .hero, .quote-aside-panel { background: var(--surface); }
.page-hero { border-left: 8px solid var(--primary); padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.page-hero h1, .hero-copy h1 { font-size: clamp(2.3rem, 4vw, 3.8rem); line-height: 1.05; letter-spacing: -.04em; }
.hero-inner { gap: clamp(2rem, 5vw, 5rem); }
.hero-media img, .split img { border-radius: 0; box-shadow: none; }
.hero-media { border-bottom: 6px solid var(--primary); }
.service-card, .location-card { border: 0; border-top: 3px solid var(--primary); background: #fff; padding: 1.8rem; }
.service-icon, .location-pin { border-radius: 2px; }
.page-hero h1, .hero-copy h1 { color: var(--ink); }
.page-hero .lead, .hero-copy .lead { color: var(--muted); }
.service-icon, .location-pin { background: rgba(240,120,5,.12); color: var(--ink); }
.check-list li::before { background: rgba(240,120,5,.12); color: var(--ink); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(200,39,45,.16); }
.quote-form, .quote-aside-panel { border-radius: var(--radius); }
.breadcrumbs a:hover { color: var(--ink); }
.cta-band .btn-primary { background: #c65100; border-color: #171717; color: #fff; }
.cta-band .btn-primary:hover { background: #b84b00; border-color: #171717; color: #fff; filter: none; }
/* A shared section rhythm for every public page. */
.section { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3rem); }
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head h2, .split h2, .quote-layout h2 { margin-top: 0; font-size: clamp(1.85rem, 3vw, 2.8rem); line-height: 1.12; letter-spacing: -.035em; }
.section-head > p:last-child { margin-bottom: 0; }
.grid { align-items: stretch; }
.section .feature-card { height: 100%; padding: clamp(1.5rem, 2.5vw, 2rem); background: #fff; border: 1px solid #e7e7e4; border-top: 3px solid var(--primary); text-align: left; }
.section .feature-card h2, .section .feature-card h3 { font-size: 1.15rem; line-height: 1.3; margin: 0 0 .65rem; }
.section .feature-card p { color: var(--muted); margin-bottom: 0; }
.section .feature-num { width: 40px; height: 40px; border-radius: 2px; margin-bottom: 1rem; }
.service-card, .location-card { height: 100%; border: 1px solid #e7e7e4; border-top: 3px solid var(--primary); }
.service-card h3, .location-card h3 { margin-top: 0; }
.split { gap: clamp(2rem, 5vw, 4rem); }
.quote-form, .quote-aside-panel { padding: clamp(1.5rem, 3vw, 2.25rem); }
.quote-form .quote-form-head { margin-bottom: 1.75rem; }
.quote-form .quote-form-head h2 { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.2; letter-spacing: -.025em; margin: 0 0 .4rem; }
.quote-form .quote-form-head p { font-size: .95rem; line-height: 1.5; }
.quote-form .form-field { margin-bottom: 1.1rem; }
.quote-form .form-field label { font-size: .88rem; line-height: 1.4; }
.quote-form .form-field input, .quote-form .form-field select, .quote-form .form-field textarea { display: block; margin-top: .4rem; font-size: 1rem; font-weight: 400; line-height: 1.5; }
.quote-form .form-field textarea { min-height: 130px; }
.quote-form .form-field input::placeholder, .quote-form .form-field textarea::placeholder { color: #777; opacity: 1; font-weight: 400; }
.quote-form .form-required-note { margin: -.35rem 0 1rem; color: var(--muted); font-size: .8rem; }
.quote-form .req { color: var(--ink); font-weight: 700; }
.quote-form .form-consent { line-height: 1.45; align-items: flex-start; }
.quote-form .form-consent input { flex: 0 0 auto; }
.quote-form .form-consent a { color: var(--ink); white-space: nowrap; }
.quote-form .btn-primary { width: 100%; }
.quote-hero-points { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; padding: 0; margin: 1.5rem 0 0; list-style: none; color: var(--muted); font-size: .9rem; }
.quote-hero-points li { display: flex; align-items: center; gap: .5rem; }
.quote-hero-points li::before { content: ""; width: 1.2rem; height: 1.2rem; flex: 0 0 auto; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; color: var(--ink); }
.quote-sidebar { display: grid; gap: 1.25rem; align-content: start; }
.quote-sidebar-panel { padding: clamp(1.25rem, 2.5vw, 1.75rem); background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--radius); }
.quote-sidebar-panel h2 { margin: 0 0 .75rem; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.15; letter-spacing: -.025em; }
.quote-sidebar-panel h3 { margin: 0 0 .65rem; }
.quote-sidebar-panel p { color: var(--muted); }
.quote-sidebar-panel--soft { background: var(--surface); border-left-color: var(--ink); }
.quote-steps { display: grid; gap: 1.15rem; padding: 0; margin: 1.25rem 0 0; list-style: none; }
.quote-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .8rem; align-items: start; }
.quote-steps li > span { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: .85rem; font-weight: 800; }
.quote-steps h3 { margin: .1rem 0 .25rem; font-size: 1rem; }
.quote-steps p { margin: 0; font-size: .92rem; line-height: 1.5; }
.quote-checklist { padding: 0; margin: 1rem 0 0; list-style: none; }
.quote-checklist li { position: relative; padding-left: 1.4rem; margin-bottom: .55rem; color: var(--muted); line-height: 1.45; }
.quote-checklist li::before { content: ""; position: absolute; left: 0; width: 1.2rem; height: 1.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; color: var(--ink); }
.quote-sidebar-panel--contact p { margin: 0 0 .75rem; }
.quote-sidebar-panel--contact .btn { margin-top: .25rem; }
.quote-contact-link { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.quote-layout:has(.quote-assurance) { align-items: stretch; }
.quote-layout:has(.quote-assurance) > div:first-child { display: flex; flex-direction: column; }
.quote-assurance { display: flex; flex-direction: column; flex: 1; gap: 1.5rem; }
.quote-assurance-card, .quote-preparation { padding: clamp(1.5rem, 3vw, 2.25rem); background: #fff; border-left: 4px solid var(--primary); }
.quote-assurance-card ul { margin-bottom: 0; }
.quote-preparation { flex: 1; }
.quote-preparation-label { color: var(--ink); font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.quote-preparation h3 { margin: .5rem 0; }
.quote-preparation p:last-child { margin-bottom: 0; }
.gutterify-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
.gutterify-area { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); background: #f7f6f4; border: 1px solid #e6e4e1; border-left: 4px solid var(--primary); color: var(--ink); transition: border-color .2s ease, background .2s ease; }
.gutterify-area:only-child { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.6fr) auto; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.gutterify-area:hover { background: #fff; border-color: var(--primary); color: var(--ink); text-decoration: none; }
.gutterify-area:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.gutterify-area-heading, .gutterify-area-details { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.gutterify-area-label, .gutterify-area-detail-label { color: var(--ink); font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.gutterify-area-detail-label { color: var(--muted); }
.gutterify-area-name { font-size: clamp(1.55rem, 2.4vw, 2.1rem); line-height: 1.1; font-weight: 700; letter-spacing: -.035em; }
.gutterify-area-name span { font-size: .55em; color: var(--muted); letter-spacing: 0; }
.gutterify-area-communities { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.gutterify-area-action { color: var(--ink); font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.gutterify-area-action span { font-size: 1.15rem; margin-left: .35rem; }
.location-directory-filters { display:flex; align-items:end; flex-wrap:wrap; gap:1rem; margin:0 0 1.5rem; }
.location-directory-filters[hidden], .location-directory [data-location-empty][hidden], .gutterify-areas .gutterify-area[hidden] { display:none; }
.location-directory-filters label { display:grid; gap:.4rem; flex:1 1 220px; font-weight:600; font-size:.9rem; }
.location-directory-filters input, .location-directory-filters select { width:100%; min-height:44px; margin:0; }
.location-directory-filters p { margin:0; padding-bottom:.65rem; color:var(--muted); font-size:.9rem; }
.gutterify-areas--compact { grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:.75rem; }
.gutterify-areas--compact .gutterify-area { padding:1rem 1.2rem; gap:.4rem; }
.gutterify-areas--compact .gutterify-area-label, .gutterify-areas--compact .gutterify-area-details { display:none; }
.gutterify-areas--compact .gutterify-area-name { font-size:1.25rem; }
.gutterify-areas--compact .gutterify-area-action { font-size:.7rem; }
@media (max-width: 720px) { .gutterify-area:only-child { display: flex; align-items: flex-start; gap: 1.1rem; } }
.gutterify-products-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.gutterify-product { position: relative; min-width: 0; min-height: 430px; overflow: hidden; background: #fff; color: #111; display: flex; align-items: flex-end; }
.gutterify-product img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gutterify-product:hover img { transform: scale(1.025); }
.gutterify-product > div { position: relative; z-index: 1; box-sizing: border-box; width: 100%; min-width: 0; padding: clamp(1.2rem, 1.7vw, 1.75rem); display: flex; flex-direction: column; justify-content: flex-end; }
.gutterify-product span { display: block; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: #555; margin-bottom: .5rem; }
.gutterify-product h3 { color: #111; font-size: clamp(1.35rem, 1.65vw, 1.8rem); margin: 0 0 .65rem; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; }
.gutterify-product p { color: #333; font-size: .92rem; line-height: 1.45; margin: 0 0 1rem; overflow-wrap: anywhere; }
.gutterify-product strong { display: block; max-width: 100%; margin-top: .25rem; line-height: 1.35; overflow-wrap: anywhere; text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 700; color: #111; text-decoration: none; }
.gutterify-product strong:hover { opacity: .8; }
.gutterify-performance { background: #242628 !important; color: #fff; }
.gutterify-performance-head { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 3rem; }
.gutterify-performance h2, .gutterify-performance h3 { color: #fff; }
.gutterify-performance h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.05; margin: 0; }
.gutterify-performance-head > p { color: #ddd; max-width: 36rem; margin: 0; }
.gutterify-performance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.gutterify-performance-grid article { border-top: 2px solid var(--primary); padding-top: 1.25rem; }
.gutterify-performance-grid article span { color: #ddd; font-size: .8rem; font-weight: bold; }
.gutterify-performance-grid h3 { margin: .75rem 0; font-size: 1.15rem; }
.gutterify-performance-grid p { color: #ddd; font-size: .95rem; }
.gutterify-consultation { padding: 3.5rem 0; background: #e9e9e6; }
.gutterify-consultation .container { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.gutterify-consultation h2 { margin: 0 0 .65rem; font-size: clamp(1.8rem, 3vw, 2.7rem); }
.gutterify-consultation p { margin: 0; }
.gutterify-consultation-eyebrow { color: var(--ink); font-size: .75rem; font-weight: 700; letter-spacing: .1em; margin-bottom: .5rem !important; }
/* Contact page: a focused conversation panel paired with the enquiry form. */
.gutterify-contact-section { background: #f3f3f1; }
.gutterify-contact-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: stretch; }
.gutterify-contact-panel { background: #242628; color: #fff; padding: clamp(2rem, 4vw, 4rem); border-top: 6px solid var(--primary); }
.gutterify-contact-panel h2 { color: #fff; max-width: 15ch; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.08; letter-spacing: -.035em; }
.gutterify-contact-panel > p:not(.gutterify-contact-label) { color: #dedede; max-width: 30rem; }
.gutterify-contact-label, .gutterify-contact-methods span { color: #ddd; font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
.gutterify-contact-methods { margin-top: 3rem; }
.gutterify-contact-methods > div { padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.22); }
.gutterify-contact-methods span { display: block; margin-bottom: .4rem; }
.gutterify-contact-methods a, .gutterify-contact-methods p { color: #fff; font-size: 1.15rem; overflow-wrap: anywhere; margin: 0; }
.gutterify-contact-methods a:hover { color: #fff; text-decoration: underline; }
.gutterify-contact-form { background: #fff; padding: clamp(2rem, 4vw, 4rem); }
.gutterify-contact-form .quote-form { padding: 0; border: 0; box-shadow: none; }
.gutterify-contact-form .quote-form-head h2 { font-size: clamp(1.8rem, 2.5vw, 2.5rem); }
.gutterify-contact-coverage .tag-list { max-width: 70rem; }
/* Service pages pair a bold introduction with clear project details. */
.gutterify-service-hero { display: grid; grid-template-columns: 1fr 1fr; background: #242628 !important; color: #fff; }
.gutterify-service-hero-copy { padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem); align-self: center; }
.gutterify-service-kicker { color: #eee; font-size: .75rem; font-weight: 700; letter-spacing: .13em; }
.gutterify-service-hero h1 { color: #fff; font-size: clamp(2.7rem, 5vw, 5rem); line-height: 1; letter-spacing: -.045em; margin: 1rem 0 1.5rem; }
.gutterify-service-hero-copy > p:not(.gutterify-service-kicker) { color: #eee; max-width: 38rem; font-size: 1.1rem; line-height: 1.65; }
.gutterify-service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }
.gutterify-service-phone { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: .95rem 1.5rem; background: #c65100; border: 2px solid #171717; border-radius: 2px; color: #fff; font-size: .82rem; font-weight: 700; line-height: 1; letter-spacing: .035em; text-align: center; text-decoration: none; text-transform: uppercase; transition: filter .18s ease; }
.gutterify-service-phone:hover { color: #fff; text-decoration: none; background: #b84b00; filter: none; }
.gutterify-service-phone:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gutterify-service-hero-image { min-height: 460px; }
.gutterify-service-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.gutterify-service-overview { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 7rem); align-items: start; }
.gutterify-service-overview h2 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.1; letter-spacing: -.035em; }
.gutterify-service-overview > div:first-child > p:not(.eyebrow) { color: var(--muted); margin-bottom: 2rem; }
.gutterify-service-includes > div { display: flex; align-items: baseline; gap: 1.5rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.gutterify-service-includes span, .gutterify-service-steps span { color: var(--ink); font-weight: 700; }
.gutterify-service-includes h3 { margin: 0; font-size: 1.15rem; }
.gutterify-service-process { background: #242628 !important; color: #fff; }
.gutterify-service-process h2 { color: #fff; }
.gutterify-service-process .section-head > p:last-child { color: #ddd; }
.gutterify-service-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.gutterify-service-steps li { border-top: 2px solid var(--primary); padding-top: 1.25rem; margin-left: 0; padding-left: 0; }
.gutterify-service-steps span { color: #fff; font-size: .85rem; }
.gutterify-service-steps p { color: #eee; margin: .75rem auto 0; max-width: 16rem; }
/* Local service guidance: give longer copy room to breathe and align links. */
.hamilton-service-guide .grid { gap: 1.5rem; counter-reset: local-services; }
.section.hamilton-service-guide .feature-card { display: flex; flex-direction: column; counter-increment: local-services; padding: clamp(1.75rem, 3vw, 2.75rem); border: 1px solid #e3e3df; border-top: 4px solid var(--primary); box-shadow: 0 8px 28px rgba(20, 22, 24, .05); }
.hamilton-service-guide .feature-card::before { content: counter(local-services, decimal-leading-zero); display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.5rem; background: rgba(240,120,5,.12); color: var(--ink); font-weight: 800; font-size: .85rem; letter-spacing: .04em; }
.section.hamilton-service-guide .feature-card h3 { font-size: clamp(1.25rem, 1.5vw, 1.5rem); line-height: 1.25; margin-bottom: 1rem; }
.section.hamilton-service-guide .feature-card p { line-height: 1.7; margin: 0 0 1rem; }
.section.hamilton-service-guide .feature-card p:last-child { margin: auto 0 0; padding-top: 1.25rem; border-top: 1px solid #e9e9e6; }
.hamilton-service-guide .feature-card a { display: inline-flex; align-items: center; font-weight: 700; text-decoration: none; }
.hamilton-service-guide .feature-card a:hover { text-decoration: underline; }
.product-type-group-heading { margin: 2.5rem 0 1.25rem; font-size: 1.5rem; }
@media (max-width: 1024px) {
  .primary-nav { inset-block-start: 117px; height: calc(100dvh - 117px); }
  .nav-item > a, .nav-item > .nav-dropdown-toggle { padding: 1rem .6rem; }
  .nav-item.open .services-mega-menu { display: block; width: auto; border: 0; border-left: 2px solid var(--primary); }
  .services-mega-intro { padding: 1.15rem; }
  .services-mega-grid { grid-template-columns: 1fr; padding: 1rem; }
}
@media (max-width: 1050px) {
  .gutterify-footer-main { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 860px) {
  .gutterify-footer-main { grid-template-columns: 1fr; gap: 3rem; }
  .brand-utility-inner { justify-content: center; }
  .brand-utility-inner > span { display: none; }
  .gutterify-hero { min-height: 570px; }
  .gutterify-hero::after { background: rgba(16,18,20,.65); }
  .gutterify-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gutterify-product--large { grid-column: 1 / -1; }
  .gutterify-performance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gutterify-performance-head { gap: 1.5rem; }
  .gutterify-contact-layout { grid-template-columns: 1fr; }
  .gutterify-service-hero, .gutterify-service-overview { grid-template-columns: 1fr; }
  .gutterify-service-hero-image { min-height: 300px; max-height: 420px; }
  .gutterify-service-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .quote-preparation { margin-top: 0; }
}
@media (max-width: 480px) {
  .gutterify-footer-links { grid-template-columns: 1fr 1fr; }
  .gutterify-footer-contact { grid-column: 1 / -1; }
  .gutterify-mark { width: 1.4725rem; height: 1.4725rem; }
  .gutterify-hero { min-height: 520px; }
  .gutterify-hero h1 { font-size: clamp(2.7rem, 12vw, 3.7rem); }
  .brand-wordmark { font-size: 1.55rem; }
  .gutterify-products-grid, .gutterify-performance-grid, .gutterify-performance-head { grid-template-columns: 1fr; }
  .gutterify-product--large { grid-column: auto; }
  .gutterify-product { min-height: 320px; }
  .gutterify-consultation .container { align-items: flex-start; flex-direction: column; }
  .gutterify-service-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Keep one predictable gutter on every mobile section, including the
     header and hero. Backgrounds still span the viewport. */
  .container { padding-inline: 24px; }
  .header-inner.container, .gutterify-hero-inner.container,
  .gutterify-footer-main.container, .gutterify-footer-bottom.container { padding-inline: 24px; }
  .section { padding-block: 2.75rem; }
  .section--tight { padding-block: 2rem; }
  .section-head { margin-bottom: 1.5rem; }
  .gutterify-hero-inner { padding-block: 3rem; }
  .gutterify-footer-main { gap: 2rem; padding-block: 3rem; }
  .gutterify-footer-intro h2 { font-size: 2rem; }
  .gutterify-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; padding-top: 0; }
  .gutterify-footer-links > div { min-width: 0; }
  .gutterify-footer-links h3 { margin-bottom: .75rem; }
  .gutterify-footer-links li { margin-bottom: .65rem; }
  .gutterify-footer-contact { grid-column: 1 / -1; }
  .gutterify-footer-contact p { margin: .75rem 0 0; }
  .gutterify-footer-bottom { align-items: flex-start; flex-direction: column; gap: .75rem; }
  .markdown-table-wrap:has(.responsive-comparison) { overflow: visible; border: 0; }
  .responsive-comparison, .responsive-comparison tbody, .responsive-comparison tr, .responsive-comparison th, .responsive-comparison td { display: block; width: 100%; }
  .responsive-comparison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .responsive-comparison tbody tr { margin-bottom: .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
  .responsive-comparison tbody tr:last-child { margin-bottom: 0; }
  .responsive-comparison th, .responsive-comparison td { min-width: 0; padding: .75rem 1rem; }
  .responsive-comparison td::before { content: attr(data-label); display: block; margin-bottom: .2rem; color: var(--muted); font-size: .75rem; font-weight: 700; }
}
.gallery-placeholder { min-height: 240px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; background: #f2f3f4; border: 1px dashed #a9afb5; color: #59616b; text-align: center; }
.gallery-placeholder span { font-size: 3rem; line-height: 1; }
.gallery-placeholder p { margin: 1rem 0 0; }

/* Editorial cards for gutter-care guides. */
.reading-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.reading-guide-card {
  display: flex;
  min-width: 0;
  min-height: 300px;
  flex-direction: column;
  padding: clamp(1.35rem, 2.2vw, 2rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 4px solid var(--primary);
  border-radius: var(--radius);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(20, 22, 24, .055);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.reading-guide-card:hover {
  color: var(--ink);
  text-decoration: none;
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(20, 22, 24, .12);
}
.reading-guide-card:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.reading-guide-card-top { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.reading-guide-number {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  place-items: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  font-size: .78rem;
  font-weight: 800;
}
.reading-guide-label { color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.reading-guide-card h3 { margin: 0 0 .8rem; color: var(--ink); font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.22; }
.reading-guide-card p { margin: 0 0 1.5rem; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.reading-guide-link { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; color: var(--ink); font-size: .9rem; font-weight: 750; }
.reading-guide-link span { color: var(--primary); font-size: 1.15rem; transition: transform .18s ease; }
.reading-guide-card:hover .reading-guide-link span { transform: translateX(4px); }
@media (max-width: 860px) {
  .reading-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .reading-guide-grid { grid-template-columns: 1fr; gap: .9rem; }
  .reading-guide-card { min-height: 0; }
}

/* Hamilton location-page sections use a gutter-specific layout rather than
   the former generic service-page split and feature-card styling. */
.hamilton-planning-section { background: var(--surface); }
.hamilton-planning-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.hamilton-planning-copy h2, .local-area-copy h2 { max-width: 13ch; margin: 0 0 1rem; font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.06; letter-spacing: -.04em; }
.hamilton-planning-copy > p:not(.eyebrow), .local-area-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.hamilton-planning-list { padding: .5rem clamp(1.25rem, 2.5vw, 2rem); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.hamilton-planning-point { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.hamilton-planning-point:last-child { border-bottom: 0; }
.hamilton-planning-point > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; background: var(--panel-2); border-radius: 50%; color: var(--ink); font-size: .78rem; font-weight: 800; }
.hamilton-planning-point strong { color: var(--ink); font-size: 1.02rem; line-height: 1.4; }
.hamilton-repair-grid { gap: 1rem; }
.hamilton-repair-card { min-height: 240px; padding: clamp(1.4rem, 2.5vw, 2rem); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.hamilton-repair-index { display: inline-block; margin-bottom: 1.4rem; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.hamilton-repair-card h3 { margin: 0 0 .75rem; color: var(--ink); font-size: 1.25rem; line-height: 1.25; }
.hamilton-repair-card p { margin: 0; color: var(--muted); line-height: 1.65; }
.hamilton-estimate-section { background: var(--surface); }
.hamilton-estimate-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.hamilton-estimate-copy h2 { max-width: 12ch; margin: 0 0 1rem; font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: 1.04; letter-spacing: -.045em; }
.hamilton-estimate-copy > p:not(.eyebrow) { max-width: 42rem; color: var(--muted); line-height: 1.7; }
.hamilton-estimate-copy .btn { margin-top: .75rem; }
.hamilton-estimate-panel { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--radius); }
.hamilton-estimate-panel-label { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.hamilton-estimate-panel h3 { margin: .65rem 0 1rem; font-size: 1.35rem; }
.hamilton-estimate-panel p { margin: 1rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.local-area-coverage { background: var(--surface); }
.local-area-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.local-area-list { display: flex; flex-wrap: wrap; gap: .65rem; padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.local-area-list > span { padding: .55rem .8rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: .88rem; }
.local-area-list > p { width: 100%; margin: .5rem 0 0; color: var(--muted); font-size: .9rem; }
.local-area-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; color: var(--ink); font-weight: 750; }
.local-area-link span { color: var(--primary); }
.hamilton-local-tips { background: var(--page); }
.hamilton-local-tips .section-head { max-width: 800px; }
.hamilton-local-tips-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hamilton-local-tip { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 1rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.hamilton-local-tip > span { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; background: #c65100; border-radius: 50%; color: #fff; font-size: .78rem; font-weight: 800; }
.hamilton-local-tip h3 { margin: .15rem 0 .55rem; color: var(--ink); font-size: 1.12rem; line-height: 1.3; }
.hamilton-local-tip p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.hamilton-local-tips-note { margin: 1.25rem 0 .5rem; color: var(--muted); font-size: .9rem; }
.location-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.location-gallery-trigger { position: relative; display: block; min-width: 0; padding: 0; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); cursor: zoom-in; text-align: left; }
.location-gallery-trigger img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .25s ease; }
.location-gallery-trigger:hover img { transform: scale(1.035); }
.location-gallery-trigger:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.location-gallery-open { position: absolute; right: .65rem; bottom: .65rem; padding: .45rem .6rem; background: rgba(15,15,15,.78); color: #fff; border-radius: 2px; font-size: .72rem; font-weight: 700; opacity: 0; transition: opacity .18s ease; }
.location-gallery-trigger:hover .location-gallery-open, .location-gallery-trigger:focus-visible .location-gallery-open { opacity: 1; }
.location-lightbox { position: fixed; width: min(1200px, 95vw); height: min(850px, 92dvh); max-width: none; max-height: none; padding: 3.75rem 4.25rem; overflow: visible; border: 1px solid rgba(255,255,255,.2); background: #111; color: #fff; }
.location-lightbox[open] { display: grid; place-items: center; }
.location-lightbox::backdrop { background: rgba(0,0,0,.88); }
.location-lightbox > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.location-lightbox-close, .location-lightbox-nav { position: absolute; display: grid; place-items: center; padding: 0; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #fff; cursor: pointer; }
.location-lightbox-close { top: .75rem; right: .75rem; width: 2.5rem; height: 2.5rem; font-size: 1.8rem; line-height: 1; }
.location-lightbox-nav { top: 50%; width: 3rem; height: 3rem; transform: translateY(-50%); font-size: 2.3rem; line-height: 1; }
.location-lightbox-prev { left: .65rem; }
.location-lightbox-next { right: .65rem; }
.location-lightbox-close:hover, .location-lightbox-nav:hover { background: #c65100; }
.location-lightbox-close:focus-visible, .location-lightbox-nav:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.location-context-section { background: var(--surface); }
.location-context-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.location-context-layout h2 { max-width: 13ch; margin: 0 0 1rem; font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1.06; letter-spacing: -.04em; }
.location-context-layout > div > p:last-child { max-width: 42rem; color: var(--muted); line-height: 1.7; }
.location-weather-panel { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--radius); }
.location-weather-label { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.location-weather-panel > p { margin: .8rem 0 1rem; color: var(--muted); line-height: 1.6; }
.location-weather-panel ul { display: grid; gap: .5rem; margin: 0; padding-left: 1.1rem; color: var(--ink); }
.location-estimate-section { background: var(--surface); }
@media (max-width: 760px) {
  .hamilton-planning-layout, .hamilton-estimate-grid, .local-area-layout, .location-context-layout, .hamilton-local-tips-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hamilton-repair-card { min-height: 0; }
  .location-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .location-gallery-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .location-lightbox { width: 100vw; height: 100dvh; padding: 3.5rem 2.75rem; border: 0; } .location-lightbox-nav { width: 2.5rem; height: 2.5rem; } }