/* ─────────────────────────────────────────
   JN STUDIO — Home page styles
   Layered on top of base.css.
   ───────────────────────────────────────── */

/* ─────────────────────────────────────────
   1. HERO — close-up matière
   ───────────────────────────────────────── */
.hero{
  position:relative;
  height: 100dvh; min-height: 640px;
  width:100%;
  overflow:hidden;
  background: var(--bleu-nuit);
  color: var(--creme);
}

.hero .location{
  position:absolute; top:32px; left:50%; transform: translateX(-50%);
  z-index:2;
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.32em; text-transform:uppercase;
  color: rgba(242,235,217,.7);
  white-space:nowrap;
  text-align:center; line-height:1.7;
  padding-top: 52px;
}
.hero .location::before{
  content:""; position:absolute; top:0; left:50%;
  width:1px; height:38px; background: var(--or);
  transform: translateX(-50%);
  opacity:.85;
}
.hero .bg{
  position:absolute; inset:0;
  background: #020306 url('../assets/hero/banner-padded.webp') center center / cover no-repeat;
  transform: scale(1);
  animation: heroBreath 14s ease-in-out infinite alternate;
}
.hero .bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,15,44,.3) 0%, rgba(6,15,44,.05) 30%, rgba(6,15,44,.05) 55%, rgba(6,15,44,.7) 100%);
}
@keyframes heroBreath {
  from{ transform: scale(1); }
  to  { transform: scale(1.03); }
}

.hero .types{
  position:absolute; left:50%; bottom:48px; transform: translateX(-50%);
  display:flex; align-items:center; gap:18px;
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color: rgba(242,235,217,.75);
  z-index:2;
  white-space:nowrap;
}
.hero .types span{ display:inline-block; }
.hero .types .dot{ width:3px; height:3px; border-radius:50%; background: var(--or); }

.hero .frame{
  position:absolute; inset:0;
  padding: 0 40px 56px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.hero .stage{ max-width: 920px; }
.hero .meta-top{
  position:absolute; top:38%; left:40px;
  display:flex; flex-direction:column; gap:10px;
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color: rgba(242,235,217,.65);
}
.hero .meta-top .gold-rule{ width:48px; background: var(--or); }
.hero h1.display{
  font-size: clamp(56px, 8.2vw, 132px);
  line-height: .92;
  color: var(--creme);
  margin: 0 0 26px;
  max-width: 14ch;
  font-weight:300;
}
.hero h1.display em{ font-style:italic; color: var(--or); }
.hero .sig{
  width: 240px; height:auto;
  filter: invert(1) brightness(2.2);
  margin-bottom: 8px;
}
.hero .hero-foot{
  margin-top:24px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
}
.hero .scroll-cue{
  display:flex; align-items:center; gap:14px;
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color: rgba(242,235,217,.7);
}
.hero .scroll-cue .ru{ width:42px; height:1px; background: var(--or); animation: scrollPulse 2.4s ease-in-out infinite; transform-origin: left center; }
@keyframes scrollPulse {
  0%, 100%{ transform: scaleX(.4); opacity:.5; }
  50%     { transform: scaleX(1);  opacity:1; }
}
.hero .side-spec{
  display:flex; gap:36px; align-items:flex-end;
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(242,235,217,.55);
}
.hero .side-spec b{ display:block; color: var(--creme); margin-bottom:6px; font-weight:500; letter-spacing:.04em; text-transform:none; font-family:"DM Sans", sans-serif; font-size:13px; }

/* ─────────────────────────────────────────
   2. ABOUT — portrait + texte
   ───────────────────────────────────────── */
section.section{
  padding: 80px 40px;
  position:relative;
}
section.section .section-head{
  display:flex; align-items:center; gap:24px;
  margin-bottom: 38px;
}
section.section .section-head .gold-rule{ flex:1 1 auto; }
section.section h2.section-title{
  font-family:"Cormorant Garamond", serif;
  font-weight:300; font-style:italic;
  font-size: clamp(40px, 5vw, 72px);
  line-height:1; letter-spacing:-.01em;
  margin:0;
}
section.section h2.section-title .accent{ color: var(--or); font-style:italic; }

.about{
  display:grid; grid-template-columns: .85fr 1fr; gap: 80px;
  align-items:flex-start;
  max-width: 1480px; margin: 0 auto;
}
.about .portrait{
  position:relative;
  aspect-ratio: 4/5;
  max-width: 420px;
  background: url('../assets/portrait/2502 - JULIETTE NASS STUDIO_DEF1-44.webp') center 18%/cover no-repeat;
  background-color: var(--creme-soft);
}
.about .portrait .caption{
  position:absolute; left:24px; bottom:-32px;
  background: var(--creme);
  padding: 14px 18px;
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--gris);
}
.about .portrait .caption b{
  display:block; color: var(--noir);
  font-family:"Cormorant Garamond", serif;
  font-style:italic; font-weight:400;
  font-size:18px; letter-spacing:0; text-transform:none;
  margin-bottom:3px;
}
.about .content{
  padding-top: 20px;
  max-width: 540px;
}
.about .content .eyebrow{ margin-bottom:18px; }
.about .content h2{
  font-family:"Cormorant Garamond", serif;
  font-weight:300;
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1.08;
  letter-spacing:-.005em;
  margin: 0 0 18px;
}
.about .content h2 em{ font-style:italic; color: var(--noir-soft); }
.about .content .gold-rule{ width:56px; margin-bottom:22px; }
  .about .content p{
    font-size: 17px; line-height: 1.6;
    color: var(--gris); margin: 0 0 16px;
    max-width: 44ch;
  }
.about .content p strong{ color: var(--noir); font-weight:500; }
.about .content p .story-link{
  color: var(--noir);
  text-decoration: none;
  font-style: italic;
  font-family:"Cormorant Garamond", serif;
  font-size: 1.18em;
  letter-spacing: .005em;
  border-bottom: 1px solid var(--or);
  padding-bottom: 1px;
  transition: color .35s ease, border-color .35s ease;
  white-space: nowrap;
}
.about .content p .story-link:hover{ color: var(--or); border-color: var(--noir-soft); }
.about .content .cta-row{ margin-top: 22px; display:flex; gap:32px; align-items:center; }
.about .content .signature-mark{
  height: 64px; width:auto; opacity:.85;
  margin-top: 20px;
}

/* ─────────────────────────────────────────
   3. DERNIÈRES PIÈCES — slider horizontal
   ───────────────────────────────────────── */
.recent{
  padding: 52px 0;
  background: var(--creme-alt);
  border-top: 1px solid rgba(184,146,84,.18);
  border-bottom: 1px solid rgba(184,146,84,.18);
}
.recent .head{
  padding: 0 40px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:48px; margin-bottom:28px;
  max-width: 1640px; margin-left:auto; margin-right:auto;
}
.recent .head .left .eyebrow{ margin-bottom:14px; }
.recent .head h2{
  font-family:"Cormorant Garamond", serif;
  font-weight:300; font-style:italic;
  font-size: clamp(48px, 6vw, 88px);
  line-height:.95; letter-spacing:-.01em;
  margin:0;
}
.recent .head h2 em{ color: var(--or); font-style:italic; }
.recent .head .right{ text-align:right; max-width: 32ch; padding-bottom:12px; }
.recent .head .right p{
  font-size: 14.5px; line-height: 1.55; color: var(--gris);
  margin: 0 0 14px;
}

.slider{
  padding-left: max(40px, calc((100vw - 1640px) / 2 + 40px));
  scroll-padding-left: max(40px, calc((100vw - 1640px) / 2 + 40px));
  display:flex; gap: 36px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slider::-webkit-scrollbar{ display:none; }
.slider::after{ content:""; flex: 0 0 max(40px, calc((100vw - 1640px) / 2 + 40px)); }
.slide{
  flex: 0 0 380px;
  scroll-snap-align: start;
  position:relative;
  text-decoration:none; color: inherit;
}
.slide .img{
  aspect-ratio: 4/4.4;
  background-color: var(--creme-soft);
  background-size: cover; background-position: center;
  position:relative; overflow:hidden;
  transition: filter .5s var(--ease);
}
.slide .img::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(6,15,44,.55));
  opacity:0; transition: opacity .4s var(--ease);
}
.slide:hover .img::after{ opacity:1; }
.slide:hover .img{ filter: contrast(1.05) brightness(1.02); }
.slide .meta{
  margin-top: 22px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
}
.slide .meta .t{
  font-family:"Cormorant Garamond", serif;
  font-style:italic; font-weight:400;
  font-size: 22px; line-height:1.15; margin:0 0 8px;
}
.slide .meta .spec{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color: var(--gris-l); display:block;
}
.slide .meta .idx{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px; letter-spacing:.16em; color: var(--or);
  flex-shrink:0;
}

.slider-controls{
  padding: 26px 40px 0;
  max-width: 1640px; margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.slider-controls .progress{
  flex:1 1 auto; height:1px; background: rgba(22,21,19,.12);
  position:relative; margin-right:24px;
}
.slider-controls .progress .bar{
  position:absolute; top:0; left:0; height:1px;
  background: var(--or); width: 30%;
  transition: width .4s var(--ease), left .4s var(--ease);
}
.slider-controls .ctrls{ display:flex; gap:12px; }
.slider-controls button{
  width:48px; height:48px; border-radius:50%;
  background: transparent; border:1px solid var(--or);
  color: var(--noir); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.slider-controls button:hover{ background: var(--or); color: var(--creme); }
.slider-controls button svg{ width:16px; height:16px; }
.slider-controls .count{
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.18em; color: var(--gris-l);
  min-width: 80px; text-align:right;
}
.slider-controls .count b{ color: var(--noir); font-weight:500; }

/* ─────────────────────────────────────────
   4. PROCESSUS + ORACLE
   ───────────────────────────────────────── */
#oracle{ background: var(--creme-alt); }
.process{
  padding: 56px 40px;
  display:grid; grid-template-columns: 1.1fr .9fr;
  gap: 64px; align-items:center;
  max-width: 1480px; margin: 0 auto;
}
.process{ grid-template-columns: 1fr 1.08fr; }
.process .left .eyebrow{ margin-bottom:18px; }
.process .left h2.display{
  font-size: clamp(44px, 4.6vw, 72px);
  line-height:.95;
  margin: 0 0 22px;
  font-style:italic;
  max-width: 14ch;
}
.process .left h2.display em{ font-style:normal; color: var(--or); }
.process .left .gold-rule{ width:56px; margin-bottom:22px; }
.process .left p{
  font-size: 17px; line-height: 1.6;
  color: var(--gris); margin: 0 0 16px;
  max-width: 46ch;
}
.process .cta-stack{ margin-top: 28px; display:flex; flex-direction:column; gap: 16px; align-items:flex-start; }
.process .cta-stack .small{
  font-family:"JetBrains Mono", monospace;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--gris-l);
}
.process .cta-stack .small b{ color: var(--or); font-weight:400; }

.process .right{
  position:relative;
  aspect-ratio: 5/4;
  max-height: 540px;
  background: var(--bleu-nuit);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.process .right::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(31,63,168,.55), transparent 70%),
    radial-gradient(40% 40% at 80% 80%, rgba(184,146,84,.25), transparent 70%);
}
.process .right::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(184,146,84,.06) 0 1px, transparent 1px 22px);
  opacity:.5;
}
.process .right .oracle-spread{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:cover;
}
.oracle-card{
  position:relative;
  width: 38%; aspect-ratio: 2/3;
  background: linear-gradient(160deg, #0b1740, #060f2c 60%, #050b22);
  border: 1px solid rgba(184,146,84,.35);
  display:flex; flex-direction:column;
  padding: 0;
  overflow: hidden;
  color: var(--creme);
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.6),
    0 0 0 1px rgba(184,146,84,.08);
  z-index:1;
  transform: rotate(-3deg);
  transition: transform .8s var(--ease);
}
.oracle-card:hover{ transform: rotate(-1deg) translateY(-6px); }
.oracle-card .card-back{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.oracle-card .corner-tl, .oracle-card .corner-br{
  position:absolute; width:30px; height:30px;
}
.oracle-card .corner-tl{ top:14px; left:14px; }
.oracle-card .corner-tl::before, .oracle-card .corner-tl::after,
.oracle-card .corner-br::before, .oracle-card .corner-br::after{
  content:""; position:absolute; background: var(--or);
}
.oracle-card .corner-tl::before{ left:0; top:0; width:1px; height:18px; }
.oracle-card .corner-tl::after { left:0; top:0; width:18px; height:1px; }
.oracle-card .corner-br{ bottom:14px; right:14px; }
.oracle-card .corner-br::before{ right:0; bottom:0; width:1px; height:18px; }
.oracle-card .corner-br::after { right:0; bottom:0; width:18px; height:1px; }
.oracle-card .top{
  font-family:"JetBrains Mono", monospace;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color: var(--or); opacity:.85;
}
.oracle-card .glyph{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  margin: 18px 0;
}
.oracle-card .glyph svg{ width: 60%; height:auto; opacity:.85; }
.oracle-card .label{
  text-align:center;
  font-family:"Cormorant Garamond", serif;
  font-style:italic; font-weight:300;
  font-size: 22px; line-height:1.1;
  color: var(--creme);
  margin: 0 0 6px;
}
.oracle-card .sub{
  text-align:center;
  font-family:"JetBrains Mono", monospace;
  font-size:9.5px; letter-spacing:.28em; text-transform:uppercase;
  color: rgba(242,235,217,.55);
}
.process .right .floating-card{
  position:absolute;
  width: 26%; aspect-ratio: 2/3;
  bottom: 12%; left: 14%;
  background: var(--noir);
  border:1px solid rgba(184,146,84,.22);
  transform: rotate(8deg);
  box-shadow: 0 20px 40px -15px rgba(0,0,0,.6);
  opacity:.6;
  z-index:0;
}

/* ─────────────────────────────────────────
   5. ATELIER — full bleed
   ───────────────────────────────────────── */
.atelier{
  position:relative;
  min-height: 60vh;
  background: var(--bleu-nuit) url('../assets/atelier/juliette-atelier.webp') center 30% / cover no-repeat;
  color: var(--creme);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.atelier::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(95deg, rgba(6,15,44,.78) 0%, rgba(6,15,44,.55) 35%, rgba(6,15,44,.15) 65%, rgba(6,15,44,.5) 100%),
    linear-gradient(180deg, rgba(6,15,44,.35) 0%, transparent 25%, transparent 60%, rgba(6,15,44,.55) 100%);
}
.atelier::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(50% 60% at 80% 30%, rgba(184,146,84,.12), transparent 70%);
}
.atelier .inner{
  position:relative; z-index:1;
  padding: 64px 40px;
  display:block;
  width:100%; max-width: 1640px; margin: 0 auto;
}
.atelier .eyebrow{ color: rgba(242,235,217,.65); margin-bottom:18px; }
.atelier .eyebrow .num{ color: var(--or); }
.atelier h2.display{
  font-size: clamp(48px, 6.5vw, 110px);
  line-height:.92;
  color: var(--creme);
  margin: 0 0 22px;
  max-width: 12ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.atelier h2.display em{ color: var(--or); font-style:italic; text-shadow: 0 2px 30px rgba(0,0,0,.55); }
.atelier .gold-rule{ width:64px; margin-bottom:22px; background: var(--or); }
.atelier .text{ padding-bottom: 18px; }
.atelier .text p{
  font-size: 16px; line-height: 1.6;
  color: rgba(242,235,217,.92);
  margin: 0 0 16px;
  max-width: 38ch;
  text-shadow: 0 1px 16px rgba(0,0,0,.4);
}
.atelier .text .btn-text{ color: var(--creme); border-color: var(--or); }
.atelier .text .btn-text:hover{ color: var(--or); }
.atelier .side-meta{
  display:grid; grid-template-columns: auto 1fr;
  gap: 12px 28px;
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.06em;
  padding-bottom: 22px;
}
.atelier .side-meta dt{
  color: rgba(242,235,217,.5);
  text-transform:uppercase; letter-spacing:.2em;
}
.atelier .side-meta dd{ margin:0; color: var(--creme); }

/* ─────────────────────────────────────────
   6. INSTAGRAM
   ───────────────────────────────────────── */
.instagram{
  padding: 48px 40px;
  margin: 0 auto;
  background: #1F1E1C;
}
.instagram .head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:48px; margin-bottom: 0;
  max-width: 1640px; margin-left:auto; margin-right:auto;
}
.instagram .head .left h2{
  font-family:"Cormorant Garamond", serif;
  font-weight:300; font-style:italic;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height:.95; margin: 0;
  color: var(--creme);
}
.instagram .head .left h2 em{ color: var(--or); font-style:italic; }
.instagram .head .left h2 a{
  color: var(--creme);
  text-decoration: none;
  border-bottom: 1px solid var(--or);
  padding-bottom: 4px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.instagram .head .left h2 a:hover{ color: var(--or); }
.instagram .head .left .eyebrow{ margin-bottom:14px; }
.instagram .head .right{
  display:flex; align-items:baseline; gap:18px;
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--gris-l);
}
.instagram .head .right a{
  color: var(--noir); text-decoration:none;
  border-bottom:1px solid var(--or);
  padding-bottom: 4px;
}

.ig-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ig-tile{
  aspect-ratio: 1/1;
  display:block;
  background-color: var(--creme-soft);
  background-size: cover; background-position: center;
  position:relative; overflow:hidden;
  cursor:pointer;
}
.ig-tile::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,15,44,0), rgba(6,15,44,.6));
  opacity:0; transition: opacity .4s var(--ease);
}
.ig-tile .ig-meta{
  position:absolute; left:14px; right:14px; bottom:12px;
  display:flex; align-items:center; justify-content:space-between;
  color: var(--creme); opacity:0;
  transition: opacity .4s var(--ease);
  font-family:"JetBrains Mono", monospace;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  z-index:1;
}
.ig-tile .ig-meta .h{ color: var(--or); }
.ig-tile:hover::after{ opacity:1; }
.ig-tile:hover .ig-meta{ opacity:1; }

/* ─────────────────────────────────────────
   MOBILE — refinement pass (loads after base.css, wins the cascade)
   ───────────────────────────────────────── */
@media (max-width: 760px){
  /* Hero — entrance image only, full width, NO navy block around it */
  .hero{ height: auto; aspect-ratio: 2880 / 1700; min-height: 0; }
  .hero .bg{ background-size: cover; background-position: center; background-color: #0A1838; }
  .hero .hero-title, .hero .display{ padding: 0 18px; }
  .hero h1.display{ font-size: clamp(38px, 11vw, 58px); }
  .hero .sig{ width: 168px; }
  .hero .frame{ padding: 0 20px 34px; }
  .hero .meta-top{ display:none; }
  .hero .side-spec{ display:none; }
  /* Location label — a touch higher, tighter */
  .hero .location{ top: 20px; font-size: 9px; letter-spacing: .24em; word-spacing:-.2em; padding-top: 40px; }
  .hero .location::before{ height: 30px; }
  /* Types — stay on ONE line, reduced, on the photo (like desktop) */
  .hero .types{
    bottom: 26px;
    white-space: nowrap;
    gap: 6px;
    column-gap: 6px;
    max-width: 98vw;
    font-size: 8px; letter-spacing: .12em;
  }
  .hero .types .dot{ width:2px; height:2px; }

  /* Section rhythm — generous, even vertical air */
  section.section{ padding: 72px 22px; }
  /* No gap between the hero photo and the first section ("L'artiste") */
  #about{ padding-top: 26px; padding-bottom: 16px; }
  #about .section-head{ margin-bottom: 18px; }
  #about .content p:last-of-type{ margin-bottom: 0; }
  #about .cta-row:empty{ margin-top: 0; }

  /* About — single column, calmer type */
  .about{ grid-template-columns: 1fr; gap: 44px; }
  .about .portrait{ max-width: none; width: 100%; aspect-ratio: 4/5; }
  .about .portrait .caption{ left: 16px; bottom: -24px; }
  .about .content{ padding-top: 16px; max-width: none; }
  .about .content h2{ font-size: clamp(22px, 6vw, 30px); line-height: 1.12; margin-bottom: 14px; }
  .about .content p{ font-size: 13.5px; line-height: 1.58; max-width: none; }
  .about .content .cta-row{ flex-wrap: wrap; gap: 20px; }

  /* Recent — tightened top so it fits the phone screen */
  .recent{ padding: 14px 0 44px; }
  .recent .head{ padding: 0 22px; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
  .recent .head .left h2{ font-size: clamp(30px, 8vw, 46px); }
  .recent .head .right{ text-align: left; }
  .slider{ padding-left: 22px; gap: 14px; }
  .slide{ flex-basis: 58vw; max-width: 240px; }
  .slide .img{ aspect-ratio: 4/4.6; }
  .slider-controls{ padding: 16px 22px 0; }

  /* Oracle / Process — FIX: force a single column, image below text */
  #oracle{ }
  .process{ padding: 36px 22px 8px; grid-template-columns: 1fr; gap: 28px; }
  .process .left .eyebrow{ font-size: 8.5px; letter-spacing: .14em; white-space: nowrap; }
  .process .left h2.display{ font-size: clamp(26px, 7vw, 44px); max-width: 100%; }
  .process .left p{ font-size: 13.5px; line-height: 1.58; }
  .process .right{ aspect-ratio: 4/5; max-height: none; order: 2; }
  .process .cta-stack{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .process .cta-stack .btn-solid{ width: auto; align-self: flex-start; justify-content: flex-start; }

  /* Atelier — single column, image first */
  .atelier{ min-height: auto; }
  .atelier .inner{ grid-template-columns: 1fr; gap: 28px; padding: 24px 22px 52px; }
  .atelier .text h2.display{ font-size: clamp(34px, 10vw, 56px); }
  .atelier .text p{ font-size: 15px; line-height: 1.6; }

  /* Instagram — compact anthracite band, centered */
  .instagram{ padding: 26px 16px; }
  .instagram .head{ flex-direction: column; align-items: center; text-align: center; gap: 0; }
  .instagram .head .left h2{ font-size: clamp(17px, 5vw, 24px); white-space: nowrap; line-height: 1.2; }
}