/* ==========================================================================
   Mission Oncology Partners — design system for Beaver Builder
   Paste into Appearance → Customize → Additional CSS
   (or Beaver Builder → Global Settings → Custom CSS)
   Every class is mop- prefixed so nothing collides with BB or the theme.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

:root{
  --mop-navy:#244671;
  --mop-navy-700:#1b3557;
  --mop-navy-900:#12233a;
  --mop-blue:#8aaedc;
  --mop-blue-200:#c6d9ef;
  --mop-blue-50:#eef4fb;
  --mop-ink:#2b2b2b;
  --mop-slate:#525252;
  --mop-line:#e2e8f0;
  --mop-paper:#f7f9fc;
  --mop-btn-rest:#3d6fa8;
  --mop-display:'Lora',Georgia,serif;
  --mop-body:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mop-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base typography ---------- */
body{font-family:var(--mop-body);font-size:17px;line-height:1.7;color:var(--mop-ink);}
.fl-builder-content h1,.fl-builder-content h2,.fl-builder-content h3,
.fl-builder-content h4{
  font-family:var(--mop-display);color:var(--mop-navy);font-weight:600;
  line-height:1.18;letter-spacing:-.01em;
}
.fl-builder-content h1{font-size:clamp(2.15rem,4.4vw,3.5rem);line-height:1.1;}
.fl-builder-content h2{font-size:clamp(1.7rem,2.9vw,2.5rem);}
.fl-builder-content h3{font-size:clamp(1.25rem,1.9vw,1.55rem);}

.mop-eyebrow{
  display:block;font-family:var(--mop-body);font-size:.78rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mop-blue);
  margin-bottom:14px;
}
.mop-lede,.mop-lede p{font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.65;color:var(--mop-slate);}
.mop-center,.mop-center p{text-align:center;}
.mop-narrow{max-width:820px;margin-left:auto;margin-right:auto;}
.mop-role{font-size:.9rem;color:var(--mop-slate);margin-top:-6px;}

.mop-rule{width:56px;height:3px;background:var(--mop-blue);border-radius:2px;margin-bottom:8px;}
.mop-rule--center{margin-left:auto;margin-right:auto;}

/* ---------- Buttons ---------- */
.mop-btn-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;}
.mop-btn-row--center{justify-content:center;}
.mop-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mop-body);font-size:.95rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  padding:15px 30px;border-radius:4px;border:2px solid transparent;
  transition:all .22s var(--mop-ease);line-height:1.2;
}
.mop-btn--accent{background:var(--mop-btn-rest);color:#fff;border-color:var(--mop-btn-rest);}
.mop-btn--accent:hover,.mop-btn--accent:focus{
  background:var(--mop-blue);border-color:var(--mop-blue);color:var(--mop-navy-900);
  transform:translateY(-2px);box-shadow:0 4px 12px rgba(18,35,58,.18);
}
.mop-btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.75);}
.mop-btn--ghost-light:hover,.mop-btn--ghost-light:focus{
  background:#fff;color:var(--mop-navy);border-color:#fff;transform:translateY(-2px);
}
.mop-link-arrow{
  font-family:var(--mop-body);font-weight:700;font-size:.9rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mop-navy);text-decoration:none;
  display:inline-flex;align-items:center;gap:.45em;
}
.mop-link-arrow::after{content:'→';transition:transform .2s var(--mop-ease);}
.mop-link-arrow:hover::after{transform:translateX(4px);}

/* ---------- Hero ----------
   The background is a photo module pinned behind the content, so it stays
   editable in the builder while the scrim and sizing stay under our control. */
.fl-row.mop-hero > .fl-row-content-wrap{position:relative;overflow:hidden;background:var(--mop-navy-900);}
.mop-hero .fl-col-group,.mop-hero .fl-col,.mop-hero .fl-col-content{position:static;}
/* BB positions .fl-row-content, which made it the containing block for the
   pinned photo — the image sized to the padding box instead of the row.
   !important is load-bearing here: BB's own rule is more specific. */
.mop-hero .fl-row-content{position:static !important;}
.mop-hero .fl-module.mop-hero__bg{
  position:absolute;top:0;left:0;right:0;bottom:0;margin:0;padding:0;z-index:0;
}
.mop-hero .fl-module.mop-hero__bg{z-index:0;}
.mop-hero .mop-hero__bg .fl-module-content,
.mop-hero .mop-hero__bg .fl-photo,
.mop-hero .mop-hero__bg .fl-photo-content{height:100%;width:100%;margin:0;}
.mop-hero .mop-hero__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
}
/* The scrim lives on the photo module, not on the row wrapper.
   .mop-hero__bg is positioned with z-index:0, which makes it a stacking
   context — so this ::after is sealed inside it and can never paint above the
   sibling text modules, whatever the source order or specificity. Putting the
   scrim on the wrapper made that a race we kept losing. */
.mop-hero .mop-hero__bg{display:block;}
.mop-hero .mop-hero__bg::after{
  content:'';position:absolute;top:0;left:0;
  /* Explicit 100%/100% rather than inset:0 — against this parent the inset
     form resolved to a 0x0 box and the scrim vanished. Measured on the live
     page: inset:0 gave 0x0, width/height:100% gives the full 1847x776. */
  width:100%;height:100%;
  z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(18,35,58,.94) 0%,rgba(27,53,87,.86) 42%,
             rgba(36,70,113,.55) 72%,rgba(36,70,113,.32) 100%);
}
/* Stacking: photo 0 -> scrim 1 -> content 2.
   The content modules must carry the z-index themselves. .fl-row-content is
   forced static above (to fix the photo's containing block), and z-index has
   no effect on a static element — so putting it there does nothing and the
   absolutely positioned photo paints straight over the text. */
.mop-hero .fl-module{position:relative;z-index:2;}
.mop-hero h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25);}
.mop-hero .mop-lede,.mop-hero .mop-lede p,.mop-hero .fl-rich-text p{color:#dce6f2;}

/* ---------- Navy sections ---------- */
.mop-navy h2,.mop-navy h3{color:#fff;}
.mop-navy,.mop-navy p,.mop-navy .mop-lede p{color:#c3d3e6;}
.mop-cta h2{color:#fff;}
.mop-cta p{color:#c3d3e6;}

/* ---------- Cards ---------- */
.mop-card__icon{
  width:52px;height:52px;border-radius:50%;background:var(--mop-blue-50);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.mop-card__icon svg{width:26px;height:26px;stroke:var(--mop-navy);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.mop-cards .fl-col-content{overflow:hidden;padding:0 0 28px;}
.mop-cards .fl-module:not(:first-child){padding-left:28px;padding-right:28px;}
.mop-card__img img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;display:block;}
.mop-cards .mop-eyebrow{margin-top:22px;margin-bottom:8px;}

/* ---------- Providers ---------- */
.mop-avatar img{
  width:190px;height:190px;border-radius:50%;object-fit:cover;object-position:center top;
  border:4px solid #fff;box-shadow:0 12px 32px rgba(18,35,58,.12);margin:0 auto;display:block;
}

/* ---------- Checklist ---------- */
.mop-checks{list-style:none;padding:0;margin:24px 0;}
.mop-checks li{position:relative;padding-left:34px;margin-bottom:14px;}
.mop-checks li::before{
  content:'';position:absolute;left:0;top:.45em;width:19px;height:19px;border-radius:50%;
  background:rgba(138,174,220,.16);border:1px solid rgba(138,174,220,.4);
}
.mop-checks li::after{
  content:'';position:absolute;left:6px;top:.75em;width:7px;height:4px;
  border-left:2px solid var(--mop-blue);border-bottom:2px solid var(--mop-blue);
  transform:rotate(-45deg);
}

/* ---------- Technology image pair ---------- */
.mop-img-round img{border-radius:8px;box-shadow:0 12px 32px rgba(18,35,58,.18);width:100%;}
.mop-img-sub{margin-top:-64px;margin-left:22%;position:relative;z-index:2;}
.mop-img-sub img{border:8px solid #fff;}

/* ---------- Locations ---------- */
.mop-loc{
  background:#fff;border:1px solid var(--mop-line);border-left:4px solid var(--mop-blue);
  border-radius:4px;padding:26px;margin-bottom:20px;transition:all .22s var(--mop-ease);
}
.mop-loc:hover{border-left-color:var(--mop-navy);box-shadow:0 12px 32px rgba(18,35,58,.1);
  transform:translateY(-3px);}
.mop-loc h4{font-family:var(--mop-display);color:var(--mop-navy);font-size:1.15rem;
  margin:0 0 8px;font-weight:600;}
.mop-loc address{font-style:normal;color:var(--mop-slate);font-size:.96rem;
  line-height:1.65;margin-bottom:12px;}
.mop-loc__phone{font-weight:700;color:var(--mop-navy);font-size:1.02rem;text-decoration:none;}
.mop-loc__phone:hover{color:var(--mop-blue);}

/* Responsive rules live at the end of this file. */

/* ==========================================================================
   Row-level safety net
   BB writes row padding/background into a generated cache file. If any single
   setting upsets its generator the whole node's CSS is dropped, so the design
   is pinned here as well — belt and braces, and it survives a cache rebuild.
   ========================================================================== */

/* Full-bleed backgrounds, 1200px content */
.fl-row.mop-hero,.fl-row.mop-section,.fl-row.mop-section-top,
.fl-row.mop-cards,.fl-row.mop-providers,.fl-row.mop-locs,.fl-row.mop-cta{
  width:100%;max-width:none;
}
.fl-row.mop-hero > .fl-row-content-wrap,
.fl-row.mop-section > .fl-row-content-wrap,
.fl-row.mop-cta > .fl-row-content-wrap{padding-top:88px;padding-bottom:88px;}
.fl-row.mop-section-top > .fl-row-content-wrap,
.fl-row.mop-cards > .fl-row-content-wrap,
.fl-row.mop-providers > .fl-row-content-wrap,
.fl-row.mop-locs > .fl-row-content-wrap{padding-top:0;padding-bottom:88px;}

/* Hero — directional scrim over the photo, so the headline always has ground */
.fl-row.mop-hero > .fl-row-content-wrap{
  position:relative;padding-top:150px;padding-bottom:150px;
  background-size:cover;background-position:center center;
}
.fl-row.mop-hero > .fl-row-content-wrap::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(18,35,58,.94) 0%,rgba(27,53,87,.86) 42%,
             rgba(36,70,113,.55) 72%,rgba(36,70,113,.32) 100%);
}
.fl-row.mop-hero .fl-row-content{position:relative;z-index:1;}

/* Backgrounds pinned in case the generated rule is missing */
.fl-row.mop-navy > .fl-row-content-wrap,
.fl-row.mop-cta > .fl-row-content-wrap{background-color:var(--mop-navy);}
.fl-row.mop-cards > .fl-row-content-wrap{background-color:var(--mop-paper);}

/* Contrast fix — checklist copy inherits the editor's dark colour on navy */
.mop-navy .mop-checks li,
.mop-navy .fl-rich-text,.mop-navy .fl-rich-text p,
.mop-navy .fl-rich-text li{color:#c3d3e6;}
.mop-navy .fl-rich-text strong{color:#fff;}


/* ==========================================================================
   Astra container — the theme caps content at 1240px, which is what was
   squeezing the full-width rows. Only pages that actually contain a Beaver
   Builder layout are released; everything else keeps Astra's normal width.
   ========================================================================== */
.ast-container:has(.fl-builder-content){max-width:none;padding-left:0;padding-right:0;}
.ast-container:has(.fl-builder-content) .site-main,
.ast-container:has(.fl-builder-content) .content-area,
.ast-container:has(.fl-builder-content) .entry-content{max-width:none;width:100%;}
.ast-container:has(.fl-builder-content) .ast-article-single{padding:0;border:0;}

/* ==========================================================================
   Feature cards — the four blocks under the hero. These are plain BB columns,
   so the card treatment (stroke, radius, lift, shadow) lives here.
   ========================================================================== */
.mop-section-top .fl-col-content,
.mop-cards .fl-col-content{
  background:#fff;border:1px solid var(--mop-line);border-radius:8px;
  height:100%;
  transition:transform .25s var(--mop-ease),box-shadow .25s var(--mop-ease),
             border-color .25s var(--mop-ease);
}
.mop-section-top .fl-col-content{padding:32px;}
.mop-section-top .fl-col-content:hover,
.mop-cards .fl-col-content:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 12px rgba(18,35,58,.08),0 12px 32px rgba(18,35,58,.07);
  border-color:var(--mop-blue-200);
}
.mop-section-top .fl-col,.mop-cards .fl-col{display:flex;}
.mop-section-top .fl-module,.mop-cards .fl-module{margin:0;}
.mop-section-top .fl-module-content{margin:0 0 14px;}
.mop-section-top h3{margin-bottom:12px;}
.mop-section-top .fl-rich-text p{color:var(--mop-slate);font-size:.98rem;}

/* Location cards sit in plain columns too */
.mop-locs .fl-col-content{background:transparent;border:0;padding:0;}


/* ==========================================================================
   Column gutters and equal heights
   BB columns sit flush and size to their own content. Cards need a gutter
   between them and a common height, so the group becomes a stretch flex row
   and the gutter comes from column padding (which keeps BB's width maths
   intact — setting widths directly fights the builder).
   ========================================================================== */
.mop-section-top .fl-col-group,
.mop-cards .fl-col-group,
.mop-providers .fl-col-group{
  display:flex;flex-wrap:wrap;align-items:stretch;
  margin-left:-14px;margin-right:-14px;
}
.mop-section-top .fl-col,
.mop-cards .fl-col,
.mop-providers .fl-col{display:flex;padding-left:14px;padding-right:14px;}
.mop-section-top .fl-col-content,
.mop-cards .fl-col-content{width:100%;display:flex;flex-direction:column;}

/* Push the trailing link to the bottom so card feet line up */
.mop-cards .fl-col-content .fl-module:last-child{margin-top:auto;padding-top:18px;}

/* ==========================================================================
   Vertical rhythm between stacked rows
   ========================================================================== */
.fl-row.mop-section-top > .fl-row-content-wrap{padding-bottom:96px;}
.fl-row.mop-cards > .fl-row-content-wrap{padding-bottom:96px;}
.fl-row.mop-providers > .fl-row-content-wrap{padding-bottom:96px;}
.fl-row.mop-locs > .fl-row-content-wrap{padding-bottom:96px;}

/* ==========================================================================
   Image cropping
   Photos come from stock at assorted ratios. Without a declared ratio the
   column height is dictated by whatever the photographer shot.
   ========================================================================== */
.mop-card__img img{aspect-ratio:16/10;object-fit:cover;width:100%;height:auto;}
.mop-img-round img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;}
.mop-img-sub img{aspect-ratio:4/3;object-fit:cover;}
.mop-img-sub{width:62%;margin-left:auto;margin-right:0;margin-top:-70px;}
.mop-avatar img{aspect-ratio:1/1;}

/* Technology block: keep the pair from overrunning its column */
.mop-navy .fl-col:last-child .fl-col-content{position:relative;}
@media (max-width:992px){
  .mop-img-sub{width:70%;margin-top:20px;margin-left:0;}
}


/* ==========================================================================
   RESPONSIVE
   Beaver Builder stacks columns at 768px by default, which leaves a 4-up row
   squeezed into four columns all the way down to tablet. These rules step the
   grids down earlier and tighten the vertical rhythm as the viewport narrows.
   ========================================================================== */

/* --- Tablet: 4-up becomes 2-up, 3-up becomes 2-up ------------------------ */
@media (max-width:1024px){
  .mop-section-top .fl-col,
  .mop-cards .fl-col{flex:0 0 50%;max-width:50%;width:50% !important;}
  .mop-section-top .fl-col-group,
  .mop-cards .fl-col-group{row-gap:28px;}
  .fl-row.mop-hero > .fl-row-content-wrap{padding-top:110px;padding-bottom:110px;}
  .fl-row.mop-section > .fl-row-content-wrap,
  .fl-row.mop-cta > .fl-row-content-wrap{padding-top:68px;padding-bottom:68px;}
  .fl-row.mop-section-top > .fl-row-content-wrap,
  .fl-row.mop-cards > .fl-row-content-wrap,
  .fl-row.mop-providers > .fl-row-content-wrap,
  .fl-row.mop-locs > .fl-row-content-wrap{padding-bottom:68px;}
}

/* --- Technology block stacks -------------------------------------------- */
@media (max-width:992px){
  .mop-img-sub{width:70%;margin-top:20px;margin-left:0;}
  .mop-navy .fl-col,.mop-navy .fl-col-group{display:block;width:100% !important;}
  .mop-navy .fl-col + .fl-col{margin-top:36px;}
}

/* --- Phone --------------------------------------------------------------- */
@media (max-width:768px){
  body{font-size:16px;}

  /* one column everywhere */
  .mop-section-top .fl-col,
  .mop-cards .fl-col,
  .mop-providers .fl-col{flex:0 0 100%;max-width:100%;width:100% !important;}
  .mop-section-top .fl-col-group,
  .mop-cards .fl-col-group,
  .mop-providers .fl-col-group{row-gap:20px;margin-left:0;margin-right:0;}
  .mop-section-top .fl-col,
  .mop-cards .fl-col,
  .mop-providers .fl-col{padding-left:0;padding-right:0;}

  /* the row wrapper needs its own gutter once columns lose theirs */
  .fl-builder-content .fl-row-content:not(.fl-row-full-width){padding-left:20px;padding-right:20px;}

  /* hero: shorter, and the scrim goes vertical so text always has ground */
  .fl-row.mop-hero > .fl-row-content-wrap{padding-top:76px;padding-bottom:76px;}
  .mop-hero .mop-hero__bg::after{
    background:linear-gradient(180deg,rgba(18,35,58,.92) 0%,rgba(27,53,87,.88) 60%,
               rgba(36,70,113,.80) 100%);
  }
  .mop-hero h1{font-size:2.1rem;}

  /* full-width buttons, stacked */
  .mop-btn{width:100%;}
  .mop-btn-row{flex-direction:column;gap:12px;}

  /* section rhythm */
  .fl-row.mop-section > .fl-row-content-wrap,
  .fl-row.mop-cta > .fl-row-content-wrap{padding-top:52px;padding-bottom:52px;}
  .fl-row.mop-section-top > .fl-row-content-wrap,
  .fl-row.mop-cards > .fl-row-content-wrap,
  .fl-row.mop-providers > .fl-row-content-wrap,
  .fl-row.mop-locs > .fl-row-content-wrap{padding-bottom:52px;}

  /* components */
  .mop-section-top .fl-col-content{padding:26px;}
  .mop-avatar img{width:150px;height:150px;}
  .mop-img-sub{width:78%;margin-top:16px;}
  .mop-loc{padding:22px;margin-bottom:14px;}
  .mop-narrow{max-width:none;}
  .mop-checks li{padding-left:30px;}
}

/* --- Small phone --------------------------------------------------------- */
@media (max-width:420px){
  .mop-hero h1{font-size:1.85rem;}
  .fl-builder-content h2{font-size:1.55rem;}
  .mop-section-top .fl-col-content{padding:22px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
}

/* ==========================================================================
   Final word on hero stacking — placed last so neither specificity nor source
   order can be accidentally reversed by a later edit.
   ========================================================================== */
.mop-hero .fl-module.mop-hero__bg{
  position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;margin:0;padding:0;
}
.mop-hero .fl-module:not(.mop-hero__bg){position:relative;z-index:2;}


/* ==========================================================================
   Mobile padding and overflow
   BB columns lose their gutter when they stack, and a fixed-width row content
   box can outrun a narrow viewport. These make the gutter explicit and stop
   anything running off the right edge.
   ========================================================================== */
/* box-sizing on the wrappers, but NOT max-width:100% on .fl-row-content —
   that overrode Beaver Builder's 1200px cap and let every row sprawl to the
   viewport edge, which is what cost the layout its composition. */
.fl-builder-content .fl-row-content,
.fl-builder-content .fl-col,
.fl-builder-content .fl-col-content,
.fl-builder-content .fl-module{box-sizing:border-box;}
/* Rows whose CONTENT is set to full width in Beaver Builder opt out of the
   1200px cap — that is how the Themer header paints its bars edge to edge
   while .mop-header__inner still does the 1200px centring. */
.fl-builder-content .fl-row-content:not(.fl-row-full-width){max-width:1200px;}
.fl-builder-content .fl-module{max-width:100%;}
.fl-builder-content img{max-width:100%;height:auto;}

@media (max-width:1024px){
  .mop-section-top .fl-col-content{padding:28px;}
}

@media (max-width:768px){
  /* one gutter for the whole row, since the columns no longer carry one */
  .fl-builder-content .fl-row-content{
    padding-left:22px;padding-right:22px;width:100%;
  }
  /* cards keep their own internal breathing room */
  .mop-section-top .fl-col-content{padding:26px 24px;}
  .mop-cards .fl-col-content{padding-bottom:26px;}
  .mop-cards .fl-module:not(:first-child){padding-left:24px;padding-right:24px;}
  .mop-loc{padding:22px 20px;}
  /* long words and URLs shouldn't force a horizontal scrollbar */
  .fl-builder-content p,.fl-builder-content li,
  .fl-builder-content h1,.fl-builder-content h2,
  .fl-builder-content h3{overflow-wrap:break-word;}
}


/* ==========================================================================
   TIGHTENING
   Beaver Builder gives every module the same generic margin. The mockup's
   rhythm came from deliberate, uneven spacing — a tight eyebrow, air under the
   rule, a decisive gap before a button row. So: zero BB's default, then set
   each gap on purpose. Values below were measured against the live page.
   ========================================================================== */
.fl-builder-content .fl-module > .fl-module-content{margin-top:0;margin-bottom:0;}
.fl-builder-content .fl-module-heading{margin-bottom:16px;}

/* Hero — headline holds to 680px so it breaks over two lines as designed */
.mop-hero .fl-col-content{max-width:680px;}
.mop-hero .fl-module-html:not(:last-child){margin-bottom:16px;}
.mop-hero .fl-module-heading{margin-bottom:20px;}
.mop-hero .fl-module-rich-text{margin-bottom:32px;}
.mop-hero .fl-module-html:last-child{margin-bottom:0;}
.mop-hero h1{margin:0;}
.mop-hero .mop-lede p{margin:0;}
.mop-hero .mop-eyebrow{margin-bottom:0;}

/* Section heading blocks */
.mop-section .mop-rule,.mop-section-top .mop-rule{margin-bottom:0;}
.fl-builder-content .fl-module-html:has(.mop-rule){margin-bottom:26px;}
.fl-builder-content .fl-module-html:has(.mop-head){margin-bottom:0;}
.mop-section:not(.mop-navy):not(.mop-cta) > .fl-row-content-wrap{padding-bottom:56px;}

/* Card internals */
.mop-section-top .fl-module-html:first-child{margin-bottom:20px;}
.mop-section-top .fl-module-heading{margin-bottom:12px;}
.mop-cards .fl-module-html:first-of-type{margin-bottom:4px;}
.mop-cards .fl-module-heading{margin-bottom:12px;}
.mop-providers .fl-module-heading{margin-bottom:4px;}

/* Technology and CTA */
.mop-navy .fl-module-heading{margin-bottom:16px;}
.mop-cta .fl-module-heading{margin-bottom:14px;}
.mop-cta .fl-module-rich-text{margin-bottom:28px;}

/* Narrow viewports keep the gutter but lose the cap */
@media (max-width:1240px){
  .fl-builder-content .fl-row-content{padding-left:24px;padding-right:24px;}
}

/* ==========================================================================
   BRAND WATERMARK
   The logo swirl, embedded as a data URI so it needs no media-library entry
   and no extra request (2.2KB inline). One colour variant for light grounds,
   one white for navy. Rows opt in with .mop-wm-left / .mop-wm-right, and a
   NOT auto-applied to any section. Each BB row clips its own overflow, so a
   mark this large gets sliced at the row boundary — against a matching
   background above, that reads as a hard cut rather than a bleed. It wants a
   tall container: the footer, or a deliberately tall single row.
   ========================================================================== */
:root{
  /* Root-relative on purpose: this survives the move off mission.c3alaska.com
     to the production domain. An absolute URL would silently 404 after launch. */
  --mop-swirl:url("/wp-content/uploads/2026/08/Logo-Graphic-Swirl-01.svg");
  /* Watermark colour on dark grounds. One shade under the footer's #12233a,
     so the mark reads as a tonal shift rather than a graphic sitting on top. */
  --mop-wm-dark:#0f1722;
}

.mop-wm-left > .fl-row-content-wrap,
.mop-wm-right > .fl-row-content-wrap{position:relative;overflow:hidden;}

.mop-wm-left > .fl-row-content-wrap::before,
.mop-wm-right > .fl-row-content-wrap::before{
  content:'';position:absolute;top:50%;
  width:min(1180px,105vw);height:min(1180px,105vw);
  transform:translateY(-50%);
  background:var(--mop-swirl) no-repeat center/contain;
  opacity:.085;pointer-events:none;z-index:0;
}
.mop-wm-left > .fl-row-content-wrap::before{left:-30%;}
.mop-wm-right > .fl-row-content-wrap::before{right:-30%;left:auto;}

/* Variant for dark grounds — the footer.
   A tinted white washed out to grey; this paints the mark in a deliberate
   colour instead. CSS mask is what makes an arbitrary hex possible: the SVG
   supplies the shape via its alpha channel and the background supplies the
   colour, so the file itself needs no second colourway.
   The filter version stays as the fallback for anything without mask support,
   which is why the mask block is guarded rather than replacing it outright. */
.mop-navy.mop-wm-left > .fl-row-content-wrap::before,
.mop-navy.mop-wm-right > .fl-row-content-wrap::before,
.mop-wm-light > .fl-row-content-wrap::before{
  filter:brightness(0) invert(1);opacity:.07;
}

@supports (mask-image:url("")) or (-webkit-mask-image:url("")){
  .mop-navy.mop-wm-left > .fl-row-content-wrap::before,
  .mop-navy.mop-wm-right > .fl-row-content-wrap::before,
  .mop-wm-light > .fl-row-content-wrap::before{
    background:var(--mop-wm-dark);
    -webkit-mask:var(--mop-swirl) no-repeat center/contain;
    mask:var(--mop-swirl) no-repeat center/contain;
    /* The hex is doing the work now, so no opacity knock-down. #0f1722 against
       the footer's #12233a is already a whisper — drop this toward .6 if it
       wants to be fainter still. */
    filter:none;opacity:1;
  }
}

/* keep content above the mark */
.mop-wm-left .fl-row-content,.mop-wm-right .fl-row-content{position:relative;z-index:1;}

@media (max-width:768px){
  .mop-wm-left > .fl-row-content-wrap::before,
  .mop-wm-right > .fl-row-content-wrap::before{
    width:135vw;height:135vw;opacity:.06;
  }
}

/* ==========================================================================
   CONDITION / INTERIOR PAGE TEMPLATE
   Shared by the 18 cancer pages, 5 benign condition pages and the group
   indexes — 23 of 33 pages. Everything here is the template, not a one-off.
   ========================================================================== */

/* --- Page banner: same pinned-photo technique as the hero, shorter -------- */
.fl-row.mop-pagehead > .fl-row-content-wrap{
  position:relative;overflow:hidden;background:var(--mop-navy-900);
}
.mop-pagehead .fl-col-group,.mop-pagehead .fl-col,
.mop-pagehead .fl-col-content{position:static;}
.mop-pagehead .fl-row-content{position:static !important;}
.mop-pagehead .fl-module{position:relative;z-index:2;}
.mop-pagehead .fl-module.mop-hero__bg{
  position:absolute;top:0;left:0;right:0;bottom:0;margin:0;padding:0;z-index:0;display:block;
}
.mop-pagehead .mop-hero__bg .fl-module-content,
.mop-pagehead .mop-hero__bg .fl-photo,
.mop-pagehead .mop-hero__bg .fl-photo-content{height:100%;width:100%;margin:0;}
.mop-pagehead .mop-hero__bg img{width:100%;height:100%;object-fit:cover;display:block;}
.mop-pagehead .mop-hero__bg::after{
  content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;
  pointer-events:none;
  background:linear-gradient(95deg,rgba(18,35,58,.93),rgba(36,70,113,.72));
}
.mop-pagehead h1{color:#fff;margin:0 0 12px;}
.mop-pagehead .mop-lede,.mop-pagehead .mop-lede p{color:#cfdcea;max-width:760px;}
.mop-pagehead .fl-module-heading{margin-bottom:12px;}

/* --- Breadcrumbs: follow the nav hierarchy, not the flat URL -------------- */
.mop-crumbs{font-size:.85rem;color:#a9c0da;margin-bottom:18px;}
.mop-crumbs a{color:#a9c0da;text-decoration:none;}
.mop-crumbs a:hover{color:#fff;}
.mop-crumbs i{opacity:.5;margin:0 .5em;font-style:normal;}
.mop-crumbs span{opacity:.75;}

/* --- Statistic band ------------------------------------------------------- */
.mop-stat{text-align:center;padding:8px 6px;}
.mop-stat__num{
  display:block;font-family:var(--mop-display);font-weight:600;color:var(--mop-navy);
  font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;margin-bottom:8px;
}
.mop-stat__label{display:block;font-size:.92rem;color:var(--mop-slate);line-height:1.5;}

/* --- Article body --------------------------------------------------------- */
.mop-article .fl-col-group{align-items:flex-start;}
.mop-article .fl-module-heading{margin-bottom:14px;}
.mop-article h2{margin-top:8px;}
.mop-article .fl-module-rich-text{margin-bottom:26px;}
.mop-article .fl-rich-text p,.mop-article .fl-rich-text li{color:var(--mop-slate);}
.mop-article .fl-rich-text strong{color:var(--mop-ink);}
.mop-article .fl-rich-text ul{padding-left:1.35em;}
.mop-article h3{margin-top:6px;}
.mop-fineprint{font-size:.82rem;color:var(--mop-slate);opacity:.85;}

.mop-callout{
  background:var(--mop-blue-50);border-left:4px solid var(--mop-blue);
  padding:24px 26px;border-radius:0 4px 4px 0;margin:6px 0 26px;
}
.mop-callout h4{
  font-family:var(--mop-display);color:var(--mop-navy);font-size:1.1rem;
  margin:0 0 8px;font-weight:600;
}
.mop-callout p{margin:0;color:var(--mop-slate);font-size:.97rem;}

/* --- Sidebar -------------------------------------------------------------- */
.mop-aside{
  background:var(--mop-blue-50);border-radius:8px;padding:26px;margin-bottom:20px;
}
.mop-aside h4{
  font-family:var(--mop-display);color:var(--mop-navy);font-size:1.1rem;
  margin:0 0 14px;font-weight:600;
}
.mop-aside-nav{list-style:none;margin:0;padding:0;}
.mop-aside-nav li{border-bottom:1px solid rgba(36,70,113,.1);margin:0;}
.mop-aside-nav li:last-child{border-bottom:0;}
.mop-aside-nav a{
  display:block;padding:10px 0;font-size:.94rem;color:var(--mop-ink);text-decoration:none;
  transition:padding-left .18s var(--mop-ease),color .18s var(--mop-ease);
}
.mop-aside-nav a:hover{color:var(--mop-navy);padding-left:5px;}
.mop-aside-nav li.is-active > a{color:var(--mop-navy);font-weight:700;}

.mop-aside--navy{background:var(--mop-navy);}
.mop-aside--navy h4{color:#fff;}
.mop-aside--navy p{color:#c3d3e6;font-size:.94rem;margin:0 0 18px;}
.mop-aside--navy .mop-btn{width:100%;}

/* sidebar sticks alongside long articles */
@media (min-width:993px){
  .mop-article .fl-col:last-child .fl-col-content{position:sticky;top:24px;}
}
@media (max-width:992px){
  .mop-article .fl-col{width:100% !important;}
  .mop-article .fl-col:last-child{margin-top:32px;}
}

/* ==========================================================================
   HEADER — Themer layout
   Rendered from a single HTML module so the mega-menu markup and its
   behaviour stay under our control. Trade-off recorded in the build notes:
   nav links are edited in the Themer layout, not Appearance > Menus.
   ========================================================================== */
.mop-topbar{background:var(--mop-navy-900);color:#c3d3e6;font-size:.84rem;}
.mop-topbar__inner{
  max-width:1200px;margin:0 auto;padding:0 24px;min-height:40px;
  display:flex;justify-content:flex-end;align-items:center;gap:28px;flex-wrap:wrap;
}
.mop-topbar a{color:#c3d3e6;text-decoration:none;display:inline-flex;align-items:center;gap:.45em;}
.mop-topbar a:hover{color:var(--mop-blue);}
.mop-topbar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}

.mop-header{background:#fff;border-bottom:1px solid var(--mop-line);}
.mop-header__inner{
  max-width:1200px;margin:0 auto;padding:0 24px;min-height:96px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.fl-theme-builder-header-sticky .mop-header__inner{min-height:72px;}

.mop-brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex-shrink:0;}
.mop-brand__mark{width:52px;height:52px;
  transition:width .25s var(--mop-ease),height .25s var(--mop-ease);}
.fl-theme-builder-header-sticky .mop-brand__mark{width:42px;height:42px;}
.mop-brand__text{display:flex;flex-direction:column;line-height:1;}
.mop-brand__name{
  font-family:var(--mop-display);font-size:1.5rem;font-weight:600;color:var(--mop-slate);
  letter-spacing:.14em;text-transform:uppercase;
}
.mop-brand__sub{
  font-family:var(--mop-display);font-size:.6rem;color:var(--mop-slate);
  letter-spacing:.24em;text-transform:uppercase;margin-top:5px;
}

/* --- Nav ---------------------------------------------------------------- */
.mop-nav{display:flex;align-items:center;gap:10px;}
.mop-nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;}
.mop-nav__list > li{position:relative;margin:0;}
.mop-nav__list > li > a{
  display:flex;align-items:center;gap:.4em;padding:12px 14px;border-radius:4px;
  font-family:var(--mop-body);font-size:.94rem;font-weight:600;color:var(--mop-ink);
  text-decoration:none;white-space:nowrap;transition:color .18s,background .18s;
}
.mop-nav__list > li > a:hover,.mop-has-mega:hover > a{color:var(--mop-navy);background:var(--mop-blue-50);}
.mop-caret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.6;transition:transform .2s var(--mop-ease);
}
.mop-has-mega:hover .mop-caret{transform:rotate(180deg);}

/* --- Mega-menu ---------------------------------------------------------- */
.mop-mega{
  position:absolute;top:100%;right:0;width:min(880px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--mop-line);border-top:3px solid var(--mop-blue);
  border-radius:0 0 8px 8px;box-shadow:0 18px 48px rgba(18,35,58,.14);
  padding:28px;display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:0 32px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s var(--mop-ease),transform .2s var(--mop-ease),visibility .2s;
  z-index:210;
}
.mop-has-mega:hover .mop-mega,.mop-has-mega:focus-within .mop-mega{
  opacity:1;visibility:visible;transform:translateY(0);
}
.mop-mega__col{min-width:0;}
.mop-mega__col ul{list-style:none;margin:0;padding:0;}
.mop-mega__col li{margin:0;}
.mop-mega__head{
  display:block;font-size:.71rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mop-blue);padding:6px 10px;margin-bottom:6px;text-decoration:none;
  border-bottom:1px solid var(--mop-line-soft,#eef1f5);
}
a.mop-mega__head:hover{color:var(--mop-navy);}
.mop-mega__head--gap{margin-top:18px;}
.mop-mega__head--spacer{border-bottom-color:transparent;}
.mop-mega a:not(.mop-mega__head){
  display:block;padding:8px 10px;border-radius:4px;font-size:.91rem;font-weight:500;
  color:var(--mop-ink);text-decoration:none;line-height:1.35;
}
.mop-mega a:not(.mop-mega__head):hover{background:var(--mop-blue-50);color:var(--mop-navy);}

.mop-btn--sm{padding:11px 20px;font-size:.84rem;}

/* --- Mobile nav --------------------------------------------------------- */
.mop-navtoggle{
  display:none;align-items:center;justify-content:center;position:relative;z-index:200;
  width:46px;height:46px;background:var(--mop-navy);border:0;border-radius:4px;cursor:pointer;
}
.mop-navtoggle span{display:block;width:20px;height:2px;background:#fff;position:relative;}
.mop-navtoggle span::before,.mop-navtoggle span::after{
  content:'';position:absolute;left:0;width:20px;height:2px;background:#fff;
  transition:transform .2s var(--mop-ease);
}
.mop-navtoggle span::before{top:-6px;}
.mop-navtoggle span::after{top:6px;}
.mop-navtoggle[aria-expanded="true"] span{background:transparent;}
.mop-navtoggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.mop-navtoggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}
.mop-navscrim{
  position:fixed;inset:0;background:rgba(18,35,58,.45);opacity:0;visibility:hidden;
  transition:all .3s var(--mop-ease);z-index:180;
}
.mop-navscrim.is-open{opacity:1;visibility:visible;}

@media (max-width:1080px){
  .mop-nav__list > li > a{padding:12px 10px;font-size:.9rem;}
}
@media (max-width:960px){
  .mop-header__inner{min-height:76px;}
  .mop-navtoggle{display:flex;}
  .mop-nav{
    position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:96px 24px 48px;
    box-shadow:-8px 0 40px rgba(18,35,58,.18);transform:translateX(100%);
    transition:transform .3s var(--mop-ease);overflow-y:auto;z-index:190;
  }
  .mop-nav.is-open{transform:translateX(0);}
  .mop-nav__list{flex-direction:column;align-items:stretch;width:100%;}
  .mop-nav__list > li{border-bottom:1px solid var(--mop-line);}
  .mop-nav__list > li > a{padding:15px 4px;font-size:1.02rem;justify-content:space-between;}
  .mop-mega{
    position:static;width:auto;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;padding:0 0 12px 14px;display:none;grid-template-columns:1fr;
  }
  .mop-mega.is-open{display:block;}
  .mop-mega__head--spacer{display:none;}
  .mop-nav__cta{margin-top:24px;}
  .mop-nav__cta .mop-btn{width:100%;}
  body.mop-nav-open{overflow:hidden;}
  .mop-brand__name{font-size:1.25rem;}
}

/* ==========================================================================
   FOOTER — Themer layout
   ========================================================================== */
.fl-row.mop-footer > .fl-row-content-wrap{background:var(--mop-navy-900);}
.mop-footer,.mop-footer p,.mop-footer li{color:#a9bdd4;font-size:.94rem;}
.mop-footer__grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:48px;
  max-width:1200px;margin:0 auto;padding:0 24px;
}
.mop-footer h4{
  color:#fff;font-family:var(--mop-body);font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;margin:0 0 20px;
}
.mop-footer a{color:#a9bdd4;text-decoration:none;}
.mop-footer a:hover{color:var(--mop-blue);}
.mop-brand--footer{margin-bottom:18px;}
.mop-brand--footer .mop-brand__name,.mop-brand--footer .mop-brand__sub{color:#fff;}
.mop-brand--footer .mop-brand__mark{filter:brightness(0) invert(1);opacity:.9;}
.mop-footer__tag{font-size:.9rem;max-width:38ch;}
.mop-footer__list{list-style:none;margin:0;padding:0;}
.mop-footer__list li{margin-bottom:11px;}
.mop-footer__locs{list-style:none;margin:0;padding:0;font-size:.9rem;line-height:1.6;}
.mop-footer__locs li{margin-bottom:14px;}
.mop-footer__locs strong{color:#fff;display:block;font-weight:600;}
.mop-link-arrow--light{color:var(--mop-blue);}

.mop-footer__disclaimer{
  border-top:1px solid rgba(169,189,212,.18);margin-top:56px;
  padding:28px 24px;max-width:1200px;margin-left:auto;margin-right:auto;
}
.mop-footer__disclaimer p{
  font-size:.82rem;line-height:1.7;color:#8ba2bd;font-style:italic;margin:0;
}
.mop-footer__bottom{
  border-top:1px solid rgba(169,189,212,.18);
  max-width:1200px;margin:0 auto;padding:22px 24px 40px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:.83rem;
}
.mop-footer__bottom p{margin:0;font-size:.83rem;}
.mop-footer__credit a{color:var(--mop-blue);font-weight:600;}

@media (max-width:1080px){
  .mop-footer__grid{grid-template-columns:1fr 1fr;gap:48px 32px;}
}
@media (max-width:680px){
  .mop-footer__grid{grid-template-columns:1fr;gap:40px;}
  .mop-footer__bottom{flex-direction:column;align-items:flex-start;}
}

/* ==========================================================================
   REMAINING PAGE FURNITURE
   ========================================================================== */
.mop-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.mop-index-link{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;background:#fff;border:1px solid var(--mop-line);border-radius:4px;
  font-weight:600;color:var(--mop-ink);font-size:.98rem;text-decoration:none;
  transition:all .2s var(--mop-ease);
}
.mop-index-link::after{content:'→';color:var(--mop-blue);font-weight:400;}
.mop-index-link:hover{
  border-color:var(--mop-blue);background:var(--mop-blue-50);color:var(--mop-navy);
  transform:translateX(3px);
}

.mop-tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0;padding:0;list-style:none;}
.mop-tags li{
  margin:0;font-size:.8rem;font-weight:600;background:var(--mop-blue-50);
  color:var(--mop-navy);padding:6px 12px;border-radius:100px;
}
.mop-provider__photo img{border-radius:8px;aspect-ratio:4/5;object-fit:cover;
  object-position:center top;width:100%;}
.mop-stepnum{
  display:block;font-family:var(--mop-display);font-size:2.4rem;font-weight:600;
  color:var(--mop-blue);line-height:1;margin-bottom:14px;
}
.mop-card__icon--light{background:rgba(138,174,220,.16);}
.mop-card__icon--light svg{stroke:var(--mop-blue);}
.mop-abbr{
  font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mop-blue);
  font-weight:700;margin:0 0 14px;
}
.mop-img-wide img{aspect-ratio:21/9;object-fit:cover;width:100%;border-radius:8px;}

.mop-contactline{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;}
.mop-contactline svg{width:20px;height:20px;stroke:var(--mop-blue);fill:none;stroke-width:1.8;
  flex-shrink:0;margin-top:5px;stroke-linecap:round;stroke-linejoin:round;}
.mop-contactline strong{
  display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mop-slate);font-weight:700;margin-bottom:2px;
}
.mop-hours{width:100%;border-collapse:collapse;font-size:.95rem;}
/* Astra styles bare tables with a full grid — outer box plus cell rules —
   which turns three lines of opening hours into a spreadsheet. The borders
   are stripped and a single hairline is put back between rows, so the eye
   still tracks day-to-time across the gap without the scaffolding. */
.fl-builder-content .mop-hours,
.fl-builder-content .mop-hours tr,
.fl-builder-content .mop-hours th,
.fl-builder-content .mop-hours td{border:0;background:none;}
.fl-builder-content .mop-hours{width:100%;border-collapse:collapse;}
.fl-builder-content .mop-hours th,
.fl-builder-content .mop-hours td{
  text-align:left;padding:11px 0;
  border-bottom:1px solid rgba(36,70,113,.12);
}
.fl-builder-content .mop-hours tr:last-child th,
.fl-builder-content .mop-hours tr:last-child td{border-bottom:0;}
.fl-builder-content .mop-hours th{font-weight:600;color:var(--mop-ink);}
.fl-builder-content .mop-hours td{color:var(--mop-slate);text-align:right;}

/* ---------- Contact Form 7 ----------
   CF7 ships almost no styling of its own and inherits whatever the theme
   gives it, which by default is nothing. These rules put it on the same
   type scale, spacing and focus treatment as the rest of the site. Selectors
   target CF7's own classes so the form can be rebuilt in its editor without
   touching CSS. */
.mop-form{margin-top:8px;}
.mop-form .wpcf7-form p{margin:0 0 18px;}
.mop-form label{
  display:block;font-size:.88rem;font-weight:600;letter-spacing:.02em;
  color:var(--mop-ink);margin-bottom:6px;
}
.mop-form input[type=text],
.mop-form input[type=email],
.mop-form input[type=tel],
.mop-form input[type=date],
.mop-form select,
.mop-form textarea{
  width:100%;box-sizing:border-box;font-family:var(--mop-body);font-size:1rem;
  color:var(--mop-ink);background:#fff;
  border:1px solid var(--mop-line);border-radius:5px;padding:13px 14px;
  transition:border-color .18s var(--mop-ease),box-shadow .18s var(--mop-ease);
}
.mop-form textarea{min-height:150px;resize:vertical;}
.mop-form input:focus,
.mop-form select:focus,
.mop-form textarea:focus{
  outline:none;border-color:var(--mop-btn-rest);
  box-shadow:0 0 0 3px rgba(61,111,168,.18);
}
.mop-form ::placeholder{color:#9aa5b1;}

/* Two-up rows: wrap a pair of fields in <div class="mop-form__row"> in the
   CF7 editor and they sit side by side, stacking under 600px. */
.mop-form__row{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
@media (max-width:600px){ .mop-form__row{grid-template-columns:1fr;} }

/* The submit button borrows the site button rather than redefining it. */
.mop-form input[type=submit],
.mop-form .wpcf7-submit{
  display:inline-flex;align-items:center;justify-content:center;width:auto;
  font-family:var(--mop-body);font-size:.95rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  padding:15px 34px;border-radius:4px;cursor:pointer;
  background:var(--mop-btn-rest);color:#fff;border:2px solid var(--mop-btn-rest);
  transition:all .22s var(--mop-ease);
}
.mop-form input[type=submit]:hover,
.mop-form .wpcf7-submit:hover{
  background:var(--mop-blue);border-color:var(--mop-blue);color:var(--mop-navy-900);
  transform:translateY(-2px);box-shadow:0 4px 12px rgba(18,35,58,.18);
}

/* hCaptcha renders as an iframe with a fixed width — let it shrink rather
   than push the column wider than its container on small screens. */
.mop-form .h-captcha{margin-bottom:18px;}
.mop-form .h-captcha iframe{max-width:100%;}

/* CF7 status messages */
.mop-form .wpcf7-response-output{
  margin:18px 0 0;padding:14px 16px;border-radius:5px;font-size:.92rem;
  border:1px solid var(--mop-line);background:var(--mop-blue-50);
}
.mop-form .wpcf7-not-valid-tip{color:#b3261e;font-size:.84rem;margin-top:5px;}
.mop-form .wpcf7-not-valid{border-color:#b3261e;}
.mop-form form.invalid .wpcf7-response-output,
.mop-form form.failed .wpcf7-response-output{background:#fdecea;border-color:#f2c4bf;}
.mop-form form.sent .wpcf7-response-output{background:#eaf6ec;border-color:#bfe0c6;}
.mop-callout--warn{background:#fdf3e7;border-left-color:#d98324;}
.mop-legal .fl-row-content{max-width:840px;}

@media (max-width:960px){
  .mop-index-grid{grid-template-columns:repeat(2,1fr);}
  .mop-provider .fl-col{width:100% !important;}
  .mop-provider__photo img{max-width:280px;aspect-ratio:4/5;}
}
@media (max-width:680px){
  .mop-index-grid{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------------
   LOCATIONS MAP  (UABB Advanced Google Map)

   The module ships no height of its own worth relying on, and a Google map
   in a zero-height box renders as a grey sliver. Height is set here so it
   stays a stylesheet decision rather than a per-page one.
   --------------------------------------------------------------------------- */
.mop-map{margin-top:12px;}
.mop-map__canvas{
  height:460px;width:100%;
  border-radius:var(--mop-radius,10px);overflow:hidden;
  border:1px solid var(--mop-line);
  background:var(--mop-blue-50);
}

/* Google renders the info window in its own DOM. These are the only hooks
   that reliably reach inside it. */
.mop-pin{font-family:var(--mop-body);line-height:1.5;font-size:14px;padding:2px 4px;}
.mop-pin strong{display:block;font-size:15px;color:var(--mop-navy);margin-bottom:4px;}
.mop-pin span{display:block;color:var(--mop-slate);}
.mop-pin a{display:block;margin-top:6px;color:var(--mop-navy);text-decoration:underline;}
.mop-pin a:last-child{font-weight:700;}

@media (max-width:768px){
  .mop-map__canvas{height:320px;}
}

/* Anchor targets sit under the sticky header unless they reserve room for it.
   scroll-margin-top is the modern fix -- no empty offset elements, and it
   applies to keyboard focus jumps as well as clicks. */
.mop-anchor{display:block;height:0;overflow:hidden;}
.mop-anchor,
.fl-builder-content [id="appointment"],
.fl-builder-content [id="providers"]{scroll-margin-top:150px;}

@media (max-width:960px){
  .mop-anchor,
  .fl-builder-content [id="appointment"],
  .fl-builder-content [id="providers"]{scroll-margin-top:96px;}
}

/* ==========================================================================
   COMING SOON / MAINTENANCE

   Beaver Builder's Maintenance Mode swaps the whole site for one page. The
   Themer header and footer are suppressed here on purpose: a navigation bar
   whose every link loops back to this same page is worse than no navigation.
   ========================================================================== */
/* Everything the theme adds around a page is suppressed here. The Themer
   header and footer go because their links all loop back to this page; the
   post navigation, scroll-to-top and Astra footer go because a holding page
   should end where the message ends, not trail off into site furniture.
   The body colour matters too: with the containers emptied, any shortfall
   against the viewport would otherwise show as a white band. */
body:has(.mop-soon){background:var(--mop-navy-900);}
body:has(.mop-soon) .fl-builder-content[data-type="header"],
body:has(.mop-soon) .fl-builder-content[data-type="footer"],
body:has(.mop-soon) .site-footer,
body:has(.mop-soon) .post-navigation,
body:has(.mop-soon) .navigation,
body:has(.mop-soon) .nav-links,
body:has(.mop-soon) .ast-single-related-posts,
body:has(.mop-soon) .ast-scroll-top-icon,
body:has(.mop-soon) #ast-scroll-top{display:none !important;}
body:has(.mop-soon) .site-content,
body:has(.mop-soon) #content,
body:has(.mop-soon) #primary,
body:has(.mop-soon) .entry-content{padding:0 !important;margin:0 !important;}

.fl-row.mop-soon > .fl-row-content-wrap{
  min-height:100vh;min-height:100svh;
  display:flex;align-items:center;
  background:radial-gradient(120% 90% at 70% 20%,#1b3557 0%,var(--mop-navy-900) 62%);
}
.mop-soon .fl-row-content{text-align:center;max-width:900px;}
.mop-soon .fl-module{position:relative;z-index:1;}

.mop-soon__brand{margin-bottom:38px;}
.mop-soon__mark{
  width:96px;height:96px;display:block;margin:0 auto 18px;
  filter:brightness(0) invert(1);
}
.mop-soon__name,.mop-soon__sub{display:block;color:#fff;font-family:var(--mop-display);}
.mop-soon__name{font-size:2rem;letter-spacing:.14em;text-transform:uppercase;line-height:1;}
.mop-soon__sub{
  font-family:var(--mop-body);font-size:.82rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--mop-blue);margin-top:9px;
}

.fl-builder-content .mop-soon__head h1,
.fl-builder-content .mop-soon__head{
  color:#fff;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.1;margin:0 0 18px;
}
.mop-soon__lede p{
  color:#c3d3e6;font-size:clamp(1.05rem,1.7vw,1.25rem);line-height:1.65;
  max-width:640px;margin:0 auto;
}

.mop-soon__rule{
  width:64px;height:3px;border-radius:2px;background:var(--mop-blue);
  margin:38px auto 34px;
}

/* Locations: the working part of the page. Big tap targets, phone-first. */
.mop-soon__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  max-width:880px;margin:0 auto;
}
.mop-soon__loc{
  display:block;padding:18px 16px;border-radius:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:all .2s var(--mop-ease);
}
/* The whole card is the phone link, so nothing inside it should advertise
   itself separately -- no underline, no link colour on the address. */
.mop-soon__loc,
.mop-soon__loc:hover,
.mop-soon__loc *{text-decoration:none;}
.mop-soon__loc:hover,.mop-soon__loc:focus{
  background:rgba(255,255,255,.12);border-color:var(--mop-blue);
  transform:translateY(-2px);
}
.mop-soon__city{
  display:block;color:#fff;font-weight:600;font-size:1.35rem;line-height:1.2;
  margin-bottom:8px;letter-spacing:-.005em;
}
/* Address is reference text, not a target. Sized so the longest of the six
   -- "8019 S New Braunfels Ave., Suite 101" -- still sets on one line. */
.mop-soon__addr{
  display:block;color:#93a8c0;font-size:.74rem;line-height:1.5;
  letter-spacing:.005em;margin-bottom:10px;
}
.mop-soon__tel{
  display:block;color:var(--mop-blue);font-size:1.38rem;font-weight:600;
  line-height:1.2;letter-spacing:.01em;
}

.mop-soon__note{
  color:#8fa4bd;font-size:.86rem;margin-top:34px;
}

@media (max-width:768px){
  .mop-soon__grid{grid-template-columns:repeat(2,1fr);}
  .mop-soon__mark{width:76px;height:76px;}
  .mop-soon__name{font-size:1.6rem;}
  .mop-soon__city{font-size:1.18rem;}
  .mop-soon__tel{font-size:1.2rem;}
}
@media (max-width:420px){
  .mop-soon__grid{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------------
   LOGO DROP SHADOW — removing Astra's, deliberately

   Astra prints this into every page head from a Customizer setting:

       .ast-article-single figure,
       .ast-article-single img:not(figure img){box-shadow:0 0 30px rgba(0,0,0,.15)}

   Harmless on a photograph. Not harmless on our logo marks, which are painted
   white with filter:brightness(0) invert(1) — a filter applies to the whole
   rendering INCLUDING the shadow, so the soft dark shadow inverts to WHITE and
   is drawn in the shape of the image's BOX, not the artwork. A transparent SVG
   ends up inside a glowing rectangle.

   Astra's selector scores (0,1,3) — :not(figure img) contributes the
   specificity of its argument. A bare .mop-soon__mark is (0,1,0) and loses,
   which is why the first attempt at this fix changed nothing on the live page.
   Qualifying by tag inside .fl-builder-content gives (0,2,1), which wins on
   class count without reaching for !important.
   --------------------------------------------------------------------------- */
.fl-builder-content img.mop-soon__mark,
.fl-builder-content img.mop-brand__mark{box-shadow:none;}

/* ==========================================================================
   404

   The numeral is set huge and nearly transparent behind the message, so the
   page reads as "we can't find that page" first and "404" second. The number
   is decoration; the sentence is the content.
   ========================================================================== */
.fl-row.mop-404 > .fl-row-content-wrap{
  background:radial-gradient(120% 90% at 72% 18%,#1b3557 0%,var(--mop-navy-900) 64%);
}
.mop-404 .fl-row-content{text-align:center;max-width:860px;}
.mop-404 .fl-module{position:relative;z-index:1;}

.mop-404__num{
  font-family:var(--mop-display);font-weight:700;line-height:.8;
  font-size:clamp(7rem,20vw,15rem);
  color:rgba(255,255,255,.055);
  letter-spacing:-.03em;
  margin-bottom:-.42em;          /* pull the eyebrow up into the numeral */
  pointer-events:none;user-select:none;
}
.mop-404__eyebrow{position:relative;}

.fl-builder-content .mop-404__head h1,
.fl-builder-content .mop-404__head{
  color:#fff;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.12;margin:0 0 16px;
}
.mop-404__lede p{
  color:#c3d3e6;font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.65;
  max-width:600px;margin:0 auto;
}

/* Search: one field, one button, no ornament. */
.mop-404__search{
  display:flex;gap:10px;max-width:520px;margin:30px auto 0;
}
.mop-404__search input[type=search]{
  flex:1 1 auto;min-width:0;font-family:var(--mop-body);font-size:1rem;
  padding:13px 16px;border-radius:5px;color:var(--mop-ink);background:#fff;
  border:1px solid transparent;
}
.mop-404__search input[type=search]:focus{
  outline:none;border-color:var(--mop-blue);
  box-shadow:0 0 0 3px rgba(138,174,220,.35);
}
.mop-404__search button{
  flex:0 0 auto;cursor:pointer;font-family:var(--mop-body);font-weight:700;
  font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;
  padding:13px 24px;border-radius:5px;
  background:var(--mop-btn-rest);color:#fff;border:2px solid var(--mop-btn-rest);
  transition:all .22s var(--mop-ease);
}
.mop-404__search button:hover{
  background:var(--mop-blue);border-color:var(--mop-blue);color:var(--mop-navy-900);
}

.mop-404__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
  max-width:660px;margin:38px auto 0;text-align:left;
}
.mop-404__card{
  display:block;padding:18px 20px;border-radius:8px;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:all .2s var(--mop-ease);
}
.mop-404__card:hover,.mop-404__card:focus{
  background:rgba(255,255,255,.12);border-color:var(--mop-blue);
  transform:translateY(-2px);
}
.mop-404__card strong{display:block;color:#fff;font-size:1rem;margin-bottom:3px;}
.mop-404__card span{display:block;color:#9fb4cd;font-size:.88rem;line-height:1.45;}

.mop-404__call{color:#8fa4bd;font-size:.92rem;margin-top:32px;}
.mop-404__call a{color:var(--mop-blue);}

@media (max-width:600px){
  .mop-404__grid{grid-template-columns:1fr;}
  .mop-404__search{flex-direction:column;}
  .mop-404__search button{width:100%;}
}

.fl-builder-content[data-shrink="1"] img.mop-brand__mark{width:52px;height:52px;}
.fl-builder-content.fl-theme-builder-header-sticky[data-shrink="1"] img.mop-brand__mark{width:42px;height:42px;}
 
@media (max-width:600px){
  .fl-builder-content[data-shrink="1"] img.mop-brand__mark,
  .fl-builder-content.fl-theme-builder-header-sticky[data-shrink="1"] img.mop-brand__mark{width:44px;height:44px;}
  .mop-header__inner{gap:12px;}
  .mop-brand{gap:10px;min-width:0;}
}
 
@media (max-width:960px){
  /* Full-bleed drawer. 124px of top padding clears the close button in both
     header states — the toggle's bottom edge sits at ~101px at rest and
     ~99px once the header is stuck. */
  .mop-nav{width:100%;max-width:none;box-shadow:none;padding-top:124px;}
 
  /* The WordPress admin bar pushes the toggle down 46px for logged-in users.
     Visitors never see this rule; it stops the menu colliding with the close
     button while an editor is signed in. */
  body.admin-bar .mop-nav{padding-top:170px;}
}


/* --- Mobile header, round two -------------------------------------------
 *
 * 1. The header row's own .fl-row-content carries 24px of horizontal padding.
 *    That inset the header's white background AND the navy topbar by 24px on
 *    each side, so the page background showed through down both edges.
 *    Invisible on desktop (white inset on a white page) and obvious on mobile
 *    against the navy hero. .mop-header__inner and .mop-topbar__inner each
 *    carry their own 24px, so zeroing the row's padding moves no content --
 *    it only lets the backgrounds reach the edge.
 *
 * 2. The toggle inherited a 12px 24px button padding. With border-box that
 *    left a ZERO-width content box inside a 46px button: the middle bar
 *    (the <span> itself) collapsed to 0px and vanished, and the ::before /
 *    ::after bars, positioned at left:0 of a zero-width span, drew 10px right
 *    of centre. Two bars instead of three, both off-centre. Zeroing the
 *    padding restores a 46px content box; flex-basis auto stops the span
 *    being shrunk again.
 *
 * 3. Topbar reads better split on a narrow screen: phone left, locations
 *    right. Desktop keeps both right-aligned.
 * --------------------------------------------------------------------- */

.mop-headerrow > .fl-row-content-wrap > .fl-row-content{padding-left:0;padding-right:0;}

.mop-navtoggle{padding:0;}
.mop-navtoggle span{flex:0 0 auto;width:20px;}

@media (max-width:600px){
  .mop-topbar__inner{justify-content:space-between;gap:12px;}
}


/* --- Drawer slides out UNDER the header ---------------------------------
 *
 * The nav is a SIBLING of the brand inside .mop-header__inner, so raising the
 * header's own z-index lifts the drawer with it -- both sit in the same
 * stacking context and the drawer (190) still paints over everything else in
 * it. What has to move is the header's two visible pieces, above the drawer:
 * the navy topbar and the brand lockup. The toggle already sits at 200, so it
 * stays on top of both.
 *
 * The scrim stays at 180, below all of this, so the header is never dimmed.
 * The drawer's own white panel sits behind the brand -- same white as the
 * header bar, so there is no visible seam.
 * --------------------------------------------------------------------- */

@media (max-width:960px){
  .mop-topbar{position:relative;z-index:196;}
  .mop-brand{position:relative;z-index:196;}
}


/* --- Mobile round three -------------------------------------------------
 *
 * 1. The drawer grew its own scrollbar once the header was stuck. Themer's
 *    sticky header is position:fixed AND carries a transform
 *    (matrix(1,0,0,1,0,-113) while shrunk). A transformed ancestor becomes the
 *    containing block for position:fixed descendants, so the drawer stopped
 *    resolving inset:0 against the viewport and resolved it against the HEADER
 *    instead: a 218px panel with overflow-y:auto, the whole menu crammed into
 *    the header's own height. At rest there is no transform, which is why it
 *    looked right until you scrolled. Explicit viewport units survive the
 *    containing-block switch; dvh first so iOS Safari's collapsing toolbar
 *    does not clip the last item.
 *
 * 2. Card padding vanished below 768px. Beaver Builder's per-layout CSS ships
 *    .fl-col[data-node] .fl-col-content{margin:0;padding-left:0;padding-right:0}
 *    at (0,3,0). mission.css already sets padding:26px 24px via
 *    .mop-section-top .fl-col-content, but that is (0,2,0) and loses -- cards
 *    kept vertical padding and lost horizontal, text hard against the border.
 *    Adding .fl-col[data-node] takes it to (0,4,0). Same failure mode as the
 *    brand mark and the toggle: a mop- class outranked by Beaver Builder.
 *
 *    .mop-cards and .mop-locs are deliberately padding-free at column level --
 *    the photo bleeds to the card edge and the text modules carry their own
 *    0 24px -- so they are left alone.
 * --------------------------------------------------------------------- */

@media (max-width:960px){
  .mop-nav{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;}
}

@media (max-width:768px){
  .mop-section-top .fl-col[data-node] > .fl-col-content{padding:26px 24px;}
}

@media (max-width:420px){
  .mop-section-top .fl-col[data-node] > .fl-col-content{padding:22px 20px;}
}


/* --- Contact page location cards: the whole card is a link ---------------
 *
 * The card links through to its location page while the phone number stays
 * independently clickable. A nested <a> is invalid HTML, so the card-wide hit
 * area is a ::after on the heading link and the phone link is raised above it.
 *
 * Explicit width/height rather than inset:0 — the same lesson as the hero
 * scrim and the mobile drawer: against these wrappers the inset form resolves
 * to a 0x0 box and the hit area silently disappears.
 * --------------------------------------------------------------------- */

.mop-loc{position:relative;}
.mop-loc__link{text-decoration:none;color:inherit;}
.mop-loc__link:hover{color:var(--mop-blue);}
.mop-loc__link::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;}
.mop-loc__phone{position:relative;z-index:2;}


/* --- Card header photos bleed to the card edge ---------------------------
 *
 * .mop-cards .fl-col-content already carries overflow:hidden and an 8px
 * radius — both written for an image that runs to the edge and gets clipped
 * by the corners. Beaver Builder's default .fl-module-content{margin:0 20px}
 * was insetting the photo horizontally while the top stayed flush, so it read
 * as neither bled nor inset.
 *
 * Mobile was already right: BB zeroes module margins below 768px, which is
 * why this only showed on desktop.
 * --------------------------------------------------------------------- */

.mop-cards .fl-module-photo > .fl-module-content{margin-left:0;margin-right:0;}

/* Facebook — footer link */
/* Facebook — footer link */
.mop-footer__social{margin:4px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);max-width:38ch;}
.mop-footer__social a{display:inline-flex;align-items:center;gap:.7em;color:#fff;font-weight:600;}
.mop-footer__fb{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 auto;background:#fff;border-radius:6px;transition:background .2s;}
.mop-footer__fb svg{width:18px;height:18px;fill:var(--mop-navy-900);stroke:none;}
.mop-footer__social a:hover .mop-footer__fb{background:var(--mop-blue);}

/* Facebook — topbar on phones: keep phone left, locations + Facebook right, icon only */
@media (max-width:600px){
  .mop-topbar__inner > a:first-child{margin-right:auto;}
  .mop-topbar__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}