:root {
  --blue: #17627f;
  --blue-dark: #16465b;
  --text: #1e4050;
  --muted: #56707d;
  --line: #d9e7ed;
  --sky: #eef7fb;
  --white: #fff;
}
* {box-sizing: border-box}
html {scroll-behavior: smooth}
body {margin: 0; background: var(--white); color: var(--text); font: 500 17px/1.7 "Tajawal", Arial, sans-serif}
a {color: inherit}
button {font: inherit}
figure {margin: 0}
[hidden] {display: none!important}
.wrap {width: min(100% - 48px, 1120px); margin-inline: auto}
.latin {font-family: "DM Sans", Arial, sans-serif; direction: ltr; unicode-bidi: isolate}
:focus-visible {outline: 3px solid var(--blue); outline-offset: 3px}

/* Header and navigation */
.site-head {background: var(--white); border-bottom: 1px solid var(--line)}
.site-head .wrap {min-height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px}
.brand {display: inline-flex; justify-self: start; align-items: center; gap: 11px; text-decoration: none; color: var(--blue-dark); font-size: 20px; font-weight: 700; white-space: nowrap}
.brand-flag {display: block; width: 42px; height: 21px; border: 1px solid #cdd8dd}
.site-head nav {display: flex; align-items: center; gap: 28px}
.site-head nav a {color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 600}
.site-head nav a:hover,.site-head nav a[aria-current="page"] {color: var(--blue)}
.site-head nav a[aria-current="page"] {border-bottom: 2px solid var(--blue); padding-bottom: 4px}
.head-actions {justify-self: end; display: flex; align-items: center; gap: 12px}
.head-contact {display: inline-flex; align-items: center; gap: 15px; padding: 8px 17px; color: var(--blue); border: 1px solid var(--blue); border-radius: 5px; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap}
.head-contact:hover {background: var(--sky)}
.arrow {display: inline-block; font-family: "DM Sans", Arial, sans-serif; direction: ltr}
.menu-toggle {display: none; width: 39px; height: 39px; padding: 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--blue); background: var(--white); cursor: pointer}
.menu-toggle span {display: block; height: 1px; margin: 5px 0; background: currentColor}
.mobile-nav {display: none}

/* Home */
.hero {display: grid; grid-template-columns: 1.12fr .88fr; gap: 65px; align-items: center; padding-block: 68px 78px}
.kicker {color: var(--blue); font-size: 15px; font-weight: 700}
.hero h1 {margin: 16px 0 12px; color: var(--blue-dark); font-size: clamp(56px,6vw,78px); line-height: 1.13; font-weight: 800}
.hero h1 span {color: var(--blue)}
.hero-deck {margin: 0 0 20px; color: var(--text); font-size: clamp(27px,3vw,37px); line-height: 1.35; font-weight: 700}
.hero-deck em {font-style: normal; color: var(--blue)}
.hero-lead {max-width: 550px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.8}
.hero-actions {display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 29px}
.button {display: inline-flex; align-items: center; gap: 20px; padding: 11px 22px; color: var(--white); background: var(--blue); border: 1px solid var(--blue); border-radius: 5px; font-weight: 700; text-decoration: none}
.button:hover {background: var(--blue-dark)}
.text-link {color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 5px}
.hero-image-area {min-width: 0}
.hero-figure img {display: block; width: 100%; max-width: 430px; height: 480px; object-fit: cover; object-position: 49% 30%; border-radius: 8px}
.intro-band {background: var(--sky); border-block: 1px solid var(--line)}
.intro-band .wrap {min-height: 116px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 35px}
.intro-band p {margin: 0; color: var(--blue-dark); font-size: 25px; line-height: 1.35; font-weight: 700}
.intro-band p strong {color: var(--blue)}
.intro-band small {color: var(--muted); font-size: 15px}
.page-links {padding-block: 78px}
.page-links-heading {display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 26px}
.page-links-heading p {max-width: 390px; margin: 0; color: var(--muted)}
.section-label {color: var(--blue); font: 700 12px "DM Sans", Arial, sans-serif; letter-spacing: .12em; direction: ltr; unicode-bidi: isolate; text-align: right}
.section-title {margin: 9px 0 0; color: var(--blue-dark); font-size: clamp(35px,4vw,48px); line-height: 1.25; font-weight: 800}
.link-grid {display: grid; grid-template-columns: repeat(3,1fr); gap: 16px}
.page-card {display: flex; flex-direction: column; min-height: 225px; padding: 25px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none}
.page-card:hover {border-color: #87b9ca; background: #f9fdff}
.page-card .latin {color: var(--blue); font-size: 12px; font-weight: 700}
.page-card h3 {margin: 27px 0 9px; color: var(--blue-dark); font-size: 28px; line-height: 1.25}
.page-card p {margin: 0; color: var(--muted); font-size: 16px}
.page-card .card-arrow {margin-top: auto; align-self: end; color: var(--blue); font-size: 21px}
.home-ending {background: var(--sky); padding-block: 48px}
.home-ending .wrap {display: flex; align-items: center; justify-content: space-between; gap: 25px}
.home-ending h2 {margin: 0; font-size: 30px}
.home-ending a {color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 5px}

/* Shared internal page layout */
.page-banner {width: 100%; max-width: none; min-height: 210px; margin: 0; padding: 48px max(24px,calc((100vw - 1120px)/2)); background: var(--sky); border-bottom: 1px solid var(--line)}
.page-banner h1 {margin: 7px 0 8px; color: var(--blue-dark); font-size: clamp(47px,5vw,64px); line-height: 1.18}
.page-banner p {max-width: 700px; margin: 0; color: var(--muted); font-size: 19px; line-height: 1.7}
.page-banner.split {display: grid; grid-template-columns: 1fr .85fr; gap: 45px; align-items: center}
.page-banner.split p {padding-bottom: 0}
.next-link {padding-block: 55px}
.next-link a {display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 17px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--blue); font-size: 24px; font-weight: 700; text-decoration: none}
.next-link a:hover {color: var(--blue-dark)}

/* About */
.about-feature {display: grid; grid-template-columns: 1.05fr .95fr; gap: 65px; align-items: center; padding-block: 75px}
.about-feature h2 {margin: 0 0 19px; color: var(--blue-dark); font-size: clamp(30px,3vw,40px); line-height: 1.3}
.about-feature p {margin: 0 0 15px; color: var(--muted); font-size: 18px; line-height: 1.8}
.about-feature figure {width: 100%; max-width: 415px; justify-self: end}
.about-feature img {display: block; width: 100%; height: 500px; object-fit: cover; object-position: center 30%; border-radius: 8px}
.about-feature figcaption {margin-top: 10px; color: var(--muted); font: 600 11px "DM Sans", Arial, sans-serif; letter-spacing: .08em}
.story-strip {background: var(--sky); padding-block: 38px}
.story-strip .wrap {display: grid; grid-template-columns: 150px 1fr; gap: 35px; align-items: center}
.story-strip strong {color: var(--blue); font: 700 42px "DM Sans", Arial, sans-serif}
.story-strip p {margin: 0; color: var(--blue-dark); font-size: 24px; font-weight: 700}

/* Approach */
.method-intro {padding-block: 65px}
.section-top {display: grid; grid-template-columns: 1fr .8fr; gap: 45px; align-items: end; margin-bottom: 27px}
.section-top p {max-width: 475px; margin: 0; color: var(--muted); font-size: 17px}
.steps {display: grid; grid-template-columns: repeat(3,1fr); gap: 15px}
.step {min-height: 220px; padding: 24px; border: 1px solid var(--line); border-radius: 8px}
.step-number {color: var(--blue); font: 700 12px "DM Sans", Arial, sans-serif; letter-spacing: .08em}
.step h3 {margin: 30px 0 9px; color: var(--blue-dark); font-size: 27px; line-height: 1.25}
.step p {margin: 0; color: var(--muted); font-size: 16px}
.method-detail {background: var(--sky); padding-block: 65px}
.method-detail .wrap {display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px}
.detail-list {border-top: 1px solid var(--line)}
.detail-row {display: grid; grid-template-columns: 120px 1fr; gap: 25px; padding: 17px 0; border-bottom: 1px solid var(--line)}
.detail-row strong {color: var(--blue-dark); font-weight: 700}
.detail-row p {margin: 0; color: var(--muted)}
.method-note {margin: 20px 0 0; color: var(--muted); font-size: 14px}
.principle {background: #f7fbfd; padding-block: 55px; border-block: 1px solid var(--line)}
.principle .wrap {display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center}
.principle blockquote {margin: 0; color: var(--blue-dark); font-size: 29px; line-height: 1.45; font-weight: 700}
.principle blockquote span {color: var(--blue)}
.principle-note {margin: 13px 0 0; color: var(--muted); font-size: 15px}
.section {padding-block: 70px}
.journal-head {margin-bottom: 25px}
.journal-list {border-top: 1px solid var(--line)}
.journal-item {display: grid; grid-template-columns: 80px .75fr 1.25fr; gap: 25px; padding: 23px 0; border-bottom: 1px solid var(--line)}
.coin {color: var(--blue); font: 700 22px "DM Sans", Arial, sans-serif; text-align: right; direction: ltr}
.journal-item h3 {margin: 0; color: var(--blue-dark); font-size: 22px}
.journal-item p {margin: 0; color: var(--muted); font-size: 16px}
.fine-print {margin: 18px 0 0; color: var(--muted); font-size: 14px}

/* Gallery */
.gallery-page {padding-block: 45px 70px}
.gallery-grid {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px}
.gallery-card {position: relative; display: block; aspect-ratio: 4/5; padding: 0; border: 0; border-radius: 8px; background: var(--sky); overflow: hidden; cursor: zoom-in}
.gallery-card img {display: block; width: 100%; height: 100%; object-fit: cover}
.gallery-card:hover img {opacity: .88}
.gallery-note {display: flex; justify-content: space-between; gap: 20px; margin-top: 16px; color: var(--muted); font-size: 14px}
.gallery-note .latin {font-size: 11px; letter-spacing: .1em}
.lightbox {max-width: min(94vw,1080px); max-height: 94vh; padding: 0; border: 0; background: var(--white); color: var(--text); box-shadow: 0 25px 80px #0005}
.lightbox::backdrop {background: #102b36dc}
.lightbox img {display: block; max-width: 94vw; max-height: 88vh; width: auto; height: auto; object-fit: contain}
.lightbox-close {position: absolute; top: 9px; left: 9px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--white); color: var(--blue-dark); font: 600 24px "DM Sans", Arial, sans-serif; cursor: pointer}
.lightbox-caption {padding: 9px 15px; font-size: 13px; text-align: center}

/* Contact and sources */
.contact-page {padding-block: 70px}
.contact-page .wrap {display: grid; grid-template-columns: 1fr .85fr; gap: 70px}
.contact-details p {color: var(--muted); font-size: 17px}
.contact-details ul {padding-right: 24px; color: var(--muted); line-height: 2}
.contact-panel {align-self: start; padding: 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--sky)}
.contact-panel small {color: var(--blue); font: 700 12px "DM Sans", Arial, sans-serif; letter-spacing: .1em}
.contact-panel h2 {margin: 14px 0 10px; color: var(--blue-dark); font-size: 30px}
.contact-panel p {color: var(--muted)}
.contact-panel a {display: inline-flex; align-items: center; gap: 15px; padding: 10px 17px; border-radius: 5px; background: var(--blue); color: var(--white); font: 700 16px "DM Sans", Arial, sans-serif; text-decoration: none; direction: ltr}
.contact-panel a:hover {background: var(--blue-dark)}
.sources {padding-block: 60px; border-top: 1px solid var(--line)}
.sources .wrap {display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px}
.sources h2 {margin: 9px 0; color: var(--blue-dark); font-size: 31px}
.sources p {margin: 0; color: var(--muted); font-size: 15px}
.source-links {border-top: 1px solid var(--line)}
.source-links a {display: flex; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--blue); font-weight: 700; text-decoration: none}
.source-links a:hover {text-decoration: underline}

/* Footer */
footer {background: var(--sky); border-top: 1px solid var(--line); color: var(--muted)}
.footer-main {display: flex; justify-content: space-between; gap: 35px; padding-block: 30px}
.footer-main strong {color: var(--blue-dark); font-size: 19px}
.footer-main p {max-width: 630px; margin: 0; font-size: 13px}
.footer-bottom {padding-block: 12px; border-top: 1px solid var(--line); color: var(--muted); font: 500 11px "DM Sans", Arial, sans-serif; direction: ltr; text-align: left}

@media(max-width:800px) {
  .wrap {width: min(100% - 40px,1120px)}
  .site-head .wrap {grid-template-columns: 1fr auto}
  .site-head nav:not(.mobile-nav) {display: none}
  .menu-toggle {display: block}
  .site-head .mobile-nav:not([hidden]) {display: grid; grid-template-columns: repeat(2,1fr); gap: 0; padding: 8px 20px 16px; border-top: 1px solid var(--line); background: var(--white)}
  .mobile-nav a {padding: 10px 5px; border-bottom: 1px solid var(--line); text-decoration: none}
  .mobile-nav a[aria-current="page"] {color: var(--blue); font-weight: 700}
  .hero {grid-template-columns: 1fr; gap: 35px; padding-block: 50px}
  .hero-figure img {height: 470px}
  .intro-band .wrap {grid-template-columns: 1fr; gap: 5px; padding-block: 25px}
  .page-links-heading,.home-ending .wrap {display: block}
  .page-links-heading p {margin-top: 12px}
  .link-grid,.steps {grid-template-columns: 1fr}
  .page-card,.step {min-height: 0}
  .home-ending a {display: inline-block; margin-top: 12px}
  .page-banner {padding: 40px 20px}
  .page-banner.split,.about-feature,.section-top,.method-detail .wrap,.principle .wrap,.contact-page .wrap,.sources .wrap {grid-template-columns: 1fr; gap: 20px}
  .about-feature {padding-block: 55px}
  .about-feature figure {justify-self: start}
  .story-strip .wrap {grid-template-columns: 1fr; gap: 0}
  .journal-item {grid-template-columns: 70px 1fr; gap: 8px 20px}
  .journal-item p {grid-column: 2}
  .gallery-grid {grid-template-columns: repeat(2,minmax(0,1fr))}
  .footer-main {display: block}
  .footer-main p {margin-top: 10px}
}
@media(max-width:520px) {
  .wrap {width: min(100% - 32px,1120px)}
  .site-head .wrap {min-height: 68px}
  .brand {font-size: 17px}
  .brand-flag {width: 37px; height: 19px}
  .head-contact {padding: 7px 10px; font-size: 13px}
  .hero {padding-block: 38px}
  .hero h1 {font-size: 54px}
  .hero-deck {font-size: 29px}
  .hero-lead {font-size: 16px}
  .hero-figure img {height: 390px}
  .intro-band p {font-size: 22px}
  .intro-band small {font-size: 14px}
  .page-links {padding-block: 55px}
  .section-title {font-size: 35px}
  .page-banner h1 {font-size: 50px}
  .page-banner p {font-size: 17px}
  .about-feature h2 {font-size: 31px}
  .about-feature p {font-size: 16px}
  .about-feature img {height: 390px}
  .story-strip p {font-size: 21px}
  .journal-item {grid-template-columns: 56px 1fr; gap: 7px 13px}
  .journal-item h3 {font-size: 20px}
  .journal-item p {font-size: 15px}
  .gallery-grid {gap: 8px}
  .gallery-note {font-size: 12px}
  .contact-page {padding-block: 50px}
  .sources {padding-block: 45px}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior: auto}}