@font-face {
    font-family: "LT Superior";
    src: url("/assets/fonts/LTSuperior-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "LT Superior";
    src: url("/assets/fonts/LTSuperior-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "LT Superior";
    src: url("/assets/fonts/LTSuperior-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Inter Display";
    src: url("/assets/fonts/InterDisplay-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

:root {
    --ink: #070708;
    --ink-soft: #0a0b10;
    --paper: #f4f4f3;
    --white: #fff;
    --muted: #707074;
    --line: rgba(7, 7, 8, .17);
    --gutter: clamp(20px, 4.7vw, 60px);
    --radius: 12px;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html {
    background: var(--ink);
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #777 transparent;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "LT Superior", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -.025em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

body.menu-open,
body.is-loading { overflow: hidden; }

img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

::selection { color: #fff; background: #06658e; }

.skip-link {
    position: fixed;
    z-index: 10000;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    color: #000;
    background: #fff;
    transform: translateY(-160%);
}

.skip-link:focus { transform: none; }

.section-light { background: var(--paper); }
.section-dark { color: #fff; background: var(--ink-soft); }

.section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    letter-spacing: -.03em;
}

.section-mark {
    color: #777;
    font-size: 14px;
    letter-spacing: .02em;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: color .35s ease, background .35s ease, transform .35s var(--ease), border-color .35s ease;
}

.button:hover { transform: translateY(-2px); }
.button:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #20a4dd; outline-offset: 4px; }
.button--dark { color: #fff; background: var(--ink); }
.button--light { color: #090909; background: #fff; }
.button span:first-child { font-size: 10px; }

/* Loader */
.preloader {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: var(--gutter);
    color: #fff;
    background: #050506;
    transition: transform .9s var(--ease), visibility .9s;
}

.preloader::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(42vw, 520px);
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%) scale(var(--loader-scale, .15));
    opacity: calc(.25 + var(--loader-progress, 0) * .5);
}

.preloader.is-complete {
    transform: translateY(-105%);
    visibility: hidden;
}

.preloader__brand { font-size: 14px; letter-spacing: .02em; }
.preloader__status { display: flex; align-items: center; gap: 16px; min-width: min(320px, 42vw); }
.preloader__bar { flex: 1; height: 1px; background: rgba(255,255,255,.24); }
.preloader__bar span { display: block; width: var(--loader-width, 0%); height: 100%; background: #fff; }
.preloader__percent { width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.no-js .preloader { display: none; }

/* Header and menu */
.site-header {
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: minmax(220px, .9fr) 1.2fr auto;
    align-items: start;
    width: 100%;
    min-height: 140px;
    padding: 60px var(--gutter) 20px;
    color: #fff;
    opacity: 0;
    transition: color .35s ease, background .35s ease, opacity .6s ease, min-height .35s ease, padding .35s ease;
}

.hero-visible .site-header { opacity: 1; }
.no-js .site-header { opacity: 1; }

.site-header.is-scrolled,
.site-header.is-menu-open {
    min-height: 80px;
    padding-top: 20px;
    color: var(--ink);
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid rgba(0,0,0,.04);
    backdrop-filter: blur(12px);
}

.site-header.is-menu-open { background: transparent; color: #fff; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    width: max-content;
    font-size: 17px;
    line-height: 1;
    letter-spacing: -.045em;
}

.brand__dot { width: 23px; height: 23px; border-radius: 50%; background: currentColor; }
.brand sup { position: relative; top: -.22em; font-size: .68em; }

.header-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(115px, 1fr));
    gap: 22px;
    max-width: 430px;
    margin-left: auto;
    font-size: 14px;
    line-height: 1.3;
}

.header-meta div { display: flex; flex-direction: column; }
.header-meta span { opacity: .9; }
.header-meta a { opacity: .66; transition: opacity .2s ease; }
.header-meta a:hover { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: 17px; margin-left: 28px; }
.header-cta { min-height: 49px; padding-inline: 22px 18px; white-space: nowrap; }
.site-header.is-scrolled .header-cta { border-color: var(--line); }

.menu-toggle {
    position: relative;
    width: 51px;
    height: 49px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.menu-toggle span {
    position: absolute;
    right: 0;
    width: 49px;
    height: 1.5px;
    background: currentColor;
    transition: transform .4s var(--ease), top .4s var(--ease), width .3s ease;
}

.menu-toggle span:first-child { top: 18px; }
.menu-toggle span:last-child { top: 30px; width: 37px; }
.menu-toggle:hover span:last-child { width: 49px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 24px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 24px; width: 49px; transform: rotate(-45deg); }

.site-menu {
    position: fixed;
    z-index: 85;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 32px var(--gutter);
    color: #fff;
    background: #08090c;
    visibility: hidden;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: clip-path .75s var(--ease), opacity .45s ease, visibility .75s;
}

.site-menu.is-open { visibility: visible; opacity: 1; clip-path: inset(0); }
.site-menu__top, .site-menu__bottom { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.menu-close { padding: 12px 0; color: #fff; background: transparent; border: 0; cursor: pointer; }
.menu-close span { margin-left: 9px; font-size: 22px; }
.site-menu__grid { display: grid; grid-template-columns: 2fr 1fr; align-items: end; padding-bottom: 7vh; }
.menu-links li { border-bottom: 1px solid rgba(255,255,255,.17); }
.menu-links a { display: flex; align-items: baseline; gap: 24px; padding: 5px 0; font-size: clamp(46px, 6.5vw, 92px); line-height: 1; letter-spacing: -.055em; }
.menu-links a span { width: 24px; font-size: 12px; letter-spacing: 0; opacity: .45; }
.menu-links a:hover { padding-left: 12px; }
.site-menu__aside { display: flex; flex-direction: column; align-self: end; gap: 10px; padding-left: 8vw; }
.site-menu__aside p { margin-bottom: 16px; color: #777; }
.site-menu__bottom { gap: 24px; justify-content: flex-start; }
.site-menu__bottom span { margin-left: auto; color: #777; }

/* Hero */
.hero {
    position: relative;
    height: 100svh;
    min-height: 680px;
    overflow: hidden;
    color: #fff;
    background: #041d2a;
    isolation: isolate;
}

.hero-sequence, .hero-frame, .hero-frame img, .hero__shade, .hero__water { position: absolute; inset: 0; }
.hero-sequence { z-index: -3; }
.hero-frame { margin: 0; opacity: 0; overflow: hidden; }
.hero-frame img { height: 100%; object-fit: cover; }

.hero-frame--one,
.hero-frame--two {
    inset: auto;
    z-index: 3;
    width: clamp(180px, 20vw, 320px);
    aspect-ratio: 1;
    box-shadow: 0 30px 80px rgba(0,0,0,.42);
    transform: translateY(120%) scale(.86);
}

.hero-frame--one { left: 17vw; bottom: 12vh; }
.hero-frame--two { right: 18vw; top: 27vh; }
.hero-frame--one img, .hero-frame--two img { filter: saturate(.88) contrast(1.05); }

.hero-step-1 .hero-frame--one,
.hero-step-2 .hero-frame--two {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity .42s ease, transform .72s var(--ease);
}

.hero-step-2 .hero-frame--one { opacity: 0; transform: translateY(-25%) scale(.93); transition: .45s ease; }
.hero-step-main .hero-frame--one, .hero-step-main .hero-frame--two { opacity: 0; transition: opacity .35s ease; }

.hero-frame--main {
    z-index: 1;
    opacity: 0;
    clip-path: inset(25% 34% 25% 34% round 2px);
    transform: scale(.965);
}

.hero-frame--main img { object-position: 50% 43%; }
.hero-step-main .hero-frame--main { opacity: 1; transition: opacity .2s ease; }
.hero-expand .hero-frame--main { clip-path: inset(0 round 0); transform: scale(1); transition: clip-path 1.15s var(--ease), transform 1.2s var(--ease); }
.no-js .hero-frame--main { opacity: 1; clip-path: inset(0); transform: none; }

.hero__shade {
    z-index: -1;
    background: linear-gradient(90deg, rgba(0,12,20,.3), transparent 35%, rgba(0,8,14,.13)), linear-gradient(0deg, rgba(0,0,0,.13), transparent 45%);
    opacity: 0;
    transition: opacity .7s ease;
}

.hero-visible .hero__shade, .no-js .hero__shade { opacity: 1; }

.hero__water {
    z-index: -1;
    pointer-events: none;
    background: url("/assets/images/hero-main.avif") center 43% / cover no-repeat;
    filter: url("#water-distortion");
    opacity: var(--water-opacity, 0);
    mask-image: radial-gradient(circle 78px at var(--water-x, 50%) var(--water-y, 50%), #000 2%, rgba(0,0,0,.8) 38%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 78px at var(--water-x, 50%) var(--water-y, 50%), #000 2%, rgba(0,0,0,.8) 38%, transparent 100%);
    transition: opacity .35s ease;
}

.water-filter { position: absolute; pointer-events: none; }

.hero__content { position: relative; z-index: 2; height: 100%; opacity: 0; transform: translateY(20px); transition: opacity .75s ease, transform .8s var(--ease); }
.hero-visible .hero__content, .no-js .hero__content { opacity: 1; transform: none; }

.hero__statement {
    position: absolute;
    top: 24.5%;
    left: var(--gutter);
    width: 370px;
    font-size: 16px;
    line-height: 1.35;
}
.hero__statement span { display: block; }

.hero__expertise {
    position: absolute;
    top: 24%;
    right: var(--gutter);
    width: min(29vw, 410px);
    font-size: 16px;
}

.hero__expertise-head, .hero__expertise li { display: flex; justify-content: space-between; align-items: center; }
.hero__expertise-head { padding-bottom: 10px; }
.hero__expertise ol { border-top: 1px solid rgba(255,255,255,.35); }
.hero__expertise li { min-height: 49px; border-bottom: 1px solid rgba(255,255,255,.35); }
.hero__expertise li span:last-child { font-variant-numeric: tabular-nums; }

.hero__title-wrap { position: absolute; left: var(--gutter); bottom: 90px; }
.hero__eyebrow { display: block; margin-bottom: 23px; font-size: 15px; letter-spacing: .08em; }
.hero h1 {
    font-family: "Inter Display", Arial, sans-serif;
    font-size: clamp(120px, 14.85vw, 190px);
    font-weight: 600;
    line-height: .884;
    letter-spacing: -.045em;
}
.hero h1 span { display: inline-block; margin-left: .06em; font-size: .6em; letter-spacing: -.02em; transform: translateY(-.04em); }
.hero__scroll { position: absolute; z-index: 4; right: var(--gutter); bottom: 28px; display: none; gap: 10px; font-size: 14px; }

/* Introduction */
.introduction {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 86svh;
    padding: 150px var(--gutter) 130px;
    text-align: center;
}

.introduction h2 {
    max-width: 900px;
    margin: 38px auto 45px;
    font-size: clamp(34px, 3.25vw, 48px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.045em;
}

/* Services */
.services { position: relative; padding: 80px var(--gutter) 145px; }
.services > .section-label { margin-bottom: 55px; }
.services__headline {
    max-width: 1180px;
    margin-bottom: 70px;
    font-size: clamp(44px, 4.45vw, 68px);
    font-weight: 400;
    line-height: .99;
    letter-spacing: -.05em;
}

.services__list { max-width: 1180px; margin: 0 auto; }
.service-row {
    position: relative;
    display: grid;
    grid-template-columns: 70px minmax(300px, .9fr) minmax(390px, 1.15fr);
    gap: 30px;
    align-items: center;
    min-height: 205px;
    padding: 34px 5px 26px;
}

.elastic-line { position: absolute; top: -14px; right: 0; left: 0; height: 28px; pointer-events: none; }
.elastic-line svg { width: 100%; height: 100%; overflow: visible; }
.elastic-line path { fill: none; stroke: rgba(10,10,10,.32); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.service-row__number { align-self: center; font-variant-numeric: tabular-nums; }
.service-row__copy { max-width: 410px; }
.service-row__copy h3 { margin-bottom: 12px; font-size: 17px; font-weight: 500; }
.service-row__copy p { font-size: 16px; line-height: 1.36; }
.service-tags { display: flex; flex-wrap: wrap; gap: 8px 10px; align-content: center; }
.service-tags li {
    padding: 3px 13px 4px;
    color: #121214;
    background: #fff;
    border: 1px solid rgba(0,0,0,.17);
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

.service-cursor-number {
    position: fixed;
    z-index: 7;
    top: 0;
    left: 0;
    color: rgba(0,0,0,.11);
    font-family: "Inter Display", Arial, sans-serif;
    font-size: clamp(110px, 14vw, 210px);
    font-weight: 600;
    line-height: .8;
    letter-spacing: -.08em;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.86);
    transition: opacity .2s ease, transform .28s var(--ease);
}
.service-cursor-number.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Projects: the sharp panel is driven by JS; difference mode creates the split text */
.projects {
    --wipe: 0%;
    position: relative;
    min-height: 3300px;
    overflow: clip;
    color: #fff;
    background: #fff;
    isolation: isolate;
}

.projects__curtain {
    position: sticky;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 100vh;
    margin-bottom: -100vh;
    background: var(--ink-soft);
    clip-path: inset(calc(100% - var(--wipe)) 0 0 0);
    pointer-events: none;
    will-change: clip-path;
}

.projects__inner { position: relative; z-index: 1; padding: 170px var(--gutter) 230px; }
.blend-text { color: var(--ink); }
.projects .wipe-color {
    color: transparent;
    background-image: var(--wipe-gradient, linear-gradient(#070708, #070708));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.projects__intro-stage { height: 980px; }
.projects__intro { position: sticky; top: 150px; max-width: 760px; margin: 0 auto; }
.projects__intro .section-label { margin-bottom: 32px; }
.projects__intro h2 { font-size: clamp(52px, 5.5vw, 78px); font-weight: 400; line-height: .96; letter-spacing: -.055em; }
.projects__intro > p { margin-top: 35px; font-size: 17px; opacity: .72; }
.projects__grid { display: flex; flex-direction: column; gap: 210px; }
.project-card { width: min(53vw, 710px); }
.project-card--right { align-self: flex-end; }
.project-card--narrow { width: min(47vw, 650px); }
.project-card figure { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #191a1e; }
.project-card figure::after { position: absolute; inset: 0; content: ""; border: 1px solid rgba(255,255,255,.11); border-radius: inherit; pointer-events: none; }
.project-card img { width: 100%; height: 112%; object-fit: cover; transform: translateY(var(--image-y, -5%)) scale(1.025); transition: filter .5s ease, transform .8s var(--ease); will-change: transform; }
.project-card:hover img { filter: saturate(1.12) contrast(1.03); transform: translateY(var(--image-y, -5%)) scale(1.055); }
.project-card__meta { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 30px; padding-top: 17px; }
.project-card__meta h3 { font-size: clamp(27px, 2.55vw, 36px); font-weight: 500; line-height: 1; letter-spacing: -.05em; }
.project-card__meta p { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; opacity: .65; }

/* Team */
.team { position: relative; overflow: hidden; padding: 170px 0 130px; }
.team__intro { padding: 0 var(--gutter); }
.team__intro > .section-label { margin-bottom: 46px; }
.team__intro-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, .8fr); gap: 8vw; align-items: end; padding-bottom: 35px; border-bottom: 1px solid rgba(255,255,255,.22); }
.team__intro h2 { font-size: clamp(64px, 7.1vw, 102px); font-weight: 400; line-height: .82; letter-spacing: -.06em; }
.team__intro h2 span { display: block; margin-left: 7vw; }
.team__intro p { max-width: 350px; padding-bottom: 9px; color: #919196; font-size: 18px; line-height: 1.35; }
.team-rail { margin-top: 55px; }
.team-rail__toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); color: #77777d; font-size: 13px; letter-spacing: .12em; }
.team-controls { display: flex; gap: 9px; }
.team-controls button {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.team-controls button:hover { color: #000; background: #fff; transform: scale(1.03); }
.team-rail__viewport { height: 560px; overflow: hidden; cursor: grab; touch-action: pan-y; }
.team-rail__viewport.is-dragging { cursor: grabbing; }
.team-track { display: flex; gap: 25px; width: max-content; padding: 130px 0 145px; will-change: transform; }
.team-card {
    flex: 0 0 252px;
    width: 252px;
    height: 354px;
    overflow: hidden;
    color: #0a0a0b;
    background: #fff;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 11px;
    box-shadow: 0 23px 52px rgba(0,0,0,.28);
    transform-origin: 50% 120%;
    will-change: transform;
    user-select: none;
}
.team-card > img { width: calc(100% - 16px); height: 238px; margin: 8px; object-fit: cover; filter: grayscale(1) contrast(1.04); border-radius: 7px; pointer-events: none; }
.team-card[data-member="Florian"] > img { object-position: 50% 36%; transform: scale(1.04); }
.team-card[data-member="Marie"] > img { object-position: 53% 34%; transform: scale(1.22); }
.team-card[data-member="Antonin"] > img { object-position: 43% 32%; transform: scale(1.18); }
.team-card[data-member="Ulysse"] > img { object-position: 50% 30%; transform: scale(1.03); }
.team-card[data-member="Rémy"] > img { object-position: 51% 39%; transform: scale(1.82); }
.team-card__body { display: flex; align-items: end; justify-content: space-between; gap: 8px; height: 102px; padding: 14px 18px 18px; }
.team-card__body h3 { margin-bottom: 6px; font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.team-card__body p { color: #6f7075; font-size: 13px; line-height: 1.28; }
.team-card__body a { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border: 1px solid #bfc0c4; border-radius: 50%; transition: color .25s ease, background .25s ease; }
.team-card__body a:hover { color: #fff; background: #0a0a0b; }
.team-card__body a span { display: grid; place-items: center; width: 17px; height: 17px; color: #fff; background: #0a0a0b; border-radius: 2px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: -.05em; }
.team__coffee { display: flex; flex-direction: column; align-items: center; gap: 23px; margin-top: 8px; padding: 58px var(--gutter) 0; text-align: center; border-top: 1px solid rgba(255,255,255,.08); }
.team__coffee p { color: #8b8c91; font-size: 18px; }

/* Process */
.process { padding: 150px var(--gutter) 180px; }
.process > .section-label { margin-bottom: 27px; }
.process > h2 { margin-bottom: 78px; font-size: clamp(56px, 6vw, 85px); font-weight: 400; line-height: 1; letter-spacing: -.055em; }
.process__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 31px; }
.process__grid article { padding-top: 24px; border-top: 1px solid rgba(255,255,255,.17); }
.process__grid article > span { color: #64656b; font-size: 14px; }
.process__grid h3 { margin: 16px 0 22px; font-size: 24px; font-weight: 500; letter-spacing: -.045em; }
.process__grid p { color: #919299; font-size: 15px; line-height: 1.42; }

/* FAQ and contact */
.faq { display: grid; grid-template-columns: 1fr 1.05fr; gap: 9vw; min-height: 800px; padding: 165px var(--gutter); }
.faq__title .section-label { margin-bottom: 40px; }
.faq__title h2 { font-size: clamp(72px, 8vw, 118px); font-weight: 400; line-height: .82; letter-spacing: -.065em; }
.faq__list { align-self: center; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 98px; cursor: pointer; list-style: none; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { font-size: 25px; font-weight: 300; transition: transform .35s var(--ease); }
.faq details[open] summary span { transform: rotate(45deg); }
.faq details p { max-width: 600px; padding: 0 55px 30px 0; color: var(--muted); font-size: 16px; }

.contact-cta { display: flex; flex-direction: column; align-items: center; min-height: 92svh; padding: 150px var(--gutter); text-align: center; }
.contact-cta h2 { margin: auto 0 40px; font-size: clamp(68px, 8.3vw, 118px); font-weight: 400; line-height: .8; letter-spacing: -.065em; }
.contact-cta > p { font-size: clamp(17px, 1.75vw, 24px); line-height: 1.22; }
.contact-cta__links { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 52px 0 auto; font-size: 18px; }
.contact-cta__links a:first-child { padding: 13px 22px; color: #fff; background: #09090a; border-radius: 999px; }

/* Footer */
.footer { overflow: hidden; padding: 42px var(--gutter) 30px; color: #f5f5f5; background: #08090c; }
.footer__socials { display: flex; gap: 45px; padding-bottom: 55px; font-size: 15px; }
.footer__grid { display: grid; grid-template-columns: .9fr 1.6fr; gap: 7vw; padding: 45px 0 90px; border-top: 1px solid rgba(255,255,255,.1); }
.footer__form > p, .footer__contact p { margin-bottom: 15px; color: #777980; font-size: 14px; }
.footer__form h2 { margin-bottom: 40px; font-size: 20px; font-weight: 400; }
.footer form { display: flex; flex-direction: column; max-width: 430px; }
.footer label { margin-top: 18px; font-size: 14px; }
.footer input, .footer textarea { width: 100%; padding: 13px 0 14px; color: #fff; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.16); border-radius: 0; outline: 0; resize: vertical; }
.footer input:focus, .footer textarea:focus { border-bottom-color: #fff; }
.footer form button { margin-top: 32px; min-height: 43px; border: 0; border-radius: 999px; cursor: pointer; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.footer__contact { display: grid; grid-template-columns: 1.1fr .7fr 1.25fr; gap: 45px; }
.footer__contact > div { display: flex; flex-direction: column; gap: 9px; }
.footer__contact p { margin-bottom: 5px; }
.footer__marquee { display: flex; width: max-content; font-size: clamp(58px, 8vw, 120px); line-height: 1; letter-spacing: -.06em; animation: footer-marquee 42s linear infinite; }
.footer__marquee div { white-space: nowrap; }
.footer__marquee sup { font-size: .42em; }
.footer__bottom { display: flex; justify-content: space-between; gap: 30px; padding-top: 45px; color: #64656b; font-size: 13px; }

/* Contact and secondary pages */
.subpage { background: var(--paper); }
.subpage .site-header { opacity: 1; }
.subpage .site-header.is-menu-open { color: #fff; }
.contact-page { padding-top: 80px; }
.contact-page__hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc(100svh - 80px);
    padding: 110px var(--gutter) 70px;
}
.contact-page__hero > p { margin-bottom: 45px; font-size: 15px; }
.contact-page__hero h1 { max-width: 1180px; font-size: clamp(80px, 11vw, 162px); font-weight: 400; line-height: .78; letter-spacing: -.07em; }
.contact-page__hero h1 span { display: inline-block; margin-left: 12vw; }
.contact-page__hero > a { position: absolute; right: var(--gutter); bottom: 76px; display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid var(--line); border-radius: 50%; font-size: 22px; }
.contact-page__content { display: grid; grid-template-columns: .85fr 1.25fr; gap: 12vw; padding: 160px var(--gutter); color: #fff; background: var(--ink-soft); }
.contact-page__intro { display: flex; flex-direction: column; gap: 31px; }
.contact-page__intro > p { max-width: 510px; margin-bottom: 45px; font-size: clamp(27px, 2.8vw, 42px); line-height: 1.04; letter-spacing: -.045em; }
.contact-page__intro div { display: flex; flex-direction: column; gap: 4px; }
.contact-page__intro div span:first-child { color: #777980; font-size: 13px; }
.contact-form { display: flex; flex-direction: column; }
.contact-form label { margin: 18px 0 5px; font-size: 14px; }
.contact-form label span { color: #777980; }
.contact-form input, .contact-form textarea { width: 100%; padding: 13px 0 17px; color: #fff; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.18); border-radius: 0; outline: 0; resize: vertical; font-size: 21px; }
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: #fff; }
.contact-form .button { align-self: flex-start; margin-top: 38px; }
.contact-form small { max-width: 560px; margin-top: 20px; color: #73747a; font-size: 12px; }
.form-status { margin-bottom: 22px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; }
.form-status.is-success { border-color: rgba(83,211,142,.5); }
.form-status.is-error { border-color: rgba(255,103,103,.5); }
.subpage-footer { display: flex; align-items: center; justify-content: space-between; padding: 32px var(--gutter); color: #fff; background: #08090c; border-top: 1px solid rgba(255,255,255,.1); }
.subpage-footer > span { color: #777980; font-size: 13px; }

/* Project and utility pages */
.project-page,
.legal-page,
.error-page { min-height: 100svh; padding-top: 80px; background: var(--paper); }

.project-page__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 28px var(--gutter);
    border-bottom: 1px solid var(--line);
}

.project-page__topbar nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.project-page__topbar nav a:last-child { padding: 10px 17px; color: #fff; background: var(--ink); border-radius: 999px; }

.project-detail__heading {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(230px, .55fr);
    align-items: end;
    gap: 9vw;
    padding: 110px var(--gutter) 70px;
}

.project-detail__heading > div > p { margin-bottom: 30px; color: var(--muted); font-size: 14px; }
.project-detail__heading h1 { font-size: clamp(76px, 12vw, 180px); font-weight: 400; line-height: .75; letter-spacing: -.075em; }
.project-detail__heading dl { display: grid; grid-template-columns: 1fr auto; gap: 11px 22px; margin: 0; padding-top: 19px; border-top: 1px solid var(--line); font-size: 14px; }
.project-detail__heading dt { color: var(--muted); }
.project-detail__heading dd { margin: 0; text-align: right; }
.project-detail__visual { margin: 0 var(--gutter); aspect-ratio: 16 / 9; overflow: hidden; background: #101115; }
.project-detail__visual img { width: 100%; height: 100%; object-fit: cover; }
.project-detail__status { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; padding: 125px var(--gutter) 145px; }
.project-detail__status h2 { max-width: 630px; font-size: clamp(45px, 5vw, 72px); font-weight: 400; line-height: .92; letter-spacing: -.055em; }
.project-detail__status > div { max-width: 510px; }
.project-detail__status p { margin-bottom: 30px; color: var(--muted); font-size: 18px; }

.legal-page main { max-width: 980px; margin: 0 auto; padding: 105px var(--gutter) 150px; }
.legal-page main > p:first-child { margin-bottom: 28px; color: var(--muted); }
.legal-page h1 { margin-bottom: 65px; font-size: clamp(58px, 8vw, 112px); font-weight: 400; line-height: .82; letter-spacing: -.065em; }
.legal-notice { max-width: 720px; padding-top: 35px; border-top: 1px solid var(--line); }
.legal-notice h2 { margin-bottom: 20px; font-size: 25px; font-weight: 500; }
.legal-notice p { color: var(--muted); font-size: 18px; line-height: 1.5; }

.error-page { display: grid; place-items: center; padding: 80px var(--gutter); text-align: center; }
.error-page main p:first-child { color: var(--muted); }
.error-page h1 { margin: 24px 0 34px; font-family: "Inter Display", Arial, sans-serif; font-size: clamp(100px, 22vw, 270px); font-weight: 600; line-height: .72; letter-spacing: -.08em; }
.error-page main p:last-of-type { max-width: 480px; margin: 0 auto 35px; font-size: 18px; }

@keyframes footer-marquee { to { transform: translateX(-50%); } }

/* Reveal helpers */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .85s ease, transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
    .site-header { grid-template-columns: 1fr auto; }
    .header-meta { display: none; }
    .header-actions { grid-column: 2; }
    .hero__statement { width: 330px; }
    .hero__expertise { width: 38vw; }
    .service-row { grid-template-columns: 56px minmax(260px, .9fr) 1fr; gap: 22px; }
    .process__grid { grid-template-columns: repeat(3, 1fr); row-gap: 50px; }
}

@media (max-width: 800px) {
    :root { --gutter: 20px; }
    body { font-size: 15px; }
    .site-header { min-height: 78px; padding: 20px; align-items: center; }
    .site-header.is-scrolled { min-height: 70px; padding: 14px 20px; }
    .brand { gap: 9px; font-size: 14px; }
    .brand__dot { width: 18px; height: 18px; }
    .header-actions { gap: 11px; margin: 0; }
    .header-cta { display: none; }
    .menu-toggle { width: 42px; height: 40px; }
    .menu-toggle span { width: 40px; }
    .menu-toggle span:first-child { top: 13px; }
    .menu-toggle span:last-child { top: 25px; width: 29px; }
    .menu-toggle[aria-expanded="true"] span:first-child, .menu-toggle[aria-expanded="true"] span:last-child { top: 20px; width: 40px; }
    .site-menu { padding: 22px 20px; }
    .site-menu__grid { grid-template-columns: 1fr; align-items: center; }
    .site-menu__aside { display: none; }
    .menu-links a { gap: 13px; font-size: clamp(42px, 13vw, 68px); }
    .site-menu__bottom { flex-wrap: wrap; gap: 13px 22px; }
    .site-menu__bottom span { width: 100%; margin: 10px 0 0; }

    .hero { min-height: 680px; }
    .hero-frame--one, .hero-frame--two { width: 42vw; }
    .hero-frame--one { left: 8vw; bottom: 22vh; }
    .hero-frame--two { right: 8vw; top: 23vh; }
    .hero-frame--main { clip-path: inset(31% 18% 31% 18% round 2px); }
    .hero-frame--main img { object-position: 48% 48%; }
    .hero__statement { top: 126px; width: calc(100% - 40px); font-size: 15px; }
    .hero__statement span { display: inline; }
    .hero__expertise { top: 225px; right: auto; left: 20px; width: calc(100% - 40px); font-size: 14px; }
    .hero__expertise li { min-height: 38px; }
    .hero__title-wrap { bottom: 34px; }
    .hero__eyebrow { margin-bottom: 16px; font-size: 12px; }
    .hero h1 { font-size: clamp(72px, 21.3vw, 128px); line-height: .81; letter-spacing: -.07em; }

    .introduction { min-height: 76svh; padding: 110px 20px 100px; }
    .introduction h2 { margin: 30px 0 36px; font-size: clamp(31px, 8.4vw, 45px); }
    .services { padding: 80px 20px 110px; }
    .services > .section-label { margin-bottom: 35px; }
    .services__headline { margin-bottom: 60px; font-size: clamp(38px, 10.7vw, 56px); line-height: .96; }
    .service-row { grid-template-columns: 38px 1fr; gap: 14px; min-height: auto; padding: 38px 0 44px; }
    .service-row__number { grid-row: 1 / span 2; align-self: start; padding-top: 3px; }
    .service-row__copy { max-width: none; }
    .service-row__copy h3 { font-size: 18px; }
    .service-tags { grid-column: 2; margin-top: 16px; }
    .service-tags li { font-size: 12px; }
    .service-cursor-number { display: none; }

    .projects { min-height: auto; }
    .projects__inner { padding: 115px 20px 150px; }
    .projects__intro-stage { height: auto; }
    .projects__intro { position: relative; top: auto; margin: 0; }
    .projects__intro h2 { font-size: clamp(44px, 12vw, 64px); }
    .projects__intro h2 br { display: none; }
    .projects__intro > p { max-width: 330px; margin-top: 25px; }
    .projects__grid { gap: 95px; margin-top: 90px; }
    .project-card, .project-card--narrow { width: 100%; }
    .project-card figure { border-radius: 7px; }
    .project-card__meta h3 { font-size: 27px; }

    .team { padding: 115px 0 90px; }
    .team__intro > .section-label { margin-bottom: 35px; }
    .team__intro-grid { grid-template-columns: 1fr; gap: 32px; }
    .team__intro h2 { font-size: clamp(52px, 15.5vw, 78px); }
    .team__intro h2 span { margin-left: 0; }
    .team__intro p { font-size: 16px; }
    .team-rail { margin-top: 35px; }
    .team-rail__toolbar { align-items: flex-start; font-size: 11px; }
    .team-controls button { width: 40px; height: 40px; }
    .team-rail__viewport { height: 505px; }
    .team-track { padding-block: 105px 115px; }
    .team-card { flex-basis: 235px; width: 235px; height: 335px; }
    .team-card > img { height: 224px; }
    .team-card__body { height: 95px; padding: 12px 15px 16px; }
    .team-card__body h3 { font-size: 19px; }
    .team-card__body p { font-size: 12px; }
    .team__coffee { padding-top: 46px; }

    .process { padding: 110px 20px 125px; }
    .process > h2 { margin-bottom: 55px; }
    .process__grid { grid-template-columns: 1fr; gap: 45px; }
    .process__grid article { display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; }
    .process__grid article > span { grid-row: 1 / span 2; }
    .process__grid h3 { margin: 0 0 13px; }
    .process__grid p { grid-column: 2; }

    .faq { grid-template-columns: 1fr; gap: 60px; min-height: auto; padding: 110px 20px; }
    .faq__title h2 { font-size: clamp(66px, 18vw, 92px); }
    .faq summary { min-height: 83px; font-size: 16px; }
    .contact-cta { min-height: 78svh; padding: 105px 20px; }
    .contact-cta h2 { font-size: clamp(58px, 16vw, 86px); }
    .contact-cta > p br { display: none; }

    .footer { padding: 30px 20px 24px; }
    .footer__socials { flex-wrap: wrap; gap: 14px 28px; }
    .footer__grid { grid-template-columns: 1fr; gap: 75px; }
    .footer__contact { grid-template-columns: 1fr 1fr; row-gap: 40px; }
    .footer__contact > div:last-child { grid-column: 1 / -1; }
    .footer__marquee { font-size: 64px; }
    .footer__bottom { flex-direction: column; }

    .contact-page { padding-top: 70px; }
    .contact-page__hero { min-height: calc(85svh - 70px); padding: 95px 20px 48px; }
    .contact-page__hero > p { margin-bottom: 32px; }
    .contact-page__hero h1 { font-size: clamp(68px, 20vw, 105px); }
    .contact-page__hero h1 span { margin-left: 0; }
    .contact-page__hero > a { right: 20px; bottom: 45px; width: 50px; height: 50px; }
    .contact-page__content { grid-template-columns: 1fr; gap: 90px; padding: 105px 20px; }
    .contact-page__intro > p { font-size: 31px; }
    .contact-form input, .contact-form textarea { font-size: 18px; }
    .subpage-footer { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 20px; }

    .project-page, .legal-page { padding-top: 70px; }
    .project-page__topbar { padding: 22px 20px; }
    .project-page__topbar nav a:first-child { display: none; }
    .project-detail__heading { grid-template-columns: 1fr; gap: 55px; padding: 85px 20px 48px; }
    .project-detail__heading h1 { font-size: clamp(68px, 21vw, 105px); }
    .project-detail__visual { margin: 0; aspect-ratio: 4 / 5; }
    .project-detail__status { grid-template-columns: 1fr; gap: 42px; padding: 90px 20px 105px; }
    .legal-page main { padding: 85px 20px 110px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .hero__water { display: none; }
    .reveal { opacity: 1; transform: none; }
}