/*!
 * AlBabtain Group theme stylesheet.
 * Derived verbatim from albabtain-preview_218.html (SHA-256 248F2E568FE58ACB998B116F0B35013672DEE2FDB5078377711AAD4017938B00)
 * by tools/analysis/build-theme-css.js. Do not edit by hand; edit the generator or add rules to theme-extra.css.
 */
@font-face{font-family:'Plex';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/plex-300.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2190-21BB}@font-face{font-family:'Plex';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2190-21BB}@font-face{font-family:'Plex';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/plex-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2190-21BB}@font-face{font-family:'Plex';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/plex-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2190-21BB}@font-face{font-family:'Almarai';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/almarai-300.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF}@font-face{font-family:'Almarai';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/almarai-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF}@font-face{font-family:'Almarai';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/almarai-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF}@font-face{font-family:'Almarai';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/almarai-800.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,U+FB50-FDFF,U+FE70-FEFF}
:root{
  --ink:#0F1A20; --midnight:#22333E; --petrol:#4E748A; --petrol-dk:#3C5D71;
  /* 27 Sep 2026 — Hisham: "the teal color looks off, just use our logo color or one of
     the colors used in the filmstrip". Both answers are the same colour: #4E748A is the
     logo blue sampled pixel-exact from the master artwork (doc 07) AND the filmstrip's
     third card. The token keeps its name so all 43 references move at once; only the
     portfolio bar, which the brief forbids recolouring, is pinned to literals above. */
  --teal:#4E748A; --amber:#D9922B; --paper:#F6F8F9; --line:#DDE5E9;
  --slate:#5C6E78; --white:#fff;
  /* The design-preview strip is fixed to the foot of the window and is 53px tall. The home
     hero subtracts it so the stat band clears it WHILE THIS IS A PREVIEW. Delete this one
     declaration along with .previewbar before handover and the hero grows back by 53px. */
  --previewbar:53px;
  --mist:#A8C4CE;      /* brief 8.6, the portfolio bar's fourth segment */
  --font:'Plex','Almarai',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --r:4px;
  --gut:clamp(20px,5vw,64px);
  --sec:clamp(64px,9vw,132px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.65;font-weight:400;-webkit-text-size-adjust:100%;
  font-synthesis:none}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gut)}
.narrow{}

/* ---------- type scale: tight headings against open body ---------- */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.025em;line-height:1.08}
h1{font-size:clamp(38px,6.2vw,76px)}
h2{font-size:clamp(30px,4vw,50px);line-height:1.12}
h3{font-size:clamp(20px,2vw,26px);line-height:1.2;letter-spacing:-.015em}
p{margin:0 0 1.1em}
.lede{font-size:clamp(18px,1.7vw,23px);line-height:1.6;font-weight:300;color:var(--slate)}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--teal);margin:0 0 18px}
.eyebrow.rev{color:rgba(255,255,255,.75)}

/* ---------- photography slot ---------- */
.ph{position:relative;overflow:hidden;background:var(--midnight);
  background-image:linear-gradient(142deg,#1B2A33 0%,#2E4C5C 48%,#4E748A 100%)}
.ph::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(118deg,rgba(255,255,255,.05) 0 1px,transparent 1px 15px)}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 85% at 78% 8%,rgba(255,255,255,.10),transparent 62%)}
.ph>img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.ph-note{position:absolute;inset-block-end:14px;inset-inline-start:14px;z-index:3;
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.26);
  padding:5px 11px;border-radius:20px;backdrop-filter:blur(2px)}

/* ---------- header ---------- */
.site-head{position:fixed;inset-block-start:0;inset-inline:0;z-index:60;
  transition:background .35s ease,border-color .35s ease}
.site-head .bar{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-block:18px;border-block-end:1px solid transparent}
.brand{display:inline-flex;align-items:center;gap:16px;min-block-size:44px;flex:none;
  color:var(--white);transition:color .35s ease}
.brand svg{inline-size:auto;transition:block-size .35s ease}
.brand .bem{block-size:52px}
.brand .bwd{block-size:23px}
@media(max-width:560px){.brand{gap:11px}.brand .bem{block-size:40px}.brand .bwd{block-size:17px}}
.mainnav{display:flex;align-items:center;gap:4px}
.mainnav a{font-size:14.5px;font-weight:600;text-decoration:none;color:rgba(255,255,255,.88);
  padding:9px 14px;border-radius:var(--r);transition:color .2s,background .2s}
.mainnav a:hover{background:rgba(255,255,255,.12);color:#fff}
.mainnav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--petrol)}
.lang{border:1px solid rgba(255,255,255,.4);border-radius:var(--r);margin-inline-start:10px}
.lang-soon{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.5);padding:9px 14px;
  cursor:not-allowed}
.site-head.solid .lang-soon{color:var(--silver,#C3CED4)}
.site-head.solid{background:rgba(255,255,255,.97);border-block-end:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(8px)}
.site-head.solid .brand{color:var(--petrol);gap:13px}
.site-head.solid .brand .bem{block-size:44px}
.site-head.solid .brand .bwd{block-size:19px}
.site-head.solid .mainnav a{color:var(--ink)}
.site-head.solid .mainnav a:hover{background:var(--paper);color:var(--teal)}
.site-head.solid .lang{border-color:var(--line)}
.navclose{display:none}
.navtoggle{display:none;background:none;border:1px solid rgba(255,255,255,.45);color:#fff;
  border-radius:var(--r);inline-size:46px;block-size:44px;font-size:19px;cursor:pointer}
.site-head.solid .navtoggle{border-color:var(--line);color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;min-block-size:min(100svh,900px);display:flex;align-items:flex-end;
  color:#fff;padding-block:150px clamp(56px,7vw,96px);isolation:isolate}
/* 30 Sep 2026. Hisham: "when i open the homepage i want the stats to show at the buttom of
   the page which means the hero page must be a bit shorter." The home hero was a full
   100svh, so the band began exactly where the screen ended. Reserving the band's own height
   lifts it into the first screen at any viewport, and the cap keeps the picture from
   stretching on a tall desktop. Home only — the other heroes carry their own inline size. */
[data-route="index.html"] .hero{min-block-size:min(calc(100svh - 176px - var(--previewbar,0px)),760px);
  padding-block:132px clamp(40px,5vw,72px)}
.hero .veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(to top,rgba(12,22,28,.86) 0%,rgba(12,22,28,.45) 42%,rgba(12,22,28,.22) 100%)}
.hero .wrap{position:relative;z-index:3;inline-size:100%}
.hero .mark{position:absolute;z-index:1;inset-block-start:-14%;inset-inline-end:-8%;
  block-size:118%;inline-size:auto;color:#fff;opacity:.045;
  clip-path:inset(0 0 26% 0)}
.hero h1{text-wrap:balance}
.hero .lede{color:rgba(255,255,255,.9);font-weight:300;margin-block-start:22px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:34px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-block-size:48px;padding:0 26px;border-radius:var(--r);font-size:15.5px;font-weight:600;
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.18s}
.btn-a{background:var(--amber);color:#20160A;border-color:var(--amber)}
.btn-a:hover{background:#C9861F;border-color:#C9861F}
.btn-g{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-g:hover{background:rgba(255,255,255,.14);border-color:#fff}
.btn-o{background:transparent;color:var(--teal);border-color:var(--line)}
.btn-o:hover{border-color:var(--teal);background:var(--paper)}

/* ---------- proof strip ---------- */
.proof{background:var(--midnight);color:#fff}
/* auto-fit, not repeat(4,1fr): a band with three facts should show three cells,
   not three and an empty one. Collapses correctly for two, three or four. */
.proof .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-inline-start:1px solid rgba(255,255,255,.14)}
.proof .cell{padding:clamp(26px,3.4vw,44px) clamp(16px,2.4vw,34px);
  border-inline-end:1px solid rgba(255,255,255,.14)}
.proof b{display:block;font-size:clamp(34px,4.4vw,56px);font-weight:700;line-height:1;
  letter-spacing:-.035em}
.proof span{display:block;margin-block-start:11px;font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* ---------- sections ---------- */
section{padding-block:var(--sec)}
/* ---------- running prose is justified, 28 September 2026 ----------
   Hisham: "you need to make it justify next to photos like our founder."

   With the width caps gone (doc 89) every block starts on the page gutter, but the right edge
   was still ragged and that is what was reading as unaligned. Justified sets both edges.

   `hyphens:auto` goes with it and is not optional: justifying a 130-character line without
   hyphenation opens rivers of white space between words, which looks worse than ragged. The
   document is `lang="en"`, so the browser's English dictionary applies.

   Scoped to running prose only. Headings, eyebrows, stat cells, buttons, form hints, captions
   and photo notes keep their natural ragged edge — justifying a two-word label does nothing but
   stretch it. Anything inside a narrow card or grid cell is also left out: a 268px column is
   too narrow to justify without visible gaps, whatever the hyphenation. */
section .wrap > p,
section .sec-head p,
.split .rise p,
.fsplit p,
.legal p,
.cofoot,
.band .inner p{
  text-align:justify;
  -webkit-hyphens:auto;hyphens:auto}
/* an eyebrow is a label that happens to be a <p> */
.eyebrow,.subhead,.subhead-mini,.meta,.hint,.ph-note{text-align:start;hyphens:manual}
/* Arabic and the RTL mirror hyphenate differently; justification is kept, hyphens are not */
[dir="rtl"] section .wrap > p,[dir="rtl"] .split .rise p,[dir="rtl"] .fsplit p{hyphens:manual}

/* Not on a phone. Below 760px the columns collapse to about 350px, which is 40-45 characters
   a line, and justifying a line that short forces word gaps wide enough to read as holes in
   the paragraph — measured on the founder copy at 390px, where "1958 as a small enterprise
   promoting" stretched across the full measure. Hyphenation would absorb some of it, but
   `hyphens:auto` depends on the browser shipping an English dictionary and cannot be relied on.
   Justified where the measure can carry it, ragged where it cannot. */
@media(max-width:760px){
  section .wrap > p,
  section .sec-head p,
  .split .rise p,
  .fsplit p,
  .legal p,
  .cofoot,
  .band .inner p{text-align:start}
}
/* ---------- one line width: the page margin, 28 September 2026 ----------
   Hisham: "this margin thing with the text is everywhere in the business units pages and
   others as well. check the whole text alignment and make sure all aligned properly."

   Audited every block of copy on all 21 routes. The LEFT edge was already correct everywhere —
   every heading, eyebrow and paragraph started on the page gutter. What was ragged was where
   the copy stopped, because five different measures were in use against a 1152px page:

     .hero h1        19ch  -> 866px    .hero .lede   62ch -> 856px
     .sec-head       78ch  -> 796px    .cofoot       72ch -> 734px
     inline 60ch / 74ch / 78ch, .legal 76ch, .news p 68ch, .band .inner 58ch

   So one paragraph stopped 296px short of the margin and the heading above it stopped 356px
   short, and nothing lined up with anything. Asked which way to resolve it, Hisham chose the
   page margin over a shared narrower measure. Every cap above is removed; copy now runs the
   full width of the wrap on every page.

   The trade, recorded honestly: body copy at 1152px runs about 130 characters, which is longer
   than the 60-90 that reads most easily. If it ever wants pulling back, the fix is ONE token
   applied to all of these at once, never five separate values again.

   Caps deliberately kept: .vcard p (34ch) and anything else inside a fixed-width card or grid
   cell, where the cell is the measure and the text already fills it. */
/* ---------- no trailing margin on the last block of a section, 28 September 2026 ----------
   Hisham: "too much space between the end our founder till the beginning of our vision. make
   sure this is fixed across the whole website."

   Measured across all 21 routes. Sections are `padding-block:var(--sec)`, so the gap between
   two of them is twice that — 155.5px of ink to ink at 1440, which is the site's rhythm and
   is what story -> founder already reads. Six sections were wider than that because the LAST
   block inside them carried a bottom margin that added to the section's own padding:

     about #founder      .fsplit margin-block-end 56px    -> gap 212px
     unit-massad         .sec-head margin-block-end 40px  -> gap 193px
     unit-raad           .sec-head margin-block-end 40px  -> gap 193px
     about #vision       <p> margin 18.7px                -> gap 174px
     news-hessah         <p> margin 20.9px                -> gap 176px
     privacy, terms      <p> margin 18.7px                -> gap 171px

   Those margins are right where the block has something under it and wrong where it is the
   last thing in the section. Zeroed down the last-child chain rather than by patching each
   component, so anything added later inherits the fix. */
section > :last-child,
section > .wrap > :last-child,
section > .wrap > :last-child > :last-child,
section > .wrap > :last-child > :last-child > :last-child{margin-block-end:0}
section.paper{background:var(--paper)}
.sec-head{margin-block-end:clamp(34px,4vw,58px)}
.sec-head p{color:var(--slate);font-size:clamp(17px,1.4vw,20px);margin-block-start:18px}
.rule{border:0;border-block-start:1px solid var(--line);margin:0}

/* two-column intro */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(32px,5vw,84px);align-items:center}
.split .ph{aspect-ratio:4/3;border-radius:var(--r)}

/* business cards */
/* Cards used to sit on a 1px hairline, which read as one crowded block once every slot
   had a real photograph in it. A real gutter lets each photograph breathe. */
.cards{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:22px;
  background:transparent}
@media(max-width:700px){.cards{gap:16px}}
@media(max-width:1100px){.cards{grid-auto-flow:row;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}}
.card{background:var(--white);display:flex;flex-direction:column;text-decoration:none;
  transition:background .2s;box-shadow:0 0 0 1px var(--line)}
.card:hover{background:var(--paper)}
.card .ph{aspect-ratio:16/11}
/* nine cards in one grid, five across, so it runs 5 + 4 over two rows */
/* Was repeat(5,1fr). With the hub page gone this section IS the business directory,
   and five across gave each card 173px of text — 75px short of "Nour International
   Real Estate" at the smallest size the heading is allowed to take. A 318px floor is
   the longest name plus the card's own padding, so nothing is ever clipped. */
.cards.cards-5{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(318px,1fr))}
.cards.cards-3{grid-auto-flow:row;grid-template-columns:repeat(3,1fr)}
.cards.cards-4{grid-auto-flow:row;grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.cards.cards-4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}}
@media(max-width:1000px){.cards.cards-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}}
@media(max-width:1100px){.cards.cards-5{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}}
/* Grid equalises card heights within a row but not between rows, and the nine
   descriptions run from one line to six. Clamping the blurb to three lines makes every
   card body the same depth, so both rows match and the photographs line up. */
.card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;min-block-size:calc(3 * 14px * 1.55)}
.card .body{padding:20px 20px 24px;display:flex;flex-direction:column;flex:1}
/* the unit's own mark, beside its name */
@media(min-width:1101px){.card h3{font-size:19px}}
.card h3{margin-block-end:8px}
.card .who{font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--teal);margin-block-end:12px}
.card p{color:var(--slate);font-size:14px;line-height:1.55;margin-block-end:16px}
.card .go{margin-block-start:auto;font-size:14.5px;font-weight:600;color:var(--petrol)}
.card:hover .go{color:var(--teal)}
.card .go::after{content:"→";margin-inline-start:8px;display:inline-block;transition:transform .2s}
.card:hover .go::after{transform:translateX(4px)}

/* timeline teaser */
.tl{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;
  border-block-start:2px solid var(--line)}
.tl div{padding-block-start:26px;padding-inline-end:26px;border-inline-end:1px solid var(--line);position:relative}
.tl div:last-child{border-inline-end:none}
.tl div::before{content:"";position:absolute;inset-block-start:-6px;inset-inline-start:0;
  inline-size:10px;block-size:10px;border-radius:50%;background:var(--amber)}
.tl b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--petrol)}
.tl span{display:block;margin-block-start:8px;color:var(--slate);font-size:15px;max-width:26ch}

/* brand wall */
.wall{display:flex;flex-wrap:wrap;gap:10px}
.wall .bl{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  min-inline-size:150px;block-size:88px;display:flex;align-items:center;justify-content:center;
  padding:16px;flex:0 1 auto}
.wall img{inline-size:auto;max-inline-size:100%;object-fit:contain}

/* careers band */
.band{position:relative;color:#fff;min-block-size:460px;display:flex;align-items:center;
  padding-block:clamp(56px,7vw,96px)}
.band .veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,rgba(12,22,28,.88) 0%,rgba(12,22,28,.55) 62%,rgba(12,22,28,.3) 100%)}
.band .wrap{position:relative;z-index:3;inline-size:100%}
.band .inner{}
.band p{color:rgba(255,255,255,.88);margin-block:18px 28px}

/* footer */
footer.site{background:var(--midnight);color:rgba(255,255,255,.76);padding-block:clamp(48px,6vw,76px) 34px;
  font-size:14.5px}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
/* The footer takes the ORIGINAL stacked lockup — emblem above, wordmarks beneath —
   not the horizontal arrangement used in the header. The header needs horizontal because
   it has 44px of height to work with; the footer has room for the artwork as drawn.
   Sized so the English line stays readable: the wordmark is only ~5% of the lockup's
   height, so the mark has to be generous for it to read at all. */
footer.site .fmark{display:block;color:#fff;margin-block-end:28px}
footer.site .fmark svg{block-size:128px;inline-size:auto;display:block}
@media(max-width:700px){footer.site .fmark svg{block-size:96px}}
footer.site h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#fff;
  margin-block-end:11px;font-weight:700}
footer.site a{color:rgba(255,255,255,.76);text-decoration:none;display:block;
  padding-block:3px;min-block-size:0;line-height:1.42}
/* 28 Sep 2026. Hisham: "reduce the spacing between lines and items". The 32px floor was a
   tap target, which a mouse does not need — it is restored on touch below rather than
   applied to everyone. The Business units column is thirteen links, so this is where the
   footer was longest. */
@media(pointer:coarse){footer.site a{padding-block:7px;min-block-size:36px}}

/* Business units only, set like the phone numbers under the logo. Those sit inside one
   paragraph with <br> between them, so they get the line box and nothing else — 20.6px a line.
   Every other footer link is a block with 3px above and below, which is 27px. At thirteen
   links this column was the tallest thing in the footer, so it takes the tighter setting and
   the other columns keep theirs. Saves 83px. */
footer.site .bulist a{padding-block:0;min-block-size:0;line-height:1.42}
/* still tappable on touch, just not 36px — 13 of those is what made it long */
@media(pointer:coarse){footer.site .bulist a{padding-block:4px;min-block-size:0}}
footer.site a:hover{color:#fff}
footer.site .fine{margin-block-start:44px;padding-block-start:24px;
  border-block-start:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.55)}

/* motion */
.rise{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.9,.3,1),
  transform .7s cubic-bezier(.22,.9,.3,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* responsive */
@media(max-width:1000px){
  .proof .grid{grid-template-columns:repeat(2,1fr)}
  .proof .cell:nth-child(-n+2){border-block-end:1px solid rgba(255,255,255,.14)}
  .split{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .navtoggle{display:inline-flex;align-items:center;justify-content:center}
  .mainnav{position:fixed;inset:0;flex-direction:column;justify-content:center;
    background:var(--midnight);gap:6px;transform:translateY(-100%);transition:transform .35s ease;
    z-index:70}
  .mainnav.open{transform:none}
  .mainnav a{font-size:21px;color:#fff;padding:14px 22px}
  .navclose{display:none;position:absolute;inset-block-start:22px;inset-inline-end:var(--gut);
    background:none;border:1px solid rgba(255,255,255,.4);color:#fff;inline-size:46px;
    block-size:44px;border-radius:var(--r);font-size:20px;cursor:pointer}
  .mainnav.open .navclose{display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:560px){
  .proof .grid{grid-template-columns:1fr;border-inline-start:none}
  .proof .cell{border-inline-end:none;border-block-end:1px solid rgba(255,255,255,.14)}
  .tl div{border-inline-end:none;border-block-end:1px solid var(--line);padding-block-end:22px}
}

.bum{inline-size:auto;object-fit:contain}
/* The hero logo band. It bleeds off the left edge of the page and stops a quarter of
   the way across, which turns the white grounds baked into five of the logo files
   from a defect into the point. --bleed walks back out of .wrap's centring and
   padding to reach viewport x=0.

   Width is a quarter of the viewport, floored at --bleed + 300px. The floor matters
   twice: on a wide screen the bleed alone eats past 25vw, and the floor is derived
   from the WIDEST lockup on the site (FMCG, 240px) rather than each page's own, so
   every unit page gets an identically sized band instead of one that shrink-wraps
   its logos. */
.bulock{--bleed:calc(max(0px,(100vw - 1280px)/2) + var(--gut));
  position:relative;display:flex;flex-wrap:wrap;gap:26px;align-items:center;
  inline-size:fit-content;margin-block-end:32px;min-block-size:126px;padding-block:24px}
.bulock::before{content:'';position:absolute;inset-block:0;z-index:0;background:#fff;
  inset-inline-start:calc(-1 * var(--bleed));
  inline-size:max(25vw, calc(var(--bleed) + 300px))}
/* Brief 8.6, the portfolio bar: a segmented rule specified for the foot of hero
   sections, which this build had never used. Petrol is read as the logo blue per the
   13 Aug palette decision. Proportions are fixed by the standard — do not recolour or
   respace it. */
.bulock::after{content:'';position:absolute;inset-block-end:0;z-index:2;
  inset-inline-start:calc(-1 * var(--bleed));
  inline-size:max(25vw, calc(var(--bleed) + 300px));block-size:6px;
  /* brief 8.6: "do not recolour it" — pinned to literals so the accent token can move
     without collapsing segments one and two into each other */
  background:linear-gradient(to right,#4E748A 0 34%,#0E7C86 34% 62%,
    #D9922B 62% 74%,#A8C4CE 74% 100%)}
.bul{position:relative;z-index:1;display:inline-flex;align-items:center}
.bulock .bum{background:none;padding:0;box-shadow:none;inline-size:auto}
/* no chip: these are white knockouts sitting straight on the photograph */
.bulock .bum{background:none;padding:0;box-shadow:none}
.deflist{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;
  background:transparent}
.deflist>div{background:var(--white);padding:22px 24px;box-shadow:0 0 0 1px var(--line)}
.deflist h4{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--teal);
  margin-block-end:8px;font-weight:700}
.deflist p{margin:0;color:var(--slate);font-size:14px;line-height:1.55}
@media(max-width:1040px){.deflist{grid-auto-flow:row;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .deflist p{font-size:15px}}
.people{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1px;
  background:transparent}
.person{background:var(--white);padding:16px 15px;box-shadow:0 0 0 1px var(--line)}
.person .nm{font-weight:600;font-size:14px;line-height:1.3}
.person .rl{color:var(--slate);font-size:12.5px;margin-block-start:5px;line-height:1.35}
@media(max-width:1040px){.people{grid-auto-flow:row;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
  .person{padding:18px 20px}.person .nm{font-size:15.5px}.person .rl{font-size:13.5px}}
.subhead{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:var(--teal);
  font-weight:700;margin:0 0 14px}
.tlist{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--line)}
.tlist li{display:grid;grid-template-columns:120px 1fr;gap:24px;padding-block:20px;
  border-block-end:1px solid var(--line);align-items:baseline}
.tlist b{font-size:24px;font-weight:700;color:var(--petrol);letter-spacing:-.02em}

/* ---------- newsroom ---------- */
/* Deliberately one page of short entries, no article pages. Every post is a headline,
   a date, a category and 40-80 words — cheap enough to write that the section has a
   chance of staying alive, which is the failure mode that matters here. */
.news{list-style:none;margin:0;padding:0}
.news li{display:grid;grid-template-columns:168px 1fr;gap:32px;padding-block:26px;
  border-block-start:1px solid var(--line);align-items:start}
.news li:last-child{border-block-end:1px solid var(--line)}
.news .when{display:flex;flex-direction:column;gap:7px;padding-block-start:3px}
.news time{font-size:15px;font-weight:600;color:var(--petrol);white-space:nowrap}
.news .tag{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--teal)}
.news h2,.news h3{font-size:19px;margin:0 0 7px;letter-spacing:-.01em}
.news p{margin:0;color:var(--slate);font-size:15px;line-height:1.6}
@media(max-width:700px){.news li{grid-template-columns:1fr;gap:10px}
  .news .when{flex-direction:row;align-items:baseline;gap:14px}}
/* the three-item teaser on the home page */
.newsteaser{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:transparent}
.newsteaser>div{background:var(--white);box-shadow:0 0 0 1px var(--line);padding:24px 24px 26px}
.newsteaser time{display:block;font-size:13.5px;font-weight:600;color:var(--petrol)}
.newsteaser .tag{font-size:10.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--teal);display:block;margin-block:9px 8px}
.newsteaser h3{font-size:17px;margin:0;letter-spacing:-.01em;line-height:1.35}
@media(max-width:900px){.newsteaser{grid-template-columns:1fr}}
.tlist span{color:var(--ink)}
.vgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:transparent}
.vcard{background:var(--white);padding:22px 16px;box-shadow:0 0 0 1px var(--line)}
.vcard img{block-size:48px;inline-size:auto;margin-block-end:13px}
.vcard h3{margin-block-end:7px;font-size:15.5px;letter-spacing:-.01em}
.vcard p{margin:0;color:var(--slate);font-size:13px;line-height:1.5}
@media(max-width:1040px){.vgrid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .vcard{padding:26px 22px}.vcard img{block-size:62px}.vcard p{font-size:14px}}

/* the vision, as one line, and the six values under it as marks only */
/* was `fit-content`, which shrank the block to the width of the values row — 1017px — so
   the eyebrow and the vision line stopped 135px short of the page margin while the
   paragraph under them ran full width. Full width, like every other block of copy. */
.vision-block{inline-size:100%;margin-block-end:clamp(34px,4vw,58px)}
.vision-line{max-inline-size:none;font-size:clamp(17.5px,2.28vw,30px);line-height:1.3;
  font-weight:300;letter-spacing:-.012em;color:var(--petrol);white-space:nowrap}
/* below ~700px one line would drop under 17px, so let it wrap instead */
@media(max-width:700px){.vision-line{white-space:normal;font-size:21px;line-height:1.36}}
.vrow{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-block-start:32px}

/* ---------- branch locations ---------- */
.locs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px}
.locs h3,.locs h4{font-size:12px;text-transform:uppercase;letter-spacing:.13em;color:var(--teal);
  font-weight:700;margin:0 0 14px;padding-block-end:10px;
  border-block-end:1px solid var(--line)}
.locs ul{list-style:none;margin:0;padding:0}
.locs li{padding-block:11px;border-block-end:1px solid var(--line)}
.locs li b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.locs li span{display:block;font-size:14px;color:var(--slate);margin-block-start:2px}
.locs li .tel{font-size:13.5px;color:var(--petrol);margin-block-start:5px;font-weight:600}
.locs li .tel{font-size:13.5px;color:var(--petrol);margin-block-start:5px;font-weight:600}
.locs li.pending b{color:var(--slate);font-weight:500;font-style:italic}
.vrow div{text-align:center}
.vrow img{block-size:38px;inline-size:auto}
.vrow span{display:block;margin-block-start:9px;font-size:12.5px;font-weight:600;
  color:var(--midnight);letter-spacing:-.005em}
@media(max-width:700px){.vrow{grid-template-columns:repeat(3,1fr);row-gap:22px}}
form.f{display:grid;gap:18px;max-width:640px}
form.f label{display:block;font-size:14px;font-weight:600;margin-block-end:7px}
form.f input,form.f select,form.f textarea{inline-size:100%;font:inherit;font-size:16px;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  color:var(--ink);min-block-size:48px}
form.f textarea{min-block-size:140px;resize:vertical}
form.f input:focus,form.f select:focus,form.f textarea:focus{outline:2px solid var(--teal);
  outline-offset:1px;border-color:var(--teal)}
.hint{font-size:13px;color:var(--slate);margin-block-start:6px}
.legal{}
.legal h2{font-size:clamp(22px,2.4vw,30px);margin-block:44px 14px}
.legal h2:first-of-type{margin-block-start:0}
.legal p,.legal li{color:var(--ink)}
.legal ul{padding-inline-start:22px}
.todo{border-inline-start:4px solid var(--amber);background:var(--paper);border-radius:0 var(--r) var(--r) 0;
  padding:18px 24px;margin-block:22px}
.todo b{color:var(--midnight)}
.jobs{display:grid;gap:1px;background:transparent}
.job{background:var(--white);padding:22px 26px;box-shadow:0 0 0 1px var(--line);display:flex;justify-content:space-between;
  gap:20px;align-items:center;flex-wrap:wrap}
.job .meta{color:var(--slate);font-size:14px;margin-block-start:4px}
@media(max-width:700px){.tlist li{grid-template-columns:1fr;gap:4px}}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(18px,2.4vw,30px)}
.fig{margin:0}
.fig .frame{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;aspect-ratio:400/284;display:flex;align-items:center;justify-content:center}
.fig img{inline-size:100%;block-size:100%;object-fit:cover}
.fig figcaption{margin-block-start:12px;font-size:14px;line-height:1.5;color:var(--slate)}
.fig figcaption b{display:block;color:var(--ink);font-weight:600;margin-block-end:2px}

.social{display:flex;flex-direction:column;gap:14px;margin-block-start:30px;
  padding-block-start:26px;border-block-start:1px solid var(--line)}
.socrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.soclab{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate);margin-inline-end:6px;min-inline-size:172px}
.soc{display:inline-flex;align-items:center;justify-content:center;inline-size:44px;
  block-size:44px;border:1px solid var(--line);border-radius:var(--r);color:var(--petrol);
  transition:.18s}
.soc:hover{color:var(--white);background:var(--petrol);border-color:var(--petrol)}
.soc:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.soc svg{inline-size:19px;block-size:19px;fill:currentColor}
.hero .social{border-block-start-color:rgba(255,255,255,.24)}
.hero .soclab{color:rgba(255,255,255,.7)}
.hero .soc{border-color:rgba(255,255,255,.4);color:#fff}
.hero .soc:hover{background:rgba(255,255,255,.16);border-color:#fff}
.fsoc{display:flex;gap:10px;margin-block-start:18px}
.fsoc a{display:inline-flex;align-items:center;justify-content:center;inline-size:42px;
  block-size:42px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r);
  color:rgba(255,255,255,.85);transition:.18s;padding:0;min-block-size:42px}
.fsoc a:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.12)}
.fsoc svg{inline-size:18px;block-size:18px;fill:currentColor}
@media(max-width:520px){.soclab{min-inline-size:100%}}
.fsplit{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);align-items:start;margin-block-end:clamp(34px,4vw,56px)}
.portrait{margin:0}
.portrait img{inline-size:100%;border-radius:var(--r);background:var(--white)}
.portrait figcaption{margin-block-start:12px;font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:var(--teal)}
@media(max-width:820px){.fsplit{grid-template-columns:1fr}}
.lifespan{font-size:17px;color:var(--slate);letter-spacing:.06em;margin-block:-10px 16px;
  font-variant-numeric:tabular-nums}

/* ---------- stock photographs, preview only ---------- */
.ph.has-img::before,.ph.has-img::after{display:none}
.ph.has-img{background-image:none}
.ph>img.phimg{position:absolute;inset:0;inline-size:100%;block-size:100%;
  object-fit:cover;z-index:0}
.card .ph.has-img::after,.split .ph.has-img::after{content:"";display:block;
  position:absolute;inset-block-end:0;inset-inline:0;block-size:46%;z-index:1;
  background:linear-gradient(to top,rgba(15,26,32,.72),transparent)}
.card .ph.own-img::after,.split .ph.own-img::after{display:none}
.ph.has-img .ph-note{border-color:rgba(217,146,43,.55);color:rgba(255,255,255,.80)}
.ph.has-img .ph-note::after{content:" · stock";color:var(--amber)}
.card .ph.appr-img::after,.split .ph.appr-img::after{display:none}
/* The stock veil was tuned against a dark synthetic gradient. A real photograph can be
   bright at the top, where the fixed header sits unsolid — so deepen it there.
   All hero copy sits in a left-hand column, so a horizontal scrim there carries the
   text over whatever the photograph happens to be doing on that side. */
.hero.has-img .veil{background:
  linear-gradient(to top,rgba(12,22,28,.86) 0%,rgba(12,22,28,.52) 45%,rgba(12,22,28,.34) 100%),
  linear-gradient(to bottom,rgba(12,22,28,.56) 0%,rgba(12,22,28,.14) 26%,transparent 40%),
  linear-gradient(to right,rgba(12,22,28,.62) 0%,rgba(12,22,28,.34) 34%,transparent 64%)}
@media(max-width:820px){
  .hero.has-img .veil{background:
    linear-gradient(to top,rgba(12,22,28,.88) 0%,rgba(12,22,28,.62) 45%,rgba(12,22,28,.46) 100%),
    linear-gradient(to bottom,rgba(12,22,28,.56) 0%,transparent 42%)}}
.ximg.ximg{display:block;background-position:center;background-repeat:no-repeat;background-size:contain;inline-size:auto}



.route[hidden]{display:none}
.previewbar{position:fixed;inset-block-end:0;inset-inline:0;z-index:80;
  background:var(--midnight);color:rgba(255,255,255,.82);font-size:12.5px;
  padding:9px var(--gut);display:flex;gap:14px;align-items:center;
  justify-content:center;text-align:center;flex-wrap:wrap;line-height:1.4}
.previewbar b{color:#fff;font-weight:600}
body{padding-block-end:46px}
/* archive photographs are hosted on the current live site; if the viewer's
   browser blocks that host the frame falls back to the standard slot look */
.fig .frame{background-image:linear-gradient(142deg,#1B2A33 0%,#2E4C5C 48%,#4E748A 100%)}
.fig .frame.failed::after{content:attr(data-label);position:absolute;inset-block-end:10px;
  inset-inline-start:10px;font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.26);
  padding:4px 9px;border-radius:20px}
.fig .frame{position:relative}

.locs li .mapln{display:inline-flex;align-items:center;gap:6px;margin-block-start:9px;
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal);text-decoration:none;border-block-end:1px solid transparent;
  padding-block-end:1px;transition:border-color .2s ease,color .2s ease}
.locs li .mapln:hover,.locs li .mapln:focus-visible{border-block-end-color:var(--teal)}
.locs li .mapln svg{inline-size:15px;block-size:15px;fill:currentColor;flex:none;
  display:block}

/* ---------- unit hero band, reshaped 15 Sep 2026 ----------
   Was a white slab bleeding off the left edge, 126px tall, and it ate the photograph on
   every unit hero. Hisham picked the contained card, with rounded corners.

   The card comes off the page edge entirely and sits in the text column. It shrink-wraps
   its logos but holds a 300px floor, so the nine unit pages still match each other rather
   than each sizing to its own lockup — the reason doc 20 gave for the original fixed width
   still applies, it just applies to a smaller box now. The portfolio bar (brief 8.6) stays,
   as the card's foot, with its outer corners following the card's radius. */
.bulock{min-block-size:0;padding:15px 24px 17px;margin-block-end:28px;gap:22px;
  inline-size:fit-content;min-inline-size:300px;max-inline-size:min(520px,48vw)}
.bulock .bum{block-size:36px!important}
.bulock::before{inset-inline-start:0;inline-size:100%;border-radius:12px}
.bulock::after{inset-inline-start:0;inline-size:100%;block-size:4px;
  border-end-start-radius:12px;border-end-end-radius:12px}

/* ---------- lighter, 21 Sep 2026 ----------
   "it's a bit too dark, everyone is saying." The darkness was never one colour. It came
   from the scrim laid over the hero photographs and from the solid navy stat band sitting
   directly under it on every page — two dark blocks stacked, before a reader reaches any
   white.

   1. THE SCRIM. It ran to rgba(12,22,28,.86) at the foot of every hero, which is most of
      the way to opaque: the photography was being paid for and then hidden. Pulled back to
      .64 at the foot and .18 at the head, with the top and left passes reduced to match.
      Hero type stays white on a still-dark base, so nothing drops below AA.

   2. THE STAT BAND. Was --midnight. Now Haze #DCE8ED, which is a brief 4.1 token this
      build had simply never used — going lighter here means using a specified colour, not
      inventing one. Ink on Haze measures 14.14:1, so no pairing had to be compromised;
      the labels take Slate, the hairlines an ink tint at the same weight they had in white.

   The footer stays dark on purpose. It is the one place on the page where weight is doing
   a job, and doc 07 verified its pairings. */
/* The left-hand pass is deliberately NOT lightened as far as the rest. Measured on the
   rendered pages with the glyphs hidden, the first cut put the headline at 2.74:1 over the
   brightest ground on the Brands hero and 2.82:1 on Tazweed — below the 3:1 floor for large
   text. Darkening only the copy column (.62 to .38 across the left 42%) brings the worst
   headline to 3.14:1 and the worst lede to 5.51:1 across all eighteen heroes, while the
   right-hand two thirds of every photograph stays as bright as the lighter grade intended. */
.veil{background:linear-gradient(to top,rgba(12,22,28,.62) 0%,rgba(12,22,28,.28) 42%,
  rgba(12,22,28,.12) 100%)}
.hero.has-img .veil{background:
  linear-gradient(to top,rgba(12,22,28,.64) 0%,rgba(12,22,28,.32) 45%,rgba(12,22,28,.18) 100%),
  linear-gradient(to bottom,rgba(12,22,28,.40) 0%,rgba(12,22,28,.08) 26%,transparent 40%),
  linear-gradient(to right,rgba(12,22,28,.62) 0%,rgba(12,22,28,.38) 42%,transparent 72%)}
@media(max-width:820px){
  .hero.has-img .veil{background:
    linear-gradient(to top,rgba(12,22,28,.70) 0%,rgba(12,22,28,.44) 45%,rgba(12,22,28,.30) 100%),
    linear-gradient(to bottom,rgba(12,22,28,.40) 0%,transparent 42%)}}
.proof{background:#DCE8ED;color:var(--ink)}
.proof .grid{border-inline-start-color:rgba(15,26,32,.13)}
.proof .cell{border-inline-end-color:rgba(15,26,32,.13)}
.proof span{color:var(--slate)}

/* ---------- navigation dropdowns, 21 Sep 2026 ----------
   Only the two tabs that have something beneath them. The parent stays a link: on touch a
   parent that opens a menu but never navigates is a trap, and About is a real page. */
.navitem{position:relative;display:flex;align-items:center}
.mainnav .navitem>a{display:inline-flex;align-items:center;gap:6px}
.navitem .cv{inline-size:11px;block-size:11px;flex:none;opacity:.7;
  transition:transform .2s ease}
.navitem:hover>a .cv,.navitem:focus-within>a .cv{transform:rotate(180deg)}
.subtoggle{display:none}

.submenu{position:absolute;inset-block-start:calc(100% + 10px);inset-inline-start:0;
  z-index:90;min-inline-size:232px;padding:8px;background:#fff;
  border:1px solid var(--line);border-radius:8px;
  box-shadow:0 18px 44px rgba(15,26,32,.16),0 2px 6px rgba(15,26,32,.06);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
/* a hover bridge, so the pointer can cross the gap without the menu closing */
.submenu::before{content:'';position:absolute;inset-block-start:-12px;inset-inline:0;
  block-size:12px}
.navitem:hover>.submenu,.navitem:focus-within>.submenu{
  opacity:1;visibility:visible;transform:none}
.submenu.wide{inline-size:max(520px,38vw);
  display:grid;grid-template-columns:1fr 1fr;gap:1px 6px}
.submenu.wide .allbiz{grid-column:1/-1;margin-block-end:5px;
  border-block-end:1px solid var(--line);border-radius:6px 6px 0 0}

.mainnav .submenu a{display:block;padding:9px 12px;border-radius:6px;
  font-size:14.5px;font-weight:600;color:var(--ink);background:none}
.mainnav .submenu a:hover,.mainnav .submenu a:focus-visible{
  background:var(--paper);color:var(--teal)}
.submenu .sl{display:block;line-height:1.3}
.submenu .sm{display:block;font-size:12px;font-weight:400;color:var(--slate);
  margin-block-start:1px}
.mainnav .submenu a:hover .sm{color:var(--slate)}
/* the parent keeps its underline while any page inside its menu is open */
.mainnav .navitem.here>a{color:#fff;box-shadow:inset 0 -2px 0 var(--petrol)}
.site-head.solid .mainnav .navitem.here>a{color:var(--ink)}

@media(max-width:820px){
  /* the bar is a full-screen overlay here; a hover menu means nothing on a touch screen */
  .mainnav{justify-content:flex-start;padding-block:86px 130px;overflow-y:auto;gap:2px}  /* the 130px foot clears the design-preview bar, which is fixed above the menu */
  .navitem{display:grid;grid-template-columns:1fr auto;inline-size:min(520px,86vw);
    margin-inline:auto}
  .navitem>a .cv{display:none}
  .subtoggle{display:inline-flex;align-items:center;justify-content:center;
    inline-size:52px;block-size:52px;background:none;border:0;color:#fff;cursor:pointer}
  .subtoggle .cv{inline-size:15px;block-size:15px;opacity:.85;transition:transform .2s ease}
  .subtoggle[aria-expanded="true"] .cv{transform:rotate(180deg)}
  .submenu{position:static;grid-column:1/-1;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;padding:0 0 10px 14px;
    display:none;transition:none}
  .submenu.wide{inline-size:auto;grid-template-columns:1fr}
  .navitem:hover>.submenu,.navitem:focus-within>.submenu{display:none}
  /* `.submenu{display:none}` above is (0,1,0) and loses to the desktop `.submenu.wide{
     display:grid}` at (0,2,0), so the businesses menu ignored the collapse and was open
     the moment the overlay was. Match the specificity; do not raise it. */
  .mainnav .submenu,.mainnav .submenu.wide{display:none}
  .mainnav .navitem.open>.submenu,.mainnav .navitem.open>.submenu.wide{display:block}
  /* the whole row is the tap target on a phone, not just the caret */
  .mainnav .navitem>a{cursor:pointer}
  /* The two dropdown parents are 520px blocks centred as a whole, so their text is on the
     left; the plain links were being centred one by one. One column for all of them. */
  .mainnav>a{inline-size:min(520px,86vw);margin-inline:auto;text-align:start}
  /* PHYSICAL properties on purpose. The pill carries dir="rtl" for the Arabic word, so
     `margin-inline-start` on it resolves to the RIGHT and the pill stayed pinned to x=0.
     When the Arabic mirror flips the page, this rule is the one to revisit. */
  .mainnav>.lang{align-self:flex-start;margin-right:0;
    margin-left:max(0px,calc((100% - min(520px,86vw))/2 + 22px))}
  .mainnav .submenu a{color:rgba(255,255,255,.88);font-size:17px;padding:10px 12px}
  .mainnav .submenu a:hover{background:rgba(255,255,255,.1);color:#fff}
  .submenu .sm{color:rgba(255,255,255,.55)}
  .submenu.wide .allbiz{border-block-end-color:rgba(255,255,255,.18)}
}

/* ---------- businesses hub: the unit's own mark in place of the sector line, 22 Sep 2026
   Hisham's option C. The mark carries the full legal name in both scripts, so the heading
   underneath can be the short trading name and hold one line. ---------- */
[data-route="index.html"] .card{container-type:inline-size}
[data-route="index.html"] .bumark{display:flex;align-items:center;gap:9px;
  min-block-size:38px;margin-block-end:13px}
[data-route="index.html"] .bumark .ximg{flex:none}
/* Sized against the CARD, not the viewport: the five-column grid runs from a 213px card at
   1440 down to 181px at 1101, and a fixed size cannot hold one line across both. The
   ellipsis is a guard that the measurements say should never fire. */
[data-route="index.html"] .card h3{font-size:clamp(15px,calc(10cqi - 3.3px),19px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-inline-size:0}
@media(max-width:700px){
  [data-route="index.html"] .bumark{min-block-size:34px}
}

/* ---------- palette option D, 22 Sep 2026 ----------
   Petrol as a surface on the stat band and the footer. White on Petrol is 5.03:1, so every
   secondary tint on these two grounds goes to solid white — a 76% link that was comfortable
   on Midnight is 3.2:1 here. Hairlines go up from a 14-16% tint to 32-38%, which is the same
   apparent weight against a lighter ground. */
.proof{background:var(--petrol);color:#fff}
.proof .grid{border-inline-start-color:rgba(255,255,255,.32)}
.proof .cell{border-inline-end-color:rgba(255,255,255,.32)}
.proof span{color:#fff}
@media(max-width:1000px){
  .proof .cell:nth-child(-n+2){border-block-end-color:rgba(255,255,255,.32)}
}
@media(max-width:560px){
  .proof .cell{border-block-end-color:rgba(255,255,255,.32)}
}

footer.site{background:var(--petrol);color:#fff}
footer.site a{color:#fff}
/* The links are now the same white as the body text, so hover cannot be a brightening. */
footer.site a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
footer.site .fine{color:#fff;border-block-start-color:rgba(255,255,255,.38)}
footer.site .fine a{color:#fff}
footer.site .fsoc a{border-color:rgba(255,255,255,.52);color:#fff}
footer.site .fsoc a:hover{background:rgba(255,255,255,.18);border-color:#fff}
/* the Arabic label carries an inline opacity:.5, which on this ground is about 2:1 */
footer.site [lang="ar"]{opacity:.92!important}

/* ---------- the band behind the navigation, 22 Sep 2026 ----------
   The header has no colour of its own: transparent over the hero, white once you scroll.
   What reads as a dark header is the downward pass of the hero scrim. .40 -> .26, with the
   falloff shortened. The left-hand pass is the one carrying headline contrast (21 Sep) and
   is deliberately left alone. */
.hero.has-img .veil{background:
  linear-gradient(to top,rgba(12,22,28,.64) 0%,rgba(12,22,28,.32) 45%,rgba(12,22,28,.18) 100%),
  linear-gradient(to bottom,rgba(12,22,28,.40) 0%,rgba(12,22,28,.08) 26%,transparent 40%),
  linear-gradient(to right,rgba(12,22,28,.62) 0%,rgba(12,22,28,.38) 42%,transparent 72%)}

/* ---------- light header bar, 22 Sep 2026 ----------
   The bar is solid from the first pixel now, not only after scrolling. The mobile overlay
   follows it to white, because `.site-head.solid .mainnav a` sets ink and outweighs the
   mobile rule — leaving the overlay Midnight would put ink links on a dark ground. */
.site-head.solid .lang-soon{color:var(--slate)}
@media(max-width:820px){
  /* backdrop-filter on the bar makes it the containing block for position:fixed children,
     so the full-screen overlay was sizing itself to the header instead of the viewport —
     it collapsed to 216px and swallowed six of the eight links. The bar is 97% white here
     anyway, so the blur was buying nothing. */
  .site-head.solid{backdrop-filter:none;background:#fff}
  .mainnav{background:#fff}
  .site-head .mainnav a,.site-head.solid .mainnav a{color:var(--ink)}
  .site-head.solid .mainnav a:hover{background:var(--paper);color:var(--teal)}
  .mainnav .submenu a,.site-head.solid .mainnav .submenu a{color:var(--ink)}
  .mainnav .submenu a:hover{background:var(--paper);color:var(--teal)}
  .submenu .sm{color:var(--slate)}
  .submenu.wide .allbiz{border-block-end-color:var(--line)}
  .subtoggle{color:var(--ink)}
  .navclose{border-color:var(--line);color:var(--ink)}
  .mainnav .navitem.here>a,.site-head.solid .mainnav .navitem.here>a{
    color:var(--ink);box-shadow:inset 0 -2px 0 var(--petrol)}
}

/* The contact hero is a 16:9 frame in a 3.6:1 box, so cover throws away most of the height.
   Anchored to the top, what survives is the crown of the tower against sky — which is the
   part that reads as a building. Centred, it is an anonymous stretch of facade. */
[data-route="contact.html"] .hero>img.phimg{object-position:center top}

/* ---------- contact: the head office photograph, 22 Sep 2026 ----------
   Was a 5:8 portrait across half the page — roughly 900px of picture beside 330px of text.
   The height is set now and the width follows the ratio, and the column shrinks to the
   picture instead of leaving it adrift in half a page of white. */
[data-route="contact.html"] .split{grid-template-columns:minmax(0,1fr) auto}
[data-route="contact.html"] .split .ph{block-size:clamp(230px,21vw,300px);inline-size:auto}
[data-route="contact.html"] .split .rise p{}
@media(max-width:820px){
  [data-route="contact.html"] .split{grid-template-columns:1fr;justify-items:start}
  [data-route="contact.html"] .split .ph{block-size:auto;inline-size:min(260px,62vw)}
}

/* ---------- unit pages: leadership without portraits, 22 Sep 2026 ----------
   The nine "Who runs it" sections were a two-column split with an empty portrait slot. The
   slots are gone; the names use the same card as the Leadership section on Who we are, but
   capped so one or two cards do not stretch the full width of the page. */
.people.people-fit{grid-auto-flow:row;
  grid-template-columns:repeat(auto-fit,minmax(230px,268px));gap:1px;
  margin-block-start:26px}
@media(max-width:560px){
  .people.people-fit{grid-template-columns:1fr}
}

/* ---------- unit pages: the name under the lockup, 22 Sep 2026 ----------
   Site h1 is clamp(38px,6.2vw,76px) — headline scale, right for a sentence. On a unit page
   the h1 is a name sitting under a lockup that has just said it, so it comes down to
   clamp(27px,3.4vw,44px). Only the h1 that follows a .bulock is affected. */
.hero .bulock + h1{font-size:clamp(27px,3.4vw,44px)}

/* ---------- social accounts, across rather than down, 22 Sep 2026 ----------
   The 172px label floor existed to line the icons up in a column. Across, it would open a
   gap between each label and the icon it belongs to, so it goes. */
.social{flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px 34px}
.socrow{gap:12px}
.soclab{min-inline-size:0;margin-inline-end:0}
@media(max-width:640px){
  .social{flex-direction:column;align-items:flex-start;gap:14px}
  /* back in a column the icons should line up again, which is what the floor was for */
  .soclab{min-inline-size:150px}
}

/* ---------- company names hold one line, 22 Sep 2026 ----------
   `.hero h1{max-inline-size:19ch}` is right for a headline sentence and wrong for a name: at
   44px it clamps the line to 494px, and four of the nine unit names are longer than that. On
   a lockup hero the cap comes off and the name is sized against the hero instead, so it fits
   on one line from a phone to a wide desktop. Same for the Brands section heading, which is
   a unit name with a full stop. */
.hero .wrap{container-type:inline-size}
.hero .bulock + h1{max-inline-size:none;white-space:nowrap;
  font-size:clamp(20px,min(3.4vw,8.1cqi),44px)}
[data-route="brands.html"] .sec-head h2{white-space:nowrap;
  font-size:clamp(19px,min(3vw,90%),30px)}

/* ---------- option 10: the mark is out of the hero, 22 September 2026 ----------
   The photograph gets the hero back whole. The mark sits in the stat band underneath it,
   on Paper, with the band's own hairline as the divider between it and the numbers.

   The band goes light ONLY on the nine unit pages, and only because it now carries a logo:
   six of the ten marks are illegible on Petrol. Palette option D is untouched everywhere
   else — the home page band and the footer stay Petrol. */
[data-route^="unit-"] .proof{background:var(--paper);color:var(--ink)}
[data-route^="unit-"] .proof .grid{border-inline-start-color:rgba(15,26,32,.12);
  flex:1;min-inline-size:0}
[data-route^="unit-"] .proof .cell{border-inline-end-color:rgba(15,26,32,.12)}
[data-route^="unit-"] .proof span{color:var(--slate)}
[data-route^="unit-"] .proof .wrap{display:flex;align-items:center;
  gap:clamp(20px,2.6vw,44px);container-type:inline-size}

/* the lockup keeps its class but loses everything the old white band gave it */
.proof .bulock{position:static;flex:none;display:flex;align-items:center;gap:18px;
  padding:0;margin:0;min-block-size:0;min-inline-size:0;inline-size:auto;
  /* the base .bulock is flex-wrap:wrap. As a shrink-to-fit item in the stacked phone
     layout that let the FMCG pair resolve to one mark's width and drop Raad onto a second
     line, under a divider that was drawn for a row. The pair is a row, always. */
  flex-wrap:nowrap}
.proof .bulock::before,.proof .bulock::after{display:none}
/* A fixed column for the mark, so the hairline before the first number lands in the same
   place on all nine pages. Without it the divider moved with the width of each logo file,
   which is the inconsistency the old band was criticised for. 260px is the widest lockup —
   the Massad and Raad pair. */
.proof .bulock{min-inline-size:min(260px,26cqi)}
/* the mark is centred in that fixed column, not parked against its left edge */
.proof .bulock{justify-content:center}



@media(max-width:1000px){
  /* 28 September 2026. Hisham: "the logo in the business unit page should be center aligned
     in the box it looks weird on the mobile version. make this change for all logos."

     Stacked, the band becomes a column and the lockup was `align-items:flex-start` on the
     wrap plus `justify-content:flex-start` on itself, so the mark sat hard against the left
     gutter while every stat cell under it was centred — one left-aligned thing above a column
     of centred ones. The lockup now stretches the full row and centres its contents, which
     puts the mark on the same axis as the numbers below it. */
  [data-route^="unit-"] .proof .wrap{flex-direction:column;align-items:stretch;
    gap:22px;padding-inline:var(--gut)!important;padding-block-start:26px}
  /* Stacked, the lockup is a shrink-to-fit item — and the marks get their width from an
     aspect-ratio, which contributes nothing to intrinsic sizing, so the box came out
     narrower than its own contents. Stretched to the row, so centring has something to
     centre within. */
  [data-route^="unit-"] .proof .bulock{justify-content:center;min-inline-size:212px;
    inline-size:100%}
  [data-route^="unit-"] .proof .grid{inline-size:100%;border-inline-start:none;
    margin-inline:calc(-1 * var(--gut))}
}

/* The name was sized by `.hero .bulock + h1`. The lockup has left the hero, so that selector
   matches nothing now and the name would spring back to 76px. Re-anchored, same size. */
/* ONLY the nine unit pages. `.unit-hero` is also worn by About, Businesses, News, Careers
   and Contact, whose h1 is a SENTENCE — nowrap on those sent "Nine companies, five sectors,
   one group." straight off the side of a phone. */
[data-route^="unit-"] .hero h1{max-inline-size:none;white-space:nowrap;
  font-size:clamp(20px,min(3.4vw,8.1cqi),44px)}
/* the band's numbers now share their row with a logo, so the widest of them — Julaia's
   150,000+ — no longer fits a cell at the old headline size */
/* The numbers now share their row with a logo, so each cell is narrower — and Julaia's
   "150,000+" is the widest number on the site. Sized against ITS OWN CELL, so the longest
   figure shrinks and the short ones keep their scale. */
/* 30 Sep 2026. Unscoped. The All Brands band now runs to five cells and carries words, not
   only numbers — "Exclusive" and "Nationwide" at the old headline size ran straight out of
   their boxes and "ISO 9001" broke onto two lines. Sizing each figure against ITS OWN cell
   fixes every band at once. The home band keeps the larger scale: four short figures, and it
   is the first thing on the site. */
/* 30 Sep 2026. Hisham: "make sure all font sizes for that stats for ALL BUs are consistent,
   if you look at agriculture it has a stat bigger than the font in the hero headline."
   He is right, and `16cqi` was the cause: it sizes each figure against its OWN cell, so a
   three-cell band gave every figure a wider box and therefore bigger type. Measured at
   1440px: Agriculture, Al Salbookh and Tazweed rendered at 41.3px, the four-cell bands at
   28.2px, against a 44px hero headline. One viewport-based size now covers every unit band
   whatever it holds, and sits clearly under the headline. Long values wrap; that is the
   price of one size, and it is the right price. */
.proof .cell{container-type:inline-size}
.proof b{font-size:clamp(26px,2.9vw,42px)}
[data-route^="unit-"] .proof b{font-size:clamp(21px,2vw,29px)}
[data-route="index.html"] .proof b{font-size:clamp(26px,2.9vw,38px)}
[data-route="index.html"] .proof .cell{padding:clamp(18px,2.2vw,28px) clamp(14px,2vw,26px)}
[data-route="index.html"] .proof span{font-size:11px;margin-block-start:9px}
[data-route="index.html"] .proof .cell.say b{font-size:clamp(15px,1.3vw,18px)}

/* ---------- marks sized by EMBLEM, not by bounding box ----------
   Al Waseel is a nearly square lockup with its emblem above its name, so a fixed lockup
   height gave it a 22px emblem beside Tazweed's 36px roundel. Emblem heights, source px:
   massad 145 · raad 154 · tazweed 150 · nour 94 · waseel 96 · julaia 154 ·
   agriculture 135 · babaltafani 107. BTS and Investment Office are wordmarks with no
   emblem and take the median lockup height of the other eight. */
.proof .bulock .ximg.x18{block-size:min(48.0px,4.17cqi)!important}
.proof .bulock .ximg.x19{block-size:min(48.0px,4.17cqi)!important}
.proof .bulock .ximg.x32{block-size:min(48.4px,4.20cqi)!important}
.proof .bulock .ximg.x38{block-size:min(48.0px,4.17cqi)!important}
.proof .bulock .ximg.x39{block-size:min(78.6px,6.84cqi)!important}
.proof .bulock .ximg.x40{block-size:min(77.0px,6.70cqi)!important}
.proof .bulock .ximg.x41{block-size:min(58.6px,5.09cqi)!important}
.proof .bulock .ximg.x42{block-size:min(48.0px,4.17cqi)!important}
.proof .bulock .ximg.x43{block-size:min(48.4px,4.20cqi)!important}
.proof .bulock .ximg.x44{block-size:min(49.3px,4.29cqi)!important}
.bumark .ximg.x18{block-size:min(30.0px,14.08cqi)!important}
.bumark .ximg.x19{block-size:min(30.0px,14.08cqi)!important}
.bumark .ximg.x32{block-size:min(30.2px,14.19cqi)!important}
.bumark .ximg.x38{block-size:min(30.0px,14.08cqi)!important}
.bumark .ximg.x39{block-size:min(49.1px,23.07cqi)!important}
.bumark .ximg.x40{block-size:min(48.1px,22.59cqi)!important}
.bumark .ximg.x41{block-size:min(36.6px,17.18cqi)!important}
.bumark .ximg.x42{block-size:min(30.0px,14.10cqi)!important}
.bumark .ximg.x43{block-size:min(30.2px,14.19cqi)!important}
.bumark .ximg.x44{block-size:min(30.8px,14.48cqi)!important}
@media(max-width:1000px){
  /* stacked, the mark has the whole row — the container cap was shrinking it to a
     third of its size on a phone */
  .proof .bulock .ximg.x18{block-size:48.0px!important}
  .proof .bulock .ximg.x19{block-size:48.0px!important}
  .proof .bulock .ximg.x32{block-size:48.4px!important}
  .proof .bulock .ximg.x38{block-size:48.0px!important}
  .proof .bulock .ximg.x39{block-size:78.6px!important}
  .proof .bulock .ximg.x40{block-size:77.0px!important}
  .proof .bulock .ximg.x41{block-size:58.6px!important}
  .proof .bulock .ximg.x42{block-size:48.0px!important}
  .proof .bulock .ximg.x43{block-size:48.4px!important}
  .proof .bulock .ximg.x44{block-size:49.3px!important}
}
@media(max-width:430px){
  /* the two widest wordmarks, BTS and Bab Al Tafani, run past a 320px gutter at
     full size. Everything scales by the SAME factor so the emblems stay matched. */
  .proof .bulock{min-inline-size:0}
  .proof .bulock .ximg.x18{block-size:34.6px!important}
  .proof .bulock .ximg.x19{block-size:34.6px!important}
  .proof .bulock .ximg.x32{block-size:34.8px!important}
  .proof .bulock .ximg.x38{block-size:34.6px!important}
  .proof .bulock .ximg.x39{block-size:56.6px!important}
  .proof .bulock .ximg.x40{block-size:55.4px!important}
  .proof .bulock .ximg.x41{block-size:42.2px!important}
  .proof .bulock .ximg.x42{block-size:34.6px!important}
  .proof .bulock .ximg.x43{block-size:34.8px!important}
  .proof .bulock .ximg.x44{block-size:35.5px!important}
}
[data-route="index.html"] .bumark{min-block-size:54px}

/* ---------- Massad and Raad are two companies, 22 September 2026 ----------
   The CEO's objection was that they looked like one. A rule between the two marks in the
   stat band, and a two-up on the page so each company has its own mark, its own dates and
   its own paragraph. */
[data-route="unit-fmcg.html"] .proof .bulock{gap:0}
[data-route="unit-fmcg.html"] .proof .bulock .bul + .bul{
  margin-inline-start:20px;padding-inline-start:20px;
  border-inline-start:1px solid rgba(15,26,32,.18)}

.twoco{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;margin-block-start:clamp(28px,3.4vw,44px);
  border-block-start:1px solid var(--line)}
.twoco .co{padding:clamp(26px,3vw,38px) clamp(24px,2.6vw,40px) clamp(28px,3vw,40px) 0}
.twoco .co + .co{padding-inline-start:clamp(28px,3vw,44px);
  border-inline-start:1px solid var(--line)}
.twoco .comark{block-size:58px;display:flex;align-items:center;
  margin-block-end:clamp(18px,2vw,26px)}
/* NOT background:none here — the mark IS a background-image on .ximg. */
.twoco h3{font-size:clamp(21px,2vw,26px);margin-block-end:6px}
.twoco .cometa{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal);margin-block-end:14px}
.twoco .co>p:last-child{color:var(--slate);font-size:17px;line-height:1.62;margin:0}
.cofoot{margin-block-start:clamp(26px,3vw,38px);color:var(--slate);
  font-size:17px;line-height:1.62}
.twoco .comark .ximg.x18{block-size:52px!important}
.twoco .comark .ximg.x19{block-size:52px!important}
@media(max-width:820px){
  .twoco{grid-template-columns:1fr}
  .twoco .co{padding-inline:0}
  .twoco .co + .co{border-inline-start:0;border-block-start:1px solid var(--line);
    padding-inline-start:0}
}

/* ---------- Our Businesses, by sector — 23 September 2026 ----------
   Mohsen 6d. Desktop is master–detail: sectors down the left, the hovered sector's companies
   in a strip on the right. The panes are ABSOLUTE inside that reserved strip rather than
   placed in grid cells, so the stylesheet never has to know the sector count — Industrial
   can be added later as markup alone. Phone is a nested accordion on the same interleaved
   DOM, because there is no hover on a touch screen. */
/* `.submenu.wide` is (0,2,0) and sets display:grid and its own width — the same
   specificity trap that kept the phone menu expanded. Match it and go one higher. */
/* NOT position:relative. `.submenu` is already absolute, which both places the menu
   under its tab and makes it the containing block for the panes. Setting relative put
   a 620px box back into the nav bar and crushed the tabs onto three lines. */
/* 28 Sep 2026. Hisham marked the empty half of this panel. The menu is unchanged in how it
   works — sectors on the left, the company list revealed on the right — but the sector column
   was one long list of seven, 322px deep, against a company list that is 111px at its tallest
   and 37px for the sectors with a single company. The sectors sit in two short columns now, so
   the panel is only as tall as it needs to be and the dead area goes with it. */
/* 28 Sep 2026. Hisham: "one column with all the industries, the width of this column should
   match the longest industry name (Food & Beverage). the 2nd column should match the width of
   the longest company name (Nour International Real Estate)."

   Two content-sized tracks, so the panel is exactly as wide as its longest label in each
   column and not a pixel more. The old layout reserved a fixed 280px pane on the right whether
   or not there was anything to put in it; `max-content` takes that decision away. */
.submenu.wide.secmenu{inline-size:auto;padding:12px;
  display:grid;grid-template-columns:max-content max-content;align-content:start}
.secmenu .sec{grid-column:1;display:flex;align-items:center;justify-content:space-between;
  gap:18px;
  inline-size:100%;padding:10px 12px;border:0;border-radius:6px;background:none;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);text-align:start;
  cursor:pointer;transition:background .15s ease,color .15s ease}
.secmenu .sec .cv{inline-size:11px;block-size:11px;flex:none;opacity:.55;
  transform:rotate(-90deg)}
.secmenu .sec:hover,.secmenu .sec:focus-visible,.secmenu .sec.on{
  background:var(--paper);color:var(--teal)}
.secmenu .sec.on .cv{opacity:.9}
/* The base, which the phone accordion relies on: a closed list takes no space at all. */
.secmenu .cos{display:none}
.secmenu .cos.on{display:block}

/* On a desktop all seven lists sit in the same cell, spanning the sector rows so none of them
   inflates a row. They are hidden with `visibility`, not `display:none` — a display:none grid
   item is removed from track sizing, so `max-content` would have been measured from whichever
   list happened to be showing and the panel would have changed width every time you moved
   between sectors. Kept in the layout, the column is always the width of the longest company
   name.

   Scoped to `min-width:821px`. Unscoped it leaked to the phone, where those same lists are
   stacked in flow — `visibility:hidden` left each closed one holding its full height, so the
   accordion opened with 50-140px gaps between the sectors. Second time this menu has been
   caught by an unscoped desktop rule; the phone branch of it is genuinely a different layout. */
@media(min-width:821px){
  .secmenu .cos{grid-column:2;grid-row:1 / span 7;align-self:start;
    position:static;inline-size:auto;display:block;visibility:hidden;
    padding-inline-start:20px;margin-inline-start:16px;
    border-inline-start:1px solid var(--line)}
  .secmenu .cos.on{visibility:visible}
}
.secmenu .allbiz{grid-column:1/-1;margin-block-start:8px;padding-block-start:12px;
  border-block-start:1px solid var(--line);border-block-end:0;color:var(--teal)}
/* Sized to its content the panel is about 500px, not 660, so it hangs from its own tab again
   and clears the window at every desktop width. The bar-anchoring this replaced was only ever
   needed because the panel had grown too wide for the space beside the tab. */


@media(max-width:820px){
  /* accordion: the companies open under the sector that was tapped */
  .submenu.wide.secmenu{inline-size:auto;padding-inline-end:0;display:none}
  .navitem.open>.submenu.wide.secmenu{display:block}
  /* 30 Sep 2026. Hisham: "sector bottons make it 14.5 like who we are." On the phone
     overlay the tabs are 21px and the nested links 17px; the Who we are items had never
     been given a phone rule and were sitting at the desktop 14.5px. The sector buttons
     now match them. */
  .secmenu .sec{font-size:14.5px;color:inherit;padding:12px 12px}
  .secmenu .sec .cv{inline-size:14px;block-size:14px;transform:rotate(0deg);
    transition:transform .2s ease}
  .secmenu .sec[aria-expanded="true"] .cv{transform:rotate(180deg)}
  .secmenu .cos{position:static;inline-size:auto;
    padding-inline-start:14px;margin-inline-start:12px;
    border-inline-start:1px solid var(--line);padding-block:2px 8px}
  .secmenu .allbiz{margin-block-start:10px}
}

/* "Nour International Real Estate" is now the longest card heading on the site, and at 19px
   it wants 264px of the 240px a card has on a 320px phone. The clamp's own floor cannot help
   — at that width `10cqi - 3.3px` resolves ABOVE the 19px ceiling, so the heading is pinned
   at maximum exactly where there is least room. Cap it on the narrowest phones instead. */
@media(max-width:400px){
  [data-route="index.html"] .card h3{font-size:16.5px}
}

/* ---------- a business with no logo artwork, 23 September 2026 ----------
   Al Salbookh United has no mark on the drive. An empty slot in the stat band would read as
   a broken image; the name set in the Group's own face at the height a mark occupies reads as
   a decision. Swap in the real artwork when it exists and delete this. */
.proof .bulock .butype{display:block;font-weight:700;font-size:19px;line-height:1.24;
  letter-spacing:.005em;color:var(--ink);max-inline-size:180px}
@media(max-width:430px){.proof .bulock .butype{font-size:16px}}

/* The stat band is a flex row: lockup, then the grid. The grid was sized by its contents, so
   a band with four cells filled the row and Al Salbookh's three left a 216px hole on the
   right. Let it take the remaining space and auto-fit does the rest. */
[data-route^="unit-"] .proof .grid{flex:1 1 auto}

/* ---------- Al Salbookh United and AlBabtain Agriculture, 28 September 2026 ----------
   Both marks replaced with the designer's current artwork, supplied as vector PDF and
   rendered at 900px wide with a transparent ground straight out of the file — no keying, so
   no background of any kind can come with them.

   Sized by the house rule: the EMBLEM matches at 48px in the band and 30px on a card, not the
   bounding box.

   The Al Salbookh compromise recorded here on 23 September is withdrawn. That lockup stacked
   an Arabic line and two English lines under the badge, so its emblem was 202px of a 506px
   frame and a matched 48px emblem would have stood the whole thing 120px tall; it was capped
   at 100px, leaving its emblem at 40px against the others' 48. The new lockup is horizontal
   and its device is the full height of the frame, so it sizes to 48.4px like every other mark
   and needs no exception. */
.proof .bulock .ximg.x64{block-size:min(48.4px,4.21cqi)!important}
.bumark .ximg.x64{block-size:min(30.3px,14.21cqi)!important}
@media(max-width:1000px){.proof .bulock .ximg.x64{block-size:48.4px!important}}
@media(max-width:430px){.proof .bulock .ximg.x64{block-size:34.8px!important}}

/* ---------- the values grid, 24 September 2026 ----------
   `.vcard img{block-size:48px}` was written for an <img>. The icons are <span class="ximg">
   background images, so it matched nothing: the span had no height, took the card's full
   width, and came out 306px square on a 390px phone — six cards, 2,601px of scroll.
   Sized here, and the card is centred with the icon above the title. */
.vcard{text-align:center;display:flex;flex-direction:column;align-items:center}
.vcard .ximg{block-size:52px;inline-size:100%;margin-block-end:14px;flex:none}
.vcard h3{margin-block-end:7px}
.vcard p{max-inline-size:34ch}
@media(max-width:900px){.vcard .ximg{block-size:56px}}
@media(max-width:560px){
  /* two across, not one — six single-file cards is a scroll, not a list */
  .vgrid{grid-template-columns:repeat(2,1fr)}
  .vcard{padding:22px 13px}
  .vcard .ximg{block-size:44px;margin-block-end:11px}
  .vcard h3{font-size:15px}
  .vcard p{font-size:12.5px;line-height:1.45}
}

/* a news entry that opens into an article; the rest are still one-liners */
.news .nx{display:block;color:inherit;text-decoration:none}
.news .nx h2,.news .nx h3{transition:color .15s ease}
.news .nx:hover h2,.news .nx:focus-visible h2,.news .nx:hover h3,.news .nx:focus-visible h3{color:var(--teal)}
.news .nx .go{display:inline-block;margin-block-start:10px;font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.news .nx:hover .go{text-decoration:underline}

/* ================= Mohsen round three, 27 September 2026 ================= */

/* 7 · no orange. .btn-a was an amber fill — the "Our businesses" and "See open roles"
   buttons he named. Teal, and the timeline marker with it. Amber now survives only on the
   build-note rule and the "· stock" photography flag, both of which come out before IT. */
.btn-a{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-a:hover{background:var(--petrol-dk);border-color:var(--petrol-dk)}
.tl div::before{background:var(--teal)}

/* 10 · "no huge empty spaces between sections". Nine bands became seven, and the band
   padding comes down with it — 132px of air at the top and bottom of every section was
   most of the scroll. */
:root{--sec:clamp(44px,5.4vw,80px)}
.sec-head{margin-block-end:clamp(26px,3vw,40px)}

/* 8 · the hero carries "Operating regionally, investing globally" — it is a claim, not a
   statistic, so it is set as one rather than jammed into a numeric cell. */
.hero .claim{margin-block-start:22px;font-size:clamp(15px,1.25vw,17.5px);font-weight:700;
  letter-spacing:.055em;text-transform:uppercase;color:#fff;
  display:inline-block;padding-block-end:9px;
  /* the rule under the claim sits on the dark hero, where the logo blue measures only
     2.60:1 against midnight. Same precedent as doc 07, which moved the hero hairline off
     amber for the same reason: on a dark hero the rule is white. */
  border-block-end:2px solid rgba(255,255,255,.85)}

/* 1 · the Who we are menu, in caps — done in CSS so the markup keeps sentence case for the
   Arabic mirror and for screen readers. */
/* 28 Sep 2026. Hisham: "Instead of all CAP i want Title Case for all the menu when
   expanded." The tracking goes with the caps — .09em was opening out capitals, and on
   Title Case it reads as a gap between every letter. Back to the face’s own spacing. */
/* 30 Sep 2026. Hisham: "just make sure all the text size within the menu is the same size
   text as the Tabs'". The tabs are 14.5px / 600. The Who we are items had been left at
   13.5 / 700 from the all-caps treatment, and the sector buttons at 15px, so three sizes sat
   side by side in one nav and read as three different faces. */
.mainnav .submenu .sl.caps{letter-spacing:.005em;font-size:14.5px;font-weight:600}

/* 4 · the values lose their icons, in both places they appear. */
.vrow{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px}
.vrow div{background:var(--white);box-shadow:0 0 0 1px var(--line);padding:15px 12px}
.vrow .ximg{display:none}
.vrow span{margin-block-start:0;font-size:13.5px;letter-spacing:.02em}
.vcard .ximg{display:none}
/* the card was still a centring flex column from when it had an icon on top, so the one-word
   title sat centred above left-aligned body copy. With the icon gone it is a plain list. */
.vcard{text-align:start;align-items:stretch;padding:24px 22px}
.vcard h3{margin-block-end:8px}
.vcard p{max-inline-size:none}
@media(max-width:560px){.vcard{padding:20px 16px}}

/* 10 · the brand wall now sits under the business cards instead of in a band of its own. */
.subhead-mini{margin-block:clamp(34px,4vw,52px) 16px;font-size:11.5px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--teal)}

/* ---------- the timeline, 27 September 2026 ----------
   Mohsen chose option three of three: the filmstrip. Horizontal, landscape, each milestone a
   card in the Group's blues, snapping into place, with a progress bar and decade marks below.
   It replaces the vertical `.tlist` on the milestones page and the `.tl` strip on the home
   page; both of those rules are left in place but nothing uses them now. */
.fstrip{position:relative}
.fs-scroll{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -ms-overflow-style:none}
.fs-scroll::-webkit-scrollbar{display:none}
.fs-scroll:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.fs-rail{display:flex;gap:1px;list-style:none;margin:0;padding:0;min-inline-size:max-content}
.fs-card{flex:none;inline-size:clamp(236px,23vw,290px);block-size:268px;
  scroll-snap-align:start;background:var(--midnight);color:#fff;padding:24px 22px;
  display:flex;flex-direction:column;justify-content:space-between}
.fs-card:nth-child(4n+2){background:#2A3E4A}
.fs-card:nth-child(4n+3){background:var(--petrol)}
.fs-card:nth-child(4n){background:var(--petrol-dk)}
.fs-card b{font-size:34px;font-weight:700;letter-spacing:-.035em;line-height:1}
.fs-card b::after{content:"";display:block;inline-size:38px;block-size:3px;
  background:rgba(255,255,255,.55);margin-block-start:14px}
.fs-card p{margin:0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.86)}
.fs-bar{position:relative;block-size:2px;background:var(--line);margin-block-start:34px}
.fs-fill{position:absolute;inset-block:0;inset-inline-start:0;background:var(--teal);
  inline-size:18%;transition:inline-size .12s linear}
.fs-ticks{position:relative;block-size:34px;margin-block-start:2px}
.fs-ticks span{position:absolute;transform:translateX(-50%);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;color:var(--slate);text-align:center}
.fs-ticks i{display:block;inline-size:1px;block-size:7px;background:var(--line);
  margin:0 auto 5px}
/* the first and last labels would otherwise hang off both ends of the bar */
.fs-ticks span:first-child{transform:translateX(0)}
.fs-ticks span:first-child i{margin-inline:0 auto}
.fs-ticks span:last-child{transform:translateX(-100%)}
.fs-ticks span:last-child i{margin-inline:auto 0}
.fs-nav{display:flex;gap:10px;margin-block-start:22px}
.fs-nav button{inline-size:46px;block-size:46px;border:1px solid var(--line);
  background:var(--white);border-radius:var(--r);cursor:pointer;color:var(--teal);
  font-size:18px;line-height:1;transition:.18s}
.fs-nav button:hover{border-color:var(--teal);background:var(--paper)}
.fs-nav button[disabled]{opacity:.35;cursor:default;border-color:var(--line);
  background:var(--white)}

/* ---------- the timeline becomes a line of dots, 28 September 2026 ----------
   Hisham: "TIMEline should change the style again to be a line with dots representing the
   years, text above and below each dot."

   The cards are gone. One rule runs the full width of the rail, every milestone puts a dot
   on it, and the entries alternate above and below so twenty-two of them fit in half the
   horizontal space they needed as boxes. The scroller, the flank arrows and the progress bar
   are the same machinery as the businesses strip, so nothing new had to be taught to the JS.

   The rule is drawn on the rail rather than on each item, so it is continuous across the
   gaps and does not stop and start under every dot. The item is a two-row grid split on the
   line; an `up` entry sits in row 1 against the line, a `dn` entry in row 2. */
.fstrip.tline{--fs-n:5;--fs-gap:0px}   /* 0px, not 0: calc(100% - 4 * 0) is invalid,
                                          which silently voids the whole flex-basis */
@media(max-width:1180px){.fstrip.tline{--fs-n:4}}
@media(max-width:900px){.fstrip.tline{--fs-n:3}}
@media(max-width:620px){.fstrip.tline{--fs-n:2}}

.tline .fs-rail{position:relative;align-items:stretch}
/* No end caps: the rule is drawn on the RAIL with inset-inline:0, so it already runs the
   full width past both outer dots. Adding half-width caps on the first and last items laid a
   second 38% line over the first and those two segments came out visibly darker. */
/* On the ITEM, not the rail. The rail is a flex row whose own width is the scroller's
   client width — its children overflow it — so a rule drawn on the rail with inset-inline:0
   covered only the first screenful and stopped dead once you scrolled past 1973. One
   full-width segment per item tiles the whole scroll length, and --fs-gap is 0 so the
   segments abut with no seam. */
.tline .tl-i::before{content:"";position:absolute;inset-inline:0;inset-block-start:50%;
  block-size:2px;margin-block-start:-1px;background:rgba(78,116,138,.38)}
.tline .tl-i{position:relative;min-block-size:296px;display:grid;
  grid-template-rows:1fr 1fr;padding-inline:9px}
/* the dot sits on the rule, not in either row, so it lands on the exact midpoint whatever
   the entry above or below it happens to be */
/* solid, not a ring on white: an open dot punched a hole in the rule at every milestone and
   the line stopped reading as continuous. The dot now sits ON the line, and the white halo
   is a box-shadow so the rule passes cleanly behind it. */
.tline .tl-i::after{content:"";position:absolute;inset-inline-start:50%;inset-block-start:50%;
  inline-size:12px;block-size:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--teal);box-shadow:0 0 0 4px var(--white);z-index:1}
.tline .tl-c{text-align:center;max-inline-size:210px;margin-inline:auto}
.tline .tl-up .tl-c{grid-row:1;align-self:end;padding-block-end:24px}
.tline .tl-dn .tl-c{grid-row:2;align-self:start;padding-block-start:24px}
.tline .tl-c b{display:block;font-size:23px;font-weight:700;letter-spacing:-.03em;
  line-height:1;color:var(--teal)}
.tline .tl-c p{margin:9px 0 0;font-size:13px;line-height:1.45;color:var(--slate)}
/* a short stem from the dot to its entry, so a dot is never orphaned between two columns */
.tline .tl-c::after,.tline .tl-c::before{content:"";display:block;inline-size:1px;
  block-size:14px;background:var(--line);margin-inline:auto}
.tline .tl-up .tl-c::before,.tline .tl-dn .tl-c::after{display:none}
.tline .tl-up .tl-c::after{margin-block-start:10px}
.tline .tl-dn .tl-c::before{margin-block-end:10px}
.tline .fs-bar{margin-block-start:26px}

/* ---------- a page that opens on its first section, 28 September 2026 ----------
   Hisham: "when i navigate to who we are and click on our story i dont want the stats boxes
   and everything above them to be there i want it to start with our story paragraph."

   Who we are lost its hero and its stat band, so the first thing under the header is a
   section. Sections carry symmetric block padding meant to sit between other sections; under
   a fixed header the top of one needs more, or the eyebrow crowds the navigation.

   Measured from the header, not from the section rhythm. The header is `position:fixed` and
   82px tall at every width, while --sec drops to 44px on a phone — `--sec + 14px` put the
   eyebrow at 58px, i.e. behind the header, at 320, 390 and 768. */
section.topsec{padding-block-start:calc(82px + clamp(26px,3.6vw,56px))}
@media(max-width:620px){
  .tline .tl-i{min-block-size:264px;padding-inline:6px}
  .tline .tl-c b{font-size:20px}
  .tline .tl-c p{font-size:12.5px}
}
section.paper .fs-nav button{background:var(--paper)}
section.paper .fs-nav button:hover{background:var(--white)}

/* ---------- the footer at phone widths, 27 September 2026 ----------
   Found while sweeping the filmstrip: EVERY page scrolled sideways by 41px at 320 and 1px at
   360 — the footer, not a route, and it pre-dates all of today's work.

   `1fr` is `minmax(auto,1fr)`, so a column can never be narrower than its own min-content.
   contact@albabtaingroup.com does not break, so column one demanded 225px; the two columns
   plus the 40px gap came to 341px inside a 280px box. Measured, not guessed.

   minmax(0,1fr) lets the column be as narrow as the grid says, the address block is allowed
   to break mid-string, and below 560px the four columns simply stack. */
footer.site .cols{grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
footer.site .cols>div:first-child{overflow-wrap:anywhere}
@media(max-width:1000px){
  footer.site .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 26px}
}
@media(max-width:560px){
  footer.site .cols{grid-template-columns:minmax(0,1fr);gap:30px}
}

/* ---------- the claim in the stat band, 27 September 2026 ----------
   Hisham moved "Operating regionally, investing globally" out of the hero and into the band.
   It is a statement, not a number, so the fourth cell drops the big numeral and sets the
   phrase at reading size. It keeps the grid even without pretending to be a statistic. */
.proof .cell.say{display:flex;align-items:center;justify-content:center;text-align:center}   /* the phrase is shorter than a
     numeral plus its label, so left to itself it floated above the numbers' baseline */
.proof .cell.say b{font-size:clamp(17px,1.55vw,21px);letter-spacing:-.01em;line-height:1.3;
  font-weight:600;color:rgba(255,255,255,.94)}
/* he asked for two lines, not two lines when there is room */

/* The two-company treatment on the old shared FMCG page is retired — Massad and Raad have a
   page each as of today, so every unit band carries exactly one mark again. The rules below
   are kept because `.twoco`, `.co` and `.cofoot` still style the sister-company footnote. */
.cofoot{margin-block-start:clamp(26px,3vw,40px)}

/* the Al Waseel portfolio, from the designer's drop, 27 September 2026 */








/* ---------- filmstrips show whole cards, and steer from the flanks, 27 Sep 2026 ----------
   The cards were a fixed clamp(236px,23vw,290px), so whatever width the container happened to
   be, the card at the right edge was cut in half. They are an exact fraction of the scroller
   now, so `--fs-n` complete cards fill it and the snap points sit on the card edges. */
.fstrip{position:relative;--fs-n:4;--fs-gap:1px}
@media(max-width:1180px){.fstrip{--fs-n:3}}
@media(max-width:900px){.fstrip{--fs-n:2}}
@media(max-width:620px){.fstrip{--fs-n:1}}

/* the arrows are full-height buttons in a gutter of the strip's own, so they never cover a
   card the way a floating control would */
.fs-stage{position:relative;padding-inline:58px}
.fs-arrow{position:absolute;inset-block:0;inline-size:46px;padding:0;
  border:1px solid var(--line);background:var(--white);border-radius:var(--r);
  color:var(--teal);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:.18s}
.fs-prev{inset-inline-start:0}
.fs-next{inset-inline-end:0}
.fs-arrow svg{inline-size:13px;block-size:22px}
.fs-arrow:hover{border-color:var(--teal);background:var(--paper)}
.fs-arrow:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.fs-arrow[disabled]{opacity:.28;cursor:default;border-color:var(--line);
  background:var(--white)}
section.paper .fs-arrow{background:var(--paper)}
section.paper .fs-arrow:hover{background:var(--white)}
section.paper .fs-arrow[disabled]{background:var(--paper)}
/* in RTL the chevrons must point the other way — the buttons themselves already swap sides
   because they are placed with logical properties */
[dir="rtl"] .fs-arrow svg{transform:scaleX(-1)}

/* max-content would make the percentage widths below resolve against the rail's own content
   rather than the scroller, which is the whole trick */
.fs-rail{gap:var(--fs-gap);min-inline-size:0}
.fs-card,.fstrip .fs-rail>*{
  flex:0 0 calc((100% - (var(--fs-n) - 1) * var(--fs-gap)) / var(--fs-n));
  scroll-snap-align:start}
.fs-card{inline-size:auto}

@media(max-width:620px){
  .fs-stage{padding-inline:42px}
  .fs-arrow{inline-size:34px}
  .fs-arrow svg{inline-size:11px;block-size:18px}
}

/* ---------- the eleven businesses, as the same component ----------
   Three at a time, and the cards keep the 22px gutter doc 25 settled: a photograph on a 1px
   hairline reads as one crowded block. */
.fstrip.units{--fs-n:3;--fs-gap:22px}
@media(max-width:1040px){.fstrip.units{--fs-n:2}}
@media(max-width:700px){.fstrip.units{--fs-n:1;--fs-gap:16px}}
.fstrip.units .fs-rail{align-items:stretch}
.fstrip.units .fs-bar{margin-block-start:26px}

/* ---------- the stat bands centre, 27 September 2026 ----------
   Hisham: "all stats must be center alignment in their boxes as well. it looks weird on
   mobile." He is right, and mobile is where it shows worst: below 560px the grid becomes a
   single column, so each cell is the full width of the page with its number pinned to the
   left edge and a lot of empty air to its right. Centred, the band reads as a row of facts
   at every width instead of a left-hand column that happens to be in a box.

   The claim cell was already centred, so this brings the other three into line with it. */
.proof .cell{text-align:center}

/* ---------- the home stat band takes icons, 28 September 2026 ----------
   Hisham: "Add icon to all stats in the homepage. Make sure they're one color and match our
   guidelines and all text in the stats are All CAPS."

   One colour for all four. The band is the logo blue, #4E748A, so the only brand colour with
   enough separation from it is white — mist, #A8C4CE, was tried first and sat at 2.2:1, which
   read as a smudge rather than a mark. White matches the numbers and the labels, so the icon
   reads as part of its stat instead of as decoration beside it.
   Line marks at 1.6, never filled, so they match the weight of the rules between the cells.
   Scoped to the home route: the unit pages carry the same band on four different grounds. */
/* 30 Sep 2026. Hisham: "make sure all the business units' pages Stats and all stats are
   centered in their box from all sides." The rule below was scoped to the home route, so on
   a unit page a label that wrapped to three lines ("Exclusive distribution rights") made its
   row taller and left every other number sitting at the top of its box. Unscoped, so the
   content centres on both axes in every band on the site. */
.proof .cell{display:flex;flex-direction:column;
  align-items:center;justify-content:center}
/* 30 Sep 2026. Hisham: "i need way better stats with icons. this applies to even each BUs
   stats." The mark was scoped to the home band; every band carries one now. On the unit
   pages the band is Paper, so the mark takes the teal accent rather than white, and sits
   smaller — those bands run to five cells and the numbers must stay the loudest thing. */
/* 30 Sep 2026. Hisham: "All the Icons, make sure the lines of the icons are not THICK."
   The marks were drawn at 1.6 to match the rules between the cells; CSS overrides the SVG
   presentation attribute, so one declaration thins every one of them at once. */
.proof .sic{inline-size:28px;block-size:28px;flex:none;color:#fff;
  stroke-width:1;margin-block-end:12px}
/* the nine unit bands are the only ones on Paper, so they are the only ones that take the
   teal accent; every other band is Petrol and the mark stays white, like the numbers. */
[data-route^="unit-"] .proof .sic{color:var(--teal)}

/* ---------- the home band, 30 September 2026 ----------
   Hisham picked style 3 — a translucent disc behind a thin line mark — and asked for the
   band to be slimmer with smaller type, so that the stats sit at the foot of the first
   screen instead of below it.

   ALIGNMENT. The four marks are not the same size inside a 24x24 box (people 20 x 17.2,
   star 20 x 20.73, globe-and-rosette 18.3 x 20.4 centred at 11.55/12.6, plain globe
   17.2 x 17.2). One scale factor made the plain globe 17% smaller than the star and left
   the rosette mark low and left in its disc. Each mark is now scaled to the same 13.4 units
   and its own bounding-box centre placed on the centre of the disc — so the transforms in
   the markup differ per icon ON PURPOSE. `vector-effect:non-scaling-stroke` keeps the line
   weight identical despite those different scales; without it the globe, scaled most, would
   also be drawn thickest. */
[data-route="index.html"] .proof .sic{inline-size:34px;block-size:34px;
  margin-block-end:11px}
.proof .sic .disc{fill:rgba(255,255,255,.17)}
.proof .sic .mk{stroke-width:1.45px}
@media(max-width:560px){.proof .sic{inline-size:26px;block-size:26px;margin-block-end:10px}}
/* The claim cell is the only one with words in its <b>, and it is set in Title Case in the
   markup now rather than forced to caps here — Hisham, 28 Sep. The three numbers have no
   letters, so nothing else in the band changes. */
@media(max-width:560px){
  [data-route="index.html"] .proof .sic{inline-size:29px;block-size:29px;margin-block-end:12px}
}

@media(max-width:1000px){
  /* on a unit page the band is lockup-then-grid, and below 1000px that stacks. With the
     numbers centred, a mark parked against the left edge is the only thing left hanging. */
  [data-route^="unit-"] .proof .wrap{align-items:center}
}

/* ---------- the aggregate photography settles, 27 September 2026 ----------
   Hisham: "i dont like how you made te Salbookh photo in the thumbnail change i added a new
   photo to the folder use it fot the thumbnail... and the one next to the description fix it
   and remove the brown background you added."

   The brown ground was a workaround. The square top view (1698 x 1552) could not fill a 16:11
   card without slicing the top and bottom bowls, so it sat `contain` on rgb(131,121,110)
   sampled from the boards. It read as a photo pasted on a swatch.

   The new frame (1301 x 768, graded aggregate in bands) is landscape, so the card fills with
   `cover` and only loses a little at the sides. That frees the top view to move to the slot
   beside the copy alone, where 4:3 against a 1.09 source crops 9% off the top and bottom —
   board, not bowls. Both slots are back to plain `cover`; the ground rule is gone. */


/* ---------- two milestones to a card, 27 September 2026 ----------
   Hisham: "milestones has so much blank space, instead of navigating sliding 22 times. group
   each two in one box." He picked the stacked, left-aligned option over the diagonal.

   Twenty-two cards become eleven, four on screen — eight steps end to end instead of
   eighteen. The card grows 268px -> 300px, which is what stops the longest pairs clipping:
   1958 and 1961 are the two longest entries in the set and they are the first card. */
/* `justify-content:space-between` let the FIRST entry's own height decide where the rule
   landed, so it ranged from 52.8% to 65.4% of the card across the eleven — a 12.6 point
   spread, visible as soon as two cards sit side by side. Two equal rows put it on the exact
   midpoint of every card. minmax(0,1fr) rather than 1fr, so a long entry cannot push its
   row taller than its neighbour. */
.fs-card.fs-pair{block-size:300px;display:grid;
  grid-template-rows:repeat(2,minmax(0,1fr));padding:22px 20px}
.fs-pair .fs-e b{display:block;font-size:26px;font-weight:700;letter-spacing:-.035em;
  line-height:1}
.fs-pair .fs-e b::after{content:"";display:block;inline-size:30px;block-size:3px;
  background:rgba(255,255,255,.55);margin-block-start:10px}
.fs-pair .fs-e p{margin:9px 0 0;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.86)}
/* the rule sits between the two entries, not under the pair */
.fs-pair .fs-e + .fs-e{padding-block-start:14px;
  border-block-start:1px solid rgba(255,255,255,.18)}
@media(max-width:620px){
  /* a fixed height, not min-height: with auto rows the split stops being 50:50 */
  .fs-card.fs-pair{block-size:320px}
}

/* ---------- the brand walls: one box size, one mark size, 27 September 2026 ----------
   Measured before: the tiles ran 150px to 222px wide, because `.wall` was a flex row with
   `min-inline-size:150px; flex:0 1 auto` and a wide mark made a wide box. The marks ran from
   1,479px2 to 7,953px2 of rendered area — 5.4x — because every height had been set by hand,
   one brand at a time. On a phone Koita's tile was 222px and sat alone on its row.

   A grid of equal 1fr columns makes every tile identical. Every mark's height is now derived
   from its measured INK box rather than chosen, so each covers the same area; the span's
   max-inline-size lets a narrow column shrink a wide mark proportionally instead of letting
   it push the tile out. `background-size:contain` has always kept the artwork itself
   undistorted and still does.

   Revised the same day. Hisham: "a lot of logos are still looking unproportioned. feel free
   enlarge the size of the brands logos but keep the box sizes the same." Equalising the area
   was right but the target was timid — 2,100px2 in a 128 x 64 well is 26% ink, so every mark
   sat marooned in white. The target is now 3,900px2, about 44%, with the mark free to reach
   62px tall or 130px wide, whichever binds first. A square mark goes 48.7px -> 60px, Elle &
   Vire 34px -> 45.6px, Wexford 25.1px -> 34.2px. The tile is unchanged in proportion at
   156 x 96. Parliament stays the outlier at 7.94:1; a wordmark that wide cannot be large in
   any tile that also has to hold a square. */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:10px}
.wall .bl{min-inline-size:0;inline-size:auto;block-size:96px;padding:12px;flex:none}
.wall .bl .ximg{max-inline-size:100%;max-block-size:100%}
/* ---------- a brand box set in type, 28 September 2026 ----------
   Hisham: "two brands and logos for alwaseel should be added. Terea and Bonds by IQOS. create
   boxes with their name."

   No artwork was supplied for either, so the tile carries the name set in the site's own face
   rather than a picture of a name. Sized so its ink sits in the same range as the marks beside
   it: the wall's marks are normalised to about 3,900px2 of ink (doc 81), and 25px caps at .07em
   across five or six letters lands inside that. Deliberately NOT a placeholder grey — these are
   real brands on a real wall, and a washed-out box would read as missing rather than as set. */
.wall .bl .btype{display:block;font-weight:700;font-size:25px;line-height:1;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink);text-align:center;
  max-inline-size:100%}
@media(max-width:560px){.wall .bl .btype{font-size:21px;letter-spacing:.05em}}
@media(max-width:560px){
  /* Two across a phone, not three. At three the tile was 111px wide with 10px of padding on
     each side, so a wordmark had 91px to live in and Parliament came out 15px tall. Two
     across gives it 151px, and no mark on a phone is smaller than it is on a desktop. */
  .wall{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
  .wall .bl{block-size:92px;padding:10px}
}

.rsp-intro{max-width:70ch}
.rsp-quote{font-size:clamp(21px,2.3vw,30px);line-height:1.35;font-weight:300;color:var(--petrol);letter-spacing:-.012em;margin:0 0 22px}
.rsp-body{color:var(--slate);font-size:clamp(17px,1.4vw,19px);line-height:1.62;margin:0}
.rsp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px}
.rsp-item{background:var(--white);box-shadow:0 0 0 1px var(--line);padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column}
.rsp-year{font-size:clamp(34px,3.6vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--petrol)}
.rsp-tag{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-block:12px 10px}
.rsp-item h3{font-size:clamp(18px,1.6vw,21px);line-height:1.25;margin-block-end:12px}
.rsp-item p{color:var(--slate);font-size:15.5px;line-height:1.6;margin:0 0 10px}
.rsp-item p b{color:var(--ink)}
.rsp-role{font-size:13px!important;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--teal)!important}
.rsp-founder{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(24px,3vw,44px);margin-block-end:clamp(34px,4vw,54px)}
.rsp-founder h4{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--teal);margin:0 0 10px;padding-block-start:14px;border-block-start:2px solid var(--petrol)}
.rsp-founder p{color:var(--slate);font-size:15.5px;line-height:1.62;margin:0}
.rsp-gallery{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rsp-grid.rsp-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.rsp-grid.rsp-3{grid-template-columns:1fr}}

.rsp-item{border-block-start:3px solid var(--petrol)}
#foundations .rsp-grid{gap:18px}
#commitment .split{align-items:center}

.whonav{border-block-start:1px solid var(--line);padding-block:clamp(30px,3.4vw,46px)}
.whonav .eyebrow{margin-block-end:14px}
.whonav .cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}

.sec-head p.eyebrow{font-size:11.5px;line-height:1.65;margin-block-start:0}

.whohero{min-block-size:min(44svh,400px)}
.whohero>img.phimg{object-position:center 28%}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;font-size:13px;letter-spacing:.02em;color:rgba(255,255,255,.72);margin-block-end:14px}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs span{margin-inline:9px;opacity:.6}
.crumbs b{font-weight:600;color:#fff}
.whotabs{background:var(--white);border-block-end:1px solid var(--line)}
.whotabs .wrap{display:flex;gap:clamp(20px,3.4vw,46px);overflow-x:auto;scrollbar-width:none}
.whotabs .wrap::-webkit-scrollbar{display:none}
.whotabs a{display:block;padding-block:20px 17px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--slate);text-decoration:none;white-space:nowrap;border-block-end:2px solid transparent;margin-block-end:-1px}
.whotabs a:hover{color:var(--ink)}
.whotabs a[aria-current="page"]{color:var(--ink);border-block-end-color:var(--petrol)}

.vtl{list-style:none;margin:clamp(10px,2vw,24px) auto 0;padding:0;position:relative;max-inline-size:1000px}
.vtl::before{content:"";position:absolute;inset-block:8px;inset-inline-start:50%;inline-size:1px;background:rgba(78,116,138,.35)}
.vtl-i{position:relative;inline-size:50%;padding-block:14px}
.vtl-i + .vtl-i{margin-block-start:-30px}
.vtl-i:nth-child(odd){padding-inline-end:52px;text-align:end}
.vtl-i:nth-child(even){margin-inline-start:50%;padding-inline-start:52px}
.vtl-i::after{content:"";position:absolute;inset-block-start:27px;inline-size:11px;block-size:11px;border-radius:50%;background:var(--petrol);box-shadow:0 0 0 5px var(--white)}
.vtl-i:nth-child(odd)::after{inset-inline-end:-5.5px}
.vtl-i:nth-child(even)::after{inset-inline-start:-5.5px}
.vtl-c b{display:block;font-size:clamp(24px,2.3vw,30px);line-height:1.15;font-weight:700;color:var(--petrol)}
.vtl-c p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--slate)}
.vtl-i:nth-child(odd) .vtl-c p{margin-inline-start:auto}
.vtl-c p{max-inline-size:34ch}
@media(max-width:760px){
 .vtl::before{inset-inline-start:5px}
 .vtl-i,.vtl-i:nth-child(odd),.vtl-i:nth-child(even){inline-size:100%;margin-inline-start:0;padding-inline:34px 0;text-align:start}
 .vtl-i + .vtl-i{margin-block-start:0}
 .vtl-i:nth-child(odd)::after,.vtl-i:nth-child(even)::after{inset-inline-start:0;inset-inline-end:auto}
 .vtl-i:nth-child(odd) .vtl-c p{margin-inline-start:0}
}

/* About us tab bar: petrol band, sticky under the fixed 82px header */
.whotabs{background:var(--petrol);border-block-end:0;position:sticky;inset-block-start:82px;z-index:40}
.whotabs a{color:rgba(255,255,255,.72);padding-block:19px 16px;border-block-end:2px solid transparent;margin-block-end:0}
.whotabs a:hover{color:#fff}
.whotabs a[aria-current="page"]{color:#fff;border-block-end-color:#fff}
.whotabs + section{padding-block-start:clamp(32px,3.6vw,48px)}

/* Milestones: the timeline scrolls inside its own frame */
.vtl-box{max-inline-size:1000px;margin-inline:auto;display:flex;flex-direction:column;gap:10px}
.vtl-scroll{max-block-size:min(60svh,560px);overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;
  padding:30px clamp(14px,3vw,34px);
  scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 40px),transparent);
  mask-image:linear-gradient(transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.vtl-scroll::-webkit-scrollbar{display:none}
.vtl-scroll:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.vtl-scroll .vtl{margin-block:0}
.vtl-btn{inline-size:100%;block-size:44px;padding:0;border:1px solid var(--line);background:var(--white);border-radius:var(--r);
  color:var(--teal);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s}
.vtl-btn svg{inline-size:13px;block-size:22px}
.vtl-up svg{transform:rotate(-90deg)}
.vtl-dn svg{transform:rotate(90deg)}
.vtl-btn:hover{border-color:var(--teal);background:var(--paper)}
.vtl-btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.vtl-btn[disabled]{opacity:.28;cursor:default;border-color:var(--line);background:var(--white)}
.vtl-bar{margin-block-start:8px}
.vtl-bar .fs-fill{inline-size:0}
.vtl-scroll .vtl-i.rise{opacity:1;transform:none}
@media(max-width:760px){.vtl-scroll{max-block-size:62svh;overscroll-behavior:auto}}

/* Home spacing fixes */
#story-teaser .split{align-items:start}
#story-teaser .split>.ph{margin-block-start:0}
@media(max-width:820px){#story-teaser .split>.ph{margin-block-start:0}}
#our-brands .wall{grid-template-columns:repeat(6,1fr)}
@media(max-width:1000px){#our-brands .wall{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){#our-brands .wall{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .proof .grid{grid-template-columns:repeat(2,1fr)}
  .proof .cell{border-block-end:none;border-inline-end:none}
  .proof .cell:nth-child(-n+2){border-block-end:1px solid rgba(255,255,255,.14)}
  .proof .cell:nth-child(odd){border-inline-end:1px solid rgba(255,255,255,.14)}
}

/* Our Vision page */
.vis-statement{margin:14px 0 0;max-inline-size:24ch;font-size:clamp(30px,3.7vw,50px);line-height:1.18;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.vis-parts{margin-block-start:clamp(36px,4.4vw,60px)}
.vis-values .rsp-item h3{margin-block-end:8px}
@media(min-width:561px) and (max-width:900px){.rsp-grid.rsp-3.vis-values{grid-template-columns:repeat(2,1fr)}}

/* About us dropdown: same row height as the Our Businesses sector rows */
.mainnav .submenu:not(.secmenu) a{display:flex;align-items:center;min-block-size:44px;padding:10px 12px;margin-block-end:1px}

/* Our Businesses dropdown, tightened (option C); About us rows kept at the same height */
@media(min-width:821px){
  .submenu.wide.secmenu{padding:8px}
  .secmenu .sec{padding:8px 12px;gap:12px;min-block-size:40px}
  .secmenu .cos{padding-inline-start:10px;margin-inline-start:8px}
  .mainnav .secmenu .cos a{padding:8px 12px;min-block-size:40px;display:flex;align-items:center}
  .secmenu .allbiz{margin-block-start:4px;padding-block:8px}
  .mainnav .submenu:not(.secmenu) a{min-block-size:40px;padding:8px 12px}
}

/* section heading with its "view all" link on the right */
.sec-head--link{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.sec-head--link .btn{flex:none;margin:0}
@media(max-width:560px){.sec-head--link{flex-direction:column;align-items:flex-start;gap:18px}}

#story-teaser .sec-head{margin-block-end:clamp(26px,3vw,40px)}

@media(min-width:821px){#story-teaser .split{align-items:stretch}#story-teaser .split>.ph{aspect-ratio:auto;block-size:auto;align-self:stretch;min-block-size:320px}}

#story-teaser .split>.rise>p:last-child{margin-block-end:0}

/* home hero video */
.hero>video.phimg{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;object-position:center 40%}

/* home hero: full-screen height so the archive video is cropped as little as possible */
.hero.has-vid{min-block-size:100svh}
.hero>video.phimg{object-position:center 62%}
@media(max-width:820px){.hero>video.phimg{object-position:68% 60%}}

.preview-note{margin:18px 0 0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.55)}
.preview-note b{color:rgba(255,255,255,.75);font-weight:600}

/* home hero: both buttons the same size */
.hero.has-vid .cta{display:grid;grid-template-columns:repeat(2,minmax(0,200px));gap:12px}
.hero.has-vid .cta .btn{justify-content:center;text-align:center;inline-size:100%;margin:0}
@media(max-width:560px){.hero.has-vid .cta{grid-template-columns:1fr 1fr}}
@media(max-width:340px){.hero.has-vid .cta{grid-template-columns:1fr}}

/* home hero buttons on phones: one line each, side by side */
@media(max-width:560px){
  .hero.has-vid .cta{grid-template-columns:1fr 1fr;gap:10px}
  .hero.has-vid .cta .btn{white-space:nowrap;font-size:15px;padding:13px 10px;min-block-size:48px}
}
@media(max-width:340px){.hero.has-vid .cta{grid-template-columns:1fr 1fr}}

/* mobile menu: no dead space, tighter rows, scrolls only when a submenu needs it */
@media(max-width:820px){
  .mainnav{block-size:100dvh;inset-block-end:auto;padding-block:68px 24px;overscroll-behavior:contain;gap:0}
  .mainnav .navclose{position:absolute;inset-block-start:12px;inset-inline-end:16px;margin:0}
  .mainnav>.navitem:first-of-type,.mainnav>.navclose+.navitem{border-block-start:1px solid var(--line)}
  .mainnav>a,.mainnav>.navitem>a{font-size:19px;line-height:1.35;padding:13px 22px;min-block-size:52px;display:flex;align-items:center}
  .mainnav>.navitem>a{justify-content:space-between}
  .mainnav>a,.mainnav>.navitem{border-block-end:1px solid var(--line)}
  .mainnav>.lang{margin:16px 22px 0}
}

/* ---- phone menu: one clear three-level hierarchy ----
   L1 main items 19px semibold · L2 sub-pages, sectors, "View all" 16px medium · L3 companies 15px regular */
@media(max-width:820px){
  .mainnav .navitem>.submenu,.mainnav .navitem>.submenu.wide{margin:0;padding:0 0 10px;background:none;border:0;box-shadow:none;border-radius:0;min-inline-size:0}
  .mainnav>.navitem.open>a{color:var(--petrol)}
  .mainnav>.navitem>a svg{inline-size:14px;block-size:14px;flex:none}
  .mainnav .submenu:not(.secmenu) a,
  .mainnav .secmenu .sec,
  .mainnav .secmenu .allbiz{
    font-size:16px;font-weight:500;line-height:1.35;color:var(--ink);
    padding:11px 22px 11px 38px;min-block-size:46px;margin:0;
    display:flex;align-items:center;justify-content:space-between;
    inline-size:100%;box-sizing:border-box;background:none;border:0;border-radius:0;text-align:start}
  .mainnav .secmenu .sec svg{inline-size:12px;block-size:12px;flex:none;color:var(--slate)}
  .mainnav .secmenu .sec.on,.mainnav .secmenu .sec:hover{color:var(--petrol);background:none}
  .mainnav .secmenu .sec.on svg{color:var(--petrol)}
  .mainnav .secmenu .cos{margin:0 0 8px 38px;padding:0 0 0 14px;border:0;border-inline-start:1px solid var(--line)}
  .mainnav .secmenu .cos a{font-size:15px;font-weight:400;line-height:1.35;color:var(--slate);
    padding:9px 22px 9px 0;min-block-size:40px;display:flex;align-items:center;background:none;border-radius:0}
  .mainnav .secmenu .cos a:hover{color:var(--ink)}
  .mainnav .secmenu .allbiz{color:var(--petrol);font-weight:600;margin-block-start:4px;border-block-start:1px solid var(--line);border-block-end:0}
  .mainnav .submenu a[aria-current="page"],.mainnav .submenu a:hover{color:var(--petrol);box-shadow:none}
}

@media(max-width:820px){
  .site-head .mainnav .secmenu .cos a,.site-head.solid .mainnav .secmenu .cos a{color:var(--slate)}
  .site-head .mainnav .secmenu .cos a:hover,.site-head.solid .mainnav .secmenu .cos a:hover{color:var(--ink)}
  .site-head .mainnav .secmenu .allbiz,.site-head.solid .mainnav .secmenu .allbiz{color:var(--petrol);border-block-start:1px solid var(--line)}
  .site-head .mainnav .submenu a[aria-current="page"],.site-head.solid .mainnav .submenu a[aria-current="page"]{color:var(--petrol)}
}

@media(max-width:820px){
  .mainnav .submenu a .sl,.mainnav .submenu a .sl.caps{font:inherit;font-size:inherit;font-weight:inherit;text-transform:none;letter-spacing:normal;color:inherit}
  .site-head .mainnav a:hover,.site-head.solid .mainnav a:hover,.mainnav .secmenu .sec:hover{background:none}
}
@media(max-width:820px) and (hover:none){
  .site-head .mainnav .submenu a:hover,.site-head.solid .mainnav .submenu a:hover,.mainnav .secmenu .sec:not(.on):hover{color:var(--ink)}
  .site-head .mainnav .secmenu .cos a:hover,.site-head.solid .mainnav .secmenu .cos a:hover{color:var(--slate)}
}

@media(max-width:820px){.mainnav>.lang-soon,.mainnav>.lang{align-self:flex-start;margin:18px 0 0 calc((100% - min(520px, 86%)) / 2 + 22px)}}

/* first paint: show the requested page before the scripts at the end of the file have run */
html[data-boot] .route[data-route="index.html"][hidden]{display:block}

/* one banner height for every page except home */
.route:not([data-route="index.html"]) .hero.unit-hero{min-block-size:600px !important}
@media(max-width:820px){.route:not([data-route="index.html"]) .hero.unit-hero{min-block-size:640px !important}}

/* home: all brands, 12 per page, swipe or arrows */
.brandstrip .fs-rail{display:flex;gap:0;padding:0}
.brandstrip .fs-scroll{scroll-snap-type:x mandatory}
.brandstrip .bpage.wall{flex:0 0 100%;display:grid;margin:0;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;scroll-snap-align:start;padding-inline:2px;box-sizing:border-box;align-content:start}
@media(max-width:1000px){.brandstrip .bpage.wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){.brandstrip .bpage.wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}

#our-brands .brandstrip .bpage.wall{grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:1000px){#our-brands .brandstrip .bpage.wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:560px){#our-brands .brandstrip .bpage.wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}

/* company pages: section headings (Overview, Brands, Categories, Locations, Franchise) */
.subsec{font-size:28px;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:0 0 18px}
@media(max-width:820px){.subsec{font-size:22px;margin-block-end:14px}}
.sec-head .subsec{margin-block-end:0}

/* ---- stats bars: one system on every page ---- */
.route .proof .grid{align-items:stretch}
.route .proof .grid .cell{min-block-size:156px;box-sizing:border-box;padding:22px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0}
.route .proof .grid .cell .sic{inline-size:24px;block-size:24px;margin:0 0 10px;flex:none}
.route .proof .grid .cell b{font-size:32px;line-height:1.1;font-weight:700;letter-spacing:-.01em;margin:0;white-space:nowrap}
.route .proof .grid .cell span{font-size:11.5px;line-height:1.35;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-block-start:8px;min-block-size:2.7em;max-inline-size:100%}
.route .proof .bulock{display:flex;align-items:center;justify-content:center}
@media(max-width:820px){
  .route .proof .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .route .proof .grid .cell{min-block-size:136px;padding:18px 10px}
  .route .proof .grid .cell b{font-size:24px}
  .route .proof .grid .cell span{font-size:10.5px;letter-spacing:.1em}
}

@media(max-width:820px){.route .proof .bulock{block-size:105px;box-sizing:border-box;padding-block:0;overflow:hidden}.route .proof .bulock .bum{max-block-size:56px!important;inline-size:auto}}

.route .proof .grid .cell{justify-content:flex-start;padding-block:24px 18px}
@media(max-width:820px){.route .proof .grid .cell{padding-block:18px 14px}}

/* the preview bar is gone, so the space reserved under the page for it goes too */
body{padding-block-end:0}

/* About Us: same banner pattern as other pages; tabs restyled as a light strip */
.whohero>img.phimg{object-position:center 40%}
.route[data-route="founder.html"] .whohero>img.phimg{object-position:center 25%}
.whotabs{background:var(--paper);border-block-end:1px solid var(--line)}
.whotabs a{color:var(--slate)}
.whotabs a:hover{color:var(--ink)}
.whotabs a[aria-current="page"]{color:var(--petrol);border-block-end:3px solid var(--petrol)}

/* ---- header refinements ---- */
@media(min-width:821px){
  .site-head .bar{padding-block:15px}
  .site-head .brand .bem,.site-head.solid .brand .bem{block-size:52px}
  .site-head .brand .bwd,.site-head.solid .brand .bwd{block-size:22px}
  /* Contact as the one button */
  .site-head .mainnav>a[href$="/contact/"],.site-head.solid .mainnav>a[href$="/contact/"]{
    background:var(--petrol);color:#fff;border-radius:var(--r);padding:9px 18px;margin-inline-start:10px;box-shadow:none}
  .site-head .mainnav>a[href$="/contact/"]:hover,.site-head.solid .mainnav>a[href$="/contact/"]:hover{background:var(--petrol-dk);color:#fff}
  .site-head .mainnav>a[href$="/contact/"][aria-current="page"]{color:#fff;box-shadow:none;background:var(--petrol-dk)}
  /* language as a quiet switch, not a button */
  .site-head .mainnav>.lang,.site-head.solid .mainnav>.lang{border:0;border-left:1px solid var(--line);border-radius:0;
    margin-left:16px;padding:6px 0 6px 18px;font-size:15px;font-weight:600;color:var(--slate)}
  /* where you are: petrol, 3px */
  .site-head.solid .mainnav .navitem.here>a,.site-head .mainnav .navitem.here>a,
  .site-head .mainnav>a[aria-current="page"]:not([href$="/contact/"]){color:var(--petrol);box-shadow:inset 0 -3px 0 var(--petrol)}
}
@media(max-width:820px){
  .mainnav>.lang-soon,.mainnav>.lang{border:0;padding:6px 0;font-size:16px}
}

/* ---- option 5: transparent header over the home video ---- */
.site-head.over{background:transparent!important;border-block-end-color:transparent!important;backdrop-filter:none}
.site-head.over .bar{border-block-end-color:transparent}
.site-head.over .brand{color:#fff}
@media(min-width:821px){
  .site-head.over .mainnav>a,.site-head.over .mainnav>.navitem>a{color:#fff}
  .site-head.over .mainnav>a:hover,.site-head.over .mainnav>.navitem>a:hover{color:#fff;background:rgba(255,255,255,.12)}
  .site-head.over .mainnav>a[href$="/contact/"]{background:#fff;color:var(--petrol)}
  .site-head.over .mainnav>a[href$="/contact/"]:hover{background:rgba(255,255,255,.88);color:var(--petrol)}
  .site-head.over .mainnav>.lang{color:rgba(255,255,255,.85);border-left-color:rgba(255,255,255,.4)}
  .site-head.over .mainnav .navitem>a svg{color:#fff}
}
.site-head.over .navtoggle{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}

/* ---- footer designs (preview) ---- */
footer.site .fmark svg{block-size:92px}
footer.site .faddr{margin:0 0 8px;line-height:1.5}
footer.site .fcon{margin:0}
footer.site .fcon a{display:block;padding-block:2px}
footer.site .far{display:block;padding-block:3px;opacity:.92;text-align:left;unicode-bidi:isolate}
/* design 4: compact contact band + link columns; language switch in the bottom bar */
footer.fd4{padding-block:clamp(36px,4vw,52px) 28px}
footer.fd4 .f4top{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-block-end:26px;border-block-end:1px solid rgba(255,255,255,.38)}
footer.fd4 .fmark{margin:0}
footer.fd4 .fmark svg{block-size:72px}
footer.fd4 .f2info{flex:1;min-inline-size:260px}
footer.fd4 .f2info .faddr{margin:0 0 4px}
footer.fd4 .f2info .fcon{display:flex;flex-wrap:wrap;gap:4px 10px}
footer.fd4 .f2info .fcon a{display:inline;padding:0}
footer.fd4 .f4li{display:inline-flex;align-items:center;justify-content:center;inline-size:40px;block-size:40px;border:1px solid rgba(255,255,255,.52);border-radius:var(--r);padding:0}
footer.fd4 .f4li svg{inline-size:18px;block-size:18px}
footer.fd4 .f4cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-block-start:26px}
footer.fd4 .fine{margin-block-start:28px}
footer.fd4 .f4legal{display:inline-flex;gap:8px;align-items:center}
footer.fd4 .f4legal a{display:inline;padding:0}
footer.fd4 .far{display:inline;padding:0}
@media(max-width:560px){footer.fd4 .f4top{flex-direction:column;align-items:flex-start;gap:14px}footer.fd4 .f4cols{grid-template-columns:1fr 1fr;gap:22px 20px}}

/* the preview bar is gone, so the space reserved under the page for it goes too */
body{padding-block-end:0}

footer.fd4 .f4cols{margin-block-start:0}
footer.fd4 .f4bottom{border-block-end:0;padding-block-end:0;margin-block-start:28px;padding-block-start:26px;border-block-start:1px solid rgba(255,255,255,.38)}

/* design 5: logo left of the link columns; contact details live on the Contact page */
footer.fd5 .f5row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
footer.fd5 .f5mark{display:block;padding:0}
footer.fd5 .f5mark .fmark{margin:0}
footer.fd5 .f5mark .fmark svg{block-size:96px}
footer.fd5 .f4cols{margin:0}
footer.fd5 .fine{margin-block-start:36px}
@media(max-width:820px){footer.fd5 .f5row{grid-template-columns:1fr;gap:28px}footer.fd5 .f5mark .fmark svg{block-size:80px}}
@media(max-width:560px){footer.fd5 .f4cols{grid-template-columns:1fr 1fr;gap:22px 20px}}

@media(min-width:561px){.sec-head--sub{align-items:center}}
.sec-head--sub .subsec{margin:0}
.sec-head--sub p{margin-block-start:6px}

/* first paint: transparent header on the home page before the scripts at the end of the file run */
html[data-top] .site-head{background:transparent!important;border-block-end-color:transparent!important;backdrop-filter:none}
html[data-top] .site-head .bar{border-block-end-color:transparent}
html[data-top] .site-head .brand{color:#fff}
@media(min-width:821px){
  html[data-top] .site-head .mainnav>a,html[data-top] .site-head .mainnav>.navitem>a{color:#fff}
  html[data-top] .site-head .mainnav>a:hover,html[data-top] .site-head .mainnav>.navitem>a:hover{color:#fff;background:rgba(255,255,255,.12)}
  html[data-top] .site-head .mainnav>a[href$="/contact/"]{background:#fff;color:var(--petrol)}
  html[data-top] .site-head .mainnav>a[href$="/contact/"]:hover{background:rgba(255,255,255,.88);color:var(--petrol)}
  html[data-top] .site-head .mainnav>.lang{color:rgba(255,255,255,.85);border-left-color:rgba(255,255,255,.4)}
  html[data-top] .site-head .mainnav .navitem>a svg{color:#fff}
}
html[data-top] .site-head .navtoggle{color:#fff;border-color:rgba(255,255,255,.5);background:transparent}

/* About Us content: same section system as the company pages */
.vis-statement{font-size:clamp(28px,3.2vw,40px)!important;margin-block-start:4px!important}
.fclose{align-items:center}
.fclose-fig .frame{aspect-ratio:4/3}

/* ---- careers ---- */
.route[data-route="careers.html"] .job{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px}
.route[data-route="careers.html"] .job .btn{white-space:nowrap}
.route[data-route="careers.html"] .fraud{margin-block-start:18px}
.fcv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;max-inline-size:820px}
.fcv>div,.fcv>p{margin:0}
.fcv .span2{grid-column:1/-1}
.fcv select,.fcv input:not([type=file]),.fcv textarea{inline-size:100%;box-sizing:border-box}
.filepick{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.filepick input[type=file]{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.filepick label.btn{margin:0;cursor:pointer}
.filepick .fname{color:var(--slate);font-size:15px}
@media(max-width:700px){.fcv{grid-template-columns:1fr}}

.route[data-route="careers.html"] .sec-head .subsec + p{margin-block-start:8px}

.route[data-route="careers.html"] .jobs .job{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:16px!important}
.route[data-route="careers.html"] .jobs .job .btn{margin:0!important;align-self:center}

/* external-link arrow */
.ext{display:inline-block;margin-inline-start:4px;font-size:.92em;line-height:1;transform:translateY(-1px)}
/* careers: CV upload as a centred box */
.fcv .filepick{flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);padding:22px 16px;min-block-size:118px;box-sizing:border-box}
.fcv .filepick .fname{font-size:14px}

/* ---- forms: one consistent field system (Careers and Contact) ---- */
form.f label{font-size:14px;font-weight:600;color:var(--ink);margin-block-end:8px}
form.f input:not([type=file]),form.f select,form.f textarea{
  display:block;inline-size:100%;box-sizing:border-box;font:inherit;font-size:16px;line-height:1.4;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0;box-shadow:none;outline:none}
form.f input:not([type=file]),form.f select{block-size:48px}
form.f select{appearance:none;-webkit-appearance:none;padding-inline-end:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235C6E78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px}
form.f input:not([type=file]):focus,form.f select:focus,form.f textarea:focus{border-color:var(--petrol);box-shadow:0 0 0 3px rgba(78,116,138,.15)}
form.f textarea{min-block-size:140px}
form.f .hint{margin:0;font-size:13.5px;color:var(--slate)}
.fcv{gap:20px 24px}
/* CV drop zone */
.fcv .filepick.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  border:1.5px dashed #C3CFD6;border-radius:var(--r);background:var(--paper);padding:26px 16px;min-block-size:0;transition:border-color .15s,background .15s}
.fcv .filepick.drop.over,.fcv .filepick.drop:hover{border-color:var(--petrol);background:#EEF3F6}
.fcv .filepick.drop input[type=file]{position:absolute;inset:0;inline-size:100%;block-size:100%;opacity:0;cursor:pointer;pointer-events:auto}
.fcv .dropicon{color:var(--petrol);line-height:0}
.fcv .droptext{font-size:15px;color:var(--ink)}
.fcv .droplink{display:inline!important;margin:0!important;font-size:inherit!important;font-weight:600!important;color:var(--petrol)!important;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fcv .filepick .fname{font-size:13.5px;color:var(--slate)}
.fcv .filepick.has-file .fname{color:var(--ink);font-weight:600}

@media (hover:none){.fcv .droptext .dd{display:none}.fcv .droplink{text-transform:none}.fcv .droplink::first-letter{text-transform:uppercase}}

/* contact: head office details */
.cdet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 24px;margin:22px 0 26px;padding:20px 0 0;border-block-start:1px solid var(--line)}
.cdet dt{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-block-end:6px}
.cdet dd{margin:0;font-size:16px;line-height:1.55;color:var(--ink)}
.cdet a{color:var(--ink);text-decoration:none}
.cdet a:hover{color:var(--petrol);text-decoration:underline}
@media(max-width:900px){.cdet{grid-template-columns:1fr}}
.route[data-route="contact.html"] .split .ph{block-size:auto!important;inline-size:auto!important;aspect-ratio:4/3}
@media(min-width:821px){.route[data-route="contact.html"] .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}}

.cdet{grid-template-columns:repeat(2,minmax(0,1fr))}
.cdet > div:nth-child(3){grid-column:1/-1}
.cdet dd a{overflow-wrap:anywhere}
@media(max-width:820px){.route[data-route="contact.html"] .split .ph{inline-size:100%!important;block-size:auto!important;aspect-ratio:4/3;display:block}}

/* press release */
.pr-body{max-inline-size:760px}
.pr-body p{color:var(--slate);font-size:18px;line-height:1.7;margin:0 0 18px}
.pr-body .pr-lead{font-size:19px;color:var(--ink)}
.pr-body .pr-lead b{font-weight:700}
.pr-quote{margin:30px 0 0;padding-inline-start:22px;border-inline-start:3px solid var(--petrol);font-size:21px;line-height:1.55;color:var(--ink)}
.pr-quote cite{display:block;margin-block-start:12px;font-style:normal;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--slate)}
.pr-gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:36px 0 10px}
.pr-gallery .frame{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r)}
.pr-gallery img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.pr-body .subsec{margin-block-start:40px}
.pr-body a[href^=mailto]{color:var(--petrol);font-weight:600}
@media(max-width:560px){.pr-gallery{grid-template-columns:1fr}}

/* brands page: sector > category > logos */
.bcat{border-block-start:1px solid var(--line);padding-block:clamp(24px,3vw,36px)}
.bcat:last-child{padding-block-end:0}
.bcat-h{font-size:19px;font-weight:600;color:var(--petrol);margin:0 0 16px}
.bcat-note{margin:-8px 0 16px;font-size:14px;color:var(--slate)}
.route[data-route="brands.html"] .sec-head p{margin-block-start:8px}

@media(max-width:560px){.route[data-route="brands.html"] .bcat .wall{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}

/* one banner title size on every inner page */
.route:not([data-route="index.html"]) .hero.unit-hero h1{font-size:clamp(34px,4.2vw,60px)!important;line-height:1.08!important;letter-spacing:-.02em}

/* body text: left-aligned, words never split across lines */
section .wrap > p,section .sec-head p,.split .rise p,.fsplit p,.legal p,.cofoot,.band .inner p,
.pr-body p,.cdet dd,p,li,dd,blockquote{text-align:start;-webkit-hyphens:manual;hyphens:manual}

/* desktop menu: never wrap a label; tighten between tablet and laptop widths */
@media(min-width:821px){.mainnav>a,.mainnav>.navitem>a,.mainnav>.lang{white-space:nowrap}}
@media(min-width:821px) and (max-width:1239px){
  .site-head .bar{gap:12px}
  .site-head .brand .bwd,.site-head.solid .brand .bwd{display:none}
  .mainnav{gap:0}
  .mainnav>a,.mainnav>.navitem>a{font-size:13.5px;padding-inline:9px}
  .site-head .mainnav>a[href$="/contact/"],.site-head.solid .mainnav>a[href$="/contact/"]{padding-inline:12px;margin-inline-start:6px}
  .site-head .mainnav>.lang,.site-head.solid .mainnav>.lang{margin-left:10px;padding-left:12px;font-size:14px}
}

@media(min-width:821px) and (max-width:899px){.mainnav>a,.mainnav>.navitem>a{font-size:13px;padding-inline:6px}.site-head .mainnav>.lang,.site-head.solid .mainnav>.lang{margin-left:6px;padding-left:8px}.site-head .mainnav>a[href$="/contact/"],.site-head.solid .mainnav>a[href$="/contact/"]{padding-inline:10px;margin-inline-start:4px}}

/* ---- language selector (globe + EN, dropdown) ---- */
.langsel{position:relative;display:flex;align-items:center}
.lg-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;font-weight:600;color:var(--slate);
  padding:8px 4px 8px 16px;margin-left:14px;border-left:1px solid var(--line);line-height:1}
.lg-btn:hover,.langsel.open .lg-btn{color:var(--ink)}
.lg-btn:focus-visible{outline:2px solid var(--petrol);outline-offset:2px;border-radius:4px}
.lg-globe{inline-size:17px;block-size:17px}
.lg-chev{inline-size:10px;block-size:7px;transition:transform .15s}
.langsel.open .lg-chev{transform:rotate(180deg)}
.lg-menu{position:absolute;top:calc(100% + 10px);right:0;min-inline-size:160px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 12px 32px rgba(15,26,32,.12);padding:6px;display:none;z-index:80}
.langsel.open .lg-menu{display:block}
.lg-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:6px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}
.lg-opt:hover{background:var(--paper)}
.lg-opt.on{color:var(--petrol)}
.lg-tick{inline-size:14px;block-size:14px}
.lg-opt[lang=ar]{direction:ltr;justify-content:flex-start;unicode-bidi:isolate}
/* transparent menu over the home video */
.site-head.over .lg-btn,html[data-top] .site-head .lg-btn{color:rgba(255,255,255,.88);border-left-color:rgba(255,255,255,.4)}
@media(min-width:821px) and (max-width:1239px){.lg-btn{margin-left:8px;padding-left:10px;font-size:13.5px}}
/* phone menu: two plain options at the bottom */
@media(max-width:820px){
  .mainnav>.langsel{align-self:flex-start;margin:18px 0 0 calc((100% - min(520px, 86%)) / 2 + 22px)}
  .lg-btn{display:none}
  .lg-menu{display:flex!important;position:static;box-shadow:none;border:0;padding:0;gap:18px;min-inline-size:0;background:none}
  .lg-opt{padding:4px 0;font-size:15px;background:none!important}
  .lg-opt .lg-tick{display:none}
  .lg-opt.on{text-decoration:underline;text-underline-offset:4px}
}
/* footer */
.flang{color:inherit}
.flang b{font-weight:600}

/* Contact Us: a plain menu link like the others (no box) */
.site-head .mainnav>a[href$="/contact/"],.site-head.solid .mainnav>a[href$="/contact/"],
.site-head.over .mainnav>a[href$="/contact/"],html[data-top] .site-head .mainnav>a[href$="/contact/"]{
  background:transparent!important;color:var(--ink)!important;padding:9px 14px!important;margin-inline-start:0!important;box-shadow:none!important;border-radius:4px}
.site-head .mainnav>a[href$="/contact/"]:hover,.site-head.solid .mainnav>a[href$="/contact/"]:hover{background:transparent!important;color:var(--teal)!important}
.site-head .mainnav>a[href$="/contact/"][aria-current="page"]{color:var(--petrol)!important;box-shadow:inset 0 -3px 0 var(--petrol)!important}
.site-head.over .mainnav>a[href$="/contact/"],html[data-top] .site-head .mainnav>a[href$="/contact/"]{color:#fff!important}
@media(min-width:821px) and (max-width:1239px){.site-head .mainnav>a[href$="/contact/"],.site-head.solid .mainnav>a[href$="/contact/"],.site-head.over .mainnav>a[href$="/contact/"],html[data-top] .site-head .mainnav>a[href$="/contact/"]{padding:9px!important}}
@media(min-width:821px) and (max-width:899px){.site-head .mainnav>a[href$="/contact/"],.site-head.solid .mainnav>a[href$="/contact/"],.site-head.over .mainnav>a[href$="/contact/"],html[data-top] .site-head .mainnav>a[href$="/contact/"]{padding:9px 6px!important}}
@media(max-width:820px){.site-head .mainnav>a[href$="/contact/"],.site-head.solid .mainnav>a[href$="/contact/"]{padding:13px 22px!important;color:var(--ink)!important}}

/* ---- desktop menu: one hover / current / open behaviour for every item ---- */
@media(min-width:821px){
  .site-head .mainnav>a,.site-head .mainnav>.navitem>a,.site-head .lg-btn,.site-head.solid .mainnav>a,.site-head.solid .mainnav>.navitem>a,.site-head.solid .lg-btn{background:transparent!important;border-radius:0!important;box-shadow:none;transition:color .15s,box-shadow .15s}
  /* solid header */
  .site-head .mainnav>a:hover,.site-head .mainnav>.navitem>a:hover,.site-head .lg-btn:hover,.site-head.solid .mainnav>a:hover,.site-head.solid .mainnav>.navitem>a:hover,.site-head.solid .lg-btn:hover,
  .site-head .mainnav>.navitem:hover>a,.site-head .mainnav>.navitem:focus-within>a,.site-head .langsel.open .lg-btn{
    color:var(--petrol)!important;background:transparent!important;box-shadow:inset 0 -2px 0 var(--petrol)!important}
  .site-head .mainnav>a[aria-current="page"],.site-head .mainnav>.navitem.here>a,.site-head.solid .mainnav>.navitem.here>a{
    color:var(--petrol)!important;box-shadow:inset 0 -3px 0 var(--petrol)!important}
  /* transparent header over the home video */
  .site-head.over .mainnav>a,.site-head.over .mainnav>.navitem>a,.site-head.over .lg-btn,
  html[data-top] .site-head .mainnav>a,html[data-top] .site-head .mainnav>.navitem>a,html[data-top] .site-head .lg-btn{color:#fff!important}
  .site-head.over .mainnav>a:hover,.site-head.over .mainnav>.navitem:hover>a,.site-head.over .mainnav>.navitem:focus-within>a,.site-head.over .lg-btn:hover,.site-head.over .langsel.open .lg-btn,
  html[data-top] .site-head .mainnav>a:hover,html[data-top] .site-head .mainnav>.navitem:hover>a,html[data-top] .site-head .lg-btn:hover{
    color:#fff!important;background:transparent!important;box-shadow:inset 0 -2px 0 #fff!important}
  .site-head .mainnav>.navitem>a svg,.site-head .lg-btn svg{color:currentColor}
  .site-head .lg-btn{box-shadow:none}
}

@media(min-width:821px){
  .site-head.over .mainnav>a[href$="/contact/"]:hover,html[data-top] .site-head .mainnav>a[href$="/contact/"]:hover{color:#fff!important;box-shadow:inset 0 -2px 0 #fff!important}
  .site-head .mainnav>a[aria-current="page"]:hover,.site-head .mainnav>.navitem.here:hover>a,.site-head .mainnav>.navitem.here>a:hover{box-shadow:inset 0 -3px 0 var(--petrol)!important;color:var(--petrol)!important}
}

/* home (transparent menu): hover = faint white box, no underline — for every item */
@media(min-width:821px){
  .site-head.over .mainnav>a:hover,.site-head.over .mainnav>.navitem:hover>a,.site-head.over .mainnav>.navitem:focus-within>a,
  .site-head.over .lg-btn:hover,.site-head.over .langsel:hover .lg-btn,.site-head.over .langsel.open .lg-btn,
  .site-head.over .mainnav>a[href$="/contact/"]:hover,
  html[data-top] .site-head .mainnav>a:hover,html[data-top] .site-head .mainnav>.navitem:hover>a,html[data-top] .site-head .lg-btn:hover,
  html[data-top] .site-head .langsel:hover .lg-btn,html[data-top] .site-head .mainnav>a[href$="/contact/"]:hover{
    color:#fff!important;background:rgba(255,255,255,.12)!important;box-shadow:none!important;border-radius:4px!important}
  /* language: opens on hover like the other dropdowns */
  .langsel:hover .lg-menu{display:block}
  .langsel:hover .lg-chev{transform:rotate(180deg)}
  .site-head .langsel:hover .lg-btn{color:var(--petrol)!important;box-shadow:inset 0 -2px 0 var(--petrol)!important}
  .lg-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  .lg-btn{padding:9px 6px 9px 16px}
  /* dropdown items: current page gets the same straight line as the top menu, not a rounded box */
  .site-head .mainnav .submenu a[aria-current="page"],.site-head.solid .mainnav .submenu a[aria-current="page"]{
    color:var(--petrol)!important;background:transparent!important;border-radius:0!important;box-shadow:inset 0 -3px 0 var(--petrol)!important}
  .site-head .mainnav .submenu a:hover{border-radius:0}
}

/* menu lines with rounded ends (drawn as a pill instead of an inset shadow) */
@media(min-width:821px){
  .site-head .mainnav>a,.site-head .mainnav>.navitem>a,.site-head .lg-btn,.site-head .mainnav .submenu a{position:relative}
  .site-head .mainnav>a::after,.site-head .mainnav>.navitem>a::after,.site-head .lg-btn::after,.site-head .mainnav .submenu a::after{
    content:"";position:absolute;left:10px;right:10px;bottom:0;height:0;border-radius:3px;background:currentColor;opacity:0;transition:height .15s,opacity .15s}
  /* hover / open: 2px rounded line (white bar only) */
  .site-head:not(.over) .mainnav>a:hover::after,.site-head:not(.over) .mainnav>.navitem:hover>a::after,.site-head:not(.over) .mainnav>.navitem:focus-within>a::after,
  .site-head:not(.over) .lg-btn:hover::after,.site-head:not(.over) .langsel:hover .lg-btn::after{height:2px;opacity:1}
  html[data-top] .site-head .mainnav>a:hover::after,html[data-top] .site-head .mainnav>.navitem:hover>a::after,html[data-top] .site-head .lg-btn:hover::after{height:0;opacity:0}
  /* current page: 3px rounded line */
  .site-head .mainnav>a[aria-current="page"]::after,.site-head .mainnav>.navitem.here>a::after,.site-head .mainnav .submenu a[aria-current="page"]::after{height:3px;opacity:1}
  .site-head .lg-btn::after{left:16px;right:6px}
  /* switch off the old square-ended lines */
  .site-head .mainnav>a,.site-head .mainnav>.navitem>a,.site-head .lg-btn,.site-head .mainnav .submenu a,
  .site-head .mainnav>a:hover,.site-head .mainnav>.navitem:hover>a,.site-head .mainnav>.navitem:focus-within>a,.site-head .lg-btn:hover,.site-head .langsel:hover .lg-btn,.site-head .langsel.open .lg-btn,
  .site-head .mainnav>a[aria-current="page"],.site-head .mainnav>.navitem.here>a,.site-head.solid .mainnav>.navitem.here>a,.site-head .mainnav>a[aria-current="page"]:hover,
  .site-head .mainnav .submenu a[aria-current="page"],.site-head.solid .mainnav .submenu a[aria-current="page"]{box-shadow:none!important}
}

@media(min-width:821px){.site-head.solid .mainnav>a:hover,.site-head.solid .mainnav>.navitem>a:hover,.site-head.solid .lg-btn:hover,.site-head.solid .mainnav>.navitem:hover>a,.site-head.solid .mainnav>a[aria-current="page"],.site-head.solid .mainnav>a[aria-current="page"]:hover{box-shadow:none!important}}

/* Our Businesses: companies column appears only once a sector is pointed at */
@media(min-width:821px){
  .secmenu .cos{display:none!important}
  .secmenu .cos.on{display:block!important;visibility:visible}
}

/* Our Businesses: one fixed width for the companies column, whatever the sector */
@media(min-width:821px){.secmenu .cos.on{inline-size:252px!important;min-inline-size:252px;box-sizing:border-box}}

/* menu lines: fully rounded caps, slightly thicker so the rounding is visible */
@media(min-width:821px){
  .site-head .mainnav>a::after,.site-head .mainnav>.navitem>a::after,.site-head .lg-btn::after,.site-head .mainnav .submenu a::after{border-radius:999px}
  .site-head .mainnav>a[aria-current="page"]::after,.site-head .mainnav>.navitem.here>a::after,.site-head .mainnav .submenu a[aria-current="page"]::after{height:4px!important}
  .site-head:not(.over) .mainnav>a:hover::after,.site-head:not(.over) .mainnav>.navitem:hover>a::after,.site-head:not(.over) .mainnav>.navitem:focus-within>a::after,
  .site-head:not(.over) .lg-btn:hover::after,.site-head:not(.over) .langsel:hover .lg-btn::after{height:3px}
  .site-head .mainnav .submenu a::after{left:12px;right:12px;bottom:2px}
}

/* ---- desktop dropdowns: one at a time, no flicker ----
   A closing panel used to stay hoverable while it faded out; sliding the mouse across to the
   next item could land on the fading panel and reopen it, so two panels flipped back and forth.
   Closed panels now ignore the mouse at once, and when one item is active the others close
   instantly instead of fading. */
@media(min-width:821px){
  .mainnav .navitem>.submenu{pointer-events:none}
  .mainnav .navitem:hover>.submenu,.mainnav .navitem:focus-within>.submenu{pointer-events:auto}
  .mainnav.has-active .navitem:not(.is-active)>.submenu{transition:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  .mainnav.has-active .langsel:not(.is-active) .lg-menu{display:none!important}
}
/* language: the divider sits outside the button, so the hover box is centred on "EN" like the other items */
@media(min-width:821px){
  .langsel{border-left:1px solid var(--line);margin-left:14px;padding-left:8px}
  .site-head.over .langsel,html[data-top] .site-head .langsel{border-left-color:rgba(255,255,255,.4)}
  .site-head .lg-btn,.site-head.solid .lg-btn{border-left:0!important;margin-left:0!important;padding:9px 12px!important}
  .site-head .lg-btn::after{left:10px;right:10px}
}
@media(min-width:821px) and (max-width:1239px){.langsel{margin-left:8px;padding-left:4px}.site-head .lg-btn{padding:9px 9px!important}}

/* language panel opens directly under "EN", aligned like the other dropdowns; no tick */
@media(min-width:821px){
  .lg-menu{left:8px;right:auto;min-inline-size:150px}
  .lg-opt{justify-content:flex-start}
}

@media(min-width:821px){.langsel.lg-right .lg-menu{left:auto;right:0}}

/* Our Businesses page: company cards in a grid */
.bizgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bizgrid .card{display:flex;flex-direction:column;min-inline-size:0}
.bizgrid .card .ph{aspect-ratio:16/10;block-size:auto}
@media(max-width:1000px){.bizgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bizgrid{grid-template-columns:1fr}}

/* Our Businesses page: one row per sector — heading on the left, its companies on the right */
.bizrow{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(24px,4vw,56px);padding-block:clamp(28px,3.4vw,44px);border-block-start:1px solid var(--line)}
.bizrow:first-child{border-block-start:0;padding-block-start:0}
.bizrow:last-child{padding-block-end:0}
.bizrow-h .subsec{margin:0 0 10px}
.bizrow-h p{margin:0;color:var(--slate);font-size:16px;line-height:1.6}
.bizrow .bizgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:1000px){.bizrow{grid-template-columns:1fr;gap:18px}.bizrow .bizgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bizrow .bizgrid{grid-template-columns:1fr}}

/* Our Businesses page cards: two per row so full names fit on one line; full descriptions; more space under the logo */
.bizrow .bizgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.bizgrid .card h3{white-space:nowrap;overflow:visible;font-size:19px}
.bizgrid .card .bumark{margin-block-end:14px}
.bizgrid .card .body p{-webkit-line-clamp:unset!important;display:block!important;overflow:visible!important;max-block-size:none!important}
@media(max-width:560px){.bizrow .bizgrid{grid-template-columns:1fr}.bizgrid .card h3{font-size:18px}}

@media(max-width:1180px){.bizrow{grid-template-columns:1fr;gap:18px}}

/* Our Businesses page: sector heading above, then three equal cards per row */
.bizrow{grid-template-columns:1fr!important;gap:20px!important}
.bizrow-h{max-inline-size:760px}
.bizrow .bizgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px;align-items:stretch}
.bizgrid .card{block-size:100%}
.bizgrid .card .body{display:flex;flex-direction:column;flex:1}
.bizgrid .card .body p{min-block-size:4.8em}
.bizgrid .card .go{margin-block-start:auto}
@media(max-width:1180px){.bizgrid .card h3{font-size:17px}}
@media(max-width:900px){.bizrow .bizgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){.bizrow .bizgrid{grid-template-columns:1fr!important}.bizgrid .card .body p{min-block-size:0}}

.bizgrid .card .bumark{block-size:40px;display:flex;align-items:center}

/* sector sections (Our Businesses and Our Brands): same heading and line as the company pages */
.route[data-route="businesses.html"] .sec-head .subsec,.route[data-route="brands.html"] .sec-head .subsec{font-size:28px!important;font-weight:600;margin:0}
.route[data-route="businesses.html"] .sec-head p,.route[data-route="brands.html"] .sec-head p{font-size:19px!important;line-height:1.6;color:var(--slate);margin:10px 0 0;max-inline-size:760px}
@media(max-width:820px){.route[data-route="businesses.html"] .sec-head .subsec,.route[data-route="brands.html"] .sec-head .subsec{font-size:22px!important}}
.route[data-route="businesses.html"] .bizgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
@media(max-width:900px){.route[data-route="businesses.html"] .bizgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.route[data-route="businesses.html"] .bizgrid{grid-template-columns:1fr}}

/* Our Story overview: photo runs the full height of the text, as on the home page */
@media(min-width:821px){
  .route[data-route="about.html"] #story .split{align-items:stretch}
  .route[data-route="about.html"] #story .split>.ph{aspect-ratio:auto!important;block-size:auto!important;align-self:stretch;min-block-size:360px;margin-block-start:52px}
  .route[data-route="about.html"] #story .split>.rise>p:last-child{margin-block-end:0}
}

/* Our Founder: three themes as a grey band, same type scale as the rest of the site */
.route[data-route="founder.html"] .fcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.route[data-route="founder.html"] .fcols h3{font-size:19px;font-weight:600;color:var(--ink);margin:0 0 12px;padding-block-start:16px;border-block-start:2px solid var(--line)}
.route[data-route="founder.html"] .fcols p{font-size:16px;line-height:1.7;color:var(--slate);margin:0}
@media(max-width:900px){.route[data-route="founder.html"] .fcols{grid-template-columns:1fr}}
.route[data-route="founder.html"] .portrait figcaption{display:none}

/* Our Leadership: tighter bands so the groups sit as close together as before */
.route[data-route="leadership.html"] section{padding-block:32px}
.route[data-route="leadership.html"] section:first-of-type{padding-block-start:48px}
.route[data-route="leadership.html"] section:last-of-type{padding-block-end:64px}
.route[data-route="leadership.html"] .person .rl,.route[data-route="leadership.html"] .person .co{font-size:12.5px;line-height:1.45;color:var(--slate);font-weight:400}
.route[data-route="leadership.html"] .person .rl+.co{margin-block-start:0}

/* About Us tab strip matched to top menu */
.whotabs a{color:var(--ink);font-size:14.5px;letter-spacing:normal;position:relative;border-block-end:0}
.whotabs a:hover{color:var(--petrol)}
.whotabs a[aria-current="page"]{color:var(--petrol);border-block-end:0}
.whotabs a[aria-current="page"]::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:4px;border-radius:999px;background:var(--petrol)}

/* About Us refresh preview */
/* Our Vision and Values: one component for every item on the page */
.route[data-route="vision.html"] .vv-quote{font-size:30px;font-weight:300;line-height:1.35;letter-spacing:-.012em;color:var(--petrol);max-inline-size:34ch;margin:18px 0 0}
.route[data-route="vision.html"] .vv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,44px);row-gap:clamp(34px,4vw,48px);margin-block-start:clamp(32px,4vw,48px)}
.route[data-route="vision.html"] .vv-item{border-block-start:2px solid var(--petrol);padding-block-start:18px}
.route[data-route="vision.html"] .vv-item h3{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);margin:0 0 10px;line-height:1.4}
.route[data-route="vision.html"] .vv-item p{font-size:16px;line-height:1.65;color:var(--slate);margin:0}
.route[data-route="vision.html"] .vv-ic{display:block;color:var(--petrol);line-height:0;margin-block-end:14px}
.route[data-route="vision.html"] .vv-ic svg{inline-size:26px;block-size:26px}
.route[data-route="vision.html"] .subsec+.vv-grid{margin-block-start:28px}
@media(max-width:820px){
  .route[data-route="vision.html"] .vv-quote{font-size:21px}
  .route[data-route="vision.html"] .vv-grid{grid-template-columns:1fr;row-gap:26px}
}

/* Vision and Values: section headings in petrol, matching the rest of the page */
.route[data-route="vision.html"] section .subsec{color:var(--petrol)}
.route[data-route="about.html"] .story-fig{margin:0}
.route[data-route="about.html"] .story-fig .frame img{display:block;inline-size:100%;block-size:auto;aspect-ratio:720/466;object-fit:cover;filter:grayscale(1)}
.route[data-route="founder.html"] .fsolo{display:block}
.route[data-route="founder.html"] .fsolo>div{max-inline-size:780px}
.frows{border-block-end:1px solid var(--line)}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);padding-block:clamp(26px,3vw,36px);border-block-start:1px solid var(--line)}
.frow h3{font-size:19px;font-weight:600;color:var(--ink);margin:0;line-height:1.4}
.frow p{font-size:19px;line-height:1.6;color:var(--slate);margin:0}
@media(max-width:820px){.frow{grid-template-columns:1fr;gap:10px}.frow p{font-size:17px}}

/* Our Story: milestones continue the page */
#milestones{padding-block-start:0}
#milestones{--ms-pad:clamp(40px,5vw,64px)}
#milestones>.wrap{background:linear-gradient(var(--line),var(--line)) no-repeat;background-origin:content-box;background-clip:content-box;background-size:100% 1px;background-position:top;padding-block-start:0}
#milestones .fstrip{padding-block-start:var(--ms-pad)}
#milestones .ms-lead{color:var(--slate);font-size:19px;line-height:1.6;margin:10px 0 0}
#milestones .fstrip{position:relative}
#milestones .fs-stage{padding-inline:0!important;position:static!important}
#milestones .fs-arrow{inset-block-start:calc(var(--ms-pad) + (var(--ms-h2,34px) - 42px)/2)!important}
@media(max-width:820px){#milestones{--ms-h2:26px}}
#milestones .fs-arrow{position:absolute;inset-block:auto;inset-block-start:var(--ms-arrow-top,-60px);inline-size:42px;block-size:42px;border-radius:50%;background:var(--white)}
#milestones .fs-prev{inset-inline-start:auto;inset-inline-end:54px}
#milestones .fs-next{inset-inline-end:0}
#milestones{--ms-arrow-top:0}
#milestones .fs-arrow svg{inline-size:10px;block-size:16px}

/* Our Vision and Values: same pattern as Our Leadership */
.route[data-route="vision.html"] section{padding-block:32px}
.route[data-route="vision.html"] section:first-of-type{padding-block-start:48px}
.route[data-route="vision.html"] section:last-of-type{padding-block-end:64px}
.route[data-route="vision.html"] .vs-stmt{font-size:19px;line-height:1.6;color:var(--slate);margin:0 0 24px;max-inline-size:60ch}
.route[data-route="vision.html"] .person .rl{font-size:14px;line-height:1.5;color:var(--slate);font-weight:400}
.route[data-route="vision.html"] .vs-ic{display:block;color:var(--slate);line-height:0;margin-block-end:10px}
.route[data-route="vision.html"] .vs-ic svg{inline-size:20px;block-size:20px}
.route[data-route="vision.html"] section .subsec{color:var(--ink)}
@media(max-width:1040px){.route[data-route="vision.html"] .people{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.route[data-route="vision.html"] .people{grid-template-columns:1fr}}
.route[data-route="vision.html"] .vs-stmt+.vv-grid{margin-block-start:8px}
@media(max-width:820px){.route[data-route="vision.html"] .vv-grid{grid-template-columns:1fr}}

/* Vision and Values: line-and-label items at Leadership card size and colours */
.route[data-route="vision.html"] .vv-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;column-gap:24px;row-gap:28px;margin-block-start:0}
.route[data-route="vision.html"] .vv-item{border-block-start:2px solid var(--line);padding-block-start:14px}
.route[data-route="vision.html"] .vv-item h3{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 6px;line-height:1.4}
.route[data-route="vision.html"] .vv-item p{font-size:14px;line-height:1.5;color:var(--slate);margin:0}
.route[data-route="vision.html"] .vv-ic{display:block;color:var(--slate);line-height:0;margin-block-end:10px}
.route[data-route="vision.html"] .vv-ic svg{inline-size:20px;block-size:20px}
@media(max-width:1040px){.route[data-route="vision.html"] .vv-grid{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.route[data-route="vision.html"] .vv-grid{grid-template-columns:1fr}}

/* Vision and Values: petrol accent on lines and icons */
.route[data-route="vision.html"] .vv-item{border-block-start-color:var(--petrol)}
.route[data-route="vision.html"] .vv-ic{color:var(--petrol)}

.route[data-route="vision.html"] .vv-item h3{color:var(--petrol)}

/* Vision statement: larger, two lines, same grey */
.route[data-route="vision.html"] .vs-stmt{font-size:clamp(22px,2.2vw,28px);line-height:1.4;color:var(--slate);max-inline-size:44ch;text-wrap:balance;margin:0 0 28px}

/* Our Founder rebuild */
.route[data-route="founder.html"] .fd-lead{font-size:19px;line-height:1.6;color:var(--slate);max-inline-size:60ch;margin:0 0 28px}
.route[data-route="founder.html"] .vv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;row-gap:28px}
.route[data-route="founder.html"] .vv-item{border-block-start:2px solid var(--petrol);padding-block-start:14px}
.route[data-route="founder.html"] .vv-item h3{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);margin:0 0 6px;line-height:1.4}
.route[data-route="founder.html"] .vv-item p{font-size:14px;line-height:1.55;color:var(--slate);margin:0}
.route[data-route="founder.html"] .fd-fig{margin:0}
.route[data-route="founder.html"] .fd-fig .frame img{display:block;inline-size:100%;block-size:auto;aspect-ratio:4/3;object-fit:cover}
@media(max-width:1040px){.route[data-route="founder.html"] .vv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.route[data-route="founder.html"] .vv-grid{grid-template-columns:1fr}}

.route[data-route="founder.html"] .vv-grid.fd-five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1040px){.route[data-route="founder.html"] .vv-grid.fd-five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.route[data-route="founder.html"] .vv-grid.fd-five{grid-template-columns:1fr}}

/* Social Responsibility rebuild: same building blocks as About Us */
.route[data-route="responsibility.html"] .rs-lead{font-size:19px;line-height:1.6;color:var(--slate);max-inline-size:62ch;margin:0 0 28px}
.route[data-route="responsibility.html"] .vv-grid{display:grid;column-gap:24px;row-gap:28px}
.route[data-route="responsibility.html"] .rs-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.route[data-route="responsibility.html"] .rs-two{grid-template-columns:repeat(3,minmax(0,1fr))}
.route[data-route="responsibility.html"] .vv-item{border-block-start:2px solid var(--petrol);padding-block-start:14px}
.route[data-route="responsibility.html"] .vv-item h3{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);margin:0 0 6px;line-height:1.5}
.route[data-route="responsibility.html"] .vv-item p{font-size:14px;line-height:1.55;color:var(--slate);margin:0}
@media(max-width:820px){.route[data-route="responsibility.html"] .rs-three,.route[data-route="responsibility.html"] .rs-two{grid-template-columns:1fr}}

/* Social Responsibility: quieter foundation cards */
.route[data-route="responsibility.html"] .rq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,40px);row-gap:32px}
.route[data-route="responsibility.html"] .rq-item{border-block-start:1px solid var(--line);padding-block-start:18px}
.route[data-route="responsibility.html"] .rq-meta{display:flex;gap:10px;align-items:baseline;margin:0 0 8px}
.route[data-route="responsibility.html"] .rq-year{font-size:16px;font-weight:600;color:var(--petrol)}
.route[data-route="responsibility.html"] .rq-tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.route[data-route="responsibility.html"] .rq-item h3{font-size:17px;font-weight:600;line-height:1.35;color:var(--ink);margin:0 0 8px}
.route[data-route="responsibility.html"] .rq-item p:not(.rq-meta){font-size:15px;line-height:1.6;color:var(--slate);margin:0 0 8px}
@media(max-width:820px){.route[data-route="responsibility.html"] .rq-grid{grid-template-columns:1fr}}

/* Social Responsibility: commitment in site style; white foundation cards with logo slot */
.route[data-route="responsibility.html"] .rs-quote{font-size:19px;font-weight:600;line-height:1.6;color:var(--ink);margin:0 0 16px}
.route[data-route="responsibility.html"] .rs-lead{max-inline-size:none}
.route[data-route="responsibility.html"] .rq-grid{align-items:stretch}
.route[data-route="responsibility.html"] .rq-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.route[data-route="responsibility.html"] .rq-logo{block-size:72px;display:flex;align-items:center;margin:0 0 18px;padding-block-end:18px;border-block-end:1px solid var(--line)}
.route[data-route="responsibility.html"] .rq-logo .ximg{display:block;max-inline-size:100%}

/* foundation cards: logo beside the name */
.route[data-route="responsibility.html"] .rq-head{display:flex;gap:16px;align-items:center;padding-block-end:16px;margin-block-end:16px;border-block-end:1px solid var(--line)}
.route[data-route="responsibility.html"] .rq-head .rq-logo{flex:0 0 auto;block-size:auto;margin:0;padding:0;border:0;inline-size:72px;justify-content:center}
.route[data-route="responsibility.html"] .rq-head .rq-logo .ximg{block-size:auto!important;inline-size:72px;aspect-ratio:auto;max-block-size:56px;background-position:center;background-size:contain;background-repeat:no-repeat;min-block-size:40px}
.route[data-route="responsibility.html"] .rq-head h3{margin:0}
.route[data-route="responsibility.html"] .rq-head .rq-meta{margin:0 0 4px}

.route[data-route="responsibility.html"] .rs-quote{font-weight:400;font-style:italic}
@font-face{font-family:'Plex';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/plex-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2190-21BB}

.route[data-route="responsibility.html"] .rs-quote{color:var(--slate)}

.route[data-route="vision.html"] .vs-stmt{font-style:italic}

/* Al Waseel smoke-free logos */




/* Social Responsibility: foundation logos */

.route[data-route="responsibility.html"] .rq-head .rq-logo .ximg.x78{inline-size:72.0px;block-size:36.5px!important;min-block-size:0;max-block-size:none}

.route[data-route="responsibility.html"] .rq-head .rq-logo .ximg.x79{inline-size:59.9px;block-size:56.0px!important;min-block-size:0;max-block-size:none}

.route[data-route="responsibility.html"] .rq-head .rq-logo .ximg.x80{inline-size:64.0px;block-size:56.0px!important;min-block-size:0;max-block-size:none}

/* foundation cards: full logos on their own row above the name */
.route[data-route="responsibility.html"] .rq-head{display:block}
.route[data-route="responsibility.html"] .rq-head .rq-logo{display:flex;align-items:center;inline-size:auto;block-size:96px;margin:0 0 18px;justify-content:flex-start}
.route[data-route="responsibility.html"] .rq-head .rq-logo .ximg.x78{block-size:96px!important;inline-size:169.5px;max-block-size:none;min-block-size:0}
.route[data-route="responsibility.html"] .rq-head .rq-logo .ximg.x79{block-size:96px!important;inline-size:102.7px;max-block-size:none;min-block-size:0}
.route[data-route="responsibility.html"] .rq-head .rq-logo .ximg.x80{block-size:96px!important;inline-size:176.1px;max-block-size:none;min-block-size:0}

/* Trébon logo (redrawn from supplied artwork) */


/* business cards: year line */
.card .body p.cy{flex:none!important;font-size:12.5px;line-height:1.4;color:var(--slate);margin:0 0 4px!important;min-block-size:0!important;letter-spacing:.02em}

/* Heading consistency: one heading weight on the home page, one small-capitals style site-wide */
.route[data-route="index.html"] .sec-head h2,.route[data-route="index.html"] .band h2,.route[data-route="index.html"] .inner h2{font-weight:600}
.eyebrow{font-size:12px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase}
.route[data-route="responsibility.html"] .rq-tag{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--petrol)}

/* 13 Oct 2026, v199 batch */
.route[data-route="responsibility.html"] .band h2,.route[data-route="responsibility.html"] section h2:not(.subsec){font-weight:600!important}
.route[data-route="privacy.html"] section h2,.route[data-route="terms.html"] section h2{font-size:28px!important;font-weight:600!important;letter-spacing:-.01em!important;line-height:1.2!important;color:var(--ink)}
.route[data-route="privacy.html"] section p,.route[data-route="privacy.html"] section li,.route[data-route="terms.html"] section p,.route[data-route="terms.html"] section li{font-size:19px!important;line-height:1.6!important;color:var(--slate)!important}
.route[data-route="privacy.html"] section .todo,.route[data-route="terms.html"] section .todo{font-size:15px!important}
.route[data-route="responsibility.html"] .rq-item h3{font-size:19px!important;font-weight:700!important;letter-spacing:-.015em!important;line-height:1.2!important}
span.tag{font-size:12px!important;letter-spacing:.14em!important}
.route[data-route="contact.html"] dt{font-size:12px!important;letter-spacing:.14em!important}
.locs h3,.locs h4{letter-spacing:.14em!important}
.route[data-route="unit-waseel.html"] .sec-head p{font-size:14px!important;line-height:1.65!important}
.route[data-route="careers.html"] #apply .sec-head p{font-size:19px!important}
.fstrip.cats .card p{-webkit-line-clamp:unset!important;display:block!important;overflow:visible!important}
.mapln .ext{margin-inline-start:2px}
button,.btn{font-family:inherit}
.sec-head--link a.btn[href$="/brands/"]{white-space:nowrap}

/* 13 Oct 2026, v200: phone menu */
.navtop{display:none}
@media(max-width:820px){
  .site-head .mainnav > a[href$="/contact/"],.site-head.solid .mainnav > a[href$="/contact/"]{margin-inline:auto!important}
  .mainnav .navitem.here > a,.site-head.solid .mainnav .navitem.here > a{box-shadow:none!important;position:relative;overflow:visible}
  .mainnav .navitem.here > a::after{content:"";position:absolute;inset-inline-start:0;inset-inline-end:-52px;inset-block-end:0;block-size:2px;background:var(--petrol)}
  .mainnav .navtop{display:block;position:fixed;inset-block-start:0;inset-inline:0;block-size:80px;background:#fff;z-index:2}
  .mainnav .navlogo{position:fixed;display:flex;align-items:center;gap:13px;padding:0!important;border:0!important;margin:0!important;color:var(--petrol);background:none!important;box-shadow:none!important}
  .mainnav .navlogo,.mainnav .navlogo svg{color:var(--petrol)!important}
  .mainnav .navlogo .bem{block-size:44px;inline-size:44px}
  .mainnav .navlogo .bwd{block-size:19px;inline-size:auto}
  .mainnav .navclose{position:fixed!important;z-index:3;display:flex;align-items:center;justify-content:center}
  .mainnav{padding-block-start:88px!important}
  .navtoggle{display:flex;align-items:center;justify-content:center}
}

/* v201 */
.cbstrip .fs-arrow,.cbstrip .fs-bar{display:none}
.cbstrip .fs-stage{padding-inline:0!important}
.cbstrip .fs-scroll{overflow:visible}
.cbstrip .fs-rail{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:10px;min-inline-size:0!important}
.cbstrip .bpage{display:contents}
@media(max-width:560px){
  .cbstrip .fs-arrow{display:flex}.cbstrip .fs-bar{display:block}
  .cbstrip .fs-stage{padding-inline:42px!important}
  .cbstrip .fs-scroll{overflow-x:auto;scroll-snap-type:x mandatory}
  .cbstrip .fs-rail{display:flex!important;gap:0}
  .cbstrip .bpage.wall{display:grid;flex:0 0 100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding-inline:2px;box-sizing:border-box;scroll-snap-align:start;align-content:start}
  #our-brands .brandstrip .bpage.wall{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
}
.mainnav .submenu a.navcur,.mainnav .submenu a.navcur .sl{color:var(--petrol)!important;font-weight:600}
.newsteaser>a{display:flex;flex-direction:column;background:var(--white);box-shadow:0 0 0 1px var(--line);padding:24px 24px 26px;color:inherit;text-decoration:none}
.newsteaser>a h3{margin:6px 0 14px;transition:color .15s ease}
.newsteaser>a .go{margin-block-start:auto;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol)}
.newsteaser>a:hover h3,.newsteaser>a:focus-visible h3{color:var(--teal)}
.pr-body .pr-cover{margin:0 0 32px}
.pr-body .pr-cover .frame{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);aspect-ratio:auto!important;block-size:auto!important;background:none!important;padding:0!important}
.pr-body .pr-cover .frame::before,.pr-body .pr-cover .frame::after,.pr-body .pr-cover::before,.pr-body .pr-cover::after{display:none!important}
.pr-body .pr-cover img{display:block;inline-size:100%!important;block-size:auto!important;aspect-ratio:16/9;object-fit:contain!important;position:static!important}
.pr-body h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:30px 0 8px;color:var(--ink)}
.pr-body p.pz{margin:0 0 6px}

/* formal press release template */
.pr-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:72px;align-items:start}
.pr-grid .pr-body{max-inline-size:none}
.pr-aside{position:sticky;inset-block-start:110px}
.pr-aside .pr-cover{margin:0}
.pr-logo{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#f6f5f2;border:1px solid var(--line);border-radius:var(--r)}
.pr-body .pr-lead b{letter-spacing:.02em}
.pr-ends{text-align:center!important;font-size:13px!important;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)!important;margin:40px 0 0!important}
.pr-about{margin-block-start:36px;border-block-start:1px solid var(--line);padding-block-start:8px}
.pr-about-h{font-size:15px!important;font-weight:700;letter-spacing:0;margin:24px 0 6px;color:var(--ink)}
.pr-about p{font-size:15px!important;line-height:1.65!important;margin:0 0 6px!important}
.pr-about a,.pr-link{color:var(--teal);font-weight:600}
.pz-row{border-block-start:1px solid var(--line);padding:18px 0 16px}
.pz-row:last-of-type{border-block-end:1px solid var(--line)}
.pz-h{display:flex;justify-content:space-between;gap:18px;align-items:baseline;margin-block-end:8px}
.pz-h b{font-size:18px;color:var(--ink);letter-spacing:-.01em}
.pz-h span{font-size:15px;font-weight:700;color:var(--petrol);white-space:nowrap}
.pz-row ul{list-style:none;margin:0;padding:0}
.pz-row li{font-size:16px;line-height:1.6;color:var(--slate);margin:0 0 4px}
.pr-body .pz-row:first-of-type{margin-block-start:8px}
@media(max-width:900px){.pr-grid{grid-template-columns:1fr;gap:32px}.pr-aside{position:static;order:-1;max-inline-size:420px}}
@media(max-width:560px){.pz-h{flex-direction:column;gap:2px}}

/* v202: news images + share row */
.nimg{position:relative;overflow:hidden;background:var(--paper);aspect-ratio:16/10}
.nimg img.phimg{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
.news li{grid-template-columns:220px 140px minmax(0,1fr)!important;column-gap:28px!important;align-items:start}
.news li .nimg{border-radius:var(--r)}
@media(max-width:820px){.news li{grid-template-columns:1fr!important;row-gap:12px}}
.newsteaser>a{padding:0!important}
.newsteaser>a .ntx{display:flex;flex-direction:column;flex:1;padding:20px 24px 24px}
.newsteaser>a .nimg{aspect-ratio:16/9}
.pr-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-block-start:40px;padding-block-start:22px;border-block-start:1px solid var(--line)}
.pr-share-l{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol);margin-inline-end:6px}
.pr-share a{display:inline-flex;align-items:center;justify-content:center;inline-size:40px;block-size:40px;border:1px solid var(--line);border-radius:50%;color:var(--petrol);background:var(--white);transition:background .15s,color .15s,border-color .15s}
.pr-share a:hover,.pr-share a:focus-visible{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.pr-share svg{inline-size:17px;block-size:17px}
.pr-copied{font-size:13px;color:var(--slate);margin-inline-start:4px}

/* v203: logo cards as news images; date under the image */
.nimg.nlogo{background:#f6f5f2;border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.nimg.nlogo img{position:static!important;inline-size:100%;block-size:100%;object-fit:cover;display:block}
.nimg.nlogo .nl-in{display:flex;align-items:center;justify-content:center;gap:16px;padding:12px}
.news li{grid-template-columns:220px minmax(0,1fr)!important;column-gap:32px!important}
.news li .nside{display:flex;flex-direction:column;gap:10px}
.news li .nside .when{padding:0}
@media(max-width:820px){.news li{grid-template-columns:1fr!important}}

/* ================= v204, 13 Oct 2026 ================= */
/* 1 share icons: one row on phones */
@media(max-width:560px){
  .pr-share{gap:8px}
  .pr-share-l{flex:0 0 100%;margin:0 0 4px}
  .pr-share{flex-wrap:wrap}
  .pr-share a{inline-size:auto;flex:1 1 0;max-inline-size:44px;aspect-ratio:1;block-size:auto;min-inline-size:0}
  .pr-share .pr-copied{flex:0 0 100%}
}
/* 3 footer on phones */
@media(max-width:560px){
  footer.fd5 .f5mark{justify-self:center}
  footer.fd5 .f5mark .fmark svg{block-size:68px}
  footer.fd5 .f5row{gap:24px}
  footer.site .f4cols{gap:18px 20px!important}
  footer.site h4{margin-block-end:6px}
  footer.site .f4cols a{padding-block:4px!important;min-block-size:0!important}
  footer.site .fine{flex-direction:column;align-items:flex-start;gap:10px;margin-block-start:26px;padding-block-start:18px}
  footer.site .f4legal{flex-wrap:wrap;row-gap:10px}
  footer.site .f4legal .fsep-l{display:none}
  footer.site .f4legal .flang{flex:0 0 100%}
  footer.site .fine a{padding-block:2px!important;min-block-size:0!important}
}
/* 4 home news: the same strip as Our Businesses */
.newsstrip .fs-rail.newsteaser{display:flex!important;grid-template-columns:none;background:transparent}
.newsstrip .fs-rail.newsteaser>a{block-size:auto}
@media(min-width:1041px){
  
  
  
  
}
/* 5 banner titles: names wrap instead of running off the screen */
.route:not([data-route="index.html"]) .hero h1{white-space:normal!important;overflow:visible!important;
  text-overflow:clip!important;max-inline-size:none!important;overflow-wrap:normal;word-break:normal;hyphens:manual}
@media(max-width:700px){
  .route:not([data-route="index.html"]) .hero.unit-hero h1{font-size:clamp(28px,8.4vw,38px)!important;line-height:1.1!important}
}
/* 6 Instagram rows: one column of icons */
@media(max-width:640px){
  .hero .social,.social{display:grid!important;grid-template-columns:max-content auto;justify-content:start;
    align-items:center;gap:12px 16px}
  .social .socrow{display:contents}
  .social .soclab{min-inline-size:0!important;margin:0!important}
}
/* 7 home Our Businesses cards: full name, full overview, equal heights */
[data-route="index.html"] .fstrip.units .card{display:flex;flex-direction:column;block-size:auto}
[data-route="index.html"] .fstrip.units .card .body{flex:1;display:flex;flex-direction:column}
[data-route="index.html"] .fstrip.units .card .body .go{margin-block-start:auto}
[data-route="index.html"] .card h3{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;text-wrap:balance}
[data-route="index.html"] .fstrip.units .card p:not(.cy){-webkit-line-clamp:unset!important;display:block!important;overflow:visible!important;min-block-size:0!important}

/* v205: current page in the phone menu, including top-level items; light only */
:root{color-scheme:only light}
@media(max-width:820px){.mainnav a.navcur,html .site-head .mainnav>a.navcur[href],html .site-head.solid .mainnav>a.navcur[href],html .site-head.over .mainnav>a.navcur[href]{color:var(--petrol)!important}}

/* v206: logo plates. Each logo area carries its own light colour as a picture, the same colour it
   already shows, so a browser that forces dark mode (Samsung Internet) cannot turn it black. */
.bl{background-image:url(../images/ui/guard-tile.png)!important;background-size:100% 100%!important;background-repeat:no-repeat!important}
.bumark{background-image:url(../images/ui/guard-tile.png)!important;background-size:100% 100%!important;background-repeat:no-repeat!important}
.rq-logo{background-image:url(../images/ui/guard-tile.png)!important;background-size:100% 100%!important;background-repeat:no-repeat!important}
.nimg.nlogo,.nimg.nlogo .nl-in{background-image:url(../images/ui/guard-news.png)!important;background-size:100% 100%!important;background-repeat:no-repeat!important}
.pr-logo{background-image:url(../images/ui/guard-news.png)!important;background-size:100% 100%!important;background-repeat:no-repeat!important}
.proof .bulock{background-image:url(../images/ui/guard-bulock.png)!important;background-size:100% 100%!important;background-repeat:no-repeat!important}

/* logo plate follows the card hover colour */
.card .bumark{transition:background-image .25s ease}
.card:hover .bumark,.card:focus-visible .bumark{background-image:url(../images/ui/guard-bumark.png)!important}
/* Bab Al Tafani banner: keep the Kingdom Centre arch in view */
[data-route="unit-babaltafani.html"] .unit-hero .phimg{object-position:62% 22%!important}

/* Turnkey banner: Samsung store at night; phone shows the full SAMSUNG word */
@media(max-width:700px){
[data-route="unit-bts.html"] .unit-hero{background:#05090e}
[data-route="unit-bts.html"] .unit-hero .phimg{block-size:64%!important;inset:auto 0 0 0!important;object-position:61% 35%!important;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%);mask-image:linear-gradient(to bottom,transparent,#000 30%)}}

/* company banners: both buttons transparent and the same size */
.unit-hero .cta{display:inline-grid!important;grid-auto-flow:column;grid-auto-columns:1fr;gap:12px}
.unit-hero .cta .btn{justify-content:center;text-align:center;inline-size:100%;box-sizing:border-box}
@media(max-width:700px){.unit-hero .cta{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,max-content)}}

/* Al Waseel banner: show the canopy above the vans */
[data-route="unit-waseel.html"] .unit-hero .phimg{object-position:50% 30%!important}

/* Home careers band: frame the desk, phone and laptop rather than the face */
[data-route="index.html"] .band.ph .phimg{object-position:50% 92%!important}

/* Contact: head office photo shows the top of the tower */
[data-route="contact.html"] .ph.rise .phimg{object-position:50% 8%!important}

/* Contact banner: the tower entrance and its name */
[data-route="contact.html"] .unit-hero .phimg{object-position:50% 50%!important}

/* ================= v207 ================= */
/* legal pages */
.route[data-route="privacy.html"] .legal a,.route[data-route="terms.html"] .legal a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.route[data-route="privacy.html"] .legal li,.route[data-route="terms.html"] .legal li{margin-block-end:8px}
.route[data-route="privacy.html"] .legal h2,.route[data-route="terms.html"] .legal h2{margin-block:44px 18px}
.route[data-route="privacy.html"] .legal h2:first-child,.route[data-route="terms.html"] .legal h2:first-child{margin-block-start:0}
@media(max-width:820px){.route[data-route="privacy.html"] .legal h2,.route[data-route="terms.html"] .legal h2{font-size:22px!important;line-height:1.2!important;margin-block:36px 14px}}
/* "Read the story" links: arrow everywhere */
.go::after{content:"\2192"!important;display:inline-block!important;margin-inline-start:8px!important}

/* "Read the story →": same style as "Explore →" (sentence case, no capitals) */
.newsteaser .go,.nx .go,[data-route="news.html"] .go,.route .go{text-transform:none!important;font-size:14.5px!important;font-weight:600!important;letter-spacing:normal!important}

/* Our Story banner: show the dhow hulls, not just the masts */
[data-route="about.html"] .hero .phimg{object-position:50% 72%!important}

/* v208: Our Story archive photo without blue bands; Home founder photo without overlay */
[data-route="about.html"] .story-fig .frame{aspect-ratio:auto!important;background:none!important;display:block!important}
#story-teaser .ph:has(.appr-img)::before,#story-teaser .ph:has(.appr-img)::after{display:none!important}

/* founder banner: wider KUNA/UN frame */
[data-route="founder.html"] .hero .phimg{object-position:50% 0%!important}
@media (max-width:700px){[data-route="founder.html"] .hero .phimg{object-position:57% 0%!important}}

/* v209: founder portrait as a framed photo, same height as the text on desktop */
[data-route="founder.html"] .fsplit{align-items:stretch!important}
@media(min-width:821px){[data-route="founder.html"] .fsplit{grid-template-columns:minmax(0,1fr) 330px!important;column-gap:72px!important}}
[data-route="founder.html"] .portrait{position:relative;margin:0;min-block-size:320px;align-self:stretch}
[data-route="founder.html"] .portrait img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 30%;border-radius:var(--r);border:1px solid var(--line);-webkit-mask:none!important;mask:none!important;background:none!important}
@media(max-width:820px){[data-route="founder.html"] .portrait{min-block-size:0}[data-route="founder.html"] .portrait img{position:static;block-size:auto;aspect-ratio:4/5}}

/* v209: colour library photos */
img[data-lib]{filter:none!important}
[data-route="responsibility.html"] img[data-lib="A"]{object-position:50% 45%!important}

/* v210: About Us tabs as a 2x2 grid on phones so all four are visible */
@media(max-width:600px){
 .whotabs .wrap{display:grid!important;grid-template-columns:1fr 1fr;column-gap:16px!important;row-gap:0!important;overflow:visible!important}
 .whotabs a{white-space:nowrap!important;padding-block:11px 9px!important;justify-self:start}
}
@media(max-width:359px){.whotabs a{font-size:13px!important}.whotabs .wrap{column-gap:10px!important}}

/* v211: balanced heading lines (no single word left alone) */
h1,h2,h3{text-wrap:balance}
/* v211: larger tap area for Directions links, same look and position */
.mapln{position:relative}
.mapln::after{content:"";position:absolute;inset:-11px -6px}
/* v211: About Us tabs on phone, centred in each half */
@media(max-width:600px){.whotabs .wrap{grid-template-columns:1fr 1fr!important;column-gap:0!important}
.whotabs a{justify-self:stretch!important;text-align:center;padding-block:14px 12px!important}
.whotabs a[aria-current="page"]::after{inset-inline:22%!important}}
/* v212: heading levels (look unchanged) */
.locs h3{text-wrap:wrap;line-height:1.08}
.news h2{line-height:1.2}

/* news list pagination (10 per page) */
.news li[hidden]{display:none!important}
.npag{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-block-start:36px}
.npag button{min-inline-size:44px;block-size:44px;padding-inline:14px;border:1px solid var(--line);background:var(--white);color:var(--ink);font:inherit;font-size:15px;font-weight:600;border-radius:4px;cursor:pointer}
.npag button:hover{border-color:var(--petrol);color:var(--petrol)}
.npag button[aria-current="page"]{background:var(--petrol);border-color:var(--petrol);color:#fff}
.npag button[disabled]{opacity:.35;cursor:default}
.fdl{display:block;inline-size:100%;aspect-ratio:16/9;background:center/contain no-repeat}.nlogo .fdls{display:block;inline-size:100%;block-size:100%;background:center/cover no-repeat}.nimg.nph{position:relative;overflow:hidden;background:var(--line)}.nimg.nph img.phimg{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;display:block}.nimg.nph .nbadge{position:absolute;inset-inline-start:8px;inset-block-end:8px;background:#fff;border-radius:4px;padding:6px 10px;display:flex;align-items:center;gap:8px;box-shadow:0 1px 4px rgba(0,0,0,.2);max-inline-size:calc(100% - 16px)}.nimg.nph .nbadge .ximg{block-size:30px!important}.nimg.nph .nbadge .ximg.x40{block-size:40px!important}.nimg.nph .nbadge img{block-size:44px;inline-size:auto;max-inline-size:150px;position:static!important;object-fit:contain}.nimg.nph .nbadge .fdls{background-size:contain!important;background:center/cover no-repeat;display:block;inline-size:72px;block-size:40px;background-size:cover;background-position:center}.news[tabindex]:focus{outline:none}.npag-live{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.cbtns{display:flex;flex-wrap:wrap;gap:12px}.pr-cover .frame{position:relative}.pr-cover .frame .fdl{position:absolute;inset:0;inline-size:100%;block-size:100%;aspect-ratio:auto;background-color:#fff;background-size:contain;background-origin:content-box;padding:14% 22%;box-sizing:border-box}.jobs .job{flex-wrap:wrap;align-items:flex-start;row-gap:0}.job-main{flex:1;min-inline-size:0}.jobs .job>.btn{align-self:flex-start}.jd{flex:0 0 100%;grid-column:1/-1;inline-size:100%}.jd{margin-block-start:6px}.jd summary{cursor:pointer;color:var(--petrol);font-weight:600;font-size:14.5px;list-style:none;display:inline-flex;align-items:center;gap:6px}.jd summary::-webkit-details-marker{display:none}.jd summary::after{content:"";inline-size:7px;block-size:7px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}.jd[open] summary::after{transform:rotate(-135deg) translateY(-1px)}.jd[open] summary{margin-block-end:14px}.jd-b{max-inline-size:680px;color:var(--slate);font-size:15.5px;line-height:1.65}.jd-lead{margin:0 0 14px;color:var(--ink)}.jd-b h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--petrol);margin:18px 0 8px}.jd-b ul{margin:0;padding-inline-start:20px}.jd-b li{margin:0 0 6px}/* ---------- milestones: scroll-driven, v217 (26 Oct 2026) ----------   The heading, the timeline and the progress bar stay pinned together, centred in the space   under the menu; scrolling down slides the timeline sideways; the arrows step one milestone. */#milestones .tline.pin .pin-box{position:sticky;top:var(--pin-top,150px);z-index:1;background:var(--white,#fff)}#milestones .tline.pin .fs-scroll{overflow:hidden;scroll-snap-type:none}#milestones .tline.pin .fs-arrow{inset-block-start:calc((var(--ms-h2,34px) - 42px)/2)!important}.nimg.nph .nbadge .fdls{inline-size:44px!important;block-size:44px!important}.nimg.nph .nbadge{block-size:52px;box-sizing:border-box}.nimg.nph .nbadge .fdls{inline-size:40px!important;block-size:40px!important}.nimg.nph .nbadge img{block-size:40px!important}.pr-logo .pl-fdl{inline-size:36%;block-size:auto;aspect-ratio:1/1;background-size:contain!important;background-position:center!important;mix-blend-mode:multiply}.pr-logo .pl-kerf{inline-size:76%;block-size:auto;max-block-size:62%;object-fit:contain;mix-blend-mode:multiply}.route[data-route="careers.html"] p.fraud{max-inline-size:640px;margin:28px 0 0;padding:16px 20px;background:var(--paper,#f6f8f9);border-inline-start:3px solid var(--petrol);border-radius:4px;font-size:15px;line-height:1.6;color:var(--slate)}.route[data-route="careers.html"] p.fraud b{color:var(--ink)}.route[data-route="careers.html"] p.fraud a{color:var(--petrol);text-decoration:underline}.jobs .nojobs{display:none;margin:0;padding:22px 26px;color:var(--slate);font-size:16px}.jobs:not(:has(.job)) .nojobs{display:block}form.fcv[hidden]{display:none!important}.applying{max-inline-size:640px;margin:0 0 22px;padding:12px 16px;background:#EEF3F6;border-radius:4px;font-size:15.5px;color:var(--ink);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}.applying[hidden]{display:none}.applying-x{border:0;background:none;padding:0;font:inherit;font-size:14.5px;font-weight:600;color:var(--petrol);text-decoration:underline;text-underline-offset:3px;cursor:pointer}form.fcv .ferr{display:block;margin-top:6px;font-size:13.5px;color:#B42318}form.fcv [aria-invalid="true"]{border-color:#B42318!important;box-shadow:0 0 0 1px #B42318}form.fcv .filepick.bad{border-color:#B42318!important;background:#FEF3F2}.fsent{max-inline-size:640px;padding:28px 30px;border:1px solid var(--line);border-inline-start:4px solid var(--teal,#4a8a8f);border-radius:4px;background:#fff}.fsent h3{margin:0 0 8px;font-size:22px;color:var(--ink)}.fsent p{margin:0 0 16px;color:var(--slate);font-size:16px;line-height:1.6}.fsent[hidden]{display:none}