/* ==========================================================================
   Tita's Cleaning — Design System
   Brand colors sampled directly from the official logo:
   navy #003672 · teal #4BA38A
   ========================================================================== */

:root{
  /* ---- brand ---- */
  --navy:#003672;
  --navy-700:#002B5C;
  --navy-800:#002047;
  --navy-900:#001834;
  --teal:#4BA38A;
  --teal-600:#3C8E77;
  --teal-700:#2F7A65;
  --teal-050:#EEF6F3;
  --teal-100:#DCEDE7;

  /* ---- neutrals (cool, navy-biased — chosen, not default grey) ---- */
  --paper:#FFFFFF;
  --mist:#F5F8FB;
  --mist-2:#EDF2F7;
  --sand:#F8F4ED;          /* warm supporting tone, used sparingly */
  --line:#E1E8F0;
  --line-2:#CBD7E4;
  --ink:#10233F;
  --ink-2:#3A5170;
  --ink-soft:#4C6179;
  --ink-mute:#6B7F96;

  /* ---- type ---- */
  --display:'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- scale ---- */
  --shell:1200px;
  --gut:clamp(20px, 5vw, 48px);
  --r-sm:8px;
  --r:14px;
  --r-lg:20px;

  --sh-1:0 1px 2px rgba(16,35,63,.05), 0 2px 8px rgba(16,35,63,.05);
  --sh-2:0 2px 6px rgba(16,35,63,.06), 0 12px 32px -12px rgba(16,35,63,.20);
  --sh-3:0 4px 12px rgba(16,35,63,.08), 0 28px 64px -24px rgba(16,35,63,.32);

  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
svg{display:block;max-width:100%}

h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:1.14;letter-spacing:-.015em;color:var(--navy-800);text-wrap:balance}
h1{font-size:clamp(34px,5.2vw,58px);letter-spacing:-.028em}
h2{font-size:clamp(28px,3.9vw,42px);letter-spacing:-.022em}
h3{font-size:clamp(20px,2.3vw,25px)}
h4{font-size:19px;font-family:var(--sans);font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
a{color:var(--teal-700);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--navy)}
strong{font-weight:700;color:var(--navy-800)}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.5em}
li::marker{color:var(--teal)}

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

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:760px}
.measure{max-width:66ch}
.center{text-align:center;margin-inline:auto}

.skip{
  position:absolute;left:0;top:0;z-index:999;
  transform:translateY(-120%);
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
  font-weight:600;font-size:15px;text-decoration:none;
}
.skip:focus{transform:translateY(0);color:#fff}

/* ==========================================================================
   Eyebrow / labels
   ========================================================================== */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--teal-700);
  margin:0 0 16px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--teal);border-radius:2px;flex:none}
.eyebrow.solo::before{display:none}
.on-navy .eyebrow{color:var(--teal)}

.lede{font-size:clamp(17.5px,2vw,20px);line-height:1.62;color:var(--ink-soft)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:-.005em;
  padding:15px 26px;min-height:52px;
  border-radius:var(--r-sm);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease), box-shadow .2s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}

.btn-primary{background:var(--teal);color:#fff;box-shadow:0 1px 2px rgba(0,54,114,.16), 0 8px 20px -10px rgba(75,163,138,.7)}
.btn-primary:hover{background:var(--teal-600);color:#fff;box-shadow:0 2px 4px rgba(0,54,114,.18), 0 12px 26px -10px rgba(75,163,138,.8)}

.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-700);color:#fff}

.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--mist);border-color:var(--navy);color:var(--navy)}

/* outline buttons sitting on any dark ground */
.on-navy .btn-ghost,
.hero .btn-ghost,
.phero .btn-ghost,
.cta-band .btn-ghost,
.sec.navy .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.on-navy .btn-ghost:hover,
.hero .btn-ghost:hover,
.phero .btn-ghost:hover,
.cta-band .btn-ghost:hover,
.sec.navy .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.hero .btn-ghost svg,
.phero .btn-ghost svg,
.cta-band .btn-ghost svg{color:var(--teal)}

.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--teal-050);color:var(--navy)}

.btn-lg{font-size:17px;padding:17px 32px;min-height:58px}
.btn-block{width:100%}

.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-row.center{justify-content:center}

/* ==========================================================================
   Header
   ========================================================================== */
.topbar{
  background:var(--navy-800);color:#D8E4F2;
  font-size:13.5px;letter-spacing:.01em;
}
.topbar .shell{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding-block:7px}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar a:hover{color:var(--teal)}
.topbar .tb-tag{display:inline-flex;align-items:center;gap:8px}
.topbar .tb-tag svg{width:15px;height:15px;flex:none;color:var(--teal)}
@media (max-width:720px){ .topbar .tb-hide{display:none} .topbar .shell{justify-content:center} }

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.site-header.stuck{box-shadow:0 1px 0 var(--line), 0 8px 24px -16px rgba(16,35,63,.35)}
/* the header gets a wider container than the page body so the full nav fits */
.site-header > .shell,
.topbar > .shell{max-width:1340px;padding-inline:clamp(18px,3vw,36px)}

.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:82px;padding-block:10px}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;min-width:0}
.brand img{width:62px;height:62px;object-fit:contain}
.brand .bt{display:flex;flex-direction:column;line-height:1.1}
.brand .bt b{font-family:var(--display);font-size:20px;font-weight:600;color:var(--navy);letter-spacing:-.02em}
.brand .bt span{display:none}

.nav{display:flex;align-items:center;gap:1px}
.nav a.navlink,.nav button.navlink{
  font-family:var(--sans);font-size:14.8px;font-weight:600;color:var(--navy-800);
  text-decoration:none;padding:9px 10px;border-radius:var(--r-sm);
  background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  transition:background .18s var(--ease),color .18s var(--ease);
  white-space:nowrap;font-family:var(--sans);
}
.nav a.navlink:hover,.nav button.navlink:hover{background:var(--teal-050);color:var(--teal-700)}
.nav a.navlink[aria-current="page"]{color:var(--teal-700)}
.nav a.navlink[aria-current="page"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:var(--teal);border-radius:2px;
}
.nav a.navlink{position:relative}

.has-drop{position:relative}
.has-drop .caret{width:11px;height:11px;transition:transform .2s var(--ease)}
.has-drop[data-open="true"] .caret{transform:rotate(180deg)}
.drop{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:308px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-drop[data-open="true"] .drop{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.drop .dhead{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);padding:10px 12px 6px}
.drop a{
  display:block;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;
  color:var(--navy-800);font-weight:600;font-size:15px;line-height:1.35;
}
.drop a small{display:block;font-weight:400;font-size:13px;color:var(--ink-mute);margin-top:2px;line-height:1.45}
.drop a:hover{background:var(--teal-050);color:var(--teal-700)}
.drop a:hover small{color:var(--ink-soft)}
.drop hr{border:0;border-top:1px solid var(--line);margin:8px 4px}

.hdr-cta{display:flex;align-items:center;gap:12px;flex:none}
.hdr-cta .btn{padding:14px 22px;font-size:15px;min-height:48px}
.hdr-phone{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--navy);font-weight:700;font-size:15.5px;padding:8px 6px;white-space:nowrap;
}
.hdr-phone svg{width:17px;height:17px;color:var(--teal)}
.hdr-phone:hover{color:var(--teal-700)}
.hdr-phone .lbl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);line-height:1.3}
.hdr-phone .num{display:block;line-height:1.25}

.burger{
  display:none;width:48px;height:48px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:#fff;cursor:pointer;align-items:center;justify-content:center;flex:none;padding:0;
}
.burger span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;position:relative;transition:background .15s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--navy);border-radius:2px;transition:transform .22s var(--ease), top .22s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* the top bar already shows the number, so the inline header phone can go first */
@media (max-width:1339px){ .hdr-phone{display:none} }

@media (max-width:1179px){
  .nav{display:none}
  .burger{display:flex}
  .nav-wrap{min-height:72px}
  .brand img{width:54px;height:54px}
}
@media (max-width:560px){
  .hdr-cta{gap:10px}
  .hdr-cta .btn{padding:12px 15px;font-size:13.5px;min-height:46px}
  .brand .bt{display:none}
  .brand img{width:50px;height:50px}
}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:200;display:none;
}
.drawer[data-open="true"]{display:block}
.drawer .veil{position:absolute;inset:0;background:rgba(0,24,52,.5);backdrop-filter:blur(2px);animation:fade .2s var(--ease)}
.drawer .panel{
  position:absolute;top:0;right:0;bottom:0;width:min(400px,90vw);
  background:#fff;box-shadow:var(--sh-3);
  display:flex;flex-direction:column;
  animation:slidein .26s var(--ease);
  overflow-y:auto;overscroll-behavior:contain;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slidein{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer .dtop{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.drawer .dclose{width:44px;height:44px;border:1px solid var(--line-2);background:#fff;border-radius:var(--r-sm);cursor:pointer;display:grid;place-content:center;color:var(--navy)}
.drawer .dclose svg{width:18px;height:18px}
.drawer nav{padding:10px 14px 18px;display:flex;flex-direction:column;gap:2px}
.drawer nav a{
  display:block;padding:14px 12px;border-radius:var(--r-sm);text-decoration:none;
  color:var(--navy-800);font-weight:600;font-size:17px;border-bottom:1px solid var(--line);
}
.drawer nav a:last-of-type{border-bottom:0}
.drawer nav a:hover,.drawer nav a:focus-visible{background:var(--teal-050);color:var(--teal-700)}
.drawer nav .sub{padding:4px 0 4px 14px;border-left:2px solid var(--teal-100);margin:2px 0 6px 12px}
.drawer nav .sub a{font-size:15.5px;font-weight:500;padding:11px 10px;border-bottom:0;color:var(--ink-soft)}
.drawer .dfoot{margin-top:auto;padding:18px 20px 24px;border-top:1px solid var(--line);background:var(--mist);display:flex;flex-direction:column;gap:10px}

/* sticky mobile action bar */
.mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -6px 24px -12px rgba(16,35,63,.3);
}
.mobar .btn{flex:1;min-height:52px;font-size:15.5px;padding:14px 12px}
@media (max-width:860px){ .mobar{display:flex} body{padding-bottom:78px} }

/* ==========================================================================
   Sections
   ========================================================================== */
.sec{padding-block:clamp(60px,8vw,104px)}
.sec-sm{padding-block:clamp(44px,6vw,72px)}
.sec.mist{background:var(--mist)}
.sec.sand{background:var(--sand)}
.sec.navy{background:var(--navy-800);color:#DCE7F5}
.sec.navy h2,.sec.navy h3{color:#fff}
.sec.navy .lede{color:#B8CCE4}

.sec-head{max-width:720px;margin-bottom:clamp(36px,4.5vw,54px)}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head.center .eyebrow{justify-content:center}
.sec-head h2{margin-bottom:16px}
.sec-head .lede{margin:0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split.wide-left{grid-template-columns:1.08fr .92fr}
@media (max-width:900px){ .split,.split.wide-left{grid-template-columns:1fr;gap:36px} }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  background:var(--navy-800);
  color:#fff;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 520px at 88% 8%, rgba(75,163,138,.22), transparent 62%),
    radial-gradient(760px 420px at 4% 96%, rgba(0,54,114,.55), transparent 60%);
}
.hero .shell{position:relative;z-index:2}
.hero-grid{
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,5vw,64px);
  align-items:center;padding-block:clamp(48px,7vw,86px);
}
.hero h1{color:#fff;margin-bottom:22px;font-size:clamp(36px,4.6vw,56px);line-height:1.08}
.hero h1 .accent{color:var(--teal);font-style:italic;font-weight:400}
.hero .sub{font-size:clamp(17px,1.9vw,19.5px);line-height:1.62;color:#C6D8ED;max-width:56ch;margin-bottom:28px}
.hero .slogan{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-style:italic;font-size:16px;color:var(--teal);
  background:rgba(75,163,138,.14);border:1px solid rgba(75,163,138,.34);
  padding:7px 16px;border-radius:999px;margin-bottom:22px;
}
.hero-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.hero-trust div{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:#D6E4F3}
.hero-trust svg{width:19px;height:19px;color:var(--teal);flex:none}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;padding-block:40px 44px}
  .hero-trust{gap:10px 20px}
}

/* ==========================================================================
   Quote form card
   ========================================================================== */
.quote-card{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3);
  border:1px solid rgba(255,255,255,.7);
  padding:clamp(24px,3vw,32px);
  color:var(--ink);
}
.quote-card .qtop{margin-bottom:20px}
.quote-card h2,.quote-card h3{font-size:24px;margin-bottom:7px;color:var(--navy-800)}
.quote-card .qsub{font-size:14.5px;color:var(--ink-mute);margin:0;line-height:1.55}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13.5px;font-weight:700;color:var(--navy-800);letter-spacing:-.005em}
.field label .req{color:var(--teal-700)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);
  padding:13px 14px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:#fff;width:100%;min-height:50px;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
  appearance:none;-webkit-appearance:none;
}
.field textarea{min-height:96px;resize:vertical;line-height:1.55}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%236B7F96' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(75,163,138,.18);
}
.field input::placeholder,.field textarea::placeholder{color:#93A5B8}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:480px){ .field-row{grid-template-columns:1fr;gap:0} }

.form-note{
  display:flex;align-items:flex-start;gap:9px;
  font-size:12.5px;color:var(--ink-mute);line-height:1.5;margin-top:14px;
}
.form-note svg{width:15px;height:15px;color:var(--teal);flex:none;margin-top:2px}

.form-alt{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
  text-align:center;font-size:14.5px;color:var(--ink-mute);
}
.form-alt a{font-weight:700;color:var(--navy);text-decoration:none;font-size:17px;display:inline-flex;align-items:center;gap:7px;margin-top:4px}
.form-alt a:hover{color:var(--teal-700)}
.form-alt a svg{width:17px;height:17px;color:var(--teal)}

.form-ok{
  display:none;text-align:center;padding:28px 10px;
}
.form-ok.show{display:block}
.form-ok .tick{width:56px;height:56px;border-radius:50%;background:var(--teal-050);color:var(--teal-700);display:grid;place-content:center;margin:0 auto 16px}
.form-ok .tick svg{width:28px;height:28px}
.form-ok h3{font-size:22px;margin-bottom:8px}
.form-ok p{font-size:15px;color:var(--ink-soft);margin:0 auto;max-width:34ch}
.is-sent .qform,.is-sent .qtop{display:none}

/* ==========================================================================
   Benefit strip
   ========================================================================== */
.benefits{background:var(--paper);border-bottom:1px solid var(--line)}
.benefits .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;padding-block:clamp(36px,4.5vw,56px)}
.benefits .b{padding:8px clamp(18px,2.6vw,34px);border-right:1px solid var(--line);display:flex;gap:16px;align-items:flex-start}
.benefits .b:first-child{padding-left:0}
.benefits .b:last-child{border-right:0;padding-right:0}
.benefits .ic{width:46px;height:46px;border-radius:12px;background:var(--teal-050);color:var(--teal-700);display:grid;place-content:center;flex:none}
.benefits .ic svg{width:23px;height:23px}
.benefits h3{font-size:18.5px;font-family:var(--sans);font-weight:800;letter-spacing:-.01em;margin-bottom:5px;color:var(--navy-800)}
.benefits p{font-size:14.8px;color:var(--ink-soft);line-height:1.55;margin:0}
@media (max-width:860px){
  .benefits .grid{grid-template-columns:1fr;gap:24px}
  .benefits .b{border-right:0;border-bottom:1px solid var(--line);padding:0 0 24px}
  .benefits .b:last-child{border-bottom:0;padding-bottom:0}
}

/* ==========================================================================
   Cards / services
   ========================================================================== */
.cards{display:grid;gap:24px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1040px){ .cards.c4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:940px){ .cards.c3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .cards.c2,.cards.c3,.cards.c4{grid-template-columns:1fr} }

.svc{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color .2s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
  text-decoration:none;color:inherit;
}
.svc:hover{border-color:var(--teal);box-shadow:var(--sh-2);transform:translateY(-3px);color:inherit}
.svc .thumb{aspect-ratio:16/10;background:var(--mist-2);position:relative;overflow:hidden}
.svc .thumb img,.svc .thumb svg{width:100%;height:100%;object-fit:cover}
.svc .body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;gap:9px}
.svc .tag{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--teal-700)}
.svc .tag.comm{color:var(--navy)}
.svc h3{font-size:21px;margin:0}
.svc p{font-size:15px;color:var(--ink-soft);line-height:1.58;margin:0;flex:1}
.svc .more{
  display:inline-flex;align-items:center;gap:7px;margin-top:6px;
  font-weight:700;font-size:15px;color:var(--teal-700);
}
.svc .more svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.svc:hover .more{color:var(--navy)}
.svc:hover .more svg{transform:translateX(4px)}

/* generic feature card */
.fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.fcard .ic{width:44px;height:44px;border-radius:11px;background:var(--teal-050);color:var(--teal-700);display:grid;place-content:center;margin-bottom:16px}
.fcard .ic svg{width:22px;height:22px}
.fcard h3{font-size:19.5px;font-family:var(--sans);font-weight:800;letter-spacing:-.012em;margin-bottom:8px}
.fcard p{font-size:15px;color:var(--ink-soft);line-height:1.6;margin:0}
.sec.navy .fcard{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14)}
.sec.navy .fcard p{color:#B8CCE4}
.sec.navy .fcard .ic{background:rgba(75,163,138,.18);color:var(--teal)}

/* checklist */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.checks.two{grid-template-columns:1fr 1fr;gap:12px 28px}
@media (max-width:680px){ .checks.two{grid-template-columns:1fr} }
.checks li{display:flex;gap:11px;align-items:flex-start;margin:0;font-size:16px;line-height:1.55}
.checks li svg{width:20px;height:20px;color:var(--teal);flex:none;margin-top:2px}
.sec.navy .checks li{color:#D6E4F3}

/* ==========================================================================
   About / image blocks
   ========================================================================== */
.img-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);background:var(--mist-2)}
.img-frame img,.img-frame svg{width:100%;display:block}

.stat-strip{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.stat-strip div{
  flex:1 1 150px;background:var(--mist);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:16px 18px;
}
.stat-strip b{display:block;font-family:var(--display);font-size:29px;font-weight:600;color:var(--navy);line-height:1.1;letter-spacing:-.02em}
.stat-strip span{display:block;font-size:13.5px;color:var(--ink-mute);margin-top:4px;font-weight:600}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:940px){ .gallery{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .gallery{grid-template-columns:1fr} }
.gitem{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff}
.gitem .ph{aspect-ratio:4/3}
.gitem figcaption{padding:12px 16px;font-size:13.5px;color:var(--ink-mute);border-top:1px solid var(--line);background:#fff}

/* placeholder art */
.ph{
  display:grid;place-content:center;gap:10px;text-align:center;
  background:
    repeating-linear-gradient(135deg, var(--mist-2) 0 12px, var(--mist) 12px 24px);
  color:var(--ink-mute);padding:24px;min-height:150px;
}
.ph .phi{width:40px;height:40px;color:var(--line-2);margin-inline:auto}
.ph b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);opacity:.6}
.ph span{display:block;font-size:12.5px;line-height:1.5;max-width:26ch;margin-inline:auto}

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:940px){ .reviews{grid-template-columns:1fr} }
.review{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px 24px;display:flex;flex-direction:column;gap:14px;
}
.review .qm{font-family:var(--display);font-size:46px;line-height:.7;color:var(--teal-100);height:24px}
.review .rtext{font-size:16px;line-height:1.62;color:var(--ink-soft);flex:1;margin:0}
.review .slot{
  border:1.5px dashed var(--line-2);border-radius:var(--r-sm);
  padding:18px 16px;text-align:center;background:var(--mist);
  font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mute);
  line-height:1.6;
}
.review .who{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.review .av{width:42px;height:42px;border-radius:50%;background:var(--teal-050);color:var(--teal-700);display:grid;place-content:center;font-weight:800;font-size:15px;flex:none}
.review .who b{display:block;font-size:15px;color:var(--navy-800);font-weight:700}
.review .who span{display:block;font-size:13px;color:var(--ink-mute)}

.review-note{
  margin-top:26px;padding:16px 20px;border-radius:var(--r-sm);
  background:var(--sand);border:1px solid #E8DFCE;
  font-size:14px;color:#6E5C3E;line-height:1.6;display:flex;gap:10px;align-items:flex-start;
}
.review-note svg{width:17px;height:17px;flex:none;margin-top:3px}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.cta-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 380px at 82% 12%, rgba(75,163,138,.28), transparent 62%);
}
.cta-band .shell{position:relative;z-index:2;text-align:center;padding-block:clamp(52px,7vw,84px)}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band p{color:#C6D8ED;font-size:clamp(16.5px,1.9vw,19px);max-width:56ch;margin:0 auto 30px}
.cta-band .btn-row{justify-content:center}
.cta-band .fineprint{margin-top:22px;font-size:13.5px;color:#93B0D2}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:840px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--sans);font-size:17.5px;font-weight:700;color:var(--navy-800);
  line-height:1.45;transition:color .16s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--teal-700)}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--teal);border-bottom:2px solid var(--teal);
  transform:translateY(-70%) rotate(45deg);transition:transform .22s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .ans{padding:0 44px 24px 0;color:var(--ink-soft);font-size:16px;line-height:1.66}
.faq .ans p:last-child{margin-bottom:0}

/* ==========================================================================
   Areas we service
   ========================================================================== */
.area-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(28px,4vw,44px);box-shadow:var(--sh-1);
}
.area-pill{
  display:inline-flex;align-items:center;gap:8px;background:var(--teal-050);
  color:var(--teal-700);font-weight:700;font-size:14.5px;
  padding:9px 16px;border-radius:999px;border:1px solid var(--teal-100);
}
.area-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* ==========================================================================
   Page hero (interior)
   ========================================================================== */
.phero{background:var(--navy-800);color:#fff;position:relative;overflow:hidden}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(880px 420px at 86% 10%, rgba(75,163,138,.2), transparent 62%)}
.phero .shell{position:relative;z-index:2;padding-block:clamp(44px,6vw,76px)}
.phero h1{color:#fff;margin-bottom:16px;max-width:20ch}
.phero p{color:#C6D8ED;font-size:clamp(16.5px,1.9vw,19px);max-width:62ch;margin:0}
.phero .btn-row{margin-top:30px}

.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:#93B0D2;margin-bottom:18px}
.crumbs a{color:#C6D8ED;text-decoration:none;font-weight:600}
.crumbs a:hover{color:var(--teal)}
.crumbs span{opacity:.5}

/* ==========================================================================
   Prose (service + blog bodies)
   ========================================================================== */
.prose h2{margin:44px 0 16px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:32px 0 12px;font-family:var(--sans);font-weight:800;font-size:20px;letter-spacing:-.012em}
.prose p,.prose ul,.prose ol{color:var(--ink-soft);font-size:17px;line-height:1.72}
.prose li{margin-bottom:.55em}
.prose strong{color:var(--navy-800)}

.callout{
  background:var(--teal-050);border-left:3px solid var(--teal);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:20px 24px;margin:28px 0;
}
.callout p{margin:0;color:var(--navy-700);font-size:16px}
.callout strong{color:var(--navy-800)}

.addon-box{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px;margin:28px 0;
}
.addon-box h3{margin:0 0 6px;font-size:18px}
.addon-box .sub{font-size:14.5px;color:var(--ink-mute);margin-bottom:16px}
.addon-list{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.addon-list li{
  margin:0;display:inline-flex;align-items:center;gap:8px;
  background:var(--mist);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;font-size:14.5px;font-weight:600;color:var(--navy-800);
}
.addon-list li svg{width:15px;height:15px;color:var(--teal)}

.sidebar-sticky{position:sticky;top:104px}
.layout-aside{display:grid;grid-template-columns:1fr 390px;gap:clamp(32px,4.5vw,60px);align-items:start}
@media (max-width:1040px){ .layout-aside{grid-template-columns:1fr} .sidebar-sticky{position:static} }

/* ==========================================================================
   Blog
   ========================================================================== */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media (max-width:980px){ .posts{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .posts{grid-template-columns:1fr} }
.post{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .2s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
}
a.post:hover{border-color:var(--teal);box-shadow:var(--sh-2);transform:translateY(-3px)}
.post .thumb{aspect-ratio:16/9}
.post .body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.post .cat{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--teal-700)}
.post h3{font-size:20px;line-height:1.28}
.post p{font-size:14.8px;color:var(--ink-soft);line-height:1.58;margin:0;flex:1}
.post .more{font-weight:700;font-size:14.5px;color:var(--teal-700);display:inline-flex;align-items:center;gap:6px}
.post.soon{opacity:.92}
.post.soon .cat{color:var(--ink-mute)}
.post .soon-tag{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  color:var(--ink-mute);background:var(--mist);border:1px solid var(--line);
  padding:7px 13px;border-radius:999px;align-self:flex-start;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.contact-list li{margin:0}
.contact-list a,.contact-list .ci{
  display:flex;gap:15px;align-items:flex-start;padding:16px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.contact-list li:last-child a,.contact-list li:last-child .ci{border-bottom:0}
.contact-list .ic{width:44px;height:44px;border-radius:11px;background:var(--teal-050);color:var(--teal-700);display:grid;place-content:center;flex:none}
.contact-list .ic svg{width:21px;height:21px}
.contact-list b{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:3px}
.contact-list .val{display:block;font-size:18px;font-weight:700;color:var(--navy-800);line-height:1.35;word-break:break-word}
.contact-list a:hover .val{color:var(--teal-700)}
.contact-list .note{display:block;font-size:14px;color:var(--ink-mute);font-weight:400;margin-top:2px}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--navy-900);color:#A9C1DC;padding-block:clamp(48px,6vw,72px) 0;font-size:15px}
.site-footer .fhead{color:#fff;font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;line-height:1.4}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,52px)}
@media (max-width:960px){ .fgrid{grid-template-columns:1fr 1fr;gap:36px} }
@media (max-width:560px){ .fgrid{grid-template-columns:1fr;gap:32px} }
.fbrand img{width:82px;height:82px;background:#fff;border-radius:14px;padding:7px;margin-bottom:16px}
.fbrand .fslog{font-family:var(--display);font-style:italic;font-size:17px;color:var(--teal);margin-bottom:12px}
.fbrand p{font-size:14.5px;line-height:1.65;color:#A9C1DC;max-width:34ch}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.site-footer li{margin:0}
.site-footer a{color:#A9C1DC;text-decoration:none;font-size:15px}
.site-footer a:hover{color:var(--teal)}
.fcontact{display:grid;gap:14px}
.fcontact a{display:flex;gap:11px;align-items:flex-start;color:#fff;font-weight:700}
.fcontact a svg{width:17px;height:17px;color:var(--teal);flex:none;margin-top:3px}
.fcontact a span{font-weight:400;color:#A9C1DC;display:block;font-size:13.5px}
.fbot{
  margin-top:clamp(36px,5vw,56px);border-top:1px solid rgba(255,255,255,.12);
  padding-block:24px;display:flex;flex-wrap:wrap;gap:12px 28px;
  justify-content:space-between;align-items:center;font-size:13.5px;color:#7E97B4;
}
.fbot a{font-size:13.5px;color:#7E97B4}
@media (max-width:860px){ .site-footer{padding-bottom:70px} }

/* ==========================================================================
   Reveal animation (subtle, one-shot, visible-at-rest fallback)
   ========================================================================== */
.rv{opacity:1;transform:none}
@media (prefers-reduced-motion: no-preference){
  .js .rv{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease), transform .55s var(--ease)}
  .js .rv.in{opacity:1;transform:none}
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-s{margin-top:16px}.mt-m{margin-top:28px}.mt-l{margin-top:42px}
.tac{text-align:center}

/* ==========================================================================
   v2 ADDITIONS
   Glowing CTAs · hero portrait · service carousel · map · neighborhoods
   ========================================================================== */

/* ---- 1. Subtle CTA glow ------------------------------------------------- */
.btn-primary{
  position:relative;
  box-shadow:
    0 1px 2px rgba(0,54,114,.18),
    0 8px 20px -10px rgba(75,163,138,.70),
    0 0 0 0 rgba(75,163,138,.42);
}
.btn-primary::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  background:radial-gradient(60% 120% at 50% 0%, rgba(120,214,186,.55), rgba(75,163,138,0) 70%);
  opacity:0;transition:opacity .28s var(--ease);pointer-events:none;z-index:-1;filter:blur(9px);
}
.btn-primary:hover{
  box-shadow:
    0 2px 4px rgba(0,54,114,.2),
    0 14px 30px -10px rgba(75,163,138,.85),
    0 0 26px -4px rgba(75,163,138,.55);
}
.btn-primary:hover::after{opacity:1}

/* the hero, CTA band and mobile bar get a slow ambient pulse */
@media (prefers-reduced-motion: no-preference){
  .hero .btn-primary,
  .cta-band .btn-primary,
  .mobar .btn-primary,
  .quote-card button.btn-primary{animation:ctaGlow 3.6s var(--ease) infinite}
  .hero .btn-primary:hover,
  .cta-band .btn-primary:hover,
  .mobar .btn-primary:hover,
  .quote-card button.btn-primary:hover{animation:none}
}
@keyframes ctaGlow{
  0%,100%{box-shadow:0 1px 2px rgba(0,54,114,.18), 0 8px 20px -10px rgba(75,163,138,.7), 0 0 0 0 rgba(75,163,138,.0)}
  50%    {box-shadow:0 1px 2px rgba(0,54,114,.18), 0 10px 24px -10px rgba(75,163,138,.85), 0 0 22px -2px rgba(75,163,138,.45)}
}

/* navy + outline CTAs get a matching, quieter lift */
.btn-navy{box-shadow:0 1px 2px rgba(0,24,52,.2), 0 8px 20px -12px rgba(0,54,114,.7)}
.btn-navy:hover{box-shadow:0 2px 4px rgba(0,24,52,.24), 0 14px 28px -12px rgba(0,54,114,.85), 0 0 22px -6px rgba(0,54,114,.5)}
.hero .btn-ghost:hover,.phero .btn-ghost:hover,.cta-band .btn-ghost:hover{box-shadow:0 0 24px -6px rgba(255,255,255,.4)}

/* ---- 2. Slogan pill stays on one line ----------------------------------- */
.hero .slogan{white-space:nowrap;flex-wrap:nowrap}
.hero .slogan svg{width:17px;height:17px;flex:none}
@media (max-width:420px){ .hero .slogan{font-size:14.5px;padding:6px 13px} }

/* ---- 3. Hero portrait --------------------------------------------------- */
.hero > .shell{max-width:1340px}
.hero-grid{
  display:grid;gap:clamp(28px,4vw,52px);align-items:center;
  grid-template-columns:1fr 400px;
  grid-template-areas:"copy form";
}
.hero-copy{grid-area:copy;min-width:0}
.hero-portrait{grid-area:portrait;display:none;min-width:0}
.hero-formcol{grid-area:form;min-width:0}

.portrait{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.16);
  background:var(--navy-700);
  aspect-ratio:3/4;
}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.portrait .ph{height:100%;min-height:0;background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.055) 0 12px, rgba(255,255,255,.02) 12px 24px)}
.portrait .ph b{color:#fff;opacity:.85}
.portrait .ph span{color:#A9C5DE}
.portrait .ph .phi{color:rgba(255,255,255,.28)}
.portrait-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 18px 14px;
  background:linear-gradient(to top, rgba(0,24,52,.92), rgba(0,24,52,0));
  font-size:13px;font-weight:700;color:#fff;letter-spacing:.01em;
  display:flex;align-items:center;gap:8px;
}
.portrait-cap svg{width:15px;height:15px;color:var(--teal);flex:none}

@media (min-width:1220px){
  .hero-grid{grid-template-columns:1fr 272px 400px;grid-template-areas:"copy portrait form"}
  .hero-portrait{display:block}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"copy" "portrait" "form"}
  .hero-portrait{display:block;max-width:400px;margin-inline:auto;width:100%}
  .portrait{aspect-ratio:4/3}
}

/* interior page hero portrait */
.phero .shell{max-width:1340px}
.phero-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,48px);align-items:center}
@media (min-width:1000px){
  .phero-grid{grid-template-columns:1fr 300px}
}
.phero-portrait .portrait{aspect-ratio:4/5}
@media (max-width:999px){
  .phero-portrait{max-width:340px}
  .phero-portrait .portrait{aspect-ratio:16/10}
}

/* ---- 4. Areas we service: equal checks, one-line labels, map ------------ */
.area-pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
@media (max-width:420px){ .area-pills{grid-template-columns:1fr} }
.area-pill{
  display:flex;align-items:center;gap:9px;
  background:var(--teal-050);color:var(--teal-700);
  font-weight:700;font-size:13.8px;line-height:1.2;
  padding:11px 13px;border-radius:10px;border:1px solid var(--teal-100);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.area-pill svg{width:17px;height:17px;flex:none;stroke-width:2.2}

.map-embed{
  position:relative;margin-top:22px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--mist-2);aspect-ratio:4/3;
}
.map-embed .ph{position:absolute;inset:0;height:100%;min-height:0}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map-cap{font-size:12.5px;color:var(--ink-mute);margin-top:10px;line-height:1.5}

/* ---- 5. Service page image carousel ------------------------------------ */
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:18px;width:max-content;will-change:transform}
@media (prefers-reduced-motion: no-preference){
  .marquee-track{animation:marq 46s linear infinite}
  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track{animation-play-state:paused}
}
@media (prefers-reduced-motion: reduce){
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none}
}
@keyframes marq{ from{transform:translateX(0)} to{transform:translateX(calc(-50% - 9px))} }
.mslide{
  flex:none;width:clamp(230px,26vw,310px);
  border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;
}
.mslide .ph,.mslide img{aspect-ratio:4/3;width:100%;height:auto;min-height:0}
.mslide img{object-fit:cover}

/* ---- 6. Why-choose-us card hover --------------------------------------- */
.sec.navy .fcard{transition:background .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease)}
.sec.navy .fcard:hover{
  background:rgba(75,163,138,.14);
  border-color:rgba(75,163,138,.5);
  transform:translateY(-4px);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(75,163,138,.18);
}
.sec.navy .fcard:hover .ic{background:var(--teal);color:#04241F}
.sec.navy .fcard .ic{transition:background .24s var(--ease), color .24s var(--ease)}
/* light-ground feature cards get the same treatment */
.sec .fcard{transition:background .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease)}
.sec:not(.navy) .fcard:hover{background:var(--teal-050);border-color:var(--teal);transform:translateY(-4px);box-shadow:var(--sh-2)}

/* ---- 7. Neighborhoods -------------------------------------------------- */
.hoods{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:8px}
.hood{
  display:flex;align-items:center;gap:11px;
  background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:14px 16px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.hood:hover{border-color:var(--teal);box-shadow:var(--sh-1);transform:translateY(-2px)}
.hood svg{width:17px;height:17px;color:var(--teal);flex:none}
.hood b{font-size:15.2px;font-weight:700;color:var(--navy-800);line-height:1.3}
.sec.mist .hood{background:#fff}

/* ---- v2 fixes from visual QA ------------------------------------------- */

/* browser default figure margin (1em 40px) was inflating carousel + grid gaps */
figure{margin:0}

/* generic icon-chip sizing fallback for inline .ic spans
   (more specific .fcard .ic svg / .contact-list .ic svg still win) */
.ic svg{width:22px;height:22px}

/* service-area pills: fit "Move-in / move-out" on one line without clipping */
.area-pills{gap:8px}
.area-pill{font-size:13px;padding:11px 12px;gap:8px;letter-spacing:-.005em}
.area-pill svg{width:16px;height:16px}

/* hero: give the copy column enough room to keep both CTAs on one row */
@media (min-width:1220px){
  .hero-grid{grid-template-columns:1fr 244px 400px;gap:36px}
}

/* pills size to their own content so every label stays on one line,
   while the check icons remain a uniform size */
.area-pills{display:flex;flex-wrap:wrap;gap:8px}
.area-pill{flex:0 1 auto;overflow:visible;text-overflow:clip}

/* ---- v3: "About Tita's Cleaning" in the nav ----------------------------
   The logo artwork already carries the wordmark, so the text repeated next
   to it was saying the name twice. Logo alone, slightly larger, frees the
   width the longer nav label needs. */
.brand .bt{display:none}
.brand img{width:68px;height:68px}
.nav a.navlink,.nav button.navlink{font-size:14.4px;padding:9px 10px}
.nav a.navlink[aria-current="page"]::after{left:10px;right:10px}
@media (max-width:1179px){ .brand img{width:58px;height:58px} }
@media (max-width:560px){ .brand img{width:52px;height:52px} }

/* ==========================================================================
   v4 — HERO REBUILD
   Reference composition: copy left, large bottom-bleeding photo right with
   floating proof cards, benefits band tied into the bottom edge.
   Plus the duster-sweep reveal on the slogan.
   ========================================================================== */

/* ---- 1. Duster sweep on "Where Clean Meets Care" ----------------------- */
.sweeper{
  display:inline-flex;align-items:center;gap:11px;
  background:rgba(75,163,138,.13);
  border:1px solid rgba(75,163,138,.34);
  padding:8px 20px;border-radius:999px;margin-bottom:24px;
  -webkit-user-select:none;user-select:none;
}
.sw-wrap{
  position:relative;display:inline-block;
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:16.5px;line-height:1.55;white-space:nowrap;
}
.sw-dust{color:rgba(214,230,246,.34)}
.sw-clean{
  position:absolute;left:0;top:0;color:var(--teal);
  clip-path:inset(0 0 0 0);            /* fully visible at rest */
  text-shadow:0 0 18px rgba(75,163,138,.45);
}
/* only once JS arms it does the clean layer start hidden */
.js .sweeper.armed .sw-clean{clip-path:inset(0 100% 0 0)}
.js .sweeper.armed.play .sw-clean{animation:swReveal 1.5s cubic-bezier(.36,.04,.22,1) forwards}

.sw-duster{
  position:absolute;top:50%;left:-12%;width:34px;height:34px;
  margin-top:-24px;opacity:0;pointer-events:none;z-index:3;
  transform-origin:50% 92%;
}
.js .sweeper.armed.play .sw-duster{animation:swDuster 1.5s cubic-bezier(.36,.04,.22,1) forwards}
.sw-duster svg{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(0,16,36,.5))}

.sw-spark{
  position:absolute;top:50%;width:7px;height:7px;opacity:0;pointer-events:none;z-index:2;
  background:radial-gradient(circle, #CFF3E6 0 30%, rgba(207,243,230,0) 72%);
}
.sw-spark::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom, transparent 44%, #EAFBF4 44% 56%, transparent 56%),
    linear-gradient(to right, transparent 44%, #EAFBF4 44% 56%, transparent 56%);
}
.sw-spark.s1{left:22%;margin-top:-14px}
.sw-spark.s2{left:52%;margin-top:6px}
.sw-spark.s3{left:78%;margin-top:-11px}
.js .sweeper.armed.play .sw-spark{animation:swSpark .62s ease-out forwards}
.js .sweeper.armed.play .sw-spark.s1{animation-delay:.38s}
.js .sweeper.armed.play .sw-spark.s2{animation-delay:.72s}
.js .sweeper.armed.play .sw-spark.s3{animation-delay:1.02s}

@keyframes swReveal{ from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)} }
@keyframes swDuster{
  0%   {left:-14%;opacity:0;transform:rotate(-20deg) scale(.86)}
  10%  {opacity:1;transform:rotate(9deg) scale(1)}
  32%  {transform:rotate(-11deg) scale(1)}
  54%  {transform:rotate(10deg) scale(1)}
  76%  {transform:rotate(-8deg) scale(1)}
  92%  {opacity:1;transform:rotate(6deg) scale(.98)}
  100% {left:104%;opacity:0;transform:rotate(-6deg) scale(.88)}
}
@keyframes swSpark{
  0%  {opacity:0;transform:scale(.3) rotate(0deg)}
  40% {opacity:1;transform:scale(1.15) rotate(45deg)}
  100%{opacity:0;transform:scale(.5) rotate(90deg)}
}
@media (prefers-reduced-motion: reduce){
  .js .sweeper.armed .sw-clean{clip-path:inset(0 0 0 0)}
  .sw-duster,.sw-spark{display:none}
}
@media (max-width:430px){
  .sw-wrap{font-size:15px}
  .sweeper{padding:7px 15px;gap:8px}
  .sw-duster{width:28px;height:28px;margin-top:-20px}
}

/* ---- 2. Hero shell ----------------------------------------------------- */
.hero-v4{padding-bottom:clamp(34px,4.5vw,56px);isolation:isolate}
.hero-v4::after{
  background:
    radial-gradient(880px 560px at 72% 18%, rgba(75,163,138,.26), transparent 62%),
    radial-gradient(700px 420px at 2% 92%, rgba(0,54,114,.6), transparent 60%);
}
.hero-v4 > .shell{max-width:1340px}

.hero-v4 .hero-grid{
  display:grid;
  grid-template-columns:1fr minmax(360px, 44%);
  grid-template-areas:"copy photo";
  align-items:end;
  gap:clamp(24px,3vw,44px);
  padding-block:clamp(38px,5.5vw,66px) 0;
}
.hero-v4 .hero-copy{grid-area:copy;padding-bottom:clamp(40px,6vw,86px);min-width:0}
.hero-v4 .hero-photo{grid-area:photo;position:relative;align-self:end;min-width:0}

.hero-v4 h1{
  color:#fff;margin-bottom:20px;
  font-size:clamp(34px,4.4vw,55px);line-height:1.07;letter-spacing:-.03em;
}
.hero-v4 h1 .accent{color:var(--teal);font-style:italic;font-weight:400}
.hero-v4 .sub{
  font-size:clamp(16.5px,1.75vw,18.5px);line-height:1.62;
  color:#BFD4EA;max-width:52ch;margin-bottom:30px;
}

/* CTA pair — solid primary + circled-icon call link (reference pattern) */
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.hero-call{
  display:inline-flex;align-items:center;gap:13px;
  text-decoration:none;color:#fff;font-weight:700;font-size:16.5px;
  padding:6px 4px;border-radius:999px;
  transition:color .2s var(--ease);
}
.hero-call .ring{
  width:48px;height:48px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.34);
  display:grid;place-content:center;color:var(--teal);
  transition:background .22s var(--ease), border-color .22s var(--ease),
             transform .22s var(--ease), box-shadow .22s var(--ease);
}
.hero-call .ring svg{width:19px;height:19px}
.hero-call .txt{display:flex;flex-direction:column;line-height:1.25}
.hero-call .txt small{
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:#8FB0D2;
}
.hero-call:hover{color:#fff}
.hero-call:hover .ring{
  background:var(--teal);border-color:var(--teal);color:#06231D;
  transform:scale(1.06);box-shadow:0 0 26px -4px rgba(75,163,138,.7);
}

/* ---- 3. Photo, halo, floating cards ------------------------------------ */
.hero-photo .halo{
  position:absolute;left:50%;bottom:-6%;translate:-50% 0;
  width:min(560px,104%);aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 50% 46%, rgba(75,163,138,.38), rgba(75,163,138,.1) 55%, transparent 70%);
}
.hero-photo .ring-deco{
  position:absolute;left:50%;bottom:2%;translate:-50% 0;
  width:min(470px,90%);aspect-ratio:1;border-radius:50%;z-index:1;
  border:1.5px dashed rgba(255,255,255,.16);
}
.cutout{
  position:relative;z-index:2;
  width:100%;max-width:500px;margin:0 auto;display:block;
}
.cutout img{
  width:100%;display:block;
  filter:drop-shadow(0 28px 48px rgba(0,14,32,.6));
}
.cutout .ph{
  aspect-ratio:41/52;border-radius:26px 26px 0 0;min-height:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 13px, rgba(255,255,255,.015) 13px 26px);
  border:1px solid rgba(255,255,255,.14);border-bottom:0;
  box-shadow:0 26px 48px -20px rgba(0,14,32,.7);
}
.cutout .ph b{color:#fff;opacity:.88}
.cutout .ph span{color:#9FBBD6;max-width:24ch}
.cutout .ph .phi{color:rgba(255,255,255,.26)}

.chip{
  position:absolute;z-index:4;
  background:#fff;border-radius:15px;padding:12px 16px;
  box-shadow:0 10px 30px -10px rgba(0,14,32,.55), 0 2px 6px rgba(0,14,32,.14);
  display:flex;align-items:center;gap:12px;
  animation:chipFloat 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .chip{animation:none} }
@keyframes chipFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.chip .ci{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:var(--teal-050);color:var(--teal-700);display:grid;place-content:center;
}
.chip .ci svg{width:19px;height:19px}
.chip b{display:block;font-size:15px;font-weight:800;color:var(--navy-800);line-height:1.2;letter-spacing:-.015em}
.chip span{display:block;font-size:12.2px;color:var(--ink-mute);line-height:1.35;margin-top:2px;white-space:nowrap}

.chip.c-years{top:6%;right:-2%;animation-delay:0s}
.chip.c-eco{top:40%;left:-9%;animation-delay:1.1s}
.chip.c-local{bottom:12%;right:-5%;animation-delay:2.2s}

.chip.c-years .ci{background:var(--navy);color:#fff}

/* decorative arc, like the reference's hand-drawn curve */
.deco-arc{
  position:absolute;z-index:1;pointer-events:none;
  top:14%;left:-14%;width:130px;height:110px;color:rgba(75,163,138,.55);
}

@media (max-width:1080px){
  .hero-v4 .hero-grid{grid-template-columns:1fr minmax(300px,42%);gap:20px}
  .chip{padding:10px 13px;border-radius:13px;gap:10px}
  .chip b{font-size:13.6px}
  .chip span{font-size:11.4px}
  .chip .ci{width:33px;height:33px}
  .chip .ci svg{width:17px;height:17px}
  .deco-arc{display:none}
}

@media (max-width:860px){
  .hero-v4 .hero-grid{
    grid-template-columns:1fr;grid-template-areas:"copy" "photo";
    align-items:stretch;gap:8px;padding-block:32px 0;
  }
  .hero-v4 .hero-copy{padding-bottom:30px}
  .hero-v4 .hero-photo{max-width:380px;margin-inline:auto;width:100%}
  .hero-photo .halo{width:118%;bottom:-4%}
  .hero-photo .ring-deco{display:none}
  .chip.c-years{top:2%;right:-4%}
  .chip.c-eco{top:38%;left:-6%}
  .chip.c-local{display:none}
  .hero-cta{gap:14px 18px}
}
@media (max-width:420px){
  .hero-v4 .hero-photo{max-width:310px}
  .chip{padding:9px 11px}
  .chip b{font-size:12.8px}
  .chip span{font-size:10.8px}
  .hero-call{font-size:15.5px;gap:11px}
  .hero-call .ring{width:44px;height:44px}
}

/* ---- 4. Benefits band tied into the hero ------------------------------- */
.benefit-band{
  position:relative;z-index:6;
  margin-top:clamp(-40px,-3vw,-22px);
  background:var(--navy);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  box-shadow:0 26px 60px -26px rgba(0,10,26,.85);
  display:grid;grid-template-columns:repeat(3,1fr);
  overflow:hidden;
}
.benefit-band .bb{
  display:flex;gap:15px;align-items:flex-start;
  padding:24px clamp(18px,2.2vw,28px);
  border-right:1px solid rgba(255,255,255,.1);
  transition:background .24s var(--ease);
}
.benefit-band .bb:last-child{border-right:0}
.benefit-band .bb:hover{background:rgba(255,255,255,.055)}
.benefit-band .bi{
  width:44px;height:44px;border-radius:12px;flex:none;
  background:rgba(75,163,138,.2);color:var(--teal);
  display:grid;place-content:center;
}
.benefit-band .bi svg{width:22px;height:22px}
.benefit-band h3{
  font-family:var(--sans);font-size:16.5px;font-weight:800;
  color:#fff;letter-spacing:-.015em;margin-bottom:5px;line-height:1.25;
}
.benefit-band p{font-size:13.8px;line-height:1.5;color:#AEC6E0;margin:0}

@media (max-width:900px){
  .benefit-band{grid-template-columns:1fr;margin-top:26px;border-radius:16px}
  .benefit-band .bb{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding:18px 20px}
  .benefit-band .bb:last-child{border-bottom:0}
}

/* ---- 5. Quote section under the hero ----------------------------------- */
.quote-sec{background:var(--mist);scroll-margin-top:96px}
.quote-sec .qgrid{
  display:grid;grid-template-columns:1fr 470px;
  gap:clamp(32px,4.5vw,64px);align-items:start;
}
@media (max-width:980px){ .quote-sec .qgrid{grid-template-columns:1fr} }
.quote-sec .quote-card{box-shadow:var(--sh-3);border:1px solid var(--line)}
.qside .checks li{font-size:16.5px}
.qside .stat-strip{margin-top:26px}

/* ---- v4 refinements from visual QA ------------------------------------- */

/* brighter revealed text so the wipe actually reads as a "reveal" */
.sw-clean{color:#8FDCC2;text-shadow:0 0 20px rgba(143,220,194,.5)}
.sw-duster{width:40px;height:40px;margin-top:-27px}
@media (max-width:430px){ .sw-duster{width:32px;height:32px;margin-top:-22px} }

/* the stray dotted arc pointed at nothing — clutter, removed */
.deco-arc{display:none}

/* let the halo glow read through the placeholder;
   a real cut-out PNG sits on it properly */
.cutout .ph{
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 13px, rgba(255,255,255,.008) 13px 26px);
  backdrop-filter:blur(1px);
}
.hero-photo .halo{
  background:radial-gradient(circle at 50% 44%, rgba(75,163,138,.5), rgba(75,163,138,.16) 52%, transparent 70%);
}

/* keep the floating chips inside the viewport on every screen */
.hero-photo{overflow:visible}
@media (max-width:1180px){
  .chip.c-years{right:0}
  .chip.c-local{right:-2%}
  .chip.c-eco{left:-4%}
}

/* on phones the eco chip sat over the photo's centre; drop it clear */
@media (max-width:860px){
  .chip.c-eco{top:auto;bottom:14%;left:-5%}
}

/* ---- GoHighLevel embedded lead form ------------------------------------ */
.ghl-wrap{position:relative;margin-inline:-6px}
.ghl-wrap iframe{position:relative;z-index:1;display:block;background:transparent}
.ghl-fallback{
  position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:6px;
  font-size:14.5px;color:var(--ink-mute);padding:24px;
  border:1.5px dashed var(--line-2);border-radius:10px;background:var(--mist);
}
.ghl-fallback p{margin:0}
.ghl-fallback a{font-weight:700;color:var(--navy)}
.ghl-card .form-alt{margin-top:10px}