.elementor-9382 .elementor-element.elementor-element-330bcb5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9382 .elementor-element.elementor-element-3ffef50{width:100%;max-width:100%;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-3ffef50 */@charset "UTF-8";
/* ==========================================================================
   COASTAL DU MONDE — SITE FOOTER
   Shared by every page. Pair with footer.html. No JavaScript.

   LOAD ORDER
   Link this BEFORE the page stylesheet:

     <link rel="stylesheet" href="header.css">
     <link rel="stylesheet" href="footer.css">
     <link rel="stylesheet" href="styles.css">   <- page tokens + sections

   As with header.css, the :root block is a set of DEFAULTS so the component
   works dropped into a page on its own; a page stylesheet loading afterwards
   redefines the same properties and wins.

   The footer is the page's one large navy field. It closes the document the
   way the masthead opens it, and it is the only place where four columns of
   links are the right answer — a directory is a directory.

   Contents
   01  TOKEN DEFAULTS
   02  SHELL
   03  BRAND COLUMN
   04  LINK COLUMNS
   05  LEGAL RULE
   ========================================================================== */


/* ==========================================================================
   01  TOKEN DEFAULTS
   ========================================================================== */
:root {
  --c-navy:       #053654;
  --c-teal-light: #74B3BC;
  --c-on-dark:    #FFFFFF;

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-semibold: 600;
  --fw-bold:     700;

  --t-sm: 14px;
  --t-xs: 12px;
  --lh-sm: 1.55;

  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-5: 48px;
  --s-6: 64px;

  --container: 1280px;
  --gutter:    clamp(20px, 5vw, 72px);
  --tap:       44px;
  --radius:    2px;
  --ls-kicker: 0.2em;

  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --dur:  220ms;
}


/* ==========================================================================
   02  SHELL
   ========================================================================== */

/* Box model, scoped to what this component owns — .site-footer__inner is
   width:100% plus a gutter of padding, which overflows under the default
   content-box. Scoped rather than global: a shared component should not
   redefine the box model for a host page's own markup. See the same note in
   header.css.                                                               */
.site-footer,
.site-footer *,
.site-footer *::before,
.site-footer *::after { box-sizing: border-box; }

.site-footer {
  padding-block: clamp(56px, 6vw, 96px) var(--s-5);
  background: var(--c-navy);
  color: color-mix(in srgb, var(--c-on-dark) 82%, transparent);
  font-family: var(--f-body);
}

/* White ring: teal would sit at 2.7:1 against this ground. */
.site-footer :where(a, button):focus-visible {
  outline: 3px solid var(--c-on-dark);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* The rail sizes itself rather than depending on a page-level .container,
   so this component drops into any document unchanged.                     */
.site-footer__inner {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6) var(--s-5);
}

.site-footer a {
  color: var(--c-on-dark);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.site-footer a:hover { color: var(--c-teal-light); }


/* ==========================================================================
   03  BRAND COLUMN
   ========================================================================== */
.site-footer__brand { display: grid; gap: var(--s-3); align-content: start; }

/* .brand and .brand__mark/.brand__name come from header.css — the lockup is
   one component and is not redefined here. Only the footer's own spacing
   below it belongs in this file.                                           */
.site-footer__blurb {
  max-width: 34ch;
  margin: 0;
  color: color-mix(in srgb, var(--c-on-dark) 72%, transparent);
  font-size: var(--t-sm);
  line-height: 1.7;
}

.site-footer__contact { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--t-sm);
}


/* ==========================================================================
   04  LINK COLUMNS
   ========================================================================== */
.site-footer__heading {
  margin: 0 0 var(--s-2);
  color: var(--c-teal-light);
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-sm);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
}

.site-footer__col ul { display: grid; margin: 0; padding: 0; list-style: none; }
.site-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--t-sm);
}


/* ==========================================================================
   05  LEGAL RULE
   ========================================================================== */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  justify-content: space-between;
  margin-top: clamp(48px, 5vw, 80px);
  padding-top: var(--s-3);
  border-top: 1px solid color-mix(in srgb, var(--c-on-dark) 22%, transparent);
  color: color-mix(in srgb, var(--c-on-dark) 66%, transparent);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
}
.site-footer__legal p { margin: 0; }


@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
    column-gap: var(--s-5);
  }
}/* End custom CSS */