/* ==========================================================================
   EOWC Medical & Aesthetics — design system
   Two type systems, exactly as the approved mockups specify:
     default (.em)      About / Contact / Service + every page built on them
                        Playfair Display headings, cream bands, deep green
     .em-home           the Sept 14 home mockup: Jost throughout, grey bands
   Shared: sage #6e897a, the header/footer lockup, buttons, reviews, map.
   ========================================================================== */

:root{
  --cream:#f3e8e0; --cream-2:#ece0d6; --deep:#2f3a2b; --deep-2:#3a4a37;
  --sage:#6e897a; --sage-dark:#5c7568;
  --dark:#2b2a27; --text:#5f5a54; --line:#e2d6ca;
  --gold:#c99a3f;
  --maxw:1440px; --gutter:24px;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --head:var(--serif);
  --band:var(--cream);
  --shadow:0 26px 56px rgba(60,50,40,.16);
}

/* The home page's own tokens, per the Sept 14 mockup. */
body.em-home{
  --cream:#f7f4ef; --dark:#3e4140; --text:#5e5e5e; --line:#eaeaea;
  --deep:#233029; --deep-2:#2f4036; --gold:#f5b301;
  --light:#f5f5f5; --band:#f5f5f5;
  --head:var(--sans);
}

/* -------------------------------------------------- base */
.em *,.em *::before,.em *::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.em{
  margin:0;font-family:var(--sans);font-size:16px;line-height:1.75;
  color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;
}
.em img{max-width:100%;height:auto;display:block}
.em a{color:inherit;text-decoration:none;transition:color .25s ease}
.em h1,.em h2,.em h3,.em h4,.em h5,.em h6{
  margin:0 0 .6em;font-family:var(--head);color:var(--dark);
  font-weight:600;line-height:1.18;
}
.em h1{font-size:clamp(2.2rem,4.8vw,3.6rem)}
.em h2{font-size:clamp(1.8rem,3.5vw,2.6rem)}
.em h3{font-size:1.3rem}
.em h4{font-size:1.12rem}
body.em-home h1{line-height:1.08}
body.em-home h2{line-height:1.2}
.em p{margin:0 0 1rem}
.em ul,.em ol{margin:0 0 1rem;padding-left:1.25rem}
.em li{margin-bottom:.4rem}
.em em{font-style:italic;color:var(--sage)}
.em strong{color:var(--dark);font-weight:600}
.em hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.em :focus-visible{outline:3px solid var(--sage);outline-offset:3px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--deep);color:#fff;padding:12px 20px}
.skip-link:focus{left:8px;top:8px}

.em .container,.em .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.em .wrap-narrow{max-width:860px;margin:0 auto;padding:0 var(--gutter)}
.em section:not(.elementor-inner-section){padding:78px 0}
/* Elementor inner sections are <section> too. Without this they each took the
   78px band padding, which is where the acres of dead space between a section
   head and its cards, and between card rows, came from. */
.em .elementor-inner-section{padding:0}
.em .section-head{text-align:center;max-width:760px;margin:0 auto 52px}
.em .section-head h2{margin-bottom:14px}
.em .section-head p{margin-bottom:0}

.em .eyebrow{
  display:block;font-family:var(--sans);color:var(--sage);
  letter-spacing:3px;text-transform:uppercase;font-size:.78rem;
  font-weight:600;margin-bottom:14px;
}
.em .band-cream{background:var(--cream)}
.em .band-light{background:var(--band)}
.em .band-deep{background:var(--deep);color:rgba(255,255,255,.78)}
.em .band-deep h2,.em .band-deep h3,.em .band-deep h4{color:#fff}
.em .band-deep .eyebrow{color:#b9cbb0}
.em .band-deep em{color:#b9cbb0}

/* -------------------------------------------------- icons */
.em .ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}

/* -------------------------------------------------- buttons
   Written at (0,2,1) so Elementor's .elementor-kit-N a{color} cannot win. */
.em a.btn,.em button.btn,.em .em-btns a.btn{
  display:inline-block;font-family:var(--sans);font-weight:500;
  letter-spacing:1px;text-transform:uppercase;font-size:.76rem;
  padding:14px 30px;border-radius:4px;cursor:pointer;
  border:2px solid transparent;transition:all .25s ease;text-align:center;
}
body.em-home a.btn,body.em-home .em-btns a.btn{
  letter-spacing:1.5px;font-size:.8rem;padding:15px 34px;border-radius:2px;
}
.em a.btn-solid,.em .em-btns a.btn-solid{background:var(--deep);color:#fff;border-color:var(--deep)}
.em a.btn-solid:hover,.em .em-btns a.btn-solid:hover{background:var(--deep-2);border-color:var(--deep-2);color:#fff}
.em a.btn-line,.em .em-btns a.btn-line{background:transparent;color:var(--deep);border-color:var(--deep)}
.em a.btn-line:hover,.em .em-btns a.btn-line:hover{background:var(--deep);color:#fff}
.em a.btn-lightline,.em .em-btns a.btn-lightline{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.em a.btn-lightline:hover,.em .em-btns a.btn-lightline:hover{background:#fff;color:var(--deep)}
.em a.btn-sage,.em .em-btns a.btn-sage{background:var(--sage);color:#fff;border-color:var(--sage)}
.em a.btn-sage:hover,.em .em-btns a.btn-sage:hover{background:var(--sage-dark);border-color:var(--sage-dark);color:#fff}
.em a.btn-outline-sage{background:transparent;color:var(--sage);border-color:var(--sage)}
.em a.btn-outline-sage:hover{background:var(--sage);color:#fff}
.em .em-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.em .section-head .em-btns,.em .band-deep .em-btns,.em .cta .em-btns{justify-content:center}

.em a.link-more{
  display:inline-block;margin-top:6px;font-family:var(--sans);font-size:.76rem;
  font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--dark);
}
.em a.link-more:hover{color:var(--sage)}
.em a.link-more::after{content:"";display:block;width:26px;height:2px;background:var(--sage);margin:6px auto 0;transition:width .25s}
.em a.link-more:hover::after{width:44px}
/* Elementor's icon-box puts the description in a single <p>, so the Learn More
   link the builder appends lands inline with the last sentence. Block it out
   onto its own line, as the mockup has it. */
.em .elementor-icon-box-description a.link-more{display:block;margin-top:16px}

/* -------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--line)}
body.em-home .site-header{box-shadow:0 1px 12px rgba(0,0,0,.04)}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:8px var(--gutter);max-width:var(--maxw);margin:0 auto;
}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo .logo-img{height:96px;width:auto}
.logo-text{font-family:var(--head);font-size:1.25rem;color:var(--dark);font-weight:600;line-height:1.1}
.nav{display:flex;align-items:center;gap:28px}
.nav .nav-list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav .nav-item{position:relative;margin:0}
.nav .nav-item>a{
  display:inline-block;font-family:var(--sans);font-size:.92rem;font-weight:500;
  letter-spacing:1px;text-transform:uppercase;color:var(--dark);padding:10px 0;
}
.nav .nav-item>a:hover,.nav .nav-item.is-current>a{color:var(--sage)}
.nav .caret{
  background:none;border:0;padding:4px;margin-left:2px;cursor:pointer;color:var(--sage);
  display:inline-flex;align-items:center;vertical-align:middle;
}
.nav .caret .ic{width:14px;height:14px;transform:rotate(90deg);transition:transform .25s}
.nav .nav-item.open>.caret .ic{transform:rotate(-90deg)}
.nav .sub-menu{
  position:absolute;top:100%;left:-18px;min-width:262px;background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:10px 0;margin:0;
  list-style:none;box-shadow:0 22px 46px rgba(60,50,40,.14);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:50;
}
.nav .nav-item:hover>.sub-menu,.nav .nav-item:focus-within>.sub-menu,.nav .nav-item.open>.sub-menu{
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav .sub-menu li{margin:0}
.nav .sub-menu a{
  display:block;padding:9px 22px;font-size:.9rem;color:var(--text);
  text-transform:none;letter-spacing:.2px;
}
.nav .sub-menu a:hover{background:var(--cream);color:var(--deep)}
.nav .nav-portal{
  display:inline-flex;align-items:center;gap:9px;color:#fff;background:var(--deep);
  border-radius:40px;padding:11px 22px;font-family:var(--sans);font-weight:500;
  font-size:.92rem;letter-spacing:.5px;white-space:nowrap;
}
body.em-home .nav .nav-portal{background:var(--sage)}
.nav .nav-portal:hover{background:var(--deep-2);color:#fff}
body.em-home .nav .nav-portal:hover{background:var(--sage-dark)}
.nav .nav-portal .ic{width:17px;height:17px;flex:0 0 17px}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:12px;margin-right:-6px}
.menu-toggle .bars,.menu-toggle .bars::before,.menu-toggle .bars::after{
  display:block;width:26px;height:2px;background:var(--dark);border-radius:2px;position:relative;
}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0}
.menu-toggle .bars::before{top:-8px}
.menu-toggle .bars::after{top:8px}

/* -------------------------------------------------- page head (interior banner) */
/* The service mockup's banner: 440px tall, a .72 scrim, and a full-size h1. */
.em .pagehead{
  position:relative;text-align:center;color:#fff;
  min-height:440px;display:flex;align-items:center;justify-content:center;
  padding:64px var(--gutter);
  background-color:var(--deep);background-size:cover;background-position:center;
}
.em .pagehead::before{content:"";position:absolute;inset:0;background:rgba(43,52,40,.72)}
.em .pagehead>*{position:relative;z-index:2}
/* These must out-specify .em .elementor-widget-heading .elementor-heading-title
   (0,3,0), which sets the dark heading ink for every other band. */
.em .pagehead h1,
.em .pagehead .elementor-widget-heading .elementor-heading-title{
  color:#fff;margin-bottom:12px;max-width:22ch;margin-left:auto;margin-right:auto;
  font-size:clamp(2.2rem,4.6vw,3.5rem);overflow-wrap:break-word;
}
.em .pagehead p,
.em .pagehead .elementor-widget-text-editor{
  color:rgba(255,255,255,.88);max-width:560px;margin-left:auto;margin-right:auto;
  font-size:1.05rem;font-weight:300;
}
.em .pagehead .eyebrow{color:#b9cbb0}
.em .crumb{margin-top:16px;font-size:.84rem;letter-spacing:1px;color:rgba(255,255,255,.72)}
.em .crumb a{color:rgba(255,255,255,.9)}
.em .crumb a:hover{color:#fff;text-decoration:underline}
.em .crumb .sep{margin:0 .5em;opacity:.6}

/* -------------------------------------------------- home hero (mockup 14) */
.em .hero{padding:0}
.em .hero-card{
  position:relative;width:100%;min-height:640px;display:flex;align-items:center;
  overflow:hidden;background:#232b28;
}
.em .hero-photo{
  position:absolute;inset:0 0 0 auto;width:64%;
  background-size:cover;background-position:center;transition:opacity .6s ease;
}
.em .hero-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#232b28 0%,#232b28 32%,rgba(35,43,40,.55) 52%,rgba(35,43,40,0) 74%);
}
.em .hero-copy{
  position:relative;z-index:2;max-width:560px;padding:60px 56px;color:#fff;
  margin-left:max(var(--gutter),calc((100vw - var(--maxw))/2));transition:opacity .45s ease;
}
.em .hero-copy .eyebrow{color:#9fd3d6}
.em .hero-copy h1{color:#fff;margin-bottom:18px}
.em .hero-copy h1 .accent{color:var(--sage)}
.em .hero-copy p{color:rgba(255,255,255,.8);font-weight:300;font-size:1.08rem;max-width:440px;margin-bottom:30px}
.em a.pill{
  display:inline-flex;align-items:center;gap:14px;background:var(--sage);color:#10201f;
  font-family:var(--sans);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  font-size:.78rem;padding:7px 7px 7px 26px;border-radius:40px;transition:all .25s;
}
.em a.pill:hover{background:#fff;color:#10201f}
.em a.pill .arrow{
  width:38px;height:38px;border-radius:50%;background:#10201f;color:var(--sage);
  display:flex;align-items:center;justify-content:center;flex:0 0 38px;
}
.em a.pill .arrow .ic{width:17px;height:17px}
.em .hero-tags{
  position:absolute;right:40px;bottom:32px;z-index:2;display:flex;gap:22px;flex-wrap:wrap;
  color:rgba(255,255,255,.85);font-size:.82rem;letter-spacing:1px;margin:0;padding:0;list-style:none;
}
.em .hero-tags li{display:flex;align-items:center;gap:8px;margin:0}
.em .hero-tags li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sage);flex:0 0 7px}
.em .hero-controls{
  position:absolute;bottom:30px;z-index:3;display:flex;align-items:center;gap:16px;
  left:calc(max(var(--gutter),(100vw - var(--maxw))/2) + 56px);
}
.em .hero-arrow{
  width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:all .25s;padding:0;
}
.em .hero-arrow .ic{width:18px;height:18px}
.em .hero-arrow.prev .ic{transform:rotate(180deg)}
.em .hero-arrow:hover{background:var(--sage);border-color:var(--sage);color:#10201f}
.em .hero-dots{display:flex;gap:9px;align-items:center}
.em .hero-dot{
  width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);
  border:0;cursor:pointer;padding:0;transition:all .3s ease;
}
.em .hero-dot.active{background:var(--sage);width:28px;border-radius:5px}
.em .hero-count{color:rgba(255,255,255,.55);font-size:.72rem;letter-spacing:2px;margin-left:4px}

/* -------------------------------------------------- featured treatment columns */
.em .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.em .cat{text-align:center;padding:0 14px}
.em .cat-icon{
  width:134px;height:134px;border-radius:50%;margin:0 auto 24px;display:flex;
  align-items:center;justify-content:center;transition:transform .3s ease;
}
.em .cat-icon .ic{width:62px;height:62px}
.em .cat:hover .cat-icon{transform:translateY(-7px)}
.em .icon-sage{background:#8fa393;color:#f4eddd}
.em .icon-cream{background:#ece5d7;color:#54695c}
.em .icon-deep{background:#5f7468;color:#f4eddd}
.em .cat h3{font-size:1.5rem;margin-bottom:12px}
.em .cat p{font-size:.96rem;line-height:1.7;margin:0 auto 14px;max-width:320px}

/* -------------------------------------------------- about feature panel (home)
   Built as two Elementor columns rather than an absolutely-positioned photo,
   so the section keeps working when Elementor stacks the columns. The overlap
   is produced with a negative margin on the photo column instead. */
.em .elementor-section.about-feature>.elementor-container{align-items:center}
.em .about-panel{
  background:#233029;color:#fff;border-radius:22px;padding:70px 56px;
  position:relative;z-index:2;
}
.em .about-panel .elementor-heading-title,.em .about-panel h2{color:#fff}
.em .about-panel h2 .accent{color:#9ec4ad}
.em .about-panel .eyebrow{color:#a7c0b2}
.em .about-panel .elementor-widget-text-editor{color:rgba(255,255,255,.78)}
.em .about-actions{display:flex;align-items:center;gap:24px;margin-top:26px;flex-wrap:wrap}
.em .about-actions .textlink{
  color:#cfe0d6;font-family:var(--sans);font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;font-size:.76rem;
}
.em .about-actions .textlink:hover{color:#fff}
.em .about-photo{margin-left:-6%;z-index:1}
.em .about-photo .elementor-widget-html .about-photo-img,.em .about-photo img{
  border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.28);
  width:100%;aspect-ratio:4/3.1;object-fit:cover;
}
.em .about-photo .about-photo-img{background-color:var(--cream-2)}

/* -------------------------------------------------- services icon grid */
.em .services-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:44px 28px}
.em .service{text-align:center}
.em .service .icon{
  width:116px;height:116px;border-radius:50%;background:var(--sage);margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;color:#f4eddd;
  transition:transform .3s ease,background .3s ease;
}
.em .service .icon .ic{width:56px;height:56px}
.em .service:hover .icon{transform:translateY(-6px)}
.em .service:nth-child(3n+1) .icon{background:#8fa393;color:#f4eddd}
.em .service:nth-child(3n+2) .icon{background:#ece5d7;color:#54695c}
.em .service:nth-child(3n) .icon{background:#5f7468;color:#f4eddd}
.em .service h3{font-size:1.12rem;margin-bottom:8px}
.em .service p{font-size:.9rem;line-height:1.6;margin-bottom:10px}

/* -------------------------------------------------- generic card grid */
.em .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.em .cards.two{grid-template-columns:repeat(2,1fr)}
.em .cards.four{grid-template-columns:repeat(4,1fr)}
.em .card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px 28px;
  transition:box-shadow .3s ease,transform .3s ease;
}
.em .band-cream .card{background:#fbf6f1}
.em .card:hover{box-shadow:0 22px 48px rgba(60,50,40,.12);transform:translateY(-5px)}
.em .card .cic{
  width:60px;height:60px;border-radius:50%;background:var(--cream);color:var(--deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.em .card .cic .ic{width:30px;height:30px}
.em .card h3{font-size:1.18rem;margin-bottom:10px}
.em .card p:last-child{margin-bottom:0}
/* aspect-ratio boxes: the image must not be able to size its parent */
.em .card .ph{position:relative;aspect-ratio:16/11;border-radius:10px;overflow:hidden;
  background-color:var(--cream-2);margin-bottom:18px}
.em .card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* -------------------------------------------------- split band */
.em .split{
  max-width:1360px;margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.em .split.rev .split-media{order:2}
.em .split h2{margin-bottom:18px}
/* GOTCHA: `.photo` sits on the Elementor IMAGE WIDGET itself, not on a wrapper
   around it, so the old "box with an absolutely positioned img inside" model
   fought itself — the widget got the aspect-ratio and the img was stretched to
   the widget's own box. The crop belongs on the <img>. When no photo is mapped
   the builder emits a bare <div class="photo"> inside an HTML widget instead,
   and that is the only case that still needs the coloured box. */
.em .split-media .elementor-widget-image.photo img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:10px;box-shadow:var(--shadow);
}
.em .split-media .elementor-widget-html .photo{
  aspect-ratio:4/3;border-radius:10px;background:var(--cream-2);box-shadow:var(--shadow);
}

/* -------------------------------------------------- statement band */
.em .statement{background:var(--cream);padding:84px 0 92px;text-align:center}
.em .statement p{
  font-family:var(--head);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.4;
  color:var(--dark);max-width:900px;margin:0 auto;
}

/* -------------------------------------------------- pillars (deep band) */
.em .pillars{background:var(--deep);color:#fff;padding:92px 0}
.em .pillars .wrap{max-width:1360px;display:grid;grid-template-columns:1fr 1.1fr;gap:60px}
.em .pillars h2{color:#fff;line-height:1.22}
.em .pillars h2 em{color:#b9cbb0}
.em .pillars .grid>.elementor-container{display:grid;grid-template-columns:1fr 1fr;gap:36px 44px}
.em .pillar{border-top:1px solid rgba(255,255,255,.16);padding-top:16px}
.em .pillar h4{color:#fff;font-size:1.16rem;margin-bottom:9px}
.em .pillar p{color:rgba(255,255,255,.68);font-size:.92rem;line-height:1.6;margin:0}

/* -------------------------------------------------- team */
.em .team-grid>.elementor-container{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.em .team-card{
  background:#fbf6f1;border:1px solid var(--line);border-radius:14px;padding:36px 28px;
  text-align:center;transition:box-shadow .3s ease,transform .3s ease;
}
.em .team-card:hover{box-shadow:0 22px 48px rgba(60,50,40,.12);transform:translateY(-5px)}
.em .elementor-widget-html .team-avatar{
  width:128px;height:128px;border-radius:50%;margin:0 auto 20px;
  background:var(--cream-2);box-shadow:0 10px 26px rgba(60,50,40,.18);
}
.em .elementor-widget-image.team-avatar img{
  display:block;width:128px;height:128px;border-radius:50%;object-fit:cover;
  margin:0 auto 20px;box-shadow:0 10px 26px rgba(60,50,40,.18);
}
.em .team-card h3{font-size:1.3rem;margin-bottom:4px}
.em .team-card .role{
  display:block;font-family:var(--sans);color:var(--sage);font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;font-size:.7rem;margin-bottom:14px;
}
.em .team-card p{font-size:.92rem;color:var(--text);line-height:1.65;margin:0}
.em .team-card.join{background:var(--deep);border-color:var(--deep);display:flex;flex-direction:column;justify-content:center}
.em .team-card.join h3{color:#fff}
.em .team-card.join p{color:rgba(255,255,255,.8);margin:8px 0 16px}

/* -------------------------------------------------- benefits grid (service tpl) */
.em .bcards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.em .bcard{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 24px;
  text-align:center;transition:box-shadow .3s ease,transform .3s ease;
}
.em .band-cream .bcard{background:#fbf6f1}
.em .bcard:hover{box-shadow:0 20px 42px rgba(60,50,40,.12);transform:translateY(-4px)}
.em .bcard .bic{
  width:64px;height:64px;border-radius:50%;background:var(--cream);color:var(--deep);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.em .bcard .bic .ic{width:32px;height:32px}
.em .bcard.feature{background:var(--deep);border-color:var(--deep)}
.em .bcard.feature h4{color:#fff}
.em .bcard.feature p{color:rgba(255,255,255,.75)}
.em .bcard.feature .bic{background:rgba(255,255,255,.12);color:#fff}
.em .bcard h4{font-size:1.05rem;margin-bottom:8px}
.em .bcard p{font-size:.9rem;line-height:1.6;margin:0}

/* -------------------------------------------------- stats */
.em .stats{background:var(--deep);color:#fff;padding:56px 0}
.em .stats .row{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.em .stat .num{font-family:var(--head);font-size:clamp(1.7rem,3vw,2.4rem);color:#fff;font-weight:600;line-height:1.1}
.em .stat .lbl{font-family:var(--sans);font-size:.8rem;letter-spacing:1.6px;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:8px}

/* -------------------------------------------------- commitment band */
.em .commit .wrap{max-width:1360px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.em .commit .media{position:relative}
/* Elementor makes every widget position:relative, so the call card was
   anchoring to its own zero-height HTML widget at the foot of the photo
   instead of to the media column. */
.em .commit .media>.elementor-widget-wrap>.elementor-widget-html{position:static}
/* Portrait crop and a sage card pinned top-left, per the service mockup. */
.em .commit .elementor-widget-image.photo img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:12px;box-shadow:var(--shadow);
}
.em .commit .elementor-widget-html .photo{
  aspect-ratio:4/5;border-radius:12px;background:var(--cream-2);box-shadow:var(--shadow);
}
.em .commit .callcard{
  position:absolute;left:-24px;top:26px;background:var(--sage);color:#fff;
  border-radius:14px;padding:22px 24px;box-shadow:0 18px 40px rgba(60,50,40,.25);max-width:230px;
}
.em .commit .callcard .cic{
  width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:12px;
}
.em .commit .callcard .cic .ic{width:22px;height:22px}
.em .commit .callcard .t{font-family:var(--head);font-size:1.1rem;line-height:1.25;color:#fff;margin-bottom:8px}
.em .commit .callcard .n{font-family:var(--sans);font-weight:600;letter-spacing:1px;color:#fff;margin-top:0}
.em .commit .callcard a{color:#fff}
@media(max-width:1200px){.em .commit .callcard{left:0}}
.em .feat-list{display:grid;gap:22px;margin:26px 0}
.em .feat{display:flex;gap:16px;align-items:flex-start}
/* The mockup's feature icons are rounded squares in cream with a sage stroke,
   not circles. */
.em .feat .fic{
  flex:0 0 46px;width:46px;height:46px;border-radius:12px;background:var(--cream);
  color:var(--sage);display:flex;align-items:center;justify-content:center;
}
.em .feat .fic .ic{width:24px;height:24px}
.em .feat h4{margin-bottom:4px;font-size:1.05rem}
.em .feat p{margin:0;font-size:.92rem;line-height:1.6}

/* -------------------------------------------------- chips / checklists */
.em .chips{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0}
.em .chips li{
  display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:40px;padding:10px 20px;font-size:.9rem;margin:0;
}
.em .band-cream .chips li{background:#fbf6f1}
.em .chips li .ic{width:17px;height:17px;color:var(--sage);flex:0 0 17px}
.em .pay-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px}
.em .pay-pill{
  display:inline-block;background:var(--sage);border-radius:40px;padding:10px 22px;
  font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:1px;color:#fff;
}

/* -------------------------------------------------- reviews */
.em .reviews>.elementor-container{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:12px}
.em .review{
  background:var(--cream);border:1px solid var(--line);padding:34px 30px;
  border-radius:12px;text-align:center;margin:0;
}
body.em-home .review{background:#fff;border-color:transparent;box-shadow:0 10px 30px rgba(0,0,0,.05);border-radius:6px}
.em .review .stars{color:var(--gold);letter-spacing:3px;margin-bottom:14px;font-size:1.05rem}
.em .review blockquote{margin:0;padding:0;border:0}
.em .review p{font-family:var(--head);font-style:italic;color:var(--dark);font-size:1.02rem;line-height:1.5;margin:0}
body.em-home .review p{font-family:var(--sans);color:var(--text);font-size:.94rem}
.em .review .who{
  display:block;margin-top:14px;font-family:var(--sans);font-weight:600;color:var(--sage);
  font-style:normal;letter-spacing:1px;font-size:.82rem;
}

/* -------------------------------------------------- CTA band */
.em .cta{
  background-color:var(--deep);background-size:cover;background-position:center;
  color:#fff;text-align:center;padding:110px 0;position:relative;
}
.em .cta::before{content:"";position:absolute;inset:0;background:rgba(47,58,43,.9)}
.em .cta>*{position:relative;z-index:2}
.em .cta h2,
.em .cta .elementor-widget-heading .elementor-heading-title{color:#fff;margin-bottom:10px}
.em .cta .elementor-widget-text-editor{color:rgba(255,255,255,.82)}
.em .pillars .elementor-widget-heading .elementor-heading-title{color:#fff}
.em .pillars .pillar .elementor-widget-text-editor{color:rgba(255,255,255,.68);font-size:.92rem}
.em .stats-band .elementor-widget-heading .elementor-heading-title{color:#fff}
.em .team-card.join .elementor-widget-heading .elementor-heading-title{color:#fff}
.em .team-card.join .elementor-widget-text-editor{color:rgba(255,255,255,.8)}
.em .bcard.feature .elementor-widget-heading .elementor-heading-title{color:#fff}
.em .cta .eyebrow{color:#b9cbb0}
.em .cta p{color:rgba(255,255,255,.82);max-width:640px;margin:0 auto 26px}

/* -------------------------------------------------- FAQ */
.em .faq .wrap{max-width:1040px}
.em .faq-list{display:grid;gap:14px;align-items:start}
@media(min-width:900px){.em .faq-list{grid-template-columns:1fr 1fr;gap:14px 26px}}
.em details.qa{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:0;overflow:hidden;
}
.em .band-cream details.qa{background:#fbf6f1}
.em details.qa>summary{
  list-style:none;cursor:pointer;padding:18px 48px 18px 22px;position:relative;
  font-family:var(--head);font-size:1.04rem;color:var(--dark);font-weight:600;line-height:1.35;
}
.em details.qa>summary::-webkit-details-marker{display:none}
.em details.qa>summary::after{
  content:"";position:absolute;right:22px;top:calc(50% - 5px);width:10px;height:10px;
  border-right:2px solid var(--sage);border-bottom:2px solid var(--sage);
  transform:rotate(45deg);transition:transform .25s;
}
.em details.qa[open]>summary::after{transform:rotate(-135deg);top:calc(50% - 2px)}
.em details.qa .a{padding:0 22px 20px;font-size:.95rem}
.em details.qa .a p:last-child{margin-bottom:0}

/* -------------------------------------------------- visit / map */
.em .visit-grid>.elementor-container{display:grid;grid-template-columns:1fr 1.25fr;gap:44px;align-items:stretch}
.em .visit-info .info-row{display:flex;gap:16px;margin-bottom:26px;align-items:flex-start}
.em .visit-info .ic-wrap{
  flex:0 0 50px;width:50px;height:50px;border-radius:50%;background:var(--sage);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.em .visit-info .ic-wrap .ic{width:24px;height:24px}
.em .visit-info h4{color:var(--dark);margin-bottom:3px;font-size:1.1rem}
.em .visit-info p{margin:0;font-size:.95rem;color:var(--text)}
.em .visit-info a:hover{color:var(--sage)}
.em .em-map iframe,.em .visit-map iframe{
  width:100%;height:100%;min-height:400px;border:0;border-radius:14px;display:block;
  box-shadow:0 20px 50px rgba(60,50,40,.12);
}

/* -------------------------------------------------- contact card */
/* The mockup's contact card is one rounded panel that rides up over the banner.
   The card used to be styled on an empty <div> that sat ABOVE the content, so it
   backed nothing and the overlap never happened. The card is the inner section
   that actually holds the two columns. */
.em .contact-sec{padding-bottom:90px}
.em .contact-anchor{height:0;overflow:hidden}
.em .contact-sec .contact-inner{
  max-width:1280px;margin:-100px auto 0;position:relative;z-index:5;
  background:#fff;border-radius:18px;box-shadow:0 34px 80px rgba(60,50,40,.16);overflow:hidden;
}
.em .contact-sec .contact-inner>.elementor-container{
  display:grid;grid-template-columns:.92fr 1.08fr;max-width:none;padding:0;
}
.em .contact-sec .contact-inner>.elementor-container>.elementor-column{width:100%;max-width:100%}
.em .contact-sec .contact-inner>.elementor-container>.elementor-column>.elementor-widget-wrap{padding:0}
@media(max-width:900px){
  .em .contact-sec .contact-inner{margin-top:-40px;max-width:calc(100% - 2*var(--gutter))}
  .em .contact-sec .contact-inner>.elementor-container{grid-template-columns:1fr}
}
.em .ci-left{padding:54px 48px}
.em .ci-left h2{margin-bottom:10px}
.em .ci-left .intro{color:var(--text);font-size:.96rem;margin-bottom:28px}
.em .info-row{display:flex;gap:16px;margin-bottom:24px;align-items:flex-start}
.em .info-row .ic-wrap{
  flex:0 0 50px;width:50px;height:50px;border-radius:50%;background:var(--sage);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.em .info-row .ic-wrap .ic{width:24px;height:24px}
.em .info-row h4{font-family:var(--head);color:var(--dark);margin-bottom:3px;font-size:1.12rem}
.em .info-row p{margin:0;font-size:.94rem;color:var(--text)}
.em .social-row{margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.em .social-row .lbl{
  font-family:var(--sans);letter-spacing:2px;text-transform:uppercase;font-size:.72rem;
  color:var(--dark);font-weight:600;margin-bottom:14px;
}
.em .social-row .icons{display:flex;gap:12px}
.em .social-row a{
  width:42px;height:42px;border-radius:50%;background:var(--cream);color:var(--deep);
  display:flex;align-items:center;justify-content:center;
}
.em .social-row a .ic{width:20px;height:20px}
.em .social-row a:hover{background:var(--sage);color:#fff}
.em .ci-right{background:var(--cream);padding:54px 48px}
.em .ci-right h2{margin-bottom:22px}

/* -------------------------------------------------- forms */
.em .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.em .field{margin-bottom:16px}
.em .field label{
  display:block;font-family:var(--sans);font-size:.74rem;letter-spacing:1px;
  text-transform:uppercase;color:var(--dark);margin-bottom:6px;font-weight:500;
}
.em .field input,.em .field textarea,.em .field select{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:6px;
  font-family:var(--sans);font-size:.95rem;color:var(--text);background:#fff;
}
.em .field textarea{min-height:130px;resize:vertical}
.em .field input:focus,.em .field textarea:focus,.em .field select:focus{outline:none;border-color:var(--sage)}
.em .field.req label::after{content:" *";color:var(--sage)}
.em .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.em .form-note{margin-top:14px;font-size:.88rem}
.em .form-ok{
  background:#eef4ee;border:1px solid var(--sage);color:var(--deep);
  border-radius:8px;padding:16px 18px;margin-bottom:20px;
}
.em .form-err{
  background:#fbeeee;border:1px solid #c9776f;color:#8a3a33;
  border-radius:8px;padding:16px 18px;margin-bottom:20px;
}
.em .form-fine{font-size:.82rem;color:var(--text);margin-top:14px;line-height:1.6}

/* -------------------------------------------------- footer */
.site-footer{background:var(--dark);color:#cfcabf;padding:60px 0 0}
body.em-home .site-footer{color:#c9cbca}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
.site-footer h4{
  font-family:var(--sans);color:#fff;font-size:.95rem;letter-spacing:2px;
  text-transform:uppercase;margin-bottom:18px;
}
.site-footer p,.site-footer a{font-size:.92rem;color:#b7b2a8}
body.em-home .site-footer p,body.em-home .site-footer a{color:#b7b9b8}
.site-footer a:hover{color:var(--sage)}
.site-footer .footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:9px}
.socials{display:flex;gap:12px;margin-top:14px}
.socials a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.socials a .ic{width:18px;height:18px}
.socials a:hover{background:var(--sage);color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);margin-top:48px;padding:22px 0;
  text-align:center;font-size:.82rem;color:#8f8b81;
}
.footer-bottom p{margin:0 0 8px;font-size:.82rem}
.footer-bottom .f-legal a{font-size:.82rem}
.footer-bottom .f-legal span{margin:0 8px;opacity:.5}
.footer-bottom .f-disc{max-width:760px;margin:10px auto 0;opacity:.75;line-height:1.6}

/* ==========================================================================
   Elementor shim
   Pages are built from native Elementor sections; these rules make the
   Elementor container behave like the mockups' .wrap and neutralise the
   kit's own spacing where our bands own it.
   ========================================================================== */
.em .elementor-section.em-band>.elementor-container{
  max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);
}
.em .elementor-section.em-band.wide>.elementor-container{max-width:1360px}
.em .elementor-section.em-band.narrow>.elementor-container{max-width:880px}
.em .elementor-section.em-band{padding:78px 0}
.em .elementor-section.em-band.tight{padding:54px 0}
.em .elementor-section.em-band.flush{padding:0}
/* A flush band is full-bleed: the home hero spans the viewport in the
   mockup, and the boxed 1200px container was insetting it. */
.em .elementor-section.em-band.flush>.elementor-container{max-width:none;padding-left:0;padding-right:0}
/* Elementor's own rule is (0,2,0) via :not(); match at (0,3,0) to win. */
.em .elementor-widget.elementor-widget-heading:not(:last-child){margin-block-end:14px}
.em .elementor-widget.elementor-widget-text-editor:not(:last-child){margin-block-end:18px}
.em .elementor-widget.elementor-widget-button:not(:last-child){margin-block-end:22px}
.em .elementor-widget-heading .elementor-heading-title{font-family:var(--head);color:var(--dark)}
.em .elementor-widget-text-editor{color:var(--text)}
.em .elementor-widget-text-editor p:last-child{margin-bottom:0}
.em .elementor-element.em-center{text-align:center}
.em .elementor-element.em-center .em-btns{justify-content:center}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:1200px){
  .em .hero-copy{margin-left:var(--gutter)}
  .em .hero-controls{left:calc(var(--gutter) + 56px)}
}
@media(max-width:1100px){
  .nav .nav-list{gap:18px}
  .nav{gap:18px}
  .nav .nav-item>a{font-size:.85rem;letter-spacing:.5px}
  .logo .logo-img{height:72px}
  .em .services-grid{grid-template-columns:repeat(4,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:980px){
  .em .services-grid{grid-template-columns:repeat(3,1fr)}
  .em .bcards{grid-template-columns:repeat(2,1fr)}
  .em .cards,.em .cards.four{grid-template-columns:repeat(2,1fr)}
  .em .stats .row{grid-template-columns:repeat(2,1fr);gap:32px}
}
@media(max-width:900px){
  .em .split,.em .pillars .wrap,.em .commit .wrap,.em .visit-grid,.em .contact-card{
    grid-template-columns:1fr;gap:36px;
  }
  .em .split.rev .split-media{order:0}
  .em .pillars .grid{gap:28px 30px}
  .em .team-grid{grid-template-columns:repeat(2,1fr)}
  .em .cat-grid{grid-template-columns:1fr;gap:40px}
  .em .about-panel{padding:48px 30px}
  .em .about-photo{margin-left:0;margin-top:20px}
  .em .about-photo .elementor-widget-html .about-photo-img,.em .about-photo img{aspect-ratio:16/9}
  .em .commit .callcard{position:static;max-width:none;margin-top:18px}
  .em .ci-left,.em .ci-right{padding:42px 30px}
  .em .contact-wrap{margin-top:-70px}
  .em .cta,.em .pagehead{background-attachment:scroll}
  .em .hero-card{min-height:520px}
  .em .hero-photo{width:100%;opacity:.42}
  .em .hero-card::after{background:linear-gradient(90deg,rgba(35,43,40,.94) 0%,rgba(35,43,40,.78) 60%,rgba(35,43,40,.6) 100%)}
  .em .hero-copy{padding:56px 30px 96px;max-width:none}
  .em .hero-tags{display:none}
}
@media(max-width:820px){
  .em .visit-map iframe,.em .em-map iframe{min-height:320px}
}
@media(max-width:768px){
  .menu-toggle{display:block}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(340px,86vw);background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:92px 24px 32px;
    transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;
    box-shadow:-12px 0 40px rgba(0,0,0,.18);z-index:1200;
  }
  body.nav-open .nav{transform:translateX(0)}
  body.nav-open{overflow:hidden}
  .nav .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav .nav-item{border-bottom:1px solid var(--line)}
  .nav .nav-item>a{display:block;padding:14px 0;font-size:.95rem}
  .nav .caret{position:absolute;right:0;top:8px;padding:10px}
  .nav .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-radius:0;padding:0 0 10px 14px;display:none;min-width:0;
  }
  .nav .nav-item.open>.sub-menu{display:block}
  .nav .sub-menu a{padding:8px 0}
  .nav .sub-menu a:hover{background:transparent}
  .nav .nav-portal{margin-top:22px;justify-content:center}
  .nav .nav-phone{margin-top:12px;justify-content:center}
  .em section:not(.elementor-inner-section),.em .elementor-section.em-band{padding:56px 0}
  .em .services-grid{grid-template-columns:repeat(2,1fr);gap:32px 18px}
  .em .team-grid,.em .reviews,.em .cards,.em .cards.two,.em .cards.four,
  .em .bcards,.em .pillars .grid,.em .frow{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .em .pagehead{padding:64px var(--gutter) 72px}
  .em .statement{padding:60px 0 64px}
  .em .cta{padding:74px 0}
  .em .about-feature{padding:56px var(--gutter)}
  .em .hero-controls{left:30px;bottom:24px}
}
@media(max-width:480px){
  :root{--gutter:18px}
  .em .stats .row{grid-template-columns:1fr}
  .em .services-grid{grid-template-columns:1fr}
  .em .hero-copy{padding:48px 22px 92px}
  .em .ci-left,.em .ci-right{padding:34px 22px}
  .em a.btn,.em .em-btns a.btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  .em *,.em *::before,.em *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

@media print{
  .site-header,.site-footer,.menu-toggle,.em .cta,.em .em-map{display:none !important}
  .em{color:#000}
}

/* ==========================================================================
   Elementor icon-box: the mockups' circular icon medallions.
   Elementor renders .elementor-icon inside .elementor-widget-icon-box, so the
   mockup's .cat-icon / .service .icon rules never match on their own.
   ========================================================================== */
.em .elementor-widget-icon-box{text-align:center}
.em .elementor-widget-icon-box .elementor-icon-box-wrapper{display:block}
.em .elementor-widget-icon-box .elementor-icon-box-icon{margin:0 auto 20px;display:block}
.em .elementor-widget-icon-box .elementor-icon{
  width:116px;height:116px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:var(--sage);color:#f4eddd;
  transition:transform .3s ease,background .3s ease;padding:0;font-size:inherit;
}
.em .elementor-widget-icon-box .elementor-icon svg{
  width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.em .elementor-widget-icon-box:hover .elementor-icon{transform:translateY(-6px)}
.em .elementor-widget-icon-box .elementor-icon-box-title{
  font-family:var(--head);font-size:1.12rem;margin:0 0 8px;line-height:1.25;
}
.em .elementor-widget-icon-box .elementor-icon-box-title a{color:var(--dark)}
.em .elementor-widget-icon-box .elementor-icon-box-title a:hover{color:var(--sage)}
.em .elementor-widget-icon-box .elementor-icon-box-description{
  font-size:.92rem;line-height:1.65;color:var(--text);margin:0;
}
/* Earthy rotation across each row, as the mockups specify. */
.em .em-grid .em-cardcol:nth-child(3n+1) .elementor-icon{background:#8fa393;color:#f4eddd}
.em .em-grid .em-cardcol:nth-child(3n+2) .elementor-icon{background:#ece5d7;color:#54695c}
.em .em-grid .em-cardcol:nth-child(3n)   .elementor-icon{background:#5f7468;color:#f4eddd}
/* Featured treatment columns are larger, per the home mockup. */
.em .em-grid.cols-3 .em-cardcol.cat .elementor-icon{width:134px;height:134px}
.em .em-grid.cols-3 .em-cardcol.cat .elementor-icon svg{width:62px;height:62px}
.em .em-grid.cols-3 .em-cardcol.cat .elementor-icon-box-title{font-size:1.5rem;margin-bottom:12px}
.em .em-grid.cols-3 .em-cardcol.cat .elementor-icon-box-description{font-size:.96rem;max-width:320px;margin:0 auto}
/* Benefit grids (4-up) use the smaller medallion of the service mockup. */
.em .em-grid.cols-4 .elementor-icon{width:76px;height:76px}
.em .em-grid.cols-4 .elementor-icon svg{width:42px;height:42px}
.em .em-grid.cols-4 .elementor-icon-box-title{font-size:1.02rem}
.em .em-grid.cols-4 .elementor-icon-box-description{font-size:.88rem}
/* 5-up service grid on the home page. */
.em .em-grid.cols-5 .elementor-icon{width:104px;height:104px}
.em .em-grid.cols-5 .elementor-icon svg{width:48px;height:48px}

/* Row rhythm */
.em .em-grid,.em .team-grid,.em .reviews,.em .stats-row{margin-bottom:28px}
.em .em-grid:last-child,.em .team-grid:last-child,.em .reviews:last-child,.em .stats-row:last-child{margin-bottom:0}
.em .em-sectionhead{margin-bottom:44px}
.em .em-spacer-col{min-height:1px}

/* Icon-list chips rendered by Elementor */
.em .elementor-widget-icon-list .elementor-icon-list-items.elementor-inline-items{
  display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;
}
.em .elementor-widget-icon-list .elementor-inline-items .elementor-icon-list-item{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:40px;
  padding:10px 20px;font-size:.9rem;
}
.em .band-cream .elementor-widget-icon-list .elementor-inline-items .elementor-icon-list-item{background:#fbf6f1}
.em .elementor-widget-icon-list .elementor-icon-list-icon svg{
  width:17px;height:17px;fill:none;stroke:var(--sage);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.em .elementor-widget-icon-list .elementor-icon-list-text{color:var(--text)}

/* Accordion (FAQ) */
.em .elementor-widget-accordion .elementor-accordion-item{
  background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden;
}
.em .band-cream .elementor-widget-accordion .elementor-accordion-item,
.em .faq .elementor-widget-accordion .elementor-accordion-item{background:#fbf6f1}
.em .elementor-widget-accordion .elementor-tab-title{
  font-family:var(--head);font-size:1.04rem;color:var(--dark);font-weight:600;
  padding:18px 22px;line-height:1.35;border:0;
}
.em .elementor-widget-accordion .elementor-tab-title a{color:var(--dark)}
.em .elementor-widget-accordion .elementor-tab-title.elementor-active{color:var(--sage)}
.em .elementor-widget-accordion .elementor-tab-content{
  padding:0 22px 20px;font-size:.95rem;border:0;color:var(--text);
}
.em .elementor-widget-accordion .elementor-tab-content p:last-child{margin-bottom:0}
.em .elementor-widget-accordion .elementor-accordion-icon{color:var(--sage)}

/* Star rating */
.em .elementor-widget-star-rating .elementor-star-rating{color:var(--gold);font-size:1.05rem;letter-spacing:3px}
.em .review .elementor-widget-star-rating{text-align:center}

/* Google map widget */
.em .em-map-w iframe,.em .visit-map iframe,.em iframe.em-map{
  border-radius:14px;box-shadow:0 20px 50px rgba(60,50,40,.12);width:100%;display:block;border:0;
}
.em .visit-map .em-map-w,.em .visit-map .em-map-w>.elementor-widget-container{height:100%}
.em .visit-map iframe.em-map{min-height:400px;height:100%}
.em .review-btn{margin-top:6px}

/* The About hero photo is the one portrait crop in the split band family. */
.em .about-hero .split-media .elementor-widget-image.photo img{aspect-ratio:4/5;object-position:center 12%}


/* -------------------------------------------------- HTML sitemap page */
.em .em-sitemap h2{
  font-size:1.25rem;margin:2.2rem 0 .8rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--line);
}
.em .em-sitemap h2:first-child{margin-top:0}
.em .em-sitemap ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.35rem 1.5rem;
}
.em .em-sitemap li{margin:0}
.em .em-sitemap a{color:var(--sage-dark);text-decoration:underline;text-underline-offset:3px}
.em .em-sitemap a:hover{color:var(--dark)}

/* -------------------------------------------------- Cherry financing embed */
/* The widget is a third-party script and styles itself; this only gives it a
   sane measure and keeps it from bleeding past the band on a phone. */
.em .em-cherry{max-width:960px;margin:0 auto;overflow-x:hidden}
.em .em-cherry img{margin:0 auto}

/* ==========================================================================
   Elementor grid shim, part 2
   The stylesheet was written against the mockups' hand-written markup, where a
   grid class sits directly on the element whose children are the cards. The
   builder emits Elementor sections instead, and a section's only child is
   .elementor-container — so a grid declared on the section had exactly one item
   and squeezed the whole row into the first track. These rules put the grid on
   the container and let the Elementor columns be the grid items.
   ========================================================================== */
.em .team-grid>.elementor-container>.elementor-column,
.em .reviews>.elementor-container>.elementor-column,
.em .pillars .grid>.elementor-container>.elementor-column,
.em .visit-grid>.elementor-container>.elementor-column{
  width:100%;max-width:100%;
}
/* Elementor pads every populated column by 10px for its own gutter; inside a
   real grid that fights the gap and dents the card padding. */
.em .team-grid>.elementor-container>.elementor-column>.elementor-widget-wrap,
.em .reviews>.elementor-container>.elementor-column>.elementor-widget-wrap,
.em .pillars .grid>.elementor-container>.elementor-column>.elementor-widget-wrap,
.em .visit-grid>.elementor-container>.elementor-column>.elementor-widget-wrap{
  padding:0;
}
/* The card visuals live on the widget wrap so every card in a row is the same
   height, rather than on the column, which grid stretches anyway. */
.em .team-card>.elementor-widget-wrap{
  background:#fbf6f1;border:1px solid var(--line);border-radius:14px;
  padding:36px 28px;height:100%;align-content:flex-start;
  transition:box-shadow .3s ease,transform .3s ease;
}
.em .team-card:hover>.elementor-widget-wrap{box-shadow:0 22px 48px rgba(60,50,40,.12);transform:translateY(-5px)}
.em .team-card.join>.elementor-widget-wrap{background:var(--deep);border-color:var(--deep);align-content:center;text-align:center}
.em .team-card,.em .team-card:hover{background:none;border:0;transform:none;box-shadow:none;padding:0}
.em .review>.elementor-widget-wrap{
  background:var(--cream);border:1px solid var(--line);border-radius:12px;
  padding:34px 30px;height:100%;align-content:flex-start;
}
.em .review{background:none;border:0;padding:0}
body.em-home .review>.elementor-widget-wrap{background:#fff;border-color:transparent;box-shadow:0 10px 30px rgba(0,0,0,.05);border-radius:6px}

/* ==========================================================================
   Interior card bands follow the SERVICE mockup, not the home mockup
   eowc-service-hormone-mockup_2.html renders these as white bordered cards
   with a left-aligned rounded-square icon tile, and makes the first card of the
   band a deep-green feature card. The circular medallions below belong to the
   home page and are scoped to it.
   ========================================================================== */
body.em:not(.em-home) .cards-band .em-grid>.elementor-container{gap:24px}
body.em:not(.em-home) .cards-band .em-cardcol>.elementor-widget-wrap{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:30px 26px;height:100%;align-content:flex-start;
  transition:transform .3s ease,box-shadow .3s ease;
}
body.em:not(.em-home) .cards-band .em-cardcol:hover>.elementor-widget-wrap{
  transform:translateY(-5px);box-shadow:0 20px 44px rgba(60,50,40,.1);
}
body.em:not(.em-home) .cards-band .elementor-widget-icon-box,
body.em:not(.em-home) .cards-band .elementor-widget-icon-box .elementor-icon-box-wrapper,
body.em:not(.em-home) .cards-band .elementor-widget-icon-box .elementor-icon-box-content{text-align:left}
body.em:not(.em-home) .cards-band .elementor-widget-icon-box .elementor-icon-box-icon{margin:0 0 18px;text-align:left}
body.em:not(.em-home) .cards-band .em-cardcol .elementor-icon{
  width:56px;height:56px;border-radius:14px;background:var(--sage);color:#fff;
}
body.em:not(.em-home) .cards-band .em-cardcol .elementor-icon svg{width:30px;height:30px}
body.em:not(.em-home) .cards-band .elementor-icon-box-title{font-size:1.12rem;margin:0 0 7px}
body.em:not(.em-home) .cards-band .elementor-icon-box-description{font-size:.88rem;line-height:1.55}
/* One feature card per band, exactly as the mockup has it. The builder marks
   it, because the rows are siblings of the section head and :first-of-type on
   a row therefore matches the head instead. */
body.em:not(.em-home) .cards-band .em-cardcol.feature>.elementor-widget-wrap{
  background:var(--deep);border-color:var(--deep);
}
body.em:not(.em-home) .cards-band .em-cardcol.feature .elementor-icon{
  background:rgba(255,255,255,.14);color:#fff;
}
body.em:not(.em-home) .cards-band .em-cardcol.feature .elementor-icon-box-title,
body.em:not(.em-home) .cards-band .em-cardcol.feature .elementor-icon-box-title a{color:#fff}
body.em:not(.em-home) .cards-band .em-cardcol.feature .elementor-icon-box-description{color:rgba(255,255,255,.75)}
/* The medallion rotation and the oversized cat/service icons are the HOME
   mockup's language. Keep them off every other page. */
body.em:not(.em-home) .em-grid .em-cardcol .elementor-icon{background:var(--sage);color:#fff}
body.em:not(.em-home) .em-grid.cols-4 .elementor-icon{width:56px;height:56px}
body.em:not(.em-home) .em-grid.cols-4 .elementor-icon svg{width:30px;height:30px}

@media(max-width:980px){
  .em .team-grid>.elementor-container{grid-template-columns:repeat(2,1fr)}
  .em .reviews>.elementor-container{grid-template-columns:1fr}
  .em .visit-grid>.elementor-container{grid-template-columns:1fr}
  .em .pillars .grid>.elementor-container{grid-template-columns:1fr}
}
@media(max-width:700px){
  .em .team-grid>.elementor-container{grid-template-columns:1fr}
}

/* ---- Full-width pass: Hello Elementor boxes .site-header/.site-footer at
   1140px; make both full-bleed, with the inner container carrying the width. */
body.em .site-header,body.em .site-footer{max-width:none !important;width:100%;margin:0}
body.em .site-footer{padding:64px 0 0}
body.em .site-footer>.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);width:100%;box-sizing:border-box}
body.em .footer-bottom{margin-top:48px;padding:22px var(--gutter)}
body.em .footer-bottom .container{max-width:var(--maxw);margin:0 auto}

/* Home "About EOWC Medical" heading sits on the dark green column: white text. */
.em .about-feature .elementor-widget-heading .elementor-heading-title{color:#fff}
.em .about-feature .elementor-widget-heading .elementor-heading-title em,
.em .about-feature .elementor-widget-heading .elementor-heading-title span{color:var(--sage-light,#a9c2b3)}

/* Header swap 2026-10-06: top bar carries the phone number, the primary-nav pill is the
   Patient Portal login. On phones the drawer shows the portal pill filled, the phone outlined. */
.topbar{background:var(--deep,#2f3a2b);color:#fff}
.topbar-inner{max-width:var(--maxw);margin:0 auto;padding:7px var(--gutter);display:flex;justify-content:flex-end}
.topbar .topbar-phone{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;text-decoration:none}
.topbar .topbar-phone:hover{color:#cfe0d5}
.topbar .topbar-phone .ic{width:15px;height:15px}
.nav .nav-phone{display:none}
.site-footer .footer-portal{text-decoration:underline;color:#fff}
@media(max-width:900px){
  .nav .nav-phone{display:inline-flex;align-items:center;gap:9px;font-weight:500;color:var(--deep);border:1px solid var(--deep);border-radius:40px;padding:10px 20px;white-space:nowrap}
  .nav .nav-phone .ic{width:16px;height:16px}
}

/* Hero tag for the active slide */
.em .hero-tags li.on a{color:#fff;font-weight:600}
.em .hero-tags li.on::before{background:#fff}
.em .hero-copy h1,.em .hero-copy p{transition:opacity .25s ease}

/* IV blends: the green card follows the pointer. Whichever card is hovered or
   focused turns green; the default (first) card steps back to white meanwhile. */
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol>.elementor-widget-wrap{transition:background .25s ease,border-color .25s ease}
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol .elementor-icon,
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol .elementor-icon-box-title,
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol .elementor-icon-box-description{transition:color .25s ease,background .25s ease}
body.em:not(.em-home) .iv-blends.cards-band:has(.em-cardcol:hover) .em-cardcol.feature:not(:hover)>.elementor-widget-wrap,
body.em:not(.em-home) .iv-blends.cards-band:has(.em-cardcol:focus-within) .em-cardcol.feature:not(:focus-within)>.elementor-widget-wrap{background:#fff;border-color:var(--line)}
body.em:not(.em-home) .iv-blends.cards-band:has(.em-cardcol:hover) .em-cardcol.feature:not(:hover) .elementor-icon{background:var(--sage);color:#fff}
body.em:not(.em-home) .iv-blends.cards-band:has(.em-cardcol:hover) .em-cardcol.feature:not(:hover) .elementor-icon-box-title{color:var(--dark)}
body.em:not(.em-home) .iv-blends.cards-band:has(.em-cardcol:hover) .em-cardcol.feature:not(:hover) .elementor-icon-box-description{color:var(--text)}
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol:hover>.elementor-widget-wrap,
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol:focus-within>.elementor-widget-wrap{background:var(--deep);border-color:var(--deep)}
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol:hover .elementor-icon,
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol:focus-within .elementor-icon{background:rgba(255,255,255,.14);color:#fff}
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol:hover .elementor-icon-box-title,
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol:focus-within .elementor-icon-box-title{color:#fff}
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol:hover .elementor-icon-box-description,
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol:focus-within .elementor-icon-box-description{color:rgba(255,255,255,.75)}

/* IV blends: round IV-bag badge, as in the brand reference */
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol .elementor-icon{width:68px;height:68px;border-radius:50%}
body.em:not(.em-home) .iv-blends.cards-band .em-cardcol .elementor-icon svg{width:42px;height:42px}

/* Embedded video band */
.em .em-video-band{padding:78px 0}
.em .em-video-wrap{max-width:960px;margin:0 auto;padding:78px var(--gutter);text-align:center}
.em .em-video-wrap h2{margin:6px 0 28px}
.em .em-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 20px 44px rgba(60,50,40,.14)}
.em .em-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:768px){.em .em-video-wrap{padding:48px var(--gutter)}}

/* Chip rows sit centred under their centred heading */
.em .chips-band .elementor-icon-list-items{justify-content:center}
.em .chips-band .elementor-widget-icon-list,.em .chips-band .elementor-icon-list-items{width:100%}

/* Show a photo whole, uncropped (the office building) */
.em .full-photo .split-media .elementor-widget-image.photo img{aspect-ratio:auto;height:auto;object-fit:contain}

/* Team cards: restore the card padding (an earlier "padding:0" reset was
   outranking it, so avatars and text touched the card edge), then size and
   crop the headshots on the face. */
.em .team-grid>.elementor-container>.elementor-column.team-card>.elementor-widget-wrap{padding:40px 30px 36px}
.em .team-card .elementor-widget-image.team-avatar{
  width:156px;height:156px;margin:0 auto 22px;border-radius:50%;overflow:hidden;
  box-shadow:0 10px 26px rgba(60,50,40,.18);background:var(--cream-2);
}
.em .team-card .elementor-widget-image.team-avatar .elementor-widget-container,
.em .team-card .elementor-widget-image.team-avatar a{display:block;width:100%;height:100%;margin:0}
.em .team-card .elementor-widget-image.team-avatar img{
  display:block;width:100%;height:100%;max-width:none;margin:0;border-radius:0;box-shadow:none;
  object-fit:cover;object-position:50% 25%;
}
.em .team-card img[src*="team-rick-barnes"]{transform:scale(2.5);transform-origin:52% 31%;object-position:50% 50%}
.em .team-card img[src*="team-malinda-umholtz"]{transform:scale(1.15);transform-origin:56% 38%;object-position:60% 30%}
.em .team-card img[src*="team-monica"]{transform:scale(1.1);transform-origin:44% 42%;object-position:38% 35%}
.em .team-card img[src*="team-christa-mckellar"]{object-position:50% 20%}
.em .team-card img[src*="team-kirsten"]{object-position:50% 25%}

/* Reviews slider: one review at a time */
.em .reviews-band.is-slider .reviews>.elementor-container{display:block;max-width:780px;margin:12px auto 0;position:relative}
.em .reviews-band.is-slider .review{display:none;width:100%;text-align:center}
.em .reviews-band.is-slider .review.is-active{display:block;animation:revfade .5s ease}
.em .reviews-band.is-slider .review>.elementor-widget-wrap{padding:40px 44px;justify-content:center}
.em .reviews-band.is-slider .review p{font-size:1.2rem;line-height:1.6}
body.em-home .reviews-band.is-slider .review p{font-size:1.08rem}
.em .reviews-band.is-slider .review .elementor-widget-text-editor{width:100%}
@keyframes revfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rev-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.rev-arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--sage);background:transparent;color:var(--sage);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,color .2s}
.rev-arrow:hover,.rev-arrow:focus-visible{background:var(--sage);color:#fff}
.rev-arrow.prev svg{transform:rotate(180deg)}
.rev-dots{display:flex;gap:10px}
.rev-dot{width:10px;height:10px;border-radius:50%;border:0;padding:0;background:rgba(110,137,122,.3);cursor:pointer;transition:background .2s,transform .2s}
.rev-dot.active{background:var(--sage);transform:scale(1.25)}
@media(prefers-reduced-motion:reduce){.em .reviews-band.is-slider .review.is-active{animation:none}}

/* Footer column headings were inheriting the dark heading colour and vanishing on the dark footer */
body.em .site-footer h4{color:#fff}

/* Reviews slider controls: the theme styles bare <button>s, so be explicit */
body.em .rev-nav .rev-arrow{box-sizing:border-box;width:42px;height:42px;min-width:0;padding:0;border-radius:50%;border:1px solid var(--sage);background:transparent;color:var(--sage);box-shadow:none;line-height:1}
body.em .rev-nav .rev-arrow:hover,body.em .rev-nav .rev-arrow:focus-visible{background:var(--sage);color:#fff}
body.em .rev-nav .rev-dot{box-sizing:border-box;width:10px;height:10px;min-width:0;padding:0;border-radius:50%;border:0;background:rgba(110,137,122,.3);box-shadow:none}
body.em .rev-nav .rev-dot.active{background:var(--sage)}
.em .reviews-band.is-slider .review .elementor-widget-star-rating .elementor-star-rating__wrapper,
.em .reviews-band.is-slider .review .elementor-widget-star-rating .elementor-star-rating{text-align:center;display:block}
.em .reviews-band.is-slider .review .elementor-widget-star-rating{width:100%;text-align:center}

/* Markup round 1: Elementor kit sets a{color} at (0,2,1) and beat .site-footer a on every inner page; the home only escaped via body.em-home. Match the home values everywhere. */
body.em .site-footer p,body.em .site-footer a{color:#b7b9b8}
body.em .site-footer a:hover{color:var(--sage)}
body.em .site-footer .footer-portal{color:#fff}
body.em .site-footer .socials a{color:#fff}
/* Markup round 1 (cont.): footer is one component, so inner pages take the home footer grey, and the Elementor kit h4 family (an invalid quoted name that fell back to Arial) is overridden with Jost everywhere. */
body.em .site-footer{background:#3e4140}
body.em .site-footer h4{font-family:var(--sans);font-weight:600}
/* Markup round 1 (cont.): legal row wrapped with a stray middot at the line end on phones. Let it wrap as clean centred links with no separators. */
@media(max-width:600px){
  body.em .footer-bottom .f-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px}
  body.em .footer-bottom .f-legal span{display:none}
}