/* ============================================================
   NOTE COFFE ROBOT
   "The future of coffee starts here..."

   styles.css
   1. Reset
   2. Design tokens (brand colors, type, spacing, motion)
   3. Base elements
   4. Layout helpers
   5. Section rhythm (dark / light alternation)
   6. Brand texture utilities (halftone, pixel edges)
   7. RTL support
   8. Accessibility and reduced motion
   9. Section blocks (added one at a time, next prompts)
   ============================================================ */


/* ============================================================
   1. RESET
   ============================================================ */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;         /* native smooth anchor scrolling, per spec */
  scroll-padding-top: 7rem;        /* keeps anchors clear of the fixed nav */
}

body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; cursor: pointer; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; }


/* ============================================================
   2. DESIGN TOKENS
   ============================================================ */

:root {

  /* ---- Brand colors, official guideline ---- */
  --c-yellow:  #F2F0A1;   /* Pantone Yellow 0131 C */
  --c-orange:  #FF5C39;   /* Pantone 171 C         */
  --c-purple:  #6F7BD4;   /* Pantone 2124 C        */
  --c-navy:    #253746;   /* Pantone 7546 C        */

  /* RGB triplets, for rgba() glows and overlays */
  --c-yellow-rgb: 242, 240, 161;
  --c-orange-rgb: 255,  92,  57;
  --c-purple-rgb: 111, 123, 212;
  --c-navy-rgb:    37,  55,  70;

  /* ---- Supporting neutrals, derived from navy so nothing feels off brand ---- */
  --c-navy-deep:  #1A2833;   /* darker navy, for depth and footers */
  --c-navy-soft:  #31465A;   /* lifted navy, for cards on dark      */
  --c-cream:      #FBFAF3;   /* warm off white, tinted toward yellow */
  --c-cream-alt:  #F4F2E4;   /* second light tone, section alternation */
  --c-ink:        #16222B;   /* body text on light backgrounds       */
  --c-muted:      #5E6E7A;   /* secondary text on light              */
  --c-muted-dark: #9DB0BF;   /* secondary text on dark               */
  --c-line:       rgba(var(--c-navy-rgb), 0.14);
  --c-line-dark:  rgba(255, 255, 255, 0.12);

  /* ---- Semantic roles ---- */
  --bg:            var(--c-cream);
  --fg:            var(--c-ink);
  --accent:        var(--c-orange);
  --accent-alt:    var(--c-purple);
  --highlight:     var(--c-yellow);

  /* ---- Typography ----
     The pixel face is a logo and illustration asset, deliberately NOT a UI
     type family. Press Start 2P at button sizes was the single biggest thing
     dating the interface. Pixel character now comes from shapes, not letters. */
  --font-display: 'Space Grotesk', system-ui, sans-serif;      /* headlines */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif; /* UI and body */
  --font-arabic:  'Tajawal', system-ui, sans-serif;            /* all Arabic text */

  /* Fluid type scale */
  --fs-eyebrow: clamp(0.7rem,  0.66rem + 0.2vw, 0.8rem);
  --fs-sm:      clamp(0.875rem, 0.84rem + 0.16vw, 0.95rem);
  --fs-base:    clamp(1rem,    0.96rem + 0.2vw,  1.125rem);
  --fs-lg:      clamp(1.125rem, 1.05rem + 0.35vw, 1.35rem);
  --fs-h3:      clamp(1.35rem, 1.15rem + 0.9vw,  1.85rem);
  --fs-h2:      clamp(2rem,    1.5rem + 2.2vw,   3.4rem);
  --fs-h1:      clamp(2.4rem,  1.5rem + 3.2vw,   4.1rem);
  --fs-stat:    clamp(1.8rem,  1.2rem + 2.6vw,   3.2rem);

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.6;

  --tracking-label: 0.09em;   /* small uppercase labels */
  --tracking-wide:  0.02em;
  --tracking-tight: -0.02em;  /* display sizes, modern headline tightening */

  /* ---- Spacing scale ---- */
  --sp-2xs: 0.25rem;
  --sp-xs:  0.5rem;
  --sp-sm:  0.75rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4.5rem;
  --sp-4xl: 7rem;

  --section-py: clamp(4.5rem, 3rem + 7vw, 9rem);
  /* NOTE: this scales with WIDTH only. See the short-viewport override in
     section 5, which is what stops a wide but short laptop paying the full
     9rem top and bottom on every section. */

  /* ---- Layout ---- */
  --container-max:    1240px;
  --container-narrow: 760px;
  --container-pad:    clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  --header-h:         6.5rem;
  --header-h-shrunk:  4.75rem;
  --logo-h:           64px;
  --logo-h-shrunk:    44px;

  /* Floating nav island. Tune these four to taste. */
  --nav-gap:      1rem;      /* distance from the top of the viewport */
  --nav-gap-tight: 0.6rem;   /* once scrolled                          */
  /* Was 5px to match the old zero radius pixel buttons. Those are gone, so
     the radius now matches the rest of the system. */
  --nav-radius:   14px;
  --nav-pad-y:    0.7rem;
  --nav-pad-x:    1.4rem;
  --nav-border:   rgba(251, 250, 243, 0.22);   /* cream, not pure white */

  /* ---- Geometry ----
     Hard offset shadows with zero blur read as 2019 neobrutalism. Replaced
     with layered soft shadows. Borders are hairlines, not 3px slabs. */
  --radius-none: 0;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --pixel-unit:  6px;      /* the small square motif, kept as a graphic accent */
  --hairline:    1px;

  --shadow-xs: 0 1px 2px rgba(var(--c-navy-rgb), 0.06);
  --shadow-sm: 0 2px 6px -1px rgba(var(--c-navy-rgb), 0.08),
               0 6px 16px -6px rgba(var(--c-navy-rgb), 0.10);
  --shadow-md: 0 4px 12px -2px rgba(var(--c-navy-rgb), 0.10),
               0 14px 34px -10px rgba(var(--c-navy-rgb), 0.16);
  --shadow-lg: 0 8px 22px -6px rgba(var(--c-navy-rgb), 0.14),
               0 28px 64px -18px rgba(var(--c-navy-rgb), 0.24);
  --shadow-dark: 0 10px 30px -8px rgba(0, 0, 0, 0.45),
                 0 30px 70px -24px rgba(0, 0, 0, 0.55);

  /* Brand glow, taken from the color board where each hue blooms on navy */
  --glow-orange: 0 0 60px -8px rgba(var(--c-orange-rgb), 0.55);
  --glow-purple: 0 0 60px -8px rgba(var(--c-purple-rgb), 0.55);
  --glow-yellow: 0 0 60px -8px rgba(var(--c-yellow-rgb), 0.45);

  /* ---- Motion ---- */
  --dur-fast: 0.16s;
  --dur-med:  0.3s;
  --dur-slow: 0.55s;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);   /* slight overshoot, for pops */
  --ease-spring: cubic-bezier(0.16, 1.08, 0.38, 1); /* soft settle, UI default */

  /* ---- Layers ---- */
  --z-bg: 0;
  --z-content: 1;
  --z-header: 100;
  --z-menu: 200;
  --z-modal: 300;
}


/* ============================================================
   3. BASE ELEMENTS
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg);
  background-color: var(--bg);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }

/* Small uppercase label. Replaces the old pixel-font utility. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
}

::selection {
  background: var(--c-orange);
  color: var(--c-cream);
}


/* ============================================================
   4. LAYOUT HELPERS
   ============================================================ */

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

.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--section-py);
  overflow: hidden;              /* contains decorative bleed */
}

/* Short viewports, i.e. any wide laptop. --section-py is a vw clamp, so a
   1366x768 screen was paying the full 9rem top AND bottom on every section,
   which is 288px of a 768px screen spent on air. That, not the imagery, is
   what pushed sections off the bottom of the window.
   Deliberately applied to the shared token so the vertical rhythm stays
   consistent from section to section, rather than tightening one of them
   and leaving the rest out of step. */
@media (max-height: 900px) {
  :root { --section-py: clamp(3rem, 2rem + 5vh, 6rem); }
}


/* ============================================================
   5. SECTION RHYTHM
   Alternating dark and light, per the brief.
   Each modifier resets the semantic tokens so child components
   never need to know which background they sit on.
   ============================================================ */

.section--dark {
  --bg: var(--c-navy);
  --fg: var(--c-cream);
  --fg-muted: var(--c-muted-dark);
  --border: var(--c-line-dark);
  background-color: var(--bg);
  color: var(--fg);
}

.section--dark-deep {
  --bg: var(--c-navy-deep);
  --fg: var(--c-cream);
  --fg-muted: var(--c-muted-dark);
  --border: var(--c-line-dark);
  background-color: var(--bg);
  color: var(--fg);
}

/* Investors: navy base with an orange bloom, per the brief */
.section--dark-accent {
  --bg: var(--c-navy);
  --fg: var(--c-cream);
  --fg-muted: var(--c-muted-dark);
  --border: var(--c-line-dark);
  color: var(--fg);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 120%, rgba(var(--c-orange-rgb), 0.35), transparent 70%),
    radial-gradient(ellipse 60% 50% at 15% -10%, rgba(var(--c-purple-rgb), 0.22), transparent 70%);
}

.section--light {
  --bg: var(--c-cream);
  --fg: var(--c-ink);
  --fg-muted: var(--c-muted);
  --border: var(--c-line);
  background-color: var(--bg);
  color: var(--fg);
}

.section--light-alt {
  --bg: var(--c-cream-alt);
  --fg: var(--c-ink);
  --fg-muted: var(--c-muted);
  --border: var(--c-line);
  background-color: var(--bg);
  color: var(--fg);
}


/* ============================================================
   6. BRAND TEXTURE UTILITIES
   Halftone dots and pixel edges, from the guideline motifs.
   ============================================================ */

/* Halftone dot field. Add .has-halftone to any section. */
.has-halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.07;
}

/* Keep real content above decorative layers */
.section > .container { position: relative; z-index: var(--z-content); }

/* Stepped pixel corners, for cards and frames */
/* Small square motif. This is where the pixel character now lives:
   in shapes and accents, not in the typography. */
.pixel-dot {
  display: inline-block;
  width: var(--pixel-unit);
  height: var(--pixel-unit);
  background-color: currentColor;
  border-radius: 1px;
  flex-shrink: 0;
}


/* ============================================================
   7. RTL SUPPORT
   Structure is in place now. The dictionary and toggle logic
   arrive later. Layout uses logical properties so the flip is free.
   ============================================================ */

[dir="rtl"] body {
  font-family: var(--font-arabic);
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  font-family: var(--font-arabic);
  letter-spacing: normal;
}

/* Space Grotesk and Inter both lack Arabic glyphs, so anything that sets
   them explicitly has to be redirected or the Arabic renders unstyled. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .btn,
[dir="rtl"] .nav__links a,
[dir="rtl"] .hero__scroll-text,
[dir="rtl"] .section__label,
[dir="rtl"] .gallery__caption,
[dir="rtl"] .solution__name,
[dir="rtl"] .solution__hint {
  font-family: var(--font-arabic);
  letter-spacing: normal;
  text-transform: none;
}

/* Arabic runs longer, so lift the smaller sizes slightly */
[dir="rtl"] .btn            { font-size: 0.95rem; }
[dir="rtl"] .nav__links a   { font-size: 0.95rem; }
[dir="rtl"] .solution__name { font-size: 1.15rem; font-weight: 700; }
[dir="rtl"] .solution__hint { font-size: 0.85rem; }
[dir="rtl"] .stat__value  {
  /* Numerals stay LTR in Arabic. Without this the neutral "+" in "200+"
     is reordered by the bidi algorithm and renders as "+200". */
  direction: ltr;
  text-align: right;
}



/* ============================================================
   8. ACCESSIBILITY
   ============================================================ */

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

:focus-visible {
  outline: 3px solid var(--c-orange);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   9. SECTION BLOCKS
   Filled in one section at a time.
   ============================================================ */

/* ------------------------------------------------------------
   HEADER / NAV
   Fixed. Transparent over the hero, then gains blur, background
   and a reduced height once .is-scrolled is set by script.js.
   ------------------------------------------------------------ */

.site-header {
  position: fixed;
  inset-block-start: var(--nav-gap);
  inset-inline: 0;
  z-index: var(--z-header);
  padding-inline: var(--container-pad);
  transition: inset-block-start var(--dur-med) var(--ease-out);
}

.site-header.is-scrolled { inset-block-start: var(--nav-gap-tight); }

/* The bar itself is the island. It carries the border, radius and blur
   rather than the header, so it can sit inset from the viewport edges. */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--nav-pad-y) var(--nav-pad-x);
  border: 1px solid var(--nav-border);
  border-radius: var(--nav-radius);
  background-color: rgba(var(--c-navy-rgb), 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
  transition:
    padding var(--dur-med) var(--ease-out),
    background-color var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.site-header.is-scrolled .nav {
  padding-block: 0.45rem;
  background-color: rgba(var(--c-navy-rgb), 0.8);
  border-color: rgba(251, 250, 243, 0.3);
  box-shadow: 0 14px 38px -14px rgba(0, 0, 0, 0.65);
}

.nav__logo {
  flex-shrink: 0;
  display: block;
  transition: transform var(--dur-med) var(--ease-back);
}

.nav__logo img {
  width: auto;
  height: var(--logo-h);
  /* Lifts the logo off the navy so the orange keyline stays crisp */
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
  transition: height var(--dur-med) var(--ease-out);
}

.site-header.is-scrolled .nav__logo img { height: var(--logo-h-shrunk); }

.nav__logo:hover { transform: translateY(-2px) scale(1.03); }

/* Links sit centred in the bar, so the logo owns the inline start edge
   outright instead of competing with a link cluster pushed up against it. */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.1rem + 1.4vw, 1.75rem);
  margin-inline: auto;
}

.nav__links a {
  position: relative;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--c-muted-dark);
  letter-spacing: var(--tracking-wide);
  padding-block: var(--sp-xs);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

/* Pixel underline that wipes in from the inline start edge */
.nav__links a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--c-orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-med) var(--ease-out);
}

.nav__links a:hover { color: var(--c-cream); }
.nav__links a:hover::after { transform: scaleX(1); }

[dir="rtl"] .nav__links a::after { transform-origin: 100% 50%; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-shrink: 0;
  padding-inline-start: var(--sp-lg);
  position: relative;
}

/* Hairline rule separating navigation from controls */
.nav__actions::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 25%;
  width: 1px;
  background-color: var(--c-line-dark);
}

/* --- Language toggle --- */

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  color: var(--c-cream);
  padding: 0.55em 0.85em;
  border: var(--hairline) solid var(--c-line-dark);
  border-radius: var(--radius-sm);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.lang-toggle:hover {
  border-color: var(--c-orange);
  background-color: rgba(var(--c-orange-rgb), 0.12);
  transform: translateY(-2px);
}

.lang-toggle__current { color: var(--c-yellow); }
.lang-toggle__sep     { opacity: 0.4; }
.lang-toggle__other   { opacity: 0.65; }

/* --- Burger, mobile only --- */

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 8px;
  border: 2px solid var(--c-line-dark);
}

.nav__burger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--c-cream);
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast) linear;
}

.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* ------------------------------------------------------------
   BUTTONS
   Pixel styling: hard offset shadow, no blur. On hover the button
   travels into its own shadow, which reads as a physical press
   rather than a generic fade.
   ------------------------------------------------------------ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95em 1.6em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  line-height: 1.2;
  text-align: center;
  border: var(--hairline) solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition:
    transform var(--dur-med) var(--ease-spring),
    box-shadow var(--dur-med) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

/* Light sweep across the button on hover. Replaces the old hard shadow
   press with something that reads as a surface, not a sticker. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.btn:hover::after { transform: translateX(120%); }

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: var(--dur-fast); }

.btn--primary {
  background-color: var(--c-orange);
  color: #FFFFFF;
  border-color: var(--c-orange);
  box-shadow: 0 4px 14px -3px rgba(var(--c-orange-rgb), 0.5);
}

.btn--primary:hover {
  background-color: #FF6B4A;
  box-shadow: 0 10px 26px -6px rgba(var(--c-orange-rgb), 0.62);
}

.btn--ghost {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--c-cream);
  border-color: rgba(251, 250, 243, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(251, 250, 243, 0.55);
  color: #FFFFFF;
}

[dir="rtl"] .btn::after { transform: translateX(120%); }
[dir="rtl"] .btn:hover::after { transform: translateX(-120%); }


/* ------------------------------------------------------------
   1. HERO
   ------------------------------------------------------------ */

.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block-start: calc(var(--header-h) + var(--sp-md));
  padding-block-end: var(--sp-2xl);
}

/* --- Decorative background stack --- */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}

.hero__glow--purple {
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  inset-block-start: -12%;
  inset-inline-end: -6%;
  background: rgba(var(--c-purple-rgb), 0.55);
  animation: glow-drift 14s ease-in-out infinite alternate;
}

.hero__glow--orange {
  width: 38vw; height: 38vw;
  max-width: 520px; max-height: 520px;
  inset-block-end: -14%;
  inset-inline-start: -8%;
  background: rgba(var(--c-orange-rgb), 0.4);
  animation: glow-drift 18s ease-in-out infinite alternate-reverse;
}

@keyframes glow-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 5%, 0) scale(1.12); }
}

/* Slow CRT sweep. Very low opacity, reads as texture not as an effect. */
.hero__scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(var(--c-yellow-rgb), 0.05) 0px,
    rgba(var(--c-yellow-rgb), 0.05) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.55;
  mix-blend-mode: overlay;
}

/* --- Layout --- */

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

/* No width cap here. The grid column already constrains the column, and a
   ch based cap forced the headline into four lines and pushed the CTAs
   below the fold. Line length is controlled on .hero__sub instead. */
.hero__content { max-width: none; }

/* --- Type --- */

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-orange);
  margin-block-end: var(--sp-md);
  display: flex;
  align-items: center;
  gap: 0.7em;
}

/* Small pixel block leading the eyebrow.
   Deliberately a slow, soft pulse rather than a hard terminal blink.
   A steps(1) on/off snap pulls focus away from the headline, which is
   the opposite of what an eyebrow should do. */
.hero__eyebrow::before {
  content: "";
  width: var(--pixel-unit);
  height: var(--pixel-unit);
  background-color: var(--c-orange);
  border-radius: 1px;
  flex-shrink: 0;
  opacity: 0.9;
  animation: pixel-pulse 3.6s ease-in-out infinite;
}

@keyframes pixel-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.4; }
}

.hero__title {
  font-size: var(--fs-h1);
  color: var(--c-cream);
  margin-block-end: var(--sp-md);
  text-wrap: balance;
}

.hero__title-accent {
  color: var(--c-yellow);
  display: inline-block;
}

.hero__sub {
  font-size: var(--fs-lg);
  color: var(--c-muted-dark);
  max-width: 46ch;
  margin-block-end: var(--sp-lg);
}

/* --- Proof stat strip --- */

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-md);
  padding-block: var(--sp-md);
  border-block: var(--hairline) solid var(--c-line-dark);
  margin-block-end: var(--sp-lg);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  position: relative;
}

/* Hairline separators between stats, skipping the first */
.stat + .stat::before {
  content: "";
  position: absolute;
  inset-block: -0.2em;
  inset-inline-start: calc(var(--sp-md) / -2);
  width: 1px;
  background-color: var(--c-line-dark);
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem);
  font-weight: 600;
  color: var(--c-yellow);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--c-muted-dark);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* --- CTAs --- */

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
}

/* --- Robot visual --- */

.hero__visual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 560px;
}

.hero__robot {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  /* Small amplitude on purpose. This is a heavy floor standing kiosk,
     so a large float would read as weightless and fake. */
  animation: robot-float 8s ease-in-out infinite;
  filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.55));
}

/* --- Atmospheric background video ---
   Covers the whole hero, edge to edge, behind every other layer. Low opacity
   so it behaves like the halftone texture rather than a second subject. */
.hero__video-bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  pointer-events: none;
  /* Zoomed 10% past cover. The section clips it (.section is overflow:hidden)
     so the extra just crops off the edges. */
  transform: scale(1.1);
  transform-origin: center center;
  /* Transparent, not the UA default black, so a missing or still-loading
     file leaves the navy showing instead of a black slab. */
  background-color: transparent;
  /* Keeps the video from bleeding over the section's rounded/overflow edges
     and stops it forcing a horizontal scrollbar on very wide screens. */
  max-width: 100%;
}

/* The dots have to sit ABOVE the video, otherwise the video washes them out.
   The section's ::before is generated before its children, so at an equal
   z-index the video would paint over it. Lifting it one level fixes the
   order without touching the shared .has-halftone rule.
   Content stays above this: .section > .container is also z-index 1 but is a
   later sibling, so it wins the tie. */
.hero.has-halftone::before { z-index: var(--z-content); }

/* Motion is decoration here. If the visitor asked for less of it, hold the
   first frame rather than looping. */
@media (prefers-reduced-motion: reduce) {
  .hero__video-bg { display: none; }
}

@keyframes robot-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Cool halo behind the machine, tuned to the unit's own blue LED strip
   and to brand purple, so the product separates from the navy. */
.hero__visual::before {
  content: "";
  position: absolute;
  inset-block-start: 12%;
  inset-inline: 0;
  margin-inline: auto;      /* direction safe centring, see .hero__scroll */
  width: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--c-purple-rgb), 0.42) 0%,
    rgba(var(--c-purple-rgb), 0.16) 45%,
    transparent 70%
  );
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
  animation: halo-pulse 6s ease-in-out infinite;
}

@keyframes halo-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

/* --- Scroll cue --- */

.hero__scroll {
  position: absolute;
  inset-block-end: var(--sp-md);
  /* Centred with auto margins rather than translateX(-50%). GSAP writes
     its own transform on [data-anim] nodes, which would wipe a centring
     translate, and a translate would not mirror correctly in RTL. */
  inset-inline: 0;
  margin-inline: auto;
  width: max-content;
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  color: var(--c-muted-dark);
  transition: color var(--dur-fast) var(--ease-out);
}

.hero__scroll:hover { color: var(--c-yellow); }

.hero__scroll-text {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hero__scroll-arrow {
  width: 12px;
  height: 12px;
  /* Physical properties on purpose. This chevron always points DOWN, so it
     must not mirror in RTL. Logical borders flipped it to point left. */
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
  animation: scroll-bounce 1.8s var(--ease-out) infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%      { transform: rotate(45deg) translate(4px, 4px); }
}

/* Pre-animation state. GSAP clears these. If GSAP fails to load or
   motion is reduced, .no-anim on <html> keeps everything visible. */
.hero [data-anim] { will-change: transform, opacity; }


/* ------------------------------------------------------------
   HERO RESPONSIVE
   ------------------------------------------------------------ */

/* Short viewports, typically a laptop with browser chrome. The hero has a
   lot of vertical content (eyebrow, headline, subhead, stat strip, two CTAs,
   scroll cue) and Arabic runs taller than English, so tighten the stack
   rather than let the CTAs and scroll cue fall below the fold. */
@media (max-height: 780px) and (min-width: 981px) {
  .hero {
    padding-block-start: calc(var(--header-h) + var(--sp-2xs));
    padding-block-end: var(--sp-xl);
  }

  .hero__title   { font-size: clamp(2rem, 1.1rem + 2.4vw, 3.1rem); }
  .hero__sub     { font-size: var(--fs-base); margin-block-end: var(--sp-md); }
  .hero__eyebrow { margin-block-end: var(--sp-sm); }
  .hero__stats   { padding-block: var(--sp-sm); margin-block-end: var(--sp-md); }
  .hero__visual  { max-width: 440px; }
}

@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero__content { max-width: none; margin-inline: auto; }
  .hero__eyebrow { justify-content: center; }
  .hero__sub     { margin-inline: auto; }
  .hero__ctas    { justify-content: center; }

  /* Kept above the text so the product is the first thing seen, but capped
     hard. At 380px it ate the whole fold and pushed the headline and both
     CTAs out of view on a phone. */
  .hero__visual {
    grid-row: 1;
    max-width: clamp(180px, 42vw, 290px);
  }

  .hero__inner { gap: var(--sp-lg); }

  /* Hidden below this breakpoint. The hero stacks tall here, so the cue
     landed on top of the Investor Inquiry button, and because it is an
     anchor it swallowed taps meant for that CTA. A scroll hint earns
     nothing on a phone anyway. */
  .hero__scroll { display: none; }
}

@media (max-width: 860px) {
  /* Mobile panel hangs off the island and mirrors its styling,
     so the two read as one floating object. */
  .nav__links {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline: 0;
    margin-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-sm) var(--nav-pad-x) var(--sp-md);
    background-color: rgba(var(--c-navy-rgb), 0.92);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-radius);
    box-shadow: 0 14px 38px -14px rgba(0, 0, 0, 0.65);
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.98);
    transition:
      opacity var(--dur-med) var(--ease-out),
      transform var(--dur-med) var(--ease-out),
      visibility 0s linear var(--dur-med);
    z-index: var(--z-menu);
  }

  .nav-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
  }

  .nav__links a {
    display: block;
    padding-block: var(--sp-md);
    font-size: var(--fs-base);
    border-block-end: 1px solid var(--c-line-dark);
  }

  .nav__links li:last-child a { border-block-end: none; }

  .nav__links a::after { display: none; }

  .nav__burger { display: flex; }
}

@media (max-width: 560px) {
  .hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-lg) var(--sp-md);
  }

  /* Separator only between columns, not across the wrapped rows */
  .stat + .stat::before { display: none; }

  .hero__ctas { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
}

/* ------------------------------------------------------------
   MOTION FALLBACK
   ------------------------------------------------------------ */

.no-anim .hero [data-anim] {
  opacity: 1 !important;
  transform: none !important;
}

/* ------------------------------------------------------------
   SHARED SECTION FURNITURE
   Used by Product onward, so sections 3 to 8 inherit the rhythm.
   ------------------------------------------------------------ */

.section__label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-orange);
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-block-end: var(--sp-md);
}

.section__label::before {
  content: "";
  width: var(--pixel-unit);
  height: var(--pixel-unit);
  background-color: var(--c-orange);
  border-radius: 1px;
  flex-shrink: 0;
}

.section__title {
  font-size: var(--fs-h2);
  color: var(--fg);
  margin-block-end: var(--sp-md);
  text-wrap: balance;
}

.section__lede {
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  max-width: 52ch;
  margin-block-end: var(--sp-xl);
}

.text-accent { color: var(--c-orange); }

/* Section titles on dark backgrounds use yellow, on light they use orange,
   because yellow on cream has almost no contrast. */
.section--dark .text-accent,
.section--dark-accent .text-accent,
.section--dark-deep .text-accent { color: var(--c-yellow); }

/* ------------------------------------------------------------
   2. PRODUCT
   ------------------------------------------------------------ */

.product__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
}

/* --- Stacked card gallery ---
   A deck of cards. The active card sits flat and forward, the rest fan out
   behind it with decreasing scale and a slight rotation. GSAP animates the
   reshuffle, CSS only supplies the resting look. --- */

.gallery { position: relative; }

/* Square. Every supplied product image is 1024x1024, so a 4:3 stage would
   crop 25% of each frame and cut the cup out of the pour and latte shots. */
.gallery__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.gallery__card {
  position: absolute;
  inset: 0;
  margin: 0;
  border: var(--hairline) solid rgba(var(--c-navy-rgb), 0.14);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--c-navy);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  will-change: transform, opacity;
}

.gallery__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Scanline veil over each card, dialled right down so it reads as a screen
   surface rather than an effect */
.gallery__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(var(--c-purple-rgb), 0.07) 0px,
    rgba(var(--c-purple-rgb), 0.07) 1px,
    transparent 1px,
    transparent 5px
  );
  opacity: 0.5;
}

/* Glow ring, only on the active card */
.gallery__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(var(--c-purple-rgb), 0.45),
              inset 0 0 22px -8px rgba(var(--c-purple-rgb), 0.45);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
}

.gallery__card.is-active::before { opacity: 1; }

.gallery__caption {
  position: absolute;
  inset-inline-start: var(--sp-md);
  inset-block-end: var(--sp-md);
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-cream);
  background-color: rgba(var(--c-navy-rgb), 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: var(--hairline) solid rgba(251, 250, 243, 0.2);
  border-radius: 999px;
  padding: 0.6em 1.1em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.gallery__card.is-active .gallery__caption { transform: translateY(0); }

.gallery__card.is-active .gallery__caption { opacity: 1; }

/* Hover lift, active card only. Non-active cards must not move, or the
   fan behind the deck starts jittering as the pointer crosses it. */
.gallery__card.is-active:hover {
  box-shadow: var(--shadow-lg),
              0 0 48px -10px rgba(var(--c-purple-rgb), 0.6);
}

.gallery__dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-xs);
  margin-block-start: var(--sp-xl);
}

.gallery__dot {
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background-color: rgba(var(--c-navy-rgb), 0.18);
  transition: background-color var(--dur-fast) var(--ease-out), width var(--dur-med) var(--ease-spring);
}

.gallery__dot:hover { background-color: rgba(var(--c-navy-rgb), 0.4); }

.gallery__dot.is-active {
  width: 40px;
  background-color: var(--c-orange);
}

/* --- Feature list --- */

.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-lg);
  margin-block-end: var(--sp-xl);
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
}

.feature__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--c-purple);
  background-color: rgba(var(--c-purple-rgb), 0.09);
  border: var(--hairline) solid rgba(var(--c-purple-rgb), 0.22);
  transition:
    transform var(--dur-med) var(--ease-spring),
    box-shadow var(--dur-med) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.feature:hover .feature__icon {
  transform: translateY(-3px);
  background-color: var(--c-orange);
  color: #FFFFFF;
  border-color: var(--c-orange);
  box-shadow: 0 8px 20px -6px rgba(var(--c-orange-rgb), 0.55);
}

.feature__body { display: flex; flex-direction: column; gap: 0.15em; }

.feature__title {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--fg);
}

.feature__desc {
  font-size: 0.85rem;
  color: var(--fg-muted);
  line-height: 1.45;
}


/* ------------------------------------------------------------
   PRODUCT RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 980px) {
  .product__inner { grid-template-columns: 1fr; gap: var(--sp-2xl); }

  /* The stage is square, so an unconstrained gallery eats the whole fold on
     a phone and pushes the headline out of view. */
  .gallery {
    max-width: clamp(240px, 68vw, 440px);
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; gap: var(--sp-md); }
}

/* ------------------------------------------------------------
   3. PRODUCT SHOWCASE
   Full bleed video banner. A visual beat, no CTA.
   ------------------------------------------------------------ */

.showcase {
  position: relative;
  /* Overrides .section's padding-block entirely: this is edge to edge and
     the height comes from the band itself, not from padding. */
  padding: 0;
  /* svh, not vh, so mobile browser chrome collapsing does not resize the
     banner mid scroll. Capped in px so it cannot get silly on a tall
     monitor, and floored so it never collapses to a strip. */
  height: clamp(320px, 66svh, 720px);
  overflow: hidden;
  background-color: var(--c-navy);   /* shows through before the poster paints */
  display: flex;
  align-items: flex-end;
}

.showcase__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: var(--z-bg);
  /* The poster is painted by the element itself, so nothing here needs a
     separate <img>. If the file 404s the poster simply stays put. */
}

/* Transparent at the top so the footage reads, heavy at the bottom so the
   copy sits on something solid. */
.showcase__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(var(--c-navy-rgb), 0.10)  0%,
    rgba(var(--c-navy-rgb), 0.30) 45%,
    rgba(var(--c-navy-rgb), 0.78) 82%,
    rgba(var(--c-navy-rgb), 0.92) 100%
  );
}

.showcase__content {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  padding-block-end: clamp(1.75rem, 1rem + 3.5vw, 3.5rem);
}

.showcase__label {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-orange);
  margin-block-end: var(--sp-xs);
}

[dir="rtl"] .showcase__label { font-family: var(--font-arabic); letter-spacing: normal; }

.showcase__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: #FFFFFF;
  text-wrap: balance;
}

[dir="rtl"] .showcase__title { font-family: var(--font-arabic); letter-spacing: normal; }

@media (max-width: 720px) {
  /* Shorter on a phone so it stays a beat rather than a whole screen. */
  .showcase { height: clamp(260px, 46svh, 420px); }
}


/* ------------------------------------------------------------
   4. SOLUTIONS / INDUSTRIES
   ------------------------------------------------------------ */

.section__intro {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--sp-3xl);
}

.section__intro .section__lede  { margin-inline: auto; margin-block-end: 0; }

/* --- Grid --- */

.solutions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-lg);
}

/* --- Card shell ---
   The lift lives on .solution, the flip lives on .solution__inner, so the
   two transforms never fight each other. GSAP only ever writes to __inner. */

.solution {
  position: relative;
  perspective: 1400px;
  min-height: 232px;
  transition: transform var(--dur-med) var(--ease-spring);
}

.solution:hover { transform: translateY(-6px); }
.solution.is-open:hover { transform: none; }

.solution__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  will-change: transform;
}

/* --- Faces --- */

.solution__front,
.solution__back {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  border: var(--hairline) solid var(--card-tint, var(--c-line-dark));
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

.solution__front {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-xs);
  padding: var(--sp-lg);
  text-align: start;
  background-color: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.solution:hover .solution__front {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--card-tint);
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.6),
              0 0 34px -14px var(--card-tint);
}

/* Thin coloured keyline cycling yellow, orange, purple across the grid */
.solution:nth-child(3n + 1) { --card-tint: rgba(var(--c-yellow-rgb), 0.55); --card-ink: var(--c-yellow); }
.solution:nth-child(3n + 2) { --card-tint: rgba(var(--c-orange-rgb), 0.55); --card-ink: var(--c-orange); }
.solution:nth-child(3n + 3) { --card-tint: rgba(var(--c-purple-rgb), 0.6);  --card-ink: var(--c-purple); }

.solution__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  color: var(--card-ink);
  background-color: rgba(255, 255, 255, 0.05);
  border: var(--hairline) solid var(--card-tint);
  margin-block-end: var(--sp-xs);
  transition: transform var(--dur-med) var(--ease-spring);
}

.solution:hover .solution__icon { transform: translateY(-2px) scale(1.06); }

.solution__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-cream);
  letter-spacing: var(--tracking-tight);
}

.solution__desc {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--c-muted-dark);
}

.solution__hint {
  margin-block-start: auto;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--card-ink);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}

.solution:hover .solution__hint,
.solution__front:focus-visible .solution__hint { opacity: 1; transform: translateY(0); }

/* --- Back face --- */

.solution__back {
  transform: rotateY(180deg);
  background-color: var(--c-navy-deep);
  border-color: var(--card-tint);
}

.solution__back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution__back::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--c-navy-rgb), 0.95) 12%, rgba(var(--c-navy-rgb), 0.15) 62%);
  pointer-events: none;
}

.solution__caption {
  position: absolute;
  inset-inline: var(--sp-md);
  inset-block-end: var(--sp-md);
  z-index: 2;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-cream);
}

.solution__close {
  position: absolute;
  inset-block-start: var(--sp-xs);
  inset-inline-end: var(--sp-xs);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--c-cream);
  background-color: rgba(var(--c-navy-rgb), 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: var(--hairline) solid rgba(251, 250, 243, 0.25);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.solution__close:hover {
  background-color: var(--c-orange);
  border-color: var(--c-orange);
  transform: rotate(90deg);
}

/* Keeps the hidden face out of the tab order and off screen readers */
.solution__back[aria-hidden="true"] { pointer-events: none; }

/* No JS or reduced motion: show the front, never trap content behind a flip */
.no-anim .solution__inner { transform: none !important; }


/* ------------------------------------------------------------
   SOLUTIONS RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1080px) {
  .solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .solutions { grid-template-columns: 1fr; gap: var(--sp-md); }
  .solution { min-height: 200px; }
  .section__intro { margin-block-end: var(--sp-2xl); }
}

/* ------------------------------------------------------------
   5. EVENTS AND CATERING
   ------------------------------------------------------------ */

.events__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
}

/* --- Scene stage ---
   All scenes are stacked and crossfaded. Opacity only, so nothing reflows
   and the transition stays cheap. --- */

/* The stage is 4:5 and takes its height from the COLUMN WIDTH, so it had no
   relationship to the window height at all: the section measured a fixed
   983px on every desktop and overflowed any screen shorter than that, by
   215px on a 1366x768 laptop. Cap the width from the viewport height instead.
   Height is width / 0.8, so the usable width is 0.8 x the height left over
   once the section's own padding is paid for.
   12rem, not more: the section's height is max(stage, text column) plus
   padding, and the text column is about 595px. Capping the stage below that
   just shrinks the picture for no gain, because the text column then sets
   the height instead.
   min() means tall screens are completely unaffected. */
.eventshow {
  position: relative;
  /* width: 100% is REQUIRED, not decorative. This is a grid item, and the
     `margin-inline: auto` below cancels the default justify-self: stretch,
     which drops the element to shrink-to-fit. Its only in-flow content is an
     aspect-ratio box holding absolutely positioned scenes, so shrink-to-fit
     collapsed it to 158px. The sub-980px rule has the same pairing. */
  width: 100%;
  max-width: min(100%, calc((100svh - 12rem) * 0.8));
  margin-inline: auto;
}

.eventshow__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--c-navy);
  box-shadow: var(--shadow-lg);
  border: var(--hairline) solid rgba(var(--c-navy-rgb), 0.12);
}

.eventshow__scene {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  will-change: opacity, transform;
}

.eventshow__scene.is-active { opacity: 1; }

.eventshow__scene img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Warm wash so the scenes read as one set rather than five unrelated photos */
.eventshow__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(var(--c-navy-rgb), 0.85) 8%, transparent 55%),
    linear-gradient(120deg, rgba(var(--c-orange-rgb), 0.16), transparent 60%);
}

.eventshow__badge {
  position: absolute;
  inset-inline-start: var(--sp-md);
  inset-block-end: var(--sp-md);
  z-index: 3;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-cream);
  background-color: rgba(var(--c-navy-rgb), 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: var(--hairline) solid rgba(251, 250, 243, 0.22);
  border-radius: 999px;
  padding: 0.55em 1.1em;
}

[dir="rtl"] .eventshow__badge { font-family: var(--font-arabic); letter-spacing: normal; text-transform: none; }

.eventshow__ticks {
  display: flex;
  justify-content: center;
  gap: var(--sp-xs);
  margin-block-start: var(--sp-md);
}

.eventshow__tick {
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background-color: rgba(var(--c-navy-rgb), 0.16);
  transition: width var(--dur-med) var(--ease-spring), background-color var(--dur-fast) var(--ease-out);
}

.eventshow__tick.is-active {
  width: 38px;
  background-color: var(--c-orange);
}

/* --- Chips --- */

/* A grid, not a wrapped flex row. Wrapping left a ragged right edge, and
   making the rows stretch to fix that turned a lone chip on the last row
   into a full width bar (English at narrow widths, Arabic at any width,
   because the labels wrap 4 + 1). Equal cells sidestep both: every chip is
   the same size, columns line up, and a leftover chip is just a chip. */
.chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-xs);
  margin-block: var(--sp-xs) var(--sp-lg);
}

.chips li { display: flex; }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.5em;
  padding: 0.6em 1em;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--fg);
  background-color: rgba(var(--c-navy-rgb), 0.04);
  border: var(--hairline) solid rgba(var(--c-navy-rgb), 0.16);
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform var(--dur-med) var(--ease-spring),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.chip__icon { display: grid; place-items: center; color: var(--c-purple); transition: color var(--dur-fast) var(--ease-out); }

.chip:hover {
  transform: translateY(-3px);
  border-color: var(--c-orange);
  box-shadow: 0 8px 20px -8px rgba(var(--c-orange-rgb), 0.55);
}

.chip.is-active {
  background-color: var(--c-orange);
  border-color: var(--c-orange);
  color: #FFFFFF;
}

.chip.is-active .chip__icon { color: #FFFFFF; }

[dir="rtl"] .chip { font-family: var(--font-arabic); font-size: 0.95rem; }

.events__support {
  font-size: 0.88rem;
  color: var(--fg-muted);
  margin-block-end: var(--sp-lg);
}


/* ------------------------------------------------------------
   EVENTS RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 980px) {
  .events__inner { grid-template-columns: 1fr; gap: var(--sp-2xl); }

  /* Capped so the portrait stage does not swallow the fold on a phone */
  .eventshow {
    max-width: clamp(240px, 62vw, 400px);
    margin-inline: auto;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .chip { font-size: 0.82rem; padding: 0.55em 0.85em; }

  /* Two cells get too narrow for the longer labels here, so stack them. */
  .chips { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------
   CATERING SUB-BLOCK
   Lives inside the Events section, sharing its light background and
   its wrapper. Not a section of its own, so it has no --section-py
   and no background of its own.
   ------------------------------------------------------------ */

.catering {
  margin-block-start: clamp(3rem, 2rem + 3vw, 5rem);
}

/* Fades out at both ends, so the join reads as a soft transition
   rather than a rule slicing the section in half. */
.catering__divider {
  height: 1px;
  border: 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(var(--c-navy-rgb), 0.16) 22%,
    rgba(var(--c-navy-rgb), 0.16) 78%,
    transparent
  );
  margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.catering__head {
  max-width: 62ch;
  margin-block-end: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.catering__title {
  font-family: var(--font-display);
  /* A step below .section__title: this is a sub-head inside a section
     that already has one, so it must not compete with it. */
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin-block: var(--sp-sm) var(--sp-md);
}

[dir="rtl"] .catering__title {
  font-family: var(--font-arabic);
  letter-spacing: normal;
}

.catering__lede {
  font-size: var(--fs-lg);
  color: var(--c-muted);
}

/* --- Service cards --- */

.catering__services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 1.4vw, 1.75rem);
  margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

.cat-card {
  padding: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  background-color: rgba(255, 255, 255, 0.55);
  border: var(--hairline) solid var(--c-line);
  /* The colour lives on one edge only. A full coloured border round a
     light card reads as a warning box, not as brand accent. */
  border-inline-start: 3px solid var(--c-yellow);
  border-radius: var(--radius-md);
  transition:
    transform var(--dur-med) var(--ease-spring),
    box-shadow var(--dur-med) var(--ease-out);
}

/* Same yellow / orange / purple cycle the Solutions cards use. */
.catering__services > .cat-card:nth-child(3n + 2) { border-inline-start-color: var(--c-orange); }
.catering__services > .cat-card:nth-child(3n + 3) { border-inline-start-color: var(--c-purple); }

.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.cat-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin-block-end: var(--sp-xs);
}

[dir="rtl"] .cat-card__title { font-family: var(--font-arabic); }

.cat-card__desc {
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

/* --- Gallery --- */

.catering__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 0.5rem + 1.4vw, 1.75rem);
}

.cat-shot {
  overflow: hidden;
  border-radius: var(--radius-md);
  border: var(--hairline) solid var(--c-line);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-med) var(--ease-spring),
    box-shadow var(--dur-med) var(--ease-out);
}

.cat-shot img {
  display: block;
  width: 100%;
  /* Sources were three different ratios and were normalised to 3:2.
     Stating it here too means a future replacement at the wrong ratio
     gets cropped rather than breaking the grid. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.cat-shot:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* The image scales inside a clipped frame, so the frame itself stays
   put and only the picture moves. */
.cat-shot:hover img { transform: scale(1.06); }

.catering__closing {
  margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  text-align: center;
  font-style: italic;
  color: var(--c-muted);
  font-size: var(--fs-base);
}

/* Single closing action for the whole Events and Catering section.
   Centred to match the closing line directly above it, unlike the old
   position under the chips, which was left aligned with that column. */
.catering__cta {
  margin-block-start: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  text-align: center;
}

@media (max-width: 560px) {
  .catering__cta .btn { width: 100%; max-width: 340px; }
}

@media (max-width: 860px) {
  .catering__services,
  .catering__gallery { grid-template-columns: minmax(0, 1fr); }
}

/* Hover lift is meaningless on touch and can leave a card stuck in the
   hovered state after a tap. */
@media (hover: none) {
  .cat-card:hover,
  .cat-shot:hover { transform: none; box-shadow: var(--shadow-sm); }
  .cat-shot:hover img { transform: none; }
}


/* ------------------------------------------------------------
   6. CASE STUDY
   A spotlight block, not a grid. Single feature, generous scale.
   ------------------------------------------------------------ */

.case__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
}

/* --- Highlight callout, the trust line of the section --- */

.case__callout {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--c-orange);
  padding-inline-start: var(--sp-md);
  margin-block: var(--sp-lg) var(--sp-lg);
  text-wrap: balance;
}

/* Accent rule on the inline start edge, mirrors automatically in RTL */
.case__callout::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0.1em 0.1em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--c-orange), rgba(var(--c-orange-rgb), 0.25));
}

[dir="rtl"] .case__callout { font-family: var(--font-arabic); letter-spacing: normal; }

/* --- Supporting proof row --- */

.case__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md) var(--sp-lg);
  margin-block-end: var(--sp-xl);
}

.proof {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--fg);
}

.proof__tick {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #FFFFFF;
  background-color: var(--c-purple);
  flex-shrink: 0;
}

/* The tick path is drawn in by GSAP. Without JS it simply shows complete. */
.proof__tick path { stroke-dasharray: 24; }

/* --- Visual --- */

.case__visual { position: relative; }

.case__frame {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: var(--hairline) solid rgba(var(--c-navy-rgb), 0.12);
  aspect-ratio: 1 / 1;
}

.case__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Soft purple bloom behind the frame, same device as the hero halo */
.case__visual::before {
  content: "";
  position: absolute;
  inset-block-start: 8%;
  inset-inline: 0;
  margin-inline: auto;
  width: 86%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--c-purple-rgb), 0.3) 0%, transparent 68%);
  filter: blur(52px);
  z-index: 0;
  pointer-events: none;
}

.case__frame { position: relative; z-index: 1; }


/* ------------------------------------------------------------
   CASE STUDY RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 980px) {
  .case__inner { grid-template-columns: 1fr; gap: var(--sp-2xl); }

  /* Content first on mobile: the narrative sells harder than the photo */
  .case__visual { grid-row: 2; max-width: 460px; margin-inline: auto; width: 100%; }
}

@media (max-width: 560px) {
  .case__proof { gap: var(--sp-sm) var(--sp-md); }
  .proof { font-size: 0.86rem; }
}

/* ------------------------------------------------------------
   7. FOR INVESTORS
   A statement block. Centred, high contrast, alive but not busy.
   ------------------------------------------------------------ */

#investors { isolation: isolate; }

.inv__inner {
  position: relative;
  z-index: var(--z-content);
  text-align: center;
  max-width: 900px;
}

.inv__inner .section__lede { margin-inline: auto; margin-block-end: var(--sp-3xl); }

/* --- Background texture --- */

.inv__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  overflow: hidden;
  pointer-events: none;
}

.inv__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}

.inv__glow--orange {
  width: 62vw; height: 62vw;
  max-width: 820px; max-height: 820px;
  inset-block-end: -28%;
  inset-inline-start: 50%;
  translate: -50% 0;
  background: rgba(var(--c-orange-rgb), 0.34);
  animation: inv-drift-a 22s ease-in-out infinite alternate;
}

.inv__glow--purple {
  width: 44vw; height: 44vw;
  max-width: 600px; max-height: 600px;
  inset-block-start: -18%;
  inset-inline-start: -10%;
  background: rgba(var(--c-purple-rgb), 0.3);
  animation: inv-drift-b 28s ease-in-out infinite alternate-reverse;
}

/* Slow, long period drift. Deliberately gentle so it reads as ambient
   light rather than as an animation demanding attention. */
@keyframes inv-drift-a {
  from { transform: translate3d(-4%, 0, 0) scale(1); }
  to   { transform: translate3d(4%, -6%, 0) scale(1.14); }
}

@keyframes inv-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8%, 8%, 0) scale(1.1); }
}

/* Large faded brand motif for texture */
.inv__motif {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -6%;
  translate: 0 -50%;
  width: min(58%, 620px);
  height: auto;
  opacity: 0.05;
  filter: grayscale(1) contrast(0.7);
  animation: inv-motif-float 18s ease-in-out infinite;
}

@keyframes inv-motif-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-18px) rotate(-2deg); }
}

/* --- Pillars --- */

.pillars__wrap { position: relative; margin-block-end: var(--sp-3xl); }

.pillars {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-lg);
}

/* Connector: sits at the icon centre and draws left to right, expressing
   the Proven leads to Scalable leads to Early progression. */
.pillars__line {
  position: absolute;
  z-index: 0;
  /* Aligned to the icon centre: card padding-block-start (2rem) plus half
     the 54px icon. Re-measure if either changes. */
  inset-block-start: 60px;
  inset-inline: 16%;
  height: 2px;
  overflow: hidden;
}

.pillars__line i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(var(--c-yellow-rgb), 0.7),
    rgba(var(--c-orange-rgb), 0.7),
    rgba(var(--c-purple-rgb), 0.7)
  );
  transform-origin: left center;
}

[dir="rtl"] .pillars__line i { transform-origin: right center; }

.pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xl) var(--sp-md);
  border-radius: var(--radius-md);
  border: var(--hairline) solid var(--pillar-tint, var(--c-line-dark));
  background-color: rgba(255, 255, 255, 0.035);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    transform var(--dur-med) var(--ease-spring),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

.pillar:nth-child(1) { --pillar-tint: rgba(var(--c-yellow-rgb), 0.5); --pillar-ink: var(--c-yellow); }
.pillar:nth-child(2) { --pillar-tint: rgba(var(--c-orange-rgb), 0.5); --pillar-ink: var(--c-orange); }
.pillar:nth-child(3) { --pillar-tint: rgba(var(--c-purple-rgb), 0.6); --pillar-ink: var(--c-purple); }

.pillar:hover {
  transform: translateY(-6px);
  background-color: rgba(255, 255, 255, 0.07);
  border-color: var(--pillar-tint);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.6),
              0 0 40px -12px var(--pillar-tint);
}

.pillar__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--pillar-ink);
  background-color: var(--c-navy);
  border: 2px solid var(--pillar-tint);
  margin-block-end: var(--sp-xs);
  transition: transform var(--dur-med) var(--ease-spring);
}

.pillar:hover .pillar__icon { transform: scale(1.08); }

.pillar__word {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: 700;
  color: var(--c-cream);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}

.pillar__desc {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--c-muted-dark);
  max-width: 24ch;
}

[dir="rtl"] .pillar__word { font-family: var(--font-arabic); letter-spacing: normal; }

/* --- Oversized CTA, the conversion point of the page --- */

.btn--xl {
  padding: 1.15em 2.4em;
  font-size: 1.05rem;
  border-radius: var(--radius-md);
  box-shadow: 0 6px 22px -4px rgba(var(--c-orange-rgb), 0.6);
}

.btn--xl:hover {
  box-shadow: 0 14px 40px -6px rgba(var(--c-orange-rgb), 0.78),
              0 0 60px -12px rgba(var(--c-orange-rgb), 0.5);
}

[dir="rtl"] .btn--xl { font-size: 1.1rem; }


/* ------------------------------------------------------------
   INVESTORS RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; gap: var(--sp-md); }

  /* The horizontal arc has no meaning once the pillars stack */
  .pillars__line { display: none; }

  .pillar { padding: var(--sp-lg) var(--sp-md); }
  .pillar__desc { max-width: 34ch; }
  .inv__motif { opacity: 0.035; width: 80%; inset-inline-end: -22%; }
}

@media (max-width: 560px) {
  .btn--xl { font-size: 0.95rem; padding: 1em 1.6em; width: 100%; }
}

/* ------------------------------------------------------------
   8. ABOUT US
   The breather. Editorial rather than marketing: looser leading,
   narrower measure, almost no motion.
   ------------------------------------------------------------ */

.about { isolation: isolate; }

/* Asymmetric on purpose. 1.3fr to 1fr is roughly 57/43, so the text column
   reads as primary and the photograph supports rather than competes. */
.about__inner {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
}

.about__content { max-width: 52ch; }


.about__title {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  margin-block-end: var(--sp-lg);
  text-wrap: balance;
}

/* Editorial body: larger, looser, slightly opened up. Reads as a short
   statement rather than as marketing copy. */
.about__body {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  line-height: 1.8;
  letter-spacing: 0.005em;
  color: var(--fg-muted);
  margin-block-end: var(--sp-2xl);
  text-wrap: pretty;
}

/* --- Ambient background --- */

.about__bg {
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  overflow: hidden;
  pointer-events: none;
}

/* Halftone field that drifts very slowly. 60s, so it is felt more than seen. */
.about__dots {
  position: absolute;
  inset: -10%;
  background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
  background-size: 18px 18px;
  color: var(--c-navy);
  opacity: 0.05;
  animation: about-drift 60s linear infinite;
}

@keyframes about-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(18px, 18px, 0); }
}

/* One soft glow that breathes. 14s in and out. */
.about__glow {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  margin-inline: auto;
  width: min(70%, 760px);
  aspect-ratio: 1.6;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(var(--c-yellow-rgb), 0.5) 0%,
    rgba(var(--c-orange-rgb), 0.12) 45%,
    transparent 70%
  );
  filter: blur(70px);
  animation: about-breathe 14s ease-in-out infinite;
}

@keyframes about-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.07); }
}

/* --- Partner credential --- */

.credential {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--fg-muted);
  padding: 0.55em 1.1em 0.55em 0.75em;
  border: var(--hairline) solid rgba(var(--c-navy-rgb), 0.14);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-xs);
  margin-block-end: var(--sp-xl);
}

.credential__mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #FFFFFF;
  background-color: var(--c-purple);
  flex-shrink: 0;
}

/* Thin rule above the credential, separating trust signal from body copy */
.about__inner .credential { position: relative; }

.about__inner .credential::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--sp-lg) * -1);
  inset-inline-start: 0;
  width: 44px;
  height: 1px;
  background-color: rgba(var(--c-navy-rgb), 0.18);
}


/* --- Image column --- */

.about__visual { position: relative; }

/* Square, not 4:5. At 4:5 the frame was so portrait that a square source lost
   a third of its width to object-fit, which cut the machine and the stand off
   at both sides. */
.about__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--hairline) solid rgba(var(--c-navy-rgb), 0.12);
  box-shadow: var(--shadow-lg);
}

/* Taller than the frame so the parallax drift never exposes an edge.
   The drift is yPercent -5 to +5, so 10% of travel; 114% leaves a 2% margin
   at each end. Kept as tight as is safe, because every extra percent of
   overscan is width the source has to give up. */
.about__frame img {
  position: absolute;
  inset-block-start: -7%;
  inset-inline: 0;
  width: 100%;
  height: 114%;
  object-fit: cover;
  will-change: transform;
}

/* Brand grade. soft-light keeps the photograph readable while pulling it
   toward the navy and yellow palette, so it stops looking like a raw
   product shot dropped into an editorial section. */
.about__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    155deg,
    rgba(var(--c-navy-rgb), 0.55) 0%,
    rgba(var(--c-purple-rgb), 0.18) 45%,
    rgba(var(--c-yellow-rgb), 0.35) 100%
  );
  mix-blend-mode: soft-light;
}

/* Warm lift in the lower corner, tying it to the section glow */
.about__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    120% 80% at 15% 110%,
    rgba(var(--c-orange-rgb), 0.22),
    transparent 60%
  );
}

[dir="rtl"] .credential { font-family: var(--font-arabic); padding: 0.55em 0.75em 0.55em 1.1em; }


/* ------------------------------------------------------------
   ABOUT RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 980px) {
  .about__inner { grid-template-columns: 1fr; gap: var(--sp-2xl); }
  .about__content { max-width: none; }

  /* Text first. The statement carries this section, the photo supports it. */
  .about__visual { grid-row: 2; max-width: 420px; margin-inline: auto; width: 100%; }
}

@media (max-width: 560px) {
  .about__body { line-height: 1.7; }
  .credential { font-size: 0.82rem; }
}

/* ============================================================
   CLOSING CTA
   A band, not a section. --section-py would make it as tall as
   About, which is exactly what this is not meant to be, so the
   padding is set locally at roughly a third of it.
   ============================================================ */

.closing {
  padding-block: clamp(3.25rem, 2rem + 3.4vw, 5rem);
}

/* Desktop: copy on one side, button on the other, spanning the container.
   A centred column here left large dead margins either side, which read as
   an unfinished section rather than a deliberate band. */
.closing__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg) clamp(2rem, 1rem + 3vw, 4.5rem);
  text-align: start;
  /* Capped rather than full container width. At full width the Arabic copy,
     which is a good deal shorter than the English, left a cavernous gap
     between the text and the button. This keeps both ends anchored while
     bounding how far apart they can drift, in either language. */
  max-width: 62rem;
  margin-inline: auto;
}

.closing__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  /* Sized to its own content, not stretched. Growing this box left a band of
     empty space inside it, between the copy and the button, which is invisible
     in English (the headline nearly fills the box) but obvious in Arabic,
     where the headline is shorter than the box and the button ends up
     stranded against the far edge. Shrinks before anything overflows. */
  flex: 0 1 auto;
  min-width: 0;
}

.closing__title {
  font-family: var(--font-display);
  /* Smaller than a section title on purpose. This should read as a
     closing line, not as the start of something new. */
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--fg);
}

[dir="rtl"] .closing__title {
  font-family: var(--font-arabic);
  letter-spacing: normal;
}

.closing__sub {
  font-size: var(--fs-base);
  color: var(--fg-muted);
  max-width: 52ch;
}

.closing__cta {
  flex: 0 0 auto;   /* never let the button squash to fit the copy */
}

/* Below this the row has no room left, so go back to a centred stack. */
@media (max-width: 820px) {
  .closing__inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: var(--sp-md);
  }

  .closing__text { flex: 0 1 auto; align-items: center; }
  .closing__sub  { margin-inline: auto; }
  .closing__cta  { margin-block-start: var(--sp-sm); }
}

@media (max-width: 560px) {
  .closing__cta { width: 100%; max-width: 320px; }
}


/* ------------------------------------------------------------
   CONTACT MODAL SHELL
   The contact content itself is unchanged; this is only the dialog
   that now carries it.
   ------------------------------------------------------------ */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-lg);
}

.modal[hidden] { display: none; }

.modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 16, 21, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  /* never taller than the viewport; the body scrolls instead */
  max-height: calc(100vh - var(--sp-xl));
  max-height: calc(100svh - var(--sp-xl));
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: var(--hairline) solid var(--c-line-dark);
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  will-change: transform, opacity;
}

/* The halftone is decorative and must not sit above the form */
.modal__dialog.has-halftone::before { z-index: 0; }

.modal__body {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Block padding is height aware so the dialog fits a laptop screen without
     scrolling. overflow-y stays auto purely as a safety net for extremes
     (very short windows, large text zoom); in normal use nothing scrolls. */
  padding: clamp(1.25rem, 3.2vh, 3.5rem) clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}

.modal__close {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--sp-md);
  inset-inline-end: var(--sp-md);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--c-cream);
  background-color: rgba(255, 255, 255, 0.08);
  border: var(--hairline) solid var(--c-line-dark);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-med) var(--ease-spring);
}

.modal__close:hover {
  background-color: var(--c-orange);
  border-color: var(--c-orange);
  color: #FFFFFF;
  transform: rotate(90deg);
}

/* Locks the page behind the dialog. The padding swap stops the layout
   jumping sideways when the scrollbar disappears. */
.has-modal {
  overflow: hidden;
  padding-inline-end: var(--scrollbar-w, 0px);
}

@media (max-width: 720px) {
  /* near fullscreen on a phone */
  .modal { padding: 0; }

  .modal__dialog {
    max-width: none;
    max-height: 100vh;
    max-height: 100svh;
    height: 100svh;
    border-radius: 0;
    border: 0;
  }

  /* Block padding stays height aware here too, otherwise this fixed value
     overrides the clamp above and pushes the form off a phone screen.
     The top value keeps clear of the close button. */
  .modal__body { padding: clamp(1.5rem, 4.4vh, 2.5rem) var(--sp-lg) clamp(1rem, 2.4vh, 1.75rem); }
  .modal__close { inset-block-start: var(--sp-sm); inset-inline-end: var(--sp-sm); }
}


/* ------------------------------------------------------------
   9. CONTACT
   Lives in the modal now. Same tokens as the dark sections.
   ------------------------------------------------------------ */

.contact__head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  /* Height linked, see the note on .cform */
  margin-block-end: clamp(1rem, 2.4vh, 3rem);
}


/* Gradient text. Cream to orange rather than the navy to orange in the brief,
   because the navy end would be invisible against a navy background. */
.contact__title {
  font-family: var(--font-display);
  /* vh in the middle term so a short window shrinks the headline too,
     instead of letting it push the form off screen. */
  font-size: clamp(1.75rem, 1rem + 1.6vw + 1.4vh, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  background-image: linear-gradient(100deg, var(--c-cream) 0%, var(--c-cream) 35%, var(--c-orange) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Soft bloom behind the type */
  filter: drop-shadow(0 0 34px rgba(var(--c-orange-rgb), 0.22));
}

[dir="rtl"] .contact__title { font-family: var(--font-arabic); letter-spacing: normal; }

/* Accent rule that draws in under the headline */
.contact__rule {
  display: block;
  width: 92px;
  height: 3px;
  margin: clamp(0.5rem, 1.2vh, 1rem) auto clamp(0.65rem, 1.6vh, 1.5rem);
  border-radius: 3px;
  overflow: hidden;
}

.contact__rule i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--c-yellow), var(--c-orange));
  transform-origin: left center;
}

[dir="rtl"] .contact__rule i { transform-origin: right center; }

.contact__sub {
  font-size: var(--fs-lg);
  color: var(--c-muted-dark);
  max-width: 52ch;
  margin-inline: auto;
}

.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  /* stretch, not start: the right column has to match the form's height so
     the art below the details card knows how much room it has. */
  align-items: stretch;
}

/* --- Form --- */

/* Two columns so short fields can pair up. Everything spans the full width
   unless it opts into a half with .field--half. The gap is tied to viewport
   height, not a fixed token, because this form lives in a dialog that has to
   fit the screen without scrolling. */
.cform {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.7rem, 1.7vh, 1.5rem);
}

.cform > * { grid-column: 1 / -1; }
.cform > .field--half { grid-column: span 1; }

/* Not enough room for two fields side by side down here. */
@media (max-width: 640px) {
  .cform > .field--half { grid-column: 1 / -1; }
}

.field { position: relative; }

.field__input {
  width: 100%;
  padding: 1.35rem 1rem 0.6rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--c-cream);
  background-color: rgba(255, 255, 255, 0.04);
  border: var(--hairline) solid var(--c-line-dark);
  border-radius: var(--radius-sm);
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.field__input:hover { border-color: rgba(255, 255, 255, 0.24); }

.field__input:focus {
  border-color: var(--c-orange);
  background-color: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(var(--c-orange-rgb), 0.18);
}

/* Floating label. Sits inside the field, lifts and shrinks on focus or once
   the field has content. :placeholder-shown does the "is it empty" test, which
   is why every input carries placeholder=" ". */
.field__label {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  font-size: 1rem;
  color: var(--c-muted-dark);
  pointer-events: none;
  transform-origin: inline-start top;
  transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label {
  transform: translateY(-0.62rem) scale(0.75);
  color: var(--c-muted-dark);
}

.field__input:focus + .field__label { color: var(--c-orange); }

/* RTL: the label has to travel from the right edge instead */
[dir="rtl"] .field__label { transform-origin: right top; }

/* Email validity tick */
.field__ok {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.9rem;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #FFFFFF;
  background-color: #3FA96A;
  opacity: 0;
  scale: 0.6;
  transition: opacity var(--dur-fast) var(--ease-out), scale var(--dur-med) var(--ease-back);
}

.field.is-valid .field__ok { opacity: 1; scale: 1; }

/* Error state, only applied after a submit attempt */
.field.is-error .field__input {
  border-color: #E5533D;
  background-color: rgba(229, 83, 61, 0.08);
}

.field.is-error .field__label { color: #F08C7A; }

/* --- Textarea --- */

.field--area .field__input {
  min-height: clamp(76px, 11vh, 128px);
  resize: none;          /* height is managed by the auto-grow script */
  overflow: hidden;
  line-height: 1.55;
  padding-block-end: 1.8rem;
}

.field__count {
  position: absolute;
  inset-block-end: 0.6rem;
  inset-inline-end: 0.9rem;
  font-size: 0.72rem;
  color: var(--c-muted-dark);
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* --- Inquiry pills --- */

.cform__group { border: 0; padding: 0; margin: 0; }

.cform__legend {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-muted-dark);
  margin-block-end: var(--sp-sm);
  padding: 0;
}

[dir="rtl"] .cform__legend { font-family: var(--font-arabic); letter-spacing: normal; text-transform: none; }

.pills { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }

.pill {
  padding: 0.62em 1.05em;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--c-cream);
  background-color: rgba(255, 255, 255, 0.05);
  border: var(--hairline) solid var(--c-line-dark);
  border-radius: 999px;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-med) var(--ease-spring);
}

.pill:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.3); }

.pill.is-active {
  background-color: var(--c-orange);
  border-color: var(--c-orange);
  color: #FFFFFF;
  box-shadow: 0 6px 18px -6px rgba(var(--c-orange-rgb), 0.6);
}

[dir="rtl"] .pill { font-family: var(--font-arabic); font-size: 0.95rem; }

/* --- Submit --- */

.cform__submit {
  position: relative;
  justify-self: start;
  min-width: 190px;
  overflow: hidden;
}

.cform__submit-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  opacity: 0;
}

.cform__submit.is-sent .cform__submit-label { opacity: 0; }
.cform__submit.is-sent .cform__submit-done  { opacity: 1; }
.cform__submit.is-busy { pointer-events: none; opacity: 0.75; }

/* Honeypot. Taken out of the layout and out of the tab order, but NOT with
   display:none or visibility:hidden, which the better bots detect and skip. */
.cform__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cform__status {
  font-size: 0.86rem;
  color: var(--c-muted-dark);
  min-height: 1.2em;
}

.cform__status.is-error { color: #F08C7A; }
.cform__status.is-ok    { color: #7FD6A2; }

/* --- Direct contact --- */

/* Right column. The card keeps its natural height; the art below it takes
   whatever is left, so the column always matches the form's height exactly
   and the dialog never grows past the viewport. */
.contact__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  min-height: 0;
}

/* No card. The arm is a cut out sitting directly on the dialog, and it
   bleeds to the very bottom edge: the negative margin cancels the modal
   body's bottom padding so there is no gap under it. */
.contact__art {
  /* basis 0, not auto. With auto the image claims its intrinsic height,
     which stretches the grid row and pushes the dialog into scrolling.
     At 0 it only ever consumes space the form has already accounted for. */
  flex: 1 1 0;
  /* Allowed to shrink to nothing. This is what guarantees the image can
     never be the reason the dialog starts scrolling. */
  min-height: 0;
  margin-block-end: calc(-1 * clamp(1.25rem, 3.2vh, 3.5rem));
}

.contact__art img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain, not cover: the arm is a cut out, so nothing should be sliced
     off it. It scales down to whatever room is left and sits on the bottom. */
  object-fit: contain;
  object-position: bottom center;
}

.contact__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  padding: var(--sp-xl);
  border-radius: var(--radius-md);
  border: var(--hairline) solid var(--c-line-dark);
  background-color: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.contact__line {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: 1rem;
  color: var(--c-cream);
  transition: color var(--dur-fast) var(--ease-out);
}

.contact__line:hover { color: var(--c-yellow); }

.contact__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--c-purple);
  background-color: rgba(var(--c-purple-rgb), 0.14);
  border: var(--hairline) solid rgba(var(--c-purple-rgb), 0.3);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.contact__line:hover .contact__ico {
  background-color: var(--c-orange);
  border-color: var(--c-orange);
  color: #FFFFFF;
}

/* Closing brand moment */
.contact__signoff {
  margin-block-start: var(--sp-md);
  padding-block-start: var(--sp-lg);
  border-block-start: var(--hairline) solid var(--c-line-dark);
}

/* Speech bubble motif from the brand deck, rebuilt in CSS */
.contact__bubble {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-navy);
  background-color: var(--c-yellow);
  padding: 0.45em 0.9em;
  border-radius: var(--radius-sm);
  margin-block-end: var(--sp-md);
}

.contact__bubble::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 1.2em;
  border: 7px solid transparent;
  border-block-start-color: var(--c-yellow);
  border-block-end-width: 0;
}

[dir="rtl"] .contact__bubble { font-family: var(--font-arabic); }

.contact__tagline {
  font-size: 0.95rem;
  color: var(--c-muted-dark);
  font-style: italic;
}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

.site-footer {
  padding-block: var(--sp-2xl);
  border-block-start: var(--hairline) solid var(--c-line-dark);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-lg);
}

/* align-items must not be the default stretch. This is a column flexbox, so
   a stretched item is forced to the full column width, which overrode the
   image's width:auto and squashed the logo to a 4.28 aspect against its
   true 1.388. */
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-xs);
}

.footer__brand img {
  width: auto;
  height: 48px;
  flex-shrink: 0;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md);
}

.footer__nav a {
  font-size: 0.86rem;
  color: var(--c-muted-dark);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__nav a:hover { color: var(--c-yellow); }

.footer__copy {
  font-size: 0.8rem;
  color: var(--c-muted-dark);
  width: 100%;
  padding-block-start: var(--sp-lg);
  border-block-start: var(--hairline) solid var(--c-line-dark);
}


/* ------------------------------------------------------------
   CONTACT RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 980px) {
  .contact__inner { grid-template-columns: 1fr; }

  /* Single column: there is no leftover space to fill, so the art would
     simply add height and bring the scrollbar back. */
  .contact__art { display: none; }
}

@media (max-width: 560px) {
  /* Generous tap targets on touch */
  .field__input { padding: 1.45rem 1rem 0.7rem; font-size: 1.02rem; }
  .pill { padding: 0.75em 1.1em; font-size: 0.9rem; }
  .cform__submit { width: 100%; justify-self: stretch; }
  .contact__aside { padding: var(--sp-lg); }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

/* Short viewports, which on a phone means all of them. Everything below is
   about getting the dialog to fit without a scrollbar. Only decoration is
   dropped: no field, no label and no contact detail is ever removed. */
@media (max-height: 860px) {
  /* The sign off is a brand flourish, not information. */
  .contact__signoff { display: none; }

  /* Phone and email sit side by side instead of stacked. */
  .contact__aside {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-sm) var(--sp-lg);
    padding: var(--sp-md) var(--sp-lg);
  }

  .contact__inner { gap: clamp(0.75rem, 1.8vh, 1.75rem); }
  .contact__head { margin-block-end: clamp(0.7rem, 1.8vh, 2rem); }
  .contact__ico { width: 32px; height: 32px; }
  .contact__sub { font-size: 1rem; }
}

/* Tighter still. The sub line under the headline is the last thing to go,
   since the headline alone already says what the dialog is for. On a phone
   it costs three lines, which is the difference between fitting and not. */
@media (max-width: 620px), (max-height: 680px) {
  .contact__sub { display: none; }
}

/* --- 8. Contact --- */
/* --- Footer --- */