/* =========================================================
   ST.UDIO.M CARD GRAPHICS
   ========================================================= */

.studiom-card-graphic{
  position: absolute;
  z-index: 1;
  inset: var(--space-4);
  bottom: clamp(8.5rem, 36%, 11rem);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.62;
}

.studiom-card-svg-target,
.studiom-card-svg{
  width: 100%;
  height: 100%;
  display: block;
}

.studiom-card-svg-target{
  position: relative;
}

.studiom-card-svg-target svg,
.studiom-card-svg{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.studiom-card-graphic--esporo{
  inset-inline: var(--space-5);
  top: var(--space-5);
  bottom: clamp(9rem, 40%, 12rem);
  opacity: 0.72;
}

.studiom-card-graphic--carddeck{
  inset-inline: var(--space-5);
  top: var(--space-5);
  bottom: clamp(9rem, 40%, 12rem);
  opacity: 0.72;
}

.studiom-card-svg-target--carddeck,
.studiom-card-svg--carddeck{
  width: min(100%, 13rem);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
}

.studiom-card-svg-target--carddeck svg,
.studiom-card-svg--carddeck{
  width: 100%;
  height: 100%;
}

.studiom-card-svg-target--carddeck svg,
.studiom-card-svg-target--carddeck svg *{
  transition:
    stroke var(--transition-theme),
    fill var(--transition-theme),
    opacity var(--transition-theme);
}

/* Card Deck icon colour mapping.
   Illustrator may export ids as Fill / Stroke or with suffixes.
   Fill group adapts as filled shapes. Stroke group adapts as stroke-only linework. */
.studiom-card-svg-target--carddeck svg [id*="Fill"],
.studiom-card-svg-target--carddeck svg [id*="Fill"] *{
  fill: var(--text) !important;
  stroke: none !important;
  color: var(--text) !important;
  transition:
    fill var(--transition-theme),
    color var(--transition-theme),
    opacity var(--transition-theme);
}

.studiom-card-svg-target--carddeck svg [id*="Stroke"],
.studiom-card-svg-target--carddeck svg [id*="Stroke"] *{
  fill: none !important;
  stroke: var(--text) !important;
  color: var(--text) !important;
  transition:
    stroke var(--transition-theme),
    color var(--transition-theme),
    opacity var(--transition-theme);
}

.studiom-card-svg-target--esporo,
.studiom-card-svg--esporo{
  width: min(100%, 15rem);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
}

.studiom-card-svg-target--esporo svg,
.studiom-card-svg--esporo{
  width: 100%;
  height: 100%;
}

.studiom-card-svg-target--esporo svg #Black,
.studiom-card-svg-target--esporo svg #Black *{
  stroke: var(--text) !important;
  fill: var(--text) !important;
  transition:
    stroke var(--transition-theme),
    fill var(--transition-theme),
    opacity var(--transition-theme);
}

.studiom-card-svg-target--esporo svg #Grey,
.studiom-card-svg-target--esporo svg #Grey *{
  stroke: var(--text) !important;
  fill: var(--text) !important;
  opacity: 0.5;
  transition:
    stroke var(--transition-theme),
    fill var(--transition-theme),
    opacity var(--transition-theme);
}
/* =========================================================
   LOCAL FONTS
   ========================================================= */
@font-face{
  font-family: 'DM Serif Display';
  src: url('fonts/dm-serif-display/dm-serif-display-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

@font-face{
  font-family: 'DM Serif Display';
  src: url('fonts/dm-serif-display/dm-serif-display-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  font-synthesis: none;
}

@font-face{
  font-family: 'TeX Gyre Heros';
  src: url('fonts/TeXGyreHeros/TeXGyreHeros-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'TeX Gyre Heros';
  src: url('fonts/TeXGyreHeros/TeXGyreHeros-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face{
  font-family: 'TeX Gyre Heros';
  src: url('fonts/TeXGyreHeros/TeXGyreHeros-Bold.woff2') format('woff2');
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'TeX Gyre Heros';
  src: url('fonts/TeXGyreHeros/TeXGyreHeros-BoldItalic.woff2') format('woff2');
  font-weight: 600 800;
  font-style: italic;
  font-display: swap;
}

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

html,
body,
main,
section{
  margin: 0 !important;
  padding: 0 !important;
}

html{
  min-height: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  scroll-padding-top: 0;
}

body{
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

main,
section{
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

section{
  scroll-margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure{
  margin: 0;
}

ul,
ol{
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}

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

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

button,
a{
  color: inherit;
}

button{
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

a{
  text-decoration: none;
}

/* =========================================================
   ROOT TOKENS
   Foundation only. Section layouts come later.
   ========================================================= */
:root{
  /* Type */
  --font-sans: 'TeX Gyre Heros', sans-serif;
  --font-serif: 'DM Serif Display', serif;

  --u: clamp(15px, 0.45vw + 10.6px, 17px);

  --small: calc(var(--u) * 0.75);
  --body: calc(var(--u) * 1.00);
  --nav: calc(var(--u) * 1.10);

  --h3: calc(var(--u) * 1.50);
  --h2: calc(var(--u) * 2.00);
  --h1: calc(var(--u) * 2.50);
  --h0: calc(var(--u) * 4.00);

  --lh-body: 1.3;
  --lh-tight: 1.1;

  --w-regular: 400;
  --w-semibold: 600;
  --w-bold: 800;

  /* Colors */
  --c-black: #161616;
  --c-white: #fdfdfd;
  --c-black-soft: #161616;
  --c-white-soft: #f7f5ef;

  /* Spacing */
  --space-1: calc(var(--u) * 0.50);
  --space-2: calc(var(--u) * 0.75);
  --space-3: calc(var(--u) * 1.00);
  --space-4: calc(var(--u) * 1.50);
  --space-5: calc(var(--u) * 2.00);
  --space-5-5: calc(var(--u) * 3.00);
  --space-6: calc(var(--u) * 4.00);
  --space-7: calc(var(--u) * 5.00);

  /* Global layout tokens, values only. Breakpoint behavior comes later. */
  --edge: clamp(var(--space-5-5), 6vw, var(--space-7));
  --layout-text: 36rem;
  --layout-cards: 1080px;
  --layout-split: 1300px;
  --layout-mobile: 30rem;
  --layout-mobile-cards: 28rem;
  --layout-principles-single: 24rem;
  --bp-cards-stack: 1180px;
  --bp-split-stack: 980px;
  --bp-mobile: 768px;
  --bp-tall-enough: 650px;

  /* Navigation and safe-area values */
  --space-nav: calc((var(--space-3) * 2) + var(--space-3));
  --nav-safe-top: env(safe-area-inset-top, 0px);
  --nav-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-browser-bottom: 0px;
  --mobile-mask-extra: 0px;
  --nav-blur-extra: 1.4rem;
  --nav-top-total: calc(var(--space-nav) + var(--nav-safe-top) + var(--nav-blur-extra));
  --nav-bottom-total: calc(var(--space-nav) + var(--nav-safe-bottom) + var(--nav-blur-extra));
  --content-top-safe: calc(var(--space-nav) + var(--space-5));
  --content-visible-top: calc(var(--space-nav) + var(--space-4));

  /* Hero values */
  --hero-height: 100lvh;

  /* Theme defaults */
  --bg: var(--c-black-soft);
  --text: var(--c-white-soft);
  --muted: rgba(247,245,239,0.68);
  --line: rgba(247,245,239,0.28);
  --soft-fill: rgba(247,245,239,0.10);
  --soft-fill-strong: rgba(247,245,239,0.25);
  --soft-fill-xstrong: rgba(247,245,239,0.40);

  /* Motion */
  --transition-ease-theme: ease;
  --transition-theme-duration: 1400ms;
  --transition-theme: var(--transition-theme-duration) var(--transition-ease-theme);
  --transition-ui: 520ms ease;
}




@supports (-webkit-touch-callout: none){
  @media (max-width: 768px){
    :root{
      --mobile-browser-bottom: 64px;
      --mobile-mask-extra: calc(var(--nav-safe-bottom) + var(--mobile-browser-bottom));
      --nav-bottom-total: calc(var(--space-nav) + var(--nav-safe-bottom) + var(--nav-blur-extra));
    }

    html.is-ios-pwa,
    html.is-ios-pwa :root{
      --mobile-browser-bottom: 0px;
      --mobile-mask-extra: var(--nav-safe-bottom);
      --nav-bottom-total: calc(var(--space-nav) + var(--nav-safe-bottom) + var(--nav-blur-extra));
    }
  }
}

/* =========================================================
   BASE THEME
   ========================================================= */
body{
  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--text);
}

section{
  background: transparent;
  color: inherit;
}

section *{
  color: inherit;
}

body.is-dark{
  --bg: var(--c-black-soft);
  --text: var(--c-white-soft);
  --muted: rgba(247,245,239,0.68);
  --line: rgba(247,245,239,0.28);
  --soft-fill: rgba(247,245,239,0.10);
  --soft-fill-strong: rgba(247,245,239,0.25);
  --soft-fill-xstrong: rgba(247,245,239,0.40);
}

body.is-light{
  --bg: var(--c-white-soft);
  --text: var(--c-black-soft);
  --muted: rgba(22,22,22,0.62);
  --line: rgba(22,22,22,0.24);
  --soft-fill: rgba(22,22,22,0.08);
  --soft-fill-strong: rgba(22,22,22,0.18);
  --soft-fill-xstrong: rgba(22,22,22,0.30);
}

/* =========================================================
   THEME TRANSITION
   One global colour shift. Child text follows by inheritance.
   ========================================================= */
body{
  transition-property: background-color, color;
  transition-duration: var(--transition-theme-duration);
  transition-timing-function: var(--transition-ease-theme);
  transition-delay: 0ms;
}

.hero-text-mask.viewport-mask{
  --hero-mask-y: 0px;
  --hero-mask-size: calc(var(--space-nav) * 0.9);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100vw 100vh;
  mask-size: 100vw 100vh;

  -webkit-mask-position: 0 var(--hero-mask-y);
  mask-position: 0 var(--hero-mask-y);

  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

@media (min-width: 769px){
  .hero-text-mask.viewport-mask{
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) calc(var(--space-nav) * 0.7),
      rgba(0,0,0,0.35) calc(var(--space-nav) * 0.88),
      rgba(0,0,0,1) calc(var(--space-nav) * 1.05),
      rgba(0,0,0,1) 100%
    );

    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) calc(var(--space-nav) * 0.7),
      rgba(0,0,0,0.35) calc(var(--space-nav) * 0.88),
      rgba(0,0,0,1) calc(var(--space-nav) * 1.05),
      rgba(0,0,0,1) 100%
    );
  }
}

@media (max-width: 768px){
  :root{
    --mobile-mask-extra: calc(var(--nav-safe-bottom) + var(--mobile-browser-bottom));
    --nav-bottom-total: calc(var(--space-nav) + var(--nav-safe-bottom) + var(--nav-blur-extra));
  }

  html.is-ios-pwa{
    --mobile-browser-bottom: 0px;
    --mobile-mask-extra: var(--nav-safe-bottom);
    --nav-bottom-total: calc(var(--space-nav) + var(--nav-safe-bottom) + var(--nav-blur-extra));
  }

  @media all and (display-mode: standalone){
    :root{
      --mobile-browser-bottom: 0px;
      --mobile-mask-extra: var(--nav-safe-bottom);
      --nav-bottom-total: calc(var(--space-nav) + var(--nav-safe-bottom) + var(--nav-blur-extra));
    }
  }

  @supports not (height: 100dvh){
    :root{
      --mobile-browser-bottom: 0px;
      --mobile-mask-extra: var(--nav-safe-bottom);
      --nav-bottom-total: calc(var(--space-nav) + var(--nav-safe-bottom) + var(--nav-blur-extra));
    }
  }
  .hero-text-mask.viewport-mask{
    -webkit-mask-image: linear-gradient(
      to top,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) calc((var(--space-nav) * 0.9) + var(--mobile-mask-extra)),
      rgba(0,0,0,0.35) calc((var(--space-nav) * 1.02) + var(--mobile-mask-extra)),
      rgba(0,0,0,1) calc((var(--space-nav) * 1.15) + var(--mobile-mask-extra)),
      rgba(0,0,0,1) 100%
    );

    mask-image: linear-gradient(
      to top,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) calc((var(--space-nav) * 0.9) + var(--mobile-mask-extra)),
      rgba(0,0,0,0.35) calc((var(--space-nav) * 1.02) + var(--mobile-mask-extra)),
      rgba(0,0,0,1) calc((var(--space-nav) * 1.15) + var(--mobile-mask-extra)),
      rgba(0,0,0,1) 100%
    );
  }
}

/* =========================================================
   PRACTICE NAV FADE
   ========================================================= */
.header{
  position: fixed;
  top: calc(-1 * var(--nav-safe-top));
  left: 0;
  width: 100%;
  height: var(--nav-top-total);
  z-index: 999;

  padding-inline: var(--space-4);
  padding-top: var(--nav-safe-top);
  padding-bottom: var(--nav-blur-extra);

  display: flex;
  align-items: flex-start;

  font-family: var(--font-sans);
  background: transparent;
  overflow: visible;
  isolation: isolate;
  pointer-events: none;
}

.header::before{
  content: none;
}

.nav-blur-layer{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: calc(var(--space-nav) + var(--nav-safe-top) + var(--nav-blur-extra));
  z-index: 998;
  pointer-events: none;

  background: rgba(255,255,255,0.001);
  backdrop-filter: blur(10px) saturate(1.1) brightness(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1) brightness(1);

  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black calc(var(--nav-safe-top) + (var(--space-nav) * 0.78)),
    transparent 100%
  );

  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black calc(var(--nav-safe-top) + (var(--space-nav) * 0.78)),
    transparent 100%
  );
}

.nav-cutout-layer{
  display: none;
}


.header-nav-wrapper{
  position: relative;
  z-index: 1;
  width: 100%;
  height: var(--space-nav);

  display: flex;
  align-items: center;

  overflow: visible;
  pointer-events: none;
}

.header-nav{
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  gap: var(--space-4);

  pointer-events: auto;
}


.nav-link{
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  font-family: var(--font-sans);
  font-size: var(--nav);
  font-weight: var(--w-regular);
  line-height: 1;

  color: var(--text) !important;
  opacity: 0.42;
  text-decoration: none;

  background: none;
  border: 0;
  outline: none;
  overflow: visible;

  transition:
    font-weight var(--transition-ui),
    opacity var(--transition-ui);
  transition-delay: 0ms;
}

.header-nav .nav-link.nav-brand{
  margin-right: auto;
  margin-left: .8em;
  font-weight: var(--w-bold);
  opacity: 1;
}


.nav-link.active,
.nav-link:focus{
  font-weight: var(--w-bold);
  text-decoration: none !important;
  opacity: 1;
}

.nav-link:hover:not(.active){
  opacity: 0.78;
}

.nav-practice{ width: 5.9em; }
.nav-thinking{ width: 5.4em; }
.nav-studiom{ width: 6.5em; }
.nav-marcel{ width: 4.9em; }
.nav-contact{ width: 5.4em; }

@media (max-width: 768px){

  .nav-blur-layer{
    display: block;
    top: auto;
    bottom: calc(var(--viewport-bottom-offset, 0px) * -1);
    height: calc(
      var(--space-nav)
      + var(--nav-safe-bottom)
      + var(--viewport-bottom-offset, 0px)
      + var(--nav-blur-extra)
    );

    -webkit-mask-image: linear-gradient(
      to top,
      black 0%,
      black calc((var(--space-nav) * 0.78) + var(--nav-safe-bottom) + var(--viewport-bottom-offset, 0px)),
      rgba(0,0,0,0) calc(var(--space-nav) + var(--nav-safe-bottom) + var(--viewport-bottom-offset, 0px) + var(--nav-blur-extra))
    );

    mask-image: linear-gradient(
      to top,
      black 0%,
      black calc((var(--space-nav) * 0.78) + var(--nav-safe-bottom) + var(--viewport-bottom-offset, 0px)),
      rgba(0,0,0,0) calc(var(--space-nav) + var(--nav-safe-bottom) + var(--viewport-bottom-offset, 0px) + var(--nav-blur-extra))
    );
  }

  .nav-cutout-layer{
    display: none;
  }

  .header{
    top: auto;
    bottom: 0;
    left: 0;

    width: 100%;
    max-width: 100vw;
    height: calc(var(--space-nav) + env(safe-area-inset-bottom, 0px));

    padding-inline: 0;
    padding-top: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);

    display: flex;
    align-items: flex-end;
    justify-content: center;

    overflow-x: hidden;
    pointer-events: none;
  }

  .header::before{
    content: none;
  }


  @media (hover: hover) and (pointer: fine){
    .header{
      height: calc(var(--space-nav) + (var(--space-3) * 1.8));
      bottom: 0;
      padding-top: 0;
      padding-bottom: 0;
      align-items: flex-end;
    }
    .header-nav-wrapper{
      height: calc(var(--space-nav) + (var(--space-2) * 0.9));
      align-items: flex-end;
    }
    .header-nav{
      height: var(--space-nav);
      align-items: center;
      transform: translateY(calc(-0.05 * var(--space-1)));
    }
  }


  .header-nav-wrapper{
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 100vw;
    height: var(--space-nav);

    display: flex;
    align-items: center;

    overflow-x: hidden;
    overflow-y: hidden;
    pointer-events: none;
  }



  .header-nav{
    width: 100%;
    height: calc(var(--space-nav) + var(--space-1));
    max-width: 100vw;

    display: flex;
    align-items: center;

    gap: var(--space-3);

    padding-left: var(--mobile-nav-pad-start, 50vw);
    padding-right: var(--mobile-nav-pad-end, 50vw);

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;

    transform: none;
  }



  .header-nav::-webkit-scrollbar{
    display: none;
  }

  .header-nav .nav-link.nav-brand{
    margin-right: 0;
  }

  .nav-link{
    flex: 0 0 auto;
    scroll-snap-align: center;
    white-space: nowrap;
  }
  
  html.is-ios-pwa .header{
    bottom: 0;
    height: calc(var(--space-nav) + env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) - var(--space-1));
    align-items: flex-end;
  }

  html.is-ios-pwa .header-nav-wrapper{
    height: var(--space-nav);
    align-items: center;
  }

  html.is-ios-pwa .header-nav{
    height: var(--space-nav);
    align-items: center;
    transform: none;
  }

  /* iOS browser only: hide full-width blur, float nav as a pill */

  html.is-ios-browser .nav-blur-layer{
    display: none;
  }

  html.is-ios-browser .header{
    bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
    height: auto;
    padding: 0;
    overflow: visible;
    align-items: center;
    justify-content: center;
  }

  html.is-ios-browser .header-nav-wrapper{
    position: relative;

    width: calc(100vw - (var(--space-4) * 2));
    max-width: 32rem;
    height: calc(var(--space-nav) * 0.82);
    --pill-height: calc(var(--space-nav) * 0.82);
    --pill-radius: calc(var(--pill-height) / 2);
    --pill-fade: 8px;
    margin-inline: auto;

    border-radius: 999px;
    overflow: hidden;
    pointer-events: auto;
    isolation: isolate;
  }

  html.is-ios-browser .header-nav-wrapper::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;

    background: rgba(255,255,255,0.001);
    backdrop-filter: blur(20px) saturate(1.08);
    -webkit-backdrop-filter: blur(20px) saturate(1.08);

    -webkit-mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        black var(--pill-fade),
        black calc(100% - var(--pill-fade)),
        transparent 100%
      ),
      radial-gradient(
        circle var(--pill-radius) at var(--pill-radius) 50%,
        black calc(var(--pill-radius) - var(--pill-fade)),
        transparent var(--pill-radius)
      ),
      radial-gradient(
        circle var(--pill-radius) at calc(100% - var(--pill-radius)) 50%,
        black calc(var(--pill-radius) - var(--pill-fade)),
        transparent var(--pill-radius)
      );
    -webkit-mask-size:
      calc(100% - var(--pill-height)) 100%,
      var(--pill-height) 100%,
      var(--pill-height) 100%;
    -webkit-mask-position:
      center,
      left center,
      right center;
    -webkit-mask-repeat: no-repeat;

    mask-image:
      linear-gradient(
        to bottom,
        transparent 0,
        black var(--pill-fade),
        black calc(100% - var(--pill-fade)),
        transparent 100%
      ),
      radial-gradient(
        circle var(--pill-radius) at var(--pill-radius) 50%,
        black calc(var(--pill-radius) - var(--pill-fade)),
        transparent var(--pill-radius)
      ),
      radial-gradient(
        circle var(--pill-radius) at calc(100% - var(--pill-radius)) 50%,
        black calc(var(--pill-radius) - var(--pill-fade)),
        transparent var(--pill-radius)
      );
    mask-size:
      calc(100% - var(--pill-height)) 100%,
      var(--pill-height) 100%,
      var(--pill-height) 100%;
    mask-position:
      center,
      left center,
      right center;
    mask-repeat: no-repeat;
  }


  html.is-ios-browser .header-nav{
    position: relative;
    z-index: 1;
    height: 100%;
    max-width: none;
    transform: none;
  }
}

/* =========================================================
   HERO
   ========================================================= */
#home{
  position: relative;
  width: 100vw;
  height: var(--hero-height);
  min-height: var(--hero-height);
  max-height: var(--hero-height);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

#hero,
.hero{
  position: relative;
  z-index: 5;

  width: 100vw;
  height: auto;

  overflow: hidden;
  background: none;
}

.hero-canvas{
  position: relative;
  width: 100vw;
  height: 100%;
  min-height: 100%;
  max-height: 100%;

  overflow: hidden;
  background: none;
}

.hero-back,
.hero-front{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  min-width: 100vw !important;
  min-height: 100% !important;
  max-width: 100vw !important;
  max-height: 100% !important;

  display: block;
  object-fit: cover;
  object-position: center calc(50% + var(--hero-shift-y, 0px));
  pointer-events: none;
}

.hero-back{
  z-index: 4;
}

.hero-front{
  z-index: 7;
}

.hero-text-mask{
  position: absolute;
  inset: 0;
  z-index: 6;

  width: 100vw;
  height: 100%;
  min-height: 100%;
  max-height: 100%;

  pointer-events: none;
  overflow: visible;
}

.hero-text{
  position: absolute;
  left: 50%;
  z-index: 1;

  width: auto;
  max-width: 100vw;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 0.8;
  transform: translateX(-50%);
  pointer-events: none;
  will-change: opacity, transform;
}

.intro,
.headline,
.subline{
  width: 100%;
  margin: 0;
  padding: 0;

  display: block;
  white-space: nowrap;
  overflow: visible;

  color: var(--c-white);
  text-align: left;
}

.intro{
  font-family: var(--font-sans);
  font-size: 0.5em;
  font-weight: var(--w-regular);
}

.headline{
  font-family: var(--font-serif);
  font-size: 1.3em;
  font-style: normal;
  font-weight: var(--w-regular);
}

.subline{
  margin-left: 3.35em;

  font-family: var(--font-serif);
  font-size: 1.3em;
  font-style: italic;
  font-weight: var(--w-regular);
  letter-spacing: -0.055em;

  opacity: 0;
  filter: blur(clamp(0.1px, 0.2vw, 1px));
  transition:
    opacity var(--transition-theme),
    transform var(--transition-theme);
  transition-delay: 0ms;
}

.pre-animate .intro,
.pre-animate .headline,
.pre-animate .subline{
  opacity: 0 !important;
  transform: none !important;
}

.hero-text .intro{
  animation: fadeInUp 2.1s 0.2s forwards;
}

.hero-text .headline{
  animation: fadeInUp 2.1s 0.5s forwards;
}

.hero-text .subline{
  animation: fadeInDown 2.1s 1.6s forwards;
}

@keyframes fadeInUp{
  from{
    opacity: 0;
    transform: translateY(100px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown{
  from{
    opacity: 0;
    transform: translateY(-100px);
  }

  to{
    opacity: 0.92;
    transform: translateY(0);
  }
}

.hero-canvas::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;

  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(22,22,22,0) 0%,
    rgba(22,22,22,0) 75vh,
    rgba(22,22,22,0.25) 85vh,
    rgba(22,22,22,1) 100vh
  );
}


@media (max-width: 768px){
  .hero-text{
    left: 50%;
    width: 100%;
    max-width: 100%;
    padding-inline: var(--space-4);

    align-items: center;
    text-align: left;
    font-size: clamp(2rem, 9vw, 3.4rem);
    transform: translateX(-50%);
  }

  .intro,
  .headline,
  .subline{
    width: 100%;
  }

  .subline{
    margin-left: 0;
    text-align: right;
  }
}


/* =========================================================
   PRACTICE / SPLIT INTRO
   Desktop: content left, image right.
   Narrow desktop/tablet: image above, content below.
   ========================================================= */
#practice{
  position: relative;
  width: 100%;
  min-height: 100vh;
  color: var(--text);
  overflow: hidden;
}

.practice-split{
  width: 100%;
  min-height: 100vh;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "content media";
  align-items: stretch;
}

.practice-content{
  grid-area: content;
  position: relative;
  z-index: 3;

  width: 100%;
  min-height: 100vh;
  padding-left: var(--edge);
  padding-right: 0;
  padding-top: var(--content-top-safe);
  padding-bottom: var(--space-7);

  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: visible;
}

.practice-content.viewport-mask{
  width: 100vw;
  min-height: 100vh;
  height: auto;
  overflow: visible;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.practice-content-inner{
  width: calc(50vw - var(--edge));
  max-width: none;
  padding-right: 0;
  overflow: visible;
}

.practice-media{
  grid-area: media;
  position: relative;
  z-index: 1;

  width: 100%;
  min-height: 100vh;
  overflow: hidden;

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.18) 8%,
    rgba(0,0,0,0.55) 18%,
    black 32%,
    black 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.18) 8%,
    rgba(0,0,0,0.55) 18%,
    black 32%,
    black 100%
  );
}

.practice-media img,
.practice-media picture,
.practice-media video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.practice-intro-block{
  width: 100%;
  max-width: var(--layout-text);
}

.practice-section-title{
  margin: 0;

  font-family: var(--font-serif);
  font-size: var(--h0);
  font-style: italic;
  font-weight: var(--w-regular);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-align: right;
  white-space: nowrap;

  position: relative;
  z-index: 20;
  transform: translateX(clamp(2rem, 8vw, 7rem));
}

.tight-dot{
  letter-spacing: -0.08em;
}

.practice-intro{
  margin: var(--space-4) 0 0 0;
  max-width: var(--layout-text);

  font-family: var(--font-sans);
  font-size: var(--h3);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
}

.practice-work-block{
  margin-top: var(--space-7);
  width: 100%;
}

.type-title,
.practice-work-title{
  margin: 0;

  font-family: var(--font-sans);
  font-size: var(--h2);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
}

.practice-work-keywords{
  margin: var(--space-5) 0 var(--space-5) 0 ;
  max-width: 100%;

  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--text);
  opacity: 0.66;
}

.practice-closing{
  margin: var(--space-1) 0 0 0;
  max-width: 30rem;

  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--text);
  opacity: 0.9;
}

.practice-principles-grid{
  margin-top: var(--space-6);
  width: 100%;
  max-width: 100%;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.formation-grid,
.practice-formation-grid{
  margin-top: var(--space-6);
  width: 100%;
  max-width: 100%;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-4);
  align-items: start;
}

.marcel-formation-grid{
  margin-top: var(--space-4);
  width: 100%;
  max-width: 100%;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-4);
  align-items: start;
}

.formation-item{
  min-width: 0;
}

.type-label{
  margin: 0;

  font-family: var(--font-sans);
  font-size: var(--h3);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
}

.type-body{
  margin: var(--space-3) 0 0 0;

  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--text);
}


@media (max-width: 1180px) and (min-height: 520px){
  .practice-principles-grid{
    width: min(100%, var(--layout-principles-single));
    max-width: var(--layout-principles-single);
    margin-inline: auto;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) and (min-height: 520px){
  #practice{
    min-height: auto;
    overflow: visible;
  }

  .practice-split{
    min-height: auto;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "content";
  }

  .practice-media{
    min-height: 48vh;
    height: 48vh;

    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 62%,
      rgba(0,0,0,0.55) 78%,
      rgba(0,0,0,0.18) 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 62%,
      rgba(0,0,0,0.55) 78%,
      rgba(0,0,0,0.18) 90%,
      transparent 100%
    );
  }

  .practice-content{
    min-height: auto;
    width: 100%;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    padding-top: var(--space-6);
    padding-bottom: var(--space-7);
    justify-content: flex-start;
  }


  .practice-content-inner,
  .practice-intro-block{
    width: 100%;
    min-width: 0;
    max-width: var(--layout-mobile);
    margin-inline: auto;
    transform: none;
  }

  .practice-section-title{
    transform: translateY(calc(var(--space-7) * -1));
    text-align: left;
  }

  .practice-work-keywords{
    max-width: 100%;
  }

  .practice-closing{
    max-width: 28rem;
  }
}

@media (max-width: 768px){
  .practice-media{
    min-height: 50vh;
    height: 50vh;
  }

  .practice-media img,
  .practice-media picture,
  .practice-media video{
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    transform: scale(1.3);
    transform-origin: center bottom;
  }

  .practice-content{
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-top: 0;
    padding-bottom: calc(var(--space-7) + var(--space-nav));
  }


  .practice-section-title{
    font-size: var(--h1);
    transform: translateY(calc(var(--space-5) * -1));
  }

  .type-title,
  .practice-work-title{
    font-size: var(--h2);
  }

  .practice-intro{
    margin-top: 0;
    font-size: var(--h3);
  }
}

/* =========================================================
   SHARED CARD SYSTEM
   Method and st.udio.m cards share the same structure.
   ========================================================= */

.thinking-card-copy,
.studiom-card-copy{
  position: relative;
  z-index: 3;

  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.thinking-card-meta,
.studiom-card-meta{
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 4;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;

  pointer-events: none;
}

.thinking-card-title,
.studiom-card-title{
  margin: 0;

  font-family: var(--font-sans);
  font-size: var(--h3);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
}

.thinking-card-subtitle,
.studiom-card-subtitle,
.studiom-card-text{
  margin: 0;

  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);

  opacity: 0.74;
}

.thinking-card-arrow,
.studiom-card-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: var(--body);
  line-height: 1;

  opacity: 0.45;

  transition:
    opacity var(--transition-ui),
    transform var(--transition-ui);
}

.studiom-card-status{
  margin: 0;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;

  font-family: var(--font-sans);
  font-size: calc(var(--body) * 0.68);
  font-style: italic;
  font-weight: var(--w-regular);
  line-height: 0.92;

  opacity: 0.32;
  text-align: right;
}

.thinking-card:hover .thinking-card-arrow,
.studiom-card:hover .studiom-card-arrow{
  opacity: 0.8;
}

/* Normal card state: square graphic area above, text below */
.thinking-section:not(.is-thinking-active) .thinking-card,
#thinking:not(.is-thinking-active) .thinking-card,
.studiom-section:not(.is-studiom-active) .studiom-card,
#studiom:not(.is-studiom-active) .studiom-card{
  min-height: auto;

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: start;
  align-items: start;
}

.thinking-section:not(.is-thinking-active) .thinking-card-graphic,
#thinking:not(.is-thinking-active) .thinking-card-graphic,
.studiom-section:not(.is-studiom-active) .studiom-card-graphic,
#studiom:not(.is-studiom-active) .studiom-card-graphic{
  position: relative;
  inset: auto;
  z-index: 1;

  grid-column: 1;
  grid-row: 1;

  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 0 var(--space-5) 0;
  padding: 0;

  overflow: visible;
  pointer-events: none;
  opacity: 0.62;
}

.studiom-card-graphic--empty{
  opacity: 0;
}

.thinking-section:not(.is-thinking-active) .thinking-card-copy,
#thinking:not(.is-thinking-active) .thinking-card-copy,
.studiom-section:not(.is-studiom-active) .studiom-card-copy,
#studiom:not(.is-studiom-active) .studiom-card-copy{
  grid-column: 1;
  grid-row: 2;

  width: 100%;
  min-width: 0;
}

/* Narrow stacked card state: square graphic left, text right */
@media (max-width: 980px) and (min-height: 520px){
  .thinking-section:not(.is-thinking-active) .thinking-card,
  #thinking:not(.is-thinking-active) .thinking-card,
  .studiom-section:not(.is-studiom-active) .studiom-card,
  #studiom:not(.is-studiom-active) .studiom-card{
    grid-template-columns: clamp(7.5rem, 24vw, 10rem) minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: var(--space-5);
    align-items: center;
  }

  .thinking-section:not(.is-thinking-active) .thinking-card-graphic,
  #thinking:not(.is-thinking-active) .thinking-card-graphic,
  .studiom-section:not(.is-studiom-active) .studiom-card-graphic,
  #studiom:not(.is-studiom-active) .studiom-card-graphic{
    grid-column: 1;
    grid-row: 1;

    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
  }

  .thinking-section:not(.is-thinking-active) .thinking-card-copy,
  #thinking:not(.is-thinking-active) .thinking-card-copy,
  .studiom-section:not(.is-studiom-active) .studiom-card-copy,
  #studiom:not(.is-studiom-active) .studiom-card-copy{
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
}

@media (max-width: 768px){
  .thinking-section:not(.is-thinking-active) .thinking-card,
  #thinking:not(.is-thinking-active) .thinking-card,
  .studiom-section:not(.is-studiom-active) .studiom-card,
  #studiom:not(.is-studiom-active) .studiom-card{
    grid-template-columns: clamp(6.8rem, 28vw, 8.6rem) minmax(0, 1fr);
    column-gap: var(--space-4);
  }

  .thinking-card-meta,
  .studiom-card-meta{
    top: var(--space-4);
    right: var(--space-4);
  }
}

/* Compact selector state */
.thinking-section.is-thinking-active .thinking-card-subtitle,
.thinking-section.is-thinking-active .thinking-card-graphic,
.studiom-section.is-studiom-active .studiom-card-graphic,
.studiom-section.is-studiom-active .studiom-card-subtitle,
.studiom-section.is-studiom-active .studiom-card-text,
#studiom.is-studiom-active .studiom-card-graphic,
#studiom.is-studiom-active .studiom-card-subtitle,
#studiom.is-studiom-active .studiom-card-text{
  display: none;
}

.thinking-section.is-thinking-active .thinking-card,
.studiom-section.is-studiom-active .studiom-card,
#studiom.is-studiom-active .studiom-card{
  min-height: auto;
  padding: var(--space-3) var(--space-4);

  justify-content: flex-start;

  border-radius: var(--space-2);

  opacity: 0.42;

  box-shadow: 0 0 24px color-mix(in srgb, var(--text) 7%, transparent);
}

.thinking-section.is-thinking-active .thinking-card:hover,
.thinking-section.is-thinking-active .thinking-card.is-active,
.studiom-section.is-studiom-active .studiom-card:hover,
.studiom-section.is-studiom-active .studiom-card.is-active,
#studiom.is-studiom-active .studiom-card:hover,
#studiom.is-studiom-active .studiom-card.is-active{
  opacity: 1;
  box-shadow: 0 0 40px color-mix(in srgb, var(--text) 13%, transparent);
  transform: none;
}

.thinking-section.is-thinking-active .thinking-card-copy,
.studiom-section.is-studiom-active .studiom-card-copy,
#studiom.is-studiom-active .studiom-card-copy{
  justify-content: center;
}

.thinking-section.is-thinking-active .thinking-card-title,
.studiom-section.is-studiom-active .studiom-card-title,
#studiom.is-studiom-active .studiom-card-title{
  padding-right: calc(var(--space-6) + var(--space-2));

  font-size: var(--body);
  line-height: 1;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thinking-section.is-thinking-active .thinking-card-meta,
.studiom-section.is-studiom-active .studiom-card-meta,
#studiom.is-studiom-active .studiom-card-meta{
  top: 50%;
  transform: translateY(-50%);
}

.thinking-section.is-thinking-active .thinking-card-arrow,
.studiom-section.is-studiom-active .studiom-card-arrow,
#studiom.is-studiom-active .studiom-card-arrow{
  transform: rotate(0deg);
}

.thinking-section.is-thinking-active .thinking-card.is-active .thinking-card-arrow,
.studiom-section.is-studiom-active .studiom-card.is-active .studiom-card-arrow,
#studiom.is-studiom-active .studiom-card.is-active .studiom-card-arrow{
  transform: rotate(90deg);
}

/* =========================================================
   THINKING / INDEX
   Desktop: narrow text column, wide 3-card grid.
   Narrow desktop/tablet: cards stack vertically.
   ========================================================= */
#thinking{
  position: relative;
  width: 100%;
  min-height: 100vh;
  color: var(--text);
  overflow: hidden;
}

#thinking > .section-inner{
  width: 100%;
  min-height: 100vh;
  padding-left: var(--edge);
  padding-right: var(--edge);
  padding-top: var(--content-top-safe);
  padding-bottom: var(--space-7);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#thinking.is-thinking-active > .section-inner,
.thinking-section.is-thinking-active > .section-inner{
  justify-content: flex-start;
}

.thinking-header{
  width: 100%;
  max-width: var(--layout-text);
}

.thinking-header-label{
  display: block;

  font-family: var(--font-serif);
  font-size: var(--h0);
  font-style: italic;
  font-weight: var(--w-regular);
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.thinking-intro{
  margin-top: var(--space-4);
  width: 100%;
  max-width: var(--layout-text);

  font-family: var(--font-sans);
  font-size: var(--h3);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
}

.thinking-card-grid{
  margin-top: var(--space-6);
  width: 100%;
  max-width: var(--layout-cards);
  margin-left: auto;
  margin-right: auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;

  overflow-anchor: auto;
}

  .thinking-card{
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: auto;
    padding: var(--space-5);

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;

  border: 0;
  border-radius: var(--space-3);
  background: transparent;
  color: inherit;
  cursor: pointer;

  box-shadow: 0 0 40px color-mix(in srgb, var(--text) 10%, transparent);

  overflow: hidden;
  transform: translateY(0);
  will-change: transform, box-shadow, opacity;

  transition:
    box-shadow var(--transition-ui),
    transform var(--transition-ui);
  transition-delay: 0ms;
}

.thinking-card:hover{
  box-shadow: 0 0 64px color-mix(in srgb, var(--text) 16%, transparent);
  transform: translateY(calc(-1 * var(--space-1))) scale(1.01);
}







/* Only hide studiom-card-graphic in compact selector state if st.udio.m cards are used as selectors (future-proof) */




.thinking-card-graphic{
  position: absolute;
  z-index: 1;
  inset: var(--space-3);
  bottom: clamp(6rem, 30%, 9rem);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 0.6;
}

.thinking-card-svg{
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.thinking-card-overlap-circles circle{
  fill: var(--soft-fill);
  stroke: none;
}

.thinking-card-overlap-core path{
  fill: var(--soft-fill-strong);
  stroke: var(--soft-fill-xstrong);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.thinking-card-relation-outer circle{
  stroke: none;
}

.thinking-card-relation-stop--outer{
  stop-color: color-mix(in srgb, var(--text) 42%, transparent);
  stop-opacity: 1;
}

.thinking-card-relation-stop--soft{
  stop-color: color-mix(in srgb, var(--text) 24%, transparent);
  stop-opacity: 1;
}

.thinking-card-relation-stop--mid{
  stop-color: color-mix(in srgb, var(--text) 12%, transparent);
  stop-opacity: 1;
}

.thinking-card-relation-stop--inner{
  stop-color: var(--soft-fill);
  stop-opacity: 1;
}

.thinking-card-svg--systems-relation{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  transform: none;
}

.thinking-card-systems-connectors path{
  fill: none;
  stroke: var(--soft-fill-xstrong);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.thinking-card-systems-nodes circle{
  fill: var(--soft-fill);
  stroke: none;
}


.thinking-card-svg--inside-systems{
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Thinking detail panel */
.thinking-detail{
  width: 100%;
  max-width: var(--layout-cards);
  margin-top: var(--space-5);
  padding: var(--space-5);

  border-radius: var(--space-3);
  background: transparent;
  color: inherit;
  box-shadow: 0 0 40px color-mix(in srgb, var(--text) 10%, transparent);

  opacity: 0;
  transform: translateY(var(--space-4));
  pointer-events: none;
  overflow-anchor: none;

  transition:
    transform var(--transition-ui),
    box-shadow var(--transition-ui);
  transition-delay: 0ms;
}

.thinking-section.is-thinking-moving .thinking-detail{
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.thinking-detail.is-active,
.thinking-section.is-thinking-active .thinking-detail{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.thinking-detail.is-exiting{
  opacity: 0;
  transform: translateY(calc(-1 * var(--space-2)));
  pointer-events: none;
}

.thinking-panel[hidden]{
  display: none !important;
}

.thinking-panel:not([hidden]){
  display: block;
  overflow-anchor: none;
}

/* Thinking detail content, compatible with old forces markup */
.thinking-detail-header,
.forces-header{
  max-width: var(--layout-text);
}

.thinking-detail-title,
.forces-title,
.between-title,
.systems-title{
  margin: 0 0 var(--space-2) 0;
  font-family: var(--font-sans);
  font-size: var(--h2);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  color: inherit;
}

.thinking-detail-subtitle,
.forces-subtitle,
.between-subtitle,
.systems-subtitle{
  margin: 0 0 var(--space-6) 0;
  font-family: var(--font-sans);
  font-size: var(--h2);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: inherit;
  opacity: 0.9;
}

.thinking-detail-grid,
.forces-grid{
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
  align-items: start;
  overflow-anchor: none;
}

.thinking-detail-item,
.forces-panel{
  min-width: 0;
  margin: 0;
  overflow: visible;
}

.thinking-detail-graphic,
.forces-graphic,
.between-graphic,
.systems-graphic{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  overflow: visible;

  margin-top: calc(var(--space-2) * -1);
  margin-bottom: var(--space-2);
}

.systems-graphic .svg-systems{
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  overflow: visible;
}


.between-wrap,
.systems-wrap{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-7);
  align-items: center;
}

.systems-wrap{
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.between-graphic,
.systems-graphic{
  margin-bottom: 0;
}

.sys-graphic-wrap{
  width: 100%;
  padding: var(--space-2);
  margin-block: var(--space-2);
  overflow: visible;
}

.sys-svg{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.between-copy,
.systems-copy{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.thinking-detail-graphic svg,
.forces-graphic svg,
.between-graphic svg,
.systems-graphic svg{
  width: min(100%, 24rem);
  height: auto;

  display: block;
  overflow: visible;
}

.systems-graphic svg{
  width: min(100%, 26rem);
}

.thinking-detail-copy,
.forces-copy{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.thinking-detail-item-title,
.forces-panel-title{
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--h3);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  color: inherit;
}

.thinking-detail-item-lead,
.forces-lead{
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-bold);
  line-height: var(--lh-body);
  color: inherit;
}

.forces-lead-secondary{
  display: block;
  margin-top: var(--space-2);
  font-weight: var(--w-regular);
}

.thinking-detail-item-copy,
.forces-body,
.forces-list{
  margin: 0;
  max-width: 52ch;
  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: inherit;
  opacity: 0.9;
}

.forces-list{
  padding-left: 1.2rem;
}

.forces-footer{
  margin-top: var(--space-7);
}

.forces-footer-line{
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-bold);
  line-height: var(--lh-body);
  color: inherit;
  opacity: 0.75;
}

/* Thinking detail SVG styles */
.force-circle--filled,
.fol-soft,
.fol-soft2{
  fill: var(--soft-fill);
  stroke: none;
}

.force-circle--vision{
  fill: transparent;
  stroke: color-mix(in srgb, var(--text) 72%, transparent);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.force-label,
.label,
.cur-label,
.cur-centre-title,
.cur-centre-sub,
.sys-text,
.sys-question{
  fill: var(--text);
  font-family: var(--font-sans);
}

.force-label,
.label{
  font-size: 32px;
  font-weight: var(--w-bold);
  opacity: 0.78;
}

.fol-tripod path{
  fill: var(--soft-fill-strong);
  stroke: var(--soft-fill-xstrong);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.fol-circles circle{
  fill: var(--soft-fill);
  stroke: none;
  opacity: 0.9;
}

.fol-circles circle:not(.fol-soft):not(.fol-soft2){
  fill: var(--soft-fill);
  opacity: 0.25;
}

.fol-rings circle{
  fill: none;
  stroke: var(--soft-fill-xstrong);
  stroke-width: 1.4;
  opacity: 0.75;
  vector-effect: non-scaling-stroke;
}

.cur-relation-stop--outer{
  stop-color: color-mix(in srgb, var(--text) 42%, transparent);
  stop-opacity: 1;
}

.cur-relation-stop--soft{
  stop-color: color-mix(in srgb, var(--text) 24%, transparent);
  stop-opacity: 1;
}

.cur-relation-stop--mid{
  stop-color: color-mix(in srgb, var(--text) 12%, transparent);
  stop-opacity: 1;
}

.cur-relation-stop--inner{
  stop-color: var(--soft-fill);
  stop-opacity: 1;
}

.cur-outer circle{
  stroke: none;
}

.cur-label{
  font-size: 30px;
  font-weight: var(--w-bold);
  opacity: 0.45;
}

.cur-centre-title{
  font-size: 42px;
  font-weight: var(--w-bold);
  opacity: 0.95;
}

.cur-centre-sub{
  font-size: 26px;
  font-weight: var(--w-regular);
  opacity: 0.9;
}

.sys-connectors path{
  fill: none;
  stroke: var(--soft-fill-xstrong);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
  vector-effect: non-scaling-stroke;
}

.sys-nodes circle{
  fill: var(--soft-fill);
  stroke: none;
  opacity: 0.3;
  vector-effect: non-scaling-stroke;
}

.sys-cutouts circle{
  fill: var(--bg);
  stroke: none;
}

.sys-meta{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 34px;
  font-weight: var(--w-regular);
  opacity: 0.45;
}

.sys-main{
  font-size: 31px;
  font-weight: var(--w-bold);
  opacity: 0.70;
}

.sys-sub{
  font-size: 25px;
  font-weight: var(--w-regular);
  opacity: 0.30;
}

.sys-question{
  font-size: 25px;
  font-weight: var(--w-bold);
  opacity: 1;
}

@media (max-width: 980px) and (min-height: 520px){
  .thinking-card-grid{
    width: 100%;
    min-width: 0;
    max-width: min(var(--layout-mobile-cards), 92vw);
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .thinking-detail{
    width: 100%;
    min-width: 0;
    max-width: min(var(--layout-mobile-cards), 92vw);
    margin-left: auto;
    margin-right: auto;
  }

  .thinking-section.is-thinking-active .thinking-card{
    aspect-ratio: auto;
  }

  .thinking-detail-grid,
  .forces-grid{
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .thinking-detail-graphic,
  .forces-graphic,
  .between-graphic,
  .systems-graphic{
    margin-top: 0;
    margin-bottom: 0;
  }

  .forces-panel:first-child .forces-graphic{
    margin-top: calc(var(--space-4) * -1);
    margin-bottom: calc(var(--space-1) * -1.1);
  }

  .forces-panel:nth-child(2) .forces-graphic{
    margin-top: calc(var(--space-1) * 1);
    margin-bottom: calc(var(--space-5) * -1.1);
  }

  .forces-panel:nth-child(3) .forces-graphic{
    margin-top: var(--space-7);
    margin-bottom: var(--space-3);
  }

  .thinking-detail-graphic svg,
  .forces-graphic svg,
  .between-graphic svg,
  .systems-graphic svg{
    width: min(100%, 18rem);
  }

  .between-wrap,
  .systems-wrap{
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding-top: clamp(1.75rem, 4vw, 3rem);
  }

  .systems-copy{
    order: 2;
  }

  .systems-graphic{
    order: 1;
  }
}

@media (max-width: 980px) and (min-height: 520px){
  #thinking > .section-inner{
    min-height: auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
    justify-content: flex-start;
  }

  .thinking-header,
  .thinking-intro{
    max-width: var(--layout-mobile);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px){
  #thinking > .section-inner{
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: calc(var(--space-7) + var(--space-nav));
  }

  .thinking-header-label{
    font-size: var(--h1);
  }

  .thinking-intro{
    font-size: var(--h3);
  }

  .thinking-card-grid{
    max-width: min(var(--layout-mobile-cards), 92vw);
  }

  .thinking-card{
    aspect-ratio: auto;
    padding: var(--space-4);
  }


  .thinking-section.is-thinking-active .thinking-card{
    aspect-ratio: auto;
  }



  .thinking-detail{
    padding: var(--space-4);
    border-radius: var(--space-3);
    overflow: hidden;
  }

  .systems-graphic{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
  }

  .systems-graphic .svg-systems{
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0 auto;
    overflow: visible;
  }

  .thinking-detail-grid,
  .forces-grid{
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .thinking-detail-title,
  .forces-title,
  .between-title,
  .systems-title{
    font-size: var(--h3);
  }

  .thinking-detail-subtitle,
  .forces-subtitle,
  .between-subtitle,
  .systems-subtitle{
    font-size: var(--body);
    margin-bottom: var(--space-5);
  }

  .between-wrap,
  .systems-wrap{
    padding-top: clamp(1.25rem, 6vw, 2.5rem);
  }

  .thinking-detail-graphic,
  .forces-graphic,
  .between-graphic,
  .systems-graphic{
    margin-top: 0;
    margin-bottom: 0;
  }

  .forces-panel:first-child .forces-graphic{
    margin-top: calc(var(--space-4) * -0.75);
    margin-bottom: var(--space-5);
  }

  .forces-panel:nth-child(2) .forces-graphic{
    margin-top: calc(var(--space-3) * -1);
    margin-bottom: calc(var(--space-5) * -1.2);
  }

  .forces-panel:nth-child(3) .forces-graphic{
    margin-top: var(--space-7);
    margin-bottom: var(--space-5);
  }

  .thinking-detail-graphic svg,
  .forces-graphic svg,
  .between-graphic svg,
  .systems-graphic svg{
    width: min(100%, 16rem);
  }
}

/* =========================================================
   STUDIO M / INDEX
   Same card language as Thinking, without graphics or detail panels.
   Desktop: narrow text column, wide 3-card grid.
   Narrow desktop/tablet: cards stack vertically.
   ========================================================= */
#studiom,
.studiom-section{
  position: relative;
  width: 100%;
  min-height: 100vh;
  color: var(--text);
  overflow: hidden;
}

#studiom > .section-inner,
.studiom-section > .section-inner{
  width: 100%;
  min-height: 100vh;
  padding-left: var(--edge);
  padding-right: var(--edge);
  padding-top: var(--content-top-safe);
  padding-bottom: var(--space-7);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.studiom-header{
  width: 100%;
  max-width: var(--layout-text);
}

.studiom-header-label{
  display: block;

  font-family: var(--font-serif);
  font-size: var(--h0);
  font-style: italic;
  font-weight: var(--w-regular);
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.studiom-intro{
  margin-top: var(--space-4);
  width: 100%;
  max-width: var(--layout-text);

  font-family: var(--font-sans);
  font-size: var(--h3);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
}

.studiom-card-grid{
  margin-top: var(--space-6);
  width: 100%;
  max-width: var(--layout-cards);
  margin-left: auto;
  margin-right: auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

.studiom-section.is-studiom-active .studiom-card-grid,
#studiom.is-studiom-active .studiom-card-grid{
  margin-bottom: var(--space-5);
}

  .studiom-card{
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: auto;
    padding: var(--space-5);

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;

  border: 0;
  border-radius: var(--space-3);
  background: transparent;
  color: inherit;
  cursor: pointer;

  box-shadow: 0 0 40px color-mix(in srgb, var(--text) 10%, transparent);

  overflow: hidden;
  isolation: isolate;
  transform: translateY(0);
  will-change: transform, box-shadow, opacity;

  transition:
    box-shadow var(--transition-ui),
    transform var(--transition-ui);
  transition-delay: 0ms;
}

.studiom-card:hover{
  box-shadow: 0 0 64px color-mix(in srgb, var(--text) 16%, transparent);
  transform: translateY(calc(-1 * var(--space-1))) scale(1.01);
}





@media (max-width: 980px) and (min-height: 520px){
  .studiom-card-grid{
    width: 100%;
    min-width: 0;
    max-width: min(var(--layout-mobile-cards), 92vw);
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .studiom-card{
    min-height: auto;
    aspect-ratio: auto;
  }
}

@media (max-width: 980px) and (min-height: 520px){
  #studiom,
  .studiom-section{
    min-height: auto;
    overflow: visible;
  }

  #studiom > .section-inner,
  .studiom-section > .section-inner{
    min-height: auto;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
    justify-content: flex-start;
  }

  .studiom-header,
  .studiom-intro{
    max-width: var(--layout-mobile);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px){
  #studiom > .section-inner,
  .studiom-section > .section-inner{
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: calc(var(--space-7) + var(--space-nav));
  }

  .studiom-header-label{
    font-size: var(--h1);
  }

  .studiom-intro{
    font-size: var(--h3);
  }

  .studiom-card-grid{
    max-width: min(var(--layout-mobile-cards), 92vw);
  }

  .studiom-card{
    aspect-ratio: auto;
  }

}

/* =========================================================
   STUDIO M PROJECT DETAIL
   Projeto Esporo section + flow SVG panels
   ========================================================= */

.studiom-section.is-studiom-active > .section-inner,
#studiom.is-studiom-active > .section-inner{
  justify-content: flex-start;
}




.studiom-project{
  position: relative;
  width: 100%;
  max-width: var(--layout-cards);
  margin-top: var(--space-5);
  padding: var(--space-5);

  --project-bg: var(--c-white-soft);
  --project-text: var(--c-black-soft);
  --project-muted: rgba(22,22,22,0.45);
  --project-soft-fill: rgba(22,22,22,0.08);
  --project-soft-fill-strong: rgba(22,22,22,0.14);

  display: flex;
  flex-direction: column;
  gap: var(--space-4);

  border-radius: var(--space-3);
  background: var(--project-bg);
  color: var(--project-text);
  overflow: hidden;
  box-shadow: 0 0 48px rgba(0,0,0,0.22);

  transition:
    background-color var(--transition-theme),
    color var(--transition-theme),
    box-shadow var(--transition-ui);
}

.studiom-project[hidden]{
  display: none !important;
}

.studiom-project-header{
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  z-index: 4;

  width: auto;

  display: flex;
  justify-content: flex-end;
  align-items: center;
}


.studiom-project-switch{
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: auto;
  gap: var(--space-3);
}

.studiom-project-switch-button{
  position: relative;
  width: auto;
  min-width: 0;
  text-align: center;
  padding: 0 0 calc(var(--space-1) * 0.75) 0;

  border: 0;
  border-radius: 0;
  background: transparent;

  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: 1;

  color: var(--project-text);
  opacity: 0.38;

  transition:
    font-weight var(--transition-ui),
    opacity var(--transition-ui);
  transition-delay: 0ms;
}

.studiom-project-switch-button:hover{
  opacity: 0.78;
}

.studiom-project-switch-button.is-active{
  opacity: 1;
  font-weight: var(--w-bold);
}



.studiom-project-diagrams{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--space-2) * 1.5);
}

.studiom-project-diagram{
  width: 100%;
  margin: 0;
}

.studiom-project-diagram[hidden]{
  display: none !important;
}

.studiom-project-svg-target{
  position: relative;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: clamp(var(--space-6), 7vw, calc(var(--space-7) * 1.35)) clamp(var(--space-3), 3vw, var(--space-5)) clamp(var(--space-3), 3vw, var(--space-5));
  overflow: visible;
  background: transparent;
  border-radius: calc(var(--space-2) * 1.5);
}

.studiom-project-svg-target svg{
  width: 100%;
  height: auto;
  display: block;
  max-height: min(70vh, 800px);
  object-fit: contain;
  overflow: visible;
}




@media (max-width: 980px){

  .studiom-project{
    padding: var(--space-4);
  }

  .studiom-project-header{
    top: var(--space-4);
    right: var(--space-4);
    justify-content: flex-end;
  }
}

@media (max-width: 768px){


  .studiom-project{
    max-width: min(var(--layout-mobile-cards), 92vw);
    margin-top: var(--space-5);
    padding: var(--space-4);
    gap: var(--space-4);
  }


  .studiom-project-switch{
    width: auto;
  }

  .studiom-project-switch-button{
    width: auto;
    min-width: 0;
  }

  .studiom-project-svg-target{
    padding: calc(var(--space-6) + var(--space-2)) var(--space-3) var(--space-3);
  }


}
/* =========================================================
   MARCEL / SPLIT INTRO
   Desktop: image left, content right.
   Narrow desktop/tablet: image above, content below.
   Formation grid: 2 columns on desktop.
   ========================================================= */
#marcel,
.marcel-section{
  position: relative;
  width: 100%;
  min-height: 100vh;
  color: var(--text);
  overflow: hidden;
}

.marcel-stage{
  width: 100%;
  min-height: 100vh;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "media content";
  align-items: stretch;
}

.marcel-left{
  grid-area: media;
  position: relative;
  z-index: 1;

  width: 100%;
  min-height: 100vh;
  overflow: hidden;

  -webkit-mask-image: linear-gradient(
    to left,
    transparent 0%,
    rgba(0,0,0,0.08) 4%,
    rgba(0,0,0,0.28) 9%,
    rgba(0,0,0,0.62) 18%,
    black 30%,
    black 100%
  );
  mask-image: linear-gradient(
    to left,
    transparent 0%,
    rgba(0,0,0,0.08) 4%,
    rgba(0,0,0,0.28) 9%,
    rgba(0,0,0,0.62) 18%,
    black 30%,
    black 100%
  );
}

.marcel-media{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.marcel-media img,
.marcel-media picture,
.marcel-media video,
.media-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.marcel-name-layer{
  width: 100%;
  max-width: var(--layout-text);
  margin: 0 0 var(--space-4) 0;
  overflow: visible;
  pointer-events: none;
}

.marcel-name-layer h2,
.marcel-name-layer .marcel-name{
  margin: 0;

  font-family: var(--font-serif);
  font-size: var(--h0);
  font-style: italic;
  font-weight: var(--w-regular);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-align: left;
  white-space: normal;

  position: relative;
  z-index: 20;
  transform: translateX(calc(-1 * clamp(2rem, 8vw, 7rem)));

  color: inherit;
}

.marcel-name-inner{
  display: block;
}

.marcel-name__line{
  display: block;
  width: 100%;
}

.marcel-name__line--2{
  transform: translateX(clamp(2.2rem, 5vw, 4.8rem));
}

.marcel-right{
  grid-area: content;
  position: relative;
  z-index: 3;

  width: 100vw;
  min-height: 100vh;
  height: auto;
  margin-left: -50vw;
  padding-left: 0;
  padding-right: var(--edge);
  padding-top: var(--content-top-safe);
  padding-bottom: var(--space-7);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  overflow: visible;
}

.marcel-stack{
  width: calc(50vw - var(--edge));
  max-width: none;
  overflow: visible;
}

.marcel-stack h2{
  margin: 0;

  font-family: var(--font-sans);
  font-size: var(--h2);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
}

.marcel-stack p{
  margin-top: var(--space-4);

  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
}

.marcel-stack strong{
  font-weight: var(--w-bold);
}

.marcel-block{
  margin-top: var(--space-4);
  font-size: var(--body);
}

.marcel-block h3{
  margin-top: var(--space-5);

  font-family: var(--font-sans);
  font-size: var(--h3);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
}

.marcel-principles{
  margin-top: var(--space-3);
  padding-left: 1.2rem;

  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: inherit;
  opacity: 0.9;
}

.marcel-formation{
  margin-top: var(--space-7);
  width: 100%;
}

.marcel-formation-title{
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-size: var(--h3);
}



@media (max-width: 980px) and (min-height: 520px){
  #marcel,
  .marcel-section{
    min-height: auto;
    overflow: visible;
  }

  .marcel-stage{
    min-height: auto;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "content";
  }

  .marcel-left{
    min-height: 48vh;
    height: 48vh;

    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 72%,
      rgba(0,0,0,0.78) 82%,
      rgba(0,0,0,0.38) 91%,
      rgba(0,0,0,0.08) 96%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 72%,
      rgba(0,0,0,0.78) 82%,
      rgba(0,0,0,0.38) 91%,
      rgba(0,0,0,0.08) 96%,
      transparent 100%
    );
  }

  .marcel-media{
    min-height: 48vh;
    height: 48vh;
  }

  .marcel-media img,
  .marcel-media picture,
  .marcel-media video,
  .media-img{
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    transform: scale(1.2);
    transform-origin: center bottom;
  }

  /* Removed deprecated .marcel-name-layer rule */

  .marcel-right{
    width: 100%;
    min-height: calc(48vh + 100%);
    height: auto;
    margin-left: 0;
    margin-top: -48vh;
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    padding-top: calc(48vh + var(--space-6));
    padding-bottom: var(--space-7);
    justify-content: flex-start;
    align-items: center;
  }

  .marcel-stack{
    width: 100%;
    min-width: 0;
    max-width: var(--layout-mobile);
    margin-inline: auto;
    transform: translateY(calc(var(--space-6) * -1));
  }

  .marcel-name-layer{
    max-width: var(--layout-mobile);
  }

.marcel-name-layer h2,
.marcel-name-layer .marcel-name{
  text-align: left;

}

  .marcel-name__line--2{
    transform: translateX(clamp(1.8rem, 6vw, 4rem));
  }


}

@media (max-width: 768px){
  .marcel-left,
  .marcel-media{
    min-height: 50vh;
    height: 50vh;
  }

  .marcel-media img,
  .marcel-media picture,
  .marcel-media video,
  .media-img{
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    transform: scale(1.35);
    transform-origin: center bottom;
  }

  /* Removed deprecated .marcel-name-layer rule */

  .marcel-name-layer h2,
  .marcel-name-layer .marcel-name{
    font-size: var(--h1);
    text-align: left;
    transform: none;
  }

  .marcel-right{
    min-height: calc(50vh + 100%);
    margin-top: -50vh;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-top: 50vh;
    padding-bottom: calc(var(--space-7) + var(--space-nav));
  }

  .marcel-stack h2,
  .marcel-formation-title{
    font-size: var(--h3);
  }

  .marcel-stack p{
    font-size: var(--body);
  }
}

/* =========================================================
   CONTACT
   ========================================================= */

.contact{
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.contact .section-inner{
  width: 100%;
  min-height: 100vh;

  padding-left: var(--edge);
  padding-right: var(--edge);
  padding-top: var(--content-top-safe);
  padding-bottom: var(--space-7);

  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-content{
  width: 100%;
  max-width: var(--layout-cards);

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.72fr);
  column-gap: var(--space-7);
  align-items: start;
}

.contact-title,
.contact-intro,
.contact-cta,
.contact-icon-wrap{
  grid-column: 1 / -1;
}

.contact-title{
  width: 100%;
  max-width: var(--layout-text);
  margin: 0 auto;

  font-family: var(--font-serif);
  font-size: var(--h0);
  font-style: italic;
  font-weight: var(--w-regular);
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.contact-intro{
  width: 100%;
  max-width: var(--layout-text);
  margin: var(--space-4) auto 0 auto;

  font-family: var(--font-sans);
  font-size: var(--h3);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
}

.contact-cta{
  justify-self: center;

  width: min(100%, calc((var(--layout-cards) - (var(--space-4) * 2)) / 3));

  margin-top: calc(var(--space-7) * 1.35);
  padding: var(--space-3) var(--space-4);

  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);

  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-bold);
  line-height: 1;

  color: inherit;
  text-decoration: none;

  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius: var(--space-2);
  background: transparent;

  transition:
    transform var(--transition-ui),
    border-color var(--transition-ui);
}

.contact-cta:hover{
  transform: translateY(calc(-0.75 * var(--space-1))) scale(1.01);

  border-color: color-mix(in srgb, var(--text) 20%, transparent);
}

.contact-cta span[aria-hidden="true"]{
  margin-left: auto;

  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: 1;

  opacity: 0.45;
}

.contact-cta:hover span[aria-hidden="true"]{
  opacity: 0.8;
}

.contact-icon-wrap{
  position: relative;

  justify-self: center;

  width: clamp(220px, 22vw, 300px);
  margin-top: calc(var(--space-7) * 1.45);

  pointer-events: none;
}

.contact-icon{
  display: block;
  width: 100%;
  height: auto;

  image-rendering: pixelated;
  image-rendering: crisp-edges;

  opacity: 0;
}

.contact-icon-dark{
  position: absolute;
  inset: 0;
}

body.is-dark .contact-icon-light{
  opacity: 0.86;
}

body.is-light .contact-icon-dark{
  opacity: 0.86;
}

.contact-icon-wrap:hover .contact-icon{
  opacity: 1;
}

.contact-legal{
  grid-column: 1;

  margin-top: var(--space-7);

  display: flex;
  flex-direction: column;
  gap: calc(var(--space-1) * 0.35);

  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: 1.15;
}

.contact-legal p{
  margin: 0;
  opacity: 0.7;
}

.contact-legal p:has(.contact-mail-link){
  opacity: 1;
}

.contact-legal a{
  color: inherit;
  text-decoration: none;
}

.contact-mail-link{
  opacity: 0.7;
  transition: opacity var(--transition-ui);
}

.contact-mail-link:hover{
  opacity: 1;
}

.footer{
  grid-column: 2;

  margin-top: var(--space-7);

  justify-self: end;
  align-self: start;

  font-family: var(--font-sans);
}

.footer-inner{
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);

  white-space: nowrap;
}

.footer-inner > *{
  margin: 0;

  display: inline-flex;
  align-items: flex-start;

  font-family: var(--font-sans);
  font-size: var(--body);
  font-weight: var(--w-regular);
  line-height: 1.15;

  color: inherit;
  opacity: 0.7;
}

.footer-privacy{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;

  text-align: inherit;
  cursor: pointer;
  transform: none;
}

.footer-privacy:hover{
  opacity: 1;
  transform: none;
}

.footer-ally-icons{
  margin-right: 0.35em;
  font-size: 0.85em;
}

@media (max-width: 980px) and (min-height: 520px){

  .contact{
    min-height: auto;
  }

  .contact .section-inner{
    min-height: auto;

    padding-left: var(--space-5);
    padding-right: var(--space-5);
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);

    justify-content: flex-start;
  }

  .contact-content{
    width: 100%;
    max-width: min(var(--layout-mobile-cards), 92vw);
    margin-inline: auto;

    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .contact-title,
  .contact-intro{
    max-width: min(var(--layout-mobile), 92vw);
    margin-left: auto;
    margin-right: auto;
  }

  .contact-cta{
    width: min(100%, var(--layout-mobile-cards));
    max-width: var(--layout-mobile-cards);
    justify-self: center;

    margin-top: var(--space-6);
  }

  .contact-icon-wrap{
    width: clamp(190px, 42vw, 260px);
    margin-top: var(--space-6);
  }

  .contact-legal{
    grid-column: 1;
    grid-row: 5;
    width: 100%;
    min-width: 0;
    margin-top: var(--space-6);
  }

  .footer{
    grid-column: 1;
    grid-row: 6;
    width: 100%;
    margin-top: var(--space-3);
    justify-self: stretch;
  }

  .footer-inner{
    width: 100%;
    justify-content: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
}

@media (max-width: 768px){

  .contact .section-inner{
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: calc(var(--space-7) + var(--space-nav));
  }

  .contact-title{
    font-size: var(--h1);
  }

  .contact-intro{
    font-size: var(--h3);
  }

  .contact-content{
    width: 100%;
    max-width: min(var(--layout-mobile-cards), 92vw);
    margin-inline: auto;
  }

  .contact-title,
  .contact-intro{
    max-width: min(var(--layout-mobile), 92vw);
    margin-left: auto;
    margin-right: auto;
  }

  .contact-cta{
    width: min(100%, var(--layout-mobile-cards));
    max-width: var(--layout-mobile-cards);
    justify-self: center;
  }

  .contact-legal{
    grid-column: 1;
    grid-row: 5;
    width: 100%;
    min-width: 0;
  }

  .footer{
    grid-column: 1;
    grid-row: 6;
    width: 100%;
    justify-self: stretch;
  }

  .contact-icon-wrap{
    width: clamp(190px, 62vw, 260px);
  }

  .footer-inner{
    width: 100%;
    justify-content: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
}

@media (max-width: 430px){

  .footer-inner{
    justify-content: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
}

/* =========================================================
   PRIVACY PANEL
   ========================================================= */

.privacy-panel{
  position: fixed;
  inset: 0;
  z-index: 4000;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  padding:
    calc(var(--space-nav) + var(--space-4))
    var(--space-5)
    var(--space-5);

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.privacy-panel[hidden]{
  display: none !important;
}

.privacy-backdrop{
  position: absolute;
  inset: 0;

  background: rgba(0,0,0,0.45);

  backdrop-filter: blur(12px);
}

.privacy-dialog{
  position: relative;
  z-index: 2;

  width: min(42rem, 100%);
  max-height: calc(100vh - var(--space-nav) - (var(--space-5) * 2));

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  padding:
    calc(var(--space-6) * 1.35)
    calc(var(--space-6) * 1.2)
    calc(var(--space-6) * 1.15)
    calc(var(--space-6) * 1.2) !important;

  border-radius: var(--space-3);

  background: var(--bg);
  color: var(--text);

  box-shadow: 0 0 80px rgba(0,0,0,0.22);
}

.privacy-dialog h2{
  margin: 0 0 var(--space-5);

  font-family: var(--font-serif);
  font-size: var(--h2);
  font-style: italic;
  font-weight: var(--w-regular);
  line-height: 0.95;
}

.privacy-copy{
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.privacy-copy p{
  margin: 0;

  font-size: var(--body);
  line-height: var(--lh-body);

  opacity: 0.88;
}

.privacy-copy a{
  color: inherit;
}

.privacy-close{
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);

  border: 0;
  background: transparent;

  font-size: var(--h3);
  line-height: 1;

  color: inherit;

  cursor: pointer;
  opacity: 0.45;

  transition: opacity var(--transition-ui);
}

.privacy-close:hover{
  opacity: 1;
}

@media (max-width: 768px){

  .privacy-panel{
    padding:
      calc(var(--space-nav) + var(--space-3))
      var(--space-4)
      var(--space-4);
  }

  .privacy-dialog{
    max-height: calc(100vh - var(--space-nav) - (var(--space-4) * 2));

    padding:
      calc(var(--space-5) * 1.15)
      var(--space-5)
      var(--space-5)
      var(--space-5) !important;
  }
}