/* ─── Global ─────────────────────────────────────────────────────────────── */

.section-container {
    background-color: var(--bg);
    color: var(--text);
}

/* ─── Typography helpers ─────────────────────────────────────────────────── */

.number {
    font-family: var(--font-title);
    text-transform: uppercase;
    color: var(--text-dull);
    line-height: 100%;
}

/* ─── Media ──────────────────────────────────────────────────────────────── */

/*
 * `video` belongs here with the other two: a gallery tile can be a <video>
 * (resources/views/components/blocks/media.blade.php) and, unlike <img>, it
 * carries no width/height attributes to size itself from. Without this it falls
 * back to the inline 300x150 default and renders visibly shorter than the image
 * tiles beside it, with object-fit inert for want of a resolved box.
 */
picture,
img,
video,
.video-block {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
}

.video-block > video {
    object-fit: contain;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
}

.client-logo {
    box-sizing: border-box;
}
.client-logo img {
    object-fit: contain;
}

/* ─── Tags ───────────────────────────────────────────────────────────────── */

div.tag {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-weight: var(--bold);
    letter-spacing: 0.03em;
    font-size: 0.875rem;
}

.tag.red {
    background-color: var(--primary-500);
    color: var(--text-white);
}

.tag.pink {
    background-color: var(--pink);
}

.tag.neutral {
    background-color: var(--ghost-color);
}

.tag.black {
    background-color: var(--button-black);
    color: var(--text-white);
}

.tag.accent {
    background-color: var(--accent);
}

.tag.neutral-dark {
    background-color: var(--border-dark);
    color: var(--text-white);
}

.tag.accent-dark {
    background-color: var(--accent-dark);
    color: var(--text-white);
}

/* ─── Infinity slider ────────────────────────────────────────────────────── */

.infinity-slider > div {
    animation: infinity-slider 60s infinite linear;
}
.infinity-slider:hover > * {
    animation-play-state: paused;
}

@keyframes infinity-slider {
    to {
        transform: translate(-100%, 0);
    }
}

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

/* ─── Feature list ───────────────────────────────────────────────────────── */

ul.feature-list li {
    margin-left: 1rem;
    list-style-type: disc;
}

/* ─── Pic-pic ────────────────────────────────────────────────────────────── */

.pic-pic {
    position: relative;
}

.pic-pic .hover-pic {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: 320ms ease 320ms;
}

.pic-pic.miniature .hover-pic {
    inset: auto auto 1rem 1rem;
    width: 8rem;
    height: 8rem;
}

.card:has(a:hover) .pic-pic .hover-pic,
.pic-pic:hover .hover-pic {
    opacity: 1;
}

/* ─── Direction hover ────────────────────────────────────────────────────── */

.direct-hover {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.direct-hover > * {
    z-index: 1;
}

.direct-hover::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--hover-gray);
    scale: 1 0;
    transform-origin: top center;
    transition:
        scale 250ms ease,
        translate 250ms ease;
}

.direct-hover:hover::after {
    scale: 1 1;
}

@supports (selector(:has(*))) {
    .direct-hover:hover + .direct-hover::after {
        translate: 0 -100%;
    }
    .direct-hover:has(+ .direct-hover:hover)::after {
        translate: 0 100%;
    }
}

/* ─── Header ─────────────────────────────────────────────────────────────── */

header.main-nav {
    position: sticky !important;
    top: 0;
    left: 0;
    padding: 0.75rem 2rem;
    background-color: var(--bg-50);
    backdrop-filter: blur(1rem);
    border-bottom: 1px solid var(--border);
    z-index: 20;
}

header.main-nav button {
    z-index: 1;
}
header.main-nav .burger-trigger {
    z-index: 100;
}
header.main-nav .link-group > .toggle-button {
    margin-right: -1rem;
}

header.main-nav .link-button p,
header.main-nav .button p {
    font-size: 1rem;
    white-space: nowrap;
}

header .header-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4rem;
    width: 100%;
}

header .logo-wrapper {
    width: clamp(10rem, 23%, 20rem);
    flex-shrink: 1;
    z-index: 100;
}

.header-links .link-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
}

.header-links .dropdown-bottom {
    flex-direction: row;
}

.inview-header-fade {
    opacity: 0;
    transition: opacity 0.6s ease;
}
.inview-header-fade.is-visible {
    opacity: 1;
}

.logo-animated path {
    fill: var(--text-semi);
    transform: translateY(50%);
    opacity: 0;
    /* enter: left to right */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: calc(var(--i) * 40ms);
}

footer .logo-animated path {
    fill: var(--border);
}

.logo-animated.is-visible path {
    transform: translateY(0);
    opacity: 1;
    /* exit: right to left */
    transition-delay: calc((var(--total) - var(--i)) * 40ms);
}

.button.burger-trigger {
    display: none;
}

/* ─── Dark mode icons ────────────────────────────────────────────────────── */

.darkmode > span {
    position: relative;
}

.dark-mode .dark-mode-icon,
.light-mode-icon {
    position: absolute;
    inset: auto;
    opacity: 0;
    transition: opacity 200ms ease 120ms;
}

.dark-mode-icon,
.dark-mode .light-mode-icon {
    opacity: 1;
}

.dark-mode .c-logo {
    filter: invert(1);
}

/* ─── Dropdown ───────────────────────────────────────────────────────────── */

.dropdown-enter,
.dropdown-leave {
    transition:
        opacity 180ms ease 60ms,
        transform 180ms ease;
}

.dropdown-enter-start,
.dropdown-leave-end {
    opacity: 0;
    transform: translateY(-4px);
}

.dropdown-enter-end,
.dropdown-leave-start {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Lang dropdown ──────────────────────────────────────────────────────── */

.lang-dropdown {
    position: relative;
}

.lang-dropdown__list {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 100;
    transform-origin: top center;
    background-color: var(--bg-white);
    border: 1px solid var(--border);
}

/* ─── Services dropdown ──────────────────────────────────────────────────── */

.services-dropdown {
    align-self: center;
}

.services-dropdown__list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    width: 100%;
    min-width: 280px;
    min-height: 0;
    transform-origin: top center;
    border-top: 1px solid var(--border);
    border-bottom: 2px solid var(--border);
    gap: 0;
}

.services-dropdown__list::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100svh;
    background-color: var(--black);
    opacity: 0.5;
    z-index: 20;
}

.services-dropdown__list .close-services {
    display: none;
}

.dark-mode .services-dropdown__list::after {
    opacity: 0.7;
    pointer-events: none;
}

.service-dropdown__categories {
    z-index: 100;
    background-color: var(--bg);
}

.service-dropdown__categories sub {
    color: var(--text-dull);
}

.service-dropdown__categories > div.column {
    padding: 2rem;
    justify-content: space-between;
}

.service-categories {
    margin-bottom: auto;
}

.service-categories button.is-active .copy,
.service-categories button:not(.is-active):hover .copy {
    color: var(--text);
    transition: color 250ms ease;
}

.service-categories button:not(.is-active) .copy {
    color: var(--text-dull);
    transition: color 250ms ease;
}

.services-dropdown__panels {
    border-left: 1px solid var(--border);
    background-color: var(--bg-white);
    grid-template-columns: repeat(auto-fit, minmax(clamp(15rem, 28%, 33rem), 1fr));
    grid-column: span 3;
}

.services-dropdown__panels > div {
    grid-row: 1;
    grid-column: 1 / 3;
}

.services-dropdown__panels > .col-2 {
    grid-template-columns: repeat(auto-fit, minmax(clamp(13rem, 40%, 50rem), 1fr));
}

.services-dropdown__panels > .services-dropdown__preview {
    grid-column: 3 / 3;
    grid-row: 1;
}

.services-dropdown__panels > .services-dropdown__preview > picture {
    grid-column: 1;
    grid-row: 1;
}

/* Tab transitions */
.tab-enter {
    transition: opacity 300ms ease 300ms;
}
.tab-leave {
    transition: opacity 200ms ease;
}

.tab-enter-start,
.tab-leave-end {
    opacity: 0;
}

.tab-enter-end,
.tab-leave-start {
    opacity: 1;
}

/*
 * Services menu hover previews — a crossfade, not the tab hand-off above (#82).
 * The tab timing empties the cell for ~100ms between two images, and the
 * category image underneath showed through. Here the entering preview fades in
 * at once, ON TOP (z-index, because DOM order follows the preview key, not the
 * hover order), and the leaving one holds until it is covered. The leave delay
 * must stay >= the enter duration — ServicesMenuTest pins that.
 */
.services-dropdown__preview {
    isolation: isolate;
}

.services-dropdown__hover-preview {
    position: relative;
    z-index: 2;
}

.services-dropdown__hover-preview.preview-leave {
    z-index: 1;
}

.preview-enter {
    transition: opacity 300ms ease;
}
.preview-leave {
    transition: opacity 200ms ease 300ms;
}

.preview-enter-start,
.preview-leave-end {
    opacity: 0;
}

.preview-enter-end,
.preview-leave-start {
    opacity: 1;
}

/* ─── Link group ─────────────────────────────────────────────────────────── */

.link-group__item {
    color: var(--text);
    transition: color 300ms ease 150ms;
}

.link-group__items:has(.link-group__item:hover) > .link-group__item:not(.social1),
.link-group__items:has(.link-group__item:hover) > .link-group__item:not(.social1) p {
    color: var(--text-dull);
    transition: color 300ms ease 150ms;
}

.link-group__items:has(.link-group__item:hover) > .link-group__item:not(.social1):hover,
.link-group__items:has(.link-group__item:hover) > .link-group__item:not(.social1):hover p {
    color: var(--text);
}

/* ─── Table of contents ──────────────────────────────────────────────────── */

.table-of-contents:has:not(.card) .sticky a {
    display: inline;
    transition: color 0.3s ease;
}

.table-of-contents a:hover {
    color: var(--text);
}

.table-of-contents > .sticky ul > li {
    list-style: none;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1rem;
    padding: 0.25rem 0.5rem 0.25rem 1rem;
    transition:
        background-color 0.3s,
        color 0.3s;
    color: var(--border-dark);
}

.table-of-contents > .sticky ul > li > a {
    display: inline;
    color: var(--border-dark);
    font-size: 1.125rem;
}

.table-of-contents > .sticky ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background-color: var(--hover-prime);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.table-of-contents > .sticky ul > li:hover::before {
    opacity: 0.3;
}
.table-of-contents > .sticky ul > li.in-view::before {
    opacity: 1;
}
.table-of-contents > .sticky ul > li.in-view a {
    color: var(--text);
}

.table-of-contents > .sticky ul.sub {
    display: none;
}
.table-of-contents > .sticky ul > li.in-view + ul.sub {
    display: block;
}

.table-of-contents > .sticky ul.sub li {
    padding-left: 1.75rem;
}
.table-of-contents > .sticky ul.sub li::before {
    background-color: var(--border);
    width: 1px;
}
.table-of-contents > .sticky ul.sub li.in-view a {
    color: var(--text);
}

.table-of-contents > .sticky ul > li.in-view + ul.sub > li {
    opacity: 0;
    animation: opacity-in 1.5s forwards;
}

@keyframes opacity-in {
    to {
        opacity: 1;
    }
}

/* Nav-bar variant */
.table-of-contents.nav-bar {
    width: 100%;
}

.table-of-contents.nav-bar ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-white);
    align-items: stretch;
}

.table-of-contents.nav-bar > .sticky ul > li {
    flex: 1;
    white-space: nowrap;
    padding: 1rem 2rem;
    overflow: hidden;
    text-align: center;
}

.table-of-contents.nav-bar > .sticky ul > li a {
    position: relative;
    z-index: 1;
}

.table-of-contents.nav-bar > .sticky ul > li::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    top: auto;
    background-color: var(--hover-prime);
    scale: 0 1;
    transform-origin: left center;
    transition:
        scale 250ms ease,
        translate 250ms ease;
    z-index: 0;
}

.table-of-contents.nav-bar > .sticky ul > li.in-view::before {
    scale: 1 1;
}

@supports (selector(:has(*))) {
    .table-of-contents.nav-bar > .sticky ul > li.in-view + li::before {
        translate: -100% 0;
    }
    .table-of-contents.nav-bar > .sticky ul > li:has(+ li.in-view)::before {
        translate: 100% 0;
    }
}

/* ─── Accordion TOC ──────────────────────────────────────────────────────── */

.button.accordion-toc__item,
.accordion-toc__item {
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
    color: var(--text-dull);
    cursor: pointer;
    justify-content: flex-start;
    transition:
        border-color 250ms ease,
        color 250ms ease;
}

.button.accordion-toc__item p,
.accordion-toc__item p {
    color: var(--text-dull);
    transition: color 250ms ease;
}

.button.accordion-toc__item.is-active p,
.accordion-toc__item.is-active p {
    color: var(--text);
}

.button.accordion-toc__item.is-active,
.button.accordion-toc__item:hover,
.accordion-toc__item.is-active,
.accordion-toc__item:hover,
.accordion-toc__item:hover p {
    border-bottom-color: var(--border-dark);
    color: var(--text);
}

.accordion-toc-side .btn-plain p {
    text-align: left;
}

/* ─── Testimonial ────────────────────────────────────────────────────────── */
.testimonial__author {
    flex-wrap: wrap;
}

.testimonial__author picture {
    height: auto;
}

.testimonial__author-info {
    justify-content: center;
    gap: 0.5rem;
}

/* ─── Pricing card ───────────────────────────────────────────────────────── */

.pricing-card {
    width: clamp(18rem, 100%, 30rem);
}

.pricing-card__price {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    padding: 0.5rem 0 1.5rem;
}

.pricing-card__price .price-number {
    font-size: 3rem;
    line-height: 1;
}

.pricing-card a.pricing-card__button {
    align-self: center;
    width: 100%;
    max-width: unset;
}

/* ─── Background picture + parallax ─────────────────────────────────────── */

.bg-picture ~ * {
    z-index: 1;
}

.bg-picture {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.bg-picture.parallax img,
.bg-picture.parallax video {
    height: 150%;
    width: 100%;
    position: absolute;
    top: -25%;
    left: 0;
    object-fit: cover;
    will-change: transform;
}

/* ─── Tab switcher ───────────────────────────────────────────────────────── */

.tab-switcher {
    position: relative;
}

.tab-switcher.with-underline > div.row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border);
}

/* .category-filter > button.btn-plain.blank > span.copy {
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    transition: background-color 250ms ease;
} */

/* ─── Tab panels ─────────────────────────────────────────────────────────── */

.tab-panel {
    display: grid; /* always grid — never toggled */
    opacity: 0;
    pointer-events: none;
    grid-column: 1 / 1;
    grid-row: 2 / 2;
    transform: translateY(0.5rem);
    transition:
        opacity 400ms ease,
        transform 400ms ease 100ms;
    align-items: flex-start;
}

.tab-panel.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        opacity 400ms ease 300ms,
        transform 400ms ease 100ms; /* delay only on enter */
}

.accordion-toc-side .tab-panel {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
}
.compare-images .tab-panel {
    grid-column: 2 / 2;
    grid-row: 1 / 1;
}

/* ─── Card animations ────────────────────────────────────────────────────── */

/*
 * The panel's `is-active` drives its cards: the old panel's cards leave together,
 * the new panel's cards enter one by one. `--i` is the card's place in the panel.
 * Both `tabs` and the reference-only `tabSwitcher` (resources/js/tabs.js) only set
 * the panel's `is-active`; nothing else animates a card.
 *
 * Both states carry two classes on purpose. card.css loads later and sets
 * `.card { transition: background-color … }`; at one class it would win over the leave
 * rule, and a `.card` would vanish instead of fading. The active rule keeps that
 * background-color fade (hover) with no delay.
 */
.tab-panel > * {
    align-content: start;
}

.tab-panel:not(.is-active) > * {
    opacity: 0;
    transform: translateY(0.5rem);
    transition:
        opacity 200ms ease,
        transform 300ms ease;
}

.tab-panel.is-active > * {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 300ms ease,
        transform 400ms ease,
        background-color 300ms ease;
    transition-delay: calc(400ms + var(--i, 0) * 100ms), calc(400ms + var(--i, 0) * 100ms), 0ms;
}

.tab-panel > :nth-child(2) {
    --i: 1;
}
.tab-panel > :nth-child(3) {
    --i: 2;
}
.tab-panel > :nth-child(4) {
    --i: 3;
}
.tab-panel > :nth-child(5) {
    --i: 4;
}
.tab-panel > :nth-child(6) {
    --i: 5;
}
.tab-panel > :nth-child(7) {
    --i: 6;
}
.tab-panel > :nth-child(8) {
    --i: 7;
}

/* ─── Filter grid ────────────────────────────────────────────────────────── */

/*
 * <x-blocks.entry-filter> + Alpine filterGrid (resources/js/tabs.js).
 *
 * `fade`: the grid's `is-leaving` fades every card out together; filterGrid waits
 * 300 ms + 50 ms per other card on screen (the pacing of the filter it replaced),
 * `is-filtered` reflows the grid once, and the cards fade in 50 ms apart. `--i` is the
 * card's place among the shown cards.
 *
 * `is-filtered` hides a card that does not match. Two classes, because styles.css sets
 * `div { display: flex }` — which would also beat a bare `[hidden]`.
 */
.filter-item.is-filtered {
    display: none;
}

.filter-item {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 300ms ease,
        transform 400ms ease;
    transition-delay: calc(var(--i, 0) * 50ms);
    align-content: start;
}

.filter-grid.is-leaving > .filter-item {
    opacity: 0;
    transform: translateY(0.5rem);
    transition:
        opacity 200ms ease,
        transform 300ms ease;
}

/* A card back from display: none starts hidden. Not on page load — `is-live` is set by
   the first click. */
@starting-style {
    .filter-grid.is-live[data-animation='fade'] > .filter-item {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

/* `move`: each card is its own snapshot, so the view transition moves it to its new
   slot. A browser without `match-element` ignores this and cross-fades the page. */
.filter-grid[data-animation='move'] > .filter-item {
    view-transition-name: match-element;
}

/* ─── Active tab buttons ─────────────────────────────────────────────────── */

.tab-switcher .btn-plain.blank > .copy {
    padding: 0.5rem 1rem;
}

.tab-switcher .button.is-active {
    color: var(--hover-prime);
    transition: color 250ms ease;
}

.btn-plain.blank.is-active:not(.no-underline-button) > .copy::after {
    background-color: var(--hover-prime);
    height: 2px;
}

.tab-switcher > .row > .btn-plain.blank:not(.is-active) > .copy {
    color: var(--text-dull);
}

.tab-switcher .btn-plain.blank > .copy {
    height: 100%;
    color: var(--text);
}
.tab-switcher .btn-plain.blank.is-active > .copy {
    color: var(--text);
}

.fade-enter {
    transition:
        opacity 250ms ease-out,
        transform 250ms ease-out;
}
.fade-leave {
    transition:
        opacity 200ms ease-in,
        transform 200ms ease-in;
}

.fade-enter-start {
    opacity: 0;
    transform: translateY(0.5rem);
}
.fade-enter-end {
    opacity: 1;
    transform: translateY(0);
}

.fade-leave-start {
    opacity: 1;
    transform: translateY(0);
}
.fade-leave-end {
    opacity: 0;
    transform: translateY(0.5rem);
}

/* ─── Dash decoration ────────────────────────────────────────────────────── */

.dash-top-left::before {
    content: '';
    position: relative;
    width: 12rem;
    height: 0.25rem;
    background-color: var(--border);
}

/* ─── Color border helper ────────────────────────────────────────────────── */

.color-border {
    color: var(--border);
}

/* ─── Form consent ───────────────────────────────────────────────────────── */

.form-consent {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
}

.form-consent > div {
    display: inline;
    white-space: normal;
    vertical-align: baseline;
}

.form-consent.subscribe {
    padding: unset;
    border: unset;
    align-items: center;
}

.splash-4 > .absolute:last-child > picture {
    position: absolute;
    z-index: 0;
}

/* The video branch replaces the whole stack rather than one layer of it, so it
   covers the full-bleed area instead of taking an nth-of-type placement. */
.splash-4 > .absolute:last-child > .video-block {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.splash-4 > .absolute:last-child > picture:nth-of-type(1) {
    width: 24%;
    height: auto;
    aspect-ratio: 3/4;
    top: 5%;
    left: 3%;
}

.splash-4 > .absolute:last-child > picture:nth-of-type(2) {
    width: 12%;
    height: auto;
    aspect-ratio: 3/4;
    right: 6%;
    bottom: 25%;
}

.splash-4 > .absolute:last-child > picture:nth-of-type(3) {
    width: 18%;
    height: auto;
    aspect-ratio: 3/4;
    right: 15%;
    top: -10%;
}

/* A hero slot can now be a <video> wrapped in .video-block, so every rule that
   named `picture` has to name that too — the same element-qualification trap the
   gallery hit. See blocks/media-hero.blade.php. */
.splash-5.grid > picture,
.splash-5.grid > .video-block {
    align-self: flex-end;
    height: auto;
}

.post-date,
.text-dim {
    text-transform: uppercase;
    color: var(--text-dull);
}

.blog-content code {
    display: inline-block;
    padding: var(--container-padding);
    border: 1px solid var(--ghost-color);
    background-color: var(--bg-white);
    font-style: italic;
    color: var(--text-semi);
}

.blog-content blockquote {
    padding: var(--container-padding);
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: var(--semibold);
    line-height: var(--lh-body);
}

.content-section:not(.gap-05, .gap-1) {
    gap: var(--container-padding);
}

.content-section h2,
.content-section h3,
.content-section {
    scroll-margin-top: calc(var(--container-padding) * 4);
    letter-spacing: unset;
}

.content-section h2 {
    padding-top: var(--container-padding);
}

.content-section h3 {
    padding-top: 1rem;
}

.content-section em {
    padding-bottom: 1rem;
}

.content-section > p,
.content-section p,
.content-section p > a,
.content-section > p > a,
.content-section li > p,
.content-section li,
.content-section code {
    font-size: 1.25rem;
    line-height: var(--lh-body);
}

.content-section:not(:first-child) > .toc-copy-mobile {
    border-top: 1px solid var(--border);
    padding-top: calc(var(--container-padding) * 1.5);
}

.content-section .toc-before-after p,
.content-section .toc-before-after li {
    font-size: 1rem;
}

.toc-before-after > div {
    padding: 1rem;
}

.toc-before-after > div:first-of-type {
    border: 1px solid transparent;
}

.toc-before-after > div:last-of-type {
    border: 1px solid var(--border);
    background-color: var(--bg-white);
}

.content-section ol,
.content-section ul,
.feature-content ol,
.feature-content ul {
    padding-left: 2rem;
    gap: 0.5rem;
}

.content-section p > a {
    display: inline-flex;
    position: relative;
    font-weight: var(--semibold);
    text-decoration: none;
}

.content-section p > a:hover {
    color: var(--hover-prime);
}

.content-section p > a::after {
    content: '';
    position: absolute;
    bottom: 3px;
    width: 100%;
    height: 1px;
    background-color: var(--border);
}

.content-section p > a:hover:after {
    background-color: var(--hover-prime);
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 99;
    background-color: var(--border);
}

.scroll-progress::after {
    content: '';
    display: block;
    height: 100%;
    width: calc(var(--progress, 0) * 100%);
    background-color: var(--hover-prime);
    transition: width 100ms linear;
}

.row.picture-overlap > :first-child {
    transform: translateX(0.5rem) translateY(-0.5rem) rotate(-1deg) scale(1);
    border: 0.25rem solid var(--bg);
    transition: transform 250ms ease 200ms;
    z-index: 1;
}

.row.picture-overlap > :last-child {
    transform: translateX(-1.5rem) translateY(2rem) rotate(4deg) scale(1);
    border: 0.25rem solid var(--bg);
    transition: transform 250ms ease 200ms;
    z-index: 2;
}

.row.picture-overlap > :first-child:hover {
    transform: translateX(-0.5rem) translateY(0rem) rotate(-3deg) scale(1.03);
    border: 0.25rem solid var(--bg);
    transition: transform 250ms ease 200ms;
}

.row.picture-overlap > :last-child:hover {
    transform: translateX(0.5rem) translateY(3rem) rotate(5deg) scale(1.03);
    border: 0.25rem solid var(--bg);
    transition: transform 250ms ease 200ms;
}

.row.picture-overlap {
    position: relative;
}

.row.picture-overlap:has(*:hover) .circle {
    animation-play-state: paused;
}

.row.picture-overlap > .circle {
    position: absolute;
    bottom: -30%;
    right: -2%;
    height: 45%;
    aspect-ratio: 1;
    z-index: 3;
}

.circle {
    animation: rotation linear 30s infinite;
}

.linear-overlay {
    background-image: linear-gradient(to top, var(--bg) 20%, var(--bg-0) 100%);
    padding-top: calc(var(--container-padding) * 4);
}

.toc-copy-mobile:not(:first-of-type) {
    padding-top: calc(var(--container-padding) * 2);
    border-top: 1px solid var(--border);
}

/* .toc-copy-mobile {
    display: none;
} */

.toc-panel li > a {
    color: var(--border-dark);
    transition: color 300ms ease;
}

.toc-panel li > a:hover {
    color: unset;
}

.toc-panel li.is-open > a {
    color: unset;
}

.toc-panel li {
    border-bottom: 1px solid var(--border);
    transition: border-color 300ms ease;
}

toc-panel li.is-open,
.toc-panel li:hover {
    border-bottom: 1px solid var(--border-dark);
}

.toc-panel li .toc-item-detail {
    opacity: 0;
}

.toc-panel li.is-open .toc-item-detail {
    animation: opacity-in 300ms ease 100ms forwards;
}

.cases-9 {
    min-height: 30rem;
}

.cases-9 .grid.col-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.get-quote-1 > div.col-span-2.column:last-of-type > :only-child {
    border-bottom: unset;
}

/* ─── Modals ─────────────────────────────────────────────────────────── */

.modal-box {
    max-height: 80vh;
    overflow-y: auto;
    width: 100%;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--black-70);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.case-about-4 p.text-dim {
    padding-top: 1.25rem;
    position: relative;
}

.case-about-4 p.text-dim::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 50%;
    height: 1px;
    background-color: var(--border);
}

.about-8 .sticky {
    max-width: 25%;
}

.about-v6__stage.is-stacked {
    display: grid;
}

.about-v6__stage.is-stacked > .content-section {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    /* leaving: fade out quickly, then hide */
    transition:
        opacity 0.25s ease,
        visibility 0s linear 0.25s;
}

.about-v6__stage.is-stacked > .content-section.is-active {
    opacity: 1;
    visibility: visible;
    /* entering: wait for the old one to fade out, then fade in */
    transition:
        opacity 0.4s ease 0.2s,
        visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .about-v6__stage.is-stacked > .content-section,
    .about-v6__stage.is-stacked > .content-section.is-active {
        transition-duration: 0.01ms;
        transition-delay: 0s;
    }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */

@media screen and (min-width: 1361px) and (max-width: 1560px) {
    .blog-post.grid.col-2 {
        grid-template-columns: 1fr;
    }

    .blog-post > .column.pt-1.pr-1 {
        padding: unset;
    }
}

@media screen and (max-width: 1360px) {
    .header-links .link-group,
    .link-group .gap-15,
    .header-links ~ div {
        gap: 1rem;
    }

    .header-links .link-group > div.row:first-of-type > :first-child {
        display: none;
    }

    header.main-nav {
        padding: 0.75rem 1rem 0.75rem 1.5rem;
        height: 5rem;
    }

    header.main-nav .button p {
        white-space: wrap;
        text-align: left;
    }

    .service-dropdown__categories > div.column {
        grid-column: span 2;
    }

    .service-dropdown__categories > div.column {
        padding: 0 2rem;
        align-items: center;
    }

    .service-dropdown__categories > div.column,
    .service-categories {
        flex-direction: row;
        width: auto;
    }

    .service-categories > button > .copy {
        padding: var(--container-padding);
        width: 100%;
    }

    .btn-plain.blank.is-active:not(.no-underline-button, .toggle-button) > .copy::after {
        background-color: var(--hover-prime);
    }

    .service-dropdown__categories > div.column > sub {
        display: none;
    }

    .service-dropdown__categories.col-4 {
        display: flex;
    }

    .toc-panel {
        display: none;
    }

    .toc-copy-mobile {
        display: none;
    }

    #sections-scope-about-13-root .toc-copy-mobile {
        display: flex;
    }

    .grid:not(.table-of-contents, .accordion-toc-side) .sticky {
        position: relative;
        top: unset;
    }

    .table-of-contents > .sticky ul > li > a {
        font-size: unset;
    }

    .compare-image-v2 .grid.col-5 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(13rem, 40%, 50rem), 1fr));
    }

    .compare-image-v2 .grid.col-5 .title-group:first-of-type {
        grid-row: 2/2;
        grid-column: 1/1;
    }

    .compare-image-v2 .grid.col-5 .title-group:last-of-type {
        grid-row: 2/2;
        grid-column: 2/2;
    }

    .compare-image-v2 .grid.col-5 .image-reveal {
        grid-row: 1/2;
    }

    .faq-5 .title-group ~ div {
        padding-top: unset;
    }

    .get-quote-1 {
        display: flex;
    }

    .clients-2 .grid.col-4,
    .clients-1 .grid.col-4 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(20rem, 30%, 30rem), 1fr));
    }

    .clients-3 .grid.col-5,
    .clients-4 .grid.col-5 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(10rem, 20%, 30rem), 1fr));
    }

    .get-quote-1 > div.column:first-of-type {
        padding: var(--cbox-padding);
        border-right: unset;
        border-bottom: 1px solid var(--border-dark);
    }

    .get-quote-1 > div.column:last-of-type > :first-child {
        border-bottom: 1px solid var(--border-dark);
    }

    .get-quote-1 > div.column:last-of-type > * {
        padding: calc(var(--container-padding) * 1.5) var(--cbox-padding);
        border-bottom: unset;
        flex-direction: row;
        gap: calc(var(--container-padding) * 1.5);
    }

    .get-quote-5 .border-right-1 {
        border-right: unset;
    }

    .get-quote-5 > .grid.col-3,
    .how-7.grid.col-3,
    .how-5.grid.col-4 {
        display: flex;
    }

    .get-quote-5 > .grid.col-3 > div.column:last-child > .title-group.text-center {
        text-align: left;
    }

    .get-quote-5 > .grid.col-3 > div.column:last-child {
        border-top: 1px solid var(--border-dark);
        gap: var(--container-padding);
    }

    .get-quote-5 > .grid.col-3 > div.column:last-child > .column:last-child {
        flex-direction: row;
        text-align: left;
        gap: var(--container-padding);
    }

    .get-quote-5 > .grid.col-3 > div.column:last-child > .column:last-child a.link-button {
        align-self: flex-start;
    }

    .get-quote-5 .w-half {
        width: clamp(6rem, 20%, 12rem);
    }

    .faq-1 .grid.col-4,
    .faq-5.grid.col-3 > :first-child {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .faq-1 .grid.col-4 > div.items-end,
    .faq-5.grid.col-3 > :first-child > :last-child {
        flex-shrink: 0;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
    }

    .faq-5.grid.col-3 > :first-child > :last-child {
        justify-content: flex-start;
    }

    .chess-row {
        grid-template-areas: 'feature-1  feature-2 ' ' feature-3 feature-4';
    }

    .benefits-1 .grid.col-3,
    .benefits-3 .grid.col-3,
    .problem-3 .grid.col-3,
    .solution-3 .grid.col-3,
    .benefits-6 .grid.col-4 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(10rem, 40%, 33rem), 1fr));
    }

    .benefits-1 .icon.w-6 {
        width: 4rem;
    }

    .benefits-1 .feature-content .pt-2 {
        padding-top: 0.5rem;
    }

    .benefits-4.grid,
    .benefits-5.grid,
    .problem-4.grid,
    .problem-5.grid,
    .solution-4.grid,
    .solution-5.grid,
    .cases-3.grid,
    .cases-4.grid,
    .testimonials-3 .grid.col-4,
    .testimonials-4 .grid.col-4,
    .testimonials-5.grid.col-3 {
        display: flex;
    }

    .services-3 .grid.col-5 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(10rem, 28%, 33rem), 1fr));
    }

    .services-4 .grid.col-4 .col-span-3 {
        grid-column: span 1;
    }

    .services-4 .grid.col-4 .col-2 {
        display: flex;
        flex-direction: column-reverse;
        gap: unset;
    }

    .services-5 .grid.col-3 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 2rem;
        align-items: flex-start;
    }

    .services-5 .grid.col-3 div.col-span-2 {
        width: auto;
    }

    .services-5 .grid.col-3 picture.w-12 {
        width: 8rem;
        height: 8rem;
        flex: unset;
        flex-shrink: 0;
        align-self: flex-start;
    }

    .testimonials-1 .grid.col-4 {
        display: flex;
        flex-direction: row;
    }

    .testimonials-1 picture.order-4 {
        display: none;
    }

    .testimonials-1 .testimonial__author,
    .testimonials-3 .testimonial__author,
    .testimonials-5 .testimonial__author {
        width: 100%;
    }

    .testimonials-4 .testimonial__author {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        border-left: unset;
    }

    .testimonials-4 .testimonial__author > :first-child {
        flex-direction: row;
        text-align: left;
        gap: var(--container-padding);
    }

    .testimonials-3 .grid.col-4 {
        flex-direction: column-reverse;
    }

    .testimonials-3 .grid.col-4 .feature-content {
        flex-direction: row;
        text-align: left;
        align-items: center;
        gap: var(--container-padding);
    }

    .testimonials-3 .grid.col-4 .feature-content > :first-child {
        flex-shrink: 0;
    }

    footer > .row:last-child {
        justify-content: center;
    }

    .splash-1 p.fs-15,
    .splash-2 p.fs-15,
    .splash-3 p.fs-15,
    .splash-4 p.fs-15,
    .splash-5 p.fs-15 {
        font-size: 1.25rem;
    }

    .splash-1 .fs-675,
    .splash-2 .fs-675,
    .splash-3 .fs-675,
    .splash-4 .fs-675,
    .splash-5 .fs-675 {
        font-size: calc(6.75rem * var(--title-x) * 0.85);
    }

    .splash-1 .grid .sticky {
        position: sticky;
        top: 6.5rem;
    }

    .splash-2 .grid.col-2 {
        grid-template-columns: 65% auto;
    }

    .splash-2 .grid.col-2 > picture {
        align-self: flex-end;
        height: auto;
    }

    .splash-3 > div.column > div.absolute {
        position: relative;
        padding-left: unset;
        padding-right: unset;
        padding-bottom: unset;
    }

    .splash-3 .number.w-8 {
        width: 6rem;
    }

    .splash-3 picture.maxw-xl,
    .splash-3 .video-block.maxw-xl {
        aspect-ratio: 3/2;
    }

    .splash-3 li .row.gap-05.flex-wrap {
        gap: 1rem;
    }

    .splash-3 .feature-group > li > div,
    .splash-2 li > div.row {
        flex-direction: column;
    }

    .feature-post > .col-span-2 {
        grid-column: span 1;
    }

    .blog-aside.p-cont {
        padding: unset;
        padding-top: var(--container-padding);
    }

    div.row.show-more {
        justify-content: center;
    }

    .blog-body.col-5 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(10rem, 22%, 25rem), 1fr));
    }

    .related-banner {
        display: none;
    }

    .blog-index .blog-aside,
    .blog-index .blog-aside > .column {
        width: 100%;
    }

    .case-splash-1 > .grid,
    .case-splash-2,
    .case-splash-4,
    .case-splash-5 > .grid {
        display: flex;
    }

    .case-splash-5 > .grid {
        flex-direction: column-reverse;
        padding-top: var(--container-padding);
    }

    .case-splash-5 .row.picture-overlap > .circle {
        bottom: 60%;
    }

    .case-splash-2 > .column,
    .case-splash-4 > .column {
        padding: var(--container-padding) var(--cbox-padding);
    }

    .table-of-contents .sticky {
        position: relative;
        top: unset;
        padding-bottom: var(--container-padding);
    }
}

@media screen and (max-width: 1024px) {
    .service-dropdown__categories.col-4 {
        display: flex;
        flex-direction: column;
        height: 100%;
        align-items: flex-start;
    }

    .service-dropdown__categories > .column {
        flex-direction: column;
        gap: 2rem;
        background-color: var(--bg);
        border-left: 1px solid var(--border);
        border-top: 1px solid var(--border);
    }

    div.service-dropdown__categories > div.column {
        padding: 0;
        justify-content: flex-start;
        width: 100%;
        flex-direction: column;
    }

    .service-dropdown__categories > .column > a.btn-plain {
        padding: 0 calc(var(--container-padding) * 2);
        margin-top: unset;
    }

    div.services-dropdown {
        align-self: flex-start;
    }
    .services-dropdown > button {
        align-self: flex-start;
    }

    .header-links .link-group > div.row:first-of-type > :first-child {
        display: flex;
    }

    body:has(header.main-nav.is-open) {
        overflow: hidden;
    }

    header.main-nav .link-group .link-button p,
    header.main-nav .link-group .button p {
        font-size: 1.25rem;
    }

    header.main-nav .link-group > div > .link-button > p,
    header.main-nav .link-group > div > .services-dropdown > button > p {
        font-size: 2rem;
    }

    header.main-nav {
        border-bottom: unset;
    }

    header.main-nav .link-group .button.btn-plain:not(.darkmode, .close-services) svg {
        height: 2rem;
        transform: rotate(-90deg);
    }

    header.main-nav .link-group .button.btn-plain.darkmode svg {
        height: 1.5rem;
    }

    .lang-dropdown__list {
        right: auto;
        left: 0;
        top: -7rem;
    }

    header .logo-wrapper {
        width: clamp(15rem, 30%, 30rem);
    }

    .table-of-contents .sticky ul.sub {
        display: none;
    }

    .service-categories {
        flex-direction: row;
        width: 100%;
        gap: 0;
    }

    .service-categories > button {
        width: 50%;
    }

    .services-dropdown__panels {
        grid-template-columns: 2fr;
    }

    .services-dropdown__panels > .col-2 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(13rem, 40%, 50rem), 1fr));
        padding: calc(var(--container-padding) * 2);
        height: 100%;
        background-color: var(--bg);
        border-left: 1px solid var(--border);
    }

    header.main-nav {
        z-index: 101;
        position: relative;
    }

    header.main-nav .service-categories > button p {
        width: 100%;
        text-align: center;
    }

    .header-links > .link-group {
        position: absolute;
        display: flex;
        flex-direction: column;
        grid-auto-rows: max-content;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(100svh);
        align-items: flex-start;
        padding: 8rem 2rem 2rem;
        z-index: 99;
        overflow-y: auto;
        background-color: var(--bg);
    }

    .header-links > .link-group::after {
        content: '';
        position: fixed;
        inset: 0;
        background-color: var(--bg);
        height: 100%;
    }

    .header-links > .link-group > div.row:last-of-type {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        z-index: 100;
    }

    .header-links > .link-group > div.row:first-of-type {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .services-dropdown__panels > .grid.col-2 > a.self-end {
        grid-column: span 2;
    }

    button.button.burger-trigger {
        display: inline-flex;
    }

    button.burger-trigger.btn-plain svg {
        scale: 1.25;
    }

    button.burger-trigger.btn-plain svg > path {
        stroke-width: 2px;
    }

    /* Burger transitions */
    .burger-enter,
    .burger-leave {
        transition:
            opacity 300ms ease,
            transform 300ms ease;
    }

    .burger-enter-start,
    .burger-leave-end {
        opacity: 0;
        transform: translateY(-8px);
    }

    .burger-enter-end,
    .burger-leave-start {
        opacity: 1;
        transform: translateY(0);
    }

    div.services-dropdown__list {
        top: 5rem;
        left: auto;
        right: 0;
        height: 100%;
    }

    .services-dropdown__panels > div {
        gap: 2rem;
    }

    .services-dropdown__list::after {
        display: none;
    }

    div.services-dropdown__list,
    div.service-dropdown__categories {
        border-top: unset;
        border-bottom: unset;
    }

    .service-dropdown__categories > div.column > .row.justify-between {
        width: 100%;
        padding: 1rem calc(var(--container-padding));
        border-bottom: 1px solid var(--border);
    }

    .service-categories {
        width: 100%;
    }

    .service-dropdown__categories > div.column > .row.justify-between > button > p {
        color: var(--text);
    }

    div.services-dropdown__panels {
        border-left: unset;
        background-color: unset;
        width: 100%;
        height: 100%;
    }

    .services-dropdown__preview {
        display: none;
    }

    div.service-dropdown__categories > div.column {
        flex-direction: column-reverse;
        gap: unset;
    }

    .services-dropdown__list .close-services {
        display: flex;
    }

    .services-dropdown__list .about-1 > .pt-cont,
    .about-2 > .pt-cont {
        padding-top: unset;
    }

    .about-6 .sticky,
    .about-8 .sticky {
        display: none;
    }

    .all-services-4 .link-group__items.col-span-2 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(13rem, 40%, 50rem), 1fr));
    }

    .all-services-6 .link-group__title {
        grid-column: span 2;
    }

    .cta-5 > :first-child > :last-child {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(clamp(13rem, 40%, 50rem), 1fr));
    }

    .cta-5 .sticky {
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .cta-5 .sticky > picture {
        height: auto;
        max-width: 8rem;
    }

    .cta-6 .grid.col-3 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(13rem, 40%, 50rem), 1fr));
        grid-auto-flow: row;
    }

    .cta-6 .grid.col-3 > .row-span-2 {
        grid-column: span 2;
        grid-row: span 1;
        flex-direction: row;
        align-items: center;
    }

    .compare-3 .grid.col-3 > .column {
        flex-direction: row;
        grid-column: span 2;
    }

    .faq-1 .feature-group.accordion li > button,
    .feature-group.accordion .button {
        grid-column: 4/4;
        grid-row: 1/1;
    }

    .faq-1 .feature-group.accordion li.col-6 > .col-span-4 {
        grid-column: span 4;
    }

    .faq-4 .grid.col-3 {
        display: flex;
    }

    footer .grid.col-3 > :first-child {
        grid-row: span 2;
    }

    footer .grid.col-3 > :last-child {
        grid-column: 2/2;
    }

    footer > :last-child .link-group__items {
        justify-content: center;
    }

    .gallery-3 .col-span-2 {
        grid-column: span 1;
        grid-row: span 1;
        grid-template-columns: repeat(auto-fit, minmax(clamp(13rem, 40%, 50rem), 1fr));
        grid-auto-flow: row;
    }

    .gallery-4.col-3 .row-span-2 {
        grid-row: span 1;
        grid-template-columns: 1fr 1fr;
    }

    .gallery-5.grid.col-2 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(13rem, 40%, 50rem), 1fr));
    }

    .get-quote-1 > div.column:last-of-type > * {
        flex-direction: column;
        gap: 1.5rem;
    }

    .get-quote-1 > div.column:last-of-type .column.gap-15,
    .get-quote-2 > div.column:last-of-type .column.gap-15 {
        gap: 1rem;
    }

    .get-quote-2 > .column:last-child {
        gap: 0;
    }

    .get-quote-3 > .sticky {
        width: 100%;
    }
    .get-quote-3 > .sticky > div.row {
        flex-direction: row;
    }

    .get-quote-3 > .sticky > div.row .w-full {
        width: auto;
        gap: 1rem;
    }

    .get-quote-4 .border-right-1 {
        border: unset;
    }

    .industries-3 .col-2 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(13rem, 40%, 50rem), 1fr));
    }

    .industries-4 .card > :first-child {
        height: auto;
        align-self: flex-start;
    }

    .clients-1 .grid.col-4 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .clients-1 .grid.col-4 div.p-3,
    .clients-4 .grid.col-5 .p-3 {
        padding: 2rem 1.5rem;
    }

    .clients-2 .grid.col-4,
    .clients-3 .grid.col-5,
    .clients-4 .grid.col-5 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .clients-2 .grid.col-4 .client-logo,
    .clients-3 .grid.col-5 .client-logo,
    .clients-4 .grid.col-5 .client-logo {
        width: clamp(8rem, 30%, 15rem);
    }

    .clients-3 .grid.col-5 .client-logo:nth-last-of-type(10) {
        display: none;
    }

    .services-2 .grid.col-2 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(clamp(13rem, 40%, 50rem), 1fr));
    }

    .services-4 .grid.col-4 {
        display: flex;
    }

    .services-4 .sticky {
        flex-direction: row;
        position: relative;
        top: unset;
    }

    .services-4 .sticky > * {
        flex: 1;
    }

    .services-4 .grid.col-4 .col-2,
    .services-6 .grid.col-2 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(clamp(13rem, 40%, 50rem), 1fr));
    }

    .services-4 .grid.col-4 .col-2 div.p-cont {
        justify-content: space-between;
    }

    .cases-2 .grid.col-2 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(13rem, 40%, 50rem), 1fr));
    }

    .cases-3 .card > :first-child {
        max-width: 12rem;
        height: auto;
        align-self: flex-start;
    }

    .cases-3 .card > :last-child {
        flex: 1;
    }

    .cases-4 .card.grid {
        display: flex;
        flex-direction: row;
    }

    .cases-4 .card.grid > :first-child {
        width: clamp(8rem, 40%, 24rem);
        height: auto;
        align-self: flex-start;
    }

    .cases-4 .card > :last-child {
        flex: 1;
    }

    .cases-5 .card,
    .services-5 .card {
        display: grid;
    }

    .cases-5 .feature-content,
    .services-5 .feature-content {
        grid-row: 2/2;
        grid-column: span 4;
    }

    .cases-5 .feature-content .grid.col-3,
    .services-5 .feature-content .grid.col-3 {
        grid-template-columns: 70% 25%;
    }

    .cases-5 .feature-content .col-span-2,
    .services-5 .feature-content .col-span-2 {
        grid-column: span 1;
    }

    .cases-5 .feature-content .grid.col-3 > :last-child,
    .services-5 .feature-content .grid.col-3 > :last-child {
        width: clamp(8rem, 40%, 24rem);
        height: auto;
        align-self: flex-start;
        justify-self: flex-end;
    }

    .cases-10 .grid.col-2 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(13rem, 40%, 50rem), 1fr));
    }

    .splash-1 .grid .sticky {
        position: relative;
        top: unset;
        aspect-ratio: 3/2;
    }

    .splash-4 .grid.col-3 {
        grid-template-columns: repeat(auto-fit, minmax(clamp(10rem, 26%, 50rem), 1fr));
    }

    .splash-5.grid > picture,
    .splash-5.grid > .video-block {
        grid-column: span 2;
        padding-top: var(--container-padding);
    }

    .splash-6 > :last-child {
        align-content: center;
    }

    .header-links .dropdown-bottom {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
    }

    .blog-body .top-header div.row:has(a) {
        display: none;
    }

    .case-about-1 .w-half,
    .case-about-2 .w-half {
        width: unset;
    }

    .about-11 > picture {
        grid-row: 1;
    }

    /*
     * :nth-child, not picture:nth-of-type — a tile can now be a <video>, and
     * :nth-of-type counts per element type. With a video anywhere in the three,
     * the third <picture> either is not the third tile or does not exist, so the
     * rule would silently stop applying to the image tiles too. The :has() above
     * already constrains this to a container of exactly three children.
     */
    .gallery-5.col-3:has(> :nth-child(3):last-child) > :nth-child(3) {
        grid-column: span 2;
    }

    .gallery-13 > .col-span-2 {
        grid-column: span 1;
    }

    .case-about-7 .col-3 .col-span-2 {
        grid-column: span 1;
    }

    .content-section:not(.gap-05, .gap-1) {
        gap: 1rem;
    }

    .content-section h3 {
        padding: var(--container-padding) 0;
    }
}

@media screen and (max-width: 768px) {
    .blog-post,
    .feature-post {
        display: flex;
    }

    .splash-1 .fs-675,
    .splash-2 .fs-675,
    .splash-3 .fs-675,
    .splash-4 .fs-675,
    .splash-4 .fs-6,
    .splash-5 .fs-675,
    .splash-6 .fs-675 {
        font-size: calc(6.75rem * var(--title-x) * 0.65);
    }

    .table-of-contents > .sticky {
        display: none;
    }

    .cta-5 > :first-child > :last-child,
    .cta-6 .grid.col-3,
    .compare-3 .grid.col-3 > .column {
        display: flex;
        flex-direction: column;
    }

    .compare-4 .grid.col-2 {
        grid-template-columns: 1fr;
    }

    .compare-4.compare-images .tab-panel {
        grid-column: 1/1;
        grid-row: 2/2;
    }

    .faq-1 .grid.col-4,
    .faq-5.grid.col-3 > :first-child {
        flex-direction: column;
    }

    .faq-1 .grid.col-4 > div.items-end,
    .faq-5.grid.col-3 > :first-child > :last-child {
        flex-direction: row;
        width: 100%;
    }

    footer .grid.col-3 {
        display: flex;
    }

    .how-6 .grid.col-4 {
        display: flex;
    }

    .how-6 .grid.col-4 .column {
        flex-direction: row;
        gap: unset;
        padding-top: unset;
    }

    .how-6 .grid.col-4 .feature-decoration {
        flex-direction: column;
        padding-bottom: var(--container-padding);
        border-right: 1px solid var(--border-dark);
        padding-top: var(--container-padding);
        width: 12rem;
    }

    .how-6 .grid.col-4 .feature-content {
        padding-top: var(--container-padding);
    }

    .clients-1 .client-logo.w-12 {
        width: clamp(6rem, 25%, 8rem);
    }

    .card:has(a:hover) .pic-pic .hover-pic,
    .pic-pic:hover .hover-pic {
        display: none;
        opacity: 0;
    }

    div.services-dropdown__list {
        width: 100%;
    }

    .content-section > p,
    .content-section > p > a,
    .content-section li > p,
    .content-section li {
        font-size: 1.125rem;
    }

    .blog-quote {
        font-size: 1.25rem;
    }

    .get-quote-4 .column.pr-3.py-3,
    .get-quote-4 .column.pl-3.py-3 {
        padding: var(--cbox-padding);
    }
}

@media screen and (max-width: 600px) {
    header .grid.col-2 > a.self-end {
        align-self: flex-start;
    }

    header.main-nav .link-button p,
    header.main-nav .button p {
        white-space: break-spaces;
    }

    .service-categories > .button.btn-plain > p {
        font-size: 1rem;
    }

    .splash-1 .fs-675,
    .splash-2 .fs-675,
    .splash-3 .fs-675,
    .splash-4 .fs-675,
    .splash-4 .fs-6,
    .splash-5 .fs-675,
    .splash-6 .fs-675 {
        font-size: calc(6.75rem * var(--title-x) * 0.5);
    }

    .splash-1 .feature-group > li > div,
    .splash-2 .feature-group > li > div {
        flex-direction: row;
    }

    .splash-2 .grid.col-2 {
        display: flex;
        flex-direction: column-reverse;
    }

    .splash-2 .grid.col-4 {
        display: flex;
    }

    .splash-1 .feature-decoration,
    .splash-2 .feature-decoration {
        width: 5rem;
    }

    .splash-4 {
        flex-direction: column-reverse;
    }

    .splash-4 .grid.col-3 {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .splash-4 .h-full,
    .splash-4.h-100svh {
        height: auto;
    }

    .splash-4 > .absolute {
        position: relative;
        flex-direction: row;
        top: unset;
        left: unset;
        height: 20rem;
        flex: 1;
        padding-bottom: 1rem;
    }

    .splash-4 .row:has(.button) {
        flex-wrap: wrap;
    }

    .splash-5.grid.col-3 {
        display: flex;
        flex-direction: column-reverse;
    }

    .splash-5 .title-group .pt-3 {
        padding-top: unset;
    }

    .splash-5 .row:has(.button) {
        flex-wrap: wrap;
    }

    .splash-5.grid > picture,
    .splash-5.grid > .video-block {
        padding-top: unset;
    }

    .link-group__items.gap-1 {
        gap: 0.5rem;
    }

    .grid.col-4,
    .col-3,
    .link-group .grid.col-2 {
        display: flex;
        align-items: flex-start;
    }

    .all-services-3 picture {
        display: none;
    }

    .feature-group.accordion > li {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .feature-group.accordion .feature-content {
        grid-row: 2/2;
        grid-column: span 4;
    }

    .card a.fs-15 {
        font-size: 1.5rem;
    }

    .clients-1 .grid.col-4 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .clients-1 .grid.col-4 div.p-3,
    .clients-4 .grid.col-5 .p-3,
    .clients-3 .client-logo.p-cont {
        padding: 1.5rem 1rem;
    }
    .tab-switcher .btn-plain.blank > p {
        font-size: 1.25rem;
    }
    .services-5 .grid.col-3,
    .cases-5 .grid.col-3 {
        flex-direction: column-reverse;
    }

    .content-section > p,
    .content-section p,
    .content-section p > a,
    .content-section > p > a,
    .content-section li > p,
    .content-section li,
    .content-section code {
        font-size: 1rem;
    }

    .splash-4 > .absolute:last-child > picture:nth-of-type(1),
    .splash-4 > .absolute:last-child > picture:nth-of-type(2),
    .splash-4 > .absolute:last-child > picture:nth-of-type(3) {
        position: relative;
        width: unset;
        aspect-ratio: 1/1;
        inset: unset;
        border: 2px solid var(--bg);
    }
    .splash-4 > .absolute:last-child > picture:nth-of-type(1) {
        transform: translate(20%, 8%) rotate(-5deg) scale(0.8);
    }
    .splash-4 > .absolute:last-child > picture:nth-of-type(3) {
        transform: translate(-19%, 2%) rotate(7deg) scale(0.85);
    }

    .splash-6.h-80svh {
        height: auto;
    }

    .services-4 .sticky {
        flex-direction: column;
        width: 100%;
    }

    .services-4 .sticky > * {
        max-width: unset;
    }
    .services-4 .grid.col-4 .col-span-3 {
        width: 100%;
    }

    .services-5 .grid.col-3 {
        gap: 1rem;
    }

    .cta-6 .grid.col-3 > * {
        width: 100%;
    }

    .slider-blog > div.row:first-of-type {
        flex-wrap: wrap;
    }
    .slider-blog > div.row:first-of-type > div.row {
        width: 100%;
        justify-content: space-between;
    }

    .modal-overlay {
        z-index: 102;
    }

    .modal-box {
        max-height: 100svh;
    }
}

@media (min-width: 767px) {
    .cases-10.splide:not(.is-initialized) {
        visibility: visible;
    }
    .cases-10 .splide__list.grid {
        display: grid;
        transform: none;
    }
    .cases-10.splide .splide__list.gap-05 {
        gap: 0.5rem;
    }
    .cases-10 .top-right-arrows {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .cases-2 .grid.col-2,
    .services-2 .grid.col-2,
    .industries-3 .col-2,
    .about-5 .feature-group.grid.col-2 {
        display: flex;
    }

    .about-5 .feature-group.grid.col-2 > li > * {
        flex-direction: row;
    }

    .about-5 .feature-group.grid.col-2 > li .feature-decoration {
        width: 5rem;
    }

    .splash-3 > div.column > div.absolute {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 1rem;
    }
    .benefits-1 .icon.w-6,
    .benefits-6 .icon.w-6 {
        width: 3rem;
    }

    .benefits-1 .feature-content .pt-2,
    .benefits-3 .feature-content .pt-2,
    .benefits-6 .feature-content .pt-2,
    .how-6 .grid.col-4 .feature-content {
        padding-top: unset;
    }
    .how-6 .grid.col-4 .column {
        flex-direction: column;
    }

    .how-6 .grid.col-4 .feature-decoration {
        width: 100%;
        border-right: unset;
        flex-direction: row;
    }

    .chess-col,
    .chess-row {
        display: flex;
    }

    .tab-switcher:not(.cases-9) > .row:first-of-type {
        flex-direction: column;
    }

    .tab-switcher > .row:first-of-type > button > p {
        width: 100%;
        text-align: left;
    }

    .tab-switcher.with-underline > div.row::after {
        display: none;
    }

    .cta-1 .row,
    .cta-2 .row,
    .cta-3 .row,
    .cta-4 .row,
    .cta-6 .row,
    .testimonial .row.w-full {
        flex-wrap: wrap;
    }

    .cta-5 .sticky,
    .cta-6 .grid.col-3 > .row-span-2,
    .faq-2 .row.justify-end,
    .get-quote-2 > :last-child > .row,
    .get-quote-5 > .grid.col-3 > div.column:last-child > .column:last-child {
        flex-direction: column;
        align-items: flex-start;
    }

    .cases-3 .card > :first-child,
    .cases-4 .card.grid > :first-child {
        max-width: unset;
        width: 100%;
    }

    .cases-4 .card.grid {
        flex-direction: column;
        padding: var(--container-padding);
    }
}

/* ─── Reduce motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .tab-panel,
    .tab-panel.is-active,
    .tab-panel:not(.is-active) > *,
    .tab-panel.is-active > *,
    .filter-item,
    .filter-grid.is-leaving > .filter-item {
        transition: none;
    }
}