/* =========================================================
   WISE CLEANING SERVICES — Design tokens & base
   ========================================================= */
:root{
  --navy: #0A1F44;
  --navy-deep: #071530;
  --navy-light: #14315e;
  --gold: #C9A24B;
  --gold-light: #E4C77A;
  --gold-dim: #a9843a;
  --white: #FFFFFF;
  --offwhite: #F7F5EF;
  --ink: #16233d;
  --muted: #5c6579;
  --muted-light: rgba(255,255,255,.72);
  --line: #e7e2d6;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Petit Formal Script", cursive;

  --container: 1180px;
  --radius: 10px;
  --shadow-soft: 0 20px 50px -20px rgba(10,31,68,.25);
  --shadow-gold: 0 10px 30px -10px rgba(201,162,75,.55);

  /* A scattered gold-sparkle tile, tuned low-opacity so it reads as
     texture on solid navy backgrounds rather than competing with copy.
     Reused wherever a flat dark section wants the same night-sky motif
     as the hero's stars, without the cost of extra DOM elements. */
  --star-pattern: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%20viewBox='0%200%20240%20240'%3E%3Cpath%20d='M24,30%20L25.12,32.88%20L28,34%20L25.12,35.12%20L24,38%20L22.88,35.12%20L20,34%20L22.88,32.88%20Z'%20fill='%23E4C77A'%20fill-opacity='0.16'/%3E%3Cpath%20d='M78,15.5%20L78.7,17.3%20L80.5,18%20L78.7,18.7%20L78,20.5%20L77.3,18.7%20L75.5,18%20L77.3,17.3%20Z'%20fill='%23E4C77A'%20fill-opacity='0.11'/%3E%3Cpath%20d='M132,41%20L133.4,44.6%20L137,46%20L133.4,47.4%20L132,51%20L130.6,47.4%20L127,46%20L130.6,44.6%20Z'%20fill='%23E4C77A'%20fill-opacity='0.14'/%3E%3Cpath%20d='M196,23%20L196.84,25.16%20L199,26%20L196.84,26.84%20L196,29%20L195.16,26.84%20L193,26%20L195.16,25.16%20Z'%20fill='%23E4C77A'%20fill-opacity='0.19'/%3E%3Cpath%20d='M40,93%20L40.84,95.16%20L43,96%20L40.84,96.84%20L40,99%20L39.16,96.84%20L37,96%20L39.16,95.16%20Z'%20fill='%23E4C77A'%20fill-opacity='0.1'/%3E%3Cpath%20d='M114,102%20L115.68,106.32%20L120,108%20L115.68,109.68%20L114,114%20L112.32,109.68%20L108,108%20L112.32,106.32%20Z'%20fill='%23E4C77A'%20fill-opacity='0.13'/%3E%3Cpath%20d='M176,89.5%20L176.7,91.3%20L178.5,92%20L176.7,92.7%20L176,94.5%20L175.3,92.7%20L173.5,92%20L175.3,91.3%20Z'%20fill='%23E4C77A'%20fill-opacity='0.16'/%3E%3Cpath%20d='M28,152%20L29.12,154.88%20L32,156%20L29.12,157.12%20L28,160%20L26.88,157.12%20L24,156%20L26.88,154.88%20Z'%20fill='%23E4C77A'%20fill-opacity='0.14'/%3E%3Cpath%20d='M96,173%20L96.84,175.16%20L99,176%20L96.84,176.84%20L96,179%20L95.16,176.84%20L93,176%20L95.16,175.16%20Z'%20fill='%23E4C77A'%20fill-opacity='0.11'/%3E%3Cpath%20d='M156,191%20L157.4,194.6%20L161,196%20L157.4,197.4%20L156,201%20L154.6,197.4%20L151,196%20L154.6,194.6%20Z'%20fill='%23E4C77A'%20fill-opacity='0.15'/%3E%3Cpath%20d='M214,155%20L214.84,157.16%20L217,158%20L214.84,158.84%20L214,161%20L213.16,158.84%20L211,158%20L213.16,157.16%20Z'%20fill='%23E4C77A'%20fill-opacity='0.09'/%3E%3Cpath%20d='M64,213.5%20L64.7,215.3%20L66.5,216%20L64.7,216.7%20L64,218.5%20L63.3,216.7%20L61.5,216%20L63.3,215.3%20Z'%20fill='%23E4C77A'%20fill-opacity='0.13'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  font-weight:400;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family: var(--font-display); font-weight:600; margin:0; color: var(--navy); }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }

.container{
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: 24px;
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--gold); color:var(--navy);
  padding:10px 16px; z-index:200; font-weight:600;
}
.skip-link:focus{ left:16px; top:16px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count:1 !important; transition-duration: 0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-body); font-weight:500; font-size:.95rem;
  padding: 15px 30px; border-radius: 999px; border:1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-gold{ background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--navy); box-shadow: var(--shadow-gold); }
.btn-gold:hover{ box-shadow: 0 16px 36px -10px rgba(201,162,75,.7); }
.btn-outline-light{ border-color: rgba(255,255,255,.5); color: var(--white); }
.btn-outline-light:hover{ background: rgba(255,255,255,.1); border-color: var(--white); }
.btn-whatsapp{ background: #25D366; color: var(--white); }
.btn-whatsapp:hover{ background: #1FBE5C; }
.btn-sm{ padding: 10px 18px; font-size:.85rem; }
.btn-block{ width:100%; margin-top: 6px; position:relative; }
.icon-wa{ width:18px; height:18px; fill: currentColor; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(10,31,68,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,162,75,.25);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ border-radius:50%; }
.brand-word{
  font-family: var(--font-display); color: var(--white);
  font-size: 1.35rem; font-weight:700; letter-spacing:.03em; line-height:1;
  display:flex; flex-direction:column;
}
.brand-sub{
  font-family: var(--font-body); font-size:.6rem; letter-spacing:.22em;
  color: var(--gold-light); font-weight:600; margin-top:4px;
}
.main-nav{ display:flex; gap:36px; }
.main-nav a{
  color: rgba(255,255,255,.85); font-size:.92rem; font-weight:500;
  position:relative; padding: 6px 0;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--gold); transition: width .3s ease;
}
.main-nav a:hover::after{ width:100%; }
.header-actions{ display:flex; align-items:center; gap:14px; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; background:transparent; border:none;
}
.nav-toggle span{ display:block; width:22px; height:2px; background: var(--white); margin-inline:auto; transition: transform .3s ease, opacity .3s ease; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Eyebrow / section titles ---------- */
.eyebrow{
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  color: var(--gold-dim); font-weight:700; margin-bottom:14px;
}
.eyebrow-light{ color: var(--gold-light); }
.section-title{ font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 14px; }
.section-title-light{ color: var(--white); }
.script-line{
  font-family: var(--font-script); font-size: 1.9rem; color: var(--gold-light);
  margin-bottom: 30px;
}
.section{ padding: 96px 0; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background: radial-gradient(ellipse at 20% -10%, var(--navy-light), var(--navy) 55%, var(--navy-deep));
  color: var(--white);
  padding: 150px 0 190px;
  overflow:hidden;
  isolation:isolate;
}
/* Service-photo slideshow, full-bleed, sitting behind everything else in
   the hero. Slides are cross-faded and Ken-Burns-zoomed via GSAP in main.js;
   .is-active is only the no-JS/first-paint fallback. */
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slide{ position:absolute; inset:0; opacity:0; }
.hero-slide.is-active{ opacity:1; }
.hero-slide img{
  width:100%; height:100%; object-fit:cover; object-position: center; display:block;
  transform-origin:center center;
}

/* Left-to-right reveal: solid navy over the text zone, easing away to
   transparent on the right so the photo shows through unobstructed. */
.hero-gradient{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(90deg,
    var(--navy) 0%,
    var(--navy) 34%,
    rgba(10,31,68,.88) 48%,
    rgba(10,31,68,.55) 65%,
    rgba(10,31,68,.1) 85%,
    rgba(10,31,68,0) 100%);
}

.hero-sky{ position:absolute; inset:0; z-index:2; }
.star{
  position:absolute; width:6px; height:6px; background: var(--gold-light);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity:.7;
}
.s1{ top:14%; left:8%; width:10px; height:10px; }
.s2{ top:24%; left:88%; width:7px; height:7px; }
.s3{ top:60%; left:4%; width:8px; height:8px; }
.s4{ top:12%; left:48%; width:5px; height:5px; }
.s5{ top:70%; left:92%; width:9px; height:9px; }
.s6{ top:40%; left:70%; width:6px; height:6px; }

/* .hero-inner keeps the standard .container centering (max-width:1180,
   margin-inline:auto) so its left edge always lines up with the header
   logo, at any viewport width. The narrower reading column lives on the
   child .hero-copy instead, which has no auto margin of its own — so it
   stays flush-left inside the already-centered container rather than
   re-centering itself within it. */
.hero-inner{ position:relative; z-index:3; }
.hero-copy{ max-width: 760px; }
.hero-title{
  color: var(--white); font-size: clamp(2.6rem, 6vw, 4.4rem); line-height:1.05;
  margin-bottom: 26px;
}
.hero-sub{ font-size: 1.15rem; line-height:1.65; color: var(--muted-light); max-width:520px; margin-bottom:40px; }
.hero-ctas{ display:flex; gap:18px; flex-wrap:wrap; }

.skyline-divider{ position:absolute; left:0; right:0; bottom:-2px; line-height:0; z-index:2; }
.skyline-divider svg{ width:100%; height:90px; display:block; }
.skyline-divider path{ fill: var(--white); }

/* ---------- Services ---------- */
.services{ background: var(--white); }
.services-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 48px;
}
.service-card{
  overflow:hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  background: var(--offwhite);
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: transparent; }
.service-media{ aspect-ratio: 4 / 3; overflow:hidden; background: var(--line); }
.service-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s ease;
}
.service-card:hover .service-media img{ transform: scale(1.05); }
.service-body{ padding: 26px 28px 30px; }
.service-card h3{ font-size:1.15rem; margin-bottom:10px; }
.service-card p{ color: var(--muted); font-size:.95rem; line-height:1.6; }
.service-cta{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  font-weight:500; font-size:.88rem; color: var(--navy);
  border: 1.5px solid var(--gold); border-radius:999px; padding: 11px 22px;
  transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.service-cta .icon-wa{ width:15px; height:15px; fill:currentColor; flex-shrink:0; }
.service-cta:hover{
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  transform: translateY(-2px); box-shadow: var(--shadow-gold);
}

/* ---------- About ---------- */
.about{ background: var(--white); }
.about-grid{ display:grid; grid-template-columns: .85fr 1fr; gap:64px; align-items:center; }
.about-media{
  border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-soft);
}
.about-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.about-copy .eyebrow{ margin-bottom:14px; }
.about-copy .section-title{ margin-bottom:20px; }
.about-lede{ font-size:1.1rem; color: var(--navy); font-weight:500; line-height:1.6; margin-bottom:18px; }
.about-copy p{ color: var(--muted); font-size:1rem; line-height:1.75; margin-bottom:16px; }
.about-copy p:last-of-type{ margin-bottom:0; }

.about-langs{
  display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0;
}
.about-langs li{
  padding:7px 16px; border:1px solid var(--line); border-radius:999px;
  font-size:.8rem; font-weight:600; letter-spacing:.03em; color: var(--gold-dim);
  background: var(--offwhite);
}

.about-quote{
  margin:30px 0 0; padding-top:26px; border-top:1px solid var(--line);
  font-family: var(--font-display); font-weight:600;
  font-size:1.3rem; line-height:1.5; color: var(--navy);
}
.about-quote-mark{
  font-family: var(--font-display); font-size:2.6rem; line-height:0;
  color: var(--gold); display:block; margin-bottom:6px;
}

/* ---------- Why Wise ---------- */
/* overflow-x:hidden guards against the rotating seal ring's diagonal
   bounding box (it briefly exceeds its own box at 45°) ever widening the
   page scroll area — the ring stays visually unclipped, just contained. */
.why-wise{
  background-image: var(--star-pattern), linear-gradient(160deg, var(--navy), var(--navy-deep));
  background-repeat: repeat, no-repeat;
  background-size: 240px 240px, cover;
  color: var(--white); overflow-x: hidden;
}
.why-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap: 72px; align-items:center; }

/* Credentials read as a spec sheet, not a template icon list: a single
   consistent checkmark plus a hairline rule between rows for editorial
   rhythm, instead of five repeated icon-in-a-circle badges. */
.credentials-list{ display:flex; flex-direction:column; margin-top:14px; }
.credentials-list li{
  display:flex; align-items:center; gap:18px;
  padding: 18px 0; border-bottom: 1px solid rgba(201,162,75,.18);
  font-size:1.08rem; font-weight:500; letter-spacing:.01em;
}
.credentials-list li:last-child{ border-bottom:none; }
.credential-mark{ width:22px; height:22px; min-width:22px; color: var(--gold-light); }

/* The seal: the brand mark itself, ringed by a slowly orbiting halo of
   gold stars echoing the hero's twinkle motif. Small continuous motion
   gives the section a focal point instead of a static floating circle. */
.why-seal{ display:flex; flex-direction:column; align-items:center; }
.seal{ position:relative; width:300px; height:300px; }
.seal-ring{
  position:absolute; inset:-34px; border-radius:50%;
  animation: seal-spin 50s linear infinite;
}
.seal-star{
  position:absolute; top:50%; left:50%; width:16px; height:16px; margin:-8px;
  background: var(--gold-light);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity:.85;
}
.seal-star:nth-child(1){ transform: rotate(0deg) translate(0, -184px) rotate(0deg); }
.seal-star:nth-child(2){ transform: rotate(30deg) translate(0, -184px) rotate(-30deg) scale(.7); }
.seal-star:nth-child(3){ transform: rotate(60deg) translate(0, -184px) rotate(-60deg); }
.seal-star:nth-child(4){ transform: rotate(90deg) translate(0, -184px) rotate(-90deg) scale(.7); }
.seal-star:nth-child(5){ transform: rotate(120deg) translate(0, -184px) rotate(-120deg); }
.seal-star:nth-child(6){ transform: rotate(150deg) translate(0, -184px) rotate(-150deg) scale(.7); }
.seal-star:nth-child(7){ transform: rotate(180deg) translate(0, -184px) rotate(-180deg); }
.seal-star:nth-child(8){ transform: rotate(210deg) translate(0, -184px) rotate(-210deg) scale(.7); }
.seal-star:nth-child(9){ transform: rotate(240deg) translate(0, -184px) rotate(-240deg); }
.seal-star:nth-child(10){ transform: rotate(270deg) translate(0, -184px) rotate(-270deg) scale(.7); }
.seal-star:nth-child(11){ transform: rotate(300deg) translate(0, -184px) rotate(-300deg); }
.seal-star:nth-child(12){ transform: rotate(330deg) translate(0, -184px) rotate(-330deg) scale(.7); }
@keyframes seal-spin{ to{ transform: rotate(360deg); } }

.seal-core{
  position:relative; z-index:1; width:100%; height:100%; border-radius:50%;
  overflow:hidden; box-shadow: var(--shadow-gold);
}
.seal-core img{ width:100%; height:100%; object-fit:cover; display:block; }

.why-ctas{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }

/* ---------- Service area ---------- */
.service-area{ background: var(--offwhite); }
.area-copy-col{ max-width:640px; margin-inline:auto; text-align:center; }
.area-copy{ color: var(--muted); font-size:1.05rem; margin-top:14px; line-height:1.7; }

.area-maps{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:28px;
  margin-top:56px;
}
.area-map-label{
  font-size:.85rem; font-weight:600; color: var(--navy); margin-bottom:12px;
  text-align:center;
}
.area-map-frame{
  position:relative; aspect-ratio: 4 / 3; border-radius: var(--radius);
  overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-soft);
}
.area-map-frame iframe{
  width:100%; height:100%; border:0; display:block;
  filter: grayscale(35%) sepia(8%) saturate(.9) contrast(1.02);
}

/* ---------- Contact ---------- */
.contact{ background: var(--white); }
.contact .container > .eyebrow, .contact .container > .section-title, .contact-sub{ text-align:center; }
.contact .container > .eyebrow{ display:block; }
.section-title{ text-align:left; }
.contact .section-title{ text-align:center; }
.contact-sub{ color: var(--muted); margin: 0 auto 48px; max-width: 460px; }

.contact-panel{
  max-width: 720px; margin-inline:auto; background: var(--offwhite);
  border: 1px solid var(--line); border-radius: 16px; padding: 40px; box-shadow: var(--shadow-soft);
}
.form-tabs{ display:flex; gap:8px; margin-bottom:30px; background: var(--white); padding:6px; border-radius:999px; border:1px solid var(--line); }
.form-tab{
  flex:1; padding:12px 16px; border:none; background:transparent; border-radius:999px;
  font-weight:500; font-size:.9rem; color: var(--muted); transition: background .25s ease, color .25s ease;
}
.form-tab.is-active{ background: var(--navy); color: var(--white); }

.contact-form .field{ margin-bottom:20px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field label{ display:block; font-size:.85rem; font-weight:600; color: var(--navy); margin-bottom:8px; }
.optional{ font-weight:400; color: var(--muted); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field input[type="file"], .field select, .field textarea{
  width:100%; padding:13px 16px; border:1px solid var(--line); border-radius:8px;
  font-family: var(--font-body); font-size:.95rem; background: var(--white); color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.field textarea{ resize: vertical; min-height:96px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,75,.2);
}
.field input.has-error, .field select.has-error, .field textarea.has-error{ border-color:#c0392b; }
.field-error{ display:block; min-height:18px; color:#c0392b; font-size:.8rem; margin-top:6px; }
.field-hint{ display:block; font-size:.78rem; color: var(--muted); margin-top:6px; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }

.form-feedback{
  padding:14px 18px; border-radius:8px; margin-bottom:24px; font-size:.92rem; font-weight:500;
}
.form-feedback.is-success{ background:#eaf6ec; color:#1e6b34; border:1px solid #b9e2c1; }
.form-feedback.is-error{ background:#fbeaea; color:#a33; border:1px solid #f0c4c4; }

.btn-spinner{
  display:none; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(10,31,68,.3); border-top-color: var(--navy);
  animation: spin .7s linear infinite; margin-left:4px;
}
.btn-block.is-loading .btn-spinner{ display:inline-block; }
.btn-block.is-loading .btn-label{ opacity:.7; }
.btn-block.is-loading{ pointer-events:none; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* ---------- Footer ---------- */
.site-footer{
  background-color: var(--navy-deep);
  background-image: var(--star-pattern);
  background-repeat: repeat;
  background-size: 240px 240px;
  color: rgba(255,255,255,.75); padding: 48px 0;
}
.footer-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.footer-brand{ display:flex; align-items:center; gap:12px; font-family: var(--font-display); font-weight:700; color: var(--white); font-size:1.05rem; }
.footer-brand img{ border-radius:50%; }
.footer-contact{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-contact a:hover{ color: var(--gold-light); }
.footer-social{ display:flex; gap:12px; }
.social-icon{
  display:flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:50%; border:1px solid rgba(201,162,75,.4); color: var(--gold-light);
  transition: background .25s ease;
}
.social-icon svg{ width:16px; height:16px; }
.social-icon:hover{ background: rgba(201,162,75,.15); }
.footer-copy{ width:100%; text-align:center; font-size:.8rem; padding-top:24px; margin-top:8px; border-top:1px solid rgba(255,255,255,.08); }
.footer-credit{ width:100%; text-align:center; font-size:.78rem; margin-top:10px; }
.footer-credit a{ color: rgba(255,255,255,.55); transition: color .25s ease; }
.footer-credit a:hover{ color: rgba(255,255,255,.85); }
.footer-credit-brand{ font-weight:700; color:#22e5a0; }

/* ---------- Floating WhatsApp button ---------- */
.wa-fab{
  position:fixed; right:24px; bottom:24px; z-index:150;
  width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 30px -8px rgba(0,0,0,.4);
  transition: transform .25s ease;
}
.wa-fab svg{ width:28px; height:28px; fill: currentColor; }
.wa-fab:hover{ transform: scale(1.08); }

/* ---------- Reveal animation baseline (GSAP controls final state) ---------- */
.reveal{ opacity:0; transform: translateY(24px); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){
  .why-grid{ grid-template-columns:1fr; gap:48px; }
  .why-seal{ order:-1; }
}

@media (max-width: 760px){
  .main-nav{
    position:absolute; top:76px; left:0; right:0; background: var(--navy);
    flex-direction:column; gap:0; max-height:0; overflow:hidden;
    transition: max-height .35s ease; border-top: 1px solid rgba(201,162,75,.2);
  }
  .main-nav.is-open{ max-height:260px; }
  .main-nav a{ padding: 16px 24px; border-bottom:1px solid rgba(255,255,255,.06); }
  .nav-toggle{ display:flex; }
  .header-actions .btn-whatsapp span{ display:none; }
  .header-actions .btn-whatsapp{ padding:10px; }

  /* Mobile hero: content sits up top on solid navy, then a fixed-height
     photo band is revealed at the bottom (top-to-bottom fade instead of
     the desktop's left-to-right reveal). The gradient box's bottom edge
     sits 100px above the hero's bottom edge — 140px inside the 240px
     photo band — so the fade dims part of the photo instead of finishing
     right before it.

     The gradient itself runs bottom-to-top (0deg) with px stops instead
     of %, anchored to the box's own bottom edge. That edge is always
     140px below the image's top edge (both are offsets from the hero's
     bottom, so the 140px gap is constant) — so "opaque by 140px" always
     lands exactly at the top of the photo, staying solid through the
     entire text zone above it, regardless of how tall that text makes
     the hero overall. Percentage stops couldn't guarantee that: the
     opaque-to-fade transition would drift depending on total hero height. */
  .hero{ padding: 100px 0 264px; text-align:left; }
  .hero-media{ top:auto; bottom:0; height:240px; }
  .hero-media img{ object-position: center 40%; }
  .hero-gradient{
    bottom:100px;
    background: linear-gradient(0deg,
      rgba(10,31,68,0) 0px,
      rgba(10,31,68,.4) 45px,
      rgba(10,31,68,.8) 95px,
      var(--navy) 140px,
      var(--navy) 100%);
  }
  .skyline-divider svg{ height:36px; }
  .services-grid{ grid-template-columns: 1fr; }

  /* .section-title defaults to text-align:left globally, which wins over
     an ancestor's text-align:center (it's an explicit declaration, not
     inherited) — so any section wanting a centered heading on mobile
     needs to say so on the heading itself, not just its container. */
  .why-copy{ text-align:center; }
  .why-copy .section-title{ text-align:center; }
  .credentials-list li{ justify-content:center; }
  .why-ctas{ justify-content:center; }

  .area-copy-col .section-title{ text-align:center; }

  .area-maps{ grid-template-columns: 1fr; gap:24px; }
  .about-grid{ grid-template-columns: 1fr; gap:36px; }
  .about-media{ max-width:360px; margin-inline:auto; }
  .field-row{ grid-template-columns:1fr; }
  .contact-panel{ padding: 28px 20px; }
  .section{ padding: 72px 0; }
  /* align-items:center is the piece text-align:center alone can't do:
     footer-brand/footer-contact are themselves flex rows, so without it
     they stay full-width and left-align their own content regardless of
     the parent's text-align. justify-content:center on footer-contact
     also centers it if the phone/email pair wraps to two lines. */
  .footer-inner{ flex-direction:column; text-align:center; justify-content:center; align-items:center; }
  .footer-contact{ justify-content:center; }
  /* Extra bottom room so the fixed WhatsApp button never sits over the
     copyright/credit lines at the very bottom of the page. */
  .site-footer{ padding-bottom: 104px; }
}