/* =========================================================
   Chamoun Group — Wood Trading & Industry
   -----------------------------------------------------------------
   Design notes, so later edits keep the reasoning:

   Colour is taken from the company's own material, not invented. The slate
   is the brand colour off their logo lockup; the walnut and tan were sampled
   out of their panelling and library photographs. That is why the accent is a
   wood brown rather than a decorative highlight — it is the product.

   Type pairs Fraunces, an old-style serif with real warmth, against Archivo,
   a plain industrial grotesque. Heritage and industry: the two halves of a
   1983 family manufacturer. Arabic is set in IBM Plex Sans Arabic throughout,
   because Fraunces carries no Arabic glyphs.

   The site is deliberately NOT photo-led. The available archive tops out at
   640px on most images, so there is no full-bleed photographic hero anywhere;
   the hero carries type, and photographs are only ever shown at sizes where
   the source resolution still holds up.

   Everything directional uses logical properties, so the Arabic tree at ar/
   is this same stylesheet mirrored by the browser.
   ========================================================= */

:root{
  /* Sampled from the company's own photographs and logo */
  --slate:      #323E48;   /* brand, from the logo lockup */
  --slate-deep: #232C33;
  --ink:        #1E1A17;   /* warm near-black, from the library shot */
  --ink-2:      #2A2521;
  --walnut:     #7A4F33;   /* the panelling — deepened so it reads as wood, not tan */
  --walnut-lt:  #A2683F;
  --tan:        #D2A876;   /* lit wood edge */
  --bone:       #F4F0E8;   /* warm paper */
  --bone-2:     #E9E1D4;
  --card:       #FFFDF9;   /* cards sit above the paper, not flush with it */
  --text:       #241F1B;
  --muted:      #5C5349;   /* darkened: the old value washed out on bone */
  --muted-lt:   rgba(244,240,232,.72);

  --line:       rgba(36,31,27,.16);
  --line-lt:    rgba(244,240,232,.18);

  --head-h:     86px;   /* kept in step with .head-in min-height, both here
                           and in the breakpoints — the hero height is
                           calc(100svh - var(--head-h)) and drifts if not */

  --font-d: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-b: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 56px);
  --sec-y: clamp(64px, 8vw, 124px);
  --ease: cubic-bezier(.22,.68,.32,1);
  --r: 4px;                /* joinery, not pillows: corners stay nearly square */
}

/* Arabic swaps both families; the serif has no Arabic glyphs to fall back on. */
[lang="ar"]{ --font-d: var(--font-ar); --font-b: var(--font-ar); }

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-b);
  font-size:16.5px; line-height:1.65;
  color:var(--text); background:var(--bone);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-d);
  font-weight:600; line-height:1.08; letter-spacing:-.015em;
  margin:0 0 .5em; text-wrap:balance;
  font-variation-settings:"opsz" 96;
}
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3{
  font-weight:700; letter-spacing:0; line-height:1.35;
  font-variation-settings:normal;
}
h1{ font-size:clamp(2.1rem, 5vw, 3.5rem); }
h2{ font-size:clamp(1.6rem, 3.2vw, 2.4rem); }
h3{ font-size:1.06rem; font-family:var(--font-b); font-weight:600;
    letter-spacing:0; line-height:1.35; margin-bottom:.35em; }
p{ margin:0 0 1.1em; }
img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--walnut-lt); outline-offset:3px; border-radius:2px;
}

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

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

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-b); font-size:.92rem; font-weight:500;
  letter-spacing:.01em; text-decoration:none;
  padding:14px 28px; border-radius:var(--r); border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn-solid{ background:var(--walnut); color:#fff; border-color:var(--walnut); }
.btn-solid:hover{ background:var(--walnut-lt); border-color:var(--walnut-lt); }
.btn-line{ background:transparent; color:var(--bone); border-color:var(--line-lt); }
.btn-line:hover{ background:var(--bone); color:var(--ink); border-color:var(--bone); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:500; font-size:.94rem; text-decoration:none;
  color:var(--walnut); border-bottom:1px solid currentColor; padding-bottom:2px;
}
.section-dark .link-arrow{ color:var(--tan); }
.link-arrow::after{
  content:"\2192"; transition:transform .3s var(--ease);
}
[dir="rtl"] .link-arrow::after{ content:"\2190"; }
.link-arrow:hover::after{ transform:translateX(4px); }
[dir="rtl"] .link-arrow:hover::after{ transform:translateX(-4px); }

.eyebrow{
  font-family:var(--font-b);
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--tan); margin:0 0 1.4em;
}
[lang="ar"] .eyebrow{ letter-spacing:.06em; }
.eyebrow-dark{ color:var(--walnut); }

/* =========================================================
   HEADER
   ========================================================= */
.site-head{
  position:sticky; top:0; z-index:60;
  background:var(--slate-deep);
  border-bottom:1px solid var(--line-lt);
}
.head-in{ display:flex; align-items:center; gap:clamp(14px,2.4vw,36px); min-height:86px; }

.brand{ flex:none; display:block; }
.brand img{ width:auto; height:34px; }

.nav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); margin-inline-end:auto; }
.nav a{
  font-size:.9rem; font-weight:500; text-decoration:none;
  color:var(--muted-lt); padding-block:6px; position:relative;
  transition:color .25s var(--ease);
}
.nav a:hover{ color:var(--bone); }
.nav a[aria-current="page"]{ color:var(--bone); }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:2px; background:var(--walnut);
}

.head-end{ display:flex; align-items:center; gap:16px; flex:none; }
.lang{
  font-size:.82rem; font-weight:600; text-decoration:none; color:var(--bone);
  border:1px solid var(--line-lt); border-radius:var(--r); padding:6px 13px;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.lang:hover{ background:rgba(242,237,229,.1); border-color:var(--bone); }
/* The number itself is on the contact page; up here it is an action. Giving it
   the walnut fill also puts the one warm colour into an otherwise cool bar. */
.head-call{
  font-size:.86rem; font-weight:600; text-decoration:none; color:#fff;
  background:var(--walnut); border:1px solid var(--walnut); border-radius:var(--r);
  padding:9px 20px; white-space:nowrap;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.head-call:hover{ background:var(--walnut-lt); border-color:var(--walnut-lt); }

/* ---------------- social marks ---------------- */
.social{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.social a{
  display:grid; place-items:center; width:40px; height:40px;
  border-radius:var(--r); color:var(--muted-lt); text-decoration:none;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.social a:hover{ color:var(--bone); background:rgba(244,240,232,.10); }
.social svg{ width:21px; height:21px; display:block; }
/* WhatsApp is third and earns its own colour on hover — people look for it. */
.social li:last-child a:hover{ color:#25D366; }

.foot-social{ margin-inline-start:-8px; margin-bottom:10px; }
.foot-wa{ margin:0; font-size:.9rem; }
.foot-wa a{ text-decoration:none; }
.foot-wa a:hover{ color:var(--bone); }

.mob-social{ margin-top:18px; gap:6px; }
.mob-social a{ width:44px; height:44px; border:1px solid var(--line-lt); }
.mob-call{
  margin-top:16px; color:var(--tan) !important; font-weight:600;
  border-bottom:0 !important;
}

.burger{
  display:none; flex:none; width:42px; height:42px; padding:10px;
  background:transparent; border:1px solid var(--line-lt); border-radius:var(--r); cursor:pointer;
}
.burger span{ display:block; height:1.5px; background:var(--bone); margin:4px 0; transition:.3s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.mobnav{ display:none; flex-direction:column; padding:8px var(--pad) 22px; background:var(--slate-deep); }
.mobnav a{
  padding:13px 0; font-size:1.02rem; text-decoration:none; color:var(--bone);
  border-bottom:1px solid var(--line-lt);
}
.mob-lang{ margin-top:14px; color:var(--tan) !important; border-bottom:0 !important; }

/* =========================================================
   HERO — type, not photography
   ========================================================= */
/* One screen, deliberately. The header is sticky rather than fixed, so the
   hero starts below it and the available height is the viewport minus the bar.
   svh (not vh) so mobile browsers do not hide the bottom behind their chrome. */
.hero{
  position:relative; overflow:hidden;
  background:var(--slate-deep); color:var(--bone);
  min-height:calc(100svh - var(--head-h));
  display:flex; align-items:center;
  padding-block:clamp(30px, 5vh, 70px);
}
/* A grain suggested rather than photographed: fine vertical striations at a
   slight rake, the way a sawn board reads from across a room. Kept under 5%
   contrast so it never competes with the type. */
.hero-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(96deg,
      rgba(242,237,229,.030) 0px, rgba(242,237,229,.030) 1px,
      transparent 1px, transparent 5px),
    repeating-linear-gradient(96deg,
      rgba(0,0,0,.055) 0px, rgba(0,0,0,.055) 2px,
      transparent 2px, transparent 13px),
    radial-gradient(120% 90% at 78% 0%, rgba(138,94,66,.30), transparent 62%);
  mask-image:linear-gradient(to bottom, #000 35%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 35%, transparent 100%);
}
/* A forest behind the type, well faded. It sits under the grain and under the
   scrim, desaturated and masked away toward the bottom so the marks and the
   lead keep their contrast. The source is only 740px wide and is stretched far
   past that, which is why it was blurred on the way in. */
.hero-photo{
  position:absolute; inset:0; pointer-events:none;
  background:url("../img/hero-forest.jpg") center 38% / cover no-repeat;
  /* .20 shifted the ground by only 4% — invisible rather than faded.
     At .40 the forest actually reads, and the headline still measures
     7.6:1 against the 3:1 it needs. */
  opacity:.40;
  filter:saturate(.45) contrast(1.04);
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 45%, transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 45%, transparent 92%);
}
/* Sits above the photo so the ground reads as one surface, not two layers. */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(35,44,51,.42) 0%, rgba(35,44,51,.30) 42%, rgba(35,44,51,.78) 100%);
}

.hero-in{ position:relative; z-index:1; }

/* Scaled by height as well as width, so the three lines cannot push the marks
   off a short laptop screen. min() picks whichever dimension is tighter. */
.hero-h1{
  font-size:clamp(2.2rem, min(6.6vw, 8.2vh), 5.2rem);
  line-height:1.0; letter-spacing:-.03em; margin:0 0 .42em; max-width:16ch;
  font-variation-settings:"opsz" 144;
}
[lang="ar"] .hero-h1{ line-height:1.28; letter-spacing:0; font-variation-settings:normal; }
.hero-h1 .l{ display:block; }
.hero-h1 .l:last-child{ color:var(--tan); }

.hero-lead{
  max-width:56ch; font-size:clamp(.98rem,1.3vw,1.1rem);
  color:var(--muted-lt); margin-bottom:clamp(18px, 3vh, 34px);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:clamp(26px, 5vh, 62px); }

.hero-marks{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(18px,3vw,40px);
  border-top:1px solid var(--line-lt); padding-top:clamp(16px, 2.6vh, 30px);
  max-width:760px;
}
.mark-v{
  display:block; font-family:var(--font-d); font-size:clamp(1.35rem, min(2.6vw, 3.2vh), 2rem);
  font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--bone);
  font-variation-settings:"opsz" 72;
}
[lang="ar"] .mark-v{ font-variation-settings:normal; }
.mark-k{
  display:block; margin-top:.55em;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-lt);
}
[lang="ar"] .mark-k{ letter-spacing:.04em; }

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ padding-block:var(--sec-y); }
.section-dark{ background:var(--ink); color:var(--bone); }
.section-dark h2, .section-dark h3{ color:var(--bone); }

.sec-head{ max-width:62ch; margin-bottom:clamp(34px,5vw,58px); }
.sec-lead{ font-size:1.04rem; color:var(--muted); margin:0; }
.section-dark .sec-lead{ color:var(--muted-lt); }
.sec-more{ margin-top:clamp(28px,4vw,44px); margin-bottom:0; }

/* Cards with their own borders, not cells in a hairline grid.
   The old version painted the gaps by showing a background through 1px gutters,
   which meant a group of six in a four-column track left two grey voids sitting
   there looking like a bug. Bordering each card makes leftover space simply
   empty, whatever the item count. Three columns also divides six exactly. */
.pillars{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);
}
.pillars[data-count="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.pillars[data-count="4"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }

.pillar, .pillars li{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.4vw,32px);
  transition:border-color .3s var(--ease), transform .3s var(--ease),
             box-shadow .3s var(--ease);
}
.pillars li:hover{
  border-color:var(--walnut); transform:translateY(-3px);
  box-shadow:0 16px 34px -24px rgba(36,31,27,.55);
}
.pillars li h3{ color:var(--text); font-size:1.04rem; margin-bottom:.5em; }
.pillars li p{ margin:0; color:var(--muted); font-size:.93rem; line-height:1.6; }

.section-dark .pillars li{ background:rgba(244,240,232,.045); border-color:var(--line-lt); }
.section-dark .pillars li:hover{ border-color:var(--tan); background:rgba(244,240,232,.075); }
.section-dark .pillars li h3{ color:var(--bone); }
.section-dark .pillars li p{ color:var(--muted-lt); }

/* =========================================================
   PROJECT GRID
   The archive is small — 640px on most files — so tiles are kept narrow
   enough that the source still resolves. Nothing is ever shown full-bleed.
   ========================================================= */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:clamp(14px,2vw,26px);
}
.shot{ margin:0; }
.shot img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r); background:var(--ink-2);
  filter:saturate(.94);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
@media (hover:hover){
  .shot:hover img{ transform:scale(1.03); filter:saturate(1.04); }
}
.shot{ overflow:hidden; }
.shot > img{ will-change:transform; }
/* Every tile is the same size. The library shot used to span two columns at
   16:9 while its neighbours were one column at 4:3, so its row was far taller
   than they were and left a hole beside them. With a mixed-ratio archive of
   this size a uniform grid is both the honest answer and the one that keeps
   aligning as photographs are added. */

.shot figcaption{ padding-top:12px; }
.shot figcaption strong{
  display:block; font-size:.95rem; font-weight:600; margin-bottom:.15em;
}
.shot figcaption span{
  display:block; font-size:.86rem; color:var(--muted);
  /* Reserve two lines whether the caption needs them or not. Without this a
     one-line caption makes its whole row shorter than the next, and the grid
     reads as misaligned even though the images line up perfectly. */
  min-height:3.3em;
}
.section-dark .shot figcaption span{ color:var(--muted-lt); }
.grid-note{
  margin-top:clamp(24px,3vw,36px); margin-bottom:0;
  font-size:.84rem; color:var(--muted);
}

/* =========================================================
   STORY BAND
   ========================================================= */
.story{ background:var(--bone-2); }
.story-in{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(26px,5vw,72px); align-items:start;
}
.story-year{
  font-family:var(--font-d); font-weight:700;
  font-size:clamp(4rem,12vw,10rem); line-height:.8; letter-spacing:-.05em;
  margin:0; color:transparent;
  -webkit-text-stroke:1.5px var(--walnut);
  font-variation-settings:"opsz" 144;
  /* The founding year, used as structure. It is the company's one hard fact. */
}
.story-in h2{ margin-top:.1em; }
.story-in p{ color:var(--muted); max-width:56ch; }

/* =========================================================
   INNER PAGE HEADER
   ========================================================= */
.page-hero{
  background:var(--slate); color:var(--bone);
  padding-block:clamp(46px,6vw,80px);
}
.page-hero h1{ margin-bottom:.28em; }
.page-lead{ max-width:58ch; color:var(--muted-lt); margin:0; font-size:1.04rem; }
.crumbs{ font-size:.8rem; color:var(--muted-lt); margin:0 0 1.4em; }
.crumbs a{ color:var(--tan); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs span{ opacity:.45; margin-inline:.6em; }

/* =========================================================
   ABOUT
   ========================================================= */
.prose-wrap{
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:clamp(30px,5vw,74px); align-items:start;
}
.prose p{ font-size:1.06rem; }
.prose p:first-child{
  font-size:clamp(1.16rem,1.9vw,1.4rem); line-height:1.5; color:var(--ink);
  font-family:var(--font-d); font-variation-settings:"opsz" 48;
}
[lang="ar"] .prose p:first-child{ font-variation-settings:normal; line-height:1.7; }

.aside-card{
  background:var(--slate); color:var(--bone);
  padding:clamp(24px,3vw,34px); border-radius:var(--r);
  position:sticky; top:100px;
}
.aside-year{
  font-family:var(--font-d); font-size:2.6rem; font-weight:700; line-height:1;
  margin:0 0 .3em; color:var(--tan); font-variation-settings:"opsz" 96;
}
[lang="ar"] .aside-year{ font-variation-settings:normal; }
.aside-note{ font-size:.9rem; color:var(--muted-lt); margin-bottom:1.4em; }
.aside-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-lt); }
.aside-list li{ padding-block:11px; border-bottom:1px solid var(--line-lt); font-size:.92rem; }
.aside-list a{ color:var(--bone); text-decoration:none; }
.aside-list a:hover{ color:var(--tan); }

/* =========================================================
   SERVICES / CTA BAND
   ========================================================= */
.svc-block + .svc-block{ padding-top:0; }
.cta-band{ padding-block:clamp(48px,6vw,84px); }
.cta-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(22px,4vw,50px); flex-wrap:wrap;
}
.cta-in h2{ margin:0; max-width:24ch; font-size:clamp(1.4rem,2.6vw,2rem); }

/* =========================================================
   CONTACT
   ========================================================= */
/* The enquiry form is the only thing in this column now, and it is kept
   deliberately compact: the map below carries the phone, mobile and email, and
   a tall form would push it off the first screen on the page people open
   precisely to find those. */
.contact-only{ max-width:660px; }
.section-tight{ padding-block:clamp(36px,4.5vw,64px); }
.contact-only .field{ margin-bottom:14px; }
.contact-only .f-row{ gap:0 14px; }
.contact-only .field input,
.contact-only .field select,
.contact-only .field textarea{ padding:10px 13px; font-size:.94rem; }
.contact-only h2{ font-size:1.35rem; margin-bottom:.7em; }
.f-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 18px; }
.field{ margin:0 0 18px; }
.field label{
  display:block; font-size:.82rem; font-weight:600; margin-bottom:6px;
}
.opt{ font-weight:400; color:var(--muted); }
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:.97rem;
  padding:12px 14px; color:var(--text); background:#fff;
  border:1px solid var(--line); border-radius:var(--r);
}
.field textarea{ resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--walnut); outline-offset:0; border-color:transparent;
}
.field.err input, .field.err textarea{ border-color:#B3402F; background:#FDF4F2; }
.hp{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ margin:14px 0 0; font-size:.9rem; color:#B3402F; }
.form-note.ok{ color:#3F6B4A; }


/* =========================================================
   MAP
   ========================================================= */
.section-flush{ padding:0; }
.map-band{
  position:relative; background:var(--slate-deep);
  min-height:clamp(380px, 44vw, 540px); display:flex; align-items:center;
}
.map-frame{ position:absolute; inset:0; }
.map-frame iframe{
  width:100%; height:100%; border:0; display:block;
  /* Pulled back a touch so Google's colours do not fight the page. */
  filter:grayscale(.22) contrast(1.04);
}
.map-over{ position:relative; width:100%; padding-block:clamp(34px,5vw,64px);
  pointer-events:none; }
.map-card{
  pointer-events:auto; max-width:440px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,3vw,34px);
  box-shadow:0 28px 64px -34px rgba(20,16,12,.65);
}
.map-addr{
  font-family:var(--font-d); font-size:1.12rem; line-height:1.4;
  margin:0 0 .2em; color:var(--text);
}
[lang="ar"] .map-addr{ line-height:1.7; }
.map-contact{
  list-style:none; margin:.2em 0 1.5em; padding:0; border-top:1px solid var(--line);
}
.map-contact li{
  display:grid; grid-template-columns:minmax(58px,auto) 1fr; gap:14px;
  align-items:baseline; padding-block:9px; border-bottom:1px solid var(--line);
}
.map-contact span{
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
[lang="ar"] .map-contact span{ letter-spacing:.03em; font-size:.74rem; }
.map-contact a{ font-size:.95rem; color:var(--text); text-decoration:none; word-break:break-word; }
.map-contact a:hover{ color:var(--walnut); }


/* On a phone an overlay card on top of a map leaves neither readable, so the
   two separate: map above at a fixed height, card below it. */
@media (max-width:760px){
  .map-band{ display:block; min-height:0; }
  .map-frame{ position:relative; inset:auto; height:clamp(240px, 52vw, 340px); }
  .map-over{ padding-block:clamp(24px,5vw,40px); }
  .map-card{ max-width:none; }
}

/* The contact page is the one people open to find a phone number, so the map
   has to be reachable without hunting for it. Everything above it is trimmed:
   a shorter page header, a tighter section, and a form that stays complete but
   stops sprawling. Measured target is the map starting inside a 900px viewport. */
.page-hero-tight{ padding-block:clamp(30px,3.4vw,46px); }
.page-hero-tight h1{ margin-bottom:.18em; }
.page-hero-tight .crumbs{ margin-bottom:.9em; }
.page-hero-tight .page-lead{ font-size:.98rem; }
.section-tight{ padding-block:clamp(28px,3.4vw,44px); }
.contact-only .field{ margin-bottom:12px; }
.contact-only h2{ font-size:1.28rem; margin-bottom:.55em; }
.map-band .map-over{ padding-block:clamp(28px,4vw,52px); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot{ background:var(--slate-deep); color:var(--muted-lt); padding-top:clamp(48px,6vw,78px); }
.foot-in{
  display:grid; grid-template-columns:2fr 1fr 1.2fr 1fr;
  gap:clamp(26px,4vw,48px); padding-bottom:clamp(34px,4vw,54px);
}
.foot-brand img{ width:auto; height:24px; margin-bottom:16px; }
.foot-legal{ font-size:.86rem; margin-bottom:.4em; max-width:32ch; }
.foot-since{
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tan); margin:0;
}
[lang="ar"] .foot-since{ letter-spacing:.05em; }
.foot-h{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone); margin:0 0 1em;
}
[lang="ar"] .foot-h{ letter-spacing:.04em; }
.foot-col ul{ list-style:none; margin:0; padding:0; }
.foot-col li{ margin-bottom:.6em; font-size:.9rem; }
.foot-col a{ text-decoration:none; }
.foot-email{ color:var(--tan); }
.foot-email:hover{ color:var(--bone); }
.foot-col a:hover{ color:var(--bone); }
.foot-col .plain{ line-height:1.5; }

.foot-bar{
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  border-top:1px solid var(--line-lt); padding-block:20px;
  font-size:.82rem;
}
.foot-bar p{ margin:0; }
.foot-bar a{ color:var(--tan); text-decoration:none; }

/* =========================================================
   MOVEMENT
   Everything here is opt-in: the .js class is only on the root when the
   script ran, so with JavaScript off nothing is ever left invisible. All of
   it is switched off wholesale under prefers-reduced-motion at the foot of
   this file.
   ========================================================= */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{
    opacity:0; transform:translateY(20px);
    transition:opacity .75s var(--ease) var(--d,0s),
               transform .75s var(--ease) var(--d,0s);
  }
  .js .reveal.in{ opacity:1; transform:none; }

  /* The grain drifts, very slowly. A dead-still gradient is what made the
     hero read as flat; this is barely perceptible but the eye registers it. */
  .hero-grain{ animation:drift 34s var(--ease) infinite; }
  @keyframes drift{
    0%,100%{ transform:translate3d(0,0,0) scale(1.02); }
    50%    { transform:translate3d(-1.6%,1.1%,0) scale(1.07); }
  }

  /* A hairline that draws itself across the hero as the marks arrive.
     It lives on a ::before rather than on .hero-marks itself: declaring a
     transition on the element would replace the one .reveal sets, and the
     marks would then snap in with no fade while everything around them faded. */
  .js .hero-marks{ position:relative; }
  .js .hero-marks::before{
    content:""; position:absolute; top:-1px; inset-inline-start:0;
    height:1px; width:0; background:var(--tan);
    transition:width 1.1s var(--ease) .5s;
  }
  .js .hero-marks.in::before{ width:100%; }
}

/* The project photographs lift slightly on hover, which is the only place the
   images themselves can suggest depth at this resolution. */
.shot{ transition:transform .4s var(--ease); }
@media (hover:hover){ .shot:hover{ transform:translateY(-4px); } }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1040px){
  :root{ --head-h:78px; }
  .head-in{ min-height:78px; }
  .brand img{ height:30px; }
  .nav{ display:none; }
  .burger{ display:block; }
  .head-in{ justify-content:space-between; }
  .head-end{ margin-inline-start:auto; }
  .mobnav.open{ display:flex; }
  .foot-in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* Below this the bar cannot hold everything: brand, three marks, the language
   switch, the call button and the burger together need more width than a phone
   has, and the burger ends up jammed against the edge. The social marks drop
   out because the drawer already carries them; the language switch stays,
   because someone landing in the wrong language needs it without opening a
   menu, and Call stays because on a phone it is the likeliest action. */
@media (max-width:760px){
  :root{ --head-h:70px; }
  .head-in{ min-height:70px; gap:12px; }
  .head-social{ display:none; }
  .head-end{ gap:10px; }
  .brand img{ height:26px; }
  .head-call{ padding:9px 14px; font-size:.84rem; }
  .lang{ padding:6px 10px; }
}
/* Under about 400px even that does not fit. Call wins the last slot over the
   language switch: the drawer directly below carries both, and a phone user
   tapping the header is almost always trying to ring someone. */
@media (max-width:460px){
  .brand img{ height:22px; }
}
/* Measured, not guessed: with the 22px logo the bar needs about 395px for
   brand + language + Call + burger. Above 400 they all fit, so the switch is
   only dropped below that — which keeps it on a 414px iPhone. */
@media (max-width:400px){
  .lang{ display:none; }
}
@media (max-width:980px){
  .pillars, .pillars[data-count="2"], .pillars[data-count="4"]{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width:860px){
  .prose-wrap, .contact-wrap{ grid-template-columns:1fr; }
  .aside-card{ position:static; }
  .story-in{ grid-template-columns:1fr; }
  .hero-marks{ grid-template-columns:1fr; gap:16px; }
  .mark{ display:flex; align-items:baseline; gap:14px; }
  .mark-k{ margin-top:0; }
}
@media (max-width:620px){
  .pillars, .pillars[data-count="2"], .pillars[data-count="4"]{ grid-template-columns:1fr; }
  .f-row{ grid-template-columns:1fr; }
  .foot-in{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; }
  .cta-in{ align-items:flex-start; }
}

/* iOS zooms a focused field under 16px and never zooms back out. */
@media (hover:none) and (pointer:coarse){
  .field input, .field select, .field textarea{ font-size:16px; }
}

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

@media print{
  .site-head, .site-foot, .hero-cta, .burger{ display:none; }
  body{ background:#fff; color:#000; }
}