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

.container--narrow {
  max-width: 960px;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  padding-block: var(--section-pad);
  position: relative;
}

.section--tight {
  padding-block: clamp(40px, 5vw, 80px);
}

/* The hero's seal reaches 58px into whatever follows it. */
.section--under-seal {
  padding-top: clamp(104px, 9vw, 140px);
}

/* For a band that sits directly above another section: the next section's
   own top padding already supplies the separation. */
.section--flush-bottom {
  padding-bottom: 0;
}

.section--surface {
  background-color: var(--c-surface);
}

/* Navy is the brand's own dark; it opens the page on the hero and returns
   once, low down, to close the argument before the CTA. */
.section--navy {
  background-color: var(--c-navy);
  color: var(--c-invert);
}

/* A band that carries a photograph under it: the image is held back by a
   navy scrim so the type keeps its contrast, and the section behaves like
   any other dark band above it. */
.section--photo {
  position: relative;
  background-color: var(--c-navy);
  color: var(--c-invert);
  overflow: hidden;
}

.section__photo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.section__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(3, 24, 71, 0.92) 0%,
    rgba(3, 24, 71, 0.72) 45%, rgba(3, 24, 71, 0.55) 100%);
}

/* Graphite is the mid-page dark band. */
.section--graphite {
  background-color: var(--c-graphite);
  color: var(--c-invert);
}

/* A hairline grid, barely there, that keeps the dark bands from
   reading as flat blocks of ink */
.section--navy::before,
.section--graphite::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 88px 100%;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000, transparent);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000, transparent);
}

.section > .container {
  position: relative;
  z-index: 1;
}

.section--photo p,
.section--navy p,
.section--graphite p {
  color: var(--c-invert-70);
}

.section--photo .section__title,
.section--navy .section__title,
.section--graphite .section__title {
  color: var(--c-invert);
}

.section--photo .section__lead,
.section--navy .section__lead,
.section--graphite .section__lead {
  color: var(--c-invert-70);
}

/* ---- Section header ---- */
.section__header {
  max-width: 800px;
  margin-bottom: clamp(28px, 5vw, 64px);
}

.section__header--center {
  margin-inline: auto;
  text-align: center;
}

.section__header--center .section__eyebrow {
  justify-content: center;
}

.section__header--center .section__lead {
  margin-inline: auto;
}

/* Header that puts the title and a side action on one line, the way
   the reference decks do — stops every section opening identically */
.section__header--row {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

.section__header--row .section__headings {
  max-width: 800px;
}

.section__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: var(--space-4);
}

.section__eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background-color: var(--c-orange);
  flex: 0 0 auto;
}

.section__title {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-4);
}

.section__lead {
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--c-muted);
  max-width: 62ch;
}

/* ============================================================
   HEADER

   Nav rides in a floating capsule rather than sitting as a bare row of
   underlined links — the device the reference headers use. The brand mark
   ships in two files because the logo's body is navy and its wordmark is
   black, so the supplied artwork disappears on a dark bar.
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}

.site-header.is-stuck {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--c-line);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 84px;
  gap: var(--space-4);
}

/* Equal side tracks: the brand and the actions occupy mirrored containers,
   so the capsule between them is centred on the page, not on the leftover
   space. The bar keeps one height through the scroll state change — the old
   shrink was what made the row jump. */
.header__slot {
  display: flex;
  align-items: center;
  min-width: 0;
}

.header__slot--end {
  justify-content: flex-end;
  gap: var(--space-4);
}

/* ---- Brand ---- */
.header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--c-invert);
  flex: 0 0 auto;
}

.header__mark {
  position: relative;
  display: block;
  width: 34px;
  height: 45px;
  flex: 0 0 auto;
}

.header__mark-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.35s var(--ease);
}

.header__mark-img--dark { opacity: 0; }
.is-stuck .header__mark-img--light { opacity: 0; }
.is-stuck .header__mark-img--dark { opacity: 1; }

.header__logotext {
  display: block;
  width: clamp(96px, 9vw, 124px);
  aspect-ratio: 1030 / 340;
  background-color: var(--c-invert);
  -webkit-mask: url(../images/logo-text.svg) no-repeat center / contain;
  mask: url(../images/logo-text.svg) no-repeat center / contain;
  transition: background-color 0.35s var(--ease);
}

.is-stuck .header__logotext {
  background-color: var(--c-navy);
}

/* ---- Nav capsule ---- */
.header__nav {
  display: flex;
  align-items: center;
  height: 48px;
  gap: 2px;
  padding: 5px;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.is-stuck .header__nav {
  background-color: var(--c-surface);
  border-color: var(--c-line);
}

.header__link {
  padding: 9px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--c-invert-70);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.header__link:hover {
  color: var(--c-invert);
  background-color: rgba(255, 255, 255, 0.12);
}

.header__link.is-active {
  color: #ffffff;
  background-color: var(--c-orange);
}

.is-stuck .header__link {
  color: var(--c-muted);
}

.is-stuck .header__link:hover {
  color: var(--c-navy);
  background-color: rgba(3, 24, 71, 0.06);
}

.is-stuck .header__link.is-active {
  color: #ffffff;
  background-color: var(--c-orange);
}

/* ---- Right-hand actions ---- */
.header__actions {
  display: none;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
}

/* The CTA matches the nav capsule exactly — same height, same pill. */
.header__cta {
  min-height: 48px;
  height: 48px;
  padding: 5px 5px 5px var(--space-4);
}

.header__cta .btn__badge {
  width: 38px;
  height: 38px;
}

/* ---- Floating dial ---- */
.phone-fab {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: calc(var(--z-header) - 1);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 60px;
  padding: 6px 6px;
  border-radius: var(--radius-pill);
  background-color: var(--c-orange-2);
  color: #ffffff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.94);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s var(--ease), background-color 0.2s var(--ease);
}

.phone-fab.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.phone-fab:hover {
  background-color: #c96208;
}

.phone-fab__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.16);
}

.phone-fab__disc .icon {
  width: 22px;
  height: 22px;
}

/* The number is a desktop affordance; on a phone the icon is the whole
   control and the label would eat the screen edge. */
.phone-fab__number {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding-right: var(--space-4);
}

@media (min-width: 768px) {
  .phone-fab__number {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone-fab {
    transition: opacity 0.2s linear, visibility 0.2s linear;
    transform: none;
  }
}

/* ---- Burger ---- */
.header__nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
}

.header__nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--c-invert);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease),
    background-color 0.35s var(--ease);
}

.is-stuck .header__nav-toggle span {
  background-color: var(--c-navy);
}

.header__nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.header__nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   HERO

   Full-bleed footage with the copy anchored to the bottom-left and the
   scrim run on the diagonal, so the top-right of the frame stays open and
   the video is actually visible there. Previously the copy sat in a
   vertically-centred column under an even wash, which both hid the footage
   and left the whole right half of the screen doing nothing.
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100svh - 84px);
  display: flex;
  align-items: flex-end;
  background-color: var(--c-navy);
  color: var(--c-invert);
  padding-top: calc(84px + var(--space-6));
  padding-bottom: var(--space-9);
  /* No overflow:hidden and no isolation here — both would clip or bury the
     seal that hangs past the bottom edge. .hero__bg does the clipping. */
  z-index: 1;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__media-layer {
  position: absolute;
  inset: -14% 0;
  will-change: transform;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Diagonal scrim: heavy in the bottom-left where the copy sits, clearing
   toward the top-right so the footage reads. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
  115deg,
  rgba(3, 24, 71, 0.82) 0%,
  rgba(3, 24, 71, 0.68) 34%,
  rgba(3, 24, 71, 0.28) 62%,
  rgba(3, 24, 71, 0.12) 100%
),
linear-gradient(
  to top,
  rgba(3, 24, 71, 0.72) 0%,
  rgba(3, 24, 71, 0) 46%
),
linear-gradient(
  to bottom,
  rgba(3, 24, 71, 0.62) 0%,
  rgba(3, 24, 71, 0) 24%
);
}

/* Faint structural rules, the grid the reference heroes lay over their art */
.hero__rules {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 66%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 66%, transparent);
}

/* Outlined wordmark in the open top-right, opposite the copy — the two sit
   on a diagonal rather than stacking in one column. */
.hero__ghost {
  position: absolute;
  right: -0.07em;
  top: 16%;
  font-family: var(--font-display);
  font-size: clamp(140px, 19vw, 280px);
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.15);
  white-space: nowrap;
  user-select: none;
}

.hero__grid {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__copy {
  max-width: 660px;
}

.hero__title {
  font-size: clamp(38px, 5.2vw, 72px);
  color: var(--c-invert);
  margin-bottom: var(--space-5);
}

/* The editor wraps the headline in a paragraph. That tag brings its own
   serif and a 1em margin, which knocks the type off the display face and
   opens a gap the hero was not drawn with. */
.hero__title p {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.hero__title .accent {
  color: var(--c-orange);
}

.hero__lead {
  font-size: var(--font-size-md);
  line-height: 1.65;
  color: var(--c-invert-70);
  max-width: 52ch;
  margin-bottom: var(--space-6);
}

.hero__lead strong {
  color: var(--c-invert);
  font-weight: 600;
}

/* Same editor paragraph, once it can no longer nest inside .hero__lead.
   Keep it on the lead colour and measure so it does not fall back to body
   type on the photograph. */
.hero__copy > p:not(.hero__lead) {
  margin: 0 0 var(--space-6);
  font-size: var(--font-size-md);
  line-height: 1.65;
  color: var(--c-invert-70);
  max-width: 52ch;
}

.hero__copy > p:not(.hero__lead) strong {
  color: var(--c-invert);
  font-weight: 600;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Rotating seal, borrowed from the stamp on a bill of lading. Sits on the
   seam at the right, the way the reference badge hangs off its hero. */
.hero__seal {
  position: absolute;
  right: clamp(24px, 7vw, 120px);
  bottom: 0;
  z-index: 4;
  transform: translateY(50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background-color: var(--c-graphite);
  border: 4px solid #ffffff;
  box-shadow: 0 12px 34px rgba(3, 24, 71, 0.35);
  color: var(--c-invert);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.hero__seal:hover {
  background-color: var(--c-orange);
  border-color: transparent;
}

.hero__seal-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin 22s linear infinite;
}

.hero__seal-ring text {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.3px;
  fill: rgba(255, 255, 255, 0.92);
  text-transform: uppercase;
}

.hero__seal:hover .hero__seal-ring text {
  fill: rgba(255, 255, 255, 0.9);
}

.hero__seal .hero__seal-icon {
  width: 44px;
  height: 44px;
  color: var(--c-orange);
}

.hero__seal:hover .hero__seal-icon {
  color: #ffffff;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   GRIDS
   ============================================================ */
.grid {
  display: grid;
  gap: var(--space-4);
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: stretch;
}

/* The prose column is much shorter than the figure; centring it turns the
   leftover height into balanced margin instead of a hole under the text. */
.split .prose {
  align-self: center;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--c-graphite);
  color: var(--c-invert);
  padding-block: var(--space-8) var(--space-6);
  position: relative;
  overflow: hidden;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.footer__logo-mark {
  width: 62px;
  height: 82px;
  flex: 0 0 auto;
}

.footer__logo-text {
  display: block;
  width: 196px;
  aspect-ratio: 1030 / 340;
  background-color: var(--c-invert);
  -webkit-mask: url(../images/logo-text.svg) no-repeat center / contain;
  mask: url(../images/logo-text.svg) no-repeat center / contain;
}

.footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: var(--space-4);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--c-invert-70);
}

.footer__contact a {
  color: var(--c-invert);
  transition: color 0.2s var(--ease);
}

.footer__contact a:hover {
  color: var(--c-orange);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
}

.footer__links a {
  color: var(--c-invert-70);
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}

.footer__links a:hover {
  color: var(--c-orange);
  padding-left: 4px;
}

/* Oversized wordmark bled off the bottom, as in the reference footers */
.footer__credit {
  margin-top: var(--space-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--c-invert-50);
  border-top: 1px solid var(--c-invert-line);
  margin-top: var(--space-5);
  width: 100%;
  padding-top: var(--space-4);
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */
@media (min-width: 768px) {
  .split {
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(40px, 5vw, 96px);
  }

  .grid--2,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Three columns at 768 leaves the wordmark wider than its track.
     Brand spans the row; the two link columns sit beside each other. */
  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .footer__inner > :first-child {
    grid-column: 1 / -1;
  }

}

@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: stretch;
  }

  .footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--space-7);
  }

  .footer__inner > :first-child {
    grid-column: auto;
  }

  .header__actions {
    display: flex;
  }

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .header__nav-toggle {
    display: none;
  }

}

/* Below the desktop breakpoint the hero has to grow with its content —
   a fixed 100svh box would push the copy and the deck out under the
   transparent header. */
@media (max-width: 767px) {
  /* Phone space and type tokens are smaller now, but the hero keeps the
     sizes it was drawn at — the wordmark, headline and seal are one piece. */
  .hero {
    padding-top: calc(84px + 48px);
    padding-bottom: 64px;
  }

  .hero__seal {
    width: 108px;
    height: 108px;
    border-width: 3px;
  }

  .hero__seal-ring text {
    font-size: 13px;
  }

  .hero__seal .hero__seal-icon {
    width: 36px;
    height: 36px;
  }

  .hero__title {
    max-width: none;
    font-size: clamp(38px, 5.2vw, 72px);
    margin-bottom: 32px;
  }

  .hero__lead {
    font-size: 18px;
    margin-bottom: 48px;
  }

  .hero__actions {
    gap: 16px;
  }

  .hero .btn {
    min-height: 54px;
  }

  .hero .btn--badge {
    padding: 6px 6px 6px 32px;
    gap: 32px;
  }

  .hero .btn--ghost {
    min-height: 56px;
    padding-inline: 48px;
  }

  /* On a narrow column the wordmark runs straight behind the lead, so it
     drops back further here than it does on desktop. */
  .hero__ghost {
    top: 46%;
    font-size: clamp(140px, 19vw, 280px);
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.08);
  }

  .hero__rules {
    background-size: calc(100% / 3) 100%;
  }

  .cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1023px) {
  /* The capsule leaves the grid when it becomes a drawer. Two tracks keep
     the brand on the left and the toggle on the right — three tracks parked
     the toggle in the empty middle column beside the logo. */
  .header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .header__nav-toggle {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
  }

  /* The bar and the drawer should read as one navy panel once the menu is
     open, including over the light stuck state. */
  .site-header:has(.header__nav.is-open) {
    background-color: var(--c-navy);
    border-bottom-color: transparent;
    box-shadow: none;
  }

  .site-header:has(.header__nav.is-open) .header__logotext {
    background-color: var(--c-invert);
  }

  .site-header:has(.header__nav.is-open) .header__mark-img--light {
    opacity: 1;
  }

  .site-header:has(.header__nav.is-open) .header__mark-img--dark {
    opacity: 0;
  }

  .site-header:has(.header__nav.is-open) .header__nav-toggle span {
    background-color: var(--c-invert);
  }

  /* Below the desktop breakpoint the capsule unrolls into a full-width
     drawer, so it drops the pill background, the fixed 48px height, and the
     border. */
  .header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: var(--space-3) var(--container-pad) var(--space-5);
    background-color: var(--c-navy);
    border: none;
    border-bottom: 1px solid var(--c-invert-line);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: none;
  }

  .is-stuck .header__nav {
    background-color: var(--c-navy);
    border-color: var(--c-invert-line);
  }

  .header__nav.is-open {
    display: flex;
  }

  .header__nav .header__link,
  .is-stuck .header__nav .header__link {
    width: 100%;
    color: var(--c-invert-70);
    padding: var(--space-3);
    border-radius: var(--radius-md);
  }

  .header__nav .header__link:hover,
  .is-stuck .header__nav .header__link:hover {
    color: var(--c-invert);
    background-color: rgba(255, 255, 255, 0.08);
  }

  .header__nav .header__link.is-active,
  .is-stuck .header__nav .header__link.is-active {
    color: #ffffff;
    background-color: var(--c-orange);
  }
}