/* Fill the available first viewport, while letting longer content grow naturally. */
.hero-background{position:relative;isolation:isolate;overflow:clip;padding-top:0;background:#fff}
.hero-stage{position:relative;isolation:isolate;min-height:calc(100svh - var(--hero-chrome,151px) - var(--hero-mobile-bar,0px));overflow:clip;background:#fff}
.hero-backdrop{position:absolute;inset:0;z-index:-3}
.hero-backdrop img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
/* The original photograph already fades on the left. Keep the roller uncovered. */
.hero-light-overlay{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#fff 0%,#ffffffb3 23%,#ffffff33 35%,transparent 44%)}
.hero-content{min-height:inherit;display:flex;align-items:center}
.hero-background .hero-copy{width:min(700px,58%);min-width:0;padding-block:clamp(28px,4.5svh,60px);position:relative;z-index:1}
.hero-background .hero-copy .eyebrow{font-size:13px;line-height:1.8;letter-spacing:.12em;margin-bottom:clamp(14px,2.5svh,25px)}
.hero-background h1{font-size:clamp(48px,min(4.8vw,7.8svh),76px);line-height:1.12;letter-spacing:-.055em}
.hero-background .hero-description{font-size:20px;line-height:1.7;max-width:580px;margin-top:clamp(18px,2.8svh,28px);color:#454640}
.hero-background .hero-promise{font-size:16px;line-height:1.7;gap:10px 21px;margin-block:clamp(17px,2.5svh,25px);max-width:620px}
.hero-background .hero-promise .icon{width:18px;height:18px;flex-shrink:0}
.hero-background .hero-actions{gap:12px;display:flex;flex-wrap:wrap;min-width:0}
.hero-background .hero-actions .button{min-height:56px;padding:15px 19px;font-size:16px;gap:10px}
.hero-background .hero-actions .button-wa{margin-top:0;background:var(--green);border-color:var(--green);color:#fff;transform:none}
.hero-background .hero-actions .button-wa:is(:hover,:focus-visible){background:#0f633f;border-color:#0f633f;color:#fff;transform:none;box-shadow:0 4px 12px #14784d26}
.hero-background .hero-actions .button-wa:active{background:#0b4d31;border-color:#0b4d31;color:#fff;transform:none;box-shadow:inset 0 2px 4px #00000026}
.hero-background .hero-note{font-size:14px;line-height:1.8;max-width:590px;margin-top:16px;text-align:left;color:#50514a}
.hero-background .hero-phone{margin-top:clamp(18px,2.8svh,28px);gap:13px}
.hero-background .phone-circle{width:46px;height:46px}
.hero-background .hero-phone>span+span{font-size:14px;line-height:1.7}
.hero-background .hero-phone strong{font-size:22px}
.hero-background .quick-proof{margin-top:0;padding-block:31px 35px;position:relative;background:transparent;gap:24px}
.hero-background .quick-proof strong{font-size:29px;line-height:1.5}
.hero-background .quick-proof span{font-size:15px;line-height:1.7}
.hero-background .paint-word>svg{height:19px;bottom:0}
@media(min-width:1600px){.hero-background .hero-copy{width:720px}.hero-backdrop img{object-position:center 40%}}
@media(max-width:1190px){.hero-background .hero-copy{width:64%}.hero-background h1{font-size:clamp(46px,min(5.3vw,7.8svh),62px)}.hero-background .hero-description{font-size:19px;max-width:500px}.hero-background .hero-actions .button{padding-inline:16px}.hero-background .quick-proof strong{font-size:26px}.hero-background .quick-proof span{font-size:14px}}
@media(max-width:960px){.hero-background .hero-copy{width:69%}.hero-background h1{font-size:clamp(43px,5.8vw,54px)}.hero-background .hero-description{font-size:18px;max-width:450px}.hero-background .hero-copy .eyebrow{font-size:12px}.hero-background .hero-actions{gap:10px}.hero-background .hero-actions .button{font-size:15px;padding:14px 16px;min-height:52px}.hero-background .hero-promise{gap:9px 17px}.hero-background .hero-note{max-width:430px}.hero-background .quick-proof{gap:16px}.hero-background .quick-proof>div{padding-left:17px}.hero-background .quick-proof>div:first-child{padding-left:0}.hero-background .quick-proof strong{font-size:23px}.hero-background .quick-proof span{font-size:14px}}
@media(max-width:700px){
  .hero-content{align-items:center}
  .hero-background .hero-copy{width:100%;padding-block:clamp(24px,4svh,40px)}
  .hero-backdrop{top:28%}
  .hero-backdrop img{object-position:72% center}
  .hero-light-overlay{background:linear-gradient(180deg,#fff 0%,#fff 29%,#ffffffeb 43%,#ffffff8c 57%,#ffffff1a 76%,transparent 100%)}
  .hero-background h1{font-size:clamp(34px,10vw,58px);line-height:1.14}
  .hero-background .hero-copy .eyebrow{font-size:12px;letter-spacing:.08em;margin-bottom:17px}
  .hero-background .hero-description{font-size:18px;max-width:100%;line-height:1.65;margin-top:20px}
  .hero-background .hero-promise{font-size:16px;line-height:1.7;gap:8px 18px;margin-block:20px}
  .hero-background .hero-actions{display:grid;grid-template-columns:minmax(0,1fr);max-width:390px;gap:10px}
  .hero-background .hero-actions .button{font-size:16px;min-height:52px;padding:13px 16px;justify-content:center}
  .hero-background .hero-note{font-size:14px;max-width:360px;margin-top:16px;display:inline-block;background:#fffffff2;border-radius:6px;padding:6px 10px}
  .hero-background .hero-phone{display:inline-flex}
  .hero-background .quick-proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 0;padding-block:29px 32px}
  .hero-background .quick-proof>div{padding-left:20px}
  .hero-background .quick-proof>div:first-child,.hero-background .quick-proof>div:nth-child(3){padding-left:0}
  .hero-background .quick-proof strong{font-size:25px}
  .hero-background .quick-proof span{font-size:14px}
  .hero-background .paint-word>svg{height:15px}
}
@media(max-width:370px){.hero-background .hero-description{font-size:17px}.hero-background .hero-promise{gap:7px 12px}.hero-background .quick-proof strong{font-size:22px}}
/* Compact vertical rhythm on short windows; no fixed height or clipped content. */
@media(max-height:740px){.hero-background .hero-copy{padding-block:24px}.hero-background .hero-copy .eyebrow{margin-bottom:14px}.hero-background .hero-description{margin-top:17px}.hero-background .hero-promise{margin-block:17px}.hero-background .hero-note{margin-top:13px}.hero-background .hero-phone{margin-top:17px}}

/* The white proof strip sits below the photograph and ends the first screen. */
.hero-background{display:flex;flex-direction:column;min-height:calc(100svh - var(--hero-chrome,151px) - var(--hero-mobile-bar,0px))}
.hero-stage{display:flex;flex-direction:column;flex:1;min-height:0}
.hero-content{flex:1;min-height:0}
.hero-background .quick-proof{flex-shrink:0;padding-block:8px;gap:24px}
.hero-background .quick-proof strong{font-size:27px;line-height:1.2}
.hero-background .quick-proof span{font-size:15px;line-height:1.4}
/* Center the ribbon between the About content and the Services heading. */
.hero-bottom-ribbon{--ribbon-gap:clamp(32px,3.6vw,56px);position:relative;flex-shrink:0;overflow:hidden;height:calc(52px + 2.1vw + var(--ribbon-gap) + var(--ribbon-gap));isolation:isolate}
/* Carry the Services background up to the diagonal ribbon edge. */
.hero-bottom-ribbon::before{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:100%;background:var(--paper);transform:skewY(-1.2deg);transform-origin:center top;z-index:-1}
.hero-bottom-ribbon .paint-ribbon{position:absolute;left:-2px;right:-2px;top:50%;padding-block:12px;margin:0;clip-path:none;transform:translateY(-50%) rotate(-1.2deg);transform-origin:center}
.hero-bottom-ribbon .paint-ribbon>div{position:relative;left:50%;transform:translateX(-50%);font-size:16px;line-height:1.5;gap:36px}
.hero-bottom-ribbon .paint-ribbon span{font-size:26px;line-height:1}
.about-section{padding-block-end:0}
.hero-bottom-ribbon+.section{padding-block-start:0}
/* Use the spare desktop height between content blocks, keeping all text visible. */
@media(min-width:701px){
 .hero-content{align-items:stretch}
 .hero-background .hero-copy{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;max-height:900px}
 .hero-background .hero-copy>*{flex-shrink:0}
}
@media(min-width:701px) and (max-height:880px){
 .hero-background .hero-copy{padding-block:16px}
 .hero-background .hero-copy .eyebrow{margin-bottom:20px}
 .hero-background h1{line-height:1.1}
 .hero-background .hero-description{font-size:18px;line-height:1.5;margin-top:24px}
 .hero-background .hero-promise{line-height:1.45;margin-block:22px}
 .hero-background .hero-actions .button{min-height:56px;padding-block:15px}
 .hero-background .hero-note{margin-top:16px;font-size:14px;line-height:1.5}
 .hero-background .hero-phone{margin-top:24px}
 .hero-background .hero-phone>span+span{line-height:1.4}
 .hero-background .hero-phone strong{line-height:1.4}
}
@media(min-width:701px) and (max-height:740px){
 .hero-background .hero-copy{padding-block:12px}
 .hero-background .hero-copy .eyebrow{margin-bottom:18px}
 .hero-background .hero-description{margin-top:22px}
 .hero-background .hero-promise{margin-block:20px}
 .hero-background .hero-note{margin-top:14px}
 .hero-background .hero-phone{margin-top:20px}
}
@media(max-width:960px){.hero-background .quick-proof strong{font-size:23px}.hero-background .quick-proof span{font-size:14px}}
@media(max-width:700px){
 .hero-background .hero-copy{padding-block:16px}
 .hero-background .hero-copy .eyebrow{margin-bottom:12px}
 .hero-background .hero-description{line-height:1.55;margin-top:16px}
 .hero-background .hero-promise{line-height:1.5;margin-block:14px}
 .hero-background .hero-actions{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0;align-items:stretch}
 .hero-background .hero-actions .button{font-size:16px;line-height:1.3;padding:10px 9px;gap:7px;min-height:52px;text-align:center}
 .hero-background .hero-note{font-size:14px;line-height:1.5;margin-top:12px;padding:4px 8px}
 .hero-background .hero-phone{margin-top:14px}
 .hero-background .hero-phone>span+span,.hero-background .hero-phone strong{line-height:1.4}
 .hero-background .quick-proof{padding-block:8px;gap:10px 0}
 .hero-background .quick-proof strong{font-size:22px;line-height:1.2}
 .hero-background .quick-proof span{font-size:14px;line-height:1.35}
 .hero-background .quick-proof>div{padding-left:16px}
 .hero-background .quick-proof>div:first-child,.hero-background .quick-proof>div:nth-child(3){padding-left:0}
 .hero-bottom-ribbon{height:calc(44px + 2.1vw + var(--ribbon-gap) + var(--ribbon-gap))}
 .hero-bottom-ribbon .paint-ribbon{padding-block:10px}
 .hero-bottom-ribbon .paint-ribbon>div{font-size:14px;line-height:1.4;gap:24px}
 .hero-bottom-ribbon .paint-ribbon span{font-size:22px}
}
@media(max-width:370px){.hero-background .quick-proof strong{font-size:20px}.hero-background .quick-proof>div{padding-left:12px}}

/* Fade only the photograph; the proof strip remains outside the photo stage. */
.hero-light-overlay::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#ffffffd9 0%,#ffffffb3 8%,transparent 22%)}
.hero-background .quick-proof{background:#fff;border-bottom:1px solid var(--line)}
.hero-background .quick-proof>div{background:transparent}

/* Center each proof point within its own desktop or mobile grid cell. */
.hero-background .quick-proof>div,
.hero-background .quick-proof>div:first-child,
.hero-background .quick-proof>div:nth-child(3){align-items:center;justify-content:center;text-align:center;padding-inline:8px}

/* Keep the phone near the actions and reserve breathing room below the group. */
.hero-contact-group{display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:100%;min-width:0}
.hero-contact-group .hero-actions{width:100%}
.hero-background .hero-contact-group .hero-phone{margin-top:0}
@media(min-width:701px){.hero-background .hero-copy{padding-block-end:clamp(32px,5svh,56px)}}
@media(max-width:700px){.hero-background .hero-copy{padding-block-end:24px}}

/* Four painted swatches keep the proof row bright without changing its height. */
.hero-background .quick-proof>div{position:relative;isolation:isolate;min-width:0;border-right:0;--proof-paint:var(--yellow)}
.hero-background .quick-proof>div::before{content:"";position:absolute;inset:-4px 0;z-index:-1;pointer-events:none;background:var(--proof-paint);-webkit-mask:url("assets/paint-swatch.svg") center/100% 100% no-repeat;mask:url("assets/paint-swatch.svg") center/100% 100% no-repeat}
.hero-background .quick-proof>div:nth-child(2){--proof-paint:#bfe4ce}
.hero-background .quick-proof>div:nth-child(3){--proof-paint:var(--blue)}
.hero-background .quick-proof>div:nth-child(4){--proof-paint:#ffc1bd}
.hero-background .quick-proof>div:nth-child(2n)::before{transform:scaleX(-1)}
.hero-background .quick-proof span{color:#454640}

/* Reveal only the paint, alternating brush direction between the four points. */
@media(prefers-reduced-motion:no-preference){
 .hero-background .quick-proof.paint-ready>div::before{clip-path:inset(0 100% 0 0)}
 .hero-background .quick-proof.paint-ready.is-painted>div::before{animation:proof-paint-on 950ms cubic-bezier(.32,.05,.24,1) var(--paint-delay,0ms) both}
 .hero-background .quick-proof>div:nth-child(2){--paint-delay:1050ms}
 .hero-background .quick-proof>div:nth-child(3){--paint-delay:2100ms}
 .hero-background .quick-proof>div:nth-child(4){--paint-delay:3150ms}
}
@keyframes proof-paint-on{
 0%{clip-path:inset(0 100% 0 0)}
 45%{clip-path:inset(0 48% 0 0)}
 75%{clip-path:inset(0 15% 0 0)}
 100%{clip-path:inset(0)}
}