/* Site-wide refinement. Keep the established white, forest-green and gold identity. */
:root {
  --ink: #253d2f;
  --muted: #59665c;
  --dark: #20372b;
  --cream: #f7f3ea;
  --line: #ddd8cc;
  --gold: #a57c40;
  --stelini-gold-text: #7b5d30;
  --stelini-gold-light: #e0c18a;
}
body { color: var(--ink); }
#app main { font-size: 16px; line-height: 1.75; }

/* The same hierarchy across home, services, articles, contact and care pages. */
#app main h1,
#app .hero h1,
#app .about-page .about-hero h1,
#app .contact-welcome h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.7vw, 64px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.028em;
  text-wrap: balance;
}
#app main h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 500;
  line-height: 1.13;
  letter-spacing: -.024em;
  text-wrap: balance;
}
#app :is(.home-service-card, .service-card, .article-card, .home-article, .contact-path-grid) h3 {
  font-family: var(--font-display);
  font-size: clamp(25px, 2.2vw, 29px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.18;
}
#app :is(.home-care-config, .contact-connect) h3 { font-size: 30px; line-height: 1.18; }
#app :is(.contact-connect, .contact-path-grid, .faq-group) h2 { font-size: clamp(29px, 2.7vw, 36px); line-height: 1.18; }
#app .contact-connect h2 { font-size: 32px; }
#app :is(.home-section-heading, .section-head, .about-section-heading) { max-width: 100%; }
#app :is(.lede, .home-intro-panel .lede, .home-care-copy .lede, .care-grid .lede) {
  line-height: 1.78;
  text-wrap: pretty;
}
#app main :is(.home-service-card, .service-card, .article-card) p:not(.eyebrow) { line-height: 1.7; }
#app .article-container { max-width: 820px; }
#app .article-container > :is(h1, .lede) { max-width: 100%; }
#app .article-container > section p { font-size: 17px; line-height: 1.85; }
#app .article-container > section h2 { font-size: clamp(29px, 3vw, 38px); }
#app .privacy-sections h2 { font-size: clamp(29px, 3vw, 36px); line-height: 1.2; }

/* Darker gold for small text on white; lighter gold on green surfaces. */
#app main .eyebrow { color: var(--stelini-eyebrow, var(--stelini-gold-text)); font-size: 11px; letter-spacing: .14em; line-height: 1.65; }
#app :is(.hero, .home-intro-panel, .home-care, .care-section, .about-hero,
  .about-values-section, .projects-coming-soon, .closing, .home-closing,
  .faq-hero, .faq-index, .contact-welcome, .careers-simple-hero, .audience-property-managers) {
  --stelini-eyebrow: var(--stelini-gold-light);
}
#app :is(.care-config, .home-care-config, .request-panel, .audience-homeowners) { --stelini-eyebrow: var(--stelini-gold-text); }
#app main .text-link { color: var(--stelini-gold-text); text-underline-offset: 5px; }
#app :is(.hero, .home-intro-panel, .home-care, .care-section, .about-hero,
  .about-values-section, .projects-coming-soon, .closing, .home-closing,
  .faq-hero, .contact-welcome, .audience-property-managers) .text-link { color: var(--stelini-gold-light); }
#app :is(.care-config, .home-care-config) .text-link { color: var(--stelini-gold-text); }

/* Consistent controls, with readable text on gold and clear hover/focus states. */
#app main :is(.button, .home-gold-button, .home-green-button, .home-outline-link, .about-gold-button) {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .01em;
  gap: 12px;
  min-height: 52px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
#app main :is(.button, .home-green-button) {
  background: #253d2f;
  border-color: #253d2f;
  color: #fffdf7;
  --stelini-fill: #3a5844;
}
#app main :is(.button.secondary, .home-outline-link) {
  background: transparent;
  border: 1px solid #9b885f;
  color: #253d2f;
  --stelini-fill: #f1ede2;
}
#app :is(.hero, .projects-actions, .closing, .home-closing, .careers-email-card) .button,
#app main :is(.home-gold-button, .about-gold-button),
#app .audience-card .button {
  background: #c7a263;
  border-color: #c7a263;
  color: #20372b;
  --stelini-fill: #dec18f;
}
#app main :is(.faq-index, .faq-hero) .button.secondary {
  background: transparent;
  border-color: #c7a263;
  color: #fffdf7;
  --stelini-fill: #3a5844;
}
#app main :is(.button, .home-gold-button, .home-green-button, .about-gold-button):hover { color: #fffdf7; }
#app :is(.hero, .projects-actions, .closing, .home-closing, .careers-email-card) .button:hover,
#app main :is(.home-gold-button, .about-gold-button):hover,
#app .audience-card .button:hover { background: #dec18f; border-color: #dec18f; color: #20372b; }
#app main :is(.button.secondary, .home-outline-link):hover { color: #253d2f; }
#app main :is(.faq-index, .faq-hero) .button.secondary:hover { color: #fffdf7; }
#app :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid #9b763d;
  outline-offset: 4px;
}

/* A steadier reading rhythm and practical touch targets. */
#app main > .section,
#app main :is(.home-section, .care-section) { padding-block: clamp(48px, 6vw, 84px); }
#app main :is(section[id], h2[id]) { scroll-margin-top: 145px; }
#app main :is(.home-service-card, .service-card, .article-card, .contact-path-grid article) { border-color: #ded6c6; }
#app .field :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  border-color: #c9cfc6;
  accent-color: #253d2f;
}
#app .field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select) { min-height: 48px; }
#app .field > label { font-size: 14px; font-weight: 600; line-height: 1.6; color: #354d3b; }
#app .field .fineprint { color: #59665c; font-size: 13px; line-height: 1.65; }
#app :is(.faq-item, .stelini-care-questions) summary { min-height: 48px; font-family: var(--font-sans); line-height: 1.5; }
#app :is(.contact-connect, .contact-aside, .office-block) a { overflow-wrap: anywhere; }
#app .footer { background: #20372b; }
#app .footer :is(p, li, a) { line-height: 1.75; }
#app .footer h3 { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .12em; }

/* Keep native photo upload controls inside their field on narrow layouts. */
#app .field input[type="file"] { width: 100%; max-width: 100%; box-sizing: border-box; }

@media (max-width: 700px) {
  #app main h1,
  #app .hero h1,
  #app .about-page .about-hero h1,
  #app .contact-welcome h1 { font-size: clamp(35px, 9.5vw, 43px); line-height: 1.1; letter-spacing: -.025em; }
  #app main h2 { font-size: clamp(30px, 8.1vw, 36px); line-height: 1.15; }
  #app :is(.home-service-card, .service-card, .article-card, .home-article, .contact-path-grid) h3 { font-size: 26px; }
  #app .lede { font-size: 16px; }
  #app main :is(section[id], h2[id]) { scroll-margin-top: 108px; }
  #app .article-container > section p { font-size: 16px; }
  #app main :is(.button, .home-gold-button, .home-green-button, .home-outline-link, .about-gold-button) { font-size: 14px; }
  /* Show the care offer before the repeated workflow on narrow screens. */
  #app .care-grid { gap: 24px; }
  #app .care-grid > div:first-child { display: contents; }
  #app .care-grid .care-config { order: 1; }
  #app .care-grid .stelini-care-steps { order: 2; margin-block: 6px 0; }
  #app .care-grid .lede { margin-block: 0; }
  #app .care-grid > div:first-child > :is(.eyebrow, h1, h2) { margin: 0; }
}

@media (max-width: 600px) {
  .topline-utility .topline-contact a,
  .topline-utility .language-switch a { min-height: 44px; height: 44px; }
  #app .field :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px; }
  #app .footer-social-icon { width: 44px; height: 44px; }
  #app .contact-raul-layout .contact-raul-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  #app main .contact-raul-layout .contact-raul-actions .button { width: 100%; justify-content: center; white-space: normal; }
}

/* Keep the approved effects, with shorter, lighter transitions. */
@media (prefers-reduced-motion: no-preference) {
  #app [data-stelini-reveal="up"].stelini-reveal-wait { transform: translateY(18px); }
  #app [data-stelini-reveal="up"].stelini-reveal-in { animation-duration: .65s; }
  #app [data-stelini-reveal="media"].stelini-reveal-in img { animation-duration: 1s; }
  #app .stelini-hero-enter { animation-duration: 1.15s; }
  @media (hover: hover) and (pointer: fine) {
    #app :is(.home-service-card, .service-card, .audience-card, .article-card, .about-core-grid article, .contact-path-grid article):hover { transform: translateY(-4px); }
  }
}