/* ============================================================
   Qualitas Cleaning Services — standalone site
   Rebuilt 1:1 from the Canva design "Master Site_Qualitas Design"

   Font mapping (Canva -> web):
     Public Sans          -> Public Sans          (exact, Google Fonts)
     Atkinson Hyperlegible-> Atkinson Hyperlegible(exact, Google Fonts)
     Glacial Indifference -> Jost                 (closest free match)
     Garet / Canva Sans   -> Figtree              (closest free match)
   ============================================================ */

:root{
  --gold:        #b29045;
  --gold-soft:   #d8c38b;
  --ink:         #000000;
  --grey-text:   #545454;
  --chip:        #efefef;
  --social:      #b4b4b4;
  --band:        #eae5dc;

  /* lavados de fondo: sustituyen a assets/bg-soft.png (una vineta oscura que,
     estirada con `cover`, ensuciaba los bordes de About / Services). Son
     variaciones calidas casi imperceptibles derivadas del dorado de marca. */
  --wash-0:      #ffffff;   /* blanco puro          */
  --wash-1:      #fbf9f5;   /* blanco calido        */
  --wash-2:      #f4f0e9;   /* borde de seccion     */
  --wash-glow:   rgba(178,144,69,.05);

  --font-display: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-nav:     "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-quote:   "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;

  /* the Canva artboard is 1366 wide — every size below is derived from it */
  --page: 1366px;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0;
  background:#fffffe;
  color:var(--ink);
  font-family:var(--font-head);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;

  --gutter: max(0px, calc((100% - 1366px) / 2));
}
img{ display:block; max-width:100%; }

a{ color:inherit; }

/* Page wrapper runs the full width of the window. Canva Sites stretches
   backgrounds and photo banners edge to edge while the content itself stays
   on the 1366 grid, centred — `--gutter` is the leftover space on each side
   that the content is pushed in by. Verified against qualitascleaningservices.com,
   where the banner measures 108.64% of the viewport but the About photo is
   still exactly 557px wide at x = gutter + 108. */
.page{
  width:100%;
  position:relative;
}

/* ---------- shared: top navigation ---------- */
.nav{
  display:flex;
  justify-content:center;
  gap:clamp(18px,2.85vw,39px);
  padding-top:clamp(8px,1.2vw,16px);
  position:relative;
  z-index:5;
}
.nav a{
  font-family:var(--font-nav);
  font-size:clamp(15px,1.47vw,20px);
  font-weight:400;
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  min-width:clamp(66px,6.5vw,89px);
  text-align:center;
  white-space:nowrap;
  transition:opacity .18s ease;
}
.nav a:hover{ opacity:.72; }
.nav a[aria-current="page"]{
  font-weight:500;
  text-decoration-thickness:2px;
  opacity:1;
}

/* ---------- shared: logo ---------- */
.logo{
  width:clamp(84px,9.44vw,129px);
  height:auto;
  margin-inline:auto;
}

/* ---------- shared: "Get a free quote" pill ---------- */
.quote-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--chip);
  color:var(--ink);
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:999px;
  transition:background .18s ease, transform .18s ease;
}
.quote-btn:hover{ background:#fff; transform:translateY(-1px); }

.quote-btn--hero{
  font-size:clamp(14px,1.37vw,18.67px);
  padding:clamp(9px,.95vw,13px) clamp(20px,2.1vw,29px);
}
.quote-btn--corner{
  font-size:clamp(10px,.88vw,12px);
  padding:clamp(6px,.6vw,8px) clamp(13px,1.32vw,18px);
  position:absolute;
  right:calc(var(--gutter) + clamp(16px,4.1vw,56px));
  bottom:clamp(12px,2.4vw,33px);
  z-index:5;
}

/* ---------- shared: black pill label (WHY US / OUR PROMISE / …) ---------- */
.chip{
  display:inline-block;
  background:var(--ink);
  color:#fff;
  font-family:var(--font-head);
  letter-spacing:.057em;
  border-radius:999px;
  padding:.42em 1.15em;
  line-height:1.4;
}

/* ============================================================
   1 — HOME
   ============================================================ */
.sec-home{
  position:relative;
  background:#fff url("assets/bg-marble.jpg") center/cover no-repeat;
  /* Se adapta a cualquier monitor: la seccion ocupa como minimo el alto de la
     ventana, asi nunca queda una franja blanca debajo. Antes usaba
     aspect-ratio 1366/768 (el lienzo de Canva), que en pantallas con otra
     proporcion dejaba hueco por abajo. */
  min-height:100vh;                          /* fallback navegadores viejos */
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding-bottom:clamp(34px,min(9.5vw,13.5vh),130px);  /* Canva: y=638 de 768 */
}
.sec-home .logo{
  margin-top:clamp(28px,min(4.4vw,6.3vh),60px);
  width:clamp(84px,min(9.44vw,13.5vh),129px);
}

.home-copy{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding-inline:clamp(20px,4vw,60px);
  gap:clamp(12px,min(1.6vw,2.3vh),22px);
}
.home-title{
  margin:0;
  width:100%;
  font-family:var(--font-display);
  font-size:clamp(34px,min(4.69vw,6.7vh),64px);
  line-height:1.03;
  font-weight:300;
  color:var(--gold);
  max-width:729px;
}
.home-title b{ font-weight:700; color:#fff; }

.home-sub{
  margin:0;
  width:100%;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(15px,min(1.76vw,2.5vh),24px);
  line-height:1.4;
  color:var(--gold-soft);
  max-width:729px;
}

.socials{
  display:flex;
  justify-content:center;
  gap:clamp(10px,1.2vw,17px);
  margin-top:clamp(10px,min(1.6vw,2.3vh),22px);
}
.socials a{
  width:clamp(30px,2.76vw,38px);
  height:clamp(30px,2.76vw,38px);
  border-radius:50%;
  background:var(--social);
  display:grid;
  place-items:center;
  transition:background .18s ease, transform .18s ease;
}
.socials a:hover{ background:#fff; transform:translateY(-2px); }
.socials img{ width:76%; height:76%; object-fit:contain; }

/* ============================================================
   shared — arched photo banner used by About / Services / Quote
   Canva shape: 108.6% wide, corner radius 25% x 50%, pulled up 72px
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  min-height:clamp(230px, 22vw, 306px);   /* Canva keeps the banner 306px tall
                                             no matter how wide the window is */
  display:flex;
  flex-direction:column;
  isolation:isolate;
}
.hero__arc{
  position:absolute;
  left:-4.32%;
  top:-23.5%;
  width:108.64%;
  height:123.5%;
  border-radius:25% / 50%;
  overflow:hidden;
  z-index:-2;
}
.hero__arc img{
  width:100%; height:100%;
  object-fit:cover;
}
.hero__veil{           /* Canva: #000 at 60% opacity over the banner */
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:-1;
}
.hero__inner{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:0 clamp(20px,4vw,60px) clamp(2px,.3vw,4px);
}
.hero .nav{ padding-top:clamp(1px,.15vw,2px); }
.hero .logo{ margin-top:clamp(6px,1.4vw,19px); }
/* "About Us" has no sub-line, so Canva pushes its logo further down */
.hero--tall .logo{ margin-top:clamp(16px,4.05vw,55px); }
.hero__title{
  margin:0;                                /* Canva stacks these blocks flush */
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(26px,3.03vw,41.33px);
  line-height:1.14;
  letter-spacing:-.036em;
  color:#fff;
}
.hero__title--display{           /* Contact Us / Get A Quote use Public Sans */
  font-family:var(--font-display);
  font-size:clamp(28px,3.35vw,45.73px);
  line-height:.95;
  letter-spacing:0;
}
.hero__sub{
  margin:0 auto;
  max-width:724px;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(14px,1.37vw,18.67px);
  line-height:1.4;
  color:#fff;
}

/* ============================================================
   2 — ABOUT US
   ============================================================ */
.sec-about{ background:#fffffe; }

.why{
  background:
    radial-gradient(120% 78% at 50% 0%, var(--wash-glow) 0%, rgba(178,144,69,0) 62%),
    linear-gradient(180deg, var(--wash-0) 0%, var(--wash-1) 52%, var(--wash-2) 100%);
  padding:clamp(36px,5.7vw,78px) calc(var(--gutter) + clamp(20px,7.9vw,108px)) clamp(40px,6.2vw,85px);
  display:grid;
  grid-template-columns:minmax(0,557fr) minmax(0,395fr);
  gap:clamp(28px,14.5vw,198px);            /* Canva: photo 108–665, text 863–1258 */
  align-items:start;
}
.why__photo{
  width:100%;
  aspect-ratio:557 / 553;
  object-fit:cover;
  border-radius:16px;
}
.why__list{ padding-top:clamp(0px,1.6vw,22px); }
.why__chip{ font-size:clamp(11px,.89vw,12.15px); }
.why__title{
  margin:clamp(14px,1.75vw,24px) 0 clamp(20px,2.6vw,36px);
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(23px,2.34vw,32px);
  line-height:1.28;
}
.why__item + .why__item{ margin-top:clamp(16px,1.6vw,22px); }
.why__item h3{
  margin:0 0 clamp(5px,.6vw,8px);
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(18px,1.83vw,24.96px);
  line-height:1.4;
}
.why__item p{
  margin:0;
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(13.5px,1.11vw,15.19px);
  line-height:1.4;
}

/* --- "Our promise" band --- */
.promise{
  /* banda suave: entra y sale con el mismo tono que la seccion anterior y la
     siguiente, asi las costuras entre bloques son invisibles */
  background:linear-gradient(180deg, var(--wash-2) 0%, var(--band) 50%, var(--wash-2) 100%);
  padding:clamp(36px,5.2vw,71px) calc(var(--gutter) + clamp(20px,12vw,164px)) clamp(40px,5.9vw,80px) calc(var(--gutter) + clamp(20px,5.05vw,69px));
  display:grid;
  grid-template-columns:minmax(0,519fr) minmax(0,519fr);
  gap:clamp(28px,6.95vw,95px);             /* Canva: text 69–588, photo 683–1202 */
  align-items:start;
}
.promise__chip{ font-size:clamp(11px,.89vw,12.15px); }
.promise__title{
  margin:clamp(14px,1.6vw,22px) 0 clamp(16px,2vw,27px);
  font-family:var(--font-head);
  font-weight:700;
  font-size:clamp(26px,2.8vw,38.24px);
  line-height:1.28;
}
.promise__body{
  margin:0;
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(14.5px,1.23vw,16.87px);
  line-height:1.74;
}
.promise__photo{
  width:100%;
  aspect-ratio:519 / 564;
  object-fit:cover;
  border-radius:16px;
}

/* ============================================================
   shared — embedded widget block (reviews / gallery / form)
   ============================================================ */
.embed-block{
  background:
    linear-gradient(180deg, var(--wash-2) 0%, var(--wash-1) 45%, var(--wash-0) 100%)
      top/100% clamp(110px,13vw,180px) no-repeat,
    var(--wash-0);
  padding:clamp(36px,4.4vw,60px) calc(var(--gutter) + clamp(16px,2.3vw,32px)) clamp(30px,3.7vw,50px);
  text-align:center;
}
.embed-block--soft{
  background:
    radial-gradient(130% 100% at 50% 0%, var(--wash-glow) 0%, rgba(178,144,69,0) 72%)
      top/100% clamp(170px,21vw,290px) no-repeat,
    linear-gradient(180deg, var(--wash-2) 0%, var(--wash-1) 45%, var(--wash-0) 100%)
      top/100% clamp(170px,21vw,290px) no-repeat,
    var(--wash-0);
}
.embed-block__chip{ font-size:clamp(13px,1.3vw,17.78px); }
.embed-block__title{
  margin:clamp(14px,1.6vw,22px) 0 0;
  font-family:var(--font-quote);
  font-weight:400;
  font-size:clamp(30px,3.49vw,47.66px);
  line-height:1.28;
}
.embed-block__sub{
  margin:clamp(10px,1.1vw,15px) auto 0;
  max-width:1128px;
  font-family:var(--font-quote);
  font-weight:400;
  font-size:clamp(15px,1.66vw,22.67px);
  line-height:1.66;
}
.embed-frame{
  margin:clamp(20px,2.4vw,33px) auto 0;
  width:100%;
  border:0;
  display:block;
  background:transparent;
}
.embed-frame--reviews{ max-width:733px;  height:480px; }
.embed-frame--gallery{ max-width:972px;  height:760px; }
.embed-frame--form   { max-width:760px;  height:900px; }

/* ============================================================
   3 — SERVICES
   ============================================================ */
.sec-services{ background:#fffffe; }

.services{
  background:
    radial-gradient(110% 68% at 50% 0%, var(--wash-glow) 0%, rgba(178,144,69,0) 60%),
    linear-gradient(180deg, var(--wash-0) 0%, var(--wash-1) 55%, var(--wash-2) 100%);
  padding:clamp(20px,1.4vw,19px) calc(var(--gutter) + clamp(16px,5.64vw,77px)) clamp(30px,5.2vw,71px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.32vw,18px);             /* Canva: three 392px cards, 18px apart */
}
.service{
  position:relative;
  aspect-ratio:392 / 381;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
}
.service img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.service::after{           /* keeps the white caption readable on any photo */
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,.12) 32%, rgba(0,0,0,0) 55%);
}
.service:hover img{ transform:scale(1.04); }
.service h2{
  position:relative;
  z-index:2;
  margin:0;
  padding:clamp(14px,1.5vw,21px);
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(17px,1.94vw,26.55px);
  line-height:.95;
  color:#fff;
}

/* ============================================================
   4 — CONTACT US
   ============================================================ */
.sec-contact{
  position:relative;
  background:#fff url("assets/bg-marble.jpg") center/cover no-repeat;
  min-height:100vh;                          /* fallback navegadores viejos */
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(24px,min(3.6vw,5.15vh),49px) clamp(20px,4vw,55px);
}
/* La nav queda pegada arriba y el resto (logo -> boton) se centra en el hueco
   que sobre, de modo que la pagina se ve equilibrada en 16:9, 16:10 o 4:3. */
.sec-contact .nav,
.sec-contact .contact-cta{ margin-bottom:auto; }
.sec-contact .logo{ width:clamp(84px,min(9.44vw,13.5vh),129px); }
.sec-contact .hero__title--display{
  margin-top:clamp(8px,min(1vw,1.5vh),14px);
  font-size:clamp(30px,min(3.37vw,4.8vh),46px);
}
.contact-cards{
  margin-top:clamp(22px,min(3.6vw,5.15vh),49px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,365px));
  gap:clamp(12px,.44vw,6px) clamp(12px,.44vw,6px);
  justify-content:center;
  width:100%;
}
.contact-card{
  background:var(--chip);
  border-radius:20px;
  min-height:clamp(122px,min(11.1vw,16vh),152px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(16px,1.9vw,26px) clamp(14px,1.5vw,20px);
  font-family:var(--font-display);
  color:var(--grey-text);
  font-size:clamp(14px,1.3vw,17.67px);
  line-height:1.4;
}
.contact-card--address{ font-size:clamp(15px,1.56vw,21.33px); }
.contact-card strong{ font-weight:700; display:block; }
.contact-card a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(84,84,84,.35);
  font-weight:700;
  word-break:break-word;
}
.contact-card a:hover{ border-bottom-color:var(--grey-text); }
.contact-card .plain{ font-weight:400; }

.contact-cta{
  margin-top:clamp(20px,min(2.6vw,3.8vh),36px);
  font-size:clamp(14px,1.24vw,17px);
  padding:clamp(9px,.88vw,12px) clamp(20px,2vw,27px);
}

.serving{
  margin-top:clamp(22px,min(2.9vw,4.2vh),40px);
  font-family:var(--font-nav);
  font-weight:400;
  font-size:clamp(15px,1.47vw,20px);
  line-height:1.4;
  color:var(--chip);
  text-align:center;
  /* segun el alto de la ventana esta linea cae sobre la pared oscura o sobre
     el marmol claro de la foto: la sombra la mantiene legible en ambos casos */
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.9), 0 0 20px rgba(0,0,0,.75);
}

/* ============================================================
   5 — GET A QUOTE
   ============================================================ */
.sec-quote{ background:#fffffe; }

/* ---------- footer ---------- */
.site-footer{
  background:var(--ink);
  color:#cfcfcf;
  text-align:center;
  padding:clamp(26px,3vw,40px) 20px;
  font-family:var(--font-head);
  font-size:14px;
  line-height:1.7;
}
.site-footer img{ width:74px; margin:0 auto clamp(10px,1.2vw,16px); }
.site-footer a{ color:var(--gold-soft); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }
.site-footer .footer-links{ margin-top:8px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }


/* ============================================================
   responsive
   ============================================================ */
@media (max-width:900px){
  .why,
  .promise{
    grid-template-columns:minmax(0,1fr);
    gap:28px;
  }
  .why__photo,
  .promise__photo{ aspect-ratio:4 / 3; }
  .promise__photo{ order:-1; }
  .services{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero{ min-height:0; }
  .hero__inner{ padding-block:22px 26px; }
  .hero__arc{ top:-18%; height:118%; border-radius:22% / 42%; }
  .quote-btn--corner{
    position:static;
    margin-top:16px;
    align-self:center;
  }
  .embed-frame--reviews{ height:560px; }
  .embed-frame--gallery{ height:640px; }
  .sec-home{ padding-block:0 clamp(30px,6.5vh,54px); }
  .sec-contact{ padding-block:38px 46px; }
  .contact-cards{ grid-template-columns:minmax(0,420px); }
}

/* Hero a pantalla completa con la foto vertical (572x1280), SOLO en pantallas
   con forma de movil (relacion de aspecto <= 3/5). En una tableta en vertical
   (0,75) o en una ventana de escritorio estrechada la proporcion no da: la foto
   quedaria recortadisima por arriba y por abajo, asi que ahi se sigue usando la
   foto apaisada de siempre. */
@media (max-width:900px) and (max-aspect-ratio:3/5){
  .sec-home{
    background-image:url("assets/bg-marble-mobile.jpg");
    background-position:center center;
    background-size:cover;
  }
}

@media (max-width:640px){
  .nav{ gap:14px; flex-wrap:wrap; }
  .nav a{ min-width:0; font-size:14px; }
  .services{ grid-template-columns:minmax(0,1fr); }
  .service{ aspect-ratio:16 / 10; }
  .embed-frame--reviews{ height:660px; }
  .embed-frame--gallery{ height:420px; }
  .embed-frame--form{ height:1000px; }
  .home-title{ font-size:clamp(30px,8.6vw,42px); }
}