:root {
  --night: #090b1a;
  --night-2: #11142c;
  --blue: #202a58;
  --uv: #6d35ff;
  --violet: #ad83ff;
  --gold: #d99a45;
  --gold-light: #f2d19a;
  --moon: #f2ecff;
  --muted: #b7b3c7;
  --line: rgba(242, 236, 255, 0.16);
}

.hero-copy h1 { text-decoration: none; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; overflow-x: hidden; background: var(--night); color: var(--moon); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }
em { color: var(--violet); font-weight: 400; }
.section-shell { padding-inline: clamp(24px, 6vw, 110px); }

.site-header {
  position: sticky; z-index: 20; top: 0; min-height: 72px; padding: 0 clamp(24px, 5vw, 88px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px;
  background: rgba(9, 11, 26, 0.76); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px);
}
.brand { width: max-content; display: flex; flex-direction: column; line-height: .9; font-weight: 800; letter-spacing: -.035em; }
.brand span { font-size: 16px; }
.brand small { margin-top: 6px; color: var(--violet); font-size: 9px; letter-spacing: .42em; font-weight: 600; }
.site-header nav { display: flex; gap: 30px; font-size: 11px; }
.site-header nav a { position: relative; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px; background: var(--gold); transition: right .2s ease; }
.site-header nav a:hover::after { right: 0; }
.header-cta { justify-self: end; padding: 12px 17px; border: 1px solid rgba(242, 209, 154, .5); border-radius: 99px; font-size: 11px; }
.header-cta span { margin-left: 10px; color: var(--gold-light); }

.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; }
.section-index { margin: 0 0 24px; color: var(--gold-light); font-size: 9px; font-weight: 700; letter-spacing: .22em; }
.hero { position: relative; height: calc(100svh - 72px); overflow: hidden; background: #050714; }
.hero img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.hero-scroll { position: absolute; z-index: 3; left: clamp(24px, 5vw, 88px); bottom: 28px; padding: 11px 15px; color: rgba(242,236,255,.78); background: rgba(5,7,20,.55); border: 1px solid rgba(242,236,255,.25); border-radius: 99px; font-size: 9px; letter-spacing: .08em; backdrop-filter: blur(10px); }
.hero-scroll span { margin-left: 10px; color: var(--gold-light); }
.button { display: inline-flex; align-items: center; gap: 24px; padding: 15px 20px; border-radius: 99px; font-size: 11px; font-weight: 700; }

.eclipse { position: relative; width: 30px; height: 30px; overflow: hidden; border: 1px solid currentColor; border-radius: 50%; opacity: .28; transform: scale(.82); transition: opacity .2s, transform .2s; }
.eclipse-before { background: #17162a; box-shadow: inset 5px 0 0 var(--gold); }
.eclipse-before::after { content: ""; position: absolute; width: 27px; height: 27px; top: 1px; left: -4px; border-radius: 50%; background: #17162a; }
.eclipse-during { overflow: visible; background: #090b1a; border-color: var(--violet); box-shadow: 0 0 0 2px rgba(109,53,255,.16), 0 0 15px var(--uv); }
.eclipse-after { border-color: var(--gold); background: linear-gradient(110deg,var(--gold-light),var(--gold) 55%,#7d4b7d); }

.manifesto { min-height: calc(100svh - 72px); display: grid; grid-template-columns: .35fr 1fr; gap: 8vw; align-items: center; background: var(--moon); color: #17162a; }
.manifesto .section-index { color: #765422; align-self: start; margin-top: 17vh; }
.manifesto > div { max-width: 1000px; }
.manifesto h2, .section-heading h2, .method h2, .story h2, .contact h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 5.2vw, 80px); font-weight: 400; line-height: 1.02; letter-spacing: -.05em; }
.manifesto h2 em { color: #6c39dc; }
.manifesto > div > p { max-width: 680px; margin: 40px 0 0 22%; color: #565269; font-size: 16px; line-height: 1.7; }

.services { padding-block: 14vh; background: var(--night); }
.section-heading { display: grid; grid-template-columns: .35fr 1fr; gap: 8vw; margin-bottom: 8vh; }
.section-heading h2 { max-width: 850px; }
.service-list { border-top: 1px solid var(--line); }
.service-card { padding: 34px 0; display: grid; grid-template-columns: .12fr .42fr 1fr .6fr; gap: 30px; align-items: start; border-bottom: 1px solid var(--line); transition: background .25s, padding .25s; }
.service-card:hover { padding-inline: 18px; background: linear-gradient(90deg, rgba(109,53,255,.1), transparent); }
.service-number { color: var(--gold); font: 9px monospace; }
.service-card h3 { margin: 0; font-family: Georgia, serif; font-size: clamp(24px, 2.3vw, 38px); font-weight: 400; }
.service-card p { max-width: 600px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.service-card small { color: rgba(242,236,255,.5); font-size: 10px; line-height: 1.5; text-transform: uppercase; letter-spacing: .08em; }

.work { padding-block: 14vh; color: #17162a; background: #eee9f7; }
.work .section-index { color: #765422; }.work h2 em { color: #6c39dc; }
.work-heading { grid-template-columns: .25fr 1fr .45fr; }
.section-note { align-self: end; max-width: 320px; margin: 0; color: #656074; font-size: 12px; line-height: 1.55; }
.work-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 36px; }
.work-large { grid-row: span 2; }
.work-card { min-width: 0; }
.work-visual { position: relative; overflow: hidden; min-height: 330px; background: #222; }
.work-large .work-visual { min-height: 740px; }
.portrait-visual { background: radial-gradient(circle at 42% 29%, rgba(242,209,154,.85), transparent 9%), linear-gradient(145deg,#bf755e,#503856 48%,#17182d); }
.event-visual { background: linear-gradient(155deg,#13172f,#55327d 50%,#d18f4c); }
.edit-visual { background: linear-gradient(145deg,#202a58,#0d1023 55%,#6339bd); }
.placeholder-tag { position: absolute; z-index: 3; top: 18px; right: 18px; padding: 7px 9px; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.35); font-size: 7px; letter-spacing: .16em; }
.silhouette { position: absolute; width: 34%; height: 72%; bottom: -5%; left: 36%; border-radius: 48% 48% 7% 7%; background: #171827; box-shadow: 0 0 80px rgba(0,0,0,.45); }
.light-orb { position: absolute; width: 180px; height: 180px; top: 24%; left: 32%; border-radius: 50%; background: #eeb56a; box-shadow: 0 0 70px #d99a45; opacity: .7; }
.timeline-mark { position: absolute; left: 8%; right: 8%; bottom: 22%; height: 2px; background: linear-gradient(90deg,var(--gold),var(--violet)); box-shadow: 0 -35px 0 rgba(173,131,255,.2), 0 35px 0 rgba(217,154,69,.18); }
.work-caption { padding: 16px 2px 0; display: flex; justify-content: space-between; align-items: start; }
.work-caption p { margin: 0; display: flex; flex-direction: column; gap: 5px; }.work-caption strong { font-family: Georgia, serif; font-size: 20px; font-weight: 400; }.work-caption p span,.work-caption>span { color: #736e7f; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }

.method { padding-block: 14vh; display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; background: #101329; }
.method-intro { position: sticky; top: 130px; align-self: start; }
.method h2 em { color: var(--gold-light); }
.method-intro > p:last-child { max-width: 540px; margin: 35px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.steps { border-top: 1px solid var(--line); }
.step { padding: 34px 0; display: grid; grid-template-columns: 70px 1fr; border-bottom: 1px solid var(--line); }
.step > span { color: var(--gold); font: 9px monospace; }.step h3 { margin: 0 0 14px; font-family: Georgia, serif; font-size: 28px; font-weight: 400; }.step p { max-width: 560px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.story { position: relative; min-height: 76vh; padding-block: 14vh; display: grid; grid-template-columns: .8fr 1fr; gap: 12vw; align-items: center; color: #211f2c; background: #eee9f1; border-top: 1px solid #d8d1dc; }
.story::before { content: ""; position: absolute; top: 14vh; bottom: 14vh; left: clamp(24px, 6vw, 110px); width: 2px; background: linear-gradient(var(--gold), transparent); }
.story .section-index { color: #765422; }.story h2 { color: #211f2c; }.story-copy { max-width: 610px; padding-left: 42px; border-left: 1px solid #cec6d3; }
.story-copy p { margin: 0 0 22px; color: #5e5867; font-size: 14px; line-height: 1.7; }.story-copy .story-lead { color: #292431; font-family: Georgia, serif; font-size: clamp(23px,2.1vw,34px); line-height: 1.35; }.signature { padding-top: 16px; border-top: 1px solid #cec6d3; }.signature span { color: #765422; font-size: 11px; }
.story-emblem { display: block; width: min(380px,82%); height: auto; margin: clamp(30px,4.5vh,52px) 0 0; opacity: 1; transform: rotate(-1.4deg); transform-origin: 45% 55%; filter: saturate(.92) contrast(1.04); }

.contact { min-height: 76vh; padding-block: 14vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--night-2); border-top: 1px solid var(--line); }
.contact h2 { font-size: clamp(58px,7.3vw,110px); }.contact h2 em { color: var(--gold-light); }.contact>p:not(.section-index) { max-width: 620px; margin: 32px 0; color: var(--muted); font-size: 14px; line-height: 1.7; }.button-gold { color: #271a32; background: var(--gold-light); }.contact small { margin-top: 20px; color: rgba(242,236,255,.45); font-size: 9px; }

.horizontal-chapter { position: relative; }
.horizontal-sticky { position: sticky; z-index: 2; top: 72px; height: calc(100vh - 72px); overflow: hidden; background: var(--night); }
.interior-chapter { position: relative; height: 145vh; }
.interior-sticky { position: sticky; z-index: 2; top: 72px; height: calc(100vh - 72px); overflow: hidden; background: var(--moon); }
.interior-sticky .manifesto { height: calc(100% - 68px); min-height: 0; }
.chapter-bar { position: relative; height: 68px; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: clamp(16px,2vw,34px); color: var(--muted); background: rgba(7,8,21,.97); border-bottom: 1px solid var(--line); }
.chapter-bar strong { display: flex; align-items: center; gap: 12px; color: var(--gold-light); font: 9px monospace; letter-spacing: .16em; }
.chapter-bar strong .eclipse { flex: 0 0 auto; width: 22px; height: 22px; opacity: 1; transform: none; }
.chapter-bar strong .eclipse-before::after { width: 20px; height: 20px; }
.chapter-pagination { justify-self: end; }
.chapter-hint { justify-self: end; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.chapter-stages { position: relative; min-width: 0; display: flex; justify-content: center; gap: clamp(8px,1.4vw,24px); }
.chapter-stages > button { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: 1px solid rgba(244,199,124,.25); border-radius: 24px; background: rgba(242,236,255,.025); color: var(--muted); font: inherit; font-size: 12px; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.chapter-stages > button.active { color: var(--gold-light); border-color: rgba(244,199,124,.7); background: rgba(173,131,255,.1); box-shadow: inset 0 0 16px rgba(173,131,255,.06); }
.chapter-stages > button:hover { color: var(--night); background: var(--gold-light); border-color: var(--gold-light); }
.chapter-stages > button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -4px; color: var(--moon); background: rgba(173,131,255,.2); }
.chapter-controls { display: flex; gap: 7px; }
.chapter-controls button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: var(--moon); background: rgba(242,236,255,.035); border: 1px solid rgba(242,236,255,.22); border-radius: 50%; font: 400 20px/1 Arial,sans-serif; cursor: pointer; transition: color .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,opacity .2s ease,transform .2s ease; }
.chapter-controls button:hover,.chapter-controls button:focus-visible { color: var(--gold-light); background: rgba(242,236,255,.08); border-color: var(--gold); outline: none; }
.chapter-controls button:disabled { opacity: .24; cursor: default; }
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  /* Clip without creating a second scrollable viewport for native hash links. */
  .horizontal-chapter .horizontal-sticky,.horizontal-chapter .horizontal-panel { overflow: clip; }
}
@media (min-width: 821px) {
  .chapter-controls { position: absolute; z-index: 12; top: calc(50vh - 36px); left: 14px; right: 14px; justify-content: space-between; pointer-events: none; transform: translateY(-50%); }
  .chapter-controls button { width: 52px; height: 52px; color: var(--gold-light); background: radial-gradient(circle at 38% 32%,rgba(36,29,68,.94),rgba(7,8,21,.92) 72%); border-color: rgba(244,199,124,.68); box-shadow: 0 0 0 5px rgba(7,8,21,.28),0 10px 35px rgba(3,4,13,.48),inset 0 0 18px rgba(173,131,255,.09); pointer-events: auto; backdrop-filter: blur(8px); }
  .chapter-controls button:hover,.chapter-controls button:focus-visible { color: #171225; background: var(--gold-light); border-color: var(--gold-light); transform: scale(1.05); }
  .chapter-controls button:disabled { opacity: .16; transform: none; }
}
.horizontal-track { height: calc(100% - 68px); display: flex; will-change: transform; transition: transform .72s cubic-bezier(.22,.72,.18,1); }
.horizontal-panel { position: relative; flex: 0 0 auto; height: 100%; overflow: hidden; }
.horizontal-panel:not(:last-child)::before { content: none; display: none; }

/* Chaque panneau tient dans un écran : le groupe avance ensuite latéralement. */
.horizontal-panel > section { width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.horizontal-panel .services { padding-block: clamp(28px,4vh,52px); }
.horizontal-panel .section-heading { margin-bottom: clamp(22px,3vh,38px); }
.horizontal-panel .services .section-heading { grid-template-columns: .24fr 1fr; }
.horizontal-panel .services .section-heading h2 { font-size: clamp(35px,4.1vw,64px); }
.horizontal-panel .service-card { padding-block: clamp(17px,2.1vh,27px); }
.horizontal-panel .service-card h3 { font-size: clamp(21px,2vw,32px); }
.horizontal-panel .method { padding-block: clamp(30px,5vh,64px); align-items: start; }
.horizontal-panel .method-intro { position: static; }
.horizontal-panel .method h2 { font-size: clamp(35px,4vw,62px); }
.horizontal-panel .method-intro > p:last-child { margin-top: 24px; }
.horizontal-panel .step { padding-block: clamp(15px,2vh,25px); }
.horizontal-panel .step h3 { margin-bottom: 8px; font-size: clamp(20px,1.8vw,27px); }
.horizontal-panel .work { padding-block: clamp(24px,3vh,40px); }
.horizontal-panel .work .section-heading { margin-bottom: 22px; }
.horizontal-panel .work h2 { font-size: clamp(34px,3.6vw,58px); }
.horizontal-panel .work-grid { grid-template-columns: 1.15fr .85fr; gap: 22px; }
.horizontal-panel .work-visual { min-height: clamp(150px,22vh,240px); }
.horizontal-panel .work-large .work-visual { min-height: clamp(330px,49vh,520px); }
.horizontal-panel .work-caption { padding-top: 10px; }
.horizontal-panel .work-caption strong { font-size: 17px; }
.horizontal-panel .story { padding-block: clamp(42px,7vh,90px); }
.horizontal-panel .story::before { top: 7vh; bottom: 7vh; }
.horizontal-panel .story h2 { font-size: clamp(40px,4.7vw,72px); }
.horizontal-panel .story-copy p { margin-bottom: 15px; }
.horizontal-panel .story-copy .story-lead { font-size: clamp(20px,1.8vw,30px); }
.horizontal-panel .contact { padding-block: clamp(38px,6vh,72px); }
.horizontal-panel .contact h2 { font-size: clamp(54px,6.2vw,96px); }

.site-footer { min-height: 72px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-top: 1px solid var(--line); background: #070815; }.site-footer>p { justify-self: center; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; text-align: center; }.site-footer>div { justify-self: end; display: flex; align-items: center; gap: 16px; font-size: 10px; }.site-footer small { color: rgba(242,236,255,.42); }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }.site-header nav { display: none; }
  .manifesto { grid-template-columns: 1fr; gap: 60px; padding-block: 100px; }.manifesto .section-index { margin-top: 0; }.manifesto>div>p { margin-left: 0; }
  .service-card { grid-template-columns: 60px .55fr 1fr; }.service-card small { display: none; }
  .work-heading { grid-template-columns: 1fr; }.work-heading .section-index { margin: 0; }.section-note { align-self: auto; }
}

@media (max-width: 820px) {
  .site-header { min-height: 64px; }.header-cta { font-size: 9px; padding: 10px 12px; }.header-cta span { display: none; }
  .hero { height: auto; }
  .hero img { height: auto; object-fit: initial; }
  .hero-scroll { bottom: 12px; left: 12px; }
  .manifesto h2,.section-heading h2,.method h2,.story h2,.contact h2 { font-size: 46px; }.section-heading { grid-template-columns: 1fr; gap: 18px; }
  .interior-chapter { height: auto; }
  .interior-sticky { position: relative; top: auto; height: auto; overflow: visible; }
  .interior-sticky .manifesto { height: auto; min-height: calc(100svh - 136px); }
  .horizontal-chapter { height: auto !important; }
  .horizontal-sticky { position: relative; top: auto; height: auto; overflow: hidden; }
  .chapter-bar { height: auto; min-height: 72px; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; padding-block: 12px; }
  .chapter-stages { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .chapter-stages::-webkit-scrollbar { display: none; }
  .chapter-stages > button { min-height: 44px; padding-inline: 12px; font-size: 11px; }
  .chapter-hint { font-size: 0; }
  .chapter-hint { grid-column: 1; justify-self: start; }
  .chapter-hint::after { content: "Balayez horizontalement pour explorer →"; font-size: 8px; }
  .chapter-controls { position: static; grid-column: 3; grid-row: 1; justify-self: end; pointer-events: auto; transform: none; }
  .chapter-pagination { grid-column: 2; grid-row: 1; justify-self: end; }
  .chapter-controls button { width: 38px; height: 38px; }
  .horizontal-track { width: 100% !important; height: auto; overflow-x: auto; overflow-y: hidden; transform: none !important; transition: none; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-width: none; }
  .horizontal-track::-webkit-scrollbar { display: none; }
  .horizontal-panel { width: 88vw !important; height: auto; min-height: calc(100svh - 142px); overflow: visible; scroll-snap-align: start; scroll-snap-stop: always; }
  .horizontal-panel > section { height: auto; min-height: calc(100svh - 126px); overflow: visible; }
  .horizontal-panel .services,.horizontal-panel .method,.horizontal-panel .work,.horizontal-panel .story,.horizontal-panel .contact { padding-block: 58px; }
  .horizontal-panel .method,.horizontal-panel .story { grid-template-columns: 1fr; gap: 52px; }
  .horizontal-panel .method-intro { position: static; }
  .horizontal-panel .service-card { grid-template-columns: 40px 1fr; }
  .horizontal-panel .service-card p { grid-column: 2; }
  .horizontal-panel .work-grid { grid-template-columns: 1fr; }
  .horizontal-panel .work-large { grid-row: auto; }
  .horizontal-panel .work-large .work-visual,.horizontal-panel .work-visual { min-height: 54vw; }
  .horizontal-panel .story::before { display: none; }
  .horizontal-panel .story-copy { padding-left: 24px; }
  .horizontal-panel .contact h2 { font-size: clamp(48px,14vw,68px); }
  .site-footer { padding-block: 36px; grid-template-columns: 1fr; gap: 26px; text-align: center; }.site-footer .brand,.site-footer>p,.site-footer>div { justify-self: center; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .horizontal-chapter { height: auto !important; }
  .horizontal-sticky { position: static; height: auto; overflow: visible; }
  .horizontal-track { width: 100% !important; height: auto; display: block; transform: none !important; }
  .horizontal-panel { width: 100% !important; height: auto; overflow: visible; }
  .horizontal-panel > section { height: auto; min-height: 70vh; overflow: visible; }
}

/* Nouvelle structure éditoriale */
.hero::before { content: ""; position: absolute; z-index: 0; inset: -28px; background: linear-gradient(rgba(5,7,20,.24),rgba(5,7,20,.5)),url("/hero-background-v2.png") center/cover no-repeat; filter: blur(20px); transform: scale(1.05); }
.hero::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg,#050714 0%,rgba(5,7,20,.98) 34%,rgba(5,7,20,.74) 52%,transparent 73%); pointer-events: none; }
.hero img { position: relative; z-index: 1; opacity: .96; }
.hero-copy { position: absolute; z-index: 3; top: 50%; left: clamp(24px,6vw,100px); width: min(800px,53vw); transform: translateY(-50%); }
.hero-copy h1 { margin: 0; display: flex; flex-direction: column; width: max-content; color: var(--moon); font: 800 clamp(46px,5vw,82px)/.88 Arial,Helvetica,sans-serif; letter-spacing: -.055em; }
.hero-copy h1 small { margin-top: 13px; color: var(--violet); font-size: .25em; font-weight: 700; letter-spacing: .46em; }
.hero-copy > p { margin: clamp(34px,5.5vh,58px) 0 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(36px,3.65vw,60px); line-height: 1.04; letter-spacing: -.045em; }
.hero-copy > p em { color: var(--gold-light); }

.studio-panel { position: relative; overflow: hidden; grid-template-columns: .28fr 1fr; }
.studio-panel .section-index { position: relative; z-index: 2; }
.studio-statement { position: relative; z-index: 2; }
.studio-statement > p { max-width: 720px; margin: 36px 0 0 14%; color: #565269; font-size: 16px; line-height: 1.7; }
.studio-principles { max-width: 760px; margin: 42px 0 0 14%; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #d0cad9; border-bottom: 1px solid #d0cad9; }
.studio-principles span { min-height: 88px; padding: 24px 18px; display: flex; align-items: center; color: #413b4d; font-family: Georgia,serif; font-size: 16px; line-height: 1.25; }
.studio-principles span + span { border-left: 1px solid #d0cad9; }
.studio-orbit { position: absolute; z-index: 0; width: min(50vw,680px); aspect-ratio: 1; right: -13vw; top: 50%; border: 1px solid rgba(109,53,255,.2); border-radius: 50%; transform: translateY(-50%); }
.studio-orbit::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: #eee9f7; box-shadow: -28px 0 55px rgba(109,53,255,.22),inset 3px 0 0 rgba(217,154,69,.55); }
.studio-orbit i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 16px var(--gold); }
.studio-orbit i:nth-child(1) { transform: translate(-310px,-10px); }.studio-orbit i:nth-child(2) { transform: translate(-100px,-320px); }.studio-orbit i:nth-child(3) { transform: translate(210px,125px); }

.services-heading { grid-template-columns: .2fr 1fr .34fr; gap: 4vw; }
.services-heading .section-note { color: var(--muted); }
.services .service-list { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--line); }
.services .service-card { min-width: 0; min-height: clamp(245px,34vh,330px); padding: clamp(22px,3vw,38px); display: flex; flex-direction: column; gap: 20px; border: 0; transition: background .25s ease; }
.services .service-card + .service-card { border-left: 1px solid var(--line); }
.services .service-card:hover { padding-inline: clamp(22px,3vw,38px); background: linear-gradient(160deg,rgba(109,53,255,.13),rgba(217,154,69,.04)); }
.services .service-card h3 { font-size: clamp(19px,1.55vw,27px); line-height: 1.05; }
.services .service-card p { font-size: 12px; line-height: 1.58; }
.lunar-phase { position: relative; width: 34px; height: 34px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(242,236,255,.28); border-radius: 50%; background: var(--gold-light); box-shadow: 0 0 18px rgba(109,53,255,.12); }
.lunar-phase::after { content: ""; position: absolute; top: -1px; width: 34px; height: 34px; border-radius: 50%; background: var(--night); }
.lunar-new { background: var(--night); border-color: rgba(173,131,255,.55); }.lunar-new::after { display: none; }
.lunar-crescent::after { left: -6px; }.lunar-quarter::after { left: -17px; }.lunar-gibbous::after { left: -28px; }.lunar-full::after { display: none; }

.method .steps { position: relative; padding-left: 0; border: 0; }
.method .steps::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 8px; width: 1px; background: linear-gradient(180deg,#6d35ff 0%,#9c52ef 25%,#ca65ca 50%,#e98a9c 75%,#f2d19a 100%); }
.method .step { position: relative; padding: clamp(12px,1.7vh,21px) 0; display: grid; grid-template-columns: 42px 1fr; border: 0; }
.method .step > i { position: relative; z-index: 1; width: 17px; height: 17px; margin-top: 5px; border: 1px solid var(--violet); border-radius: 50%; background: var(--night-2); box-shadow: 0 0 0 5px var(--night-2); }
.method .step:nth-child(5) > i { border-color: var(--gold); background: var(--gold); }
.method .step h3 { margin: 0 0 6px; }
.method .step p { font-size: 12px; line-height: 1.5; }

.portfolio-panel { width: 100%; height: 100%; padding-block: clamp(38px,6vh,74px); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px,7vw,110px); align-items: center; color: #201e2a; background: #eee9f7; }
.portfolio-panel-video { color: var(--moon); background: #11142c; }
.portfolio-panel-video { padding-block: clamp(18px,3vh,34px); }
.portfolio-panel-hybrid { color: #211f2c; background: #e7e0eb; }
.portfolio-copy { max-width: 650px; }
.portfolio-copy .section-index { color: #765422; }
.portfolio-panel-video .section-index { color: var(--gold-light); }
.portfolio-copy h2 { margin: 0; font-family: Georgia,"Times New Roman",serif; font-size: clamp(40px,4.8vw,76px); font-weight: 400; line-height: 1.02; letter-spacing: -.05em; }
.portfolio-copy h2 em { color: #6c39dc; }.portfolio-panel-video .portfolio-copy h2 em { color: var(--gold-light); }
.portfolio-copy > p { max-width: 570px; margin: 27px 0; color: #5e5867; font-size: 14px; line-height: 1.65; }.portfolio-panel-video .portfolio-copy > p { color: var(--muted); }
.portfolio-copy ul { margin: 0 0 26px; padding: 0; list-style: none; border-top: 1px solid rgba(33,31,44,.18); }.portfolio-panel-video .portfolio-copy ul { border-color: var(--line); }
.portfolio-copy li { padding: 13px 0; border-bottom: 1px solid rgba(33,31,44,.18); font-family: Georgia,serif; font-size: 17px; }.portfolio-panel-video .portfolio-copy li { border-color: var(--line); }
.portfolio-copy small { color: #777080; font-size: 9px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }.portfolio-panel-video .portfolio-copy small { color: rgba(242,236,255,.45); }
.portfolio-link { display: inline-flex; gap: 24px; align-items: center; padding: 12px 17px; border: 1px solid rgba(33,31,44,.3); border-radius: 99px; font-size: 10px; }.portfolio-link span { color: #6c39dc; }
.portfolio-domain-wrap { min-width: 0; }
.portfolio-domain-carousel { --domain-card-size:min(72%,440px); width: 100%; height: min(61vh,610px); display: grid; grid-auto-flow: column; grid-auto-columns: var(--domain-card-size); gap: 14px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: none; box-shadow: 0 28px 70px rgba(12,10,24,.15); }
.portfolio-domain-card { position: relative; min-width: 0; overflow: hidden; scroll-snap-align: center; background: #17182d; color: var(--moon); }
.portfolio-domain-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(7,8,20,.94),rgba(7,8,20,.08) 62%); pointer-events: none; }
.portfolio-domain-card img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); transition: transform .55s ease,filter .55s ease; }
.portfolio-domain-card:hover img,.portfolio-domain-card:focus-visible img { transform: scale(1.025); filter: saturate(1); }
.portfolio-domain-card > span { position: absolute; z-index: 1; right: 22px; bottom: 24px; left: 22px; display: grid; gap: 6px; }
.portfolio-domain-card strong { font: 400 clamp(25px,2.5vw,39px)/.96 Georgia,serif; letter-spacing: -.035em; }
.portfolio-domain-card em { color: rgba(242,236,255,.7); font: normal 10px/1.45 Arial,sans-serif; }
.portfolio-carousel-hint { margin: 12px 0 0; display: flex; justify-content: space-between; color: #746d7b; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.portfolio-carousel-hint span { color: #6c39dc; }
.portfolio-video-showcase { min-width: 0; }
.portfolio-team-feature { min-height: 124px; padding: 20px 24px; display: grid; grid-template-columns: .62fr 1fr .7fr; gap: clamp(18px,3vw,42px); align-items: center; background: radial-gradient(circle at 18% 50%,rgba(109,53,255,.22),transparent 36%),#080a18; border: 1px solid rgba(173,131,255,.27); }
.portfolio-team-identity{display:grid;grid-template-columns:74px 1fr;gap:17px;align-items:center}.portfolio-team-identity img{display:block;width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 0 18px rgba(109,53,255,.35))}.portfolio-team-feature small,.portfolio-video-heading small { color: var(--gold-light); font-size: 7px; letter-spacing: .18em; }.portfolio-team-feature h3{margin:8px 0 0;font:700 clamp(25px,2.5vw,40px)/.86 Arial,sans-serif;letter-spacing:-.06em}.portfolio-team-feature h3 em{color:var(--violet);font-style:normal}.portfolio-team-feature>p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.portfolio-team-feature nav{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.portfolio-team-feature nav a{padding:11px 9px;border:1px solid rgba(242,236,255,.15);font-size:8px;text-align:center}.portfolio-team-feature nav span{margin-left:5px;color:var(--gold-light)}
.portfolio-video-heading{margin:13px 0 9px;display:flex;justify-content:space-between;align-items:end}.portfolio-video-heading p{margin:0;display:flex;flex-direction:column;gap:4px}.portfolio-video-heading strong{font:400 13px/1.2 Georgia,serif}.portfolio-video-controls{display:flex;gap:7px}.portfolio-video-controls button{width:34px;height:30px;color:var(--moon);background:transparent;border:1px solid rgba(242,236,255,.25);font-size:14px;cursor:pointer;transition:background .2s ease,border-color .2s ease}.portfolio-video-controls button:hover,.portfolio-video-controls button:focus-visible{background:rgba(109,53,255,.25);border-color:var(--violet)}
.portfolio-video-carousel { width: 100%; height: clamp(250px,34vh,300px); display: grid; grid-auto-flow: column; grid-auto-columns: min(23%,190px); gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; }
.portfolio-video-carousel::-webkit-scrollbar{display:none}
.portfolio-video-card { min-width: 0; padding: 7px; display: grid; grid-template-rows:minmax(0,1fr) auto; gap: 0; scroll-snap-align: start; background: #080a18; border: 1px solid rgba(242,236,255,.12); }
.portfolio-video-card iframe { display:block;width:100%;height:100%;min-height:0;border:0;background:#050610; }
.portfolio-video-card>div { min-height:58px;padding:10px 5px 4px;display:grid;grid-template-columns:1fr 28px;gap:8px;align-items:center; }
.portfolio-video-caption{min-width:0}.portfolio-video-card>div>a{width:28px;height:28px;padding:0;display:grid;place-items:center;border:1px solid rgba(242,236,255,.22);color:var(--gold-light)}
.portfolio-video-card small { color: var(--gold-light); font-size: 7px; letter-spacing: .14em; }
.portfolio-video-card h3 { margin:5px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 17px/1 Georgia,serif;letter-spacing:-.025em; }
.portfolio-visual { position: relative; width: 100%; height: min(61vh,610px); overflow: hidden; background: #252334; box-shadow: 0 28px 70px rgba(12,10,24,.18); }
.portfolio-photo { background: radial-gradient(circle at 40% 28%,rgba(242,209,154,.9),transparent 7%),linear-gradient(145deg,#c47c66,#4d3859 48%,#17182d); }
.portfolio-photo i:nth-of-type(1) { position:absolute;width:28%;height:70%;left:36%;bottom:-8%;border-radius:48% 48% 8% 8%;background:#171827;box-shadow:0 0 80px rgba(0,0,0,.5); }
.portfolio-photo i:nth-of-type(2) { position:absolute;width:150px;height:150px;right:9%;top:12%;border:1px solid rgba(242,209,154,.65);border-radius:50%; }
.portfolio-photo i:nth-of-type(3) { position:absolute;left:0;right:0;bottom:18%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.portfolio-video { background: linear-gradient(145deg,#202a58,#0b0d1c 55%,#6339bd); }
.portfolio-video i { position:absolute;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--gold),var(--violet)); }
.portfolio-video i:nth-of-type(1){bottom:30%;}.portfolio-video i:nth-of-type(2){bottom:46%;opacity:.52;}.portfolio-video i:nth-of-type(3){bottom:62%;opacity:.25;}
.portfolio-hybrid-editorial { align-self: stretch; padding: clamp(28px,4vw,58px); display: grid; grid-template-rows: auto 1fr auto; gap: clamp(24px,4vh,42px); border-left: 1px solid rgba(33,31,44,.18); background: linear-gradient(145deg,rgba(255,255,255,.2),rgba(109,53,255,.055)); }
.portfolio-hybrid-lead { max-width: 720px; margin: 0; font: 400 clamp(21px,2.2vw,34px)/1.25 Georgia,serif; letter-spacing: -.025em; }
.portfolio-hybrid-fields { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid rgba(33,31,44,.18); }
.portfolio-hybrid-fields article { padding: clamp(22px,3vw,38px) clamp(18px,2.4vw,32px); }
.portfolio-hybrid-fields article:first-child { padding-left: 0; }
.portfolio-hybrid-fields article + article { border-left: 1px solid rgba(33,31,44,.18); }
.portfolio-hybrid-fields small { color: #765422; font-size: 7px; letter-spacing: .17em; }
.portfolio-hybrid-fields h3 { margin: 18px 0 14px; font: 400 clamp(20px,1.7vw,27px)/1.08 Georgia,serif; letter-spacing: -.025em; }
.portfolio-hybrid-fields p,.portfolio-hybrid-note { margin: 0; color: #5e5867; font-size: 11px; line-height: 1.65; }
.portfolio-hybrid-projects { display: flex; flex-wrap: wrap; gap: 7px; }
.portfolio-hybrid-projects span { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 6px 11px; color: #312a3c; background: rgba(255,255,255,.48); border: 1px solid rgba(109,53,255,.18); border-radius: 999px; }
.portfolio-hybrid-projects small { color: #765422; font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-hybrid-projects strong { font-size: 9px; font-weight: 500; line-height: 1.3; }
.portfolio-hybrid-note { max-width: 680px; padding-left: 18px; border-left: 2px solid #6c39dc; }

@media (min-width: 821px) and (max-height: 760px) {
  .portfolio-panel-hybrid { padding-block: 18px; grid-template-columns: .68fr 1.32fr; gap: clamp(24px,4vw,58px); }
  .portfolio-panel-hybrid .portfolio-copy h2 { font-size: clamp(32px,4vw,56px); }
  .portfolio-panel-hybrid .portfolio-copy > p { margin-block: 16px; font-size: 11px; }
  .portfolio-hybrid-editorial { padding: clamp(18px,2.4vw,30px); gap: clamp(12px,2vh,22px); }
  .portfolio-hybrid-lead { font-size: clamp(18px,1.8vw,26px); }
  .portfolio-hybrid-fields article { padding: clamp(13px,1.8vw,22px) clamp(12px,1.5vw,20px); }
  .portfolio-hybrid-fields h3 { margin: 10px 0 8px; font-size: clamp(17px,1.45vw,22px); }
  .portfolio-hybrid-fields p,.portfolio-hybrid-note { font-size: 9.5px; line-height: 1.48; }
  .portfolio-hybrid-projects span { min-height: 26px; padding: 4px 8px; }
  .portfolio-hybrid-projects strong { font-size: 8px; }
}

.contact { min-height: calc(100svh - 72px); background: radial-gradient(circle at 50% 42%,rgba(109,53,255,.15),transparent 32%),var(--night-2); }
.contact::before { content: ""; width: 74px; height: 74px; margin-bottom: 28px; border: 1px solid var(--violet); border-radius: 50%; box-shadow: inset -15px 0 0 var(--night-2),0 0 26px rgba(109,53,255,.28); }
#seuil.contact { position: relative; overflow: hidden; }
#seuil.contact::before { content: none; display: none; }
#seuil .contactOrbit { position: absolute; z-index: 0; left: 50%; top: 50%; width: min(68vw,900px); aspect-ratio: 1; border: 1px solid rgba(173,131,255,.34); border-radius: 50%; box-shadow: 0 0 120px rgba(109,53,255,.18),inset -52px 0 0 rgba(217,154,69,.055); transform: translate(-50%,-50%); pointer-events: none; }
#seuil > :not(.contactOrbit) { position: relative; z-index: 1; }
.hls-contact-form{width:min(820px,100%);margin-top:12px;text-align:left}.hls-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.hls-contact-form label{display:grid;gap:8px}.hls-contact-form label>span{color:rgba(242,236,255,.72);font-size:10px;letter-spacing:.08em}.hls-contact-form input,.hls-contact-form select,.hls-contact-form textarea{width:100%;padding:14px 15px;color:var(--moon);background:rgba(7,9,22,.72);border:1px solid rgba(242,236,255,.2);border-radius:2px;font:inherit;line-height:1.4;outline:none}.hls-contact-form input:focus,.hls-contact-form select:focus,.hls-contact-form textarea:focus{border-color:var(--violet);box-shadow:0 0 0 2px rgba(173,131,255,.14)}.hls-contact-form select option{color:#171321;background:#f2ecff}.hls-form-message{margin-top:18px}.hls-form-consent{grid-template-columns:auto 1fr!important;align-items:start;margin:18px 0 22px}.hls-form-consent input{width:18px;height:18px;margin:1px 0 0}.hls-contact-form .button-gold{display:flex;width:max-content;min-width:230px;justify-content:space-between;border:0;cursor:pointer}.hls-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.hls-form-status{width:min(820px,100%);margin:0 0 18px!important;padding:14px 16px;border:1px solid}.hls-form-status.is-success{color:#d8ffe1;border-color:rgba(112,222,142,.55);background:rgba(40,130,70,.16)}.hls-form-status.is-error{color:#ffd8d8;border-color:rgba(235,100,100,.55);background:rgba(150,40,40,.16)}

@media (max-width: 1180px) and (min-width: 821px) {
  .services .service-card { padding: 22px 16px; }
  .services .service-card:hover { padding-inline: 16px; }
  .services .service-card h3 { font-size: 19px; }
  .services .service-card p { font-size: 11px; }
  .studio-principles { margin-left: 0; }
}

@media (max-width: 820px) {
  .hero { height: calc(100svh - 64px); min-height: 620px; }
  .hero::after { background: linear-gradient(90deg,#050714 0%,rgba(5,7,20,.94) 48%,rgba(5,7,20,.56) 72%,transparent 100%); }
  .hero img { height: 100%; object-fit: contain; opacity: .74; }
  .hero-copy { top: 46%; width: calc(100% - 48px); transform: translateY(-50%); }
  .hero-copy h1 { font-size: clamp(34px,10.5vw,48px); }
  .hero-copy > p { max-width: 380px; margin-top: 46px; font-size: clamp(34px,10vw,47px); }
  .studio-panel { grid-template-columns: 1fr; gap: 30px; padding-block: 58px; }
  .studio-panel .section-index { margin: 0; }
  .studio-statement > p,.studio-principles { margin-left: 0; }
  .studio-principles { grid-template-columns: 1fr; }
  .studio-principles span { min-height: 58px; }.studio-principles span + span { border-left: 0; border-top: 1px solid #d0cad9; }
  .studio-orbit { width: 520px; right: -390px; opacity: .55; }
  .services-heading { grid-template-columns: 1fr; }
  .services .service-list { grid-template-columns: 1fr; }
  .services .service-card { min-height: 0; display: grid; grid-template-columns: 44px 1fr; gap: 10px 16px; padding: 22px 0; }
  .services .service-card + .service-card { border-left: 0; border-top: 1px solid var(--line); }
  .services .service-card:hover { padding-inline: 0; }
  .services .service-card p { grid-column: 2; }
  .portfolio-panel { grid-template-columns: 1fr; gap: 36px; padding-block: 58px; }
  .portfolio-copy h2 { font-size: clamp(42px,12vw,62px); }
  .portfolio-visual { height: 58vw; min-height: 260px; }
  .contact { min-height: calc(100svh - 64px); }
}

/* Une constellation de savoir-faire, puis un chemin qui se déploie */
@media (min-width: 821px) {
  .horizontal-panel .services { padding-block: clamp(24px,3vh,42px); display: grid; grid-template-columns: minmax(290px,.62fr) minmax(660px,1.38fr); gap: clamp(26px,4vw,70px); align-items: center; }
  .services-heading { display: block; }
  .services-heading .section-index { margin-bottom: 22px; }
  .services-heading h2 { font-size: clamp(36px,3.7vw,58px); }
  .services-heading .section-note { max-width: 330px; margin-top: 28px; line-height: 1.6; }
  .services .service-list { position: relative; width: min(61vw,900px); height: min(67vh,620px); justify-self: end; display: block; border: 0; }
  .services .service-list::before,.services .service-list::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
  .services .service-list::before { inset: 6% 11%; border: 1px solid rgba(173,131,255,.27); box-shadow: 0 0 55px rgba(109,53,255,.08); }
  .services .service-list::after { inset: 18% 25%; border: 1px dashed rgba(217,154,69,.18); }
  .service-core { position: absolute; z-index: 1; left: 50%; top: 50%; width: 178px; height: 178px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(173,131,255,.5); border-radius: 50%; background: radial-gradient(circle at 38% 34%,rgba(109,53,255,.28),rgba(14,17,38,.96) 66%); box-shadow: 0 0 48px rgba(109,53,255,.22),inset -10px 0 28px rgba(0,0,0,.32); transform: translate(-50%,-50%); text-align: center; }
  .service-core span { color: var(--gold-light); font-size: 9px; letter-spacing: .18em; }
  .service-core strong { margin-top: 8px; font: 400 24px/1.02 Georgia,serif; }
  .services .service-card { position: absolute; z-index: 2; width: clamp(190px,15vw,238px); min-height: 0; padding: 15px 16px; display: grid; grid-template-columns: 38px 1fr; gap: 5px 12px; border: 1px solid rgba(242,236,255,.12); background: rgba(14,17,38,.88); backdrop-filter: blur(8px); }
  .services .service-card + .service-card { border-left: 1px solid rgba(242,236,255,.12); }
  .services .service-card:hover { padding: 15px 16px; border-color: rgba(173,131,255,.5); }
  .services .service-card h3 { align-self: center; margin: 0; font-size: clamp(16px,1.18vw,20px); }
  .services .service-card p { grid-column: 1 / -1; margin: 7px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.42; }
  .services .service-card:nth-of-type(1) { top: 0; left: 50%; transform: translateX(-50%); }
  .services .service-card:nth-of-type(2) { top: 21%; right: 0; }
  .services .service-card:nth-of-type(3) { right: 12%; bottom: 0; }
  .services .service-card:nth-of-type(4) { left: 12%; bottom: 0; }
  .services .service-card:nth-of-type(5) { top: 21%; left: 0; }

  .horizontal-panel .method { grid-template-columns: minmax(300px,.48fr) minmax(720px,1.52fr); gap: clamp(36px,5vw,90px); align-items: center; }
  .method-intro > p:last-child { max-width: 390px; }
  .method .steps { min-height: min(61vh,550px); display: grid; grid-template-columns: repeat(5,minmax(125px,1fr)); align-items: stretch; }
  .method .steps::before { top: 50%; right: 2%; bottom: auto; left: 2%; width: auto; height: 1px; background: linear-gradient(90deg,#6d35ff 0%,#9c52ef 25%,#ca65ca 50%,#e98a9c 75%,#f2d19a 100%); }
  .method .step { position: relative; height: 100%; padding: 0 12px; display: block; text-align: center; }
  .method .step > i { position: absolute; z-index: 2; top: 50%; left: 50%; margin: 0; transform: translate(-50%,-50%); box-shadow: 0 0 0 8px var(--night-2),0 0 24px rgba(109,53,255,.28); }
  .method .step > div { position: absolute; left: 0; width: 100%; padding: 0 12px; }
  .method .step:nth-child(odd) > div { bottom: calc(50% + 38px); }
  .method .step:nth-child(even) > div { top: calc(50% + 38px); }
  .method .step h3 { font-size: clamp(18px,1.45vw,25px); }
  .method .step p { margin-inline: auto; max-width: 190px; font-size: 11px; line-height: 1.48; }
}

@media (max-width: 820px) {
  .service-core { display: none; }
  .services .service-list::before,.services .service-list::after { display: none; }
  .method .steps { display: block; min-height: 0; }
}

.hls-page-transition { position: fixed; z-index: 9999; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%,#171230 0,#050714 72%); will-change: opacity; }

@media (prefers-reduced-motion: reduce) {
  .hls-page-transition { display: none; }
}

/* Responsive : chaque écran reçoit une composition dédiée. */
@media (min-width: 821px) and (max-width: 1200px) {
  .section-shell { padding-inline: clamp(34px,4vw,54px); }
  .horizontal-panel .services { grid-template-columns: minmax(230px,.48fr) minmax(0,1.52fr); gap: 20px; }
  .services-heading h2 { font-size: clamp(32px,3.8vw,45px); }
  .services-heading .section-note { margin-top: 20px; font-size: 11px; }
  .services .service-list { width: 100%; height: min(62vh,540px); }
  .services .service-card { width: clamp(150px,17vw,190px); padding: 11px 12px; grid-template-columns: 30px 1fr; gap: 4px 8px; }
  .services .service-card:hover { padding: 11px 12px; }
  .services .service-card h3 { font-size: clamp(14px,1.55vw,17px); }
  .services .service-card p { font-size: 9px; }
  .lunar-phase { width: 28px; height: 28px; }
  .lunar-phase::after { width: 28px; height: 28px; }
  .service-core { width: 138px; height: 138px; }
  .service-core strong { font-size: 20px; }
  .horizontal-panel .method { grid-template-columns: minmax(230px,.42fr) minmax(0,1.58fr); gap: 26px; }
  .method .steps { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .method .step { padding-inline: 5px; }
  .method .step > div { padding-inline: 4px; }
  .method .step p { font-size: 9.5px; }
  .method .step h3 { font-size: 18px; }
  .portfolio-panel { grid-template-columns: .9fr 1.1fr; gap: 38px; }
  .portfolio-copy h2 { font-size: clamp(36px,4.5vw,54px); }
  .portfolio-visual { height: min(54vh,500px); }
  .portfolio-domain-carousel { --domain-card-size:min(76%,390px); height: min(54vh,500px); }
  .portfolio-team-feature{grid-template-columns:.68fr 1fr}.portfolio-team-feature nav{grid-column:1/-1}.portfolio-video-carousel{height:clamp(250px,34vh,300px);grid-auto-columns:min(31%,190px)}
}

@media (max-width: 820px) {
  .site-header { padding-inline: 18px; gap: 14px; }
  .brand span { font-size: 14px; }
  .header-cta { max-width: 154px; text-align: center; line-height: 1.2; }
  .section-shell { padding-inline: clamp(20px,6vw,34px); }
  .chapter-bar { position: sticky; z-index: 8; top: 0; padding-inline: 18px; }
  .chapter-bar strong { min-width: 0; white-space: normal; line-height: 1.4; }
  .horizontal-panel { width: 100vw !important; min-height: 0; }
  .horizontal-panel > section { min-height: calc(100svh - 136px); }
  .manifesto h2,.section-heading h2,.method h2,.story h2,.contact h2 { font-size: clamp(37px,10.7vw,52px); }
  .studio-panel,.horizontal-panel .services,.horizontal-panel .method,.horizontal-panel .story { padding-block: clamp(46px,8vh,74px); }
  .studio-statement > p { font-size: 14px; line-height: 1.62; }
  .studio-principles { margin-top: 30px; }
  .studio-orbit { width: min(112vw,520px); right: -82vw; }
  .services-heading { margin-bottom: 34px; }
  .services .service-card { padding-block: 18px; }
  .services .service-card h3 { font-size: clamp(18px,5.2vw,23px); }
  .services .service-card p { font-size: 11px; line-height: 1.5; }
  .horizontal-panel .method { gap: 38px; }
  .method-intro > p:last-child { font-size: 12px; line-height: 1.6; }
  .method .step { padding-block: 15px; }
  .method .step p { font-size: 11px; }
  .story { grid-template-columns: 1fr; }
  .story-copy { padding-left: 20px; }
  .story-emblem { width: min(290px,76vw); margin: 26px auto 0; transform: rotate(-1deg); }
  .story-copy p { font-size: 12px; }
  .story-copy .story-lead { font-size: clamp(21px,6vw,29px); }
  .portfolio-panel { min-height: calc(100svh - 136px); gap: clamp(28px,6vh,46px); padding-block: clamp(42px,7vh,66px); }
  .portfolio-copy h2 { font-size: clamp(35px,10.2vw,50px); }
  .portfolio-copy > p { margin-block: 20px; font-size: 12px; }
  .portfolio-copy li { padding-block: 10px; font-size: 15px; }
  .portfolio-visual { width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; box-shadow: 0 18px 44px rgba(12,10,24,.2); }
  .portfolio-domain-carousel { --domain-card-size:min(86%,390px); height: min(64vh,520px); min-height: 360px; box-shadow: 0 18px 44px rgba(12,10,24,.2); }
  .portfolio-domain-card > span { right: 17px; bottom: 19px; left: 17px; }
  .portfolio-domain-card strong { font-size: clamp(27px,8vw,38px); }
  .portfolio-team-feature{min-height:0;padding:18px;grid-template-columns:1fr;gap:14px}.portfolio-team-identity{grid-template-columns:66px 1fr}.portfolio-team-identity img{width:66px;height:66px}.portfolio-team-feature h3{font-size:34px}.portfolio-team-feature nav{grid-column:auto}.portfolio-team-feature>p{font-size:10px}.portfolio-video-heading{margin-top:18px}.portfolio-video-carousel{height:min(49vh,370px);min-height:310px;grid-auto-columns:min(58%,210px)}
  .portfolio-photo i:nth-of-type(2) { width: 28vw; height: 28vw; max-width: 120px; max-height: 120px; }
  .portfolio-hybrid-editorial { padding: 26px 22px; border-top: 1px solid rgba(33,31,44,.18); border-left: 0; }
  .portfolio-hybrid-fields { grid-template-columns: 1fr; }
  .portfolio-hybrid-fields article,.portfolio-hybrid-fields article:first-child { padding: 20px 0; }
  .portfolio-hybrid-fields article + article { border-top: 1px solid rgba(33,31,44,.18); border-left: 0; }
  .portfolio-hybrid-projects { gap: 6px; }
  .portfolio-hybrid-projects span { width: 100%; justify-content: space-between; border-radius: 3px; }
  .contact { min-height: calc(100svh - 64px); padding-block: 70px; }
  .contact > p:not(.section-index) { font-size: 13px; }
  #seuil .contactOrbit { top: 46%; width: min(118vw,600px); opacity: .78; }
  .hls-form-grid{grid-template-columns:1fr}.hls-contact-form{margin-top:0}.hls-contact-form .button-gold{width:100%}
  .site-footer { min-height: 64px; padding-block: 28px; gap: 20px; }
}

@media (max-width: 820px) and (orientation: portrait) {
  .hero { height: max(720px,calc(100svh - 64px)); min-height: 720px; }
  .hero::before { inset: -18px; background-position: 72% 76%; filter: blur(18px); opacity: .72; }
  .hero::after { background: linear-gradient(180deg,#050714 0%,rgba(5,7,20,.98) 38%,rgba(5,7,20,.52) 58%,rgba(5,7,20,.18) 78%,rgba(5,7,20,.5) 100%); }
  .hero img { position: absolute; width: 155vw; max-width: none; height: auto; right: 0; bottom: 0; object-fit: contain; object-position: center; opacity: .98; }
  .hero-copy { top: clamp(74px,10vh,105px); left: 24px; width: calc(100% - 48px); transform: none; }
  .hero-copy h1 { max-width: 100%; font-size: clamp(34px,10.2vw,46px); }
  .hero-copy > p { max-width: 390px; margin-top: clamp(34px,5vh,46px); font-size: clamp(32px,9.4vw,43px); }
  .hero-scroll { left: 18px; bottom: 16px; }
}

@media (max-width: 820px) and (orientation: landscape) {
  .hero { height: calc(100svh - 64px); min-height: 430px; }
  .hero img { width: 100%; height: 100%; object-fit: contain; opacity: .9; }
  .hero-copy { top: 50%; width: 54vw; transform: translateY(-50%); }
  .hero-copy h1 { font-size: clamp(30px,6vw,42px); }
  .hero-copy > p { margin-top: 28px; font-size: clamp(27px,5.3vw,38px); }
}

@media (max-width: 420px) {
  .header-cta { max-width: 132px; padding-inline: 10px; font-size: 8px; }
  .brand span { font-size: 13px; }
  .chapter-stages { max-width: 100%; }
  .hero-copy h1 { font-size: clamp(32px,9.8vw,40px); }
  .hero-copy > p { font-size: clamp(30px,9.2vw,38px); }
  .button { gap: 14px; padding: 14px 17px; }
}

/* Art direction de l’accueil : aucune image floutée. */
.hero::before { display: none; }
.hero-art { display: contents; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 54%; }

@media (min-width: 821px) {
  .hero img { object-fit: contain; object-position: right center; }
}

@media (max-width: 820px) and (orientation: portrait) {
  .hero { height: max(720px,calc(100svh - 64px)); background: #050714; }
  .hero::after { background: radial-gradient(ellipse at 53% 42%,rgba(5,7,20,.22) 0 24%,transparent 48%),linear-gradient(180deg,rgba(5,7,20,.18),transparent 72%,rgba(5,7,20,.16)); }
  .hero img { inset: 0; width: 100%; height: 100%; right: auto; bottom: auto; object-fit: cover; object-position: center; opacity: 1; }
  .hero-copy { top: 31%; left: 12%; width: 76%; transform: none; text-align: center; }
  .hero-copy h1 { width: 100%; align-items: center; font-size: clamp(29px,8.4vw,37px); text-shadow: 0 2px 18px rgba(5,7,20,.65); }
  .hero-copy h1 small { margin-left: .46em; }
  .hero-copy > p { max-width: 100%; margin-top: clamp(27px,4vh,38px); font-size: clamp(28px,8.1vw,35px); line-height: 1.02; text-shadow: 0 2px 20px rgba(5,7,20,.78); }
}

@media (max-width: 380px) and (orientation: portrait) {
  .hero-copy { top: 30%; left: 10%; width: 80%; }
  .hero-copy h1 { font-size: 28px; }
  .hero-copy > p { font-size: 27px; }
}

/* Passe de lisibilité et de navigation. */
.hero-scroll{padding:14px 20px;color:var(--moon);background:rgba(8,10,27,.84);border-color:rgba(242,209,154,.72);box-shadow:0 10px 34px rgba(0,0,0,.32),0 0 24px rgba(217,154,69,.12);font-size:11px;font-weight:700;letter-spacing:.06em}
.story-title{padding-left:clamp(16px,2vw,34px)}.story-emblem{margin-left:auto;margin-right:auto}
.method .steps::before{left:11px}.method .step{grid-template-columns:48px 1fr}.method .step>i{width:24px;height:24px;margin-top:2px;overflow:hidden;border-color:var(--phase-color);background:var(--phase-color);box-shadow:0 0 0 5px var(--night-2),0 0 18px color-mix(in srgb,var(--phase-color) 45%,transparent)}.method .step>i::after{position:absolute;inset:-1px;content:"";border-radius:50%;background:var(--night-2);transform:translateX(var(--phase-mask,0))}.method .step:nth-child(1)>i{--phase-color:#6d35ff}.method .step:nth-child(1)>i::after{inset:3px;transform:none}.method .step:nth-child(2)>i{--phase-color:#9c52ef;--phase-mask:-5px}.method .step:nth-child(3)>i{--phase-color:#ca65ca;--phase-mask:-12px}.method .step:nth-child(4)>i{--phase-color:#e98a9c;--phase-mask:-19px}.method .step:nth-child(5)>i{--phase-color:#f2d19a}.method .step:nth-child(5)>i::after{display:none}
.portfolio-domain-carousel{scrollbar-width:none}.portfolio-domain-carousel::-webkit-scrollbar{display:none}.hls-scroll-dots{margin-top:10px;display:flex;justify-content:center;align-items:center;gap:0}.hls-scroll-dots button{--dot-color:#6d35ff;position:relative;width:28px;height:28px;padding:0;border:0;border-radius:99px;background:transparent;cursor:pointer;transition:width .2s ease}.hls-scroll-dots button::before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:99px;background:color-mix(in srgb,var(--dot-color) 40%,#c7bfce);box-shadow:0 0 0 0 transparent;transform:translate(-50%,-50%);transition:width .2s ease,background .2s ease,box-shadow .2s ease}.hls-scroll-dots button.is-active{width:40px}.hls-scroll-dots button.is-active::before{width:26px;background:var(--dot-color);box-shadow:0 0 14px color-mix(in srgb,var(--dot-color) 55%,transparent)}.hls-scroll-dots button:focus-visible{outline:2px solid #6d35ff;outline-offset:1px}.chapter-pagination{margin-top:0}
.portfolio-video-card h3{display:none}.portfolio-video-card>div{min-height:46px}.portfolio-video-caption{display:flex;align-items:center}
.portfolio-hybrid-fields small{font-size:10px;font-weight:700;line-height:1.45}.portfolio-hybrid-fields h3{font-size:clamp(22px,1.9vw,31px)}.portfolio-hybrid-projects{gap:10px}.portfolio-hybrid-projects span{min-height:40px;padding:9px 15px;gap:10px}.portfolio-hybrid-projects small{font-size:9px}.portfolio-hybrid-projects strong{font-size:11px}
@media(max-width:820px){.story-title{padding-left:0}.hero-scroll{left:18px;bottom:18px}.portfolio-hybrid-fields small{font-size:10px}.portfolio-hybrid-projects span{min-height:38px}}

/* Light homepage chapters: retain content/crops, remove stretched empty rows. */
.portfolio-panel-photo .portfolio-link,
.portfolio-panel-hybrid .portfolio-link {
  min-height: 48px; padding: 14px 23px; gap: 26px;
  color: #5425ae; border-color: rgba(89,47,155,.6);
  font-size: clamp(13px,.9vw,17px);
  transition: background .2s ease, border-color .2s ease;
}
.portfolio-panel-photo .portfolio-link:hover,
.portfolio-panel-photo .portfolio-link:focus-visible,
.portfolio-panel-hybrid .portfolio-link:hover,
.portfolio-panel-hybrid .portfolio-link:focus-visible {
  background: rgba(109,53,255,.065); border-color: #6c39dc;
}
.portfolio-panel-hybrid .portfolio-hybrid-editorial {
  align-self: center; grid-template-rows: none; grid-auto-rows: auto;
  gap: clamp(18px,2.5vh,30px); padding: clamp(22px,2.4vw,42px);
  min-width: 0;
}
.portfolio-panel-hybrid .portfolio-hybrid-fields { align-items: start; }
.portfolio-panel-hybrid .portfolio-hybrid-fields article {
  min-width: 0; padding: 24px 20px; overflow-wrap: anywhere;
}
.portfolio-panel-hybrid .portfolio-hybrid-fields article:first-child { padding-left: 0; }
.portfolio-panel-hybrid .portfolio-hybrid-fields article:last-child { padding-right: 0; }
.portfolio-panel-hybrid .portfolio-hybrid-fields h3 {
  font-size: clamp(23px,1.7vw,31px); line-height: 1.15; margin: 12px 0;
}
.portfolio-panel-hybrid .portfolio-hybrid-fields p,
.portfolio-panel-hybrid .portfolio-hybrid-note {
  font-size: clamp(13px,.85vw,16px); line-height: 1.65;
}
.portfolio-panel-hybrid .portfolio-hybrid-fields small { font-size: clamp(10px,.65vw,13px); line-height: 1.6; }
.portfolio-panel-hybrid .portfolio-hybrid-projects span {
  max-width: 100%; min-height: 42px; padding: 10px 14px; flex-wrap: wrap;
}
.portfolio-panel-hybrid .portfolio-hybrid-projects strong { font-size: clamp(12px,.8vw,15px); overflow-wrap: anywhere; }
.portfolio-panel-hybrid .portfolio-hybrid-projects small { font-size: clamp(10px,.65vw,12px); }
.portfolio-panel-photo .portfolio-domain-card em { font-size: clamp(12px,.8vw,15px); line-height: 1.5; }
@media (min-width: 821px) {
  .portfolio-panel-photo,.portfolio-panel-hybrid {
    grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr);
    gap: clamp(32px,4.5vw,86px);
  }
}
@media (min-width: 821px) and (max-width: 1200px) {
  .portfolio-panel-hybrid { grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 26px; }
  .portfolio-panel-hybrid .portfolio-hybrid-editorial { padding: 20px; gap: 16px; }
  .portfolio-panel-hybrid .portfolio-hybrid-fields article { padding: 18px 12px; }
  .portfolio-panel-hybrid .portfolio-hybrid-fields h3 { font-size: 22px; }
}
@media (min-width: 821px) and (max-height: 760px) {
  .portfolio-panel-hybrid .portfolio-hybrid-editorial { padding: 18px 22px; gap: 12px; }
  .portfolio-panel-hybrid .portfolio-hybrid-fields article { padding-block: 14px; }
  .portfolio-panel-hybrid .portfolio-hybrid-fields h3 { font-size: 22px; margin-block: 8px; }
  .portfolio-panel-hybrid .portfolio-hybrid-fields p,
  .portfolio-panel-hybrid .portfolio-hybrid-note { font-size: 12px; line-height: 1.5; }
  .portfolio-panel-hybrid .portfolio-hybrid-projects span { min-height: 34px; padding: 6px 10px; }
}
@media (max-width: 820px) {
  .portfolio-panel-hybrid .portfolio-hybrid-editorial { padding: 24px 20px; }
  .portfolio-panel-hybrid .portfolio-hybrid-fields article,
  .portfolio-panel-hybrid .portfolio-hybrid-fields article:first-child,
  .portfolio-panel-hybrid .portfolio-hybrid-fields article:last-child { padding: 20px 0; }
  .portfolio-panel-hybrid .portfolio-hybrid-fields p,
  .portfolio-panel-hybrid .portfolio-hybrid-note { font-size: 14px; }
}

.portfolio-panel-hybrid .portfolio-hybrid-fields-expanded { grid-template-columns: repeat(2,minmax(0,1fr)); }
.portfolio-panel-hybrid .portfolio-hybrid-fields-expanded article { padding: 18px 20px; }
.portfolio-panel-hybrid .portfolio-hybrid-fields-expanded article:nth-child(odd) { padding-left: 0; border-left: 0; }
.portfolio-panel-hybrid .portfolio-hybrid-fields-expanded article:nth-child(even) { padding-right: 0; }
.portfolio-panel-hybrid .portfolio-hybrid-fields-expanded article:nth-child(n+3) { border-top: 1px solid rgba(33,31,44,.18); }
.portfolio-panel-hybrid .portfolio-hybrid-fields-expanded h3 { margin-block: 9px; font-size: clamp(22px,1.55vw,29px); }
.portfolio-panel-hybrid .portfolio-hybrid-support { padding-left: 18px; border-left: 2px solid rgba(109,53,255,.4); }
.portfolio-hybrid-project-label { margin: 0 0 12px; color: #765422; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }
.portfolio-hybrid-projects > a { display: inline-flex; align-items: center; gap: 14px; max-width: 100%; padding: 10px 16px; border: 1px solid rgba(109,53,255,.25); border-radius: 999px; background: rgba(255,255,255,.48); color: #312a3c; }
.portfolio-hybrid-projects > a:hover,.portfolio-hybrid-projects > a:focus-visible { border-color: #6c39dc; background: rgba(255,255,255,.8); }
.portfolio-hybrid-projects > a i { font-style: normal; color: #6c39dc; }
@media (min-width:1201px) and (max-height:850px) {
  .portfolio-panel-hybrid .portfolio-hybrid-fields-expanded { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .portfolio-panel-hybrid .portfolio-hybrid-fields-expanded article { padding: 14px 12px; border-top: 0; }
  .portfolio-panel-hybrid .portfolio-hybrid-fields-expanded article+article { border-left: 1px solid rgba(33,31,44,.18); }
  .portfolio-panel-hybrid .portfolio-hybrid-fields-expanded article:first-child { padding-left: 0; }
  .portfolio-panel-hybrid .portfolio-hybrid-fields-expanded h3 { font-size: 21px; }
}
@media (min-width:821px) {
  .horizontal-panel > .portfolio-panel-hybrid { overflow-y: auto; overscroll-behavior-inline: contain; }
}
@media (max-width:820px) {
  .portfolio-panel-hybrid .portfolio-hybrid-fields-expanded { grid-template-columns: 1fr; }
  .portfolio-panel-hybrid .portfolio-hybrid-fields-expanded article { padding: 20px 0; border-left: 0; }
  .portfolio-panel-hybrid .portfolio-hybrid-fields-expanded article+article { border-top: 1px solid rgba(33,31,44,.18); }
}

@media (min-width:821px) {
  .portfolio-panel-photo { padding-block: clamp(22px,3vh,40px); }
  .portfolio-panel-hybrid { padding-block: clamp(20px,3vh,36px); }
  .portfolio-panel-hybrid .portfolio-hybrid-editorial { padding: 24px 28px; gap: 20px; }
  .portfolio-panel-hybrid .portfolio-hybrid-lead { font-size: clamp(23px,1.7vw,30px); }
  .horizontal-panel > .portfolio-panel-photo { overflow-y: auto; }
}
@media (min-width:821px) and (max-height:850px) {
  .portfolio-panel-photo .portfolio-copy h2 { font-size: clamp(36px,3.8vw,54px); }
  .portfolio-panel-photo .portfolio-copy > p { margin-block: 16px; }
  .portfolio-panel-photo .portfolio-copy li { padding-block: 10px; }
  .portfolio-panel-photo .portfolio-copy ul { margin-bottom: 18px; }
  .portfolio-panel-photo .portfolio-domain-carousel { height: min(55vh,520px); }
  .portfolio-panel-hybrid .portfolio-hybrid-editorial { padding: 18px 20px; gap: 14px; }
  .portfolio-panel-hybrid .portfolio-hybrid-lead { font-size: 23px; }
  .portfolio-panel-hybrid .portfolio-hybrid-fields p,.portfolio-panel-hybrid .portfolio-hybrid-note { font-size: 12px; line-height: 1.5; }
  .portfolio-panel-hybrid .portfolio-hybrid-fields-expanded article { padding-block: 12px; }
}

/* Approved photography refinement: complete cards and aligned captions. */
.portfolio-panel-photo .portfolio-domain-carousel { gap: 18px; box-shadow: 0 12px 26px rgba(35,23,50,.09); }
.portfolio-panel-photo .portfolio-domain-card { scroll-snap-align: start; }
.portfolio-panel-photo .portfolio-domain-card img { filter: saturate(.9); }
.portfolio-panel-photo .portfolio-domain-card::after { background: linear-gradient(0deg,rgba(7,8,20,.9),rgba(7,8,20,.38) 21%,transparent 48%); }
.portfolio-panel-photo .portfolio-domain-card > span { left: 23px; right: 21px; bottom: 26px; gap: 12px; }
.portfolio-panel-photo .portfolio-domain-card strong { font-size: clamp(27px,1.8vw,39px); line-height: 1.1; letter-spacing: -.035em; }
.portfolio-panel-photo .portfolio-domain-card em { font-size: clamp(13px,.8vw,16px); line-height: 1.5; min-height: 3em; color: #e4deea; }
.portfolio-panel-photo .portfolio-link { border-color: #7854ac; background: rgba(255,255,255,.25); padding: 16px 23px; }
.portfolio-panel-photo .portfolio-carousel-dots { margin-top: 18px; flex-wrap: wrap; }
.portfolio-panel-photo .portfolio-carousel-dots[hidden] { display: none; }
@media (min-width: 821px) {
  .portfolio-panel-photo { grid-template-columns: minmax(0,.76fr) minmax(0,1.24fr); gap: clamp(36px,4.2vw,80px); }
  .portfolio-panel-photo .portfolio-copy { max-width: 620px; }
  .portfolio-panel-photo .portfolio-copy h2 { font-size: clamp(40px,3.25vw,72px); line-height: 1.08; letter-spacing: -.045em; }
  .portfolio-panel-photo .portfolio-copy > p { margin-block: 22px; }
  .portfolio-panel-photo .portfolio-copy ul { margin-bottom: 28px; }
  .portfolio-panel-photo .portfolio-domain-carousel { grid-auto-columns: calc((100% - 36px) / 3); height: min(57vh,650px); }
}
@media (min-width: 821px) and (max-width: 1200px) {
  .portfolio-panel-photo .portfolio-domain-carousel { grid-auto-columns: calc((100% - 18px) / 2); }
}
@media (min-width: 821px) and (max-height: 850px) {
  .portfolio-panel-photo .portfolio-copy h2 { font-size: clamp(36px,3.25vw,54px); }
  .portfolio-panel-photo .portfolio-copy > p { margin-block: 16px; }
  .portfolio-panel-photo .portfolio-copy ul { margin-bottom: 18px; }
  .portfolio-panel-photo .portfolio-domain-carousel { height: min(55vh,520px); }
}
@media (max-width: 820px) {
  .portfolio-panel-photo .portfolio-domain-card > span { left: 20px; right: 20px; bottom: 24px; }
  .portfolio-panel-photo .portfolio-carousel-dots button { min-width: 40px; height: 40px; }
}

/* Homepage video chapter: approved compact team panel, full-width examples. */
.portfolio-panel-video .portfolio-link {
  min-height: 48px; padding: 14px 23px; gap: 26px;
  color: var(--gold-light); border-color: rgba(242,209,154,.7); font-size: clamp(13px,.9vw,17px);
  transition: background .2s ease, border-color .2s ease;
}
.portfolio-panel-video .portfolio-link span { color: inherit; }
.portfolio-panel-video .portfolio-link:hover,
.portfolio-panel-video .portfolio-link:focus-visible { background: rgba(242,209,154,.09); border-color: var(--gold-light); }
.portfolio-panel-video .portfolio-team-feature {
  min-height: 0; padding: clamp(16px,1.3vw,26px);
  grid-template-columns: minmax(190px,.9fr) minmax(0,1.2fr) max-content;
  gap: clamp(14px,1.5vw,28px); align-items: center;
}
.portfolio-panel-video .portfolio-team-identity { grid-template-columns: auto minmax(0,1fr); gap: 14px; min-width: 0; }
.portfolio-team-identity:not(:has(img)) { grid-template-columns: 1fr; }
.portfolio-panel-video .portfolio-team-identity img { width: clamp(48px,4vw,74px); height: clamp(48px,4vw,74px); }
.portfolio-panel-video .portfolio-team-feature h3 { font-size: clamp(24px,1.8vw,36px); line-height: 1; margin-top: 7px; }
.portfolio-panel-video .portfolio-team-feature small { font-size: clamp(10px,.65vw,13px); line-height: 1.5; }
.portfolio-panel-video .portfolio-team-feature > p { font-size: clamp(12px,.82vw,16px); line-height: 1.6; }
.portfolio-panel-video .portfolio-team-feature nav { grid-column: auto; grid-template-columns: 1fr; gap: 6px; }
.portfolio-panel-video .portfolio-team-feature nav:empty { display: none; }
.portfolio-panel-video .portfolio-team-feature:not(:has(nav a)) { grid-template-columns: minmax(190px,.9fr) minmax(0,1.2fr); }
.portfolio-panel-video .portfolio-team-feature nav a { display: flex; justify-content: space-between; gap: 14px; padding: 9px 12px; font-size: clamp(11px,.75vw,14px); color: var(--gold-light); }
.portfolio-panel-video .portfolio-video-heading { margin: 20px 0 13px; }
.portfolio-panel-video .portfolio-video-heading strong { font-size: clamp(16px,1.2vw,23px); line-height: 1.3; }
.portfolio-panel-video .portfolio-video-heading small { font-size: clamp(10px,.65vw,13px); line-height: 1.5; }
.portfolio-panel-video .portfolio-video-carousel {
  grid-auto-columns: calc((100% - 36px) / 4);
  height: clamp(240px,37vh,470px); min-height: 0;
}
.portfolio-panel-video .portfolio-video-card small { font-size: clamp(9px,.6vw,12px); }
.portfolio-video-dots { flex-wrap: wrap; }
.portfolio-video-dots[hidden] { display: none; }
@media (min-width: 821px) {
  .portfolio-panel-video { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(32px,4.5vw,86px); }
}
@media (min-width: 821px) and (max-width: 1200px) {
  .portfolio-panel-video .portfolio-team-feature { grid-template-columns: minmax(0,1fr) max-content; }
  .portfolio-panel-video .portfolio-team-feature > p { grid-column: 1; }
  .portfolio-panel-video .portfolio-team-feature nav { grid-column: 2; grid-row: 1 / 3; }
  .portfolio-panel-video .portfolio-video-carousel { grid-auto-columns: calc((100% - 24px) / 3); }
}
@media (min-width: 821px) and (max-height: 760px) {
  .portfolio-panel-video .portfolio-video-carousel { height: clamp(190px,34vh,260px); }
  .portfolio-panel-video .portfolio-video-heading { margin: 12px 0 8px; }
  .portfolio-panel-video .portfolio-team-feature { padding: 12px 16px; }
}
@media (max-width: 820px) {
  .portfolio-panel-video .portfolio-team-feature { grid-template-columns: minmax(0,1fr); gap: 14px; padding: 18px; }
  .portfolio-panel-video .portfolio-team-feature:not(:has(nav a)) { grid-template-columns: 1fr; }
  .portfolio-panel-video .portfolio-team-feature nav { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .portfolio-panel-video .portfolio-team-feature nav a { min-height: 44px; justify-content: center; gap: 4px; padding: 9px 5px; }
  .portfolio-panel-video .portfolio-team-feature nav span { margin: 0; }
  .portfolio-panel-video .portfolio-team-feature > p { font-size: 14px; }
  .portfolio-panel-video .portfolio-team-feature h3 { font-size: 30px; }
  .portfolio-panel-video .portfolio-video-carousel { grid-auto-columns: min(72%,230px); height: 390px; }
  .portfolio-video-dots button { min-width: 40px; height: 40px; }
}