/* =======================================================
   SAGE THEME — Site-wide tokens, components & utilities
   ======================================================= */

/* ---- Brand & base tokens (LIGHT) ---- */
:root{
  /* Sage palette (choose shades that match your reference image) */
  --brand-sage:       #8FAA93;  /* primary sage (light) */
  --brand-sage-deep:  #6F8978;  /* deeper sage for contrast */
  --brand-sage-ink:   #50665A;  /* ink-tinted sage for outlines */

  /* Map legacy names so older CSS keeps working */
  --brand-indigo: var(--brand-sage);
  --brand-rose:   var(--brand-sage-deep);
  --brand-saffron: var(--brand-sage);

  /* Surfaces & text (light) */
  --bg:        #ffffff;
  --bg-soft:   #f6f8f7;            /* soft paper white with tiny green */
  --text:      #0f172a;            /* slate-900 */
  --text-muted:#6b7280;            /* gray-500/600 */
  --border:    rgba(15,23,42,.08);

  /* Glass & elevation */
  --glass-bg:      rgba(255,255,255,.60);
  --glass-border:  rgba(15,23,42,.10);
  --shadow-soft:   0 20px 50px rgba(0,0,0,.08);
  --shadow-glow:   0 0 30px rgba(143,170,147,.20);

  /* Gradients (sage → deep sage) */
  --grad-a: linear-gradient(135deg, var(--brand-sage) 0%, var(--brand-sage-deep) 100%);
  --grad-b: linear-gradient(135deg, #9bd3a7 0%, var(--brand-sage) 100%);

  /* Generic aliases some templates use */
  --primary: var(--brand-sage);
  --accent:  var(--brand-sage-deep);
}

/* ---- Brand & base tokens (DARK) ---- */
.dark{
  --bg:        #0f172a;   /* deep slate */
  --bg-soft:   #111827;   /* slate-900 */
  --text:      #e5e7eb;   /* slate-200 */
  --text-muted:#a7b0bd;   /* softened */
  --border:    rgba(255,255,255,.12);

  --glass-bg:     rgba(17,24,39,.70);
  --glass-border: rgba(255,255,255,.12);
  --shadow-soft:  0 24px 60px rgba(0,0,0,.42);

  /* Slightly punchier gradient for dark */
  --grad-a: linear-gradient(135deg, #7ea58b 0%, #597466 100%);
}

/* =======================================================
   Base layout & primitives
   ======================================================= */

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1400px 800px at -10% 0%, color-mix(in oklab, var(--brand-sage) 12%, transparent), transparent 60%),
    radial-gradient(1200px 600px at 110% 0%, color-mix(in oklab, var(--brand-sage-deep) 10%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-soft) 60%, color-mix(in oklab, var(--bg-soft) 90%, var(--bg)));
  min-height:100vh;
  overflow-x:hidden;
}

.container{ max-width:1200px; margin-inline:auto; padding-inline:1rem; }
@media(min-width:640px){ .container{ padding-inline:1.5rem; } }
@media(min-width:1024px){ .container{ padding-inline:2rem; } }

.title-font{ font-family:'Playfair Display', serif; font-weight:600; letter-spacing:-.02em; }

/* Primitives */
.glass{ background:var(--glass-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); }
.bordered{ border-color:var(--border) !important; }
.text-muted{ color:var(--text-muted); }
.surface-2{ background:color-mix(in oklab, var(--glass-bg) 60%, transparent); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.25rem; border-radius:12px; font-weight:600; font-size:.95rem;
  transition:all .25s cubic-bezier(.2,.8,.2,1); text-decoration:none; cursor:pointer; border:0; position:relative; overflow:hidden;
}
.btn::before{ content:''; position:absolute; inset:0; left:-120%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transition:left .45s; }
.btn:hover::before{ left:120%; }
.btn-primary{ background:var(--grad-a); color:#fff; box-shadow:var(--shadow-glow); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 0 40px rgba(143,170,147,.28); }
.btn-ghost{ background:transparent; color:var(--brand-sage); border:1px solid var(--glass-border); }
.btn-ghost:hover{ background:color-mix(in oklab, var(--glass-bg) 70%, transparent); transform:translateY(-1px); }
.dark .btn-ghost{ color:#cfe0d4; }

/* Cards & chips */
.card{
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:20px; padding:24px; transition:all .35s cubic-bezier(.175,.885,.32,1.275); position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:color-mix(in oklab, var(--brand-sage) 30%, var(--glass-border)); }
.chip{ display:inline-flex; gap:.5rem; align-items:center; border-radius:999px; padding:.45rem .9rem; background:var(--glass-bg); border:1px solid var(--glass-border); font-size:.9rem; }
.gradient-text{ background:var(--grad-a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.price-badge{ background:var(--grad-a); color:#fff; font-weight:700; padding:.35rem .75rem; border-radius:999px; font-size:.9rem; }

/* Animations (respect reduced motion) */
@media (prefers-reduced-motion: reduce) { *{ animation:none!important; transition:none!important; } }
@keyframes float{ 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-10px)} }
.floating{ animation:float 6s ease-in-out infinite; }
.fade-in{ opacity:0; transform:translateY(18px); animation:fadeIn .7s ease-out forwards; }
@keyframes fadeIn{ to{ opacity:1; transform:translateY(0);} }

/* =======================================================
   NAV: logo sizing & wordmark
   ======================================================= */
.brand-logo{
  display:block;
  width:48px; height:48px;        /* bigger, per request */
  border-radius:10px;
  object-fit:contain;
  box-shadow:0 4px 14px rgba(2,6,23,.12);
}
@media (max-width:640px){
  .brand-logo{ width:40px; height:40px; }
}
.dark .brand-logo{ box-shadow:0 6px 18px rgba(0,0,0,.55); }

.brand-logo--sm{ width:36px; height:36px; border-radius:8px; }
.brand-wordmark{ font-weight:900; letter-spacing:-.02em; line-height:1; white-space:nowrap; color:var(--brand-sage); }

/* =======================================================
   Services cards / grids
   ======================================================= */
.svc-grid, .grid-slim{
  display:grid; gap:14px; grid-template-columns:repeat(1, minmax(0,1fr));
}
@media (min-width:520px){ .svc-grid, .grid-slim{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:920px){ .svc-grid, .grid-slim{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

.compact .svc-card{ padding:12px; }
.compact .svc-card h3{ font-size:1rem; margin-bottom:.25rem; }
.compact .svc-card .svc-meta{ font-size:.85rem; }

.svc-card{
  position:relative; display:flex; flex-direction:column; gap:.65rem;
  border-radius:16px; background:#fff; border:1px solid #e5e7eb; padding:16px;
  box-shadow:0 2px 6px rgba(2,6,23,.04), 0 10px 30px rgba(2,6,23,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dark .svc-card{
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-color: color-mix(in oklab, var(--border) 80%, transparent);
  box-shadow: 0 2px 6px rgba(0,0,0,.20), 0 14px 34px rgba(0,0,0,.30);
}
.svc-card:hover{
  transform:translateY(-2px);
  border-color: color-mix(in oklab, var(--brand-sage) 28%, #e5e7eb);
  box-shadow:0 8px 24px rgba(2,6,23,.10), 0 18px 42px rgba(2,6,23,.12);
}

.svc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.svc-title{ font-weight:650; line-height:1.25; font-size:1.05rem; }
.svc-price{
  background: var(--grad-a); color:#fff; font-weight:700; border-radius:999px;
  padding:.35rem .7rem; font-size:.92rem; white-space:nowrap; box-shadow:0 6px 16px rgba(96,122,102,.25);
}
.svc-meta{ color:var(--text-muted); font-size:.92rem; display:flex; flex-wrap:wrap; gap:.5rem .75rem; }
.svc-desc{ color:var(--text-muted); font-size:.95rem; line-height:1.5; margin-top:.15rem; }
.svc-cta{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.75rem; }

/* Focus */
:where(a, button).btn:focus-visible,
.svc-card:focus-within{ outline:3px solid color-mix(in oklab, var(--brand-sage) 45%, #9fc2a2); outline-offset:2px; }

/* =======================================================
   Accordion (dark readable)
   ======================================================= */
.accordion summary{ background: rgba(255,255,255,.88); color:#0f172a; }
.accordion summary:hover{ background: rgba(248,250,252,.95); }
.accordion[open] summary{ background: rgba(248,250,252,.98); }
.accordion summary *, .accordion summary .chev{ color: inherit !important; }

.dark .accordion summary{ background: rgba(18,22,29,.92); color:#F1F5F9; }
.dark .accordion summary:hover{ background: rgba(26,32,40,.92); }
.dark .accordion[open] summary{ background: rgba(22,27,36,.95); }

/* =======================================================
   Popular Services (theme-aware)
   ======================================================= */

:root{
  --home-brd: rgba(2,6,23,.12);
  --home-bg: color-mix(in oklab, #ffffff 96%, transparent);
  --home-muted: #6b7280;

  --pop-brd: var(--home-brd);
  --pop-bg: var(--home-bg);
  --pop-muted: var(--home-muted);

  --wash-a: color-mix(in oklab, var(--brand-sage) 10%, transparent);
  --wash-b: color-mix(in oklab, var(--brand-sage-deep) 10%, transparent);
}
.dark{
  --home-brd: rgba(148,163,184,.28);
  --home-bg: color-mix(in oklab, #0f172a 80%, #ffffff 20%);
  --home-muted: #cbd5e1;

  --pop-brd: var(--home-brd);
  --pop-bg: color-mix(in oklab, #0f172a 78%, #ffffff 22%);

  --wash-a: color-mix(in oklab, var(--brand-sage) 16%, transparent);
  --wash-b: color-mix(in oklab, var(--brand-sage-deep) 14%, transparent);
}

.section-box{
  border:1px solid var(--home-brd);
  border-radius:20px;
  background:var(--home-bg);
  box-shadow:0 2px 6px rgba(2,6,23,.05), 0 14px 32px rgba(2,6,23,.08);
}
.dark .section-box{
  box-shadow:0 2px 8px rgba(0,0,0,.32), 0 18px 44px rgba(0,0,0,.42);
}

.popular-card{
  position:relative;
  border:1px solid var(--pop-brd);
  border-radius:18px;
  padding:18px;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--wash-a), transparent 60%),
    radial-gradient(140% 120% at 100% 0%, var(--wash-b), transparent 55%),
    var(--pop-bg);
  box-shadow:0 2px 6px rgba(2,6,23,.05), 0 14px 32px rgba(2,6,23,.08);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.dark .popular-card{
  box-shadow:0 2px 10px rgba(0,0,0,.34), 0 20px 48px rgba(0,0,0,.46);
}
.popular-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklab, var(--brand-sage) 24%, var(--pop-brd));
  box-shadow:0 8px 24px rgba(2,6,23,.10), 0 20px 46px rgba(2,6,23,.12);
}
.popular-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.45rem; }
.popular-title{ font-weight:800; font-size:1.08rem; line-height:1.25; }
.popular-meta{ color:var(--pop-muted); font-size:.92rem; }

.popular-price{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.42rem .76rem; border-radius:999px;
  font-weight:900; font-size:.9rem; letter-spacing:.01em;
  background: var(--grad-a);
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25);
  box-shadow:0 6px 16px rgba(80,102,90,.25);
  white-space:nowrap; border:1px solid rgba(255,255,255,.18);
}

/* Highlights row inside CTA */
.hl-item{ transition: background-color .2s ease, box-shadow .2s ease; }
.hl-item:hover{ background: rgba(148,163,184,.10); box-shadow: 0 8px 22px rgba(2,6,23,.10); }

/* =======================================================
   Glossy background helpers
   ======================================================= */

.bg-gloss{
  position:relative; isolation:isolate;
  background:
    radial-gradient(1200px 600px at -10% -10%, color-mix(in oklab, var(--brand-sage) 10%, transparent), transparent 55%),
    radial-gradient(1000px 520px at 110% 0%, color-mix(in oklab, var(--brand-sage-deep) 10%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg-soft));
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.bg-gloss::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(90% 40% at 50% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
  mix-blend-mode:screen; opacity:.7; z-index:-1;
}
.bg-gloss::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0, rgba(255,255,255,.35) 1px, transparent 1px, transparent 3px);
  mask-image: radial-gradient(80% 60% at 50% 0%, #000 40%, transparent 80%); z-index:-1;
}

.dark .bg-gloss{
  background:
    radial-gradient(1200px 600px at -10% -10%, color-mix(in oklab, var(--brand-sage) 18%, transparent), transparent 55%),
    radial-gradient(1000px 520px at 110% 0%, color-mix(in oklab, var(--brand-sage-deep) 16%, transparent), transparent 55%),
    linear-gradient(180deg, #0b1220, #0f172a 60%, #111827);
}
.dark .bg-gloss::before{ background: radial-gradient(90% 40% at 50% -10%, rgba(255,255,255,.12), rgba(255,255,255,0) 60%); opacity:.9; }
.dark .bg-gloss::after{ opacity:.06; }

/* CTA gradient (sage) */
.cta-gradient{ background: var(--grad-a); }

/* Panel gloss (highlight tiles) */
.panel-gloss{ background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.dark .panel-gloss{ background: rgba(17,24,39,.45); border-color: rgba(255,255,255,.08); }


/* =======================================================
   Forms — inputs & textareas
   ======================================================= */
.input, .textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.4;
  transition: all 0.2s ease;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-muted);
}

.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand-sage);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-sage) 30%, transparent);
  background: #fff;
}

.dark .input, .dark .textarea {
  background: rgba(17,24,39,.75);
  border-color: var(--glass-border);
  color: var(--text);
}

.dark .input:focus, .dark .textarea:focus {
  border-color: var(--brand-sage);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-sage) 35%, transparent);
  background: rgba(24,33,45,.9);
}

/* Footer headers normalized */
.footer-heading {
  margin: 0 0 1rem 0;
  font-size: 1.125rem;
}