/* ==========================================================================
   MadCo Glass - components.css
   Component construction follows the reference: bordered containers, 8px
   component radius, 12px media radius, no accent bars, no icon-in-circle
   grids, no nested cards, shadow only where a panel overlaps a different
   background.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   Primary is a yellow fill with a navy label. Yellow never carries text on
   white, and white never sits on teal at body size, so button color pairings
   are fixed here rather than chosen per instance.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: 0.875rem 1.375rem;
  /* No border on buttons. A 1px border plus a background means two painted
     boxes, and on a fractional layout position the browser can leave a hairline
     of the surface behind showing between them. Outline variants use an inset
     shadow instead, which paints inside the same box. */
  border: 0;
  border-radius: var(--radius-control);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-base),
              box-shadow var(--transition-base),
              color var(--transition-base);
}

.btn-icon {
  font-size: 0.875em;
  line-height: 1;
  transition: transform var(--transition-base);
}

.btn:hover .btn-icon { transform: translate(2px, -2px); }

.btn-primary {
  background-color: var(--color-yellow);
  color: var(--color-navy);
}

.btn-primary:hover {
  background-color: var(--color-navy);
  color: var(--color-yellow);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-navy);
  box-shadow: inset 0 0 0 1px var(--color-navy);
}

.btn-secondary:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.btn-teal {
  background-color: var(--color-teal);
  color: var(--color-white);
  /* White on teal is 4.42:1. Bold 0.9375rem clears the large text threshold
     only at 700 weight, so this variant is locked to bold and is never used
     for body-size text. */
}

.btn-teal:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.surface-dark .btn-secondary {
  color: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-muted-invert);
}

.surface-dark .btn-secondary:hover {
  background-color: var(--color-white);
  color: var(--color-navy);
  box-shadow: inset 0 0 0 1px var(--color-white);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Site header
   Utility bar, then logo left, anchor nav, filled button right. Sticky.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  border-bottom: var(--border-hairline) solid var(--color-border);
}

/* The dropdown panel is positioned against the header, not the header bar, so
   it spans the full viewport width rather than the container. */
.site-header > .container { position: relative; }

.utility-bar {
  background-color: var(--color-navy);
  color: var(--color-white);
  font-size: 0.8125rem;
}

.utility-bar .container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding-block: 0.375rem;
  text-align: center;
}

/* The address is the first thing to go on a narrow screen. Keeping it forced
   the bar to two or three lines and made the header enormous on a phone. */
.utility-bar .utility-item-address { display: none; }

@media (min-width: 768px) {
  .utility-bar .container { justify-content: space-between; text-align: left; }
  .utility-bar .utility-item-address { display: inline-flex; }
  .utility-bar .container { padding-block: 0.5rem; }
}

.utility-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-white);
  text-decoration: none;
}

.utility-item:hover { color: var(--color-aqua); }

.header-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.5rem;
}

@media (min-width: 1024px) {
  .header-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding-block: 0.5rem;
    gap: var(--space-md);
  }

  .header-bar .primary-nav { justify-self: center; }
}

.site-logo { display: inline-flex; line-height: 0; }

/* The wordmark is a near square SVG, so height is the dimension that decides
   how tall the header is. Sizing by width made a 104px logo a 104px tall row. */
.site-logo img { height: 42px; width: auto; }

@media (min-width: 768px) {
  .site-logo img { height: 50px; }
}

@media (min-width: 1024px) {
  .site-logo img { height: 88px; }
}

@media (min-width: 1280px) {
  .site-logo img { height: 96px; }
}

.header-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-xs);
  margin-left: auto;
}

@media (min-width: 1024px) {
  .header-actions { gap: var(--space-md); margin-left: 0; }
}

/* The header action button is compact until there is room for it. On a phone a
   full size button beside the logo and the toggle is what pushed the row to
   wrap in the first place. */
.header-actions .btn {
  min-height: 44px;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .header-actions .btn { padding: 0.75rem 1.25rem; font-size: 0.9375rem; }
}

/* Nav ---------------------------------------------------------------------- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background-color: transparent;
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-navy);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle-icon { position: relative; }

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }

.nav-toggle[aria-expanded='true'] .nav-toggle-icon { background-color: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle-icon::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

.nav-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-md);
}

.nav-list--open { display: block; }

.nav-link {
  display: block;
  padding: 0.75rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-navy);
  text-decoration: none;
  border-bottom: var(--border-hairline) solid var(--color-border);
}

.nav-link:hover,
.nav-link.is-active { color: var(--color-teal-text); }

@media (min-width: 1024px) {
  .nav-toggle { display: none; }

  .nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: 0;
  }

  .nav-link {
    /* Padding is on every link, active or not, so the marker has room to sit
       without the row shifting when the active state moves. */
    padding: 0.25rem 0 0.5rem;
    border-bottom: 0;
  }

  /* Same hand drawn stroke as the heading accent, from the same token. */
  .nav-link.is-active {
    background-image: var(--marker-teal);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.5em;
  }
}

@media (max-width: 1023px) {
  .primary-nav { position: static; }

  .nav-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 90;
    background-color: var(--color-white);
    border-bottom: var(--border-hairline) solid var(--color-border);
    box-shadow: var(--shadow-overlap);
    padding: var(--space-xs) var(--container-pad) var(--space-md);
    max-height: 70dvh;
    overflow-y: auto;
  }
}

/* --------------------------------------------------------------------------
   Hero
   A full bleed two panel banner, not a contained split. The photo runs to the
   viewport edge with no radius and fills the panel height. The copy panel sits
   flush against it with a hard vertical edge between them, which is what the
   reference does and what a contained image with rounded corners does not.
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
}

.hero-panel {
  /* Navy carries all the copy. The teal only reaches the far corner, well past
     the text column, so body copy never sits on a surface it fails against. */
  background-image: linear-gradient(115deg,
    var(--color-navy) 0%,
    var(--color-navy) 52%,
    var(--color-teal) 165%);
  display: flex;
  align-items: center;
  padding: 3rem var(--container-pad);
}

.hero-panel-inner { max-width: 36rem; }

.hero-photo { min-height: 260px; }

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.hero-heading {
  margin-bottom: var(--space-md);
  font-size: clamp(2.25rem, 5.4vw, 3.75rem);
}

.hero-lead {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-white);
  max-width: 44ch;
  margin-bottom: var(--space-sm);
}

.hero-support {
  color: var(--color-invert-soft);
  max-width: 48ch;
  font-size: 1rem;
}

/* White fill against the dark panel, mirroring the reference's primary action.
   Yellow is held back for the rest of the page so the hero action reads as the
   single strongest thing on the screen. */
.btn-hero {
  background-color: var(--color-white);
  color: var(--color-navy);
}

.btn-hero:hover {
  background-color: var(--color-yellow);
  color: var(--color-navy);
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.02fr 1fr;
    min-height: 34rem;
  }

  .hero-photo { min-height: 100%; }

  .hero-panel {
    /* Aligns the copy with the site container without wrapping the panel in
       one, so the background still bleeds to the left viewport edge. */
    padding-block: 4rem;
    padding-inline-start: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
    padding-inline-end: 3rem;
  }
}

@media (min-width: 1280px) {
  .hero { min-height: 38rem; }
}

/* --------------------------------------------------------------------------
   Trust strip
   A single full bleed strip. Static, not scrolling.
   -------------------------------------------------------------------------- */

.trust-strip {
  position: relative;
  background-color: var(--color-yellow);
  overflow: hidden;
}

.trust-strip-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.14;
}

.trust-strip .container { position: relative; }

.trust-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm) var(--space-xl);
  list-style: none;
  margin: 0;
  padding-block: 1.125rem;
}

.trust-list li {
  color: var(--color-navy);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Service grid cells
   Cells lead with a numeral, not an icon. Shared hairline borders.
   -------------------------------------------------------------------------- */

.service-cell {
  padding: var(--space-lg);
  border-top: var(--border-hairline) solid var(--color-border);
  border-left: var(--border-hairline) solid var(--color-border);
}

.service-cell:first-child { border-top: 0; border-left: 0; }

@media (min-width: 640px) {
  .service-cell:nth-child(-n + 2) { border-top: 0; }
  .service-cell:nth-child(odd) { border-left: 0; }
  .service-cell:nth-child(even) { border-left: var(--border-hairline) solid var(--color-border); }
}

@media (min-width: 1024px) {
  .service-cell { border-top: var(--border-hairline) solid var(--color-border); border-left: var(--border-hairline) solid var(--color-border); }
  .service-cell:nth-child(-n + 4) { border-top: 0; }
  .service-cell:nth-child(4n + 1) { border-left: 0; }
}

.service-cell-lead {
  background-color: var(--color-teal);
}

.service-cell-lead .service-cell-number,
.service-cell-lead .service-cell-title { color: var(--color-white); }

.service-cell-lead .service-cell-copy { color: var(--color-white); }

.service-cell-number {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-teal-text);
  margin-bottom: var(--space-xs);
}

.service-cell-title {
  font-size: 1.0625rem;
  font-weight: 700;
  font-family: var(--font-display);
  font-variation-settings: var(--fraunces-axes);
  margin-bottom: var(--space-2xs);
  color: var(--color-navy);
}

.service-cell-copy {
  font-size: 0.9375rem;
  margin-bottom: 0;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Check list
   A small filled circle check at the line start. One benefit per line.
   -------------------------------------------------------------------------- */

.check-list {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
}

.check-list li {
  position: relative;
  padding-left: 1.875rem;
  margin-bottom: var(--space-xs);
  font-size: 0.9375rem;
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  /* Centered on the first line box rather than nudged by eye.
     Line box is 1.7em, icon is 18px, so the offset is half the difference. */
  top: calc((1.7em - 18px) / 2);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.surface-dark .check-list li::before { background-color: var(--color-aqua); }

/* --------------------------------------------------------------------------
   Expectation cards
   -------------------------------------------------------------------------- */

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

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

.card {
  background-color: var(--color-white);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-component);
  padding: var(--space-lg);
}

.card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-2xs);
  color: var(--color-navy);
}

.card p { font-size: 0.9375rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery-item {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-media);
  overflow: hidden;
  line-height: 0;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 400ms ease-out;
}

.gallery-item:hover img { transform: scale(1.04); }

.gallery-note {
  font-size: 0.875rem;
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

/* Lightbox ----------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background-color: rgba(2, 41, 70, 0.92);
}

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

.lightbox-figure {
  margin: 0;
  max-width: 1100px;
  width: 100%;
}

.lightbox-figure img {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-media);
}

.lightbox-caption {
  color: var(--color-white);
  font-size: 0.875rem;
  text-align: center;
  margin-top: var(--space-md);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  background-color: var(--color-white);
  color: var(--color-navy);
  border: 0;
  border-radius: var(--radius-control);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
}

.lightbox-close { top: var(--space-lg); right: var(--space-lg); }
.lightbox-prev { left: var(--space-lg); }
.lightbox-next { right: var(--space-lg); }

.lightbox-nav { top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.form-panel {
  background-color: var(--color-bg-alt);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-component);
  padding: var(--space-xl);
}

/* Inputs stay white so the fields read as fields against the panel fill. */
.form-panel .form-input,
.form-panel .form-file { background-color: var(--color-white); }

/* Kept scoped in case the panel is ever moved back onto a dark section: without
   these it would inherit the inverted text color and the hint copy would be
   near invisible on the white panel. */
.surface-dark .form-panel p,
.surface-dark .form-panel li,
.surface-dark .form-panel label { color: var(--color-text-muted); }

.surface-dark .form-panel .form-label { color: var(--color-navy); }
.surface-dark .form-panel .form-message { color: var(--color-navy); }

.form-field { display: flex; flex-direction: column; }

.form-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-navy);
  margin-bottom: 0.375rem;
}

.form-required { color: var(--color-teal-text); }

.form-input,
.form-file {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-navy);
  background-color: var(--color-white);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-control);
}

.form-input:focus-visible,
.form-file:focus-visible { border-color: var(--color-teal); }

.form-hint {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0.375rem 0 0;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-message {
  border: var(--border-hairline) solid var(--color-teal);
  border-radius: var(--radius-control);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: 0.9375rem;
  color: var(--color-navy);
  background-color: var(--color-white);
}

/* Contact panel ------------------------------------------------------------ */

.contact-detail {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: 1.0625rem;
}

.contact-detail .icon { color: var(--color-teal); }

.surface-dark .contact-detail .icon { color: var(--color-aqua); }

.contact-detail-address { align-items: flex-start; }
.contact-detail-address .icon { margin-top: 0.28em; }

/* Navy rather than the teal link color: teal text on the grey surface is
   3.55:1 and fails. */
.contact-detail a { color: var(--color-navy); }
.contact-detail a:hover { color: var(--color-teal-text-grey); }

.surface-dark .contact-detail a { color: var(--color-white); }
.surface-dark .contact-detail a:hover { color: var(--color-aqua); }

/* --------------------------------------------------------------------------
   Closing CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
}

.cta-band-media {
  display: none;
}

@media (min-width: 1024px) {
  .cta-band-media {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 44%;
    height: 100%;
  }

  .cta-band-media img { width: 100%; height: 100%; object-fit: cover; }

  .cta-band-copy { max-width: 52%; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background-color: var(--color-navy-deep);
  color: var(--color-white);
}

.site-footer .container { padding-block: var(--space-2xl); }

.footer-logo img { width: 176px; }

.footer-intro {
  color: var(--color-invert-soft);
  font-size: 0.9375rem;
  max-width: 34ch;
}

.footer-brand .social-link { margin-top: var(--space-xs); }

.footer-heading {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-aqua);
  margin-bottom: var(--space-md);
}

.footer-list { list-style: none; margin: 0; padding: 0; }

.footer-list li {
  margin-bottom: var(--space-xs);
  color: var(--color-invert-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.footer-list a {
  color: var(--color-invert-soft);
  text-decoration: none;
  font-size: 0.9375rem;
}

.footer-list a:hover { color: var(--color-white); text-decoration: underline; }

.footer-list-contact li { margin-bottom: var(--space-md); }

.footer-bar {
  border-top: var(--border-hairline) solid rgba(159, 186, 203, 0.22);
}

.footer-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-md);
}

.footer-bar p { margin: 0; font-size: 0.8125rem; color: var(--color-muted-invert); }

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: var(--border-hairline) solid rgba(159, 186, 203, 0.4);
  border-radius: var(--radius-control);
  color: var(--color-white);
}

.social-link:hover { border-color: var(--color-aqua); color: var(--color-aqua); }

/* Border resets for the three column grid variant --------------------------
   Written explicitly per variant rather than left to inherit, because the
   four column rules above would leave stray borders on a three column grid. */

@media (min-width: 1024px) {
  .service-grid-3 .service-cell {
    border-top: var(--border-hairline) solid var(--color-border);
    border-left: var(--border-hairline) solid var(--color-border);
  }

  .service-grid-3 .service-cell:nth-child(-n + 3) { border-top: 0; }
  .service-grid-3 .service-cell:nth-child(4n + 1) { border-left: var(--border-hairline) solid var(--color-border); }
  .service-grid-3 .service-cell:nth-child(3n + 1) { border-left: 0; }
}

.btn-group-centered { justify-content: center; }

/* Scroll lock while the gallery viewer is open. Set by gallery.js as a class
   rather than an inline style so all styling stays in the stylesheets. */
.is-lightbox-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Icons
   Outline SVGs inheriting currentColor. Sizes are fixed here rather than per
   instance so an icon never sets its own dimensions.
   -------------------------------------------------------------------------- */

.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.icon-sm { width: 16px; height: 16px; }
.icon-btn { width: 18px; height: 18px; }

.utility-item .icon-sm { margin-top: -1px; }

/* Service grid icons replace the numerals. Teal on light cells, white on the
   filled lead cell, matching the inversion rule for that cell. */
.service-cell-icon {
  width: 28px;
  height: 28px;
  color: var(--color-teal);
  margin-bottom: var(--space-sm);
}

.service-cell-lead .service-cell-icon { color: var(--color-white); }

/* --------------------------------------------------------------------------
   Compact header on scroll
   The utility bar collapses and the logo steps down, so the sticky header
   gives back vertical space once the visitor is past the hero.
   -------------------------------------------------------------------------- */

.site-header .utility-bar {
  overflow: hidden;
  max-height: 4rem;
  transition: max-height var(--transition-base), opacity var(--transition-base);
}

.site-logo img,
.header-bar {
  transition: height var(--transition-base), padding var(--transition-base);
}

.site-header--compact .utility-bar {
  max-height: 0;
  opacity: 0;
}

.site-header--compact .header-bar { padding-block: 0.25rem; }

.site-header--compact .site-logo img { height: 34px; }

@media (min-width: 1024px) {
  .site-header--compact .header-bar { padding-block: 0.375rem; }
  .site-header--compact .site-logo img { height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .utility-bar,
  .site-logo img,
  .header-bar { transition: none; }
}

/* --------------------------------------------------------------------------
   Heading accent
   A second color inside a heading. Aqua is 7.71:1 on navy, so it is safe at
   display size on the dark hero panel. It is never used on white or grey,
   where aqua fails at any size.
   -------------------------------------------------------------------------- */

.heading-accent { color: var(--color-aqua); }

/* --------------------------------------------------------------------------
   Brand panel
   The wordmark used as the media element in the introduction split, so the
   section has a left aligned copy column and something to sit beside it.
   -------------------------------------------------------------------------- */

.brand-panel {
  padding: 0;
  text-align: center;
}

.brand-panel img {
  width: 100%;
  max-width: 340px;
  height: auto;
  margin-inline: auto;
}

.brand-panel-caption {
  margin: var(--space-lg) auto 0;
  max-width: 30ch;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   Marker underline
   A hand drawn looking stroke under a word inside a heading. Two overlapping
   passes, the second lighter, which is what a marker actually leaves behind.
   Drawn as an SVG background rather than a border so it can curve and taper.
   preserveAspectRatio is none so the stroke stretches to the word width
   instead of being cropped.

   Purely decorative. It carries no meaning, so nothing is lost if a browser
   fails to paint it.
   -------------------------------------------------------------------------- */

.marker-underline {
  background-image: var(--marker-teal);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.34em;
  padding-bottom: 0.12em;
}

/* Teal is invisible against navy, so dark surfaces use the aqua stroke. */
.surface-dark .marker-underline {
  background-image: var(--marker-aqua);
}