:root {
  --ink: #102d37;
  --ink-soft: #1c4752;
  --paper: #f7f3eb;
  --white: #fffdf8;
  --coral: #ed6d3b;
  --gold: #f6bd54;
  --aqua: #8fd6cf;
  --sand: #ead8bf;
  --muted: #61777a;
  --line: rgba(16, 45, 55, .15);
  --shadow: 0 24px 60px rgba(16, 45, 55, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", Arial, sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }

.skip-link { position: fixed; z-index: 100; left: 16px; top: -80px; padding: 10px 14px; border-radius: 12px; color: var(--white); background: var(--ink); }
.skip-link:focus { top: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.topbar { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 33px; padding: 7px 16px; color: var(--white); background: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-align: center; }
.topbar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(246, 189, 84, .2); }
.topbar-phone { padding-left: 9px; border-left: 1px solid rgba(255, 253, 248, .38); color: var(--gold); white-space: nowrap; }

.site-shell { position: relative; overflow: hidden; background: var(--ink); }
.site-shell::before { content: ""; position: absolute; z-index: 0; width: 420px; height: 420px; top: 230px; right: -235px; border: 1px dashed rgba(237, 109, 59, .55); border-radius: 50%; }

.site-header { position: absolute; z-index: 3; top: 33px; right: 0; left: 0; max-width: 1276px; margin: 0 auto; padding: 22px 24px 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 10px 14px 10px 20px; border: 1px solid rgba(255, 253, 248, .9); border-radius: 999px; background: rgba(255, 253, 248, .88); box-shadow: 0 16px 38px rgba(16, 45, 55, .12); backdrop-filter: blur(13px); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 174px; }
.brand img { width: 47px; height: 42px; object-fit: contain; object-position: left center; }
.brand-copy { display: grid; gap: 2px; }
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.05em; }
.brand-copy small { color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: 14px; font-weight: 800; }
.main-nav a { transition: color .2s ease; }
.main-nav a:hover { color: var(--coral); }
.header-cta, .solid-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 999px; color: var(--white); background: var(--ink); box-shadow: 0 9px 18px rgba(16, 45, 55, .18); font-size: 12px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.header-cta { min-height: 42px; padding: 0 17px; }
.solid-button { min-height: 51px; padding: 0 20px; }
.coral-button { background: var(--coral); box-shadow: 0 14px 24px rgba(237, 109, 59, .3); }
.header-cta:hover, .solid-button:hover { transform: translateY(-2px); box-shadow: 0 14px 25px rgba(16, 45, 55, .22); }
.menu-button { display: none; border: 0; border-radius: 999px; padding: 11px 14px; color: var(--white); background: var(--ink); font-size: 12px; font-weight: 800; }

.hero { position: relative; z-index: 1; isolation: isolate; width: 100%; min-height: 675px; margin: 0; padding: 188px max(24px, calc((100% - 1228px) / 2)) 146px; overflow: hidden; border-radius: 0 0 72px 72px; background: var(--ink); box-shadow: 0 28px 48px rgba(16, 45, 55, .22); }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slides { z-index: 0; }
.hero-slide { opacity: 0; background: center 54% / cover no-repeat; will-change: opacity; transition: opacity 1.6s ease-in-out; }
.hero-slide.is-active { opacity: 1; }
.hero-slide:nth-child(1) { background-image: url('/assets/roof/project-keremidi-panorama.jpg'); }
.hero-slide:nth-child(2) { background-image: url('/assets/roof/project-bilo.jpg'); }
.hero-slide:nth-child(3) { background-image: url('/assets/roof/project-lamarina-sofia.jpg'); }
.hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(8, 34, 42, .90) 0%, rgba(10, 39, 47, .78) 38%, rgba(10, 39, 47, .22) 72%, rgba(10, 39, 47, .07) 100%), linear-gradient(0deg, rgba(8, 34, 42, .38), transparent 48%); }
.hero-copy { position: relative; z-index: 2; max-width: 610px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 3px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 610px; margin: 14px 0 20px; color: var(--white); font-size: clamp(48px, 6.2vw, 82px); font-weight: 700; letter-spacing: -.045em; line-height: .91; }
h1 span { color: var(--gold); }
.hero-lead { max-width: 485px; margin: 0; color: rgba(255, 253, 248, .88); font-size: 16px; line-height: 1.58; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 19px; margin-top: 28px; }
.text-action { display: inline-flex; align-items: center; gap: 9px; color: var(--white); font-size: 12px; font-weight: 800; }
.play-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 253, 248, .55); border-radius: 50%; color: var(--gold); font-size: 11px; }
.hero-proof { display: flex; align-items: center; gap: 13px; margin-top: 35px; color: var(--white); font-size: 12px; font-weight: 700; }
.check-stack { display: flex; }
.check-stack span { display: grid; place-items: center; width: 29px; height: 29px; margin-right: -8px; border: 2px solid var(--paper); border-radius: 50%; color: var(--white); background: var(--ink); font-size: 11px; }
.check-stack span:nth-child(2) { background: var(--coral); }
.check-stack span:nth-child(3) { color: var(--ink); background: var(--aqua); }
.hero-years { position: absolute; z-index: 2; right: clamp(28px, 5vw, 68px); bottom: 49px; display: flex; align-items: center; gap: 9px; padding: 14px 17px; border: 1px solid rgba(255, 253, 248, .65); border-radius: 20px 20px 20px 4px; color: var(--ink); background: var(--gold); box-shadow: 0 14px 27px rgba(8, 34, 42, .2); font-size: 12px; font-weight: 800; line-height: 1.05; }
.hero-years b { font-size: 31px; letter-spacing: -.08em; }

.hero-visual { position: relative; min-height: 455px; }
.hero-orbit { position: absolute; z-index: 0; inset: 22px 8px 5px 28px; border-radius: 54% 46% 41% 59% / 42% 52% 48% 58%; background: linear-gradient(142deg, #89c9c3, #4d777d 49%, var(--ink) 50%); transform: rotate(-3deg); box-shadow: 0 30px 46px rgba(16, 45, 55, .21); }
.roof-photo { position: absolute; z-index: 1; inset: 34px 0 28px 22px; overflow: hidden; clip-path: polygon(50% 0, 100% 35%, 100% 100%, 0 100%, 0 35%); filter: drop-shadow(0 24px 23px rgba(16, 45, 55, .22)); transform: rotate(-3deg); }
.roof-photo img { width: 100%; height: 100%; object-fit: cover; }
.roof-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(150deg, transparent 0 37px, rgba(246, 189, 84, .72) 38px 40px); background-size: auto; mix-blend-mode: screen; opacity: .56; }
.roof-ridge { position: absolute; z-index: 2; width: 83%; height: 7px; left: 8%; top: 34%; border-radius: 9px; background: var(--coral); transform: rotate(-22deg); box-shadow: 0 8px 0 rgba(255, 253, 248, .43), 0 -8px 0 rgba(246, 189, 84, .5); }
.experience-seal { position: absolute; z-index: 3; top: 7px; right: 8px; display: grid; place-items: center; width: 115px; height: 115px; border: 1px dashed var(--coral); border-radius: 50%; color: var(--coral); background: rgba(255, 253, 248, .9); font-size: 13px; font-weight: 800; line-height: 1.1; text-align: center; animation: float-seal 5s ease-in-out infinite; }
.experience-seal b { display: block; font-size: 23px; letter-spacing: -.07em; }
.project-note { position: absolute; z-index: 4; bottom: 21px; left: 0; max-width: 230px; padding: 17px 18px; border-radius: 21px 21px 21px 4px; color: var(--ink); background: var(--white); box-shadow: var(--shadow); font-size: 12px; line-height: 1.42; }
.project-note strong { display: block; margin-bottom: 5px; color: var(--coral); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.quick-quote { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 1.32fr auto; align-items: center; gap: 12px; max-width: 1228px; margin: -58px auto 0; padding: 17px 18px 17px 25px; border-radius: 28px; color: var(--ink); background: var(--white); box-shadow: var(--shadow); }
.quick-quote::before { content: ""; position: absolute; z-index: -1; top: -15px; left: 8%; width: 84px; height: 16px; background: var(--white); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.quick-quote strong { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.025em; }
.quick-quote span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.quick-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-fields input { width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; outline-color: var(--coral); color: var(--ink); background: var(--paper); font-size: 12px; }
.quick-quote button { min-height: 47px; padding: 0 18px; border: 0; border-radius: 14px; color: var(--white); background: var(--ink); font-size: 12px; font-weight: 800; }

.roof-divider { height: 84px; margin-top: 55px; background: var(--ink); clip-path: polygon(0 100%, 0 66%, 10% 66%, 16% 32%, 22% 66%, 38% 66%, 50% 10%, 62% 66%, 77% 66%, 84% 33%, 91% 66%, 100% 66%, 100% 100%); }
.services { position: relative; overflow: hidden; padding: 88px 24px 96px; color: var(--white); background: radial-gradient(circle at 16% 8%, rgba(88, 153, 155, .26), transparent 34%), linear-gradient(126deg, #1a4e59 0%, #0f3944 51%, #092c35 100%); }
.services::before { content: ""; position: absolute; right: -128px; bottom: -116px; width: 610px; height: 412px; opacity: .16; background: url("assets/roof/roof-tile-fragment.png") center / contain no-repeat; filter: grayscale(.35) brightness(1.45) contrast(.78); }
.services::after { content: none; }
.section-head { position: relative; z-index: 1; display: flex; align-items: end; justify-content: space-between; gap: 26px; max-width: 1228px; margin: 0 auto 32px; }
.section-head h2, .content-heading { margin: 10px 0 0; font-size: clamp(35px, 4.8vw, 56px); font-weight: 700; letter-spacing: -.035em; line-height: .96; }
.section-head p { max-width: 275px; margin: 0; color: rgba(255, 253, 248, .7); font-size: 13px; line-height: 1.5; }
.service-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; max-width: 1228px; margin: auto; }
.service-card { position: relative; min-height: 245px; overflow: hidden; border: 1px solid rgba(255, 253, 248, .2); border-radius: 29px; color: var(--ink); background: var(--white); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.service-card:nth-child(2) { background: var(--gold); }
.service-card:nth-child(3) { background: var(--aqua); }
.service-card:nth-child(4) { background: #e9c3a4; }
.service-card:nth-child(5) { background: #f7e8cf; }
.service-card:nth-child(6) { color: var(--white); background: linear-gradient(138deg, #385f68, var(--ink)); }
.service-card-image { height: 103px; overflow: hidden; }
.service-card-image img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.service-card-body { position: relative; padding: 15px 22px 22px; }
.service-card-body::before { content: ""; position: absolute; right: 21px; top: -18px; width: 53px; height: 29px; background: rgba(16, 45, 55, .2); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.service-card:nth-child(6) .service-card-body::before { background: rgba(255, 253, 248, .28); }
.service-number { display: grid; place-items: center; width: 32px; height: 32px; margin-top: -32px; position: relative; z-index: 1; border-radius: 50%; color: var(--white); background: var(--coral); font-size: 10px; font-weight: 800; }
.service-card:nth-child(3) .service-number { background: var(--ink); }
.service-card:nth-child(6) .service-number { color: var(--ink); background: var(--gold); }
.service-card h3 { margin: 14px 0 7px; font-size: 20px; font-weight: 700; letter-spacing: -.018em; line-height: 1.08; }
.service-card p { margin: 0; color: rgba(16, 45, 55, .67); font-size: 12px; line-height: 1.42; }
.service-card:nth-child(6) p { color: rgba(255, 253, 248, .72); }

.about { position: relative; isolation: isolate; width: 100%; overflow: hidden; background: radial-gradient(circle at 16% 8%, rgba(255, 255, 255, .78), transparent 37%), radial-gradient(circle at 96% 22%, rgba(246, 189, 84, .12), transparent 30%), linear-gradient(130deg, #fffdf8, #f4ecdf 58%, #e9dfd1); }
.about-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 7vw, 100px); align-items: center; width: min(100% - 48px, 1228px); margin: 0 auto; padding: 96px 0 58px; }
.about::after { content: ""; position: absolute; right: -128px; bottom: -116px; z-index: 0; width: 590px; height: 398px; opacity: .075; background: url("assets/roof/roof-tile-fragment.png") center / contain no-repeat; filter: grayscale(.55) sepia(.1); pointer-events: none; }
.about-visual, .about-copy { position: relative; z-index: 1; }
.about-visual { position: relative; min-height: 410px; }
.about-visual::before { content: ""; position: absolute; inset: 13px 35px 0 0; border-radius: 46px 94px 42px 90px; background: linear-gradient(130deg, #7fc3bd, #214751 45%, var(--ink) 46%); transform: rotate(-4deg); }
.about-photo { position: absolute; inset: 41px 16px 15px 40px; overflow: hidden; clip-path: polygon(50% 0, 100% 34%, 100% 100%, 0 100%, 0 34%); transform: rotate(-4deg); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(149deg, transparent 0 32px, rgba(246, 189, 84, .54) 33px 35px); background-size: auto; mix-blend-mode: screen; }
.about-sticker { position: absolute; z-index: 2; top: 21px; right: 0; display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50% 50% 50% 5px; color: var(--ink); background: var(--gold); box-shadow: 0 15px 27px rgba(16, 45, 55, .17); font-size: 13px; font-weight: 800; line-height: 1.12; text-align: center; transform: rotate(9deg); }
.about-copy .content-heading { margin-bottom: 18px; }
.about-copy > p { margin-bottom: 20px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.about-points { display: grid; gap: 14px; margin: 28px 0; }
.about-point { display: grid; grid-template-columns: 35px 1fr; gap: 12px; align-items: start; }
.point-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: var(--coral); background: #ffe6da; font-size: 16px; }
.about-point h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.about-point p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.outline-link { display: inline-flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 999px; color: var(--ink); background: #dcefeb; font-size: 12px; font-weight: 800; }

.numbers { padding: 0 24px 104px; background: radial-gradient(circle at 10% 0, rgba(255, 255, 255, .58), transparent 34%), linear-gradient(130deg, #fffdf8, #f4ecdf 58%, #e9dfd1); }
.numbers-inner { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1228px; margin: auto; overflow: hidden; border-radius: 30px; color: var(--white); background: radial-gradient(circle at 12% 8%, rgba(95, 166, 164, .17), transparent 33%), radial-gradient(circle at 88% 15%, rgba(143, 214, 207, .2), transparent 30%), linear-gradient(124deg, #245f6a, #103b47 57%, #0c2e38); }
.numbers-inner::after { content: none; }
.number-item { position: relative; z-index: 1; padding: 31px 28px; border-right: 1px solid rgba(255, 253, 248, .18); }
.number-item:last-child { border-right: 0; }
.number-item::before { content: ""; position: absolute; top: 0; right: 13px; width: 58px; height: 30px; opacity: .28; background: repeating-linear-gradient(149deg, var(--gold) 0 2px, transparent 2px 25px); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.number-item strong { display: block; color: var(--gold); font-size: 38px; font-weight: 800; letter-spacing: -.07em; }
.number-item span { display: block; margin-top: 4px; color: rgba(255, 253, 248, .74); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.gallery { position: relative; overflow: hidden; padding: 96px 24px 104px; background: radial-gradient(circle at 9% 10%, rgba(255, 255, 255, .72), transparent 34%), radial-gradient(circle at 8% 14%, rgba(246, 189, 84, .16), transparent 28%), linear-gradient(125deg, #faf6ee, #f0e5d4 58%, #e7d6bd); }
.gallery::before { content: none; }
.gallery .section-head, .gallery-grid { position: relative; z-index: 1; }
.gallery .section-head { color: var(--ink); }
.gallery .section-head p { color: var(--muted); }
.gallery-grid { display: grid; grid-template-columns: 1.25fr .75fr .75fr; grid-template-rows: 220px 220px; gap: 16px; max-width: 1228px; margin: auto; }
.gallery-card { position: relative; overflow: hidden; border-radius: 30px; background: var(--ink); }
.gallery-card:first-child { grid-row: 1 / 3; }
.gallery-card:nth-child(4) { grid-column: 2 / 4; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.gallery-card:hover img { transform: scale(1.05); }
.gallery-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(16, 45, 55, .77)); }
.gallery-card span { position: absolute; z-index: 1; left: 20px; bottom: 18px; max-width: calc(100% - 40px); color: var(--white); font-size: 14px; font-weight: 700; }

.reviews { position: relative; isolation: isolate; padding: 96px 24px 104px; overflow: hidden; background: radial-gradient(circle at 12% 7%, rgba(255, 255, 255, .74), transparent 35%), radial-gradient(circle at 87% 18%, rgba(143, 214, 207, .15), transparent 25%), linear-gradient(120deg, #fffdf8, #edf4ef); }
.reviews::before { content: none; }
.reviews .section-head, .review-grid { position: relative; z-index: 1; }
.reviews .section-head p { color: var(--muted); }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 1228px; margin: auto; }
.review { position: relative; min-height: 255px; padding: 29px; overflow: hidden; border-radius: 30px 30px 30px 7px; background: var(--white); box-shadow: 0 12px 31px rgba(16, 45, 55, .08); }
.review:nth-child(2) { background: var(--gold); }
.review:nth-child(3) { background: var(--aqua); }
.review::after { content: "“"; position: absolute; right: 21px; top: 2px; color: rgba(16, 45, 55, .13); font-size: 100px; font-weight: 800; line-height: 1; }
.stars { position: relative; z-index: 1; color: var(--coral); font-size: 16px; letter-spacing: 2px; }
.review blockquote { position: relative; z-index: 1; margin: 23px 0; font-size: 14px; font-weight: 700; line-height: 1.55; }
.review footer { position: relative; z-index: 1; color: var(--muted); font-size: 12px; }
.review footer strong { display: block; color: var(--ink); font-size: 13px; }

.process { position: relative; isolation: isolate; width: 100%; margin: 0; padding: 96px 24px 104px; overflow: hidden; color: var(--white); background: radial-gradient(circle at 10% 15%, rgba(112, 185, 181, .18), transparent 28%), linear-gradient(124deg, #1f5661, #0c3440 56%, var(--ink)); }
.process::before { content: ""; position: absolute; top: -57px; right: -115px; bottom: -104px; width: min(61%, 800px); opacity: .115; background: url("assets/roof/process-finished-roof.png") center / contain no-repeat; filter: grayscale(.35) brightness(1.55) contrast(.78); pointer-events: none; z-index: 0; }
.process .section-head { position: relative; z-index: 1; margin-bottom: 28px; }
.steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1228px; margin: 0 auto; }
.step { position: relative; min-height: 180px; padding: 22px; overflow: hidden; border-radius: 28px 28px 28px 6px; color: var(--ink); background: var(--white); }
.step:nth-child(2) { background: var(--gold); }
.step:nth-child(3) { background: var(--aqua); }
.step-graphic { position: absolute; top: 2px; right: 3px; width: 126px; height: 94px; object-fit: contain; object-position: center; pointer-events: none; }
.step > .step-label { color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .11em; }
.step h3 { max-width: calc(100% - 132px); margin: 30px 0 8px; font-size: 20px; font-weight: 700; letter-spacing: -.018em; }
.step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

.faq { position: relative; isolation: isolate; padding: 96px 24px 104px; overflow: hidden; background: radial-gradient(circle at 9% 10%, rgba(255, 255, 255, .68), transparent 36%), radial-gradient(circle at 5% 80%, rgba(246, 189, 84, .12), transparent 25%), linear-gradient(105deg, #faf5ec, #fffdf8 62%, #f2eadf); }
.faq::before { content: none; }
.faq-wrap { position: relative; z-index: 1; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(34px, 8vw, 105px); max-width: 1228px; margin: auto; }
.faq-copy p:last-child { max-width: 350px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); padding: 17px 0; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--ink); cursor: pointer; font-size: 16px; font-weight: 800; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--coral); font-size: 26px; font-weight: 400; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { max-width: 640px; margin: 14px 35px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.blog { position: relative; overflow: hidden; padding: 96px 24px 104px; background: radial-gradient(circle at 13% 9%, rgba(255, 255, 255, .6), transparent 33%), radial-gradient(circle at 92% 10%, rgba(56, 125, 130, .15), transparent 28%), linear-gradient(126deg, #eaf5f1, #cee5e1 59%, #c0ddd9); }
.blog::before { content: none; }
.blog .section-head, .blog-grid { position: relative; z-index: 1; }
.blog .section-head p { color: var(--muted); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; max-width: 1228px; margin: auto; }
.blog-card { min-height: 240px; padding: 27px; border-radius: 28px; background: var(--white); box-shadow: 0 10px 26px rgba(16, 45, 55, .07); }
.blog-card:nth-child(2) { background: var(--sand); }
.blog-card:nth-child(3) { color: var(--white); background: var(--ink); }
.blog-card time { color: var(--coral); font-size: 11px; font-weight: 800; }
.blog-card h3 { margin: 19px 0 29px; font-size: 20px; font-weight: 700; letter-spacing: -.018em; line-height: 1.12; }
.blog-card a { display: inline-flex; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-size: 12px; font-weight: 800; }

.closing { position: relative; overflow: hidden; padding: 65px 24px 29px; color: var(--white); background: radial-gradient(circle at 18% 120%, rgba(255, 207, 121, .22), transparent 30%), radial-gradient(circle at 85% 8%, rgba(255, 255, 255, .1), transparent 28%), linear-gradient(125deg, #ed6b3d, #f27142 53%, #d95a38); }
.closing::before { content: ""; position: absolute; width: 470px; height: 470px; top: -286px; right: -105px; border: 1px solid rgba(255,253,248,.55); border-radius: 50%; box-shadow: 0 0 0 32px rgba(255,253,248,.12), 0 0 0 64px rgba(255,253,248,.08); }
.closing::after { content: ""; position: absolute; right: -128px; bottom: -116px; z-index: 0; width: 620px; height: 420px; opacity: .1; background: url("assets/roof/roof-tile-fragment.png") center / contain no-repeat; filter: grayscale(.7) brightness(1.3); pointer-events: none; }
.closing-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 22px; max-width: 1228px; margin: auto; }
.closing h2 { max-width: 635px; margin: 10px 0 0; font-size: clamp(40px, 5.2vw, 64px); font-weight: 700; letter-spacing: -.035em; line-height: .95; }
.closing .eyebrow { color: var(--white); }
.call-button { display: inline-flex; padding: 17px 21px; border-radius: 999px; color: var(--ink); background: var(--white); font-size: 14px; font-weight: 800; white-space: nowrap; }
.site-footer { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 30px; max-width: 1228px; margin: 45px auto 0; padding-top: 29px; border-top: 1px solid rgba(255,253,248,.42); color: rgba(255,253,248,.9); }
.footer-logo { width: 210px; filter: brightness(0) invert(1); }
.site-footer p { margin: 13px 0 0; font-size: 11px; line-height: 1.55; }
.footer-title { display: block; margin-bottom: 10px; color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.site-footer a { display: block; margin: 7px 0; font-size: 12px; font-weight: 700; }
.footer-cities { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 3px 0 0; }
.footer-cities a { margin: 0; font-size: 11px; font-weight: 600; }
.copyright { grid-column: 1 / -1; margin: 8px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,253,248,.25); font-size: 10px; }

.scroll-reveal { opacity: 0; filter: blur(2px); transform: translateY(30px); transition: opacity .68s cubic-bezier(.22, 1, .36, 1), transform .68s cubic-bezier(.22, 1, .36, 1), filter .5s ease; transition-delay: var(--reveal-delay, 0ms); }
.scroll-reveal.is-revealed { opacity: 1; filter: none; transform: translateY(0); }

@keyframes float-seal { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition-duration: 1.6s !important; } }
@media (prefers-reduced-motion: reduce) { .scroll-reveal { transition-duration: .68s !important; } }

@media (max-width: 940px) {
  .main-nav { gap: 14px; }
  .hero { min-height: 620px; margin: 0; padding: 164px 48px 132px; border-radius: 0 0 56px 56px; }
  .hero-copy { max-width: 650px; }
  .quick-quote { margin-left: 24px; margin-right: 24px; }
  .about-inner, .faq-wrap { grid-template-columns: 1fr; }
  .about-visual { max-width: 600px; width: 100%; }
  .numbers-inner { grid-template-columns: repeat(2, 1fr); }
  .number-item:nth-child(2) { border-right: 0; }
  .number-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,253,248,.18); }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-card:first-child { grid-row: auto; }
  .gallery-card:nth-child(4) { grid-column: auto; }
  .review-grid, .blog-grid { grid-template-columns: 1fr; max-width: 600px; }
  .review:nth-child(2), .blog-card:nth-child(2) { transform: none; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .topbar { gap: 6px; padding: 6px 8px; font-size: 9px; letter-spacing: 0; white-space: nowrap; }
  .topbar-dot { width: 6px; height: 6px; }
  .topbar-phone { padding-left: 6px; }
  .site-header { top: 33px; padding: 13px 16px 0; }
  .header-inner { min-height: 60px; padding: 8px 9px 8px 14px; }
  .brand { min-width: auto; }
  .brand img { width: 37px; height: 35px; }
  .brand-name { font-size: 14px; }
  .brand-copy small { font-size: 6px; }
  .menu-button { display: inline-flex; }
  .main-nav { position: absolute; top: 70px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 13px; border-radius: 25px; color: var(--ink); background: var(--white); box-shadow: var(--shadow); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 11px 8px; }
  .header-cta { display: none; }
  .hero { min-height: 620px; margin: 0; padding: 136px 26px 112px; border-radius: 0 0 38px 38px; background-position: 62% center; }
  h1 { font-size: clamp(44px, 13vw, 68px); }
  .hero-years { right: 20px; bottom: 26px; padding: 11px 13px; font-size: 10px; }
  .hero-years b { font-size: 25px; }
  .quick-quote { grid-template-columns: 1fr; margin: -32px 17px 0; padding: 20px; }
  .quick-fields { grid-template-columns: 1fr; }
  .quick-quote button { width: 100%; }
  .roof-divider { margin-top: 35px; }
  .services { padding: 72px 18px 80px; }
  .section-head { flex-direction: column; align-items: flex-start; margin-bottom: 25px; }
  .section-head p { max-width: 390px; }
  .service-grid, .steps { grid-template-columns: 1fr; }
  .service-card:nth-child(2), .service-card:nth-child(4), .step:nth-child(2) { transform: none; }
  .service-card { min-height: 220px; }
  .about-inner { width: calc(100% - 36px); padding: 64px 0 44px; }
  .about-visual { min-height: 340px; }
  .about-sticker { width: 95px; height: 95px; font-size: 11px; }
  .numbers { padding-bottom: 60px; }
  .numbers-inner { grid-template-columns: 1fr; }
  .number-item, .number-item:nth-child(2) { border-right: 0; border-bottom: 1px solid rgba(255,253,248,.18); }
  .number-item:last-child { border-bottom: 0; }
  .gallery { padding: 72px 18px 80px; }
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 230px); }
  .gallery-card { grid-column: auto !important; }
  .reviews { padding: 72px 18px 80px; }
  .process { margin: 0; padding: 72px 18px 80px; border-radius: 0; }
  .faq { padding: 72px 18px 80px; }
  .blog { padding: 72px 18px 80px; }
  .closing { padding: 53px 24px 25px; }
  .closing-inner { flex-direction: column; align-items: flex-start; }
  .site-footer { grid-template-columns: 1fr; gap: 23px; margin-top: 33px; }
  .footer-logo { display: block; margin-right: auto; margin-left: auto; }
  .footer-cities, .copyright { grid-column: auto; }
}