/* Eyad v3 (30 Sept): v1's page and rings, with the v2 hero, map, footer and background.
   The v3 additions are at the end of this file, after v1's rules. v1 header follows.
   Eyad: one page, RTL first. Tokens at :root, no framework, no build step.
   Palette measured from the logo (brown, green) and the packs (tile colours). */

/* Alexandria, a variable font: one file per script covers 600 to 700. Headings sit at 600, the weight
   Feras chose from the comparison sheet on 25 Sept (Eyad asked for sharper, more professional). */
@font-face {
  font-family: "Alexandria";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(assets/fonts/alexandria-600-700-arabic.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Alexandria";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(assets/fonts/alexandria-600-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-sans-arabic-400-arabic.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/ibm-plex-sans-arabic-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* brown: the text colour, measured on the first logo.jpeg and kept for the copy and the packs.
     green and red: exact fills from Eyad's vector logo (24 Sept), rgb(0, 122, 56) and rgb(237, 28, 36).
     White on --green is 5.5:1; --red is for rules and marks, never for body text (4.0:1 on cream). */
  --brown: #69321a;
  --green: #007a38;
  --green-deep: #005c2a;
  --red: #ed1c24;
  /* canvas: brown on it is 9.4:1; the deeper cream is the nav, the about band and the cards */
  --cream: #faf6ee;
  --cream-deep: #f3ecdd;
  --line: #d9c6b0;
  /* bands and tiles, one colour per brand, pulled from the packs; brown on each is at least 6:1 */
  --tile-eyad: #f0ad57;   /* caramel orange, brown on it 5.2:1 (was the pouch tan, too close to cream) */
  --tile-cana: #ffffff;
  --tile-cana-edge: #e82819;
  --tile-osa: #f5c842;    /* sunflower yellow, brown on it 6.4:1 (was the pack body straw) */
  --tile-osa-edge: #fe0001;
  --tile-tots: #c9d9e5;
  /* 29 Sept, Eyad: a pack on a band of its own colour disappears (caramel on caramel, yellow on
     yellow). Bands are now white and deep cream in turn; the brand colours above survive as accents
     only: the chip, the sawtooth seal and a pale halo behind each pack. */
  --band-light: #ffffff;
  --band-warm: var(--cream-deep);
  /* v3: each halo is the pack's opposite, not its echo (Eyad, 29 Sept: caramel on caramel and yellow on
     yellow lost the pack). EYAD caramel on sage, OSA yellow on sky, Cana white on blush, TOTS on sand. */
  --tint-eyad: #dfe9d8;
  --tint-osa: #dce8f2;
  --tint-cana: #f8dad4;
  --tint-tots: #efe3cb;
  /* pill: white on the logo green is 5.5:1 */
  --pill-bg: #007a38;
  --pill-fg: #ffffff;

  --font-display: "Alexandria", "Tajawal", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", system-ui, sans-serif;

  --radius-card: 16px;
  --radius-pill: 50px;
  --radius-panel: 24px;
  --gap: 16px;
  --section: 56px;
  /* wheel geometry, read by .rail.wheel and its spacers */
  --wheel-tile: 230px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--brown);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  overflow-x: hidden;
}

img, picture { display: block; max-width: 100%; height: auto; }

a { color: var(--brown); text-underline-offset: 3px; }
a:focus-visible, .pill:focus-visible, .arrow:focus-visible, .chip:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  color: var(--brown);
}
h1 { font-size: clamp(38px, 10.5vw, 68px); line-height: 1.12; text-wrap: balance; }
h2 { font-size: clamp(34px, 8.5vw, 52px); line-height: 1.1; text-wrap: balance; }
h3 { font-size: 24px; }
p { margin: 0; }

.container { max-width: 1280px; margin-inline: auto; padding-inline: 16px; }

section { padding-block: var(--section); position: relative; }

.section-head { text-align: center; margin-block-end: 28px; }
.section-head h2::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--green); margin: 12px auto 0; }
.section-head p { margin-block-start: 12px; max-width: 44ch; margin-inline: auto; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* skip link: hidden until focused */
.skip {
  position: absolute;
  inset-inline-start: 16px;
  top: -60px;
  background: var(--brown);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  z-index: 40;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* pills */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 17px;
  text-decoration: none;
  border: 2px solid transparent;
  white-space: nowrap;
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1), background-color 160ms;
}
.pill:active { transform: scale(0.97); transition-duration: 100ms; }
.pill-green { background: var(--pill-bg); color: var(--pill-fg); border-color: var(--pill-bg); box-shadow: 0 6px 18px rgba(105, 50, 26, 0.16); }
.pill-green:hover { background: var(--green-deep); border-color: var(--green-deep); }
.pill-outline { background: transparent; color: var(--brown); border-color: var(--brown); }
.pill-outline:hover { background: var(--cream-deep); }
.pill-light { background: #fff; color: var(--green); border-color: #fff; }
.pill-light:hover { background: var(--cream); }
.pill-ghost { background: transparent; color: #fff; border-color: #fff; }
.pill-ghost:hover { background: rgba(255, 255, 255, 0.14); }
.pill svg { width: 22px; height: 22px; flex: none; }
@media (hover: hover) { .pill-green:hover svg { animation: wiggle 500ms ease-in-out; } }
@keyframes wiggle { 25% { transform: rotate(-12deg); } 60% { transform: rotate(10deg); } }

/* preview strip, shown only while PREVIEW is true */
#preview-strip {
  background: #e9ca9c;
  color: var(--brown);
  padding: 8px 0;
  font-size: 14px;
  text-align: center;
  z-index: 2;
}

/* nav: one row on the phone */
nav { background: var(--cream-deep); border-bottom: 3px solid var(--red); position: relative; z-index: 3; overflow-x: clip; }
.nav-links { min-width: 0; }
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-block: 8px; }
.nav-logo { display: inline-flex; align-items: center; flex: none; }
.nav-logo img { height: 42px; width: auto; }
.nav-links { display: flex; gap: 2px 14px; list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.nav-links a { text-decoration: none; padding: 10px 2px; display: inline-block; font-size: 15px; position: relative; white-space: nowrap; }
.nav-links a::after { content: ""; position: absolute; inset-inline: 2px; bottom: 6px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: right; transition: transform 250ms var(--ease); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-wa { min-height: 44px; width: 44px; padding: 0; border-radius: 50%; flex: none; box-shadow: none; }
/* a circle at every size: .pill.nav-fb outranks the wider desktop .pill padding */
.pill.nav-fb { --fb: 44px; width: var(--fb); height: var(--fb); min-height: 0; padding: 0; border-radius: 50%; flex: none; box-shadow: none; }
/* the same height as the WhatsApp pill beside it, measured: 53px from 900px, 59px from 1200px */
@media (min-width: 900px) { .pill.nav-fb { --fb: 53px; } }
@media (min-width: 1200px) { .pill.nav-fb { --fb: 59px; } }
.nav-wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 379px) { .nav-links a { font-size: 14px; } .nav-links { gap: 6px; } .nav-logo img { height: 38px; } }
@media (min-width: 760px) {
  .nav-row { padding-block: 12px; gap: 24px; }
  .nav-logo img { height: 48px; }
  .nav-links { gap: 22px; margin-inline-start: auto; }
  .nav-links a { font-size: 16px; }
  .nav-wa { width: auto; padding: 10px 22px; border-radius: var(--radius-pill); }
  .nav-wa-label { position: static; width: auto; height: auto; clip-path: none; }
}

/* the green spine: a ticker of the brands under the hero */
.ticker { background: var(--green); color: #fff; overflow: hidden; margin-block-start: 28px; padding-block: 10px; font-family: var(--font-display); font-size: 20px; line-height: 1.3; position: relative; z-index: 1; }
.track { display: flex; align-items: center; gap: 26px; width: max-content; will-change: transform; animation: ticker 40s linear infinite; }
.track > * { flex: none; }
.track .dot { width: 14px; height: 14px; fill: var(--cream); opacity: 0.9; }
@keyframes ticker { to { transform: translateX(50%); } }
.ticker:hover .track, .ticker:active .track { animation-play-state: paused; }

@media (min-width: 900px) {
  .ticker { margin-block-start: 48px; font-size: 24px; padding-block: 12px; }
}

/* ---------------------------------------------------------------------------
   Phone scale, 22 Sept: the page read as oversized on a handset (Feras, from a
   friend's look at v10). One step at 599px and under, roughly 15% off the type
   and a third off the vertical rhythm, so the poster feel survives on desktop
   where it was approved and the phone reads as a site rather than a billboard.
   --------------------------------------------------------------------------- */
@media (max-width: 599px) {
  :root { --section: 44px; --gap: 14px; }
  body { font-size: 16px; }
  h1 { font-size: clamp(30px, 8.7vw, 68px); }
  h2 { font-size: clamp(26px, 7.2vw, 52px); }
  h3 { font-size: 21px; }
  .hero-actions { margin-block-start: 18px; gap: 10px; }
  .pill { min-height: 44px; padding: 9px 20px; font-size: 16px; }
  .pill svg { width: 20px; height: 20px; }
  .ticker { font-size: 17px; margin-block-start: 22px; padding-block: 8px; }
  .track { gap: 20px; }
  .track .dot { width: 11px; height: 11px; }
  .section-head { margin-block-end: 22px; }
  .chips { margin-block-end: 18px; padding-block-end: 10px; }
  .chip { font-size: 15px; }
  .brand { padding-block: 32px 34px; }
  .brand + .brand { padding-block-start: 40px; }
  .brand-head { margin-block-end: 14px; }
  .brand-head h3 { font-size: clamp(36px, 10.5vw, 108px); }
  .brand-head span { font-size: 13px; }
  .tile { flex: 0 0 min(200px, 54vw); }
  :root { --wheel-tile: min(196px, 52vw); }
  .tile figcaption { font-size: 15px; margin-block-start: 8px; }
  .dock .pill { min-height: 42px; font-size: 15px; }
  .letterhead, .contact-item { font-size: 15px; }
}

/* products: four full-bleed brand bands, white and deep cream in turn, a sawtooth seal in the brand colour */
#products { padding-block-end: 0; overflow-x: clip; z-index: 1; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 14px; margin-block-end: 24px; }
@media (min-width: 760px) { .chips { justify-content: center; } }
.chips::-webkit-scrollbar { display: none; }
.chip { --chip: var(--cream); flex: none; border: 2px solid var(--brown); border-radius: var(--radius-pill); padding: 6px 16px; text-decoration: none; background: var(--chip); font-family: var(--font-display); font-size: 17px; line-height: 1.4; white-space: nowrap; transition: transform 200ms var(--ease), background-color 200ms; }
.chip:hover { transform: translateY(-2px); }
.chip-eyad.is-current { background: var(--tile-eyad); }
.chip-cana.is-current { background: var(--tile-cana); }
.chip-osa.is-current { background: var(--tile-osa); }
.chip-tots.is-current { background: var(--tile-tots); }
.brand { --band: var(--band-light); --teeth: var(--tile-eyad); position: relative; background: var(--band); padding-block: 40px 44px; scroll-margin-top: 16px; isolation: isolate; }
.brand + .brand { padding-block-start: 52px; }
.brand-eyad { z-index: 5; }
.brand-osa { --band: var(--band-warm); --teeth: var(--tile-osa); z-index: 4; }
.brand-cana { --band: var(--band-light); --teeth: var(--tile-cana-edge); z-index: 2; }
.brand-tots { --band: var(--band-warm); --teeth: #a4c1d6; z-index: 1; }
/* the single-pack band: the tile sits centred (OSA became a ring on 29 Sept) */
.brand-eyad .rail { justify-content: center; }
.brand::after { content: ""; position: absolute; inset-inline: 0; bottom: -10px; height: 10px; z-index: 2; pointer-events: none; background: conic-gradient(from -45deg at 50% 100%, var(--teeth) 90deg, #0000 0) 0 0 / 20px 10px repeat-x; }
.brand > .container { position: relative; z-index: 1; }
.brand-head { display: grid; gap: 6px; margin-block-end: 18px; justify-items: start; }
.brand-head span { font-size: 14px; line-height: 1.6; padding: 2px 12px; border: 1.5px solid var(--brown); border-radius: var(--radius-pill); }
.brand-head h3 { font-size: clamp(48px, 13vw, 108px); line-height: 1; }
.rail {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  margin-inline: -16px;
  padding: 8px 16px 16px;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------------------
   The wheel (rebuilt 23 Sept). The packs sit on a real ring: each one is placed
   by angle, so the pack at the front faces you and the others curve away to the
   sides and behind. One of each pack, once, and endless by construction, which
   the cloned strip could never be: that version showed the same pack twice on a
   short list and ran out of packs at the end of the strip.

   The rail is still the scroller, it just scrolls an empty track now, so swipe,
   momentum, RTL and the keyboard stay the browser's. Nothing moves on its own.
   Reduced motion or no JavaScript leaves the flat snap rail that shipped before.
   --------------------------------------------------------------------------- */
/* The ring needs a stage of its own. Absolute positioning inside a scroll container anchors to the
   scrollable content, which here is a 33,000 px track, so packs placed at left:50% landed miles away
   and the band rendered empty (23 Sept). So: a wrapper, the empty scroll rail stretched across it to
   take the swipe, and the packs on a stage above it that ignores pointer events. */
/* the gesture is ours now, so the wrap takes the pointer and the page keeps the vertical axis */
/* height was a one-time JS measurement of the tile in the grid-laid-out rail, taken before it moved
   to the stage at its real --wheel-tile width; the two widths disagree at 900px and 1200px, so the
   frozen height came out short and the front pack's caption ran past the band's own bottom edge
   (Feras, on his iPad and Mac, 24 Sept). CSS now tracks --wheel-tile directly, at every breakpoint,
   with no snapshot to go stale: tile height is 5/4 of its width (the 4:5 pack image), plus room for
   one line of caption under it. */
.wheel-wrap { position: relative; margin-inline: -16px; touch-action: pan-y; cursor: grab; height: calc(var(--wheel-tile) * 1.25 + 48px); }
.wheel-wrap:active { cursor: grabbing; }
.wheel-wrap:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; border-radius: 12px; }
/* a pack is an image, and dragging an image starts Chrome's own picture drag, which cancels the
   pointer stream a few pixels into every turn of the ring (23 Sept) */
.wheel-stage .tile { pointer-events: auto; cursor: pointer; }
.wheel-wrap, .wheel-stage .tile { user-select: none; -webkit-user-select: none; }
.wheel-stage .tile img { -webkit-user-drag: none; pointer-events: none; }
/* the rail has no job once the packs are on the stage and the gesture is ours: an empty scroll
   container under the ring claimed every horizontal drag and cancelled our pointer stream after
   six pixels, so it goes away entirely once JavaScript takes over (23 Sept) */
.wheel-wrap .rail.wheel { display: none; }
.wheel-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; perspective: 1000px; perspective-origin: 50% 42%; }
/* the ring fills the band on a wide screen, where 230 px packs looked lost in it */
@media (min-width: 900px) { :root { --wheel-tile: 300px; } }
@media (min-width: 1200px) { :root { --wheel-tile: 340px; } }
.wheel-stage .tile {
  position: absolute; top: 0; left: 50%; width: var(--wheel-tile); margin: 0 0 0 calc(var(--wheel-tile) / -2);
  transform-origin: 50% 55%; backface-visibility: hidden; will-change: transform, opacity, filter;
}
.wheel-stage .tile[data-w] {
  transform: translateX(var(--x, 0px)) translateZ(var(--z, 0px)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  /* Out of focus at the back, sharp at the front: the pack in focus is the only crisp one. The
     shadow is not decoration: Cana's packs are white cut-outs on a white band, so without an edge
     the ones behind the front pack disappeared into it completely. */
  filter: blur(var(--bl, 0px)) drop-shadow(0 6px 10px rgba(105, 50, 26, var(--sh, 0.18))) drop-shadow(0 1px 2px rgba(105, 50, 26, calc(var(--sh, 0.18) * 1.4)));
  opacity: var(--op, 1);
  z-index: var(--zi, 1);
  transition: none;
}
/* one name at a time, pinned under the ring so it does not travel with its pack */
.wheel-stage .tile[data-w] figcaption { position: absolute; inset-inline: -25%; margin: 0; opacity: var(--cap, 0); transition: opacity 200ms ease; }
.wheel-stage .tile[data-w] .splash { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .wheel-stage { perspective: none; }
  .wheel-stage .tile[data-w] { transform: none !important; opacity: 1 !important; filter: none !important; }
}

.tile { flex: 0 0 min(250px, 70vw); scroll-snap-align: start; margin: 0; position: relative; isolation: isolate; transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.tile:active { transform: scale(0.98); transition-duration: 120ms; }
/* one pale halo per pack in its brand's colour, drawn once as an SVG symbol (was a deeper tone of a
   coloured band until 29 Sept) */
.brand-eyad { --splash: var(--tint-eyad); }
.brand-osa { --splash: var(--tint-osa); }
.brand-cana { --splash: var(--tint-cana); }
.brand-tots { --splash: var(--tint-tots); }
.tile .splash { position: absolute; z-index: 0; inset-inline-start: -6%; top: 0; width: 112%; height: auto; aspect-ratio: 1; fill: var(--splash); transform: rotate(var(--r, 0deg)); pointer-events: none; }
.tile picture { position: relative; z-index: 1; }
.tile img { width: 100%; aspect-ratio: 4 / 5; }
/* cut-outs: the pack alone, whole, floating on the splash over a soft ground */
.tile.cutout img { object-fit: contain; }
.tile.cutout picture { isolation: isolate; }
.tile.cutout picture::after { content: ""; position: absolute; inset-inline: 22%; bottom: 4%; height: 5%; border-radius: 50%; background: radial-gradient(closest-side, rgba(105, 50, 26, 0.22), transparent); z-index: -1; pointer-events: none; }
/* photographs keep their background inside a rounded square whose edges dissolve into the splash */
.tile.photo img { object-fit: cover; border-radius: 28px; -webkit-mask-image: radial-gradient(ellipse 98% 98% at 50% 50%, #000 74%, transparent 100%); mask-image: radial-gradient(ellipse 98% 98% at 50% 50%, #000 74%, transparent 100%); }
.tile figcaption { margin-block-start: 10px; font-size: 17px; line-height: 1.45; text-align: center; position: relative; z-index: 1; }
@media (hover: hover) {
  .tile img, .tile figcaption { transition: transform 280ms var(--ease); }
  .tile:hover img { transform: translateY(-6px) rotate(-1.5deg) scale(1.03); }
  .tile:hover figcaption { transform: translateY(-2px); }
}
@media (min-width: 900px) {
  .brand { padding-block: 56px 60px; }
  .brand + .brand { padding-block-start: 68px; }
  .brand-head { margin-block-end: 26px; }
  .rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
  /* a single pack: one track, centred (auto-fill would keep empty tracks and pin it to the start) */
  .brand-eyad .rail, .brand-osa .rail { grid-template-columns: 360px; justify-content: center; }
  .brand-eyad .tile figcaption, .brand-osa .tile figcaption { font-size: 20px; }
  .tile { flex: none; }
  .orn-scatter svg { width: calc(var(--s) * 1.8); }
}

/* contact: the climax on green, then one letterhead card */
#contact { overflow-x: clip; }
.contact-hero { background: var(--green); color: #fff; margin-inline: -16px; padding: 36px 20px 32px; text-align: center; position: relative; overflow: hidden; }
.contact-hero h2 { color: #fff; }
.contact-hero h2::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--cream); margin: 12px auto 24px; opacity: 0.9; }
.contact-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.contact-actions .pill { flex: 1 1 150px; max-width: 320px; }
.contact-actions .pill-light { box-shadow: none; }
.letterhead { background: var(--cream-deep); border-radius: var(--radius-panel); padding: 8px 20px; margin-block-start: 20px; }
.contact-item { display: grid; grid-template-columns: 24px 1fr; column-gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.contact-item:last-child { border-bottom: 0; }
.contact-item .ic { width: 24px; height: 24px; margin-block-start: 4px; color: var(--green); }
.contact-item .label { display: block; font-size: 13px; opacity: 0.85; }
.contact-item .value { font-size: 18px; }
.socials { display: flex; gap: 10px; flex-wrap: wrap; margin-block-start: 6px; }
.socials a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 8px 14px; border: 1.5px solid var(--brown); border-radius: var(--radius-pill); }
.socials svg { width: 20px; height: 20px; }
@media (min-width: 760px) {
  .contact-hero { margin-inline: 0; border-radius: var(--radius-panel); padding: 48px 32px 44px; }
  .letterhead { padding: 8px 28px; }
  .contact-item .value { font-size: 19px; }
}
@media (min-width: 1100px) {
  .letterhead { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .contact-hours { grid-column: 1 / -1; }
}

/* thumb dock, phones only */
.dock {
  position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; gap: 10px; padding: 10px;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px rgba(105, 50, 26, 0.14);
  transform: translateY(130%); visibility: hidden;
  transition: transform 420ms var(--ease), visibility 0s linear 420ms;
}
.dock.is-on { transform: none; visibility: visible; transition-delay: 0s; }
.dock .pill { flex: 1; min-height: 46px; padding-inline: 14px; }
.dock .pill-green { box-shadow: none; }
@media (min-width: 760px) { .dock { display: none; } }

/* scroll reveals: only when JS is running and motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 480ms ease-out, transform 640ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
  html.js .reveal.in { opacity: 1; transform: none; }
  @media (max-width: 899px) { html.js .rail .tile.reveal { transform: translateX(24px); } html.js .rail .tile.reveal.in { transform: none; } }
}

/* wide desktop (a 14 inch MacBook is 1512 px): the same proportions, everything larger */
@media (min-width: 1200px) {
  :root { --section: 88px; --gap: 24px; }
  body { font-size: 18px; }
  h1 { font-size: clamp(38px, 10.5vw, 80px); }
  h2 { font-size: clamp(34px, 8.5vw, 62px); }
  .pill { font-size: 18px; min-height: 54px; padding: 12px 30px; }
  .pill svg { width: 24px; height: 24px; }
  .ticker { font-size: 28px; padding-block: 14px; }
  .chip { font-size: 19px; padding: 8px 20px; }
  .brand { padding-block: 72px 76px; }
  .brand + .brand { padding-block-start: 84px; }
  .brand-head { margin-block-end: 32px; }
  .brand-head span { font-size: 16px; }
  .rail { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .brand-tots .rail { grid-template-columns: repeat(6, 1fr); }
  .brand-eyad .rail, .brand-osa .rail { grid-template-columns: 400px; }
  .tile figcaption { font-size: 19px; }
  .contact-hero { padding: 56px 40px 52px; }
  .contact-actions .pill { max-width: 360px; }
  .letterhead { padding: 12px 36px; }
  .contact-item .value { font-size: 20px; }
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .track { animation: none; }
}

@media print {
  #contact, .contact-hero, .brand { background: none !important; color: var(--brown) !important; }
  .contact-hero h2, .contact-hero a { color: var(--brown) !important; }
  .ticker, .dock, .chips, .field, .grain, .pops { display: none !important; }
}

@media print { #preview-strip, nav a.pill, .skip { display: none } a[href]::after { content: none } }

/* ===========================================================================
   v3 (30 Sept): what came over from v2, tuned to v1's cream, brown and green.
   Everything below overrides v1 where the two meet; the rings, bands, chips,
   ticker and contact panel above are v1's, untouched unless noted.
   =========================================================================== */
:root {
  --out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --shadow-soft: 0 1px 1px rgba(105, 50, 26, .05), 0 12px 32px -12px rgba(105, 50, 26, .18);
  --nav-h: 66px;
}
html { overflow-x: clip; scroll-padding-top: calc(var(--nav-h) + 12px); }
body { overflow-x: clip; }
::selection { background: #cfe3d4; color: var(--brown); }

/* the animated background: a canvas of caramel kernels and corn cones, behind everything */
.field { position: fixed; inset: 0; width: 100vw; height: 100lvh; z-index: 0; pointer-events: none; }
.grain {
  position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#preview-strip, nav, section, footer, main { position: relative; z-index: 1; }

/* nav: v1's, now it stays at the top, frosted once the page moves */
nav[data-header] { position: sticky; top: 0; z-index: 50; transition: background-color .35s var(--out), box-shadow .35s var(--out); }
nav[data-header].is-stuck { background: rgba(243, 236, 221, .82); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 10px 30px -18px rgba(105, 50, 26, .35); }
.nav-links a.is-here { color: var(--green); }
.nav-links a.is-here::after { transform: scaleX(1); }

/* hero (from v2) */
#hero.hero { padding-block: clamp(20px, 4vw, 44px) 0; overflow-x: clip; }
.hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: clamp(24px, 4vw, 64px); min-height: min(640px, calc(100svh - var(--nav-h) - 60px)); position: relative; z-index: 1; }
.hero-title { font-weight: 700; }
.hero-title .t1 { display: block; font-size: clamp(3rem, 1.4rem + 6.2vw, 6.4rem); line-height: 1.04; color: var(--brown); }
.hero-title .t2 { display: block; margin-top: .42em; font-size: clamp(1.4rem, .95rem + 2vw, 2.45rem); line-height: 1.3; font-weight: 600; color: var(--green); }
.hero-lead { margin-top: 24px; max-width: 30ch; font-size: clamp(1.06rem, .98rem + .45vw, 1.3rem); line-height: 1.85; color: #7a4a33; }
.hero .hero-actions { margin-top: 32px; }
.hero-art { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1 / 1; justify-self: end; --px: 0; --py: 0; }
.halo { position: absolute; inset: 7% 5% 5% 5%; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #eef3ea 0%, #e2ebdc 55%, #d6e3cf 100%); box-shadow: inset 0 -30px 60px -30px rgba(0, 90, 40, .14); overflow: hidden; }
.halo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 62%, rgba(255, 255, 255, .6) 72%, transparent 82% 100%); animation: sheen 14s linear infinite; mix-blend-mode: soft-light; }
@keyframes sheen { to { rotate: 360deg; } }
.halo-branch { position: absolute; width: 64%; left: 18%; top: 6%; color: var(--green); opacity: .12; }
.hp { position: absolute; will-change: transform; translate: calc(var(--px) * var(--d, .5) * 16px) calc(var(--py) * var(--d, .5) * 12px); transition: translate .6s var(--out); }
.hp-in { position: relative; animation: bob 7s ease-in-out infinite; animation-delay: var(--bob, 0s); }
.hp img { width: 100%; height: auto; filter: drop-shadow(0 26px 22px rgba(105, 50, 26, .22)) drop-shadow(0 4px 5px rgba(105, 50, 26, .14)); user-select: none; -webkit-user-drag: none; }
.hp-1 { left: 1%; bottom: 17%; width: 35%; rotate: -13deg; --d: .35; --bob: -1.2s; }
.hp-2 { left: 21%; bottom: 56%; width: 30%; rotate: -7deg; --d: .5; --bob: -3.1s; }
.hp-3 { left: 63%; bottom: 17%; width: 34%; rotate: 12deg; --d: .62; --bob: -5s; }
.hp-4 { left: 30.5%; bottom: 5%; width: 38%; rotate: -2deg; --d: 1; --bob: -2.2s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(.8deg); } }
/* the قريباً sticker stays v1's green, as Eyad has seen it */
.hero-art .stamp {
  position: absolute; top: 34%; right: -19%; width: 34%; aspect-ratio: 1; min-width: 64px;
  display: grid; place-items: center; border-radius: 50%; rotate: 14deg;
  background: var(--green); color: #fff; font: 700 clamp(14px, 1.3vw, 20px)/1 var(--font-display);
  box-shadow: 0 10px 20px -8px rgba(0, 70, 32, .55), inset 0 0 0 4px var(--green), inset 0 0 0 5.5px rgba(255, 255, 255, .7);
}
.pops { position: absolute; inset: 0; pointer-events: none; }
.pop { position: absolute; width: var(--s); height: auto; rotate: var(--r); filter: drop-shadow(0 8px 8px rgba(105, 50, 26, .2)); animation: drift2 9s ease-in-out infinite; animation-delay: var(--dd); }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, -9px) rotate(6deg); } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * { animation: rise2 1s var(--out) both; }
  .js .hero-title { animation: none; }
  .js .hero-title .t1 { animation: rise2 1s var(--out) both; }
  .js .hero-title .t2 { animation: rise2 1s var(--out) .12s both; }
  .js .hero-lead { animation-delay: .22s; }
  .js .hero .hero-actions { animation-delay: .32s; }
  .js .hp { animation: land .95s var(--spring) both; }
  .js .hp-1 { animation-delay: .15s; } .js .hp-2 { animation-delay: .25s; } .js .hp-3 { animation-delay: .35s; } .js .hp-4 { animation-delay: .5s; }
  .js .halo { animation: grow 1.2s var(--out) both; }
  .js .hero-art .stamp { animation: pop-stamp .7s var(--spring) 1.05s both; }
  .js .pop { animation: burst .9s var(--spring) var(--pd) both, drift2 9s ease-in-out calc(var(--pd) + .9s) infinite; }
}
@keyframes rise2 { from { opacity: .01; transform: translateY(22px); } }
@keyframes land { from { opacity: 0; transform: translateY(70px) scale(.92); } }
@keyframes grow { from { opacity: 0; transform: scale(.86); } }
@keyframes pop-stamp { from { opacity: 0; transform: scale(1.8); } }
@keyframes burst { from { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.2) rotate(-60deg); } }

/* statement (from v2): Eyad's own sentence, inked word by word as it is read */
.statement-sec { padding-block: clamp(90px, 12vw, 180px) clamp(40px, 6vw, 90px); }
.statement { max-width: 25ch; font: 600 clamp(1.7rem, 1rem + 3.2vw, 3.45rem)/1.55 var(--font-display); color: var(--brown); }
.statement .w-accent { color: var(--green); }
.js .statement .w { color: rgba(105, 50, 26, .16); transition: color .5s var(--out); }
.js .statement .w.on { color: var(--brown); }
.js .statement .w-accent.on { color: var(--green); }

/* map (from v2) */
.reach { padding-block: clamp(20px, 3vw, 40px) clamp(56px, 8vw, 110px); }
.reach-title { max-width: 16ch; font-weight: 700; }
/* v1's short green rule under a section title, here at the start of the line */
.reach-title::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--green); margin-top: 12px; }
.map { position: relative; margin-top: clamp(-110px, -6vw, 8px); }
.map-draw { position: relative; }
.map-phone { display: none; }
.map-phone .map-svg { overflow: hidden; }
.map-svg { width: 100%; height: auto; overflow: visible; }
.map .land { fill: #e4ecde; }
.map .land-dots { opacity: .22; }
.map pattern circle { fill: var(--green); }
.map .coast { fill: none; stroke: var(--green); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.map .lead-line, .map .bracket { fill: none; stroke: rgba(105, 50, 26, .45); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.map .city { fill: var(--red); stroke: #fff; stroke-width: 2.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.map .city-home { fill: var(--green); }
.map .home-ring { fill: none; stroke: var(--green); stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }
.map-labels { position: absolute; inset: 0; pointer-events: none; }
.city-label { position: absolute; left: var(--x); top: var(--y); translate: -50% -100%; padding: 6px 12px; border-radius: 6px; background: #fff; box-shadow: var(--shadow-soft); font: 600 clamp(12px, .72rem + .35vw, 16px)/1.3 var(--font-display); color: var(--brown); white-space: nowrap; }
.city-label.is-home { background: var(--green); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .map.in .home-ring { animation: ping 2.6s var(--out) 1.6s infinite; }
  .js .map .coast { stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--out); }
  .js .map .city, .js .map .lead-line, .js .map .bracket, .js .city-label { opacity: 0; transition: opacity .45s var(--out), scale .55s var(--spring); }
  .js .map .city { scale: 0; }
  .js .city-label { scale: .85; }
  .js .map.in .coast { stroke-dashoffset: 0; }
  .js .map.in .city, .js .map.in .lead-line, .js .map.in .city-label { opacity: 1; scale: 1; transition-delay: calc(.45s + var(--i) * .1s); }
  .js .map.in .bracket { opacity: 1; transition-delay: .5s; }
}
@keyframes ping { 0% { opacity: .7; scale: 1; } 80%, 100% { opacity: 0; scale: 3.4; } }

/* footer (from v2), on v1's cream */
.site-footer { border-top: 1px solid var(--line); background: rgba(243, 236, 221, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding-bottom: env(safe-area-inset-bottom); font-size: 15px; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-block: 34px 26px; }
.site-footer .footer-logo { display: inline-flex; line-height: 0; }
.site-footer .footer-logo img { height: 46px; width: auto; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-inline-start: 12px; }
.footer-nav a { font: 600 15px/1.6 var(--font-display); color: var(--brown); text-decoration: none; opacity: .85; transition: color .2s, opacity .2s; }
.footer-nav a:hover { color: var(--green); opacity: 1; }
.footer-fb { margin-inline-start: auto; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(105, 50, 26, .3); color: var(--brown); transition: background-color .2s, color .2s; }
.footer-fb:hover { background: var(--brown); color: var(--cream); }
.footer-fb svg { width: 20px; height: 20px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 18px 30px; border-top: 1px solid var(--line); font-size: 14px; }
.site-footer .footer-credit { opacity: .8; }

/* scroll reveals: text may fade, a picture never does (a pack on screen is always fully drawn) */
@media (prefers-reduced-motion: no-preference) {
  html.js .tile.reveal, html.js .rail .tile.reveal { opacity: 1; }
}

/* phones */
@media (max-width: 900px) {
  .hero .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
  .hero-art { justify-self: center; max-width: 520px; margin-top: 12px; }
  .map { margin-top: 8px; }
}
@media (max-width: 640px) {
  :root { --nav-h: 58px; }
  .hero-lead { margin-top: 16px; }
  .hero .hero-actions { margin-top: 24px; }
  .statement { max-width: none; }
  .map-wide { display: none; }
  .map-phone { display: block; }
  .map { margin-bottom: -40px; }
  .city-label { padding: 4px 9px; font-size: 12.5px; }
  .footer-nav { margin-inline-start: 0; order: 3; width: 100%; }
  .site-footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .halo::after, .hp-in, .pop { animation: none !important; }
}
.hero .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .hero-actions .pill { flex: 0 1 auto; min-width: 180px; }
@media (max-width: 640px) {
  .hero .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero .hero-actions .pill { min-width: 0; padding-inline: 12px; font-size: 15px; }
  .nav-wa { transition: opacity .3s, scale .3s var(--out); }
  .dock-on .nav-wa { opacity: 0; scale: .6; pointer-events: none; }
}
.contact-item .value.hours span { display: block; text-wrap: balance; }
.contact-item .value.mail { display: block; text-align: right; overflow-wrap: break-word; text-decoration: none; }
@media (max-width: 380px) { .contact-item .value.mail { font-size: 16px; } }
.contact-item .value.mail:hover { color: var(--green); text-decoration: underline; }
@media (max-width: 520px) { .nav-reach { display: none; } }