/*FORM / FLOW — PREMIUM DESIGN STUDIO
styles.css
========================================================= */

/* =========================================================
Reset
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
p,
figure,
blockquote {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

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

button {
    border: 0;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a,
select,
input,
textarea {
    outline: none;
}

::selection {
    color: #fff;
    background: #202020;
}

/* =========================================================
Variables
========================================================= */

:root {
    /* Colors */
    --color-white: #ffffff;
    --color-marble: #f3f3f0;
    --color-marble-deep: #e9e9e5;
    --color-cloud: #e7e7e2;
    --color-soft-grey: #a6a6a0;
    --color-mid-grey: #686863;
    --color-charcoal: #20201e;
    --color-black: #0b0b0a;
    --color-black-soft: #151514;
    --color-border: rgba(255, 255, 255, 0.58);
    --color-border-dark: rgba(255, 255, 255, 0.16);

    /* Glass */
    --glass-light: rgba(255, 255, 255, 0.45);
    --glass-lighter: rgba(255, 255, 255, 0.58);
    --glass-dark: rgba(13, 13, 12, 0.68);

    /* Shadows */
    --shadow-glass:
        0 24px 70px rgba(40, 40, 36, 0.11),
        0 4px 18px rgba(40, 40, 36, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);

    --shadow-card:
        0 24px 60px rgba(31, 31, 28, 0.10),
        0 5px 20px rgba(31, 31, 28, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.68);

    --shadow-floating:
        0 35px 100px rgba(25, 25, 22, 0.17),
        0 10px 35px rgba(25, 25, 22, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);

    --shadow-dark:
        0 35px 100px rgba(0, 0, 0, 0.25),
        0 10px 35px rgba(0, 0, 0, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    /* Radius */
    --radius-sm: 14px;
    --radius-md: 24px;
    --radius-lg: 32px;
    --radius-xl: 40px;
    --radius-round: 999px;

    /* Spacing */
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;
    --space-8: 6rem;
    --space-9: 8rem;
    --space-10: 11rem;

    /* Layout */
    --container: 1440px;
    --gutter: clamp(1.25rem, 4vw, 4.5rem);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 180ms var(--ease-out);
    --transition-base: 420ms var(--ease-out);
    --transition-slow: 800ms var(--ease-smooth);
}

/* =========================================================
Global
========================================================= */

body {
    min-width: 320px;
    color: var(--color-charcoal);
    background:
        radial-gradient(ellipse at 15% 15%,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(255, 255, 255, 0) 36%),
        radial-gradient(ellipse at 82% 30%,
            rgba(216, 216, 211, 0.36) 0%,
            rgba(216, 216, 211, 0) 34%),
        linear-gradient(135deg,
            #fafaf8 0%,
            #f1f1ee 42%,
            #f8f8f5 70%,
            #eaeae6 100%);
    font-family:
        Inter,
        Manrope,
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/*
REAL MARBLE TEXTURE:
For production, replace or layer the body background with:
url("/assets/marble-white.avif") center / cover fixed;
Prefer an optimized AVIF/WebP texture with low visual contrast.
*/

body::before {
    position: fixed;
    z-index: -2;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: 0.22;
    background:
        linear-gradient(117deg,
            transparent 0 24%,
            rgba(90, 90, 84, 0.055) 25%,
            transparent 27% 44%,
            rgba(255, 255, 255, 0.7) 45%,
            transparent 49% 100%),
        linear-gradient(63deg,
            transparent 0 41%,
            rgba(80, 80, 76, 0.045) 42%,
            transparent 44% 67%,
            rgba(100, 100, 96, 0.035) 68%,
            transparent 70%);
    background-size: 720px 720px, 940px 940px;
    transform: rotate(-4deg) scale(1.2);
}

body::after {
    position: fixed;
    z-index: -1;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: 0.16;
    background-image:
        radial-gradient(circle at 20% 30%,
            rgba(0, 0, 0, 0.08) 0 0.6px,
            transparent 0.8px),
        radial-gradient(circle at 70% 70%,
            rgba(255, 255, 255, 0.8) 0 0.7px,
            transparent 0.9px);
    background-size: 8px 8px, 11px 11px;
    mix-blend-mode: soft-light;
}

main {
    position: relative;
}

section {
    position: relative;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 9999;
    top: 1rem;
    left: 1rem;
    padding: 0.8rem 1rem;
    color: #fff;
    background: var(--color-black);
    border-radius: var(--radius-round);
    transform: translateY(-150%);
    transition: transform var(--transition-fast);
}

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

.eyebrow,
.card-label,
.footer-label {
    color: var(--color-mid-grey);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.3;
    text-transform: uppercase;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.eyebrow::before {
    width: 24px;
    height: 1px;
    content: "";
    background: currentColor;
}

.eyebrow--light {
    color: rgba(255, 255, 255, 0.56);
}

.eyebrow--light::before {
    background: rgba(255, 255, 255, 0.56);
}

/* =========================================================
Navigation
========================================================= */

.site-header {
    position: fixed;
    z-index: 1000;
    top: 1.25rem;
    right: 0;
    left: 0;
    padding: 0 var(--gutter);
    pointer-events: none;
}


.navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(100%, 1280px);
    min-height: 68px;
    margin: 0 auto;
    padding: 0.55rem 0.65rem 0.55rem 1.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(120deg,
            rgba(0, 0, 0, 0.5),
            rgba(0, 0, 0, 0.32));
    box-shadow: var(--shadow-glass);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    pointer-events: auto;
}

.navigation::before {
    content: '';
    position: absolute;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 0 0,
            rgba(0, 0, 0, 0.5),
            transparent,
            rgba(0, 0, 0, 0.32),
            transparent,
            rgba(0, 0, 0, 0.5));
    width: calc(100% + 4px);
    height: calc(100% + 4px);

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

.brand {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-white);
}

.brand__mark {
    position: relative;
    display: inline-flex;
    width: clamp(70px, 6.2vw, 84.5px);
    height: auto;
    /* padding: 0px 3px;*/
    object-fit: contain;
    /*flex: 0 0 auto;*/
    filter: drop-shadow(0 0 5px rgba(252, 252, 252, 0.18)) drop-shadow(0 0 7px rgba(255, 255, 255, 0.349));
    align-items: center;
    justify-content: center;
}

/*        .brand__mark span {
            position: absolute;
            display: block;
            border: 1.5px solid currentColor;
            border-radius: 50% 50% 45% 45%;
            transform: rotate(45deg);
        }

        .brand__mark span:first-child {
            transform: rotate(45deg) translate(-2px, -2px);
        }

        .brand__mark span:last-child {
            transform: rotate(225deg) translate(-2px, -2px);
        }
*/
.brand__name {
    font-size: 0.83rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

.navigation__links {
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 1.5vw, 1.25rem);
    margin-inline: auto;
    padding-inline: 2rem;
}

.navigation__links a {
    position: relative;

    padding: 0.5rem clamp(12px, 0.5vw, 15px);

    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition: color var(--transition-fast);
    border-radius: 10px;
    z-index: 3;
    overflow: hidden;
}

.navigation__links a::before {
    content: "";

    position: absolute;
    inset: -130%;

    /* transform: translate(-50%, -50%);*/

    background: conic-gradient(from 0deg,
            #56c1ff 0deg,
            rgba(0, 35, 100, 0.8) 120deg,
            transparent 180deg,
            #56c1ff 220deg,
            rgba(0, 35, 100, 0.8) 290deg,
            transparent);

    opacity: 0;
    z-index: -2;

    transform: 0deg;
    animation: nav_rot 4s linear infinite paused;

    transition: opacity 0.35s ease;
}

.navigation__links a::after {
    content: "";

    position: absolute;
    inset: 2px;

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.9);

    opacity: 0;
    z-index: -1;

    transition:
        opacity 0.35s ease,
        background 0.55s ease;
}

.navigation__links a:hover,
.navigation__links a:focus-visible {
    color: var(--color-black);
}

.navigation__links a:hover::before,
.navigation__links a:hover::after,
.navigation__links a:focus-visible::after {
    opacity: 1;
    animation-play-state: running;
}

/* Border rotation */

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

/*
.navigation__action {
    position: relative;
    display: grid;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    box-shadow:
        0 5px 18px rgba(30, 30, 28, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
    transition:
        transform var(--transition-base),
        background var(--transition-base);
}

.navigation__action::before,
.navigation__action::after,
.navigation__action span {
    position: absolute;
    width: 13px;
    height: 1px;
    content: "";
    background: var(--color-black);
    transition: transform var(--transition-base);
}

.navigation__action::before {
    transform: translateY(-4px);
}

.navigation__action::after {
    transform: translateY(4px);
}

.navigation__action:hover,
.navigation__action:focus-visible {
    background: rgba(255, 255, 255, 0.82);
    transform: rotate(8deg) scale(1.06);
}

.navigation__action:hover::before,
.navigation__action:focus-visible::before {
    transform: rotate(45deg);
}

.navigation__action:hover::after,
.navigation__action:focus-visible::after {
    transform: rotate(-45deg);
}
*/

.navigation__action {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 20px 0 0;
    margin-right: 5px;
}

.contact__btn,
.navigation_action_btn {
    background: var(--color-charcoal);
    color: var(--color-white);
    box-shadow:
        0 5px 18px rgba(30, 30, 28, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);

}

.contact__btn {
    position: relative;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.13em;

    padding: 7px 15px 5px;
    z-index: 1;
    opacity: 1;
    transition:
        transform var(--transition-base),
        background var(--transition-base),
        opacity var(--transition-base);
}

.navigation__action:hover .contact__btn {
    transform: rotate(360deg) scale(0);
    opacity: 0;

}

.navigation_action_btn {
    position: absolute;
    left: 30%;
    transform: scale(0.0);
    display: grid;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    opacity: 1;
    transition:
        transform var(--transition-slow),
        opacity var(--transition-slow);

    z-index: 2;
}



.navigation__action:hover .navigation_action_btn {
    transform: scale(1.3) rotate(405deg);
    opacity: 1;
}


/* =========================================================
Hero
========================================================= */

.hero {
    display: flex;
    min-height: 100svh;
    padding:
        clamp(9rem, 15vh, 12rem) var(--gutter) clamp(5rem, 10vh, 8rem);
    isolation: isolate;
    overflow: hidden;
}

.hero__content {
    position: relative;
    z-index: 5;
    display: flex;
    width: min(100%, var(--container));
    min-height: calc(100svh - 14rem);
    margin: auto;
    flex-direction: column;
    justify-content: center;
}

.hero__content>.eyebrow {
    align-self: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.hero__title {
    max-width: 1250px;
    margin-inline: auto;
    color: var(--color-charcoal);
    font-size: clamp(5rem, 13.5vw, 13rem);
    font-weight: 600;
    letter-spacing: -0.085em;
    line-height: 0.77;
    text-align: center;
    text-transform: uppercase;
}

.hero__title span {
    display: block;
}

.hero__title span:last-child {
    margin-left: 9vw;
}

.hero__lower {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    width: 100%;
    margin-top: clamp(3rem, 6vw, 5.5rem);
}

.hero__description {
    width: min(100%, 340px);
    color: #60605b;
    font-size: 0.88rem;
    line-height: 1.75;
}

.circle-cta {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    color: var(--color-black);
    background:
        radial-gradient(circle at 30% 22%,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(255, 255, 255, 0.66) 25%,
            rgba(207, 207, 202, 0.5) 55%,
            rgba(170, 170, 164, 0.52) 100%);
    box-shadow:
        0 25px 65px rgba(44, 44, 40, 0.18),
        0 8px 22px rgba(44, 44, 40, 0.09),
        inset 8px 8px 20px rgba(255, 255, 255, 0.65),
        inset -8px -8px 22px rgba(105, 105, 99, 0.13);
    isolation: isolate;
    transition:
        transform 650ms var(--ease-out),
        box-shadow 650ms var(--ease-out);
}

.circle-cta::before {
    position: absolute;
    z-index: -1;
    inset: 12%;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.72),
            rgba(255, 255, 255, 0) 68%);
    opacity: 0.8;
}

.circle-cta span {
    position: relative;
    z-index: 2;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.circle-cta svg {
    position: absolute;
    right: 18%;
    bottom: 16%;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
    transition: transform var(--transition-base);
}

.circle-cta--hero {
    width: clamp(150px, 17vw, 220px);
    aspect-ratio: 1;
    grid-column: 2;
    justify-self: center;
}

.circle-cta:hover,
.circle-cta:focus-visible {
    box-shadow:
        0 35px 80px rgba(44, 44, 40, 0.22),
        0 12px 28px rgba(44, 44, 40, 0.12),
        inset 8px 8px 20px rgba(255, 255, 255, 0.72),
        inset -8px -8px 22px rgba(105, 105, 99, 0.17);
    transform: scale(1.07) rotate(6deg);
}

.circle-cta:hover svg,
.circle-cta:focus-visible svg {
    transform: translate(3px, -3px);
}

.hero__meta {
    position: absolute;
    z-index: 5;
    right: var(--gutter);
    bottom: 2rem;
    left: var(--gutter);
    display: flex;
    justify-content: space-between;
    color: rgba(50, 50, 46, 0.48);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero__atmosphere {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* =========================================================
Organic Shapes
========================================================= */

/*
TEMPORARY 3D / WEBGL PLACEHOLDERS

Replace these generated shapes with real WebGL, canvas,
transparent AVIF/WebP renders, or another production 3D asset.
Keep the layer behind all interface content.
*/

.ribbon {
    position: absolute;
    display: block;
    pointer-events: none;
    user-select: none;
    filter: blur(0.2px);
    opacity: 0.68;
    transform-origin: center;
}

.ribbon--primary {
    top: 10%;
    right: -8%;
    width: min(50vw, 760px);
    height: min(50vw, 760px);
    border-radius:
        67% 33% 49% 51% / 40% 55% 45% 60%;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(224, 224, 219, 0.72) 24%,
            rgba(173, 173, 167, 0.5) 43%,
            rgba(248, 248, 245, 0.88) 59%,
            rgba(193, 193, 187, 0.42) 77%,
            rgba(255, 255, 255, 0.8) 100%);
    box-shadow:
        inset 35px 35px 70px rgba(255, 255, 255, 0.74),
        inset -30px -30px 65px rgba(80, 80, 75, 0.08),
        0 50px 120px rgba(75, 75, 69, 0.1);
    transform: rotate(-24deg);
}

.ribbon--primary::before {
    position: absolute;
    inset: 17% -6% 17% 17%;
    content: "";
    border: 22px solid rgba(255, 255, 255, 0.45);
    border-radius: 72% 28% 58% 42%;
    box-shadow:
        inset 15px 10px 30px rgba(255, 255, 255, 0.55),
        10px 15px 30px rgba(75, 75, 69, 0.08);
}

.ribbon--primary::after {
    position: absolute;
    right: 13%;
    bottom: 20%;
    width: 25%;
    height: 42%;
    content: "";
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    filter: blur(25px);
}

.ribbon--secondary {
    top: 18%;
    left: -14%;
    width: min(38vw, 570px);
    height: min(62vw, 820px);
    border-radius:
        56% 44% 65% 35% / 35% 62% 38% 65%;
    background:
        linear-gradient(155deg,
            rgba(255, 255, 255, 0.72),
            rgba(205, 205, 199, 0.44) 45%,
            rgba(245, 245, 241, 0.8) 70%,
            rgba(167, 167, 161, 0.3));
    box-shadow:
        inset 25px 25px 50px rgba(255, 255, 255, 0.7),
        inset -35px -20px 50px rgba(90, 90, 84, 0.08);
    transform: rotate(34deg);
}

.ribbon--tertiary {
    right: 23%;
    bottom: -18%;
    width: min(28vw, 430px);
    height: min(48vw, 680px);
    border-radius: 52% 48% 38% 62% / 65% 40% 60% 35%;
    background:
        linear-gradient(120deg,
            rgba(255, 255, 255, 0.82),
            rgba(186, 186, 180, 0.38) 40%,
            rgba(255, 255, 255, 0.65) 66%,
            rgba(151, 151, 145, 0.25));
    box-shadow:
        inset 20px 25px 45px rgba(255, 255, 255, 0.65),
        0 40px 80px rgba(70, 70, 65, 0.08);
    transform: rotate(23deg);
}

.ribbon--orb {
    top: 34%;
    left: 37%;
    width: clamp(90px, 9vw, 150px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 23%,
            #ffffff 0%,
            #eeeeeb 20%,
            #c6c6c0 48%,
            #f8f8f5 66%,
            #b4b4ae 100%);
    box-shadow:
        15px 20px 45px rgba(65, 65, 60, 0.15),
        inset 12px 12px 25px rgba(255, 255, 255, 0.75),
        inset -15px -15px 28px rgba(80, 80, 74, 0.1);
    opacity: 0.52;
}

/* =========================================================
Feature Cards
========================================================= */

.feature-grid {
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    width: min(calc(100% - (var(--gutter) * 2)), 1320px);
    margin: -2rem auto 0;
}

.section-intro--compact {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.feature-card {
    position: relative;
    display: flex;
    min-height: 300px;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.67),
            rgba(255, 255, 255, 0.3));
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}

.feature-card::before {
    position: absolute;
    top: 0;
    left: 12%;
    width: 60%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.9),
            transparent);
}

.feature-card::after {
    position: absolute;
    right: -15%;
    bottom: -35%;
    width: 55%;
    aspect-ratio: 1;
    content: "";
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.38);
    filter: blur(40px);
    pointer-events: none;
}

.feature-card:hover {
    border-color: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-floating);
    transform: translateY(-10px);
}

.feature-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.feature-card__number {
    color: rgba(30, 30, 28, 0.45);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.feature-card__icon {
    width: 48px;
    height: 48px;
    color: #474742;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.15;
    transition: transform var(--transition-base);
}

.feature-card:hover .feature-card__icon {
    transform: rotate(10deg) scale(1.05);
}

.feature-card__body {
    margin-top: auto;
    padding-top: 4rem;
}

.feature-card__body h3 {
    max-width: 300px;
    font-size: clamp(1.4rem, 2vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1;
    text-transform: uppercase;
}

.feature-card__body p {
    max-width: 310px;
    margin-top: 0.9rem;
    color: #686863;
    font-size: 0.83rem;
    line-height: 1.65;
}

.feature-card__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(30, 30, 28, 0.1);
    color: #3c3c38;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.feature-card__link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
    transition: transform var(--transition-base);
}

.feature-card__link:hover svg,
.feature-card__link:focus-visible svg {
    transform: translate(3px, -3px);
}

/* =========================================================
Editorial Section
========================================================= */

.editorial-section {
    width: min(calc(100% - (var(--gutter) * 2)), 1320px);
    margin: 0 auto;
    padding: var(--space-10) 0;
}

.editorial-heading {
    display: grid;
    grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1.7fr);
    column-gap: clamp(2rem, 7vw, 8rem);
    align-items: end;
    margin-bottom: clamp(4rem, 8vw, 8rem);
}

.editorial-heading .eyebrow {
    align-self: start;
    padding-top: 0.8rem;
}

.editorial-heading h2 {
    grid-column: 2;
    max-width: 980px;
    font-size: clamp(3.5rem, 8.5vw, 8rem);
    font-weight: 500;
    letter-spacing: -0.075em;
    line-height: 0.85;
    text-transform: uppercase;
}

.editorial-heading h2 span {
    display: block;
    color: #8a8a84;
}

.editorial-heading__description {
    grid-column: 2;
    max-width: 500px;
    margin-top: 2.2rem;
    color: #686863;
    font-size: 0.88rem;
    line-height: 1.8;
}

.editorial-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.editorial-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.62),
            rgba(255, 255, 255, 0.27));
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.editorial-card--large {
    grid-column: 1 / span 7;
}

.editorial-card--medium {
    grid-column: 9 / span 4;
    margin-top: 7rem;
}

.editorial-card--wide {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    grid-column: 3 / span 10;
    margin-top: 1rem;
}

.editorial-card__visual {
    position: relative;
    min-height: 340px;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.65),
            rgba(213, 213, 207, 0.32));
}

.editorial-card__visual::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(125deg,
            transparent 30%,
            rgba(255, 255, 255, 0.35) 50%,
            transparent 65%);
}

.editorial-card__visual--fluid {
    min-height: 460px;
}

.editorial-card__visual--fluid span:first-child {
    position: absolute;
    top: 8%;
    left: 12%;
    width: 55%;
    height: 80%;
    border-radius: 60% 40% 45% 55% / 35% 58% 42% 65%;
    background:
        linear-gradient(145deg,
            #ffffff,
            #d5d5cf 45%,
            #f5f5f2 65%,
            #b5b5ae);
    box-shadow:
        inset 20px 25px 35px rgba(255, 255, 255, 0.75),
        inset -25px -20px 35px rgba(90, 90, 84, 0.1),
        20px 35px 55px rgba(60, 60, 55, 0.1);
    transform: rotate(-20deg);
}

.editorial-card__visual--fluid span:last-child {
    position: absolute;
    right: 4%;
    bottom: -18%;
    width: 55%;
    height: 55%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%,
            #ffffff,
            #d0d0ca 60%,
            #aaa9a3);
    box-shadow:
        inset 15px 15px 25px rgba(255, 255, 255, 0.7),
        15px 20px 35px rgba(70, 70, 65, 0.1);
}

.editorial-card__visual--resonance {
    min-height: 330px;
}

.editorial-card__visual--resonance span {
    position: absolute;
    display: block;
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 22%,
            #ffffff,
            #d0d0ca 55%,
            #a7a7a0);
    box-shadow:
        inset 10px 10px 22px rgba(255, 255, 255, 0.7),
        10px 20px 30px rgba(50, 50, 46, 0.08);
}

.editorial-card__visual--resonance span:nth-child(1) {
    top: 14%;
    left: 12%;
    width: 47%;
    aspect-ratio: 1;
}

.editorial-card__visual--resonance span:nth-child(2) {
    right: 8%;
    bottom: 9%;
    width: 42%;
    aspect-ratio: 1;
    opacity: 0.72;
}

.editorial-card__visual--resonance span:nth-child(3) {
    top: 31%;
    right: 24%;
    width: 22%;
    aspect-ratio: 1;
    opacity: 0.5;
}

.editorial-card__visual--legacy {
    min-height: 100%;
}

.editorial-card__visual--legacy div {
    position: absolute;
    top: 12%;
    right: 18%;
    width: 45%;
    height: 75%;
    border: 1px solid rgba(70, 70, 65, 0.2);
    border-radius: 50% 50% 42% 58%;
    transform: rotate(30deg);
    box-shadow:
        inset 15px 15px 25px rgba(255, 255, 255, 0.55),
        15px 25px 45px rgba(60, 60, 55, 0.08);
}

.editorial-card__visual--legacy div::after {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 70%;
    height: 70%;
    content: "";
    border: 1px solid rgba(70, 70, 65, 0.12);
    border-radius: 50%;
}

.editorial-card__content {
    padding: clamp(1.5rem, 3vw, 3rem);
}

.editorial-card__content h3 {
    max-width: 680px;
    margin-top: 1.4rem;
    font-size: clamp(1.7rem, 3.2vw, 3.3rem);
    font-weight: 550;
    letter-spacing: -0.055em;
    line-height: 0.95;
    text-transform: uppercase;
}

.editorial-card--medium .editorial-card__content h3 {
    font-size: clamp(1.5rem, 2.4vw, 2.5rem);
}

.editorial-card__content h3 sup {
    color: #8d8d87;
    font-size: 0.36em;
    font-weight: 600;
    letter-spacing: 0;
    vertical-align: top;
}

.editorial-card__content>p:not(.card-label) {
    max-width: 580px;
    margin-top: 1.5rem;
    color: #656560;
    font-size: 0.84rem;
    line-height: 1.8;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    color: var(--color-black);
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.text-link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
    transition: transform var(--transition-base);
}

.text-link:hover svg,
.text-link:focus-visible svg {
    transform: translate(4px, -4px);
}

.editorial-card__stats {
    display: flex;
    gap: clamp(1.5rem, 5vw, 4rem);
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(30, 30, 28, 0.1);
}

.editorial-card__stats span {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.editorial-card__stats strong {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.05em;
}

.editorial-card__stats small {
    color: #777771;
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* =========================================================
Services
========================================================= */

.services-section {
    width: min(calc(100% - (var(--gutter) * 2)), 1320px);
    margin: 0 auto;
    padding: var(--space-9) 0;
}

.services-section__header {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: end;
    padding-bottom: 5rem;
}

.services-section__header h2 {
    margin-top: 1.5rem;
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: 500;
    letter-spacing: -0.075em;
    line-height: 0.88;
    text-transform: uppercase;
}

.services-section__header>p {
    max-width: 400px;
    padding-bottom: 0.5rem;
    color: #696963;
    font-size: 0.88rem;
    line-height: 1.8;
}

.services-list {
    border-top: 1px solid rgba(30, 30, 28, 0.15);
}

.service-row {
    display: grid;
    grid-template-columns: 0.25fr 1.5fr 1.25fr 40px;
    gap: 2rem;
    align-items: center;
    min-height: 125px;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(30, 30, 28, 0.12);
    transition:
        padding var(--transition-base),
        background var(--transition-base);
}

.service-row:hover {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.25);
}

.service-row__number {
    color: #888881;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.service-row h3 {
    font-size: clamp(1.4rem, 2.3vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.service-row p {
    max-width: 390px;
    color: #777771;
    font-size: 0.79rem;
    line-height: 1.65;
}

.service-row__arrow {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(30, 30, 28, 0.14);
    border-radius: 50%;
    color: #3d3d39;
    font-size: 0.9rem;
    transition:
        transform var(--transition-base),
        background var(--transition-base);
}

.service-row:hover .service-row__arrow {
    background: rgba(255, 255, 255, 0.45);
    transform: translate(2px, -2px) rotate(5deg);
}

/* =========================================================
Dark Panel
========================================================= */

.collective-section {
    width: min(calc(100% - (var(--gutter) * 2)), 1320px);
    margin: 0 auto;
    padding: var(--space-9) 0;
}

.collective-panel {
    position: relative;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-rows: 1fr auto;
    min-height: 700px;
    padding: clamp(2rem, 5vw, 5rem);
    overflow: hidden;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-xl);
    color: #fff;
    background:
        linear-gradient(135deg,
            rgba(28, 28, 26, 0.83),
            rgba(8, 8, 7, 0.68));
    box-shadow: var(--shadow-dark);
    backdrop-filter: blur(28px) saturate(110%);
    -webkit-backdrop-filter: blur(28px) saturate(110%);
    isolation: isolate;
}

.collective-panel::before {
    position: absolute;
    z-index: -1;
    top: -30%;
    right: -15%;
    width: 65%;
    aspect-ratio: 1;
    content: "";
    border-radius: 50%;
    background:
        radial-gradient(circle,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0) 68%);
    filter: blur(12px);
}

.collective-panel::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    border-radius: inherit;
    background:
        linear-gradient(120deg,
            transparent 0 38%,
            rgba(255, 255, 255, 0.035) 48%,
            transparent 60%);
    pointer-events: none;
}

.collective-panel__visual {
    position: relative;
    min-height: 480px;
}

.collective-panel__glow {
    position: absolute;
    top: 22%;
    left: 12%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    filter: blur(60px);
}

.profile-orbit {
    position: absolute;
    display: grid;
    place-items: center;
    width: clamp(100px, 13vw, 180px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 50%;
}

.profile-orbit--one {
    top: 13%;
    left: 3%;
}

.profile-orbit--two {
    top: 38%;
    left: 30%;
    width: clamp(130px, 16vw, 220px);
}

.profile-orbit--three {
    right: 2%;
    bottom: 7%;
    width: clamp(90px, 11vw, 155px);
}

.profile-placeholder {
    width: 72%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 24%,
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.07) 45%,
            rgba(0, 0, 0, 0.24));
    box-shadow:
        inset 10px 10px 25px rgba(255, 255, 255, 0.06),
        10px 15px 30px rgba(0, 0, 0, 0.25);
}

.collective-panel__content {
    position: relative;
    z-index: 2;
    align-self: center;
    max-width: 650px;
    padding-left: clamp(0rem, 3vw, 3rem);
}

.collective-panel__content h2 {
    margin-top: 2rem;
    font-size: clamp(3rem, 6vw, 6.3rem);
    font-weight: 500;
    letter-spacing: -0.075em;
    line-height: 0.87;
    text-transform: uppercase;
}

.collective-panel__content h2 span {
    color: rgba(255, 255, 255, 0.4);
}

.collective-panel__description {
    max-width: 470px;
    margin-top: 2.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.84rem;
    line-height: 1.8;
}

.outline-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.outline-link svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.3;
    transition: transform var(--transition-base);
}

.outline-link:hover svg,
.outline-link:focus-visible svg {
    transform: translate(4px, -4px);
}

.collective-panel__stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.collective-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.collective-stat strong {
    font-size: clamp(1.6rem, 3vw, 2.7rem);
    font-weight: 500;
    letter-spacing: -0.06em;
}

.collective-stat span {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* =========================================================
CTA
========================================================= */

.cta-section {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(2rem, 8vw, 8rem);
    align-items: center;
    width: min(calc(100% - (var(--gutter) * 2)), 1320px);
    min-height: 760px;
    margin: 0 auto;
    padding: var(--space-10) 0;
    isolation: isolate;
}

.cta-section__content {
    position: relative;
    z-index: 3;
    max-width: 1050px;
}

.cta-section__content h2 {
    margin-top: 2rem;
    font-size: clamp(4rem, 9vw, 9.5rem);
    font-weight: 500;
    letter-spacing: -0.09em;
    line-height: 0.8;
    text-transform: uppercase;
}

.cta-section__content h2 span {
    display: block;
    color: #8c8c86;
}

.cta-section__content>p:last-child {
    max-width: 450px;
    margin-top: 3rem;
    color: #6c6c66;
    font-size: 0.88rem;
    line-height: 1.8;
}

.circle-cta--large {
    z-index: 4;
    width: clamp(190px, 20vw, 310px);
    aspect-ratio: 1;
}

.circle-cta--large span {
    font-size: clamp(0.75rem, 1vw, 0.9rem);
}

.circle-cta--large svg {
    width: 22px;
    height: 22px;
}

.cta-section__shape {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.cta-section__shape--one {
    top: 20%;
    right: 2%;
    width: 30vw;
    max-width: 450px;
    aspect-ratio: 1;
    background:
        radial-gradient(circle at 30% 25%,
            rgba(255, 255, 255, 0.7),
            rgba(206, 206, 201, 0.22) 50%,
            rgba(255, 255, 255, 0) 72%);
    filter: blur(4px);
}

.cta-section__shape--two {
    right: 30%;
    bottom: 6%;
    width: 180px;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(35px);
}

/* =========================================================
Contact Form
========================================================= */

.contact-section {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(3rem, 9vw, 9rem);
    width: min(calc(100% - (var(--gutter) * 2)), 1320px);
    margin: 0 auto;
    padding: var(--space-9) 0 var(--space-10);
    align-items: center;
}

.contact-intro {
    padding-left: clamp(0rem, 3vw, 3rem);
}

.contact-intro h2 {
    max-width: 600px;
    margin-top: 1.8rem;
    font-size: clamp(3rem, 5.8vw, 6rem);
    font-weight: 500;
    letter-spacing: -0.075em;
    line-height: 0.86;
    text-transform: uppercase;
}

.contact-intro h2 span {
    display: block;
    color: #8b8b85;
}

.contact-intro>p {
    max-width: 400px;
    margin-top: 2rem;
    color: #696963;
    font-size: 0.86rem;
    line-height: 1.8;
}

.contact-email {
    display: inline-block;
    margin-top: 2rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(30, 30, 28, 0.25);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.contact-email:hover,
.contact-email:focus-visible {
    color: #777771;
    border-color: currentColor;
}

.contact-form-card {
    position: relative;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.7),
            rgba(255, 255, 255, 0.31));
    box-shadow: var(--shadow-floating);
    backdrop-filter: blur(28px) saturate(130%);
    -webkit-backdrop-filter: blur(28px) saturate(130%);
}

.contact-form-card::before {
    position: absolute;
    top: 0;
    right: 15%;
    left: 15%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.95),
            transparent);
}

form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem 1.3rem;
}

.form-field {
    position: relative;
}

.form-field--message {
    grid-column: 1 / -1;
}

.form-field label {
    display: block;
    margin-bottom: 0.7rem;
    color: #4e4e49;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(30, 30, 28, 0.18);
    border-radius: 0;
    outline: 0;
    color: var(--color-charcoal);
    background: transparent;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.form-field input,
.form-field select {
    min-height: 48px;
}

.form-field textarea {
    min-height: 130px;
    padding-top: 0.7rem;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: rgba(90, 90, 84, 0.48);
}

.form-field select {
    color: #70706a;
    cursor: pointer;
}

.form-field select:invalid {
    color: rgba(90, 90, 84, 0.48);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #3c3c38;
    box-shadow: 0 1px 0 #3c3c38;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
    outline: 2px solid rgba(30, 30, 28, 0.22);
    outline-offset: 5px;
}

.form-submit {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 0.5rem;
}

.form-submit p {
    max-width: 260px;
    color: #81817a;
    font-size: 0.62rem;
    line-height: 1.6;
}

.submit-button {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 0 1.5rem 0 1.7rem;
    border: 1px solid rgba(30, 30, 28, 0.08);
    border-radius: var(--radius-round);
    color: #fff;
    background: var(--color-black);
    box-shadow:
        0 12px 25px rgba(15, 15, 14, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: pointer;
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        background var(--transition-fast);
}

.submit-button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
    transition: transform var(--transition-base);
}

.submit-button:hover,
.submit-button:focus-visible {
    box-shadow:
        0 18px 35px rgba(15, 15, 14, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transform: translateY(-3px);
}

.submit-button:hover svg,
.submit-button:focus-visible svg {
    transform: translate(3px, -3px);
}

.submit-button:active {
    box-shadow:
        0 7px 15px rgba(15, 15, 14, 0.14),
        inset 0 2px 3px rgba(0, 0, 0, 0.2);
    transform: translateY(1px) scale(0.98);
}

/* =========================================================
Footer
========================================================= */

.site-footer {
    width: min(calc(100% - (var(--gutter) * 2)), 1320px);
    margin: 0 auto;
    padding: 0 0 2rem;
}

.site-footer__main {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto;
    gap: 4rem;
    padding: clamp(2rem, 4vw, 3.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.54),
            rgba(255, 255, 255, 0.22));
    box-shadow:
        0 18px 50px rgba(40, 40, 36, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.footer-brand {
    max-width: 330px;
}

.brand--footer {
    margin-bottom: 1.5rem;
}

.footer-brand>p {
    color: #777771;
    font-size: 0.76rem;
    line-height: 1.75;
}

.footer-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 3rem;
}

.footer-navigation__group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
}

.footer-label {
    margin-bottom: 0.4rem;
    color: #8b8b85;
}

.footer-navigation__group a {
    color: #4c4c47;
    font-size: 0.72rem;
    transition: color var(--transition-fast);
}

.footer-navigation__group a:hover,
.footer-navigation__group a:focus-visible {
    color: var(--color-black);
}

.back-to-top {
    display: inline-flex;
    height: 48px;
    align-items: center;
    gap: 0.7rem;
    align-self: start;
    padding: 0 1rem;
    border: 1px solid rgba(30, 30, 28, 0.12);
    border-radius: var(--radius-round);
    color: #50504b;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition:
        background var(--transition-fast),
        transform var(--transition-base);
}

.back-to-top svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
}

.back-to-top:hover,
.back-to-top:focus-visible {
    background: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 0.5rem 0;
    color: #8a8a84;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-transform: uppercase;
}

/* =========================================================
Responsive
========================================================= */

@media (max-width: 1100px) {
    :root {
        --space-10: 9rem;
    }

    .navigation {
        width: min(100%, 900px);
    }

    .navigation__links {
        gap: 1.35rem;
        padding-inline: 1rem;
    }

    .hero__title {
        font-size: clamp(4.8rem, 13vw, 9.5rem);
    }

    .editorial-heading {
        grid-template-columns: 0.35fr 1.65fr;
    }

    .editorial-card--medium {
        margin-top: 4rem;
    }

    .collective-panel {
        min-height: 640px;
    }

    .cta-section {
        min-height: 650px;
    }

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

    .back-to-top {
        justify-self: end;
    }
}

@media (max-width: 820px) {
    :root {
        --space-9: 6rem;
        --space-10: 7rem;
    }

    .site-header {
        top: 0.8rem;
    }

    .navigation {
        min-height: 60px;
        padding-left: 1rem;
    }

    .navigation__links {
        gap: 1rem;
    }

    .navigation__links a {
        font-size: 0.57rem;
        letter-spacing: 0.09em;
    }

    .navigation__action {
        width: 42px;
        height: 42px;
    }

    .hero {
        min-height: 850px;
    }

    .hero__content {
        min-height: 700px;
    }

    .hero__title {
        font-size: clamp(4.4rem, 15vw, 8rem);
    }

    .hero__lower {
        grid-template-columns: 1fr auto;
        gap: 2rem;
    }

    .hero__description {
        align-self: end;
    }

    .circle-cta--hero {
        grid-column: 2;
    }

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

    .feature-card:last-child {
        grid-column: 1 / -1;
    }

    .editorial-heading {
        display: block;
    }

    .editorial-heading .eyebrow {
        margin-bottom: 2rem;
    }

    .editorial-heading h2 {
        max-width: 850px;
    }

    .editorial-heading__description {
        margin-left: 15%;
    }

    .editorial-card--large {
        grid-column: 1 / span 8;
    }

    .editorial-card--medium {
        grid-column: 9 / span 4;
        margin-top: 3rem;
    }

    .editorial-card--wide {
        grid-column: 2 / -1;
    }

    .editorial-card__visual--fluid {
        min-height: 380px;
    }

    .services-section__header {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .services-section__header>p {
        max-width: 500px;
        margin-left: 15%;
    }

    .service-row {
        grid-template-columns: 0.2fr 1.2fr 1fr 40px;
        gap: 1rem;
    }

    .collective-panel {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: 0;
    }

    .collective-panel__visual {
        min-height: 390px;
        order: 2;
    }

    .collective-panel__content {
        order: 1;
        padding-left: 0;
    }

    .collective-panel__stats {
        order: 3;
        grid-column: 1;
    }

    .cta-section {
        grid-template-columns: 1fr;
        min-height: 650px;
        align-items: center;
    }

    .circle-cta--large {
        justify-self: end;
        margin-top: -2rem;
    }

    .contact-section {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .contact-intro {
        padding-left: 0;
    }
}

@media (max-width: 620px) {
    :root {
        --gutter: 1rem;
        --space-8: 4rem;
        --space-9: 5rem;
        --space-10: 6rem;
    }

    body {
        font-size: 15px;
    }

    .site-header {
        top: 0.6rem;
        padding: 0 0.75rem;
    }

    .navigation {
        min-height: 56px;
        padding: 0.45rem 0.5rem 0.45rem 0.85rem;
    }

    .brand__mark {
        width: 24px;
        height: 24px;
    }

    .brand__mark span {
        width: 13px;
        height: 21px;
    }

    .brand__name {
        font-size: 0.61rem;
        letter-spacing: 0.11em;
    }

    .navigation__links {
        display: none;
    }

    .navigation__action {
        width: 40px;
        height: 40px;
    }

    .hero {
        min-height: 820px;
        padding-top: 8rem;
        padding-bottom: 3rem;
    }

    .hero__content {
        min-height: 680px;
        justify-content: center;
    }

    .hero__content>.eyebrow {
        align-self: flex-start;
        margin-left: 0.25rem;
    }

    .hero__title {
        width: 100%;
        font-size: clamp(3.8rem, 18vw, 6rem);
        line-height: 0.8;
        text-align: left;
    }

    .hero__title span:last-child {
        margin-left: 8vw;
    }

    .hero__lower {
        grid-template-columns: 1fr auto;
        align-items: end;
        margin-top: 3.5rem;
    }

    .hero__description {
        max-width: 250px;
        font-size: 0.76rem;
        line-height: 1.65;
    }

    .circle-cta--hero {
        width: 130px;
    }

    .circle-cta span {
        font-size: 0.59rem;
    }

    .circle-cta svg {
        right: 16%;
        bottom: 15%;
        width: 15px;
        height: 15px;
    }

    .hero__meta {
        bottom: 1.25rem;
        font-size: 0.5rem;
    }

    .ribbon--primary {
        top: 15%;
        right: -36%;
        width: 100vw;
        height: 100vw;
        opacity: 0.48;
    }

    .ribbon--secondary {
        left: -35%;
        width: 65vw;
        height: 110vw;
        opacity: 0.4;
    }

    .ribbon--tertiary {
        right: 8%;
        bottom: -10%;
        width: 50vw;
        height: 80vw;
        opacity: 0.35;
    }

    .ribbon--orb {
        top: 38%;
        left: 58%;
        width: 90px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
        width: min(calc(100% - 2rem), 500px);
        margin-top: -1rem;
    }

    .feature-card,
    .feature-card:last-child {
        grid-column: auto;
        min-height: 270px;
    }

    .feature-card__body {
        padding-top: 3rem;
    }

    .editorial-section,
    .services-section,
    .collective-section,
    .contact-section {
        width: min(calc(100% - 2rem), 500px);
    }

    .editorial-heading {
        margin-bottom: 4rem;
    }

    .editorial-heading h2 {
        font-size: clamp(3rem, 15vw, 5rem);
    }

    .editorial-heading__description,
    .services-section__header>p {
        margin-left: 0;
        margin-top: 1.7rem;
    }

    .editorial-grid {
        display: flex;
        flex-direction: column;
    }

    .editorial-card,
    .editorial-card--large,
    .editorial-card--medium,
    .editorial-card--wide {
        width: 100%;
        margin-top: 0;
    }

    .editorial-card--wide {
        display: block;
    }

    .editorial-card__visual,
    .editorial-card__visual--fluid,
    .editorial-card__visual--resonance {
        min-height: 300px;
    }

    .editorial-card__visual--legacy {
        min-height: 280px;
    }

    .editorial-card__content {
        padding: 1.5rem;
    }

    .editorial-card__content h3 {
        font-size: 2rem;
    }

    .editorial-card__stats {
        gap: 1.2rem;
        justify-content: space-between;
    }

    .editorial-card__stats strong {
        font-size: 1.5rem;
    }

    .editorial-card__stats small {
        font-size: 0.48rem;
    }

    .services-section__header h2 {
        font-size: clamp(3rem, 15vw, 5rem);
    }

    .services-list {
        margin-top: 1rem;
    }

    .service-row {
        grid-template-columns: 32px 1fr 34px;
        gap: 0.75rem;
        min-height: 105px;
        padding: 1.2rem 0;
    }

    .service-row:hover {
        padding-right: 0.6rem;
        padding-left: 0.6rem;
    }

    .service-row h3 {
        font-size: 1.25rem;
    }

    .service-row p {
        display: none;
    }

    .service-row__arrow {
        width: 34px;
        height: 34px;
    }

    .collective-panel {
        padding: 1.5rem;
        border-radius: var(--radius-lg);
    }

    .collective-panel__content h2 {
        margin-top: 1.5rem;
        font-size: clamp(3rem, 14vw, 5rem);
    }

    .collective-panel__description {
        font-size: 0.78rem;
    }

    .collective-panel__visual {
        min-height: 320px;
    }

    .profile-orbit--one {
        left: 0;
    }

    .profile-orbit--two {
        left: 26%;
    }

    .profile-orbit--three {
        right: 0;
    }

    .collective-panel__stats {
        gap: 1rem;
    }

    .collective-stat strong {
        font-size: 1.45rem;
    }

    .collective-stat span {
        font-size: 0.48rem;
    }

    .cta-section {
        width: min(calc(100% - 2rem), 500px);
        min-height: 650px;
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .cta-section__content h2 {
        font-size: clamp(3.5rem, 16vw, 6rem);
    }

    .cta-section__content>p:last-child {
        margin-top: 2rem;
        font-size: 0.78rem;
    }

    .circle-cta--large {
        width: 190px;
        justify-self: end;
    }

    .contact-section {
        gap: 3rem;
    }

    .contact-intro h2 {
        font-size: clamp(3rem, 14vw, 5rem);
    }

    .contact-form-card {
        padding: 1.5rem;
        border-radius: var(--radius-lg);
    }

    form {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .form-field--message,
    .form-submit {
        grid-column: auto;
    }

    .form-submit {
        flex-direction: column;
        align-items: stretch;
    }

    .form-submit p {
        max-width: 100%;
    }

    .submit-button {
        width: 100%;
    }

    .site-footer {
        width: min(calc(100% - 2rem), 500px);
    }

    .site-footer__main {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 1.5rem;
        border-radius: var(--radius-lg);
    }

    .footer-navigation {
        gap: 2rem;
    }

    .back-to-top {
        justify-self: start;
    }

    .site-footer__bottom {
        flex-direction: column;
        gap: 0.4rem;
        padding-inline: 0.2rem;
        font-size: 0.48rem;
    }
}

/* =========================================================
Accessibility
========================================================= */

:focus-visible {
    outline: 2px solid #22221f;
    outline-offset: 5px;
}

.navigation__action:focus-visible,
.circle-cta:focus-visible,
.submit-button:focus-visible,
.back-to-top:focus-visible {
    outline-color: #22221f;
    outline-offset: 6px;
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: more) {
    :root {
        --color-mid-grey: #4d4d48;
        --color-soft-grey: #73736d;
    }

    .feature-card,
    .editorial-card,
    .contact-form-card,
    .site-footer__main {
        border-color: rgba(20, 20, 18, 0.35);
    }

    .hero__description,
    .editorial-heading__description,
    .editorial-card__content>p:not(.card-label),
    .services-section__header>p,
    .service-row p,
    .collective-panel__description,
    .contact-intro>p,
    .footer-brand>p {
        color: #454540;
    }
}