/* Page components. Each block is ported verbatim from the matching
   Astro component's scoped <style>. Do not restyle: these carry the
   design contract. */


/* ===== AnswerCapsule ===== */
/*
   * This is the lead paragraph, so it earns its emphasis from typography
   * rather than from a decorative rule: larger editorial serif, a generous
   * measure, and enough space around it to sit apart from the body copy.
   */
  .capsule {
    max-width: 46ch;
  }

  .capsule p {
    font-family: var(--msc-font-editorial);
    font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
    line-height: 1.45;
    text-wrap: pretty;
  }


/* ===== TrustBar ===== */
.trustbar__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--msc-space-lg);
    margin: 0;
  }

  .trustbar--stack .trustbar__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--msc-space-lg) var(--msc-space-xl);
  }

  .trustbar__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block-start: var(--msc-space-md);
    border-block-start: 1px solid currentColor;
  }

  .trustbar--dark .trustbar__item,
  .trustbar--sage .trustbar__item {
    border-block-start-color: rgba(255, 255, 255, 0.22);
  }

  .trustbar--light .trustbar__item {
    border-block-start-color: rgba(34, 31, 31, 0.18);
  }

  .trustbar__label {
    font-size: var(--msc-size-body);
    font-weight: 600;
    line-height: 1.3;
  }

  .trustbar__detail {
    font-size: var(--msc-size-caption);
    line-height: 1.45;
    opacity: 0.82;
  }

  @media (max-width: 60rem) {
    .trustbar__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--msc-space-md);
    }
  }

  @media (max-width: 30rem) {
    .trustbar__list {
      grid-template-columns: 1fr;
    }
  }


/* ===== ServiceCard ===== */
.scard {
    height: 100%;
  }

  .scard__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    background: var(--msc-white);
    border: 1px solid var(--msc-hairline-dark);
    border-radius: var(--msc-radius-card);
    overflow: hidden;
    transition: border-color var(--msc-transition);
  }

  .scard__link:hover {
    border-color: var(--msc-red);
  }

  .scard__img {
    width: 100%;
    height: auto;
    /* 4:3 rather than 3:2: a taller card keeps more of a portrait subject and
       gives the photograph more of the page. Vertical focal point is set per
       photo as an inline style, because which part of a picture survives a
       crop depends on the picture. See mscl_photo_focus(). */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--msc-green-deep);
  }

  .scard__body {
    display: flex;
    flex-direction: column;
    gap: var(--msc-space-xs);
    padding: var(--msc-space-lg);
    flex: 1;
  }

  .scard__title {
    font-size: var(--msc-size-h3);
  }

  .scard__desc {
    font-size: var(--msc-size-body);
    opacity: 0.86;
    flex: 1;
  }

  .scard__cue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-block-start: var(--msc-space-sm);
    font-size: var(--msc-size-button);
    font-weight: 600;
    color: var(--msc-red);
  }

  .scard__cue svg {
    transition: transform var(--msc-transition);
  }

  .scard__link:hover .scard__cue svg {
    transform: translateX(3px);
  }


/* ===== ProcessSteps ===== */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--msc-space-xl);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
  }

  .steps__item {
    padding-block-start: var(--msc-space-md);
    border-block-start: 1px solid currentColor;
  }

  .steps--light .steps__item {
    border-block-start-color: var(--msc-hairline-dark);
  }

  .steps--dark .steps__item,
  .steps--sage .steps__item {
    border-block-start-color: var(--msc-hairline);
  }

  .steps__num {
    display: block;
    font-family: var(--msc-font-editorial);
    font-size: var(--msc-size-body);
    font-weight: 400;
    letter-spacing: 0.04em;
    margin-block-end: var(--msc-space-sm);
  }

  .steps--light .steps__num {
    color: var(--msc-red);
  }

  .steps--dark .steps__num {
    color: var(--msc-gold);
  }

  /* Gold on sage is 2.5:1 and fails AA. Sage is only sanctioned for gold on
     Dark Green, so the numeral goes white here. */
  .steps--sage .steps__num {
    color: var(--msc-white);
  }

  .steps__title {
    font-size: var(--msc-size-h3);
    margin-block-end: var(--msc-space-xs);
  }

  .steps__body {
    font-size: var(--msc-size-body);
    opacity: 0.9;
  }

  .steps__meta {
    margin-block-start: var(--msc-space-sm);
    font-size: var(--msc-size-caption);
    opacity: 0.72;
  }


/* ===== CTABlock ===== */
.ctablock {
    padding-block: var(--msc-section-y);
    color: var(--msc-white);
  }

  .ctablock--dark {
    background: var(--msc-green-dark);
  }

  .ctablock--sage {
    background: var(--msc-green-sage);
  }

  .ctablock__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--msc-space-2xl);
  }

  .ctablock__copy {
    max-width: 34ch;
  }

  .ctablock__copy p {
    margin-block-start: var(--msc-space-md);
    font-size: var(--msc-size-body-lg);
    opacity: 0.92;
    max-width: 46ch;
  }

  .ctablock__actions {
    display: flex;
    flex-direction: column;
    gap: var(--msc-space-md);
    align-items: flex-start;
  }

  .ctablock__note {
    font-size: var(--msc-size-caption);
    opacity: 0.8;
    max-width: 34ch;
  }

  @media (max-width: 56rem) {
    .ctablock__inner {
      grid-template-columns: 1fr;
      gap: var(--msc-space-xl);
    }
  }


/* ===== FAQ ===== */
.faq__list {
    max-width: var(--msc-measure);
    border-block-start: 1px solid var(--msc-hairline-dark);
  }

  .faq__item {
    border-block-end: 1px solid var(--msc-hairline-dark);
  }

  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--msc-space-lg);
    padding-block: var(--msc-space-lg);
    font-size: var(--msc-size-h3);
    font-weight: 600;
    line-height: var(--msc-leading-snug);
    cursor: pointer;
    list-style: none;
  }

  .faq__q::-webkit-details-marker {
    display: none;
  }

  .faq__q:hover {
    color: var(--msc-red);
  }

  .faq__icon {
    flex: none;
    color: var(--msc-red);
    transition: transform var(--msc-transition);
  }

  .faq__item[open] .faq__icon {
    transform: rotate(45deg);
  }

  .faq__a {
    padding-block-end: var(--msc-space-lg);
    max-width: var(--msc-measure-narrow);
  }

  .faq__a p {
    font-size: var(--msc-size-body-lg);
    opacity: 0.9;
  }


/* ===== CheckList ===== */
.checks {
    display: grid;
    gap: var(--msc-space-md) var(--msc-space-2xl);
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: var(--msc-container);
  }

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

  .checks__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--msc-space-sm);
    align-items: start;
    font-size: var(--msc-size-body-lg);
    padding-block-end: var(--msc-space-md);
    border-block-end: 1px solid var(--msc-hairline-dark);
  }

  .checks__mark {
    margin-block-start: 0.45em;
    color: var(--msc-red);
    flex: none;
  }

  @media (max-width: 48rem) {
    .checks--2 {
      grid-template-columns: 1fr;
    }
  }


/* ===== ComparisonTable ===== */
.ctable {
    position: relative;
    overflow-x: auto;
    /* Edge fade signalling more content to the right. Uses a mask rather than a
       painted gradient so no colour is introduced. */
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  }

  .ctable__hint {
    display: none;
    font-size: var(--msc-size-caption);
    font-weight: 600;
    color: var(--msc-red);
    margin-block-end: var(--msc-space-sm);
  }

  @media (max-width: 48rem) {
    .ctable__hint {
      display: block;
    }
  }

  /* No fade once the table fits, and none for reduced-motion users who may be
     relying on a static view. */
  @media (min-width: 48rem) {
    .ctable {
      -webkit-mask-image: none;
      mask-image: none;
    }
  }

  table {
    width: 100%;
    min-width: 44rem;
    border-collapse: collapse;
    font-size: var(--msc-size-body);
  }

  thead th {
    text-align: start;
    padding: var(--msc-space-md);
    font-size: var(--msc-size-h3);
    font-weight: 600;
    border-block-end: 1px solid var(--msc-hairline-dark);
    vertical-align: bottom;
  }

  tbody th {
    text-align: start;
    padding: var(--msc-space-md);
    font-weight: 600;
    width: 22%;
    vertical-align: top;
  }

  tbody td {
    padding: var(--msc-space-md);
    vertical-align: top;
    opacity: 0.92;
  }

  tbody tr + tr th,
  tbody tr + tr td {
    border-block-start: 1px solid var(--msc-hairline-dark);
  }

  .ctable__accent {
    background: rgba(175, 31, 36, 0.05);
  }

  thead .ctable__accent {
    border-block-end-color: var(--msc-red);
  }


/* ===== PhotoGallery ===== */
.gallery {
    display: grid;
    gap: var(--msc-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gallery--grid {
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  }

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

  .gallery__figure {
    margin: 0;
  }

  .gallery__img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--msc-radius-card);
    background: var(--msc-green-deep);
  }

  .gallery__caption {
    margin-block-start: var(--msc-space-sm);
    font-size: var(--msc-size-caption);
    line-height: 1.45;
    opacity: 0.78;
  }

  @media (max-width: 68rem) {
    .gallery--strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 34rem) {
    .gallery--strip {
      grid-template-columns: 1fr;
    }
  }


/* ===== SectionRule ===== */
.srule {
    border: 0;
    height: 1px;
    margin: 0;
  }

  .srule--gold {
    background: var(--msc-gold);
    opacity: 0.5;
  }

  .srule--red {
    background: var(--msc-red);
    opacity: 0.55;
  }

  .srule--neutral {
    background: var(--msc-hairline-dark);
  }

/* ===== Card grid utility =====
   In the Astro build each page declared its own grid around ServiceCard.
   Here it is one reusable rule so pages do not each reinvent it. Four across,
   two at tablet, one at mobile. */
.scard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--msc-space-lg);
}

@media (max-width: 68rem) {
  .scard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .scard-grid { grid-template-columns: 1fr; }
}

/* Three across, for sections with a card count that divides by three. Six
   cards in the four-column default wrap 4 + 2; this gives two even rows.
   Declared after the media queries above so it wins at desktop width, and
   re-stated inside them so the responsive collapse still applies. */
.scard-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 68rem) {
  .scard-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .scard-grid--3 { grid-template-columns: 1fr; }
}