/* Optimum Roofing — a deliberately small, mobile-first design system. */
@layer reset, base, components, responsive;
@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  body,h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
  button,input,select,textarea{font:inherit}
  button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
  button{cursor:pointer}
  img,svg{display:block;max-width:100%}
}
@layer base {
  :root{--ink:#111111;--muted:#666666;--paper:#ffffff;--wash:#f3f3f3;--line:#dddddd;--ease:cubic-bezier(.22,.61,.36,1);color-scheme:light}
  html{scroll-behavior:smooth;scroll-padding-top:105px;scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  body{font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
  ::selection{background:#111;color:#fff}
  a{color:inherit;text-underline-offset:.22em}
  a,button{touch-action:manipulation}
  a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #767676;outline-offset:5px}
  input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#111}
  h1,h2,h3{font-weight:600;line-height:1.08;letter-spacing:-.055em;text-wrap:balance}
  h2{font-size:clamp(2.15rem,4.25vw,3.8rem)}
  h3{font-size:1.5rem;letter-spacing:-.04em}
  p{color:var(--muted)}
  .container{width:min(1320px,calc(100% - 40px));margin-inline:auto}
  .section{padding-block:76px}
  .eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:700;line-height:1.5;letter-spacing:.18em;text-transform:uppercase;color:inherit}
  .eyebrow::before{content:"";display:block;width:22px;height:1px;background:currentColor;flex:none}
  .eyebrow.no-line::before{display:none}
  .eyebrow+.section-title,.eyebrow+h1,.eyebrow+h2{margin-top:23px}
  .lead{font-size:17px;line-height:1.75}
  .text-soft{color:#666}
  .icon{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  [hidden]{display:none!important}
  .skip-link{position:fixed;top:-100px;left:20px;z-index:1000;padding:12px 18px;background:#fff;color:#111}
  .skip-link:focus{top:10px}
  .button{min-height:52px;padding:16px 21px;display:inline-flex;justify-content:center;align-items:center;gap:13px;border:1px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;font-size:12px;font-weight:600;line-height:1.5;letter-spacing:.015em;transition:background .2s,color .2s,transform .2s;position:relative}
  .button:hover{background:#333;border-color:#333}
  .button:active{transform:translateY(1px)}
  .button .icon{width:17px;height:17px}
  .button-outline{background:transparent;color:var(--ink)}
  .button-outline:hover{background:var(--ink);color:#fff}
  .button-white{background:#fff;border-color:#fff;color:#111}
  .button-white:hover{background:#e7e7e7;border-color:#e7e7e7}
  .button-ghost{background:transparent;border-color:#666;color:#fff}
  .button-ghost:hover{background:#fff;color:#111;border-color:#fff}
  .text-link{display:inline-flex;gap:18px;align-items:center;min-height:44px;font-size:13px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;line-height:1.4}
  .text-link .icon{width:17px;height:17px;transition:transform .2s}
  .text-link:hover .icon{transform:translate(2px,-2px)}
  .section-heading{display:flex;flex-direction:column;align-items:flex-start;gap:25px;margin-bottom:38px}
  .section-heading p{max-width:420px;margin-top:20px}
  .section-heading .text-link{flex:none}
  .note{font-size:12px;line-height:1.65;color:#717171}
}
@layer components {
  .utility-bar{background:#111;color:#fff;font-size:10px;letter-spacing:.03em}
  .utility-inner{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:15px}
  .utility-local{display:none;color:#c6c6c6;align-items:center;gap:8px;font-size:9px;letter-spacing:.12em;text-transform:uppercase}
  .utility-links{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%}
  .utility-links a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap}
  .utility-links .icon{width:12px;height:12px}
  .site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.98);border-bottom:1px solid #e8e8e8}
  .header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative}
  .logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none;color:inherit}
  .logo-symbol{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:square;stroke-linejoin:miter}
  .logo-words{display:flex;flex-direction:column;line-height:1}
  .logo-name{font-size:21px;font-weight:800;letter-spacing:-.065em}
  .logo-subtitle{margin-top:5px;font-size:8px;letter-spacing:.4em;font-weight:500}
  .header-controls{display:flex;align-items:center;gap:9px}
  .header-call{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid #ddd;text-decoration:none}
  .menu-toggle{width:42px;height:42px;border:0;background:transparent;display:none;align-items:center;justify-content:center}
  .js .menu-toggle{display:flex}
  .main-nav{background:#fff;position:absolute;top:100%;left:-20px;right:-20px;max-height:calc(100vh - 114px);max-height:calc(100svh - 114px);overflow:auto;padding:15px 20px 25px;box-shadow:0 10px 20px #0000000d}
  .js .main-nav{display:none}
  .js .main-nav.is-open{display:block}
  html:not(.js) .header-inner{flex-wrap:wrap}
  html:not(.js) .main-nav{position:static;width:100%;max-height:none;box-shadow:none;padding-inline:0}
  .nav-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:0}
  .nav-list>li{border-bottom:1px solid #ededed}
  .nav-link,.nav-disclosure>summary{padding:13px 0;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:5px;text-decoration:none;font-size:13px;font-weight:500;cursor:pointer;list-style:none}
  .nav-disclosure>summary::-webkit-details-marker{display:none}
  .nav-disclosure>summary .icon{height:12px;width:12px;transition:transform .2s}
  .nav-disclosure[open]>summary .icon{transform:rotate(180deg)}
  .nav-link[aria-current=page],.nav-disclosure.is-active>summary{font-weight:700}
  .nav-link[aria-current=page]::after{content:"";width:4px;height:4px;background:#111;border-radius:50%}
  .dropdown{list-style:none;padding:0 0 12px 15px}
  .dropdown a{display:block;min-height:43px;padding:10px 5px;color:#555;text-decoration:none;font-size:13px}
  .dropdown a:hover,.dropdown a[aria-current=page]{color:#111;text-decoration:underline}
  .hero{display:grid;gap:40px;padding-block:45px 40px}
  .hero-copy{padding-block:4px}
  .hero h1{font-size:clamp(2.7rem,10.8vw,4rem);letter-spacing:-.063em;line-height:1.02;margin-bottom:26px;text-wrap:initial}
  .hero h1 span{display:block}
  .hero-intro{max-width:450px;font-size:15px;line-height:1.85}
  .hero-actions{display:grid;gap:11px;margin-top:28px;max-width:410px}
  .hero-actions .button{justify-content:space-between;text-align:left;padding-inline:18px;font-size:11px;min-height:55px}
  .hero-proof{display:flex;align-items:center;flex-wrap:wrap;gap:9px 19px;margin-top:23px;font-size:10px;letter-spacing:.01em;color:#666}
  .hero-proof span{display:inline-flex;align-items:center;gap:6px}
  .hero-proof .icon{width:14px;height:14px;stroke-width:1.8}
  .hero-visual{position:relative;min-width:0;aspect-ratio:1.12;isolation:isolate;overflow:hidden;background:#ddd}
  .hero-visual::after{position:absolute;inset:40% 0 0;content:"";background:linear-gradient(transparent,#0008);z-index:0;pointer-events:none}
  .hero-visual picture,.hero-visual img{width:100%;height:100%;display:block}
  .hero-visual img{object-fit:cover;object-position:57% 50%;filter:none}
  .image-tag{position:absolute;top:20px;left:20px;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#111;padding:9px 12px;font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;z-index:1}
  .image-tag .icon{width:13px;height:13px}
  .hero-caption{position:absolute;left:25px;right:25px;bottom:25px;z-index:1;color:#fff;display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
  .hero-caption p{color:#fff;max-width:220px;font-size:25px;line-height:1.15;letter-spacing:-.035em}
  .hero-caption small{display:block;font-size:8px;letter-spacing:.16em;margin-bottom:10px;text-transform:uppercase}
  .hero-caption .icon{width:34px;height:34px;stroke-width:1}
  .hero-scroll{display:none}
  .standard-strip{background:#111;color:#fff}
  .strip-grid{display:grid;grid-template-columns:1fr}
  .strip-item{display:flex;align-items:center;gap:19px;padding:24px 0;border-bottom:1px solid #3a3a3a}
  .strip-item:last-child{border-bottom:0}
  .strip-item>.icon{width:29px;height:29px;stroke:#ddd;stroke-width:1.2}
  .strip-item h2{font-size:14px;letter-spacing:-.02em;line-height:1.5}
  .strip-item p{color:#999;font-size:11px;margin-top:3px}
  .promise-grid{display:grid;gap:45px;align-items:center}
  .promise-image{position:relative;aspect-ratio:1.1;overflow:hidden;background:#e6e6e6}
  .promise-image img{width:100%;height:100%;object-fit:cover;filter:none}
  .promise-caption{position:absolute;left:0;bottom:0;max-width:83%;padding:24px 25px;background:#111;color:#fff;display:flex;align-items:center;gap:15px;font-size:17px;line-height:1.35;letter-spacing:-.035em}
  .promise-caption .icon{width:27px;height:27px}
  .promise-copy .lead{margin-top:25px}
  .promise-points{list-style:none;padding:0;margin-top:29px;border-top:1px solid var(--line)}
  .promise-points li{display:flex;align-items:flex-start;gap:14px;padding:17px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.6}
  .promise-points .icon{height:17px;width:17px;margin-top:2px}
  .promise-copy .text-link{margin-top:26px}
  .services-section{background:var(--wash)}
  .service-cards{display:grid;gap:16px}
  .service-card{position:relative;background:#fff;border:1px solid #e1e1e1;text-decoration:none;display:flex;flex-direction:column;min-height:300px;padding:28px;transition:background .25s,border-color .25s}
  .service-card:hover{background:#f9f9f9;border-color:#666}
  .service-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:35px;color:#666}
  .service-topline .card-number{font-size:10px;letter-spacing:.1em}
  .service-topline>.icon{height:18px;width:18px;color:#111;transition:transform .25s}
  .service-card:hover .service-topline>.icon{transform:translate(3px,-3px)}
  .service-art{width:84px;height:69px;stroke:#111;fill:none;stroke-width:1.25;margin-bottom:31px}
  .service-card h3{font-size:25px}
  .service-card p{margin-top:14px;font-size:13px;line-height:1.8;max-width:320px}
  .service-foot{display:block;margin-top:28px;padding-top:17px;border-top:1px solid #e1e1e1;font-size:10px;color:#666;letter-spacing:.015em}
  .service-underlinks{display:flex;flex-wrap:wrap;gap:11px 30px;margin-top:28px;font-size:12px;color:#555}
  .service-underlinks a{display:inline-flex;gap:8px;align-items:center;min-height:32px}
  .service-underlinks .icon{width:13px;height:13px}
  .claims-section{background:#111;color:#fff;position:relative;overflow:hidden}
  .claims-layout{display:grid;gap:44px;position:relative}
  .claims-intro h2{max-width:540px}
  .claims-intro>p{color:#b5b5b5;margin-top:26px;max-width:400px;font-size:15px;line-height:1.8}
  .claims-intro>.button{margin-top:30px}
  .claims-list{list-style:none;padding:0;counter-reset:claim-step}
  .claims-list li{position:relative;display:grid;grid-template-columns:38px 1fr;gap:20px;padding:24px 0;border-top:1px solid #3c3c3c}
  .claims-list li:last-child{padding-bottom:0}
  .step-number{font-size:11px;letter-spacing:.1em;color:#999;padding-top:4px}
  .claims-list h3{font-size:20px;letter-spacing:-.025em;line-height:1.4}
  .claims-list p{font-size:13px;color:#aaa;margin-top:8px;line-height:1.85}
  .materials-intro{max-width:560px}
  .material-grid{display:grid;gap:17px}
  .material-card{padding:30px;background:var(--wash);border:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate}
  .material-card.dark{background:#111;color:#fff;border-color:#111}
  .material-top{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:1}
  .material-pill{font-size:8px;letter-spacing:.12em;text-transform:uppercase;border:1px solid #bbb;padding:7px 10px;line-height:1.4;font-weight:600}
  .dark .material-pill{border-color:#646464}
  .material-top>.icon{width:24px;height:24px}
  .material-number{font-size:106px;line-height:1;letter-spacing:-.08em;margin:33px 0 20px;font-weight:500;position:relative;z-index:1}
  .material-number small{font-size:12px;letter-spacing:.1em;margin-right:12px;font-weight:400;vertical-align:middle}
  .material-card h3{font-size:22px;position:relative;z-index:1}
  .material-card p{font-size:13px;line-height:1.8;margin-top:14px;max-width:390px;position:relative;z-index:1}
  .material-card.dark p{color:#b5b5b5}
  .shingle-pattern{position:absolute;right:-30px;top:85px;width:235px;height:170px;opacity:.11;transform:rotate(-16deg);pointer-events:none;color:currentColor;z-index:0}
  .material-card .text-link{margin-top:25px;font-size:11px;position:relative;z-index:1}
  .materials-note{max-width:890px;margin-top:24px}
  .materials-note a{color:#555}
  .reviews-section{background:var(--wash)}
  .sample-label{display:inline-flex;align-items:center;padding:7px 10px;border:1px solid #d5d5d5;color:#666;font-size:10px;letter-spacing:.015em;line-height:1.5}
  .review-grid{display:grid;gap:15px}
  .review-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e4e4e4;padding:29px;min-height:330px}
  .stars{font-size:15px;letter-spacing:4px;margin-bottom:25px;line-height:1}
  .review-card blockquote{font-size:13px;color:#444;line-height:1.95;flex:1}
  .review-author{display:flex;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid #ededed}
  .review-initial{width:35px;height:35px;display:grid;place-items:center;background:#eeeeee;border-radius:50%;font-size:10px;font-weight:600}
  .review-author strong{display:block;font-size:11px;font-weight:600;line-height:1.5}
  .review-author span{font-size:10px;color:#666}
  .review-invite{margin-top:30px;padding:30px;border:1px solid #cecece;display:grid;gap:24px;align-items:center;background:#fff}
  .review-invite h3{font-size:24px;line-height:1.25}
  .review-invite p{font-size:12px;margin-top:12px;line-height:1.85;max-width:760px}
  .review-invite .button{white-space:normal;text-align:center;align-self:start;font-size:11px}
  .mono-emoji{filter:grayscale(1);font-size:16px}
  .review-feedback{font-size:11px;margin-top:12px;color:#666;max-width:230px}
  .area-section{padding-block:58px;border-bottom:1px solid var(--line)}
  .area-layout{display:grid;gap:25px}
  .area-heading{display:flex;gap:18px;align-items:center}
  .area-heading>.icon{width:34px;height:34px;stroke-width:1.2}
  .area-heading h2{font-size:25px;letter-spacing:-.04em}
  .area-heading p{font-size:12px;margin-top:6px}
  .area-cities{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;align-content:center}
  .area-cities li{border:1px solid #dedede;padding:7px 13px;font-size:10px}
  .faq-layout{display:grid;gap:34px}
  .faq-intro p{margin-top:24px;max-width:300px;font-size:14px}
  .faq-intro .text-link{margin-top:20px}
  .faq-list{border-top:1px solid #ccc}
  .faq-list details{border-bottom:1px solid #ccc}
  .faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:14px;font-weight:500;cursor:pointer;padding:22px 0;min-height:65px;line-height:1.5}
  .faq-list summary::-webkit-details-marker{display:none}
  .faq-list summary::after{content:"+";font-size:23px;font-weight:300;color:#666;flex:none;line-height:1}
  .faq-list details[open] summary::after{content:"−"}
  .faq-list details p{font-size:13px;line-height:1.9;padding:0 35px 23px 0;max-width:690px}
  .contact-footer{background:#111;color:#fff;padding-top:70px}
  .footer-contact-grid{display:grid;gap:44px;padding-bottom:65px}
  .footer-intro h2{font-size:clamp(2.3rem,4.4vw,4.2rem);max-width:480px}
  .footer-intro>p{color:#aaa;font-size:14px;line-height:1.9;margin-top:25px;max-width:365px}
  .footer-direct{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:32px}
  .footer-direct a{text-decoration:none;display:flex;align-items:center;gap:13px;font-size:14px;line-height:1.5;min-height:34px}
  .footer-direct a:first-child{font-size:26px;letter-spacing:-.035em}
  .footer-direct a:last-child{overflow-wrap:anywhere}
  .footer-direct .icon{width:20px;height:20px;color:#aaa}
  .footer-direct a:hover{text-decoration:underline}
  .footer-location{display:flex;align-items:center;gap:10px;margin-top:26px;font-size:11px;color:#aaa;letter-spacing:.03em}
  .footer-location .icon{width:15px;height:15px}
  .contact-form{background:#fff;padding:26px;color:#111;align-self:start}
  .contact-form h3{font-size:24px;letter-spacing:-.045em}
  .form-intro{font-size:11px;margin-top:10px;line-height:1.7}
  .form-grid{display:grid;gap:16px;margin-top:26px}
  .form-field{display:flex;flex-direction:column;gap:7px;min-width:0}
  .form-field label{font-size:10px;font-weight:600;letter-spacing:.015em}
  .form-field label span{color:#666;font-weight:400}
  .form-field input,.form-field select{width:100%;height:46px;border:1px solid #949494;border-radius:0;background:#fff;color:#111;font-size:16px;padding:10px 12px;min-width:0;transition:border-color .2s}
  .form-field select{padding-right:25px}
  .form-field input:hover,.form-field select:hover{border-color:#999}
  .form-field input::placeholder{color:#707070;font-size:12px}
  .form-field select:invalid{color:#757575}
  .form-submit{width:100%;margin-top:21px;min-height:52px;font-size:12px;justify-content:space-between}
  .form-help{font-size:10px;color:#666;line-height:1.7;margin-top:13px}
  .form-status{margin-top:16px;border-left:2px solid #111;padding:5px 0 5px 12px;font-size:12px;line-height:1.7;color:#333}
  .draft-panel{margin-top:18px;border-top:1px solid #ddd;padding-top:18px}
  .draft-panel h4{font-size:14px;line-height:1.5;margin:0 0 9px}
  .draft-panel pre{font-family:inherit;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;background:#f3f3f3;padding:15px;font-size:12px;margin:0}
  .draft-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
  .draft-actions .button{font-size:11px;min-height:44px;padding:11px 14px}
  .footer-bottom{border-top:1px solid #393939;padding-top:32px;padding-bottom:28px}
  .footer-nav-row{display:flex;flex-direction:column;gap:25px}
  .footer-nav{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;padding:0}
  .footer-nav a{text-decoration:none;font-size:11px;color:#bbb;min-height:34px;display:flex;align-items:center}
  .footer-nav a:hover{color:#fff;text-decoration:underline}
  .footer-contact-line{display:flex;flex-direction:column;gap:5px;margin-top:24px;padding-top:23px;border-top:1px solid #2e2e2e;font-size:11px;color:#aaa}
  .footer-contact-line a{color:#ddd;text-decoration:none;min-height:30px;display:inline-flex;align-items:center}
  .copyright-row{display:flex;justify-content:space-between;gap:15px;margin-top:12px;font-size:9px;letter-spacing:.02em;color:#999;line-height:1.8}
  .copyright-row p{color:inherit}
  .back-top{display:inline-flex;align-items:center;gap:6px;text-decoration:none;flex:none;min-height:30px}
  .back-top .icon{height:13px;width:13px}
  .mobile-call-bar{position:fixed;z-index:80;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1.15fr;padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px;background:#fff;box-shadow:0 -2px 16px #0000000d;border-top:1px solid #dedede}
  .mobile-call-bar .button{padding:12px 8px;font-size:10px;min-height:45px;gap:7px}
  body{padding-bottom:calc(75px + env(safe-area-inset-bottom))}
  .breadcrumb{list-style:none;padding:0;display:flex;gap:9px;align-items:center;color:#666;font-size:10px;flex-wrap:wrap;margin-bottom:33px}
  .breadcrumb a{text-decoration:none}
  .breadcrumb a:hover{text-decoration:underline}
  .breadcrumb li+li::before{content:"/";margin-right:9px;color:#aaa}
  .page-hero{padding-block:28px 55px;background:var(--wash);border-bottom:1px solid var(--line)}
  .page-hero-grid{display:grid;gap:35px;align-items:center}
  .page-hero h1{font-size:clamp(2.65rem,7vw,5.1rem);line-height:1.04;max-width:840px;letter-spacing:-.06em}
  .page-hero .lead{margin-top:25px;max-width:640px;font-size:16px}
  .page-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}
  .page-hero-image{aspect-ratio:1.3;background:#ddd;overflow:hidden}
  .page-hero-image img{width:100%;height:100%;object-fit:cover;filter:none}
  .page-hero-art{display:none}
  .content-grid{display:grid;gap:40px;align-items:start}
  .content-intro .lead{margin-top:24px;max-width:530px;font-size:16px}
  .feature-list{list-style:none;margin:0;padding:0;border-top:1px solid #ccc}
  .feature-list li{padding:25px 0;border-bottom:1px solid #ccc;display:grid;grid-template-columns:26px 1fr;gap:17px}
  .feature-list .icon{width:20px;height:20px;margin-top:2px}
  .feature-list h3{font-size:19px;letter-spacing:-.03em;line-height:1.4}
  .feature-list p{font-size:13px;line-height:1.85;margin-top:9px}
  .callout{padding:30px;border:1px solid #d8d8d8;background:#f4f4f4;margin-top:32px}
  .callout h3{font-size:22px;line-height:1.25}
  .callout p{font-size:13px;line-height:1.85;margin-top:13px}
  .callout .text-link{margin-top:15px}
  .steps-section{background:#111;color:#fff}
  .detailed-steps{list-style:none;padding:0;display:grid;gap:0;margin-top:45px}
  .detailed-steps li{display:grid;grid-template-columns:40px 1fr;gap:21px;padding:30px 0;border-top:1px solid #444}
  .detailed-steps .step-number{font-size:18px;color:#888;letter-spacing:-.03em}
  .detailed-steps h3{font-size:23px;line-height:1.3}
  .detailed-steps p{font-size:14px;line-height:1.9;color:#aaa;margin-top:13px;max-width:540px}
  .claims-role-note{padding-top:25px;border-top:1px solid #444;margin-top:20px;font-size:11px;line-height:1.9;max-width:860px;color:#aaa}
  .claims-role-note a{color:#ddd}
  .related-links{display:grid;gap:12px}
  .related-link{display:flex;justify-content:space-between;align-items:center;gap:25px;text-decoration:none;padding:25px;border:1px solid #ddd;transition:background .2s}
  .related-link:hover{background:#f3f3f3}
  .related-link h3{font-size:21px;line-height:1.3}
  .related-link p{font-size:12px;margin-top:7px;line-height:1.7}
  .related-link .icon{width:20px;height:20px}
  .contact-options{display:grid;gap:16px}
  .contact-option{padding:29px;border:1px solid #ddd}
  .contact-option>.icon{width:29px;height:29px;margin-bottom:25px}
  .contact-option h2{font-size:24px;line-height:1.2;letter-spacing:-.045em}
  .contact-option p{font-size:13px;margin-top:14px;line-height:1.8}
  .contact-option a{font-size:13px;overflow-wrap:anywhere;line-height:1.6;margin-top:22px}
  .contact-page-note{border-top:1px solid #ddd;margin-top:38px;padding-top:25px;max-width:790px;font-size:13px;line-height:1.9}
}
@layer responsive {
  @media(min-width:540px){
    .hero h1{font-size:4rem}
    .utility-links{justify-content:flex-end}
    .utility-local{display:flex;white-space:nowrap}
    .hero-actions .button{font-size:12px}
    .form-grid{grid-template-columns:1fr 1fr}
    .form-field.full{grid-column:1/-1}
    .footer-contact-line{flex-direction:row;gap:24px}
    .related-links{grid-template-columns:repeat(2,minmax(0,1fr))}
    .contact-form{padding:34px}
    .detailed-steps li{grid-template-columns:55px 1fr}
  }
  @media(min-width:760px){
    .container{width:min(1320px,calc(100% - 80px))}
    .section{padding-block:100px}
    .eyebrow{font-size:10px}
    .utility-bar{font-size:10px}
    .utility-links{gap:26px;width:auto}
    .hero{grid-template-columns:1.02fr 1fr;gap:32px;padding-block:53px 50px;align-items:stretch}
    .hero-copy{align-self:center;padding-block:6px 20px}
    .hero h1{font-size:clamp(2.45rem,5.2vw,4.6rem)}
    .hero-visual{aspect-ratio:auto;min-height:600px}
    .hero-intro{font-size:13px}
    .hero-actions .button{font-size:10px;min-height:52px;padding-inline:15px;gap:7px}
    .hero-actions .button .icon{width:14px;height:14px}
    .hero-proof{font-size:9px;gap:8px 13px}
    .hero-caption p{font-size:27px}
    .image-tag{font-size:8px;top:21px;left:21px}
    .hero-scroll{display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:#666;margin-top:35px;min-height:35px;width:max-content}
    .hero-scroll .icon{width:15px;height:15px;stroke-width:1.2}
    .strip-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding-block:33px}
    .strip-item{padding:0 23px;border-bottom:0;border-right:1px solid #444;gap:16px}
    .strip-item:first-child{padding-left:0}
    .strip-item:last-child{border-right:0;padding-right:0}
    .strip-item h2{font-size:12px}
    .strip-item p{font-size:10px}
    .strip-item>.icon{width:25px;height:25px}
    .promise-grid{grid-template-columns:1fr 1.04fr;gap:50px}
    .promise-image{aspect-ratio:.9}
    .promise-caption{padding:22px;font-size:16px}
    .promise-copy h2{font-size:clamp(2rem,4vw,3.5rem)}
    .promise-copy .lead{font-size:14px}
    .section-heading{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:35px;margin-bottom:45px}
    .section-heading h2{max-width:700px}
    .service-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
    .service-card{padding:24px}
    .service-card h3{font-size:22px;line-height:1.2}
    .service-card p{font-size:12px}
    .service-topline{margin-bottom:29px}
    .service-foot{font-size:9px;line-height:1.7;margin-top:auto;padding-top:18px}
    .service-card p{margin-bottom:25px}
    .claims-layout{grid-template-columns:1fr 1fr;gap:60px}
    .claims-list li{grid-template-columns:32px 1fr;gap:12px;padding-block:21px}
    .claims-list li:first-child{padding-top:0;border-top:0}
    .material-grid{grid-template-columns:1fr 1fr}
    .material-card{padding:35px}
    .material-number{font-size:118px}
    .review-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .review-card{padding:24px}
    .review-card blockquote{font-size:12px}
    .review-invite{grid-template-columns:1fr auto;gap:35px;padding:32px}
    .review-invite .button{white-space:nowrap;margin-top:4px}
    .area-layout{grid-template-columns:1fr 1.4fr;gap:35px;align-items:center}
    .area-cities{justify-content:flex-end}
    .faq-layout{grid-template-columns:1fr 1.5fr;gap:60px}
    .faq-intro h2{max-width:350px}
    .footer-contact-grid{grid-template-columns:1fr 1fr;gap:55px}
    .contact-footer{padding-top:95px}
    .contact-form{padding:30px}
    .footer-nav-row{flex-direction:row;justify-content:space-between;align-items:center}
    .footer-nav{justify-content:flex-end;max-width:640px}
    .footer-bottom{padding-block:37px 30px}
    .mobile-call-bar{display:none}
    html{scroll-padding-bottom:0}
    body{padding-bottom:0}
    .main-nav{left:-40px;right:-40px;padding-inline:40px}
    .page-hero{padding-block:35px 66px}
    .page-hero-grid{grid-template-columns:1.25fr 1fr;gap:50px}
    .page-hero.with-art .page-hero-grid{grid-template-columns:1.65fr 1fr}
    .page-hero h1{font-size:clamp(3rem,5.4vw,4.8rem)}
    .page-hero-image{aspect-ratio:.95}
    .page-hero-art{display:block;width:100%;height:270px;padding:30px;color:#333}
    .page-hero-art .service-art{width:100%;height:100%;margin:0;stroke-width:.55}
    .content-grid{grid-template-columns:1fr 1.08fr;gap:70px}
    .detailed-steps{grid-template-columns:1fr 1fr;column-gap:50px}
    .detailed-steps li{grid-template-columns:35px 1fr;gap:22px}
    .detailed-steps h3{font-size:21px}
    .contact-options{grid-template-columns:repeat(3,minmax(0,1fr))}
    .contact-option{padding:25px}
  }
  @media(min-width:1100px){
    .container{width:min(1320px,calc(100% - 112px))}
    .header-inner{min-height:86px;gap:25px}
    .header-controls{display:none}
    .main-nav,.js .main-nav{display:block;position:static;padding:0;overflow:visible;max-height:none;box-shadow:none;background:transparent}
    .nav-list{flex-direction:row;align-items:center;gap:20px}
    .nav-list>li{border:0}
    .nav-link,.nav-disclosure>summary{font-size:10px;min-height:86px;padding:0;gap:5px;white-space:nowrap;position:relative}
    .nav-link[aria-current=page]::after{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);width:3px;height:3px}
    .nav-list>li:last-child .nav-link{border:1px solid #111;min-height:38px;padding:0 16px}
    .nav-list>li:last-child .nav-link[aria-current=page]::after{display:none}
    .nav-list>li:last-child .nav-link:hover{background:#111;color:#fff}
    .nav-disclosure{position:relative}
    .dropdown{position:absolute;top:calc(100% - 5px);left:-18px;background:#fff;border:1px solid #dedede;padding:8px 15px;min-width:215px;box-shadow:0 12px 25px #0000000c}
    .dropdown a{font-size:11px;padding:12px 5px;min-height:42px}
    .hero{gap:54px;min-height:733px;padding-top:52px;padding-bottom:54px}
    .hero h1{font-size:clamp(3.6rem,5.55vw,5.25rem);margin-bottom:30px}
    .hero-intro{font-size:15px;max-width:430px}
    .hero-actions{margin-top:32px;max-width:399px}
    .hero-actions .button{font-size:11px;min-height:54px;padding-inline:18px;gap:13px}
    .hero-actions .button .icon{width:16px;height:16px}
    .hero-proof{font-size:10px;gap:20px;margin-top:24px}
    .hero-visual{min-height:625px}
    .hero-caption{left:32px;right:32px;bottom:32px}
    .hero-caption p{font-size:31px;max-width:270px}
    .image-tag{left:28px;top:28px;font-size:9px}
    .strip-item{padding-inline:42px;gap:23px}
    .strip-item h2{font-size:14px}
    .strip-item p{font-size:11px}
    .strip-item>.icon{width:31px;height:31px}
    .section{padding-block:120px}
    .promise-grid{gap:95px;grid-template-columns:1fr 1.03fr}
    .promise-image{aspect-ratio:1.05}
    .promise-caption{font-size:20px;padding:30px}
    .promise-copy .lead{font-size:16px}
    .service-card{padding:35px;min-height:384px}
    .service-card h3{font-size:27px}
    .service-card p{font-size:13px}
    .service-topline{margin-bottom:38px}
    .service-foot{font-size:10px}
    .claims-layout{gap:115px}
    .claims-list li{grid-template-columns:40px 1fr;gap:20px;padding-block:25px}
    .claims-list h3{font-size:22px}
    .claims-list p{font-size:14px}
    .material-card{padding:40px}
    .material-number{font-size:128px}
    .material-card h3{font-size:25px}
    .review-card{padding:32px;min-height:375px}
    .review-card blockquote{font-size:13px}
    .review-invite{padding:37px 40px}
    .review-invite h3{font-size:27px}
    .review-invite p{font-size:13px}
    .review-invite .button{align-self:center;font-size:12px}
    .area-layout{grid-template-columns:.8fr 1.2fr}
    .area-cities li{font-size:11px;padding:8px 15px}
    .footer-contact-grid{gap:110px;padding-bottom:85px}
    .contact-form{padding:40px}
    .footer-direct a:last-child{font-size:17px}
    .page-hero{padding-block:34px 75px}
    .breadcrumb{margin-bottom:45px}
    .page-hero-grid{gap:80px}
    .page-hero h1{font-size:clamp(3.5rem,5.2vw,5rem)}
    .page-hero-image{aspect-ratio:1.15}
    .page-hero .lead{font-size:17px}
    .contact-option{padding:36px}
    .contact-option a{font-size:14px}
    .detailed-steps{column-gap:90px}
    .detailed-steps li{grid-template-columns:47px 1fr;gap:28px;padding-block:35px}
    .detailed-steps h3{font-size:24px}
    .content-grid{gap:110px}
  }
  @media(min-width:1350px){
    .nav-list{gap:25px}
    .nav-link,.nav-disclosure>summary{font-size:11px}
    .logo-name{font-size:24px}
    .logo-subtitle{font-size:9px}
    .logo-symbol{width:43px;height:43px}
    .hero h1{font-size:5.25rem}
  }
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
  }
  @media print{
    .utility-bar,.main-nav,.header-controls,.mobile-call-bar,.hero-actions,.hero-scroll,.review-invite,.contact-form,.back-top{display:none!important}
    .site-header{position:static}
    .section{padding-block:30px}
    .hero{min-height:0;grid-template-columns:1fr 1fr}
    .hero-visual{min-height:0;aspect-ratio:1}
    .hero h1{font-size:40px}
    .contact-footer,.claims-section,.standard-strip,.steps-section{background:#fff;color:#111}
    .contact-footer p,.claims-section p,.standard-strip p,.steps-section p{color:#444}
    .footer-direct a,.footer-contact-line a{color:#111}
    .footer-contact-grid{display:block}
    .section,.review-card{break-inside:avoid}
    body{padding:0}
  }
}

/* The interface remains monochrome. Photography keeps its natural color. */
@layer base {
  @media print{.process-panel[hidden]{display:grid!important}}
}
@layer components {
  .photo-enlarge{position:absolute;top:16px;right:16px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff99;background:#111c;color:#fff;text-decoration:none;transition:background .2s}
  .photo-enlarge:hover{background:#111}
  .photo-enlarge .icon{width:19px;height:19px}
  .inspection-figure{isolation:isolate;aspect-ratio:1.05}
  .inspection-figure>img{object-position:51% 49%;filter:none}
  .inspection-caption{position:absolute;bottom:0;left:0;right:0;display:flex;flex-direction:column;align-items:flex-start}
  .inspection-promise{background:#111;color:#fff;font-size:20px;line-height:1.3;letter-spacing:-.035em;padding:24px 26px;max-width:86%}
  .photo-credit{font-size:9px;line-height:1.5;color:#555;background:#fff;padding:7px 10px;max-width:100%;letter-spacing:.01em}
  .workmanship-section{border-top:1px solid #e1e1e1}
  .workmanship-section .section-heading p{max-width:530px;font-size:15px}
  .process-panel{display:grid;background:#f3f3f3;border:1px solid #e0e0e0;margin-bottom:24px;min-width:0;scroll-margin-top:108px}
  .process-panel:focus-visible{outline:2px solid #767676;outline-offset:5px}
  .process-photo{aspect-ratio:1.38;background:#111;position:relative;min-width:0;overflow:hidden}
  .process-photo>img{width:100%;height:100%;object-fit:contain;filter:none}
  .process-photo-number{position:absolute;bottom:16px;left:16px;z-index:1;background:#fff;color:#111;padding:8px 12px;font-size:10px;letter-spacing:.14em;line-height:1.5}
  .process-story{padding:29px 25px;align-self:center}
  .process-story h3{font-size:30px;line-height:1.1;letter-spacing:-.045em;margin-top:20px}
  .process-story>p{font-size:13px;line-height:1.85;margin-top:18px}
  .process-checks{list-style:none;padding:0;margin-top:22px;display:grid;gap:10px}
  .process-checks li{display:flex;align-items:flex-start;gap:9px;font-size:11px;line-height:1.65}
  .process-checks .icon{width:16px;height:16px;margin-top:1px;flex:none}
  .process-story .process-photo-note{font-size:10px;color:#666;line-height:1.65;border-top:1px solid #d5d5d5;padding-top:15px;margin-top:24px}
  .process-thumbnails{display:grid;grid-template-columns:repeat(5,minmax(135px,1fr));gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity;scrollbar-color:#999 #eee;scrollbar-width:thin}
  .process-tab{display:block;padding:0;text-decoration:none;position:relative;min-width:0;scroll-snap-align:start;border-bottom:2px solid #ddd;transition:border-color .2s}
  .process-tab:hover{border-bottom-color:#555}
  .process-tab[aria-selected=true]{border-bottom-color:#111}
  .process-tab[aria-selected=true] .process-thumb::after{content:"";position:absolute;inset:0;border:2px solid #111}
  .process-thumb{display:block;position:relative;height:86px;overflow:hidden;background:#ddd}
  .process-thumb>img{width:100%;height:100%;object-fit:cover;filter:none;transition:transform .3s}
  .process-tab:hover .process-thumb>img{transform:scale(1.03)}
  .process-thumb>span{position:absolute;top:7px;left:7px;background:#fff;color:#111;font-size:9px;width:24px;height:23px;display:grid;place-items:center;z-index:1}
  .process-tab[aria-selected=true] .process-thumb>span{background:#111;color:#fff}
  .process-tab-label{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:13px 0;font-size:10px;font-weight:600;line-height:1.4}
  .process-tab-label>.icon{width:12px;height:12px;flex:none}
  .process-instruction{display:flex;flex-direction:column;gap:6px;margin-top:12px;color:#666;font-size:10px;line-height:1.7}
  .process-viewer[data-ready=true] .process-panel{margin-bottom:14px}
  .photo-service-cards .photo-service-card{padding:0;overflow:hidden;min-height:0}
  .service-card-photo{position:relative;aspect-ratio:1.4;overflow:hidden;background:#ddd}
  .service-card-photo img{width:100%;height:100%;object-fit:cover;filter:none;transition:transform .4s}
  .photo-service-card:hover .service-card-photo img{transform:scale(1.035)}
  .service-image-number{position:absolute;left:17px;top:17px;display:grid;place-items:center;width:33px;height:32px;background:#fff;font-size:10px;color:#111}
  .service-card-body{padding:28px;flex:1;display:flex;flex-direction:column}
  .service-card-title{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
  .service-card-title h3{font-size:25px;line-height:1.15}
  .service-card-title>.icon{width:17px;height:17px;margin-top:4px}
  .photo-service-card .service-foot{margin-top:auto;padding-top:18px}
  .photo-service-card p{margin-bottom:25px}
  .shingle-grid{display:grid;gap:19px}
  .shingle-card{background:#f3f3f3;border:1px solid #ddd;min-width:0;overflow:hidden}
  .shingle-standard{background:#111;color:#fff;border-color:#111}
  .shingle-card-header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:21px 24px}
  .shingle-standard .material-pill{border-color:#777}
  .shingle-class{font-size:9px;letter-spacing:.1em;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
  .shingle-class strong{font-size:30px;font-weight:500;letter-spacing:-.045em;line-height:1}
  .shingle-photo{position:relative;aspect-ratio:1.52;background:#333;overflow:hidden}
  .shingle-photo>img{width:100%;height:100%;object-fit:cover;filter:none}
  .shingle-photo::after{position:absolute;inset:55% 0 0;content:"";background:linear-gradient(transparent,#000b);pointer-events:none}
  .shingle-photo figcaption{position:absolute;z-index:1;bottom:20px;left:24px;right:24px;color:#fff;font-size:17px;line-height:1.4;font-weight:500;letter-spacing:-.015em}
  .shingle-photo figcaption span{display:block;font-size:10px;letter-spacing:.025em;line-height:1.5;margin-top:5px;color:#eee;font-weight:400}
  .shingle-card-body{padding:27px 24px 30px}
  .shingle-card-body h3{font-size:24px;line-height:1.15;max-width:410px}
  .shingle-card-body p{font-size:13px;line-height:1.85;margin-top:17px}
  .shingle-standard .shingle-card-body p{color:#bbb}
  .shingle-card-body .shingle-product-detail{padding-top:18px;margin-top:20px;border-top:1px solid #ccc;font-size:11px;line-height:1.75}
  .shingle-standard .shingle-product-detail{border-color:#444}
  .shingle-card-links{display:flex;flex-direction:column;align-items:flex-start;gap:15px;margin-top:21px}
  .shingle-card-links .text-link{font-size:12px}
  .manufacturer-link{font-size:10px;line-height:1.5;color:#666;min-height:30px;display:inline-flex;align-items:center}
  .shingle-standard .manufacturer-link{color:#bbb}
  .shingle-explainer{display:flex;align-items:flex-start;gap:18px;margin-top:24px;padding:25px;background:#f3f3f3;border:1px solid #ddd}
  .shingle-explainer-icon{display:none}
  .shingle-explainer h3{font-size:20px;line-height:1.3}
  .shingle-explainer p{font-size:12px;line-height:1.85;margin-top:10px;max-width:900px}
  .page-hero-image.has-credit{position:relative}
  .page-hero-image.has-credit figcaption{position:absolute;bottom:0;left:0;background:#fff;padding:8px 12px;font-size:9px;line-height:1.6;color:#555}
  .photo-dialog{width:min(1200px,calc(100vw - 28px));max-width:none;max-height:calc(100svh - 28px);padding:0;border:1px solid #555;background:#111;color:#fff;overflow:auto;margin:auto;box-shadow:0 20px 100px #0007}
  .photo-dialog::backdrop{background:#000d}
  .photo-dialog-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 15px 8px 22px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
  .photo-dialog-close{border:1px solid #777;background:transparent;color:#fff;min-height:42px;min-width:42px;display:grid;place-items:center}
  .photo-dialog-close:hover{background:#fff;color:#111}
  .photo-dialog>img{width:100%;height:auto;max-height:calc(100svh - 175px);object-fit:contain;background:#111}
  .photo-dialog>p{padding:16px 22px 22px;color:#ccc;font-size:12px;line-height:1.75}
  body.photo-view-open{overflow:hidden}
}
@layer responsive {
  .photo-service-cards .photo-service-card{padding:0;min-height:0}
  @media(min-width:540px){
    .process-photo{aspect-ratio:1.55}
    .process-story{padding:34px}
    .shingle-card-links{flex-direction:row;align-items:center;justify-content:space-between;gap:20px}
  }
  @media(min-width:760px){
    .process-panel{grid-template-columns:1.4fr 1fr}
    .process-photo{aspect-ratio:auto;min-height:455px}
    .process-story{padding:29px}
    .process-story h3{font-size:30px}
    .process-thumbnails{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;overflow:visible}
    .process-thumb{height:95px}
    .process-tab-label{font-size:10px;min-height:52px}
    .process-instruction{flex-direction:row;justify-content:space-between;gap:25px}
    .service-card-photo{aspect-ratio:1.2}
    .service-card-body{padding:23px}
    .service-card-title h3{font-size:21px}
    .shingle-grid{grid-template-columns:1fr 1fr}
    .shingle-card-header{padding:23px}
    .shingle-card-body{padding:27px 23px}
    .shingle-photo{aspect-ratio:1.42}
    .shingle-photo figcaption{left:23px;font-size:19px}
    .shingle-card-body h3{font-size:24px}
    .shingle-card-links{flex-direction:column;align-items:flex-start;gap:9px}
    .shingle-explainer{padding:28px;gap:24px}
    .shingle-explainer-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border:1px solid #bbb;border-radius:50%}
    .shingle-explainer h3{font-size:23px}
    .inspection-figure{aspect-ratio:.92}
  }
  @media(min-width:1100px){
    .process-panel{grid-template-columns:1.75fr 1fr}
    .process-photo{min-height:490px}
    .process-story{padding:42px}
    .process-story h3{font-size:36px}
    .process-story>p{font-size:14px}
    .process-checks li{font-size:12px}
    .process-thumb{height:120px}
    .process-thumbnails{gap:19px}
    .process-tab-label{font-size:12px;min-height:55px}
    .process-instruction{font-size:11px}
    .service-card-photo{aspect-ratio:1.35}
    .service-card-body{padding:31px}
    .service-card-title h3{font-size:26px}
    .shingle-photo{aspect-ratio:1.65}
    .shingle-card-header{padding:25px 32px}
    .shingle-card-body{padding:31px 32px 35px}
    .shingle-photo figcaption{left:32px;bottom:25px;font-size:23px}
    .shingle-card-body h3{font-size:29px}
    .shingle-card-body p{font-size:14px}
    .shingle-card-links{flex-direction:row;align-items:center;gap:20px}
    .inspection-figure{aspect-ratio:1.05}
    .inspection-promise{font-size:23px;padding:28px 30px}
  }
  @media print{
    .process-thumbnails,.photo-enlarge,.process-instruction,.photo-dialog{display:none!important}
    .process-panel{break-inside:avoid;margin-bottom:20px}
    .process-photo{min-height:0;aspect-ratio:1.5}
    .shingle-grid{grid-template-columns:1fr 1fr}
  }
}

@layer components {
  .business-logo{display:block;flex:none;width:210px;background:transparent;padding:0;border:0}
  .business-logo-art{display:block;width:100%;height:auto;overflow:hidden}
  .hero-caption .hero-photo-source{font-size:8px;letter-spacing:.04em;text-transform:none;margin-top:5px;color:#bbb}
  .footer-bottom .business-logo{width:245px}
  .form-heading-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px}
  .form-heading-row .eyebrow{font-size:9px;letter-spacing:.1em}
  .form-direct-label{font-size:9px;line-height:1.5;border:1px solid #bbb;padding:5px 8px;white-space:nowrap}
  .direct-inquiry-form h3{font-size:30px}
  .direct-inquiry-form .form-intro{margin-top:14px}
  .direct-inquiry-form .form-field textarea{width:100%;background:#fff;color:#111;border:1px solid #bbb;border-radius:0;padding:13px;resize:vertical;min-height:100px;font:inherit;font-size:13px}
  .form-extra{border-top:1px solid #ccc;margin-top:23px;padding-top:16px}
  .form-extra summary{cursor:pointer;font-size:12px;line-height:1.6;min-height:40px;font-weight:600}
  .form-extra summary span{font-weight:400;color:#666}
  .form-extra[open] summary{margin-bottom:15px}
  .form-extra .form-grid{margin-top:0}
  .form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .form-submit:disabled{opacity:.6;cursor:progress}
  .form-field [aria-invalid=true]{border:2px solid #111;background:#f4f4f4}
  .online-request-link{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:11px;font-weight:600;margin-top:16px;text-underline-offset:4px}
  .inquiry-status{border:1px solid #777;background:#fff;color:#111;padding:15px;font-size:12px;line-height:1.7}
  .inquiry-success{padding:34px 0 8px;border-top:1px solid #bbb;margin-top:20px}
  .inquiry-success h4{font-size:26px;line-height:1.2;margin:20px 0 14px;letter-spacing:-.035em}
  .inquiry-success p{font-size:13px;line-height:1.8;margin-bottom:17px;color:#555}
  .inquiry-success .button{margin-top:6px}
  .success-check{display:grid;place-items:center;width:46px;height:46px;background:#111;color:#fff;border-radius:50%;font-size:25px}
  .direct-inquiry-form.is-sent>.form-grid,.direct-inquiry-form.is-sent>.form-extra,.direct-inquiry-form.is-sent>.form-submit,.direct-inquiry-form.is-sent>.form-help,.direct-inquiry-form.is-sent>.form-intro{display:none}
  .owner-inbox-link{font-size:11px;color:inherit;text-decoration:none;border-bottom:1px solid #777;min-height:28px;display:inline-flex;align-items:center}
  .footer-last-links{display:flex;align-items:center;gap:25px;flex-wrap:wrap}
}
@layer responsive {
  .business-logo{width:190px}
  .header-inner{min-height:110px}
  html{scroll-padding-top:165px}
  @media(max-width:1099px){.main-nav{max-height:calc(100svh - 155px)}}
  @media(min-width:540px){.business-logo{width:220px}}
  @media(min-width:1100px){.business-logo{width:180px}.header-inner{min-height:104px}.nav-list{gap:16px}.nav-link,.nav-disclosure>summary{font-size:9px}}
  @media(min-width:1350px){.business-logo{width:215px}.header-inner{min-height:120px}.nav-list{gap:22px}.nav-link,.nav-disclosure>summary{font-size:10px}}
  @media(max-width:539px){.form-heading-row{align-items:flex-start;flex-direction:column;gap:9px}.footer-last-links{gap:16px}.direct-inquiry-form h3{font-size:27px}}
  @media(max-width:359px){.header-inner{gap:12px}.business-logo{width:166px}.header-controls{flex:none;gap:5px}}
  .footer-bottom .business-logo{width:245px;max-width:100%}
  @media print{#optimum-logo-dark feFlood[result="ink"]{flood-color:#111}}
}

/* Wide image frames keep the roof geometry visible on every screen. */
@layer components {
  .hero-roof-view{background:#111;align-self:center}
  .hero-roof-view::after{display:none}
  .hero-photo-frame{position:relative;aspect-ratio:3/2;overflow:hidden}
  .hero-photo-frame>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
  .hero-roof-view .hero-caption{position:static;padding:22px 24px;display:flex;align-items:flex-end;gap:18px}
  .hero-roof-view .hero-caption p{max-width:none;font-size:22px;line-height:1.2}
  .hero-roof-view .hero-caption small{margin-bottom:7px}
  .hero-roof-view .hero-caption .hero-photo-source{font-size:9px;line-height:1.5;text-transform:none;letter-spacing:0;margin:0;color:#c7c7c7;max-width:115px;flex:none}
  .hero-enlarge{top:auto;bottom:15px;right:15px}
  .hero-roof-view .image-tag{top:18px;left:18px;font-size:8px}
  .page-hero-image.roof-overview{aspect-ratio:auto;background:#fff;align-self:center}
  .page-hero-image.roof-overview>img{display:block;width:100%;height:auto;object-fit:contain}
  .page-hero-image.roof-overview.has-credit figcaption{position:static;padding:9px 13px;background:#fff}
  .service-photo-credit{position:absolute;bottom:0;left:0;padding:6px 9px;background:#111d;color:#fff;font-size:8px;line-height:1.5}
  .photo-service-card:hover .service-card-photo img{transform:none}
  .shingle-photo{aspect-ratio:auto;background:#e9e9e9}
  .shingle-photo::after{display:none}
  .shingle-sample{position:relative;aspect-ratio:8/5;background:#333}
  .shingle-sample>img{display:block;width:100%;height:100%;object-fit:contain}
  .shingle-photo figcaption{position:static;color:#111;padding:20px 24px;font-size:20px}
  .shingle-photo figcaption span{color:#555}
  .shingle-standard .shingle-photo{background:#222}
  .shingle-standard .shingle-photo figcaption{color:#fff}
  .shingle-standard .shingle-photo figcaption span{color:#ccc}
  .shingle-card-body .shingle-profile{font-size:10px;line-height:1.6;letter-spacing:.07em;text-transform:uppercase;margin:0 0 15px;color:#555}
  .shingle-standard .shingle-card-body .shingle-profile{color:#ddd}
}
@layer responsive {
  .hero .hero-roof-view{aspect-ratio:auto;min-height:0}
  .photo-service-cards .service-card-photo{aspect-ratio:3/2}
  .shingle-photo{aspect-ratio:auto}
  @media(max-width:759px){.hero-roof-view .image-tag{display:none}}
  @media(max-width:539px){
    .hero-roof-view .hero-caption{align-items:flex-start;flex-direction:column;gap:10px;padding:19px 20px}
    .hero-roof-view .hero-caption p{font-size:21px}
    .hero-roof-view .hero-caption .hero-photo-source{max-width:none;font-size:8px}
    .hero-roof-view .image-tag{left:12px;top:12px;padding:8px;font-size:7px}
    .shingle-photo figcaption{font-size:18px;padding:18px 24px}
  }
  @media(min-width:760px){
    .hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:30px}
    .hero h1{font-size:clamp(2.3rem,4.5vw,4.15rem)}
    .hero-roof-view .hero-caption p{font-size:21px}
    .hero-roof-view .hero-caption{flex-direction:column;align-items:flex-start;gap:12px}
    .hero-roof-view .hero-caption .hero-photo-source{max-width:none}
    .with-roof-overview .page-hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:35px}
    .page-hero-image.roof-overview{aspect-ratio:auto}
    .shingle-photo figcaption{font-size:21px;padding:21px 23px}
  }
  @media(min-width:1100px){
    .hero{grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:40px;min-height:650px;padding-block:48px 54px}
    .hero h1{font-size:clamp(3.25rem,4.5vw,4.45rem)}
    .hero-copy{padding-block:5px}
    .hero-intro{font-size:14px}
    .hero-roof-view .hero-caption{flex-direction:row;align-items:flex-end;gap:24px;padding:23px 26px}
    .hero-roof-view .hero-caption p{font-size:23px;max-width:390px}
    .hero-roof-view .hero-caption .hero-photo-source{max-width:110px;font-size:9px}
    .with-roof-overview .page-hero-grid{gap:50px}
    .shingle-photo figcaption{font-size:23px;padding:23px 32px}
  }
  @media print{
    .hero .hero-roof-view{aspect-ratio:auto;min-height:0}
    .hero h1{font-size:40px}
  }
}

/* Current-card identity: deep red, charcoal, white. A single final theme layer. */
@layer brand {
  :root{--brand:#9c3843;--brand-hover:#7c2934;--brand-soft:#f8eef0;--brand-light:#e8a6af;--ink:#151617;--muted:#616267;--wash:#f6f6f5;--line:#e2e2e0;--radius:16px;--shadow:0 12px 34px #15161709;--ease:cubic-bezier(.2,.7,.2,1)}
  html{scroll-padding-top:125px}
  body{font-family:Arial,Helvetica,sans-serif;background:#fff;color:var(--ink)}
  ::selection{background:var(--brand);color:#fff}
  h1,h2{letter-spacing:-.052em}
  .section{padding-block:64px}
  .eyebrow{font-size:11px;letter-spacing:.15em}
  .eyebrow::before{height:2px;background:var(--brand)}
  a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--brand);outline-offset:4px}
  .button{border-radius:8px;background:var(--brand);border-color:var(--brand);color:#fff;font-size:13px;min-height:54px;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;box-shadow:0 3px 7px #15161708}
  .button:hover{background:var(--brand-hover);border-color:var(--brand-hover);box-shadow:0 7px 16px #9c38431c}
  .button-outline{background:#fff;color:var(--ink);border-color:#cdcecf;box-shadow:none}
  .button-outline:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--brand);box-shadow:none}
  .button-white{background:#fff;border-color:#fff;color:var(--ink)}
  .button-white:hover{background:#f3f3f3;border-color:#f3f3f3}
  .button-ghost{background:transparent;border-color:#ffffff66;color:#fff;box-shadow:none}
  .button-ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
  .text-link{font-size:13px;border-bottom-color:#c3a0a6;gap:15px}
  .text-link:hover{color:var(--brand)}
  .text-link .icon{color:var(--brand)}
  .utility-bar{background:#151617}
  .utility-inner{min-height:36px}
  .site-header{background:#fffffffa;border-bottom-color:#15161712;transition:box-shadow .22s,background .22s;isolation:isolate}
  .site-header.is-scrolled{box-shadow:0 7px 30px #1516170d;background:#fffffff7}
  @supports(backdrop-filter:blur(10px)){.site-header{backdrop-filter:blur(10px)}}
  .header-inner{min-height:98px;gap:18px}
  .business-logo{width:196px;background:transparent;padding:0;border:0}
  .header-call{border-radius:50%;background:var(--brand-soft);border-color:transparent;color:var(--brand);width:44px;height:44px}
  .menu-toggle{width:44px;height:44px;border-radius:50%}
  .menu-toggle:hover{background:#f0f0f0}
  .nav-link[aria-current=page]::after{background:var(--brand)}
  .nav-link:hover,.nav-disclosure>summary:hover,.dropdown a:hover{color:var(--brand)}
  .dropdown{border-radius:12px;border-color:#e4e4e4;box-shadow:0 14px 35px #15161710}
  .dropdown a{border-radius:6px}
  .dropdown a:hover{background:var(--brand-soft);text-decoration:none}
  .hero{gap:30px;padding-block:35px 40px;position:relative}
  .hero-conversion{min-width:0}
  .hero h1{font-size:clamp(2.6rem,10.4vw,4rem);line-height:1.03;margin-bottom:21px}
  .hero .text-soft{color:var(--brand)}
  .hero-intro{font-size:15px;line-height:1.8;max-width:455px}
  .hero-actions{margin-top:24px;gap:10px;max-width:430px}
  .hero-actions .button{font-size:12px;min-height:56px;padding-inline:17px}
  .online-request-link{display:inline-flex;gap:10px;min-height:44px;margin-top:10px;color:var(--brand);font-size:13px;line-height:1.5;text-decoration:none;font-weight:600}
  .online-request-link:hover{text-decoration:underline}
  .hero-proof{font-size:11px;line-height:1.6;gap:8px 19px;margin-top:16px}
  .hero-proof .icon{color:var(--brand)}
  .hero-scroll{font-size:10px;margin-top:20px;min-height:32px;letter-spacing:.07em}
  .hero .hero-roof-view{aspect-ratio:auto;min-height:0;border:1px solid #1516171a;border-radius:var(--radius);box-shadow:0 20px 50px #15161716;background:#17191b}
  .hero-photo-frame{aspect-ratio:3/2}
  .hero-roof-view .hero-caption{padding:22px;gap:13px}
  .hero-roof-view .hero-caption p{font-size:22px;font-weight:500;line-height:1.25}
  .hero-roof-view .hero-caption small{font-size:9px;letter-spacing:.12em;color:#c8c8ca}
  .hero-roof-view .hero-caption .hero-photo-source{font-size:10px;color:#bbb;line-height:1.5;letter-spacing:0;max-width:none}
  .hero-roof-view .image-tag{border-radius:5px;font-size:9px;letter-spacing:.08em;padding:9px 12px;box-shadow:0 4px 12px #1516170c}
  .hero-enlarge{width:auto;padding:0 13px;gap:9px;display:flex;border-radius:6px;min-height:44px;background:#151617df;right:13px;bottom:13px}
  .hero-enlarge span{font-size:11px;line-height:1.5}
  .photo-enlarge{border-radius:7px}
  .standard-strip{background:#17191b;border-top:1px solid #ffffff10;border-bottom:1px solid #ffffff10}
  .strip-item{gap:17px;padding-block:25px}
  .strip-item>.icon{box-sizing:content-box;width:25px;height:25px;padding:11px;border:1px solid #ffffff15;border-radius:11px;background:#ffffff06;color:var(--brand-light);stroke:currentColor}
  .strip-item h2{font-size:14px;font-weight:600}
  .strip-item p{font-size:12px;color:#b9bbbe;line-height:1.7}
  .section-heading{margin-bottom:30px}
  .section-heading p,.workmanship-section .section-heading p{font-size:15px;line-height:1.8}
  .promise-image,.page-hero-image{border-radius:var(--radius);border:1px solid #15161716}
  .inspection-promise{border-radius:0 12px 0 0;padding:22px 24px;background:#17191b}
  .photo-credit,.service-photo-credit{font-size:10px}
  .photo-credit{padding:7px 11px}
  .promise-points li{font-size:14px;padding-block:18px}
  .promise-points .icon{color:var(--brand)}
  .promise-copy .lead{font-size:16px;line-height:1.8}
  .workmanship-section{background:#fff;border-top-color:#e9e9e7}
  .process-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:17px;padding-top:20px;border-top:1px solid var(--line)}
  .process-toolbar>span{font-size:11px;line-height:1.6;color:#62646a}
  .process-toolbar [data-process-current]{color:var(--brand);font-weight:600}
  .process-progress{height:3px;background:#ececeb;border-radius:4px;margin-bottom:16px;overflow:hidden;display:none}
  .process-progress::before{content:"";display:block;width:var(--process-progress,20%);height:100%;background:var(--brand);transition:width .25s var(--ease)}
  .process-viewer[data-ready=true] .process-progress{display:block}
  .process-thumbnails{gap:10px;grid-template-columns:repeat(5,minmax(132px,1fr));padding:3px 1px 15px}
  .process-tab{border:1px solid #ddd;border-radius:10px;padding:5px;background:#fff;transition:border-color .2s,background .2s;overflow:hidden}
  .process-tab:hover{border-color:var(--brand)}
  .process-tab[aria-selected=true]{border-color:var(--brand);background:var(--brand-soft)}
  .process-thumb{border-radius:6px;height:80px}
  .process-thumb>span{border-radius:4px;background:#fff;font-size:10px}
  .process-tab[aria-selected=true] .process-thumb::after{display:none}
  .process-tab[aria-selected=true] .process-thumb>span{background:var(--brand);color:#fff}
  .process-tab:hover .process-thumb>img{transform:none}
  .process-tab-label{font-size:11px;line-height:1.5;padding:11px 5px;min-height:44px}
  .process-tab[aria-selected=true] .process-tab-label{color:var(--brand);font-weight:700}
  .process-panel{border-radius:var(--radius);overflow:hidden;background:var(--wash);border-color:#dededd;scroll-margin-top:120px;margin-top:4px}
  .process-photo{aspect-ratio:3/2;min-height:0;background:#e8e8e6}
  .process-photo>img{object-fit:contain}
  .process-photo-number{border-radius:5px;font-size:11px}
  .process-story{padding:28px}
  .process-story h3{font-size:31px;line-height:1.12}
  .process-story>p{font-size:15px;line-height:1.8}
  .process-checks li{font-size:12px;line-height:1.7}
  .process-checks .icon{color:var(--brand)}
  .process-story .process-photo-note{font-size:11px;line-height:1.7}
  .process-instruction{font-size:11px;line-height:1.7}
  .process-viewer[data-ready=true] .process-panel:not([hidden]){animation:process-enter .25s var(--ease)}
  @keyframes process-enter{from{opacity:.6}to{opacity:1}}
  .service-cards,.review-grid,.contact-options{grid-template-columns:1fr;gap:20px}
  .photo-service-cards .photo-service-card{border-radius:var(--radius);border-color:#ddd;box-shadow:var(--shadow);background:#fff;transition:transform .22s var(--ease),box-shadow .22s,border-color .22s;min-width:0}
  .photo-service-card:hover,.photo-service-card:focus-visible{transform:translateY(-3px);border-color:#b87580;box-shadow:0 18px 38px #15161712}
  .photo-service-cards .service-card-photo{aspect-ratio:3/2}
  .service-card-photo img,.photo-service-card:hover .service-card-photo img{transform:none}
  .service-image-number{border-radius:6px;font-size:11px}
  .service-card-body{padding:27px}
  .service-card-title h3{font-size:25px;line-height:1.2}
  .service-card-title>.icon{box-sizing:content-box;width:15px;height:15px;background:var(--brand-soft);color:var(--brand);padding:9px;border-radius:50%;margin:0}
  .photo-service-card p{font-size:15px;line-height:1.8;max-width:none}
  .photo-service-card .service-foot{font-size:11px;line-height:1.7}
  .service-underlinks{font-size:13px;gap:9px 27px}
  .service-underlinks a{min-height:44px;text-decoration:none;border-bottom:1px solid #c6a7ae}
  .service-underlinks a:hover{color:var(--brand)}
  .claims-section,.steps-section{background:#17191b}
  .claims-section .eyebrow,.steps-section .eyebrow,.contact-footer .eyebrow{color:#f2c7cd}
  .claims-section .eyebrow::before,.steps-section .eyebrow::before,.contact-footer .eyebrow::before{background:var(--brand-light)}
  .claims-list li{grid-template-columns:38px minmax(0,1fr);gap:20px;border-color:#ffffff20}
  .claims-list .step-number,.detailed-steps .step-number{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #e8a6af66;border-radius:50%;color:#f2c7cd;font-size:11px;padding:0;margin-top:3px}
  .claims-list p,.detailed-steps p{color:#bec0c3;font-size:14px}
  .claims-intro>p{color:#bec0c3;font-size:16px}
  .claims-section .button:hover{color:#17191b}
  .shingle-grid{gap:22px}
  .shingle-card{border-radius:var(--radius);box-shadow:var(--shadow);background:#f6f6f5}
  .shingle-standard{background:#17191b;border-color:#17191b}
  .shingle-card-header{padding:22px 24px}
  .material-pill{border-radius:5px;font-size:9px;letter-spacing:.09em;line-height:1.6;padding:7px 10px}
  .shingle-standard .material-pill{background:var(--brand);border-color:var(--brand);color:#fff}
  .shingle-class{font-size:10px;letter-spacing:.07em}
  .shingle-class strong{font-size:34px}
  .shingle-card-body{padding:27px}
  .shingle-card-body h3{font-size:25px;line-height:1.2}
  .shingle-card-body p{font-size:15px;line-height:1.8}
  .shingle-card-body .shingle-profile{font-size:11px;line-height:1.5;letter-spacing:.05em}
  .shingle-card-body .shingle-product-detail{font-size:12px;line-height:1.8}
  .shingle-standard .shingle-card-body p{color:#c4c6c8}
  .shingle-standard .text-link{color:#fff;border-bottom-color:#d39ca5}
  .shingle-standard .text-link .icon{color:var(--brand-light)}
  .shingle-standard .text-link:hover{color:#f2c7cd}
  .shingle-photo figcaption{font-size:21px;padding:21px 24px}
  .shingle-photo figcaption span{font-size:11px}
  .shingle-card-links{align-items:flex-start}
  .manufacturer-link{font-size:11px;min-height:36px}
  .shingle-explainer{border-radius:12px;border-color:#e6d9dc;background:#fbf7f8;padding:27px}
  .shingle-explainer h3{font-size:22px}
  .shingle-explainer p{font-size:13px}
  .shingle-explainer-icon{color:var(--brand);border-color:#d6aeb6}
  .materials-note{font-size:12px;line-height:1.8}
  .review-card{border-radius:var(--radius);padding:28px;min-height:0;box-shadow:var(--shadow)}
  .review-card blockquote{font-size:14px;line-height:1.9}
  .review-author strong{font-size:12px}
  .review-author span{font-size:11px}
  .review-initial{background:var(--brand-soft);color:var(--brand);width:39px;height:39px;font-size:11px}
  .sample-label{border-radius:5px;font-size:11px;max-width:320px}
  .review-invite{border-radius:var(--radius);border-color:#ded3d5;border-left:3px solid var(--brand);padding:28px}
  .review-invite p{font-size:14px}
  .review-invite .button{font-size:12px}
  .area-heading>.icon{color:var(--brand)}
  .area-heading p{font-size:14px}
  .area-cities li{border-radius:6px;font-size:12px;padding:8px 14px;background:#fafafa}
  .faq-list{border-top:0}
  .faq-list details{border:1px solid #dededd;border-radius:10px;padding-inline:20px;margin-bottom:12px;background:#fff;transition:border-color .2s,background .2s}
  .faq-list details[open]{background:#faf7f8;border-color:#d8b9bf}
  .faq-list summary{font-size:15px;line-height:1.6;padding-block:19px;gap:16px}
  .faq-list summary::after{color:var(--brand);font-size:22px}
  .faq-list details p{font-size:14px;line-height:1.85;padding-right:20px}
  .contact-footer{background:#17191b;padding-top:64px;border-top:3px solid var(--brand)}
  .footer-contact-grid{grid-template-columns:1fr;gap:35px;padding-bottom:65px}
  .footer-intro>p{font-size:16px;color:#bec0c3;max-width:420px;line-height:1.85}
  .footer-direct a:first-child{font-size:30px;font-weight:500}
  .footer-direct a:last-child{font-size:15px;overflow-wrap:anywhere}
  .footer-direct .icon{color:var(--brand-light)}
  .footer-location{font-size:12px;color:#bec0c3;line-height:1.7}
  .contact-form{border:1px solid #fff;border-radius:var(--radius);padding:27px;box-shadow:0 24px 60px #0003}
  .contact-form .eyebrow{color:var(--brand)}
  .form-direct-label{background:var(--brand-soft);border-color:#e8cdd2;border-radius:5px;color:var(--brand);font-size:10px}
  .direct-inquiry-form h3{font-size:30px;line-height:1.15}
  .direct-inquiry-form .form-intro{font-size:14px;line-height:1.8;margin-top:13px}
  .form-grid{gap:18px}
  .form-field label{font-size:12px;letter-spacing:0}
  .form-field input,.form-field select,.direct-inquiry-form .form-field textarea{border-radius:7px;border-color:#b9bdc3;background:#fdfdfd;font-size:16px;min-height:48px;line-height:1.5;padding:11px 12px}
  .form-field input::placeholder{font-size:13px}
  .form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:#777d86}
  .form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible{border-color:var(--brand);outline:2px solid var(--brand);outline-offset:2px;background:#fff}
  .form-extra summary{font-size:13px}
  .form-help{font-size:11px;line-height:1.8;margin-top:15px}
  .form-submit{min-height:55px;font-size:13px;margin-top:24px}
  .inquiry-status{border-radius:8px;border-color:var(--brand)}
  .success-check{background:var(--brand)}
  .inquiry-success p{font-size:14px}
  .footer-bottom{border-color:#ffffff25}
  .footer-bottom .business-logo{width:265px;max-width:100%}
  .footer-nav a{font-size:12px;color:#d0d1d4}
  .copyright-row{font-size:11px;line-height:1.8;gap:20px;flex-wrap:wrap}
  .footer-contact-line{font-size:12px}
  .mobile-call-bar{background:#fffffff5;border-radius:14px 14px 0 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top-color:#ddd;box-shadow:0 -9px 28px #1516170c;grid-template-columns:1fr 1.12fr}
  .mobile-call-bar .button{min-height:46px;font-size:11px;border-radius:7px}
  .page-hero{background:#f6f6f5;padding-block:28px 52px}
  .page-hero h1{line-height:1.08}
  .breadcrumb{font-size:11px;margin-bottom:28px}
  .page-hero .lead{font-size:16px;line-height:1.85}
  .page-hero-actions .button{font-size:12px}
  .page-hero-image.roof-overview.has-credit figcaption{font-size:10px;padding:10px 14px}
  .page-hero-art{color:var(--brand);opacity:.8}
  .page-hero-art .service-art{stroke:var(--brand)}
  .feature-list li{font-size:14px;gap:20px}
  .feature-list .icon{color:var(--brand);width:23px;height:23px}
  .feature-list h3{font-size:21px}
  .feature-list p{font-size:15px;line-height:1.8}
  .callout,.related-link,.contact-option{border-radius:var(--radius);border-color:#ddd;background:#fff}
  .callout{background:#faf7f8;border-color:#e2d3d7}
  .related-link{transition:background .2s,border-color .2s,transform .2s}
  .related-link:hover{background:var(--brand-soft);border-color:#c4909a}
  .related-link .icon,.contact-option>.icon{color:var(--brand)}
  .related-link p,.contact-option p{font-size:14px;line-height:1.8}
  .photo-dialog{border-radius:14px;border-color:#ffffff33}
  .photo-dialog-close{border-radius:6px}
  .photo-dialog-header{padding:12px 16px 12px 22px;font-size:11px}
  .photo-dialog>p{font-size:13px}
  .motion-ready{opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease),box-shadow .22s,border-color .22s}
  .motion-ready.is-visible{opacity:1;transform:none}
  .photo-service-card.is-visible:hover{transform:translateY(-3px)}
  @media(max-width:359px){
    .header-inner{gap:10px;min-height:90px}
    .business-logo{width:162px}
    .header-controls{gap:5px}
    .hero h1{font-size:2.6rem}
    .hero-actions .button{font-size:11px;padding-inline:13px}
    .contact-form{padding:22px}
    .shingle-card-header{padding:19px;gap:10px}
    .material-pill{font-size:8px;padding:6px 8px}
    .shingle-class strong{font-size:30px}
  }
  .photography-note{margin-top:16px;border-top:1px solid #ffffff20;color:#bfc1c4;font-size:12px;line-height:1.75}
  .photography-note>summary{width:fit-content;max-width:100%;min-height:44px;padding-block:12px;cursor:pointer;list-style-position:inside}
  .photography-note>summary:hover{color:#fff}
  .photography-note>summary:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:3px}
  .photography-note>p{max-width:780px;margin:0 0 18px;font-size:12px;line-height:1.8;color:#bfc1c4}
  @media(max-width:759px){
    .hero-roof-view .image-tag{display:none}
    .hero-roof-view .hero-caption{flex-direction:column;align-items:flex-start}
    .hero-scroll{display:none}
    .hero-proof{margin-top:11px}
    .hero h1{margin-bottom:18px}
    .hero-intro{font-size:15px}
    .hero-enlarge span{font-size:10px}
    .section-heading{align-items:flex-start}
    .review-invite{grid-template-columns:1fr}
    .process-toolbar{gap:6px}
  }
  @media(min-width:540px){
    .business-logo{width:215px}
    .contact-form{padding:35px}
    .hero-roof-view .hero-caption{flex-direction:row;align-items:flex-end}
    .hero-roof-view .hero-caption .hero-photo-source{max-width:135px}
    .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .form-grid .full{grid-column:1/-1}
  }
  @media(min-width:760px){
    .section{padding-block:84px}
    .header-inner{min-height:104px}
    .hero{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:30px;padding-block:45px}
    .hero{row-gap:0}
    .hero-copy{grid-column:1;grid-row:1;align-self:end;padding:0}
    .hero-conversion{grid-column:1;grid-row:2;align-self:start}
    .hero .hero-roof-view{grid-column:2;grid-row:1/3}
    .hero h1{font-size:clamp(2.45rem,4.4vw,4.7rem);line-height:1.05}
    .hero-intro{font-size:15px}
    .hero-actions .button{font-size:11px;min-height:54px;padding-inline:13px}
    .hero-roof-view .hero-caption{flex-direction:column;align-items:flex-start;padding:24px;gap:11px}
    .hero-roof-view .hero-caption .hero-photo-source{max-width:none}
    .hero-proof{font-size:10px;gap:8px 13px}
    .process-thumbnails{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;overflow:visible}
    .process-tab-label{font-size:11px;min-height:53px}
    .process-thumb{height:90px}
    .process-panel{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center}
    .process-story{padding:26px}
    .process-story h3{font-size:28px}
    .process-story>p{font-size:14px}
    .service-cards,.review-grid,.contact-options{grid-template-columns:repeat(2,minmax(0,1fr))}
    .service-card:last-child,.review-card:last-child,.contact-option:last-child{grid-column:1/-1}
    .service-card:last-child .service-card-photo{aspect-ratio:2/1}
    .service-card:last-child .service-card-photo img{object-fit:contain;background:#e4e4e2}
    .review-grid{gap:20px}
    .review-invite{grid-template-columns:1fr}
    .review-invite .button{white-space:normal;justify-self:start}
    .footer-contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:35px}
    .contact-form{padding:28px}
    .contact-form .form-grid{grid-template-columns:1fr}
    .form-heading-row{align-items:flex-start;flex-direction:column;gap:10px}
    .footer-direct a:last-child{font-size:13px}
    .shingle-card-links{flex-direction:column;align-items:flex-start;gap:8px}
    .shingle-card-body{padding:26px}
    .shingle-card-header{padding:22px}
    .shingle-card-body h3{font-size:24px}
    .shingle-card-body p{font-size:14px}
  }
  @media(min-width:1100px){
    .section{padding-block:94px}
    .hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;min-height:610px;padding-block:48px}
    .hero{row-gap:0}
    .hero h1{font-size:clamp(3.1rem,4.7vw,4.55rem)}
    .hero-actions .button{font-size:12px;padding-inline:18px}
    .hero-intro{font-size:16px}
    .hero-roof-view .hero-caption{flex-direction:row;align-items:flex-end;padding:24px 27px;gap:22px}
    .hero-roof-view .hero-caption p{font-size:25px}
    .hero-roof-view .hero-caption .hero-photo-source{max-width:128px}
    .hero-proof{font-size:11px}
    .strip-item{padding-inline:30px}
    .strip-item:first-child{padding-left:0}
    .strip-item:last-child{padding-right:0}
    .promise-grid{gap:76px}
    .process-panel{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
    .process-thumb{height:108px}
    .process-tab-label{font-size:12px;min-height:48px;padding:12px 8px}
    .process-story{padding:36px}
    .process-story h3{font-size:34px}
    .process-story>p{font-size:15px}
    .service-cards,.review-grid,.contact-options{grid-template-columns:repeat(3,minmax(0,1fr))}
    .service-card:last-child,.review-card:last-child,.contact-option:last-child{grid-column:auto}
    .service-card:last-child .service-card-photo{aspect-ratio:3/2}
    .service-card-body{padding:28px}
    .service-card-title h3{font-size:25px}
    .photo-service-card p{font-size:14px}
    .review-card{padding:30px}
    .review-invite{grid-template-columns:1fr auto;gap:30px;padding:34px}
    .shingle-card-header{padding:25px 31px}
    .shingle-card-body{padding:30px}
    .shingle-card-body h3{font-size:29px}
    .shingle-card-body p{font-size:15px}
    .shingle-card-links{flex-direction:row;align-items:center;gap:18px}
    .footer-contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:70px;padding-bottom:80px}
    .contact-form{padding:35px}
    .contact-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .footer-direct a:last-child{font-size:16px}
    .form-heading-row{flex-direction:row;align-items:center}
    .page-hero{padding-block:32px 65px}
  }
  @media(max-width:1279px){
    .header-controls{display:flex;flex:none;gap:7px}
    .js .menu-toggle{display:flex}
    .main-nav{position:absolute;top:calc(100% + 1px);left:0;right:0;max-height:calc(100svh - 130px);overflow:auto;padding:16px 22px 22px;border:1px solid #e3e3e3;border-radius:0 0 14px 14px;background:#fff;box-shadow:0 16px 30px #15161712}
    .js .main-nav{display:none}
    .js .main-nav.is-open{display:block}
    .nav-list{flex-direction:column;align-items:stretch;gap:0}
    .nav-list>li{border-bottom:1px solid #eee}
    .nav-link,.nav-disclosure>summary{font-size:14px;min-height:49px;padding:12px 2px;white-space:normal}
    .nav-link[aria-current=page]::after{position:static;transform:none;width:5px;height:5px}
    .nav-list>li:last-child{border-bottom:0}
    .nav-list>li:last-child .nav-link{margin-top:10px;padding:12px 16px;border-radius:7px;background:var(--brand);border:1px solid var(--brand);color:#fff;min-height:46px}
    .dropdown{position:static;min-width:0;padding:0 0 10px 15px;border:0;background:#fff;box-shadow:none}
    .dropdown a{font-size:13px;padding:11px 10px;min-height:43px}
    html:not(.js) .main-nav{position:static;width:100%;max-height:none;box-shadow:none;border:0;padding:0}
  }
  @media(min-width:1280px){
    .business-logo{width:205px}
    .header-inner{min-height:106px;gap:25px}
    .header-controls{display:none}
    .main-nav,.js .main-nav{display:block;position:static;padding:0;overflow:visible;max-height:none;background:transparent;box-shadow:none}
    .nav-list{flex-direction:row;align-items:center;gap:17px}
    .nav-list>li{border:0}
    .nav-link,.nav-disclosure>summary{font-size:11px;min-height:80px;white-space:nowrap;padding:0}
    .nav-link[aria-current=page]::after{bottom:14px;width:4px;height:4px}
    .nav-list>li:last-child .nav-link{min-height:42px;border-radius:7px;background:var(--brand);border-color:var(--brand);color:#fff;padding:0 17px}
    .nav-list>li:last-child .nav-link:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
    .dropdown{top:calc(100% - 2px);padding:9px;left:-18px}
    .dropdown a{padding:11px 13px;min-height:43px;font-size:12px}
  }
  @media(min-width:1440px){.nav-list{gap:21px}.business-logo{width:220px}}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
    .motion-ready{opacity:1;transform:none}
    .photo-service-card:hover,.photo-service-card.is-visible:hover{transform:none}
  }
  @media print{
    .motion-ready{opacity:1;transform:none}
    .hero .hero-roof-view,.review-card,.shingle-card,.service-card{box-shadow:none;break-inside:avoid}
    .hero h1{font-size:40px}
    .hero{min-height:0;padding-block:20px}
    .section{padding-block:30px}
    .process-toolbar,.process-progress{display:none}
    .process-panel{animation:none}
    .contact-footer{background:#fff;color:#111;border:0}
    #optimum-logo-dark feFlood[result="ink"]{flood-color:#111}
    #optimum-logo-dark feFlood[result="accent"]{flood-color:var(--brand)}
  }
}

/* Optimum's current identity, with quieter typography and a clearer homeowner journey. */
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
}

@layer elevated {
  :root {
    --brand: #9c3843;
    --brand-hover: #7c2934;
    --brand-soft: #f8eef0;
    --brand-light: #e8a6af;
    --ink: #151617;
    --muted: #626569;
    --wash: #f6f6f4;
    --line: #dedfdb;
    --radius: 8px;
    --ease: cubic-bezier(.22, .68, .2, 1);
  }
  html { scroll-padding-top: 122px; }
  body { font-family: Manrope, Arial, Helvetica, sans-serif; background: #fff; color: var(--ink); }
  h1, h2, h3 { font-family: inherit; font-weight: 600; letter-spacing: -.045em; }
  h2 { font-size: clamp(2rem, 4.15vw, 3.5rem); line-height: 1.13; }
  .container { width: min(1380px, calc(100% - 40px)); }
  .section { padding-block: 74px; }
  .eyebrow { gap: 10px; font-size: 10px; line-height: 1.7; letter-spacing: .12em; font-weight: 600; }
  .eyebrow::before { width: 21px; height: 2px; }
  .eyebrow + h1, .eyebrow + h2 { margin-top: 19px; }
  .section-heading { gap: 22px; margin-bottom: 33px; }
  .section-heading p { font-size: 15px; line-height: 1.85; }
  .lead { font-size: 16px; line-height: 1.85; }
  .button { border-radius: 6px; min-height: 54px; padding: 15px 19px; font-size: 12px; font-weight: 600; letter-spacing: 0; box-shadow: none; }
  .button:hover { box-shadow: none; }
  .button-outline { background: #fff; border-color: #c9cdcd; color: #222629; }
  .button-outline:hover { background: #faf4f5; border-color: var(--brand); color: var(--brand); }
  .text-link { gap: 18px; font-size: 12px; line-height: 1.6; min-height: 44px; }
  .text-link .icon { height: 16px; width: 16px; }
  :is(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

  /* The utility strip and main navigation remain distinct, with a stable header height. */
  .utility-bar { background: #17191b; font-size: 9px; letter-spacing: .015em; }
  .utility-inner { min-height: 35px; }
  .utility-links { gap: 10px; }
  .utility-links a { min-height: 35px; gap: 6px; }
  .utility-links .icon { height: 11px; width: 11px; }
  .utility-local { color: #d0d1d2; font-size: 9px; letter-spacing: .08em; }
  .utility-bar a:focus-visible { outline-color: #fff; outline-offset: 1px; }
  .site-header { background: #fffffff7; border-bottom: 1px solid #dedfdb; }
  .header-inner { min-height: 87px; gap: 15px; }
  .business-logo { width: 177px; flex-shrink: 0; }
  .header-controls { gap: 5px; }
  .header-call { height: 43px; width: 43px; border-radius: 7px; background: #f8f0f1; }
  .menu-toggle { height: 43px; width: 43px; border-radius: 7px; }
  .nav-link, .nav-disclosure > summary { font-weight: 500; }
  .dropdown { border-radius: 7px; }

  /* Full roof composition: the image always keeps its original 3:2 ratio. */
  .showcase-hero { background: #fff; padding-top: 35px; }
  .showcase-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 31px; }
  .showcase-copy { min-width: 0; }
  .showcase-copy > .eyebrow { color: #63666a; }
  .showcase-copy h1 { font-size: clamp(2.15rem, 10.25vw, 4.65rem); line-height: 1.08; letter-spacing: -.055em; margin-top: 20px; text-wrap: initial; }
  .showcase-copy h1 span { color: var(--brand); }
  .showcase-intro { max-width: 470px; margin-top: 22px; font-size: 15px; line-height: 1.85; color: #5f6569; }
  .showcase-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 26px; max-width: 440px; }
  .showcase-actions .button { justify-content: space-between; text-align: left; min-height: 56px; gap: 15px; padding-inline: 16px; font-size: 11px; }
  .showcase-actions .button > span { min-width: 0; }
  .showcase-actions .button-outline { border-color: #d4d4d1; }
  .showcase-online { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 9px; font-size: 11px; line-height: 1.6; color: var(--brand); font-weight: 600; text-decoration: none; }
  .showcase-online:hover { text-decoration: underline; text-underline-offset: 4px; }
  .showcase-online .icon { height: 16px; width: 16px; }
  .showcase-assurance { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 18px; margin-top: 12px; font-size: 10px; line-height: 1.6; color: #6b6f72; }
  .showcase-assurance > span { display: inline-flex; align-items: center; gap: 6px; }
  .showcase-assurance .icon { width: 13px; height: 13px; color: var(--brand); stroke-width: 1.8; }
  .showcase-visual { min-width: 0; margin: 0; background: #17191b; color: #fff; border: 1px solid #17191b; border-radius: 8px; overflow: hidden; box-shadow: 0 14px 35px #1516170c; }
  .showcase-image { position: relative; aspect-ratio: 3 / 2; background: #e3e4e0; overflow: hidden; }
  .showcase-image > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; object-position: center; transform: none; filter: none; }
  .showcase-image .showcase-enlarge { top: auto; bottom: 12px; right: 12px; display: flex; align-items: center; gap: 8px; min-height: 42px; height: auto; width: auto; padding: 9px 12px; border: 1px solid #ffffff73; border-radius: 5px; background: #17191be6; color: #fff; text-decoration: none; }
  .showcase-enlarge > span { font-size: 10px; font-weight: 500; line-height: 1.6; }
  .showcase-enlarge .icon { width: 15px; height: 15px; }
  .showcase-caption { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 21px 20px; }
  .showcase-caption-label { display: block; margin-bottom: 9px; font-size: 8px; line-height: 1.6; letter-spacing: .13em; text-transform: uppercase; color: #bfc2c5; }
  .showcase-caption p { color: #fff; font-size: clamp(1.1rem, 4.9vw, 1.65rem); line-height: 1.35; letter-spacing: -.025em; font-weight: 500; }
  .baseline-stamp { display: flex; flex-direction: column; align-items: flex-start; flex: none; padding-left: 20px; border-left: 1px solid #ffffff29; text-decoration: none; color: #fff; }
  .baseline-stamp > span { display: flex; align-items: center; gap: 6px; font-size: 7px; line-height: 1.6; letter-spacing: .1em; }
  .baseline-stamp > span:first-child { color: #c5c7c8; }
  .baseline-stamp strong { font-size: 42px; line-height: 1; font-weight: 500; letter-spacing: -.07em; margin: 3px 0 7px; }
  .baseline-stamp .icon { width: 12px; height: 12px; color: var(--brand-light); }
  .baseline-stamp:hover { color: #f2c7cd; }
  .showcase-visual :focus-visible { outline-color: #fff; }
  .hero-bottom-line { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 25px; font-size: 8px; line-height: 1.6; text-transform: uppercase; letter-spacing: .1em; color: #707579; }
  .hero-bottom-line > span { display: flex; flex-wrap: wrap; gap: 8px; }
  .hero-bottom-line > span > span { color: #b4b8ba; }
  .hero-bottom-line > a { display: none; align-items: center; gap: 17px; min-height: 32px; text-decoration: none; font-size: 9px; text-transform: none; letter-spacing: .015em; color: #42464a; }
  .hero-bottom-line .icon { width: 14px; height: 14px; color: var(--brand); }

  .standards-rail { background: #f5f5f2; border-block: 1px solid #e1e3de; }
  .rail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail-item { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 20px 11px; min-width: 0; }
  .rail-item:first-child { padding-left: 0; }
  .rail-item:last-child { padding-right: 0; }
  .rail-item + .rail-item { border-left: 1px solid #dedfda; }
  .rail-item > .icon { width: 20px; height: 20px; color: var(--brand); }
  .rail-item h2 { font-size: 10px; line-height: 1.65; letter-spacing: -.01em; font-weight: 600; text-wrap: initial; }
  .rail-item p { display: none; font-size: 11px; line-height: 1.7; margin-top: 5px; color: #6f7375; }

  /* Choose a next step without needing to understand roofing first. */
  .start-section { background: #fff; padding-bottom: 66px; }
  .start-heading > p { max-width: 365px; margin: 0; }
  .intent-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .intent-card { display: flex; flex-direction: column; min-width: 0; padding: 25px 24px 0; border: 1px solid #dedfdb; border-radius: 7px; background: #fff; text-decoration: none; transition: border-color .2s, background .2s; }
  .intent-card:hover { background: #fcf9f9; border-color: #c99fa6; }
  .intent-card-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
  .intent-card-top > .icon { color: var(--brand); width: 23px; height: 23px; }
  .intent-card-top > span { font-size: 11px; color: #999d9f; font-variant-numeric: tabular-nums; }
  .intent-card h3 { font-size: 25px; letter-spacing: -.04em; line-height: 1.25; }
  .intent-card p { font-size: 13px; line-height: 1.8; color: #656a6e; margin: 13px 0 26px; max-width: 330px; }
  .intent-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 59px; margin-top: auto; border-top: 1px solid #e6e5e2; font-size: 11px; font-weight: 600; line-height: 1.6; }
  .intent-action .icon { width: 16px; height: 16px; color: var(--brand); }

  .promise-section { background: #f6f6f4; border-block: 1px solid #e6e6e2; }
  .promise-grid { align-items: center; gap: 37px; }
  .promise-image.inspection-figure { aspect-ratio: auto; min-height: 0; background: #17191b; border: 1px solid #dedfdb; border-radius: 8px; }
  .inspection-figure > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; object-position: center; }
  .inspection-figure .inspection-caption { position: static; background: #17191b; padding: 22px 24px 20px; }
  .inspection-caption .inspection-promise { display: block; padding: 0; border-radius: 0; background: transparent; color: #fff; font-size: 24px; line-height: 1.35; letter-spacing: -.025em; }
  .inspection-caption .photo-credit { position: static; display: block; background: transparent; color: #b9bdc0; padding: 0; margin-top: 14px; font-size: 9px; line-height: 1.7; }
  .inspection-figure > .photo-enlarge { top: 13px; right: 13px; bottom: auto; border-radius: 5px; width: 42px; height: 42px; }
  .promise-copy h2 span { color: var(--brand); }
  .promise-copy .lead { font-size: 15px; line-height: 1.85; max-width: 550px; margin-top: 23px; }
  .promise-detail-list { list-style: none; padding: 0; margin-top: 28px; border-top: 1px solid #d9dcd6; }
  .promise-detail-list li { display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 13px; padding-block: 17px; border-bottom: 1px solid #d9dcd6; }
  .promise-detail-list li > .icon { width: 16px; height: 16px; color: var(--brand); margin-top: 2px; }
  .promise-detail-list h3 { font-size: 13px; line-height: 1.7; font-weight: 600; letter-spacing: -.015em; }
  .promise-detail-list p { font-size: 12px; line-height: 1.75; color: #6c7175; margin-top: 4px; }
  .promise-copy > .text-link { margin-top: 24px; }

  .services-section { background: #fff; }
  .service-underlinks { margin-top: 26px; gap: 10px 28px; font-size: 12px; }
  .service-underlinks a { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; }
  .service-underlinks .icon { width: 14px; height: 14px; color: var(--brand); }
  .elevated-claims { background: #17191b; }
  .elevated-claims .claims-layout { gap: 43px; }
  .elevated-claims h2 { font-size: clamp(2.15rem, 4.1vw, 3.65rem); }
  .elevated-claims h2 span { color: var(--brand-light); }
  .elevated-claims .claims-intro > p { font-size: 15px; line-height: 1.85; color: #c0c4c6; max-width: 430px; margin-top: 24px; }
  .elevated-claims .claims-intro > .button { margin-top: 27px; min-width: 195px; justify-content: space-between; }
  .elevated-claims .claims-intro > .claims-small-note { margin-top: 20px; font-size: 10px; line-height: 1.85; color: #a6adb2; max-width: 400px; }
  .elevated-claims .claims-list { margin: 0; }
  .elevated-claims .claims-list li { grid-template-columns: 36px minmax(0, 1fr); gap: 20px; padding-block: 25px; border-color: #ffffff26; }
  .elevated-claims .claims-list li:last-child { border-bottom: 1px solid #ffffff26; }
  .elevated-claims .claims-list .step-number { border: 0; border-radius: 0; background: transparent; width: auto; height: auto; justify-content: flex-start; align-items: flex-start; padding-top: 4px; margin: 0; color: var(--brand-light); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .elevated-claims .claims-list h3 { font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: -.025em; }
  .elevated-claims .claims-list p { font-size: 13px; line-height: 1.85; color: #b9bec2; margin-top: 9px; }
  :is(.elevated-claims, .contact-footer, .steps-section) :focus-visible { outline-color: #f2c7cd; }

  .reviews-section { background: #f6f6f4; border-bottom: 1px solid #e5e6e1; }
  .sample-label { display: block; padding: 0; border: 0; border-radius: 0; max-width: 235px; font-size: 10px; line-height: 1.8; color: #6b7073; background: transparent; }
  .review-grid { gap: 19px; }
  .review-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e0e1dc; border-radius: 7px; padding: 28px 25px; box-shadow: none; min-height: 0; }
  .review-quote-mark { display: block; height: 40px; margin-bottom: 17px; color: var(--brand); font-family: Georgia, serif; font-size: 70px; font-weight: 400; line-height: 1; }
  .review-card blockquote { font-size: 13px; line-height: 1.95; font-weight: 400; color: #4b5155; }
  .review-author { margin-top: auto; padding-top: 28px; gap: 12px; }
  .review-initial { height: 36px; width: 36px; border-radius: 50%; background: #f5edef; color: #873a45; font-size: 10px; font-weight: 600; }
  .review-author strong { font-size: 11px; line-height: 1.7; font-weight: 600; }
  .review-author span { font-size: 10px; line-height: 1.7; color: #7c8184; }
  .review-invite { background: #fff; border: 1px solid #d9dcda; border-left: 3px solid var(--brand); border-radius: 7px; padding: 28px 25px; gap: 25px; margin-top: 24px; }
  .review-invite h3 { font-size: 23px; line-height: 1.3; letter-spacing: -.035em; }
  .review-invite p { font-size: 12px; line-height: 1.9; color: #6b7073; margin-top: 12px; max-width: 740px; }
  .review-invite .button { justify-content: space-between; font-size: 11px; gap: 9px; text-align: left; width: 100%; }
  .review-invite .review-feedback { font-size: 11px; max-width: 320px; }

  .faq-layout { gap: 32px; }
  .faq-intro p { font-size: 14px; line-height: 1.85; max-width: 300px; }
  .faq-intro .text-link { margin-top: 18px; }
  .faq-list { border-top: 1px solid #d7dad6; }
  .faq-list details { background: #fff; border: 0; border-bottom: 1px solid #d7dad6; border-radius: 0; margin: 0; padding-inline: 0; }
  .faq-list details[open] { background: #fff; border-color: #d7dad6; }
  .faq-list summary { min-height: 75px; align-items: center; padding-block: 21px; font-size: 14px; line-height: 1.75; font-weight: 500; gap: 25px; }
  .faq-list summary::after { font-size: 22px; font-weight: 400; }
  .faq-list details[open] summary { color: var(--brand); }
  .faq-list details p { font-size: 13px; line-height: 1.9; padding: 0 24px 24px 0; margin-top: 0; max-width: 680px; }
  .area-section { background: #f5f5f2; border-top: 1px solid #e1e3dd; padding-block: 42px; }
  .area-layout { gap: 28px; align-items: center; }
  .area-heading { align-items: flex-start; gap: 13px; }
  .area-heading > .icon { width: 21px; height: 21px; margin-top: 5px; }
  .area-heading h2 { font-size: 25px; line-height: 1.3; letter-spacing: -.035em; }
  .area-heading p { font-size: 12px; line-height: 1.8; margin-top: 8px; max-width: 320px; }
  .area-cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .area-cities li { background: transparent; border: 0; border-bottom: 1px solid #dcdfd9; border-radius: 0; padding: 9px 0; font-size: 12px; line-height: 1.7; color: #4f565a; }

  /* Every page ends with the same direct, short request form. */
  .contact-footer { background: #111315; border-top: 3px solid var(--brand); padding-top: 66px; }
  .footer-contact-grid { gap: 38px; padding-bottom: 62px; align-items: start; }
  .footer-intro h2 { font-size: clamp(2.65rem, 6.25vw, 4.15rem); line-height: 1.09; letter-spacing: -.05em; }
  .footer-intro h2 span { color: var(--brand-light); }
  .footer-intro > p { font-size: 14px; line-height: 1.9; color: #b7bec2; margin-top: 25px; max-width: 425px; }
  .footer-next-steps { list-style: none; display: grid; gap: 13px; padding: 0; margin-top: 28px; }
  .footer-next-steps li { display: grid; grid-template-columns: 23px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .footer-next-steps li > span { font-size: 9px; line-height: 1.7; color: var(--brand-light); font-variant-numeric: tabular-nums; }
  .footer-next-steps p { font-size: 12px; line-height: 1.85; color: #cad0d3; }
  .footer-direct { gap: 13px; margin-top: 34px; }
  .footer-direct a { align-items: center; gap: 14px; text-decoration: none; width: fit-content; max-width: 100%; }
  .footer-direct a:first-child { font-size: 28px; line-height: 1.3; letter-spacing: -.035em; font-weight: 500; }
  .footer-direct a:last-child { font-size: 12px; line-height: 1.8; letter-spacing: 0; overflow-wrap: anywhere; }
  .footer-direct .icon { width: 18px; height: 18px; }
  .footer-direct a:hover { color: #f2c7cd; }
  .footer-location { font-size: 10px; line-height: 1.85; gap: 11px; margin-top: 24px; color: #959fa5; }
  .footer-location .icon { height: 15px; width: 15px; }
  .footer-bottom { border-top: 1px solid #ffffff20; padding-top: 28px; }
  .footer-nav-row { gap: 26px; }
  .footer-bottom .business-logo { width: 225px; }
  .footer-nav { gap: 9px 22px; }
  .footer-nav a { min-height: 36px; display: inline-flex; align-items: center; font-size: 11px; line-height: 1.7; color: #c2c9cd; text-decoration: none; }
  .footer-nav a:hover { color: #fff; }
  .footer-contact-line { font-size: 11px; gap: 11px 26px; line-height: 1.8; padding-block: 20px; }
  .footer-contact-line a { color: #c2c9cd; overflow-wrap: anywhere; }
  .photography-note { border-color: #ffffff1a; font-size: 10px; margin-top: 0; }
  .photography-note > summary { min-height: 42px; font-size: 10px; color: #aeb7bd; }
  .photography-note > p { font-size: 10px; line-height: 1.9; color: #aeb7bd; }
  .copyright-row { font-size: 10px; line-height: 1.85; color: #8f999f; padding-top: 18px; }
  .copyright-row p { color: #8f999f; }
  .footer-last-links { gap: 23px; }
  .footer-last-links a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: #b7c0c5; text-decoration: none; font-size: 10px; }
  .footer-last-links .icon { width: 14px; height: 14px; }
  .mobile-call-bar { border-radius: 0; background: #fffffff5; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -7px 25px #1516170a; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .mobile-call-bar .button { min-height: 47px; padding: 11px 8px; border-radius: 6px; font-size: 10px; }

  /* Shared interior pages keep the same typographic and spacing system. */
  .page-hero { background: #f6f6f4; padding-block: 26px 55px; border-bottom: 1px solid #e2e3dd; }
  .breadcrumb { font-size: 10px; line-height: 1.7; margin-bottom: 27px; }
  .page-hero-grid { gap: 34px; }
  .page-hero h1 { font-size: clamp(2.55rem, 6.7vw, 4.65rem); line-height: 1.1; letter-spacing: -.05em; }
  .page-hero .lead { margin-top: 24px; font-size: 15px; line-height: 1.85; max-width: 600px; }
  .page-hero-actions { gap: 11px; margin-top: 28px; }
  .page-hero-actions .button { font-size: 11px; }
  .page-hero-image { border-radius: 8px; border: 1px solid #d9dcd7; }
  .page-hero-image.roof-overview { aspect-ratio: auto; background: #e9eae6; }
  .page-hero-image.roof-overview img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
  .page-hero-art { color: var(--brand); opacity: .72; }
  .feature-list { border-color: #d7dad4; }
  .feature-list li { gap: 18px; padding-block: 24px; border-color: #d7dad4; }
  .feature-list .icon { height: 21px; width: 21px; }
  .feature-list h3 { font-size: 20px; line-height: 1.4; letter-spacing: -.025em; }
  .feature-list p { font-size: 14px; line-height: 1.85; margin-top: 10px; }
  .callout { background: #faf7f7; border-color: #e2d8da; border-radius: 7px; padding: 27px; }
  .callout h3 { font-size: 23px; line-height: 1.35; }
  .callout p { font-size: 13px; line-height: 1.9; }
  .related-link { border-radius: 7px; border-color: #dfe1db; }
  .related-link h3 { font-size: 23px; line-height: 1.3; }
  .related-link p, .contact-option p { font-size: 13px; line-height: 1.85; }
  .contact-option { border-radius: 7px; border-color: #dfe1db; }
  .contact-option h2 { font-size: 26px; line-height: 1.3; }
  .contact-option .text-link { font-size: 11px; overflow-wrap: anywhere; }
  .detailed-steps h3 { font-size: 25px; line-height: 1.3; letter-spacing: -.03em; }
  .detailed-steps p { font-size: 14px; line-height: 1.85; }

  @media (max-width: 359px) {
    .utility-links { gap: 6px; }
    .utility-links a { font-size: 8px; }
    .utility-links .icon { display: none; }
    .business-logo { width: 155px; }
    .header-inner { gap: 9px; }
    .header-controls { gap: 1px; }
    .showcase-actions .button { font-size: 10px; padding-inline: 13px; }
    .showcase-online { font-size: 10px; }
    .showcase-caption { gap: 12px; padding-inline: 17px; }
    .baseline-stamp { padding-left: 14px; }
    .rail-item { padding-inline: 8px; }
    .rail-item h2 { font-size: 9px; }
  }
  @media (min-width: 540px) {
    .business-logo { width: 195px; }
    .utility-bar { font-size: 10px; }
    .showcase-hero { padding-top: 43px; }
    .showcase-copy { max-width: 700px; }
    .showcase-intro { max-width: 510px; font-size: 16px; }
    .showcase-actions { max-width: 470px; }
    .showcase-actions .button { font-size: 12px; }
    .showcase-online { font-size: 12px; }
    .showcase-assurance { font-size: 11px; margin-top: 14px; }
    .showcase-caption { padding: 25px 28px; }
    .showcase-caption-label { font-size: 9px; }
    .showcase-caption p { font-size: 27px; }
    .baseline-stamp { padding-left: 26px; }
    .baseline-stamp > span { font-size: 8px; }
    .baseline-stamp strong { font-size: 49px; }
    .hero-bottom-line { font-size: 9px; padding-block: 24px; }
    .hero-bottom-line > a { display: inline-flex; }
    .rail-item { padding: 23px 20px; }
    .rail-item h2 { font-size: 12px; }
    .rail-item p { display: block; }
    .intent-card { padding: 27px 26px 0; }
    .area-cities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .footer-direct a:first-child { font-size: 32px; }
    .footer-direct a:last-child { font-size: 14px; }
  }
  @media (min-width: 760px) {
    .container { width: min(1380px, calc(100% - 64px)); }
    .section { padding-block: 88px; }
    .section-heading { margin-bottom: 40px; gap: 40px; }
    .header-inner { min-height: 93px; }
    .showcase-grid { gap: 39px; }
    .showcase-copy h1 { font-size: 68px; }
    .showcase-actions { max-width: 650px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .showcase-actions .button { font-size: 11px; }
    .showcase-visual { max-width: 920px; }
    .showcase-caption { padding: 28px 32px; }
    .showcase-caption p { font-size: 29px; }
    .hero-bottom-line { padding-block: 27px; }
    .hero-bottom-line > a { font-size: 10px; }
    .rail-item { flex-direction: row; align-items: center; gap: 15px; padding-block: 25px; }
    .rail-item > .icon { width: 24px; height: 24px; }
    .rail-item h2 { font-size: 11px; }
    .rail-item p { font-size: 10px; }
    .start-section { padding-bottom: 84px; }
    .start-heading { align-items: flex-end; }
    .start-heading > p { font-size: 14px; max-width: 300px; }
    .intent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .intent-card { padding: 25px 20px 0; }
    .intent-card-top { margin-bottom: 28px; }
    .intent-card h3 { font-size: 22px; }
    .intent-card p { font-size: 12px; line-height: 1.85; }
    .intent-action { min-height: 65px; font-size: 10px; gap: 9px; }
    .promise-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; }
    .promise-copy h2 { font-size: 35px; }
    .promise-copy .lead { font-size: 14px; }
    .inspection-caption .inspection-promise { font-size: 23px; }
    .promise-detail-list h3 { font-size: 12px; }
    .promise-detail-list p { font-size: 11px; }
    .elevated-claims .claims-layout { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 50px; }
    .elevated-claims .claims-list li { gap: 16px; padding-block: 27px; }
    .elevated-claims .claims-list h3 { font-size: 19px; }
    .elevated-claims .claims-list p { font-size: 12px; }
    .review-card { padding: 28px 26px; }
    .review-invite { padding: 31px; }
    .review-invite .button { width: auto; }
    .faq-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 50px; }
    .faq-list summary { font-size: 14px; min-height: 81px; }
    .faq-list details p { font-size: 13px; }
    .area-section { padding-block: 49px; }
    .area-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; }
    .area-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
    .contact-footer { padding-top: 84px; }
    .footer-contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 42px; padding-bottom: 75px; }
    .footer-intro h2 { font-size: 46px; }
    .footer-intro > p { font-size: 13px; }
    .footer-next-steps p { font-size: 11px; }
    .footer-direct a:first-child { font-size: 30px; }
    .footer-direct a:last-child { font-size: 12px; }
    .footer-contact-line { padding-block: 22px; }
    .page-hero { padding-block: 30px 62px; }
    .page-hero-grid { gap: 40px; }
    .page-hero .lead { font-size: 15px; }
  }
  @media (min-width: 900px) {
    .showcase-hero { padding-top: 46px; }
    .showcase-grid { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: 35px; }
    .showcase-copy h1 { font-size: clamp(2.65rem, 4.2vw, 4rem); }
    .showcase-intro { font-size: 14px; margin-top: 22px; max-width: 410px; }
    .showcase-actions { grid-template-columns: minmax(0, 1fr); max-width: 430px; margin-top: 25px; }
    .showcase-actions .button { min-height: 53px; padding-inline: 16px; font-size: 10px; }
    .showcase-online { font-size: 10px; gap: 8px; }
    .showcase-assurance { font-size: 10px; gap: 7px 13px; }
    .showcase-caption { padding: 24px; gap: 17px; }
    .showcase-caption p { font-size: 21px; }
    .baseline-stamp { padding-left: 22px; }
    .baseline-stamp strong { font-size: 44px; }
    .baseline-stamp > span { font-size: 7px; }
    .hero-bottom-line { padding-block: 29px; margin-top: 18px; }
  }
  @media (min-width: 1100px) {
    .container { width: min(1380px, calc(100% - 80px)); }
    .section { padding-block: 104px; }
    .section-heading { margin-bottom: 43px; }
    .section-heading p { font-size: 16px; }
    .eyebrow { font-size: 10px; letter-spacing: .14em; }
    .showcase-hero { padding-top: 53px; }
    .showcase-grid { grid-template-columns: minmax(0, .94fr) minmax(0, 1.16fr); gap: 49px; }
    .showcase-copy h1 { font-size: clamp(3rem, 4.2vw, 4rem); }
    .showcase-intro { font-size: 15px; max-width: 445px; margin-top: 25px; }
    .showcase-actions { margin-top: 30px; }
    .showcase-actions .button { min-height: 55px; font-size: 12px; padding-inline: 18px; }
    .showcase-online { font-size: 11px; gap: 12px; }
    .showcase-assurance { font-size: 10px; margin-top: 15px; gap: 9px 20px; }
    .showcase-caption { padding: 26px 29px; }
    .showcase-caption p { font-size: 26px; }
    .baseline-stamp strong { font-size: 49px; }
    .baseline-stamp > span { font-size: 8px; }
    .hero-bottom-line { padding-block: 31px; margin-top: 22px; font-size: 9px; }
    .rail-item { padding-block: 29px; padding-inline: 33px; gap: 19px; }
    .rail-item > .icon { width: 26px; height: 26px; }
    .rail-item h2 { font-size: 13px; }
    .rail-item p { font-size: 11px; }
    .start-heading > p { max-width: 350px; font-size: 15px; }
    .intent-grid { gap: 22px; }
    .intent-card { padding: 30px 30px 0; }
    .intent-card-top { margin-bottom: 35px; }
    .intent-card h3 { font-size: 29px; }
    .intent-card p { font-size: 13px; margin-bottom: 30px; }
    .intent-action { font-size: 11px; min-height: 65px; }
    .promise-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
    .promise-copy h2 { font-size: clamp(2.8rem, 3.6vw, 3.3rem); }
    .promise-copy .lead { font-size: 15px; margin-top: 26px; }
    .promise-detail-list { margin-top: 29px; }
    .promise-detail-list li { padding-block: 18px; }
    .promise-detail-list h3 { font-size: 14px; }
    .promise-detail-list p { font-size: 12px; }
    .inspection-figure .inspection-caption { padding: 28px 31px 25px; }
    .inspection-caption .inspection-promise { font-size: 31px; }
    .inspection-caption .photo-credit { font-size: 10px; margin-top: 15px; }
    .elevated-claims .claims-layout { gap: 100px; }
    .elevated-claims .claims-intro > p { font-size: 16px; }
    .elevated-claims .claims-list li { padding-block: 29px; gap: 24px; }
    .elevated-claims .claims-list h3 { font-size: 24px; }
    .elevated-claims .claims-list p { font-size: 14px; }
    .elevated-claims .claims-list .step-number { padding-top: 6px; }
    .review-grid { gap: 23px; }
    .review-card { padding: 32px 29px; }
    .review-card blockquote { font-size: 13px; line-height: 2; }
    .review-invite { grid-template-columns: minmax(0, 1fr) auto; padding: 35px 32px; gap: 44px; margin-top: 29px; }
    .review-invite p { font-size: 13px; }
    .review-invite h3 { font-size: 26px; }
    .review-invite .button { min-width: 265px; font-size: 11px; }
    .faq-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 100px; }
    .faq-list summary { font-size: 16px; min-height: 87px; }
    .faq-list details p { font-size: 14px; }
    .area-section { padding-block: 54px; }
    .area-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 70px; }
    .area-heading h2 { font-size: 30px; }
    .area-heading p { font-size: 13px; }
    .area-cities { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 25px; }
    .area-cities li { font-size: 12px; padding-block: 10px; }
    .contact-footer { padding-top: 100px; }
    .footer-contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 95px; padding-bottom: 87px; }
    .footer-intro h2 { font-size: 62px; }
    .footer-intro > p { font-size: 15px; }
    .footer-next-steps { margin-top: 31px; gap: 14px; }
    .footer-next-steps p { font-size: 12px; }
    .footer-direct { margin-top: 39px; }
    .footer-direct a:first-child { font-size: 36px; }
    .footer-direct a:last-child { font-size: 14px; }
    .footer-location { font-size: 11px; }
    .footer-bottom .business-logo { width: 245px; }
    .footer-nav a { font-size: 12px; }
    .footer-contact-line { font-size: 12px; }
    .page-hero { padding-block: 32px 70px; }
    .page-hero-grid { gap: 65px; }
    .page-hero .lead { font-size: 16px; }
    .page-hero-actions .button { font-size: 12px; }
    .content-grid { gap: 85px; }
  }
  @media (min-width: 1280px) {
    .header-inner { min-height: 95px; gap: 24px; }
    .business-logo { width: 190px; }
    .nav-list { gap: 18px; }
    .nav-link, .nav-disclosure > summary { font-size: 11px; letter-spacing: -.01em; }
    .nav-list > li:last-child .nav-link { border-radius: 6px; padding-inline: 17px; }
    .dropdown a { font-size: 12px; }
  }
  @media (min-width: 1460px) {
    .business-logo { width: 205px; }
    .nav-list { gap: 22px; }
    .nav-link, .nav-disclosure > summary { font-size: 12px; }
    .showcase-grid { gap: 58px; }
    .showcase-copy h1 { font-size: 64px; }
    .showcase-intro { font-size: 16px; }
    .showcase-caption { padding: 29px 34px; }
    .showcase-caption p { font-size: 29px; }
    .baseline-stamp { padding-left: 32px; }
    .baseline-stamp strong { font-size: 54px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .intent-card, .showcase-enlarge, .baseline-stamp { transition: none; }
  }
  @media print {
    .showcase-hero, .standards-rail, .promise-section, .reviews-section, .area-section, .contact-footer, .elevated-claims { background: #fff; color: #111; }
    .showcase-actions, .showcase-online, .showcase-enlarge, .hero-bottom-line > a, .footer-next-steps, .page-progress { display: none !important; }
    .showcase-grid { grid-template-columns: 1fr 1fr; gap: 25px; }
    .showcase-copy h1 { font-size: 36px; }
    .showcase-visual { box-shadow: none; break-inside: avoid; }
    .showcase-caption { background: #fff; }
    .showcase-caption p, .showcase-caption-label, .baseline-stamp, .elevated-claims p, .contact-footer p { color: #222; }
    .section { padding-block: 35px; }
    .intent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .intent-card, .review-card { break-inside: avoid; }
    .promise-grid { grid-template-columns: 1fr 1fr; }
  }
}

/* Workmanship, material samples and service photography. */
@layer elevated {
  .workmanship-section{background:#17191b;color:#fff;border-top:0;overflow:clip}
  .workmanship-section .section-heading{margin-bottom:34px;gap:24px}
  .workmanship-section .section-heading p{color:#c0c3c5;font-size:16px;line-height:1.8;max-width:540px}
  .workmanship-section .eyebrow{color:#e8a6af}
  .workmanship-section .eyebrow::before{background:#e8a6af}
  .workmanship-section .text-link{color:#fff;border-bottom-color:#92535d}
  .workmanship-section .text-link .icon{color:#e8a6af}
  .workmanship-section .text-link:hover{color:#f2c7cd}
  .workmanship-section :focus-visible,.photo-dialog :focus-visible{outline:3px solid #f2c7cd;outline-offset:4px}
  .process-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 24px;padding-top:20px;margin-bottom:16px;border-top:1px solid #ffffff26}
  .process-toolbar>.process-toolbar-label{font-size:12px;line-height:1.6;color:#c0c3c5}
  .process-controls{display:flex;align-items:center;justify-content:space-between;gap:13px;min-width:0}
  .process-control{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 12px;border:1px solid #ffffff38;border-radius:6px;color:#fff;background:transparent;font-size:12px;line-height:1.5;transition:background .18s,border-color .18s}
  .process-control .icon{width:15px;height:15px}
  .process-control:hover:not([aria-disabled=true]){background:#ffffff12;border-color:#e8a6af}
  .process-control[aria-disabled=true]{color:#9b9fa3;border-color:#ffffff17;cursor:default}
  .process-toolbar [data-process-current]{color:#fff;font-size:12px;line-height:1.6;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.06em}
  .process-progress{height:2px;background:#ffffff20;margin-bottom:20px;border-radius:0}
  .process-progress::before{background:#e8a6af}
  .process-thumbnails{grid-template-columns:repeat(5,minmax(132px,1fr));gap:10px;padding:7px 7px 17px;margin-inline:-7px;overflow-x:auto;scroll-padding-inline:7px}
  .process-tab{background:transparent;border:1px solid #ffffff24;border-radius:6px;padding:5px;color:#c5c8ca;overflow:hidden;min-width:0;transition:background .18s,border-color .18s}
  .process-tab:hover{background:#ffffff08;border-color:#ffffff70}
  .process-tab[aria-selected=true]{background:#ffffff0c;border-color:#e8a6af;box-shadow:inset 0 -2px 0 #e8a6af}
  .process-thumb{height:56px;border-radius:3px;background:#292c2e}
  .process-thumb>img{object-fit:cover;opacity:.7;transition:opacity .18s}
  .process-tab[aria-selected=true] .process-thumb>img,.process-tab:hover .process-thumb>img{opacity:1;transform:none}
  .process-tab-label{justify-content:flex-start;gap:8px;padding:10px 5px 8px;min-height:45px;font-size:11px;line-height:1.45}
  .process-tab-number{color:#9c9fa3;font-size:10px;letter-spacing:.04em;font-variant-numeric:tabular-nums;flex:none}
  .process-tab[aria-selected=true] .process-tab-label{color:#fff;font-weight:600}
  .process-tab[aria-selected=true] .process-tab-number{color:#efb4bd}
  .process-panel{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;border:1px solid #ffffff24;background:#202326;color:#fff;border-radius:8px;overflow:hidden;margin:0 0 24px;scroll-margin-top:130px}
  .process-viewer[data-ready=true] .process-panel{margin-bottom:0}
  .process-photo{aspect-ratio:3/2;min-height:0;align-self:center;background:#17191b}
  .process-photo>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
  .process-story{position:relative;padding:28px 24px;align-self:center;min-width:0}
  .process-story .eyebrow{padding-right:55px;font-size:10px;letter-spacing:.13em}
  .process-step-index{position:absolute;right:24px;top:22px;color:#ffffff28;font-size:50px;line-height:1;font-weight:600;letter-spacing:-.06em;font-variant-numeric:tabular-nums;pointer-events:none}
  .process-story h3{font-size:clamp(1.65rem,6vw,2.2rem);line-height:1.15;margin-top:18px;color:#fff;letter-spacing:-.035em}
  .process-story>p{font-size:14px;line-height:1.8;color:#c5c8ca;margin-top:18px}
  .process-checks{gap:10px;margin-top:23px;padding-top:20px;border-top:1px solid #ffffff1c}
  .process-checks li{font-size:12px;line-height:1.65;color:#e4e5e6}
  .process-checks .icon{color:#e8a6af}
  .process-story .process-photo-note{font-size:11px;line-height:1.75;color:#aeb3b7;border-top-color:#ffffff1c;margin-top:20px;padding-top:16px}
  .process-instruction{display:block;color:#aeb2b6;font-size:11px;line-height:1.75;margin-top:18px;max-width:790px}
  .photo-enlarge.photo-enlarge-label{display:flex;align-items:center;justify-content:center;gap:9px;width:auto;min-height:44px;height:auto;padding:10px 12px;border-radius:6px;top:14px;right:14px;background:#151617eb;border:1px solid #ffffff80;color:#fff;font-size:11px;line-height:1.5}
  .photo-enlarge-label .icon{height:16px;width:16px}
  .photo-enlarge:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #17191b}

  .materials-section{background:#fff}
  .materials-section .materials-intro{max-width:650px}
  .materials-section .section-heading p{font-size:16px;line-height:1.8;max-width:570px}
  .shingle-grid{gap:22px;align-items:stretch}
  .shingle-card,.shingle-card.shingle-standard{display:flex;flex-direction:column;background:#fff;color:#17191b;border:1px solid #d8d9d8;border-radius:8px;box-shadow:0 7px 24px #15161705;min-width:0;overflow:hidden}
  .shingle-card.shingle-standard{border-top:3px solid #9c3843}
  .shingle-card:not(.shingle-standard){border-top:3px solid #c8cbcd}
  .shingle-card-header{min-height:78px;padding:20px 22px;gap:16px;align-items:center}
  .shingle-card .material-pill{background:transparent;border:0;border-radius:0;padding:0;color:#616267;font-size:10px;line-height:1.5;letter-spacing:.08em;max-width:150px}
  .shingle-standard .material-pill{color:#9c3843}
  .shingle-class{display:inline-flex;align-items:center;gap:7px;color:#17191b;font-size:10px;font-weight:500;line-height:1.2;letter-spacing:.08em;margin:0;white-space:nowrap}
  .shingle-class strong{font-size:42px;line-height:1;letter-spacing:-.05em;font-weight:600}
  .shingle-card .shingle-photo,.shingle-standard .shingle-photo{aspect-ratio:auto;background:#f4f4f2}
  .shingle-sample{aspect-ratio:8/5;background:#333}
  .shingle-sample>img{width:100%;height:100%;object-fit:contain;object-position:center}
  .shingle-card .shingle-photo figcaption{position:static;display:block;background:#f5f5f3;color:#17191b;padding:21px 22px;font-size:20px;line-height:1.35;letter-spacing:-.025em;min-height:95px}
  .shingle-card .shingle-photo figcaption span{font-size:11px;line-height:1.6;letter-spacing:0;color:#666;margin-top:6px}
  .shingle-card-body{padding:24px 22px 26px;display:flex;flex-direction:column;flex:1;min-width:0}
  .shingle-card-body .shingle-summary,.shingle-standard .shingle-card-body .shingle-summary{font-size:14px;line-height:1.8;color:#555c61;margin:0 0 22px}
  .shingle-facts{margin:0 0 26px;border-top:1px solid #dedfdd}
  .shingle-facts>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:13px;padding:14px 0;border-bottom:1px solid #e8e8e6}
  .shingle-facts dt{font-size:11px;line-height:1.7;color:#686c70}
  .shingle-facts dd{font-size:12px;line-height:1.65;color:#292d30;margin:0;font-weight:500}
  .shingle-card-links{display:flex;flex-direction:column;align-items:stretch;gap:13px;margin-top:auto;justify-content:flex-start}
  .shingle-card-links .button{display:flex;justify-content:space-between;min-height:50px;border-radius:6px;padding:13px 16px;font-size:12px;line-height:1.6}
  .shingle-card-links .manufacturer-link{align-self:flex-start;gap:8px;min-height:44px;color:#60656a;font-size:11px;line-height:1.6;text-decoration:none;border-bottom:1px solid #cfd1d2}
  .manufacturer-link .icon{width:13px;height:13px}
  .manufacturer-link:hover{color:#9c3843;border-bottom-color:#9c3843}
  .shingle-explainer{display:block;margin-top:26px;padding:25px 0;border:0;border-top:1px solid #dededb;border-bottom:1px solid #dededb;border-radius:0;background:#fff}
  .shingle-explainer-icon{display:none}
  .shingle-explainer h3{font-size:23px;line-height:1.25;letter-spacing:-.035em;color:#22272a}
  .shingle-explainer p{font-size:14px;line-height:1.8;color:#62666a;margin-top:15px;max-width:730px}
  .materials-note{font-size:11px;line-height:1.85;color:#73777b;max-width:1080px;margin-top:22px}

  .service-cards-editorial{gap:22px}
  .service-cards-editorial .photo-service-card{background:#fff;border:1px solid #dddeda;border-radius:8px;box-shadow:none;overflow:hidden;min-width:0}
  .service-cards-editorial .photo-service-card:hover,.service-cards-editorial .photo-service-card:focus-visible{transform:translateY(-3px);border-color:#bd9198;box-shadow:0 12px 28px #1516170b}
  .service-cards-editorial .service-card-photo,.service-cards-editorial .service-card:last-child .service-card-photo{aspect-ratio:3/2;background:#ecece9}
  .service-cards-editorial .service-card-photo img{object-fit:contain;transform:none}
  .service-cards-editorial .service-card-body{padding:25px 23px;display:flex;flex-direction:column}
  .service-card-kicker{display:block;font-size:10px;line-height:1.65;letter-spacing:.07em;color:#7a4c54;margin-bottom:15px;text-transform:uppercase}
  .service-cards-editorial .service-card-title{gap:14px}
  .service-cards-editorial .service-card-title h3{font-size:26px;line-height:1.18;letter-spacing:-.04em}
  .service-cards-editorial .service-card-title>.icon{display:none}
  .service-cards-editorial .photo-service-card p{font-size:14px;line-height:1.8;margin-top:16px;margin-bottom:24px}
  .service-cards-editorial .service-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:11px;line-height:1.7;color:#3e4145;margin-top:auto;padding-top:18px;border-color:#e1e2df}
  .service-foot .icon{height:15px;width:15px;color:#9c3843}

  .photo-dialog{border-radius:8px;border:1px solid #ffffff30;background:#17191b;color:#fff;max-height:calc(100svh - 24px);width:min(1240px,calc(100vw - 24px));overflow:auto}
  .photo-dialog-header{position:sticky;top:0;z-index:3;background:#17191bf5;border-bottom:1px solid #ffffff1c;padding:10px 14px 10px 20px;backdrop-filter:blur(8px);font-size:11px;letter-spacing:.06em}
  .photo-dialog-close{min-height:44px;min-width:44px;border-radius:6px;border-color:#ffffff50}
  .photo-dialog-media{position:relative;background:#111;min-height:160px;display:grid;place-items:center}
  .photo-dialog-media>img{display:block;width:100%;height:auto;max-height:calc(100svh - 230px);min-height:0;object-fit:contain;background:#111}
  .photo-dialog-status{padding:40px 24px;color:#c8cbcd;font-size:14px;line-height:1.8;text-align:center;max-width:460px}
  .photo-dialog-footer{padding:18px 22px 22px}
  .photo-dialog-footer p{font-size:12px;line-height:1.75;color:#c6c9cc;max-width:960px}
  .photo-dialog-footer>a{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:8px;font-size:11px;line-height:1.6;text-decoration:underline;text-underline-offset:4px;color:#e8a6af}
  .photo-dialog-footer>a .icon{height:13px;width:13px}

  @media(max-width:539px){
    .process-toolbar{align-items:flex-start;gap:12px}
    .process-toolbar-label{width:100%}
    .process-controls{width:100%;max-width:380px}
    .process-control{padding-inline:11px}
    .process-story h3 br{display:none}
    .shingle-card .shingle-photo figcaption{min-height:0}
  }
  @media(min-width:540px){
    .process-thumb{height:64px}
    .process-story{padding:34px}
    .process-step-index{top:28px;right:34px;font-size:60px}
    .shingle-card-header{padding:22px 26px}
    .shingle-card .shingle-photo figcaption{padding-inline:26px}
    .shingle-card-body{padding:27px 26px}
    .shingle-facts>div{grid-template-columns:105px minmax(0,1fr);gap:15px}
  }
  @media(min-width:760px){
    .workmanship-section .section-heading{margin-bottom:42px}
    .process-thumbnails{grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;gap:12px}
    .process-tab-label{min-height:46px;font-size:11px}
    .process-story{padding:36px}
    .process-story h3{font-size:34px;max-width:600px}
    .process-story>p{font-size:15px;max-width:650px}
    .process-checks{max-width:650px;grid-template-columns:1fr 1fr;gap:16px}
    .shingle-card-header{padding:22px}
    .shingle-card .shingle-photo figcaption{padding:22px;font-size:21px;min-height:112px}
    .shingle-card-body{padding:25px 22px}
    .shingle-card-body .shingle-summary{min-height:5.4em}
    .shingle-facts>div{grid-template-columns:88px minmax(0,1fr);gap:12px;min-height:68px}
    .shingle-facts>div:last-child{min-height:90px}
    .shingle-explainer>div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:36px;align-items:start}
    .shingle-explainer p{margin:0}
    .service-cards-editorial{grid-template-columns:repeat(2,minmax(0,1fr))}
    .service-cards-editorial .service-card:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
    .service-cards-editorial .service-card:last-child .service-card-photo{align-self:center;aspect-ratio:3/2}
    .service-cards-editorial .service-card-body{padding:27px 23px}
    .service-cards-editorial .service-card-title h3{font-size:25px}
  }
  @media(min-width:1100px){
    .process-panel{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
    .process-thumb{height:72px}
    .process-tab-label{font-size:12px;gap:10px;min-height:47px;padding:12px 8px}
    .process-tab-number{font-size:11px}
    .process-story{padding:32px}
    .process-step-index{font-size:62px;top:24px;right:30px}
    .process-story h3{font-size:31px;line-height:1.16}
    .process-story>p{font-size:14px;line-height:1.8}
    .process-checks{grid-template-columns:1fr;gap:10px}
    .shingle-card-header{padding:25px 31px}
    .shingle-class strong{font-size:48px}
    .shingle-card .shingle-photo figcaption{padding:23px 31px;min-height:105px;font-size:24px}
    .shingle-card-body{padding:30px 31px}
    .shingle-card-body .shingle-summary{font-size:15px;min-height:3.6em}
    .shingle-facts>div{grid-template-columns:125px minmax(0,1fr);min-height:58px;gap:22px}
    .shingle-facts>div:last-child{min-height:66px}
    .shingle-facts dt{font-size:12px}
    .shingle-facts dd{font-size:13px}
    .shingle-card-links{flex-direction:row;align-items:center;justify-content:space-between;gap:18px}
    .shingle-card-links .button{flex:1;max-width:250px}
    .shingle-card-links .manufacturer-link{align-self:center}
    .shingle-explainer{padding-block:32px}
    .shingle-explainer h3{font-size:28px}
    .service-cards-editorial{grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr));gap:22px}
    .service-cards-editorial .service-card:last-child{grid-column:auto;display:flex;flex-direction:column}
    .service-cards-editorial .service-card:last-child .service-card-photo{align-self:stretch}
    .service-cards-editorial .service-card-body{padding:28px 25px}
  }
  @media(min-width:1400px){
    .process-story{padding:40px}
    .process-step-index{right:38px;top:30px;font-size:70px}
    .process-story h3{font-size:37px}
    .process-story>p{font-size:15px}
  }
  @media(prefers-reduced-motion:reduce){
    .process-panel,.process-progress::before,.process-tab,.process-thumb>img,.process-control{animation:none!important;transition:none!important}
    .service-cards-editorial .photo-service-card:hover,.service-cards-editorial .photo-service-card:focus-visible{transform:none}
  }
  @media print{
    .workmanship-section,.process-panel{background:#fff;color:#111}
    .workmanship-section h2,.workmanship-section .eyebrow,.process-story h3,.process-story p,.process-checks li{color:#111}
    .process-panel{grid-template-columns:1.3fr 1fr;border-color:#ccc;break-inside:avoid}
    .process-step-index,.process-controls,.process-toolbar,.process-progress,.photo-dialog{display:none!important}
    .shingle-card{box-shadow:none;break-inside:avoid}
  }
}

/* A short first step, with optional context kept in the same accessible form. */
@layer elevated {
  .contact-form {
    --form-ink: #111;
    --form-accent: var(--brand, #9c3843);
    --form-line: #dedbd9;
    background: #fff;
    color: var(--form-ink);
    border: 1px solid #fff;
    border-radius: 20px;
    padding: clamp(24px, 3.2vw, 44px);
    box-shadow: 0 22px 65px #00000016;
    font-family: Manrope, Arial, Helvetica, sans-serif;
    min-width: 0;
    scroll-margin-top: 130px;
  }
  .contact-form .form-heading-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
  }
  .contact-form .form-heading-row .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--form-accent);
    font-size: 9px;
    letter-spacing: .1em;
    line-height: 1.5;
  }
  .contact-form .form-step-number {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 27px;
    height: 27px;
    border: 1px solid #e8cdd2;
    border-radius: 50%;
    letter-spacing: 0;
    font-size: 10px;
  }
  .contact-form .form-direct-label {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    color: #62615f;
    font-size: 10px;
    letter-spacing: 0;
  }
  .contact-form h3 {
    font-family: inherit;
    font-size: clamp(26px, 2.65vw, 37px);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -.05em;
    margin: 0;
    color: var(--form-ink);
    overflow-wrap: break-word;
  }
  .contact-form .form-intro {
    margin: 15px 0 0;
    max-width: 39ch;
    color: #62615f;
    font-size: 13px;
    line-height: 1.8;
  }
  .contact-form .form-request-context:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding: 12px 13px;
    border: 1px solid #e8cdd2;
    border-radius: 8px;
    background: #fbf7f7;
  }
  .contact-form .form-request-context > div { flex: 1; min-width: 0; }
  .contact-form .form-context-label { display: block; color: var(--form-accent); font-size: 10px; font-weight: 600; line-height: 1.6; }
  .contact-form .form-request-context p { margin: 3px 0 0; color: var(--form-ink); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
  .contact-form .form-request-context button { flex: none; min-width: 44px; min-height: 44px; padding: 8px; border: 0; border-radius: 4px; background: transparent; color: var(--form-accent); font: inherit; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .contact-form .form-request-context button:hover { background: #f2e6e8; }
  .contact-form .form-request-context button:focus-visible { outline: 2px solid var(--form-accent); outline-offset: 2px; }
  .contact-form .form-request-context button:disabled { opacity: .65; cursor: progress; }
  .contact-form .form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 19px 16px;
    margin-top: 27px;
  }
  .contact-form .form-field { gap: 8px; }
  .contact-form .form-field.full { grid-column: 1 / -1; }
  .contact-form .form-field label {
    color: var(--form-ink);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0;
  }
  .contact-form .form-field label span {
    color: #74716f;
    font-size: 10px;
    font-weight: 400;
  }
  .contact-form .form-field :is(input, select, textarea) {
    width: 100%;
    min-width: 0;
    min-height: 51px;
    height: auto;
    border: 1px solid var(--form-line);
    border-radius: 8px;
    padding: 12px 13px;
    background: #fcfbfa;
    color: var(--form-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    transition: background .18s, border-color .18s, box-shadow .18s;
  }
  .contact-form .form-field select { padding-right: 25px; }
  .contact-form .form-field textarea { min-height: 112px; resize: vertical; }
  .contact-form .form-field :is(input, textarea)::placeholder { color: #77736f; font-size: 13px; opacity: 1; }
  .contact-form .form-field :is(input, select, textarea):hover { border-color: #a8a09c; }
  .contact-form .form-field :is(input, select, textarea):focus-visible {
    outline: 2px solid var(--form-accent);
    outline-offset: 3px;
    border-color: var(--form-accent);
    background: #fff;
    box-shadow: 0 0 0 5px #9c38430a;
  }
  .contact-form .form-field [aria-invalid="true"] { border-color: var(--form-accent); background: #fff7f8; }
  .contact-form .form-extra {
    margin-top: 23px;
    padding-top: 0;
    border-top: 1px solid #e9e6e3;
    border-bottom: 1px solid #e9e6e3;
  }
  .contact-form .form-extra summary {
    display: block;
    position: relative;
    min-height: 70px;
    margin: 0;
    padding: 17px 28px 17px 0;
    list-style: none;
    cursor: pointer;
    border-radius: 3px;
  }
  .contact-form .form-extra summary::-webkit-details-marker { display: none; }
  .contact-form .form-extra summary::after {
    content: "";
    position: absolute;
    top: 27px;
    right: 3px;
    width: 7px;
    height: 7px;
    border: solid var(--form-accent);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    transition: transform .18s;
  }
  .contact-form .form-extra[open] summary::after { transform: rotate(225deg); }
  .contact-form .form-extra summary .form-extra-title { display: block; color: var(--form-ink); font-size: 12px; font-weight: 600; line-height: 1.6; }
  .contact-form .form-extra summary .form-optional { color: #74716f; font-size: 10px; font-weight: 400; }
  .contact-form .form-extra summary .form-extra-hint { display: block; margin-top: 3px; color: #74716f; font-size: 10px; font-weight: 400; line-height: 1.7; }
  .contact-form .form-extra summary:focus-visible { outline: 2px solid var(--form-accent); outline-offset: 4px; }
  .contact-form .form-extra .form-grid { margin: 3px 0 23px; }
  .contact-form .form-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    min-height: 55px;
    margin-top: 23px;
    padding: 15px 20px;
    background: var(--form-accent);
    border: 1px solid var(--form-accent);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .contact-form .form-submit:hover { background: #7c2934; border-color: #7c2934; }
  .contact-form .form-submit:focus-visible { outline: 2px solid var(--form-accent); outline-offset: 4px; }
  .contact-form .form-submit:disabled { opacity: .65; cursor: progress; }
  .contact-form .form-help { margin-top: 14px; color: #74716f; font-size: 10px; line-height: 1.8; }
  .contact-form .form-help a { color: var(--form-accent); font-weight: 600; text-underline-offset: 3px; }
  .contact-form .inquiry-status { margin-top: 18px; border: 1px solid #d5a8b0; border-radius: 8px; background: #fff7f8; color: var(--form-ink); padding: 16px; font-size: 12px; line-height: 1.7; }
  .contact-form .inquiry-success { padding: 7px 0 0; border: 0; margin: 0; }
  .contact-form .inquiry-success h4 { font-family: inherit; font-size: 30px; font-weight: 600; line-height: 1.2; }
  .contact-form .inquiry-success p { font-size: 13px; color: #62615f; line-height: 1.8; }
  .contact-form .inquiry-success a { color: var(--form-accent); text-underline-offset: 3px; }
  .contact-form .success-check { background: var(--form-accent); }
  .contact-form.is-sent > :is(.form-heading-row, #form-heading, .form-intro, .form-request-context, .form-grid, .form-extra, .form-submit, .form-help) { display: none; }
  @media (min-width: 540px) and (max-width: 759px), (min-width: 1100px) {
    .contact-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .contact-form *, .contact-form *::after { transition: none; }
  }
}

/* A quieter architectural identity, sized for reading and touching. */
@font-face{font-family:'Sora';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/sora-latin.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('/assets/fonts/dm-sans-latin.woff2') format('woff2')}

@layer refined {
  :root{--font-body:'DM Sans',Arial,Helvetica,sans-serif;--font-display:'Sora',Arial,Helvetica,sans-serif;--brand:#9c3843;--brand-hover:#7c2934;--brand-soft:#f7eef0;--brand-light:#edb6bf;--ink:#17191b;--muted:#5c6369;--wash:#f5f5f2;--line:#dadeda;--radius:14px;--section-space:72px;--page-gutter:20px}
  html{font-size:16px;scroll-padding-top:110px;text-size-adjust:100%;-webkit-text-size-adjust:100%}
  body{font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--ink);background:#fff;overflow-wrap:break-word}
  h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.045em;text-wrap:balance}
  h2{font-size:clamp(1.9rem,4vw,3.25rem);line-height:1.18}
  h3{line-height:1.3;letter-spacing:-.035em}
  p{color:var(--muted)}
  .container{width:min(1320px,calc(100% - var(--page-gutter)*2))}
  .section{padding-block:var(--section-space)}
  .eyebrow{font-family:var(--font-body);font-size:11px;font-weight:600;line-height:1.7;letter-spacing:.12em;gap:10px}
  .eyebrow::before{width:20px;height:2px}
  .eyebrow+h1,.eyebrow+h2{margin-top:18px}
  .section-heading{gap:24px;margin-bottom:32px;align-items:flex-start}
  .section-heading p,.lead{font-size:16px;line-height:1.8;max-width:560px}
  .section-heading p{margin-top:18px}
  .button{font-family:var(--font-body);min-height:54px;border-radius:8px;font-size:14px;font-weight:600;line-height:1.5;letter-spacing:0;padding:15px 20px;gap:14px;box-shadow:none;white-space:normal}
  .button:hover{box-shadow:0 6px 18px #17191b0a}
  .button-outline{background:transparent;border-color:#bec5c7;color:var(--ink)}
  .button-outline:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
  .button .icon{width:18px;height:18px}
  .text-link{font-family:var(--font-body);font-size:14px;line-height:1.6;font-weight:600;min-height:44px;gap:14px}
  .text-link .icon{width:17px;height:17px}
  a,button,summary,input,select,textarea{scroll-margin-block:120px}
  :is(a,button,summary,input,select,textarea):focus-visible{outline:3px solid var(--brand);outline-offset:4px}
  .note{font-size:13px;line-height:1.8}

  /* A compact brand header. All contact details remain readable text links. */
  .utility-bar{background:#17191b;letter-spacing:0}
  .utility-inner{min-height:38px}
  .utility-links{gap:0 12px;flex-wrap:wrap}
  .utility-links a{min-height:38px;font-size:11px;line-height:1.45;gap:6px}
  .utility-links a:first-child{font-size:12px;font-weight:600}
  .utility-links .icon{width:12px;height:12px}
  .utility-local{font-size:11px;letter-spacing:.04em;color:#cdd1d3}
  .site-header{background:#fffffffa;border-bottom-color:#e1e4e0}
  .header-inner{min-height:80px;gap:12px}
  .business-logo{width:176px}
  .header-controls{gap:8px;flex:none}
  .header-call,.menu-toggle{width:44px;height:44px;min-width:44px;border-radius:8px}
  .header-call{background:#faf5f6;border-color:#e9d8dc}
  .footer-bottom .business-logo{width:230px}

  /* The full roof leads the phone layout; calling stays within thumb's reach. */
  .showcase-hero{padding-top:30px;background:#fff}
  .showcase-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:25px;align-items:start}
  .showcase-copy{min-width:0;max-width:760px}
  .showcase-copy>.eyebrow{color:#626970;font-size:11px}
  .showcase-copy h1{font-family:var(--font-display);font-size:clamp(2rem,9.6vw,4.5rem);font-weight:600;letter-spacing:-.055em;line-height:1.14;margin-top:17px;text-wrap:initial;max-width:17ch}
  .showcase-copy h1 span{color:var(--brand)}
  .showcase-intro{font-size:16px;line-height:1.75;max-width:500px;margin-top:19px;color:#626b70}
  .showcase-visual{width:100%;max-width:none;min-width:0;border:0;border-radius:14px;overflow:hidden;background:#17191b;box-shadow:0 14px 35px #1113150a}
  .showcase-image{aspect-ratio:3/2;background:#e9eae6}
  .showcase-image>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;object-position:center;filter:none;transform:none}
  .showcase-image .showcase-enlarge{right:12px;bottom:12px;min-height:44px;padding:10px 13px;border-radius:7px;background:#17191be8;backdrop-filter:blur(8px)}
  .showcase-enlarge>span{font-family:var(--font-body);font-size:12px;line-height:1.5}
  .showcase-caption{display:flex;justify-content:space-between;align-items:center;padding:22px 23px;gap:18px;background:#17191b}
  .showcase-caption-label{color:#bdc5cb;font-family:var(--font-body);font-size:10px;line-height:1.6;letter-spacing:.1em;margin-bottom:9px}
  .showcase-caption p{font-family:var(--font-display);font-size:clamp(1.05rem,4.8vw,1.6rem);font-weight:500;line-height:1.4;letter-spacing:-.035em;color:#fff}
  .baseline-stamp{border-left-color:#ffffff2b;padding-left:21px;min-width:83px}
  .baseline-stamp>span{font-size:9px;line-height:1.5;letter-spacing:.08em;gap:6px}
  .baseline-stamp strong{font-family:var(--font-display);font-size:45px;line-height:1.05;margin:2px 0 6px;font-weight:500;letter-spacing:-.05em}
  .showcase-conversion{min-width:0}
  .showcase-actions{max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .showcase-actions .button{min-height:56px;font-size:14px;padding:15px 18px;justify-content:space-between;text-align:left}
  .showcase-actions .button-outline{border-color:#c8cece;background:#fff}
  .showcase-online{font-size:14px;line-height:1.6;min-height:46px;margin-top:9px;gap:10px;align-items:center}
  .showcase-online .icon{width:17px;height:17px}
  .showcase-assurance{font-size:12px;line-height:1.6;gap:8px 17px;margin-top:9px;color:#657078}
  .showcase-assurance .icon{width:15px;height:15px}
  .hero-bottom-line{font-size:10px;line-height:1.7;letter-spacing:.065em;padding-block:24px;margin-top:8px;gap:20px;align-items:center}
  .hero-bottom-line>a{font-size:12px;min-height:44px;gap:12px;white-space:normal}
  .hero-bottom-line>span{gap:8px}
  .standards-rail{background:#f5f5f2;border-block:1px solid #e1e4dd}
  .rail-grid{grid-template-columns:minmax(0,1fr);padding-block:8px}
  .rail-item{flex-direction:row;align-items:center;gap:14px;padding:16px 0}
  .rail-item+.rail-item{border-left:0;border-top:1px solid #dedfd9}
  .rail-item>.icon{width:22px;height:22px;color:var(--brand)}
  .rail-item h2{font-family:var(--font-body);font-size:14px;line-height:1.5;font-weight:600;letter-spacing:0}
  .rail-item p{display:block;font-size:13px;line-height:1.65;margin-top:3px}

  /* One coherent choice panel, with compact, readable mobile rows. */
  .start-section{background:#fff;padding-block:64px 72px}
  .start-heading>p{max-width:460px;font-size:16px;line-height:1.8;margin:0}
  .intent-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:1px solid #dce0dc;border-radius:14px;overflow:hidden;background:#fff}
  .intent-card{display:grid;grid-template-columns:28px minmax(0,1fr);gap:5px 15px;padding:24px 20px 17px;border:0;border-radius:0;background:transparent;text-decoration:none;min-width:0}
  .intent-card+.intent-card{border-top:1px solid #e0e3df}
  .intent-card-top{grid-column:1;grid-row:1/4;margin:0;align-items:flex-start;padding-top:2px}
  .intent-card-top>.icon{width:24px;height:24px}
  .intent-card-top>span{display:none}
  .intent-card h3{grid-column:2;font-size:21px;line-height:1.35;margin:0}
  .intent-card p{grid-column:2;font-size:15px;line-height:1.75;max-width:none;margin:4px 0 0}
  .intent-action{grid-column:2;min-height:46px;border:0;margin:3px 0 0;font-size:14px;line-height:1.5;gap:12px;color:#71313b}
  .intent-action .icon{width:17px;height:17px}
  .intent-card:hover{background:#faf7f7;box-shadow:none}

  .promise-section{background:#f5f5f2;border-block:1px solid #e2e5de}
  .promise-grid{grid-template-columns:minmax(0,1fr);gap:35px;align-items:center}
  .promise-image.inspection-figure{border:0;border-radius:14px;aspect-ratio:auto;min-height:0}
  .inspection-figure>img{width:100%;height:auto;object-fit:contain;aspect-ratio:3/2}
  .inspection-figure .inspection-caption{padding:24px;background:#17191b}
  .inspection-caption .inspection-promise{font-family:var(--font-display);font-size:23px;line-height:1.4;letter-spacing:-.035em}
  .inspection-caption .photo-credit{font-size:11px;line-height:1.7;margin-top:14px;color:#c1c8cc}
  .inspection-figure>.photo-enlarge{width:44px;height:44px;border-radius:8px}
  .promise-copy h2{font-size:clamp(1.9rem,4vw,3.25rem);line-height:1.2}
  .promise-copy .lead{font-size:16px;line-height:1.85;margin-top:23px}
  .promise-detail-list{margin-top:27px;border-color:#d3d9d1}
  .promise-detail-list li{grid-template-columns:19px minmax(0,1fr);gap:13px;padding-block:19px;border-color:#d3d9d1}
  .promise-detail-list h3{font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1.6;letter-spacing:0}
  .promise-detail-list p{font-size:15px;line-height:1.7;margin-top:5px;color:#616a70}
  .promise-copy>.text-link{margin-top:24px}

  .elevated-claims{background:#1b1e20}
  .elevated-claims .claims-layout{grid-template-columns:minmax(0,1fr);gap:38px}
  .elevated-claims h2{font-size:clamp(2rem,4vw,3.35rem);line-height:1.18}
  .elevated-claims .claims-intro>p{font-size:16px;line-height:1.85;margin-top:23px;max-width:540px;color:#c6ced2}
  .elevated-claims .claims-intro>.claims-small-note{font-size:13px;line-height:1.8;max-width:440px;color:#b5bec4}
  .elevated-claims .claims-intro>.button{min-height:54px;margin-top:27px}
  .elevated-claims .claims-list li{grid-template-columns:35px minmax(0,1fr);gap:16px;padding-block:26px;border-color:#ffffff26}
  .elevated-claims .claims-list h3{font-size:21px;line-height:1.4;font-weight:500}
  .elevated-claims .claims-list p{font-size:15px;line-height:1.85;margin-top:11px;color:#c1c9ce}
  .elevated-claims .claims-list .step-number{font-family:var(--font-display);font-size:14px;line-height:1.7;padding:2px 0 0;color:var(--brand-light)}

  .reviews-section{background:#f5f5f2;border-color:#e0e4dc}
  .sample-label{font-size:12px;line-height:1.75;max-width:310px;color:#606971}
  .review-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .review-card{padding:27px 24px;border:1px solid #dce2da;border-radius:14px;background:#fff;min-width:0}
  .review-quote-mark{font-size:70px;height:34px;margin-bottom:19px}
  .review-card blockquote{font-family:var(--font-body);font-size:16px;line-height:1.85;font-weight:400;color:#424c53}
  .review-author{gap:13px;padding-top:24px}
  .review-initial{width:41px;height:41px;font-size:13px;font-family:var(--font-body)}
  .review-author strong{font-size:14px;line-height:1.6}
  .review-author span{font-size:13px;line-height:1.6;color:#68747c}
  .review-invite{margin-top:24px;padding:28px 24px;border:1px solid #d8ded6;border-left:3px solid var(--brand);border-radius:12px;gap:24px}
  .review-invite h3{font-size:24px;line-height:1.3}
  .review-invite p{font-size:15px;line-height:1.85;margin-top:15px;max-width:720px}
  .review-invite .button{font-size:14px;min-height:54px;min-width:0;gap:12px;text-align:left;justify-content:center}
  .review-invite .review-feedback{font-size:13px;line-height:1.7}

  .faq-layout{grid-template-columns:minmax(0,1fr);gap:35px}
  .faq-intro h2{font-size:clamp(2rem,4vw,3.3rem)}
  .faq-intro p{font-size:16px;line-height:1.8;max-width:400px}
  .faq-list{border-color:#d5dcd3}
  .faq-list details{border-color:#d5dcd3;background:transparent}
  .faq-list summary{font-family:var(--font-body);font-size:16px;font-weight:600;line-height:1.6;min-height:78px;padding-block:22px;gap:20px}
  .faq-list details p{font-size:15px;line-height:1.85;padding:0 18px 26px 0;max-width:660px}
  .area-section{background:#f5f5f2;padding-block:45px;border-color:#dfe4dc}
  .area-layout{grid-template-columns:minmax(0,1fr);gap:26px}
  .area-heading h2{font-size:28px;line-height:1.3}
  .area-heading p{font-size:15px;line-height:1.8;max-width:420px}
  .area-heading>.icon{width:23px;height:23px}
  .area-cities{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
  .area-cities li{font-size:15px;line-height:1.7;padding:11px 0;border-color:#d8ded4}

  /* A comfortable form width matters more than keeping two columns on tablets. */
  .contact-footer{background:#141719;border-top:3px solid var(--brand);padding-top:66px}
  .footer-contact-grid{grid-template-columns:minmax(0,1fr);gap:38px;padding-bottom:58px;align-items:start}
  .footer-intro h2{font-family:var(--font-display);font-size:clamp(2.35rem,6vw,3.8rem);line-height:1.14;letter-spacing:-.045em}
  .footer-intro>p{font-size:16px;line-height:1.85;max-width:480px;color:#bec8cf;margin-top:22px}
  .footer-next-steps{margin-top:25px;gap:15px}
  .footer-next-steps li{grid-template-columns:25px minmax(0,1fr);gap:12px}
  .footer-next-steps li>span{font-size:12px;font-family:var(--font-display);line-height:1.7}
  .footer-next-steps p{font-size:15px;line-height:1.7;color:#d0d7db}
  .footer-direct{margin-top:30px;gap:10px}
  .footer-direct a{min-height:44px;max-width:100%;gap:12px}
  .footer-direct a:first-child{font-family:var(--font-display);font-size:clamp(1.6rem,6.5vw,2rem);line-height:1.4;letter-spacing:-.035em;font-weight:500}
  .footer-direct a:last-child{font-size:15px;line-height:1.6;overflow-wrap:anywhere}
  .footer-direct .icon{width:19px;height:19px}
  .footer-location{font-size:13px;line-height:1.8;margin-top:20px;color:#aab7c0}
  .contact-form{font-family:var(--font-body);border:1px solid #fff;border-radius:16px;padding:26px 22px;max-width:720px;width:100%;scroll-margin-top:110px;box-shadow:0 20px 60px #00000014}
  .contact-form .form-heading-row{gap:12px;margin-bottom:21px}
  .contact-form .form-heading-row .eyebrow{font-size:11px;letter-spacing:.08em}
  .contact-form .form-direct-label{font-size:12px}
  .contact-form h3{font-family:var(--font-display);font-size:clamp(1.55rem,3.3vw,2rem);line-height:1.25;letter-spacing:-.045em;font-weight:600}
  .contact-form .form-intro{font-size:15px;line-height:1.8;margin-top:15px;max-width:46ch}
  .contact-form .form-field label{font-size:14px;line-height:1.6;font-weight:600}
  .contact-form .form-field label span{font-size:12px}
  .contact-form .form-field :is(input,select,textarea){font-family:var(--font-body);font-size:16px;line-height:1.5;min-height:54px;border-color:#cbd2d2;background:#fafbf9;border-radius:8px;padding:13px 14px}
  .contact-form .form-field :is(input,textarea)::placeholder{font-size:15px;color:#69757d}
  .contact-form .form-field select{padding-right:28px;text-overflow:ellipsis}
  .contact-form .form-extra-title{font-size:15px;line-height:1.5}
  .contact-form .form-extra .form-optional{font-size:13px}
  .contact-form .form-extra-hint{font-size:13px;line-height:1.65}
  .contact-form .form-help{font-size:13px;line-height:1.8}
  .contact-form .form-submit{font-size:15px;min-height:56px;border-radius:8px}
  .contact-form .form-context-label{font-size:12px}
  .contact-form .form-request-context p{font-size:14px;line-height:1.7}
  .contact-form .form-request-context button{font-size:13px;min-height:44px;min-width:44px}
  .contact-form .inquiry-status,.contact-form .inquiry-success p{font-size:15px;line-height:1.8}
  .contact-form .inquiry-success h4{font-family:var(--font-display);font-size:27px;line-height:1.3}
  .contact-form .form-grid{gap:21px 17px}
  .footer-bottom{padding-top:32px;border-color:#ffffff24}
  .footer-nav-row{gap:28px}
  .footer-nav{gap:4px 22px}
  .footer-nav a{font-size:14px;min-height:44px;line-height:1.5;color:#c9d2d7}
  .footer-contact-line{gap:6px 25px;padding-block:21px;font-size:14px;line-height:1.7}
  .footer-contact-line a{min-height:36px;display:inline-flex;align-items:center;color:#c2cdd4;overflow-wrap:anywhere}
  .photography-note>summary{font-size:12px;min-height:44px;color:#aebdc6}
  .photography-note>p{font-size:12px;line-height:1.85;color:#aebdc6}
  .copyright-row,.copyright-row p{font-size:12px;line-height:1.8;color:#a2b1ba}
  .footer-last-links a{font-size:12px;min-height:44px}

  /* Every service page shares the same readable type and responsive rhythm. */
  .page-hero{background:#f5f5f2;padding-block:26px 56px}
  .breadcrumb{font-size:12px;line-height:1.7;gap:10px;flex-wrap:wrap}
  .breadcrumb a{min-height:36px;display:inline-flex;align-items:center}
  .page-hero-grid{gap:30px;grid-template-columns:minmax(0,1fr)}
  .page-hero h1{font-family:var(--font-display);font-size:clamp(2.1rem,7.4vw,4.4rem);line-height:1.14;letter-spacing:-.05em}
  .page-hero .lead{font-size:16px;line-height:1.85;max-width:600px}
  .page-hero-image{border-radius:14px}
  .page-hero-actions{gap:11px}
  .page-hero-actions .button{font-size:14px;min-height:54px}
  .content-grid{grid-template-columns:minmax(0,1fr);gap:35px}
  .content-intro .lead{font-size:16px;line-height:1.85}
  .feature-list li{grid-template-columns:23px minmax(0,1fr);gap:17px;padding-block:25px}
  .feature-list h3{font-size:21px;line-height:1.4}
  .feature-list p,.callout p,.related-link p,.contact-option p{font-size:15px;line-height:1.85}
  .feature-list p{margin-top:10px}
  .callout{padding:24px;border-radius:12px}
  .callout h3{font-size:22px;line-height:1.35}
  .related-links{gap:15px}
  .related-link{border-radius:12px;padding:24px;min-width:0}
  .related-link h3{font-size:21px;line-height:1.35}
  .detailed-steps li{grid-template-columns:35px minmax(0,1fr);gap:17px;padding-block:28px}
  .detailed-steps h3{font-size:23px;line-height:1.35}
  .detailed-steps p{font-size:16px;line-height:1.85;color:#c4cdd2}
  .contact-options{grid-template-columns:minmax(0,1fr);gap:20px}
  .contact-option{border-radius:14px;padding:28px;min-width:0}
  .contact-option h2{font-size:27px;line-height:1.3}
  .contact-option a{font-size:14px;min-height:44px;overflow-wrap:anywhere;word-break:normal}
  .contact-page-note{font-size:15px;line-height:1.8}

  @media(max-width:359px){
    .header-inner{gap:8px;min-height:76px}
    .business-logo{width:158px}
    .header-controls{gap:4px}
    .utility-links{gap:0 9px}
    .utility-links a{font-size:10.5px}
    .utility-links a:first-child{font-size:11.5px}
    .utility-links .icon{display:none}
    .showcase-copy h1{font-size:32px}
    .showcase-caption{padding:19px 18px;gap:13px}
    .baseline-stamp{padding-left:17px;min-width:77px}
    .baseline-stamp>span{font-size:8px}
    .showcase-actions .button{font-size:13px;padding-inline:15px}
    .contact-form{padding:25px 18px}
    .contact-form .form-heading-row .eyebrow{font-size:10px}
    .contact-form .form-direct-label{font-size:11px}
  }
  @media(min-width:540px){
    .showcase-hero{padding-top:40px}
    .showcase-copy h1{font-size:clamp(2.9rem,8vw,4.5rem)}
    .showcase-intro{font-size:17px}
    .showcase-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
    .showcase-actions .button{font-size:14px;min-height:64px}
    .showcase-caption{padding:27px 29px}
    .showcase-caption-label{font-size:11px}
    .showcase-caption p{font-size:26px}
    .baseline-stamp{padding-left:31px;min-width:119px}
    .baseline-stamp strong{font-size:54px}
    .baseline-stamp>span{font-size:10px}
    .showcase-assurance{font-size:13px;gap:10px 24px}
    .rail-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding-block:0}
    .rail-item{flex-direction:column;align-items:flex-start;gap:12px;padding:22px 17px}
    .rail-item:first-child{padding-left:0}
    .rail-item:last-child{padding-right:0}
    .rail-item+.rail-item{border-top:0;border-left:1px solid #dce0d7}
    .rail-item h2{font-size:14px}
    .rail-item p{font-size:13px}
    .contact-form{padding:36px}
    .review-card{padding:32px}
    .review-invite{padding:31px}
    .area-cities{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 20px}
  }
  @media(min-width:760px){
    :root{--page-gutter:32px;--section-space:88px}
    .header-inner{min-height:86px}
    .business-logo{width:192px}
    .utility-links a,.utility-links a:first-child{font-size:12px}
    .section-heading{gap:34px;margin-bottom:38px}
    .showcase-grid{gap:30px}
    .showcase-copy h1{font-size:64px}
    .showcase-caption{padding:28px 34px}
    .showcase-caption p{font-size:28px}
    .hero-bottom-line{font-size:11px;padding-block:26px;margin-top:6px}
    .hero-bottom-line>a{font-size:13px}
    .rail-item{flex-direction:row;align-items:center;gap:13px;padding:25px 20px}
    .rail-item h2{font-size:14px}
    .rail-item p{font-size:13px}
    .rail-item>.icon{width:23px;height:23px}
    .start-section{padding-block:76px 88px}
    .intent-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .intent-card{display:flex;flex-direction:column;padding:27px 23px 10px;gap:0}
    .intent-card+.intent-card{border-top:0;border-left:1px solid #dce0dc}
    .intent-card-top{display:flex;align-items:center;margin-bottom:28px;padding:0}
    .intent-card-top>span{display:block;font-family:var(--font-display);font-size:12px;color:#879097}
    .intent-card h3{font-size:23px}
    .intent-card p{font-size:15px;line-height:1.8;margin-top:14px;margin-bottom:24px}
    .intent-action{font-size:13px;min-height:62px;margin-top:auto;border-top:1px solid #e1e4e0;gap:12px}
    .review-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
    .review-card:last-child{grid-column:1/-1}
    .review-invite{padding:35px;grid-template-columns:minmax(0,1fr);gap:23px}
    .review-invite .button{width:auto;justify-self:start}
    .review-invite h3{font-size:27px}
    .area-section{padding-block:52px}
    .footer-contact-grid{gap:45px}
    .footer-intro h2{font-size:52px}
    .contact-form{padding:40px;max-width:none}
    .contact-form h3{font-size:34px}
    .footer-nav a{font-size:14px}
    .footer-contact-line{font-size:14px}
    .page-hero{padding-block:30px 65px}
    .contact-options{grid-template-columns:repeat(2,minmax(0,1fr))}
    .contact-option:last-child{grid-column:1/-1}
  }
  @media(min-width:900px){
    .promise-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:46px}
    .promise-copy h2{font-size:clamp(2rem,3.6vw,3.25rem)}
    .inspection-caption .inspection-promise{font-size:24px}
    .elevated-claims .claims-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:54px}
    .faq-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}
    .area-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}
    .area-cities{grid-template-columns:repeat(2,minmax(0,1fr))}
    .page-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:42px}
    .page-hero h1{font-size:clamp(2.6rem,4.4vw,4.2rem)}
    .content-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:55px}
  }
  @media(min-width:1000px){
    .showcase-hero{padding-top:48px}
    .showcase-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto;column-gap:38px;row-gap:25px;align-items:center}
    .showcase-copy{grid-column:1;grid-row:1;align-self:end;padding-top:8px}
    .showcase-copy h1{font-size:clamp(2.65rem,4.5vw,3.8rem);line-height:1.16;letter-spacing:-.055em}
    .showcase-intro{font-size:16px;line-height:1.8;margin-top:24px;max-width:420px}
    .showcase-visual{grid-column:2;grid-row:1/3;align-self:center}
    .showcase-caption{padding:25px 27px}
    .showcase-caption p{font-size:23px}
    .baseline-stamp{padding-left:24px;min-width:102px}
    .baseline-stamp strong{font-size:52px}
    .baseline-stamp>span{font-size:9px}
    .showcase-conversion{grid-column:1;grid-row:2;align-self:start}
    .showcase-actions{grid-template-columns:minmax(0,1fr);gap:10px}
    .showcase-actions .button{min-height:54px;font-size:14px;padding:15px 17px}
    .showcase-online{font-size:13px;gap:10px}
    .showcase-assurance{font-size:12px;gap:8px 16px;margin-top:8px}
    .hero-bottom-line{margin-top:27px;padding-block:26px}
    .footer-contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
    .footer-intro h2{font-size:48px}
    .footer-intro>p{font-size:16px}
    .contact-form{padding:32px}
    .contact-form h3{font-size:29px}
    .contact-form .form-grid{grid-template-columns:minmax(0,1fr)}
    .review-invite{grid-template-columns:minmax(0,1fr) minmax(230px,.5fr);gap:36px;align-items:center}
    .review-invite .button{width:100%;justify-content:center}
  }
  @media(min-width:1100px){
    :root{--page-gutter:48px;--section-space:112px}
    .showcase-hero{padding-top:54px}
    .showcase-grid{column-gap:50px;row-gap:25px}
    .showcase-copy h1{font-size:clamp(2.8rem,4.45vw,3.85rem)}
    .showcase-caption{padding:27px 31px}
    .showcase-caption p{font-size:26px}
    .section-heading{margin-bottom:45px;gap:45px;align-items:flex-end}
    .section-heading p{font-size:17px}
    .start-section{padding-block:88px 104px}
    .start-heading>p{max-width:430px}
    .intent-card{padding:32px 31px 13px}
    .intent-card h3{font-size:27px}
    .intent-card p{font-size:16px}
    .intent-action{font-size:14px;min-height:65px}
    .promise-grid{gap:76px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
    .promise-copy .lead{font-size:17px}
    .inspection-caption .inspection-promise{font-size:28px}
    .elevated-claims .claims-layout{gap:90px}
    .elevated-claims .claims-list h3{font-size:24px}
    .elevated-claims .claims-list p{font-size:16px}
    .elevated-claims .claims-list li{padding-block:29px;gap:21px}
    .review-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
    .review-card:last-child{grid-column:auto}
    .review-card{padding:32px 29px}
    .review-card blockquote{font-size:16px;line-height:1.9}
    .review-invite{padding:37px 34px;gap:44px;grid-template-columns:minmax(0,1fr) auto}
    .review-invite .button{min-width:260px;font-size:14px}
    .faq-layout{gap:90px}
    .faq-list summary{font-size:18px;min-height:90px}
    .faq-list details p{font-size:16px}
    .area-cities{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px}
    .area-heading h2{font-size:31px}
    .area-layout{gap:60px}
    .contact-footer{padding-top:96px}
    .footer-contact-grid{gap:75px;padding-bottom:80px}
    .footer-intro h2{font-size:54px}
    .footer-next-steps p{font-size:15px}
    .footer-direct a:first-child{font-size:32px}
    .contact-form{padding:38px}
    .contact-form h3{font-size:31px}
    .contact-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
    .contact-option:last-child{grid-column:auto}
    .contact-option{padding:29px}
    .page-hero-grid{gap:60px}
    .content-grid{gap:80px}
  }
  @media(min-width:1280px){
    .header-inner{min-height:92px;gap:24px}
    .business-logo{width:186px}
    .nav-list{gap:17px}
    .nav-link,.nav-disclosure>summary{font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:-.01em;min-height:84px}
    .nav-list>li:last-child .nav-link{padding-inline:18px;min-height:44px;border-radius:8px}
    .dropdown a{font-size:14px;min-height:46px}
    .showcase-grid{column-gap:58px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
    .showcase-copy h1{font-size:clamp(3.2rem,4.35vw,3.85rem)}
    .showcase-intro{font-size:17px;line-height:1.8}
    .showcase-actions .button{font-size:15px;min-height:57px}
    .showcase-online{font-size:14px}
    .showcase-assurance{font-size:13px}
    .showcase-caption p{font-size:29px}
    .baseline-stamp strong{font-size:59px}
    .baseline-stamp>span{font-size:10px}
    .showcase-caption{padding:29px 34px}
    .contact-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media(min-width:1416px){
    .nav-list{gap:22px}
    .nav-link,.nav-disclosure>summary{font-size:14px}
    .business-logo{width:200px}
    .footer-contact-grid{gap:96px}
    .contact-form{padding:44px}
    .footer-intro h2{font-size:60px}
  }
  @media(prefers-reduced-motion:reduce){.intent-card:hover{transform:none}}
  @media print{
    body{font-size:12pt}
    .showcase-grid{grid-template-columns:1fr 1fr;gap:25px}
    .showcase-copy{grid-column:1;grid-row:1;align-self:start}
    .showcase-visual{grid-column:2;grid-row:1}
    .showcase-conversion{display:none}
    .showcase-copy h1{font-size:30pt}
    .showcase-visual,.showcase-caption,.promise-section,.reviews-section,.area-section,.contact-footer,.elevated-claims{background:#fff;color:#111;box-shadow:none}
    .showcase-caption p,.showcase-caption-label,.baseline-stamp,.claims-list p,.footer-intro p{color:#111}
    .rail-grid,.intent-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    .intent-card{break-inside:avoid}
    .section{padding-block:30px}
    .contact-footer{padding-top:30px}
  }
}

/* Photography, material choices and craftsmanship: spacious, legible at every size. */
@layer refined-components {
  .materials-section { background: #fff; }
  .materials-section .section-heading { align-items: flex-start; gap: 24px; }
  .materials-section .materials-intro { max-width: 760px; }
  .materials-section .section-heading p { max-width: 620px; font-size: 16px; line-height: 1.8; margin-top: 22px; }
  .materials-section .section-heading strong { font-weight: 650; color: #25272a; }
  .shingle-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
  .shingle-card, .shingle-card.shingle-standard { display: flex; flex-direction: column; min-width: 0; background: #fff; color: #17191b; border: 1px solid #dadbd7; border-radius: 14px; box-shadow: 0 8px 30px #15161704; overflow: hidden; }
  .shingle-card.shingle-standard { border-top: 4px solid #9c3843; }
  .shingle-card:not(.shingle-standard) { border-top: 4px solid #383d41; }
  .shingle-card-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 100px; padding: 22px; background: #fafaf8; }
  .shingle-standard .shingle-card-header { background: #fbf6f7; }
  .shingle-card .material-pill { display: block; max-width: 170px; padding: 0; border: 0; border-radius: 0; background: transparent; font-family: var(--font-body, sans-serif); font-size: 12px; line-height: 1.65; letter-spacing: .02em; font-weight: 650; color: #4f5559; text-transform: none; }
  .shingle-standard .material-pill { color: #94333f; }
  .shingle-class { display: inline-flex; align-items: center; flex: none; gap: 9px; margin: 0; color: #222629; font-family: var(--font-body, sans-serif); font-size: 12px; line-height: 1; letter-spacing: .05em; font-weight: 550; white-space: nowrap; }
  .shingle-class strong { font-family: var(--font-display, sans-serif); font-size: 47px; line-height: 1; letter-spacing: -.06em; font-weight: 600; }
  .shingle-card .shingle-photo, .shingle-standard .shingle-photo { background: #f5f5f1; aspect-ratio: auto; }
  .shingle-sample { position: relative; aspect-ratio: 8 / 5; background: #323532; }
  .shingle-sample > img { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: none; transform: none; }
  .shingle-card .shingle-photo figcaption { position: static; min-height: 0; display: block; padding: 23px 22px; background: #f6f6f2; color: #17191b; font-family: var(--font-display, sans-serif); font-size: clamp(1.15rem, 5.2vw, 1.5rem); line-height: 1.4; letter-spacing: -.035em; font-weight: 550; overflow-wrap: break-word; }
  .shingle-card .shingle-photo figcaption span { display: block; margin-top: 9px; font-family: var(--font-body, sans-serif); font-size: 12px; line-height: 1.7; letter-spacing: 0; font-weight: 400; color: #646a6e; }
  .shingle-card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 26px 22px; }
  .shingle-card-body .shingle-summary, .shingle-standard .shingle-card-body .shingle-summary { min-height: 0; margin: 0 0 23px; color: #565d61; font-size: 15px; line-height: 1.8; }
  .shingle-facts { margin: 0 0 26px; border-top: 1px solid #dedfda; }
  .shingle-facts > div { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: start; gap: 17px; padding-block: 16px; min-height: 0; border-bottom: 1px solid #e5e6e1; }
  .shingle-facts > div:last-child { min-height: 0; }
  .shingle-facts dt { color: #6b7276; font-size: 13px; line-height: 1.65; }
  .shingle-facts dd { min-width: 0; margin: 0; color: #282e32; font-size: 14px; line-height: 1.65; font-weight: 500; overflow-wrap: break-word; }
  .shingle-card-links { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: auto; }
  .shingle-card-links .button { display: flex; justify-content: space-between; width: 100%; max-width: none; min-height: 54px; padding: 14px 18px; gap: 15px; border-radius: 8px; font-size: 14px; line-height: 1.5; }
  .shingle-card-links .manufacturer-link { display: inline-flex; align-items: center; justify-content: space-between; align-self: stretch; gap: 14px; min-height: 48px; color: #555e63; font-size: 13px; line-height: 1.6; border-bottom: 1px solid #d8dcd9; text-decoration: none; }
  .manufacturer-link .icon { width: 15px; height: 15px; flex: none; }
  .manufacturer-link:hover { color: #9c3843; border-bottom-color: #9c3843; }
  .shingle-explainer { display: block; margin-top: 30px; padding: 28px 24px; background: #f5f5f1; border: 1px solid #e2e4de; border-radius: 12px; }
  .shingle-explainer > div { display: block; }
  .shingle-explainer h3 { font-family: var(--font-display, sans-serif); font-size: clamp(1.3rem, 4.7vw, 1.75rem); line-height: 1.4; letter-spacing: -.04em; color: #252b2e; }
  .shingle-explainer p { margin: 18px 0 0; max-width: 730px; font-size: 15px; line-height: 1.85; color: #62696d; }
  .materials-note { max-width: 1120px; margin-top: 24px; font-size: 12px; line-height: 1.85; color: #73797d; }
  .materials-note a { text-underline-offset: .2em; }

  /* A manually controlled five-stage walkthrough, with no clipped roof imagery. */
  .workmanship-section { background: #17191b; border: 0; color: #fff; overflow: clip; }
  .workmanship-section .section-heading { align-items: flex-start; gap: 26px; margin-bottom: 36px; }
  .workmanship-section .section-heading h2 { max-width: 770px; color: #fff; }
  .workmanship-section .section-heading p { max-width: 630px; margin-top: 23px; color: #bdc3c7; font-size: 16px; line-height: 1.85; }
  .workmanship-section .eyebrow { color: #e8a6af; }
  .workmanship-section .text-link { color: #fff; border-bottom-color: #a86b75; min-height: 48px; }
  .workmanship-section :focus-visible, .photo-dialog :focus-visible { outline: 2px solid #f2c7cd; outline-offset: 4px; }
  .process-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; margin-bottom: 20px; padding-top: 24px; border-top: 1px solid #ffffff26; }
  .process-toolbar > .process-toolbar-label { width: 100%; color: #bfc5c8; font-size: 14px; line-height: 1.7; }
  .process-controls { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 420px; min-width: 0; gap: 10px; }
  .process-control { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; gap: 8px; padding: 11px 13px; border: 1px solid #ffffff42; border-radius: 7px; background: transparent; font-family: var(--font-body, sans-serif); font-size: 14px; line-height: 1.5; color: #fff; }
  .process-control .icon { height: 16px; width: 16px; }
  .process-control:hover:not([aria-disabled=true]) { border-color: #e8a6af; background: #ffffff0b; }
  .process-control[aria-disabled=true] { color: #989fa4; border-color: #ffffff1c; }
  .process-toolbar [data-process-current] { font-size: 13px; letter-spacing: .04em; color: #e6e9ea; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .process-progress { height: 3px; margin: 0 0 18px; border-radius: 0; background: #ffffff1c; }
  .process-progress::before { background: #e8a6af; }
  .process-thumbnails { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; margin-inline: -5px; padding: 5px 5px 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 5px; scrollbar-width: thin; scrollbar-color: #777f85 #282d31; }
  .process-tab { min-width: 0; padding: 5px; border: 1px solid #ffffff29; border-radius: 10px; background: #1e2225; color: #c9ced1; box-shadow: none; overflow: hidden; text-decoration: none; }
  .process-tab:hover { border-color: #ffffff73; background: #252a2e; }
  .process-tab[aria-selected=true] { border-color: #e8a6af; background: #30272b; box-shadow: inset 0 -2px 0 #e8a6af; }
  .process-thumb { height: 74px; border-radius: 6px; background: #121516; overflow: hidden; }
  .process-thumb > img { width: 100%; height: 100%; object-fit: contain; object-position: center; opacity: .7; }
  .process-tab[aria-selected=true] .process-thumb > img, .process-tab:hover .process-thumb > img { opacity: 1; transform: none; }
  .process-tab-label { display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; min-height: 54px; padding: 12px 7px 8px; font-size: 13px; line-height: 1.5; }
  .process-tab-number { flex: none; padding-top: 1px; font-size: 12px; line-height: 1.6; font-variant-numeric: tabular-nums; color: #9ca5ab; }
  .process-tab[aria-selected=true] .process-tab-label { color: #fff; font-weight: 600; }
  .process-tab[aria-selected=true] .process-tab-number { color: #e8a6af; }
  .process-panel { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-width: 0; margin: 0 0 28px; border: 1px solid #ffffff24; border-radius: 14px; background: #202528; color: #fff; overflow: hidden; }
  .process-viewer[data-ready=true] .process-panel { margin-bottom: 0; }
  .process-photo { align-self: center; width: 100%; aspect-ratio: 3 / 2; min-height: 0; background: #101314; }
  .process-photo > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
  .process-story { position: relative; min-width: 0; padding: 29px 24px 31px; }
  .process-story .eyebrow { padding-right: 50px; font-size: 12px; line-height: 1.65; letter-spacing: .1em; }
  .process-step-index { position: absolute; top: 23px; right: 23px; font-family: var(--font-display, sans-serif); font-size: 51px; line-height: 1; letter-spacing: -.06em; font-weight: 500; font-variant-numeric: tabular-nums; color: #ffffff24; pointer-events: none; }
  .process-story h3 { max-width: 600px; margin-top: 20px; font-family: var(--font-display, sans-serif); font-size: clamp(1.55rem, 5.7vw, 2rem); line-height: 1.25; letter-spacing: -.045em; color: #fff; }
  .process-story h3 br { display: none; }
  .process-story > p { max-width: 610px; margin-top: 20px; font-size: 15px; line-height: 1.85; color: #c3cacf; }
  .process-checks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; margin-top: 25px; padding-top: 24px; border-top: 1px solid #ffffff24; }
  .process-checks li { align-items: flex-start; gap: 10px; color: #e3e7e9; font-size: 13px; line-height: 1.75; }
  .process-checks .icon { margin-top: 3px; height: 16px; width: 16px; color: #e8a6af; }
  .process-story .process-photo-note { margin-top: 24px; padding-top: 19px; font-size: 12px; line-height: 1.8; color: #aeb8bf; border-top-color: #ffffff24; }
  .process-instruction { max-width: 960px; margin-top: 22px; color: #a6b1b8; font-size: 12px; line-height: 1.85; }
  .photo-enlarge.photo-enlarge-label { top: 12px; right: 12px; min-height: 44px; padding: 10px 12px; gap: 8px; border: 1px solid #ffffff80; border-radius: 7px; background: #17191be8; color: #fff; font-family: var(--font-body, sans-serif); font-size: 12px; line-height: 1.5; }
  .photo-enlarge-label .icon { height: 15px; width: 15px; }

  /* Clear service choices, led by the photographs rather than decorative icons. */
  .service-cards-editorial { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: stretch; }
  .service-cards-editorial .photo-service-card, .service-cards-editorial .service-card:last-child { display: flex; flex-direction: column; grid-column: auto; min-width: 0; border: 1px solid #e0e2dc; border-radius: 13px; background: #fff; box-shadow: 0 7px 25px #15161703; overflow: hidden; }
  .service-cards-editorial .service-card-photo, .service-cards-editorial .service-card:last-child .service-card-photo { align-self: stretch; aspect-ratio: 3 / 2; min-height: 0; background: #eaece5; }
  .service-cards-editorial .service-card-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: none; filter: none; }
  .service-cards-editorial .service-card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 27px 24px 23px; }
  .service-card-kicker { display: block; margin-bottom: 16px; color: #85636a; font-size: 12px; line-height: 1.75; font-weight: 500; letter-spacing: .035em; text-transform: uppercase; }
  .service-cards-editorial .service-card-title { gap: 14px; }
  .service-cards-editorial .service-card-title h3 { font-family: var(--font-display, sans-serif); font-size: 25px; line-height: 1.3; letter-spacing: -.045em; font-weight: 550; }
  .service-cards-editorial .service-card-title > .icon { display: none; }
  .service-cards-editorial .photo-service-card p { margin: 17px 0 25px; color: #636b70; font-size: 15px; line-height: 1.85; }
  .service-cards-editorial .service-foot { display: flex; align-items: center; justify-content: space-between; min-height: 51px; margin-top: auto; padding-top: 19px; gap: 18px; border-top: 1px solid #e0e3dc; font-size: 14px; line-height: 1.65; color: #30373c; }
  .service-foot .icon { height: 16px; width: 16px; flex: none; color: #9c3843; }
  .service-underlinks { display: flex; flex-wrap: wrap; gap: 7px 30px; margin-top: 24px; }
  .service-underlinks a { display: inline-flex; align-items: center; gap: 13px; min-height: 48px; font-size: 14px; line-height: 1.6; color: #4d575c; }

  .photo-dialog { width: min(1240px, calc(100vw - 24px)); max-height: calc(100svh - 24px); max-height: calc(100dvh - 24px); border: 1px solid #ffffff36; border-radius: 12px; background: #17191b; color: #fff; overflow: auto; }
  .photo-dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 10px 12px 10px 20px; font-family: var(--font-body, sans-serif); font-size: 14px; line-height: 1.6; letter-spacing: 0; }
  .photo-dialog-close { height: 46px; width: 46px; min-height: 46px; min-width: 46px; border-radius: 7px; }
  .photo-dialog-media > img { width: 100%; height: auto; max-height: calc(100svh - 240px); max-height: calc(100dvh - 240px); object-fit: contain; }
  .photo-dialog-footer { padding: 21px 22px 24px; }
  .photo-dialog-footer p { font-size: 13px; line-height: 1.85; color: #c3cbd1; }
  .photo-dialog-footer > a { margin-top: 11px; min-height: 46px; font-size: 14px; line-height: 1.6; color: #e8a6af; }

  @media (max-width: 359px) {
    .shingle-card-header { padding-inline: 18px; gap: 12px; }
    .shingle-card .material-pill { max-width: 120px; }
    .shingle-class { gap: 6px; font-size: 11px; }
    .shingle-class strong { font-size: 43px; }
    .shingle-card .shingle-photo figcaption, .shingle-card-body { padding-inline: 19px; }
    .shingle-facts > div { grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr); gap: 12px; }
    .process-controls { gap: 6px; }
    .process-control { gap: 5px; padding-inline: 10px; font-size: 13px; }
    .process-toolbar [data-process-current] { font-size: 12px; }
    .process-story { padding-inline: 20px; }
    .service-cards-editorial .service-card-body { padding-inline: 21px; }
    .service-cards-editorial .service-card-title h3 { font-size: 23px; }
  }
  @media (min-width: 600px) {
    .shingle-card-header { padding: 25px 29px; }
    .shingle-class strong { font-size: 53px; }
    .shingle-card .material-pill { font-size: 13px; }
    .shingle-card .shingle-photo figcaption { padding: 26px 29px; font-size: 24px; }
    .shingle-card-body { padding: 29px; }
    .shingle-card-body .shingle-summary { font-size: 16px; }
    .shingle-facts > div { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
    .shingle-facts dt, .shingle-card-links .manufacturer-link { font-size: 14px; }
    .shingle-facts dd { font-size: 15px; }
    .shingle-explainer { padding: 33px; }
    .process-toolbar > .process-toolbar-label { width: auto; }
    .process-controls { width: auto; min-width: 295px; }
    .process-story { padding: 35px; }
    .process-story h3 { font-size: 33px; }
    .process-story > p { font-size: 16px; }
    .process-story .eyebrow { font-size: 12px; }
    .process-step-index { right: 32px; top: 27px; font-size: 62px; }
    .process-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }
    .process-checks li { font-size: 14px; }
  }
  @media (min-width: 820px) {
    .shingle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .shingle-card-header { padding: 25px; }
    .shingle-card .shingle-photo figcaption { padding: 25px; min-height: 122px; font-size: 22px; }
    .shingle-card-body { padding: 27px 25px; }
    .shingle-card-body .shingle-summary { min-height: 5.4em; font-size: 15px; }
    .shingle-facts > div { min-height: 79px; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 14px; }
    .shingle-facts > div:last-child { min-height: 104px; }
    .shingle-facts dt { font-size: 13px; }
    .shingle-facts dd { font-size: 14px; }
    .shingle-explainer > div { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 36px; align-items: start; }
    .shingle-explainer p { margin: 0; font-size: 15px; }
    .service-cards-editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .service-cards-editorial .service-card:last-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-column: 1 / -1; align-items: center; }
    .service-cards-editorial .service-card:last-child .service-card-photo { align-self: center; }
    .service-cards-editorial .service-card-title h3 { font-size: 26px; }
    .process-thumbnails { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; overflow: visible; }
    .process-thumb { height: 80px; }
    .process-tab-label { font-size: 12px; padding-inline: 5px; gap: 5px; min-height: 58px; }
  }
  @media (min-width: 1100px) {
    .materials-section .section-heading, .workmanship-section .section-heading { align-items: flex-end; }
    .materials-section .section-heading p, .workmanship-section .section-heading p { font-size: 17px; }
    .shingle-grid { gap: 30px; }
    .shingle-card-header { min-height: 110px; padding: 28px 32px; }
    .shingle-card .shingle-photo figcaption { padding: 28px 32px; min-height: 114px; font-size: 24px; }
    .shingle-card-body { padding: 31px 32px; }
    .shingle-card-body .shingle-summary { min-height: 3.6em; font-size: 16px; }
    .shingle-facts > div { min-height: 66px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; }
    .shingle-facts > div:last-child { min-height: 85px; }
    .shingle-facts dt { font-size: 14px; }
    .shingle-facts dd { font-size: 15px; }
    .shingle-explainer { margin-top: 33px; padding: 36px 39px; }
    .shingle-explainer h3 { font-size: 28px; }
    .shingle-explainer p { font-size: 16px; }
    .workmanship-section .section-heading { margin-bottom: 44px; }
    .process-toolbar { margin-bottom: 22px; }
    .process-controls { min-width: 320px; gap: 20px; }
    .process-control { min-height: 48px; padding-inline: 16px; }
    .process-toolbar [data-process-current] { font-size: 14px; }
    .process-thumbnails { gap: 14px; padding-bottom: 24px; }
    .process-thumb { height: 91px; }
    .process-tab-label { padding: 13px 9px 10px; gap: 9px; min-height: 48px; font-size: 14px; }
    .process-tab-number { font-size: 12px; }
    .process-panel { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
    .process-story { padding: 34px; }
    .process-step-index { top: 29px; right: 30px; }
    .process-story h3 { font-size: clamp(1.8rem, 2.45vw, 2.2rem); }
    .process-story > p { font-size: 16px; line-height: 1.85; }
    .process-checks { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .process-checks li { font-size: 14px; }
    .service-cards-editorial { grid-template-columns: minmax(0, 1.12fr) repeat(2, minmax(0, 1fr)); gap: 24px; }
    .service-cards-editorial .service-card:last-child { display: flex; flex-direction: column; grid-column: auto; align-items: stretch; }
    .service-cards-editorial .service-card:last-child .service-card-photo { align-self: stretch; }
    .service-cards-editorial .service-card-body { padding: 29px 26px 25px; }
    .service-cards-editorial .service-card-title h3 { font-size: 25px; }
    .service-cards-editorial .photo-service-card p { font-size: 16px; line-height: 1.8; }
    .service-card-kicker { font-size: 12px; }
    .service-underlinks { gap: 12px 38px; margin-top: 28px; }
  }
  @media (min-width: 1400px) {
    .process-story { padding: 40px; }
    .process-step-index { top: 32px; right: 35px; font-size: 68px; }
    .service-cards-editorial .service-card-body { padding: 31px 30px 27px; }
    .service-cards-editorial .service-card-title h3 { font-size: 28px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .service-cards-editorial .photo-service-card:hover, .service-cards-editorial .photo-service-card:focus-visible { transform: none; }
  }
  @media print {
    .workmanship-section, .process-panel, .shingle-card-header, .shingle-standard .shingle-card-header { background: #fff; color: #111; }
    .workmanship-section h2, .process-story h3, .process-story p, .process-checks li, .process-instruction { color: #222; }
    .process-controls, .process-toolbar, .process-thumbnails, .process-progress, .photo-dialog, .photo-enlarge { display: none !important; }
    .process-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); border-color: #bbb; break-inside: avoid; }
    .process-story { padding: 20px; }
    .shingle-card, .service-cards-editorial .photo-service-card { box-shadow: none; break-inside: avoid; }
  }
}

/* The interface supplies the polish; each photograph retains its natural light and full composition. */
@layer roof-gallery {
  .roof-gallery-section{background:#f7f8f7;border-block:1px solid #e0e4e2}
  .roof-gallery-heading{display:grid;gap:24px;margin-bottom:30px}
  .roof-gallery-heading h2{font-size:clamp(2rem,4.6vw,3.75rem);line-height:1.14;margin-top:17px;letter-spacing:-.05em}
  .roof-gallery-intro{max-width:455px}
  .roof-gallery-intro>p{font-size:16px;line-height:1.8;color:#5b6266}
  .roof-gallery-intro>.text-link{margin-top:13px;font-size:14px;color:#292d30}
  .roof-gallery{min-width:0;overflow:hidden;border:1px solid #d9dfdc;border-radius:16px;background:#fff;box-shadow:0 18px 55px #17191b06}
  .roof-gallery-toolbar{display:flex;align-items:center;gap:20px;padding:8px;background:#ffffffef;border-bottom:1px solid #dfe4e1}
  .roof-gallery-tabs{display:flex;gap:5px;min-width:0;flex:1;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#aab2ae transparent;padding:3px;scroll-padding-inline:3px;overscroll-behavior-x:contain}
  .roof-gallery-tab{display:inline-flex;flex:none;align-items:center;gap:9px;min-height:48px;padding:12px 14px;border:1px solid transparent;border-radius:7px;background:transparent;color:#4e575b;text-decoration:none;font-size:14px;font-weight:600;line-height:1.45;white-space:nowrap}
  .roof-gallery-tab-index{font-family:var(--font-display);font-size:10px;letter-spacing:.02em;font-weight:500;color:#7c8589}
  .roof-gallery-tab:hover{background:#f2f4f3;color:#17191b}
  .roof-gallery-tab[aria-selected=true]{border-color:#1c2023;background:#1c2023;color:#fff;box-shadow:0 3px 7px #17191b0c}
  .roof-gallery-tab[aria-selected=true] .roof-gallery-tab-index{color:#d8dde0}
  .roof-gallery-tab:focus-visible{outline:2px solid #9c3843;outline-offset:1px}
  .roof-gallery-count{display:none;flex:none;font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.04em;color:#22282c;white-space:nowrap}
  .roof-gallery-count>span{color:#778287;margin-left:8px}
  .roof-gallery-panel{min-width:0;scroll-margin-top:125px}
  .roof-gallery-panel+.roof-gallery-panel{border-top:1px solid #d9dfdc}
  .roof-gallery[data-ready=true] .roof-gallery-panel{border-top:0}
  .roof-gallery-panel:focus-visible{outline:3px solid #9c3843;outline-offset:-3px}
  .roof-gallery-figure{margin:0}
  .roof-gallery-image{position:relative;aspect-ratio:3/2;overflow:hidden;background:#ecefeb;border-bottom:1px solid #dfe4e1}
  .roof-gallery-image>img{display:block;position:absolute;inset:0;width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center;filter:none;transform:none}
  .roof-gallery-details{display:grid;gap:22px;padding:25px 22px 24px;background:#fff}
  .roof-gallery-story{min-width:0}
  .roof-gallery-material{display:flex;gap:9px;align-items:center;font-family:var(--font-body);font-size:10px;font-weight:600;line-height:1.7;letter-spacing:.08em;text-transform:uppercase;color:#626f75}
  .roof-gallery-material>span{font-family:var(--font-display);color:#9c3843;font-weight:500}
  .roof-gallery-story h3{font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.35;min-height:2.7em;margin-top:10px;letter-spacing:-.035em;color:#17191b}
  .roof-gallery-story>p{font-size:15px;line-height:1.8;color:#5a6469;max-width:650px;min-height:10.8em;margin-top:11px}
  .roof-gallery-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
  .roof-gallery-expand{display:flex;justify-content:space-between;align-items:center;gap:28px;min-height:50px;width:100%;padding:13px 16px;border:1px solid #c7cfcb;border-radius:7px;background:#fff;color:#242c31;text-decoration:none;font-size:14px;font-weight:600;line-height:1.6}
  .roof-gallery-expand>.icon{width:18px;height:18px;color:#687378}
  .roof-gallery-expand:hover{background:#f5f7f5;border-color:#8f9d95;color:#17191b}
  .roof-gallery-expand:focus-visible{outline:3px solid #9c3843;outline-offset:4px}
  .roof-gallery-credit{max-width:300px;font-size:11px;line-height:1.7;color:#6b757a}
  .roof-gallery-credit>a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration-color:#b3bcb7;text-underline-offset:3px}
  .roof-gallery-credit>a:hover{color:#17191b;text-decoration-color:#17191b}
  .roof-gallery-note{font-size:12px;line-height:1.8;max-width:740px;margin-top:20px;color:#657178}
  @supports(backdrop-filter:blur(12px)){
    .roof-gallery-toolbar{background:#ffffffdd;backdrop-filter:blur(12px)}
  }
  @media(min-width:380px){
    .roof-gallery-story>p{min-height:9em}
  }
  @media(min-width:600px){
    .roof-gallery-toolbar{padding:10px 16px 10px 10px}
    .roof-gallery-tab{padding-inline:16px}
    .roof-gallery-details{padding:30px;gap:25px}
    .roof-gallery-actions{flex-direction:row;align-items:center;gap:22px}
    .roof-gallery-expand{width:auto;min-width:220px;flex:none}
    .roof-gallery-story h3{min-height:1.35em}
    .roof-gallery-story>p{min-height:5.4em}
  }
  @media(min-width:760px){
    .roof-gallery-heading{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);align-items:end;gap:40px;margin-bottom:36px}
    .roof-gallery-intro{padding-bottom:2px}
    .roof-gallery-count{display:block;padding-right:8px}
    .roof-gallery-image{aspect-ratio:16/9}
    .roof-gallery-details{grid-template-columns:minmax(0,1fr) minmax(220px,.36fr);gap:40px;padding:32px}
    .roof-gallery-story h3{min-height:2.7em}
    .roof-gallery-story>p{min-height:135px}
    .roof-gallery-actions{flex-direction:column;align-items:stretch;justify-content:center;gap:8px}
    .roof-gallery-credit{font-size:11px}
  }
  @media(min-width:1100px){
    .roof-gallery-heading{grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:90px;margin-bottom:41px}
    .roof-gallery-intro>p{font-size:17px}
    .roof-gallery-toolbar{padding:12px 24px 12px 12px}
    .roof-gallery-tab{min-height:50px;padding-inline:23px;gap:13px}
    .roof-gallery-details{grid-template-columns:minmax(0,1fr) 245px;gap:64px;padding:34px 40px 32px}
    .roof-gallery-story h3{min-height:1.35em}
    .roof-gallery-story>p{font-size:16px;min-height:86px}
    .roof-gallery-note{margin-top:23px}
  }
  @media(prefers-reduced-motion:no-preference){
    .roof-gallery-tab,.roof-gallery-expand{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
    .roof-gallery[data-ready=true] .roof-gallery-panel:not([hidden]) .roof-gallery-details{animation:roof-gallery-detail-enter .22s ease-out both}
    @keyframes roof-gallery-detail-enter{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:none}}
  }
  @media(prefers-reduced-motion:reduce){
    .roof-gallery *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  }
  @media print{
    .roof-gallery-toolbar{display:none}
    .roof-gallery-panel[hidden]{display:block!important}
    .roof-gallery-expand{display:none}
    .roof-gallery-panel{break-inside:avoid}
  }
}

/* Architectural structure in the interface; original colors in the photographs. */
@layer precision {
  :root { --precision-dark: #111416; --precision-panel: #1b1f22; --precision-line: #ffffff24; }
  .site-header { background: #fffffff2; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .site-header.is-scrolled { border-bottom-color: #cbd0d1; }
  .button { border-radius: 6px; }
  .button:not(.button-outline):not(.button-ghost):not(.button-white) { box-shadow: inset 0 1px 0 #ffffff24; }
  .eyebrow { font-variant-numeric: tabular-nums; }
  .section-heading > div { min-width: 0; }

  /* A quiet architectural grid sits behind the content, never over the photo. */
  .showcase-hero { position: relative; isolation: isolate; overflow: hidden; color: #f9faf9; background: var(--precision-dark); padding-top: 34px; }
  .showcase-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; }
  .showcase-hero::before { background: radial-gradient(ellipse at 0 0, #9c38431a, transparent 55%), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: auto, 110px 100%; }
  .showcase-copy > .eyebrow { color: #c9cdd0; letter-spacing: .14em; }
  .showcase-copy > .eyebrow::before { background: #d9818c; }
  .showcase-copy h1 { color: #fff; }
  .showcase-copy h1 span { color: #d5d9d9; }
  .showcase-intro { color: #b9c1c5; }
  .showcase-visual { border: 1px solid #ffffff2b; border-radius: 12px; background: var(--precision-panel); box-shadow: 0 24px 65px #00000024; }
  .photo-viewport-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 49px; padding: 0 15px; background: #202528; border-bottom: 1px solid #ffffff21; }
  .photo-viewport-header > span { display: inline-flex; align-items: center; gap: 8px; color: #d7dddd; font-size: 10px; font-weight: 500; line-height: 1.5; letter-spacing: .06em; }
  .photo-viewport-header > span > .icon { width: 14px; height: 14px; color: #dca4ac; }
  .photo-viewport-header > a { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; gap: 8px; color: #e6eaea; font-size: 10px; line-height: 1.5; text-decoration: none; text-align: right; }
  .photo-viewport-header > a > .icon { width: 14px; height: 14px; }
  .photo-viewport-header > a:hover { color: #f6c6ce; }
  .showcase-image { aspect-ratio: var(--hero-photo-ratio, 3 / 2); background: #242c2a; }
  .showcase-image > img { aspect-ratio: auto; width: 100%; height: auto; object-fit: contain; filter: none; transform: none; }
  .showcase-image .showcase-enlarge { border: 1px solid #ffffff66; background: #111416ed; box-shadow: 0 3px 15px #00000024; }
  .showcase-caption { padding: 23px 22px; background: #1b2023; border-top: 1px solid #ffffff24; }
  .showcase-caption-label { color: #b3bfc4; }
  .showcase-caption p { font-size: clamp(1.1rem, 5vw, 1.8rem); }
  .baseline-stamp { color: #fff; border-left-color: #ffffff2b; }
  .baseline-stamp > span:last-child { color: #ecc0c7; }
  .showcase-actions .button { border-color: #b9515d; background: #9c3843; color: #fff; }
  .showcase-actions .button:hover { background: #b34652; border-color: #d07983; }
  .showcase-actions .button-outline { background: #ffffff04; border-color: #687177; color: #eff2f2; }
  .showcase-actions .button-outline:hover { background: #ffffff0c; border-color: #a0a9ad; color: #fff; }
  .showcase-online { color: #e1c7cc; text-decoration-color: #93656e; }
  .showcase-online:hover { color: #fff; }
  .showcase-assurance { color: #c0c9cd; }
  .showcase-assurance .icon { color: #d19ca6; }
  .hero-bottom-line { border-color: #ffffff21; color: #aebbc1; }
  .hero-bottom-line > a { color: #e7ebec; }
  .showcase-hero :is(a, button):focus-visible { outline-color: #f3b9c3; }

  .standards-rail { background: #f4f5f3; border-color: #dce0dc; }
  .rail-item > .icon { padding: 9px; width: 42px; height: 42px; flex: none; border: 1px solid #dce1dd; border-radius: 10px; background: #fff; }
  .rail-item h2 { letter-spacing: -.015em; }
  .intent-grid { border-radius: 10px; border-color: #d3dad7; box-shadow: 0 9px 25px #11141603; }
  .intent-card { position: relative; }
  .intent-card::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; }
  .intent-card:hover::after, .intent-card:focus-visible::after { transform: scaleX(1); }
  .intent-card:hover { background: #f7f8f6; }
  .intent-card-top > .icon { color: #9c3843; }
  .intent-card-top > span { font-variant-numeric: tabular-nums; }

  .roof-gallery { border-radius: 10px; border-color: #cbd5cf; }
  .roof-gallery-heading { scroll-margin-top: 110px; }
  .roof-gallery-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .roof-gallery-tab { min-width: 0; min-height: 64px; padding: 8px 5px; flex-direction: column; justify-content: center; gap: 4px; font-size: 12px; text-align: center; white-space: normal; }
  .roof-gallery-tab-index { font-size: 9px; }
  .roof-gallery-story h3 { text-wrap: balance; }

  .promise-section { background: #f2f4f1; }
  .promise-image.inspection-figure { border-radius: 10px; border: 1px solid #d3d9d2; }
  .inspection-figure .inspection-caption { background: #1b2023; }
  .promise-copy h2 > span { color: #596366; }
  .promise-detail-list li > .icon { color: #9c3843; }
  .shingle-card, .shingle-card.shingle-standard { border-radius: 10px; border-color: #cfd6d2; box-shadow: 0 12px 30px #11141605; }
  .shingle-card.shingle-standard { border-top-color: #9c3843; }
  .shingle-card:not(.shingle-standard) { border-top-color: #687278; }
  .shingle-card .shingle-card-header { background: #1b2023; border-bottom: 1px solid #ffffff1c; }
  .shingle-card .shingle-class { color: #fff; font-variant-numeric: tabular-nums; }
  .shingle-card .material-pill { color: #d2dbdf; border-left: 2px solid #919b9f; padding-left: 12px; }
  .shingle-standard .material-pill { color: #f1cbd1; border-left-color: #d9818c; }
  .shingle-facts { border-top-color: #cbd2ce; }
  .shingle-explainer { border-radius: 10px; background: #f3f5f1; }

  .workmanship-section { background: #111719; }
  .process-toolbar { border-top: 1px solid #ffffff24; padding-top: 22px; }
  .process-toolbar-label { letter-spacing: .03em; }
  .process-controls { border-radius: 7px; }
  .process-tab { border-radius: 7px; overflow: hidden; }
  .process-panel { border-color: #ffffff29; border-radius: 10px; background: #1b2326; }
  .process-photo { background: #111719; }
  .process-story { background: #1b2326; }
  .process-step-index { font-variant-numeric: tabular-nums; }
  .service-cards-editorial .photo-service-card { border-radius: 10px; box-shadow: 0 8px 30px #11141604; }
  .service-cards-editorial .service-card-photo { background: #e5e9e3; border-bottom: 1px solid #d3d9d2; }
  .service-cards-editorial .service-card-photo img { filter: none; transform: none; }
  .service-card-kicker { letter-spacing: .025em; }
  .service-cards-editorial .service-card-title > .icon { width: 38px; height: 38px; padding: 10px; border: 1px solid #d7dcd8; border-radius: 50%; }
  .service-cards-editorial .photo-service-card:hover { border-color: #8c9a94; }
  .elevated-claims { background: #171d20; border-block: 1px solid #2e383c; }
  .elevated-claims .claims-list { border-top: 1px solid #ffffff2b; }
  .elevated-claims .claims-list li { border-color: #ffffff2b; }
  .elevated-claims .claims-list .step-number { border: 1px solid #ffffff38; border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 11px; }
  .elevated-claims .claims-intro > .button { border-radius: 6px; }
  .review-card { border-radius: 10px; border-top: 3px solid #c9d1cb; }
  .review-author { border-color: #dbe0da; }
  .review-invite { border-radius: 10px; }
  .faq-list details { transition: background .2s ease; }
  .faq-list details[open] { background: #f5f7f3; }
  .faq-list summary { padding-inline: 16px; }
  .faq-list details p { padding-left: 16px; }
  .contact-footer { background: #111719; }
  .contact-form { border-radius: 12px; box-shadow: 0 0 0 7px #ffffff04, 0 20px 50px #00000020; }
  .contact-form .form-heading-row { padding-bottom: 18px; border-bottom: 1px solid #dce1db; }
  .contact-form .form-field :is(input, select, textarea) { border-radius: 6px; }
  .photography-note > p { max-width: 960px; }
  .photography-credits { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 0 24px; max-width: 1050px; list-style: none; }
  .photography-credits a, .photography-credits li > span { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; line-height: 1.7; color: #becbd1; text-decoration-color: #6d7d85; }
  .photography-credits a:hover { color: #fff; }

  /* Service-page photography keeps its native ratio and the whole roof. */
  .page-hero { background: #f1f4f0; border-bottom: 1px solid #d9dfd9; }
  .page-hero-image, .page-hero-art { border-radius: 10px; }
  .page-hero-image.roof-overview { background: #e7ece5; border: 1px solid #cfd7cf; box-shadow: 0 16px 35px #11141609; }
  .page-hero-image.roof-overview > img { aspect-ratio: auto; width: 100%; height: auto; object-fit: contain; filter: none; }
  .page-hero-image.roof-overview.has-credit figcaption { position: static; background: #fafcf8; padding: 12px 16px; font-size: 11px; line-height: 1.7; color: #54625d; }
  .callout { border-radius: 8px; }
  .related-link { border-radius: 8px; }

  @media (max-width: 359px) {
    .photo-viewport-header { padding-inline: 10px; gap: 8px; }
    .photo-viewport-header > span, .photo-viewport-header > a { font-size: 9px; }
    .photo-viewport-header > span { gap: 5px; }
    .showcase-caption { padding: 20px 17px; }
  }
  @media (min-width: 540px) {
    .showcase-hero { padding-top: 42px; }
    .photo-viewport-header { padding-inline: 20px; }
    .photo-viewport-header > span, .photo-viewport-header > a { font-size: 11px; }
    .showcase-caption { padding: 26px 27px; }
  }
  @media (min-width: 760px) {
    .showcase-hero { padding-top: 48px; }
    .showcase-visual { border-radius: 14px; }
    .showcase-caption { padding: 27px 30px; }
    .intent-card::after { left: 26px; right: 26px; }
    .rail-item { align-items: flex-start; }
    .rail-item > .icon { margin-top: 2px; }
    .process-thumbnails { gap: 13px; }
    .roof-gallery-tabs { display: flex; gap: 5px; }
    .roof-gallery-tab { flex-direction: row; min-height: 50px; padding: 12px 18px; gap: 10px; font-size: 14px; white-space: nowrap; }
    .roof-gallery-tab-index { font-size: 10px; }
  }
  @media (min-width: 1000px) {
    .showcase-hero { padding-top: 56px; }
    .showcase-grid { column-gap: 42px; row-gap: 26px; }
    .showcase-caption { padding: 24px 26px; }
    .showcase-caption p { font-size: 25px; }
    .photo-viewport-header { min-height: 51px; }
    .hero-bottom-line { margin-top: 32px; padding-block: 22px; }
    .showcase-copy { padding-top: 0; }
    .intent-card::after { left: 30px; right: 30px; }
  }
  @media (min-width: 1280px) {
    .showcase-hero { padding-top: 64px; }
    .showcase-grid { column-gap: 58px; }
    .showcase-caption { padding: 28px 32px; }
    .showcase-caption p { font-size: 29px; }
    .nav-link[aria-current='page'] { color: #7e2a36; }
    .hero-bottom-line { margin-top: 38px; }
    .rail-item { gap: 16px; }
  }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .intent-card::after { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
    .photo-viewport-header > a > .icon { transition: transform .2s ease; }
    .photo-viewport-header > a:hover > .icon { transform: translateX(3px); }
  }
  @media (prefers-reduced-motion: reduce) { .faq-list details { transition: none; } }
  @media (forced-colors: active) {
    .showcase-visual, .showcase-caption, .photo-viewport-header, .shingle-card .shingle-card-header { border-color: CanvasText; }
    .showcase-copy h1, .showcase-copy h1 span, .showcase-intro, .showcase-online, .hero-bottom-line > a, .shingle-card .shingle-class, .shingle-card .material-pill { color: CanvasText; }
  }
  @media print {
    .showcase-hero, .showcase-caption, .photo-viewport-header, .shingle-card .shingle-card-header { color: #111; background: #fff; }
    .showcase-hero::before { display: none; }
    .showcase-copy h1, .showcase-copy h1 span, .showcase-intro, .showcase-caption p, .showcase-caption-label, .baseline-stamp, .shingle-card .shingle-class, .shingle-card .material-pill { color: #111; }
    .showcase-visual, .contact-form { box-shadow: none; }
    .photo-viewport-header > a, .hero-bottom-line, .showcase-assurance { display: none; }
    .process-story, .process-panel { background: #fff; }
    .process-story h3, .process-story p, .process-checks li { color: #111; }
  }
}

/* Compact navigation and contact controls designed for fingers, zoom and keyboards. */
@layer mobile-navigation {
  .mobile-call-bar { display: none; }

  @media (max-width: 1279px) {
    .header-controls { flex: none; gap: 8px; }
    .header-call, .menu-toggle { width: 46px; height: 46px; min-width: 46px; min-height: 46px; border-radius: 10px; }
    .header-call { background: #f8eff1; border: 1px solid #e7d9dc; color: #8c3341; }
    .menu-toggle { border: 1px solid #dfe0dc; background: #fff; color: #17191b; }
    .menu-toggle[aria-expanded="true"] { background: #17191b; color: #fff; border-color: #17191b; }
    .header-controls .icon { width: 21px; height: 21px; stroke-width: 1.7; }
    .main-nav {
      position: absolute;
      inset: calc(100% + 9px) 0 auto;
      width: auto;
      max-width: 100%;
      max-height: calc(100vh - 150px);
      max-height: min(720px, var(--nav-available-height, calc(100svh - 150px)));
      overflow: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      padding: 8px 18px max(18px, env(safe-area-inset-bottom));
      border: 1px solid #dedfdb;
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 20px 56px #17191b22;
      scrollbar-width: thin;
      scrollbar-color: #c7b6b9 transparent;
    }
    .nav-list { padding: 0; gap: 0; }
    .nav-list > li { min-width: 0; border-color: #ecece8; }
    .nav-link, .nav-disclosure > summary {
      min-height: 60px;
      padding: 16px 4px;
      gap: 18px;
      color: #202427;
      font-family: var(--font-body, inherit);
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      letter-spacing: -.015em;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .nav-link[aria-current="page"], .nav-disclosure.is-active > summary { color: #9c3843; font-weight: 650; }
    .nav-disclosure > summary .icon { width: 16px; height: 16px; flex: none; }
    .nav-list > li:last-child .nav-link { min-height: 52px; margin-top: 14px; padding: 13px 17px; border-radius: 8px; font-size: 16px; }
    .dropdown { padding: 0 0 12px 12px; border-radius: 0; }
    .dropdown a {
      display: flex;
      align-items: center;
      min-height: 48px;
      padding: 11px 14px;
      margin-block: 2px;
      border-radius: 7px;
      font-family: var(--font-body, inherit);
      font-size: 14px;
      line-height: 1.6;
      color: #5a6063;
      overflow-wrap: anywhere;
    }
    .dropdown a:hover, .dropdown a[aria-current="page"] { background: #f8f1f2; color: #85303c; text-decoration: none; }
    .main-nav :focus-visible { outline: 2px solid #9c3843; outline-offset: -2px; border-radius: 5px; }
    .nav-open, .nav-open body { overflow: hidden; }
    .nav-open body::after { content: ""; position: fixed; inset: 0; z-index: 90; background: #11182045; }
    html:not(.js) .main-nav { position: static; width: 100%; max-width: none; max-height: none; overflow: visible; padding: 0 0 12px; border: 0; border-radius: 0; box-shadow: none; }
    html:not(.js) .menu-toggle { display: none; }
    @media (min-width: 640px) {
      .main-nav { left: auto; right: 0; width: 430px; }
    }
    @media (prefers-reduced-motion: no-preference) {
      .js .main-nav.is-open { animation: navigation-enter .2s cubic-bezier(.22, 1, .36, 1); }
      .nav-open body::after { animation: navigation-shade .2s ease; }
    }
  }

  @media (max-width: 767px) {
    body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
    html { scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
    .mobile-call-bar {
      position: fixed;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
      align-items: stretch;
      gap: 9px;
      inset: auto 0 0;
      z-index: 80;
      padding: 11px max(12px, env(safe-area-inset-right)) calc(11px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
      border-top: 1px solid #dfe0dc;
      border-radius: 0;
      background: #fffffff5;
      box-shadow: 0 -6px 26px #17191b0b;
      opacity: 1;
      visibility: visible;
    }
    .mobile-call-bar .button { min-width: 0; min-height: 52px; padding: 12px 10px; border-radius: 8px; font-size: 14px; font-weight: 600; letter-spacing: -.02em; line-height: 1.4; gap: 7px; white-space: nowrap; }
    .mobile-call-bar .icon { width: 17px; height: 17px; }
    .quick-contact-hidden .mobile-call-bar { opacity: 0; visibility: hidden; pointer-events: none; translate: 0 12px; }
    body:has(.direct-inquiry-form:focus-within) .mobile-call-bar { opacity: 0; visibility: hidden; pointer-events: none; }
    @media (max-width: 389px) {
      .mobile-call-bar .button:first-child .icon { display: none; }
      .mobile-call-bar { gap: 8px; }
      .mobile-call-bar .button { padding-inline: 9px; }
    }
    @media (prefers-reduced-motion: no-preference) {
      .mobile-call-bar { transition: opacity .16s ease, translate .2s ease; }
    }
  }
  @keyframes navigation-enter { from { opacity: .6; translate: 0 -5px; } to { opacity: 1; translate: 0 0; } }
  @keyframes navigation-shade { from { opacity: 0; } to { opacity: 1; } }
  @media print {
    .nav-open, .nav-open body { overflow: visible; }
    .nav-open body::after, .mobile-call-bar { display: none !important; }
    body { padding-bottom: 0; }
  }
}

/* Restrained movement, layered after the visual design. */
@layer motion {
  :root{--motion-ease:cubic-bezier(.22,1,.36,1)}
  .page-progress{position:absolute;inset:auto 0 -1px;height:2px;overflow:hidden;pointer-events:none;opacity:0;z-index:2;background:transparent}
  .page-progress>span{display:block;width:100%;height:100%;background:var(--brand,#9c3843);transform:scaleX(0);transform-origin:left center}
  .scroll-progress-ready .page-progress{opacity:1}
  .site-header{transition:background .25s ease,box-shadow .3s ease}
  .site-header.is-scrolled{box-shadow:0 8px 25px #1516170b}

  @media(prefers-reduced-motion:no-preference){
    .motion-enabled .reveal-pending{opacity:0;translate:0 20px;transition:opacity .65s var(--motion-ease) var(--reveal-delay,0ms),translate .65s var(--motion-ease) var(--reveal-delay,0ms),transform .25s ease,border-color .25s ease,box-shadow .25s ease}
    .motion-enabled .reveal-pending.is-revealed{opacity:1;translate:0 0}
    .process-viewer[data-ready=true] .process-panel:not([hidden]){animation:roof-stage-enter .36s var(--motion-ease) both}
    .process-viewer[data-ready=true] .process-panel:not([hidden]) .process-story{animation:roof-story-enter .42s var(--motion-ease) both}
    .process-progress::before{transition:width .4s var(--motion-ease)}
    .faq-list details[open]>p{animation:answer-enter .26s var(--motion-ease)}
    .button .icon,.text-link .icon,.online-request-link .icon,.service-foot .icon,.intent-card .icon{transition:transform .25s var(--motion-ease)}
    .intent-card,.related-link{transition:border-color .25s ease,box-shadow .25s ease,transform .25s var(--motion-ease)}
    .photo-dialog[open]{animation:dialog-enter .2s var(--motion-ease)}
    .photo-dialog[open]::backdrop{animation:backdrop-enter .2s ease}
    .form-extra[open]>.form-grid{animation:answer-enter .24s var(--motion-ease)}
  }
  @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
    .button:hover .icon,.text-link:hover .icon,.online-request-link:hover .icon,.service-card:hover .service-foot .icon{transform:translateX(3px)}
    .related-link:hover{transform:translateY(-3px)}
    .intent-card:hover .intent-action .icon{transform:translateX(3px)}
  }
  @keyframes roof-stage-enter{from{opacity:.45;translate:0 6px}to{opacity:1;translate:0 0}}
  @keyframes roof-story-enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
  @keyframes answer-enter{from{opacity:.3;translate:0 4px}to{opacity:1;translate:0 0}}
  @keyframes dialog-enter{from{opacity:.5;translate:0 6px}to{opacity:1;translate:0 0}}
  @keyframes backdrop-enter{from{opacity:0}to{opacity:1}}

  /* Keyboard focus and native anchors always reveal their destination. */
  .motion-enabled .reveal-pending:focus-within,.motion-enabled .reveal-pending:target{opacity:1;translate:none;transition:none}
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .page-progress{display:none}
    .reveal-pending,.is-revealed{opacity:1!important;translate:none!important;transform:none!important;transition:none!important}
    .site-header,.button,.button .icon,.text-link .icon,.online-request-link .icon,.service-foot .icon,.intent-card,.intent-card .icon,.related-link,.photo-dialog,.photo-dialog::backdrop,.faq-list details>p,.form-extra>.form-grid,.process-story{animation:none!important;transition:none!important}
  }
  @media print{
    .reveal-pending,.is-revealed{opacity:1!important;translate:none!important;transform:none!important;animation:none!important;transition:none!important}
    .page-progress{display:none!important}
    .process-story,.faq-list details>p{animation:none!important}
  }
}

/* A same-house comparison with a complete, readable no-script fallback. */
@layer reroof {
  .reroof-section { background: #fff; scroll-margin-top: 120px; }
  .reroof-heading { display: grid; gap: 22px; margin-bottom: 28px; }
  .reroof-heading h2 { max-width: 14ch; margin-top: 17px; font-size: clamp(2rem, 5.1vw, 4rem); line-height: 1.12; letter-spacing: -.045em; }
  .reroof-heading h2:focus { outline: none; }
  .reroof-intro { max-width: 430px; }
  .reroof-intro p { margin: 0; color: #5c6369; font-size: 15px; line-height: 1.8; }
  .reroof-intro .reroof-intro-lead { margin-bottom: 9px; font-size: 17px; font-weight: 600; color: #202427; }
  .reroof-viewer { min-width: 0; overflow: hidden; border: 1px solid #d6dcd7; border-radius: 12px; background: #f2f3ef; box-shadow: 0 14px 40px #161d1908; }
  .reroof-viewer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px 16px; min-height: 52px; padding: 14px 16px; background: #111719; color: #eef0ed; }
  .reroof-viewer-top > span:first-child { font-size: 12px; font-weight: 550; line-height: 1.6; }
  .reroof-drag-hint { display: inline-flex; align-items: center; gap: 9px; color: #e9bdc5; font-size: 11px; line-height: 1.6; }
  .reroof-drag-hint svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .reroof-loading-hint { color: #c5cdd0; font-size: 11px; line-height: 1.6; }
  .reroof-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; isolation: isolate; background: #c9cfca; }
  .reroof-shot { min-width: 0; margin: 0; background: #f2f3ef; }
  .reroof-shot img { display: block; width: 100%; height: auto; aspect-ratio: var(--reroof-ratio, 3 / 2); object-fit: contain; filter: none; transform: none; }
  .reroof-shot figcaption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; padding: 14px 16px; color: #525c61; background: #f6f7f3; font-size: 12px; line-height: 1.7; }
  .reroof-shot figcaption span:first-child { color: #1b2023; font-size: 14px; font-weight: 650; }
  .reroof-image-error { display: grid; place-items: center; min-height: 180px; margin: 0; padding: 28px; color: #4d5559; font-size: 14px; line-height: 1.8; text-align: center; }

  /* The initialized loading state reserves the final image and toolbar space.
     Both images still load; only the first view is presented until both succeed. */
  .reroof-section.is-loading .reroof-stage { display: block; aspect-ratio: var(--reroof-ratio, 3 / 2); gap: 0; overflow: hidden; }
  .reroof-section.is-loading .reroof-shot { position: absolute; inset: 0; overflow: hidden; }
  .reroof-section.is-loading .reroof-shot img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
  .reroof-section.is-loading .reroof-shot--before { z-index: 1; }
  .reroof-section.is-loading .reroof-shot--after { opacity: 0; pointer-events: none; }
  .reroof-section.is-loading .reroof-shot--before figcaption { position: absolute; inset: auto 0 0; padding-block: 10px; color: #fff; background: #111719e6; }
  .reroof-section.is-loading .reroof-shot--before figcaption span { color: inherit; }
  .reroof-section.is-loading .reroof-comparison-toolbar[hidden] { display: flex; visibility: hidden; }

  /* Both complete photos occupy the same bounds. Only the front clip moves. */
  .reroof-section.is-enhanced .reroof-stage { display: block; aspect-ratio: var(--reroof-ratio, 3 / 2); gap: 0; overflow: hidden; }
  .reroof-section.is-enhanced .reroof-shot { position: absolute; inset: 0; overflow: hidden; }
  .reroof-section.is-enhanced .reroof-shot img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
  .reroof-section.is-enhanced .reroof-shot--after { z-index: 1; }
  .reroof-section.is-enhanced .reroof-shot--before { z-index: 2; clip-path: inset(0 calc(100% - var(--reroof-split)) 0 0); }
  .reroof-section.is-enhanced .reroof-shot figcaption { display: none; }
  .reroof-range-layer { position: absolute; inset: 0; z-index: 3; }
  .reroof-state { position: absolute; z-index: 2; top: 12px; display: inline-flex; align-items: center; min-height: 34px; padding: 7px 11px; border: 1px solid #ffffff60; border-radius: 5px; color: #fff; background: #111719eb; box-shadow: 0 2px 10px #00000014; font-size: 11px; font-weight: 600; line-height: 1.5; pointer-events: none; }
  .reroof-state--before { left: 12px; }
  .reroof-state--after { right: 12px; }
  .reroof-viewer[data-state='before'] .reroof-state--after, .reroof-viewer[data-state='after'] .reroof-state--before { visibility: hidden; }
  .reroof-divider { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--reroof-split); width: 2px; background: #fff; box-shadow: 0 0 0 1px #11171924, 0 0 12px #11171924; transform: translateX(-50%); pointer-events: none; }
  .reroof-grip { position: absolute; top: 50%; left: 50%; display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #9c3843; box-shadow: 0 3px 14px #11171930; transform: translate(-50%, -50%); }
  .reroof-grip svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  /* The extra thumb width makes native thumb travel align with image edges. */
  .reroof-range { position: absolute; z-index: 3; top: 0; left: -24px; display: block; width: calc(100% + 48px); max-width: none; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; appearance: none; -webkit-appearance: none; cursor: ew-resize; touch-action: pan-y; }
  .reroof-range::-webkit-slider-runnable-track { height: 100%; border: 0; background: transparent; }
  .reroof-range::-moz-range-track { height: 100%; border: 0; background: transparent; }
  .reroof-range::-moz-range-progress { height: 100%; border: 0; background: transparent; }
  .reroof-range::-webkit-slider-thumb { width: 48px; height: 48px; margin-top: calc((var(--reroof-input-height, 200px) - 48px) / 2); border: 0; border-radius: 50%; background: transparent; appearance: none; -webkit-appearance: none; }
  .reroof-range::-moz-range-thumb { width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; }
  .reroof-range:focus-visible { outline: none; }
  .reroof-range-layer:focus-within { outline: 3px solid #fff; outline-offset: -5px; box-shadow: inset 0 0 0 7px #9c3843; }
  .reroof-range-layer:focus-within .reroof-grip { box-shadow: 0 0 0 4px #111719, 0 0 0 7px #fff; }
  .reroof-comparison-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 13px 22px; padding: 16px; border-top: 1px solid #d8ddd6; background: #f6f7f3; }
  .reroof-comparison-toolbar p { flex: 1 1 190px; margin: 0; color: #535d63; font-size: 12px; line-height: 1.8; }
  .reroof-view-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex: 1 1 260px; gap: 3px; max-width: 340px; padding: 4px; border: 1px solid #cdd5ce; border-radius: 8px; background: #fff; }
  .reroof-view-buttons button { min-width: 0; min-height: 44px; margin: 0; padding: 10px 13px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #39454a; font: 600 12px/1.5 var(--font-body, sans-serif); cursor: pointer; }
  .reroof-view-buttons button:hover { background: #f7eef0; color: #7c2934; }
  .reroof-view-buttons button[aria-pressed='true'] { color: #fff; background: #9c3843; }
  .reroof-view-buttons button:focus-visible { position: relative; z-index: 1; outline: 2px solid #9c3843; outline-offset: 2px; }
  .reroof-caption { max-width: 900px; margin: 14px 0 0; color: #60696c; font-size: 12px; line-height: 1.8; }
  .reroof-caption strong { font-weight: 550; color: #485359; }
  .reroof-feedback { margin: 12px 0 0; color: #6f2631; font-size: 13px; line-height: 1.8; }
  .reroof-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 29px 0 0; padding: 0; list-style: none; border-block: 1px solid #dce1db; }
  .reroof-details li { display: flex; align-items: flex-start; gap: 17px; padding: 22px 0; }
  .reroof-details li + li { border-top: 1px solid #dce1db; }
  .reroof-detail-number { flex: none; padding-top: 2px; color: #9c3843; font-family: var(--font-display, sans-serif); font-size: 11px; line-height: 1.8; font-variant-numeric: tabular-nums; }
  .reroof-details h3 { margin: 0; color: #1d2528; font-family: var(--font-body, sans-serif); font-size: 16px; line-height: 1.6; letter-spacing: -.015em; font-weight: 650; }
  .reroof-details p { margin: 5px 0 0; color: #5d676b; font-size: 13px; line-height: 1.8; }
  .reroof-next-step { display: flex; flex-wrap: wrap; align-items: center; gap: 15px 29px; margin-top: 25px; }
  .reroof-next-step .button { width: 100%; justify-content: space-between; }
  .reroof-next-step .text-link { max-width: 100%; }
  .reroof-section [hidden] { display: none; }

  @media (min-width: 540px) {
    .reroof-viewer-top, .reroof-comparison-toolbar { padding-inline: 22px; }
    .reroof-viewer-top > span:first-child { font-size: 13px; }
    .reroof-drag-hint { font-size: 12px; }
    .reroof-state { top: 18px; min-height: 38px; padding: 8px 14px; font-size: 12px; }
    .reroof-state--before { left: 18px; }
    .reroof-state--after { right: 18px; }
    .reroof-next-step .button { width: auto; min-width: 220px; }
  }
  @media (min-width: 760px) {
    .reroof-heading { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 45px; margin-bottom: 37px; }
    .reroof-intro { justify-self: end; padding-bottom: 3px; }
    .reroof-intro p { font-size: 16px; }
    .reroof-intro .reroof-intro-lead { font-size: 19px; }
    .reroof-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reroof-viewer { border-radius: 14px; }
    .reroof-details { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 35px; }
    .reroof-details li { gap: 14px; padding: 26px 23px; }
    .reroof-details li:first-child { padding-left: 0; }
    .reroof-details li:last-child { padding-right: 0; }
    .reroof-details li + li { border-top: 0; border-left: 1px solid #dce1db; }
    .reroof-details h3 { font-size: 15px; }
  }
  @media (min-width: 1100px) {
    .reroof-viewer-top { min-height: 56px; padding-inline: 27px; }
    .reroof-comparison-toolbar { padding: 18px 27px; }
    .reroof-comparison-toolbar p { font-size: 13px; }
    .reroof-details li { padding-block: 29px; gap: 20px; }
    .reroof-details h3 { font-size: 17px; }
    .reroof-details p { font-size: 14px; }
    .reroof-next-step { margin-top: 29px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .reroof-section *, .reroof-section *::before, .reroof-section *::after { animation: none !important; transition: none !important; }
  }
  @media (forced-colors: active) {
    .reroof-viewer, .reroof-state, .reroof-grip, .reroof-view-buttons, .reroof-view-buttons button, .reroof-details, .reroof-details li { border-color: CanvasText; }
    .reroof-viewer-top, .reroof-state, .reroof-grip { color: CanvasText; background: Canvas; }
    .reroof-divider { background: CanvasText; box-shadow: none; }
    .reroof-view-buttons button[aria-pressed='true'] { color: HighlightText; background: Highlight; border-color: Highlight; }
    .reroof-range-layer:focus-within { outline-color: Highlight; box-shadow: none; }
    .reroof-range-layer:focus-within .reroof-grip { outline: 3px solid Highlight; outline-offset: 3px; box-shadow: none; }
    .reroof-range { forced-color-adjust: none; }
  }
  @media print {
    .reroof-viewer { box-shadow: none; }
    .reroof-section:is(.is-enhanced, .is-loading) .reroof-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); aspect-ratio: auto; gap: 1px; overflow: visible; }
    .reroof-section:is(.is-enhanced, .is-loading) .reroof-shot { position: static; clip-path: none; opacity: 1; }
    .reroof-section:is(.is-enhanced, .is-loading) .reroof-shot img { height: auto; }
    .reroof-section:is(.is-enhanced, .is-loading) .reroof-shot figcaption { position: static; display: flex; color: #111; background: #fff; }
    .reroof-range-layer, .reroof-comparison-toolbar, .reroof-drag-hint, .reroof-loading-hint, .reroof-next-step { display: none !important; }
    .reroof-viewer-top { color: #111; background: #fff; }
  }
}

/* A clearer path from first impression to reroof, installation, and inspection. */
@layer home-refresh {
  .showcase-hero { background: #111111; }
  .showcase-hero::before {
    background: radial-gradient(ellipse at 0 0, #9c38431a, transparent 58%);
    background-size: auto;
  }
  .showcase-grid { gap: 24px; }
  .showcase-copy > .eyebrow { font-size: 10px; letter-spacing: .1em; }
  .showcase-copy h1 { letter-spacing: -.06em; }
  .showcase-intro { max-width: 47ch; line-height: 1.75; }
  .showcase-conversion { padding-bottom: 3px; }
  .showcase-visual { border-color: #ffffff26; border-radius: 14px; box-shadow: 0 22px 60px #00000024; }
  .photo-viewport-header { background: #191919; }
  .photo-viewport-header > a { color: #f0d9dd; }
  .showcase-caption { background: #191919; }
  .showcase-caption p { font-size: clamp(1.05rem, 4.8vw, 1.65rem); line-height: 1.4; }
  .showcase-actions .button { box-shadow: none; }
  .showcase-actions .button-outline { background: #ffffff04; }
  .hero-bottom-line { align-items: flex-start; padding-block: 22px; gap: 12px; }
  .hero-bottom-line > span { font-size: 11px; letter-spacing: .035em; }
  .hero-section-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; }
  .hero-section-links > a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: #eef0ef; font-size: 12px; line-height: 1.5; text-decoration: none; letter-spacing: 0; }
  .hero-section-links .icon { width: 15px; height: 15px; color: #daa2ab; }
  .hero-section-links > a:hover { color: #ecc4cc; }
  .standards-rail { background: #fafaf8; }
  .rail-item { padding-block: 13px; }
  .rail-item > .icon { width: 38px; height: 38px; border-radius: 50%; background: #fff; }
  .start-section { background: #f5f5f2; border-block: 1px solid #e3e4df; }
  .intent-grid { background: #fff; }
  .promise-section { background: #fff; border-top: 0; }
  .showcase-hero :is(a, button):focus-visible { outline: 3px solid #f1c8d0; outline-offset: 5px; }

  @media (min-width: 540px) {
    .showcase-copy > .eyebrow { font-size: 11px; }
    .hero-bottom-line { align-items: center; }
    .rail-item { padding-block: 22px; }
  }
  @media (min-width: 760px) {
    .showcase-caption p { font-size: 26px; }
    .hero-section-links { gap: 28px; }
    .hero-section-links > a { font-size: 13px; }
  }
  @media (min-width: 1000px) {
    .showcase-grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); column-gap: 40px; row-gap: 25px; }
    .showcase-copy > .eyebrow { font-size: 10px; letter-spacing: .07em; }
    .showcase-copy h1 { font-size: clamp(2.6rem, 4.3vw, 3.75rem); line-height: 1.16; }
    .showcase-intro { max-width: 39ch; font-size: 16px; }
    .showcase-visual { border-radius: 16px; }
    .showcase-caption { padding: 22px 27px; }
    .showcase-caption p { font-size: 23px; }
    .hero-bottom-line { margin-top: 32px; padding-block: 20px; }
  }
  @media (min-width: 1280px) {
    .showcase-grid { column-gap: 52px; }
    .showcase-copy > .eyebrow { font-size: 11px; }
    .showcase-caption { padding: 24px 30px; }
    .showcase-caption p { font-size: 26px; }
  }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .hero-section-links .icon { transition: transform .2s ease; }
    .hero-section-links > a:hover .icon { transform: translateY(3px); }
  }
  @media (forced-colors: active) {
    .showcase-hero, .showcase-caption, .photo-viewport-header { background: Canvas; }
    .hero-section-links > a, .hero-section-links .icon { color: LinkText; }
    .showcase-visual { border-color: CanvasText; }
  }
  @media print {
    .showcase-hero, .showcase-caption, .photo-viewport-header { background: #fff; }
    .showcase-visual { box-shadow: none; }
    .hero-section-links { display: none; }
  }
}