/* Kooheji's Arabic brand font, Frutiger LT Arabic, as served by koohejijewellery.com. Browsers only
   let that site use those files (no CORS header), so on another domain Arabic falls back to Almarai,
   unless the .ttf files are copied into assets/fonts/. Arabic letters only: Latin stays in Lato. */
@font-face {
  font-family: 'KJ Frutiger Arabic'; font-weight: 300; font-style: normal; font-display: swap;
  src: url('https://koohejijewellery.com/wp-content/uploads/2024/03/FrutigerLTArabic45Light.ttf') format('truetype'),
       url('assets/fonts/FrutigerLTArabic45Light.ttf') format('truetype');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'KJ Frutiger Arabic'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('https://koohejijewellery.com/wp-content/uploads/2024/03/FrutigerLTArabic55Roman.ttf') format('truetype'),
       url('assets/fonts/FrutigerLTArabic55Roman.ttf') format('truetype');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'KJ Frutiger Arabic'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('https://koohejijewellery.com/wp-content/uploads/2024/03/FrutigerLTArabic65Bold.ttf') format('truetype'),
       url('assets/fonts/FrutigerLTArabic65Bold.ttf') format('truetype');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  --ivory: #FAF8F5;
  --stone: #F1EBE3;
  --ink: #16181D;
  --body: #3B3E45;
  --muted: #8C8E93;
  --line: #E2DCD3;
  --navy: #1B2A4A;
  --error: #9A3B3B;
  --serif-sc: 'Playfair Display SC', 'Playfair Display', Georgia, serif;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}
:root:lang(ar) {
  --arabic: 'KJ Frutiger Arabic', 'Lato', 'Almarai', Arial, sans-serif;
  --serif-sc: var(--arabic);
  --serif: var(--arabic);
  --sans: var(--arabic);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--body);
  font: 300 15px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }

/* ---------- Layout: 50/50 editorial split ---------- */
.shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; }
/* The column runs the full page height in the photo's own bottom colour (the blush backdrop),
   and the photo stays pinned inside it. Full-page screenshots, which only catch the pinned photo
   once, then show the backdrop continuing instead of an empty gap. overflow: clip (not hidden)
   keeps the sticky photo working. */
.visual {
  margin: 0; overflow: clip;
  background: #C7A699;
}
.visual img {
  position: sticky; top: 0;
  width: 100%; height: 100vh; height: 100dvh;
  object-fit: cover; object-position: 40% 55%;
  display: block;
  animation: settle 2.6s var(--ease) both;
}
@keyframes settle { from { transform: scale(1.07); opacity: 0; } to { transform: none; opacity: 1; } }

.panel {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 6vw, 96px) 32px;
}
.panel__body { flex: 1; width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 56px 0 72px; }

.masthead { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 520px; margin: 0 auto; }
.masthead__brand { display: block; }
.logo { display: block; height: 58px; width: auto; }
.logo--ar, :root:lang(ar) .logo--en { display: none; }
:root:lang(ar) .logo--ar { display: block; }
.lang { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.lang button {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 700 10.5px/1 'Lato', sans-serif; letter-spacing: .2em; color: var(--muted);
  border-bottom: 1px solid transparent; transition: color .3s, border-color .3s;
}
.lang button[lang="ar"] { font: 400 13px/1 'KJ Frutiger Arabic', 'Almarai', sans-serif; letter-spacing: 0; }
.lang button:hover, .lang button[aria-pressed="true"] { color: var(--navy); border-bottom-color: var(--navy); }

.panel__foot {
  display: flex; justify-content: space-between; gap: 16px;
  max-width: 520px; width: 100%; margin: 0 auto;
  padding-top: 22px; border-top: 1px solid var(--line);
  font: 400 10px/1.6 'Lato', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.panel__foot a { text-decoration: none; }
.panel__foot a:hover { color: var(--navy); }
:lang(ar) .panel__foot span { font: 400 12px/1.6 var(--sans); letter-spacing: 0; }

/* ---------- Type ---------- */
.eyebrow {
  margin: 0 0 18px;
  font: 700 10.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--navy);
}
h1 {
  margin: 0 0 14px;
  font: 400 clamp(30px, 3.3vw, 44px)/1.12 var(--serif-sc);
  letter-spacing: 1px; color: var(--ink);
}
.lede { margin: 0; font: italic 400 18px/1.55 var(--serif); color: var(--body); }
.body { margin: 18px 0 0; max-width: 40ch; }
:lang(ar) .eyebrow { font-size: 13px; letter-spacing: 0; }
:lang(ar) h1 { font-weight: 400; letter-spacing: 0; line-height: 1.4; }
:lang(ar) .lede { font-style: normal; font-size: 17px; line-height: 1.9; }

/* ---------- Views ---------- */
.view { animation: rise .8s var(--ease) both; }
.view--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.view--center .btn { margin-top: 40px; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.loader { position: relative; width: 140px; height: 1px; margin-bottom: 26px; background: var(--line); overflow: hidden; }
.loader::after {
  content: ''; position: absolute; inset: 0; width: 38%;
  background: var(--navy); animation: sweep 1.5s var(--ease) infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(270%); } }

/* ---------- Form ---------- */
form { margin-top: 12px; }
.group { margin-top: 46px; }
.group__title {
  display: flex; align-items: center; gap: 18px;
  margin: 0 0 22px;
  font: italic 400 17px/1.3 var(--serif); color: var(--ink);
}
.group__title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
:lang(ar) .group__title { font-style: normal; font-size: 17px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 30px; }
.span-2 { grid-column: 1 / -1; }

.field { min-width: 0; }
.field.is-in { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.field > label:not(.check), .field > .label {
  display: block; margin-bottom: 8px;
  font: 700 10px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
:lang(ar) .field > label:not(.check), :lang(ar) .field > .label { font-size: 12.5px; letter-spacing: 0; }

input, select {
  display: block; width: 100%;
  padding: 10px 0 11px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent;
  font: 400 16px/1.4 var(--sans); color: var(--ink);
  -webkit-appearance: none; appearance: none;
  transition: border-color .3s, box-shadow .3s;
}
input::placeholder { color: #B9B6B0; }
input:hover, select:hover { border-bottom-color: #C9C1B5; }
input:focus, select:focus { outline: none; border-bottom-color: var(--navy); box-shadow: 0 1px 0 var(--navy); }
select {
  cursor: pointer; padding-inline-end: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231B2A4A' stroke-width='1'/%3E%3C/svg%3E") no-repeat right 2px center;
}
[dir="rtl"] select { background-position: left 2px center; }
input[type="date"] { min-height: 44px; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }

.field.is-invalid input, .field.is-invalid select { border-bottom-color: var(--error); }
.field__error { margin: 7px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--error); }
.field__error:empty { display: none; }

.phone { display: grid; grid-template-columns: 116px 1fr; gap: 20px; }
.dial { position: relative; }
.dial select { color: transparent; }
.dial select option, .dial select optgroup { color: var(--ink); }
.dial__value {
  position: absolute; inset: 0 22px 1px 0;
  display: flex; align-items: center;
  font: 400 16px/1 var(--sans); color: var(--ink);
  pointer-events: none;
}
/* Mobile: shown but locked, it is the customer's key in the CRM */
.phone--locked input, .phone--locked select { border-bottom-style: dashed; cursor: default; }
.phone--locked input { color: var(--body); }
.phone--locked select { color: transparent; -webkit-text-fill-color: transparent; } /* the +973 label shows instead */
.phone--locked input:hover, .phone--locked input:focus { border-bottom-color: var(--line); box-shadow: none; }
.phone--locked select { background-image: none; opacity: 1; }
.phone--locked .dial__value { color: var(--body); }
.field__hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* Searchable country lists: the input searches English and Arabic names, the hidden select keeps
   the English value that goes to the CRM */
.combo { position: relative; }
/* Each field's fade-in gives it its own stacking layer, so lift the field whose list is open above the
   fields that follow it */
.field:has(.combo__list:not([hidden])) { position: relative; z-index: 20; }
.combo__input {
  padding-inline-end: 22px; text-overflow: ellipsis; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231B2A4A' stroke-width='1'/%3E%3C/svg%3E") no-repeat right 2px center;
}
[dir="rtl"] .combo__input { background-position: left 2px center; }
.combo__input:focus { cursor: text; }
.combo__list {
  position: absolute; z-index: 15; top: calc(100% + 6px); inset-inline: 0;
  max-height: 284px; overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px 0; list-style: none;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(22, 24, 29, .10);
}
.combo__group { padding: 12px 16px 6px; font: 700 9.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
:lang(ar) .combo__group { font-size: 12px; letter-spacing: 0; }
.combo__option { padding: 10px 16px; font: 400 15px/1.35 var(--sans); color: var(--ink); cursor: pointer; }
.combo__option.is-active { background: var(--ivory); color: var(--navy); }
.combo__option[aria-selected="true"] { font-weight: 700; color: var(--navy); }
.combo__empty { padding: 12px 16px; font-size: 14px; color: var(--muted); }

.pair { display: grid; grid-template-columns: .8fr 1.5fr 1fr; gap: 20px; }

.choices { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.choice { position: relative; }
.choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 26px;
  border: 1px solid var(--line);
  font: 400 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--body);
  transition: background .35s var(--ease), color .35s, border-color .35s;
}
:lang(ar) .choice span { font-size: 14px; letter-spacing: 0; }
.choice:hover span { border-color: var(--navy); }
.choice input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.choice input:focus-visible + span { outline: 1px solid var(--navy); outline-offset: 3px; }

.field--reveal:not([hidden]) { animation: rise .6s var(--ease) both; }

.submit { margin-top: 40px; }
.form-alert { margin: 0 0 18px; padding: 14px 16px; border-inline-start: 2px solid var(--error); background: #F6EDEA; color: var(--error); font-size: 14px; }
.note { margin: 16px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }

/* ---------- Steps ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.steps { display: flex; gap: 24px; margin: 38px 0 0; padding: 0; list-style: none; scroll-margin-top: 24px; }
.steps__item {
  flex: 1; display: flex; align-items: baseline; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--line);
  font: 700 10px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}
.steps__num { font: 400 11px/1 'Lato', sans-serif; letter-spacing: .08em; font-variant-numeric: lining-nums; }
.steps__item.is-done { color: var(--ink); border-top-color: var(--navy); }
.steps__item.is-current { color: var(--navy); border-top: 2px solid var(--navy); padding-top: 13px; }
:lang(ar) .steps__item { font-size: 12.5px; letter-spacing: 0; }
.step { min-width: 0; margin: 0; padding: 0; border: 0; }
.actions { margin-top: 52px; }

/* ---------- Consent ---------- */
.consent { margin-top: 46px; padding-top: 28px; border-top: 1px solid var(--line); }
.check { position: relative; display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.check input { position: absolute; top: 2px; inset-inline-start: 0; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.check__box {
  flex: none; width: 20px; height: 20px; margin-top: 2px;
  display: grid; place-items: center;
  border: 1px solid #B9B2A7; background: #fff;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.check__box::after {
  content: ''; width: 10px; height: 5px; margin-top: -2px;
  border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg); opacity: 0; transition: opacity .2s;
}
.check:hover .check__box { border-color: var(--navy); }
.check input:checked + .check__box { background: var(--navy); border-color: var(--navy); }
.check input:checked + .check__box::after { opacity: 1; }
.check input:focus-visible + .check__box { outline: 1px solid var(--navy); outline-offset: 3px; }
.check__text { font-size: 14px; line-height: 1.65; color: var(--body); }
:lang(ar) .check__text { font-size: 14.5px; line-height: 1.9; }
.consent.is-invalid .check__box { border-color: var(--error); }
.consent .field__error { margin-inline-start: 34px; }

/* ---------- Buttons: square, navy only ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 38px;
  background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 0;
  font: 700 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background .4s var(--ease), color .4s var(--ease);
}
.btn:hover { background: transparent; color: var(--navy); }
.btn:focus-visible { outline: 1px solid var(--navy); outline-offset: 4px; }
.btn--block { width: 100%; }
.btn--outline { background: transparent; color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn-link {
  display: block; margin: 20px auto 0; padding: 6px 0;
  background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer;
  font: 700 10.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  transition: color .3s, border-color .3s;
}
.btn-link:hover { color: var(--navy); border-bottom-color: var(--navy); }
.btn-link:focus-visible { outline: 1px solid var(--navy); outline-offset: 4px; }
:lang(ar) .btn-link { font-size: 13px; letter-spacing: 0; }
.btn[aria-busy="true"] { cursor: progress; opacity: .75; }
.btn[aria-busy="true"] span::after { content: ''; display: inline-block; width: 1.2em; text-align: start; animation: dots 1.2s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
:lang(ar) .btn { font-size: 14px; letter-spacing: 0; }


/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .visual { height: 46vh; min-height: 300px; max-height: 460px; }
  .visual img { position: static; height: 100%; object-position: 35% 72%; }
  .panel { min-height: 0; padding: 24px 22px 28px; }
  .logo { height: 48px; }
  .panel__body { padding: 36px 0 56px; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; gap: 26px; }
  .phone { grid-template-columns: 100px 1fr; gap: 16px; }
  .pair { gap: 14px; }
  .lede { font-size: 17px; }
  .panel__foot { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}