/* ==========================================================================
   The TiGears palette.

   Five colours, site-wide: a cream ground, sand panels, one orange accent in
   two cuts, and near-black ink.

       #EFEFEC   ground         the page, and every section that is not a panel
       #E4E2DD   panel          header, rails, cards, panels (Zutari's #E3DCD2)
       #FF5A1F   accent         FILLS only: blocks, buttons, the hero screen
       #8F2604   accent-soft    the accent as TEXT on the light ground
       #111111   ink            headings, body copy and the dark colour blocks

   The accent's job splits on which side of the text it is. As a fill the raw
   Zutari orange is right and black sits on it at 7:1. As text on cream it is
   2.7:1, so text uses the burnt cut instead -- the two are a pair, not a
   preference, and a raw #FF5A1F on a light ground is always a bug.

   Why a separate stylesheet instead of editing the mirrored ones: the site's
   CSS ships from gene.com (build/assets/*.css, assets/**) and is shared by the
   homepage and the six built pages, so it is the last thing to rewrite -- it is
   the one file that makes both surfaces one site. It is loaded LAST on every
   page, after every gene.com stylesheet, so a rule of equal specificity here
   wins; index.html links it directly and tools/build_mapped_site.py injects the
   same link into each generated page.

   The palette is also applied to values that live in HTML rather than in CSS --
   inline styles and the fills of gene.com's inline SVG icon sprite in
   index.html -- by tools/palette.py, which uses the same five colours. Those
   cannot be reached from here: an inline style beats any stylesheet rule.
   ========================================================================== */

:root {
  /* the ground — a greyish black, warm enough that the accent beside it reads
     as light rather than as paint */
  --ground:      #0B0B0C;
  --panel:       #141416;
  --panel-2:     #1B1D20;

  /* the stepped tiles, 1/5..5/5, as a ramp of dark greys */
  --step-1: #101012;
  --step-2: #17181B;
  --step-3: #1F2125;
  --step-4: #282B30;
  --step-5: #34383E;

  /* ink is the darkest block on the page AND the text that sits on the orange,
     on paper and on the white bands. --text is the body colour, and it is
     light: the ground is black. */
  --ink:         #060607;
  --ink-2:       #101012;
  --paper:       #FFFFFF;
  --text:        #F4F0EA;
  /* --dim and --muted are the quiet inks, and on a black ground they are quiet
     by being grey rather than by being dark: both clear 4.5:1 on --panel. */
  --dim:         #9D9992;
  --muted:       #C7C2BB;
  /* The header's two buttons -- the three-line menu and the magnifier -- and
     nothing else. They are chrome, so they are neither accent nor text ink, and
     the six ported pages draw the same pair from `--muted` in
     tools/tigears/design.css: this is that colour, named here so the two page
     types cannot end up a different grey from one another. The square is dark
     now, so the glyph on it is light. */
  --chrome:      #E4E2DD;

  /* the accent, and the one gradient in the system: the accent leaving towards
     a light orange, used on the bands that should feel lit rather than painted
     (never on a control, so a button and a band cannot be confused). */
  --accent:      #FF5A1F;
  --accent-2:    #FF9350;
  /* The secondary accent as TEXT. On a black page the light cut is the legible
     one -- the burnt tone below was cut for a cream ground and drops under
     3:1 here. */
  --accent-soft: #FFD3AE;
  --accent-ink:  #0B0B0C;
  --grad-accent: linear-gradient(118deg, #E23C00 0%, #FF5A1F 46%, #FFA566 100%);

  --rule:        rgba(255, 255, 255, 0.16);
  --rule-strong: rgba(255, 255, 255, 0.30);

  /* the names the rules below already use */
  --surface:     var(--panel);
  --surface-2:   var(--panel-2);
}

/* ---------------------------------------------------------------- base ---- */

html { background: var(--ground); }
body { background: var(--ground); color: var(--text); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 { color: var(--text); }
p, li, dd, dt, blockquote, figcaption, td, th, label, span { color: inherit; }
a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-soft); }
hr, .rule { border-color: var(--rule); }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* gene.com's illustrations and icons are drawn in its blues and greens; an
   icon that keeps them is the one thing on a page that is not in the palette.
   Anything that has not been re-filled on the HTML side is pulled to grey. */
svg [fill="#1AA2DC"], svg [fill="#0066CC"], svg [fill="#004677"],
svg [fill="#0B41CD"], svg [fill="#8DC8E8"], svg [fill="#8EC8E7"] { fill: var(--accent); }
svg [fill="#DDEEF8"], svg [fill="#E5F2FA"], svg [fill="#E1E7F7"],
svg [fill="#F3F4F4"], svg [fill="#acc"] { fill: var(--surface); }

/* ------------------------------------------------------- gene.com chrome --- */

/* Header: gene.com ships a white bar with #30373d ink. */
.header,
.header__top,
.j-subnav,
.nav-primary,
.nav-utility,
.lang-switch-container { background: var(--ground); color: var(--text); border-color: var(--rule); }
.header { border-bottom: 1px solid var(--rule); }
.header__spacer { background: transparent; }
.header a, .nav-primary a, .nav-utility a, .lang-switch-container a { color: var(--text); }
.header a:hover, .nav-primary a:hover, .nav-utility a:hover,
.header a.is-active, .nav-primary a.is-active, .nav-utility a.is-active { color: var(--accent); }
/* The header mark is the team's logo now: colour art on a transparent ground,
   so it must NOT be inverted the way gene.com's black monochrome wordmark had
   to be. It is drawn out of the sprite symbol under the id the vendored header
   bundle looks up, at the logo's own 376x230 aspect -- gene.com's box is 138x36
   (3.8:1), and an aspect that wide would letterbox the mark down to two thirds
   of the height it could use, so the box is re-cut to the mark instead. */
.header__logo { filter: none; height: 56px; width: 92px; }
/* Deliberately NOT `.header__top__logo-container svg`: the logo IS the svg in
   that container, and a class+type selector outranks a class-only one, so the
   moment the two were written together the mark was inverted again -- which on
   colour art paints the tiger blue. The img twin stays invertible in case a
   gene.com layout ever puts its own black mark there. */
.header__top__logo-container img { filter: invert(1); }
/* The utility icons (Contact Us / About Us) are not black art: .nav-utility__icon
   sets `fill: #30373d` and the sprite paths inherit it, so an invert would only
   ever paint an off-palette warm grey, and a plain fill would lose to that class
   rule. Paint them directly instead, at the pair's and their sprite's specificity. */
.nav-utility__icon, .nav-utility__icon use, .nav-utility__icon svg path,
body.search-active .header__search-button .nav-utility__icon { fill: var(--text); }
.nav-utility__item:hover .nav-utility__icon, .nav-utility__item:focus .nav-utility__icon,
.nav-utility__item:hover .nav-utility__icon use,
.nav-utility__item:focus .nav-utility__icon use { fill: var(--accent); }

/* gene.com's breadcrumb rail, which only /search still carries. It is link text
   on the cream ground, not a fill, so it takes the text tone: the raw accent
   lands at 2.7:1 against --ground. */
.breadcrumbs, .breadcrumbs a { color: var(--accent-soft); }
.breadcrumbs a:hover { color: var(--text); }

/* Left rail: a bone panel in gene.com's markup. */
.nav-secondary, .nav-secondary-container { background: var(--surface); color: var(--text); }
.nav-secondary__header { border-color: var(--rule); }
.nav-secondary a:hover, .nav-secondary__link:hover { color: var(--accent); }
.nav-secondary__child.current a, .nav-secondary__child .current,
.nav-secondary .current > a { color: var(--accent) !important; }

/* Content column */
.l-content, .l-content-container, .intro, .block-basic, .block-basic__image--full-width {
  background: transparent; color: var(--text); border-color: var(--rule);
}
.l-content h1, .l-content h2, .l-content h3, .l-content h4, .l-content h5 {
  color: var(--text) !important;
}
.l-content h1 { color: var(--accent-soft) !important; }
/* gene.com paints inline links with its own blues (#003087 / #005691 / #0066CC)
   through chains such as `.block-basic p a`, so these carry `!important` too --
   but not for `.button`, whose colour is the ink on an orange fill.
   The colour is the TEXT cut of the accent, not the fill one: these are links in
   a column, sitting on --ground, and the raw orange reads at 2.7:1 there. It has
   to be `!important` against gene.com's blue, and that same weight is what makes
   it win over the narrower `.breadcrumbs a` further up -- so the two agree on
   --accent-soft rather than fighting. */
.l-content a:not(.button), .block-basic a:not(.button) { color: var(--accent-soft) !important; }
.l-content a:not(.button):hover, .block-basic a:not(.button):hover {
  color: var(--text) !important;
}
.l-content blockquote { border-color: var(--accent); color: var(--text); }

/* Every content image carries its intrinsic width and height in the markup (see
   image_size() in tools/build_mapped_site.py), so that a page has its final
   layout on its first paint instead of pulling itself together as its pictures
   decode. gene.com's `.block-basic__image--full-width img` sets `width: 100%`,
   and a width from CSS next to a height from the markup is an image stretched
   to the column and squashed to its own 126px: for the attributes to keep the
   ratio, the height has to be told to come from them. This is the one layout
   rule in this file -- it exists to undo the effect of the one gene.com rule
   that would otherwise fight the markup. */
.block-basic__image--full-width img { height: auto; }

/* The rails and the content column carry the darkest gene.com ink (#30373d) and
   its grey body copy (#505050). gene.com reaches them through chains like
   `.nav-secondary .nav-secondary__child a` and `.l-content .block-basic p`, i.e.
   selectors a size larger than anything a theme layer wants to write, so these
   few declarations -- and only these -- are marked important rather than
   matched selector for selector. Colours, not layout: nothing here changes where
   anything sits. */
.nav-secondary a, .nav-secondary__link, .nav-secondary__child a,
.nav-secondary-container a { color: var(--text) !important; }
.nav-secondary__child.current a, .nav-secondary .current > a { color: var(--accent) !important; }
.l-content p, .l-content li, .l-content dd, .l-content dt, .l-content figcaption,
.block-basic p, .block-basic li, .block-basic ul, .block-basic ol,
.intro, .intro p {
  color: var(--dim) !important;
}
.l-content strong, .l-content b, .block-basic strong { color: var(--text) !important; }

/* Right rail "Explore the site" widget. Its links come from gene.com's
   `.widget-links .widget-links__link` chain and its own blue palette, so they
   are enforced like the tiles above rather than matched. */
.widget-links, .widget-links__content { background: var(--surface); color: var(--text); }
.widget-links__heading { color: var(--accent-soft); border-color: var(--rule); }
.widget-links__link, .widget-links__item, .widget-links__item a,
.widget-links__items a, .widget-links__items > li { color: var(--text) !important; border-color: var(--rule) !important; }
.widget-links__link:hover, .widget-links__item a:hover { color: var(--accent) !important; }

/* Buttons and links that gene.com paints in its blues */
.button, a.button, .btn, button.button,
.l-content .button, .block-basic .button {
  background: var(--accent); color: var(--ink); border-color: var(--accent);
}
.button:hover, a.button:hover, .btn:hover { background: var(--accent-soft); color: var(--ink); }
a.arrow-link, .arrow-link { color: var(--accent); }
a.arrow-link:hover, .arrow-link:hover { color: var(--accent-soft); }

/* Footer: gene.com's is bone (#EBE6E0) with black type. */
/* Zutari's footer is near-black with white type on it, whatever the ground of
   the page above it is -- so this one band stays dark on the light site. */
.primary-footer, .footer-sitemap, .footer-social, .primary-footer .constrained {
  background: var(--ink); color: rgba(255, 255, 255, .78);
  border-color: rgba(255, 255, 255, .16);
}
.primary-footer { border-top: 1px solid rgba(255, 255, 255, .16); }
.primary-footer a, .footer-sitemap a { color: var(--paper); }
.primary-footer a:hover, .footer-sitemap a:hover { color: var(--accent); }
.footer-sitemap .footer-section-title, .footer-sitemap .first-level a { color: var(--paper); }
.copyright, .primary-footer .copyright { color: rgba(255, 255, 255, .58); }
/* The footer mark is an <img> of the team's logo rather than a sprite symbol, so
   there is nothing to invert -- .footer-social kept the invert because those
   glyphs are still gene.com's own black art. */
.footer-logo-narrow img { display: block; width: 150px; height: auto; }
.footer-social svg, .footer-social-list svg { filter: invert(1); }
.footer-social-list a { color: var(--accent); }

/* Layout wrappers gene.com leaves transparent, plus the two panels it paints
   light: `.hero-image` (the band above a page's first block) and the
   `quick-replace-image` placeholder that shows while a picture loads.

   Deliberately NOT gene.com's utility classes (`.clearfix`, `.flush-top`,
   `.constrained`): they sit on host elements that DO carry a colour -- the
   footer is `primary-footer js-nav-footer clearfix` -- and a transparent rule
   for a utility class is a later, equal-specificity rule that would strip the
   host's background. That is what left an orange strip under the footer. */
.l-grid, .l-rail-left, .l-rail-right, .l-content-container, .v4-constrained,
.hero-image { background: transparent; color: var(--text); }
.hero-image { border-color: var(--rule); }
.quick-replace-image__placeholder, .quick-replace-image,
.media-image-full, .media-image-full__main { background-color: var(--surface); color: var(--text); }
.media-image-full__caption, .media-image-full figcaption, .small { color: var(--dim); }

/* The mobile nav overlay / page dimmer */
.l-page-overlay { background: rgba(17, 18, 20, 0.82); }
.ie-warning, .ie-warning__container, .ie-warning__text { background: var(--surface); color: var(--text); }

/* The top nav's list items keep gene.com's #30373d of their own (the anchors
   inside are restyled above, but anything that inherits from the item -- a
   dropdown caret, a badge -- would sit invisible on the ink), and the mobile
   toggle's burger is drawn with #30373d fills. */
.nav-primary, .nav-primary li, .nav-primary__item, .nav-primary__toggle,
.nav-primary__toggle svg path, .nav-primary svg path { color: var(--text); }
.nav-primary svg path, .nav-primary svg use, .nav-primary svg [fill],
.nav-primary__toggle svg path, .nav-primary__toggle svg use,
.nav-primary__toggle svg [fill] { fill: var(--accent); }
/* the burger's host and its <svg> carry their own copy of #30373d, which the
   <use> inherits from -- restyle them too, and the hover gene.com paints #003087 */
.nav-primary__toggle, .nav-primary__toggle svg { fill: var(--accent); }
.nav-primary__toggle:hover, .nav-primary__toggle:focus {
  color: var(--accent-soft); fill: var(--accent-soft);
}
.nav-primary__toggle:hover svg, .nav-primary__toggle:focus svg { fill: var(--accent-soft); }

/* The utility items' labels are a `span` with their own #505050 -- they do not
   inherit the anchor's colour, so they need the rule in their own right. */
.nav-utility__text { color: var(--text); }
.nav-utility__item:hover .nav-utility__text, .nav-utility__item:focus .nav-utility__text {
  color: var(--accent);
}

/* The search box gene.com's header renders, and its magnifier: the icon is a
   #25282A path and the button's own colour is #505050. The pill itself is a
   hard white #fff in galaxySearch.css. */
.galaxy-searchbar, .galaxy-wrapper .galaxy-searchbar { background: var(--surface); color: var(--text); }
.galaxy-searchbar__form { background: var(--ink); border-color: var(--rule); }
.galaxy-searchbar--focused .galaxy-searchbar__form { border-color: var(--accent); }
.galaxy-searchbar__form--expanded { border-color: var(--rule); }
.galaxy-searchbar input { background: transparent; color: var(--text); }
.galaxy-searchbar input::placeholder { color: var(--dim); }
.galaxy-searchbar__right-icon, .galaxy-searchbar__right-icon--close { color: var(--text); }
.galaxy-searchbar__right-icon--close:hover, .galaxy-searchbar__right-icon--close:focus {
  color: var(--accent);
}
.galaxy-searchbar__search-icon { color: var(--accent); }
.galaxy-searchbar__search-icon:hover, .galaxy-searchbar__search-icon:focus {
  color: var(--accent-soft);
}
/* the "recent searches" dropdown that unfolds under the pill */
.galaxy-searchbar h2 { color: var(--text); }
.galaxy-searchbar__divider { background: var(--rule); }
.galaxy-searchbar__dropdown { background-color: var(--surface); color: var(--text); }
.galaxy-searchbar__dropdown__item { color: var(--text); }
.galaxy-searchbar__dropdown__item__icon { color: var(--text); }
.galaxy-searchbar__dropdown__item--hovered, .galaxy-searchbar__dropdown__item:hover {
  background-color: var(--ink); color: var(--accent-soft);
}
.galaxy-searchbar__dropdown__item--hovered .galaxy-searchbar__dropdown__item__icon svg,
.galaxy-searchbar__dropdown__item--hovered .galaxy-searchbar__dropdown__item__icon svg path,
.galaxy-searchbar__dropdown__item:hover .galaxy-searchbar__dropdown__item__icon svg,
.galaxy-searchbar__dropdown__item:hover .galaxy-searchbar__dropdown__item__icon svg path {
  fill: var(--accent-soft);
}
.clear-recents, .galaxy-link.clear-recents { color: var(--accent); }
.galaxy-searchbar svg path, .galaxy-searchbar svg use, .galaxy-searchbar svg [fill],
.galaxy-searchbar__search-icon svg path, .galaxy-searchbar__search-icon svg use,
.galaxy-searchbar__search-icon svg [fill] { fill: var(--accent); }

/* gene.com's page-transition curtain: a #505050 sheet that wipes over the page */
.shoomshoom { background: var(--ink); }

/* ------------------------------------------------- the homepage's own bits - */

/* The hero's flat screen is the palette orange: see SCREEN in
   tools/wordmark/patch_index.py, which writes it into the stage, the mask
   container, both band layers and the body. */

/* The 50 / 13-seasons band is an ink bar now, with the photograph showing
   through the cut-out numerals. Its type is set inline by patch_index.py. */
.bar-image-container.with-mask { border-top: 1px solid var(--rule); }
.content-bar { color: var(--text); }
.content-bar h5, .content-bar p { color: var(--text); }
.content-bar .button { background: var(--accent); color: var(--ink); }

/* Slide 2 is a gene.com band with its copy over a photograph, so its type has to
   stay at full strength rather than the dimmed body grey: it was set white on
   the dark original, and the kicker and the outbound button were a lime green
   and a purple. */
.text h6, .flexible-cta h6 { color: var(--text) !important; }
.flexible-cta h1, .flexible-cta h2, .flexible-cta h3, .flexible-cta h4,
.flexible-cta strong { color: var(--text) !important; }
.flexible-cta p, .flexible-cta li { color: var(--text) !important; }
.flexible-cta .button, .story-takeover__wrapper .button { background: var(--accent); color: var(--ink); }

/* The story/tile band on the homepage: one panel above the black ground, with
   the robotics drawing on it, so the editorial band reads as a bay of the page
   rather than as another stretch of black. */
.story-takeover, .story-takeover__container, .tile-block, .tile-block__container {
  background: var(--panel); color: var(--text);
  background-image: var(--pattern-tech, none);
  background-size: 420px 420px;
  background-position: calc(100% - 70px) 30px;
  background-repeat: no-repeat;
}
.story-takeover h2, .story-takeover h3 { color: var(--text); }
/* The takeover lede is a bare <p> inside .text, and gene.com's own rules leave
   it at the default black -- invisible on the band. */
.story-takeover p, .story-takeover .text p, .story-takeover__wrapper p,
.content-slide p, .tile-block p { color: var(--text) !important; }
/* The focus-area carousel titles sit outside .story-carousel, so the themed rule
   never reached them and they rendered at gene.com's default black. */
.media-carousel__title { color: var(--text) !important; }
.tile, .tile-block .tile { background: var(--surface); color: var(--text); }
.tile__tag { background: var(--accent); color: var(--ink); }
.tile__caption, .image__caption { color: var(--text); }

/* gene.com's own card and carousel components, which the bands above are built
   from: `.content-tile__inner` is a white card, its copy is #30373d / #505050,
   the topic chip is #003087 and the carousel's pager is white.

   These are the one family where the palette is enforced rather than matched.
   gene.com reaches each of them through four-class chains --
   `.stories-layout .content-tile__inner`, `.tile-grid .content-tile__body`, and
   for the takeover's CTA `.story-takeover__wrapper .content .button` in #002e85
   -- so matching selector for selector means copying chains whose shape changes
   whenever gene.com's build does, and every miss is a white card or a blue
   button left in a black page. Colours only: no rule here moves or resizes
   anything.

   `.image` is the grey placeholder gene.com paints behind a picture while it
   loads; the rest are the card, its copy, the topic chip and the pager. */
.content-tile__inner { background: var(--surface) !important; border-color: var(--rule) !important; }
.content-tile__header, .content-tile__title, .v3-tile-content__head,
.tile__header, .v3-tile-image__head {
  color: var(--text) !important; border-color: var(--rule) !important;
}
.content-tile__body, .v3-tile-content__body, .v3-tile-content__divider,
.tile__body, .v3-tile-image__body {
  color: var(--text) !important; border-color: var(--rule) !important;
}
.content-tile__topic, .v3-tile-content__head, .tile__job-family {
  color: var(--accent-soft) !important; border-color: var(--accent) !important;
}
.content-tile__topic:after, .v3-tile-content__divider, .tile__divider {
  border-bottom-color: var(--accent) !important;
}
.story-takeover a, .tile-block a, .content-slide a, .content-tile a,
.v3-tile-content a, .media-carousel a { color: var(--accent) !important; }
.story-takeover a:hover, .content-tile a:hover, .v3-tile-content a:hover { color: var(--accent-soft) !important; }
.story-takeover__wrapper .content .button,
.flexible-cta .content .button,
.button, a.button, .btn, button.button {
  background: var(--accent) !important; color: var(--ink) !important;
  border-color: var(--accent) !important;
}
.story-takeover__wrapper .content .button:hover,
.flexible-cta .content .button:hover,
.button:hover, a.button:hover, .btn:hover {
  background: var(--accent-soft) !important; color: var(--ink) !important;
  border-color: var(--accent-soft) !important;
}
.image, .takeover .image, .content-tile__image, .story-takeover__wrapper .image {
  background-color: var(--surface) !important;
}
.media-carousel__pager-inner, .media-carousel__pager-prev, .media-carousel__pager-next,
.media-carousel__pager-counter { color: var(--text) !important; border-color: var(--rule) !important; }
.media-carousel__pager-prev svg [fill], .media-carousel__pager-next svg [fill] { fill: var(--text) !important; }
.media-carousel__pager-prev:hover, .media-carousel__pager-next:hover { border-color: var(--accent) !important; }
.media-carousel__pager-prev:hover svg [fill], .media-carousel__pager-next:hover svg [fill] { fill: var(--accent) !important; }

/* ------------------------------------------------------ the header menu ---- */

/* The flyout is #fff and the mobile overlay #e9e7e2 in StoryApp's CSS; both are
   the surface here, with the nav bar, the promo card and the search pill a step
   apart so the panel still reads as three layers. */
.minimal-menu-search-nav__menu.hovered,
.minimal-menu-search-nav__menu.open { background: var(--surface); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
.minimal-menu-search-nav__menu.open .content-container { background: var(--surface); }
/* The two header buttons -- the three-line menu and the magnifier -- are GREY,
   not accent. They are chrome: an orange control here competes with the one
   orange thing on the page that means something (the CTA pill beside them, the
   links, the accent bands). The panel is `--surface` and the glyph on it is
   `--chrome`: one token each, so the pair cannot drift apart, and so the six
   ported pages -- which draw the same pair from tools/tigears/design.css -- come
   out the same grey rather than merely a grey each. */
.minimal-menu-search-nav__menu .trigger { background: var(--surface); color: var(--chrome); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
.minimal-menu-search-nav__menu .trigger svg [fill] { fill: var(--chrome); }
.minimal-menu-search-nav__menu .trigger:hover, .minimal-menu-search-nav__menu .trigger:focus { color: var(--accent); }
.minimal-menu-search-nav__menu .trigger:hover svg [fill], .minimal-menu-search-nav__menu .trigger:focus svg [fill] { fill: var(--ink); }
.minimal-menu-search-nav__menu .close svg [fill] { fill: var(--text); }
/* the panel's own wordmark is gene.com's black art, drawn as outlines */
.minimal-menu-search-nav__menu .nav-logo svg [fill] { fill: var(--text); }
.minimal-menu-search-nav__menu .content-container { color: var(--text); }
.minimal-menu-search-nav__menu nav a { color: var(--text); }
.minimal-menu-search-nav__menu nav a:hover,
.minimal-menu-search-nav__menu .quick-links a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.minimal-menu-search-nav__menu .takeover { background: var(--ink); box-shadow: 0 0 4.7px rgba(0, 0, 0, 0.6); }
.minimal-menu-search-nav__menu .takeover .text { color: var(--text); }
.minimal-menu-search-nav__menu .takeover .text h3 { color: var(--accent-soft); }
.minimal-menu-search-nav__menu .takeover .image__icon { background: var(--accent); }
.minimal-menu-search-nav__menu .takeover .image__icon svg [fill] { fill: var(--ink); }
.minimal-menu-search-nav__search-container { background: var(--surface); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); }
.minimal-menu-search-nav__search-container .search-icon svg [fill],
.minimal-menu-search-nav__search-container .clearable-search__clear svg [fill] { fill: var(--chrome); }
.minimal-menu-search-nav__search-container .search-icon:hover svg [fill] { fill: var(--ink); }
.minimal-menu-search-nav__search-container .search-form #search-input { color: var(--text); background: transparent; }
.minimal-menu-search-nav__search-container .search-form #search-input::placeholder { color: var(--dim); }

/* The cookie banner is a bone panel with a dark accept button. */
.cookie-banner, .cookie-banner__inner { background: var(--surface); color: var(--text); border-color: var(--rule); }
.cookie-banner__text, .cookie-banner p { color: var(--text); }
.cookie-banner a { color: var(--accent-soft); }
.cookie-banner button, .cookie-banner .button { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.cookie-banner button:hover, .cookie-banner .button:hover { background: var(--accent-soft); }

/* ==========================================================================
   The Zutari layout layer.

   Everything above this line is gene.com's markup in the team's colours. What
   is below imposes Zutari's three structural habits on the homepage's own
   components -- the same three the six ported pages are built from, so the
   homepage reads as the same site:

     * ONE display voice. A grotesque at weight 600, set in UPPERCASE, tracked
       in hard and leaded under 1. gene.com sets a serif; Zutari sets none.
     * NOTHING ROUNDED. Zach Zutari's corners are all square -- every card,
       button, chip and image on its site is a rectangle.
     * FLAT COLOUR BLOCKS. A card is a filled rectangle, not a white panel with
       a shadow, and its colour is the thing that groups it.

   Colours and shapes only. Nothing here moves a section or changes a measure.
   ========================================================================== */

h1, h2, h3, .h1, .h2, .h3,
.l-content h1, .l-content h2, .l-content h3,
.flexible-cta h1, .flexible-cta h2, .flexible-cta h3,
.story-takeover h2, .story-takeover h3,
.content-bar h5, .content-tile__header, .content-tile__title,
.v3-tile-content__head, .media-carousel__title,
.tile__header, .v3-tile-image__head {
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: .94;
}

/* a small mono label, as Zutari sets its SERVICE 1/10 chips and dates */
h6, .flexible-cta h6, .content-tile__topic, .tile__job-family {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;
  text-transform: uppercase;
  letter-spacing: .16em;
}

/* square corners, everywhere Zutari would have them */
.button, a.button, .btn, button.button,
.tile, .tile-block .tile, .content-tile, .content-tile__inner,
.content-tile__image, .v3-tile-content__inner, .image,
.content-bar, .content-bar__image, .media-image-full, .media-image-full__main,
.story-takeover__wrapper .image, .card, .chip {
  border-radius: 0 !important;
}

/* the homepage's card grid, as Zutari's colour blocks: a filled rectangle on
   the stepped grey ramp, with the chip in mono and the title in the display
   face. The blocks take the ramp in order so a row never repeats a tone. */
.content-tile__inner { background: var(--step-1) !important; }
.tile:nth-child(5n+1) .content-tile__inner { background: var(--step-1) !important; }
.tile:nth-child(5n+2) .content-tile__inner { background: var(--step-2) !important; }
.tile:nth-child(5n+3) .content-tile__inner { background: var(--step-3) !important; }
.tile:nth-child(5n+4) .content-tile__inner { background: var(--step-4) !important; }
.tile:nth-child(5n+5) .content-tile__inner { background: var(--step-5) !important; }
/* The card's own copy is near-black on the block. The `p` matters: gene.com
   leaves an inline colour on some of them, which only `!important` reaches. */
.content-tile__header, .content-tile__title, .v3-tile-content__head,
.content-tile__body, .v3-tile-content__body,
.content-tile__body p, .content-tile__header p, .content-tile__content p,
.v3-tile-content__body p, .tile__body, .tile__header {
  color: var(--text) !important;
}
.content-tile__topic, .tile__job-family { color: var(--dim) !important; }
.content-tile a:not(.button), .v3-tile-content a:not(.button),
.tile a:not(.button), .media-carousel a:not(.button) {
  color: var(--accent-soft) !important;
}
.content-tile a:not(.button):hover, .v3-tile-content a:not(.button):hover {
  color: var(--text) !important;
}

/* The 50 / 13-seasons bar is a flat DARK band -- Zutari's one loud block on a
   light page -- so its type stays white. But gene.com marks ALL THREE of the
   homepage's bars `.content-bar`, and the other two are ordinary slides that
   sit on the light ground; painting those white is white type on cream. The
   dark one is picked out by the sibling it always follows, and the rule is
   scoped through `.content` so it outranks the light-slide rule below it. */
.content .bar-image-container.with-mask ~ .content-bar {
  background: var(--ink); color: var(--paper);
}
.content .bar-image-container.with-mask ~ .content-bar .text,
.content .bar-image-container.with-mask ~ .content-bar .text p,
.content .bar-image-container.with-mask ~ .content-bar .text h5,
.content .bar-image-container.with-mask ~ .content-bar .text strong {
  color: var(--paper) !important;
}
.content .bar-image-container.with-mask ~ .content-bar .button,
.content .bar-image-container.with-mask ~ .content-bar a.button {
  background: var(--accent) !important;
  color: var(--ink) !important;
  border-color: var(--accent) !important;
}
/* the other two bars are slides on the ground (one of them on the orange
   screen), so their type is near-black either way -- 6:1 on the accent, and
   well past 4.5:1 on the cream */
.content-bar, .content-bar .text, .content-bar .text p, .content-bar .text h5,
.content-bar .text strong, .content-bar h5, .content-bar p {
  color: var(--text) !important;
}

/* gene.com's editorial media bands carry their own near-black ground, which on
   the light site is a dark rectangle with dark type in it. Zutari's editorial
   bands are the cream ground, with the sand panel where a section has to read
   as separate from its neighbour -- so these come back to the ground. */
.custom-media-element, .freeform-content-block, .media-block,
.media-block--full-width, .story-carousel, .media-carousel,
.v3-tile-content, .media-block__wrapper,
.content.scrolling-slideshow-content, .slide-container,
.bar-image-container.no-mask {
  background-color: var(--ground) !important;
  color: var(--text);
}
/* the freeform block's own panel is the sand step, so it still reads as a
   separate band on the cream ground */
.sheet-wrap, .sheet-wrap-container, .v5-tile-block__content__grid-wrapper {
  background-color: transparent !important;
}
.sheet-wrap {
  background-color: var(--panel) !important;
}
.freeform-content-block h3, .custom-media-element h2,
.media-block h2, .story-carousel h2 {
  color: var(--text) !important;
}
/* and the same bands' rounded media cards */
.media-carousel__slide, .media-carousel__item, .media-carousel-item,
.media-carousel__image, .media-carousel__overlay, .media-block__image,
.custom-media-element img, .custom-media-element > * > *,
.story-carousel img, .v3-tile-content__inner, .v3-tile-content {
  border-radius: 0 !important;
}

/* Zutari runs one full-width accent band before the footer; the homepage's
   flexible call to action is that band */
.flexible-cta, .flexible-cta__container {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
}
.flexible-cta h1, .flexible-cta h2, .flexible-cta h3, .flexible-cta h4,
.flexible-cta p, .flexible-cta li, .flexible-cta strong, .flexible-cta .text,
.flexible-cta h6 {
  color: var(--accent-ink) !important;
}
.flexible-cta .button, .flexible-cta .content .button {
  background: var(--accent) !important; color: var(--ink) !important;
  border-color: var(--accent) !important;
}
.flexible-cta .button:hover, .flexible-cta .content .button:hover {
  background: var(--paper) !important; color: var(--ink) !important;
  border-color: var(--paper) !important;
}

/* ==========================================================================
   THE BLACK GROUND

   This file was written for a pale page: a cream ground, near-black ink, and
   every colour chosen so it would survive on white. The page is black now, so
   three things had to change with it:

     * `--ink` is still the darkest block on the page, and it is now also the
       text that sits on orange and on paper -- but it is no longer body text,
       which is `--text` at #F4F0EA.
     * A control filled with ink is invisible. The primary is the accent.
     * Contrast ran one way, dark-on-light; the pairs below are light-on-dark
       or black-on-orange and were checked in that direction.

   The bands. gene.com's homepage is a stack of full-bleed bands and only two of
   them are ours to light: the editorial band (`.story-takeover`, the panel with
   the robotics drawing on it) and the CTA band (the orange ramp). The rest of
   the page is the black ground, which is what the accordion of pale bands on
   the earlier version of this site was standing in for.

   The hero is left alone. It is the wordmark's own orange screen, with the
   photograph showing through the letterforms, and it is already the one
   full-bleed orange frame the page opens on -- lighting anything behind it
   would only show through the very holes the zoom is opening.
   ========================================================================== */

:root {
  /* Technical line art, as a data URI: two gear rings, a ticked crosshair, a
     dashed inspection square and a dotted axis. Drawn in the accent at 34%, so
     it is a texture on a dark band and never competes with the type. */
  --pattern-tech: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23FF5A1F' stroke-width='1.1' opacity='0.34'%3E%3Ccircle cx='96' cy='96' r='66'/%3E%3Ccircle cx='96' cy='96' r='44'/%3E%3Ccircle cx='96' cy='96' r='10'/%3E%3Cpath d='M96 18v22M96 152v22M18 96h22M152 96h22'/%3E%3Ccircle cx='330' cy='330' r='34'/%3E%3Cpath d='M330 288v14M330 358v14M288 330h14M358 330h14'/%3E%3Crect x='252' y='62' width='96' height='96' stroke-dasharray='7 7'/%3E%3Cpath d='M210 0v420M0 210h420' stroke-dasharray='2 14'/%3E%3C/g%3E%3C/svg%3E");
  /* A 64px survey grid, for the bands that should read as a drawing. */
  --pattern-grid:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 64px);
  /* The light band's ground: paper, not pure white, so the orange beside it
     does not read as printed on. */
  --band-light: #F7F3EC;
}

/* ---- the page ---------------------------------------------------------- */

html, body { background-color: var(--ground); }
body {
  background-image:
    radial-gradient(70% 46% at 88% -6%, rgba(255, 120, 60, .16) 0%, transparent 64%),
    var(--pattern-grid);
  background-size: auto, 64px 64px;
}

/* the footer is near-black on a black page, so it needs an edge rather than a
   colour change to read as its own band */
.primary-footer, .footer-sitemap, .footer-social, .primary-footer .constrained {
  border-top: 1px solid var(--rule);
}

/* ---- the bands ---------------------------------------------------------

   `.takeover` is the band that carries the story carousel: gene.com paints it
   white, and on a black page it becomes the lit band -- the same orange ramp the
   ported pages use for their CTA, with the black ink that ramp needs.          */

.takeover, .takeover__container, .story-takeover__wrapper {
  background: var(--grad-accent);
  color: var(--ink);
}
.takeover h1, .takeover h2, .takeover h3, .takeover h4, .takeover h6,
.takeover p, .takeover li, .takeover strong, .takeover .text h6,
.story-takeover__wrapper h1, .story-takeover__wrapper h2,
.story-takeover__wrapper .content h1, .story-takeover__wrapper .content h2,
.flexible-cta h1, .flexible-cta h2, .flexible-cta h3, .flexible-cta h4,
.flexible-cta h6, .flexible-cta p, .flexible-cta strong {
  color: var(--ink) !important;
}
.takeover a:not(.button), .story-takeover__wrapper a:not(.button) { color: var(--ink) !important; }

/* and where a band stays dark, it gets the drawing instead */
.flexible-cta {
  background-color: var(--panel) !important;
  background-image: var(--pattern-tech);
  background-size: 460px 460px;
  background-position: calc(100% - 40px) 50%;
  background-repeat: no-repeat;
}

/* the 50 / 13-seasons bar and the freeform panels are the panel tone now */
.freeform-content-block, .custom-media-element, .media-block, .story-carousel {
  background-color: var(--panel) !important;
  color: var(--text);
}

/* ---- photographs -------------------------------------------------------

   Same treatment as the ported pages: gene.com's photography is cool daylight,
   and straight onto a black page it reads as a hole in it. Sepia moves the
   midtones towards the accent's hue, the hue rotation brings them back from
   yellow to orange, and the small contrast lift keeps the highlights from going
   grey. The wordmark's own masks are background images, not `<img>`, so the
   zoom's letterforms are untouched by this -- as are the logo and the icons.   */

.takeover img, .story-takeover img, .tile-block img, .tile img,
.content-tile img, .v3-tile-image img, .story-carousel img, .media-carousel img,
.slide-container img, .custom-media-element img, .media-block img {
  filter: saturate(.78) sepia(.26) hue-rotate(-9deg) contrast(1.06) brightness(.95);
}

/* ---- the cookie banner and the flyout ---------------------------------- */

.cookie-banner, .cookie-banner__inner { border-top: 1px solid var(--rule); }
.minimal-menu-search-nav__menu .content-container { border-top: 1px solid var(--rule); }

/* ---- every photograph in the page's body ----------------------------------

   The rule above names the bands that exist today; this one catches the rest --
   gene.com's slide art, the cards' media, anything a later band adds -- without
   ever touching the header mark, the icons or the wordmark, which are drawn as
   SVG and as background images rather than as <img>. The settings are the same
   plate, a shade stronger, because the slide illustrations are near-white
   peach and at the first strength they still read as white rectangles on the
   black page.                                                                */

main img {
  filter: saturate(.72) sepia(.34) hue-rotate(-11deg) contrast(1.04) brightness(.9);
}
/* and a wash over the pale art, so what is left of the paper reads as orange */
.slide-container, .media-carousel__slide, .image, .tile__image, .content-tile__image,
.story-carousel__slide { position: relative; }
.slide-container::after, .image::after, .tile__image::after, .content-tile__image::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(196deg, rgba(255, 90, 31, .12) 0%, rgba(255, 60, 10, .32) 100%);
  mix-blend-mode: multiply;
}

/* gene.com's `.content-bar` is #EFEFEC in its own stylesheet, i.e. the old cream
   literal rather than a token, so it is the one band that stayed pale on the
   black page. It is a panel here, and its copy is light. */
.content-bar, .content-bar__container, .bar-image-container .content-bar {
  background-color: var(--panel) !important;
  color: var(--text) !important;
}

/* ==========================================================================
   THE PAGE HUB

   The season band used to end in eight gene.com tiles: "In the Shop",
   "Team Award", "SoCal Showdown", an "Our Team" card, "Instagram" and "We're
   Recruiting", each illustrated with gene.com's own artwork -- a purple virus,
   an RNA strand, a doctor and a pink ribbon. None of it was this team's, and
   the one card that pointed anywhere ("Our Team") pointed at a page the
   homepage does not need to preview.

   It is replaced by five cards, one per destination page that a visitor
   actually arrives looking for: Accomplishments, Design Process, Sponsors &
   Grants, Giving & Fundraisers and Contact. Each is a whole-card link -- the
   photograph, the kicker, the copy and the button are one anchor, so the whole
   card is the target and the button is the affordance, not the only hit area.

   The grid is three columns at desktop, two at tablet and one on a phone, and
   the cards are cut from the same three colours as everything else: a black
   card, a hairline, an orange kicker and an orange button. The photograph keeps
   the orange plate the rest of the site's photographs have.
   ========================================================================== */

.tg-hub { margin: 0; }

.tg-hub__head {
  max-width: 62ch;
  margin: 0 0 clamp(22px, 3vw, 34px);
  color: var(--muted);
  font-size: 17.5px;
  line-height: 1.6;
}

.tg-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: var(--rule);
}

.tg-hub__card {
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--text);
  text-decoration: none;
  transition: background-color .18s var(--ease, ease);
}
.tg-hub__card:hover, .tg-hub__card:focus-visible { background: var(--panel); }

.tg-hub__media { display: block; overflow: hidden; }
.tg-hub__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.78) sepia(.26) hue-rotate(-9deg) contrast(1.06) brightness(.95);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.tg-hub__card:hover .tg-hub__media img { transform: scale(1.04); }

.tg-hub__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }

.tg-hub__kicker {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.tg-hub__title {
  font-family: var(--display, inherit);
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: uppercase;
  line-height: 1.04;
  color: var(--text);
}
.tg-hub__copy { color: var(--muted); font-size: 15.5px; line-height: 1.55; }

.tg-hub__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: 6px;
  padding: 11px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: background-color .18s var(--ease, ease), color .18s var(--ease, ease);
}
.tg-hub__cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tg-hub__card:hover .tg-hub__cta { background: var(--paper); color: var(--ink); }

@media (max-width: 900px) {
  .tg-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .tg-hub__grid { grid-template-columns: minmax(0, 1fr); }
}

/* The five cards fill two rows of three, and five into three leaves one cell
   empty at the end of the second row -- which reads as a card that failed to
   load rather than as a margin. The last card takes the two remaining columns,
   so the block closes on a full row and the Contact card is the wide one, which
   is the right emphasis for the one card that is an invitation. */
@media (min-width: 901px) {
  .tg-hub__card:last-child { grid-column: span 2; }
  .tg-hub__card:last-child .tg-hub__media img { aspect-ratio: 21 / 8; }
}

/* the page hub sits inside the season band, whose .wrap-less container runs to
   the window edge; the lead-in paragraph needs the page's gutter, the grid stays
   full-bleed on purpose */
.tg-hub__head { padding: 0 clamp(20px, 4vw, 56px); }

/* A button on the orange band cannot be the orange fill -- it disappears into
   the band it is standing on. It is ink here, with the band's own light paper
   for its type. */
.takeover .button, .story-takeover .button,
.story-takeover__wrapper .content .button, .flexible-cta .content .button {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--band-light) !important;
}
.takeover .button:hover, .story-takeover .button:hover,
.story-takeover__wrapper .content .button:hover, .flexible-cta .content .button:hover {
  background: var(--band-light) !important;
  border-color: var(--band-light) !important;
  color: var(--ink) !important;
}

/* ==========================================================================
   THE ARRIVAL

   The same scroll-reveal system the ported pages use (see the block at the end
   of tools/tigears/design.css), declared here because the homepage does not load
   that stylesheet. assets/transition.js tags the elements on every page and
   writes their stagger index; these rules are what it animates.

     .reveal       copy: fades up
     .reveal--img  a picture: the frame clips from the bottom while the image
                   settles from 8% large
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(clamp(16px, 2.2vw, 30px));
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 72ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal--img {
  opacity: 1;
  transform: none;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 72ms);
}
.reveal--img.is-in { clip-path: inset(0 0 0 0); }
.reveal--img img, .reveal--img video {
  transform: scale(1.08);
  transition: transform 1.35s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 72ms);
}
.reveal--img.is-in img, .reveal--img.is-in video { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--img, .reveal--img img, .reveal--img video {
    opacity: 1; transform: none; clip-path: none; transition: none;
  }
}