@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-variable.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }
/* Gary Leleu — palette, layout and motion. No build step required. */
:root {
  --ink: #103e3b;
  --light: #eee9db;
  --green: #b8d3b1;
  --hero-background: url('assets/gradient.jpg');
  --title-gradient-light: linear-gradient(115deg, #efb4c9 4%, #f3e7d8 50%, #bfdcbc 96%);
  --title-gradient-paper: linear-gradient(115deg, #9e526c 4%, #315e58 52%, #64794e 96%);
  --x: 0;
  --y: 0;
}

/* Base and keyboard navigation */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--light); color: var(--ink); font-family: 'Satoshi', sans-serif; font-size: 16px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 7px; }
::selection { background: var(--green); color: var(--ink); }
.skip-link { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 12px 20px; background: var(--light); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* Hero: background and portrait move independently. */
.hero { height: 100svh; min-height: 680px; position: relative; overflow: hidden; background: var(--ink); color: var(--light); isolation: isolate; }
.landscape { position: absolute; inset: -4%; z-index: -4; background: var(--hero-background) center / cover no-repeat; transform: translate(calc(var(--x) * -10px), calc(var(--y) * -8px)) scale(1.02); will-change: transform; }
.portrait-wrap { position: absolute; left: 3%; bottom: -1%; width: 100%; height: 94%; z-index: 1; transform: translate(calc(var(--x) * 22px), calc(var(--y) * 12px)); will-change: transform; pointer-events: none; }
.portrait { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }

/* Header */
.hero nav { position: relative; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 105px; padding: 30px 4.5vw; }
.brand { font-size: 23px; letter-spacing: -1px; font-weight: 500; }
.brand i { font-style: normal; color: var(--green); }
.hero nav > .brand { justify-self: start; font-size: 21px; white-space: nowrap; color: var(--light); }
.navlinks { display: flex; align-items: center; margin-left: 0; gap: 25px; font-size: 15px; color: var(--light); }
.contact { border: 1px solid #eee9db70; border-radius: 40px; padding: 11px 17px; }
.contact-arrow { margin-left: 16px; vertical-align: middle; }

/* Editorial title and CTA share a right alignment, with a separate side note. */
.hero-copy { position: absolute; left: 7%; top: 32%; width: 40%; text-align: right; color: var(--light); z-index: 3; }
.hero h1 { font-family: 'Satoshi', sans-serif; font-size: clamp(52px, 5.2vw, 90px); font-weight: 300; line-height: 1.04; letter-spacing: -.055em; margin: 0 0 27px; text-shadow: 0 2px 30px #062c2930; }
.hero h1 em { font-family: inherit; font-style: normal; font-weight: inherit; }
.hero-cta { display: inline-flex; justify-content: center; align-items: center; gap: 15px; border: 1px solid #eee9db35; background: #103e3bd9; backdrop-filter: blur(8px); border-radius: 40px; padding: 14px 20px; color: var(--light); font-size: 15px; transition: background .2s, transform .2s; }
.hero-cta:hover { background: var(--ink); transform: translateY(-2px); }
.hero-cta > span:first-child { color: var(--green); font-size: 13px; }
.hero-aside { position: absolute; right: 4.5%; bottom: 24%; width: 220px; color: var(--ink); font-size: 16px; line-height: 1.6; z-index: 4; margin: 0; }
.hero-bottom { position: absolute; left: 4.5vw; right: 4.5vw; bottom: 32px; z-index: 6; display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.hero-bottom span { line-height: 1.7; }
.scroll { display: flex; gap: 12px; align-items: center; color: var(--light); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.hero-bottom .scroll span { color: inherit; font-size: 15px; }

/* Approach */
.intro { padding: 130px 9vw 110px; display: grid; grid-template-columns: 1fr 2fr; gap: 8vw; }
.label { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; }
.intro h2 { font-family: 'Satoshi', sans-serif; font-size: clamp(30px, 3.8vw, 62px); font-weight: 400; line-height: 1.18; letter-spacing: -.045em; margin: 0 0 34px; }
.intro h2 em { font-family: 'Satoshi', sans-serif; font-weight: 400; }
.intro p { max-width: 520px; font-size: 16px; line-height: 1.8; color: #44615a; }

/* Native accessible accordions */
.expertise { margin: 0 9vw 100px; border-top: 1px solid #103e3b35; }
.expertise details { border-bottom: 1px solid #103e3b35; padding: 30px 0; }
.expertise summary { display: flex; gap: 7vw; align-items: center; cursor: pointer; list-style: none; }
.expertise summary::-webkit-details-marker { display: none; }
.expertise summary .num { font-size: 14px; }
.expertise h3 { font-family: 'Satoshi', sans-serif; font-weight: 400; font-size: clamp(27px, 3vw, 46px); letter-spacing: -.04em; margin: 0; }
.plus { margin-left: auto; font-size: 27px; font-weight: 300; }
.expertise details[open] .plus { transform: rotate(45deg); }
.expertise details p { max-width: 540px; margin: 25px 0 0 8.3vw; line-height: 1.8; color: #44615a; }

/* Progressive enhancement: content stays visible without JavaScript. */
.reveal { opacity: 1; }
body.motion .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s, transform .9s; }
body.motion .reveal.visible { opacity: 1; transform: none; }

@media (min-width: 1600px) {
  .hero { min-height: 800px; }
}

@media (max-width: 1000px) and (min-width: 701px) {
  .hero-copy { left: 4%; width: 50%; }
  .hero h1 { font-size: 60px; }
  .portrait-wrap { left: 5%; }
  .hero-aside { right: 4%; width: 190px; font-size: 15px; }
}

@media (max-width: 700px) {
  .navlinks > a:not(.contact) { display: none; }
  .hero { min-height: 760px; height: 100svh; }
  .hero nav { height: 85px; padding: 24px 6vw; }
  .hero nav > .brand { font-size: 19px; }
  .navlinks { gap: 18px; color: var(--light); }
  .contact { border: 0; padding: 10px 0; font-size: 14px; }
  .contact-arrow { margin-left: 4px; }
  .portrait-wrap { height: 78%; width: 205%; left: -44%; bottom: -1%; }
  .hero-copy { top: calc(34% + 100px); left: 6%; width: 88%; text-align: left; }
  .hero h1 { font-size: clamp(42px, 10.8vw, 58px); max-width: none; margin-bottom: 24px; }
  .hero-cta { font-size: 14px; padding: 12px 17px; gap: 12px; }
  .hero-aside { right: 6%; bottom: 13%; width: 155px; font-size: 14px; text-shadow: 0 0 20px #eee9db70; }
  .hero-bottom { bottom: 23px; left: 6%; right: 6%; }
  .scroll { font-size: 11px; letter-spacing: .07em; }
  .landscape { background-position: 48% center; }
  .intro { padding: 75px 7vw; display: block; }
  .intro .label { margin-bottom: 35px; }
  .intro h2 { font-size: 35px; }
  .intro p { font-size: 16px; }
  .expertise { margin: 0 7vw 70px; }
  .expertise summary { gap: 25px; }
  .expertise details { padding: 24px 0; }
  .expertise details p { margin-left: 40px; font-size: 16px; }
  .brand { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .portrait-wrap, .landscape { transform: none !important; }
  body.motion .reveal { opacity: 1; transform: none; }
}

/* Sparse digital accents echo the scarf and cinematic light. */
.digital-field { position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.digital-field i { position:absolute; left:var(--px); top:var(--py); width:3px; height:3px; border-radius:50%; background:#cce9d6; box-shadow:0 0 12px 3px #b8e5d640; opacity:.65; transform:translate(calc(var(--x) * var(--shift)),calc(var(--y) * var(--shift))); }
.digital-field i:nth-child(3n) { background:#e7b7c0; box-shadow:0 0 14px 3px #e7b7c030; width:4px; height:4px; }
.digital-field i:nth-child(4n) { border-radius:0; width:7px; height:1px; }
.signal { position:absolute; width:28%; height:19%; border:1px solid #cce9d62e; border-radius:50%; transform:translate(calc(var(--x) * -12px),calc(var(--y) * -9px)) rotate(-28deg); mask-image:linear-gradient(90deg,transparent,#000 35%,#000 65%,transparent); }
.signal-one { left:12%; top:66%; }
.signal-two { left:36%; top:77%; width:24%; height:14%; border-color:#e7b7c033; }
@media(max-width:700px) { .digital-field { opacity:.55; } .signal { width:50%; } }
@media(prefers-reduced-motion:reduce) { .digital-field i,.signal { transform:none; } }

/* Continuous floating particles and soft orbital curves. */
.digital-field i { opacity:.7; animation:particle-float 11s ease-in-out infinite; }
.digital-field i:nth-child(2n) { animation-delay:-4s; animation-duration:14s; }
.digital-field i:nth-child(3n) { animation-delay:-8s; animation-duration:17s; }
.digital-field i:nth-child(4n) { border-radius:50%; width:3px; height:3px; }
.signal { border-color:#cce9d660; animation:orbit-breathe 16s ease-in-out infinite; }
.signal-two { border-color:#e7b7c060; animation-delay:-8s; }
.signal-face { left:54%; top:23%; width:24%; height:39%; border-color:#cce9d64a; animation-delay:-4s; }
@keyframes particle-float {
  0%,100% { opacity:.35; translate:0 0; }
  35% { opacity:.9; translate:9px -18px; }
  70% { opacity:.55; translate:-7px -9px; }
}
@keyframes orbit-breathe {
  0%,100% { opacity:.45; scale:1; rotate:0deg; }
  50% { opacity:.85; scale:1.04; rotate:5deg; }
}
@media(max-width:700px) { .signal-face { left:45%; width:45%; top:25%; } }
@media(prefers-reduced-motion:reduce) { .digital-field i,.signal { animation:none; translate:none; scale:none; rotate:none; } }

/* Full bleed → a rounded composition, inset by exactly 20px at full progress. */
.hero-sequence { position: relative; }
.hero-stage { position: relative; height: 100svh; }
.hero-stage .hero { position: absolute; inset: var(--hero-inset, 0px); height: auto; min-height: 0; border-radius: var(--hero-radius, 0px); }
body.hero-motion .hero-sequence { height: calc(100svh + 360px); }
body.hero-motion .hero-stage { position: sticky; top: 0; }

/* Quiet, live information around the existing portrait composition. */
.language-switch { display: inline-flex; justify-self: end; margin-left: 0; color: var(--ink); align-items: center; gap: 7px; font-size: 14px; }
.language-switch a { border: 0; background: transparent; color: inherit; padding: 10px 2px; font-size: inherit; opacity: .5; transition: opacity .2s; }
.language-switch a[aria-current="page"], .language-switch a:hover { opacity: 1; }
.language-switch a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.language-switch > span { opacity: .35; }
.hero-meta { position: absolute; top: 119px; left: 4.5vw; right: 4.5vw; z-index: 5; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 16px; font-size: 15px; letter-spacing: .015em; }
.hero-meta p { margin: 0; }
.local-clock { display: flex; flex-wrap: wrap; gap: 9px; font-variant-numeric: tabular-nums; color: var(--light); }
.location { text-align: center; color: var(--light); }
.availability { display: flex; align-items: center; justify-content: flex-end; gap: 11px; color: var(--ink); }
.status-dot { position: relative; display: inline-block; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #c4f79a; color: #c4f79a; box-shadow: 0 0 9px #c4f79a55; }
.status-dot::after { content: ''; position: absolute; inset: -3px; border: 1px solid currentColor; border-radius: 50%; animation: status-ping 2.4s ease-out infinite; }
@keyframes status-ping { 0% { transform: scale(.65); opacity: .7; } 80%,100% { transform: scale(2.2); opacity: 0; } }
@media (max-width: 700px) {
  .navlinks { gap: 17px; }
  .language-switch { font-size: 14px; color: var(--light); }
  .hero-meta { top: 102px; left: 6vw; right: 6vw; grid-template-columns: .95fr .9fr 1.4fr; align-items: center; gap: 8px; font-size: 12px; line-height: 1.45; }
  .local-clock { flex-direction: column; flex-wrap: nowrap; gap: 2px; font-size: 12px; letter-spacing: 0; }
  .local-clock > span { display: none; }
  .local-clock time { white-space: nowrap; }
  .location { grid-column: 2; grid-row: 1; text-align: center; color: #eee9dbb0; }
  .availability { grid-column: 3; grid-row: 1; justify-content: flex-end; color: var(--light); gap: 7px; font-size: 12px; }
  .availability > span:last-child { min-width: 0; }
  .status-dot { background: #c4f79a; color: #c4f79a; }
  .hero-aside { left: 6%; right: 6%; bottom: 64px; width: auto; max-width: none; padding: 0; background: none; border-radius: 0; color: var(--light); text-shadow: 0 2px 14px #062c2966; }
}
@media (max-height: 650px) and (min-width: 701px) {
  .hero-meta { top: 92px; }
  .hero-copy { top: 30%; }
  .hero h1 { font-size: clamp(40px, 4.7vw, 64px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage { --hero-inset: 20px; --hero-radius: 28px; }
  .status-dot::after { display: none; }
}

/* Native circular cursor: precise tracking, with contrast on light and dark areas. */
@media (hover: hover) and (pointer: fine) {
  html, body, body * { cursor: url('assets/cursor-circle.svg') 12 12, auto; }
  a, a *, button, button *, summary, summary *, [role="button"], [role="button"] * {
    cursor: url('assets/cursor-circle-hover.svg') 18 18, pointer;
  }
}

/* Editorial sections: warm paper, deep green and a quiet celadon accent. */
.content-section { padding: 110px 9vw; scroll-margin-top: 35px; }
.section-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 8vw; align-items: start; margin-bottom: 52px; }
.section-heading .label { margin: 10px 0 0; }
/* Leave room for descenders within the gradient text background. */
.section-heading h2 { margin: 0; padding-bottom: .18em; font-size: clamp(38px, 4.7vw, 76px); line-height: 1.08; font-weight: 400; letter-spacing: -.055em; }
.section-heading h2 em, .about h2 em { color: #597863; font-style: normal; }
.section-intro { max-width: 570px; margin: -22px 0 56px auto; color: #44615a; line-height: 1.7; font-size: 16px; }
.about-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 64px; }
.about-top .label { margin: 0; }
.about-signature { font-size: 15px; }
.about-signature span { display: inline-block; font-size: 25px; vertical-align: middle; margin-left: 18px; }
.about-grid { display: grid; grid-template-columns: .85fr 1.45fr; gap: 9vw; align-items: start; }
.about-copy p { margin: 0 0 24px; font-size: 16px; line-height: 1.75; color: #44615a; }
.about-copy .kicker { color: var(--ink); font-size: 25px; letter-spacing: -.04em; margin-bottom: 26px; }
.about h2 { margin: 0; font-size: clamp(44px, 6.1vw, 98px); font-weight: 400; line-height: 1.06; letter-spacing: -.055em; }
.about-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; border-top: 1px solid #103e3b30; margin-top: 70px; padding-top: 30px; }
.principle-number { font-size: 13px; color: #597863; }
.about-principles h3 { font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.035em; font-weight: 500; margin: 19px 0 10px; }
.about-principles p { color: #44615a; font-size: 16px; line-height: 1.6; margin: 0; }
.expertise { border-top: 0; margin-bottom: 0; padding: 20px 0 0; scroll-margin-top: 35px; }
.expertise .section-heading { border-top: 0; padding-top: 75px; margin-bottom: 55px; }
.expertise details:first-of-type { border-top: 1px solid #103e3b35; }
.text-link { display: inline-flex; align-items: center; gap: 24px; font-size: 15px; border-bottom: 1px solid currentColor; padding: 0 0 9px; }
.text-link svg { flex-shrink: 0; transition: transform .25s; }
.text-link:hover svg { transform: translate(3px, -3px); }

/* Project panels stack as in the earlier site, inside the new rounded frames. */
.portfolio { padding-top: 120px; padding-bottom: 0; }
.project-stack { display: grid; gap: 28px; }
.project-card { position: sticky; top: 24px; display: grid; grid-template-columns: .8fr 1.2fr; border-radius: 24px; overflow: hidden; min-height: 530px; background: var(--ink); color: var(--light); box-shadow: 0 -8px 25px #103e3b08; }
.project-card:nth-child(2) { top: 40px; background: #d4ddcb; color: var(--ink); }
.project-card:nth-child(3) { top: 56px; background: #d9c7bd; color: var(--ink); }
.project-card:nth-child(4) { top: 72px; background: #cadbe0; color: var(--ink); }
.project-card:nth-child(5) { top: 88px; background: #d9decf; color: var(--ink); }
.project-copy { padding: clamp(28px, 3.7vw, 60px); display: flex; flex-direction: column; align-items: flex-start; }
.project-topline { display: flex; width: 100%; justify-content: space-between; gap: 16px; font-size: 12px; opacity: .7; }
.project-copy h3 { font-size: clamp(34px, 3.9vw, 62px); line-height: 1.12; padding-bottom: .18em; letter-spacing: -.05em; font-weight: 400; margin: 68px 0 25px; }
.project-copy > p { font-size: 16px; line-height: 1.7; max-width: 330px; margin: 0 0 24px; }
.project-copy .project-tags { font-size: 13px; line-height: 1.8; opacity: .7; margin: auto 0 20px; padding-top: 8px; }
.project-visual { min-width: 0; position: relative; overflow: hidden; background: #e5dfd1; }
.project-visual > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.process { position: relative; isolation: isolate; overflow: hidden; background: var(--ink) var(--hero-background) center / cover no-repeat; color: var(--light); }
.process .label, .process .section-heading h2 em { color: var(--light); }
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 70px; }
.process-grid article { border-top: 1px solid #b8d3b14d; padding-top: 24px; }
.process-number { font-size: 14px; color: var(--green); }
.process-grid h3 { font-size: 28px; letter-spacing: -.04em; font-weight: 400; margin: 45px 0 18px; }
.process-grid p { font-size: 16px; line-height: 1.75; color: #eee9dbbf; margin: 0; }
.faq { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8vw; }
.faq .section-heading { display: block; margin: 0; }
.faq .section-heading .label { margin: 0 0 35px; }
/* Keep the full descender inside the gradient-painted title area. */
.faq .section-heading h2 { line-height: 1.2; padding-bottom: .25em; }
.faq .section-heading h2 em { display: inline-block; padding-bottom: .12em; }
.faq-list details { border-top: 1px solid #103e3b35; padding: 24px 0; }
.faq-list details:last-child { border-bottom: 1px solid #103e3b35; }
.faq-list summary { display: flex; align-items: baseline; gap: 24px; cursor: pointer; list-style: none; font-size: 20px; line-height: 1.4; letter-spacing: -.025em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details[open] .plus { transform: rotate(45deg); }
.faq-list details p { color: #44615a; font-size: 16px; line-height: 1.75; margin: 20px 35px 0 0; }
@media (max-width: 1000px) {
  .content-section { padding: 85px 7vw; }
  .about-grid { gap: 5vw; }
  .project-card { min-height: 480px; grid-template-columns: .9fr 1.1fr; }
  .project-copy { padding: 28px; }
  .project-copy h3 { margin-top: 45px; }
  .project-copy > p { font-size: 16px; }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}
@media (max-width: 700px) {
  .content-section { padding: 70px 7vw; }
  .section-heading { display: block; margin-bottom: 38px; }
  .section-heading .label { margin: 0 0 30px; }
  .section-heading h2 { font-size: clamp(36px, 9vw, 54px); }
  .section-intro { margin: 0 0 35px; font-size: 16px; }
  .about-top { margin-bottom: 40px; }
  .about-signature { font-size: 13px; }
  .about-grid { display: flex; flex-direction: column-reverse; gap: 36px; }
  .about h2 { font-size: clamp(44px, 11vw, 65px); }
  .about-copy p { font-size: 16px; }
  .about-copy .kicker { font-size: 24px; }
  .about-principles { grid-template-columns: 1fr; gap: 26px; margin-top: 35px; }
  .about-principles > div { display: grid; grid-template-columns: 28px 1fr; gap: 4px 15px; }
  .principle-number { padding-top: 5px; }
  .about-principles h3 { margin: 0 0 5px; font-size: 23px; }
  .about-principles p { grid-column: 2; }
  .expertise .section-heading { padding-top: 50px; margin-bottom: 40px; }
  .expertise h3 { font-size: clamp(22px, 5.7vw, 32px); }
  .project-stack { gap: 24px; }
  .project-card { position: relative; top: auto !important; display: flex; flex-direction: column-reverse; min-height: 0; border-radius: 18px; }
  .project-visual { height: 290px; flex-shrink: 0; }
  .project-copy { padding: 26px; }
  .project-copy h3 { margin: 30px 0 18px; font-size: 38px; }
  .project-copy .project-tags { margin-bottom: 15px; padding-top: 5px; }
  .project-topline { font-size: 12px; }
  .process-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 45px; }
  .process-grid h3 { margin-top: 22px; }
  .process-grid p { font-size: 16px; }
  .faq { display: block; }
  .faq .section-heading { margin-bottom: 40px; }
  .faq-list summary { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card { position: relative; top: auto !important; }
}

/* One SVG arrow treatment across calls to action and both languages. */
.icon-arrow { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: middle; flex-shrink: 0; }

/* The original scroll finale, recolored for Gary. Static content is the fallback. */
.footer { position: relative; width: 100%; margin: 20px 0; padding: 0; color: var(--light); }
.footer-contact-target { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.footer-stage { position: relative; width: calc(100% - 40px); margin-inline: auto; min-height: 650px; padding: 85px 7vw 35px; border-radius: 28px; background: var(--ink); overflow: hidden; }
.footer-invitation { text-align: center; }
.footer-invitation > p { max-width: 540px; margin: 0 auto 30px; font-size: 16px; line-height: 1.6; color: #eee9dbbb; }
.footer-invitation h2 { margin: 0; font-size: clamp(48px, 11.8vw, 210px); font-weight: 400; line-height: .95; letter-spacing: -.06em; color: var(--green); }
.footer-title-break { display: none; }
.footer-content { margin-top: 55px; }
.footer-contact-panel { display: grid; justify-items: center; gap: 22px; text-align: center; }
.footer-contact-panel > p { margin: 0; font-size: 16px; line-height: 1.5; }



.footer-contact-panel > .footer-location { color: #eee9db99; font-size: 15px; }
.footer-bottom { margin-top: 85px; padding-top: 25px; border-top: 1px solid #eee9db30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 30px; font-size: 14px; color: #eee9dbb3; }
.footer-identity { display: grid; gap: 10px; }
.footer-identity .brand { color: var(--light); justify-self: start; }
.footer-links { justify-self: end; display: flex; align-items: center; gap: 22px; }
.footer-links a { display: inline-flex; align-items: center; gap: 8px; }
.footer-links a:hover { color: var(--green); }

body.footer-motion .footer { height: 230svh; margin-bottom: 0; }
body.footer-motion .footer-stage { position: sticky; top: var(--footer-frame-inset, 20px); width: calc(100% - 2 * var(--footer-frame-inset, 20px)); height: calc(100svh - 2 * var(--footer-frame-inset, 20px)); border-radius: var(--footer-frame-radius, 28px); min-height: 0; padding: 0; }
body.footer-motion .footer-invitation { position: absolute; inset: 0; display: grid; place-content: center; padding: 35px 7vw; transform: translateY(var(--footer-title-y, 28px)) scale(var(--footer-title-scale, 1)); transform-origin: center; will-change: transform; pointer-events: none; }
body.footer-motion .footer-invitation > p { opacity: var(--footer-copy-opacity, 1); }
body.footer-motion .footer-content { position: absolute; inset: 0; margin: 0; opacity: var(--footer-content-opacity, 0); transform: translateY(var(--footer-content-y, 34px)); will-change: opacity, transform; pointer-events: none; }
body.footer-motion .footer-stage.is-contact-visible .footer-content { pointer-events: auto; }
body.footer-motion .footer-inner { position: relative; height: 100%; }
body.footer-motion .footer-contact-panel { position: absolute; top: calc(50% + 55px); left: 7vw; right: 7vw; }
body.footer-motion .footer-bottom { position: absolute; bottom: 35px; left: 7vw; right: 7vw; margin-top: 0; }
@media (max-width: 1000px) {
  .footer-bottom { grid-template-columns: 1fr 1fr; }
  .footer-bottom > span { display: none; }
}
@media (max-width: 700px) {
  .footer-stage { min-height: 0; padding: 65px 22px 25px; }
  .footer-invitation h2 { font-size: clamp(68px, 20vw, 110px); }
  .footer-title-break { display: initial; }
  .footer-invitation > p { font-size: 16px; max-width: 290px; }
  .footer-contact-panel { gap: 18px; }
  .footer-contact-panel > p { font-size: 16px; max-width: 280px; }
  .footer-contact-panel > .footer-location { font-size: 14px; }


  .footer-bottom { grid-template-columns: 1fr; gap: 20px; font-size: 13px; }
  .footer-links { justify-self: start; gap: 22px; }
  body.footer-motion .footer { height: 210svh; }
  body.footer-motion .footer-invitation { padding: 30px 22px; }
  body.footer-motion .footer-contact-panel { top: calc(50% + 45px); left: 22px; right: 22px; }
  body.footer-motion .footer-bottom { bottom: 24px; left: 22px; right: 22px; grid-template-columns: 1fr 1fr; gap: 15px; align-items: end; }
  body.footer-motion .footer-links { flex-direction: column; align-items: flex-end; justify-self: end; gap: 12px; }
  body.footer-motion .footer-identity .brand { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-invitation, .footer-content { will-change: auto; }
}

/* The same image and framing as the hero, with contrast adapted to each area. */
.footer-stage {
  background: var(--ink) var(--hero-background) center / cover no-repeat;
  isolation: isolate;
}
.footer { color: var(--ink); }
.footer-invitation { mix-blend-mode: difference; }
.footer-invitation h2, .footer-invitation > p { color: var(--light); }


.footer-contact-panel > .footer-location { color: var(--ink); }
.footer-bottom { color: var(--ink); border-top-color: #103e3b40; }
.footer-identity { color: var(--light); }
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 700px) {
  .footer-identity, .footer-identity .brand { color: var(--ink); }
}

/* Seamless client-logo loop, following the portfolio. */
.client-marquee { --logo-count: 11; --logo-width: clamp(145px, 12vw, 200px); --logo-gap: clamp(40px, 4vw, 72px); position: relative; padding: clamp(48px, 6vw, 96px) 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logo-track { display: flex; gap: 0; width: max-content; animation: client-logo-loop 55s linear infinite; }
.logo-group { display: flex; flex: 0 0 auto; justify-content: space-around; align-items: center; gap: var(--logo-gap); width: max(100vw, calc(var(--logo-count) * (var(--logo-width) + var(--logo-gap)))); min-width: 0; margin: 0; padding: 0 calc(var(--logo-gap) / 2); list-style: none; }
.logo-group li { flex: 0 0 var(--logo-width); width: var(--logo-width); min-width: 0; overflow: hidden; display: grid; place-items: center; }
.logo-group img { display: block; width: 100%; max-width: 100%; min-width: 0; height: 140px; object-fit: contain; mix-blend-mode: multiply; opacity: .78; transition: opacity .25s; }
.client-marquee:focus-within .logo-track { animation-play-state: paused; }
.logo-group li:hover img { opacity: 1; }
.client-marquee:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; }
@keyframes client-logo-loop { to { transform: translateX(-50%); } }
@media (max-width: 700px) {
  .client-marquee { padding-block: 48px; }
  .logo-group img { height: 115px; }
}
@media (prefers-reduced-motion: reduce) {
  .client-marquee { mask-image: none; padding-inline: 7vw; }
  .logo-track { display: block; width: 100%; animation: none; }
  .logo-group { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; min-width: 0; gap: 15px; padding: 0; }
  .logo-group[aria-hidden="true"] { display: none; }
  .logo-group li { width: auto; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 700px) {
  .logo-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A restrained digital layer: grid, scanning light and precise progress. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 1000; pointer-events: none; background: #b8d3b1; box-shadow: 0 1px 0 #103e3b35; transform: scaleX(var(--page-progress, 0)); transform-origin: left; }
.hero-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-scan { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent 10%, #b8d3b1a0 45%, #eee9dbb0 60%, transparent 90%); box-shadow: 0 -8px 25px #b8d3b126; animation: hero-scan 13s ease-in-out infinite; }
@keyframes hero-scan { 0% { top: 15%; opacity: 0; } 15% { opacity: .6; } 70% { top: 88%; opacity: .25; } 80%,100% { top: 88%; opacity: 0; } }

/* Original key figures, with a single entrance count rather than a loop. */
.key-figures { position: relative; overflow: hidden; margin-top: 60px; padding: 35px 0 0; border-top: 1px solid #103e3b30; background: transparent; color: var(--ink); }
.key-figures > .label { position: relative; margin: 0 0 35px; font-weight: 400; color: #44615a; line-height: 1.6; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric { min-width: 0; padding-left: 32px; border-left: 1px solid #103e3b30; }
.metric:first-child { border-left: 0; padding-left: 0; }
.metric-value { display: flex; align-items: baseline; font-size: clamp(60px, 7vw, 115px); letter-spacing: 0; line-height: 1.05; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--ink); }
.metric-value > [data-count] { min-width: 1.1em; flex-shrink: 0; }
.metric-plus { font-size: .48em; font-weight: 300; margin-left: 7px; align-self: flex-start; padding-top: .17em; }
.metric p { font-size: 16px; color: #44615a; line-height: 1.5; margin: 18px 0 0; }

/* Small framing details appear as a project is inspected. */
.project-visual { --digital-accent: var(--ink); }

.project-visual::after { content: ''; position: absolute; inset: 18px; z-index: 3; pointer-events: none; opacity: 0; transform: scale(.98); transition: opacity .35s, transform .35s; background: linear-gradient(var(--digital-accent),var(--digital-accent)) left top / 16px 1px no-repeat, linear-gradient(var(--digital-accent),var(--digital-accent)) left top / 1px 16px no-repeat, linear-gradient(var(--digital-accent),var(--digital-accent)) right top / 16px 1px no-repeat, linear-gradient(var(--digital-accent),var(--digital-accent)) right top / 1px 16px no-repeat, linear-gradient(var(--digital-accent),var(--digital-accent)) left bottom / 16px 1px no-repeat, linear-gradient(var(--digital-accent),var(--digital-accent)) left bottom / 1px 16px no-repeat, linear-gradient(var(--digital-accent),var(--digital-accent)) right bottom / 16px 1px no-repeat, linear-gradient(var(--digital-accent),var(--digital-accent)) right bottom / 1px 16px no-repeat; }
@media (hover: hover) and (pointer: fine) {
  .project-visual > img { transition: scale .8s cubic-bezier(.2,.65,.3,1); }
  .project-card:hover .project-visual::after, .project-card:focus-within .project-visual::after { opacity: .75; transform: none; }
  .project-card:hover .project-visual > img { scale: 1.025; }
}
@media (max-width: 700px) {

  .key-figures { padding: 26px 0 0; margin-top: 38px; }
  .key-figures > .label { font-size: 14px; margin-bottom: 28px; }
  .metrics-grid { grid-template-columns: 1fr; gap: 26px; }
  .metric, .metric:first-child { padding: 0 0 25px; border: 0; border-bottom: 1px solid #103e3b25; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; }
  .metric:last-child { border-bottom: 0; padding-bottom: 0; }
  .metric-value { font-size: clamp(52px, 14vw, 76px); }
  .metric p { margin: 0; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scan { display: none; }
  .project-card:hover .project-visual > img { scale: none; }
}

/* The hero's digital atmosphere continues through the footer finale. */
.footer-digital { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: var(--footer-digital-opacity, .55); }

.footer-scan { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, #b8d3b180 30%, #eee9dbd9 52%, #103e3b55 75%, transparent 95%); box-shadow: 0 -10px 28px #b8d3b12e; animation: hero-scan 13s ease-in-out -3s infinite; }
.footer-particles { opacity: .75; }
.footer-signal-one { left: 8%; top: 58%; width: 43%; height: 24%; }
.footer-signal-two { left: 55%; top: 16%; width: 37%; height: 29%; border-color: #103e3b55; animation-delay: -8s; }
.footer-invitation { position: relative; z-index: 1; }
.footer-content { position: relative; z-index: 2; }
@media (max-width: 700px) {

  .footer-particles { opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-scan { display: none; }

}

/* Smooth disclosures keep native details/summary semantics and keyboard use. */
.expertise details.is-animating, .faq-list details.is-animating { overflow: hidden; }
.expertise details[data-accordion-enhanced] .plus, .faq-list details[data-accordion-enhanced] .plus { transform: rotate(0deg); transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.expertise details[data-accordion-enhanced].is-expanded .plus, .faq-list details[data-accordion-enhanced].is-expanded .plus { transform: rotate(45deg); }

/* Two independent, automatic sweeps, shared by the hero and footer. */
.hero-scan-vertical, .footer-scan-vertical { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; pointer-events: none; background: linear-gradient(180deg, transparent 10%, #b8d3b180 35%, #eee9dbb0 55%, transparent 90%); box-shadow: -8px 0 25px #b8d3b126; animation: digital-scan-across 17s ease-in-out -6s infinite; }
.footer-scan-vertical { background: linear-gradient(180deg, transparent 5%, #b8d3b180 30%, #eee9dbb0 52%, #103e3b55 75%, transparent 95%); animation-delay: -10s; }
@keyframes digital-scan-across {
  0% { left: 10%; opacity: 0; }
  15% { opacity: .5; }
  70% { left: 90%; opacity: .2; }
  80%,100% { left: 90%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scan-vertical, .footer-scan-vertical { display: none; }
}

/* The method shares the footer gradient and autonomous digital atmosphere. */
.process > .section-heading, .process > .process-grid { position: relative; z-index: 1; }
.process > .section-heading { mix-blend-mode: normal; }
.process .section-heading h2 { color: var(--light); }
.process-grid article { color: var(--ink); border-top-color: #103e3b55; }
.process-grid article:nth-child(-n+2) { color: var(--light); border-top-color: #eee9db66; }
.process .process-number, .process-grid p { color: inherit; }
.process .footer-scan { animation-delay: -7s; }
.process .footer-scan-vertical { animation-delay: -4s; }
@media (min-width: 701px) and (max-width: 1000px) {
  .process-grid article:nth-child(odd) { color: var(--light); border-top-color: #eee9db66; }
  .process-grid article:nth-child(even) { color: var(--ink); border-top-color: #103e3b55; }
}
@media (max-width: 700px) {
  .process-grid article:nth-child(n) { color: var(--ink); border-top-color: #103e3b55; }
  .process-grid article:first-child { color: #fff; border-top-color: #eee9db66; }
}

/* A common colored-title treatment, tuned to the surface behind it. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1, .about h2, .section-heading h2, .project-copy h3,
  .metric-value > [data-count], .metric-plus {
    background-image: var(--title-gradient-paper);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
  }
  .hero h1, .project-jade .project-copy h3, .process .section-heading h2 {
    background-image: var(--title-gradient-light);
  }
  @media (max-width: 700px) {
    .footer-invitation { mix-blend-mode: normal; }
    .footer-invitation h2 { mix-blend-mode: difference; }
    .footer-invitation > p {
      background-image: var(--title-gradient-light);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
  }
}
@media (forced-colors: active) {
  .hero h1, .about h2, .section-heading h2, .project-copy h3,
  .metric-value > [data-count], .metric-plus, .footer-invitation > p {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
  .process > .section-heading, .footer-invitation { mix-blend-mode: normal; }
}

/* Original split cards, with the current client projects. */
.project-card > a.project-visual { display: block; }
.project-jade .project-visual { background: #fff; }
.project-berasaluce .project-visual { background: #b3a17e; }
.project-organic .project-visual { background: #f7f3e8; }
.project-padelissimo .project-visual { background: #0b2c40; }
.project-card > a.project-visual > img { object-fit: cover; }

/* A gentle downward cue on the hero's scroll link. */
.scroll .icon-arrow { animation: scroll-arrow 2.2s ease-in-out infinite; }
@keyframes scroll-arrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll .icon-arrow { animation: none; }
}

/* An open pause before the immersive introduction. */
.intro-quote { margin: 0; padding: clamp(100px, 13vw, 200px) 9vw; text-align: center; }
.intro-quote blockquote { max-width: 1000px; margin: 0 auto; font-size: clamp(28px, 3.8vw, 60px); line-height: 1.22; letter-spacing: -.045em; font-weight: 400; text-wrap: balance; }
.intro-quote figcaption { margin-top: 30px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #597863; }
.about { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(90px, 10vw, 160px); background-color: var(--ink); background-image: linear-gradient(100deg, #103e3be8, #103e3b85), var(--hero-background); background-size: cover; background-position: center; color: var(--light); }
.about > :not(.about-circles) { position: relative; z-index: 1; }
.about .about-copy p, .about .about-copy .kicker, .about .about-principles p, .about .metric p, .about .key-figures > .label, .about .principle-number { color: var(--light); }
.about .about-copy p:not(.kicker), .about .about-principles p, .about .metric p { opacity: .85; }
.about .key-figures { color: var(--light); margin-top: 90px; }
.about .key-figures, .about .metric, .about .about-principles { border-color: #eee9db38; }
.about .about-principles { margin-top: 80px; }
.about .metric-value, .about h2 em { color: var(--light); }
.about-circles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.about-circles span { position: absolute; display: block; width: 75vw; aspect-ratio: 1; border: 1px solid #eee9db20; border-radius: 50%; top: -32vw; right: -18vw; animation: about-orbit 32s ease-in-out infinite alternate; }
.about-circles span:nth-child(2) { width: 52vw; top: 20%; right: -24vw; border-color: #efb4c92b; animation-delay: -12s; }
.about-circles span:nth-child(3) { width: 64vw; top: auto; bottom: -42vw; right: auto; left: -15vw; border-color: #bfdcbc30; animation-delay: -22s; }
@keyframes about-orbit { to { transform: translate3d(-3vw, 4vw, 0); } }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .about h2, .about .metric-value > [data-count], .about .metric-plus { background-image: var(--title-gradient-light); }
}
@media (max-width: 700px) {
  .intro-quote { padding: 95px 7vw 110px; }
  .intro-quote blockquote br { display: none; }
  .about .key-figures { margin-top: 55px; }
  .about .about-principles { margin-top: 45px; }
  .about-circles span { width: 150vw; top: -60vw; right: -70vw; }
  .about-circles span:nth-child(2) { width: 130vw; top: 35%; right: -90vw; }
  .about-circles span:nth-child(3) { width: 140vw; bottom: -90vw; left: -50vw; }
}
@media (prefers-reduced-motion: reduce) { .about-circles span { animation: none; } }
@media (forced-colors: active) { .about { background: Canvas; color: CanvasText; } .about .about-copy p, .about .about-copy .kicker, .about .about-principles p, .about .metric p, .about .key-figures > .label, .about .principle-number, .about .metric-value { color: CanvasText; } .about h2, .about .metric-value > [data-count], .about .metric-plus { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } .about-circles { display: none; } }

/* A few autonomous dots add depth to the introduction, behind the copy. */
.about-circles i { position: absolute; left: var(--dot-x); top: var(--dot-y); width: 3px; height: 3px; border-radius: 50%; background: #bfdcbc; box-shadow: 0 0 12px #bfdcbc66; opacity: .4; animation: about-dot-drift var(--dot-duration) ease-in-out var(--dot-delay) infinite; }
.about-circles i:nth-of-type(3n) { width: 4px; height: 4px; background: #efb4c9; box-shadow: 0 0 12px #efb4c94d; }
@keyframes about-dot-drift {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .25; }
  45% { transform: translate3d(12px, -24px, 0); opacity: .7; }
  75% { transform: translate3d(-8px, -12px, 0); opacity: .4; }
}
@media (max-width: 700px) { .about-circles i:nth-of-type(even) { display: none; } }
@media (prefers-reduced-motion: reduce) { .about-circles i { animation: none; } }

/* Large circular outlines replace the grid across the immersive sections. */
.ambient-circles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ambient-circles > span { position: absolute; display: block; width: 78vw; aspect-ratio: 1; border: 1px solid #eee9db38; border-radius: 50%; top: -48vw; right: -12vw; animation: ambient-circle-drift 34s ease-in-out infinite alternate; }
.ambient-circles > span:nth-child(2) { width: 62vw; top: 22%; right: -35vw; border-color: #efb4c94d; animation-duration: 40s; animation-delay: -16s; }
.ambient-circles > span:nth-child(3) { width: 70vw; top: auto; bottom: -48vw; right: auto; left: -18vw; border-color: #bfdcbc55; animation-duration: 38s; animation-delay: -24s; }
.process-digital .ambient-circles { transform: rotate(180deg); }
.footer-stage > .footer-digital .ambient-circles > span:first-child { top: -30vw; right: -30vw; }
@keyframes ambient-circle-drift { to { transform: translate3d(-3vw, 4vw, 0); } }
@media (max-width: 700px) {
  .ambient-circles > span { width: 160vw; top: -70vw; right: -65vw; }
  .ambient-circles > span:nth-child(2) { width: 135vw; top: 28%; right: -95vw; }
  .ambient-circles > span:nth-child(3) { width: 145vw; bottom: -95vw; left: -65vw; }
  .footer-stage > .footer-digital .ambient-circles > span:first-child { top: -65vw; right: -80vw; }
}
@media (prefers-reduced-motion: reduce) { .ambient-circles > span { animation: none; } }
@media (forced-colors: active) { .ambient-circles { display: none; } }

/* The quote resolves softly from blur, using the title gradient on paper. */
.intro-quote blockquote { padding-block: .12em .18em; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .intro-quote blockquote { background-image: var(--title-gradient-paper); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
body.motion .intro-quote .reveal { opacity: 0; filter: blur(10px); transform: translateY(18px); transition: opacity 1.4s ease, filter 1.6s ease, transform 1.6s cubic-bezier(.22, 1, .36, 1); }
body.motion .intro-quote .reveal.visible { opacity: 1; filter: blur(0); transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.motion .intro-quote .reveal { opacity: 1; filter: none; transform: none; transition: none; }
}
@media (forced-colors: active) {
  .intro-quote blockquote { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}

.footer-links { flex-wrap: wrap; justify-content: flex-end; gap: 12px 22px; }

/* Clear, readable information pages, sharing the site's palette and font. */
.legal-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 7vw; }
.legal-header .brand { color: var(--ink); }
.legal-main { max-width: 950px; margin: 50px auto 100px; padding: 0 7vw; }
.legal-main h1 { font-size: clamp(38px, 5.5vw, 72px); line-height: 1.12; font-weight: 400; letter-spacing: -.045em; margin: 25px 0 32px; }
.legal-lead { font-size: 20px; line-height: 1.6; }
.legal-main section { margin-top: 55px; }
.legal-main h2 { font-size: 26px; font-weight: 500; letter-spacing: -.03em; margin: 0 0 20px; }
.legal-main p, .legal-main dd, .legal-main dt { line-height: 1.8; }
.legal-main a { text-decoration: underline; text-underline-offset: 4px; }
.legal-draft, .legal-note { border-left: 2px solid #9e526c; padding: 12px 20px; background: #9e526c0a; }
.legal-main dl { display: grid; grid-template-columns: 160px 1fr; gap: 14px 24px; }
.legal-main dt { font-weight: 600; }
.legal-main dd { margin: 0; overflow-wrap: anywhere; }
.legal-footer { padding: 35px 7vw; display: flex; flex-wrap: wrap; gap: 24px; border-top: 1px solid #103e3b30; font-size: 14px; }
@media (max-width: 600px) { .legal-main { margin-top: 30px; } .legal-header .text-link { font-size: 13px; } .legal-main dl { grid-template-columns: 1fr; gap: 5px; } .legal-main dd { margin-bottom: 14px; } }

/* The logo strip owns its spacing on both sides of the portfolio transition. */
.portfolio.content-section { padding-bottom: 0; }

/* The contact action shares the hero button before and after revealing the email. */
.footer-email { max-width: 100%; }
.footer-email .icon-arrow { width: 20px; height: 20px; flex-shrink: 0; }
.scroll-thread { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 7; pointer-events: none; overflow: hidden; }
.scroll-thread-path { fill: none; stroke: #315e58; stroke-width: 1; stroke-opacity: .24; stroke-linecap: round; }
.scroll-thread-head { fill: #9e526c; opacity: .6; }
@media (max-width: 700px) { .scroll-thread-path { stroke-opacity: .19; } .scroll-thread-head { opacity: .45; } }
@media (prefers-reduced-motion: reduce), (forced-colors: active), print { .scroll-thread { display: none; } }

/* Project copy panels pick up the site's rose, celadon and deep-green palette. */
.project-jade .project-copy {
  background: radial-gradient(ellipse at 0% 0%, #84576745, transparent 65%), linear-gradient(145deg, #103e3b 15%, #234e48 65%, #476557);
}
.project-berasaluce .project-copy {
  background: radial-gradient(ellipse at 100% 0%, #e4b9c16b, transparent 65%), linear-gradient(145deg, #e8e4d5, #d4ddcb 55%, #bdd3c3);
}
.project-organic .project-copy {
  background: radial-gradient(ellipse at 0% 100%, #bfd5bb80, transparent 65%), linear-gradient(140deg, #eadbcf, #dfc7c5 55%, #e9e2d3);
}
.project-padelissimo .project-copy {
  background: radial-gradient(ellipse at 100% 100%, #d5b7c269, transparent 65%), linear-gradient(145deg, #e5e8dc, #cbded8 55%, #b7cfc7);
}
@media (forced-colors: active) { .project-card .project-copy { background: Canvas; color: CanvasText; } }

.project-beme .project-visual { background: #202e27; }
.project-beme .project-copy {
  background: radial-gradient(ellipse at 100% 0%, #dfb9c252, transparent 65%), linear-gradient(145deg, #ece6d8, #d9decf 55%, #bcd0bd);
}
@media (forced-colors: active) { .project-beme .project-copy { background: Canvas; color: CanvasText; } }

/* A small privacy information notice, with no consent controls or tracking. */
.privacy-notice { position: fixed; right: 24px; bottom: 24px; z-index: 100; width: min(390px, calc(100vw - 48px)); padding: 23px 25px 19px; border: 1px solid #b8d3b14d; border-radius: 22px; background: #103e3bd9; backdrop-filter: blur(8px); color: var(--light); box-shadow: 0 12px 45px #062c2929; animation: privacy-notice-in .5s ease both; }
.privacy-notice[hidden] { display: none; }
.privacy-notice h2 { margin: 0 0 9px; font-size: 18px; font-weight: 500; letter-spacing: -.025em; line-height: 1.3; }
.privacy-notice p { margin: 0; color: #eee9dbd9; font-size: 14px; line-height: 1.6; }
.privacy-notice-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 19px; font-size: 14px; }
.privacy-notice-actions a { text-decoration: underline; text-underline-offset: 4px; color: #eee9dbc4; }
.privacy-notice-actions button { border: 1px solid #b8d3b14d; border-radius: 30px; padding: 9px 19px; font-size: 14px; color: var(--ink); background: var(--green); transition: background .2s; }
.privacy-notice-actions button:hover { background: var(--light); }
@keyframes privacy-notice-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .privacy-notice { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 20px; border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { .privacy-notice { animation: none; } }
@media print { .privacy-notice { display: none; } }

.logo-group .logo-roublot img { filter: brightness(0); }

/* A spacious invitation: sticky title, three scroll-focused statements. */
.collaboration { position: relative; }
.collaboration-layout { display: grid; grid-template-columns: .9fr 1.3fr; gap: 9vw; align-items: start; }
.collaboration-heading { position: sticky; top: 26vh; padding-bottom: 25px; }
.collaboration-heading .label { margin: 0 0 32px; }
.collaboration h2 { margin: 0; padding-bottom: .16em; font-size: clamp(44px, 4.8vw, 78px); line-height: 1.08; letter-spacing: -.055em; font-weight: 400; }
.collaboration h2 em, .collaboration-step h3 em { font-style: normal; }
.collaboration-intro { max-width: 290px; margin: 22px 0 0; font-size: 16px; line-height: 1.7; color: #44615a; }
.collaboration-step { min-height: 48vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 40px 0; }
.collaboration-number { font-size: 12px; letter-spacing: .1em; color: #597863; margin-bottom: 22px; }
.collaboration-step h3 { margin: 0; font-size: clamp(33px, 3.4vw, 54px); font-weight: 400; letter-spacing: -.045em; line-height: 1.15; text-wrap: balance; }
.collaboration-step h3 em { display: inline-block; padding: 0 .03em .12em 0; }
.collaboration-step > p { margin: 22px 0 0; max-width: 410px; font-size: 16px; line-height: 1.75; color: #44615a; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .collaboration h2, .collaboration-step h3 em { background-image: var(--title-gradient-paper); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .collaboration.is-scrolling .collaboration-step.reveal { opacity: var(--step-opacity, 1); filter: blur(var(--step-blur, 0px)); transform: translateY(var(--step-y, 0px)); transition: none; }
  .collaboration.is-scrolling .collaboration-steps { padding-block: 8vh; }
}
@media (max-width: 1000px) {
  .collaboration-layout { grid-template-columns: 1fr; gap: 55px; }
  .collaboration-heading { position: relative; top: auto; padding: 0; }
  .collaboration-intro { max-width: 400px; }
  .collaboration-step { min-height: 0; padding: 30px 0; }
  .collaboration-step + .collaboration-step { margin-top: 26px; }
  .collaboration-step h3 { max-width: 590px; font-size: clamp(32px, 5.5vw, 48px); }
}
@media (forced-colors: active) { .collaboration h2, .collaboration-step h3 em { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; } }

/* Give expertise and portfolio the same generous lead-in. */
.expertise, .portfolio.content-section { padding-top: clamp(100px, 11vw, 180px); }
.expertise .section-heading { padding-top: 0; }

/* Card text colors follow the project when its position changes. */
.project-card.project-jade { color: var(--light); background-color: var(--ink); }
.project-card.project-berasaluce { color: var(--ink); background-color: #d4ddcb; }

/* A minimal floating navigation, revealed when the hero menu leaves the viewport. */
.floating-nav { position: fixed; top: 16px; left: 50%; z-index: 90; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(860px, calc(100% - 40px)); padding: 12px 20px; border: 1px solid #eee9db35; border-radius: 40px; background: #103e3bd9; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--light); box-shadow: 0 6px 28px #062c2914; opacity: 0; visibility: hidden; transform: translate(-50%, -12px); pointer-events: none; transition: opacity .3s ease, transform .3s ease, visibility .3s; }
.floating-nav.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; }
.floating-brand { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; font-size: 17px; font-weight: 500; letter-spacing: -.035em; }
.floating-brand i { color: var(--green); font-style: normal; }
.floating-initial { display: none; }
.floating-links { display: flex; align-items: center; gap: 6px; }
.floating-links > a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 24px; font-size: 14px; white-space: nowrap; transition: background .2s, color .2s; }
.floating-links > a:hover, .floating-links > a[aria-current="location"] { background: #eee9db14; color: #fff8ed; }
.floating-links > .floating-contact { color: var(--green); }
.floating-language { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.floating-language a { padding: 8px 0; opacity: .55; }
.floating-language a[aria-current="page"], .floating-language a:hover { opacity: 1; }
.floating-language a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.floating-language > span { opacity: .3; }
#approche, #expertises, #portfolio, #methode, #ensemble, #questions { scroll-margin-top: 105px; }
@media (max-width: 700px) {
 .floating-nav { top: max(12px, env(safe-area-inset-top)); width: calc(100% - 24px); gap: 8px; padding: 8px 13px; }
 .floating-name { display: none; }
 .floating-initial { display: inline; font-size: 25px; }
 .floating-links { gap: 0; }
 .floating-links > a { font-size: 12px; padding: 9px 7px; gap: 4px; }
 .floating-links > .floating-approach { display: none; }
 .floating-language { gap: 4px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .floating-nav { transition: none; } }
@media print { .floating-nav { display: none; } }

/* Compact mobile metadata, with the country centered in the viewport. */
.availability-short { display: none; }
@media (max-width: 700px) {
  .hero-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-meta > * { min-width: 0; }
  .availability-full { display: none; }
  .availability-short { display: inline; white-space: nowrap; }
  .availability { justify-self: end; justify-content: flex-end; text-align: right; }
  .location { justify-self: center; }
}

/* The portfolio becomes a book of horizontal spreads when JavaScript is available. */
.project-book-controls { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin: 0 0 24px; }
.project-book-controls[hidden] { display: none; }
.project-book-controls button { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #103e3b40; border-radius: 50%; background: transparent; color: var(--ink); transition: background .2s, color .2s, opacity .2s; }
.project-book-controls button:hover:not(:disabled) { background: var(--ink); color: var(--light); }
.project-book-controls button:disabled { opacity: .25; cursor: default; }
.project-book-counter { min-width: 64px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.project-stack.is-book { position: relative; display: flex; gap: 28px; align-items: stretch; overflow-x: auto; overflow-y: hidden; padding: 0 0 16px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.project-stack.is-book::-webkit-scrollbar { display: none; }
.project-stack.is-book:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 16px; }
.project-stack.is-book .project-card { position: relative; top: auto !important; flex: 0 0 100%; min-width: 0; min-height: 560px; display: grid; grid-template-columns: .88fr 1.12fr; border-radius: 16px; scroll-snap-align: start; scroll-snap-stop: always; box-shadow: 0 3px 0 #eee9db, 0 4px 0 #103e3b30, 0 7px 0 #eee9db, 0 8px 0 #103e3b20; }
.project-stack.is-book .project-card::before { content: ''; position: absolute; z-index: 4; top: 0; bottom: 0; left: 44%; width: 40px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #062c2940 47%, #fff4 51%, transparent); opacity: var(--book-fold, .14); pointer-events: none; }
.project-stack.is-book .project-copy { padding: clamp(28px, 3.5vw, 50px); }
.project-stack.is-book .project-copy h3 { font-size: clamp(34px, 3.6vw, 54px); margin: clamp(28px, 3.5vw, 50px) 0 20px; }
.project-stack.is-book .project-copy > p { max-width: 370px; }
.project-stack.is-book .project-visual { transform-origin: left center; transform: perspective(1400px) rotateY(var(--book-turn, 0deg)); backface-visibility: hidden; }
@media (max-width: 1000px) {
 .project-stack.is-book .project-card { min-height: 500px; }
 .project-stack.is-book .project-copy { padding: 28px; }
 .project-stack.is-book .project-copy h3 { font-size: 36px; margin-top: 30px; }
}
@media (max-width: 700px) {
 .project-book-controls { margin-bottom: 20px; gap: 10px; }
 .project-book-controls button { width: 40px; height: 40px; }
 .project-stack.is-book { gap: 18px; }
 .project-stack.is-book .project-card { display: flex; flex-direction: column-reverse; min-height: 0; border-radius: 14px; }
 .project-stack.is-book .project-card::before { display: none; }
 .project-stack.is-book .project-visual { height: clamp(180px, 58vw, 280px); flex-shrink: 0; }
 .project-stack.is-book .project-copy { flex: 1; padding: 25px; }
 .project-stack.is-book .project-copy h3 { font-size: 34px; margin-top: 24px; }
 .project-stack.is-book .project-copy > p { line-height: 1.65; }
}
@media (prefers-reduced-motion: reduce) {
 .project-stack.is-book .project-visual { transform: none; }
 .project-book-controls button { transition: none; }
}
@media print {
 .project-book-controls { display: none; }
 .project-stack.is-book { display: grid; overflow: visible; }
 .project-stack.is-book .project-card { break-inside: avoid; }
 .project-stack.is-book .project-visual { transform: none; }
}

/* Desktop projects accumulate naturally as the page scrolls down. */
.project-stack.is-stack { display: grid; gap: 32px; overflow: visible; }
.project-stack.is-stack .project-card { position: relative; top: auto !important; z-index: calc(var(--stack-index, 0) + 1); transform: none; }
@media (min-width: 701px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
 .project-stack.is-stack .project-card { position: sticky; top: calc(100px + var(--stack-index, 0) * 16px) !important; transform-origin: center top; transform: scale(calc(1 - var(--stack-progress, 0) * .035)); }
}
@media print {
 .project-stack.is-stack .project-card { position: relative !important; top: auto !important; transform: none; }
}

/* Two empty sheets suggest a small pile; the actual mobile page remains readable. */
.project-scroll-scene, .project-scroll-stage { min-width: 0; }
@media (max-width: 700px) {
 .project-scroll-stage { position: relative; isolation: isolate; display: flex; flex-direction: column; }
 .project-scroll-stage::before, .project-scroll-stage::after { content: ''; position: absolute; z-index: -1; top: 4px; left: 4px; right: 4px; bottom: 68px; border: 1px solid #103e3b3a; border-radius: 14px; pointer-events: none; background: linear-gradient(145deg, #e8dfd1, #cdd9c7); box-shadow: 0 4px 14px #103e3b0c; transform: rotate(-2.2deg); transform-origin: center; }
 .project-scroll-stage::after { left: 3px; right: 3px; bottom: 60px; background: linear-gradient(145deg, #e4d3ce, #e8e4d7); transform: rotate(1.4deg); }
 .project-scroll-stage .project-book-controls { order: 2; margin: 32px 0 0; padding-bottom: 6px; }
 .project-scroll-stage .project-stack { order: 1; }
 .project-scroll-scene.is-pinned { height: var(--scene-height); }
 .project-scroll-scene.is-pinned .project-scroll-stage { position: sticky; top: var(--book-pin-top, 94px); }
 .project-scroll-scene.is-pinned .project-stack { scroll-snap-type: none; }
}
@media (max-width: 700px) and (max-height: 740px) {
 .project-scroll-stage .project-visual { height: clamp(130px, 24svh, 175px); }
 .project-stack.is-book .project-copy { padding: 20px; }
 .project-stack.is-book .project-copy h3 { font-size: 30px; margin: 18px 0 12px; }
 .project-stack.is-book .project-copy > p { line-height: 1.5; margin-bottom: 16px; }
}
@media print { .project-scroll-scene.is-pinned { height: auto; } .project-scroll-scene.is-pinned .project-scroll-stage { position: static; } }

/* On mobile the incoming card covers a stationary page, with two subtly offset sheets behind it. */
@media (max-width: 700px) {
 .project-stack.is-book .project-card { box-shadow: none; }
 .project-stack.is-book { padding-bottom: 0; }
 .project-scroll-stage::before, .project-scroll-stage::after { box-shadow: none; }
 .project-scroll-scene.is-pinned .project-stack.is-book { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; touch-action: pan-y; isolation: isolate; }
 .project-scroll-scene.is-pinned .project-card { grid-area: 1 / 1; width: 100%; z-index: calc(var(--stack-index, 0) + 1); transform: translateX(var(--cover-x, 105%)); transition: transform .55s cubic-bezier(.22, 1, .36, 1); }
 .project-scroll-scene.is-pinned .project-card:first-child { --cover-x: 0%; }
 .project-scroll-scene.is-pinned .project-visual { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .project-scroll-scene .project-card { transition: none; } }

/* Keep project descriptions close to their supporting details. */
.project-copy > p:not(.project-tags) { margin-bottom: 12px; }
@media (max-width: 700px) {
 .project-stack.is-book .project-copy .project-tags { margin: 0 0 12px; padding-top: 0; }
}

/* Fit the intro title to its column and leave room for gradient-text descenders. */
.about-grid { container-type: inline-size; }
.about h2 { min-width: 0; font-size: min(90px, 7cqw); line-height: 1.12; padding-bottom: .16em; white-space: nowrap; }
@media (max-width: 700px) {
  .about h2 { font-size: min(65px, 11cqw); }
}

/* Vulpine Lab wordmark, with Gary retained as the personal signature. */
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; width: 180px; height: auto; }
.floating-brand .brand-logo { width: 132px; }
.floating-initial img { display: block; width: 30px; height: auto; }
.legal-header .brand-logo { background: var(--ink); border-radius: 8px; padding: 6px 10px; width: 190px; }
@media (max-width: 700px) {
  .brand-logo { width: 145px; }
}
@media print { .legal-header .brand-logo { background: #103e3b; } }

/* Temporary centered announcement; native dialog manages focus and background access. */
body.rebrand-open { overflow: hidden; }
.rebrand-notice::backdrop { background: #062c2966; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rebrand-notice { position: fixed; inset: 0; margin: auto; width: min(440px, calc(100vw - 48px)); text-align: center; max-height: calc(100svh - 48px); overflow-y: auto; padding: 26px; border: 1px solid #b8d3b166; border-radius: 22px; background: #103e3b; color: var(--light); box-shadow: 0 12px 45px #062c2933; animation: privacy-notice-in .5s ease both; }
.rebrand-notice[hidden] { display: none; }
.rebrand-notice .rebrand-eyebrow { margin: 0 0 16px; color: var(--green); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.rebrand-notice h2 { margin: 0 0 14px; font-size: 26px; font-weight: 400; line-height: 1.2; letter-spacing: -.035em; }
.rebrand-notice h2 strong { display: block; color: var(--pink, #f0b5ca); font-weight: 500; }
.rebrand-notice p { margin: 0; font-size: 14px; line-height: 1.6; }
.rebrand-notice button { margin-top: 22px; min-height: 44px; padding: 10px 22px; border: 1px solid var(--green); border-radius: 30px; background: var(--green); color: var(--ink); font-size: 14px; }
.rebrand-notice button:hover { background: var(--light); }
.rebrand-notice button:focus-visible { outline: 2px solid var(--light); outline-offset: 4px; }
@media (max-width: 700px) { .rebrand-notice { width: calc(100vw - 32px); max-height: calc(100svh - 32px); padding: 26px 22px; } }
@media (prefers-reduced-motion: reduce) { .rebrand-notice { animation: none; } }
@media print { .rebrand-notice { display: none; } }

/* Draw decorative stars as vectors so mobile devices cannot substitute emoji. */
.icon-star { display: inline-block; width: 1em; height: 1em; vertical-align: -.1em; flex-shrink: 0; }

/* Reserve separate mobile columns for the wordmark, contact and language links. */
@media (max-width: 700px) {
  .hero nav { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: clamp(10px, 3vw, 20px); }
  .hero nav > .brand { min-width: 0; width: 100%; max-width: 145px; }
  .hero nav > .brand .brand-logo { width: 100%; height: auto; }
  .hero nav .contact, .hero nav .language-switch { white-space: nowrap; }
}