/**
 * Wellspring Studios — design tokens and module styles.
 *
 * Divi's design panel cannot express CSS custom properties or clamp(), so the
 * fluid type scale and the palette live here. Modules and layout sections
 * reference these tokens by name; changing a value here changes the whole site.
 *
 * Loaded on the front end AND inside the Visual Builder app window, so the
 * builder preview matches the published page.
 */

/* ── TOKENS ─────────────────────────────────────────────────────── */

:root {
  --ws-green:      #1c4837;
  --ws-green-mid:  #245b44;
  --ws-cream:      #fdf8f1;
  --ws-cream-deep: #f0e5d0;
  --ws-ink:        #0d1f17;
  --ws-muted:      #5a7a6a;

  --ws-bg:      var(--ws-cream);
  --ws-bg-alt:  var(--ws-cream-deep);
  --ws-bg-dark: var(--ws-green);
  --ws-fg:      #1a3327;
  --ws-fg-m:    var(--ws-muted);
  --ws-acc:     var(--ws-green);
  --ws-acc-mid: var(--ws-green-mid);

  --ws-f-d: Georgia, "Hoefler Text", "Times New Roman", serif;
  --ws-f-u: "Avenir Next", "Avenir", "Century Gothic", "Trebuchet MS", Helvetica, sans-serif;

  --ws-gap: clamp(1.5rem, 5vw, 4rem);
  --ws-sec: clamp(5rem, 10vw, 9rem);
  --ws-mw:  1240px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ws-bg: #0e1f18; --ws-bg-alt: #162a20; --ws-bg-dark: #091410;
    --ws-fg: #e8f0ea; --ws-fg-m: #7ea890;
    --ws-acc: #3a8c5c; --ws-acc-mid: #4da872;
    --ws-cream: #e8f0ea; --ws-cream-deep: #162a20; --ws-green: #3a8c5c;
  }
}

:root[data-theme="dark"] {
  --ws-bg: #0e1f18; --ws-bg-alt: #162a20; --ws-bg-dark: #091410;
  --ws-fg: #e8f0ea; --ws-fg-m: #7ea890;
  --ws-acc: #3a8c5c; --ws-acc-mid: #4da872;
  --ws-cream: #e8f0ea; --ws-cream-deep: #162a20; --ws-green: #3a8c5c;
}

:root[data-theme="light"] {
  --ws-bg: #fdf8f1; --ws-bg-alt: #f0e5d0; --ws-bg-dark: #1c4837;
  --ws-fg: #1a3327; --ws-fg-m: #5a7a6a;
  --ws-acc: #1c4837; --ws-acc-mid: #245b44;
  --ws-cream: #fdf8f1; --ws-cream-deep: #f0e5d0; --ws-green: #1c4837;
}

/* ── SHARED UTILITIES ───────────────────────────────────────────── */

.ws-eyebrow,
.ws-eyebrow p {
  display: block;
  font-family: var(--ws-f-u);
  font-size: .65rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ws-fg-m);
}

.ws-eyebrow-light,
.ws-eyebrow-light p { color: rgba(253, 248, 241, .38); }

/* Serif display headings. Applied via a Divi CSS Class on Heading modules. */
.ws-display h1, .ws-display h2, .ws-display h3,
.ws-display .et_pb_module_header {
  font-family: var(--ws-f-d);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-wrap: balance;
}
.ws-display em { font-style: italic; color: var(--ws-acc-mid); }

.ws-display-hero h1,
.ws-display-hero .et_pb_module_header {
  font-size: clamp(3.2rem, 10.5vw, 8.75rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ws-acc);
}

.ws-display-lg h2,
.ws-display-lg .et_pb_module_header { font-size: clamp(2.2rem, 5.5vw, 4.25rem); line-height: 1.1; }

.ws-display-md h2,
.ws-display-md .et_pb_module_header { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.1; }

.ws-display-sm h2,
.ws-display-sm .et_pb_module_header { font-size: clamp(1.8rem, 3.5vw, 2.75rem); }

.ws-on-dark h1, .ws-on-dark h2, .ws-on-dark h3,
.ws-on-dark .et_pb_module_header { color: var(--ws-cream); }

/* ── SECTION SHELLS ─────────────────────────────────────────────── */

.ws-section { padding: var(--ws-sec) var(--ws-gap) !important; }
.ws-section > .et_pb_row { max-width: var(--ws-mw); }

.ws-section-dark  { background: var(--ws-bg-dark) !important; }
.ws-section-alt   { background: var(--ws-bg-alt)  !important; }
.ws-section-accent{ background: var(--ws-acc)     !important; }

/* Rotating watermark behind the hero and CTA sections. */
.ws-watermark { position: relative; overflow: hidden; }
.ws-watermark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 271.84 271.45'><path d='M271.84,170.99c-1.13,53.67-36.74,96.19-90.68,100.46l.49-184.85C181.77,39.8,225.29,2.1,271.84.01v170.98Z'/><path d='M90.66,271.28c-33.49-2.82-63.34-22.27-78.75-51.89C4.25,204.67,1.02,189.35.01,172.6V0c21.01,1.2,40.77,8.67,57.08,21.57,20.49,16.2,31.96,39.43,33.54,65.67l.02,184.04Z'/><path d='M104.88,271.28l.08-64.53c.01-10.46,2.94-19.94,7.54-28.99,11.05-18.1,31.55-27.27,52.25-29.31l-.04,60.58c0,6.11-1.05,11.92-2.23,17.78-6.66,27.33-31.01,41.64-57.6,44.48Z'/><path d='M105.04,154.78l-.11-15.26c-.09-12.43,3.03-24.19,8.26-35.29,9.78-19.49,28.13-29.31,49.54-32.5,1.37,27.8-5.93,52.12-32.51,63.74-10.11,4.42-18.48,10.44-25.18,19.3Z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(72vw, 640px);
  opacity: .055;
  pointer-events: none;
  z-index: 0;
}
.ws-watermark > * { position: relative; z-index: 1; }

.ws-watermark-light::before {
  opacity: .042;
  filter: brightness(0) invert(1);
  background-size: min(65vw, 540px);
}

/* ── SERVICE CARD MODULE ────────────────────────────────────────── */

.ws_service_card {
  background: rgba(253, 248, 241, .055);
  border: 1px solid rgba(253, 248, 241, .1);
  border-radius: 1.5rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  transition: background .35s, border-color .35s, transform .3s;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.ws_service_card::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(253, 248, 241, .04) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .3s;
}

.ws_service_card:hover {
  background: rgba(253, 248, 241, .1);
  border-color: rgba(253, 248, 241, .2);
  transform: translateY(-4px);
}
.ws_service_card:hover::before { opacity: 1; }

/* Both modules expose the layout option group, so Divi automatically adds
   .et_flex_module (Module.php ~318). That class supplies display:flex,
   `flex-direction: var(--flex-direction)` and `gap: var(--vertical-gap)`, but
   defaults --vertical-gap to --module-gutter (30px) and never sets align-items.
   Override the *variables* rather than `gap` directly: a value set in the
   builder at Design → Layout is emitted on a higher-specificity selector and
   still wins. */
.ws_service_card {
  --flex-direction: column;
  --vertical-gap: 12px;
  align-items: flex-start;
}

/* Margins zeroed so the gap is the single source of vertical rhythm —
   otherwise Divi's heading and paragraph margins stack on top of it. */
.ws_service_card > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.ws_service_card .ws-srv-desc > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }

.ws_service_card .ws-srv-ico {
  display: block;
  /* font-family is also set inline per-icon (ETmodules vs FontAwesome); this is
     the fallback so the glyph never renders as a blank box. */
  font-family: 'ETmodules';
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  font-size: 44px;
  line-height: 1;
  color: var(--ws-cream);
  opacity: .7;
  /* One extra gap below the icon, so icon->title reads looser than title->body
     as in the original design. Scales with whatever gap is set. */
  padding-bottom: var(--vertical-gap, 12px);
}

.ws_service_card .ws-srv-name,
.ws_service_card h1, .ws_service_card h2, .ws_service_card h3,
.ws_service_card h4, .ws_service_card h5, .ws_service_card h6 {
  font-family: var(--ws-f-d);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  font-weight: 400;
  color: var(--ws-cream);
  line-height: 1.25;
}

.ws_service_card .ws-srv-desc,
.ws_service_card .ws-srv-desc p {
  font-size: .825rem;
  color: rgba(253, 248, 241, .5);
  line-height: 1.8;
}

/* ── PILLAR MODULE ──────────────────────────────────────────────── */

.ws_pillar {
  background: var(--ws-bg-alt);
  padding: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  transition: background .3s;
  height: 100%;
}

/* As above. align-items:center is what centres the mark; text-align only ever
   centred the text, which is why the SVG sat left. */
.ws_pillar {
  --flex-direction: column;
  --vertical-gap: 16px;
  align-items: center;
}

.ws_pillar > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.ws_pillar .ws-pil-desc > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; }

.ws_pillar:hover { background: color-mix(in srgb, var(--ws-bg-alt) 72%, var(--ws-acc)); }

.ws_pillar .ws-pil-mark {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 52px;
  height: 52px;
  fill: var(--ws-acc);
  opacity: .38;
  transition: opacity .3s;
}
.ws_pillar:hover .ws-pil-mark { opacity: .65; }

.ws_pillar .ws-pil-name,
.ws_pillar h1, .ws_pillar h2, .ws_pillar h3,
.ws_pillar h4, .ws_pillar h5, .ws_pillar h6 {
  font-family: var(--ws-f-d);
  font-size: 1.25rem;
  color: var(--ws-acc);
  font-weight: 400;
}

.ws_pillar .ws-pil-desc,
.ws_pillar .ws-pil-desc p {
  font-size: .825rem;
  color: var(--ws-fg-m);
  line-height: 1.75;
}

/* Hairline grid for the pillars row, matching the original bordered strip. */
.ws-pillar-row {
  border: 1px solid rgba(28, 72, 55, .15);
  border-radius: 1.5rem;
  overflow: hidden;
  background: rgba(28, 72, 55, .15);
}
.ws-pillar-row .et_pb_column { margin-right: 1px !important; }
.ws-pillar-row .et_pb_column:last-child { margin-right: 0 !important; }

/* ── BUTTONS ────────────────────────────────────────────────────── */

.ws-btn.et_pb_button,
.ws-btn.et_pb_button:hover {
  display: inline-flex;
  align-items: center;
  padding: .9rem 2.4rem !important;
  border-radius: 100px !important;
  border: none;
  font-size: .65rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.ws-btn.et_pb_button::after { display: none !important; }
.ws-btn.et_pb_button:hover { transform: translateY(-3px); }

.ws-btn-fill.et_pb_button  { background: var(--ws-acc) !important; color: var(--ws-cream) !important; }
.ws-btn-fill.et_pb_button:hover { box-shadow: 0 8px 28px rgba(28, 72, 55, .28); }

.ws-btn-out.et_pb_button  { border: 1.5px solid var(--ws-acc) !important; color: var(--ws-acc) !important; background: transparent !important; }
.ws-btn-out.et_pb_button:hover { background: var(--ws-acc) !important; color: var(--ws-cream) !important; }

.ws-btn-light.et_pb_button { background: var(--ws-cream) !important; color: var(--ws-acc) !important; }
.ws-btn-light.et_pb_button:hover { box-shadow: 0 10px 32px rgba(0, 0, 0, .22); }

/* ── BODY / QUOTE / RULE ────────────────────────────────────────── */

.ws-body, .ws-body p { font-size: 1.05rem; color: var(--ws-fg-m); line-height: 1.8; }
.ws-body-sm, .ws-body-sm p { font-size: .825rem; line-height: 1.75; color: var(--ws-fg-m); }
.ws-body-light, .ws-body-light p { color: rgba(253, 248, 241, .52); }

.ws-rule, .ws-rule p {
  font-family: var(--ws-f-d);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ws-acc);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(28, 72, 55, .18);
}

/* About panel: solid accent block with the mark and a pull quote. */
.ws-about-visual {
  position: relative;
  aspect-ratio: 1;
  border-radius: 2rem;
  background: var(--ws-acc);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 2.5rem;
}
.ws-about-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 35% 25%, rgba(28, 98, 60, .65) 0%, transparent 65%);
}
.ws-about-visual .ws-about-mark {
  position: absolute;
  width: 75%;
  fill: #fff;
  opacity: .11;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.ws-about-visual blockquote {
  position: relative;
  font-family: var(--ws-f-d);
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: rgba(253, 248, 241, .82);
  line-height: 1.45;
  border: none;
  padding: 0;
  margin: 0;
}
.ws-about-visual cite {
  display: block;
  margin-top: .75rem;
  font-size: .6rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(253, 248, 241, .38);
  font-style: normal;
}

@media (max-width: 980px) {
  .ws-about-visual { aspect-ratio: 4 / 3; }
}

/* ── SCROLL REVEAL ──────────────────────────────────────────────── */

.ws-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s ease, transform .75s ease;
}
.ws-reveal.ws-on { opacity: 1; transform: none; }

.ws-d1 { transition-delay: .1s; }
.ws-d2 { transition-delay: .2s; }
.ws-d3 { transition-delay: .3s; }
.ws-d4 { transition-delay: .4s; }

/* Inside the Visual Builder, never hide content behind a reveal that will
   not fire — the editor must always show what the module contains. */
.et-db .ws-reveal,
body.et-fb .ws-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ws-reveal { opacity: 1; transform: none; transition: none; }
  .ws-watermark::before { animation: none; }
}

/* ── LAYOUT-SPECIFIC (classes applied by wellspring-page.json) ───── */

/* Hero fills the viewport and centres its column. */
.ws-hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ws-hero .ws-hero-col { text-align: center; }
.ws-hero .ws-hero-col > * { margin-bottom: 1.25rem; }
.ws-hero .ws-hero-sub { max-width: 460px; margin-left: auto; margin-right: auto; }

/* The two hero buttons are separate Divi modules; sit them side by side. */
.ws-hero-col .et_pb_button_module_wrapper {
  display: inline-block;
  margin: .5rem .5rem 0;
}

/* Services header: heading left, aside right-aligned. */
.ws-srv-top { align-items: flex-end; }
.ws-srv-aside { text-align: right; max-width: 260px; margin-left: auto; }
.ws-srv-grid .et_pb_module { margin-bottom: 1.25rem; }

.ws-pil-hd { text-align: center; }

/* CTA detail strip. */
.ws-cta-col { text-align: center; }
.ws-cta-dets {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .75rem;
}
.ws-cta-det { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.ws-cta-det-lbl {
  font-size: .58rem; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(253, 248, 241, .32);
}
.ws-cta-det-val { font-size: .825rem; color: rgba(253, 248, 241, .62); }
.ws-cta-det-val a { color: rgba(253, 248, 241, .62); transition: color .2s; }
.ws-cta-det-val a:hover { color: var(--ws-cream); }

/* Footer. */
.ws-footer { background: #0d1f17 !important; padding: 4rem var(--ws-gap) 2.5rem !important; }
.ws-ft-mark { width: 36px; fill: rgba(253, 248, 241, .45); margin-bottom: 1rem; }
.ws-ft-bname {
  font-size: .65rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(253, 248, 241, .45); margin-bottom: .4rem;
}
.ws-ft-tag {
  font-family: var(--ws-f-d); font-style: italic; font-size: .9rem;
  color: rgba(253, 248, 241, .22); line-height: 1.5;
}
.ws-ft-ch {
  font-size: .6rem; letter-spacing: .35em; text-transform: uppercase;
  color: rgba(253, 248, 241, .28); margin-bottom: 1.25rem;
}
.ws-ft-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; padding: 0; }
.ws-ft-col li, .ws-ft-col a { font-size: .825rem; color: rgba(253, 248, 241, .48); line-height: 1.5; }
.ws-ft-col a:hover { color: rgba(253, 248, 241, .82); }
.ws-ft-bot {
  padding-top: 2rem;
  border-top: 1px solid rgba(253, 248, 241, .07);
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
}
.ws-ft-copy { font-size: .7rem; color: rgba(253, 248, 241, .2); letter-spacing: .05em; }
.ws-ft-ig {
  display: flex; align-items: center; gap: .5rem;
  font-size: .7rem; color: rgba(253, 248, 241, .3); transition: color .2s;
}
.ws-ft-ig:hover { color: rgba(253, 248, 241, .65); }
.ws-ft-ig svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }

@media (max-width: 980px) {
  .ws-srv-aside { text-align: left; max-width: none; margin-left: 0; }
  .ws-cta-dets { flex-direction: column; gap: 1.5rem; }
  .ws-ft-bot { flex-direction: column; text-align: center; }
}

/* ── THEME BUILDER HEADER ────────────────────────────────────────── */
/*
 * The header is a Theme Builder layout, so it renders inside .et-l--header
 * above the page body. It is fixed and transparent over the hero, then goes
 * solid once scrolled — .ws-on-scroll is toggled by wellspring-frontend.js.
 */

.et-l--header .ws-nav,
.ws-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1.5rem var(--ws-gap) !important;
  background: transparent;
  transition: background .4s, border-color .4s, box-shadow .4s, padding .4s;
  border-bottom: 1px solid transparent;
}

.ws-nav.ws-on-scroll {
  background: rgba(253, 248, 241, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(28, 72, 55, .1);
  box-shadow: 0 2px 20px rgba(0, 0, 0, .05);
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ws-nav.ws-on-scroll { background: rgba(14, 31, 24, .94); }
}
:root[data-theme="dark"] .ws-nav.ws-on-scroll { background: rgba(14, 31, 24, .94); }

/* Row: logo left, menu right, on one line at every width. */
.ws-nav .et_pb_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--ws-mw);
  padding: 0 !important;
}
.ws-nav .et_pb_column { margin: 0 !important; width: auto !important; float: none; }
.ws-nav .et_pb_module { margin-bottom: 0 !important; }

/* Logo lockup — inline SVG mark plus wordmark, no image asset needed. */
.ws-nav-logo { display: flex; align-items: center; gap: .7rem; }
.ws-nav-logo:hover { opacity: .85; }
.ws-nav-mark { width: 32px; height: 32px; flex-shrink: 0; fill: var(--ws-acc); }
.ws-nav-wm { display: flex; flex-direction: column; line-height: 1; }
.ws-nav-wm-top {
  font-size: .875rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ws-acc);
}
.ws-nav-wm-sub {
  font-size: .56rem; letter-spacing: .38em; text-transform: uppercase;
  color: var(--ws-fg-m); margin-top: 3px;
}

/* Divi menu module, restyled to match the original nav links. */
.ws-nav .et_pb_menu { background: transparent !important; }
.ws-nav .et_pb_menu_inner_container { justify-content: flex-end; }
.ws-nav .et_pb_menu__wrap { justify-content: flex-end; }

.ws-nav .et_pb_menu__menu > nav > ul { display: flex; align-items: center; gap: 2.5rem; }
.ws-nav .et_pb_menu__menu > nav > ul > li { padding: 0; margin: 0; }
.ws-nav .et_pb_menu__menu > nav > ul > li > a {
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ws-fg);
  font-weight: 500;
  opacity: .7;
  padding: 0;
  transition: opacity .2s;
}
.ws-nav .et_pb_menu__menu > nav > ul > li > a:hover { opacity: 1; }

/* Give the last menu item the CSS class "ws-nav-cta" in Appearance → Menus
   to turn it into the pill button, matching the original design. */
.ws-nav .et_pb_menu__menu > nav > ul > li.ws-nav-cta > a {
  background: var(--ws-acc);
  color: var(--ws-cream);
  padding: .55rem 1.4rem;
  border-radius: 100px;
  letter-spacing: .12em;
  opacity: 1;
  font-weight: 700;
  transition: transform .2s, box-shadow .2s;
}
.ws-nav .et_pb_menu__menu > nav > ul > li.ws-nav-cta > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(28, 72, 55, .3);
}

/* Mobile: Divi swaps to its hamburger below 980px. */
.ws-nav .et_mobile_menu {
  background: var(--ws-bg);
  border-top-color: var(--ws-acc);
  padding: 1rem 0;
}
.ws-nav .et_mobile_menu li a {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ws-fg);
  font-weight: 500;
  border-bottom: 1px solid rgba(28, 72, 55, .08);
}
.ws-nav .et_mobile_nav_menu .mobile_menu_bar::before { color: var(--ws-acc); }

@media (max-width: 980px) {
  .ws-nav { padding: 1rem var(--ws-gap) !important; }
  .ws-nav-wm-sub { display: none; }
}

/* The hero sits under the fixed nav; it is full-height so no offset is needed.
   Every other first-section needs clearance. */
.ws-section:first-child:not(.ws-hero) { padding-top: calc(var(--ws-sec) + 5rem) !important; }

/* ── BOOKING FORM ───────────────────────────────────────────────── */
/*
 * Styling for the native Divi contact form used by the booking request
 * layout. Divi supplies the markup, validation and submission; this only
 * restyles it to match the brand.
 */

.ws-booking { background: var(--ws-bg-alt) !important; }

.ws-booking-form .et_pb_contact_form { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.ws-booking-form .et_pb_contact_field { padding: 0 !important; margin: 0 !important; }

/* Field labels — Divi hides these by default in favour of placeholders; the
   form is long enough that visible labels matter for comprehension. */
.ws-booking-form .et_pb_contact_form_label {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  margin-bottom: .5rem;
  font-family: var(--ws-f-u);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ws-acc);
}

.ws-booking-form .et_pb_contact_field_required { color: #b4451f; }

/* Text inputs, email, textarea, select. */
.ws-booking-form input[type="text"],
.ws-booking-form input[type="email"],
.ws-booking-form input[type="tel"],
.ws-booking-form input[type="date"],
.ws-booking-form input[type="number"],
.ws-booking-form textarea,
.ws-booking-form select {
  width: 100%;
  background: var(--ws-bg) !important;
  border: 1px solid rgba(28, 72, 55, .22) !important;
  border-radius: .75rem !important;
  padding: .85rem 1rem !important;
  font-family: var(--ws-f-u);
  font-size: .9rem;
  color: var(--ws-fg) !important;
  transition: border-color .2s, box-shadow .2s;
}

.ws-booking-form input:focus,
.ws-booking-form textarea:focus,
.ws-booking-form select:focus {
  outline: none;
  border-color: var(--ws-acc) !important;
  box-shadow: 0 0 0 3px rgba(28, 72, 55, .12);
}

.ws-booking-form textarea { min-height: 8rem; resize: vertical; }

/* Radio and checkbox groups, before the card enhancement applies. Scoped with
   :not(.ws-has-cards) so it never competes with the grid rule below. */
.ws-booking-form:not(.ws-has-cards) .et_pb_contact_field_checkbox,
.ws-booking-form:not(.ws-has-cards) .et_pb_contact_field_radio {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.ws-booking-form .et_pb_contact_field_checkbox label,
.ws-booking-form .et_pb_contact_field_radio label {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ws-fg);
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.ws-booking-form input[type="checkbox"],
.ws-booking-form input[type="radio"] {
  flex-shrink: 0;
  margin-top: .2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--ws-acc);
  cursor: pointer;
}

/* The consent field reads as a statement, not a field — set it apart.
   Also applies to any field set to data-ws-options="plain" in the builder. */
.ws-booking-form .et_pb_contact_field[data-id="consent"],
.ws-booking-form .et_pb_contact_field.ws-opts-plain,
.ws-booking-form li.ws-consent {
  padding-top: 1rem !important;
  margin-top: .5rem !important;
  border-top: 1px solid rgba(28, 72, 55, .15);
}

/* Submit button, matching the site's pill buttons. */
.ws-booking-form .et_pb_contact_submit {
  display: inline-flex;
  align-items: center;
  background: var(--ws-acc) !important;
  color: var(--ws-cream) !important;
  border: none !important;
  padding: .9rem 2.4rem !important;
  border-radius: 100px !important;
  font-family: var(--ws-f-u);
  font-size: .65rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  transition: transform .2s, box-shadow .2s;
}
.ws-booking-form .et_pb_contact_submit::after { display: none !important; }
.ws-booking-form .et_pb_contact_submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(28, 72, 55, .28);
}

/* Divi's basic-captcha row. */
.ws-booking-form .et_pb_contact_right { display: flex; align-items: center; gap: .6rem; }
.ws-booking-form .et_pb_contact_captcha_question { color: var(--ws-fg-m); font-size: .8rem; }
.ws-booking-form .et_pb_contact_captcha { max-width: 5rem; }

.ws-booking-form .et-pb-contact-message {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ws-acc);
}

@media (max-width: 767px) {
  .ws-booking-form .et_pb_contact_form { gap: 1rem; }
}

/* ── BOOKING FORM ENHANCEMENTS ──────────────────────────────────── */
/*
 * Styles for wellspring-booking.js. Everything here is additive: without the
 * script none of these classes are applied and the form renders as the plain
 * Divi contact form above.
 */

/* Options as selectable cards. */
/* Two-up option grid.
   !important is required: Divi ships
   `.et_pb_contact_form_0.et_pb_contact_field .et_pb_contact_field_options_list
    > .et_pb_contact_field_checkbox { display: flex }`
   which outranks any reasonable selector here and stacks the options. */
.ws-booking-form.ws-has-cards .et_pb_contact_field_checkbox,
.ws-booking-form.ws-has-cards .et_pb_contact_field_radio,
.ws-booking-form.ws-has-cards .et_pb_contact_field_options_list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .6rem;
  align-items: stretch;
}

/* Options sit side by side, so equal heights read better than ragged ones. */
.ws-booking-form.ws-has-cards .ws-opt { height: 100%; }

/* Divi's own visible group title becomes the field label; the screen-reader
   label it also renders is suppressed to avoid showing the question twice. */
.ws-booking-form .ws-has-group-title .et_pb_contact_form_label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.ws-booking-form .et_pb_contact_field_options_title {
  display: block;
  margin-bottom: .5rem;
  font-family: var(--ws-f-u);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ws-acc);
}

/* One card = one input + its label, paired by wellspring-booking.js. */
.ws-booking-form.ws-has-cards .ws-opt {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(28, 72, 55, .2);
  border-radius: .85rem;
  background: var(--ws-bg);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.ws-booking-form.ws-has-cards .ws-opt:hover { border-color: rgba(28, 72, 55, .45); }

.ws-booking-form.ws-has-cards .ws-opt label {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex: 1;
}

.ws-booking-form.ws-has-cards .ws-opt.ws-opt-checked {
  border-color: var(--ws-acc);
  background: color-mix(in srgb, var(--ws-bg) 88%, var(--ws-acc));
  box-shadow: 0 0 0 1px var(--ws-acc) inset;
}

.ws-booking-form.ws-has-cards .ws-opt:focus-within {
  outline: 2px solid var(--ws-acc);
  outline-offset: 2px;
}

/* Fixed column count, from data-ws-columns in the builder. Collapses to one
   column on phones, where two cards side by side are too cramped to read. */
.ws-booking-form.ws-has-cards .ws-opt-cols .et_pb_contact_field_options_list {
  grid-template-columns: repeat(var(--ws-opt-cols), minmax(0, 1fr));
}
@media (max-width: 767px) {
  .ws-booking-form.ws-has-cards .ws-opt-cols .et_pb_contact_field_options_list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Plain options (data-ws-options="plain", e.g. consent) are statements, not
   choices — full width, no card chrome. */
.ws-booking-form.ws-has-cards .ws-opts-plain .et_pb_contact_field_options_list,
.ws-booking-form.ws-has-cards .ws-opts-plain .et_pb_contact_field_checkbox,
.ws-booking-form.ws-has-cards .ws-opts-plain .et_pb_contact_field_radio {
  grid-template-columns: 1fr;
}
.ws-booking-form.ws-has-cards .ws-opts-plain .ws-opt,
.ws-booking-form.ws-has-cards .ws-opts-plain .ws-opt.ws-opt-checked {
  align-items: flex-start;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.ws-booking-form.ws-has-cards .ws-opts-plain .ws-opt label {
  font-size: .82rem;
  color: var(--ws-fg-m);
  line-height: 1.6;
}

/* Time fields: the field's own input stays in the form (it is what Divi
   submits) but is replaced on screen by the slot dropdown. Visually hidden
   rather than display:none, so the browser still submits and restores it. */
.ws-booking-form input.ws-time-source[type],
.et_pb_contact_form_container input.ws-time-source[type] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}
.ws-booking-form .ws-time-select { width: 100%; }

/* Date placeholder overlay (plain forms, where Divi hides labels). While it
   shows, the native "yyyy-mm-dd" text underneath is made invisible. */
.ws-date-placeholder {
  position: absolute;
  display: flex;
  align-items: center;
  pointer-events: none;
  white-space: nowrap;
}
.ws-date-placeholder[hidden] { display: none; }
input.ws-date-empty,
input.ws-date-empty::-webkit-datetime-edit { color: transparent !important; }
.ws-booking-form .ws-time-select option:disabled { color: rgba(0, 0, 0, .35); }

/* Helper text under a field (Content → Text → Helper Text). Unscoped, since
   it works on any contact form: muted relative to the form's own text colour
   so it suits whatever Divi styling the form has. */
.et_pb_contact_field .ws-field-help {
  flex-basis: 100%;
  width: 100%;
  margin: .4rem 0 0;
  padding: 0;
  font-size: .8em;
  line-height: 1.5;
  opacity: .75;
}
.et_pb_contact_field .ws-field-help a { text-decoration: underline; }

/* Divi lays each field out as a flex column with a --vertical-gap (30px by
   default) between children, which pushed the hint and any error message a
   full gap away from the box they belong to. Pull them back up by that gap. */
.et_flex_module.et_pb_contact_field > .ws-field-help,
.et_flex_module.et_pb_contact_field > .ws-field-help ~ .ws-field-error,
.et_flex_module.et_pb_contact_field > .ws-field-error {
  margin-top: calc(.4rem - var(--vertical-gap, 0px)) !important;
}

.ws-booking-form .ws-field-help {
  opacity: 1;
  font-size: .78rem;
  color: var(--ws-fg-m);
}

/* Builder canvas: the page's helper markup is rendered server-side, so the
   canvas draws a preview from the data attribute instead. */
.et-fb .et_pb_contact_field[data-ws-help]::after {
  content: attr(data-ws-help);
  display: block;
  flex-basis: 100%;
  width: 100%;
  margin-top: calc(.4rem - var(--vertical-gap, 0px));
  font-size: .8em;
  line-height: 1.5;
  opacity: .75;
}

/* Inline validation. */
.ws-field-error {
  margin: .4rem 0 0;
  font-size: .75rem;
  line-height: 1.4;
  color: #b4451f;
  min-height: 0;
}
.ws-field-error:empty { display: none; }

.ws-invalid input:not([type="checkbox"]):not([type="radio"]),
.ws-invalid textarea,
.ws-invalid select {
  border-color: #b4451f !important;
  box-shadow: 0 0 0 3px rgba(180, 69, 31, .1);
}

/* Wizard. */
.ws-steps {
  display: flex;
  gap: .5rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  width: 100%;
  counter-reset: ws-step;
}

.ws-step-dot {
  flex: 1;
  padding-top: .7rem;
  border-top: 2px solid rgba(28, 72, 55, .18);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ws-fg-m);
  transition: color .3s, border-color .3s;
}
.ws-step-dot.ws-current { border-top-color: var(--ws-acc); color: var(--ws-acc); }
.ws-step-dot.ws-done { border-top-color: var(--ws-acc); color: var(--ws-fg-m); }

/* Progress: "Step 2 of 3" caption and/or a bar (Progress Indicator setting). */
.ws-progress { width: 100%; margin: 0 0 2rem; }

.ws-progress-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .7rem;
  padding: 0;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ws-fg-m);
}
.ws-progress-caption strong { color: var(--ws-acc); font-weight: 700; }

.ws-progress-track {
  position: relative;
  height: 4px;
  border-radius: 100px;
  background: rgba(28, 72, 55, .14);
  overflow: hidden;
}
.ws-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--ws-acc);
  transition: width .35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .ws-progress-fill { transition: none; }
}

/* Optional sentence at the top of a step (Step Introduction setting). */
.ws-step > .ws-step-intro {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  color: var(--ws-fg-m);
  font-size: .95rem;
  line-height: 1.6;
}

/* Two-column grid; wellspring-booking.js tags each field half or full so the
   layout does not depend on Divi's generated per-field width CSS. */
.ws-step {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  width: 100%;
}
.ws-step[hidden] { display: none; }
.ws-step > .et_pb_contact_field { width: auto !important; min-width: 0; }
.ws-step > .ws-col-full { grid-column: 1 / -1; }
.ws-step > .ws-col-half { grid-column: span 1; }

@media (max-width: 767px) {
  .ws-step { grid-template-columns: minmax(0, 1fr); }
  .ws-step > .ws-col-half { grid-column: 1 / -1; }
}

.ws-step-nav { display: flex; gap: .75rem; align-items: center; width: 100%; }
.ws-step-nav [hidden] { display: none; }

.ws-step-btn {
  display: inline-flex;
  align-items: center;
  padding: .9rem 2.4rem;
  border-radius: 100px;
  border: none;
  font-family: var(--ws-f-u);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.ws-step-btn:hover { transform: translateY(-3px); }

.ws-step-next { background: var(--ws-acc); color: var(--ws-cream); }
.ws-step-next:hover { box-shadow: 0 8px 28px rgba(28, 72, 55, .28); }

.ws-step-back {
  background: transparent;
  color: var(--ws-acc);
  border: 1.5px solid var(--ws-acc);
}
.ws-step-back:hover { background: var(--ws-acc); color: var(--ws-cream); }

/* Date range calendar. */
/* Portalled to <body> by wellspring-booking.js and positioned from the input's
   bounding box, so no ancestor's height, overflow or stacking context can
   affect it. Coordinates are set inline; only appearance lives here. */
.ws-cal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  background: var(--ws-bg);
  border: 1px solid rgba(28, 72, 55, .2);
  border-radius: 1rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18);
  padding: 1rem;
  min-width: min(34rem, 92vw);
}
.ws-cal[hidden] { display: none; }

.ws-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.ws-cal-hint {
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ws-acc);
}

.ws-cal-nav {
  background: transparent;
  border: 1px solid rgba(28, 72, 55, .2);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ws-acc);
  cursor: pointer;
}
.ws-cal-nav:hover { background: rgba(28, 72, 55, .08); }

.ws-cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.ws-cal-caption {
  font-family: var(--ws-f-d);
  font-size: .95rem;
  color: var(--ws-acc);
  text-align: center;
  margin-bottom: .5rem;
}

.ws-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.ws-cal-dow {
  font-size: .55rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ws-fg-m);
  text-align: center;
  padding-bottom: .35rem;
}

.ws-cal-day {
  aspect-ratio: 1;
  border: none;
  background: transparent;
  border-radius: .45rem;
  font-size: .78rem;
  color: var(--ws-fg);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ws-cal-day:hover:not(:disabled) { background: rgba(28, 72, 55, .12); }
.ws-cal-day:disabled { opacity: .28; cursor: default; }
.ws-cal-day:focus-visible { outline: 2px solid var(--ws-acc); outline-offset: 1px; }

.ws-cal-between { background: rgba(28, 72, 55, .1); border-radius: 0; }
.ws-cal-start, .ws-cal-end {
  background: var(--ws-acc) !important;
  color: var(--ws-cream) !important;
}

.ws-range-duration {
  margin: .4rem 0 0;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ws-fg-m);
}
.ws-range-duration:empty { display: none; }

@media (max-width: 640px) {
  .ws-cal { min-width: min(20rem, 92vw); }
  .ws-cal-months { grid-template-columns: 1fr; }
  .ws-steps { gap: .3rem; }
  .ws-step-dot { font-size: 0; padding-top: .5rem; }
  .ws-step-nav { flex-direction: column-reverse; align-items: stretch; }
  .ws-step-btn { justify-content: center; }
}

/* ── BOOKING FORM AS AN OVERLAY PANEL ───────────────────────────── */
/*
 * Applied when the booking section is opened by a Divi visibility Interaction
 * and rendered position:fixed over the page. Divi opens it; these rules make
 * it behave like a panel — scrollable, closable, and not letting the page
 * behind it scroll.
 *
 * .ws-panel is added by wellspring-booking.js only when the section is
 * actually fixed, so a normal in-page booking section is unaffected.
 */

.ws-booking.ws-panel {
  /* dvh so mobile browser chrome does not clip the bottom of the form.
     min-height matters as much as max: the panel's stacking ancestors are
     raised above the rest of the page while it is open, so it must actually
     cover the viewport or page content would show through above the header. */
  min-height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* Page-section padding is far too generous inside a panel. */
  padding: 4rem clamp(1.25rem, 4vw, 3rem) 3rem !important;
}

/* Fallback for browsers without dvh. */
@supports not (height: 100dvh) {
  .ws-booking.ws-panel { min-height: 100vh; max-height: 100vh; }
}

/* Stop the page behind the panel scrolling with it. */
body.ws-panel-open { overflow: hidden; }

.ws-panel-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10000;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(253, 248, 241, .25);
  border-radius: 50%;
  background: rgba(13, 31, 23, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ws-cream);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}

.ws-panel-close:hover {
  background: rgba(13, 31, 23, .8);
  border-color: rgba(253, 248, 241, .5);
  transform: rotate(90deg);
}

.ws-panel-close:focus-visible {
  outline: 2px solid var(--ws-cream);
  outline-offset: 2px;
}

/* The button lives on <body>, so it is hidden via the hidden attribute rather
   than a descendant selector. z-index is raised at runtime to clear whatever
   fixed overlays the theme actually has. */
.ws-panel-close[hidden] { display: none !important; }

@media (max-width: 640px) {
  .ws-booking.ws-panel { padding: 3.5rem 1.1rem 2.5rem !important; }
  .ws-panel-close { top: .6rem; right: .6rem; width: 2.4rem; height: 2.4rem; }
}

/* ── BOOKING WIZARD: VISUAL BUILDER ─────────────────────────────── */
/*
 * The wizard script never runs in the builder, so the form is edited as one
 * long list. These markers show where each step begins, using the data
 * attributes the builder bundle puts on the canvas modules. Scoped to .et-fb,
 * so nothing here reaches the live page.
 */
.et-fb .ws-booking-form:not([data-ws-wizard="off"]) .et_pb_contact_field[data-ws-step] {
  position: relative;
  margin-top: 1.75rem !important;
  padding-top: 1.1rem !important;
  border-top: 2px dashed rgba(28, 72, 55, .35);
}

.et-fb .ws-booking-form:not([data-ws-wizard="off"]) .et_pb_contact_field[data-ws-step]::before {
  content: "Step · " attr(data-ws-step);
  position: absolute;
  top: -.8rem;
  left: 0;
  padding: .2rem .65rem;
  border-radius: 100px;
  background: var(--ws-acc, #1c4837);
  color: var(--ws-cream, #fdf8f1);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}

/* The first field in a form is always the start of step one. */
.et-fb .ws-booking-form:not([data-ws-wizard="off"]) .et_pb_contact_field[data-ws-step]:first-child {
  margin-top: .9rem !important;
}