/* Shared supporting-page theme. Classic Oakvale green, 24 October 2026. */
:root {
  --ink: #203c2e;
  --dark: #203c2e;
  --cream: #ffffff;
  --sage: #d3dfd3;
  --brown: #203c2e;
  --muted: #5b6e62;
  --rule: rgba(32, 60, 46, .2);
  --sans: Manrope, Arial, Helvetica, sans-serif;
  --display: var(--sans);
}
body { background: #ffffff; font-family:var(--sans); }
h1, h2, h3 { font-weight: 700; }
em { font-style: normal; }
:focus-visible { outline-color: #5c8069; }
.site-header,
.inner-page .site-header,
.apply-header,
.site-footer,
.menu-overlay,
.film-dialog {
  background: #203c2e;
  color: #ffffff;
}
.site-header { border-bottom-color: rgba(255, 255, 255, .2); }
.brand, .apply-brand { background: transparent; }
/* Keep the original logo artwork and its complete-art crop unchanged. */
.desktop-nav, .menu-toggle { font-size: 13px; font-weight: 600; }
.button, .app-button { font-weight: 700; }
.button:hover, .app-button:hover { background: #355844; }
.button-small, .button-cream { background: #ffffff; color: #203c2e; }
.button-small:hover, .button-cream:hover { background: #d3dfd3; color: #203c2e; }
.menu-links a { font-weight: 700; }
/* A compact navigation panel leaves the page visible and usable. */
.menu-overlay {
  inset: 16px 24px auto auto;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  padding: 20px 24px 24px;
  border: 1px solid #ffffff30;
  border-radius: 16px;
  box-shadow: 0 16px 48px #10231935;
  overscroll-behavior: contain;
}
.menu-overlay::before { background-size: 650px; opacity: .16; border-radius: inherit; }
.menu-top .brand { width: 86px; height: 68px; }
.menu-top .brand img { width: 170px; left: -42px; top: -13px; }
.menu-close { min-height: 44px; padding: 8px 12px; gap: 12px; border-radius: 8px; font-size: 12px; }
.menu-links { margin: 16px 0 18px; gap: 0; align-items: stretch; }
.menu-links a { display: flex; align-items: center; min-height: 44px; font-size: 28px; line-height: 1.2; padding-block: 5px; }
.menu-links a:hover { transform: translateX(4px); }
.menu-links a span { width: 28px; flex-shrink: 0; font-size: 9px; }
.menu-end { flex-direction: column; gap: 4px; padding-top: 12px; font-size: 11px; }
.menu-end a { padding-block: 6px; }
.menu-overlay :focus-visible { outline-color: #d3dfd3; outline-offset: 3px; }
@media (max-width: 700px) {
  .menu-overlay { top: 12px; right: 12px; width: min(340px, calc(100vw - 24px)); max-height: calc(100svh - 24px); padding: 16px 20px 20px; }
  .menu-links { margin-block: 12px; }
  .menu-links a { font-size: 26px; }
}
.footer-brand p, .footer-connect p, .footer-base, .preview-caption { color: #d3dfd3; }
/* Keep company socials secondary to the main navigation and Apply action. */
.social-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.social-links a { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; color: inherit; border-radius: 50%; text-decoration: none; }
.social-links a:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.social-icon { display: block; width: 21px; height: 21px; flex-shrink: 0; }
.menu-overlay .social-links a:focus-visible { outline-color: #d3dfd3; }
.apply-page .apply-footer .social-links a:focus-visible { outline-color: currentColor; }
.footer-social { margin-top: 24px; }
.footer-social > p { margin-bottom: 4px; }
.site-footer .social-links a:focus-visible { outline-color: #d3dfd3; }
.menu-social { position: relative; margin-top: 12px; padding-top: 8px; border-top: 1px solid #ffffff30; }
.apply-page .apply-footer { flex-wrap: wrap; }

.guide-launch, .guide-panel { background: #ffffff; border-color: #b6c5b9; }
.guide-message { background: #f2f4f0; }
.guide-head p { color: #5b6e62; }

.inner-page {
  --page-ink: #203c2e;
  --page-cream: #ffffff;
  --page-brown: #203c2e;
  --page-sage: #f2f4f0;
  background: #ffffff;
}
.inner-page h1, .inner-page h2, .inner-page h3,
.inner-page .page-hero h1,
.inner-page .page-section h2,
.inner-page .page-callout h2,
.inner-page .person-entry h2,
.inner-page .portfolio-story h2,
.inner-page .portfolio-principles h3,
.inner-page .press-feature h2,
.inner-page .press-title,
.inner-page .faq-group h2,
.inner-page .contact-info h2,
.inner-page .privacy-article h2 { font-weight: 700; }
.inner-page .soft-word { color: #203c2e; }
.inner-page .page-callout,
.inner-page .faq-empty,
.inner-page .form-status { background: #f2f4f0; }
.inner-page .person-portrait { background: #e5ebe5; }
.inner-page .page-meta,
.inner-page .press-feature figcaption,
.inner-page .press-source time,
.inner-page .press-source small,
.inner-page .press-note,
.inner-page .faq-nav a,
.inner-page .faq-answer .answer-source,
.inner-page .contact-form .form-note { color: #5b6e62; }
.inner-page a:focus-visible,
.inner-page button:focus-visible,
.inner-page summary:focus-visible { outline-color: #5c8069; }

.apply-page {
  --app-ink: #203c2e;
  --app-paper: #ffffff;
  --app-sage: #d3dfd3;
  --app-brown: #203c2e;
  --app-muted: #5b6e62;
  background: #ffffff;
  font-family:var(--sans);
}
.apply-page h1, .apply-page h2, .apply-page h3,
.apply-page .sidebar-human, .apply-page .file-field label {
  font-family:var(--sans);
  font-weight: 700;
}
.apply-page em { color: #203c2e; font-style: normal; }
.apply-page .account-story em { color: #d3dfd3; }
.apply-page .sidebar-human > span { font-family:var(--sans); }
.apply-page .fit-section,
.apply-page .account-form-wrap,
.apply-page .field-note { background: #f2f4f0; }
.apply-page .fit-check input:checked {
  background: #203c2e;
  box-shadow: inset 0 0 0 4px #f2f4f0;
}
.apply-page .field input,
.apply-page .field textarea,
.apply-page .field select,
.apply-page .file-field input[type=file] {
  background: #ffffff;
  border-color: #b6c5b9;
}
.apply-page .field input:focus,
.apply-page .field textarea:focus,
.apply-page .field select:focus {
  background: #ffffff;
  border-color: #203c2e;
  outline-color: #8aa493;
}
.apply-page .field input::placeholder,
.apply-page .field textarea::placeholder { color: #687a6e; }
.apply-page .add-record { border-color: #8aa493; color: #203c2e; }
.apply-page .add-record:hover { background: #f2f4f0; }
.apply-page .file-field input[type=file]::file-selector-button {
  background: #e5ebe5;
  color: #203c2e;
  font-family:var(--sans);
}
.apply-page .file-field video, .apply-page .review-finish { background: #203c2e; }
.apply-page .field-note { border-left-color: #8aa493; color: #4b6253; }
.apply-page .prepare-left p,
.apply-page .fit-section > div > p,
.apply-page .preview-note,
.apply-page .account-disclosure,
.apply-page .workspace-disclosure,
.apply-page .sidebar-label,
.apply-page .draft-tools p,
.apply-page .step-heading p,
.apply-page .field small,
.apply-page .file-field small,
.apply-page .optional,
.apply-page .subheading-copy,
.apply-page .team-age,
.apply-page .section-divider p,
.apply-page .file-field p,
.apply-page .file-field .file-feedback,
.apply-page .review-section dt,
.apply-page .review-section .review-evidence-note { color: #5b6e62; }
.apply-page .review-finish p,
.apply-page .account-story p,
.apply-page .prep-item p { color: #d3dfd3; }
.apply-page .sidebar-human,
.apply-page .review-section header button,
.apply-page .record-heading span,
.apply-page .file-number,
.apply-page .form-controls > span,
.apply-page .apply-footer > span { color: #203c2e; }
.apply-page .check-field input, .apply-page .mobile-progress progress { accent-color: #203c2e; }
.apply-page #step-navigation button[aria-current=step] { color: #203c2e; border-color: #203c2e; }
/* Keep validation, destructive-action and completion-state colors distinct. */
@media (max-width: 700px) {
  .menu-toggle { font-size: 0; }
}

/* A little Oakvale texture and tactile feedback on the supporting pages. */
.inner-page main > .page-hero,
.inner-page main > .collection-intro {
  position: relative;
  isolation: isolate;
}
.inner-page main > .page-hero::after,
.inner-page main > .collection-intro::after {
  content: '';
  position: absolute;
  inset: 20px -32px 12px 42%;
  z-index: -1;
  background: url('/assets/brut-wallpaper.svg') right center / 640px;
  opacity: .1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  mask-image: linear-gradient(90deg, transparent, #000);
  pointer-events: none;
}
.inner-page main .page-link,
.inner-page main .coverage-link {
  transition: color .2s, border-color .2s;
}
.inner-page main .page-link > span,
.inner-page main .coverage-link > span {
  transition: transform .25s ease;
}
.inner-page:not(.collection-page) main .page-link:is(:hover, :focus-visible) {
  gap: 32px;
}
.inner-page main .page-link:is(:hover, :focus-visible),
.inner-page main .coverage-link:is(:hover, :focus-visible) {
  color: #365941;
}
.inner-page main .page-link:is(:hover, :focus-visible) > span,
.inner-page main .coverage-link:is(:hover, :focus-visible) > span {
  transform: translate(3px, -3px);
}
.inner-page main a:focus-visible,
.inner-page main button:focus-visible,
.inner-page main summary:focus-visible {
  outline: 2px solid #5c8069;
  outline-offset: 5px;
}
.inner-page .faq-item summary:is(:hover, :focus-visible),
.inner-page .person-entry summary:is(:hover, :focus-visible) {
  color: #365941;
}
.inner-page:not(.collection-page) .person-portrait {
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px #203c2e14;
}
.inner-page:not(.collection-page) .person-portrait img {
  filter: saturate(.88);
  transition: filter .35s ease, transform .8s cubic-bezier(.2, .7, .3, 1);
}
.inner-page:not(.collection-page) .person-entry:is(:hover, :focus-within) .person-portrait img {
  filter: saturate(1);
}
@media (max-width: 720px) {
  .inner-page main > .page-hero::after,
  .inner-page main > .collection-intro::after {
    inset: 16px -20px 12px 30%;
    background-size: 440px;
    opacity: .07;
  }
}
@media (prefers-reduced-motion: reduce) {
  .inner-page main .page-link > span,
  .inner-page main .coverage-link > span,
  .inner-page:not(.collection-page) .person-portrait img {
    transform: none !important;
    filter: none;
  }
}
.reduce-motion .inner-page main .page-link > span,
.reduce-motion .inner-page main .coverage-link > span,
.reduce-motion .inner-page:not(.collection-page) .person-portrait img {
  transform: none !important;
  filter: none;
  transition: none;
}

/* Match the homepage's compact phone launcher so it covers less page content. */
@media (max-width: 640px) {
  .inner-page .guide-launch {
    width: 46px;
    height: 46px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 0;
    right: 15px;
    bottom: 15px;
  }
}