/* ============================================================
   MERSAAD  |  Home page draft
   Brand system from MERSAAD_Website_Scope (Design System tab)
   Layout language after the Sonne solar / renewable Elementor kit
   ============================================================ */

:root{
  --calcium:#F2FBFF;
  --ocean:#002333;
  --carbon:#000F16;
  --sea:#59B9C5;
  /* X-01. Sea Serpent is a fill, a stroke, a hover, a border and an icon
     colour. It is NEVER a text colour on Calcium White or white; the fourth
     time this failure appeared in review, the reviewer asked for it to be a
     system rule rather than a fourth individual fix. Use --text-accent-light
     for accent text on light grounds; use --sea for everything else. */
  --text-accent-light:#002333;
  --french:#9CCFDC;
  --pacific:#B9D8E2;

  --ink:#0A1A22;
  --ink-soft:#41616E;
  --line:rgba(0,35,51,.12);
  --line-dark:rgba(185,216,226,.16);

  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;

  --shell:1240px;
  --gut:clamp(20px,5vw,48px);
  --sect:clamp(56px,6vw,92px);

  --f-head:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* N-09. Each mark is embedded once and referenced from here. The wordmark
     was inlined three times and the KFUPM mark twice, at 120KB a copy. */
  --logo:url("../img/ede1ad6d2755.webp");--logo-l:url("../img/c0e4b6a437ff.webp");
  --kfupm:url("../img/7fdf3588b47e.webp");--dtv:url("../img/aabeae5ddd9d.webp");
  --ar-logo:2957/450;--ar-kfupm:4810/1525;--ar-dtv:279/112;

  --cta-bg:url("../img/98a6be13a149.webp");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-block-start:96px}
body{
  margin:0;
  background:var(--calcium);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0}
p{margin:0}
::selection{background:var(--sea);color:var(--carbon)}

/* D-05: a designed focus ring, not the browser default */
:focus-visible{outline:2px solid var(--sea);outline-offset:2px;border-radius:4px}
.skip{
  position:absolute;inset-block-start:-100px;inset-inline-start:16px;z-index:200;
  background:var(--sea);color:var(--carbon);font-family:var(--f-head);font-weight:600;font-size:14px;
  padding:12px 18px;border-radius:0 0 10px 10px;transition:inset-block-start .2s;
}
.skip:focus{inset-block-start:0}
/* N-11. The newsletter label was reusing .skip, which carries a Sea Serpent
   fill and a focus rule that slides the element into view. It worked only
   because a label cannot take focus. This is the plain utility it wanted. */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--gut)}
.sect{padding:var(--sect) 0}

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-head);font-weight:600;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ocean);
  margin-block-end:20px;
}
.eyebrow::before{
  content:"";width:14px;height:16px;background:var(--sea);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  flex:none;
}
/* D-02: Sea Serpent only clears AA on the dark grounds */
/* Sea Serpent measured 7.12:1 on Deep Ocean, which passes, but at 12.5px in
   tracked caps it still reads as faint. French Pass is the documented token
   for a secondary label, it takes the same pairing to 9.6:1, and a little
   more size and weight does the rest. Sea Serpent stays for actions. */
.on-dark .eyebrow,.lines .eyebrow,.research .eyebrow{
  color:var(--french);font-size:13px;font-weight:700;
}
.h-xl{font-size:clamp(38px,6.4vw,68px);font-weight:800;line-height:1.03}
.h-lg{font-size:clamp(30px,4.2vw,44px);font-weight:700}
.h-md{font-size:clamp(21px,2.4vw,27px);font-weight:700}
.lead{font-size:clamp(17px,1.5vw,19.5px);line-height:1.65;max-width:62ch}
.muted{color:var(--ink-soft)}
.on-dark .muted,.on-dark p{color:rgba(242,251,255,.78)}

.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--f-head);font-weight:600;font-size:15px;letter-spacing:.01em;
  padding:15px 22px 15px 26px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s;
  white-space:nowrap;
}
@media(max-width:360px){
  .btn{white-space:normal;padding-inline:18px 16px;text-align:start}
}
.btn .arw{
  width:30px;height:30px;border-radius:50%;flex:none;
  display:grid;place-items:center;transition:transform .3s,background .25s;
}
.btn:hover .arw{transform:translateX(3px)}
.btn svg{width:13px;height:13px}
.btn-primary{background:var(--sea);color:var(--carbon)}
.btn-primary .arw{background:rgba(0,15,22,.14)}
.btn-primary:hover{background:var(--french)}
.btn-ghost-dark{border-color:rgba(185,216,226,.42);color:var(--calcium)}
.btn-ghost-dark .arw{background:rgba(242,251,255,.12)}
.btn-ghost-dark:hover{border-color:var(--french);background:rgba(89,185,197,.14)}
.btn-ghost-light{border-color:rgba(0,35,51,.22);color:var(--ocean)}
.btn-ghost-light .arw{background:rgba(0,35,51,.08)}
.btn-ghost-light:hover{border-color:var(--sea);background:rgba(89,185,197,.12)}

.tlink{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-head);font-weight:600;font-size:14.5px;color:var(--sea);
}
.tlink svg{width:13px;height:13px;transition:transform .3s}
.tlink:hover svg{transform:translateX(4px)}

/* reveal */
html:not(.no-js) .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
html:not(.no-js) .rv.in{opacity:1;transform:none}

/* ============ HEADER ============ */
/* The header never becomes a solid bar. Scrolled, it is glass: enough blur and
   tint to keep the type legible, little enough that the page keeps moving
   underneath it. Because the page alternates dark and light grounds, it also
   flips its own colours to whichever section is passing beneath it. */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:80;padding:18px 0;
  /* The text colour flips the instant the ground changes, but the glass was
     cross fading over .4s, so for about two tenths of a second at a section
     boundary you got dark type on a still dark panel. Measured at 1.53:1.
     The glass now catches up in .12s: still a fade rather than a hard cut,
     but the illegible middle is gone. Padding and shadow keep the long ease. */
  transition:background .12s linear,padding .35s,box-shadow .4s,backdrop-filter .4s,color 0s;
}
.hdr.stuck{
  padding:11px 0;
  background:rgba(0,15,22,.68);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 1px 0 rgba(185,216,226,.12);
}
.hdr.stuck.mixed{background:rgba(0,15,22,.86)}
.hdr.stuck.on-light.mixed{background:rgba(242,251,255,.94)}
.hdr.stuck.on-light{
  background:rgba(242,251,255,.86);
  box-shadow:0 1px 0 rgba(0,35,51,.1);
}
/* over a light section the type and the wordmark invert */
.hdr.on-light .nav a{color:var(--ocean)}
.hdr.on-light .nav a:hover{color:var(--ocean);background:rgba(0,35,51,.07)}
.hdr.on-light .nav a.on{color:var(--ocean);background:rgba(89,185,197,.3)}
.hdr.on-light .burger span{background:var(--ocean)}
.brand-l{position:absolute;inset-block-start:0;inset-inline-start:0;opacity:0}
.hdr.on-light .brand-l{opacity:1}
.hdr.on-light .brand-d{opacity:0}

.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
/* With Home gone from the nav the logo carries that job alone, so it needs to
   look interactive rather than decorative. */
.brand{flex:none;display:block;position:relative;transition:opacity .25s}
.brand:hover{opacity:.78}
.brand:focus-visible{outline-offset:6px}
.brand .mark{
  display:block;height:48px;aspect-ratio:var(--ar-logo);
  background:var(--logo) no-repeat center/contain;transition:height .35s,opacity .4s;
}
.brand .brand-l{background-image:var(--logo-l)}
.hdr.stuck .brand .mark{height:40px}
.nav{display:flex;align-items:center;gap:6px}
.nav a{
  font-family:var(--f-head);font-weight:500;font-size:14.5px;color:var(--calcium);
  padding:9px 11px;border-radius:999px;white-space:nowrap;
  /* X-12. Color transition removed. The header background transitions in .12s;
     if nav color also transitions, some crossings dropped to 1.7:1 mid-flip.
     Snapping color instant means text polarity always arrives before or with
     the background, never after. Background stays smooth for hover feedback. */
  transition:background .18s;
}
.nav a:hover{color:var(--calcium);background:rgba(242,251,255,.09)}
.nav a.on{color:var(--calcium);background:rgba(89,185,197,.2)}
.hdr .btn{padding:12px 18px 12px 22px;font-size:14.5px}
.hdr .btn .arw{width:26px;height:26px}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--calcium);border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .2s}
.burger span+span{margin-block-start:5px}
/* D-01: the burger becomes the close control, and sits above the panel */
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-open{overflow:hidden}

/* Home is back, so the seven item nav needs its width again: below this the
   bar would crowd the Contact us button. Measured, not guessed. */
@media(max-width:1260px){
  .nav{
    position:fixed;inset:0 0 auto 0;padding:96px 24px 28px;z-index:110;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--carbon);border-block-end:1px solid var(--line-dark);
    transform:translateY(-102%);transition:transform .4s cubic-bezier(.2,.7,.3,1);
  }
  .nav.open{transform:none}
  .nav a{padding:14px 6px;font-size:17px;border-radius:8px}
  .burger{display:block;order:3;position:relative;z-index:120}
  /* D-04: the primary action stays reachable without opening the menu */
  .hdr .btn{padding:10px 14px;font-size:13.5px}
  .hdr .btn .arw{display:none}
}
/* N-01. .hdr.stuck .brand .mark is three classes deep, so it outranked the
   single class rules below and the logo snapped back to 40px the moment the
   page scrolled, pushing the burger off the screen. Every small screen size
   now declares its own stuck height at matching specificity. */
@media(max-width:520px){
  .hdr-in{gap:8px}
  .brand .mark{height:32px}
  .hdr.stuck .brand .mark{height:28px}
  .hdr .btn{padding:9px 12px;font-size:12.5px}
  .burger{padding:8px 6px}
}
@media(max-width:380px){
  .brand .mark{height:26px}
  .hdr.stuck .brand .mark{height:23px}
  .hdr .btn{padding:8px 10px;font-size:11.5px}
  .burger{padding:8px 6px}
  .hdr{padding:14px 0}
}

/* ============ HERO ============ */
.hero{
  position:relative;background:var(--carbon);color:var(--calcium);overflow:hidden;
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
}
/* photograph, graded into the brand palette */
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:saturate(.95) contrast(1.05) brightness(.98);
  transform:scale(1);transform-origin:52% 62%;will-change:transform;
}
/* very slow push into the frame, near linear, comes to rest. no loop */
.hero-media.zoom img{
  transform:scale(1.26);
  /* linear, so the drift stays at a constant, noticeable rate rather than
     doing most of its travel early and then creeping */
  transition:transform 38s linear;
}
.hero-media .grade{
  position:absolute;inset:0;background:var(--ocean);
  mix-blend-mode:soft-light;opacity:.3;
}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:1;z-index:2;pointer-events:none}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(to bottom,rgba(0,15,22,.78) 0%,rgba(0,15,22,.32) 12%,transparent 26%),
    radial-gradient(110% 80% at 80% 12%,rgba(89,185,197,.14),transparent 62%),
    linear-gradient(100deg,rgba(0,15,22,.9) 8%,rgba(0,15,22,.56) 38%,rgba(0,15,22,.12) 72%,rgba(0,15,22,.24) 100%),
    /* the photograph dissolves into the page rather than stopping at an edge */
    linear-gradient(to top,var(--carbon) 0%,rgba(0,15,22,.92) 9%,rgba(0,15,22,.55) 20%,rgba(0,15,22,.18) 32%,transparent 52%);
}
.hero-in{position:relative;z-index:3;padding-top:clamp(150px,18vw,210px);padding-bottom:clamp(80px,10vw,132px);flex:1;display:flex;flex-direction:column;justify-content:center}
.hero h1{max-width:15ch}
.hero h1 em{font-style:normal;color:var(--sea)}
.hero .lead{margin-block-start:26px;color:rgba(242,251,255,.8);max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-block-start:38px}


/* ============ PARTNER STRIP ============ */
/* The KFUPM agreement is the strongest trust signal MERSAAD has and it sits
   four and a half screens down, so this repeats it on the first scroll.

   Set in type, not in logos, for two reasons. The DTV file is 279px wide in
   total, so its strapline renders at 2.7px in a bar this height and cannot be
   rescued by making the bar taller. And keeping the marks to a single
   appearance, in the research section where they are large enough to read,
   respects both brands more than showing them twice badly. */
.strip{background:var(--ocean);border-block-end:1px solid rgba(185,216,226,.12);padding:22px 0}
.strip-in{display:flex;align-items:baseline;gap:clamp(14px,2.2vw,26px);flex-wrap:wrap}
.strip-lab{
  font-family:var(--f-head);font-weight:600;font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(185,216,226,.74);flex:none;
}
.strip-names{
  flex:1;min-width:250px;font-family:var(--f-head);font-weight:600;
  font-size:clamp(15px,1.45vw,17px);line-height:1.45;color:var(--calcium);
}
.strip-names span{color:rgba(185,216,226,.7);font-weight:500}
.strip-link{
  display:inline-flex;align-items:center;gap:9px;flex:none;min-height:44px;text-decoration:none;
  font-family:var(--f-head);font-weight:600;font-size:14.5px;color:var(--sea);
  transition:color .25s;
}
.strip-link svg{width:14px;height:14px;transition:transform .3s}
.strip-link:hover{color:var(--calcium)}
.strip-link:hover svg{transform:translateY(2px)}
@media(max-width:720px){
  .strip{padding:18px 0}
  .strip-lab{width:100%}
  .strip-link{width:100%}
}

/* ============ THE SHIFT ============ */
/* Four plates, one per state of the carbon atom. Every plate is drawn live
   on canvas: a free molecule, a dissolved ion and a forming nucleus cannot
   be photographed, and the fourth grows into rock in front of you. */
.shift{background:var(--calcium)}
.shift-head{max-width:62ch;margin-block-end:clamp(30px,4vw,46px)}
.pl-strip{display:flex;gap:9px;height:clamp(320px,42vw,460px)}
.pl-cell{
  position:relative;flex:0 1 78px;min-width:58px;border:0;padding:0;cursor:pointer;
  border-radius:var(--r-md);overflow:hidden;background:var(--carbon);
  box-shadow:0 24px 50px -34px rgba(0,35,51,.6);
  transition:flex-grow .55s cubic-bezier(.2,.7,.3,1),flex-basis .55s cubic-bezier(.2,.7,.3,1);
}
.pl-cell.on{flex:1 1 auto}
.pl-img{position:absolute;inset:0;background-size:cover;background-position:center}
.pl-cell:not(.on) .fld{opacity:.5}
.pl-cell::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(transparent 34%,rgba(0,15,22,.86))}
.p1{background-image:linear-gradient(180deg,#000D14 0%,#00141F 52%,#002432 100%)}
.p2{background-image:linear-gradient(180deg,#001320 0%,#002435 46%,#003348 100%)}
.p3{background-image:linear-gradient(180deg,#001B29 0%,#003043 40%,#013F55 100%)}
.p4{background-image:linear-gradient(180deg,#00202E 0%,#01394D 44%,#02506A 100%)}
.fld{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;display:block;
  transition:opacity .5s}
.pl-num{
  position:absolute;inset-block-start:13px;inset-inline-start:13px;z-index:4;
  width:26px;height:30px;display:grid;place-items:center;background:rgba(0,15,22,.62);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  font-family:var(--f-head);font-weight:700;font-size:12.5px;color:var(--calcium);
}
.pl-cell.on .pl-num{background:var(--sea);color:var(--carbon)}
.pl-vert{
  position:absolute;inset-block-end:16px;inset-inline-start:50%;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;z-index:4;font-family:var(--f-head);font-weight:700;font-size:12.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--calcium);white-space:nowrap;transition:opacity .3s;
}
.pl-cell.on .pl-vert{opacity:0}
.pl-body{
  position:absolute;inset-inline:0;inset-block-end:0;z-index:4;padding:clamp(18px,2vw,26px);text-align:start;
  opacity:0;transform:translateY(10px);transition:opacity .4s .16s,transform .4s .16s;
}
.pl-cell.on .pl-body{opacity:1;transform:none}
.pl-body b{display:block;font-family:var(--f-head);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sea)}
.pl-body i{display:block;font-style:normal;font-family:var(--f-head);font-weight:700;font-size:clamp(17px,2vw,21px);color:var(--calcium);margin-block-start:8px}
.pl-body em{display:block;font-style:normal;font-size:14.5px;color:rgba(242,251,255,.78);margin-block-start:6px;max-width:44ch}
.shift-note{margin-block-start:24px;font-size:14px;color:var(--ink-soft);display:flex;align-items:flex-start;gap:9px}
.shift-note s{text-decoration:none;width:9px;height:10px;margin-block-start:6px;background:var(--sea);flex:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
@media(max-width:640px){
  .pl-strip{flex-direction:column;height:auto}
  .pl-cell{flex:0 0 66px;min-height:66px}
  .pl-cell.on{flex:0 0 290px}
  .pl-vert{writing-mode:horizontal-tb;transform:translateX(-50%);inset-block-end:auto;inset-block-start:24px}
}


/* ============ PRODUCT LINES ============ */
.lines{background:var(--ocean);color:var(--calcium);position:relative;overflow:hidden}
.lines::before{
  content:"";position:absolute;right:-14%;top:-18%;width:56vw;height:56vw;
  background:radial-gradient(circle,rgba(89,185,197,.16),transparent 62%);
}
.lines .shell{position:relative;z-index:2}
.lines-head{max-width:44ch;margin-block-end:clamp(38px,5vw,58px)}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,30px)}
.card{
  background:rgba(242,251,255,.045);border:1px solid var(--line-dark);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .3s,background .3s;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);border-color:rgba(89,185,197,.5);background:rgba(242,251,255,.07)}
.card-art{position:relative;aspect-ratio:16/9;background:var(--carbon);display:grid;place-items:center;overflow:hidden}
.card-art img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.05) brightness(.84)}
.card-art canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.card-art::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(0,15,22,.5) 100%);
}
.card:hover .card-art img{transform:scale(1.03)}
.card-art img{transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.card-slot{
  position:absolute;left:18px;top:18px;z-index:2;
  font-family:var(--f-head);font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(185,216,226,.72);background:rgba(0,15,22,.62);
  border:1px solid rgba(185,216,226,.24);padding:6px 10px;border-radius:999px;
}
.card-body{padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:14px;flex:1}
.card h3{font-size:clamp(26px,3vw,34px)}
.card .desc{font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--sea);letter-spacing:.01em}
.card p{font-size:16.5px;color:rgba(242,251,255,.76)}
.card .tlink{margin-block-start:auto;padding-top:8px}
@media(max-width:860px){.cards{grid-template-columns:1fr}}

/* ============ WHY ============ */
.why{background:var(--calcium)}
.why-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-block-end:clamp(38px,5vw,56px);flex-wrap:wrap}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px)}
.why-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(26px,2.8vw,36px);position:relative;overflow:hidden;
  transition:transform .35s,box-shadow .35s,border-color .35s;
}
.why-item:hover{transform:translateY(-5px);box-shadow:0 22px 46px -30px rgba(0,35,51,.45);border-color:rgba(89,185,197,.5)}
/* hexagon badge with a line icon, one family, one weight */
.why-ico{
  width:56px;height:63px;margin-block-end:22px;
  display:grid;place-items:center;
  background:rgba(89,185,197,.18);color:var(--ocean);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transition:background .32s,color .32s;
}
.why-ico svg{width:26px;height:26px;display:block}
.why-item:hover .why-ico{background:var(--sea);color:var(--carbon)}
.why-item h3{font-size:21px;margin-block-end:12px;color:var(--ocean)}
.why-item p{font-size:16.5px;color:var(--ink-soft)}
.why-item::after{
  content:"";position:absolute;right:0;top:0;height:3px;width:0;
  background:var(--sea);transition:width .45s cubic-bezier(.2,.7,.3,1);
}
.why-item:hover::after{width:100%;right:auto;left:0}
@media(max-width:900px){.why-grid{grid-template-columns:1fr}}

/* ============ RESEARCH ============ */
.research{background:var(--carbon);color:var(--calcium);position:relative;overflow:hidden}
.research::before{
  content:"";position:absolute;left:-10%;bottom:-40%;width:52vw;height:52vw;
  background:radial-gradient(circle,rgba(89,185,197,.13),transparent 64%);
}
.research .shell{position:relative;z-index:2}
.res-head{max-width:56ch}
.res-head p{font-size:17.5px;color:rgba(242,251,255,.8);margin-block-start:22px}
.partners{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,30px);margin-block-start:clamp(38px,4.4vw,58px)}
.partner{
  margin:0;border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;
  background:rgba(242,251,255,.045);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),border-color .3s,background .3s;
}
.partner:hover{transform:translateY(-5px);border-color:rgba(89,185,197,.5);background:rgba(242,251,255,.07)}
/* each mark keeps its own colours on a light plate */
.partner .plate{background:var(--calcium);padding:30px 34px;display:grid;place-items:center;min-height:152px}
/* each lockup sized to its own proportions so the two read at the same optical weight */
/* the marks appear once, here, at a size where their secondary lines read */
.pm{display:block;background-repeat:no-repeat;background-position:center;background-size:contain}
.pm-k{background-image:var(--kfupm);aspect-ratio:var(--ar-kfupm)}
.pm-d{background-image:var(--dtv);aspect-ratio:var(--ar-dtv)}
/* X-03. Height-first at wide screens, width-capped at narrow ones. Before
   this, KFUPM at 92px x 3.15:1 = 290px inside a 278px plate at 320px viewport
   pushed the card off screen. Below the breakpoint, marks shrink to fit the
   plate rather than fixing height. */
.partner .plate .pm-k{height:92px}
.partner .plate .pm-d{height:74px}
@media(max-width:420px){
  .partner .plate .pm{
    height:auto;inline-size:calc(100% - 24px);max-block-size:80px;
    background-size:contain;
  }
}
.partner .pbody{padding:24px clamp(22px,2.4vw,30px) 28px}
.partner .pbody h3{font-size:19px;margin-block-end:6px;color:var(--calcium)}
.partner .pbody p{font-size:15px;color:rgba(242,251,255,.66)}
.ptag{
  display:inline-block;margin-block-start:16px;
  font-family:var(--f-head);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--sea);border:1px solid rgba(89,185,197,.4);border-radius:999px;padding:6px 12px;
}
@media(max-width:820px){.partners{grid-template-columns:1fr}}

/* ============ OPPORTUNITY ============ */
.opp{background:var(--calcium)}
.opp-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,6vw,76px);align-items:center}
.opp p{font-size:17.5px;color:var(--ink-soft)}
.stat{
  border-inline-start:3px solid var(--sea);padding:6px 0 6px 26px;margin-block-end:30px;
}
.stat b{
  display:flex;align-items:baseline;gap:2px;font-family:var(--f-head);font-weight:800;
  font-size:clamp(56px,8.5vw,92px);line-height:1;color:var(--ocean);letter-spacing:-.03em;
}
.stat b i{font-style:normal;font-size:.44em;font-weight:700;color:var(--ocean);opacity:.55;letter-spacing:0}
.stat>span{display:block;margin-block-start:12px;font-size:16.5px;color:var(--ink-soft);max-width:34ch}
/* the source note under the opportunity paragraph. Same visual language as
   the .src line on the Impact page, so a reader who sees both pages reads
   'source note' rather than two different marks. */
.opp-src{
  margin-block-start:18px;font-size:13.5px;color:rgba(0,35,51,.7);
  display:flex;align-items:flex-start;gap:9px;
}
.opp-src s{
  text-decoration:none;width:9px;height:10px;margin-block-start:5px;flex:none;
  background:var(--sea);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.opp-art{margin-block-start:38px;max-width:340px;opacity:.9}
@media(max-width:900px){.opp-grid{grid-template-columns:1fr}}

/* ============ WHERE WE ARE ============ */
.where{
  background:
    radial-gradient(120% 90% at 78% 30%, rgba(89,185,197,.15), transparent 62%),
    linear-gradient(180deg, var(--ocean) 0%, var(--carbon) 100%);
  color:var(--calcium);overflow:hidden;
}
.where-grid{
  display:grid;grid-template-columns:.82fr 1.18fr;
  grid-template-areas:"copy map" "list map";
  grid-template-rows:auto 1fr;
  column-gap:clamp(36px,5.5vw,70px);row-gap:0;align-items:start;
}
.w-copy{grid-area:copy}
.w-list{grid-area:list}
.w-map{grid-area:map;align-self:center}
.where p{color:rgba(242,251,255,.76);font-size:17.5px;margin-block-start:22px;max-width:44ch}

.where-list{list-style:none;margin-block-start:34px;display:grid;gap:2px}
.where-list li{
  display:grid;gap:4px;padding:16px 0 16px 22px;position:relative;
  border-block-start:1px solid rgba(156,207,220,.16);
}
.where-list li:last-child{border-block-end:1px solid rgba(156,207,220,.16)}
.where-list li::before{
  content:"";position:absolute;inset-inline-start:0;inset-block-start:23px;
  width:9px;height:10px;background:var(--sea);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.where-list li:not(.is-here)::before{background:rgba(156,207,220,.42)}
.where-list b{font-family:var(--f-head);font-weight:700;font-size:16.5px;color:var(--calcium);letter-spacing:-.01em}
.where-list span{font-size:15px;color:rgba(242,251,255,.62)}

/* the map plate */
.where-map{position:relative;width:100%;aspect-ratio:1000/818}
/* the neighbourhood dissolves at the frame edge rather than being sliced off */
.where-map canvas{
  position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:radial-gradient(118% 112% at 62% 44%,#000 52%,rgba(0,0,0,.35) 78%,transparent 100%);
  mask-image:radial-gradient(118% 112% at 62% 44%,#000 52%,rgba(0,0,0,.35) 78%,transparent 100%);
}

/* the marker sits in percentage space so it tracks the canvas at any width */
.where-pin{position:absolute;transform:translate(-50%,-50%);z-index:3}
.wp-hit{
  appearance:none;background:none;border:0;padding:0;cursor:pointer;display:block;
  width:44px;height:44px;border-radius:50%;position:relative;
}
.wp-dot{
  position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);
  width:12px;height:12px;border-radius:50%;background:var(--sea);
  box-shadow:0 0 0 4px rgba(89,185,197,.24),0 0 20px 4px rgba(89,185,197,.55);
}
.wp-ring{
  position:absolute;inset:50% auto auto 50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;border:1.5px solid var(--sea);opacity:0;
  animation:wpPulse 3.2s cubic-bezier(.2,.6,.3,1) infinite;
}
.wp-ring:nth-of-type(3){animation-delay:1.6s}
@keyframes wpPulse{
  0%{transform:scale(1);opacity:.75}
  70%{opacity:0}
  100%{transform:scale(4.6);opacity:0}
}
/* the label, always readable, lifts on hover or focus */
.wp-card{
  position:absolute;inset-block-end:calc(100% - 2px);inset-inline-start:50%;
  transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  background:rgba(0,15,22,.86);border:1px solid rgba(89,185,197,.4);
  border-radius:12px;padding:9px 14px;text-align:start;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s;
}
.wp-card b{display:block;font-family:var(--f-head);font-weight:700;font-size:14.5px;color:var(--calcium)}
.wp-card i{display:block;font-style:normal;font-size:12.5px;color:var(--french);margin-block-start:2px}
.wp-hit:hover .wp-card,.wp-hit:focus-visible .wp-card{
  transform:translateX(-50%) translateY(-6px);box-shadow:0 14px 34px rgba(0,0,0,.5);
}

/* a quiet scale note under the plate */
.where-note{
  margin-block-start:18px;font-size:13.5px;color:rgba(242,251,255,.66);
  display:flex;align-items:flex-start;gap:9px;
}
.where-note s{
  text-decoration:none;width:9px;height:10px;margin-block-start:5px;background:var(--sea);flex:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

@media(max-width:900px){
  /* on a phone the map lands between the argument and the detail */
  .where-grid{grid-template-columns:1fr;grid-template-areas:"copy" "map" "list";row-gap:34px}
  .where-list{margin-block-start:0}
  .w-map{align-self:auto}
}

/* ============ SECTION LINK ============ */
/* Every section that maps to a page in the Site Map carries one of these, so
   a visitor can reach that page from the content rather than only from the
   header or the footer. Same shape everywhere, so it is recognisable. */
.more{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:13px;text-decoration:none;
  font-family:var(--f-head);font-weight:600;font-size:15.5px;color:var(--ocean);
  min-height:52px;padding:8px 12px 8px 24px;border-radius:999px;
  border:1px solid rgba(0,35,51,.24);
  transition:color .3s,border-color .3s;
}
/* the rule sweeps across on hover, the same idea as the News cards */
.more::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--sea);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.more:hover,.more:focus-visible{color:var(--carbon);border-color:var(--sea)}
.more:hover::before,.more:focus-visible::before{transform:scaleX(1)}
.more i{
  font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  border:1px solid rgba(0,35,51,.24);
  transition:background .3s,border-color .3s,color .3s,transform .3s;
}
.more svg{width:14px;height:14px}
.more:hover i,.more:focus-visible i{background:var(--carbon);border-color:var(--carbon);color:var(--sea);transform:translateX(3px)}
/* Dark grounds. `.lines` and `.research` are dark sections that do not carry
   the on-dark class (see the eyebrow rule above, same enumeration): without
   them here `.more` renders ocean-on-ocean and vanishes. */
.on-dark .more,.lines .more,.research .more{color:var(--calcium);border-color:rgba(185,216,226,.34)}
.on-dark .more i,.lines .more i,.research .more i{border-color:rgba(185,216,226,.34)}
.more-row{margin-block-start:clamp(34px,4vw,50px)}

/* ============ JOURNAL / NEWS ============ */
.jr{background:var(--calcium)}
/* The page link sat top right in a shape of its own. Three other sections put
   the same link at the foot in a bordered pill, so this was one exception
   against three instances of a pattern a visitor has already learned. It uses
   .more now, in the same place as the others. */
.jr-head{max-width:62ch;margin-block-end:clamp(34px,4.5vw,52px)}
.jr-head h2{max-width:18ch}

.jr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.jr-card{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid rgba(0,35,51,.09);border-radius:var(--r-lg);
  padding:26px 26px 24px;text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s;
}
.jr-card:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(0,35,51,.13);border-color:rgba(89,185,197,.55)}
/* a lattice rule that draws itself across the top on hover */
.jr-card::before{
  content:"";position:absolute;inset-block-start:0;inset-inline-start:0;height:3px;width:0;
  background:var(--sea);transition:width .5s cubic-bezier(.2,.7,.3,1);
}
.jr-card:hover::before,.jr-card:focus-visible::before{width:100%}

.jr-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-block-end:18px}
.jr-tag{
  font-family:var(--f-head);font-weight:700;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ocean);background:rgba(89,185,197,.2);
  padding:6px 11px;border-radius:999px;
}
.jr-date{font-size:13.5px;color:var(--ink-soft)}
.jr-card h3{
  font-family:var(--f-head);font-weight:700;font-size:20px;line-height:1.3;
  letter-spacing:-.015em;color:var(--ocean);
}
.jr-card p{margin-block-start:12px;font-size:15.5px;color:var(--ink-soft)}
/* N-05. Sea Serpent measured 2.29:1 here. SYSTEM RULE: Sea Serpent is a fill
   and a stroke colour. It is never a text colour on Calcium White or white.
   It stays legal on Deep Ocean Blue (7.12:1) and Carbon Black (8.49:1). */
.jr-more{
  margin-block-start:auto;padding-block-start:22px;display:flex;align-items:center;gap:9px;
  font-family:var(--f-head);font-weight:600;font-size:14.5px;color:var(--ocean);
}
.jr-more svg{color:var(--sea)}
.jr-card:hover .jr-more svg{color:var(--ocean)}
.jr-more svg{width:14px;height:14px;transition:transform .3s}
.jr-card:hover .jr-more svg{transform:translateX(4px)}

@media(max-width:940px){.jr-grid{grid-template-columns:1fr 1fr}.jr-card:last-child{grid-column:1/-1}}
@media(max-width:620px){.jr-grid{grid-template-columns:1fr}.jr-card:last-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.jr-card:hover{transform:none}}

/* ============ BACK TO TOP ============ */
.to-top{
  position:fixed;inset-block-end:26px;inset-inline-end:26px;z-index:60;
  width:50px;height:50px;border:0;border-radius:14px;cursor:pointer;
  background:var(--sea);color:var(--carbon);
  display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(0,15,22,.34);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .3s,transform .3s cubic-bezier(.2,.7,.3,1),visibility .3s,background .25s;
}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--french)}
.to-top:active{transform:translateY(2px)}
.to-top svg{width:19px;height:19px;display:block}
@media(max-width:520px){.to-top{inset-block-end:18px;inset-inline-end:18px;width:46px;height:46px;border-radius:13px}}
@media(prefers-reduced-motion:reduce){.to-top{transition:opacity .2s,visibility .2s}.to-top.on{transform:none}}

/* ============ CTA ============ */
.cta{
  background-color:var(--ocean);color:var(--calcium);position:relative;overflow:hidden;
  /* a quieter stretch of the same desert, held well back so the type stays clean */
  background-image:
    linear-gradient(rgba(0,35,51,.7),rgba(0,15,22,.84)),
    var(--cta-bg);
  background-size:cover;
  background-position:50% 58%;
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 130% at 50% 0%,rgba(89,185,197,.2),transparent 60%);
}
/* the desert dissolves into the footer rather than stopping at a seam */
.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 52%,rgba(0,15,22,.72) 84%,var(--carbon) 100%);
}
.cta .shell{position:relative;z-index:2;text-align:center}
.cta h2{max-width:20ch;margin:0 auto}
.cta p{margin:22px auto 0;max-width:52ch;color:rgba(242,251,255,.78)}
.cta .btn{margin-block-start:34px}

/* ============ FOOTER ============ */
.ft{background:var(--carbon);color:rgba(242,251,255,.72);padding:clamp(56px,7vw,84px) 0 30px}
/* four columns: the site map is split by kind so it reads as two short
   lists rather than one long one, and the newsletter fills the tail */
.ft-top{display:grid;grid-template-columns:1.12fr .66fr .76fr 1.46fr;gap:clamp(26px,3.6vw,50px);padding-bottom:44px;border-block-end:1px solid var(--line-dark)}
.ft-brand .ft-mark{display:block;height:56px;aspect-ratio:var(--ar-logo);
  background:var(--logo) no-repeat left center/contain;margin-block-end:22px}
@media(max-width:520px){.ft-brand .ft-mark{height:44px}}
.ft-brand p{font-size:16px;max-width:34ch;color:rgba(242,251,255,.66)}
.ft h4{
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sea);margin-block-end:18px;font-weight:600;
}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ft ul a{display:inline-flex;align-items:center;min-height:40px;font-size:15.5px;color:rgba(242,251,255,.72);transition:color .2s;overflow-wrap:anywhere}
.ft ul a:hover{color:var(--sea)}
/* newsletter, sits under the positioning line in the brand column */
.ft-sub{margin-block-start:30px;max-width:none}
.ft-sub h4{margin-block-end:12px}
.ft-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ft-form input{
  flex:1 1 150px;min-width:0;min-height:48px;
  background:rgba(242,251,255,.06);border:1px solid var(--line-dark);border-radius:999px;
  padding:0 20px;color:var(--calcium);font-family:var(--f-body);font-size:16px;
  transition:border-color .25s,background .25s;
}
.ft-form input::placeholder{color:rgba(242,251,255,.45)}
.ft-form input:focus{border-color:var(--sea);background:rgba(89,185,197,.1)}.ft-form input:focus-visible{outline:2px solid var(--sea);outline-offset:2px}
.ft-form button{
  flex:none;min-height:48px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;
  background:var(--sea);color:var(--carbon);font-family:var(--f-head);font-weight:600;font-size:14.5px;
  transition:background .25s;
}
.ft-form button:hover{background:var(--french)}
.ft-msg{margin-block-start:12px;font-size:14px;color:var(--sea);min-height:1.4em}
.ft-fine{margin-block-start:10px;font-size:13px;color:rgba(242,251,255,.56)}
/* N-07. A capture form needs a consent control and a policy to point at, or it
   commits MERSAAD to an obligation nobody has agreed to. */
.nl-consent{display:flex;align-items:center;gap:11px;margin-block-start:14px;min-height:44px}
.nl-consent input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--sea);cursor:pointer}
.nl-consent label{font-size:13px;line-height:1.5;color:rgba(242,251,255,.62);cursor:pointer}
.nl-consent a{color:var(--french);text-decoration:underline;text-underline-offset:2px;padding-block:5px;min-height:26px;display:inline-block}
.nl-consent a:hover{color:var(--sea)}

.ft-bot{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding-top:24px;flex-wrap:wrap;font-size:14px;color:rgba(242,251,255,.5);
}
.ft-bot .tag{font-family:var(--f-head);font-weight:600;color:var(--sea);letter-spacing:.02em}
@media(max-width:1040px){
  .ft-top{grid-template-columns:1fr 1fr 1fr}
  .ft-brand{grid-column:1/-1}
}
@media(max-width:760px){
  .ft-top{grid-template-columns:1fr 1fr;gap:30px clamp(24px,5vw,44px)}
  .ft-conn{grid-column:1/-1}
}
@media(max-width:460px){.ft-top{grid-template-columns:1fr;gap:32px}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

.nx-cat{font-family:var(--f-head);font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--text-accent-light,#00637a);background:rgba(89,185,197,.13);border:1px solid rgba(89,185,197,.4);border-radius:999px;padding:4px 10px}.ft-h{font-family:var(--f-head);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 14px;color:var(--calcium);opacity:.85}.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media print{*{background:#fff!important;color:#000!important;box-shadow:none!important}.hdr,.burger,.ft-form,.ft-sub,.skip,canvas,.to-top{display:none!important}a{text-decoration:underline}main a[href^="http"]::after{content:" (" attr(href) ")";font-size:10pt;word-break:break-all}.sect{padding-block:18pt!important;break-inside:avoid}img{max-width:60%!important;height:auto!important}}@media(max-width:359px){.ft-brand .ft-mark{height:32px}}@media(max-width:299px){.ft-brand .ft-mark{height:26px}}


/* ---- hero. Shorter than the others: this page is a list, and a tall hero
   in front of two items reads as an apology for having only two. --------- */
.hero.nx-hero{
  min-height:clamp(400px,54vh,560px);
  background:
    radial-gradient(110% 80% at 78% 0%,rgba(89,185,197,.18),transparent 60%),
    linear-gradient(180deg,var(--ocean),var(--carbon));
}
.nx-hero .hero-in{max-width:760px}
.nx-hero .eyebrow{color:var(--french);margin-block-end:18px;display:block}
.nx-hero .h-xl{font-size:clamp(36px,4.6vw,60px)}

/* ---- the list --------------------------------------------------------- */
.nx{background:var(--calcium)}
.nx-list{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.nx-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(min-width:1080px){.nx-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
/* a sample card carries a visible ribbon across its top corner and a dashed
   border, so no screenshot of a single card can be mistaken for a real one */
.nx-item.is-sample{
  border-style:dashed;border-color:rgba(89,185,197,.45);
  background:linear-gradient(180deg,rgba(89,185,197,.04),#fff 22%);
  position:relative;overflow:hidden;
}
.nx-item.is-sample::before{
  content:"SAMPLE";position:absolute;inset-block-start:14px;inset-inline-end:-38px;
  transform:rotate(45deg);background:var(--sea);color:var(--ocean);
  font-family:var(--f-head);font-weight:800;font-size:10.5px;letter-spacing:.14em;
  padding:4px 46px;box-shadow:0 3px 8px rgba(0,15,22,.14);
}
/* X-02. The label whose whole job is to prevent accidental publication
   should be the loudest thing on the card, not the quietest. Solid amber,
   dark text, larger, so it reads as an alarm rather than a tag. */
.nx-flag.sm{
  color:#3A1F00;background:#FFC24D;border-color:#B37A00;
  font-size:12.5px;padding:5px 12px;letter-spacing:.13em;
  box-shadow:0 2px 6px rgba(255,194,77,.42);
}
.nx-item{
  background:#fff;border:1px solid var(--line,rgba(0,35,51,.12));
  border-radius:var(--r-md,16px);padding:clamp(24px,2.6vw,32px);
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.nx-item:hover{
  border-color:rgba(89,185,197,.5);transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,35,51,.08);
}
.nx-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nx-meta time,.nx-nodate{
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  /* measured 3.80:1 at .55 on white, below the 4.5 minimum for small text */
  color:rgba(0,35,51,.72);
}
.nx-flag{
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
  color:#7A4A00;background:#FFF3DC;border:1px solid #E7C489;
  border-radius:999px;padding:4px 10px;
}
.nx-item h3{font-size:clamp(18px,1.9vw,21.5px);line-height:1.34;color:var(--ocean)}
.nx-item p{font-size:15px;line-height:1.62;color:rgba(0,35,51,.76)}
.nx-foot{margin-block-start:auto;padding-block-start:6px}
.nx-nolink{
  /* X-05. It read as a link because it borrowed the underline. Now a dashed
     outline chip: still visibly a placeholder in the same slot as the real
     link, but the one signal that means clickable is gone. */
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  /* M-04 (review 4): .6 measured 4.34:1 on this ground, under AA for small
     text. .68 clears it without making the placeholder look active. */
  color:rgba(0,35,51,.68);
  padding:6px 12px;border-radius:999px;
  border:1px dashed rgba(0,35,51,.28);background:rgba(0,35,51,.03);
}
.nx-link{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--f-head);font-weight:600;font-size:14.5px;color:var(--ocean);
  min-height:44px;
}
.nx-link i{
  font-style:normal;display:grid;place-items:center;width:30px;height:30px;
  border-radius:50%;border:1px solid rgba(0,35,51,.24);transition:transform .3s,background .3s,color .3s;
}
.nx-link:hover i{background:var(--sea);border-color:var(--sea);color:var(--ocean);transform:translateX(3px)}
.nx-note{
  margin-block-start:26px;font-size:13.5px;line-height:1.6;max-width:78ch;
  color:rgba(0,35,51,.7);display:flex;align-items:flex-start;gap:9px;
}
.nx-note s{
  text-decoration:none;width:9px;height:10px;margin-block-start:5px;flex:none;
  background:var(--sea);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}


/* The browser hides [hidden] elements with display:none from its own default
   stylesheet, and ANY display declaration an author writes beats that. Both
   confirmations below are display:flex, so without this rule they ignore the
   hidden attribute and sit on the page permanently. That is exactly what
   happened on the live site: the newsletter said "You are subscribed" to every
   visitor, under a form they had not filled in. One rule, once, for the theme. */
[hidden]{display:none!important}

/* ---- added by the theme: the newsletter confirmation. Design 3, chosen 5 Sept
   2026: on success the field and button give way to this, so nothing is left
   inviting a second attempt. ---- */
.ft-done{display:flex;gap:13px;align-items:flex-start;min-block-size:48px}
.ft-done-tick{flex:none;inline-size:34px;block-size:34px;border-radius:50%;background:var(--sea);color:var(--carbon);display:grid;place-items:center;margin-block-start:1px}
.ft-done-tick svg{inline-size:17px;block-size:17px}
.ft-done-txt{display:grid;gap:5px}
.ft-done-txt b{font-family:var(--f-head);font-weight:600;font-size:16.5px;line-height:1.25;letter-spacing:-.01em;color:var(--calcium)}
.ft-done-txt span{font-size:13.5px;line-height:1.55;color:rgba(242,251,255,.62)}
.ft-done:focus-visible{outline:2px solid var(--sea);outline-offset:6px;border-radius:10px}
@media(prefers-reduced-motion:no-preference){
  .ft-done[data-rise]{animation:ft-rise .34s cubic-bezier(.2,.7,.3,1) both}
  @keyframes ft-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* ------------------------------------------------------------------
   The mobile menu, opened while the header is over a light section.

   The header flips its own colours to suit whatever ground is passing
   underneath it: over a light section, .hdr.on-light turns the nav links
   Deep Ocean so they read against pale ground. That is right for the bar.

   It is wrong for the open menu. Below 1260px the nav becomes a panel with
   its own Carbon Black background, so those rules were painting dark navy
   text on a near-black panel. Measured at 1.4:1. Whether the menu was
   legible depended entirely on how far down the page you had scrolled
   before you tapped the burger, which is why it looked fine in testing and
   broke for Moustafa on the home page at 5.29am.

   The panel brings its own ground, so it takes back its own colours. The
   burger is above the panel when open, so it does too.
   ------------------------------------------------------------------ */
@media(max-width:1260px){
  .hdr.on-light .nav.open a{color:var(--calcium)}
  .hdr.on-light .nav.open a:hover{color:var(--calcium);background:rgba(242,251,255,.09)}
  .hdr.on-light .nav.open a.on{color:var(--calcium);background:rgba(89,185,197,.2)}
  .hdr.on-light .burger.open span{background:var(--calcium)}
}

/* ---- added by the theme: the single-article page and the empty state ---- */
.nx-article .nx-body{max-inline-size:760px;margin-inline:auto}
.nx-article .nx-body p{margin-block:0 1.2em}
.nx-article .nx-body h2,.nx-article .nx-body h3{margin-block:1.6em .5em}
.nx-article .nx-body ul,.nx-article .nx-body ol{padding-inline-start:1.3em;margin-block:0 1.2em}
.nx-article .nx-body blockquote{margin:1.4em 0;padding-inline-start:1em;border-inline-start:3px solid var(--sea);color:var(--ink-soft)}
.nx-article .nx-fig{margin:0 0 1.6em}
.nx-article .nx-fig img{border-radius:var(--r-md);inline-size:100%;block-size:auto}
.nx-article .nx-foot{display:flex;flex-wrap:wrap;gap:22px;margin-block-start:1.8em}
.nx-empty{color:var(--ink-soft)}