/* icarus-theme.css — generated from the Vention stylesheet.
   Load AFTER the original: same specificity, later wins. */

/* ---------- tokens (the one :root; values in design.md) ---------- */
:root {
  --color-navy: #021329;
  --color-navy-mid: #02294B;
  --color-blue-grey: #A8BED6;
  --color-ice: #E6EDF6;
  --color-ice-dark: #DDE6F1;
  --color-navy-deep: #010E1F;
  --color-brand: #FAD954;
  --color-brand-light: #FFE88C;
  --color-brand-ink: #3A2A00;
  --color-accent-blue: #53ABFC;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --brand-wordmark: "econblades";
  --display-font: 'Tomorrow', ui-sans-serif, system-ui, sans-serif;
  --paragraph-font: 'Lexend', ui-sans-serif, system-ui, sans-serif;
}

body{--tw-bg-opacity:1;background-color:var(--color-ice)}
body:is(.dark *){--tw-bg-opacity:1;background-color:var(--color-navy)}
.char-grid{--tw-text-opacity:1;color:var(--color-blue-grey)}
.char-grid:is(.dark *){--tw-text-opacity:1;color:var(--color-navy-mid)}
.char-grid:hover{--tw-bg-opacity:1;background-color:var(--color-blue-grey)}
.char-grid:is(.dark *):hover{--tw-bg-opacity:1;background-color:var(--color-navy-mid)}
.char-grid{border-bottom-width:1px;border-right-width:1px;--tw-border-opacity:1;border-color:var(--color-blue-grey)}
.char-grid:is(.dark *){--tw-border-opacity:1;border-color:var(--color-navy-mid)}
.text-input{--tw-bg-opacity:1;background-color:var(--color-ice);--tw-text-opacity:1;color:var(--color-black)}
.text-input:is(.dark *){--tw-bg-opacity:1;background-color:var(--color-navy);--tw-text-opacity:1;color:var(--color-white)}
.text-input ::-moz-selection{--tw-bg-opacity:1;background-color:var(--color-ice);--tw-text-opacity:1;color:var(--color-black)}
.text-input ::selection{--tw-bg-opacity:1;background-color:var(--color-ice);--tw-text-opacity:1;color:var(--color-black)}
.text-input::-moz-selection{--tw-bg-opacity:1;background-color:var(--color-ice);--tw-text-opacity:1;color:var(--color-black)}
.text-input::selection{--tw-bg-opacity:1;background-color:var(--color-ice);--tw-text-opacity:1;color:var(--color-black)}
.text-input-inverse{--tw-bg-opacity:1;background-color:var(--color-navy);--tw-text-opacity:1;color:var(--color-white)}
.text-input-inverse:is(.dark *){--tw-bg-opacity:1;background-color:var(--color-ice);--tw-text-opacity:1;color:var(--color-black)}
.text-input-inverse ::-moz-selection{--tw-bg-opacity:1;background-color:var(--color-navy);--tw-text-opacity:1;color:var(--color-white)}
.text-input-inverse ::selection{--tw-bg-opacity:1;background-color:var(--color-navy);--tw-text-opacity:1;color:var(--color-white)}
.text-input-inverse::-moz-selection{--tw-bg-opacity:1;background-color:var(--color-navy);--tw-text-opacity:1;color:var(--color-white)}
.text-input-inverse::selection{--tw-bg-opacity:1;background-color:var(--color-navy);--tw-text-opacity:1;color:var(--color-white)}
.header{border-bottom-width:1px;--tw-border-opacity:1;border-color:var(--color-blue-grey)}
.header:is(.dark *){--tw-border-opacity:1;border-color:var(--color-navy-mid)}
.divide-vention-shades-gray>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:var(--color-blue-grey)}
/* The mirror ships no blue -secondary tint, so blue pages fell back to navy text on dark.
   Blue pages take their hero colour instead. */
.dark\:text-vention-blue-secondary:is(.dark *){--tw-text-opacity:1;color:var(--color-accent-blue)}
.bg-vention-orange{--tw-bg-opacity:1;background-color:var(--color-brand)}
.bg-vention-orange-dark{--tw-bg-opacity:1;background-color:var(--color-brand-ink)}
.bg-vention-shades-black{--tw-bg-opacity:1;background-color:var(--color-navy)}
.bg-vention-shades-darkGray{--tw-bg-opacity:1;background-color:var(--color-navy-mid)}
.bg-vention-shades-gray{--tw-bg-opacity:1;background-color:var(--color-blue-grey)}
.bg-vention-shades-lightGray{--tw-bg-opacity:1;background-color:var(--color-ice)}
.bg-vention-stone-lighter{--tw-bg-opacity:1;background-color:var(--color-ice-dark)}
.to-vention-shades-lightGray{--tw-gradient-to:var(--color-ice) var(--tw-gradient-to-position)}
.text-vention-orange{--tw-text-opacity:1;color:var(--color-brand)}
.text-vention-orange-dark{--tw-text-opacity:1;color:var(--color-brand-ink)}
.text-vention-shades-black{--tw-text-opacity:1;color:var(--color-navy)}
.text-vention-shades-darkGray{--tw-text-opacity:1;color:var(--color-navy-mid)}
.text-vention-shades-gray{--tw-text-opacity:1;color:var(--color-blue-grey)}
.text-vention-shades-lightGray{--tw-text-opacity:1;color:var(--color-ice)}
.ring-vention-orange{--tw-ring-opacity:1;--tw-ring-color:var(--color-brand)}
.ring-vention-orange-dark{--tw-ring-opacity:1;--tw-ring-color:var(--color-brand-ink)}
.ring-vention-shades-black{--tw-ring-opacity:1;--tw-ring-color:var(--color-navy)}
.ring-vention-shades-darkGray{--tw-ring-opacity:1;--tw-ring-color:var(--color-navy-mid)}
.ring-vention-shades-gray{--tw-ring-opacity:1;--tw-ring-color:var(--color-blue-grey)}
.ring-vention-shades-lightGray{--tw-ring-opacity:1;--tw-ring-color:var(--color-ice)}
.border-color{--tw-border-opacity:1;border-color:var(--color-blue-grey)}
.border-color:is(.dark *){--tw-border-opacity:1;border-color:var(--color-navy-mid)}
.border-color-reverse{--tw-border-opacity:1;border-color:var(--color-navy-mid)}
.border-color-reverse:is(.dark *){--tw-border-opacity:1;border-color:var(--color-blue-grey)}
.theme-color{--tw-bg-opacity:1;background-color:var(--color-ice)}
.theme-color:is(.dark *){--tw-bg-opacity:1;background-color:var(--color-navy)}
.theme-color-35{--tw-bg-opacity:1;background-color:var(--color-ice)}
.theme-color-35:is(.dark *){--tw-bg-opacity:1;background-color:var(--color-navy)}
.svg-theme-color{--tw-text-opacity:1;color:var(--color-ice)}
.svg-theme-color:is(.dark *){--tw-text-opacity:1;color:var(--color-navy)}
.svg-theme-color-inverse{--tw-text-opacity:1;color:var(--color-navy)}
.svg-theme-color-inverse:is(.dark *){--tw-text-opacity:1;color:var(--color-ice)}
.hover\:bg-vention-orange-dark:hover{--tw-bg-opacity:1;background-color:var(--color-brand-ink)}
.hover\:bg-vention-shades-gray:hover{--tw-bg-opacity:1;background-color:var(--color-blue-grey)}
.hover\:text-vention-orange-dark:hover{--tw-text-opacity:1;color:var(--color-brand-ink)}
.dark\:divide-vention-shades-darkGray:is(.dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:var(--color-navy-mid)}
.dark\:bg-vention-shades-darkGray:is(.dark *){--tw-bg-opacity:1;background-color:var(--color-navy-mid)}
.dark\:bg-vention-shades-lightGray:is(.dark *){--tw-bg-opacity:1;background-color:var(--color-ice)}
.dark\:bg-vention-stone-dark:is(.dark *){--tw-bg-opacity:1;background-color:var(--color-navy-deep)}
.dark\:to-vention-shades-black:is(.dark *){--tw-gradient-to:var(--color-navy) var(--tw-gradient-to-position)}
.dark\:text-vention-orange:is(.dark *){--tw-text-opacity:1;color:var(--color-brand)}
.dark\:text-vention-orange-secondary:is(.dark *){--tw-text-opacity:1;color:var(--color-brand-light)}
.dark\:text-vention-shades-black:is(.dark *){--tw-text-opacity:1;color:var(--color-navy)}
.dark\:text-vention-shades-darkGray:is(.dark *){--tw-text-opacity:1;color:var(--color-navy-mid)}
.dark\:text-vention-shades-lightGray:is(.dark *){--tw-text-opacity:1;color:var(--color-ice)}
.hover\:dark\:bg-vention-orange-secondary:is(.dark *):hover{--tw-bg-opacity:1;background-color:var(--color-brand-light)}
.hover\:dark\:bg-vention-shades-darkGray:is(.dark *):hover{--tw-bg-opacity:1;background-color:var(--color-navy-mid)}
.dark\:hover\:text-vention-orange-secondary:hover:is(.dark *){--tw-text-opacity:1;color:var(--color-brand-light)}
@media (max-width:767px){.mobile\:border-color{--tw-border-opacity:1;border-color:var(--color-blue-grey)}}
@media (max-width:767px){.mobile\:border-color:is(.dark *){--tw-border-opacity:1;border-color:var(--color-navy-mid)}}

/* ---------- display font: Tomorrow ---------- */
/* latin-ext */
@font-face {
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/WBLhrETNbFtZCeGqgR15WXXBDMWRiQ.woff2?v=4cd129e1d7) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/WBLhrETNbFtZCeGqgR15WXXPDMU.woff2?v=041119f25f) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/WBLmrETNbFtZCeGqgRXce2DwLQ.woff2?v=fb2f17dc90) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/WBLmrETNbFtZCeGqgRXSe2A.woff2?v=dac69cca61) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/WBLhrETNbFtZCeGqgR0hWHXBDMWRiQ.woff2?v=27a83852fb) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/WBLhrETNbFtZCeGqgR0hWHXPDMU.woff2?v=a6fd1fd22a) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
h1, h2, h3, h4, h5, h6,
.h1, .b4, .fluidText,
.next-page-link,
.logo::after { font-family: var(--display-font); }

/* ---------- main menu: three items, column 4 to the middle of column 9 ---------- */
/* Self-contained rather than utility classes: the bundle can express neither the half
   column this ends on nor a yellow hover - hover:bg-vention-orange was never compiled.
   Display lives here too, so it cannot fight a mobile:hidden loaded before it. */
.header-nav { display: none; }

@media (min-width: 1080px) {
  .header-nav {
    display: grid;
    /* row 1 explicitly: the logo spans columns 1 to 3, so a menu starting at 3 collided
       with it and auto-placement dropped the whole bar onto a second row */
    grid-row: 1;
    grid-column: 4 / 10;
    /* five and a half of the six columns spanned; % resolves against the grid area */
    width: calc(100% * 11 / 12);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* Scoped to #header, the bar itself: the case study page's breadcrumb band reuses the
     header class for its height and border, and these placement rules were landing on
     its single child - the crumb was being thrown to column 12. */

  /* everything else in the bar belongs on that same row */
  #header > :not(.header-nav) { grid-row: 1; }

  /* the burger is the only auto-placed cell left, and with the row pinned it would take
     the first gap it finds - column 10 - instead of the far end past the mode toggle */
  #header > :last-child { grid-column: 12 / 13; }
}

.header-nav > a:hover {
  background-color: var(--color-brand);
  color: var(--color-navy);
}

/* ---------- register for waitlist: the form box ---------- */
/* grid-column here rather than utilities: the bundle has no col-end-10. Field styling
   here too - text-input and text-input-inverse are fixed light and fixed dark, neither
   follows the theme, and the preflight strips borders off inputs. */
.waitlist-box { grid-column: 1 / -1; }

@media (min-width: 1080px) {
  .waitlist-box { grid-column: 4 / 10; }
}

.waitlist-form { display: grid; gap: 1.4em; }
.waitlist-field { display: grid; gap: .45em; }
.waitlist-error { font-size: .85em; color: var(--color-brand-ink); background-color: var(--color-brand); padding: .3em .6em; justify-self: start; }
.waitlist-form [aria-invalid="true"] { border-color: var(--color-brand) !important; outline: 1px solid var(--color-brand); }
.waitlist-status:empty { display: none; }

/* the checkbox is excluded: it keeps its native box, and a border on it draws nothing */
.waitlist-form input:not([type="checkbox"]),
.waitlist-form select,
.waitlist-form textarea {
  font: inherit;
  color: inherit;
  background-color: transparent;
  border: 1px solid var(--color-blue-grey);
  padding: .6em .8em;
  width: 100%;
}

.dark .waitlist-form input:not([type="checkbox"]),
.dark .waitlist-form select,
.dark .waitlist-form textarea { border-color: var(--color-navy-mid); }

.waitlist-form textarea { resize: vertical; min-height: 6em; }

/* two classes, so this beats .waitlist-form label - one class plus a type - which would
   otherwise keep the row a grid and stretch the checkbox across the whole column */
.waitlist-form .waitlist-consent { display: flex; align-items: flex-start; gap: .7em; }
.waitlist-form .waitlist-consent input { flex: none; margin-top: .25em; }

.waitlist-submit {
  justify-self: start;
  border: 1px solid var(--color-blue-grey);
  padding: .7em 1.6em;
  background-color: transparent;
  color: inherit;
  font: inherit;
}
.dark .waitlist-submit { border-color: var(--color-navy-mid); }
.waitlist-submit:hover { background-color: var(--color-brand); color: var(--color-navy); }

/* ---------- header: the burger panel ships closed ---------- */
/* main-grid sets display:grid, which would beat the UA [hidden] rule on its own */
#burger-menu[hidden] { display: none !important; }

/* ---------- logo: Vention wordmark -> "econblades" ---------- */
.logo > svg { display: none; }
.logo { align-items: center; gap: .55em; }
.logo::before {
  content: "";
  flex: none;
  height: 1.35em;
  aspect-ratio: 105 / 112;
  background-color: currentColor;
  -webkit-mask: url(/icarus-logo.svg?v=0d384c39a5) center / contain no-repeat;
  mask: url(/icarus-logo.svg?v=0d384c39a5) center / contain no-repeat;
}
.logo::after {
  content: var(--brand-wordmark);
  text-transform: lowercase;
  font-family: var(--display-font);
  font-weight: 400;
  font-size: clamp(14px, 1.25vw, 21px);
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  color: currentColor;
}

/* Tomorrow is never set in bold — beats the Tailwind font-bold/semibold utilities. */
h1, h2, h3, h4, h5, h6,
.h1, .b4, .fluidText,
.next-page-link,
.logo::after { font-weight: 400 !important; }

/* ---------- product feature blocks (home) ---------- */
.feature-block {
  position: relative;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease;
}
.feature-block:hover,
.feature-block:focus-visible { background-color: var(--color-brand); color: var(--color-navy); }

.feature-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 56px);
  position: relative;
  z-index: 1;
}
.feature-cta {
  flex: none;
  font-size: .4em;
  line-height: 1;
  white-space: nowrap;
  padding: .8em 1.7em;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.feature-img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(34%, 480px);
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.feature-block:hover .feature-cta,
.feature-block:focus-visible .feature-cta,
.feature-block:hover .feature-img,
.feature-block:focus-visible .feature-img { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .feature-block, .feature-cta, .feature-img { transition: none; }
}

/* ---------- home hero heading: half the top padding ---------- */
@media (max-width: 767px) {
  .home-large-padding { padding-top: calc((84px + (93 - 84)*(100vw - 384px)/(768 - 384)) / 2); }
}
@media (min-width: 768px) and (max-width: 1079px) {
  .home-large-padding { padding-top: calc((255px + (279 - 255)*(100vw - 768px)/(1072 - 768)) / 2); }
}
@media (min-width: 1080px) {
  .home-large-padding { padding-top: calc((179px + (349 - 179)*(100vw - 1080px)/(1920 - 1080)) / 2); }
}

/* vietnamese */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/wlptgwvFAVdoq2_F94zlCfv0bz1WC2UWzLhnepKu.woff2?v=dddb36ad18) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/wlptgwvFAVdoq2_F94zlCfv0bz1WC2UWzLlnepKu.woff2?v=eaec0f8ae9) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/wlptgwvFAVdoq2_F94zlCfv0bz1WC2UWzLdneg.woff2?v=9340fe7288) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body, body.__className_cf47b3 {
  font-family: var(--paragraph-font);
  font-weight: 300;
  font-synthesis-weight: none; /* only the 400 cut ships — never fake the others */
}



/* ---------- hover background for the two big home links ---------- */
main > a.homepage-link-padding {
  position: relative;
  overflow: hidden;
}
main > a.homepage-link-padding > *:not(.icarus-sphere) {
  position: relative;
  z-index: 1;
}
.icarus-sphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 0;
}
/* doubled class so this still outranks the dark-mode hover utilities */
main > a.homepage-link-padding.homepage-link-padding:hover {
  background-color: var(--color-brand);
  color: var(--color-navy);
}
main > a.homepage-link-padding:hover .icarus-sphere { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .icarus-sphere { transition: none; }
}

/* ---------- footer: icarus mark in place of the mirrored wordmark ---------- */
svg.footer-logo-width { display: none; }
:has(> svg.footer-logo-width)::before {
  content: "";
  display: block;
  height: clamp(56px, 5.5vw, 106px);
  aspect-ratio: 105 / 112;
  background-color: currentColor;
  -webkit-mask: url(/icarus-logo.svg?v=0d384c39a5) center / contain no-repeat;
  mask: url(/icarus-logo.svg?v=0d384c39a5) center / contain no-repeat;
}


/* mobile hero: nothing should cover the mark-shaped artwork */
.hero-clipped-height > .absolute { display: none; }

/* ---------- case study body: lists, table, quote (build.py case_part) ---------- */
.case-body h2, .case-body h3 { margin-top: 1.5em; }
.case-body ul, .case-body ol { padding-left: 1.25em; display: flex; flex-direction: column; gap: .5em; }
.case-body ul { list-style: disc; }
.case-body ol { list-style: decimal; }
.case-table { overflow-x: auto; }
.case-body table { border-collapse: collapse; width: 100%; font-size: .85em; }
.case-body th, .case-body td { border-width: 1px; border-style: solid; padding: .5em .75em; text-align: left; vertical-align: top; }
.case-body th, .case-body tbody tr:last-child td { font-weight: 500; }
.case-body blockquote { border-left-width: 2px; border-left-style: solid; padding-left: 1em; display: flex; flex-direction: column; gap: .5em; }


/* screen-reader-only heading (case studies has no visible title) */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 404 */
.not-found { grid-column: 3 / 11; display: flex; flex-direction: column; gap: 24px; min-height: 60vh; justify-content: center; }
.not-found-home { align-self: flex-start; padding: 12px 20px; min-height: 44px; background-color: var(--color-brand); color: var(--color-navy); }
.not-found-home:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 767px) { .not-found { grid-column: 1 / -1; } }

/* home hero images: what next/image's inline fill style did, as a class */
.hero-fill { position: absolute; inset: 0; width: 100%; height: 100%; color: transparent; }

/* inline style="" moved here */
.diagonal-shape { aspect-ratio: 800 / 1536; background-color: transparent; }
.header-rule { width: 3px; }
/* the 10px blur next/image painted behind the hero images; it shows through their
   transparent cut-outs, so it is part of the look, not just a loading placeholder */
.hero-fill { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.hero-clipped-img { background-image: url(/_images/hero-clipped.462475ee-opt-10.WEBP?v=8d86ac1bd8); }
.hero-main-img { background-image: url(/_images/hero.76ab1e30-opt-10.WEBP?v=0aa87d7074); }