/* ==========================================================================
   Hogan Cleaning Services LLC, demo homepage 3
   Direction: editorial and premium, overlapping rounded slabs.
   Built by KJONGSys LLC. Demo only, noindex.
   ========================================================================== */

:root{
  --teal:#005D79;
  --navy:#003F79;
  --green:#33BA01;
  --lime:#80FE52;
  --ink:#1D2023;
  --body:#50555C;
  --white:#FFFFFF;
  --beige:#F5F2EC;

  --radius-slab:60px;
  --radius-card:40px;
  --shell:1280px;
  --header-h:86px;

  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --display:'Inter Tight', 'Inter', system-ui, Arial, sans-serif;
  --script:'Caveat', 'Segoe Script', cursive;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:100px}
body{
  margin:0;
  background:var(--white);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
p{margin:0 0 1em}
button,input,select{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0 0 .5em; font-family:var(--display); color:var(--ink); font-weight:600; letter-spacing:-.02em; line-height:1.1}

.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:28px}
.center{text-align:center}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--script);
  font-size:1.5rem;
  font-weight:600;
  line-height:1;
  color:var(--green);
  margin:0 0 .45em;
}
.eyebrow-light{color:var(--lime)}

.h2{font-size:clamp(2rem, 4.4vw, 3.5rem); line-height:1.04; letter-spacing:-.028em; margin:0 0 .35em}
.h3{font-size:clamp(1.55rem, 2.9vw, 2.3rem); line-height:1.1; margin:0 0 .6em}
.h4{font-size:1.2rem; line-height:1.25; margin:0 0 .45em}
.h2-light,.h4-light{color:var(--white)}
.lede{font-size:1.06rem; max-width:62ch; margin-inline:auto}
.lede-light{color:rgba(255,255,255,.86)}

.tbd{
  font-size:.82rem;
  letter-spacing:.02em;
  color:#9AA0A7;
  font-style:italic;
  margin:.4em 0 0;
}
.tbd-light{color:rgba(255,255,255,.72)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-weight:600; letter-spacing:-.01em;
  border:1.6px solid transparent; border-radius:999px;
  cursor:pointer; text-align:center;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:10px 20px; font-size:.9rem}
.btn-lg{padding:16px 36px; font-size:1.02rem}
.btn-block{width:100%}
.ico-sm{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7}
.btn .ico-sm{fill:currentColor; stroke:none}

.btn-ghost{color:var(--teal); border-color:rgba(0,93,121,.45); background:transparent}
.btn-ghost:hover{background:var(--teal); color:var(--white); border-color:var(--teal)}

.btn-solid{background:var(--teal); border-color:var(--teal); color:var(--white)}
.btn-solid:hover{background:transparent; color:var(--teal)}

.btn-ghost-light{color:var(--white); border-color:rgba(255,255,255,.85); background:rgba(255,255,255,.06)}
.btn-ghost-light:hover{background:var(--white); color:var(--teal); border-color:var(--white)}

.btn-solid-green{background:var(--green); border-color:var(--green); color:var(--white)}
.btn-solid-green:hover{background:transparent; color:var(--green)}

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background-color .3s ease, box-shadow .3s ease;
}
.header-inner{display:flex; align-items:center; gap:24px}

.brand{background:var(--white); border-radius:12px; padding:7px 12px; line-height:0; flex:none}
.brand img{width:112px; height:auto}

.nav{display:flex; gap:26px; margin-inline:auto; font-family:var(--display); font-weight:500; font-size:.96rem}
.nav a{color:rgba(255,255,255,.92); position:relative; padding:6px 0; transition:color .2s}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--green); transition:right .25s ease}
.nav a:hover::after{right:0}

.header-cta{display:flex; align-items:center; gap:12px; flex:none}
.nav-cta{display:none} /* the same two CTAs, shown inside the mobile panel */

.site-header .btn-ghost{color:var(--white); border-color:rgba(255,255,255,.5)}
.site-header .btn-ghost:hover{background:var(--white); color:var(--teal); border-color:var(--white)}
.site-header .btn-solid{background:var(--white); color:var(--teal); border-color:var(--white)}
.site-header .btn-solid:hover{background:transparent; color:var(--white); border-color:rgba(255,255,255,.6)}

.site-header.is-stuck{background:var(--white); box-shadow:0 6px 30px rgba(0,63,121,.10)}
.site-header.is-stuck .brand{padding-left:0; padding-right:0}
.site-header.is-stuck .nav a{color:var(--ink)}
.site-header.is-stuck .nav a:hover{color:var(--teal)}
.site-header.is-stuck .btn-ghost{color:var(--teal); border-color:rgba(0,93,121,.4)}
.site-header.is-stuck .btn-ghost:hover{background:var(--teal); color:var(--white); border-color:var(--teal)}
.site-header.is-stuck .btn-solid{background:var(--teal); color:var(--white); border-color:var(--teal)}
.site-header.is-stuck .btn-solid:hover{background:transparent; color:var(--teal)}

.burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; padding:0 11px; background:transparent; border:1.6px solid rgba(255,255,255,.5); border-radius:999px; cursor:pointer}
.burger span{display:block; height:2px; background:var(--white); border-radius:2px; transition:transform .25s ease, opacity .2s ease}
.site-header.is-stuck .burger{border-color:rgba(0,93,121,.4)}
.site-header.is-stuck .burger span{background:var(--ink)}
.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)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--header-h) + 40px) 0 190px;
  overflow:hidden;
  isolation:isolate;
}
.hero-media{
  position:absolute; inset:0; z-index:-2;
  background:url("../img/hero.jpg") center 45% / cover no-repeat;
}
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,32,50,.56), rgba(0,32,50,.46) 45%, rgba(0,63,121,.62));
}
.hero-inner{text-align:center; display:flex; flex-direction:column; align-items:center}
.hero-title{
  font-size:clamp(2.55rem, 8.6vw, 8.125rem);
  line-height:.94;
  letter-spacing:-.04em;
  font-weight:600;
  color:var(--white);
  max-width:15ch;
  margin:0 0 .42em;
  text-wrap:balance;
}
.hero .eyebrow{font-size:1.65rem}

.hero-tip{
  position:absolute; z-index:2;
  right:clamp(20px, 9vw, 150px);
  top:58%;
  display:flex; align-items:center; gap:12px;
}
.hero-tip-dot{
  width:16px; height:16px; border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 0 rgba(128,254,82,.7);
  animation:ping 2.4s ease-out infinite;
  flex:none;
}
@keyframes ping{
  0%{box-shadow:0 0 0 0 rgba(128,254,82,.65)}
  70%{box-shadow:0 0 0 18px rgba(128,254,82,0)}
  100%{box-shadow:0 0 0 0 rgba(128,254,82,0)}
}
.hero-tip-label{
  background:rgba(255,255,255,.94);
  color:var(--teal);
  font-family:var(--display); font-weight:600; font-size:.85rem;
  padding:9px 16px; border-radius:999px;
  white-space:nowrap;
  box-shadow:0 10px 30px rgba(0,32,50,.25);
}

/* ---------- slabs ---------- */
.slab{
  position:relative;
  border-radius:var(--radius-slab) var(--radius-slab) 0 0;
  padding:110px 0 160px;
}
.slab-pull{margin-top:-120px; padding-top:180px}
.slab-beige{background:var(--beige)}
.slab-white{background:var(--white); padding-bottom:130px}
.slab-teal{background:linear-gradient(160deg, var(--navy) 0%, var(--teal) 62%, #01708f 100%)}
.slab-photo{background-position:center; background-size:cover; background-repeat:no-repeat}
.slab-photo > .shell{position:relative; z-index:1}
.slab-scrim{position:absolute; inset:0; border-radius:inherit; background:linear-gradient(140deg, rgba(0,63,121,.80), rgba(0,93,121,.62))}
.slab-head{margin-bottom:56px}

/* ---------- 3. how it works ---------- */
.steps{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:44px;
  margin:0 0 60px;
}
.step{text-align:center}
.step-ring{
  display:grid; place-items:center;
  width:104px; height:104px; margin:0 auto 24px;
  border:1.6px solid rgba(0,93,121,.45);
  border-radius:50%;
  transition:background-color .3s ease, border-color .3s ease;
}
.step-ring svg{width:42px; height:42px; fill:none; stroke:var(--teal); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s ease}
.step:hover .step-ring{background:var(--teal); border-color:var(--teal)}
.step:hover .step-ring svg{stroke:var(--white)}
.step-title{font-size:1.22rem; margin-bottom:.4em}
.step p{margin:0; font-size:.98rem}

/* ---------- 4. trust strip ---------- */
.trust{
  display:flex; flex-wrap:wrap; justify-content:center; gap:18px 46px;
  margin:0 0 72px;
  font-family:var(--display); font-weight:500; font-size:1.02rem; color:var(--ink);
}
.trust li{display:flex; align-items:center; gap:12px}
.tick{
  display:grid; place-items:center; flex:none;
  width:26px; height:26px; border-radius:50%;
  background:rgba(51,186,1,.14);
}
.tick svg{width:14px; height:14px; fill:none; stroke:var(--green); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}

/* ---------- 5. sticky service card stack ---------- */
/* padding-bottom gives the last card its own pinned moment before the stack releases */
.stack{padding-bottom:150px}
.svc{
  position:sticky;
  top:calc(var(--header-h) + 18px + (var(--i) * 84px));
  margin-bottom:26px;
}
.svc:last-child{margin-bottom:0}
.svc-inner{
  border-radius:var(--radius-card);
  padding:34px clamp(24px, 3.4vw, 48px) clamp(28px, 3vw, 44px);
  color:rgba(255,255,255,.88);
  box-shadow:0 24px 60px rgba(0,32,50,.18);
}
.svc-teal{background:linear-gradient(135deg, var(--teal), #01708f)}
.svc-navy{background:linear-gradient(135deg, var(--navy), #00537f)}
.svc-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  padding-bottom:26px; margin-bottom:30px;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.svc-title{font-size:clamp(1.45rem, 3vw, 2.45rem); color:var(--white); margin:0; letter-spacing:-.03em}
.svc-num{font-family:var(--display); font-weight:700; font-size:clamp(1.7rem, 3.4vw, 3rem); color:var(--green); line-height:1; letter-spacing:-.03em}
.svc-body{display:grid; grid-template-columns:1fr .82fr; gap:clamp(24px, 3.6vw, 52px); align-items:start}
.svc-sub{font-size:1.02rem; color:var(--white); margin:0 0 .6em; font-weight:600}
.svc-copy p{margin:0 0 1.1em; font-size:.99rem; max-width:52ch}
.svc-photo{border-radius:26px; overflow:hidden; aspect-ratio:4/3}
.svc-photo img{width:100%; height:100%; object-fit:cover}

.ticks{display:grid; gap:10px; margin:0 0 26px}
.ticks li{position:relative; padding-left:32px; font-size:.97rem}
.ticks li::before{
  content:""; position:absolute; left:0; top:.28em;
  width:20px; height:20px; border-radius:50%;
  background:var(--green);
}
.ticks li::after{
  content:""; position:absolute; left:4px; top:calc(.28em + 4px);
  width:12px; height:12px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/></svg>") center/12px no-repeat;
}
.ticks-light li{color:rgba(255,255,255,.9)}

.arrow-link{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--display); font-weight:600; font-size:1rem; color:var(--white);
}
.arrow-dot{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  border:1.6px solid rgba(255,255,255,.55);
  transition:background-color .25s ease, transform .25s ease, border-color .25s ease;
}
.arrow-dot svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.arrow-link:hover .arrow-dot{background:var(--white); color:var(--teal); border-color:var(--white); transform:translateX(5px)}

/* ---------- 6. about ---------- */
.about{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px, 5vw, 76px); align-items:center; margin-bottom:110px}
.about-media{position:relative}
.about-media > img{border-radius:var(--radius-card); width:100%}
.stat-card{
  position:absolute; right:-14px; bottom:-26px;
  background:var(--white); border-radius:24px;
  padding:22px 30px; text-align:center;
  box-shadow:0 22px 50px rgba(0,63,121,.16);
}
.stat-num{display:block; font-family:var(--display); font-weight:700; font-size:2.5rem; line-height:1; color:var(--teal); letter-spacing:-.03em}
.stat-label{display:block; font-size:.85rem; color:var(--body); margin-top:6px}

.about-copy > p{max-width:58ch}
.about-sub{
  display:flex; gap:22px; align-items:flex-start;
  background:var(--white); border-radius:26px; padding:22px;
  margin:32px 0 34px;
}
.about-sub img{width:132px; height:100px; object-fit:cover; border-radius:18px; flex:none}
.about-sub p{margin:0 0 .25em; font-size:.94rem}
.about-sub .h4{font-size:1.08rem}

/* ---------- 7. value cards ---------- */
.values{display:grid; grid-template-columns:repeat(4, 1fr); gap:24px}
.value-card{background:var(--white); border-radius:28px; padding:36px 30px}
.value-ico{display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:rgba(0,93,121,.09); margin-bottom:22px}
.value-ico svg{width:30px; height:30px; fill:none; stroke:var(--teal); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.value-card p{margin:0 0 .35em; font-size:.95rem}
.value-stat{
  background:linear-gradient(150deg, var(--teal), var(--navy));
  border-radius:28px; padding:36px 30px;
  display:flex; flex-direction:column; justify-content:center;
  color:rgba(255,255,255,.85);
}
.value-stat-num{font-family:var(--display); font-weight:700; font-size:4rem; line-height:1; color:var(--lime); letter-spacing:-.04em}
.value-stat-label{font-size:1rem; margin-top:10px}

/* ---------- 8. quote band ---------- */
.slab-quote{background-image:url("../img/quote-bg.jpg"); padding:120px 0 175px}
.slab-quote.slab-pull{padding-top:190px}
.selectgo{
  display:flex; align-items:center; gap:10px;
  background:var(--white); border-radius:999px;
  padding:10px 10px 10px 12px;
  max-width:560px; margin:36px auto 0;
  box-shadow:0 24px 60px rgba(0,32,50,.28);
}
.selectgo select{
  flex:1; min-width:0;
  border:0; background:transparent; outline:none;
  font-family:var(--display); font-weight:500; font-size:1.02rem; color:var(--ink);
  padding:14px 12px; border-radius:999px; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23005D79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; background-size:18px;
  padding-right:36px;
}
.selectgo-btn{
  flex:none; width:56px; height:56px; border-radius:50%;
  background:var(--teal); border:1.6px solid var(--teal); color:var(--white);
  display:grid; place-items:center; cursor:pointer;
  transition:background-color .25s ease, color .25s ease, transform .25s ease;
}
.selectgo-btn svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.selectgo-btn:hover{background:var(--white); color:var(--teal); transform:translateX(3px)}

/* ---------- 9. past performance ---------- */
.slab-portfolio{padding-bottom:250px}
.clients{
  display:grid; grid-template-columns:1fr 1fr; gap:0 56px;
  max-width:1060px; margin-inline:auto;
}
.clients li{
  display:flex; align-items:baseline; gap:16px;
  padding:19px 4px;
  border-bottom:1px solid rgba(29,32,35,.12);
}
.client-n{font-family:var(--display); font-weight:700; font-size:.82rem; color:var(--green); letter-spacing:.04em; flex:none; width:24px}
.client-name{font-family:var(--display); font-weight:600; font-size:1.06rem; color:var(--ink); line-height:1.3}
.client-loc{margin-left:auto; font-size:.88rem; color:var(--body); white-space:nowrap; padding-left:12px}
.client-loc.tbd{margin-top:0}

/* ---------- 10. estimate card ---------- */
.estimate-wrap{position:relative; z-index:6; margin-top:-200px; padding-bottom:210px}
.estimate{
  display:grid; grid-template-columns:1.05fr .95fr;
  background:var(--white); border-radius:48px; overflow:hidden;
  box-shadow:0 34px 90px rgba(0,63,121,.18);
}
.estimate-form{padding:clamp(30px, 3.6vw, 56px)}
.estimate-photo{min-height:420px}
.estimate-photo img{width:100%; height:100%; object-fit:cover}

.qform{display:grid; gap:16px}
.field{display:grid; gap:7px}
.field label{font-family:var(--display); font-weight:500; font-size:.86rem; color:var(--ink)}
.field input,.field select{
  width:100%; padding:13px 16px;
  border:1.4px solid rgba(29,32,35,.16); border-radius:14px;
  background:var(--white); outline:none;
  font-size:.97rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%23005D79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; background-size:17px; padding-right:40px;
}
.field input:focus,.field select:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,93,121,.12)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--beige); border-radius:14px; padding:13px 16px;
}
.field-toggle-text{font-family:var(--display); font-weight:500; font-size:.94rem; color:var(--ink)}
.switch{display:inline-flex; align-items:center; cursor:pointer; flex:none}
.switch input{position:absolute; opacity:0; width:0; height:0}
.switch-track{
  display:block; width:52px; height:29px; border-radius:999px;
  background:rgba(29,32,35,.20); position:relative;
  transition:background-color .25s ease;
}
.switch-knob{
  position:absolute; top:3px; left:3px; width:23px; height:23px; border-radius:50%;
  background:var(--white); box-shadow:0 2px 6px rgba(0,0,0,.2);
  transition:transform .25s ease;
}
.switch input:checked + .switch-track{background:var(--green)}
.switch input:checked + .switch-track .switch-knob{transform:translateX(23px)}
.switch input:focus-visible + .switch-track{box-shadow:0 0 0 3px rgba(0,93,121,.25)}
.form-note{font-size:.82rem; color:#8B9099; margin:2px 0 0}

/* ---------- 11. FAQ teaser ---------- */
.slab-faq{
  background-image:url("../img/faq-bg.jpg");
  background-position:center 30%;
  margin-top:-120px;
  padding:190px 0 185px;
}

/* ---------- 12. CLEAN ZONE ---------- */
.cz-dims{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:56px}
.cz-dim{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:26px; padding:32px 28px;
}
.cz-n{display:block; font-family:var(--display); font-weight:700; font-size:1rem; color:var(--lime); letter-spacing:.06em; margin-bottom:14px}
.cz-dim .h4{color:var(--white); font-size:1.35rem}
.cz-benefits{
  grid-template-columns:repeat(3, 1fr);
  gap:14px 32px;
  max-width:920px; margin:0 auto 46px;
}

/* ---------- 14. careers ---------- */
.careers-wrap{
  position:relative;
  background:var(--beige);
  border-radius:var(--radius-slab) var(--radius-slab) 0 0;
  margin-top:-120px;
  padding:180px 0 200px;
}
.careers{
  display:grid; grid-template-columns:.85fr 1.15fr; align-items:stretch;
  background:linear-gradient(140deg, var(--teal), var(--navy));
  border-radius:var(--radius-card);
  overflow:hidden;
}
.careers-photo{min-height:300px}
.careers-photo img{width:100%; height:100%; object-fit:cover}
.careers-copy{
  padding:clamp(34px, 4vw, 64px);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  color:rgba(255,255,255,.88);
}
.careers-copy .h2{font-size:clamp(1.9rem, 3.6vw, 3rem)}
.careers-copy > p{margin:0 0 1.2em; font-size:1.05rem}

/* ---------- 15. footer ---------- */
.site-footer{
  position:relative;
  background:linear-gradient(150deg, var(--navy), var(--teal));
  border-radius:var(--radius-slab) var(--radius-slab) 0 0;
  margin-top:-120px;
  padding:180px 0 46px;
  color:rgba(255,255,255,.76);
  font-size:.95rem;
}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.16)}
.foot-brand img{width:172px; background:var(--white); border-radius:14px; padding:10px 14px; margin-bottom:22px}
.foot-brand > p{max-width:48ch}
.socials{display:flex; gap:12px; margin-top:20px}
.socials a{
  display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.3); color:var(--white);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.socials a:hover{background:var(--white); color:var(--teal); border-color:var(--white)}
.socials svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.socials a:first-child svg{fill:currentColor; stroke:none}

.foot-news .h4{color:var(--white)}
.news{display:flex; gap:10px; background:rgba(255,255,255,.10); border-radius:999px; padding:7px 7px 7px 10px; max-width:420px}
.news input{flex:1; min-width:0; border:0; background:transparent; outline:none; color:var(--white); padding:10px 12px; font-size:.95rem}
.news input::placeholder{color:rgba(255,255,255,.55)}
.news .btn{flex:none}

.foot-cols{display:grid; grid-template-columns:repeat(3, 1fr); gap:36px; padding:44px 0}
.foot-col h4{color:var(--white); font-size:1.02rem; margin-bottom:1em}
.foot-col li{margin-bottom:.6em; line-height:1.5}
.foot-col a{transition:color .2s ease}
.foot-col a:hover{color:var(--lime)}
.foot-legal{margin:0; padding-top:26px; border-top:1px solid rgba(255,255,255,.16); font-size:.86rem; color:rgba(255,255,255,.62)}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .hero-tip-dot{animation:none}
  .btn:hover{transform:none}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1200px){
  .nav{gap:18px; font-size:.9rem}
  .brand img{width:100px}
}

@media (max-width:1023px){
  :root{--radius-slab:40px; --radius-card:30px}

  .burger{display:flex}
  .header-cta{display:none}
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; gap:0;
    background:var(--white);
    padding:8px 28px 22px;
    box-shadow:0 20px 40px rgba(0,63,121,.14);
    margin:0;
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{color:var(--ink); padding:14px 0; border-bottom:1px solid rgba(29,32,35,.08); font-size:1.02rem}
  .nav a::after{display:none}
  .nav-cta{display:flex; flex-wrap:wrap; gap:12px; padding-top:18px}
  .nav-cta a{flex:1 1 auto; padding:11px 18px; border-bottom:0; justify-content:center}
  .site-header .nav-cta .btn-ghost{color:var(--teal); border-color:rgba(0,93,121,.4)}
  .site-header .nav-cta .btn-ghost:hover{background:var(--teal); color:var(--white); border-color:var(--teal)}
  .site-header .nav-cta .btn-solid{background:var(--teal); color:var(--white); border-color:var(--teal)}
  .site-header .nav-cta .btn-solid:hover{background:transparent; color:var(--teal)}

  .hero{padding-bottom:150px; flex-direction:column; justify-content:center}
  .hero-tip{position:static; margin:30px auto 0; justify-content:center}

  .slab{padding:80px 0 120px}
  .slab-white{padding-bottom:100px}
  .stack{padding-bottom:0}
  .slab-pull{margin-top:-80px; padding-top:130px}
  .slab-quote.slab-pull{padding-top:140px; padding-bottom:130px}
  .slab-faq{margin-top:-80px; padding:140px 0 130px}
  .slab-head{margin-bottom:40px}

  .steps{grid-template-columns:1fr; gap:38px; margin-bottom:44px}
  .trust{margin-bottom:48px; gap:14px 30px; font-size:.96rem}

  /* sticky stack is desktop only, it needs viewport height to read well */
  .svc{position:static; margin-bottom:22px}
  .svc-body{grid-template-columns:1fr; gap:26px}
  .svc-photo{aspect-ratio:16/10}

  .about{grid-template-columns:1fr; gap:60px; margin-bottom:70px}
  .stat-card{right:14px; bottom:-22px; padding:18px 24px}
  .values{grid-template-columns:1fr 1fr; gap:18px}

  .clients{grid-template-columns:1fr; gap:0}
  .slab-portfolio{padding-bottom:190px}

  .estimate{grid-template-columns:1fr}
  .estimate-wrap{margin-top:-150px; padding-bottom:160px}
  .estimate-photo{min-height:300px; max-height:380px}

  .cz-dims{grid-template-columns:1fr; gap:16px; margin-bottom:40px}
  .cz-dim{padding:26px 24px}
  .cz-benefits{grid-template-columns:1fr 1fr}

  .careers-wrap{margin-top:-80px; padding:130px 0 160px}
  .careers{grid-template-columns:1fr}
  .careers-photo{min-height:260px; max-height:320px}

  .site-footer{margin-top:-80px; padding-top:130px}
  .foot-top{grid-template-columns:1fr; gap:34px}
}

@media (max-width:640px){
  body{font-size:16px}
  .shell{padding-inline:20px}
  .nav{padding-inline:20px}

  .brand img{width:96px}
  .hero{min-height:88svh; padding-bottom:110px}
  .hero .eyebrow{font-size:1.3rem}
  /* the ch cap keeps the headline on three lines and off the right edge of a 390px screen */
  .hero-title{font-size:clamp(2.15rem, 10.2vw, 2.9rem); letter-spacing:-.03em; max-width:10ch; text-wrap:wrap}
  .hero-tip-label{font-size:.78rem; padding:8px 13px; white-space:normal}

  .slab{padding:66px 0 100px}
  .slab-white{padding-bottom:86px}
  .slab-pull{margin-top:-60px; padding-top:104px}
  .slab-quote.slab-pull{padding-top:110px; padding-bottom:105px}
  .slab-faq{margin-top:-60px; padding:110px 0 105px}

  .step-ring{width:86px; height:86px; margin-bottom:18px}
  .step-ring svg{width:36px; height:36px}
  .trust{flex-direction:column; align-items:flex-start; gap:12px}

  .svc-inner{padding:26px 22px 28px; border-radius:26px}
  .svc-head{padding-bottom:18px; margin-bottom:22px; gap:14px}
  .svc-photo{border-radius:18px}

  .about-sub{flex-direction:column; gap:16px; padding:18px}
  .about-sub img{width:100%; height:150px}
  .stat-card{right:auto; left:16px; bottom:-18px; padding:14px 20px}
  .stat-num{font-size:2rem}
  .values{grid-template-columns:1fr}

  .selectgo{flex-direction:column; border-radius:26px; padding:12px; gap:12px; max-width:100%}
  .selectgo select{width:100%; text-align:left}
  .selectgo-btn{width:100%; border-radius:999px; height:52px}

  .clients li{flex-wrap:wrap; gap:4px 12px; padding:15px 2px}
  .client-name{font-size:1rem; flex:1 1 0; min-width:0}
  .client-loc{margin-left:0; width:100%; padding-left:36px}

  .slab-portfolio{padding-bottom:150px}
  .estimate{border-radius:28px}
  .estimate-wrap{margin-top:-110px; padding-bottom:120px}
  .estimate-form{padding:26px 22px 30px}
  .field-row{grid-template-columns:1fr}
  .field-toggle{align-items:flex-start; flex-direction:column; gap:12px}

  .cz-benefits{grid-template-columns:1fr}

  .careers-wrap{margin-top:-60px; padding:104px 0 130px}
  .careers{border-radius:26px}
  .careers-copy{align-items:stretch}
  .careers-copy .btn{width:100%; word-break:break-word; font-size:.92rem; padding-inline:18px}

  .site-footer{margin-top:-60px; padding:104px 0 36px}
  .foot-cols{grid-template-columns:1fr; gap:28px; padding:34px 0}
  .news{max-width:100%}
  .news .btn{padding-inline:16px}
}