.skip-to-content {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 100000;
  padding: 12px 24px;
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-bottom-right-radius: 4px;
}
.skip-to-content:focus {
  top: 0;
  outline: 3px solid #4A90D9;
  outline-offset: 2px;
}

:root {
  --brand-primary: #112922;
  --brand-secondary: #FFF8EE;
  --brand-accent: #112922;
  --brand-tertiary: #112922;
  --brand-neutral: #FFF8EE;
  --brand-highlight: #f8c2b9;
  --primary: #112922;
  --secondary: #FFF8EE;
}

body {
  --brand-primary: #112922;
  --brand-secondary: #FFF8EE;
  --brand-accent: #112922;
  --brand-tertiary: #112922;
  --brand-neutral: #FFF8EE;
  --brand-highlight: #f8c2b9;
  --primary: #112922;
  --secondary: #FFF8EE;
}

/* Brand color utility classes (explicit user intent; plain class specificity, no importance escalation) */
.bg-brand-primary { background-color: var(--brand-primary); }
.bg-brand-secondary { background-color: var(--brand-secondary); }
.bg-brand-accent { background-color: var(--brand-accent); }
.bg-brand-tertiary { background-color: var(--brand-tertiary); }
.bg-brand-neutral { background-color: var(--brand-neutral); }
.bg-brand-highlight { background-color: var(--brand-highlight); }

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

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

/* Component defaults at zero specificity: color standard/legacy headers, footers, and
   generic brand buttons that ship without their own styling. Any real rule (block CSS,
   instance CSS, a button-designer rule, panel edit) overrides these. */
:where(.btn-primary, button.primary) {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
}

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

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

:where(.site-footer) {
  background-color: var(--brand-secondary);
}

/* Link defaults. Order matters within this zero-specificity layer: the header/nav white
   default must come after the generic brand link color to win the tie on legacy
   .site-header/.navbar-default markup. */
:where(a) {
  color: var(--brand-primary);
}

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

:where(.site-header a, .navbar-default a) {
  color: white;
}

/* 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); }


/* Canonical design-token aliases (brand palette is the single source of truth) */
:root {
  --oc-color-primary: var(--brand-primary);
  --oc-color-secondary: var(--brand-secondary);
  --oc-color-accent: var(--brand-accent);
  --oc-color-muted: var(--brand-neutral);
  --oc-color-accent-hover: var(--brand-accent);
  --primary: var(--brand-primary);
  --secondary: var(--brand-secondary);
  --highlight: var(--brand-highlight);
}
/* Static platform design constants */
:root {
  --transitionTime: 0.3s;
  --oc-dropdown-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --oc-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --oc-radius-lg: 12px;
}

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

:root {
  --overlay-vertical: rgba(0,0,0,0.4);
  --overlay-vertical-top: rgba(0,0,0,0.1);
  --overlay-horizontal: rgba(0,0,0,0.3);
  --overlay-horizontal-start: transparent;
  --overlay-gradient: none;
}

:root {
  --oc-nav-gap-primary: 30px;
  --oc-nav-gap-secondary: 20px;
  --oc-nav-primary-font-weight: 500;
  --oc-nav-primary-color: var(--brand-primary);
  --oc-nav-primary-hover: var(--brand-secondary);
  --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: var(--brand-primary);
  --oc-nav-primary-dropdown-hover-bg: var(--brand-highlight);
  --oc-nav-secondary-font-weight: 500;
  --oc-nav-secondary-color: var(--brand-primary);
  --oc-nav-secondary-hover: var(--brand-secondary);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

:root {
  --font-primary: "Anton", ui-sans-serif, system-ui, sans-serif;
  --font-secondary: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-accent: "Zalando Sans Expanded", ui-sans-serif, system-ui, sans-serif;
}

/* Namespaced block-token feeding (fabrication contract [DA2 W7]) */
:root {
  --oc-nav-font-family: var(--font-primary);
  --oc-nav-primary-font-family: var(--font-primary);
  --oc-nav-secondary-font-family: var(--font-primary);
  --oc-nav-dropdown-font-family: var(--font-primary);
  --oc-nav-primary-dropdown-font-family: var(--font-primary);

  --oc-nav-font-size: var(--a-fs-base);
  --oc-nav-primary-font-size: var(--a-fs-base);
  --oc-nav-secondary-font-size: var(--a-fs-base);
  --oc-nav-dropdown-font-size: var(--a-fs-base);
  --oc-nav-primary-dropdown-font-size: var(--a-fs-base);

  --oc-footer-01-font: var(--font-secondary);
  --oc-footer-02-font: var(--font-secondary);
  --oc-footer-03-font: var(--font-secondary);
  --oc-footer-04-font: var(--font-secondary);
  --oc-footer-05-font: var(--font-secondary);
  --oc-footer-06-font: var(--font-secondary);
  --oc-footer-07-font: var(--font-secondary);
  --oc-footer-08-font: var(--font-secondary);

  --oc-footer-01-nav-font-size: var(--a-fs-base);
  --oc-footer-02-nav-font-size: var(--a-fs-base);
  --oc-footer-03-nav-font-size: var(--a-fs-base);
  --oc-footer-04-nav-font-size: var(--a-fs-base);
  --oc-footer-05-nav-font-size: var(--a-fs-base);
  --oc-footer-06-nav-font-size: var(--a-fs-base);
  --oc-footer-07-nav-font-size: var(--a-fs-base);
  --oc-footer-08-nav-font-size: var(--a-fs-base);
}

/* Brand font-family defaults (zero specificity; [data-font-family] opts out) */
:where(body:not([data-font-family])) {
  font-family: var(--font-secondary);
}

:where(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]), .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);
}

/* Form controls don't inherit font by default */
:where(input:not([data-font-family]), textarea:not([data-font-family]), select:not([data-font-family]), button:not([data-font-family])) {
  font-family: var(--font-secondary);
}

/* Accent-slot vocabulary */
:where(.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]), .quote:not([data-font-family]), blockquote:not([data-font-family]), .testimonial:not([data-font-family]), .brand-text:not([data-font-family]), .logo-text:not([data-font-family])) {
  font-family: var(--font-accent);
}

/* Navigation font-family — consumes persisted --oc-nav-*-font-family vars.
   After the generic rules so it wins the zero-specificity tie. */
:where(nav[data-oc-nav="true"] a, nav[data-oc-nav="true"] .nav-link) {
  font-family: var(--oc-nav-font-family, var(--font-primary));
}
:where(nav[data-oc-nav="true"][data-navigation-tree*="primary" i] a, nav[data-oc-nav="true"][data-oc-nav-id*="primary" i] a) {
  font-family: var(--oc-nav-primary-font-family, var(--font-primary));
}
:where(nav[data-oc-nav="true"][data-navigation-tree*="secondary" i] a, nav[data-oc-nav="true"][data-oc-nav-id*="secondary" i] a) {
  font-family: var(--oc-nav-secondary-font-family, var(--font-primary));
}
:where(nav[data-oc-nav="true"] .dropdown-menu a, nav[data-oc-nav="true"] .mega-dropdown a) {
  font-family: var(--oc-nav-dropdown-font-family, var(--font-primary));
}

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

:root {
  /* Font-size scale (CMS pixel values → vw/rem → responsive clamp()).      */
  /* Shared with the editor canvas via buildFontSizeScaleVars so preview     */
  /* and publish cannot drift.                                               */
  --body-fs-cms: 18;
  --h1-fs-cms: 60;
  --h2-fs-cms: 44;
  --h3-fs-cms: 36;
  --btn-fs-cms: 16;
  --a-fs-cms: 16;

  --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);

  --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);

  --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 (zero        */
/* specificity — any real rule wins)*/
/* ================================ */

* {
  box-sizing: border-box;
}

:where(body) {
  font-size: var(--body-fs-base);
  line-height: 1.5;
  margin: 0;
}

:where(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;
}

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

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

/* ================================ */
/* Base typography — global sizes   */
/* from the styles panel, at zero   */
/* specificity. [data-font-size]    */
/* opts an element out (fabrication */
/* contract).                       */
/* ================================ */

:where(p:not([data-font-size]), .oc-p:not([data-font-size])) {
  font-size: var(--body-fs-base);
  line-height: 1.5;
}

:where(h1:not([data-font-size]), .h1:not([data-font-size]), .oc-h1:not([data-font-size])) {
  font-size: var(--h1-fs-base);
  text-wrap: balance;
  line-height: 1.1;
}

:where(h2:not([data-font-size]), .h2:not([data-font-size]), .oc-h2:not([data-font-size])) {
  font-size: var(--h2-fs-base);
  text-wrap: balance;
  line-height: 1.2;
}

:where(h3:not([data-font-size]), .h3:not([data-font-size]), .oc-h3:not([data-font-size])) {
  font-size: var(--h3-fs-base);
  line-height: 1.2;
}

:where(h4, h5, h6) {
  font-size: calc(var(--body-fs-base) * 1.2);
}

:where(button:not([data-font-size]), .btn:not([data-font-size]), .button:not([data-font-size]), .oc-btn:not([data-font-size])) {
  font-size: var(--btn-fs-base);
}

:where(a:not([data-font-size]), .oc-a:not([data-font-size])) {
  font-size: var(--a-fs-base);
  text-underline-offset: .125rem;
  transition: all ease-out var(--initial-duration);
}

/* Navigation font-size — consumes persisted --oc-nav-*-font-size vars.
   After the generic link rule so it wins the zero-specificity tie. */
:where(nav[data-oc-nav="true"] a, nav[data-oc-nav="true"] .nav-link) {
  font-size: var(--oc-nav-font-size, var(--a-fs-base));
}
:where(nav[data-oc-nav="true"][data-navigation-tree*="primary" i] a, nav[data-oc-nav="true"][data-oc-nav-id*="primary" i] a) {
  font-size: var(--oc-nav-primary-font-size, var(--a-fs-base));
}
:where(nav[data-oc-nav="true"][data-navigation-tree*="secondary" i] a, nav[data-oc-nav="true"][data-oc-nav-id*="secondary" i] a) {
  font-size: var(--oc-nav-secondary-font-size, var(--a-fs-base));
}
:where(nav[data-oc-nav="true"] .dropdown-menu a, nav[data-oc-nav="true"] .mega-dropdown a) {
  font-size: var(--oc-nav-dropdown-font-size, var(--a-fs-base));
}

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

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

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

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

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

  :where(a, .oc-a) {
    transition: none;
  }
}

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

[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: #FFF8EE;
  color: #FFFFFF;
  border-color: #FFF8EE;
  border-width: 2px;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #11292230;
}

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

[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: #112922;
  color: #FFFFFF;
  border-color: #112922;
  border-width: 2px;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #11292230;
}

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

[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: #112922;
  color: #FFFFFF;
  border-color: #112922;
  border-width: 2px;
  border-radius: 4px;
  padding: 0.75rem 1.5rem;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #11292230;
}

/* ================================ */
/* 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;
}

/* ================================ */
/* Border & Corner Styles           */
/* ================================ */

/* Corner roundness — per-corner vars written by the Shape & Border context
   menu. overflow:hidden clips children/overlays to rounded corners; hosts with
   image overlays rely on block CSS stacking and must keep position:relative
   from the block stylesheet (we never inline position/overflow from applyState). */
[data-oc-radius="true"] {
  border-radius: var(--oc-radius-tl, 0px) var(--oc-radius-tr, 0px) var(--oc-radius-br, 0px) var(--oc-radius-bl, 0px);
  overflow: hidden;
}

/* Solid border — a normal CSS border on the host element */
[data-oc-border="solid"] {
  border: var(--oc-border-width, 1px) var(--oc-border-style, solid) var(--oc-border-color, currentColor);
}

/* Gradient border — the host anchors an inert ring child */
[data-oc-border="gradient"] {
  position: relative;
}

/* Ring child: the gradient painted only in the border band via the
   mask-composite ring recipe. Follows the host's radius, never touches the
   host's own (often multi-layer) background. */
[data-oc-border-ring="true"] {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--oc-border-width, 1px);
  background: var(--oc-border-gradient, none);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 10; /* above .cta-overlay (z-index 9) */
}

/* ================================ */
/* 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;
  }
}

/* ================================ */
/* Secure Form Embed (FormCommander)  */
/* ================================ */

.fc-secure-form-embed {
  position: relative;
  min-height: 120px;
  width: 100%;
}
.fc-secure-form-embed.fc-secure-form-embed--loading::after {
  content: 'Loading form…';
  display: block;
  padding: 1.5rem;
  text-align: center;
  color: #64748b;
  font-size: 0.875rem;
}
.fc-secure-form-embed.fc-secure-form-embed--error {
  border: 1px solid #fecaca;
  background: #fef2f2;
  border-radius: 8px;
  padding: 1rem;
}
.fc-secure-form-embed .fc-embed-error {
  color: #b91c1c;
  font-size: 0.875rem;
  margin: 0;
}
.fc-secure-form-embed .fc-embed-live {
  min-height: 1px;
}
.fc-secure-form-embed [aria-live="polite"] {
  margin-top: 0.75rem;
}
.fc-embed-placeholder {
  padding: 1.5rem;
  text-align: center;
  color: #64748b;
  font-size: 0.875rem;
  margin: 0;
}

/* =====================================================================
   ERIC ISHAM — Clone alignment (cucommander) → Squarespace source
   CSS only. No 3rd-party libraries. Pair with eric-isham-inview.js
   ---------------------------------------------------------------------
   Sections in the clone:
     .eric-isham-hero / -intro / -podcast / -businesses
     / -giving-back / -social-feeds
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. KEYFRAMES  (inlined animate.css equivalents + the source's custom one)
   --------------------------------------------------------------------- */
@keyframes ocFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ocFadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes ocFadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes ocFadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes ocZoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}
/* Source's bespoke logo reveal */
@keyframes ocCustomFadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0) scaleX(-0.2) perspective(60em) rotateX(-40deg);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(1) perspective(60em) rotateX(0);
  }
}

/* ---------------------------------------------------------------------
   2. HERO — load animations (fire on page load, no JS needed)
   Source: heroDisplay p1 fadeInRight .6s, p2 fadeInLeft 1s,
           image zoomIn 2s, button fadeInUp 1.5s
   --------------------------------------------------------------------- */
.eric-isham-hero {
  overflow: hidden;
} /* contain the horizontal slides */

.eric-isham-hero .hero-line,
.eric-isham-hero .hero-image,
.eric-isham-hero .hero-button {
  animation-duration: 1s;
  animation-fill-mode: both; /* hold the "from" (opacity:0) state before the delay */
}

.eric-isham-hero .hero-text-container .hero-line:nth-child(1) {
  animation-name: ocFadeInRight;
  animation-delay: 0.6s;
}
.eric-isham-hero .hero-text-container .hero-line:nth-child(2) {
  animation-name: ocFadeInLeft;
  animation-delay: 1s;
}
.eric-isham-hero .hero-image {
  animation-name: ocZoomIn;
  animation-duration: 2s; /* image gets the longer zoom */
  animation-delay: 0s;
}
.eric-isham-hero .hero-button {
  animation-name: ocFadeInUp;
  animation-delay: 1.5s;
}

/* ---------------------------------------------------------------------
   3. SCROLL REVEAL — driven by .in-view (added by eric-isham-inview.js)
   The hidden initial state is gated behind html.oc-anim-ready so that
   if JS is disabled / fails, all content stays visible (no blank page).
   --------------------------------------------------------------------- */

/* 3a. INTRO  → fadeInUp (source: homeIntroText .oc-reveal .sqs-layout) */
html.oc-anim-ready .eric-isham-intro .intro-inner {
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.eric-isham-intro.in-view .intro-inner {
  opacity: 1;
  animation-name: ocFadeInUp;
}

/* 3b. PODCAST → fadeIn, delay .3s (source: sectionPodcast .container) */
html.oc-anim-ready .eric-isham-podcast .podcast-inner {
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.eric-isham-podcast.in-view .podcast-inner {
  opacity: 1;
  animation-name: ocFadeIn;
  animation-delay: 0.3s;
}

/* 3c. BUSINESSES → logos customFadeInUp .5s + text fadeInRight .8s
       (source: this section RE-RUNS every time it re-enters the viewport) */
html.oc-anim-ready .eric-isham-businesses .businesses-logos .business-logo,
html.oc-anim-ready .eric-isham-businesses .businesses-text {
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.eric-isham-businesses.in-view .businesses-logos .business-logo {
  opacity: 1;
  animation-name: ocCustomFadeInUp;
  animation-delay: 0.5s;
}
.eric-isham-businesses.in-view .businesses-text {
  opacity: 1;
  animation-name: ocFadeInRight;
  animation-delay: 0.8s;
}

/* 3d. GIVING BACK → columns fadeInUp (text .3s, image .6s)
       (source: sectionTwoColumn) */
html.oc-anim-ready .eric-isham-giving-back .giving-back-text,
html.oc-anim-ready .eric-isham-giving-back .giving-back-image {
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.eric-isham-giving-back.in-view .giving-back-text {
  opacity: 1;
  animation-name: ocFadeInUp;
  animation-delay: 0.3s;
}
.eric-isham-giving-back.in-view .giving-back-image {
  opacity: 1;
  animation-name: ocFadeInUp;
  animation-delay: 0.6s;
}

/* 3e. SOCIAL FEEDS → fadeIn, delay .5s (source: sectionSocialFeeds .inside) */
html.oc-anim-ready .eric-isham-social-feeds .social-inside {
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.eric-isham-social-feeds.in-view .social-inside {
  opacity: 1;
  animation-name: ocFadeIn;
  animation-delay: 0.5s;
}

/* Contain horizontal travel of the fadeInRight reveal.
   IMPORTANT: use `clip`, NOT `hidden`. `overflow-x: hidden` forces
   overflow-y to compute to `auto`, turning <body> into a scroll container,
   which breaks `position: sticky` on the header (see section 8). `clip`
   clips horizontally without creating a scroll container. */
body {
  overflow-x: clip;
}

/* ---------------------------------------------------------------------
   4. VISUAL ALIGNMENT — typography to match the source exactly
   --------------------------------------------------------------------- */

/* 4a. Section headings — Anton, responsive clamp identical to source .h2_style.
       Clone was capped at 44–60px; source renders up to 90px on desktop. */
.eric-isham-intro h2,
.eric-isham-businesses h2,
.eric-isham-giving-back h2,
.eric-isham-social-feeds h2 {
  font-family: "Anton", sans-serif;
  font-size: clamp(35px, 10vw, 60px) !important;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
}
@media screen and (min-width: 1551px) {
  .eric-isham-intro h2,
  .eric-isham-businesses h2,
  .eric-isham-giving-back h2,
  .eric-isham-social-feeds h2 {
    font-size: clamp(40px, 20vw, 90px) !important;
  }
}
@media screen and (max-width: 768px) {
  .eric-isham-intro h2,
  .eric-isham-businesses h2,
  .eric-isham-giving-back h2,
  .eric-isham-social-feeds h2 {
    font-size: clamp(35px, 15vw, 55px) !important;
  }
}
@media screen and (max-width: 480px) {
  .eric-isham-intro h2,
  .eric-isham-businesses h2,
  .eric-isham-giving-back h2,
  .eric-isham-social-feeds h2 {
    font-size: 10vw !important;
  }
}

/* 4b. Social feeds sub-heading — source is 18px, clone was 36px */
.eric-isham-social-feeds h3 {
  font-family: "Zalando Sans Expanded", sans-serif;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* 4c. Eyebrows — source weight 200 / 18px / .3em tracking */
.eric-isham .ei-eyebrow {
  font-family: "Zalando Sans Expanded", sans-serif;
  font-size: 18px;
  font-weight: 200;
  letter-spacing: 0.3em;
}

/* 4d. Body copy — source paragraphs are light (300) with .03em tracking */
.eric-isham-intro .intro-inner > p:not(.ei-eyebrow),
.eric-isham-businesses .businesses-text p:not(.ei-eyebrow),
.eric-isham-giving-back .giving-back-text p:not(.ei-eyebrow) {
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.8;
}

/* =====================================================================
   6. ABOUT PAGE  (internal page: /about-eric)
   Source behaviour: NO scroll reveals on internal pages — only the page
   title <h1> does a fadeInLeft entrance on load. Everything else is just
   typography alignment. Internal headings are 60px/500/.05em (NOT the
   homepage's 90px/400) so these selectors are scoped to about-* sections.
   --------------------------------------------------------------------- */

/* 6a. Page title — Anton outline, 10vw like source, fadeInLeft on load.
       (.ei-outline-text already supplies the -webkit-text-stroke outline) */
.eric-isham-about-intro h1.page-title {
  font-family: "Anton", sans-serif;
  font-size: clamp(40px, 10vw, 350px) !important;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
  animation: ocFadeInLeft 1s both;
}

/* 6b. All About headings — source internal .h2 = Anton 60px / 500 / .05em */
.eric-isham-about-row h2,
.eric-isham-conversations h2 {
  font-family: "Anton", sans-serif;
  font-size: clamp(30px, 5vw, 60px) !important;
  font-weight: 500 !important;
  line-height: 1.3;
  letter-spacing: 0.05em !important;
}

/* 6c. About body copy — light 300, matches source */
.eric-isham-about-row .about-text p,
.eric-isham-conversations .conversations-inner p {
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.7;
}

/* ---------------------------------------------------------------------
   7. ACCESSIBILITY — respect reduced-motion: show everything, no motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .eric-isham-hero .hero-line,
  .eric-isham-hero .hero-image,
  .eric-isham-hero .hero-button,
  .eric-isham-about-intro h1.page-title,
  html.oc-anim-ready .eric-isham-intro .intro-inner,
  html.oc-anim-ready .eric-isham-podcast .podcast-inner,
  html.oc-anim-ready .eric-isham-businesses .businesses-logos .business-logo,
  html.oc-anim-ready .eric-isham-businesses .businesses-text,
  html.oc-anim-ready .eric-isham-giving-back .giving-back-text,
  html.oc-anim-ready .eric-isham-giving-back .giving-back-image,
  html.oc-anim-ready .eric-isham-social-feeds .social-inside {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

/* =====================================================================
   8 + 9. HEADER and FOOTER MENU — now baked into the fabricated blocks
   ---------------------------------------------------------------------
   These rules were REMOVED from this global sheet because the blocks now
   own them, and keeping them here would duplicate and fight the block CSS
   (the old global used `!important` + `html.oc-header-scrolled`; the block
   uses `.is-stuck` on the header element).

     • Sticky + transparent header, the on-scroll black `::before` fade, and
       the logo/padding shrink now live in the Eric Isham HEADER block
       (eric-isham-header.css + eric-isham-header-scroll.ts, which toggles
       `.is-stuck` on the header once scrolled past 60px).
     • The "Eric Isham" footer quick-links menu lives in the Eric Isham
       FOOTER block (markup + styles bundled there).

   Once the updated blocks are deployed and re-added as your global header/
   footer in the builder, you need NOTHING here for them.

   NOTE — the block header puts the bar in normal flow (transparent, sharing
   the same fixed page gradient as the hero) rather than overlapping the hero
   with a negative margin. If you specifically want the hero's portrait/letters
   to run up *behind* the header, that overlay is the one piece not in the
   block; ask and I'll add it back as a small standalone rule.

   Still required from this sheet: §1–§7 (animations, typography, About,
   reduced-motion), the `body { overflow-x: clip }` fix above (so the block's
   sticky header can pin), and §10 below (the real connected contact form).
   --------------------------------------------------------------------- */

/* =====================================================================
   10. CONNECTED CONTACT FORM — match the existing (dummy) footer form
   ---------------------------------------------------------------------
   The new connected form `.oc-contact-form` ships with the form widget's
   default light styling (white inputs, gray borders). These rules restyle
   it to match the site's dummy `.footer-form`: dark translucent inputs,
   white Poppins text, 5px radius, and the brand green-ring pill submit.
   !important is required because the form widget injects a section-scoped
   rule of equal specificity that otherwise wins on source order.
   --------------------------------------------------------------------- */
.oc-contact-form .oc-form-fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.oc-contact-form .oc-form-field[data-columns="6"] {
  grid-column: span 6;
}
.oc-contact-form .oc-form-field[data-columns="12"] {
  grid-column: span 12;
}
.oc-contact-form .oc-form-field {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.oc-contact-form .oc-form-label {
  display: block;
  color: var(--eric-isham-text, #fff) !important;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}
.oc-contact-form .oc-form-required {
  opacity: 0.6;
}

.oc-contact-form .oc-form-input,
.oc-contact-form .oc-form-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--eric-isham-text, #fff) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 5px !important;
  padding: 18px 20px !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  transition:
    border-color 0.3s,
    background 0.3s;
}
.oc-contact-form .oc-form-textarea {
  min-height: 110px !important;
  resize: vertical;
}

.oc-contact-form .oc-form-input::placeholder,
.oc-contact-form .oc-form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.oc-contact-form .oc-form-input:focus,
.oc-contact-form .oc-form-textarea:focus {
  outline: none;
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.oc-contact-form .oc-form-field-error {
  color: #ff6b6b;
  font-size: 13px;
  margin: 6px 0 0;
}
.oc-contact-form .oc-form-message {
  color: var(--eric-isham-text, #fff);
  margin-top: 12px;
}

/* Submit — replicates the dummy `.ei-btn-outline`: transparent pill with a
   bright-green (#0f9960) ring and a dark-green (#04603a) hover-fill wipe. */
.oc-contact-form .oc-form-submit {
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-top: 22px;
  display: inline-block;
  cursor: pointer;
  background: transparent !important;
  color: var(--eric-isham-text, #fff) !important;
  border: 2px solid #0f9960 !important;
  border-radius: 500px !important;
  padding: 17px 40px 15px !important;
  font-family: "Zalando Sans Expanded", sans-serif !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  transition: color 0.3s;
}
.oc-contact-form .oc-form-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #04603a;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}
.oc-contact-form .oc-form-submit:hover::before {
  transform: scaleX(1);
}

/* Optional: if you prefer the dummy's placeholder-only look (no visible
   labels), uncomment the next rule.
.oc-contact-form .oc-form-label { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
*/

/* Stack the Name/Email columns on narrow screens */
@media screen and (max-width: 768px) {
  .oc-contact-form .oc-form-field[data-columns="6"] {
    grid-column: span 12;
  }
}

.custom-header .coreTemplate.eric-isham.eric-isham-header {
  --eric-isham-page-gradient: none;
  --eric-isham-bg: transparent;
}
.custom-header.oc-section:has(.eric-isham-header) {
  margin-bottom: -200px;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.eric-isham-hero {
  padding-top: 200px;
}

.coreTemplate.eric-isham.eric-isham-about-row.eric-isham-about-intro {
  padding-top: 290px;
}

.footer-nav--link {
  display: block;
}

/* 1. Quick-links: expanded font + vertical stack ---------------------- */
.eric-isham-footer .footer-nav--link {
  font-family: "Zalando Sans Expanded", sans-serif !important;
  display: block !important;
  width: fit-content;
  margin-bottom: 14px;
}

/* 2. Hide the form labels (source has none) -------------------------- */
.eric-isham-footer .oc-form-label {
  display: none !important;
}

/* 3. Tighter input padding to match source --------------------------- */
.eric-isham-footer .oc-form-input,
.eric-isham-footer .oc-form-textarea {
  padding: 10px !important;
}

/* 4. Placeholders: uppercase, spaced, brighter ----------------------- */
.eric-isham-footer .oc-form-input::placeholder,
.eric-isham-footer .oc-form-textarea::placeholder {
  text-transform: uppercase;
  letter-spacing: 3.2px;
  color: rgba(255, 255, 255, 0.75);
}

#oc1Mark-2-2 {
  stroke: white;
  fill: white;
}

form.oc-contact-form {
  max-width: revert;
  flex-basis: 100%;
}

body .eric-isham-businesses .businesses-inner {
  max-width: 1700px;
}