/* Core block styles. Loaded twice on purpose — into the front-end chain in
   inc/enqueue-scripts.php and into the editor via add_editor_style() — so the
   two cannot drift apart. .btn is not a block; it shares the rule and matches
   nothing in the editor. */

.wp-block-button__link,
.btn {
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

/* --------- Hero --------- */

/* Here and not in layout.css: the hero reserves this space in the editor too,
   and the header reads it on the front end. */
:root {
  --header-height: clamp(80px, 1.786vw + 74.29px, 100px);
}

.hero {
  position: relative;
  overflow: clip;
  padding-top: calc(var(--header-height) + var(--wp--preset--spacing--80));
  padding-right: var(--wp--style--root--padding-right);
  padding-bottom: var(--hero-padding-bottom, 0px);
  padding-left: var(--wp--style--root--padding-left);
  color: var(--wp--preset--color--primary);
  --hero-line-color: var(--wp--preset--color--primary);
  --hero-line-scale: 1;
  --hero-line-shift-x: 0px;
  --hero-line-shift-y: 0px;
  --hero-line-parallax-x: 0px;
  --hero-line-parallax-y: 0px;
  --hero-line-band: 200px;
}

/* Same list as E88_DARK_BACKGROUNDS in inc/constants.php. */
.hero.has-primary-background-color,
.hero.has-primary-dark-background-color {
  color: var(--wp--preset--color--base);
  --hero-line-color: var(--wp--preset--color--secondary);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
}

.hero__inner > * {
  max-width: 100%;
  margin-block: 0;
}

.hero__inner > * + * {
  margin-block-start: var(--wp--style--block-gap);
}

.hero--text-narrow .hero__inner > p {
  width: 450px;
}

.hero__line {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}

/* The line's shape, anchored at its box's top right corner — shared with the
   footer's (layout.css). Where it animates, the same file is printed inline
   instead of the mask (blocks/hero/render.php, footer.php). The relative url
   survives in the editor: core passes this file's URI as baseURL. */
.hero__line::before,
.hero__line > svg,
.footer-line::before,
.footer-line > svg {
  position: absolute;
  top: 0;
  left: 100%;
  width: 1563.6px;
  height: 1871.8px;
  transform-origin: 0 0;
}

.hero__line::before,
.footer-line::before {
  content: "";
  -webkit-mask: url(../img/hero-line.svg) no-repeat 0 0 / 100% 100%;
  mask: url(../img/hero-line.svg) no-repeat 0 0 / 100% 100%;
}

.hero__line::before,
.hero__line > svg {
  /* The parallax pair is written by blocks/hero/view.js. */
  transform: translate(
      calc(var(--hero-line-shift-x) + var(--hero-line-parallax-x)),
      calc(var(--hero-line-shift-y) + var(--hero-line-parallax-y))
    )
    scale(var(--hero-line-scale)) var(--hero-line-position);
}

.hero__line::before {
  background-color: var(--hero-line-color);
}

.hero--animated .hero__line::before {
  content: none;
}

/* base.css caps every svg at its parent's width, and the shape is wider than
   its box: capped, it shrinks and leaves its place. */
.hero__line > svg,
.footer-line > svg {
  max-width: none;
}

.hero__line > svg path {
  stroke: var(--hero-line-color);
}

.hero--line-1 {
  --hero-line-position: translate(-1242px, -220px) rotate(15deg);
}

.hero--line-2 {
  --hero-line-position: translate(295.3px, -608.5px) rotate(-40.5deg) scaleX(-1);
}

.hero--line-3 {
  --hero-line-position: translate(-218.3px, -715.9px) rotate(-64.88deg)
    scaleX(-1);
}

.hero--line-4 {
  --hero-line-position: translate(-1118px, -3.3px);
}

.hero--line-5 {
  --hero-line-position: translate(-277.9px, -724.1px) rotate(-79.99deg) scaleX(-1);
}

.hero--line-6 {
  --hero-line-position: translate(-489.6px, -675.4px) rotate(-78.16deg) scaleX(-1);
}

@media (min-width: 768px) {
  .hero__inner > * {
    max-width: 40%;
  }

  .hero--text-wide .hero__inner > * {
    max-width: 50%;
  }
}

@media (max-width: 1280px) {
  .hero {
    --hero-line-scale: 0.89;
  }
}

@media (max-width: 1024px) {
  .hero {
    --hero-line-scale: 0.71;
  }
}

@media (max-width: 900px) {
  .hero {
    --hero-line-shift-x: 80px;
  }

  .hero--line-4 {
    --hero-line-shift-x: 0px;
  }
}

/* Too narrow for text and line side by side: the line moves into a band of its
   own at the bottom, straight under the text, and each line is lifted to the
   top of that band. */
@media (max-width: 767px) {
  .hero {
    --hero-line-scale: 0.5;
    --hero-line-shift-x: 0px;
  }

  .hero--line-1 {
    --hero-line-shift-y: -35px;
  }

  .hero--line-2 {
    --hero-line-shift-y: -45px;
  }

  .hero--line-3 {
    --hero-line-shift-y: -64px;
  }

  .hero--line-5 {
    --hero-line-shift-y: -58px;
  }

  .hero--line-6 {
    --hero-line-shift-y: -38px;
  }

  .hero.hero--line-4 {
    --hero-line-shift-x: -170px;
  }

  .hero.has-line {
    padding-bottom: 0;
  }

  .hero__line {
    position: relative;
    inset: auto;
    display: block;
    height: var(--hero-line-band);
    margin-right: calc(var(--wp--style--root--padding-right) * -1);
    margin-left: calc(var(--wp--style--root--padding-left) * -1);
  }
}

/* The hero's opening: it plays once, on load, and with reduced motion the hero
   is simply there. The line's path is measured as 1 (pathLength in the SVG),
   so the dash values are fractions of it. */
@media (prefers-reduced-motion: no-preference) {
  .hero--animated .hero__line path {
    stroke-dasharray: 1;
    animation: line-draw 1.6s cubic-bezier(0.45, 0, 0.25, 1) both;
  }

  .hero--animated .hero__inner > * {
    animation: text-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }

  .hero--animated .hero__inner > :nth-child(2) {
    animation-delay: 0.32s;
  }

  .hero--animated .hero__inner > :nth-child(n + 3) {
    animation-delay: 0.44s;
  }
}

/* Starts part drawn — by default a quarter, the part of the first leg that is
   past the hero's edge whatever the line: drawing it would only delay what
   shows. */
@keyframes line-draw {
  from {
    stroke-dashoffset: var(--line-draw-from, 0.75);
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* Cards — news, products, team, tiles, expanding cards — rise one after
   another: assets/js/reveal.js numbers the cards that come into view together
   (--reveal-index, row by row, left to right), and a card inside a section
   that has its own entrance waits for the section's text (--reveal-base).
   data-reveal="children" makes a card of each child of the element that
   carries it, except a child with an entrance of its own. */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal [data-reveal="card"]:not(.is-revealed),
  .has-reveal [data-reveal="children"] > :not([data-reveal], .is-revealed) {
    opacity: 0;
  }

  [data-reveal="card"].is-revealed,
  [data-reveal="children"] > .is-revealed {
    animation: text-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1)
      calc(var(--reveal-base, 0s) + var(--reveal-index, 0) * 0.09s) both;
  }
}

@keyframes text-rise {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-rise, 28px));
  }
}

/* --------- Call to Action --------- */

/* z-index: the footer's line (layout.css) runs up through the CTA, under its text. */
.cta {
  padding-top: var(--wp--preset--spacing--60);
  padding-right: var(--wp--style--root--padding-right);
  padding-bottom: var(--wp--preset--spacing--60);
  padding-left: var(--wp--style--root--padding-left);
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--base);
}

.cta__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}

.cta__inner > * {
  max-width: 100%;
  margin-block: 0;
}

.cta__inner > * + * {
  margin-block-start: var(--wp--preset--spacing--50);
}

@media (min-width: 768px) {
  .cta__inner > * {
    max-width: var(--cta-text-width, 50%);
  }
}

.cta--text-60 {
  --cta-text-width: 60%;
}

.cta--text-70 {
  --cta-text-width: 70%;
}

/* Between 768 and 1023 the footer line runs closer to the text, and 70% runs
   into it. */
@media (max-width: 1023px) {
  .cta--text-70 {
    --cta-text-width: 60%;
  }
}

@media (max-width: 767px) {
  .cta__inner {
    text-align: center;
  }

  .cta__inner .wp-block-buttons {
    justify-content: center;
  }
}

/* The hero's rise, played as the band scrolls into view (assets/js/reveal.js
   sets the classes on .site-end; the footer's line is in layout.css). */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .site-end[data-reveal]:not(.is-revealed) .cta__inner > * {
    opacity: 0;
  }

  .site-end.is-revealed .cta__inner > * {
    animation: text-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
  }

  .site-end.is-revealed .cta__inner > :nth-child(n + 2) {
    animation-delay: 0.32s;
  }
}

/* --------- Tiles --------- */

.tiles {
  --tile-bg: var(--wp--preset--color--base);
  --tile-ink: var(--wp--preset--color--contrast);
  --tile-bg-active: var(--wp--preset--color--tertiary);
  --tile-ink-active: var(--wp--preset--color--contrast);
}

.tiles.is-style-dark {
  --tile-bg: var(--wp--preset--color--primary);
  --tile-ink: var(--wp--preset--color--base);
  --tile-bg-active: var(--wp--preset--color--secondary);
  --tile-ink-active: var(--wp--preset--color--contrast);
}

.tiles__grid {
  display: grid;
  grid-template-columns: repeat(var(--tiles-columns, 3), minmax(0, 219px));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Not a container query: with @container the grid in the editor canvas lost
   its columns and gap. The widths follow the image-and-text columns, which
   leave the text too narrow for three tiles below 1100 and stack at 781. */
@media (max-width: 1100px) {
  .tiles__grid {
    grid-template-columns: repeat(2, minmax(0, 219px));
  }
}

@media (max-width: 781px) {
  .tiles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  min-height: 137px;
  padding: 15px 19px 11px;
  border-radius: 12px;
  background-color: var(--tile-bg);
  color: var(--tile-ink);
  font-size: var(--wp--preset--font-size--normal);
  line-height: 1.2;
  text-align: left;
  transition: background-color 0.2s, color 0.2s;
}

.tile:hover,
.tile:focus-visible {
  background-color: var(--tile-bg-active);
  color: var(--tile-ink-active);
}

.tile__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background-color: currentColor;
  -webkit-mask: var(--tile-icon) no-repeat center / contain;
  mask: var(--tile-icon) no-repeat center / contain;
}

.tile__label {
  margin-top: 45px;
}

/* Editor only: the icon picker before an icon is chosen, and the popup text,
   which the editor shows under the selected tile. */
.tile__icon.is-empty,
.expand-card__icon.is-empty {
  background-color: transparent;
  outline: 1px dashed currentColor;
  -webkit-mask: none;
  mask: none;
  cursor: pointer;
}

.wp-block-e88-tile .tile__popup {
  display: none;
  width: 100%;
  margin-top: 12px;
  font-size: var(--wp--preset--font-size--small);
}

.wp-block-e88-tile.is-selected .tile__popup,
.wp-block-e88-tile.has-child-selected .tile__popup {
  display: block;
}

.tiles-popup__nav {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  gap: 30px;
  padding: 0 var(--popup-pad-x) var(--popup-pad-y);
}

.tiles-popup__prev,
.tiles-popup__next {
  display: flex;
  align-items: center;
  gap: 25px;
  color: inherit;
  font-size: var(--wp--preset--font-size--medium);
  text-align: left;
}

.tiles-popup__next {
  margin-left: auto;
  flex-direction: row-reverse;
  text-align: right;
}

.tiles-popup__prev::before,
.tiles-popup__next::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 18px;
  background-color: var(--popup-accent);
  -webkit-mask: url(../img/chevron-right.svg) no-repeat center / contain;
  mask: url(../img/chevron-right.svg) no-repeat center / contain;
  transition: transform 0.2s;
}

.tiles-popup__prev::before {
  transform: scaleX(-1);
}

.tiles-popup__prev:hover::before {
  transform: scaleX(-1) translateX(4px);
}

.tiles-popup__next:hover::before {
  transform: translateX(4px);
}

@media (max-width: 767px) {
  .tiles-popup__prev,
  .tiles-popup__next {
    gap: 12px;
    font-size: var(--wp--preset--font-size--normal);
  }
}

/* --------- Expanding cards --------- */

/* Two independent columns, not a grid: an open card pushes down only the
   cards under it, never its neighbour's row. */
.expand-cards {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.expand-cards__column {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 781px) {
  .expand-cards {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }
}

/* The open look is a set of variables, so that every way a card is open
   shares it: clicked (.is-open), and before any click the card picked in the
   editor (.is-default) or, in one column, the first card; in the editor, the
   picked one. Done in CSS rather
   than by the script, so a phone never shows the wrong card open first. */
.expand-card {
  --card-bg: var(--wp--preset--color--primary-dark);
  --card-ink: var(--wp--preset--color--base);
  --card-icon-color: var(--wp--preset--color--secondary);
  --card-rows: 0fr;
  --card-visibility: hidden;
  --card-visibility-delay: 0.4s;
  --card-opacity: 0;
  --card-offset: var(--card-shift, 0px);
  --card-cursor: pointer;
  padding: 22px 30px 30px;
  border-radius: 12px;
  background-color: var(--card-bg);
  color: var(--card-ink);
}

.expand-card.is-open,
.expand-cards-editor .expand-card.is-default {
  --card-bg: var(--wp--preset--color--secondary);
  --card-ink: var(--wp--preset--color--primary);
  --card-icon-color: currentColor;
  --card-rows: 1fr;
  --card-visibility: visible;
  --card-visibility-delay: 0s;
  --card-opacity: 1;
  --card-offset: 0px;
  --card-cursor: default;
}

@media (min-width: 782px) {
  .expand-cards--stack:not(.is-touched) .expand-card.is-default,
  .expand-cards--row:not(.is-touched) .expand-card.is-default {
    --card-bg: var(--wp--preset--color--secondary);
    --card-ink: var(--wp--preset--color--primary);
    --card-icon-color: currentColor;
    --card-rows: 1fr;
    --card-visibility: visible;
    --card-visibility-delay: 0s;
    --card-opacity: 1;
    --card-offset: 0px;
    --card-cursor: default;
  }
}

@media (max-width: 781px) {
  .expand-cards--stack:not(.is-touched) .expand-cards__column:first-child > .expand-card:first-child,
  .expand-cards--row:not(.is-touched) .expand-cards__row > .expand-card:first-child {
    --card-bg: var(--wp--preset--color--secondary);
    --card-ink: var(--wp--preset--color--primary);
    --card-icon-color: currentColor;
    --card-rows: 1fr;
    --card-visibility: visible;
    --card-visibility-delay: 0s;
    --card-opacity: 1;
    --card-offset: 0px;
    --card-cursor: default;
  }
}

li.expand-card,
li.expand-card .expand-card__head {
  cursor: var(--card-cursor);
}

.expand-card__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  color: inherit;
  text-align: left;
}

.expand-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background-color: var(--card-icon-color);
  -webkit-mask: var(--card-icon) no-repeat center / contain;
  mask: var(--card-icon) no-repeat center / contain;
}

.expand-card__label {
  margin-top: 60px;
  font-size: var(--wp--preset--font-size--medium-large);
  font-weight: 600;
  line-height: 1.2;
}

/* Collapsed to a zero-height grid row rather than display: none, so the
   height can be animated; visibility keeps the hidden text from screen
   readers and the tab order. */
.expand-card__body {
  display: grid;
  grid-template-rows: var(--card-rows);
  visibility: var(--card-visibility);
  opacity: var(--card-opacity);
}

.expand-card__text {
  min-height: 0;
  overflow: hidden;
  font-size: var(--wp--preset--font-size--normal);
  line-height: 1.4;
}

.expand-card__text > * {
  margin: 1em 0 0;
}

.expand-card__text > :first-child {
  margin-top: 18px;
}

/* Row: equal cards side by side. The text always takes its room — that is
   what keeps the card's height — and a closed card slides its title down
   over it by --card-shift, the text's height, set by view.js. */
.expand-cards__row {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(var(--expand-cards-columns, 2), minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.expand-cards--row .expand-card {
  --card-rows: 1fr;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.expand-cards--row .expand-card__head {
  flex-grow: 1;
  justify-content: space-between;
}

.expand-cards--row .expand-card__label,
.expand-cards--row .expand-card__body {
  transform: translateY(var(--card-offset));
}

/* Open: every card shows its text; hover only lights one up. */
.expand-cards--open .expand-card {
  --card-rows: 1fr;
  --card-visibility: visible;
  --card-opacity: 1;
  --card-offset: 0px;
  --card-cursor: default;
}

.expand-cards--open .expand-card:hover {
  --card-bg: var(--wp--preset--color--secondary);
  --card-ink: var(--wp--preset--color--primary);
  --card-icon-color: currentColor;
}

.expand-cards--open .expand-card__label {
  margin-bottom: 0;
}

@media (max-width: 781px) {
  .expand-cards__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .expand-card,
  .expand-card__icon {
    transition: background-color 0.3s, color 0.3s;
  }

  .expand-card__body {
    transition: grid-template-rows 0.4s ease, opacity 0.4s ease, transform 0.4s ease, visibility 0s var(--card-visibility-delay);
  }

  .expand-card__label {
    transition: transform 0.4s ease;
  }
}

@media (max-width: 781px) {
  .expand-card {
    padding: 20px 20px 25px;
  }

  .expand-card__icon {
    width: 40px;
    height: 40px;
  }

  .expand-card__label {
    margin-top: 30px;
  }
}

/* Editor only: the cards in the site's columns, each showing its text.
   --expand-cards-rows comes from index.js. When both columns are full, the
   add-card button would otherwise open a third one. */
.expand-cards-editor {
  display: grid;
  grid-template-columns: repeat(var(--expand-cards-columns, 2), minmax(0, 1fr));
  grid-template-rows: repeat(var(--expand-cards-rows, 1), auto);
  grid-auto-flow: column;
  align-items: start;
  gap: 7px 10px;
}

.expand-cards-editor.is-row {
  grid-template-rows: none;
  grid-auto-flow: row;
}

.expand-cards-editor > .block-list-appender {
  grid-row: -1 / span 1;
  grid-column: 1 / -1;
}

.wp-block-e88-expand-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wp-block-e88-expand-card .expand-card__text {
  width: 100%;
}

/* --------- Team --------- */

.team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1024px) {
  .team__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .team__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The card itself has no background: the photo and the name block are two
   rounded pieces, the name block tucked under the photo's rounded bottom. */
.team-card {
  --team-radius: 18px;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: var(--team-radius);
  color: var(--wp--preset--color--base);
  text-align: left;
  isolation: isolate;
}

.team-card__photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 385 / 371;
  border-radius: var(--team-radius);
  object-fit: cover;
  /* Cut for the popup, 385:477; the card shows its top, so a photo with
     little room above the head keeps the whole head. */
  object-position: 50% 0;
}

.team-card__text {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: 4px;
  margin-top: calc(var(--team-radius) * -1);
  padding: calc(25px + var(--team-radius)) 20px 30px;
  border-radius: 0 0 var(--team-radius) var(--team-radius);
  background-color: var(--wp--preset--color--primary-dark);
  line-height: 1.25;
  transition: background-color 0.2s, color 0.2s;
}

.team-card:hover .team-card__text,
.team-card:focus-visible .team-card__text {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--contrast);
}

.team-card__name {
  font-size: var(--wp--preset--font-size--large);
  font-weight: 500;
}

.team-card__position {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 300;
}

.team-popup__content {
  display: grid;
  grid-template-columns: 385px minmax(0, 1fr);
  gap: 50px;
  align-items: center;
  --popup-pad-y: var(--wp--preset--spacing--40);
  --popup-pad-x: var(--wp--preset--spacing--40);
}

.team-popup__photo img {
  width: 100%;
  aspect-ratio: 385 / 477;
  border-radius: 18px;
  object-fit: cover;
}

.team-popup__text {
  padding-right: 40px;
}

.team-popup .popup__title {
  padding-right: 0;
}

.team-popup__position {
  margin: 4px 0 0;
  font-size: var(--wp--preset--font-size--medium);
}

.team-popup__linkedin {
  display: block;
  width: 48px;
  height: 48px;
  margin-top: var(--wp--preset--spacing--40);
  background-color: currentColor;
  -webkit-mask: url(../img/lin.svg) no-repeat center / contain;
  mask: url(../img/lin.svg) no-repeat center / contain;
  transition: opacity 0.2s;
}

.team-popup__linkedin:hover {
  opacity: 0.8;
}

@media (max-width: 767px) {
  .team-popup__content {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--40);
    --popup-pad-x: var(--wp--preset--spacing--30);
    padding-top: 48px;
  }

  .team-popup__photo img {
    aspect-ratio: 1;
    object-position: 50% 0;
  }

  .team-popup__text {
    padding-right: 0;
  }
}

/* --------- List: two columns --------- */

.wp-block-list.is-style-two-columns {
  columns: 2;
  column-gap: 40px;
}

/* The list rhythm from theme.json (1rem above every item) would also push
   the second column's first item down out of line with the first. */
.wp-block-list.is-style-two-columns > li {
  margin-top: 0;
  line-height: 1.5;
  break-inside: avoid;
}

@media (max-width: 600px) {
  .wp-block-list.is-style-two-columns {
    columns: 1;
  }
}

/* --------- Underwriters --------- */

.underwriters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1024px) {
  .underwriters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .underwriters {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The photo and the text block are two rounded pieces, the text block tucked
   under the photo's rounded bottom — as on the team cards. */
.underwriter-card {
  --underwriter-radius: 18px;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--wp--preset--color--base);
  isolation: isolate;
}

.underwriter-card__photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 387 / 228;
  overflow: hidden;
  border-radius: var(--underwriter-radius);
  background-color: var(--wp--preset--color--primary);
}

.underwriter-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.underwriter-card__photo.is-female::before,
.underwriter-card__photo.is-male::before {
  content: "";
  position: absolute;
  inset: 10% 0 -5%;
  background-color: rgb(255 255 255 / 0.14);
  -webkit-mask: url(../img/silhouette-female.png) no-repeat center bottom / contain;
  mask: url(../img/silhouette-female.png) no-repeat center bottom / contain;
}

.underwriter-card__photo.is-male::before {
  -webkit-mask-image: url(../img/silhouette-male.png);
  mask-image: url(../img/silhouette-male.png);
}

.underwriter-card__text {
  flex-grow: 1;
  margin-top: calc(var(--underwriter-radius) * -1);
  padding: calc(25px + var(--underwriter-radius)) 20px 30px;
  border-radius: 0 0 var(--underwriter-radius) var(--underwriter-radius);
  background-color: var(--wp--preset--color--primary-dark);
  line-height: 1.25;
  transition: background-color 0.2s, color 0.2s;
}

.underwriter-card:hover .underwriter-card__text {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--contrast);
}

.underwriter-card__name {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium-large);
  font-weight: 500;
  line-height: 1.25;
}

.underwriter-card__position {
  margin: 4px 0 0;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 300;
}

.underwriter-card__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 22px 0 0;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 300;
}

.underwriter-card__contacts a {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.underwriter-card__contacts a:hover {
  text-decoration: underline;
}

/* --------- Downloads --------- */

.downloads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 220px));
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.download__link {
  display: block;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}

.download__tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 220 / 112;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background-color: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--base);
  transition: background-color 0.2s, color 0.2s;
}

.download__tile::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 55px;
  height: 55px;
  background-color: currentColor;
  -webkit-mask: url(../img/download.svg) no-repeat center / contain;
  mask: url(../img/download.svg) no-repeat center / contain;
}

.download__link:hover .download__tile {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--primary);
}

.download__label {
  display: block;
  margin-top: 14px;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  line-height: 1.3;
}

/* Editor only: the file picker before a file is chosen. */
.download__tile.is-empty {
  outline: 1px dashed var(--wp--preset--color--primary);
  background-color: transparent;
  color: var(--wp--preset--color--primary);
  cursor: pointer;
}

@media (max-width: 600px) {
  .downloads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }
}