/* Add your global styles here */

@font-face {
  font-family: "Baskervville";
  src: url("../assets/baskervville-variablefont-wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Baskervville";
  src: url("../assets/baskervville-italic-variablefont-wght.ttf") format("truetype");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "NunitoSans";
  src: url("../assets/nunitosans-variablefont-ytlcopszwdthwght.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

@font-face {
  font-family: "NunitoSans";
  src: url("../assets/nunitosans-italic-variablefont-ytlcopszwdthwght.ttf") format("truetype");
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
}

/* Add your global styles here */



/* CEP layout fixes */
.cep-hero,
.cep-video,
.cep-testimonials {
  position: relative;
  padding-block: 0;
  inline-size: 100%;
  align-self: stretch;
}

.cep-hero > [data-etch-element="container"],
.cep-video > [data-etch-element="container"],
.cep-testimonials > [data-etch-element="container"] {
  position: relative;
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: inherit;
  padding-inline: 0;
  display: grid;
  place-items: center;
  align-self: stretch;
}

.cep-hero__media,
.cep-hero__overlay,
.cep-video__media,
.cep-video__overlay,
.cep-testimonials__media,
.cep-testimonials__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cep-hero__overlay,
.cep-video__overlay,
.cep-testimonials__overlay {
  z-index: 1;
}

.cep-hero__content,
.cep-testimonials__content {
  position: relative;
  z-index: 2;
}

.cep-hero__media img,
.cep-video__media img,
.cep-testimonials__media img {
  inline-size: 100%;
  block-size: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video play — Icon Framework (class is stripped from etch/svg output) */
/* Video player + mute — front-end (class can strip from etch/svg) */
.cep-video__player {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}

.cep-video__mute {
  position: absolute;
  inset-block-end: var(--space-m);
  inset-inline-start: var(--space-m);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--white);
  background-color: color-mix(in oklch, var(--neutral) 45%, transparent);
}

.cep-video__mute svg {
  inline-size: var(--space-m);
  block-size: var(--space-m);
  color: var(--white);
}

.cep-video__mute.is-muted .cep-video__mute-on,
.cep-video__mute:not(.is-muted) .cep-video__mute-off {
  display: none;
}

/* About play — follow the button label color */
.cep-about__actions [data-icon] {
  --icon-size: var(--icon-size-s);
  --icon-color: currentColor;
  --icon-color-hover: currentColor;
  --icon-padding: 0;
}

.cep-testimonials__avatar img {
  inline-size: 4.5rem !important;
  block-size: 4.5rem !important;
  width: 4.5rem !important;
  height: 4.5rem !important;
  max-inline-size: 4.5rem !important;
  max-block-size: 4.5rem !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-inline: auto;
}

.cep-facility--2,
.cep-facility--3,
.cep-facility--4 {
  --cep-facility-z: 2;
}

.cep-facility--3 { --cep-facility-z: 3; }
.cep-facility--4 { --cep-facility-z: 4; }
/* CEP button context overrides — uses ACSS btn--primary, not local button tokens */
.cep-hero__actions .btn--primary.btn--outline {
  --btn-text-color: var(--white);
  --btn-text-color-hover: var(--white);
  --btn-border-color: var(--white);
  --btn-border-color-hover: var(--primary-hover);
  --btn-background-hover: var(--primary-hover);
}

.cep-about__actions .btn--primary.btn--outline {
  --btn-text-color: var(--primary);
  --btn-text-color-hover: var(--white);
  --btn-border-color: var(--primary);
  --btn-border-color-hover: var(--primary-hover);
  --btn-background-hover: var(--primary-hover);
}

.cep-services__actions .btn--primary.btn--outline {
  --btn-text-color: var(--primary);
  --btn-text-color-hover: var(--white);
  --btn-border-color: var(--primary);
  --btn-border-color-hover: var(--primary-hover);
  --btn-background-hover: var(--primary-hover);
}
/* CEP layout match — hero/video full-bleed, sticky facilities */
.cep-hero,
.cep-video,
.cep-testimonials {
  padding-block: 0;
  padding-inline: 0;
  inline-size: 100%;
  max-inline-size: none;
  align-self: stretch;
}

.cep-hero > [data-etch-element="container"],
.cep-video > [data-etch-element="container"],
.cep-testimonials > [data-etch-element="container"] {
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: inherit;
  padding-inline: 0;
  padding-block: 0;
  display: grid;
  place-items: center;
  align-self: stretch;
}

.cep-facilities {
  display: flex;
  flex-direction: column;
  overflow: visible;
  inline-size: 100%;
}

.cep-facility {
  position: sticky;
  inset-block-start: var(--cep-facility-stick, 0px);
  z-index: var(--cep-facility-z, 1);
  background-color: var(--base);
}

/* Video full-bleed 100dvh */
.cep-video {
  min-block-size: 100dvh;
  padding-block: 0;
  padding-inline: 0;
  inline-size: 100%;
}
.cep-video > [data-etch-element="container"] {
  inline-size: 100%;
  max-inline-size: none;
  min-block-size: 100dvh;
  padding-inline: 0;
  padding-block: 0;
}
.cep-video__media img {
  object-fit: cover;
  inline-size: 100%;
  block-size: 100%;
}

/* Hero + video: viewport height (stylesheet persists immediately) */
.cep-hero,
.cep-video {
  min-block-size: 100dvh;
  min-height: 100dvh;
  padding-block: 0;
  padding-inline: 0;
}

.cep-hero > [data-etch-element="container"],
.cep-video > [data-etch-element="container"] {
  min-block-size: 100dvh;
  min-height: 100dvh;
  max-inline-size: none;
  padding-inline: 0;
  padding-block: 0;
}

.cep-hero__media img,
.cep-hero__media etch\:img,
.cep-video__media img,
.cep-video__media etch\:img {
  inline-size: 100%;
  block-size: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Canvas + type: ACSS --base was navy (#0a2434) and loaded after Etch :root */
.cep-facility,
.cep-footer,
.cep-services__card {
  background-color: var(--white);
}

.cep-hero__title,
.cep-hero__subtitle,
.cep-testimonials,
.cep-testimonials__title,
.cep-testimonials__quote,
.cep-testimonials__author {
  color: var(--white);
}

.cep-about__title,
.cep-services__title,
.cep-services__card-title,
.cep-facility__title,
.cep-gallery__title,
.cep-contact__title,
.cep-footer__aff-title {
  color: var(--black);
}


/* Header social icon links */
.cep-nav-social {
  /* Local tokens */
  --cep-nav-social-size: var(--space-s);
  --cep-nav-social-color: var(--neutral);
  --cep-nav-social-color-hover: var(--primary);

  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: transparent;
  box-shadow: none;
  border: none;
  text-decoration: none;
  inline-size: var(--cep-nav-social-size);
  block-size: var(--cep-nav-social-size);
  color: var(--cep-nav-social-color);
}

.cep-nav-social:hover {
  color: var(--cep-nav-social-color-hover);
  background-color: transparent;
}

.cep-nav-social img,
.cep-nav-social etch\:img,
.cep-nav-social svg {
  inline-size: var(--cep-nav-social-size);
  block-size: var(--cep-nav-social-size);
  object-fit: contain;
  display: block;
}


/* Header Contact us — ACSS primary button inside DWC Nav */
#dwc-header a.btn--primary {
  /* Local tokens */
  --menu-item-clr: var(--btn-text-color, var(--white));
  --menu-item-bg: var(--btn-background, var(--primary));
  --menu-item-hover-clr: var(--btn-text-color-hover, var(--white));
  --menu-item-hover-bg: var(--btn-background-hover, var(--primary-hover));
  --menu-item-inline-padding: var(--btn-padding-inline);
  --menu-item-block-padding: var(--btn-padding-block);
  --menu-item-radius: var(--btn-border-radius);

  /* Color / shape */
  background-color: var(--menu-item-bg);
  color: var(--menu-item-clr);
  padding-block: var(--menu-item-block-padding);
  padding-inline: var(--menu-item-inline-padding);
  border-radius: var(--menu-item-radius);
  text-decoration: none;
}

#dwc-header a.btn--primary:hover {
  background-color: var(--menu-item-hover-bg);
  color: var(--menu-item-hover-clr);
}



/* Header Contact us — match hero .btn--primary type size (em padding follows font-size) */
#dwc-header a.btn--primary {
  --menu-item-font-size: var(--btn-font-size, var(--text-m));
  font-size: var(--btn-font-size, var(--text-m));
  font-weight: var(--btn-font-weight);
  line-height: var(--btn-line-height);
  font-family: var(--btn-font-family, var(--text-font-family));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--btn-min-width);
}



/* CEP testimonials radius + align */
.cep-testimonials,
.cep-testimonials > [data-etch-element="container"],
.cep-testimonials__media,
.cep-testimonials__media img,
.cep-testimonials__media etch\:img {
  border-radius: 0;
}

/* CEP buttons — keep hover label white */
[class*="btn--"].btn--primary,
[class*="btn--"].btn--outline {
  --btn-text-color-hover: var(--white);
}


/* Mobile header — Facebook + Instagram on one row.
   DWC sets .dwce-nav-nested .dwc-nav-nested-items to column + nowrap.
   .dwc-top-level-items-vars lives on each <li>, so it cannot restyle the parent <ul>. */
html:is(.dwc-mobile:not(:has([data-offcanvas='true'])), .dwc-offcanvas-mobile) #dwc-header .dwce-nav-nested > .dwc-nav-nested-items {
  flex-direction: row;
  flex-wrap: wrap;
}

html:is(.dwc-mobile:not(:has([data-offcanvas='true'])), .dwc-offcanvas-mobile) #dwc-header .dwce-nav-nested > .dwc-nav-nested-items > li {
  flex: 1 1 100%;
}

html:is(.dwc-mobile:not(:has([data-offcanvas='true'])), .dwc-offcanvas-mobile) #dwc-header .dwce-nav-nested > .dwc-nav-nested-items > li:has(> a.cep-nav-social) {
  flex: 1 1 50%;
  max-inline-size: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Mobile drawer — front-end. Do not require html.dwc-mobile.
   List is .dwce-nav-nested > .dwc-nav-wrapper > ul.dwc-nav-nested-items (not a direct child).
   Breakpoint matches data-mobile-breakpoint / --mmpro-mobile. */
@media (width < 1200px) {
  #dwc-header .dwce-nav-nested .dwc-nav-nested-items {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #dwc-header .dwce-nav-nested .dwc-nav-nested-items > li {
    flex: 1 1 100%;
  }

  #dwc-header .dwce-nav-nested .dwc-nav-nested-items > li:has(> a.cep-nav-social) {
    flex: 1 1 50%;
    max-inline-size: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #dwc-header .dwc-nav-nested-items > li > a.btn--primary {
    /* Local tokens */
    --cep-nav-mobile-inset: clamp(0.75rem, 0.61rem + 0.56vw, 1.1rem);

    margin-inline: var(--cep-nav-mobile-inset);
    inline-size: calc(100% - (var(--cep-nav-mobile-inset) * 2));
    max-inline-size: calc(100% - (var(--cep-nav-mobile-inset) * 2));
    box-sizing: border-box;
  }
}


/* Mobile drawer items: row+wrap + default align-content:stretch
   made each row fill leftover drawer height, so labels sat at the top. */
@media (width < 1200px) {
  #dwc-header .dwce-nav-nested .dwc-nav-nested-items {
    align-content: start;
    align-items: stretch;
  }

  #dwc-header .dwce-nav-nested .dwc-nav-nested-items > li > :is(a, .dwc-submenu-toggle) {
    display: flex;
    align-items: center;
  }
}


/* Mobile drawer socials — match text-link block padding.
   .cep-nav-social sets padding: 0 and a fixed block-size. */
@media (width < 1200px) {
  #dwc-header .dwc-nav-nested-items > li > a.cep-nav-social {
    padding-block: var(--menu-item-block-padding);
    block-size: auto;
  }
}


/* Mobile Contact us — sit off the 1px item divider */
@media (width < 1200px) {
  #dwc-header .dwc-nav-nested-items > li:has(> a.btn--primary) {
    --menu-item-border: none;
  }

  #dwc-header .dwc-nav-nested-items > li > a.btn--primary {
    margin-block: var(--space-s);
    border: none;
  }
}



.cep-video__mute.is-muted .cep-video__mute-on,
.cep-video__mute:not(.is-muted) .cep-video__mute-off,
.cep-video__mute [hidden] {
  display: none;
}


/* Match Get Directions to address body size */
.cep-contact__directions.cep-link {
  font-size: var(--text-m);
}


/* Video: follow 16/9 so narrow viewports scale down instead of cropping sides */
.cep-video {
  min-block-size: 0;
  min-height: 0;
  max-block-size: 100dvh;
  max-height: 100dvh;
  aspect-ratio: 16 / 9;
  block-size: auto;
  height: auto;
}

.cep-video > [data-etch-element="container"] {
  min-block-size: 100%;
  min-height: 100%;
  block-size: 100%;
  height: 100%;
}


/* Match header + footer social glyphs */
.cep-nav-social,
.cep-footer__socials a {
  --cep-social-icon-size: var(--space-s);
}

.cep-nav-social img,
.cep-nav-social etch\:img,
.cep-nav-social svg,
.cep-footer__socials img,
.cep-footer__socials etch\:img,
.cep-footer__socials svg {
  inline-size: var(--space-s);
  block-size: var(--space-s);
  object-fit: contain;
}


/* Keep header in view on scroll — position only, no z-index */
body:not(:has([data-no-sticky])) #dwc-header {
  position: sticky;
  inset-block-start: 0;
}

/* Mobile drawer — full viewport, flush to top */
@media (width < 1200px) {
  #dwc-header {
    --mobile-menu-width: 100%;
  }

  #dwc-header .dwce-nav-nested,
  #dwc-header .dwc-nav-wrapper {
    --mobile-menu-width: 100%;
  }

  #dwc-header .dwc-nav-wrapper {
    inline-size: 100%;
    min-inline-size: 100%;
    max-inline-size: none;
    inset-inline: 0;
    inset-block-start: 0;
    background-color: var(--mobile-menu-bg, var(--header-bg, var(--white)));
    background-image: none;
    border-width: 0;
  }

  /* Native mobile-top-transparent leaves a header-height hole (dim shows through) */
  #dwc-header .dwc-nest-menu-top {
    --mobile-menu-topbar-bg: var(--mobile-menu-bg, var(--header-bg, var(--white)));
    background-color: var(--mobile-menu-bg, var(--header-bg, var(--white)));
  }
}

/* Mobile drawer — restore close control on solid top bar */
@media (width < 1200px) {
  #dwc-header .dwc-nest-menu-top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  #dwc-header .dwc-open .dwc-nest-toggle--close,
  #dwc-header .dwc-open .dwc-nest-menu-top .dwce-toggle[aria-label="Close Menu"] {
    display: flex !important;
    margin-inline-start: auto;
  }
}

/* Mobile drawer — hide header hamburger while close is showing */
@media (width < 1200px) {
  #dwc-header:has(.dwc-open) .dwc-nest-header .dwc-nest-toggle--open {
    visibility: hidden;
  }
}

/* Mobile drawer — hide header logo/hamburger so they cannot cover Home */
@media (width < 1200px) {
  #dwc-header:has(.dwc-open) .dwc-nest-header__container > .dwc-nest-menu__logo,
  #dwc-header:has(.dwc-open) .dwc-nest-header__container > .dwc-nest-toggle--open {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Mobile drawer — close icon matches hamburger, no chip */
@media (width < 1200px) {
  #dwc-header .dwc-nest-toggle--close {
    --toggle-size: 2.1875rem;
    background-color: transparent;
    background-image: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #dwc-header .dwc-nest-toggle--close svg {
    inline-size: var(--toggle-size);
    block-size: var(--toggle-size);
  }
}

/* Mobile drawer — larger close glyph, no top-bar hairline */
@media (width < 1200px) {
  #dwc-header:has(.dwc-open) .dwc-nest-menu-top,
  #dwc-header:has(.dwc-open) .dwc-nest-header {
    border-block-end: none;
  }

  #dwc-header .dwc-nest-toggle--close {
    --toggle-size: 2.1875rem;
    background-color: transparent;
    background-image: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* X paths sit inset in a 24 viewBox, so a 1:1 box looks smaller than the hamburger bars */
  #dwc-header .dwc-nest-toggle--close svg {
    inline-size: var(--toggle-size);
    block-size: var(--toggle-size);
    transform: scale(1.6);
    transform-origin: center;
    overflow: visible;
  }
}

/* Mobile drawer — original header close: primary, centered with logo */
@media (width < 1200px) {
  /* Original open-header: logo stays in the bar, clipped so it cannot cover Home */
  #dwc-header:has(.dwc-open) .dwc-nest-header__container > .dwc-nest-menu__logo {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: hidden;
    max-block-size: var(--dwc-nest-header-height);
    align-self: center;
  }

  #dwc-header:has(.dwc-open) .dwc-nest-header {
    border-block-end: var(--header-bottom-border);
  }

  #dwc-header:has(.dwc-open) .dwc-nest-menu-top {
    border-block-end: none;
    background-color: transparent;
  }

  #dwc-header .dwc-nest-toggle--close {
    --toggle-size: 2.1875rem;
    color: var(--primary);
    background-color: transparent;
    background-image: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    inset-block-start: calc(var(--dwc-nest-header-height) / 2);
    inset-inline-end: 16px;
    inset-block-end: auto;
    inset-inline-start: auto;
    transform: translateY(-50%);
  }

  #dwc-header .dwc-nest-toggle--close svg,
  #dwc-header .dwc-nest-toggle--close svg path {
    color: var(--primary);
    stroke: var(--primary);
  }

  #dwc-header .dwc-nest-toggle--close svg {
    inline-size: var(--toggle-size);
    block-size: var(--toggle-size);
    transform: scale(1.6);
    transform-origin: center;
    overflow: visible;
  }
}

/* Mobile drawer — keep open header bar white (not dim) */
@media (width < 1200px) {
  #dwc-header:has(.dwc-open) .dwc-nest-menu-top {
    background-color: var(--mobile-menu-bg, var(--header-bg, var(--white)));
  }
}


/* CEP header — native DWC sticky contract + open-drawer logo stack
   Plugin: [data-sticky-header=true] is sticky, then fixed on .scroll-down/.scroll-up.
   Do not set z-index on #dwc-header (that stacks the horse over Home). */

/* Fallback only while published HTML still has data-sticky-header=false */
body:not(:has([data-no-sticky])) #dwc-header:not([data-sticky-header='true']) {
  position: sticky;
  inset-block-start: 0;
}

body:not(:has([data-no-sticky])):is(.scroll-down, .scroll-up) #dwc-header:not([data-sticky-header='true']) {
  position: fixed;
  inset-inline: 0;
  inline-size: 100%;
}

body:not(:has([data-no-sticky])):is(.scroll-down, .scroll-up):has(#dwc-header:not([data-sticky-header='true'])):not(:has([data-overlay-header='true'])) {
  margin-block-start: var(--dwc-nest-header-height);
}

@media (width < 1200px) {
  /* Open drawer — plugin .dwc-headroom grows the wrapper by header height
     (100dvh + --dwc-nest-header-height), which is what scrolls Home under the logo. */
  #dwc-header:has(.dwc-open) .dwc-nav-wrapper {
    min-block-size: 100dvh;
  }

  #dwc-header:has(.dwc-open) .dwc-nav-nested-items {
    overflow-y: auto;
    max-block-size: calc(100dvh - var(--dwc-nest-header-height));
  }

  /* Keep the brand in the 107px bar; drop the row's 9999 stack while the drawer is open */
  #dwc-header:has(.dwc-open),
  #dwc-header:has(.dwc-open) .dwc-header-row-1,
  #dwc-header:has(.dwc-open) .dwc-nest-menu__logo {
    z-index: auto;
  }

  #dwc-header .dwc-nest-menu__logo,
  #dwc-header .dwc-nest-menu__logo svg {
    overflow: hidden;
    max-block-size: var(--dwc-nest-header-height);
  }

  /* Solid top bar covers scrolled items; logo stays in the real header above this band */
  #dwc-header:has(.dwc-open) .dwc-nest-menu-top {
    position: sticky;
    inset-block-start: 0;
    background-color: var(--mobile-menu-bg, var(--header-bg, var(--white)));
  }
}


@media (width < 1200px) {
  /* Open drawer must stay above page content. z-index:auto let the hero paint over the logo.
     List cannot enter the header band (max-block-size), so 9999 no longer covers Home. */
  #dwc-header:has(.dwc-open) {
    z-index: 9999;
  }

  #dwc-header:has(.dwc-open) .dwc-header-row-1 {
    z-index: 9999;
  }

  #dwc-header:has(.dwc-open) .dwc-nest-menu__logo {
    z-index: auto;
  }

  #dwc-header:has(.dwc-open) .dwc-nav-wrapper,
  #dwc-header:has(.dwc-open) .dwc-nest-menu-top {
    background-color: var(--mobile-menu-bg, var(--header-bg, var(--white)));
  }
}


@media (width < 1200px) {
  /* Logo sits above the solid drawer top bar (left). Close X stays on the right.
     List still starts at --dwc-nest-header-height, so Home cannot slide under the horse. */
  #dwc-header:has(.dwc-open) .dwc-nest-menu__logo {
    position: relative;
    z-index: 2;
  }
}