@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
    --ink: #172326;
    --muted: #626879;
    --paper: #f7f8f5;
    --surface: #ffffff;
    --line: #dfe3eb;
    --accent: #0f5c63;
    --accent-dark: #0b454b;
    --mint: #e5f1ed;
    --radius-sm: 0.75rem;
    --radius: 1.35rem;
    --radius-lg: 2rem;
    --shadow: 0 1.4rem 4rem rgba(23, 35, 38, 0.1);
    --section: clamp(4rem, 7vw, 6.5rem);
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}
body {
    color: var(--ink);
    background: var(--paper);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
    line-height: 1.65;
    overflow-x: hidden;
}
body::selection {
    background: var(--mint);
    color: var(--ink);
}
a {
    color: inherit;
}
img {
    max-width: 100%;
    height: auto;
}
.skip-link {
    position: fixed;
    z-index: 2000;
    top: 0.5rem;
    left: 0.5rem;
    transform: translateY(-150%);
    background: var(--ink);
    color: #fff;
    padding: 0.65rem 1rem;
    border-radius: 0.5rem;
}
.skip-link:focus {
    transform: translateY(0);
}
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}
.site-header {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(223, 227, 235, 0.8);
    backdrop-filter: blur(18px);
}
.navbar-brand {
    font-weight: 850;
    letter-spacing: -0.045em;
}
.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-right: 0.45rem;
    border-radius: 0.65rem;
    background: var(--accent);
    color: #fff;
    font-size: 0.8rem;
    transform: rotate(-5deg);
}
.nav-link {
    color: var(--muted);
    font-weight: 650;
}
.nav-link:hover,
.nav-link.active {
    color: var(--ink);
}
.nav-link.active::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--accent);
    margin-top: 0.2rem;
}
.btn {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.78rem;
    font-weight: 750;
    border-radius: 999px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}
.btn:hover {
    transform: translateY(-2px);
}
.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-dark);
    --bs-btn-hover-border-color: var(--accent-dark);
    box-shadow: 0 0.8rem 2rem rgba(15, 92, 99, 0.2);
}
.btn-dark {
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
}
.section {
    padding-block: var(--section);
}
.section-soft {
    background: var(--mint);
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.eyebrow::before {
    content: "";
    width: 1.6rem;
    height: 2px;
    background: currentColor;
}
.display-title {
    font-size: clamp(2.75rem, 7vw, 6.7rem);
    line-height: 0.96;
    letter-spacing: -0.07em;
    font-weight: 850;
}
.page-title {
    font-size: clamp(2.5rem, 6vw, 5.3rem);
    line-height: 1;
    letter-spacing: -0.06em;
    font-weight: 850;
}
.section-title {
    font-size: clamp(2rem, 4.2vw, 3.8rem);
    line-height: 1.03;
    letter-spacing: -0.055em;
    font-weight: 820;
}
.lead-copy {
    max-width: 43rem;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.7vw, 1.28rem);
}
.hero {
    min-height: 88vh;
    display: grid;
    align-items: center;
    padding-block: clamp(5rem, 10vw, 9rem);
    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(15, 92, 99, 0.13),
            transparent 30%
        ),
        var(--paper);
}
.hero-visual {
    position: relative;
    min-height: 31rem;
}
.orb {
    position: absolute;
    inset: 5% 4% auto auto;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background: var(--mint);
    filter: blur(1px);
}
.browser {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.hero-browser {
    position: absolute;
    z-index: 1;
    inset: 9% 0 auto 8%;
    transform: rotate(2deg);
}
.browser-bar {
    height: 2.3rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.9rem;
    background: #f0f2f7;
    border-bottom: 1px solid var(--line);
}
.browser-bar i {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #c1c6d1;
}
.ui-screen {
    min-height: 20rem;
    padding: 1.5rem;
    background: #f8f9fd;
}
.ui-nav {
    width: 28%;
    height: 0.65rem;
    background: var(--ink);
    border-radius: 1rem;
    margin-bottom: 2rem;
}
.ui-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 1rem;
}
.ui-panel {
    min-height: 7rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: 1rem;
}
.ui-panel.accent {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.ui-lines span {
    display: block;
    height: 0.5rem;
    margin: 0.65rem 0;
    border-radius: 1rem;
    background: #dfe2eb;
}
.ui-lines span:nth-child(2) {
    width: 70%;
}
.metric {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.06em;
}
.float-note {
    position: absolute;
    z-index: 2;
    right: -1rem;
    bottom: 8%;
    max-width: 13rem;
    background: var(--ink);
    color: #fff;
    padding: 1rem 1.2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow);
    transform: rotate(-3deg);
}
.service-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.4rem;
    align-items: center;
    padding: 1.6rem 0;
    border-top: 1px solid var(--line);
    text-decoration: none;
}
.service-row:last-child {
    border-bottom: 1px solid var(--line);
}
.service-row .number {
    color: var(--muted);
    font-size: 0.85rem;
}
.service-row h3 {
    margin: 0;
    font-size: clamp(1.35rem, 3vw, 2.35rem);
    letter-spacing: -0.04em;
}
.service-row .icon {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: 0.2s;
}
.service-row:hover .icon {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    transform: rotate(-15deg);
}
.project-card {
    height: 100%;
    text-decoration: none;
}
.project-card .browser {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.project-card:hover .browser {
    transform: translateY(-7px);
    box-shadow: var(--shadow);
}
.project-card h3 {
    margin-top: 1.35rem;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
}
.project-card p {
    color: var(--muted);
}
.tag {
    display: inline-flex;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 99px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}
.mock-commerce {
    background: #fff5ed;
}
.mock-crm {
    background: #eef1ff;
}
.mock-saas {
    background: #edf9f3;
}
.mock-hero {
    height: 8rem;
    border-radius: 1rem;
    background: var(--ink);
    margin-bottom: 1rem;
}
.mock-commerce .mock-hero {
    background: #e87645;
}
.mock-crm .mock-hero {
    background: #273054;
}
.mock-saas .mock-hero {
    background: #146c58;
}
.mock-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
.mock-cards span {
    height: 4rem;
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.85);
}
.stat {
    padding: 1.4rem 0;
    border-top: 1px solid var(--line);
}
.stat strong {
    display: block;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: -0.06em;
}
.process-item {
    position: relative;
    padding: 1.5rem 0 1.5rem 4.5rem;
    border-top: 1px solid var(--line);
}
.process-number {
    position: absolute;
    left: 0;
    top: 1.5rem;
    width: 2.8rem;
    height: 2.8rem;
    display: grid;
    place-items: center;
    background: var(--mint);
    border-radius: 50%;
    font-weight: 800;
}
.dark-panel {
    color: #fff;
    background: var(--ink);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 6vw, 5rem);
}
.tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}
.tech-list span {
    padding: 0.7rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 99px;
}
.accordion {
    --bs-accordion-border-color: var(--line);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--ink);
}
.accordion-button {
    font-weight: 750;
    font-size: 1.05rem;
}
.form-control,
.form-select {
    min-height: 3.25rem;
    border-radius: 0.8rem;
    border-color: var(--line);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 0.2rem rgba(15, 92, 99, 0.14);
}
.form-status {
    min-height: 1.7rem;
    font-size: 0.9rem;
}
.cta-strip {
    background: var(--mint);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 6vw, 4.5rem);
}
.page-hero {
    padding: clamp(6rem, 10vw, 9rem) 0 clamp(3.5rem, 7vw, 6rem);
    background: var(--paper);
}
.breadcrumb {
    --bs-breadcrumb-divider: "→";
}
.breadcrumb a {
    color: var(--muted);
}
.feature-card {
    height: 100%;
    padding: 1.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}
.feature-card i {
    font-size: 1.5rem;
    color: var(--accent);
}
.price-card {
    height: 100%;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.price-card.featured {
    color: #fff;
    background: var(--ink);
    transform: translateY(-0.75rem);
}
.price {
    font-size: 2rem;
    font-weight: 850;
    letter-spacing: -0.04em;
}
.portfolio-filter .btn.active {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
}
.portfolio-item[hidden] {
    display: none !important;
}
.article-body {
    font-size: 1.08rem;
}
.article-body h2 {
    margin-top: 2.8rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.article-body p,
.article-body li {
    color: #474d5d;
}
.contact-card {
    padding: 1.4rem;
    border-top: 1px solid var(--line);
}
.contact-work-intro {
    max-width: 27rem;
    margin: 0.55rem 0 1rem;
    color: #687875;
    line-height: 1.55;
}
.contact-hours {
    display: grid;
    max-width: 27rem;
    gap: 0;
    padding: 0;
    margin: 0.5rem 0 0 0;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--paper);
}
.contact-hours div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line);
}
.contact-hours div:last-child {
    border-bottom: 0;
}
.contact-hours dt,
.contact-hours dd {
    margin: 0;
}
.contact-hours dt {
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
}
.contact-hours dd {
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
}
.contact-hours .is-day-off dd {
    color: #7f8987;
}
.site-footer {
    color: #d6d9e1;
    background: #10121b;
    padding-top: 4.5rem;
}
.site-footer a {
    color: #d6d9e1;
    text-decoration: none;
}
.site-footer a:hover {
    color: #fff;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.modal-content {
    border: 0;
    border-radius: var(--radius);
}
.error-code {
    font-size: clamp(7rem, 24vw, 18rem);
    line-height: 0.8;
    letter-spacing: -0.1em;
    font-weight: 900;
    color: var(--accent);
}
@media (max-width: 991.98px) {
    .navbar-collapse {
        padding: 1.2rem 0;
    }
    .nav-link.active::after {
        display: none;
    }
    .hero {
        min-height: auto;
    }
    .hero-visual {
        min-height: 27rem;
        margin-top: 2rem;
    }
    .hero-browser {
        inset: 5% 3% auto 3%;
    }
    .float-note {
        right: 1rem;
    }
}
@media (max-width: 575.98px) {
    .row.g-5 {
        --bs-gutter-x: 1.5rem;
    }
    .hero-visual {
        min-height: 22rem;
    }
    .ui-screen {
        min-height: 15rem;
        padding: 1rem;
    }
    .float-note {
        font-size: 0.8rem;
    }
    .service-row {
        grid-template-columns: auto 1fr;
    }
    .service-row .icon {
        display: none;
    }
    .page-title {
        overflow-wrap: anywhere;
    }
    .price-card.featured {
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.012em;
}
.site-header {
    background: rgba(247, 248, 245, 0.94);
    border-color: rgba(23, 35, 38, 0.12);
}
.premium-header {
    box-shadow: none;
}
.header-utility {
    padding: 0.38rem 0;
    color: rgba(255, 255, 255, 0.72);
    background: var(--ink);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.header-utility a {
    color: #fff;
    text-decoration: none;
}
.navbar {
    min-height: 5rem;
}
.navbar-brand {
    display: inline-flex;
    align-items: center;
    font-size: 1.05rem;
    letter-spacing: -0.035em;
}
.brand-logo {
    display: block;
    width: 10rem;
    height: auto;
}
.site-footer .brand-logo {
    filter: brightness(0) invert(1);
    opacity: 0.96;
}
.premium-header .navbar {
    border-bottom: 1px solid rgba(23, 35, 38, 0.11);
}
.premium-header .navbar-nav {
    gap: 0.15rem;
}
.premium-header .nav-link {
    position: relative;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
}
.premium-header .nav-link::after {
    content: "";
    position: absolute;
    right: 0.9rem;
    bottom: 0.5rem;
    left: 0.9rem;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.2s ease;
}
.premium-header .nav-link:hover::after,
.premium-header .nav-link.active::after {
    display: block;
    margin: 0;
    transform: scaleX(1);
    transform-origin: left;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.language-switch {
    display: flex;
    padding: 0.2rem;
    border: 1px solid rgba(23, 35, 38, 0.18);
}
.language-option {
    min-width: 2.15rem;
    padding: 0.38rem 0.42rem;
    border: 0;
    color: var(--muted);
    background: transparent;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.language-option.active {
    color: #fff;
    background: var(--ink);
}
.language-option:not(.active):hover {
    color: var(--accent);
    background: var(--mint);
}
.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 1.8rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    color: #fff;
    background: var(--accent);
    font-size: 0.75rem;
    font-weight: 750;
    text-decoration: none;
}
.header-cta:hover {
    color: #fff;
    background: var(--accent-dark);
}
.header-cta > span:last-child {
    font-size: 1rem;
}
.language-notice {
    position: absolute;
    z-index: 10;
    top: 100%;
    right: 3rem;
    max-width: 22rem;
    padding: 0.85rem 1rem;
    color: #fff;
    background: var(--ink);
    border-top: 2px solid var(--accent);
    font-size: 0.78rem;
    box-shadow: var(--shadow);
}
.navbar-toggler {
    width: 3rem;
    height: 3rem;
    padding: 0.72rem;
    border: 1px solid rgba(23, 35, 38, 0.17);
    border-radius: 0;
}
.navbar-toggler span {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0.4rem 0;
    background: var(--ink);
    transition: transform 0.2s ease;
}
.navbar-toggler:focus {
    box-shadow: none;
}
.brand-mark {
    width: 2.15rem;
    height: 2.15rem;
    margin-right: 0.7rem;
    border-radius: 50%;
    font-size: 0.67rem;
    letter-spacing: 0.02em;
    transform: none;
}
.nav-link {
    padding-inline: 0.9rem !important;
    font-size: 0.86rem;
    letter-spacing: -0.01em;
}
.nav-link.active::after {
    height: 1px;
}
.btn {
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-padding-y: 0.82rem;
    border-radius: 0.25rem;
    font-size: 0.86rem;
    letter-spacing: -0.01em;
    box-shadow: none;
}
.btn-primary {
    box-shadow: none;
}
.btn:hover {
    transform: translateY(-1px);
}
.eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
}
.eyebrow::before {
    width: 2.5rem;
    height: 1px;
}
.display-title,
.page-title,
.section-title {
    text-wrap: balance;
}
.display-title {
    max-width: 12ch;
    font-size: clamp(3.8rem, 8.4vw, 8.5rem);
    line-height: 0.88;
    letter-spacing: -0.075em;
    font-weight: 600;
}
.display-title::first-line {
    font-family: "DM Serif Display", Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.045em;
}
.page-title {
    max-width: 14ch;
    font-size: clamp(3.3rem, 7vw, 7.25rem);
    line-height: 0.92;
    font-weight: 600;
}
.section-title {
    font-size: clamp(2.5rem, 4.8vw, 5rem);
    line-height: 0.98;
    font-weight: 600;
}
.lead-copy {
    line-height: 1.55;
}
.hero {
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 5rem);
    color: #fff;
    background: var(--ink);
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.17;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
    background-size: clamp(4rem, 8vw, 8rem) clamp(4rem, 8vw, 8rem);
    mask-image: linear-gradient(90deg, #000, transparent 78%);
}
.hero .eyebrow {
    color: #a6d8cf;
}
.hero .lead-copy {
    color: rgba(255, 255, 255, 0.64);
    max-width: 36rem;
}
.hero .btn-outline-dark {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.42);
}
.hero .btn-outline-dark:hover {
    color: var(--ink);
    background: #fff;
    border-color: #fff;
}
.hero-visual {
    min-height: 38rem;
}
.orb {
    inset: 1rem -7rem auto auto;
    width: 23rem;
    height: 23rem;
    background: var(--accent);
    opacity: 0.75;
    filter: blur(60px);
}
.hero-browser {
    inset: 10% -10% auto 2%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.35rem;
    box-shadow: 0 3rem 7rem rgba(0, 0, 0, 0.35);
    transform: rotate(1.75deg);
}
.browser-bar {
    background: #e9ece8;
}
.float-note {
    right: -3rem;
    bottom: 4%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.25rem;
    background: rgba(15, 92, 99, 0.96);
    transform: none;
}
.section {
    position: relative;
}
.section-soft {
    background: var(--mint);
}
.service-row {
    grid-template-columns: 4rem 1fr auto;
    min-height: 7.5rem;
    border-color: rgba(23, 35, 38, 0.18);
}
.service-row h3 {
    font-weight: 500;
    font-size: clamp(1.7rem, 3.2vw, 3.15rem);
}
.service-row .number {
    align-self: start;
    margin-top: 0.45rem;
    font-family: "DM Serif Display", serif;
    font-size: 1.05rem;
    color: var(--accent);
}
.service-row .icon {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 0;
}
.project-card .browser {
    border-radius: 0.25rem;
    border: 0;
    box-shadow: 0 1rem 4rem rgba(23, 35, 38, 0.08);
}
.project-card h3 {
    font-size: clamp(1.65rem, 2.7vw, 2.5rem);
    font-weight: 600;
}
.project-card p {
    font-size: 0.9rem;
}
.mock-commerce,
.mock-crm,
.mock-saas {
    background: #f0f1ec;
}
.mock-commerce .mock-hero {
    background: #b85b36;
}
.mock-crm .mock-hero {
    background: #263437;
}
.mock-saas .mock-hero {
    background: #0f5c63;
}
.stat {
    display: grid;
    grid-template-columns: 5rem 1fr;
    column-gap: 1.5rem;
}
.stat strong {
    grid-row: 1 / span 2;
    font-family: "DM Serif Display", serif;
    font-size: 1.5rem;
    color: var(--accent);
}
.stat h3 {
    font-size: 1.5rem;
}
.stat p {
    grid-column: 2;
}
.dark-panel {
    border-radius: 0.3rem;
    background: #0f5c63;
}
.process-item {
    padding-block: 2rem;
}
.process-number {
    width: 3rem;
    height: 3rem;
    border-radius: 0;
    border: 1px solid rgba(23, 35, 38, 0.18);
    background: transparent;
    color: var(--accent);
}
.feature-card,
.price-card {
    border-radius: 0.25rem;
    border-color: rgba(23, 35, 38, 0.16);
    box-shadow: none;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 1.5rem 4rem rgba(23, 35, 38, 0.08);
}
.feature-card i {
    display: inline-grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid currentColor;
}
.tag {
    border-radius: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.65rem;
}
.price-card.featured {
    border-color: var(--accent);
    background: var(--accent);
}
.accordion-item {
    background: transparent;
}
.accordion-button {
    padding: 1.5rem 0;
    background: transparent;
    font-size: 1.15rem;
}
.accordion-body {
    padding-inline: 0;
}
.cta-strip {
    border-radius: 0.3rem;
    padding: clamp(2.5rem, 7vw, 6rem);
    background: var(--accent);
    color: #fff;
}
.cta-strip .eyebrow,
.cta-strip p {
    color: rgba(255, 255, 255, 0.68) !important;
}
.cta-strip .btn-dark {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}
.page-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--ink);
    padding-block: clamp(6rem, 11vw, 10rem);
}
.page-hero::after {
    content: "";
    position: absolute;
    width: 32rem;
    height: 32rem;
    right: -14rem;
    bottom: -20rem;
    border-radius: 50%;
    background: var(--accent);
    filter: blur(2px);
    opacity: 0.7;
}
.page-hero .breadcrumb,
.page-hero .breadcrumb a,
.page-hero .lead-copy,
.page-hero .text-secondary {
    color: rgba(255, 255, 255, 0.62) !important;
}
.page-hero .breadcrumb-item.active {
    color: #fff;
}
.page-hero .eyebrow {
    color: #a6d8cf;
}
.form-control,
.form-select {
    border-radius: 0.2rem;
    background: #fff;
}
.site-footer {
    background: #0d1618;
}
.error-code {
    color: var(--accent);
}
@media (max-width: 991.98px) {
    .header-utility {
        display: none;
    }
    .navbar {
        min-height: 4.5rem;
    }
    .premium-header .navbar-collapse {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        padding: 1.5rem;
        background: var(--paper);
        border-bottom: 1px solid rgba(23, 35, 38, 0.14);
        box-shadow: 0 2rem 4rem rgba(23, 35, 38, 0.12);
    }
    .premium-header .navbar-nav {
        margin-bottom: 1.5rem;
    }
    .premium-header .nav-link {
        padding: 0.8rem 0 !important;
        border-bottom: 1px solid rgba(23, 35, 38, 0.1);
        font-size: 1rem;
    }
    .premium-header .nav-link::after {
        display: none !important;
    }
    .header-actions {
        justify-content: space-between;
    }
    .header-cta {
        flex: 1;
        justify-content: space-between;
        max-width: 16rem;
    }
    .language-notice {
        right: 1rem;
        left: 1rem;
        max-width: none;
    }
    .display-title {
        font-size: clamp(3.3rem, 12vw, 6.4rem);
    }
    .hero-visual {
        min-height: 31rem;
    }
    .hero-browser {
        inset: 5% 2% auto 2%;
    }
    .float-note {
        right: 1rem;
    }
}
@media (max-width: 575.98px) {
    .brand-logo {
        width: 8.75rem;
    }
    .display-title {
        font-size: clamp(3.15rem, 15.5vw, 4.8rem);
        line-height: 0.9;
    }
    .page-title {
        font-size: clamp(2.85rem, 14vw, 4.2rem);
    }
    .section-title {
        font-size: clamp(2.25rem, 11vw, 3.3rem);
    }
    .hero {
        padding-top: 4rem;
    }
    .hero-visual {
        min-height: 24rem;
    }
    .service-row {
        grid-template-columns: 2.5rem 1fr;
        min-height: 6rem;
        gap: 0.5rem;
    }
    .service-row h3 {
        font-size: 1.55rem;
    }
    .stat {
        grid-template-columns: 3rem 1fr;
    }
    .dark-panel,
    .cta-strip {
        margin-inline: -0.25rem;
    }
}

.studio-header {
    background: rgba(247, 248, 245, 0.97);
    box-shadow: none;
}
.studio-header .navbar {
    min-height: 5.5rem;
    padding: 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.14);
}
.studio-header-inner {
    max-width: 1600px;
    padding-inline: clamp(1.25rem, 4vw, 4.5rem);
}
.studio-header .brand-logo {
    width: 9.4rem;
}
.studio-header .navbar-collapse {
    align-items: stretch;
    margin-left: clamp(2.5rem, 6vw, 7rem);
}
.studio-nav {
    align-items: stretch;
    gap: clamp(1rem, 2.5vw, 2.8rem);
}
.studio-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 !important;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
}
.studio-nav .nav-link small {
    align-self: flex-start;
    margin-top: 1.65rem;
    color: #8a9291;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.studio-nav .nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.2s ease;
}
.studio-nav .nav-link:hover::after,
.studio-nav .nav-link.active::after {
    display: block;
    margin: 0;
    transform: scaleX(1);
    transform-origin: left;
}
.studio-header .header-actions {
    margin-left: auto;
    gap: 0.65rem;
}
.locale-trigger {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    height: 2.85rem;
    padding: 0 0.8rem;
    border: 1px solid rgba(23, 35, 38, 0.17);
    color: var(--ink);
    background: transparent;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.locale-trigger:hover,
.locale-trigger[aria-expanded="true"] {
    border-color: var(--accent);
    background: var(--mint);
}
.locale-globe {
    position: relative;
    width: 1rem;
    height: 1rem;
    border: 1px solid currentColor;
    border-radius: 50%;
}
.locale-globe::before {
    content: "";
    position: absolute;
    top: 1px;
    right: 3px;
    bottom: 1px;
    left: 3px;
    border-right: 1px solid currentColor;
    border-left: 1px solid currentColor;
    border-radius: 50%;
}
.locale-globe::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1px;
    left: 1px;
    border-top: 1px solid currentColor;
}
.locale-chevron {
    margin-top: -0.25rem;
    color: var(--muted);
    font-size: 0.9rem;
}
.locale-dropdown .dropdown-menu {
    width: 16rem;
    margin-top: 0.65rem !important;
    padding: 0.4rem;
    border: 1px solid rgba(23, 35, 38, 0.14);
    border-radius: 0;
    background: var(--surface);
    box-shadow: 0 1.5rem 4rem rgba(23, 35, 38, 0.14);
}
.locale-dropdown .language-option {
    display: grid;
    grid-template-columns: 2.4rem 1fr auto;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 0.8rem 0.75rem;
    border: 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.08);
    border-radius: 0;
    color: var(--ink);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    text-align: left;
}
.locale-dropdown li:last-child .language-option {
    border-bottom: 0;
}
.locale-dropdown .language-option span {
    color: var(--accent);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.locale-dropdown .language-option i {
    color: #87908e;
    font-size: 0.58rem;
    font-style: normal;
    text-transform: uppercase;
}
.locale-dropdown .language-option:hover,
.locale-dropdown .language-option.active {
    color: var(--ink);
    background: var(--mint);
}
.studio-header .header-cta {
    min-width: 10.75rem;
    height: 2.85rem;
    justify-content: space-between;
    padding-inline: 1rem;
}
.studio-header .language-notice {
    top: calc(100% + 1px);
}
@media (max-width: 1099.98px) and (min-width: 992px) {
    .studio-header .navbar-collapse {
        margin-left: 2.5rem;
    }
    .studio-nav {
        gap: 1.1rem;
    }
    .studio-header .header-cta {
        min-width: 0;
    }
    .studio-header .header-cta span:first-child {
        display: none;
    }
}
@media (max-width: 991.98px) {
    .studio-header .navbar {
        min-height: 4.75rem;
    }
    .studio-header .brand-logo {
        width: 8.8rem;
    }
    .studio-header .navbar-collapse {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        max-height: calc(100vh - 4.75rem);
        margin-left: 0;
        padding: 1.25rem;
        overflow-y: auto;
        background: var(--paper);
        border-bottom: 1px solid rgba(23, 35, 38, 0.14);
        box-shadow: 0 2rem 4rem rgba(23, 35, 38, 0.13);
    }
    .studio-nav {
        display: grid;
        gap: 0;
        margin-bottom: 1.25rem;
    }
    .studio-nav .nav-link {
        position: relative;
        min-height: 3.6rem;
        padding: 0 !important;
        border-bottom: 1px solid rgba(23, 35, 38, 0.1);
        font-size: 1rem;
    }
    .studio-nav .nav-link small {
        align-self: center;
        margin: 0;
    }
    .studio-nav .nav-link::after {
        display: none !important;
    }
    .studio-header .header-actions {
        display: grid;
        grid-template-columns: auto 1fr;
        margin: 0;
    }
    .studio-header .header-cta {
        width: 100%;
        min-width: 0;
    }
    .locale-dropdown .dropdown-menu {
        width: min(16rem, calc(100vw - 2.5rem));
    }
}

.precision-header {
    background: rgba(247, 248, 245, 0.88);
    border: 0;
    box-shadow: none;
    backdrop-filter: saturate(180%) blur(20px);
}
.precision-header .navbar {
    min-height: 3.75rem;
    padding: 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.09);
}
.precision-header-inner {
    max-width: 1280px;
    padding-inline: 1.5rem;
}
.precision-header .brand-logo {
    width: 7.65rem;
}
.precision-header .navbar-collapse {
    align-items: center;
    margin-left: clamp(2.5rem, 7vw, 7rem);
}
.precision-nav {
    align-items: center;
    gap: clamp(1.3rem, 2.5vw, 2.5rem);
}
.precision-nav .nav-link {
    position: relative;
    padding: 0.25rem 0 !important;
    color: rgba(23, 35, 38, 0.72);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}
.precision-nav .nav-link:hover,
.precision-nav .nav-link.active {
    color: var(--ink);
}
.precision-nav .nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -0.25rem;
    left: 0;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}
.precision-nav .nav-link:hover::after,
.precision-nav .nav-link.active::after {
    display: block;
    margin: 0;
    transform: scaleX(1);
}
.precision-header .header-actions {
    margin-left: auto;
    gap: 0.8rem;
}
.precision-header .locale-trigger {
    height: auto;
    padding: 0.45rem 0.35rem;
    border: 0;
    color: rgba(23, 35, 38, 0.72);
    background: transparent;
    font-size: 0.68rem;
}
.precision-header .locale-trigger:hover,
.precision-header .locale-trigger[aria-expanded="true"] {
    color: var(--ink);
    background: transparent;
}
.precision-header .locale-trigger :is(svg, .bi) {
    opacity: 0.55;
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}
.precision-header .locale-trigger[aria-expanded="true"] :is(svg, .bi) {
    transform: rotate(180deg);
}
.precision-header .locale-dropdown .dropdown-menu {
    width: 12.25rem;
    margin-top: 0.65rem !important;
    padding: 0.45rem;
    border: 1px solid rgba(23, 35, 38, 0.08);
    border-radius: 0.85rem;
    box-shadow: 0 1.25rem 3rem rgba(23, 35, 38, 0.12);
}
.precision-header .locale-dropdown .language-option {
    border-radius: 0.55rem;
    border: 0;
}
.precision-header .locale-dropdown .language-option i {
    display: none;
}
.precision-header .locale-dropdown .language-option.is-unavailable {
    cursor: default;
    color: var(--muted);
    opacity: 0.58;
}
.precision-header .locale-dropdown .language-option.is-unavailable:hover {
    color: var(--muted);
    background: transparent;
}
.precision-header .header-cta {
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(15, 92, 99, 0.08);
    border-radius: 999px;
    color: var(--accent);
    background: var(--mint);
    font-size: 0.68rem;
    font-weight: 700;
    box-shadow: 0 0.25rem 1rem rgba(15, 92, 99, 0.05);
    transition:
        color 0.28s ease,
        background-color 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.precision-header .header-cta:hover {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0.45rem 1.25rem rgba(15, 92, 99, 0.14);
    transform: translateY(-1px);
}
.precision-header .language-notice {
    top: calc(100% + 1px);
    right: max(1.5rem, calc((100vw - 1280px) / 2));
    border: 0;
    border-radius: 0.7rem;
}
.precision-header .navbar-toggler {
    width: 2rem;
    height: 2rem;
    padding: 0.4rem;
    border: 0;
}
.precision-header .navbar-toggler span {
    margin: 0.32rem 0;
}
@media (max-width: 991.98px) {
    .precision-header .navbar {
        min-height: 3.75rem;
    }
    .precision-header-inner {
        padding-inline: 1rem;
    }
    .precision-header .brand-logo {
        width: 7.3rem;
    }
    .precision-header .navbar-collapse {
        position: absolute;
        z-index: 1050;
        top: 100%;
        right: 0;
        left: 0;
        max-height: calc(100vh - 3.75rem);
        margin: 0;
        padding: 1.1rem 1rem 1.25rem;
        overflow-y: auto;
        background: rgba(247, 248, 245, 0.98);
        border-bottom: 1px solid rgba(23, 35, 38, 0.1);
        box-shadow: 0 1.2rem 2.5rem rgba(23, 35, 38, 0.09);
        backdrop-filter: blur(20px);
    }
    .precision-nav {
        display: grid;
        gap: 0;
        margin: 0 0 1rem;
    }
    .precision-nav .nav-link {
        min-height: 3rem;
        display: flex;
        align-items: center;
        padding: 0 !important;
        border-bottom: 1px solid rgba(23, 35, 38, 0.08);
        color: var(--ink);
        font-size: 0.9rem;
    }
    .precision-nav .nav-link::after {
        display: none !important;
    }
    .precision-header .header-actions {
        display: flex;
        justify-content: flex-start;
        margin: 0;
    }
    .precision-header .header-cta {
        margin-left: auto;
        padding: 0.65rem 1rem;
    }
    .precision-header .language-notice {
        right: 1rem;
        left: 1rem;
    }
}

.hero-v2 {
    position: relative;
    isolation: isolate;
    min-height: auto;
    padding: clamp(3.5rem, 6vw, 5.75rem) 0 clamp(4.5rem, 7vw, 6rem);
    overflow: hidden;
    color: var(--ink);
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(229, 241, 237, 0.9),
            transparent 32rem
        ),
        var(--paper);
}
.hero-v2::before {
    display: none;
}
.hero-v2 > .container {
    position: relative;
    z-index: 2;
}
.hero-api-flow {
    position: absolute;
    z-index: 0;
    right: clamp(1rem, 5vw, 5rem);
    bottom: clamp(1.5rem, 4vw, 3.75rem);
    width: min(26rem, 32vw);
    color: var(--accent);
    overflow: hidden;
    pointer-events: none;
}
.api-flow-caption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.8rem;
    color: rgba(15, 92, 99, 0.65);
    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.api-flow-caption b {
    color: rgba(23, 35, 38, 0.44);
    font-size: 0.55rem;
    font-weight: 650;
    letter-spacing: 0;
}
.api-flow-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    min-height: 4.25rem;
}
.api-flow-line {
    position: absolute;
    top: 1.38rem;
    right: 12%;
    left: 12%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(15, 92, 99, 0.22),
        rgba(15, 92, 99, 0.55),
        rgba(15, 92, 99, 0.22)
    );
}
.api-flow-node {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    color: rgba(15, 92, 99, 0.8);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}
.api-flow-node i {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.22);
    border-radius: 50%;
    background: rgba(247, 248, 245, 0.88);
    box-shadow: 0 0.5rem 1.2rem rgba(15, 92, 99, 0.06);
    font-size: 1rem;
}
.api-flow-node--api i {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: 0 0 0 0.42rem rgba(15, 92, 99, 0.08);
}
.api-flow-packet {
    position: absolute;
    z-index: 2;
    top: 1.2rem;
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0.24rem rgba(15, 92, 99, 0.12);
}
.api-flow-packet--out {
    left: 15%;
    animation: api-request 5.5s ease-in-out infinite;
}
.api-flow-packet--back {
    right: 15%;
    opacity: 0;
    animation: api-response 5.5s ease-in-out infinite;
}
@keyframes api-request {
    0%,
    12% {
        left: 15%;
        opacity: 0;
    }
    18%,
    42% {
        left: 49%;
        opacity: 1;
    }
    48%,
    100% {
        left: 49%;
        opacity: 0;
    }
}
@keyframes api-response {
    0%,
    50% {
        right: 49%;
        opacity: 0;
    }
    56%,
    82% {
        right: 15%;
        opacity: 1;
    }
    88%,
    100% {
        right: 15%;
        opacity: 0;
    }
}
.hero-v2-copy {
    position: relative;
    max-width: 70rem;
    margin: 0 auto;
    text-align: center;
}
.home-hero .hero-v2-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.home-hero .hero-v2-copy > p {
    margin: 2rem auto 0;
    text-align: center;
}
.home-hero .hero-v2-actions {
    margin-inline: auto;
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 1.75rem;
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.hero-kicker i {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0.35rem rgba(15, 92, 99, 0.09);
}
.hero-v2 h1 {
    margin: 0 auto;
    max-width: 15ch;
    font-size: clamp(3.6rem, 7.4vw, 7.4rem);
    line-height: 0.94;
    letter-spacing: -0.072em;
    font-weight: 600;
    text-wrap: balance;
}
.hero-v2 h1 em {
    position: relative;
    color: var(--accent);
    font-family: inherit;
    font-style: normal;
    font-weight: 600;
}
.hero-v2 h1 em::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -0.02em;
    bottom: -0.08em;
    left: -0.02em;
    height: 0.01em;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    animation: accent-draw 0.85s 1.05s cubic-bezier(0.22, 0.61, 0.36, 1)
        forwards;
}
.hero-v2 p {
    max-width: 45rem;
    margin: 2rem auto 0 0;
    color: #596566;
    font-size: clamp(1.05rem, 1.55vw, 1.25rem);
    line-height: 1.65;
}
.hero-v2-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.8rem;
    margin-top: 2.5rem;
}
.hero-v2 .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem 1.2rem 1rem 1.35rem;
    border-radius: 999px;
}
.hero-primary-cta {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    gap: 0;
    box-sizing: border-box;
    min-width: 16.5rem;
    height: 3.75rem;
    padding: 0.15rem 5rem;
    overflow: visible;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: #fff;
    background: var(--accent);
    box-shadow: 0 0.9rem 2.2rem rgba(15, 92, 99, 0.2);
    text-align: left;
    text-decoration: none;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    animation: hero-cta-breathe 4.8s 1.2s ease-in-out infinite;
}
.hero-primary-cta::before {
    position: absolute;
    z-index: 0;
    inset: -1px;
    content: "";
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.32),
        transparent
    );
    background-size: 230% 100%;
    background-position: 130% 0;
    border-radius: inherit;
    pointer-events: none;
    animation: hero-cta-sweep 4.8s 1.5s ease-in-out infinite;
}
.hero-primary-cta::after {
    position: absolute;
    z-index: -1;
    inset: -0.32rem;
    content: "";
    border: 1px solid rgba(15, 92, 99, 0.23);
    border-radius: inherit;
    opacity: 0;
    transform: scale(0.96);
    animation: hero-cta-aura 4.8s 1.2s ease-out infinite;
}
.hero-primary-cta strong {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    padding: 0 1rem;
    place-items: center;
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    transform: translateX(-1rem);
}
.hero-primary-cta > i {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0.78rem;
    flex: 0 0 auto;
    width: 2.45rem;
    height: 2.45rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--accent);
    background: #fff;
    font-size: 1rem;
    font-style: normal;
    transform: translate(0, -50%) rotate(0deg);
    transform-origin: center;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-primary-cta:hover {
    color: #fff;
    border-color: var(--accent-dark);
    background: var(--accent-dark);
    box-shadow: 0 1.4rem 3rem rgba(15, 92, 99, 0.27);
    transform: translateY(-3px);
}
.hero-primary-cta:hover > i {
    transform: translate(0.16rem, -50%) rotate(45deg);
}
@keyframes hero-cta-breathe {
    0%,
    64%,
    100% {
        box-shadow: 0 0.9rem 2.2rem rgba(15, 92, 99, 0.2);
    }
    75% {
        box-shadow: 0 1.3rem 2.8rem rgba(15, 92, 99, 0.3);
    }
}
@keyframes hero-cta-sweep {
    0%,
    62% {
        background-position: 130% 0;
    }
    82%,
    100% {
        background-position: -130% 0;
    }
}
@keyframes hero-cta-aura {
    0%,
    66%,
    100% {
        opacity: 0;
        transform: scale(0.96);
    }
    75% {
        opacity: 0.55;
    }
    92% {
        opacity: 0;
        transform: scale(1.09);
    }
}
@keyframes cta-breathe {
    0%,
    72%,
    100% {
        box-shadow: 0 0.9rem 2.2rem rgba(15, 92, 99, 0.2);
        transform: translateY(0);
    }
    80% {
        box-shadow: 0 1.2rem 3rem rgba(15, 92, 99, 0.3);
        transform: translateY(-2px);
    }
}
@keyframes cta-sheen {
    0%,
    68% {
        background-position: 130% 0;
    }
    84%,
    100% {
        background-position: -130% 0;
    }
}
@keyframes cta-ring {
    0%,
    70% {
        opacity: 0;
        transform: scale(0.98);
    }
    78% {
        opacity: 0.55;
    }
    94%,
    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}
.hero-text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}
.hero-text-link i {
    transition: transform 0.2s ease;
}
.hero-text-link:hover i {
    transform: translateX(0.25rem);
}
@media (max-width: 991.98px) {
    .hero-api-flow {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .api-flow-packet {
        animation: none;
    }
}

.hero-v2 .hero-api-flow {
    inset: 0;
    width: auto;
    color: inherit;
    opacity: 0.62;
}
.api-flow-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            90deg,
            transparent 0 49.9%,
            rgba(15, 92, 99, 0.035) 50% 50.1%,
            transparent 50.2%
        ),
        linear-gradient(
            0deg,
            transparent 0 49.9%,
            rgba(15, 92, 99, 0.035) 50% 50.1%,
            transparent 50.2%
        );
    background-size: 7rem 7rem;
    mask-image: linear-gradient(90deg, transparent, #000 44%, #000 100%);
}
.hero-v2 .api-flow-route {
    position: absolute;
    display: block;
    height: 1px;
    border-top: 1px solid rgba(15, 92, 99, 0.16);
    transform-origin: left center;
}
.hero-v2 .api-flow-route::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(15, 92, 99, 0.28);
}
.hero-v2 .api-flow-route--one {
    top: 28%;
    right: -4%;
    width: 37%;
}
.hero-v2 .api-flow-route--two {
    top: 59%;
    right: 5%;
    width: 32%;
    transform: rotate(-27deg);
}
.hero-v2 .api-flow-route--three {
    top: 75%;
    right: -2%;
    width: 44%;
    transform: rotate(12deg);
}
.hero-v2 .api-flow-route--four {
    top: 20%;
    left: -8%;
    width: 26%;
    transform: rotate(34deg);
}
.hero-v2 .api-flow-route--five {
    top: 65%;
    left: -4%;
    width: 29%;
    transform: rotate(-18deg);
}
.hero-v2 .api-flow-route--six {
    top: 46%;
    left: 7%;
    width: 18%;
    transform: rotate(78deg);
}
.hero-v2 .api-flow-node {
    position: absolute;
    z-index: 1;
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    border: 1px solid rgba(15, 92, 99, 0.36);
    border-radius: 50%;
    background: rgba(247, 248, 245, 0.82);
    box-shadow: 0 0 0 0.38rem rgba(15, 92, 99, 0.045);
}
.hero-v2 .api-flow-node--one {
    top: calc(28% - 0.35rem);
    right: 33%;
}
.hero-v2 .api-flow-node--two {
    top: calc(28% - 0.35rem);
    right: 5%;
}
.hero-v2 .api-flow-node--three {
    top: 48%;
    right: 26%;
    width: 1rem;
    height: 1rem;
    border-color: rgba(15, 92, 99, 0.5);
    background: rgba(15, 92, 99, 0.12);
}
.hero-v2 .api-flow-node--four {
    top: 77%;
    right: 8%;
}
.hero-v2 .api-flow-node--five {
    top: 18%;
    left: 14%;
    width: 0.55rem;
    height: 0.55rem;
}
.hero-v2 .api-flow-node--six {
    top: 59%;
    left: 13%;
    width: 0.55rem;
    height: 0.55rem;
}
.hero-v2 .api-flow-node--seven {
    top: 43%;
    left: 24%;
    width: 0.48rem;
    height: 0.48rem;
}
.hero-v2 .api-flow-node--eight {
    top: 14%;
    right: 18%;
    width: 0.46rem;
    height: 0.46rem;
}
.hero-v2 .api-flow-packet {
    position: absolute;
    z-index: 2;
    display: block;
    width: 0.32rem;
    height: 0.32rem;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    box-shadow:
        0 0 0 0.2rem rgba(15, 92, 99, 0.08),
        0 0 1rem rgba(15, 92, 99, 0.18);
}
.hero-v2 .api-flow-packet--one {
    top: calc(28% - 0.12rem);
    right: 39%;
    animation: api-stream-one 7s 0.4s ease-in-out infinite;
}
.hero-v2 .api-flow-packet--two {
    top: 64%;
    right: 35%;
    animation: api-stream-two 8.5s 1.1s ease-in-out infinite;
}
.hero-v2 .api-flow-packet--three {
    top: 79%;
    right: 37%;
    animation: api-stream-three 6.8s 2.6s ease-in-out infinite;
}
.hero-v2 .api-flow-packet--four {
    top: 47%;
    right: 31%;
    width: 0.24rem;
    height: 0.24rem;
    animation: api-pulse 5s 0.8s ease-in-out infinite;
}
.hero-v2 .api-flow-packet--five {
    top: 20%;
    right: 14%;
    width: 0.2rem;
    height: 0.2rem;
    animation: api-pulse 6s 2.4s ease-in-out infinite;
}
.hero-v2 .api-flow-packet--six {
    top: 26%;
    left: 4%;
    width: 0.24rem;
    height: 0.24rem;
    animation: api-stream-four 8.2s 1.8s ease-in-out infinite;
}
.hero-v2 .api-flow-packet--seven {
    top: 64%;
    left: 7%;
    width: 0.2rem;
    height: 0.2rem;
    animation: api-stream-five 7.4s 3.4s ease-in-out infinite;
}
.hero-v2 .api-flow-code {
    position: absolute;
    color: rgba(15, 92, 99, 0.18);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(1.2rem, 2vw, 2rem);
    font-weight: 500;
    letter-spacing: -0.12em;
    animation: api-code-flicker 8s ease-in-out infinite;
}
.hero-v2 .api-flow-code--one {
    top: 13%;
    left: 5%;
}
.hero-v2 .api-flow-code--two {
    top: 72%;
    left: 20%;
    font-size: 1.1rem;
    animation-delay: 2s;
}
.hero-v2 .api-flow-code--three {
    top: 34%;
    right: 7%;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    animation-delay: 4s;
}
@keyframes api-stream-one {
    0%,
    14% {
        transform: translateX(0);
        opacity: 0;
    }
    22%,
    48% {
        transform: translateX(15rem);
        opacity: 0.78;
    }
    56%,
    100% {
        transform: translateX(15rem);
        opacity: 0;
    }
}
@keyframes api-stream-two {
    0%,
    18% {
        transform: translate(0, 0);
        opacity: 0;
    }
    28%,
    58% {
        transform: translate(9rem, -4.6rem);
        opacity: 0.68;
    }
    66%,
    100% {
        transform: translate(9rem, -4.6rem);
        opacity: 0;
    }
}
@keyframes api-stream-three {
    0%,
    15% {
        transform: translate(0, 0);
        opacity: 0;
    }
    26%,
    52% {
        transform: translate(13rem, 2.8rem);
        opacity: 0.62;
    }
    60%,
    100% {
        transform: translate(13rem, 2.8rem);
        opacity: 0;
    }
}
@keyframes api-stream-four {
    0%,
    20% {
        transform: translate(0, 0);
        opacity: 0;
    }
    30%,
    56% {
        transform: translate(9rem, 6.2rem);
        opacity: 0.56;
    }
    64%,
    100% {
        transform: translate(9rem, 6.2rem);
        opacity: 0;
    }
}
@keyframes api-stream-five {
    0%,
    22% {
        transform: translate(0, 0);
        opacity: 0;
    }
    32%,
    60% {
        transform: translate(10rem, -3.3rem);
        opacity: 0.5;
    }
    68%,
    100% {
        transform: translate(10rem, -3.3rem);
        opacity: 0;
    }
}
@keyframes api-pulse {
    0%,
    62%,
    100% {
        opacity: 0.16;
        transform: scale(1);
    }
    70% {
        opacity: 0.72;
        transform: scale(1.8);
    }
}
@keyframes api-code-flicker {
    0%,
    48%,
    100% {
        opacity: 0.22;
        transform: translateY(0);
    }
    54% {
        opacity: 0.55;
        transform: translateY(-0.18rem);
    }
}
@media (max-width: 991.98px) {
    .hero-v2 .hero-api-flow {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-v2 .api-flow-packet {
        animation: none;
        opacity: 0.35;
    }
}

.hero-v2 .hero-api-flow {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: auto;
    overflow: hidden;
    pointer-events: none;
}
.hero-tech-grid {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image:
        linear-gradient(90deg, rgba(15, 92, 99, 0.055) 1px, transparent 1px),
        linear-gradient(rgba(15, 92, 99, 0.055) 1px, transparent 1px);
    background-position: 50% 50%;
    background-size: 7rem 7rem;
    mask-image: radial-gradient(
        ellipse 92% 74% at 50% 50%,
        #000,
        transparent 74%
    );
}
.hero-tech-rail,
.hero-tech-column {
    position: absolute;
    display: block;
    overflow: hidden;
    background: rgba(15, 92, 99, 0.12);
}
.hero-tech-rail {
    width: clamp(9rem, 18vw, 19rem);
    height: 1px;
}
.hero-tech-column {
    width: 1px;
    height: clamp(5rem, 16vh, 9rem);
}
.hero-tech-rail::before,
.hero-tech-column::before {
    position: absolute;
    content: "";
    background: rgba(15, 92, 99, 0.22);
}
.hero-tech-rail::before {
    inset: 0 auto 0 0;
    width: 2.75rem;
}
.hero-tech-column::before {
    inset: 0 0 auto;
    height: 2.25rem;
}
.hero-tech-rail i,
.hero-tech-column i {
    position: absolute;
    display: block;
    background: var(--accent);
    box-shadow: 0 0 0.65rem rgba(15, 92, 99, 0.35);
}
.hero-tech-rail i {
    top: -1px;
    left: -0.5rem;
    width: 0.5rem;
    height: 3px;
    animation: hero-rail-pulse 6.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.hero-tech-column i {
    top: -0.5rem;
    left: -1px;
    width: 3px;
    height: 0.5rem;
    animation: hero-column-pulse 7.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.hero-tech-rail--left-top {
    top: 21%;
    left: 0;
}
.hero-tech-rail--right-top {
    top: 24%;
    right: 0;
}
.hero-tech-rail--left-bottom {
    bottom: 20%;
    left: 0;
}
.hero-tech-rail--right-bottom {
    right: 0;
    bottom: 24%;
}
.hero-tech-column--left {
    top: 12%;
    left: 17.5%;
}
.hero-tech-column--right {
    right: 19%;
    bottom: 12%;
}
@keyframes hero-rail-pulse {
    0%,
    16% {
        transform: translateX(-0.7rem);
        opacity: 0;
    }
    22%,
    74% {
        opacity: 0.85;
    }
    84%,
    100% {
        transform: translateX(calc(clamp(9rem, 18vw, 19rem) + 0.7rem));
        opacity: 0;
    }
}
@keyframes hero-column-pulse {
    0%,
    20% {
        transform: translateY(-0.7rem);
        opacity: 0;
    }
    27%,
    76% {
        opacity: 0.75;
    }
    87%,
    100% {
        transform: translateY(calc(clamp(5rem, 16vh, 9rem) + 0.7rem));
        opacity: 0;
    }
}
@media (max-width: 991.98px) {
    .hero-v2 .hero-api-flow {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-tech-rail i,
    .hero-tech-column i {
        animation: none;
        opacity: 0;
    }
}
.hero-kicker {
    opacity: 0;
    animation: hero-rise 0.55s 0.08s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-v2 h1 {
    opacity: 0;
    animation: hero-rise 0.8s 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-v2 p {
    opacity: 0;
    animation: hero-rise 0.7s 0.52s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.hero-v2-actions {
    opacity: 0;
    animation: hero-rise 0.65s 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(1.4rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes accent-draw {
    to {
        transform: scaleX(1);
    }
}
@keyframes ring-breathe {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.82);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}
@keyframes orbit-dot {
    to {
        transform: rotate(360deg);
    }
}
@keyframes glow-drift {
    from {
        transform: translateX(-56%) translateY(-1rem) scale(0.9);
    }
    to {
        transform: translateX(-44%) translateY(2rem) scale(1.08);
    }
}
.product-canvas {
    position: relative;
    width: min(1180px, calc(100% - 2rem));
    margin: clamp(4rem, 7vw, 6.5rem) auto -5rem;
    overflow: hidden;
    border: 1px solid rgba(23, 35, 38, 0.13);
    border-radius: 1.25rem 1.25rem 0 0;
    background: #fff;
    box-shadow: 0 2.5rem 7rem rgba(23, 35, 38, 0.14);
    text-align: left;
}
.product-canvas-bar {
    height: 4rem;
    display: grid;
    grid-template-columns: 1fr minmax(12rem, 24rem) 1fr;
    align-items: center;
    gap: 2rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid #e5e9e7;
}
.product-canvas-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.75rem;
    font-weight: 800;
}
.product-canvas-brand span {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.45rem;
    background: var(--accent);
}
.product-canvas-search {
    height: 2rem;
    border: 1px solid #e0e5e2;
    border-radius: 0.5rem;
    background: #f8f9f7;
}
.product-canvas-user {
    justify-self: end;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--ink);
    font-size: 0.58rem;
    font-weight: 800;
}
.product-canvas-body {
    min-height: 35rem;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    background: #f5f7f5;
}
.product-canvas-body aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    padding-top: 1.5rem;
    border-right: 1px solid #e3e7e4;
    background: #fff;
}
.product-canvas-body aside span {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 0.4rem;
    background: #dfe5e2;
}
.product-canvas-body aside span.active {
    background: var(--accent);
}
.product-dashboard {
    padding: 2rem;
}
.product-dashboard-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}
.product-dashboard-head small,
.product-dashboard-head strong {
    display: block;
}
.product-dashboard-head small {
    color: #8b9492;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.product-dashboard-head strong {
    margin-top: 0.25rem;
    font-size: 1.45rem;
    letter-spacing: -0.04em;
}
.product-dashboard-head button {
    padding: 0.6rem 0.8rem;
    border: 1px solid #dfe4e1;
    border-radius: 0.5rem;
    background: #fff;
    color: #65706f;
    font-size: 0.67rem;
}
.product-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.product-metrics article {
    padding: 1.25rem;
    border: 1px solid #e2e6e3;
    border-radius: 0.75rem;
    background: #fff;
}
.product-metrics small,
.product-metrics strong {
    display: block;
}
.product-metrics small {
    color: #7c8785;
    font-size: 0.67rem;
}
.product-metrics strong {
    margin-top: 0.55rem;
    font-size: 1.55rem;
    letter-spacing: -0.045em;
}
.product-metrics span {
    display: inline-block;
    margin-top: 0.6rem;
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 800;
}
.product-data {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(13rem, 0.8fr);
    gap: 1rem;
    margin-top: 1rem;
}
.product-chart,
.product-activity {
    min-height: 17rem;
    padding: 1.25rem;
    border: 1px solid #e2e6e3;
    border-radius: 0.75rem;
    background: #fff;
}
.chart-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chart-label span {
    color: #7c8785;
    font-size: 0.68rem;
}
.chart-label strong {
    font-size: 1rem;
}
.product-chart svg {
    width: 100%;
    height: 12rem;
    margin-top: 1rem;
}
.product-activity {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.product-activity > strong {
    margin-bottom: 0.8rem;
    font-size: 0.8rem;
}
.product-activity > span {
    display: grid;
    grid-template-columns: 1.7rem 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #edf0ee;
}
.product-activity i {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--mint);
}
.product-activity b {
    font-size: 0.66rem;
}
.product-activity small {
    color: #929a98;
    font-size: 0.58rem;
}
@media (max-width: 767.98px) {
    .hero-v2 {
        padding: 3.25rem 0 4rem;
    }
    .hero-v2 h1 {
        font-size: clamp(3rem, 14.2vw, 4.6rem);
        line-height: 0.96;
    }
    .hero-v2 p {
        margin-top: 1.5rem;
        font-size: 1rem;
    }
    .hero-v2-actions {
        flex-direction: column;
        gap: 1.1rem;
    }
    .hero-v2 .btn-primary {
        width: 100%;
        max-width: 20rem;
        justify-content: space-between;
    }
    .hero-primary-cta {
        width: 100%;
        min-width: 0;
        max-width: 22rem;
        position: relative;
    }
    .hero-primary-cta > i {
        position: absolute;
        right: 0.42rem;
    }
    .hero-motion-ring {
        right: -27rem;
        width: 34rem;
        height: 34rem;
        opacity: 0.75;
    }
    .hero-motion-ring i {
        transform-origin: 17.35rem 0;
    }
    .product-canvas {
        width: calc(100% - 1.5rem);
        margin-top: 3.5rem;
        margin-bottom: -2rem;
        border-radius: 0.85rem 0.85rem 0 0;
    }
    .product-canvas-bar {
        grid-template-columns: 1fr auto;
        height: 3.25rem;
    }
    .product-canvas-search {
        display: none;
    }
    .product-canvas-body {
        min-height: 25rem;
        grid-template-columns: 2.7rem 1fr;
    }
    .product-canvas-body aside {
        gap: 0.85rem;
    }
    .product-canvas-body aside span {
        width: 1rem;
        height: 1rem;
    }
    .product-dashboard {
        padding: 1rem;
    }
    .product-dashboard-head button {
        display: none;
    }
    .product-dashboard-head strong {
        font-size: 1.05rem;
    }
    .product-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }
    .product-metrics article {
        padding: 0.8rem;
    }
    .product-metrics article:nth-child(3) {
        display: none;
    }
    .product-metrics strong {
        font-size: 1.1rem;
    }
    .product-data {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .product-chart {
        min-height: 12rem;
        padding: 0.8rem;
    }
    .product-chart svg {
        height: 8rem;
    }
    .product-activity {
        display: none;
    }
}

.article-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13rem;
    gap: clamp(2rem, 6vw, 7rem);
    align-items: end;
}
.article-hero-grid h1 {
    max-width: 13ch;
}
.article-hero-meta {
    display: grid;
    gap: 0.6rem;
    padding: 1rem 0 1rem 1.2rem;
    color: #6b7b78;
    border-left: 1px solid var(--line);
    font-size: 0.78rem;
    line-height: 1.45;
}
.article-section {
    padding: clamp(4.5rem, 8vw, 7.5rem) 0;
    background: #fff;
}
.article-layout {
    display: grid;
    grid-template-columns: 12rem minmax(0, 43rem);
    gap: clamp(2.5rem, 8vw, 9rem);
    max-width: 68rem;
    margin: 0 auto;
}
.article-toc {
    position: sticky;
    top: 7rem;
    align-self: start;
    padding-top: 0.45rem;
}
.article-toc > span {
    display: block;
    margin-bottom: 1rem;
    color: var(--accent);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.article-toc ol {
    display: grid;
    gap: 0.7rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.article-toc a {
    color: #6d7d7a;
    font-size: 0.78rem;
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.2s ease;
}
.article-toc a:hover {
    color: var(--accent);
}
.article-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    color: var(--accent) !important;
    border-top: 1px solid var(--line);
    font-size: 0.75rem !important;
    font-weight: 750;
    text-decoration: none;
}
.article-back-link i {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}
.article-back-link:hover i {
    transform: translateX(-0.2rem);
}
.article-body {
    max-width: none;
    color: #40514f;
    font-size: 1.03rem;
    line-height: 1.8;
}
.article-body .article-intro {
    max-width: 38rem;
    margin: 0 0 clamp(3rem, 6vw, 5rem);
    color: var(--ink);
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    line-height: 1.48;
    letter-spacing: -0.03em;
}
.article-body h2 {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin: 3rem 0 0.9rem;
    color: var(--ink);
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    line-height: 1.12;
    letter-spacing: -0.045em;
}
.article-body h2 span {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.article-body p {
    max-width: 40rem;
    margin: 0;
}
.article-body blockquote {
    max-width: 39rem;
    margin: clamp(2.5rem, 5vw, 4rem) 0;
    padding: 1.5rem 0 1.5rem 1.5rem;
    color: var(--ink);
    border-left: 3px solid var(--accent);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.035em;
}
.article-checklist {
    max-width: 39rem;
    margin: 1.75rem 0 0;
    padding: 1.3rem 1.5rem;
    border-left: 2px solid var(--accent);
    background: var(--paper);
}
.article-checklist > span {
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.article-checklist ul {
    display: grid;
    gap: 0.45rem;
    padding: 0;
    margin: 0.9rem 0 0;
    list-style: none;
}
.article-checklist li {
    position: relative;
    padding-left: 1.1rem;
    color: #53635f;
    font-size: 0.9rem;
    line-height: 1.55;
}
.article-checklist li::before {
    position: absolute;
    left: 0;
    color: var(--accent);
    content: "•";
}
.article-figure {
    margin: clamp(2.5rem, 5vw, 4rem) 0;
}
.article-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
}
.article-process-map {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: clamp(1.4rem, 3vw, 2.25rem);
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--paper);
}
.article-process-map span {
    flex: 0 0 auto;
    padding: 0.6rem 0.8rem;
    color: var(--accent);
    border: 1px solid rgba(15, 92, 99, 0.2);
    border-radius: 999px;
    background: #fff;
    font-size: 0.72rem;
    font-weight: 750;
}
.article-process-map i {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 0.85rem;
}
.article-figure figcaption {
    max-width: 34rem;
    margin-top: 0.8rem;
    color: #71817e;
    font-size: 0.78rem;
    line-height: 1.55;
}
@media (max-width: 991.98px) {
    .article-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .article-toc {
        position: static;
        display: flex;
        gap: 1.2rem;
        padding: 1rem 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }
    .article-toc > span {
        flex: 0 0 auto;
        margin: 0;
    }
    .article-toc ol {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem 1rem;
    }
    .article-back-link {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
}
@media (max-width: 767.98px) {
    .article-hero-grid {
        grid-template-columns: 1fr;
    }
    .article-hero-meta {
        grid-template-columns: repeat(2, auto);
        justify-content: start;
        padding: 1rem 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
    .article-toc {
        display: grid;
    }
}

.portfolio-filter--text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem;
    margin: 0 0 3.5rem;
}
.portfolio-filter--text > span {
    margin-right: 0.3rem;
    color: #758481;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}
.portfolio-filter--text button {
    padding: 0 0 0.4rem;
    border: 0;
    border-bottom: 1px solid transparent;
    color: #6d7d7a;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 700;
    transition: 0.2s;
}
.portfolio-filter--text button:hover,
.portfolio-filter--text button.active {
    color: var(--accent);
    border-color: var(--accent);
}
.work-section-aside .portfolio-filter--text {
    justify-content: flex-end;
    margin: 0;
}
.portfolio-editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
}
.portfolio-editorial-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}
.portfolio-card-art {
    position: relative;
    min-height: clamp(19rem, 31vw, 30rem);
    overflow: hidden;
    padding: 1.4rem;
    border-radius: 1.35rem;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}
.portfolio-editorial-card a:hover .portfolio-card-art {
    transform: translateY(-0.4rem);
    box-shadow: 0 1.3rem 3rem rgba(15, 70, 72, 0.12);
}
.portfolio-card-art > span {
    position: relative;
    z-index: 2;
    color: rgba(23, 35, 38, 0.58);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.portfolio-card-art > b {
    position: absolute;
    bottom: 1.6rem;
    left: 1.6rem;
    font-size: clamp(2.2rem, 5vw, 5rem);
    letter-spacing: -0.09em;
    line-height: 0.8;
}
.portfolio-editorial-card--market .portfolio-card-art {
    background: #d8784b;
}
.portfolio-editorial-card--market .portfolio-card-art > b {
    color: #fff6ef;
}
.portfolio-card-orb {
    position: absolute;
    right: 8%;
    bottom: -12%;
    width: 55%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 246, 239, 0.65);
    border-radius: 50%;
    box-shadow:
        0 0 0 2.5rem rgba(255, 246, 239, 0.08),
        0 0 0 5rem rgba(255, 246, 239, 0.08);
}
.portfolio-card-lines {
    position: absolute;
    top: 35%;
    left: 12%;
    width: 45%;
}
.portfolio-card-lines i {
    display: block;
    height: 0.55rem;
    margin-top: 0.75rem;
    background: rgba(255, 246, 239, 0.68);
}
.portfolio-card-lines i:nth-child(1) {
    width: 82%;
}
.portfolio-card-lines i:nth-child(2) {
    width: 100%;
}
.portfolio-card-lines i:nth-child(3) {
    width: 56%;
}
.portfolio-editorial-card--flow .portfolio-card-art {
    background: #203335;
}
.portfolio-editorial-card--flow .portfolio-card-art > span {
    color: #bfd3ce;
}
.portfolio-editorial-card--flow .portfolio-card-art > b {
    color: #e8f4ef;
}
.portfolio-card-flow {
    position: absolute;
    inset: 25% 13% auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.portfolio-card-flow i {
    display: block;
    height: 4.5rem;
    border: 1px solid rgba(229, 241, 237, 0.48);
    border-radius: 0.4rem;
}
.portfolio-card-flow i:nth-child(2) {
    background: #d1e7df;
}
.portfolio-card-flow i:nth-child(3) {
    grid-column: 1/-1;
    height: 2rem;
}
.portfolio-editorial-card--forma .portfolio-card-art {
    background: #e6e1da;
}
.portfolio-editorial-card--forma .portfolio-card-art > b {
    color: #263234;
}
.portfolio-card-arch {
    position: absolute;
    right: 12%;
    bottom: 0;
    display: flex;
    align-items: end;
    gap: 0.7rem;
    height: 73%;
}
.portfolio-card-arch i {
    display: block;
    width: clamp(2.2rem, 5vw, 4rem);
    background: #8da39c;
}
.portfolio-card-arch i:nth-child(1) {
    height: 45%;
}
.portfolio-card-arch i:nth-child(2) {
    height: 100%;
    background: #2c3f3e;
}
.portfolio-card-arch i:nth-child(3) {
    height: 68%;
}
.portfolio-editorial-card--pulse .portfolio-card-art {
    background: #c7d7dd;
}
.portfolio-editorial-card--pulse .portfolio-card-art > b {
    color: #24454c;
}
.portfolio-card-chart {
    position: absolute;
    right: 10%;
    bottom: 17%;
    display: flex;
    align-items: end;
    gap: 0.8rem;
    height: 50%;
}
.portfolio-card-chart i {
    display: block;
    width: 1.1rem;
    background: #5c8991;
}
.portfolio-card-chart i:nth-child(1) {
    height: 35%;
}
.portfolio-card-chart i:nth-child(2) {
    height: 68%;
}
.portfolio-card-chart i:nth-child(3) {
    height: 49%;
}
.portfolio-card-chart i:nth-child(4) {
    height: 100%;
    background: #0f5c63;
}
.portfolio-card-copy {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: end;
    padding: 1.25rem 0.25rem 0;
}
.portfolio-card-copy span {
    color: var(--accent);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.portfolio-card-copy h2 {
    margin: 0.45rem 0 0.25rem;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.4vw, 2.25rem);
    letter-spacing: -0.055em;
}
.portfolio-card-copy p {
    margin: 0;
    color: #72817f;
    font-size: 0.83rem;
}
.portfolio-card-copy > i {
    display: grid;
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.24);
    border-radius: 50%;
    color: var(--accent);
    font-style: normal;
    transition: 0.25s;
}
.portfolio-editorial-card a:hover .portfolio-card-copy > i {
    color: #fff;
    background: var(--accent);
    transform: rotate(45deg);
}
@media (max-width: 767.98px) {
    .portfolio-filter--text {
        gap: 1rem;
        margin-bottom: 2.5rem;
    }
    .portfolio-filter--text > span {
        width: 100%;
    }
    .portfolio-editorial-grid {
        grid-template-columns: 1fr;
    }
    .portfolio-card-art {
        min-height: 19rem;
    }
}

body[data-page="portfolio"] {
    background: var(--paper);
}
body[data-page="portfolio"] .service-detail-hero {
    background: var(--milk);
}
.portfolio-showcase-section {
    background: #edf3f0;
}
.portfolio-editorial-grid {
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.portfolio-case {
    display: block;
    padding: 0.7rem;
    border: 1px solid rgba(23, 35, 38, 0.1);
    border-radius: 1.35rem;
    color: var(--ink);
    background: #fff;
    box-shadow: 0 1.2rem 3rem rgba(23, 35, 38, 0.035);
    text-decoration: none;
    transition:
        transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}
.portfolio-case:hover {
    color: var(--ink);
    border-color: rgba(15, 92, 99, 0.3);
    box-shadow: 0 1.8rem 3.5rem rgba(15, 92, 99, 0.1);
    transform: translateY(-0.35rem);
}
.portfolio-preview {
    min-height: clamp(19rem, 30vw, 27rem);
    overflow: hidden;
    border-radius: 0.9rem;
}
.portfolio-preview-bar {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    height: 2.35rem;
    padding: 0 0.8rem;
    color: rgba(23, 35, 38, 0.48);
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.58rem;
    letter-spacing: 0.03em;
}
.portfolio-preview-bar > i {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.52;
}
.portfolio-preview-bar > span {
    margin-left: 0.35rem;
    opacity: 0.8;
}
.market-screen,
.flow-screen,
.forma-screen,
.pulse-screen {
    min-height: calc(clamp(19rem, 30vw, 27rem) - 2.35rem);
}
.market-screen {
    position: relative;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    overflow: hidden;
    color: #273031;
    background: #d9cfbf;
}
.market-screen::after {
    content: "";
    position: absolute;
    right: -9%;
    bottom: -26%;
    width: 68%;
    aspect-ratio: 1;
    border-radius: 48% 48% 0 0;
    background: #b98568;
    transform: rotate(-24deg);
}
.market-screen > b,
.forma-screen > b {
    display: block;
    font-size: clamp(1.35rem, 2.7vw, 2.05rem);
    letter-spacing: -0.08em;
}
.market-screen > span,
.forma-screen > span {
    display: block;
    margin-top: 1rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.market-screen > strong {
    position: relative;
    z-index: 1;
    display: block;
    max-width: 12rem;
    margin-top: clamp(3.5rem, 8vw, 6rem);
    font-size: clamp(1.45rem, 3vw, 2.65rem);
    line-height: 0.95;
    letter-spacing: -0.07em;
}
.market-screen > div {
    position: absolute;
    z-index: 2;
    right: 8%;
    bottom: 10%;
    display: flex;
    gap: 0.45rem;
}
.market-screen > div > i {
    display: block;
    width: clamp(2.3rem, 5vw, 4.5rem);
    aspect-ratio: 0.72;
    border-radius: 0.25rem;
    background: #e9dfd0;
}
.market-screen > div > i:nth-child(2) {
    background: #7a594d;
}
.market-screen > div > i:nth-child(3) {
    background: #c9a782;
}
.flow-screen {
    display: grid;
    grid-template-columns: 3.3rem minmax(0, 1fr);
    color: #d8efea;
    background: #20383b;
}
.flow-screen aside {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 1rem;
    padding-top: 1.2rem;
    border-right: 1px solid rgba(223, 244, 238, 0.14);
}
.flow-screen aside > b {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 0.35rem;
    color: #20383b;
    background: #d3e9e3;
    font-size: 0.78rem;
}
.flow-screen aside > i {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    background: rgba(218, 241, 235, 0.38);
}
.flow-screen > div {
    padding: 1.25rem;
}
.flow-screen header,
.pulse-screen header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.64rem;
}
.flow-screen header > b {
    padding: 0.35rem 0.6rem;
    border-radius: 0.25rem;
    color: #20383b;
    background: #c4e1d9;
    font-size: 0.56rem;
}
.flow-screen section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 1.8rem;
}
.flow-screen section > i {
    display: block;
    height: 4.5rem;
    border-radius: 0.35rem;
    background: rgba(223, 244, 238, 0.12);
}
.flow-screen section > i:nth-child(2) {
    background: #80afa4;
}
.flow-screen footer {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.35rem;
    margin-top: 1.6rem;
}
.flow-screen footer > i {
    height: 2.4rem;
    border-radius: 0.2rem;
    background: rgba(223, 244, 238, 0.1);
}
.forma-screen {
    position: relative;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    overflow: hidden;
    color: #edf0ea;
    background: #293433;
}
.forma-screen > b {
    position: relative;
    z-index: 1;
}
.forma-screen > span {
    position: relative;
    z-index: 1;
    color: #b6c3bd;
}
.forma-screen > div {
    position: absolute;
    right: 10%;
    bottom: 0;
    display: flex;
    gap: 0.55rem;
    align-items: end;
    height: 74%;
}
.forma-screen > div > i {
    display: block;
    width: clamp(2.7rem, 6vw, 5.3rem);
    height: 54%;
    background: #8e9d94;
}
.forma-screen > div > i:nth-child(2) {
    height: 100%;
    background: #d2d8ce;
}
.forma-screen > div > i:nth-child(3) {
    height: 73%;
    background: #60716c;
}
.forma-screen > strong {
    position: absolute;
    bottom: 1.7rem;
    left: clamp(1.4rem, 3vw, 2.4rem);
    z-index: 1;
    font-size: clamp(1.25rem, 2.8vw, 2.4rem);
    line-height: 0.95;
    letter-spacing: -0.06em;
}
.pulse-screen {
    padding: clamp(1.25rem, 2.5vw, 2rem);
    color: #24464c;
    background: #dfecee;
}
.pulse-screen header > b {
    font-size: 1.2rem;
    letter-spacing: -0.07em;
}
.pulse-screen header > span {
    color: #598087;
}
.pulse-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    margin-top: 1.75rem;
}
.pulse-stats > i {
    display: block;
    height: 3.6rem;
    border-radius: 0.35rem;
    background: #f8fbfa;
}
.pulse-chart {
    display: flex;
    gap: 0.7rem;
    align-items: end;
    height: 8rem;
    margin-top: 1.4rem;
    padding: 0 0.8rem;
    border-bottom: 1px solid rgba(36, 70, 76, 0.2);
}
.pulse-chart > i {
    display: block;
    width: 0.8rem;
    height: 25%;
    background: #8db2b6;
}
.pulse-chart > i:nth-child(2) {
    height: 68%;
}
.pulse-chart > i:nth-child(3) {
    height: 42%;
}
.pulse-chart > i:nth-child(4) {
    height: 89%;
    background: var(--accent);
}
.pulse-chart > i:nth-child(5) {
    height: 57%;
}
.pulse-chart > i:nth-child(6) {
    height: 76%;
}
.portfolio-case-copy {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    padding: 1.35rem 0.75rem 0.65rem;
}
.portfolio-case-copy span {
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.portfolio-case-copy h2 {
    margin: 0.42rem 0 0;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.055em;
}
.portfolio-case-copy p {
    margin: 0.45rem 0 0;
    color: #6d7c79;
    font-size: 0.79rem;
    line-height: 1.55;
}
.portfolio-case-copy > i {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.24);
    border-radius: 50%;
    color: var(--accent);
    font-size: 0.9rem;
    font-style: normal;
    transition:
        transform 0.3s ease,
        color 0.3s ease,
        background-color 0.3s ease;
}
.portfolio-case:hover .portfolio-case-copy > i {
    color: #fff;
    background: var(--accent);
    transform: rotate(45deg);
}
@media (max-width: 575.98px) {
    .portfolio-case {
        padding: 0.45rem;
        border-radius: 1rem;
    }
    .portfolio-preview {
        min-height: 18rem;
        border-radius: 0.7rem;
    }
    .market-screen,
    .flow-screen,
    .forma-screen,
    .pulse-screen {
        min-height: calc(18rem - 2.35rem);
    }
    .portfolio-case-copy {
        padding: 1.15rem 0.5rem 0.55rem;
    }
}

.portfolio-poster {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: clamp(19rem, 30vw, 27rem);
    padding: clamp(1.4rem, 3vw, 2.35rem);
    overflow: hidden;
    border-radius: 0.9rem;
}
.portfolio-poster::after {
    content: "";
    position: absolute;
    right: -14%;
    bottom: -31%;
    width: 58%;
    aspect-ratio: 1;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: 0.18;
    box-shadow:
        0 0 0 2.5rem currentColor,
        0 0 0 5rem currentColor;
    transform: scale(0.8);
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.portfolio-case:hover .portfolio-poster::after {
    transform: scale(1);
}
.portfolio-poster-top,
.portfolio-poster-bottom {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.portfolio-poster-top {
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.portfolio-poster > strong {
    position: relative;
    z-index: 1;
    margin: auto 0;
    font-size: clamp(2.8rem, 5.4vw, 5.25rem);
    line-height: 0.82;
    letter-spacing: -0.09em;
}
.portfolio-poster-bottom {
    align-items: end;
}
.portfolio-poster-bottom p {
    max-width: 12.5rem;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
}
.portfolio-poster-bottom ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 0.38rem;
    max-width: 11rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.portfolio-poster-bottom li {
    padding: 0.28rem 0.45rem;
    border: 1px solid currentColor;
    border-radius: 99px;
    font-size: 0.58rem;
    font-weight: 700;
}
.portfolio-editorial-card--market .portfolio-poster {
    color: #3b2d2a;
    background: #ddbea9;
}
.portfolio-editorial-card--flow .portfolio-poster {
    color: #e5f2ef;
    background: #234447;
}
.portfolio-editorial-card--forma .portfolio-poster {
    color: #283333;
    background: #d7ddd6;
}
.portfolio-editorial-card--pulse .portfolio-poster {
    color: #183e46;
    background: #c9e0e3;
}
.portfolio-case-copy {
    align-items: center;
    min-height: 3.9rem;
}
.portfolio-case-copy > span {
    color: #6d7c79;
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
@media (max-width: 575.98px) {
    .portfolio-poster {
        min-height: 18rem;
        padding: 1.4rem;
        border-radius: 0.7rem;
    }
}

.services-list-section .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1px !important;
    border: 1px solid rgba(23, 35, 38, 0.13) !important;
    background: rgba(23, 35, 38, 0.13) !important;
}
@media (max-width: 575.98px) {
    .services-list-section .services-grid {
        grid-template-columns: 1fr !important;
    }
}

.services-hero {
    position: relative;
    min-height: clamp(33rem, 76vh, 48rem);
    overflow: hidden;
    background: var(--milk);
}
.services-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 0.32fr);
    grid-template-rows: auto 1fr;
    min-height: inherit;
    padding-top: 2.5rem;
    padding-bottom: clamp(4rem, 8vw, 7rem);
}
.services-crumbs {
    display: flex;
    grid-column: 1/-1;
    gap: 0.55rem;
    align-items: center;
    color: #71807d;
    font-size: 0.7rem;
}
.services-crumbs a {
    color: var(--accent);
    text-decoration: none;
}
.services-hero-copy {
    align-self: end;
    max-width: 53rem;
}
.services-hero-copy .eyebrow {
    position: absolute;
    top: 7.2rem;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
}
.services-hero-copy .eyebrow i {
    display: none;
}
.services-hero-copy .eyebrow:after {
    content: "";
    width: 4.4rem;
    height: 1px;
    background: var(--accent);
}
.services-hero-copy h1 {
    max-width: 48rem;
    margin: 0;
    color: var(--ink);
    font-size: clamp(3rem, 6.5vw, 6.5rem);
    line-height: 0.95;
    letter-spacing: -0.07em;
    font-weight: 600;
}
.services-hero-copy h1 em {
    color: var(--accent);
    font-style: normal;
}
.services-hero-copy p {
    max-width: 37rem;
    margin: 1.75rem 0 0;
    color: #61716e;
    font-size: clamp(0.95rem, 1.25vw, 1.12rem);
    line-height: 1.65;
}
.services-hero-link {
    display: inline-flex;
    gap: 0.8rem;
    align-items: center;
    margin-top: 2.3rem;
    color: var(--accent);
    font-size: 0.77rem;
    font-weight: 750;
    text-decoration: none;
}
.services-hero-link span {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.3);
    border-radius: 50%;
    transition: 0.25s;
}
.services-hero-link:hover span {
    color: #fff;
    background: var(--accent);
    transform: translateY(0.18rem);
}
.services-hero-note {
    align-self: end;
    margin-bottom: 0.7rem;
    padding-left: 1.5rem;
    border-left: 1px solid rgba(15, 92, 99, 0.2);
}
.services-hero-note span {
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.services-hero-note p {
    margin: 0.65rem 0 0;
    color: #71807d;
    font-size: 0.75rem;
    line-height: 1.55;
}
.services-hero-art {
    display: none;
}
.services-list-section {
    padding: clamp(5rem, 10vw, 6rem) 0;
    background: #fff;
}
.services-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.46fr);
    gap: 3rem;
    align-items: end;
    margin-bottom: 3rem;
}
.services-list-head h2 {
    max-width: 42rem;
    margin: 1rem 0 0;
    color: var(--ink);
    font-size: clamp(2.1rem, 4.2vw, 4.35rem);
    line-height: 1;
    letter-spacing: -0.06em;
    font-weight: 600;
}
.services-list-head > p {
    max-width: 21rem;
    margin: 0 0 0.35rem;
    color: #6d7c79;
    font-size: 0.85rem;
    line-height: 1.65;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid rgba(23, 35, 38, 0.13);
    background: rgba(23, 35, 38, 0.13);
}
.service-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    gap: 1.2rem 1.4rem;
    min-height: 19rem;
    padding: clamp(1.5rem, 3vw, 2.75rem);
    background: #fff;
    transition: 0.3s;
}
.service-card:hover {
    position: relative;
    z-index: 1;
    background: #f7faf8;
    transform: translateY(-0.35rem);
}
.service-card > span {
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.service-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    letter-spacing: -0.045em;
    font-weight: 650;
}
.service-card p {
    max-width: 28rem;
    margin: 0.7rem 0 0;
    color: #6b7976;
    font-size: 0.82rem;
    line-height: 1.6;
}
.service-card ul {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-self: end;
    margin: 0;
    padding: 0;
    list-style: none;
}
.service-card li {
    padding: 0.33rem 0.55rem;
    border: 1px solid rgba(15, 92, 99, 0.18);
    border-radius: 99px;
    color: #54706c;
    font-size: 0.63rem;
}
.service-card a {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.05rem;
    border-top: 1px solid rgba(23, 35, 38, 0.12);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 750;
    text-decoration: none;
}
.service-card a b {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-weight: 500;
    transition: 0.25s;
}
.service-card:hover a b {
    transform: rotate(45deg);
}
.service-card--teal {
    background: var(--accent);
}
.service-card--teal h3,
.service-card--teal a {
    color: #fff;
}
.service-card--teal p {
    color: rgba(255, 255, 255, 0.72);
}
.service-card--teal > span {
    color: #b9e6de;
}
.service-card--teal li {
    border-color: rgba(255, 255, 255, 0.24);
    color: #d5eee9;
}
.service-card--teal a {
    border-color: rgba(255, 255, 255, 0.2);
}
.service-card--teal a b {
    color: var(--accent);
    background: #fff;
}
.service-card--teal:hover {
    background: var(--accent-dark);
}
.service-card--mint {
    background: var(--mint);
}
.service-card--wide {
    grid-column: 1/-1;
    grid-template-columns: auto minmax(0, 1.2fr) minmax(12rem, 0.75fr);
    min-height: 14rem;
}
.service-card--wide ul {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
}
.service-card--wide a {
    grid-column: 2/-1;
}
.services-question {
    padding: 0 0 clamp(4rem, 8vw, 7rem);
    background: var(--milk);
}
.services-question .container {
    display: grid;
    grid-template-columns: 1fr minmax(16rem, 0.55fr) auto;
    gap: 3rem;
    align-items: end;
    padding: clamp(2rem, 5vw, 4.5rem);
    border-radius: 1.3rem;
    color: #fff;
    background: var(--accent);
}
.services-question span {
    color: #bde3dc;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.services-question h2 {
    max-width: 36rem;
    margin: 0.85rem 0 0;
    font-size: clamp(2rem, 3.5vw, 3.8rem);
    line-height: 1;
    letter-spacing: -0.065em;
    font-weight: 600;
}
.services-question p {
    max-width: 20rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.73);
    font-size: 0.8rem;
    line-height: 1.6;
}
.services-question a {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    justify-content: space-between;
    min-width: 12rem;
    padding: 0.75rem 0.75rem 0.75rem 1.1rem;
    border-radius: 0.55rem;
    color: var(--accent);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 750;
    text-decoration: none;
}
.services-question i {
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-style: normal;
    transition: 0.25s;
}
.services-question a:hover i {
    transform: rotate(45deg);
}
@media (max-width: 991.98px) {
    .services-hero {
        min-height: 35rem;
    }
    .services-hero-inner {
        grid-template-columns: 1fr;
    }
    .services-hero-note {
        display: none;
    }
    .services-list-head,
    .services-question .container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .services-question p {
        max-width: 28rem;
    }
    .services-question a {
        width: 100%;
        max-width: 18rem;
    }
    .service-card--wide {
        grid-template-columns: auto 1fr;
    }
    .service-card--wide ul {
        grid-column: 2;
        grid-row: auto;
    }
    .service-card--wide a {
        grid-column: 1/-1;
    }
}
@media (max-width: 575.98px) {
    .services-hero {
        min-height: 32rem;
    }
    .services-hero-inner {
        padding-top: 1.7rem;
        padding-bottom: 3.5rem;
    }
    .services-hero-copy h1 {
        font-size: clamp(2.8rem, 14vw, 4.4rem);
    }
    .services-hero-copy p {
        font-size: 0.9rem;
    }
    .services-hero-art {
        right: -12rem;
        bottom: -6rem;
        width: 31rem;
        height: 31rem;
    }
    .services-list-section {
        padding: 4rem 0;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .service-card,
    .service-card--wide {
        min-height: auto;
        grid-template-columns: auto 1fr;
        padding: 1.5rem;
    }
    .service-card ul,
    .service-card--wide ul {
        grid-column: 1/-1;
    }
    .service-card a,
    .service-card--wide a {
        grid-column: 1/-1;
    }
    .services-question .container {
        border-radius: 1rem;
    }
    .services-question h2 {
        font-size: 2.35rem;
    }
}

.services-hero {
    min-height: 0;
    background: linear-gradient(135deg, #f7f8f5 0%, #f7f8f5 72%, #eef5f1 100%);
}
.services-hero-inner {
    display: block;
    padding: clamp(3.5rem, 6vw, 5.75rem) 0 clamp(4.5rem, 7vw, 6rem);
}
.services-crumbs {
    display: flex;
}
.services-hero-copy {
    position: relative;
    max-width: 56rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}
.services-hero-copy .eyebrow {
    display: none;
}
.services-hero-copy .eyebrow::before {
    display: none;
}
.services-hero-copy .eyebrow::after {
    width: 3.2rem;
}
.services-hero-copy h1 {
    max-width: 54rem;
    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: 0.94;
}
.services-hero-copy p {
    max-width: 39rem;
    margin-top: 1.55rem;
}
.services-hero-note {
    display: none;
}
.services-list-section.services-stage {
    padding-block: clamp(4rem, 7vw, 6.5rem);
}
.services-hero-cta.hero-primary-cta {
    display: inline-grid;
    margin-top: 2rem;
}
.services-hero-cta.hero-primary-cta:hover > i {
    transform: translate(0.16rem, -50%) rotate(90deg);
}
.services-hero.hero-v2 h1 em::after {
    display: none;
}

.services-hero-inner {
    position: relative;
}
.services-hero-inner .services-crumbs {
    position: absolute;
    top: clamp(1.5rem, 2vw, 2rem);
    left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
    z-index: 1;
}
.services-hero-inner .services-hero-copy {
    margin-top: 0;
}

.portfolio-hero .services-hero-note,
.about-hero .services-hero-note {
    display: flex;
    position: absolute;
    right: 0;
    bottom: clamp(3.5rem, 7vw, 6rem);
    width: 13rem;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.35rem 0 0 1.35rem;
    border-top: 1px solid rgba(15, 92, 99, 0.3);
    border-left: 1px solid rgba(15, 92, 99, 0.2);
}
.portfolio-hero .services-hero-note strong,
.about-hero .services-hero-note strong {
    color: var(--accent);
    font-size: clamp(3.2rem, 5vw, 5.4rem);
    font-weight: 550;
    line-height: 0.75;
    letter-spacing: -0.09em;
}
.portfolio-hero .services-hero-note span,
.about-hero .services-hero-note span {
    margin-top: 0.8rem;
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.portfolio-hero .services-hero-note p,
.about-hero .services-hero-note p {
    margin: 0.65rem 0 0;
    color: #71807d;
    font-size: 0.75rem;
    line-height: 1.55;
}
@media (max-width: 991.98px) {
    .portfolio-hero .services-hero-note,
    .about-hero .services-hero-note {
        display: none;
    }
}
@media (max-width: 575.98px) {
    .services-hero {
        min-height: 29rem;
    }
    .services-hero-copy {
        margin-top: 4.5rem;
    }
    .services-hero-copy h1 {
        font-size: clamp(2.65rem, 13.5vw, 4rem);
    }
}

.services-list-section {
    padding: clamp(4.5rem, 9vw, 8rem) 0;
    background: #fff;
}
.services-question {
    display: none;
}
.services-list-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    max-width: none;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.services-list-head h2 {
    max-width: 35rem;
    font-size: clamp(2rem, 3.8vw, 3.75rem);
}
.services-grid,
.services-list-section .services-grid {
    display: block;
    border: 0 !important;
    background: transparent !important;
}
.service-card,
.service-card--wide {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 4rem minmax(13rem, 0.9fr) minmax(17rem, 1.25fr) auto;
    grid-template-rows: auto auto;
    gap: 0.45rem 1.5rem;
    min-height: 0;
    margin: 0;
    padding: 1.65rem 0;
    border: 0;
    border-top: 1px solid rgba(23, 35, 38, 0.15);
    background: transparent;
    transition: transform 0.3s ease;
}
.service-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0.35rem -0.9rem;
    border-radius: 0.5rem;
    background: #f2f7f4;
    opacity: 0;
    transform: scaleX(0.975);
    transition:
        opacity 0.28s ease,
        transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.service-card > * {
    position: relative;
    z-index: 1;
}
.service-card:last-child {
    border-bottom: 1px solid rgba(23, 35, 38, 0.15);
}
.service-card:hover,
.service-card--teal:hover {
    background: transparent;
    transform: none;
}
.service-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}
.service-card > span,
.service-card--teal > span {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-top: 0.2rem;
    color: var(--accent);
    font-size: 0.67rem;
}
.service-card > div {
    grid-column: 2;
    grid-row: 1 / span 2;
}
.service-card h3,
.service-card--teal h3 {
    color: var(--ink);
    font-size: clamp(1.35rem, 2.1vw, 2rem);
    line-height: 1.08;
}
.service-card p,
.service-card--teal p {
    max-width: 31rem;
    margin: 0;
    color: #667673;
    font-size: 0.82rem;
    line-height: 1.6;
}
.service-card ul,
.service-card--wide ul {
    display: none;
}
.service-card a,
.service-card--teal a,
.service-card--wide a {
    grid-column: 4;
    grid-row: 1 / span 2;
    align-self: center;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0;
    border: 0;
    color: var(--accent);
    font-size: 0.7rem;
    white-space: nowrap;
}
.service-card a b,
.service-card--teal a b {
    width: 2rem;
    height: 2rem;
    color: #fff;
    background: var(--accent);
}
.service-card--teal,
.service-card--mint {
    background: transparent;
}
.service-card--teal a {
    border: 0;
}
.service-card--teal a b {
    color: #fff;
    background: var(--accent);
}
@media (max-width: 767.98px) {
    .services-list-head {
        display: block;
    }
    .services-list-head > p {
        margin-top: 1rem;
    }
    .service-card,
    .service-card--wide {
        grid-template-columns: 2.25rem 1fr auto;
        gap: 0.8rem;
        padding: 1.3rem 0;
    }
    .service-card > span,
    .service-card--teal > span {
        grid-row: 1;
    }
    .service-card > div {
        grid-column: 2 / -1;
        grid-row: 1;
    }
    .service-card p,
    .service-card--teal p {
        margin-top: 0.55rem;
    }
    .service-card a,
    .service-card--teal a,
    .service-card--wide a {
        grid-column: 3;
        grid-row: 1;
    }
    .service-card a {
        font-size: 0;
    }
    .service-card:hover,
    .service-card--teal:hover {
        padding-inline: 0;
    }
}

.services-list-section .services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
    border: 0 !important;
    background: transparent !important;
}
.service-card,
.service-card--wide {
    display: block;
    min-height: 13.75rem;
    margin: 0;
    padding: 2rem;
    border: 1px solid rgba(23, 35, 38, 0.1);
    border-radius: 1.45rem;
    background: #fff;
    box-shadow: 0 1rem 2.4rem rgba(23, 35, 38, 0.035);
    transition:
        transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.32s ease,
        box-shadow 0.32s ease,
        background-color 0.32s ease;
}
.service-card::before {
    display: none;
}
.service-card > span,
.service-card--teal > span {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    padding: 0;
    border-radius: 0.7rem;
    color: var(--accent);
    background: var(--mint);
    font-size: 0;
}
.service-card > span::after {
    font-size: 1.25rem;
    line-height: 1;
}
.service-card:nth-child(1) > span::after {
    content: "⌘";
}
.service-card:nth-child(2) > span::after {
    content: "◫";
}
.service-card:nth-child(3) > span::after {
    content: "↔";
}
.service-card:nth-child(4) > span::after {
    content: "✦";
}
.service-card:nth-child(5) > span::after {
    content: "↻";
}
.service-card > div {
    display: block;
    margin-top: 1.15rem;
}
.service-card h3,
.service-card--teal h3 {
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1.2;
    letter-spacing: -0.035em;
}
.service-card p,
.service-card--teal p {
    margin: 0.65rem 0 0;
    color: #6c7878;
    font-size: 0.85rem;
    line-height: 1.55;
}
.service-card ul,
.service-card--wide ul,
.service-card a,
.service-card--teal a,
.service-card--wide a {
    display: none;
}
.service-card--teal,
.service-card--mint {
    background: #fff;
}
.service-card:hover,
.service-card--teal:hover {
    padding: 2rem;
    border-color: rgba(15, 92, 99, 0.23);
    background: #f7faf8;
    box-shadow: 0 1.35rem 2.8rem rgba(15, 92, 99, 0.09);
    transform: translateY(-0.35rem);
}
@media (max-width: 991.98px) {
    .services-list-section .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 575.98px) {
    .services-list-section .services-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .service-card,
    .service-card--wide {
        min-height: auto;
        padding: 1.5rem;
    }
    .service-card:hover,
    .service-card--teal:hover {
        padding: 1.5rem;
        transform: translateY(-0.2rem);
    }
}

.services-list-section .services-grid {
    gap: 1.75rem !important;
}
.service-card,
.service-card--wide {
    min-height: 14.2rem;
    padding: 2.25rem 2rem;
    border-color: rgba(23, 35, 38, 0.1);
    border-radius: 1.65rem;
    background: #fafbfa;
    box-shadow: 0 0.9rem 2.5rem rgba(23, 35, 38, 0.025);
}
.service-card > span,
.service-card--teal > span {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 0.65rem;
    color: var(--accent);
    background: transparent;
}
.service-card > span::after {
    color: var(--accent);
    font-size: 1.6rem;
    font-weight: 500;
}
.service-card > div {
    margin-top: 1.2rem;
}
.service-card h3,
.service-card--teal h3 {
    font-size: clamp(1.35rem, 1.7vw, 1.6rem);
    letter-spacing: -0.03em;
}
.service-card p,
.service-card--teal p {
    max-width: 27rem;
    margin-top: 0.85rem;
    color: #697573;
    font-size: 0.9rem;
    line-height: 1.55;
}
.service-card:hover,
.service-card--teal:hover {
    padding: 2.25rem 2rem;
    border-color: rgba(15, 92, 99, 0.18);
    background: #f4f8f6;
    box-shadow: 0 1.25rem 2.8rem rgba(15, 92, 99, 0.07);
    transform: translateY(-0.22rem);
}
.service-card a,
.service-card--teal a,
.service-card--wide a {
    display: inline-flex;
    grid-column: auto;
    grid-row: auto;
    gap: 0.55rem;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    margin-top: 1.5rem;
    padding: 0;
    border: 0;
    color: var(--accent);
    background: transparent;
    font-size: 0.74rem;
    font-weight: 750;
    text-decoration: none;
}
.service-card a::after {
    content: "↗";
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.25);
    border-radius: 50%;
    font-size: 0.66rem;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}
.service-card a b {
    display: none;
}
.service-card:hover a::after {
    color: #fff;
    background: var(--accent);
    transform: rotate(45deg);
}
@media (max-width: 575.98px) {
    .service-card,
    .service-card--wide,
    .service-card:hover,
    .service-card--teal:hover {
        padding: 1.55rem;
    }
    .services-list-section .services-grid {
        gap: 1rem !important;
    }
}

.service-detail-section-head > p {
    max-width: 19rem;
    margin: 0 0 0.3rem;
    color: #6a7976;
    font-size: 0.78rem;
    line-height: 1.6;
}
.service-detail-work {
    padding: clamp(3.75rem, 6vw, 5.75rem) 0;
}
.service-detail-section-head {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) minmax(15rem, 0.55fr);
    gap: 2rem;
    align-items: start;
}
.service-detail-section-head .eyebrow {
    margin-top: 0.55rem;
}
.service-detail-section-head h2 {
    max-width: 31rem;
    margin: 0;
    font-size: clamp(2rem, 3.4vw, 3.45rem);
    line-height: 1.04;
}
.service-detail-section-head > p {
    max-width: 18rem;
    margin: 0.3rem 0 0;
}
.service-work-list {
    margin-top: 2.5rem;
}
.service-work-list article {
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.25rem 0;
}
.service-work-list p {
    max-width: 38rem;
}
@media (max-width: 991.98px) {
    .service-detail-section-head {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .service-detail-section-head .eyebrow {
        margin-top: 0;
    }
    .service-detail-section-head > p {
        max-width: 31rem;
        margin: 0;
    }
}
.service-detail-work {
    background: var(--milk);
}
.service-map-head {
    display: block;
}
.service-map-head .eyebrow {
    margin: 0 0 1.2rem;
}
.service-map-head h2 {
    max-width: 42rem;
    margin: 0;
    color: var(--ink);
    font-size: clamp(2.2rem, 4.1vw, 4.3rem);
    line-height: 1;
    letter-spacing: -0.065em;
    font-weight: 600;
}
.service-map-head p {
    max-width: 32rem;
    margin: 1.25rem 0 0;
    color: #687673;
    font-size: 0.9rem;
    line-height: 1.65;
}
.service-map-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 3.5rem;
    border: 1px solid rgba(23, 35, 38, 0.13);
    background: rgba(23, 35, 38, 0.13);
}
.service-map-grid article {
    min-height: 15rem;
    padding: 2rem;
    background: #fff;
    transition: background-color 0.3s ease;
}
.service-map-grid article:hover {
    background: #f3f8f5;
}
.service-map-grid article > span {
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.service-map-grid h3 {
    margin: 2rem 0 0;
    color: var(--ink);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    letter-spacing: -0.04em;
}
.service-map-grid p {
    max-width: 27rem;
    margin: 0.7rem 0 0;
    color: #687673;
    font-size: 0.82rem;
    line-height: 1.6;
}
.service-map-grid small {
    display: block;
    margin-top: 1.25rem;
    color: #60736e;
    font-size: 0.7rem;
    line-height: 1.5;
}
.service-map-grid small b {
    color: var(--accent);
    font-weight: 750;
}
@media (max-width: 767.98px) {
    .service-map-head .eyebrow {
        margin-top: 0;
    }
    .service-map-grid {
        grid-template-columns: 1fr;
        margin-top: 2.5rem;
    }
    .service-map-grid article {
        min-height: auto;
        padding: 1.5rem;
    }
    .service-map-grid h3 {
        margin-top: 1.5rem;
    }
}
.services-hero,
.service-detail-hero,
.page-hero {
    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(229, 241, 237, 0.9),
            transparent 32rem
        ),
        var(--paper);
}
.hero-v2 h1,
.services-hero h1,
.service-detail-hero h1,
.page-hero .page-title {
    text-wrap: balance;
}

.portfolio-showcase-hero {
    padding: 2.5rem 0 clamp(4.5rem, 8vw, 7.5rem);
    background: var(--paper);
    overflow: hidden;
}
.portfolio-showcase-hero .services-crumbs {
    margin-bottom: clamp(3rem, 7vw, 6.5rem);
}
.portfolio-showcase-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.8fr);
    align-items: end;
    gap: clamp(3rem, 8vw, 9rem);
}
.portfolio-showcase-copy {
    max-width: 42rem;
}
.portfolio-showcase-copy .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.4rem;
}
.portfolio-showcase-copy .eyebrow::before {
    content: "";
    width: 3.1rem;
    height: 1px;
    background: var(--accent);
}
.portfolio-showcase-copy h1 {
    max-width: 11ch;
    margin: 0;
    color: var(--ink);
    font-size: clamp(3.3rem, 6.1vw, 6.35rem);
    font-weight: 600;
    line-height: 0.94;
    letter-spacing: -0.075em;
    text-wrap: balance;
}
.portfolio-showcase-copy h1 em {
    color: var(--accent);
    font-style: normal;
}
.portfolio-showcase-copy p {
    max-width: 34rem;
    margin: 1.8rem 0 0;
    color: #60706e;
    font-size: clamp(0.98rem, 1.2vw, 1.1rem);
    line-height: 1.65;
}
.portfolio-showcase-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 2.25rem;
    color: var(--accent);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
}
.portfolio-showcase-link span {
    display: grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.3);
    border-radius: 50%;
    transition: 0.25s ease;
}
.portfolio-showcase-link:hover span {
    color: #fff;
    background: var(--accent);
    transform: translateY(0.2rem);
}
.portfolio-showcase-art {
    position: relative;
    min-height: 29rem;
    padding: 1.3rem;
    border-radius: 1.6rem;
    background: #deede8;
}
.portfolio-window {
    position: absolute;
    border: 1px solid rgba(15, 92, 99, 0.14);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1.2rem 2.8rem rgba(15, 70, 72, 0.1);
}
.portfolio-window span {
    display: block;
    color: var(--accent);
    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}
.portfolio-window b {
    display: block;
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.04em;
}
.portfolio-window--main {
    inset: 1.3rem 3.6rem 4rem 1.3rem;
    padding: 1.55rem;
    overflow: hidden;
}
.portfolio-window--main b {
    max-width: 10ch;
    margin-top: 3.6rem;
    font-size: clamp(1.65rem, 3vw, 2.6rem);
    line-height: 0.96;
}
.portfolio-window--main i {
    position: absolute;
    right: 1.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #d7e8e2;
}
.portfolio-window--main i:nth-of-type(1) {
    bottom: 4rem;
    left: 1.55rem;
}
.portfolio-window--main i:nth-of-type(2) {
    bottom: 2.8rem;
    left: 1.55rem;
    width: 65%;
}
.portfolio-window--main i:nth-of-type(3) {
    right: 1.55rem;
    bottom: 1.55rem;
    left: 1.55rem;
    background: var(--accent);
}
.portfolio-window--small {
    right: 1.25rem;
    bottom: 1.25rem;
    width: 48%;
    padding: 1.2rem;
    background: var(--accent);
    transform: rotate(-2deg);
}
.portfolio-window--small span {
    color: #c4e1d8;
}
.portfolio-window--small b {
    margin-top: 1.2rem;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1.05;
}
.portfolio-art-caption {
    position: absolute;
    top: 2.35rem;
    right: 1.2rem;
    width: 42%;
    color: #667977;
    font-size: 0.67rem;
    line-height: 1.5;
}
.portfolio-art-caption i {
    display: block;
    width: 2.5rem;
    height: 1px;
    margin-bottom: 0.7rem;
    background: var(--accent);
}
@media (max-width: 767.98px) {
    .portfolio-showcase-hero {
        padding-bottom: 3.5rem;
    }
    .portfolio-showcase-hero .services-crumbs {
        margin-bottom: 3.5rem;
    }
    .portfolio-showcase-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .portfolio-showcase-copy h1 {
        max-width: 9.5ch;
        font-size: clamp(3rem, 14vw, 4.4rem);
    }
    .portfolio-showcase-art {
        min-height: 21rem;
    }
    .portfolio-window--main {
        right: 2.2rem;
    }
}
.service-detail-hero h1 {
    max-width: 16ch;
}
.service-detail-price {
    display: none;
}
.service-detail-hero-lead {
    max-width: 36rem;
    margin: 4.25rem 0 0;
    color: #667572;
    font-size: clamp(0.92rem, 1.2vw, 1.06rem);
    line-height: 1.65;
}
.service-detail-hero-grid > p.service-hero-price {
    position: relative;
    align-self: end;
    display: flex;
    width: min(100%, 27rem);
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 100%;
    margin: 0;
    padding: 1.2rem 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(15, 92, 99, 0.15);
    border-radius: 1rem;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 1rem 2.6rem rgba(15, 92, 99, 0.07);
}
.service-detail-hero-grid > p.service-hero-price::after {
    display: none;
}
.service-hero-price span {
    position: relative;
    padding-left: 0.85rem;
    color: var(--accent);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.service-hero-price span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-50%);
}
.service-hero-price strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: clamp(1.8rem, 2.65vw, 2.8rem);
    line-height: 0.95;
    letter-spacing: -0.07em;
    font-weight: 600;
}
.service-hero-price small {
    display: block;
    align-self: stretch;
    max-width: none;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(15, 92, 99, 0.12);
    color: #72817e;
    font-size: 0.58rem;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}
@media (max-width: 991.98px) {
    .service-detail-hero-grid > p.service-hero-price {
        max-width: 20rem;
    }
}

.service-detail-hero {
    padding: 2.25rem 0 clamp(4.5rem, 9vw, 8rem);
}
.service-detail-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: #73817e;
    font-size: 0.7rem;
    margin-top: clamp(2.5rem, 6vh, 4.5rem);
}
.service-detail-crumbs a {
    color: var(--accent);
    text-decoration: none;
}
.service-detail-crumbs b {
    font-weight: 600;
}
.service-detail-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.42fr);
    gap: 4rem;
    align-items: end;
    margin-top: clamp(5rem, 12vh, 9rem);
}
.service-detail-label {
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.service-detail-hero h1 {
    max-width: 52rem;
    margin: 1.2rem 0 0;
    color: var(--ink);
    font-size: clamp(3rem, 6.5vw, 6.75rem);
    line-height: 0.93;
    letter-spacing: -0.075em;
    font-weight: 600;
}
.service-detail-hero h1 em {
    color: var(--accent);
    font-style: normal;
}
.service-detail-hero h1 {
    max-width: 25ch;
    font-size: clamp(2.8rem, 5.35vw, 5.75rem);
}
body[data-page="about"] .service-detail-hero h1 {
    max-width: 31ch;
}
.service-detail-hero-grid > p {
    max-width: 22rem;
    margin: 0 0 0.35rem;
    color: #667572;
    font-size: 0.95rem;
    line-height: 1.65;
}
.service-detail-intro {
    padding: clamp(4.5rem, 8vw, 7rem) 0;
    background: #fff;
}
.service-detail-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.52fr);
    gap: 4rem;
    align-items: end;
}
.service-detail-split h2,
.service-detail-section-head h2,
.service-detail-value h2 {
    max-width: 40rem;
    margin: 1rem 0 0;
    color: var(--ink);
    font-size: clamp(2.1rem, 4.1vw, 4.25rem);
    line-height: 1;
    letter-spacing: -0.06em;
    font-weight: 600;
}
.service-detail-split > p {
    max-width: 28rem;
    margin: 0;
    color: #687673;
    font-size: 0.92rem;
    line-height: 1.7;
}
.service-site-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 6vw, 7rem);
    margin-top: clamp(3rem, 6vw, 5.5rem);
    border-top: 1px solid rgba(23, 35, 38, 0.16);
}
.service-site-types details {
    border-bottom: 1px solid rgba(23, 35, 38, 0.16);
}
.service-site-types summary {
    display: grid;
    grid-template-columns: 2.2rem 2.25rem minmax(0, 1fr) auto 2.1rem;
    gap: 0.85rem;
    align-items: center;
    min-height: 5.9rem;
    padding: 1.25rem 0;
    cursor: pointer;
    list-style: none;
}
.service-site-types--no-price summary {
    grid-template-columns: 2.2rem 2.25rem minmax(0, 1fr) 2.1rem;
}
.service-site-types summary::-webkit-details-marker {
    display: none;
}
.service-site-types span,
.service-work-list > article > span {
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.service-site-types summary > i {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border-radius: 50%;
    color: var(--accent);
    background: rgba(15, 92, 99, 0.09);
    font-size: 1rem;
    font-style: normal;
}
.service-site-types h3 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.15rem, 1.65vw, 1.45rem);
    line-height: 1.15;
    letter-spacing: -0.04em;
}
.service-site-types .service-type-price {
    display: inline-flex;
    gap: 0.28rem;
    align-items: baseline;
    justify-self: end;
    padding-right: 0.15rem;
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}
.service-site-types .service-type-price small {
    color: #788682;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.service-site-types .service-type-price strong {
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.service-site-types summary > b {
    display: grid;
    width: 2.05rem;
    height: 2.05rem;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.22);
    border-radius: 50%;
    color: var(--accent);
    font-size: 0.72rem;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.3s ease;
}
.service-site-types details[open] summary > b {
    color: #fff;
    background: var(--accent);
    transform: rotate(45deg);
}
.service-site-types summary:hover > b {
    color: #fff;
    background: var(--accent);
}
.service-site-types p {
    max-width: 24rem;
    margin: -0.2rem 3.8rem 1.45rem;
    color: #6b7976;
    font-size: 0.82rem;
    line-height: 1.6;
}
.service-development-scope {
    padding: clamp(4.5rem, 8vw, 7rem) 0;
    background: #fff;
}
.service-scope-grid {
    display: grid;
    grid-template-columns: minmax(16rem, 0.66fr) minmax(0, 1fr);
    gap: clamp(3rem, 9vw, 10rem);
    align-items: start;
}
.service-scope-intro {
    position: sticky;
    top: 7rem;
}
.service-scope-intro h2 {
    margin: 1rem 0 0;
    color: var(--ink);
    font-size: clamp(2.15rem, 4vw, 4rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
}
.service-scope-intro p {
    max-width: 22rem;
    margin: 1.4rem 0 0;
    color: #687673;
    font-size: 0.88rem;
    line-height: 1.65;
}
.service-scope-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(23, 35, 38, 0.16);
    list-style: none;
}
.service-scope-list li {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    padding: 1.15rem 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.16);
    color: var(--ink);
    font-size: clamp(0.95rem, 1.25vw, 1.08rem);
    line-height: 1.42;
}
.service-scope-list i {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-size: 0.78rem;
    font-style: normal;
}
.service-scope-timeline-head {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    align-items: end;
    margin-top: clamp(3.5rem, 6vw, 5.5rem);
}
.service-scope-timeline-head p {
    margin: 0;
    color: #687673;
    font-size: 0.84rem;
    line-height: 1.6;
}
.method-timeline.service-scope-timeline {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 2.3rem;
}
.method-timeline.service-scope-timeline li {
    min-height: 10rem;
}
.service-detail-work {
    padding: clamp(4.5rem, 9vw, 8rem) 0;
    background: var(--milk);
}
.about-intro-section,
.about-approach-section,
.about-tech-section {
    padding: clamp(4.5rem, 9vw, 8rem) 0;
}
.about-intro-section {
    background: #fff;
}
.about-intro-grid,
.about-tech-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.62fr);
    gap: clamp(3rem, 10vw, 10rem);
    align-items: end;
}
.about-intro-grid h2,
.about-tech-grid h2 {
    max-width: 43rem;
    margin: 1rem 0 0;
    color: var(--ink);
    font-size: clamp(2.2rem, 4.2vw, 4.35rem);
    line-height: 1;
    letter-spacing: -0.065em;
}
.about-intro-grid h2 span {
    color: var(--accent);
}
.about-intro-copy p,
.about-tech-grid p {
    margin: 0;
    color: #687673;
    font-size: clamp(1rem, 1.35vw, 1.15rem);
    line-height: 1.65;
}
.about-approach-section {
    background: var(--milk);
}
.about-approach-list {
    margin-top: clamp(3rem, 5vw, 4.5rem);
    border-top: 1px solid rgba(23, 35, 38, 0.16);
}
.about-approach-list article {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.65rem 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.16);
}
.about-approach-list article > span {
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.about-approach-list h3 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    letter-spacing: -0.04em;
}
.about-approach-list p {
    max-width: 37rem;
    margin: 0.55rem 0 0;
    color: #687673;
    font-size: 0.84rem;
    line-height: 1.65;
}
.about-tech-section {
    background: #fff;
}
.about-tech-grid > div:last-child {
    display: grid;
    gap: 1rem;
}
.about-tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}
.about-tech-tags span {
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(15, 92, 99, 0.22);
    border-radius: 99px;
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 750;
}
.about-principles,
.about-tech-premium {
    padding: clamp(5rem, 10vw, 9rem) 0;
}
.about-premium-intro {
    background: #fff;
    padding: clamp(4.5rem, 8vw, 7rem) 0;
}
.about-studio-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    padding: 0 0 clamp(2rem, 4vw, 3.25rem);
    border-bottom: 1px solid rgba(23, 35, 38, 0.16);
}
.about-studio-grid h2,
.about-principles h2,
.about-tech-premium h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(2.7rem, 5.3vw, 5.7rem);
    line-height: 0.94;
    letter-spacing: -0.075em;
}
.about-principles h2 span,
.about-tech-premium h2 span {
    color: var(--accent);
}
.about-principles-intro p,
.about-tech-premium-copy p {
    margin: 0;
    color: #687673;
    font-size: 0.95rem;
    line-height: 1.7;
}
.about-studio-copy {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 5vw, 5rem);
    padding-top: clamp(2rem, 4vw, 3.5rem);
}
.about-studio-column {
    display: grid;
    gap: 1.25rem;
    padding-right: clamp(0.75rem, 3vw, 3rem);
    border-right: 1px solid rgba(23, 35, 38, 0.16);
}
.about-studio-column:last-child {
    padding-right: 0;
    border-right: 0;
}
.about-studio-column strong {
    color: var(--accent);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
}
.about-studio-column h3 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    letter-spacing: -0.045em;
}
.about-studio-column p {
    margin: 0;
    color: #687673;
    font-size: 0.96rem;
    line-height: 1.75;
}
.about-tech-premium-copy p + p {
    margin-top: 1rem;
}
.about-principles {
    background: var(--milk);
}
.about-principles-layout {
    display: grid;
    grid-template-columns: minmax(17rem, 0.7fr) minmax(0, 1fr);
    gap: clamp(3rem, 10vw, 11rem);
    align-items: start;
}
.about-principles-intro {
    position: sticky;
    top: 7rem;
}
.about-principles-intro h2 {
    margin-top: 1rem;
}
.about-principles-intro p {
    max-width: 19rem;
    margin-top: 1.4rem;
}
.about-principles-list {
    border-top: 1px solid rgba(23, 35, 38, 0.16);
}
.about-principles-list details {
    border-bottom: 1px solid rgba(23, 35, 38, 0.16);
}
.about-principles-list summary {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) 2.2rem;
    gap: 1rem;
    align-items: center;
    min-height: 6.2rem;
    padding: 1rem 0;
    cursor: pointer;
    list-style: none;
}
.about-principles-list summary::-webkit-details-marker {
    display: none;
}
.about-principles-list summary > span {
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.about-principles-list h3 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    letter-spacing: -0.04em;
}
.about-principles-list summary > i {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.24);
    border-radius: 50%;
    color: var(--accent);
    font-size: 0.7rem;
    font-style: normal;
    transition: 0.3s;
}
.about-principles-list details[open] summary > i {
    color: #fff;
    background: var(--accent);
    transform: rotate(45deg);
}
.about-principles-list details > p {
    max-width: 35rem;
    margin: -0.2rem 3.2rem 1.5rem;
    color: #687673;
    font-size: 0.87rem;
    line-height: 1.65;
}
.about-tech-premium {
    background: #fff;
    padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.about-budget {
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
    background: var(--paper);
}
.about-budget .method-v2-budget {
    margin-top: 0;
}
.about-tech-premium-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.62fr);
    gap: clamp(3rem, 10vw, 10rem);
    align-items: start;
}
.about-tech-premium h2 {
    max-width: 39rem;
    margin-top: 1rem;
}
.about-tech-premium-copy {
    padding: 1.6rem 0;
    border-top: 1px solid rgba(23, 35, 38, 0.16);
    border-bottom: 1px solid rgba(23, 35, 38, 0.16);
}
.about-tech-premium-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.6rem;
}
.about-tech-premium-tags span {
    padding: 0.52rem 0.75rem;
    border: 1px solid rgba(15, 92, 99, 0.22);
    border-radius: 99px;
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 750;
    transition: 0.25s;
}
.about-tech-premium-tags span:hover {
    color: #fff;
    background: var(--accent);
}
@media (max-width: 991.98px) {
    .about-studio-grid,
    .about-studio-copy,
    .about-principles-layout,
    .about-tech-premium-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
    .about-studio-column,
    .about-studio-column:last-child {
        padding: 0 0 1.6rem;
        border-right: 0;
        border-bottom: 1px solid rgba(23, 35, 38, 0.16);
    }
    .about-studio-column:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }
    .about-principles-intro {
        position: static;
    }
}
@media (max-width: 575.98px) {
    .about-studio-copy {
        grid-template-columns: 1fr;
    }
    .about-studio-grid h2,
    .about-principles h2,
    .about-tech-premium h2 {
        font-size: clamp(2.35rem, 11vw, 3.6rem);
    }
    .about-principles-list summary {
        grid-template-columns: 2rem minmax(0, 1fr) 1.9rem;
        gap: 0.65rem;
        min-height: 5.5rem;
    }
    .about-principles-list details > p {
        margin: -0.1rem 2.5rem 1.25rem 2.65rem;
    }
}
@media (max-width: 991.98px) {
    .about-intro-grid,
    .about-tech-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
@media (max-width: 575.98px) {
    .about-approach-list article {
        grid-template-columns: 2.6rem minmax(0, 1fr);
        gap: 1rem;
    }
}
.service-detail-section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
}
.service-work-list {
    margin-top: 3.5rem;
    border-top: 1px solid rgba(23, 35, 38, 0.16);
}
.service-work-list article {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: 1.5rem;
    padding: 1.55rem 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.16);
}
.service-work-list h3 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    letter-spacing: -0.04em;
}
.service-work-list p {
    max-width: 30rem;
    margin: 0.55rem 0 0;
    color: #6b7976;
    font-size: 0.82rem;
    line-height: 1.6;
}
.service-detail-value {
    padding: clamp(4.5rem, 9vw, 8rem) 0;
    background: #fff;
}
.service-detail-value .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.75fr);
    gap: 5rem;
}
.service-value-list {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(23, 35, 38, 0.15);
}
.service-value-list p {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 1rem;
    margin: 0;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.15);
}
.service-value-list b {
    font-size: 0.85rem;
}
.service-value-list span {
    color: #6a7876;
    font-size: 0.78rem;
    line-height: 1.55;
}
.service-detail-price {
    padding: 0 0 clamp(4rem, 8vw, 7rem);
    background: #fff;
}
.service-price-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.55fr) auto;
    gap: 3rem;
    align-items: end;
    padding: clamp(2rem, 5vw, 4rem);
    border-radius: 1.25rem;
    color: #fff;
    background: var(--accent);
}
.service-price-card > div > span {
    color: #bde3dc;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.service-price-card h2 {
    margin: 0.8rem 0 0;
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1;
    letter-spacing: -0.07em;
}
.service-price-card p {
    max-width: 26rem;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    line-height: 1.6;
}
.service-price-card ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #d9efea;
    font-size: 0.76rem;
}
.service-price-card li:before {
    content: "✓";
    margin-right: 0.55rem;
    color: #fff;
}
.service-price-card a {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    justify-content: space-between;
    min-width: 12rem;
    padding: 0.75rem 0.75rem 0.75rem 1.1rem;
    border-radius: 0.55rem;
    color: var(--accent);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 750;
    text-decoration: none;
}
.service-price-card i {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-style: normal;
    transition: transform 0.25s;
}
.service-price-card a:hover i {
    transform: rotate(45deg);
}
@media (max-width: 991.98px) {
    .service-detail-hero-grid,
    .service-detail-split,
    .service-detail-value .container,
    .service-price-card {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .service-detail-hero-grid {
        margin-top: 5rem;
    }
    .service-detail-hero-grid > p {
        max-width: 34rem;
    }
    .service-site-types {
        grid-template-columns: 1fr;
    }
    .service-scope-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .service-scope-intro {
        position: static;
    }
    .method-timeline.service-scope-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .service-detail-section-head {
        display: block;
    }
    .service-detail-section-head h2 {
        margin-top: 1rem;
    }
    .service-price-card a {
        width: 100%;
        max-width: 18rem;
    }
}
@media (max-width: 575.98px) {
    .service-detail-hero {
        padding-top: 1.6rem;
    }
    .service-detail-hero-grid {
        margin-top: 4rem;
    }
    .service-detail-hero h1 {
        font-size: clamp(2.65rem, 13.5vw, 4.1rem);
    }
    .service-site-types {
        margin-top: 2.5rem;
    }
    .service-site-types summary {
        grid-template-columns: 1.8rem 2rem minmax(0, 1fr) auto 1.9rem;
        gap: 0.6rem;
        min-height: 5.25rem;
    }
    .service-site-types--no-price summary {
        grid-template-columns: 1.8rem 2rem minmax(0, 1fr) 1.9rem;
    }
    .service-site-types p {
        margin: -0.1rem 2.5rem 1.25rem 2.4rem;
    }
    .service-scope-timeline-head {
        display: block;
    }
    .service-scope-timeline-head p {
        margin-top: 0.45rem;
    }
    .method-timeline.service-scope-timeline {
        grid-template-columns: 1fr;
    }
    .service-work-list {
        margin-top: 2.5rem;
    }
    .service-work-list article {
        grid-template-columns: 2.6rem 1fr;
    }
    .service-value-list p {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .service-price-card {
        border-radius: 1rem;
    }
}

.services-list-section .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.65rem !important;
}
.service-offer {
    position: relative;
    display: block;
    min-height: 14rem;
    padding: 2rem;
    overflow: hidden;
    border: 1px solid rgba(23, 35, 38, 0.1);
    border-radius: 1.5rem;
    color: var(--ink);
    background: #fafbfa;
    box-shadow: 0 1rem 2.5rem rgba(23, 35, 38, 0.025);
    text-decoration: none;
    transition:
        transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.32s ease,
        box-shadow 0.32s ease,
        background-color 0.32s ease;
}
.service-offer::before {
    content: "";
    position: absolute;
    right: -2rem;
    bottom: -2rem;
    width: 8rem;
    height: 8rem;
    border: 1px solid rgba(15, 92, 99, 0.11);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.6);
    transition:
        opacity 0.35s ease,
        transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.service-offer-icon {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    color: var(--accent);
    font-size: 1.55rem;
    line-height: 1;
}
.service-offer h3 {
    margin: 1.1rem 0 0;
    color: var(--ink);
    font-size: clamp(1.25rem, 1.65vw, 1.55rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
    font-weight: 700;
}
.service-offer p {
    max-width: 22rem;
    margin: 0.75rem 0 0;
    color: #687574;
    font-size: 0.86rem;
    line-height: 1.55;
}
.service-offer-more {
    position: absolute;
    right: 2rem;
    bottom: 1.55rem;
    display: flex;
    gap: 0.55rem;
    align-items: center;
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 750;
    opacity: 0;
    transform: translateY(0.45rem);
    transition:
        opacity 0.25s ease,
        transform 0.3s ease;
}
.service-offer-more i {
    display: grid;
    width: 1.4rem;
    height: 1.4rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-size: 0.63rem;
    font-style: normal;
}
.service-offer:hover {
    color: var(--ink);
    border-color: rgba(15, 92, 99, 0.2);
    background: #f4f8f6;
    box-shadow: 0 1.4rem 3rem rgba(15, 92, 99, 0.08);
    transform: translateY(-0.28rem);
}
.service-offer:hover::before {
    opacity: 1;
    transform: scale(1);
}
.service-offer:hover .service-offer-more {
    opacity: 1;
    transform: translateY(0);
}
.service-offer:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}
@media (max-width: 991.98px) {
    .services-list-section .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 575.98px) {
    .services-list-section .services-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .service-offer {
        min-height: 12.75rem;
        padding: 1.55rem;
    }
    .service-offer-more {
        right: 1.55rem;
        bottom: 1.3rem;
        opacity: 1;
        transform: none;
    }
}

.hero-v2 .hero-rotating-title {
    max-width: 18ch;
    font-size: clamp(3.25rem, 6.2vw, 6.15rem);
    line-height: 1.01;
    letter-spacing: -0.065em;
}
.hero-rotating-title > span:not(.visually-hidden) {
    display: block;
}
.hero-typed-line {
    height: 1.12em;
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    color: var(--accent);
    font-size: clamp(2.65rem, 5.1vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
    white-space: nowrap;
}
.hero-v2 .hero-typed-line em {
    display: inline;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}
.hero-v2 .hero-typed-line em::after {
    display: none;
}
.hero-typed-line > i {
    flex: 0 0 2px;
    align-self: center;
    width: 2px;
    height: 0.7em;
    margin-left: 0.09em;
    border-radius: 999px;
    background: var(--accent);
    transform: translateY(0.01em);
    animation: typing-caret 0.85s step-end infinite;
}
@keyframes typing-caret {
    0%,
    45% {
        opacity: 1;
    }
    46%,
    100% {
        opacity: 0;
    }
}
@media (max-width: 767.98px) {
    .hero-v2 .hero-rotating-title {
        max-width: 11ch;
        font-size: clamp(3rem, 13vw, 4.2rem);
    }
    .hero-typed-line {
        width: calc(100vw - 2rem);
        height: 1.2em;
        margin-left: 50%;
        transform: translateX(-50%);
        font-size: clamp(1.75rem, 8vw, 2.2rem);
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-typed-line > i {
        display: none;
        animation: none;
    }
}

.precision-header {
    background: rgba(247, 248, 245, 0.94);
    box-shadow: none;
    backdrop-filter: blur(18px);
}
.precision-header .navbar {
    min-height: 4.6rem;
    border-bottom: 1px solid rgba(23, 35, 38, 0.08);
}
.precision-header-inner {
    max-width: 1400px;
    padding-inline: clamp(1.25rem, 3vw, 2.5rem);
}
.precision-header .navbar-brand {
    display: block;
    width: 8.7rem;
    height: auto;
    margin: 0;
    padding: 0;
    text-decoration: none;
}
.precision-header .navbar-brand .brand-logo {
    display: block;
    width: 100%;
    height: auto;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}
.precision-header .navbar-collapse {
    margin-left: clamp(2.5rem, 8vw, 8rem);
}
.precision-header .precision-nav {
    gap: clamp(1.3rem, 2.5vw, 2.75rem);
}
.precision-header .precision-nav .nav-link {
    padding: 0.7rem 0;
    color: rgba(23, 35, 38, 0.62);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.01em;
}
.precision-header .precision-nav .nav-link::after {
    height: 1px;
}
.precision-header .precision-nav .nav-link:hover,
.precision-header .precision-nav .nav-link.active {
    color: var(--ink);
}
.precision-header .header-actions {
    gap: 1.1rem;
}
.precision-header .locale-trigger {
    padding: 0.55rem 0;
    color: rgba(23, 35, 38, 0.55);
}
.precision-header .header-cta {
    padding: 0.68rem 1.05rem;
    border: 1px solid rgba(15, 92, 99, 0.24);
    border-radius: 0.55rem;
    color: var(--accent);
    background: transparent;
    box-shadow: none;
}
.precision-header .header-cta:hover {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: none;
}
@media (max-width: 991.98px) {
    .precision-header .navbar {
        min-height: 4.25rem;
    }
    .precision-header-inner {
        padding-inline: 1rem;
    }
    .precision-header .navbar-brand {
        width: 7.5rem;
    }
    .precision-header .navbar-collapse {
        max-height: calc(100vh - 4.25rem);
        padding: 1.25rem 1rem 1.5rem;
    }
    .precision-header .precision-nav {
        gap: 0;
    }
    .precision-header .precision-nav .nav-link {
        padding: 0.85rem 0;
        font-size: 0.82rem;
    }
    .precision-header-inner > .locale-dropdown {
        margin-left: auto;
        margin-right: 0.8rem;
    }
    .precision-header-inner > .locale-dropdown .locale-trigger {
        padding: 0.5rem 0.15rem;
    }
    .precision-header-inner > .locale-dropdown .dropdown-menu {
        width: 10rem;
        margin-top: 0.45rem !important;
        padding: 0.3rem;
    }
    .precision-header-inner > .locale-dropdown .language-option {
        grid-template-columns: 1.65rem 1fr;
        min-height: 2.7rem;
        padding: 0.5rem 0.55rem;
        font-size: 0.76rem;
    }
    .precision-header .navbar-collapse .header-actions {
        justify-content: center;
        width: 100%;
    }
    .precision-header .navbar-collapse .header-cta {
        justify-content: center;
        margin-left: 0;
        text-align: center;
    }
}

.home-work,
.home-value,
.home-process,
.home-budget,
.home-contact {
    padding: clamp(4rem, 7vw, 6.5rem) 0;
}
.home-work {
    background: var(--milk);
}
.home-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}
.home-section-head h2,
.home-value h2,
.budget-layout h2,
.home-contact-panel h2 {
    margin: 0.8rem 0 0;
    color: var(--ink);
    font-size: clamp(2.25rem, 3.8vw, 4rem);
    line-height: 1.03;
    letter-spacing: -0.055em;
    font-weight: 600;
    text-wrap: balance;
}
.home-inline-link {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.22);
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 750;
    text-decoration: none;
}
.home-inline-link span {
    color: var(--accent);
    transition: transform 0.25s;
}
.home-inline-link:hover span {
    transform: translate(0.15rem, -0.15rem);
}
.work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
    gap: 1.25rem;
    align-items: start;
}
.work-card {
    color: var(--ink);
    text-decoration: none;
}
.work-visual {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/4.25;
    background: #dceae5;
}
.work-card-large .work-visual {
    aspect-ratio: 16/10;
}
.work-visual::before,
.work-visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(15, 92, 99, 0.12);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-visual::before {
    width: 55%;
    aspect-ratio: 1;
    right: -12%;
    top: -12%;
}
.work-visual::after {
    width: 38%;
    aspect-ratio: 1;
    left: -10%;
    bottom: -14%;
}
.work-visual-crm {
    background: #e7e9e4;
}
.work-window {
    position: absolute;
    z-index: 1;
    inset: 16% 12%;
    border: 1px solid rgba(23, 35, 38, 0.1);
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 1.25rem 3.5rem rgba(23, 35, 38, 0.1);
    transform: translateY(0);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-window::before {
    content: "";
    display: block;
    height: 11%;
    border-bottom: 1px solid rgba(23, 35, 38, 0.08);
    background: linear-gradient(90deg, var(--accent) 0 21%, transparent 21%);
    opacity: 0.75;
}
.work-window::after {
    content: "";
    position: absolute;
    top: 22%;
    right: 8%;
    bottom: 9%;
    left: 8%;
    background: linear-gradient(
        #e8eeeb 0 18%,
        transparent 18% 26%,
        #f0f2ef 26% 47%,
        transparent 47% 55%,
        #f0f2ef 55% 76%,
        transparent 76%
    );
}
.work-card:hover .work-window {
    transform: translateY(-0.5rem);
}
.work-card:hover .work-visual::before {
    transform: scale(1.1);
}
.work-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.2rem;
}
.work-meta h3 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: -0.025em;
    font-weight: 650;
}
.work-meta p,
.work-meta > span {
    margin: 0.35rem 0 0;
    color: #7d8988;
    font-size: 0.7rem;
}

.work-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.55fr);
    align-items: end;
    gap: clamp(2rem, 8vw, 8rem);
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.work-section-head h2 {
    max-width: 14ch;
    margin: 0.8rem 0 0;
    color: var(--ink);
    font-size: clamp(2.25rem, 3.8vw, 4rem);
    line-height: 1.03;
    letter-spacing: -0.055em;
    font-weight: 600;
    text-wrap: balance;
}
.work-section-aside {
    width: 100%;
    max-width: 25rem;
    justify-self: end;
    padding-bottom: 0.2rem;
}
.work-section-aside p {
    margin: 0 0 1.5rem;
    color: #6f7d7b;
    font-size: 0.82rem;
    line-height: 1.65;
}
.work-all-link {
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(23, 35, 38, 0.16);
    border-bottom: 1px solid rgba(23, 35, 38, 0.16);
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 750;
    text-decoration: none;
    transition:
        color 0.25s,
        border-color 0.25s;
}
.work-all-link i {
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-size: 0.68rem;
    font-style: normal;
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.25s;
}
.work-all-link:hover {
    color: var(--accent-dark);
    border-color: rgba(15, 92, 99, 0.38);
}
.work-all-link:hover i {
    background: var(--accent-dark);
    transform: rotate(45deg);
}
.featured-cases {
    display: grid;
    gap: 1.25rem;
}
.featured-case {
    min-height: 35rem;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
    overflow: hidden;
    border: 1px solid rgba(23, 35, 38, 0.09);
    border-radius: 1rem;
    color: var(--ink);
    background: #f2f5f2;
    text-decoration: none;
    transition:
        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.featured-case:hover {
    color: var(--ink);
    transform: translateY(-4px);
    box-shadow: 0 1.75rem 4rem rgba(23, 35, 38, 0.08);
}
.featured-case-system {
    grid-template-columns: minmax(20rem, 0.65fr) minmax(0, 1.35fr);
    background: #eef3f1;
}
.featured-case--reverse {
    grid-template-columns: minmax(20rem, 0.65fr) minmax(0, 1.35fr);
}
.featured-case--reverse .case-copy {
    order: 1;
}
.featured-case--reverse .case-visual {
    order: 2;
}
.case-visual {
    min-width: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(2rem, 5vw, 5rem);
    background: #dfe9e4;
}
.featured-case-hotel .case-visual {
    background: linear-gradient(145deg, #d7e6df 0%, #edf2ee 100%);
}
.featured-case-system .case-visual {
    background: linear-gradient(145deg, #173237 0%, #0f5c63 100%);
}
.case-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vw, 4rem);
    background: #fff;
}
.case-topline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--accent);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.case-topline span:last-child {
    color: #899492;
    font-weight: 650;
}
.case-copy h3 {
    margin: clamp(2rem, 4vw, 4rem) 0 0;
    font-size: clamp(2rem, 3.4vw, 3.7rem);
    line-height: 1;
    letter-spacing: -0.055em;
    font-weight: 600;
}
.case-copy > p {
    margin: 1.25rem 0 0;
    color: #667574;
    font-size: 0.84rem;
    line-height: 1.68;
}
.case-copy dl {
    margin: 2rem 0 0;
    border-top: 1px solid rgba(23, 35, 38, 0.11);
}
.case-copy dl > div {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 1rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.11);
}
.case-copy dt {
    color: #899492;
    font-size: 0.64rem;
    font-weight: 650;
}
.case-copy dd {
    margin: 0;
    color: var(--ink);
    font-size: 0.7rem;
    line-height: 1.5;
}
.case-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 750;
}
.case-link i {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-style: normal;
    transition:
        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.3s;
}
.featured-case:hover .case-link i {
    background: var(--accent-dark);
    transform: rotate(45deg);
}
.case-browser {
    width: min(100%, 47rem);
    overflow: hidden;
    border: 1px solid rgba(23, 35, 38, 0.11);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 2rem 5rem rgba(23, 35, 38, 0.14);
    transform: perspective(90rem) rotateY(1.5deg);
    transform-origin: center;
    will-change: transform;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.featured-case:hover .case-browser {
    transform: perspective(90rem) rotateY(0) translateY(-0.35rem) scale(1.035);
}
.case-browser-bar {
    height: 2.4rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1rem;
    border-bottom: 1px solid #e8ece9;
}
.case-browser-bar i {
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: #b8c4c0;
}
.case-browser-bar span {
    margin-left: auto;
    margin-right: auto;
    color: #9aa5a2;
    font-size: 0.5rem;
}
.case-browser-screen {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #dfe3eb;
}
.case-browser-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.featured-case:hover .case-browser-screen img {
    transform: none;
}
.hotel-preview {
    position: relative;
    min-height: 23rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    color: #fff;
    background:
        linear-gradient(110deg, rgba(18, 35, 35, 0.84), rgba(18, 35, 35, 0.17)),
        linear-gradient(145deg, #5d756b, #b8cabe);
}
.hotel-preview::after {
    content: "";
    position: absolute;
    right: -3rem;
    bottom: -5rem;
    width: 15rem;
    height: 15rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    box-shadow: 0 0 0 3rem rgba(255, 255, 255, 0.035);
}
.preview-brand {
    position: relative;
    z-index: 1;
    font-size: 0.58rem;
    line-height: 1.15;
    letter-spacing: 0.18em;
}
.hotel-preview > div {
    position: relative;
    z-index: 1;
    max-width: 24rem;
    padding: 3rem 0 2rem;
}
.hotel-preview small,
.hotel-preview strong,
.hotel-preview b {
    display: block;
}
.hotel-preview small {
    margin-bottom: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.hotel-preview strong {
    max-width: 12ch;
    font-size: clamp(1.8rem, 3vw, 3.2rem);
    line-height: 1.03;
    letter-spacing: -0.045em;
    font-weight: 500;
}
.hotel-preview b {
    width: max-content;
    margin-top: 1.5rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.3rem;
    color: var(--ink);
    background: #fff;
    font-size: 0.55rem;
}
.hotel-preview > em {
    position: relative;
    z-index: 1;
    font-size: 0.5rem;
    font-style: normal;
    letter-spacing: 0.08em;
}
.system-preview {
    width: min(100%, 48rem);
    min-height: 25rem;
    display: grid;
    grid-template-columns: 4rem 1fr;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 0.8rem;
    background: #f7f9f7;
    box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.25);
    transform: perspective(90rem) rotateY(-1.5deg);
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.featured-case:hover .system-preview {
    transform: perspective(90rem) rotateY(0) translateY(-0.35rem);
}
.system-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 1.2rem 0.75rem;
    color: #fff;
    background: #102c31;
}
.system-sidebar strong {
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 0.5rem;
    background: var(--accent);
    font-size: 0.6rem;
}
.system-sidebar i {
    width: 1rem;
    height: 0.28rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.2);
}
.system-sidebar i:nth-of-type(2) {
    background: #86bcb1;
}
.system-board {
    min-width: 0;
    padding: 1.5rem;
}
.system-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #e1e8e4;
}
.system-board-head span {
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 750;
}
.system-board-head b {
    padding: 0.45rem 0.7rem;
    border: 1px solid #d9e3de;
    border-radius: 0.35rem;
    color: #60716e;
    background: #fff;
    font-size: 0.52rem;
}
.system-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin: 1rem 0;
}
.system-stats i {
    height: 3.8rem;
    border: 1px solid #e0e7e3;
    border-radius: 0.45rem;
    background: #fff;
    box-shadow: inset 0.22rem 0 var(--accent);
}
.system-calendar {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-height: 14rem;
    border-top: 1px solid #e1e7e4;
    border-left: 1px solid #e1e7e4;
}
.system-calendar span {
    border-right: 1px solid #e1e7e4;
    border-bottom: 1px solid #e1e7e4;
}
.system-calendar b {
    position: absolute;
    left: 8%;
    height: 1.25rem;
    border-radius: 0.25rem;
    background: #badbd2;
}
.system-calendar b:nth-of-type(1) {
    top: 28%;
    width: 45%;
}
.system-calendar b:nth-of-type(2) {
    top: 51%;
    left: 36%;
    width: 55%;
    background: #0f5c63;
}
.system-calendar b:nth-of-type(3) {
    top: 74%;
    left: 15%;
    width: 33%;
    background: #7ea99f;
}
@media (max-width: 991.98px) {
    .work-section-head {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .work-section-aside {
        max-width: 100%;
        justify-self: stretch;
    }
    .featured-case,
    .featured-case-system {
        min-height: 0;
        grid-template-columns: 1fr;
    }
    .featured-case-system .case-copy {
        order: 2;
    }
    .featured-case-system .case-visual {
        order: 1;
    }
    .featured-case--reverse .case-copy {
        order: 2;
    }
    .featured-case--reverse .case-visual {
        order: 1;
    }
    .case-visual {
        min-height: 28rem;
    }
}
@media (max-width: 575.98px) {
    .work-section-head h2 {
        font-size: 2.35rem;
    }
    .featured-cases {
        gap: 1rem;
    }
    .featured-case {
        border-radius: 0.75rem;
    }
    .case-visual {
        min-height: 21rem;
        padding: 1rem;
    }
    .case-copy {
        padding: 1.5rem;
    }
    .case-copy h3 {
        margin-top: 2rem;
        font-size: 2.25rem;
    }
    .case-copy dl > div {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
    .hotel-preview {
        min-height: 18rem;
    }
    .system-preview {
        min-height: 19rem;
        grid-template-columns: 3rem 1fr;
    }
    .system-board {
        padding: 1rem;
    }
    .system-stats i {
        height: 2.8rem;
    }
    .system-calendar {
        min-height: 10rem;
    }
}
.home-value {
    background: #fff;
}
.approach-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(19rem, 0.82fr) minmax(0, 1.18fr);
    overflow: hidden;
    border-radius: 1rem;
    color: #fff;
    background: var(--ink);
}
.approach-panel::before {
    content: "";
    position: absolute;
    top: -18rem;
    left: -18rem;
    width: 34rem;
    height: 34rem;
    border: 1px solid rgba(141, 197, 185, 0.13);
    border-radius: 50%;
    box-shadow:
        0 0 0 5rem rgba(141, 197, 185, 0.025),
        0 0 0 10rem rgba(141, 197, 185, 0.018);
    pointer-events: none;
}
.approach-intro {
    position: relative;
    z-index: 1;
    min-height: 35rem;
    display: flex;
    flex-direction: column;
    padding: clamp(2.5rem, 5vw, 5rem);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.approach-intro .eyebrow {
    color: #8dc5b9;
}
.approach-intro h2 {
    max-width: 12ch;
    margin: 1.25rem 0 0;
    color: #fff;
    font-size: clamp(2.3rem, 4vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 550;
    text-wrap: balance;
}
.approach-intro > p {
    max-width: 31rem;
    margin: 1.5rem 0 0;
    color: rgba(255, 255, 255, 0.57);
    font-size: 0.84rem;
    line-height: 1.7;
}
.approach-sign {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: auto;
    padding-top: 2.5rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
}
.approach-sign i {
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #8dc5b9;
    box-shadow: 0 0 0 0.35rem rgba(141, 197, 185, 0.1);
}
.approach-principles {
    display: grid;
    align-content: center;
    padding: clamp(1.5rem, 4vw, 4rem);
}
.approach-principles article {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: clamp(1.75rem, 3vw, 2.6rem) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    transition:
        padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s;
}
.approach-principles article:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.approach-principles article:hover {
    padding-left: 0.65rem;
    border-color: rgba(141, 197, 185, 0.42);
}
.approach-principles article > span {
    padding-top: 0.2rem;
    color: #8dc5b9;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}
.approach-principles h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 600;
}
.approach-principles p {
    max-width: 34rem;
    margin: 0.65rem 0 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    line-height: 1.65;
}
@media (max-width: 991.98px) {
    .approach-panel {
        grid-template-columns: 1fr;
    }
    .approach-intro {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .approach-sign {
        margin-top: 2.5rem;
    }
}
@media (max-width: 575.98px) {
    .approach-panel {
        border-radius: 0.75rem;
    }
    .approach-intro {
        padding: 2rem 1.5rem;
    }
    .approach-intro h2 {
        font-size: 2.35rem;
    }
    .approach-principles {
        padding: 0.5rem 1.5rem 1.5rem;
    }
    .approach-principles article {
        grid-template-columns: 2rem 1fr;
        padding: 1.6rem 0;
    }
    .approach-principles article:hover {
        padding-left: 0;
    }
}

.home-method {
    padding: clamp(4rem, 7vw, 6.5rem) 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.035);
    background: #edf1ee;
}
.method-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.55fr);
    align-items: end;
    gap: clamp(2rem, 8vw, 8rem);
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.method-head h2 {
    max-width: 13ch;
    margin: 0.8rem 0 0;
    color: var(--ink);
    font-size: clamp(2.3rem, 4vw, 4.2rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 600;
    text-wrap: balance;
}
.method-head > p {
    max-width: 25rem;
    justify-self: end;
    margin: 0;
    color: #697775;
    font-size: 0.82rem;
    line-height: 1.7;
}
.method-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 0.55fr);
    border: 1px solid rgba(23, 35, 38, 0.09);
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
}
.method-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}
.method-steps li {
    min-height: 13rem;
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: 1rem;
    align-content: space-between;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-right: 1px solid rgba(23, 35, 38, 0.09);
    border-bottom: 1px solid rgba(23, 35, 38, 0.09);
    transition: background-color 0.3s;
}
.method-steps li:nth-child(2n) {
    border-right: 0;
}
.method-steps li:nth-last-child(-n + 2) {
    border-bottom: 0;
}
.method-steps li:hover {
    background: #f6f9f7;
}
.method-steps li > span {
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}
.method-steps li > div {
    align-self: end;
}
.method-steps h3 {
    max-width: 18ch;
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 650;
}
.method-steps p {
    max-width: 28rem;
    margin: 0.65rem 0 0;
    color: #71807e;
    font-size: 0.74rem;
    line-height: 1.6;
}
.method-budget {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 4vw, 4rem);
    color: #fff;
    background: var(--accent);
}
.method-budget::after {
    content: "";
    position: absolute;
    right: -8rem;
    bottom: -9rem;
    width: 19rem;
    height: 19rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    box-shadow: 0 0 0 3.5rem rgba(255, 255, 255, 0.025);
    pointer-events: none;
}
.method-budget > span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.method-budget h3 {
    position: relative;
    z-index: 1;
    margin: clamp(2rem, 5vw, 4.5rem) 0 0;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-weight: 600;
}
.method-budget > p {
    position: relative;
    z-index: 1;
    margin: 1.25rem 0 0;
    color: rgba(255, 255, 255, 0.67);
    font-size: 0.78rem;
    line-height: 1.65;
}
.method-budget > a {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding: 0.8rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 0.73rem;
    font-weight: 750;
    text-decoration: none;
}
.method-budget > a i {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--accent);
    background: #fff;
    font-size: 0.68rem;
    font-style: normal;
    transition: transform 0.3s;
}
.method-budget > a:hover i {
    transform: rotate(45deg);
}
.method-budget small {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: auto;
    padding-top: 2rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.62rem;
}
.method-budget small b {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #a9d7cd;
    box-shadow: 0 0 0 0.3rem rgba(255, 255, 255, 0.08);
}
@media (max-width: 991.98px) {
    .method-head {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .method-head > p {
        max-width: 36rem;
        justify-self: start;
    }
    .method-layout {
        grid-template-columns: 1fr;
    }
    .method-budget {
        min-height: 26rem;
    }
}
@media (max-width: 575.98px) {
    .home-method {
        padding: 3.75rem 0;
    }
    .method-head h2 {
        font-size: 2.35rem;
    }
    .method-layout {
        border-radius: 0.75rem;
    }
    .method-steps {
        grid-template-columns: 1fr;
    }
    .method-steps li,
    .method-steps li:nth-child(2n),
    .method-steps li:nth-last-child(-n + 2) {
        min-height: 11rem;
        border-right: 0;
        border-bottom: 1px solid rgba(23, 35, 38, 0.09);
    }
    .method-steps li:last-child {
        border-bottom: 0;
    }
    .method-budget {
        min-height: 25rem;
        padding: 2rem 1.5rem;
    }
}

.home-method-v2 {
    background: #edf1ee;
}
.method-v2-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.55fr);
    align-items: end;
    gap: clamp(2rem, 8vw, 8rem);
}
.method-v2-head h2 {
    max-width: 15ch;
    margin: 0.8rem 0 0;
    color: var(--ink);
    font-size: clamp(2.3rem, 4vw, 4.15rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 600;
    text-wrap: balance;
}
.method-v2-head > p {
    max-width: 25rem;
    justify-self: end;
    margin: 0 0 0.25rem;
    color: #697775;
    font-size: 0.82rem;
    line-height: 1.7;
}
.method-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin: clamp(3rem, 5vw, 5rem) 0 0;
    padding: 0;
    list-style: none;
}
.method-timeline::before {
    content: "";
    position: absolute;
    top: 2.65rem;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(23, 35, 38, 0.17);
}
.method-timeline li {
    position: relative;
    min-height: 13rem;
    padding: 0 clamp(1.25rem, 2.5vw, 2.25rem) 1rem 0;
}
.method-timeline li > span {
    display: block;
    color: var(--accent);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.method-node {
    position: relative;
    z-index: 1;
    width: 0.7rem;
    height: 0.7rem;
    display: block;
    margin: 1.35rem 0 2.1rem;
    padding: 0;
    border: 2px solid #edf1ee;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
    cursor: pointer;
    transition:
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.45s ease,
        background-color 0.45s ease;
}
.method-node:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 5px;
}
.method-timeline li:hover .method-node,
.method-timeline li.is-active .method-node,
.method-node:focus-visible {
    transform: scale(1.35);
    box-shadow:
        0 0 0 1px var(--accent),
        0 0 0 0.68rem rgba(15, 92, 99, 0.09),
        0 0 0 1.05rem rgba(15, 92, 99, 0.035);
}
.method-timeline li.is-active h3 {
    color: var(--accent);
}
.method-timeline h3 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.2rem, 1.8vw, 1.55rem);
    line-height: 1.2;
    letter-spacing: -0.03em;
    font-weight: 650;
}
.method-timeline p {
    max-width: 16rem;
    margin: 0.75rem 0 0;
    color: #6f7d7b;
    font-size: 0.75rem;
    line-height: 1.6;
}
.method-v2-budget {
    min-height: 6.25rem;
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    margin-top: 1rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid rgba(23, 35, 38, 0.15);
    border-bottom: 1px solid rgba(23, 35, 38, 0.15);
}
.method-v2-budget > span {
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.method-v2-budget > strong {
    max-width: 39rem;
    color: var(--ink);
    font-size: clamp(0.9rem, 1.4vw, 1.15rem);
    line-height: 1.45;
    letter-spacing: -0.015em;
    font-weight: 600;
}
.method-v2-budget > a {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}
.method-v2-budget > a i {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-size: 0.68rem;
    font-style: normal;
    transition:
        transform 0.3s,
        background-color 0.3s;
}
.method-v2-budget > a:hover i {
    background: var(--accent-dark);
    transform: rotate(45deg);
}
@media (max-width: 991.98px) {
    .method-v2-head {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .method-v2-head > p {
        max-width: 36rem;
        justify-self: start;
    }
    .method-timeline {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 0;
    }
    .method-timeline::before {
        display: none;
    }
    .method-timeline li {
        min-height: 10rem;
        padding-right: 2rem;
    }
    .method-node {
        margin: 1rem 0 1.4rem;
    }
    .method-v2-budget {
        grid-template-columns: 5rem 1fr;
    }
    .method-v2-budget > a {
        grid-column: 2;
        justify-content: space-between;
        padding-top: 0.25rem;
    }
}
@media (max-width: 575.98px) {
    .method-v2-head h2 {
        font-size: 2.35rem;
    }
    .method-timeline {
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 2.5rem;
    }
    .method-timeline li {
        min-height: 0;
        display: grid;
        grid-template-columns: 2rem 1fr;
        padding: 1.25rem 0;
        border-top: 1px solid rgba(23, 35, 38, 0.13);
    }
    .method-timeline li > span {
        grid-row: 1 / span 2;
    }
    .method-node {
        display: none;
    }
    .method-timeline h3,
    .method-timeline p {
        grid-column: 2;
    }
    .method-timeline p {
        margin-top: 0.45rem;
    }
    .method-v2-budget {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1.25rem;
        padding: 1.25rem 0;
    }
    .method-v2-budget > a {
        grid-column: 1;
    }
}
.home-process {
    background: var(--milk);
}
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(23, 35, 38, 0.14);
    border-left: 1px solid rgba(23, 35, 38, 0.14);
    list-style: none;
}
.process-grid li {
    min-height: 11rem;
    padding: 1.4rem;
    border-right: 1px solid rgba(23, 35, 38, 0.14);
    border-bottom: 1px solid rgba(23, 35, 38, 0.14);
}
.process-grid span {
    color: var(--accent);
    font-size: 0.68rem;
}
.process-grid h3 {
    margin: 3rem 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 650;
    letter-spacing: -0.025em;
}
.process-grid p {
    margin: 0;
    color: #7b8887;
    font-size: 0.76rem;
}
.home-budget {
    background: #fff;
}
.budget-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.55fr);
    align-items: end;
    gap: 4rem;
}
.budget-layout h2 {
    max-width: 13ch;
}
.budget-layout p {
    max-width: 31rem;
    margin: 1.25rem 0 0;
    color: #71807f;
    font-size: 0.85rem;
    line-height: 1.65;
}
.budget-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(23, 35, 38, 0.18);
    border-bottom: 1px solid rgba(23, 35, 38, 0.18);
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}
.budget-link i {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-size: 0.72rem;
    font-style: normal;
    transition: transform 0.25s;
}
.budget-link:hover i {
    transform: translate(0.15rem, -0.15rem);
}
.home-contact {
    padding-top: 0;
    background: #fff;
}
.home-contact-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 6vw, 6rem);
    color: #fff;
    background: var(--accent);
}
.home-contact-panel::after {
    content: "";
    position: absolute;
    right: -8rem;
    bottom: -14rem;
    width: 28rem;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    box-shadow:
        0 0 0 5rem rgba(255, 255, 255, 0.025),
        0 0 0 10rem rgba(255, 255, 255, 0.018);
}
.home-contact-panel .eyebrow {
    color: rgba(255, 255, 255, 0.7);
}
.home-contact-panel h2 {
    position: relative;
    z-index: 1;
    max-width: 12ch;
    color: #fff;
}
.home-contact-cta {
    position: relative;
    z-index: 1;
    width: min(100%, 20rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2.25rem;
    padding: 0.8rem 0.8rem 0.8rem 1.15rem;
    border-radius: 999px;
    color: var(--ink);
    background: #fff;
    font-size: 0.78rem;
    font-weight: 750;
    text-decoration: none;
}
.home-contact-cta i {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--ink);
    font-size: 0.72rem;
    font-style: normal;
    transition: transform 0.25s;
}
.home-contact-cta:hover i {
    transform: rotate(45deg);
}
@media (max-width: 991.98px) {
    .work-grid {
        grid-template-columns: 1fr 1fr;
    }
    .work-card-large .work-visual,
    .work-visual {
        aspect-ratio: 4/3.2;
    }
    .home-value .container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767.98px) {
    .home-work,
    .home-value,
    .home-process,
    .home-budget,
    .home-contact {
        padding: 3.75rem 0;
    }
    .home-section-head {
        display: block;
        margin-bottom: 2rem;
    }
    .home-section-head h2,
    .home-value h2,
    .budget-layout h2,
    .home-contact-panel h2 {
        font-size: 2.35rem;
    }
    .home-inline-link {
        width: max-content;
        margin-top: 1.5rem;
    }
    .work-grid {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
    .work-card-large .work-visual,
    .work-visual {
        aspect-ratio: 4/3;
    }
    .value-list article {
        grid-template-columns: 2rem 1fr;
        min-height: 6.4rem;
    }
    .value-list article p {
        grid-column: 2;
        margin-top: -0.6rem;
    }
    .process-grid {
        grid-template-columns: 1fr 1fr;
    }
    .process-grid li {
        min-height: 9rem;
        padding: 1.1rem;
    }
    .process-grid h3 {
        margin: 2rem 0 0.4rem;
        font-size: 1rem;
    }
    .budget-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .home-contact {
        padding-top: 0;
    }
    .home-contact-panel {
        padding: 2.5rem 1.5rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero-kicker,
    .hero-v2 h1,
    .hero-v2 p,
    .hero-v2-actions {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .hero-v2 h1 em::after {
        transform: scaleX(1);
        animation: none;
    }
    .hero-motion-ring,
    .hero-motion-ring i,
    .hero-motion-glow {
        animation: none;
    }
    .hero-primary-cta,
    .hero-primary-cta::before,
    .hero-primary-cta::after {
        animation: none;
    }
}

.services-stage {
    scroll-margin-top: 5rem;
    padding: clamp(4rem, 7vw, 6.5rem) 0;
    background: #fff;
}
.services-stage-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.services-stage .eyebrow {
    color: var(--accent);
}
.services-stage-head h2 {
    max-width: 15ch;
    margin: 0.8rem 0 0;
    color: var(--ink);
    font-size: clamp(2.35rem, 4vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
    font-weight: 600;
    text-wrap: balance;
}
.services-all {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.25);
    color: var(--ink);
    font-size: 0.76rem;
    font-weight: 750;
    text-decoration: none;
    transition:
        color 0.25s,
        border-color 0.25s;
}
.services-all span {
    color: var(--accent);
    transition: transform 0.25s;
}
.services-all:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.services-all:hover span {
    transform: translate(0.15rem, -0.15rem);
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(23, 35, 38, 0.14);
    border-left: 1px solid rgba(23, 35, 38, 0.14);
}
.service-tile {
    min-height: 11.5rem;
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: end;
    gap: 1rem;
    padding: 1.7rem;
    border-right: 1px solid rgba(23, 35, 38, 0.14);
    border-bottom: 1px solid rgba(23, 35, 38, 0.14);
    color: var(--ink);
    background: #fff;
    text-decoration: none;
    transition:
        color 0.3s,
        background-color 0.3s;
}
.service-tile > span {
    align-self: start;
    color: #7e8989;
    font-size: 0.68rem;
}
.service-tile h3 {
    margin: 0;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 600;
}
.service-tile p {
    margin: 0.55rem 0 0;
    color: #71807f;
    font-size: 0.82rem;
}
.service-tile i {
    width: 2.3rem;
    height: 2.3rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.22);
    border-radius: 50%;
    color: var(--accent);
    font-size: 0.72rem;
    font-style: normal;
    transition:
        color 0.3s,
        background-color 0.3s,
        transform 0.3s;
}
.service-tile:hover {
    color: var(--accent);
    background: var(--mint);
}
.service-tile:hover i {
    color: #fff;
    background: var(--accent);
    transform: translate(0.15rem, -0.15rem);
}
@media (max-width: 767.98px) {
    .services-stage {
        padding: 3.75rem 0;
    }
    .services-stage-head {
        display: block;
        margin-bottom: 2rem;
    }
    .services-stage-head h2 {
        max-width: 17ch;
        font-size: 2.35rem;
    }
    .services-all {
        width: max-content;
        margin-top: 1.5rem;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .service-tile {
        min-height: 8.5rem;
        padding: 1.25rem;
    }
    .service-tile h3 {
        font-size: 1.45rem;
    }
}

.services-stage {
    background: var(--milk);
}
.services-stage-head {
    align-items: end;
}
.services-stage-head > p {
    max-width: 25rem;
    margin: 0 0 0.25rem;
    color: #71807f;
    font-size: 0.82rem;
    line-height: 1.6;
}
.service-solutions {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    background: transparent;
}
.solution-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}
.solution-tab {
    position: relative;
    min-height: 7.25rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem;
    border: 1px solid rgba(23, 35, 38, 0.11);
    border-radius: 0.75rem;
    color: #697675;
    background: #fff;
    text-align: left;
    transition:
        color 0.3s,
        border-color 0.3s,
        background-color 0.3s,
        transform 0.3s;
}
.solution-tab::after {
    content: "";
    position: absolute;
    right: 1.1rem;
    bottom: 0.75rem;
    left: 1.1rem;
    height: 2px;
    border-radius: 1rem;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.solution-tab:hover {
    color: var(--ink);
    border-color: rgba(15, 92, 99, 0.25);
    transform: translateY(-2px);
}
.solution-tab.active {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
}
.solution-tab.active::after {
    transform: scaleX(1);
    background: #fff;
}
.solution-tab strong {
    max-width: 12rem;
    padding-bottom: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.3;
    font-weight: 650;
}
.solution-index {
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.08em;
}
.solution-tab.active .solution-index {
    color: rgba(255, 255, 255, 0.68);
}
.solution-icon {
    position: relative;
    width: 2.65rem;
    height: 2.65rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.17);
    border-radius: 0.7rem;
    color: var(--accent);
    background: var(--mint);
}
.solution-icon i {
    width: 1.05rem;
    height: 0.78rem;
    display: block;
    border: 1.5px solid currentColor;
    border-radius: 0.12rem;
}
.solution-icon i::after {
    content: "";
    position: absolute;
    right: 0.65rem;
    bottom: 0.55rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}
.solution-icon-booking i {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 0.2rem;
}
.solution-icon-booking i::after {
    right: 0.79rem;
    bottom: 0.79rem;
    width: 0.3rem;
    height: 0.3rem;
    background: transparent;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    border-radius: 0;
}
.solution-icon-sales i {
    width: 1.1rem;
    height: 0.8rem;
    border: 0;
    border-bottom: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    transform: skewY(-25deg);
}
.solution-icon-sales i::after {
    right: 0.68rem;
    bottom: 0.74rem;
    width: 0.32rem;
    height: 0.32rem;
}
.solution-icon-auto i {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}
.solution-icon-auto i::after {
    right: 0.68rem;
    bottom: 0.68rem;
    width: 0.35rem;
    height: 0.35rem;
    background: var(--mint);
    border: 1.5px solid currentColor;
}
.solution-panels {
    margin-top: 1.25rem;
}
.solution-panel {
    min-height: 28rem;
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(22rem, 1.12fr);
    overflow: hidden;
    border: 1px solid rgba(23, 35, 38, 0.1);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgba(23, 35, 38, 0.045);
    animation: solution-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.solution-panel[hidden] {
    display: none;
}
.solution-copy {
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 4vw, 3.75rem);
}
.solution-number {
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.solution-copy h3 {
    max-width: 16ch;
    margin: 1rem 0 0;
    color: var(--ink);
    font-size: clamp(1.8rem, 3vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
    font-weight: 600;
    text-wrap: balance;
}
.solution-copy > p {
    max-width: 31rem;
    margin: 1.2rem 0 0;
    color: #687675;
    font-size: 0.85rem;
    line-height: 1.65;
}
.solution-copy ul {
    display: grid;
    gap: 0.65rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}
.solution-copy li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--ink);
    font-size: 0.76rem;
}
.solution-copy li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 800;
}
.solution-copy > a {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: auto;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.2);
    color: var(--ink);
    font-size: 0.73rem;
    font-weight: 750;
    text-decoration: none;
}
.solution-copy > a span {
    color: var(--accent);
    transition: transform 0.25s;
}
.solution-copy > a:hover span {
    transform: translate(0.15rem, -0.15rem);
}
.solution-demo {
    min-height: 28rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    background: var(--mint);
}
.demo-browser,
.demo-calendar,
.demo-board {
    position: relative;
    width: min(100%, 31rem);
    min-height: 19rem;
    border: 1px solid rgba(23, 35, 38, 0.1);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1.5rem 4rem rgba(23, 35, 38, 0.09);
}
.demo-browser > span {
    display: block;
    height: 2.1rem;
    border-bottom: 1px solid rgba(23, 35, 38, 0.08);
}
.demo-browser > span::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    left: 1rem;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: #80b7aa;
    box-shadow:
        0.75rem 0 #c3d7d1,
        1.5rem 0 #dfe8e5;
}
.demo-site-hero {
    height: 5.4rem;
    margin: 1.15rem;
    border-radius: 0.35rem;
    background: linear-gradient(120deg, var(--accent), #5b938b);
}
.demo-site-lines {
    width: 45%;
    height: 0.4rem;
    margin: 0 1.15rem;
    border-radius: 1rem;
    background: #d6e0dc;
    box-shadow: 0 0.85rem #e7ece9;
}
.demo-site-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin: 2rem 1.15rem 1.15rem;
}
.demo-site-cards i {
    height: 4rem;
    border-radius: 0.3rem;
    background: #edf2ef;
}
.demo-calendar {
    padding: 1.25rem;
}
.demo-calendar-top {
    height: 2.5rem;
    border-bottom: 1px solid #e5ebe8;
}
.demo-calendar-top::before {
    content: "Оберіть дату";
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 750;
}
.demo-days {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.55rem;
    margin-top: 1.1rem;
}
.demo-days i {
    height: 2.25rem;
    border: 1px solid #e1e8e4;
    border-radius: 0.35rem;
}
.demo-days i:nth-child(7) {
    border-color: var(--accent);
    background: var(--mint);
    box-shadow: inset 0 0 0 1px var(--accent);
}
.demo-confirm {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
    padding: 0.75rem;
    border-radius: 0.4rem;
    color: #fff;
    background: var(--accent);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
}
.demo-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    padding: 3.4rem 1rem 1rem;
}
.demo-board > span {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 2.4rem;
    border-bottom: 1px solid #e5ebe8;
}
.demo-board > div {
    padding: 0.55rem;
    border-radius: 0.35rem;
    background: #f2f5f3;
}
.demo-board i {
    height: 2.7rem;
    display: block;
    margin-bottom: 0.5rem;
    border-radius: 0.3rem;
    background: #fff;
    box-shadow: 0 0.25rem 1rem rgba(23, 35, 38, 0.05);
}
.demo-board div:nth-of-type(2) i:first-child {
    border-left: 3px solid var(--accent);
}
.demo-auto {
    background: #e8f1ee;
}
.demo-flow {
    width: min(100%, 30rem);
    display: flex;
    align-items: center;
    justify-content: center;
}
.demo-flow span {
    width: 5.2rem;
    height: 5.2rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.16);
    border-radius: 1.2rem;
    background: #fff;
    box-shadow: 0 1rem 2.5rem rgba(23, 35, 38, 0.08);
}
.demo-flow span i {
    width: 1.2rem;
    height: 1.2rem;
    border: 2px solid var(--accent);
    border-radius: 50%;
}
.demo-flow b {
    flex: 1;
    height: 1px;
    background: rgba(15, 92, 99, 0.28);
}
.demo-flow b::after {
    content: "›";
    display: block;
    color: var(--accent);
    text-align: center;
    transform: translateY(-0.72rem);
}
.demo-design {
    background: #edf3f0;
}
.demo-canvas {
    position: relative;
    width: min(100%, 30rem);
    aspect-ratio: 1.35;
    overflow: hidden;
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgba(23, 35, 38, 0.08);
}
.demo-canvas span {
    position: absolute;
    top: 12%;
    left: 9%;
    width: 48%;
    height: 12%;
    border-radius: 999px;
    background: var(--ink);
}
.demo-canvas i {
    position: absolute;
    right: 9%;
    bottom: 11%;
    width: 47%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.9;
}
.demo-canvas b {
    position: absolute;
    bottom: 14%;
    left: 9%;
    width: 29%;
    height: 36%;
    border: 1px solid rgba(15, 92, 99, 0.25);
    border-radius: 0.6rem;
    background: var(--mint);
}
.demo-canvas em {
    position: absolute;
    top: 34%;
    left: 9%;
    width: 63%;
    height: 0.45rem;
    border-radius: 1rem;
    background: #dbe4e0;
    box-shadow:
        0 1rem #e8eeeb,
        0 2rem #e8eeeb;
}
.demo-growth {
    background: #e9f1ee;
}
.demo-chart {
    position: relative;
    width: min(100%, 30rem);
    height: 19rem;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding: 3rem 2.5rem 2rem;
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 1.5rem 4rem rgba(23, 35, 38, 0.08);
}
.demo-chart span {
    position: absolute;
    top: 2rem;
    left: 2.5rem;
    width: 42%;
    height: 0.5rem;
    border-radius: 1rem;
    background: #dfe7e3;
    box-shadow: 0 1rem #edf1ef;
}
.demo-chart i {
    flex: 1;
    border-radius: 0.4rem 0.4rem 0 0;
    background: #c5ddd6;
}
.demo-chart i:nth-of-type(1) {
    height: 28%;
}
.demo-chart i:nth-of-type(2) {
    height: 43%;
}
.demo-chart i:nth-of-type(3) {
    height: 61%;
}
.demo-chart i:nth-of-type(4) {
    height: 82%;
    background: var(--accent);
}
@keyframes solution-in {
    from {
        opacity: 0;
        transform: translateY(0.65rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (max-width: 991.98px) {
    .solution-tabs {
        grid-template-columns: repeat(5, minmax(9rem, 1fr));
        overflow-x: auto;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }
    .solution-tab {
        min-height: 6.75rem;
        padding: 1rem;
    }
    .solution-panel {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 767.98px) {
    .services-stage-head > p {
        margin-top: 1rem;
    }
    .solution-tabs {
        width: 100%;
        grid-template-columns: repeat(5, 9.25rem);
        padding-bottom: 0;
        scrollbar-width: none;
    }
    .solution-tabs::-webkit-scrollbar {
        display: none;
    }
    .solution-tab {
        min-height: 6.5rem;
    }
    .solution-tab strong {
        font-size: 0.78rem;
    }
    .solution-panel {
        min-height: 0;
        grid-template-columns: 1fr;
    }
    .solution-copy {
        min-height: 27rem;
        padding: 1.5rem;
    }
    .solution-copy h3 {
        font-size: 2rem;
    }
    .solution-demo {
        min-height: 20rem;
        padding: 1.25rem;
    }
    .demo-browser,
    .demo-calendar,
    .demo-board {
        min-height: 16rem;
    }
}

.services-stage .service-solutions {
    display: none;
}
.services-stage-intro {
    max-width: 25rem;
    margin: 0 0 0.25rem;
}
@media (min-width: 768px) {
    .services-stage-head > :first-child {
        flex: 1 1 62%;
    }
    .services-stage-head h2 {
        max-width: 25ch;
    }
}
.services-stage-head h2 span {
    display: block;
}
.home-work .work-section-head.services-stage-head {
    display: flex;
    align-items: flex-end;
}
.home-work .work-section-aside.services-stage-intro {
    width: auto;
    max-width: 25rem;
    justify-self: auto;
    padding-bottom: 0;
}
.home-method .method-v2-head.services-stage-head {
    display: flex;
    align-items: flex-end;
    margin-bottom: 0;
}
.home-method .method-v2-head .services-stage-intro {
    width: auto;
    max-width: 25rem;
    justify-self: auto;
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .home-work .work-section-head.services-stage-head {
        display: flex;
    }
    .home-method .method-v2-head.services-stage-head {
        display: flex;
    }
}
.services-stage-intro p {
    margin: 0;
    color: #71807f;
    font-size: 0.82rem;
    line-height: 1.6;
    text-align: right;
}
.section-cta {
    width: min(100%, 18rem);
    display: grid;
    justify-items: stretch;
    gap: 1.4rem;
    margin-left: auto;
}
.section-cta > p {
    max-width: 18rem;
    margin: 0;
    color: #71807f;
    font-size: 0.82rem;
    line-height: 1.6;
    text-align: right;
}
.section-cta > .hero-primary-cta {
    width: 100%;
    min-width: 0;
    margin: 0;
}
.services-stage-cta.hero-primary-cta {
    width: min(100%, 18rem);
    min-width: min(100%, 18rem);
    margin-top: 1.4rem;
}
.services-stage-cta.hero-primary-cta strong {
    inset: 0;
    display: grid;
    padding: 0 1rem;
    place-items: center;
    text-align: center;
    transform: translateX(-1rem);
}
@media (max-width: 575.98px) {
    .section-cta {
        margin-left: 0;
    }
    .section-cta > p {
        text-align: left;
    }
    .services-stage-cta.hero-primary-cta {
        width: min(100%, 18rem);
        min-width: 0;
    }
}
.services-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid rgba(23, 35, 38, 0.14);
    border-left: 1px solid rgba(23, 35, 38, 0.14);
}
.service-overview-item {
    min-height: 13.5rem;
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) 2rem;
    align-items: start;
    gap: clamp(0.8rem, 1.6vw, 1.5rem);
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border-right: 1px solid rgba(23, 35, 38, 0.14);
    border-bottom: 1px solid rgba(23, 35, 38, 0.14);
    color: var(--ink);
    background: var(--paper);
    text-decoration: none;
    transition:
        color 0.3s ease,
        background-color 0.3s ease;
}
.service-overview-item > span {
    padding-top: 0.28rem;
    color: var(--accent);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.service-overview-item h3 {
    max-width: 17ch;
    margin: 0;
    color: inherit;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 620;
}
.service-overview-item p {
    max-width: 38ch;
    margin: 0.75rem 0 0;
    color: #6d7b79;
    font-size: 0.8rem;
    line-height: 1.62;
    transition: color 0.3s ease;
}
.service-overview-item > i {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.2);
    border-radius: 50%;
    color: var(--accent);
    font-size: 0.72rem;
    font-style: normal;
    transform: rotate(0deg);
    transform-origin: center;
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-overview-item:hover {
    color: var(--accent);
    background: #fff;
}
.service-overview-item:hover p {
    color: #526461;
}
.service-overview-item:hover > i {
    color: #fff;
    background: var(--accent);
    transform: translate(0.18rem, -0.18rem) rotate(45deg);
}
@media (max-width: 767.98px) {
    .services-overview {
        grid-template-columns: 1fr;
    }
    .services-stage-intro {
        margin-top: 1rem;
    }
    .service-overview-item {
        min-height: 0;
        grid-template-columns: 1.85rem minmax(0, 1fr) 1.85rem;
        gap: 0.8rem;
        padding: 1.4rem 1.25rem;
    }
    .service-overview-item h3 {
        font-size: 1.25rem;
    }
    .service-overview-item p {
        font-size: 0.76rem;
    }
    .service-overview-item > i {
        width: 1.85rem;
        height: 1.85rem;
    }
}

.hero-v2 {
    background-color: #f7f8f5;
}
.services-stage {
    background: #edf1ee;
}
.home-work {
    background: #fff;
}
.home-value {
    background: #edf1ee;
}
.home-process {
    background: #edf1ee;
}
.home-budget {
    background: #fff;
}
.home-contact {
    padding-top: clamp(4rem, 7vw, 6.5rem);
    background: #edf1ee;
}
.hero-v2,
.services-stage,
.home-work,
.home-value,
.home-process,
.home-budget,
.home-contact {
    border-bottom: 1px solid rgba(23, 35, 38, 0.035);
}
@media (max-width: 767.98px) {
    .home-contact {
        padding-top: 3.75rem;
    }
}

.home-reviews {
    padding: clamp(4rem, 7vw, 6.5rem) 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.035);
    background: #fff;
}
.reviews-head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.55fr);
    align-items: end;
    gap: clamp(2rem, 8vw, 8rem);
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.reviews-head h2 {
    max-width: 15ch;
    margin: 0.8rem 0 0;
    color: var(--ink);
    font-size: clamp(2.2rem, 3.8vw, 4rem);
    line-height: 1.03;
    letter-spacing: -0.055em;
    font-weight: 600;
    text-wrap: balance;
}
.reviews-head > p {
    max-width: 25rem;
    justify-self: end;
    margin: 0;
    color: #71807e;
    font-size: 0.8rem;
    line-height: 1.68;
}
.reviews-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
    gap: 1.25rem;
}
.review-card {
    min-height: 21rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid rgba(23, 35, 38, 0.1);
    border-radius: 0.9rem;
    background: #f8faf8;
}
.review-card-featured {
    color: #fff;
    border-color: var(--ink);
    background: var(--ink);
}
.review-mark {
    color: #8dc5b9;
    font-size: 5rem;
    line-height: 0.65;
    font-family: Georgia, serif;
}
.review-card blockquote {
    max-width: 24ch;
    margin: 1.6rem 0 auto;
    color: var(--ink);
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    line-height: 1.4;
    letter-spacing: -0.025em;
    font-weight: 500;
}
.review-card-featured blockquote {
    color: #fff;
    font-size: clamp(1.35rem, 2.1vw, 2rem);
}
.review-card footer {
    display: grid;
    gap: 0.35rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(23, 35, 38, 0.12);
}
.review-card-featured footer {
    border-color: rgba(255, 255, 255, 0.17);
}
.review-card footer span {
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 750;
}
.review-card footer small {
    color: #7a8785;
    font-size: 0.62rem;
}
.review-card-featured footer span {
    color: #fff;
}
.review-card-featured footer small {
    color: rgba(255, 255, 255, 0.53);
}
.home-contact-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(17rem, 0.45fr);
    align-items: end;
    gap: 3rem;
}
.home-contact-panel > div {
    position: relative;
    z-index: 1;
}
.home-contact-panel > div > p {
    max-width: 33rem;
    margin: 1.3rem 0 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.84rem;
    line-height: 1.65;
}
.home-contact-cta {
    justify-self: end;
    margin-top: 0;
}
@media (max-width: 991.98px) {
    .reviews-head {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .reviews-head > p {
        max-width: 36rem;
        justify-self: start;
    }
    .reviews-grid {
        grid-template-columns: 1fr 1fr;
    }
    .review-card-featured {
        grid-row: span 2;
    }
    .home-contact-panel {
        grid-template-columns: 1fr;
    }
    .home-contact-cta {
        justify-self: start;
    }
}
@media (max-width: 575.98px) {
    .home-reviews {
        padding: 3.75rem 0;
    }
    .reviews-head h2 {
        font-size: 2.35rem;
    }
    .reviews-grid {
        grid-template-columns: 1fr;
    }
    .review-card,
    .review-card-featured {
        min-height: 16rem;
    }
    .review-card-featured {
        grid-row: auto;
    }
    .home-contact-panel {
        gap: 2rem;
    }
}

.reviews-grid {
    display: none;
}
.review-editorial {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
    overflow: hidden;
    border: 1px solid rgba(23, 35, 38, 0.1);
    border-radius: 1rem;
    background: #fff;
}
.review-featured {
    min-height: 30rem;
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 5vw, 5rem);
    color: #fff;
    background: var(--ink);
}
.review-featured-index {
    color: #8dc5b9;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.review-featured blockquote {
    max-width: 19ch;
    margin: auto 0;
    color: #fff;
    font-size: clamp(1.8rem, 3.2vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.05em;
    font-weight: 500;
}
.review-featured footer {
    display: grid;
    gap: 0.35rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.review-featured footer span {
    font-size: 0.72rem;
    font-weight: 750;
}
.review-featured footer small {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.62rem;
}
.review-rail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1rem, 3vw, 3rem);
    background: #f8faf8;
}
.review-rail-item {
    display: grid;
    grid-template-columns: 2rem 1fr 2rem;
    gap: 1rem;
    align-items: center;
    padding: clamp(1.25rem, 2.4vw, 2rem) 0;
    border-bottom: 1px solid rgba(23, 35, 38, 0.1);
}
.review-rail-item:first-child {
    border-top: 1px solid rgba(23, 35, 38, 0.1);
}
.review-rail-item > span {
    align-self: start;
    padding-top: 0.3rem;
    color: #85918f;
    font-size: 0.62rem;
    font-weight: 750;
}
.review-rail-item h3 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 650;
}
.review-rail-item p {
    margin: 0.45rem 0 0;
    color: #74817f;
    font-size: 0.72rem;
    line-height: 1.55;
}
.review-rail-item i {
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    align-self: center;
    border: 1px solid rgba(15, 92, 99, 0.22);
    border-radius: 50%;
    color: var(--accent);
    font-size: 0.6rem;
    font-style: normal;
    transition:
        transform 0.3s,
        background-color 0.3s,
        color 0.3s;
}
.review-rail-item.active i,
.review-rail-item:hover i {
    color: #fff;
    background: var(--accent);
    transform: rotate(45deg);
}
@media (max-width: 991.98px) {
    .review-editorial {
        grid-template-columns: 1fr;
    }
    .review-featured {
        min-height: 25rem;
    }
}
@media (max-width: 575.98px) {
    .review-editorial {
        border-radius: 0.75rem;
    }
    .review-featured {
        min-height: 23rem;
        padding: 2rem 1.5rem;
    }
    .review-featured blockquote {
        font-size: 2rem;
    }
    .review-rail {
        padding: 0 1.5rem;
    }
}

.review-editorial {
    display: none;
}
.reviews-head-v2 > p {
    max-width: 23rem;
}
.review-quote-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(16rem, 0.48fr) minmax(0, 1.52fr);
    min-height: 29rem;
    overflow: hidden;
    border-top: 1px solid rgba(23, 35, 38, 0.16);
    border-bottom: 1px solid rgba(23, 35, 38, 0.16);
}
.review-quote-stage::after {
    content: "";
    position: absolute;
    right: -11rem;
    bottom: -14rem;
    width: 28rem;
    height: 28rem;
    border: 1px solid rgba(15, 92, 99, 0.12);
    border-radius: 50%;
    box-shadow: 0 0 0 4rem rgba(15, 92, 99, 0.025);
    pointer-events: none;
}
.quote-client {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vw, 4rem);
    border-right: 1px solid rgba(23, 35, 38, 0.13);
}
.quote-client > span {
    color: var(--accent);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.client-monogram {
    width: 4.6rem;
    height: 4.6rem;
    display: grid;
    place-items: center;
    margin: 2rem 0 1.5rem;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.04em;
}
.quote-client strong {
    color: var(--ink);
    font-size: clamp(1.3rem, 2.2vw, 1.85rem);
    letter-spacing: -0.04em;
    font-weight: 600;
}
.quote-client small {
    margin-top: 0.45rem;
    color: #74817f;
    font-size: 0.7rem;
}
.quote-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 5rem);
}
.quote-content blockquote {
    max-width: 24ch;
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.8rem, 3.5vw, 4rem);
    line-height: 1.07;
    letter-spacing: -0.06em;
    font-weight: 500;
}
.quote-content footer {
    display: grid;
    gap: 0.35rem;
    margin-top: clamp(2rem, 5vw, 5rem);
}
.quote-content footer b {
    color: var(--ink);
    font-size: 0.72rem;
}
.quote-content footer span {
    color: #74817f;
    font-size: 0.65rem;
}
.review-client-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid rgba(23, 35, 38, 0.16);
}
.review-client-list article {
    min-height: 6.5rem;
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    align-content: center;
    padding: 1.1rem 1.25rem;
    border-right: 1px solid rgba(23, 35, 38, 0.16);
    transition: background-color 0.25s;
}
.review-client-list article:last-child {
    border-right: 0;
}
.review-client-list article.active,
.review-client-list article:hover {
    background: #f4f8f6;
}
.review-client-list span {
    grid-row: 1 / span 2;
    color: var(--accent);
    font-size: 0.6rem;
    font-weight: 800;
}
.review-client-list strong {
    color: var(--ink);
    font-size: 0.78rem;
}
.review-client-list small {
    margin-top: 0.25rem;
    color: #7b8785;
    font-size: 0.62rem;
}
@media (max-width: 767.98px) {
    .review-quote-stage {
        grid-template-columns: 1fr;
    }
    .quote-client {
        min-height: 16rem;
        border-right: 0;
        border-bottom: 1px solid rgba(23, 35, 38, 0.13);
    }
    .client-monogram {
        margin: 1.5rem 0 1.2rem;
    }
    .quote-content {
        min-height: 19rem;
    }
    .review-client-list {
        grid-template-columns: 1fr;
    }
    .review-client-list article {
        min-height: 5rem;
        border-right: 0;
        border-bottom: 1px solid rgba(23, 35, 38, 0.12);
    }
    .review-client-list article:last-child {
        border-bottom: 0;
    }
}

.method-v2-budget {
    position: relative;
    display: grid;
    grid-template-columns: minmax(11rem, 0.55fr) minmax(20rem, 1.5fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    margin-top: clamp(3rem, 5vw, 5.25rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    overflow: hidden;
    border: 1px solid rgba(15, 92, 99, 0.2);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1.25rem 3.5rem rgba(23, 35, 38, 0.055);
}
.method-v2-budget::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.35rem;
    background: var(--accent);
}
.budget-label {
    display: grid;
    gap: 0.5rem;
    padding-left: 0.75rem;
}
.budget-label span {
    color: var(--accent);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.budget-label small {
    color: #72807e;
    font-size: 0.68rem;
    line-height: 1.45;
}
.budget-copy {
    max-width: 39rem;
}
.budget-copy strong {
    display: block;
    color: var(--ink);
    font-size: clamp(1.1rem, 1.6vw, 1.45rem);
    line-height: 1.28;
    letter-spacing: -0.035em;
    font-weight: 600;
}
.budget-copy p {
    margin: 0.7rem 0 0;
    color: #71807e;
    font-size: 0.75rem;
    line-height: 1.55;
}
.method-v2-budget a {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    align-self: center;
    padding: 0.35rem 0.35rem 0.35rem 1.1rem;
    border: 1px solid rgba(15, 92, 99, 0.18);
    border-radius: 99rem;
    color: var(--ink);
    background: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}
.method-v2-budget a i {
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-style: normal;
    font-size: 1rem;
    transition: transform 0.25s ease;
}
.method-v2-budget a:hover {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
    transform: translateY(-2px);
}
.method-v2-budget a:hover i {
    color: var(--accent);
    background: #fff;
    transform: rotate(45deg);
}
@media (max-width: 991.98px) {
    .method-v2-budget {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .budget-label {
        padding-left: 0.75rem;
    }
    .method-v2-budget a {
        justify-self: start;
    }
}
@media (max-width: 575.98px) {
    .method-v2-budget {
        margin-top: 2.75rem;
        padding: 1.5rem 1.25rem 1.35rem;
        border-radius: 0.7rem;
    }
    .method-v2-budget a {
        width: 100%;
        justify-content: space-between;
    }
}

.home-reviews-archive {
    background: #fff;
}
.reviews-archive-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.48fr);
    align-items: end;
    gap: clamp(2rem, 9vw, 8rem);
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.reviews-archive-intro h2 {
    max-width: 17ch;
    margin: 0.8rem 0 0;
    color: var(--ink);
    font-size: clamp(2.3rem, 4.3vw, 4.65rem);
    line-height: 1.01;
    letter-spacing: -0.065em;
    font-weight: 600;
}
.reviews-archive-intro > p {
    max-width: 23rem;
    margin: 0;
    color: #70807d;
    font-size: 0.78rem;
    line-height: 1.7;
}
.review-archive {
    border-top: 1px solid rgba(23, 35, 38, 0.18);
}
.review-record {
    border-bottom: 1px solid rgba(23, 35, 38, 0.18);
}
.review-record summary {
    display: grid;
    grid-template-columns: clamp(3rem, 8vw, 8rem) minmax(15rem, 1fr) auto;
    align-items: center;
    gap: 1.25rem;
    padding: clamp(1.45rem, 2.7vw, 2.5rem) 0;
    cursor: pointer;
    list-style: none;
}
.review-record summary::-webkit-details-marker {
    display: none;
}
.record-number {
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.record-client {
    display: grid;
    gap: 0.45rem;
}
.record-client b {
    color: var(--ink);
    font-size: clamp(1.35rem, 2.2vw, 2.05rem);
    line-height: 1;
    letter-spacing: -0.045em;
    font-weight: 600;
}
.record-client small {
    color: #7b8987;
    font-size: 0.69rem;
}
.record-trigger {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--ink);
    font-size: 0.66rem;
    font-weight: 750;
}
.record-trigger em {
    font-style: normal;
}
.record-trigger i {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.22);
    border-radius: 50%;
    color: var(--accent);
    font-style: normal;
    font-size: 0.95rem;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}
.review-record[open] .record-trigger i {
    color: #fff;
    background: var(--accent);
    transform: rotate(180deg);
}
.record-body {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(18rem, 1.15fr);
    gap: clamp(2rem, 8vw, 8rem);
    padding: 0 0 clamp(1.7rem, 3vw, 2.75rem) clamp(3rem, 8vw, 8rem);
}
.record-body > div {
    padding-top: 1.25rem;
    border-top: 1px solid rgba(23, 35, 38, 0.1);
}
.record-body span {
    display: block;
    margin-bottom: 0.8rem;
    color: var(--accent);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.record-body p {
    max-width: 29rem;
    margin: 0;
    color: #344240;
    font-size: 0.83rem;
    line-height: 1.65;
}
.record-body .review-pending {
    color: #788582;
    font-style: italic;
}
.reviews-archive-note {
    margin: 1.2rem 0 0;
    color: #87918f;
    font-size: 0.64rem;
    line-height: 1.5;
}
@media (max-width: 767.98px) {
    .reviews-archive-intro {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
    .review-record summary {
        grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    }
    .record-trigger em {
        display: none;
    }
    .record-body {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-left: 2.75rem;
    }
}
@media (max-width: 575.98px) {
    .reviews-archive-intro h2 {
        font-size: 2.55rem;
    }
    .review-record summary {
        gap: 0.75rem;
    }
    .record-client b {
        font-size: 1.35rem;
    }
    .record-client small {
        max-width: 15rem;
        line-height: 1.4;
    }
    .record-body {
        padding-left: 0;
    }
}

.home-reviews-reel {
    padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(3.5rem, 6vw, 6rem);
    overflow: hidden;
    background: #fff;
}
.reviews-reel-head {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.5fr);
    align-items: end;
    gap: clamp(2rem, 9vw, 8rem);
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.reviews-reel-head h2 {
    max-width: 15ch;
    margin: 0.8rem 0 0;
    color: var(--ink);
    font-size: clamp(2.5rem, 4.6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.07em;
    font-weight: 600;
}
.reviews-reel-action {
    display: grid;
    justify-items: end;
    gap: 1rem;
}
.reviews-reel-action p {
    max-width: 16rem;
    margin: 0;
    color: #71807e;
    font-size: 0.75rem;
    line-height: 1.6;
    text-align: right;
}
.reviews-all-link {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 1rem;
    padding: 0.35rem 0.35rem 0.35rem 1.15rem;
    border: 1px solid rgba(15, 92, 99, 0.2);
    border-radius: 99rem;
    color: var(--ink);
    background: #fff;
    font-size: 0.7rem;
    font-weight: 750;
    text-decoration: none;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}
.reviews-all-link i {
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-size: 1rem;
    font-style: normal;
    transition:
        transform 0.25s ease,
        color 0.25s ease,
        background-color 0.25s ease;
}
.reviews-all-link:hover {
    color: #fff;
    background: var(--accent);
    transform: translateY(-2px);
}
.reviews-all-link:hover i {
    color: var(--accent);
    background: #fff;
    transform: rotate(45deg);
}
.review-reel-viewport {
    position: relative;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    outline: none;
    padding-block: 0.9rem 1.35rem;
    margin-block: -0.9rem 0;
}
.review-reel-viewport::-webkit-scrollbar {
    display: none;
}
.review-reel-viewport:focus-visible {
    box-shadow: inset 0 0 0 2px var(--accent);
}
.review-reel {
    display: flex;
    position: relative;
    isolation: isolate;
    gap: 1rem;
    width: max-content;
    min-width: 100%;
}
.reel-card {
    position: relative;
    min-height: 27rem;
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 2.6vw, 2.5rem);
    overflow: hidden;
    border-radius: 1rem;
    scroll-snap-align: start;
    flex: 0 0 min(24rem, calc(100vw - 3rem));
}
.reel-card-intro {
    flex-basis: min(24rem, calc(100vw - 3rem));
    position: sticky;
    left: 0;
    z-index: 3;
    flex-shrink: 0;
    align-self: stretch;
    box-shadow: 1rem 0 1.5rem rgba(15, 92, 99, 0.12);
    justify-content: space-between;
    color: #fff;
    background: var(--accent);
}
.reel-card-intro > span,
.reel-card-end > span {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.reel-card-intro > strong {
    position: relative;
    z-index: 1;
    font-size: clamp(2.15rem, 3.5vw, 4.15rem);
    line-height: 0.96;
    letter-spacing: -0.075em;
    font-weight: 500;
}
.reel-card-intro > strong em {
    color: #bce2d5;
    font-style: normal;
}
.reel-card-intro > small {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.67rem;
}
.reel-orbit {
    position: absolute;
    right: -8rem;
    bottom: -9rem;
    width: 25rem;
    height: 25rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
}
.reel-orbit::before,
.reel-orbit::after,
.reel-orbit i {
    content: "";
    position: absolute;
    inset: 2.8rem;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 50%;
}
.reel-orbit::after {
    inset: 6rem;
}
.reel-orbit i:nth-child(1) {
    inset: auto;
    top: 3rem;
    left: 2rem;
    width: 0.7rem;
    height: 0.7rem;
    background: #bce2d5;
}
.reel-orbit i:nth-child(2) {
    inset: auto;
    right: 4.5rem;
    bottom: 6rem;
    width: 0.45rem;
    height: 0.45rem;
    background: #fff;
}
.reel-orbit i:nth-child(3) {
    display: none;
}
.reel-card-hotel {
    color: var(--ink);
    border: 1px solid rgba(23, 35, 38, 0.12);
    background: #fff;
}
.reel-card-mountain {
    color: var(--ink);
    border: 1px solid rgba(23, 35, 38, 0.12);
    background: #fff;
}
.review-reel .reel-card:not(.reel-card-intro):not(.reel-card-end) {
    background: #fff;
    transition:
        transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}
.review-reel .reel-card:not(.reel-card-intro):not(.reel-card-end):hover {
    z-index: 5;
    border-color: rgba(15, 92, 99, 0.24);
    box-shadow: 0 0.65rem 1.15rem rgba(15, 92, 99, 0.075);
    transform: scale(1.012);
}
.reel-card-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: #50625f;
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}
.reel-card-top b {
    color: var(--accent);
    font-size: 0.57rem;
    font-weight: 800;
    text-align: right;
}
.reel-quote-placeholder {
    position: relative;
    z-index: 1;
    margin: auto 0;
}
.reel-quote-placeholder i {
    display: block;
    height: 3.3rem;
    color: var(--accent);
    font-family: Georgia, serif;
    font-size: 6rem;
    line-height: 1;
    font-style: normal;
}
.reel-quote-placeholder p {
    max-width: 23ch;
    margin: -0.15rem 0 0;
    color: var(--ink);
    font-size: clamp(1.25rem, 1.8vw, 1.8rem);
    line-height: 1.16;
    letter-spacing: -0.045em;
    font-weight: 520;
}
.reel-card-foot {
    display: grid;
    gap: 0.35rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(23, 35, 38, 0.12);
}
.reel-card-foot strong {
    font-size: 0.7rem;
    font-weight: 750;
}
.reel-card-foot span {
    color: #7a8986;
    font-size: 0.62rem;
}
.reel-card-link {
    position: absolute;
    right: clamp(1.35rem, 2.6vw, 2.5rem);
    bottom: clamp(1.35rem, 2.6vw, 2.5rem);
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border: 1px solid rgba(15, 92, 99, 0.24);
    border-radius: 50%;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.68);
    text-decoration: none;
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}
.reel-card-link i {
    display: block;
    font-style: normal;
    line-height: 1;
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reel-card-link:hover {
    border-color: var(--accent);
    color: #fff;
    background: var(--accent);
    transform: translateY(-0.16rem);
}
.reel-card-link:hover i {
    transform: rotate(45deg);
}
.reel-card-link:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}
.reel-card-end {
    flex-basis: min(13rem, calc(100vw - 3rem));
    justify-content: space-between;
    color: #fff;
    background: var(--ink);
}
.reel-card-end p {
    max-width: 10rem;
    margin: auto 0;
    font-size: 1.25rem;
    line-height: 1.18;
    letter-spacing: -0.04em;
}
.reel-card-end > i {
    width: 2.7rem;
    height: 2.7rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    font-style: normal;
}
.reviews-reel-controls {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}
.reel-controls {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}
.reel-controls output {
    display: inline-block;
    width: 3.65rem;
    color: #71807e;
    font-size: 0.63rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.reel-controls button {
    width: 2.65rem;
    height: 2.65rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(15, 92, 99, 0.25);
    border-radius: 50%;
    color: var(--accent);
    background: #fff;
    font-size: 1.1rem;
    line-height: 1;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}
.reel-controls button > i {
    display: block;
    line-height: 1;
}
.reel-controls button:hover:not(:disabled) {
    color: #fff;
    background: var(--accent);
    transform: translateY(-2px);
}
.reel-controls button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.reel-controls button:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}
@media (max-width: 991.98px) {
    .reviews-reel-head {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .reviews-reel-action {
        justify-items: start;
    }
    .reviews-reel-action p {
        text-align: left;
    }
    .reviews-all-link {
        justify-self: start;
    }
    .review-reel {
        grid-template-columns:
            minmax(18rem, 0.8fr) minmax(22rem, 1fr) minmax(20rem, 0.9fr)
            minmax(12rem, 0.5fr);
    }
}
@media (max-width: 575.98px) {
    .reviews-reel-head h2 {
        font-size: 2.7rem;
    }
    .review-reel {
        grid-template-columns:
            minmax(17rem, 1fr) minmax(18rem, 1.08fr) minmax(17rem, 1fr)
            9rem;
        gap: 0.75rem;
    }
    .reel-card {
        min-height: 23rem;
        padding: 1.35rem;
        border-radius: 0.8rem;
    }
    .reel-card-intro > strong {
        font-size: 2.55rem;
    }
}

.home-contact {
    padding: clamp(4rem, 7vw, 6.5rem) 0 1.25rem;
    background: #edf1ee;
    border-bottom: 0;
}
.home-contact-panel {
    grid-template-columns: minmax(0, 1.1fr) minmax(17rem, 0.45fr);
    padding: clamp(2.5rem, 5vw, 5rem);
    border-radius: 1.25rem;
    background: var(--accent);
    box-shadow: 0 1.4rem 3.2rem rgba(15, 92, 99, 0.14);
}
.contact-panel-copy h2 {
    max-width: 12ch;
}
.contact-panel-action {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: end;
    align-content: end;
    gap: 1.25rem;
}
.contact-panel-action > span {
    max-width: 14rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.7rem;
    line-height: 1.55;
    text-align: right;
}
.home-contact-cta {
    width: min(100%, 18rem);
    margin: 0;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.home-contact-cta:hover {
    color: var(--ink);
    transform: translateY(-3px);
    box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.13);
}
.home-contact-cta:hover i {
    transform: rotate(45deg);
}
.site-footer {
    margin: 0 1.25rem 1.25rem;
    padding: 0;
    overflow: hidden;
    border-radius: 1.25rem;
    color: #c6d0cd;
    background: #0d191b;
}
.footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 0.75fr);
    gap: clamp(2rem, 9vw, 8rem);
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}
.footer-brand > a {
    display: inline-grid;
    gap: 0.15rem;
    color: #fff;
    text-decoration: none;
}
.footer-brand > a span {
    font-size: clamp(1.8rem, 3.2vw, 3.3rem);
    font-weight: 700;
    letter-spacing: -0.07em;
    line-height: 0.9;
}
.footer-brand > a small {
    color: #91a5a0;
    font-size: 0.53rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}
.footer-brand p {
    max-width: 22rem;
    margin: 1.5rem 0 0;
    color: #91a5a0;
    font-size: 0.78rem;
    line-height: 1.65;
}
.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.footer-links > div {
    display: grid;
    align-content: start;
    gap: 0.75rem;
}
.footer-links span {
    margin-bottom: 0.45rem;
    color: #fff;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.footer-links a {
    width: max-content;
    max-width: 100%;
    color: #a8b6b2;
    font-size: 0.76rem;
    text-decoration: none;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}
.footer-links a:hover {
    color: #fff;
    transform: translateX(0.2rem);
}
.footer-links i {
    color: #8dcfc0;
    font-style: normal;
}
.footer-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 1.25rem;
    padding: 1.15rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #718480;
    font-size: 0.64rem;
}
.footer-bottom span:nth-child(2) {
    text-align: center;
}
.footer-bottom a {
    color: #c6d0cd;
    text-decoration: none;
}
.footer-bottom a:hover {
    color: #fff;
}
@media (max-width: 991.98px) {
    .home-contact-panel {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .contact-panel-action {
        justify-items: start;
        align-content: start;
    }
    .contact-panel-action > span {
        text-align: left;
    }
    .footer-top {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}
@media (max-width: 575.98px) {
    .home-contact {
        padding-bottom: 0.75rem;
    }
    .home-contact-panel {
        padding: 2rem 1.4rem;
        border-radius: 1rem;
    }
    .home-contact-cta {
        width: 100%;
    }
    .site-footer {
        margin: 0 0.75rem 0.75rem;
        border-radius: 1rem;
    }
    .footer-top {
        padding: 2.25rem 0;
        gap: 2.5rem;
    }
    .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }
    .footer-bottom {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .footer-bottom span:nth-child(2) {
        text-align: left;
    }
}

.site-footer {
    margin: 0;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.76);
    background: #0f5c63;
}
.footer-brand > a small {
    color: #b9dbd3;
}
.footer-brand p {
    color: rgba(255, 255, 255, 0.72);
}
.footer-links span {
    color: #fff;
}
.footer-links a {
    color: rgba(255, 255, 255, 0.72);
}
.footer-links a:hover {
    color: #fff;
}
.footer-links i {
    color: #c8eee3;
}
.footer-bottom {
    color: rgba(255, 255, 255, 0.62);
    border-color: rgba(255, 255, 255, 0.2);
}
.footer-bottom a {
    color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 575.98px) {
    .site-footer {
        margin: 0;
        border-radius: 0;
    }
}

.home-contact {
    padding-bottom: clamp(4rem, 7vw, 6.5rem);
}
.footer-top {
    grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.4fr);
}
.footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 4rem);
}
.footer-brand p {
    max-width: 26rem;
}
.footer-project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.75rem;
    padding: 0.55rem 0.7rem 0.55rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 99rem;
    color: #fff !important;
    font-size: 0.68rem;
    font-weight: 750;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}
.footer-project-link i {
    width: 1.65rem;
    height: 1.65rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--accent);
    background: #fff;
    font-style: normal;
    transition: transform 0.2s ease;
}
.footer-project-link:hover {
    background: #fff;
    color: var(--accent) !important;
}
.footer-project-link:hover i {
    transform: rotate(45deg);
}
.footer-contact p {
    margin: 0.1rem 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.68rem;
    line-height: 1.5;
}
.footer-bottom {
    align-items: center;
}
.footer-bottom > div {
    display: flex;
    justify-content: flex-end;
    gap: 1.25rem;
}
@media (max-width: 991.98px) {
    .footer-top {
        grid-template-columns: 1fr;
    }
    .footer-links {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 575.98px) {
    .home-contact {
        padding-bottom: 3.75rem;
    }
    .footer-links {
        grid-template-columns: 1fr 1fr;
        row-gap: 2rem;
    }
    .footer-contact {
        grid-column: 1 / -1;
    }
    .footer-bottom > div {
        justify-content: flex-start;
    }
}

.site-footer {
    position: relative;
    color: #52615e;
    background: #e5f1ed;
    border-top: 4px solid var(--accent);
}
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 7vw;
    width: 13rem;
    height: 3px;
    background: #fff;
}
.footer-brand > a {
    color: var(--ink);
}
.footer-brand > a small {
    color: var(--accent);
}
.footer-brand p {
    color: #60706d;
}
.footer-project-link {
    border-color: rgba(15, 92, 99, 0.3);
    color: var(--accent) !important;
    background: transparent;
}
.footer-project-link i {
    color: #fff;
    background: var(--accent);
}
.footer-project-link:hover {
    color: #fff !important;
    background: var(--accent);
}
.footer-project-link:hover i {
    color: var(--accent);
    background: #fff;
}
.footer-links > div {
    padding-left: 1.4rem;
    border-left: 1px solid rgba(15, 92, 99, 0.2);
}
.footer-links span {
    color: var(--accent);
}
.footer-links a {
    color: #50605d;
}
.footer-links a:hover {
    color: var(--ink);
}
.footer-links i {
    color: var(--accent);
}
.footer-contact p {
    color: #667673;
}
.footer-bottom {
    color: #647470;
    border-color: rgba(15, 92, 99, 0.2);
}
.footer-bottom a {
    color: #40514e;
}
.footer-bottom a:hover {
    color: var(--accent);
}
@media (max-width: 575.98px) {
    .footer-links > div {
        padding-left: 1rem;
    }
}

.home-contact {
    padding: clamp(4rem, 7vw, 6.5rem) 0;
    background: #e5f1ed;
}
.home-contact-panel {
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.55fr);
    padding: clamp(2rem, 4vw, 3.75rem) 0;
    border-top: 1px solid rgba(15, 92, 99, 0.24);
    border-bottom: 1px solid rgba(15, 92, 99, 0.24);
    border-radius: 0;
    color: var(--ink);
    background: transparent;
    box-shadow: none;
}
.home-contact-panel::after {
    display: none;
}
.home-contact-panel .eyebrow {
    color: var(--accent);
}
.home-contact-panel h2 {
    max-width: 14ch;
    color: var(--ink);
}
.home-contact-panel > div > p {
    color: #62716e;
}
.contact-panel-action {
    align-content: center;
    justify-items: start;
    gap: 1.3rem;
}
.contact-panel-action > span {
    color: #60706d;
    text-align: left;
}
.home-contact-cta {
    width: auto;
    min-width: 13.5rem;
    padding: 0.85rem 1rem 0 0.05rem;
    border-bottom: 1px solid var(--accent);
    border-radius: 0;
    color: var(--accent);
    background: transparent;
    box-shadow: none;
    font-size: 0.78rem;
}
.home-contact-cta i {
    width: 2.25rem;
    height: 2.25rem;
    color: #fff;
    background: var(--accent);
}
.home-contact-cta:hover {
    color: var(--accent-dark);
    transform: none;
    box-shadow: none;
}
.home-contact-cta:hover i {
    color: #fff;
    background: var(--accent-dark);
}
.site-footer {
    border-top: 1px solid rgba(23, 35, 38, 0.14);
    background: var(--milk);
}
.site-footer::before {
    display: none;
}
.footer-top {
    grid-template-columns: minmax(15rem, 0.85fr) minmax(0, 1.55fr);
    padding: clamp(3rem, 6vw, 5.5rem) 0;
}
.footer-brand > a span {
    font-size: clamp(2rem, 3.4vw, 3.7rem);
}
.footer-links > div {
    border-left-color: rgba(23, 35, 38, 0.14);
}
.footer-project-link {
    border-radius: 0.55rem;
}
@media (max-width: 991.98px) {
    .home-contact-panel {
        grid-template-columns: 1fr;
    }
    .footer-top {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 575.98px) {
    .home-contact {
        padding: 3.75rem 0;
    }
    .home-contact-panel {
        padding: 2rem 0;
    }
    .home-contact-cta {
        width: 100%;
        justify-content: space-between;
    }
}

.solution-copy {
    justify-content: flex-start;
}

.home-contact {
    padding: clamp(4.5rem, 8vw, 7.5rem) 0;
    background: #f1f3f0;
}
.home-contact-panel {
    grid-template-columns: minmax(0, 1.18fr) minmax(17rem, 0.62fr);
    align-items: stretch;
    gap: clamp(2rem, 5vw, 5rem);
    padding: clamp(2.25rem, 4.5vw, 4.5rem);
    border: 1px solid rgba(15, 92, 99, 0.13);
    border-radius: 1.35rem;
    background: #fff;
    box-shadow: 0 1.2rem 3rem rgba(23, 35, 38, 0.055);
}
.home-contact-panel h2 {
    max-width: 15ch;
    color: var(--ink);
}
.home-contact-panel > div > p {
    max-width: 36rem;
    color: #61706d;
}
.contact-panel-action {
    align-content: space-between;
    justify-items: start;
    gap: 2rem;
    padding-left: clamp(0rem, 3vw, 3.5rem);
    border-left: 1px solid rgba(15, 92, 99, 0.16);
}
.contact-panel-action > span {
    max-width: 16rem;
    color: #63726f;
    font-size: 0.75rem;
    line-height: 1.6;
    text-align: left;
}
.home-contact-cta {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    padding: 0.6rem 0.65rem 0.6rem 1.1rem;
    border: 0;
    border-radius: 0.7rem;
    color: #fff;
    background: var(--accent);
    font-size: 0.76rem;
    box-shadow: none;
    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}
.home-contact-cta i {
    width: 2.35rem;
    height: 2.35rem;
    color: var(--accent);
    background: #fff;
}
.home-contact-cta:hover {
    color: #fff;
    background: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 0.7rem 1.4rem rgba(15, 92, 99, 0.17);
}
.home-contact-cta:hover i {
    color: var(--accent-dark);
    background: #fff;
}

.site-footer {
    color: #4e5e5a;
    background: var(--milk);
    border-top: 1px solid rgba(23, 35, 38, 0.14);
}
.footer-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    gap: 3rem;
    align-items: end;
    padding: clamp(3.25rem, 6vw, 5.75rem) 0 clamp(2.25rem, 4vw, 3.75rem);
    border-bottom: 1px solid rgba(23, 35, 38, 0.14);
}
.footer-brand > a {
    color: var(--ink);
}
.footer-brand > a span {
    font-size: clamp(2.5rem, 4.5vw, 4.7rem);
    letter-spacing: -0.09em;
}
.footer-brand > a small {
    color: var(--accent);
}
.footer-brand p {
    max-width: 30rem;
    margin-top: 1.35rem;
    color: #61706d;
}
.footer-lead-contact {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
    padding-bottom: 0.25rem;
}
.footer-lead-contact > span,
.footer-links span {
    color: var(--accent);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.footer-lead-contact a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--ink);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-weight: 650;
    letter-spacing: -0.045em;
    text-decoration: none;
}
.footer-lead-contact a i {
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-size: 0.68rem;
    font-style: normal;
    transition:
        transform 0.22s ease,
        background-color 0.22s ease;
}
.footer-lead-contact a:hover i {
    background: var(--accent-dark);
    transform: translate(0.16rem, -0.16rem);
}
.footer-lead-contact p {
    margin: 0;
    color: #71807d;
    font-size: 0.7rem;
}
.footer-top {
    display: block;
    padding: clamp(2.25rem, 4vw, 3.75rem) 0;
}
.footer-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 7vw, 7rem);
}
.footer-links > div {
    gap: 0.7rem;
    padding-left: 0;
    border-left: 0;
}
.footer-links span {
    margin-bottom: 0.55rem;
}
.footer-links a {
    color: #52615e;
    font-size: 0.77rem;
}
.footer-links a:hover {
    color: var(--accent);
    transform: translateX(0.15rem);
}
.footer-contact p {
    margin: 0.25rem 0 0;
    color: #71807d;
    font-size: 0.7rem;
}
.footer-bottom {
    grid-template-columns: 1fr auto;
    gap: 1.25rem;
    padding: 1.25rem 0;
    color: #6d7b78;
    border-top: 1px solid rgba(23, 35, 38, 0.14);
    font-size: 0.65rem;
}
.footer-bottom span:nth-child(2) {
    display: none;
}
.footer-bottom > div {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1.25rem;
}
.footer-bottom a {
    color: #52615e;
}
.footer-bottom a:hover {
    color: var(--accent);
}
@media (max-width: 991.98px) {
    .home-contact-panel,
    .footer-lead {
        grid-template-columns: 1fr;
    }
    .contact-panel-action {
        padding: 0;
        border-left: 0;
        border-top: 1px solid rgba(15, 92, 99, 0.16);
        padding-top: 2rem;
    }
    .home-contact-cta {
        max-width: 20rem;
    }
}
@media (max-width: 575.98px) {
    .home-contact {
        padding: 3.75rem 0;
    }
    .home-contact-panel {
        padding: 1.7rem;
        border-radius: 1rem;
    }
    .home-contact-panel h2 {
        font-size: 2.5rem;
    }
    .footer-lead {
        gap: 2.25rem;
        padding: 3rem 0 2.25rem;
    }
    .footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 2.25rem 1.5rem;
    }
    .footer-contact {
        grid-column: 1 / -1;
    }
    .footer-bottom {
        grid-template-columns: 1fr;
    }
    .footer-bottom > div {
        justify-content: flex-start;
        gap: 0.6rem 1.15rem;
    }
}

.home-contact {
    background: #f1f3f0;
}
.home-contact-panel {
    grid-template-columns: minmax(0, 1.2fr) minmax(15rem, 0.52fr);
    gap: clamp(2rem, 6vw, 6rem);
    padding: clamp(2.4rem, 5vw, 5.25rem);
    border: 0;
    border-radius: 1.1rem;
    color: #fff;
    background: var(--accent);
    box-shadow: none;
}
.home-contact-panel .eyebrow {
    color: #b8ddd6;
}
.home-contact-panel h2 {
    max-width: 13ch;
    margin-top: 0.7rem;
    color: #fff;
    font-size: clamp(2.55rem, 4.5vw, 5.1rem);
    line-height: 0.98;
}
.home-contact-panel > div > p {
    max-width: 32rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.86rem;
}
.contact-panel-action {
    align-content: end;
    gap: 1.5rem;
    padding: 0;
    border: 0;
}
.contact-panel-action > span {
    max-width: 15.5rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.76rem;
    line-height: 1.6;
}
.home-contact-cta {
    max-width: 17.5rem;
    padding: 0.7rem 0.75rem 0.7rem 1.05rem;
    border-radius: 999px;
    color: var(--accent);
    background: #fff;
    font-size: 0.74rem;
}
.contact-panel-action .home-contact-cta {
    justify-self: start;
}
.home-contact-cta i {
    width: 2.2rem;
    height: 2.2rem;
    color: #fff;
    background: var(--accent);
}
.home-contact-cta:hover {
    color: var(--accent-dark);
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.16);
}
.home-contact-cta:hover i {
    color: #fff;
    background: var(--accent-dark);
    transform: rotate(45deg);
}

.home-contact-cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.2rem;
    align-items: center;
    gap: 0.75rem;
}
.home-contact-cta > span {
    display: block;
    padding: 0;
    text-align: center;
    white-space: nowrap;
    transform: translateX(0.5rem);
}
.home-contact-cta > i {
    position: static;
    display: grid;
    place-items: center;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-contact-cta:hover > i {
    transform: rotate(45deg);
}

main
    > section:not(.hero):not(.service-detail-hero):not(.page-hero):nth-of-type(
        even
    ) {
    background: var(--surface);
}
main
    > section:not(.hero):not(.service-detail-hero):not(.page-hero):nth-of-type(
        odd
    ) {
    background: var(--paper);
}

body[data-view="services-index"] .service-card,
body[data-view="services-index"] .service-card--wide {
    background: var(--paper);
}
body[data-view="services-index"] .service-card:hover,
body[data-view="services-index"] .service-card--teal:hover {
    background: var(--surface);
}
body[data-view="services-index"] .service-overview-item {
    background: var(--paper);
}
body[data-view="services-index"] .service-overview-item:hover {
    background: var(--surface);
}
body[data-page="home"] .service-overview-item {
    background: var(--paper);
}
body[data-page="home"] .service-overview-item:hover {
    background: var(--surface);
}
body[data-page="portfolio"] .service-map-grid article {
    background: var(--paper);
}
body[data-page="portfolio"] .service-map-grid article:hover {
    background: var(--surface);
}

.home-reviews-reel .reviews-reel-head.services-stage-head {
    display: flex;
    align-items: flex-end;
}
.home-reviews-reel .reviews-reel-head h2 {
    max-width: 25ch;
}
.home-reviews-reel .reviews-reel-head h2 span {
    display: block;
}
.home-reviews-reel .reviews-reel-action.services-stage-intro {
    width: auto;
    max-width: 25rem;
    justify-self: auto;
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .home-reviews-reel .reviews-reel-head.services-stage-head {
        display: flex;
    }
}
@media (max-width: 991.98px) {
    .home-contact-panel {
        grid-template-columns: 1fr;
    }
    .contact-panel-action {
        padding-top: 1.6rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }
}
@media (max-width: 575.98px) {
    .home-contact-panel {
        padding: 2rem 1.5rem;
        border-radius: 0.9rem;
    }
    .home-contact-panel h2 {
        font-size: 2.6rem;
    }
}

.precision-header .navbar-brand {
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.precision-header .navbar-brand:hover {
    transform: translateY(-1px);
}
.precision-header .navbar-brand:hover .brand-logo {
    opacity: 0.78;
    transform: translateY(-1px);
}
.precision-header .navbar-brand:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0.45rem;
    border-radius: 0.2rem;
}

.footer-lead {
    grid-template-columns: minmax(0, 1.2fr) minmax(15rem, 0.55fr);
    align-items: center;
}
.footer-wordmark {
    display: inline-flex;
    width: 9.25rem;
    height: auto;
    text-decoration: none;
}
.footer-wordmark img {
    display: block;
    width: 100%;
    height: auto;
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}
.footer-wordmark:hover img {
    opacity: 0.78;
    transform: translateY(-1px);
}
.footer-wordmark:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0.45rem;
    border-radius: 0.2rem;
}
.footer-brand > .footer-wordmark + p {
    margin-top: 1.4rem;
}
.footer-lead-contact {
    align-content: center;
}
.footer-lead-contact > span {
    margin-bottom: 0.15rem;
}
.footer-lead-contact a {
    color: var(--ink);
    font-size: 1rem;
    letter-spacing: -0.02em;
}
.footer-lead-contact a + a {
    margin-top: 0.2rem;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0;
}
.footer-lead-contact a i {
    width: 1.55rem;
    height: 1.55rem;
    font-size: 0.6rem;
}
.footer-lead-contact p {
    margin-top: 0.1rem;
}
@media (max-width: 991.98px) {
    .footer-lead {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

.precision-header .navbar-brand:focus-visible,
.footer-brand .footer-wordmark:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0.45rem;
    border-radius: 0.2rem;
}

.footer-lead-contact > a:first-of-type {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 650;
    transition: color 0.22s ease;
}
.footer-lead-contact > a:first-of-type:hover {
    color: var(--accent);
    transform: none;
}
.footer-lead-contact > .footer-contact-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 10.75rem;
    height: 2.85rem;
    margin-top: 0.55rem;
    padding: 0.68rem 1.05rem;
    border: 1px solid rgba(15, 92, 99, 0.24);
    border-radius: 0.55rem;
    color: var(--accent);
    background: transparent;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: none;
    transition:
        color 0.28s ease,
        background-color 0.28s ease,
        border-color 0.28s ease,
        transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.footer-lead-contact > .footer-contact-cta:hover {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
    transform: translateY(-1px);
}

.footer-lead-contact > .footer-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 650;
    transition:
        color 0.22s ease,
        transform 0.22s ease;
}
.footer-lead-contact > .footer-phone .footer-phone-icon {
    display: inline-grid;
    width: auto;
    height: auto;
    place-items: center;
    border-radius: 0;
    color: var(--accent);
    background: transparent;
    font-size: 1.12rem;
    line-height: 1;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.footer-lead-contact > .footer-phone:hover {
    color: var(--accent);
    transform: none;
}
.footer-lead-contact > .footer-phone:hover .footer-phone-icon {
    transform: rotate(-12deg) scale(1.12);
}
.footer-lead-contact > .footer-phone:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0.35rem;
    border-radius: 0.2rem;
}
.footer-manifesto {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 7vw, 8rem);
    align-items: start;
    padding: clamp(2.1rem, 4vw, 3.6rem) 0;
    border-top: 1px solid rgba(23, 35, 38, 0.14);
}
.footer-manifesto > p {
    max-width: 35rem;
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.05rem, 1.65vw, 1.45rem);
    line-height: 1.34;
    letter-spacing: -0.035em;
    font-weight: 500;
}
.footer-manifesto ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-manifesto li {
    display: grid;
    gap: 0.6rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(15, 92, 99, 0.22);
    color: #5c6b67;
    font-size: 0.72rem;
    line-height: 1.45;
}
.footer-manifesto li span {
    color: var(--accent);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}
@media (max-width: 991.98px) {
    .footer-manifesto {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 575.98px) {
    .footer-manifesto {
        padding: 2rem 0;
        gap: 1.75rem;
    }
    .footer-manifesto ul {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}

.footer-brand .footer-detail {
    max-width: 34rem;
    margin-top: 0.6rem;
    color: #71807d;
    font-size: 0.75rem;
    line-height: 1.65;
}
.footer-lead-contact {
    align-content: start;
}
.footer-lead-contact .footer-contact-intro {
    max-width: 18rem;
    margin: 0.2rem 0 0.45rem;
    color: #667571;
    font-size: 0.74rem;
    line-height: 1.6;
}

.footer-lead {
    grid-template-columns: minmax(18rem, 1fr) minmax(10rem, 0.42fr) minmax(
            16rem,
            0.72fr
        );
    align-items: center;
}
.footer-orbit {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    color: var(--accent);
}
.footer-orbit > div {
    position: relative;
    width: 8.4rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.footer-orbit i {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(15, 92, 99, 0.22);
    border-radius: 50%;
}
.footer-orbit i:nth-child(2) {
    inset: 1.1rem;
    border-color: rgba(15, 92, 99, 0.16);
}
.footer-orbit i:nth-child(3) {
    inset: 2.2rem;
    border-color: rgba(15, 92, 99, 0.12);
}
.footer-orbit i:first-child {
    animation: footer-orbit-spin 18s linear infinite;
}
.footer-orbit i:first-child::after {
    content: "";
    position: absolute;
    top: -0.22rem;
    left: 50%;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0.25rem rgba(15, 92, 99, 0.08);
}
.footer-orbit b {
    position: relative;
    z-index: 1;
    color: var(--ink);
    font-size: 1rem;
    letter-spacing: 0.08em;
    font-weight: 800;
}
.footer-orbit > span {
    color: #778581;
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    white-space: nowrap;
}
@keyframes footer-orbit-spin {
    to {
        transform: rotate(360deg);
    }
}
@media (max-width: 991.98px) {
    .footer-lead {
        grid-template-columns: 1fr 10rem;
    }
    .footer-orbit {
        grid-column: 2;
        grid-row: 1;
    }
    .footer-lead-contact {
        grid-column: 1 / -1;
    }
}
@media (max-width: 575.98px) {
    .footer-lead {
        grid-template-columns: 1fr;
    }
    .footer-orbit {
        display: none;
    }
    .footer-lead-contact {
        grid-column: auto;
    }
}

.footer-orbit {
    display: none;
}
.footer-lead {
    grid-template-columns: minmax(18rem, 1.2fr) minmax(16rem, 0.7fr);
    align-items: center;
}
.footer-brand {
    transform: translateY(-1.1rem);
}
.footer-lead-contact > p:last-child {
    display: none;
}
@media (max-width: 991.98px) {
    .footer-lead {
        grid-template-columns: 1fr;
    }
    .footer-brand {
        transform: none;
    }
}

.footer-lead {
    align-items: start;
}
.footer-brand {
    transform: none;
}

.footer-code-scene {
    position: relative;
    width: min(100%, 44rem);
    height: 5rem;
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 1rem;
    align-items: center;
    margin-top: 2.6rem;
    padding: 0 1.15rem;
    overflow: hidden;
    border-top: 1px solid rgba(15, 92, 99, 0.24);
    border-bottom: 1px solid rgba(15, 92, 99, 0.13);
}
.footer-code-scene::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--accent);
}
.code-mark {
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 0.48rem;
    color: #fff;
    background: var(--accent);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: -0.08em;
    animation: code-mark-pulse 3.4s ease-in-out infinite;
}
.code-lines {
    display: grid;
    gap: 0.48rem;
}
.code-lines i {
    display: block;
    height: 3px;
    border-radius: 4px;
    background: rgba(15, 92, 99, 0.18);
    transform-origin: left;
    animation: code-line-build 3.8s ease-in-out infinite;
}
.code-lines i:nth-child(1) {
    width: 72%;
}
.code-lines i:nth-child(2) {
    width: 48%;
    animation-delay: 0.26s;
}
.code-lines i:nth-child(3) {
    width: 63%;
    animation-delay: 0.52s;
}
.footer-code-scene > b {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    width: 0.42rem;
    height: 1.65rem;
    background: var(--accent);
    transform: translateY(-50%);
    animation: code-caret 1s steps(2, end) infinite;
}
@keyframes code-mark-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(15, 92, 99, 0.18);
    }
    42% {
        transform: scale(1.08);
        box-shadow: 0 0 0 0.45rem rgba(15, 92, 99, 0);
    }
}
@keyframes code-line-build {
    0%,
    12% {
        transform: scaleX(0.08);
        opacity: 0.3;
    }
    48%,
    76% {
        transform: scaleX(1);
        opacity: 1;
    }
    100% {
        transform: scaleX(0.08);
        opacity: 0.3;
    }
}
@keyframes code-caret {
    50% {
        opacity: 0;
    }
}
@media (max-width: 575.98px) {
    .footer-code-scene {
        margin-top: 2rem;
    }
}

.footer-code-scene {
    height: 3.75rem;
    grid-template-columns: 2.7rem 1fr;
    margin-top: 2.15rem;
    padding-inline: 1rem;
}
.code-mark {
    width: 1.85rem;
    height: 1.85rem;
    font-size: 0.54rem;
}
.code-lines {
    position: relative;
    display: block;
    min-width: 0;
    height: 1.2rem;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.code-lines i {
    display: none;
}
.code-lines::before {
    content: "const product = build(idea);";
    display: block;
    width: 0;
    overflow: hidden;
    color: var(--accent);
    font-size: 0.68rem;
    line-height: 1.2rem;
    white-space: nowrap;
    border-right: 2px solid var(--accent);
    animation: footer-code-type 5.2s steps(29, end) infinite;
}
.footer-code-scene > b {
    display: none;
}
@keyframes footer-code-type {
    0%,
    8% {
        width: 0;
    }
    48%,
    76% {
        width: 29ch;
    }
    92%,
    100% {
        width: 0;
    }
}

.footer-code-scene {
    width: min(100%, 38rem);
    height: 3.15rem;
    grid-template-columns: 2.3rem minmax(0, 1fr);
    gap: 0.85rem;
    margin-top: 1.75rem;
    padding: 0;
    border: 0;
    overflow: visible;
}
.footer-code-scene::before {
    display: none;
}
.code-mark {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 0.56rem;
    box-shadow: none;
}
.code-lines {
    display: flex;
    align-items: center;
    height: 1.5rem;
    overflow: visible;
}
.code-lines::before {
    content: none;
    animation: none;
}
.footer-code-text {
    display: inline-block;
    min-width: 0.55ch;
    color: var(--accent);
    font-size: 0.76rem;
    line-height: 1.35;
    letter-spacing: -0.02em;
    white-space: nowrap;
    border-right: 1.5px solid var(--accent);
    animation: footer-code-cursor 0.8s steps(1, end) infinite;
}
@keyframes footer-code-cursor {
    50% {
        border-color: transparent;
    }
}

.scroll-dev-cat {
    position: fixed;
    z-index: 1040;
    left: 1.15rem;
    bottom: 1.1rem;
    width: 4.4rem;
    height: 3.5rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(1rem) scale(0.9);
    transition:
        opacity 0.35s ease,
        transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.scroll-dev-cat.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.scroll-dev-cat__screen {
    position: absolute;
    right: 0;
    bottom: 0.05rem;
    width: 2.55rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border: 2px solid var(--accent);
    border-radius: 0.3rem;
    background: rgba(247, 248, 245, 0.94);
    box-shadow: 0 0.3rem 0.8rem rgba(15, 92, 99, 0.12);
}
.scroll-dev-cat__screen::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.42rem;
    width: 1.1rem;
    height: 2px;
    background: var(--accent);
    transform: translateX(-50%);
}
.scroll-dev-cat__body {
    position: absolute;
    left: 0.35rem;
    bottom: 0.15rem;
    width: 1.8rem;
    height: 1.15rem;
    border-radius: 1rem 1rem 0.55rem 0.55rem;
    background: var(--accent);
}
.scroll-dev-cat__head {
    position: absolute;
    left: 0.15rem;
    bottom: 1.08rem;
    width: 1.35rem;
    height: 1.25rem;
    border-radius: 48% 48% 44% 44%;
    background: var(--accent);
    transform-origin: bottom center;
}
.scroll-dev-cat__head::before,
.scroll-dev-cat__head::after {
    content: "";
    position: absolute;
    top: -0.25rem;
    width: 0.52rem;
    height: 0.52rem;
    background: var(--accent);
}
.scroll-dev-cat__head::before {
    left: 0.02rem;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.scroll-dev-cat__head::after {
    right: 0.02rem;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.scroll-dev-cat__head b {
    position: absolute;
    top: 0.48rem;
    width: 0.13rem;
    height: 0.13rem;
    border-radius: 50%;
    background: var(--mint);
}
.scroll-dev-cat__head b:first-child {
    left: 0.32rem;
}
.scroll-dev-cat__head b:last-child {
    right: 0.32rem;
}
.scroll-dev-cat__progress {
    color: var(--accent);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.scroll-dev-cat.is-typing .scroll-dev-cat__head {
    animation: cat-nod 0.3s ease-in-out 2;
}
@keyframes cat-nod {
    50% {
        transform: rotate(5deg) translateY(0.06rem);
    }
}
@media (max-width: 575.98px) {
    .scroll-dev-cat {
        display: none;
    }
}

.contact-signal {
    position: relative;
    width: 5.6rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.contact-signal::before {
    content: "";
    position: absolute;
    right: 0.35rem;
    left: 0.35rem;
    top: 50%;
    height: 1px;
    background: rgba(229, 241, 237, 0.36);
    transform: translateY(-50%);
}
.contact-signal i {
    position: relative;
    z-index: 1;
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: #e5f1ed;
    box-shadow: 0 0 0 0.18rem rgba(229, 241, 237, 0.08);
    animation: contact-node 2.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.contact-signal i:nth-of-type(2) {
    animation-delay: 0.28s;
}
.contact-signal i:nth-of-type(3) {
    animation-delay: 0.56s;
}
.contact-signal b {
    position: absolute;
    inset: calc(50% - 1px) 0.35rem auto;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
    animation: contact-line 2.7s ease-in-out infinite;
}
@keyframes contact-node {
    0%,
    18%,
    100% {
        transform: scale(1);
        opacity: 0.55;
    }
    8% {
        transform: scale(1.45);
        opacity: 1;
    }
}
@keyframes contact-line {
    0%,
    10% {
        transform: scaleX(0);
        opacity: 0;
    }
    38%,
    70% {
        transform: scaleX(1);
        opacity: 1;
    }
    88%,
    100% {
        transform: scaleX(1);
        opacity: 0;
    }
}

.contact-panel-action {
    align-content: center;
}
.contact-signal {
    width: min(100%, 19rem);
    height: 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    align-items: end;
}
.contact-signal::before {
    right: 1rem;
    left: 1rem;
    top: 0.55rem;
}
.contact-signal span {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}
.contact-signal span {
    text-align: center;
}
.contact-signal span i {
    justify-self: center;
    width: 0.68rem;
    height: 0.68rem;
    display: block;
    border-radius: 50%;
    background: #e5f1ed;
    box-shadow: 0 0 0 0.23rem rgba(229, 241, 237, 0.08);
    animation: contact-node 2.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.contact-signal span:nth-of-type(2) i {
    animation-delay: 0.28s;
}
.contact-signal span:nth-of-type(3) i {
    animation-delay: 0.56s;
}
.contact-signal b {
    right: 1rem;
    left: 1rem;
    top: 0.5rem;
}
@media (max-width: 575.98px) {
    .contact-signal {
        width: 100%;
        max-width: 19rem;
    }
}

.cookie-banner {
    position: fixed;
    z-index: 1080;
    right: clamp(1rem, 3vw, 2.5rem);
    bottom: clamp(1rem, 3vw, 2.5rem);
    width: min(31rem, calc(100% - 2rem));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem;
    align-items: end;
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(15, 92, 99, 0.16);
    border-radius: 0.9rem;
    color: var(--ink);
    background: #fff;
    box-shadow: 0 1.4rem 3.25rem rgba(23, 35, 38, 0.16);
}
.cookie-banner[hidden] {
    display: none;
}
.cookie-banner p {
    margin: 0;
    color: #647370;
    font-size: 0.72rem;
    line-height: 1.55;
}
.cookie-banner p a {
    color: var(--accent);
    text-underline-offset: 0.18em;
}
.cookie-banner > div {
    display: flex;
    gap: 0.5rem;
}
.cookie-banner button {
    min-height: 2.4rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(15, 92, 99, 0.25);
    border-radius: 0.5rem;
    font-size: 0.68rem;
    font-weight: 750;
    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease;
}
.cookie-decline {
    color: var(--accent);
    background: transparent;
}
.cookie-decline:hover {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
}
.cookie-accept {
    color: #fff;
    border-color: var(--accent) !important;
    background: var(--accent);
}
.cookie-accept:hover {
    background: var(--accent-dark);
}
@media (max-width: 575.98px) {
    .cookie-banner {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }
    .cookie-banner > div {
        justify-content: stretch;
    }
    .cookie-banner button {
        flex: 1;
    }
}
.solution-copy > a {
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    gap: 1.4rem;
    margin-top: 2rem;
    padding: 0.78rem 0.85rem 0.78rem 1rem;
    border: 1px solid var(--accent);
    border-radius: 0.65rem;
    color: #fff;
    background: var(--accent);
    box-shadow: 0 0.55rem 1.5rem rgba(15, 92, 99, 0.12);
    transition:
        background-color 0.25s,
        border-color 0.25s,
        transform 0.25s,
        box-shadow 0.25s;
}
.solution-copy > a span {
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--accent);
    background: #fff;
}
.solution-copy > a:hover {
    color: #fff;
    border-color: var(--accent-dark);
    background: var(--accent-dark);
    box-shadow: 0 0.75rem 1.75rem rgba(15, 92, 99, 0.17);
    transform: translateY(-2px);
}
.solution-copy > a:hover span {
    transform: rotate(45deg);
}
.solution-result {
    min-height: 28rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.7rem;
    padding: clamp(2rem, 4vw, 4rem);
    border-left: 1px solid rgba(23, 35, 38, 0.08);
    background: #f8faf8;
}
.solution-result > span {
    margin-bottom: 0.7rem;
    color: var(--accent);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.solution-result > div {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid rgba(23, 35, 38, 0.08);
    border-radius: 0.65rem;
    background: #fff;
    box-shadow: 0 0.4rem 1.4rem rgba(23, 35, 38, 0.025);
}
.solution-result b {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--accent);
    font-size: 0.6rem;
    font-weight: 800;
}
.solution-result p {
    margin: 0;
}
.solution-result strong,
.solution-result small {
    display: block;
}
.solution-result strong {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 650;
}
.solution-result small {
    margin-top: 0.35rem;
    color: #687675;
    font-size: 0.72rem;
    line-height: 1.5;
}
@media (max-width: 767.98px) {
    .solution-copy {
        min-height: auto;
        padding-bottom: 2rem;
    }
    .solution-copy > a {
        width: 100%;
        justify-content: space-between;
        margin-top: 1.75rem;
    }
    .solution-result {
        min-height: 24rem;
        padding: 1.5rem;
        border-top: 1px solid rgba(23, 35, 38, 0.08);
        border-left: 0;
    }
}

.studio-process {
    background: #f1f3f0;
}
.studio-process .container {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(22rem, 1fr);
    gap: clamp(3rem, 9vw, 10rem);
    align-items: start;
}
.studio-process-intro h2 {
    max-width: 10ch;
    margin: 1.3rem 0 1.5rem;
    color: var(--ink);
    font-size: clamp(2.35rem, 4.4vw, 4.7rem);
    line-height: 0.96;
    letter-spacing: -0.07em;
}
.studio-process-intro p {
    max-width: 28rem;
    margin: 0;
    color: #6d7d7a;
    line-height: 1.65;
}
.studio-process-list {
    border-top: 1px solid rgba(15, 92, 99, 0.22);
}
.studio-process-list article {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1.3rem;
    padding: 1.7rem 0;
    border-bottom: 1px solid rgba(15, 92, 99, 0.18);
}
.studio-process-list article > span {
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.studio-process-list h3 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    letter-spacing: -0.045em;
}
.studio-process-list p {
    max-width: 31rem;
    margin: 0.65rem 0 0;
    color: #6d7d7a;
    font-size: 0.9rem;
    line-height: 1.6;
}
@media (max-width: 767.98px) {
    .studio-process .container {
        grid-template-columns: 1fr;
        gap: 2.8rem;
    }
    .studio-process-list article {
        grid-template-columns: 3rem 1fr;
        gap: 1rem;
    }
}

.blog-grid-section {
    padding: clamp(4.5rem, 8vw, 7rem) 0;
}
.blog-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(19rem, 0.9fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    color: var(--ink);
    text-decoration: none;
}
.blog-featured-art {
    position: relative;
    min-height: clamp(18rem, 29vw, 25rem);
    overflow: hidden;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--paper);
    transition:
        transform 0.35s ease,
        background-color 0.35s ease;
}
.blog-featured-art span {
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.blog-featured-art b {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    max-width: 7ch;
    font-size: clamp(2.35rem, 4.6vw, 4.75rem);
    line-height: 0.85;
    letter-spacing: -0.08em;
}
.blog-featured-art i {
    position: absolute;
    right: -7%;
    top: 19%;
    width: 48%;
    aspect-ratio: 1;
    border: 1px solid rgba(15, 92, 99, 0.22);
    border-radius: 50%;
    transition: transform 0.45s ease;
}
.blog-featured-art i:nth-of-type(2) {
    top: 31%;
    right: 14%;
    width: 13%;
}
.blog-featured-art i:nth-of-type(3) {
    top: 53%;
    right: 30%;
    width: 6%;
    background: var(--accent);
    border: 0;
}
.blog-featured:hover .blog-featured-art {
    background: #fff;
    transform: translateY(-0.25rem);
}
.blog-featured-copy {
    transition: transform 0.35s ease;
}
.blog-featured:hover .blog-featured-copy {
    transform: translateX(0.35rem);
}
.blog-featured:hover .blog-featured-art i:first-of-type {
    transform: scale(1.08);
}
.blog-featured h2 {
    max-width: 10ch;
    margin: 1rem 0 1.25rem;
    color: var(--ink);
    font-size: clamp(2rem, 3.7vw, 3.8rem);
    line-height: 0.95;
    letter-spacing: -0.07em;
}
.blog-featured p {
    max-width: 27rem;
    margin: 0;
    color: #687875;
    line-height: 1.65;
}
.blog-meta {
    display: block;
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.blog-read-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.2rem;
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 750;
}
.blog-read-link i {
    font-size: 1rem;
    transition: transform 0.25s ease;
}
.blog-featured:hover .blog-read-link i {
    transform: translate(0.2rem, -0.2rem);
}
.blog-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.blog-card-grid .blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 19rem;
    padding: 1.6rem;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    background: var(--paper);
    text-decoration: none;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}
.blog-card-grid .blog-card:hover {
    border-color: #c9d6d6;
    background: #fff;
    transform: translateY(-0.3rem);
}
.blog-card-number {
    display: block;
    margin-bottom: auto;
    color: var(--accent);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}
.blog-card-grid h2 {
    max-width: 14ch;
    margin: 2.8rem 0 0.9rem;
    font-size: clamp(1.35rem, 2vw, 1.7rem);
    line-height: 1.04;
    letter-spacing: -0.05em;
}
.blog-card-grid p {
    margin: 0;
    color: #71817e;
    font-size: 0.86rem;
    line-height: 1.55;
}
.blog-card-grid i {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: var(--accent);
    border: 1px solid rgba(15, 92, 99, 0.2);
    border-radius: 50%;
    font-style: normal;
    transition: transform 0.25s ease;
}
.blog-card-grid .blog-card:hover > i {
    color: #fff;
    background: var(--accent);
    transform: translate(0.2rem, -0.2rem);
}
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}
.blog-pagination > a,
.blog-pagination > span,
.blog-pagination ol a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: 2.65rem;
    min-height: 2.65rem;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}
.blog-pagination > a {
    padding: 0 1rem;
}
.blog-pagination > span {
    padding: 0 1rem;
}
.blog-pagination ol {
    display: flex;
    gap: 0.45rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.blog-pagination a:hover,
.blog-pagination a.is-active {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
}
.blog-pagination .is-disabled {
    opacity: 0.42;
    pointer-events: none;
}
@media (max-width: 767.98px) {
    .blog-featured {
        grid-template-columns: 1fr;
    }
    .blog-featured-art {
        min-height: 17rem;
    }
    .blog-card-grid {
        grid-template-columns: 1fr;
    }
    .blog-card-grid .blog-card {
        min-height: 14rem;
    }
    .blog-pagination > a span {
        display: none;
    }
    .blog-pagination > a {
        padding: 0;
    }
}

@media (max-width: 575.98px) {
    .services-hero-inner {
        padding: 3.25rem 0 4rem;
    }
    .services-hero-inner .services-hero-copy {
        margin-top: 0;
    }
}

main > section:not(.hero):not(.service-detail-hero):not(.page-hero),
main > article > section {
    padding-block: var(--section);
}
main > .service-detail-hero,
main > article > .service-detail-hero,
main > .page-hero {
    padding-bottom: var(--section);
}

body:not([data-route-page="home"])
    :is(.service-detail-hero, .services-hero, .page-hero) {
    min-height: calc(100vh - 4.75rem);
    display: grid;
    align-items: center;
}
@supports (min-height: 100svh) {
    body:not([data-route-page="home"])
        :is(.service-detail-hero, .services-hero, .page-hero) {
        min-height: calc(100svh - 4.75rem);
    }
}
body:not([data-route-page="home"])
    :is(.service-detail-hero, .services-hero, .page-hero)
    > .container {
    width: 100%;
}
@media (max-width: 575.98px) {
    body:not([data-route-page="home"])
        :is(.service-detail-hero, .services-hero, .page-hero) {
        min-height: calc(100svh - 4rem);
    }
}

body:not([data-route-page="home"]) .service-detail-hero {
    align-items: stretch;
}
body:not([data-route-page="home"]) .service-detail-hero > .container {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding-top: 2rem;
}
body:not([data-route-page="home"]) .service-detail-hero .service-detail-crumbs {
    align-self: start;
    margin-top: 0;
}
body:not([data-route-page="home"]) .service-detail-hero .service-detail-hero-grid {
    align-self: center;
    margin-top: 0;
}
@media (max-width: 575.98px) {
    body:not([data-route-page="home"]) .service-detail-hero > .container {
        padding-top: 1.5rem;
    }
}

.legal-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12rem;
    gap: clamp(2rem, 6vw, 7rem);
    align-items: end;
}
.legal-hero-grid h1 {
    max-width: 13ch;
}
.legal-hero-date {
    display: grid;
    gap: 0.45rem;
    padding: 1rem 0 1rem 1.2rem;
    border-left: 1px solid var(--line);
}
.legal-hero-date span,
.legal-hero-date strong {
    font-size: 0.76rem;
    line-height: 1.4;
}
.legal-hero-date span {
    color: #6d7d7a;
}
.legal-hero-date strong {
    color: var(--ink);
}
.legal-section {
    background: #fff;
}
.legal-layout {
    display: grid;
    grid-template-columns: 12rem minmax(0, 43rem);
    gap: clamp(2.5rem, 8vw, 9rem);
    max-width: 68rem;
    margin: 0 auto;
}
.legal-toc {
    position: sticky;
    top: 7rem;
    align-self: start;
    padding-top: 0.45rem;
}
.legal-toc > span {
    display: block;
    margin-bottom: 1rem;
    color: var(--accent);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.legal-toc ol {
    display: grid;
    gap: 0.7rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.legal-toc a {
    color: #6d7d7a;
    font-size: 0.78rem;
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.2s ease;
}
.legal-toc a:hover {
    color: var(--accent);
}
.legal-content {
    color: #40514f;
    font-size: 1.03rem;
    line-height: 1.8;
}
.legal-notice {
    max-width: 39rem;
    margin: 0 0 clamp(3rem, 6vw, 4.5rem);
    padding: 1.2rem 1.4rem;
    color: #53635f;
    border-left: 2px solid var(--accent);
    background: var(--paper);
    font-size: 0.9rem;
    line-height: 1.6;
}
.legal-content h2 {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    margin: 3rem 0 0.9rem;
    color: var(--ink);
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
    line-height: 1.12;
    letter-spacing: -0.045em;
}
.legal-content h2 span {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.legal-content p {
    max-width: 40rem;
    margin: 0;
}
.legal-content a {
    color: var(--accent);
    font-weight: 750;
}
@media (max-width: 991.98px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .legal-toc {
        position: static;
        display: flex;
        gap: 1.2rem;
        padding: 1rem 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
    }
    .legal-toc > span {
        flex: 0 0 auto;
        margin: 0;
    }
    .legal-toc ol {
        display: flex;
        flex-wrap: wrap;
        gap: 0.45rem 1rem;
    }
}
@media (max-width: 767.98px) {
    .legal-hero-grid {
        grid-template-columns: 1fr;
    }
    .legal-hero-date {
        padding: 1rem 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
    .legal-toc {
        display: grid;
    }
}

.reviews-page-section {
    background: var(--paper);
}
.reviews-page-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.reviews-page-intro p {
    max-width: 24rem;
    margin: 0;
    color: #687875;
    font-size: 0.92rem;
    line-height: 1.6;
}
.reviews-page-intro h2 {
    max-width: 18ch;
    margin: 0.8rem 0 0;
    color: var(--ink);
    font-size: clamp(2.4rem, 4.5vw, 4.8rem);
    line-height: 1.01;
    letter-spacing: -0.065em;
    font-weight: 600;
}
.reviews-page-intro h2 em {
    color: var(--accent);
    font-style: normal;
}
.reviews-featured-story {
    display: grid;
    grid-template-columns: minmax(11rem, 0.45fr) minmax(18rem, 1.05fr) minmax(
            15rem,
            0.7fr
        );
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #fff;
}
.reviews-featured-story > * {
    min-height: 27rem;
    padding: clamp(1.5rem, 3vw, 2.8rem);
}
.reviews-featured-story--client {
    grid-template-columns: minmax(12rem, 0.4fr) minmax(0, 1.6fr);
}
.reviews-featured-story--client + .reviews-featured-story--client {
    margin-top: 1.1rem;
}
.reviews-client-review {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(1.75rem, 4vw, 3.5rem);
}
.reviews-client-review > span {
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.reviews-client-review blockquote {
    max-width: 52rem;
    margin: clamp(2rem, 5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.reviews-client-review blockquote::before {
    content: "“";
    display: block;
    margin-bottom: 0.8rem;
    color: var(--accent);
    font-family: Georgia, serif;
    font-size: clamp(3rem, 5vw, 5.25rem);
    font-weight: 700;
    line-height: 0.45;
}
.reviews-client-review blockquote p {
    margin: 0;
    color: var(--ink);
    font-size: clamp(1.45rem, 2.65vw, 2.65rem);
    font-weight: 560;
    line-height: 1.16;
    letter-spacing: -0.055em;
    overflow-wrap: anywhere;
}
.reviews-client-review footer {
    display: grid;
    gap: 0.32rem;
    margin-top: auto;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line);
}
.reviews-client-review footer strong {
    color: var(--ink);
    font-size: 0.84rem;
}
.reviews-client-review footer span {
    color: #73817e;
    font-size: 0.74rem;
}
.reviews-story-meta,
.reviews-quote-slot {
    display: flex;
    flex-direction: column;
}
.reviews-story-meta {
    border-right: 1px solid var(--line);
}
.reviews-story-meta > span,
.reviews-story-copy > span,
.reviews-quote-slot > span,
.reviews-proof-grid > article > span,
.reviews-next-panel > div > span {
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.reviews-story-meta small {
    max-width: 12ch;
    margin-top: auto;
    color: #73817e;
    font-size: 0.74rem;
    line-height: 1.5;
}
.reviews-story-mark {
    position: relative;
    width: 9rem;
    aspect-ratio: 1;
    margin: auto 0;
    border: 1px solid var(--line);
    border-radius: 50%;
}
.reviews-story-mark i,
.reviews-story-mark b {
    position: absolute;
    border-radius: 50%;
    background: var(--accent);
}
.reviews-story-mark i:first-child {
    width: 0.7rem;
    height: 0.7rem;
    top: 18%;
    left: 20%;
}
.reviews-story-mark i:nth-child(2) {
    width: 0.48rem;
    height: 0.48rem;
    right: 20%;
    bottom: 25%;
}
.reviews-story-mark b {
    width: 2.4rem;
    height: 2.4rem;
    top: calc(50% - 1.2rem);
    left: calc(50% - 1.2rem);
    box-shadow: 0 0 0 1.35rem rgba(15, 92, 99, 0.08);
}
.reviews-story-copy {
    display: flex;
    flex-direction: column;
}
.reviews-story-copy h3 {
    max-width: 15ch;
    margin: auto 0 1.2rem;
    color: var(--ink);
    font-size: clamp(1.8rem, 3.1vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.065em;
    font-weight: 600;
}
.reviews-story-copy > p {
    max-width: 38rem;
    margin: 0;
    color: #657471;
    font-size: 0.9rem;
    line-height: 1.65;
}
.reviews-story-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1.4rem;
}
.reviews-story-tags span {
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 99rem;
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 750;
}
.reviews-case-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    width: max-content;
    margin-top: auto;
    padding-top: 2rem;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}
.reviews-case-link i {
    color: var(--accent);
    transition: transform 0.25s ease;
}
.reviews-case-link:hover i {
    transform: translate(0.2rem, -0.2rem);
}
.reviews-quote-slot {
    background: var(--paper);
    border-left: 1px solid var(--line);
}
.reviews-quote-slot p {
    max-width: 18ch;
    margin: auto 0 1rem;
    color: var(--ink);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.2;
    letter-spacing: -0.04em;
}
.reviews-quote-slot small {
    color: #768582;
    font-size: 0.71rem;
    line-height: 1.55;
}
.reviews-proof-section {
    background: #fff;
}
.reviews-proof-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.reviews-proof-head p {
    max-width: 23rem;
    margin: 0;
    color: #657471;
    font-size: 0.9rem;
    line-height: 1.65;
}
.reviews-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
}
.reviews-proof-grid > article {
    min-height: 16rem;
    padding: 1.5rem clamp(1.1rem, 2.8vw, 2.5rem);
    border-right: 1px solid var(--line);
}
.reviews-proof-grid > article:first-child {
    padding-left: 0;
}
.reviews-proof-grid > article:last-child {
    padding-right: 0;
    border-right: 0;
}
.reviews-proof-grid h3 {
    max-width: 12ch;
    margin: 3.7rem 0 0.8rem;
    color: var(--ink);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
}
.reviews-proof-grid p {
    max-width: 23rem;
    margin: 0;
    color: #657471;
    font-size: 0.83rem;
    line-height: 1.65;
}
.reviews-next-section {
    background: var(--paper);
}
.reviews-next-panel {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.8rem, 4vw, 3.2rem);
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #fff;
}
.reviews-next-panel h2 {
    max-width: 18ch;
    margin: 0.8rem 0 0;
    color: var(--ink);
    font-size: clamp(1.8rem, 3.5vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: -0.06em;
}
@media (max-width: 991.98px) {
    .reviews-featured-story {
        grid-template-columns: 0.45fr 1fr;
    }
    .reviews-quote-slot {
        grid-column: 1 / -1;
        min-height: auto;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
    .reviews-quote-slot p {
        margin: 2rem 0;
    }
    .reviews-featured-story--client {
        grid-template-columns: 0.45fr 1fr;
    }
}
@media (max-width: 767.98px) {
    .reviews-featured-story,
    .reviews-proof-grid {
        grid-template-columns: 1fr;
    }
    .reviews-featured-story > * {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .reviews-story-mark {
        margin: 2rem 0;
    }
    .reviews-featured-story--client {
        grid-template-columns: 1fr;
    }
    .reviews-client-review {
        min-height: auto;
    }
    .reviews-quote-slot {
        grid-column: auto;
        border-top: 0;
    }
    .reviews-proof-head,
    .reviews-next-panel {
        display: grid;
        align-items: start;
    }
    .reviews-proof-grid > article,
    .reviews-proof-grid > article:first-child,
    .reviews-proof-grid > article:last-child {
        min-height: 0;
        padding: 1.5rem 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .reviews-proof-grid h3 {
        margin-top: 2rem;
    }
}
.reviews-page-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}
.reviews-page-card {
    display: flex;
    flex-direction: column;
    min-height: 20rem;
    padding: clamp(1.6rem, 3vw, 2.5rem);
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: #fff;
}
.reviews-page-card--lead {
    min-height: 24rem;
    grid-row: span 2;
    background: var(--paper);
}
.reviews-page-card > span {
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.reviews-page-card blockquote {
    max-width: 22ch;
    margin: auto 0;
    color: var(--ink);
    font-size: clamp(1.25rem, 2.15vw, 1.8rem);
    line-height: 1.18;
    letter-spacing: -0.045em;
}
.reviews-page-card footer {
    display: grid;
    gap: 0.3rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}
.reviews-page-card footer strong {
    color: var(--ink);
    font-size: 0.8rem;
}
.reviews-page-card footer small {
    color: #71817e;
    font-size: 0.72rem;
}
@media (max-width: 767.98px) {
    .reviews-page-intro {
        display: grid;
        align-items: start;
    }
    .reviews-page-grid {
        grid-template-columns: 1fr;
    }
    .reviews-page-card,
    .reviews-page-card--lead {
        min-height: 17rem;
        grid-row: auto;
    }
}

.pricing-explainer {
    background: #fff;
}
.pricing-explainer-head,
.pricing-next-step-panel {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
}
.pricing-explainer-head h2,
.pricing-factors h2,
.pricing-next-step-panel h2 {
    max-width: 16ch;
    margin: 0.8rem 0 0;
    color: var(--ink);
    font-size: clamp(2.1rem, 4vw, 4rem);
    line-height: 1;
    letter-spacing: -0.06em;
}
.pricing-explainer-head p {
    max-width: 25rem;
    margin: 0;
    color: #687875;
    font-size: 0.92rem;
    line-height: 1.65;
}
.pricing-explainer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.pricing-explainer-grid article {
    min-height: 16rem;
    padding: 1.6rem;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    background: var(--paper);
}
.pricing-explainer-grid span,
.pricing-factors li > span {
    color: var(--accent);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}
.pricing-explainer-grid h3 {
    max-width: 14ch;
    margin: 3.5rem 0 0.8rem;
    color: var(--ink);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
}
.pricing-explainer-grid p {
    margin: 0;
    color: #687875;
    font-size: 0.85rem;
    line-height: 1.6;
}
.pricing-factors {
    background: var(--paper);
}
.pricing-factors-grid {
    display: grid;
    grid-template-columns: minmax(15rem, 0.65fr) minmax(0, 1fr);
    gap: clamp(3rem, 9vw, 10rem);
}
.pricing-factors ol {
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--line);
    list-style: none;
}
.pricing-factors li {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--line);
}
.pricing-factors li strong {
    color: var(--ink);
    font-size: 1.08rem;
}
.pricing-factors li p {
    margin: 0.4rem 0 0;
    color: #687875;
    font-size: 0.86rem;
    line-height: 1.55;
}
.pricing-next-step {
    background: #fff;
}
.pricing-next-step-panel {
    padding: clamp(1.8rem, 4vw, 3rem);
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--paper);
}
.pricing-next-step-panel > div > span {
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.pricing-next-step-panel h2 {
    max-width: 18ch;
}
@media (max-width: 767.98px) {
    .pricing-explainer-head,
    .pricing-next-step-panel {
        display: grid;
        align-items: start;
    }
    .pricing-explainer-grid {
        grid-template-columns: 1fr;
    }
    .pricing-explainer-grid article {
        min-height: 0;
    }
    .pricing-explainer-grid h3 {
        margin-top: 2.5rem;
    }
    .pricing-factors-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.not-found-page {
    min-height: calc(100vh - 5rem);
    display: grid;
    align-items: center;
    background: var(--paper);
}
.not-found-content {
    max-width: 43rem;
    padding-block: var(--section);
}
.not-found-content > span {
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.not-found-content > strong {
    display: block;
    margin: 1rem 0 -1.25rem;
    color: rgba(15, 92, 99, 0.13);
    font-size: clamp(7rem, 19vw, 16rem);
    line-height: 0.8;
    letter-spacing: -0.1em;
}
.not-found-content h1 {
    max-width: 10ch;
    margin: 0;
    color: var(--ink);
    font-size: clamp(3rem, 6vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: -0.075em;
}
.not-found-content h1 em {
    color: var(--accent);
    font-style: normal;
}
.not-found-content p {
    max-width: 31rem;
    margin: 1.8rem 0 0;
    color: #687875;
    font-size: 1.05rem;
    line-height: 1.6;
}
.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem;
    margin-top: 2rem;
}
.not-found-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 750;
    text-decoration: none;
}
.not-found-link i {
    transition: transform 0.25s ease;
}
.not-found-link:hover i {
    transform: translateX(0.2rem);
}

.not-found-page {
    display: grid;
    align-items: stretch;
    min-height: 0;
}
.not-found-page .not-found-code {
    display: block;
    margin: 0.8rem 0 -1.1rem;
    color: rgba(15, 92, 99, 0.13);
    font-size: clamp(7rem, 19vw, 16rem);
    line-height: 0.8;
    letter-spacing: -0.1em;
}
.not-found-page .service-detail-hero-grid {
    align-items: center;
}
.not-found-page .not-found-actions {
    display: grid;
    justify-items: center;
    gap: 1.4rem;
    margin: 0;
}

.contact-messengers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.8rem;
}
.contact-messengers a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}
.contact-messengers a:hover {
    color: var(--accent-dark);
}

.home-contact-panel {
    grid-template-columns: minmax(0, 1.08fr) minmax(21rem, 0.72fr);
    align-items: stretch;
    gap: clamp(2.5rem, 7vw, 7rem);
    min-height: 0;
    padding: clamp(2.25rem, 4.5vw, 4.25rem);
}
.contact-panel-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.home-contact-panel h2 {
    max-width: none;
    margin: 1.1rem 0 0;
    font-size: clamp(2.5rem, 4.2vw, 4.8rem);
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.contact-panel-copy > p {
    max-width: 31rem;
    margin: 1.8rem 0 0;
}
.contact-panel-action {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    padding: 0;
    border: 0;
}
.project-brief {
    position: relative;
    padding: 2rem 1.6rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.055);
}
.project-brief::before {
    display: none;
}
.project-brief-orbit {
    position: absolute;
    z-index: 2;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    overflow: visible;
    pointer-events: none;
}
.project-brief-orbit rect {
    fill: none;
    stroke: rgba(241, 255, 252, 0.98);
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-dasharray: 2.7 97.3;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 0.72rem rgba(242, 255, 252, 1))
        drop-shadow(0 0 1.85rem rgba(184, 221, 214, 0.96));
    animation:
        project-brief-border-orbit 20s linear infinite,
        project-brief-glimmer 2.15s ease-in-out infinite;
}
.project-brief-label {
    display: block;
    margin-bottom: 1.05rem;
    color: #b8ddd6;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.project-brief strong {
    display: block;
    max-width: 100%;
    color: #fff;
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.project-brief p {
    max-width: 25rem !important;
    margin: 0.85rem 0 1.15rem !important;
    color: rgba(255, 255, 255, 0.66) !important;
    font-size: 0.74rem !important;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.project-brief ul {
    display: grid;
    gap: 0.55rem;
    padding: 0;
    margin: 0;
    list-style: none;
}
.project-brief li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.71rem;
    overflow-wrap: anywhere;
}
.project-brief li::before {
    width: 0.34rem;
    height: 0.34rem;
    content: "";
    border-radius: 50%;
    background: #b8ddd6;
}
.contact-panel-action .home-contact-cta {
    width: min(100%, 20rem);
    margin-top: 0;
    align-self: center;
}
@keyframes project-brief-border-orbit {
    0%,
    100% {
        opacity: 0.56;
    }
    48% {
        opacity: 1;
    }
    to {
        stroke-dashoffset: -100;
    }
}
@keyframes project-brief-glimmer {
    0%,
    100% {
        stroke: rgba(223, 255, 249, 0.62);
        filter: drop-shadow(0 0 0.42rem rgba(223, 255, 249, 0.72))
            drop-shadow(0 0 1.15rem rgba(184, 221, 214, 0.58));
    }
    48% {
        stroke: #fff;
        filter: drop-shadow(0 0 0.85rem rgba(247, 255, 253, 1))
            drop-shadow(0 0 2.2rem rgba(194, 240, 230, 1));
    }
}
@media (max-width: 991.98px) {
    .home-contact-panel {
        grid-template-columns: 1fr;
    }
    .contact-panel-action {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding-top: 1.7rem;
    }
}
@media (max-width: 575.98px) {
    .home-contact-panel h2 {
        white-space: normal;
    }
    .project-brief {
        padding: 1.35rem;
    }
    .contact-panel-action .home-contact-cta {
        width: 100%;
    }
}

.faq-section {
    background: var(--paper);
}
.faq-layout {
    display: grid;
    grid-template-columns: minmax(15rem, 0.55fr) minmax(0, 1fr);
    gap: clamp(3rem, 10vw, 10rem);
}
.faq-aside {
    align-self: start;
    position: sticky;
    top: 7rem;
}
.faq-aside h2 {
    max-width: 11ch;
    margin: 0.9rem 0 1.2rem;
    color: var(--ink);
    font-size: clamp(2rem, 3.5vw, 3.75rem);
    line-height: 1.02;
    letter-spacing: -0.06em;
}
.faq-aside p {
    max-width: 22rem;
    margin: 0;
    color: #657471;
    font-size: 0.88rem;
    line-height: 1.65;
}
.faq-aside > a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.8rem;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}
.faq-aside > a i {
    transition: transform 0.25s ease;
}
.faq-aside > a:hover i {
    transform: translate(0.18rem, -0.18rem);
}
.faq-group + .faq-group {
    margin-top: clamp(3rem, 6vw, 5.5rem);
}
.faq-group > h2 {
    margin: 0 0 1rem;
    color: var(--ink);
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    letter-spacing: -0.045em;
}
.faq-item {
    border-top: 1px solid var(--line);
}
.faq-item:last-child {
    border-bottom: 1px solid var(--line);
}
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.35rem 0;
    cursor: pointer;
    color: var(--ink);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    font-weight: 650;
    list-style: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary i {
    display: grid;
    flex: 0 0 auto;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--accent);
    font-size: 0.9rem;
    transition:
        transform 0.28s ease,
        color 0.28s ease,
        background-color 0.28s ease;
}
.faq-item[open] summary i {
    color: #fff;
    background: var(--accent);
    transform: rotate(45deg);
}
.faq-item > div {
    max-width: 42rem;
    padding: 0 3.7rem 1.5rem 0;
}
.faq-item p {
    margin: 0;
    color: #657471;
    font-size: 0.9rem;
    line-height: 1.7;
}
@media (max-width: 991.98px) {
    .faq-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .faq-aside {
        position: static;
    }
}
@media (max-width: 575.98px) {
    .faq-item > div {
        padding-right: 0;
    }
    .faq-item summary {
        font-size: 0.98rem;
    }
}

.contact-path {
    padding: clamp(1.75rem, 4vw, 3rem);
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--paper);
}
.contact-path h2 {
    max-width: 14ch;
    margin: 1rem 0 1.2rem;
    color: var(--ink);
    font-size: clamp(2rem, 3.6vw, 3.35rem);
    line-height: 1;
    letter-spacing: -0.06em;
}
.contact-path > p {
    max-width: 31rem;
    margin: 0;
    color: #687875;
    line-height: 1.65;
}
.contact-path ol {
    display: grid;
    gap: 0.7rem;
    padding: 0;
    margin: 1.8rem 0;
    list-style: none;
}
.contact-path li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.8rem;
    align-items: baseline;
    color: var(--ink);
    font-size: 0.87rem;
    line-height: 1.45;
}
.contact-path li span {
    color: var(--accent);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.project-wizard-section {
    background: var(--paper);
}
.project-wizard-section .project-wizard-notice {
    width: 100%;
    max-width: none;
    margin: 0 auto 2rem;
    color: #0f5c63;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 750;
    line-height: 1.5;
    text-align: center;
}
.project-wizard {
    max-width: 52rem;
    margin: 0 auto;
    padding: clamp(1.7rem, 4vw, 3rem);
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #fff;
}
.project-wizard-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.project-wizard-head p {
    margin: 0;
    color: #71817e;
}
.project-progress {
    height: 2px;
    margin: 1.2rem 0 clamp(2rem, 5vw, 3.5rem);
    background: var(--line);
}
.project-progress i {
    display: block;
    width: 33.333%;
    height: 100%;
    background: var(--accent);
    transition: width 0.3s ease;
}
.project-wizard fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}
.project-wizard legend {
    max-width: 20ch;
    color: var(--ink);
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -0.055em;
}
.project-wizard fieldset > p {
    max-width: 36rem;
    margin: 1rem 0 2rem;
    color: #687875;
    line-height: 1.6;
}
.project-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}
.project-choice-grid label {
    cursor: pointer;
}
.project-choice-grid input {
    position: absolute;
    opacity: 0;
}
.project-choice-grid span {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 4.3rem;
    padding: 1rem;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: var(--paper);
    font-size: 0.88rem;
    font-weight: 700;
    transition:
        border-color 0.2s,
        background-color 0.2s,
        color 0.2s;
}
.project-choice-grid i {
    color: var(--accent);
    font-size: 1rem;
}
.project-choice-grid input:checked + span {
    color: #fff;
    border-color: var(--accent);
    background: var(--accent);
}
.project-choice-grid input:checked + span i {
    color: #fff;
}
.project-choice-grid input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.project-wizard-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}
.wizard-back {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0;
    color: var(--ink);
    border: 0;
    background: none;
    font-size: 0.82rem;
    font-weight: 750;
}
.project-wizard-result {
    margin: 1rem 0 0;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 700;
}
.project-wizard .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding-left: 0;
}
.project-wizard .form-check-input {
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0.08rem 0 0;
    appearance: none;
    border: 1px solid rgba(15, 92, 99, 0.46);
    border-radius: 0.28rem;
    background-color: var(--paper);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0;
    box-shadow: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        background-size 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}
.project-wizard .form-check-input:checked {
    border-color: var(--accent);
    background-color: var(--accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.15' d='m3.2 8.25 3.05 3.05L12.9 4.8'/%3E%3C/svg%3E");
    background-size: 0.88rem;
    transform: scale(1.04);
}
.project-wizard .form-check-input:focus-visible {
    outline: 2px solid rgba(15, 92, 99, 0.34);
    outline-offset: 3px;
}
.project-wizard .form-check-input.is-invalid {
    border-color: #b42318;
}
.project-wizard .form-check-label {
    color: var(--ink);
    cursor: pointer;
    line-height: 1.45;
}
.project-wizard .form-check-label a {
    color: var(--accent);
    text-underline-offset: 0.18em;
}
@media (max-width: 575.98px) {
    .project-choice-grid {
        grid-template-columns: 1fr;
    }
    .project-wizard-actions {
        align-items: stretch;
    }
    .project-wizard-actions .hero-primary-cta {
        flex: 1;
    }
}