/* =========================================================
   KISKEYA GENERAL CLEANING SERVICES
   Landing page stylesheet
   1. Tokens
   2. Base & utilities
   3. Buttons & links
   4. Header & navigation
   5. Hero
   6. Trust strip
   7. Introduction
   8. Services
   9. Visual story
   10. Why Kiskeya
   11. Process
   12. Residential / Commercial split
   13. Service areas
   14. Testimonials
   15. CTA & quote form
   16. Footer
   17. Motion
   18. Responsive
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* colour */
  --navy:#0B2341;
  --navy-700:#0E2C50;
  --dark:#07182D;
  --ink:#04101F;
  --accent:#FF6B35;
  --accent-600:#EE5A24;
  --white:#FFFFFF;
  --soft:#F5F7FA;
  --soft-2:#EDF1F6;
  --body:#445164;
  --muted:#7C889B;
  --line:#E4E9EF;
  --line-dark:rgba(255,255,255,.14);

  /* type */
  --font:"Inter","Helvetica Neue",Arial,sans-serif;
  --fs-display:clamp(2.35rem,1.1rem + 4.4vw,4.25rem);
  --fs-h2:clamp(1.8rem,1.1rem + 2.1vw,2.75rem);
  --fs-h3:clamp(1.15rem,1.02rem + .38vw,1.375rem);
  --fs-lede:clamp(1.05rem,.98rem + .34vw,1.2rem);
  --fs-body:1rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;

  /* layout */
  --container:1280px;
  --gutter:clamp(20px,5vw,48px);
  --section:clamp(56px,9vw,120px);
  --gap:clamp(24px,3vw,40px);

  /* radii & misc */
  --r-xs:3px;
  --r-sm:6px;
  --r-md:10px;
  --header-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
}

body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body.is-locked{overflow:hidden}

img{max-width:100%;height:auto;display:block}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

h1,h2,h3{margin:0;color:var(--navy);line-height:1.15;letter-spacing:-.02em}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:var(--section)}

/* type utilities */
.eyebrow{
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--accent);
  margin-bottom:14px;
}
.h2{font-size:var(--fs-h2);font-weight:800}
.lede{font-size:var(--fs-lede);color:var(--body);margin-top:20px;max-width:60ch}
.body{margin-top:16px;max-width:62ch}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--gap);
  margin-bottom:clamp(36px,5vw,64px);
}
.section-head .h2{max-width:20ch}
.section-head__note{
  font-size:var(--fs-sm);
  color:var(--muted);
  max-width:34ch;
  padding-bottom:6px;
}
.section-head--center{justify-content:center;text-align:center}
.section-head--center .h2{max-width:24ch;margin-inline:auto}

/* ---------- 3. BUTTONS & LINKS ---------- */
.btn{
  --btn-bg:var(--navy);
  --btn-fg:#fff;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 26px;
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:.005em;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid transparent;
  border-radius:var(--r-sm);
  cursor:pointer;
  overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.btn::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.22) 50%,rgba(255,255,255,0) 65%);
  transform:translateX(-120%);
  transition:transform .6s var(--ease);
}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn--primary{--btn-bg:var(--accent)}
.btn--primary:hover{--btn-bg:var(--accent-600);box-shadow:0 10px 26px -12px rgba(238,90,36,.85)}

.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:#fff;
  border-color:rgba(255,255,255,.38);
  backdrop-filter:blur(2px);
}
.btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7)}

.btn--light{--btn-bg:#fff;--btn-fg:var(--navy)}
.btn--light:hover{--btn-bg:var(--soft)}

.btn--sm{padding:11px 20px;font-size:var(--fs-xs)}
.btn--lg{padding:17px 32px;font-size:1rem}
.btn--block{width:100%}

.link-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  font-weight:600;
  font-size:var(--fs-sm);
  color:var(--accent);
  padding-bottom:4px;
  border-bottom:1px solid currentColor;
  transition:gap .3s var(--ease),color .25s var(--ease);
}
.link-cta:hover{gap:16px;color:var(--accent-600)}

/* ---------- 4. HEADER ---------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  padding-top:env(safe-area-inset-top,0px);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.header__inner{
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.site-header.is-scrolled{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -24px rgba(11,35,65,.5);
}

/* brand */
.brand{display:flex;align-items:center;gap:12px;color:#fff}
.brand__mark{
  display:grid;place-items:center;
  width:38px;height:38px;
  border-radius:var(--r-sm);
  background:var(--accent);
  flex:none;
}
.brand__mark svg{width:22px;height:22px;fill:#fff}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__name{font-size:1.2rem;font-weight:800;letter-spacing:-.02em}
.brand__sub{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.72}
.site-header.is-scrolled .brand{color:var(--navy)}

/* nav */
.nav__list{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.nav__link{
  position:relative;
  font-size:var(--fs-sm);
  font-weight:500;
  color:rgba(255,255,255,.86);
  padding:6px 0;
  transition:color .25s var(--ease);
}
.nav__link::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav__link:hover,.nav__link.is-active{color:#fff}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.site-header.is-scrolled .nav__link{color:var(--body)}
.site-header.is-scrolled .nav__link:hover,
.site-header.is-scrolled .nav__link.is-active{color:var(--navy)}
.nav__foot{display:none}

/* header actions */
.header__actions{display:flex;align-items:center;gap:16px}
.header__phone{
  display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-sm);font-weight:600;color:#fff;
  transition:color .25s var(--ease),opacity .25s var(--ease);
}
.header__phone svg{width:17px;height:17px;fill:var(--accent)}
.header__phone:hover{opacity:.8}
.site-header.is-scrolled .header__phone{color:var(--navy)}

.burger{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  background:transparent;border:0;cursor:pointer;
  border-radius:var(--r-sm);
}
.burger span{
  display:block;width:22px;height:2px;background:#fff;
  transition:transform .3s var(--ease),opacity .25s var(--ease),background-color .3s var(--ease);
}
.site-header.is-scrolled .burger span{background:var(--navy)}
.burger[aria-expanded="true"] span{background:var(--navy)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-scrim{
  position:fixed;inset:0;z-index:90;
  background:rgba(4,16,31,.5);
  backdrop-filter:blur(2px);
}

/* ---------- 5. HERO ---------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:min(860px,94vh);
  padding-top:calc(var(--header-h) + clamp(32px,6vw,72px) + env(safe-area-inset-top,0px));
  padding-bottom:clamp(48px,7vw,96px);
  background:var(--dark);
  color:#fff;
  overflow:hidden;
}
.hero__media{
  position:absolute;
  top:0;right:0;bottom:0;
  width:57%;
}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero__media::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--dark) 2%,rgba(7,24,45,.93) 26%,rgba(7,24,45,.28) 62%,rgba(7,24,45,.5) 100%),
    linear-gradient(0deg,rgba(7,24,45,.55),rgba(7,24,45,0) 45%);
}
.hero__inner{position:relative;z-index:2}
.hero__content{max-width:640px}

.hero__eyebrow{
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.06em;
  color:#9FD3DE;
  margin-bottom:22px;
}
.hero__title{
  font-size:var(--fs-display);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.033em;
  color:#fff;
}
.hero__lede{
  margin-top:24px;
  font-size:var(--fs-lede);
  color:rgba(255,255,255,.82);
  max-width:50ch;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

.hero__trust{
  display:flex;flex-wrap:wrap;gap:12px 32px;
  margin-top:clamp(36px,5vw,56px);
  padding-top:26px;
  border-top:1px solid var(--line-dark);
}
.hero__trust li{
  display:flex;align-items:center;gap:10px;
  font-size:var(--fs-sm);font-weight:500;
  color:rgba(255,255,255,.88);
}
.hero__trust svg{width:19px;height:19px;fill:var(--accent);flex:none}

.hero__badge{
  position:absolute;
  right:var(--gutter);
  bottom:clamp(28px,5vw,56px);
  z-index:2;
  display:flex;flex-direction:column;gap:2px;
  padding:16px 22px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm);
  backdrop-filter:blur(10px);
}
.hero__badge-label{font-size:var(--fs-xs);color:rgba(255,255,255,.7)}
.hero__badge-value{font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:.01em}

/* ---------- 6. TRUST STRIP ---------- */
.strip{background:var(--navy);color:#fff}
.strip__inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
}
.strip__item{
  padding:26px clamp(16px,2vw,28px);
  font-size:var(--fs-sm);
  font-weight:500;
  color:rgba(255,255,255,.86);
  border-left:1px solid var(--line-dark);
}
.strip__item:first-child{border-left:0;padding-left:0}

/* ---------- 7. INTRODUCTION ---------- */
.statement{
  font-size:clamp(1.6rem,.95rem + 2.2vw,2.85rem);
  font-weight:700;
  line-height:1.32;
  letter-spacing:-.025em;
  max-width:19ch;
  margin-bottom:clamp(44px,6vw,80px);
}
.statement .w{
  color:rgba(11,35,65,.17);
  transition:color .45s var(--ease),opacity .45s var(--ease);
}
.statement .w.is-lit{color:var(--navy)}
.statement .w.is-lit.w--accent{color:var(--accent)}

@supports (width:1ch){
  .statement{max-width:24ch}
}

.intro__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(40px,6vw,96px);
  align-items:start;
  padding-top:clamp(32px,4vw,52px);
  border-top:1px solid var(--line);
}
.intro__copy .body:first-child{margin-top:0}
.signature{
  display:flex;flex-direction:column;
  margin-top:36px;padding-top:22px;
  border-top:1px solid var(--line);
}
.signature__name{font-weight:700;color:var(--navy)}
.signature__role{font-size:var(--fs-sm);color:var(--muted)}

.intro__facts{display:flex;flex-direction:column}
.fact{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;align-items:center;
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.fact:first-child{padding-top:0}
.fact:last-child{border-bottom:0}
.fact__value{
  font-size:clamp(2.1rem,1.4rem + 2vw,2.9rem);
  font-weight:800;color:var(--navy);
  line-height:1;letter-spacing:-.04em;
  min-width:72px;
  font-variant-numeric:tabular-nums;
}
.fact__label{font-size:var(--fs-sm);color:var(--body);line-height:1.5}

/* ---------- 8. SERVICES ---------- */
.services{background:var(--soft)}
.services__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(28px,3.2vw,48px) clamp(24px,2.6vw,40px);
}
.svc--feature{grid-column:span 6}
.svc--wide{grid-column:span 7}
.svc--tall{grid-column:span 5}
.svc--text{grid-column:span 4}

.svc__media{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-sm);
  background:var(--soft-2);
  margin-bottom:22px;
}
.svc__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.svc:hover .svc__media img{transform:scale(1.045)}

.svc--feature .svc__media{aspect-ratio:16/10}
.svc--wide .svc__media{aspect-ratio:16/9}
.svc--tall .svc__media{aspect-ratio:4/5}

.svc__title{font-size:var(--fs-h3);font-weight:700;margin-bottom:10px}
.svc__text{font-size:var(--fs-sm);color:var(--body);max-width:46ch}

.svc--text{
  padding-top:24px;
  border-top:2px solid var(--navy);
}
.svc--text .svc__title{margin-bottom:12px}

.svc__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.svc__tags li{
  font-size:var(--fs-xs);
  font-weight:500;
  color:var(--navy);
  padding:5px 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:100px;
}

/* ---------- 9. VISUAL STORY ---------- */
.story{
  position:relative;
  background:var(--dark);
  color:#fff;
  padding-block:var(--section);
  overflow:hidden;
}
.story__grid{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(40px,6vw,96px);
  align-items:center;
}
.story__media{
  position:relative;
  margin:0;
  border-radius:var(--r-md);
  overflow:hidden;
  aspect-ratio:4/5;
}
.story__media img{
  position:absolute;
  top:-9%;left:0;
  width:100%;height:118%;
  object-fit:cover;
  will-change:transform;
}
.story__title{color:#fff;max-width:14ch}
.story__lede{
  margin-top:24px;
  font-size:var(--fs-lede);
  color:rgba(255,255,255,.78);
  max-width:48ch;
}
.story__points{
  margin-top:clamp(28px,4vw,44px);
  border-top:1px solid var(--line-dark);
}
.story__points p{
  padding:18px 0 18px 30px;
  position:relative;
  font-weight:500;
  color:rgba(255,255,255,.9);
  border-bottom:1px solid var(--line-dark);
}
.story__points p::before{
  content:"";
  position:absolute;left:0;top:26px;
  width:12px;height:2px;background:var(--accent);
}

/* ---------- 10. WHY KISKEYA ---------- */
.why__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(40px,6vw,96px);
  align-items:start;
}
.why__head{position:sticky;top:calc(var(--header-h) + 40px)}
.why__list li{
  padding:28px 0;
  border-bottom:1px solid var(--line);
}
.why__list li:first-child{padding-top:0}
.why__list li:last-child{border-bottom:0}
.why__list h3{
  position:relative;
  font-size:var(--fs-h3);
  font-weight:700;
  padding-left:28px;
  margin-bottom:8px;
}
.why__list h3::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:14px;height:2px;background:var(--accent);
}
.why__list p{padding-left:28px;font-size:var(--fs-sm);max-width:56ch}

/* ---------- 11. PROCESS ---------- */
.process{background:var(--soft)}
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3vw,48px);
  counter-reset:step;
}
.step{
  position:relative;
  padding-top:34px;
  border-top:1px solid var(--line);
}
.step::before{
  content:"";
  position:absolute;top:-1px;left:0;
  width:44px;height:3px;
  background:var(--accent);
}
.step__num{
  display:block;
  font-size:clamp(2.6rem,2rem + 2.4vw,3.6rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(11,35,65,.28);
  margin-bottom:20px;
}
.step__title{font-size:var(--fs-h3);font-weight:700;margin-bottom:10px}
.step__text{font-size:var(--fs-sm);max-width:36ch}

/* ---------- 12. SPLIT PANELS ---------- */
.split{padding-bottom:var(--section)}
.split__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.4vw,32px);
}
.panel{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:clamp(360px,42vw,480px);
  padding:clamp(28px,3.4vw,44px);
  border-radius:var(--r-md);
  overflow:hidden;
  isolation:isolate;
}
.panel__img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease);
}
.panel::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(4,16,31,.9) 8%,rgba(4,16,31,.55) 48%,rgba(4,16,31,.2) 100%);
}
.panel:hover .panel__img{transform:scale(1.05)}
.panel__body{max-width:44ch}
.panel__title{font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem);font-weight:800;color:#fff}
.panel__text{margin:14px 0 26px;color:rgba(255,255,255,.85);font-size:var(--fs-sm)}

/* ---------- 13. SERVICE AREAS ---------- */
.areas__grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(40px,6vw,88px);
  align-items:start;
}
.areas__list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 clamp(24px,3vw,48px);
}
.areas__list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .35s var(--ease),border-color .35s var(--ease);
}
.areas__list li:hover{padding-left:10px;border-bottom-color:var(--accent)}
.areas__city{
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);
  font-weight:700;
  color:var(--navy);
  letter-spacing:-.015em;
}
.areas__meta{font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}

/* ---------- 14. TESTIMONIALS ---------- */
.quotes{background:var(--soft);}
.quotes__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,32px);
}
.quote{
  margin:0;
  padding:clamp(26px,3vw,36px);
  background:#fff;
  border:1px dashed var(--line);
  border-radius:var(--r-sm);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
}
.quote__placeholder{
  font-size:var(--fs-sm);
  font-style:italic;
  color:var(--muted);
  line-height:1.7;
}
.quote footer{display:flex;flex-direction:column;padding-top:18px;border-top:1px solid var(--line)}
.quote__name{font-weight:700;color:var(--navy);font-size:var(--fs-sm)}
.quote__meta{font-size:var(--fs-xs);color:var(--muted)}

/* ---------- 15. CTA & FORM ---------- */
.cta{
  position:relative;
  background:var(--navy);
  color:#fff;
  padding-block:var(--section);
  overflow:hidden;
}
.cta::before{
  content:"";
  position:absolute;
  top:-30%;right:-10%;
  width:620px;height:620px;
  background:radial-gradient(circle,rgba(255,107,53,.16),rgba(255,107,53,0) 68%);
  pointer-events:none;
}
.cta__grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,80px);
  align-items:center;
}
.cta__title{
  font-size:var(--fs-h2);
  font-weight:800;
  color:#fff;
  max-width:14ch;
}
.cta__lede{
  margin-top:20px;
  font-size:var(--fs-lede);
  color:rgba(255,255,255,.8);
  max-width:42ch;
}
.cta__contact{
  display:flex;flex-wrap:wrap;gap:14px 44px;
  margin-top:clamp(30px,4vw,44px);
  padding-top:28px;
  border-top:1px solid var(--line-dark);
}
.cta__phone{display:flex;flex-direction:column;transition:opacity .25s var(--ease)}
.cta__phone:hover{opacity:.78}
.cta__phone-label{font-size:var(--fs-xs);color:rgba(255,255,255,.6)}
.cta__phone-num{font-size:1.4rem;font-weight:700;color:#fff;letter-spacing:-.02em}
.cta__note{margin-top:22px;font-size:var(--fs-sm);color:rgba(255,255,255,.72)}
.cta__note a{color:var(--accent);font-weight:600}

.quote-card{
  background:#fff;
  border-radius:var(--r-md);
  padding:clamp(26px,3vw,40px);
  box-shadow:0 30px 70px -40px rgba(4,16,31,.75);
}
.qform{display:flex;flex-direction:column;gap:16px}
.qform__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field__label{font-size:var(--fs-xs);font-weight:600;color:var(--navy)}
.field__input{
  width:100%;
  padding:12px 14px;
  font-size:var(--fs-sm);
  color:var(--navy);
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  transition:border-color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field__input:focus{
  outline:none;
  background:#fff;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,107,53,.16);
}
.field__input--area{resize:vertical;min-height:88px}
.qform .btn{margin-top:6px}
.qform__status{font-size:var(--fs-sm);color:var(--navy);font-weight:600;min-height:0}
.qform__status:empty{display:none}
.qform__fine{font-size:var(--fs-xs);color:var(--muted);text-align:center}

/* ---------- 16. FOOTER ---------- */
.footer{
  background:var(--dark);
  color:rgba(255,255,255,.72);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.footer__top{
  display:grid;
  grid-template-columns:1.7fr 1fr 1.1fr 1fr 1.2fr;
  gap:clamp(28px,3vw,48px);
  padding-block:clamp(48px,6vw,88px);
}
.brand--footer{margin-bottom:20px}
.footer__blurb{font-size:var(--fs-sm);max-width:34ch}
.footer__licence{
  margin-top:18px;
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.5);
  letter-spacing:.02em;
}
.footer__heading{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:18px;
}
.footer__col ul{display:flex;flex-direction:column;gap:11px;font-size:var(--fs-sm)}
.footer__col li{overflow-wrap:anywhere}
.footer__col a{transition:color .25s var(--ease)}
.footer__col a:hover{color:var(--accent)}
.footer__address{
  margin-top:18px;
  font-style:normal;
  font-size:var(--fs-sm);
  line-height:1.6;
}
.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-block:24px;
  border-top:1px solid var(--line-dark);
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.5);
}

/* ---------- 17. MOTION ---------- */

/* smooth scrolling (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* preloader */
.loader{
  position:fixed;inset:0;z-index:300;
  display:grid;place-items:center;
  pointer-events:none;
}
.loader__curtain{
  position:absolute;left:0;right:0;
  height:50.5%;
  background:var(--dark);
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.loader__curtain--a{top:0}
.loader__curtain--b{bottom:0}
.loader__inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.loader__mark{
  display:grid;place-items:center;
  width:56px;height:56px;
  border-radius:var(--r-sm);
  background:var(--accent);
  animation:markPulse 1.6s var(--ease) infinite;
}
.loader__mark svg{width:32px;height:32px;fill:#fff}
.loader__word{
  font-size:.78rem;font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
  padding-left:.34em;
}
.loader__bar{
  display:block;position:relative;
  width:132px;height:2px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
}
.loader__bar i{
  position:absolute;inset:0 auto 0 0;
  width:0%;
  background:var(--accent);
  transition:width .25s linear;
}
@keyframes markPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,107,53,.4)}
  50%{transform:scale(1.06);box-shadow:0 0 0 14px rgba(255,107,53,0)}
}

body.is-loading{overflow:hidden}
.loader.is-done .loader__inner{opacity:0;transform:translateY(-10px)}
.loader.is-done .loader__curtain--a{transform:translateY(-100%)}
.loader.is-done .loader__curtain--b{transform:translateY(100%)}
.loader.is-gone{display:none}

/* scroll progress */
.scroll-line{
  position:absolute;left:0;right:0;bottom:-1px;
  height:2px;
  background:transparent;
  overflow:hidden;
}
.scroll-line i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--accent),#FFA477);
  transform-origin:left;
}

/* masked headline lines */
.hero__title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__title .line>span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.05s cubic-bezier(.16,.84,.3,1);
}
.hero__title .line:nth-child(2)>span{transition-delay:.11s}
body.is-ready .hero__title .line>span{transform:none}

/* hero image drift */
.hero__media img{
  transform:scale(1.06);
  transition:transform 2.4s var(--ease);
}
body.is-ready .hero__media img{transform:scale(1)}

/* hero squeegee wipe (vector) */
.sweep{
  position:absolute;inset:0;
  z-index:2;
  width:100%;height:100%;
  pointer-events:none;
}
.sweep__wipe,
.sweep__blade{transform:translateX(0)}
.sweep__blade{opacity:0}
.sweep__drops .drop{opacity:0}

body.is-ready .sweep__wipe{
  animation:wipeAway 1.5s cubic-bezier(.66,.02,.24,1) .12s forwards;
}
body.is-ready .sweep__blade{
  animation:bladePass 1.62s cubic-bezier(.66,.02,.24,1) .06s forwards;
}
body.is-ready .drop--1{animation:dropRun 1.5s var(--ease) 1.02s forwards}
body.is-ready .drop--2{animation:dropRun 1.7s var(--ease) 1.2s forwards}
body.is-ready .drop--3{animation:dropRun 1.6s var(--ease) 1.34s forwards}

@keyframes wipeAway{
  from{transform:translateX(0)}
  to{transform:translateX(-1700px)}
}
@keyframes bladePass{
  0%{transform:translateX(0);opacity:0}
  9%{opacity:1}
  86%{opacity:1}
  100%{transform:translateX(-1760px);opacity:0}
}
@keyframes dropRun{
  0%{opacity:0;transform:translateY(0)}
  15%{opacity:.9}
  100%{opacity:0;transform:translateY(120px)}
}

[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .hero__title .line>span{transform:none}
  .hero__media img{transform:none}
  .sweep{display:none}
  .story__media img{height:100% !important;transform:none !important}
  .loader{display:none}
}

/* ---------- 18. RESPONSIVE ---------- */

/* Laptop */
@media (max-width:1180px){
  .hero__media{width:48%}
  .hero__content{max-width:46vw}
  .footer__top{grid-template-columns:1.6fr 1fr 1fr 1fr;}
  .footer__col--contact{grid-column:span 2}
}

/* Tablet landscape */
@media (max-width:1024px){
  :root{--section:clamp(72px,8vw,88px)}

  /* nav becomes a drawer */
  .nav{
    position:fixed;
    top:0;right:0;bottom:0;
    z-index:95;
    width:min(360px,86vw);
    padding:calc(var(--header-h) + env(safe-area-inset-top,0px) + 24px) 32px 40px;
    background:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transform:translateX(102%);
    transition:transform .45s var(--ease);
    box-shadow:-30px 0 60px -40px rgba(4,16,31,.6);
    overflow-y:auto;
  }
  .nav.is-open{transform:none}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__link{
    display:block;
    padding:16px 0;
    font-size:1.1rem;
    font-weight:600;
    color:var(--navy);
    border-bottom:1px solid var(--line);
  }
  .nav__link::after{display:none}
  .site-header.is-scrolled .nav__link{color:var(--navy)}
  .nav__foot{display:flex;flex-direction:column;gap:14px;margin-top:32px}
  .nav__phone{font-size:1.25rem;font-weight:800;color:var(--navy)}
  .burger{display:flex}
  .header__phone span{display:none}
  .header__cta{display:none}

  .hero{min-height:0}
  .hero__media{
    position:relative;
    width:100%;
    height:clamp(240px,46vw,380px);
    margin-top:clamp(32px,5vw,48px);
  }
  .hero__media::after{
    background:linear-gradient(0deg,rgba(7,24,45,.55),rgba(7,24,45,0) 55%);
  }
  .hero{flex-direction:column;align-items:stretch;padding-bottom:28px}
  .hero__inner{order:1}
  .hero__media{order:2}
  .hero__content{max-width:none}
  .hero__badge{
    position:static;
    order:3;
    align-self:flex-start;
    margin:-30px var(--gutter) 0;
    background:rgba(7,24,45,.86);
  }

  .strip__inner{grid-template-columns:1fr 1fr}
  .strip__item{border-top:1px solid var(--line-dark)}
  .strip__item:nth-child(-n+2){border-top:0}
  .strip__item:nth-child(odd){border-left:0;padding-left:0}

  .intro__grid,
  .why__grid,
  .areas__grid{grid-template-columns:1fr}
  .why__head{position:static}
  .intro__facts{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
  }
  .fact{
    grid-template-columns:1fr;
    gap:10px;
    padding:0;
    border-bottom:0;
    border-top:1px solid var(--line);
    padding-top:22px;
  }

  .svc--feature{grid-column:span 6}
  .svc--wide,.svc--tall{grid-column:span 6}
  .svc--tall .svc__media{aspect-ratio:16/10}
  .svc--text{grid-column:span 4}

  .story__grid{grid-template-columns:1fr}
  .story__media{aspect-ratio:16/10;max-height:420px}

  .quotes__grid{grid-template-columns:1fr}
  .cta__grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr 1fr}
  .footer__brand{grid-column:span 3}
  .footer__col--contact{grid-column:span 1}
}

/* Tablet portrait / large phone */
@media (max-width:800px){
  .section-head{flex-direction:column;align-items:flex-start;gap:18px}
  .section-head__note{padding-bottom:0}
  .services__grid{gap:32px}
  .svc--feature,.svc--wide,.svc--tall{grid-column:span 12}
  .svc--text{grid-column:span 6}
  .svc--feature .svc__media,
  .svc--wide .svc__media,
  .svc--tall .svc__media{aspect-ratio:16/9}

  .steps{grid-template-columns:1fr;gap:0}
  .step{padding-block:30px}
  .step:last-child{padding-bottom:0}
  .step__num{margin-bottom:14px}

  .split__grid{grid-template-columns:1fr}
  .panel{min-height:320px}
  .areas__list{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:span 2}
}

/* Phone */
@media (max-width:560px){
  :root{
    --section:clamp(56px,14vw,72px);
    --header-h:66px;
  }

  .hero__title{letter-spacing:-.028em}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
  .hero__trust{gap:12px;flex-direction:column;align-items:flex-start}
  .hero__badge{margin-inline:var(--gutter)}

  .strip__inner{grid-template-columns:1fr}
  .strip__item{
    padding:18px 0;
    border-left:0;
    border-top:1px solid var(--line-dark);
  }
  .strip__item:first-child{border-top:0}

  .intro__facts{grid-template-columns:1fr;gap:20px}
  .fact{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}

  .svc--text{grid-column:span 12}
  .qform__row{grid-template-columns:1fr}
  .quote-card{padding:24px 20px}

  .cta__contact{flex-direction:column;gap:18px}
  .panel{min-height:290px;padding:24px 20px}
  .footer__top{grid-template-columns:1fr;gap:34px}
  .footer__brand{grid-column:span 1}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:6px}
}