:root {

  --coal:        #0c0b0a;
  --coal-2:      #110f0d;
  --coal-3:      #1a1714;
  --ivory:       #ece5d8;
  --ivory-dim:   #b9b1a3;
  --muted:       #8a8276;
  --gold:        #b99a62;
  --gold-light:  #d6bd8c;
  --gold-line:   rgba(185, 154, 98, .22);
  --gold-soft:   rgba(185, 154, 98, .16);
  --bordo:       #4a1418;
  --line:        rgba(236, 229, 216, .09);

  --gold-hi:     #e2cda2;
  --gold-muted:  #a48c5d;
  --gold-border: rgba(185, 154, 98, .26);
  --gold-hair:   rgba(185, 154, 98, .12);

  --t-fast: .18s;
  --t-med:  .32s;
  --t-slow: .5s;

  --surface:      #13110e;
  --surface-hi:   #1a1612;
  --surface-edge: rgba(214, 189, 140, .15);

  --serif: "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", serif;
  --sans:  "Jost", "Jost Fallback", "Helvetica Neue", Arial, sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --edge: max(var(--gutter), (100% - var(--container)) / 2);
  --col-gap: clamp(16px, 2.4vw, 32px);
  --section-y: clamp(88px, 10vw, 148px);
  --flow-gap: clamp(48px, 6vw, 88px);
  --flow-thread: clamp(40px, 5vw, 72px);
  --block-y: clamp(48px, 7vw, 96px);
  --header-h: 84px;
  --header-h-scrolled: 70px;

  --nav-gap: clamp(20px, 6vh, 56px);

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-fade: cubic-bezier(.45, .05, .25, 1);
  --dur-1: .9s;
  --dur-2: 1.4s;
  --dur-3: 2s;
  --stagger: .12s;
}

@font-face {
  font-family: "Cormorant Fallback";
  font-weight: 300 700;
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Times"), local("Liberation Serif"), local("Tinos");
  size-adjust: 96.25%;
  ascent-override: 95.6%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}

@font-face { font-family: "Jost Fallback"; font-weight: 300; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 90.87%; ascent-override: 117.8%; descent-override: 41.8%; line-gap-override: 0%; }
@font-face { font-family: "Jost Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 94.11%; ascent-override: 113.7%; descent-override: 40.4%; line-gap-override: 0%; }
@font-face { font-family: "Jost Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo");
  size-adjust: 98.42%; ascent-override: 108.7%; descent-override: 38.6%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: hidden;

  background-color: var(--coal);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--gold); color: var(--coal); }

.container {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

.icon-sprite { position: absolute; width: 0; height: 0; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 1200;
  padding: 12px 20px;
  background: var(--coal-3); color: var(--gold-hi);
  box-shadow: inset 0 0 0 1px var(--gold-border);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  transform: translateY(-220%);
  transition: transform var(--t-med) var(--ease);
}
.skip-link:focus { transform: none; }

.eyebrow {
  display: flex; align-items: center; gap: 16px;
  font-size: 11.5px; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-muted);
  margin-bottom: 28px;
}
.eyebrow::before { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); flex: none; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); flex: none; }

.title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 1.02;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.title--sm { font-size: clamp(34px, 4vw, 58px); }
em { font-style: italic; color: var(--gold-light); }

.rule {
  display: block; width: 64px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.rule--center {
  width: 120px; margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.thread {
  position: absolute; left: 50%; z-index: 2;
  width: 1px;
  transform: translateX(-.5px);
}
.thread--top {
  top: 0;
  height: var(--flow-thread);
  background: linear-gradient(180deg, var(--gold), transparent);
  opacity: .7;
}
.thread--end::after {
  content: ""; position: absolute; left: -2px; bottom: -3px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-light);
}
.thread--hero {
  bottom: 0; height: var(--flow-thread);
  background: linear-gradient(180deg, transparent, var(--gold)); opacity: .7;
}

.thread--hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: -22px; width: 44px; }

.thread--hero span {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 35%, var(--gold) 50%, transparent 65%, transparent 100%) no-repeat 0 -100% / 100% 45%;
}
.motion-full .thread--hero span { animation: threadDrop 3.6s var(--ease) 2; }
@keyframes threadDrop { from { background-position: 0 -120%; } to { background-position: 0 230%; } }

.photo { filter: none; }
.frame {
  position: relative; overflow: hidden;
  background: var(--coal-3);
}
.frame::before {
  content: ""; position: absolute; inset: 14px; z-index: 2;
  border: 1px solid rgba(214, 189, 140, .16);
  pointer-events: none;
}

.frame { box-shadow: inset 0 0 0 1px var(--gold-hair); }

.frame { --os: 28px; }

.scene {
  position: relative;
  padding-block: var(--section-y);
  isolation: isolate;
}

.scene + .scene { padding-top: 0; }
.passage + .scene--details { margin-top: calc(-1 * clamp(80px, 14vh, 160px)); padding-top: 0; }

.remote + .scene--finale { padding-top: calc(var(--flow-thread) + clamp(22px, 3vh, 34px)); z-index: 1; }

.scene--about, .scene--details, .scene--trust, .scene--finale { padding-bottom: var(--block-y); }

.scene--trust:has(+ .remote) { padding-bottom: 0; }

.scene--index {
  min-height: calc(100vh - var(--header-h-scrolled)); min-height: calc(100svh - var(--header-h-scrolled));
  display: flex; flex-direction: column; justify-content: center;
}

.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  transition: border-color .5s, height .5s var(--ease);

  background: #090806;
  border-bottom: 1px solid var(--line);
}
.header.is-scrolled {
  --header-h: var(--header-h-scrolled);
  background: #090806;
  border-color: var(--line);
}
.header__inner { height: 100%; display: flex; align-items: center; gap: 40px; }

.brand { display: flex; flex-direction: column; flex-shrink: 0; line-height: 1.1; margin-inline-end: auto; }
.brand__name { font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: .01em; white-space: nowrap; }
.brand__tag { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }

.nav { display: flex; align-items: center; gap: 36px; }
.nav__link {
  position: relative;
  padding-block: 8px;
  font-size: 11.5px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ivory-dim);
  transition: color var(--t-med) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: .24em; bottom: 0;
  height: 1px; background: linear-gradient(90deg, var(--gold), var(--gold-hi));
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-slow) var(--ease);
}
@media (hover: hover) {
  .nav__link:hover { color: var(--ivory); }
  .nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
}

.burger { display: none; width: 44px; height: 44px; position: relative; z-index: 60; }
.burger span {
  position: absolute; left: 10px; right: 10px; height: 1px; background: var(--ivory);
  transition: transform .5s var(--ease), top .5s var(--ease);
}
.burger span:first-child { top: 18px; }
.burger span:last-child  { top: 26px; }

.hero {
  position: relative;
  min-height: max(680px, 100vh); min-height: max(680px, 100svh);
  display: grid; align-items: center;
  padding-top: calc(var(--header-h) + 20px);
  padding-bottom: clamp(90px, 12vh, 140px);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.hero__stage {
  position: absolute; inset: 0; z-index: -5;
}
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 78%;
}
.hero__stage { overflow: hidden; }
.hero__img { position: absolute; inset: 0; }
.hero__stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,11,10,.8) 0%, rgba(12,11,10,.6) 24%, rgba(12,11,10,.56) 52%, rgba(12,11,10,.7) 78%, var(--coal) 100%);
}

.hero__frame {
  position: absolute; inset: clamp(14px, 2.4vw, 32px); top: calc(var(--header-h) + 8px);
  z-index: -1; pointer-events: none;
}
.hero__frame i { position: absolute; width: 36px; height: 36px; border: 0 solid var(--gold-line); }
.hero__frame i:nth-child(1) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hero__frame i:nth-child(2) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hero__frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hero__frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.hero__content {
  position: relative; z-index: 1;
  min-width: 0;
}

.hero__h1 { margin: 0; font: inherit; letter-spacing: normal; }
.hero__h1 > .hero__name { display: block; }
.hero__name {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(58px, 10.5vw, 172px);

  line-height: 1;
  padding-block: .06em .24em;
  margin-block: -.06em -.22em;
  letter-spacing: -.012em;
  font-weight: 500;

  background: linear-gradient(180deg, #fbf1d9 0%, #efd9a8 34%, #d8b577 64%, #b8914f 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.hero__content .rule--center { margin-block: clamp(20px, 3.2vh, 34px); }
.hero__question {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1.2;
  max-width: 32ch; margin-inline: auto;
  text-wrap: balance;
  color: #e3dccd;
}
.hero__question em { color: var(--gold); }
.hero__lead {
  max-width: 540px;
  margin: 18px auto 0;
  font-size: clamp(15px, 1.25vw, 18px);
  color: var(--ivory-dim);
}
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: clamp(26px, 4.2vh, 44px); }
.hero__meta {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 18px;
  margin-top: clamp(24px, 4.2vh, 48px);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
}
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold-muted); }

.index__head { grid-column: 1 / span 5; align-self: start; }
.index__note { margin-top: 32px; color: var(--ivory-dim); max-width: 360px; }
.index__list {
  grid-column: 7 / -1;
  align-self: start;
  border-top: 1px solid var(--gold-border);
}
.index__item {
  position: relative;
  display: grid; grid-template-columns: 52px 1fr 24px; align-items: baseline; column-gap: 12px;
  padding-block: clamp(20px, 2.2vw, 28px);
  border-bottom: 1px solid var(--gold-hair);
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.15;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-med) var(--ease), padding-inline-start var(--t-slow) var(--ease);
}
.index__item::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.index__num { font-weight: 400; font-style: italic; font-size: 18px; color: var(--gold-muted); transition: color var(--t-med) var(--ease); }
.index__arrow { align-self: center; width: 20px; height: 20px; color: var(--gold-muted); opacity: .45; transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease), color var(--t-med) var(--ease); }
@media (hover: hover) {
  a.index__item:hover { color: var(--gold-hi); padding-inline-start: 10px; }
  a.index__item:hover::after { transform: scaleX(1); }
  a.index__item:hover .index__num { color: var(--gold); }
  a.index__item:hover .index__arrow { opacity: 1; color: var(--gold-hi); transform: translateX(4px); }
}
a.index__item:active { color: var(--gold-hi); }
a.index__item:active::after { transform: scaleX(1); }

.about { align-items: center; }
.about__media { grid-column: 1 / span 7; grid-row: 1; }

.frame--tall { aspect-ratio: 4 / 5; max-height: calc(100vh - var(--header-h-scrolled) - 2 * var(--nav-gap)); }

.frame--tall img, .detail__media img {
  position: absolute; left: 0; width: 100%; object-fit: cover;
  top: calc(-1 * var(--os)); height: calc(100% + 2 * var(--os));
}

.parallax { position: absolute; inset: 0; overflow: hidden; --os: 64px; }
.parallax img { position: absolute; left: 0; width: 100%; top: calc(-1 * var(--os)); height: calc(100% + 2 * var(--os)); object-fit: cover; }
.about__panel {
  grid-column: 7 / -1; grid-row: 1;
  position: relative; z-index: 2;
  padding: clamp(36px, 4.5vw, 64px);
}
.about__panel .rule { margin-block: 28px; }
.about__text {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(23px, 2.1vw, 31px);
  line-height: 1.38;
}

.passage {
  position: relative;
  height: 82vh; height: 82svh; min-height: 560px;
  display: grid; place-items: center;
  overflow: hidden; isolation: isolate;
  text-align: center;
}
.passage__media { position: absolute; inset: 0; z-index: -2; }
.passage__media::after, .remote__media::after { z-index: 2; }
.passage__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--coal) 0%, rgba(12, 11, 10, .6) 20%, rgba(12, 11, 10, .6) 66%, var(--coal) 100%);
}
.passage__line {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(46px, 8vw, 128px);
  line-height: 1.02; letter-spacing: -.015em;
}

.scene--details { z-index: 2; }
.details__head { grid-column: 1 / -1; margin-bottom: var(--block-y); }

.details__list { grid-column: 1 / -1; grid-row: 2; }
.detail { display: flex; flex-direction: column; }
.detail__media { display: none; }
@media (min-width: 901px) {

  .details__list, .detail {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .details__list > * { grid-column: 1 / -1; }
  .detail {
    grid-template-rows: 1fr auto auto auto auto 1fr;
    padding-block: clamp(40px, 6vh, 72px);
  }
  .detail:first-child { padding-top: 0; }
  .detail > * { grid-column: 7 / -1; }
  .detail__num { grid-row: 2; }
  .detail__title { grid-row: 3; }
  .detail .rule { grid-row: 4; }
  .detail__text { grid-row: 5; }

  .detail:has(.detail__more) { grid-template-rows: 1fr auto auto auto auto auto 1fr; }
  .detail__more { grid-row: 6; justify-self: start; }

  .detail:nth-child(even) .detail__media { grid-column: 8 / -1; }
  .detail:nth-child(even) > :not(.detail__media) { grid-column: 1 / span 6; justify-self: end; text-align: end; }
  .detail:nth-child(even) .rule { background: linear-gradient(270deg, var(--gold), transparent); }
  .detail__media {
    display: block; margin: 0;
    grid-column: 1 / span 5; grid-row: 1 / -1;
    aspect-ratio: 4 / 5;
    max-height: max(440px, calc(100vh - 170px));
  }

  .detail:last-of-type { padding-bottom: 0; }
  .details__cta { grid-column: 1 / -1; }
}
.detail__num { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 22px; color: var(--gold); margin-bottom: 14px; }
.detail__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 3.4vw, 54px); line-height: 1.06;
  text-wrap: balance;
}
.detail .rule { margin-block: 26px; }
.detail__text { max-width: 440px; color: var(--ivory-dim); }

.detail__more { align-self: flex-start; margin-top: 14px; }
.details__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: clamp(40px, 6vh, 72px);
}
.details__cta p { color: var(--ivory-dim); }

.trust { align-items: end; }
.trust__head { grid-column: 1 / span 4; }

.trust__list { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: calc(var(--col-gap) * 1.5); }
.trust__item::before { content: ""; display: block; grid-column: 1 / -1; width: 40px; height: 1px; margin-bottom: 26px; background: linear-gradient(90deg, var(--gold), transparent); }
.trust__big {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 3.6vw, 58px); line-height: 1;
}
.trust__big small {
  display: block; margin-top: 14px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 400;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold-muted);
}
.trust__item dd { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--ivory-dim); max-width: 260px; }

.remote {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: var(--section-y);
  overflow: hidden;
  isolation: isolate;
}
.remote__media { position: absolute; inset: 0; z-index: -2; }

.remote__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--coal) 0%, rgba(12,11,10,0) 16%, rgba(12,11,10,0) 82%, var(--coal) 100%),
    linear-gradient(rgba(12,11,10,.38), rgba(12,11,10,.38)),
    linear-gradient(rgba(12,11,10,.3), rgba(12,11,10,.3)),
    linear-gradient(90deg, rgba(12,11,10,.85), rgba(12,11,10,.1) 70%);
}
.remote__inner { position: relative; }
.remote__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(56px, 11vw, 168px);
  line-height: .92;
  letter-spacing: -.02em;
}
.remote__text {
  max-width: 540px;
  margin-top: 40px;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ivory-dim);
}

.scene--finale { text-align: center; overflow: hidden; }
.finale__title { max-width: 15ch; margin-inline: auto; }
.signature {
  display: grid; grid-template-columns: 1.05fr .85fr .85fr 1.25fr;
  margin-top: clamp(72px, 9vw, 120px);
  text-align: start;
  column-gap: calc(var(--col-gap) * 1.5);
}

.signature__item { padding: 0; }
.signature dt { font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-muted); margin-bottom: 10px; }
.signature dd { font-size: 15px; color: var(--ivory-dim); font-variant-numeric: lining-nums; }
.signature__item--name dt {
  font-family: var(--serif); font-weight: 400; font-size: 26px; letter-spacing: 0; text-transform: none;
  color: var(--ivory); margin-bottom: 4px;
  line-height: 1.2;
}

.footer { padding-block: 0 40px; }
.footer__inner { border-top: 1px solid var(--line); padding-top: 56px; }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; }
.footer__brand { display: flex; flex-direction: column; }

.footer__nav { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-block: -8px; }
.footer__nav a {
  padding-block: 8px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ivory-dim);
  transition: color .3s;
}
.footer__nav a:hover { color: var(--gold-light); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  margin-top: 48px; padding-top: 8px;
  font-size: 13px; color: var(--muted);
}
.footer__note { max-width: 560px; }

.dock { display: none; }

.menu {
  position: fixed; inset: 0; z-index: 1000;
  width: 100vw; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--coal);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }
.menu__bar {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: calc(72px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--edge) 0;
  border-bottom: 1px solid var(--line);
}
.menu__close {
  position: relative; flex: none;
  width: 48px; height: 48px; margin-inline-end: -4px;
}
.menu__close span {
  position: absolute; left: 12px; right: 12px; top: 23px; height: 1px; background: var(--ivory);
  transform: rotate(45deg);
}
.menu__close span + span { transform: rotate(-45deg); }
.menu__nav {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 4px;
  padding: 40px var(--edge) calc(48px + env(safe-area-inset-bottom));
}
.menu__link {
  font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 10vw, 44px); line-height: 1.3;
  color: var(--ivory);
  transform: translateY(16px); opacity: 0;
  transition: transform .6s var(--ease), opacity .6s var(--ease), color .3s;
}
.menu__link:hover, .menu__link:focus-visible { color: var(--gold-light); }
.menu.is-open .menu__link, .menu.is-open .menu__cta { transform: none; opacity: 1; }
.menu.is-open .menu__link:nth-child(2) { transition-delay: .05s; }
.menu.is-open .menu__link:nth-child(3) { transition-delay: .1s; }
.menu.is-open .menu__link:nth-child(4) { transition-delay: .15s; }
.menu.is-open .menu__cta { transition-delay: .2s; }

:where(a, button):focus-visible {
  outline: 1px solid var(--gold-hi);
  outline-offset: 5px;
}
:where(a, button) { -webkit-tap-highlight-color: transparent; }

.icon { width: 18px; height: 18px; flex: none; }
.btn .icon, .header__cta .icon, .dock__btn .icon, .menu__cta .icon { width: 16px; height: 16px; }

.btn {
  --btn-h: 56px;
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: var(--btn-h); padding: 0 30px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase;
  border-radius: 1px;
  transition:
    color var(--t-med) var(--ease),
    background-color var(--t-med) var(--ease),
    box-shadow var(--t-slow) var(--ease),
    transform var(--t-fast) var(--ease);
}
.btn .icon { transition: transform var(--t-med) var(--ease); }

.btn::before {
  content: ""; position: absolute; inset: -5px; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--gold-hair);
  opacity: 0; transform: scale(.985);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.btn--gold, .dock__btn--gold, .menu__cta {
  color: #1b150c;
  background-color: #b6985f;
  background-image: linear-gradient(180deg, rgba(255, 242, 212, .2) 0%, rgba(255, 242, 212, 0) 46%, rgba(58, 38, 10, .18) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 222, .42),
    inset 0 -1px 0 rgba(70, 46, 12, .38);
}

.btn--gold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 248, 230, .26) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  transition: background-position .5s var(--ease);
}

.btn--ghost {
  color: var(--ivory);
  background-color: #16130f;
  background-image: linear-gradient(180deg, rgba(255, 240, 210, .045), rgba(255, 240, 210, 0) 55%);
  box-shadow:
    inset 0 0 0 1px rgba(185, 154, 98, .42),
    inset 0 1px 0 rgba(255, 240, 210, .06);
}
.btn--ghost::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
  transform: scaleX(0);
  transition: transform var(--t-slow) var(--ease);
}

@media (hover: hover) {
  .btn:hover::before { opacity: 1; transform: none; }
  .btn:hover .icon { transform: translateX(2px); }

  .btn--gold:hover {
    background-color: #c0a26a;
    box-shadow:
      inset 0 1px 0 rgba(255, 246, 226, .5),
      inset 0 -1px 0 rgba(70, 46, 12, .38);
  }
  .btn--gold:hover::after { background-position: -30% 0; }

  .btn--ghost:hover {
    color: var(--gold-hi);
    background-color: #1d1914;
    box-shadow: inset 0 0 0 1px rgba(185, 154, 98, .5);
  }
  .btn--ghost:hover::after { transform: scaleX(1); }
}

.btn:active { transform: translateY(1px); }
.btn--gold:active, .dock__btn--gold:active, .menu__cta:active {
  background-color: #a88b55;
  box-shadow: inset 0 1px 3px rgba(40, 26, 6, .45), inset 0 -1px 0 rgba(255, 244, 222, .18);
}
.btn--ghost:active, .dock__btn:not(.dock__btn--gold):active {
  background-color: rgba(185, 154, 98, .1);
  box-shadow: inset 0 0 0 1px rgba(185, 154, 98, .6);
}

.header__cta {
  display: inline-flex; align-items: center; gap: 10px;
  height: 42px; padding-inline: 18px;
  font-size: 11px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold-hi);
  background-color: #15120e;
  box-shadow: inset 0 0 0 1px rgba(185, 154, 98, .36), inset 0 1px 0 rgba(255, 240, 210, .05);
  transition: color var(--t-med) var(--ease), background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.header__cta .icon { transition: transform var(--t-med) var(--ease); }
@media (hover: hover) {
  .header__cta:hover {
    color: #f1e4c6;
    background-color: rgba(185, 154, 98, .1);
    box-shadow: inset 0 0 0 1px rgba(185, 154, 98, .6);
  }
  .header__cta:hover .icon { transform: translateX(2px); }
}
.header__cta:active { background-color: rgba(185, 154, 98, .16); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 44px; padding-block: 10px 12px;
  font-size: 11.5px; font-weight: 400; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-hi);
  background:
    linear-gradient(90deg, var(--gold), var(--gold-hi)) no-repeat 0 100% / 0% 1px,
    linear-gradient(var(--gold-border), var(--gold-border)) no-repeat 0 100% / 100% 1px;
  transition: background-size var(--t-slow) var(--ease), color var(--t-med) var(--ease);
}
.link-arrow .icon { width: 20px; height: 20px; transition: transform var(--t-med) var(--ease); }
@media (hover: hover) {
  .link-arrow:hover { color: #f1e4c6; background-size: 100% 1px, 100% 1px; }
  .link-arrow:hover .icon { transform: translateX(4px); }
}
.link-arrow:active { background-size: 100% 1px, 100% 1px; }

.link-inline {
  color: var(--gold-hi);
  padding-bottom: 2px;
  background:
    linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0% 1px,
    linear-gradient(var(--gold-border), var(--gold-border)) no-repeat 0 100% / 100% 1px;
  transition: background-size var(--t-slow) var(--ease), color var(--t-med) var(--ease);
}
@media (hover: hover) { .link-inline:hover { color: #f1e4c6; background-size: 100% 1px, 100% 1px; } }

.about__panel {
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--surface-edge);
}
.about__panel::before, .about__panel::after {
  content: ""; position: absolute; width: 40px; height: 40px; pointer-events: none;
  border: 0 solid rgba(185, 154, 98, .55);
}
.about__panel::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.about__panel::after { right: 0; bottom: 0; border-bottom-width: 1px; border-right-width: 1px; }

.frame::before { transition: border-color var(--t-slow) var(--ease); }
.frame > picture { display: block; }
.about__media .frame img, .detail__media img { transition: scale .5s var(--ease); }
@media (hover: hover) {
  .frame:hover::before { border-color: rgba(214, 189, 140, .32); }
  .about__media .frame:hover img, .detail__media:hover img { scale: 1.025; }
}

.channels {
  display: grid; grid-template-columns: repeat(2, auto);
  margin-top: 64px;
  width: max-content; max-width: 100%;
  background: rgba(19, 17, 14, .94);
  box-shadow: inset 0 0 0 1px var(--surface-edge);
}
.channel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon label arrow" "icon value arrow";
  column-gap: 18px; row-gap: 6px;
  align-items: center;
  padding: 26px 28px;
  transition: background-color var(--t-med) var(--ease);
}
.channel + .channel { box-shadow: inset 1px 0 0 var(--gold-hair); }
.channel::after {
  content: ""; position: absolute; left: 28px; right: 28px; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow) var(--ease);
}
.channel__icon {
  grid-area: icon;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--gold-hi);
  box-shadow: inset 0 0 0 1px var(--gold-border);
  transition: background-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.channel__label { grid-area: label; align-self: end; font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-muted); }
.channel__value { grid-area: value; align-self: start; font-family: var(--serif); font-weight: 400; font-size: 25px; line-height: 1.15; font-variant-numeric: lining-nums; white-space: nowrap; }
.channel__arrow { grid-area: arrow; width: 20px; height: 20px; color: var(--gold-muted); opacity: .5; transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease); }
@media (hover: hover) {
  .channel:hover { background-color: rgba(185, 154, 98, .05); }
  .channel:hover::after { transform: scaleX(1); }
  .channel:hover .channel__icon { background-color: rgba(185, 154, 98, .1); box-shadow: inset 0 0 0 1px rgba(185, 154, 98, .55); }
  .channel:hover .channel__arrow { opacity: 1; transform: translateX(4px); }
}
.channel:active { background-color: rgba(185, 154, 98, .09); }

.finale__label {
  display: block;
  margin-top: clamp(32px, 4.5vh, 48px);
  font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-muted);
}
.finale__phone {
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.6vw, 36px);
  margin-top: 14px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 6.2vw, 92px);
  line-height: 1.05;
  letter-spacing: .02em;
  font-variant-numeric: lining-nums;
  color: var(--gold-hi);
  white-space: nowrap;
  transition: color var(--t-med) var(--ease);
}
.finale__phone::before, .finale__phone::after {
  content: ""; height: 1px; flex: none;
  width: clamp(28px, 4vw, 64px);
  transition: width var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease);
  opacity: .8;
}
.finale__phone::before { background: linear-gradient(90deg, transparent, var(--gold)); }
.finale__phone::after  { background: linear-gradient(90deg, var(--gold), transparent); }
@media (hover: hover) {
  .finale__phone:hover { color: #f1e4c6; }
  .finale__phone:hover::before, .finale__phone:hover::after { width: clamp(40px, 5.4vw, 88px); opacity: 1; }
}
.finale__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: clamp(30px, 4.2vh, 46px); }
.finale__actions .btn { --btn-h: 60px; padding-inline: 38px; }
.finale__meta {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px;
  margin-top: 26px;
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--muted);
}
.signature a {
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0% 1px;
  padding-bottom: 2px;
  transition: color var(--t-med) var(--ease), background-size var(--t-slow) var(--ease);
}
@media (hover: hover) { .signature a:hover { color: var(--gold-hi); background-size: 100% 1px; } }

.signature dd > a:not(.address__map) { display: inline-block; padding-block: 6px; margin-block: -6px; background-position: 0 calc(100% - 4px); }

.menu__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 40px; min-height: 56px; padding: 0 30px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  transform: translateY(16px); opacity: 0;
  transition: transform .6s var(--ease), opacity .6s var(--ease), background-color var(--t-fast) var(--ease);
}

.dock__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  border-radius: 1px;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.dock__btn:not(.dock__btn--gold) { color: var(--ivory); background-color: #1a1612; box-shadow: inset 0 0 0 1px rgba(185, 154, 98, .4), inset 0 1px 0 rgba(255, 240, 210, .05); }
.dock__btn:active { transform: translateY(1px); }

.lang { display: flex; align-items: center; margin-inline-start: -16px; }
.lang__link {
  position: relative;
  display: grid; place-items: center;
  min-width: 34px; height: 40px; padding-inline-start: .16em;
  font-size: 11px; font-weight: 400; letter-spacing: .16em;
  color: var(--muted);
  transition: color var(--t-med) var(--ease);
}
.lang__link + .lang__link::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 50%;
  width: 1px; height: 10px; margin-top: -5px;
  background: var(--gold-border);
}
.lang__link[aria-current="page"] { color: var(--gold-hi); }
.lang__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 7px;
  width: 12px; height: 1px; margin-left: -5px;
  background: var(--gold);
}
@media (hover: hover) { .lang__link:not([aria-current]):hover { color: var(--ivory); } }

.lang-mini { display: none; position: relative; }
.lang-mini summary {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 50px; height: 44px; padding-inline-start: .16em;
  font-size: 11px; font-weight: 400; letter-spacing: .16em; color: var(--gold-hi);
  list-style: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lang-mini summary::-webkit-details-marker { display: none; }
.lang-mini summary::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border: solid var(--gold-muted); border-width: 0 1px 1px 0;
  transform: rotate(45deg);
  transition: transform var(--t-med) var(--ease);
}
.lang-mini[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.lang-mini summary:focus-visible { outline: 1px solid var(--gold-hi); outline-offset: -2px; }
.lang-mini__list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 70;
  display: flex; flex-direction: column;
  min-width: 132px; padding: 6px;
  background: var(--coal-3);
  box-shadow: inset 0 0 0 1px var(--gold-border);
}
.lang-mini__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 0 14px;
  font-size: 13px; color: var(--ivory-dim);
}
.lang-mini__list a b { font-weight: 400; font-size: 10.5px; letter-spacing: .2em; color: var(--gold-muted); }
.lang-mini__list a[aria-current="page"] { color: var(--gold-hi); background: rgba(185, 154, 98, .08); }

.menu__lang { display: flex; gap: 4px; margin-top: 28px; margin-inline-start: -8px; }
.menu__lang .lang__link { min-width: 48px; height: 44px; font-size: 12px; }

.frame--portrait img { object-position: 50% 30%; }

.photo--portrait { filter: none; }
.about__sub {
  margin-top: 22px; max-width: 44ch;
  font-size: 15px; line-height: 1.65; color: var(--ivory-dim);
}

.address { font-style: normal; }
.address__map {
  display: inline-block; margin-top: 2px; margin-bottom: -8px; padding-block: 8px 10px;
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-hi);
}
.address__map .icon { display: none; }
.address__note { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.footer__address {
  margin-top: 18px;
  font-style: normal; font-size: 13px; line-height: 1.75; color: var(--ivory-dim);
}
.footer__address a { display: inline-block; padding-block: 6px; margin-block: -6px; transition: color var(--t-med) var(--ease); }
@media (hover: hover) { .footer__address a:hover { color: var(--gold-light); } }

@media (max-width: 900px) {
  .channel + .channel { box-shadow: inset 0 1px 0 var(--gold-hair); }
  .channel::after { left: 22px; right: 22px; }
}
@media (max-width: 560px) {
  .btn { --btn-h: 56px; padding-inline: 20px; gap: 12px; }
  .finale__actions .btn { --btn-h: 58px; padding-inline: 20px; }
  .hero__actions, .finale__actions { gap: 12px; }
  .finale__phone { gap: 0; }
  .finale__phone::before, .finale__phone::after { display: none; }
  .finale__meta { gap: 10px; letter-spacing: .24em; }
  .channel { padding: 22px; column-gap: 16px; }
  .channel__icon { width: 42px; height: 42px; }
  .channel__value { font-size: 23px; }
}
@media (max-width: 380px) {
  .channel { padding: 20px 18px; column-gap: 14px; }
  .channel__value { font-size: 21px; }
  .channel__arrow { display: none; }
}

.reveal--line { transform-origin: left center; }
.rule--center.reveal--line { transform-origin: center; }

@media (max-width: 1024px) {
  .nav { gap: 24px; }
  .header__cta span { display: none; }
  .header__cta { padding-inline: 13px; }
  .trust__head { grid-column: 1 / -1; margin-bottom: 48px; }
  .trust__list { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --header-h: 72px; }
  body { font-size: 16px; }

  .burger { display: block; }
  .nav, .header__cta { display: none; }
  .header__inner { gap: 12px; }
  .brand__tag { white-space: nowrap; }

  .grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }

  .hero { min-height: 100vh; min-height: 100svh; padding-bottom: 96px; }
  .hero__img { object-position: 38% 80%; }
  .hero__frame { inset: 12px; top: calc(var(--header-h) + 4px); }
  .hero__frame i { width: 24px; height: 24px; }
  .hero__meta { gap: 8px 12px; font-size: 10px; letter-spacing: .2em; }

  .index__head { margin-bottom: 40px; }
  .index__item { grid-template-columns: 40px 1fr 20px; }

  .about__media { margin-inline: calc(var(--gutter) * -1); }
  .frame--tall { aspect-ratio: 4 / 4.4; max-height: none; }
  .frame--tall.frame::before { inset: 12px; }
  .about__panel { margin: -110px 0 0; padding: 36px 28px; }

  .passage { height: 68vh; height: 68svh; min-height: 460px; }

  .details__head { margin-bottom: 24px; }
  .detail, .detail:first-child {
    min-height: 0;
    padding-block: 48px;
    border-top: 0;
    justify-content: flex-start;
  }
  .detail__media {
    display: block;
    margin: 0 calc(var(--gutter) * -1) 28px;
    aspect-ratio: 16 / 10;
  }
  .detail__media.frame::before { inset: 12px; }
  .details__cta { margin-top: 16px; }

  .trust__list { grid-template-columns: 1fr; }
  .trust__item, .trust__item:first-child { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: start; padding: 24px 0; }
  .trust__list { row-gap: 8px; }
  .trust__item::before { margin-bottom: 18px; }
  .trust__item dd { margin-top: 4px; }

  .remote__media::after {
    background:
      linear-gradient(180deg, var(--coal) 0%, rgba(12,11,10,0) 14%, rgba(12,11,10,0) 82%, var(--coal) 100%),
      linear-gradient(rgba(12,11,10,.55), rgba(12,11,10,.55));
  }
  .channels { grid-template-columns: 1fr; width: 100%; }

  .signature { grid-template-columns: 1fr 1fr; }
  .signature { row-gap: 26px; }
  .signature__item, .signature__item + .signature__item, .signature__item:first-child { padding: 0; }
  .signature__item--name { grid-column: 1 / -1; }

  .signature .address__map {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 44px; margin: 12px 0 4px; padding: 0 18px 0 14px;
    border: 1px solid var(--gold-border); background-color: rgba(185, 154, 98, .06);
    font-weight: 500; letter-spacing: .22em; color: var(--gold-hi);
  }
  .signature .address__map .icon { display: block; width: 16px; height: 16px; flex: none; }
  .signature .address__map:active { background-color: rgba(185, 154, 98, .14); }

  .frame, .parallax { --os: 0px; }

  .dock {
    position: fixed; z-index: 45;
    left: var(--gutter); right: var(--gutter); bottom: calc(12px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px;
    padding: 8px;
    background: rgba(18, 16, 14, .97);
    border: 1px solid var(--line);
    border-radius: 4px;
    transform: translateY(140%);
    transition: transform .6s var(--ease);
  }
  .dock.is-visible { transform: none; }
  .footer { padding-bottom: 120px; }
}

@media (max-width: 560px) {
  .btn { width: 100%; }
  .hero__actions, .finale__actions { flex-direction: column; }
  .hero__name { font-size: clamp(52px, 17vw, 76px); white-space: normal; }
  .hero__question { font-size: clamp(22px, 6.4vw, 28px); }
  .hero__meta .dot { display: none; }
  .hero__meta { flex-direction: column; gap: 6px; margin-top: 24px; }
  .hero__content .rule--center { margin-block: 18px; }
  .hero__lead { margin-top: 14px; font-size: 15px; line-height: 1.6; }
  .hero__actions { gap: 10px; margin-top: 24px; }
  .eyebrow--center { font-size: 11px; letter-spacing: .2em; gap: 10px; white-space: nowrap; }
  .eyebrow--center::before, .eyebrow--center::after { width: 18px; }
  .trust__item, .trust__item:first-child { grid-template-columns: 1fr; gap: 10px; }
  .channel { padding: 22px; }
  .finale__phone { font-size: clamp(30px, 10.4vw, 56px); }
  .signature { grid-template-columns: 1fr; }

}

@media (max-width: 380px) {

  .brand__tag { font-size: 9px; letter-spacing: .18em; }
  .eyebrow--center { font-size: 10px; letter-spacing: .16em; gap: 8px; }
  .eyebrow--center::before, .eyebrow--center::after { width: 12px; }
}

@media (max-width: 1180px) {
  .header__inner { gap: 28px; }
  .nav { gap: 22px; }
  .nav__link { letter-spacing: .18em; }
  .lang { margin-inline-start: -10px; }
}
@media (max-width: 900px) {
  .header__inner { gap: 4px; }
  .lang { display: none; }
  .lang-mini { display: block; }
  .signature__item--address { grid-column: 1 / -1; }

  .frame--tall.frame--portrait { aspect-ratio: 4 / 5; max-height: 72vh; }
  .about__sub { margin-top: 16px; font-size: 14.5px; }
}
@media (max-width: 560px) {

  .brand__name { font-size: clamp(17px, 5.2vw, 23px); }
  .finale__meta { flex-direction: column; gap: 6px; }
  .finale__meta .dot { display: none; }
}
@media (max-width: 380px) {
  .lang-mini summary { width: 42px; gap: 4px; }
  .brand__tag { letter-spacing: .14em; }
}

html:not([dir="rtl"]) .lang__link--ar::before { inset-inline-start: auto; left: 0; right: auto; }

@media (max-width: 900px) {

  .hero__stage::after {
    background: linear-gradient(180deg, rgba(12,11,10,.82) 0%, rgba(12,11,10,.64) 30%, rgba(12,11,10,.58) 60%, rgba(12,11,10,.74) 84%, var(--coal) 100%);
  }
  .hero__frame { z-index: 0; bottom: 16px; }
  .hero__meta { color: #9d9486; }

  .menu__nav { counter-reset: menu; align-items: stretch; gap: 0; }
  .menu__link {
    counter-increment: menu;
    display: flex; align-items: baseline; gap: 18px;
    padding-block: 14px;
    font-size: clamp(30px, 8.8vw, 40px); line-height: 1.15;
    border-bottom: 1px solid var(--gold-hair);
  }
  .menu__link:first-child { border-top: 1px solid var(--gold-hair); }
  .menu__link::before {
    content: counter(menu, decimal-leading-zero);
    min-width: 24px;
    font-style: italic; font-size: 16px; color: var(--gold-muted);
  }
  .menu__cta { margin-top: 36px; width: 100%; }
  .menu__lang { margin-top: 24px; }

  .frame--tall.frame--portrait { aspect-ratio: auto; max-height: none; height: min(125vw, 72vh, max(300px, 100svh - 250px)); }
  .frame--portrait img { object-position: 50% 14%; }
  .about__panel { margin-top: calc(-1 * clamp(64px, 22vw, 104px)); }

  @media (max-height: 700px) { .about__panel { margin-top: -40px; } }

  .details__head { margin-bottom: 32px; }
  .detail, .detail:first-child { padding: 0 0 30px; }
  .detail + .detail { margin-top: 22px; }
  .detail {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--surface-edge);
  }
  .detail__media { margin: 0; aspect-ratio: 5 / 4; }
  .detail__media.frame::before { inset: 10px; }
  .detail > :not(.detail__media) { margin-inline: clamp(20px, 6.4vw, 30px); }
  .detail__num {
    display: flex; align-items: center; gap: 14px;
    margin-top: 24px; margin-bottom: 12px; font-size: 20px;
  }
  .detail__num::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }
  .detail__title { font-size: clamp(28px, 8.2vw, 34px); line-height: 1.1; }
  .detail .rule { margin-block: 18px; }
  .detail__text { font-size: 15.5px; line-height: 1.65; }

  #hizmet-2 .detail__media img { object-position: 50% 40%; }
  #hizmet-3 .detail__media img { object-position: 50% 70%; }
  #hizmet-5 .detail__media img { object-position: 50% 28%; }

  .details__cta { margin-top: 22px; flex-direction: column; align-items: stretch; gap: 18px; padding: 26px clamp(20px, 6.4vw, 30px); }
  .details__cta .link-arrow {
    justify-content: center; min-height: 54px; padding: 0 20px;
    background: #16130f;
    box-shadow: inset 0 0 0 1px rgba(185, 154, 98, .45);
  }
  .details__cta .link-arrow:active { background-color: rgba(185, 154, 98, .1); }
}
html[dir="rtl"] .detail__num::after { background: linear-gradient(270deg, var(--gold-line), transparent); }
html[dir="rtl"] .menu__link::before { font-style: normal; }

@media (max-width: 560px) {
  .hero__meta::before {
    content: ""; width: 32px; height: 1px; margin: 0 auto 6px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }
}

@media (max-width: 380px) {
  .about__panel { padding: 28px 22px; }
  .about__panel .eyebrow { margin-bottom: 20px; }
  .about__panel .title { font-size: 36px; }
}

@media (max-width: 560px) and (max-height: 700px) {
  .hero { padding-top: calc(var(--header-h) + 4px); padding-bottom: 72px; }
  .hero__name { font-size: clamp(46px, 15vw, 60px); }
  .hero__content .rule--center { margin-block: 12px; }
  .hero__content .eyebrow { margin-bottom: 18px; }
  .hero__question { font-size: 22px; }
  .hero__lead { margin-top: 10px; font-size: 14.5px; line-height: 1.55; }
  .hero__actions { margin-top: 18px; }
  .hero__actions .btn { --btn-h: 52px; }
}

.trust__note { grid-column: 5 / -1; margin-top: 28px; font-size: 14.5px; line-height: 1.6; color: var(--ivory-dim); }
.guide-lang { color: var(--muted); }
@media (max-width: 1024px) { .trust__note { grid-column: 1 / -1; } }

.page-sub .header, .page-sub .header.is-scrolled { background: #090806; border-color: var(--line); }
.article-page { padding-top: calc(var(--header-h) + clamp(28px, 5vw, 64px)); padding-bottom: clamp(72px, 10vw, 128px); }
.article { max-width: 760px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.breadcrumb li + li::before { content: "›"; margin-inline-end: 10px; color: var(--gold-muted); }
.breadcrumb a { display: inline-block; padding-block: 10px; margin-block: -10px; color: var(--ivory-dim); transition: color var(--t-med) var(--ease); }
@media (hover: hover) { .breadcrumb a:hover { color: var(--gold-hi); } }

.article__head { margin-top: clamp(28px, 4vw, 44px); padding-bottom: clamp(28px, 4vw, 40px); border-bottom: 1px solid var(--gold-hair); }
.article__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 5.4vw, 66px); line-height: 1.04; letter-spacing: -.012em;
  text-wrap: balance;
}
.article__title em { display: block; font-size: .72em; margin-top: .25em; }
.article__meta { margin-top: 18px; font-size: 13px; letter-spacing: .04em; color: var(--muted); }
.article__answer {
  margin-top: clamp(28px, 4vw, 40px);
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3.4vw, 32px);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--surface-edge), inset 2px 0 0 var(--gold);
  font-size: 16.5px; line-height: 1.7;
}
.article__answer strong { color: var(--gold-hi); font-weight: 500; }
.article__body { margin-top: clamp(36px, 5vw, 56px); font-size: 16.5px; line-height: 1.75; color: #d4ccbe; }
.article__body h2 {
  margin-top: clamp(44px, 6vw, 64px); margin-bottom: 16px;
  font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.15; color: var(--ivory);
}
.article__body h2::after { content: ""; display: block; width: 64px; height: 1px; margin-top: 16px; background: linear-gradient(90deg, var(--gold), transparent); }
.article__body h3 { margin-top: 30px; margin-bottom: 8px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--ivory); }
.article__body p + p { margin-top: 14px; }
.article__body a:not(.btn) { color: var(--gold-hi); }
.article__steps { list-style: none; counter-reset: step; margin-top: 8px; }
.article__steps li { counter-increment: step; position: relative; padding-block: 12px; padding-inline: 44px 0; border-bottom: 1px solid var(--gold-hair); }
.article__steps li::before {
  content: counter(step); position: absolute; inset-inline-start: 0; top: 12px;
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--serif); font-size: 16px; color: var(--gold-hi); box-shadow: inset 0 0 0 1px var(--gold-border);
}
.article__steps strong { color: var(--ivory); font-weight: 500; }
.article__facts {
  margin-top: 18px;
  border-block: 1px solid var(--gold-border);
}
.article__facts div { padding-inline: 0 !important; }

.article__note { margin-top: 10px; padding-inline-start: 16px; border-inline-start: 1px solid var(--gold); color: var(--ivory); }
.article__note strong { color: var(--gold-hi); font-weight: 500; }
.article__facts div { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 6px 20px; padding: 14px clamp(16px, 3vw, 24px); }
.article__facts div + div { border-top: 1px solid var(--gold-hair); }
.article__facts dt { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-muted); padding-top: 4px; }
.article__facts dd { color: var(--ivory-dim); }

.article__facts dd a { display: inline-block; padding-block: 6px; margin-block: -6px; }
.article__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.article__toc { margin-top: clamp(28px, 4vw, 40px); padding: 20px clamp(18px, 3vw, 26px); border: 1px solid var(--gold-hair); }
.article__toc-title { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-muted); margin-bottom: 8px; }
.article__toc ol { list-style: none; display: grid; gap: 0 28px; }
@media (min-width: 700px) { .article__toc ol { grid-template-columns: 1fr 1fr; } }
.article__toc a { display: block; padding-block: 8px; font-size: 15px; line-height: 1.45; color: var(--ivory-dim); transition: color var(--t-med) var(--ease); }
@media (hover: hover) { .article__toc a:hover { color: var(--gold-hi); } }

.article__body h2[id], .article__body h3[id] { scroll-margin-top: calc(var(--header-h) + 20px); }
.article__sources { margin-top: 8px; font-size: 14px; line-height: 1.6; }
.article__sources li { padding: 8px 0; border-bottom: 1px solid var(--gold-hair); }

.article__topics { list-style: none; margin-top: 8px; }
.article__topics li { border-bottom: 1px solid var(--gold-hair); }
.article__topics a { display: block; padding-block: 12px; text-decoration: none; }
.article__topics + p { margin-top: 18px; }

.article__list { list-style: none; margin-top: 8px; }
.article__list li { position: relative; padding-block: 6px; padding-inline-start: 22px; }
.article__list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 1.05em; width: 6px; height: 1px; background: var(--gold); }
@media (max-width: 560px) {
  .article__facts div { grid-template-columns: 1fr; }
  .article__cta .btn { width: 100%; }
  .article__body, .article__answer { font-size: 16px; }
}

html[dir="rtl"] {
  --serif: "Noto Naskh Arabic", "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Tajawal", "Jost", "Helvetica Neue", Arial, sans-serif;
}

html[dir="rtl"] body *, html[dir="rtl"] body *::before, html[dir="rtl"] body *::after { letter-spacing: 0 !important; text-transform: none !important; }
html[dir="rtl"] body { font-weight: 400; line-height: 1.85; }

html[dir="rtl"] .brand__name, html[dir="rtl"] .hero__name, html[dir="rtl"] .about__panel .title,
html[dir="rtl"] .signature__item--name dt { font-family: "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", serif; }

html[dir="rtl"] em { font-style: normal; }

html[dir="rtl"] .channel__value[dir="ltr"] { text-align: right; }
html[dir="rtl"] .index__num, html[dir="rtl"] .detail__num { font-style: normal; }

html[dir="rtl"] .title { line-height: 1.3; }
html[dir="rtl"] .hero__question { line-height: 1.55; }
html[dir="rtl"] .passage__line { line-height: 1.35; }
html[dir="rtl"] .remote__title { line-height: 1.25; }
html[dir="rtl"] .detail__title, html[dir="rtl"] .index__item { line-height: 1.45; }
html[dir="rtl"] .about__text { line-height: 1.7; }
html[dir="rtl"] .eyebrow, html[dir="rtl"] .nav__link, html[dir="rtl"] .brand__tag,
html[dir="rtl"] .hero__meta, html[dir="rtl"] .finale__meta, html[dir="rtl"] .finale__label,
html[dir="rtl"] .trust__big small, html[dir="rtl"] .signature dt, html[dir="rtl"] .channel__label { font-size: 13px; }
html[dir="rtl"] .signature__item--name dt { font-size: 26px; }
html[dir="rtl"] .btn, html[dir="rtl"] .dock__btn, html[dir="rtl"] .menu__cta, html[dir="rtl"] .link-arrow, html[dir="rtl"] .header__cta { font-size: 14px; }

html[dir="rtl"] .eyebrow::before { background: linear-gradient(270deg, transparent, var(--gold)); }
html[dir="rtl"] .eyebrow--center::after { background: linear-gradient(270deg, var(--gold), transparent); }
html[dir="rtl"] .rule { background: linear-gradient(270deg, var(--gold), transparent); }
html[dir="rtl"] .rule--center { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
html[dir="rtl"] .reveal--line { transform-origin: right center; }
html[dir="rtl"] .index__item::after, html[dir="rtl"] .channel::after { transform-origin: right; }

html[dir="rtl"] .article__answer { box-shadow: inset 0 0 0 1px var(--surface-edge), inset -2px 0 0 var(--gold); }
html[dir="rtl"] .article__body h2::after { background: linear-gradient(270deg, var(--gold), transparent); }
html[dir="rtl"] .article__title { line-height: 1.35; }
html[dir="rtl"] .article__body h3 { line-height: 1.5; }
html[dir="rtl"] .channel::after { background: linear-gradient(270deg, var(--gold), transparent); }
html[dir="rtl"] .link-arrow { background-position: 100% 100%, 100% 100%; }
html[dir="rtl"] .link-inline { background-position: 100% 100%, 100% 100%; }
html[dir="rtl"] .signature a { background-position: 100% 100%; }
@media (hover: hover) {
  html[dir="rtl"] .nav__link::after { transform-origin: left; }
  html[dir="rtl"] .nav__link:hover::after { transform-origin: right; }
}

html[dir="rtl"] .index__arrow, html[dir="rtl"] .channel__arrow, html[dir="rtl"] .link-arrow .icon { transform: scaleX(-1); }
@media (hover: hover) {
  html[dir="rtl"] a.index__item:hover .index__arrow,
  html[dir="rtl"] .channel:hover .channel__arrow,
  html[dir="rtl"] .link-arrow:hover .icon { transform: scaleX(-1) translateX(4px); }
  html[dir="rtl"] .btn:hover .icon, html[dir="rtl"] .header__cta:hover .icon { transform: translateX(-2px); }
}

@media (min-width: 901px) {
  html[dir="rtl"] .remote__media::after {
    background:
      linear-gradient(180deg, var(--coal) 0%, rgba(12,11,10,0) 16%, rgba(12,11,10,0) 72%, var(--coal) 100%),
      linear-gradient(rgba(12,11,10,.3), rgba(12,11,10,.3)),
      linear-gradient(270deg, rgba(12,11,10,.85), rgba(12,11,10,.1) 70%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

.nw { white-space: nowrap; }