/* DEDUPE-1: rules retired here are owned by clay-system.css (buttons, pills,
   the tier-2 card resting state and its dark variant). Page-identity rules —
   the eyebrow reset, footer un-carding, section rhythm, hovers — stay. */
/* ===========================================================================
 * CLAYHOME — homepage visual hierarchy.
 *
 * The previous pass gave EVERY surface the same 2.5px outline + hard offset
 * shadow, which is why the page read as one repeated card. This replaces that
 * with three deliberate tiers, so weight signals importance:
 *
 *   TIER 1  hero tile, primary CTAs, CTA band   -> full clay: ink outline +
 *                                                  hard offset shadow
 *   TIER 2  service rows, blog, testimonials    -> hairline + soft shadow,
 *                                                  lifts on hover
 *   TIER 3  stats, steps, FAQ, platform chips   -> no card at all; rhythm comes
 *                                                  from type, dividers and space
 *
 * The clay identity survives because it is now RARE. Branding, colours and the
 * admin accent (--acc) are untouched; nothing here changes copy or structure.
 * ======================================================================== */

:root, body {
  --ch-line:      rgba(43,52,69,.12);      /* hairline */
  --ch-line-2:    rgba(43,52,69,.07);
  --ch-ink:       #2B3445;
  --ch-soft:      0 2px 8px rgba(43,52,69,.06), 0 8px 24px rgba(43,52,69,.05);
  --ch-soft-lift: 0 6px 16px rgba(43,52,69,.09), 0 18px 44px rgba(43,52,69,.08);
  --ch-hard:      5px 5px 0 var(--ch-ink);
  --ch-hard-sm:   3px 3px 0 var(--ch-ink);
  --ch-tint:      rgba(43,52,69,.028);     /* section band */
  --ch-r:         18px;
  --ch-r-sm:      12px;
  --ch-ease:      cubic-bezier(.22,1,.36,1);
}

/* ---------------------------------------------------------------- TYPE ----
   One scale, applied consistently. Section headings drop from 36px to 32 with
   tighter tracking; the eyebrow becomes a small caps label instead of a pill. */
body .sec-h { max-width: 640px; margin: 0 auto 34px; }
body .sec-h h2 {
  font-size: clamp(26px, 3.4vw, 33px) !important;
  line-height: 1.14;
  letter-spacing: -.022em;
  margin: 10px 0 0;
}
body .sec-h p { font-size: 15px; line-height: 1.6; color: var(--mut); margin-top: 10px; }
body .sec-h .eye {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--acc) !important;
  font-size: 11.5px !important;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
body .hero h1 { line-height: 1.04; letter-spacing: -.03em; }

/* --------------------------------------------------------- SECTION RHYTHM --
   Tightened vertical space, and alternating grounds so sections separate
   without needing a box around each one. */
body .plat, body .off, body .bento, body .how, body .test, body .blog, body .faq {
  padding-top: 54px !important;
  padding-bottom: 54px !important;
  position: relative;
}
body .stats { padding: 10px 0 34px !important; }
body .marq  { padding: 18px 0 !important; }

/* tinted bands break the repetition — no borders needed */
body .off, body .how, body .faq { background: var(--ch-tint); }
body .off::before, body .how::before, body .faq::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--ch-line-2);
}

/* ============================ TIER 3 — no cards =========================== */

/* --- STATS: borderless, large gradient numerals, hairline dividers -------- */
body .stats .gr {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  gap: 0 !important;
}
body .stats .st {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 18px !important;
  position: relative;
}
body .stats .st + .st::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: var(--ch-line);
}
body .stats .n, body .stats .st .n {
  font-family: 'Fredoka','Nunito',sans-serif;
  font-size: clamp(26px, 3.6vw, 36px) !important;
  letter-spacing: -.03em;
  background: linear-gradient(180deg, var(--tx) 42%, var(--acc));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
body .stats .st small, body .stats .st span {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mut); font-weight: 700;
}
/* count-up entrance */
body .stats .st { opacity: 0; transform: translateY(10px); }
body .stats.in .st { opacity: 1; transform: none; transition: opacity .5s var(--ch-ease), transform .5s var(--ch-ease); }
body .stats.in .st:nth-child(2) { transition-delay: .06s; }
body .stats.in .st:nth-child(3) { transition-delay: .12s; }
body .stats.in .st:nth-child(4) { transition-delay: .18s; }

/* --- PLATFORM CHIPS: soft tinted, icon-led, not thick pills --------------- */
body .plat a {
  background: rgba(255,255,255,.86) !important;
  border: 1px solid var(--ch-line) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(43,52,69,.04) !important;
  padding: 9px 16px !important;
  font-weight: 700;
  font-size: 13.5px;
  transition: transform .18s var(--ch-ease), box-shadow .18s var(--ch-ease), border-color .18s;
}
body .plat a:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--acc) 40%, var(--ch-line)) !important;
  box-shadow: 0 6px 16px rgba(43,52,69,.10) !important;
}
body .plat a i, body .plat a img { transition: transform .18s var(--ch-ease); }
body .plat a:hover i, body .plat a:hover img { transform: scale(1.12); }

/* --- MARQUEE: a moving band, never cards --------------------------------- */
body .marq .it {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: .72;
}

/* --- HOW IT WORKS: numbered steps with a connector, no boxes -------------- */
body .how .st {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 14px !important;
  position: relative;
}
body .how .st + .st::before {
  content: ""; position: absolute; left: -6px; top: 26px; width: 12px; height: 2px;
  background: var(--ch-line); border-radius: 2px;
}
body .how .st .cico {
  border: 0 !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--acc) 22%, transparent) !important;
  border-radius: 16px !important;
}

/* --- FAQ: hairline rows, not stacked boxes ------------------------------- */
body .faq .it {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ch-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 4px !important;
  transition: background .18s;
}
body .faq .it:hover { background: rgba(255,255,255,.6); }
body .faq .it:last-child { border-bottom: 0 !important; }

/* ================== TIER 2 — hairline + soft shadow ====================== */


body .svrow .sv:hover, body .blog a.bc:hover, body .test .tc:hover, body .bento .bx:not(.big):hover {
  transform: translateY(-3px);
  box-shadow: var(--ch-soft-lift) !important;
  border-color: color-mix(in srgb, var(--acc) 26%, var(--ch-line)) !important;
}

/* --- SERVICE ROWS: accent edge on hover for scan-ability ------------------ */
body .svrow .sv { position: relative; overflow: hidden; }
body .svrow .sv::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc); opacity: 0; transition: opacity .22s;
}
body .svrow .sv:hover::before { opacity: 1; }

/* --- TESTIMONIALS: quote-led, premium, no hard edges --------------------- */
body .test .tc {
  padding: 26px 24px !important;
  position: relative;
  background: linear-gradient(180deg, #FFFFFF, color-mix(in srgb, var(--acc) 3%, #FFFFFF)) !important;
}
body .test .tc::before {
  content: "\201C";
  position: absolute; top: 8px; right: 20px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 76px; line-height: 1;
  color: color-mix(in srgb, var(--acc) 14%, transparent);
  pointer-events: none;
}
body .test .tc p { font-size: 14.5px; line-height: 1.68; color: var(--soft); }
body .test .av {
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(43,52,69,.16) !important;
  border-radius: 50% !important;
}
body .test .tc .who { border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }

/* --- BLOG: image-forward -------------------------------------------------- */
body .blog a.bc { overflow: hidden; padding: 0 !important; display: flex; flex-direction: column; }
body .blog a.bc img {
  width: 100%; height: 172px; object-fit: cover; display: block;
  transition: transform .5s var(--ch-ease);
}
body .blog a.bc:hover img { transform: scale(1.05); }
body .blog a.bc .bt, body .blog a.bc h3 { padding: 14px 16px 4px; font-size: 16px !important; line-height: 1.32; }
body .blog a.bc p { padding: 0 16px 16px; font-size: 13.5px; color: var(--mut); }

/* --- OFFERS: accent-tinted, quieter than a card -------------------------- */
body .off .of {
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 6%, #FFFFFF), #FFFFFF) !important;
  border-color: color-mix(in srgb, var(--acc) 18%, var(--ch-line)) !important;
}

/* ==================== TIER 1 — full clay, used sparingly ================== */

body .bento .bx.big {
  background: var(--grad) !important;
  border: 2px solid var(--ch-ink) !important;
  border-radius: 22px !important;
  box-shadow: var(--ch-hard) !important;
}
body .band {
  border-top: 2px solid var(--ch-ink);
  border-bottom: 2px solid var(--ch-ink);
}




/* secondary buttons: quiet, hairline — they were competing with primaries */



/* --- footer: quiet ------------------------------------------------------- */
body .ft .cols {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-top: 1px solid var(--ch-line) !important;
  border-radius: 0 !important;
}

/* --- misc chips that were pills --------------------------------------- */


/* ============================== DARK ==================================== */
html.nv-dark body {
  --ch-line:   rgba(255,255,255,.12);
  --ch-line-2: rgba(255,255,255,.07);
  --ch-ink:    #0B0F1A;
  --ch-tint:   rgba(255,255,255,.028);
  --ch-soft:      0 2px 8px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.28);
  --ch-soft-lift: 0 6px 16px rgba(0,0,0,.44), 0 18px 44px rgba(0,0,0,.36);
}

html.nv-dark body .test .tc { background: linear-gradient(180deg,#242A3D,#202636) !important; }
html.nv-dark body .plat a { background: rgba(34,39,57,.9) !important; border-color: rgba(255,255,255,.13) !important; }
html.nv-dark body .faq .it:hover { background: rgba(255,255,255,.04); }
html.nv-dark body .bento .bx.big, html.nv-dark body .btn.pri { border-color: #6B7A99 !important; }
html.nv-dark body .band { border-color: #6B7A99; }
html.nv-dark body .test .av { border-color: #222739 !important; }

/* ============================ RESPONSIVE ================================= */
@media (max-width: 1020px) {
  body .plat, body .off, body .bento, body .how, body .test, body .blog, body .faq {
    padding-top: 42px !important; padding-bottom: 42px !important;
  }
  body .sec-h { margin-bottom: 26px; }
}
@media (max-width: 640px) {
  body .plat, body .off, body .bento, body .how, body .test, body .blog, body .faq {
    padding-top: 34px !important; padding-bottom: 34px !important;
  }
  body .sec-h { margin-bottom: 22px; }
  body .sec-h h2 { font-size: 24px !important; }
  body .stats .st { padding: 12px 10px !important; }
  body .stats .st + .st::before { display: none; }      /* dividers cramp a 2-col grid */
  body .blog a.bc img { height: 148px; }
  body .test .tc { padding: 20px 18px !important; }
  body .test .tc::before { font-size: 56px; top: 4px; right: 14px; }
  body .bento .bx.big { box-shadow: var(--ch-hard-sm) !important; }
}

@media (prefers-reduced-motion: reduce) {
  body .stats .st { opacity: 1 !important; transform: none !important; }
  body .svrow .sv, body .blog a.bc, body .test .tc, body .plat a, body .btn { transition: none !important; }
  body .svrow .sv:hover, body .blog a.bc:hover, body .test .tc:hover,
  body .plat a:hover, body .btn:hover { transform: none !important; }
  body .blog a.bc:hover img { transform: none !important; }
}