/* Brand fonts (supplied in /Fonts): HTRakik for Arabic + UI, Bahnschrift for Latin labels and numbers,
   Adobe Arabic / Alyamama as Arabic fallbacks, Segoe UI Emoji only for emoji code points. */
@font-face{font-family:Rakik;src:url('../fonts/HTRakik-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Rakik;src:url('../fonts/HTRakik-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Rakik;src:url('../fonts/HTRakik-Medium.otf') format('opentype');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:Rakik;src:url('../fonts/HTRakik-Bold.otf') format('opentype');font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:Bahnschrift;src:url('../fonts/bahnschrift.ttf') format('truetype');font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:AdobeArabic;src:url('../fonts/AdobeArabic-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Alyamama;src:url('../fonts/alfont_com_Alyamama-Light.ttf') format('truetype');font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:SegoeEmoji;src:url('../fonts/seguiemj.ttf') format('truetype');font-display:swap;unicode-range:U+2600-27BF,U+1F300-1FAFF}

:root {
  /* ---- Colour palette -------------------------------------------------------
     primary   = brand navy (page background, dark surfaces, text on light)
     secondary = brand gold (accents, headings, figures, buttons)
     tertiary  = deep brown (advantages band, brown buttons)
     surface   = ivory (light sections, text on dark)
     neutral   = warm greys (borders, patterns, map)
     RGB triplets exist for the tones that are used with transparency:
     rgb(var(--primary-rgb) / .5) ---------------------------------------------- */
  --primary:#002231;
  --primary-rgb:0 34 49;
  --primary-soft:#082b3a;
  --primary-deep:#0d3446;
  --primary-muted:#315365;
  --primary-muted-hover:#426576;
  --slate:#2c414d;
  --slate-rgb:44 65 77;
  --slate-hover:#3b5361;
  --mist-rgb:142 153 159;
  --floating-contact-rgb:94 94 94;

  --secondary:#a4744b;
  --secondary-rgb:164 116 75;
  --secondary-mid:#b08050;
  --secondary-soft:#b88a5d;
  --secondary-light:#c9b094;
  --secondary-light-rgb:201 176 148;
  --secondary-pale:#d5c2aa;

  --tertiary:#2c180e;
  --tertiary-rgb:44 24 14;
  --tertiary-soft:#4b2d1a;
  --tertiary-mid:#744c2e;
  --tertiary-mid-hover:#624027;
  --tertiary-glow:#865d3c;

  --surface:#eee3d3;
  --surface-rgb:238 227 211;
  --surface-tint:#f9f1e6;
  --surface-hover:#decdb6;
  --surface-muted:#c5bbad;

  --neutral:#8f7f6e;
  --neutral-soft:#b8ad98;
  --neutral-warm:#b9b3a7;
  --neutral-pale:#d9cfc2;

  --accent:#2b4d5f;
  --success:#6dac38;
  --white:#fff;
  --black:#000;
  --black-rgb:0 0 0;

  /* Blogs page (blogs.html): light surface and copper text of the blog design */
  --blog-surface:#f4ede5;
  --blog-copper:#94643c;
  --blog-stone:#756d64;
  --blog-shade-rgb:18 21 19;
  --blog-grey:#909090;

  /* Projects page (projects.html): teal accent pieces and the ivory underline of the slide design */
  --projects-teal:#23455a;
  --projects-ivory:#ede2d2;

  /* Project details page (project-details.html): the warm greys, gold and status tones of the listing design */
  --project-details-gold:#a87c4e;
  --project-details-stone:#4c4a48;
  --project-details-mute:#706d69;
  --project-details-line:#d9c7ad;
  --project-details-chip:#e2d3bd;
  --project-details-sold:#c8202a;
  --project-details-available:#2f9e44;
  --project-details-shade-rgb:18 18 16;

  /* Single project page (one-project-details.html) and the lead forms (interest.html, appointment.html):
     the deep gold of figures, the cocoa and bark of the buttons and copy, the warm grey of placeholders */
  --one-project-details-gold:#a8804e;
  --one-project-details-cocoa:#2d1a0c;
  --one-project-details-bark:#3d352e;
  --one-project-details-grey:#777470;
  --one-project-details-grey-rgb:119 116 112;
  --one-project-details-stone-rgb:76 74 72;
  --one-project-details-price:#a87b4e;
  --one-project-details-note:#7c7973;
  --one-project-details-brown:#a67950;
  --one-project-details-cocoa-light:#5e3d27;
  --one-project-details-cocoa-dark:#25140b;
  --lead-form-error:#ffd0c4;
  --lead-form-invalid-rgb:200 32 42;

  /* Contact page (contact-us.html): the green under the flag thumbnail and the salmon of inline field errors */
  --contact-us-flag:#1f7a3f;
  --contact-us-error:#f0b8a4;

  /* About page (about-us.html): the sand of the light sections, the teal of the title and pill, the navy panel behind the
     partner tiles, the paper of the certificate cards, the grey of the "why" statement, the cocoa steps of the brown
     gradient (its darkest stop is shared with the project sheet) and the easing of the source design */
  --about-us-sand:#ede2d2;
  --about-us-teal:#24455a;
  --about-us-teal-rgb:36 69 90;
  --about-us-panel:#072838;
  --about-us-paper:#f8f8f8;
  --about-us-body:#ede8e4;
  --about-us-cocoa:#2c1a0b;
  --about-us-cocoa-light:#5f3e28;
  --about-us-cocoa-dark-rgb:37 20 11;
  --about-us-ease:cubic-bezier(.22,.61,.36,1);

  /* Semantic aliases */
  --text:var(--surface);
  --text-dark:var(--primary);
  --border:rgb(var(--secondary-light-rgb) / .3);
  --line-accent:var(--accent);

  --page-width:1440px;
  --font:Rakik,AdobeArabic,Alyamama,Arial,sans-serif,SegoeEmoji;
  --font-latin:Bahnschrift,Rakik,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
  background:var(--primary)
}

body {
  margin:0;
  background:var(--primary);
  color:var(--text);
  font-family:var(--font);
  font-size:18px;
  line-height:1.55;
  -webkit-text-size-adjust:100%
}

button,input,select {
  font:inherit
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent
}

button,a {
  touch-action:manipulation
}

button {
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none
}

button {
  color:inherit
}

button:disabled {
  cursor:default
}

img {
  max-width:100%;
  height:auto;
  display:block
}

button,select,input {
  min-width:0
}

button {
  border:0;
  background:none
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  font-weight:500
}

ul,dl {
  margin:0;
  padding:0
}

svg {
  display:block
}

button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--secondary-light);
  outline-offset:5px
}

button:hover,a:hover {
  transition:color .2s ease,background .2s ease
}

input,select {
  border-radius:0
}

button[hidden],[hidden] {
  display:none!important
}

main {
  overflow:clip
}

.icon-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.icon {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}

.icon.small {
  width:18px;
  height:18px
}

.grid-icon {
  fill:currentColor;
  stroke:none
}

.icon-button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-width:40px;
  min-height:40px;
  padding:8px;
  line-height:1
}

.plain-button {
  padding:0;
  background:none;
  border:0
}

.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}

.skip-link {
  position:fixed;
  top:-80px;
  inset-inline-start:20px;
  background:var(--surface);
  color:var(--primary);
  padding:10px 18px;
  z-index:100
}

.skip-link:focus {
  top:14px
}

.container {
  width:calc(100% - 128px);
  max-width:1280px;
  margin-inline:auto
}

.section {
  position:relative
}

.section-heading {
  font-size:32px;
  line-height:1.3;
  text-align:center
}

.button {
  display:inline-flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border-radius:9px;
  padding:4px 24px;
  font-size:20px;
  line-height:1.55;
  transition:background .2s ease,color .2s ease
}

.button-brown {
  background:linear-gradient(120deg,var(--tertiary-mid),var(--tertiary));
  color:var(--surface);
  box-shadow:0 1px 3px rgb(var(--tertiary-rgb) / .19)
}

.button-brown:hover {
  background:var(--tertiary-mid-hover)
}

.button-outline {
  border:1px solid var(--secondary-soft);
  color:var(--secondary);
  font-size:19px;
  padding:4px 18px
}

.button-outline:hover {
  background:rgb(var(--secondary-rgb) / .09)
}

.button-blue {
  background:var(--primary-muted);
  color:var(--surface);
  font-size:18px;
  padding:2px 18px;
  min-height:36px;
  border-radius:8px
}

.button-blue:hover {
  background:var(--primary-muted-hover)
}

/* Header and hero are normal layout elements over a single property photograph. */
.hero {
  height:clamp(760px,60.795vw,875px);
  isolation:isolate;
  overflow:hidden;
  background:var(--primary)
}

.hero-image {
  position:absolute;
  max-width:none;
  width:124.607%;
  height:115.35%;
  left:-10.337%;
  top:5.587%;
  object-fit:fill;
  z-index:-4
}

.hero-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,var(--primary) 0%,var(--primary) 7%,rgb(var(--primary-rgb) / .88) 20%,rgb(var(--primary-rgb) / .6) 46%,rgb(var(--primary-rgb) / .69) 68%,rgb(var(--tertiary-rgb) / .8) 86%,rgb(var(--secondary-rgb) / .85) 100%);
  z-index:-3
}

.hero::after {
  content:"";
  position:absolute;
  z-index:-2;
  inset:auto -8% -180px;
  height:450px;
  background:var(--secondary-light);
  opacity:.12;
  mask:url('../images/logo.svg') center / 1450px 940px no-repeat;
  pointer-events:none
}

.site-header {
  width:100%;
  height:106px;
  padding:20px 34px;
  display:flex;
  align-items:center;
  gap:72px;
  position:relative;
  z-index:10
}

.brand {
  display:block;
  flex:none
}

.brand img {
  width:96px;
  height:61px;
  object-fit:contain
}

.primary-nav {
  display:flex;
  align-items:center;
  gap:40px;
  white-space:nowrap
}

.primary-nav a {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  font-size:19px
}

.primary-nav .active {
  color:var(--secondary-light)
}

.primary-nav a:hover,.header-utilities a:hover,.header-utilities button:hover {
  color:var(--secondary-light)
}

.header-utilities {
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:21px;
  font-size:19px;
  white-space:nowrap
}

.header-utilities .icon-button {
  min-width:24px;
  min-height:36px;
  padding:2px;
  color:rgb(var(--surface-rgb) / .8)
}

.header-utilities .icon {
  width:20px;
  height:20px;
  stroke-width:1.2
}

.language-switch {
  font-family:var(--font-latin);
  font-size:19px;
  line-height:1;
  padding:10px 0
}

.header-utilities .grid-icon {
  width:19px;
  height:19px
}

.menu-toggle,.primary-nav .mobile-link {
  display:none
}

.hero-content {
  text-align:center;
  position:relative;
  margin-top:84px
}

.hero-content h1 {
  font-size:72px;
  line-height:1.2;
  font-weight:400;
  font-feature-settings:"ss01" 1
}

.hero-tagline {
  font-size:35px;
  line-height:1.4;
  color:var(--secondary);
  margin-top:1px;
  font-weight:400
}

.latest-projects {
  display:inline-block;
  margin-top:85px;
  border-radius:40px;
  background:rgb(var(--mist-rgb) / .36);
  color:var(--surface);
  font-size:24px;
  padding:3px 20px;
  backdrop-filter:blur(4px)
}

.latest-projects:hover {
  background:rgb(var(--mist-rgb) / .5)
}

.hero-dots {
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:18px
}

.hero-dots i,.carousel-pagination button {
  display:block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--neutral-soft);
  opacity:.8
}

.hero-dots .active,.carousel-pagination .active {
  background:var(--secondary-mid);
  opacity:1
}

.hero-projects {
  position:absolute;
  left:50%;
  bottom:55px;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  width:960px;
  max-width:77%;
  direction:ltr
}

/* One continuous ivory rule runs under all four names; each name gets a short coloured piece on it. */
.hero-projects::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:35px;
  height:2px;
  background:var(--surface);
  pointer-events:none
}

.hero-projects button {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  color:var(--primary);
  text-align:right;
  direction:rtl;
  font-size:27px;
  line-height:1.23;
  min-height:120px;
  padding:0 4px 5px 12px
}

.hero-project-name {
  position:relative;
  display:block;
  width:100%;
  height:37px;
  color:var(--surface);
  font-family:var(--font-latin);
  font-size:22px;
  line-height:29px;
  padding-bottom:8px;
  margin-bottom:4px;
  text-align:right
}

.hero-project-name::after {
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  width:58px;
  height:4px;
  background:var(--line-accent);
  border-radius:1px
}

.hero-projects button:hover .hero-project-name {
  color:var(--white)
}

.hero-projects button:hover .hero-project-name::after {
  background:var(--secondary)
}

/* Floating call / WhatsApp buttons (layout/floating-contact.html): fixed to the start edge of the
   viewport on every page, independent of the hero. Measured on the 1440px design: 77×57px grey pills
   18px apart, 13px / 25px corners on the visible side, a 30×28px handset and a 37×35px WhatsApp bubble
   (both glyphs traced from the PDF vectors, so they sit exactly as in the design). */
.floating-contact {
  position:fixed;
  inset-inline-start:0;
  top:clamp(240px,56vh,506px);
  display:flex;
  flex-direction:column;
  gap:18px;
  z-index:40
}

.floating-contact-button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:77px;
  height:57px;
  border-start-end-radius:13px;
  border-end-end-radius:25px;
  background:rgb(var(--floating-contact-rgb) / .78);
  color:var(--surface);
  transition:background-color .2s var(--ease)
}

.floating-contact-button:hover,.floating-contact-button:focus-visible {
  background:rgb(var(--floating-contact-rgb) / .92)
}

.floating-contact-button svg {
  fill:currentColor;
  stroke:none
}

.floating-contact-phone {
  width:30px;
  height:28px
}

.floating-contact-whatsapp {
  width:37px;
  height:35px
}

/* The design lightens the inside of the bubble with a faint white veil */
.floating-contact-whatsapp-veil {
  fill:var(--white);
  fill-opacity:.16
}

/* The hero establishes the containing block for its photo, overlay and tabs. */
.hero {
  position:relative
}

body.dialog-open {
  overflow:hidden
}

.map-project-card.without-photo {
  background:var(--primary-soft)
}

.map-project-latin {
  font-family:var(--font-latin)!important
}

@media(max-width:960px) {
  .map-project-card.without-photo {
    grid-template-columns:1fr;
    min-height:165px
  }
  .map-project-card.without-photo .map-project-copy {
    padding-top:25px
  }
}

/* About */
.about {
  background:var(--surface) url('../images/about-us-section-bg.png') center/cover no-repeat;
  color:var(--primary);
  padding:170px 0 108px;
  min-height:685px;
  overflow:hidden
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:70px;
  align-items:start;
  position:relative;
  max-width:1300px
}

.side-heading {
  font-size:32px;
  line-height:1.25;
  border-inline-start:3px solid var(--secondary-mid);
  padding-inline-start:11px;
  margin-bottom:25px
}

.about-copy p {
  font-size:22px;
  line-height:1.28;
  text-align:justify;
  font-weight:400
}

.company-profile-row {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:92px;
  padding-inline-start:34px
}

.decorative-arrow {
  display:flex;
  align-items:center;
  gap:6px;
  width:92px;
  flex:none;
  color:var(--secondary-soft)
}

.decorative-arrow::before {
  content:"";
  flex:1;
  height:1px;
  background:currentColor
}

.decorative-arrow::after {
  content:"";
  width:9px;
  height:9px;
  flex:none;
  background:currentColor;
  transform:rotate(45deg)
}

.about-statistics {
  text-align:center;
  padding-top:7px
}

.statistics-oval {
  border:1px solid var(--neutral);
  border-radius:180px;
  padding:31px 65px 8px;
  height:325px;
  overflow:hidden
}

/* The figures slide vertically inside the oval. main.js moves `.statistics-track` (auto-scroll,
   mouse wheel, drag, arrow keys) and marks the item nearest the top as `.is-front`, which is drawn
   larger; every other figure shares the same base size. */
.statistics-list {
  --stat-size:34px;
  --stat-front:46px;
  --label-size:20px;
  --label-front:25px;
  --stat-gap:26px;
  display:block;
  max-height:292px;
  overflow:hidden;
  cursor:grab;
  touch-action:pan-x;
  user-select:none;
  outline-offset:14px;
  mask-image:linear-gradient(transparent 0,var(--black) 3%,var(--black) 58%,transparent 100%)
}

.statistics-list.is-dragging {
  cursor:grabbing
}

.statistics-track {
  display:flex;
  flex-direction:column;
  gap:var(--stat-gap);
  padding-bottom:var(--stat-gap);
  will-change:transform
}

.statistics-track>div {
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:3px;
  opacity:.72;
  transition:opacity .35s ease
}

.statistics-track>div.is-front {
  opacity:1
}

.statistics-list dd {
  margin:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  color:var(--secondary-mid);
  gap:.2em;
  font-size:var(--stat-size);
  line-height:1.1;
  transition:font-size .35s ease
}

.statistics-track>div.is-front dd {
  font-size:var(--stat-front)
}

.statistics-list dt {
  font-size:var(--label-size);
  line-height:1.3;
  transition:font-size .35s ease
}

.statistics-track>div.is-front dt {
  font-size:var(--label-front)
}

.stat-number {
  font-family:Rakik,AdobeArabic,Arial,sans-serif;
  font-weight:700
}

.stat-units {
  font-family:var(--font-latin);
  font-weight:400
}

.stat-plus {
  font-family:Rakik,Arial,sans-serif;
  font-size:.92em;
  font-weight:300
}

.area-unit {
  font-size:.78em;
  font-weight:500
}

.area-unit sup {
  font-size:.55em;
  position:relative;
  top:-.25em
}

.statistics-list .stat-projects {
  gap:.25em
}

.about-statistics>.button {
  margin-top:24px;
  min-width:180px
}

/* Benefits */
.advantages {
  background:radial-gradient(ellipse at 0 115%,var(--tertiary-glow) 0%,var(--tertiary-soft) 34%,var(--tertiary) 73%);
  padding:100px 0 100px;
  min-height:495px
}

.ornament-heading {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--surface)
}

.ornament-heading>span {
  display:flex;
  align-items:center;
  gap:46px
}

.ornament-heading::before,.ornament-heading::after {
  content:"";
  display:block;
  width:34px;
  height:1px;
  background:var(--secondary-soft);
  transform:translateY(9px)
}

.ornament-heading>span::before,.ornament-heading>span::after {
  content:"";
  display:block;
  width:8px;
  height:8px;
  flex:none;
  background:var(--secondary-soft);
  transform:translateY(9px) rotate(45deg)
}

.advantages-grid {
  width:calc(100% - 200px);
  max-width:1120px;
  margin:75px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:56px
}

.advantage {
  padding-inline-start:14px;
  border-inline-start:1px solid rgb(var(--surface-rgb) / .85);
  text-align:justify;
  min-width:0
}

.feature-icon {
  width:36px;
  height:36px;
  color:var(--secondary);
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.3;
  margin-bottom:5px
}

.advantage h3 {
  color:var(--secondary-mid);
  font-size:19px;
  line-height:1.3;
  margin-bottom:11px;
  white-space:nowrap
}

.advantage p {
  font-size:14px;
  line-height:1.27;
  color:var(--secondary-pale)
}

/* The carousel cards stay in the document; CSS reflows them on mobile. */
.projects {
  padding:102px 0 44px;
  background:var(--primary)
}

.projects-heading {
  text-align:center
}

.projects-heading p {
  max-width:625px;
  margin:22px auto 0;
  font-size:23px;
  line-height:1.25;
  color:var(--secondary-light)
}

.project-carousel {
  position:relative;
  width:calc(100% - 300px);
  max-width:1040px;
  margin:63px auto 0;
  direction:ltr
}

.project-track {
  display:grid;
  grid-template-columns:1fr 1.8fr 1fr;
  gap:40px;
  align-items:end;
  min-height:533px;
  touch-action:pan-y;
  direction:ltr
}

/* CMS integration: the admin can pick more than 3 carousel projects, but the track's 3-column
   grid only ever shows 3 at a time. main.js keeps the current 3 as the last 3 DOM children
   (see setSlide in assets/js/main.js), so hide everything else on non-mobile layouts; the
   max-width:700px rules below already limit the mobile view to the featured card alone. */
@media(min-width:701px) {
  #project-track > [data-card] {
    display:none
  }
  #project-track > [data-card]:nth-last-child(-n+3) {
    display:block
  }
}

.project-card {
  min-width:0;
  background:var(--primary-soft);
  direction:rtl
}

.project-image-button {
  display:block;
  width:100%;
  padding:0;
  overflow:hidden;
  height:340px
}

.project-image-button img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s var(--ease)
}

.project-image-button:hover img {
  transform:scale(1.035)
}

.project-card.is-featured .project-image-button {
  height:427px
}

.project-card[data-card="11"] .project-image-button img {
  object-position:42% center
}

.project-card[data-card="15"] .project-image-button img {
  object-position:63% center
}

.project-card-info {
  position:relative;
  padding:12px 12px 14px;
  min-height:106px;
  line-height:1.2;
  color:var(--secondary-light)
}

.project-card-info h3 {
  font-family:var(--font-latin);
  font-size:19px;
  font-weight:400;
  text-align:right;
  line-height:1.3;
  margin-bottom:6px
}

.project-card-info h3 button {
  position:relative;
  padding:0 0 8px;
  color:var(--surface);
  text-align:right;
  font:inherit
}

.project-card-info h3 button::after {
  content:"";
  position:absolute;
  left:0;
  right:-10px;
  bottom:0;
  height:3px;
  background:linear-gradient(to right,var(--surface) 0 62%,var(--line-accent) 62% 100%)
}

.project-card-info p {
  font-size:23px;
  line-height:1.16
}

.availability-badge {
  position:absolute;
  left:13px;
  top:14px;
  font-size:12px;
  line-height:1.5;
  border:1px solid rgb(var(--secondary-light-rgb) / .47);
  padding:1px 9px;
  border-radius:24px
}

.carousel-arrow {
  position:absolute;
  top:48%;
  width:44px;
  height:48px;
  padding:10px;
  color:var(--secondary);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%
}

.carousel-arrow:hover {
  background:rgb(var(--secondary-light-rgb) / .06)
}

.carousel-previous {
  left:-65px
}

.carousel-next {
  right:-65px
}

.explore-button {
  display:flex;
  width:max-content;
  margin:36px auto 0
}

.carousel-pagination {
  display:flex;
  direction:ltr;
  justify-content:center;
  gap:8px;
  margin-top:19px
}

.carousel-pagination button {
  border:0;
  padding:0;
  position:relative;
  cursor:pointer
}

.carousel-pagination button::after {
  position:absolute;
  content:"";
  inset:-10px
}

.carousel-pagination button:focus-visible {
  outline-offset:10px
}

/* Individually extracted brand logos are the only artwork in the partner strip. */
.partners {
  padding:43px 24px 22px;
  background:var(--primary)
}

.pill-heading {
  display:block;
  text-align:center;
  font-size:26px;
  line-height:1.2;
  background:var(--primary-soft);
  border-radius:14px;
  width:max-content;
  max-width:100%;
  min-width:245px;
  padding:7px 28px;
  margin:0 auto 22px
}

.partner-logos {
  background:var(--primary-soft);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:center;
  gap:28px;
  padding:23px 22px;
  max-width:735px;
  min-height:174px;
  margin:auto
}

.partner-logos img {
  max-width:100%;
  width:100%;
  height:125px;
  object-fit:contain;
  mix-blend-mode:lighten
}

.partner-logos img:nth-child(3) {
  height:128px
}

/* The map is an image backdrop with native, filterable project buttons. */
.map-section {
  padding:0 28px 55px;
  max-width:1600px;
  margin:auto
}

.map-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 36px;
  margin-bottom:28px
}

.map-heading h2 {
  font-size:28px;
  line-height:1.3
}

.map-heading h2::before {
  content:"•";
  color:var(--surface);
  font-size:15px;
  margin-inline-end:8px
}

.map-heading>a {
  color:var(--secondary);
  font-size:23px
}

.map-shell {
  position:relative;
  border-radius:40px;
  background:var(--neutral-warm);
  isolation:isolate;
  min-height:655px
}

.map-shell::before {
  position:absolute;
  content:"";
  width:69%;
  height:33px;
  background:var(--primary);
  top:-1px;
  left:16.5%;
  border-radius:0 0 24px 24px;
  z-index:4
}

.map-topbar {
  position:absolute;
  inset:12px 17px auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  direction:ltr;
  z-index:5;
  pointer-events:none
}

.listing-tabs {
  display:flex;
  background:var(--primary);
  color:var(--surface);
  padding:0 13px;
  height:76px;
  align-items:center;
  border-radius:23px;
  pointer-events:auto;
  direction:rtl;
  width:201px;
  justify-content:space-around;
  font-size:19px
}

.listing-tabs button {
  min-width:63px;
  min-height:44px;
  padding:4px 7px
}

.listing-tabs .active {
  color:var(--secondary);
  text-decoration:underline;
  text-underline-offset:8px
}

.map-reset {
  border-radius:50%;
  width:76px;
  height:76px;
  background:var(--primary);
  color:var(--secondary);
  pointer-events:auto
}

.map-reset .icon {
  width:31px;
  height:31px;
  stroke-width:1
}

.map-filters {
  position:absolute;
  z-index:5;
  top:53px;
  left:20%;
  width:66%;
  display:grid;
  grid-template-columns:1.18fr 1.3fr 1fr 110px;
  gap:18px;
  direction:rtl;
  align-items:stretch
}

.filter-select,.filter-query {
  position:relative;
  display:block;
  min-width:0;
  background:var(--surface);
  box-shadow:0 4px 9px rgb(var(--tertiary-rgb) / .12)
}

.filter-select select,.filter-query input {
  width:100%;
  height:51px;
  padding:8px 18px 8px 38px;
  color:var(--secondary);
  font-size:22px;
  line-height:1.3;
  border:0;
  background:transparent;
  appearance:none;
  direction:inherit
}

.filter-query input {
  padding-inline-start:15px;
  padding-inline-end:37px
}

.filter-query input::placeholder {
  color:var(--secondary);
  opacity:1
}

.filter-select>.icon,.filter-query>.icon {
  position:absolute;
  left:12px;
  top:17px;
  width:17px;
  height:17px;
  color:var(--secondary);
  pointer-events:none
}

.filter-submit {
  min-height:51px;
  background:var(--surface);
  color:var(--secondary);
  box-shadow:0 4px 9px rgb(var(--tertiary-rgb) / .12);
  font-size:23px
}

.filter-submit:hover {
  background:var(--surface-tint)
}

.map-viewport {
  overflow:auto;
  scrollbar-width:none;
  border-radius:40px;
  direction:ltr;
  min-height:655px
}

.map-viewport::-webkit-scrollbar {
  display:none
}

.map-canvas {
  position:relative;
  width:100%;
  height:655px;
  overflow:hidden;
  background:var(--neutral-pale) url('../images/map-riyadh.png') center/cover no-repeat;
  z-index:0
}

/* Leaflet map: OpenStreetMap data on light CARTO tiles, tinted to the beige of the design. */
.leaflet-map {
  position:absolute;
  inset:0;
  z-index:1;
  background:var(--neutral-pale);
  font-family:var(--font)
}

.leaflet-map .leaflet-tile-pane {
  filter:grayscale(.45) sepia(.55) saturate(.8) brightness(.97) contrast(.95)
}

.leaflet-map .leaflet-control-zoom {
  border:0;
  box-shadow:0 4px 12px rgb(var(--primary-rgb) / .25);
  margin:0 18px 22px 0
}

.leaflet-map .leaflet-control-zoom a {
  background:var(--primary);
  color:var(--surface);
  border-color:var(--primary-deep);
  width:38px;
  height:38px;
  line-height:38px;
  font:400 22px/38px var(--font-latin)
}

.leaflet-map .leaflet-control-zoom a:hover {
  background:var(--primary-deep);
  color:var(--secondary-light)
}

.leaflet-map .leaflet-control-attribution {
  background:rgb(var(--surface-rgb) / .82);
  color:var(--tertiary-soft);
  font-size:11px
}

.leaflet-map .leaflet-control-attribution a {
  color:var(--tertiary-mid)
}

.leaflet-map .leaflet-marker-icon {
  background:none;
  border:0
}

.map-tint {
  position:absolute;
  inset:0;
  background:rgb(var(--primary-rgb) / .19);
  pointer-events:none
}

.map-marker {
  position:relative;
  display:inline-block;
  transform:translate(-50%,-100%);
  color:var(--white);
  background:var(--primary-deep);
  border:1px solid var(--surface);
  font-family:var(--font-latin);
  font-size:18px;
  line-height:1.2;
  padding:2px 6px;
  white-space:nowrap;
  box-shadow:0 1px 4px rgb(var(--primary-rgb) / .19);
  cursor:pointer;
  direction:ltr
}

.map-marker::before {
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:12px;
  height:12px;
  margin-left:-6px;
  border-radius:50%;
  background:var(--surface);
  box-shadow:0 0 0 6px rgb(var(--surface-rgb) / .5)
}

.map-marker.is-hidden {
  display:none
}

.map-canvas>.map-marker {
  position:absolute;
  left:var(--x);
  top:var(--y);
  z-index:2
}

.map-marker:hover,.map-marker.is-selected {
  background:var(--primary-soft);
  box-shadow:0 0 0 2px rgb(var(--secondary-rgb) / .44)
}

.map-marker:focus-visible {
  outline:2px solid var(--secondary-light);
  outline-offset:3px
}

.map-project-card {
  position:absolute;
  right:8px;
  top:173px;
  width:300px;
  height:407px;
  isolation:isolate;
  color:var(--secondary);
  overflow:hidden;
  z-index:3;
  background:var(--primary-soft);
  direction:rtl;
  cursor:pointer
}

.map-project-card>img {
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:40% center;
  z-index:-3
}

.map-project-card::after {
  position:absolute;
  content:"";
  inset:0;
  background:linear-gradient(transparent 21%,rgb(var(--black-rgb) / .74) 65%,rgb(var(--black-rgb) / .94) 100%);
  z-index:-2
}

.map-card-controls {
  display:flex;
  align-items:center;
  direction:ltr;
  padding:8px 6px;
  cursor:default
}

.map-card-controls>.icon-button {
  min-width:36px;
  width:36px
}

.map-card-controls>img {
  margin-left:auto;
  width:36px;
  opacity:.75
}

.map-project-copy {
  position:absolute;
  bottom:18px;
  left:17px;
  right:17px;
  text-align:right;
  font-size:22px;
  line-height:1.25
}

.map-project-copy h3 {
  color:var(--surface);
  font-weight:400;
  font-size:24px;
  line-height:1.3
}

.map-project-copy h3 button {
  padding:0;
  text-align:inherit
}

.map-availability {
  color:var(--surface);
  font-size:24px;
  line-height:1.35;
  display:flex;
  gap:7px;
  align-items:center;
  margin-bottom:5px
}

.map-availability>i {
  width:7px;
  height:7px;
  flex:none;
  border-radius:50%;
  background:var(--success)
}

.map-project-copy .map-project-latin {
  font-family:var(--font-latin);
  color:var(--secondary-light);
  font-size:16px;
  line-height:1.5
}

.map-empty {
  position:absolute;
  z-index:6;
  top:45%;
  left:50%;
  transform:translate(-50%,-50%);
  width:360px;
  max-width:85%;
  background:var(--primary);
  text-align:center;
  padding:28px;
  border-radius:16px;
  box-shadow:0 8px 24px rgb(var(--primary-rgb) / .3)
}

.map-empty p {
  margin-bottom:17px
}

/* Footer */
.site-footer {
  padding:47px 0 66px;
  background:var(--primary);
  color:var(--text);
  overflow:hidden
}

.site-footer::after {
  content:"";
  pointer-events:none;
  position:absolute;
  width:620px;
  height:510px;
  left:-300px;
  bottom:-150px;
  background:var(--primary-muted);
  opacity:.13;
  mask:url('../images/logo.svg') center/contain no-repeat;
  transform:rotate(25deg)
}

.footer-brand-row {
  display:grid;
  grid-template-columns:1fr 250px 1fr;
  align-items:center;
  gap:74px;
  min-height:230px
}

.footer-brand-note {
  font-size:23px;
  line-height:1.4;
  text-align:center
}

.footer-seal {
  display:block;
  width:225px;
  margin:auto
}

.footer-seal img {
  width:100%;
  mix-blend-mode:lighten
}

.footer-slogan {
  text-align:center
}

.footer-slogan>p {
  font-size:51px;
  line-height:1.2;
  font-weight:400;
  font-feature-settings:"ss01" 1;
  white-space:nowrap
}

.footer-slogan>span {
  font-size:25px;
  line-height:1.4;
  color:var(--secondary);
  white-space:nowrap
}

.footer-main {
  display:grid;
  grid-template-columns:1.17fr 1fr;
  gap:150px;
  align-items:start;
  margin-top:118px
}

.footer-contact {
  min-width:0
}

.newsletter-form>label {
  display:block;
  font-size:23px;
  margin-bottom:13px
}

.newsletter-field {
  display:flex;
  align-items:stretch;
  background:var(--surface);
  min-height:56px
}

.newsletter-field>input {
  border:0;
  background:transparent;
  flex:1;
  min-width:0;
  padding:9px 22px;
  font-size:18px;
  line-height:1.4;
  color:var(--primary);
  direction:rtl
}

.newsletter-field>input::placeholder {
  color:var(--surface-muted)
}

.newsletter-field>button {
  color:var(--secondary);
  font-weight:500;
  padding:9px 21px;
  min-width:94px;
  font-size:20px
}

.newsletter-field>button:hover {
  background:var(--surface-hover)
}

.contact-methods {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin-top:46px;
  text-align:start
}

.contact-methods div {
   align-items: center;
    display: flex;
    flex-direction: column;
}

.contact-methods h3 {
  font-size:22px;
  line-height:1.4;
  font-weight:400;
  margin-bottom:12px
}

.contact-methods a {
  color:var(--secondary-light);
  font-size:18px;
  display:inline-flex;
  gap:16px;
  align-items:center;
  line-height:1.5
}

.contact-methods .phone-number {
  letter-spacing:2px;
  font-family:Rakik,Arial,sans-serif;
  padding-inline-start:8px
}

.contact-methods .icon {
  color:var(--secondary);
  width:26px;
  height:26px
}

.footer-social-row {
  display:flex;
  align-items:center;
  gap:130px;
  margin-top:35px
}

.footer-social-row>p {
  font-size:22px;
  white-space:nowrap
}

.social-icons {
  display:flex;
  align-items:center;
  gap:13px;
  direction:ltr
}

.social-icons>button {
  background:var(--secondary-mid);
  width:27px;
  height:27px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  font:bold 18px/1 Arial,sans-serif;
  padding:4px
}

.social-icons>button::after {
  content:"";
  position:absolute;
  width:40px;
  height:40px
}

.social-icons .icon {
  width:19px;
  height:19px;
  stroke-width:1.6
}

.social-icons>button:hover {
  background:var(--secondary-light)
}

.social-icons>button>span {
  display:block;
  font-size:16px
}

.footer-links-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:77px;
  max-width:440px;
  justify-self:end;
  width:100%;
  padding-top:33px
}

.footer-links-grid nav {
  min-width:0
}

.footer-links-grid h3 {
  position:relative;
  width:max-content;
  font-size:19px;
  line-height:1.4;
  padding-bottom:9px;
  margin-bottom:8px;
  font-weight:400
}

.footer-links-grid h3::after {
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:0;
  height:1.5px;
  background:linear-gradient(to right ,var(--surface) 0 64%,var(--line-accent) 64% 100%)
}

html[dir=ltr] .footer-links-grid h3::after {
  background:linear-gradient(to left,var(--surface) 0 64%,var(--line-accent) 64% 100%)
}

.footer-links-grid a,.footer-links-grid button {
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  color:var(--secondary-light);
  padding:4px 0;
  min-height:29px;
  line-height:1.25;
  font-size:18px;
  text-align:start;
  border-bottom:1px solid rgb(var(--secondary-light-rgb) / .12);
  justify-content:space-between
}

.footer-links-grid a::after,.footer-links-grid button::after {
  content:"↖";
  font:14px/1 Arial,sans-serif;
  opacity:.48
}

.footer-links-grid a:hover,.footer-links-grid button:hover {
  color:var(--surface)
}

.footer-bottom {
  margin-top:50px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  position:relative;
  z-index:1;
  color:var(--surface);
  font-size:17px;
  line-height:1.6;
  font-weight: 100;
}

.footer-bottom>p {
  max-width:68%
}

.footer-bottom>div {
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap
}

.footer-bottom button {
  font-size:17px;
  padding:3px 0;
  color:var(--surface)
}

.footer-bottom button:hover {
  color:var(--secondary-light)
}

/* Accessible dialogs, opened by actual controls. */
.site-dialog {
  background:var(--primary);
  color:var(--surface);
  border:1px solid rgb(var(--secondary-rgb) / .53);
  border-radius:22px;
  padding:26px 30px 34px;
  width:min(620px,calc(100% - 32px));
  max-height:88svh;
  overflow:auto;
  margin:auto;
  box-shadow:0 20px 70px rgb(var(--black-rgb) / .53)
}

.site-dialog::backdrop {
  background:rgb(var(--primary-rgb) / .88);
  backdrop-filter:blur(5px)
}

.dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px
}

.dialog-top>img {
  width:78px
}

.dialog-close {
  color:var(--secondary-light)
}

#dialog-content h2 {
  font-size:31px;
  line-height:1.4;
  margin-bottom:17px
}

#dialog-content p {
  font-size:19px;
  line-height:1.8;
  color:var(--secondary-light)
}

.dialog-photo {
  width:100%;
  max-height:320px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:22px
}

.dialog-details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:24px 0
}

.dialog-details>div {
  background:var(--primary-soft);
  padding:12px 16px;
  border-radius:8px
}

.dialog-details dt {
  font-size:15px;
  color:var(--secondary-light)
}

.dialog-details dd {
  font-size:21px;
  margin:5px 0 0
}

.dialog-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px
}

.dialog-actions a {
  font-size:18px;
  display:inline-flex;
  gap:9px;
  align-items:center;
  padding:10px 16px;
  min-height:44px;
  border:1px solid rgb(var(--secondary-rgb) / .53);
  border-radius:8px;
  color:var(--surface)
}

.dialog-actions a:hover {
  background:var(--primary-soft)
}

.directory-links {
  display:grid;
  gap:10px
}

.directory-links a {
  display:block;
  padding:14px 18px;
  background:var(--primary-soft);
  border-radius:8px
}

.toast {
  position:fixed;
  z-index:200;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 32px);
  background:var(--surface);
  color:var(--primary);
  padding:16px 24px;
  border:1px solid var(--secondary);
  border-radius:10px;
  box-shadow:0 6px 24px rgb(var(--black-rgb) / .33);
  font-size:17px;
  line-height:1.7;
  text-align:center
}

/* Laptop and tablet */
@media(min-width:1600px) {
  .hero {
    height:875px
  }
  .hero-image {
    height:130%;
    width:100%;
    left:0;
    top:0;
    object-fit:cover;
    object-position:center 55%
  }
  .hero-content {
    margin-top:90px
  }
  .hero-projects {
    bottom:55px
  }
  .site-header {
    margin:auto
  }
  .about-grid {
    gap:90px
  }
  .project-carousel {
    max-width:1080px
  }
}

@media(max-width:1200px) {
  .site-header {
    gap:35px;
    padding-inline:26px
  }
  .primary-nav {
    gap:24px
  }
  .header-utilities {
    gap:14px;
    font-size:17px
  }
  .primary-nav a {
    font-size:18px
  }
  .container {
    width:calc(100% - 80px)
  }
  .hero-content {
    margin-top:94px
  }
  .hero-content h1 {
    font-size:64px
  }
  .hero-tagline {
    font-size:31px
  }
  .latest-projects {
    margin-top:70px
  }
  .hero-projects {
    max-width:80%;
    bottom:37px
  }
  .hero-projects button {
    font-size:23px
  }
  .hero-project-name {
    font-size:19px;
    line-height:26px;
    height:34px
  }
  .hero-projects::before {
    top:32px
  }
  .about {
    padding:118px 0 100px;
    min-height:610px
  }
  .about-grid {
    gap:45px;
    grid-template-columns:1fr 1fr
  }
  .about-copy p {
    font-size:20px;
    line-height:1.45
  }
  .statistics-oval {
    padding-inline:30px;
    height:310px
  }
  .statistics-list {
    --stat-size:32px;
    --stat-front:42px;
    --label-size:19px;
    --label-front:23px
  }
  .company-profile-row {
    padding-inline-start:0;
    margin-top:55px
  }
  .company-profile-row .button {
    font-size:19px
  }
  .advantages-grid {
    width:calc(100% - 180px);
    gap:38px
  }
  .advantage h3 {
    font-size:18px
  }
  .advantage p {
    font-size:15px;
    line-height:1.45
  }
  .project-carousel {
    width:calc(100% - 200px)
  }
  .project-track {
    gap:28px;
    min-height:483px
  }
  .project-card.is-featured .project-image-button {
    height:377px
  }
  .project-image-button {
    height:300px
  }
  .project-card-info p {
    font-size:21px
  }
  .project-card-info h3 {
    font-size:17px
  }
  .availability-badge {
    font-size:11px;
    top:16px;
    padding-inline:6px
  }
  .map-filters {
    left:19%;
    width:70%;
    gap:10px;
    grid-template-columns:1.15fr 1.1fr 1fr 77px
  }
  .map-filters select,.map-filters input {
    font-size:18px;
    padding-inline-start:11px
  }
  .listing-tabs {
    width:165px
  }
  .map-project-card {
    width:260px
  }
  .footer-brand-row {
    gap:30px;
    grid-template-columns:1fr 205px 1fr
  }
  .footer-seal {
    width:195px
  }
  .footer-slogan>p {
    font-size:43px
  }
  .footer-slogan>span {
    font-size:21px
  }
  .footer-brand-note {
    font-size:21px
  }
  .footer-main {
    gap:75px
  }
  .footer-links-grid {
    gap:35px
  }
  .newsletter-form>label {
    font-size:21px
  }
  .contact-methods {
    gap:20px
  }
  .contact-methods h3 {
    font-size:20px
  }
  .footer-social-row {
    flex-wrap:wrap;
    gap:15px
  }
  .footer-social-row>p {
    font-size:20px
  }
}

@media(max-width:960px) {
  .header-utilities .desktop-link {
    display:none
  }
  .site-header {
    gap:36px
  }
  .primary-nav {
    gap:24px
  }
  .header-utilities {
    gap:16px
  }
  .hero {
    height:770px
  }
  .hero-content {
    margin-top:82px
  }
  .about {
    padding:85px 0;
    min-height:0
  }
  .about-grid {
    gap:38px
  }
  .side-heading {
    font-size:29px
  }
  .about-copy p {
    font-size:19px;
    line-height:1.55
  }
  .statistics-oval {
    height:320px;
    padding-inline:20px
  }
  .statistics-list {
    --stat-size:30px;
    --stat-front:40px;
    --label-size:18px;
    --label-front:22px
  }
  .advantages {
    padding:80px 0
  }
  .advantages-grid {
    width:calc(100% - 100px);
    gap:30px;
    margin-top:55px;
    grid-template-columns:repeat(2,1fr)
  }
  .advantage {
    padding-inline-start:20px
  }
  .advantage h3 {
    font-size:21px
  }
  .advantage p {
    font-size:17px;
    line-height:1.6
  }
  .projects {
    padding-top:90px
  }
  .project-carousel {
    width:calc(100% - 125px)
  }
  .project-track {
    gap:18px;
    grid-template-columns:1fr 1.7fr 1fr
  }
  .project-image-button {
    height:270px
  }
  .project-card.is-featured .project-image-button {
    height:370px
  }
  .project-card-info h3 {
    font-size:15px
  }
  .project-card-info p {
    font-size:19px
  }
  .availability-badge {
    position:static;
    display:inline-block;
    font-size:12px;
    margin-bottom:6px
  }
  .project-card-info {
    min-height:116px
  }
  .project-card.is-featured .project-card-info {
    min-height:144px
  }
  .carousel-previous {
    left:-52px
  }
  .carousel-next {
    right:-52px
  }
  .map-section {
    padding-inline:20px
  }
  .map-heading {
    padding-inline:9px
  }
  .map-shell {
    min-height:0;
    border-radius:27px;
    background:var(--primary-soft);
    overflow:hidden
  }
  .map-shell::before {
    display:none
  }
  .map-topbar {
    position:relative;
    inset:auto;
    padding:12px 16px
  }
  .listing-tabs {
    height:51px;
    width:166px;
    border-radius:17px
  }
  .map-reset {
    width:51px;
    height:51px
  }
  .map-reset .icon {
    width:24px;
    height:24px
  }
  .map-filters {
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    padding:0 16px 18px;
    grid-template-columns:1fr 1fr 1fr 90px;
    gap:12px
  }
  .map-viewport {
    border-radius:0;
    min-height:480px;
    max-height:480px
  }
  .map-canvas {
    height:480px
  }
  .map-project-card {
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    min-height:175px;
    border-radius:0;
    display:grid;
    grid-template-columns:200px 1fr;
    gap:22px;
    padding:16px;
    color:var(--secondary-light)
  }
  .map-project-card>img {
    position:static;
    z-index:auto;
    grid-column:1;
    width:200px;
    height:175px;
    object-fit:cover;
    border-radius:12px
  }
  .map-project-card::after {
    display:none
  }
  .map-card-controls {
    position:absolute;
    left:20px;
    top:13px;
    padding:0
  }
  .map-card-controls>img {
    display:none
  }
  .map-project-copy {
    position:static;
    align-self:center;
    padding:28px 0 7px
  }
  .map-project-copy h3 {
    font-size:24px
  }
  .map-availability {
    font-size:22px
  }
  .map-empty {
    top:50%;
    transform:translate(-50%,-25%)
  }
  .footer-brand-row {
    grid-template-columns:1fr 160px 1fr;
    gap:20px
  }
  .footer-seal {
    width:160px
  }
  .footer-slogan>p {
    font-size:35px
  }
  .footer-slogan>span {
    font-size:17px
  }
  .footer-brand-note {
    font-size:19px
  }
  .footer-main {
    grid-template-columns:1.1fr 1fr;
    gap:40px;
    margin-top:65px
  }
  .footer-links-grid {
    gap:25px
  }
  .footer-links-grid a,.footer-links-grid button {
    font-size:17px
  }
  .newsletter-field>input {
    font-size:16px;
    padding-inline:14px
  }
  .newsletter-field>button {
    min-width:80px;
    font-size:18px;
    padding-inline:15px
  }
  .contact-methods {
    grid-template-columns:1fr;
    gap:24px;
    text-align:start;
    margin-top:30px
  }
  .contact-methods h3 {
    margin-bottom:6px
  }
  .footer-bottom {
    font-size:16px;
    align-items:start;
    gap:25px
  }
  .footer-bottom button {
    font-size:16px
  }
}

/* Mobile: content reflows at its natural size; the page is never scaled down. */
@media(max-width:700px) {
  body {
    font-size:18px
  }
  .container {
    width:calc(100% - 40px)
  }
  html {
    scroll-padding-top:15px
  }
  .site-header {
    height:87px;
    padding:14px 22px;
    gap:14px
  }
  .brand img {
    width:86px;
    height:55px
  }
  .header-utilities {
    gap:19px
  }
  .header-utilities .desktop-tool {
    display:none
  }
  .language-switch {
    font-size:17px;
    padding:13px 7px
  }
  .header-utilities .menu-toggle {
    display:inline-flex;
    width:40px;
    height:42px;
    padding:6px
  }
  .header-utilities .menu-toggle .icon {
    width:25px;
    height:25px
  }
  .primary-nav {
    display:none;
    position:absolute;
    top:84px;
    left:16px;
    right:16px;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    white-space:normal;
    padding:18px;
    background:rgb(var(--primary-rgb) / .96);
    border:1px solid rgb(var(--secondary-light-rgb) / .31);
    border-radius:14px;
    box-shadow:0 16px 28px rgb(var(--black-rgb) / .27);
    backdrop-filter:blur(10px)
  }
  .primary-nav.is-open {
    display:flex
  }
  .primary-nav a,.primary-nav .mobile-link {
    display:flex;
    justify-content:space-between;
    padding:12px 8px;
    min-height:47px;
    font-size:20px;
    text-align:start;
    border-bottom:1px solid rgb(var(--secondary-light-rgb) / .1)
  }
  .primary-nav>*:last-child {
    border-bottom:0
  }
  .hero {
    height:780px;
    min-height:760px;
    max-height:none
  }
  .hero-image {
    left:0;
    top:0;
    max-width:none;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:52% center
  }
  .hero-shade {
    background:linear-gradient(180deg,var(--primary) 0%,rgb(var(--primary-rgb) / .55) 30%,rgb(var(--primary-rgb) / .21) 50%,rgb(var(--secondary-light-rgb) / .61) 69%,rgb(var(--secondary-rgb) / .96) 100%)
  }
  .hero-content {
    margin-top:60px;
    padding:0 18px
  }
  .hero-content h1 {
    font-size:clamp(43px,8.4vw,59px);
    line-height:1.28
  }
  .hero-tagline {
    font-size:clamp(21px,4.25vw,29px);
    line-height:1.5;
    margin-top:2px
  }
  .latest-projects {
    margin-top:64px;
    font-size:21px;
    padding:4px 17px
  }
  .hero-dots {
    margin-top:17px
  }
  .hero-projects {
    width:calc(100% - 56px);
    max-width:none;
    bottom:31px;
    grid-template-columns:repeat(2,1fr);
    column-gap:24px;
    row-gap:24px
  }
  .hero-projects button {
    font-size:20px;
    min-height:99px;
    padding:0;
    line-height:1.26;
    align-items:flex-start
  }
  .hero-projects::before {
    display:none
  }
  .hero-project-name {
    font-size:18px;
    height:33px;
    line-height:26px;
    padding-bottom:7px;
    margin-bottom:8px;
    border-bottom:1px solid var(--surface)
  }
  .hero-project-name::after {
    width:44px;
    height:3px
  }
  .floating-contact {
    top:auto;
    bottom:24px;
    gap:10px
  }
  .floating-contact-button {
    width:56px;
    height:46px;
    border-start-end-radius:11px;
    border-end-end-radius:20px
  }
  .floating-contact-phone {
    width:24px;
    height:22px
  }
  .floating-contact-whatsapp {
    width:29px;
    height:28px
  }
  .hero::after {
    height:330px;
    bottom:-65px;
    opacity:.13;
    mask-size:830px 580px
  }
  .about {
    padding:68px 0
  }
  .about-grid {
    grid-template-columns:1fr;
    gap:43px
  }
  .about-copy p {
    font-size:20px;
    line-height:1.65;
    text-align:start
  }
  .side-heading {
    font-size:31px;
    margin-bottom:20px
  }
  .company-profile-row {
    margin-top:29px;
    padding:0;
    justify-content:flex-start;
    gap:11px
  }
  .company-profile-row>.button {
    font-size:20px;
    min-height:46px;
    padding-inline:19px
  }
  .about-statistics {
    padding-top:0
  }
  .statistics-oval {
    height:auto;
    padding:29px 22px;
    border-radius:48px
  }
  /* Phones: the three figures sit side by side, all the same size, no sliding. */
  .statistics-list {
    --stat-size:30px;
    --stat-front:30px;
    --label-size:16px;
    --label-front:16px;
    max-height:none;
    overflow:visible;
    mask-image:none;
    cursor:auto;
    touch-action:auto;
    user-select:auto
  }
  .statistics-track {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    padding-bottom:0;
    transform:none!important
  }
  .statistics-track>div[aria-hidden] {
    display:none
  }
  .statistics-track>div {
    justify-content:flex-end;
    gap:9px;
    opacity:1
  }
  .statistics-list dd {
    flex-wrap:wrap;
    gap:3px;
    align-items:baseline;
    min-height:54px
  }
  .statistics-list dt {
    line-height:1.5
  }
  .about-statistics>.button {
    margin-top:24px;
    min-height:45px
  }
  .advantages {
    padding:68px 0;
    min-height:0
  }
  .section-heading {
    font-size:30px
  }
  .ornament-heading {
    gap:5px;
    padding-inline:18px
  }
  .ornament-heading>span {
    gap:14px
  }
  .ornament-heading::before,.ornament-heading::after {
    width:20px
  }
  .advantages-grid {
    width:calc(100% - 48px);
    margin-top:42px;
    gap:36px 24px
  }
  .advantage {
    padding-inline-start:15px
  }
  .feature-icon {
    width:34px;
    height:34px;
    margin-bottom:10px
  }
  .advantage h3 {
    font-size:20px;
    white-space:normal;
    margin-bottom:12px
  }
  .advantage p {
    font-size:16px;
    line-height:1.7;
    text-align:start
  }
  .projects {
    padding:69px 0 28px
  }
  .projects-heading {
    padding-inline:25px
  }
  .projects-heading p {
    font-size:20px;
    line-height:1.65;
    margin-top:17px
  }
  .projects-heading p br {
    display:none
  }
  .project-carousel {
    width:calc(100% - 44px);
    max-width:470px;
    margin-top:35px;
    padding-bottom:61px
  }
  .project-track {
    display:block;
    min-height:0
  }
  .project-card {
    display:none
  }
  .project-card.is-featured {
    display:block;
    overflow:hidden;
    border-radius:2px
  }
  .project-card.is-featured .project-image-button {
    height:clamp(320px,78vw,420px)
  }
  .project-card.is-featured .project-card-info {
    min-height:119px;
    padding:14px 17px 18px
  }
  .project-card-info h3 {
    font-size:21px;
    margin-bottom:7px
  }
  .project-card-info p {
    font-size:23px;
    line-height:1.25
  }
  .availability-badge {
    position:absolute;
    top:18px;
    left:17px;
    font-size:13px;
    padding:1px 8px
  }
  .carousel-arrow {
    top:auto;
    bottom:0;
    width:46px;
    height:45px;
    border:1px solid rgb(var(--secondary-light-rgb) / .25)
  }
  .carousel-previous {
    left:calc(50% - 60px)
  }
  .carousel-next {
    right:calc(50% - 60px)
  }
  .explore-button {
    margin-top:7px;
    min-height:42px;
    font-size:19px
  }
  .carousel-pagination {
    margin-top:20px;
    gap:12px
  }
  .carousel-pagination button {
    width:8px;
    height:8px
  }
  .partners {
    padding:39px 22px 53px
  }
  .pill-heading {
    font-size:25px;
    min-width:210px;
    margin-bottom:20px
  }
  .partner-logos {
    padding:20px 17px;
    gap:18px 26px;
    grid-template-columns:repeat(2,1fr);
    max-width:470px
  }
  .partner-logos img {
    height:112px
  }
  .partner-logos img:nth-child(3) {
    height:133px
  }
  .map-section {
    padding:0 16px 30px
  }
  .map-heading {
    padding:0 3px;
    gap:13px;
    margin-bottom:19px
  }
  .map-heading h2 {
    font-size:25px
  }
  .map-heading>a {
    font-size:18px
  }
  .map-shell {
    border-radius:24px
  }
  .map-topbar {
    padding:13px 13px 9px
  }
  .listing-tabs {
    width:145px;
    height:49px;
    font-size:18px
  }
  .map-reset {
    width:48px;
    height:48px
  }
  .map-filters {
    grid-template-columns:1fr 1fr;
    padding:5px 13px 17px;
    gap:10px
  }
  .filter-select select,.filter-query input {
    height:47px;
    font-size:18px;
    padding:8px 10px 8px 32px
  }
  .filter-select>.icon,.filter-query>.icon {
    width:16px;
    height:16px;
    left:9px;
    top:16px
  }
  .filter-submit {
    height:47px;
    min-height:47px;
    font-size:20px
  }
  .map-viewport {
    min-height:380px;
    max-height:380px
  }
  .map-canvas {
    height:380px
  }
  .map-marker {
    font-size:16px
  }
  .leaflet-map .leaflet-control-zoom {
    margin:0 10px 12px 0
  }
  .map-project-card {
    padding:14px;
    grid-template-columns:minmax(105px,35%) 1fr;
    gap:17px;
    min-height:185px
  }
  .map-project-card>img {
    height:160px;
    width:100%;
    align-self:center
  }
  .map-project-copy {
    padding-top:22px;
    font-size:19px;
    line-height:1.5
  }
  .map-project-copy h3 {
    font-size:23px
  }
  .map-availability {
    font-size:19px;
    line-height:1.35;
    gap:6px
  }
  .map-project-copy .map-project-latin {
    font-size:13px;
    line-height:1.5
  }
  .map-card-controls {
    top:8px;
    left:12px
  }
  .map-card-controls .icon-button {
    height:34px;
    min-height:34px
  }
  .map-empty {
    top:52%;
    padding:22px 17px;
    font-size:18px
  }
  .site-footer {
    padding:29px 0 42px
  }
  .footer-brand-row {
    display:flex;
    flex-direction:column;
    gap:27px;
    min-height:0
  }
  .footer-seal {
    order:0;
    width:157px
  }
  .footer-slogan {
    order:1
  }
  .footer-slogan>p {
    font-size:43px
  }
  .footer-slogan>span {
    font-size:21px
  }
  .footer-brand-note {
    order:2;
    font-size:20px;
    max-width:290px
  }
  .footer-main {
    grid-template-columns:1fr;
    gap:53px;
    margin-top:53px
  }
  .newsletter-form>label {
    font-size:22px;
    line-height:1.45;
    margin-bottom:14px
  }
  .newsletter-field {
    min-height:54px
  }
  .newsletter-field>input {
    font-size:17px;
    padding-inline:13px
  }
  .newsletter-field>button {
    font-size:19px;
    min-width:81px;
    padding-inline:15px
  }
  .contact-methods {
    grid-template-columns:1fr 1fr;
    gap:17px;
    margin-top:31px;
    text-align:start
  }
  .contact-methods h3 {
    font-size:18px;
    line-height:1.6;
    margin-bottom:8px
  }
  .contact-methods a {
    font-size:15px;
    gap:9px;
    letter-spacing:0
  }
  .contact-methods .phone-number {
    font-size:17px;
    letter-spacing:1px
  }
  .contact-methods .icon {
    width:22px;
    height:22px
  }
  .footer-social-row {
    margin-top:32px;
    gap:17px;
    display:flex;
    flex-direction:column;
    align-items:flex-start
  }
  .footer-social-row>p {
    font-size:21px
  }
  .social-icons {
    gap:19px
  }
  .social-icons>button {
    width:31px;
    height:31px;
    font-size:19px
  }
  .footer-links-grid {
    max-width:none;
    justify-self:stretch;
    gap:45px;
    padding-top:0
  }
  .footer-links-grid h3 {
    font-size:21px;
    margin-bottom:18px
  }
  .footer-links-grid a,.footer-links-grid button {
    font-size:19px;
    min-height:40px;
    padding:7px 0
  }
  .footer-bottom {
    margin-top:45px;
    flex-direction:column;
    gap:19px;
    font-size:16px;
    text-align:center;
    align-items:center
  }
  .footer-bottom>p {
    max-width:100%;
    line-height:1.8
  }
  .footer-bottom button {
    font-size:16px;
    min-height:40px
  }
  .site-dialog {
    padding:20px 22px 27px;
    max-height:90svh;
    border-radius:18px
  }
  #dialog-content h2 {
    font-size:27px
  }
  #dialog-content p {
    font-size:18px;
    line-height:1.85
  }
  .dialog-details {
    gap:10px
  }
  .dialog-details>div {
    padding:11px
  }
  .dialog-details dd {
    font-size:19px
  }
  .dialog-actions {
    flex-direction:column
  }
  .dialog-actions a {
    justify-content:center
  }
  .dialog-photo {
    max-height:250px
  }
  .toast {
    bottom:16px;
    font-size:16px;
    padding:14px 17px
  }
}

@media(max-width:390px) {
  .container {
    width:calc(100% - 36px)
  }
  .site-header {
    padding-inline:18px
  }
  .hero-content {
    margin-top:62px
  }
  .hero-content h1 {
    font-size:43px
  }
  .hero-tagline {
    font-size:21px
  }
  .hero-projects {
    width:calc(100% - 50px);
    gap:22px 20px
  }
  .hero-project-name {
    font-size:17px
  }
  .hero-projects button {
    font-size:19px
  }
  .about-copy p {
    font-size:19px
  }
  .statistics-track {
    grid-template-columns:1fr;
    gap:24px
  }
  .statistics-list {
    --stat-size:38px;
    --stat-front:38px;
    --label-size:19px;
    --label-front:19px
  }
  .statistics-oval {
    border-radius:45px;
    padding:31px 25px
  }
  .statistics-track>div {
    gap:8px;
    min-height:90px
  }
  .statistics-list dd {
    min-height:0
  }
  .advantages-grid {
    width:calc(100% - 42px);
    gap:33px 19px
  }
  .advantage h3 {
    font-size:18px
  }
  .advantage p {
    font-size:16px;
    line-height:1.65
  }
  .map-heading h2 {
    font-size:22px
  }
  .map-heading>a {
    font-size:16px
  }
  .map-filters {
    gap:8px
  }
  .map-project-card {
    gap:12px;
    padding:12px
  }
  .map-project-copy {
    font-size:18px
  }
  .map-project-copy h3 {
    font-size:22px
  }
  .map-availability {
    font-size:18px
  }
  .map-project-copy .map-project-latin {
    font-size:12px
  }
  .footer-slogan>p {
    font-size:41px
  }
  .contact-methods {
    grid-template-columns:1fr;
    gap:24px
  }
  .contact-methods h3 {
    font-size:20px
  }
  .contact-methods a {
    font-size:18px
  }
  .contact-methods .phone-number {
    font-size:19px
  }
  .footer-links-grid {
    gap:32px
  }
  .newsletter-form>label {
    font-size:21px
  }
  .newsletter-field>input {
    font-size:16px
  }
  .newsletter-field>button {
    font-size:18px;
    min-width:73px;
    padding-inline:12px
  }
}

@media(max-width:340px) {
  .hero-content h1 {
    font-size:39px
  }
  .hero-tagline {
    font-size:19px
  }
  .hero-project-name {
    font-size:16px
  }
  .hero-projects button {
    font-size:18px
  }
  .hero-projects {
    width:calc(100% - 40px);
    column-gap:17px
  }
  .advantages-grid {
    grid-template-columns:1fr;
    gap:31px
  }
  .advantage h3 {
    font-size:22px
  }
  .advantage p {
    font-size:18px
  }
  .advantage {
    padding-inline-start:20px
  }
  .partner-logos {
    gap:14px 18px;
    padding-inline:13px
  }
  .partner-logos img {
    height:97px
  }
  .partner-logos img:nth-child(3) {
    height:120px
  }
  .map-heading {
    gap:5px
  }
  .map-heading h2 {
    font-size:21px
  }
  .map-heading>a {
    font-size:15px
  }
  .footer-slogan>p {
    font-size:38px
  }
  .footer-slogan>span {
    font-size:19px
  }
  .map-project-copy .map-project-latin {
    font-size:11px
  }
  .newsletter-form>label {
    font-size:20px
  }
}

/* English is a real content/language switch, not a visual mirror of Arabic glyphs. */
html[dir=ltr] .hero-content h1 {
  font-family:var(--font-latin);
  font-size:56px;
  line-height:1.2;
  max-width:850px;
  margin:auto;
  font-weight:400
}

html[dir=ltr] .hero-tagline {
  display:none
}

html[dir=ltr] .hero-content .latest-projects {
  margin-top:112px
}

html[dir=ltr] .hero-projects button {
  direction:ltr;
  align-items:flex-start;
  text-align:left
}

html[dir=ltr] .hero-project-name {
  text-align:left
}

html[dir=ltr] .about-copy p {
  text-align:start
}

html[dir=ltr] .about-copy {
  font-family:var(--font-latin)
}

html[dir=ltr] .about-copy p {
  font-size:19px;
  line-height:1.65
}

html[dir=ltr] .company-profile-row {
  padding:0
}

html[dir=ltr] .advantage {
  text-align:start
}

html[dir=ltr] .advantage h3 {
  font-family:var(--font-latin);
  font-size:17px;
  white-space:normal
}

html[dir=ltr] .advantage p {
  font-family:var(--font-latin);
  font-size:14px;
  line-height:1.6
}

html[dir=ltr] .map-filters {
  direction:ltr
}

html[dir=ltr] .map-filters select,html[dir=ltr] .map-filters input {
  font-family:var(--font-latin);
  font-size:15px;
  padding:9px 32px 9px 12px
}

html[dir=ltr] .filter-select>.icon,html[dir=ltr] .filter-query>.icon {
  left:auto;
  right:10px
}

html[dir=ltr] .map-project-copy,html[dir=ltr] .project-card-info {
  text-align:left;
  direction:ltr
}

html[dir=ltr] .map-project-copy {
  font-size:19px
}

html[dir=ltr] .map-project-copy h3 {
  font-family:var(--font-latin);
  font-size:23px
}

html[dir=ltr] .map-project-latin {
  text-align:left
}

html[dir=ltr] .map-availability {
  font-size:19px
}

html[dir=ltr] .footer-slogan>p {
  font-family:var(--font-latin);
  white-space:normal;
  font-size:33px;
  line-height:1.2
}

html[dir=ltr] .footer-slogan>span {
  display:none
}

html[dir=ltr] .newsletter-field>input {
  direction:ltr
}

html[dir=ltr] .footer-brand-note {
  font-family:var(--font-latin);
  font-size:19px
}

html[dir=ltr] .footer-bottom>div {
  white-space:normal
}

@media(max-width:700px) {
  html[dir=ltr] .hero-content h1 {
    font-size:40px;
    max-width:370px
  }
  html[dir=ltr] .hero-content .latest-projects {
    margin-top:72px
  }
  html[dir=ltr] .advantage p {
    font-size:16px
  }
  html[dir=ltr] .footer-slogan>p {
    font-size:35px;
    max-width:320px
  }
  html[dir=ltr] .map-project-copy {
    font-size:16px
  }
  html[dir=ltr] .map-availability {
    font-size:16px
  }
  html[dir=ltr] .map-project-copy h3 {
    font-size:20px
  }
  html[dir=ltr] .availability-badge {
    left:auto;
    right:16px
  }
  html[dir=ltr] .map-project-latin {
    font-size:12px
  }
}

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

/* Original partner/social brand artwork; native buttons retain accessible labels. */
.social-icons>button {
  background:transparent;
  padding:0
}

.social-icons>button>img {
  width:100%;
  height:100%;
  object-fit:contain
}

/* =====================================================================
   Blogs page (blogs.html)
   Every rule is scoped under body.blog-page so the home page is untouched.
   The page uses the light ivory surface and copper text of the blog design;
   the shared header and footer partials are re-coloured for that surface.
   ===================================================================== */
html:has(> body.blog-page) {
  background:var(--blog-surface);
  scroll-padding-top:100px
}

.blog-page {
  background:var(--blog-surface);
  color:var(--secondary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

.blog-page ::selection {
  background:var(--secondary);
  color:var(--white)
}

.blog-page :focus-visible {
  outline:2px solid var(--blog-copper);
  outline-offset:5px
}

.blog-page .site-footer :focus-visible,.blog-page .site-dialog :focus-visible {
  outline-color:var(--surface)
}

.blog-page [hidden] {
  display:none!important
}

/* Shared header on the light surface */
.blog-page .site-header {
  color:var(--secondary-light)
}

.blog-page .header-utilities .icon-button {
  color:var(--secondary-light)
}

.blog-page .primary-nav .active,.blog-page .header-utilities .active {
  color:var(--secondary)
}

.blog-page .primary-nav a:hover,.blog-page .header-utilities a:hover,.blog-page .header-utilities button:hover {
  color:var(--blog-copper)
}

/* Intro: title, breadcrumb, category filters and the search box */
.blog-page .page-intro {
  max-width:1220px;
  margin-inline:auto;
  padding-top:145px
}

.blog-page .page-title {
  margin:0;
  font-size:45px;
  line-height:1.25;
  font-weight:400;
  color:var(--secondary-light)
}

.blog-page .breadcrumb {
  margin-top:0;
  font-size:23px
}

.blog-page .breadcrumb a:hover {
  color:var(--blog-copper)
}

.blog-page .filters {
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

.blog-page .filter {
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border:1px solid rgb(var(--secondary-rgb) / .7);
  border-radius:12px;
  background:transparent;
  font-size:22px;
  line-height:1.25;
  transition:color .15s,background-color .15s,border-color .15s
}

.blog-page .filter:hover {
  background:rgb(var(--secondary-rgb) / .1)
}

.blog-page .filter[aria-pressed=true] {
  border-color:var(--secondary);
  background:var(--secondary);
  color:var(--white)
}

.blog-page .search-box {
  margin-top:28px;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:580px;
  padding:8px 16px;
  border:1px solid var(--secondary-light);
  border-radius:12px;
  background:rgb(255 255 255 / .4)
}

.blog-page .search-box .icon {
  width:22px;
  height:22px
}

.blog-page .search-box input {
  min-width:0;
  flex:1 1 0%;
  padding:8px;
  border:0;
  background:transparent;
  font-size:20px;
  line-height:1.4;
  color:var(--primary)
}

.blog-page .search-box input::placeholder {
  color:var(--neutral)
}

.blog-page .search-box input:focus-visible {
  outline:2px solid var(--secondary);
  outline-offset:-4px
}

.blog-page .search-box .icon-button {
  border-radius:50%;
  transition:background-color .15s
}

.blog-page .search-box .icon-button:hover {
  background:rgb(var(--secondary-rgb) / .1)
}

/* Post cards */
.blog-page .posts-section {
  max-width:1020px;
  margin:125px auto 0
}

.blog-page .posts-grid {
  display:grid;
  grid-template-columns:1fr;
  column-gap:32px;
  row-gap:48px
}

.blog-page .post-card {
  display:flex;
  min-width:0;
  flex-direction:column
}

.blog-page .post-media {
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  aspect-ratio:300/402;
  background:var(--secondary-light)
}

.blog-page .post-cover {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease
}

.blog-page .post-media:hover .post-cover {
  transform:scale(1.025)
}

.blog-page .post-media::after {
  content:"";
  position:absolute;
  inset:30% 0 0;
  background:linear-gradient(transparent,rgb(var(--blog-shade-rgb) / .1) 30%,rgb(var(--blog-shade-rgb) / .87))
}

.blog-page .post-mark {
  position:absolute;
  z-index:1;
  top:14px;
  inset-inline-start:15px;
  width:44px
}

.blog-page .post-overlay {
  position:absolute;
  z-index:1;
  inset-inline:14px;
  bottom:17px;
  color:var(--surface-tint);
  text-align:start
}

.blog-page .post-date {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  margin:0;
  font-size:21px
}

.blog-page .post-date time {
  font-family:var(--font-latin);
  font-size:22px;
  font-weight:400
}

.blog-page .post-date::before {
  content:"";
  flex-shrink:0;
  width:6px;
  height:6px;
  margin-inline-end:3px;
  transform:rotate(45deg);
  background:currentColor
}

.blog-page .post-overlay h2 {
  margin:12px 0 0;
  font-size:22px;
  line-height:1.2;
  font-weight:300
}

.blog-page .post-excerpt {
  margin:0;
  min-height:85px;
  padding-top:8px;
  font-size:22px;
  line-height:1.2;
  color:var(--secondary)
}

.blog-page #guarantees .post-overlay h2 {
  font-size:18px
}

.blog-page #guarantees .post-excerpt {
  font-size:21px
}

.blog-page .post-more {
  margin-top:auto;
  display:flex;
  min-height:44px;
  align-items:center;
  gap:8px;
  border-bottom:1px solid rgb(var(--secondary-light-rgb) / .4);
  font-size:19px;
  color:var(--blog-grey);
  transition:color .15s
}

.blog-page .post-more:hover {
  color:var(--blog-copper)
}

.blog-page .post-more .icon {
  width:18px;
  height:18px;
  color:currentColor;
  transition:transform .2s
}

.blog-page .post-more:hover .icon {
  transform:translateX(-4px)
}

html[dir=ltr] .blog-page .post-more .icon {
  transform:scaleX(-1)
}

html[dir=ltr] .blog-page .post-more:hover .icon {
  transform:scaleX(-1) translateX(-4px)
}

/* Empty state and "explore more" */
.blog-page .empty-state {
  padding:80px 0;
  text-align:center;
  font-size:20px;
  line-height:1.4;
  color:var(--blog-stone)
}

.blog-page .empty-state p {
  margin:0 0 20px
}

.blog-page .explore {
  margin-top:115px;
  padding-bottom:228px;
  text-align:center
}

.blog-page .explore-dots {
  margin-top:20px;
  display:flex;
  justify-content:center;
  gap:8px
}

.blog-page .explore-dots span {
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgb(var(--secondary-light-rgb) / .6)
}

.blog-page .explore-dots .active {
  background:var(--secondary)
}

.blog-page .outline-button {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border:1px solid rgb(var(--secondary-rgb) / .6);
  border-radius:8px;
  background:transparent;
  font-size:17px;
  font-weight:500;
  color:var(--secondary);
  transition:color .15s,background-color .15s
}

.blog-page .outline-button:hover {
  background:var(--secondary);
  color:var(--white)
}

/* Shared footer: the blog design has no brand row (seal and slogan) above the newsletter. */
.blog-page .footer-brand-row {
  display:none
}

.blog-page .site-footer {
  padding-top:63px;
  padding-bottom:94px
}

/* Article preview inside the shared site dialog */
.blog-page .dialog-kicker {
  margin:0 0 12px;
  font-size:17px!important;
  color:var(--secondary-light)
}

.blog-page .dialog-excerpt {
  font-size:22px!important;
  line-height:1.65!important;
  color:var(--surface)!important
}

@media(min-width:640px) {
  .blog-page .posts-grid {
    grid-template-columns:repeat(2,1fr)
  }
}

@media(min-width:1024px) {
  .blog-page .posts-grid {
    grid-template-columns:repeat(3,1fr);
    column-gap:60px;
    row-gap:64px
  }
}

@media(max-width:1279px) {
  .blog-page .page-intro {
    margin-inline:6%
  }
  .blog-page .posts-section {
    margin-inline:9%
  }
}

@media(max-width:1023px) {
  .blog-page .page-intro {
    padding-top:54px
  }
  .blog-page .posts-section {
    margin-top:70px
  }
  .blog-page .explore {
    margin-top:75px;
    padding-bottom:110px
  }
}

@media(max-width:700px) {
  /* The mobile navigation drops down on a navy panel; keep its links ivory. */
  .blog-page .primary-nav {
    color:var(--surface)
  }
}

@media(max-width:639px) {
  .blog-page .page-intro {
    padding-top:45px;
    margin-inline:6%
  }
  .blog-page .page-title {
    font-size:42px
  }
  .blog-page .filters {
    gap:8px
  }
  .blog-page .filter {
    min-height:44px;
    padding-inline:12px;
    border-radius:9px;
    font-size:18px
  }
  .blog-page .posts-section {
    margin:48px 6% 0
  }
  .blog-page .post-media {
    aspect-ratio:300/370
  }
  .blog-page .post-overlay {
    inset-inline:18px;
    bottom:20px
  }
  .blog-page .post-overlay h2 {
    font-size:25px
  }
  .blog-page .post-date {
    font-size:22px
  }
  .blog-page .post-excerpt {
    min-height:auto;
    padding:12px 0 8px;
    font-size:23px
  }
  .blog-page .post-more {
    margin-top:8px
  }
  .blog-page .explore {
    margin-top:60px;
    padding-bottom:80px
  }
}

@media(prefers-reduced-motion:reduce) {
  .blog-page .post-cover,.blog-page .post-more .icon {
    transition:none
  }
}

/* =====================================================================
   Blog details page (blog-details.html)
   Every rule is scoped under body.blog-details-page and every class carries
   the blog-details- prefix, so nothing here can collide with the home page
   or the blogs listing. The shared header sits over the cover photo, as on
   the home page; the footer partial is re-coloured for the ivory surface.
   ===================================================================== */
html:has(> body.blog-details-page) {
  background:var(--blog-surface);
  scroll-padding-top:24px
}

.blog-details-page {
  background:var(--blog-surface);
  color:var(--secondary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

.blog-details-page ::selection {
  background:var(--secondary);
  color:var(--surface)
}

.blog-details-page :focus-visible {
  outline:2px solid var(--blog-copper);
  outline-offset:2px
}

.blog-details-page .site-footer :focus-visible,.blog-details-page .site-dialog :focus-visible,.blog-details-page .blog-details-hero :focus-visible {
  outline-color:var(--surface)
}

.blog-details-page .site-header {
  position:relative;
  z-index:10
}

.blog-details-page .site-footer {
  padding-top:63px;
  padding-bottom:94px
}

/* Shared footer: the blog design has no brand row (seal and slogan) above the newsletter. */
.blog-details-page .footer-brand-row {
  display:none
}

/* Hero: cover photo, tinted bands, header and title */
.blog-details-hero {
  position:relative;
  isolation:isolate;
  height:818px;
  overflow:hidden;
  background:var(--primary);
  color:var(--surface)
}

.blog-details-hero-image {
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.blog-details-hero-shade {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  /* Navy band solid at the top and gone by ~73%; a dark band under the title; a short fade into the ivory page. */
  background:
    linear-gradient(to bottom,rgb(var(--primary-rgb)) 0%,rgb(var(--primary-rgb) / .92) 15%,rgb(var(--primary-rgb) / .83) 24%,rgb(var(--primary-rgb) / .65) 37%,rgb(var(--primary-rgb) / .42) 49%,rgb(var(--primary-rgb) / .15) 61%,rgb(var(--primary-rgb) / 0) 73%),
    linear-gradient(to top,rgb(var(--blog-shade-rgb) / .92) 3%,rgb(var(--blog-shade-rgb) / .65) 15%,rgb(var(--blog-shade-rgb) / 0) 30%)
}

.blog-details-hero-shade::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:20px;
  background:linear-gradient(to bottom,transparent,var(--blog-surface))
}

.blog-details-hero-content {
  position:absolute;
  inset:auto 0 0;
  z-index:2;
  padding:0 67px 96px
}

.blog-details-hero-date {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  font-size:33px;
  line-height:1
}

.blog-details-hero-date::before {
  content:"";
  flex-shrink:0;
  width:9px;
  height:9px;
  transform:rotate(45deg);
  background:currentColor
}

.blog-details-hero-date span {
  font-weight:500
}

.blog-details-hero-date time {
  font-family:var(--font-latin);
  font-size:35px;
  letter-spacing:.025em
}

.blog-details-title {
  margin:20px 0 0;
  font-size:35px;
  font-weight:400;
  line-height:1;
  color:var(--surface)
}

/* Author line and share bar */
.blog-details-meta {
  max-width:1220px;
  margin:16px auto 0;
  padding:0 40px
}

/* Author + share icons on one row; a gold hairline under them spans the container */
.blog-details-meta-row {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding-bottom:6px;
  border-bottom:1px solid var(--secondary-pale);
}

.blog-details-meta-date {
  padding-top:4px
}

.blog-details-byline {
  font-size:19px;
  line-height:1.9;
  color:var(--blog-grey)
}

.blog-details-byline p {
  margin:0
}

.blog-details-byline time {
  font-family:var(--font-latin)
}

.blog-details-share {
  display:flex;
  align-items:center;
  gap:16px
}

.blog-details-share-button {
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:var(--secondary-mid);
  transition:transform .2s var(--ease),background-color .2s,color .2s
}

.blog-details-share-button:hover {
  transform:translateY(-2px)
}

.blog-details-share-button.is-filled {
  background:var(--secondary-mid);
  color:var(--surface)
}

.blog-details-share-button.is-filled:hover {
  background:var(--secondary)
}

.blog-details-share-button.is-outline {
  border:1.5px solid var(--secondary-mid)
}

.blog-details-share-button.is-outline:hover,.blog-details-share-button.is-copied {
  background:var(--secondary-mid);
  color:var(--surface)
}

.blog-details-share-button .icon {
  width:18px;
  height:18px;
  stroke-width:1.8
}

.blog-details-share-glyph {
  width:18px;
  height:18px;
  fill:currentColor
}

/* Body: two columns on desktop, reading order right to left */
.blog-details-columns {
  max-width:1440px;
  margin:100px auto 0;
  padding:0 85px;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:40px
}

.blog-details-body {
  font-size:22px;
  line-height:1.32;
  color:var(--secondary);
  text-align:justify;
  text-align-last:start
}

.blog-details-body.is-offset {
  margin-top:160px
}

.blog-details-body p,.blog-details-body ul {
  margin:0
}

.blog-details-body p+p,.blog-details-body ul+p,.blog-details-body p+ul {
  margin-top:24px
}

.blog-details-body h2 {
  margin:48px 0 12px;
  font-size:24px;
  font-weight:500;
  line-height:1.3;
  color:var(--tertiary-mid);
  text-align:start
}

.blog-details-body h2:first-child {
  margin-top:0
}

.blog-details-body strong,.blog-details-body b {
  font-weight:400;
  color:var(--tertiary-mid)
}

.blog-details-body ul {
  list-style:none;
  padding:0
}

.blog-details-body li+li {
  margin-top:8px
}

.blog-details-body sup {
  font-size:.7em;
  line-height:0
}

/* Closing call to action */
.blog-details-cta {
  max-width:1440px;
  margin:78px auto 0;
  padding:0 85px;
  font-size:24px;
  line-height:1.25
}

.blog-details-cta h2 {
  max-width:790px;
  margin:0;
  font-size:inherit;
  font-weight:400;
  color:var(--primary)
}

.blog-details-cta p {
  max-width:790px;
  margin:4px 0 0;
  color:var(--secondary)
}

.blog-details-cta a {
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:4px;
  transition:color .2s,text-decoration-color .2s
}

.blog-details-cta a:hover {
  color:var(--secondary-mid);
  text-decoration-color:rgb(var(--secondary-rgb) / .6)
}

/* Related posts */
.blog-details-related {
  max-width:1440px;
  margin:135px auto 0;
  padding:0 85px 56px
}

.blog-details-related-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.blog-details-related-head h2 {
  margin:0;
  font-size:45px;
  font-weight:400;
  line-height:1;
  color:var(--secondary)
}

.blog-details-button {
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  height:45px;
  padding:0 20px;
  border-radius:8px;
  background:var(--secondary-mid);
  color:var(--surface);
  font-size:21px;
  line-height:1;
  transition:background-color .2s
}

.blog-details-button:hover {
  background:var(--secondary)
}

.blog-details-related-grid {
  max-width:1030px;
  margin:130px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:64px;
  row-gap:56px
}

.blog-details-card {
  display:flex;
  min-width:0;
  flex-direction:column
}

.blog-details-card-media {
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  aspect-ratio:22/30;
  background:var(--secondary-pale)
}

.blog-details-card-cover {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease)
}

.blog-details-card:hover .blog-details-card-cover {
  transform:scale(1.04)
}

.blog-details-card-media::after {
  content:"";
  position:absolute;
  inset:40% 0 0;
  pointer-events:none;
  background:linear-gradient(to top,rgb(var(--blog-shade-rgb) / .78) 0%,rgb(var(--blog-shade-rgb) / .35) 55%,rgb(var(--blog-shade-rgb) / 0) 100%)
}

.blog-details-card-mark {
  position:absolute;
  z-index:1;
  top:16px;
  inset-inline-start:16px;
  width:44px;
  opacity:.8
}

.blog-details-card-overlay {
  position:absolute;
  z-index:1;
  inset:auto 0 0;
  padding:0 20px 20px;
  color:var(--surface);
  text-align:start
}

.blog-details-card-date {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:20px;
  line-height:1
}

.blog-details-card-date::before {
  content:"";
  flex-shrink:0;
  width:7px;
  height:7px;
  transform:rotate(45deg);
  background:currentColor
}

.blog-details-card-date span {
  font-weight:500
}

.blog-details-card-date time {
  font-family:var(--font-latin);
  font-size:21px;
  letter-spacing:.025em
}

.blog-details-card-heading {
  margin:12px 0 0;
  font-size:22px;
  line-height:1.35
}

.blog-details-card-title {
  margin:0;
  font-size:22px;
  font-weight:400;
  line-height:1.3;
  color:var(--secondary);
  transition:color .2s
}

.blog-details-card:hover .blog-details-card-title {
  color:var(--secondary-mid)
}

.blog-details-card-more {
  margin-top:auto;
  padding-top:24px;
  display:flex;
  min-height:44px;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--secondary-pale);
  padding-bottom:12px;
  font-size:19px;
  line-height:1;
  color:var(--blog-grey);
  transition:color .2s
}

.blog-details-card:hover .blog-details-card-more {
  color:var(--blog-stone)
}

.blog-details-card-more .icon {
  width:18px;
  height:18px;
  color:var(--secondary-pale);
  transition:transform .3s var(--ease)
}

.blog-details-card:hover .blog-details-card-more .icon {
  transform:translateX(-6px)
}

html[dir=ltr] .blog-details-card-more .icon {
  transform:scaleX(-1)
}

html[dir=ltr] .blog-details-card:hover .blog-details-card-more .icon {
  transform:scaleX(-1) translateX(-6px)
}

/* Scroll reveal (main.js adds .is-visible when the block enters the viewport) */
.blog-details-reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)
}

.blog-details-reveal.is-visible {
  opacity:1;
  transform:none
}

@media(max-width:1279px) {
  .blog-details-columns,.blog-details-cta,.blog-details-related {
    padding-inline:6%
  }
}

@media(max-width:1023px) {
  .blog-details-hero {
    height:600px
  }
  .blog-details-hero-content {
    padding:0 32px 56px
  }
  .blog-details-hero-date {
    font-size:30px
  }
  .blog-details-hero-date time {
    font-size:32px
  }
  .blog-details-title {
    margin-top:16px;
    font-size:32px;
    line-height:1.25
  }
  .blog-details-meta {
    padding:0 32px
  }
  .blog-details-byline {
    font-size:18px
  }
  .blog-details-columns {
    margin-top:56px;
    grid-template-columns:1fr;
    gap:48px
  }
  .blog-details-body {
    font-size:20px;
    line-height:1.45
  }
  .blog-details-body.is-offset {
    margin-top:0
  }
  .blog-details-body h2 {
    margin-top:40px;
    font-size:23px
  }
  .blog-details-cta {
    margin-top:64px;
    font-size:21px;
    line-height:1.35
  }
  .blog-details-related {
    margin-top:96px;
    padding-bottom:64px
  }
  .blog-details-related-head h2 {
    font-size:40px
  }
  .blog-details-button {
    height:42px;
    font-size:20px
  }
  .blog-details-related-grid {
    margin-top:56px;
    grid-template-columns:repeat(2,1fr);
    column-gap:40px
  }
}

@media(max-width:767px) {
  .blog-details-meta-row {
    flex-direction:column;
    align-items:flex-start;
    gap:16px
  }
}

@media(max-width:700px) {
  /* The mobile navigation drops down on a navy panel; keep its links ivory. */
  .blog-details-page .primary-nav {
    color:var(--surface)
  }
}

@media(max-width:639px) {
  .blog-details-hero {
    height:520px
  }
  .blog-details-hero-content {
    padding:0 20px 56px
  }
  .blog-details-hero-date {
    font-size:24px
  }
  .blog-details-hero-date time {
    font-size:26px
  }
  .blog-details-title {
    font-size:28px
  }
  .blog-details-meta {
    padding:0 20px
  }
  .blog-details-related-head h2 {
    font-size:34px
  }
}

@media(max-width:479px) {
  .blog-details-related-grid {
    grid-template-columns:1fr
  }
}

@media(prefers-reduced-motion:reduce) {
  .blog-details-reveal {
    opacity:1;
    transform:none;
    transition:none
  }
  .blog-details-card-cover,.blog-details-card-more .icon,.blog-details-share-button {
    transition:none
  }
}

/* =====================================================================
   Projects page (projects.html)
   Every rule is scoped under body.projects-page and every class carries
   the projects- prefix, so nothing here can collide with the other pages.
   Four full-height slides snap into view; the shared header is fixed over
   the photos and gains a translucent navy tint once the page scrolls
   (main.js toggles .is-scrolled). Offsets use logical properties so the
   English mode mirrors the layout the way the shared header does.
   ===================================================================== */
html:has(> body.projects-page) {
  scroll-snap-type:y proximity;
  scroll-padding-top:0
}

.projects-page .site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease)
}

.projects-page .site-header.is-scrolled {
  background:rgb(var(--primary-rgb) / .8);
  backdrop-filter:blur(8px)
}

/* Slide: photo, navy tint and a blurred band behind the selector strip */
.projects-slide {
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:110svh;
  overflow:hidden;
  scroll-snap-align:start;
  background:var(--primary);
  color:var(--surface)
}

.projects-slide-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.projects-slide-tint {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,rgb(var(--primary-rgb) / .4) 0%,rgb(var(--primary-rgb) / .32) 40%,rgb(var(--primary-rgb) / .28) 100%)
}

.projects-slide-blur {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:280px;
  pointer-events:none;
  background:linear-gradient(to top,rgb(var(--primary-rgb) / .3) 0%,rgb(var(--primary-rgb) / .12) 50%,transparent 100%);
  backdrop-filter:blur(14px);
  -webkit-mask-image:linear-gradient(to top,var(--black) 45%,transparent 100%);
  mask-image:linear-gradient(to top,var(--black) 45%,transparent 100%)
}

/* Info block: title, underline, project mark or number, spec rows, visit link */
.projects-info {
  position:relative;
  z-index:10;
  margin:104px 20px 0
}

.projects-head {
  width:192px;
  margin-inline:0 auto;
  text-align:start
}

.projects-title {
  margin:0;
  font-family:var(--font-latin);
  font-size:26px;
  font-weight:400;
  line-height:1;
  letter-spacing:.025em
}

.projects-underline {
  display:block;
  width:100%;
  height:4px;
  margin-top:12px;
  background:linear-gradient(to right,var(--projects-ivory) 0 62.5%,var(--projects-teal) 62.5% 100%)
}

html[dir=ltr] .projects-underline {
  background:linear-gradient(to left,var(--projects-ivory) 0 62.5%,var(--projects-teal) 62.5% 100%)
}

.projects-logo {
  display:block;
  width:auto;
  height:100px;
  margin-top:20px;
  margin-inline-end:-21px
}

.projects-sub {
  margin:12px 0 0;
  font-size:22px;
  line-height:1;
  text-align:end
}

.projects-num {
  font-family:var(--font-latin)
}

.projects-spec {
  margin:32px 0 0
}

.projects-spec-row {
  position:relative;
  height:64px;
  border-bottom:2px solid var(--surface)
}

.projects-spec-item {
  position:absolute;
  bottom:5px;
  margin:0;
  white-space:nowrap;
  font-size:19px;
  line-height:1
}

.projects-spec-item::after {
  content:"";
  position:absolute;
  bottom:-10.5px;
  width:7px;
  height:7px;
  transform:rotate(45deg);
  background:var(--surface)
}

.projects-spec-label {
  inset-inline-start:8px
}

.projects-spec-label::after {
  inset-inline-start:-11px
}

.projects-spec-value {
  inset-inline-end:0
}

.projects-spec-value::after {
  inset-inline-start:-2px
}

.projects-visit {
  position:relative;
  display:block;
  width:max-content;
  margin:26px 0 0;
  margin-inline-end:auto;
  padding-inline-start:69px;
  white-space:nowrap;
  font-size:19px;
  line-height:1;
  text-decoration:none;
  transition:color .2s
}


.projects-visit::before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:50%;
  width:52px;
  height:1.5px;
  transform:translateY(-50%);
  background:rgb(var(--surface-rgb) / .55)
}

.projects-visit::after {
  content:"";
  position:absolute;
  inset-inline-start:50px;
  top:50%;
  width:7px;
  height:7px;
  transform:translateY(-50%) rotate(45deg);
  background:var(--surface)
}

/* Project selector strip: one ivory rule, a teal piece and a label per project */
.projects-strip {
  --projects-line:24px;
  position:relative;
  z-index:10;
  margin:auto 20px 28px;
  padding-top:64px
}

.projects-strip-list {
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin:0;
  padding:0;
  list-style:none
}

.projects-strip-list::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:var(--projects-line);
  height:1.5px;
  background:rgb(var(--surface-rgb) / .9)
}

.projects-strip-item {
  position:relative;
  display:flex;
  flex-direction:column;
  white-space:nowrap;
  text-align:start
}

/* The teal piece sits at the start (right) end of each item, under its name; the current item's is thicker. */
.projects-strip-item::before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:calc(var(--projects-line) - 1px);
  width:26px;
  height:3px;
  background:var(--projects-teal)
}

.projects-strip-item[aria-current=true]::before {
  top:calc(var(--projects-line) - 3px);
  height:6px
}

.projects-strip-link {
  display:contents;
  text-decoration:none
}

.projects-strip-label {
  display:flex;
  align-items:flex-end;
  height:var(--projects-line);
  padding-bottom:7px;
  font-family:var(--font-latin);
  font-size:13px;
  line-height:1;
  letter-spacing:.025em;
  color:var(--surface);
  transition:color .2s
}

.projects-strip-sub {
  margin-top:8px;
  font-size:13px;
  line-height:1.35;
  color:var(--secondary-light)
}

.projects-strip-item:hover .projects-strip-label {
  color:var(--secondary-light)
}

/* Phones keep a fixed size so the four names still fit side by side; from tablet up the current name is as tall as the line offset. */
.projects-strip-item[aria-current=true] .projects-strip-label {
  font-size:16px
}

.projects-strip-item[aria-current=true] .projects-strip-sub {
  font-size:15px
}

/* Small phones: four names no longer fit on one nowrap row, so wrap the strip into two lines and shrink the type. */
@media(max-width:639px) {
  .projects-strip-list {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px 20px
  }
  .projects-strip-item {
    white-space:normal
  }
  .projects-strip-label {
    font-size:11px
  }
  .projects-strip-sub {
    font-size:11px
  }
  .projects-strip-item[aria-current=true] .projects-strip-label {
    font-size:13px
  }
  .projects-strip-item[aria-current=true] .projects-strip-sub {
    font-size:12px
  }
}

/* Tablet: larger type and gutters (the 640px step of the blog design) */
@media(min-width:640px) {
  .projects-info {
    margin-inline:32px
  }
  .projects-title {
    font-size:30.5px
  }
  .projects-spec-item {
    font-size:21.6px
  }
  .projects-visit {
    font-size:21.6px
  }
  .projects-strip {
    margin-inline:32px
  }
  .projects-strip-label {
    font-size:15px
  }
  .projects-strip-sub {
    font-size:15px
  }
  .projects-strip-item[aria-current=true] .projects-strip-label {
    font-size:var(--projects-line)
  }
  .projects-strip-item[aria-current=true] .projects-strip-sub {
    font-size:17px
  }
}

/* Desktop: the blocks sit at the positions measured from the design (1024px step) */
@media(min-width:1024px) {
  .projects-info {
    position:absolute;
    top:178px;
    inset-inline-start:121px;
    width:667px;
    margin:0
  }
  .projects-head {
    height:122px
  }
  .projects-underline {
    margin-top:18px
  }
  .projects-logo {
    height:90px;
    margin-top:28px;
    margin-inline-start:-12px
  }
  .projects-sub {
    margin-top:13px;
    font-size:27px
  }
  .projects-spec {
    width:651px;
    margin-top:0;
    margin-inline-start:16px
  }
  .projects-spec-row {
    height:110px
  }
  .projects-spec-label {
    inset-inline-start:11px
  }
  .projects-spec-value {
    inset-inline-end:auto
  }
  .projects-spec-row.is-row2 .projects-spec-label {
    inset-inline-start:260px
  }
  .projects-spec-row.is-row1 .projects-spec-value {
    inset-inline-start:415px
  }
  .projects-spec-row.is-row2 .projects-spec-value {
    inset-inline-start:548px
  }
  .projects-visit {
    margin-top:46px;
    margin-inline-start:20px
  }
  /* Centered in the slide and stretched: fills the width between 40px gutters, capped at 1180px. */
  .projects-strip {
    --projects-line:40px;
    position:absolute;
    bottom:60px;
    inset-inline:40px;
    width:auto;
    max-width:1180px;
    margin:0 auto;
    padding-top:0
  }
  .projects-strip-list {
    display:block;
    height:110px
  }
  .projects-strip-item {
    position:absolute;
    top:0
  }
  /* Item positions keep the design proportions (0 / 201 / 464 / 708 of 824) as percentages of the strip. */
  .projects-strip-item.is-1 {
    inset-inline-start:0
  }
  .projects-strip-item.is-2 {
    inset-inline-start:24.4%
  }
  .projects-strip-item.is-3 {
    inset-inline-start:56.3%
  }
  .projects-strip-item.is-4 {
    inset-inline-start:85.9%
  }
  .projects-strip-item::before {
    width:45px
  }
  .projects-strip-label {
    font-size:18.8px
  }
  .projects-strip-sub {
    margin-top:10px;
    font-size:20px
  }
  .projects-strip-item[aria-current=true] .projects-strip-sub {
    font-size:28px;
    line-height:1.2
  }
}

@media(prefers-reduced-motion:reduce) {
  html:has(> body.projects-page) {
    scroll-snap-type:none
  }
  .projects-page .site-header,.projects-visit,.projects-strip-label {
    transition:none
  }
}

/* =====================================================================
   Project details page (project-details.html)
   Every rule is scoped under body.project-details-page and every class
   carries the project-details- prefix, so nothing here can collide with
   the other pages. The page is the projects listing: a featured-project
   hero laid out like the slides of projects.html (same offsets, this
   page's colours), the filter bar, the card grid with paging and the
   shared header fixed over the photo (main.js toggles .is-scrolled).
   Offsets use logical properties so the English mode mirrors the layout
   the way the shared header does.
   ===================================================================== */
html:has(> body.project-details-page) {
  background:var(--projects-ivory);
  scroll-padding-top:24px
}

.project-details-page {
  min-height:100vh;
  overflow-x:hidden;
  background:var(--projects-ivory);
  color:var(--project-details-stone);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

.project-details-page ::selection {
  background:var(--secondary);
  color:var(--surface)
}

.project-details-page :focus-visible {
  outline:2px solid var(--secondary);
  outline-offset:2px
}

.project-details-page .site-header :focus-visible,.project-details-page .site-footer :focus-visible,.project-details-page .site-dialog :focus-visible,.project-details-page .project-details-hero :focus-visible,.project-details-page .project-details-filter-btn:focus-visible,.project-details-page .project-details-segment :focus-visible {
  outline-color:var(--secondary-light)
}

/* Shared header: fixed over the hero photo, translucent navy once the page scrolls */
.project-details-page .site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
  color:var(--surface);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease)
}

.project-details-page .site-header.is-scrolled {
  background:rgb(var(--primary-rgb) / .9);
  box-shadow:0 1px 0 0 rgb(var(--surface-rgb) / .08);
  backdrop-filter:blur(8px)
}

/* Shared footer: the listing design has no brand row (seal and slogan) above the newsletter. */
.project-details-page .footer-brand-row {
  display:none
}

.project-details-page .site-footer {
  padding-top:63px;
  padding-bottom:94px
}

/* Hero: featured project photo, the same light navy tint and blurred band as the projects.html slide */
.project-details-hero {
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:640px;
  overflow:hidden;
  background:var(--primary);
  color:var(--surface)
}

.project-details-hero-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 100%
}

.project-details-hero-tint {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,rgb(var(--primary-rgb) / .4) 0%,rgb(var(--primary-rgb) / .32) 40%,rgb(var(--primary-rgb) / .28) 100%)
}

.project-details-hero-blur {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:230px;
  pointer-events:none;
  backdrop-filter:blur(5px);
  -webkit-mask-image:linear-gradient(to top,var(--black) 55%,transparent 100%);
  mask-image:linear-gradient(to top,var(--black) 55%,transparent 100%)
}

/* Info block: title, underline, project mark, spec rows, visit link (offsets as on the projects.html slide) */
.project-details-info {
  position:relative;
  z-index:10;
  margin:104px 20px 0
}

.project-details-head {
  width:192px;
  margin-inline:0 auto
}

.project-details-title {
  margin:0;
  text-align:end;
  font-family:var(--font-latin);
  font-size:26px;
  font-weight:400;
  line-height:1;
  letter-spacing:.025em
}

html[dir=ltr] .project-details-title {
  text-align:start
}

.project-details-underline {
  display:block;
  width:100%;
  height:2px;
  margin-top:12px;
  background:linear-gradient(to right,var(--projects-ivory) 0 62.5%,var(--projects-teal) 62.5% 100%)
}

html[dir=ltr] .project-details-underline {
  background:linear-gradient(to left,var(--projects-ivory) 0 62.5%,var(--projects-teal) 62.5% 100%)
}

.project-details-logo {
  display:block;
  width:auto;
  height:72px;
  margin-top:20px;
  margin-inline-end:-21px
}

/* Spec rows: one rule per row; the label sits at the start and the value along the rule, each with a diamond on the rule */
.project-details-spec {
  margin:32px 0 0
}

.project-details-spec-row {
  position:relative;
  height:64px;
  border-bottom:2px solid var(--surface)
}

.project-details-spec-item {
  position:absolute;
  bottom:5px;
  margin:0;
  white-space:nowrap;
  font-size:19px;
  line-height:1
}

.project-details-spec-item::after {
  content:"";
  position:absolute;
  bottom:-10.5px;
  width:7px;
  height:7px;
  transform:rotate(45deg);
  background:var(--surface)
}

.project-details-spec-label {
  inset-inline-start:8px
}

.project-details-spec-label::after {
  inset-inline-start:-11px
}

.project-details-spec-value {
  inset-inline-end:0
}

.project-details-spec-value::after {
  inset-inline-start:-2px
}

.project-details-visit {
  position:relative;
  display:block;
  width:max-content;
  margin:26px 0 0;
  margin-inline-end:auto;
  padding-inline-start:69px;
  white-space:nowrap;
  font-size:19px;
  line-height:1;
  color:inherit;
  text-decoration:none;
  transition:color .2s
}

.project-details-visit:hover {
  color:var(--secondary-light)
}

.project-details-visit::before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:50%;
  width:52px;
  height:1.5px;
  transform:translateY(-50%);
  background:rgb(var(--surface-rgb) / .55)
}

.project-details-visit::after {
  content:"";
  position:absolute;
  inset-inline-start:50px;
  top:50%;
  width:7px;
  height:7px;
  transform:translateY(-50%) rotate(45deg);
  background:var(--project-details-available)
}

/* Project selector strip: one ivory rule, a teal piece and a label per project (as on the projects.html slide) */
.project-details-strip {
  --project-details-line:24px;
  position:relative;
  z-index:10;
  margin:auto 20px 28px;
  padding-top:64px
}

.project-details-strip-list {
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin:0;
  padding:0;
  list-style:none
}

.project-details-strip-list::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:var(--project-details-line);
  height:1.5px;
  background:rgb(var(--surface-rgb) / .9)
}

.project-details-strip-item {
  position:relative;
  display:flex;
  flex-direction:column;
  white-space:nowrap;
  text-align:start
}

/* The teal piece sits at the start end of each item, under its name; the current item's is thicker. */
.project-details-strip-item::before {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:calc(var(--project-details-line) - 1px);
  width:26px;
  height:3px;
  background:var(--projects-teal)
}

.project-details-strip-item[aria-current=true]::before {
  top:calc(var(--project-details-line) - 3px);
  height:6px
}

.project-details-strip-link {
  display:contents;
  color:inherit;
  text-decoration:none
}

.project-details-strip-label {
  display:flex;
  align-items:flex-end;
  height:var(--project-details-line);
  padding-bottom:7px;
  font-family:var(--font-latin);
  font-size:13px;
  line-height:1;
  letter-spacing:.025em;
  color:var(--surface);
  transition:color .2s
}

.project-details-strip-sub {
  display:block;
  margin-top:8px;
  font-size:13px;
  line-height:1.35;
  color:var(--secondary-light)
}

.project-details-strip-item:hover .project-details-strip-label {
  color:var(--secondary-light)
}

.project-details-strip-item[aria-current=true] .project-details-strip-label {
  font-size:16px
}

.project-details-strip-item[aria-current=true] .project-details-strip-sub {
  font-size:15px
}

/* Small phones: four names no longer fit on one nowrap row, so wrap the strip into two lines and shrink the type. */
@media(max-width:639px) {
  .project-details-strip-list {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px 20px
  }
  .project-details-strip-item {
    white-space:normal
  }
  .project-details-strip-label {
    font-size:11px
  }
  .project-details-strip-sub {
    font-size:11px
  }
  .project-details-strip-item[aria-current=true] .project-details-strip-label {
    font-size:13px
  }
  .project-details-strip-item[aria-current=true] .project-details-strip-sub {
    font-size:12px
  }
}

/* Filter bar: navy pills that open panels of the same width; the show button and the sale / rent segment close the row */
.project-details-filters {
  position:relative;
  z-index:20;
  max-width:1440px;
  margin:40px auto 0;
  padding:0 20px
}

.project-details-filter-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px
}

.project-details-filter {
  position:relative;
  width:100%;
  flex:1 1 auto
}

.project-details-filter-btn {
  position:relative;
  z-index:1;
  display:flex;
  width:100%;
  height:52px;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  border:0;
  border-radius:9999px;
  background:var(--primary);
  color:var(--surface);
  text-align:start;
  cursor:pointer;
  transition:background-color .2s
}

.project-details-filter-btn:hover {
  background:var(--projects-teal)
}

.project-details-filter-lbl {
  display:block;
  font-size:16px;
  line-height:1
}

.project-details-filter-val {
  display:block;
  margin-top:5px;
  font-size:12px;
  line-height:1;
  color:var(--secondary-light)
}

.project-details-filter-btn .icon {
  width:20px;
  height:20px;
  flex-shrink:0;
  transition:transform .3s var(--ease)
}

.project-details-filter.is-open .project-details-filter-btn .icon {
  transform:rotate(180deg)
}

/* The panel is as wide as its pill and tucks under it, as in the design */
.project-details-filter-panel {
  position:absolute;
  inset-inline:0;
  top:calc(100% - 8px);
  z-index:10;
  width:100%;
  padding:24px 16px 16px;
  border:1px solid rgb(var(--secondary-light-rgb) / .6);
  border-radius:10px;
  background:var(--projects-ivory);
  box-shadow:0 18px 40px -20px rgb(var(--primary-rgb) / .45);
  transform-origin:top;
  transform:scale(.95);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease)
}

.project-details-filter.is-open .project-details-filter-panel {
  transform:scale(1);
  opacity:1;
  pointer-events:auto
}

.project-details-filter-ttl {
  display:block;
  margin-bottom:8px;
  font-size:13px;
  line-height:1;
  color:var(--projects-teal)
}

.project-details-check {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:5px 0;
  font-size:18px;
  line-height:1;
  color:var(--primary);
  cursor:pointer
}

.project-details-check input {
  width:16px;
  height:16px;
  flex-shrink:0;
  margin:0;
  appearance:none;
  border:1px solid var(--projects-teal);
  border-radius:3px;
  background:transparent;
  cursor:pointer;
  transition:background-color .2s,border-color .2s
}

.project-details-check input:checked {
  border-color:var(--project-details-gold);
  background:var(--project-details-gold)
}

/* The tick is a mask over the checked box, so its colour stays a variable. */
.project-details-check::after {
  content:"";
  position:absolute;
  top:50%;
  inset-inline-end:0;
  width:16px;
  height:16px;
  transform:translateY(-50%);
  background:var(--surface);
  opacity:0;
  pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.5' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.5' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat
}

.project-details-check:has(input:checked)::after {
  opacity:1
}

.project-details-search-in {
  width:100%;
  height:36px;
  margin-bottom:12px;
  padding:0 12px;
  border:1px solid rgb(var(--secondary-light-rgb) / .7);
  border-radius:6px;
  background:rgb(var(--surface-rgb) / .4);
  font-size:13px;
  color:var(--primary)
}

.project-details-search-in::placeholder {
  color:var(--project-details-mute)
}

.project-details-search-in:focus {
  outline:none;
  border-color:var(--project-details-gold)
}

.project-details-chips {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px
}

.project-details-chip {
  display:flex;
  height:40px;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgb(var(--secondary-light-rgb) / .7);
  border-radius:7px;
  background:rgb(var(--surface-rgb) / .4);
  font-family:var(--font-latin);
  font-size:14px;
  color:var(--project-details-gold);
  cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s
}

.project-details-chip.is-text {
  font-family:var(--font)
}

.project-details-chip:hover {
  border-color:var(--project-details-gold)
}

.project-details-chip[aria-pressed=true] {
  border-color:var(--project-details-gold);
  background:var(--project-details-gold);
  color:var(--surface)
}

.project-details-price-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

.project-details-range-field {
  display:flex;
  height:40px;
  align-items:center;
  padding:0 10px;
  border:1px solid rgb(var(--secondary-light-rgb) / .7);
  border-radius:7px;
  background:rgb(var(--surface-rgb) / .4);
  font-family:var(--font-latin);
  font-size:14px;
  color:var(--project-details-gold)
}

.project-details-range-field input {
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:center
}

.project-details-range-field input:focus {
  outline:none
}

.project-details-range-unit {
  margin-inline-start:4px;
  font-family:var(--font);
  font-size:12px
}

.project-details-range-track {
  position:relative;
  height:2px;
  margin-top:20px;
  border-radius:4px;
  background:var(--projects-teal)
}

.project-details-range-track input[type=range] {
  position:absolute;
  left:0;
  right:0;
  top:-7px;
  width:100%;
  height:16px;
  margin:0;
  appearance:none;
  background:transparent;
  pointer-events:none
}

.project-details-range-track input[type=range]::-webkit-slider-thumb {
  width:11px;
  height:11px;
  appearance:none;
  border-radius:1px;
  background:var(--projects-teal);
  transform:rotate(45deg);
  cursor:pointer;
  pointer-events:auto
}

.project-details-range-track input[type=range]::-moz-range-thumb {
  width:11px;
  height:11px;
  border:0;
  border-radius:1px;
  background:var(--projects-teal);
  transform:rotate(45deg);
  cursor:pointer;
  pointer-events:auto
}

/* Show button and sale / rent segment: soft 12px corners, not pills */
.project-details-btn-apply {
  display:flex;
  height:60px !important; 
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border:0;
  border-radius:27px;
  background:var(--project-details-gold);
  font-size:18px;
  line-height:1;
  color:var(--surface);
  cursor:pointer;
  transition:background-color .2s
}

.project-details-btn-apply:hover {
  background:var(--secondary)
}

.project-details-segment {
  display:flex;
  height:52px;
  align-items:center;
  margin-inline-start:auto;
  padding:0 8px;
  border-radius:22px;
  background:var(--primary)
}

.project-details-segment button {
  position:relative;
  padding:0 16px;
  border:0;
  background:none;
  font-size:18px;
  line-height:1;
  color:var(--secondary-light);
  cursor:pointer;
  transition:color .2s
}

.project-details-segment button:hover,.project-details-segment button[aria-pressed=true] {
  color:var(--surface)
}

.project-details-segment-sep {
  width:1px;
  height:34px;
  background:rgb(var(--surface-rgb) / .7)
}

/* Project grid: one column, two from 480px, three on desktop */
.project-details-list {
  max-width:1140px;
  margin:64px auto 0;
  padding:0 20px 80px
}

.project-details-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:56px 24px
}

.project-details-card {
  display:flex;
  flex-direction:column
}

.project-details-card[hidden] {
  display:none
}

.project-details-card-media {
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:353 / 472;
  overflow:hidden;
  background:var(--project-details-line)
}

.project-details-card-cover {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease)
}

.project-details-card:hover .project-details-card-cover {
  transform:scale(1.04)
}

.project-details-card-media::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:42%;
  pointer-events:none;
  background:linear-gradient(to top,rgb(var(--project-details-shade-rgb) / .82) 0%,rgb(var(--project-details-shade-rgb) / .4) 55%,rgb(var(--project-details-shade-rgb) / 0) 100%)
}

/* Sold projects: the photo turns grey under a grey veil */
.project-details-card[data-status=sold] .project-details-card-cover {
  filter:grayscale(1)
}

.project-details-card[data-status=sold] .project-details-card-media::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:rgb(var(--project-details-shade-rgb) / .38)
}

.project-details-card-mark {
  position:absolute;
  inset-inline-start:18px;
  top:14px;
  z-index:2;
  width:auto;
  height:30px;
  opacity:.95
}

.project-details-card-mark.is-wide {
  inset-inline-start:20px;
  height:36px
}

.project-details-card-status {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:0 20px 20px;
  text-align:start;
  color:var(--surface)
}

/* Status line: the diamond leads, then the wording; white for coming soon, green for sale, red for sold */
.project-details-card-state {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin:0;
  font-size:22px;
  line-height:1
}

.project-details-card-state::before {
  content:"";
  display:block;
  width:8px;
  height:8px;
  transform:rotate(45deg);
  background:var(--surface)
}

.project-details-card[data-status=available] .project-details-card-state::before {
  background:var(--project-details-available)
}

.project-details-card[data-status=sold] .project-details-card-state::before {
  background:var(--project-details-sold)
}

.project-details-card-kind {
  display:block;
  margin-top:12px;
  text-align:end;
  font-weight:300;
  font-size:17px;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgb(var(--surface-rgb) / .95)
}

.project-details-card-kind b {
  font-family:var(--font-latin);
  font-weight:400
}

.project-details-card-name {
  margin:6px 0 0;
  white-space:nowrap;
  text-align:end;
  font-family:var(--font-latin);
  font-size:24px;
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
  color:var(--primary)
}

/* The name and kind carry dir=ltr, so "end" is the right edge in Arabic; English mirrors it. */
html[dir=ltr] .project-details-card-name,html[dir=ltr] .project-details-card-kind {
  text-align:start
}

.project-details-card-name a {
  color:inherit;
  text-decoration:none
}

.project-details-card:hover .project-details-card-name {
  color:var(--projects-teal)
}

/* Title rule: a 2px gold line with a taller teal piece at the start end */
.project-details-card-rule {
  position:relative;
  display:block;
  width:100%;
  height:2px;
  margin-top:8px;
  background:var(--secondary-light)
}

.project-details-card-rule::after {
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:-1px;
  width:17%;
  height:4px;
  background:var(--projects-teal)
}

.project-details-card-type,.project-details-card-place {
  margin:0;
  font-size:26px;
  line-height:1.25;
  color:var(--secondary)
}

.project-details-card-type {
  margin-top:6px
}

.project-details-empty {
  margin:40px 0 0;
  text-align:center;
  font-size:20px;
  color:var(--secondary)
}

.project-details-empty[hidden] {
  display:none
}

/* "Explore more" (a small soft-cornered button) and the page dots */
.project-details-pager {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  margin-top:56px
}

.project-details-btn-more {
  display:inline-flex;
  height:36px;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border:0;
  border-radius:8px;
  background:var(--project-details-chip);
  font-size:15px;
  line-height:1;
  color:var(--secondary);
  cursor:pointer;
  transition:background-color .2s var(--ease),color .2s var(--ease)
}

.project-details-btn-more:hover {
  background:var(--secondary);
  color:var(--surface)
}

.project-details-btn-more:disabled {
  opacity:.4;
  cursor:not-allowed;
  background:var(--project-details-chip);
  color:var(--secondary)
}

.project-details-btn-more[hidden] {
  display:none
}

.project-details-pager-dots {
  display:flex;
  align-items:center;
  gap:6px
}

.project-details-pager-dots[hidden] {
  display:none
}

.project-details-dot {
  width:10px;
  height:10px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--project-details-line);
  cursor:pointer;
  transition:background-color .2s
}

.project-details-dot[aria-current=true] {
  background:var(--secondary)
}

/* Scroll reveal (main.js adds .is-visible when a card enters the viewport) */
.project-details-reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)
}

.project-details-reveal.is-visible {
  opacity:1;
  transform:none
}

@media(prefers-reduced-motion:reduce) {
  .project-details-reveal {
    opacity:1;
    transform:none;
    transition:none
  }
}

/* Two filter pills and two cards per row from 480px */
@media(min-width:480px) {
  .project-details-filter {
    width:calc(50% - 6px)
  }
  .project-details-btn-apply {
    width:auto
  }
  .project-details-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

/* Tablet: larger type and gutters (the 640px step) */
@media(min-width:640px) {
  .project-details-hero {
    min-height:720px
  }
  .project-details-info {
    margin-inline:32px
  }
  .project-details-title {
    font-size:30.5px
  }
  .project-details-spec-item {
    font-size:21.6px
  }
  .project-details-visit {
    font-size:21.6px
  }
  .project-details-strip {
    margin-inline:32px
  }
  .project-details-strip-label {
    font-size:15px
  }
  .project-details-strip-sub {
    font-size:15px
  }
  .project-details-strip-item[aria-current=true] .project-details-strip-label {
    font-size:19px
  }
  .project-details-strip-item[aria-current=true] .project-details-strip-sub {
    font-size:17px
  }
  .project-details-filters {
    padding-inline:32px
  }
  .project-details-list {
    padding-inline:32px
  }
}

/* Desktop: the blocks sit at the positions measured from the design (1024px step) */
@media(min-width:1024px) {
  .project-details-hero {
    height:915px;
    min-height:0
  }
  .project-details-info {
    position:absolute;
    top:178px;
    inset-inline-start:121px;
    width:667px;
    margin:0
  }
  .project-details-head {
    height:122px
  }
  .project-details-underline {
    margin-top:18px
  }
  .project-details-logo {
    height:65px;
    margin-top:28px;
    margin-inline-start:-12px
  }
  .project-details-spec {
    width:651px;
    margin-top:0;
    margin-inline-start:16px
  }
  .project-details-spec-row {
    height:110px
  }
  .project-details-spec-label {
    inset-inline-start:11px
  }
  .project-details-spec-value {
    inset-inline-end:auto
  }
  .project-details-spec-row.is-row2 .project-details-spec-label {
    inset-inline-start:260px
  }
  .project-details-spec-row.is-row1 .project-details-spec-value {
    inset-inline-start:415px
  }
  .project-details-spec-row.is-row2 .project-details-spec-value {
    inset-inline-start:548px
  }
  .project-details-visit {
    margin-top:46px;
    margin-inline-start:20px
  }
  .project-details-strip {
    --project-details-line:40px;
    position:absolute;
    bottom:60px;
    inset-inline-end:308px;
    width:824px;
    margin:0;
    padding-top:0
  }
  .project-details-strip-list {
    display:block;
    min-height:110px
  }
  .project-details-strip-item {
    position:absolute;
    top:0;
    white-space:normal;
    overflow-wrap:break-word
  }
  .project-details-strip-item.is-1 {
    inset-inline-start:0;
    max-width:180px
  }
  .project-details-strip-item.is-2 {
    inset-inline-start:201px;
    max-width:245px
  }
  .project-details-strip-item.is-3 {
    inset-inline-start:464px;
    max-width:225px
  }
  .project-details-strip-item.is-4 {
    inset-inline-start:708px;
    max-width:116px
  }
  .project-details-strip-item::before {
    width:45px
  }
  .project-details-strip-label {
    font-size:18.8px
  }
  .project-details-strip-sub {
    margin-top:10px;
    font-size:20px
  }
  .project-details-strip-item[aria-current=true] .project-details-strip-label {
    font-size:28px
  }
  .project-details-strip-item[aria-current=true] .project-details-strip-sub {
    font-size:28px;
    line-height:1.2
  }
  .project-details-filters {
    margin-top:42px;
    padding-inline:65px 34px
  }
  .project-details-filter-row {
    flex-wrap:nowrap;
    gap:18px
  }
  .project-details-filter {
    flex:1 1 245px;
    width:245px
  }
  .project-details-filter-btn {
    height:56px;
    padding:0 28px
  }
  .project-details-filter-lbl {
    font-size:17px
  }
  .project-details-filter-val {
    font-size:12.5px
  }
  .project-details-filter-panel {
    padding:26px 18px 18px;
    margin-top: 10px;

  }
  .project-details-btn-apply {
    width:77px;
    height:59px;
    padding:0
  }
  .project-details-segment {
    width:181px;
    height:56px;
    justify-content:center;
    margin-inline-start:0
  }
  .project-details-segment button {
    padding:0 20px;
    font-size:19px
  }
  .project-details-list {
    margin-top:92px;
    padding:0 0 110px
  }
  .project-details-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:84px 23px
  }
  .project-details-card-mark {
    top:16px
  }
  .project-details-card-status {
    padding:0 22px 24px
  }
  .project-details-card-state {
    font-size:24px
  }
  .project-details-card-kind {
    font-size:19px
  }
  .project-details-card-name {
    font-size:26px
  }
  .project-details-card-rule {
    margin-top:10px
  }
  .project-details-card-type,.project-details-card-place {
    font-size:30px
  }
  .project-details-card-type {
    margin-top:10px
  }
  .project-details-pager {
    margin-top:62px
  }
}

/* =====================================================================
   Single project page (one-project-details.html)
   Every rule is scoped under body.one-project-details-page and every
   class carries the one-project-details- prefix, so nothing here can
   collide with the other pages. The page is the project sheet of the
   design: the photo gallery with the lightbox, the details block with
   the sales ring, the features and the guarantee timeline, the units
   with the floor-plan viewer, the location map and the shared header
   fixed over the gallery (main.js toggles .is-scrolled). Offsets use
   logical properties so the English mode mirrors the layout the way
   the shared header does. Breakpoints follow the design steps: 480,
   640, 1024 and 1280px.
   ===================================================================== */
html:has(> body.one-project-details-page) {
  background:var(--projects-ivory);
  scroll-padding-top:24px
}

.one-project-details-page {
  min-height:100vh;
  overflow-x:hidden;
  background:var(--projects-ivory);
  color:var(--project-details-stone);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

.one-project-details-page ::selection {
  background:var(--secondary);
  color:var(--surface)
}

.one-project-details-page :focus-visible {
  outline:2px solid var(--secondary);
  outline-offset:2px
}

.one-project-details-page .site-header :focus-visible,.one-project-details-page .site-footer :focus-visible,.one-project-details-page .site-dialog :focus-visible,.one-project-details-page .one-project-details-hero :focus-visible,.one-project-details-page .one-project-details-units :focus-visible,.one-project-details-page .one-project-details-lightbox :focus-visible {
  outline-color:var(--secondary-light)
}

/* Shared header: fixed over the gallery photo, translucent navy once the page scrolls */
.one-project-details-page .site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
  color:var(--surface);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease)
}

.one-project-details-page .site-header.is-scrolled {
  background:rgb(var(--primary-rgb) / .9);
  box-shadow:0 1px 0 0 rgb(var(--surface-rgb) / .08);
  backdrop-filter:blur(8px)
}

/* Shared footer: the project design has no brand row (seal and slogan) above the newsletter. */
.one-project-details-page .footer-brand-row {
  display:none
}

.one-project-details-page .site-footer {
  padding-top:63px;
  padding-bottom:94px
}

/* Footer contact headings start at the same edge as the social media row (the design aligns them) */
.one-project-details-page .contact-methods div,.interest-page .contact-methods div,.appointment-page .contact-methods div {
  align-items:flex-start
}

/* Section headings: a small gold diamond then the title; ivory on the navy surfaces */
.one-project-details-sec-title {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  font-size:23px;
  font-weight:400;
  line-height:1;
  color:var(--project-details-stone)
}

.one-project-details-sec-title::before {
  content:'';
  display:block;
  width:7px;
  height:7px;
  flex-shrink:0;
  transform:rotate(45deg);
  background:var(--secondary)
}

/* The price heading in the details block is the same gold as the figure */
.one-project-details-details .one-project-details-sec-title {
  color:var(--one-project-details-price)
}

.one-project-details-details .one-project-details-sec-title::before {
  background:var(--one-project-details-price)
}

.one-project-details-units .one-project-details-sec-title {
  color:var(--surface)
}

.one-project-details-units .one-project-details-sec-title::before {
  background:var(--surface)
}

.one-project-details-arrow {
  font-size:30px;
  opacity:.7
}

/* Ornaments: the brand pattern, tan on the ivory sections and ivory on the navy ones */
.one-project-details-ornament,.one-project-details-ornament-tan {
  position:absolute;
  pointer-events:none;
  background-repeat:no-repeat
}

.one-project-details-ornament {
  background-image:url('../images/one-project-details-ornament.png');
  background-size:1200px auto
}

.one-project-details-ornament-tan {
  background-image:url('../images/one-project-details-ornament-tan.png');
  background-size:900px auto
}

/* Hero gallery: the photos are stacked and fade in turn; the copy sits at the foot of the photo */
.one-project-details-hero {
  position:relative;
  width:100%;
  height:min(78vh,560px);
  min-height:440px;
  overflow:hidden;
  background:var(--primary);
  color:var(--surface)
}

.one-project-details-slide {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .7s var(--ease)
}

.one-project-details-slide.is-active {
  opacity:1
}

.one-project-details-slide img {
  width:100%;
  height:100%;
  object-fit:cover
}

.one-project-details-hero-tint {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,rgb(var(--primary-rgb) / .62) 0%,rgb(var(--primary-rgb) / .42) 45%,rgb(var(--primary-rgb) / .55) 100%)
}

.one-project-details-hero-copy {
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  height:100%;
  max-width:var(--page-width);
  margin-inline:auto;
  padding:96px 20px 64px
}

.one-project-details-hero-text {
  max-width:690px;
  margin:0;
  margin-inline-end:auto;
  font-size:17px;
  line-height:1.45;
  color:var(--surface)
}

.one-project-details-hero-logo {
  position:absolute;
  bottom:20px;
  inset-inline-start:20px;
  z-index:10;
  width:auto;
  height:52px
}

.one-project-details-hero-expand {
  position:absolute;
  inset-inline-end:20px;
  top:50%;
  z-index:10;
  display:none;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  padding:0;
  border:0;
  border-radius:50%;
  transform:translateY(-50%);
  background:rgb(var(--surface-rgb) / .15);
  color:var(--surface);
  backdrop-filter:blur(8px);
  transition:background-color .2s ease
}

.one-project-details-hero-expand:hover {
  background:rgb(var(--surface-rgb) / .3)
}

.one-project-details-hero-expand .icon {
  width:22px;
  height:22px;
  stroke-width:1.6
}

.one-project-details-hero-dots {
  position:absolute;
  bottom:28px;
  inset-inline-end:20px;
  z-index:10;
  display:flex;
  align-items:center;
  gap:8px
}

.one-project-details-hero-dot {
  width:10px;
  height:10px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgb(var(--surface-rgb) / .5);
  transition:background-color .3s ease
}

.one-project-details-hero-dot[aria-current=true] {
  background:var(--surface)
}

/* Lightbox: the current gallery photo over a navy veil */
.one-project-details-lightbox {
  position:fixed;
  inset:0;
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgb(var(--primary-rgb) / .95)
}

.one-project-details-lightbox[hidden] {
  display:none
}

.one-project-details-lightbox-close {
  position:absolute;
  top:20px;
  inset-inline-end:20px;
  border:0;
  background:none;
  color:var(--surface)
}

.one-project-details-lightbox img {
  max-width:95vw;
  max-height:90vh;
  object-fit:contain;
  box-shadow:0 25px 50px -12px rgb(var(--black-rgb) / .25)
}

/* Details: the evening photo at the start, the price, specs and calls to action at the end */
.one-project-details-details {
  position:relative;
  overflow:hidden;
  background:var(--projects-ivory)
}

.one-project-details-details-ornament {
  inset-block:0;
  inset-inline-end:0;
  width:520px;
  opacity:.035;
  background-position:-260px 40px
}

.one-project-details-grid {
  position:relative;
  display:grid
}

.one-project-details-media {
  position:relative;
  width:100%;
  aspect-ratio:4 / 5;
  margin:0;
  overflow:hidden;
  background:var(--primary)
}

.one-project-details-cover {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:28% 50%
}

.one-project-details-mark {
  position:absolute;
  top:20px;
  inset-inline-start:20px;
  width:auto;
  height:44px
}

.one-project-details-status {
  position:absolute;
  bottom:20px;
  inset-inline:20px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  color:var(--surface)
}

.one-project-details-status-group {
  display:flex;
  align-items:flex-end;
  gap:12px
}

.one-project-details-status-group .one-project-details-status-item {
  padding-bottom:8px
}

.one-project-details-status-item {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:19px;
  line-height:1
}

.one-project-details-status-item::before {
  content:'';
  display:block;
  width:7px;
  height:7px;
  transform:rotate(45deg);
  background:var(--surface)
}

.one-project-details-status-item.is-available::before {
  background:var(--surface)
}

.one-project-details-ring {
  position:relative;
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  flex-shrink:0;
  border-radius:50%;
  background:rgb(var(--surface-rgb) / .55);
  backdrop-filter:blur(6px)
}

.one-project-details-ring svg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg)
}

.one-project-details-ring-track,.one-project-details-ring-fill {
  fill:none;
  stroke-width:5.5
}

.one-project-details-ring-track {
  stroke:none
}

.one-project-details-ring-fill {
  stroke:var(--surface);
  stroke-linecap:round
}

.one-project-details-ring-val {
  position:relative;
  font-family:var(--font-latin);
  font-size:20px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--primary)
}

.one-project-details-body {
  position:relative;
  padding:40px 20px 56px
}

.one-project-details-inner {
  width:100%;
  max-width:720px;
  margin-inline:auto
}

.one-project-details-actions {
  display:flex;
  align-items:center;
  gap:0px;
  margin-bottom:40px
}

.one-project-details-ghost {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  color:var(--secondary);
  transition:background-color .2s ease
}

.one-project-details-ghost:hover {
  background:rgb(var(--secondary-rgb) / .1)
}

.one-project-details-ghost .icon {
  width:32px;
  height:32px;
  stroke-width:1.6
}

.one-project-details-ghost.is-on .icon {
  fill:currentColor
}

.one-project-details-price-head {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px 24px
}

.one-project-details-price,.one-project-details-unit-price {
  display:flex;
  align-items:center;
  gap:10px;
  margin:16px 0 0;
  font-family:var(--font);
  font-size:28px;
  font-weight:700;
  line-height:1;
  color:var(--one-project-details-price);
  letter-spacing: 1.5px;
}

/* The riyal symbol is the vector from the design, used as a mask so it takes the text colour */
.one-project-details-sar {
  display:inline-block;
  width:.8em;
  height:.84em;
  flex-shrink:0;
  background:currentColor;
  -webkit-mask:url('../images/one-project-details-sar.svg') center / contain no-repeat;
  mask:url('../images/one-project-details-sar.svg') center / contain no-repeat
}

.one-project-details-map-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-bottom:10px;
  border-bottom:1px solid var(--secondary-light);
  font-size:19px;
  line-height:1;
  color:var(--secondary);
  transition:border-color .2s ease,color .2s ease
}

.one-project-details-map-link:hover {
  border-color:var(--secondary);
  color:var(--one-project-details-gold)
}

.one-project-details-spec-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  margin:36px 0 0
}

.one-project-details-spec-box {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
  padding: 0 20px 0px 80px !important;
  border:1px solid rgb(var(--secondary-rgb) / .7);
  border-radius:5px
}

.one-project-details-spec-box dt,.one-project-details-spec-box dd,.one-project-details-unit-box dt,.one-project-details-unit-box dd {
  margin:0
}

.one-project-details-lbl {
  font-size:19px;
  line-height:1;
  color:var(--secondary)
}

.one-project-details-val {
  font-family:var(--font-latin);
  font-size:34px !important;
  font-weight:700;
  line-height:1;
  letter-spacing:.025em;
  color:var(--one-project-details-gold)
}

.one-project-details-val.is-ar {
  font-family:var(--font);
  font-weight:500;
  letter-spacing:0
}

.one-project-details-unit-ar {
  font-family:var(--font);
  font-weight:700
}

.one-project-details-val sup {
  font-size:.55em;
  font-weight:700;
  line-height:0;
  vertical-align:.7em
}

.one-project-details-note {
  display:flex;
  align-items:center;
  gap:34px;
  margin:12px 0 0;
  font-size:20px !important;
  line-height:1;
  color:var(--one-project-details-note)
}

.one-project-details-note b {
  font-family:var(--font-latin);
  font-size:30px;
  color:var(--one-project-details-note)
}

.one-project-details-pills {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
  margin-top:40px
}

.one-project-details-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  height:48px;
  padding:0 30px;
  border:1px solid var(--one-project-details-brown);
  border-radius:10px;
  white-space:nowrap;
  font-size:19px;
  line-height:1;
  color:var(--secondary);
  transition:background-color .2s var(--ease),color .2s var(--ease)
}

.one-project-details-pill:hover {
  background:var(--secondary);
  color:var(--surface)
}

.one-project-details-profile-text {
  max-width:560px;
  margin:40px auto 0;
  font-size:19px;
  line-height:1.35;
  text-align:center;
  color:var(--one-project-details-price)
}

.one-project-details-cta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:40px
}

.one-project-details-solid,.lead-form-submit {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 28px;
  border:0;
  border-radius:10px;
  white-space:nowrap;
  font-size:19px;
  line-height:1;
  color:var(--surface);
  transition:background-color .2s var(--ease),transform .2s var(--ease),filter .2s var(--ease)
}

.one-project-details-solid:hover,.lead-form-submit:hover {
  transform:translateY(-2px)
}

.one-project-details-solid.is-cocoa {
  background:linear-gradient(90deg,var(--one-project-details-cocoa-light),var(--one-project-details-cocoa-dark) 70%)
}

.one-project-details-solid.is-cocoa:hover {
  filter:brightness(1.15)
}

.one-project-details-solid.is-brown,.lead-form-submit {
  background:var(--one-project-details-brown)
}

.one-project-details-solid.is-brown:hover,.lead-form-submit:hover {
  background:var(--one-project-details-gold)
}

/* A short rule with a chevron leads the two buttons on desktop */
/* A short tan rule with a filled diamond at its far end leads the two buttons on desktop (as in the design) */
.one-project-details-cta-line {
  position:relative;
  display:none;
  width:55px;
  height:2px;
  background:var(--secondary-light)
}

.one-project-details-cta-line::after {
  content:'';
  position:absolute;
  top:50%;
  inset-inline-end:-4px;
  width:7px;
  height:7px;
  background:var(--secondary-light);
  transform:translateY(-50%) rotate(45deg)
}

/* Features and guarantees */
.one-project-details-features {
  position:relative;
  overflow:hidden;
  background:var(--projects-ivory)
}

.one-project-details-features-ornament {
  top:0;
  inset-inline-start:0;
  width:400px;
  height:400px;
  opacity:.03;
  background-position:80px -120px
}

.one-project-details-features-inner {
  position:relative;
  max-width:var(--page-width);
  margin-inline:auto;
  padding:48px 20px 64px
}

.one-project-details-features-box {
  display:grid;
  gap:20px 32px;
  margin:24px 0 0;
  padding:28px 24px;
  list-style:none;
  border:1px solid rgb(var(--secondary-rgb) / .8);
  border-radius:16px
}

.one-project-details-feature {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:19px;
  line-height:1;
  color:var(--one-project-details-bark)
}

.one-project-details-feature svg {
  width:30px;
  height:30px;
  flex-shrink:0;
  fill:none;
  stroke:var(--secondary-light);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}

/* CRM-sourced feature/guarantee icons: either a Blade Icons svg or a Font Awesome <i>, sized to match */
.one-project-details-feature-icon {
  width:30px;
  height:30px;
  flex-shrink:0
}

i.one-project-details-feature-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:var(--secondary-light)
}

.one-project-details-construction {
  margin-top:32px
}

.one-project-details-guarantees {
  margin-top:48px
}

.one-project-details-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  margin:0;
  padding:0 32px;
  border-radius:8px;
  background:var(--secondary);
  font-size:23px;
  font-weight:400;
  line-height:1;
  color:var(--surface)
}

/* Guarantee timeline: a circle per period; on desktop one rule runs behind all six circles */
.one-project-details-timeline {
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:40px;
  margin:32px 0 0;
  padding:0;
  list-style:none
}

.one-project-details-timeline::before {
  content:'';
  position:absolute;
  top:28px;
  inset-inline:8.33%;
  display:none;
  height:1px;
  background:var(--secondary-light)
}

.one-project-details-tl-item {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center
}

.one-project-details-tl-circle {
  position:relative;
  z-index:10;
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  border:1px solid var(--secondary-light);
  border-radius:50%;
  background:var(--projects-ivory);
  font-size:26px;
  line-height:1;
  color:var(--one-project-details-bark)
}

.one-project-details-tl-unit {
  margin-top:8px;
  font-size:17px;
  line-height:1;
  color:var(--secondary)
}

.one-project-details-tl-label {
  margin:12px 0 0;
  font-size:16px;
  line-height:1.45;
  color:var(--one-project-details-bark)
}

/* Units: navy surface, the unit sheet at the start and the floor plan at the end */
.one-project-details-units {
  position:relative;
  overflow:hidden;
  background:var(--primary);
  color:var(--surface)
}

.one-project-details-units-ornament {
  inset:0;
  opacity:.16;
  mix-blend-mode:screen;
  background-position:-160px 80px
}

.one-project-details-units-inner {
  position:relative;
  max-width:var(--page-width);
  margin-inline:auto;
  padding:48px 20px 64px
}

.one-project-details-units-grid {
  display:grid;
  gap:48px;
  margin-top:32px
}

.one-project-details-unit-panel {
  opacity:1;
  transition:opacity .3s ease
}

.one-project-details-unit-panel.is-fading {
  opacity:0
}

.one-project-details-unit-code-row {
  margin:0;
  text-align:center
}

.one-project-details-unit-code {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:200px;
  height:48px;
  border:1px solid var(--secondary);
  border-radius:999px;
  font-family:var(--font-latin);
  font-size:22px;
  letter-spacing:.025em;
  color:var(--surface)
}

.one-project-details-unit-list {
  display:grid;
  gap:16px;
  margin:24px 0 0
}

.one-project-details-unit-box {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:70px;
  padding:0 24px;
  border:1px solid rgb(var(--surface-rgb) / .9);
  border-radius:5px
}

.one-project-details-unit-box .one-project-details-lbl {
  font-size:20px;
  color:var(--surface)
}

.one-project-details-unit-box .one-project-details-val {
  font-size:24px;
  color:var(--surface)
}

.one-project-details-unit-price-row {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-top:24px
}

.one-project-details-unit-price-row > div {
  padding-top:30px
}

.one-project-details-unit-price {
  font-size:28px;
  color:var(--surface)
}

.one-project-details-unit-status {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  padding:0 22px;
  border:1px solid var(--secondary);
  border-radius:999px;
  font-size:17px;
  line-height:1;
  color:var(--surface)
}

.one-project-details-plan-stack {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  max-width:692px;
  margin-inline:auto
}

.one-project-details-unit-nav {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  color:var(--surface);
  transition:background-color .2s ease
}

.one-project-details-unit-nav:hover {
  background:rgb(var(--surface-rgb) / .1)
}

.one-project-details-unit-nav[aria-disabled=true] {
  cursor:default;
  background:transparent
}

.one-project-details-unit-nav .icon {
  width:30px;
  height:30px;
  stroke-width:2.4
}

.one-project-details-plan-frame {
  position:relative;
  width:100%;
  aspect-ratio:1600 / 1227;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 30px 60px -30px rgb(var(--black-rgb) / .6)
}

.one-project-details-plan-frame img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .5s var(--ease)
}

.one-project-details-plan-frame img.is-active {
  opacity:1
}

/* Location: the map inside a rounded ivory card with a navy notch at the top; it scrolls sideways on phones */
.one-project-details-location {
  position:relative;
  max-width:var(--page-width);
  margin-inline:auto;
  padding:16px 20px 40px
}

.one-project-details-map-shell {
  position:relative;
  margin-top:32px;
  overflow:hidden;
  border-radius:22px;
  background:var(--projects-ivory)
}

.one-project-details-map-notch {
  position:absolute;
  top:-1px;
  inset-inline:16%;
  z-index:10;
  display:none;
  height:32px;
  border-radius:0 0 26px 26px;
  background:var(--primary);
  pointer-events:none
}

.one-project-details-map-notch::before,.one-project-details-map-notch::after {
  content:'';
  position:absolute;
  top:0;
  width:26px;
  height:26px;
  background:var(--primary)
}

.one-project-details-map-notch::before {
  right:100%;
  -webkit-mask:radial-gradient(circle at 0 100%,transparent 26px,var(--black) 26.5px);
  mask:radial-gradient(circle at 0 100%,transparent 26px,var(--black) 26.5px)
}

.one-project-details-map-notch::after {
  left:100%;
  -webkit-mask:radial-gradient(circle at 100% 100%,transparent 26px,var(--black) 26.5px);
  mask:radial-gradient(circle at 100% 100%,transparent 26px,var(--black) 26.5px)
}

.one-project-details-map-scroll {
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none
}

.one-project-details-map-scroll::-webkit-scrollbar {
  display:none
}

.one-project-details-map-canvas {
  position:relative;
  width:860px;
  aspect-ratio:1400 / 647
}

.one-project-details-map-canvas > img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%
}

.one-project-details-map-canvas.has-map {
  width:100%
}

.one-project-details-map-canvas.has-map > img,.one-project-details-map-canvas.has-map > .one-project-details-map-pin {
  display:none
}

.one-project-details-leaflet {
  display:none
}

.one-project-details-map-canvas.has-map .one-project-details-leaflet {
  display:block
}

.one-project-details-map-pin.is-marker {
  position:static;
  transform:none
}

.one-project-details-map-pin.is-marker:hover {
  transform:scale(1.05)
}

.one-project-details-map-pin {
  position:absolute;
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgb(var(--primary-rgb) / .7);
  color:var(--surface);
  box-shadow:0 10px 15px -3px rgb(var(--black-rgb) / .1),0 4px 6px -4px rgb(var(--black-rgb) / .1);
  transition:transform .3s ease
}

.one-project-details-map-pin:hover {
  transform:translate(-50%,-50%) scale(1.05)
}

.one-project-details-map-pin svg {
  width:28px;
  height:28px;
  fill:currentColor
}

/* Scroll reveal (main.js adds .is-visible when a block enters the viewport) */
.one-project-details-reveal,.lead-form-reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)
}

.one-project-details-reveal.is-visible,.lead-form-reveal.is-visible {
  opacity:1;
  transform:none
}

@media(prefers-reduced-motion:reduce) {
  .one-project-details-reveal,.lead-form-reveal {
    opacity:1;
    transform:none;
    transition:none
  }
  .one-project-details-slide,.one-project-details-plan-frame img,.one-project-details-unit-panel {
    transition:none
  }
}

/* Three guarantee columns from 480px */
@media(min-width:480px) {
  .one-project-details-timeline {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

/* Tablet: wider gutters, two-column features and specs, the expand button appears */
@media(min-width:640px) {
  .one-project-details-hero-copy {
    padding-inline:32px
  }
  .one-project-details-hero-text {
    font-size:18px
  }
  .one-project-details-hero-logo {
    inset-inline-start:32px
  }
  .one-project-details-hero-expand {
    display:flex
  }
  .one-project-details-hero-dots {
    inset-inline-end:50%;
    transform:translateX(50%)
  }
  html[dir=ltr] .one-project-details-hero-dots {
    transform:translateX(-50%)
  }
  .one-project-details-media {
    aspect-ratio:16 / 10
  }
  .one-project-details-body {
    padding-inline:32px
  }
  .one-project-details-price {
    font-size:32px
  }
  .one-project-details-spec-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .one-project-details-features-inner,.one-project-details-units-inner,.one-project-details-location {
    padding-inline:32px
  }
  .one-project-details-features-box {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .one-project-details-map-canvas {
    width:1040px
  }
}

/* Desktop: the blocks sit at the positions measured from the design (1024px step) */
@media(min-width:1024px) {
  .one-project-details-hero {
    height:535px;
    min-height:0
  }
  .one-project-details-hero-copy {
    padding:96px 40px 45px
  }
  .one-project-details-hero-text {
    max-width:700px;
    font-size:23px;
    line-height:1.22
  }
  .one-project-details-hero-logo {
    bottom:40px;
    inset-inline-start:auto;
    inset-inline-end:60px;
    height:62px
  }
  .one-project-details-hero-expand {
    top:280px;
    inset-inline-end:auto;
    inset-inline-start:45px;
    width:46px;
    height:46px;
    transform:none
  }
  .one-project-details-hero-dots {
    bottom:34px;
    inset-inline-end:calc(50% - 30px);
    transform:none
  }
  html[dir=ltr] .one-project-details-hero-dots {
    transform:none
  }
  .one-project-details-grid {
    grid-template-columns:39% minmax(0,1fr);
    min-height:765px
  }
  .one-project-details-media {
    aspect-ratio:auto;
    height:100%
  }
  .one-project-details-mark {
    top:55px;
    inset-inline-start:30px;
    height:60px
  }
  .one-project-details-status {
    bottom:22px;
    inset-inline:28px
  }
  .one-project-details-status-item {
    font-size:21.6px
  }
  .one-project-details-ring {
    width:82px;
    height:82px
  }
  .one-project-details-ring-val {
    font-size:22px
  }
  .one-project-details-body {
    padding-top:155px;
    padding-bottom:0;
    padding-inline-start:78px;
    padding-inline-end:85px
  }
  .one-project-details-inner {
    max-width:715px;
    margin-inline-start:0
  }
  .one-project-details-actions {
    position:absolute;
    top:30px;
    inset-inline-end:80px;
    margin-bottom:0
  }
  .one-project-details-map-link {
    font-size:21.6px
  }
  .one-project-details-spec-grid {
    grid-template-columns:repeat(2,330px);
    gap:20px 14px;
    max-width:674px;
    margin-top:36px
  }
  .one-project-details-spec-box {
    height:74px;
    padding-inline:24px
  }
  .one-project-details-note {
    margin-top:14px
  }
  .one-project-details-lbl {
    font-size:21.6px
  }
  .one-project-details-val {
    font-size:24px
  }
  .one-project-details-note {
    font-size:19px
  }
  .one-project-details-pills {
    gap:25px;
    max-width:674px;
    margin-top:44px
  }
  .one-project-details-pill {
    height:50px;
    padding-inline:38px;
    font-size:21px
  }
  .one-project-details-profile-text {
    margin-top:52px;
    font-size:22.9px
  }
  .one-project-details-cta {
    gap:22px;
    margin-top:48px
  }
  .one-project-details-solid {
    height:48px;
    padding-inline:32px;
    font-size:21.6px
  }
  .one-project-details-cta-line {
    display:block
  }
  .one-project-details-sec-title {
    font-size:25px
  }
  .one-project-details-features-inner {
    padding:48px 80px 56px
  }
  .one-project-details-features-box {
    grid-template-columns:auto auto auto;
    justify-content:space-between;
    width:730px;
    max-width:100%;
    gap:30px 32px;
    margin-top:26px;
    padding:36px 48px
  }
  .one-project-details-feature {
    white-space:nowrap;
    font-size:21px
  }
  .one-project-details-construction {
    margin-top:30px
  }
  .one-project-details-guarantees {
    margin-top:50px
  }
  .one-project-details-badge {
    height:48px;
    padding-inline:54px;
    font-size:25px
  }
  /* The row runs from 215px to 1320px of the 1440 design; items are content-sized and spread out, each label flush with the start edge of its circle */
  .one-project-details-timeline {
    display:flex;
    justify-content:space-between;
    padding:0 135px 124px 40px;
    padding-inline:40px 135px;
    margin-top:38px
  }
  .one-project-details-timeline::before {
    display:block;
    inset-inline:68px 163px
  }
  .one-project-details-tl-item {
    align-items:flex-start;
    width:56px;
    text-align:start
  }
  .one-project-details-tl-circle {
    font-size:28px
  }
  .one-project-details-tl-unit {
    position:absolute;
    top:34px;
    inset-inline-start:64px;
    margin-top:0;
    font-size:18.3px;
    white-space:nowrap
  }
  .one-project-details-tl-label {
    position:absolute;
    top:76px;
    inset-inline-start:0;
    margin-top:0;
    font-size:19px;
    line-height:1.35;
    white-space:nowrap
  }
  .one-project-details-units-inner {
    padding:36px 80px 50px
  }
  .one-project-details-units-grid {
    grid-template-columns:330px minmax(0,1fr);
    column-gap:60px;
    margin-top:96px
  }
  .one-project-details-unit-code-row {
    text-align:start
  }
  .one-project-details-unit-code {
    font-size:24px
  }
  .one-project-details-unit-list {
    gap:20px;
    margin-top:48px
  }
  .one-project-details-unit-box {
    height:76px;
    padding-inline:24px
  }
  .one-project-details-unit-box .one-project-details-lbl {
    font-size:22.9px
  }
  .one-project-details-unit-box .one-project-details-val {
    font-size:28px
  }
  .one-project-details-unit-price {
    font-size:30px
  }
  .one-project-details-plan-col {
    margin-top:-27px;
    padding-inline-end:0
  }
  .one-project-details-plan-stack {
    align-items:flex-start;
    margin-inline-start:auto;
    margin-inline-end:33px
  }
  .one-project-details-unit-nav {
    margin-inline-start:82px
  }
  .one-project-details-location {
    padding:30px 20px 50px
  }
  .one-project-details-location-title {
    padding-inline-start:60px
  }
  .one-project-details-map-shell {
    margin-top:40px;
    border-radius:30px
  }
  .one-project-details-map-notch {
    display:block
  }
  .one-project-details-map-canvas {
    width:100%
  }
  .one-project-details-map-pin {
    width:72px;
    height:72px
  }
  .one-project-details-map-pin svg {
    width:32px;
    height:32px
  }
}

@media(min-width:1280px) {
  .one-project-details-units-grid {
    column-gap:100px
  }
}

/* The latin figures, prices and unit codes keep their font in English mode; the copy switches with the header */
html[dir=ltr] .one-project-details-page .one-project-details-hero-text,html[dir=ltr] .one-project-details-page .one-project-details-profile-text,html[dir=ltr] .one-project-details-page .one-project-details-tl-label {
  font-family:var(--font-latin)
}

/* =====================================================================
   Lead form pages (interest.html, appointment.html)
   The closing scene of the project design: a glass panel over the
   photo. Both pages share these rules under the lead-form- prefix and
   are scoped to body.interest-page / body.appointment-page; the shared
   header is fixed over the photo (main.js toggles .is-scrolled).
   ===================================================================== */
html:has(> body.interest-page),html:has(> body.appointment-page) {
  background:var(--primary);
  scroll-padding-top:24px
}

.interest-page,.appointment-page {
  min-height:100vh;
  overflow-x:hidden;
  background:var(--primary);
  color:var(--surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

.interest-page ::selection,.appointment-page ::selection {
  background:var(--secondary);
  color:var(--surface)
}

.interest-page :focus-visible,.appointment-page :focus-visible {
  outline:2px solid var(--secondary-light);
  outline-offset:2px
}

.interest-page .site-header,.appointment-page .site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
  color:var(--surface);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease)
}

.interest-page .site-header.is-scrolled,.appointment-page .site-header.is-scrolled {
  background:rgb(var(--primary-rgb) / .9);
  box-shadow:0 1px 0 0 rgb(var(--surface-rgb) / .08);
  backdrop-filter:blur(8px)
}

.interest-page .footer-brand-row,.appointment-page .footer-brand-row {
  display:none
}

.interest-page .site-footer,.appointment-page .site-footer {
  padding-top:63px;
  padding-bottom:94px
}

/* Scene: the closing photo under a navy shade that is solid at the top, where the header sits */
.lead-form-scene {
  position:relative;
  overflow:hidden;
  min-height:100vh;
  background:var(--primary);
  color:var(--surface)
}

.lead-form-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 70%
}

.lead-form-shade {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,rgb(var(--primary-rgb) / .96) 0%,rgb(var(--primary-rgb) / .55) 22%,rgb(var(--primary-rgb) / .1) 50%,rgb(var(--primary-rgb) / 0) 100%)
}

.lead-form-wrap {
  position:relative;
  max-width:var(--page-width);
  margin-inline:auto;
  padding:140px 20px 80px
}

/* Glass panel: translucent ivory with a short gold tab at the top */
.lead-form-panel {
  position:relative;
  max-width:535px;
  margin-inline:auto;
  padding:48px 24px 40px;
  border:1px solid rgb(var(--surface-rgb) / .1);
  background:rgb(var(--surface-rgb) / .2);
  box-shadow:0 30px 80px -40px rgb(var(--black-rgb) / .7);
  backdrop-filter:blur(14px)
}

.lead-form-panel::before {
  content:'';
  position:absolute;
  top:-5px;
  left:50%;
  width:220px;
  height:9px;
  transform:translateX(-50%);
  background:var(--secondary)
}

.lead-form-title {
  margin:0;
  font-size:30px;
  font-weight:400;
  line-height:1;
  color:var(--one-project-details-bark)
}

.lead-form-hint {
  margin:32px 0 0;
  font-size:17px;
  line-height:1;
  color:var(--one-project-details-bark)
}

.lead-form-fields {
  display:grid;
  gap:12px;
  margin-top:24px
}

.lead-form-fields.is-appointment {
  margin-top:28px
}

.lead-form-field {
  position:relative;
  display:flex;
  align-items:center;
  height:58px;
  background:var(--projects-ivory)
}

.lead-form-field input,.lead-form-field select {
  width:100%;
  min-width:0;
  height:100%;
  padding:0 20px;
  border:0;
  border-radius:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  font-size:18px;
  color:var(--one-project-details-bark)
}

.lead-form-field input::placeholder {
  color:rgb(var(--one-project-details-grey-rgb) / .8);
  opacity:1
}

.lead-form-field input:focus,.lead-form-field select:focus {
  outline:none
}

.lead-form-field select {
  padding-inline-end:56px;
  cursor:pointer;
  color:rgb(var(--one-project-details-grey-rgb) / .8)
}

.lead-form-field select.has-value {
  color:var(--one-project-details-bark)
}

.lead-form-field select option {
  color:var(--one-project-details-bark)
}

.lead-form-adorn {
  position:absolute;
  top:50%;
  inset-inline-end:20px;
  display:flex;
  align-items:center;
  gap:8px;
  transform:translateY(-50%);
  color:var(--secondary);
  pointer-events:none
}

.lead-form-adorn svg {
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round
}

.lead-form-adorn svg.is-small {
  width:20px;
  height:20px
}

/* Date and time: the native control is transparent until it has a value; the label spans the field */
.lead-form-field input[type=date],.lead-form-field input[type=time] {
  padding-inline-end:64px;
  color-scheme:light
}

.lead-form-field input[type=date]::-webkit-calendar-picker-indicator,.lead-form-field input[type=time]::-webkit-calendar-picker-indicator {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  cursor:pointer;
  opacity:0
}

.lead-form-field input.is-empty {
  color:transparent
}

.lead-form-field input.is-empty::-webkit-datetime-edit {
  color:transparent
}

.lead-form-ph {
  position:absolute;
  top:50%;
  inset-inline-start:20px;
  transform:translateY(-50%);
  font-size:18px;
  color:rgb(var(--one-project-details-grey-rgb) / .8);
  pointer-events:none
}

.lead-form-ph[hidden] {
  display:none
}

/* Phone: the flag and the country code sit at the end of the field */
.lead-form-phone {
  direction:inherit;
  padding-inline-end:120px!important
}

.lead-form-country {
  position:absolute;
  top:50%;
  inset-inline-end:16px;
  display:flex;
  align-items:center;
  gap:8px;
  transform:translateY(-50%)
}

.lead-form-country img {
  width:54px;
  height:36px;
  object-fit:cover
}

.lead-form-country select {
  width:auto;
  height:auto;
  padding:0;
  font-family:var(--font-latin);
  font-size:15px;
  color:var(--one-project-details-bark)
}

.lead-form-country svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:var(--secondary);
  stroke-width:1.6
}

.lead-form-field.is-invalid {
  box-shadow:0 0 0 2px rgb(var(--lead-form-invalid-rgb) / .7)
}

.lead-form-submit-row {
  display:flex;
  justify-content:flex-end;
  margin-top:20px
}

.lead-form-submit {
  height:56px;
  min-width:145px;
  border-radius:6px
}

.lead-form-note {
  margin:20px 0 0;
  font-size:17px;
  line-height:1.6;
  color:var(--surface)
}

.lead-form-note.is-interest {
  margin-top:32px
}

.lead-form-msg {
  margin:16px 0 0;
  font-size:16px;
  line-height:1.6;
  color:var(--surface)
}

.lead-form-msg.is-error {
  color:var(--lead-form-error)
}

@media(min-width:640px) {
  .lead-form-wrap {
    padding-inline:32px
  }
  .lead-form-panel {
    padding-inline:36px
  }
}

@media(min-width:1024px) {
  .lead-form-wrap {
    padding:220px 50px 240px
  }
  .lead-form-panel {
    padding:56px 38px 48px
  }
  .lead-form-title {
    font-size:34px
  }
  .lead-form-hint {
    margin-top:44px;
    font-size:19px
  }
  .lead-form-fields {
    margin-top:26px
  }
  .lead-form-fields.is-appointment {
    margin-top:34px
  }
  .lead-form-field {
    height:62px
  }
  .lead-form-field input,.lead-form-field select,.lead-form-ph {
    font-size:19px
  }
  .lead-form-submit {
    height:60px
  }
  .lead-form-note {
    font-size:18.3px
  }
  .lead-form-note.is-interest {
    margin-top:36px
  }
  .lead-form-submit-row {
    margin-top:20px
  }
}

html[dir=ltr] .lead-form-title,html[dir=ltr] .lead-form-note,html[dir=ltr] .lead-form-hint {
  font-family:var(--font-latin)
}

/* =====================================================================
   Contact page (contact-us.html)
   The contact design: the building photo under a navy tint with the
   greeting and the glass enquiry form, then the three ways to reach us
   and the international callers note. Every rule is scoped to
   body.contact-us-page and every class is prefixed `contact-us-`; the
   shared header is fixed over the photo (main.js toggles .is-scrolled).
   ===================================================================== */
html:has(> body.contact-us-page) {
  background:var(--primary);
  scroll-padding-top:90px
}

.contact-us-page {
  min-height:100vh;
  overflow-x:hidden;
  background:var(--primary);
  color:var(--surface);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

.contact-us-page ::selection {
  background:var(--secondary);
  color:var(--surface)
}

.contact-us-page :focus-visible {
  outline:2px solid var(--secondary-light);
  outline-offset:2px
}

.contact-us-page .contact-us-panel :focus-visible {
  outline-color:var(--secondary);
  outline-offset:0
}

.contact-us-page .site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:30;
  color:var(--surface);
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease)
}

.contact-us-page .site-header.is-scrolled {
  background:rgb(var(--primary-rgb) / .9);
  box-shadow:0 1px 0 0 rgb(var(--surface-rgb) / .08);
  backdrop-filter:blur(8px)
}

/* The contact design closes with the footer's newsletter and links only, without the seal row */
.contact-us-page .footer-brand-row {
  display:none
}

.contact-us-page .site-footer {
  padding-top:63px;
  padding-bottom:94px
}

/* Line breaks of the design that only apply from a given width */
.contact-us-br-desktop,.contact-us-br-tablet {
  display:none
}

/* Hero: the photo, its tint and the shade that fades the base back to navy */
.contact-us-hero {
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--primary);
  color:var(--surface)
}

.contact-us-hero-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% 100%
}

/* Measured from the design: the sky is almost solid navy at the top, the building stays clear, the base fades back to navy */
.contact-us-hero-tint {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,rgb(var(--primary-rgb) / .92) 0%,rgb(var(--primary-rgb) / .62) 22%,rgb(var(--primary-rgb) / .2) 48%,rgb(var(--primary-rgb) / .12) 78%,rgb(var(--primary-rgb) / .55) 100%)
}

.contact-us-hero-shade {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:140px;
  pointer-events:none;
  background:linear-gradient(to top,rgb(var(--primary-rgb) / 1) 0%,rgb(var(--primary-rgb) / .55) 45%,rgb(var(--primary-rgb) / 0) 100%)
}

.contact-us-hero-inner {
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:column;
  gap:40px;
  max-width:var(--page-width);
  margin-inline:auto;
  padding:118px 20px 56px
}

.contact-us-hero-intro {
  text-align:start
}

.contact-us-hero-title {
  margin:0;
  white-space:nowrap;
  font-size:36px;
  font-weight:500;
  line-height:1;
  color:var(--secondary-light)
}

.contact-us-hero-sub {
  margin:12px 0 0;
  font-size:18px;
  line-height:1.375;
  color:rgb(var(--surface-rgb) / .95)
}

/* Glass panel: translucent ivory with a short gold tab at the top */
.contact-us-panel {
  position:relative;
  width:100%;
  max-width:512px;
  padding:52px 20px 32px;
  background:rgb(var(--surface-rgb) / .14);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px)
}

.contact-us-panel::before {
  content:'';
  position:absolute;
  top:-4px;
  left:50%;
  width:44%;
  height:11px;
  transform:translateX(-50%);
  background:var(--secondary)
}

.contact-us-panel-title {
  margin:0;
  font-size:21px;
  font-weight:400;
  line-height:1.3;
  color:var(--surface)
}

.contact-us-fields {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:28px
}

.contact-us-field {
  position:relative
}

.contact-us-input {
  display:block;
  width:100%;
  height:58px;
  padding:0 24px;
  border:0;
  border-radius:0;
  background:var(--projects-ivory);
  font:inherit;
  direction:inherit;
  font-size:18px;
  color:var(--primary)
}

.contact-us-input::placeholder {
  color:var(--project-details-mute);
  opacity:1
}

.contact-us-input:focus {
  outline:none;
  box-shadow:0 0 0 2px rgb(var(--secondary-rgb) / .7)
}

.contact-us-input[aria-invalid=true] {
  box-shadow:0 0 0 2px rgb(var(--lead-form-invalid-rgb) / .7)
}

textarea.contact-us-input {
  height:150px;
  padding-top:14px;
  padding-bottom:14px;
  resize:none;
  line-height:1.35
}

.contact-us-field-error {
  display:none;
  margin:6px 0 0;
  font-size:14px;
  line-height:1;
  color:var(--contact-us-error)
}

.contact-us-field-error.is-visible {
  display:block
}

/* Phone: the flag (or the dial code) and a chevron sit at the end of the field over an invisible select */
.contact-us-field.has-country .contact-us-input {
  padding-inline-end:112px
}

.contact-us-country {
  position:absolute;
  top:50%;
  inset-inline-end:14px;
  display:flex;
  align-items:center;
  gap:8px;
  height:40px;
  transform:translateY(-50%)
}

.contact-us-country-flag {
  display:block;
  width:52px;
  height:35px;
  overflow:hidden;
  border-radius:3px;
  background:var(--contact-us-flag);
  box-shadow:0 0 0 1px rgb(var(--primary-rgb) / .08)
}

.contact-us-country-flag img {
  width:100%;
  height:100%;
  object-fit:cover
}

.contact-us-country-code {
  display:none;
  align-items:center;
  justify-content:center;
  min-width:52px;
  height:35px;
  padding:0 8px;
  border-radius:3px;
  background:var(--primary);
  font-family:var(--font-latin);
  font-size:15px;
  letter-spacing:.025em;
  color:var(--surface)
}

.contact-us-country.is-generic .contact-us-country-flag {
  display:none
}

.contact-us-country.is-generic .contact-us-country-code {
  display:flex
}

.contact-us-country > svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:var(--project-details-mute);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}

.contact-us-country select {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  cursor:pointer;
  opacity:0
}

.contact-us-honeypot {
  position:absolute;
  top:0;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden
}

.contact-us-submit-row {
  display:flex;
  justify-content:flex-end;
  margin-top:7px
}

.contact-us-send {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:58px;
  padding:0;
  border:0;
  border-radius:0;
  background:var(--secondary);
  font-size:19px;
  font-weight:500;
  line-height:1;
  color:var(--surface);
  cursor:pointer;
  transition:background-color .2s var(--ease)
}

.contact-us-send:hover {
  background:var(--project-details-gold)
}

.contact-us-send:disabled {
  cursor:wait;
  opacity:.7
}

.contact-us-panel-note {
  margin:24px 0 0;
  font-size:16px;
  line-height:1.375;
  color:var(--primary)
}

.contact-us-status {
  margin:12px 0 0;
  font-size:16px;
  line-height:1.375;
  color:var(--surface)
}

.contact-us-status[hidden] {
  display:none
}

.contact-us-status.is-error {
  color:var(--lead-form-error)
}

.contact-us-status.is-success {
  color:var(--success)
}

/* Ways to reach us */
.contact-us-reach {
  background:var(--primary);
  color:var(--surface)
}

.contact-us-reach-head {
  max-width:1314px;
  margin-inline:auto;
  padding:56px 20px 0;
  text-align:center
}

.contact-us-section-title {
  display:inline-flex;
  align-items:center;
  gap:16px;
  margin:0;
  font-size:30px;
  font-weight:500;
  line-height:1;
  color:var(--secondary-light)
}

.contact-us-rule {
  display:block;
  width:26px;
  height:1px;
  background:var(--secondary-light)
}

.contact-us-reach-intro {
  max-width:640px;
  margin:12px auto 0;
  font-size:18px;
  line-height:1.3
}

.contact-us-ways-band {
  margin-top:32px;
  border-top:1px solid rgb(var(--secondary-rgb) / .4)
}

.contact-us-ways {
  display:grid;
  gap:48px;
  max-width:1314px;
  margin-inline:auto;
  padding:36px 20px 40px
}

.contact-us-way {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center
}

.contact-us-way-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border:1px solid rgb(var(--surface-rgb) / .85);
  border-radius:50%;
  color:var(--surface);
  transition:color .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease)
}

.contact-us-way-icon svg {
  width:22px;
  height:22px;
  fill:currentColor
}

.contact-us-way-icon img {
  width:22px;
  height:22px;
  object-fit:contain
}

.contact-us-way-icon.is-solid img {
  width:44px;
  height:44px
}

.contact-us-way-icon.is-solid {
  border-color:var(--surface);
  background:var(--surface);
  color:var(--primary)
}

.contact-us-way-icon.is-solid svg {
  width:44px;
  height:44px
}

.contact-us-way:hover .contact-us-way-icon {
  border-color:var(--secondary-light);
  color:var(--secondary-light)
}

.contact-us-way:hover .contact-us-way-icon.is-solid {
  background:var(--secondary-light);
  color:var(--primary)
}

.contact-us-way-title {
  margin:10px 0 0;
  font-size:24px;
  font-weight:500;
  line-height:1;
  color:var(--secondary-light)
}

.contact-us-way-text {
  max-width:400px;
  margin:10px 0 0;
  font-size:18px;
  line-height:1.25;
  color:var(--surface)
}

.contact-us-way-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:10px;
  padding:0 8px 5px;
  border-bottom:1px solid rgb(var(--secondary-rgb) / .6);
  font-size:17.6px;
  line-height:1;
  color:var(--secondary-light);
  text-decoration:none;
  transition:color .2s var(--ease),border-color .2s var(--ease)
}

.contact-us-way-link:hover {
  border-color:var(--secondary-light);
  color:var(--surface)
}

.contact-us-arrow {
  font-size:13px;
  color:rgb(var(--secondary-light-rgb) / .8)
}

/* International callers note */
.contact-us-intl-band {
  border-top:1px solid rgb(var(--secondary-rgb) / .4);
  border-bottom:1px solid rgb(var(--secondary-rgb) / .4)
}

.contact-us-intl {
  max-width:1314px;
  margin-inline:auto;
  padding:16px 20px
}

.contact-us-intl p {
  margin:0;
  font-size:18px;
  line-height:1.3
}

.contact-us-intl-link {
  font-weight:700;
  color:inherit;
  text-decoration:none;
  transition:color .2s var(--ease)
}

.contact-us-intl-link:hover {
  color:var(--secondary-light)
}

/* Scroll reveal: blocks fade up as they enter the viewport (main.js adds .is-visible, never leaves them hidden) */
.contact-us-reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)
}

.contact-us-reveal.is-visible {
  opacity:1;
  transform:none
}

@media(prefers-reduced-motion:reduce) {
  .contact-us-reveal {
    opacity:1;
    transform:none;
    transition:none
  }
  .contact-us-page .site-header,.contact-us-send,.contact-us-way-icon,.contact-us-way-link,.contact-us-intl-link {
    transition:none
  }
}

@media(min-width:640px) {
  .contact-us-hero-inner {
    padding-inline:32px
  }
  .contact-us-hero-title {
    font-size:42px
  }
  .contact-us-hero-sub {
    font-size:20px
  }
  .contact-us-panel {
    padding-inline:32px
  }
  .contact-us-panel-title {
    font-size:23px
  }
  .contact-us-input {
    height:62px;
    padding-inline:44px;
    font-size:19px
  }
  textarea.contact-us-input {
    height:168px
  }
  .contact-us-country {
    inset-inline-end:19px
  }
  .contact-us-send {
    width:152px;
    height:62px
  }
  .contact-us-panel-note {
    font-size:18px
  }
  .contact-us-reach-head,.contact-us-ways,.contact-us-intl {
    padding-inline:32px
  }
  .contact-us-section-title {
    font-size:34px
  }
}

@media(min-width:768px) {
  .contact-us-br-tablet {
    display:inline
  }
  .contact-us-ways {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
  }
}

@media(min-width:1024px) {
  .contact-us-br-desktop {
    display:inline
  }
  .contact-us-hero-bg {
    object-position:50% 100%
  }
  .contact-us-hero-inner {
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    gap:32px;
    min-height:1034px;
    padding:222px 64px 40px
  }
  .contact-us-hero-intro {
    max-width:360px
  }
  .contact-us-hero-title {
    font-size:45px
  }
  .contact-us-hero-sub {
    margin-top:10px;
    white-space:nowrap
  }
  .contact-us-panel {
    width:440px;
    max-width:none;
    margin-top:62px;
    padding:59px 31px 31px
  }
  .contact-us-panel-title {
    font-size:23.8px;
    line-height:1.2
  }
  .contact-us-panel-note {
    margin-top:29px
  }
  .contact-us-reach-head {
    padding:72px 0 0
  }
  .contact-us-section-title {
    font-size:38px
  }
  .contact-us-rule {
    width:30px
  }
  .contact-us-reach-intro {
    font-size:19px;
    line-height:1.25
  }
  .contact-us-ways-band {
    margin-top:22px
  }
  .contact-us-ways {
    padding:33px 0 31px
  }
  .contact-us-way-title {
    font-size:26px
  }
  .contact-us-way-text {
    font-size:19px
  }
  .contact-us-intl {
    padding-inline:46px
  }
  .contact-us-intl p {
    width:400px;
    margin-inline-start:auto;
    font-size:19px;
    line-height:1.25
  }
}

@media(min-width:1280px) {
  .contact-us-hero-inner {
    padding-inline-start:257px;
    padding-inline-end:117px
  }
  .contact-us-hero-intro {
    max-width:440px
  }
  .contact-us-panel {
    width:512px
  }
}

/* The headings keep the Latin face in English mode, like the rest of the site */
/* The English subtitle is longer than the Arabic one and wraps under the greeting instead of running under the panel */
html[dir=ltr] .contact-us-hero-sub {
  white-space:normal
}

html[dir=ltr] .contact-us-hero-title,html[dir=ltr] .contact-us-section-title,html[dir=ltr] .contact-us-way-title {
  font-family:var(--font-latin)
}

/* =====================================================================
   About page (about-us.html)
   The "عن رُصافة" design: the project render with the slogan, the sand
   section with the company stamp, the four key figures, the intro and the
   profile book, then the "why Rusafah" values, the certificate cards and
   the success partners. Every rule is scoped to body.about-us-page and
   every class is prefixed `about-us-`; the shared header is fixed over the
   photo (main.js toggles .is-scrolled). Breakpoints follow the source
   Tailwind build: 480, 640, 768, 1024 and 1280px.
   ===================================================================== */
html:has(> body.about-us-page) {
  background:var(--about-us-sand);
  scroll-padding-top:90px
}

.about-us-page {
  min-height:100vh;
  overflow-x:hidden;
  background:var(--about-us-sand);
  color:var(--primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}

.about-us-page ::selection {
  background:var(--secondary);
  color:var(--surface)
}

.about-us-page :focus-visible {
  outline:2px solid var(--secondary);
  outline-offset:2px
}

.about-us-page .site-header :focus-visible,.about-us-page .about-us-hero :focus-visible,.about-us-page .about-us-why :focus-visible,.about-us-page .about-us-partners :focus-visible,.about-us-page .site-footer :focus-visible,.about-us-page .site-dialog :focus-visible {
  outline-color:var(--secondary-light)
}

.about-us-page .site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:40;
  color:var(--surface);
  transition:background-color .3s var(--about-us-ease),box-shadow .3s var(--about-us-ease)
}

.about-us-page .site-header.is-scrolled {
  background:rgb(var(--primary-rgb) / .9);
  box-shadow:0 1px 0 0 rgb(var(--surface-rgb) / .08);
  backdrop-filter:blur(8px)
}

/* The about design closes with the footer's newsletter and links only, without the seal row */
.about-us-page .footer-brand-row {
  display:none
}

.about-us-page .site-footer {
  padding-top:63px;
  padding-bottom:94px
}

/* Hero: the render under the fixed header, the slogan and the floating buttons */
.about-us-hero {
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  width:100%;
  min-height:560px;
  overflow:hidden;
  background:var(--primary);
  color:var(--surface)
}

.about-us-hero-bg {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 100%
}

.about-us-hero-copy {
  position:relative;
  z-index:10;
  margin-top:150px;
  padding-inline:20px;
  text-align:center
}

.about-us-hero-title {
  white-space:nowrap;
  font-size:clamp(44px,9vw,72px);
  font-weight:400;
  line-height:1
}

.about-us-hero-sub {
  margin-top:18px;
  font-size:clamp(20px,4.2vw,35px);
  line-height:1;
  color:var(--secondary)
}

/* Shared pieces: the page shell, the pill titles and the brown button with its diamond lead */
.about-us-shell {
  width:100%;
  max-width:var(--page-width);
  margin-inline:auto;
  padding-inline:20px
}

.about-us-shell.is-centered {
  text-align:center
}

.about-us-pill-title {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding-inline:38px;
  border-radius:10px;
  background:rgb(var(--about-us-teal-rgb) / .2);
  font-size:22px;
  font-weight:400;
  line-height:1;
  color:var(--surface)
}

.about-us-pill-title.is-brown {
  height:50px;
  padding-inline:40px;
  background:linear-gradient(to left,var(--one-project-details-cocoa-dark) 0%,var(--about-us-cocoa) 45%,var(--about-us-cocoa-light) 100%);
  box-shadow:0 10px 24px -14px rgb(var(--about-us-cocoa-dark-rgb) / .9)
}

.about-us-btn-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:53px;
  padding-inline:40px;
  border-radius:10px;
  background:linear-gradient(to left,var(--one-project-details-cocoa-dark) 0%,var(--about-us-cocoa) 45%,var(--about-us-cocoa-light) 100%);
  font-size:22px;
  line-height:1;
  color:var(--surface);
  box-shadow:0 12px 28px -16px rgb(var(--about-us-cocoa-dark-rgb) / .9);
  transition:transform .3s var(--about-us-ease),box-shadow .3s var(--about-us-ease),filter .3s var(--about-us-ease)
}

.about-us-btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 18px 34px -16px rgb(var(--about-us-cocoa-dark-rgb) / .95);
  filter:brightness(1.1)
}

/* Diamond + rule on the start side of the button, measured on the 1440px design: the rule runs 59px from the column
   edge to the centre of the 8.5px diamond, which sits 16px before the button */
.about-us-btn-lead {
  position:relative;
  display:inline-block;
  padding-inline-start:79px
}

.about-us-btn-lead::before {
  content:'';
  position:absolute;
  inset-inline-start:51px;
  top:50%;
  width:8.5px;
  height:8.5px;
  transform:translate(0,-50%) rotate(45deg);
  background:var(--secondary-light)
}

.about-us-btn-lead::after {
  content:'';
  position:absolute;
  inset-inline-start:0;
  top:50%;
  width:59px;
  height:1.7px;
  transform:translateY(-50%);
  background:var(--secondary-light)
}

/* About: the calligraphy ornament in the top-left corner, the title, the stamp and the figures, then the intro and the book */
.about-us-about {
  position:relative;
  overflow:hidden;
  padding:26px 0 64px;
  background:var(--about-us-sand)
}

.about-us-about-ornament {
  position:absolute;
  top:0;
  left:0;
  width:92%;
  max-width:1000px;
  pointer-events:none;
  user-select:none
}

.about-us-about-shell {
  position:relative
}

.about-us-about-title {
  position:relative;
  text-align:start;
  font-size:34px;
  font-weight:500;
  line-height:1;
  color:var(--about-us-teal)
}

.about-us-figures {
  display:flex;
  flex-direction:column;
  gap:28px;
  margin-top:36px
}

.about-us-stamp-wrap {
  display:flex;
  align-items:flex-start;
  gap:32px
}

.about-us-stamp {
  display:block;
  width:170px;
  height:170px
}

.about-us-divider {
  display:none;
  width:1px;
  align-self:stretch;
  background:var(--secondary-light)
}

.about-us-stats {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:36px;
  flex:1 1 0%
}

.about-us-stats > div {
  text-align:center
}

.about-us-stat-num {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  font-size:34px;
  font-weight:700;
  line-height:1;
  color:var(--project-details-gold)
}

.about-us-stat-num.is-latin {
  font-family:var(--font-latin);
  font-size:36px
}

.about-us-stat-sign {
  font-weight:300
}

.about-us-stat-word {
  font-weight:500
}

.about-us-latin {
  font-family:var(--font-latin)
}

.about-us-stat-num small {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:18px;
  font-weight:500
}

.about-us-stat-num small img {
  position:relative;
  top:-1px;
  width:auto;
  height:15px
}

.about-us-stat-num sup {
  position:relative;
  top:-.55em;
  vertical-align:baseline;
  font-size:.5em;
  line-height:0
}

.about-us-stat-label {
  margin:10px 0 0;
  font-size:19px;
  line-height:1.25;
  color:var(--primary);
  font-weight: 400;
}

.about-us-intro {
  display:grid;
  gap:48px;
  margin-top:64px
}

.about-us-sub {
  text-align:center;
  font-size:22px;
  font-weight:400;
  line-height:1;
  color:var(--secondary)
}

.about-us-text {
  margin-top:26px;
  font-size:19px;
  line-height:1.35;
  color:var(--primary)
}

.about-us-cta {
  margin-top:40px
}

.about-us-book {
  display:block;
  width:100%;
  max-width:530px;
  height:auto;
  margin-inline:auto;
  user-select:none
}

/* Why Rusafah: the navy band with the pill title, the statement and the four values */
.about-us-why {
  padding:56px 0;
  background:var(--primary);
  color:var(--surface)
}

.about-us-why-text {
  max-width:580px;
  margin:14px auto 0;
  text-align:center;
  font-size:19px;
  line-height:1.4;
  color:var(--about-us-body)
}

.about-us-why-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  row-gap:40px;
  max-width:1152px;
  margin:48px auto 0;
  list-style:none
}

.about-us-why-item {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding-inline:12px;
  text-align:center
}

/* Hairline on the end side of each value from the desktop layout up; the last one has none */
.about-us-why-item::after {
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  inset-inline-end:0;
  display:none;
  width:1px;
  background:rgb(var(--secondary-light-rgb) / .8)
}

.about-us-why-item img {
  width:auto;
  height:56px
}

.about-us-why-item span {
  white-space:nowrap;
  font-size:21px;
  line-height:1;
  color:var(--secondary)
}

/* Certificates: two columns of labelled cards on the sand */
.about-us-certs {
  padding:48px 0 64px;
  background:var(--about-us-sand)
}

.about-us-certs-head {
  text-align:center
}

.about-us-certs-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:32px 67px;
  max-width:1029px;
  margin:36px auto 0
}

.about-us-cert-label {
  display:block;
  text-align:start;
  font-size:20px;
  line-height:1;
  color:var(--secondary)
}

.about-us-cert-card {
  display:block;
  width:100%;
  margin-top:17px;
  overflow:hidden;
  background:var(--about-us-paper);
  box-shadow:0 1px 0 0 rgb(var(--primary-rgb) / .04);
  transition:box-shadow .3s var(--about-us-ease)
}

.about-us-cert-card:hover {
  box-shadow:0 16px 34px -24px rgb(var(--primary-rgb) / .5)
}

.about-us-cert-card.is-white {
  background:var(--white)
}

.about-us-cert-card img {
  display:block;
  width:100%;
  height:auto
}

.about-us-cert-card + .about-us-cert-label {
  margin-top:9px
}

/* Success partners: four square logo tiles on the navy */
.about-us-partners {
  padding:56px 0 40px;
  background:var(--primary);
  color:var(--surface)
}

.about-us-partners-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
  max-width:837px;
  margin:32px auto 0;
  list-style:none
}

.about-us-partner {
  display:block;
  aspect-ratio:1;
  overflow:hidden;
  border-radius:2px;
  background:var(--about-us-panel);
  transition:transform .3s var(--about-us-ease)
}

.about-us-partner:hover {
  transform:translateY(-4px)
}

.about-us-partner img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

/* Scroll reveal: blocks fade up as they enter the viewport (main.js adds .is-visible, never leaves them hidden) */
.about-us-reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--about-us-ease),transform .7s var(--about-us-ease)
}

.about-us-reveal.is-visible {
  opacity:1;
  transform:none
}

@media(prefers-reduced-motion:reduce) {
  .about-us-reveal {
    opacity:1;
    transform:none;
    transition:none
  }
  .about-us-page .site-header,.about-us-btn-primary,.about-us-cert-card,.about-us-partner {
    transition:none
  }
}

@media(min-width:480px) {
  .about-us-stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:32px
  }
}

/* Narrow screens: a shorter lead and tighter button padding keep the profile button on one line */
@media(max-width:639px) {
  .about-us-btn-lead {
    padding-inline-start:48px
  }
  .about-us-btn-lead::before {
    inset-inline-start:24px
  }
  .about-us-btn-lead::after {
    width:28px
  }
  .about-us-btn-primary {
    padding-inline:28px;
    white-space:nowrap
  }
}

@media(min-width:640px) {
  .about-us-hero {
    min-height:620px
  }
  .about-us-hero-copy {
    margin-top:180px
  }
  .about-us-shell {
    padding-inline:32px
  }
  .about-us-pill-title {
    font-size:23.6px
  }
  .about-us-btn-primary {
    font-size:24px
  }
  .about-us-about-title {
    font-size:41px
  }
  .about-us-stamp {
    width:200px;
    height:200px
  }
  .about-us-stats {
    column-gap:60px
  }
  .about-us-stat-num {
    font-size:42px
  }
  .about-us-stat-num.is-latin {
    font-size:45px
  }
  .about-us-stat-num small {
    font-size:23px
  }
  .about-us-stat-num small img {
    height:19px
  }
  .about-us-stat-label {
    margin-top:14px;
    font-size:23.8px
  }
  .about-us-sub {
    font-size:26px
  }
  .about-us-text {
    margin-top:32px;
    font-size:22px;
    line-height:1.22
  }
  .about-us-about-ornament {
    width:70%
  }
  .about-us-why-text {
    font-size:22px;
    line-height:1.22
  }
  .about-us-why-item img {
    height:64px
  }
  .about-us-why-item span {
    font-size:25px
  }
  .about-us-cert-label {
    font-size:22px
  }
  .about-us-partners-grid {
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
}

@media(min-width:768px) {
  .about-us-certs-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(min-width:1024px) {
  .about-us-hero {
    aspect-ratio:1440/645;
    min-height:0
  }
  .about-us-hero-copy {
    margin-top:26.5%
  }
  .about-us-hero-sub {
    margin-top:22px
  }
  .about-us-shell {
    padding-inline:90px
  }
  /* About section, measured on the 1440px design: title glyphs at y 701, figures row (divider) at y 777–1084,
     stamp ring 200px ending 3px past the column edge, stats rows 163px apart, intro heading at y 1186,
     button at y 1422–1474, book at x 172–658 / y 1166, navy band at y 1648 */
  .about-us-about {
    padding:54px 0 147px
  }
  .about-us-about-ornament {
    width:69.5%
  }
  .about-us-figures {
    flex-direction:row;
    align-items:flex-start;
    gap:64px;
    margin-top:33px
  }
  .about-us-stamp-wrap {
    display:contents
  }
  .about-us-stamp {
    flex-shrink:0;
    width:242px;
    height:242px;
    margin-top:36px;
    margin-inline-start:-24px
  }
  .about-us-divider {
    display:block;
    align-self:flex-start;
    height:307px
  }
  .about-us-stats {
    flex:0 0 726px;
    grid-template-columns:260px 400px;
    column-gap:66px;
    row-gap:72px;
    max-width:726px;
    margin-top:16px
  }
  .about-us-stat-label {
    margin-top:16px
  }
  .about-us-stat-label.is-nowrap {
    white-space:nowrap;
    font-size:22.6px
  }
  .about-us-intro {
    grid-template-columns:528px 530px;
    justify-content:start;
    gap:100px;
    margin-top:101px
  }
  .about-us-text {
    margin-top:27px;
    text-align:justify
  }
  .about-us-cta {
    margin-top:77px
  }
  .about-us-cta .about-us-btn-primary {
    padding-inline:20px
  }
  .about-us-book {
    max-width:none;
    margin-top:-34px;
    margin-inline:0
  }
  .about-us-why {
    padding:56px 0 62px
  }
  .about-us-why-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    row-gap:0;
    margin-top:72px
  }
  .about-us-why-item {
    height:83px;
    justify-content:flex-end
  }
  .about-us-why-item::after {
    display:block
  }
  .about-us-why-item:last-child::after {
    display:none
  }
  .about-us-why-item img {
    height:72px
  }
  .about-us-certs {
    padding:70px 0 63px
  }
  .about-us-certs-grid {
    margin-top:51px
  }
  .about-us-partners {
    padding:118px 0 40px
  }
  .about-us-partners-grid {
    margin-top:28px
  }
}

@media(min-width:1280px) {
  .about-us-hero-copy {
    margin-top:190px
  }
  .about-us-shell {
    padding-inline:130px
  }
}

/* The headings keep the Latin face in English mode, like the rest of the site */
html[dir=ltr] .about-us-hero-title,html[dir=ltr] .about-us-about-title,html[dir=ltr] .about-us-pill-title,html[dir=ltr] .about-us-sub {
  font-family:var(--font-latin)
}

html[dir=ltr] .about-us-text {
  text-align:start
}