/* SRAI — style.css
   A full-bleed hero, then a courtyard of stones on one grid.
   1 Fonts  2 Tokens  3 Base  4 Primitives  5 Header  6 Hero  7 Courtyard and stones
   8 Slabs and lists  9 Contact and form  10 Footer  11 Layouts  12 Arabic  13 Motion */

/* 1. Fonts (self-hosted, latin subsets; SIL Open Font License) ----------- */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/eb-garamond-400.woff2") format("woff2");
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("assets/fonts/dm-sans.woff2") format("woff2");
}
@font-face { font-family: 'Garamond Fallback'; src: local('Georgia'); size-adjust: 86%; }
/* Arabic subsets only, so Latin text on the Arabic page falls through to DM Sans and EB Garamond. */
@font-face {
  font-family: 'Amiri';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/amiri-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/plex-sans-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/plex-sans-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC;
}

/* 2. Tokens -------------------------------------------------------------- */
:root {
  --navy: #092737;
  --navy-deep: #061a25;     /* body, joints between stones, footer */
  --blue: #10384c;
  --cream: #ede7dc;
  --cream-bright: #f7f3ec;
  --ink: #133144;
  --ink-2: #4b5f6b;         /* secondary text on cream */
  --cream-2: #c7c9c3;       /* warm secondary text on navy */
  --gold: #d3af70;
  --gold-bright: #e8cb95;
  --gold-ink: #806032;
  --line-on-dark: rgba(211, 175, 112, 0.3);
  --line-on-light: rgba(128, 96, 50, 0.25);

  --font-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'EB Garamond', 'Garamond Fallback', Georgia, 'Times New Roman', Times, serif;
  --font-ar-sans: 'IBM Plex Sans Arabic', 'DM Sans', 'Geeza Pro', system-ui, sans-serif;
  --font-ar-serif: 'Amiri', 'EB Garamond', 'Garamond Fallback', 'Geeza Pro', serif;

  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lead: 1.1875rem;
  --text-h3: 1.1875rem;
  --text-h2: clamp(2rem, 1.3rem + 1.8vw, 2.75rem);
  --text-h1: clamp(2.75rem, 1.5rem + 4.1vw, 4.875rem);

  --container: 1280px;
  --max: 1600px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --gap: 2rem;
  --joint: 1px;
  --pad: clamp(1.5rem, 2.8vw, 2.75rem);
  --header-h: 5rem;
}

/* Each stone sets its own surface; everything on it reads these. */
.night { --ground: var(--navy); --fg: var(--cream); --muted: var(--cream-2); --line: var(--line-on-dark); --focus: var(--gold); --underline: rgba(207, 179, 134, 0.7); --accent: var(--gold); }
.sun   { --ground: var(--cream); --fg: var(--ink); --muted: var(--ink-2); --line: var(--line-on-light); --focus: var(--gold-ink); --underline: rgba(128, 96, 50, 0.55); --accent: var(--gold-ink); }

/* 3. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.menu-locked { overflow: hidden; touch-action: none; }
body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--cream);
  font: 400 var(--text-base) / 1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2 { font-family: var(--font-serif); font-weight: 400; text-wrap: balance; }
h1 { font-size: var(--text-h1); line-height: 1.02; }
h2 { font-size: var(--text-h2); line-height: 1.1; }
p { text-wrap: pretty; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus, var(--gold)); outline-offset: 4px; }
section { scroll-margin-top: var(--header-h); }
[lang="ar"] { font-family: var(--font-ar-sans); }

/* 4. Primitives ---------------------------------------------------------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; inset-inline-start: 1rem; z-index: 100; padding: 0.75rem 1rem; background: var(--cream); color: var(--ink); }
.skip-link:focus { top: 1rem; }

.lead { font-size: var(--text-lead); line-height: 1.55; color: var(--muted, var(--cream-2)); max-width: 34em; }
.eyebrow {
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--accent, var(--gold));
  font: 500 0.6875rem / 1.5 var(--font-sans);
  letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.eyebrow::before { content: ''; width: 2rem; height: 1px; flex: 0 0 2rem; background: currentColor; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 2rem;
  min-height: 3rem; padding: 0 1.5rem;
  background: var(--gold); color: var(--navy-deep);
  border: 1px solid var(--gold);
  font-weight: 500; text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}
.button:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.sun .button { background: var(--navy); color: var(--gold-bright); border-color: var(--navy); }
.sun .button:hover { background: var(--blue); border-color: var(--gold-ink); }

.link {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
  text-decoration-color: var(--underline, rgba(207, 179, 134, 0.7));
  transition: text-decoration-color 0.2s;
}
.link:hover { text-decoration-color: currentColor; }

/* 5. Header -------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--header-h);
  background: var(--navy);
  border-bottom: 1px solid var(--line-on-dark);
  transition: background-color 0.25s, border-color 0.25s;
}
.site-header.is-top:not(.menu-open) { background: transparent; border-bottom-color: transparent; }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.logo { display: inline-flex; }
.logo img { height: 2.5rem; width: auto; }
.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav a { font-size: 0.9375rem; color: var(--cream); text-decoration: none; padding: 0.5rem 0; transition: color 0.2s; }
.site-nav a:hover { color: var(--gold); }
.site-nav a[href="#contact"] { color: var(--gold-bright); border-bottom: 1px solid var(--gold); }
.site-nav { margin-inline-start: auto; }
/* The other language, named in its own script, set apart from the sections by a brass rule. */
.lang-switch {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding-inline-start: 2rem; border-inline-start: 1px solid var(--line-on-dark);
  font-size: 1rem; line-height: 1; color: var(--cream); text-decoration: none;
  transition: color 0.2s;
}
.lang-switch:hover { color: var(--gold); }
.lang-switch[lang="en"] { font-family: var(--font-sans); font-size: 0.9375rem; }
.menu-toggle { display: none; }

/* 6. Hero ---------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(36rem, 88svh, 52rem);
  display: flex;
  background: var(--navy) url("assets/hero.jpg") 40% 50% / cover no-repeat;
  border-bottom: 1px solid var(--gold);
}
.hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.hero__video:not(.is-playing) { display: none; }
.hero__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(3, 18, 28, 0.6), rgba(3, 18, 28, 0) 22%),
    linear-gradient(90deg, rgba(3, 18, 28, 0) 35%, rgba(3, 18, 28, 0.55) 70%),
    linear-gradient(0deg, rgba(3, 18, 28, 0.7), rgba(3, 18, 28, 0) 40%);
}
.hero__inner {
  position: relative;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  align-items: center;
  padding-top: var(--header-h); padding-bottom: 4rem;
}
.hero__copy { grid-column: 7 / -1; max-width: 34rem; }
.hero__lead { margin-top: 1.5rem; font-size: var(--text-lead); line-height: 1.55; color: var(--cream); opacity: 0.9; max-width: 30em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2.25rem; }
.hero__pause {
  position: absolute; inset-inline-end: 0; bottom: 1.25rem;
  background: none; border: 0; padding: 0.75rem 0;
  font-size: var(--text-sm); color: var(--cream-2);
  text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--line-on-dark);
}
.hero__pause:hover { color: var(--cream); }

/* 7. Courtyard and stones ------------------------------------------------ */
.courtyard {
  display: grid; gap: var(--joint);
  max-width: var(--max); margin: 0 auto;
  background: #8d7958;
  grid-template-columns: 1fr;
}
.stone { position: relative; background: var(--ground); color: var(--fg); }
.stone--photo { overflow: hidden; aspect-ratio: 4 / 5; }
.stone--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stone--lantern img { object-position: 50% 100%; }
.stone--structure img { object-position: 56% 50%; }
.stone--arch img { object-position: 50% 35%; }

/* 8. Slabs and lists ----------------------------------------------------- */
.slab { display: flex; flex-direction: column; gap: 2rem; padding: var(--pad); }
.slab__head .lead { margin-top: 1rem; }
.stone--intro .lead { margin-top: 1.5rem; max-width: none; }
.stone--intro h2 { color: var(--gold-bright); }
.intro__body { color: var(--muted); }
.intro__body p + p { margin-top: 1rem; }
.intro__note { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--gold); font: 400 1.5rem / 1.3 var(--font-serif); }

.service-list, .steps { list-style: none; padding: 0; margin: 0; }
.service-list li { border-top: 1px solid var(--line); padding: 1rem 0 1.125rem; }
.service-list h3, .steps h3 { font: 500 var(--text-h3) / 1.35 var(--font-sans); }
.service-list p, .steps p { color: var(--muted); margin-top: 0.3rem; max-width: 32em; }

.steps { counter-reset: step; display: grid; gap: 1.25rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 0.75rem; }
.steps li::before {
  content: counter(step); grid-row: 1 / 3;
  font: 400 1.75rem / 1 var(--font-serif); font-variant-numeric: lining-nums;
  color: var(--accent); padding-top: 0.15rem;
}
.steps h3, .steps p { grid-column: 2; }

.list-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 0 0.25rem; border-top: 1px solid var(--line); margin-top: auto; color: var(--accent); text-decoration: none; }
.list-link:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.service-list + .list-link { margin-top: auto; }
.service-note { max-width: 32em; }

/* 9. Contact and form ---------------------------------------------------- */
.stone--contact { gap: 2.5rem; }
.contact__intro .lead { margin-top: 1.25rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
.field { margin-bottom: 1.5rem; }
.field label { display: block; font-size: var(--text-sm); color: var(--muted); margin-bottom: 0.35rem; }
.field__optional { font-weight: 400; }
.field input, .field select, .field textarea {
  display: block; width: 100%;
  background: var(--cream-bright);
  border: 0; border-bottom: 1px solid var(--gold-ink); border-radius: 0;
  padding: 0.7rem 0.75rem; font-size: var(--text-base); color: var(--ink);
  transition: border-color 0.2s, background-color 0.2s;
}
.field :is(input, select, textarea):focus-visible {
  outline: none; background: #fff;
  border-bottom: 2px solid var(--gold-ink); padding-bottom: calc(0.7rem - 1px);
}
.field select {
  appearance: none; -webkit-appearance: none; padding-inline-end: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23133144' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center;
}
.field select:has(option[value=""]:checked) { color: var(--ink-2); }
.field textarea { resize: vertical; min-height: 7rem; }
/* Locked while sending, but shown as is: browsers would otherwise grey them out. */
.field :is(input, select, textarea):disabled { opacity: 1; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.form__end { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 0.5rem; }
.form__status { font-size: var(--text-sm); color: var(--muted); max-width: 28em; }
.form__status.is-error { color: var(--ink); }
.field--trap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile:not(:empty) { margin-bottom: 1.5rem; }

/* 10. Footer ------------------------------------------------------------- */
.footer { background: var(--navy-deep); padding-block: 3.5rem; border-top: 1px solid var(--gold-ink); }
.footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.footer__logo { display: inline-flex; }
.footer__logo img { width: 12rem; height: auto; }
.footer__meta { font-size: var(--text-sm); color: var(--cream-2); text-align: end; display: grid; gap: 0.4rem; font-variant-numeric: lining-nums; }
.footer__line { font: 400 1.25rem / 1.3 var(--font-serif); color: var(--gold); }

/* 11. Layouts ------------------------------------------------------------ */
/* Two columns from 700px. Photographs are at least a module tall and stretch with their row. */
@media (min-width: 700px) {
  .courtyard {
    --col: calc((min(100vw, var(--max)) - var(--joint)) / 2);
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "intro     software"
      "lantern   development"
      "analysis  structure"
      "arch      contact";
  }
  .stone--photo { aspect-ratio: auto; min-height: calc(var(--col) * 1.1); }
  .stone--intro { grid-area: intro; }
  #software { grid-area: software; }
  .stone--lantern { grid-area: lantern; }
  #development { grid-area: development; }
  .stone--structure { grid-area: structure; }
  #analysis { grid-area: analysis; }
  .stone--arch { grid-area: arch; }
  #contact { grid-area: contact; }
}

/* Desktop: each service has a dedicated row, paired with its own photograph. */
@media (min-width: 1024px) {
  .courtyard {
    --col: calc((min(100vw, var(--max)) - 2 * var(--joint)) / 3);
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "intro     intro     intro"
      "software  software  lantern"
      "structure development  development"
      "analysis  analysis  arch"
      "contact   contact   contact";
  }
  .stone--intro {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: calc(2 * var(--pad)); align-items: start;
    padding-block: calc(1.5 * var(--pad));
  }
  .intro__body { padding-top: 2.5rem; }
  .intro__note { margin-top: 2.5rem; }
  :is(#software, #development, #analysis) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    column-gap: calc(1.5 * var(--pad)); row-gap: 2rem;
    padding-block: calc(1.5 * var(--pad));
  }
  :is(#software, #development, #analysis) .slab__head { grid-column: 1; grid-row: 1 / -1; }
  :is(#software, #development, #analysis) :is(.service-list, .steps) { grid-column: 2; align-self: start; }
  :is(#software, #development, #analysis) .list-link { grid-column: 2; margin-top: 0; }
  :is(#software, #development, #analysis) { grid-template-rows: auto 1fr auto; }
  .service-note { grid-column: 2; align-self: start; }
  .stone--contact {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: calc(2 * var(--pad)); align-items: start;
    padding-block: calc(1.5 * var(--pad));
  }
  .stone--contact .form { max-width: 48rem; width: 100%; justify-self: end; }
}

@media (max-width: 1000px) {
  .hero__copy { grid-column: 6 / -1; }
}

@media (max-width: 800px) {
  :root {
    --text-base: 1rem; --text-lead: 1.0625rem; --text-h3: 1.125rem;
    --header-h: 3.75rem; --gap: 1.5rem;
  }
  .logo img { height: 1.75rem; }
  .site-header__inner { gap: 1.25rem; }
  .lang-switch { margin-inline-start: auto; padding-inline: 0 1.25rem; border-inline-start: 0; border-inline-end: 1px solid var(--line-on-dark); min-height: 1.5rem; }
  .menu-toggle { order: 1; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.25rem; background: none; border: 0; color: var(--cream); font-size: var(--text-base); }
  .site-nav {
    display: none;
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    overflow-y: auto; touch-action: pan-y;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy); padding: 0.5rem var(--gutter) 1.5rem;
  }
  .site-header.menu-open .site-nav { display: flex; }
  .site-nav a { padding: 1rem 0; border-bottom: 1px solid var(--line-on-dark); font-size: var(--text-lead); }
  .site-nav a[href="#contact"] { border-bottom: 0; }

  .hero { height: auto; min-height: clamp(32rem, 88svh, 46rem); background-position: 25% 30%; }
  .hero__video { object-position: 25% 30%; }
  .hero__shade { background: linear-gradient(0deg, rgba(3, 18, 28, 0.86) 0%, rgba(3, 18, 28, 0.62) 45%, rgba(3, 18, 28, 0.22) 100%); }
  .hero__inner { display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--header-h) + 2rem); padding-bottom: 4.5rem; }
  .hero__copy { max-width: none; }
  .hero__lead { margin-top: 1.25rem; }
  .hero__actions { margin-top: 1.75rem; gap: 1.25rem; }
  .hero__pause { bottom: 1rem; }
  .link:not(.list-link) { display: inline-block; padding-block: 0.65rem; margin-block: -0.65rem; }

  .form__row { grid-template-columns: 1fr; }
  .field { margin-bottom: 1.25rem; }
  .form__end .button { width: 100%; }

  .footer { padding-block: 3rem; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
  .footer__logo img { width: 8.5rem; }
  .footer__meta { text-align: start; }
}

@media (max-width: 699px) {
  .slab { padding: 2rem var(--gutter) 2.25rem; }
}

@media (max-width: 359px) { :root { --text-h1: 2.5rem; } }
@media (hover: none) { .field textarea { resize: none; } }

/* 12. Arabic (ar/index.html) --------------------------------------------- */
/* Logical properties above flip the layout; this sets the Arabic type and the few
   physical details that remain. Arabic letters join, so no letter-spacing or capitals. */
/* Arabic sets smaller on the body than Latin at the same size, so the text steps go up one notch. */
:root[lang="ar"] {
  --font-sans: var(--font-ar-sans); --font-serif: var(--font-ar-serif);
  --text-sm: 0.9375rem; --text-base: 1.125rem; --text-lead: 1.25rem; --text-h3: 1.25rem;
}
@media (max-width: 800px) {
  :root[lang="ar"] { --text-base: 1.0625rem; --text-lead: 1.125rem; --text-h3: 1.1875rem; }
}
:root[lang="ar"] body { line-height: 1.85; }
:root[lang="ar"] h1 { line-height: 1.3; }
:root[lang="ar"] h2 { line-height: 1.4; }
:root[lang="ar"] :is(.lead, .hero__lead) { line-height: 1.8; }
:root[lang="ar"] :is(.service-list, .steps) h3 { line-height: 1.6; }
:root[lang="ar"] .eyebrow { font-size: var(--text-sm); letter-spacing: 0; text-transform: none; }
:root[lang="ar"] :is(.intro__note, .footer__line) { line-height: 1.6; }
:root[lang="ar"] .intro__note { font-size: 1.625rem; }
:root[lang="ar"] .footer__line { font-size: 1.375rem; }
:root[lang="ar"] .steps li::before { content: counter(step, arabic-indic); padding-top: 0.4rem; }
:root[lang="ar"] .site-nav a { font-size: 1rem; }
:root[lang="ar"] .field select { background-position: left 0.75rem center; }
/* Email addresses are typed left to right but line up with the other fields. */
:root[lang="ar"] .field input[type="email"] { text-align: right; }

/* The dhow sails toward the reading direction: mirror the picture, keep its framing. */
:root[dir="rtl"] .hero::before {
  content: ''; position: absolute; inset: 0; z-index: -3;
  background: inherit; transform: scaleX(-1);
}
:root[dir="rtl"] .hero__video { transform: scaleX(-1); }
@media (min-width: 801px) {
  :root[dir="rtl"] .hero__shade {
    background:
      linear-gradient(180deg, rgba(3, 18, 28, 0.6), rgba(3, 18, 28, 0) 22%),
      linear-gradient(270deg, rgba(3, 18, 28, 0) 35%, rgba(3, 18, 28, 0.55) 70%),
      linear-gradient(0deg, rgba(3, 18, 28, 0.7), rgba(3, 18, 28, 0) 40%);
  }
}

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