/* ============================================================
   VantaStaff — warm/human visual layer
   Scoped to body.warm so it only affects the homepage until approved.
   Purely presentational: no text, heading, link or schema changes.
   ============================================================ */

body.warm {
  /* Palette sampled directly from images/logo.png:
     lime #6FC25D -> teal #00A7C1 -> navy #12397B
     Paper stays a soft bone so the page reads human rather than clinical. */
  --w-cream:     #FBFAF7;  /* paper */
  --w-sand:      #EDF2F5;  /* palest brand blue, for alt sections */
  --w-ink:       #0B2450;  /* deepest brand navy */
  --w-ink-soft:  #33415C;
  --w-muted:     #5C6B82;
  --w-faint:     #8593A8;
  --w-line:      #DCE3EA;
  --w-line-soft: #E9EEF2;

  --w-clay:      #12397B;  /* brand navy, primary action */
  --w-clay-dark: #0B2450;
  --w-clay-wash: #EDF2F8;

  --w-teal:      #0A7E92;  /* darkened brand teal, legible on paper */
  --w-teal-pure: #00A7C1;  /* brand teal for graphic accents */
  --w-lime:      #5FA84E;  /* darkened brand lime, legible on paper */

  /* Remap the base tokens so inline style="color: var(--primary)" and any
     rule I haven't overridden explicitly also land in the brand palette. */
  --primary:          #12397B;
  --primary-600:      #12397B;   /* undefined in style.css; without this the
                                    inline fallback #4f46e5 (indigo) wins */
  --primary-dark:     #0B2450;
  --primary-light:    #7E93BC;
  --gradient-primary: #12397B;
  --gradient-hero:    #FBFAF7;
  --secondary:        #0A7E92;
  --accent:           #5FA84E;
  --dark:             #0B2450;
  --dark-soft:        #33415C;

  background: var(--w-cream);
  color: var(--w-ink-soft);
  font-family: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.0125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Typography ---------- */

body.warm h1,
body.warm h2,
body.warm h3,
body.warm .section-title,
body.warm .price {
  font-family: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--w-ink);
  letter-spacing: -0.021em;
  font-weight: 700;
}

body.warm h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.55rem);
  line-height: 1.07;
  letter-spacing: -0.036em;
  font-weight: 700;
}

body.warm .section-title {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin-bottom: 14px;
}

body.warm .section-subtitle {
  font-family: 'Schibsted Grotesk', sans-serif;
  color: var(--w-muted);
  font-size: 1.0625rem;
  max-width: 54ch;
}

body.warm .text-center .section-subtitle { margin-left: auto; margin-right: auto; }

body.warm h3 { font-size: 1.1875rem; letter-spacing: -0.01em; }

body.warm p { color: var(--w-ink-soft); }

/* ---------- Header ---------- */

body.warm .header {
  background: rgba(251, 250, 247, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--w-line-soft);
  box-shadow: none;
}

body.warm .nav-links a {
  color: var(--w-ink-soft);
  font-weight: 500;
  font-size: 0.9375rem;
}

body.warm .nav-links a:hover,
body.warm .nav-links a.active { color: var(--w-clay); }

body.warm .nav-links a::after { background: var(--w-clay); }

/* ---------- Buttons: flat, no gradient, no lift ---------- */

body.warm .btn {
  border-radius: 6px;
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow: none;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

body.warm .btn:hover { transform: none; box-shadow: none; }

body.warm .btn-primary,
body.warm .nav-cta .btn-primary {
  background: var(--w-clay);
  background-image: none;
  color: #F4F8FB;
  border: 1px solid var(--w-clay);
}

body.warm .btn-primary:hover {
  background: var(--w-clay-dark);
  border-color: var(--w-clay-dark);
}

body.warm .btn-secondary {
  background: transparent;
  color: var(--w-ink);
  border: 1px solid var(--w-line);
}

body.warm .btn-secondary:hover {
  background: var(--w-sand);
  border-color: var(--w-faint);
  color: var(--w-ink);
}

body.warm .btn-lg { padding: 15px 30px; font-size: 1rem; }

/* ---------- Hero: typographic, no stock photo ---------- */

body.warm .hero-home {
  background: var(--w-cream);
  background-image: none;
  border-bottom: 1px solid var(--w-line-soft);
  padding: clamp(72px, 11vw, 132px) 0 clamp(64px, 9vw, 108px);
  color: var(--w-ink);
}

body.warm .hero-home::before,
body.warm .hero-home::after { display: none; }

body.warm .hero-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  max-width: 100%;
}

body.warm .hero-home-content { max-width: 700px; }

body.warm .hero-home-image img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: none;
  display: block;
}

/* ch here resolves against the h1's own size, so this is a real display measure */
body.warm .hero-home h1 {
  color: var(--w-ink);
  margin-bottom: 24px;
  max-width: 16ch;
  text-wrap: balance;
}

body.warm .hero-home-accent {
  color: var(--w-teal);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.03em;
}

body.warm .hero-home-sub {
  color: var(--w-muted);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  max-width: 56ch;
  margin-bottom: 34px;
}

body.warm .hero-home-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

body.warm .hero-home-note {
  color: var(--w-faint);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

/* ---------- Sections ---------- */

body.warm .section { padding: clamp(66px, 8.5vw, 104px) 0; }
body.warm .section-alt { background: var(--w-sand); }
body.warm .how-section { background: var(--w-sand); }

/* ---------- Service cards -> rules, not boxes ---------- */

body.warm .services-grid-home { gap: 0; }

body.warm .service-card-home {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--w-line);
  border-radius: 0;
  box-shadow: none;
  padding: 26px 26px 30px 0;
  transition: none;
}

body.warm .service-card-home:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--w-teal-pure);
  background: transparent;
}

body.warm .service-card-home::before,
body.warm .service-card-home::after { display: none; }

body.warm .service-card-home svg {
  color: var(--w-teal-pure);
  opacity: 0.9;
  width: 22px;
  height: 22px;
}

body.warm .service-card-home h3 { margin: 14px 0 8px; }
body.warm .service-card-home p { color: var(--w-muted); font-size: 0.9375rem; }

body.warm .services-intro-text { color: var(--w-muted); }

/* ---------- How it works: numerals as type ---------- */

body.warm .how-step-home {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0 18px;
  text-align: left;
  transition: none;
}

body.warm .how-step-home:hover { transform: none; box-shadow: none; }
body.warm .how-step-home::after, body.warm .how-step-home::before { display: none; }

body.warm .how-step-num {
  background: transparent;
  color: var(--w-teal);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  width: auto;
  height: auto;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  display: block;
  margin: 0 0 14px 0;
  border-top: 1px solid var(--w-line);
  padding-top: 18px;
}

body.warm .how-step-divider { display: none; }
body.warm .how-step-home p { color: var(--w-muted); font-size: 0.9375rem; }

/* ---------- Why / value items ---------- */

body.warm .why-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--w-line);
  border-radius: 0;
  box-shadow: none;
  padding: 22px 0 6px;
  transition: none;
}

body.warm .why-item:hover { transform: none; box-shadow: none; }
body.warm .why-item h3 { margin-bottom: 7px; }
body.warm .why-item p { color: var(--w-muted); font-size: 0.9375rem; }

/* ---------- Pricing ---------- */

body.warm .pricing-card {
  background: var(--w-cream);
  border: 1px solid var(--w-line);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color 0.18s ease;
}

body.warm .pricing-card:hover { transform: none; box-shadow: none; border-color: var(--w-faint); }

body.warm .pricing-card.featured {
  border: 1px solid var(--w-clay);
  background: var(--w-clay-wash);
  transform: none;
}

body.warm .pricing-card::before, body.warm .pricing-card::after { display: none; }

body.warm .pricing-badge {
  background: var(--w-clay);
  background-image: none;
  color: #F4F8FB;
  box-shadow: none;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 0.6875rem;
}

body.warm .pricing-card .price {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 700;
  color: var(--w-ink);
  letter-spacing: -0.03em;
}

body.warm .pricing-card .price span {
  font-family: 'Schibsted Grotesk', sans-serif;
  color: var(--w-faint);
  font-weight: 500;
}

body.warm .pricing-card .price-sub { color: var(--w-muted); }
body.warm .pricing-features li { color: var(--w-ink-soft); font-size: 0.9375rem; }
body.warm .pricing-features li svg,
body.warm .pricing-features li > span:first-child { color: var(--w-lime); }

body.warm [data-currency-note] { color: var(--w-faint) !important; }
body.warm [data-currency-note] strong { color: var(--w-muted); }

/* ---------- FAQ: rules, not cards ---------- */

body.warm .faq-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--w-line);
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
}

body.warm .faq-item:hover { box-shadow: none; transform: none; }
body.warm .faq-item:last-child { border-bottom: 1px solid var(--w-line); }

body.warm .faq-question {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 600;
  color: var(--w-ink);
  font-size: 1.0125rem;
  padding: 22px 8px 22px 0;
}

body.warm .faq-question:hover { color: var(--w-clay); background: transparent; }
body.warm .faq-toggle { color: var(--w-clay); }
body.warm .faq-answer p { color: var(--w-muted); font-size: 0.9688rem; }
body.warm .faq-header a { color: var(--w-clay); }

/* ---------- City links ---------- */

body.warm .city-link {
  background: transparent;
  border: 1px solid var(--w-line);
  border-radius: 6px;
  color: var(--w-ink-soft);
  box-shadow: none;
  transition: border-color 0.18s ease, color 0.18s ease;
}

body.warm .city-link:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--w-clay);
  color: var(--w-clay);
  background: transparent;
}

/* ---------- Closing CTA: solid ink slab ---------- */

body.warm .cta-home {
  background: var(--w-ink);
  background-image: none;
  color: #E7EEF5;
  padding: clamp(72px, 9vw, 112px) 0;
}

body.warm .cta-home::before, body.warm .cta-home::after { display: none; }

body.warm .cta-home h2 {
  color: #FBFAF7;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.12;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

body.warm .cta-home p { color: rgba(231, 238, 245, 0.74); }

body.warm .cta-home .btn-primary {
  background: #FBFAF7;
  color: var(--w-ink);
  border-color: #FBFAF7;
}

body.warm .cta-home .btn-primary:hover { background: #FFFFFF; border-color: #FFFFFF; }

body.warm .cta-home .btn-secondary {
  background: transparent;
  color: #FBFAF7;
  border: 1px solid rgba(251, 250, 247, 0.42);
}

body.warm .cta-home .btn-secondary:hover {
  background: rgba(251, 250, 247, 0.12);
  border-color: rgba(251, 250, 247, 0.78);
  color: #FFFFFF;
}

/* ---------- Footer ---------- */

body.warm .footer {
  background: var(--w-sand);
  border-top: 1px solid var(--w-line);
  color: var(--w-muted);
}

body.warm .footer a { color: var(--w-muted); }
body.warm .footer a:hover { color: var(--w-clay); }
body.warm .footer h4 { font-family: 'Schibsted Grotesk', sans-serif; color: var(--w-ink); font-weight: 600; }
body.warm .footer-bottom { border-top: 1px solid var(--w-line); color: var(--w-faint); }

/* ---------- Kill leftover motion ---------- */

/* main.js sets opacity:0 + translateY inline for a scroll-reveal. It's a
   template tell and it leaves sections half-painted. Override it here rather
   than editing the shared main.js, so only the homepage is affected. */
body.warm .service-card,
body.warm .service-card-home,
body.warm .pricing-card,
body.warm .testimonial-card,
body.warm .step,
body.warm .how-step-home,
body.warm .feature-item,
body.warm .why-item,
body.warm .faq-item {
  opacity: 1 !important;
  transform: none !important;
  transition: border-color 0.18s ease !important;
}

body.warm [class*="card"]:hover,
body.warm [class*="item"]:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  body.warm * { animation: none !important; transition: none !important; }
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
  /* clear the sticky header before the display type starts */
  body.warm .hero-home { padding: 78px 0 52px; }
  body.warm .hero-home h1 { max-width: none; font-size: clamp(2.3rem, 10.5vw, 3rem); }
  body.warm .hero-home-grid { grid-template-columns: 1fr; gap: 28px; }
  /* base css sets order:-1 on the image; put the headline + CTA first instead
     so the value proposition lands above the fold on a phone */
  body.warm .hero-home-content { order: 1; }
  body.warm .hero-home-image { order: 2; }
  body.warm .hero-home-image img { max-height: 260px; object-position: center 28%; max-width: 100%; }
  body.warm .hero-home-actions { gap: 14px; }
  body.warm .hero-home-actions .btn { width: 100%; text-align: center; }
  body.warm .service-card-home { padding: 22px 0 24px; }
  body.warm .how-step-home { padding: 0; }
  body.warm .how-step-num { font-size: 2.2rem; }
}

/* ============================================================
   Components that only appear on the non-home pages.
   Added when the warm layer was rolled out site-wide.
   ============================================================ */

/* ---------- Page + city heroes: light, not dark gradient ---------- */

body.warm .city-hero,
body.warm .page-hero {
  background: var(--w-sand);
  background-image: none;
  border-bottom: 1px solid var(--w-line);
  padding: clamp(104px, 12vw, 146px) 0 clamp(48px, 6vw, 72px);
}

body.warm .city-hero::before,
body.warm .city-hero::after { display: none; }

body.warm .city-hero h1,
body.warm .page-hero h1 {
  color: var(--w-ink);
  letter-spacing: -0.032em;
}

body.warm .city-hero p,
body.warm .page-hero p { color: var(--w-muted); }

body.warm .city-breadcrumb,
body.warm .breadcrumb { color: var(--w-faint); }
body.warm .city-breadcrumb a,
body.warm .breadcrumb a { color: var(--w-muted); }
body.warm .city-breadcrumb a:hover,
body.warm .breadcrumb a:hover { color: var(--w-teal); }
body.warm .city-breadcrumb span { color: var(--w-faint); }
body.warm .breadcrumb-section { background: transparent; border-bottom: 1px solid var(--w-line-soft); }

/* .btn-white is built for dark bands; on a light hero make it the outline button */
body.warm .city-hero .btn-white,
body.warm .page-hero .btn-white {
  background: transparent;
  color: var(--w-ink);
  border: 1px solid var(--w-line);
}
body.warm .city-hero .btn-white:hover,
body.warm .page-hero .btn-white:hover {
  background: var(--w-cream);
  border-color: var(--w-faint);
  color: var(--w-ink);
}

body.warm .hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Closing CTA band: solid ink slab ---------- */

body.warm .cta-section {
  background: var(--w-ink);
  background-image: none;
  padding: clamp(68px, 8vw, 96px) 0;
}

body.warm .cta-section::before, body.warm .cta-section::after { display: none; }
body.warm .cta-section h2 { color: #FBFAF7; letter-spacing: -0.028em; }
body.warm .cta-section p  { color: rgba(231, 238, 245, 0.74); }
body.warm .cta-buttons { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

body.warm .cta-section .btn-white,
body.warm .cta-section .btn-primary {
  background: #FBFAF7;
  color: var(--w-ink);
  border: 1px solid #FBFAF7;
}
body.warm .cta-section .btn-white:hover,
body.warm .cta-section .btn-primary:hover { background: #FFFFFF; border-color: #FFFFFF; }

body.warm .cta-section .btn-secondary {
  background: transparent;
  color: #FBFAF7;
  border: 1px solid rgba(251, 250, 247, 0.42);
}
body.warm .cta-section .btn-secondary:hover { background: rgba(251, 250, 247, 0.12); color: #FFFFFF; }

/* ---------- Section labels ---------- */

body.warm .section-label {
  color: var(--w-teal);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75rem;
  background: transparent;
  border: 0;
  padding: 0;
}

/* ---------- Generic service / feature cards -> rules ---------- */

body.warm .service-card,
body.warm .feature-item {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--w-line);
  border-radius: 0;
  box-shadow: none;
  padding: 24px 22px 28px 0;
}

body.warm .service-card:hover,
body.warm .feature-item:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--w-teal-pure);
  background: transparent;
}

body.warm .service-card::before, body.warm .service-card::after,
body.warm .feature-item::before, body.warm .feature-item::after { display: none; }

body.warm .service-icon,
body.warm .feature-icon {
  background: transparent;
  background-image: none;
  color: var(--w-teal-pure);
  box-shadow: none;
  border: 0;               /* base rule has a 1px indigo border */
  border-radius: 0;
  width: auto;
  height: auto;
  min-width: 0;
  justify-content: flex-start;
  margin-bottom: 12px;
  padding: 0;
  font-size: 1.4rem;
}

body.warm .service-icon svg,
body.warm .feature-icon svg { width: 22px; height: 22px; color: var(--w-teal-pure); }
body.warm .service-card p, body.warm .feature-item p { color: var(--w-muted); font-size: 0.9375rem; }

/* ---------- Numbered steps -> numerals as type ---------- */

body.warm .step {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--w-line);
  border-radius: 0;
  box-shadow: none;
  padding: 20px 18px 24px 0;
  text-align: left;
}

body.warm .step:hover { transform: none; box-shadow: none; }
body.warm .step::before, body.warm .step::after { display: none; }

body.warm .step-number {
  background: transparent;
  background-image: none;
  color: var(--w-teal);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
  margin: 0 0 10px 0;
}

body.warm .steps::before, body.warm .steps::after { display: none; }
body.warm .step p { color: var(--w-muted); font-size: 0.9375rem; }

/* ---------- Blog cards ---------- */

body.warm .blog-card {
  background: var(--w-cream);
  border: 1px solid var(--w-line);
  border-radius: 10px;
  box-shadow: none;
  overflow: hidden;
  transition: border-color 0.18s ease;
}

body.warm .blog-card:hover { transform: none; box-shadow: none; border-color: var(--w-teal-pure); }
body.warm .blog-card h3 { font-size: 1.0625rem; line-height: 1.32; }
body.warm .blog-card p { color: var(--w-muted); font-size: 0.9125rem; }

body.warm .blog-category,
body.warm .blog-meta,
body.warm .blog-date {
  color: var(--w-teal);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  background: transparent;
  padding: 0;
}

body.warm .blog-read-more, body.warm .btn-text { color: var(--w-teal); font-weight: 600; }

/* ---------- Long-form article pages ---------- */

body.warm .blog-post { color: var(--w-ink-soft); }
body.warm .blog-post h2 { margin-top: 2em; }
body.warm .blog-post p, body.warm .blog-post li { color: var(--w-ink-soft); line-height: 1.75; }
body.warm .blog-post a:not(.btn):not(.city-link):not(.blog-card) {
  color: var(--w-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.warm .blog-post blockquote {
  border-left: 2px solid var(--w-teal-pure);
  background: transparent;
  color: var(--w-muted);
  padding-left: 20px;
}
body.warm .blog-featured-image img { border-radius: 10px; box-shadow: none; }
body.warm .seo-byline { color: var(--w-faint); border-bottom: 1px solid var(--w-line); }
body.warm .seo-sources { background: var(--w-sand); border: 1px solid var(--w-line); border-radius: 10px; }
body.warm .seo-sources a { color: var(--w-teal); }
body.warm .blog-cta { background: var(--w-sand); border: 1px solid var(--w-line); border-radius: 10px; box-shadow: none; }

/* ---------- Stats ---------- */

body.warm .stats-bar { background: var(--w-sand); border-top: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line); }
body.warm .stat-item strong, body.warm .stat-item .stat-number {
  font-family: 'Schibsted Grotesk', sans-serif;
  color: var(--w-ink);
  font-weight: 700;
  letter-spacing: -0.03em;
}
body.warm .stat-item span, body.warm .stat-item p { color: var(--w-muted); }

/* ---------- Forms ---------- */

body.warm .form-group label { color: var(--w-ink); font-weight: 600; font-size: 0.875rem; }

body.warm .form-group input,
body.warm .form-group select,
body.warm .form-group textarea,
body.warm .contact-form input,
body.warm .contact-form select,
body.warm .contact-form textarea {
  background: var(--w-cream);
  border: 1px solid var(--w-line);
  border-radius: 6px;
  color: var(--w-ink);
  font-family: 'Schibsted Grotesk', sans-serif;
  box-shadow: none;
}

body.warm .form-group input:focus,
body.warm .form-group select:focus,
body.warm .form-group textarea:focus {
  border-color: var(--w-teal);
  outline: 2px solid rgba(10, 126, 146, 0.18);
  outline-offset: 1px;
}

body.warm .contact-form-heading { letter-spacing: -0.026em; }
body.warm .contact-disclaimer, body.warm .contact-form-subtext { color: var(--w-faint); }

/* ---------- Tables ---------- */

body.warm table { border-color: var(--w-line); }
body.warm th {
  background: var(--w-sand);
  color: var(--w-ink);
  font-family: 'Schibsted Grotesk', sans-serif;
  font-weight: 600;
  border-color: var(--w-line);
}
body.warm td { border-color: var(--w-line-soft); color: var(--w-ink-soft); }

/* ---------- Footer social ---------- */

body.warm .footer-social a {
  background: transparent;
  border: 1px solid var(--w-line);
  color: var(--w-muted);
  border-radius: 6px;
}
body.warm .footer-social a:hover { border-color: var(--w-teal); color: var(--w-teal); background: transparent; }