/* ═══════════════════════════════════════════════════════════
   TOOLOR · CONTENT LAYER
   Real lookbooks, films, subbrand marks, craft & eco chapters.
   Loaded after main.css — only content-driven styling here.
   ═══════════════════════════════════════════════════════════ */

/* hard clip at the root — no content may widen the mobile viewport */
html{ overflow-x: hidden; }
.section-head--row{ flex-wrap: wrap; }

/* ── media fills every slot it enters ─────────────────────── */
.peak-media img, .peak-media video,
.capsule__media img, .capsule__media video,
.origin__media img, .origin__media video,
.nomad__media img, .nomad__media video,
.look img, .look video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* caption chips readable over photography */
.peak-media figcaption, .origin__media figcaption, .nomad__media figcaption,
.look > span{
  position: relative; z-index: 2;
  margin: .9rem; padding: .45em .8em;
  background: var(--paper-veil);
  color: var(--ink);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  letter-spacing: .2em; font-size: .62rem;
  width: fit-content;
}
.look{ align-items: end; }

/* ── hero: animated ala-kiyiz background ──────────────────── */
.hero__video-slot{
  opacity: .18;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 90%);
          mask-image: linear-gradient(180deg, #000 52%, transparent 90%);
}
.hero__video-slot video{
  width: 100%; height: 100%; object-fit: cover;
}

/* ── hero editorial slideshow — a full right third of the page ── */
.hero__gallery{
  position: absolute; z-index: 2;
  top: 0; right: 0; bottom: 0;
  width: clamp(300px, 33.4vw, 640px);
  height: auto;
  border-left: 1px solid var(--ink-14);
  background: var(--white);
  box-shadow: -34px 0 90px rgba(11,12,14,.16);
  overflow: hidden;
}
/* hero masthead: the runic slogan, oversized — the Turkic voice above the English statement */
.hero__masthead{
  display: block;
  width: min(70%, 760px); height: auto;
  margin: clamp(.6rem, 1.4vh, 1.2rem) 0 clamp(1rem, 2.4vh, 1.9rem);
  filter: drop-shadow(0 10px 30px var(--blue-14));
}
@media (min-width: 1024px){
  /* sized to the headline width (viewport-based, escaping the column's gallery padding) */
  .hero__masthead{ width: min(52vw, 720px); }
}
@media (max-width: 640px){
  .hero__masthead{ width: 88%; margin-bottom: 1rem; }
}

/* runic slogan lives permanently on the nav bar (before the CTA) */
.nav__runes{
  height: 15px; width: auto; flex-shrink: 0;
  opacity: .5; margin: 0 .9rem 0 .3rem;
  transition: opacity var(--dur-fast);
}
.nav.is-scrolled .nav__runes{ opacity: .62; }
/* crowded between 1024–1279 (gallery reserves the right third); show ≥1280 */
@media (max-width: 1279px){ .nav__runes{ display: none; } }
.hero-slide{
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity 1.1s var(--ease-in-out);
}
.hero-slide img{
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
}
.hero-slide.is-active{ opacity: 1; }
.hero-slide.is-active img{ animation: kenburns 5s var(--ease-in-out) forwards; }
@keyframes kenburns{
  from{ transform: scale(1.02); }
  to  { transform: scale(1.12); }
}
.hero__gallery-cap{
  position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 3;
  background: var(--ink); color: var(--snow);
  padding: .5em .9em; letter-spacing: .2em; font-size: .62rem;
}
.hero__gallery-cap b{ color: var(--snow); font-weight: 700; }
.hero__gallery-cap i{ font-style: normal; color: var(--cyan); }

/* desktop: type block owns two thirds; the gallery owns the third */
@media (min-width: 1024px){
  .hero__content{ padding-right: clamp(340px, 37vw, 700px); }
  .hero__title{ font-size: clamp(2.6rem, 7.2vw, 7.6rem); }
  .hero__runes{ right: auto; left: calc(var(--gutter) * .5); opacity: .2; }
  .hero__data--tr{ right: calc(clamp(300px, 33.4vw, 640px) + 2rem); }
  .hero__data--br{ right: calc(clamp(300px, 33.4vw, 640px) + 2rem); }
}

/* ── FLUX / RUKH line chips ───────────────────────────────── */
.line-row__extras{
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  margin-top: 1.1rem;
}
.line-chip{
  display: inline-grid; place-items: center;
  background: var(--white); border-radius: 6px;
  padding: .5rem .9rem; min-height: 54px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.line-chip img{ height: 40px; width: auto; }
.line-chip--fact{
  background: transparent; border: 1px solid var(--snow-line);
  color: var(--cyan); letter-spacing: .18em; box-shadow: none;
}
.line-chip--film{
  padding: 0; overflow: hidden; width: 96px; height: 96px; border-radius: 6px;
}
.line-chip--film video{ width: 100%; height: 100%; object-fit: cover; }

/* ── production: clean copy + factory film slot ───────────── */
.production__clean{
  max-width: 52rem; margin: 3.4rem auto 0; padding: 0 var(--gutter);
  text-align: center;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.45rem); line-height: 1.55;
  color: var(--ink);
}
.production__film{
  position: relative;
  max-width: 1100px; aspect-ratio: 16 / 9;
  margin: 2.6rem auto 0;
  border: 1px solid var(--ink-14);
  background:
    linear-gradient(rgba(244,242,236,.6), rgba(244,242,236,.35)),
    url("../assets/pattern-light.webp") center / cover;
  display: grid; place-items: center; gap: 1rem; align-content: center;
  color: var(--stone);
}
.production__film video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.production__film-play{
  width: 74px; height: 74px; border-radius: 50%;
  border: 1.5px solid var(--blue);
  position: relative;
}
.production__film-play::after{
  content: ""; position: absolute; left: 55%; top: 50%;
  translate: -50% -50%;
  border-left: 16px solid var(--blue);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* ── CRAFT & FOLKLORE ─────────────────────────────────────── */
.craft{ overflow: hidden; }
.craft__steps{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--ink-14);
  border-block: 1px solid var(--ink-14);
  max-width: var(--max-w); margin: 0 auto 3rem;
}
.craft-step{
  background: var(--paper);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  display: grid; gap: .8rem; align-content: start;
  transition: background var(--dur-mid);
}
.craft-step:hover{ background: var(--white); }
.craft-step .mono{ color: var(--blue); letter-spacing: .24em; }
.craft-step p{ color: var(--stone); font-size: .93rem; }
.craft-step__icon{ width: 64px; height: 64px; }
.craft-step__icon svg{ width: 100%; height: 100%; }

.craft__gallery{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter);
}
.craft__gallery .look{ position: relative; display: grid; overflow: hidden; border: 1px solid var(--ink-14); cursor: pointer; }
.craft__foot{
  text-align: center; margin: 3rem auto 0; max-width: 46rem; padding: 0 var(--gutter);
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.4rem); line-height: 1.5;
}
.craft__foot b{ color: var(--blue); }

/* ── ECO — responsibility (night, blue line-art) ──────────── */
.eco{ padding: var(--section-gap) 0; overflow: hidden; position: relative; }
.eco__art{
  position: absolute; right: -12%; top: -6%;
  width: min(58vw, 820px); opacity: .5;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: eco-drift 40s var(--ease-in-out) infinite alternate;
}
@keyframes eco-drift{
  from{ transform: translate3d(0, -2%, 0) rotate(-2deg); }
  to  { transform: translate3d(0, 2%, 0) rotate(2deg); }
}
/* eco cycle — the working recycling loop + material flows */
.eco__cycle{
  position: relative;
  display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  max-width: 1100px; margin: 0 auto clamp(2.8rem, 7vh, 4.5rem);
  padding: 0 var(--gutter);
}
.eco__diagram svg{ width: 100%; height: auto; display: block; }
.eco-ring{ animation: eco-ring-run 26s linear infinite; }
@keyframes eco-ring-run{ to{ stroke-dashoffset: -390; } }  /* -390 = 30 × the 13px dash period — seamless */
.eco-lab{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; fill: var(--snow); }
.eco-lab--sub{ fill: var(--ash); font-size: 9.5px; }
.eco-hub{ font-family: var(--font-display); font-weight: 800; font-size: 27px; letter-spacing: .03em; fill: var(--snow); }
.eco__strong{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem); line-height: 1.45;
}
.eco__strong b{ color: var(--cyan); font-weight: 600; }
.eco-flow{ display: grid; gap: 1.1rem; margin-top: 1.6rem; }
.eco-flow li{ display: grid; gap: .3rem; border-left: 2px solid var(--cyan); padding-left: 1rem; }
.eco-flow__tag{ color: var(--cyan); letter-spacing: .24em; font-size: .62rem; }
.eco-flow p{ color: var(--ash); font-size: .93rem; max-width: 52ch; }
@media (max-width: 900px){
  .eco__cycle{ grid-template-columns: 1fr; }
  .eco__diagram{ max-width: 440px; margin: 0 auto; width: 100%; }
  .eco-lab{ font-size: 14px; }
  .eco-lab--sub{ font-size: 11.5px; }
  .eco-hub{ font-size: 31px; }
}
.eco__grid{
  position: relative;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--snow-line);
  border: 1px solid var(--snow-line);
  max-width: 1100px; margin: 0 auto;
}
.eco-card{
  background: var(--ink);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  display: grid; gap: .7rem; align-content: start;
  transition: background var(--dur-mid);
}
.eco-card:hover{ background: var(--ink-soft); }
.eco-card__num{ color: var(--cyan); }
.eco-card h3{
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.25rem; text-transform: uppercase;
}
.eco-card p{ color: var(--ash); font-size: .95rem; max-width: 44ch; }

/* eco cases — media slots for the real product stories */
.eco__cases{
  max-width: 1100px; margin: clamp(2.8rem, 7vh, 4.5rem) auto 0;
  padding: 0 var(--gutter); position: relative;
}
.eco__cases-head{
  display: flex; align-items: baseline; gap: 1.4rem; flex-wrap: wrap;
  margin-bottom: 1.3rem;
}
.eco__cases-tag{ color: var(--cyan); letter-spacing: .3em; font-size: .66rem; }
.eco__cases-sub{ color: var(--ash); font-size: .9rem; }
.eco__cases-grid{
  display: grid; grid-template-columns: 1.7fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--snow-line); border: 1px solid var(--snow-line);
}
.eco-case{
  position: relative; background: var(--ink);
  display: grid; place-items: center; align-content: center; gap: .8rem;
  min-height: 190px; overflow: hidden;
}
.eco-case--film{ grid-row: 1 / span 2; aspect-ratio: 16 / 10; }
.eco-case__cap{ color: var(--ash); letter-spacing: .22em; font-size: .6rem; }
.eco-case__play{
  width: 54px; height: 54px; border: 1px solid var(--cyan); border-radius: 50%;
  position: relative;
}
.eco-case__play::after{
  content: ""; position: absolute; left: 55%; top: 50%; translate: -50% -50%;
  border-left: 13px solid var(--cyan);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.eco-case img, .eco-case video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 760px){
  .eco__cases-grid{ grid-template-columns: 1fr; grid-template-rows: none; }
  .eco-case--film{ grid-row: auto; }
}

/* factory film — live */
.production__film--live{ overflow: hidden; background: var(--ink); border-color: var(--ink-14); }
.production__film--live figcaption{
  position: absolute; left: .9rem; bottom: .9rem; z-index: 2;
  padding: .45em .8em; font-size: .58rem; letter-spacing: .22em;
  background: var(--paper-veil); color: var(--ink);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* certificates — logo slots */
.production__certs{
  max-width: 1100px; margin: clamp(2rem, 5vh, 3.4rem) auto 0;
  padding: 0 var(--gutter);
  display: grid; gap: 1rem; justify-items: center;
}
.production__certs-tag{ color: var(--stone); letter-spacing: .3em; font-size: .64rem; }
.production__certs-row{
  width: 100%;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1px; background: var(--ink-14); border: 1px solid var(--ink-14);
}
.cert-slot{
  aspect-ratio: 3 / 2; background: var(--paper);
  display: grid; place-items: center; padding: 1rem;
  transition: background var(--dur-fast);
}
.cert-slot:hover{ background: var(--white); }
.cert-slot .mono{ color: var(--stone); opacity: .7; letter-spacing: .18em; font-size: .56rem; text-align: center; }
.cert-slot img{ max-width: 72%; max-height: 64%; object-fit: contain; }
@media (max-width: 760px){
  .production__certs-row{ grid-template-columns: repeat(2, 1fr); }
  .production__certs-row .cert-slot:last-child{ grid-column: 1 / -1; }
}

/* ── COLLECTIONS ARCHIVE ──────────────────────────────────── */
.collections{ overflow: hidden; }
.coll{
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  max-width: var(--max-w); margin: 0 auto clamp(4.5rem, 10vh, 8rem);
  padding: 0 var(--gutter);
  align-items: start;
}
.coll--flip{ grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr); }
.coll--flip .coll__info{ order: 2; }
.coll__info{ position: sticky; top: 14vh; }
.coll__year{
  display: block;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(4.6rem, 11vw, 10rem); line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--blue);
  opacity: .85;
}
.coll__name{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem); text-transform: uppercase;
  letter-spacing: -0.01em; margin-top: .6rem;
}
.coll__seg{ color: var(--blue); margin: .8rem 0 1rem; letter-spacing: .22em; }
.coll__desc{ color: var(--stone); max-width: 40ch; }

.coll__grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(120px, auto);
  gap: clamp(.8rem, 1.6vw, 1.4rem);
}
.coll__grid .look{
  position: relative; display: grid; overflow: hidden;
  border: 1px solid var(--ink-14);
  aspect-ratio: 3 / 4; cursor: pointer;
}
.coll__big{ grid-column: span 2; grid-row: span 2; aspect-ratio: auto !important; min-height: 400px; }
.coll__grid--four .coll__big{ grid-column: span 2; }
.coll__film::after{
  content: "▶"; position: absolute; top: .9rem; right: .9rem; z-index: 2;
  color: var(--white); font-size: .7rem;
  background: var(--blue); border-radius: 50%;
  width: 26px; height: 26px; display: grid; place-items: center;
}

/* ── AW 26 preview strip ──────────────────────────────────── */
.aw{ padding: var(--section-gap) 0; border-top: 1px solid var(--ink-14); }
.aw__cta{ flex-shrink: 0; margin-bottom: 2rem; }
.aw__strip{
  display: flex; gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0 var(--gutter) 1.4rem;
  scrollbar-width: thin; scrollbar-color: var(--blue) transparent;
}
.aw-card{
  flex: 0 0 clamp(220px, 22vw, 320px);
  scroll-snap-align: start;
  border: 1px solid var(--ink-14);
  background: var(--white);
  display: grid; grid-template-rows: 1fr auto;
}
.aw-card img{
  width: 100%; aspect-ratio: 4 / 5; object-fit: contain;
  padding: 1.2rem; background: var(--white);
}
.aw-card figcaption{
  padding: .9rem 1.1rem;
  border-top: 1px solid var(--ink-08);
  color: var(--stone); letter-spacing: .2em; font-size: .62rem;
}
.aw-card:hover{ border-color: var(--blue); }

/* ── statement watermark + asymmetric verdict ─────────────── */
.statement{ overflow: hidden; }
.statement__mark{
  position: absolute; inset: 0; margin: auto;
  width: min(96vw, 1600px); height: 40%;
  background: var(--snow);
  opacity: .045;
  -webkit-mask: url("../assets/logo-white.png") center / contain no-repeat;
          mask: url("../assets/logo-white.png") center / contain no-repeat;
  pointer-events: none;
}
.statement__big{ position: relative; width: min(100%, 1080px); }
.statement__l1{ text-align: left; display: block; }
.statement__l2{ text-align: center; display: block; }
.statement__l3{ text-align: right; display: block; }

/* ── editorial hairline grid on select light sections ─────── */
.axis::before, .symbol::before, .collections::before, .aw::before{
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg,
    var(--ink-08) 0 1px, transparent 1px calc(100% / 6));
  opacity: .35; pointer-events: none;
}
.axis > *, .symbol > *, .collections > *, .aw > *{ position: relative; }

/* kicker gets a tumar diamond — small nomad signal */
.section-head__kicker::before{
  content: ""; display: inline-block;
  width: 7px; height: 7px; margin-right: .7em;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  translate: 0 -1px;
}

/* ── figure reveals (IO adds .is-in; armed only when JS runs) ── */
body.figs-armed .coll__grid .look,
body.figs-armed .craft__gallery .look{
  clip-path: inset(0 0 100% 0);
  opacity: .25;
  transition: clip-path 1s var(--ease-out-expo), opacity .7s var(--ease-out-expo);
}
body.figs-armed .coll__grid .look.is-in,
body.figs-armed .craft__gallery .look.is-in{
  clip-path: inset(0 0 0% 0);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   GRAF ELEMENTS — the official brand sheet, deployed as accents
   tamga · rune slogans · shyrdak ornament · horse · patterns
   ═══════════════════════════════════════════════════════════ */

/* nav wordmark — a real image, visible in every environment */
.nav__logo{ height: 34px; }
.nav__logo-img{ height: 34px; width: auto; display: block; }
/* nav content lives in the left two thirds — the gallery owns the right */
@media (min-width: 1024px){
  .nav{ padding-right: calc(clamp(300px, 33.4vw, 640px) + var(--gutter)); }
}
/* keep every nav label on one line — "The Brand" must never break */
.nav__links{ white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1439px){
  .nav__links{ gap: clamp(.9rem, 1.8vw, 1.6rem); }
}

/* mobile menu lockup */
.mobile-menu__lockup{
  width: min(220px, 56vw); height: auto; margin-bottom: 1.6rem;
  position: relative;
}

/* snapshot: cobalt range photo behind the numbers */
.snapshot{ position: relative; overflow: hidden; }
.snapshot__range{
  position: absolute; inset: 0;
  background: url("../assets/graf/range.webp") center / cover no-repeat;
  opacity: .3; mix-blend-mode: luminosity;
  pointer-events: none;
}
.snapshot__grid{ position: relative; }

/* collections: vertical shyrdak ornament rail (asymmetric spine) */
.collections{ position: relative; }
/* ornament ribbon — woven band from THE ARCHIVE to the end of PARTNERSHIP.
   Absolute span (top/height set by motion.js), sticky inner pane keeps
   the animated paint region viewport-sized. Paper backing lets the blue
   ornament read on dark chapters too — a strip of felt braid running
   through the archive → partnership chapters. */
.side-rail{
  position: absolute; left: calc(var(--gutter) * .35);
  width: clamp(26px, 2.6vw, 46px);
  z-index: 4; pointer-events: none;
  display: none;                                   /* enabled ≥1280 */
}
.side-rail__stick{
  position: sticky; top: 0; height: 100svh;
  background:
    url("../assets/graf/ornament-strip.png") center top / 100% auto repeat-y,
    linear-gradient(rgba(244, 242, 236, .93), rgba(244, 242, 236, .93));
  border-inline: 1px solid var(--ink-08);
  box-shadow: 8px 0 26px rgba(11, 12, 14, .1);
  animation: rail-drift 60s linear infinite;
}
@keyframes rail-drift{
  from{ background-position: center 0, 0 0; }
  to  { background-position: center -1200px, 0 0; }
}
@media (min-width: 1280px){
  .side-rail{ display: block; }
}

/* fourth-axis "ours" card wears the ornament block in white */
.axis-card--ours{ position: relative; overflow: hidden; }
.axis-card__ornament{
  position: absolute; top: 1.2rem; right: 1.2rem;
  width: clamp(58px, 6vw, 86px); height: auto;
  filter: brightness(0) invert(1);   /* blue artwork → white on the IKB card */
  opacity: .95;
}

/* craft: floral contour pattern breathes behind the felt story */
.craft{ overflow: hidden; }
.craft::before{
  content: ""; position: absolute; inset: 0;
  background: url("../assets/graf/pat-floral.webp") center / 720px repeat;
  opacity: .09; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 95%);
          mask-image: linear-gradient(180deg, #000 40%, transparent 95%);
}
.craft > *{ position: relative; }

/* nomad: the horse rides through the night section */
.nomad{ position: relative; overflow: hidden; }
.nomad__horse{
  position: absolute; right: -6%; bottom: -8%;
  width: min(48vw, 580px); height: auto;
  mix-blend-mode: screen;            /* blue line-art glows on the night section */
  opacity: .3; pointer-events: none;
}

/* checkerboard band — Ader-style break before the footer */
/* partnership lockup — the brand signs the deal */
.partnership__lockup{
  display: block; width: clamp(220px, 26vw, 320px); height: auto;
  margin: 3.2rem auto 0;
}

/* production film placeholder — tamga polka texture */
.production__film{
  background:
    linear-gradient(rgba(244,242,236,.82), rgba(244,242,236,.82)),
    url("../assets/graf/pat-tamga.webp") center / 460px repeat;
}

/* heritage + symbol rune tiles — real images cropped by their frames */
.motif__art--runes, .symbol__art--rune{
  background: none;
  -webkit-mask: none; mask: none;
  overflow: hidden; display: grid;
}
.motif__art--runes img, .symbol__art--rune img{
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width: 1023px){
  .hero__gallery{
    position: relative; inset: auto; right: auto;
    width: calc(100% - var(--gutter) * 2);
    max-width: 460px;
    height: auto; aspect-ratio: 4 / 5;
    margin: 2.2rem auto 0;
    order: 3;
  }
  .hero{ padding-bottom: 0; }
  .hero__content{ padding-bottom: 3rem; }
  /* on mobile the hero grows: slideshow becomes its own beat under the CTAs */
  .hero{ min-height: 0; padding-top: calc(76px + 8vh); }
  .hero__gallery{ margin-bottom: 24vh; }

  .craft__steps{ grid-template-columns: repeat(2, 1fr); }
  .craft__gallery{ grid-template-columns: 1fr; max-width: 520px; }

  .eco__grid{ grid-template-columns: 1fr; }
  .eco__art{ width: 90vw; right: -30%; opacity: .35; }

  .coll, .coll--flip{ grid-template-columns: 1fr; }
  .coll--flip .coll__info{ order: 0; }
  .coll__info{ position: relative; top: 0; }
  .coll__grid{ grid-template-columns: repeat(2, 1fr); }
  .coll__big{ grid-column: span 2; min-height: 300px; }
}

@media (max-width: 1279px){
}

@media (max-width: 640px){
  .line-chip--film{ width: 78px; height: 78px; }
  .aw-card{ flex-basis: 240px; }
  .statement__l1, .statement__l2, .statement__l3{ text-align: center; }
  .hero__slogan{ width: 180px; margin-bottom: 1.6rem; }
  .snapshot__logo{ right: 50%; translate: 50% 0; }
  .nomad__horse{ width: 82vw; opacity: .09; }
}

/* ── reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .hero-slide.is-active img{ animation: none; }
  .eco__art{ animation: none; }
  .eco-ring{ animation: none; }
  .side-rail__stick{ animation: none; }
}