@import url("/fonts/fonts.css");

/* ---------- tokens ---------- */
:root {
  --ink: #140c07;
  --ink-2: #22150b;
  --ink-3: #2f1d0f;
  --gold: #e2b866;
  --gold-deep: #a8752c;
  --gold-light: #f7e0a8;
  --cream: #f7e9cf;
  --cream-2: #efd8b0;
  --paper: #fcf4e6;
  --text: #2b1a0d;
  --text-soft: #5a422b;
  --on-dark: #f6e6c8;
  --on-dark-soft: #cdb48c;
  --red: #cf1620;

  --f-display: "Cinzel", "Nanum Myeongjo", "AppleMyungjo", "Batang", Georgia, serif;
  --f-body: "Montserrat", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --f-mark: "Playfair Display", Georgia, serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1320px;
  --gut: clamp(16px, 4vw, 48px);
  --z-header: 40;
  --z-dialog: 100;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: 96px; }
a, button { -webkit-tap-highlight-color: rgb(226 184 102 / .2); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font: 400 16px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang="ko"] body { word-break: keep-all; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 600; line-height: 1.08; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gold); color: var(--ink); }

.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--gold); color: var(--ink); padding: 10px 16px; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  --bg: linear-gradient(180deg, #3a240f, #0e0805);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 46px; padding: 0 26px;
  border: 1px solid var(--gold-deep); border-radius: 999px;
  background: var(--bg); color: var(--gold-light);
  font: 600 12px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  touch-action: manipulation;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgb(255 230 170 / .35) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .8s var(--ease);
}
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 10px 24px -12px rgb(40 20 5 / .7); }
.btn:hover::after { transform: translateX(110%); }
.btn:hover .arr { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--gold {
  --bg: linear-gradient(135deg, #fde3a4, #d9a454 55%, #b67a2b);
  color: #1d1006; border-color: transparent;
}
.btn--ghost { --bg: transparent; color: var(--gold-light); }
.btn--sm { min-height: 40px; padding: 0 20px; font-size: 11px; }

/* ---------- logo ---------- */
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__shield { width: 44px; height: auto; flex: none; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .35)); }
.brand__txt { display: grid; gap: 3px; }
.brand__name { font: 700 28px/1 var(--f-mark); color: var(--red); letter-spacing: -.01em; }
.brand__name sup { font-size: .38em; vertical-align: top; position: relative; top: .35em; margin-left: 1px; }
.brand__tag {
  display: grid; justify-items: start;
  font: 600 8.5px/1.35 var(--f-body); letter-spacing: .14em; color: var(--on-dark);
}
.brand__tag span:first-child { display: flex; align-items: center; gap: 5px; }
.brand__tag span:first-child::before, .brand__tag span:first-child::after { content: ""; width: 8px; height: 1px; background: currentColor; }
.brand__tag span:last-child { display: flex; align-items: center; gap: 6px; }
.flag { width: 14px; height: 9px; border-radius: 1px; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: var(--z-header);
  background: linear-gradient(95deg, #0b0705, #26160a 50%, #0e0805);
  border-bottom: 1px solid rgb(226 184 102 / .16);
  transition: box-shadow .4s var(--ease);
}
.top.is-scrolled { box-shadow: 0 10px 30px -18px rgb(0 0 0 / .9); }
.top__in { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 36px); min-height: 76px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); margin-inline: auto; }
.nav a {
  position: relative; padding: 8px 0;
  font: 500 12px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--on-dark); transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-light); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.top__end { display: flex; align-items: center; gap: 12px; }
.lang {
  display: inline-flex; align-items: center; height: 40px; padding: 0 6px;
  border: 1px solid rgb(226 184 102 / .45); border-radius: 999px; font-size: 12px; font-weight: 600;
}
.lang a { display: grid; place-items: center; min-width: 44px; height: 30px; padding: 0 8px; border-radius: 999px; color: var(--on-dark-soft); transition: background .3s, color .3s; }
.lang a[aria-current="true"] { color: var(--on-dark); background: rgb(226 184 102 / .14); }
.lang a:hover { color: var(--gold-light); }
.burger { display: none; width: 44px; height: 44px; border: 1px solid rgb(226 184 102 / .45); border-radius: 50%; background: none; }
.burger span { display: block; width: 18px; height: 1.5px; margin: 4px auto; background: var(--gold-light); transition: transform .4s var(--ease), opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- shared text bits ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 500 13px/1 var(--f-display); letter-spacing: .28em; text-transform: uppercase; }
.eyebrow::before, .eyebrow::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; }
.motto { font: 500 13px/1 var(--f-display); letter-spacing: .32em; text-transform: uppercase; }
.dots { white-space: nowrap; }

/* ---------- canvas sparkle layer ---------- */
.sparkle { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; mix-blend-mode: screen; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate; color: var(--text);
  background:
    radial-gradient(60% 70% at 52% 42%, #fff4dc 0%, #f6dca9 38%, transparent 70%),
    radial-gradient(40% 60% at 90% 30%, rgb(255 234 190 / .9), transparent 70%),
    linear-gradient(180deg, #e9c27f, #c99550 70%, #a5733a);
}
.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr minmax(380px, 1.05fr) 1fr; align-items: end;
  min-height: clamp(560px, 46vw, 700px);
}
.hero__img { position: relative; height: 100%; align-self: stretch; }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__img--l img { object-position: 30% 30%; mask-image: linear-gradient(90deg, #000 60%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); }
.hero__img--r img { object-position: 40% 60%; mask-image: linear-gradient(270deg, #000 62%, transparent); -webkit-mask-image: linear-gradient(270deg, #000 62%, transparent); }
.hero__copy { position: relative; z-index: 3; align-self: center; display: grid; justify-items: center; text-align: center; gap: 14px; padding: 36px 8px 44px; }
.hero__logo { display: grid; justify-items: center; gap: 6px; }
.hero__logo .brand__shield { width: 66px; }
.hero__logo .brand__name { font-size: 46px; }
.hero__logo .brand__tag { justify-items: center; color: var(--text); font-size: 10px; }
.hero h1 { font-size: clamp(34px, 3.6vw, 54px); font-weight: 500; letter-spacing: .02em; color: #3a2210; margin-top: 10px; }
.hero h1 span { display: block; font-size: .78em; letter-spacing: .03em; }
.hero .motto { color: #6b4a23; }
.hero__lead { max-width: 30ch; font-size: 17px; line-height: 1.45; color: var(--text); }
.hero__unisex { font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; display: flex; gap: 14px; }
.hero__unisex i { width: 1px; background: currentColor; opacity: .5; }
.badges { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; gap: clamp(10px, 1.6vw, 22px); }
.badges li { display: grid; justify-items: center; align-content: start; gap: 8px; width: 96px; font-size: 9.5px; hyphens: auto; font-weight: 600; letter-spacing: .06em; line-height: 1.25; text-transform: uppercase; }
.ring {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--gold-deep); background: radial-gradient(circle at 35% 30%, #fff3d6, #ecc985);
  color: #4a2e12; transition: transform .5s var(--ease);
}
.ring svg { width: 24px; height: 24px; }
.badges li:hover .ring { transform: translateY(-3px) rotate(-6deg); }

/* ---------- video band ---------- */
.vband { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(70% 120% at 60% 50%, #3b230e, #120a05 70%); }
.vband__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1.25fr 1fr; align-items: center; gap: clamp(16px, 3vw, 40px); min-height: 300px; }
.vband__copy { padding-block: 40px; }
.vband__copy .eyebrow { color: var(--on-dark); font-size: 14px; }
.vband h2 { font-size: clamp(40px, 4.4vw, 66px); font-weight: 500; color: var(--gold-light); margin: 14px 0; }
.vband__copy p { font: 500 15px/1.4 var(--f-display); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); max-width: 22ch; }
.play {
  position: relative; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%;
  border: 1px solid rgb(247 224 168 / .7);
  background: radial-gradient(circle at 35% 30%, #4a2d11, #120904 70%);
  box-shadow: inset 0 0 0 6px rgb(226 184 102 / .12), 0 0 40px rgb(226 184 102 / .25);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.play::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgb(226 184 102 / .35); animation: pulse 2.8s var(--ease) infinite; }
.play svg { width: 34px; margin-left: 6px; color: var(--gold); }
.play:hover { transform: scale(1.06); box-shadow: inset 0 0 0 6px rgb(226 184 102 / .2), 0 0 60px rgb(226 184 102 / .45); }
@keyframes pulse { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
.vband__face { align-self: stretch; position: relative; }
.vband__face img { width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.vband__brand { display: grid; justify-items: center; gap: 14px; text-align: center; }
.vband__brand .brand__shield { width: 70px; }
.vband__brand .brand__name { font-size: 44px; }
.vband__brand .brand__tag { justify-items: center; font-size: 10px; }
.vband__brand .motto { color: var(--gold); font-size: 12px; }

/* ---------- categories ---------- */
.cats { background: linear-gradient(180deg, var(--paper), var(--cream)); color: var(--text); }
.cats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cat { display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; text-align: center; padding: 22px 12px 26px; border-right: 1px solid rgb(168 117 44 / .28); }
.cat:last-child { border-right: 0; }
.cat h3 { font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; letter-spacing: .04em; margin-bottom: 14px; }
.cat__img { overflow: hidden; width: 100%; aspect-ratio: 196 / 150; }
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cat:hover .cat__img img { transform: scale(1.06); }
.cat p { margin: 16px 0 14px; font-size: 12.5px; color: var(--text-soft); min-height: 2.6em; }

/* ---------- premium set ---------- */
.set { position: relative; overflow: hidden; isolation: isolate; color: var(--text); background: radial-gradient(70% 90% at 45% 50%, #fff3dc, #f1d8a8 60%, #e3bd7c); }
.set__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1.6fr 1fr; align-items: center; gap: clamp(16px, 3vw, 44px); padding-block: 26px; }
.set h2 { font-size: clamp(34px, 3.4vw, 50px); font-weight: 500; color: #3a2210; }
.set__sub { font: 500 15px/1.4 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); margin: 14px 0 24px; }
.set__img img { width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(0deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(0deg, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect; }
.actives { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.actives li { display: grid; grid-template-columns: 50px 1fr; gap: 14px; align-items: center; }
.actives strong { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.actives span { font-size: 12.5px; color: var(--text-soft); }

/* ---------- three teasers ---------- */
.trio { display: grid; grid-template-columns: 1fr 1.15fr 1fr; background: var(--cream); color: var(--text); }
.teaser { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; min-height: 230px; border-right: 1px solid rgb(168 117 44 / .25); background: radial-gradient(90% 90% at 30% 40%, #fff6e6, #f0d9b2); }
.teaser:last-child { border-right: 0; }
.teaser--imgleft { grid-template-columns: auto 1fr; }
.teaser__body { position: relative; z-index: 2; padding: 30px clamp(18px, 2vw, 30px); display: grid; align-content: center; gap: 12px; justify-items: start; }
.teaser h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 500; color: #3a2210; }
.teaser p { font-size: 14px; color: var(--text-soft); max-width: 30ch; }
.teaser__img { width: clamp(90px, 9vw, 130px); height: 100%; }
.teaser__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.teaser:hover .teaser__img img { transform: scale(1.07); }
.teaser .btn { margin-top: 6px; }

/* ---------- footer ---------- */
.foot {
  position: relative; overflow: hidden; color: var(--on-dark);
  background:
    radial-gradient(50% 120% at 10% 0%, rgb(120 72 25 / .35), transparent 60%),
    repeating-linear-gradient(115deg, transparent 0 46px, rgb(226 184 102 / .035) 46px 47px),
    linear-gradient(120deg, #0c0806, #1d110a 55%, #0a0605);
  border-top: 1px solid rgb(226 184 102 / .2);
}
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.5fr 1fr; gap: clamp(20px, 3vw, 48px); padding-block: 44px 30px; }
.foot__grid > div + div { border-left: 1px solid rgb(226 184 102 / .16); padding-left: clamp(16px, 2.4vw, 36px); }
.foot__brand { display: grid; gap: 18px; align-content: start; }
.foot__brand .brand__shield { width: 56px; }
.foot__brand .brand__name { font-size: 34px; }
.foot__brand .motto { color: var(--on-dark-soft); font-size: 12px; }
.foot h2 { font: 600 12px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot li a, .foot li > span { font-size: 14px; color: var(--on-dark); transition: color .3s; display: inline-flex; gap: 12px; align-items: flex-start; padding: 3px 0; }
.foot li a:hover { color: var(--gold-light); }
.foot li svg { width: 18px; height: 18px; flex: none; color: var(--gold); margin-top: 2px; }
.socials { display: flex; gap: 12px; margin-bottom: 22px; }
.socials > * { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(226 184 102 / .5); color: var(--gold-light); transition: transform .4s var(--ease), background .3s; }
.socials svg { width: 19px; height: 19px; }
.socials a:hover { transform: translateY(-3px); background: rgb(226 184 102 / .12); }
.socials .is-off { opacity: .55; }
.foot__note { font-size: 12px; color: var(--on-dark-soft); }
.foot__base { border-top: 1px solid rgb(226 184 102 / .12); padding-block: 18px; font-size: 12px; color: var(--on-dark-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- inner pages ---------- */
.phero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(70% 120% at 70% 40%, #4a2c10, #140c07 70%); }
.phero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(20px, 4vw, 64px); min-height: 380px; }
.phero__copy { padding-block: 56px; display: grid; gap: 18px; justify-items: start; }
.phero .eyebrow { color: var(--gold); }
.phero h1 { font-size: clamp(40px, 5vw, 72px); font-weight: 500; color: var(--gold-light); }
.phero__lead { font-size: 18px; line-height: 1.6; color: var(--on-dark); max-width: 46ch; }
.phero__img { align-self: stretch; position: relative; }
.phero__img img { width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(90deg, transparent, #000 30%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%); }

.section { padding-block: clamp(56px, 8vw, 110px); }
.section--cream { background: linear-gradient(180deg, var(--paper), var(--cream)); color: var(--text); }
.section--dark { background: linear-gradient(160deg, var(--ink-2), var(--ink)); }
.section__head { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 56px); max-width: 720px; }
.section__head h2 { font-size: clamp(30px, 3.2vw, 46px); font-weight: 500; }
.section--cream .section__head h2 { color: #3a2210; }
.section--dark .section__head h2 { color: var(--gold-light); }
.section__head p { font-size: 17px; color: inherit; opacity: .85; max-width: 60ch; }

.phero__img--small { display: grid; place-items: center; padding-block: 40px; }
.phero__img--small img { width: min(260px, 70%); height: auto; aspect-ratio: auto; mask-image: none; -webkit-mask-image: none; border: 1px solid var(--gold-deep); padding: 8px; background: rgb(226 184 102 / .08); }

/* split rows (about, honest) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.split + .split { margin-top: clamp(48px, 6vw, 90px); }
.split--rev > :first-child { order: 2; }
.split__img { position: relative; }
.split__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__img--small { justify-self: center; width: min(300px, 80%); }
.split__img--small img { aspect-ratio: auto; height: auto; }
.split__img::after { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--gold-deep); z-index: -1; }
.split__body { display: grid; gap: 16px; justify-items: start; }
.split__body h3 { font-size: clamp(26px, 2.6vw, 38px); font-weight: 500; color: #3a2210; }
.section--dark .split__body h3 { color: var(--gold-light); }
.split__body p { font-size: 16.5px; line-height: 1.75; max-width: 52ch; }
.num { font: 500 14px/1 var(--f-display); letter-spacing: .2em; color: var(--gold-deep); }

/* pillars */
.pillars { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgb(226 184 102 / .25); }
.pillars li { padding: 34px clamp(16px, 2.4vw, 34px) 10px 0; display: grid; gap: 12px; align-content: start; }
.pillars li + li { padding-left: clamp(16px, 2.4vw, 34px); border-left: 1px solid rgb(226 184 102 / .25); }
.pillars h3 { font-size: 24px; font-weight: 500; color: var(--gold-light); }
.pillars p { color: var(--on-dark-soft); font-size: 15.5px; line-height: 1.7; }

/* actives list (technology) */
.alist { list-style: none; padding: 0; margin: 0; display: grid; }
.alist li { display: grid; grid-template-columns: 70px 1fr 1.3fr; gap: clamp(16px, 3vw, 40px); align-items: center; padding: 26px 0; border-top: 1px solid rgb(168 117 44 / .3); }
.alist li:last-child { border-bottom: 1px solid rgb(168 117 44 / .3); }
.alist h3 { font-size: clamp(20px, 2vw, 28px); font-weight: 500; color: #3a2210; }
.alist p { color: var(--text-soft); font-size: 16px; }
.alist .ring { width: 60px; height: 60px; }

/* products */
.prow { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; padding-block: clamp(28px, 4vw, 52px); border-top: 1px solid rgb(168 117 44 / .25); }
.prow:nth-child(even) > :first-child { order: 2; }
.prow__img { overflow: hidden; }
.prow__img img { width: 100%; aspect-ratio: 196 / 150; object-fit: cover; transition: transform 1.2s var(--ease); }
.prow:hover .prow__img img { transform: scale(1.04); }
.prow__body { display: grid; gap: 14px; justify-items: start; }
.prow__body h2 { font-size: clamp(28px, 3vw, 44px); font-weight: 500; color: #3a2210; }
.prow__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.prow__tags li { padding: 7px 14px; border: 1px solid rgb(168 117 44 / .5); border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.prow__body p { color: var(--text-soft); max-width: 46ch; font-size: 16px; line-height: 1.7; }

/* contact */
.contact { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 6vw, 96px); align-items: start; }
.cinfo { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.cinfo li { display: grid; grid-template-columns: 50px 1fr; gap: 16px; align-items: center; }
.cinfo small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 2px; }
.cinfo a, .cinfo span { font-size: 16px; color: var(--text); }
.cinfo a:hover { color: var(--gold-deep); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; padding: clamp(22px, 3vw, 40px); background: var(--paper); border: 1px solid rgb(168 117 44 / .35); }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.field label i { color: var(--red); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: #fffaf1; border: 1px solid rgb(168 117 44 / .45); border-radius: 2px;
  font: 400 16px/1.4 var(--f-body); color: var(--text);
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgb(226 184 102 / .35); }
.field [aria-invalid="true"] { border-color: #b3261e; }
.field .err { min-height: 1em; font-size: 13px; color: #b3261e; }
.form__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form__status { font-size: 14px; color: var(--text-soft); }

/* dialog */
dialog.vdlg { overscroll-behavior: contain; width: min(94vw, 1040px); padding: 0; border: 1px solid var(--gold-deep); background: var(--ink); color: var(--on-dark); }
dialog.vdlg::backdrop { background: rgb(8 5 3 / .82); }
dialog.vdlg[open] { animation: dlg .45s var(--ease); }
@keyframes dlg { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.vdlg__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgb(226 184 102 / .2); }
.vdlg__head h2 { font-size: 16px; font-weight: 500; letter-spacing: .1em; color: var(--gold-light); }
.vdlg__close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(226 184 102 / .4); background: none; font-size: 18px; }
.vdlg video { width: 100%; aspect-ratio: 16 / 9; background: #0a0604; object-fit: cover; }
.vdlg__empty { display: none; padding: 18px; text-align: center; color: var(--on-dark-soft); font-size: 14px; }
.vdlg.is-empty .vdlg__empty { display: block; }

/* 404 */
.nf { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: 80px; }
.nf h1 { font-size: clamp(60px, 10vw, 140px); color: var(--gold-light); font-weight: 500; }
.nf p { margin: 10px 0 26px; color: var(--on-dark-soft); }

/* ---------- reveal motion ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .hero__img--l img { animation: inL 1.6s var(--ease) both; }
.js .hero__img--r img { animation: inR 1.6s var(--ease) .1s both; }
.is-swapped .hero__img img { animation: none !important; }
::view-transition-old(root) { animation: vt-out .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .38s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@keyframes inL { from { opacity: 0; transform: translateX(-30px) scale(1.04); } }
@keyframes inR { from { opacity: 0; transform: translateX(30px) scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .sparkle { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav { gap: 14px; }
  .nav a { font-size: 11px; letter-spacing: .05em; }
  .vband__grid { grid-template-columns: 1fr auto 1.2fr; }
  .vband__brand { display: none; }
}
@media (max-width: 1024px) {
  .burger { display: block; }
  .top__end { margin-left: auto; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) 20px;
    background: #120a05; border-bottom: 1px solid rgb(226 184 102 / .2);
    opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav a { padding: 16px 0; font-size: 13px; border-bottom: 1px solid rgb(226 184 102 / .1); }
  .nav a::after { display: none; }
  .hero__grid { grid-template-columns: 1fr 1fr; min-height: 0; }
  .hero__copy { grid-column: 1 / -1; order: -1; padding-top: 44px; }
  .hero__img { height: clamp(260px, 50vw, 420px); }
  .cats__grid { grid-template-columns: 1fr 1fr; }
  .cat { border-bottom: 1px solid rgb(168 117 44 / .28); }
  .cat:nth-child(even) { border-right: 0; }
  .set__grid { grid-template-columns: 1fr 1fr; }
  .set__img { grid-column: 1 / -1; order: -1; }
  .trio { grid-template-columns: 1fr; }
  .teaser { border-right: 0; border-bottom: 1px solid rgb(168 117 44 / .25); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__grid > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .phero__grid, .split, .contact, .prow { grid-template-columns: 1fr; }
  .phero__img { height: 320px; order: -1; margin-inline: calc(-1 * var(--gut)); }
  .phero__img--small { height: auto; margin-inline: 0; padding-block: 32px 0; }
  .phero__img--small img { mask-image: none; -webkit-mask-image: none; width: 200px; }
  .phero__img img { mask-image: linear-gradient(180deg, #000 60%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); }
  .split--rev > :first-child, .prow:nth-child(even) > :first-child { order: 0; }
  .pillars { grid-template-columns: 1fr; }
  .pillars li + li { padding-left: 0; border-left: 0; border-top: 1px solid rgb(226 184 102 / .25); }
}
@media (max-width: 720px) {
  .top__in { min-height: 64px; gap: 10px; }
  .top .brand__shield { width: 34px; }
  .top .brand__name { font-size: 22px; }
  .top .brand__tag { font-size: 7px; }
  .top__end .btn { display: none; }
  .lang { height: 44px; }
  .lang a { min-width: 38px; }
  .hero__logo .brand__name { font-size: 36px; }
  .badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .badges li { width: auto; font-size: 9px; }
  .vband__grid { grid-template-columns: 1fr auto; }
  .vband__face { grid-column: 1 / -1; height: 220px; order: 3; margin-inline: calc(-1 * var(--gut)); }
  .cat { padding-inline: 8px; }
  .set__grid { grid-template-columns: 1fr; }
  .alist li { grid-template-columns: 60px 1fr; }
  .alist li p { grid-column: 2; }
  .form { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__grid > div + div { border-left: 0; padding-left: 0; border-top: 1px solid rgb(226 184 102 / .16); padding-top: 24px; }
}
@media (max-width: 400px) {
  .top .brand__tag { display: none; }
  .btn { padding: 0 20px; letter-spacing: .08em; }
}

/* product names on the products page */
.plist { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 0; width: 100%; max-width: 46ch; border-top: 1px solid rgb(168 117 44 / .3); }
.plist li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgb(168 117 44 / .3); font-size: 14.5px; font-weight: 500; color: var(--text); }
.plist small { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--gold-deep); font-variant-numeric: tabular-nums; }