:root {
  --paper: #f6f6f3;
  --ink: #0b0d0e;
  --muted: #686d70;
  --line: rgba(11, 13, 14, .14);
  --accent: #f05a28;
  --glass: rgba(255, 255, 255, .68);
  --shadow: 0 28px 80px rgba(20, 24, 28, .18);
  --radius: 18px;
  color-scheme: light;
}

@font-face {
  font-family: "Podlers Modern";
  src: url("assets/fonts/exo2-extra-bold-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Podlers Text";
  src:
    local("Aptos"),
    local("Segoe UI Variable Text"),
    local("Helvetica Neue");
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Podlers Text", "Aptos", "Segoe UI Variable Text", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  letter-spacing: 0;
}

body[dir="rtl"] {
  font-family: Arial, "Helvetica Neue", system-ui, sans-serif;
}

img {
  display: block;
  max-width: 100%;
}

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

.site-header {
  position: fixed;
  z-index: 30;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 28px));
  height: 72px;
  display: grid;
  grid-template-columns: minmax(270px, 1fr) auto minmax(110px, 1fr);
  align-items: center;
  padding: 0 12px 0 24px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: rgba(255, 255, 255, .54);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 18px 50px rgba(16, 18, 20, .12);
  overflow: visible;
}

.brand {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  height: 100%;
  min-width: 220px;
  overflow: hidden;
}

.brand-logo-frame {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 226px;
  height: 50px;
  overflow: hidden;
}

.brand-logo-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 238px;
  max-width: none;
  height: auto;
  transform: translate(-50%, -47.3%);
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: "Podlers Modern", "Aptos Display", "Segoe UI Variable Display", Arial, sans-serif;
  font-size: 15px;
  font-style: italic;
  font-weight: 800;
  color: rgba(11, 13, 14, .82);
}

.nav a:hover {
  color: var(--ink);
}

.language {
  position: relative;
  justify-self: end;
  z-index: 50;
}

.lang-current {
  width: 50px;
  height: 44px;
  border: 1px solid rgba(11, 13, 14, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-style: italic;
  font-weight: 700;
  cursor: pointer;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: none;
  min-width: 156px;
  max-height: min(70vh, 420px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(11, 13, 14, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow);
  z-index: 100;
}

body[dir="rtl"] .lang-menu {
  right: auto;
  left: 0;
}

.language.open .lang-menu {
  display: grid;
  gap: 4px;
}

.lang-menu button {
  border: 0;
  border-radius: 10px;
  background: transparent;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}

body[dir="rtl"] .lang-menu button {
  text-align: right;
}

.lang-menu button:hover {
  background: rgba(240, 90, 40, .12);
}

.panel {
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: 120px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
}

.bright {
  background: #fff;
}

.hero {
  min-height: 112dvh;
  padding: 0;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-media img,
.hero-media video,
.full-bleed img,
.full-bleed video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media .hero-video {
  object-position: center center;
}

.hero-media::after,
.full-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(246, 246, 243, .95), rgba(246, 246, 243, .54) 38%, rgba(246, 246, 243, .08) 72%);
}

.hero-copy {
  width: min(760px, 86vw);
  margin-left: clamp(22px, 8vw, 118px);
  padding-top: 80px;
}

body[dir="rtl"] .hero-copy {
  margin-left: 0;
  margin-right: clamp(22px, 8vw, 118px);
}

.hero-copy h1 {
  margin: 0;
  max-width: 760px;
  font-family: "Podlers Modern", "Aptos Display", "Segoe UI Variable Display", "Helvetica Neue", Arial, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(54px, 9vw, 138px);
  line-height: .96;
  letter-spacing: 0;
}

.hero-copy p:not(.eyebrow) {
  max-width: 560px;
  margin: 26px 0 0;
  color: rgba(11, 13, 14, .72);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.35;
}

.hero-product {
  position: absolute;
  right: 8vw;
  bottom: 7vh;
  width: min(470px, 36vw);
  filter: drop-shadow(0 34px 42px rgba(0, 0, 0, .28));
}

body[dir="rtl"] .hero-product {
  right: auto;
  left: 8vw;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font-family: "Podlers Modern", "Exo 2", "Arial Black", Arial, sans-serif;
  font-size: 15px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: none;
}

h2 {
  margin: 0;
  font-family: "Podlers Modern", "Aptos Display", "Segoe UI Variable Display", "Helvetica Neue", Arial, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: clamp(38px, 6vw, 92px);
  line-height: 1.02;
  letter-spacing: 0;
}

h3 {
  margin: 0;
  font-family: "Podlers Modern", "Aptos Display", "Segoe UI Variable Display", "Helvetica Neue", Arial, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 25px;
}

p {
  font-size: 18px;
  line-height: 1.55;
}

.statement {
  width: min(860px, 100%);
  margin: 0 auto 58px;
  text-align: center;
}

.statement p:not(.eyebrow),
.section-head p:not(.eyebrow),
.center-copy p:not(.eyebrow),
.split-copy p,
.proof-copy p,
.detail-copy p,
.contact-copy p {
  color: var(--muted);
}

.intro {
  align-content: center;
}

.intro-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .9fr 1.15fr;
  gap: 18px;
  align-items: end;
}

.intro-grid figure,
.proof-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.intro-grid figure:nth-child(2) {
  transform: translateY(48px);
}

.intro-grid img,
.proof-gallery img,
.gallery-wall img,
.split-media img,
.detail-image img,
.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cinema {
  color: var(--ink);
  padding: 0;
}

.light-text {
  color: #fff;
}

.light-text .eyebrow {
  color: #fff;
}

.full-bleed {
  position: absolute;
  inset: 0;
}

.light-text .full-bleed::after {
  background: linear-gradient(0deg, rgba(0, 0, 0, .52), rgba(0, 0, 0, .12));
}

.center-copy {
  position: relative;
  z-index: 2;
  width: min(900px, calc(100% - 40px));
  margin: 0 auto;
  text-align: center;
}

.center-copy p:not(.eyebrow) {
  margin-left: auto;
  margin-right: auto;
  max-width: 610px;
}

.split {
  grid-template-columns: minmax(280px, 480px) 1fr;
  gap: clamp(34px, 7vw, 110px);
}

.split.reverse {
  grid-template-columns: 1fr minmax(280px, 500px);
}

.split.reverse .split-copy {
  order: 2;
}

.split-copy {
  max-width: 500px;
}

.stack-photos {
  position: relative;
  height: min(68vh, 700px);
}

.stack-photos img {
  position: absolute;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.stack-photos img:first-child {
  width: 56%;
  height: 74%;
  left: 4%;
  bottom: 0;
}

.stack-photos img:last-child {
  width: 54%;
  height: 82%;
  right: 3%;
  top: 0;
}

body[dir="rtl"] .stack-photos img:first-child {
  left: auto;
  right: 4%;
}

body[dir="rtl"] .stack-photos img:last-child {
  right: auto;
  left: 3%;
}

.product-lock {
  background: radial-gradient(circle at 50% 18%, #ffffff 0, #f5f5f2 38%, #ecece8 100%);
  text-align: center;
}

.product-stage {
  position: relative;
  width: min(960px, 92vw);
  height: min(48vh, 430px);
  margin: 0 auto 28px;
}

.product-stage img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.product-main {
  width: min(650px, 70vw);
  z-index: 2;
  filter: drop-shadow(0 32px 36px rgba(0, 0, 0, .25));
}

.product-ghost {
  width: min(410px, 38vw);
  opacity: .34;
  filter: blur(.2px) grayscale(.15);
}

.product-ghost.left {
  transform: translate(-112%, -44%) rotate(-6deg);
}

.product-ghost.right {
  transform: translate(12%, -50%) rotate(7deg);
}

.motion-strip {
  align-content: center;
  background: #111514;
  color: #fff;
}

.motion-strip .eyebrow {
  color: var(--accent);
}

.motion-strip .statement p {
  color: rgba(255, 255, 255, .68);
}

.strip-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 14px;
  width: min(1260px, 100%);
  margin: 0 auto 60px;
}

.strip-track img {
  height: clamp(300px, 48vh, 560px);
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

.narrow {
  max-width: 760px;
  margin-bottom: 0;
}

.proof {
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(34px, 6vw, 90px);
  background: #fff;
}

.proof-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.proof-gallery figure {
  height: min(58vh, 620px);
}

.proof-gallery figure:nth-child(2) {
  margin-top: 70px;
}

.section-head {
  width: min(920px, 100%);
  margin: 0 auto 48px;
  text-align: center;
}

.series {
  background: #f7f7f8;
}

.series-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.series-grid article {
  min-height: 330px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.series-grid article img {
  height: 160px;
  width: 100%;
  object-fit: contain;
  margin-bottom: 20px;
}

.series-grid article h3 {
  margin-top: 0;
}

.series-grid article p {
  color: var(--muted);
  margin-bottom: 0;
}

.gallery-wall {
  min-height: 130dvh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, 8vw);
  gap: 14px;
  background: #fff;
}

.gallery-wall img {
  border-radius: var(--radius);
  box-shadow: 0 16px 42px rgba(15, 18, 18, .12);
}

.gallery-wall img:nth-child(1) { grid-area: 1 / 1 / 5 / 5; }
.gallery-wall img:nth-child(2) { grid-area: 2 / 5 / 7 / 8; }
.gallery-wall img:nth-child(3) { grid-area: 1 / 8 / 5 / 13; }
.gallery-wall img:nth-child(4) { grid-area: 6 / 1 / 11 / 4; }
.gallery-wall img:nth-child(5) { grid-area: 7 / 4 / 11 / 8; }
.gallery-wall img:nth-child(6) { grid-area: 5 / 8 / 11 / 13; }

.wall-copy {
  grid-area: 4 / 3 / 8 / 11;
  align-self: center;
  justify-self: center;
  width: min(760px, 94%);
  padding: 34px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .74);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  text-align: center;
  box-shadow: var(--shadow);
}

.detail {
  grid-template-columns: 1fr minmax(280px, 470px);
  gap: clamp(34px, 7vw, 92px);
}

.detail-image {
  height: min(72vh, 760px);
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.wholesale {
  background: #fff;
}

.new-styles {
  background:
    linear-gradient(180deg, #ffffff 0%, #f5f5f2 100%);
}

.new-style-grid {
  width: min(1160px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.new-style-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(11, 13, 14, .1);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(250, 250, 248, .96)),
    #fff;
  box-shadow: 0 28px 80px rgba(16, 18, 20, .1);
}

.new-style-hero {
  height: 342px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 72%, rgba(0, 0, 0, .11), transparent 24%),
    linear-gradient(180deg, #ffffff, #f7f7f5);
  overflow: hidden;
}

.new-style-hero img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.new-style-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0 24px;
}

.new-style-row img {
  width: 100%;
  height: 132px;
  object-fit: contain;
  padding: 10px;
  border: 1px solid rgba(11, 13, 14, .08);
  border-radius: 18px;
  background: #fff;
  mix-blend-mode: multiply;
}

.new-style-card h3 {
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: 0;
}

.new-style-card p {
  color: var(--muted);
  margin-bottom: 0;
  max-width: 460px;
}

.wholesale-grid {
  width: min(980px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.wholesale-grid div {
  min-height: 180px;
  padding: 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  align-content: space-between;
}

.wholesale-grid span {
  color: var(--accent);
  font-family: "Podlers Modern", "Exo 2", "Arial Black", Arial, sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 800;
}

.wholesale-grid strong {
  font-size: 21px;
  line-height: 1.16;
}

.contact-panel {
  grid-template-columns: .95fr 1fr;
  gap: clamp(34px, 7vw, 100px);
  background: #101312;
  color: #fff;
}

.contact-photo {
  height: min(70vh, 720px);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .42);
}

.contact-copy p {
  color: rgba(255, 255, 255, .7);
}

.contact-icons {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

.contact-icons a,
.contact-icons .social-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

.contact-icons img,
.footer-icons img {
  width: 24px;
  height: 24px;
}

.social-icon.is-pending {
  cursor: default;
  opacity: .72;
}

.footer {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(360px, 620px);
  gap: clamp(34px, 7vw, 90px);
  align-items: stretch;
  padding: 64px clamp(20px, 5vw, 72px);
  background: #050505;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-logo {
  display: block;
  margin-bottom: 18px;
}

.footer-logo-frame {
  position: relative;
  display: block;
  width: 250px;
  height: 58px;
  overflow: hidden;
}

.footer-logo-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  max-width: none;
  height: auto;
  transform: translate(-50.8%, -49.2%);
}

.footer p {
  margin: 6px 0;
  max-width: 740px;
  color: rgba(255, 255, 255, .62);
  font-size: 15px;
}

.footer-tagline {
  max-width: 440px !important;
  color: #fff !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  margin-bottom: 28px !important;
}

.footer-emails {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.footer-emails a {
  width: fit-content;
  color: #fff;
  font-size: 16px;
  font-weight: 750;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  transition: color .2s ease, border-color .2s ease;
}

.footer-emails a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.footer-actions {
  display: grid;
  gap: 14px;
}

.map-link {
  display: grid;
  gap: 12px;
  min-height: 168px;
  padding: 24px;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(240, 90, 40, .9), rgba(255, 255, 255, .08)),
    #111;
  color: #fff;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .45);
}

.map-link span {
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.map-link strong {
  max-width: 460px;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.02;
}

.footer-social,
.footer-legal {
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.footer-social p {
  margin: 0 0 14px;
  color: #fff;
  font-weight: 800;
}

.footer-icons {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-icons a,
.footer-icons .social-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: 13px;
  font-style: italic;
  font-weight: 800;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.footer-icons a:hover,
.contact-icons a:hover {
  background: #fff;
  transform: translateY(-1px);
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-legal a {
  font-weight: 800;
  color: #fff;
}

.footer-legal p {
  margin: 0;
  width: 100%;
  text-align: right;
}

.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}

.motion-ready .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 880px) {
  .site-header {
    grid-template-columns: auto 1fr auto;
    height: 62px;
    padding-left: 16px;
  }
  .nav {
    display: none;
  }
  .brand {
    min-width: 0;
  }
  .brand-logo-frame {
    width: 178px;
    height: 44px;
  }
  .brand-logo-image {
    width: 188px;
  }
  .panel {
    padding: 92px 18px;
  }
  .hero {
    min-height: 100dvh;
  }
  .hero-copy {
    margin: 0;
    padding: 116px 20px 0;
  }
  body[dir="rtl"] .hero-copy {
    margin: 0;
  }
  .hero-copy h1 {
    font-size: clamp(48px, 15vw, 76px);
  }
  .hero-product {
    width: min(310px, 72vw);
    right: 4vw;
    bottom: 8vh;
  }
  .intro-grid,
  .split,
  .split.reverse,
  .proof,
  .detail,
  .contact-panel,
  .footer {
    grid-template-columns: 1fr;
  }
  .split.reverse .split-copy {
    order: 0;
  }
  .intro-grid figure:nth-child(2),
  .proof-gallery figure:nth-child(2) {
    transform: none;
    margin-top: 0;
  }
  .stack-photos {
    height: 540px;
  }
  .strip-track,
  .proof-gallery,
  .series-grid,
  .new-style-grid,
  .wholesale-grid {
    grid-template-columns: 1fr;
  }
  .gallery-wall {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }
  .gallery-wall img,
  .wall-copy {
    grid-area: auto !important;
  }
  .wall-copy {
    grid-column: 1 / -1;
    order: -1;
  }
  .footer {
    grid-template-columns: 1fr;
  }
  .footer-icons {
    justify-content: flex-start;
  }
  .new-style-hero {
    height: 240px;
  }
  .new-style-row img {
    height: 104px;
  }
}