@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-variable.woff2") format("woff2");
  font-display: swap;
  font-stretch: 62% 125%;
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 600;
}

:root {
  --font-archivo: "Archivo";
  --font-plex-mono: "IBM Plex Mono";
  --ink: #07100f;
  --bone: #f2eee2;
  --acid: #cfff3f;
  --paper: #f1ede2;
  --cobalt: #1648d8;
  --orange: #f4512c;
  --night: #080a19;
  --cyan: #35f2e5;
  --pink: #ff3d80;
  --mx: 68vw;
  --my: 42vh;
  --split: 56%;
  --nx: 0;
  --ny: 0;
  --dx: 0px;
  --dy: 0px;
  --core-x: 0px;
  --core-y: 0px;
  --orbit-x: 0px;
  --orbit-y: 0px;
  --orbit-x-small: 0px;
  --orbit-y-small: 0px;
  --label-x: 0px;
  --label-y: 0px;
  --wdth: 108;
}

* {
  box-sizing: border-box;
}

html {
  background: #0a0a0a;
}

body {
  margin: 0;
  color: #111;
  background: #0a0a0a;
  font-family: var(--font-archivo), Arial, Helvetica, sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

::selection {
  color: var(--ink);
  background: var(--acid);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: #000;
  background: #fff;
  font: 600 12px/1 var(--font-plex-mono), monospace;
  transform: translateY(-180%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 5px;
}

.micro {
  font: 500 clamp(0.58rem, 0.67vw, 0.72rem)/1.2 var(--font-plex-mono), monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Comparison hub */
.selector-shell {
  min-height: 100svh;
  padding: clamp(20px, 2.3vw, 40px);
  color: #eee9dc;
  background: #111311;
}

.selector-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  padding-bottom: clamp(28px, 4vh, 56px);
  border-bottom: 1px solid #4a4c47;
}

.selector-kicker,
.selector-meta,
.selector-footer {
  margin: 0;
  font: 500 0.67rem/1.4 var(--font-plex-mono), monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.selector-header h1 {
  margin: 18px 0 0;
  max-width: 1050px;
  font-size: clamp(2.8rem, 6.3vw, 7.4rem);
  font-variation-settings: "wdth" 94, "wght" 730;
  letter-spacing: -0.07em;
  line-height: 0.84;
}

.selector-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
}

.selector-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 54vh;
  border-bottom: 1px solid #4a4c47;
}

.selector-card {
  position: relative;
  display: flex;
  min-height: 420px;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 1.7vw, 30px);
  isolation: isolate;
  transition: flex 400ms cubic-bezier(.2,.8,.2,1), filter 250ms ease;
}

.selector-card + .selector-card {
  border-left: 1px solid #4a4c47;
}

.selector-card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: currentColor;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 200ms ease;
}

.selector-card:hover::after,
.selector-card:focus-visible::after {
  opacity: 0.08;
  transform: translateY(0);
}

.selector-card-a { color: var(--acid); background: var(--ink); }
.selector-card-b { color: #111; background: var(--paper); }
.selector-card-c { color: var(--cyan); background: var(--night); }

.selector-card-top {
  display: flex;
  justify-content: space-between;
  font: 500 0.65rem/1 var(--font-plex-mono), monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.selector-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(8rem, 18vw, 19rem);
  font-variation-settings: "wdth" 110, "wght" 840;
  letter-spacing: -0.2em;
  line-height: 0.68;
  transform: translateX(-0.06em);
  transition: font-variation-settings 450ms cubic-bezier(.2,.8,.2,1), letter-spacing 450ms ease;
}

.selector-card-b .selector-mark { color: var(--cobalt); }
.selector-card-c .selector-mark { text-shadow: 9px 0 var(--pink); }
.selector-card:hover .selector-mark { font-variation-settings: "wdth" 72, "wght" 760; letter-spacing: -0.11em; }

.selector-card-bottom {
  display: grid;
  grid-template-columns: minmax(120px, 0.75fr) minmax(130px, 1fr);
  gap: 18px;
  align-items: end;
  border-top: 1px solid currentColor;
  padding-top: 14px;
}

.selector-card-bottom strong {
  font-size: clamp(1.15rem, 1.7vw, 1.7rem);
  letter-spacing: -0.04em;
}

.selector-card-bottom > span {
  font: 400 0.68rem/1.45 var(--font-plex-mono), monospace;
}

.selector-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 18px;
}

.selector-footer a { border-bottom: 1px solid currentColor; }

/* Shared concept shell */
.concept {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.noise {
  position: absolute;
  z-index: 50;
  inset: 0;
  pointer-events: none;
  background-image: repeating-radial-gradient(circle at 17% 23%, rgba(255,255,255,.36) 0 .4px, transparent .5px 3px);
  background-size: 7px 7px;
  mix-blend-mode: soft-light;
  opacity: 0.085;
}

.concept-switcher {
  position: absolute;
  z-index: 70;
  top: 23px;
  right: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 0.62rem/1 var(--font-plex-mono), monospace;
}

.concept-switcher a {
  display: grid;
  width: 28px;
  height: 28px;
  border: 1px solid currentColor;
  place-items: center;
  transition: color 160ms ease, background 160ms ease;
}

.concept-switcher a:hover,
.concept-switcher a.is-active {
  color: var(--page-bg);
  background: var(--page-fg);
}

.concept-switcher .concept-switcher-all { width: 42px; }

.roles {
  position: absolute;
  z-index: 30;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 clamp(0.68rem, 0.78vw, 0.84rem)/1.55 var(--font-plex-mono), monospace;
  letter-spacing: 0.045em;
}

.roles li::before { content: "— "; }

.microphrase {
  position: absolute;
  z-index: 30;
  margin: 0;
  font-size: clamp(0.76rem, 0.9vw, 1rem);
  font-weight: 520;
  letter-spacing: -0.015em;
}

.contact-links {
  position: absolute;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  padding: 0 3.2vw 22px;
}

.contact-links > a,
.email-group {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid currentColor;
  font: 600 clamp(0.72rem, 0.88vw, 0.92rem)/1 var(--font-plex-mono), monospace;
  letter-spacing: 0.045em;
  transition: color 180ms ease, background-color 180ms ease, padding 180ms ease;
}

.contact-links > a + .email-group,
.email-group + a { margin-left: 22px; }

.contact-links > a:hover,
.contact-links > a:focus-visible,
.email-group:hover {
  padding-right: 10px;
  padding-left: 10px;
  color: var(--page-bg);
  background: var(--page-fg);
}

.email-group > a {
  display: flex;
  min-width: 0;
  flex: 1;
  justify-content: space-between;
}

.email-group button {
  margin-left: 12px;
  padding: 4px 0 4px 10px;
  border: 0;
  border-left: 1px solid currentColor;
  background: transparent;
  font: 500 0.56rem/1 var(--font-plex-mono), monospace;
  cursor: pointer;
}

.copy-toast {
  position: fixed;
  z-index: 100;
  right: 28px;
  bottom: 92px;
  padding: 12px 15px;
  color: var(--page-bg);
  background: var(--page-fg);
  font: 600 0.62rem/1 var(--font-plex-mono), monospace;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.copy-toast.is-visible { opacity: 1; transform: translateY(0); }

/* A — Ink / Signal */
.concept-a {
  --page-bg: var(--ink);
  --page-fg: var(--bone);
  --lens-radius: clamp(124px, 10.35vw, 184px);
  --hello-x: 86.5%;
  --hello-y: 72%;
  --hello-width: clamp(220px, 14.6vw, 280px);
  --hello-height: 218px;
  --mx: 70vw;
  --my: 72vh;
  color: var(--bone);
  background-color: var(--ink);
  background-image: linear-gradient(rgba(242,238,226,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(242,238,226,.075) 1px, transparent 1px);
  background-position: 3.2vw 0;
  background-size: calc((100vw - 6.4vw) / 12) 100%, calc((100vw - 6.4vw) / 12) 100%;
}

.concept-a.a-active-breez,
.concept-a.a-active-shadi { --lens-radius: clamp(190px, 15.5vw, 285px); }

.concept-a.a-active-hello { --lens-radius: clamp(136px, 11.4vw, 205px); }

.concept-a::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, var(--ink) 0 3.1vw, transparent 3.1vw calc(100% - 3.1vw), var(--ink) calc(100% - 3.1vw));
  pointer-events: none;
}

.a-topline {
  position: absolute;
  z-index: 35;
  top: 28px;
  right: 210px;
  left: 3.2vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.a-topline > span:nth-child(2) { text-align: center; }
.a-topline > span:nth-child(3) { text-align: right; }
.concept-final .a-topline { right: 3.2vw; }

.a-topline-practice { white-space: nowrap; }

.a-topline-place {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .58em;
  white-space: nowrap;
}

.a-topline-place::after {
  position: absolute;
  top: calc(50% + .52em);
  right: 0;
  content: "WITH CARE.";
  font-size: .7em;
  font-weight: 600;
  letter-spacing: .16em;
  opacity: 0;
  transform: translateY(-2px);
  white-space: nowrap;
}

.a-brussels-mark {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  color: currentColor;
  opacity: 0;
  transform: scale(.88);
  transform-origin: center;
}

.a-brussels-mark path {
  fill: currentColor;
}

.a-topline-reveal .a-brussels-mark {
  opacity: .42;
  transform: scale(1);
}

.a-topline-reveal .a-topline-place::after {
  opacity: .68;
  transform: translateY(0);
}

.a-topline-practice em {
  display: inline-block;
  margin-left: .38em;
  padding: .25em .42em .18em;
  color: var(--ink);
  background: var(--acid);
  font-style: normal;
  transform: rotate(-1.5deg);
}

.a-topline-reveal .a-topline-practice em {
  color: var(--acid);
  background: var(--ink);
}

.a-hero { position: absolute; z-index: 5; inset: 7vh 0 13vh; }

.a-monogram {
  position: absolute;
  top: 4%;
  left: 1.7vw;
  display: flex;
  width: 78vw;
  height: 72vh;
  align-items: center;
  font-size: min(65vw, 78vh);
  font-variation-settings: "wdth" var(--wdth), "wght" 820;
  letter-spacing: -0.19em;
  line-height: 0.68;
  white-space: nowrap;
  transform: translateX(-0.045em);
}

.a-monogram span:last-child { transform: translateY(0.055em); }
.a-monogram-base { color: var(--bone); }

.a-reveal {
  position: absolute;
  z-index: 45;
  inset: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--acid);
  clip-path: circle(var(--lens-radius) at var(--mx) var(--my));
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  will-change: clip-path;
}

.a-lens-ready .a-reveal { opacity: 1; }

.a-reveal::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background-image: linear-gradient(rgba(7,16,15,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(7,16,15,.12) 1px, transparent 1px);
  /* The grid is fractionally displaced inside the lens, like the page is
     being viewed through a thin sheet of glass. */
  background-position: calc(3.2vw + 4px) 3px;
  background-size: calc((100vw - 6.4vw) / 12) 100%, calc((100vw - 6.4vw) / 12) 100%;
  pointer-events: none;
}

.a-hidden-portrait {
  position: absolute;
  z-index: 4;
  top: 68%;
  left: 26.5%;
  width: clamp(300px, 21vw, 400px);
  aspect-ratio: 1;
  margin: 0;
  border: 1px solid rgba(7,16,15,.84);
  border-radius: 50%;
  background: var(--bone);
  box-shadow: 11px 11px 0 var(--ink);
  transform: translate(-50%, -50%) rotate(-1.5deg);
  isolation: isolate;
  pointer-events: none;
}

.a-hidden-portrait::before {
  position: absolute;
  z-index: 0;
  inset: -10px;
  content: "";
  border: 1px solid rgba(7,16,15,.52);
  border-radius: 50%;
  transform: translate(-4px, -3px);
}

.a-hidden-portrait img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  opacity: 1;
}

.a-reveal-hero {
  position: absolute;
  z-index: auto;
  inset: 7vh 0 13vh;
}

.a-reveal .a-monogram { color: var(--ink); }

/* Optical refraction: permanent elements keep their exact layout outside the
   lens, while their revealed twins shift by only a few pixels inside it. */
.a-reveal-hero .a-monogram {
  translate: 7px 3px;
  scale: 1.006;
}

.a-reveal .a-name-reveal {
  color: var(--ink);
  translate: 3px -2px;
}

.a-topline-reveal { translate: 2px 1px; }

.a-topline-reveal .a-topline-practice em {
  transform: rotate(1.25deg) translate(1px, -1px);
}

.a-profile-reveal { translate: -2px 2px; }
.a-personal-note-reveal { translate: 2px -1px; }
.a-reveal-contact { translate: 2px -2px; }

.a-reveal .a-name-reveal span {
  /* Preserve the black/citron inversion while cutting the name out of the
     revealed black monogram, so BENOIT and DUPUIS never disappear into it. */
  background: var(--acid);
}

.a-mobile-portrait,
.a-mobile-portrait-toggle { display: none; }

.a-mobile-microphrase { display: none; }

.a-personal-note {
  position: absolute;
  z-index: 30;
  bottom: 86px;
  left: 43%;
  display: grid;
  width: clamp(390px, 33vw, 520px);
  grid-template-columns: max-content minmax(0, 1fr);
  gap: clamp(18px, 1.8vw, 32px);
  align-items: end;
  color: var(--bone);
  transition: opacity 160ms ease;
  pointer-events: none;
}

.a-personal-note-label {
  display: block;
  padding-bottom: .28em;
  color: rgba(242,238,226,.58);
  font: 600 clamp(.52rem, .56vw, .61rem)/1 var(--font-plex-mono), monospace;
  letter-spacing: .075em;
  white-space: nowrap;
}

.a-personal-note p {
  margin: 0;
  font-size: clamp(1.22rem, 1.55vw, 1.82rem);
  font-variation-settings: "wdth" 78, "wght" 760;
  letter-spacing: -.055em;
  line-height: .91;
}

.a-personal-note p span,
.a-personal-note p strong { display: block; }

.a-personal-note p strong {
  width: max-content;
  margin-top: .13em;
  color: var(--acid);
  font-weight: 760;
}

.a-personal-note-reveal { color: var(--ink); }
.a-personal-note-reveal .a-personal-note-label { color: rgba(7,16,15,.6); }
.a-personal-note-reveal p strong {
  padding: 0 .08em .04em;
  color: var(--acid);
  background: var(--ink);
}

.a-active-hello .a-personal-note { opacity: 0; }

.a-secret-card {
  position: absolute;
  z-index: 5;
  display: flex;
  width: clamp(270px, 21vw, 380px);
  min-height: 205px;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(16px, 1.4vw, 24px);
  border: 1px solid var(--ink);
  color: var(--ink);
  background: var(--bone);
  box-shadow: 11px 11px 0 var(--ink);
  transform: translate(-50%, -50%) rotate(-1.5deg);
}

.a-secret-breez { top: 40%; left: 55%; }

.a-secret-shadi {
  top: 30%;
  left: 24%;
  min-height: 220px;
  color: #173843;
  background: #ffd13d;
  box-shadow: 9px 9px 0 #1993bc, 18px 18px 0 #e42e38;
  transform: translate(-50%, -50%) rotate(2deg);
}

.a-secret-index,
.a-secret-alias,
.a-secret-copy,
.a-secret-cta {
  font-family: var(--font-plex-mono), monospace;
  letter-spacing: .045em;
}

.a-secret-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.a-secret-index { font-size: .61rem; font-weight: 600; }

.a-secret-alias {
  padding: 4px 6px;
  color: var(--acid);
  background: var(--ink);
  font-size: .5rem;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
}

.a-secret-card strong {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 70%;
  margin: 16px 0;
  font-size: clamp(2.2rem, 2.85vw, 3.6rem);
  font-variation-settings: "wdth" 73, "wght" 840;
  letter-spacing: -.075em;
  line-height: .84;
}

.a-secret-emblem {
  position: absolute;
  z-index: 0;
  top: 52%;
  right: clamp(15px, 1.35vw, 23px);
  width: clamp(58px, 5.2vw, 88px);
  height: auto;
  overflow: visible;
  opacity: .74;
  transform: translateY(-50%) rotate(-7deg) scale(.9);
  transform-origin: center;
  transition: opacity 240ms ease, transform 420ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.a-secret-emblem-breez {
  color: var(--ink);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.a-emblem-signal {
  fill: var(--acid);
  stroke: currentColor;
}

.a-emblem-cursor {
  fill: var(--acid);
  stroke: currentColor;
}

.a-secret-emblem-shadi {
  color: #173843;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transform: translateY(-50%) rotate(7deg) scale(.9);
}

.a-emblem-note-head { stroke: #173843; }
.a-emblem-note-head-one { fill: #e42e38; }
.a-emblem-note-head-two { fill: #1993bc; }
.a-emblem-spark { fill: #ffae00; stroke: #173843; stroke-width: 1.5; }

.a-active-breez .a-secret-breez .a-secret-emblem,
.a-active-shadi .a-secret-shadi .a-secret-emblem {
  opacity: 1;
  transform: translateY(-50%) rotate(0) scale(1);
}

.a-secret-copy { font-size: clamp(.62rem, .7vw, .76rem); line-height: 1.45; }

.a-secret-cta {
  align-self: flex-end;
  margin-top: 18px;
  border-bottom: 1px solid currentColor;
  font-size: .6rem;
  font-weight: 600;
}

.a-secret-colours {
  position: absolute;
  top: 17px;
  right: 17px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1993bc;
  box-shadow: 16px 0 0 #e42e38, 32px 0 0 #ffae00;
}

.a-last-secret {
  position: absolute;
  z-index: 35;
  top: var(--hello-y);
  left: var(--hello-x);
  display: flex;
  width: var(--hello-width);
  height: var(--hello-height);
  flex-direction: column;
  justify-content: space-between;
  padding: 17px 0 0;
  border-top: 1px solid var(--ink);
  color: var(--ink);
  background: var(--acid);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 180ms ease;
  cursor: pointer;
  pointer-events: auto;
}

@media (min-width: 861px) and (max-width: 1100px) {
  .a-topline-practice {
    font-size: .51rem;
    letter-spacing: .04em;
  }

  .a-personal-note {
    left: 34%;
    width: min(40vw, 360px);
    gap: 14px;
  }

  .a-personal-note p { font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
  .a-personal-note-label { font-size: .5rem; }
}

.a-is-exploring .a-last-secret,
.a-active-hello .a-last-secret { opacity: 1; }

.a-last-secret-meta,
.a-last-secret-note,
.a-last-secret-cta {
  font-family: var(--font-plex-mono), monospace;
  letter-spacing: .065em;
}

.a-last-secret-meta {
  font-size: .54rem;
  font-weight: 600;
}

.a-last-secret strong {
  display: block;
  margin: 18px 0 14px;
  font-size: clamp(1.9rem, 2.3vw, 2.75rem);
  font-variation-settings: "wdth" 74, "wght" 825;
  letter-spacing: -.072em;
  line-height: .84;
}

.a-last-secret strong span { display: block; }

.a-last-secret-note {
  padding: 10px 0;
  border-top: 1px solid rgba(7,16,15,.46);
  font-size: clamp(.51rem, .56vw, .6rem);
  font-weight: 600;
}

.a-last-secret-cta {
  display: flex;
  min-height: 35px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: var(--acid);
  background: var(--ink);
  font-size: clamp(.56rem, .6vw, .65rem);
  font-weight: 600;
  transition: color 160ms ease, background 160ms ease;
}

.a-last-secret-cta > span { font-size: .8rem; }

.a-active-hello .a-last-secret-cta {
  color: var(--ink);
  background: var(--bone);
}

.a-lens {
  position: absolute;
  z-index: 60;
  top: var(--my);
  left: var(--mx);
  width: calc(var(--lens-radius) * 2);
  height: calc(var(--lens-radius) * 2);
  border: 1px solid rgba(207,255,63,.72);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(7,16,15,.5), 0 0 45px rgba(207,255,63,.08);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 120ms ease;
  pointer-events: none;
  will-change: top, left, width, height;
}

.a-lens-ready .a-lens { opacity: 1; }

.a-lens::before,
.a-lens::after {
  position: absolute;
  content: "";
  background: var(--acid);
}

.a-lens::before {
  top: 50%;
  left: -10px;
  width: 20px;
  height: 1px;
  box-shadow: calc(var(--lens-radius) * 2) 0 0 var(--acid);
}

.a-lens::after {
  top: -10px;
  left: 50%;
  width: 1px;
  height: 20px;
  box-shadow: 0 calc(var(--lens-radius) * 2) 0 var(--acid);
}

.a-cursor-focus {
  position: absolute;
  z-index: 61;
  top: var(--my);
  left: var(--mx);
  display: none;
  width: 20px;
  height: 20px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition:
    width 160ms cubic-bezier(.2,.8,.2,1),
    height 160ms cubic-bezier(.2,.8,.2,1),
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    opacity 120ms ease;
  pointer-events: none;
  will-change: top, left, width, height;
}

.a-lens-ready .a-cursor-focus { opacity: .96; }

.a-cursor-reticle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  overflow: visible;
  transform: translate(-50%, -50%);
  transition: opacity 100ms ease, transform 150ms cubic-bezier(.2,.8,.2,1);
}

.a-cursor-reticle-halo,
.a-cursor-reticle-axis {
  fill: none;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}

.a-cursor-reticle-halo {
  stroke: var(--acid);
  stroke-width: 3.2;
}

.a-cursor-reticle-axis {
  stroke: var(--ink);
  stroke-width: 1.15;
}

.a-cursor-reticle-dot {
  fill: var(--acid);
  stroke: var(--ink);
  stroke-width: 1.35;
  vector-effect: non-scaling-stroke;
}

.a-cursor-focus::after {
  position: absolute;
  inset: 0;
  display: grid;
  color: var(--acid);
  content: "OPEN \2197";
  font: 600 .47rem/1 var(--font-plex-mono), monospace;
  letter-spacing: .045em;
  opacity: 0;
  place-items: center;
  text-align: center;
  transform: scale(.72);
  transition: opacity 100ms ease, transform 150ms cubic-bezier(.2,.8,.2,1);
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
  .concept-a,
  .concept-a a,
  .concept-a button { cursor: none; }

  .a-cursor-focus { display: block; }

  .concept-a:has(a:hover, button:hover) .a-cursor-focus {
    width: 52px;
    height: 52px;
    border-color: var(--acid);
    background: rgba(7,16,15,.97);
    box-shadow: 0 0 0 1px rgba(7,16,15,.72), 0 0 20px rgba(207,255,63,.17);
  }

  .concept-a:has(a:hover, button:hover) .a-cursor-reticle {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.45);
  }

  .concept-a:has(a:hover, button:hover) .a-cursor-focus::after {
    opacity: 1;
    transform: scale(1);
  }

  .concept-a:has(a[href^="mailto:"]:hover) .a-cursor-focus::after { content: "EMAIL \2197"; }
  .concept-a:has(.a-last-secret:hover) .a-cursor-focus::after { content: "HELLO \2197"; }
  .concept-a:has(button:hover) .a-cursor-focus::after { content: "COPY"; }
}

.a-lens-label {
  position: absolute;
  z-index: 2;
  top: 7%;
  right: 14%;
  padding: 4px 6px;
  color: var(--ink);
  background: var(--acid);
  font: 600 .5rem/1 var(--font-plex-mono), monospace;
  letter-spacing: .06em;
}

.a-name {
  position: absolute;
  z-index: 8;
  bottom: 6.6vh;
  left: 3.2vw;
  margin: 0;
  color: var(--acid);
  font-size: clamp(3.7rem, 6.8vw, 7.8rem);
  font-variation-settings: "wdth" 76, "wght" 810;
  letter-spacing: -0.085em;
  line-height: 0.73;
}

.a-name span {
  display: block;
  width: max-content;
  padding: .01em .09em .055em .015em;
  background: var(--ink);
}

.a-portals {
  position: absolute;
  z-index: 18;
  inset: 0;
  pointer-events: none;
}

.a-portal {
  position: absolute;
  display: grid;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(242,238,226,.64);
  border-radius: 50%;
  color: var(--bone);
  background: rgba(7,16,15,.76);
  place-items: center;
  transform: translate(-50%, -50%);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
  cursor: pointer;
  pointer-events: auto;
}

.a-portal::before,
.a-portal::after {
  position: absolute;
  content: "";
  background: rgba(242,238,226,.45);
}

.a-portal::before { top: 50%; right: -8px; left: -8px; height: 1px; }
.a-portal::after { top: -8px; bottom: -8px; left: 50%; width: 1px; }

.a-portal-breez { top: 40%; left: 55%; }
.a-portal-shadi { top: 30%; left: 24%; }

.a-last-secret:focus-visible {
  outline-color: var(--acid);
  outline-offset: 5px;
}

.a-portal:hover,
.a-portal:focus-visible,
.a-active-breez .a-portal-breez,
.a-active-shadi .a-portal-shadi {
  border-color: var(--acid);
  color: var(--ink);
  background: var(--acid);
  transform: translate(-50%, -50%) scale(1.08);
}

.a-active-breez .a-portal-breez,
.a-active-shadi .a-portal-shadi {
  width: clamp(270px, 21vw, 380px);
  height: 230px;
  border-color: transparent;
  border-radius: 0;
  color: transparent;
  background: transparent;
  transform: translate(-50%, -50%);
}

.a-active-breez .a-portal-breez::before,
.a-active-breez .a-portal-breez::after,
.a-active-breez .a-portal-breez .a-portal-label,
.a-active-shadi .a-portal-shadi::before,
.a-active-shadi .a-portal-shadi::after,
.a-active-shadi .a-portal-shadi .a-portal-label,
.a-active-breez .a-lens-label,
.a-active-shadi .a-lens-label,
.a-active-hello .a-lens-label { opacity: 0; }

.a-portal:focus-visible { outline-color: var(--acid); }

.a-portal-number {
  position: relative;
  z-index: 2;
  font: 600 .68rem/1 var(--font-plex-mono), monospace;
}

.a-portal-arrow {
  position: absolute;
  z-index: 2;
  top: 13px;
  right: 14px;
  font: 600 .65rem/1 var(--font-plex-mono), monospace;
}

.a-portal-label {
  position: absolute;
  top: calc(100% + 13px);
  left: 50%;
  padding: 5px 7px;
  color: var(--bone);
  background: var(--ink);
  font: 600 .56rem/1 var(--font-plex-mono), monospace;
  letter-spacing: .06em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.a-portal-eyebrow em {
  display: block;
  margin-top: 5px;
  color: var(--acid);
  font-size: .47rem;
  font-style: normal;
  letter-spacing: .09em;
}

.a-portal-label strong { display: none; }

.a-profile {
  position: absolute;
  z-index: 12;
  top: 21%;
  right: 3.2vw;
  width: clamp(275px, 20vw, 380px);
  padding: clamp(17px, 1.45vw, 25px);
  border-top: 1px solid var(--bone);
  border-bottom: 1px solid rgba(242,238,226,.35);
  color: var(--bone);
  background: rgba(7,16,15,.94);
}

.a-profile-kicker {
  margin: 0 0 19px;
  color: var(--acid);
  font: 600 .62rem/1 var(--font-plex-mono), monospace;
  letter-spacing: .07em;
}

.a-profile-copy {
  margin: 0 0 clamp(22px, 3.5vh, 42px);
  max-width: 33ch;
  font-size: clamp(1rem, 1.25vw, 1.35rem);
  font-weight: 570;
  letter-spacing: -.03em;
  line-height: 1.2;
}

.a-profile-services {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(242,238,226,.3);
  list-style: none;
  font: 500 clamp(.62rem, .68vw, .72rem)/1 var(--font-plex-mono), monospace;
  letter-spacing: .045em;
}

.a-profile-services li {
  display: grid;
  grid-template-columns: 28px 1fr;
  padding: 10px 0;
  border-bottom: 1px solid rgba(242,238,226,.16);
}

.a-profile-services li span { color: var(--acid); }

.a-topline-reveal,
.a-profile-reveal,
.microphrase-reveal { color: var(--ink); }

.a-profile-reveal {
  border-color: var(--ink);
  background: transparent;
}

.a-profile-reveal .a-profile-kicker,
.a-profile-reveal .a-profile-services li span { color: var(--ink); }

.a-profile-reveal .a-profile-services { border-color: rgba(7,16,15,.42); }

.a-profile-reveal .a-profile-services li { border-color: rgba(7,16,15,.22); }

.a-prompt {
  position: absolute;
  z-index: 20;
  right: 3.2vw;
  bottom: 9.2vh;
  margin: 0;
  padding: 7px 9px;
  color: var(--bone);
  background: var(--ink);
  transition: color 180ms ease, background 180ms ease;
}

.a-prompt.is-active { color: var(--ink); background: var(--acid); }

.a-prompt-reveal,
.a-prompt-reveal.is-active {
  border: 1px solid rgba(7,16,15,.66);
  color: var(--ink);
  background: transparent;
}

.concept-a .microphrase { left: 43%; bottom: 92px; }

.concept-a .contact-links > a:hover,
.concept-a .contact-links > a:focus-visible,
.concept-a .email-group:hover {
  color: var(--acid);
  background: transparent;
}

.concept-a .concept-switcher a {
  color: var(--bone);
  background: var(--ink);
}

.concept-a .concept-switcher a:hover,
.concept-a .concept-switcher a.is-active {
  color: var(--ink);
  background: var(--bone);
}

.a-reveal-contact-item {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ink);
  color: var(--ink);
  font: 600 clamp(0.72rem, 0.88vw, 0.92rem)/1 var(--font-plex-mono), monospace;
  letter-spacing: 0.045em;
}

.a-reveal-contact-item + .a-reveal-contact-item { margin-left: 22px; }

.a-reveal-contact-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .56rem;
}

.a-reveal-contact-meta span + span {
  padding-left: 10px;
  border-left: 1px solid currentColor;
}

/* B — Paper / Cobalt */
.concept-b {
  --page-bg: var(--paper);
  --page-fg: #11120f;
  color: #11120f;
  background: var(--paper);
  touch-action: pan-y;
}

.b-poster {
  position: absolute;
  z-index: 2;
  inset: 0 0 88px;
  overflow: hidden;
}

.b-personal {
  color: #11120f;
  background-color: var(--paper);
  background-image: linear-gradient(rgba(17,18,15,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(17,18,15,.13) 1px, transparent 1px);
  background-size: 12.5vw 12.5vh;
}

.b-studio {
  z-index: 3;
  color: var(--paper);
  background-color: var(--cobalt);
  background-image: linear-gradient(rgba(241,237,226,.17) 1px, transparent 1px), linear-gradient(90deg, rgba(241,237,226,.17) 1px, transparent 1px);
  background-size: 12.5vw 12.5vh;
  clip-path: inset(0 0 0 var(--split));
  will-change: clip-path;
}

.b-topline {
  position: absolute;
  z-index: 4;
  top: 27px;
  right: 205px;
  left: 3.2vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.b-topline span:nth-child(2) { text-align: center; }
.b-topline span:last-child { text-align: right; }

.b-bigmark {
  position: absolute;
  inset: 8vh 2vw 3vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--cobalt);
  font-size: min(59vw, 72vh);
  font-variation-settings: "wdth" var(--wdth), "wght" 870;
  letter-spacing: -0.17em;
  line-height: 0.7;
}

.b-studio .b-bigmark { color: var(--paper); }
.b-bigmark span:first-child { transform: translate(-0.06em, -0.04em); }
.b-bigmark span:last-child { transform: translate(0.01em, 0.08em); }

.b-name {
  position: absolute;
  z-index: 5;
  top: 19vh;
  left: 3.2vw;
  margin: 0;
  color: #11120f;
  font-size: clamp(4rem, 8.8vw, 10.5rem);
  font-variation-settings: "wdth" 68, "wght" 820;
  letter-spacing: -0.095em;
  line-height: 0.72;
}

.b-name span { display: block; }
.b-studio .b-name { color: var(--orange); }

.b-caption {
  position: absolute;
  right: 3.2vw;
  bottom: 8vh;
  margin: 0;
  font: 600 clamp(1rem, 1.75vw, 2rem)/0.95 var(--font-plex-mono), monospace;
  letter-spacing: -0.04em;
  text-align: right;
}

.b-fold {
  position: absolute;
  z-index: 15;
  top: 0;
  bottom: 88px;
  left: var(--split);
  width: 2px;
  color: #111;
  background: var(--orange);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25);
  pointer-events: none;
}

.b-fold span {
  position: absolute;
  top: 50%;
  left: 9px;
  padding: 8px 10px;
  color: #fff;
  background: var(--orange);
  font: 600 0.56rem/1 var(--font-plex-mono), monospace;
  letter-spacing: .05em;
  white-space: nowrap;
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
}

.concept-b .roles {
  z-index: 20;
  right: 3.2vw;
  top: 43%;
  padding: 10px 12px;
  color: #111;
  background: var(--paper);
}

.concept-b .microphrase {
  z-index: 20;
  left: 3.2vw;
  bottom: 105px;
  padding: 5px 7px;
  background: var(--paper);
}

.concept-b .contact-links {
  min-height: 88px;
  padding-top: 16px;
  color: #111;
  background: var(--paper);
}

.concept-b .contact-links > a:hover,
.concept-b .contact-links > a:focus-visible,
.concept-b .email-group:hover { color: var(--paper); background: var(--cobalt); }

/* C — Chroma / Night */
.concept-c {
  --page-bg: var(--night);
  --page-fg: #f1eddf;
  color: #f1eddf;
  background-color: var(--night);
  background-image: linear-gradient(90deg, transparent 49.92%, rgba(255,255,255,.11) 50%, transparent 50.08%), linear-gradient(transparent 49.9%, rgba(255,255,255,.08) 50%, transparent 50.1%);
}

.c-topline {
  position: absolute;
  z-index: 35;
  top: 27px;
  right: 205px;
  left: 3.2vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.c-topline span:nth-child(2) { text-align: center; }
.c-topline span:last-child { text-align: right; }

.c-hero { position: absolute; z-index: 5; inset: 6vh 0 13vh; }

.c-monogram {
  position: absolute;
  top: 48%;
  left: 50%;
  width: 93vw;
  height: 68vh;
  transform: translate(-50%, -50%);
}

.c-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: min(74vw, 84vh);
  font-variation-settings: "wdth" var(--wdth), "wght" 850;
  letter-spacing: -0.19em;
  line-height: 0.68;
  white-space: nowrap;
  will-change: transform;
}

.c-mark-cyan {
  color: var(--cyan);
  transform: translate(calc(-18px - var(--dx)), calc(0px - var(--dy)));
  mix-blend-mode: screen;
}

.c-mark-pink {
  color: var(--pink);
  transform: translate(calc(18px + var(--dx)), var(--dy));
  mix-blend-mode: screen;
}

.c-mark-core {
  color: transparent;
  -webkit-text-stroke: clamp(1px, .17vw, 3px) #f1eddf;
  transform: translate(var(--core-x), var(--core-y));
}

.c-orbit {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 50%;
  will-change: transform;
}

.c-orbit-one {
  top: 8%;
  left: 11%;
  width: min(34vw, 55vh);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(53,242,229,.12), transparent 67%);
  transform: translate(var(--orbit-x), var(--orbit-y));
}

.c-orbit-two {
  right: 7%;
  bottom: 5%;
  width: min(28vw, 45vh);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,61,128,.14), transparent 68%);
  transform: translate(calc(0px - var(--orbit-x-small)), calc(0px - var(--orbit-y-small)));
}

.c-dual-label {
  position: absolute;
  z-index: 6;
  margin: 0;
  padding: 7px 9px;
  font: 600 .62rem/1 var(--font-plex-mono), monospace;
  letter-spacing: .06em;
}

.c-dual-one { top: 21%; left: 17%; color: var(--night); background: var(--cyan); transform: translate(calc(0px - var(--label-x)), calc(0px - var(--label-y))); }
.c-dual-two { right: 13%; bottom: 25%; color: var(--night); background: var(--pink); transform: translate(var(--label-x), var(--label-y)); }

.c-name {
  position: absolute;
  z-index: 8;
  bottom: 6.8vh;
  left: 3.2vw;
  margin: 0;
  font-size: clamp(3.3rem, 7vw, 8rem);
  font-variation-settings: "wdth" 73, "wght" 800;
  letter-spacing: -.09em;
  line-height: .7;
}

.c-name span { display: block; }

.c-side-label {
  position: absolute;
  z-index: 20;
  top: 44%;
  right: -63px;
  transform: rotate(90deg);
}

.concept-c .roles { right: 4.8vw; top: 30%; color: var(--cyan); }
.concept-c .microphrase { left: 43%; bottom: 92px; }

.concept-c .contact-links > a:hover,
.concept-c .contact-links > a:focus-visible,
.concept-c .email-group:hover { color: var(--night); background: var(--cyan); }

/* Short entrance: one beat, then still */
@keyframes enter-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mark-in {
  from { opacity: 0; font-variation-settings: "wdth" 62, "wght" 700; }
  to { opacity: 1; }
}

@keyframes meet-benoit-breathe {
  0%, 34%, 100% { transform: scale(1); }
  9% { transform: scale(1.055); }
  18% { transform: scale(.985); }
  26% { transform: scale(1.025); }
}

@keyframes meet-benoit-ring {
  0% {
    opacity: .92;
    transform: scale(.96);
  }
  30% {
    opacity: 0;
    transform: scale(1.38);
  }
  31%, 100% {
    opacity: 0;
    transform: scale(1.38);
  }
}

.a-topline,
.b-topline,
.c-topline,
.a-profile,
.a-portals,
.a-prompt,
.roles,
.contact-links,
.microphrase,
.a-personal-note { animation: enter-up 560ms cubic-bezier(.2,.8,.2,1) both; }

.a-monogram-base,
.b-bigmark,
.c-monogram { animation: mark-in 720ms cubic-bezier(.15,.8,.2,1) both; }

.roles { animation-delay: 90ms; }
.a-profile { animation-delay: 70ms; }
.a-portals { animation-delay: 110ms; }
.a-prompt,
.microphrase,
.a-personal-note { animation-delay: 130ms; }
.contact-links { animation-delay: 170ms; }

@media (max-width: 860px) {
  .selector-header { grid-template-columns: 1fr; }
  .selector-meta { flex-direction: row; justify-content: space-between; text-align: left; }
  .selector-grid { grid-template-columns: 1fr; }
  .selector-card { min-height: 56svh; }
  .selector-card + .selector-card { border-top: 1px solid #4a4c47; border-left: 0; }
  .selector-mark { font-size: clamp(10rem, 55vw, 20rem); }

  .concept {
    height: auto;
    min-height: 100svh;
  }

  .concept-switcher {
    top: 16px;
    right: 16px;
  }

  .concept-switcher a { width: 26px; height: 26px; }
  .concept-switcher .concept-switcher-all { width: 38px; }

  .a-topline,
  .b-topline,
  .c-topline {
    top: 18px;
    right: 160px;
    left: 18px;
    display: block;
  }

  .a-topline span:not(:first-child),
  .b-topline span:not(:first-child),
  .c-topline span:not(:first-child) { display: none; }

  .concept-final .a-topline { right: 18px; }

  .contact-links {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 18px 16px;
  }

  .contact-links > a,
  .email-group { min-height: 40px; }

  .contact-links > a + .email-group,
  .email-group + a { margin-left: 0; }

  .copy-toast { right: 18px; bottom: 152px; }

  /* Mobile A is a clear vertical identity card with usable project links. */
  .concept-a {
    --lens-radius: 105px;
    display: grid;
    grid-template-rows: 52px minmax(380px, 50vh) auto auto auto auto 126px;
    gap: 15px;
    height: auto;
    min-height: 100svh;
    padding: 16px 18px;
    background-size: calc((100vw - 36px) / 4) 100%, calc((100vw - 36px) / 4) 100%;
    background-position: 18px 0;
  }

  .concept-a::after { background: none; }
  .concept-a .a-topline {
    position: static;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    align-self: start;
    font-size: .64rem;
    line-height: 1.1;
  }

  .concept-final .a-topline > span:first-child { grid-column: 1; grid-row: 1; }

  .concept-final .a-topline .a-topline-place {
    display: block;
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  .concept-final .a-topline .a-brussels-mark { display: none; }

  .concept-final .a-topline .a-topline-practice {
    display: block;
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: clamp(.54rem, 2.45vw, .64rem);
    letter-spacing: .05em;
    text-align: left;
    white-space: nowrap;
  }

  .a-topline-practice em { margin-left: .2em; }
  .a-hero { position: relative; inset: auto; min-height: 380px; }

  .concept-a .a-reveal,
  .concept-a .a-lens,
  .concept-a .a-prompt { display: none; }

  .a-monogram {
    top: 1%;
    left: -9vw;
    width: 112vw;
    height: 65%;
    font-size: min(90vw, 43vh);
    letter-spacing: -.18em;
  }

  .a-reveal { inset: 0; }

  .a-reveal-hero {
    top: 63px;
    right: 18px;
    bottom: auto;
    left: 18px;
    height: max(380px, 50vh);
  }

  .a-hidden-portrait {
    top: 46%;
    left: 38%;
    width: min(76vw, 350px);
  }

  .a-mobile-portrait {
    position: absolute;
    z-index: 6;
    top: 43%;
    left: 47%;
    display: block;
    width: min(72vw, 330px);
    aspect-ratio: 1;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-2deg) scale(.78);
    transform-origin: 78% 20%;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 260ms ease, transform 520ms cubic-bezier(.18,.86,.22,1), visibility 0s linear 520ms;
  }

  .a-hero.is-portrait-open .a-mobile-portrait {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-2deg) scale(1);
    visibility: visible;
    transition-delay: 0s;
  }

  .a-mobile-portrait-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid var(--bone);
    border-radius: 50%;
    background: var(--bone);
    box-shadow: 9px 9px 0 var(--acid);
  }

  .a-mobile-portrait-frame::after {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(7,16,15,.2);
    border-radius: inherit;
    content: "";
    pointer-events: none;
  }

  .a-mobile-portrait-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .a-mobile-portrait-toggle {
    position: absolute;
    z-index: 20;
    top: 10px;
    right: 0;
    display: grid;
    width: 90px;
    height: 90px;
    padding: 16px 12px;
    border: 1px solid rgba(207,255,63,.8);
    border-radius: 50%;
    color: var(--acid);
    background: rgba(7,16,15,.94);
    grid-template-rows: 1fr auto;
    justify-items: center;
    font: 600 .625rem/1.25 var(--font-plex-mono), monospace;
    letter-spacing: .055em;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
  }

  .a-mobile-portrait-toggle:not(.has-been-used) {
    animation: meet-benoit-breathe 2.2s cubic-bezier(.2,.75,.25,1) .7s infinite;
  }

  .a-mobile-portrait-signal {
    position: absolute;
    z-index: 0;
    inset: -1px;
    border: 2px solid var(--acid);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
  }

  .a-mobile-portrait-toggle:not(.has-been-used) .a-mobile-portrait-signal {
    animation: meet-benoit-ring 2.2s ease-out .7s infinite;
  }

  .a-mobile-portrait-toggle::before,
  .a-mobile-portrait-toggle::after {
    position: absolute;
    content: "";
    background: var(--acid);
    opacity: .7;
  }

  .a-mobile-portrait-toggle::before { top: 50%; right: -7px; left: -7px; height: 1px; }
  .a-mobile-portrait-toggle::after { top: -7px; bottom: -7px; left: 50%; width: 1px; }

  .a-mobile-portrait-toggle span,
  .a-mobile-portrait-toggle strong { position: relative; z-index: 1; }

  .a-mobile-portrait-toggle strong { font: 500 1rem/1 var(--font-plex-mono), monospace; }

  .a-mobile-portrait-toggle[aria-expanded="true"] {
    animation: none;
    color: var(--ink);
    background: var(--acid);
    transform: rotate(2deg);
  }

  .a-mobile-portrait-toggle[aria-expanded="true"]::before,
  .a-mobile-portrait-toggle[aria-expanded="true"]::after { background: var(--bone); }

  .a-secret-card {
    width: min(76vw, 310px);
    min-height: 185px;
    padding: 16px;
  }

  .a-secret-breez { top: 41%; left: 66%; }
  .a-secret-shadi { top: 26%; left: 31%; }
  .a-secret-card strong { font-size: clamp(2.25rem, 10vw, 3.25rem); }

  .a-lens {
    top: var(--my);
    width: calc(var(--lens-radius) * 2);
    height: calc(var(--lens-radius) * 2);
  }

  .a-name {
    bottom: 1%;
    left: 0;
    font-size: clamp(3.9rem, 19vw, 6.5rem);
    line-height: .73;
  }

  .a-portals {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    pointer-events: auto;
  }

  .a-portal {
    position: relative;
    top: auto;
    left: auto;
    display: grid;
    width: auto;
    height: auto;
    min-height: 94px;
    grid-template-columns: 30px 1fr 18px;
    gap: 8px;
    align-items: start;
    padding: 14px 12px;
    border-radius: 0;
    color: var(--bone);
    background: rgba(7,16,15,.94);
    place-items: initial;
    transform: none;
  }

  .a-portal::before,
  .a-portal::after { display: none; }

  .a-portal:hover,
  .a-portal:focus-visible,
  .a-active-breez .a-portal-breez,
  .a-active-shadi .a-portal-shadi {
    width: auto;
    height: auto;
    border-color: rgba(242,238,226,.64);
    color: var(--bone);
    background: rgba(7,16,15,.94);
    transform: none;
  }

  .a-portal-number { color: var(--acid); font-size: .75rem; }
  .a-portal-arrow { position: static; justify-self: end; font-size: .85rem; }

  .a-portal-label {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    color: inherit;
    background: none;
    white-space: normal;
    transform: none;
  }

  .a-portal-label > span { color: rgba(242,238,226,.72); font-size: .64rem; line-height: 1.35; }
  .a-portal-eyebrow em { margin-top: 5px; font-size: .58rem; line-height: 1.25; }
  .a-portal-label strong { display: block; font-size: .82rem; line-height: 1.3; }

  .a-profile {
    position: static;
    width: auto;
    padding: 18px 0 5px;
    background: transparent;
  }

  .a-profile-kicker { font-size: .7rem; }
  .a-profile-copy { max-width: 36ch; font-size: clamp(1.08rem, 4.7vw, 1.35rem); }
  .a-profile-services { font-size: .72rem; line-height: 1.1; }
  .a-profile-services li { grid-template-columns: 32px 1fr; padding: 12px 0; }

  .a-prompt {
    position: static;
    justify-self: start;
    margin: 0;
  }

  .concept-a .microphrase { position: static; align-self: center; font-size: .82rem; line-height: 1.35; }
  .concept-a .contact-links { position: static; padding: 0; }
  .concept-a .contact-links > a,
  .concept-a .email-group { font-size: .78rem; }
  .concept-a .email-group button { font-size: .66rem; }

  .a-mobile-microphrase { display: block; }

  .a-personal-note {
    position: static;
    display: flex;
    width: auto;
    min-height: 126px;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 0 5px;
  }

  .a-personal-note-label {
    display: block;
    margin-bottom: 13px;
    padding-bottom: 0;
    color: rgba(242,238,226,.58);
    font: 600 .63rem/1 var(--font-plex-mono), monospace;
    letter-spacing: .075em;
  }

  .a-personal-note p {
    margin: 0;
    font-size: clamp(1.48rem, 6.8vw, 2.05rem);
    font-variation-settings: "wdth" 78, "wght" 760;
    letter-spacing: -.055em;
    line-height: .92;
  }

  .a-personal-note p span,
  .a-personal-note p strong { display: block; }

  .a-personal-note p strong {
    margin-top: .15em;
    color: var(--acid);
    background: transparent;
    font-weight: 760;
  }

  .a-reveal .a-topline,
  .a-reveal .a-profile,
  .a-reveal .a-prompt,
  .a-reveal .microphrase,
  .a-reveal .contact-links { position: absolute; }

  .a-reveal .a-topline { top: 18px; right: 160px; left: 18px; }
  .a-reveal .a-profile { top: calc(63px + max(380px, 50vh) + 15px); right: 18px; left: 18px; }
  .a-reveal .a-prompt,
  .a-reveal .microphrase,
  .a-reveal .contact-links { display: none; }

  /* Mobile B keeps the fold, but uses a tall editorial composition. */
  .concept-b { height: 100svh; min-height: 640px; }
  .b-poster { bottom: 246px; }
  .b-bigmark { inset: 7vh -7vw 5vh; font-size: min(88vw, 47vh); align-items: start; padding-top: 11vh; }
  .b-name { top: 19%; left: 18px; font-size: clamp(4.2rem, 21vw, 7rem); }
  .b-caption { right: 18px; bottom: 24px; font-size: .9rem; }
  .b-fold { bottom: 246px; }
  .b-fold span { display: none; }
  .concept-b .roles { top: auto; right: 18px; bottom: 173px; padding: 0; text-align: right; }
  .concept-b .microphrase { right: 18px; bottom: 218px; left: 18px; padding: 0; }
  .concept-b .contact-links { min-height: 158px; padding-top: 0; }

  /* Mobile C becomes a centered chromatic emblem with a strong name block. */
  .concept-c {
    display: grid;
    grid-template-rows: 38px minmax(330px, 1fr) auto auto 126px;
    gap: 11px;
    padding: 16px 18px;
  }

  .concept-c .c-topline { position: static; }
  .c-hero { position: relative; inset: auto; min-height: 330px; }
  .c-monogram { top: 40%; width: 120vw; height: 52%; }
  .c-mark { font-size: min(97vw, 45vh); }
  .c-mark-cyan { transform: translate(calc(-9px - var(--dx)), calc(0px - var(--dy))); }
  .c-mark-pink { transform: translate(calc(9px + var(--dx)), var(--dy)); }
  .c-name { bottom: 0; left: 0; font-size: clamp(4.1rem, 21vw, 7rem); }
  .c-dual-one { top: 13%; left: 2%; }
  .c-dual-two { right: 0; bottom: 30%; }
  .c-orbit-one { top: 4%; left: -3%; width: 64vw; }
  .c-orbit-two { right: -7%; bottom: 9%; width: 56vw; }
  .c-side-label { display: none; }
  .concept-c .roles { position: static; color: var(--cyan); }
  .concept-c .microphrase { position: static; align-self: center; }
  .concept-c .contact-links { position: static; padding: 0; }
}

@media (max-width: 520px) {
  .selector-shell { padding: 18px; }
  .selector-header h1 { font-size: clamp(2.8rem, 14vw, 4.7rem); }
  .selector-meta { display: none; }
  .selector-card-bottom { grid-template-columns: 1fr; }
  .selector-footer { gap: 20px; }

  .concept-a { grid-template-rows: 52px minmax(350px, 47vh) auto auto auto auto 126px; }
  .concept-c { grid-template-rows: 32px minmax(300px, 1fr) auto auto 126px; }
  .a-hero { min-height: 350px; }
  .a-reveal-hero { height: max(350px, 47vh); }
  .c-hero { min-height: 300px; }
  .a-portals { grid-template-columns: 1fr; }
}

@media (max-width: 340px) {
  .concept-a { grid-template-rows: 68px minmax(350px, 47vh) auto auto auto auto 126px; }

  .concept-final .a-topline .a-topline-practice {
    font-size: .56rem;
    line-height: 1.5;
    white-space: normal;
  }

  .a-topline-practice em { margin-top: .28em; }
}

@media (max-height: 690px) and (min-width: 861px) {
  .a-name,
  .c-name { bottom: 9vh; font-size: 8.5vh; }
  .b-name { top: 17vh; font-size: 12vh; }
  .a-monogram,
  .c-mark { font-size: 75vh; }
  .concept-a .roles,
  .concept-c .roles,
  .concept-b .roles { top: 38%; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .a-reveal { clip-path: circle(var(--lens-radius) at 68% 42%); }
  .a-reveal-hero .a-monogram,
  .a-reveal .a-name-reveal,
  .a-topline-reveal,
  .a-profile-reveal,
  .a-personal-note-reveal,
  .a-reveal-contact {
    translate: 0 0;
    scale: 1;
  }
  .a-topline-reveal .a-topline-practice em { transform: rotate(-1.5deg); }
  .b-studio { clip-path: inset(0 0 0 56%); }
  .c-mark-cyan { transform: translateX(-18px); }
  .c-mark-pink { transform: translateX(18px); }
  .c-mark-core,
  .c-orbit,
  .c-dual-label { transform: none; }

  .a-mobile-portrait-toggle:not(.has-been-used) {
    border-color: var(--acid);
    box-shadow: 0 0 0 6px rgba(207,255,63,.2);
  }

  .a-mobile-portrait-signal { display: none; }
}