/* ============================================================================
   SAB (Saudi Awwal Bank) × tphDDB — design system

   A BLEND OF TWO GUIDELINES, WEIGHTED TO SAB.
   Sources: sab.com audit (2026-08-04) + DDB_Guidelines_April25.pdf.

   The happy discovery is that both systems already agree on structure:

     SAB  white ground, one red, a grey ramp, square CTAs, no secondary colour.
     DDB  "colours are accents against a white backdrop ... most successful
          used individually with white" (p.19) and "should only ever be used
          with white or black — avoid mixing colours together within the same
          environment" (p.22).

   So the shared law is: WHITE GROUND, ONE ACCENT, NEUTRALS. Never two accents
   in one environment. Both brands say it; we only have to obey it once.

   Where they differ, SAB wins (client-led pitch):
     - the accent is SAB red, not DDB yellow
     - the grey ramp is SAB's (theirs is fuller; DDB Gray #CCCECE and SAB
       #CCCCCC are the same colour to the eye anyway)
     - square CTAs, per SAB

   DDB shows up as: the black, the yellow used sparingly as an agency
   signature, and the type discipline below.

   TYPE LAW — both guidelines, obeyed:
     - No all-caps. DDB p.28: "Type should be set using title case and
       sentence case." SAB's own site is almost entirely non-caps.
     - No heavy tracking. DDB p.28 warns against over-kerning.
     - Left-aligned by default. DDB p.28: "Left aligned type is the preferred
       method."
   Weight contrast in display type is kept — that is SAB's own behaviour, and
   SAB leads.

   Type substitution: SAB use Univers Next for HSBC (HSBC-licensed). DDB use
   Brignell Square, which p.27 says cannot be sent outside the DDB network,
   and nominate Helvetica as the sanctioned alternate. Inter is a neo-grotesque
   that stands in credibly for all three, and is self-hosted with no exposure.

   RULE: literal colours live only in :root. Components bind to roles.
   ============================================================================ */

/* ---- Inter (Latin) ---- */
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-latin-700.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---- IBM Plex Sans Arabic ---- */
@font-face{font-family:'Plex Arabic';src:url('../fonts/plexar-arabic-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Plex Arabic';src:url('../fonts/plexar-arabic-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Arabic';src:url('../fonts/plexar-arabic-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex Arabic';src:url('../fonts/plexar-arabic-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Plex Arabic';src:url('../fonts/plexar-arabic-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root {
  /* ---- SAB primitives (audited from sab.com + supplied master artwork) ---- */
  --sab-red:        #DB0011;   /* dominant UI red — identical to HSBC Red */
  --sab-red-logo:   #E20613;   /* logo artwork only; the #FF030E export is oversaturated */
  --sab-red-hover:  #AD2727;
  --sab-red-deep:   #A8000D;
  --sab-ink:        #202020;
  --sab-ink-head:   #333333;
  --sab-grey-600:   #5C5C5C;
  --sab-grey-500:   #767676;
  --sab-grey-400:   #9C9C9C;
  --sab-grey-200:   #CCCCCC;   /* == DDB Gray #CCCECE to the eye */
  --sab-grey-150:   #E4E4E4;
  --sab-grey-100:   #F3F3F3;
  --sab-white:      #FFFFFF;

  /* ---- DDB palette (guidelines p.18, verbatim) ----
     Present so the agency voice is available, NOT so it gets used. Yellow is
     the agency signature and appears at agency moments only. Green, blue and
     the DDB red are declared for completeness and should stay unused here —
     a second accent breaks both rulebooks at once. */
  --ddb-yellow: #FBD10D;   /* PMS 108 U  — the core of DDB identity */
  --ddb-black:  #241F21;   /* PMS Process Black U */
  --ddb-gray:   #CCCECE;   /* Cool Gray 2 U */
  --ddb-red:    #EE3E40;   /* PMS 1788 U — NOT the UI accent; SAB red leads */
  --ddb-green:  #BAE0C2;   /* PMS 573 U  — unused */
  --ddb-blue:   #99BAC2;   /* PMS 551 U  — unused */

  /* ---- Semantic roles ---- */
  --bg-page:        var(--sab-white);
  --bg-surface:     var(--sab-grey-100);
  --bg-invert:      var(--ddb-black);      /* dark bands read as DDB */
  --text-primary:   var(--sab-ink);
  --text-muted:     var(--sab-grey-500);
  --text-inverse:   var(--sab-white);
  --border-default: var(--sab-grey-200);
  --border-soft:    var(--sab-grey-150);
  --accent:         var(--sab-red);        /* THE single accent. Do not add a second. */
  --on-accent:      var(--sab-white);
  --signature:      var(--ddb-yellow);     /* agency moments only, never UI */
  --ring:           var(--sab-red);

  /* ---- Type ---- */
  --font:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-ar: 'Plex Arabic', 'Inter', Tahoma, sans-serif;

  /* ---- Space ---- */
  --space-xs: 8px;  --space-sm: 16px; --space-md: 24px; --space-lg: 40px;
  --space-xl: 64px; --space-2xl: 96px; --space-3xl: 144px;

  /* ---- Radius — SAB is square. CTAs carry 0; cards may take 5/10/15. ---- */
  --radius-0: 0px; --radius-sm: 5px; --radius-md: 10px; --radius-lg: 15px;

  /* ---- Motion ---- */
  --dur-fast: 200ms; --dur-med: 400ms; --dur-slow: 800ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Layout ---- */
  --gutter:  clamp(24px, 7vw, 120px);
  --content: 1180px;
}

/* ============================================================================
   Reset + base
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  background: var(--bg-page);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

html[lang^="ar"] body { font-family: var(--font-ar); direction: rtl; }

.container { width: 100%; padding-inline: var(--gutter); }
.inner     { max-width: var(--content); margin-inline: auto; }
.section   { padding-block: var(--space-3xl); }

/* ============================================================================
   Type scale — mirrors sab.com (48/32/28/24/20/18/16/13) with the generous
   leading their system uses (28px on 16px body).
   ============================================================================ */
/* Sentence case, modest tracking. DDB p.28 forbids all-caps and warns against
   over-kerning; SAB's own site is almost entirely non-caps. The old uppercase
   .2em eyebrow broke both rulebooks. */
.t-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: none; color: var(--accent);
}
/* Brand lockups must never be case-transformed — "tphDDB" is cased deliberately
   and uppercasing it produces "TPHDDB". */
.t-eyebrow--brand { letter-spacing: .02em; }
.t-display { font-size: clamp(38px, 6vw, 76px); font-weight: 300; line-height: 1.05; letter-spacing: -.025em; }
.t-display b, .t-display strong { font-weight: 700; }
.t-h2   { font-size: clamp(28px, 3.6vw, 46px); font-weight: 300; line-height: 1.12; letter-spacing: -.02em; }
.t-h2 b { font-weight: 700; }
.t-h3   { font-size: clamp(20px, 2vw, 24px); font-weight: 600; line-height: 1.3; }
.t-lead { font-size: 18px; line-height: 1.65; color: var(--text-muted); }
.t-body { font-size: 16px; line-height: 1.75; color: var(--text-muted); }
.t-small{ font-size: 13px; line-height: 1.7; color: var(--text-muted); }

/* ============================================================================
   Buttons — square, solid red, Inter Bold. SAB's own proportions (12px 24px).
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--on-accent);
  border: 1px solid var(--accent); border-radius: var(--radius-0);
  font-size: 16px; font-weight: 700; line-height: 22px; padding: 12px 24px;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn--ghost { background: transparent; color: var(--accent); }
.btn--dark { background: var(--bg-invert); border-color: var(--bg-invert); color: var(--text-inverse); }

/* The site's other dominant CTA: a red text link with a trailing arrow. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); font-size: 16px; font-weight: 600;
}
.link-arrow svg { transition: transform var(--dur-fast) var(--ease-out); }
html[lang^="ar"] .link-arrow svg { transform: scaleX(-1); }

/* ============================================================================
   PATTERN — the mark tessellated.
   SAB's own centenary artwork tiles the mark's triangle geometry into
   alternating bowties on a diamond grid. Rebuilt here as a 468-byte vector
   tile rather than lifted from their JPEG, so it scales and re-colours.
   Applied as a masked decorative layer — it should whisper, never shout.
   ============================================================================ */
.has-pattern { position: relative; isolation: isolate; }
.has-pattern::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('../img/sab-pattern-grey.svg') 0 0 / var(--pattern-size, 520px) repeat;
  opacity: var(--pattern-opacity, .55);
  /* fade it out toward the text so nothing competes with the copy */
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, transparent 8%, #000 78%);
          mask-image: radial-gradient(120% 90% at 50% 50%, transparent 8%, #000 78%);
  pointer-events: none;
}
.has-pattern--red::before { background-image: url('../img/sab-pattern-red.svg'); opacity: .07; }
.has-pattern--edge::before {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 46%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 46%);
}

/* ============================================================================
   INTERACTION LAYER
   Press feedback, hover gating, and the reveal system. These are the details
   nobody consciously notices — which is exactly why they have to be right.
   ============================================================================ */

/* ---- press: instant, subtle, on everything pressable ---- */
.btn, .link-arrow, .nav a {
  transition: transform 160ms var(--ease-out),
              background 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              color 200ms var(--ease-out);
}
.btn:active      { transform: scale(.97); }
.link-arrow:active { transform: scale(.98); }

/* ---- hover only where hover actually exists ---- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover        { background: var(--sab-red-hover); border-color: var(--sab-red-hover); }
  .btn--ghost:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--sab-red-hover); }
  .btn--dark:hover  { background: #000; border-color: #000; }
  .link-arrow:hover svg { transform: translateX(4px); }
  html[lang^="ar"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }
}

/* ---- reveal: blur-up on entry. Never from scale(0) — things do not appear
       out of nothing. Transform + opacity + filter only, so it stays on the
       compositor. ---- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition: opacity 700ms var(--ease-out),
              transform 700ms var(--ease-out),
              filter 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; filter: blur(0); }

/* ---- header: arrives once the vault is behind us ---- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg);
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--bg-page) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  opacity: 0; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out),
              border-color 400ms var(--ease-out);
}
.site-header.is-in { opacity: 1; pointer-events: auto; transform: none; border-bottom-color: var(--border-soft); }
.site-header img { height: 26px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  padding: 8px 12px; color: var(--text-muted); border-radius: var(--radius-0);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { color: var(--text-primary); }
}
.site-nav a:active { transform: scale(.97); }
/* ---- mobile menu ----
   Two bars that cross into an X. Hidden on desktop, where the nav is inline. */
.nav-toggle { display: none; }
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--text-primary);
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-toggle span + span { margin-top: 6px; }
.nav-toggle.is-open span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle.is-open span + span      { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 720px) {
  /* 44px minimum touch target, even though the bars themselves are smaller */
  .nav-toggle {
    display: grid; place-content: center;
    min-width: 44px; min-height: 44px;
  }
  .site-nav {
    display: none;
    /* absolute, not fixed: the header sets backdrop-filter, which makes it the
       containing block for fixed descendants — a fixed panel here lays itself
       out against the header box, not the viewport, and paints in the wrong
       place. Absolute against the (already fixed) header is what we want. */
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-sm) var(--gutter) var(--space-lg);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-soft);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 14px 0; font-size: 17px; color: var(--text-primary); }
  .site-nav a + a { border-top: 1px solid var(--border-soft); }
}

/* ---- reduced motion: keep the meaning, drop the movement ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .btn:active, .link-arrow:active, .site-nav a:active { transform: none; }
  .site-header { transition: opacity 200ms ease; transform: none; }
}

/* Corporate lockup. Guidelines p.7: below 86px the B may not stand alone —
   the wordmark must sit to its right. NOTE: the wordmark here is set in Inter,
   not the official cut. Swap in the real corporate lockup asset when we have it. */
.brand-lockup { display: inline-flex; align-items: center; gap: 9px; }
.brand-lockup img { height: 30px; width: auto; }
.brand-lockup span {
  font-size: 9.5px; font-weight: 700; line-height: 1.16;
  letter-spacing: .005em; color: var(--text-primary); text-transform: none;
}