/* Anti-FOUC: page is hidden until this stylesheet loads */
html {
  visibility: visible;
}

.about-us-section {
    width: var(--content-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.about-us-section-media {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.about-us-section-media a {
    display: block;
    width: 100%;
    height: 100%;
}

.about-us-section-media img,
.about-us-section-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-us-section-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.about-us-section-title {
    font-weight: 800;
    padding-bottom: var(--spacing-sm);
}

.about-us-section-text-content {
    border-top: 3px solid var(--black);
}

.about-us-section-text-content p:last-child {
    margin-bottom: 0;
}

/* ─── Features text section ─── */
.features-text-section {
    width: var(--content-width);
    margin: 0 auto;
    padding: var(--spacing-3xl) 0 var(--spacing-3xl);
}

/* Title */
.features-text-section-title {
    font-weight: 700;
}

/* Two-column body copy */
.features-text-section-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-3xl);
}

/* ─── Features cards section ─── */
.features-cards-section {
    width: var(--content-width);
    margin: 0 auto;
    /* The icon is a square matching the heading block beside it (subtitle line
       + one title line). It has to be a fixed size: deriving it from the
       block's height feeds the icon's width back into the title's line breaks,
       which CSS resolves from the unwrapped title — so a wrapped title
       overflows its row. Mirrors txt-xs / txt-xl; keep in sync if those change. */
    --feature-card-icon: calc(clamp(0.6rem, 1vw, 0.8rem) * 0.975
                            + clamp(1.1rem, 2.5vw, 1.75rem) * 1.07);
}

.features-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--spacing-xl);
}

/* Each card borrows the parent's row tracks (subgrid), so the photo, the
   heading and the copy line up across every card in a row: a two-line title
   pushes the copy down for the whole row, not just for its own card. */
.feature-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    min-width: 0;
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--black);
}

/* Dissolve the wrapper so media / heading / copy become the card's own rows */
.feature-card-body {
    display: contents;
}

.feature-card-media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.feature-card-media a {
    display: block;
    width: 100%;
    height: 100%;
}

.feature-card-media img,
.feature-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.feature-card-heading {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    width: 100%;
    padding-top: var(--spacing-lg);
}

/* Fixed square, so the icon never takes its width from the text beside it */
.feature-card-icon-link {
    flex: 0 0 auto;
    width: var(--feature-card-icon);
    height: var(--feature-card-icon);
    display: block;
}

.feature-card-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.feature-card-heading-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The feature icons are dark artwork and disappear against GLightbox's default
   near-black backdrop, so their gallery gets a light one instead. Change the
   colour below to pick a different backdrop for the icons. */
body.glightbox-on-icons .glightbox-container .goverlay {
    background: var(--off-white);
}

.feature-card-subtitle,
.feature-card-title {
    font-weight: 800;
    text-transform: uppercase;
}

/* Trim the font's built-in leading off the outer edges only, so the cap line
   and the baseline sit flush with the icon's top and bottom. The gap between
   the two lines keeps its natural leading. Without support for text-box-trim
   the box stays untrimmed, which is the previous behaviour. */
.feature-card-subtitle p {
    margin: 0;
    text-box-trim: trim-start;
    text-box-edge: cap alphabetic;
}

.feature-card-title h3 {
    margin: 0;
    text-box-trim: trim-end;
    text-box-edge: cap alphabetic;
}

.feature-card-subtitle {
    color: var(--light-grey);
}


/* Sized box that positions the icon (the artwork draws its own frame) */
.about-us-icon {
    margin-top: var(--spacing-6xl);
    width: min(45%, 190px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 1rem;
    box-sizing: border-box;
}

.about-us-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Container for multiple icon boxes side by side */
.about-us-icons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

/* ─── Feature showcase: image with a Lottie icon overlay ─── */
.about-us-showcase {
    width: var(--content-width);
    margin: 0 auto;
    padding: var(--spacing-3xl) 0;
}

.about-us-showcase-figure {
    position: relative;
    /* Tweak these three to sit the icon over the first glass.
       Percentages are relative to the image box, so they scale. */
    --icon-x: 19%;
    --icon-y: 42%;
    --icon-size: 8%;
}

.about-us-showcase-figure img {
    display: block;
    width: 100%;
    height: auto;
}

/* Lottie overlay + tooltip (mirrors the range page's feature tooltip) */
.about-us-tooltip {
    position: absolute;
    left: var(--icon-x);
    top: var(--icon-y);
    width: var(--icon-size);
    transform: translate(-50%, -50%);
}

.about-us-showcase-icon {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.about-us-tooltip__bubble {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: max-content;
    max-width: 240px;
    padding: 0.7rem 1rem;
    background-color: var(--off-white);
    color: var(--black);
    line-height: 1.5;
    text-align: center;
    white-space: normal;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.about-us-tooltip__bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--off-white);
}

.about-us-tooltip__bubble.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Shake the decorative paths of the first icon on hover */
.about-us-icon--shaker:hover .about-us-shake {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: about-icon-shake 0.7s ease;
}

@keyframes about-icon-shake {
    0%, 100% { transform: rotate(0deg); }
    10%      { transform: rotate(-14deg); }
    20%      { transform: rotate(11deg); }
    30%      { transform: rotate(-9deg); }
    40%      { transform: rotate(7deg); }
    50%      { transform: rotate(-5deg); }
    60%      { transform: rotate(3deg); }
    70%      { transform: rotate(-2deg); }
    85%      { transform: rotate(1deg); }
}

/* Shiver the glass artwork (not its frame or lettering) on hover */
.about-us-icon--glass:hover .about-us-shiver {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: icon-cold-shiver 0.6s ease-in-out;
}

/* NOTE: translateX is in the artwork's local user units. This drawing sits
   inside a scale(0.1) group, so ~100 units ≈ 5px on screen. */
@keyframes icon-cold-shiver {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    6%       { transform: translateX(-110px) rotate(-4.5deg); }
    12%      { transform: translateX(110px) rotate(4.5deg); }
    18%      { transform: translateX(-150px) rotate(-4deg); }
    24%      { transform: translateX(150px) rotate(4deg); }
    30%      { transform: translateX(-150px) rotate(-3.5deg); }
    36%      { transform: translateX(150px) rotate(3.5deg); }
    42%      { transform: translateX(-110px) rotate(-2.5deg); }
    48%      { transform: translateX(110px) rotate(2.5deg); }
    54%      { transform: translateX(-70px) rotate(-2deg); }
    60%      { transform: translateX(70px) rotate(2deg); }
    70%      { transform: translateX(-35px) rotate(-1deg); }
    85%      { transform: translateX(35px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
    .about-us-icon--shaker:hover .about-us-shake,
    .about-us-icon--glass:hover .about-us-shiver {
        animation: none;
    }
}

/* Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    .about-us-section {
        gap: var(--spacing-md);
    }

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

/* For mobile devices */
@media (max-width: 768px) {
    .about-us-section {
        width: var(--content-width);
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        padding-top: var(--spacing-3xl);
        padding-bottom: var(--spacing-3xl);
    }

    /* The title and the copy live inside .about-us-section-text, so dissolve that
       wrapper to promote them to grid items and reorder around the media:
       title, image, text. */
    .about-us-section-text {
        display: contents;
    }

    /* The title leads the section on mobile, so the rule sits underneath it and
       the copy below the image loses its top border. */
    .about-us-section-title {
        order: 1;
        border-bottom: 3px solid var(--black);
    }

    .about-us-section-media {
        order: 2;
    }

    .about-us-section-text-content {
        order: 3;
        border-top: 0;
    }

    .about-us-section-text-content p:first-child {
        margin-top: 0;
    }

    .features-text-section-title {
        margin-bottom: var(--spacing-sm);
    }

    .features-text-section-columns {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .features-text-section-column {
        text-align: left;
    }

    .features-text-section-column p {
        margin-top: 0;
}

    .features-cards-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        margin-bottom: var(--spacing-xl);
    }
}