/* css/00-tokens.css */
/* ==========================================================================
   Mima Sparkle Clean · design tokens
   The brand colours are taken from the logo. Please do not change them.
   ========================================================================== */
:root{
  /* Brand palette (from the logo) */
  --deep:#045567;        /* logo lettering: headings, primary buttons, dark sections */
  --deep-800:#033F4D;    /* hover on deep, footer background */
  --deep-900:#022F3A;    /* ink: darkest text */
  --aqua:#17A4B2;        /* logo swoosh: accents, icons, decorative lines (not small text on white) */
  --aqua-700:#0E7C88;    /* aqua for text and links on white (AA) */
  --aqua-300:#8FD3DA;
  --aqua-200:#C5E8EC;
  --aqua-100:#E3F4F6;
  --aqua-50:#F2FAFB;
  --gold:#D6AE53;        /* logo sparkle: highlights, sparkles, accent button */
  --gold-light:#E9CD8A;
  --gold-soft:#FBF3DF;
  --ink:#022F3A;
  --body:#35555E;
  --muted:#4D6B73;
  --line:#D5E9EC;
  --white:#fff;
  --whatsapp:#25D366;    /* WhatsApp buttons: this green with --deep-900 text (never white text) */

  /* Functional colours (not brand colours): form errors only */
  --danger:#B42318;
  --danger-soft:#FEF3F2;

  /* Contextual roles. Light surfaces by default; .on-dark swaps them for the
     dark contact section and the footer, .on-light swaps them back (for a
     white card sitting inside a dark section). */
  --c-heading:var(--ink);
  --c-text:var(--body);
  --c-muted:var(--muted);
  --c-link:var(--aqua-700);
  --c-link-hover:var(--deep);
  --c-eyebrow:var(--aqua-700);
  --c-line:var(--line);
  --c-focus:var(--aqua-700);
  --c-badge-bg:var(--aqua-100);
  --c-badge-fg:var(--deep);
  --field-line:var(--aqua-700);   /* form field borders: at least 3:1 on white */

  /* Type */
  --font-head:"Outfit","Avenir Next","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Figtree","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --fs-200:.8125rem;
  --fs-300:.9375rem;
  --fs-400:1.0625rem;
  --fs-500:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  --fs-600:clamp(1.1875rem,1.12rem + .3vw,1.3125rem);
  --fs-700:clamp(1.5rem,1.3rem + .9vw,2rem);
  --fs-800:clamp(2rem,1.45rem + 2.4vw,3.125rem);
  --fs-900:clamp(2.5rem,1.25rem + 3.6vw,4rem);
  --tracking-caps:.14em;          /* wide-tracked small caps, like "SPARKLE CLEAN" in the logo */

  /* Space + shape */
  --gutter:clamp(1.25rem,.75rem + 2.5vw,2.5rem);
  --edge:clamp(.5rem,2vw,1.5rem);
  --container:75rem;
  --section-y:clamp(3.25rem,2rem + 5.5vw,7.5rem);
  --header-h:4.25rem;
  --r-sm:.875rem;
  --r-md:1.125rem;
  --r-lg:1.5rem;
  --r-xl:2rem;
  --r-panel:clamp(1.75rem,1rem + 3vw,3.5rem);
  --r-pill:999px;

  /* Depth + motion (shadows are tinted with --deep-900) */
  --shadow-sm:0 8px 20px -12px rgba(2,47,58,.28);
  --shadow-md:0 24px 48px -26px rgba(2,47,58,.34),0 4px 12px -6px rgba(2,47,58,.08);
  --shadow-lg:0 40px 70px -36px rgba(2,47,58,.45),0 10px 24px -14px rgba(2,47,58,.14);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:1100px){
  :root{--header-h:5rem}
}

.on-dark{
  --c-heading:var(--white);
  --c-text:var(--aqua-200);
  --c-muted:var(--aqua-200);
  --c-link:var(--white);
  --c-link-hover:var(--white);
  --c-eyebrow:var(--aqua-300);
  --c-line:rgba(255,255,255,.16);
  --c-focus:var(--gold-light);
  --c-badge-bg:rgba(255,255,255,.1);
  --c-badge-fg:var(--gold);
  color:var(--c-text);
}
.on-light{
  --c-heading:var(--ink);
  --c-text:var(--body);
  --c-muted:var(--muted);
  --c-link:var(--aqua-700);
  --c-link-hover:var(--deep);
  --c-eyebrow:var(--aqua-700);
  --c-line:var(--line);
  --c-focus:var(--aqua-700);
  --c-badge-bg:var(--aqua-100);
  --c-badge-fg:var(--deep);
  color:var(--c-text);
}

/* css/10-base.css */
/* ==========================================================================
   Base: reset, typography, links, focus, container, utilities, motion
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-block-start:calc(var(--header-h) + var(--edge) + 1rem)}
body{margin:0;min-inline-size:20rem;font-family:var(--font-body);font-size:var(--fs-400);line-height:1.65;color:var(--c-text);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;color:var(--c-heading);line-height:1.1;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:var(--fs-900);letter-spacing:-.035em;line-height:1.03}
h2{font-size:var(--fs-800)}
h3{font-size:var(--fs-600);line-height:1.25;letter-spacing:-.012em}
h4{font-size:1.0625rem;line-height:1.3;letter-spacing:-.005em}
p{text-wrap:pretty}
strong,b{font-weight:600}
img,svg{display:block}
img{max-inline-size:100%;block-size:auto}
svg{flex:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none !important}
main{display:block}
main:focus{outline:none}

/* Links. Colours sit inside :where() so they carry no specificity:
   any component class (.btn, .site-nav a ...) overrides them without a fight. */
a{text-decoration-thickness:.08em;text-underline-offset:.2em;transition:color .2s}
:where(a){color:var(--c-link)}
:where(a:hover){color:var(--c-link-hover)}

/* Focus + selection */
:focus-visible{outline:3px solid var(--c-focus);outline-offset:3px;border-radius:.5rem}
::selection{background:var(--gold-light);color:var(--ink)}

/* Layout helpers */
.container{inline-size:min(100% - 2 * var(--gutter),var(--container));margin-inline:auto}
.section{padding-block:var(--section-y)}
.panel{inline-size:min(100% - 2 * var(--edge),97.5rem);margin-inline:auto;padding-block:var(--section-y);border-radius:var(--r-panel);background:var(--aqua-50)}
.panel--deep{background:var(--deep)}
.stack{display:grid;gap:1rem;justify-items:start;align-content:start}

/* Utilities */
.visually-hidden{position:absolute !important;inline-size:1px;block-size:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nowrap{white-space:nowrap}
.text-center{text-align:center}
.skip-link{position:absolute;inset-inline-start:1rem;inset-block-start:-6rem;z-index:200;padding:.875rem 1.25rem;background:var(--deep-900);color:var(--white);border-radius:var(--r-pill);font:600 1rem/1.2 var(--font-head);text-decoration:none;transition:inset-block-start .2s}
.skip-link:focus{inset-block-start:1rem}

/* Scroll reveal. The hidden state (.reveal) is only ever added by JavaScript,
   so everything is visible without it. Mark-up hooks: [data-reveal] on one
   element, [data-stagger] on a parent whose children appear one after another. */
[data-reveal].reveal,[data-stagger]>.reveal{opacity:0;transform:translateY(1.25rem);transition:opacity .6s ease,transform .8s var(--ease)}
[data-reveal].reveal.is-in,[data-stagger]>.reveal.is-in{opacity:1;transform:none}

/* Shared keyframes (sparkles twinkle, bubbles float) */
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.7) rotate(20deg);opacity:.6}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Motion preferences */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important}
}
@media print{
  .reveal{opacity:1 !important;transform:none !important}
}

/* css/20-components.css */
/* ==========================================================================
   Components: icons, buttons, labels, section headers, cards, tiles, forms
   ========================================================================== */

/* ---------- Icons ----------
   .icon            1.5rem box (the WhatsApp glyph is filled with currentColor)
   .icon--line      stroked line icon (all the {{> icon-* }} partials except WhatsApp)
   .spark           the four-point sparkle from the logo, sized in em (set font-size) */
.icon{inline-size:1.5rem;block-size:1.5rem;flex:none}
.icon--line{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon--check{stroke-width:3}
.spark{inline-size:1em;block-size:1em;flex:none;fill:currentColor}

.icon-badge{flex:none;display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;border-radius:50%;background:var(--c-badge-bg);color:var(--c-badge-fg);transition:background-color .3s,color .3s,transform .4s var(--ease)}
.icon-badge--lg{inline-size:3rem;block-size:3rem}

.tick{flex:none;display:inline-grid;place-items:center;inline-size:1.375rem;block-size:1.375rem;border-radius:50%;background:var(--aqua-200);color:var(--deep-900)}
.tick .icon{inline-size:.875rem;block-size:.875rem}
.tick--gold{background:var(--gold);color:var(--deep-900)}

/* ---------- Buttons ----------
   .btn + one of: --primary (deep) · --secondary (outline) · --accent (gold)
                  --whatsapp (green) · --outline-light (for dark sections)
   sizes: --sm · --lg      width: --block */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.625rem;text-align:center;min-block-size:3.375rem;padding:.75rem 1.625rem;border:2px solid transparent;border-radius:var(--r-pill);font:600 1.0625rem/1.15 var(--font-head);letter-spacing:.005em;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .3s var(--ease),background-color .25s,border-color .25s,box-shadow .3s,color .25s}
.btn .icon{inline-size:1.25rem;block-size:1.25rem;transition:transform .3s var(--ease)}
.btn .icon--whatsapp{inline-size:1.375rem;block-size:1.375rem}
.btn .spark{font-size:1.05rem;color:var(--gold);transition:transform .6s var(--ease)}
.btn:hover .spark{transform:rotate(90deg) scale(1.2)}
.btn:hover .icon--arrow{transform:translateX(4px)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:disabled,.btn[aria-busy="true"]{opacity:.72;cursor:progress;transform:none}

.btn--primary{background:var(--deep);color:var(--white);box-shadow:0 14px 26px -14px rgba(4,85,103,.75)}
.btn--primary:hover{background:var(--deep-800);box-shadow:0 18px 30px -14px rgba(4,85,103,.8)}
.btn--primary:active{box-shadow:0 8px 16px -10px rgba(4,85,103,.8)}

.btn--secondary{background:var(--white);color:var(--deep);border-color:var(--aqua-300)}
.btn--secondary:hover{background:var(--aqua-50);color:var(--deep-800);border-color:var(--deep)}

.btn--accent{background:var(--gold);color:var(--deep-900);box-shadow:0 14px 26px -16px rgba(2,47,58,.6)}
.btn--accent:hover{background:var(--gold-light)}
.btn--accent .spark{color:var(--deep-900)}

.btn--whatsapp{background-color:var(--whatsapp);color:var(--deep-900);box-shadow:0 14px 26px -16px rgba(2,47,58,.6)}
.btn--whatsapp:hover{background-image:linear-gradient(rgba(2,47,58,.1),rgba(2,47,58,.1));box-shadow:0 18px 30px -16px rgba(2,47,58,.65)}

.btn--outline-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.6)}
.btn--outline-light:hover{background:var(--white);color:var(--deep);border-color:var(--white)}

.btn--sm{min-block-size:2.875rem;padding:.5rem 1.25rem;font-size:1rem}
.btn--lg{min-block-size:3.75rem;padding:.875rem 1.875rem;font-size:1.125rem}
.btn--block{inline-size:100%}

/* Text link with an arrow that nudges on hover */
.arrow-link{display:inline-flex;align-items:center;gap:.375rem;font:600 var(--fs-300)/1.2 var(--font-head);color:var(--c-link);text-decoration:none}
.arrow-link .icon{inline-size:1.125rem;block-size:1.125rem;transition:transform .3s var(--ease)}
.arrow-link:hover{color:var(--c-link-hover)}
.arrow-link:hover .icon{transform:translateX(5px)}

/* ---------- Labels ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font:600 var(--fs-200)/1.2 var(--font-head);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--c-eyebrow)}
.eyebrow .spark{color:var(--gold)}

.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.4375rem .9375rem .4375rem .75rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:var(--shadow-sm);font:600 var(--fs-200)/1.2 var(--font-head);letter-spacing:.03em;color:var(--deep)}
.chip .spark{font-size:1rem;color:var(--gold)}

/* ---------- Section header ---------- */
.section-head{display:grid;gap:1rem;justify-items:start;max-inline-size:44rem;margin-block-end:clamp(2rem,1.5rem + 2.5vw,3.5rem)}
.section-head--center{margin-inline:auto;justify-items:center;text-align:center}
.section-head--split{max-inline-size:none}
.lead{font-size:var(--fs-500)}
@media (min-width:900px){
  .section-head--split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:4rem;align-items:end}
  .section-head--split .eyebrow{grid-column:1 / -1}
}

/* ---------- Photos ----------
   Always: a .photo-frame box with an aspect-ratio + an <img> that covers it. */
.photo-frame{position:relative;overflow:hidden;aspect-ratio:4 / 3;border-radius:var(--r-lg);background:var(--aqua-100)}
.photo-frame img{inline-size:100%;block-size:100%;object-fit:cover}
.photo-frame--portrait{aspect-ratio:4 / 5}
.photo-frame--square{aspect-ratio:1}

/* ---------- Cards + tiles ---------- */
.card{padding:1.5rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg)}
.card--lift{transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.card--lift:hover{transform:translateY(-4px);border-color:var(--aqua-300);box-shadow:var(--shadow-md)}

.tile{display:flex;align-items:center;gap:.875rem;padding:.875rem 1rem;background:var(--white);border:1px solid transparent;border-radius:var(--r-md);font:600 1.0625rem/1.25 var(--font-head);letter-spacing:-.005em;color:var(--ink);transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.tile:hover{transform:translateY(-3px);border-color:var(--aqua-300);box-shadow:var(--shadow-sm)}
.tile:hover .icon-badge{background:var(--deep);color:var(--white)}

/* Sparkle-bulleted list */
.spark-list{display:grid;gap:.375rem}
.spark-list li{position:relative;padding-inline-start:1.375rem}
.spark-list li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.42em;inline-size:.75em;block-size:.75em;background:var(--gold);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}

/* Opening hours */
.hours{display:grid;grid-template-columns:auto auto;justify-content:start;gap:.375rem 1.5rem}
.hours dd{white-space:nowrap}
.hours dt{font-weight:500}
.hours dd{font-weight:600;color:var(--c-heading)}

/* ---------- Forms ---------- */
.form-row{display:grid;gap:1rem}
@media (min-width:560px){
  .form-row{grid-template-columns:1fr 1fr}
}
.field{display:grid;gap:.375rem;align-content:start;min-inline-size:0}
.field label{font:600 .875rem/1.3 var(--font-head);color:var(--ink)}
.field__opt{font-weight:500;color:var(--muted)}
.field__req{color:var(--aqua-700)}
.field :is(input,select,textarea){inline-size:100%;min-block-size:3.25rem;padding:.75rem 1rem;border:1.5px solid var(--field-line);border-radius:var(--r-sm);background-color:var(--aqua-50);color:var(--ink);transition:border-color .2s,box-shadow .2s,background-color .2s}
.field textarea{min-block-size:6.5rem;resize:vertical;line-height:1.5}
.field select{appearance:none;-webkit-appearance:none;padding-inline-end:2.75rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23045567' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:1.125rem;text-overflow:ellipsis}
.field ::placeholder{color:var(--muted);opacity:1}
.field :is(input,select,textarea):hover{border-color:var(--deep)}
.field :is(input,select,textarea):focus-visible{outline:none;border-color:var(--deep);background-color:var(--white);box-shadow:0 0 0 4px rgba(23,164,178,.3)}
.field :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--danger);background-color:var(--danger-soft)}
.field :is(input,select,textarea)[aria-invalid="true"]:focus-visible{box-shadow:0 0 0 4px rgba(180,35,24,.22)}
.field__error{font-size:.875rem;font-weight:600;line-height:1.4;color:var(--danger)}
.field__hint{font-size:.875rem;line-height:1.4;color:var(--muted)}

/* Spam trap: kept off-screen (not display:none) so bots still fill it in */
.hp-field{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}

/* Optional extra questions, folded away so the form stays short */
.form-more{border:1.5px dashed var(--aqua-300);border-radius:var(--r-sm);background:var(--white);transition:border-color .2s}
.form-more:hover,.form-more[open]{border-color:var(--aqua-700)}
.form-more summary{display:flex;align-items:center;gap:.375rem;min-block-size:3rem;padding:.625rem 1rem;border-radius:var(--r-sm);font:600 .9375rem/1.3 var(--font-head);color:var(--deep);cursor:pointer;list-style:none}
.form-more summary::-webkit-details-marker{display:none}
.form-more summary::after{content:"";flex:none;inline-size:.5rem;block-size:.5rem;margin-inline:auto .25rem;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.form-more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.form-more__body{display:grid;gap:1rem;padding:.25rem 1rem 1rem}

.form-actions{display:grid;gap:.75rem}
.form-note{font-size:var(--fs-200);text-align:center;color:var(--muted)}
.form-required-note{font-size:var(--fs-200);color:var(--muted)}

.form-status{padding:.875rem 1rem;border:1.5px solid var(--gold);border-radius:var(--r-sm);background:var(--gold-soft);color:var(--ink);font-weight:600;line-height:1.45}
.form-status[data-kind="error"]{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}
.form-status[data-kind="success"]{border-color:var(--aqua-700);background:var(--aqua-100);color:var(--deep-900)}

.form-success{display:grid;gap:1rem;justify-items:center;padding-block:clamp(1.5rem,1rem + 3vw,3rem);text-align:center}
.form-success:focus{outline:none}
.form-success__icon{position:relative;display:grid;place-items:center;inline-size:4.5rem;block-size:4.5rem;border-radius:50%;background:var(--aqua-100);color:var(--deep);box-shadow:0 0 0 .5rem var(--aqua-50)}
.form-success__icon .icon{inline-size:2.25rem;block-size:2.25rem}
.form-success__icon .spark{position:absolute;inset-block-start:-.375rem;inset-inline-end:-.5rem;font-size:1.5rem;color:var(--gold);animation:twinkle 3.8s ease-in-out infinite}
.form-success h3{font-size:var(--fs-700)}
.form-success p{max-inline-size:26rem}

/* Without JavaScript these controls cannot work, so they step aside. */
@media (scripting:none){
  [data-quote-whatsapp]{display:none}
}

/* css/30-layout.css */
/* ==========================================================================
   Layout: sticky header, mobile navigation, footer
   ========================================================================== */

/* ---------- Header ---------- */
/* The header floats: a rounded bar with a little space around it. */
.site-header{position:sticky;inset-block-start:var(--edge);z-index:50;inline-size:min(100% - 2 * var(--edge),97.5rem);margin:var(--edge) auto 0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:0 10px 26px -22px rgba(2,47,58,.45);transition:border-color .3s,box-shadow .3s,background-color .3s}
.site-header.is-scrolled,.site-header.nav-open{background:rgba(255,255,255,.97);border-color:var(--aqua-200);box-shadow:0 18px 36px -22px rgba(2,47,58,.55)}
.site-header__inner{display:flex;align-items:center;gap:.75rem;min-block-size:var(--header-h)}

/* The logo: height is set, width follows, so it is never distorted. */
.brand{flex:none;display:inline-flex;align-items:center;border-radius:var(--r-sm)}
.brand img{inline-size:auto;block-size:3rem;max-inline-size:none}

.nav-toggle{order:3;flex:none;display:inline-grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;padding:0;border:0;border-radius:50%;background:var(--aqua-100);color:var(--deep);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s}
.nav-toggle:hover{background:var(--aqua-200)}
.nav-toggle__bars{position:relative;inline-size:1.125rem;block-size:.875rem}
.nav-toggle__bars::before,.nav-toggle__bars::after,.nav-toggle__bars span{content:"";position:absolute;inset-inline:0;block-size:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),opacity .2s,inset-block-start .3s var(--ease)}
.nav-toggle__bars::before{inset-block-start:0}
.nav-toggle__bars span{inset-block-start:calc(50% - 1px)}
.nav-toggle__bars::after{inset-block-start:calc(100% - 2px)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{inset-block-start:calc(50% - 1px);transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span{opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{inset-block-start:calc(50% - 1px);transform:rotate(-45deg)}

.site-header__actions{order:2;display:flex;align-items:center;gap:.5rem;margin-inline-start:auto}
.site-header__cta{display:none}
.phone-link{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-inline-size:2.75rem;min-block-size:2.75rem;border-radius:var(--r-pill);font:600 1rem/1 var(--font-head);color:var(--deep);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.phone-link:hover{background:var(--aqua-100);color:var(--deep-800)}
.phone-link .icon{inline-size:1.25rem;block-size:1.25rem}
.phone-link__num{display:none}

.site-nav__list a{font:500 1rem/1.2 var(--font-head);color:var(--ink);text-decoration:none}

/* Small screens: the navigation drops down from the header. */
@media (max-width:1099.98px){
  .site-nav{position:absolute;inset-inline:-1px;inset-block-start:calc(100% + .5rem);display:grid;gap:1.25rem;max-block-size:calc(100vh - var(--header-h) - 2 * var(--edge) - 1.5rem);max-block-size:calc(100dvh - var(--header-h) - 2 * var(--edge) - 1.5rem);overflow-y:auto;overscroll-behavior:contain;padding:.5rem var(--gutter) 1.5rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);visibility:hidden;opacity:0;transform:translateY(-.5rem);transition:opacity .25s,transform .3s var(--ease),visibility 0s .3s}
  .nav-open .site-nav{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .site-nav__list a{display:flex;align-items:center;justify-content:space-between;min-block-size:3.5rem;padding:1rem .25rem;border-block-end:1px solid var(--line);font-size:1.1875rem}
  .site-nav__list a::after{content:"";inline-size:.5rem;block-size:.5rem;margin-inline-end:.25rem;border-block-start:2px solid var(--aqua);border-inline-end:2px solid var(--aqua);transform:rotate(45deg)}
  .site-nav__extra{display:grid;gap:.75rem}
}
/* Small screens without JavaScript: the menu button cannot work, so show the links. */
@media (max-width:1099.98px) and (scripting:none){
  .site-header{position:static}
  .site-header__inner{flex-wrap:wrap}
  .nav-toggle,.site-nav__extra{display:none}
  .site-nav{position:static;order:4;flex-basis:100%;max-block-size:none;padding:0 0 .75rem;border:0;border-radius:0;box-shadow:none;visibility:visible;opacity:1;transform:none}
}
@media (min-width:520px){
  .site-header__cta{display:inline-flex}
}
@media (min-width:720px){
  .site-header__actions{gap:.75rem}
  .phone-link{padding-inline:.875rem}
  .phone-link__num{display:inline}
}
@media (min-width:1100px){
  .brand img{block-size:3.625rem}
  .nav-toggle,.site-nav__extra{display:none}
  .site-nav{margin-inline:auto}
  .site-nav__list{display:flex;gap:clamp(.125rem,.5vw,.5rem)}
  .site-nav__list a{display:block;padding:.5625rem .875rem;border-radius:var(--r-pill);transition:background-color .2s,color .2s}
  .site-nav__list a:hover,.site-nav__list a[aria-current]{background:var(--aqua-100);color:var(--deep)}
  .site-header__actions{margin-inline-start:0}
}

/* ---------- Footer ---------- */
/* The footer is a rounded panel too, floating just inside the page edges. */
.site-footer{position:relative;overflow:hidden;inline-size:min(100% - 2 * var(--edge),97.5rem);margin:0 auto var(--edge);padding-block:clamp(3rem,2rem + 4vw,5rem) 6.5rem;border-radius:var(--r-panel);background:var(--deep-800)}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.site-footer__decor{position:absolute;inset-block-end:-5rem;inset-inline-end:-4rem;font-size:22rem;color:rgba(255,255,255,.045);pointer-events:none}
.site-footer__grid{position:relative;display:grid;gap:2.5rem 2rem}
.site-footer__brand{display:grid;gap:1.125rem;justify-items:start;max-inline-size:24rem}
.site-footer__brand .brand img{block-size:3.5rem}
.site-footer__title{margin-block-end:.5rem;font:600 var(--fs-200)/1.2 var(--font-head);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-light)}
.site-footer__list{display:grid;font-size:var(--fs-300)}
.site-footer__list a{display:inline-flex;align-items:center;gap:.5rem;min-inline-size:2.75rem;min-block-size:2.75rem;overflow-wrap:anywhere}
.site-footer__list li:not(:has(a)){padding-block:.625rem}
.site-footer__list .icon{inline-size:1.125rem;block-size:1.125rem;color:var(--gold)}
.site-footer .hours{margin-block-start:.875rem;font-size:var(--fs-300);gap:.5rem 1.25rem}
.site-footer__note{margin-block-start:.75rem;font-size:var(--fs-300)}
.site-footer__bar{position:relative;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;margin-block-start:clamp(2.5rem,2rem + 2vw,4rem);padding-block-start:1.5rem;border-block-start:1px solid var(--c-line);font-size:var(--fs-200)}
@media (min-width:600px){
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
@media (min-width:768px){
  /* The chat launcher sits bottom-right: keep that corner clear. */
  .site-footer{padding-block-end:2rem}
  .site-footer__bar{padding-inline-end:13rem}
}
@media (min-width:1180px){
  .site-footer__grid{grid-template-columns:1.35fr .65fr 1.2fr 1.4fr}
}

/* css/35-home.css */
/* ==========================================================================
   Home page sections
   ========================================================================== */

/* ---------- Hero ---------- */
.hero{position:relative;overflow:clip;inline-size:min(100% - 2 * var(--edge),97.5rem);margin:var(--edge) auto 0;padding-block:clamp(2.25rem,1.5rem + 4vw,5.5rem) clamp(6rem,4.5rem + 6vw,9.5rem);border-radius:var(--r-panel);background:radial-gradient(60rem 36rem at 90% -10%,var(--aqua-200),transparent 70%),linear-gradient(180deg,var(--aqua-50),var(--aqua-100))}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(3.25rem,2rem + 5vw,4.5rem);align-items:center}
.hero__copy{display:grid;gap:1.5rem;justify-items:start}
.hero h1{isolation:isolate}
.hero__line{display:block}
.hero__line--2{color:var(--deep)}
.swipe{position:relative;white-space:nowrap}
.swipe svg{position:absolute;z-index:-1;inset-inline-start:-.08em;inset-block-end:-.08em;inline-size:calc(100% + .16em);block-size:.34em;overflow:visible}
.swipe path{fill:none;stroke:var(--gold);stroke-width:9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:swipe .9s .45s var(--ease) forwards}
@keyframes swipe{to{stroke-dashoffset:0}}
.hero__lead{max-inline-size:35rem;font-size:var(--fs-500)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:.25rem}
.hero__call{display:flex;align-items:center;gap:.625rem;margin-block:-.625rem;font-weight:500;color:var(--ink)}
.hero__call .icon{inline-size:1.25rem;block-size:1.25rem;color:var(--aqua-700)}
.hero__call a{display:inline-block;padding-block:.75rem;font:700 1.0625rem/1.2 var(--font-head);color:var(--deep);white-space:nowrap}
.hero__checks{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-weight:500;font-size:var(--fs-300);color:var(--ink)}
.hero__checks li{display:inline-flex;align-items:center;gap:.5rem}

/* The photo, with a soft aqua disc and a dotted ring behind it */
.hero__visual{position:relative;inline-size:min(100%,33rem);margin-inline:auto;container-type:inline-size}
.hero__visual::before{content:"";position:absolute;inset-block-start:-6%;inset-inline-end:-9%;inline-size:80%;aspect-ratio:1;border-radius:50%;background:var(--aqua-100)}
.hero__visual::after{content:"";position:absolute;inset-block-end:5%;inset-inline-start:-8%;inline-size:54%;aspect-ratio:1;border-radius:50%;border:2px dotted var(--aqua-300)}
.hero__photo{z-index:1;aspect-ratio:4 / 4.5;border:.5rem solid var(--white);border-radius:var(--r-panel);box-shadow:var(--shadow-lg)}

.hero__spark,.hero__bubble{position:absolute;z-index:2;pointer-events:none}
.hero__spark{filter:drop-shadow(0 6px 10px rgba(2,47,58,.16))}
.hero__spark .spark{animation:twinkle 3.8s ease-in-out infinite}
.hero__spark--1{inset-block-start:-1.5rem;inset-inline-start:-.625rem;font-size:3.5rem;color:var(--gold)}
.hero__spark--2{inset-block-start:-1.625rem;inset-inline-start:3.125rem;font-size:1.25rem;color:var(--aqua)}
.hero__spark--2 .spark{animation-duration:4.6s;animation-delay:-1.4s}
.hero__spark--3{inset-block-end:18%;inset-inline-end:-.625rem;font-size:1.875rem;color:var(--gold)}
.hero__spark--3 .spark{animation-duration:5.4s;animation-delay:-2.6s}
.hero__bubble{border:2px solid var(--aqua-300);border-radius:50%;background:rgba(255,255,255,.55);animation:floaty 7s ease-in-out infinite}
.hero__bubble::before{content:"";position:absolute;inset:18%;border:2px solid transparent;border-block-start-color:rgba(23,164,178,.55);border-radius:50%;clip-path:inset(0 50% 0 0);transform:rotate(-12deg)}
.hero__bubble--1{inset-block-start:15%;inset-inline-end:-.875rem;inline-size:2.5rem;block-size:2.5rem}
.hero__bubble--2{inset-block-start:27%;inset-inline-end:-.25rem;inline-size:1rem;block-size:1rem;animation-duration:9s;animation-delay:-3s}
.hero__bubble--2::before{content:none}
.hero__bubble--3{inset-block-start:48%;inset-inline-start:-.875rem;inline-size:1.875rem;block-size:1.875rem;animation-duration:8s;animation-delay:-5s}

/* The little checklist card that overlaps the photo */
.hero-card{position:relative;z-index:3;inline-size:min(100% - 1rem,21rem);margin:-1.75rem 0 0 .25rem;padding:1rem 1.125rem 1.125rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);font-size:.8125rem;line-height:1.3;color:var(--ink);transform:rotate(-2deg)}
.hero-card::before{content:"";position:absolute;inset-block-start:-.5em;inset-inline-start:50%;inline-size:3.4em;block-size:1em;margin-inline-start:-1.7em;border-radius:.5em;background:var(--gold);box-shadow:inset 0 -.2em 0 rgba(2,47,58,.2)}
.hero-card__title{font:600 1.15em/1.2 var(--font-head);margin-block-end:.6em}
.hero-card ul{display:grid;grid-template-columns:auto auto;justify-content:start;gap:.5em 1.5em}
.hero-card li{display:flex;align-items:center;gap:.5em}
.hero-card .tick{inline-size:1.35em;block-size:1.35em}
.hero-card .tick .icon{inline-size:.85em;block-size:.85em}
.hero-card__foot{margin-block-start:.75em;padding-block-start:.6em;border-block-start:1px dashed var(--aqua-300);color:var(--muted);font-size:.92em}

@media (max-width:479.98px){
  .hero__actions{inline-size:100%}
  .hero__actions .btn{flex:1 1 100%}
}
@media (min-width:560px){
  .hero__photo{aspect-ratio:4 / 5}
  .hero__spark--1{inset-block-start:-2rem;inset-inline-start:-1.75rem;font-size:4.5rem}
  .hero__spark--2{inset-block-start:-2.25rem;inset-inline-start:3rem;font-size:1.375rem}
  .hero__spark--3{inset-inline-end:-1.5rem;font-size:2.25rem}
  .hero__bubble--1{inset-inline-end:-2.25rem;inline-size:3rem;block-size:3rem}
  .hero__bubble--2{inset-inline-end:-1.25rem;inline-size:1.125rem;block-size:1.125rem}
  .hero__bubble--3{inset-inline-start:-2.75rem;inline-size:2.125rem;block-size:2.125rem}
  .hero-card{position:absolute;inset-inline-start:-7%;inset-block-end:-5%;inline-size:max-content;max-inline-size:74cqi;margin:0;padding:1em 1.2em;font-size:.75rem;font-size:clamp(.6875rem,2.3cqi,.8125rem);transform:rotate(-3deg)}
}
@media (min-width:560px) and (max-width:639.98px){
  .hero-card{inset-inline-start:calc(.75rem - var(--gutter))}
}
@media (min-width:1024px){
  .hero__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
  .hero__visual{margin-inline:auto 0}
}
@media (min-width:1240px){
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .hero__visual{margin-inline:auto 1.5rem}
}

/* ---------- Trust strip ---------- */
.trust{position:relative;z-index:2;margin-block-start:calc(-1 * clamp(3rem,2.25rem + 3vw,4.25rem))}
.trust__list{display:grid;gap:1px;overflow:hidden;background:var(--line);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-md)}
.trust__item{display:flex;align-items:center;gap:.875rem;padding:1.125rem 1.25rem;background:var(--white);font:600 1.0625rem/1.25 var(--font-head);color:var(--ink)}
.trust__item:hover .icon-badge{background:var(--gold);color:var(--deep-900);transform:rotate(-8deg)}
@media (min-width:560px){
  .trust__list{grid-template-columns:1fr 1fr}
}
@media (min-width:1100px){
  .trust__list{grid-template-columns:repeat(4,1fr)}
  .trust__item{padding:1.5rem 1.375rem}
}

/* ---------- Services ---------- */
.services__grid{display:grid;gap:1.25rem}
.service-card{position:relative;display:flex;flex-direction:column;padding:.625rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.service-card:hover{transform:translateY(-6px);border-color:var(--aqua-300);box-shadow:var(--shadow-md)}
.service-card__media{position:relative}
.service-card__media .photo-frame{border-radius:var(--r-sm)}
.service-card__media img{transition:transform .9s var(--ease)}
.service-card:hover .service-card__media img{transform:scale(1.05)}
.service-card__icon{position:absolute;inset-inline-start:.875rem;inset-block-end:-1.5rem;display:grid;place-items:center;inline-size:3.5rem;block-size:3.5rem;border-radius:1.125rem;background:var(--aqua-100);color:var(--deep);box-shadow:0 0 0 .3125rem var(--white);transition:background-color .3s,color .3s,transform .4s var(--ease)}
.service-card__icon svg{inline-size:2.125rem;block-size:2.125rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.service-card__icon .ac{fill:var(--gold);stroke:none}
.service-card__icon .as{stroke:var(--gold)}
.service-card:hover .service-card__icon{background:var(--deep);color:var(--white);transform:rotate(-5deg)}
.service-card__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.625rem;padding:2.375rem .875rem .875rem}
.service-card__body p{font-size:var(--fs-300);line-height:1.55}
.service-card__list{margin-block:.125rem .25rem;font-size:.875rem;line-height:1.45;color:var(--muted)}
.service-card__link{margin-block-start:auto;padding-block:.625rem .125rem}
.service-card__link::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
.service-card__link:focus-visible{outline:none}
.service-card__link:focus-visible::before{outline:3px solid var(--c-focus);outline-offset:3px}
.services__note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.25rem 1rem;margin-block-start:2rem;padding:.75rem 1.5rem;border:1.5px dashed var(--aqua-300);border-radius:var(--r-lg);text-align:center;color:var(--ink)}
.services__note a{display:inline-block;padding-block:.5rem;font-weight:600}
@media (min-width:600px){
  .services__grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .services__grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}
}

/* ---------- Why us ---------- */
.why__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,1.5rem + 4vw,4.5rem)}
.why__media{position:relative}
.why__photo{border-radius:var(--r-xl);box-shadow:var(--shadow-md)}
.promise{position:relative;z-index:1;overflow:hidden;inline-size:min(100% - 1.5rem,22rem);margin:-3rem .75rem 0 auto;padding:1.375rem 4.25rem 1.5rem 1.5rem;border-radius:var(--r-lg);background:var(--deep);color:var(--aqua-200);box-shadow:var(--shadow-md)}
.promise__label{font:600 var(--fs-200)/1.2 var(--font-head);letter-spacing:var(--tracking-caps);text-transform:uppercase}
.promise__text{margin-block-start:.5rem;font:500 clamp(1.1875rem,1.1rem + .5vw,1.375rem)/1.25 var(--font-head);letter-spacing:-.01em;color:var(--white)}
.promise__spark{position:absolute;inset-block-start:1rem;inset-inline-end:1rem;font-size:2.25rem;color:var(--gold)}
.promise__spark .spark{animation:twinkle 3.8s ease-in-out infinite}
.promise::after{content:"";position:absolute;inset-block-end:-2.5rem;inset-inline-end:-1.5rem;inline-size:7rem;block-size:7rem;border-radius:50%;border:2px solid rgba(255,255,255,.14)}
.why__content{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.25rem)}
.why__intro{display:grid;gap:1rem;justify-items:start}
.why__list{display:grid;gap:.75rem}
.why__item{display:flex;align-items:flex-start;gap:1rem;padding:1.125rem 1.25rem;background:var(--white);border:1px solid transparent;border-radius:var(--r-md);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.why__item:hover{transform:translateY(-3px);border-color:var(--aqua-200);box-shadow:var(--shadow-sm)}
.why__item:hover .icon-badge{background:var(--deep);color:var(--white)}
.why__item h3{margin-block:.125rem .25rem;font-size:1.125rem}
.why__item p{font-size:var(--fs-300);line-height:1.55}
@media (min-width:1000px){
  .why__grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center}
  .why__photo{aspect-ratio:1 / 1.12}
  .promise{margin-inline-end:-1.5rem}
}

/* ---------- How it works ---------- */
.steps{display:grid;gap:2.25rem}
.step{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:1.25rem;row-gap:.375rem;align-items:start}
.step__num{grid-row:span 2;position:relative;z-index:1;display:grid;place-items:center;inline-size:4rem;block-size:4rem;border:2px solid var(--aqua-300);border-radius:50%;background:var(--white);box-shadow:0 0 0 .5rem var(--aqua-50),inset 0 -.4rem 0 var(--aqua-100);font:600 1.5rem/1 var(--font-head);color:var(--deep)}
.step h3{align-self:end;padding-block-start:.5rem}
.step p{font-size:var(--fs-300);line-height:1.6}
.step:not(:last-child)::before{content:"";position:absolute;inset-inline-start:calc(2rem - 1px);inset-block:4.75rem -1.5rem;border-inline-start:2px dashed var(--aqua-300)}
.step--final .step__num{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 .5rem var(--gold-soft),inset 0 -.4rem 0 rgba(2,47,58,.14);color:var(--deep-900)}
.step--final .spark{position:absolute;inset-block-start:-.5rem;inset-inline-end:-.625rem;font-size:1.5rem;color:var(--aqua);animation:twinkle 3.8s ease-in-out infinite}
.steps__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1.5rem;margin-block-start:clamp(2.5rem,2rem + 2vw,4rem);font-weight:500;color:var(--ink)}
.steps__cta a:not(.btn){display:inline-block;padding-block:.625rem;font-weight:700;white-space:nowrap}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
  .step{display:block}
  .step__num{margin-block-end:1.5rem}
  .step h3{padding-block-start:0;margin-block-end:.5rem}
  .step:not(:last-child)::before{inset-inline:5rem -1.25rem;inset-block:calc(2rem - 1px) auto;border-inline-start:0;border-block-start:2px dashed var(--aqua-300)}
}

/* ---------- Who we clean for ---------- */
.who__grid{display:grid;gap:.75rem}
.who__note{margin-block-start:1.75rem;color:var(--ink)}
.who__note a{display:inline-block;padding-block:.5rem;font-weight:600}
@media (min-width:480px){
  .who__grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .who__grid{grid-template-columns:repeat(4,1fr);gap:.875rem}
  .who__grid .tile{padding:1rem 1.125rem}
}

/* ---------- Contact (the one dark section) ---------- */
.contact{padding-block-start:var(--edge)}
.contact__panel{position:relative;isolation:isolate;overflow:hidden}
.contact__panel::before{content:"";position:absolute;z-index:-1;inset-block-end:-9rem;inset-inline-start:-7rem;inline-size:26rem;aspect-ratio:1;border-radius:50%;border:2px solid rgba(255,255,255,.09);background:radial-gradient(closest-side,rgba(255,255,255,.045) 70%,transparent 71%)}
.contact__panel::after{content:"";position:absolute;z-index:-1;inset-block-start:-8rem;inset-inline-end:-6rem;inline-size:22rem;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.05)}
.contact__spark{position:absolute;z-index:-1;inset-block-start:clamp(1.25rem,3vw,2.25rem);inset-inline-start:clamp(1.25rem,3vw,2.25rem);font-size:1.625rem;color:var(--gold)}
.contact__spark .spark{animation:twinkle 3.8s ease-in-out infinite}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,1.5rem + 4vw,4rem)}
.contact__copy{display:grid;gap:1.125rem;align-content:start;justify-items:start;min-inline-size:0}
.contact__list{display:grid;gap:1.125rem;inline-size:100%;margin-block-start:.75rem}
.contact-link{display:flex;align-items:center;gap:.875rem;min-inline-size:0;min-block-size:2.75rem;border-radius:var(--r-md);font:600 clamp(1rem,.9rem + .7vw,1.25rem)/1.2 var(--font-head);color:var(--white);text-decoration:none;overflow-wrap:anywhere}
.contact-link__text{min-inline-size:0}
.contact-link small{display:block;margin-block-end:.2rem;font:500 var(--fs-200)/1.2 var(--font-body);letter-spacing:.04em;color:var(--aqua-300)}
.contact-link--lg{font-size:clamp(1.375rem,1.2rem + 1vw,1.75rem);letter-spacing:-.01em}
a.contact-link:hover .icon-badge{background:var(--gold);color:var(--deep-900)}
.contact__buttons{display:flex;flex-wrap:wrap;gap:.75rem}
.contact__whatsapp .icon--whatsapp{inline-size:1.625rem;block-size:1.625rem}
.contact__hours{display:grid;gap:.75rem;inline-size:100%;margin-block-start:.75rem;padding-block-start:1.5rem;border-block-start:1px solid var(--c-line)}
.contact__hours-title{display:flex;align-items:center;gap:.5rem;font-size:1.0625rem;letter-spacing:0}
.contact__hours-title .icon{inline-size:1.25rem;block-size:1.25rem;color:var(--gold)}
.contact__hours-note{font-size:var(--fs-300)}
.quote-card{min-inline-size:0;padding:clamp(1.25rem,.9rem + 1.75vw,2.25rem);background:var(--white);border-radius:var(--r-lg);box-shadow:0 34px 60px -34px rgba(0,0,0,.55)}
.quote-form{display:grid;gap:1rem}
.quote-form__head{display:grid;gap:.25rem;margin-block-end:.25rem}
.quote-form__title{font-size:var(--fs-700)}
@media (max-width:479.98px){
  .contact__buttons .btn{flex:1 1 100%}
}
@media (min-width:1000px){
  .contact__grid{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:start}
}

/* ---------- FAQ ---------- */
.faq__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,4.5rem)}
.faq__intro{display:grid;gap:1rem;justify-items:start;align-content:start}
.faq__help{display:grid;gap:.375rem;inline-size:100%;margin-block-start:1rem;padding:1.375rem 1.5rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--aqua-50)}
.faq__help strong{font:600 1.125rem/1.3 var(--font-head);color:var(--ink)}
.faq__help-actions{display:flex;flex-wrap:wrap;gap:.625rem;margin-block-start:.625rem}
.faq__list{display:grid;gap:.75rem}
.faq__item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);transition:border-color .25s,box-shadow .25s,background-color .25s}
.faq__item:hover{border-color:var(--aqua-300)}
.faq__item[open]{border-color:var(--aqua-300);background:var(--aqua-50);box-shadow:var(--shadow-sm)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-block-size:3.75rem;padding:1rem 1.25rem;border-radius:var(--r-md);cursor:pointer;list-style:none}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{font-size:1.125rem;line-height:1.35}
.faq__icon{position:relative;flex:none;inline-size:2.125rem;block-size:2.125rem;border-radius:50%;background:var(--aqua-100);transition:background-color .25s}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;inset-block-start:calc(50% - 1px);inset-inline-start:calc(50% - .4375rem);inline-size:.875rem;block-size:2px;border-radius:2px;background:var(--deep);transition:transform .35s var(--ease),background-color .25s}
.faq__icon::after{transform:rotate(90deg)}
.faq__item[open] .faq__icon{background:var(--deep)}
.faq__item[open] .faq__icon::before,.faq__item[open] .faq__icon::after{background:var(--white)}
.faq__item[open] .faq__icon::after{transform:rotate(0)}
.faq__answer{max-inline-size:40rem;padding:0 1.25rem 1.375rem}
@media (min-width:1000px){
  .faq__grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start}
  .faq__intro{position:sticky;inset-block-start:calc(var(--header-h) + 2rem)}
}

/* ==========================================================================
   Phones (under 600px): tighter, easier to scan, nothing sideways
   ========================================================================== */
@media (max-width:599.98px){
  /* Trust strip: a 2 x 2 grid of small cards instead of four long rows */
  .trust__list{grid-template-columns:1fr 1fr}
  .trust__item{flex-direction:column;align-items:flex-start;gap:.625rem;padding:1rem;font-size:.9375rem}
  .trust__item .icon-badge{inline-size:2.5rem;block-size:2.5rem}

  /* Services: two picture cards per row; the long details stay for bigger screens */
  .services__grid{grid-template-columns:1fr 1fr;gap:.75rem}
  .service-card{padding:.375rem;border-radius:var(--r-md)}
  .service-card__media .photo-frame{border-radius:.75rem}
  .service-card__icon{inset-inline-start:.5rem;inset-block-end:-1.125rem;inline-size:2.5rem;block-size:2.5rem;border-radius:.75rem;box-shadow:0 0 0 .1875rem var(--white)}
  .service-card__icon svg{inline-size:1.5rem;block-size:1.5rem}
  .service-card__body{gap:.25rem;padding:1.625rem .5rem .375rem}
  .service-card__body h3{font-size:1rem;line-height:1.2;letter-spacing:-.01em;text-wrap:pretty}
  .service-card__body p,.service-card__list{display:none}
  .service-card__link{padding-block:.5rem .25rem;font-size:.875rem}
  .services__note{margin-block-start:1.25rem;padding:.625rem 1rem}

  /* Who we clean for: two compact tiles per row */
  .who__grid{grid-template-columns:1fr 1fr;gap:.5rem}
  .who__grid .tile{flex-direction:column;align-items:flex-start;gap:.5rem;padding:.875rem;font-size:.9375rem}
  .who__grid .icon-badge{inline-size:2.5rem;block-size:2.5rem}

  /* Why us + steps: a little more compact */
  .why__item{gap:.875rem;padding:1rem}
  .promise{margin-block-start:-2.25rem;padding:1.125rem 3.75rem 1.25rem 1.25rem}
  .steps{gap:1.75rem}
  .step__num{inline-size:3.25rem;block-size:3.25rem;font-size:1.25rem;box-shadow:0 0 0 .375rem var(--aqua-50),inset 0 -.3rem 0 var(--aqua-100)}
  .step--final .step__num{box-shadow:0 0 0 .375rem var(--gold-soft),inset 0 -.3rem 0 rgba(2,47,58,.14)}
  .step:not(:last-child)::before{inset-inline-start:calc(1.625rem - 1px);inset-block:3.875rem -1.25rem}
  .steps__cta .btn{flex:1 1 100%}

  /* Contact: full-width actions that are easy to hit with a thumb */
  .contact__buttons .btn{flex:1 1 100%}
  .quote-card{border-radius:var(--r-md)}
  .faq__help-actions .btn{flex:1 1 auto}
  .faq__item summary{padding:.875rem 1rem}
  .faq__answer{padding:0 1rem 1.125rem}
}
@media (max-width:599.98px){
  /* Already said in the strip right below the hero, and in the footer */
  .hero__checks,.contact__hours{display:none}
  .hero__call{margin-block:-.5rem -.25rem}
}

/* css/40-chat.css */
/* ==========================================================================
   Chat widget (bottom-right launcher + panel). Markup: partials/chat-widget.html
   ========================================================================== */
.chat{position:fixed;z-index:60;inset-inline-end:max(.875rem,env(safe-area-inset-right));inset-block-end:max(.875rem,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;pointer-events:none}
.chat > *{pointer-events:auto}

/* ---------- Launcher ---------- */
.chat__launcher{position:relative;display:inline-flex;align-items:center;gap:.625rem;min-block-size:3.5rem;padding:.375rem 1.25rem .375rem .375rem;border:0;border-radius:var(--r-pill);background:var(--deep);color:var(--white);font:600 1rem/1 var(--font-head);cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 0 0 3px var(--white),0 18px 34px -12px rgba(2,47,58,.7);transition:transform .3s var(--ease),background-color .25s}
.chat__launcher:hover{background:var(--deep-800);transform:translateY(-2px)}
.chat__launcher:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:var(--r-pill);box-shadow:0 0 0 3px var(--white),0 0 0 9px var(--deep-900),0 18px 34px -12px rgba(2,47,58,.7)}
.chat__launcher-icon{display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;border-radius:50%;background:var(--white);color:var(--deep)}
.chat__launcher-icon--close,.chat__launcher-state{display:none}
/* a small gold dot, like a new-message badge */
.chat__launcher::after{content:"";position:absolute;inset-block-start:.0625rem;inset-inline-start:2.375rem;inline-size:.8125rem;block-size:.8125rem;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2.5px var(--deep)}
.chat.is-open .chat__launcher{padding:.375rem}
.chat.is-open .chat__launcher::after,.chat.is-open .chat__launcher-icon--open,.chat.is-open .chat__launcher-label{display:none}
.chat.is-open .chat__launcher-icon--close{display:grid}
.chat.is-open .chat__launcher-state{display:block}

/* ---------- Panel ---------- */
.chat__panel{display:flex;flex-direction:column;inline-size:min(23rem,calc(100vw - 1.75rem));max-block-size:min(35rem,calc(100vh - 6.5rem));max-block-size:min(35rem,calc(100dvh - 6.5rem));overflow:hidden;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);animation:chat-in .32s var(--ease)}
.chat__panel:focus{outline:none}
@keyframes chat-in{from{opacity:0;transform:translateY(.75rem) scale(.97)}}

.chat__head{flex:none;display:flex;align-items:center;gap:.75rem;padding:.75rem .75rem .75rem 1rem;background:var(--deep);color:var(--white)}
.chat__avatar{flex:none;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;border-radius:50%;background:var(--white);color:var(--gold);font-size:1.375rem}
.chat__who{min-inline-size:0}
.chat__name{font:600 1rem/1.25 var(--font-head);color:var(--white)}
.chat__status{display:flex;align-items:center;gap:.4375rem;font-size:.8125rem;line-height:1.3;color:var(--aqua-200)}
.chat__dot{flex:none;inline-size:.5rem;block-size:.5rem;border-radius:50%;background:var(--whatsapp)}
.chat__close{flex:none;display:grid;place-items:center;inline-size:2.75rem;block-size:2.75rem;margin-inline-start:auto;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:var(--white);cursor:pointer;transition:background-color .2s}
.chat__close:hover{background:rgba(255,255,255,.24)}
.chat__close:focus-visible{outline-color:var(--gold-light);border-radius:50%}

/* ---------- Conversation ---------- */
.chat__log{flex:1 1 auto;display:flex;flex-direction:column;gap:.5rem;min-block-size:9rem;overflow-y:auto;overscroll-behavior:contain;padding:1rem .875rem;background:linear-gradient(var(--aqua-50),var(--white) 9rem)}
.chat__msg{display:grid;gap:.375rem;max-inline-size:88%;padding:.625rem .875rem;border-radius:1.125rem;font-size:.9375rem;line-height:1.45;overflow-wrap:anywhere;animation:chat-msg .28s var(--ease)}
@keyframes chat-msg{from{opacity:0;transform:translateY(.375rem)}}
.chat__msg--them{align-self:flex-start;background:var(--white);border:1px solid var(--line);border-end-start-radius:.375rem;color:var(--ink);box-shadow:0 6px 14px -12px rgba(2,47,58,.4)}
.chat__msg--me{align-self:flex-end;background:var(--deep);border-end-end-radius:.375rem;color:var(--white)}
.chat__msg ul{display:grid;gap:.125rem;padding-inline-start:1.125rem;list-style:disc}
.chat__msg li::marker{color:var(--aqua)}
.chat__msg a{font-weight:600}
.chat__msg--typing{padding-block:.75rem}
.chat__typing{display:inline-flex;align-items:center;gap:.25rem;block-size:.75rem}
.chat__typing i{inline-size:.4375rem;block-size:.4375rem;border-radius:50%;background:var(--aqua-700);animation:chat-dot 1s ease-in-out infinite}
.chat__typing i:nth-child(2){animation-delay:.15s}
.chat__typing i:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-.25rem);opacity:1}}

.chat__replies{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:.25rem .375rem}
.chat__reply{min-block-size:2.75rem;padding:.5rem .9375rem;border:1.5px solid var(--aqua-300);border-radius:var(--r-pill);background:var(--white);color:var(--deep);font:600 .9375rem/1.2 var(--font-head);text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,border-color .2s,transform .25s var(--ease)}
.chat__reply:hover{background:var(--aqua-100);border-color:var(--deep);transform:translateY(-1px)}
.chat__reply:focus-visible{border-radius:var(--r-pill)}

/* The WhatsApp button that follows every reply */
.chat__handoff{align-self:stretch;margin-block:.25rem;animation:chat-msg .28s var(--ease)}
.chat__handoff .btn{min-block-size:3.125rem;font-size:1rem}

/* ---------- Composer ---------- */
.chat__form{flex:none;display:flex;align-items:center;gap:.5rem;padding:.625rem .75rem;border-block-start:1px solid var(--line);background:var(--white)}
.chat__input{flex:1;min-inline-size:0;min-block-size:2.875rem;padding:.5rem 1rem;border:1.5px solid var(--field-line);border-radius:var(--r-pill);background:var(--aqua-50);color:var(--ink);font-size:1rem;transition:border-color .2s,box-shadow .2s,background-color .2s}
.chat__input::placeholder{color:var(--muted);opacity:1}
.chat__input:focus-visible{outline:none;border-color:var(--deep);background:var(--white);box-shadow:0 0 0 4px rgba(23,164,178,.3);border-radius:var(--r-pill)}
.chat__send{flex:none;display:grid;place-items:center;inline-size:2.875rem;block-size:2.875rem;padding:0;border:0;border-radius:50%;background:var(--deep);color:var(--white);cursor:pointer;transition:background-color .2s,transform .25s var(--ease)}
.chat__send:hover{background:var(--deep-800);transform:translateX(2px)}
.chat__send:focus-visible{border-radius:50%}
.chat__send .icon{inline-size:1.25rem;block-size:1.25rem}
.chat__foot{flex:none;padding:0 .75rem .625rem;background:var(--white);text-align:center;font-size:.875rem;line-height:1.2}
.chat__foot a{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-block-size:2.25rem;font-weight:600;color:var(--deep);text-decoration:none}
.chat__foot a:hover{text-decoration:underline}
.chat__foot .icon{inline-size:1.125rem;block-size:1.125rem;color:#128C4B}

/* Phones: the panel takes the full width, and the label gives way on very narrow screens */
@media (max-width:479.98px){
  .chat{inset-inline:max(.75rem,env(safe-area-inset-left)) max(.75rem,env(safe-area-inset-right))}
  .chat__panel{inline-size:100%}
}
/* Icon-only launcher: on phones once the page is scrolled, and always on very narrow screens.
   The label is hidden visually only, so the button keeps its name for screen readers. */
@media (max-width:599.98px){
  .chat.is-compact:not(.is-open) .chat__launcher{padding:.375rem}
  .chat.is-compact:not(.is-open) .chat__launcher-label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:359.98px){
  .chat:not(.is-open) .chat__launcher{padding:.375rem}
  .chat:not(.is-open) .chat__launcher-label{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Short screens (a phone on its side): keep the panel inside the screen */
@media (max-height:30rem){
  .chat__panel{max-block-size:calc(100vh - 5.25rem);max-block-size:calc(100dvh - 5.25rem)}
  .chat__log{min-block-size:4rem}
}
/* Without JavaScript the chat cannot open, so it steps aside. */
@media (scripting:none){
  .chat{display:none}
}
@media print{
  .chat{display:none}
}

/* css/50-pages.css */
/* ==========================================================================
   Message pages: thank-you.html and 404.html
   ========================================================================== */
.message-page{padding-block:var(--edge)}
.message-page__panel{position:relative;overflow:hidden;display:grid;align-items:center;min-block-size:min(40rem,calc(100vh - var(--header-h) - 8rem));background:radial-gradient(40rem 26rem at 85% -10%,var(--aqua-100),transparent 70%),var(--aqua-50)}
.message-page__inner{position:relative;display:grid;gap:1.125rem;justify-items:center;max-inline-size:42rem;text-align:center}
.message-page__inner h1{font-size:var(--fs-800)}
.message-page__code{font:700 clamp(4.5rem,3rem + 8vw,7.5rem)/1 var(--font-head);letter-spacing:-.04em;color:var(--aqua-200)}
.message-page__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;inline-size:100%;margin-block-start:.5rem}
.message-page__call{font-weight:500;color:var(--ink)}
.message-page__call a{display:inline-block;padding-block:.5rem;font-weight:700;white-space:nowrap}
.message-page__spark{position:absolute;pointer-events:none}
.message-page__spark .spark{animation:twinkle 3.8s ease-in-out infinite}
.message-page__spark--1{inset-block-start:12%;inset-inline-start:8%;font-size:clamp(2rem,1.5rem + 2vw,3.25rem);color:var(--gold)}
.message-page__spark--2{inset-block-end:14%;inset-inline-end:9%;font-size:clamp(1.25rem,1rem + 1vw,1.875rem);color:var(--aqua)}
.message-page__spark--2 .spark{animation-delay:-1.6s}
@media (max-width:479.98px){
  .message-page__actions .btn{flex:1 1 100%}
}