/* ==========================================================================
   ARTS GROUP — Corporate Stylesheet
   Structure:
   01. Design tokens (:root)
   02. Reset & base
   03. Bilingual (LTR / RTL) mechanics
   04. Layout primitives
   05. Header, top bar, navigation
   06. Hero & media sections
   07. Components (cards, spec strip, tables, gallery, accordion)
   08. Footer
   09. Motion & accessibility
   10. Responsive breakpoints
   ========================================================================== */

/* 01 — DESIGN TOKENS ------------------------------------------------------ */
:root {
  /* Palette — sampled from the Arts Group logo */
  --c-walnut:      #8A4A1F;   /* logo mark brown */
  --c-walnut-deep: #6B3714;
  --c-oak:         #B87A3D;   /* lighter wood accent */
  --c-ink:         #1E1C1A;   /* deep charcoal — primary type */
  --c-ink-soft:    #3F3B36;
  --c-steel:       #77706A;   /* secondary type */
  --c-linen:       #EFEAE1;   /* light beige */
  --c-linen-deep:  #E3DCD1;
  --c-paper:       #FAF8F5;   /* off-white page ground */
  --c-white:       #FFFFFF;

  --c-line:        rgba(30, 28, 26, 0.14);
  --c-line-strong: rgba(30, 28, 26, 0.30);
  --c-line-invert: rgba(250, 248, 245, 0.20);

  /* Typography */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --f-arabic:  "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --fs-eyebrow: 0.72rem;
  --fs-micro:   0.78rem;
  --fs-small:   0.9rem;
  --fs-body:    1.0rem;
  --fs-lead:    clamp(1.05rem, 0.95rem + 0.45vw, 1.28rem);
  --fs-h4:      clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-h3:      clamp(1.35rem, 1.15rem + 0.85vw, 1.85rem);
  --fs-h2:      clamp(1.85rem, 1.40rem + 2.10vw, 3.10rem);
  --fs-h1:      clamp(2.45rem, 1.60rem + 3.90vw, 5.20rem);

  --tracking-display: -0.025em;
  --tracking-mono:     0.14em;

  /* Space & rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;

  --wrap:      1280px;
  --wrap-text: 68ch;
  --gutter:    clamp(1.15rem, 4vw, 3.5rem);

  --radius:    2px;   /* industrial: near-square, never pill */
  --header-h:  92px;   /* sized for the stacked Arts Group lockup */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:       0.45s;
}

/* 02 — RESET & BASE ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 2rem);
}

body {
  margin: 0;
  background-color: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 800; text-transform: uppercase; }
h2 { font-size: var(--fs-h2); text-transform: uppercase; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p  { margin: 0 0 var(--space-2); max-width: var(--wrap-text); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--space-2); padding-inline-start: 1.15rem; }
li { margin-block-end: 0.4rem; }

a { color: var(--c-walnut); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-walnut-deep); }

img, video { max-width: 100%; display: block; }

strong { font-weight: 600; color: var(--c-ink); }

::selection { background: var(--c-walnut); color: var(--c-paper); }

/* 03 — BILINGUAL MECHANICS ------------------------------------------------
   Both languages ship in the DOM for crawlers and screen readers.
   Only the inactive language is hidden, so each element keeps its
   natural display value when shown. */
html[lang="en"] [data-lang="ar"] { display: none; }
html[lang="ar"] [data-lang="en"] { display: none; }

html[lang="ar"] body { font-family: var(--f-arabic); line-height: 1.85; }
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  font-family: var(--f-arabic);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}
html[lang="ar"] .eyebrow,
html[lang="ar"] .btn { letter-spacing: 0; }
/* Latin data (dimensions, codes, Incoterms) stays monospaced and LTR in RTL pages */
html[lang="ar"] .data { font-family: var(--f-mono); direction: ltr; unicode-bidi: embed; }

/* 04 — LAYOUT PRIMITIVES -------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-7); }
.section--tight { padding-block: var(--space-6); }
.section--linen { background: var(--c-linen); }
.section--ink { background: var(--c-ink); color: var(--c-linen); }
.section--ink h2, .section--ink h3, .section--ink h4 { color: var(--c-paper); }
.section--ink p { color: rgba(239, 234, 225, 0.82); }

.grid { display: grid; gap: var(--space-3); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5); align-items: start; }

.stack > * + * { margin-block-start: var(--space-2); }
.lead { font-size: var(--fs-lead); color: var(--c-ink-soft); line-height: 1.55; }
.muted { color: var(--c-steel); }

/* Eyebrow: mono label + hairline + tick. Used to label every section. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--f-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-walnut);
  margin-block-end: var(--space-2);
}
.eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-line-strong);
  max-width: 90px;
}
.section--ink .eyebrow { color: var(--c-oak); }
.section--ink .eyebrow::after { background: var(--c-line-invert); }

.section-head { max-width: 62ch; margin-block-end: var(--space-5); }

/* Buttons — squared, industrial, no gradients */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--c-walnut);
  border-radius: var(--radius);
  background: var(--c-walnut);
  color: var(--c-paper);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: var(--c-walnut-deep); border-color: var(--c-walnut-deep); color: var(--c-paper); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-strong); }
.btn--ghost:hover { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-paper); }
.btn--onDark { background: transparent; color: var(--c-paper); border-color: var(--c-line-invert); }
.btn--onDark:hover { background: var(--c-paper); color: var(--c-ink); border-color: var(--c-paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); }

/* 05 — TOP BAR, HEADER, NAV ----------------------------------------------- */
.topbar {
  background: var(--c-ink);
  color: rgba(239, 234, 225, 0.78);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 40px;
  flex-wrap: wrap;
}
.topbar-contact { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.topbar-contact a { color: var(--c-linen); text-decoration: none; }
.topbar-contact a:hover { color: var(--c-oak); }
.topbar-contact span { display: inline-flex; align-items: center; gap: 0.45rem; }
.topbar-contact .dot { width: 4px; height: 4px; background: var(--c-oak); border-radius: 50%; flex: none; }

/* Language switch — buttons only (no form controls anywhere on this site) */
.lang-switch { display: inline-flex; border: 1px solid var(--c-line-invert); border-radius: var(--radius); overflow: hidden; }
.lang-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(239, 234, 225, 0.7);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.lang-switch button:hover { color: var(--c-paper); }
.lang-switch button[aria-pressed="true"] { background: var(--c-walnut); color: var(--c-paper); }

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: rgba(250, 248, 245, 0.94);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--c-line);
  transition: box-shadow 0.3s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 10px 30px -22px rgba(30, 28, 26, 0.55); }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-h);
}

/* Logo placeholder — fixed slot, optically centred, never distorts */
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand img { height: 64px; width: auto; object-fit: contain; }

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.85rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--c-ink-soft);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.primary-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1.5px;
  background: var(--c-walnut);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--dur) var(--ease);
}
.primary-nav a:hover { color: var(--c-ink); }
.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav a[aria-current="page"] { color: var(--c-walnut); }

.nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: transparent;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--c-ink); }
.nav-toggle span + span { margin-block-start: 5px; }

/* 06 — HERO & MEDIA ------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
}
.hero-media { position: absolute; inset: 0; }
.hero-media video,
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,28,26,0.55) 0%, rgba(30,28,26,0.62) 45%, rgba(30,28,26,0.88) 100%);
}
.hero .wrap { position: relative; z-index: 2; padding-block: var(--space-6) var(--space-5); width: 100%; }
.hero h1 { color: var(--c-paper); max-width: 16ch; }
.hero .lead { color: rgba(239, 234, 225, 0.86); max-width: 56ch; }
.hero .eyebrow { color: var(--c-oak); }
.hero .eyebrow::after { background: var(--c-line-invert); }

/* Signature element — dimension line, borrowed from millwork shop drawings */
.dimension {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: var(--tracking-mono);
  color: var(--c-steel);
  text-transform: uppercase;
  margin-block: var(--space-3);
}
.dimension::before,
.dimension::after {
  content: "";
  height: 7px;
  border-inline-start: 1px solid currentColor;
  border-inline-end: 1px solid currentColor;
  flex: 1 1 auto;
  background: linear-gradient(currentColor, currentColor) center/100% 1px no-repeat;
  opacity: 0.55;
}
.hero .dimension { color: rgba(239, 234, 225, 0.72); }

/* Spec strip — mono capability figures on a hairline rail */
.spec-strip { border-block: 1px solid var(--c-line); background: var(--c-paper); }
.spec-strip .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spec-item {
  padding: var(--space-4) var(--space-2);
  border-inline-end: 1px solid var(--c-line);
}
.spec-item:last-child { border-inline-end: 0; }
.spec-item .value {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 1.3rem + 1.7vw, 2.7rem);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  color: var(--c-walnut);
  line-height: 1;
}
.spec-item .label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-steel);
  margin-block-start: 0.6rem;
}
html[lang="ar"] .spec-item .label { font-family: var(--f-arabic); letter-spacing: 0; font-size: 0.8rem; }

/* Full-bleed media band */
.media-band { position: relative; min-height: 460px; display: grid; place-items: center; overflow: hidden; background: var(--c-ink); }
.media-band video, .media-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-band::after { content: ""; position: absolute; inset: 0; background: rgba(30, 28, 26, 0.62); }
.media-band .wrap { position: relative; z-index: 2; text-align: center; padding-block: var(--space-6); }
.media-band h2 { color: var(--c-paper); }
.media-band p { color: rgba(239, 234, 225, 0.85); margin-inline: auto; }
.media-band .eyebrow { justify-content: center; color: var(--c-oak); }
.media-band .eyebrow::after { display: none; }

/* 07 — COMPONENTS --------------------------------------------------------- */
/* Capability / category card */
.card {
  position: relative;
  padding: var(--space-4) var(--space-3) var(--space-4);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  height: 100%;
}
.card::before {
  /* corner tick — reveals on hover, echoing a drawing registration mark */
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: -1px;
  width: 34px;
  height: 34px;
  border-block-start: 2px solid var(--c-walnut);
  border-inline-start: 2px solid var(--c-walnut);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: var(--c-line-strong); box-shadow: 0 24px 45px -34px rgba(30, 28, 26, 0.6); }
.card:hover::before { opacity: 1; }
.card .index {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: var(--tracking-mono);
  color: var(--c-oak);
  margin-block-end: var(--space-2);
}
.card h3 { font-size: var(--fs-h4); text-transform: none; }
.card p { font-size: var(--fs-small); color: var(--c-steel); margin-block-end: 0; }
.card ul { font-size: var(--fs-small); color: var(--c-steel); }
.section--linen .card { background: var(--c-paper); }

/* Process sequence — numbering used only where order is real information */
.process { counter-reset: step; border-block-start: 1px solid var(--c-line); }
.process-step {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--c-line);
  transition: background var(--dur) var(--ease);
}
.process-step:hover { background: var(--c-linen); }
.process-step .num {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  letter-spacing: var(--tracking-mono);
  color: var(--c-walnut);
  padding-block-start: 0.35rem;
}
.process-step h3 { text-transform: none; }
.process-step p { margin-block-end: 0; color: var(--c-steel); }

/* Specification table */
.spec-table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-white); }
table.spec {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  min-width: 640px;
}
table.spec caption {
  text-align: start;
  padding: var(--space-3);
  font-family: var(--f-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-steel);
  border-block-end: 1px solid var(--c-line);
}
table.spec th, table.spec td { padding: 0.9rem 1rem; text-align: start; border-block-end: 1px solid var(--c-line); }
table.spec thead th {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-paper);
  background: var(--c-ink);
  font-weight: 500;
}
table.spec tbody tr:hover { background: var(--c-linen); }
table.spec tbody tr:last-child td { border-block-end: 0; }
html[lang="ar"] table.spec th { font-family: var(--f-arabic); }

/* Material swatches */
.swatch { border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: var(--c-white); }
.swatch .chip { height: 120px; }
.swatch .meta { padding: var(--space-2); }
.swatch .meta strong { display: block; font-size: var(--fs-small); }
.swatch .meta span { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--c-steel); }
.chip--walnut { background: linear-gradient(100deg, #6B3714, #8A4A1F 45%, #A25C28); }
.chip--oak    { background: linear-gradient(100deg, #B87A3D, #D7A366 55%, #C08B4B); }
.chip--beech  { background: linear-gradient(100deg, #D8BE97, #E8D6B6 50%, #D2B489); }
.chip--matte  { background: linear-gradient(100deg, #EDEAE4, #FAF8F5 55%, #E3DCD1); }
.chip--graph  { background: linear-gradient(100deg, #2A2724, #3F3B36 55%, #514B44); }
.chip--stone  { background: linear-gradient(100deg, #9A948C, #B4ADA3 55%, #8D877F); }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.gallery figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--c-linen-deep); }
.gallery img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.gallery figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 1.5rem 1rem 1rem;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-paper);
  background: linear-gradient(180deg, rgba(30,28,26,0), rgba(30,28,26,0.85));
  transform: translateY(6px);
  opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.gallery figure:hover img { transform: scale(1.05); }
.gallery figure:hover figcaption { transform: translateY(0); opacity: 1; }
.gallery figure:focus-within figcaption { transform: translateY(0); opacity: 1; }
html[lang="ar"] .gallery figcaption { font-family: var(--f-arabic); letter-spacing: 0; }
.gallery--wide figure:first-child { grid-column: span 2; }

/* Accordion (FAQ) */
.accordion { border-block-start: 1px solid var(--c-line); }
.accordion-item { border-block-end: 1px solid var(--c-line); }
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 1.4rem 0;
  appearance: none;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--c-ink);
  text-align: start;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.accordion-trigger:hover { color: var(--c-walnut); }
.accordion-trigger .sign { position: relative; flex: none; width: 16px; height: 16px; }
.accordion-trigger .sign::before,
.accordion-trigger .sign::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 16px;
  height: 1.5px;
  background: var(--c-walnut);
  transition: transform 0.35s var(--ease);
}
.accordion-trigger .sign::after { transform: rotate(90deg); }
.accordion-trigger[aria-expanded="true"] .sign::after { transform: rotate(0deg); }
.accordion-panel { overflow: hidden; max-height: 0; transition: max-height 0.45s var(--ease); }
.accordion-panel > div { padding-block-end: var(--space-3); }
.accordion-panel p:last-child { margin-block-end: 0; }

/* Contact blocks (textual only — this site contains no forms or inputs) */
.contact-block {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-3);
  background: var(--c-white);
  height: 100%;
}
.contact-block .label {
  font-family: var(--f-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-steel);
  display: block;
  margin-block-end: 0.65rem;
}
.contact-block .value { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; word-break: break-word; }
.contact-block a { text-decoration: none; }
.contact-block a:hover { text-decoration: underline; }

/* Quote / statement block */
.statement {
  border-inline-start: 2px solid var(--c-walnut);
  padding-inline-start: var(--space-3);
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  max-width: 34ch;
}
html[lang="ar"] .statement { font-family: var(--f-arabic); line-height: 1.6; }

/* Checklist */
.check { list-style: none; padding: 0; }
.check li { position: relative; padding-inline-start: 1.6rem; }
.check li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  width: 8px;
  height: 8px;
  border-block-end: 1.5px solid var(--c-walnut);
  border-inline-start: 1.5px solid var(--c-walnut);
  transform: rotate(-45deg);
}

/* 08 — FOOTER ------------------------------------------------------------- */
.site-footer { background: var(--c-ink); color: rgba(239, 234, 225, 0.75); padding-block: var(--space-6) var(--space-3); border-block-start: 3px solid var(--c-walnut); }
.site-footer h4 {
  font-family: var(--f-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--c-oak);
  margin-block-end: var(--space-2);
}
html[lang="ar"] .site-footer h4 { font-family: var(--f-arabic); letter-spacing: 0; font-size: 0.85rem; }
.site-footer p { color: rgba(239, 234, 225, 0.7); font-size: var(--fs-small); }
.site-footer a { color: rgba(239, 234, 225, 0.85); text-decoration: none; font-size: var(--fs-small); }
.site-footer a:hover { color: var(--c-oak); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-block-end: 0.5rem; }
.footer-brand img { height: 86px; width: auto; background: var(--c-paper); padding: 0.7rem 0.9rem; border-radius: var(--radius); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.footer-base {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--c-line-invert);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(239, 234, 225, 0.55);
}

/* 09 — MOTION & ACCESSIBILITY -------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-walnut);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.site-footer :focus-visible, .topbar :focus-visible, .hero :focus-visible { outline-color: var(--c-oak); }

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--space-2);
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--c-walnut);
  color: var(--c-paper);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  text-decoration: none;
  transition: inset-block-start 0.25s var(--ease);
}
.skip-link:focus { inset-block-start: var(--space-1); color: var(--c-paper); }

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

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

/* 10 — RESPONSIVE --------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split { grid-template-columns: 1fr; gap: var(--space-4); }
  .spec-strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec-item:nth-child(2) { border-inline-end: 0; }
  .spec-item:nth-child(-n+2) { border-block-end: 1px solid var(--c-line); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .nav-toggle { display: block; }
  .primary-nav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    background: var(--c-paper);
    border-block-end: 1px solid var(--c-line);
    box-shadow: 0 24px 40px -30px rgba(30, 28, 26, 0.7);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
  }
  .primary-nav.is-open { max-height: 70vh; overflow-y: auto; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-1) var(--gutter) var(--space-3); }
  .primary-nav li { border-block-end: 1px solid var(--c-line); }
  .primary-nav a { display: block; padding-block: 0.95rem; font-size: 0.95rem; }
  .primary-nav a::after { display: none; }
  .site-header .wrap { position: relative; }
}

@media (max-width: 760px) {
  :root { --space-7: 4.25rem; --space-6: 3.25rem; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery--wide figure:first-child { grid-column: span 2; }
  .process-step { grid-template-columns: 1fr; gap: var(--space-1); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .topbar .wrap { justify-content: center; text-align: center; padding-block: 0.5rem; }
  .hero { min-height: 78vh; }
  .brand img { height: 52px; }
  :root { --header-h: 76px; }
}

@media (max-width: 520px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery--wide figure:first-child { grid-column: auto; }
  .spec-strip .wrap { grid-template-columns: minmax(0, 1fr); }
  .spec-item { border-inline-end: 0; border-block-end: 1px solid var(--c-line); }
  .spec-item:last-child { border-block-end: 0; }
}

/* Print */
@media print {
  .topbar, .site-header, .hero-media, .nav-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}