:root {
  /* Brand Color Variables */
  --brand-primary: #00608a;
  --brand-secondary: #ea6852;
  --brand-accent: #f59f0a;
  --brand-tertiary: #a3cde0;
  --brand-neutral: #f6b4a7;
  --brand-highlight: #f8c2b9;
}

/* Brand Color Utility Classes */
.bg-brand-primary { background-color: var(--brand-primary) !important; }
.bg-brand-secondary { background-color: var(--brand-secondary) !important; }
.bg-brand-accent { background-color: var(--brand-accent) !important; }
.bg-brand-tertiary { background-color: var(--brand-tertiary) !important; }
.bg-brand-neutral { background-color: var(--brand-neutral) !important; }
.bg-brand-highlight { background-color: var(--brand-highlight) !important; }

.text-brand-primary { color: var(--brand-primary) !important; }
.text-brand-secondary { color: var(--brand-secondary) !important; }
.text-brand-accent { color: var(--brand-accent) !important; }
.text-brand-tertiary { color: var(--brand-tertiary) !important; }
.text-brand-neutral { color: var(--brand-neutral) !important; }
.text-brand-highlight { color: var(--brand-highlight) !important; }

.border-brand-primary { border-color: var(--brand-primary) !important; }
.border-brand-secondary { border-color: var(--brand-secondary) !important; }
.border-brand-accent { border-color: var(--brand-accent) !important; }

/* Apply brand colors to components with specific classes */

.navbar-default {
  background-color: var(--brand-primary) !important;
}

.site-footer,
.footer {
  background-color: var(--brand-secondary) !important;
}

/* Navigation links in branded components */
.site-header a,
.navbar-default a {
  color: white !important;
}

/* Variable-driven headers (Header-04, Header-03): use CSS variables, not forced white */
.siteHeader.oc-header-04 a,
.siteHeader.oc-header-04 .dropdown-menu a,
.siteHeader.oc-header-04 .mega-dropdown a,
.siteHeader.oc-header-04 .mega-dropdown .mega-section h3,
.siteHeader.oc-header-04 .mega-section-links a,
.siteHeader.oc-header-03 a,
.siteHeader.oc-header-03 .dropdown-menu a,
.siteHeader.oc-header-03 .mega-dropdown a,
.siteHeader.oc-header-03 .mega-dropdown .mega-section h3,
.siteHeader.oc-header-03 .mega-section-links a {
  color: unset !important;
}

/* Buttons with brand colors */
.btn-primary,
button.primary {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: white !important;
}

.btn-secondary,
button.secondary {
  background-color: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: white !important;
}

/* Links */
a {
  color: var(--brand-primary);
}

a:hover {
  color: var(--brand-accent);
}

/* Section backgrounds with brand colors */
.section-primary { background-color: var(--brand-primary); color: white; }
.section-secondary { background-color: var(--brand-secondary); color: white; }
.section-accent { background-color: var(--brand-accent); }
.section-tertiary { background-color: var(--brand-tertiary); }
.section-neutral { background-color: var(--brand-neutral); }
.section-highlight { background-color: var(--brand-highlight); }


:root {
  --primary: #00608a;
  --secondary: #ea6852;
  --highlight: #f8c2b9;
}

:root {
  --oc-content-gutter: 3vw;
}

:root {
  --overlay-vertical: rgba(0,0,0,0.60);
  --overlay-vertical-top: rgba(0,0,0,0.25);
  --overlay-horizontal: rgba(0,0,0,0.55);
  --overlay-horizontal-start: transparent;
  --overlay-gradient: none;
}

:root {
  --oc-nav-gap-primary: 30px;
  --oc-nav-gap-secondary: 20px;
  --oc-nav-primary-font-family: inherit;
  --oc-nav-primary-font-size: 16px;
  --oc-nav-primary-font-weight: 500;
  --oc-nav-primary-color: #00608a;
  --oc-nav-primary-hover: #ea6852;
  --oc-nav-primary-link-padding-y: 8px;
  --oc-nav-primary-link-padding-x: 12px;
  --oc-nav-primary-dropdown-bg: #ffffff;
  --oc-nav-primary-dropdown-color: #00608a;
  --oc-nav-primary-dropdown-font-family: inherit;
  --oc-nav-primary-dropdown-font-size: 14px;
  --oc-nav-primary-dropdown-hover-bg: #f8c2b9;
  --oc-nav-secondary-font-family: inherit;
  --oc-nav-secondary-font-size: 14px;
  --oc-nav-secondary-font-weight: 500;
  --oc-nav-secondary-color: #00608a;
  --oc-nav-secondary-hover: #ea6852;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-100.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-200.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-100italic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-200italic.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-300italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-500italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-600italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-700italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-800italic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url('../fonts/Barlow-Condensed-900italic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url('../fonts/Cormorant-Garamond-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url('../fonts/Cormorant-Garamond-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url('../fonts/Cormorant-Garamond-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url('../fonts/Cormorant-Garamond-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url('../fonts/Cormorant-Garamond-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url('../fonts/Cormorant-Garamond-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url('../fonts/Cormorant-Garamond-300italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url('../fonts/Cormorant-Garamond-500italic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url('../fonts/Cormorant-Garamond-600italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url('../fonts/Cormorant-Garamond-700italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url('../fonts/Lexend-100.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url('../fonts/Lexend-200.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url('../fonts/Lexend-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url('../fonts/Lexend-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url('../fonts/Lexend-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url('../fonts/Lexend-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url('../fonts/Lexend-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url('../fonts/Lexend-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src: url('../fonts/Lexend-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-primary: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
  --font-secondary: "Cormorant Garamond", Georgia, Times, "Times New Roman", serif;
  --font-accent: "Lexend", ui-sans-serif, system-ui, sans-serif;
}

/* Auto-apply brand fonts (respect manually assigned fonts) */
h1:not([data-font-family]), h2:not([data-font-family]), h3:not([data-font-family]), h4:not([data-font-family]), h5:not([data-font-family]), h6:not([data-font-family]) {
  font-family: var(--font-primary) !important;
}

p:not([data-font-family]), div:not([data-font-family]), span:not([data-font-family]), a:not([data-font-family]), li:not([data-font-family]), ul:not([data-font-family]), ol:not([data-font-family]), button:not([data-font-family]), input:not([data-font-family]), textarea:not([data-font-family]), select:not([data-font-family]) {
  font-family: var(--font-secondary) !important;
}

.accent-font:not([data-font-family]), .accent:not([data-font-family]), .highlight:not([data-font-family]), .callout:not([data-font-family]), .cta-title:not([data-font-family]), .promo-title:not([data-font-family]), .banner-text:not([data-font-family]) {
  font-family: var(--font-accent) !important;
}

/* ================================ */
/* Typography Design System         */
/* ================================ */

:root {
  /* ================================ */
  /* CMS pixel values (unitless)     */
  --body-fs-cms: 18;
  --h1-fs-cms: 60;
  --h2-fs-cms: 44;
  --h3-fs-cms: 36;
  --btn-fs-cms: 16;
  --a-fs-cms: 16;

  /* Derived viewport-width units    */
  --body-fs-vw: calc((var(--body-fs-cms) / 10) * 1vw);
  --h1-fs-vw: calc((var(--h1-fs-cms) / 10) * 1vw);
  --h2-fs-vw: calc((var(--h2-fs-cms) / 10) * 1vw);
  --h3-fs-vw: calc((var(--h3-fs-cms) / 10) * 1vw);
  --btn-fs-vw: calc((var(--btn-fs-cms) / 10) * 1vw);
  --a-fs-vw: calc((var(--a-fs-cms) / 10) * 1vw);

  /* Derived rem units               */
  --body-fs-rem: calc((var(--body-fs-cms) / 16) * 1rem);
  --h1-fs-rem: calc((var(--h1-fs-cms) / 16) * 1rem);
  --h2-fs-rem: calc((var(--h2-fs-cms) / 16) * 1rem);
  --h3-fs-rem: calc((var(--h3-fs-cms) / 16) * 1rem);
  --btn-fs-rem: calc((var(--btn-fs-cms) / 16) * 1rem);
  --a-fs-rem: calc((var(--a-fs-cms) / 16) * 1rem);

  /* Responsive clamp() values       */
  --body-fs-base: clamp(
    1rem,
    var(--body-fs-vw) + .5rem,
    var(--body-fs-rem)
  );
  --h1-fs-base: clamp(
    2.25rem,
    var(--h1-fs-vw) + .5rem,
    var(--h1-fs-rem)
  );
  --h2-fs-base: clamp(
    1.75rem,
    calc(var(--h2-fs-vw) + .5rem),
    var(--h2-fs-rem)
  );
  --h3-fs-base: clamp(
    1.375rem,
    var(--h3-fs-vw) + .5rem,
    var(--h3-fs-rem)
  );
  --btn-fs-base: clamp(
    0.75rem,
    var(--btn-fs-vw) + .25rem,
    var(--btn-fs-rem)
  );
  --a-fs-base: clamp(
    0.75rem,
    var(--a-fs-vw) + .25rem,
    var(--a-fs-rem)
  );

  /* ================================ */
  /* Multi-phase transition durations */
  --initial-duration: 450ms;
  --final-duration: 300ms;
  --focus-duration: 0ms;
}

/* ================================ */
/* Base element styles              */
/* ================================ */

* {
  box-sizing: border-box;
}

body {
  font-size: var(--body-fs-base) !important;
  font-family: var(--font-secondary, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif);
  line-height: 1.5;
  margin: 0;
}

button {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  box-sizing: border-box;
  border-radius: inherit;
}

ul {
  padding: .375em 2em;
  width: min(100%, 130ch);
}

li {
  display: block;
  line-height: 1.2em;
  margin-block: 0;
  padding-block: .375em;
}

/* ================================ */
/* Base typography                  */
/* !important on font-size enforces */
/* the global sizes set in the      */
/* styles panel — matches editor.   */
/* ================================ */

.oc-p,
p {
  font-size: var(--body-fs-base) !important;
  line-height: 1.5;
}

.oc-h1,
h1 {
  font-size: var(--h1-fs-base) !important;
  text-wrap: balance;
  line-height: 1.1;
}

.oc-h2,
h2 {
  font-size: var(--h2-fs-base) !important;
  text-wrap: balance;
  line-height: 1.2;
}

.oc-h3,
h3 {
  font-size: var(--h3-fs-base) !important;
  line-height: 1.2;
}

.oc-btn,
button,
.btn {
  font-size: var(--btn-fs-base) !important;
}

.oc-a,
a {
  font-size: var(--a-fs-base) !important;
  text-underline-offset: .125rem;
  transition: all ease-out var(--initial-duration);
}

/* ================================ */
/* User feedback — hover / focus    */
/* ================================ */

.oc-a:hover,
a:hover {
  transition-duration: var(--final-duration);
}

.oc-a:focus-visible,
a:focus-visible {
  transition-duration: var(--focus-duration);
}

/* ================================ */
/* Reduced motion                   */
/* ================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --initial-duration: 0ms;
    --final-duration: 0ms;
  }

  .oc-a,
  a {
    transition: none;
  }
}

/* Brand button styles (export) */
/* Brand button: Primary Button */
[data-button-style="primary"].button, [data-button-style="primary"], a[data-button-style="primary"], .oc-btn-primary {
  background-color: #662C90 !important;
  color: #FFFFFF !important;
  border-color: #662C90 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 4px !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 14px !important;
  font-weight: bold !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
  cursor: pointer !important;
}
[data-button-style="primary"].button:hover, [data-button-style="primary"]:hover, a[data-button-style="primary"]:hover, .oc-btn-primary:hover, [data-button-style="primary"].button:focus, [data-button-style="primary"]:focus, a[data-button-style="primary"]:focus, .oc-btn-primary:focus {
  background-color: #8B5CF6 !important;
  color: #FFFFFF !important;
  border-color: #8B5CF6 !important;
  border-width: 2px !important;
  border-radius: 4px !important;
  padding: 0.75rem 1.5rem !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px #662C9030 !important;
}

/* Brand button: Secondary Button */
[data-button-style="secondary"].button, [data-button-style="secondary"], a[data-button-style="secondary"], .oc-btn-secondary {
  background-color: transparent !important;
  color: #662C90 !important;
  border-color: #662C90 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 4px !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 14px !important;
  font-weight: bold !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
  cursor: pointer !important;
}
[data-button-style="secondary"].button:hover, [data-button-style="secondary"]:hover, a[data-button-style="secondary"]:hover, .oc-btn-secondary:hover, [data-button-style="secondary"].button:focus, [data-button-style="secondary"]:focus, a[data-button-style="secondary"]:focus, .oc-btn-secondary:focus {
  background-color: #662C90 !important;
  color: #FFFFFF !important;
  border-color: #662C90 !important;
  border-width: 2px !important;
  border-radius: 4px !important;
  padding: 0.75rem 1.5rem !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px #662C9030 !important;
}

/* Brand button: Accent Button */
[data-button-style="accent"].button, [data-button-style="accent"], a[data-button-style="accent"], .oc-btn-accent {
  background-color: #F59E0B !important;
  color: #FFFFFF !important;
  border-color: #F59E0B !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-radius: 4px !important;
  padding: 0.75rem 1.5rem !important;
  font-size: 14px !important;
  font-weight: bold !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
  cursor: pointer !important;
}
[data-button-style="accent"].button:hover, [data-button-style="accent"]:hover, a[data-button-style="accent"]:hover, .oc-btn-accent:hover, [data-button-style="accent"].button:focus, [data-button-style="accent"]:focus, a[data-button-style="accent"]:focus, .oc-btn-accent:focus {
  background-color: #662C90 !important;
  color: #FFFFFF !important;
  border-color: #662C90 !important;
  border-width: 2px !important;
  border-radius: 4px !important;
  padding: 0.75rem 1.5rem !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px #F59E0B30 !important;
}

/* ================================ */
/* Section Separator Styles         */
/* ================================ */

/* Sections that support separators must be positioned */
[data-section-separator="true"] {
  position: relative;
}

/* Separator elements (SVG and IMG) — absolute positioning within their section */
[data-oc-context="separator"] {
  position: absolute;
  z-index: 9999;
  pointer-events: auto;
}

[data-separator-edge="top"] {
  top: 0;
  left: 0;
}

[data-separator-edge="bottom"] {
  bottom: 0;
  left: 0;
}

/* Image-based separators fill their edge */
img[data-oc-context="separator"] {
  width: 100%;
  max-width: 100%;
  object-fit: fill;
}

/* ================================ */
/* Form Base Styles                 */
/* ================================ */

.oc-contact-form {
  padding: 24px;
  max-width: 720px;
  margin: 0 auto;
}

.oc-form-fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.oc-form-field {
  display: flex;
  flex-direction: column;
}

.oc-form-field[data-columns='6'] { grid-column: span 6; }
.oc-form-field[data-columns='4'] { grid-column: span 4; }
.oc-form-field[data-columns='8'] { grid-column: span 8; }
.oc-form-field[data-columns='12'],
.oc-form-field:not([data-columns]) { grid-column: span 12; }

.oc-form-label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #333;
}

.oc-form-label .oc-form-required {
  color: #e53e3e;
  margin-left: 2px;
}

.oc-form-input,
.oc-form-textarea,
.oc-form-select {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #333;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.oc-form-input:focus,
.oc-form-textarea:focus,
.oc-form-select:focus {
  outline: none;
  border-color: #662c90;
  box-shadow: 0 0 0 3px rgba(102, 44, 144, 0.15);
}

.oc-form-textarea {
  min-height: 100px;
  resize: vertical;
}

.oc-form-help {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.oc-form-submit {
  margin-top: 8px;
  padding: 10px 24px;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.oc-form-submit:hover {
  opacity: 0.9;
}

.oc-form-placeholder {
  grid-column: span 12;
  text-align: center;
  padding: 32px 16px;
  color: #9ca3af;
  font-size: 14px;
  border: 2px dashed #e5e7eb;
  border-radius: 8px;
}

.oc-form-message {
  margin-bottom: 16px;
  padding: 16px 20px;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
}

.oc-form-message.oc-form-success {
  display: block;
  color: #059669;
  font-size: 16px;
  font-weight: 500;
}

.oc-form-message.oc-form-error {
  display: block;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.oc-form-submitting .oc-form-submit {
  opacity: 0.6;
  pointer-events: none;
}

@media (max-width: 575px) {
  .oc-form-field[data-columns='6'],
  .oc-form-field[data-columns='4'],
  .oc-form-field[data-columns='8'] {
    grid-column: span 12;
  }
}