/* ==========================================================================
   Gutterify — charcoal and orange theme
   Warm white, charcoal and orange. Loaded last so it only repaints the
   existing components; layout, spacing and structure are untouched.
   ========================================================================== */

:root {
  --page: #101010;
  --panel: #1b1b1a;
  --panel-2: #252422;
  --ink-solid: #171717;
  --primary: #f07805;
  --primary-d: #d96500;
  --accent: #f4a627;
  --ink: #f3f1ec;
  --muted: #a9a7a0;
  --surface: #1a1a18;
  --line: #33312d;
  --white: #191919;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 10px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
}

/* ---- Base ---- */
body { background: var(--page); color: var(--ink); }
a { color: var(--ink); }
h1, h2, h3, h4 { color: var(--ink); }
::selection { background: var(--primary); color: var(--ink-solid); }

/* ---- Header ---- */
.site-header {
  background: rgba(10,10,11,.92);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.brand-utility { background: #050506; }
.brand, .brand-wordmark { color: var(--ink); }
.nav-item > a, .nav-item > .nav-dropdown-toggle { color: var(--ink); }
.nav-item > a:hover, .nav-item.is-current > a,
.nav-dropdown-toggle:hover, .nav-item.is-current > .nav-dropdown-toggle { color: var(--ink); }
.dropdown { background: var(--panel); border-color: var(--line); }
.dropdown a { color: var(--ink); }
.dropdown a:hover { background: var(--panel-2); color: var(--ink); }
.services-mega-menu { border-color: var(--line); }
.services-mega-intro { background: var(--panel-2); }
.services-mega-grid { background: var(--panel); }
.services-mega-link strong { color: var(--ink); }
.services-mega-link small { color: var(--muted); }
.services-mega-group a.services-mega-link { border-bottom-color: var(--line); }
.nav-toggle { background: var(--panel); border-color: var(--line); }
.nav-toggle span { background: var(--ink); }
.nav-cta .btn-outline { color: var(--ink-solid); }
@media (max-width: 1024px) { .primary-nav { background: var(--panel); } }

/* ---- Buttons: orange fill, charcoal label ---- */
.btn-primary, .btn-outline,
.cta-band .btn-primary,
.quote-form .btn-primary { background: #c65100; border-color: #171717; color: #fff; }
.btn-primary:hover, .btn-outline:hover,
.cta-band .btn-primary:hover { background: #b84b00; border-color: #171717; color: #fff; filter: none; }
.btn-ghost { background: rgba(255,255,255,.08); color: var(--ink); border-color: rgba(255,255,255,.28); }
.btn-ghost:hover { background: rgba(255,255,255,.16); }
.brand-mark, .feature-num, .review-avatar, .way-card .way-num,
.quote-steps li > span, .process-list li::before { background: #c65100; color: #fff; }
.chip.is-active, .chip:hover { background: var(--primary); color: var(--ink-solid); border-color: var(--ink); }

/* ---- Surfaces & cards ---- */
.plan-card, .local-banner, .service-card, .location-card, .feature-card,
.post-card, .review-card, .sidebar-card, .quote-form, .quote-sidebar-panel,
.quote-assurance-card, .quote-preparation, .coverage-areas, .aside-card,
.way-card, .faq-item, .nb-card, .price-table, .gutterify-area,
.gutterify-contact-form { background: var(--panel); border-color: var(--line); color: var(--ink); }
.plan-card-actions, .local-banner-actions { background: var(--panel-2); border-color: var(--line); }
.section .feature-card { background: var(--panel); border-color: var(--line); border-top-color: var(--ink); }
.service-card, .location-card { background: var(--panel); border-color: var(--line); border-top-color: var(--ink); }
.section .feature-card p, .service-card p, .location-card p, .post-card p,
.review-meta em, .plan-card-lead, .local-banner-intro, .local-banner-note,
.plan-card-note, .why-text, .sidebar-cta p, .faq-item p,
.nb-card p, .coverage-intro { color: var(--muted); }
.section--surface, .hero, .page-hero, .quote-aside-panel,
.gutterify-consultation, .gutterify-contact-section { background: var(--surface); }
.gutterify-area { background: var(--panel); }
.gutterify-area:hover { background: var(--panel-2); }
.why-card { background: var(--panel); border-color: var(--line); }
.section-band--white { background: var(--page); }
.quote-aside-panel { background: var(--panel-2); }

/* ---- Icons / accents ---- */
.service-icon { background: #c65100; color: #fff; }
.location-pin, .why-icon { background: rgba(240,120,5,.12); color: var(--ink); }
.check-list li::before { background-color: rgba(240,120,5,.14); color: var(--ink); }
.plan-card-points li::before, .contact-area-list li::before { background: var(--primary); }
.badge-row li { background: var(--panel-2); border-color: var(--line); color: var(--ink); }
.tag-list li { background: var(--panel-2); border-color: var(--line); color: var(--muted); }
.local-banner-areas li, .area-neighbourhoods li { background: var(--panel-2); border-color: var(--line); color: var(--ink); }

/* ---- Forms ---- */
.form-field input, .form-field select, .form-field textarea {
  background: var(--page); color: var(--ink); border-color: var(--line);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: #7d8288; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(240,120,5,.22);
}
.makeforms-js-embed { background: var(--panel); border-color: var(--line); }
.area-form select { background: var(--page); color: var(--ink); border-color: var(--line); }
.area-bar { background: var(--surface); border-bottom-color: var(--line); }
.area-preview-links { background: var(--panel); border-color: var(--line); }
.area-preview-links a { color: var(--ink); }
.area-preview-links a:hover { background: var(--panel-2); color: var(--ink); }
.form-status.is-error, .form-msg.is-error { color: #ff6b6b; }
.form-status.is-success, .form-msg.is-success { color: var(--ink); }

/* ---- Tables / prose ---- */
.markdown-table-wrap { border-color: var(--line); }
.markdown-table th, .price-table th { background: var(--panel-2); color: var(--ink); }
.markdown-table tbody tr:nth-child(even) { background: var(--surface); }
.markdown-table th, .markdown-table td,
.price-table th, .price-table td { border-bottom-color: var(--line); }
.prose pre { background: #050506; color: #d9dbd6; }
.prose code { background: var(--panel-2); color: var(--ink); }
.prose blockquote { background: var(--surface); color: var(--ink); }
.prose .table-wrap th { background: var(--panel-2); }

/* ---- Footer ---- */
.site-footer, .gutterify-footer { background: #060607; color: var(--muted); }
.footer-col h3, .gutterify-footer-links h3,
.gutterify-footer-intro h2, .footer-brand .brand { color: var(--ink); }
.footer-col a, .gutterify-footer-links a, .gutterify-footer-bottom a { color: #c9cccf; }
.footer-col a:hover, .gutterify-footer-links a:hover, .gutterify-footer-bottom a:hover { color: var(--ink); }
.gutterify-footer-bottom { border-top-color: var(--line); color: var(--muted); }

/* ---- Misc ---- */
.skip-link { background: var(--primary); color: var(--ink-solid); }
.notice { background: #1d1a0e; border-color: #463c14; color: #e9dfa6; }
.gallery-placeholder { background: var(--panel); border-color: var(--line); color: var(--muted); }
.hero-badge-card { background: var(--panel); color: var(--ink); }
.breadcrumbs ol, .breadcrumbs a { color: var(--muted); }
.breadcrumbs li:not(:last-child)::after { color: var(--line); }
.stars, .review-stars { color: var(--ink); }
.eyebrow, .coverage-areas-label, .quote-preparation-label { color: var(--ink); }
.quote-aside-panel .quote-aside { color: var(--ink); }

/* ---- Hamilton service guide (higher-specificity originals) ---- */
.section.hamilton-service-guide .feature-card {
  border: 0;
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  position: relative;
  height: 420px;
  display: flex;
  flex-direction: column;
}
.section.hamilton-service-guide .service-hero-image {
  height: 55%;
  background-size: cover;
  background-position: center;
}
.section.hamilton-service-guide .service-hero-copy {
  padding: 1.5rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.section.hamilton-service-guide .service-hero-kicker {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 700;
  color: #555;
  margin: 0 0 .5rem;
}
.section.hamilton-service-guide .service-hero-copy h3 {
  margin: 0 0 .75rem;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 800;
  color: #111;
}
.section.hamilton-service-guide .service-hero-copy p {
  margin: 0 0 1.5rem;
  font-size: .95rem;
  line-height: 1.5;
  color: #333;
  flex: 1;
}
.section.hamilton-service-guide .service-hero-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 700;
  color: #111;
  text-decoration: none;
  margin-top: auto;
}
.section.hamilton-service-guide .service-hero-link:hover { opacity: .8; }

/* ==========================================================================
   Light mode overrides
   ========================================================================== */
html.light-mode {
  --page: #f7f6f2;
  --panel: #ffffff;
  --panel-2: #eeece6;
  --ink-solid: #171717;
  --ink: #1a1a1a;
  --muted: #625f59;
  --surface: #f0eee8;
  --line: #dedad1;
  --white: #ffffff;
  --shadow-sm: 0 1px 2px rgba(22,19,15,.05), 0 2px 8px rgba(22,19,15,.06);
  --shadow-md: 0 10px 30px rgba(22,19,15,.08);
  --shadow-lg: 0 24px 60px rgba(22,19,15,.12);
}

html.light-mode body { background: var(--page); color: var(--ink); }

html.light-mode .site-header {
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 18px rgba(0,0,0,.08);
}
html.light-mode .brand-utility { background: #efeeea; }
html.light-mode .dropdown { border-color: var(--line); }
html.light-mode .dropdown a:hover { background: var(--panel-2); }
html.light-mode .services-mega-intro { background: var(--panel-2); }
html.light-mode .nav-toggle { background: var(--panel); border-color: var(--line); }
html.light-mode .nav-toggle span { background: var(--ink); }
html.light-mode .btn-ghost { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.12); }
html.light-mode .btn-ghost:hover { background: rgba(0,0,0,.10); }

html.light-mode .section .feature-card,
html.light-mode .service-card,
html.light-mode .location-card { border-top-color: var(--ink); }
html.light-mode .section--surface,
html.light-mode .hero,
html.light-mode .page-hero,
html.light-mode .quote-aside-panel { background: var(--surface); }

html.light-mode .form-field input,
html.light-mode .form-field select,
html.light-mode .form-field textarea {
  background: var(--page); border-color: var(--line);
}
html.light-mode .form-field input::placeholder,
html.light-mode .form-field textarea::placeholder { color: #8a8f93; }
html.light-mode .makeforms-js-embed { background: var(--panel); border-color: var(--line); }
html.light-mode .area-bar { background: var(--surface); border-bottom-color: var(--line); }
html.light-mode .area-preview-links { background: var(--panel); border-color: var(--line); }

html.light-mode .markdown-table tbody tr:nth-child(even) { background: var(--surface); }
html.light-mode .prose pre { background: #efeeea; color: #4a4d50; }
html.light-mode .prose blockquote { background: var(--surface); }

html.light-mode .site-footer,
html.light-mode .gutterify-footer { background: #060607 !important; color: var(--muted); }
html.light-mode .footer-col h3,
html.light-mode .gutterify-footer-links h3,
html.light-mode .gutterify-footer-intro h2,
html.light-mode .footer-brand .brand { color: var(--ink); }
html.light-mode .footer-col a,
html.light-mode .gutterify-footer-links a,
html.light-mode .gutterify-footer-bottom a { color: #c9cccf; }
html.light-mode .footer-col a:hover,
html.light-mode .gutterify-footer-links a:hover,
html.light-mode .gutterify-footer-bottom a:hover { color: var(--ink); }
html.light-mode .gutterify-footer-bottom { border-top-color: var(--line); color: var(--muted); }
html.light-mode .gutterify-footer-brand { color: #fff; }
html.light-mode .gutterify-footer-intro h2 { color: #fff; }
html.light-mode .gutterify-footer-intro p { color: #c9c9c9; }

html.light-mode .notice { background: #fbf9ea; border-color: #e7d9a8; color: #5c5312; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0;
  white-space: nowrap;
}

/* ==========================================================================
   Light mode overrides for gutterify.css hardcoded dark values
   ========================================================================== */
html.light-mode .brand-utility { background: #efeeea; color: #141517; }
html.light-mode .brand-utility a { color: #141517; }

html.light-mode .services-mega-intro { background: #f0f0ec; color: #141517; }
html.light-mode .services-mega-intro strong { color: #141517; }
html.light-mode .services-mega-intro p { color: #5a5d61; }
html.light-mode .services-mega-intro a { color: #141517; }

html.light-mode .gutterify-hero { background: #ffffff !important; color: #141517; }
html.light-mode .gutterify-hero h1,
html.light-mode .gutterify-hero h1 span { color: #141517; }
html.light-mode .gutterify-hero-lead { color: #5a5d61; }

html.light-mode .gutterify-footer { background: #f7f7f5 !important; color: #202125; }
html.light-mode .gutterify-footer-brand { color: #141517; }
html.light-mode .gutterify-footer-intro h2 { color: #141517; }
html.light-mode .gutterify-footer-intro p { color: #5a5d61; }
html.light-mode .gutterify-footer-links h3 { color: #141517; }
html.light-mode .gutterify-footer-links a { color: #5a5d61; }
html.light-mode .gutterify-footer-links a:hover { color: var(--ink); }
html.light-mode .gutterify-footer-contact p { color: #5a5d61; }
html.light-mode .gutterify-footer-bottom { border-top-color: #dddde0; color: #5a5d61; }
html.light-mode .gutterify-footer-bottom a { color: #5a5d61; }

html.light-mode .gutterify-product { background: #ffffff !important; color: #202125; }
html.light-mode .gutterify-product::after { background: linear-gradient(0deg, rgba(240,240,236,.9), rgba(240,240,236,.04) 75%); }
html.light-mode .gutterify-product h3 { color: #141517; }
html.light-mode .gutterify-product p { color: #202125; }

html.light-mode .gutterify-performance { background: #f7f7f5 !important; color: #202125; }
html.light-mode .gutterify-performance h2,
html.light-mode .gutterify-performance h3 { color: #141517; }
html.light-mode .gutterify-performance-head > p { color: #5a5d61; }
html.light-mode .gutterify-performance-grid span { color: #5a5d61; }
html.light-mode .gutterify-performance-grid p { color: #5a5d61; }

html.light-mode .gutterify-contact-panel { background: #f7f7f5 !important; color: #141517; }
html.light-mode .gutterify-contact-panel h2 { color: #141517; }
html.light-mode .gutterify-contact-panel > p:not(.gutterify-contact-label) { color: #5a5d61; }
html.light-mode .gutterify-contact-label,
html.light-mode .gutterify-contact-methods span { color: #5a5d61; }
html.light-mode .gutterify-contact-methods > div { border-top-color: rgba(0,0,0,.12); }
html.light-mode .gutterify-contact-methods a,
html.light-mode .gutterify-contact-methods p { color: #141517; }

html.light-mode .gutterify-service-hero { background: #ffffff !important; color: #141517; }
html.light-mode .gutterify-service-hero h1 { color: #141517; }
html.light-mode .gutterify-service-kicker { color: #5a5d61; }
html.light-mode .gutterify-service-hero-copy > p:not(.gutterify-service-kicker) { color: #5a5d61; }
html.light-mode .gutterify-service-phone { background: #c65100; border-color: #171717; color: #fff; }
html.light-mode .gutterify-service-phone:hover { background: #b84b00; color: #fff; }

html.light-mode .gutterify-service-process { background: #f7f7f5 !important; color: #202125; }
html.light-mode .gutterify-service-process h2 { color: #141517; }
html.light-mode .gutterify-service-process .section-head > p:last-child { color: #5a5d61; }
html.light-mode .gutterify-service-steps span { color: #141517; }
html.light-mode .gutterify-service-steps p { color: #5a5d61; }

html.light-mode .gutterify-service-includes > div { border-bottom-color: #dddde0; }

/* Use a calm light-gray hero band in light mode instead of the dark photo wash. */
html.light-mode .gutterify-hero {
  min-height: auto;
  background: #f0eee8 !important;
  color: #202125;
}
html.light-mode .gutterify-hero-image,
html.light-mode .gutterify-hero::after { display: none; }
html.light-mode .gutterify-hero-inner {
  min-height: auto;
  padding-block: clamp(4rem, 8vw, 6rem);
}
html.light-mode .gutterify-hero-eyebrow { color: #5a5d61; }
html.light-mode .gutterify-hero h1,
html.light-mode .gutterify-hero h1 span { color: #141517; }
html.light-mode .gutterify-hero-lead { color: #5a5d61; }
html.light-mode .page-hero { background-color: #f0eee8; }
html.light-mode .gutterify-service-hero { background-color: #f0eee8 !important; }

/* Alternate content bands in light mode, starting after each page's hero.
   Dark mode keeps its own palette. The filtered nth-child counts only
   main-level content sections, so hero sections and nested cards do not
   disturb the rhythm. */
html.light-mode main > :nth-child(odd of section:not(.page-hero):not(.gutterify-hero):not(.home-hero):not(.gutterify-performance):not(.reviews):not(.gutterify-service-hero):not(.hamilton-local-tips):not(.hero)) {
  background-color: #ffffff !important;
}
html.light-mode main > :nth-child(even of section:not(.page-hero):not(.gutterify-hero):not(.home-hero):not(.gutterify-performance):not(.reviews):not(.gutterify-service-hero):not(.hamilton-local-tips):not(.hero)) {
  background-color: #f0eee8 !important;
}

/* Light-mode footer remains the dark anchor of the page. */
html.light-mode .site-footer,
html.light-mode .gutterify-footer {
  background: #060607 !important;
  color: rgba(255,255,255,.78) !important;
}
html.light-mode .gutterify-footer-intro h2,
html.light-mode .gutterify-footer-links h3,
html.light-mode .gutterify-footer-contact h3,
html.light-mode .footer-col h3 { color: #f2f2ee !important; }
html.light-mode .gutterify-footer-intro p,
html.light-mode .gutterify-footer-contact p { color: #c9c9c9 !important; }
html.light-mode .gutterify-footer-links a,
html.light-mode .gutterify-footer-contact a,
html.light-mode .gutterify-footer-bottom a,
html.light-mode .footer-col a { color: #c9c9c9 !important; }
html.light-mode .gutterify-footer-links a:hover,
html.light-mode .gutterify-footer-contact a:hover,
html.light-mode .gutterify-footer-bottom a:hover,
html.light-mode .footer-col a:hover { color: var(--primary) !important; }
html.light-mode .gutterify-footer-bottom {
  border-top-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.65) !important;
}
html.light-mode .gutterify-footer-intro .gutterify-footer-brand,
html.light-mode .gutterify-footer-intro .gutterify-footer-brand:hover {
  color: #fff !important;
}
html.light-mode .gutterify-footer-intro .gutterify-footer-brand > span:last-child {
  color: #fff !important;
}
html.light-mode .reviews .review-card { background: #ffffff; }

/* South Shore-inspired homepage treatment: warm paper, charcoal and orange. */
.home-hero { padding: clamp(3.5rem, 7vw, 6.5rem) 0; background: var(--surface); color: var(--ink); overflow: hidden; }
.home-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; gap: clamp(2.5rem, 6vw, 6rem); }
.home-hero-copy { max-width: 620px; }
.home-hero-eyebrow { margin: 0 0 1rem; color: var(--ink); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.home-hero-eyebrow span { padding-inline: .35rem; color: var(--muted); }
.home-hero h1 { margin: 0 0 1.25rem; color: var(--ink); font-size: clamp(3rem, 6.2vw, 5.6rem); line-height: .98; letter-spacing: -.055em; }
.home-hero-lead { max-width: 35rem; color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7; }
.home-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.8rem; }
.home-hero-assurance { color: var(--muted); font-size: .78rem; }
.home-hero-visual { position: relative; min-width: 0; padding: 0 0 1.75rem 1.75rem; }
.home-hero-visual::before { content: ''; position: absolute; inset: -1.25rem 2.5rem 3rem -1rem; background: var(--panel-2); }
.home-hero-photo { position: relative; display: block; width: 100%; aspect-ratio: 1.22; object-fit: cover; }
.home-hero-callout { position: absolute; right: 0; bottom: 0; display: grid; gap: .45rem; width: min(290px, 82%); padding: 1.25rem 1.35rem; background: var(--primary); color: var(--ink-solid); }
.home-hero-callout > span { font-size: .63rem; font-weight: 800; letter-spacing: .12em; }
.home-hero-callout strong { max-width: 16ch; font-size: 1.15rem; line-height: 1.15; }
.home-hero-callout a { color: var(--ink-solid); font-size: .75rem; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: .04em; }
.home-hero-callout a:hover { text-decoration: underline; }
.home-hero .btn-primary { background: #171717; border-color: #171717; color: #fff; }
.home-hero .btn-primary:hover { background: var(--primary); border-color: var(--ink); color: var(--ink-solid); }
html.light-mode .home-hero { background: #f0eee8; color: #171717; }
html.light-mode .home-hero h1 { color: #171717; }
html.light-mode .home-hero .btn-primary { background: #171717; border-color: #171717; color: #fff; }

.home-service-ribbon { background: #171717; color: #f4f1eb; }
.home-service-ribbon .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem 1rem; min-height: 48px; }
.home-service-ribbon span { font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.home-service-ribbon i { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
.home-proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 1.4rem; background: var(--page); }
.home-proof-strip > div { display: flex; align-items: baseline; justify-content: center; gap: .45rem; padding: .5rem; border-right: 1px solid var(--line); }
.home-proof-strip > div:last-child { border-right: 0; }
.home-proof-strip strong { color: var(--ink); font-size: 1.05rem; }
.home-proof-strip span { color: var(--muted); font-size: .74rem; }

.home-process-card, .why-choose-card, .service-card, .feature-card, .location-card, .review-card { border-radius: 3px; box-shadow: none; }
.gutterify-performance { background: #191919 !important; color: #f3f1ec; }
.gutterify-performance h2, .gutterify-performance h3 { color: #f3f1ec; }
.gutterify-performance .eyebrow, .gutterify-performance-grid article span { color: var(--ink); }
.gutterify-performance-grid article { border-top-color: var(--ink); }
.gutterify-performance-head > p, .gutterify-performance-grid p { color: #c9c6bf; }
.reviews { background: #191919 !important; color: #f3f1ec; }
.reviews h2 { color: #f3f1ec; }
.reviews .section-head > p:last-child { color: #c9c6bf; }
.reviews .review-card { background: var(--panel); border-color: var(--line); color: var(--ink); }
.reviews .review-card blockquote { color: var(--ink); }
html.light-mode .reviews .review-card { background: #fff; color: #171717; border-color: #e6e1d8; }
html.light-mode .reviews .review-card blockquote { color: #282724; }

@media (max-width: 860px) {
  .home-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .home-hero-copy { max-width: 700px; }
  .home-hero-visual { padding-left: 1rem; }
  .home-proof-strip { grid-template-columns: repeat(2, 1fr); }
  .home-proof-strip > div:nth-child(2) { border-right: 0; }
  .home-proof-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .home-hero { padding-block: 3rem; }
  .home-hero h1 { font-size: clamp(2.7rem, 12vw, 4rem); }
  .home-service-ribbon .container { justify-content: center; padding-block: .8rem; }
  .home-service-ribbon span { font-size: .56rem; }
  .home-service-ribbon i { width: 4px; height: 4px; }
}

/* Numbered, equal-height service cards: keep copy within each column. */
.gutterify-products-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  counter-reset: gutter-service-card;
}
.gutterify-product {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: clamp(390px, 32vw, 470px);
  padding: clamp(1.25rem, 2vw, 2rem);
  overflow: visible;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: none;
  counter-increment: gutter-service-card;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.gutterify-product::before {
  content: counter(gutter-service-card, decimal-leading-zero);
  display: grid;
  place-items: center;
  align-self: flex-start;
  min-width: 3.2rem;
  min-height: 2.2rem;
  padding: .2rem .55rem;
  margin-bottom: clamp(2rem, 4vw, 4.5rem);
  background: rgba(240,120,5,.12);
  color: var(--primary);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.gutterify-product::after { display: none; }
.gutterify-product > div { width: 100%; min-width: 0; }
.gutterify-product .gutterify-product-label {
  color: var(--ink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.gutterify-product h3 {
  margin: .85rem 0 .65rem;
  color: var(--ink);
  font-size: clamp(1.35rem, 1.55vw, 1.8rem);
  line-height: 1.12;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.gutterify-product p {
  flex: 0 0 auto;
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.gutterify-product strong {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: auto;
  color: var(--ink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.gutterify-product strong span { color: var(--primary); }
.gutterify-product:hover { color: var(--ink); border-color: var(--primary); transform: translateY(-2px); }
html.light-mode .gutterify-product { background: #fff !important; color: #171717; }
html.light-mode .gutterify-product h3,
html.light-mode .gutterify-product strong { color: #171717; }
html.light-mode .gutterify-product p { color: #625f59; }

@media (max-width: 860px) {
  .gutterify-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gutterify-product { min-height: 380px; }
}
@media (max-width: 560px) {
  .gutterify-products-grid { grid-template-columns: 1fr; }
  .gutterify-product { min-height: 330px; }
  .gutterify-product::before { margin-bottom: 2rem; }
}

html.light-mode .gutterify-performance {
  background: #191919 !important;
  color: #f3f1ec;
}
html.light-mode .gutterify-performance h2,
html.light-mode .gutterify-performance h3 { color: #f3f1ec; }
html.light-mode .gutterify-performance .eyebrow,
html.light-mode .gutterify-performance-grid article span { color: var(--ink); }
html.light-mode .gutterify-performance-grid article { border-top-color: var(--ink); }
html.light-mode .gutterify-performance-head > p,
html.light-mode .gutterify-performance-grid p { color: #c9c6bf; }

/* Hamilton local tips: turn the plain list into a designed field-notes panel. */
.hamilton-local-tips { background: #171717 !important; color: #f3f1ec; }
.hamilton-local-tips-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); align-items: end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.hamilton-local-tips-header .eyebrow { color: var(--primary); }
.hamilton-local-tips-header h2 { max-width: 20ch; margin: 0; color: #f3f1ec; font-size: clamp(1.85rem, 3vw, 2.8rem); line-height: 1.12; letter-spacing: -.035em; }
.hamilton-local-tips-header > p { max-width: 42ch; margin: 0 0 .2rem; color: #c9c6bf; font-size: 1rem; line-height: 1.7; }
.hamilton-local-tips-grid { gap: 1rem; }
.hamilton-local-tip { display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: 1.1rem; align-items: start; min-width: 0; padding: clamp(1.25rem, 2vw, 1.75rem); background: linear-gradient(145deg, #242321, #1c1c1b); border: 1px solid #393631; border-top: 2px solid rgba(240,120,5,.8); border-radius: 3px; }
.hamilton-local-tip-number { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: rgba(240,120,5,.14); color: var(--primary); font-size: .82rem; font-weight: 900; letter-spacing: .04em; }
.hamilton-local-tip h3 { margin: .1rem 0 .6rem; color: #f3f1ec; font-size: 1.25rem; line-height: 1.3; }
.hamilton-local-tip p { margin: 0; color: #c9c6bf; font-size: .92rem; line-height: 1.65; }
.hamilton-local-tips-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #393631; }
.hamilton-local-tips-footer > p { margin: 0; color: #c9c6bf; font-size: .82rem; line-height: 1.5; }
.hamilton-local-tips-footer > p strong { margin-right: .6rem; color: var(--primary); font-size: .7rem; letter-spacing: .1em; }
.hamilton-local-tips-footer > div { display: flex; flex-wrap: wrap; gap: .75rem; }
.hamilton-local-tips-footer a { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem .85rem; border: 1px solid #4a443b; color: #f3f1ec; font-size: .74rem; font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: .06em; }
.hamilton-local-tips-footer a span { color: var(--primary); }
.hamilton-local-tips-footer a:hover { border-color: var(--primary); background: rgba(240,120,5,.08); }
@media (max-width: 860px) { .hamilton-local-tips-header { grid-template-columns: 1fr; gap: 1rem; } }
@media (max-width: 600px) { .hamilton-local-tips-grid { grid-template-columns: 1fr; } .hamilton-local-tips-footer { align-items: flex-start; flex-direction: column; } }

/* Desktop services dropdown: use the complete flyout width for the service list. */
@media (min-width: 1025px) {
  .services-mega-menu {
    left: 50%;
    width: min(1080px, calc(100vw - 2rem));
    max-height: min(72vh, 680px);
    overflow-y: auto;
    transform: translateX(-50%);
  }
  .nav-item.open .services-mega-menu {
    display: grid;
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  }
  .services-mega-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 3vw, 3rem);
  }
  .services-mega-grid {
    display: block;
    min-width: 0;
    padding: 1.5rem clamp(1.5rem, 3vw, 3rem);
    background: var(--panel);
  }
  .services-mega-group { min-width: 0; }
  .services-mega-group h2 { margin: 0; padding: .25rem 0 1rem; }
  .services-mega-group ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
  .services-mega-group a.services-mega-link { width: 100%; padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .services-mega-link > span:first-child { flex: 1; min-width: 0; }
  .services-mega-link small { max-width: 58ch; }
}

/* Hamilton quote section: guided project panel paired with a focused form. */
.local-quote-section { background: var(--surface); }
.local-quote-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); max-width: 1320px; align-items: stretch; gap: clamp(1rem, 2vw, 2rem); }
.local-quote-info { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(2rem, 4vw, 4rem); overflow: hidden; background: #191919; border-left: 7px solid var(--primary); color: #f3f1ec; }
.local-quote-info::after { content: ''; position: absolute; right: -8rem; bottom: -10rem; width: 22rem; height: 22rem; border: 1px solid rgba(240,120,5,.24); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(240,120,5,.035), 0 0 0 4rem rgba(240,120,5,.025); pointer-events: none; }
.local-quote-kicker, .local-quote-form-kicker { margin: 0 0 1rem; color: var(--primary); font-size: .68rem; font-weight: 900; letter-spacing: .14em; }
.local-quote-kicker span { color: #8d8981; padding-inline: .25rem; }
.local-quote-info h2 { max-width: 13ch; margin: 0 0 1rem; color: #f3f1ec; font-size: clamp(2.1rem, 3.4vw, 3.6rem); line-height: 1.02; letter-spacing: -.045em; }
.local-quote-lead { max-width: 42ch; margin: 0; color: #c9c6bf; font-size: 1rem; line-height: 1.65; }
.local-quote-steps { display: grid; gap: 1rem; width: 100%; margin: 2rem 0; padding: 0; list-style: none; }
.local-quote-steps li { display: grid; grid-template-columns: 2.5rem minmax(0,1fr); align-items: start; gap: .85rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.14); }
.local-quote-steps li > span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; background: #c65100; color: #fff; font-size: .78rem; font-weight: 900; }
.local-quote-steps strong { display: block; margin: .1rem 0 .25rem; color: #f3f1ec; font-size: .95rem; }
.local-quote-steps p { margin: 0; color: #bdb9b1; font-size: .85rem; line-height: 1.5; }
.local-quote-contact { display: grid; gap: .25rem; margin-top: auto; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.14); }
.local-quote-contact > span, .local-quote-contact small { color: #bdb9b1; font-size: .75rem; }
.local-quote-contact a { color: var(--primary); font-size: 1.2rem; font-weight: 800; }
.local-quote-form-panel { align-self: start; padding: clamp(1.5rem, 3.5vw, 3.25rem); background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--primary); box-shadow: 0 14px 34px rgba(25,20,14,.08); color: #1a1a1a; }
.local-quote-form-kicker { margin-bottom: 1.25rem; }
.local-quote-form-panel .quote-form { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: #1a1a1a; }
.local-quote-form-panel .quote-form-head { margin-bottom: 1.5rem; }
.local-quote-form-panel .quote-form-head h2 { margin: 0 0 .35rem; font-size: clamp(1.45rem, 2vw, 2rem); }
html.light-mode .local-quote-form-panel { background: #fff; }
@media (max-width: 900px) { .local-quote-layout { grid-template-columns: 1fr; } .local-quote-info h2 { max-width: 18ch; } }

/* Compact, balanced location cards for the city directory. */
.gutterify-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: stretch; gap: 1rem; }
.gutterify-area,
.gutterify-area:only-child {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: .8rem;
  padding: 1.35rem;
  overflow: hidden;
  background: var(--panel) !important;
  border: 1px solid var(--line);
  border-top: 3px solid var(--primary);
  border-radius: 5px;
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(25,20,14,.06);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.gutterify-area-visual { display: grid; width: 2.75rem; height: 2.75rem; flex: none; place-items: center; background: #c65100; border-radius: 50%; color: #fff; }
.gutterify-area-visual svg { display: block; width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gutterify-area-heading { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.gutterify-area-label { color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.gutterify-area-name { color: var(--ink); font-size: 1.55rem; font-weight: 800; line-height: 1.15; letter-spacing: -.035em; }
.gutterify-area-name span { color: var(--muted); font-size: .62em; letter-spacing: 0; }
.gutterify-area-intro { max-width: 38ch; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.gutterify-area-details { display: flex; min-width: 0; flex-direction: column; gap: .45rem; margin-top: .15rem; }
.gutterify-area-detail-label { color: var(--muted); font-size: .63rem; font-weight: 800; letter-spacing: .12em; }
.gutterify-area-communities { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--ink); font-size: .82rem; line-height: 1.45; }
.gutterify-area-chip { padding: .35rem .55rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: .75rem; }
.gutterify-area-more { color: var(--muted); font-size: .75rem; }
.gutterify-area-action { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: .75rem; color: var(--ink); font-size: .73rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.gutterify-area-action span { color: #c65100; font-size: 1.1rem; transition: transform .18s ease; }
.gutterify-area:hover { background: var(--panel) !important; border-color: var(--primary); color: var(--ink); box-shadow: 0 14px 28px rgba(0,0,0,.11); text-decoration: none; transform: translateY(-3px); }
.gutterify-area:hover .gutterify-area-action span { transform: translateX(4px); }
.gutterify-area:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.location-name-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: .75rem; }
.location-name-card { display: flex; min-width: 0; min-height: 4.25rem; align-items: center; gap: .65rem; padding: .85rem 1rem; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 4px; color: var(--ink); text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.location-name-card:hover { background: var(--panel-2); border-color: var(--primary); color: var(--ink); text-decoration: none; transform: translateY(-2px); }
.location-name-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.location-name-city { min-width: 0; flex: 1; color: var(--ink); font-size: 1.02rem; font-weight: 750; line-height: 1.25; }
.location-name-region { color: var(--muted); font-size: .76rem; font-weight: 700; }
.location-name-arrow { flex: none; color: #c65100; font-size: 1.1rem; font-weight: 800; }
.gutterify-areas--compact .gutterify-area { grid-template-columns: 86px minmax(0,1fr); grid-template-rows: auto auto auto; gap: .5rem .8rem; padding: 0 .8rem .8rem 0; }
.gutterify-areas--compact .gutterify-area-visual { grid-column: 1; grid-row: 1 / 4; min-height: 150px; padding: .6rem; }
.gutterify-areas--compact .gutterify-area-visual svg { width: 2.4rem; height: 2.4rem; }
.gutterify-areas--compact .gutterify-area-visual > span { display: none; }
.gutterify-areas--compact .gutterify-area-heading { grid-column: 2; grid-row: 1; padding-top: .8rem; }
.gutterify-areas--compact .gutterify-area-intro { display: none; }
.gutterify-areas--compact .gutterify-area-details { display: none; }
.gutterify-areas--compact .gutterify-area-action { grid-column: 2; grid-row: 2 / 4; justify-self: start; align-self: center; padding: .65rem .75rem; font-size: .65rem; }
@media (max-width: 720px) {
  .gutterify-area, .gutterify-area:only-child { grid-template-columns: minmax(0,1fr); grid-template-rows: 120px auto auto auto auto; gap: 0; padding: 0 1.25rem 1.25rem; }
  .gutterify-area-visual { grid-column: 1; grid-row: 1; flex-direction: row; justify-content: flex-start; min-height: 0; margin: 0 -1.25rem 1.1rem; padding: 1rem 1.25rem; }
  .gutterify-area-visual svg { width: 2.7rem; height: 2.7rem; }
  .gutterify-area-heading { grid-column: 1; grid-row: 2; padding: 0; }
  .gutterify-area-intro { grid-column: 1; grid-row: 3; padding-top: .7rem; }
  .gutterify-area-details { grid-column: 1; grid-row: 4; padding: 1rem 0; }
  .gutterify-area-action { grid-column: 1; grid-row: 5; justify-self: start; }
}

.cta-band, .cta-band.section-band--blue, .cta-band.section-band--white {
  background: #191919 !important;
  color: #f3f1ec;
}
.cta-band h2 { color: #f3f1ec; }
.cta-band p { color: #c9c6bf; }

@media (max-width: 860px) {
  .home-service-ribbon .container { justify-content: center; }
}

/* Wider desktop services flyout, balanced between the intro and full service list. */
@media (min-width: 1025px) {
  .services-mega-menu {
    left: 50%;
    width: min(1000px, calc(100vw - 2rem));
    max-height: min(76vh, 700px);
    overflow-y: auto;
    transform: translateX(-40%);
  }
  .nav-item.open .services-mega-menu {
    display: grid;
    grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr);
  }
  .services-mega-intro { padding: clamp(2rem, 3vw, 3rem); }
  .services-mega-grid {
    display: block;
    min-width: 0;
    padding: 1.25rem clamp(1.5rem, 2.5vw, 2.5rem);
    background: var(--panel);
  }
  .services-mega-group { width: 100%; min-width: 0; }
  .services-mega-group h2 { padding: .25rem 0 1rem; margin: 0; }
  .services-mega-group ul { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; padding: 0; list-style: none; }
  .services-mega-group a.services-mega-link { display: flex; width: 100%; padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .services-mega-link > span:first-child { flex: 1; min-width: 0; }
  .services-mega-link strong { font-size: .95rem; }
.services-mega-link small { max-width: 56ch; font-size: .78rem; line-height: 1.45; }
}

/* Compact, service-first footer layout. */
.gutter-footer-top { display: grid; grid-template-columns: minmax(210px,.7fr) minmax(0,1.3fr); align-items: center; gap: clamp(2rem,5vw,5rem); padding-top: clamp(3rem,5vw,4.5rem); padding-bottom: 2.25rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.gutter-footer-brand > a { display: inline-flex; align-items: center; gap: .65rem; color: #f3f1ec; text-decoration: none; }
.gutter-footer-brand > a strong { font-size: 1.2rem; letter-spacing: -.02em; }
.gutter-footer-brand > p { max-width: 28ch; margin: 1rem 0 0; color: #bdb9b1; font-size: .88rem; line-height: 1.65; }
.gutter-footer-project { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1.5rem; padding: clamp(1.25rem,2.5vw,2rem); background: #191919; border: 1px solid #35322e; border-left: 4px solid var(--primary); }
.gutter-footer-project h2 { max-width: 19ch; margin: 0; color: #f3f1ec; font-size: clamp(1.5rem,2.6vw,2.35rem); line-height: 1.08; letter-spacing: -.035em; }
.gutter-footer-project-actions { display: grid; gap: .55rem; min-width: 175px; }
.gutter-footer-quote, .gutter-footer-call { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .75rem .85rem; font-size: .7rem; font-weight: 900; letter-spacing: .045em; text-decoration: none; text-transform: uppercase; }
.gutter-footer-quote { background: var(--primary); color: var(--ink-solid); }
.gutter-footer-quote:hover { background: var(--primary-d); color: var(--ink-solid); }
.gutter-footer-call { border: 1px solid #49453e; color: #f3f1ec; }
.gutter-footer-call:hover { border-color: var(--primary); color: var(--primary); }
.gutter-footer-main { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(150px,.72fr) minmax(230px,1fr); gap: clamp(1.5rem,3vw,3.5rem); padding-top: 2.5rem; padding-bottom: 2.5rem; }
.gutter-footer-main h3 { margin: 0 0 1rem; color: #f3f1ec; font-size: 1rem; }
.gutter-footer-kicker { margin: 0 0 .55rem; color: var(--primary); font-size: .63rem; font-weight: 900; letter-spacing: .13em; }
.gutter-footer-kicker span { color: #77736c; padding-inline: .25rem; }
.gutter-footer-services ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; }
.gutter-footer-services a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 2.6rem; padding: .65rem .75rem; border: 1px solid #35332e; color: #d8d5ce; font-size: .78rem; text-decoration: none; }
.gutter-footer-services a span:last-child { color: var(--primary); }
.gutter-footer-services a:hover { border-color: var(--primary); color: #fff; }
.gutter-footer-explore ul { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.gutter-footer-explore a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.1); color: #d8d5ce; font-size: .83rem; text-decoration: none; }
.gutter-footer-explore a span { color: var(--primary); }
.gutter-footer-explore a:hover { color: var(--primary); }
.gutter-footer-contact { align-self: start; padding: 1.2rem; background: #191919; border: 1px solid #35332e; border-top: 3px solid var(--primary); }
.gutter-footer-contact h3 { margin-bottom: .8rem; }
.gutter-footer-contact-phone, .gutter-footer-contact-email { display: block; margin: .45rem 0; color: #f3f1ec; font-size: .88rem; font-weight: 700; overflow-wrap: anywhere; text-decoration: none; }
.gutter-footer-contact-phone { font-size: 1.15rem; }
.gutter-footer-contact-phone:hover, .gutter-footer-contact-email:hover { color: var(--primary); }
.gutter-footer-contact > p { margin: .8rem 0 0; color: #bdb9b1; font-size: .76rem; line-height: 1.55; }
.gutter-footer-contact .gutter-footer-area { padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.12); }
.gutter-footer-contact .gutter-footer-area-link { display: inline-flex; margin-top: .75rem; color: var(--primary); font-size: .72rem; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.gutter-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1rem; border-top: 1px solid rgba(255,255,255,.14); color: #aaa69e; font-size: .72rem; }
.gutter-footer-bottom p { margin: 0; }
.gutter-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.gutter-footer-bottom a { color: #c9c6bf; text-decoration: none; }
.gutter-footer-bottom a:hover { color: var(--primary); }
.gutterify-footer-intro h2.gutter-footer-wordmark { max-width: none; color: #ffffff; font-size: clamp(2.1rem, 4vw, 3.4rem); font-weight: 900; line-height: .95; letter-spacing: -.055em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 900px) {
  .gutter-footer-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .gutter-footer-main { grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); }
  .gutter-footer-contact { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .gutter-footer-top { padding-block: 2.5rem 1.75rem; }
  .gutter-footer-project { grid-template-columns: 1fr; }
  .gutter-footer-project-actions { grid-template-columns: 1fr 1fr; }
  .gutter-footer-main { grid-template-columns: 1fr; gap: 1.75rem; padding-block: 1.75rem; }
  .gutter-footer-contact { grid-column: auto; }
}
@media (max-width: 420px) { .gutter-footer-project-actions, .gutter-footer-services ul { grid-template-columns: 1fr; } }

/* Make the numbered service-card boundaries easy to distinguish. */
.gutterify-product { border-color: #47443f; }
html.light-mode .gutterify-product {
  border: 1px solid #c7c1b6;
  box-shadow: 0 3px 12px rgba(34,27,18,.07);
}

.home-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.home-work-item { display: block; min-width: 0; aspect-ratio: 1.35; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.home-work-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; }
.home-work-item:hover img { transform: scale(1.035); }
.home-work-item:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (max-width: 860px) { .home-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .home-work-grid { gap: .6rem; } }

/* Refined gutter-type cards for the option comparison section. */
.gutter-type-grid { align-items: stretch; }
.section .gutter-type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 320px;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  overflow: hidden;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 5px 18px rgba(20,16,10,.05);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gutter-type-number {
  display: grid;
  place-items: center;
  min-width: 3.3rem;
  min-height: 2.35rem;
  padding: .2rem .55rem;
  margin-bottom: 2rem;
  background: rgba(240,120,5,.12);
  color: var(--primary);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.section .gutter-type-card h3 { margin: 0 0 .7rem; font-size: clamp(1.25rem, 1.6vw, 1.55rem); line-height: 1.2; }
.section .gutter-type-card p { margin: 0 0 1.25rem; color: var(--muted); line-height: 1.55; }
.gutter-type-link { display: flex; align-items: center; gap: .45rem; margin-top: auto; color: var(--ink); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; }
.gutter-type-link span { color: var(--primary); font-size: 1.1rem; }
.gutter-type-link:hover { color: var(--primary); text-decoration: none; }
.section .gutter-type-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20,16,10,.1); }
html.light-mode .section .gutter-type-card { background: #fff; border-color: #ded9ce; }
html.light-mode .section .gutter-type-card:hover { border-color: var(--primary); }
@media (max-width: 860px) { .gutter-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gutter-type-grid { grid-template-columns: 1fr; } }

/* Make editorial links recognizable in running copy, not just on hover. */
main p a:not(.btn),
main li a:not(.btn),
main .prose a:not(.btn),
main .sidebar-card a:not(.btn) {
  color: #ff9d39;
  text-decoration-line: underline;
  text-decoration-color: rgba(255,157,57,.55);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}
html.light-mode main p a:not(.btn),
html.light-mode main li a:not(.btn),
html.light-mode main .prose a:not(.btn),
html.light-mode main .sidebar-card a:not(.btn) {
  color: #a94c00;
  text-decoration-color: rgba(169,76,0,.48);
}
main p a:not(.btn):hover,
main li a:not(.btn):hover,
main .prose a:not(.btn):hover,
main .sidebar-card a:not(.btn):hover { text-decoration-color: currentColor; }
main a:not(.btn):focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Refine the dark flow-and-protection band with clearer contrast and rhythm. */
.gutterify-performance .eyebrow,
.gutterify-performance-grid article span,
html.light-mode .gutterify-performance .eyebrow,
html.light-mode .gutterify-performance-grid article span { color: var(--primary); }
.gutterify-performance-head { align-items: start; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.gutterify-performance h2 { max-width: none; font-size: clamp(2.5rem, 4.5vw, 4.2rem); line-height: 1.02; letter-spacing: -.04em; }
.gutterify-performance-head > p { max-width: 40ch; padding-top: .5rem; font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.7; }
.gutterify-performance-grid { gap: clamp(1.25rem, 2.2vw, 2rem); }
.gutterify-performance-grid article { border-top: 1px solid rgba(240,120,5,.72); padding-top: 1rem; }
.gutterify-performance-grid article span { font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
.gutterify-performance-grid h3 { margin: .8rem 0 .55rem; font-size: 1.1rem; line-height: 1.3; }
.gutterify-performance-grid p { max-width: 30ch; font-size: .9rem; line-height: 1.65; }
html.light-mode .gutterify-performance { background: #191919 !important; color: #f3f1ec; }
html.light-mode .gutterify-performance h2,
html.light-mode .gutterify-performance h3 { color: #f3f1ec; }
html.light-mode .gutterify-performance-grid article { border-top-color: rgba(240,120,5,.72); }
html.light-mode .gutterify-performance-head > p,
html.light-mode .gutterify-performance-grid p { color: #c9c6bf; }