@import url("../fonts/fonts.css");

/* =========================================================================
   RAWASI AL-'ASIMA — site stylesheet
   -------------------------------------------------------------------------
   Fully self-contained: no CDN, no external fonts. Safe to zip and upload.

     01  Tokens
     02  Base & typography
     03  CAD grid + crosshair cursor
     04  Arch motif
     05  Logo system
     06  Header, navigation, language switch
     07  Buttons & links
     08  Section furniture
     09  Signature: dimension-line annotation
     10  Cards, plates, tabs, filters, photos
     11  Hero
     12  Footer & forms
     13  Motion
     14  Utilities
     15  Reduced motion & print
   ========================================================================= */

/* ---------- 01  Tokens -------------------------------------------------- */
:root {
  /* Palette — brand guide §03. Ratio: navy 60 / sand 25 / gold 10 / brick 5 */
  --navy:       #0F1E3D;
  --navy-2:     #16274D;
  --navy-deep:  #0A1428;
  --gold:       #C9A24B;
  --gold-lt:    #E4C877;
  --brick:      #7A3B2E;
  --sand:       #F5EFE3;
  --paper:      #FBF8F1;
  --ink:        #1A1A1A;

  --line:        rgba(15, 30, 61, .14);
  --line-onnavy: rgba(201, 162, 75, .22);

  --f-display: 'Cairo', system-ui, sans-serif;
  --f-body:    'Tajawal', system-ui, sans-serif;
  --f-tech:    'Montserrat', system-ui, sans-serif;
  --lh-body:   1.85;

  --shell: 1200px;
  --head-h: 76px;
  --ease: cubic-bezier(.22, .8, .24, 1);

  /* CAD grid geometry */
  --grid-minor: 24px;
  --grid-major: 120px;
}

/* English swaps to the brand's Latin face and a tighter leading. */
html[lang="en"] {
  --f-display: 'Montserrat', system-ui, sans-serif;
  --f-body:    'Montserrat', system-ui, sans-serif;
  --lh-body:   1.7;
}

/* ---------- 02  Base & typography --------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 24px); }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.25; margin: 0; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

.tech, .num { font-family: var(--f-tech); font-variant-numeric: tabular-nums; }

/* ---------- Bidi: Latin and numeric runs inside Arabic ------------------- */
/* Numbers, phone numbers and part codes are left-to-right even on an RTL
   page. `isolate` — not `embed` — is the part that matters: only isolation
   stops a leading "+" or a trailing unit, which are bidi-neutral characters,
   from being pulled to the far end of the surrounding Arabic run. That is
   what turns "+964 785 188 9990" into "964 785 188 9990+".
   The HTML dir="ltr" attribute sets this in modern UA stylesheets; these
   rules back it up and cover class-only usage. */
.ltr, [dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}
/* inline-block keeps the run from being split across a line break mid-number */
.num-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 99999;
  padding: 11px 16px;
  color: var(--navy);
  background: var(--gold-lt);
  border-radius: 2px;
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.section { padding-block: clamp(72px, 9vw, 132px); position: relative; }
.section--tight { padding-block: clamp(52px, 6vw, 84px); }

.on-navy  { background: var(--navy); color: var(--paper); }
.on-navy2 { background: var(--navy-2); color: var(--paper); }
.on-sand  { background: var(--sand); color: var(--ink); }
.on-paper { background: var(--paper); color: var(--ink); }
.on-navy h1, .on-navy h2, .on-navy h3,
.on-navy2 h2, .on-navy2 h3 { color: var(--paper); }

/* ---------- 03  CAD grid ------------------------------------------------- */
/* A drawing-window lattice: a fine line every 24px and a heavier one every
   120px, carried across every page and the full height of each.

   It is painted as a *background layer on each ground*, not as an overlay
   element. That matters: backgrounds always paint beneath content, so the
   lattice sits on the colour and never crosses body text, project photographs
   or cards — those have their own opaque backgrounds and simply mask it.
   An overlay element, by contrast, would draw lines straight over the imagery.

   `background-attachment: fixed` anchors each section's lattice to the
   viewport rather than to the section box, so the lines stay continuous
   across section boundaries instead of restarting at every seam. */
/* Dark grounds take a gold lattice; light grounds take an ink one, the way a
   drawing reads on paper. Tuning them separately keeps both equally faint
   instead of making one colour compromise across both.

   Each list is written out in full rather than composed from colour variables.
   A var() nested inside an inherited custom property resolves against the
   element that *declared* it, not the one that uses it — so building these
   from a per-ground --grid-colour would silently invalidate the whole list. */
:root {
  --grid-gold:
    linear-gradient(to right,  rgba(201, 162, 75, .075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201, 162, 75, .075) 1px, transparent 1px),
    linear-gradient(to right,  rgba(201, 162, 75, .15)  1px, transparent 1px),
    linear-gradient(to bottom, rgba(201, 162, 75, .15)  1px, transparent 1px);
  --grid-ink:
    linear-gradient(to right,  rgba(15, 30, 61, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 30, 61, .045) 1px, transparent 1px),
    linear-gradient(to right,  rgba(15, 30, 61, .085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 30, 61, .085) 1px, transparent 1px);
  --grid-sizes:
    var(--grid-minor) var(--grid-minor),
    var(--grid-minor) var(--grid-minor),
    var(--grid-major) var(--grid-major),
    var(--grid-major) var(--grid-major);
}

.on-navy, .on-navy2, .site-foot {
  background-image: var(--grid-gold);
  background-size: var(--grid-sizes);
  background-attachment: fixed;
}
.on-sand, .on-paper {
  background-image: var(--grid-ink);
  background-size: var(--grid-sizes);
  background-attachment: fixed;
}

/* Header and drawer sit above the page; the grid needs no stacking rule of
   its own now that it is a background rather than a layer on top. */
.site-head { z-index: 60; }
.mobile-nav { z-index: 55; }

/* ---------- 03b  CAD crosshair cursor ------------------------------------ */
/* The AutoCAD pointer: two hairlines spanning the viewport, meeting at a small
   square pickbox, with a live coordinate readout. Drawn in a fixed layer above
   the page so it reads over every section and over imagery alike. */
.cad-cursor {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.cad-cursor.is-on { opacity: 1; }

/* Arm length, not full-viewport rules. AutoCAD draws its crosshair at a set
   fraction of the screen (5% by default) rather than edge to edge, and that
   is what makes it read as a precision instrument instead of a pair of guide
   lines. Both arms are centred on the pointer by negative margins, so the JS
   only has to translate them to the same point. */
:root {
  --cx-arm: 84px;   /* full span of each rule, so 42px either side of centre */
  --cx-box: 14px;   /* pickbox */
}

.cad-cursor i {
  position: absolute;
  top: 0; left: 0;
  background: rgba(201, 162, 75, .55);
  will-change: transform;
}
.cad-cursor .cx-v {
  width: 1px;
  height: var(--cx-arm);
  margin-top: calc(var(--cx-arm) / -2);
}
.cad-cursor .cx-h {
  height: 1px;
  width: var(--cx-arm);
  margin-left: calc(var(--cx-arm) / -2);
}

.cad-cursor .cx-box {
  width: var(--cx-box);
  height: var(--cx-box);
  margin: calc(var(--cx-box) / -2) 0 0 calc(var(--cx-box) / -2);
  background: none;
  border: 1px solid var(--gold);
  will-change: transform;
  transition: width .2s var(--ease), height .2s var(--ease),
              margin .2s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease);
}
/* The pickbox swells over anything clickable, the way a selection box does. */
.cad-cursor.is-hot .cx-box {
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  background-color: rgba(201, 162, 75, .13);
  border-color: var(--gold-lt);
}
/* Over a text field it becomes a caret-height bar instead. */
.cad-cursor.is-text .cx-box {
  width: 2px; height: 20px;
  margin: -10px 0 0 -1px;
  background-color: var(--gold-lt);
  border-color: transparent;
}
/* The arms retract over a text field — a caret does not carry crosshairs. */
.cad-cursor.is-text .cx-v,
.cad-cursor.is-text .cx-h { opacity: 0; }
.cad-cursor .cx-v,
.cad-cursor .cx-h { transition: opacity .2s var(--ease); }

/* Coordinate readout. `direction: ltr` matters: the value is "x, y" and on the
   Arabic build the surrounding RTL context would otherwise swap the pair and
   print "y ,x". */
.cad-cursor .cx-read {
  position: absolute;
  top: 0; left: 0;
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--f-tech);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(201, 162, 75, .65);
  white-space: nowrap;
}

/* The native arrow is only retired once JS has confirmed a fine pointer, so a
   failed script can never leave a visitor with no cursor at all. */
.has-cad-cursor, .has-cad-cursor body,
.has-cad-cursor a, .has-cad-cursor button, .has-cad-cursor summary,
.has-cad-cursor input, .has-cad-cursor select, .has-cad-cursor textarea,
.has-cad-cursor [role="button"], .has-cad-cursor .card, .has-cad-cursor .dwg { cursor: none; }

/* ---------- 04  Arch motif ---------------------------------------------- */
/* From the castle opening in the logo. Guide rule: low opacity, behind text
   only, never behind the logo. */
.arch-band {
  height: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='46' viewBox='0 0 34 46'%3E%3Cpath d='M0 46 L0 22 A17 17 0 0 1 34 22 L34 46' fill='none' stroke='%23C9A24B' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  opacity: .55;
}
.arch-band--divider { opacity: .35; }

.arch-colonnade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='120' viewBox='0 0 80 120'%3E%3Cpath d='M0 120 L0 60 A40 40 0 0 1 80 60 L80 120' fill='none' stroke='%23C9A24B' stroke-width='1.25'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  opacity: .16;
  pointer-events: none;
}

/* ---------- 05  Logo system --------------------------------------------- */
/* The brand mark ships as two pre-trimmed, transparent PNGs, so no region
   cropping is needed:
     rawasi-logo-symbol.png   the emblem alone      294×266
     rawasi-logo.png          the full lockup       400×420
   --rw/--rh stay as the *virtual* box the mark is drawn into and --k stays
   "rendered pixels per virtual unit", so every inline --k already in the
   markup keeps producing exactly the same rendered size as before.
   The artwork is a full-colour 3D render whose internal detail is shading,
   not transparency, so the previous alpha-mask (gold monochrome) treatment
   would flatten it to a silhouette and is no longer used — the mark carries
   its own gold outlines and reads correctly on navy as-is. */
.logo {
  --rw: 424; --rh: 384;
  display: block;
  flex: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../img/logo/rawasi-logo-symbol.png?v=20260906");
  width:  calc(var(--rw) * var(--k) * 1px);
  height: calc(var(--rh) * var(--k) * 1px);
}
/* emblem only — header, footer, hero sheet */
.logo--emblem { --rw: 424; --rh: 384; background-image: url("../img/logo/rawasi-logo-symbol.png?v=20260906"); }
/* full lockup incl. wordmark — available for light grounds */
.logo--lockup { --rw: 404; --rh: 425; background-image: url("../img/logo/rawasi-logo.png?v=20260906"); }

/* ---------- 06  Header, navigation, language switch --------------------- */
.site-head {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  background: transparent;
  transition: background .45s var(--ease), backdrop-filter .45s var(--ease),
              box-shadow .45s var(--ease);
}
.site-head.is-stuck {
  background: rgba(10, 20, 40, .88);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line-onnavy), 0 18px 40px -28px rgba(0,0,0,.9);
}
.head-inner {
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
}

.scroll-rule {
  display: block;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: right center;
  background: linear-gradient(90deg, var(--gold-lt), var(--gold));
}
html[dir='ltr'] .scroll-rule { transform-origin: left center; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-text strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.1;
  color: var(--paper);
  white-space: nowrap;
}
.brand-text em {
  display: block;
  font-family: var(--f-tech);
  font-style: normal;
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--gold-lt);
  margin-top: 3px;
  white-space: nowrap;
}
html[lang="en"] .brand-text strong { font-size: 15px; letter-spacing: .04em; }

.main-nav {
  --navpad: clamp(5px, .7vw, 9px);
  display: flex; align-items: center; gap: clamp(2px, .8vw, 12px); margin-inline-start: auto;
}
.nav-link {
  position: relative;
  padding: 8px var(--navpad);
  font-size: 15px;
  font-weight: 500;
  color: rgba(251, 248, 241, .78);
  transition: color .3s var(--ease);
  white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute;
  inset-inline: var(--navpad);
  bottom: 2px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform .4s var(--ease);
}
.nav-link:hover, .nav-link[aria-current='page'] { color: var(--paper); }
.nav-link:hover::after, .nav-link[aria-current='page']::after { transform: scaleX(1); transform-origin: inline-start; }
.nav-link[aria-current='page'] { color: var(--gold-lt); }

/* The header CTA must never shrink. It sits in a flex row with default
   flex-shrink:1, so when the row ran short the CTA — not the nav — gave up
   the pixels, and .btn's overflow:hidden clipped "Contact Us" to "Conta…Us".
   Pinning it moves the pressure onto the row's spacing instead of the label. */
.head-cta { flex: none; white-space: nowrap; }

/* AR | EN segmented control */
.lang-switch {
  display: flex;
  flex: none;
  border: 1px solid var(--line-onnavy);
  border-radius: 2px;
  overflow: hidden;
}
.lang-switch button {
  padding: 7px 11px;
  font-family: var(--f-tech);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(251, 248, 241, .6);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.lang-switch button + button { border-inline-start: 1px solid var(--line-onnavy); }
.lang-switch button:hover { color: var(--paper); }
.lang-switch button[aria-pressed='true'] { background: var(--gold); color: var(--navy); }

.burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line-onnavy); border-radius: 2px;
  cursor: pointer;
}
.burger span { display: block; width: 20px; height: 1.5px; background: var(--paper); position: relative; transition: background .2s; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; inset-inline: 0; height: 1.5px; background: var(--paper);
  transition: transform .35s var(--ease), top .25s var(--ease);
}
.burger span::before { top: -6px; }
.burger span::after  { top:  6px; }
.burger[aria-expanded='true'] span { background: transparent; }
.burger[aria-expanded='true'] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded='true'] span::after  { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset-block-start: var(--head-h);
  inset-inline: 0;
  background: rgba(10, 20, 40, .97);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-onnavy);
  padding: 12px clamp(20px, 5vw, 32px) 28px;
  display: grid;
  gap: 2px;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav a {
  padding: 14px 4px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  color: rgba(251, 248, 241, .85);
  border-bottom: 1px solid rgba(201, 162, 75, .12);
}
.mobile-nav a[aria-current='page'] { color: var(--gold-lt); }

/* Below the nav breakpoint the drawer takes over. These need the extra
   specificity: .btn is declared later and a media query adds none of its own. */
@media (max-width: 1060px) {
  .site-head .main-nav,
  .site-head .head-cta { display: none; }
  .site-head .burger { display: flex; }
  .site-head .lang-switch { margin-inline-start: auto; }
}

/* English collapses to the drawer earlier than Arabic. The English nav labels
   ("Engineering Design", "About Us", …) are ~60px wider than their Arabic
   counterparts and the English brand block is wider again, so the English row
   runs out of room around 1180px while Arabic still fits at 1061px. Handing
   English to the burger at 1200px keeps "Contact Us" whole rather than
   squeezing it; Arabic is untouched and keeps its own 1060px breakpoint. */
@media (max-width: 1199px) {
  html[lang='en'] .site-head .main-nav,
  html[lang='en'] .site-head .head-cta { display: none; }
  html[lang='en'] .site-head .burger { display: flex; }
  html[lang='en'] .site-head .lang-switch { margin-inline-start: auto; }
}

/* ---------- 07  Buttons & links ----------------------------------------- */
.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--btn-bg);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform .45s var(--ease);
}
.btn:hover::before { transform: scaleX(1); transform-origin: inline-start; }
.btn:active { transform: translateY(1px); }

.btn-gold { background: var(--gold); color: var(--navy); --btn-bg: var(--gold-lt); }
.btn-outline { border-color: var(--line-onnavy); color: var(--paper); --btn-bg: var(--gold); }
.btn-outline:hover { color: var(--navy); border-color: var(--gold); }
.btn-ink { border-color: var(--navy); color: var(--navy); --btn-bg: var(--navy); }
.btn-ink:hover { color: var(--paper); }

.link-rule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--brick);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 1px;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  transition: background-size .45s var(--ease), color .3s;
}
html[dir='ltr'] .link-rule { background-position: 0 100%; }
.link-rule:hover { background-size: 0 1px; color: var(--navy); }
.on-navy .link-rule, .on-navy2 .link-rule, .hero .link-rule { color: var(--gold-lt); }
.on-navy .link-rule:hover, .hero .link-rule:hover { color: var(--paper); }

/* Direction-aware arrow — points along the reading direction. */
.arw { transition: transform .35s var(--ease); }
.arw::before { content: '←'; }
html[dir='ltr'] .arw::before { content: '→'; }
.link-rule:hover .arw { transform: translateX(-6px); }
html[dir='ltr'] .link-rule:hover .arw { transform: translateX(6px); }

/* ---------- 08  Section furniture --------------------------------------- */
.eyebrow {
  font-family: var(--f-tech);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brick);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; flex: none; background: var(--gold); }
.on-navy .eyebrow, .on-navy2 .eyebrow, .hero .eyebrow, .page-head .eyebrow { color: var(--gold-lt); }

.sec-title {
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 800;
  color: var(--navy);
  margin-top: 14px;
  letter-spacing: -.01em;
}
.sec-lead {
  max-width: 62ch;
  margin-top: 16px;
  font-size: 17px;
  color: #4a4a4a;
}
.on-navy .sec-lead, .on-navy2 .sec-lead, .page-head .sec-lead { color: rgba(251, 248, 241, .72); }

/* The profile numbers its own sections and projects, so this carries real
   ordering rather than decorating the layout. */
.sheet-ref {
  font-family: var(--f-tech);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--gold);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.sheet-ref b { font-size: 28px; font-weight: 800; line-height: 1; }

/* Quote/pull block whose rule sits on the reading edge in both directions. */
.rule-start {
  border-inline-start: 2px solid var(--gold);
  padding: 28px;
  background: var(--paper);
}

/* ---------- 09  SIGNATURE: dimension-line annotation --------------------- */
.dim { display: block; }
.dim-line {
  display: block;
  height: 9px;
  border-inline: 1px solid var(--gold);
  position: relative;
  opacity: .85;
}
.dim-line::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform 1s var(--ease);
}
.is-in .dim-line::after, .dim.is-in .dim-line::after { transform: scaleX(1); }

.dim-val {
  display: block;
  margin-top: 10px;
  font-family: var(--f-tech);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.dim-val .unit { font-size: .44em; font-weight: 600; margin-inline-start: 4px; letter-spacing: 0; }
.on-navy .dim-val, .on-navy2 .dim-val, .hero .dim-val { color: var(--gold-lt); }

.dim-label { display: block; margin-top: 8px; font-size: 14px; color: #5c5c5c; }
.on-navy .dim-label, .on-navy2 .dim-label, .hero .dim-label { color: rgba(251, 248, 241, .6); }

/* Flex with wrapping, not a two-column grid: a long label and a long value
   (e.g. "Design scope" + "Architectural · Structural · MEP" in English) used
   to collide, because a `minmax(0, 1fr)` track lets the label shrink below its
   text and overflow. Here the value drops to its own line instead. */
.spec-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 14px;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(15, 30, 61, .16);
}
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #6a6a6a; }
.spec-row dd {
  flex: 0 1 auto;
  margin: 0;
  font-family: var(--f-tech);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  text-align: end;
  /* `plaintext` picks each value's direction from its own first strong
     character: "STR 102 · 104 · 108" reads LTR, "كونكريتي مسلّح" reads RTL,
     without having to tag every value by hand. */
  unicode-bidi: plaintext;
}
.on-navy .spec-row { border-bottom-color: rgba(201, 162, 75, .18); }
.on-navy .spec-row dt { color: rgba(251, 248, 241, .58); }
.on-navy .spec-row dd { color: var(--gold-lt); }

/* ---------- 10  Cards, plates, tabs, filters, photos -------------------- */
.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(24px, 3vw, 34px);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.card::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s var(--ease);
}
.card:hover, .card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 75, .5);
  box-shadow: 0 26px 50px -34px rgba(15, 30, 61, .5);
}
.card:hover::before, .card:focus-within::before { transform: scaleY(1); }
.card-title { font-size: 20px; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.card-body  { font-size: 15px; color: #55565a; }
.card ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.card li { position: relative; padding-inline-start: 18px; font-size: 14.5px; color: #55565a; }
.card li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0; top: 11px;
  width: 6px; height: 6px;
  border-top: 1px solid var(--gold);
  border-inline-start: 1px solid var(--gold);
  transform: rotate(45deg);
}
html[dir='ltr'] .card li::before { transform: rotate(-135deg); }

.card--navy { background: var(--navy-2); border-color: var(--line-onnavy); }
.card--navy .card-title { color: var(--paper); }
.card--navy .card-body, .card--navy li { color: rgba(251, 248, 241, .72); }

.plate { display: flex; flex-direction: column; }
.project-card .card-body { flex: 1 0 auto; }
.project-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.project-card__status { font-size: 12px; color: #6a6a6a; }
.plate-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.plate-no { font-family: var(--f-tech); font-weight: 800; font-size: 13px; letter-spacing: .12em; color: var(--gold); padding-top: 4px; flex: none; }
.plate-name { font-size: 19px; font-weight: 800; color: var(--navy); line-height: 1.4; }
.plate-en { font-family: var(--f-tech); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brick); margin-top: 5px; }
.on-navy .plate-head, .page-head .plate-head { border-bottom-color: var(--line-onnavy); }
.on-navy .plate-name { color: var(--paper); }
.on-navy .plate-en, .page-head .plate-en { color: var(--gold); }

.tag {
  display: inline-block;
  padding: 5px 12px;
  font-family: var(--f-tech);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brick);
  border: 1px solid rgba(122, 59, 46, .3);
  border-radius: 2px;
}
.tag--gold { color: var(--gold); border-color: rgba(201, 162, 75, .45); }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  padding: 12px 22px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  color: rgba(251, 248, 241, .62);
  background: none;
  border: 1px solid var(--line-onnavy);
  border-radius: 2px;
  cursor: pointer;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.tab:hover { color: var(--paper); border-color: rgba(201, 162, 75, .5); }
.tab[aria-selected='true'] { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.tab-panel[hidden] { display: none; }
.tab-panel { animation: fadeUp .5s var(--ease) both; }

.pill {
  padding: 10px 20px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.pill:hover { border-color: var(--gold); }
.pill[aria-pressed='true'] { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.pill[aria-pressed='true'] .count { color: var(--gold-lt); }
.pill .count { font-family: var(--f-tech); font-size: 11px; color: #999; margin-inline-start: 6px; }

[data-cat].is-hidden { display: none; }

/* Site photography — framed like a plate on a drawing sheet. Square, because
   the archive mixes portrait and landscape phone shots; a square frame crops
   both fairly, where 4:3 cut the portrait ones in half. */
.shot {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(15, 30, 61, .05);
}
.shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease), filter .6s var(--ease);
}
.shot:hover img { transform: scale(1.05); }
.shot::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(201, 162, 75, .38);
  pointer-events: none;
}
.shot figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 26px 18px 14px;
  font-size: 13.5px;
  color: var(--paper);
  background: linear-gradient(to top, rgba(10,20,40,.92), transparent);
}
.shot figcaption .ref {
  display: block;
  font-family: var(--f-tech);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--gold-lt);
  margin-bottom: 3px;
}

/* Drawing plate — a CAD sheet is mostly white and reads as a document, so it
   gets a paper mount and `contain` rather than the cropped photographic frame.
   Cropping a drawing would cut off exactly the title block and dimensions that
   make it worth publishing. */
.dwg {
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .5s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.dwg:hover, .dwg:focus-within {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 75, .55);
  box-shadow: 0 26px 50px -34px rgba(15, 30, 61, .5);
}
.dwg-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: #fff;
}
.dwg-frame img { width: 100%; height: 100%; object-fit: contain; }

/* Affordance: drawings are unreadable at thumbnail size, so say they enlarge. */
.dwg-frame::after {
  content: '';
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  width: 26px; height: 26px;
  border: 1px solid rgba(201, 162, 75, .8);
  border-radius: 2px;
  background:
    linear-gradient(currentColor, currentColor) center/9px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center/1px 9px no-repeat;
  color: var(--brick);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.dwg:hover .dwg-frame::after, .dwg:focus-within .dwg-frame::after { opacity: 1; }

.dwg figcaption {
  padding: 13px 16px 15px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: 14px;
  color: #55565a;
  line-height: 1.6;
}
.dwg figcaption .ref {
  display: block;
  font-family: var(--f-tech);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--brick);
  margin-bottom: 4px;
}

/* Lightbox — the only way a blueprint is actually legible on a screen. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(10, 20, 40, .93);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(201, 162, 75, .5);
  border-radius: 2px;
}
.lightbox figcaption {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(10px, 2vw, 20px);
  text-align: center;
  font-size: 14px;
  color: rgba(251, 248, 241, .8);
  padding-inline: 24px;
}
.lightbox-close {
  position: absolute;
  inset-block-start: clamp(12px, 3vw, 26px);
  inset-inline-end: clamp(12px, 3vw, 26px);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--line-onnavy);
  border-radius: 2px;
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.lightbox-close:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }

/* ---------- 11  Hero ---------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: calc(var(--head-h) + 48px) 140px;
  /* Grid layer first so it sits on top of the colour wash, but still beneath
     all content. The wash scrolls with the section; the grid stays viewport-
     anchored so it lines up with the sections below it. */
  background-color: var(--navy);
  background-image:
    var(--grid-gold),
    radial-gradient(120% 90% at 78% 18%, rgba(201, 162, 75, .16), transparent 58%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 45%, var(--navy-2) 100%);
  background-size: var(--grid-sizes), cover, cover;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, fixed, scroll, scroll;
  color: var(--paper);
  overflow: hidden;
}
.hero-title {
  font-size: clamp(44px, 8.5vw, 104px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--paper);
}
html[lang="en"] .hero-title { font-size: clamp(38px, 7vw, 88px); line-height: 1.05; }
.hero-title .accent {
  color: var(--gold-lt);
  background: linear-gradient(100deg, var(--gold) 10%, var(--gold-lt) 45%, var(--gold) 80%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lead {
  max-width: 52ch;
  margin-top: 24px;
  font-size: clamp(16px, 1.7vw, 19px);
  color: rgba(251, 248, 241, .74);
}

/* The logo is presented as a drawing sheet pinned on the grid. Pointer
   movement tilts the sheet and shifts its layers by depth. */
.sheet-stage {
  position: relative;
  width: min(420px, 82vw);
  margin-inline: auto;
  perspective: 1100px;
}
.sheet-tilt {
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
  will-change: transform;
}
.sheet {
  position: relative;
  background: var(--paper);
  border: 1px solid rgba(201, 162, 75, .5);
  border-radius: 2px;
  padding: 30px 26px 0;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .85);
}
.sheet::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(15, 30, 61, .16);
  pointer-events: none;
}
.sheet-layer { transition: transform .5s var(--ease); will-change: transform; }
.sheet .logo { margin-inline: auto; }
.sheet-brand {
  margin: 18px auto 0;
  color: var(--navy);
  text-align: center;
  font-family: var(--f-display);
  font-size: clamp(18px, 2.2vw, 25px);
  font-weight: 900;
  line-height: 1.45;
}
.sheet-brand small {
  display: block;
  margin-top: 4px;
  color: var(--brick);
  font-family: var(--f-tech);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Title block, bottom of the sheet, exactly as a drawing carries it. */
.sheet-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(15, 30, 61, .18);
  margin: 26px -26px 0;
}
.sheet-block div {
  padding: 9px 14px;
  font-family: var(--f-tech);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7d7d7d;
}
.sheet-block div + div { border-inline-start: 1px solid rgba(15, 30, 61, .18); }
.sheet-block b { display: block; color: var(--navy); font-size: 11px; margin-top: 2px; letter-spacing: .1em; }

.scroll-cue {
  position: absolute;
  inset-block-end: 32px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  display: grid;
  justify-items: center;
  gap: 10px;
  font-family: var(--f-tech);
  font-size: 10px;
  letter-spacing: .28em;
  color: rgba(251, 248, 241, .45);
  z-index: 2;
}
html[dir='ltr'] .scroll-cue { transform: translateX(-50%); }
.scroll-cue span.bar {
  width: 1px; height: 42px;
  background: linear-gradient(var(--gold), transparent);
  animation: cueDrop 2.4s var(--ease) infinite;
  transform-origin: top;
}

.page-head {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--head-h) + clamp(56px, 8vw, 96px)) clamp(56px, 8vw, 96px);
  background-color: var(--navy);
  background-image:
    var(--grid-gold),
    radial-gradient(100% 120% at 82% 0%, rgba(201, 162, 75, .14), transparent 60%),
    linear-gradient(180deg, var(--navy-deep), var(--navy));
  background-size: var(--grid-sizes), cover, cover;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, fixed, fixed, fixed, scroll, scroll;
  color: var(--paper);
}
.page-head .sec-title { color: var(--paper); font-size: clamp(32px, 5.2vw, 60px); }

/* ---------- 12  Footer & forms ------------------------------------------ */
/* background-color, not the shorthand — the shorthand would reset the grid
   layer set on this element back in section 03. */
.site-foot { background-color: var(--navy-deep); color: rgba(251, 248, 241, .68); }
.foot-title {
  font-family: var(--f-tech);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.foot-link { display: block; padding: 6px 0; font-size: 15px; transition: color .3s, transform .3s var(--ease); }
.foot-link:hover { color: var(--gold-lt); transform: translateX(-4px); }
html[dir='ltr'] .foot-link:hover { transform: translateX(4px); }

.contact-line { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 15px; transition: color .3s; }
.contact-line:hover { color: var(--gold-lt); }
.contact-line svg { flex: none; color: var(--gold); }
.contact-line .val { font-family: var(--f-tech); letter-spacing: .04em; direction: ltr; unicode-bidi: isolate; }

.social {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-onnavy);
  border-radius: 2px;
  color: rgba(251, 248, 241, .75);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.social:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); transform: translateY(-3px); }
.social--ink { border-color: rgba(15, 30, 61, .16); color: var(--navy); }
.social--ink:hover { color: var(--navy); }

/* Compact variant for the header bar. Hidden with the rest of the desktop
   chrome at the nav breakpoint — the drawer carries the link there instead. */
.social--head { width: 36px; height: 36px; flex: none; }
@media (max-width: 1060px) { .site-head .social--head { display: none; } }

.field { display: block; }
.field span { display: block; font-size: 13.5px; font-weight: 500; color: #5c5c5c; margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .16);
}
.field textarea { resize: vertical; min-height: 130px; }

.form-note {
  font-size: 14px;
  padding: 12px 16px;
  border-inline-start: 2px solid var(--gold);
  background: rgba(201, 162, 75, .1);
  color: var(--navy);
}

/* ---------- 13  Motion --------------------------------------------------- */
/* Scoped to .js so content is never hidden when scripting is off. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal='fade']  { transform: none; }
.js [data-reveal='right'] { transform: translateX(28px); }
.js [data-reveal='left']  { transform: translateX(-28px); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cueDrop { 0% { transform: scaleY(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: scaleY(1) translateY(42px); opacity: 0; } }

/* ---------- 14  Utilities ------------------------------------------------ */
/* A small layer replacing the handful of Tailwind classes the markup uses, so
   the site ships without a CSS framework. Breakpoints follow the same scale:
   sm 640 · md 768 · lg 1024 · xl 1280. */
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.relative { position: relative; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.self-start { align-self: flex-start; }
.overflow-hidden { overflow: hidden; }
.list-none { list-style: none; }
.w-full { width: 100%; }
.mx-auto { margin-inline: auto; }
.text-center { text-align: center; }
.z-1 { z-index: 1; }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.gap-2 { gap: .5rem; }  .gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }
.gap-x-6 { column-gap: 1.5rem; } .gap-x-8 { column-gap: 2rem; }
.gap-x-12 { column-gap: 3rem; } .gap-x-14 { column-gap: 3.5rem; }
.gap-x-16 { column-gap: 4rem; } .gap-x-20 { column-gap: 5rem; }
.gap-y-2 { row-gap: .5rem; } .gap-y-6 { row-gap: 1.5rem; } .gap-y-10 { row-gap: 2.5rem; }
.gap-y-12 { row-gap: 3rem; } .gap-y-14 { row-gap: 3.5rem; } .gap-y-16 { row-gap: 4rem; }

.mt-2 { margin-top: .5rem; }   .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-7 { margin-top: 1.75rem; }
.mt-8 { margin-top: 2rem; }    .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; } .mt-16 { margin-top: 4rem; }
.mb-6 { margin-bottom: 1.5rem; }
.p-0 { padding: 0; } .py-6 { padding-block: 1.5rem; }
.py-16 { padding-block: 4rem; } .py-20 { padding-block: 5rem; }

.max-w-xs { max-width: 20rem; }  .max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; }
.max-w-dim { max-width: 220px; }

.leading-8 { line-height: 2rem; }
.leading-loose { line-height: 2; }
.tracking-widest { letter-spacing: .1em; }
.font-display { font-family: var(--f-display); }
.font-extrabold { font-weight: 800; }

.text-13 { font-size: 13px; }   .text-135 { font-size: 13.5px; }
.text-15 { font-size: 15px; }   .text-17 { font-size: 17px; }
.text-18 { font-size: 18px; }   .text-22 { font-size: 22px; }
.text-24 { font-size: 24px; }   .text-28 { font-size: 28px; }

.text-navy { color: var(--navy); }
.text-paper { color: var(--paper); }
.text-body { color: #4a4a4a; }
.text-muted { color: #6a6a6a; }
.text-dim { color: rgba(251, 248, 241, .6); }
.text-gold-dim { color: rgba(201, 162, 75, .75); }
.bg-paper { background: var(--paper); }
.border-t-line { border-top: 1px solid rgba(201, 162, 75, .16); }
.transition-colors { transition: color .3s var(--ease); }
.hover-brick:hover { color: var(--brick); }

.map-frame { width: 100%; height: 420px; display: block; border: 0; filter: grayscale(.25); }

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

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:cols-hero    { grid-template-columns: 1.05fr .95fr; }
  .lg\:cols-8515    { grid-template-columns: .85fr 1.15fr; }
  .lg\:cols-9011    { grid-template-columns: .9fr 1.1fr; }
  .lg\:cols-1-08    { grid-template-columns: 1fr .8fr; }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 15  Reduced motion & print ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .dim-line::after { transform: scaleX(1); }
  /* The crosshair stays — it is a pointer, not an animation. JS drops its
     easing so it tracks instantly instead of gliding. */
  .cad-cursor { transition: none; }
  .cad-cursor .cx-box { transition: none; }
}

/* Touch and small screens.
   1. There is no pointer to track, so the crosshair stands down and the native
      cursor comes back — otherwise resizing a desktop window past this
      breakpoint would leave no cursor at all.
   2. A viewport-anchored background repaints on every scroll frame, which is
      the one place `fixed` attachment costs anything, and mobile Safari
      ignores it regardless — so the lattice scrolls with the section here.
      Any seam between sections sits well below the visible threshold at
      these opacities. */
@media (pointer: coarse), (max-width: 900px) {
  .cad-cursor { display: none; }
  .has-cad-cursor, .has-cad-cursor body,
  .has-cad-cursor a, .has-cad-cursor button, .has-cad-cursor summary,
  .has-cad-cursor input, .has-cad-cursor select, .has-cad-cursor textarea,
  .has-cad-cursor [role="button"], .has-cad-cursor .card,
  .has-cad-cursor .dwg { cursor: auto; }
  .has-cad-cursor a, .has-cad-cursor button, .has-cad-cursor [role="button"],
  .has-cad-cursor .dwg { cursor: pointer; }

  .hero, .page-head, .on-navy, .on-navy2, .on-sand, .on-paper, .site-foot {
    background-attachment: scroll;
  }
}

@media (max-width: 639px) {
  .section { padding-block: 64px; }
  .section--tight { padding-block: 46px; }
  .hero {
    min-height: auto;
    padding-block: calc(var(--head-h) + 34px) 72px;
  }
  .hero-title { font-size: clamp(38px, 12vw, 54px); }
  html[lang="en"] .hero-title { font-size: clamp(34px, 10.5vw, 48px); }
  .hero-lead { margin-top: 18px; font-size: 16px; }
  .hero .sheet-stage, .hero .scroll-cue { display: none; }
  .hero .mt-10 { margin-top: 1.75rem; }
  .hero .mt-14 { margin-top: 2rem; }
  .btn, .link-rule, .lang-switch button, .mobile-nav a, .social { min-height: 44px; }
  .lang-switch button { min-width: 44px; padding-inline: 10px; }
  .btn { padding-inline: 20px; }
  .project-card__foot { align-items: flex-start; flex-direction: column; }
}

@media print {
  .site-head, .mobile-nav, .scroll-cue, .arch-colonnade,
  .cad-cursor, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .has-cad-cursor, .has-cad-cursor body { cursor: auto; }
  /* The lattice is decorative — never spend toner on it. */
  .hero, .page-head, .on-navy, .on-navy2, .on-sand, .on-paper, .site-foot {
    background-image: none;
  }
}