@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/cinzel-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/public-sans-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inria Serif';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/inria-serif-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Inria Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inria-serif-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Inria Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inria-serif-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Inria Serif';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/inria-serif-300-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inria Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inria-serif-400-italic.woff2') format('woff2');
}


:root {
  
  --ivory:        #F0EFEC;
  --ivory-card:   #E3E3E1;
  --ivory-panel:  #F8F8F6;
  --icon-circle:  #DEDAD4;
  --navy:         #16263B;
  --navy-soft:    #324053;
  --ink:          #050E1B;

  
  --text-body:           #465262;
  --text-on-dark:        #F0EFEC;
  --text-on-dark-muted:  #A4A9AE;
  
  --organ-blue:          #6484A7;
  --organ-blue-light:    #7490B0;
  --organ-blue-text:     #48617D;
  
  --walnut:              #70573D;
  --walnut-hover:        #5F4A34;
  --border:              #CAC1B8;
  --border-input:        #9D8C7A;
  --disabled-bg:         #BFB5AA;
  --disabled-text:       #4B3D31;
  --disabled-bg-on-dark:   #142235;
  --disabled-text-on-dark: #E5E5E3;
  
  --error:               #8A2E2E;
  --placeholder:         #626C79;

  
  --font-display: 'Cinzel', serif;
  --font-serif:   'Inria Serif', Georgia, serif;
  --font-sans:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 88px;
  --container-max: 1180px;
  --container-narrow: 820px;
  --container-pad: 24px;
  --section-y: clamp(56px, 7vw, 96px);
  --card-pad: clamp(28px, 3.2vw, 36px);
  --gap-cards: clamp(20px, 2.4vw, 28px);
  --gap-columns: clamp(28px, 4vw, 56px);
  --gap-form: 16px;
  --icon-circle-size: 64px;

  
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-round: 999px;

  
  --shadow-card: 0 2px 10px rgba(30, 43, 69, 0.08);
  --shadow-panel: 0 16px 40px rgba(20, 28, 42, 0.22);
  --shadow-button: 0 1px 3px rgba(30, 43, 69, 0.12);
}


* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--navy);
  text-underline-offset: 3px;
  transition: color 160ms ease;
}
a:hover { color: var(--organ-blue-text); }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

[data-band] :focus-visible,
.hero-text :focus-visible,
.final-cta :focus-visible,
.solution-block :focus-visible {
  outline-color: var(--ivory);
}

::placeholder { color: var(--placeholder); opacity: 1; }


.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.container-narrow { max-width: var(--container-narrow); }


.eyebrow {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--walnut);
}
.eyebrow-on-dark { color: var(--text-on-dark); }


.eyebrow--ruled {
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow--ruled::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--walnut);
}


.eyebrow--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.eyebrow--centered::before,
.eyebrow--centered::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--walnut);
}

.section-h2 {
  margin: 0 0 34px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--navy);
}
.h2-accent { color: var(--walnut); }
.section-h2-on-dark { color: var(--ivory); }
.section-h2-on-dark .h2-accent { color: var(--organ-blue-light); }


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}


.btn-primary {
  background: var(--organ-blue);
  color: var(--ivory);
  box-shadow: var(--shadow-button);
}

.btn-primary:hover { background: var(--organ-blue-light); }


.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}
.btn-ghost:hover { background: var(--ivory-card); }


.btn-ghost-on-dark {
  background: transparent;
  color: var(--text-on-dark);
  border: 1px solid var(--organ-blue);
}
.btn-ghost-on-dark:hover {
  background: var(--organ-blue);
  color: var(--ink);
}


.btn-primary-on-dark {
  background: var(--organ-blue);
  color: var(--ink);
  border: none;
  box-shadow: var(--shadow-button);
}
.btn-primary-on-dark:hover { background: var(--organ-blue-light); }


.btn-walnut {
  background: var(--walnut);
  color: #FFFFFF;
  border: none;
  box-shadow: var(--shadow-button);
}
.btn-walnut:hover { background: var(--walnut-hover); }

.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
  box-shadow: none;
}
.btn-primary-on-dark[disabled] {
  background: var(--disabled-bg-on-dark);
  color: var(--disabled-text-on-dark);
}
.btn-walnut[disabled] {
  background: var(--disabled-bg-on-dark);
  color: var(--disabled-text-on-dark);
}
.btn-ghost[disabled],
.btn-ghost-on-dark[disabled] {
  background: transparent;
  border-color: var(--border);
  color: var(--disabled-text);
}


.site-header {
  background: var(--ivory);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  
  align-items: center;
  padding: 22px var(--container-pad) 18px;
}
.logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.logo { height: 42px; width: auto; }


.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-left: auto;
}
.site-nav-link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
}
.site-nav-link:hover { color: var(--organ-blue-text); }


.nav-toggle {
  display: none;
  position: relative;
  margin-left: auto;
}
.nav-toggle-button {
  list-style: none;
}
.nav-toggle-button::-webkit-details-marker { display: none; }
.nav-toggle-button::marker { display: none; content: ""; }

@media (max-width: 729px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  
  .nav-toggle-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    cursor: pointer;
  }
  .nav-toggle-button:hover,
  .nav-toggle[open] .nav-toggle-button { background: var(--ivory-card); }
  .nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 200px;
    background: var(--ivory-panel);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
    padding: 8px;
  }
  .nav-dropdown .site-nav-link {
    padding: 14px 12px;
    border-radius: var(--radius-sm);
  }
  .nav-dropdown .site-nav-link:hover { background: var(--ivory-card); }
}
.header-label {
  font-family: var(--font-display);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-body);
  text-align: left;
  border-left: 1px solid var(--border);
  padding-left: 20px;
}


.site-footer {
  background: var(--ivory);
  border-top: 1px solid var(--border);
  padding: 34px 0;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  align-items: center;
}
.logo-footer { height: 28px; width: auto; }

.footer-divider {
  display: block;
  width: 1px;
  align-self: stretch;
  background: var(--border);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.footer-link {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--navy);
  text-decoration: underline;
}
.footer-link:hover { color: var(--organ-blue-text); }

.footer-meta {
  margin-left: auto;
  text-align: right;
}
.footer-tagline {
  margin: 0;
  font-size: 15px;
  color: var(--text-body);
}
.footer-copyright {
  margin: 0;
  font-size: 15px;
  color: var(--text-body);
}

@media (max-width: 729px) {
  
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-divider { display: none; }
  .footer-meta {
    margin-left: 0;
    text-align: center;
  }
}


.signup-form,
.generic-form {
  display: grid;
  gap: var(--gap-form);
  max-width: 560px;
}

.form-fields {
  display: grid;
  gap: var(--gap-form);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.field {
  display: grid;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
  min-width: 0;
}
.field-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--navy);
}
.field-label-on-dark { color: var(--ivory); }


.field-input-wrap { position: relative; }
.field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-body);
  pointer-events: none;
}

.signup-form input[type="email"],
.signup-form input[type="text"],
.generic-form input[type="email"] {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 0 16px 0 44px;
  font-family: var(--font-sans);
  font-size: 19px;
  color: var(--navy);
  background: #FFFFFF;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}


.checkbox-field {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy);
  cursor: pointer;
}
.checkbox-input {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin: 3px 0 0;
  background: #FFFFFF;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background 160ms ease, border-color 160ms ease;
}
.checkbox-input::before {
  content: "";
  width: 12px;
  height: 12px;
  background: transparent;
  transition: background 160ms ease;
}
.checkbox-input:checked {
  background: var(--navy);
  border-color: var(--navy);
}
.checkbox-input:checked::before {
  background: var(--ivory);
  clip-path: polygon(14% 52%, 0 66%, 40% 100%, 100% 24%, 86% 12%, 38% 78%);
}
.checkbox-text { min-width: 0; }
.checkbox-text-on-dark { color: var(--text-on-dark-muted); }
.link-on-dark { color: var(--organ-blue-light); }
.link-on-dark:hover { color: var(--ivory); }


[data-band] .checkbox-input,
.final-cta .checkbox-input {
  background: transparent;
  border-color: var(--organ-blue-light);
}
[data-band] .checkbox-input:checked,
.final-cta .checkbox-input:checked {
  background: var(--organ-blue-light);
  border-color: var(--organ-blue-light);
}
[data-band] .checkbox-input:checked::before,
.final-cta .checkbox-input:checked::before {
  background: var(--navy);
}


.form-submit {
  justify-self: normal;
  max-width: 100%;
}
.form-submit--center { justify-self: center; }

.form-note {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
}
.form-note-on-dark { color: var(--text-on-dark-muted); }


.form-status {
  font-size: 16px;
  line-height: 1.5;
  color: var(--error);
  white-space: pre-line;
}
.form-status:empty { display: none; }
.form-status-on-dark { color: #F0B8B8; }


.form-success {
  margin: 0;
  padding: 22px 24px;
  background: var(--ivory-card);
  border-left: 4px solid var(--walnut);
  border-radius: var(--radius-md);
}
.form-success-on-dark {
  
  background: rgba(116, 144, 176, 0.12);
  border-left-color: var(--organ-blue-light);
  color: var(--ivory);
}
.form-success-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.3;
  text-transform: uppercase;
}
.form-success-text {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
}


.signup-form.is-submitted > .form-fields,
.signup-form.is-submitted > .checkbox-field,
.signup-form.is-submitted > .form-submit,
.signup-form.is-submitted > .form-note {
  display: none;
}
.signup-form.is-submitted > .form-success {
  display: block;
}