/* ==========================================================================
   KAVet — landing page
   Colours, type and the arch motif are lifted from the approved company
   profile deck. Layout uses logical properties throughout so the Arabic
   (RTL) view is the same stylesheet, mirrored.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* brand inks, sampled from the deck artwork */
  --teal:        #164048;
  --teal-deep:   #0f3138;
  --teal-soft:   #24575f;
  --gold:        #b49748;   /* brand gold -- rules, dots, fills, focus */
  --gold-strong: #8e7532;   /* gold for LARGE text on light: >= 3:1   */
  --gold-ink:    #6d5a26;   /* gold for small text on light: >= 4.5:1 */
  --gold-bright: #c8a856;   /* gold for text on the teal surfaces     */
  --cream:       #ebe2d7;
  --cream-hi:    #f4eee6;
  --sand:        #ded3c6;
  --ink:         #2b2b2b;
  --ink-soft:    #5a5a5a;

  --on-teal:      #f0e9df;
  --on-teal-soft: #c9d4d3;

  /* Focus ring, two-tone -- the rule itself lives in the a11y block at the
     end of this file. --focus-ink clears 3:1 on every light ground and on
     --gold; --focus-halo clears 3:1 on every teal ground. Between them they
     cover every surface a focusable control sits on. */
  --focus-ink:   #0d2f36;
  --focus-halo:  #f7f2ea;

  /* type */
  --font: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(.8rem, .77rem + .15vw, .875rem);
  --step-0:  clamp(.95rem, .91rem + .2vw, 1.0625rem);
  --step-1:  clamp(1.1rem, 1.02rem + .35vw, 1.3rem);
  --step-2:  clamp(1.35rem, 1.18rem + .7vw, 1.75rem);
  --step-3:  clamp(1.7rem, 1.35rem + 1.5vw, 2.6rem);
  --step-4:  clamp(2.1rem, 1.5rem + 2.7vw, 3.9rem);

  /* rhythm */
  --shell: 1180px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(22, 64, 72, .06), 0 4px 14px rgba(22, 64, 72, .06);
  --shadow-md: 0 4px 12px rgba(22, 64, 72, .08), 0 18px 44px rgba(22, 64, 72, .11);
  --shadow-lg: 0 10px 30px rgba(22, 64, 72, .13), 0 34px 70px rgba(22, 64, 72, .16);

  --ease: cubic-bezier(.22, .68, .32, 1);
  --header-h: 76px;
}

html[lang="ar"] {
  --font: "IBM Plex Sans Arabic", "Poppins", "Helvetica Neue", Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  /* the closed mobile drawer sits off-canvas; `clip` keeps it out of the
     document's scroll width without creating a scroll container (which
     `hidden` would, breaking the sticky header) */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.12;
  letter-spacing: -.018em;
  font-weight: 700;
  color: var(--teal);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -.01em; }
p  { margin: 0; text-wrap: pretty; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--gold-ink); }

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 { letter-spacing: 0; line-height: 1.28; }
html[lang="ar"] body { line-height: 1.85; }

/* The focus ring is defined in the a11y block at the end of this file: its
   halo is a box-shadow, so it has to out-order .btn-primary, .fab-wa and
   .field *:focus, and out-specify .btn:hover and .btn-ghost:hover. */

::selection { background: var(--gold); color: #fff; }

.skip-link {
  position: fixed;
  inset-block-start: -100px;
  inset-inline-start: 1rem;
  z-index: 200;
  padding: .7rem 1.1rem;
  background: var(--teal);
  color: var(--on-teal);
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  transition: inset-block-start .2s var(--ease);
}
.skip-link:focus { inset-block-start: 0; color: var(--on-teal); }

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

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--teal);
  --btn-fg: var(--on-teal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .82em 1.5em;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: .005em;
  cursor: pointer;
  text-align: center;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn-primary { box-shadow: 0 2px 10px rgba(22, 64, 72, .18); }
.btn-primary:hover { --btn-bg: var(--teal-soft); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--teal);
  border-color: rgba(22, 64, 72, .3);
}
.btn-ghost:hover { --btn-bg: rgba(22, 64, 72, .06); border-color: var(--teal); box-shadow: none; }

.btn-gold { --btn-bg: var(--gold); --btn-fg: #1d1a10; }
.btn-gold:hover { --btn-bg: var(--gold-bright); }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 90;
  isolation: isolate;
  border-block-end: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* The translucent blur lives on a child layer, NOT on .site-header itself:
   backdrop-filter makes an element the containing block for its
   fixed-position descendants, which would size the mobile drawer to the
   header instead of the viewport. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* solid first: engines without color-mix() drop the declaration entirely,
     which would leave the header transparent over the content */
  background-color: var(--cream);
  background-color: color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.site-header.is-stuck {
  border-block-end-color: rgba(22, 64, 72, .1);
  box-shadow: 0 6px 24px rgba(22, 64, 72, .07);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--header-h);
}

.brand { flex: 0 0 auto; display: block; }
.brand-mark { width: clamp(108px, 12vw, 140px); height: auto; }

.nav { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; }
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.1vw, 1.9rem);
}
.nav-list a {
  position: relative;
  display: inline-block;
  padding-block: .3rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}
.nav-list a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: var(--u-origin, left);
  transition: transform .28s var(--ease);
}
html[dir="rtl"] .nav-list a::after { --u-origin: right; }
.nav-list a:hover, .nav-list a.is-active { color: var(--teal); }
.nav-list a:hover::after, .nav-list a.is-active::after { transform: scaleX(1); }

.nav-foot, .nav-close { display: none; }

.header-tools { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  padding: .45em 1em;
  border: 1.5px solid rgba(22, 64, 72, .26);
  border-radius: 999px;
  background: transparent;
  color: var(--teal);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lang-toggle:hover { background: rgba(22, 64, 72, .07); border-color: var(--teal); }

.header-cta { padding: .62em 1.25em; font-size: var(--step--1); }

.nav-open {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-open span {
  display: block;
  width: 22px; height: 2px;
  margin: 5px auto;
  border-radius: 2px;
  background: var(--teal);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-open[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-open[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The scrim lives inside .site-header, which isolate makes a stacking context.
   That is what lets these three layers order correctly against each other:
   ::before (-1)  <  the header's own chrome (auto)  <  scrim (99)  <  .nav (100).
   So the scrim dims the header band too, and a tap anywhere outside the drawer —
   including on the logo or the language toggle — lands on the scrim and closes
   the menu. position:fixed still resolves against the viewport: sticky ancestors
   do not form a containing block, and the header's blur lives on ::before. */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(15, 49, 56, .48);
  backdrop-filter: blur(2px);
  animation: fade .25s var(--ease);
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  background-color: var(--cream);
  background:
    radial-gradient(120% 90% at 82% 8%, var(--cream-hi) 0%, transparent 62%),
    linear-gradient(170deg, var(--cream-hi) 0%, var(--cream) 55%, var(--sand) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.75rem);
  padding-block: clamp(2.75rem, 6.5vw, 5rem) clamp(2rem, 5vw, 4rem);
}

.eyebrow {
  margin-block-end: 1rem;
  color: var(--gold-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
html[lang="ar"] .eyebrow,
html[lang="ar"] .kicker { letter-spacing: .04em; text-transform: none; }

.hero-copy h1 { max-width: 17ch; }
.lede {
  margin-block-start: 1.35rem;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: var(--step-1);
  font-weight: 300;
  line-height: 1.6;
}
html[lang="ar"] .lede { font-weight: 400; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-block-start: 2rem;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-block-start: clamp(2.25rem, 5vw, 3.25rem);
  padding-block-start: clamp(1.5rem, 3vw, 2rem);
  border-block-start: 1px solid rgba(22, 64, 72, .14);
}
.stat { display: flex; align-items: baseline; gap: .6rem; }
.stat dd {
  order: -1;
  margin: 0;
  color: var(--gold-strong);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
}
.stat dt {
  max-width: 13ch;
  color: var(--teal);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.25;
}

/* Artwork lifted from the deck carries its own cream plate, which reads as a
   hard rectangle on any other ground. .plate melts that plate into the section
   colour; set --plate to the surrounding background. */
.plate { position: relative; }
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--plate) 0%, transparent var(--plate-y, 13%)),
    linear-gradient(to top,    var(--plate) 0%, transparent var(--plate-y, 13%)),
    linear-gradient(to right,  var(--plate) 0%, transparent var(--plate-x, 13%)),
    linear-gradient(to left,   var(--plate) 0%, transparent var(--plate-x, 13%));
}

/* The hero photograph is presented as a framed print: cream mat, hairline gold
   rule, soft cast shadow. Portrait on wide viewports, landscape on phones. */
.hero-art {
  position: relative;
  margin: 0;
  padding: clamp(.5rem, 1vw, .8rem);
  border-radius: calc(var(--radius-lg) + 6px);
  background-color: var(--cream-hi);
  background-image: linear-gradient(160deg, #fdfaf5, var(--cream-hi));
  box-shadow:
    0 0 0 1px rgba(22, 64, 72, .12),
    0 18px 40px rgba(22, 64, 72, .13),
    0 44px 80px rgba(22, 64, 72, .12);
}
.hero-art::after {
  /* hairline gold rule just inside the mat */
  content: "";
  position: absolute;
  inset: clamp(.28rem, .55vw, .45rem);
  border: 1px solid rgba(180, 151, 72, .38);
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.hero-art picture { display: block; }
.hero-art img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.sourcing {
  border-block: 1px solid rgba(22, 64, 72, .13);
  background: rgba(255, 255, 255, .32);
}
.sourcing-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem clamp(1rem, 3vw, 2.25rem);
  padding-block: 1.1rem;
}
.sourcing-label, .sourcing-note {
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 500;
}
.sourcing-note { margin-inline-start: auto; color: var(--gold-ink); font-weight: 600; }
.sourcing-list { display: flex; flex-wrap: wrap; gap: clamp(.9rem, 2.5vw, 2rem); }
.sourcing-list li {
  position: relative;
  color: var(--teal);
  font-size: var(--step-0);
  font-weight: 600;
}
.sourcing-list li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(clamp(.9rem, 2.5vw, 2rem) / -2);
  inset-block-start: 50%;
  width: 4px; height: 4px;
  margin-block-start: -2px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--section-y); }

.section-head { max-width: 60ch; margin-block-end: clamp(2.25rem, 5vw, 3.5rem); }
.kicker {
  margin-block-end: .85rem;
  color: var(--gold-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.section-lede {
  margin-block-start: 1.1rem;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: var(--step-1);
  font-weight: 300;
}
html[lang="ar"] .section-lede { font-weight: 400; }

/* ---------------------------------------------------------------- categories */
.categories { background: var(--cream); }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 2vw, 1.4rem);
}
.cat-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius);
  background: var(--teal);
  color: var(--on-teal);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background .3s var(--ease);
}
.cat-card::after {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -18%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 151, 72, .34), transparent 68%);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); background: var(--teal-deep); }
.cat-card:hover::after { opacity: 1; }

.cat-num {
  display: block;
  margin-block-end: .9rem;
  color: var(--gold-bright);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .06em;
}
.cat-card h3 { color: #fff; }
.cat-card p {
  margin-block-start: .7rem;
  color: var(--on-teal-soft);
  font-size: var(--step--1);
  font-weight: 300;
}
html[lang="ar"] .cat-card p { font-weight: 400; }

/* ---------------------------------------------------------------- sectors */
.sectors { background: var(--cream-hi); }

.sector-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.sector-card {
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border: 1px solid rgba(22, 64, 72, .13);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .58);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.sector-card:hover {
  transform: translateY(-4px);
  border-color: rgba(180, 151, 72, .5);
  box-shadow: var(--shadow-md);
}
.sector-species {
  margin-block: .5rem .9rem;
  padding-block-end: .9rem;
  border-block-end: 1px solid rgba(22, 64, 72, .12);
  color: var(--gold-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .04em;
}
.sector-card > p:last-child { color: var(--ink-soft); font-size: var(--step--1); }

.sector-figure {
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  border-radius: var(--radius-lg);
  --plate: var(--cream-hi);
  --plate-x: 9%;
  --plate-y: 12%;
}
.sector-figure img { width: 100%; border-radius: var(--radius-lg); }

/* ---------------------------------------------------------------- values */
.values { background: var(--teal); }
.values h2, .values .kicker { color: var(--on-teal); }
.values .kicker { color: var(--gold-bright); }

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.value-card {
  display: flex;
  flex-direction: column;
  padding: 0 clamp(1.25rem, 2.5vw, 1.9rem) clamp(1.75rem, 3.5vw, 2.4rem);
  /* the deck's arch / window motif */
  border-radius: 150px 150px var(--radius) var(--radius);
  background-color: var(--cream-hi);
  background-image: linear-gradient(180deg, var(--cream-hi), var(--cream));
  text-align: center;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.value-arch {
  flex: 0 0 auto;
  height: clamp(112px, 15vw, 150px);
  padding-block-start: clamp(1.35rem, 2.5vw, 1.9rem);
}
.value-arch picture {
  display: block;
  height: 100%;
  max-width: 148px;
  margin-inline: auto;
}
.value-arch img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 12px 22px rgba(22, 64, 72, .22));
  transition: transform .4s var(--ease);
}
.value-card:hover .value-arch img { transform: translateY(-5px) scale(1.03); }

.value-card h3 { margin-block-start: 1.1rem; flex: 0 0 auto; }
.value-card p {
  margin-block-start: .75rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* ---------------------------------------------------------------- services */
.services { background: var(--cream); }

.srv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(22, 64, 72, .15);
  border-radius: var(--radius);
  background: rgba(22, 64, 72, .15);
  overflow: hidden;
}
.srv-card {
  padding: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--cream-hi);
  transition: background .3s var(--ease);
}
.srv-card:hover { background: #fff; }
.srv-num {
  display: block;
  margin-block-end: .8rem;
  color: var(--gold-ink);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .08em;
}
.srv-card p {
  margin-block-start: .6rem;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* ---------------------------------------------------------------- coverage */
.coverage {
  background-color: var(--sand);
  background:
    radial-gradient(90% 70% at 78% 30%, rgba(255, 255, 255, .5), transparent 60%),
    var(--sand);
}
.coverage-grid {
  /* the map is a wide, short render; give it the larger column so it does not
     float in the middle of a much taller copy column */
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}
.coverage .section-lede { margin-block-end: clamp(1.75rem, 4vw, 2.5rem); }

.phases { display: grid; gap: .25rem; }
.phase {
  position: relative;
  padding-block: .8rem;
  padding-inline: 2.4rem 0;
}
.phase::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1.35rem;
  width: 13px; height: 13px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: transparent;
}
.phase.is-now::before { background: var(--gold); box-shadow: 0 0 0 5px rgba(180, 151, 72, .22); }
.phase + .phase::after {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  inset-block-start: -.35rem;
  height: 1.7rem;
  border-inline-start: 1px dashed rgba(22, 64, 72, .35);
}
.phase-tag {
  display: block;
  color: var(--gold-ink);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html[lang="ar"] .phase-tag { letter-spacing: .03em; text-transform: none; }
.phase strong {
  display: block;
  margin-block-start: .3rem;
  color: var(--teal);
  font-size: var(--step-1);
  font-weight: 600;
}

.coverage-map { margin: 0; }
.coverage-map img {
  width: 100%;
  filter: drop-shadow(0 22px 34px rgba(22, 64, 72, .18));
}

/* ---------------------------------------------------------------- contact */
.contact { background: var(--cream); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.contact-list {
  display: grid;
  gap: 1.1rem;
  margin-block-start: clamp(2rem, 4vw, 2.75rem);
}
.contact-list li {
  display: grid;
  gap: .2rem;
  padding-block-end: 1.1rem;
  border-block-end: 1px solid rgba(22, 64, 72, .13);
}
.contact-list li:last-child { border-block-end: 0; padding-block-end: 0; }
.contact-label {
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html[lang="ar"] .contact-label { letter-spacing: 0; text-transform: none; }
.contact-list a, .contact-list li > span:last-child {
  color: var(--teal);
  font-size: var(--step-1);
  font-weight: 600;
}
.contact-list li > span:last-child { font-size: var(--step-0); font-weight: 400; color: var(--ink-soft); }

.contact-form {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  border: 1px solid rgba(22, 64, 72, .14);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .68);
  box-shadow: var(--shadow-sm);
}
.field { display: grid; gap: .4rem; min-width: 0; }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.1rem;
}
.field label {
  color: var(--teal);
  font-size: var(--step--1);
  font-weight: 600;
}
.field .opt { color: var(--ink-soft); font-weight: 400; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .78em .95em;
  /* .55 measures 3.12:1 on the white fill and 3.05:1 on the panel behind
     it; at the old .22 the field edge was 1.49:1 and effectively invisible */
  border: 1.5px solid rgba(22, 64, 72, .55);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  /* never below 16px: iOS Safari zooms the whole page when a focused field
     is smaller, and --step-0 only reaches 16px above a 720px viewport */
  font-size: max(16px, var(--step-0));
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 6.5em; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23164048' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95em center;
  background-size: 12px;
  padding-inline-end: 2.4em;
}
html[dir="rtl"] .field select { background-position: left .95em center; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(180, 151, 72, .2);
}
.field input::placeholder, .field textarea::placeholder { color: #767676; }  /* 4.54:1 on white */

.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select {
  border-color: #b4483e;
  box-shadow: 0 0 0 3px rgba(180, 72, 62, .13);
}
.field-error {
  color: #a03a31;
  font-size: var(--step--1);
  font-weight: 500;
}

.btn-wa { margin-block-start: .35rem; }
.btn-wa .wa { width: 1.15em; height: 1.15em; fill: currentColor; }

.form-note {
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.55;
}
.form-note a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* A live region has to exist before its first message lands, so the empty
   status is collapsed rather than removed. position:absolute takes it out of
   .contact-form's grid flow so it contributes no gap; with no offsets set it
   stays at its static position, so nothing moves. This rule is (0,2,0) and so
   still beats the .form-status padding/background below it. */
.form-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  background: none;
  overflow: hidden;
  clip-path: inset(50%);
}
.form-status {
  padding: .7em .95em;
  border-radius: 10px;
  background: rgba(22, 64, 72, .07);
  color: var(--teal);
  font-size: var(--step--1);
  font-weight: 500;
}

/* ---------------------------------------------------------------- closing */
.closing {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background-color: var(--teal);
  background:
    radial-gradient(80% 120% at 50% 0%, var(--teal-soft) 0%, transparent 65%),
    var(--teal);
  text-align: center;
}
.closing-inner { display: grid; justify-items: center; gap: 1.5rem; }
.closing-mark { width: clamp(200px, 34vw, 330px); height: auto; }
.closing-line {
  max-width: 46ch;
  color: var(--on-teal-soft);
  font-size: var(--step-1);
  font-weight: 300;
}
html[lang="ar"] .closing-line { font-weight: 400; }

/* ---------------------------------------------------------------- footer */
.site-footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem;
  background: var(--teal-deep);
  color: var(--on-teal-soft);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.footer-brand img { width: 132px; }
.footer-brand p {
  margin-block-start: 1.1rem;
  max-width: 36ch;
  font-size: var(--step--1);
  line-height: 1.7;
}
.footer-col h3 {
  margin-block-end: 1rem;
  color: var(--on-teal);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html[lang="ar"] .footer-col h3 { letter-spacing: .02em; text-transform: none; }
.footer-col ul { display: grid; gap: .6rem; }
.footer-col a { color: var(--on-teal-soft); font-size: var(--step--1); }
.footer-col a:hover { color: var(--gold-bright); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid rgba(240, 233, 223, .14);
  font-size: var(--step--1);
}
.footer-slogan {
  color: var(--gold-bright);
  font-family: "Poppins", var(--font);
  font-size: var(--step--1);
  font-weight: 300;
  letter-spacing: .42em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}
html[lang="ar"] .footer-slogan { letter-spacing: .3em; }

/* ---------------------------------------------------------------- wa fab */
.fab-wa {
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 1.75rem);
  inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  z-index: 80;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #1f9c53;
  box-shadow: 0 6px 20px rgba(16, 74, 42, .34);
  transform: scale(0);
  /* visibility, not just scale: at scale(0) the link was still in the tab order,
     so a keyboard user hit an invisible control before the page had scrolled */
  visibility: hidden;
  transition: transform .35s var(--ease), background .25s var(--ease), visibility .35s;
}
.fab-wa.is-in { transform: scale(1); visibility: visible; }
.fab-wa:hover { background: #26b562; }
.fab-wa svg { width: 30px; height: 30px; fill: #fff; }

/* ---------------------------------------------------------------- reveal */
/* Scoped to .js (set by an inline script in <head>): without it, a page with
   JavaScript disabled or broken would render every section at opacity 0. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* stagger children of a grid/list */
.js .cat-grid .reveal:nth-child(2), .js .srv-grid .reveal:nth-child(2),
.js .value-grid .reveal:nth-child(2) { transition-delay: .07s; }
.js .cat-grid .reveal:nth-child(3), .js .srv-grid .reveal:nth-child(3),
.js .value-grid .reveal:nth-child(3) { transition-delay: .14s; }
.js .cat-grid .reveal:nth-child(4), .js .srv-grid .reveal:nth-child(4) { transition-delay: .21s; }
.js .cat-grid .reveal:nth-child(5), .js .srv-grid .reveal:nth-child(5) { transition-delay: .28s; }
.js .cat-grid .reveal:nth-child(6), .js .srv-grid .reveal:nth-child(6) { transition-delay: .35s; }

.nav-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* --- tablet / small desktop ------------------------------------------- */
@media (max-width: 1080px) {
  :root { --header-h: 70px; }
  .nav-list { gap: 1rem; }
}

@media (max-width: 860px) {
  .cat-grid, .srv-grid, .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  /* the card grids stay two-up on phones -- one-up made the page endless */
  .cat-grid, .srv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .value-grid, .sector-cards { grid-template-columns: minmax(0, 1fr); }

  .cat-card, .srv-card { padding: 1.15rem 1rem 1.35rem; }
  .cat-card h3, .srv-card h3 { font-size: 1rem; letter-spacing: -.005em; }
  .cat-card p, .srv-card p { font-size: .8rem; line-height: 1.5; }
  .cat-num, .srv-num { margin-block-end: .55rem; }
  .cat-grid, .srv-grid { gap: .6rem; }
  .srv-grid { gap: 1px; }
}

/* --- drawer nav ------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-open { display: block; }

  /* Below this width the drawer takes over and carries its own CTA, so the
     header one goes. It used to disappear at 1080px instead, which left the
     whole 901-1080 band — 1024-wide laptops, tablets in landscape, half-screen
     windows — with a horizontal nav, no hamburger and no call to action at all.
     Measured at the tightest point (901px, English, the longest labels): the
     button fits with the links still on one line and 28px of clearance. */
  .header-cta { display: none; }

  /* .nav leaves the flow at this width (it becomes the fixed drawer below), and
     it was the only thing holding the two ends of the header apart. Without it
     the brand and the tools pack against the inline-start edge and leave a dead
     gap at the other end — very visible in RTL, where everything slid right. */
  .header-inner { justify-content: space-between; }

  .nav {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 100;
    display: grid;
    align-content: start;
    /* Both of these undo the desktop .nav rule above, which styles a flex row.
       justify-content: flex-end survives the switch to grid and makes the
       single implicit column max-content sized instead of stretching, so the
       whole menu collapsed to the width of its longest line and packed against
       one edge. align-items: center is the same story, per row. */
    justify-content: normal;
    align-items: normal;
    gap: 0;
    width: min(340px, 86vw);
    padding: 1.5rem 1.75rem 2.5rem;
    background: var(--teal);
    box-shadow: -18px 0 50px rgba(15, 49, 56, .3);
    /* the slide direction is a variable, not a competing transform: a
       `html[dir=rtl] .nav` rule would out-specify `.nav.is-open` and hold the
       drawer off-screen. :where() keeps the RTL override at zero specificity. */
    --drawer-x: 100%;
    transform: translateX(var(--drawer-x));
    visibility: hidden;
    transition: transform .38s var(--ease), visibility .38s;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  :where(html[dir="rtl"]) .nav {
    box-shadow: 18px 0 50px rgba(15, 49, 56, .3);
    --drawer-x: -100%;
  }
  .nav.is-open { --drawer-x: 0%; visibility: visible; }

  .nav-close {
    display: grid;
    place-items: center;
    justify-self: end;
    width: 42px; height: 42px;
    margin-block-end: .75rem;
    border: 0;
    border-radius: 50%;
    background: rgba(240, 233, 223, .1);
    color: var(--on-teal);
    cursor: pointer;
  }

  .nav-list { display: grid; gap: 0; }
  .nav-list li + li { border-block-start: 1px solid rgba(240, 233, 223, .13); }
  .nav-list a {
    display: block;
    padding-block: 1rem;
    color: var(--on-teal);
    font-size: var(--step-1);
    font-weight: 500;
  }
  .nav-list a::after { display: none; }
  .nav-list a:hover, .nav-list a.is-active { color: var(--gold-bright); }

  .nav-foot {
    display: grid;
    gap: 1rem;
    margin-block-start: 2rem;
    padding-block-start: 1.75rem;
    border-block-start: 1px solid rgba(240, 233, 223, .13);
  }
  .nav-tel { color: var(--gold-bright); font-size: var(--step-1); font-weight: 600; }
  .nav-cta { --btn-bg: var(--gold); --btn-fg: #1d1a10; width: 100%; }
  .nav-cta:hover { --btn-bg: var(--gold-bright); }
}

/* --- stack the two-column blocks ------------------------------------- */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    padding-block: clamp(2.25rem, 6vw, 3rem) 0;
  }
  .hero-copy h1 { max-width: 20ch; }
  .lede { max-width: 60ch; }
  .hero-art { margin-block-start: clamp(1.75rem, 5vw, 2.75rem); }
  .hero-art img { aspect-ratio: 16 / 9; }
  .stats { gap: 1.25rem 2rem; }

  .coverage-grid, .contact-grid { grid-template-columns: 1fr; }
  .coverage-map { order: -1; max-width: 560px; margin-inline: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* --- phones ----------------------------------------------------------- */
@media (max-width: 640px) {
  :root { --header-h: 64px; --radius-lg: 16px; }

  .brand-mark { width: 100px; }
  .lang-toggle { padding: .4em .8em; }

  .hero-actions { gap: .6rem; }
  .hero-actions .btn { flex: 1 1 100%; }

  .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem .75rem;
  }
  .stat { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .stat dt { max-width: none; font-size: .78rem; }

  .sourcing-inner { padding-block: .9rem; }
  .sourcing-note { margin-inline-start: 0; flex-basis: 100%; }

  .value-card { border-radius: 150px 150px var(--radius) var(--radius); }
  .value-arch { height: 140px; }

  .srv-grid { border-radius: var(--radius); }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-base { justify-content: flex-start; }

  .fab-wa { width: 48px; height: 48px; }
  .fab-wa svg { width: 26px; height: 26px; }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:last-child { grid-column: 1 / -1; }
  .field-row { grid-template-columns: 1fr; }
}

/* --- very wide -------------------------------------------------------- */
@media (min-width: 1500px) {
  :root { --shell: 1280px; }
}

/* ---------------------------------------------------------------- a11y */

/* Focus ring -- two-tone, so it clears 3:1 against every ground the site
   puts a focusable control on. Measured (sRGB relative luminance):
     --focus-ink  #0d2f36 : cream 11.10, cream-hi 12.34, sand 9.64,
                            white 14.22, gold 5.05, wa green #1f9c53 4.02
     --focus-halo #f7f2ea : teal 10.13, teal-deep 12.42, teal-soft 7.24
     ink vs halo          : 12.76
   Every ground is carried by at least one band, and the two bands separate
   from each other, so the ring is legible whichever way round the surface is.
   Painting order does the geometry for free: the shadow fills 0-6px outside
   the border box, the outline is drawn on top of it at 2-4px, so the ring
   reads halo / ink / halo.

   Two things about the selector, both deliberate:
   - it sits here, at the end of the sheet, because the halo is a box-shadow
     and has to out-order .btn-primary (159), .fab-wa (907) and .field
     *:focus (798);
   - :focus-visible is repeated to lift the rule from (0,1,0) to (0,2,0).
     Order alone is not enough against .btn:hover (156) and .btn-ghost:hover
     (167): both are (0,2,0) and both set box-shadow, so a button that is
     focused AND under the pointer would keep the hover shadow and lose its
     ring. Repeating the pseudo-class changes the specificity, not the match.

   No border-radius here: from this position it would out-order .btn's
   border-radius: 999px and square the pill buttons on focus, and outline and
   box-shadow both follow each element's own radius already. */
:focus-visible:focus-visible {
  outline: 2px solid var(--focus-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

/* .field *:focus sets outline:none at (0,2,1); match that specificity and win
   on order. border-color is deliberately left alone so a focused invalid
   field keeps the red edge from .field.is-invalid input (also (0,2,1)). */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--focus-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

@media (forced-colors: active) {
  /* box-shadow is forced to none here, so the halo cannot carry the ring --
     hand the whole indicator to the system highlight colour. */
  :focus-visible:focus-visible,
  .field input:focus-visible,
  .field select:focus-visible,
  .field textarea:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  /* the hamburger is three background-only bars, which a forced background
     paints out completely. System colour keywords survive the forcing. */
  .nav-open span { background: CanvasText; }

  /* appearance:none drops the native chevron, and the data-URI stand-in
     carries a hard-coded teal stroke that never adapts -- the control loses
     its only affordance. Give the select back to the platform. */
  .field select {
    appearance: auto;
    background-image: none;
    padding-inline-end: .95em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .fab-wa { transform: scale(1); visibility: visible; }
}

@media print {
  .site-header, .fab-wa, .nav-scrim, .contact-form, .skip-link { display: none !important; }
  body { background: #fff; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   404 page (/404.html)
   Lives here rather than in a <style> block on that page: the CSP has no
   'unsafe-inline' for styles, and hashing a block nothing else regenerates
   would break the moment anyone edited it. Every selector is .e404-scoped.
   ========================================================================== */
/* 404-specific layout only — everything else comes from styles.css */
  /* the header has no nav here, so the tools need their own push to the end */
  .e404-header .header-tools { margin-inline-start: auto; }

  /* footer to the bottom of short viewports, without magic numbers.
     100vh first: engines without svh drop the second declaration and still pin. */
  .e404-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }

  .e404 {
    flex: 1 0 auto;
    display: grid;
    place-items: center;
    padding-block: clamp(3rem, 9vw, 5.5rem);
    text-align: center;
    background:
      radial-gradient(120% 90% at 50% 0%, var(--cream-hi) 0%, transparent 62%),
      linear-gradient(170deg, var(--cream-hi) 0%, var(--cream) 58%, var(--sand) 100%);
  }
  .e404-inner { display: grid; justify-items: center; max-width: 44rem; }
  .e404-code {
    color: var(--gold-strong);
    font-size: clamp(3.6rem, 12vw, 6.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
  }
  .e404 h1 { margin-block-start: 1rem; font-size: var(--step-3); }
  .e404 .lede { margin-block-start: 1.1rem; max-width: 44ch; }
  .e404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-block-start: 2rem;
  }
  .e404-explore {
    margin-block-start: clamp(2.25rem, 5vw, 3rem);
    padding-block-start: clamp(1.5rem, 3vw, 2rem);
    border-block-start: 1px solid rgba(22, 64, 72, .14);
    width: 100%;
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 500;
  }
  .e404-nav { justify-content: center; margin-block-start: .9rem; }

  .e404-foot { padding-block: 1.35rem; }
  .e404-foot .footer-base { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }

  @media (max-width: 640px) {
    .e404-actions .btn { flex: 1 1 100%; }
  }