:root {
  --green-950: #0b2e25;
  --green-900: #103c30;
  --green-800: #174c3c;
  --green-700: #1f654f;
  --green-600: #287960;
  --gold-700: #9a7436;
  --gold-600: #b58945;
  --gold-500: #c7a45d;
  --cream-50: #fffdf8;
  --cream-100: #fbf4e9;
  --cream-200: #f0e3cf;
  --ink: #30433e;
  --muted: #7a7f78;
  --danger: #a53e3e;
  --success: #227459;
  --shadow-soft: 0 24px 70px rgba(59, 42, 17, .12);
  --shadow-card: 0 18px 45px rgba(54, 41, 22, .09);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 80% 10%, rgba(199,164,93,.13), transparent 28%),
    linear-gradient(125deg, #fffaf1 0%, #fffdf9 48%, #f8f0e4 100%);
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .17;
  background-image:
    linear-gradient(30deg, rgba(23,76,60,.08) 12%, transparent 12.5%, transparent 87%, rgba(23,76,60,.08) 87.5%),
    linear-gradient(150deg, rgba(23,76,60,.08) 12%, transparent 12.5%, transparent 87%, rgba(23,76,60,.08) 87.5%);
  background-size: 58px 102px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 70%);
  z-index: -3;
}
img { max-width: 100%; display: block; }
button, input { font: inherit; }
button { border: 0; }

.skip-link {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
  transform: translateY(-140%);
  background: var(--green-900);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

.page-shell { position: relative; z-index: 1; }
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(470px, .82fr) minmax(650px, 1.18fr);
  direction: ltr;
}
.hero__visual,
.hero__content { direction: rtl; }
.hero__visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 68%, #fffaf1 99%);
  pointer-events: none;
  z-index: 4;
}
.hero__image-wrap {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .8s var(--ease);
  will-change: transform;
}
.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(.93) contrast(.98);
}
.hero__image-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 55% 28%, rgba(255,250,233,.12), transparent 35%);
  mix-blend-mode: screen;
}
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  z-index: 5;
  opacity: .45;
  box-shadow: inset 0 0 25px rgba(255,255,255,.48), 0 20px 50px rgba(23,76,60,.18);
}
.hero__orb--one {
  width: 72px;
  height: 72px;
  right: 13%;
  top: 17%;
  background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(199,164,93,.15));
  animation: float-orb 7s ease-in-out infinite;
}
.hero__orb--two {
  width: 30px;
  height: 30px;
  left: 13%;
  top: 54%;
  background: rgba(23,76,60,.13);
  animation: float-orb 5s ease-in-out infinite reverse;
}

.hero__content {
  position: relative;
  padding: 48px clamp(36px, 4vw, 84px) 40px clamp(30px, 3vw, 62px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  margin-bottom: 16px;
}
.brand__mark { width: 58px; height: 58px; }
.brand__latin {
  font-family: system-ui, sans-serif;
  font-size: clamp(28px, 2.25vw, 43px);
  color: var(--green-800);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}
.brand__tagline { color: #6e6f69; font-size: 14px; margin-top: 8px; }

.intro { text-align: center; max-width: 760px; margin-inline: auto; }
.eyebrow {
  color: var(--gold-600);
  /* Clearance below keeps the headline's tashkeel marks from touching this line. */
  margin: 0 0 16px;
  font-size: clamp(18px, 1.5vw, 26px);
  font-weight: 700;
}
h1 {
  margin: 0;
  color: var(--green-800);
  font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: clamp(62px, 6vw, 112px);
  line-height: 1.28;
  letter-spacing: -.055em;
  text-shadow: 0 10px 25px rgba(23,76,60,.07);
}
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--gold-500);
  margin: 2px auto 12px;
}
.ornament span { display: block; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, rgba(154,116,54,.55)); }
.ornament span:last-child { transform: scaleX(-1); }
.ornament b { font-size: 20px; }
.intro__copy {
  max-width: 670px;
  margin: 0 auto 20px;
  font-size: clamp(18px, 1.3vw, 24px);
  line-height: 1.95;
  color: #40524d;
}

.experience-grid {
  width: min(100%, 960px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(210px, .55fr) minmax(520px, 1.45fr);
  gap: 24px;
  align-items: stretch;
  direction: ltr;
}
.experience-grid > * { direction: rtl; }
.glass-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,253,248,.9), rgba(250,241,226,.82));
  border: 1px solid rgba(176,141,76,.26);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.7), transparent 32%);
}
.advisor-card {
  border-radius: var(--radius-lg);
  padding: 25px 22px 20px;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.advisor-card:hover { box-shadow: 0 26px 65px rgba(44, 53, 38, .16); }
.advisor-card__kicker {
  margin: 0 0 14px;
  color: var(--green-800);
  font-weight: 800;
  line-height: 1.65;
  font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
}
.advisor-card__portrait-wrap {
  width: 142px;
  aspect-ratio: 1;
  margin: 0 auto;
  position: relative;
  display: grid;
  place-items: center;
}
.advisor-card__portrait {
  width: 128px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.95);
  outline: 2px solid rgba(199,164,93,.8);
  position: relative;
  z-index: 2;
  box-shadow: 0 14px 28px rgba(30,54,43,.18);
}
.advisor-card__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(199,164,93,.35);
  animation: halo 3.5s ease-in-out infinite;
}
.advisor-card__heart { display: inline-block; color: var(--gold-600); margin-top: 10px; }
.advisor-card h2 { margin: 4px 0 5px; font-size: 20px; color: #243f36; }
.advisor-card p:last-child { margin: 0; color: #70736f; font-size: 12px; line-height: 1.8; }
.advisor-card__spark {
  position: absolute;
  border-radius: 50%;
  background: var(--gold-500);
  opacity: .24;
  filter: blur(.3px);
}
.advisor-card__spark--one { width: 8px; height: 8px; top: 34px; right: 26px; animation: sparkle 2.5s infinite; }
.advisor-card__spark--two { width: 5px; height: 5px; bottom: 40px; left: 20px; animation: sparkle 2.5s .8s infinite; }

.notify-card {
  border-radius: var(--radius-xl);
  padding: 28px;
  isolation: isolate;
}
.notify-card__beam {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  top: -130px;
  left: -70px;
  background: radial-gradient(circle, rgba(199,164,93,.19), transparent 70%);
  animation: breathe 6s ease-in-out infinite;
  z-index: -1;
}
.notify-card__head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.notify-card__label { margin: 0 0 2px; color: var(--gold-700); font-size: 12px; font-weight: 700; }
.notify-card h2 { margin: 0; font-size: clamp(18px, 1.5vw, 24px); color: var(--green-900); }
.smart-pulse { width: 42px; height: 42px; position: relative; flex: 0 0 auto; }
.smart-pulse i { position: absolute; inset: 0; border: 1px solid rgba(40,121,96,.4); border-radius: 50%; animation: smart-pulse 2.6s var(--ease) infinite; }
.smart-pulse i:nth-child(2) { animation-delay: .55s; }
.smart-pulse i:nth-child(3) { animation-delay: 1.1s; }
.smart-pulse::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--green-700); font-size: 17px; }

.channel-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  background: rgba(245,236,221,.72);
  border: 1px solid rgba(176,141,76,.18);
  padding: 7px;
  border-radius: 20px;
}
.channel-option {
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #66716d;
  background: transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.channel-option img { width: 20px; height: 20px; opacity: .78; }
.channel-option:hover { transform: translateY(-2px); color: var(--green-800); }
.channel-option.is-active {
  background: linear-gradient(135deg, var(--green-700), var(--green-900));
  color: #fff;
  box-shadow: 0 10px 26px rgba(23,76,60,.22);
}
.channel-option.is-active img { filter: brightness(0) invert(1); opacity: 1; }
.channel-option__check { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; }
.channel-explainer { color: #5c635e; text-align: center; font-size: 13px; min-height: 25px; margin: 12px 0 12px; }
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { min-width: 0; transition: opacity .28s, transform .28s, max-width .35s; }
.field.is-hidden { display: none; }
.field label { display: block; color: var(--green-900); font-size: 12px; font-weight: 700; margin: 0 6px 6px; }
.field__control { position: relative; }
.field__control > img { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 20px; color: var(--gold-700); opacity: .72; pointer-events: none; }
.field input {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(137,110,65,.32);
  background: rgba(255,253,248,.78);
  color: var(--green-950);
  border-radius: 16px;
  padding: 12px 47px 12px 42px;
  outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder { color: #6f746e; }
.field input:focus { border-color: var(--gold-500); background: #fffdfa; box-shadow: 0 0 0 4px rgba(199,164,93,.13); }
.field__state { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: #d8c9ae; transition: background .2s, box-shadow .2s; }
.field.is-valid .field__state { background: var(--success); box-shadow: 0 0 0 4px rgba(34,116,89,.12); }
.field.is-invalid .field__state { background: var(--danger); box-shadow: 0 0 0 4px rgba(165,62,62,.12); }
.field.is-invalid input { border-color: rgba(165,62,62,.55); }
.field__message { display: block; min-height: 18px; color: var(--danger); font-size: 11px; margin: 4px 6px 0; }

.submit-button {
  width: 100%;
  min-height: 56px;
  margin-top: 12px;
  border-radius: 17px;
  color: #fff8e7;
  background: linear-gradient(110deg, var(--green-900), var(--green-700), var(--green-900));
  background-size: 220% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(23,76,60,.24);
  transition: transform .2s var(--ease), box-shadow .25s, opacity .25s;
  animation: gradient-flow 8s linear infinite;
}
.submit-button img { width: 22px; filter: brightness(0) invert(1); }
.submit-button:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(23,76,60,.29); }
.submit-button:active { transform: translateY(0) scale(.99); }
/* The button is disabled in two situations: mid-submit, where the label
   already says «جارٍ تجهيز إشعارك...», and on a scriptless browser, where it
   never becomes enabled. "not-allowed" is honest in both; "wait" would have
   promised the scriptless visitor that something was in progress. */
.submit-button:disabled { opacity: .65; cursor: not-allowed; }
.submit-button__shine { position: absolute; top: -40%; left: -20%; width: 24%; height: 180%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent); transform: rotate(18deg); animation: shine 4.5s ease-in-out infinite; }
.privacy-note { display: flex; justify-content: center; align-items: center; gap: 7px; color: #63665f; font-size: 11px; margin-top: 12px; }
.privacy-note img { width: 17px; opacity: .75; }

/* Non-field failures (network, server) stay inside the panel next to the
   button the visitor just pressed, with their input untouched. */
.form-alert {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.75;
  color: #7c2f2f;
  background: rgba(165, 62, 62, .07);
  border: 1px solid rgba(165, 62, 62, .26);
}
.form-alert[hidden] { display: none; }

/* Rendered only by browsers with scripting off, inside <noscript>. Same shape
   as .form-alert so it reads as part of the card rather than as a page error,
   but neutral-toned: nothing has gone wrong, the visitor simply cannot
   complete a sign-up here without JavaScript. */
.noscript-note {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.75;
  color: #5d5f57;
  background: rgba(23, 76, 60, .05);
  border: 1px solid rgba(23, 76, 60, .2);
}

/* ------------------------------------------------------------------
   In-panel success / next-step state.
   The form is swapped for this block inside the same card, so the
   confirmation appears exactly where the action happened.
   ------------------------------------------------------------------ */

.notify-form.is-replaced { display: none; }

.notify-success {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 18px 12px 8px;
  outline: none;
  animation: success-in .5s var(--ease) both;
}
.notify-success[hidden] { display: none; }
.notify-success:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 6px;
  border-radius: var(--radius-md);
}

.notify-success__seal {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 30px;
  font-weight: 900;
  color: #fff8e7;
  background: linear-gradient(135deg, var(--green-700), var(--green-900));
  box-shadow: 0 14px 34px rgba(23, 76, 60, .26), inset 0 0 0 1px rgba(255, 255, 255, .18);
  position: relative;
}
/* Gold ring echoing the advisor portrait treatment. */
.notify-success__seal::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(199, 164, 93, .55);
  animation: halo 3.5s ease-in-out infinite;
}

.notify-success__title {
  margin: 4px 0 0;
  font-family: "Noto Kufi Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: clamp(19px, 1.5vw, 25px);
  line-height: 1.5;
  color: var(--green-900);
}
.notify-success__body {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.95;
  color: #44564f;
  /* The server sends the two sentences separated by a newline. */
  white-space: pre-line;
}
.notify-success__helper {
  margin: 2px 0 0;
  max-width: 44ch;
  padding: 9px 15px;
  border-radius: 13px;
  font-size: 12px;
  line-height: 1.8;
  color: #6f6448;
  background: rgba(199, 164, 93, .12);
  border: 1px solid rgba(176, 141, 76, .26);
}
.notify-success__helper[hidden] { display: none; }

.notify-success__again {
  margin-top: 6px;
  min-height: 44px;
  padding: 10px 26px;
  border-radius: 15px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--green-800);
  background: rgba(255, 253, 248, .7);
  border: 1px solid rgba(176, 141, 76, .42);
  transition: transform .25s var(--ease), background .25s, box-shadow .25s;
}
.notify-success__again:hover {
  transform: translateY(-2px);
  background: #fffdfa;
  box-shadow: 0 12px 26px rgba(23, 76, 60, .14);
}
.notify-success__again:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }

/* Saved, but the confirmation message could not go out. Honest amber rather
   than a green tick that would overstate what happened. */
.notify-success.is-partial .notify-success__seal {
  background: linear-gradient(135deg, var(--gold-600), var(--gold-700));
  box-shadow: 0 14px 34px rgba(154, 116, 54, .26), inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.notify-success.is-partial .notify-success__title { color: var(--gold-700); }

@keyframes success-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Anti-spam honeypot: visually removed, skipped by keyboard and screen readers. */
.hp-field { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); border: 0; }

.values {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 26px max(6vw, 45px);
  color: #fffaf0;
  background:
    radial-gradient(circle at 15% 0%, rgba(199,164,93,.17), transparent 30%),
    linear-gradient(115deg, #113c30, #174c3c 55%, #0e392d);
  box-shadow: 0 -16px 48px rgba(13,55,44,.12);
  overflow: hidden;
}
.values::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image: radial-gradient(circle at 1px 1px, #d9bc7d 1px, transparent 0);
  background-size: 30px 30px;
  pointer-events: none;
}
.value-item {
  z-index: 1;
  min-height: 102px;
  padding: 10px 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-inline-start: 1px solid rgba(236,213,169,.21);
}
.value-item:first-child { border-inline-start: 0; }
.value-item__icon {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border: 1px solid rgba(230,199,136,.68);
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #dfbd78;
  font-size: 27px;
  transform: rotate(2deg);
  transition: transform .35s var(--ease), background .35s;
}
.value-item:hover .value-item__icon { transform: rotate(-5deg) translateY(-4px); background: rgba(255,255,255,.06); }
.value-item h2 { margin: 0 0 5px; font-size: 16px; color: #f4d99d; }
.value-item p { margin: 0; font-size: 12px; line-height: 1.8; color: rgba(255,255,255,.8); }

.ambient-network { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.network-node { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(40,121,96,.32); box-shadow: 0 0 18px rgba(40,121,96,.35); animation: network-float linear infinite; }
.network-node::after { content: ""; position: absolute; width: var(--link, 80px); height: 1px; top: 2px; right: 2px; transform-origin: right center; transform: rotate(var(--angle, 35deg)); background: linear-gradient(90deg, rgba(40,121,96,.2), transparent); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.toast {
  position: fixed;
  left: 28px;
  bottom: 28px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(390px, calc(100vw - 32px));
  padding: 15px 17px;
  border-radius: 18px;
  color: #fff;
  background: rgba(16,60,48,.94);
  border: 1px solid rgba(231,203,147,.3);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 55px rgba(16,60,48,.3);
  transform: translateY(150%);
  opacity: 0;
  transition: transform .55s var(--ease), opacity .55s;
}
.toast.is-open { transform: translateY(0); opacity: 1; }
.toast__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #c7a45d; color: #103c30; font-weight: 900; }
.toast--error { background: rgba(96,34,34,.94); border-color: rgba(220,150,150,.35); box-shadow: 0 24px 55px rgba(96,34,34,.3); }
.toast--error .toast__icon { background: #d9a3a3; color: #5d1f1f; }
.toast strong, .toast span { display: block; }
.toast strong { font-size: 14px; }
.toast span { font-size: 11px; opacity: .8; margin-top: 3px; }

@keyframes float-orb { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes halo { 0%,100% { transform: scale(.92); opacity: .25; } 50% { transform: scale(1.08); opacity: .72; } }
@keyframes sparkle { 0%,100% { transform: scale(.5); opacity: .15; } 50% { transform: scale(1.3); opacity: .65; } }
@keyframes breathe { 0%,100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.15); opacity: .9; } }
@keyframes smart-pulse { 0% { transform: scale(.35); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes gradient-flow { to { background-position: -220% 0; } }
@keyframes shine { 0%,70% { transform: translateX(-300%) rotate(18deg); } 100% { transform: translateX(700%) rotate(18deg); } }
@keyframes network-float { from { transform: translate3d(0, 20px, 0) scale(.8); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { transform: translate3d(var(--drift, 40px), -110vh, 0) scale(1.2); opacity: 0; } }

@media (max-width: 1250px) {
  .hero { grid-template-columns: minmax(390px, .72fr) minmax(590px, 1.28fr); }
  .experience-grid { grid-template-columns: 205px 1fr; }
  .hero__content { padding-inline: 34px; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .value-item:nth-child(3) { border-inline-start: 0; }
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero__visual { min-height: 520px; order: 2; }
  .hero__visual::after { background: linear-gradient(180deg, #fffaf1 0%, transparent 22%); }
  .hero__content { order: 1; padding: 34px 24px 40px; }
  .brand { align-self: center; }
  .experience-grid { grid-template-columns: minmax(190px, .55fr) minmax(460px, 1.45fr); }
}

@media (max-width: 760px) {
  .hero__visual { min-height: 410px; }
  .hero__image { object-position: 46% top; }
  .experience-grid { grid-template-columns: 1fr; }
  .advisor-card { display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "portrait kicker" "portrait title" "portrait copy"; text-align: right; align-items: center; gap: 0 15px; }
  .advisor-card__portrait-wrap { grid-area: portrait; width: 88px; }
  .advisor-card__portrait { width: 78px; }
  .advisor-card__kicker { grid-area: kicker; margin: 0; }
  .advisor-card h2 { grid-area: title; }
  .advisor-card p:last-child { grid-area: copy; }
  .advisor-card__heart { display: none; }
  .fields-grid { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr; padding-inline: 24px; }
  .value-item { border-inline-start: 0; border-top: 1px solid rgba(236,213,169,.18); justify-content: flex-start; }
  .value-item:first-child { border-top: 0; }
}

@media (max-width: 520px) {
  .hero__content { padding-inline: 16px; }
  h1 { font-size: clamp(55px, 22vw, 82px); }
  .intro__copy { font-size: 16px; }
  .notify-card { padding: 20px 15px; border-radius: 24px; }
  .channel-switch { grid-template-columns: 1fr; }
  .channel-option { min-height: 44px; }
  .advisor-card { padding-inline: 16px; }
  .brand__mark { width: 49px; height: 49px; }
  .brand__latin { font-size: 27px; }
  .toast { left: 16px; bottom: 16px; }
  .notify-success { padding: 12px 4px 6px; gap: 9px; }
  .notify-success__seal { width: 58px; height: 58px; font-size: 26px; }
  .notify-success__body { font-size: 14px; line-height: 1.9; }
  .notify-success__again { width: 100%; }
}

/* ------------------------------------------------------------------
   Height-aware desktop tiers.
   The hero column's natural content height exceeds short desktop
   viewports (768–1080px), which used to leave the CTA sliced at the
   fold. Each tier tightens vertical rhythm so the composition ends at
   the hero/values boundary instead of mid-element.
   ------------------------------------------------------------------ */

/* Tier 1 — moderately short desktops (≈1081–1180px tall). */
@media (min-width: 981px) and (max-height: 1180px) {
  .hero__content { padding-top: 32px; padding-bottom: 28px; }
  .brand { margin-bottom: 12px; }
  .eyebrow { line-height: 1.4; }
  h1 { font-size: clamp(56px, 5vw, 92px); line-height: 1.22; }
  .ornament { line-height: 1; margin-bottom: 10px; }
  .intro__copy { margin-bottom: 16px; line-height: 1.85; }
  .notify-card { padding: 24px; }
  .notify-card__head { margin-bottom: 14px; }
  .channel-explainer { margin: 9px 0; min-height: 20px; }
  .field input { min-height: 50px; }
  .submit-button { min-height: 54px; margin-top: 10px; }
  .privacy-note { margin-top: 10px; }
  .advisor-card__portrait-wrap { width: 128px; }
  .advisor-card__portrait { width: 114px; }
}

/* Tier 2 — common laptop/desktop heights (≤1080px: 1080, 900, 864, 768).
   Matches the density of the approved design reference. */
@media (min-width: 981px) and (max-height: 1080px) {
  .hero__content { padding-top: 24px; padding-bottom: 20px; }
  .brand { margin-bottom: 6px; }
  .brand__mark { width: 48px; height: 48px; }
  .brand__latin { font-size: clamp(26px, 1.9vw, 34px); }
  .eyebrow { font-size: clamp(16px, 1.2vw, 20px); }
  h1 { font-size: clamp(44px, 5.2vw, 84px); line-height: 1.26; }
  .ornament { margin: 2px auto 6px; }
  .ornament span { width: 90px; }
  .intro__copy { font-size: clamp(16px, 1vw, 18px); line-height: 1.75; margin-bottom: 8px; }
  .experience-grid { gap: 18px; }
  .advisor-card { padding: 18px 16px 14px; }
  .advisor-card__kicker { margin-bottom: 8px; }
  .advisor-card__portrait-wrap { width: 108px; }
  .advisor-card__portrait { width: 96px; }
  .advisor-card__heart { margin-top: 4px; }
  .advisor-card h2 { font-size: 18px; }
  .notify-card { padding: 20px; }
  .notify-card__head { margin-bottom: 8px; }
  .notify-card__label { font-size: 11px; }
  .notify-card h2 { font-size: clamp(16px, 1.15vw, 20px); }
  .smart-pulse { width: 36px; height: 36px; }
  .channel-switch { padding: 5px; }
  .channel-option { min-height: 42px; }
  .channel-explainer { margin: 8px 0; min-height: 18px; font-size: 12.5px; }
  .field label { margin-bottom: 4px; font-size: 11.5px; }
  .field input { min-height: 47px; padding-top: 10px; padding-bottom: 10px; }
  .field__message { min-height: 12px; font-size: 10.5px; }
  .submit-button { min-height: 52px; margin-top: 8px; }
  .privacy-note { margin-top: 8px; }
  .notify-success { padding: 10px 8px 4px; gap: 8px; }
  .notify-success__seal { width: 56px; height: 56px; font-size: 26px; }
  .notify-success__title { font-size: clamp(17px, 1.3vw, 21px); }
  .notify-success__body { font-size: 14px; line-height: 1.85; }
  .notify-success__helper { padding: 8px 13px; font-size: 11.5px; line-height: 1.7; }
  .notify-success__again { min-height: 42px; margin-top: 4px; }
}

/* Narrower desktops: keep the channel labels on one line and the
   WhatsApp example fully visible inside the tighter inputs. */
@media (min-width: 981px) and (max-width: 1450px) {
  .channel-option { font-size: 13.5px; padding-inline: 8px; gap: 6px; }
  .field input::placeholder { font-size: 13px; }
}

/* Wide desktops with enough height: hero + values strip compose to
   exactly one viewport, as in the approved design reference.
   154px = values strip height (102px item + 2 × 26px padding). */
@media (min-width: 1250px) and (min-height: 881px) {
  .hero { min-height: calc(100vh - 154px); min-height: calc(100svh - 154px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .ambient-network { display: none; }
}

/* ------------------------------------------------------------------ */
/* Consent block (privacy workstream 2026-07-29). Checkboxes are real
   inputs (keyboard + screen-reader accessible), visually replaced by a
   drawn box; never pre-checked. Hidden rows follow the channel switch. */
.consent-block { margin: 14px 2px 0; display: grid; gap: 6px; text-align: right; }
.consent-item { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.consent-item.is-hidden { display: none; }
.consent-item input[type="checkbox"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.consent-item__box {
  flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px;
  border: 1.6px solid rgba(23, 76, 60, .8); border-radius: 6px;
  background: var(--cream-50); position: relative; transition: all .18s var(--ease);
}
.consent-item__box::after {
  content: ''; position: absolute; inset: 2px 5px 5px 2px;
  border-left: 2.2px solid var(--cream-50); border-bottom: 2.2px solid var(--cream-50);
  transform: rotate(-45deg) scale(0); transform-origin: center; transition: transform .16s var(--ease);
}
.consent-item input[type="checkbox"]:checked + .consent-item__box {
  background: var(--green-800); border-color: var(--green-800);
}
.consent-item input[type="checkbox"]:checked + .consent-item__box::after { transform: rotate(-45deg) scale(1); }
.consent-item input[type="checkbox"]:focus-visible + .consent-item__box {
  outline: 2px solid var(--green-700); outline-offset: 2px;
}
.consent-item__text { font-size: 12px; line-height: 1.8; color: var(--ink); }
.consent-item.is-invalid .consent-item__box { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(165, 62, 62, .12); }
.consent-item__message { display: block; min-height: 0; font-size: 11px; line-height: 1.7; color: var(--danger); margin: 0 30px 0 0; }
.consent-item__message:empty { display: none; }
/* Layered notice: the explanation is visually secondary, the controller line
   quieter still — but both keep AA contrast (colors from the audited palette)
   and stay visible above the submit button. */
.consent-block__note { margin: 4px 0 0; font-size: 12px; line-height: 1.8; color: #5c635e; }
.consent-block__controller { margin: 1px 0 0; font-size: 11px; line-height: 1.8; color: #63665f; }
.consent-block__controller a { color: var(--green-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.consent-block__controller a:hover { color: var(--green-900); }