/* Dubai Bound · optical glass, architectural drawing and brushed titanium. */
:root {
  --db-frost: linear-gradient(145deg, #fff 0%, #f6f9fc 55%, #e7edf3 100%);
  --db-metal: linear-gradient(178deg, #fff 0%, #ebf0f5 32%, #c4cfda 68%, #e5ebf2 100%);
  --db-machined: inset 0 1px 0 #fff, inset 0 -2px 0 #a2b0c0, 0 2px 4px #152c4817;
  --db-steel-line: #abbac9;
}

/* Controls use the same milled edge and exchangeable enamel end cap. */
.button, .button.white, .button.button-white, .journey-switch button.active {
  color: #10233b;
  background: var(--db-metal);
  border: 1px solid #adbcca;
  border-radius: 9px;
  box-shadow: var(--db-machined);
  font-weight: 700;
}
.button:has(.control-glyph) {
  gap: clamp(12px, 1.8vw, 28px);
  padding: 6px 6px 6px 18px;
  min-height: 46px;
}
.button.compact:has(.control-glyph) { min-height: 42px; padding-inline-start: 14px; }
.button.glass, .button.button-glass {
  color: #fff;
  background: linear-gradient(140deg, #55677cc9, #182b40eb 63%, #293c51e8);
  border: 1px solid #a8b8cbbb;
  box-shadow: inset 0 1px 0 #ffffff52, inset 0 -2px 0 #10203290;
}
.control-glyph {
  --glyph-size: 13px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 29px;
  height: 29px;
  border-radius: 5px;
  color: #fff;
  background: linear-gradient(145deg, #364e67, #112239 72%);
  border: 1px solid #132840;
  box-shadow: inset 0 1px 0 #ffffff38, 0 1px 0 #fff9;
}
.control-glyph::before, .control-glyph::after {
  content: "";
  display: block;
  grid-area: 1 / 1;
}
.control-glyph::before { width: var(--glyph-size); height: 1.6px; background: currentColor; }
.control-glyph::after {
  width: calc(var(--glyph-size) * .55);
  height: calc(var(--glyph-size) * .55);
  border-top: 1.6px solid;
  border-right: 1.6px solid;
  transform: translateX(2px) rotate(45deg);
}
.control-glyph.out::before { transform: rotate(-45deg); }
.control-glyph.out::after { transform: translate(2px,-2px); }
.control-glyph.down::before { transform: rotate(45deg); }
.control-glyph.down::after { transform: translate(2px,2px) rotate(90deg); }
.control-glyph.plus { border-radius: 50%; --glyph-size: 10px; }
.control-glyph.plus::after {
  width: var(--glyph-size);
  height: 1.6px;
  border: 0;
  background: currentColor;
  transform: rotate(90deg);
  transition: transform .22s ease;
}
details[open] > summary .control-glyph.plus::after { transform: none; }
.button.glass .control-glyph { color: #10233b; background: var(--db-metal); border-color: #b7c4d1; }
.button:disabled .control-glyph { opacity: .55; }

/* Frosted display cases for the eight Dubai miniatures. */
.dubai-section {
  background-color: #edf2f6;
  background-image: linear-gradient(90deg,#58718a08 1px,transparent 1px), linear-gradient(#58718a08 1px,transparent 1px);
  background-size: 40px 40px;
}
.benefits { gap: clamp(14px, 1.4vw, 22px); }
.benefit, .benefit.plan-card {
  --card-pad: clamp(18px, 1.65vw, 28px);
  min-width: 0;
  position: relative;
  justify-content: flex-start;
  padding: 0 var(--card-pad) var(--card-pad);
  border-radius: 15px;
  border: 1px solid #b7c4d1;
  color: #10223a;
  background: var(--db-frost);
  box-shadow: inset 0 0 0 2px #fff9, 0 5px 15px #2d43520c, 0 1px 2px #21364e14;
}
.specimen {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  align-self: stretch;
  height: clamp(148px, 12.9vw, 190px);
  margin: 4px calc(4px - var(--card-pad)) 21px;
  border-radius: 11px 11px 4px 4px;
  border-bottom: 1px solid #b6c4d180;
  overflow: hidden;
  background-color: #e8eef4;
  background-image: radial-gradient(ellipse at 58% 33%, #f6f9fc99, transparent 80%),
    linear-gradient(90deg, #7992a715 1px, transparent 1px), linear-gradient(#7992a715 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
}
.specimen img {
  width: auto;
  height: 95%;
  max-height: 100%;
  min-height: 0;
  aspect-ratio: 1;
  object-fit: contain;
  filter: brightness(1.105);
  mix-blend-mode: multiply;
  mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent),
              linear-gradient(to bottom, transparent, black 5%, black 94%, transparent);
  mask-composite: intersect;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.specimen::after {
  content: "";
  position: absolute;
  inset: 7px;
  pointer-events: none;
  background:
    linear-gradient(#8b9eaf,#8b9eaf) right top / 9px 1px,
    linear-gradient(#8b9eaf,#8b9eaf) right top / 1px 9px,
    linear-gradient(#8b9eaf,#8b9eaf) left bottom / 9px 1px,
    linear-gradient(#8b9eaf,#8b9eaf) left bottom / 1px 9px;
  background-repeat: no-repeat;
}
.figure-id {
  position: absolute;
  top: 7px;
  left: 9px;
  font: 700 8px/1.4 DM, sans-serif;
  letter-spacing: .14em;
  color: #52677d;
}
.benefit .eyebrow { color: #4a6079; font-size: 9px; margin-bottom: 8px; }
.benefit h3 { font-size: clamp(23px, 1.7vw, 29px); line-height: 1.12; margin-bottom: 12px; }
.benefit > p { font-size: 13px; line-height: 1.63; margin-bottom: 20px; color: #475c72; }
.benefit summary, .plan-card .text-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 6px 7px 6px 13px;
  border-radius: 7px;
  border: 1px solid var(--db-steel-line);
  background: var(--db-metal);
  box-shadow: var(--db-machined);
  color: #14283f;
  font: 700 12px/1.3 DM, sans-serif;
}
.benefit summary .control-glyph { width: 24px; height: 24px; }
.benefit details p, .sources { font-size: 12px; line-height: 1.6; color: #3c526b; }
.sources a { color: #344e6b; }
.plan-card .specimen { background-color: #d7e3ed; }
.plan-card h3 { font-size: clamp(28px, 2.2vw, 34px); }
.plan-card .text-link { margin-top: auto; }
.plan-card small { color: #53667a; margin-top: 12px; font-size: 10px; line-height: 1.45; }

/* The surrounding journeys, journal and forms echo the same materials. */
.journey-feature, .story, .application-panel {
  border: 1px solid #c3cfdb;
  background: var(--db-frost);
  box-shadow: inset 0 1px 0 #fff, 0 5px 20px #253c5510;
}
.journey-switch { border-bottom: 0; gap: 8px; flex-wrap: wrap; }
.journey-switch button {
  padding: 8px 9px 8px 13px;
  gap: 12px;
  align-items: center;
  border: 1px solid #c0ccd9;
  border-radius: 8px;
  background: #f5f8fb;
  color: #495c72;
  min-height: 44px;
}
.journey-switch button:not(.active) .control-glyph { background: #ebf0f5; box-shadow: none; color: #38516b; border-color: #c0ccd9; }
.journal-open, .journey-copy .text-link, .founder-copy .text-link {
  width: fit-content;
  gap: 12px;
  color: #192d45;
  background: var(--db-metal);
  border: 1px solid var(--db-steel-line);
  border-radius: 7px;
  box-shadow: var(--db-machined);
  padding: 5px 6px 5px 13px;
  font: 700 12px/1.3 DM, sans-serif;
  min-height: 42px;
}
.story .control-glyph { color: white; }
.faq-grid summary, .planning summary, .review-details summary { align-items: center; }
.faq-grid summary .control-glyph { color: white; }
.upload-zone input::file-selector-button {
  color: #162b43;
  background: var(--db-metal);
  border-color: var(--db-steel-line);
  box-shadow: var(--db-machined);
  min-height: 34px;
}
.menu-toggle, .journal-controls button, .journal-close {
  color: #182c41;
  border: 1px solid var(--db-steel-line);
  border-radius: 8px;
  background: var(--db-metal);
  box-shadow: var(--db-machined);
}
.journal-close, .journal-controls button { width: 42px; height: 42px; }
.menu-toggle { min-height: 42px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .benefit:hover .specimen img, .benefit:focus-within .specimen img { transform: translateY(-2px) scale(1.025); }
  .button:not(:disabled):hover, .benefit summary:hover, .plan-card .text-link:hover, .journal-open:hover {
    filter: brightness(1.035);
    box-shadow: inset 0 1px 0 #fff9, inset 0 -2px 0 #95a7ba, 0 4px 12px #192f481c;
  }
  .button:not(:disabled):active, .benefit summary:active, .journal-open:active { transform: translateY(1px); }
}
@media (max-width: 560px) {
  .header .button.compact:has(.control-glyph) { min-height: 40px; font-size: 11px; padding: 4px 5px 4px 10px; gap: 7px; }
  .header .button .control-glyph { width: 22px; height: 25px; --glyph-size: 11px; }
  .hero .button:has(.control-glyph), .closing .button:has(.control-glyph) { padding: 7px 7px 7px 15px; }
  .benefit, .benefit.plan-card { --card-pad: 20px; }
  .specimen { height: 154px; margin-bottom: 16px; }
  .journey-switch button { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .benefit:hover, .button:hover, .text-link:hover span { transform: none; }
}
@media (forced-colors: active) {
  .control-glyph::before, .control-glyph.plus::after { background: ButtonText; }
  .control-glyph { color: ButtonText; border-color: ButtonText; }
}
.menu-lines, .menu-lines::before, .menu-lines::after {
  display: block;
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
  background: #21364c;
}
.menu-lines { position: relative; margin: 0 2px; }
.menu-lines::before, .menu-lines::after {
  content: "";
  position: absolute;
  top: -5px;
}
.menu-lines::after { top: 5px; }
.menu-toggle[aria-expanded="true"] .menu-lines { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-lines::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-lines::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 800px) {
  .menu-toggle { display: inline-flex; gap: 6px; align-items: center; justify-content: center; min-width: 40px; }
}

/* The still and film share their framing; the photograph also covers autoplay delays. */
.hero-media { inset: 0; }
.hero-media picture, .hero-media picture img, .hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 55% 8%;
}
.hero-media video { opacity: 0; transition: opacity .45s ease; }
.hero-media video.has-frame { opacity: 1; }
.hero-shade {
  background: linear-gradient(90deg,#071526ef 0%,#091929d9 25%,#0a182aa3 42%,#08182b12 69%,transparent),
              linear-gradient(0deg,#071526cf,transparent 39%);
}
.hero-location {
  bottom: 18%; right: 5%; padding: 10px 15px; border: 1px solid #f7fcff72;
  border-radius: 5px; background: #0a1a2b94; box-shadow: inset 0 1px #ffffff32;
}
.hero-bottom { z-index: 3; }
.hero-founder { padding: 7px 12px; border: 1px solid #c5d7ed4a; border-radius: 8px; background: #0c1d31ac; }
.hero-founder img { border-color: #d9e6f38c; }
.hero-bottom button { min-height: 38px; background: #0b1d32ad; border-color: #cedce580; }

/* Little display objects give each count and each route a distinct silhouette. */
.proof { background: linear-gradient(172deg,#fff,#eff4f8); }
.proof-grid { grid-template-columns: 1.15fr 1.25fr 1.25fr .8fr; gap: 22px; }
.proof-grid > .impact-metric {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: 14px; padding: 12px 14px;
  border: 1px solid #c3d0dc; border-radius: 10px; background: var(--db-frost);
  box-shadow: inset 0 1px 0 white, 0 3px 8px #213b4f0d;
}
.impact-metric img, .journal-masthead img, .instrument-label img, .conversation-object {
  object-fit: contain; border: 1px solid #acb8c7; border-radius: 10px;
  box-shadow: 0 3px 8px #122c4518;
}
.impact-metric img { grid-row: span 2; width: clamp(50px,4.9vw,74px); height: auto; }
.impact-metric small { margin: 3px 0 0; color: #475a70; }
.proof-grid .impact-metric > strong { font-size: clamp(32px,3.4vw,48px); }
.journey-photo {
  display: grid; grid-template-rows: auto 1fr auto; align-items: center;
  justify-items: center; isolation: isolate; padding: 23px 24px;
  background-color: #d0d3dc;
  background-image: linear-gradient(90deg,#51668114 1px,transparent 1px), linear-gradient(#51668114 1px,transparent 1px);
  background-size: 28px 28px;
}
.journey-photo::after { inset: 8px; background: none; border: 1px solid #fff8; border-radius: 4px; pointer-events: none; }
.plate-label {
  align-self: start; justify-self: stretch; display: flex; align-items: center; gap: 13px;
  color: #394d63; font: 700 9px/1.2 DM, sans-serif; letter-spacing: .14em;
}
.plate-label i { height: 1px; flex: 1; background: #556d833d; }
.journey-photo > img {
  width: min(65%,260px); height: auto; aspect-ratio: 1; object-fit: contain; object-position: center;
  mask-image: radial-gradient(ellipse at center,black 54%,#000d 66%, transparent 78%);
}
.journey-photo .floating-label {
  position: static; justify-self: start; min-width: 0; padding: 8px 15px;
  border: 1px solid #a9b9c8; background: var(--db-metal); color: #283c52;
  box-shadow: var(--db-machined); border-radius: 5px; backdrop-filter: none;
}
.journey-photo .floating-label b { font-size: clamp(17px,1.6vw,24px); }
.founder-photo, .gateway-card { border: 1px solid #9eafc299; box-shadow: 0 5px 26px #09162924; }
.nameplate { background: linear-gradient(125deg,#0a1b2bc9,#354456a8); border-color: #d6e2ec75; box-shadow: inset 0 1px #fff4; }
.career-track { gap: 14px; border: 0; }
.career-track article {
  padding: 22px; border: 1px solid #97aec63d; border-top: 2px solid #b0c1d2; border-radius: 8px;
  background: linear-gradient(148deg,#c9d7e715,#b4c6d806); box-shadow: inset 0 1px 0 #fff2;
}
.career-track article:before { content: none; }
.career-track article small { color: #c6d6e6; }
.career-track article p { color: #b3c2d2; }
.journal-masthead { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 30px; }
.journal-masthead .eyebrow { margin-bottom: 8px; }
.journal-masthead img { width: clamp(62px,7vw,90px); height: auto; }
.story { position: relative; }
.story > img { border-bottom: 3px solid #acbdce; }
.education-line { border: 1px solid #c4d0da; background: var(--db-frost); padding: 17px 20px; border-radius: 7px; }
.comparison, .form-main {
  background-color: #10233b;
  background-image: linear-gradient(90deg,#c1d8ec07 1px,transparent 1px),linear-gradient(#c1d8ec07 1px,transparent 1px);
  background-size: 32px 32px;
}
.instrument-label { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.instrument-label img { width: 64px; height: auto; }
.instrument-label .eyebrow { margin: 0; }
.calculator { border: 1px solid #b3c9dd78; border-top: 2px solid #cfdeeb; box-shadow: inset 0 1px #fff4,0 12px 36px #08172835; }
.calc-difference { border: 1px solid #b6c8da60; border-radius: 7px; }
.expertise-tags span { color: #465b71; background: var(--db-frost); border-color: #c7d2dd; box-shadow: inset 0 1px 0 white; }
.process-heading { margin: 35px 0 20px; }
.process-heading .eyebrow { margin-bottom: 6px; }
.process-heading h3 { font-size: clamp(26px,3vw,44px); }
.steps { list-style: none; border: none; padding: 0; margin: 0; gap: clamp(12px,1.6vw,22px); }
.steps li { min-width: 0; overflow: hidden; border: 1px solid #afbdcb; background: var(--db-frost); border-radius: 12px; box-shadow: 0 4px 15px #13293e0d, inset 0 1px #fff; }
.process-object { position: relative; isolation: isolate; display: grid; place-items: center; height: clamp(150px,12.7vw,192px); margin: 4px; border-radius: 8px 8px 3px 3px; background: #cdced5; border-bottom: 1px solid #c1ccd6; overflow: hidden; }
.process-object:after { content: ''; position: absolute; inset: 8px; border: 1px solid #f3f7fb70; border-radius: 3px; pointer-events: none; }
.process-object img { height: 96%; width: auto; max-height: 100%; min-height: 0; mask-image: linear-gradient(90deg,transparent,black 12%,black 88%,transparent); transition: transform .4s var(--ease); }
.stage-number { position: absolute; z-index: 2; top: 13px; left: 13px; padding: 3px 8px; color: #23394e; font: 700 10px/1.5 DM, sans-serif; background: var(--db-metal); border: 1px solid #a9b8c8; border-radius: 4px; box-shadow: inset 0 1px #fff; }
.process-copy { padding: 16px clamp(16px,1.65vw,25px) 22px; }
.steps h4 { margin: 0 0 8px; font: 500 clamp(20px,1.65vw,26px)/1.1 Manrope,sans-serif; letter-spacing: -.045em; }
.steps p { color: #435971; font-size: 13px; line-height: 1.6; }
.faq-grid .faq-intro { position: relative; }
.conversation-object { margin-bottom: 20px; width: clamp(66px,7.5vw,110px); height: auto; }
.faq-grid details { padding: 0 16px; border: 1px solid #becbd7; border-radius: 8px; background: var(--db-frost); box-shadow: inset 0 1px #fff; }
.faq-grid details + details { margin-top: 8px; }
.faq-grid details[open] { border-color: #7f96ae; }
.faq-grid summary { padding-block: 14px; }
.faq-grid details p { color: #485d71; }
.closing { background: radial-gradient(ellipse at 80% 42%,#233c57,#0b1b30 68%); }
.closing > .container { display: grid; grid-template-columns: 1fr minmax(170px,30%); column-gap: 32px; align-items: center; }
.closing > .container > :not(.closing-door) { grid-column: 1; }
.closing-door {
  grid-column: 2; grid-row: 1 / 4; position: relative; aspect-ratio: 1; border-radius: 15px;
  display: grid; place-items: center; padding: 5%; overflow: hidden; background: #c9cbd4;
  border: 1px solid #d0dbe7; box-shadow: 0 12px 34px #07142760, inset 0 0 0 4px #e3e9ef;
}
.closing-door img { width: 100%; height: auto; mask-image: radial-gradient(ellipse at center,black 55%,#000e 65%,transparent 80%); }
.form-steps li span { display: grid; place-items: center; width: 30px; height: 28px; background: #223950; color: #c3d2e2; border-radius: 5px; border: 1px solid #526a80; }
.form-steps li.current span { color: #13273e; background: var(--db-metal); box-shadow: var(--db-machined); }
.footer { border-top: 2px solid #94a7bb; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .steps li:hover .process-object img { transform: translateY(-2px) scale(1.035); }
}
@media (max-width: 900px) {
  .proof-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .proof-grid > p, .proof-note { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 600px) {
  .hero { height: auto; min-height: 0; max-height: none; padding-bottom: 84px; background: #0b192a; }
  .hero-media { height: clamp(212px,66vw,320px); }
  .hero-media picture img, .hero-media video { object-position: 50% 5%; }
  .hero-shade { height: clamp(213px,66.2vw,321px); background: linear-gradient(0deg,#0b192a 0%,#0b192ac4 8%,transparent 31%); }
  .hero-content { padding-top: clamp(196px,61vw,294px); }
  .hero .eyebrow { margin-bottom: 16px; }
  .hero-content > p { margin: 18px 0; }
  .hero-founder { margin-top: 22px; padding: 7px 10px; }
  .hero .actions { gap: 9px; }
  .hero-bottom { bottom: 15px; padding-top: 10px; }
  .proof-grid { gap: 10px; }
  .proof-grid > .impact-metric { padding: 11px; gap: 6px; grid-template-columns: 1fr auto; }
  .impact-metric img { grid-row: 1; grid-column: 2; width: 35px; }
  .proof-grid .impact-metric > strong { grid-row: 1; grid-column: 1; font-size: 31px; }
  .proof-grid .impact-metric small { grid-column: 1 / -1; font-size: 10px; }
  .proof-grid > p { margin-bottom: 2px; }
  .journey-photo { height: 270px; min-height: 0; padding: 15px 18px; }
  .journey-photo > img { width: 154px; }
  .career-track { gap: 12px; padding-left: 0; }
  .career-track article, .career-track article:last-child { padding: 17px; }
  .journal-masthead { margin-bottom: 19px; }
  .education-line { gap: 7px; }
  .steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .process-object { height: clamp(106px,28vw,150px); }
  .stage-number { top: 6px; left: 6px; font-size: 8px; padding: 1px 5px; }
  .process-copy { padding: 10px 11px 15px; }
  .steps h4 { font-size: 18px; }
  .steps p { font-size: 12px; }
  .closing > .container { grid-template-columns: minmax(0,1fr) 25%; column-gap: 7px; }
  .closing > .container > .eyebrow, .closing > .container > .actions { grid-column: 1 / -1; }
  .closing-door { grid-row: 2; margin-bottom: 25px; border-radius: 8px; }
  .closing h2 { font-size: clamp(34px,9vw,52px); }
}
.privacy-note img, .intake-heading img, .glass-sample .brand-object { border-radius: 7px; border: 1px solid #bacbd9; flex: none; }
.intake-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 14px; }
.intake-heading h2 { margin: 0; }