/*
Theme Name: Niblah Ordina
Theme URI: https://niblah.com/
Author: Niblah
Author URI: https://niblah.com/
Description: Native WordPress theme for Niblah, based on the licensed Ordina visual system.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: niblah-ordina
*/

@layer reset, base, components, pages, responsive;

@font-face {
    font-family: "Inter Display";
    src: url("assets/fonts/inter-variable.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 100 900;
}

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        letter-spacing: 0;
    }

    html {
        scroll-behavior: smooth;
        text-size-adjust: 100%;
    }

    body {
        margin: 0;
    }

    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-inline-size: 100%;
    }

    img {
        block-size: auto;
    }

    button,
    input,
    textarea,
    select {
        color: inherit;
        font: inherit;
    }

    button {
        border: 0;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    ul,
    ol,
    figure,
    blockquote {
        margin-block-start: 0;
    }

    ul,
    ol {
        padding-inline-start: 1.2em;
    }

    a {
        color: inherit;
    }
}

@layer base {
    :root {
        --petrol: #003244;
        --petrol-deep: #002735;
        --petrol-mid: #0b4253;
        --petrol-soft: #145367;
        --lime: #baff83;
        --lime-hover: #a8ec70;
        --blue: #dceaf4;
        --blue-strong: #bfdced;
        --white: #ffffff;
        --soft: #f5f6f4;
        --soft-2: #ecefed;
        --ink: #101516;
        --ink-soft: #2c3537;
        --muted: #687477;
        --muted-light: #a8bac0;
        --line: #dfe4e3;
        --dark-line: rgba(255, 255, 255, 0.12);
        --focus: #7fd8ff;
        --shadow: 0 18px 52px rgba(0, 31, 42, 0.14);
        --shell: 1248px;
        --header-height: 84px;
        --radius: 8px;
    }

    body {
        background: var(--white);
        color: var(--ink);
        font-family: "Inter Display", Inter, Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.55;
        min-inline-size: 320px;
        overflow-x: clip;
        -webkit-font-smoothing: antialiased;
    }

    body.menu-open {
        overflow: hidden;
    }

    h1,
    h2,
    h3,
    h4 {
        font-weight: 430;
        line-height: 1.06;
        text-wrap: balance;
    }

    h1 {
        font-size: 72px;
    }

    h2 {
        font-size: 56px;
    }

    h3 {
        font-size: 27px;
    }

    p {
        color: var(--muted);
    }

    a {
        text-decoration-thickness: 1px;
        text-underline-offset: 0.18em;
    }

    button,
    a {
        -webkit-tap-highlight-color: transparent;
    }

    button {
        cursor: pointer;
    }

    :focus-visible {
        border-radius: 4px;
        outline: 3px solid var(--focus);
        outline-offset: 3px;
    }

    ::selection {
        background: var(--lime);
        color: var(--petrol-deep);
    }

    .shell {
        inline-size: min(calc(100% - 48px), var(--shell));
        margin-inline: auto;
    }

    .screen-reader-text,
    .form-honeypot {
        block-size: 1px;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        inline-size: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }

    .skip-link {
        background: var(--lime);
        color: var(--petrol-deep);
        font-weight: 700;
        inset-block-start: 10px;
        inset-inline-start: 10px;
        padding: 10px 14px;
        position: fixed;
        transform: translateY(-150%);
        z-index: 9999;
    }

    .skip-link:focus {
        transform: translateY(0);
    }

    .icon {
        block-size: 1.15em;
        flex: 0 0 auto;
        inline-size: 1.15em;
    }

    .icon--back {
        transform: rotate(180deg);
    }

    .section--blue {
        background: var(--blue);
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
        transition:
            opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
            transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .js .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

@layer components {
    .button {
        align-items: center;
        border: 1px solid transparent;
        border-radius: var(--radius);
        display: inline-flex;
        font-size: 14px;
        font-weight: 650;
        gap: 9px;
        justify-content: center;
        line-height: 1;
        min-block-size: 48px;
        padding: 0 20px;
        text-decoration: none;
        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease,
            transform 0.2s ease;
    }

    .button:hover {
        transform: translateY(-2px);
    }

    .button--lime {
        background: var(--lime);
        color: var(--petrol-deep);
    }

    .button--lime:hover {
        background: var(--lime-hover);
    }

    .button--dark {
        background: var(--petrol);
        color: var(--white);
    }

    .button--dark:hover {
        background: var(--petrol-mid);
    }

    .button--soft {
        background: var(--soft-2);
        border-color: var(--line);
        color: var(--ink);
    }

    .button--soft:hover {
        background: var(--white);
        border-color: var(--petrol);
    }

    .button--ghost-dark {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--dark-line);
        color: var(--white);
    }

    .button--ghost-dark:hover {
        background: rgba(255, 255, 255, 0.11);
        border-color: rgba(255, 255, 255, 0.28);
    }

    .button--header {
        background: var(--white);
        color: var(--ink);
        min-block-size: 40px;
        padding-inline: 15px;
    }

    .button--full {
        inline-size: 100%;
    }

    .text-link {
        align-items: center;
        color: var(--petrol);
        display: inline-flex;
        font-weight: 650;
        gap: 8px;
        text-decoration: none;
    }

    .text-link:hover {
        text-decoration: underline;
    }

    .eyebrow {
        align-items: center;
        background: #eef3f4;
        border: 1px solid #d8e0e2;
        border-radius: 4px;
        color: var(--petrol-soft);
        display: inline-flex;
        font-size: 12px;
        font-weight: 650;
        gap: 6px;
        line-height: 1;
        margin-block-end: 22px;
        padding: 6px 8px;
        text-transform: none;
    }

    .eyebrow .icon {
        block-size: 13px;
        inline-size: 13px;
    }

    .eyebrow--dark {
        background: #0b5871;
        border-color: rgba(137, 216, 248, 0.16);
        color: #c9ebf7;
    }

    .eyebrow--soft {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.12);
        color: #d0e2e7;
    }

    .section-heading {
        margin-block-end: 58px;
        max-inline-size: 840px;
    }

    .section-heading h2 {
        margin-block-end: 0;
    }

    .section-heading--split {
        align-items: end;
        display: grid;
        gap: 64px;
        grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
        max-inline-size: none;
    }

    .section-heading--split > p {
        font-size: 17px;
        margin-block-end: 4px;
        max-inline-size: 470px;
    }

    .section-heading--dark h2,
    .section-heading--dark p {
        color: var(--white);
    }

    .section-heading--dark p {
        color: var(--muted-light);
    }

    .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .tag-list span {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 4px;
        color: var(--ink-soft);
        font-size: 12px;
        padding: 5px 8px;
    }

    .site-header {
        background: var(--petrol);
        border-block-end: 1px solid var(--dark-line);
        color: var(--white);
        position: relative;
        z-index: 100;
    }

    .admin-bar .site-header {
        inset-block-start: auto;
    }

    .site-header.is-scrolled {
        background: var(--petrol);
        box-shadow: none;
    }

    .site-header__inner {
        align-items: center;
        block-size: var(--header-height);
        border-inline: 1px solid var(--dark-line);
        display: grid;
        gap: 36px;
        grid-template-columns: auto 1fr auto;
        padding-inline: 24px;
    }

    .brand {
        align-items: center;
        display: inline-flex;
        text-decoration: none;
    }

    .brand__logo {
        block-size: auto;
        display: block;
        filter: brightness(0) invert(1);
        inline-size: 138px;
    }

    .desktop-nav__list {
        align-items: center;
        display: flex;
        gap: 6px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .desktop-nav__item {
        position: relative;
    }

    .desktop-nav__link {
        align-items: center;
        background: transparent;
        color: #b7c9ce;
        display: inline-flex;
        font-size: 13px;
        gap: 7px;
        min-block-size: 44px;
        padding: 0 12px;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .desktop-nav__link:hover,
    .desktop-nav__item.is-open .desktop-nav__link {
        color: var(--white);
    }

    .desktop-nav__chevron {
        border-block-end: 1px solid currentColor;
        border-inline-end: 1px solid currentColor;
        block-size: 6px;
        inline-size: 6px;
        transform: rotate(45deg) translateY(-2px);
        transition: transform 0.2s ease;
    }

    .desktop-nav__item.is-open .desktop-nav__chevron {
        transform: rotate(225deg) translate(-1px, -1px);
    }

    .service-menu {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        color: var(--ink);
        inline-size: 600px;
        inset-block-start: calc(100% + 8px);
        inset-inline-start: -80px;
        opacity: 0;
        padding: 20px;
        pointer-events: none;
        position: absolute;
        transform: translateY(-6px);
        transition:
            opacity 0.18s ease,
            transform 0.18s ease;
        visibility: hidden;
    }

    .desktop-nav__item.is-open .service-menu,
    .desktop-nav__item--dropdown:hover .service-menu {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
    }

    .service-menu__label {
        color: #7b8587;
        font-size: 11px;
        margin-block-end: 12px;
        text-transform: uppercase;
    }

    .service-menu__grid {
        display: grid;
        gap: 5px;
        grid-template-columns: 1fr 1fr;
    }

    .service-menu__link {
        align-items: center;
        border-radius: 6px;
        display: grid;
        gap: 12px;
        grid-template-columns: auto 1fr;
        padding: 12px;
        text-decoration: none;
    }

    .service-menu__link:hover {
        background: var(--soft);
    }

    .service-menu__icon {
        align-items: center;
        background: var(--blue);
        border-radius: 6px;
        color: var(--petrol);
        display: flex;
        justify-content: center;
        min-block-size: 40px;
        min-inline-size: 40px;
    }

    .service-menu__link strong,
    .service-menu__link small {
        display: block;
    }

    .service-menu__link strong {
        font-size: 14px;
        margin-block-end: 2px;
    }

    .service-menu__link small {
        color: var(--muted);
        font-size: 11px;
    }

    .site-header__actions {
        align-items: center;
        display: flex;
        gap: 16px;
    }

    .site-header__contact {
        color: #b7c9ce;
        font-size: 13px;
        text-decoration: none;
    }

    .site-header__contact:hover {
        color: var(--white);
    }

    .mobile-header__actions,
    .mobile-menu {
        display: none;
    }

    .site-footer {
        background: var(--petrol);
        color: var(--white);
        overflow: hidden;
        padding-block-end: 70px;
        position: relative;
    }

    .footer-cta {
        min-block-size: 560px;
        overflow: hidden;
        position: relative;
    }

    .footer-geometry span {
        background: rgba(255, 255, 255, 0.035);
        position: absolute;
    }

    .footer-geometry__a {
        border-radius: 0 0 100% 0;
        block-size: 320px;
        inline-size: 320px;
        inset-block-start: 0;
        inset-inline-start: 4%;
    }

    .footer-geometry__b {
        block-size: 210px;
        inline-size: 300px;
        inset-block-start: 160px;
        inset-inline-end: 10%;
    }

    .footer-geometry__c {
        border-radius: 100% 0 0 0;
        block-size: 270px;
        inline-size: 270px;
        inset-block-end: -50px;
        inset-inline-end: 2%;
    }

    .footer-cta__inner {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-block-size: 560px;
        position: relative;
        text-align: center;
        z-index: 1;
    }

    .footer-cta h2 {
        color: var(--white);
        font-size: 54px;
        margin-block-end: 22px;
    }

    .footer-cta p {
        color: var(--muted-light);
        font-size: 16px;
        margin-block-end: 26px;
        max-inline-size: 610px;
    }

    .footer-cta__notes {
        display: flex;
        gap: 22px;
        margin-block-start: 18px;
    }

    .footer-cta__notes span {
        align-items: center;
        color: #8aa6af;
        display: flex;
        font-size: 12px;
        gap: 6px;
    }

    .footer-card {
        background: var(--white);
        border-radius: var(--radius);
        color: var(--ink);
        padding: 60px;
        position: relative;
        z-index: 2;
    }

    .footer-card__top {
        display: grid;
        gap: 54px;
        grid-template-columns: 0.75fr 1.6fr 1.1fr;
        padding-block-end: 54px;
    }

    .brand--footer {
        align-self: start;
    }

    .brand--footer .brand__logo {
        filter: none;
        inline-size: min(100%, 190px);
    }

    .footer-links {
        display: grid;
        gap: 38px;
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-links p,
    .newsletter > p {
        color: #91999a;
        font-size: 11px;
        margin-block-end: 15px;
    }

    .footer-links a {
        display: block;
        font-size: 13px;
        margin-block-end: 9px;
        text-decoration: none;
    }

    .footer-links a:hover {
        color: var(--petrol-soft);
        text-decoration: underline;
    }

    .newsletter__field {
        align-items: center;
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 6px;
        display: flex;
        padding: 3px;
    }

    .newsletter__field input {
        background: transparent;
        border: 0;
        inline-size: 100%;
        min-block-size: 42px;
        min-inline-size: 0;
        padding-inline: 12px;
    }

    .newsletter__field button {
        align-items: center;
        background: var(--petrol);
        border-radius: 5px;
        color: var(--white);
        display: flex;
        justify-content: center;
        min-block-size: 40px;
        min-inline-size: 44px;
    }

    .consent {
        align-items: start;
        color: #7c8587;
        display: grid;
        font-size: 10px;
        gap: 8px;
        grid-template-columns: auto 1fr;
        line-height: 1.4;
        margin-block-start: 10px;
    }

    .consent input {
        block-size: 15px;
        inline-size: 15px;
        margin: 1px 0 0;
    }

    .form-status {
        background: #fff3d6;
        border: 1px solid #e6cc8a;
        border-radius: 5px;
        color: #6a5318;
        font-size: 13px;
        margin-block: 0 16px;
        padding: 10px 12px;
    }

    .form-status--success {
        background: #e5f7df;
        border-color: #a8d49a;
        color: #285b1c;
    }

    .newsletter .form-status {
        margin-block: 10px 0;
    }

    .footer-card__statement {
        align-items: end;
        border-block: 1px solid var(--line);
        display: flex;
        justify-content: space-between;
        padding-block: 44px;
    }

    .footer-card__statement p {
        color: var(--ink);
        font-size: 34px;
        line-height: 1.06;
        margin: 0;
    }

    .footer-card__bottom {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding-block-start: 28px;
    }

    .footer-card__bottom > p {
        font-size: 11px;
        margin: 0;
    }

    .footer-card__contact {
        align-items: center;
        display: flex;
        gap: 18px;
    }

    .footer-card__contact a {
        align-items: center;
        display: flex;
        font-size: 11px;
        gap: 5px;
        text-decoration: none;
    }
}

@layer pages {
    .hero {
        background: var(--petrol);
        color: var(--white);
        overflow: hidden;
    }

    .hero--home {
        min-block-size: 1420px;
        padding-block: 92px 74px;
    }

    .hero__copy {
        margin-inline: auto;
        max-inline-size: 920px;
        text-align: center;
    }

    .hero__copy h1 {
        color: var(--white);
        margin-block: 0 24px;
    }

    .hero__copy > p {
        color: #b9cbd1;
        font-size: 19px;
        margin-inline: auto;
        max-inline-size: 720px;
    }

    .hero__actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin-block-start: 30px;
    }

    .hero__trust {
        align-items: center;
        display: flex;
        font-size: 12px !important;
        gap: 7px;
        justify-content: center;
        margin-block-start: 16px;
    }

    .hero-bento {
        display: grid;
        gap: 14px;
        grid-template-columns: 1.75fr 0.85fr;
        grid-template-rows: 285px 285px;
        margin-block-start: 70px;
    }

    .hero-bento > * {
        border: 1px solid var(--dark-line);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .hero-bento__project {
        color: var(--white);
        grid-row: 1 / 3;
        min-block-size: 584px;
        position: relative;
        text-decoration: none;
    }

    .hero-bento__project::after {
        background: linear-gradient(to top, rgba(0, 26, 35, 0.92), transparent 55%);
        content: "";
        inset: 0;
        position: absolute;
    }

    .hero-bento__project img {
        block-size: 100%;
        inline-size: 100%;
        object-fit: cover;
        object-position: top;
        transition: transform 0.7s ease;
    }

    .hero-bento__project:hover img {
        transform: scale(1.025);
    }

    .hero-bento__project-copy {
        display: grid;
        gap: 3px;
        inset-block-end: 30px;
        inset-inline: 30px;
        position: absolute;
        z-index: 1;
    }

    .hero-bento__project-copy small {
        color: #bdd2d8;
        font-size: 12px;
    }

    .hero-bento__project-copy strong {
        font-size: 30px;
        font-weight: 520;
    }

    .hero-bento__project-copy > span {
        align-items: center;
        color: var(--lime);
        display: flex;
        font-size: 13px;
        gap: 7px;
        margin-block-start: 6px;
    }

    .hero-bento__status {
        background: #0b4152;
        padding: 18px;
    }

    .mini-window__top {
        align-items: center;
        border-block-end: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        gap: 6px;
        margin: -4px -4px 18px;
        padding-block-end: 12px;
    }

    .mini-window__top > span {
        background: #547682;
        border-radius: 50%;
        block-size: 6px;
        inline-size: 6px;
    }

    .mini-window__top small {
        color: #8ea8af;
        font-size: 9px;
        margin-inline: auto;
    }

    .hero-bento__status-head {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: auto 1fr auto;
    }

    .status-orb {
        background: var(--lime);
        border: 6px solid rgba(186, 255, 131, 0.15);
        border-radius: 50%;
        block-size: 26px;
        inline-size: 26px;
    }

    .hero-bento__status-head small,
    .hero-bento__status-head strong {
        display: block;
    }

    .hero-bento__status-head small {
        color: #8facb5;
        font-size: 10px;
    }

    .hero-bento__status-head strong {
        font-size: 15px;
        font-weight: 550;
    }

    .status-live {
        background: rgba(186, 255, 131, 0.12);
        border-radius: 4px;
        color: var(--lime);
        font-size: 10px;
        padding: 5px 7px;
    }

    .hero-bento__status ul {
        list-style: none;
        margin-block: 22px 0;
        padding: 0;
    }

    .hero-bento__status li {
        align-items: center;
        border-block-start: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        font-size: 11px;
        justify-content: space-between;
        padding-block: 10px;
    }

    .hero-bento__status li span {
        color: #92abb3;
    }

    .hero-bento__status li strong {
        color: #d8e7ea;
        font-weight: 500;
    }

    .hero-bento__statement {
        background: var(--blue);
        color: var(--ink);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 24px;
    }

    .hero-bento__statement p {
        color: var(--ink);
        font-size: 25px;
        line-height: 1.12;
        margin-block: 0 18px;
    }

    .hero-bento__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .hero-bento__chips span {
        background: var(--white);
        border: 1px solid #cad9df;
        border-radius: 4px;
        color: var(--petrol);
        font-size: 10px;
        padding: 6px 8px;
    }

    .platform-strip {
        align-items: center;
        border-block: 1px solid var(--dark-line);
        display: grid;
        gap: 26px;
        grid-template-columns: auto 1fr;
        margin-block-start: 76px;
        overflow: hidden;
        padding-block: 27px;
    }

    .platform-strip p {
        color: #7896a0;
        font-size: 11px;
        margin: 0;
        white-space: nowrap;
    }

    .platform-strip__track {
        align-items: center;
        display: flex;
        gap: 42px;
        justify-content: space-between;
        min-inline-size: max-content;
    }

    .platform-strip__track span {
        color: #b9cbd0;
        font-size: 14px;
        font-weight: 560;
        white-space: nowrap;
    }
}

@layer pages {
    .problem-section {
        padding-block: 130px 160px;
    }

    .problem-section .section-heading h2 {
        max-inline-size: 760px;
    }

    .stat-cards {
        align-items: center;
        display: grid;
        gap: 18px;
        grid-template-columns: repeat(3, 1fr);
        margin-block-start: 88px;
        padding-inline: 32px;
    }

    .stat-card {
        background: var(--white);
        border: 1px solid rgba(0, 50, 68, 0.12);
        border-radius: var(--radius);
        box-shadow: 0 26px 46px rgba(15, 64, 81, 0.1);
        min-block-size: 290px;
        padding: 32px;
        position: relative;
    }

    .stat-card--left {
        transform: rotate(-4deg) translateY(16px);
    }

    .stat-card--center {
        background: var(--petrol);
        color: var(--white);
        transform: translateY(-12px);
        z-index: 1;
    }

    .stat-card--right {
        transform: rotate(4deg) translateY(16px);
    }

    .stat-card > span {
        color: var(--muted);
        font-size: 12px;
    }

    .stat-card > strong {
        display: block;
        font-size: 46px;
        font-weight: 430;
        line-height: 1;
        margin-block: 62px 20px;
    }

    .stat-card p {
        font-size: 14px;
        margin-block-end: 0;
        max-inline-size: 280px;
    }

    .stat-card--center > span,
    .stat-card--center p {
        color: #a8bec5;
    }

    .story {
        background: var(--white);
        block-size: 290vh;
        min-block-size: 2300px;
        position: relative;
    }

    .story__sticky {
        align-items: center;
        block-size: 100vh;
        display: flex;
        justify-content: center;
        min-block-size: 720px;
        overflow: hidden;
        position: sticky;
        top: 0;
    }

    .admin-bar .story__sticky {
        top: 32px;
    }

    .story__grid {
        background-image: radial-gradient(rgba(0, 50, 68, 0.09) 0.8px, transparent 0.8px);
        background-size: 15px 15px;
        inset: 0;
        mask-image: radial-gradient(circle at center, #000 25%, transparent 78%);
        opacity: 0.7;
        position: absolute;
    }

    .story h2 {
        font-size: 49px;
        margin: 0;
        max-inline-size: 980px;
        position: relative;
        text-align: center;
        z-index: 3;
    }

    .story h2 span {
        --line-progress: 0;
        color: rgba(16, 21, 22, calc(0.12 + (var(--line-progress) * 0.88)));
        display: block;
        filter: blur(calc((1 - var(--line-progress)) * 4px));
        transform: translateY(calc((1 - var(--line-progress)) * 10px));
    }

    .story__visuals {
        inset: 0;
        pointer-events: none;
        position: absolute;
        z-index: 2;
    }

    .story-card {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        opacity: clamp(0, calc((var(--story-progress) - 0.63) * 6), 1);
        overflow: hidden;
        position: absolute;
        transform: translateY(calc((1 - var(--story-progress)) * 90px));
    }

    .story-card--project {
        block-size: 195px;
        inline-size: 285px;
        inset-block-start: 8%;
        inset-inline-start: 9%;
    }

    .story-card--project img {
        block-size: 100%;
        inline-size: 100%;
        object-fit: cover;
        object-position: top;
    }

    .story-card--domain {
        background: var(--white);
        display: grid;
        gap: 3px;
        inline-size: 260px;
        inset-block-start: 12%;
        inset-inline-end: 9%;
        padding: 18px;
    }

    .story-card--domain span {
        color: var(--muted);
        font-size: 11px;
    }

    .story-card--domain strong {
        color: var(--petrol);
        font-size: 20px;
    }

    .story-card--domain small {
        color: #4d8d49;
        font-size: 11px;
    }

    .story-card--progress {
        background: linear-gradient(135deg, #5c665d, #111817);
        color: var(--white);
        inline-size: 290px;
        inset-block-end: 8%;
        inset-inline-start: 7%;
        padding: 26px;
    }

    .story-card--progress strong,
    .story-card--progress span {
        display: block;
    }

    .story-card--progress strong {
        font-size: 38px;
        font-weight: 430;
    }

    .story-card--progress span {
        color: #cbd4d1;
        font-size: 13px;
    }

    .story-card--progress div {
        background: rgba(255, 255, 255, 0.18);
        block-size: 4px;
        margin-block-start: 24px;
    }

    .story-card--progress i {
        background: var(--lime);
        block-size: 100%;
        display: block;
        inline-size: calc(var(--story-progress) * 100%);
    }

    .story-card--team {
        block-size: 210px;
        inline-size: 300px;
        inset-block-end: 7%;
        inset-inline-end: 5%;
    }

    .story-card--team img {
        block-size: 100%;
        inline-size: 100%;
        object-fit: cover;
    }

    .story-card--team span {
        background: rgba(0, 39, 53, 0.92);
        color: var(--white);
        font-size: 11px;
        inset-block-end: 10px;
        inset-inline: 10px;
        padding: 8px 10px;
        position: absolute;
    }

    .core-services {
        padding-block: 140px 150px;
    }

    .feature-grid {
        display: grid;
        gap: 16px;
        grid-template-columns: 1fr 1fr;
    }

    .feature-card {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        display: grid;
        min-block-size: 560px;
        overflow: hidden;
        padding: 42px;
        position: relative;
    }

    .feature-card--website {
        align-items: center;
        grid-column: 1 / -1;
        grid-template-columns: 0.7fr 1.3fr;
        min-block-size: 630px;
    }

    .feature-card__copy {
        align-self: start;
        max-inline-size: 420px;
        position: relative;
        z-index: 2;
    }

    .feature-card__icon {
        align-items: center;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 6px;
        color: var(--petrol);
        display: flex;
        inline-size: 46px;
        justify-content: center;
        min-block-size: 46px;
    }

    .feature-card__number {
        color: #9aa4a5;
        font-size: 11px;
        margin-block: 76px 10px;
    }

    .feature-card h3 {
        font-size: 39px;
        margin-block-end: 16px;
    }

    .feature-card__copy > p:not(.feature-card__number) {
        font-size: 16px;
        max-inline-size: 340px;
    }

    .feature-card__copy > a {
        align-items: center;
        color: var(--petrol);
        display: inline-flex;
        font-size: 13px;
        font-weight: 650;
        gap: 7px;
        margin-block-start: 22px;
        text-decoration: none;
    }

    .browser-visual {
        background: var(--white);
        border: 1px solid #ccd4d4;
        border-radius: var(--radius);
        box-shadow: 0 24px 55px rgba(0, 50, 68, 0.12);
        inline-size: 100%;
        justify-self: end;
        max-inline-size: 670px;
        overflow: hidden;
        transform: rotate(1.5deg) translate(38px, 35px);
    }

    .browser-visual__bar,
    .service-browser__bar {
        align-items: center;
        background: #edf0ef;
        block-size: 38px;
        display: flex;
        gap: 6px;
        padding-inline: 13px;
    }

    .browser-visual__bar > span,
    .service-browser__bar > span {
        background: #bdc6c5;
        border-radius: 50%;
        block-size: 6px;
        inline-size: 6px;
    }

    .browser-visual__bar i,
    .service-browser__bar i {
        background: var(--white);
        border-radius: 4px;
        color: #98a0a0;
        font-size: 8px;
        font-style: normal;
        margin-inline: auto;
        padding: 4px 50px;
    }

    .browser-visual__body {
        padding: 20px;
    }

    .browser-visual__nav {
        background: #dce3e1;
        block-size: 10px;
        inline-size: 42%;
        margin-block-end: 52px;
    }

    .browser-visual__hero {
        background: var(--petrol);
        border-radius: 5px;
        color: var(--white);
        padding: 38px;
    }

    .browser-visual__hero small,
    .browser-visual__hero strong {
        display: block;
    }

    .browser-visual__hero small {
        color: #9db6be;
        font-size: 8px;
        margin-block-end: 12px;
    }

    .browser-visual__hero strong {
        font-size: 28px;
        font-weight: 430;
        line-height: 1.05;
    }

    .browser-visual__hero span {
        background: var(--lime);
        block-size: 21px;
        border-radius: 4px;
        display: block;
        inline-size: 82px;
        margin-block-start: 20px;
    }

    .browser-visual__cards {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(3, 1fr);
        margin-block-start: 12px;
    }

    .browser-visual__cards i {
        background: var(--blue);
        block-size: 84px;
        border-radius: 4px;
    }

    .feature-card--hosting,
    .feature-card--domain {
        grid-template-rows: auto 1fr;
    }

    .feature-card--hosting {
        background: var(--blue);
    }

    .hosting-visual {
        align-self: end;
        display: grid;
        gap: 8px;
        margin-block: 46px -43px;
        transform: translateX(50px);
    }

    .hosting-visual > div {
        align-items: center;
        background: var(--white);
        border: 1px solid #cbdadf;
        border-radius: 6px;
        box-shadow: 0 12px 30px rgba(0, 50, 68, 0.08);
        display: grid;
        gap: 16px;
        grid-template-columns: 1fr auto auto;
        padding: 18px 20px;
    }

    .hosting-visual span {
        color: var(--muted);
        font-size: 12px;
    }

    .hosting-visual strong {
        color: var(--petrol);
        font-size: 13px;
    }

    .hosting-visual i {
        background: #67b56a;
        border-radius: 50%;
        block-size: 8px;
        inline-size: 8px;
    }

    .feature-card--domain {
        background: #edf2ed;
    }

    .domain-visual {
        align-items: center;
        align-self: end;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        display: grid;
        gap: 0;
        grid-template-columns: 1fr auto auto;
        margin-block-end: 22px;
        padding: 10px;
    }

    .domain-visual span {
        color: var(--muted);
        font-size: 16px;
        padding-inline-start: 10px;
    }

    .domain-visual strong {
        color: var(--petrol);
    }

    .domain-visual i {
        color: #5c9960;
        display: none;
        font-size: 10px;
        font-style: normal;
    }

    .domain-visual button {
        background: var(--petrol);
        border-radius: 5px;
        color: var(--white);
        min-block-size: 42px;
        padding-inline: 15px;
    }

    .growth-services {
        background: var(--petrol);
        color: var(--white);
        padding-block: 140px;
    }

    .growth-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(3, 1fr);
    }

    .growth-card {
        background: #0a4253;
        border: 1px solid var(--dark-line);
        border-radius: var(--radius);
        color: var(--white);
        display: flex;
        flex-direction: column;
        min-block-size: 510px;
        overflow: hidden;
        padding: 32px;
        position: relative;
        text-decoration: none;
        transition:
            background-color 0.25s ease,
            transform 0.25s ease;
    }

    .growth-card:hover {
        background: #105267;
        transform: translateY(-5px);
    }

    .growth-card::after {
        border: 74px solid rgba(255, 255, 255, 0.035);
        border-block-start-color: transparent;
        border-inline-end-color: transparent;
        block-size: 220px;
        content: "";
        inline-size: 220px;
        inset-block-end: -80px;
        inset-inline-end: -70px;
        position: absolute;
    }

    .growth-card__number {
        color: #77949d;
        font-size: 11px;
    }

    .growth-card__icon {
        align-items: center;
        background: var(--lime);
        border-radius: 6px;
        color: var(--petrol);
        display: flex;
        inline-size: 54px;
        justify-content: center;
        margin-block: 75px auto;
        min-block-size: 54px;
    }

    .growth-card h3 {
        font-size: 31px;
        margin-block-end: 14px;
    }

    .growth-card p {
        color: #a9bec5;
        font-size: 14px;
    }

    .growth-card__link {
        align-items: center;
        color: var(--lime);
        display: flex;
        font-size: 12px;
        gap: 7px;
        margin-block-start: auto;
        position: relative;
        z-index: 1;
    }

    .principles {
        padding-block: 120px;
    }

    .section-kicker {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-block-end: 34px;
    }

    .carousel-controls,
    .project-slider__controls > div {
        display: flex;
        gap: 8px;
    }

    .carousel-controls button,
    .project-slider__controls button {
        align-items: center;
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 50%;
        color: var(--petrol);
        display: flex;
        justify-content: center;
        min-block-size: 44px;
        min-inline-size: 44px;
    }

    .principles__track {
        display: grid;
        gap: 14px;
        grid-auto-columns: calc((100% - 28px) / 3);
        grid-auto-flow: column;
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }

    .principles__track::-webkit-scrollbar,
    .project-slider::-webkit-scrollbar {
        display: none;
    }

    .principle-card {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        display: flex;
        flex-direction: column;
        min-block-size: 420px;
        padding: 32px;
        scroll-snap-align: start;
    }

    .principle-card--blue {
        background: var(--blue);
    }

    .principle-card--lime {
        background: var(--lime);
    }

    .principle-card > span {
        color: var(--muted);
        font-size: 11px;
    }

    .principle-card p {
        color: var(--ink);
        font-size: 28px;
        line-height: 1.15;
        margin-block: 92px 30px;
    }

    .principle-card strong {
        color: var(--petrol);
        font-size: 13px;
        margin-block-start: auto;
    }

    .projects-section {
        background: var(--soft);
        padding-block: 140px;
    }

    .project-slider {
        display: grid;
        gap: 18px;
        grid-auto-columns: 100%;
        grid-auto-flow: column;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .project-slide {
        display: grid;
        gap: 18px;
        grid-template-columns: 1.5fr 0.65fr;
        min-inline-size: 0;
        scroll-snap-align: start;
    }

    .project-slide__media {
        border-radius: var(--radius);
        display: block;
        min-block-size: 620px;
        overflow: hidden;
        position: relative;
    }

    .project-slide__media img {
        block-size: 100%;
        inline-size: 100%;
        object-fit: cover;
        object-position: top;
        transition: transform 0.7s ease;
    }

    .project-slide__media:hover img {
        transform: scale(1.02);
    }

    .project-slide__media > span {
        align-items: center;
        background: var(--white);
        border-radius: 6px;
        color: var(--petrol);
        display: flex;
        font-size: 12px;
        gap: 6px;
        inset-block-end: 18px;
        inset-inline-end: 18px;
        padding: 10px 12px;
        position: absolute;
    }

    .project-slide__copy {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        display: flex;
        flex-direction: column;
        justify-content: end;
        padding: 38px;
    }

    .project-slide__copy > p:first-child {
        color: var(--petrol-soft);
        font-size: 12px;
    }

    .project-slide__copy h3 {
        font-size: 37px;
        margin-block-end: 16px;
    }

    .project-slide__copy .tag-list {
        margin-block-start: 20px;
    }

    .project-slider__controls {
        align-items: center;
        display: flex;
        justify-content: space-between;
        margin-block-start: 24px;
    }

    .project-slider__controls > span {
        color: var(--muted);
        font-size: 13px;
    }

    .project-slider__controls strong {
        color: var(--ink);
    }

    .workflow-section {
        padding-block: 145px;
    }

    .workflow {
        display: grid;
        gap: 28px;
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .workflow__tabs {
        border-block-start: 1px solid var(--line);
    }

    .workflow__tabs button {
        background: transparent;
        border-block-end: 1px solid var(--line);
        color: var(--muted);
        display: grid;
        gap: 7px 12px;
        grid-template-columns: auto 1fr;
        inline-size: 100%;
        min-block-size: 108px;
        padding: 22px 10px;
        text-align: start;
    }

    .workflow__tabs button[aria-selected="true"] {
        color: var(--petrol);
    }

    .workflow__tabs button > span {
        font-size: 10px;
        grid-row: 1 / 3;
        padding-block-start: 5px;
    }

    .workflow__tabs strong {
        font-size: 19px;
        font-weight: 540;
    }

    .workflow__tabs small {
        color: var(--muted);
        font-size: 11px;
    }

    .workflow-panel {
        background: var(--petrol);
        border-radius: var(--radius);
        color: var(--white);
        display: grid;
        gap: 34px;
        grid-template-columns: 0.7fr 1.3fr;
        min-block-size: 610px;
        overflow: hidden;
        padding: 46px;
    }

    .workflow-panel[hidden] {
        display: none;
    }

    .workflow-panel__copy {
        align-self: center;
    }

    .workflow-panel h3 {
        font-size: 38px;
        margin-block-end: 20px;
    }

    .workflow-panel p,
    .workflow-panel li {
        color: #aac0c6;
        font-size: 14px;
    }

    .workflow-panel ul {
        list-style: none;
        margin-block-start: 26px;
        padding: 0;
    }

    .workflow-panel li {
        border-block-start: 1px solid var(--dark-line);
        padding-block: 9px;
    }

    .workflow-board,
    .growth-dashboard {
        align-self: center;
        background: var(--white);
        border-radius: var(--radius);
        color: var(--ink);
        min-block-size: 400px;
        padding: 30px;
        transform: translateX(40px);
    }

    .workflow-board > span {
        color: var(--muted);
        font-size: 11px;
    }

    .workflow-board > div {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
        margin-block-start: 36px;
    }

    .workflow-board i {
        align-items: center;
        background: var(--blue);
        border: 1px solid #c9dbe1;
        border-radius: 5px;
        display: flex;
        font-size: 12px;
        font-style: normal;
        justify-content: center;
        min-block-size: 78px;
    }

    .workflow-board b {
        background: var(--lime);
        block-size: 9px;
        display: block;
        inline-size: 72%;
        margin-block-start: 36px;
    }

    .workflow-panel__image {
        align-self: stretch;
        block-size: 100%;
        border-radius: var(--radius);
        inline-size: 100%;
        object-fit: cover;
        object-position: top;
        transform: translateX(38px);
    }

    .growth-dashboard {
        display: grid;
        gap: 10px;
    }

    .growth-dashboard > div:not(.growth-dashboard__chart) {
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 5px;
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr auto auto;
        padding: 14px;
    }

    .growth-dashboard small {
        color: var(--muted);
    }

    .growth-dashboard strong {
        color: var(--petrol);
        font-size: 13px;
    }

    .growth-dashboard i {
        background: #65b26a;
        border-radius: 50%;
        block-size: 8px;
        inline-size: 8px;
    }

    .growth-dashboard__chart {
        align-items: end;
        background: var(--blue);
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-block-start: 10px;
        min-block-size: 220px;
        padding: 26px;
    }

    .growth-dashboard__chart span {
        background: var(--petrol-soft);
        inline-size: 14%;
    }

    .growth-dashboard__chart span:nth-child(1) { block-size: 35%; }
    .growth-dashboard__chart span:nth-child(2) { block-size: 48%; }
    .growth-dashboard__chart span:nth-child(3) { block-size: 42%; }
    .growth-dashboard__chart span:nth-child(4) { block-size: 70%; }
    .growth-dashboard__chart span:nth-child(5) { block-size: 88%; background: var(--lime); }

    .team-section {
        background: var(--blue);
        padding-block: 140px;
    }

    .team-layout {
        align-items: center;
        display: grid;
        gap: 80px;
        grid-template-columns: minmax(380px, 0.9fr) minmax(0, 1.1fr);
    }

    .team-layout__photo {
        border-radius: var(--radius);
        min-block-size: 650px;
        overflow: hidden;
        position: relative;
    }

    .team-layout__photo::after {
        background: linear-gradient(to top, rgba(0, 39, 53, 0.82), transparent 45%);
        content: "";
        inset: 0;
        position: absolute;
    }

    .team-layout__photo img {
        block-size: 100%;
        inline-size: 100%;
        object-fit: cover;
    }

    .team-layout__photo > div {
        display: grid;
        inset-block-end: 28px;
        inset-inline: 28px;
        position: absolute;
        z-index: 1;
    }

    .team-layout__photo strong {
        color: var(--white);
        font-size: 26px;
    }

    .team-layout__photo span {
        color: #c0d1d6;
        font-size: 12px;
    }

    .team-layout__copy h2 {
        margin-block-end: 24px;
    }

    .team-layout__copy > p {
        font-size: 17px;
        max-inline-size: 630px;
    }

    .team-disciplines {
        border-block: 1px solid rgba(0, 50, 68, 0.13);
        display: grid;
        gap: 0;
        grid-template-columns: 1fr 1fr;
        margin-block: 34px;
    }

    .team-disciplines span {
        border-block-end: 1px solid rgba(0, 50, 68, 0.13);
        color: var(--petrol);
        font-size: 13px;
        padding-block: 12px;
    }

    .team-disciplines span:nth-last-child(-n + 2) {
        border-block-end: 0;
    }

    .team-layout__actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .packages-preview {
        padding-block: 140px;
    }

    .package-grid,
    .pricing-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(3, 1fr);
    }

    .package-card,
    .pricing-card {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        display: flex;
        flex-direction: column;
        min-block-size: 570px;
        padding: 32px;
    }

    .package-card--featured,
    .pricing-card--featured {
        background: var(--petrol);
        border-color: var(--petrol);
        color: var(--white);
        transform: translateY(-18px);
    }

    .package-card__label,
    .pricing-card__top > span {
        color: var(--muted);
        font-size: 11px;
    }

    .package-card--featured .package-card__label,
    .package-card--featured > p,
    .package-card--featured li,
    .pricing-card--featured .pricing-card__top > span,
    .pricing-card--featured p,
    .pricing-card--featured li {
        color: #a8bec5;
    }

    .package-card h3,
    .pricing-card h2 {
        font-size: 32px;
        margin-block: 30px 12px;
    }

    .package-card__price {
        font-size: 21px;
        font-weight: 520;
        margin-block: 25px;
    }

    .package-card ul,
    .pricing-card ul {
        border-block-start: 1px solid var(--line);
        list-style: none;
        margin-block: 28px 0;
        padding: 18px 0 0;
    }

    .package-card--featured ul,
    .pricing-card--featured ul {
        border-color: var(--dark-line);
    }

    .package-card li,
    .pricing-card li {
        align-items: start;
        color: var(--muted);
        display: flex;
        font-size: 13px;
        gap: 8px;
        padding-block: 6px;
    }

    .package-card li .icon,
    .pricing-card li .icon {
        color: #4f9255;
        margin-block-start: 2px;
    }

    .packages-preview__link {
        margin-block: 24px 0;
        text-align: center;
    }

    .blog-preview {
        background: var(--petrol);
        padding-block: 140px;
    }

    .post-grid {
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(3, 1fr);
    }

    .post-card {
        background: #0a4253;
        border: 1px solid var(--dark-line);
        border-radius: var(--radius);
        color: var(--white);
        overflow: hidden;
    }

    .post-card__media {
        aspect-ratio: 1.35;
        display: block;
        overflow: hidden;
        position: relative;
    }

    .post-card__media::after {
        background: rgba(0, 39, 53, 0.18);
        content: "";
        inset: 0;
        position: absolute;
    }

    .post-card__media img {
        block-size: 100%;
        filter: saturate(0.35);
        inline-size: 100%;
        object-fit: cover;
        object-position: top;
        transition:
            filter 0.3s ease,
            transform 0.5s ease;
    }

    .post-card:hover .post-card__media img {
        filter: saturate(0.8);
        transform: scale(1.02);
    }

    .post-card__media > span {
        background: var(--white);
        border-radius: 4px;
        color: var(--petrol);
        font-size: 10px;
        inset-block-end: 12px;
        inset-inline-start: 12px;
        padding: 5px 7px;
        position: absolute;
        z-index: 1;
    }

    .post-card__copy {
        padding: 26px;
    }

    .post-card__copy > p:first-child {
        color: #7fa0aa;
        font-size: 10px;
        text-transform: uppercase;
    }

    .post-card h3,
    .post-card h2 {
        font-size: 24px;
        margin-block-end: 14px;
    }

    .post-card h3 a,
    .post-card h2 a {
        text-decoration: none;
    }

    .post-card__copy > p {
        color: #a8bdc3;
        font-size: 13px;
    }

    .post-card__link {
        align-items: center;
        color: var(--lime);
        display: inline-flex;
        font-size: 12px;
        gap: 7px;
        margin-block-start: 10px;
        text-decoration: none;
    }

    .faq-section {
        padding-block: 140px;
    }

    .faq-layout {
        display: grid;
        gap: 90px;
        grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
    }

    .faq-layout__heading {
        align-self: start;
        position: sticky;
        top: calc(var(--header-height) + 36px);
    }

    .faq-layout__heading h2 {
        font-size: 48px;
        margin-block-end: 24px;
    }

    .faq-layout__heading > p {
        max-inline-size: 350px;
    }

    .faq-layout__heading .button {
        margin-block-start: 16px;
    }

    .faq-list {
        border-block-start: 1px solid var(--line);
    }

    .faq-list details {
        border-block-end: 1px solid var(--line);
    }

    .faq-list summary {
        align-items: center;
        cursor: pointer;
        display: flex;
        font-size: 16px;
        font-weight: 520;
        gap: 20px;
        justify-content: space-between;
        list-style: none;
        min-block-size: 76px;
        padding-block: 22px;
    }

    .faq-list summary::-webkit-details-marker {
        display: none;
    }

    .faq-list summary i {
        block-size: 14px;
        flex: 0 0 auto;
        inline-size: 14px;
        position: relative;
    }

    .faq-list summary i::before,
    .faq-list summary i::after {
        background: var(--petrol);
        content: "";
        inset-block-start: 6px;
        inset-inline: 0;
        block-size: 1px;
        position: absolute;
        transition: transform 0.2s ease;
    }

    .faq-list summary i::after {
        transform: rotate(90deg);
    }

    .faq-list details[open] summary i::after {
        transform: rotate(0);
    }

    .faq-list details > div {
        max-inline-size: 720px;
        padding-block: 0 24px;
    }

    .faq-list details p {
        font-size: 14px;
        margin-block-end: 0;
    }
}

@layer pages {
    .service-hero,
    .archive-hero,
    .pricing-hero,
    .contact-hero,
    .blog-hero,
    .article-hero,
    .legal-hero,
    .page-hero,
    .not-found__hero {
        background: var(--petrol);
        color: var(--white);
    }

    .service-hero {
        min-block-size: 850px;
        overflow: hidden;
        padding-block: 100px 120px;
    }

    .service-hero__inner {
        align-items: center;
        display: grid;
        gap: 70px;
        grid-template-columns: minmax(0, 0.92fr) minmax(450px, 1.08fr);
    }

    .service-hero__copy h1 {
        font-size: 62px;
        margin-block: 0 24px;
    }

    .service-hero__copy > p {
        color: #b2c6cc;
        font-size: 18px;
        max-inline-size: 600px;
    }

    .service-hero__copy .hero__actions {
        justify-content: flex-start;
    }

    .service-hero__notes {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        margin-block-start: 18px;
    }

    .service-hero__notes span {
        align-items: center;
        color: #89a6af;
        display: flex;
        font-size: 11px;
        gap: 6px;
    }

    .service-visual {
        background: #0b4253;
        border: 1px solid var(--dark-line);
        border-radius: var(--radius);
        min-block-size: 590px;
        overflow: hidden;
        padding: 54px;
        position: relative;
    }

    .service-visual::before,
    .service-visual::after {
        background: rgba(255, 255, 255, 0.025);
        content: "";
        position: absolute;
    }

    .service-visual::before {
        block-size: 170px;
        inline-size: 260px;
        inset-block-start: 0;
        inset-inline-end: 0;
    }

    .service-visual::after {
        border-radius: 100% 0 0 0;
        block-size: 220px;
        inline-size: 220px;
        inset-block-end: -20px;
        inset-inline-end: -30px;
    }

    .service-browser {
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: 0 28px 52px rgba(0, 20, 28, 0.24);
        inline-size: 112%;
        margin-block-start: 55px;
        overflow: hidden;
        position: relative;
        transform: rotate(2deg);
        z-index: 1;
    }

    .service-browser__page {
        min-block-size: 390px;
        padding: 52px;
    }

    .service-browser__page small,
    .service-browser__page strong {
        display: block;
    }

    .service-browser__page small {
        color: var(--petrol-soft);
        font-size: 10px;
    }

    .service-browser__page strong {
        color: var(--petrol);
        font-size: 38px;
        font-weight: 430;
        line-height: 1.03;
        margin-block-start: 14px;
    }

    .service-browser__page b {
        background: var(--lime);
        block-size: 32px;
        border-radius: 5px;
        display: block;
        inline-size: 120px;
        margin-block-start: 24px;
    }

    .service-browser__page > div {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(3, 1fr);
        margin-block-start: 46px;
    }

    .service-browser__page > div i {
        background: var(--blue);
        block-size: 68px;
        border-radius: 4px;
    }

    .floating-pill {
        background: var(--lime);
        border-radius: 5px;
        color: var(--petrol);
        font-size: 11px;
        font-weight: 650;
        padding: 9px 11px;
        position: absolute;
        z-index: 2;
    }

    .floating-pill--top {
        inset-block-start: 34px;
        inset-inline-end: 28px;
    }

    .floating-pill--bottom {
        inset-block-end: 32px;
        inset-inline-start: 30px;
    }

    .server-stack {
        display: grid;
        gap: 13px;
        margin-block-start: 78px;
        position: relative;
        z-index: 1;
    }

    .server-stack > div {
        align-items: center;
        background: var(--white);
        border-radius: 6px;
        box-shadow: 0 18px 36px rgba(0, 20, 28, 0.18);
        color: var(--ink);
        display: grid;
        gap: 12px;
        grid-template-columns: auto 1fr auto auto;
        padding: 20px;
    }

    .server-stack > div > span {
        background: var(--blue);
        border: 2px solid #c3dce6;
        border-radius: 50%;
        block-size: 22px;
        inline-size: 22px;
    }

    .server-stack strong {
        font-size: 14px;
    }

    .server-stack small {
        color: var(--muted);
    }

    .server-stack i,
    .uptime-panel i {
        background: #6dbb70;
        border-radius: 50%;
        block-size: 9px;
        inline-size: 9px;
    }

    .uptime-panel {
        background: var(--lime);
        border-radius: 6px;
        color: var(--petrol);
        display: grid;
        gap: 4px;
        grid-template-columns: 1fr auto;
        margin-block-start: 18px;
        padding: 20px;
        position: relative;
        z-index: 1;
    }

    .uptime-panel small {
        color: #547045;
        font-size: 9px;
    }

    .uptime-panel strong {
        font-size: 17px;
        grid-column: 1;
    }

    .uptime-panel > span {
        align-items: center;
        display: flex;
        grid-column: 2;
        grid-row: 1 / 3;
    }

    .domain-search,
    .search-panel,
    .ads-panel {
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: 0 26px 52px rgba(0, 20, 28, 0.2);
        color: var(--ink);
        margin-block-start: 58px;
        padding: 28px;
        position: relative;
        z-index: 1;
    }

    .domain-search > small {
        color: var(--muted);
        font-size: 10px;
    }

    .domain-search > div {
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 6px;
        display: grid;
        gap: 5px;
        grid-template-columns: 1fr auto auto;
        margin-block-start: 15px;
        padding: 6px;
    }

    .domain-search span {
        color: var(--muted);
        padding-inline-start: 10px;
    }

    .domain-search strong {
        color: var(--petrol);
    }

    .domain-search button {
        background: var(--petrol);
        border-radius: 5px;
        color: var(--white);
        min-block-size: 42px;
        padding-inline: 16px;
    }

    .dns-panel {
        background: var(--blue);
        border-radius: var(--radius);
        color: var(--ink);
        display: grid;
        margin-block-start: 16px;
        padding: 18px;
        position: relative;
        z-index: 1;
    }

    .dns-panel > span {
        align-items: center;
        border-block-end: 1px solid rgba(0, 50, 68, 0.12);
        display: grid;
        gap: 12px;
        grid-template-columns: auto 1fr auto;
        padding-block: 12px;
    }

    .dns-panel > span:last-child {
        border: 0;
    }

    .dns-panel small {
        background: var(--white);
        border-radius: 4px;
        color: var(--petrol);
        font-size: 9px;
        padding: 5px;
    }

    .dns-panel strong {
        font-size: 12px;
    }

    .dns-panel i {
        color: #49884e;
        font-size: 10px;
        font-style: normal;
    }

    .search-panel > div {
        align-items: center;
        border: 1px solid var(--line);
        border-radius: 20px;
        color: var(--muted);
        display: flex;
        gap: 8px;
        padding: 10px 14px;
    }

    .search-panel ol {
        list-style: none;
        margin-block: 22px 0;
        padding: 0;
    }

    .search-panel li {
        align-items: start;
        border-block-start: 1px solid var(--line);
        display: grid;
        gap: 10px;
        grid-template-columns: auto 1fr auto;
        padding-block: 14px;
    }

    .search-panel li small {
        color: var(--muted);
    }

    .search-panel li span,
    .search-panel li strong,
    .search-panel li i {
        display: block;
    }

    .search-panel li strong {
        color: var(--petrol);
        font-size: 12px;
    }

    .search-panel li i {
        color: var(--muted);
        font-size: 9px;
        font-style: normal;
    }

    .search-panel li b {
        background: var(--lime);
        block-size: 9px;
        inline-size: 36px;
    }

    .ads-panel__head {
        align-items: center;
        display: flex;
        justify-content: space-between;
    }

    .ads-panel__head strong {
        background: #e5f5de;
        border-radius: 4px;
        color: #4d8650;
        font-size: 10px;
        padding: 5px 7px;
    }

    .ads-panel__chart {
        align-items: end;
        background: var(--blue);
        display: flex;
        gap: 8px;
        margin-block: 24px;
        min-block-size: 190px;
        padding: 24px;
    }

    .ads-panel__chart i {
        background: var(--petrol-soft);
        inline-size: 16%;
    }

    .ads-panel__chart i:nth-child(1) { block-size: 35%; }
    .ads-panel__chart i:nth-child(2) { block-size: 44%; }
    .ads-panel__chart i:nth-child(3) { block-size: 58%; }
    .ads-panel__chart i:nth-child(4) { block-size: 52%; }
    .ads-panel__chart i:nth-child(5) { block-size: 78%; }
    .ads-panel__chart i:nth-child(6) { background: var(--lime); block-size: 92%; }

    .ads-panel ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ads-panel li {
        display: flex;
        font-size: 11px;
        justify-content: space-between;
        padding-block: 6px;
    }

    .ads-panel li span {
        color: var(--muted);
    }

    .creative-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: 1fr 1fr;
        margin-block-start: 40px;
        position: relative;
        z-index: 1;
    }

    .creative-grid > div {
        background: var(--white);
        border-radius: var(--radius);
        color: var(--ink);
        display: flex;
        flex-direction: column;
        min-block-size: 220px;
        padding: 18px;
    }

    .creative-grid > div:first-child {
        grid-row: 1 / 3;
        min-block-size: 455px;
    }

    .creative-grid span {
        color: var(--muted);
        font-size: 9px;
    }

    .creative-grid strong {
        font-size: 15px;
        margin-block-start: 8px;
    }

    .creative-grid i {
        background: linear-gradient(140deg, var(--blue), #bdd6bf);
        border-radius: 5px;
        flex: 1;
        margin-block-start: 14px;
    }

    .deliverables-section,
    .process-section {
        padding-block: 140px;
    }

    .deliverables-grid {
        border-block-start: 1px solid var(--line);
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .deliverable {
        border-inline-end: 1px solid var(--line);
        min-block-size: 330px;
        padding: 32px;
    }

    .deliverable:first-child {
        padding-inline-start: 0;
    }

    .deliverable:last-child {
        border-inline-end: 0;
    }

    .deliverable > span,
    .process-card > span,
    .pricing-explainer__grid article > span {
        color: var(--muted);
        font-size: 11px;
    }

    .deliverable h3 {
        font-size: 24px;
        margin-block: 90px 14px;
    }

    .deliverable p {
        font-size: 14px;
        margin: 0;
    }

    .service-principle {
        background: var(--petrol);
        color: var(--white);
        min-block-size: 620px;
        padding-block: 150px;
    }

    .service-principle__inner {
        text-align: center;
    }

    .service-principle h2 {
        font-size: 57px;
        margin-inline: auto;
        max-inline-size: 980px;
    }

    .service-principle p {
        color: #a9bec5;
        margin: 26px auto 0;
        max-inline-size: 680px;
    }

    .process-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(3, 1fr);
    }

    .process-card {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        min-block-size: 360px;
        padding: 32px;
    }

    .process-card h3 {
        font-size: 29px;
        margin-block: 120px 16px;
    }

    .process-card p {
        font-size: 14px;
    }

    .related-section {
        padding-block: 140px;
    }

    .related-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(3, 1fr);
    }

    .related-card {
        background: var(--white);
        border: 1px solid rgba(0, 50, 68, 0.12);
        border-radius: var(--radius);
        color: var(--ink);
        display: flex;
        flex-direction: column;
        min-block-size: 380px;
        padding: 30px;
        position: relative;
        text-decoration: none;
        transition: transform 0.25s ease;
    }

    .related-card:hover {
        transform: translateY(-5px);
    }

    .related-card > span {
        align-items: center;
        background: var(--blue);
        border-radius: 6px;
        color: var(--petrol);
        display: flex;
        inline-size: 48px;
        justify-content: center;
        min-block-size: 48px;
    }

    .related-card h3 {
        font-size: 28px;
        margin-block: 100px 14px;
    }

    .related-card p {
        font-size: 13px;
    }

    .related-card > i {
        color: var(--petrol);
        inset-block-start: 28px;
        inset-inline-end: 28px;
        position: absolute;
    }

    .archive-hero,
    .blog-hero {
        padding-block: 105px 0;
    }

    .archive-hero__inner,
    .blog-hero__heading {
        margin-block-end: 72px;
        max-inline-size: 850px;
        text-align: center;
    }

    .archive-hero__inner h1,
    .blog-hero__heading h1 {
        margin-block: 0 22px;
    }

    .archive-hero__inner p,
    .blog-hero__heading p {
        color: #abc0c6;
        font-size: 18px;
        margin-inline: auto;
        max-inline-size: 670px;
    }

    .featured-project,
    .featured-post {
        background: var(--white);
        border-radius: var(--radius) var(--radius) 0 0;
        color: var(--ink);
        display: grid;
        grid-template-columns: 1.15fr 0.85fr;
        min-block-size: 560px;
        overflow: hidden;
    }

    .featured-project__media,
    .featured-post__media {
        display: block;
        min-block-size: 560px;
        overflow: hidden;
    }

    .featured-project__media img,
    .featured-post__media img {
        block-size: 100%;
        inline-size: 100%;
        object-fit: cover;
        object-position: top;
    }

    .featured-project__copy,
    .featured-post__copy {
        align-self: center;
        padding: 54px;
    }

    .featured-project__copy > p:first-of-type,
    .featured-post__copy > p:first-of-type {
        color: var(--petrol-soft);
        font-size: 11px;
    }

    .featured-project__copy h2,
    .featured-post__copy h2 {
        font-size: 42px;
        margin-block: 12px 18px;
    }

    .featured-post__copy h2 a {
        text-decoration: none;
    }

    .featured-project__copy .tag-list {
        margin-block: 24px;
    }

    .project-archive,
    .blog-archive {
        padding-block: 110px 140px;
    }

    .project-filter,
    .blog-filters {
        border-block-end: 1px solid var(--line);
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-block-end: 52px;
        padding-block-end: 20px;
    }

    .project-filter span,
    .blog-filters span {
        border: 1px solid var(--line);
        border-radius: 20px;
        color: var(--muted);
        font-size: 12px;
        padding: 8px 13px;
    }

    .project-filter .is-active,
    .blog-filters .is-active {
        background: var(--petrol);
        border-color: var(--petrol);
        color: var(--white);
    }

    .project-archive__grid {
        display: grid;
        gap: 70px 16px;
        grid-template-columns: repeat(2, 1fr);
    }

    .archive-project-card__media {
        aspect-ratio: 1.35;
        border-radius: var(--radius);
        display: block;
        overflow: hidden;
        position: relative;
    }

    .archive-project-card__media img {
        block-size: 100%;
        inline-size: 100%;
        object-fit: cover;
        object-position: top;
        transition: transform 0.6s ease;
    }

    .archive-project-card:hover img {
        transform: scale(1.02);
    }

    .archive-project-card__media > span {
        align-items: center;
        background: var(--white);
        border-radius: 50%;
        color: var(--petrol);
        display: flex;
        inset-block-end: 14px;
        inset-inline-end: 14px;
        justify-content: center;
        min-block-size: 42px;
        min-inline-size: 42px;
        position: absolute;
    }

    .archive-project-card__copy {
        padding-block-start: 22px;
    }

    .archive-project-card__copy > p:first-child {
        color: var(--petrol-soft);
        font-size: 11px;
    }

    .archive-project-card h2 {
        font-size: 31px;
        margin-block: 8px 12px;
    }

    .archive-project-card h2 a {
        text-decoration: none;
    }

    .archive-project-card__copy > p {
        max-inline-size: 520px;
    }

    .project-proof {
        padding-block: 120px;
    }

    .project-proof__inner {
        align-items: end;
        display: grid;
        gap: 50px;
        grid-template-columns: 1.1fr 0.8fr auto;
    }

    .project-proof h2 {
        font-size: 44px;
        margin: 0;
    }

    .project-proof__steps {
        display: grid;
        gap: 0;
    }

    .project-proof__steps span {
        border-block-start: 1px solid rgba(0, 50, 68, 0.15);
        color: var(--petrol);
        font-size: 13px;
        padding-block: 11px;
    }

    .project-proof__steps strong {
        color: var(--muted);
        display: inline-block;
        font-size: 10px;
        inline-size: 32px;
    }
}

@layer pages {
    .pricing-hero {
        padding-block: 105px 120px;
    }

    .pricing-hero__heading {
        margin-inline: auto;
        max-inline-size: 880px;
        text-align: center;
    }

    .pricing-hero__heading h1 {
        margin-block: 0 22px;
    }

    .pricing-hero__heading p {
        color: #abc0c6;
        font-size: 18px;
        margin-inline: auto;
        max-inline-size: 700px;
    }

    .scope-switch {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--dark-line);
        border-radius: 7px;
        display: flex;
        inline-size: max-content;
        margin: 48px auto 70px;
        padding: 4px;
    }

    .scope-switch button {
        background: transparent;
        border-radius: 5px;
        color: #a8bec5;
        min-block-size: 40px;
        min-inline-size: 112px;
        padding-inline: 16px;
    }

    .scope-switch button.is-active {
        background: var(--white);
        color: var(--petrol);
    }

    .pricing-grid {
        align-items: stretch;
    }

    .pricing-card {
        background: #0a4253;
        border-color: var(--dark-line);
        color: var(--white);
        min-block-size: 650px;
    }

    .pricing-card--featured {
        background: var(--white);
        border-color: var(--white);
        color: var(--ink);
        outline: 8px solid rgba(255, 255, 255, 0.08);
        transform: translateY(-18px);
    }

    .pricing-card--featured .pricing-card__top > span,
    .pricing-card--featured p,
    .pricing-card--featured li {
        color: var(--muted);
    }

    .pricing-card--featured ul {
        border-color: var(--line);
    }

    .pricing-card__top h2 {
        margin-block: 30px 12px;
    }

    .pricing-card__value {
        border-block: 1px solid var(--dark-line);
        display: grid;
        gap: 4px;
        margin-block: 28px;
        padding-block: 24px;
    }

    .pricing-card--featured .pricing-card__value {
        border-color: var(--line);
    }

    .pricing-card__value strong {
        font-size: 21px;
        font-weight: 520;
    }

    .pricing-card__value span {
        color: #93adb5;
        font-size: 11px;
    }

    .comparison-section {
        padding-block: 140px;
    }

    .comparison-table-wrap {
        overflow-x: auto;
    }

    .comparison-table {
        border-collapse: collapse;
        inline-size: 100%;
        min-inline-size: 760px;
    }

    .comparison-table th,
    .comparison-table td {
        border-block-end: 1px solid var(--line);
        font-size: 13px;
        padding: 18px;
        text-align: center;
    }

    .comparison-table th:first-child {
        text-align: start;
    }

    .comparison-table thead th {
        background: var(--soft);
        color: var(--petrol);
        font-size: 14px;
        position: sticky;
        top: var(--header-height);
        z-index: 2;
    }

    .comparison-table thead th:nth-child(3) {
        background: var(--petrol);
        color: var(--white);
    }

    .comparison-table__group th {
        background: var(--blue);
        color: var(--petrol);
        font-size: 11px;
        padding-block: 12px;
        text-transform: uppercase;
    }

    .pricing-explainer {
        padding-block: 130px;
    }

    .pricing-explainer__grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(3, 1fr);
    }

    .pricing-explainer__grid article {
        background: var(--white);
        border: 1px solid rgba(0, 50, 68, 0.12);
        border-radius: var(--radius);
        min-block-size: 280px;
        padding: 30px;
    }

    .pricing-explainer__grid h3 {
        font-size: 25px;
        margin-block: 90px 12px;
    }

    .contact-hero {
        overflow: hidden;
        padding-block: 95px 105px;
        position: relative;
    }

    .contact-geometry span {
        background: rgba(255, 255, 255, 0.025);
        position: absolute;
    }

    .contact-geometry span:nth-child(1) {
        border-radius: 0 0 100% 0;
        block-size: 330px;
        inline-size: 330px;
        inset-block-end: -40px;
        inset-inline-start: 3%;
    }

    .contact-geometry span:nth-child(2) {
        block-size: 170px;
        inline-size: 260px;
        inset-block-start: 0;
        inset-inline-end: 3%;
    }

    .contact-geometry span:nth-child(3) {
        border-radius: 0 0 0 100%;
        block-size: 130px;
        inline-size: 130px;
        inset-block-start: 0;
        inset-inline-end: 3%;
    }

    .contact-hero__inner {
        align-items: center;
        display: grid;
        gap: 72px;
        grid-template-columns: 0.86fr 1.14fr;
        position: relative;
        z-index: 1;
    }

    .contact-intro h1 {
        font-size: 64px;
        margin-block: 0 22px;
    }

    .contact-intro > p {
        color: #adc2c8;
        font-size: 17px;
        max-inline-size: 520px;
    }

    .contact-intro__notes {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-block: 24px 56px;
    }

    .contact-intro__notes span {
        align-items: center;
        color: #9eb6bd;
        display: flex;
        font-size: 11px;
        gap: 6px;
    }

    .contact-intro__proof {
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr 1fr;
        max-inline-size: 470px;
    }

    .contact-intro__proof p {
        color: #7896a0;
        font-size: 10px;
        grid-column: 1 / -1;
        margin: 0;
        text-transform: uppercase;
    }

    .contact-intro__proof a {
        color: #b9cdd2;
        font-size: 13px;
        text-decoration: none;
    }

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

    .intake-card {
        background: #0a4253;
        border: 1px solid var(--dark-line);
        border-radius: var(--radius);
        padding: 34px;
    }

    .form-grid {
        display: grid;
        gap: 18px 14px;
        grid-template-columns: 1fr 1fr;
    }

    .form-grid label {
        color: #b4c7cd;
        display: grid;
        font-size: 11px;
        gap: 7px;
    }

    .form-grid__wide {
        grid-column: 1 / -1;
    }

    .form-grid input,
    .form-grid select,
    .form-grid textarea {
        background: #0a3c4c;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 6px;
        color: var(--white);
        inline-size: 100%;
        min-block-size: 48px;
        padding: 11px 13px;
    }

    .form-grid textarea {
        min-block-size: 120px;
        resize: vertical;
    }

    .form-grid input::placeholder,
    .form-grid textarea::placeholder {
        color: #6e929d;
    }

    .intake-card .button {
        margin-block-start: 18px;
    }

    .intake-card__legal {
        color: #7896a0;
        font-size: 10px;
        margin: 12px 0 0;
        text-align: center;
    }

    .contact-options {
        padding-block: 110px;
    }

    .contact-options h2 {
        font-size: 46px;
        margin-block-end: 56px;
        text-align: center;
    }

    .contact-options__grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(3, 1fr);
    }

    .contact-options article {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        min-block-size: 250px;
        padding: 28px;
    }

    .contact-options article > span {
        align-items: center;
        background: var(--blue);
        border-radius: 6px;
        color: var(--petrol);
        display: flex;
        inline-size: 44px;
        justify-content: center;
        min-block-size: 44px;
    }

    .contact-options h3 {
        font-size: 21px;
        margin-block: 46px 9px;
    }

    .contact-options p {
        font-size: 13px;
    }

    .contact-options a {
        color: var(--petrol-soft);
        font-size: 13px;
        font-weight: 600;
    }

    .blog-hero {
        padding-block-end: 0;
    }

    .post-grid--archive {
        gap: 60px 16px;
    }

    .post-card--light {
        background: var(--white);
        border-color: var(--line);
        color: var(--ink);
    }

    .post-card--light .post-card__copy > p {
        color: var(--muted);
    }

    .post-card--light .post-card__link {
        color: var(--petrol);
    }

    .pagination {
        align-items: center;
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-block-start: 70px;
    }

    .pagination .page-numbers {
        align-items: center;
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 5px;
        display: flex;
        justify-content: center;
        min-block-size: 42px;
        min-inline-size: 42px;
        padding-inline: 12px;
        text-decoration: none;
    }

    .pagination .current {
        background: var(--petrol);
        border-color: var(--petrol);
        color: var(--white);
    }

    .empty-state {
        background: var(--soft);
        border: 1px solid var(--line);
        padding: 30px;
        text-align: center;
    }

    .article-hero {
        padding-block: 105px 120px;
    }

    .article-hero__inner {
        max-inline-size: 990px;
        text-align: center;
    }

    .article-hero__back {
        color: #94afb7;
        display: block;
        font-size: 12px;
        margin-block-end: 42px;
        text-decoration: none;
    }

    .article-hero h1 {
        font-size: 64px;
        margin-block: 0 24px;
    }

    .article-hero__inner > p {
        color: #adc2c8;
        font-size: 18px;
        margin-inline: auto;
        max-inline-size: 760px;
    }

    .article-hero__meta {
        display: flex;
        gap: 24px;
        justify-content: center;
        margin-block-start: 30px;
    }

    .article-hero__meta span {
        color: #8aa6af;
        font-size: 11px;
    }

    .article-layout {
        display: grid;
        gap: 80px;
        grid-template-columns: 250px minmax(0, 780px);
        justify-content: center;
        padding-block: 100px 140px;
    }

    .article-sidebar {
        align-self: start;
        border-block-start: 1px solid var(--line);
        padding-block-start: 22px;
        position: sticky;
        top: calc(var(--header-height) + 36px);
    }

    .article-author {
        align-items: center;
        display: grid;
        gap: 10px;
        grid-template-columns: auto 1fr;
        margin-block-end: 30px;
    }

    .article-author img {
        border-radius: 50%;
        block-size: 48px;
        inline-size: 48px;
        object-fit: cover;
    }

    .article-author strong,
    .article-author span {
        display: block;
    }

    .article-author span,
    .article-sidebar > p {
        color: var(--muted);
        font-size: 11px;
    }

    .article-sidebar > a {
        align-items: center;
        color: var(--petrol);
        display: flex;
        font-size: 12px;
        font-weight: 650;
        gap: 6px;
    }

    .prose {
        color: var(--ink-soft);
        font-size: 17px;
        line-height: 1.72;
    }

    .prose > * {
        max-inline-size: 100%;
    }

    .prose h2 {
        color: var(--petrol);
        font-size: 35px;
        margin-block: 58px 18px;
    }

    .prose h3 {
        color: var(--ink);
        font-size: 25px;
        margin-block: 40px 14px;
    }

    .prose p,
    .prose li {
        color: #4e585a;
    }

    .prose a {
        color: var(--petrol-soft);
    }

    .prose blockquote {
        background: var(--blue);
        border-inline-start: 4px solid var(--petrol);
        color: var(--petrol);
        font-size: 23px;
        margin-block: 40px;
        padding: 26px 30px;
    }

    .article-featured-image {
        margin-block-end: 48px;
    }

    .article-featured-image img {
        border-radius: var(--radius);
        inline-size: 100%;
    }

    .related-posts {
        padding-block: 120px;
    }

    .related-posts__grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(3, 1fr);
    }

    .related-post {
        background: var(--white);
        border: 1px solid rgba(0, 50, 68, 0.12);
        border-radius: var(--radius);
        min-block-size: 310px;
        padding: 28px;
    }

    .related-post > span {
        color: var(--muted);
        font-size: 10px;
    }

    .related-post h3 {
        font-size: 23px;
        margin-block: 70px 12px;
    }

    .related-post h3 a {
        text-decoration: none;
    }

    .related-post p {
        font-size: 13px;
    }

    .related-post > a {
        align-items: center;
        color: var(--petrol);
        display: inline-flex;
        font-size: 12px;
        gap: 6px;
    }
}

@layer pages {
    .legal-hero,
    .page-hero--simple {
        padding-block: 100px 110px;
    }

    .legal-hero__inner,
    .page-hero--simple .shell {
        max-inline-size: 1000px;
    }

    .legal-hero h1,
    .page-hero--simple h1 {
        font-size: 58px;
        margin: 0;
    }

    .legal-section,
    .editorial-section {
        padding-block: 90px 150px;
    }

    .legal-layout,
    .editorial-layout {
        display: grid;
        gap: 65px;
        grid-template-columns: 330px minmax(0, 750px);
        justify-content: center;
    }

    .legal-sidebar,
    .editorial-layout > aside {
        align-self: start;
        display: grid;
        gap: 14px;
        position: sticky;
        top: calc(var(--header-height) + 32px);
    }

    .legal-updated,
    .legal-toc,
    .editorial-layout > aside {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 20px;
    }

    .legal-updated span,
    .legal-updated strong {
        display: block;
    }

    .legal-updated span,
    .legal-toc > span,
    .editorial-layout > aside p {
        color: var(--muted);
        font-size: 10px;
    }

    .legal-updated strong {
        color: var(--petrol);
        font-size: 13px;
        margin-block-start: 8px;
    }

    .legal-toc {
        display: grid;
        gap: 3px;
    }

    .legal-toc > span {
        margin-block-end: 10px;
    }

    .legal-toc a {
        border-radius: 5px;
        color: var(--muted);
        font-size: 11px;
        padding: 9px 10px;
        text-decoration: none;
    }

    .legal-toc a.is-active,
    .legal-toc a:hover {
        background: var(--white);
        color: var(--petrol);
    }

    .legal-content {
        font-size: 14px;
    }

    .legal-content .legal-intro {
        color: var(--ink-soft);
        font-size: 16px;
        margin-block-end: 44px;
    }

    .legal-content section {
        scroll-margin-top: calc(var(--header-height) + 28px);
    }

    .legal-content h2 {
        font-size: 24px;
        margin-block: 42px 12px;
    }

    .not-found {
        background: var(--petrol);
    }

    .not-found__hero {
        min-block-size: 980px;
        overflow: hidden;
        position: relative;
    }

    .not-found__inner {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-block-size: 900px;
        position: relative;
        text-align: center;
        z-index: 1;
    }

    .not-found h1 {
        font-size: 66px;
        margin-block: 0 20px;
        max-inline-size: 760px;
    }

    .not-found p {
        color: #abc0c6;
        font-size: 17px;
        margin-block-end: 28px;
    }

    .not-found__geometry span {
        background: rgba(255, 255, 255, 0.025);
        position: absolute;
    }

    .not-found__geometry span:first-child {
        border-radius: 0 0 100% 0;
        block-size: 360px;
        inline-size: 360px;
        inset-block-end: -40px;
        inset-inline-start: 4%;
    }

    .not-found__geometry span:last-child {
        border-radius: 100% 0 0 0;
        block-size: 300px;
        inline-size: 300px;
        inset-block-end: -30px;
        inset-inline-end: 6%;
    }
}

@layer responsive {
    @media (max-width: 1120px) {
        h1 {
            font-size: 58px;
        }

        h2 {
            font-size: 46px;
        }

        .site-header__inner {
            gap: 20px;
        }

        .desktop-nav__link {
            padding-inline: 8px;
        }

        .site-header__actions .button {
            display: none;
        }

        .hero--home {
            min-block-size: 1320px;
        }

        .story h2 {
            font-size: 43px;
            max-inline-size: 850px;
        }

        .feature-card--website {
            grid-template-columns: 0.8fr 1.2fr;
        }

        .growth-card {
            min-block-size: 480px;
        }

        .project-slide__media {
            min-block-size: 540px;
        }

        .workflow {
            grid-template-columns: 260px minmax(0, 1fr);
        }

        .workflow-panel {
            grid-template-columns: 0.85fr 1.15fr;
            padding: 34px;
        }

        .team-layout {
            gap: 50px;
        }

        .team-layout__photo {
            min-block-size: 560px;
        }

        .footer-card {
            padding: 44px;
        }

        .footer-card__top {
            gap: 35px;
            grid-template-columns: 0.55fr 1.7fr 1fr;
        }

        .service-hero__inner {
            gap: 45px;
            grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr);
        }

        .service-hero__copy h1 {
            font-size: 52px;
        }

        .service-visual {
            min-block-size: 540px;
            padding: 38px;
        }

        .legal-layout,
        .editorial-layout {
            grid-template-columns: 280px minmax(0, 700px);
        }
    }

    @media (max-width: 900px) {
        :root {
            --header-height: 72px;
        }

        .admin-bar .site-header {
            inset-block-start: auto;
        }

        .shell {
            inline-size: min(calc(100% - 36px), var(--shell));
        }

        h1 {
            font-size: 50px;
        }

        h2 {
            font-size: 42px;
        }

        .desktop-nav,
        .site-header__actions {
            display: none;
        }

        .site-header__inner {
            grid-template-columns: 1fr auto;
        }

        .mobile-header__actions {
            align-items: center;
            display: flex;
            gap: 18px;
        }

        .mobile-header__actions > a {
            color: #bdcdd2;
            font-size: 12px;
            text-decoration: none;
        }

        .menu-toggle {
            align-items: center;
            background: transparent;
            color: var(--white);
            display: flex;
            justify-content: center;
            min-block-size: 44px;
            min-inline-size: 44px;
            padding: 9px;
        }

        .menu-toggle__lines {
            display: grid;
            gap: 5px;
            inline-size: 22px;
        }

        .menu-toggle__lines span {
            background: currentColor;
            block-size: 1.5px;
            inline-size: 100%;
            transition:
                transform 0.2s ease,
                opacity 0.2s ease;
        }

        .menu-toggle[aria-expanded="true"] .menu-toggle__lines span:nth-child(1) {
            transform: translateY(6.5px) rotate(45deg);
        }

        .menu-toggle[aria-expanded="true"] .menu-toggle__lines span:nth-child(2) {
            opacity: 0;
        }

        .menu-toggle[aria-expanded="true"] .menu-toggle__lines span:nth-child(3) {
            transform: translateY(-6.5px) rotate(-45deg);
        }

        .mobile-menu {
            background: rgba(0, 39, 53, 0.72);
            display: block;
            inset: var(--header-height) 0 0;
            opacity: 0;
            overflow-y: auto;
            padding: 0 18px 22px;
            pointer-events: none;
            position: fixed;
            transform: translateY(-14px);
            transition:
                opacity 0.22s ease,
                transform 0.22s ease;
            visibility: hidden;
        }

        .admin-bar .mobile-menu {
            inset-block-start: calc(var(--header-height) + 46px);
        }

        .mobile-menu.is-open {
            opacity: 1;
            pointer-events: auto;
            transform: none;
            visibility: visible;
        }

        .mobile-menu__panel {
            background: var(--white);
            border-radius: 0 0 var(--radius) var(--radius);
            color: var(--ink);
            margin-inline: auto;
            max-inline-size: 640px;
            padding: 36px;
        }

        .mobile-menu__intro {
            border-block-end: 1px solid var(--line);
            padding-block-end: 34px;
        }

        .mobile-menu__intro p {
            color: var(--ink);
            font-size: 29px;
            line-height: 1.12;
            max-inline-size: 370px;
        }

        .mobile-menu__columns {
            display: grid;
            gap: 30px;
            grid-template-columns: 1fr 1fr;
            padding-block: 30px;
        }

        .mobile-menu__columns > div {
            display: grid;
            gap: 7px;
        }

        .mobile-menu__label {
            color: #929a9b;
            font-size: 10px;
            margin-block-end: 10px;
        }

        .mobile-menu__columns a,
        .mobile-menu__contact a {
            font-size: 14px;
            min-block-size: 30px;
            text-decoration: none;
        }

        .mobile-menu__contact {
            border-block-start: 1px solid var(--line);
            display: grid;
            gap: 5px;
            padding-block: 26px;
        }

        .mobile-menu__bottom {
            align-items: center;
            border-block-start: 1px solid var(--line);
            color: var(--muted);
            display: flex;
            flex-wrap: wrap;
            font-size: 10px;
            gap: 14px;
            justify-content: center;
            padding-block-start: 22px;
        }

        .mobile-menu__bottom a {
            text-decoration: none;
        }

        .section-heading--split {
            align-items: start;
            gap: 22px;
            grid-template-columns: 1fr;
        }

        .hero--home {
            min-block-size: 0;
            padding-block: 76px 64px;
        }

        .hero-bento {
            grid-template-columns: 1.5fr 1fr;
            grid-template-rows: 250px 250px;
        }

        .hero-bento__project {
            min-block-size: 514px;
        }

        .platform-strip {
            grid-template-columns: 1fr;
        }

        .platform-strip__track {
            gap: 34px;
            justify-content: flex-start;
            overflow: hidden;
        }

        .problem-section,
        .core-services,
        .growth-services,
        .projects-section,
        .workflow-section,
        .team-section,
        .packages-preview,
        .blog-preview,
        .faq-section {
            padding-block: 105px;
        }

        .stat-cards {
            gap: 12px;
            padding-inline: 0;
        }

        .stat-card {
            min-block-size: 250px;
            padding: 24px;
        }

        .stat-card > strong {
            font-size: 34px;
            margin-block-start: 52px;
        }

        .story {
            block-size: 240vh;
            min-block-size: 1900px;
        }

        .story h2 {
            font-size: 37px;
            max-inline-size: 730px;
            padding-inline: 30px;
        }

        .story-card--project,
        .story-card--team {
            block-size: 150px;
            inline-size: 220px;
        }

        .story-card--domain,
        .story-card--progress {
            inline-size: 220px;
        }

        .feature-card--website {
            grid-template-columns: 1fr;
            min-block-size: 820px;
        }

        .browser-visual {
            align-self: end;
            max-inline-size: none;
        }

        .growth-grid {
            grid-template-columns: 1fr;
        }

        .growth-card {
            min-block-size: 360px;
        }

        .growth-card__icon {
            margin-block: 52px 70px;
        }

        .principles__track {
            grid-auto-columns: calc((100% - 14px) / 2);
        }

        .project-slide {
            grid-template-columns: 1fr;
        }

        .project-slide__media {
            min-block-size: 500px;
        }

        .project-slide__copy {
            min-block-size: 310px;
        }

        .workflow {
            grid-template-columns: 1fr;
        }

        .workflow__tabs {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }

        .workflow__tabs button {
            border-inline-end: 1px solid var(--line);
            min-block-size: 120px;
        }

        .workflow-panel {
            min-block-size: 650px;
        }

        .team-layout {
            gap: 45px;
            grid-template-columns: 1fr;
        }

        .team-layout__photo {
            aspect-ratio: 1.2;
            min-block-size: 0;
        }

        .package-grid,
        .pricing-grid {
            grid-template-columns: 1fr;
        }

        .package-card,
        .pricing-card {
            min-block-size: 0;
        }

        .package-card--featured,
        .pricing-card--featured {
            transform: none;
        }

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

        .faq-layout {
            gap: 54px;
            grid-template-columns: 1fr;
        }

        .faq-layout__heading {
            position: static;
        }

        .footer-card__top {
            grid-template-columns: auto 1fr;
        }

        .newsletter {
            grid-column: 1 / -1;
        }

        .service-hero__inner {
            grid-template-columns: 1fr;
        }

        .service-hero__copy {
            max-inline-size: 760px;
        }

        .service-visual {
            margin-inline: auto;
            max-inline-size: 680px;
            width: 100%;
        }

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

        .deliverable {
            border-block-end: 1px solid var(--line);
        }

        .deliverable:nth-child(2) {
            border-inline-end: 0;
        }

        .deliverable:nth-child(3) {
            padding-inline-start: 0;
        }

        .process-grid,
        .related-grid,
        .pricing-explainer__grid,
        .related-posts__grid {
            grid-template-columns: 1fr;
        }

        .process-card,
        .related-card,
        .pricing-explainer__grid article {
            min-block-size: 280px;
        }

        .featured-project,
        .featured-post {
            grid-template-columns: 1fr;
        }

        .featured-project__media,
        .featured-post__media {
            min-block-size: 480px;
        }

        .project-proof__inner {
            align-items: start;
            grid-template-columns: 1fr;
        }

        .contact-hero__inner {
            grid-template-columns: 1fr;
        }

        .contact-intro {
            max-inline-size: 650px;
        }

        .legal-layout,
        .editorial-layout {
            gap: 45px;
            grid-template-columns: 240px minmax(0, 1fr);
        }

        .article-layout {
            gap: 45px;
            grid-template-columns: 200px minmax(0, 1fr);
        }
    }
}

@layer responsive {
    @media (max-width: 640px) {
        :root {
            --header-height: 72px;
        }

        .shell {
            inline-size: min(calc(100% - 32px), var(--shell));
        }

        h1 {
            font-size: 40px;
        }

        h2 {
            font-size: 34px;
        }

        h3 {
            font-size: 24px;
        }

        .brand__logo {
            inline-size: 122px;
        }

        .mobile-header__actions {
            gap: 7px;
        }

        .mobile-header__actions > a {
            font-size: 11px;
        }

        .mobile-menu {
            padding-inline: 12px;
        }

        .mobile-menu__panel {
            padding: 26px 24px;
        }

        .mobile-menu__intro p {
            font-size: 27px;
        }

        .mobile-menu__columns {
            gap: 22px;
        }

        .mobile-menu__columns a,
        .mobile-menu__contact a {
            font-size: 13px;
        }

        .button {
            min-block-size: 48px;
            padding-inline: 16px;
        }

        .section-heading {
            margin-block-end: 40px;
        }

        .section-heading--split {
            gap: 16px;
        }

        .section-heading--split > p {
            font-size: 15px;
        }

        .hero--home {
            padding-block: 48px 52px;
        }

        .hero__copy {
            text-align: center;
        }

        .hero__copy h1 {
            margin-block-end: 18px;
        }

        .hero__copy > p {
            font-size: 16px;
        }

        .hero__actions {
            display: grid;
            inline-size: 100%;
            margin-block-start: 24px;
        }

        .hero__actions .button {
            inline-size: 100%;
        }

        .hero-bento {
            display: grid;
            gap: 12px;
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            margin-block-start: 48px;
        }

        .hero-bento__project {
            aspect-ratio: 0.88;
            grid-row: auto;
            min-block-size: 0;
        }

        .hero-bento__project img {
            object-position: top;
        }

        .hero-bento__status {
            min-block-size: 260px;
        }

        .hero-bento__statement {
            min-block-size: 230px;
        }

        .platform-strip {
            gap: 14px;
            margin-block-start: 52px;
            padding-block: 20px;
        }

        .platform-strip__track {
            animation: ticker 28s linear infinite;
            gap: 34px;
        }

        @keyframes ticker {
            to {
                transform: translateX(-60%);
            }
        }

        .problem-section,
        .core-services,
        .growth-services,
        .principles,
        .projects-section,
        .workflow-section,
        .team-section,
        .packages-preview,
        .blog-preview,
        .faq-section,
        .deliverables-section,
        .process-section,
        .related-section,
        .comparison-section,
        .pricing-explainer,
        .contact-options,
        .project-archive,
        .blog-archive,
        .related-posts {
            padding-block: 82px;
        }

        .stat-cards {
            grid-template-columns: 1fr;
            margin-block-start: 50px;
        }

        .stat-card,
        .stat-card--left,
        .stat-card--center,
        .stat-card--right {
            min-block-size: 220px;
            transform: none;
        }

        .stat-card > strong {
            font-size: 38px;
            margin-block: 44px 14px;
        }

        .story {
            block-size: 185vh;
            min-block-size: 1320px;
        }

        .story__sticky {
            min-block-size: 620px;
        }

        .story h2 {
            font-size: 29px;
            padding-inline: 18px;
        }

        .story-card--project {
            block-size: 110px;
            inline-size: 150px;
            inset-block-start: 9%;
            inset-inline-start: 4%;
        }

        .story-card--domain {
            inline-size: 150px;
            inset-block-start: 12%;
            inset-inline-end: 4%;
            padding: 12px;
        }

        .story-card--domain strong {
            font-size: 15px;
        }

        .story-card--progress {
            inline-size: 170px;
            inset-block-end: 9%;
            inset-inline-start: 3%;
            padding: 16px;
        }

        .story-card--team {
            block-size: 115px;
            inline-size: 165px;
            inset-block-end: 8%;
            inset-inline-end: 3%;
        }

        .story-card--team span {
            font-size: 8px;
            inset-block-end: 6px;
            inset-inline: 6px;
            padding: 5px 6px;
        }

        .feature-grid {
            grid-template-columns: 1fr;
        }

        .feature-card,
        .feature-card--website {
            grid-column: auto;
            min-block-size: 610px;
            padding: 28px;
        }

        .feature-card--website {
            min-block-size: 690px;
        }

        .feature-card__number {
            margin-block-start: 52px;
        }

        .feature-card h3 {
            font-size: 33px;
        }

        .browser-visual {
            transform: rotate(1deg) translate(18px, 26px);
        }

        .browser-visual__bar i,
        .service-browser__bar i {
            padding-inline: 26px;
        }

        .browser-visual__hero {
            padding: 24px;
        }

        .browser-visual__hero strong {
            font-size: 22px;
        }

        .hosting-visual {
            margin-block-end: -29px;
            transform: translateX(20px);
        }

        .domain-visual {
            grid-template-columns: 1fr auto;
        }

        .domain-visual span {
            font-size: 14px;
        }

        .growth-card {
            min-block-size: 340px;
            padding: 26px;
        }

        .growth-card__icon {
            margin-block: 42px 60px;
        }

        .principles__track {
            grid-auto-columns: 88%;
        }

        .principle-card {
            min-block-size: 380px;
            padding: 26px;
        }

        .principle-card p {
            font-size: 24px;
            margin-block-start: 76px;
        }

        .project-slide__media {
            aspect-ratio: 1.05;
            min-block-size: 0;
        }

        .project-slide__copy {
            min-block-size: 300px;
            padding: 28px;
        }

        .project-slide__copy h3 {
            font-size: 31px;
        }

        .workflow__tabs {
            display: flex;
            overflow-x: auto;
        }

        .workflow__tabs button {
            flex: 0 0 180px;
            min-block-size: 110px;
        }

        .workflow-panel {
            gap: 30px;
            grid-template-columns: 1fr;
            min-block-size: 760px;
            padding: 26px;
        }

        .workflow-panel h3 {
            font-size: 31px;
        }

        .workflow-board,
        .growth-dashboard {
            min-block-size: 340px;
            padding: 20px;
            transform: translateX(18px);
        }

        .workflow-panel__image {
            max-block-size: 400px;
            transform: translateX(18px);
        }

        .team-layout__photo {
            aspect-ratio: 0.95;
        }

        .team-layout__copy > p {
            font-size: 15px;
        }

        .team-disciplines {
            grid-template-columns: 1fr;
        }

        .team-disciplines span:nth-last-child(-n + 2) {
            border-block-end: 1px solid rgba(0, 50, 68, 0.13);
        }

        .team-disciplines span:last-child {
            border-block-end: 0;
        }

        .package-card,
        .pricing-card {
            padding: 26px;
        }

        .post-grid {
            grid-template-columns: 1fr;
        }

        .faq-layout__heading h2 {
            font-size: 34px;
        }

        .faq-list summary {
            font-size: 14px;
            min-block-size: 70px;
        }

        .footer-cta {
            min-block-size: 540px;
        }

        .footer-cta__inner {
            min-block-size: 540px;
        }

        .footer-cta h2 {
            font-size: 38px;
        }

        .footer-cta p {
            font-size: 14px;
        }

        .footer-cta__notes {
            align-items: center;
            flex-direction: column;
            gap: 7px;
        }

        .footer-card-wrap {
            inline-size: min(calc(100% - 24px), var(--shell));
        }

        .footer-card {
            padding: 28px 24px;
        }

        .footer-card__top {
            grid-template-columns: 1fr;
        }

        .footer-links {
            gap: 24px;
            grid-template-columns: 1fr 1fr;
        }

        .footer-links > div:nth-child(3) {
            grid-column: 1 / -1;
        }

        .footer-card__statement {
            align-items: start;
            flex-direction: column;
            gap: 24px;
        }

        .footer-card__statement p {
            font-size: 29px;
        }

        .footer-card__bottom {
            align-items: start;
            flex-direction: column;
            gap: 20px;
        }

        .footer-card__contact {
            align-items: start;
            flex-direction: column;
            gap: 10px;
        }

        .service-hero {
            min-block-size: 0;
            padding-block: 72px 82px;
        }

        .service-hero__copy h1 {
            font-size: 40px;
        }

        .service-hero__copy > p {
            font-size: 16px;
        }

        .service-hero__copy .hero__actions {
            display: grid;
        }

        .service-visual {
            min-block-size: 480px;
            padding: 24px;
        }

        .service-browser {
            inline-size: 115%;
            margin-block-start: 62px;
            transform: rotate(1deg);
        }

        .service-browser__page {
            min-block-size: 320px;
            padding: 30px;
        }

        .service-browser__page strong {
            font-size: 28px;
        }

        .server-stack {
            margin-block-start: 70px;
        }

        .server-stack > div {
            padding: 15px;
        }

        .domain-search,
        .search-panel,
        .ads-panel {
            padding: 18px;
        }

        .creative-grid {
            grid-template-columns: 1fr 1fr;
        }

        .creative-grid > div {
            min-block-size: 180px;
        }

        .creative-grid > div:first-child {
            min-block-size: 390px;
        }

        .deliverables-grid {
            grid-template-columns: 1fr;
        }

        .deliverable,
        .deliverable:first-child,
        .deliverable:nth-child(3) {
            border-inline-end: 0;
            min-block-size: 260px;
            padding: 28px 0;
        }

        .deliverable h3 {
            margin-block-start: 70px;
        }

        .service-principle {
            min-block-size: 540px;
            padding-block: 110px;
        }

        .service-principle h2 {
            font-size: 37px;
        }

        .process-card,
        .related-card,
        .pricing-explainer__grid article {
            min-block-size: 260px;
        }

        .process-card h3,
        .related-card h3,
        .pricing-explainer__grid h3 {
            margin-block-start: 76px;
        }

        .archive-hero,
        .blog-hero,
        .pricing-hero,
        .article-hero,
        .legal-hero,
        .page-hero--simple {
            padding-block-start: 70px;
        }

        .archive-hero__inner,
        .blog-hero__heading {
            margin-block-end: 48px;
            text-align: start;
        }

        .archive-hero__inner p,
        .blog-hero__heading p,
        .pricing-hero__heading p {
            font-size: 15px;
        }

        .featured-project__media,
        .featured-post__media {
            aspect-ratio: 1.1;
            min-block-size: 0;
        }

        .featured-project__copy,
        .featured-post__copy {
            padding: 30px 24px;
        }

        .featured-project__copy h2,
        .featured-post__copy h2 {
            font-size: 32px;
        }

        .project-filter,
        .blog-filters {
            flex-wrap: nowrap;
            overflow-x: auto;
        }

        .project-filter span,
        .blog-filters span {
            white-space: nowrap;
        }

        .project-archive__grid {
            gap: 52px;
            grid-template-columns: 1fr;
        }

        .project-proof h2 {
            font-size: 34px;
        }

        .pricing-hero {
            padding-block-end: 82px;
        }

        .pricing-hero__heading {
            text-align: start;
        }

        .pricing-hero__heading h1 {
            font-size: 40px;
        }

        .scope-switch {
            margin-block: 36px 58px;
        }

        .scope-switch button {
            min-inline-size: 100px;
        }

        .comparison-section .section-heading {
            margin-block-end: 30px;
        }

        .contact-hero {
            padding-block: 70px 82px;
        }

        .contact-intro h1 {
            font-size: 42px;
        }

        .contact-intro__proof {
            grid-template-columns: 1fr;
        }

        .intake-card {
            padding: 24px 20px;
        }

        .form-grid {
            grid-template-columns: 1fr;
        }

        .form-grid__wide {
            grid-column: auto;
        }

        .contact-options h2 {
            font-size: 34px;
            text-align: start;
        }

        .contact-options__grid {
            grid-template-columns: 1fr;
        }

        .article-hero__inner {
            text-align: start;
        }

        .article-hero h1 {
            font-size: 40px;
        }

        .article-hero__meta {
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .article-layout {
            gap: 48px;
            grid-template-columns: 1fr;
            padding-block: 70px 90px;
        }

        .article-sidebar {
            position: static;
        }

        .prose {
            font-size: 16px;
        }

        .prose h2 {
            font-size: 30px;
        }

        .legal-hero,
        .page-hero--simple {
            padding-block-end: 80px;
        }

        .legal-hero h1,
        .page-hero--simple h1 {
            font-size: 40px;
        }

        .legal-section,
        .editorial-section {
            padding-block: 66px 90px;
        }

        .legal-layout,
        .editorial-layout {
            grid-template-columns: 1fr;
        }

        .legal-sidebar,
        .editorial-layout > aside {
            position: static;
        }

        .legal-toc {
            max-block-size: 230px;
            overflow-y: auto;
        }

        .not-found__hero {
            min-block-size: 720px;
        }

        .not-found__inner {
            min-block-size: 670px;
        }

        .not-found h1 {
            font-size: 43px;
        }
    }

    @media (max-width: 380px) {
        .shell {
            inline-size: min(calc(100% - 24px), var(--shell));
        }

        h1,
        .service-hero__copy h1,
        .pricing-hero__heading h1,
        .article-hero h1,
        .legal-hero h1,
        .page-hero--simple h1 {
            font-size: 36px;
        }

        .mobile-menu__panel {
            padding-inline: 18px;
        }

        .mobile-menu__columns {
            grid-template-columns: 1fr;
        }

        .hero-bento__project-copy strong {
            font-size: 26px;
        }

        .story h2 {
            font-size: 26px;
        }

        .story-card--domain,
        .story-card--project {
            inline-size: 135px;
        }

        .story-card--progress,
        .story-card--team {
            inline-size: 145px;
        }

        .feature-card,
        .feature-card--website {
            padding-inline: 22px;
        }

        .browser-visual {
            inline-size: 115%;
        }

        .footer-links {
            grid-template-columns: 1fr;
        }

        .footer-links > div:nth-child(3) {
            grid-column: auto;
        }
    }

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

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            scroll-behavior: auto !important;
            transition-duration: 0.01ms !important;
        }

        .js .reveal {
            opacity: 1;
            transform: none;
        }

        .story {
            block-size: auto;
            min-block-size: 900px;
        }

        .story__sticky {
            position: relative;
        }
    }
}