/* ============================================================
   AL AWADHI - base stylesheet
   Depends on tokens.css for every colour, size and space.

   THE ONE RULE: logical properties only.
   margin-inline-start, padding-inline-end, inset-inline-start, text-align: start.
   NEVER margin-left / padding-right / left / text-align: left.
   Arabic (dir="rtl") mirrors automatically because of this - there is no
   second stylesheet and no [dir=rtl] override for layout.
   ============================================================ */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3 { line-height: var(--leading-tight); margin: 0 0 var(--space-4); color: var(--navy-700); }
h1 { font-size: var(--text-4xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p  { margin: 0 0 var(--space-4); }

a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-primary-hover); }

/* Sensible default for CONTENT images. Note that this beats the HTML height=""
   attribute - CSS always wins over presentational attributes - which is exactly
   why the header logo needs its own explicit rule below. */
img { max-width: 100%; height: auto; }

/* Keyboard users must always be able to see where they are. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--navy-700);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 100;
}
.skip-link:focus { inset-inline-start: 0; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
.narrow { max-width: 800px; }
.muted { color: var(--color-text-muted); }

/* ---------- header ---------- */
.site-header {
  border-block-end: 1px solid var(--color-border);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 76px;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex: none;
}
/* Explicit height + width:auto + max-width:none, or the generic img rule above
   lets this render at its natural 1037px and swallow the page. */
.brand img {
  height: 44px;
  width: auto;
  max-width: none;
  flex: none;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--navy-600);
  letter-spacing: .03em;
}
.brand-text em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--grey-500);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-block-start: 2px;
}
.main-nav { display: flex; gap: var(--space-5); margin-inline-start: auto; }
.main-nav a {
  color: var(--grey-700);
  text-decoration: none;
  font-weight: 550;
  font-size: var(--text-sm);
  padding-block: var(--space-2);
  border-block-end: 2px solid transparent;
}
.main-nav a:hover { color: var(--navy-600); border-block-end-color: var(--color-accent); }
.header-actions { display: flex; align-items: center; gap: var(--space-4); }
.lang-switch {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--grey-700);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}
.lang-switch:hover { border-color: var(--navy-500); color: var(--navy-600); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  border: 2px solid transparent;
}
.btn-lg { padding: var(--space-4) var(--space-6); font-size: var(--text-base); }

/* Amber on dark ink is 9.06:1 - the strongest CTA we have and it passes AA.
   Amber on white would be 1.98:1, which is why the text is ink and not white. */
.btn-accent { background: var(--color-accent); color: var(--ink); }
.btn-accent:hover { background: var(--color-accent-hover); color: var(--ink); }

.btn-outline { border-color: var(--navy-500); color: var(--navy-600); background: transparent; }
.btn-outline:hover { background: var(--navy-50); color: var(--navy-700); }

/* ---------- hero ---------- */
/* The blue band is a full-bleed photograph with four CSS effects layered on
   it (Views/Shared/_HeroBackdrop). Three stacked layers, in this order:
     z0  .hero-media    the photograph and its light
     z1  .hero-scrim    the contrast guarantee
     z3  .container     the words
   The gradient below still matters: it is what shows for the few
   milliseconds before the image decodes, and what shows if it ever 404s.
   A hero must never be able to render as a white band with white text. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-600));
  color: var(--white);
  display: flex;
  align-items: center;
  min-height: clamp(500px, 70vh, 740px);
  padding-block: var(--space-8);
}
.hero > .container { position: relative; z-index: 3; width: 100%; }
.hero-copy { max-width: 62ch; }
.hero h1 {
  color: var(--white);
  max-width: 18ch;
  /* not decoration - it holds the glyph edges where the headline crosses
     the lit part of the tank */
  text-shadow: 0 2px 24px rgba(2, 10, 18, .6);
}
.hero .lede { color: #D7E7F3; font-size: var(--text-lg); max-width: 60ch; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--amber-400);
  margin-block-end: var(--space-3);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-6); }
.hero-actions .btn-outline { border-color: var(--navy-200); color: var(--white); }
.hero-actions .btn-outline:hover { background: rgba(255,255,255,.1); color: var(--white); }

/* ---------- hero media: the photograph, animated ----------
   Only transform and opacity animate anywhere below. Both are composited on
   the GPU, so this costs almost nothing to run and never triggers layout.
   Animating width, height, top/left or a filter would drop the whole hero to
   software rendering. */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Arabic reads right-to-left, so the frame flips with it - the dark side of
   the photograph has to end up under the text either way. The mirror lives on
   the PARENT because the child owns the push-in transform; two rules fighting
   over one property is a bug you only ever see in Arabic. */
[dir="rtl"] .hero-media { transform: scaleX(-1); }

.hero-plate { position: absolute; inset: 0; will-change: transform; }
.hero-photo, .hero-fx, .hero-grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo { object-fit: cover; object-position: center; display: block; }

/* ★ The light overlay is registered to the photograph by GEOMETRY, not by
   JavaScript: the svg's viewBox + "slice" is the identical mapping to the
   image's object-fit:cover, so the glow sits on the lamp at every window
   size. If you ever change one of those two, change the other. */
.hero-fx    { mix-blend-mode: screen; }
.hero-grain { mix-blend-mode: overlay; opacity: .10; z-index: 2; }

/* 1. Push-in. transform-origin sits on the valve assembly, so the frame
      closes on the subject instead of drifting nowhere in particular. */
.hero-plate { animation: hero-push 46s ease-in-out infinite alternate; transform-origin: 66% 62%; }
@keyframes hero-push {
  from { transform: scale(1.005); }
  to   { transform: scale(1.075); }
}

/* 2. The lamp. One bulb, one animation - core bloom, the throw across the wet
      tank skin and the bounce off the handrail all move together. Sodium
      lamps shimmer rather than blink, so this never drops below 86%. */
.fx-lamp { animation: fx-lamp 6.1s ease-in-out infinite; }
@keyframes fx-lamp {
  0%   { opacity: .92 }  17%  { opacity: 1 }    26%  { opacity: .86 }
  38%  { opacity: .98 }  52%  { opacity: .90 }  61%  { opacity: 1 }
  74%  { opacity: .88 }  83%  { opacity: .97 }  100% { opacity: .92 }
}

/* 3. Vapour. transform-box: fill-box makes scale() pivot on each blob's own
      centre; without it the default view-box origin scales them about the
      middle of the whole frame and they slide across the picture. */
.fx-vap  { transform-box: fill-box; transform-origin: center;
           animation: fx-vap 26s ease-in-out infinite alternate; }
.fx-vap2 { animation-duration: 34s; animation-delay: -9s; }
.fx-vap3 { animation-duration: 21s; animation-delay: -14s; }
@keyframes fx-vap {
  0%   { opacity: .55; transform: translate(0,0) scale(1); }
  50%  { opacity: .95; }
  100% { opacity: .50; transform: translate(-90px,-56px) scale(1.35); }
}

/* 4. Film grain: three noise fields, one visible at a time, swapped six times
      a second. Static grain reads as a dirty screen; moving grain reads as
      photographic. steps(1) is what stops it cross-fading. */
.gr  { animation: gr .5s steps(1) infinite; opacity: 0; }
.gr2 { animation-delay: .1667s; }
.gr3 { animation-delay: .3333s; }
@keyframes gr { 0%, 32% { opacity: 1 } 33%, 100% { opacity: 0 } }

/* ★ THE SCRIM IS NOT DECORATION - it is the contrast guarantee.
   Measured against this photograph across the push-in cycle, the brightest
   pixel behind the headline is rgb(10,27,40): 17.5:1 against white, 13.8:1
   against the lede colour. AA needs 4.5. It is deliberately light, because
   this image is dark enough on the left that a heavy scrim would only hide a
   photograph we are paying for. Swap the image and RE-MEASURE. */
.hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-scrim::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right,
      rgba(3,10,18,.72) 0%, rgba(4,14,24,.50) 40%,
      rgba(6,20,32,.12) 68%, rgba(6,20,32,0) 100%);
}
/* A gradient direction cannot be expressed with logical properties, so this
   is the one place in the stylesheet that needs an explicit dir override. */
[dir="rtl"] .hero-scrim::before {
  background: linear-gradient(to left,
      rgba(3,10,18,.72) 0%, rgba(4,14,24,.50) 40%,
      rgba(6,20,32,.12) 68%, rgba(6,20,32,0) 100%);
}
.hero-scrim::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(2,8,14,.55), rgba(2,8,14,0) 42%);
}

/* ---- phones ----
   A 2.33:1 photograph in a portrait box: object-fit:cover crops to the
   CENTRE, and the centre of this frame is bare tank wall - you would lose the
   lamp and the valves, which are the whole picture. So the plate is sized by
   the image's own aspect ratio instead and anchored to the inline-end; the
   parent's overflow:hidden does the cropping, and the window lands on the
   subject. Because the plate now matches the image exactly, `cover` and
   `slice` both become no-ops and the light stays registered. */
@media (max-width: 700px) {
  .hero { min-height: clamp(440px, 62vh, 580px); }
  .hero-plate {
    inset: auto;
    top: 50%;
    /* PHYSICAL left, not inset-inline-start, and that is deliberate: the RTL
       mirror on .hero-media already flips this, so a logical property here
       would flip it a second time and land the crop on the wrong side.
       translate is a percentage of the PLATE's own width, so -75% centres the
       point 75% across the photograph - the lamp and the valve assembly -
       in the viewport, whatever the hero's height works out to be. */
    left: 50%;
    translate: -75% -50%;       /* the `translate` property, NOT transform -
                                   transform is owned by the push-in above */
    height: 100%;
    width: auto;
    aspect-ratio: 1916 / 821;
  }
  /* Flat and heavier on a phone: the copy spans the full width, so a
     side-weighted scrim cannot protect it, and the crop deliberately puts the
     lamp behind the text. Measured at .62 the lede fell to 4.34:1 - under AA.
     At .72 it is 5.9:1. Readability wins over showing off the photograph. */
  .hero-scrim::before,
  [dir="rtl"] .hero-scrim::before { background: rgba(4,14,24,.72); }
}

/* Motion sickness and vestibular disorders are real, and this is squarely
   WCAG 2.2 territory. The photograph stays; it simply stops moving, with the
   lamp left lit rather than frozen mid-flicker. */
@media (prefers-reduced-motion: reduce) {
  .hero-plate, .fx-lamp, .fx-vap, .gr { animation: none; }
  .hero-plate { transform: scale(1.005); }
  .fx-lamp { opacity: .95; }
  .gr1 { opacity: 1; }
}


/* ---------- trust bar ---------- */
.trust-bar { background: var(--navy-900); color: var(--navy-100); padding-block: var(--space-4); }
.trust-items { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: var(--text-sm); }
.trust-item { display: inline-flex; align-items: center; gap: var(--space-2); }
/* The way through to the full, accurate list - including the two that are
   still in process. Underlined, because in a row of plain labels an
   un-underlined link is invisible. */
.trust-more {
  color: var(--navy-100);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.trust-more:hover { color: var(--white); }

.badge-inprocess {
  font-style: normal;
  font-size: var(--text-xs);
  background: var(--amber-500);
  color: var(--ink);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 650;
}
.badge-active {
  font-size: var(--text-xs); background: #DFF3E6; color: #1E7A44;
  padding: 2px var(--space-2); border-radius: var(--radius-sm); font-weight: 650;
}
.badge-expired {
  font-size: var(--text-xs); background: #FDEDEC; color: #B3261E;
  padding: 2px var(--space-2); border-radius: var(--radius-sm); font-weight: 650;
}

/* ---------- sections ---------- */
.section { padding-block: var(--space-8); }
.section-alt { background: var(--color-bg-subtle); }
.section-title { margin-block-end: var(--space-2); }
.section-lede { color: var(--color-text-muted); max-width: 70ch; margin-block-end: var(--space-6); }
.section-more { margin-block-start: var(--space-6); }

.page-head { background: var(--color-bg-subtle); padding-block: var(--space-7); border-block-end: 1px solid var(--color-border); }
.page-head .lede { color: var(--grey-700); max-width: 75ch; font-size: var(--text-lg); }
.page-head .eyebrow a { color: var(--navy-500); }

/* ---------- cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}
.card {
  display: block;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  border-block-start: 3px solid var(--navy-500);
  transition: box-shadow var(--transition), transform var(--transition);
}
a.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-block-start-color: var(--color-accent); }
.card h3 { color: var(--navy-700); margin-block-end: var(--space-2); }
.card p { color: var(--grey-700); font-size: var(--text-sm); margin-block-end: var(--space-3); }
.card-link { color: var(--color-primary); font-weight: 600; font-size: var(--text-sm); }

/* ---------- lists and tables ---------- */
.spec-list { padding-inline-start: var(--space-5); margin-block: var(--space-4) var(--space-6); }
.spec-list li { margin-block-end: var(--space-2); color: var(--grey-700); }

.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin-block: var(--space-4) var(--space-6); }
.chip {
  background: var(--navy-50);
  color: var(--navy-700);
  border: 1px solid var(--navy-100);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
}

.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th, .data-table td { text-align: start; padding: var(--space-3); border-block-end: 1px solid var(--color-border); vertical-align: top; }
.data-table th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--color-text-muted); }

.project { padding-block: var(--space-6); border-block-end: 1px solid var(--color-border); }
.project:last-child { border-block-end: none; }

/* ---------- cta + footer ---------- */
.cta { background: var(--navy-700); color: var(--white); padding-block: var(--space-8); text-align: center; }
.cta h2 { color: var(--white); }
.cta p { color: var(--navy-100); }

.site-footer { background: var(--navy-900); color: var(--navy-100); padding-block: var(--space-7) var(--space-5); margin-block-start: 0; }
.site-footer h3 { color: var(--white); font-size: var(--text-base); }
.site-footer p { font-size: var(--text-sm); margin-block-end: var(--space-2); }
.site-footer a { color: var(--navy-200); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }
.footer-legal { border-block-start: 1px solid var(--navy-800); margin-block-start: var(--space-5); padding-block-start: var(--space-4); }
.footer-legal p { font-size: var(--text-xs); color: var(--navy-300); margin: 0; }
.footer-links { margin-block-start: var(--space-2); }
.footer-links a { color: var(--navy-200); text-decoration: underline; text-underline-offset: 3px; }
.footer-links a:hover { color: var(--white); }

/* ---------- prose pages (privacy, terms) ----------
   Long-form legal text. Measure is capped tighter than the rest of the site:
   nobody reads a 100-character line of a data-retention clause. */
/* A secondary note under a page lede - present, but clearly subordinate. */
.page-head-note { font-size: var(--text-base); color: var(--grey-700); max-width: 70ch; }

.prose { max-width: 68ch; }
.prose h2 {
  font-size: var(--text-xl);
  margin-block: var(--space-6) var(--space-3);
  color: var(--navy-700);
}
.prose h2:first-child { margin-block-start: 0; }
.prose p { margin-block-end: var(--space-4); }
.prose .spec-list { margin-block-end: var(--space-4); }

/* ==========================================================================
   SMALL SCREENS
   Most visitors to a Bahraini supplier's site arrive on a phone, often from a
   WhatsApp link, often on mobile data, often one-handed on a site walkway.
   This block is not a fallback for the desktop layout - for a lot of people it
   IS the site.

   Four rules drive everything below:
     1. Nothing may cause horizontal scrolling. Ever.
     2. Anything tappable is at least 44px tall (Apple HIG / WCAG 2.5.5).
     3. Form inputs are at least 16px, or iOS Safari zooms the page on focus
        and the visitor has to pinch back out - the single most common reason a
        mobile form gets abandoned.
     4. A four-column table is not a small table. It is a different component.
   ========================================================================== */

/* Fluid type. One clamp() replaces a stack of per-breakpoint font sizes, and it
   scales smoothly between them instead of jumping at 861px. */
h1 { font-size: clamp(1.95rem, 1.15rem + 3.4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.35rem); }

/* Long unbreakable strings - part numbers, standards codes, email addresses -
   are the usual cause of a stray horizontal scrollbar on a narrow screen. */
p, li, td, th, dd, .lede { overflow-wrap: break-word; }

@media (max-width: 860px) {
  /* Below this the company name will not fit beside the nav. Keep the
     monogram, drop the words - the page title carries the name anyway. */
  .brand-text { display: none; }

  .header-inner {
    flex-wrap: wrap;
    min-height: 0;
    padding-block: var(--space-3);
    gap: var(--space-3);
  }

  /* The navigation becomes a horizontally scrollable row of pills on its own
     line. Four items and no JavaScript on this site, so a hamburger would mean
     either a checkbox hack or a script - both worse than a row that is simply
     always visible and never hides anything. */
  .main-nav {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;              /* Firefox */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-block-end: 2px;
  }
  .main-nav::-webkit-scrollbar { display: none; }

  .main-nav a {
    flex: none;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;                   /* ★ tap target */
    padding-inline: var(--space-4);
    border: 1px solid var(--color-border);
    border-block-end: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--grey-50);
    white-space: nowrap;
  }
  .main-nav a:hover { border-color: var(--navy-300); border-block-end-color: var(--navy-300); }

  .header-actions { margin-inline-start: auto; gap: var(--space-3); }
  .lang-switch { min-height: 44px; display: inline-flex; align-items: center; }
  .header-actions .btn { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 700px) {
  /* 4rem of padding above and below every section is a lot of thumb-scrolling
     on a 6-inch screen. */
  .section { padding-block: var(--space-6); }
  .section-tight { padding-block: var(--space-5); }
  .page-head { padding-block: var(--space-6) var(--space-5); }
  .cta { padding-block: var(--space-6); }

  .container { padding-inline: var(--space-4); }

  /* ★ A four-column table becomes one card per row. The column headings are
     hidden and each cell gets its own label from the data-label attribute set
     in the view - which is where it has to live, because CSS content is not
     translatable and this table is bilingual. */
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-block-end: var(--space-4);
    background: var(--white);
  }
  .data-table td {
    border: none;
    padding: 0 0 var(--space-3);
  }
  .data-table td:last-child { padding-block-end: 0; }
  .data-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--color-text-muted);
    margin-block-end: 2px;
  }
  /* The name and description already read as a heading; a label above them is
     noise. */
  .data-table td:first-child::before { display: none; }

  /* Full-width primary actions. On a phone a button the width of the content
     column is easier to hit and reads as the obvious next step. */
  .hero-actions { gap: var(--space-3); }
  .hero-actions .btn,
  form .btn-lg { width: 100%; justify-content: center; }

  .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }

}

/* Small targets that are easy to miss, fixed across the whole touch range
   rather than only on phones - a 768px tablet is still a thumb.
   Measured before and after: the footer phone and email links were 18px tall,
   the trust-bar link 24px. WCAG 2.5.5 asks for 44. */
@media (max-width: 860px) {
  .site-footer a,
  .footer-links a {
    display: inline-block;
    padding-block: 12px;
  }
  .trust-more,
  .trust-item {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ★ 16px minimum on form controls. Below 16px, iOS Safari zooms the viewport
   when the field takes focus and does not zoom back out - the visitor is left
   scrolling sideways through a form. This one rule prevents it. */
@media (max-width: 860px) {
  .field input, .field select, .field textarea,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="date"], input[type="file"], select, textarea {
    font-size: 16px;
    min-height: 46px;
  }
  textarea { min-height: 120px; }
}

/* Very small phones - 320 to 380px. */
@media (max-width: 380px) {
  .container { padding-inline: var(--space-3); }
  .trust-items { font-size: var(--text-xs); gap: var(--space-2) var(--space-4); }
  .header-actions .btn { padding-inline: var(--space-3); font-size: var(--text-sm); }
}

/* Landscape phones: a 70vh hero eats the whole screen when the screen is
   380px tall. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 420px; }
}

/* ---------- forms ---------- */
fieldset { border: none; padding: 0; margin: 0 0 var(--space-6); }
legend {
  font-weight: 650; color: var(--navy-700); font-size: var(--text-lg);
  padding: 0; margin-block-end: var(--space-4);
  border-block-end: 2px solid var(--color-accent); padding-block-end: var(--space-2);
}
.field { margin-block-end: var(--space-4); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } }

.field label { display: block; font-weight: 600; font-size: var(--text-sm); margin-block-end: var(--space-2); color: var(--grey-700); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy-500); }
.field textarea { resize: vertical; }
.field-error { color: #B3261E; font-size: var(--text-sm); display: block; margin-block-start: var(--space-1); }
.form-errors:not(:empty) {
  background: #FDEDEC; border-inline-start: 4px solid #B3261E;
  padding: var(--space-4); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-block-end: var(--space-5);
}
.form-errors ul { margin: 0; padding-inline-start: var(--space-5); }
.form-note { font-size: var(--text-sm); color: var(--color-text-muted); margin-block-start: var(--space-4); }

/* Honeypot: off-screen rather than display:none, because some bots skip
   display:none fields but still fill anything they can read in the DOM. */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.reference {
  background: var(--amber-100); color: var(--ink);
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}


/* ============================================================
   ARABIC / RTL
   The layout itself needs NO mirroring - every rule above uses
   logical properties, so dir="rtl" flips it automatically.
   What Arabic does need is typography: different fonts, a larger
   size, and looser line-height to match the visual weight of Latin.
   ============================================================ */

[dir="rtl"] body {
  font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.9;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.45; }

/* Arabic has no capital letters, so uppercase and wide letter-spacing
   do nothing useful and actively break the glyph shapes. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .data-table th {
  text-transform: none;
  letter-spacing: 0;
}

/* The wordmark is a brand asset and stays Latin in every language, so it must
   keep LTR direction and its Latin letter-spacing even on the Arabic page. */
[dir="rtl"] .brand-text {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}
[dir="rtl"] .brand-text strong { letter-spacing: .03em; font-size: var(--text-lg); }
[dir="rtl"] .brand-text em { text-transform: uppercase; letter-spacing: .05em; }

/* Standards codes (ASME B16.34, NACE MR0175) stay left-to-right even
   inside an Arabic paragraph - that is how they are read and written. */
[dir="rtl"] .chip,
[dir="rtl"] .reference {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Phone numbers and emails likewise. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

[dir="rtl"] .spec-list li { line-height: 1.85; }


/* ---------- content images ----------
   Source photographs come from the company profile PDF and top out around
   800px wide, so they are used at card and figure sizes - never full-bleed.
   Every <img> carries width/height attributes so the browser reserves the
   space before the file loads and the page does not jump. */

.card-img { padding: 0; overflow: hidden; }
.card-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  background: var(--grey-100);
}
.card-img .card-body { padding: var(--space-5); }

.figure { margin: 0 0 var(--space-6); }
.figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  display: block;
  background: var(--grey-100);
}
.figure figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-block-start: var(--space-3);
}

.section-tight { padding-block: var(--space-6) 0; }

.project-with-img {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-5);
  align-items: start;
}
.project-img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  display: block;
  background: var(--grey-100);
}
@media (max-width: 760px) {
  .project-with-img { grid-template-columns: 1fr; }
}