/* CFO+ design tokens. One list for every screen.
   A component reads these names, never a raw value. Fluid values (clamp) are part of the token:
   they scale with the window so the first screen fits one viewport on a desktop. */
:root{
  color-scheme:dark;

  /* ---- colour: dark surface (home, openings, closing) ---- */
  --ink:#070B16;            /* page ground */
  --ink-deep:#04070E;       /* closing band, footer, menu sheet */
  --ink-rgb:7,11,22;        /* --ink as r,g,b, for fades over paintings */
  --cream:#F6F1E7;          /* primary text on dark */
  --cream-rgb:246,241,231;
  --mist:#B9C4D8;           /* secondary text on dark */
  --dim:#8FA0BE;            /* labels, footer text on dark */
  --hair:rgba(246,241,231,.14);         /* hairline on dark */
  --hair-strong:rgba(246,241,231,.34);  /* outlined control border */
  --fill-hover:rgba(246,241,231,.06);   /* hover ground of a quiet control */
  --fill-press:rgba(246,241,231,.12);   /* pressed ground of a quiet control */
  --fill-off:rgba(246,241,231,.12);     /* disabled ground */

  /* ---- colour: brand ---- */
  --amber:#EF9F27;          /* the one accent: plus badge, primary action, emphasis */
  --amber-rgb:239,159,39;
  --amber-press:#D98A14;    /* primary action while pressed */
  --gilt:#C9A84C;           /* quiet gold: hairlines, rules, chips */
  --gilt-rgb:201,168,76;
  --white:#FFFFFF;          /* plus bars inside the badge */
  --danger:#E8776B;         /* error text and icon on dark (the product's alert colour) */

  /* ---- colour: paper surface (service detail sections, letter, product windows) ---- */
  --paper:#F7F5EF;
  --niche:#ECE7DB;
  --card:#FFFFFF;
  --navy:#042C53;           /* primary text and solid controls on paper */
  --slate:#4E5F7C;          /* secondary text on paper */
  --caramel:#94551F;        /* accent text on paper (amber is too light there) */
  --gold-text:#7A5B16;      /* small gold labels on paper (decision 8 of round 4: 6.1:1 on paper) */
  --paper-hair:rgba(4,44,83,.16);
  --blue:#185FA5;           /* "from the engine" */
  --ok:#1F7A53;             /* correct, on plan */
  --bad:#A23B2E;            /* error, on paper */

  /* ---- type: families ---- */
  --display:'CFO Serif','CFO Naskh','Gelasio','Noto Naskh Arabic',Georgia,'Times New Roman',serif;
  --body:'CFO Sans','CFO Sans Arabic','IBM Plex Sans Arabic','Tajawal','Segoe UI',Tahoma,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;

  /* ---- type: sizes (Latin) and their Arabic pair ---- */
  --fs-hero:clamp(34px,min(5.2vw,7.4vh),70px);       /* home headline */
  --fs-hero-ar:clamp(33px,min(4.7vw,6.3vh),64px);
  --fs-h2:clamp(28px,3.7vw,50px);                    /* section headline */
  --fs-h2-ar:clamp(30px,4vw,54px);
  --fs-card:clamp(19px,min(1.8vw,3vh),26px);         /* card title */
  --fs-card-ar:clamp(21px,min(2vw,3.3vh),29px);
  --fs-contact:clamp(20px,2.2vw,28px);               /* contact line */
  --fs-lede:clamp(15.5px,min(1.4vw,2.3vh),19.5px);   /* intro paragraph */
  --fs-tag:clamp(14.5px,min(1.25vw,2.25vh),18px);    /* line above the headline */
  --fs-body:17px;
  --fs-nav:16px;
  --fs-btn:16px;
  --fs-btn-lg:clamp(16px,2.1vh,18px);
  --fs-card-text:clamp(13.5px,min(1.1vw,1.95vh),15.5px);
  --fs-link:clamp(13.5px,1.85vh,15px);               /* "Explore" in a card */
  --fs-control:15px;                                 /* language button, menu button */
  --fs-small:14.5px;                                 /* footer, short notes */
  --fs-label:12px;                                   /* uppercase label (Latin) */
  --fs-label-ar:14px;                                /* same label in Arabic: no capitals, no tracking */
  --fs-chip:11px;
  --fs-chip-ar:12.5px;

  /* ---- type: weight, leading, tracking ---- */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semi:600;            /* Arabic headings */
  --fw-bold:700;
  --lh-hero:1.12;
  --lh-hero-ar:1.3;
  --lh-h2:1.18;
  --lh-h2-ar:1.42;
  --lh-card:1.2;
  --lh-card-ar:1.35;
  --lh-body:1.6;
  --lh-body-ar:1.7;
  --lh-tight:1.4;
  --tr-display:-.01em;      /* Latin headlines only */
  --tr-label:.18em;         /* Latin uppercase labels only */
  --tr-chip:.14em;

  /* ---- space: 4px base ---- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:32px;
  --sp-8:44px;
  --sp-9:64px;
  --gutter:clamp(16px,4.4vw,64px);                   /* page side padding */
  --gap-hero:clamp(12px,2.3vh,24px);                 /* between hero lines */
  --gap-cta:14px 30px;                               /* between hero actions (row, column) */
  --pad-card-y:clamp(14px,2.8vh,30px);
  --pad-card-x:clamp(16px,2.4vw,40px);
  --pad-strip-y:clamp(10px,1.9vh,18px);
  --gap-logos:clamp(30px,4.2vw,68px);
  --pad-closing-y:clamp(72px,10vw,132px);
  --gap-closing:clamp(22px,3vw,36px);

  /* ---- size ---- */
  --nav-h:104px;            /* 94px in short or narrow windows, see breakpoints */
  --logo-w:140px;           /* nav lockup, 130px compact; height follows 277:178 */
  --logo-h:90px;
  --tap:44px;               /* smallest touch target */
  --btn-h:46px;
  --btn-h-lg:clamp(46px,6.2vh,54px);
  --btn-pad:26px;
  --btn-pad-lg:34px;
  --plus:clamp(40px,6.4vh,56px);                     /* the rolling plus badge */
  --band-min:clamp(162px,26vh,330px);                /* least height of the three cards */
  --card-min-stacked:176px;                          /* a card when the three stack */
  --strip-logo-h:clamp(24px,4.3vh,34px);
  --measure:60ch;           /* longest line of running text */

  /* ---- radius ---- */
  --r-pill:999px;           /* buttons, chips */
  --r-focus:6px;
  --r-md:12px;
  --r-lg:16px;
  --r-badge:22%;            /* the plus badge: 11 of 50 */

  /* ---- line ---- */
  --line:1px;
  --rule:2px;               /* accent rule beside the tag, under the current link */
  --focus:3px solid var(--navy);   /* on paper and white: 12:1. On the dark grounds it is amber (see the rule below), 8:1 and more */
  --focus-offset:3px;

  /* ---- elevation ---- */
  --shadow-cta:0 10px 30px -10px rgba(var(--amber-rgb),.7);
  --shadow-plus:0 4px 16px rgba(var(--amber-rgb),.5);
  --shadow-sheet:0 28px 60px -24px rgba(0,0,0,.9);
  --scrim:rgba(4,7,14,.72);                          /* dims the page under the open menu */
  --glow:rgba(var(--amber-rgb),.26),rgba(var(--amber-rgb),.09) 42%,rgba(var(--amber-rgb),0) 72%;   /* stops of the amber light */
  --rule-gilt:linear-gradient(to right,rgba(var(--gilt-rgb),0),var(--gilt) 18%,var(--gilt) 82%,rgba(var(--gilt-rgb),0));

  /* ---- motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-press:.12s;           /* pressed feedback */
  --t-base:.25s;            /* colour, border, lift */
  --t-slow:.5s;             /* image brightness */
  --t-enter:.9s;            /* one element arriving */
  --t-in:.4s;               /* the first screen's elements arriving: the whole screen is on show within 0.7 s */
  --t-marquee:56s;
  --t-drift:32s;
  --t-roll:30s;

  /* ---- layers ---- */
  --z-nav:5;
  --z-intro:6;
  --z-screen-intro:7;
  --z-menu:8;
  --z-toast:9;
}

/* Breakpoints (media queries cannot read custom properties; these numbers are the contract):
     phone      up to 520px wide      compact lockup, no "Get started" in the bar
     tablet     521px to 940px        menu button instead of the four links
     stacked    up to 859px           the three cards stack; the page scrolls
     desktop    860px and wider       the three cards sit side by side; the first screen is exactly one
                                      viewport whenever its content fits (from about 680px of height) and
                                      grows a little, never clips, in a shorter window
     short      up to 740px tall      compact lockup */
@media (max-height:740px),(max-width:520px){
  :root{--nav-h:94px;--logo-w:130px;--logo-h:84px}
}

/* the focus ring takes the colour that is read on its ground: navy on paper and white, amber on ink and navy (both 3:1 and more, build 21) */
.nav,.hero,.band,.band--rule,.band-navy,.meet,.finale,.foot,.lightbox,.mega,.sheet,.pathbar,.launch,.lz-offer,.lz-n,.lz-q,.lz-doors{--focus:3px solid var(--amber)}