/* Mobile refinements; desktop layouts remain in the main stylesheet. */
@media (max-width: 760px) {
  html { scroll-padding-top: 20px; }
  .header { height:auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:16px 20px 10px; }
  .header .brand { font-size:16px; gap:8px; margin:0; }
  .header .brand-icon { width:42px; height:38px; }
  .header .brand small { font-size:9px; letter-spacing:.32em; }
  .header .header-quote { width:auto; min-height:44px; padding:10px 13px; font-size:13px; gap:0; white-space:nowrap; }
  .header .header-quote span { display:none; }
  .header nav { grid-column:1/-1; display:flex; width:100%; margin:0; gap:20px; overflow-x:auto; scrollbar-width:none; border-top:1px solid var(--line); }
  .header nav::-webkit-scrollbar { display:none; }
  .header nav a:not(.faq-nav), .header nav .faq-nav { display:inline-flex; align-items:center; flex-shrink:0; min-height:44px; padding:4px 0; font-size:14px; }
  .hero-scroll .hero { padding:28px 22px 0; }
  .hero-scroll .hero-content { padding-top:72px; padding-bottom:12px; width:100%; }
  .hero-scroll .hero h1 { font-size:clamp(36px,9.7vw,56px); line-height:1.08; margin-bottom:20px; }
  .hero-scroll .hero .eyebrow { font-size:12px; letter-spacing:.12em; margin-bottom:18px; }
  .hero-scroll .hero-image img, .hero-scroll .hero-video { object-position:66% center; }
  .hero-scroll .hero::before { background:linear-gradient(0deg,#0f1718f5 0%,#0f1718d9 38%,#0f17184d 76%,#0f171810 100%); }
  .hero-service-area { font-size:16px; line-height:1.5; margin:0 0 12px; max-width:28ch; }
  .hero-scroll .hero-description { font-size:16px; line-height:1.6; margin-bottom:22px; max-width:34ch; }
  .hero .button { width:100%; max-width:380px; min-height:54px; font-size:15px; padding:15px 20px; }
  .hero-phone { font-size:14px; line-height:1.6; margin-top:14px; }
  .hero-scroll .hero-notes { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12px; line-height:1.5; margin:18px 0 12px; }
  .hero-notes span { display:inline; }
  .hero-notes span+span { border:0; padding-left:0; margin:0; }
  .hero-bottom { padding:12px 0 16px; }
  .hero-bottom>span { display:none; }
  .hero-bottom a { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:36px; font-size:14px; }
  .hero-bottom a span { margin-left:0; }
  .section { padding:56px 22px; }
  .section h2, .about h2, .contact-copy h2, .contractors h2, .reviews-copy h2 { font-size:clamp(32px,8.2vw,44px); line-height:1.17; }
  .section .eyebrow { font-size:12px; line-height:1.6; letter-spacing:.1em; margin-bottom:16px; }
  .section-top { margin-bottom:28px; }
  .section-top>p { margin-top:18px; line-height:1.7; }
  .intro-strip { padding:26px 22px; }
  .intro-strip p, .intro-strip a { font-size:14px; }
  .services-grid { grid-template-columns:1fr; gap:14px; }
  .service,.service+.service,.service:nth-child(3),.service:nth-child(n+3) { padding:24px; border-radius:24px; }
  .service-icon { width:72px; height:60px; margin:12px 0 18px; }
  .service h3 { font-size:23px; }
  .service p { font-size:16px; margin-bottom:16px; line-height:1.65; }
  .service a { font-size:14px; min-height:44px; align-items:center; }
  .service-footer { font-size:15px; line-height:1.7; }
  .about { margin:0 12px; padding:36px 22px; gap:28px; border-radius:28px; }
  .about-facts { gap:10px; }
  .about-facts>span { padding:18px 14px; font-size:14px; }
  .about-facts strong { font-size:23px; }
  .large-copy { font-size:21px; }
  .about-copy p { line-height:1.75; }
  .benefits { gap:28px; }
  .benefits-visual { height:auto; aspect-ratio:4/3; }
  .benefit-list article { gap:14px; padding:20px 0; }
  .benefit-list p { font-size:16px; line-height:1.65; }
  .benefit-list h3 { font-size:20px; }
  .comparison { aspect-ratio:1.2; border-radius:22px; }
  .compare-label { font-size:12px; }
  .compare-caption { font-size:14px; line-height:1.6; }
  .reviews { margin:12px; padding:30px 20px; gap:24px; border-radius:28px; }
  .reviews .reviews-film { border-radius:20px; }
  .film-caption>span { font-size:20px; }
  .film-toggle { min-height:44px; font-size:13px; top:12px; right:12px; }
  .review-list figure,.review-list figure:last-child { padding:22px 20px; }
  .review-list blockquote { font-size:16px; line-height:1.7; }
  .review-list figcaption { font-size:14px; }
  .faq-item summary { font-size:16px; padding:18px; gap:12px; }
  .faq-answer { font-size:16px; padding:0 18px 22px; line-height:1.7; }
  .faq-footer { padding:22px 18px; }
  .contractors .button { width:100%; font-size:14px; padding:16px 18px; gap:12px; }
  .contact { gap:28px; }
  .contact-details a { max-width:100%; overflow-wrap:anywhere; font-size:18px; }
  .contact-details a[href^="tel:"] { font-size:28px; }
  .contact form { padding:24px 18px; border-radius:24px; min-width:0; }
  .form-row { grid-template-columns:minmax(0,1fr); gap:0; }
  form label { font-size:15px; margin-bottom:20px; }
  input,select,textarea { font-size:16px; min-height:52px; padding:14px; }
  textarea { min-height:140px; }
  .form-note { font-size:14px; }
  .submit { min-height:56px; font-size:16px; }
  footer { padding:32px 22px; grid-template-columns:1fr; gap:18px; }
  footer>p,footer>a:last-child { text-align:left; }
  footer>span,footer>a:last-child { font-size:14px; }
  .gallery-filters { display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding:4px 2px 12px; margin-bottom:18px; scrollbar-width:thin; }
  .gallery-filters button { flex-shrink:0; min-height:46px; font-size:14px; padding:10px 16px; }
  .gallery-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .gallery-card { border-radius:22px; aspect-ratio:4/3; }
  .gallery-card-label { font-size:16px; padding:44px 18px 18px; }
  .gallery-tag { font-size:12px; top:12px; left:12px; }
  .gallery-controls { flex-direction:column; align-items:stretch; gap:12px; margin-top:20px; }
  .gallery-status { font-size:14px; margin:0; }
  .gallery-more { justify-content:center; }
  .gallery-dialog { width:calc(100% - 16px); max-width:none; max-height:calc(100dvh - 16px); padding:14px; border-radius:22px; }
  .gallery-dialog-head>span { font-size:12px; max-width:170px; }
  .gallery-dialog button { min-width:48px; min-height:48px; padding:10px 14px; }
  .gallery-stage { min-height:0; margin:14px 0; }
  .gallery-stage img,.gallery-stage video { max-height:60dvh; }
  .gallery-dialog-foot { flex-direction:column; align-items:stretch; gap:12px; }
  .gallery-caption { font-size:14px; line-height:1.5; }
  .gallery-dialog-foot>div { justify-content:space-between; }
  .button:hover { transform:none; }
}
@media (min-width:540px) and (max-width:760px) {
  .services-grid,.gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service,.service+.service { padding:20px; }
  .service h3 { font-size:21px; }
}
@media (max-width:760px) and (max-height:740px) {
  .hero-scroll .hero-content { padding-top:12px; }
  .hero-scroll .hero h1 { font-size:36px; margin-bottom:16px; }
  .hero-scroll .hero-description { line-height:1.45; margin-bottom:16px; }
  .hero-scroll .hero-notes { margin:12px 0 6px; }
}
/* Invisible to people, but keeps simple automated form submissions out. */
.inquiry-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.submit:disabled { cursor:wait; opacity:.7; }
#form-status[data-state="error"] { color:#9b302b; }
#form-status[data-state="success"] { color:#286047; }
@media (max-width:360px) {
  .header { padding-left:16px; padding-right:16px; gap:10px; }
  .header .brand { font-size:14px; gap:6px; }
  .header .brand-icon { width:36px; height:34px; }
  .header .header-quote { font-size:12px; padding:10px; }
  .header nav { gap:16px; }
  .section { padding-left:18px; padding-right:18px; }
}
#inquiry-security:not(:empty) { margin:0 0 18px; }

/* Named contacts in the conversation section. */
.contact-person { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:18px 0; border-bottom:1px solid var(--line); }
.contact-person strong { font-family:Manrope,Arial,sans-serif; font-size:20px; font-weight:600; }
.contact-person>span { color:var(--muted); font-size:14px; line-height:1.5; }
.contact-details .contact-person a { border-bottom:0; margin-top:6px; min-height:44px; display:inline-flex; align-items:center; font-size:clamp(24px,3vw,30px); }

/* Social links share the roof-inspired palette and rounded controls. */
.contact-social { margin-top:28px; }
.contact-social p { margin:0 0 12px; font-size:14px; color:var(--muted); }
.contact-social p span { display:block; margin-top:4px; font-weight:600; color:var(--ink); }
.social-links { display:flex; flex-wrap:wrap; gap:10px; }
.social-links a { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:44px; padding:10px 17px; border:1px solid #cbd4dc; border-radius:999px; font-size:13px; color:var(--ink); background:#ffffff70; transition:background .2s ease,border-color .2s ease; }
.social-links a:hover { background:#e4eaf0; border-color:#8899aa; }
.social-links a:focus-visible { outline:2px solid #a97b52; outline-offset:4px; }
.footer-social { flex-shrink:0; }
@media (max-width:760px) { .footer-social { grid-column:1 / -1; } }

/* Keep the inquiry card fitted to its contents, rather than stretched to the contacts column. */
.contact form { align-self:center; min-width:0; height:auto; }
.inquiry-heading { margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.inquiry-heading .eyebrow { margin:0 0 10px; font-size:10px; letter-spacing:.14em; }
.inquiry-heading h3 { margin:0; font-size:clamp(23px,2.1vw,30px); line-height:1.2; letter-spacing:-.035em; }
.inquiry-heading>p:last-child { margin:10px 0 0; color:var(--muted); font-size:14px; line-height:1.6; }
.contact-copy .contact-aside { margin-top:24px!important; }
@media(max-width:760px) { .contact form { align-self:start; } .inquiry-heading { margin-bottom:22px; padding-bottom:20px; } }