:root {
    --navy: #303f61;
    --navy-dark: #202d49;
    --coral: #f87171;
    --paper: #f6f7f9;
    --white: #fff;
    --ink: #26334e;
    --muted: #56637b;
    --display: ui-sans-serif, "Avenir Next", Inter, system-ui, sans-serif;
    --body: ui-sans-serif, "Avenir Next", Inter, system-ui, sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1rem/1.6 var(--body);
    overflow-x: hidden
}

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

a:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 5px
}

::selection {
    background: var(--coral);
    color: var(--navy)
}

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

.container {
    width: min(100% - 2 * clamp(22px, 7.6vw, 120px), 1280px);
    margin: auto
}

.reading-progress {
    height: 4px;
    width: 0;
    position: fixed;
    z-index: 80;
    left: 0;
    top: 0;
    background: var(--coral)
}

.site-header {
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 19px clamp(22px, 5vw, 80px);
    color: #fff;
    transition: background .25s, box-shadow .25s, padding .25s
}

.site-header.scrolled {
    background: rgba(32, 45, 73, .95);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px #0002;
    padding-top: 12px;
    padding-bottom: 12px
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font: 700 clamp(1rem, 1.5vw, 1.3rem) var(--display);
    letter-spacing: -.06em
}

.brand img {
    width: 43px;
    height: 43px;
    object-fit: contain
}

.brand span span {
    color: var(--coral)
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.8vw, 42px);
    font-size: .86rem;
    font-weight: 700
}

.site-header nav a:not(.nav-contact) {
    opacity: .78;
    transition: opacity .2s
}

.site-header nav a:hover {
    opacity: 1
}

.nav-contact {
    border: 1px solid #ffffff80;
    padding: 10px 16px;
    transition: background .2s, color .2s
}

.nav-contact:hover {
    background: var(--coral);
    color: var(--navy);
    border-color: var(--coral)
}

.nav-contact span {
    margin-left: 12px
}

.hero {
    min-height: 100svh;
    background: radial-gradient(ellipse at 79% 40%, #496185, transparent 46%), var(--navy-dark);
    color: #fff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: clamp(155px, 19vh, 220px) 0 110px
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size: 92px 92px;
    mask-image: linear-gradient(to right, transparent 10%, black 100%);
    z-index: -1
}

.hero-orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid #f8717159;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform
}

.orbit-one {
    width: min(68vw, 870px);
    aspect-ratio: 1;
    right: -19%;
    top: 3%
}

.orbit-two {
    width: min(42vw, 550px);
    aspect-ratio: 1;
    right: -6%;
    top: 25%;
    border-color: #f8717134
}

.hero-turtle {
    position: absolute;
    z-index: -1;
    width: min(50vw, 660px);
    right: -10%;
    top: 14%;
    opacity: .19;
    filter: grayscale(1) brightness(4);
    will-change: transform
}

.hero-content {
    position: relative;
    z-index: 1
}

.eyebrow {
    font: 700 .78rem/1.3 var(--display);
    text-transform: uppercase;
    letter-spacing: .16em;
    margin: 0
}

.eyebrow.coral {
    color: var(--coral)
}

.eyebrow-rule {
    display: inline-block;
    width: 34px;
    height: 1px;
    background: currentColor;
    vertical-align: middle;
    margin: 0 12px
}

.hero h1 {
    font: 650 clamp(3.8rem, 9.1vw, 10rem)/.94 var(--display);
    letter-spacing: -.09em;
    max-width: 12ch;
    margin: 28px 0 clamp(52px, 8vh, 100px)
}

.hero h1 em {
    color: var(--coral);
    font-style: normal
}

.hero-bottom {
    max-width: 1120px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px
}

.hero-bottom>p {
    font-size: clamp(1.1rem, 1.9vw, 1.4rem);
    max-width: 570px;
    color: #dce3ef;
    margin: 0
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap
}

.primary-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: var(--coral);
    color: var(--navy-dark);
    font-weight: 800;
    padding: 16px 21px;
    min-height: 56px;
    transition: transform .2s, background .2s;
    white-space: nowrap
}

.primary-link:hover {
    transform: translateY(-4px);
    background: #ff9696
}

.scroll-link {
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap
}

.scroll-link span {
    font-size: 1.3rem;
    margin-left: 7px
}

.hero-edition {
    position: absolute;
    left: clamp(22px, 7.6vw, 120px);
    bottom: 31px;
    color: #bbc9dc;
    font-size: .68rem;
    letter-spacing: .18em
}

.proof-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(18px, 2.4vw, 37px);
    background: var(--coral);
    color: var(--navy-dark);
    padding: 19px 24px;
    font: 700 .82rem var(--display);
    text-align: center
}

.proof-bar i {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: var(--navy)
}

.section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(115px, 13vw, 190px) 0
}

.section-front {
    position: relative;
    z-index: 2
}

.section-heading {
    max-width: 1050px;
    margin-bottom: clamp(65px, 9vw, 125px)
}

.section-heading .eyebrow {
    color: var(--navy)
}

h2,
h3,
p {
    margin-top: 0
}

.section-heading h2 {
    font: 650 clamp(3rem, 6.3vw, 6.8rem)/1.03 var(--display);
    letter-spacing: -.075em;
    max-width: 14ch;
    margin: 27px 0
}

.section-heading>p:last-child {
    font-size: clamp(1.12rem, 1.8vw, 1.43rem);
    max-width: 640px;
    color: var(--muted)
}

.background-word {
    position: absolute;
    z-index: 0;
    right: -.08em;
    top: -.15em;
    font: 800 clamp(13rem, 37vw, 39rem)/1 var(--display);
    letter-spacing: -.14em;
    color: #303f610a;
    pointer-events: none;
    will-change: transform
}

.expertise {
    background: var(--paper)
}

.service-list {
    border-top: 1px solid var(--navy)
}

.service {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 150px minmax(280px, 1fr) minmax(180px, .48fr);
    gap: clamp(20px, 4vw, 70px);
    border-bottom: 1px solid #a9b3c7;
    padding: clamp(35px, 5vw, 70px) 0
}

.service-no {
    font: 700 .75rem var(--display);
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--navy);
    position: relative;
    z-index: 1;
    padding-top: 8px
}

.service h3 {
    font: 650 clamp(2.2rem, 4vw, 4.5rem)/1.04 var(--display);
    letter-spacing: -.07em;
    margin: 0 0 19px;
    max-width: 11ch
}

.service p {
    font-size: 1.1rem;
    max-width: 570px;
    margin: 0;
    color: var(--muted)
}

.service ul {
    list-style: none;
    padding: 0;
    margin: 3px 0 0;
    color: var(--muted);
    font-size: .95rem;
    position: relative;
    z-index: 1
}

.service li {
    border-top: 1px solid #c8cfdd;
    padding: 10px 0
}

.service-art {
    position: absolute;
    z-index: -1;
    right: -.05em;
    top: -.27em;
    color: #f871712b;
    font: 700 clamp(12rem, 26vw, 27rem)/1 var(--display);
    letter-spacing: -.13em;
    pointer-events: none;
    will-change: transform
}

.interlude {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--coral);
    color: var(--navy-dark);
    min-height: 65svh;
    display: flex;
    align-items: center;
    padding: 100px 0
}

.interlude-art {
    position: absolute;
    z-index: 0;
    right: -.1em;
    top: -.35em;
    font: 500 clamp(25rem, 65vw, 70rem)/1 var(--display);
    color: #303f611a;
    pointer-events: none;
    will-change: transform
}

.interlude .container {
    position: relative;
    z-index: 1
}

.interlude p:last-child {
    font: 600 clamp(3rem, 7vw, 7.5rem)/1.04 var(--display);
    letter-spacing: -.078em;
    max-width: 1100px;
    margin: 30px 0 0
}

.interlude strong {
    font-weight: 700;
    color: #fff;
    background: var(--navy-dark);
    padding: 0 .12em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone
}

.method {
    background: var(--navy-dark);
    color: #fff
}

.method .section-heading h2 {
    max-width: 16ch
}

.method .section-heading .eyebrow {
    color: var(--coral)
}

.method-lines {
    position: absolute;
    z-index: 0;
    right: -1%;
    top: 13%;
    bottom: 7%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
    padding-right: 25px;
    border-right: 2px dashed #f8717140;
    color: #f871712e;
    font: 800 clamp(1rem, 1.8vw, 1.7rem) var(--display);
    letter-spacing: .12em;
    pointer-events: none;
    will-change: transform
}

.method-lines span {
    position: relative
}

.method-lines span:after {
    content: "";
    position: absolute;
    right: -31px;
    top: .5em;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--coral)
}

.method-steps {
    max-width: 1000px;
    border-top: 1px solid #ffffff66
}

.method-step {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: clamp(20px, 5vw, 70px);
    padding: 38px 0;
    border-bottom: 1px solid #ffffff66
}

.method-number {
    font: 600 clamp(2.2rem, 4vw, 4rem)/1 var(--display);
    letter-spacing: -.08em;
    color: var(--coral)
}

.method-step h3 {
    font: 600 clamp(1.7rem, 3vw, 3rem)/1.1 var(--display);
    letter-spacing: -.05em;
    margin-bottom: 12px
}

.method-step p {
    font-size: 1.06rem;
    color: #ced6e4;
    max-width: 600px;
    margin: 0
}

.about {
    background: #fff
}

.about-layout {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    align-items: center;
    gap: clamp(60px, 9vw, 140px)
}

.about-mark {
    position: relative
}

.about-mark img {
    width: min(100%, 460px);
    filter: drop-shadow(25px 26px 0 #f871712b)
}

.about-copy .eyebrow {
    color: var(--navy)
}

.about-copy h2 {
    font: 650 clamp(2.8rem, 5.3vw, 5.7rem)/1.06 var(--display);
    letter-spacing: -.075em;
    margin: 25px 0 32px
}

.about-copy>p:not(.eyebrow) {
    font-size: clamp(1.12rem, 1.7vw, 1.32rem);
    color: var(--muted);
    max-width: 680px
}

.inline-link {
    display: inline-block;
    border-bottom: 1px solid var(--navy);
    font-weight: 750;
    margin-top: 23px;
    padding-bottom: 8px
}

.inline-link span {
    color: var(--coral);
    margin-left: 25px
}

.about-ring {
    position: absolute;
    border: 1px solid #f8717150;
    border-radius: 50%;
    width: min(49vw, 600px);
    aspect-ratio: 1;
    left: -17%;
    top: -23%;
    z-index: 0;
    will-change: transform
}

.ring-b {
    width: min(32vw, 390px);
    left: 4%;
    top: 17%;
    border-color: #303f6128
}

.contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--navy);
    color: #fff;
    padding: clamp(130px, 14vw, 220px) 0
}

.contact .container {
    position: relative;
    z-index: 2
}

.contact .eyebrow {
    color: var(--coral)
}

.contact h2 {
    font: 650 clamp(3.3rem, 7.8vw, 8.5rem)/1 var(--display);
    letter-spacing: -.085em;
    max-width: 12ch;
    margin: 32px 0 55px
}

.contact-circle {
    position: absolute;
    border: 1px solid #f8717159;
    border-radius: 50%;
    width: min(58vw, 720px);
    aspect-ratio: 1;
    right: -20%;
    top: -30%;
    z-index: 0;
    will-change: transform
}

.circle-two {
    width: min(36vw, 450px);
    right: -7%;
    top: -5%;
    border-color: #f8717133
}

.contact-link {
    min-width: 220px
}

.footer {
    background: var(--navy-dark);
    color: #d5dbe6;
    padding: 30px clamp(22px, 5vw, 80px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    font-size: .82rem
}

.footer .brand {
    color: #fff
}

.footer .brand img {
    width: 34px;
    height: 34px
}

.footer p {
    margin: 0
}

.footer>div {
    display: flex;
    gap: 25px
}

.footer>div a {
    color: #fff
}

.js .reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .75s, transform .75s cubic-bezier(.2, .7, .2, 1)
}

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

@media(max-width:1100px) {
    .service {
        grid-template-columns: 110px 1fr
    }

    .service ul {
        grid-column: 2;
        max-width: 520px
    }

    .hero-bottom {
        align-items: start;
        flex-direction: column
    }

    .about-layout {
        grid-template-columns: .65fr 1.35fr;
        gap: 50px
    }
}

@media(max-width:760px) {
    .site-header {
        padding: 13px 22px;
        align-items: start
    }

    .site-header.scrolled {
        padding: 11px 22px
    }

    .site-header nav {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: flex-end;
        font-size: .68rem;
        max-width: 210px
    }

    .site-header nav a:not(.nav-contact) {
        display: none
    }

    .nav-contact {
        padding: 8px 10px
    }

    .brand {
        font-size: 1rem
    }

    .brand img {
        width: 33px;
        height: 33px
    }

    .hero {
        min-height: 100svh;
        padding: 145px 0 100px
    }

    .hero h1 {
        font-size: clamp(3.4rem, 12.5vw, 6rem)
    }

    .hero-turtle {
        width: 85vw;
        right: -38%;
        top: 24%;
        opacity: .12
    }

    .orbit-one {
        width: 100vw;
        right: -55%;
        top: 16%
    }

    .orbit-two {
        width: 70vw;
        right: -34%;
        top: 38%
    }

    .hero-bottom {
        gap: 35px
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column
    }

    .proof-bar {
        flex-direction: column;
        gap: 8px
    }

    .proof-bar i {
        display: none
    }

    .section {
        padding: 100px 0
    }

    .section-heading h2 {
        font-size: clamp(2.9rem, 10vw, 5rem)
    }

    .service {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 40px 0
    }

    .service ul {
        grid-column: 1
    }

    .service-art {
        font-size: 13rem;
        right: -5%;
        top: 5%;
        opacity: .65
    }

    .interlude {
        min-height: 55svh
    }

    .interlude p:last-child {
        font-size: clamp(3rem, 9vw, 5rem)
    }

    .method-lines {
        display: none
    }

    .method-step {
        grid-template-columns: 60px 1fr;
        gap: 15px
    }

    .method-number {
        font-size: 2rem
    }

    .about-layout {
        grid-template-columns: 1fr;
        gap: 65px
    }

    .about-mark img {
        max-width: 280px
    }

    .about-ring {
        width: 85vw;
        left: -40%
    }

    .contact h2 {
        font-size: clamp(3.2rem, 10vw, 5.5rem)
    }

    .contact-circle {
        width: 95vw;
        right: -55%
    }

    .footer {
        flex-direction: column;
        align-items: start
    }

    .hero-edition {
        font-size: .58rem
    }
}

@media(max-width:380px) {
    .site-header .brand {
        font-size: .85rem
    }

    .site-header nav {
        font-size: .62rem
    }

    .hero h1 {
        font-size: 3.1rem
    }

    .primary-link {
        white-space: normal
    }
}

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

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

    [data-parallax] {
        will-change: auto;
        transform: none !important
    }

    .primary-link {
        transition: none
    }
}

/* Selected work: a second, editorial chapter in the same visual system. */
.projects-teaser {
    background: #e7ebf2;
    color: var(--navy);
    padding: clamp(75px, 9vw, 125px) 0
}

.projects-teaser .container {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 55px
}

.projects-teaser h2 {
    font: 650 clamp(2.7rem, 5vw, 5.4rem)/1.04 var(--display);
    letter-spacing: -.075em;
    max-width: 850px;
    margin: 24px 0 0
}

.projects-teaser-link {
    font-weight: 800;
    border-bottom: 1px solid;
    padding-bottom: 12px;
    white-space: nowrap
}

.projects-teaser-link span {
    color: var(--coral);
    margin-left: 28px
}

.works-page .site-header nav [aria-current="page"] {
    opacity: 1;
    border-bottom: 2px solid var(--coral);
    padding-bottom: 4px
}

.works-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 83svh;
    display: flex;
    align-items: center;
    background: radial-gradient(ellipse at 80% 35%, #4f6180, transparent 46%), var(--navy-dark);
    color: #fff;
    padding: clamp(165px, 20vh, 240px) 0 100px
}

.works-hero .container {
    z-index: 2
}

.works-hero h1 {
    font: 650 clamp(4rem, 9vw, 10rem)/.95 var(--display);
    letter-spacing: -.09em;
    max-width: 11ch;
    margin: 28px 0 clamp(50px, 8vh, 95px)
}

.works-hero h1 em {
    font-style: normal;
    color: var(--coral)
}

.works-hero-bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
    max-width: 1150px
}

.works-hero-bottom p {
    font-size: clamp(1.1rem, 1.9vw, 1.4rem);
    color: #dbe2ee;
    max-width: 620px;
    margin: 0
}

.works-hero-ring {
    position: absolute;
    border: 1px solid #f8717160;
    border-radius: 50%;
    width: min(67vw, 830px);
    aspect-ratio: 1;
    right: -20%;
    top: -20%;
    z-index: 0;
    will-change: transform
}

.works-hero-ring.ring-2 {
    width: min(43vw, 530px);
    right: -5%;
    top: 13%;
    border-color: #f8717136
}

.works-hero-number {
    position: absolute;
    color: #f871711c;
    right: 2%;
    bottom: -.4em;
    font: 700 min(42vw, 520px)/1 var(--display);
    z-index: 0;
    will-change: transform
}

.works-index {
    background: var(--coral);
    color: var(--navy-dark)
}

.works-index .container {
    display: flex;
    align-items: center;
    gap: clamp(18px, 4vw, 65px);
    padding-top: 21px;
    padding-bottom: 21px;
    font-weight: 700;
    font-size: .9rem
}

.works-index span {
    text-transform: uppercase;
    font-size: .7rem;
    letter-spacing: .13em;
    opacity: .75
}

.works-index a:hover {
    text-decoration: underline;
    text-underline-offset: 5px
}

.case {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(115px, 13vw, 185px) 0;
    background: var(--paper)
}

.case-rcf {
    background: var(--navy-dark);
    color: #fff
}

.case-watermark {
    position: absolute;
    z-index: 0;
    right: -.07em;
    top: -.2em;
    font: 750 clamp(13rem, 37vw, 39rem)/1 var(--display);
    letter-spacing: -.13em;
    color: #f8717118;
    pointer-events: none;
    will-change: transform
}

.case-rcf .case-watermark {
    color: #f871711c
}

.case-head {
    position: relative;
    z-index: 2;
    max-width: 1060px;
    margin-bottom: clamp(85px, 11vw, 150px)
}

.case-head .eyebrow {
    color: var(--navy)
}

.case-head .eyebrow.coral {
    color: var(--coral)
}

.case-head h2 {
    font: 650 clamp(3.1rem, 6.4vw, 6.9rem)/1.02 var(--display);
    letter-spacing: -.08em;
    max-width: 13ch;
    margin: 25px 0 30px
}

.case-intro {
    font-size: clamp(1.17rem, 1.9vw, 1.55rem);
    max-width: 760px;
    color: var(--muted);
    line-height: 1.5
}

.case-rcf .case-intro {
    color: #d1d9e5
}

.case-story {
    display: grid;
    grid-template-columns: .42fr 1fr;
    gap: clamp(45px, 10vw, 150px);
    border-top: 1px solid currentColor;
    padding-top: 28px
}

.case-aside {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px
}

.case-aside>span {
    font: 700 .77rem var(--display);
    text-transform: uppercase;
    letter-spacing: .13em
}

.case-aside strong {
    font: 650 clamp(1.9rem, 3vw, 3rem)/1.08 var(--display);
    letter-spacing: -.06em
}

.case-aside a {
    margin-top: 14px;
    border-bottom: 1px solid;
    padding-bottom: 7px;
    font-weight: 700
}

.case-body {
    display: grid;
    gap: clamp(55px, 7vw, 95px)
}

.case-body section {
    max-width: 700px
}

.detail-number {
    display: block;
    color: var(--coral);
    font: 700 .77rem var(--display);
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: 17px
}

.case h3 {
    font: 650 clamp(2rem, 3.4vw, 3.6rem)/1.08 var(--display);
    letter-spacing: -.065em;
    margin: 0 0 18px;
    max-width: 17ch
}

.case-body p {
    font-size: 1.07rem;
    color: var(--muted);
    line-height: 1.7;
    margin: 0
}

.case-rcf .case-body p {
    color: #d0d8e5
}

.case-divider {
    min-height: 55svh;
    display: flex;
    align-items: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--coral);
    color: var(--navy-dark);
    padding: 90px 0
}

.case-divider>span {
    position: absolute;
    right: -.1em;
    top: -.3em;
    color: #303f6118;
    font: 750 min(32vw, 400px)/1 var(--display);
    letter-spacing: -.1em;
    white-space: nowrap;
    will-change: transform
}

.case-divider .container {
    z-index: 1
}

.case-divider p {
    font: 650 clamp(2.5rem, 5vw, 5.4rem)/1.08 var(--display);
    letter-spacing: -.07em;
    max-width: 1100px;
    margin: 0
}

.works-outro {
    background: var(--navy);
    color: #fff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(130px, 15vw, 220px) 0
}

.works-outro .container {
    z-index: 2
}

.works-outro .eyebrow {
    color: var(--coral)
}

.works-outro h2 {
    font: 650 clamp(3.2rem, 7vw, 7.7rem)/1 var(--display);
    letter-spacing: -.08em;
    max-width: 12ch;
    margin: 30px 0 55px
}

.works-outro-ring {
    position: absolute;
    right: -18%;
    top: -35%;
    width: min(63vw, 770px);
    aspect-ratio: 1;
    border: 1px solid #f8717160;
    border-radius: 50%;
    will-change: transform
}

@media(max-width:760px) {
    .projects-teaser .container {
        align-items: start;
        flex-direction: column;
        gap: 35px
    }

    .works-hero {
        min-height: 80svh;
        padding: 150px 0 95px
    }

    .works-hero h1 {
        font-size: clamp(3.5rem, 12vw, 6rem)
    }

    .works-hero-bottom {
        flex-direction: column;
        align-items: start
    }

    .works-hero-ring {
        width: 95vw;
        right: -55%
    }

    .works-hero-ring.ring-2 {
        width: 68vw;
        right: -36%
    }

    .works-index .container {
        flex-wrap: wrap;
        gap: 12px 25px
    }

    .works-index span {
        width: 100%
    }

    .case {
        padding: 100px 0
    }

    .case h2 {
        font-size: clamp(3rem, 10vw, 5rem)
    }

    .case-story {
        grid-template-columns: 1fr;
        gap: 65px
    }

    .case-aside strong {
        font-size: 2.2rem
    }

    .case-watermark {
        font-size: 15rem
    }

    .case-divider {
        min-height: 45svh
    }

    .case-divider p {
        font-size: clamp(2.6rem, 8vw, 4.6rem)
    }

    .works-outro h2 {
        font-size: clamp(3.2rem, 10vw, 5.5rem)
    }

    .works-outro-ring {
        width: 100vw;
        right: -55%
    }
}

/* Product imagery and expanded portfolio */
.case-head {
    margin-bottom: clamp(55px, 7vw, 90px)
}

.case-visual {
    position: relative;
    overflow: hidden;
    min-height: clamp(420px, 56vw, 700px);
    margin: 0 0 clamp(75px, 10vw, 130px);
    display: grid;
    place-items: center;
    isolation: isolate;
    background: radial-gradient(circle at 24% 35%, #fff8 0 15%, transparent 40%), linear-gradient(125deg, #ebc9a9, #d9e7eb 50%, #d5c4eb);
    will-change: transform
}

.case-visual:before,
.case-visual:after {
    content: "";
    position: absolute;
    border: 1px solid #303f6133;
    border-radius: 50%;
    width: 55%;
    aspect-ratio: 1;
    right: -7%;
    top: -32%;
    z-index: -1
}

.case-visual:after {
    width: 36%;
    right: 3%;
    top: -11%
}

.case-visual-rcf {
    background: radial-gradient(circle at 74% 28%, #f8717190, transparent 36%), linear-gradient(130deg, #34466d, #1a2842 80%)
}

.case-visual-rcf:before,
.case-visual-rcf:after {
    border-color: #f8717166
}

.screen-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 3vw, 55px);
    padding: 55px 20px 65px;
    transform: rotate(-7deg)
}

.screen-pair img {
    width: 300px;
    object-fit: cover;
    border-radius: 26px;
    box-shadow: 0 26px 65px #17243b5c
}

.screen-pair img:nth-child(2) {
    transform: translateY(45px) rotate(12deg)
}

.case-visual figcaption {
    position: absolute;
    bottom: 20px;
    left: 24px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .13em;
    color: var(--navy)
}

.case-visual-rcf figcaption {
    color: #fff
}

.project-gallery {
    background: #e8edf4;
    padding-top: clamp(110px, 12vw, 170px)
}

.gallery-intro {
    max-width: 900px;
    margin: 0 0 clamp(65px, 8vw, 110px)
}

.gallery-intro h2 {
    font: 650 clamp(3rem, 6.3vw, 6.9rem)/1.03 var(--display);
    letter-spacing: -.08em;
    max-width: 13ch;
    margin: 22px 0 25px
}

.gallery-intro h2 em {
    font-style: normal;
    color: var(--coral)
}

.gallery-intro>p:last-child {
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    max-width: 680px;
    color: var(--muted)
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(25px, 3.5vw, 54px)
}

.project-card {
    background: #fff;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.project-card-image {
    height: clamp(310px, 37vw, 480px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: #d9e5ed
}

.project-card:nth-child(3n+2) .project-card-image {
    background: #f5d7ce
}

.project-card:nth-child(3n) .project-card-image {
    background: #dcd9ed
}

.project-card-image img {
    margin-top: 90px;
    border-radius: 14px;
    height: 450px;
    width: 210px;
    object-fit: cover;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 17px 25px #26334e57);
    transition: transform .5s cubic-bezier(.2, .7, .2, 1)
}

.project-card:hover .project-card-image img {
    transform: translateY(-8px) rotate(-3deg)
}


.project-card-orbit {
    position: absolute;
    z-index: 1;
    border: 1px solid #303f6166;
    border-radius: 50%;
    width: 80%;
    aspect-ratio: 1;
    right: -25%;
    top: -25%;
    will-change: transform
}

.project-card-orbit:after {
    content: "";
    position: absolute;
    border: 1px solid #f87171aa;
    border-radius: 50%;
    inset: 19%
}

.project-card-copy {
    padding: clamp(30px, 4vw, 55px);
    display: flex;
    flex-direction: column;
    align-items: start;
    flex: 1
}

.project-card-copy .eyebrow {
    color: var(--coral);
    font-size: .68rem
}

.project-card h3 {
    font: 650 clamp(2.2rem, 3.5vw, 4rem)/1.05 var(--display);
    letter-spacing: -.07em;
    margin: 15px 0 18px
}

.project-card-hook {
    font-size: 1.24rem;
    font-weight: 700;
    line-height: 1.35;
    max-width: 440px
}

.project-card-copy>p:not(.eyebrow):not(.project-card-hook) {
    color: var(--muted);
    max-width: 480px
}

.project-card-copy a {
    margin-top: auto;
    padding-top: 20px;
    border-bottom: 1px solid var(--navy);
    font-weight: 800
}

.project-card-copy a span {
    color: var(--coral);
    padding-left: 18px
}

.gallery-note {
    font-size: .82rem;
    color: var(--muted);
    max-width: 750px;
    margin: 45px 0 0
}

@media(max-width:760px) {
    .case-visual {
        min-height: 380px
    }

    .screen-pair {
        gap: 15px
    }

    .screen-pair img {
        width: 180px;
        height: 390px;
        border-radius: 16px
    }

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

    .project-card-image {
        height: 340px
    }

    .project-card-copy {
        padding: 30px
    }

    .project-card h3 {
        font-size: 2.5rem
    }

    .gallery-intro h2 {
        font-size: clamp(3rem, 10vw, 5rem)
    }
}

@media(prefers-reduced-motion:reduce) {
    .project-card-image img {
        transition: none
    }

    .project-card:hover .project-card-image img {
        transform: none
    }
}

.project-path {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #e8edf4;
    color: var(--navy);
    padding: clamp(100px, 12vw, 175px) 0
}

.project-path .container {
    position: relative;
    z-index: 2
}

.project-path h2 {
    font: 650 clamp(3rem, 6.2vw, 6.8rem)/1.04 var(--display);
    letter-spacing: -.078em;
    max-width: 15ch;
    margin: 25px 0 26px
}

.project-path h2 em {
    font-style: normal;
    color: var(--coral)
}

.project-path p:not(.eyebrow) {
    max-width: 640px;
    font-size: clamp(1.1rem, 1.8vw, 1.38rem);
    color: var(--muted);
    margin-bottom: 35px
}

.path-ring {
    position: absolute;
    right: -16%;
    top: -28%;
    width: min(65vw, 780px);
    aspect-ratio: 1;
    border: 1px solid #f8717180;
    border-radius: 50%;
    will-change: transform
}

.path-ring:after {
    content: "";
    position: absolute;
    inset: 20%;
    border: 1px solid #303f6150;
    border-radius: 50%
}

@media(max-width:760px) {
    .path-ring {
        width: 100vw;
        right: -58%
    }

    .site-header nav a[href="votre-projet/"],
    .site-header nav a[href="../votre-projet/"] {
        display: inline !important
    }
}

.site-footer {
    background: var(--navy-dark);
    color: #d5dbe6;
    padding: 30px clamp(22px, 5vw, 80px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    font-size: .82rem
}

.site-footer .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    color: #fff;
    font: 700 clamp(1rem, 1.5vw, 1.3rem) var(--display);
    letter-spacing: -.06em
}

.site-footer .footer-brand img {
    width: 34px;
    height: 34px;
    object-fit: contain
}

.site-footer .footer-brand span span {
    color: var(--coral)
}

.site-footer p {
    margin: 0
}

.site-footer>div {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap
}

.site-footer>div a {
    color: #fff
}

@media(max-width:760px) {
    .site-footer {
        flex-direction: column;
        align-items: start
    }
}

.legal-page-content {
    background: #edf1f7;
    padding: clamp(145px, 16vw, 230px) 0 clamp(100px, 12vw, 160px);
    min-height: 80svh
}

.legal-page .legal-head {
    border-top: 1px solid var(--navy);
    padding-top: 25px;
    margin-bottom: clamp(55px, 7vw, 90px)
}

.legal-page .legal-head h1 {
    font: 650 clamp(3rem, 6.2vw, 6.5rem)/1.05 var(--display);
    letter-spacing: -.075em;
    max-width: 14ch;
    margin: 22px 0 25px
}

.legal-page .legal-head>p:last-child {
    color: var(--muted);
    font-size: 1.12rem
}

.legal-page .legal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 55px)
}

.legal-page .legal-grid article {
    border-top: 1px solid #aeb9cb;
    padding-top: 23px
}

.legal-page .legal-grid h3 {
    font: 700 1.3rem var(--display);
    margin: 0 0 16px
}

.legal-page .legal-grid p {
    font-size: 1rem;
    line-height: 1.75;
    color: #3f4e69
}

.legal-page .legal-grid a {
    text-decoration: underline;
    text-underline-offset: 3px
}

.legal-page .legal-grid strong {
    color: var(--navy)
}

@media(max-width:880px) {
    .legal-page .legal-grid {
        grid-template-columns: 1fr;
        gap: 35px
    }
}