/* ============================================================
   Elegance Layer — refined typography, colour & depth
   Loaded last so it gently overrides the base template.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --ink:        #16241c;   /* deep forest — headings   */
  --ink-soft:   #3f4b43;   /* body copy                */
  --brand:      #6fae2f;   /* refined brand green      */
  --brand-deep: #4f9d3f;   /* accent / eyebrows        */
  --brand-dark: #3c7d34;
  --surface:    #ffffff;
  --paper:      #f7f8f4;   /* warm off-white           */
  --line:       rgba(22, 36, 28, 0.08);
  --shadow-sm:  0 6px 18px -8px rgba(22, 36, 28, 0.18);
  --shadow-md:  0 22px 45px -24px rgba(22, 36, 28, 0.28);
  --shadow-lg:  0 34px 70px -30px rgba(22, 36, 28, 0.35);
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Typographic foundation ---------- */
body {
  font-family: 'Plus Jakarta Sans', 'Archivo', sans-serif !important;
  background-color: var(--paper);
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

p { color: var(--ink-soft); }

h1, h2, h3, h4, h5, h6 { color: var(--ink); }

/* Editorial serif for the display headings only */
.hero-text h1,
.heading h2,
.count-text h2,
.count-text span,
.package-top h2,
.new-laundry h2,
.professional > p:first-child {
  font-family: 'Fraunces', 'Archivo', serif !important;
  letter-spacing: -0.015em;
}

.hero-text h1 {
  font-weight: 500 !important;
  line-height: 1.05 !important;
}

.heading h2 { font-weight: 500 !important; line-height: 1.12; }

/* Eyebrow labels — quiet, spaced, refined accent */
.heading p,
.professional h4 + h6,
.refer-friend span {
  color: var(--brand-deep) !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  font-size: 13px;
  text-transform: uppercase;
}
.heading { width: min(720px, 88%); }

/* ---------- Buttons ---------- */
.sec-btn {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 30px -12px rgba(63, 125, 52, 0.55) !important;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), background 0.45s var(--ease) !important;
}
.sec-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -14px rgba(63, 125, 52, 0.6) !important;
}
.sec-btn.outline-btn {
  background: transparent !important;
  color: var(--brand-dark) !important;
  border: 1.5px solid rgba(63, 125, 52, 0.35) !important;
  box-shadow: none !important;
}
.sec-btn.outline-btn:hover {
  background: rgba(111, 174, 47, 0.08) !important;
  border-color: var(--brand-deep) !important;
}
.package-bottom .sec-btn {
  background: transparent !important;
  color: var(--brand-dark) !important;
  border: 1.5px solid rgba(63, 125, 52, 0.4) !important;
  box-shadow: none !important;
}
.package-bottom .sec-btn:hover {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-call-btn {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 26px -12px rgba(63, 125, 52, 0.55);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.header-call-btn:hover { transform: translateY(-2px); }
.header-contact a i,
.header-contact span i { color: var(--brand-deep); }

/* ---------- Hero ---------- */
.hero-section {
  background: linear-gradient(180deg, #f2f5ec 0%, var(--paper) 100%) !important;
}
.hero-img img {
  box-shadow: var(--shadow-lg);
}
.hero-text h4 {
  color: var(--ink-soft);
  font-weight: 400;
  line-height: 1.6;
}

/* ---------- Service cards ---------- */
.service {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  border-bottom-left-radius: 44px;
  padding-bottom: 34px;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.service:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}
.service > img {
  width: 100%;
  border-radius: 26px 26px 0 0 !important;
}
.service-text { padding: 0 26px; }
.service-text i {
  box-shadow: var(--shadow-sm);
  transition: transform 0.5s var(--ease);
}
.service:hover .service-text i { transform: translateY(-50px) scale(1.06); }
.service-text h4 { font-weight: 700; font-size: 24px; }
.service-text a h4 { transition: color 0.3s var(--ease); }

/* ---------- Package / pricing cards ---------- */
.package {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm) !important;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.package:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-md) !important;
}
.package-top h2 { font-weight: 600 !important; }

/* ---------- Work steps ---------- */
.work-stap-img i {
  box-shadow: var(--shadow-md);
  transition: transform 0.5s var(--ease);
}
.work-stap:hover .work-stap-img i { transform: translateY(-6px); }

/* ---------- Counters ---------- */
.count-text h2, .count-text span { color: var(--brand-deep) !important; }

/* ---------- Professional / about imagery ---------- */
.professional-img > img { box-shadow: var(--shadow-md); }
.list-style li { color: var(--ink-soft); }

/* ---------- Footer ---------- */
footer { background-color: #10231a; }

/* ---------- Global niceties ---------- */
a { transition: color 0.3s var(--ease); }
img { image-rendering: auto; }

::selection { background: rgba(111, 174, 47, 0.28); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Slimmer, on-brand scrollbar (WebKit) */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: rgba(63, 125, 52, 0.4);
  border-radius: 999px;
  border: 3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: rgba(63, 125, 52, 0.6); }

/* Gentle entrance for section headings (respects reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
  .heading { animation: eleganceFade 0.9s var(--ease) both; }
  @keyframes eleganceFade {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}