/*
Theme Name: Grace Care OKC Home
Theme URI: https://gracecareokc.com
Template: astra
Author: Grace Care
Author URI: https://gracecareokc.com
Description: Astra child theme carrying the full Grace Care site design for the Edmond / OKC location — header, footer and the Home, Services, About Us, Financial Solutions, Contact Us, FAQ and Careers pages. Ported from the approved static mockup. Legacy pages (Blog, Privacy Policy, etc.) keep their Elementor content inside the new site chrome.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grace-care-okc-child
*/

/* ============================================================
   DESIGN TOKENS — ported from the approved mockup
   Button paddings are the "Sleek Compact" preset (approved).
   ============================================================ */
:root {
  --burgundy:       #640D14;
  --burgundy-dark:  #4f0a10;
  --rose:           #b8797a;
  --blush:          #f8f1f0;
  --cream:          #fdfaf8;
  --sage:           #d1ddda;
  --taupe:          #ddd3d1;

  --ink:            #54595f;
  --body:           #7a7a7a;
  --charcoal:       #424242;
  --white:          #ffffff;

  --font-serif: "PT Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Nunito Sans", system-ui, -apple-system, sans-serif;

  --maxw: 1180px;
  --radius: 16px;
  --shadow: 0 18px 45px -22px rgba(100,13,20,.28);
  --shadow-sm: 0 8px 24px -16px rgba(66,66,66,.45);
  /* Sleek Compact button preset */
  --btn-py: 8px;
  --btn-px: 22px;
  --btn-hdr-py: 6px;
  --btn-hdr-px: 14px;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  color: var(--body);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--ink); line-height: 1.15; font-weight: 700; margin: 0; }
p { margin: 0; }
ul { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* Utilities */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--burgundy);
  display: inline-block;
  margin-bottom: 14px;
}
.accent { font-style: italic; color: var(--burgundy); font-weight: 700; }
.rule { width: 54px; height: 3px; background: var(--burgundy); border-radius: 2px; margin: 0 0 26px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 700; font-size: .98rem;
  padding: var(--btn-py) var(--btn-px); border-radius: 50px; border: 2px solid transparent;
  cursor: pointer; transition: .25s ease;
  text-decoration: none;
}
.btn-primary { background: var(--burgundy); color: var(--white) !important; }
.btn-primary:hover { background: var(--burgundy-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink) !important; border-color: var(--taupe); }
.btn-ghost:hover { border-color: var(--burgundy); color: var(--burgundy) !important; }
.btn-light { background: var(--white); color: var(--burgundy) !important; }
.btn-light:hover { background: var(--blush); transform: translateY(-2px); }

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
header.gc-site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--taupe);
  box-shadow: 0 4px 20px -10px rgba(0,0,0,0.05);
}
body.admin-bar header.gc-site-header { top: 32px; }
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 90px;
  position: relative;
  gap: 15px;
}
.logo-badge {
  background: var(--burgundy);
  padding: 8px 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.logo-badge:hover { transform: translateY(-1px); }
.logo-badge img { height: 38px; width: auto; display: block; }

.nav-links { display: flex; gap: 18px; align-items: center; margin-left: 10px; }
.nav-links a {
  font-weight: 700; font-size: .82rem; color: var(--ink); transition: .2s;
  text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active { color: var(--burgundy); }

.header-utility-links {
  display: flex; gap: 15px; font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; margin-left: auto;
}
.header-utility-links a { color: var(--body); transition: color 0.2s; }
.header-utility-links a:hover { color: var(--burgundy); }

.btn-consultation {
  padding: var(--btn-hdr-py) var(--btn-hdr-px) !important;
  font-size: 0.82rem !important;
  white-space: nowrap;
  border-radius: 50px;
}

.header-utility-info {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-size: 0.74rem; color: var(--charcoal); font-weight: 600;
  border-left: 1px solid var(--taupe); padding-left: 15px; line-height: 1.3; flex-shrink: 0;
}
.header-phone { font-weight: 700; color: var(--burgundy); font-size: 0.82rem; }
.header-phone a { color: var(--burgundy); }
.header-hours { color: var(--body); font-size: 0.72rem; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .3s; }
.mobile-nav-utilities { display: none; }

@media (max-width: 1200px) {
  .nav { justify-content: space-between; height: 74px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 74px; left: -28px; right: -28px;
    background: var(--white);
    flex-direction: column;
    padding: 30px 28px;
    gap: 20px;
    border-bottom: 2px solid var(--taupe);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.15);
    z-index: 99;
    align-items: flex-start;
    margin-left: 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 1rem; width: 100%; text-align: left; padding: 4px 0; border-bottom: 1px solid var(--blush); }
  .nav-toggle { display: block; }
  .header-utility-links, .btn-consultation, .header-utility-info { display: none; }
  .mobile-nav-utilities {
    display: flex; flex-direction: column; gap: 10px; margin-top: 24px;
    padding-top: 20px; border-top: 1px solid var(--blush); width: 100%;
  }
  .mobile-phone { font-size: 0.95rem; font-weight: 700; color: var(--burgundy); text-align: left; }
  .mobile-phone a { color: var(--burgundy); }
  .mobile-hours { font-size: 0.85rem; color: var(--body); text-align: left; }
  .mobile-links { display: flex; gap: 15px; margin-top: 5px; }
  .mobile-links a { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; color: var(--ink); border-bottom: 0; width: auto; }
}

/* ============================================================
   FOOTER
   ============================================================ */
footer.gc-site-footer { background: var(--burgundy); color: rgba(255,255,255,.8); padding: 64px 0 30px; margin-top: auto; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: 30px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}
footer.gc-site-footer h4 { color: var(--white); font-family: var(--font-serif); font-size: 1.35rem; margin-bottom: 14px; }
footer.gc-site-footer h5 { color: var(--white); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 16px; font-family: var(--font-sans); font-weight: 800; }
footer.gc-site-footer p { font-size: .93rem; max-width: 26em; }
.foot-list { list-style: none; padding: 0; }
.foot-list li { margin-bottom: 10px; }
.foot-list a { font-size: .93rem; transition: .2s; }
.foot-list a:hover { color: var(--white); }
.foot-contact { list-style: none; padding: 0; }
.foot-contact li { margin-bottom: 10px; font-size: .93rem; }
.foot-contact a:hover { color: var(--white); text-decoration: underline; }
.foot-bottom { padding-top: 24px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .82rem; opacity: .7; }

.foot-map {
  width: 100%; height: 300px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
}
.foot-map iframe { width: 100%; height: 100%; border: 0; }
.gc-map-overlay { position: absolute; inset: 0; z-index: 2; display: block; }

.foot-badges-band {
  background: #ffffff;
  padding: 45px 0;
  border-top: 1px solid var(--taupe);
  border-bottom: 1px solid var(--taupe);
  width: 100%;
}
.foot-badges {
  display: flex; justify-content: center; align-items: center; gap: 60px;
  max-width: 1200px; margin: 0 auto; padding: 0 20px; flex-wrap: wrap;
}
.grace-badge-item { max-height: 115px; max-width: 210px; width: auto; height: auto; object-fit: contain; transition: transform 0.25s; }
.grace-badge-item:hover { transform: translateY(-4px); }

/* ============================================================
   COMMON SECTIONS / CARDS
   ============================================================ */
.section-padding { padding: 90px 0; }
.bg-blush { background: var(--blush); }
.bg-cream { background: var(--cream); }
.section-head { text-align: center; max-width: 46em; margin: 0 auto 54px; }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 16px; }

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--radius);
  padding: 30px 26px; transition: .28s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.grace-chip {
  width: 54px; height: 54px; border-radius: 14px; background: var(--blush);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.grace-chip svg { width: 26px; height: 26px; stroke: var(--burgundy); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 1.18rem; margin-bottom: 10px; }
.card p { font-size: .93rem; }

/* Steps */
.grace-step { display: flex; gap: 20px; margin-bottom: 30px; text-align: left; }
.grace-step-num {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px;
  background: var(--blush); color: var(--burgundy);
  font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.grace-step-eyebrow {
  display: block; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 0.68rem; color: var(--rose); margin-bottom: 4px;
}
.grace-step h3 { font-family: var(--font-serif); font-size: 1.25rem; color: var(--ink); margin-bottom: 6px; }
.grace-step p { font-size: 0.95rem; margin: 0; }

/* Testimonials */
.grace-testimonials-wrap { width: 100%; max-width: 800px; margin: 0 auto; text-align: center; position: relative; }
.grace-quote {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.5; min-height: 6em;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.3s ease; color: var(--white); padding: 0 20px;
}
.grace-quote-author { margin-top: 22px; font-weight: 700; letter-spacing: 0.05em; opacity: 0.9; font-size: 1.05rem; color: var(--white); transition: opacity 0.3s ease; }
.grace-dots { display: flex; gap: 10px; justify-content: center; margin-top: 30px; }
.grace-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.35); border: 0; cursor: pointer; transition: all 0.25s; padding: 0; }
.grace-dot.active { background: var(--white); width: 26px; border-radius: 6px; }

/* Info packet / rate sheet forms */
.grace-packet-inner { max-width: 46em; margin: 0 auto; text-align: center; }
.grace-packet-inner h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 16px; }
.grace-packet-inner > p { margin-bottom: 26px; }
.grace-packet-form { display: flex; gap: 12px; max-width: 30em; margin: 0 auto; flex-wrap: wrap; justify-content: center; }
.grace-packet-form input[type="email"] {
  flex: 1; min-width: 220px; padding: 12px 20px;
  border: 1px solid var(--taupe); border-radius: 50px;
  font-family: var(--font-sans); font-size: 1rem; color: var(--ink);
  background: var(--white); box-shadow: none; transition: border-color 0.25s;
}
.grace-packet-form input[type="email"]:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 2px rgba(184,121,122,0.2); }
.grace-packet-note { font-size: 0.85rem; color: var(--body); margin-top: 18px; }
.gc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* Floating hero badge */
.grace-badge-container { position: relative; }
.grace-badge {
  position: absolute; left: -24px; bottom: 34px;
  background: var(--white); border-radius: 18px; padding: 18px 26px;
  box-shadow: var(--shadow-sm); text-align: center; z-index: 5;
}
.grace-badge b { font-family: var(--font-serif); font-size: 2rem; color: var(--burgundy); display: block; line-height: 1; }
.grace-badge small { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--body); font-weight: 700; display: block; }
@media(max-width: 900px) { .grace-badge { left: 20px; bottom: 20px; } }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ============================================================
   HOME PAGE
   ============================================================ */
/* Hero band is white; the "pop" of brand colour comes from a rounded,
   semi-transparent block offset behind the photo. That treatment now applies
   to every photo on the site and lives in one place — see
   "HERO PHOTO TREATMENT" near the end of this file. Applies to the hero
   photo only — every other photo on the site is square with a plain shadow. */
.hero { background: var(--white); position: relative; overflow: hidden; }
/* NB: this element is <div class="container hero-grid">, so its `padding`
   shorthand overrides .container’s 28px side gutters. Keep the 28px here or
   the hero runs edge-to-edge on any screen narrower than --maxw. */
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 54px; align-items: center; padding: 78px 28px 90px; }
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.7rem); margin: 6px 0 22px; }
.hero p.lead { font-size: 1.13rem; max-width: 30em; margin-bottom: 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; height: 480px; object-fit: cover; }

.stats { background: var(--burgundy); color: var(--white); }
/* Same note as .hero-grid — keep the 28px side padding. */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding: 46px 28px; text-align: center; }
.stat b { font-family: var(--font-serif); font-size: 2.3rem; display: block; color: var(--white); }
.stat span { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.stat:not(:last-child) { border-right: 1px solid rgba(255,255,255,.18); }

.mission { padding: 96px 0; }
.mission-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: center; }
.mission-img { position: relative; }
/* Shadow matches .steps-img img below — this photo was the only one on the
   page without it. */
.mission-img img { width: 100%; height: 430px; object-fit: cover; box-shadow: var(--shadow); }
/* REMOVED 2026-07-25 (client): .mission-img::after was a 2px hard-edged rose
   square outline, 62%x62%, offset 18px past the bottom-right corner at
   z-index:-1. A leftover accent from the earlier design that read as a
   rendering glitch rather than a deliberate detail. Do not reintroduce it.
   This photo is square with a plain drop shadow — only the hero carries the
   tinted colour block (see "HERO PHOTO TREATMENT" near the end of this file). */
.mission h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 22px; }
.mission p { margin-bottom: 18px; max-width: 34em; }

.testi { background: var(--burgundy); color: var(--white); padding: 90px 0; }
.testi .eyebrow { color: var(--rose); }
.testi-head { text-align: center; margin-bottom: 18px; }

.steps { padding: 96px 0; }
.steps-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.steps h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 36px; }
.steps-img img { width: 100%; height: 520px; object-fit: cover; box-shadow: var(--shadow); }

.packet { background: var(--blush); padding: 84px 0; }

@media(max-width:1024px){
  .hero-grid, .mission-grid, .steps-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-grid { padding: 54px 28px 64px; }
  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 30px 0; }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.18); padding-bottom: 24px; }
  .hero-visual img, .steps-img img, .mission-img img { height: 360px; }
}
@media(max-width:520px){
  .stats-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0 !important; }
}

/* ------------------------------------------------------------
   MOBILE GRID COLLAPSES — .cards and .foot-grid were both left
   at 4 columns with no breakpoints when this design was ported,
   which forced the page wider than the viewport on phones (the
   4th footer column landed outside the screen, so the whole site
   scrolled sideways). These are the missing rules.
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  /* Tighter gutters on small phones, but never zero. */
  .hero-grid { padding: 44px 20px 52px; }
  .stats-grid { padding: 40px 20px; }
  .container { padding-left: 20px; padding-right: 20px; }
}

/* Belt-and-braces: nothing should ever exceed the viewport. Applied to
   media/embeds rather than html{overflow-x:hidden}, which would break
   the sticky header. */
img, iframe, video, table { max-width: 100%; }
.foot-map, .map-wrapper, .gc-form-embed { max-width: 100%; overflow-x: hidden; }

/* ============================================================
   SERVICES PAGE
   ============================================================ */
.srv-hero { background: var(--blush); padding: 60px 0; text-align: center; }
.srv-hero p { max-width: 32em; margin: 0 auto; font-size: 1.1rem; }
.srv-grid-section { padding: 90px 0; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.abt-hero { background: var(--blush); padding: 60px 0; text-align: center; }
.abt-hero .abt-awards { max-width: 38em; margin: 0 auto; font-size: 1.15rem; font-weight: 600; color: var(--burgundy); }
.abt-hero .abt-serving { margin-top: 12px; font-size: .95rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rose); }
.abt-content { padding: 70px 0 50px; }
.abt-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.abt-grid .abt-story p { margin-bottom: 20px; font-size: 1.05rem; line-height: 1.75; }
.abt-award-cards { display: flex; flex-direction: column; gap: 20px; }
.abt-award-card { padding: 24px; background: var(--cream); display: flex; gap: 16px; align-items: center; }
.abt-award-card .abt-award-ico { font-size: 2.2rem; color: var(--burgundy); line-height: 1; }
.abt-award-card h4 { font-size: 1.1rem; color: var(--ink); margin-bottom: 4px; }
.abt-award-card p { font-size: 0.88rem; color: var(--body); }

.team-section { background: var(--blush); padding: 80px 0; }
.team-section .section-head p { max-width: 36em; margin: 0 auto; font-size: 1.05rem; }
.team-grid { display: grid; grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }
.team-card {
  background: var(--white); border: 1px solid var(--taupe); border-radius: var(--radius);
  padding: 36px; display: flex; gap: 30px; align-items: flex-start;
  transition: transform .28s ease, box-shadow .28s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.team-photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-sm); border: 4px solid var(--cream); }
.team-info h3 { font-family: var(--font-serif); font-size: 1.4rem; color: var(--burgundy); margin-bottom: 4px; }
.team-info h4 { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 700; color: var(--body); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 16px; }
.team-bio p { font-size: 0.98rem; line-height: 1.65; margin-bottom: 12px; color: var(--charcoal); }
.team-bio p:last-child { margin-bottom: 0; }
@media(max-width: 768px) {
  .team-card { flex-direction: column; align-items: center; text-align: center; padding: 30px; }
  .team-photo { margin-bottom: 10px; }
}

.abt-start { padding: 80px 0; }
.abt-start .container { max-width: 800px; text-align: center; }
.abt-start-intro { margin: 10px 0 40px; font-size: 1.05rem; }
.abt-start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; text-align: left; }
.abt-start-grid .card { padding: 24px; }
.abt-start-num { font-size: 1.5rem; color: var(--burgundy); font-weight: 800; margin-bottom: 10px; }
.abt-start-grid h4 { font-size: 1rem; margin-bottom: 6px; }
.abt-start-grid p { font-size: 0.85rem; }
@media(max-width: 768px){ .abt-start-grid { grid-template-columns: 1fr; } .abt-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ============================================================
   FINANCIAL SOLUTIONS PAGE
   ============================================================ */
.fin-hero { background: var(--blush); padding: 60px 0; text-align: center; }
.fin-hero p { max-width: 32em; margin: 0 auto; font-size: 1.1rem; }
.fin-content { padding: 80px 0; }
.fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.fin-option { margin-bottom: 30px; }
.fin-option h3 { margin-bottom: 8px; color: var(--burgundy); }
.fin-option p { margin-top: 10px; }
.fin-rate-card { background: var(--cream); border: 1px solid var(--taupe); border-radius: var(--radius); padding: 40px; align-self: start; }
.fin-rate-card > p { margin: 10px 0 24px; font-size: 0.95rem; }
.fin-rate-card .grace-packet-form { max-width: 100%; }
.fin-rate-card .grace-packet-form input[type="email"] { width: 100%; }
.fin-rate-card .btn { width: 100%; justify-content: center; }
@media(max-width: 900px){ .fin-grid { grid-template-columns: 1fr; } }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.con-hero { background: var(--blush); padding: 60px 0; text-align: center; }
.con-hero p { max-width: 32em; margin: 0 auto; font-size: 1.1rem; }
.con-content { padding: 80px 0; }
.con-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; }
.info-list { list-style: none; margin-bottom: 30px; padding: 0; }
.info-list li { font-size: 1.05rem; margin-bottom: 16px; display: flex; gap: 14px; }
.info-list a:hover { color: var(--burgundy); text-decoration: underline; }
.con-form { padding: 40px; background: var(--cream); border: 1px solid var(--taupe); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.con-form h3 { margin-bottom: 24px; }
.map-wrapper { width: 100%; height: 300px; overflow: hidden; margin-top: 30px; border: 1px solid var(--taupe); position: relative; }
.map-wrapper iframe { width: 100%; height: 100%; border: 0; }
@media(max-width:1024px) { .con-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ============================================================
   FAQ PAGE
   ============================================================ */
.faq-hero { background: var(--blush); padding: 60px 0; text-align: center; }
.faq-hero p { max-width: 32em; margin: 0 auto; font-size: 1.1rem; }
.faq-content { padding: 80px 0; }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { background: var(--cream); border: 1px solid var(--taupe); border-radius: 8px; margin-bottom: 16px; overflow: hidden; transition: .25s; }
.faq-question { padding: 20px 24px; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.faq-question:hover { background: var(--blush); }
.faq-answer { padding: 0 24px 20px; font-size: 0.95rem; display: none; line-height: 1.6; border-top: 1px solid transparent; }
.faq-answer p { margin-bottom: 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul { margin-left: 20px; margin-bottom: 12px; }
.faq-item.active { border-color: var(--burgundy); box-shadow: var(--shadow-sm); }
.faq-item.active .faq-question { color: var(--burgundy); background: var(--blush); }
.faq-item.active .faq-answer { display: block; border-top-color: var(--taupe); }
.faq-icon { transition: transform 0.25s; }
.faq-item.active .faq-icon { transform: rotate(180deg); }

/* ============================================================
   CAREERS PAGE
   ============================================================ */
.car-hero { background: var(--blush); padding: 60px 0; text-align: center; }
.car-hero .car-sub { max-width: 36em; margin: 0 auto; font-size: 1.15rem; font-weight: 600; color: var(--burgundy); }
.car-content { padding: 80px 0; }
.car-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; }
.car-intro { margin-bottom: 24px; font-size: 1.05rem; line-height: 1.7; }
.car-openings-h { margin-bottom: 20px; }
.job-listing { background: var(--white); border: 1px solid var(--taupe); border-radius: 8px; padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.job-listing h3 { font-size: 1.2rem; color: var(--burgundy); margin-bottom: 8px; }
.job-meta { font-size: 0.85rem; color: var(--rose); font-weight: 700; text-transform: uppercase; margin-bottom: 12px; }
.job-listing p { font-size: 0.95rem; margin-bottom: 14px; }
.car-faq { background: var(--blush); border-radius: var(--radius); padding: 40px; align-self: start; }
.car-faq > h3 { margin-bottom: 20px; color: var(--burgundy); }
.car-faq-item { margin-bottom: 20px; text-align: left; }
.car-faq-item:last-child { margin-bottom: 0; }
.car-faq-item h4 { font-size: 0.95rem; margin-bottom: 6px; font-family: var(--font-sans); font-weight: 700; }
.car-faq-item p, .car-faq-item ul { font-size: 0.88rem; color: var(--charcoal); }
.car-faq-item ul { margin-left: 20px; }
.car-apply { padding: 0 0 80px; }
.car-apply .section-head { margin-bottom: 30px; }
@media(max-width: 900px){ .car-grid { grid-template-columns: 1fr; } }

/* ============================================================
   EMBEDDED ELEMENTOR FORMS
   The Contact and Careers pages keep their original Elementor Pro
   forms (gc_contactus_001 / gc_job_app_001) so submissions keep
   flowing exactly as before. The page's Elementor content renders
   inside .gc-form-embed and everything EXCEPT the form is hidden,
   then the form controls are restyled to match the new design.
   ============================================================ */
.gc-form-embed .elementor-section:not(:has(form.elementor-form)),
.gc-form-embed .e-con:not(:has(form.elementor-form)) { display: none !important; }
.gc-form-embed .elementor-widget:not(.elementor-widget-form):not(:has(.elementor-widget-form)) { display: none !important; }
.gc-form-embed .elementor-column:not(:has(form.elementor-form)):not(.elementor-field-group) { display: none !important; }
.gc-form-embed .elementor-section, .gc-form-embed .e-con { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
.gc-form-embed .elementor-column { width: 100% !important; }
.gc-form-embed .elementor-form .elementor-field-group { margin-bottom: 14px; }
.gc-form-embed .elementor-form label { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.gc-form-embed .elementor-form input[type="text"],
.gc-form-embed .elementor-form input[type="email"],
.gc-form-embed .elementor-form input[type="tel"],
.gc-form-embed .elementor-form input[type="number"],
.gc-form-embed .elementor-form textarea {
  border: 1px solid var(--taupe) !important;
  border-radius: 50px !important;
  padding: 12px 18px !important;
  font-family: var(--font-sans) !important;
  background: var(--white) !important;
  color: var(--ink) !important;
}
.gc-form-embed .elementor-form textarea { border-radius: 16px !important; }
.gc-form-embed .elementor-form input:focus, .gc-form-embed .elementor-form textarea:focus { outline: none; border-color: var(--rose) !important; }
.gc-form-embed .elementor-form button[type="submit"] {
  background: var(--burgundy) !important;
  color: var(--white) !important;
  border-radius: 50px !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  padding: var(--btn-py) var(--btn-px) !important;
  border: 0 !important;
  transition: .25s ease;
}
.gc-form-embed .elementor-form button[type="submit"]:hover { background: var(--burgundy-dark) !important; }

/* ============================================================
   PASSWORD-PROTECTED PAGE FORM (Employee Portal)
   WordPress swaps the page content for this form when a page is
   set to "Password protected" — it lands inside Astra's
   .entry-content, which our header.php does NOT wrap in Astra's
   #content > .ast-container. So there is no gutter anywhere in the
   chain and the form must supply its own width, padding and card.
   Three things measured wrong before this block existed:
     1. Astra sets .post-password-form{text-align:center} — the copy
        and label rendered centred and off-brand.
     2. padding had 0 horizontal, so the pill input ran 0→375px on a
        phone, touching both screen edges.
     3. The page <h1> is suppressed (entry-header .ast-no-title), so
        employees saw a bare grey paragraph with no title.
   ============================================================ */
.post-password-form {
  max-width: 34em;
  margin: 0 auto;
  padding: 44px 40px;
  background: var(--cream);
  border: 1px solid var(--taupe);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--body);
  text-align: left; /* beats Astra's centred default */
}
/* The card carries its own heading since the page title is hidden.
   Scoped to this page ID so a future protected page can't inherit
   the wrong title. */
.page-id-1885 .post-password-form::before {
  content: "Employee Portal";
  display: block;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 14px;
}
.post-password-form p:first-of-type::before {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  background: var(--burgundy);
  border-radius: 2px;
  margin: 0 0 20px;
}
.post-password-form p { margin: 0 0 18px; line-height: 1.7; }
.post-password-form p:last-of-type { margin-bottom: 0; }
.post-password-form label { display: block; font-weight: 700; color: var(--ink); font-size: .9rem; }
.post-password-form input[type="password"] {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 12px 18px;
  border: 1px solid var(--taupe);
  border-radius: 50px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  transition: .2s ease;
}
.post-password-form input[type="password"]:focus { outline: none; border-color: var(--rose); }
.post-password-form input[type="submit"] {
  display: inline-block;
  margin-top: 16px;
  background: var(--burgundy);
  color: var(--white);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.4;
  padding: var(--btn-py) var(--btn-px);
  border-radius: 50px;
  border: 0;
  cursor: pointer;
  transition: .25s ease;
}
.post-password-form input[type="submit"]:hover {
  background: var(--burgundy-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
@media (max-width: 600px) {
  .post-password-form { margin: 0 20px; padding: 32px 24px; }
  .page-id-1885 .post-password-form::before { font-size: 1.45rem; }
}

/* ============================================================
   LEGACY PAGES (Blog, Privacy Policy, Caring Heart Award, …)
   Elementor content inside the new chrome; keep it centered.
   ============================================================ */
.gc-legacy-content { min-height: 40vh; }
.gc-legacy-content .ast-container { max-width: var(--maxw); }

/* ============================================================
   HERO PHOTO TREATMENT — rounded corners + offset colour block
   THE HERO PHOTO ONLY. This treatment was briefly applied to every photo
   on the site (2026-08-05) and then rolled back the same day: the client
   wanted the tinted "cast shadow" backdrop on the first picture only.
   Everything else is square with a plain drop shadow — see the square-corners
   override just below, which lists them.

   Implemented as TWO box-shadows rather than a ::before block:
     1. `11px 11px 0 0 <rose 30%>` — zero blur, zero spread, so it paints a
        hard-edged rectangle exactly the photo's size, shifted down-right.
        The visible result is an 11px band on the right and bottom.
     2. `var(--shadow)` — the existing soft drop shadow, on top of it.

   Why box-shadow and not a pseudo-element:
     - It inherits the photo's own `border-radius` automatically, so the
       block's corners can never drift out of sync with the photo's.
     - It needs no wrapper element, which is what makes the five staff
       headshots possible — they are bare <img class="team-photo"> inside a
       flex .team-card, with nothing to hang a ::before on.
     - box-shadow does not affect layout or scrollWidth, so unlike the old
       absolutely-positioned block it can NEVER cause horizontal scroll.
       (The previous ::before had to be hand-tuned per breakpoint to stay
       inside .container's gutters.)

   To retune: the two 11px values are the band; the alpha is the strength.
   ============================================================ */
/* Corner radius is shared with the "How it works" photo (client 2026-08-05:
   "match the rounding corners of the hero picture ... for this one as well").
   The colour block below stays hero-only. */
.hero-visual img, .steps-img img {
  border-radius: 24px;
}
.hero-visual img {
  box-shadow: 11px 11px 0 0 rgba(184, 121, 122, .30), var(--shadow);
}

/* SQUARE CORNERS OVERRIDE (per mockup)
   Reverted 2026-08-05 (client): the rounded-corner + colour-block treatment
   was briefly applied to every photo, then rolled back to the hero only —
   the hero is the one the client wanted the tinted "cast shadow" backdrop on.
   So mission, steps and the five staff headshots are square again and keep
   only their own plain drop shadows, exactly as before that round.
   .hero-visual img and .steps-img img are deliberately EXCLUDED — both are
   rounded; the hero additionally carries the colour block. */
.mission-img img, .team-photo, .map-wrapper, .foot-map, .foot-map iframe {
  border-radius: 0 !important;
}

@media (max-width: 1024px) {
  .hero-visual img, .steps-img img { border-radius: 22px; }
  .hero-visual img { box-shadow: 9px 9px 0 0 rgba(184, 121, 122, .30), var(--shadow); }
}
@media (max-width: 600px) {
  .hero-visual img, .steps-img img { border-radius: 20px; }
  .hero-visual img { box-shadow: 7px 7px 0 0 rgba(184, 121, 122, .30), var(--shadow); }
}

/* ============================================================
   NARROW-PHONE OVERFLOW HARDENING
   Two real bugs that a 375px-only test misses. Both measured at
   320px on the live site before this block existed.

   1. NAV DRAWER — 28px of sideways scroll the moment the hamburger
      is tapped, on every page. .nav-links is position:absolute and
      resolved against .container.nav (.nav{position:relative}); it
      used left/right:-28px to cancel the container's 28px gutters.
      On a phone the container's padding box already spans the whole
      viewport, so right:-28px pushed the drawer's right edge 28px
      past the screen (measured: drawer 376px wide in a 320px
      viewport, right edge at 348). Letting it resolve against the
      sticky header instead fixes it — the header spans the viewport
      with no padding, and top:100% equals its 74px height, so the
      drawer lands in exactly the same place as before.

   2. BARE `1fr` IN EVERY COLLAPSE — `1fr` is minmax(auto,1fr), and
      that `auto` minimum keeps the widest child's min-content width
      alive. So a grid that looks single-column can still be wider
      than the screen. Measured at 320px: .con-grid resolved to
      455.6px -> 156px of overflow on /contact-us/; .fin-grid to
      301.6px -> 2px on /financialresources/ (its floor is the 220px
      email input plus the rate card's 40px padding).
      minmax(0,1fr) is what actually lets the track reach the
      viewport, AND the items need min-width:0 — minmax(0,1fr) alone
      is not enough, because a grid item's own min-content size still
      floors it. Breakpoints below deliberately mirror the existing
      ones exactly (1100/1024/900/768/600/520), so this changes
      nothing about the tablet or desktop layout.
   ============================================================ */
@media (max-width: 1200px) {
  .nav { position: static; }
  .nav-links { top: 100%; left: 0; right: 0; }
}

/* Let grid items shrink to their track instead of flooring it. */
.hero-grid > *, .mission-grid > *, .steps-grid > *, .stats-grid > *,
.cards > *, .foot-grid > *, .con-grid > *, .fin-grid > *,
.abt-grid > *, .abt-start-grid > *, .car-grid > *, .team-grid > * { min-width: 0; }

/* Maps have no intrinsic size, so they are the usual worst offender. */
.foot-map, .map-wrapper { min-width: 0; }
.foot-map iframe, .map-wrapper iframe { max-width: 100%; min-width: 0; }

@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) {
  .hero-grid, .mission-grid, .steps-grid, .con-grid { grid-template-columns: minmax(0, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) { .fin-grid, .car-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .abt-grid, .abt-start-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .cards, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  /* This 220px floor is what pushed /financialresources/ over. */
  .grace-packet-form input[type="email"] { min-width: 0; flex: 1 1 100%; }
  .fin-rate-card, .con-form { padding: 26px; }
}
@media (max-width: 520px) { .stats-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   DESKTOP HEADER ROW FIT
   The header nav is a nowrap flex row inside .container, whose
   content box is capped at 1124px (--maxw 1180 minus 2x28 gutters)
   at EVERY desktop width. Measured, the row wanted 1216px:
     logo 151 + nav-links 489 + utility-links 173
     + consultation pill 139 + hours block 189 + 5x15px gap.
   .header-utility-info is flex-shrink:0, so the surplus was pushed
   out of the container's right edge on all desktop sizes. It only
   became a horizontal scrollbar under ~1350px, where the container's
   auto margins were too narrow to absorb it — 15px of sideways
   scroll on a 1280 laptop. Above that it silently mis-aligned, with
   the header running up to 92px past where the page content ends.

   Reclaiming ~120px makes the row genuinely fit (measured 1095 of
   1124) at every width, so the header's right edge now lines up with
   the hero content below it. The hours keep both their lines —
   max-width lets the string wrap to "Mon-Fri" / "8:30 AM - 3:30 PM"
   instead of being dropped. Verified at 1195 / 1265 / 1485px: 0
   overflow, hours visible, right edges aligned.
   ============================================================ */
@media (min-width: 1201px) {
  .gc-site-header .nav { gap: 12px; }
  .gc-site-header .nav-links { gap: 13px; }
  /* 128px, not 116px: the phone needs 109px on one line and this box has 15px
     of padding-left, so 116px left it only 101px and "405-378-5467" broke
     across two lines (client: "phone number looks bunched up"). 128px gives it
     113px. The row still fits — 1107px of the 1124px available. The hours
     string is the only thing that should wrap here. */
  .gc-site-header .header-utility-info { max-width: 128px; }
  .gc-site-header .header-phone { white-space: nowrap; }
  .gc-site-header .header-hours { white-space: normal; line-height: 1.25; }
}


/* ============================================================
   HERO CTA ROW — Home
   The approved design puts the two hero buttons side by side:
     .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
   with "Call Now" (primary) first and "Explore Services" (ghost)
   second. After the Elementor conversion they became two separate
   widgets in a column, so they stacked. Widget order is fixed in the
   page data; this lays them back into a row.

   Scoped to the Home hero's first column so no other button stack on
   the site is affected. Wraps on small screens, as the original did.
   ============================================================ */
.elementor-766 .elementor-top-section:first-of-type .elementor-widget-wrap {
  align-content: flex-start;
}
.elementor-766 .elementor-top-section:first-of-type .elementor-widget-button {
  width: auto;
  display: inline-block;
  vertical-align: top;
  margin-right: 14px;
}


/* ============================================================
   ELEMENTOR PARITY WITH THE APPROVED DESIGN
   Found during the visual pass by comparing staging against
   production side by side. Three systematic differences the
   conversion introduced, none of them intentional.
   ============================================================ */

/* 1. PAGE HEROES ARE CENTRED.
   The coded .srv-hero / .abt-hero / .faq-hero / .fin-hero /
   .con-hero / .car-hero all centre their eyebrow, H1 and lead.
   The Elementor rebuild left them ranged-left. The HOME hero is
   deliberately excluded — it is the 2-column layout with text on
   the left, which is correct. */
body:not(.home) .elementor > .elementor-top-section:first-of-type .elementor-widget-heading,
body:not(.home) .elementor > .elementor-top-section:first-of-type .elementor-widget-text-editor {
  text-align: center;
}
body:not(.home) .elementor > .elementor-top-section:first-of-type .elementor-widget-text-editor p {
  margin-left: auto;
  margin-right: auto;
  max-width: 34em;
}

/* 2. ICON CHIP.
   Production wraps each service icon in a soft blush rounded
   square. Elementor renders a bare glyph. */
.elementor-widget-icon-box .elementor-icon {
  background: var(--blush);
  border-radius: 10px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* 3. CARD TEXT IS LEFT-ALIGNED.
   Elementor's "icon on top" position centres the whole card;
   the approved cards are ranged-left with the chip above. */
/* NB: Elementor 4 emits `elementor-position-block-start`, NOT the older
   `elementor-position-top`. Both are listed so this survives either version.
   Elementor's own widget-icon-box.min.css sets text-align:center on
   .elementor-icon-box-wrapper, so these need equal-or-greater specificity. */
.elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-wrapper,
.elementor-widget-icon-box.elementor-position-top .elementor-icon-box-wrapper,
.elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-content,
.elementor-widget-icon-box.elementor-position-top .elementor-icon-box-content,
.elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-title,
.elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-description {
  text-align: left;
}
.elementor-widget-icon-box.elementor-position-block-start .elementor-icon-box-icon,
.elementor-widget-icon-box.elementor-position-top .elementor-icon-box-icon {
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}


/* ============================================================
   SERVICES CARD GRID — match the approved breakpoints
   The coded .cards grid was: 4 across, 2 across at <=1100px,
   1 across at <=600px. The Elementor rebuild uses three sections
   of 4 / 4 / 1 columns, which gives 4 across until Elementor's own
   767px mobile breakpoint and then jumps straight to 1 across.
   That left two mismatched bands: 768-1100 showed 4 cramped cards
   where the design wants 2, and 601-767 showed 1 where it wants 2.

   The `body` prefix is needed to outrank Elementor's own
   @media (max-width:767px) { .elementor-column { width:100% } }.
   ============================================================ */
@media (min-width: 601px) and (max-width: 1100px) {
  body .elementor-3539 .elementor-column.elementor-col-25 { width: 50%; }
}
@media (max-width: 600px) {
  body .elementor-3539 .elementor-column.elementor-col-25 { width: 100%; }
}

/* The 9th service sits alone in its own section, so its column is
   col-100 and stretched full width — the design has it as one more
   quarter-width card. :has() scopes this to the column holding a
   service card, leaving the page hero's col-100 untouched. */
@media (min-width: 1101px) {
  body .elementor-3539 .elementor-column.elementor-col-100:has(.elementor-widget-icon-box) { width: 25%; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  body .elementor-3539 .elementor-column.elementor-col-100:has(.elementor-widget-icon-box) { width: 50%; }
}


/* ============================================================
   ELEMENTOR - DESIGN SYSTEM BRIDGE
   ------------------------------------------------------------
   The design system above is written against the HAND-CODED markup
   (.hero, .btn, .reveal, .grace-badge, .cards). The Elementor rebuild
   emits completely different markup, so almost none of it was reaching
   the pages - buttons fell back to Elementor/Astra defaults, nothing
   animated, and the hero photo lost its treatment.

   Rather than restyle every widget by hand, this block defines helper
   CLASSES that are assigned per-widget in Elementor (Advanced -> CSS
   Classes). The client keeps full Elementor editing, and anything they
   add later just needs the matching class to inherit the house style.

   Sizes that are FLUID on production live here as clamp(); fixed sizes
   are set directly on the widget in Elementor so they show in the UI.
   ============================================================ */

/* --- Headings: mirrors .hero h1 / .section-head h2 / .mission h2 --- */
.gc-hero-h1 .elementor-heading-title  { font-size: clamp(2.4rem, 4.6vw, 3.7rem); line-height: 1.15; }
.gc-h2-section .elementor-heading-title { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.15; }
.gc-h2-block .elementor-heading-title   { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.15; }

/* --- Buttons -------------------------------------------------------
   Geometry (font, padding, border, radius) is set on each widget in
   Elementor so it is visible in the UI. Only the things Elementor has
   no control for live here: the flex centring and the hover lift.
   Production lifts ONLY the solid buttons - .btn-ghost:hover just
   recolours - so the transform is scoped to .gc-btn-primary.          */
.elementor-widget-button .elementor-button {
  display: inline-flex; align-items: center; justify-content: center;
  transition: .25s ease; text-decoration: none;
}
.gc-btn-primary .elementor-button:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* --- Hero photo ----------------------------------------------------
   Elementor puts its own border-radius/box-shadow on the WRAPPER, which
   leaves the square <img> overflowing the rounded corners. Style the
   image itself and it matches production exactly: 480px tall, cropped,
   offset rose block plus the soft drop shadow.                        */
.gc-hero-photo img {
  display: block; width: 100%; height: 480px; object-fit: cover;
  border-radius: 24px;
  box-shadow: 11px 11px 0 0 rgba(184,121,122,.30), var(--shadow);
}

/* --- "17+ Years Serving Oklahoma" badge ----------------------------
   .grace-badge / .grace-badge-container are already defined further up;
   this only gives the Elementor column the positioning context.       */
.gc-badge-host { position: relative; }

/* --- Scroll reveal for Elementor sections --------------------------
   .reveal is added by JS (see gc_reveal_boot in functions.php) so a
   no-JS visitor never gets stuck at opacity:0.                        */
.elementor-top-section.reveal,
.elementor > .e-con.reveal { opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.elementor-top-section.reveal.in,
.elementor > .e-con.reveal.in { opacity: 1; transform: none; }


/* --- BRIDGE FOLLOW-UPS (measured against production, not guessed) ---
   1. Elementor's global Kit styles headings at the same specificity as the
      bridge classes above AND loads after this stylesheet, so its
      line-height:1.4 was winning - the hero H1 rendered 82px leading where
      production is 68px. One extra level settles it.
   2. The two hero CTAs sit on one flex line inside .elementor-widget-wrap,
      which Elementor sets to align-items:center. Elementor also gives every
      widget except the last a 20px bottom margin, so "Call Now" had a 65px
      OUTER box against "Explore Services" 45px - centring those two boxes
      dropped the second button 10px even though both are 45px tall.
      Aligning to the start of the line removes the margin from the equation.
      Production sidesteps this entirely with one flex row (.hero-actions).  */
.elementor .gc-hero-h1 .elementor-heading-title,
.elementor .gc-h2-section .elementor-heading-title,
.elementor .gc-h2-block .elementor-heading-title { line-height: 1.15; }

.elementor-widget-wrap > .elementor-widget-button { align-self: flex-start; }


/* --- FAQ accordion -> production's .faq-item cards ------------------
   Production renders each Q&A as a separate cream card: 800px column,
   8px radius, .8px taupe border, 16px apart. Elementor's accordion has
   no per-item radius/margin control and stretches to the full column,
   so the card geometry has to come from here. Typography and colours
   ARE set on the widget, so they stay visible in the Elementor UI.     */
.gc-faq { max-width: 800px; margin-left: auto; margin-right: auto; }
.gc-faq .elementor-accordion-item,
.gc-faq .elementor-toggle-item {
  border: .8px solid var(--taupe);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}
.gc-faq .elementor-accordion-item:last-child,
.gc-faq .elementor-toggle-item:last-child { margin-bottom: 0; }
.gc-faq .elementor-tab-title {
  cursor: pointer;
  /* The tab title is an <h3>, so it carries a 26px heading size that the icon
     glyph inherits - production's chevron matches the question text instead. */
  font-size: 18.4px;
  display: flex; align-items: center; justify-content: space-between;
}
.gc-faq .elementor-accordion-icon,
.gc-faq .elementor-toggle-icon { font-size: 18.4px; color: var(--ink); }
/* Elementor emits the icon BEFORE the title and right-aligns it with a float,
   which the flex row above cancels - so order it explicitly instead. */
.gc-faq .elementor-accordion-icon-right,
.gc-faq .elementor-toggle-icon-right { order: 1; float: none; }


/* --- PACKET PRIVACY NOTE --------------------------------------------
   The note is emitted by [gc_lead_form] itself. On the old coded page it
   inherited centring from .grace-packet-inner; inside an Elementor
   Shortcode widget there is no such wrapper, so it fell back to the
   left-aligned default while the form above it stayed centred.
   (A second, centred copy had also been added as its own text widget -
   that duplicate is deleted, this rule centres the real one.)          */
.grace-packet-note { text-align: center; }


/* ============================================================
   CONSTANT CONTACT PACKET FORM
   ------------------------------------------------------------
   The home page packet form is now [ctct form="3654"] so leads land
   in the client's Constant Contact list. CC renders its own markup and
   inherits none of the house styling, so this rebuilds the exact look of
   the coded .grace-packet-form it replaced: one pill input beside a
   maroon pill button, centred, 12px apart.

   The visible "Email (required)" label is hidden VISUALLY ONLY - it stays
   in the accessibility tree for screen readers, with the placeholder
   (set from the field's Description in the CC form editor) carrying the
   visual cue, exactly as the old form did.
   ============================================================ */
.gc-ctct-packet .ctct-form-wrapper { max-width: 30em; margin: 0 auto; }

.gc-ctct-packet form.ctct-form {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center; align-items: center;
}
.gc-ctct-packet .ctct-form-field { margin: 0; }
.gc-ctct-packet .ctct-form-field-email { flex: 1; min-width: 220px; }

/* Visually hidden, still announced.
   NOTE the `span` qualifier: CC puts .ctct-label-top on BOTH the wrapping
   span AND the <input> itself, so an unqualified selector collapses the
   input to 1x1px too. */
.gc-ctct-packet .ctct-form-field-email span.ctct-label-top {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.gc-ctct-packet input.ctct-email {
  width: 100%; padding: 12px 20px;
  border: 1px solid var(--taupe); border-radius: 50px;
  font-family: var(--font-sans); font-size: 1rem; color: var(--ink);
  background: var(--white); box-shadow: none; transition: border-color .25s;
}
.gc-ctct-packet input.ctct-email:focus {
  outline: none; border-color: var(--rose);
  box-shadow: 0 0 0 2px rgba(184,121,122,.2);
}

.gc-ctct-packet input.ctct-submit {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 700; font-size: .98rem;
  padding: var(--btn-py) var(--btn-px);
  /* line-height matters: without it the submit renders 34px against the
     45px house button, because an <input> does not pick up the inherited
     leading the <a class="btn"> elements rely on. */
  line-height: 1.65;
  border: 1.6px solid transparent; border-radius: 50px;
  background: var(--burgundy); color: var(--white);
  cursor: pointer; transition: .25s ease; width: auto;
}
.gc-ctct-packet input.ctct-submit:hover {
  background: var(--burgundy-dark);
  transform: translateY(-2px); box-shadow: var(--shadow);
}

/* CC's consent notice - keep it, just stop it shouting */
.gc-ctct-packet .ctct-disclosure { margin-top: 18px; }
.gc-ctct-packet .ctct-disclosure hr { display: none; }
.gc-ctct-packet .ctct-disclosure small {
  font-size: .78rem; color: var(--body); line-height: 1.5; display: block;
}
.gc-ctct-packet .ctct-message,
.gc-ctct-packet .ctct-form-success { text-align: center; }