/* ==========================================================================
   Lamassu - lamassu.info
   Palette taken from the material itself: ebony and jujube for the darks,
   camel bone for the light ground, brass for the accent.
   Layout uses logical properties throughout, so the Arabic and Persian
   versions mirror correctly without a separate stylesheet.
   ========================================================================== */

:root {
  --ink:        #17120d;
  --ink-2:      #221a13;
  --ink-3:      #2f251b;
  --cream:      #f7f2e8;
  --cream-2:    #efe6d5;
  --cream-3:    #e2d5be;
  --gold:       #b08633;
  --gold-lite:  #d5b269;
  --rust:       #97452b;
  --text:       #24201b;
  --text-soft:  #5c544a;
  --line:       #d9cdb6;

  --wrap:       1180px;
  --radius:     3px;
  --shadow:     0 1px 2px rgba(23,18,13,.06), 0 8px 28px rgba(23,18,13,.07);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --arabic: "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

/* The off-canvas mobile nav is parked outside the viewport, which would
   otherwise make the document horizontally scrollable. `clip` removes that
   overflow without creating a scroll container, so the sticky header keeps
   working against the viewport (which `overflow: hidden` would break). */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* Arabic and Persian: different face, slightly larger, looser lines. */
body.lang-ar, body.lang-fa { font-family: var(--arabic); font-size: 18px; line-height: 1.95; }
body.lang-ar h1, body.lang-ar h2, body.lang-fa h1, body.lang-fa h2 { font-family: var(--arabic); }

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

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.22; margin: 0; letter-spacing: -.01em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--cream); padding: 12px 20px;
}
.skip:focus { inset-inline-start: 0; }

/* ---------- Header ------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  color: var(--cream);
  border-bottom: 1px solid rgba(176,134,51,.28);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 74px;
  /* Wider than --wrap on purpose. The reading column stays at 1180, but the
     header carries the brand, seven links and the language switcher, which
     overflow that width and would spill outside the viewport. */
  max-width: 1280px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cream); }
.brand-mark { color: var(--gold-lite); display: inline-flex; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--serif); font-size: 21px; letter-spacing: .16em; text-transform: uppercase; }
.brand-sub { font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-lite); margin-top: 3px; }
body.lang-ar .brand-name, body.lang-fa .brand-name,
body.lang-ru .brand-name { letter-spacing: .1em; }

.site-nav { display: flex; align-items: center; gap: 28px; }

.nav-list { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
.nav-list a {
  text-decoration: none; font-size: 14px; letter-spacing: .04em;
  color: rgba(247,242,232,.82); padding: 6px 0; position: relative; white-space: nowrap;
}
.nav-list a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: var(--gold-lite); transform: scaleX(0); transition: transform .22s ease;
}
.nav-list a:hover { color: var(--cream); }
.nav-list a:hover::after, .nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.nav-list a[aria-current="page"] { color: var(--cream); }

.lang-switch { display: flex; align-items: center; gap: 12px; padding-inline-start: 22px; border-inline-start: 1px solid rgba(247,242,232,.16); }
.lang-link {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none; font-size: 12.5px; color: rgba(247,242,232,.55);
  padding: 3px 2px; transition: color .18s ease;
  /* The switcher itself follows the page direction, but inside a single link
     the flag always leads. Without this the Arabic and Persian links would
     flip their own contents and the row of flags would lose its rhythm. The
     label keeps its own dir attribute, so the name still renders correctly. */
  direction: ltr;
}
.lang-link:hover { color: var(--cream); }
.lang-link.is-active { color: var(--gold-lite); }

/* The flag sprite is definitions only and must take up no space. It cannot be
   positioned with a style attribute: style-src 'self' drops inline styles, and
   the sprite then pushes the whole header down the page. */
.flag-sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

/* Flags carry no meaning on their own - the language name beside them is the
   label. The hairline ring keeps the white bands of the Russian and Emirati
   flags from bleeding into the dark header. */
.flag {
  width: 18px; height: 12px; flex: none;
  border-radius: 1.5px;
  box-shadow: 0 0 0 1px rgba(247, 242, 232, .22);
}
.lang-link.is-active .flag { box-shadow: 0 0 0 1px rgba(213, 178, 105, .75); }

/* In the header the switcher is flag + language code: the five native names
   need roughly another 230px, which is what pushed Persian past the edge.
   The full names are still shown in the mobile panel and in the footer.
   Each link carries an aria-label, so the accessible name stays the language
   name rather than the two-letter code. */
.lang-name { display: none; }
.lang-short { display: inline; letter-spacing: .06em; }

.nav-toggle {
  display: none; align-items: center; gap: 10px; background: none; border: 0;
  color: var(--cream); font: inherit; font-size: 13px; cursor: pointer;
  letter-spacing: .12em; text-transform: uppercase; padding: 8px 0;
}
.nav-toggle-bars { display: inline-flex; flex-direction: column; gap: 4px; width: 22px; }
.nav-toggle-bars span { height: 1.5px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- Hero --------------------------------------------------------- */

.hero {
  position: relative; isolation: isolate;
  min-height: clamp(380px, 56vh, 560px);
  display: flex; align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(15,11,8,.90) 0%, rgba(15,11,8,.58) 42%, rgba(15,11,8,.20) 78%, rgba(15,11,8,.30) 100%);
}
.hero--plain .hero-veil { background: var(--ink-2); }

.hero-inner { padding-block: 56px 46px; color: var(--cream); }
.hero-eyebrow {
  margin: 0 0 14px; font-size: 11.5px; letter-spacing: .30em; text-transform: uppercase;
  color: var(--gold-lite);
}
body.lang-ar .hero-eyebrow, body.lang-fa .hero-eyebrow { letter-spacing: .06em; }
.hero-title {
  font-size: clamp(30px, 4.6vw, 55px); max-width: 20ch; margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero-sub {
  margin: 18px 0 0; max-width: 62ch; font-size: clamp(16px, 1.5vw, 19px);
  color: rgba(247,242,232,.90); text-shadow: 0 1px 14px rgba(0,0,0,.35);
}

/* ---------- Intro -------------------------------------------------------- */

.intro {
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.62;
  max-width: 72ch;
  margin: 58px 0 10px;
  color: #332b22;
}
body.lang-ar .intro, body.lang-fa .intro { font-family: var(--arabic); line-height: 2.0; }

.section-title {
  font-size: clamp(23px, 2.4vw, 30px);
  margin: 64px 0 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.section-title::after {
  content: ""; position: absolute; bottom: -1px; inset-inline-start: 0;
  width: 68px; height: 2px; background: var(--gold);
}

/* ---------- Category cards ---------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 18px; }

.card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); }
.card-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream-2); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1; }
.card-title { font-family: var(--serif); font-size: 19px; }
body.lang-ar .card-title, body.lang-fa .card-title { font-family: var(--arabic); }
.card-text { font-size: 14.5px; color: var(--text-soft); line-height: 1.55; flex: 1; }
.card-more {
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-top: 4px;
}

/* ---------- Info boxes --------------------------------------------------- */

.boxes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: 34px 0 0;
}

.box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  position: relative;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.box::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 46px; height: 2px; background: var(--gold);
}
.box:hover { border-color: var(--gold); box-shadow: var(--shadow); }
.box-num {
  margin: 0 0 12px; font-family: var(--serif); font-size: 13px;
  letter-spacing: .18em; color: var(--gold);
}
.box-title { font-size: 20px; margin: 0 0 12px; }
.box-text { margin: 0; font-size: 15.5px; color: var(--text-soft); line-height: 1.7; }

/* ---------- CTA ---------------------------------------------------------- */

.cta {
  grid-column: 1 / -1;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 44px 40px;
  position: relative;
  overflow: hidden;
}
/* A restrained nod to the star lattice, kept faint enough to stay a texture. */
.cta::after {
  content: ""; position: absolute; inset: 0; opacity: .10; pointer-events: none;
  background-image:
    repeating-linear-gradient(45deg,  var(--gold-lite) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, var(--gold-lite) 0 1px, transparent 1px 22px);
}
.cta-inner { position: relative; z-index: 1; max-width: 74ch; }
.cta-title { font-size: clamp(22px, 2.3vw, 29px); margin: 0 0 14px; color: var(--cream); }
.cta-text { margin: 0 0 26px; color: rgba(247,242,232,.86); font-size: 16.5px; }

.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font: inherit; font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 30px; border-radius: var(--radius); border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
body.lang-ar .btn, body.lang-fa .btn { letter-spacing: 0; text-transform: none; font-size: 15px; }
.btn-gold { background: var(--gold); color: #1a1207; border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-lite); border-color: var(--gold-lite); }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; opacity: .85; }
.btn-ghost:hover { opacity: 1; }
.btn-sm { padding: 8px 16px; font-size: 12px; }
.btn-danger:hover { background: var(--rust); border-color: var(--rust); color: #fff; }

/* ---------- Contact form ------------------------------------------------- */

.form-section { margin: 74px 0 90px; }
.form-shell {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 42px 40px 46px; box-shadow: var(--shadow);
}
.form-shell .section-title { margin-top: 0; }
.form-intro { max-width: 70ch; color: var(--text-soft); margin: 0 0 30px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 20px; }
.field label { font-size: 13.5px; letter-spacing: .04em; color: #443c32; }
.req { color: var(--rust); }

.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="password"], .field textarea {
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--cream);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; width: 100%;
  transition: border-color .18s ease, background .18s ease;
}
.field textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); background: #fff;
  box-shadow: 0 0 0 3px rgba(176,134,51,.14);
}
.field.has-error input, .field.has-error textarea { border-color: var(--rust); }
.field-error { font-size: 13px; color: var(--rust); }

.field-check { flex-direction: row; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.field-check input { margin-top: 5px; width: 17px; height: 17px; accent-color: var(--gold); flex: none; }
.field-check label { flex: 1; font-size: 14px; line-height: 1.6; color: var(--text-soft); }
.field-check .field-error { flex-basis: 100%; }

.form-actions { margin: 26px 0 0; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: 15px 18px; border-radius: var(--radius); margin: 0 0 24px; font-size: 15.5px; }
.alert-ok    { background: #eaf3e8; border: 1px solid #b9d3b2; color: #2c5225; }
.alert-error { background: #f8ecea; border: 1px solid #e0b8b0; color: #7d3324; }

/* ---------- Legal pages -------------------------------------------------- */

.legal-note {
  margin: 44px 0 0; padding: 14px 18px;
  background: var(--cream-2); border-inline-start: 3px solid var(--gold);
  font-size: 14.5px; color: var(--text-soft);
}
.legal { max-width: 78ch; margin: 30px 0 88px; }
.legal-section { margin-bottom: 34px; }
.legal-section h2 { font-size: 21px; margin: 0 0 12px; }
.legal-section p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: var(--text-soft); }
.legal-section ul { margin: 0 0 14px; padding-inline-start: 22px; font-size: 15.5px; color: var(--text-soft); }
.legal-section li { margin-bottom: 7px; }
.legal-section a { color: var(--rust); }
.legal-updated { font-size: 14px; color: var(--text-soft); font-style: italic; }

/* ---------- Footer ------------------------------------------------------- */

.site-footer { background: var(--ink); color: rgba(247,242,232,.74); margin-top: 0; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1.3fr 1fr; gap: 40px;
  padding-block: 64px 44px;
}
.footer-col h2 {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-lite); margin: 0 0 18px; font-family: var(--sans); font-weight: 600;
}
body.lang-ar .footer-col h2, body.lang-fa .footer-col h2 { letter-spacing: .04em; font-family: var(--arabic); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { text-decoration: none; font-size: 15px; transition: color .18s ease; }
.footer-col a:hover { color: var(--cream); }
.footer-brand .brand-name { display: block; font-size: 22px; letter-spacing: .16em; color: var(--cream); margin-bottom: 16px; }
.footer-brand p { margin: 0 0 14px; font-size: 15px; max-width: 42ch; }
.footer-note { color: var(--gold-lite); font-size: 13.5px; }
.footer-col address { font-style: normal; font-size: 15px; line-height: 1.9; }
.footer-langs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.footer-langs a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: rgba(247,242,232,.55);
  direction: ltr;
}

.footer-bottom {
  border-top: 1px solid rgba(247,242,232,.12);
  padding-block: 22px 30px;
}
.footer-bottom p { margin: 0; font-size: 13.5px; color: rgba(247,242,232,.5); }

/* ---------- Admin -------------------------------------------------------- */

.admin { background: var(--cream-2); }
.admin-wrap { max-width: 900px; padding-block: 50px 80px; }
.admin-wrap h1 { font-size: 28px; margin-bottom: 24px; }
.admin-login { background: #fff; border: 1px solid var(--line); padding: 28px; max-width: 420px; border-radius: var(--radius); }
.admin-logout { margin-bottom: 26px; }
.msg { background: #fff; border: 1px solid var(--line); border-inline-start: 3px solid var(--gold); padding: 20px 22px; margin-bottom: 16px; border-radius: var(--radius); }
.msg.is-read { border-inline-start-color: var(--line); opacity: .68; }
.msg-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.msg-meta { font-size: 13px; color: var(--text-soft); }
.msg-subject { font-weight: 600; margin: 0 0 6px; }
.msg-body { margin: 0 0 14px; font-size: 15.5px; white-space: pre-wrap; }
.msg-actions { display: flex; gap: 10px; }

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 1040px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .boxes { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 1259px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset-block-start: 74px; inset-inline-end: 0; inset-block-end: 0;
    width: min(340px, 84vw);
    background: var(--ink-2);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 26px 26px 40px;
    transform: translateX(110%);
    transition: transform .28s ease;
    overflow-y: auto;
    border-inline-start: 1px solid rgba(176,134,51,.28);
  }
  [dir="rtl"] .site-nav { transform: translateX(-110%); }
  .site-nav.is-open { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li { border-bottom: 1px solid rgba(247,242,232,.10); }
  .nav-list a { display: block; padding: 15px 0; font-size: 16px; }
  .nav-list a::after { display: none; }
  .lang-switch {
    padding-inline-start: 0; border-inline-start: 0; margin-top: 26px;
    flex-wrap: wrap; gap: 14px;
  }
  .lang-link { font-size: 14px; gap: 10px; }
  .lang-link .flag { width: 22px; height: 15px; }
  .lang-name { display: inline; }
  .lang-short { display: none; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .wrap { padding-inline: 18px; }
  .cards, .boxes { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .hero-inner { padding-block: 40px 34px; }
  .form-shell { padding: 28px 22px 32px; }
  .cta { padding: 32px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-block: 46px 32px; }
  .section-title { margin-top: 48px; }
}

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

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media print {
  .site-header, .site-footer, .cta, .form-section, .nav-toggle { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .hero { min-height: auto; }
}