/* ==========================================================================
   washedcr.com page patterns. Built on top of brand.css tokens only.
   ========================================================================== */

/* --- Skip link ----------------------------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;padding:.7em 1.2em;border-radius:0 0 var(--r-sm) 0;}
.skip:focus{left:0;}

/* --- Nav toggle (mobile) ------------------------------------------------- */
.nav__toggle{
  display:none;width:44px;height:44px;border:1.5px solid var(--line);
  background:var(--white);border-radius:var(--r-sm);cursor:pointer;
  place-items:center;color:var(--navy);
}
.nav__toggle svg{width:20px;height:20px;}
@media (max-width:900px){
  .nav__toggle{display:grid;}
  .nav__inner{position:relative;}
  .nav__links{
    position:absolute;top:calc(100% + 10px);right:0;left:0;
    flex-direction:column;align-items:stretch;gap:var(--s2);
    background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
    box-shadow:var(--sh-2);padding:var(--s4);display:none;
  }
  .nav__links.is-open{display:flex;}
  .nav__links a:not(.btn){display:block;padding:.6em .2em;border-bottom:1px solid var(--line);}
  .nav__links a:not(.btn):last-of-type{border-bottom:none;}
  .nav__links .btn{margin-top:var(--s2);}
}

/* --- Hero ---------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,96px) clamp(48px,7vw,84px);background:var(--paper);}
.hero__blob-a{width:min(40vw,470px);aspect-ratio:1.22;top:6%;right:-11%;}
.hero__blob-b{width:min(26vw,300px);aspect-ratio:1.1;bottom:-12%;left:-11%;}
.hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(var(--s6),5vw,var(--s8));align-items:center;}
.hero__eyebrow{display:inline-flex;margin-bottom:var(--s4);}
.hero .display{margin-bottom:var(--s4);}
.hero__lede{max-width:34em;}
.hero__cta{margin-top:var(--s6);}
.hero__note{margin-top:var(--s4);font-size:var(--fs-sm);color:var(--slate);}

/* Hero card: the price + promise block */
.hero__card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s6);box-shadow:var(--sh-3);position:relative;
}
.hero__card::before{
  content:"";position:absolute;inset:auto auto -12px -12px;width:64px;height:64px;
  background:var(--sky);border-radius:60% 40% 55% 45% / 50% 55% 45% 50%;z-index:-1;
}
.hero__price{display:flex;align-items:baseline;gap:.3em;font-family:var(--font-display);color:var(--navy);}
.hero__price b{font-size:clamp(2.8rem,5vw,3.6rem);font-weight:600;line-height:1;}
.hero__price span{font-size:1.15rem;font-weight:500;color:var(--slate);}
.hero__list{list-style:none;margin-top:var(--s5);display:grid;gap:var(--s3);}
.hero__list li{display:flex;gap:.7em;align-items:flex-start;font-size:var(--fs-sm);line-height:1.5;}
.hero__list svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--rose-700);}

@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;gap:var(--s7);}
  .hero__card{max-width:460px;}
  .hero__blob-a,.hero__blob-b{display:none;}
}

/* --- Trust strip --------------------------------------------------------- */
.trust{background:var(--navy);color:var(--sky-200);padding-block:var(--s5);}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s4) clamp(var(--s5),5vw,var(--s8));text-align:center;}
.trust__item{display:flex;align-items:center;gap:.55em;font-size:var(--fs-sm);font-weight:600;}
.trust__item b{font-family:var(--font-display);font-weight:600;color:var(--white);font-size:1.05rem;}

/* --- Steps --------------------------------------------------------------- */
.steps{counter-reset:step;position:relative;}
.step{text-align:center;position:relative;}
.step__n{
  width:72px;height:72px;margin:0 auto var(--s4);display:grid;place-items:center;
  border-radius:72% 28% 58% 42% / 48% 66% 34% 52%;background:var(--navy);color:var(--white);
  font-family:var(--font-display);font-weight:600;font-size:1.5rem;
  box-shadow:0 8px 20px rgba(40,75,115,.28);position:relative;z-index:1;
}
.step:nth-child(even) .step__n{background:var(--rose);color:var(--navy-900);box-shadow:0 8px 20px rgba(223,151,149,.4);}
/* A distinct blob per step, so no two markers are the same shape. */
.steps .step:nth-child(1) .step__n{border-radius:72% 28% 58% 42% / 48% 66% 34% 52%;}
.steps .step:nth-child(2) .step__n{border-radius:30% 70% 38% 62% / 64% 32% 68% 36%;}
.steps .step:nth-child(3) .step__n{border-radius:60% 40% 28% 72% / 34% 70% 30% 66%;}
.steps .step:nth-child(4) .step__n{border-radius:40% 60% 70% 30% / 68% 36% 64% 32%;}
.step h3{margin-bottom:.3em;}
.step p{font-size:var(--fs-sm);color:var(--slate);}
/* dotted connector between steps on wide screens */
@media (min-width:901px){
  .step:not(:last-child)::after{
    content:"";position:absolute;top:36px;left:calc(50% + 46px);right:calc(-50% + 46px);
    border-top:3px dotted var(--sky);
  }
}

/* --- Value cards --------------------------------------------------------- */
.val{text-align:center;}
/* Amoeba tiles. Each one a different blob so the row reads hand-made, not stamped. */
.val__ico{
  width:70px;height:70px;margin:0 auto var(--s4);display:grid;place-items:center;
  background:var(--sky-100);color:var(--navy);--ico-accent:var(--rose);
  border-radius:70% 30% 56% 44% / 56% 62% 38% 44%;
}
.val__ico svg{width:38px;height:38px;}
.val__ico .ico-a{fill:var(--ico-accent);}
.val:nth-child(2) .val__ico{
  background:var(--rose-100);--ico-accent:var(--sky);
  border-radius:34% 66% 40% 60% / 62% 34% 66% 38%;
}
.val:nth-child(3) .val__ico{border-radius:52% 48% 33% 67% / 38% 67% 33% 62%;}
.val h3{margin-bottom:.4em;}
.val p{font-size:var(--fs-sm);color:var(--slate);}

/* --- Pricing ------------------------------------------------------------- */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);max-width:920px;margin-inline:auto;align-items:start;}
.price-card__label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:var(--s3);}
.price-card__amount{display:flex;align-items:baseline;gap:.3em;font-family:var(--font-display);color:var(--navy);}
.price-card__amount b{font-size:clamp(3rem,6vw,3.9rem);font-weight:600;line-height:1;}
.price-card__amount span{font-size:1.2rem;font-weight:500;color:var(--slate);}
.rate-row{display:flex;justify-content:space-between;gap:var(--s4);padding-block:.75em;border-bottom:1px solid var(--line);font-size:var(--fs-sm);}
.rate-row:last-child{border-bottom:none;}
.rate-row b{color:var(--navy);white-space:nowrap;font-family:var(--font-display);font-weight:600;}
.price-note{max-width:920px;margin:var(--s5) auto 0;}
@media (max-width:760px){ .price-grid{grid-template-columns:1fr;} }

/* --- Hosts (navy section) ------------------------------------------------ */
.hosts__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--s6),5vw,var(--s8));align-items:center;}
.hosts__stat{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);padding:var(--s6);text-align:center;
}
.hosts__stat b{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(3rem,7vw,4.2rem);line-height:1;color:var(--rose);}
.hosts__stat span{display:block;margin-top:var(--s2);color:var(--sky-200);font-size:var(--fs-sm);}
.hosts__list{list-style:none;display:grid;gap:var(--s3);margin-top:var(--s5);}
.hosts__list li{display:flex;gap:.7em;align-items:flex-start;font-size:var(--fs-sm);}
.hosts__list svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--rose);}
@media (max-width:760px){ .hosts__grid{grid-template-columns:1fr;} }

/* --- Booking form -------------------------------------------------------- */
.form-card{max-width:720px;margin-inline:auto;}
.form-card .field-row{margin-bottom:var(--s4);}
.form-card .field-row .field{margin-bottom:0;}
.subhead{
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--navy);
  margin-bottom:.3em;
}
.hint--ok{color:var(--ok);font-weight:700;}
.act-opt{padding:.6em .8em;border-bottom:1px solid var(--line);cursor:pointer;font-size:var(--fs-sm);line-height:1.4;}
.act-opt:last-child{border-bottom:none;}
.act-opt:hover,.act-opt:focus{background:var(--sky-100);outline:none;}
.act-opt b{color:var(--navy);}
#fac_act_list{max-height:210px;overflow:auto;border:1.5px solid var(--line);border-radius:var(--r-md);margin-top:.4em;background:var(--white);box-shadow:var(--sh-1);}
.addon-group + .addon-group{margin-top:var(--s5);}
.addon-summary{text-align:right;font-family:var(--font-display);font-weight:600;color:var(--navy);margin-top:var(--s4);min-height:1.4em;}
.tile--wide{grid-column:1/-1;}
.tile--wide img{max-width:400px;margin-inline:auto;}

/* --- Cleaning ------------------------------------------------------------ */
.cleaning__grid{display:grid;grid-template-columns:270px 1fr;gap:clamp(var(--s6),5vw,var(--s8));align-items:center;max-width:920px;margin-inline:auto;}
.cleaning__photo{text-align:center;}
.cleaning__photo img.portrait{
  width:200px;height:200px;border-radius:50%;object-fit:cover;margin-inline:auto;
  border:5px solid var(--white);box-shadow:var(--sh-3);
}
.cleaning__name{font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--navy);margin-top:var(--s4);}
.cleaning__role{font-size:var(--fs-sm);color:var(--slate);}
.cleaning__logo{width:160px;margin:var(--s5) auto 0;}
@media (max-width:760px){ .cleaning__grid{grid-template-columns:1fr;text-align:center;}
  .cleaning__grid .cluster{justify-content:center;} }

/* --- Floating WhatsApp --------------------------------------------------- */
.float-wa{
  position:fixed;right:18px;bottom:18px;z-index:60;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--wa);color:var(--navy-900);box-shadow:var(--sh-3);
  transition:transform var(--dur) var(--ease);
}
.float-wa:hover{transform:scale(1.07);}
.float-wa svg{width:29px;height:29px;}
@media (min-width:901px){ .float-wa{right:26px;bottom:26px;} }

/* --- Store front sticky note --------------------------------------------- */
/* Sits above the WhatsApp button, never over it. Dismissal is remembered
   per browser, so it does not nag on every visit. */
.note{
  position:fixed;right:18px;bottom:86px;z-index:59;
  width:min(232px,calc(100vw - 36px));
  background:var(--rose);color:var(--navy-900);
  padding:17px 16px 14px;
  border-radius:3px 3px 3px 22px;
  box-shadow:0 10px 24px rgba(20,39,59,.18), 0 26px 52px rgba(20,39,59,.16);
  opacity:0;transform:rotate(-2deg) translateY(10px) scale(.96);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.note[hidden]{display:none;}
.note.is-in{opacity:1;transform:rotate(-2deg) translateY(0) scale(1);}
/* a strip of tape, so it reads as a note pinned on rather than a browser alert */
.note::before{
  content:"";position:absolute;top:-9px;left:50%;width:74px;height:18px;
  background:rgba(161,191,225,.9);border-radius:1px;
  transform:translateX(-50%) rotate(-3deg);
  box-shadow:0 1px 3px rgba(20,39,59,.14);
}
.note__close{
  position:absolute;top:5px;right:5px;width:28px;height:28px;
  display:grid;place-items:center;background:transparent;border:none;
  border-radius:50%;cursor:pointer;color:var(--navy-900);
  font-size:1.25rem;line-height:1;opacity:.55;
  transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease);
}
.note__close:hover{opacity:1;background:rgba(20,39,59,.12);}
.note__kicker{
  font-weight:700;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.72;
}
.note__title{
  font-family:var(--font-display);font-weight:600;font-size:1rem;
  line-height:1.22;margin-top:3px;
}
.note__body{font-size:.82rem;line-height:1.48;margin-top:6px;}
@media (min-width:901px){ .note{right:26px;bottom:96px;width:min(258px,calc(100vw - 52px));padding:20px 18px 16px;} }
@media (prefers-reduced-motion:reduce){
  .note{transition:none;transform:rotate(-2deg);}
  .note.is-in{transform:rotate(-2deg);}
}

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