@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{--navy:#102c3f;--blue:#087ca7;--cyan:#66c9ed;--text:#173345;--muted:#566976;--line:#dce5ea;--pale:#f1f6f8}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;font-family:'DM Sans',sans-serif;color:var(--text);font-size:16px;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #0b8cb9;outline-offset:5px}.skip{position:fixed;top:-100px;left:20px;background:white;padding:12px;z-index:10}.skip:focus{top:10px}.header{max-width:1440px;margin:auto;min-height:110px;padding:22px 6%;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:inline-flex;align-items:center;gap:11px;line-height:1.1}.brand strong{font-family:Manrope,sans-serif;font-size:28px;letter-spacing:2.8px;font-weight:800}.brand small{display:block;font-size:10px;letter-spacing:2.7px;font-weight:700;margin-top:7px}.brand-symbol{position:relative;font-size:43px;font-weight:800;color:var(--blue);font-family:Manrope,sans-serif;line-height:1;width:39px}.brand-symbol span{font-size:24px;position:absolute;left:18px;bottom:0;color:var(--navy)}nav{display:flex;align-items:center;gap:36px;font-size:14px;font-weight:600}nav>a:not(.button):hover{color:var(--blue)}.button{border:0;border-radius:4px;padding:17px 23px;display:inline-flex;align-items:center;justify-content:space-between;gap:32px;background:var(--cyan);color:#0b2c3f;font-size:15px;font-weight:700;transition:background .2s,transform .2s;cursor:pointer}.button:hover{background:#8adbf7;transform:translateY(-2px)}.button span{font-size:22px;line-height:1}.button-small{background:var(--navy);color:white;padding:13px 18px;gap:20px;font-size:14px}.button-small:hover{background:#204760}.hero{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;min-height:650px;background:var(--navy);color:white}.hero-copy{padding:67px 10% 34px 12%;}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;display:flex;align-items:center;gap:12px;margin:0 0 25px;color:#a5d9ed}.eyebrow>span{height:1px;width:26px;background:var(--cyan)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Manrope,sans-serif}h1{font-size:clamp(45px,5.3vw,76px);line-height:1.07;letter-spacing:-3.5px;font-weight:650;margin-bottom:28px}h1 em{font-style:normal;color:var(--cyan)}.hero-description{color:#c5d3dc;max-width:380px;font-size:17px;line-height:1.75;margin-bottom:29px}.hero-email{display:block;color:#c5d3dc;font-size:14px;margin-top:17px;width:fit-content}.hero-email:hover{text-decoration:underline}.hero-bottom{display:flex;align-items:center;gap:13px;font-size:10px;letter-spacing:1.6px;color:#9ab3c3;margin-top:49px}.hero-bottom i{width:3px;height:3px;border-radius:50%;background:#6b91a7}.hero-visual{min-height:580px;position:relative;background:#244554;overflow:hidden}.photo-frame{position:absolute;inset:0;background:linear-gradient(135deg,#68868a,#254252);background-size:cover;background-position:center}.photo-frame img{width:100%;height:100%;object-fit:cover;object-position:57% center}.hero-visual:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,rgba(8,30,44,.65));pointer-events:none}.image-caption{position:absolute;z-index:1;bottom:45px;left:38px;right:38px;display:flex;align-items:center;gap:15px}.caption-icon{width:48px;height:48px;border:1px solid #b3c8ce80;display:grid;place-items:center;border-radius:50%;font-size:25px}.image-caption strong{font-size:18px;font-weight:500;display:block}.image-caption div>span{font-size:13px;color:#d5e0e5;display:block;margin-top:3px}.photo-label{position:absolute;top:29px;right:29px;background:#ffffffd9;backdrop-filter:blur(10px);padding:9px 13px;font-size:10px;color:var(--navy);letter-spacing:1.8px;font-weight:700}.section-wrap{max-width:1240px;margin:auto;padding:95px 40px}.dark{color:var(--blue);margin-bottom:18px}h2{font-size:44px;line-height:1.16;font-weight:600;letter-spacing:-1.8px;margin-bottom:0}.section-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:45px;margin-bottom:49px}.section-intro>p{max-width:380px;color:var(--muted);line-height:1.8;margin-bottom:3px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.service{padding:32px 30px 26px;position:relative;border-right:1px solid var(--line);transition:background .2s}.service:first-child{padding-left:0}.service:last-child{border:0;padding-right:0}.service:hover{background:#f1f6f870}.service-number{font-size:12px;color:#7b8b95;letter-spacing:2px}.service svg{display:block;width:44px;height:44px;margin:31px 0 24px;stroke:var(--blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.service h3{font-size:21px;letter-spacing:-.6px;font-weight:650;margin-bottom:13px}.service p{color:var(--muted);font-size:15px;line-height:1.8;min-height:80px;max-width:285px}.service-link{font-size:14px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:12px}.service-link b{font-size:22px;color:var(--blue)}.approach{display:grid;grid-template-columns:1fr 1fr;gap:70px;padding-top:20px;padding-bottom:95px}.approach>div>p:last-child{color:var(--muted);margin:24px 0 0}.approach ol{list-style:none;padding:0;margin:0}.approach li{display:flex;gap:22px;border-bottom:1px solid var(--line);padding:22px 0}.approach li:first-child{padding-top:0}.approach li:last-child{border:0;padding-bottom:0}.approach li>span{font-size:13px;color:var(--blue);padding-top:5px}.approach h3{font-size:19px;margin-bottom:7px;font-weight:650}.approach li p{color:var(--muted);font-size:15px;line-height:1.7;margin:0;max-width:410px}.estimate{background:var(--navy);color:white}.estimate-inner{max-width:1240px;margin:auto;padding:90px 40px;display:grid;grid-template-columns:.88fr 1.12fr;gap:85px}.estimate-copy{padding-top:17px}.estimate h2{font-size:44px;margin-bottom:24px}.estimate-copy>p:not(.eyebrow){color:#b9cbd7;max-width:340px;line-height:1.8}.direct-contact{margin-top:43px}.direct-contact>span{display:block;font-size:10px;letter-spacing:1.8px;color:#9eb8c9;margin-bottom:10px}.direct-contact a{color:var(--cyan);font-size:19px;display:inline-flex;gap:15px;align-items:center}.direct-contact a:hover{text-decoration:underline}.estimate-copy>.estimate-note{font-size:12px;margin-top:65px;color:#96aebd!important;max-width:320px!important}form{background:white;color:var(--text);padding:34px;border-radius:6px}form h3{font-size:24px;letter-spacing:-.8px;margin-bottom:5px;font-weight:650}.form-intro{font-size:14px;color:var(--muted);margin-bottom:23px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 17px}label{font-size:13px;font-weight:600}label>span{color:var(--blue)}label .optional{color:#72818c;font-weight:400;font-size:12px}.full{grid-column:1/-1}input,select,textarea{display:block;width:100%;margin-top:7px;padding:12px 11px;border:1px solid #d5dfe5;border-radius:3px;background:#fff;color:var(--text);font-size:14px;line-height:1.5;transition:border-color .2s;min-width:0}input::placeholder,textarea::placeholder{color:#788995}textarea{resize:vertical}input:focus,select:focus,textarea:focus{outline:2px solid #b8e9fb;border-color:#1689b2}.form-note{font-size:12px;line-height:1.65;color:#627582;margin:19px 0}.submit{width:100%;background:var(--blue);color:white;font-size:14px;padding:16px 19px}.submit:hover{background:#096c90}.estimate [hidden]{display:none}#form-result{background:var(--pale);padding:17px;margin-top:20px;font-size:14px;border-left:3px solid var(--blue)}#form-result p{margin:7px 0 12px}#form-result a{text-decoration:underline}#copy-draft{border:1px solid var(--blue);padding:8px 12px;margin-top:12px;background:white;color:var(--blue);border-radius:3px;cursor:pointer;font-size:13px}#copy-status{display:block;font-size:13px;margin-top:6px}footer{max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:38px 6%}footer .brand strong{font-size:22px}footer .brand small{font-size:8px;letter-spacing:2px}footer .brand-symbol{font-size:35px;width:33px}footer .brand-symbol span{font-size:20px;left:15px}footer p{font-size:14px;color:var(--muted);margin:0}footer>span{font-size:12px;color:#788995}@media(min-width:1441px){.hero{border-radius:5px;overflow:hidden;margin:0 35px;max-width:none}.hero-copy{padding-left:max(60px,calc((100vw - 1200px)/2))}.hero-visual{min-height:680px}}@media(max-width:1000px){.header{padding:23px 5%;min-height:95px}nav{gap:20px}h1{font-size:59px}.hero-copy{padding:53px 9% 30px}.hero-description{font-size:16px}.hero{min-height:610px}.section-wrap{padding:70px 30px}.approach{padding-top:5px;gap:40px}.estimate-inner{padding:65px 30px;gap:40px;grid-template-columns:.8fr 1.2fr}.estimate h2,h2{font-size:38px}form{padding:27px}.form-grid{grid-template-columns:1fr}.image-caption{left:25px;right:25px}.service{padding-left:22px;padding-right:22px}footer>p{display:none}}@media(max-width:700px){html{scroll-padding-top:18px}.header{min-height:87px;padding:19px 22px}.brand strong{font-size:23px}.brand small{font-size:8px;letter-spacing:2px}.brand-symbol{font-size:36px;width:32px}.brand-symbol span{font-size:20px;left:16px}nav>a:not(.button){display:none}.button-small{padding:11px 13px;font-size:12px;gap:10px}.button-small span{display:none}.hero{grid-template-columns:1fr}.hero-copy{padding:45px 27px 30px}.eyebrow{font-size:10px;margin-bottom:23px}h1{font-size:clamp(50px,11.5vw,72px);letter-spacing:-2.5px}.hero-description{max-width:360px}.hero-bottom{margin-top:34px;font-size:9px;gap:12px}.hero-visual{min-height:370px}.image-caption{bottom:26px;left:27px}.image-caption strong{font-size:16px}.photo-label{font-size:9px;top:20px;right:20px}.section-wrap{padding:58px 26px}.section-intro{display:block;margin-bottom:32px}.section-intro>p{margin-top:23px;font-size:15px}h2,.estimate h2{font-size:37px;letter-spacing:-1.6px}.service-grid{grid-template-columns:1fr}.service,.service:first-child,.service:last-child{padding:27px 0;border:0;border-bottom:1px solid var(--line)}.service:last-child{border:0}.service svg{position:absolute;top:30px;right:0;margin:0;width:37px;height:37px}.service h3{margin-top:20px}.service p{min-height:0;max-width:310px;margin-bottom:22px}.service-link{justify-content:flex-start;gap:22px}.approach{grid-template-columns:1fr;padding-top:0;gap:32px}.approach li{padding:21px 0}.estimate-inner{grid-template-columns:1fr;padding:50px 22px;gap:30px}.estimate-copy{padding:0 4px}.direct-contact{margin-top:26px}.estimate-copy>.estimate-note{margin-top:24px;max-width:100%!important}form{padding:27px 22px}.form-grid{gap:17px}label{font-size:14px}input,select,textarea{font-size:16px}.form-note{font-size:12px}footer{padding:30px 25px;align-items:flex-start;flex-direction:column;gap:22px}footer>span{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* The outer section provides scroll distance; only the viewport is pinned. */
.header { position: absolute; inset: 0 0 auto; z-index: 3; max-width: none; color: white; }
.header .brand-symbol, .header .brand-symbol span { color: var(--cyan); }
.header .button-small { background: #ffffffeb; color: var(--navy); }
.hero-scroll { position: relative; background: var(--navy); }
.hero-scroll.is-scrubbable { height: 500vh; height: 500svh; }
.hero { position: sticky; top: 0; isolation: isolate; display: flex; align-items: center; overflow: hidden; width: 100%; max-width: none; margin: 0; border-radius: 0; min-height: 0; height: 100vh; height: 100svh; }
.hero-background, .hero-video { position: absolute; inset: 0; z-index: -3; display: block; width: 100%; height: 100%; }
.hero-background img, .hero-video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-video { z-index: -2; opacity: 0; pointer-events: none; }
.has-video-frame .hero-video { opacity: 1; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(7,24,37,.88),rgba(7,24,37,.68) 32%,rgba(7,24,37,.12) 70%); opacity: var(--copy-opacity,1); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 130px; z-index: -1; background: linear-gradient(transparent,rgba(7,24,37,.6)); pointer-events: none; }
.hero-copy { width: min(760px,100%); padding: 125px clamp(28px,6vw,90px) 95px; opacity: var(--copy-opacity,1); }
.hero-copy:focus-within { opacity: 1; }
.hero-description, .hero-email { color: #e0e8ee; }
.hero-bottom { color: #c3d2dd; margin-top: 30px; }
.hero-scroll-guide { position: absolute; bottom: 27px; left: 6%; right: 6%; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; letter-spacing: .7px; }
.hero-scroll-guide a { padding: 8px 0; }
.hero-scroll-guide a:hover { text-decoration: underline; }
.scroll-instruction { display: none; }
.is-scrubbable .scroll-instruction { display: inline; }
.hero-scroll-guide span span { margin-left: 12px; }
.hero-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #ffffff25; }
.hero-progress>span { display: block; height: 100%; background: var(--cyan); transform-origin: left; transform: scaleX(var(--scroll-progress,0)); }
@media (max-width:700px) {
  .header { padding: 19px 22px; }
  .hero-copy { padding: 110px 26px 90px; }
  .hero h1 { font-size: clamp(42px,10.8vw,65px); margin-bottom: 22px; }
  .hero .eyebrow { margin-bottom: 20px; }
  .hero-description { font-size: 15px; line-height: 1.65; margin-bottom: 23px; }
  .hero-bottom { margin-top: 23px; }
  .hero::before { background: linear-gradient(90deg,rgba(7,24,37,.84),rgba(7,24,37,.4)); }
  .hero-scroll-guide { left: 26px; right: 26px; font-size: 11px; bottom: 20px; }
}
@media (max-height:700px) {
  .hero-copy { padding-top: 95px; padding-bottom: 65px; }
  .hero h1 { font-size: clamp(34px,7vh,55px); margin-bottom: 18px; }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero-description { margin-bottom: 18px; font-size: 14px; }
  .hero-bottom { display: none; }
}
@media (max-height:480px) and (min-width:701px) {
  .header { min-height: 65px; padding-top: 12px; padding-bottom: 12px; }
  .hero-copy { width: 90%; padding-top: 80px; }
  .hero h1 { font-size: 36px; }
  .hero h1 br { display: none; }
  .hero-description, .hero-email, .hero .eyebrow { display: none; }
}

/* Custom FlowX identity and coordinated service artwork. */
.brand-mark { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; clip-path: inset(4% round 14%); }
footer .brand-mark { width: 48px; height: 48px; }
.service-icon { display: block; width: 88px; height: 88px; object-fit: contain; margin: 18px 0 17px -10px; mix-blend-mode: multiply; }
@media (max-width:700px) {
 .brand-mark { width: 44px; height: 44px; }
 .header .brand { gap: 8px; }
 .header { gap: 16px; }
 .service-icon { position: absolute; top: 21px; right: -8px; width: 72px; height: 72px; margin: 0; }
}

/* Soft edges carry from controls to the full-width section transitions. */
:root { --section-radius: 64px; --card-radius: 28px; }
.button, #copy-draft, .skip { border-radius: 999px; }
.button { padding-left: 27px; padding-right: 27px; }
.button-small { padding-left: 22px; padding-right: 22px; }
.hero-scroll-guide a { padding: 9px 17px; border: 1px solid #ffffff55; border-radius: 999px; background: #102c3f38; }
.hero-progress, .hero-progress>span { border-radius: 999px; }
.services { position: relative; max-width: none; background: white; padding-inline: max(40px, calc((100% - 1160px) / 2)); }
.services::before { content: ""; position: absolute; top: calc(-1 * var(--section-radius)); left: 0; right: 0; height: var(--section-radius); background: white; border-radius: var(--section-radius) var(--section-radius) 0 0; pointer-events: none; }
.service-grid { border: 0; gap: 22px; }
.service, .service:first-child, .service:last-child { border: 1px solid #e2ebef; border-radius: var(--card-radius); padding: 30px 27px 27px; background: #f5f9fa; transition: background .2s, border-color .2s, transform .2s; }
.service:hover { background: #edf6f9; border-color: #a7d6e7; transform: translateY(-3px); }
.service-link b { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; border-radius: 50%; background: white; }
.approach { max-width: none; margin: 0 18px 36px; padding: 80px max(40px, calc((100% - 1160px) / 2 - 18px)); border-radius: var(--section-radius); background: var(--pale); }
.approach li>span { display: grid; place-items: center; align-self: flex-start; flex: 0 0 38px; height: 38px; padding: 0; border-radius: 50%; background: white; }
.estimate { margin: 0 18px; border-radius: var(--section-radius); }
form { border-radius: var(--card-radius); }
input, select, textarea { border-radius: 14px; padding-left: 14px; padding-right: 14px; }
#form-result { border-radius: 18px; }
@media (max-width:1000px) {
 :root { --section-radius: 48px; }
 .services { padding-inline: 30px; }
 .service-grid { gap: 16px; }
 .service, .service:first-child, .service:last-child { padding: 26px 22px; }
 .approach { padding: 60px 30px; gap: 35px; }
 .estimate-inner { gap: 35px; }
}
@media (max-width:700px) {
 :root { --section-radius: 34px; --card-radius: 24px; }
 .header .button-small { padding: 11px 16px; }
 .header { padding-inline: 20px; gap: 12px; }
 .services { padding: 45px 22px 50px; }
 .service-grid { gap: 16px; }
 .service, .service:first-child, .service:last-child { padding: 26px 24px; }
 .service-icon { right: 14px; top: 17px; width: 64px; height: 64px; }
 .service h3 { max-width: calc(100% - 28px); font-size: 20px; }
 .service p { margin-top: 17px; }
 .service-link { justify-content: space-between; gap: 10px; }
 .approach { margin: 0 10px 22px; padding: 44px 23px; gap: 32px; }
 .approach li { gap: 15px; }
 .estimate { margin: 0 10px; }
 .estimate-inner { padding: 44px 16px; }
 form { padding: 27px 20px; }
 .hero-scroll-guide { left: 22px; right: 22px; gap: 10px; }
 .hero-scroll-guide a { padding: 8px 12px; }
}

/* A staggered photo collage keeps the existing kitchen and bathroom palette. */
.spaces { padding-top: 5px; padding-bottom: 95px; }
.spaces .section-intro>p { max-width: 345px; }
.spaces-collage { display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: 290px 250px; gap: 22px; }
.spaces-collage figure { position: relative; margin: 0; border-radius: 34px; overflow: hidden; isolation: isolate; background: var(--pale); }
.spaces-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.space-kitchen { grid-column: 1; grid-row: 1; }
.space-bathroom { grid-column: 2; grid-row: 1 / 3; margin-top: 45px!important; }
.space-bathroom img { object-position: 40% center; }
.space-detail { grid-column: 1; grid-row: 2; margin-left: 75px!important; }
.space-detail img { object-position: center 20%; }
@media (max-width:1000px) {
 .spaces { padding-top: 0; padding-bottom: 70px; }
 .spaces-collage { grid-template-rows: 250px 220px; gap: 18px; }
 .space-detail { margin-left: 38px!important; }
}
@media (max-width:700px) {
 .spaces { padding: 0 22px 50px; }
 .spaces-collage { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 290px; gap: 12px; }
 .spaces-collage figure { border-radius: 24px; }
 .space-kitchen { grid-column: 1 / 3; grid-row: 1; }
 .space-bathroom { grid-column: 1; grid-row: 2; margin-top: 0!important; }
 .space-detail { grid-column: 2; grid-row: 2; margin-left: 0!important; margin-top: 32px!important; }
 .space-detail img { object-position: 35% center; }
}

/* Keep estimate and click-to-call actions together. */
.hero-actions { display: flex; align-items: stretch; flex-wrap: wrap; gap: 12px; }
.hero-actions .button { gap: 18px; white-space: nowrap; }
.button-call { justify-content: center; background: #ffffff12; color: white; border: 1px solid #ffffff85; }
.button-call:hover { background: #ffffff25; }
.header .button-call { background: #102c3f75; color: white; border-color: #ffffff85; white-space: nowrap; }
.header .button-call:hover { background: #102c3faa; }
@media (max-width:1100px) { .header nav { display: none; } }
@media (max-width:700px) {
 .header { flex-wrap: wrap; justify-content: center; gap: 12px; padding: 15px 20px; }
 .header nav { width: 100%; justify-content: center; gap: 8px; }
 .header .button-small { padding: 10px 14px; font-size: 12px; min-height: 42px; }
 .hero-copy { padding-top: 160px; }
 .hero-actions { gap: 10px; }
 .hero-actions .button { padding: 13px 14px; min-height: 48px; font-size: 13px; }
 .hero-actions .button:not(.button-call) { gap: 8px; }
 .hero-actions .button:not(.button-call)>span { display: none; }
}
@media (max-width:380px) { .hero-actions .button { flex: 1 1 100%; } }

/* A continuous film fades into the review surface. */
.reviews { position: relative; isolation: isolate; overflow: hidden; margin: 0 18px 36px; border-radius: var(--section-radius); background: #0d2535; color: white; }
.review-media { position: absolute; inset: 0 0 auto; height: 650px; z-index: -2; }
.review-media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.review-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#0d2535 0%,rgba(13,37,53,.85) 12%,transparent 52%),linear-gradient(90deg,#0d2535 3%,rgba(13,37,53,.94) 30%,rgba(13,37,53,.38) 50%,transparent 72%); }
.reviews-inner { max-width: 1240px; margin: auto; padding: 76px 40px 40px; }
.reviews-heading { min-height: 350px; max-width: 510px; }
.reviews-heading h2 { font-size: clamp(36px,3.4vw,49px); line-height: 1.15; letter-spacing: -1.8px; }
.reviews-heading h2 em { color: var(--cyan); font-style: normal; }
.reviews-heading>p:last-child { color: #c0d2df; font-size: 16px; line-height: 1.8; margin-top: 23px; }
.reviews-label { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 19px; }
.reviews-label h3 { font-size: 22px; margin: 0; font-weight: 600; }
.reviews-label p { margin: 0; color: #c2d3de; font-size: 12px; }
.review-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.review-card { display: flex; flex-direction: column; margin: 0; padding: 28px; background: #193747dd; border: 1px solid #aecfdf30; border-radius: 28px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.review-stars { color: #f6cf7d; font-size: 18px; letter-spacing: 4px; margin-bottom: 18px; }
.review-card blockquote { font-size: 16px; line-height: 1.8; margin: 0 0 27px; color: #f2f7fa; }
.review-card figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-initial { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: #a4dbee12; color: #b0dbea; font-size: 12px; }
.review-card figcaption strong { display: block; font-size: 13px; font-weight: 600; }
.review-card figcaption small { display: block; color: #b6cad7; font-size: 12px; margin-top: 2px; }
.review-share { display: flex; align-items: center; justify-content: center; gap: 14px; width: fit-content; margin: 26px auto 0; color: #bfe6f6; font-size: 13px; }
.review-share:hover { text-decoration: underline; }
@media (max-width:1000px) {
 .reviews-inner { padding: 62px 30px 35px; }
 .reviews-heading { max-width: 430px; min-height: 345px; }
 .review-card { padding: 22px; }
 .review-card blockquote { font-size: 15px; }
}
@media (max-width:700px) {
 .reviews { margin: 0 10px 22px; }
 .review-media { height: 410px; }
 .review-media video { object-position: 76% center; }
 .review-media::after { background: linear-gradient(0deg,#0d2535 0%,rgba(13,37,53,.75) 13%,transparent 52%); }
 .reviews-inner { padding: 348px 23px 32px; }
 .reviews-heading { position: relative; min-height: 0; max-width: none; margin-bottom: 33px; }
 .reviews-heading h2 { font-size: 35px; letter-spacing: -1.6px; }
 .reviews-heading .eyebrow { margin-bottom: 16px; }
 .reviews-heading>p:last-child { margin-top: 20px; font-size: 15px; }
 .reviews-label { align-items: flex-start; flex-direction: column; gap: 7px; }
 .reviews-label p { max-width: 280px; font-size: 11px; }
 .review-grid { grid-template-columns: 1fr; gap: 14px; }
 .review-card { border-radius: 24px; padding: 24px; }
 .review-card blockquote { margin-bottom: 22px; }
 .review-stars { margin-bottom: 13px; }
 .review-share { font-size: 12px; gap: 8px; }
}

/* Compact spacing across the page, with room for readable content. */
.services { padding-top: 64px; padding-bottom: 64px; }
.section-intro { margin-bottom: 32px; }
.service, .service:first-child, .service:last-child { padding: 24px; }
.service-icon { width: 74px; height: 74px; margin-top: 12px; margin-bottom: 12px; }
.service p { min-height: 72px; margin-bottom: 16px; }
.spaces { padding-bottom: 64px; }
.spaces-collage { grid-template-rows: 240px 210px; gap: 18px; }
.space-bathroom { margin-top: 30px!important; }
.approach { padding-top: 55px; padding-bottom: 55px; margin-bottom: 24px; }
.approach li { padding-top: 16px; padding-bottom: 16px; }
.reviews { margin-bottom: 24px; }
.review-media { height: 555px; }
.reviews-inner { padding-top: 52px; padding-bottom: 30px; }
.reviews-heading { min-height: 280px; }
.reviews-heading h2 { font-size: clamp(34px,3vw,43px); }
.reviews-heading>p:last-child { margin-top: 18px; }
.review-card { padding: 22px; }
.review-card blockquote { font-size: 16px; line-height: 1.65; margin-bottom: 20px; }
.review-stars { margin-bottom: 13px; }
.review-share { margin-top: 20px; }
.reviews-label p { font-size: 12px; }
.estimate-inner { padding-top: 60px; padding-bottom: 60px; }
@media (max-width:700px) {
 .services { padding-top: 34px; padding-bottom: 38px; }
 .section-intro { margin-bottom: 25px; }
 .service, .service:first-child, .service:last-child { padding: 22px; }
 .service-icon { width: 60px; height: 60px; margin: 0; }
 .service p { min-height: 0; }
 .spaces { padding-bottom: 38px; }
 .spaces-collage { grid-template-rows: 190px 230px; gap: 12px; }
 .space-bathroom { margin-top: 0!important; }
 .approach { padding: 34px 23px; margin-bottom: 18px; gap: 25px; }
 .reviews { margin-bottom: 18px; }
 .review-media { height: 335px; }
 .reviews-inner { padding: 280px 22px 26px; }
 .reviews-heading { min-height: 0; margin-bottom: 25px; }
 .reviews-heading h2 { font-size: 32px; }
 .reviews-heading>p:last-child { font-size: 16px; }
 .review-card { padding: 20px; }
 .review-card blockquote { margin-bottom: 17px; }
 .review-grid { gap: 12px; }
 .review-initial { width: 34px; height: 34px; flex-basis: 34px; }
 .estimate-inner { padding-top: 36px; padding-bottom: 36px; }
}

/* Native portrait footage gives phones the same immersive opening as desktop. */
@media (max-width:700px) and (orientation:portrait) {
 .hero-background, .hero-video { inset: 0; height: 100%; aspect-ratio: auto; transform: none; border-radius: 0; }
 .hero-background img, .hero-video { object-fit: cover; object-position: center; }
 .hero-background img { display: block; }
 .hero-copy { align-self: center; padding: 145px 24px 110px; }
 .hero h1 { font-size: clamp(40px,11vw,54px); line-height: 1.08; letter-spacing: -1.8px; margin-bottom: 20px; }
 .hero .eyebrow, .hero-bottom { display: none; }
 .hero-description { font-size: 15px; line-height: 1.6; margin-bottom: 22px; max-width: 330px; }
 .hero-actions { gap: 8px; }
 .hero-actions .button { flex: 1 1 0; padding: 12px 9px; min-height: 44px; font-size: 12px; justify-content: center; }
 .hero-email { font-size: 13px; margin-top: 14px; }
 .hero::before { background: linear-gradient(180deg,rgba(7,24,37,.62),rgba(7,24,37,.48) 48%,rgba(7,24,37,.22)); }
 .hero::after { height: 160px; background: linear-gradient(transparent,rgba(7,24,37,.76)); }
}
@media (max-width:700px) and (orientation:portrait) and (max-height:740px) {
 .hero-copy { padding-top: 135px; padding-bottom: 85px; }
 .hero h1 { font-size: 38px; margin-bottom: 16px; }
 .hero-description { font-size: 14px; margin-bottom: 18px; }
}

/* Full customer quotes remain available without lengthening the initial section. */
.review-card figcaption strong { font-size: 14px; }
.more-reviews { margin-top: 22px; }
.more-reviews summary { width: fit-content; margin: auto; cursor: pointer; padding: 11px 20px; border: 1px solid #86afc466; border-radius: 999px; color: #d6eff9; font-size: 14px; list-style: none; }
.more-reviews summary::-webkit-details-marker { display: none; }
.more-reviews summary::after { content: " +"; margin-left: 10px; }
.more-reviews[open] summary::after { content: " −"; }
.more-reviews summary:hover { background: #ffffff0c; }
.more-reviews summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.reviews-hide, .more-reviews[open] .reviews-show { display: none; }
.more-reviews[open] .reviews-hide { display: inline; }
.more-reviews[open]>.review-grid { margin-top: 22px; }

/* Local availability and a direct estimate request, staged for review. */
.coverage { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; padding-top: 0; padding-bottom: 64px; }
.coverage h2 { font-size: clamp(28px,3vw,36px); letter-spacing: -1.2px; }
.coverage .eyebrow { margin-bottom: 12px; }
.coverage-areas { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.coverage-areas li { padding: 6px 13px; border: 1px solid #dce8ee; border-radius: 999px; font-size: 14px; color: #365767; background: #f5f9fa; }
.coverage-hours { display: flex; gap: 20px; align-items: flex-start; padding: 28px; border-radius: 28px; background: #102c3f; color: white; }
.hours-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; background: #66c9ed1f; border: 1px solid #66c9ed33; border-radius: 50%; color: var(--cyan); }
.hours-icon svg { width: 26px; height: 26px; }
.coverage-hours strong { display: block; font: 600 21px/1.3 Manrope,sans-serif; letter-spacing: -.5px; }
.coverage-hours p { margin: 9px 0 16px; color: #c1d1dc; font-size: 14px; line-height: 1.6; }
.coverage-hours a { display: inline-flex; gap: 18px; align-items: center; color: var(--cyan); font-size: 15px; font-weight: 650; }
.coverage-hours a:hover { text-decoration: underline; }
.preview-note { padding: 11px 13px; margin: 16px 0 22px; border: 1px solid #b8ddeb; border-radius: 12px; background: #eff8fc; color: #27536a; font-size: 13px; line-height: 1.5; }
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.submit .submit-label { font-size: 14px; line-height: 1.4; }
.submit:disabled { opacity: .65; cursor: wait; transform: none; }
#form-result { border-left: 0; border: 1px solid #b8ddeb; padding: 20px; }
#form-result strong { display: block; font-size: 16px; color: #123f52; }
#form-result p { color: #365a69; margin: 9px 0 0; font-size: 14px; line-height: 1.65; }
#form-result:focus { outline: 2px solid #1689b2; outline-offset: 3px; }
#form-result[data-state="error"] { background: #fff6f2; border-color: #e7b7a4; }
#form-email-fallback { display: inline-block; margin-top: 14px; font-weight: 650; }
#form-email-fallback[hidden] { display: none; }
.form-direct-call { margin: 19px 0 0; text-align: center; font-size: 13px; color: #607782; }
.form-direct-call a { color: #087ca7; font-weight: 650; white-space: nowrap; }
.form-direct-call a:hover { text-decoration: underline; }
.mobile-call { display: none; }
@media (max-width:700px) {
 .coverage { grid-template-columns: 1fr; gap: 24px; padding: 0 22px 38px; }
 .coverage h2 { max-width: 330px; font-size: 30px; }
 .coverage-areas { margin-top: 18px; }
 .coverage-hours { padding: 23px; gap: 16px; border-radius: 24px; }
 .coverage-hours strong { font-size: 20px; }
 .coverage-hours p { margin-bottom: 12px; }
 footer { padding-bottom: calc(116px + env(safe-area-inset-bottom,0px)); }
 .mobile-call { position: fixed; z-index: 10; bottom: calc(16px + env(safe-area-inset-bottom,0px)); left: 22px; right: 22px; max-width: 380px; margin: 0 auto; display: flex; align-items: center; gap: 13px; padding: 12px 18px 12px 13px; border: 1px solid #a6e1f5; border-radius: 999px; background: #66c9edf5; color: #0b2c3f; box-shadow: 0 8px 30px #051b3240; backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity .2s,transform .2s,visibility .2s; }
 .mobile-call.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
 .mobile-call-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #ffffff6b; flex: 0 0 auto; }
 .mobile-call-icon svg { width: 20px; height: 20px; }
 .mobile-call strong { display: block; font-size: 15px; line-height: 1.25; }
 .mobile-call small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.3; }
 .mobile-call-arrow { margin-left: auto; font-size: 24px; }
}

/* Approved FX artwork, shared by the header and footer. */
.brand-lockup { display: block; width: 270px; height: auto; aspect-ratio: 1180 / 264; object-fit: contain; flex: 0 0 auto; }
.brand-lockup-dark { width: 240px; background: linear-gradient(90deg,#00bfe9 0 37%,var(--navy) 37% 100%); -webkit-mask: url("assets/flowx-logo-approved.webp") center / contain no-repeat; mask: url("assets/flowx-logo-approved.webp") center / contain no-repeat; }
@media (max-width:700px) { .brand-lockup { width: min(230px,66vw); } .brand-lockup-dark { width: 230px; } }
@media (max-height:480px) and (min-width:701px) { .header .brand-lockup { width: 215px; } }