/* ==========================================================
   TFS EXTERIOR CLEANING
   ========================================================== */

:root{
  --white:#ffffff;
  --paper:#f4f6f8;
  --paper-2:#e9edf1;
  --line:#dde3e9;
  --ink:#14181c;
  --ink-2:#3c454e;
  --ink-3:#6c7883;
  --sky:#0ea5e9;
  --sky-deep:#0284c7;
  --sky-wash:#e6f5fd;
  --leaf:#7dc242;

  --shell:min(1240px, 100% - 3rem);
  --r:14px;
  --ease:cubic-bezier(.22,1,.36,1);

  --f-display:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* author display rules (e.g. .quote__form{display:flex}) outrank the UA
   stylesheet's [hidden]{display:none}, so restate it with priority */
[hidden]{display:none !important}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video,iframe{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--f-display); font-weight:700; line-height:.95; letter-spacing:-.01em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.wrap{width:var(--shell); margin-inline:auto}

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:#fff; padding:.75rem 1.25rem}
.skip:focus{left:1rem; top:1rem}

:focus-visible{outline:2px solid var(--sky); outline-offset:3px; border-radius:4px}

/* ---------- buttons ------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f-display); font-size:1.05rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:1rem 1.9rem; border:1px solid transparent; border-radius:999px;
  cursor:pointer; transition:transform .4s var(--ease), background .25s, color .25s, box-shadow .35s, border-color .25s;
  white-space:nowrap;
}
.btn--primary{background:var(--sky); color:#fff; box-shadow:0 10px 26px -12px rgba(14,165,233,.85)}
.btn--primary:hover{background:var(--sky-deep); transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(14,165,233,.9)}
.btn--ghost{border-color:rgba(255,255,255,.5); color:#fff; backdrop-filter:blur(6px); background:rgba(255,255,255,.06)}
.btn--ghost:hover{background:rgba(255,255,255,.16); border-color:#fff; transform:translateY(-2px)}
.btn--sm{padding:.8rem 1.4rem; font-size:.95rem}
.btn--block{width:100%}

/* ---------- section heads ------------------------------- */
.sec__eyebrow{
  font-family:var(--f-display); font-weight:600; font-size:.9rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--sky-deep); margin-bottom:1rem;
}
.sec__eyebrow--light{color:#8fd8fb}
.sec__title{font-size:clamp(2.3rem,5.2vw,4rem); text-transform:uppercase; letter-spacing:-.005em}
.sec__title--light{color:#fff}
.sec__lede{margin-top:1.1rem; color:var(--ink-3); font-size:1.06rem; max-width:56ch}
.sec__head{max-width:70ch; margin-bottom:3.5rem}

/* ---------- nav ----------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; gap:2rem;
  padding:1rem clamp(1.1rem,3vw,2.4rem);
  transition:background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
  opacity:0; transition:opacity .45s var(--ease);
}
.nav.is-stuck::before{opacity:1}
.nav.is-stuck{padding-block:.6rem}

.nav__brand{display:flex; align-items:center; gap:.7rem; margin-right:auto}
.nav__brand img{border-radius:50%; box-shadow:0 4px 14px rgba(0,0,0,.28)}
.nav__brandtext{
  font-family:var(--f-display); font-weight:700; font-size:1.22rem;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; line-height:1;
  transition:color .45s var(--ease);
}
.nav__brandtext em{font-style:normal; font-weight:500; opacity:.72; letter-spacing:.16em; font-size:.72em}
.nav.is-stuck .nav__brandtext{color:var(--ink)}

.nav__links{display:flex; gap:2rem}
.nav__links a{
  font-family:var(--f-display); font-size:1.02rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.86);
  position:relative; padding-block:.2rem; transition:color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--sky); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__links a:hover::after{transform:scaleX(1)}
.nav.is-stuck .nav__links a{color:var(--ink-2)}
.nav.is-stuck .nav__links a:hover{color:var(--ink)}

.nav__cta{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--f-display); font-size:1.05rem; font-weight:600; letter-spacing:.06em;
  background:var(--sky); color:#fff; padding:.7rem 1.3rem; border-radius:999px;
  transition:background .25s, transform .4s var(--ease);
}
.nav__cta:hover{background:var(--sky-deep); transform:translateY(-2px)}
.nav__ctaicon svg{width:16px; height:16px}

/* ---------- hero ---------------------------------------- */
.hero{height:340vh; position:relative; background:var(--ink)}
.hero__sticky{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 10%, #22303a 0%, #0d1216 70%);
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(8,12,16,.62) 0%, rgba(8,12,16,.18) 34%, rgba(8,12,16,.30) 62%, rgba(8,12,16,.82) 100%),
    radial-gradient(75% 55% at 50% 52%, rgba(0,0,0,0) 0%, rgba(6,10,14,.55) 100%);
}
.hero__content{
  position:relative; text-align:center; color:#fff;
  padding:0 1.5rem; max-width:1100px;
  transform:translateY(var(--heroShift, 0px));
}
.hero__eyebrow{
  font-family:var(--f-display); font-weight:600; font-size:clamp(.8rem,1.3vw,.95rem);
  letter-spacing:.42em; text-transform:uppercase; color:#a9dcf7; margin-bottom:1.4rem;
  opacity:0; animation:fadeUp .9s var(--ease) .35s forwards;
}
.hero__title{
  font-size:clamp(3rem,11vw,9.5rem); text-transform:uppercase;
  line-height:.88; letter-spacing:-.01em;
  text-shadow:0 12px 44px rgba(0,0,0,.5);
}
.hero__title span{
  display:inline-block; opacity:0;
  letter-spacing:.5em; margin-right:-.5em;
  animation:trackIn 1.5s var(--ease) forwards;
}
.hero__title span:nth-child(1){animation-delay:.1s}
.hero__title span:nth-child(2){animation-delay:.24s}
.hero__title span:nth-child(3){animation-delay:.38s}
@keyframes trackIn{
  0%{opacity:0; letter-spacing:.55em; filter:blur(9px); transform:translateY(.12em)}
  60%{opacity:1; filter:blur(0)}
  100%{opacity:1; letter-spacing:.012em; margin-right:0; filter:blur(0); transform:translateY(0)}
}
.hero__sub{
  margin-top:1.5rem; font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.15rem,2.7vw,1.9rem); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
  opacity:0; animation:fadeUp 1s var(--ease) .95s forwards;
}
.hero__sub::after{
  content:""; display:block; width:64px; height:2px; margin:1.4rem auto 0;
  background:linear-gradient(90deg,var(--sky),var(--leaf));
}
.hero__actions{
  margin-top:2.4rem; display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap;
  opacity:0; animation:fadeUp 1s var(--ease) 1.15s forwards;
}
@keyframes fadeUp{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:translateY(0)}}

.hero__scroll{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-family:var(--f-display); font-size:.78rem; letter-spacing:.34em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
  opacity:0; animation:fadeUp 1s var(--ease) 1.5s forwards;
  transition:opacity .4s;
}
.hero__scroll i{display:block; width:1px; height:52px; background:linear-gradient(rgba(255,255,255,.7), transparent); position:relative; overflow:hidden}
.hero__scroll i::after{content:""; position:absolute; inset:0; background:var(--sky); animation:drip 2s linear infinite}
@keyframes drip{0%{transform:translateY(-100%)} 100%{transform:translateY(100%)}}
/* the fade-in above uses animation-fill-mode:forwards, which outranks a plain
   opacity declaration — drop the animation so this rule can take effect */
.hero.is-past .hero__scroll{animation:none; opacity:0; transform:translate(-50%,10px)}

/* ---------- story --------------------------------------- */
.story{position:relative; min-height:96vh; display:grid; align-items:center; overflow:hidden; color:#fff; padding:9rem 0}
.story__media{position:absolute; inset:-12% 0; z-index:0}
.story__video{width:100%; height:100%; object-fit:cover; will-change:transform}
.story__scrim{
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(8,13,18,.92) 0%, rgba(8,13,18,.72) 42%, rgba(8,13,18,.28) 100%);
}
.story__inner{position:relative; z-index:1; width:var(--shell); margin-inline:auto; max-width:none}
.story__line{
  font-size:clamp(3rem,8.5vw,7rem); text-transform:uppercase; line-height:.86;
  text-shadow:0 10px 40px rgba(0,0,0,.45);
}
.story__line br + *{}
.story__copy{margin-top:1.8rem; max-width:46ch; color:rgba(255,255,255,.82); font-size:1.1rem}
.story__facts{display:flex; flex-wrap:wrap; gap:2.6rem; margin-top:3rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.16)}
.story__facts li{display:flex; flex-direction:column}
.story__facts strong{
  font-family:var(--f-display); font-size:1.55rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:#fff;
}
.story__facts span{font-size:.9rem; color:rgba(255,255,255,.6)}

/* ---------- services ------------------------------------ */
.services{padding:8rem 0 9rem; background:var(--white); position:relative}
.services::before{
  content:""; position:absolute; inset:0 0 auto 0; height:52%;
  background:linear-gradient(180deg, var(--paper) 0%, rgba(244,246,248,0) 100%);
}
.services > .wrap{position:relative}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:2.4rem 2rem 2.6rem; position:relative; overflow:hidden;
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), border-color .4s;
}
.card::after{
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg, var(--sky), var(--leaf));
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.card:hover{transform:translateY(-6px); box-shadow:0 26px 50px -30px rgba(20,24,28,.42); border-color:transparent}
.card:hover::after{transform:scaleX(1)}
.card__icon{
  width:52px; height:52px; border-radius:12px; display:grid; place-items:center;
  background:var(--sky-wash); color:var(--sky-deep); margin-bottom:1.6rem;
  transition:background .4s, color .4s;
}
.card__icon svg{width:26px; height:26px}
.card:hover .card__icon{background:var(--sky); color:#fff}
.card h3{
  font-size:1.75rem; text-transform:uppercase; letter-spacing:.01em; margin-bottom:.85rem;
}
.card p{color:var(--ink-3); font-size:.98rem}

.card--cta{
  background:var(--ink); border-color:var(--ink);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
}
.card--cta h3{color:#fff}
.card--cta p{color:rgba(255,255,255,.62); margin-bottom:1.6rem}
.card--cta::after{transform:scaleX(1)}

/* ---------- before / after ------------------------------ */
.results{position:relative; min-height:100vh; display:grid; align-items:end; overflow:hidden; padding:8rem 0 6rem}
.results__media{position:absolute; inset:0; z-index:0}
.results__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(8,13,18,.95) 0%, rgba(8,13,18,.42) 42%, rgba(8,13,18,.55) 100%);
}
.results__inner{position:relative; z-index:2; max-width:none}
.results__copy{margin:1.2rem 0 2.2rem; max-width:48ch; color:rgba(255,255,255,.8); font-size:1.08rem}

.ba{position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:ew-resize}
.ba__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba__video--dirty{filter:saturate(.28) contrast(.8) brightness(.6) sepia(.5) hue-rotate(-8deg)}
.ba__clean{position:absolute; inset:0; width:50%; overflow:hidden; will-change:width}
.ba__clean .ba__video{width:100vw; max-width:none}
.ba__handle{
  position:absolute; top:0; bottom:0; left:50%; width:44px; margin-left:-22px;
  display:grid; place-items:center; z-index:3; cursor:ew-resize;
}
.ba__handle::before{content:""; position:absolute; top:0; bottom:0; width:2px; background:rgba(255,255,255,.9); box-shadow:0 0 22px rgba(0,0,0,.5)}
.ba__handle i{
  position:relative; width:44px; height:44px; border-radius:50%;
  background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.4);
}
.ba__handle i::before,.ba__handle i::after{
  content:""; position:absolute; top:50%; width:0; height:0;
  border-block:5px solid transparent; margin-top:-5px;
}
.ba__handle i::before{left:11px; border-right:7px solid var(--ink)}
.ba__handle i::after{right:11px; border-left:7px solid var(--ink)}
.ba__tag{
  position:absolute; top:calc(50% - 92px); z-index:2;
  font-family:var(--f-display); font-size:.78rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:#fff;
  background:rgba(10,14,18,.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:.4rem 1rem;
  pointer-events:none;
}
.ba__tag--l{left:clamp(1.5rem,5vw,4rem)}
.ba__tag--r{right:clamp(1.5rem,5vw,4rem)}

/* ---------- service area + quote ------------------------ */
.area{padding:8rem 0 7rem; background:var(--paper)}
.area__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:4rem; align-items:start}

.towns{display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem 1rem; margin:2.2rem 0 2.6rem}
.towns li{
  position:relative; padding-left:1.15rem; font-size:.96rem; color:var(--ink-2);
}
.towns li::before{
  content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%;
  background:var(--sky);
}

.map{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); box-shadow:0 20px 44px -34px rgba(20,24,28,.6)}
.map iframe{width:100%; height:320px; border:0; filter:grayscale(.55) contrast(1.02)}
.map__pin{
  position:absolute; left:1rem; bottom:1rem; background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px); border-radius:10px; padding:.65rem 1rem; line-height:1.25;
  box-shadow:0 8px 22px -12px rgba(20,24,28,.6);
}
.map__pin strong{display:block; font-family:var(--f-display); font-size:1.15rem; letter-spacing:.06em; text-transform:uppercase}
.map__pin span{font-size:.78rem; color:var(--ink-3)}

.area__contact{display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.6rem}
.area__contactitem{
  flex:1 1 210px; background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:1rem 1.2rem; transition:border-color .3s, transform .45s var(--ease), box-shadow .45s var(--ease);
}
.area__contactitem:hover{border-color:var(--sky); transform:translateY(-3px); box-shadow:0 18px 34px -26px rgba(14,165,233,.9)}
.area__contactitem span{display:block; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.area__contactitem strong{font-family:var(--f-display); font-size:1.35rem; letter-spacing:.03em}

/* quote card */
.quote{
  background:var(--ink); color:#fff; border-radius:20px; padding:2.8rem clamp(1.6rem,3vw,2.6rem) 2.6rem;
  position:sticky; top:6.5rem; box-shadow:0 40px 70px -44px rgba(12,16,20,.9);
  overflow:hidden;
}
.quote::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--sky), var(--leaf));
}
.quote__title{font-size:clamp(2rem,3.4vw,2.7rem); text-transform:uppercase}
.quote__lede{margin-top:.7rem; color:rgba(255,255,255,.62); font-size:.98rem}
.quote__form{margin-top:2rem; display:flex; flex-direction:column; gap:1.15rem}

.field{display:flex; flex-direction:column; gap:.45rem}
.field label{
  font-family:var(--f-display); font-size:.86rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.62);
}
.field input,.select select{
  width:100%; font-family:var(--f-body); font-size:1rem; color:#fff;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:10px; padding:.95rem 1rem; transition:border-color .25s, background .25s;
  appearance:none;
}
.field input::placeholder{color:rgba(255,255,255,.34)}
.field input:focus,.select select:focus{outline:none; border-color:var(--sky); background:rgba(255,255,255,.1)}
.field input.is-bad,.select select.is-bad{border-color:#f87171}

.select{position:relative}
.select select option{background:#1c2229; color:#fff}
.select svg{position:absolute; right:1rem; top:50%; margin-top:-9px; width:18px; height:18px; color:rgba(255,255,255,.55); pointer-events:none}

.err{min-height:1.05rem; font-size:.8rem; color:#fca5a5}
.hp{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden}

.quote__fine{margin-top:.4rem; font-size:.82rem; color:rgba(255,255,255,.44); text-align:center}

.quote__done{text-align:center; padding:2.5rem 0 1rem}
.quote__check{
  width:66px; height:66px; margin:0 auto 1.4rem; border-radius:50%;
  display:grid; place-items:center; background:rgba(125,194,66,.15); color:var(--leaf);
  border:1px solid rgba(125,194,66,.4);
}
.quote__check svg{width:30px; height:30px}
.quote__done h3{font-size:2rem; text-transform:uppercase}
.quote__done p{margin-top:.7rem; color:rgba(255,255,255,.68)}
.quote__done a{color:var(--sky); text-decoration:underline; text-underline-offset:3px}

/* ---------- footer -------------------------------------- */
.foot{background:var(--ink); color:rgba(255,255,255,.7); padding:5rem 0 2rem}
.foot__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; padding-bottom:3rem}
.foot__brand img{border-radius:50%; margin-bottom:1.2rem}
.foot__brand p{font-family:var(--f-display); font-size:1.3rem; letter-spacing:.14em; text-transform:uppercase; color:#fff}
.foot__col h4{font-size:1.15rem; letter-spacing:.22em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem}
.foot__col a,.foot__col span{display:block; font-size:.95rem; padding-block:.28rem; transition:color .25s}
.foot__col a:hover{color:var(--sky)}
.foot__bar{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12); padding-top:1.6rem; font-size:.84rem; color:rgba(255,255,255,.42);
}
.foot__bar a:hover{color:#fff}

/* ---------- reveal -------------------------------------- */
.reveal{opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.is-in{opacity:1; transform:none}

/* ---------- responsive ---------------------------------- */
@media (max-width:1080px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .area__grid{grid-template-columns:1fr; gap:3rem}
  .quote{position:static}
}

@media (max-width:820px){
  .nav__links{display:none}
  .nav__brandtext em{display:none}
  .nav__cta{font-size:.95rem; padding:.6rem 1rem}
}

@media (max-width:720px){
  :root{--shell:min(1240px, 100% - 2.2rem)}
  .hero{height:auto}
  .hero__sticky{position:relative; height:100svh; min-height:600px}
  .hero__title{letter-spacing:0}
  .hero__actions .btn{flex:1 1 100%}
  .story{padding:6rem 0; min-height:auto}
  .story__facts{gap:1.6rem 2rem}
  .services{padding:5rem 0 6rem}
  .sec__head{margin-bottom:2.4rem}
  .grid{grid-template-columns:1fr; gap:1rem}
  .card{padding:2rem 1.6rem 2.2rem}
  .results{min-height:88vh; padding:6rem 0 4rem}
  .ba__tag{top:1.5rem; font-size:.68rem; letter-spacing:.2em; padding:.32rem .8rem}
  .ba__tag--l{left:1rem}
  .ba__tag--r{right:1rem}
  .area{padding:5rem 0}
  .towns{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr; gap:2.2rem}
  .foot{padding-top:3.5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
  .hero__title span{opacity:1; letter-spacing:.012em; margin-right:0}
  .hero__eyebrow,.hero__sub,.hero__actions,.hero__scroll{opacity:1}
}