/* Reference-measured typography; all rules remain inside the landing experience. */
#portal19 {
  --p21-ink: #121712;
  --p21-gold: #d9bf86;
}
#portal19 .p19-copy h1,
html[lang="en"] #portal19 .p19-copy h1 {
  font-size: clamp(32px, min(4.6vw, 7.4vh), 68px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 16ch;
  margin-bottom: 24px !important;
  text-wrap: balance;
}
#portal19 .p19-copy > p:not(.p19-eyebrow) {
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 300;
  line-height: 1.625;
  max-width: 58ch;
}
#portal19 .p19-copy {
  width: min(740px, 64%);
  padding-block: 6vh;
}
#portal19 .p19-eyebrow {
  font-size: 11px;
}
#portal19 .p19-tags {
  font-size: 11px;
  letter-spacing: 0.18em;
}
#portal19 .p19-header .p19-button {
  font-size: 12px !important;
}
#ourStory19 .p21-copy {
  right: max(32px, 5vw);
  width: min(440px, 34vw);
  max-width: 440px;
  top: 110px;
  bottom: 88px;
  gap: 20px;
  z-index: 3;
}
#ourStory19 #storyTitle21,
html[lang="en"] #ourStory19 #storyTitle21 {
  font-size: clamp(26px, 2.8vw, 42px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: balance;
}
#ourStory19 #storyTitle21 span:last-child {
  color: #f4f3ec;
}
#ourStory19[data-mode="region"] #storyTitle21 span:last-child,
#ourStory19[data-mode="unified"] #storyTitle21 span:last-child {
  color: var(--p21-gold);
}
#ourStory19[data-mode="projects"] #storyTitle21,
#ourStory19[data-mode="sdi"] #storyTitle21 {
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.12;
}
#ourStory19 .p21-kicker {
  font-size: 11px;
  letter-spacing: 0.08em;
}
#ourStory19 .p21-description,
html[lang="en"] #ourStory19 .p21-description {
  font-size: 14px;
  line-height: 1.625;
  font-weight: 300;
  color: #c6cbc3;
}
#ourStory19 .p21-note {
  font-size: 10px;
  line-height: 1.65;
  color: #a6b0a1;
}
#ourStory19 .p21-tabs {
  margin: 4px 0 0;
}
#ourStory19 .p21-tabs button {
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 300;
  line-height: 1.5;
  padding: 10px 0;
  min-height: 49px;
  gap: 14px;
  border-top: 1px solid #f6f3ec25;
  border-bottom: 0;
  color: #a2ab9c;
}
#ourStory19 .p21-tabs small {
  font-size: 10px;
  color: inherit;
}
#ourStory19 .p21-tabs button[aria-selected="true"] {
  border-top-color: #dfc17e;
  color: #f6f3ec;
}
#ourStory19 .p21-tabs button[aria-selected="true"] small {
  color: #dfc17e;
}
#ourStory19 .p21-tabs button[aria-selected="true"]:after {
  display: none;
}
#ourStory19 .p21-tabs button:hover {
  color: #e7d5a8;
}
#ourStory19 .p21-actions {
  margin-top: 0;
}
#ourStory19 .p21-actions .p19-button {
  min-height: 36px;
  font-size: 12px !important;
  padding: 7px 18px;
  font-weight: 400 !important;
}
#ourStory19 .p21-chapters {
  left: 24px;
  top: 44%;
}
#ourStory19 .p21-chapters button[aria-current] span {
  opacity: 1;
}
#ourStory19 .p21-chapters span {
  font-size: 9px;
}
#ourStory19 .p21-map {
  left: 5%;
  top: 7%;
  width: 69%;
  height: 88%;
  filter: none;
}
#ourStory19 .p21-vignette {
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      #10161022,
      transparent 18%,
      transparent 45%,
      #101610ab 69%,
      #101610e8 92%
    ),
    linear-gradient(
      0deg,
      #101610cc,
      transparent 14%,
      transparent 82%,
      #10161055
    );
}
#ourStory19 .p21-bottom {
  z-index: 4;
}
#ourStory19 .p21-compare {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 0;
}
#ourStory19 .p21-image-pair {
  background: #131b13;
}
#ourStory19 .p21-image-pair img {
  image-rendering: auto;
}
#ourStory19 .p21-divider {
  z-index: 2;
  background: #e8d3a4;
}
#ourStory19 .p21-divider span {
  width: 34px;
  height: 34px;
  top: 56%;
  background: #182117b3;
}
#ourStory19 .p21-dates {
  inset: 119px auto auto 9%;
  width: 52%;
  z-index: 2;
}
#ourStory19 .p21-dates span {
  font-size: 10px;
  border: 1px solid #e4d3a640;
  background: #101610a6;
  padding: 7px 12px;
  border-radius: 20px;
}
#ourStory19 .p21-slider-label {
  bottom: 86px;
  left: 12%;
  right: auto;
  width: 40%;
  z-index: 2;
  gap: 7px;
}
#ourStory19 .p21-slider-label span {
  font-size: 10px;
  letter-spacing: 0.04em;
}
#ourStory19 .p21-compare:focus-within {
  outline: 0;
}
#ourStory19 .p21-slider-label input:focus-visible {
  outline: 2px solid #e4c27a;
  outline-offset: 4px;
}
#ourStory19 .p21-facts b {
  font-size: clamp(22px, 2vw, 32px);
  font-weight: 300;
}
#ourStory19 .p21-orbit-ring {
  border-color: #d8bd8180;
  box-shadow: none;
}
#ourStory19 .p21-orbit-node {
  font-weight: 300;
  background: #121712;
}
/* Source detail fills the stage; geometry and imagery share the same projected viewBox. */
#ourStory19[data-detail="true"] .p21-map {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
}
#ourStory19[data-detail="true"] #story-governors {
  opacity: 0.18 !important;
}
#ourStory19 .p22-location {
  position: absolute;
  left: 10%;
  top: 119px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #efe2c1;
  background: #101610a6;
  border: 1px solid #d8bd8150;
  border-radius: 30px;
  padding: 7px 13px;
  font-size: 11px;
  font-weight: 300;
  backdrop-filter: blur(5px);
}
#ourStory19 .p22-location:before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #dac38a;
}
#ourStory19 .p22-detail-tools {
  position: absolute;
  left: 10%;
  bottom: 84px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
}
#ourStory19 .p22-detail-tools button {
  border: 1px solid #d8bd8155;
  border-radius: 25px;
  color: #e2d5b3;
  background: #121712ae;
  padding: 6px 13px;
  font-size: 10px;
}
#ourStory19 .p22-detail-tools button[aria-pressed="true"] {
  color: #112219;
  background: #d8bd81;
  border-color: #d8bd81;
}
#ourStory19 .p22-detail-tools button:hover {
  border-color: #e8d3a4;
}
#ourStory19 .p22-detail-legend {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-inline-start: 15px;
  color: #e1e0d0;
  font-size: 9px;
}
#ourStory19 .p22-detail-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
#ourStory19 .p22-detail-legend i {
  display: block;
  height: 6px;
  width: 6px;
  border: 1px solid currentColor;
}
#ourStory19 .p22-detail-legend span:first-child i {
  color: #e4d4a9;
}
#ourStory19 .p22-detail-legend span:nth-child(2) i {
  color: #a8cf83;
}
#ourStory19 .p21-map #story-detail-buildings {
  fill: #ead8a117;
  stroke: #ead8a1b3;
  stroke-width: 0.6;
}
#ourStory19 .p21-map #story-detail-farms {
  fill: #8fc67926;
  stroke: #a8cf83b3;
  stroke-width: 0.7;
}
#ourStory19 .p21-map #story-detail-services {
  fill: #b9d6d9;
  stroke: #e7f4ee;
  stroke-width: 0.7;
}
@media (min-width: 851px) and (max-height: 760px) {
  #ourStory19 .p21-copy {
    top: 105px;
    bottom: 75px;
    gap: 12px;
  }
  #ourStory19 .p21-tabs button {
    min-height: 40px;
    padding-block: 7px;
  }
  #ourStory19 .p21-note {
    font-size: 10px;
  }
}
@media (max-width: 1100px) and (min-width: 851px) {
  #ourStory19 .p21-copy {
    width: 37%;
    right: 4%;
  }
  #ourStory19 .p21-map {
    left: 0;
    width: 69%;
  }
  #ourStory19 .p21-compare {
    inset: 0;
    width: 100%;
    height: 100%;
  }
  #ourStory19 .p21-tabs button {
    font-size: 15px;
    min-height: 42px;
    padding-block: 8px;
  }
  #ourStory19 .p22-detail-legend {
    display: none;
  }
}
@media (max-width: 850px) {
  #portal19 .p19-copy {
    width: 100%;
  }
  #portal19 .p19-copy h1,
  html[lang="en"] #portal19 .p19-copy h1 {
    font-size: clamp(32px, 7vw, 52px);
    line-height: 1.12;
  }
  #portal19 .p19-tags {
    font-size: 8px;
    letter-spacing: 0.1em;
  }
  #ourStory19 .p21-copy {
    top: 49%;
    bottom: 61px;
    right: 6%;
    width: 88%;
    max-width: none;
    gap: 10px;
  }
  #ourStory19 #storyTitle21,
  html[lang="en"] #ourStory19 #storyTitle21,
  #ourStory19[data-mode="projects"] #storyTitle21,
  #ourStory19[data-mode="sdi"] #storyTitle21 {
    font-size: clamp(24px, 4.4vw, 32px);
    line-height: 1.18;
  }
  #ourStory19 .p21-description,
  html[lang="en"] #ourStory19 .p21-description {
    font-size: 13px;
    line-height: 1.625;
  }
  #ourStory19 .p21-note {
    font-size: 10px;
    line-height: 1.6;
  }
  #ourStory19 .p21-tabs {
    margin: 0;
    min-height: 38px;
    gap: 14px;
  }
  #ourStory19 .p21-tabs button {
    font-size: 13px;
    min-height: 36px;
    padding-block: 5px;
  }
  #ourStory19 .p21-map {
    top: 8%;
    left: 8%;
    width: 85%;
    height: 42%;
  }
  #ourStory19 .p21-chapters {
    left: 14px;
    top: 21%;
  }
  #ourStory19 .p21-chapters button[aria-current] span {
    display: none;
  }
  #ourStory19 .p21-vignette {
    background: linear-gradient(
      0deg,
      #101610 0%,
      #101610f5 35%,
      #1016109c 53%,
      #10161000 76%,
      #10161022 100%
    );
  }
  #ourStory19 .p21-compare {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #ourStory19 .p21-image-pair {
    height: 56%;
  }
  #ourStory19 .p21-divider {
    bottom: 44%;
  }
  #ourStory19 .p21-divider span {
    top: 53%;
  }
  #ourStory19 .p21-dates {
    top: 99px;
    left: 13%;
    width: 75%;
  }
  #ourStory19 .p21-dates span {
    font-size: 8px;
    padding: 4px 8px;
  }
  #ourStory19 .p21-slider-label {
    bottom: auto;
    top: 42%;
    left: 20%;
    width: 60%;
    gap: 0;
  }
  #ourStory19 .p21-slider-label span {
    font-size: 9px;
  }
  #ourStory19[data-detail="true"] .p21-map {
    top: 4%;
    height: 53%;
  }
  #ourStory19 .p22-location {
    top: 96px;
    left: 13%;
    font-size: 9px;
    padding: 5px 9px;
  }
  #ourStory19 .p22-detail-tools {
    top: 42%;
    bottom: auto;
    left: 13%;
  }
  #ourStory19 .p22-detail-tools button {
    font-size: 9px;
    padding: 5px 10px;
  }
  #ourStory19 .p22-detail-legend {
    font-size: 8px;
    gap: 8px;
    margin-inline-start: 4px;
  }
  #ourStory19 .p21-actions .p19-button {
    font-size: 11px !important;
    min-height: 34px;
  }
}
@media (max-width: 480px) {
  #ourStory19 .p22-detail-legend {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #ourStory19 .p21-map,
  #ourStory19 .p21-image-pair,
  #ourStory19 .p21-copy {
    transition: none !important;
  }
}
#ourStory19 .p22-geo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
#ourStory19 .p22-geo svg {
  width: 100%;
  height: 100%;
  display: block;
}
#ourStory19[data-scene="turbah"] .p22-geo svg {
  width: 74%;
  height: 100%;
  position: absolute;
  left: -2%;
}
#ourStory19[data-scene="khulais"] .p22-geo {
  left: 11%;
  top: 12%;
  width: 50%;
  height: 77%;
}
#ourStory19[data-scene="khulais"] .p22-geo:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse, #8174492b, transparent 70%);
}
#ourStory19 .p22-detail-tools button:disabled {
  opacity: 0.45;
  cursor: wait;
}
#ourStory19 .p21-stage > .p21-slider-label {
  z-index: 4;
}
#ourStory19[data-mode="ndvi"] .p21-stage > .p21-slider-label {
  color: #fff;
}
@media (min-width: 851px) {
  #ourStory19[data-scene="khulais"] .p22-detail-tools {
    left: 15%;
  }
  #ourStory19[data-scene="khulais"] .p22-location {
    left: 20%;
  }
  #ourStory19 .p22-detail-legend {
    max-width: 280px;
    flex-wrap: wrap;
    gap: 4px 12px;
  }
}
@media (max-width: 850px) {
  #ourStory19[data-scene="turbah"] .p22-geo {
    height: 56%;
  }
  #ourStory19[data-scene="turbah"] .p22-geo svg {
    width: 100%;
    left: 0;
  }
  #ourStory19[data-scene="khulais"] .p22-geo {
    top: 8%;
    left: 20%;
    width: 60%;
    height: 39%;
  }
  #ourStory19 .p21-stage > .p21-slider-label {
    z-index: 4;
  }
}
html[lang="en"] #portal19 {
  font-family: "Manrope Variable", "IBM Plex Sans Arabic", sans-serif;
}