/* ============================================================
   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}
}

.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}@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}}


/* ---- Technology hero. A cooler mineral wash, more restrained than the
   product pages so the science tone reads before the product tone. ------- */
.hero.tech-hero{
  min-height:clamp(500px,70vh,720px);
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(89,185,197,.24),transparent 60%),
    radial-gradient(70% 60% at 100% 100%,rgba(0,35,51,.55),transparent 70%),
    linear-gradient(180deg,var(--ocean),var(--carbon));
}
.tech-hero .hero-in{max-width:1240px}
.tc-hero-grid{display:grid;gap:38px;grid-template-columns:minmax(0,1fr);align-items:center}
@media(min-width:1020px){.tc-hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px}}
.tc-hero-copy{max-width:60ch}
.tc-hero-viz{
  margin:0;padding:18px 18px 14px;
  border:1px solid rgba(156,207,220,.22);border-radius:var(--r-lg,28px);
  background:rgba(242,251,255,.03);
}
/* the shared .hero canvas rule full-bleeds every canvas in a hero; this one
   opts back out so it stays inside its frame */
.tech-hero .tc-hero-viz canvas{
  position:static;inset:auto;z-index:auto;opacity:1;
  display:block;width:100%;height:clamp(240px,30vw,360px);
}
.tc-hero-viz figcaption{
  margin-block-start:12px;text-align:center;
  font-family:var(--f-head);font-weight:600;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--calcium);
}
/* principle artwork: one drawn diagram per principle, same line language as
   the SandBind system scenes */
.pr-art{
  border-radius:14px;background:linear-gradient(180deg,#f4fbfe,#e8f4f9);
  border:1px solid rgba(0,35,51,.07);padding:14px;margin-block-end:6px;
}
.pr-art svg{display:block;inline-size:100%;block-size:auto;color:var(--sea)}
.tech-hero .eyebrow{color:var(--french);margin-block-end:18px;display:block}
.tech-hero .h-xl{font-size:clamp(40px,5.4vw,70px)}

/* ---- four principles ------------------------------------------------- */
.pr{background:var(--calcium)}
.pr-head{max-width:56ch;margin-block-end:clamp(30px,4vw,44px)}
/* ---- verification (dark statement band) ----------------------------- */
.ver{background:var(--carbon);color:var(--calcium)}
.ver .h-lg{color:var(--calcium)}
.ver-in{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.ver-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}}
.ver .eyebrow{color:var(--french)}
.ver-body{font-size:clamp(18px,1.75vw,22px);line-height:1.62;color:rgba(242,251,255,.86);max-width:56ch;margin:0}

/* ---- in practice: two clickable cards routing to product pages ------ */
.tech-lines{background:var(--calcium)}
.tech-cards{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.tech-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
.tech-art{
  position:relative;aspect-ratio:16/9;background:var(--carbon);
  border-radius:16px;overflow:hidden;margin-block-end:4px;
}
.tech-art canvas{position:absolute;inset:0;inline-size:100%;block-size:100%}
.tech-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(0,15,22,.5) 100%);
}
/* H-04 (review 4): these cards sit on white. Sea Serpent on white is 2.29:1.
   Light grounds take --text-accent-light, never raw --sea. */
/* Core technology lead, two balanced columns. Body size rather than lead size:
   at 19.5px this copy ran 9 lines and 290px tall, which is a wall. */
/* The shared .shift-head caps at ~670px because it is sized for the heading.
   That cap was squeezing the two columns into half the row and leaving the
   other half empty, which was the original complaint. Released here only;
   the heading itself is short so it does not stretch. */
.core-tech .shift-head{max-inline-size:none}
.core-tech .core-lead{
  /* 1060px is the width at which the balancer lands 5 lines in each column.
     At 1120px it splits 5/4 and the right side sits a line short. */
  margin-block-start:24px;max-inline-size:1060px;
  font-size:17px;line-height:1.64;color:var(--ink-soft,rgba(0,35,51,.74));
  columns:2;column-gap:48px;column-fill:balance;
}
/* one column on narrow screens, where two would be unreadably tight */
@media(max-width:820px){
  .core-tech .core-lead{columns:1;max-inline-size:64ch}
}
.tech-desc{
  font-family:var(--f-head);font-weight:600;font-size:13px;
  letter-spacing:.04em;color:var(--text-accent-light);margin-block-start:-6px;
}
.tech-card{
  display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line,rgba(0,35,51,.12));
  border-radius:var(--r-lg,28px);padding:clamp(28px,3.4vw,40px);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tech-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,35,51,.08);border-color:rgba(89,185,197,.5)}
.tech-card h3{font-family:var(--f-head);font-weight:700;font-size:clamp(24px,2.4vw,30px);margin:0;letter-spacing:-.005em;color:var(--ocean)}
.tech-card p{margin:0;color:rgba(0,35,51,.78);font-size:17px;line-height:1.62}
.tech-card > .more{margin-block-start:6px;align-self:flex-start}

/* ---- CTA (dark) ----------------------------------------------------- */
/* CTA styling comes from the shared stylesheet (photo band), on purpose. */


/* 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)}
}