/* =================================================================
   COLEMAN — main stylesheet
   Brand: warm white #FFF8F8 (~60%) · black #000 (~30%) · Coleman blue #0118D8 (~10%)
   Type: Anton (titles) · Open Sans (text) · League Spartan (wordmark only) · IBM Plex Mono (labels)
   ================================================================= */

/* ---------- Tokens ---------- */
:root {
  --light: #FFF8F8;
  --dark: #000000;
  --blue: #0118D8;
  --grey: #D3D3D3;
  --bg: var(--light);
  --text: var(--dark);
  --muted: rgba(0, 0, 0, .5);
  --line: rgba(0, 0, 0, .14);
  --accent-text: var(--blue);           /* blue on warm white: 9.4:1 */
  --overlay-start: #FFFFFF;
  --overlay-end: var(--light);
  --menu-bg: #FFFFFF;
  --glass-bg: rgba(255, 255, 255, .55);
  --glass-border: rgba(255, 255, 255, .8);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -1px 0 rgba(0,0,0,.06) inset, 0 8px 24px rgba(0,0,0,.08);

  --font-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-logo: 'League Spartan', 'Futura', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-main: 1.25rem;  --lh-main: 1.65rem;
  --fs-h1: 13rem;      --lh-h1: 11.2rem;   --ls-h1: -.01em;
  --fs-h2: 9.5rem;     --lh-h2: 8.4rem;    --ls-h2: -.005em;
  --fs-h3: 3.2rem;     --lh-h3: 3.3rem;
  --fs-h4: 1.9rem;     --lh-h4: 2rem;
  --fs-mono: .8rem;    --lh-mono: 1rem;    --ls-mono: .1rem;
  --pad: 1.25rem;
  --radius: .4rem;

  --ease-custom: cubic-bezier(.819, .077, 0, 1);
  --ease-appear: cubic-bezier(.42, 0, .596, 1.001);
  --ease-overshoot: cubic-bezier(.175, .885, .327, 1.41);
}
html.is-dark, :root[data-theme="dark"] {
  --bg: var(--dark);
  --text: var(--light);
  --muted: rgba(255, 248, 248, .5);
  --line: rgba(255, 248, 248, .16);
  --accent-text: var(--light);          /* brand rule: never blue text on black */
  --overlay-start: #161616;
  --overlay-end: var(--dark);
  --menu-bg: #121212;
  --glass-bg: rgba(255, 255, 255, .08);
  --glass-border: rgba(255, 255, 255, .18);
  --glass-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 24px rgba(0,0,0,.4);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media screen and (max-width: 991px) {
  :root { --fs-main: 1.2rem; --lh-main: 1.6rem; --fs-h1: 9.5rem; --lh-h1: 8.2rem; --fs-h2: 7rem; --lh-h2: 6.3rem; --fs-h3: 2.8rem; --lh-h3: 2.9rem; --radius: .3rem; }
}
@media screen and (max-width: 767px) {
  :root { --fs-main: 1.1rem; --lh-main: 1.55rem; --fs-h1: 5.6rem; --lh-h1: 5rem; --fs-h2: 4rem; --lh-h2: 3.7rem; --fs-h3: 2.3rem; --lh-h3: 2.5rem; --pad: .75rem; --radius: .25rem; }
}
@media screen and (max-width: 479px) {
  :root { --fs-h1: 4.6rem; --lh-h1: 4.2rem; --fs-h2: 3.4rem; --lh-h2: 3.2rem; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0; min-height: 100%;
  background-color: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--fs-main); line-height: var(--lh-main);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, blockquote, figure, ul, ol { margin: 0; }
img, video { display: block; max-width: 100%; }
/* Intrinsic width/height attributes reserve space; height:auto keeps the ratio. */
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
::selection { background: var(--blue); color: var(--light); }
.no-theme-transitions, .no-theme-transitions * { transition: none !important; }
html.theme-toggling body, html.theme-toggling .nav-menu, html.theme-toggling .section_contact, html.theme-toggling .cookie {
  transition: background-color .35s ease, color .35s ease !important;
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
html.is-dark :focus-visible { outline-color: var(--light); }
.skip-link { position: fixed; left: var(--pad); top: -4rem; z-index: 20000; padding: .6rem 1rem; background: var(--blue); color: var(--light); border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: var(--ls-mono); }
.skip-link:focus { top: var(--pad); }
a, button, [role="button"], label.contact_radio { cursor: pointer; }

/* ---------- Typography ---------- */
h1, .heading-style-h1 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: min(var(--fs-h1), 15.5vw); line-height: .9; letter-spacing: var(--ls-h1);
}
h2, .heading-style-h2 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: min(var(--fs-h2), 12.5vw); line-height: .89; letter-spacing: var(--ls-h2);
}
h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.heading-style-h3 {
  font-family: var(--font-body); font-weight: 600; text-transform: none;
  font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -.04em;
}
p { font-size: var(--fs-main); line-height: var(--lh-main); }
.text-mono {
  font-family: var(--font-mono); font-weight: 300; text-transform: uppercase;
  font-size: var(--fs-mono); line-height: var(--lh-mono); letter-spacing: var(--ls-mono);
  margin: 0; display: block;
}
.text-mono.is-muted, .is-muted .text-mono { opacity: .5; }
.text-mono.difference, .difference .text-mono { color: var(--grey); }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }
.text-mono_wrapper { overflow: hidden; padding-bottom: 2px; }
.text-mono_sticky { position: sticky; top: 5rem; }
.text-mono_sticky.is-half { height: 1rem; top: 50vh; overflow: hidden; }

/* Wordmark — ".coleman", League Spartan, always lowercase */
.wordmark { font-family: var(--font-logo); font-weight: 700; text-transform: none; letter-spacing: -.02em; font-size: 1.15rem; line-height: 1; display: inline-flex; }
.wordmark.difference { color: var(--grey); }
.wordmark_dot { margin-right: .02em; }

/* Glass capsule (brand "liquid glass" element — style only) */
.glass-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .55rem 1.1rem; border-radius: 999px;
  background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  font-family: var(--font-mono); font-weight: 400; text-transform: uppercase; letter-spacing: var(--ls-mono); font-size: var(--fs-mono); line-height: 1;
  white-space: nowrap;
}
.glass-pill.is-small { padding: .4rem .8rem; font-size: .72rem; }

/* ---------- Layout ---------- */
.page-wrapper { position: relative; z-index: 2; }
.page-main { position: relative; z-index: 2; background-color: var(--bg); }
.padding-global { width: 100%; height: 100%; padding-left: var(--pad); padding-right: var(--pad); }
.container-large { width: 100%; max-width: 120rem; height: 100%; margin: 0 auto; }
.container-nav { width: 100%; max-width: 200rem; height: 100%; margin: 0 auto; }
.overflow-hidden { overflow: hidden; }
.z-index-1 { position: relative; z-index: 1; }
.hide { display: none !important; }
.show-mobile-landscape { display: none !important; }
.align-center { margin-left: auto; margin-right: auto; }
.spacer-xsmall { padding-top: .5rem; }
.spacer-small { padding-top: 1rem; }
.spacer-medium { padding-top: 2rem; }
.max-width-xmedium { max-width: 36rem; }
.max-width-plan { max-width: 40rem; }
@media (max-width: 991px) { .hide-tablet { display: none !important; } .spacer-medium { padding-top: 1.5rem; } }
@media (max-width: 767px) { .hide-mobile-landscape { display: none !important; } .show-mobile-landscape { display: block !important; } .nav-menu_link_wrapper.show-mobile-landscape, .mode-switch-mobile.show-mobile-landscape { display: flex !important; } }

/* ---------- Links ---------- */
.link { position: relative; display: inline-flex; overflow: hidden; padding-right: .5rem; cursor: pointer; }
.link.no-padding-right { padding-right: 0; }
.link_first, .link_second { display: block; transition: transform .7s var(--ease-custom); will-change: transform; }
.link_second { position: absolute; left: 0; top: 120%; transform: translate(1rem, 0) scale(.8); transform-origin: left center; }
.link_first { transform-origin: left center; }
@media (hover: hover) and (min-width: 992px) {
  .link:hover .link_first { transform: translate(-1rem, -120%) scale(.8); }
  .link:hover .link_second { transform: translate(0, -120%) scale(1); }
  .link.is-mono-footer:hover .link_second { transform: translate(0, -133%) scale(1); }
}
.link.is-mono-footer .link_second { top: 133%; }
.link-underline { border-bottom: 1px dashed var(--line); padding-bottom: 2px; }
.small-link { display: inline-flex; align-items: center; gap: .75rem; height: var(--lh-mono); cursor: pointer; }
.small-link_arrow { display: inline-flex; transform: translateY(-1px); transition: transform .15s ease-in-out; opacity: 0; }
.small-link:hover .small-link_arrow { transform: translate(4px, -1px); }
.small-link.is-muted { opacity: .6; }

/* ---------- Nav top / bottom ---------- */
.nav-top { position: fixed; left: 0; right: 0; top: var(--pad); z-index: 10000; mix-blend-mode: difference; transform: translateY(calc(-2vw - 100%)); }
.nav-top_component { display: grid; grid-template-columns: 8fr 2fr 2fr; align-items: start; }
.nav-top_left { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: start; width: 100%; }
.nav-top_left_1, .nav-top_left_3 { display: flex; }
.nav-top_middle { display: flex; justify-content: space-between; align-items: flex-start; }
.nav-top_right { display: flex; justify-content: flex-end; }
.link.is-brand { padding-top: 0; }
.mode-switch-mobile { width: 1.1rem; height: 1.1rem; display: none; }
.mode-switch-mobile_icon { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid var(--grey); background: linear-gradient(90deg, var(--grey) 50%, transparent 50%); transition: transform .6s var(--ease-custom); }
html.is-dark .mode-switch-mobile_icon { transform: rotate(180deg); }

.nav-bottom { position: fixed; left: 0; right: 0; bottom: var(--pad); z-index: 9999; mix-blend-mode: difference; transform: translateY(calc(2.2vw + 100%)); }
.nav-bottom_component { display: flex; justify-content: space-between; align-items: flex-end; }
.nav-bottom_right { display: flex; flex: 1; justify-content: flex-end; padding-left: 10%; overflow: hidden; position: relative; height: var(--lh-mono); }
.cities_list { display: flex; flex-direction: column; align-items: flex-end; flex: 1; position: relative; }
.city_wrapper { display: flex; justify-content: flex-end; gap: 1.5rem; }
.city_wrapper.is-second { position: absolute; inset: 120% 0 auto 0; }
.city_wrapper.is-third { position: absolute; inset: 240% 0 auto 0; }
.city_wrapper.is-fourth { position: absolute; inset: 360% 0 auto 0; }
.city_wrapper.is-fifth { position: absolute; inset: 480% 0 auto 0; }
[data-clock] { font-variant-numeric: tabular-nums; min-width: 5.5em; text-align: right; }
@media (min-width: 1280px) { .nav-bottom_right { padding-left: 20%; } }
@media (max-width: 991px) { .nav-top_left { grid-template-columns: 2fr 2fr; } .nav-bottom { bottom: 2.2vw; } .nav-bottom_right { padding-left: 0; } }
@media (max-width: 767px) {
  .nav-top_component { grid-template-columns: 1fr auto; align-items: center; }
  .nav-top_middle { gap: 1.25rem; align-items: center; }
  .mode-switch-mobile { display: block; }
  .nav-bottom { display: none; }
}

/* ---------- Menu ---------- */
.nav-menu {
  position: fixed; inset: 0; z-index: 3; width: 100%; height: 100dvh; display: block;
  background-color: var(--menu-bg); color: var(--text);
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); pointer-events: none;
}
.nav-menu_component {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; justify-items: stretch;
  width: 100%; height: 100%; padding: 5rem 0; position: relative;
  opacity: .25; transform: translate(-100px, -100px) scale(1.5) rotate(-15deg);
}
.nav-menu_col { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.nav-menu_link_wrapper { display: flex; align-items: center; margin-left: -.5rem; overflow: hidden; }
.nav-menu_link_wrapper.hidden { opacity: 0; pointer-events: none; }
.nav-menu_link_wrapper.w--current { opacity: .35; }
.nav-menu_link {
  display: block; font-family: var(--font-display); text-transform: uppercase;
  font-size: 9.4rem; line-height: 8.6rem; letter-spacing: -.01em; padding-right: .5rem;
  transform: translateY(120%); will-change: transform;
}
.nav-menu_visual {
  display: block; flex: none; width: 0; height: 7rem; margin-right: .5rem; border-radius: .3rem;
  background-position: 50%; background-size: cover; transition: width .8s var(--ease-custom);
}
@media (hover: hover) and (min-width: 992px) { .nav-menu_link_wrapper:hover .nav-menu_visual { width: 10.5rem; } }
.nav-menu_locales { position: absolute; left: 0; bottom: 4.5rem; }
.nav-menu_locales .locales-list { display: flex; gap: 1.5rem; }
@media (max-width: 991px) {
  .nav-menu_component { grid-template-columns: 1fr; gap: .5rem; align-content: center; }
  .nav-menu_link_wrapper.hidden { display: none; }
  .nav-menu_link { font-size: 5.4rem; line-height: 5rem; }
  .nav-menu_visual { height: 3.8rem; transition: none; }
  .nav-menu_col { padding-left: 1rem; }
  .nav-menu_locales { left: 1rem; bottom: 2.5rem; }
}
@media (max-width: 767px) {
  .nav-menu_link { font-size: 4rem; line-height: 4rem; }
  .nav-menu_visual { height: 3rem; border-radius: .2rem; margin-right: .3rem; }
  .nav-menu_col { gap: .25rem; }
  .nav-menu_locales .locales-list { flex-wrap: wrap; gap: .5rem 1rem; }
}

/* ---------- Hero ---------- */
.section_hero { width: 100%; height: 100vh; }
.section_hero.is-project { height: 80vh; }
.section_hero.is-news { margin-bottom: 15rem; }
.section_hero.is-legal { height: 70vh; }
.hero_component { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; perspective: 100vw; }
.hero_component h1 { position: relative; z-index: 2; }
.hero_bottom { position: absolute; left: 50%; bottom: 5vh; transform: translateX(-50%); }
.hero_bottom_wrapper { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.moving-visual_wrapper { position: absolute; top: 50%; left: 50%; z-index: 200; opacity: 0; pointer-events: none; transform-style: preserve-3d; }
.moving-visual { width: 24rem; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; transform: translate(2.5rem, 2.5rem); }
.moving-visual video { width: 100%; height: 100%; object-fit: cover; }
.project_h1 { text-align: center; }
.design-heading { max-width: 90rem; }
.notfound_bottom { position: absolute; bottom: 12vh; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
@media (max-width: 991px) { .section_hero { height: 100svh; } .section_hero.is-project { height: 70vh; } .section_hero.is-news { margin-bottom: 6rem; } .moving-visual_wrapper { display: none; } }
@media (max-width: 767px) {
  .section_hero, .section_hero.is-project { height: 100svh; }
  .section_hero.overflow-hidden { height: 80svh; }
  .project_h1 { font-size: 4.6rem; line-height: 4.2rem; }
}

/* ---------- Visual / reveal helpers ---------- */
.visuals_component { display: flex; flex-direction: column; gap: 6.25rem; width: 100%; }
.visual_wrapper { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; }
.visual_wrapper.is-home-video { aspect-ratio: 16 / 9; }
.visual_wrapper.is-cover { aspect-ratio: 16 / 9; }
.visual_wrapper.add-margin-bottom { margin-bottom: .3rem; }
.visual_wrapper video, .visual_wrapper .visual { width: 100%; height: 100%; object-fit: cover; }
.visual { transform: scale(1.05); }
.element-appear { position: relative; overflow: hidden; transform: scale(1.03); }
.visual_overlay { position: absolute; inset: auto 0 0 0; height: 100%; background-color: var(--dark); z-index: 5; pointer-events: none; }
html.is-dark .visual_overlay { background-color: #1a1a1a; }
.no-js .visual_overlay { height: 0; }

/* Initial states for GSAP (prevent flashes) */
.js .heading-appear { visibility: hidden; }
.js .heading-appear.gsap-ready { visibility: visible; }
.js .text-appear, .js .mono-appear, .js .line-appear, .js .quote_text { visibility: hidden; }
.js .simple-appear, .js .simple-appear-no-delay { opacity: 0; transform: translateY(3rem); }
.js .text-mono_wrapper > .text-mono, .js .text-mono_wrapper > h2.text-mono, .js .text-mono_wrapper > h3.text-mono { transform: translateY(120%) scale(.9); transform-origin: left bottom; }
@media (min-width: 767px) { .js .grow-appear, .js .archives_visual_wrapper { opacity: 0; transform: scale(.9); } }
.js .client_logo { transform: translateY(120%); }
.js .tools_logo_wrapper .tools_logo { transform: translateY(140%); }
.animated-word-classic { display: inline-block; overflow: hidden; vertical-align: top; padding-top: .08em; margin-top: -.08em; }
.split-word, .animated-char { display: inline-block; will-change: transform; }
.animated-word { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .02em .02em; margin: -.12em -.02em -.02em; }
.line-mask { display: block; overflow: hidden; width: 102%; padding-top: .1em; margin-top: -.1em; padding-bottom: .04em; margin-bottom: -.04em; }
.animated-line { display: block; will-change: transform; }
.intro-line-anim { display: block; }

/* ---------- Home: video + intro ---------- */
.section_home-video { padding-bottom: 14rem; }
.section_home-video .element-appear { border-radius: var(--radius); }
.section_home-intro { margin-bottom: 15.625rem; }
.home_intro_component { display: flex; flex-direction: column; align-items: center; gap: 2rem; position: relative; }
.home_intro_content {
  max-width: 80rem; text-align: center; text-transform: uppercase;
  font-family: var(--font-display); font-size: 6rem; line-height: 1; letter-spacing: -.005em;
}
.home_intro_hover { display: inline-block; line-height: .9; border-bottom: 3px solid currentColor; cursor: default; }
.home_intro_visuals { display: none; }
.home_intro_spawn { position: absolute; top: 0; left: 0; z-index: 30; pointer-events: none; border-radius: var(--radius); overflow: hidden; }
.home_intro_spawn img { display: block; max-width: 20rem; max-height: 20rem; width: auto; height: auto; }

/* ---------- Latest / showcase grid ---------- */
.section_latest { padding-bottom: 13rem; overflow: hidden; }
.home_latest_heading_wrapper { position: relative; display: flex; justify-content: center; align-items: center; height: 32rem; }
.home_latest_heading_absolute { position: absolute; top: 0; left: 0; }
.playground-heading { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.latest_content { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.4rem; row-gap: 1rem; }
.latest_visual { position: relative; display: block; aspect-ratio: 1; width: 100%; border-radius: var(--radius); overflow: hidden; }
.js .latest_content_item:nth-child(odd) .latest_visual { transform: translate(-100%, 30rem) rotate(-26deg); opacity: 0; }
.js .latest_content_item:nth-child(even) .latest_visual { transform: translate(100%, 30rem) rotate(26deg); opacity: 0; }
.latest_visual_background { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.latest_visual_overlay { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; }
.latest_visual_video_wrapper { position: absolute; inset: 0; z-index: 3; opacity: 0; display: flex; align-items: center; justify-content: center; padding: 0 10%; }
.visual_scale { width: 100%; overflow: hidden; border-radius: var(--radius); }
.visual_scale video { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.latest_visual_caption { position: absolute; left: 1rem; bottom: 1rem; z-index: 5; color: var(--light); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
/* Soft bottom gradient keeps captions legible on any image. */
.latest_visual::after { content: ''; position: absolute; inset: auto 0 0 0; height: 35%; z-index: 4; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); }
@media (max-width: 991px) { .home_latest_heading_wrapper { height: 28rem; } .latest_content { column-gap: 1rem; row-gap: .5rem; } }
@media (max-width: 767px) {
  .home_intro_content { font-size: 10.5vw; line-height: 1; }
  h1, .heading-style-h1 { line-height: .95; }
  .section_latest { padding-bottom: 7rem; }
  .home_latest_heading_wrapper { height: auto; padding: 3.5rem 0 4rem; flex-direction: column; }
  .home_latest_heading_absolute { left: 50%; transform: translateX(-50%); }
  .latest_content { grid-template-columns: 1fr; gap: 1.25rem; }
  .playground-heading { font-size: 4.5rem; line-height: 4rem; }
}

/* ---------- Home services ---------- */
.section_home-services { margin-bottom: 10rem; }
.home_services_component { display: flex; flex-direction: column; gap: 7rem; align-items: flex-start; }
.home_services_list { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
.home_services_list-item_wrapper { position: relative; display: flex; justify-content: center; align-items: center; gap: 1.5rem; cursor: default; transition: opacity .2s ease-in-out; }
.home_services_list-item_container { position: relative; z-index: 2; }
.home_services_list-item { font-family: var(--font-display); text-transform: uppercase; font-size: 8rem; line-height: .9; letter-spacing: -.005em; }
.home_services_list-item_absolute { position: absolute; top: 50%; right: -1rem; opacity: 0; transform: translate(120%, -50%); transition: opacity .2s ease-in-out; white-space: nowrap; }
.home_services_embed { position: absolute; inset: 0; pointer-events: none; }
.home_services_visual_wrapper {
  position: absolute; top: 50%; left: 0; z-index: 1; width: 24rem; aspect-ratio: 540 / 405; height: 0; opacity: 0;
  transform: translateY(-50%); border-radius: var(--radius); overflow: hidden;
}
.home_services_visual_wrapper video { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (min-width: 768px) {
  .home_services_list:hover .home_services_list-item_wrapper { opacity: .15; }
  .home_services_list:hover .home_services_list-item_wrapper:hover { opacity: 1; }
  .home_services_list-item_wrapper:hover .home_services_list-item_absolute { opacity: 1; }
}
.home_services_component > .small-link { align-self: center; }
@media (max-width: 991px) { .home_services_list-item { font-size: 6rem; } .home_services_component { gap: 4rem; } .home_services_list-item_absolute { display: none; } .home_services_visual_wrapper { width: 13rem; } .section_home-services { overflow: hidden; } }
@media (max-width: 767px) {
  .home_services_component { gap: 2rem; align-items: center; }
  .home_services_list-item { font-size: 3.6rem; }
  .home_services_embed { display: none; }
}

/* ---------- Home sectors (clients row) ---------- */
.section_home-clients { margin-bottom: 10rem; }
.home_clients_component { display: flex; flex-direction: column; gap: 4rem; align-items: flex-start; }
.home_clients_list { display: flex; justify-content: space-between; align-items: center; gap: .5rem 3rem; width: 100%; overflow: hidden; flex-wrap: wrap; }
.client_logo_wrapper { overflow: hidden; }
.client_logo { display: block; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 3.2rem; line-height: 1.05; letter-spacing: 0; white-space: nowrap; }
@media (max-width: 767px) { .home_clients_component { align-items: center; gap: 2rem; } .home_clients_list { justify-content: center; gap: 1rem 2rem; } .client_logo { font-size: 2.1rem; } }

/* ---------- CTA ---------- */
.section_cta { margin-bottom: 10rem; }
.cta_component { display: grid; grid-template-columns: 5fr 3fr; gap: 2rem; align-items: start; }
.cta_content { display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; padding-top: .5rem; }
.cta_visual, .contact_visual, .success_visual {
  display: inline-flex; width: 0; height: 7rem; margin-right: 7px; vertical-align: baseline;
  border-radius: var(--radius); background-position: 50%; background-size: cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.contact_visual { background-image: url(/assets/media/small-29.jpg); }
.success_visual { background-image: url(/assets/media/small-30.jpg); margin-left: 9px; }
@media (min-width: 1280px) { .cta_component { grid-template-columns: 6fr 4fr; } }
@media (min-width: 1440px) { .cta_component { grid-template-columns: 5fr 4fr; } }
@media (max-width: 991px) { .cta_component { grid-template-columns: 1fr; gap: 1rem; } .cta_content { gap: 1.25rem; } .cta_visual, .contact_visual, .success_visual { height: 5rem; border-radius: .25rem; } .section_cta { margin-bottom: 7rem; } }
@media (max-width: 767px) { .cta_visual, .contact_visual, .success_visual { height: 2.8rem; border-radius: .2rem; } .section_cta { margin-bottom: 4rem; } }

/* ---------- Intro ---------- */
.section_intro { margin-bottom: 12.5rem; }
.intro_component { display: grid; grid-template-columns: 7fr 6fr; align-items: start; position: relative; }
.intro_component.is-project { grid-template-columns: 3fr 7fr; padding-right: 16.6667%; }
.intro_description.is-small { font-size: 1.05rem; line-height: 1.5rem; opacity: .75; }
@media (max-width: 991px) { .section_intro { margin-bottom: 10rem; } .intro_component { grid-template-columns: 4fr 6fr; gap: 1rem; } .intro_component.is-project { padding-right: 10%; } }
@media (max-width: 767px) { .section_intro { margin: 4rem 0 7rem; } .section_intro.is-case { margin-bottom: 4rem; } .intro_component, .intro_component.is-project { grid-template-columns: 1fr; gap: 1.75rem; } }

/* ---------- Work: projects list ---------- */
.section_projects { margin-bottom: 15.625rem; }
.projects_component { position: relative; display: flex; flex-direction: column; }
.projects_content { position: relative; display: flex; flex-direction: column; width: 100%; padding-top: 6rem; }
.projects_list_wrapper { position: relative; z-index: 1; width: 100%; }
.projects_list { display: flex; flex-direction: column; width: 100%; padding-bottom: 10rem; }
.projects_item { width: 100%; }
.link.is-project { width: 100%; padding: .25rem 0; margin-bottom: -.2rem; }
.projects_name { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 10rem; line-height: 8.6rem; letter-spacing: -.005em; }
.projects_visual_wrapper { position: absolute; inset: 0 0 0 auto; z-index: 0; width: 30%; height: calc(100% - 7rem); margin-top: calc(7rem + 3.5%); display: flex; justify-content: flex-end; align-items: flex-start; }
.projects_visuals_wrapper { position: sticky; top: 50%; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; transform: translateY(-50%); }
.projects_visual_container { position: relative; z-index: 1; height: 100%; }
.projects_visuals_overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.projects_images_preload { position: relative; z-index: 0; }
.projects_visual { position: absolute; inset: 0; z-index: 3; }
.projects_images_preload .projects_visual { visibility: hidden; }
.projects_visual video { width: 100%; height: 100%; object-fit: cover; }
.project_link { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; margin-bottom: 1.3rem; }
.project_infos { display: flex; flex-direction: column; gap: .5rem; }
.project_name { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 2.4rem; line-height: 2.4rem; }
.project_infos_tagline { display: block; font-size: 1.05rem; line-height: 1.3rem; }
.project_visual { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; }
.js .project_visual { transform: translate(100%, 7rem) rotate(26deg); opacity: 0; }
.project_visual video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) { .section_projects { margin-bottom: 0; } .projects_name { font-size: 6rem; line-height: 5.2rem; } .projects_content { padding-top: 5rem; } .projects_list { padding-bottom: 8.5rem; } }
@media (max-width: 767px) { .section_projects { margin-bottom: 5rem; } .projects_content { padding: 4rem 0 3rem; } .projects_list { padding-bottom: 0; } .projects_visual_wrapper { display: none; } }

/* ---------- Work: archives / lab ---------- */
.section_archives { padding-bottom: 15.625rem; overflow: hidden; }
.archives_component { display: flex; flex-direction: column; position: relative; }
.archives_list { display: flex; flex-direction: column; gap: 11.25rem; width: 100%; padding-top: 6.75rem; }
.archives_row { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 7.875rem; }
.archives_visuals { position: absolute; top: 0; left: 0; display: flex; gap: 1.25rem; height: 100%; }
.archives_visuals.is-first { left: 5%; } .archives_visuals.is-second { left: auto; right: 5%; } .archives_visuals.is-third { left: 10%; }
.archives_visuals.is-fourth { left: auto; right: 29%; } .archives_visuals.is-fifth { left: 5%; } .archives_visuals.is-sixth { left: 50%; }
.archives_visuals.is-seventh { left: 17%; } .archives_visuals.is-eighth { left: auto; right: 0; } .archives_visuals.is-ninth { left: 5%; } .archives_visuals.is-tenth { left: auto; right: 5%; }
.archives_visual_wrapper { position: relative; height: 100%; }
.archives_visual_wrapper.is-2 { height: 62%; align-self: center; }
.archives_visual_wrapper.is-3 { height: 82%; align-self: flex-end; }
.archives_visual { height: 100%; width: auto; border-radius: var(--radius); pointer-events: none; will-change: transform; }
.archives_visual_overlay_wrapper { position: absolute; inset: 0; border-radius: var(--radius); }
.archives_description.is-hide { opacity: 0; }
.archives_description { position: relative; z-index: 1; }
@media (max-width: 991px) { .archives_row { height: 6rem; } .archives_visuals.is-first { left: 0; } .archives_visuals.is-second { right: 0; } .archives_visuals.is-third { left: 5%; } .archives_visuals.is-fourth { right: 15%; } .archives_visuals.is-seventh { left: 0; } }
@media (max-width: 767px) {
  .archives_list { gap: 4rem; padding-top: 4rem; }
  .archives_row { flex-direction: column; align-items: flex-start; gap: 1rem; height: auto; }
  .archives_row.is-right { align-items: flex-end; }
  .archives_visuals { position: static; height: 5rem; gap: 1rem; }
  .archives_description.is-hide { display: none; }
}

/* ---------- Case study ---------- */
.section_project-cover { padding-bottom: 9.375rem; }
.section_tagline { margin-bottom: 10rem; }
.tagline_component { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.project_tagline { font-family: var(--font-display); text-transform: uppercase; font-size: 8rem; line-height: 7.2rem; max-width: 62rem; }
.section_project { margin-bottom: 6rem; }
.project_component { width: 75%; margin: 0 auto; }
.project_visuals_wrapper { display: flex; flex-direction: column; gap: 1.25rem; }
.project_visuals_wrapper .visual_wrapper { aspect-ratio: 16 / 9; }
.project_2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.project_2col .visual_wrapper { aspect-ratio: 4 / 5; }
.section_projects-infos { margin: 10rem 0 0; }
.project_infos_component { display: grid; grid-template-columns: 2fr 1fr; padding: 0 12.5%; gap: 2rem; }
.project_infos_col { display: flex; flex-direction: column; gap: 2.5rem; }
.project_infos_row { display: grid; grid-template-columns: 10rem 1fr; gap: 2.5rem; align-items: start; }
.project_info_content p { font-family: var(--font-mono); font-weight: 300; text-transform: uppercase; font-size: var(--fs-mono); line-height: var(--lh-mono); letter-spacing: var(--ls-mono); margin-bottom: .5rem; }
.section_projects-next { margin: 15vh 0; overflow: hidden; }
.project_next_component { display: flex; flex-direction: column; align-items: center; gap: 5rem; text-align: center; max-width: 70rem; margin: 0 auto; padding: 5vh 0; }
.project_next_content { position: relative; display: block; }
.project_next_name { position: relative; z-index: 1; display: block; font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-h1); line-height: var(--lh-h1); opacity: .25; transform: scale(.9); transition: opacity .3s ease-in-out, transform .3s ease-in-out; }
.project_next_visual_wrapper { position: absolute; top: 50%; left: 50%; z-index: 0; width: 25rem; transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s ease-in-out; border-radius: var(--radius); overflow: hidden; }
.project_next_component:hover .project_next_name { opacity: 1; transform: scale(1.3); mix-blend-mode: difference; color: var(--light); }
.project_next_component:hover .project_next_visual_wrapper { opacity: 1; }
@media (max-width: 991px) { .project_tagline { font-size: 5rem; line-height: 4.6rem; } .tagline_component { flex-direction: column-reverse; gap: 1rem; } .project_component { width: 100%; } .project_infos_component { padding: 0; } }
@media (max-width: 767px) {
  .section_project-cover { padding: 2rem 0 7rem; } .section_tagline { margin-bottom: 7rem; }
  .project_tagline { font-size: 2.8rem; line-height: 2.7rem; } .section_project { margin-bottom: 4rem; }
  .project_infos_component { grid-template-columns: 1fr; } .project_infos_row { grid-template-columns: 1fr; gap: 1rem; }
  .project_2col { gap: .75rem; }
  .project_next_visual_wrapper { width: 14rem; }
}

/* ---------- Quote ---------- */
.section_quote { margin-bottom: 20rem; }
.section_quote.less-quote { margin: 10rem 0; }
.quote_component { display: flex; justify-content: center; }
.quote_content { display: flex; flex-direction: column; align-items: center; gap: 5rem; flex: 1; }
.quote_picture_wrapper { position: relative; width: 100%; max-width: 18rem; aspect-ratio: 231 / 273; border-radius: var(--radius); overflow: hidden; background: var(--light); }
html.is-dark .quote_picture_wrapper { background: var(--light); }
.quote_picture { width: 100%; height: 100%; object-fit: cover; transform: scale(2.3); }
.quote_text { max-width: 76rem; text-align: center; text-transform: uppercase; font-family: var(--font-display); font-size: 6rem; line-height: 5.8rem; padding: 0; border: 0; }
.quote_infos_wrapper { display: flex; gap: 1.5rem; }
@media (max-width: 991px) { .section_quote { margin-bottom: 15rem; } .quote_content { gap: 3rem; } .quote_picture_wrapper { max-width: 14rem; } .quote_text { font-size: 4.1rem; line-height: 4rem; max-width: 90%; } }
@media (max-width: 767px) { .section_quote { margin-bottom: 10rem; } .section_quote.less-quote { margin: 6rem 0; } .quote_content { gap: 2rem; } .quote_text { font-size: 2.8rem; line-height: 2.8rem; padding: 0 5%; } .quote_infos_wrapper { flex-direction: column; align-items: center; gap: .4rem; } .quote_picture_wrapper { max-width: 9rem; } }

/* ---------- Services / packs ---------- */
.section_tools { margin-bottom: 12.5rem; }
.tools_label { display: flex; justify-content: center; margin-bottom: 3rem; }
.tools_component { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2rem; max-width: 64rem; margin: 0 auto; }
.tools_logo_wrapper { display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 1rem .5rem; }
.tools_component.is-visible, .tools_component.is-visible .tools_logo_wrapper { overflow: visible; }
/* League Spartan is reserved for the wordmark (brand manual): tools use the body face. */
.tools_logo.glass-pill { padding: 1rem 1.6rem; font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: -.02em; font-size: 1.35rem; }
.section_services { margin-bottom: 20rem; }
.services_component { display: flex; flex-direction: column; gap: 12.5rem; position: relative; }
.services_content { display: grid; grid-template-columns: 1fr 3fr; align-items: start; position: relative; }
.services_content + .services_content { margin-top: -4rem; }
.services_list { display: flex; flex-direction: column; gap: 15.625rem; }
.services_item { display: grid; grid-template-columns: 2fr 1fr; gap: 11%; margin-top: -.3rem; }
.packs_item { display: flex; flex-direction: column; align-items: flex-start; gap: 3.125rem; width: 100%; }
.skills_lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; }
.skills_list { display: flex; flex-direction: column; gap: .75rem; }
.services_meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.services_visual_wrapper { width: 100%; }
.services_visual { position: relative; width: 100%; max-width: 26.5rem; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
.services_visual video { width: 100%; height: 100%; object-fit: cover; }
.services_visual_link { position: absolute; inset: 0; z-index: 2; }
@media (max-width: 991px) {
  .section_tools { margin-bottom: 10rem; } .section_services { margin-bottom: 15rem; }
  .services_content { grid-template-columns: 1fr; gap: 5rem; } .services_list { gap: 10rem; }
  .services_item { display: flex; flex-direction: column; gap: 2rem; } .packs_item { gap: 2rem; } .services_visual { max-width: none; }
  .services_component { gap: 7rem; } .services_content + .services_content { margin-top: 0; }
}
@media (max-width: 767px) { .section_services { margin-bottom: 5rem; } .services_list { gap: 6rem; } .packs_item { gap: 1.25rem; } .skills_list { gap: .5rem; } .services_component { gap: 5rem; } .tools_logo.glass-pill { font-size: 1.1rem; padding: .8rem 1.2rem; } }
@media (max-width: 479px) { .skills_lists { grid-template-columns: 1fr; gap: .5rem; } }

/* Plans */
.section_packs { margin-bottom: 14rem; }
.packs_component { display: flex; flex-direction: column; gap: 10rem; }
.packs_list { display: flex; flex-direction: column; width: 100%; }
.packs_item.is-first, .packs_item.is-second { padding-bottom: 15rem; }
.packs_description_wrapper { display: grid; grid-template-columns: 6fr 3fr; gap: 3rem; width: 100%; }
.packs_words { will-change: transform; }
.packs_words .text-mono { height: 18px; line-height: 18px; }
.packs_price .glass-pill { font-size: 1rem; padding: .8rem 1.3rem; background: var(--blue); color: var(--light); border-color: rgba(255,255,255,.35); }
.packs_note { margin-top: 6rem; max-width: 40rem; }
.section_side-cta { margin-bottom: 14rem; }
.side_cta_component { display: flex; padding-left: 58.3333%; padding-right: 8.3333%; }
.side_cta_content { display: flex; flex-direction: column; gap: 3.125rem; max-width: 30rem; }
.section_smart { margin-bottom: 20rem; }
.smart_component { display: flex; flex-direction: column; gap: 12.5rem; }
.smart_content { display: grid; grid-template-columns: 2fr 9fr; align-items: start; position: relative; }
.smart_list { display: flex; flex-direction: column; gap: 11.25rem; }
.smart_item { display: grid; grid-template-columns: 5fr 4fr; gap: 2rem; max-width: 72rem; }
@media (max-width: 991px) {
  .section_packs { margin-bottom: 9rem; } .packs_component { gap: 6rem; } .packs_list { gap: 7rem; }
  .packs_item.is-first, .packs_item.is-second { padding-bottom: 0; } .text-mono_sticky { position: static; } .text-mono_sticky.is-half { display: none; }
  .section_side-cta { margin-bottom: 9rem; } .side_cta_component { padding-left: 40%; padding-right: 10%; }
  .smart_component { gap: 8rem; } .smart_content { grid-template-columns: 1fr; gap: 6rem; } .smart_list { gap: 5rem; } .smart_item { grid-template-columns: 5fr 7fr; gap: 1.5rem; }
}
@media (max-width: 767px) { .packs_description_wrapper { grid-template-columns: 1fr; gap: 1.25rem; } .side_cta_component { padding-left: 15%; padding-right: 5%; } .smart_item { grid-template-columns: 1fr; gap: 1.25rem; } .section_smart { margin-bottom: 10rem; } }
@media (max-width: 479px) { .side_cta_component { padding: 0; } }

/* ---------- Approach ---------- */
.section_process { margin-bottom: 20rem; }
.process_component { display: flex; flex-direction: column; gap: 12.5rem; position: relative; }
.process_list { display: grid; gap: 15.625rem; padding: 0 16.6667%; }
.process_item { display: grid; grid-template-columns: 1fr 3fr; align-items: start; }
.process_main-content { display: flex; flex-direction: column; gap: 3.125rem; }
.section_steps { position: relative; margin-top: -50vh; margin-bottom: 3rem; overflow: hidden; }
.steps_pin { height: 600vh; }
.steps_component { position: relative; height: 100vh; }
.steps_wrapper { height: 100%; }
.step_wrapper { position: absolute; top: 50%; left: 50%; width: 250vw; height: 250vw; border-radius: 100%; transform: translate(-50%); will-change: transform; pointer-events: none; }
.step_card {
  position: absolute; top: 0; left: 50%; width: 25vw; aspect-ratio: 80 / 108; padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background-color: var(--dark); color: var(--light); border-radius: var(--radius);
  transform: translate(-50%, 55vh); will-change: transform; pointer-events: auto;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.step_wrapper:nth-child(4n+2) .step_card { background-color: var(--blue); }
html.is-dark .step_card { background-color: #151515; }
html.is-dark .step_wrapper:nth-child(4n+2) .step_card { background-color: var(--blue); }
.step_number { opacity: .6; }
.step_description { font-size: 1.55rem; line-height: 1.85rem; text-indent: 3rem; }
.step_heading { font-family: var(--font-display); text-transform: uppercase; font-size: 5rem; line-height: 4.6rem; }
.steps_mobile { display: none; }
@media (max-width: 991px) {
  .section_process { margin-bottom: 12rem; } .process_component { gap: 7rem; } .process_list { gap: 7rem; padding: 0 10% 0 0; }
  .step_card { width: 40vw; } .step_heading { font-size: 4rem; line-height: 3.8rem; } .step_description { font-size: 1.3rem; line-height: 1.6rem; }
}
@media (max-width: 767px) {
  .section_process { margin-bottom: 7rem; } .process_item { grid-template-columns: 1fr; gap: 1.25rem; } .process_main-content { gap: 1.25rem; } .process_list { gap: 6rem; }
  .section_steps { display: none; }
  .steps_mobile { display: grid; gap: 1rem; padding: 0 var(--pad); margin: 0 0 7rem; }
  .steps_mobile_item { padding: 1.25rem; border-radius: var(--radius); background: var(--dark); color: var(--light); display: grid; gap: .75rem; }
  .steps_mobile_item:nth-child(4n+2) { background: var(--blue); }
  html.is-dark .steps_mobile_item { background: #151515; }
  html.is-dark .steps_mobile_item:nth-child(4n+2) { background: var(--blue); }
  .steps_mobile_item p { font-size: 1rem; line-height: 1.45rem; }
}

/* ---------- Studio ---------- */
.hero_trail_images { display: none; }
.hero_trail_img { position: absolute; top: 0; left: 0; z-index: 1; height: 15vw; width: auto; object-fit: cover; border-radius: var(--radius); pointer-events: none; }
.section_people { margin-bottom: 18.75rem; }
.people_component { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4.6875rem; align-items: start; position: relative; }
.people_picture_wrapper, .people_picture_parallax { display: flex; flex-direction: column; gap: 1.25rem; }
.people_picture_wrapper._2 { margin-top: 30rem; }
.people_picture_wrapper._3 { margin-top: 60rem; }
.people_picture { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: var(--radius); }
.people_picture.is-brand { object-fit: cover; }
.people_infos { display: flex; flex-direction: column; gap: .5rem; }
.section_values { margin-bottom: 20rem; }
.values_component { display: flex; flex-direction: column; gap: 12.5rem; }
.values_list { display: flex; flex-direction: column; gap: 15.625rem; }
.values_item { display: grid; grid-template-columns: 2fr 4fr 5fr; align-items: start; padding-right: 8.3333%; }
.values_item p { max-width: 34rem; }
@media (max-width: 991px) {
  .section_people { margin-bottom: 12rem; } .people_component { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .people_picture_wrapper._2 { margin-top: 8rem; } .people_picture_wrapper._3 { display: none; }
  .section_values { margin-bottom: 12rem; } .values_component { gap: 5rem; } .values_list { gap: 4rem; }
  .values_item { grid-template-columns: 5fr 9fr; gap: 2rem; padding-right: 0; } .values_item > .text-mono_wrapper { grid-column: 1 / -1; }
}
@media (max-width: 767px) { .section_people { margin-bottom: 8rem; } .values_list { gap: 6rem; } .values_item { display: flex; flex-direction: column; gap: 1.25rem; } .section_values { margin-bottom: 8rem; } }

/* ---------- Journal ---------- */
.news_hero_visual { position: absolute; width: 16.6667%; aspect-ratio: 210 / 126; border-radius: var(--radius); background-size: cover; background-position: 50%; z-index: 0; }
.news_hero_visual.is-first { top: 20%; left: 6%; }
.news_hero_visual.is-second { top: 12%; right: 10%; }
.news_hero_visual.is-third { bottom: 14%; left: 55%; }
.section_news { margin-bottom: 15rem; }
.news_component { padding: 0 8.3333%; }
.news_list { display: flex; flex-direction: column; gap: 12rem; }
.news_item { display: grid; grid-template-columns: 1fr 3fr 1fr; align-items: start; width: 100%; gap: 1.5rem; }
.news_heading_wrapper { padding-right: 5%; display: flex; flex-direction: column; gap: 1.25rem; }
.news_heading { display: block; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 4rem; line-height: 4rem; letter-spacing: 0; }
.news_excerpt { opacity: .7; font-size: 1.05rem; line-height: 1.5rem; }
.news_visual { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); background-size: cover; background-position: 50%; transition: transform .4s var(--ease-overshoot); }
.news_item:hover .news_visual { transform: scale(.96); }
@media (max-width: 991px) { .news_hero_visual { width: 24%; } .news_component { padding: 0; } .news_list { gap: 6rem; } .news_item { grid-template-columns: 3fr 1fr; } .news_item > .text-mono_wrapper { grid-column: 1 / -1; } }
@media (max-width: 767px) { .section_news { margin-bottom: 10rem; } .news_list { gap: 5rem; } .news_item { grid-template-columns: 1fr; gap: 1rem; } .news_heading { font-size: 2.6rem; line-height: 2.6rem; } .news_visual { aspect-ratio: 16 / 9; } }

/* ---------- Article ---------- */
.section_article-hero { margin-bottom: 8rem; }
.article_hero_component { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; height: 100vh; text-align: center; }
.article_title { max-width: 90rem; font-size: var(--fs-h2); line-height: var(--lh-h2); }
.section_article-cover { padding-bottom: 9rem; }
.article_cover_component .visual_wrapper { aspect-ratio: 16 / 9; }
.section_article { padding-bottom: 15.625rem; }
.article_component { display: grid; grid-template-columns: 1fr 6fr; gap: 1rem; align-items: start; }
.article_side { position: sticky; top: 8rem; display: flex; flex-direction: column; gap: 2.5rem; }
.article_tags_list { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.article_content { position: relative; }
.article_content p, .article_content ul, .article_content ol { padding: 0 20% 0 10%; margin-bottom: 1rem; font-size: 1.2rem; line-height: 1.85rem; }
.article_content ul, .article_content ol { padding-left: calc(10% + 1.25rem); margin-top: 1rem; }
.article_content li { margin-bottom: .5rem; }
.article_content ul li { list-style-type: square; }
.article_content h2 { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: -.045em; font-size: 4.6rem; line-height: 4.8rem; margin: 3rem 0 2rem; padding-right: 4rem; }
.article_content h3 { font-family: var(--font-body); font-weight: 600; font-size: 2.6rem; line-height: 2.9rem; letter-spacing: -.03em; margin: 3rem 0 1.5rem; padding: 0 20% 0 10%; scroll-margin-top: 6rem; }
.article_content blockquote { font-family: var(--font-display); text-transform: uppercase; font-size: 3rem; line-height: 3.3rem; margin: 3rem 0; padding: 0 20% 0 10%; }
.article_content a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.article_content strong { font-weight: 600; }
.article_flip_slot { position: relative; width: 45%; aspect-ratio: 16 / 10; margin: 3rem 0; border-radius: var(--radius); }
.article_flip_slot.is-left { margin-left: 10%; }
.article_flip_slot.is-right { margin-left: auto; margin-right: 10%; }
.article_flip_slot img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); visibility: hidden; }
.article_flip_target { position: absolute; top: 0; left: 0; width: 45%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); z-index: 2; pointer-events: none; }
.section_related-articles { padding-bottom: 15.625rem; overflow: hidden; }
.related-articles_component { display: flex; flex-direction: column; gap: 2rem; }
.related-projects_list { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.related-projects_link { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.related-articles_visual { display: block; width: 100%; aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; }
.related-articles_visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-overshoot); }
.related-projects_link:hover img { transform: scale(1.04); }
.related-projects_link .news_heading { font-size: 2.6rem; line-height: 2.7rem; }
@media (max-width: 991px) {
  .article_component { display: flex; flex-direction: column-reverse; gap: 3rem; }
  .article_side { position: static; flex-direction: row; gap: 4rem; padding-left: 10%; }
  .article_content h2 { font-size: 3.6rem; line-height: 3.8rem; padding-right: 2rem; }
  .section_article { padding-bottom: 8rem; }
}
@media (max-width: 767px) {
  .article_hero_component { height: 100svh; }
  .article_content p, .article_content ul, .article_content ol, .article_content blockquote, .article_content h3 { padding-right: 5%; padding-left: 7%; }
  .article_content ul, .article_content ol { padding-left: calc(7% + 1.25rem); }
  .article_content h2 { font-size: 2.6rem; line-height: 2.8rem; margin: 2rem 0 1rem; }
  .article_content h3 { font-size: 2rem; line-height: 2.3rem; }
  .article_content blockquote { font-size: 2.2rem; line-height: 2.4rem; }
  .article_flip_slot, .article_flip_slot.is-right, .article_flip_slot.is-left { width: auto; margin: 2rem 5% 2rem 7%; }
  .article_flip_slot img { visibility: visible; }
  .article_flip_target { display: none; }
  .article_side { flex-direction: column; gap: 2rem; padding-left: 7%; }
  .related-projects_list { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.footer { padding-bottom: 3.2rem; position: relative; z-index: 2; background: var(--bg); }
.footer_component { display: flex; flex-direction: column; gap: 5rem; }
.footer_top { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2rem; }
.footer_top_video { position: relative; aspect-ratio: 210 / 126; border-radius: var(--radius); overflow: hidden; }
.footer_top_video video { width: 100%; height: 100%; object-fit: cover; }
.footer_content { display: flex; flex-direction: column; gap: 8.75rem; }
.footer_main { display: grid; grid-template-columns: 7fr 4fr; padding-right: 8.3333%; }
.footer_menu { display: flex; flex-direction: column; gap: 1.875rem; }
.footer_menu._2col-mobile { display: grid; grid-template-columns: 1fr 1.5fr; }
.footer_menu_col { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.footer_locales { margin-top: 1.5rem; }
.footer_locales .locales-list { display: flex; flex-direction: column; gap: .25rem; }
.link.w--current { opacity: .65; pointer-events: none; text-decoration: underline; text-underline-offset: 3px; }
.footer_talk { color: var(--accent-text); }
.footer_logo_wrapper { position: relative; }
.footer_logo_fill { opacity: 0; pointer-events: none; }
.footer_logo_fill .logo-instance { aspect-ratio: 1000 / 290; width: 100%; }
.footer_logo_stretch { position: absolute; inset: 0; }
.footer_logo_stretch .logo-instance { position: absolute; left: 0; right: 0; top: 0; height: 100%; transform-origin: 50% 0%; will-change: transform; }
.logo-instance svg { display: block; width: 100%; height: 100%; }
.logo-instance text { font-family: var(--font-display); font-size: 325.6px; fill: currentColor; }
@media (max-width: 991px) { .footer { padding-bottom: 2.5rem; } .footer_component { gap: 4rem; } .footer_top { grid-template-columns: repeat(5, 1fr); gap: 1rem; } }
@media (max-width: 767px) { .footer { padding-bottom: 1.25rem; } .footer_main { grid-template-columns: 1fr; gap: 3rem; } .footer_top { grid-template-columns: repeat(3, 1fr); } .footer_content { gap: 5rem; } }
@media (max-width: 479px) { .footer_main { padding-right: 0; } .footer_component { gap: 2rem; } }

/* ---------- Contact modal ---------- */
.section_contact { position: fixed; inset: 0; z-index: 10001; display: none; width: 100vw; height: 100svh; overflow: hidden; transform: translateY(-100%); }
.contact_background { position: absolute; inset: 0; background: var(--bg); }
.contact_overlay { position: fixed; inset: 0; z-index: 9999; opacity: 0; pointer-events: none; background: rgba(0,0,0,.35); }
.contact_component { position: relative; display: flex; flex-direction: column; height: 100svh; padding: var(--pad) 0; overflow-y: auto; overscroll-behavior: contain; opacity: 0; }
.contact_top { position: relative; z-index: 2; display: flex; justify-content: flex-end; }
.contact_form-block { flex: 1; display: flex; flex-direction: column; }
.contact_form { display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; height: 100%; padding-left: .1rem; }
.contact_title { font-size: calc(var(--fs-h2) * .9); line-height: calc(var(--lh-h2) * .9); }
.contact_rows { display: flex; flex-direction: column; gap: 1.1rem; }
.contact_row { display: grid; grid-template-columns: 6rem 1fr; gap: 2rem; align-items: start; }
.contact_row > .text-mono { padding-top: 1.1rem; }
.contact_field, .contact_area {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); padding: 0 0 .25rem; margin: 0; border-radius: 0;
  font-family: var(--font-display); text-transform: uppercase; font-size: 3.6rem; line-height: 4rem; letter-spacing: 0;
}
.contact_area { min-height: 9rem; resize: vertical; }
.contact_field::placeholder, .contact_area::placeholder { color: var(--text); opacity: .13; }
.contact_field:focus, .contact_area:focus { border-bottom-color: var(--blue); outline: none; }
html.is-dark .contact_field:focus, html.is-dark .contact_area:focus { border-bottom-color: var(--light); }
.contact_field.is-invalid { border-bottom-color: #d4002a; }
.contact_radio_wrapper { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .6rem; }
.contact_radio { position: relative; display: inline-flex; }
.contact_radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.contact_radio_label {
  display: inline-flex; padding: .35rem 1rem .4rem; border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--font-display); text-transform: uppercase; font-size: 1.6rem; line-height: 1.6rem; transition: all .2s ease-in-out;
}
.contact_radio input:checked + .contact_radio_label { background: var(--blue); border-color: var(--blue); color: var(--light); }
.contact_radio input:focus-visible + .contact_radio_label { outline: 2px solid var(--blue); outline-offset: 2px; }
.contact_bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding-top: 1.5rem; }
.contact_submit {
  flex: none; padding: .7rem 1.6rem .75rem; border-radius: 999px; background: var(--blue); color: var(--light);
  font-family: var(--font-display); text-transform: uppercase; font-size: 2rem; line-height: 2rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 30px rgba(1,24,216,.35); transition: transform .3s var(--ease-overshoot);
}
.contact_submit:hover { transform: scale(1.04); }
.contact_submit[disabled] { opacity: .6; pointer-events: none; }
.contact_error { color: #d4002a; }
.contact_success { position: absolute; inset: 0; z-index: 1; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; text-align: center; padding: 0 var(--pad); }
.contact_success_wrapper { overflow: hidden; padding: .2em 10px 0; }
.contact_success .heading-style-h2 { transform: translateY(140%); }
.contact_success_text { max-width: 34rem; opacity: .7; }
.contact_success_mono_wrapper { overflow: hidden; }
.contact_success_mono_wrapper .link { transform: translateY(120%); }
@media (max-width: 991px) { .contact_field, .contact_area { font-size: 2.5rem; line-height: 2.8rem; } .contact_form { gap: 3rem; } }
@media (max-width: 767px) {
  .contact_row { grid-template-columns: 1fr; gap: .35rem; }
  .contact_row > .text-mono { padding-top: 0; }
  .contact_field, .contact_area { font-size: 2rem; line-height: 2.3rem; }
  .contact_radio_label { font-size: 1.25rem; line-height: 1.3rem; }
  .contact_bottom { flex-direction: column; align-items: stretch; }
  .contact_submit { align-self: flex-end; font-size: 1.6rem; }
}
@media (max-width: 479px) { .text-mono.is-smaller { font-size: 3vw; line-height: 4vw; } }

/* ---------- Preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 14000; display: none; justify-content: center; align-items: center; overflow: hidden; color: var(--light); }
.show-preloader .preloader { display: flex; }
.preloader_panel { position: absolute; inset: 0; background: var(--blue); }
.preloader_content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.preloader_word { display: flex; overflow: hidden; font-family: var(--font-logo); font-weight: 700; font-size: 11vw; line-height: 1.1; letter-spacing: -.035em; padding: 0 .05em; }
.preloader_char { display: inline-block; transform: translateY(110%); }
.preloader_tagline { opacity: 0; color: var(--light); }
@media (max-width: 767px) { .preloader_word { font-size: 17vw; } }

/* ---------- Page transition ---------- */
.transition { position: fixed; inset: 0; z-index: 100000; display: none; pointer-events: none; height: calc(var(--vh, 1vh) * 100); overflow: hidden; }
.transition_overlay { position: absolute; inset: 0; background-color: var(--overlay-start); clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); }

/* ---------- Cookie banner ---------- */
.cookie {
  position: fixed; left: var(--pad); right: var(--pad); bottom: var(--pad); z-index: 12000; max-width: 30rem;
  display: none; flex-direction: column; align-items: flex-end; gap: 1.5rem; padding: 1.1rem 1.5rem 1.4rem;
  border-radius: var(--radius); background: var(--dark); color: var(--light); opacity: 0;
}
html.is-dark .cookie { background: var(--light); color: var(--dark); }
.cookie_description { font-size: .95rem; line-height: 1.35rem; }
.cookie_link { text-decoration: underline; }
.cookie_actions { display: flex; gap: 1.75rem; }

/* ---------- Custom cursor ---------- */
.custom-cursor {
  position: fixed; top: 0; left: 0; z-index: 13000; width: 16px; height: 16px; border-radius: 50%;
  background: var(--blue); color: var(--light); pointer-events: none; opacity: 0;
  font-family: var(--font-display); text-transform: uppercase; font-size: 1.9rem; line-height: 1;
  transition: width .15s ease, height .15s ease, border-radius .15s ease, opacity .2s ease;
}
.custom-cursor.hover { width: auto; height: 3rem; border-radius: 999px; padding: .55rem 1.1rem .6rem; display: flex; align-items: center; justify-content: center; white-space: nowrap; }

/* ---------- Locales list ---------- */
.locales-list { margin: 0; padding: 0; list-style: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .link_first, .link_second, .nav-menu_visual, .small-link_arrow { transition: none !important; }
}

/* Mono reveals never apply inside fixed UI (cookie banner, contact modal). */
.js .cookie .text-mono_wrapper > .text-mono, .js .section_contact .text-mono_wrapper > .text-mono { transform: none; }
.cookie .small-link_arrow, .section_contact .small-link_arrow { opacity: 1; }

/* Mobile menu: contact CTA + language row */
.nav-menu_link_wrapper.is-cta .nav-menu_link { color: var(--accent-text); }
@media (max-width: 767px) {
  .nav-menu_link_wrapper.is-cta { margin-top: 1rem; margin-left: 0; }
  .nav-menu_link_wrapper.is-cta .nav-menu_link { font-size: 2.4rem; line-height: 2.6rem; white-space: normal; }
  .nav-menu_locales { left: 1rem; right: 1rem; bottom: 2rem; }
  .nav-menu_locales .locales-list { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
}

/* The menu/page transitions push .page-main off-screen (rotate + scale):
   clip horizontally so mobile browsers never widen the layout viewport. */
html, body { overflow-x: clip; }
.page-wrapper { overflow-x: clip; }
.menu-open .cookie { visibility: hidden; }

/* ---------- Responsive images ----------
   <picture> wrappers are layout-neutral so existing selectors keep working. */
picture { display: contents; }

/* ---------- Contact anti-spam ---------- */
.contact_hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin-top: .5rem; }

/* ---------- Accessibility: contrast (WCAG AA ≥ 4.5:1 for small text) ---------- */
.text-mono.is-muted, .is-muted .text-mono { opacity: .68; }
.nav-menu_link_wrapper.w--current { opacity: .45; }
button.link.is-mono-footer { text-align: left; }

/* ---------- Footer: chrome 3D "C" symbol ----------
   Centred on the giant word. --stretch (0→1) is driven by the footer
   animation: the symbol rides the centre of the visible word as it grows. */
.footer_symbol {
  position: absolute; left: 50%; top: calc(var(--stretch, 0) * 50%); z-index: 2;
  width: 34.5%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
}
.footer_symbol_canvas { display: block; width: 100%; height: 100%; }
.footer_symbol_fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: var(--stretch, 0); transform: scale(var(--stretch, 0));
}
.footer_symbol.is-ready .footer_symbol_fallback { display: none; }