/*
Theme Name: Roof Life Jax
Version: 1.0.1
Text Domain: kit
*/

:root {
  --char: #22272b;
  --char-2: #2f363b;
  --sky: #7fb6d9;
  --sky-pale: #e8f2f8;
  --fungus: #1f2a24;
  --pine: #3f6b4a;
  --sign: #f2df3a;
  --white: #ffffff;
  --ink: #1d2226;
  --mute: rgba(29, 34, 38, .72);
  --gap: 24px;
  --wrap: 1180px;
  --head: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --body: 'Reddit Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shingle: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 28px), repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 46px);
}

body { font: 400 18px/1.6 var(--body); color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--head); font-weight: 900; line-height: .95; letter-spacing: -.005em; margin: 0 0 .4em; text-transform: none; }
h2 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
a { color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); }
.kicker { font: 600 1rem/1.2 var(--body); color: var(--pine); margin: 0 0 12px; }
.sub, .lead { color: var(--mute); }
.fine { font-size: .9rem; color: var(--mute); }

.proto-note { margin: 0; padding: 8px var(--gap); background: var(--sign); color: var(--char); font: 600 .9rem/1.3 var(--body); text-align: center; }

.masthead { background: var(--char); color: #fff; border-bottom: 3px solid var(--sign); }
.masthead-in { max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gap); min-height: 72px; }
.brand-logo { height: 46px; width: auto; }
.nav-list a { font: 600 1.02rem/1 var(--body); padding: 8px 0; border-bottom: 2px solid transparent; }
.nav-list a:hover { border-color: var(--sign); }
.nav-call { font: 800 1.35rem/1 var(--head); text-decoration: none; background: var(--sign); color: var(--char); padding: 12px 16px; border-radius: 3px; }
.nav-toggle { background: none; border: 2px solid rgba(255,255,255,.5); color: #fff; border-radius: 3px; padding: 0 14px; font: 600 1rem var(--body); }
@media (max-width: 1080px) {
  .site-nav { background: var(--char); padding: 8px var(--gap) 22px; border-bottom: 3px solid var(--sign); }
  .nav-list a { font-size: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.12); }
  .nav-call { text-align: center; margin-top: 10px; }
}

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; font: 800 1.35rem/1 var(--head); letter-spacing: .01em; text-decoration: none; border-radius: 3px; transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-2px); }
.btn-call { background: var(--sign); color: var(--char); box-shadow: 0 6px 0 #b9a71d; }
.btn-call:hover { box-shadow: 0 8px 0 #b9a71d; }
.btn-ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }

/* method strip */
.band { padding: clamp(56px, 8vw, 96px) 0; }
.method { padding: 0; background: var(--char); color: #fff; }
.method-in { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.method-no { margin: 0; padding: 22px 18px; border-left: 1px solid rgba(255,255,255,.12); font-size: 1.02rem; color: rgba(255,255,255,.75); }
.method-no:first-child { border-left: 0; padding-left: 0; }
.method-no b { display: block; font: 800 1.6rem/1.1 var(--head); color: var(--sign); }

/* why */
.why { background: var(--sky-pale); }
.why-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.why-copy p { color: var(--mute); }
.why-nums { display: grid; gap: 16px; }
.num { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; background: #fff; padding: 18px 20px; border-left: 6px solid var(--pine); border-radius: 3px; }
.num b { font: 800 3.4rem/1 var(--head); color: var(--char); }
.num span { color: var(--mute); }

/* services */
.svc { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--char); }
.svc li { padding: 22px 22px 26px 0; border-bottom: 1px solid rgba(0,0,0,.12); }
.svc li:nth-child(3n+2), .svc li:nth-child(3n+3) { padding-left: 22px; border-left: 1px solid rgba(0,0,0,.12); }
.svc b { display: block; font: 800 1.7rem/1.1 var(--head); margin-bottom: 6px; }
.svc span { color: var(--mute); }

/* guarantee */
.guarantee { background: var(--char); background-image: var(--shingle); }
.cert { position: relative; max-width: 820px; margin: 0 auto; background: #fffdf0; color: var(--char); padding: clamp(32px, 5vw, 56px); border: 3px double var(--char); box-shadow: 0 0 0 10px #fffdf0, 0 0 0 13px var(--sign), 0 30px 50px -20px rgba(0,0,0,.6); text-align: center; }
.cert-top { font: 600 .95rem/1 var(--body); color: var(--pine); }
.cert h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.cert p { font-size: 1.12rem; }
.cert-sign { font-weight: 700; margin: 18px 0 0; }
.cert-seal { position: absolute; right: -28px; bottom: -34px; width: 110px; transform: rotate(-10deg); border-radius: 50%; border: 5px solid var(--sign); background: #fff; }

/* gallery */
.gal { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.gal-item:nth-child(3n+1) { grid-column: span 2; max-width: 860px; justify-self: center; width: 100%; }
.more { margin-top: 36px; }
.more summary { display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border: 2px solid var(--char); border-radius: 3px; font: 800 1.3rem/1 var(--head); }
.more summary::after { content: '+'; margin-left: 12px; }
.more[open] summary::after { content: '\2212'; }
.pairs { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.pair { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pair-side { position: relative; display: block; }
.pair-side img { width: 100%; aspect-ratio: 900/627; object-fit: cover; border-radius: 3px; }
.pair-side:last-child .ba-tag { background: var(--sign); color: var(--char); left: auto; right: 10px; }
.pair-side .ba-tag { left: 10px; top: 10px; }

/* area */
.area { background: var(--sky-pale); }
.area-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.route { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; columns: 2; column-gap: 28px; }
.route::before { content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 3px; background: var(--pine); transform-origin: top; transform: scaleY(var(--draw, 1)); transition: transform 1.4s cubic-bezier(.6,0,.2,1); }
.js .route { --draw: 0; }
.js .route.in { --draw: 1; }
.route li { position: relative; padding: 9px 0; list-style: none; font: 600 1.4rem/1.1 var(--head); break-inside: avoid; }
.route li::before { content: ''; position: absolute; left: -30px; top: 50%; width: 13px; height: 13px; margin-top: -6px; border-radius: 50%; background: var(--sign); border: 3px solid var(--pine); }

/* estimate */
.estimate { background: var(--fungus); color: #fff; }
.estimate .kicker { color: var(--sign); }
.estimate p { color: rgba(255,255,255,.8); }
.estimate a { color: var(--sign); font-weight: 700; }
.est-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.mil { margin-top: 22px; padding: 14px 16px; background: rgba(255,255,255,.08); border-left: 4px solid var(--sign); }
.est-form { background: #fff; color: var(--ink); padding: clamp(22px, 3vw, 34px); border-radius: 4px; }
.kit-form label { font-weight: 600; font-size: .98rem; }
.kit-form input, .kit-form select, .kit-form textarea { border: 2px solid #c8d0d5; border-radius: 3px; padding: 10px 12px; background: #fff; color: var(--ink); }
.kit-form input:focus, .kit-form select:focus, .kit-form textarea:focus { outline: none; border-color: var(--pine); box-shadow: 0 0 0 3px rgba(63,107,74,.25); }
.kit-form input.touched:invalid { border-color: #b3261e; }
.btn-solid { background: var(--sign); color: var(--char); border: 0; border-radius: 3px; padding: 0 22px; font: 800 1.3rem/1 var(--head); box-shadow: 0 5px 0 #b9a71d; }
.form-note { padding: 12px 14px; border-radius: 3px; font-weight: 600; }
.form-note.ok { background: #e3f1e6; color: var(--pine); }
.form-note.err { background: #fbe5e3; color: #8a1c14; }

.page-head { max-width: 760px; margin: 0 auto; padding: 72px var(--gap); }
.page-head h1 { font-size: clamp(2.8rem, 6vw, 4.2rem); }

.foot { background: var(--char); color: rgba(255,255,255,.78); padding: 48px 0 0; border-top: 3px solid var(--sign); }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.foot-title { font: 800 1.8rem/1 var(--head); color: #fff; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--sign); }
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-base { max-width: var(--wrap); margin: 36px auto 0; padding: 18px var(--gap) 26px; border-top: 1px solid rgba(255,255,255,.12); font-size: .9rem; }

@media (max-width: 900px) {
  body { font-size: 17px; }
  .rlj-hero-in, .why-in, .area-in, .est-in { grid-template-columns: 1fr; }
  .rlj-hero-tool { order: -1; }
  .rlj-hero::after { background: linear-gradient(180deg, rgba(20,26,23,.78), rgba(20,26,23,.92)), var(--shingle); }
  .method-in { grid-template-columns: 1fr; }
  .method-no, .method-no:first-child { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding: 16px 0; }
  .method-no:first-child { border-top: 0; }
  .svc { grid-template-columns: 1fr; }
  .svc li, .svc li:nth-child(3n+2), .svc li:nth-child(3n+3) { padding: 18px 0; border-left: 0; }
  .gal, .pairs { grid-template-columns: 1fr; }
  .gal-item:nth-child(3n+1) { grid-column: auto; }
  .num { grid-template-columns: 110px 1fr; }
  .num b { font-size: 2.6rem; }
  .cert-seal { width: 76px; right: -8px; bottom: -26px; }
  .route { columns: 1; }
  .foot-in { grid-template-columns: 1fr; }
  .acts .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .js .route { --draw: 1; }
  .ba-before-wrap::after { animation: none; }
}

/* gallery: one steady grid; every slider the same 4:3 frame (both photos share the crop, so they stay lined up) */
.gal .ba { aspect-ratio: 4 / 3 !important; }
.gal-item:nth-child(3n+1) { grid-column: auto; max-width: none; }
.top-call { display: none; }
@media (max-width: 1080px) {
  .top-call { display: inline-flex; align-items: center; margin-left: auto; min-height: 44px; padding: 0 14px; background: var(--sign); color: var(--char); font: 800 1.15rem/1 var(--head); text-decoration: none; border-radius: 3px; }
  .nav-toggle { margin-left: 10px; }
}
@media (max-width: 600px) {
  .masthead-in { gap: 10px; }
  .brand-logo { height: 34px; }
  .top-call { padding: 0 12px; }
  .nav-toggle { padding: 0 10px; margin-left: 8px; }
  .cert-seal { right: 6px; }
  .cert { box-shadow: 0 0 0 6px #fffdf0, 0 0 0 9px var(--sign), 0 30px 50px -20px rgba(0,0,0,.6); }
}

/* ===== v2: sell it ===== */
body { background: #0f1412; }
h1, h2 { text-transform: uppercase; letter-spacing: .005em; }
h2 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); line-height: .9; }

/* full-screen wipe hero: the whole first screen is the house; the roof gets cleaned in front of you */
.rlj-hero2 { position: relative; height: calc(100svh - 110px); min-height: 600px; max-height: 1000px; overflow: hidden; color: #fff; background: #0f1412; isolation: isolate; }
.wipe { position: absolute; inset: 0; margin: 0; touch-action: pan-y; user-select: none; }
.wipe img, .wipe-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.wipe-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.wipe-before img { filter: saturate(.9) contrast(1.05); }
.wipe-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--sign); box-shadow: 0 0 24px 6px rgba(242,223,58,.45); pointer-events: none; z-index: 2; }
.mist { position: absolute; top: 0; bottom: 0; left: -60px; width: 120px; background: radial-gradient(ellipse at center, rgba(255,255,255,.38), rgba(255,255,255,0) 70%); filter: blur(10px); opacity: 0; transition: opacity .3s; }
.wiping .mist { opacity: 1; animation: mist .35s linear infinite; }
@keyframes mist { 50% { transform: translateY(6px) scaleX(1.15); opacity: .7; } }
.wipe-knob { position: absolute; top: 58%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--sign); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.wipe-knob::before, .wipe-knob::after { content: ''; position: absolute; top: 50%; margin-top: -9px; border: 9px solid transparent; }
.wipe-knob::before { left: 8px; border-right-color: var(--char); }
.wipe-knob::after { right: 8px; border-left-color: var(--char); }
.wipe-range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.wipe-range:focus-visible ~ .wipe-line .wipe-knob, .wipe:focus-within .wipe-knob { outline: 3px solid #fff; outline-offset: 4px; }
.hero2-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(10,14,12,.92) 0%, rgba(10,14,12,.55) 34%, rgba(10,14,12,0) 62%), linear-gradient(90deg, rgba(10,14,12,.55), rgba(10,14,12,0) 55%); }
.hero2-copy { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap) clamp(28px, 5vh, 56px); pointer-events: none; }
.hero2-copy a { pointer-events: auto; }
.hero2-kicker { font: 700 1rem/1 var(--body); color: var(--sign); margin: 0 0 14px; letter-spacing: .02em; }
.rlj-hero2 h1 { font-size: clamp(3.6rem, 11.5vw, 10.5rem); line-height: .82; margin: 0 0 18px; text-shadow: 0 6px 40px rgba(0,0,0,.5); }
.h1-a { display: block; }
.h1-b { display: block; color: var(--sign); font-style: italic; transform: translateX(.08em); }
.hero2-lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: 36em; color: rgba(255,255,255,.88); margin: 0 0 22px; }
.hero2-lead b { color: var(--sign); }
.hero2-hint { position: absolute; z-index: 4; right: var(--gap); top: 22px; margin: 0; padding: 9px 14px; background: rgba(10,14,12,.6); border: 1px solid rgba(255,255,255,.25); border-radius: 40px; font-weight: 600; font-size: .95rem; pointer-events: none; transition: opacity .4s; }
.hero2-hint span { color: var(--sign); margin-right: 6px; }
.illus { position: absolute; z-index: 4; left: var(--gap); top: 22px; margin: 0; font-size: .8rem; color: rgba(255,255,255,.7); background: rgba(10,14,12,.5); padding: 4px 8px; border-radius: 2px; pointer-events: none; }
.vid-pause { position: absolute; z-index: 5; right: var(--gap); bottom: 20px; min-height: 40px; padding: 0 14px; border-radius: 40px; border: 1px solid rgba(255,255,255,.4); background: rgba(10,14,12,.6); color: #fff; font: 600 .9rem var(--body); cursor: pointer; }

/* ticker */
.ticker { background: var(--sign); color: var(--char); overflow: hidden; border-block: 3px solid var(--char); }
.ticker-in { display: flex; width: max-content; align-items: center; gap: 28px; padding: 14px 0; animation: tick 28s linear infinite; }
.ticker span { font: 900 clamp(1.4rem, 2.6vw, 2.2rem)/1 var(--head); text-transform: uppercase; white-space: nowrap; }
.ticker i { width: 14px; height: 14px; background: var(--char); transform: rotate(45deg); flex: none; }
@keyframes tick { to { transform: translateX(-50%); } }

/* the fungus section, picture held still while the section scrolls over it */
.eat { position: relative; color: #fff; padding: clamp(80px, 12vw, 160px) 0; clip-path: inset(0); background: #0f1412; }
.eat-bg { position: fixed; inset: 0; z-index: -1; }
.eat-bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.38) saturate(.9); }
.eat-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 90px); align-items: end; }
.eat .kicker { color: var(--sign); }
.eat-copy p { color: rgba(255,255,255,.82); font-size: 1.12rem; max-width: 34em; }
.eat-nums { display: grid; gap: 28px; }
.big { margin: 0; border-top: 3px solid var(--sign); padding-top: 14px; }
.big b { display: block; font: 900 clamp(5rem, 11vw, 9rem)/.85 var(--head); color: #fff; }
.big span { display: block; color: rgba(255,255,255,.8); font-size: 1.05rem; margin-top: 8px; }
.eat .fine { color: rgba(255,255,255,.55); }

/* service photo tiles */
.services { background: #fff; }
.svc-head h2 { margin-bottom: 34px; }
.tiles { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; }
.tile { position: relative; display: block; overflow: hidden; aspect-ratio: 4/5; text-decoration: none; color: #fff; background: #111; border-radius: 4px; }
.tile:first-child { grid-row: span 1; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.tile:hover img { transform: scale(1.07); }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,14,12,.88), rgba(10,14,12,0) 55%); }
.tile-t { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 22px; }
.tile-t b { display: block; font: 900 clamp(2rem, 3.4vw, 2.8rem)/.9 var(--head); text-transform: uppercase; margin-bottom: 8px; }
.tile-t span { color: rgba(255,255,255,.85); }
.tile:hover .tile-t b { color: var(--sign); }
.svc-more { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; }
.svc-more li { padding: 12px 18px; border: 2px solid var(--char); border-radius: 40px; font: 700 1.05rem var(--body); }
.svc-more li::before { content: '+ '; color: var(--pine); }

/* the film strip of their real jobs */
.gallery { background: #e9e4d6; overflow: hidden; }
.gal-head { max-width: 760px; }
.film { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px max(var(--gap), calc((100vw - var(--wrap)) / 2 + var(--gap))) 30px; scrollbar-width: thin; }
.snap { flex: none; scroll-snap-align: start; width: min(420px, 82vw); background: #fff; padding: 12px 12px 0; box-shadow: 0 18px 30px -18px rgba(0,0,0,.45); transform: rotate(var(--tilt, -1deg)); transition: transform .3s; }
.snap:nth-child(even) { --tilt: 1.2deg; }
.snap:hover { transform: rotate(0) translateY(-6px); }
.snap .ba { aspect-ratio: 4/3 !important; border-radius: 0; box-shadow: none; }
.snap-pair .pair { grid-template-columns: 1fr 1fr; gap: 4px; }
.snap-pair .pair-side img { aspect-ratio: 3/4; border-radius: 0; }
.snap-cap { margin: 0; padding: 12px 2px 14px; font: 700 .95rem var(--body); color: var(--mute); }
.film:focus-visible { outline: 3px solid var(--pine); outline-offset: -3px; }

.guarantee { padding: clamp(80px, 11vw, 140px) 0; }

@media (max-width: 900px) {
  .rlj-hero2 { height: calc(100svh - 120px); min-height: 560px; }
  .hero2-hint { top: auto; bottom: 46%; right: 50%; transform: translateX(50%); }
  .illus { top: 14px; }
  .eat-in { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 16/11; }
  .vid-pause { bottom: auto; top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-in { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

/* before / after slider (film strip) */
.ba { position: relative; margin: 0; overflow: hidden; background: #111; touch-action: pan-y; user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.ba-before-wrap { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--sign); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--sign); box-shadow: 0 3px 10px rgba(0,0,0,.45); }
.ba-knob::before, .ba-knob::after { content: ''; position: absolute; top: 50%; margin-top: -6px; border: 6px solid transparent; }
.ba-knob::before { left: 4px; border-right-color: var(--char); }
.ba-knob::after { right: 4px; border-left-color: var(--char); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba:focus-within .ba-knob { outline: 3px solid #fff; outline-offset: 3px; }
.ba-tag { position: absolute; top: 10px; padding: 4px 8px; font: 700 .8rem/1 var(--body); background: rgba(20,26,23,.82); color: #fff; border-radius: 2px; pointer-events: none; }
.ba-tag-b { left: 10px; }
.ba-tag-a { right: 10px; background: var(--sign); color: var(--char); }
@media (max-width: 900px) {
  .hero2-hint { top: 14px; bottom: auto; right: var(--gap); transform: none; font-size: .85rem; padding: 7px 12px; }
  .wipe-knob { top: 30%; width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .rlj-hero2 h1 { font-size: clamp(3.4rem, 15vw, 5rem); }
  .hero2-shade { background: linear-gradient(0deg, rgba(10,14,12,.95) 0%, rgba(10,14,12,.7) 42%, rgba(10,14,12,0) 70%); }
}

/* ===== v3: Florida daylight (checklist #6, #45, #29, parallax = slide-in) ===== */
:root { --sky: #2f9be0; --sky-deep: #1673b8; --sky-pale: #e6f4fd; --sand: #fbf3e2; --sun: #f2df3a; --sun-deep: #e8b923; --char: #23292e; }
body { background: #fff; }
.masthead { background: #fff; color: var(--char); border-bottom: 4px solid var(--sun); box-shadow: 0 6px 18px -10px rgba(0,0,0,.25); }
.brand-logo { height: 54px; }
.nav-list a { color: var(--char); }
.nav-list a:hover { border-color: var(--sky); }
.nav-call { background: var(--sky); color: #fff; box-shadow: 0 4px 0 var(--sky-deep); }
.nav-toggle { color: var(--char); border-color: var(--char); }
.top-call { background: var(--sky); color: #fff; }
@media (max-width: 1080px) { .site-nav { background: #fff; border-bottom-color: var(--sun); } .nav-list a { border-bottom-color: rgba(0,0,0,.08); } }
@media (max-width: 600px) { .brand-logo { height: 38px; } }
.proto-note { background: var(--char); color: #fff; font-weight: 600; }

/* hero: the sky stays bright; words sit high in the sky, the roof gets cleaned below them */
.rlj-hero2 { background: var(--sky); }
.hero2-shade { background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.2) 30%, rgba(255,255,255,0) 46%), linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 22%); }
.hero2-copy { top: 0; bottom: auto; padding-top: clamp(26px, 5vh, 54px); color: var(--char); }
.hero2-kicker { color: var(--sky-deep); }
.rlj-hero2 h1 { color: var(--char); text-shadow: 0 2px 0 rgba(255,255,255,.6), 0 10px 40px rgba(255,255,255,.55); font-size: clamp(3.6rem, 10vw, 9.4rem); }
.h1-b { display: inline-block; color: var(--char); background: var(--sun); padding: .02em .16em .04em; transform: rotate(-2deg) translateX(.06em); box-shadow: 6px 6px 0 var(--char); font-style: italic; margin-top: .06em; }
.hero2-lead { color: var(--char); font-weight: 600; max-width: 30em; text-shadow: 0 1px 12px rgba(255,255,255,.9); }
.hero2-lead b { color: var(--sky-deep); }
.rlj-hero2 .btn-call { background: var(--sun); color: var(--char); box-shadow: 0 6px 0 var(--sun-deep); }
.rlj-hero2 .btn-ghost { background: rgba(255,255,255,.85); color: var(--char); box-shadow: inset 0 0 0 2px var(--char); }
.hero2-hint { background: rgba(35,41,46,.82); color: #fff; top: auto; bottom: 26px; right: var(--gap); }
.illus { top: auto; bottom: 26px; left: var(--gap); background: rgba(35,41,46,.7); }
.wipe-line { background: #fff; box-shadow: 0 0 30px 8px rgba(255,255,255,.65); }
.wipe-knob { top: 72%; background: var(--sun); }

/* fungus section: bright, the close-up photo held still, words on a white card */
.eat { background: var(--sky-pale); color: var(--char); }
.eat-bg img { filter: none; }
.eat-in { align-items: center; }
.eat-copy { background: #fff; padding: clamp(28px, 4vw, 48px); border-radius: 6px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.45); }
.eat-copy p { color: rgba(35,41,46,.78); }
.eat .kicker { color: var(--sky-deep); }
.big { background: var(--sun); border: 0; padding: 22px 26px; border-radius: 6px; box-shadow: 8px 8px 0 var(--char); transform: rotate(var(--r, -1.5deg)); }
.big:nth-child(2) { --r: 1.8deg; margin-left: clamp(0px, 4vw, 60px); }
.big b { color: var(--char); }
.big span { color: var(--char); font-weight: 600; }
.eat .fine { color: var(--char); background: rgba(255,255,255,.85); padding: 6px 10px; border-radius: 3px; justify-self: start; }

/* tiles stay, warmer frame */
.services { background: #fff; }
.tile::after { background: linear-gradient(0deg, rgba(20,24,27,.82), rgba(20,24,27,0) 55%); }
.svc-more li { border-color: var(--sky); color: var(--sky-deep); }

.gallery { background: var(--sand); }
.guarantee { background: var(--sky); background-image: radial-gradient(circle at 20% 10%, rgba(255,255,255,.25), transparent 50%), repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 14px, transparent 14px 28px); }
.area { background: #fff; }
.route::before { background: var(--sky); }
.route li::before { border-color: var(--sky); }
.estimate { background: linear-gradient(160deg, var(--sky) 0%, var(--sky-deep) 100%); }
.estimate .kicker { color: var(--sun); }
.estimate .mil { background: rgba(255,255,255,.14); }
.foot { background: var(--char); }

/* scroll entrances from different sides */
.js .from-l { opacity: 0; transform: translateX(-70px) rotate(-2deg); transition: opacity .8s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.js .from-r { opacity: 0; transform: translateX(70px) rotate(2deg); transition: opacity .8s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.js .pop { opacity: 0; transform: scale(.7) rotate(-6deg); transition: opacity .6s ease, transform .8s cubic-bezier(.3,1.5,.4,1); }
.js .from-l.in, .js .from-r.in, .js .pop.in { opacity: 1; transform: none; }
.js .big.pop.in { transform: rotate(var(--r, -1.5deg)); }
@media (prefers-reduced-motion: reduce) { .js .from-l, .js .from-r, .js .pop { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .hero2-copy { padding-top: 20px; }
  .rlj-hero2 h1 { font-size: clamp(3rem, 14vw, 4.6rem); }
  .hero2-shade { background: linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.45) 45%, rgba(255,255,255,0) 66%); }
  .wipe-knob { top: 80%; }
  .hero2-hint { bottom: 16px; top: auto; }
  .illus { bottom: 16px; top: auto; }
}

/* one 16:9 stage for the stills and the loop, so the wipe lines up over the moving picture */
.wipe-stage { position: absolute; left: 50%; top: 50%; width: max(100%, calc(var(--hh, 100vh) * 16 / 9)); aspect-ratio: 16 / 9; transform: translate(var(--sx, -50%), -50%); }
.wipe-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.wipe-stage .wipe-video { position: absolute; left: .13%; top: 1.75%; width: 99.6%; height: 96.3%; object-fit: fill; opacity: 0; transition: opacity 1.4s ease; }
.wipe.live .wipe-video { opacity: 1; }
.wipe.dragging .wipe-video { opacity: 0; transition-duration: .2s; }
.wipe-line { z-index: 3; }
@media (max-width: 900px) { .wipe-stage { --sx: -41%; } }

/* hero words: white over the dark oak on the left, the bright sky stays clear */
.hero2-copy { color: #fff; }
.hero2-kicker { color: var(--sun); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.rlj-hero2 h1 { color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.55); }
.h1-b { color: var(--char); }
.hero2-lead { color: #fff; font-weight: 500; text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.hero2-lead b { color: var(--sun); }
.rlj-hero2 .btn-ghost { background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 2px #fff; backdrop-filter: blur(4px); }
.hero2-shade { background: linear-gradient(90deg, rgba(12,10,6,.62) 0%, rgba(12,10,6,.25) 42%, rgba(12,10,6,0) 62%), linear-gradient(0deg, rgba(12,10,6,.4) 0%, rgba(12,10,6,0) 25%); }
.wipe-knob { top: 52%; }
@media (max-width: 900px) {
  .hero2-shade { background: linear-gradient(180deg, rgba(12,10,6,.7) 0%, rgba(12,10,6,.35) 48%, rgba(12,10,6,0) 64%), linear-gradient(0deg, rgba(12,10,6,.5) 0%, rgba(12,10,6,0) 22%); }
  .wipe-knob { top: 72%; }
}

/* words on the lawn and road, the roof left clear for the wipe */
.hero2-copy { top: auto; bottom: 0; padding-top: 0; padding-bottom: clamp(26px, 4.5vh, 48px); }
.rlj-hero2 h1 { font-size: clamp(3rem, 6.6vw, 6.6rem); line-height: .9; margin-bottom: 16px; white-space: nowrap; }
.h1-a, .h1-b { display: inline-block; }
.h1-b { margin-left: .12em; font-size: 1.08em; }
.hero2-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.hero2-row .hero2-lead { margin: 0; flex: 1 1 380px; max-width: 34em; }
.hero2-row .acts { margin: 0; flex: none; }
.hero2-shade { background: linear-gradient(0deg, rgba(12,10,6,.86) 0%, rgba(12,10,6,.55) 22%, rgba(12,10,6,0) 42%), linear-gradient(180deg, rgba(12,10,6,.35) 0%, rgba(12,10,6,0) 16%); }
.wipe-knob { top: 40%; }
.illus { top: 18px; bottom: auto; }
.hero2-hint { top: 18px; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); }
.vid-pause { top: 18px; bottom: auto; }
@media (max-width: 900px) {
  .rlj-hero2 h1 { white-space: normal; font-size: clamp(2.8rem, 13vw, 4.2rem); }
  .h1-a, .h1-b { display: block; }
  .h1-b { margin: .08em 0 0; display: inline-block; }
  .hero2-row { gap: 16px; }
  .hero2-row .hero2-lead { flex-basis: 100%; font-size: 1.02rem; }
  .hero2-row .acts { width: 100%; }
  .hero2-shade { background: linear-gradient(0deg, rgba(12,10,6,.9) 0%, rgba(12,10,6,.7) 38%, rgba(12,10,6,0) 60%), linear-gradient(180deg, rgba(12,10,6,.35) 0%, rgba(12,10,6,0) 14%); }
  .wipe-knob { top: 30%; }
  .hero2-hint { top: 56px; font-size: .82rem; white-space: nowrap; }
  .illus { top: 14px; } .vid-pause { top: 12px; }
}
.wipe-stage .wipe-video { left: 0; top: 0; width: 100%; height: 100%; }

/* phones: the house is its own band, the words sit under it (checklist #32) */
@media (max-width: 900px) {
  .rlj-hero2 { height: auto; min-height: 0; max-height: none; display: flex; flex-direction: column; background: #14110b; }
  .wipe { position: relative; inset: auto; height: 108vw; max-height: 520px; overflow: hidden; }
  .wipe-stage { --sx: -44%; }
  .hero2-shade { display: none; }
  .hero2-copy { position: relative; bottom: auto; padding: 22px var(--gap) 30px; }
  .wipe-knob { top: 58%; }
  .hero2-hint { top: auto; bottom: 14px; left: 50%; }
  .illus { top: 12px; }
}

/* services: one tall roof tile, two stacked beside it */
.tiles { grid-template-columns: 1.35fr 1fr; grid-template-rows: 300px 300px; }
.tile { aspect-ratio: auto; height: 100%; }
.tile:first-child { grid-row: span 2; }
.tiles .tile:nth-child(2), .tiles .tile:nth-child(3) { grid-column: 2; }

/* the map */
.area { background: var(--sand); }
.area-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.area-lead { color: var(--mute); max-width: 32em; }
.map { margin: 0; background: #fff; padding: 14px; border-radius: 6px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.45); transform: rotate(1.2deg); }
.map-svg { display: block; width: 100%; height: auto; border-radius: 3px; }
.map-svg .land { fill: #f3e6c4; }
.map-svg .sea { fill: var(--sky); }
.map-svg .shore { fill: none; stroke: #fff; stroke-width: 3; }
.map-svg .river { fill: none; stroke: var(--sky); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.map-svg .sea-label { fill: rgba(255,255,255,.85); font: italic 900 30px var(--head); letter-spacing: .08em; text-transform: uppercase; }
.map-svg .riv-label { fill: var(--sky-deep); font: 700 15px var(--body); }
.map-svg .pin circle { fill: var(--sun); stroke: var(--char); stroke-width: 3; }
.map-svg .pin text { fill: var(--char); font: 900 22px var(--head); text-transform: uppercase; paint-order: stroke; stroke: #f3e6c4; stroke-width: 5px; }
.map-svg .hq circle { fill: var(--char); stroke: var(--sun); stroke-width: 4; }
.map-svg .hq text { font-size: 28px; }
.map-svg .ring { fill: none !important; stroke: var(--sun) !important; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(4.5); opacity: 0; } }
.map-svg .up text { fill: var(--sky-deep); stroke: none; font-size: 20px; }
.js .map .pin { opacity: 0; transform: translateY(-14px); transition: opacity .5s ease calc(var(--d) * .12s + .4s), transform .6s cubic-bezier(.3,1.6,.4,1) calc(var(--d) * .12s + .4s); }
.js .map.in .pin { opacity: 1; transform: none; }

/* estimate: a photo fills the left column */
.est-photo { margin: 28px 0 0; position: relative; transform: rotate(-2deg); box-shadow: 0 24px 40px -18px rgba(0,0,0,.55); border: 8px solid #fff; border-radius: 4px; }
.est-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: 45% 55%; }
.est-photo figcaption { position: absolute; left: 8px; bottom: 8px; font-size: .78rem; background: rgba(35,41,46,.7); color: #fff; padding: 3px 7px; border-radius: 2px; }
.js .est-photo.pop.in { transform: rotate(-2deg); }

@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr; grid-template-rows: none; }
  .tile, .tile:first-child { grid-row: auto; grid-column: auto !important; height: auto; aspect-ratio: 16/11; }
  .area-in { grid-template-columns: 1fr; }
  .map { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .js .map .pin { opacity: 1; transform: none; } .map-svg .ring { animation: none; } }
html { overflow-x: clip; }
@media (max-width: 900px) { .js .from-l { transform: translateX(-28px); } .js .from-r { transform: translateX(28px); } }

/* hero: the looping video alone (Shane 8:30 PM) */
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }
@media (max-width: 900px) {
  .hero-media { position: relative; inset: auto; height: 108vw; max-height: 520px; }
}