/* ==========================================================================
   Medrano Cleaning Company LLC — medranoclean.com
   Palette taken from the company logo:
     ink    #0A1440  (darkest script navy)
     navy   #12265C  (primary brand navy)
     royal  #1553A6  (royal blue swoosh)
     sky    #58A0D6  (light swoosh / sparkle blue)
   Coordinating colors:
     ice    #EAF2FA  (tint background)
     amber  #F2A63B  (CTA accent — warm counterpoint to the blues)
   ========================================================================== */

:root {
  --ink: #0A1440;
  --navy: #12265C;
  --royal: #1553A6;
  --sky: #58A0D6;
  --sky-soft: #A9CDE9;
  --ice: #EAF2FA;
  --paper: #FFFFFF;
  --amber: #F2A63B;
  --amber-deep: #C87F14;
  --text: #1C2740;
  --text-soft: #4A5875;
  --display: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", sans-serif;
  --body: "Public Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
}

/* English pages at the root, Spanish pages under /es/; the header EN/ES
   control links between them. */

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

a { color: var(--royal); }

p, li { text-wrap: pretty; }

.container {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--ice);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0;
  flex-wrap: wrap;
}

.wordmark {
  text-decoration: none;
  color: var(--ink);
  line-height: 1.05;
}

.wordmark img {
  height: 62px;
  width: auto;
}

@media (max-width: 480px) {
  .wordmark img { height: 52px; }
}

.wordmark .wm-name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
}

.wordmark .wm-sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--royal);
}

.site-nav { display: flex; align-items: center; gap: 1.1rem; }

.site-nav a {
  text-decoration: none;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { border-bottom-color: var(--sky); }

.site-nav a[aria-current="page"] { border-bottom-color: var(--amber); }

/* EN / ES toggle */
.lang-toggle {
  display: inline-flex;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  overflow: hidden;
}

.lang-toggle a {
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  background: var(--paper);
  color: var(--navy);
  text-decoration: none;
}

.lang-toggle a[aria-current="true"] {
  background: var(--navy);
  color: var(--paper);
}

.lang-toggle button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

/* ==========================================================================
   Hero — navy ground with the logo's sweep arc
   ========================================================================== */

.hero {
  position: relative;
  background: linear-gradient(160deg, var(--ink) 0%, var(--navy) 55%, #173672 100%);
  color: var(--paper);
  overflow: hidden;
  padding: 4rem 0 4.5rem;
}

.hero .sweep {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-inner { position: relative; max-width: 44rem; }

/* Hero logo — the image has a baked-in #102857 background (no transparency).
   The blurred halo in the same color melts its rectangle into the hero
   gradient, so it reads as artwork floating on navy at any size. Never place
   this image outside a navy .hero section. */
.hero-grid { position: relative; display: grid; gap: 3rem; align-items: center; }

.hero-logo {
  width: min(26rem, 82%);
  height: auto;
  justify-self: center;
  background: #102857;
  border-radius: 10px;
  box-shadow: 0 0 48px 32px #102857;
  margin-bottom: 2.2rem;
}

@media (min-width: 900px) {
  .hero-logo { margin-bottom: 0; }
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr 1fr; }
  .hero-logo { width: 100%; max-width: 30rem; }
}

.hero .eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sky);
  margin-bottom: 1rem;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5.5vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
}

.hero .lede {
  font-size: clamp(1.02rem, 2.5vw, 1.2rem);
  color: var(--sky-soft);
  max-width: 44rem;
  margin-bottom: 2rem;
}

.btn {
  display: inline-block;
  font-family: var(--body);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  padding: 0.85rem 1.9rem;
  cursor: pointer;
}

.btn-amber {
  background: var(--amber);
  color: var(--ink);
}

.btn-amber:hover { background: #F7B95E; }

.btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1.5px solid var(--sky);
  margin-left: 0.6rem;
}

.btn-ghost:hover { border-color: var(--paper); }

/* ==========================================================================
   Trust strip
   ========================================================================== */

.trust-strip {
  background: var(--royal);
  color: var(--paper);
  padding: 0.9rem 0;
}

.trust-strip ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2.2rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.trust-strip li::before {
  content: "✦";
  color: var(--sky-soft);
  margin-right: 0.45rem;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding: 3.6rem 0; }

.section-ice { background: var(--ice); }

.section-navy {
  background: linear-gradient(150deg, var(--navy), var(--ink));
  color: var(--paper);
}

.section-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.section-navy .section-title { color: var(--paper); }

/* Swoosh underline — the logo's arc, reused */
.swoosh {
  display: block;
  width: 150px;
  height: 12px;
  margin: 0.4rem 0 1.4rem;
}

.section-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--royal);
  margin-bottom: 0.4rem;
}

.section-navy .section-kicker { color: var(--sky); }

.section-intro {
  max-width: 50rem;
  color: var(--text-soft);
  margin-bottom: 2.2rem;
}

.section-navy .section-intro { color: var(--sky-soft); }

/* --- Pain points (Oranje-style opener) --- */

.pains {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-bottom: 1.6rem;
}

.pain {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(88, 160, 214, 0.35);
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
}

.pain h3 {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--paper);
  margin-bottom: 0.4rem;
}

.pain p { color: var(--sky-soft); font-size: 0.95rem; }

.pain-answer {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--paper);
  max-width: 52rem;
}

/* --- Card grids --- */

.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.card {
  background: var(--paper);
  border: 1px solid #D7E4F2;
  border-radius: 14px;
  padding: 1.4rem 1.4rem 1.5rem;
}

.card-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
  margin-bottom: 0.9rem;
}

.method-grid { display: grid; gap: 2.2rem; align-items: center; }

@media (min-width: 900px) {
  .method-grid { grid-template-columns: 1.15fr 1fr; }
}

.card .icon {
  width: 44px;
  height: 44px;
  margin-bottom: 0.8rem;
}

.card h3 {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.card p { font-size: 0.94rem; color: var(--text-soft); }

.card a { font-weight: 700; font-size: 0.92rem; }

/* --- How we clean bullets --- */

.method-list {
  list-style: none;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
  max-width: 44rem;
}

.method-list li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 1rem;
}

.method-list .tick {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
}

/* --- Service detail blocks (services page) --- */

/* Anchor targets land clear of the sticky header, with breathing room. */
[id] { scroll-margin-top: 7.5rem; }

.service-block {
  display: grid;
  gap: 1.6rem;
  padding: 2rem 0;
  border-bottom: 1px solid #D7E4F2;
}

.service-block:last-child { border-bottom: none; }

.service-block h3 {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.service-block p { color: var(--text-soft); max-width: 46rem; }

.service-block ul {
  margin-top: 0.7rem;
  padding-left: 1.2rem;
  color: var(--text-soft);
}

.service-block ul li { margin-bottom: 0.3rem; }

.service-photo {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #D7E4F2;
}

@media (min-width: 720px) {
  .service-block { grid-template-columns: 3fr 2fr; align-items: center; }
  .pains { grid-template-columns: repeat(3, 1fr); }
}
/* --- Why Medrano --- */

.why-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.why {
  border-left: 4px solid var(--amber);
  background: var(--paper);
  border-radius: 0 12px 12px 0;
  padding: 1.1rem 1.2rem;
}

.why h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.why p { font-size: 0.93rem; color: var(--text-soft); }

/* --- FAQ --- */

.faq { max-width: 48rem; }

.faq h3 {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
  margin: 1.4rem 0 0.35rem;
}

.faq p { color: var(--text-soft); }

/* ==========================================================================
   Quote section (every page)
   ========================================================================== */

.quote-section {
  background: linear-gradient(150deg, var(--ink), var(--navy) 70%);
  color: var(--paper);
  padding: 3.8rem 0;
  position: relative;
  overflow: hidden;
}

.quote-grid {
  display: grid;
  gap: 2.2rem;
  grid-template-columns: 1fr;
  position: relative;
}

@media (min-width: 800px) {
  .quote-grid { grid-template-columns: 2fr 3fr; }
}

.quote-info h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-bottom: 0.8rem;
}

.quote-info p { color: var(--sky-soft); margin-bottom: 1.4rem; max-width: 34rem; }

.contact-lines { list-style: none; }

.contact-lines li {
  margin-bottom: 0.7rem;
  font-size: 1.02rem;
  font-weight: 600;
}

.contact-lines .label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sky);
}

.contact-lines a { color: var(--paper); }

.quote-form {
  background: var(--paper);
  border-radius: 16px;
  padding: 1.6rem;
  color: var(--text);
}

.quote-form .form-row { margin-bottom: 0.95rem; }

.quote-form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.quote-form input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1.5px solid #C4D6EA;
  border-radius: 8px;
  background: var(--paper);
  color: var(--text);
}

.quote-form textarea { min-height: 6rem; resize: vertical; }

.quote-form .btn { width: 100%; text-align: center; }

.form-note { font-size: 0.8rem; color: var(--text-soft); margin-top: 0.6rem; }

.hidden-field { display: none; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--ink);
  color: var(--sky-soft);
  padding: 1.6rem 0 1.8rem;
  font-size: 0.88rem;
}

.site-footer .footer-name {
  font-family: var(--display);
  font-weight: 700;
  color: var(--paper);
  font-size: 1rem;
}

.site-footer a { color: var(--sky-soft); }

.site-footer p { margin-top: 0.2rem; }

/* ==========================================================================
   Motion — Oranje-style scroll reveals, entrance sequence, micro-interactions.
   All entrance/reveal states live inside the no-preference media query, so
   reduced-motion users (and no-JS visitors) always see the full page.
   ========================================================================== */

.site-header { transition: box-shadow 0.3s ease; }

.site-header.scrolled { box-shadow: 0 4px 18px rgba(10, 20, 64, 0.10); }

.btn { transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; }

.btn:hover { transform: translateY(-2px); }

.card, .why, .pain {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover, .why:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(10, 20, 64, 0.10);
}

.pain:hover { transform: translateY(-4px); }

.site-nav a { transition: border-bottom-color 0.2s ease; }

@media (prefers-reduced-motion: no-preference) {

  /* --- Hero entrance: content rises in, staggered --- */
  .hero-inner > * {
    opacity: 0;
    animation: rise-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
  .hero-inner > :nth-child(1) { animation-delay: 0.05s; }
  .hero-inner > :nth-child(2) { animation-delay: 0.18s; }
  .hero-inner > :nth-child(3) { animation-delay: 0.32s; }
  .hero-inner > :nth-child(4) { animation-delay: 0.46s; }
  .hero-inner > :nth-child(5) { animation-delay: 0.56s; }

  @keyframes rise-in {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }

  /* --- Hero sweep arcs draw themselves on load --- */
  .hero .sweep path[stroke] {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    animation: sweep-draw 1.7s ease-out forwards 0.15s;
  }
  .hero .sweep path[stroke] + path[stroke] { animation-delay: 0.5s; }

  @keyframes sweep-draw { to { stroke-dashoffset: 0; } }

  /* --- Sparkles twinkle quietly, forever ---
     (the arcs carry fill="none", so exclude them from the [fill] match) */
  .hero .sweep path[fill]:not([fill="none"]) {
    transform-box: fill-box;
    transform-origin: center;
    animation: twinkle 3.4s ease-in-out infinite;
  }
  /* path[fill] keeps these at the same specificity as the base twinkle rule
     above, so source order lets the per-star timing win. */
  .hero .sweep-stars path[fill]:nth-of-type(1) { animation-delay: 1.1s; animation-duration: 4.1s; }
  .hero .sweep-stars path[fill]:nth-of-type(2) { animation-delay: 2s; animation-duration: 3.8s; }
  .hero .sweep-stars path[fill]:nth-of-type(3) { animation-delay: 0.6s; animation-duration: 4.6s; }

  @keyframes twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.82); }
    50%      { opacity: 0.9; transform: scale(1.1); }
  }

  /* --- Scroll reveals (tagged by script.js) --- */
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--rd, 0s);
  }
  html.js [data-reveal="left"]  { transform: translateX(-34px); }
  html.js [data-reveal="right"] { transform: translateX(34px); }
  html.js [data-reveal].revealed { opacity: 1; transform: none; }

  /* --- Swoosh underline draws in when its section reveals --- */
  html.js .swoosh path {
    stroke-dasharray: 170;
    stroke-dashoffset: 170;
    transition: stroke-dashoffset 0.9s ease 0.3s;
  }
  html.js .swoosh.revealed path { stroke-dashoffset: 0; }
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 480px) {
  .site-nav { gap: 0.8rem; }
  .site-nav a { font-size: 0.88rem; }
  .btn-ghost { margin-left: 0; margin-top: 0.7rem; }
  .hero { padding: 3rem 0 3.4rem; }
}