:root {
  --color-blue: #002e9a;
  --color-red: #ff0000;
  --color-red-dark: #c60000;
  --color-heading: #092242;
  --color-body: #111111;
  --color-cream: #fbf7ee;
  --color-gallery: #111111;
  --color-white: #ffffff;
  --font-heading: "Oswald", sans-serif;
  --font-body: "Inter", sans-serif;
  --container-wide: 1240px;
  --container-narrow: 980px;
  --sticky-header-offset: 160px;
  --logo-width: 304px;
  --motion: 240ms ease;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--sticky-header-offset); }
body { margin: 0; color: var(--color-body); background: #fff; font: 18px/1.4 var(--font-body); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 5px; }
.site-header :focus-visible, .hero :focus-visible, .contact-section :focus-visible, .site-footer :focus-visible { outline-color: #fff; }
.container { width: min(calc(100% - 48px), var(--container-wide)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 12px 18px; background: #fff; color: var(--color-heading); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.visually-hidden, .form-field label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.form-honeypot { display: none; }

/* Header: overlay at the top, compact fixed navigation after scrolling. */
.site-header { position: absolute; inset: 0 0 auto; z-index: 30; padding: 22px 0; color: #fff; transition: padding var(--motion), background-color var(--motion), box-shadow var(--motion); }
.site-header__inner { width: min(calc(100% - 48px),1100px); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 76px; }
.site-brand { position: relative; width: var(--logo-width); transition: width var(--motion); }
.header-actions { position: relative; }
.header-phone { position: absolute; left: 50%; bottom: calc(100% + 16px); transform: translateX(-50%); display: block; white-space: nowrap; color: var(--color-red); font-size: 20px; font-weight: 800; line-height: 1.3; text-shadow: 0 1px 3px #092242; }
/* Crop only the supplied logo's transparent padding in its display frame. */
.site-logo { display: block; width: 100%; }
.site-logo, .site-footer__logo { position: relative; aspect-ratio: 1433 / 762; overflow: hidden; }
.site-logo img, .site-footer__logo img { position: absolute; width: 101.047%; max-width: none; left: -.558%; top: -22.178%; }
.site-nav { display: flex; align-items: center; gap: 70px; font: 700 20px/1.2 var(--font-heading); text-transform: uppercase; }
.site-nav--left { justify-content: flex-end; }
.site-nav--right { justify-content: flex-start; }
.site-nav a { position: relative; padding: 12px 0; white-space: nowrap; text-shadow: 0 1px 5px #092242; transition: color var(--motion), transform var(--motion); }
.site-nav a::after { content: ""; position: absolute; bottom: 5px; left: 0; width: 100%; height: 2px; background: var(--color-red); transform: scaleX(0); transform-origin: left; transition: transform var(--motion); }
.site-nav a:hover, .site-nav a:focus-visible { transform: translateY(-2px); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
.site-nav--mobile { display: none; }
/* Brand blue at 80% opacity keeps the compact navigation readable over content. */
.site-header.is-sticky { position: fixed; padding: 8px 0; background: rgba(0,46,154,.8); backdrop-filter: blur(8px); box-shadow: 0 4px 18px #0002; }
.site-header.is-sticky .site-brand { width: calc(var(--logo-width) * .6); }
.site-header.is-sticky .header-phone { font-size: 20px; bottom: 100%; color: #fff; }
/* An invisible, settled copy measures the compact header before anchor scrolling. */
.site-header--measure { visibility: hidden !important; pointer-events: none; }
.site-header--measure, .site-header--measure * { transition: none !important; }
.header-phone:hover, .header-phone:focus-visible { color: #fff; }

/* Hero banner */
.hero { position: relative; min-height: 900px; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("assets/hero-eastbay-v2.jpg") center 30% / cover no-repeat; }
/* The approved revision shades the sky more strongly than the roof. */
.hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.3) 36%,rgba(0,0,0,.2)); }
.hero__content { padding-top: 142px; text-align: center; }
.hero__content { width: min(calc(100% - 48px),1560px); }
.hero h1 { max-width: 1560px; margin: 0 auto 24px; color: var(--color-cream); font: 700 80px/1.2 var(--font-heading); text-transform: uppercase; }
.hero__intro { max-width: 980px; margin: 0 auto 32px; color: #fff; font-size: 20px; font-weight: 600; line-height: 1.5; }
.hero h1 span { display: block; }
.button { min-height: 58px; display: inline-flex; align-items: center; justify-content: center; padding: 14px 48px; border: 2px solid #fff; border-radius: 0; color: #fff; background: var(--color-red); font: 700 20px/1.2 var(--font-body); text-transform: uppercase; cursor: pointer; transition: background-color var(--motion), box-shadow var(--motion), transform var(--motion); }
.button--primary { min-width: 300px; min-height: 60px; font-size: 24px; background: #0002; }
.button:hover, .button:focus-visible { background: var(--color-red-dark); transform: translateY(-3px); box-shadow: 0 8px 20px #0002; }
.button--primary:hover, .button--primary:focus-visible { background: var(--color-red); }

/* Services and interactive service headings */
.services { position: relative; overflow: hidden; min-height: 980px; padding: 72px 0 60px; background: var(--color-cream); }
.services__art { position: absolute; inset: 210px 0 auto; height: 1080px; background: url("assets/04-services-roof-line-art-background.png") center top / 1920px auto no-repeat; mix-blend-mode: multiply; opacity: .14; pointer-events: none; }
.services__inner { position: relative; }
.section-intro { text-align: center; }
.section-intro--services { max-width: var(--container-narrow); margin-inline: auto; }
.section-intro h2 { margin: 0; font: 700 48px/1.2 var(--font-heading); }
.section-intro h2 span, .section-intro h2 strong { display: block; }
.section-intro h2 span { color: var(--color-red); }
.section-intro h2 strong { color: var(--color-heading); }
.section-intro p { max-width: 980px; margin: 24px auto 0; font-size: 16.5px; line-height: 20px; }
.services__grid { display: grid; grid-template-columns: 37fr 36fr 37fr; gap: 54px 70px; margin-top: 64px; }
/* A raised surface appears without changing the measured grid spacing. */
.service-item { position: relative; isolation: isolate; transition: transform 180ms ease; }
.service-item::before { content: ""; position: absolute; inset: -16px; z-index: -1; border: 1px solid #09224214; border-radius: 6px; background: #fff; box-shadow: 0 14px 28px #0922421c; opacity: 0; transform: scale(.98); transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; }
.service-item h3 { margin: 0 0 10px; color: var(--color-heading); font: 700 24px/30px var(--font-heading); }
.service-item h3 a { transition: color 180ms ease; }
.service-item h3 a::after { content: ""; position: absolute; inset: -16px; border-radius: 6px; }
.service-item:focus-within { transform: translateY(-8px); }
.service-item:focus-within::before { opacity: 1; transform: none; }
.service-item:focus-within h3 a { color: var(--color-blue); }
.service-item p { margin: 0; font-size: 16px; line-height: 20px; }
.services__cta { margin-top: 70px; text-align: center; color: var(--color-heading); }
.services__cta p { margin: 0; font: 700 48px/1.2 var(--font-heading); }
.services__cta a { color: var(--color-red); transition: color var(--motion); }
.services__cta a:hover, .services__cta a:focus-visible { color: var(--color-blue); text-decoration: underline; }
.services__cta span { display: block; margin-top: 14px; color: var(--color-body); font-size: 16px; }

/* Gallery: the inner frame masks thin artifacts at the source-image edges. */
.work-gallery { min-height: 1200px; padding: 60px 0 80px; background: var(--color-gallery); }
.work-gallery h2 { margin: 0 0 52px; text-align: center; color: var(--color-red); font: 700 48px/58px var(--font-heading); }
.gallery-masonry { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; align-items: start; }
.gallery-column { display: grid; gap: 12px; }
.gallery-masonry figure { position: relative; overflow: hidden; margin: 0; background: #282828; border: 3px solid #282828; line-height: 0; transition: transform 280ms cubic-bezier(.2,.75,.25,1), box-shadow 280ms ease, border-color 280ms ease; }
.gallery-masonry figure::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 2px solid #282828; pointer-events: none; }
/* Natural-color close-up with a floating frame; no simulated light beam. */
.gallery-masonry img { display: block; width: 100%; object-fit: cover; transform: scale(1.015); transition: transform 450ms cubic-bezier(.2,.75,.25,1); }
.gallery-new img { aspect-ratio: 4 / 3; }
.gallery-new--portrait img { aspect-ratio: 3 / 4; }
/* Mobile additions occupy their own flow so expanding never rearranges the originals. */
.gallery-toggle { display: block; margin: 26px auto; font-size: 16px; }
.gallery-toggle[hidden], .gallery-additions[hidden] { display: none; }

/* Updated service banner */
.promo-flyer { display: flex; justify-content: center; background: #b5000b; }
.promo-flyer img { width: min(100%,1672px); aspect-ratio: 1672 / 940; object-fit: cover; }

/* Testimonials: clean white background. */
.testimonials { position: relative; isolation: isolate; overflow: hidden; min-height: 600px; padding: 92px 0 90px; background: #fff; color: var(--color-body); }
.testimonials h2 { margin: 0 0 49px; color: var(--color-heading); font: 700 42px/1.2 var(--font-heading); }
.testimonials__inner { width: min(calc(100% - 48px),1180px); }
.testimonials__grid { display: grid; width: min(100%,1160px); grid-template-columns: repeat(3,minmax(0,1fr)); gap: 100px; }
.testimonial-card__stars { margin-bottom: 23px; color: var(--color-red); font-size: 32px; line-height: 32px; letter-spacing: 0; }
.testimonial-card blockquote { margin: 0; }
.testimonial-card p { margin: 0 0 24px; font-size: 15px; font-style: italic; line-height: 24px; }
.testimonial-card cite { color: var(--color-body); font-size: 14px; font-style: normal; }

/* Roofing video and project call to action. */
.team-section { padding: 84px 0 76px; background: var(--color-cream); border-top: 1px solid #0000000c; }
.team-section__inner { max-width: 1080px; text-align: center; }
.team-section h2 { margin: 0; color: var(--color-heading); font: 700 44px/1.2 var(--font-heading); }
.team-section h2 span { display: block; }
.team-section__intro { max-width: 870px; margin: 24px auto 36px; font-size: 17px; line-height: 1.6; }
.team-section__video { position: relative; max-width: 980px; margin: 0 auto; }
.video-cover { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #111; cursor: pointer; overflow: hidden; }
.video-cover[hidden] { display: none; }
.video-cover__portrait { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.video-cover__play { position: absolute; right: 20px; bottom: 20px; display: grid; place-items: center; width: 84px; height: 58px; border-radius: 8px; background: var(--color-red); box-shadow: 0 6px 24px #0004; transition: background-color 180ms ease, box-shadow 180ms ease; }
.video-cover:hover .video-cover__play, .video-cover:focus-visible .video-cover__play { background: var(--color-red-dark); box-shadow: 0 8px 28px #0006; }
.video-cover:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.team-section__video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border: 0; background: #111; }
.team-section__video figcaption a { text-decoration: underline; text-underline-offset: 3px; }
.team-section__video figcaption { margin-top: 12px; color: #505963; font-size: 14px; line-height: 1.5; }
.team-actions { max-width: 980px; margin: 26px auto 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.team-actions a { display: flex; align-items: center; gap: 16px; min-height: 96px; padding: 16px; border-radius: 6px; text-align: left; color: var(--color-heading); font: 600 18px/1.4 var(--font-body); transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.action-icon { flex: 0 0 auto; object-fit: contain; transition: transform 180ms ease; }
.action-arrow { flex: 0 0 auto; margin-left: auto; transition: transform 180ms ease; }
.team-actions a:focus-visible { background: #fff; transform: translateY(-4px); box-shadow: 0 10px 24px #09224212; }

/* Contact: left aligned to reveal the building and fleet. */
.contact-section { position: relative; min-height: 1080px; overflow: hidden; isolation: isolate; background: url("assets/contact-team-v2.jpg") center / cover no-repeat; }
.contact-section__shade { position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.12); }
.contact-section__inner { display: grid; grid-template-columns: 425px minmax(0,1fr); gap: 28px 64px; align-items: start; padding: 32px 0 56px; }
.contact-panel { width: min(100%,425px); color: #fff; text-align: left; }
.bbb-badge { width: 176px; height: 96px; object-fit: contain; margin-bottom: 24px; }
.contact-panel h2 { margin: 0 0 28.6px; font: 700 42px/1.2 var(--font-heading); text-shadow: 0 2px 10px #0005; }
.contact-form { display: grid; gap: 11px; }
.form-row { display: grid; grid-template-columns: .52fr 1fr; gap: 14px; }
.form-field { min-width: 0; }
.form-field input, .form-field select, .form-field textarea { display: block; width: 100%; border: 1px solid #ffffffb3; border-radius: 0; background-color: rgba(255,255,255,.62); color: var(--color-body); font: 18px var(--font-body); transition: background-color var(--motion), box-shadow var(--motion); }
.form-field input, .form-field select { min-height: 54px; padding: 10px 14px; }
.form-field textarea { height: 125px; min-height: 125px; resize: vertical; padding: 14px; }
.form-field :focus { background-color: #fff; outline: 2px solid var(--color-blue); outline-offset: 1px; box-shadow: 0 0 0 4px #ffffff60; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #444; opacity: 1; }
.button--submit { width: 100%; min-height: 54px; font-size: 22px; background: #a00000; }

/* Two equal, lightly glazed rectangles sit below the form, over the road. */
.contact-guide { grid-column: 1 / -1; min-width: 0; color: var(--color-body); }
.contact-quick-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.contact-bucket { display: grid; grid-template-columns: 38px minmax(0,1fr) 20px; align-items: center; gap: 20px; min-height: 156px; padding: 24px 28px; border: 1px solid #ffffff80; border-radius: 2px; background: rgba(255,255,255,.32); box-shadow: 0 4px 18px #00000008; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease; }
.contact-bucket .action-icon, .contact-bucket .action-arrow { filter: grayscale(1) brightness(.35); }
.contact-bucket__label { display: block; margin-bottom: 6px; font: 600 23px/1.2 var(--font-heading); }
.contact-bucket__copy { display: block; font-size: 14px; line-height: 1.6; }
.contact-bucket strong { display: block; margin-top: 6px; white-space: nowrap; font: 600 26px/1.2 var(--font-heading); }
.contact-bucket__directions { display: block; margin-top: 8px; color: var(--color-body); font-size: 14px; font-weight: 700; }
.contact-bucket:focus-visible { outline-color: var(--color-blue); transform: translateY(-6px); box-shadow: 0 14px 30px #09224226; }

/* Hover motion is pointer-only; keyboard focus receives the same raised cue. */
@media (hover: hover) and (pointer: fine) {
  .service-item:hover { transform: translateY(-8px); }
  .service-item:hover::before { opacity: 1; transform: none; }
  .service-item:hover h3 a { color: var(--color-blue); }
  .gallery-masonry figure:hover { z-index: 3; transform: translateY(-7px) scale(1.015); box-shadow: 0 20px 35px #0009; border-color: #ffffffa0; }
  .gallery-masonry figure:hover img { transform: scale(1.07); }
  .team-actions a:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 10px 24px #09224212; }
  .contact-bucket:hover { transform: translateY(-6px); border-color: #fff; background: rgba(255,255,255,.45); box-shadow: 0 14px 30px #00000020; }
  .team-actions a:hover .action-icon, .contact-bucket:hover .action-icon { transform: translateY(-2px) scale(1.06); }
  .team-actions a:hover .action-arrow, .contact-bucket:hover .action-arrow { transform: translate(2px,-2px); }
}

/* Footer */
.site-footer { min-height: 300px; padding: 72px 0 56px; background: var(--color-heading); color: #fff; }
.footer-main { display: grid; grid-template-columns: 1.1fr .7fr 1.2fr; gap: 56px; }
.site-footer__logo { display: block; width: 220px; margin-bottom: 24px; }
.site-footer h2 { margin: 0 0 20px; font: 600 25px/1.3 var(--font-heading); }
.footer-nav, .footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 15px; }
.footer-nav h2, .footer-contact h2 { margin-bottom: 8px; }
.footer-contact address { font-style: normal; line-height: 1.7; }
.footer-contact > a { overflow-wrap: anywhere; }
.footer-estimate { padding: 12px 20px; min-height: 48px; font-size: 14px; margin-top: 8px; }
.footer-nav a:hover, .footer-contact > a:not(.button):hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid #ffffff30; }
.site-footer p { grid-column: 1; margin: 0; font-size: 14px; line-height: 1.7; }
/* One linked credit: icon and name share a centerline at the footer's lower right. */
.site-footer__credit { grid-column: 2; grid-row: 2; justify-self: end; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 72px; padding: 4px; color: #fff; font: 600 16px/1.25 var(--font-body); text-align: center; transition: opacity var(--motion); }
.site-footer__credit img { width: 56px; height: auto; filter: brightness(0) invert(1); }
.site-footer__credit:hover { opacity: .75; }
.site-footer p a:hover, .site-footer p a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* Responsive layouts */
/* Measured desktop rows follow the 1920 x 6000 approved canvas. */
@media (min-width: 1401px) {
  .hero::before { background-size: max(108.75%,1600px) auto; background-position: 14.286% 32%; }
  .services__grid { grid-template-rows: minmax(100px,auto) minmax(106px,auto) minmax(100px,auto); }
  .services__cta { transform: translateX(-18px); }
}
@media (max-width: 1400px) {
  .hero h1 { font-size: 62px; }
  .site-header__inner { gap: 32px; }
  .site-nav { gap: 32px; }
}
@media (max-width: 1200px) {
  .contact-section__inner { grid-template-columns: minmax(0,425px) minmax(0,1fr); gap: 28px; }
  .contact-bucket { gap: 14px; padding: 22px 18px; }
}
@media (max-width: 1100px) {
  :root { --logo-width: 270px; }
  .site-header__inner { gap: 26px; }
  .site-nav { gap: 24px; font-size: 16px; }
  .hero { min-height: 780px; }
  .hero h1 { font-size: 52px; }
  .services__grid { gap: 42px; }
  .testimonials__grid { gap: 36px; }
}
@media (max-width: 800px) {
  :root { --logo-width: 210px; --sticky-header-offset: 150px; }
  .site-header__inner { grid-template-columns: 1fr 1fr; gap: 6px 8px; max-width: 600px; }
  .site-brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .header-actions { display: contents; }
  .header-phone { position: static; transform: none; grid-column: 2; grid-row: 1; justify-self: end; padding: 12px 0; min-height: 44px; display: flex; align-items: center; }
  .site-nav--left, .site-nav--right { display: none; }
  .site-nav--mobile { display: flex; grid-column: 1 / -1; grid-row: 2; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
  .site-nav { justify-content: space-between; gap: 8px; font-size: 16px; }
  .site-header.is-sticky .site-header__inner { gap: 2px 8px; }
  .header-phone { font-size: 16px; }
  .hero { min-height: 740px; }
  .hero__content { padding-top: 168px; }
  .hero h1 { font-size: 44px; }
  .section-intro h2 { font-size: 42px; }
  .services__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-item p { max-width: none; }
  .services__cta p { font-size: 40px; }
  /* Flow individual photos continuously, not rows of unequal desktop columns. */
  .gallery-masonry { display: block; columns: 2; column-gap: 12px; }
  .gallery-column { display: contents; }
  .gallery-masonry figure { break-inside: avoid; margin-bottom: 12px; }
  .work-gallery { min-height: 0; }
  .testimonials { padding: 72px 0 80px; }
  .testimonials__grid { grid-template-columns: 1fr; gap: 42px; }
  .testimonials h2 { margin-bottom: 38px; }
  .testimonial-card__stars { margin-bottom: 14px; }
  .team-section { padding: 64px 0; }
  .team-section h2 { font-size: 38px; }
  .team-actions { gap: 10px; }
  .team-actions a { gap: 10px; padding: 12px; font-size: 16px; }
  .team-actions .action-arrow { display: none; }
  /* A separate photo band keeps the complete fleet visible on narrow screens. */
  .contact-section { min-height: 0; padding-top: 56.28%; background: #eee; }
  .contact-section::before { content: ""; position: absolute; inset: 0 0 auto; height: 0; padding-top: 56.28%; background: url("assets/contact-team-v2.jpg") center / cover no-repeat; }
  .contact-section__shade { display: none; }
  .contact-section__inner { grid-template-columns: 1fr; padding-top: 32px; }
  .contact-panel { width: 100%; color: var(--color-body); }
  .contact-panel h2 { text-shadow: none; }
  .bbb-badge { width: 132px; height: 72px; }
  .contact-bucket { background: rgba(255,255,255,.45); }
}
/* Hide the detailed flyer on phones, keeping its anchor and tablet layout intact. */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
  .promo-flyer img { display: none; }
}

@media (max-width: 520px) {
  :root { --logo-width: 150px; }
  .container, .testimonials__inner { width: calc(100% - 36px); }
  .site-header { padding-top: 12px; }
  .site-header__inner { width: calc(100% - 28px); gap: 4px 8px; }
  .site-nav { font-size: clamp(12px, 3.5vw, 16px); }
  .site-nav a { white-space: nowrap; text-align: center; }
  .site-header.is-sticky .site-header__inner { gap: 0 8px; }
  .site-header.is-sticky .header-phone { font-size: 20px; }
  .hero { min-height: 680px; }
  .hero__content { padding: 220px 0 50px; }
  .hero h1 { font-size: 34px; line-height: 1.18; margin-bottom: 24px; }
  .hero__intro { font-size: 17px; }
  .hero h1 span + span { margin-top: 8px; }
  .button--primary { min-width: 0; width: min(100%,290px); }
  .services { padding: 60px 0 48px; }
  .section-intro h2 { font-size: 36px; }
  .section-intro p, .service-item p { font-size: 16px; }
  .services__grid { grid-template-columns: 1fr; gap: 32px; margin-top: 46px; }
  .services__cta { margin-top: 52px; }
  .services__cta p { font-size: 34px; }
  .services__cta span { font-size: 14px; line-height: 1.6; }
  .work-gallery { padding: 54px 0 64px; }
  .work-gallery h2 { font-size: 42px; margin-bottom: 32px; }
  .gallery-masonry, .gallery-column { gap: 8px; }
  .gallery-masonry figure { border-width: 2px; margin-bottom: 8px; }
  .testimonials h2 { font-size: 38px; }
  .team-section h2 { font-size: 32px; }
  .team-section__intro { font-size: 16px; }
  .team-actions { grid-template-columns: 1fr; gap: 0; margin-top: 18px; }
  .team-actions a { min-height: 88px; padding: 16px 10px; border-bottom: 1px solid #09224218; border-radius: 0; }
  .team-actions .action-arrow { display: block; }
  .contact-section__inner { padding-bottom: 60px; }
  .contact-panel { width: 100%; }
  .contact-panel h2 { font-size: 36px; }
  .bbb-badge { margin-bottom: 24px; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .contact-quick-links { grid-template-columns: 1fr; }
  .site-footer { padding: 48px 0; }
  .footer-main { grid-template-columns: minmax(0,1fr); }
  .footer-bottom { align-items: flex-end; }
  .site-footer__credit { grid-column: 1; grid-row: auto; margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .service-item:is(:hover,:focus-within), .gallery-masonry figure:hover, .team-actions a:is(:hover,:focus-visible), .contact-bucket:is(:hover,:focus-visible), .action-icon, .action-arrow { transform: none !important; }
  .gallery-masonry figure:hover img { transform: scale(1.015); }
}