/* ==========================================================================
   Flamore — page sections
   --------------------------------------------------------------------------
   Content sections built on the shared components (components.css).

     section flow · intro · feature-list · service-grid · service-card
     about-teaser · check-list · testimonials · slider · quote-card
     inquiry · form-field · form-status · faq · accordion · gallery · lightbox
   ========================================================================== */

@layer components {
  /* Consecutive sections share one gap instead of stacking two paddings. */
  .section + .section {
    padding-block-start: 0;
  }

  /* ----- intro ----------------------------------------------------------- */
  .intro__media img {
    aspect-ratio: 4 / 3;
  }

  @container (min-width: 48rem) {
    .intro__media img {
      aspect-ratio: 4 / 5;
    }
  }

  .intro__body {
    --stack-space: var(--space-5);
  }

  .intro__text {
    --stack-space: var(--space-4);
    color: var(--color-text-muted);
  }

  /* ----- feature-list: icon in a mist circle + term ----------------------- */
  .feature-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-5);
    margin: 0;
    padding: var(--space-4) 0 0;
    list-style: none;
  }

  @container (min-width: 64rem) {
    .feature-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .feature-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
  }

  .feature-list__icon {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-subtle);
    transition:
      background-color var(--duration-normal) var(--ease-standard),
      rotate var(--duration-slow) var(--ease-emphasized);
    --icon-size: 1.3rem;
  }

  .feature-list__item:hover .feature-list__icon {
    background-color: var(--color-flame);
    rotate: -8deg;
  }

  /* ----- services panel + service-grid -------------------------------------
     Spans come from PHP (partials/service-grid.php): 6 tracks on wide slots,
     cards span 2 (rows of 3); a short last row widens its cards. */
  .services__panel {
    --stack-space: var(--space-7);
  }

  .service-grid {
    container-type: inline-size;
  }

  .service-grid__list {
    display: grid;
    gap: var(--space-4);
    grid-auto-rows: clamp(17rem, 70cqi, 24rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @container (min-width: 36rem) {
    .service-grid__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: clamp(18rem, 42cqi, 26rem);
    }

    .service-grid__item--md-full {
      grid-column: 1 / -1;
    }
  }

  @container (min-width: 60rem) {
    .service-grid__list {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-auto-rows: clamp(20rem, 30cqi, 27rem);
      gap: var(--space-5);
    }

    .service-grid__item,
    .service-grid__item--md-full {
      grid-column: span 2;
    }

    .service-grid__item--lg-half {
      grid-column: span 3;
    }

    .service-grid__item--lg-full {
      grid-column: 1 / -1;
    }
  }

  /* ----- service-card: photo + overlay title, "Mehr erfahren" on hover ---- */
  .service-card {
    position: relative;
    isolation: isolate;
    display: block;
    block-size: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--ink);
    color: var(--paper);
    text-decoration: none;
    --color-focus-ring: var(--ink);
  }

  .service-card__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    margin: 0;
  }

  .service-card__media :is(picture, img) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-emphasized);
  }

  .service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgb(var(--overlay-rgb) / 0.82), rgb(var(--overlay-rgb) / 0.2) 55%, rgb(var(--overlay-rgb) / 0.05));
    transition: opacity var(--duration-slow) var(--ease-standard);
  }

  .service-card__body {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: var(--space-2);
    padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  }

  .service-card__title {
    font-size: var(--text-2xl);
    color: inherit;
    hyphens: auto;
  }

  .service-card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--sand);
  }

  .service-card__more .icon {
    transition: translate var(--duration-normal) var(--ease-emphasized);
  }

  .service-card:is(:hover, :focus-visible) .service-card__media :is(picture, img) {
    transform: scale(1.06);
  }

  .service-card:is(:hover, :focus-visible) .service-card__more .icon {
    translate: 0.25rem 0;
  }

  /* Fine pointers: the link line slides in on hover (always visible on touch). */
  @media (hover: hover) and (pointer: fine) {
    .service-card__body {
      translate: 0 2rem;
      transition: translate var(--duration-slow) var(--ease-emphasized);
    }

    .service-card__more {
      opacity: 0;
      transition: opacity var(--duration-slow) var(--ease-standard);
    }

    .service-card:is(:hover, :focus-visible) .service-card__body {
      translate: 0 0;
    }

    .service-card:is(:hover, :focus-visible) .service-card__more {
      opacity: 1;
    }
  }

  /* ----- about-teaser: B/W portrait + overlapping detail photo ------------ */
  .about-teaser__media {
    position: relative;
    padding-inline-end: 16%;
    padding-block-end: 14%;
  }

  .about-teaser__portrait {
    margin: 0;
  }

  .about-teaser__portrait img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-xl);
    filter: grayscale(1) contrast(1.05);
  }

  .about-teaser__detail {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0;
    inline-size: 46%;
    margin: 0;
    padding: var(--space-2);
    border-radius: calc(var(--radius-xl) + var(--space-2));
    background-color: var(--color-bg);
    box-shadow: var(--shadow-lg);
  }

  .about-teaser__detail img {
    inline-size: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-xl);
  }

  /* Detail photo rises into place as it scrolls in (CSS only, where supported). */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .about-teaser__detail {
        animation: about-detail-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 35%;
      }
    }
  }

  @keyframes about-detail-in {
    from { opacity: 0; translate: 0 3rem; }
  }

  .about-teaser__body {
    --stack-space: var(--space-5);
  }

  .about-teaser__text {
    color: var(--color-text-muted);
  }

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

  .about-teaser__signature {
    margin: 0;
  }

  .about-teaser__signature img {
    inline-size: clamp(8rem, 6rem + 6vw, 11rem);
    block-size: auto;
  }

  .about-teaser__person {
    display: grid;
    line-height: var(--leading-snug);
  }

  .about-teaser__person strong {
    font-family: var(--font-display);
    font-weight: var(--font-semibold);
  }

  .about-teaser__person span {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  /* ----- check-list ------------------------------------------------------ */
  .check-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .check-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .check-list__item > .icon {
    box-sizing: content-box;
    flex: none;
    margin-block-start: 0.15em;
    padding: 0.25rem;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-subtle);
    --icon-size: 0.85rem;
  }

  /* ----- testimonials: quote slider on a rounded photo panel -------------- */
  .testimonials__panel {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    min-block-size: clamp(34rem, 26rem + 22vw, 44rem);
    padding: clamp(1.5rem, 0.75rem + 3.5vw, 3.5rem);
    overflow: hidden;
    border-radius: var(--radius-2xl);
  }

  .testimonials__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    margin: 0;
  }

  .testimonials__media :is(picture, img) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .testimonials__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(var(--overlay-rgb) / 0.88), rgb(var(--overlay-rgb) / 0.35) 60%, rgb(var(--overlay-rgb) / 0.6));
  }

  .testimonials__head h2 {
    font-size: var(--text-4xl);
  }

  /* ----- slider: native scroll-snap (swipe) + JS controls ---------------- */
  .slider {
    display: grid;
    gap: var(--space-5);
  }

  .slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(100%, 25rem);
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    list-style: none;
    border-radius: var(--radius-xl);
  }

  .slider__track::-webkit-scrollbar {
    display: none;
  }

  .slider__slide {
    display: flex;
    scroll-snap-align: start;
  }

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

  .slider__controls[hidden] {
    display: none;
  }

  .slider__controls .icon-button:disabled {
    opacity: 0.35;
    cursor: default;
  }

  .slider__dots {
    display: flex;
  }

  .slider__dot {
    display: grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  .slider__dot::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background-color: currentColor;
    opacity: 0.4;
    transition: inline-size var(--duration-slow) var(--ease-emphasized), opacity var(--duration-normal);
  }

  .slider__dot[aria-current="true"]::before {
    inline-size: 1.5rem;
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .slider__track {
      scroll-behavior: auto;
    }
  }

  /* ----- quote-card (glass on the photo) ---------------------------------- */
  .quote-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    inline-size: 100%;
    margin: 0;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: rgb(255 255 255 / 0.08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  .quote-card__icon {
    color: var(--color-text-subtle);
    --icon-size: 1.75rem;
  }

  .quote-card__text {
    flex: 1;
    margin: 0;
    font-weight: var(--font-light);
    line-height: var(--leading-relaxed);
    color: var(--sand);
  }

  .quote-card__name {
    font-family: var(--font-display);
    font-weight: var(--font-semibold);
  }

  /* ----- inquiry: form card + contact data -------------------------------- */
  .inquiry__grid {
    display: grid;
    gap: var(--space-7);
  }

  @media (min-width: 64rem) {
    .inquiry__grid {
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
      gap: var(--space-9);
      align-items: center;
    }
  }

  .inquiry__card {
    --stack-space: var(--space-6);
    padding: clamp(1.5rem, 0.75rem + 3.5vw, 3.5rem);
    border-radius: var(--radius-2xl);
    scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
  }

  .inquiry__card > header {
    --stack-space: var(--space-3);
  }

  .inquiry__lead {
    font-weight: var(--font-light);
    color: var(--color-text-muted);
  }

  .inquiry__info {
    --stack-space: var(--space-5);
  }

  .inquiry__info-title {
    font-size: var(--text-2xl);
  }

  .inquiry__info-text {
    color: var(--color-text-muted);
  }

  .contact-list--large {
    gap: var(--space-4);
    padding-block-start: var(--space-2);
  }

  /* ----- inquiry-form + form-field ---------------------------------------- */
  .inquiry-form {
    container-type: inline-size;
    display: grid;
    gap: var(--space-4);
  }

  .inquiry-form__row {
    display: grid;
    gap: var(--space-4);
  }

  @container (min-width: 30rem) {
    .inquiry-form__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .form-field {
    display: grid;
    gap: var(--space-2);
    align-content: start;
  }

  .form-field__label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .form-field__optional {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .form-field__control {
    inline-size: 100%;
    min-block-size: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: color-mix(in srgb, currentColor 4%, transparent);
    color: var(--color-text);
    font: inherit;
    transition:
      border-color var(--duration-fast) var(--ease-standard),
      background-color var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard);
  }

  .form-field__control:hover {
    border-color: color-mix(in srgb, currentColor 50%, transparent);
  }

  .form-field__control:focus-visible {
    outline: none;
    border-color: var(--color-text);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
  }

  textarea.form-field__control {
    min-block-size: 8rem;
    resize: vertical;
  }

  select.form-field__control {
    appearance: none;
    padding-inline-end: 2.75rem;
    /* chevron-down (Lucide), white stroke — a CSS background can't use the sprite */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1rem;
  }

  select.form-field__control option {
    background-color: var(--paper);
    color: var(--ink);
  }

  .form-field--error .form-field__control {
    border-color: var(--color-danger);
  }

  .form-field__error {
    font-size: var(--text-sm);
    color: var(--color-danger);
  }

  .inquiry-form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-5);
    padding-block-start: var(--space-2);
  }

  .inquiry-form__note {
    flex: 1 1 16rem;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .inquiry-form__note a {
    color: inherit;
  }

  .inquiry-form__icon,
  .inquiry-form__spinner {
    display: inline-flex;
    transition: translate var(--duration-normal) var(--ease-emphasized);
  }

  .inquiry-form__submit:hover .inquiry-form__icon {
    translate: 0.15rem -0.15rem;
  }

  .inquiry-form__spinner {
    display: none;
    animation: spin 0.8s linear infinite;
  }

  .inquiry-form[aria-busy="true"] .inquiry-form__submit {
    pointer-events: none;
    opacity: 0.75;
  }

  .inquiry-form[aria-busy="true"] .inquiry-form__icon {
    display: none;
  }

  .inquiry-form[aria-busy="true"] .inquiry-form__spinner {
    display: inline-block;
  }

  @keyframes spin {
    to { rotate: 360deg; }
  }

  /* ----- form-status (success / error banner) ----------------------------- */
  .form-status {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    --icon-size: 1.5rem;
  }

  .form-status:focus {
    outline: none;
  }

  .form-status > .icon {
    flex: none;
  }

  .form-status--success > .icon {
    color: var(--color-success);
    animation: status-pop var(--duration-slow) var(--ease-emphasized) both;
  }

  .form-status--error {
    border-color: var(--color-danger);
    background-color: color-mix(in srgb, var(--color-danger) 12%, transparent);
  }

  .form-status--error > .icon {
    color: var(--color-danger);
  }

  .form-status__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
  }

  .form-status__title + p {
    color: var(--color-text-muted);
  }

  @keyframes status-pop {
    from { scale: 0.4; opacity: 0; }
  }

  /* ----- faq: accordion beside an image on a mist panel ------------------- */
  .faq__panel {
    display: grid;
    gap: var(--space-7);
  }

  @media (min-width: 64rem) {
    .faq__panel {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
      gap: var(--space-9);
      align-items: start;
    }

    .faq__media {
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-5));
    }
  }

  .faq__body {
    --stack-space: var(--space-6);
  }

  .faq__media {
    margin: 0;
  }

  .faq__media img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-xl);
  }

  /* ----- accordion: exclusive <details name>, animated where supported ---- */
  .accordion {
    display: grid;
    gap: var(--space-3);
    interpolate-size: allow-keywords;
  }

  .accordion__item {
    border-radius: var(--radius-lg);
    background-color: var(--color-bg);
    transition: box-shadow var(--duration-slow) var(--ease-standard);
  }

  .accordion__item[open] {
    box-shadow: var(--shadow-lg);
  }

  .accordion__item::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size var(--duration-slow) var(--ease-standard),
      content-visibility var(--duration-slow) allow-discrete;
  }

  .accordion__item[open]::details-content {
    block-size: auto;
  }

  .accordion__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: inherit;
    list-style: none;
    cursor: pointer;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

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

  .accordion__question {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
  }

  .accordion__icon {
    flex: none;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-full);
    background-color: var(--color-bg-subtle);
    transition:
      rotate var(--duration-slow) var(--ease-emphasized),
      background-color var(--duration-normal) var(--ease-standard),
      color var(--duration-normal) var(--ease-standard);
    --icon-size: 1.1rem;
  }

  .accordion__summary:hover .accordion__icon {
    background-color: var(--color-bg-muted);
  }

  .accordion__item[open] .accordion__icon {
    rotate: 45deg;
    background-color: var(--ink);
    color: var(--paper);
  }

  .accordion__answer {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-text-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .accordion__item::details-content {
      transition: none;
    }
  }

  /* ----- gallery: bento grid (first image large) -------------------------- */
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(8.5rem, 24vw, 15rem);
    grid-auto-flow: dense;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gallery__item:first-child {
    grid-column: 1 / -1;
    grid-row: span 2;
  }

  @media (min-width: 48rem) {
    .gallery {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-rows: clamp(10rem, 15vw, 15rem);
      gap: var(--space-4);
    }

    .gallery__item:first-child {
      grid-column: span 2;
    }

    .gallery:is([data-count="1"], [data-count="2"], [data-count="3"]) .gallery__item {
      grid-column: span 2;
      grid-row: span 2;
    }
  }

  .gallery__link {
    position: relative;
    display: block;
    block-size: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    cursor: zoom-in;
  }

  .gallery__link :is(picture, img) {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-emphasized);
  }

  .gallery__link:is(:hover, :focus-visible) :is(picture, img) {
    transform: scale(1.05);
  }

  .gallery__zoom {
    position: absolute;
    inset-block-end: var(--space-3);
    inset-inline-end: var(--space-3);
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-full);
    background-color: var(--paper);
    color: var(--ink);
    opacity: 0;
    scale: 0.7;
    transition:
      opacity var(--duration-normal) var(--ease-standard),
      scale var(--duration-normal) var(--ease-emphasized);
    --icon-size: 1.1rem;
  }

  .gallery__link:is(:hover, :focus-visible) .gallery__zoom {
    opacity: 1;
    scale: 1;
  }

  /* ----- lightbox: modal <dialog> built by lightbox.js -------------------- */
  .lightbox {
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: rgb(var(--overlay-rgb) / 0.94);
    opacity: 0;
    transition:
      opacity var(--duration-slow) var(--ease-standard),
      display var(--duration-slow) allow-discrete,
      overlay var(--duration-slow) allow-discrete;
  }

  .lightbox[open] {
    opacity: 1;
  }

  @starting-style {
    .lightbox[open] {
      opacity: 0;
    }
  }

  .lightbox::backdrop {
    background: transparent;
  }

  html:has(.lightbox[open]) {
    overflow: hidden;
  }

  .lightbox__stage {
    display: grid;
    place-items: center;
    block-size: 100%;
    margin: 0;
    padding: 4.5rem clamp(var(--container-gutter), 6vw, 5.5rem);
    touch-action: pan-y;
  }

  .lightbox__img {
    max-inline-size: 100%;
    max-block-size: calc(100dvh - 9rem);
    border-radius: var(--radius-lg);
    object-fit: contain;
    animation: lightbox-in var(--duration-slow) var(--ease-emphasized);
  }

  @keyframes lightbox-in {
    from { opacity: 0; scale: 0.97; }
  }

  .lightbox .icon-button {
    position: absolute;
    background-color: rgb(255 255 255 / 0.08);
  }

  .lightbox .icon-button[hidden] {
    display: none;
  }

  .lightbox__close { inset-block-start: var(--space-4); inset-inline-end: var(--space-4); }
  .lightbox__prev  { inset-block-start: 50%; inset-inline-start: var(--space-4); translate: 0 -50%; }
  .lightbox__next  { inset-block-start: 50%; inset-inline-end: var(--space-4); translate: 0 -50%; }

  .lightbox__counter {
    position: absolute;
    inset-block-end: var(--space-5);
    inset-inline: 0;
    font-size: var(--text-sm);
    text-align: center;
    color: var(--color-text-muted);
  }

  @media (prefers-reduced-motion: reduce) {
    .lightbox__img {
      animation: none;
    }
  }

  /* ----- scroll reveal: content fades + rises as it enters the viewport ---
     Pure CSS (scroll-driven animation, no JS, nothing on the LCP path).
     Without support or with reduced motion everything is simply visible;
     what is already in view on load renders in its end state. Individual
     `translate` keeps the components' own `transform` hovers untouched. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      main .section .section-head,
      .media-split__media,
      .about-teaser__media,
      .faq__media,
      .service-grid__item,
      .gallery__item,
      .feature-list__item,
      .steps__item,
      .icon-card,
      .seal__card {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 70%;
      }
    }
  }

  @keyframes reveal {
    from {
      opacity: 0;
      translate: 0 2.5rem;
    }
  }
}