/* =====================================================================
   ENERGY UP INTERNATIONAL — PREMIUM DESIGN LAYER  (V11)
   Loads AFTER: garlon.css → energy-up-final.css
   Scope: art direction, typography, layout system, components, motion
   Never edits vendor files or the two protected V6 files.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. SELF-HOSTED TYPEFACES
   --------------------------------------------------------------------- */
@font-face{font-family:"EU Sans";src:url("../fonts/eu/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EU Sans";src:url("../fonts/eu/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"EU Sans";src:url("../fonts/eu/inter-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"EU Sans";src:url("../fonts/eu/inter-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"EU Sans";src:url("../fonts/eu/inter-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"EU Sans";src:url("../fonts/eu/inter-latin-ext-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"EU Display";src:url("../fonts/eu/dm-serif-display-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EU Arabic";src:url("../fonts/eu/noto-sans-arabic-arabic-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EU Arabic";src:url("../fonts/eu/noto-sans-arabic-arabic-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"EU Arabic";src:url("../fonts/eu/noto-sans-arabic-arabic-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"EU Arabic";src:url("../fonts/eu/noto-sans-arabic-arabic-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"EU Arabic Display";src:url("../fonts/eu/noto-kufi-arabic-arabic-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"EU Arabic Display";src:url("../fonts/eu/noto-kufi-arabic-arabic-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"EU Arabic Display";src:url("../fonts/eu/noto-kufi-arabic-arabic-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------------
   2. TOKENS
   --------------------------------------------------------------------- */
:root{
  /* ---- V12 Saudi institutional palette -------------------------------
     Balance target: 60% white + warm neutrals, 18% navy, 12% Saudi Green,
     8% Energy Blue, 2% Heritage Gold.
     Green  = primary CTAs, active states, motion tracers.
     Blue   = accreditation, data and tools.
     Navy   = typography, authority sections, footer.
     Sand / Mist = comfortable light surfaces.
     Gold   = micro-accent only. Never body text: #C7923E is 2.76:1 on white.
     Contrast verified on white, Warm Sand and Mist Green.
     -------------------------------------------------------------------- */

  /* core brand */
  --eu-navy:#0B263D;      --eu-navy-2:#0F2E48;    --eu-navy-3:#17405F;
  --eu-green:#006C4C;     --eu-green-600:#005A40; --eu-green-700:#004D37;
  --eu-green-400:#3F9E7C; --eu-green-300:#7FD3B4;
  --eu-blue:#0064A1;      --eu-blue-700:#00558A;  --eu-blue-800:#00446F;
  --eu-gold:#C7923E;      --eu-gold-text:#8A6420;

  /* surfaces */
  --eu-white:#ffffff;
  --eu-sand:#EAF3EE;      --eu-sand-2:#F4FAF6;
  --eu-mist:#E8F1EC;      --eu-mist-2:#F3F8F5;
  --eu-soft:#F0F6F2;      --eu-ice:#E6F0EA;       --eu-pale:#E8F1EC;
  --eu-green-050:#E8F1EC; --eu-blue-050:#E9F1F7;  --eu-gold-050:#F7F1E4;

  /* ink */
  --eu-ink:#0B263D;       --eu-ink-2:#122A3F;     --eu-muted:#546472;
  --eu-muted-2:#6B7A86;
  --eu-line:#DCE8E1;      --eu-line-2:#C6D9CE;    --eu-line-cool:#D2E2D9;
  --eu-sand-warm:#EAF3EE;
  /* V12.3 grey scale — the working neutral between navy and the warm sand */
  --eu-grey-50:#F3F8F5;   --eu-grey-100:#E7F0EA;  --eu-grey-200:#D8E7DE;
  --eu-grey-300:#BCCFC4;  --eu-grey-400:#95A89C;  --eu-grey-500:#68796F;
  --eu-grey-line:#DEE9E3;

  /* status — all AA on their own tint */
  --eu-ok:#006C4C; --eu-warn:#8A5A10; --eu-stop:#9C3226; --eu-info:#00558A;

  /* type */
  --eu-font:"EU Sans","Inter","Lato",system-ui,-apple-system,"Segoe UI",sans-serif;
  --eu-display:"EU Display","DM Serif Display",Georgia,serif;
  --eu-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  /* layout */
  --eu-container:1320px; --eu-measure:68ch; --eu-radius:10px; --eu-radius-sm:4px;
  --eu-gutter:24px;
  --eu-sec:104px; --eu-sec-tight:72px; --eu-sec-air:148px;

  /* elevation — warmed to sit on sand rather than on cool grey */
  --eu-e1:0 1px 2px rgba(6,46,34,.05),0 4px 14px rgba(6,46,34,.06);
  --eu-e2:0 2px 6px rgba(6,46,34,.07),0 16px 40px rgba(6,46,34,.10);
  --eu-e3:0 30px 70px rgba(11,38,61,.15);
  --eu-e-green:0 10px 30px rgba(0,108,76,.18);

  /* motion */
  --eu-ease:cubic-bezier(.22,.61,.36,1);
  --eu-ease-out:cubic-bezier(.16,1,.3,1);
  --eu-ease-mask:cubic-bezier(.77,0,.18,1);
  --eu-d1:220ms; --eu-d2:420ms; --eu-d3:720ms; --eu-d4:1100ms;
}

/* legacy aliases kept so existing rules resolve during the V12 migration */
:root{ --eu-cyan:#4FB3C8; --eu-teal:#006C4C; }

/* ---------------------------------------------------------------------
   3. BASE RESET / TYPOGRAPHY
   --------------------------------------------------------------------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--eu-font);
  font-size:17px; line-height:1.68; color:var(--eu-ink-2);
  background:var(--eu-white); font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body,button,input,select,textarea,optgroup{font-family:var(--eu-font)}
.page-wrapper{overflow:clip;background:var(--eu-white)}
h1,h2,h3,h4,h5,h6{color:var(--eu-ink);font-family:var(--eu-font);font-weight:700;letter-spacing:-.018em;text-transform:none}
p{line-height:1.72;margin-bottom:1.05em}
a{color:var(--eu-green-700);text-decoration:none;transition:color var(--eu-d1) var(--eu-ease)}
a:hover{color:var(--eu-green)}
strong,b{font-weight:700;color:var(--eu-ink)}
img{max-width:100%;height:auto}
::selection{background:rgba(0,108,76,.16);color:var(--eu-ink)}
:focus-visible{outline:3px solid var(--eu-green);outline-offset:2px;border-radius:2px}
/* the vendor sheets zero the outline on a:focus (higher specificity than :focus-visible),
   so keyboard focus is restored explicitly for every interactive element type. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible,[tabindex]:focus-visible,.eu-btn:focus-visible,.eu-textlink:focus-visible,
.main-menu__list a:focus-visible,.eu-topbar a:focus-visible,.eu-footer a:focus-visible,
.eu-accordion__btn:focus-visible,.eu-filterbar li:focus-visible{outline:3px solid var(--eu-green);outline-offset:2px}
.eu-hero a:focus-visible,.eu-pagehero a:focus-visible,.eu-band a:focus-visible,.eu-cta a:focus-visible,
.eu-mapsection a:focus-visible,.eu-footer a:focus-visible{outline-color:#8FD3E8}
.eu-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;inset-inline-start:18px;top:-90px;z-index:99999;padding:13px 20px;background:var(--eu-navy);color:#fff;font-weight:600;border-radius:0 0 6px 6px}
.skip-link:focus{top:0;color:#fff;outline:3px solid var(--eu-green);outline-offset:2px}

/* container + rhythm */
.eu-container{width:100%;max-width:var(--eu-container);margin-inline:auto;padding-inline:var(--eu-gutter)}
.eu-narrow{max-width:900px}
.section-space,.eu-section{padding-block:var(--eu-sec)}
.eu-section--tight{padding-block:var(--eu-sec-tight)}
/* A rhythm, not a constant. Uniform padding makes every section read as
   equally important; the page needs a section that breathes and a section
   that is dense, so the eye knows where the weight is. */
.eu-section--air{padding-block:var(--eu-sec-air)}
/* consecutive sections on the same ground share one seam instead of
   stacking two full paddings, which is where the extra length came from */
.eu-surface-white + .eu-surface-white{padding-top:0}
.eu-surface-soft + .eu-surface-soft{padding-top:0}
/* a dark band always gets its own air */
.eu-vband,.eu-surface-navy{padding-block:var(--eu-sec-air)}
.eu-section--flush-top{padding-top:0}
.eu-section--flush-bottom{padding-bottom:0}
.eu-surface-white{background:var(--eu-white)}
.eu-surface-soft{background:#EBF4EF}

/* ---------------------------------------------------------------------
   The green atmosphere.
   In the masthead the green arrives as light — a soft radial in the grade
   layer — rather than as a painted panel. That reading is what makes the
   colour feel like the entity's own rather than a highlight borrowed from
   the group. Here the same gesture is carried onto every light section, so
   the page is lit by the green instead of merely marked with it. It is a
   wash, not a fill: it never sits between the reader and the type, it
   never darkens enough to move a contrast ratio, and it is placed behind
   content with a negative z-index so nothing becomes unclickable.
   --------------------------------------------------------------------- */
.eu-surface-white,.eu-surface-soft,.eu-surface-sand,.eu-surface-grey,
.eu-surface-mist,.eu-surface-mist-2,.eu-surface-ice,.eu-surface-pale{
  position:relative;isolation:isolate}
.eu-surface-white::before,.eu-surface-soft::before,.eu-surface-sand::before,
.eu-surface-grey::before,.eu-surface-ice::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(88% 62% at 84% 8%, rgba(0,108,76,.115), transparent 68%),
    radial-gradient(70% 54% at 6% 96%, rgba(0,108,76,.075), transparent 72%)}
/* mirrored so the light falls from the same side of the reading direction */
[dir="rtl"] .eu-surface-white::before,[dir="rtl"] .eu-surface-soft::before,
[dir="rtl"] .eu-surface-sand::before,[dir="rtl"] .eu-surface-grey::before,
[dir="rtl"] .eu-surface-ice::before{
  background:
    radial-gradient(88% 62% at 16% 8%, rgba(0,108,76,.115), transparent 68%),
    radial-gradient(70% 54% at 94% 96%, rgba(0,108,76,.075), transparent 72%)}
/* consecutive same-ground sections share one seam, so the wash must not
   restart at the join and draw a visible band across the page */
.eu-surface-white + .eu-surface-white::before,
.eu-surface-soft + .eu-surface-soft::before{background:none}
/* the navy bands keep a green horizon rather than a blue one, so the
   dark moments belong to the same identity as the light ones */
.eu-surface-navy{position:relative;isolation:isolate}
.eu-surface-navy::before{content:"";position:absolute;inset:0;z-index:-1;
  pointer-events:none;
  background:radial-gradient(90% 70% at 80% 0%, rgba(0,168,118,.20), transparent 66%)}
[dir="rtl"] .eu-surface-navy::before{
  background:radial-gradient(90% 70% at 20% 0%, rgba(0,168,118,.20), transparent 66%)}
.eu-surface-sand{background:var(--eu-grey-50)}
.eu-surface-mist{background:var(--eu-mist)}
.eu-surface-mist-2{background:var(--eu-mist-2)}
.eu-surface-ice{background:var(--eu-grey-100)}
.eu-surface-pale{background:var(--eu-mist)}
.eu-surface-navy{background:var(--eu-navy);color:rgba(255,255,255,.84)}
.eu-surface-grey{background:var(--eu-grey-50)}
.eu-surface-grey-2{background:var(--eu-grey-100)}
.eu-surface-navy h1,.eu-surface-navy h2,.eu-surface-navy h3,.eu-surface-navy h4,.eu-surface-navy strong{color:#fff}
.eu-surface-navy a{color:#7FD3B4}
.eu-surface-navy a:hover{color:#A8E4CD}
.eu-hairline-top{border-top:1px solid var(--eu-line)}
.eu-hairline-bottom{border-bottom:1px solid var(--eu-line)}

/* display type scale */
.eu-display-1{font-family:var(--eu-font);font-weight:700;font-size:clamp(38px,4.6vw,62px);line-height:1.045;letter-spacing:-.028em}
.eu-display-2{font-weight:700;font-size:clamp(32px,3.3vw,46px);line-height:1.09;letter-spacing:-.024em}
.eu-display-3{font-weight:700;font-size:clamp(24px,2.2vw,32px);line-height:1.18;letter-spacing:-.018em}
.eu-serif{font-family:var(--eu-display);font-weight:400;letter-spacing:-.008em}
.eu-kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;color:var(--eu-green);
  font-size:11.5px;font-weight:700;line-height:1.4;letter-spacing:.15em;text-transform:uppercase}
.eu-kicker::before{content:"";width:26px;height:2px;background:var(--eu-green);flex:none}
.eu-surface-navy .eu-kicker{color:#7FD3B4}
.eu-leadtext{font-size:19px;line-height:1.66;color:var(--eu-ink-2);max-width:74ch}
.eu-prose{max-width:var(--eu-measure)}
.eu-prose p{margin-bottom:1.1em}
.eu-prose h3,.eu-prose h2.eu-h3{margin:2em 0 .6em;font-size:23px;line-height:1.3;letter-spacing:-.012em}
.eu-prose h4{margin:1.7em 0 .5em;font-size:19px}
.eu-prose ul,.eu-prose ol{margin:0 0 1.2em;padding-inline-start:1.25em}
.eu-prose li{margin-bottom:.5em}
.eu-note{padding:18px 22px;border-inline-start:3px solid var(--eu-blue);background:var(--eu-soft);
  color:var(--eu-ink-2);font-size:16.5px;line-height:1.68;border-radius:0 var(--eu-radius-sm) var(--eu-radius-sm) 0}
.eu-note strong{color:var(--eu-ink)}
.eu-note--gold{border-inline-start-color:var(--eu-gold);background:var(--eu-gold-050)}
.eu-note--stop{border-inline-start-color:var(--eu-stop);background:#FBF1EF}
.eu-quote{margin:0;padding:26px 30px;background:var(--eu-navy);color:#fff;border-radius:var(--eu-radius);
  font-family:var(--eu-display);font-size:clamp(20px,2vw,26px);line-height:1.36}
.eu-section-head{max-width:820px;margin-bottom:52px}
.eu-section-head--center{margin-inline:auto;text-align:center}
.eu-section-head p{margin:16px 0 0;font-size:18px;color:var(--eu-muted)}
.eu-section-head--center p{margin-inline:auto}

/* Editorial spread: the heading holds a column of its own and stays with the
   reader while the body runs beside it. Below the breakpoint it stacks and
   behaves exactly as it did before. Logical properties throughout, so RTL
   mirrors without a second rule. */
.eu-prosegrid{display:grid;gap:0 clamp(40px,5vw,88px)}
.eu-prosegrid__head .eu-section-head{margin-bottom:34px}
@media (min-width:1100px){
  .eu-prosegrid{grid-template-columns:minmax(0,.36fr) minmax(0,.64fr)}
  .eu-prosegrid__head{position:sticky;top:132px;align-self:start}
  .eu-prosegrid__head .eu-section-head{margin-bottom:0;max-width:none}
  .eu-prosegrid__body>.eu-prose{max-width:none}
}

/* ---------------------------------------------------------------------
   4. BUTTONS & LINKS
   --------------------------------------------------------------------- */
.eu-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 26px;border:1px solid transparent;border-radius:var(--eu-radius-sm);
  background:var(--eu-green);color:#fff;font-size:14.5px;font-weight:600;letter-spacing:.005em;
  text-align:center;cursor:pointer;overflow:hidden;
  transition:background var(--eu-d1) var(--eu-ease),transform var(--eu-d1) var(--eu-ease),box-shadow var(--eu-d1) var(--eu-ease),color var(--eu-d1)}
.eu-btn:hover{background:var(--eu-green-600);color:#fff;transform:translateY(-2px);box-shadow:var(--eu-e-green)}
/* Energy Blue is the accreditation, data and tools action */
.eu-btn--blue{background:var(--eu-blue)}
.eu-btn--blue:hover{background:var(--eu-blue-700);box-shadow:0 10px 24px rgba(0,85,138,.22)}
.eu-btn:active{transform:translateY(0)}
.eu-btn i,.eu-btn svg{font-size:.85em;transition:transform var(--eu-d1) var(--eu-ease)}
.eu-btn:hover i{transform:translateX(3px)}
[dir="rtl"] .eu-btn:hover i{transform:translateX(-3px)}
.eu-btn--navy{background:var(--eu-navy)}
.eu-btn--navy:hover{background:var(--eu-navy-3)}
.eu-btn--ghost{background:transparent;border-color:var(--eu-line-2);color:var(--eu-ink)}
.eu-btn--ghost:hover{background:var(--eu-ink);border-color:var(--eu-ink);color:#fff}
.eu-btn--onnavy{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);color:#fff}
.eu-btn--onnavy:hover{background:#fff;border-color:#fff;color:var(--eu-navy)}
.eu-btn--white{background:#fff;color:var(--eu-navy)}
.eu-btn--white:hover{background:var(--eu-ice);color:var(--eu-navy)}
.eu-btn--sm{min-height:44px;padding:0 18px;font-size:13.5px}
.eu-btn--block{display:flex;width:100%}
.eu-btn[aria-disabled="true"],.eu-btn:disabled{opacity:.5;pointer-events:none}
.eu-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.eu-textlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--eu-green-700)}
.eu-textlink::after{content:"→";transition:transform var(--eu-d1) var(--eu-ease)}
[dir="rtl"] .eu-textlink::after{content:"←"}
.eu-textlink:hover::after{transform:translateX(4px)}
[dir="rtl"] .eu-textlink:hover::after{transform:translateX(-4px)}

/* chips / pills */
.eu-chips{display:flex;flex-wrap:wrap;gap:8px}
.eu-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--eu-line-2);
  border-radius:100px;background:#fff;color:var(--eu-ink);font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap}
.eu-chip--std{border-color:rgba(0,100,161,.26);background:var(--eu-blue-050);color:var(--eu-blue-700)}
.eu-chip--muted{border-color:var(--eu-line);color:var(--eu-muted);background:var(--eu-soft)}
.eu-surface-navy .eu-chip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24);color:#EAF3EE}
.eu-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:100px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1}
.eu-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.eu-badge--ok{background:rgba(0,108,76,.1);color:var(--eu-ok)}
.eu-badge--warn{background:var(--eu-gold-050);color:var(--eu-gold-text);
  box-shadow:inset 0 0 0 1px rgba(199,146,62,.34)}
.eu-badge--stop{background:rgba(156,50,38,.1);color:var(--eu-stop)}
.eu-badge--info{background:rgba(0,85,138,.09);color:var(--eu-info)}
.eu-badge--gold{background:var(--eu-gold-050);color:var(--eu-gold)}

/* entity attribution tag — visible responsible-entity marker */
.eu-entity{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:var(--eu-radius-sm);
  background:var(--eu-soft);border:1px solid var(--eu-line);font-size:12.5px;font-weight:600;color:var(--eu-ink-2)}
.eu-entity__dot{width:9px;height:9px;border-radius:2px;flex:none}
.eu-entity--euil .eu-entity__dot{background:var(--eu-blue)}
.eu-entity--geu .eu-entity__dot{background:var(--eu-gold)}
.eu-entity--ees .eu-entity__dot{background:var(--eu-teal)}
.eu-surface-navy .eu-entity{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);color:#DCEAF1}

/* ---------------------------------------------------------------------
   5. HEADER  (uses the V6 / garlon.js DOM contract)
   --------------------------------------------------------------------- */
.eu-topbar{background:var(--eu-navy);color:rgba(255,255,255,.78);font-size:12px;letter-spacing:.01em}
.eu-topbar__inner{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.eu-topbar__accred{display:inline-flex;align-items:center;gap:9px;min-width:0;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eu-topbar__accred i{color:var(--eu-green-300)}
.eu-topbar__std{color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;white-space:nowrap}
.eu-topbar__links{display:flex;align-items:center;gap:20px;margin:0;padding:0;list-style:none;flex:none}
.eu-topbar__links a{color:rgba(255,255,255,.8);font-weight:500;font-size:12px;white-space:nowrap}
.eu-topbar__links a:hover{color:#fff}
.eu-topbar__lang{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid rgba(255,255,255,.28);
  border-radius:3px;font-weight:700;letter-spacing:.06em}
.eu-topbar__lang:hover{background:#fff;color:var(--eu-navy)!important;border-color:#fff}

.main-header{background:#fff;border-bottom:1px solid var(--eu-line);position:relative;z-index:99}
.main-header__inner{min-height:88px;display:flex;align-items:center;gap:20px;padding:0}
.main-header__logo{flex:0 1 auto;min-width:0;display:flex;align-items:center}
.main-header__logo img{width:auto;height:54px;max-width:230px;object-fit:contain;display:block}
.eu-nav{flex:1 1 auto;min-width:0;margin-inline-start:auto;display:flex;align-items:center;justify-content:flex-end;gap:20px}
.main-menu__list{display:flex;flex-wrap:nowrap;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.main-menu .main-menu__list>li{position:relative;padding:0;flex:none;white-space:nowrap}
.main-menu .main-menu__list>li+li{margin-inline-start:4px}
.main-menu .main-menu__list>li>a{display:inline-flex;align-items:center;gap:6px;padding:32px 13px;
  color:var(--eu-ink);font-size:14.5px;font-weight:600;letter-spacing:0;line-height:1;position:relative;text-transform:none}
/* navigation state is a state, not data: green marks it */
.main-menu .main-menu__list>li>a::after{content:"";position:absolute;inset-inline:13px;bottom:24px;height:2px;
  background:var(--eu-blue);transform:scaleX(0);transform-origin:inline-start;transition:transform var(--eu-d2) var(--eu-ease)}
.main-menu .main-menu__list>li:hover>a::after,.main-menu .main-menu__list>li.current>a::after{transform:scaleX(1)}
.main-menu .main-menu__list>li:hover>a,.main-menu .main-menu__list>li.current>a{color:var(--eu-green-700)}
.main-menu .main-menu__list>li.dropdown>a::before{content:"";width:5px;height:5px;border-inline-end:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55;order:2;margin-inline-start:2px}

/* mega / dropdown panel */
/* the mega panel opens on the action colour */
.main-menu .main-menu__list li ul{position:absolute;top:100%;inset-inline-start:0;min-width:288px;margin:0;padding:12px 0;
  background:#fff;border:1px solid var(--eu-line);border-top:2px solid var(--eu-green);border-radius:0 0 8px 8px;
  box-shadow:var(--eu-e2);list-style:none;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity var(--eu-d2) var(--eu-ease),transform var(--eu-d2) var(--eu-ease),visibility var(--eu-d2);z-index:120}
.main-menu .main-menu__list li:hover>ul,.main-menu .main-menu__list li:focus-within>ul{opacity:1;visibility:visible;transform:translateY(0)}
.main-menu .main-menu__list li ul li{width:100%}
.main-menu .main-menu__list li ul li a{display:block;padding:10px 22px;color:var(--eu-ink-2);font-size:14px;font-weight:500;line-height:1.4}
.main-menu .main-menu__list li ul li a:hover{background:var(--eu-soft);color:var(--eu-green-700)}
.main-menu .main-menu__list li ul li a small{display:block;margin-top:2px;color:var(--eu-muted);font-size:12px;font-weight:400}
.main-menu .main-menu__list li ul li.eu-menu-head{padding:14px 22px 6px;color:var(--eu-muted);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.main-menu .main-menu__list li ul li.eu-menu-sep{height:1px;margin:8px 0;background:var(--eu-line)}
.eu-mega>ul{min-width:640px;padding:22px 10px!important;display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
.eu-mega>ul>li.eu-menu-head{grid-column:1/-1}
.eu-header-cta{display:flex;align-items:center;gap:12px;flex:none}
.eu-header-cta .eu-btn{min-height:48px;padding:0 20px;font-size:14px}
.eu-header-cta .eu-btn--cta{gap:14px;padding-inline:20px 8px;border-color:rgba(0,76,54,.22);
  border-radius:3px;box-shadow:0 8px 22px rgba(0,108,76,.18)}
.eu-header-cta .eu-btn--cta i{width:32px;height:32px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border-inline-start:1px solid rgba(255,255,255,.16)}
.eu-header-cta .eu-btn--cta:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,108,76,.24)}

/* application split menu */
.eu-apply{position:relative}
.eu-apply__panel{position:absolute;top:calc(100% + 12px);inset-inline-end:0;width:352px;padding:10px;background:#fff;
  border:1px solid var(--eu-line);border-radius:10px;box-shadow:var(--eu-e2);opacity:0;visibility:hidden;
  transform:translateY(12px);transition:all var(--eu-d2) var(--eu-ease);z-index:140}
.eu-apply.is-open .eu-apply__panel,.eu-apply:focus-within .eu-apply__panel{opacity:1;visibility:visible;transform:translateY(0)}
.eu-apply__panel a{display:block;padding:14px 16px;border-radius:6px;color:var(--eu-ink);font-weight:600;font-size:14.5px;line-height:1.35}
.eu-apply__panel a small{display:block;margin-top:4px;color:var(--eu-muted);font-weight:400;font-size:12.5px}
.eu-apply__panel a:hover{background:var(--eu-green-050);color:var(--eu-green-700)}

/* sticky clone — garlon.js clones .sticky-header and toggles .active on up-scroll */
.sticky-header--cloned{position:fixed;inset-inline:0;top:0;z-index:9991;
  background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--eu-line);box-shadow:0 6px 26px rgba(11,38,61,.08);
  transform:translateY(-102%);opacity:0;visibility:hidden;
  transition:transform 420ms var(--eu-ease),opacity 260ms var(--eu-ease),visibility 420ms}
.sticky-header--cloned.active{transform:translateY(0);opacity:1;visibility:visible}
.sticky-header--cloned .main-header__inner{min-height:68px}
.sticky-header--cloned .main-menu .main-menu__list>li>a{padding-block:23px}
.sticky-header--cloned /* navigation state is a state, not data: green marks it */
.main-menu .main-menu__list>li>a::after{bottom:16px}
.sticky-header--cloned .main-header__logo img{height:42px}
.sticky-header--cloned .eu-header-cta .eu-btn{min-height:42px;font-size:13.5px}

/* mobile bar */
.eu-burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;border:1px solid var(--eu-line);
  border-radius:6px;background:#fff;color:var(--eu-ink);font-size:19px;cursor:pointer}
.eu-burger:hover{background:var(--eu-ink);color:#fff;border-color:var(--eu-ink)}
.mobile-nav__wrapper .mobile-nav__content{background:var(--eu-navy)}
.mobile-nav__wrapper .mobile-nav__container ul li a{color:rgba(255,255,255,.86);font-family:var(--eu-font);font-size:15px;font-weight:600}
.mobile-nav__wrapper .mobile-nav__container ul li a:hover{color:var(--eu-cyan)}
.mobile-nav__wrapper .mobile-nav__container ul li ul li a{font-weight:400;font-size:14px;opacity:.85}
.mobile-nav__wrapper .mobile-nav__container ul li a small{display:none}
.eu-mobile-extra{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.eu-mobile-extra .eu-btn{width:100%;margin-bottom:10px}
.eu-mobile-extra p{margin:14px 0 0;color:rgba(255,255,255,.6);font-size:12.5px;line-height:1.6}

/* ---------------------------------------------------------------------
   6. PRELOADER (brand mark construction) + CURSOR + FLOATING UI
   --------------------------------------------------------------------- */
.eu-preloader{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:var(--eu-navy)}
.eu-preloader__mark{width:min(320px,62vw);opacity:0;transform:translateY(8px)}
.eu-preloader__promise{margin:0;color:rgba(255,255,255,.64);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(6px)}
[dir="rtl"] .eu-preloader__promise{font-size:13px;letter-spacing:0;text-transform:none}
.eu-preloader__bar{position:relative;width:min(320px,62vw);height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.eu-preloader__bar span{display:block;height:100%;width:0;background:var(--eu-green-300)}
.eu-preloader.is-done{opacity:0;visibility:hidden;transition:opacity 520ms var(--eu-ease),visibility 520ms}
.eu-preloader__dot{opacity:0}

.custom-cursor__cursor{border:1px solid rgba(0,108,76,.6)}
.custom-cursor__cursor-two{background:var(--eu-green)}

.eu-float{position:fixed;inset-inline-end:20px;bottom:22px;z-index:9990;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.eu-whatsapp{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:#1FA855;color:#fff;
  font-size:26px;box-shadow:0 14px 30px rgba(0,0,0,.2);transition:transform var(--eu-d1) var(--eu-ease)}
.eu-whatsapp:hover{color:#fff;transform:translateY(-3px)}
.scroll-to-top{position:static!important;width:46px;height:46px;display:grid!important;place-items:center;border-radius:50%;
  background:#fff;border:1px solid var(--eu-line);color:var(--eu-ink);box-shadow:var(--eu-e1);opacity:0;
  pointer-events:none;transition:opacity var(--eu-d2)}
.scroll-to-top.show{opacity:1;pointer-events:auto}
.scroll-to-top:hover{background:var(--eu-navy);color:#fff;border-color:var(--eu-navy)}

/* ---------------------------------------------------------------------
   7. HOME HERO
   --------------------------------------------------------------------- */
.eu-hero{position:relative;background:var(--eu-navy);overflow:hidden}
.eu-hero__slide{position:relative;min-height:660px;display:flex;align-items:center;padding-block:96px}
.eu-hero__media{position:absolute;inset:0;z-index:0}
.eu-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transform:scale(1.06);transition:transform 9s linear}
.eu-hero__slide.is-active .eu-hero__media img{transform:scale(1)}
.eu-hero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(9,29,46,.92) 0%,rgba(9,29,46,.86) 34%,rgba(9,29,46,.56) 62%,rgba(9,29,46,.28) 100%)}
[dir="rtl"] .eu-hero__scrim{background:linear-gradient(260deg,rgba(9,29,46,.92) 0%,rgba(9,29,46,.86) 34%,rgba(9,29,46,.56) 62%,rgba(9,29,46,.28) 100%)}
.eu-hero__grid{position:absolute;inset:0;z-index:1;opacity:.16;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:88px 88px;mask-image:linear-gradient(90deg,#000 0%,transparent 68%)}
[dir="rtl"] .eu-hero__grid{mask-image:linear-gradient(270deg,#000 0%,transparent 68%)}
.eu-hero__inner{position:relative;z-index:2;width:100%}
.eu-hero__content{max-width:790px;color:#fff}
.eu-hero__eyebrow{color:#87D2E9}
.eu-hero__title{margin:0 0 20px;color:#fff;font-size:clamp(34px,4.05vw,56px);line-height:1.07;letter-spacing:-.028em;font-weight:700}
.eu-hero__text{margin:0 0 30px;max-width:660px;color:rgba(255,255,255,.85);font-size:18.5px;line-height:1.62}
.eu-hero__trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:34px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.74);font-size:13px}
.eu-hero__trust b{color:#fff;font-weight:600}
.eu-hero__trust span{display:inline-flex;align-items:center;gap:8px}
.eu-hero__trust span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4);margin-inline-end:10px}
.eu-hero .owl-dots{position:absolute;inset-inline-end:calc((100vw - min(100vw,var(--eu-container)))/2 + var(--eu-gutter));
  bottom:44px;z-index:6;display:flex;gap:9px}
.eu-hero .owl-dots .owl-dot span{width:9px;height:9px;margin:0;border-radius:50%;background:rgba(255,255,255,.32);transition:all var(--eu-d2)}
.eu-hero .owl-dots .owl-dot.active span{width:34px;border-radius:20px;background:var(--eu-cyan)}
.eu-hero .owl-nav{display:none}
.eu-hero__index{position:absolute;z-index:6;bottom:40px;inset-inline-start:calc((100vw - min(100vw,var(--eu-container)))/2 + var(--eu-gutter));
  color:rgba(255,255,255,.5);font-size:12px;letter-spacing:.16em;font-variant-numeric:tabular-nums}

/* accreditation strip beneath hero */
.eu-accredstrip{position:relative;z-index:8;margin-top:-42px}
.eu-accredstrip__inner{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;background:#fff;border:1px solid var(--eu-line);
  border-radius:var(--eu-radius);box-shadow:var(--eu-e2);overflow:hidden}
.eu-accredstrip__cell{padding:24px 26px;border-inline-end:1px solid var(--eu-line)}
.eu-accredstrip__cell:last-child{border-inline-end:0}
.eu-accredstrip__cell span{display:block;margin-bottom:6px;color:var(--eu-muted);font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.eu-accredstrip__cell strong{display:block;color:var(--eu-ink);font-size:16px;font-weight:700;line-height:1.32}
.eu-accredstrip__cell small{display:block;margin-top:5px;color:var(--eu-muted);font-size:13px;line-height:1.5}

/* ---------------------------------------------------------------------
   8. INTERNAL PAGE HERO
   --------------------------------------------------------------------- */
.eu-pagehero{position:relative;min-height:360px;display:flex;align-items:center;background:var(--eu-navy);overflow:hidden}
.eu-pagehero__media{position:absolute;inset:0;z-index:0}
.eu-pagehero__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.eu-pagehero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(9,29,46,.93) 0%,rgba(9,29,46,.84) 42%,rgba(9,29,46,.5) 74%,rgba(9,29,46,.3) 100%)}
[dir="rtl"] .eu-pagehero__scrim{background:linear-gradient(260deg,rgba(9,29,46,.93) 0%,rgba(9,29,46,.84) 42%,rgba(9,29,46,.5) 74%,rgba(9,29,46,.3) 100%)}
.eu-pagehero__frame{position:absolute;inset:16px;z-index:2;border:1px solid rgba(255,255,255,.16);pointer-events:none}
.eu-pagehero__inner{position:relative;z-index:3;padding-block:66px;width:100%}
.eu-pagehero__content{max-width:900px}
.eu-pagehero h1{margin:0;color:#fff;font-size:clamp(30px,3.6vw,52px);line-height:1.08;letter-spacing:-.028em}
.eu-pagehero p{margin:14px 0 0;max-width:720px;color:rgba(255,255,255,.82);font-size:18px;line-height:1.6}
.eu-pagehero__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.eu-pagehero .eu-entity{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#DCEAF1}
.eu-crumbs{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  color:var(--eu-muted);font-size:12px;letter-spacing:.03em}
.eu-crumbs a{color:var(--eu-green-700)}
.eu-crumbs a:hover{color:var(--eu-navy)}
.eu-crumbs li+li::before{content:"/";margin-inline-end:8px;color:var(--eu-grey-300)}
.eu-crumbs li{display:inline-flex;align-items:center}
.eu-crumbs li[aria-current]{color:var(--eu-muted)}
/* kept for any surface that is still dark */

.eu-crumbs--onnavy{color:rgba(255,255,255,.6)}
.eu-crumbs--onnavy a{color:rgba(255,255,255,.78)}
.eu-crumbs--onnavy a:hover{color:#fff}
.eu-crumbs--onnavy li+li::before{color:rgba(255,255,255,.34)}
.eu-crumbs--onnavy li[aria-current]{color:#fff}
.eu-crumbs--light{color:var(--eu-muted)}
.eu-crumbs--light a{color:var(--eu-green-700)}
.eu-crumbs--light a:hover{color:var(--eu-navy)}
.eu-crumbs--light li+li::before{color:var(--eu-line-2,#c3d4dd)}
.eu-crumbs--light li[aria-current]{color:var(--eu-ink-2)}

/* ---------------------------------------------------------------------
   9. CARD FAMILIES  (decision · evidence · governance)
   --------------------------------------------------------------------- */
.eu-grid{display:grid;gap:24px}
.eu-grid--2{grid-template-columns:repeat(2,1fr)}
.eu-grid--3{grid-template-columns:repeat(3,1fr)}
.eu-grid--4{grid-template-columns:repeat(4,1fr)}
.eu-grid--auto{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}

/* A. decision cards — routing the visitor by the decision they must defend */
.eu-decision{position:relative;display:flex;flex-direction:column;height:100%;padding:32px 30px 30px;
  background:#fff;border:1px solid var(--eu-line);border-radius:var(--eu-radius);overflow:hidden;
  transition:transform var(--eu-d2) var(--eu-ease),box-shadow var(--eu-d2) var(--eu-ease),border-color var(--eu-d2)}
.eu-decision::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--eu-blue);
  transform:scaleY(0);transform-origin:top;transition:transform var(--eu-d2) var(--eu-ease)}
.eu-decision:hover{transform:translateY(-5px);box-shadow:var(--eu-e2);border-color:var(--eu-line-2)}
.eu-decision:hover::before{transform:scaleY(1)}
.eu-decision__q{margin:0 0 12px;font-size:20px;line-height:1.28;font-weight:700;color:var(--eu-ink)}
.eu-decision__q a{color:inherit}
.eu-decision__q a::after{content:"";position:absolute;inset:0}
.eu-decision p{margin:0 0 18px;color:var(--eu-muted);font-size:15.5px;line-height:1.62}
.eu-decision__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:16px;border-top:1px solid var(--eu-line)}
.eu-decision__std{color:var(--eu-blue);font-size:12px;font-weight:700;letter-spacing:.04em}
/* a control, so it carries the action colour */
.eu-decision__go{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--eu-blue-050);color:var(--eu-blue);font-size:12px;transition:all var(--eu-d2) var(--eu-ease)}
.eu-decision:hover /* a control, so it carries the action colour */
.eu-decision__go{background:var(--eu-blue);color:#fff}
.eu-decision__num{position:absolute;inset-inline-end:22px;top:22px;color:var(--eu-line-2);
  font-size:13px;font-weight:700;letter-spacing:.1em;font-variant-numeric:tabular-nums}

/* B. evidence cards — image-led service/sector cards */
.eu-evidence{position:relative;display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--eu-line);border-radius:var(--eu-radius);overflow:hidden;
  transition:transform var(--eu-d2) var(--eu-ease),box-shadow var(--eu-d2) var(--eu-ease)}
.eu-evidence:hover{transform:translateY(-5px);box-shadow:var(--eu-e2)}
.eu-evidence__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--eu-ice)}
.eu-evidence__media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--eu-ease)}
.eu-evidence:hover .eu-evidence__media img{transform:scale(1.05)}
.eu-evidence__tag{position:absolute;inset-inline-start:16px;top:16px;z-index:2;padding:6px 12px;border-radius:3px;
  background:rgba(9,29,46,.82);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.eu-evidence__body{display:flex;flex-direction:column;flex:1;padding:26px 26px 28px}
.eu-evidence__body h3{margin:0 0 10px;font-size:20px;line-height:1.3}
.eu-evidence__body h3 a{color:var(--eu-ink)}
.eu-evidence__body h3 a::after{content:"";position:absolute;inset:0}
.eu-evidence__body p{margin:0 0 16px;color:var(--eu-muted);font-size:16.5px}
.eu-evidence__std{margin-top:auto;padding-top:14px;border-top:1px solid var(--eu-line);color:var(--eu-blue);font-size:12px;font-weight:700}

/* C. governance / status cards */
.eu-gov{height:100%;padding:28px;background:#fff;border:1px solid var(--eu-line);border-radius:var(--eu-radius)}
/* the icon tile is identity, not a data reference */
.eu-gov__icon{width:46px;height:46px;display:grid;place-items:center;margin-bottom:18px;border-radius:8px;
  background:var(--eu-blue-050);color:var(--eu-blue);font-size:18px}
.eu-gov h3{margin:0 0 9px;font-size:18px;line-height:1.32}
.eu-gov p{margin:0;color:var(--eu-muted);font-size:16.5px;line-height:1.62}
/* CBAM sectors are marked because the accounting rules genuinely differ —
   the tag is information, not decoration. Blue, because it names a regulatory
   fact rather than an action. */
/* ---------------------------------------------------------------------
   The accreditation record card.
   Where a section's argument is "you can check this", the strongest thing
   that can sit beside the argument is the record itself. Deliberately not a
   facsimile of the certificate: no border ornament, no seal graphic, no
   signature line — it is a controlled summary of published data, and it says
   so. The green rule at the head ties it to the entity; the numbers are set
   in a tabular figure so they read as record values rather than as prose.
   --------------------------------------------------------------------- */
.eu-record-card{position:relative;background:var(--eu-white);
  border:1px solid var(--eu-line);border-radius:var(--eu-radius);
  padding:28px 30px 24px;box-shadow:var(--eu-e2)}
.eu-record-card::before{content:"";position:absolute;inset-inline:0;top:0;height:4px;
  border-radius:var(--eu-radius) var(--eu-radius) 0 0;
  background:linear-gradient(90deg,var(--eu-green) 0%,var(--eu-green-400) 62%,var(--eu-navy) 100%)}
[dir="rtl"] .eu-record-card::before{background:linear-gradient(270deg,var(--eu-green) 0%,var(--eu-green-400) 62%,var(--eu-navy) 100%)}
.eu-record-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--eu-line)}
.eu-record-card__label{color:var(--eu-muted);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase}
[dir="rtl"] .eu-record-card__label{letter-spacing:0;text-transform:none;font-size:13px}
.eu-record-card__body{color:var(--eu-navy);font-size:22px;font-weight:700;letter-spacing:-.02em}
.eu-record-card__rows{margin:0;display:grid;gap:0}
.eu-record-card__rows>div{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);
  gap:14px;padding:11px 0;border-bottom:1px solid var(--eu-rule,var(--eu-line))}
.eu-record-card__rows>div:last-child{border-bottom:0}
.eu-record-card__rows dt{margin:0;color:var(--eu-muted);font-size:14px;line-height:1.45}
.eu-record-card__rows dd{margin:0;color:var(--eu-ink);font-size:15px;font-weight:600;
  line-height:1.45;font-variant-numeric:tabular-nums}
.eu-record-card__foot{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--eu-line);
  color:var(--eu-muted);font-size:13.5px;line-height:1.6}
@media (max-width:520px){
  .eu-record-card{padding:22px 20px 20px}
  .eu-record-card__rows>div{grid-template-columns:1fr;gap:3px;padding:10px 0}
}
/* ---------------------------------------------------------------------
   Controlled-form controls: checkbox groups, source matrices, disclosures.
   The paper forms use tick boxes and section headings; these carry the same
   structure to the screen without inventing a different interaction.
   --------------------------------------------------------------------- */
/* A controlled form runs long. Giving it the same half-and-half split as a
   marketing section leaves the aside stranded at the top while the reader
   works down two thousand pixels of fields. The form takes the width it
   needs and the aside travels with the reader instead. */
@media (min-width:992px){
  .eu-split:has(> .eu-formcard){grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
    align-items:start;gap:clamp(32px,3.4vw,64px)}
  .eu-split:has(> .eu-formcard) > :not(.eu-formcard){position:sticky;top:120px}
}
/* ---------------------------------------------------------------------
   The video window.
   A bare play button on a dark band reads as one more control; nothing about
   it says there is something to watch. A window with its own poster, a 16:9
   screen and a play control centred in it says so at a glance. It remains a
   facade — the iframe is written on click, so the external host sees nothing
   until the reader chooses.
   --------------------------------------------------------------------- */
.eu-vwindow{margin:0;position:relative}
.eu-vwindow__screen{position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--eu-radius);background:#06131f;
  box-shadow:0 26px 70px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.10)}
.eu-vwindow__screen img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--eu-ease-out),filter var(--eu-d2) var(--eu-ease)}
.eu-vwindow__screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,19,31,.10) 0%,rgba(6,19,31,.46) 100%)}
.eu-vwindow__play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  width:100%;height:100%;border:0;background:none;cursor:pointer;padding:0}
.eu-vwindow__ring{display:grid;place-items:center;width:clamp(64px,6vw,84px);
  height:clamp(64px,6vw,84px);border-radius:50%;
  background:var(--eu-green);color:#fff;font-size:clamp(20px,1.7vw,25px);
  box-shadow:0 12px 40px rgba(0,108,76,.5);
  transition:transform var(--eu-d2) var(--eu-ease-out),background var(--eu-d1) var(--eu-ease)}
[dir="rtl"] .eu-vwindow__ring i{transform:scaleX(-1)}
.eu-vwindow__ring::before{content:"";position:absolute;width:clamp(64px,6vw,84px);
  height:clamp(64px,6vw,84px);border-radius:50%;border:2px solid rgba(127,211,180,.62);
  animation:euPulse 2.8s var(--eu-ease-out) infinite}
@keyframes euPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.eu-vwindow__play:hover .eu-vwindow__ring{transform:scale(1.07);background:var(--eu-green-600)}
.eu-vwindow:hover .eu-vwindow__screen img{transform:scale(1.04)}
.eu-vwindow__play:focus-visible{outline:3px solid var(--eu-green-300);outline-offset:4px;border-radius:var(--eu-radius)}
.eu-vwindow__frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.eu-vwindow__screen.is-playing::after,
.eu-vwindow__screen.is-playing .eu-vwindow__play,
.eu-vwindow__screen.is-playing img{display:none}
/* inside a full-bleed band the window is centred and capped, so it reads as
   a screen placed on the band rather than as the band itself */
.eu-vwindow--band{max-width:760px;margin-inline:auto;margin-top:34px}
.eu-vwindow--band .eu-vwindow__cap{text-align:center;align-items:center}
.eu-vwindow__cap{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.eu-vwindow__title{color:#fff;font-size:16px;font-weight:600;line-height:1.4}
.eu-vwindow__meta{color:rgba(255,255,255,.62);font-size:13.5px;line-height:1.5}
@media (prefers-reduced-motion:reduce){.eu-vwindow__ring::before{animation:none}}
.eu-formcard__sub{margin:22px 0 10px;color:var(--eu-ink);font-size:14px;font-weight:700;
  letter-spacing:.03em}
.eu-boxgroup{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:2px 20px}
.eu-box{display:flex;align-items:flex-start;gap:10px;padding:7px 0}
.eu-box input{margin:3px 0 0;width:17px;height:17px;flex:none;accent-color:var(--eu-green)}
.eu-box label{margin:0;font-size:15.5px;line-height:1.5;color:var(--eu-ink-2);font-weight:400;cursor:pointer}
.eu-boxset{margin-bottom:18px}
.eu-boxset__head{margin:0 0 6px;font-size:14.5px;color:var(--eu-ink);font-weight:700}
.eu-disclose{margin:0 0 12px;border:1px solid var(--eu-line);border-radius:var(--eu-radius-sm);
  background:var(--eu-white)}
.eu-disclose>summary{padding:13px 18px;cursor:pointer;font-weight:600;color:var(--eu-ink);
  font-size:15.5px;list-style:none;display:flex;align-items:center;gap:10px}
.eu-disclose>summary::-webkit-details-marker{display:none}
.eu-disclose>summary::before{content:"";width:8px;height:8px;flex:none;
  border-inline-end:2px solid var(--eu-green);border-block-end:2px solid var(--eu-green);
  transform:rotate(-45deg);transition:transform var(--eu-d1) var(--eu-ease)}
[dir="rtl"] .eu-disclose>summary::before{transform:rotate(135deg)}
.eu-disclose[open]>summary::before{transform:rotate(45deg)}
[dir="rtl"] .eu-disclose[open]>summary::before{transform:rotate(45deg)}
.eu-disclose>summary:focus-visible{outline:2px solid var(--eu-green);outline-offset:-2px}
.eu-disclose__body{padding:4px 18px 18px;border-top:1px solid var(--eu-line-2)}
@media (max-width:560px){.eu-boxgroup{grid-template-columns:1fr}}
.eu-tag-cbam{display:inline-block;margin-inline-start:6px;padding:2px 7px;border-radius:3px;
  background:var(--eu-blue-050);color:var(--eu-blue-800);
  font-size:10px;font-weight:700;letter-spacing:.09em;vertical-align:middle}
.eu-faq2__more{margin:16px 0 0;font-size:15.5px}
.eu-faq2__more a{color:var(--eu-green-700);text-decoration:underline;text-underline-offset:3px}
.eu-faq2__more a:hover{color:var(--eu-green)}
.eu-gov__link{display:inline-flex;margin-top:15px;font-size:14px;font-weight:600}
.eu-surface-navy .eu-gov{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.13)}
.eu-surface-navy /* the icon tile is identity, not a data reference */
.eu-gov__icon{background:rgba(255,255,255,.09);color:var(--eu-cyan)}
.eu-surface-navy .eu-gov p{color:rgba(255,255,255,.72)}

/* plain feature list */
.eu-checklist{margin:0;padding:0;list-style:none}
.eu-checklist li{position:relative;padding:13px 0 13px 32px;border-bottom:1px solid var(--eu-line);font-size:16.5px;line-height:1.62}
[dir="rtl"] .eu-checklist li{padding:12px 32px 12px 0}
.eu-checklist li::before{content:"";position:absolute;inset-inline-start:2px;top:19px;width:14px;height:8px;
  border-inline-start:2px solid var(--eu-teal);border-bottom:2px solid var(--eu-teal);transform:rotate(-45deg)}
.eu-checklist li:last-child{border-bottom:0}
.eu-checklist--cross li::before{width:12px;height:12px;top:17px;transform:none;border:0;
  background:linear-gradient(45deg,transparent 44%,var(--eu-stop) 44%,var(--eu-stop) 56%,transparent 56%),
             linear-gradient(-45deg,transparent 44%,var(--eu-stop) 44%,var(--eu-stop) 56%,transparent 56%)}

/* ---------------------------------------------------------------------
   10. SPLIT MEDIA / EDITORIAL BLOCKS
   --------------------------------------------------------------------- */
.eu-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.eu-split--wide-media{grid-template-columns:1.12fr 1fr}
.eu-split--flip .eu-split__media{order:2}
.eu-split__media{position:relative}
.eu-split__media figure{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--eu-radius);background:var(--eu-ice)}
.eu-split__media figure img{width:100%;height:100%;object-fit:cover}
.eu-split__media::after{content:"";position:absolute;inset-inline-end:-16px;bottom:-16px;width:120px;height:120px;
  border-inline-end:1px solid var(--eu-line-2);border-bottom:1px solid var(--eu-line-2);pointer-events:none}
.eu-split__stat{position:absolute;inset-inline-start:-18px;bottom:26px;padding:20px 24px;background:#fff;
  border:1px solid var(--eu-line);border-radius:8px;box-shadow:var(--eu-e2);max-width:250px}
.eu-split__stat strong{display:block;color:var(--eu-navy);font-size:34px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.eu-split__stat>span{display:block;margin-top:7px;color:var(--eu-muted);font-size:13px;line-height:1.45}
.eu-split__body h2{margin:0 0 18px}
.eu-split__body>p{color:var(--eu-ink-2);font-size:17px}

/* full-bleed editorial band */
.eu-band{position:relative;overflow:hidden;background:var(--eu-navy);color:rgba(255,255,255,.84)}
.eu-band__media{position:absolute;inset:0}
.eu-band__media img{width:100%;height:100%;object-fit:cover;opacity:.42}
.eu-band::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(9,29,46,.95) 0%,rgba(9,29,46,.9) 40%,rgba(9,29,46,.68) 72%,rgba(9,29,46,.5) 100%)}
[dir="rtl"] .eu-band::after{background:linear-gradient(260deg,rgba(9,29,46,.95) 0%,rgba(9,29,46,.9) 40%,rgba(9,29,46,.68) 72%,rgba(9,29,46,.5) 100%)}
.eu-band h2,.eu-band h3,.eu-band h4,.eu-band strong{color:#fff}
.eu-band p{color:rgba(255,255,255,.82)}
.eu-band .eu-kicker{color:#7FD3B4}
.eu-band a:not(.eu-btn){color:#8FD3E8}
.eu-band__inner{position:relative;z-index:2;padding-block:104px}
.eu-band__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.eu-band .eu-statuspanel{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);box-shadow:none;backdrop-filter:blur(4px)}
.eu-band .eu-statuspanel p{color:rgba(255,255,255,.86)}
.eu-band .eu-statuspanel__meta{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.64)}
.eu-band .eu-statuspanel__meta b{color:#fff}

/* ---------------------------------------------------------------------
   11. PROCESS / TIMELINE
   --------------------------------------------------------------------- */
.eu-steps{position:relative;counter-reset:eustep;margin:0;padding:0;list-style:none}
.eu-steps::before{content:"";position:absolute;inset-inline-start:23px;top:16px;bottom:16px;width:1px;background:var(--eu-line)}
.eu-steps__progress{position:absolute;inset-inline-start:23px;top:16px;width:1px;height:0;background:var(--eu-blue);z-index:1}
.eu-steps li{position:relative;padding:0 0 34px 74px;counter-increment:eustep}
[dir="rtl"] .eu-steps li{padding:0 74px 34px 0}
.eu-steps li:last-child{padding-bottom:0}
.eu-steps li::before{content:counter(eustep,decimal-leading-zero);position:absolute;inset-inline-start:0;top:-3px;z-index:2;
  width:47px;height:47px;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid var(--eu-line);
  color:var(--eu-blue);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  transition:background var(--eu-d2),color var(--eu-d2),border-color var(--eu-d2)}
.eu-steps li.is-lit::before{background:var(--eu-blue);border-color:var(--eu-blue);color:#fff}
.eu-steps h3{margin:0 0 7px;font-size:19px;line-height:1.34}
.eu-steps p{margin:0;color:var(--eu-muted);font-size:15.5px;line-height:1.64}
.eu-steps__role{display:inline-block;margin-top:9px;padding:4px 10px;border-radius:3px;background:var(--eu-soft);
  border:1px solid var(--eu-line);color:var(--eu-ink-2);font-size:11.5px;font-weight:600}
.eu-steps--split{columns:2;column-gap:60px}
.eu-steps--split::before{content:none}
.eu-steps--split .eu-steps__progress{display:none}
.eu-steps--split li{break-inside:avoid}
.eu-steps h3,.eu-steps p{max-width:62ch}
.eu-stepslayout{display:grid;grid-template-columns:minmax(280px,.82fr) 1.18fr;gap:70px;align-items:start}
.eu-stepslayout__head{position:sticky;top:120px}
.eu-stepslayout__head .eu-section-head{margin-bottom:0}
/* evidence chain — three connected stages */
.eu-chain{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;counter-reset:euchain}
.eu-chain__step{position:relative;padding:0 34px 0 0;counter-increment:euchain}
[dir="rtl"] .eu-chain__step{padding:0 0 0 34px}
.eu-chain__step::before{content:"";position:absolute;inset-inline-start:0;top:27px;inset-inline-end:0;height:1px;background:var(--eu-line)}
.eu-chain__step:last-child::before{inset-inline-end:auto;width:56px}
.eu-chain__node{position:relative;z-index:2;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;
  background:#fff;border:1px solid var(--eu-line);color:var(--eu-blue);font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 8px #fff;transition:all var(--eu-d2) var(--eu-ease)}
.eu-chain__step:hover .eu-chain__node{background:var(--eu-green);border-color:var(--eu-green);color:#fff}
.eu-chain__step h3{margin:26px 0 10px;font-size:21px;line-height:1.3}
.eu-chain__step p{margin:0 0 16px;color:var(--eu-muted);font-size:15.5px;max-width:34ch}
.eu-surface-soft .eu-chain__node{box-shadow:0 0 0 8px var(--eu-soft)}

/* horizontal regulatory timeline */
.eu-timeline{margin:0;padding:0;list-style:none;border-top:1px solid var(--eu-line)}
.eu-timeline li{display:grid;grid-template-columns:190px 1fr 220px;gap:26px;padding:24px 0;border-bottom:1px solid var(--eu-line);align-items:start}
.eu-timeline__date{color:var(--eu-ink);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.eu-timeline__date small{display:block;margin-top:5px;color:var(--eu-muted);font-size:12px;font-weight:500;letter-spacing:.02em}
.eu-timeline__what h3{margin:0 0 6px;font-size:17.5px;line-height:1.36}
.eu-timeline__what p{margin:0;color:var(--eu-muted);font-size:15px}
.eu-timeline__src{color:var(--eu-muted);font-size:12.5px;line-height:1.55}
.eu-timeline__src a{word-break:break-word}

/* ---------------------------------------------------------------------
   12. TABLES
   --------------------------------------------------------------------- */
.eu-tablewrap{overflow-x:auto;border:1px solid var(--eu-line);border-radius:var(--eu-radius);background:#fff;-webkit-overflow-scrolling:touch}
.eu-table{width:100%;min-width:560px;border-collapse:collapse;font-size:16px}
.eu-table caption{padding:16px 22px;text-align:start;color:var(--eu-muted);font-size:13px;border-bottom:1px solid var(--eu-line)}
.eu-table th,.eu-table td{padding:15px 22px;text-align:start;border-bottom:1px solid var(--eu-line);vertical-align:top;line-height:1.55}
.eu-table thead th{background:var(--eu-soft);color:var(--eu-ink);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.eu-table tbody tr:last-child td{border-bottom:0}
.eu-table tbody tr:hover{background:var(--eu-soft)}
.eu-table td strong{color:var(--eu-ink)}
.eu-table--facts th{width:38%;background:var(--eu-soft);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--eu-ink-2)}

/* comparison */
.eu-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.eu-compare__col{padding:30px;border-radius:var(--eu-radius);border:1px solid var(--eu-line);background:#fff}
.eu-compare__col--accent{border-color:rgba(0,100,161,.32);background:var(--eu-blue-050)}
.eu-compare__col h3{margin:0 0 6px;font-size:19px}
.eu-compare__col>span{display:block;margin-bottom:18px;color:var(--eu-muted);font-size:13px}

/* ---------------------------------------------------------------------
   13. STATUS PANELS (accreditation & CBAM boundary)
   --------------------------------------------------------------------- */
.eu-statuspanel{position:relative;display:block;text-transform:none;letter-spacing:normal;font-size:inherit;font-weight:400;color:var(--eu-ink-2);padding:34px 36px;border:1px solid var(--eu-line);border-radius:var(--eu-radius);background:#fff;box-shadow:var(--eu-e1)}
.eu-statuspanel::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;border-radius:var(--eu-radius) 0 0 var(--eu-radius);background:var(--eu-gold)}
[dir="rtl"] .eu-statuspanel::before{border-radius:0 var(--eu-radius) var(--eu-radius) 0}
.eu-statuspanel__head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:16px}
.eu-statuspanel__head h2,.eu-statuspanel__head h3{margin:0;font-size:21px}
.eu-statuspanel p{margin:0 0 14px;color:var(--eu-ink-2);font-size:16px;line-height:1.68}
.eu-statuspanel p:last-child{margin-bottom:0}
.eu-statuspanel__meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;padding-top:16px;border-top:1px solid var(--eu-line);
  color:var(--eu-muted);font-size:12.5px;text-transform:none;letter-spacing:normal;font-weight:400}
.eu-statuspanel__meta b{color:var(--eu-ink);font-weight:600}
.eu-statuspanel--accred::before{background:var(--eu-blue)}
/* a status that is applied for but not granted reads gold, not blue —
   blue on this site means a settled fact you can look up */
.eu-statuspanel--pending::before{background:var(--eu-gold)}
.eu-statuspanel--pending{background:linear-gradient(180deg,var(--eu-gold-050) 0%,var(--eu-white) 62%)}

/* stat row */
.eu-metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--eu-line);border-radius:var(--eu-radius);overflow:hidden;background:#fff}
.eu-metric{padding:34px 26px;border-inline-end:1px solid var(--eu-line)}
.eu-metric:last-child{border-inline-end:0}
.eu-metric strong{display:block;color:var(--eu-navy);font-size:42px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.eu-metric>span{display:block;margin-top:10px;color:var(--eu-ink-2);font-size:14.5px;font-weight:600}
.eu-metric strong .count-text,.eu-split__stat strong .count-text{font:inherit;color:inherit;display:inline;margin:0;letter-spacing:inherit}
.eu-metric>small{display:block;margin-top:6px;color:var(--eu-muted);font-size:12.5px;line-height:1.5}

/* marquee of standards */
.eu-marquee{overflow:hidden;border-block:1px solid var(--eu-line);background:var(--eu-soft);padding-block:18px;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.eu-marquee__track{display:flex;gap:44px;width:max-content;animation:eu-marq 42s linear infinite}
.eu-marquee:hover .eu-marquee__track{animation-play-state:paused}
.eu-marquee__item{display:inline-flex;align-items:center;gap:10px;color:var(--eu-ink-2);font-size:13.5px;font-weight:600;white-space:nowrap}
.eu-marquee__item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--eu-gold)}
@keyframes eu-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir="rtl"] .eu-marquee__track{animation-name:eu-marq-rtl}
@keyframes eu-marq-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* ---------------------------------------------------------------------
   14. ACCORDION / FAQ
   --------------------------------------------------------------------- */
.eu-accordion{border:1px solid var(--eu-line);border-radius:var(--eu-radius);overflow:hidden;background:#fff}
.eu-accordion__item+.eu-accordion__item{border-top:1px solid var(--eu-line)}
.eu-accordion__btn{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 26px;background:#fff;border:0;text-align:start;color:var(--eu-ink);font-size:17px;font-weight:600;
  line-height:1.45;cursor:pointer;transition:background var(--eu-d1)}
.eu-accordion__btn:hover{background:var(--eu-soft)}
.eu-accordion__btn::after{content:"";flex:none;width:13px;height:13px;margin-top:5px;
  border-inline-end:2px solid var(--eu-green);border-bottom:2px solid var(--eu-green);
  transform:rotate(45deg);transition:transform var(--eu-d2) var(--eu-ease)}
.eu-accordion__btn[aria-expanded="true"]{background:var(--eu-soft)}
.eu-accordion__btn[aria-expanded="true"]::after{transform:rotate(-135deg)}
.eu-accordion__panel{display:none;padding:0 26px 24px;color:var(--eu-ink-2);font-size:15.5px;line-height:1.7}
.eu-accordion__panel.is-open{display:block}
.eu-accordion__panel p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------------
   15. FORMS & TOOLS
   --------------------------------------------------------------------- */
.eu-formcard{padding:38px;background:#fff;border:1px solid var(--eu-line);border-radius:var(--eu-radius);box-shadow:var(--eu-e1)}
.eu-form__group{margin-bottom:30px}
.eu-form__group>legend,.eu-form__group>h3{margin:0 0 4px;padding:0;color:var(--eu-ink);font-size:16px;font-weight:700;width:auto;float:none}
.eu-form__group>p{margin:0 0 18px;color:var(--eu-muted);font-size:14px}
.eu-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.eu-f-full{grid-column:1/-1}
.eu-field label{display:block;margin-bottom:7px;color:var(--eu-ink);font-size:13.5px;font-weight:600}
.eu-field label .eu-req{color:var(--eu-stop)}
.eu-field input,.eu-field select,.eu-field textarea{width:100%;min-height:52px;padding:13px 15px;
  border:1px solid var(--eu-line-2);border-radius:var(--eu-radius-sm);background:#fff;color:var(--eu-ink);
  font-size:15px;line-height:1.4;transition:border-color var(--eu-d1),box-shadow var(--eu-d1)}
.eu-field textarea{min-height:132px;resize:vertical}
.eu-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--eu-muted) 50%),linear-gradient(135deg,var(--eu-muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 23px,calc(100% - 15px) 23px;background-size:5px 5px;background-repeat:no-repeat}
[dir="rtl"] .eu-field select{background-position:20px 23px,25px 23px}
.eu-field input:focus,.eu-field select:focus,.eu-field textarea:focus{outline:0;border-color:var(--eu-green);box-shadow:0 0 0 3px rgba(0,108,76,.14)}
.eu-field input[aria-invalid="true"],.eu-field select[aria-invalid="true"],.eu-field textarea[aria-invalid="true"]{border-color:var(--eu-stop);box-shadow:0 0 0 3px rgba(156,50,38,.1)}
.eu-field__hint{display:block;margin-top:6px;color:var(--eu-muted);font-size:12.5px;line-height:1.5}
.eu-field__error{display:none;margin-top:6px;color:var(--eu-stop);font-size:12.5px;font-weight:600}
.eu-field.has-error .eu-field__error{display:block}
.eu-errsummary{display:none;margin-bottom:24px;padding:18px 22px;border:1px solid rgba(156,50,38,.35);
  border-radius:var(--eu-radius-sm);background:#FBF1EF;color:#7C2A20}
.eu-errsummary.is-visible{display:block}
.eu-errsummary h3{margin:0 0 8px;color:#7C2A20;font-size:15px}
.eu-errsummary ul{margin:0;padding-inline-start:1.1em;font-size:14px}
.eu-agree{display:flex;gap:12px;align-items:flex-start;margin:6px 0 22px;color:var(--eu-muted);font-size:13.5px;line-height:1.6}
.eu-agree input{width:19px;height:19px;min-height:0;margin-top:2px;flex:none;accent-color:var(--eu-green)}
.eu-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-top:8px}
.eu-form__foot p{margin:0;color:var(--eu-muted);font-size:12.5px;max-width:420px}

/* register/check tools */
.eu-tool{border:1px solid var(--eu-line);border-radius:var(--eu-radius);background:#fff;overflow:hidden;box-shadow:var(--eu-e1)}
.eu-tool__head{padding:26px 30px;border-bottom:1px solid var(--eu-line);background:var(--eu-soft)}
.eu-tool__head h2,.eu-tool__head h3{margin:0 0 6px;font-size:20px}
.eu-tool__head p{margin:0;color:var(--eu-muted);font-size:14.5px}
.eu-tool__body{padding:30px}
.eu-tool__row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:end}
.eu-tool__primary input{min-height:58px;font-size:17px;letter-spacing:.02em}
.eu-tool__result{margin-top:26px}
.eu-tool__result:empty{margin:0}
.eu-result{padding:26px 28px;border:1px solid var(--eu-line);border-radius:var(--eu-radius);background:var(--eu-soft)}
.eu-result__head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:16px}
.eu-result__head h3{margin:0;font-size:18px}
.eu-result dl{display:grid;grid-template-columns:190px 1fr;gap:10px 20px;margin:0;font-size:14.5px}
.eu-result dt{color:var(--eu-muted);font-weight:600}
.eu-result dd{margin:0;color:var(--eu-ink)}
.eu-result__note{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--eu-line);color:var(--eu-muted);font-size:12.5px;line-height:1.6}
.eu-result--offline{border-style:dashed;background:#fff}
.eu-tool__states{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:18px;border-top:1px dashed var(--eu-line)}
.eu-tool__states span{padding:5px 11px;border-radius:3px;background:var(--eu-soft);border:1px solid var(--eu-line);
  color:var(--eu-muted);font-size:11.5px;font-weight:600}

/* ---------------------------------------------------------------------
   16. FILTERS / RECORDS / ARTICLES
   --------------------------------------------------------------------- */
.eu-filterbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;padding:0;list-style:none}
.eu-filterbar li{padding:9px 16px;border:1px solid var(--eu-line);border-radius:100px;background:#fff;
  color:var(--eu-ink-2);font-size:13.5px;font-weight:600;cursor:pointer;transition:all var(--eu-d1) var(--eu-ease)}
.eu-filterbar li:hover{border-color:var(--eu-green);color:var(--eu-green-700)}
.eu-filterbar li.active{background:var(--eu-navy);border-color:var(--eu-navy);color:#fff}
.eu-filterbar li sup{font-weight:500;opacity:.6;margin-inline-start:3px}

.eu-record{height:100%;padding:28px;background:#fff;border:1px solid var(--eu-line);border-radius:var(--eu-radius);
  transition:transform var(--eu-d2) var(--eu-ease),box-shadow var(--eu-d2) var(--eu-ease)}
.eu-record:hover{transform:translateY(-4px);box-shadow:var(--eu-e2)}
.eu-record__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.eu-record__year{color:var(--eu-blue);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.eu-record h3{margin:0 0 12px;font-size:18px;line-height:1.34}
.eu-record dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 4px;font-size:13.5px}
.eu-record dt{color:var(--eu-muted)}
.eu-record dd{margin:0;color:var(--eu-ink);font-weight:600}
.eu-record__foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--eu-line);font-size:12.5px;color:var(--eu-muted)}

.eu-article{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--eu-line);
  border-radius:var(--eu-radius);overflow:hidden;position:relative;
  transition:transform var(--eu-d2) var(--eu-ease),box-shadow var(--eu-d2) var(--eu-ease)}
.eu-article:hover{transform:translateY(-5px);box-shadow:var(--eu-e2)}
.eu-article__media{aspect-ratio:16/9;overflow:hidden;background:var(--eu-ice)}
.eu-article__media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--eu-ease)}
.eu-article:hover .eu-article__media img{transform:scale(1.05)}
.eu-article__body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.eu-article__cat{display:inline-flex;margin-bottom:11px;color:var(--eu-blue);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.eu-article__body h3{margin:0 0 10px;font-size:19px;line-height:1.34}
.eu-article__body h3 a{color:var(--eu-ink)}
.eu-article__body h3 a::after{content:"";position:absolute;inset:0}
.eu-article__body p{margin:0 0 16px;color:var(--eu-muted);font-size:16.5px}
.eu-article__meta{margin-top:auto;padding-top:14px;border-top:1px solid var(--eu-line);display:flex;flex-wrap:wrap;gap:6px 14px;
  color:var(--eu-muted);font-size:12px}
.eu-article__meta b{color:var(--eu-ink-2);font-weight:600}

/* inline links in running text carry an underline, not colour alone (WCAG 1.4.1) */
.eu-prose a:not(.eu-btn):not(.eu-textlink),
.eu-note a:not(.eu-btn):not(.eu-textlink),
.eu-agree a,
.eu-sources a,
.eu-table a:not(.eu-btn),
.eu-mapfig figcaption a,
.eu-split__body p a:not(.eu-btn):not(.eu-textlink),
.eu-tool a:not(.eu-btn):not(.eu-textlink),
.eu-timeline__src a,
.eu-formcard a{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:from-font}
.eu-textlink{text-decoration:underline;text-underline-offset:.24em;text-decoration-thickness:1px;text-decoration-color:currentColor}
.eu-textlink:hover{text-decoration-thickness:2px}
.eu-gov__link{text-decoration:underline;text-underline-offset:.22em}

/* horizontally scrollable regions are keyboard reachable (WCAG 2.1.1) */
.eu-tablewrap:focus-visible{outline:2px solid var(--eu-blue);outline-offset:3px}


/* =====================================================================
   V12 HEADER — utility bar, primary CTA, hamburger, mobile drawer
   ===================================================================== */
.eu-topbar__icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;border:1px solid rgba(255,255,255,.26);font-size:11.5px;transition:all var(--eu-d1) var(--eu-ease)}
.eu-topbar__icon:hover{background:#fff;border-color:#fff;color:var(--eu-navy)}

.eu-btn--cta{background:var(--eu-green);box-shadow:0 6px 18px rgba(0,108,76,.22)}
.eu-btn--cta:hover{background:var(--eu-green-600);box-shadow:var(--eu-e-green)}

/* hamburger — three rules that fold into a cross */
.eu-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;
  padding:0 11px;border:1px solid var(--eu-line-2);border-radius:var(--eu-radius-sm);background:#fff;cursor:pointer}
.eu-burger span{display:block;height:2px;width:100%;background:var(--eu-navy);border-radius:2px;
  transition:transform var(--eu-d1) var(--eu-ease),opacity 140ms linear}
.eu-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.eu-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.eu-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.mobile-nav__content{background:var(--eu-navy);color:#fff}
.mobile-nav__close{position:absolute;inset-inline-end:18px;top:18px;width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--eu-radius-sm);background:transparent;color:#fff;font-size:17px;cursor:pointer}
.mobile-nav__close:hover{background:rgba(255,255,255,.1)}
.eu-mnav{list-style:none;margin:26px 0 0;padding:0}
.eu-mnav>li{position:relative;border-bottom:1px solid rgba(255,255,255,.1)}
.eu-mnav>li>a{display:block;padding:15px 0;padding-inline-end:52px;color:#fff;font-size:17px;font-weight:600;letter-spacing:-.01em}
.eu-mnav>li>a:hover,.eu-mnav>li>a:focus-visible{color:#7FD3B4}
.eu-mnav__toggle{position:absolute;inset-inline-end:0;top:6px;width:44px;height:44px;display:grid;place-items:center;
  border:0;background:transparent;color:rgba(255,255,255,.66);font-size:13px;cursor:pointer;
  transition:transform var(--eu-d1) var(--eu-ease),color var(--eu-d1)}
.eu-mnav__toggle:hover{color:#fff}
.eu-mnav__toggle[aria-expanded="true"]{transform:rotate(180deg);color:#7FD3B4}
.eu-mnav__sub{list-style:none;margin:0 0 14px;padding:0}
.eu-mnav__sub li a{display:block;padding:9px 0;padding-inline-start:16px;color:rgba(255,255,255,.74);font-size:14.5px;
  border-inline-start:2px solid rgba(255,255,255,.14)}
.eu-mnav__sub li a:hover,.eu-mnav__sub li a:focus-visible{color:#fff;border-inline-start-color:var(--eu-green)}
.eu-mobile-extra{margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.eu-mobile-extra__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.eu-mobile-extra__links a{flex:1 1 46%;padding:12px 14px;border:1px solid rgba(255,255,255,.22);border-radius:var(--eu-radius-sm);
  color:#fff;font-size:13.5px;font-weight:600;text-align:center}
.eu-mobile-extra__links a:hover{background:rgba(255,255,255,.09)}
.eu-mobile-extra__icons{display:flex;align-items:center;gap:12px;margin-top:20px}
.eu-mobile-extra__icons a{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);
  border-radius:50%;color:#fff;font-size:15px}
.eu-mobile-extra__icons a:hover{background:#fff;color:var(--eu-navy)}
.eu-mobile-extra__lang{width:auto!important;padding:0 16px;border-radius:100px!important;font-size:13.5px;font-weight:600}

@media (max-width:1199px){
  .eu-nav{display:none}
  .eu-burger{display:flex}
}
@media (max-width:767px){
  /* the utility links live in the drawer on small screens; the bar keeps
     only the accreditation line, LinkedIn and the language toggle */
  .eu-topbar__links li:not(:last-child):not(:nth-last-child(2)){display:none}
  .eu-topbar__accred{font-size:11px;letter-spacing:0}
  .eu-topbar__inner{gap:10px}
}
@media (max-width:575px){
  .eu-header-cta .eu-btn--cta{display:none}
  .eu-topbar__accred{max-width:56vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}



/* =====================================================================
   V12.3 HOME MASTHEAD — cinematic full-bleed stage
   No container shape. The Riyadh skyline is a full-height panel bled to
   the outer edge and dissolved into the navy ground with a mask, so the
   city emerges from the page instead of sitting inside a frame. The
   oversized type crosses in front of it. Composition mirrors for RTL;
   a separate crop serves mobile.
   ===================================================================== */
.eu-mast{position:relative;isolation:isolate;overflow:hidden;
  background:var(--eu-navy);color:#fff;
  display:flex;flex-direction:column;
  min-height:clamp(600px,88vh,960px);
  padding-top:clamp(56px,6.4vw,104px)}

/* --- the skyline: bled to the edge, dissolved, never framed ---------- */
.eu-mast__scape{position:absolute;z-index:0;top:0;bottom:0;
  inset-inline-end:0;width:clamp(520px,64%,1340px);pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.20) 12%,rgba(0,0,0,.84) 34%,#000 50%);
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.20) 12%,rgba(0,0,0,.84) 34%,#000 50%)}
[dir="rtl"] .eu-mast__scape{
  -webkit-mask-image:linear-gradient(to left,transparent 0,rgba(0,0,0,.20) 12%,rgba(0,0,0,.84) 34%,#000 50%);
          mask-image:linear-gradient(to left,transparent 0,rgba(0,0,0,.20) 12%,rgba(0,0,0,.84) 34%,#000 50%)}
.eu-mast__scape picture{display:block;height:100%}
.eu-mast__scape img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:62% 42%;will-change:transform}
[dir="rtl"] .eu-mast__scape img{object-position:38% 42%}

/* colour grade: pulls the photo onto the brand navy and lifts the dusk */
.eu-mast__grade{position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(11,38,61,.62) 0%,rgba(11,38,61,.10) 34%,rgba(11,38,61,.06) 60%,rgba(11,38,61,.52) 100%),
    radial-gradient(120% 80% at 78% 34%,rgba(0,100,161,.20),transparent 70%)}
/* floor: melts the photo into the stat bar with no visible cut */
.eu-mast__floor{position:absolute;inset-inline:0;bottom:0;height:52%;
  background:linear-gradient(to top,var(--eu-navy) 22%,rgba(11,38,61,.88) 44%,rgba(11,38,61,.42) 72%,transparent 100%)}

/* --- four messages on one stage --------------------------------------- */
.eu-mast__shot{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--eu-ease-out)}
.eu-mast__shot.is-on{opacity:1}
.eu-mast__shot picture{display:block;height:100%}
.eu-mast__shot img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:62% 42%;will-change:transform}
[dir="rtl"] .eu-mast__shot img{object-position:38% 42%}

/* All four panels stay in the grid so the tallest sets the stage height and
   nothing below the hero shifts when it rotates. The inactive ones are made
   invisible and inert rather than display:none, which would drop them out of
   layout and bring the jump back. */
.eu-mast__type{display:grid}
.eu-mast__panel{grid-area:1/1;visibility:hidden;opacity:0;
  transition:opacity .55s var(--eu-ease-out),visibility 0s linear .55s}
.eu-mast__panel.is-on{visibility:visible;opacity:1;
  transition:opacity .55s var(--eu-ease-out),visibility 0s}
html:not(.eu-anim) .eu-mast__panel{transition:none}
/* where the timeline drives the swap it owns opacity outright; leaving the
   CSS fade running as well made the two panels dissolve into each other and
   the change stopped reading as a change */
.eu-mast--tl .eu-mast__panel,.eu-mast--tl .eu-mast__panel.is-on{transition:visibility 0s}

/* the rule that sweeps under the headline on every message change */
.eu-mast__sweep{display:block;width:clamp(74px,7vw,116px);height:3px;margin-top:clamp(20px,2.2vw,30px);
  background:linear-gradient(90deg,var(--eu-green-300),rgba(127,211,180,.15));
  transform-origin:left center;border-radius:2px}
[dir="rtl"] .eu-mast__sweep{background:linear-gradient(270deg,var(--eu-green-300),rgba(127,211,180,.15));
  transform-origin:right center}
.eu-mast-light .eu-mast__sweep{background:linear-gradient(90deg,var(--eu-green),rgba(0,108,76,.14))}
[dir="rtl"] .eu-mast-light .eu-mast__sweep{background:linear-gradient(270deg,var(--eu-green),rgba(0,108,76,.14))}

/* the numbered rail: which message you are on, and how long it stays */
.eu-mast__side{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,30px);min-width:0}
.eu-mast__nav{display:flex;flex-wrap:wrap;gap:8px 10px}
.eu-mast__dot{position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px 11px;background:rgba(255,255,255,.62);border:1px solid var(--eu-grey-200);
  border-radius:2px;cursor:pointer;font:inherit;color:var(--eu-muted);
  transition:background .35s ease,border-color .35s ease,color .35s ease}
.eu-mast__dot:hover{background:#fff;color:var(--eu-navy)}
.eu-mast__dot.is-on{background:#fff;border-color:var(--eu-grey-300);color:var(--eu-navy);
  box-shadow:0 10px 26px rgba(11,38,61,.10)}
.eu-mast__dot__n{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--eu-green);
  font-variant-numeric:tabular-nums}
.eu-mast__dot__l{font-size:12.5px;font-weight:600;white-space:nowrap}
.eu-mast__dot__bar{position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--eu-grey-200)}
.eu-mast__dot__bar i{display:block;height:100%;width:0;background:var(--eu-green)}
.eu-mast__dot.is-on .eu-mast__dot__bar i{width:100%;
  transition:width var(--eu-dwell,7s) linear}
.eu-mast__dot:focus-visible{outline:3px solid var(--eu-green);outline-offset:3px}
.eu-mast--paused .eu-mast__dot.is-on .eu-mast__dot__bar i{transition:none}

.eu-mast__pause{align-self:flex-start;width:34px;height:34px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--eu-grey-300);border-radius:50%;
  color:var(--eu-muted);cursor:pointer;font-size:11px;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.eu-mast__pause:hover{background:var(--eu-navy);border-color:var(--eu-navy);color:#fff}
.eu-mast__pause:focus-visible{outline:3px solid var(--eu-green);outline-offset:3px}

@media (max-width:767px){
  .eu-mast__nav{gap:6px}
  .eu-mast__dot{padding:8px 11px 10px}
  .eu-mast__dot__l{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .eu-mast__shot{transition:none}
  .eu-mast__dot__bar i{transition:none!important}
}

/* --- stage texture --------------------------------------------------- */
.eu-mast__dots{position:absolute;inset:0;z-index:1;opacity:.42;pointer-events:none;
  background-image:radial-gradient(rgba(127,211,180,.22) 1.1px,transparent 1.1px);
  background-size:20px 20px;
  -webkit-mask-image:radial-gradient(70% 62% at 22% 30%,#000 0%,rgba(0,0,0,.30) 52%,transparent 82%);
          mask-image:radial-gradient(70% 62% at 22% 30%,#000 0%,rgba(0,0,0,.30) 52%,transparent 82%)}
.eu-mast__glow{position:absolute;z-index:1;inset-inline-start:-16%;top:6%;width:min(820px,84vw);aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,108,76,.30),transparent 64%)}

/* --- the composition -------------------------------------------------- */
.eu-mast__inner{position:relative;z-index:3;flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding-bottom:clamp(40px,4.4vw,64px)}

/* eyebrow row: the accreditation pill sits inline, not bolted to the edge */
.eu-mast__brow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 clamp(18px,2vw,28px)}
.eu-mast__pill{display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 12px;border-radius:100px;background:var(--eu-navy);
  color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
[dir="rtl"] .eu-mast__pill{letter-spacing:0;text-transform:none;font-size:13px;padding:6px 12px 6px 15px}
.eu-mast__pill i{width:7px;height:7px;border-radius:50%;background:var(--eu-green-300);
  animation:eu-pulse 2.6s ease-in-out infinite}
.eu-mast__eyebrow{color:#7FD3B4;font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
[dir="rtl"] .eu-mast__eyebrow{letter-spacing:0;text-transform:none;font-size:14px}

/* --- oversized type, crossing the photo ------------------------------- */
.eu-mast__title{margin:0;font-weight:700;letter-spacing:-.044em;line-height:.94;
  font-size:clamp(40px,5.7vw,84px)}
[dir="rtl"] .eu-mast__title{letter-spacing:0;line-height:1.16;font-size:clamp(36px,5.1vw,76px)}
.eu-mast__title>span{display:block;color:#fff;
  text-shadow:0 2px 34px rgba(11,38,61,.42)}
.eu-mast__l2{-webkit-text-stroke:1.7px rgba(255,255,255,.72);color:rgba(255,255,255,.06)!important;
  text-shadow:none}
/* Arabic letterforms break under -webkit-text-stroke; use a solid tint */
[dir="rtl"] .eu-mast__l2{-webkit-text-stroke:0;color:rgba(255,255,255,.46)!important}
.eu-mast__l3 .eu-accent{color:#7FD3B4}

/* foot row: lede holds the left, the accreditation seal holds the photo edge */
.eu-mast__foot{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(24px,4vw,64px);margin-top:clamp(22px,2.4vw,34px)}

/* --- lede + actions --------------------------------------------------- */
.eu-mast__lede{margin-top:clamp(24px,2.6vw,36px)}
.eu-mast__lede p{margin:0;max-width:46ch;color:rgba(255,255,255,.82);font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.72;
  text-shadow:0 1px 20px rgba(11,38,61,.5)}
.eu-mast__actions{margin-top:clamp(22px,2.4vw,32px);gap:12px}
.eu-mast__more{display:inline-flex;align-items:center;gap:9px;margin-top:20px;color:#7FD3B4;
  font-size:13.5px;font-weight:600;text-decoration:none}
.eu-mast__more:hover{color:#fff}
[dir="rtl"] .eu-mast__more i{transform:scaleX(-1)}

/* --- accreditation seal + place, floated on the photo ----------------- */
.eu-mast__sealwrap{display:flex;flex-direction:column;align-items:flex-end;
  gap:14px;flex:0 0 auto}
[dir="rtl"] .eu-mast__sealwrap{align-items:flex-start}
.eu-mast__seal{display:grid;gap:3px;padding:16px 22px;background:#fff;border-radius:2px;
  border-inline-start:3px solid var(--eu-green);
  box-shadow:0 30px 64px rgba(4,18,30,.44)}
[dir="rtl"] .eu-mast__seal{border-inline-start:0;border-inline-end:3px solid var(--eu-green)}
.eu-mast__seal__k{color:var(--eu-muted);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
[dir="rtl"] .eu-mast__seal__k{letter-spacing:0;text-transform:none;font-size:11.5px}
.eu-mast__seal__v{color:var(--eu-navy);font-size:21px;font-weight:700;line-height:1.1;white-space:nowrap}
.eu-mast__seal__s{color:var(--eu-blue);font-size:11.5px;font-weight:600;white-space:nowrap}
.eu-mast__seal__m{display:flex;align-items:center;gap:9px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--eu-grey-200);
  color:var(--eu-muted);font-size:11px;font-weight:600;white-space:nowrap}
.eu-mast__seal__m i{width:3px;height:3px;border-radius:50%;background:var(--eu-gold);flex:0 0 auto}
.eu-mast__seal__m bdi{unicode-bidi:isolate}
.eu-mast__seal__s bdi{unicode-bidi:isolate}

.eu-mast__place{margin:0;display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px;border-radius:100px;
  background:rgba(11,38,61,.58);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  white-space:nowrap}
[dir="rtl"] .eu-mast__place{letter-spacing:0;text-transform:none;font-size:13px}
.eu-mast__pin{width:7px;height:7px;border-radius:50%;background:#7FD3B4;
  box-shadow:0 0 0 5px rgba(127,211,180,.20);animation:eu-pulse 2.6s ease-in-out infinite}

/* --- proof cards ------------------------------------------------------ */
/* Two only, and they stay inside the reading column on the light side, so
   the photograph is never covered by them. */
.eu-mast__stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;max-width:460px;margin-top:clamp(26px,2.8vw,38px)}
.eu-mast__stat{position:relative;isolation:isolate;overflow:hidden;
  padding:18px 18px 20px;border-radius:3px;
  background:rgba(255,255,255,.86);border:1px solid var(--eu-grey-200);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 14px 34px rgba(11,38,61,.10);
  transition:transform .55s cubic-bezier(.19,.75,.22,1),
             background .42s ease,border-color .42s ease,box-shadow .42s ease}
/* the accent bar grows to the full card edge on approach */
.eu-mast__stat::before{content:"";position:absolute;z-index:2;top:0;inset-inline-start:0;
  width:24px;height:2px;background:var(--eu-green);
  transition:width .62s cubic-bezier(.19,.75,.22,1),background .42s ease}
/* a mist-green wash that follows the pointer across the card face */
.eu-mast__stat::after{content:"";position:absolute;z-index:-1;inset:0;opacity:0;
  background:radial-gradient(220px 160px at var(--mx,50%) var(--my,50%),
             rgba(0,108,76,.10),transparent 72%);
  transition:opacity .45s ease}
.eu-mast__stat:hover,.eu-mast__stat:focus-within{transform:translateY(-6px);
  background:#fff;border-color:rgba(0,108,76,.32);
  box-shadow:0 24px 52px rgba(11,38,61,.17)}
.eu-mast__stat:hover::before,.eu-mast__stat:focus-within::before{width:100%;background:var(--eu-green)}
.eu-mast__stat:hover::after,.eu-mast__stat:focus-within::after{opacity:1}
.eu-mast__stat strong{display:block;color:var(--eu-navy);font-size:clamp(16px,1.2vw,19px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
[dir="rtl"] .eu-mast__stat strong{letter-spacing:0}
.eu-mast__stat>span{display:block;margin-top:6px;color:var(--eu-muted);font-size:12px;line-height:1.5}
.eu-mast__stat .eu-count{display:inline-block;font:inherit;color:inherit;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .eu-mast__stat,.eu-mast__stat::before,.eu-mast__stat::after{transition:none}
}

/* --- standards rail --------------------------------------------------- */
.eu-mast__rail{position:relative;z-index:4;overflow:hidden;padding-block:15px;
  border-top:1px solid var(--eu-grey-200);border-bottom:1px solid var(--eu-grey-200);
  background:var(--eu-grey-50)}
.eu-mast__rail .eu-marquee__track{display:flex;gap:0;width:max-content;animation:eu-marq 38s linear infinite}
.eu-mast__rail span{display:inline-flex;align-items:center;padding-inline:24px;color:var(--eu-muted);
  font-size:12px;font-weight:600;letter-spacing:.06em;white-space:nowrap}
.eu-mast__rail span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--eu-gold);margin-inline-start:24px}

@keyframes eu-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.82)}}

/* --- responsive ------------------------------------------------------- */
@media (max-width:1199px){
  .eu-mast{min-height:0;padding-bottom:0}
  .eu-mast__scape{width:clamp(420px,62%,760px)}
  .eu-mast__title{font-size:clamp(38px,6.4vw,66px)}
  .eu-mast__lede{max-width:46ch}
  .eu-mast__stats{max-width:none}
}
@media (max-width:900px){
  /* mobile is composed separately: copy first, then the skyline as its own
     full-width band. The photo never sits behind the reading column. */
  .eu-mast{min-height:0}
  .eu-mast__inner{order:1;flex:0 0 auto;padding-bottom:clamp(26px,5vw,36px)}
  .eu-mast__scape{order:2;position:relative;inset:auto;width:auto;
    height:clamp(270px,62vw,430px);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 100%)}
  [dir="rtl"] .eu-mast__scape{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 9%,#000 100%)}
  .eu-mast__scape img{object-position:50% 58%}
  [dir="rtl"] .eu-mast__scape img{object-position:50% 46%}
  .eu-mast__rail{order:3}
  .eu-mast__grade{background:linear-gradient(to bottom,rgba(11,38,61,.26) 0%,rgba(11,38,61,.06) 40%,rgba(11,38,61,.46) 100%)}
  .eu-mast__floor{height:34%;
    background:linear-gradient(to top,var(--eu-navy) 6%,rgba(11,38,61,.62) 40%,transparent 100%)}
  .eu-mast__foot{flex-direction:column;align-items:flex-start;gap:26px}
  .eu-mast__sealwrap{align-items:flex-start}
  [dir="rtl"] .eu-mast__foot{align-items:flex-end}
  [dir="rtl"] .eu-mast__sealwrap{align-items:flex-end}
  /* the caption returns to the copy column, so it reads on the light ground */
  .eu-mast__place{padding:0;background:none;border:0;backdrop-filter:none;
    -webkit-backdrop-filter:none;color:var(--eu-muted)}
  .eu-mast-light .eu-mast__place{padding:0;background:none;border:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--eu-muted)}
  .eu-mast-light .eu-mast__pin{background:var(--eu-green);box-shadow:0 0 0 5px rgba(0,108,76,.20)}
}
@media (max-width:767px){
  .eu-mast{padding-top:40px;min-height:0}
  .eu-mast__title{font-size:clamp(32px,9.4vw,46px);line-height:1.02;letter-spacing:-.032em}
  [dir="rtl"] .eu-mast__title{font-size:clamp(30px,8.6vw,42px);line-height:1.2}
  .eu-mast__l2{-webkit-text-stroke-width:1.1px}
  .eu-mast__lede{max-width:none}
  .eu-mast__actions{flex-direction:column;align-items:stretch}
  .eu-mast__actions .eu-btn{width:100%}
  .eu-mast__stats{gap:10px}
  .eu-mast__stat{padding:15px 14px 17px}
  .eu-mast__seal__m{white-space:normal;flex-wrap:wrap}
  .eu-mast__seal{padding:13px 16px}
  .eu-mast__seal__v{font-size:17px}
  .eu-mast__brow{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .eu-mast__pin,.eu-mast__pill i{animation:none}
  .eu-mast__rail .eu-marquee__track{animation:none}
}


/* ---------------------------------------------------------------------
   MASTHEAD — LIGHT VARIANT (body.eu-mast-light)  ·  V12.3
   V12 section 5 asks for 60% white and warm neutrals against 18% navy,
   so this is the shipped masthead. Same cinematic composition: the
   skyline still bleeds to the outer edge with no frame, but it is graded
   up and dissolved into a cool grey ground rather than into navy, and
   the type carries the authority in navy instead of white.
   --------------------------------------------------------------------- */
.eu-mast-light .eu-mast{color:var(--eu-ink);
  background:linear-gradient(180deg,#FAFDFB 0%,#EFF8F3 54%,#E2F1EA 100%)}

/* the photo is lifted and cooled so it belongs on a light ground */
.eu-mast-light .eu-mast__scape img{filter:saturate(1.02) contrast(1.04) brightness(.99) hue-rotate(-8deg) sepia(.10)}
/* not a white wash — a navy vignette, so the photo keeps its dusk and the
   page reads as a true light-to-dark gradient rather than a pale image */
.eu-mast-light .eu-mast__grade{background:
  linear-gradient(to right,rgba(255,253,250,.96) 0%,rgba(252,250,246,.54) 22%,rgba(252,250,246,.08) 40%,transparent 52%),
  linear-gradient(to bottom,rgba(11,38,61,.22) 0%,rgba(11,38,61,.02) 34%,rgba(11,38,61,.06) 72%,rgba(11,38,61,.22) 100%),
  radial-gradient(120% 80% at 78% 30%,rgba(0,108,76,.19),transparent 68%)}
[dir="rtl"] .eu-mast-light .eu-mast__grade{background:
  linear-gradient(to left,rgba(255,253,250,.96) 0%,rgba(252,250,246,.54) 22%,rgba(252,250,246,.08) 40%,transparent 52%),
  linear-gradient(to bottom,rgba(11,38,61,.22) 0%,rgba(11,38,61,.02) 34%,rgba(11,38,61,.06) 72%,rgba(11,38,61,.22) 100%),
  radial-gradient(120% 80% at 22% 30%,rgba(0,108,76,.19),transparent 68%)}
/* the base lands on navy so the stat strip anchors the composition */
.eu-mast-light .eu-mast__floor{height:22%;
  background:linear-gradient(to top,rgba(245,242,235,.92) 0%,rgba(251,249,245,.42) 46%,transparent 100%)}
/* on light the skyline holds more of its own edge before dissolving */
.eu-mast-light .eu-mast__scape{
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.24) 16%,rgba(0,0,0,.86) 40%,#000 58%);
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.24) 16%,rgba(0,0,0,.86) 40%,#000 58%)}
[dir="rtl"] .eu-mast-light .eu-mast__scape{
  -webkit-mask-image:linear-gradient(to left,transparent 0,rgba(0,0,0,.24) 16%,rgba(0,0,0,.86) 40%,#000 58%);
          mask-image:linear-gradient(to left,transparent 0,rgba(0,0,0,.24) 16%,rgba(0,0,0,.86) 40%,#000 58%)}

/* stage texture in navy, not mint */
.eu-mast-light .eu-mast__dots{opacity:.85;
  background-image:radial-gradient(rgba(11,38,61,.15) 1.1px,transparent 1.1px)}
.eu-mast-light .eu-mast__glow{background:radial-gradient(circle,rgba(0,108,76,.13),transparent 66%)}

/* type: navy authority, green accent, grey ghost line */
.eu-mast-light .eu-mast__eyebrow{color:var(--eu-muted)}
.eu-mast-light .eu-mast__title>span{color:var(--eu-navy);text-shadow:none}
.eu-mast-light .eu-mast__l2{-webkit-text-stroke:1.6px rgba(11,38,61,.36);color:rgba(11,38,61,.04)!important}
[dir="rtl"] .eu-mast-light .eu-mast__l2{-webkit-text-stroke:0;color:rgba(11,38,61,.28)!important}
.eu-mast-light .eu-mast__l3 .eu-accent{color:var(--eu-green)}
.eu-mast-light .eu-mast__lede p{color:var(--eu-ink-2);text-shadow:none}
.eu-mast-light .eu-mast__more{color:var(--eu-green-700)}
.eu-mast-light .eu-mast__more:hover{color:var(--eu-navy)}

/* seal + place on light */
.eu-mast-light .eu-mast__place{color:#fff}
.eu-mast-light .eu-mast__pin{background:#7FD3B4;box-shadow:0 0 0 5px rgba(127,211,180,.28)}
.eu-mast-light .eu-mast__seal{background:#fff;border:1px solid var(--eu-grey-200);
  border-inline-start:3px solid var(--eu-green);
  box-shadow:0 26px 54px rgba(11,38,61,.14)}
[dir="rtl"] .eu-mast-light .eu-mast__seal{border-inline-start:1px solid var(--eu-grey-200);
  border-inline-end:3px solid var(--eu-green)}
.eu-mast-light .eu-mast__seal__k{color:var(--eu-muted)}

/* stat strip and rail on grey rules */



/* the secondary CTA needs a light-ground treatment */
.eu-mast-light .eu-btn--onnavy{background:#fff;border-color:var(--eu-grey-300);color:var(--eu-navy)}
.eu-mast-light .eu-btn--onnavy:hover{background:var(--eu-navy);border-color:var(--eu-navy);color:#fff}

@media (max-width:900px){
  /* the skyline is its own band here, not a backdrop, so it keeps full depth
     and simply seats onto the navy plinth below it */
  .eu-mast-light .eu-mast__scape img{filter:saturate(1.06) contrast(1.04) brightness(.99)}
  .eu-mast-light .eu-mast__grade{background:
    linear-gradient(to bottom,rgba(11,38,61,.16) 0%,rgba(11,38,61,.02) 34%,rgba(11,38,61,.44) 100%)}
  .eu-mast-light .eu-mast__floor{height:32%;
    background:linear-gradient(to top,var(--eu-navy) 4%,rgba(11,38,61,.58) 42%,transparent 100%)}
  /* the caption has moved back into the light copy column */
  .eu-mast-light .eu-mast__place{padding:0;background:none;border:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--eu-muted)}
  .eu-mast-light .eu-mast__pin{background:var(--eu-green);box-shadow:0 0 0 5px rgba(0,108,76,.20)}
}

/* =====================================================================
   V12.2 CARD LANGUAGE — shaped, layered, with a real affordance
   ===================================================================== */

/* decision cards: corner notch, numbered, circular arrow affordance */
.eu-decision{position:relative;overflow:hidden;background:#fff;border:1px solid var(--eu-line);
  border-radius:var(--eu-radius);padding:32px 30px 26px}
.eu-decision::before{content:"";position:absolute;inset-inline-end:0;bottom:0;width:66px;height:66px;
  background:linear-gradient(135deg,transparent 50%,var(--eu-mist) 50%);
  transition:background var(--eu-d2) var(--eu-ease);pointer-events:none}
[dir="rtl"] .eu-decision::before{background:linear-gradient(225deg,transparent 50%,var(--eu-mist) 50%)}
.eu-decision:hover::before{background:linear-gradient(135deg,transparent 50%,var(--eu-green) 50%)}
[dir="rtl"] .eu-decision:hover::before{background:linear-gradient(225deg,transparent 50%,var(--eu-green) 50%)}
.eu-decision:hover{border-color:var(--eu-green);box-shadow:var(--eu-e2)}
.eu-decision__num{position:absolute;inset-inline-end:22px;top:20px;z-index:2;
  color:var(--eu-line-2);font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1;
  transition:color var(--eu-d2) var(--eu-ease)}
.eu-decision:hover .eu-decision__num{color:var(--eu-green)}
.eu-decision__foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:24px;padding-top:18px;border-top:1px solid var(--eu-line)}
/* a control, so it carries the action colour */
.eu-decision__go{flex:none;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--eu-line-2);color:var(--eu-ink);font-size:13px;
  transition:all var(--eu-d1) var(--eu-ease)}
.eu-decision:hover /* a control, so it carries the action colour */
.eu-decision__go{background:var(--eu-green);border-color:var(--eu-green);color:#fff;transform:rotate(-45deg)}
[dir="rtl"] .eu-decision__go i{transform:scaleX(-1)}

/* governance cards: icon in a tile that breaks the top edge */
.eu-gov{position:relative;background:#fff;border:1px solid var(--eu-line);border-radius:var(--eu-radius);
  padding:44px 28px 28px;margin-top:26px}
/* the icon tile is identity, not a data reference */
.eu-gov__icon{position:absolute;inset-inline-start:28px;top:-26px;width:56px;height:56px;display:grid;place-items:center;
  border-radius:14px 14px 14px 4px;background:var(--eu-navy);color:#7FD3B4;font-size:19px;
  box-shadow:0 14px 30px rgba(11,38,61,.20);transition:all var(--eu-d2) var(--eu-ease)}
.eu-gov:hover /* the icon tile is identity, not a data reference */
.eu-gov__icon{background:var(--eu-green);color:#fff;transform:translateY(-4px)}
.eu-gov:hover{border-color:var(--eu-green-050);box-shadow:var(--eu-e2)}
.eu-gov__link{display:inline-flex;align-items:center;gap:8px;margin-top:18px}
.eu-gov__link::after{content:"\2192";transition:transform var(--eu-d1) var(--eu-ease)}
[dir="rtl"] .eu-gov__link::after{content:"\2190"}
.eu-gov:hover .eu-gov__link::after{transform:translateX(4px)}
[dir="rtl"] .eu-gov:hover .eu-gov__link::after{transform:translateX(-4px)}

/* evidence cards: photo top, notch, circular arrow on hover */
.eu-evidence{position:relative;overflow:hidden;background:#fff;border:1px solid var(--eu-line);border-radius:var(--eu-radius)}
.eu-evidence__media{position:relative;overflow:hidden;aspect-ratio:16/10}
.eu-evidence__media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--eu-ease)}
.eu-evidence:hover .eu-evidence__media img{transform:scale(1.06)}
.eu-evidence__media::after{content:"";position:absolute;inset-inline-end:-1px;bottom:-1px;width:74px;height:52px;
  background:#fff;clip-path:polygon(24px 0,100% 0,100% 100%,0 100%);pointer-events:none}
[dir="rtl"] .eu-evidence__media::after{clip-path:polygon(0 0,calc(100% - 24px) 0,100% 100%,0 100%)}
.eu-evidence__tag{position:absolute;inset-inline-start:16px;top:16px;z-index:2;padding:6px 12px;border-radius:100px;
  background:rgba(11,38,61,.82);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
[dir="rtl"] .eu-evidence__tag{letter-spacing:0;text-transform:none;font-size:12px}
.eu-evidence__body{position:relative;padding:22px 26px 26px}
.eu-evidence__body h3{margin:0 0 10px;font-size:19px;line-height:1.32}
.eu-evidence__body h3 a{color:var(--eu-ink)}
.eu-evidence__body h3 a::after{content:"";position:absolute;inset:0}
.eu-evidence__body p{margin:0;color:var(--eu-muted);font-size:16.5px}
.eu-evidence__std{display:inline-flex;margin-top:16px;color:var(--eu-blue);font-size:12px;font-weight:700;letter-spacing:.07em}
/* at rest the arrow is structure; green arrives with the interaction */
.eu-evidence__arrow{position:absolute;inset-inline-end:22px;top:-22px;z-index:3;width:44px;height:44px;display:grid;
  place-items:center;border-radius:50%;background:var(--eu-green);color:#fff;font-size:13px;
  opacity:0;transform:translateY(8px);transition:all var(--eu-d2) var(--eu-ease)}
.eu-evidence:hover /* at rest the arrow is structure; green arrives with the interaction */
.eu-evidence__arrow{opacity:1;transform:translateY(0)}

/* sections gain a quiet decorative layer so nothing reads as a bare box */
.eu-section{position:relative;isolation:isolate}
.eu-surface-sand::before,.eu-surface-mist::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(11,38,61,.055) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(64% 58% at 88% 12%,#000,transparent 72%);
          mask-image:radial-gradient(64% 58% at 88% 12%,#000,transparent 72%)}
.eu-surface-navy::after{content:"";position:absolute;inset-inline-start:-8%;bottom:-42%;width:min(640px,64vw);
  aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(0,108,76,.30),transparent 66%)}

/* =====================================================================
   V12.4 INTERNAL PAGE HERO — the Riyadh composition, at page scale
   Same devices as the home stage rather than a different idea: warm-white
   ground, oversized navy type, the photograph bled to the outer edge and
   dissolved with no container shape, and one white card breaking the plane
   to carry the standards the page is governed by.
   ===================================================================== */
.eu-phero{position:relative;isolation:isolate;overflow:hidden;color:var(--eu-ink);
  background:linear-gradient(180deg,#FFFDFA 0%,#FBF9F5 62%,#F5F2EB 100%);
  border-bottom:1px solid var(--eu-line);
  padding-block:clamp(46px,5vw,80px) clamp(52px,5.6vw,88px)}

/* the photograph: bled, dissolved, at full strength — no veil over it */
.eu-phero__scape{position:absolute;z-index:0;top:0;bottom:0;
  inset-inline-end:0;width:clamp(430px,62%,1280px);pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.18) 12%,rgba(0,0,0,.84) 36%,#000 54%);
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.18) 12%,rgba(0,0,0,.84) 36%,#000 54%)}
[dir="rtl"] .eu-phero__scape{
  -webkit-mask-image:linear-gradient(to left,transparent 0,rgba(0,0,0,.18) 12%,rgba(0,0,0,.84) 36%,#000 54%);
          mask-image:linear-gradient(to left,transparent 0,rgba(0,0,0,.18) 12%,rgba(0,0,0,.84) 36%,#000 54%)}
.eu-phero__scape img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 52%;
  filter:saturate(1.0) contrast(1.03) hue-rotate(-6deg) sepia(.08)}
[dir="rtl"] .eu-phero__scape img{object-position:50% 52%}
/* the warm scrim only protects the reading column; the photograph keeps its own light */
.eu-phero__grade{position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(255,253,250,.96) 0%,rgba(252,250,246,.50) 22%,rgba(252,250,246,.06) 40%,transparent 52%),
    linear-gradient(to bottom,rgba(11,38,61,.20) 0%,rgba(11,38,61,.02) 38%,rgba(11,38,61,.22) 100%)}
[dir="rtl"] .eu-phero__grade{
  background:
    linear-gradient(to left,rgba(255,253,250,.96) 0%,rgba(252,250,246,.50) 22%,rgba(252,250,246,.06) 40%,transparent 52%),
    linear-gradient(to bottom,rgba(11,38,61,.20) 0%,rgba(11,38,61,.02) 38%,rgba(11,38,61,.22) 100%)}

.eu-phero__dots{position:absolute;inset:0;z-index:1;opacity:.8;pointer-events:none;
  background-image:radial-gradient(rgba(11,38,61,.15) 1.1px,transparent 1.1px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(62% 70% at 18% 42%,#000,rgba(0,0,0,.3) 54%,transparent 84%);
          mask-image:radial-gradient(62% 70% at 18% 42%,#000,rgba(0,0,0,.3) 54%,transparent 84%)}

.eu-phero__inner{position:relative;z-index:2}
.eu-phero__copy{max-width:min(730px,56%)}
.eu-phero__title{margin:0;color:var(--eu-navy);font-size:clamp(34px,4.9vw,70px);line-height:1.02;
  letter-spacing:-.038em;font-weight:700;text-wrap:balance}
[dir="rtl"] .eu-phero__title{letter-spacing:0;line-height:1.2;font-size:clamp(30px,4.3vw,60px)}
.eu-phero__copy .eu-tracer{margin-top:24px;width:84px;background:var(--eu-navy)}
.eu-phero__lead{margin:24px 0 0;max-width:48ch;color:var(--eu-ink-2);
  font-size:clamp(16px,1.3vw,18px);line-height:1.7}

/* one white card breaking the plane, the same idiom as the accreditation seal */
.eu-phero__card{position:relative;z-index:3;display:inline-block;
  margin-top:clamp(30px,3.4vw,46px);padding:18px 24px 20px;
  background:#fff;border:1px solid var(--eu-line);
  border-inline-start:3px solid var(--eu-navy);
  box-shadow:0 24px 52px rgba(11,38,61,.13)}
[dir="rtl"] .eu-phero__card{border-inline-start:1px solid var(--eu-line);
  border-inline-end:3px solid var(--eu-navy)}
.eu-phero__card__k{display:block;margin-bottom:11px;color:var(--eu-muted);
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
[dir="rtl"] .eu-phero__card__k{letter-spacing:0;text-transform:none;font-size:11.5px}
.eu-phero__meta{display:flex;flex-wrap:wrap;gap:8px}
.eu-phero__meta .eu-chip{background:var(--eu-soft);border-color:var(--eu-line);color:var(--eu-navy)}

@media (max-width:900px){
  .eu-phero__copy{max-width:none}
  .eu-phero__scape{inset-inline:0;width:auto;
    -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.46) 60%,transparent 96%);
            mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.46) 60%,transparent 96%)}
  [dir="rtl"] .eu-phero__scape{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.46) 60%,transparent 96%);
            mask-image:linear-gradient(to bottom,#000 0,rgba(0,0,0,.46) 60%,transparent 96%)}
  .eu-phero__scape img{object-position:50% 44%}
  [dir="rtl"] .eu-phero__scape img{object-position:50% 44%}
  .eu-phero__grade,[dir="rtl"] .eu-phero__grade{background:
    linear-gradient(to bottom,rgba(255,253,250,.90) 0%,rgba(252,250,246,.88) 46%,rgba(245,242,235,.97) 100%)}
  .eu-phero__card{display:block}
}
@media (max-width:575px){
  .eu-phero{padding-block:30px 40px}
  .eu-phero__title{font-size:clamp(28px,8.4vw,40px)}
  [dir="rtl"] .eu-phero__title{font-size:clamp(26px,7.6vw,36px)}
  .eu-phero__card{padding:15px 18px 17px}
}

/* =====================================================================
   V12 MOTION SYSTEM
   ===================================================================== */

/* --- preloader: the logo's own dot geometry ------------------------- */
.eu-preloader__stage{position:relative;display:grid;place-items:center;gap:18px;padding:34px 36px}
.eu-preloader__stage::before,.eu-preloader__stage::after{content:"";position:absolute;width:44px;height:44px;border-color:rgba(127,211,180,.48);pointer-events:none}
.eu-preloader__stage::before{inset-block-start:0;inset-inline-start:0;border-block-start:1px solid;border-inline-start:1px solid}
.eu-preloader__stage::after{inset-block-end:0;inset-inline-end:0;border-block-end:1px solid;border-inline-end:1px solid}
.eu-preloader__dots{display:none}
.eu-preloader__mark{width:min(280px,68vw);height:auto;opacity:0;transform:translateY(10px)}

/* --- page transition curtain ---------------------------------------- */
.eu-curtain{position:fixed;inset:0;z-index:99998;display:grid;grid-template-columns:repeat(4,1fr);pointer-events:none}
.eu-curtain span{background:var(--eu-navy);transform:scaleY(0);transform-origin:top center;
  transition:transform 460ms var(--eu-ease-mask)}
.eu-curtain span:nth-child(2){transition-delay:60ms}
.eu-curtain span:nth-child(3){transition-delay:120ms}
.eu-curtain span:nth-child(4){transition-delay:180ms}
.eu-curtain.is-down span{transform:scaleY(1)}
.eu-curtain.is-up span{transform:scaleY(0);transform-origin:bottom center}
/* first paint: cover, then lift */
.eu-has-curtain .eu-curtain:not(.is-up):not(.is-down) span{transform:scaleY(1);transform-origin:bottom center;transition:none}

/* --- contextual cursor ---------------------------------------------- */
.eu-has-cursor,.eu-has-cursor a,.eu-has-cursor button,.eu-has-cursor [role="button"]{cursor:none}
.eu-cursor{position:fixed;inset:0;z-index:99997;pointer-events:none;opacity:0;transition:opacity 220ms linear}
.eu-cursor.is-on{opacity:1}
.eu-cursor__dot,.eu-cursor__ring,.eu-cursor__label{position:fixed;top:0;left:0;will-change:transform}
.eu-cursor__dot{width:6px;height:6px;border-radius:50%;background:var(--eu-green)}
.eu-cursor__ring{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(0,108,76,.55);
  transition:width 260ms var(--eu-ease),height 260ms var(--eu-ease),border-color 260ms,background 260ms,opacity 200ms}
.eu-cursor.is-active .eu-cursor__ring{width:56px;height:56px;background:rgba(0,108,76,.1);border-color:var(--eu-green)}
.eu-cursor.is-down .eu-cursor__ring{width:26px;height:26px}
.eu-cursor.has-label .eu-cursor__ring{width:82px;height:82px;background:var(--eu-green);border-color:var(--eu-green)}
.eu-cursor.has-label .eu-cursor__dot{opacity:0}
.eu-cursor__label{display:grid;place-items:center;width:82px;height:82px;color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;text-align:center;opacity:0;transform-origin:center;
  transition:opacity 200ms linear}
.eu-cursor.has-label .eu-cursor__label{opacity:1}
[dir="rtl"] .eu-cursor__label{letter-spacing:0;text-transform:none;font-size:12.5px}

/* --- split-text line masks + heading tracer -------------------------- */
.eu-line-mask{display:block;overflow:hidden;padding-block:.06em}
.eu-tracer{display:block;height:2px;width:88px;margin-top:18px;background:var(--eu-green);
  transform:scaleX(0);transform-origin:left center;border-radius:2px}
[dir="rtl"] .eu-tracer{transform-origin:right center}
.eu-surface-navy .eu-tracer,.eu-band .eu-tracer{background:#7FD3B4}

/* --- hero motion tracers -------------------------------------------- */
.eu-tracer-line{position:absolute;height:2px;transform:scaleX(0);transform-origin:left center;z-index:3;border-radius:2px}
[dir="rtl"] .eu-tracer-line{transform-origin:right center}
.eu-tracer-line--green{background:linear-gradient(90deg,var(--eu-green),rgba(0,108,76,0))}
.eu-tracer-line--blue{background:linear-gradient(90deg,var(--eu-blue),rgba(0,100,161,0))}

/* --- premium card interaction: spotlight + restrained tilt ----------- */
.eu-decision,.eu-evidence,.eu-gov,.eu-article,[data-eu-tilt]{
  --mx:50%; --my:50%; --rx:0deg; --ry:0deg;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transition:transform 320ms var(--eu-ease),box-shadow var(--eu-d2) var(--eu-ease)}
.eu-decision::after,.eu-gov::after,[data-eu-tilt]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx) var(--my),rgba(0,108,76,.08),transparent 62%);
  transition:opacity 320ms var(--eu-ease)}
.eu-decision:hover::after,.eu-gov:hover::after,[data-eu-tilt]:hover::after{opacity:1}

/* --- interactive service selector ------------------------------------ */
.eu-selector{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:clamp(28px,3.4vw,56px);align-items:stretch}
.eu-selector__tabs{display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--eu-line)}
.eu-selector__note{position:relative;margin-top:30px;padding:24px 26px;border-radius:var(--eu-radius);
  background:var(--eu-navy);color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.68;overflow:hidden}
.eu-selector__note::after{content:"";position:absolute;inset-inline-end:-40px;bottom:-56px;width:180px;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(0,108,76,.5),transparent 68%);pointer-events:none}
.eu-selector__note strong{display:block;margin-bottom:8px;color:#fff;font-size:16px}
.eu-selector__note a{color:#7FD3B4;text-decoration:underline;text-underline-offset:.24em}
.eu-selector__note a:hover{color:#fff}
.eu-selector__tab{position:relative;width:100%;display:flex;align-items:baseline;gap:16px;padding:22px 0;
  border:0;border-bottom:1px solid var(--eu-line);background:transparent;text-align:start;cursor:pointer;
  color:var(--eu-muted);transition:color var(--eu-d1) var(--eu-ease),padding var(--eu-d2) var(--eu-ease)}
.eu-selector__tab::before{content:"";position:absolute;inset-inline-start:0;bottom:-1px;height:2px;width:0;
  background:var(--eu-green);transition:width 480ms var(--eu-ease)}
.eu-selector__tab.is-on::before{width:100%}
.eu-selector__tab.is-on{color:var(--eu-ink);padding-inline-start:14px}
.eu-selector__tab:hover{color:var(--eu-ink)}
.eu-selector__tab__n{flex:none;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--eu-green)}
.eu-selector__tab__t{font-size:22px;font-weight:700;line-height:1.24;letter-spacing:-.018em}
.eu-selector__tab__s{display:block;margin-top:5px;font-size:14px;font-weight:400;color:var(--eu-muted);line-height:1.5}
.eu-selector__stage{position:relative;border-radius:var(--eu-radius);overflow:hidden;background:var(--eu-mist)}
.eu-selector__shot{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 420ms var(--eu-ease)}
.eu-selector__shot.is-on{position:relative;opacity:1;visibility:visible}
.eu-selector__shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
.eu-selector__panel{padding:28px 30px 30px;background:#fff;border:1px solid var(--eu-line);border-top:0;
  border-radius:0 0 var(--eu-radius) var(--eu-radius)}
.eu-selector__panel h3{margin:0 0 12px;font-size:21px}
.eu-selector__panel p{margin:0 0 16px;color:var(--eu-muted);font-size:15.5px}
.eu-selector__meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
@media (max-width:991px){
  .eu-selector{grid-template-columns:1fr;gap:34px}
  .eu-selector__tab__t{font-size:19px}
}

/* --- draggable carousel ---------------------------------------------- */
.eu-carousel{position:relative}
.eu-carousel__rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:8px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.eu-carousel__rail img,.eu-carousel__rail a{-webkit-user-drag:none;user-select:none}
.eu-carousel__rail>*{flex:0 0 clamp(260px,30%,380px);scroll-snap-align:start}
.eu-carousel__rail.is-dragging{scroll-snap-type:none;cursor:grabbing}
.eu-carousel__rail::-webkit-scrollbar{height:5px}
.eu-carousel__rail::-webkit-scrollbar-thumb{background:var(--eu-line-2);border-radius:4px}
.eu-carousel__nav{display:flex;gap:10px;margin-top:26px}
.eu-carousel__nav button{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--eu-line-2);
  border-radius:50%;background:#fff;color:var(--eu-ink);cursor:pointer;transition:all var(--eu-d1) var(--eu-ease)}
.eu-carousel__nav button:hover{background:var(--eu-green);border-color:var(--eu-green);color:#fff}
[dir="rtl"] .eu-carousel__nav i{transform:scaleX(-1)}

/* --- scroll-led storytelling ------------------------------------------ */
.eu-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:start}
.eu-story__scene{opacity:.32;transition:opacity 420ms var(--eu-ease),transform 420ms var(--eu-ease)}
.eu-story__scene.is-on{opacity:1}
.eu-story__media{position:relative;border-radius:var(--eu-radius);overflow:hidden}
.eu-story__shot{position:absolute;inset:0;opacity:0;transition:opacity 520ms var(--eu-ease)}
.eu-story__shot.is-on{position:relative;opacity:1}
@media (max-width:991px){.eu-story{grid-template-columns:1fr;gap:30px}.eu-story__scene{opacity:1}}

/* --- reduced motion: everything above becomes static ------------------ */
@media (prefers-reduced-motion:reduce){
  .eu-curtain,.eu-cursor{display:none!important}
  .eu-has-cursor,.eu-has-cursor a,.eu-has-cursor button{cursor:auto}
  .eu-tracer,.eu-tracer-line{transform:scaleX(1)!important}
  .eu-decision,.eu-evidence,.eu-gov,.eu-article,[data-eu-tilt]{transform:none!important}
  .eu-selector__shot,.eu-story__shot{transition:none}
}
@media (hover:none),(pointer:coarse){
  .eu-cursor{display:none!important}
  .eu-has-cursor,.eu-has-cursor a,.eu-has-cursor button{cursor:auto}
}

/* regional map (inlined SVG) */
.eu-mapsection{background:var(--eu-navy);color:#fff}
.eu-mapsection .eu-section-head h2,.eu-mapsection .eu-section-head p{color:#fff}
.eu-mapsection .eu-section-head p{color:rgba(255,255,255,.76)}
.eu-mapsection .eu-kicker{color:var(--eu-green-300)}
.eu-mapfig{margin:0;border:1px solid rgba(143,211,232,.24);border-radius:var(--eu-radius);overflow:hidden;background:var(--eu-navy)}
.eu-map{display:block;width:100%;height:auto}
.eu-mapfig figcaption{padding:20px 26px;border-top:1px solid rgba(143,211,232,.2);
  color:rgba(255,255,255,.74);font-size:13.5px;line-height:1.68}
.eu-mapfig figcaption strong{color:#fff}
.eu-mapfig figcaption a{color:var(--eu-green-300)}
@media (max-width:575px){.eu-mapfig figcaption{padding:16px 18px;font-size:13px}}

/* article page */
.eu-articlehead{padding-block:64px 40px;border-bottom:1px solid var(--eu-line)}
.eu-articlehead h1{max-width:900px;font-size:clamp(30px,3.4vw,46px);line-height:1.12}
.eu-eeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:18px 20px;margin-top:32px;padding:22px 0 0;border-top:1px solid var(--eu-line)}
.eu-eeat div strong{text-wrap:balance}
.eu-eeat div span{display:block;color:var(--eu-muted);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.eu-eeat div strong{display:block;margin-top:5px;color:var(--eu-ink);font-size:14px;font-weight:600}
.eu-sources{padding:26px 28px;border:1px solid var(--eu-line);border-radius:var(--eu-radius);background:var(--eu-soft)}
.eu-sources h2{margin:0 0 14px;font-size:16px}
.eu-sources ol{margin:0;padding-inline-start:1.2em;font-size:14px;line-height:1.7}
.eu-sources li{margin-bottom:8px;word-break:break-word}

/* documents */
.eu-doclist{margin:0;padding:0;list-style:none;border:1px solid var(--eu-line);border-radius:var(--eu-radius);overflow:hidden;background:#fff}
.eu-doclist li{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:20px 26px;border-bottom:1px solid var(--eu-line)}
.eu-doclist li:last-child{border-bottom:0}
.eu-doclist h3{margin:0 0 5px;font-size:16px;line-height:1.36}
.eu-doclist__meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--eu-muted);font-size:12.5px}
.eu-doclist__state{white-space:nowrap}

/* related links */
.eu-related{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.eu-related a{display:block;padding:22px 24px;background:#fff;border:1px solid var(--eu-line);border-radius:var(--eu-radius);
  color:var(--eu-ink);font-size:15.5px;font-weight:600;line-height:1.4;transition:all var(--eu-d2) var(--eu-ease)}
.eu-related a span{display:block;margin-bottom:7px;color:var(--eu-muted);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.eu-related a:hover{border-color:var(--eu-green);box-shadow:var(--eu-e1);transform:translateY(-3px);color:var(--eu-green)}

/* final CTA */
.eu-cta{position:relative;overflow:hidden;background:var(--eu-navy)}
.eu-cta__media{position:absolute;inset:0}
.eu-cta__media img{width:100%;height:100%;object-fit:cover;opacity:.26}
.eu-cta__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr auto;gap:48px;align-items:center;padding-block:80px}
.eu-cta h2{margin:0 0 14px;color:#fff;font-size:clamp(28px,3vw,42px);line-height:1.12}
.eu-cta p{margin:0;max-width:660px;color:rgba(255,255,255,.8);font-size:17.5px}

/* ---------------------------------------------------------------------
   17. FOOTER
   --------------------------------------------------------------------- */
.eu-footer{background:var(--eu-navy);color:rgba(255,255,255,.7);font-size:14px}
.eu-footer__top{padding-block:clamp(48px,4.6vw,66px) clamp(26px,2.6vw,36px)}
/* V12 four-column grid: a wide brand and accreditation block, then four
   link columns. The fourth carries the trust-centre routes as a sub-block. */
.eu-footer__grid{display:grid;grid-template-columns:minmax(280px,1.05fr) 2.7fr;
  gap:clamp(30px,3.6vw,64px);align-items:start}
.eu-footer__nav{display:block}
.eu-footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 1.35fr;
  gap:clamp(20px,2.4vw,38px)}
/* the trust strip: one row of links, so the four columns stay even */
.eu-footer__strip{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 24px;
  margin-top:clamp(24px,2.6vw,34px);padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.eu-footer__strip h3{margin:0;flex:0 0 auto}
.eu-footer__strip ul{display:flex;flex-wrap:wrap;gap:10px 26px}
.eu-footer__strip li{margin:0}
.eu-footer__brand img{width:196px;height:auto;margin-bottom:18px}
.eu-footer__brand p{margin:0;color:rgba(255,255,255,.68);font-size:13.5px;line-height:1.7;max-width:34ch}
.eu-footer h3{margin:0 0 16px;color:#fff;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.eu-footer ul{margin:0;padding:0;list-style:none}
.eu-footer li{margin-bottom:8px}
.eu-footer a{color:rgba(255,255,255,.72);transition:color var(--eu-d1) var(--eu-ease)}
.eu-footer a:hover{color:#fff}
/* the link columns get a moving rule on hover, so the target is unambiguous */
.eu-footer__col li a{position:relative;display:inline-block;padding-block:1px}
.eu-footer__col li a::after{content:"";position:absolute;inset-inline-start:0;bottom:-1px;
  width:0;height:1px;background:var(--eu-green-300);transition:width .34s var(--eu-ease-out)}
.eu-footer__col li a:hover::after,.eu-footer__col li a:focus-visible::after{width:100%}
.eu-footer__strip a{position:relative}
.eu-footer__strip a:hover{text-decoration:underline;text-underline-offset:4px}
/* the column heads carry the same rule as the section kickers */
.eu-footer h3{position:relative;padding-bottom:14px}
.eu-footer h3::after{content:"";position:absolute;inset-inline-start:0;bottom:0;
  width:22px;height:2px;background:var(--eu-green)}
/* a full-width strip beneath the whole grid: neither column has to carry it,
   so neither is left with dead space under it */
/* the contact column stands where the removed one did */
.eu-footer__contact{margin:0;display:grid;gap:11px}
.eu-footer__contact li{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;
  margin:0;color:rgba(255,255,255,.72);line-height:1.6;font-size:13.5px}
.eu-footer__contact li i{margin-top:4px;color:var(--eu-green-300);font-size:13px;justify-self:center}
.eu-footer__contact bdi{unicode-bidi:isolate;white-space:nowrap}

.eu-footer__contact i{margin-top:5px;color:var(--eu-cyan);font-size:13px;justify-self:center}
.eu-footer__sep{padding:16px 0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:8px 30px;
  border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.eu-footer__accred{margin:0;display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;
  color:rgba(255,255,255,.62);font-size:12.5px}
.eu-footer__accred strong{color:#fff;font-weight:700;letter-spacing:.02em}
.eu-footer__accred i{width:3px;height:3px;border-radius:50%;background:var(--eu-gold);flex:0 0 auto}
.eu-footer__accred bdi{unicode-bidi:isolate}
.eu-footer__sep p{margin:0;color:rgba(255,255,255,.72);font-size:14px;line-height:1.7}
.eu-footer__sep strong{color:#fff}
.eu-footer__bottom{padding-block:18px 22px;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:14px 24px}
@media (min-width:992px){.eu-footer__bottom{padding-inline-end:96px}
  .eu-footer__strip{padding-inline-end:96px}}
@media (max-width:991px){.eu-footer__bottom{padding-bottom:64px}}
.eu-footer__bottom p{margin:0;color:rgba(255,255,255,.5);font-size:13px}
.eu-footer__legal{display:flex;flex-wrap:wrap;gap:20px;margin:0;padding:0;list-style:none}
.eu-footer__legal li{margin:0}
.eu-footer__legal a{font-size:13px;color:rgba(255,255,255,.6)}
.eu-footer__social{display:flex;gap:10px;margin-top:20px}
.eu-footer__social a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);
  border-radius:50%;color:rgba(255,255,255,.8);transition:all var(--eu-d1)}
.eu-footer__social a:hover{background:#fff;border-color:#fff;color:var(--eu-navy)}

/* ---------------------------------------------------------------------
   18. MOTION PRIMITIVES  (paired with energy-up-motion.js)
   --------------------------------------------------------------------- */
/* fail-safe: content is visible unless JS has confirmed it can animate */
/* V12.5 — the reveal carries real travel. The reference build rises 100px
   over a full second; this lands between that and restraint, and every
   revealed block staggers its own children off --eu-i. */
/* split-text units: the parent keeps perspective so the rotate reads as depth */
[data-eu-split]{perspective:760px}
.eu-ch,.eu-wd{display:inline-block;will-change:transform,opacity}
/* Arabic splits by word, so words must not lose their inter-word space */
[dir="rtl"] .eu-wd{margin-inline-end:.24em}

/* =====================================================================
   INDEX-2 COMPONENTS — the reference architecture in the Energy Up identity
   ===================================================================== */
/* click-to-play facade for a hosted player */
.eu-vband__play{display:inline-flex;align-items:center;gap:16px;margin-top:32px;
  padding:0;background:none;border:0;color:#fff;cursor:pointer;font:inherit}
.eu-vband__play__ring{width:62px;height:62px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:50%;background:var(--eu-green);color:#fff;font-size:16px;
  box-shadow:0 0 0 0 rgba(0,108,76,.55);animation:eu-ping 2.8s ease-out infinite;
  transition:transform .4s var(--eu-ease-out)}
[dir="rtl"] .eu-vband__play__ring i{transform:scaleX(-1)}
.eu-vband__play:hover .eu-vband__play__ring{transform:scale(1.07)}
.eu-vband__play__label{font-size:14.5px;font-weight:600;letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px}
.eu-vband__play:focus-visible{outline:3px solid var(--eu-green-300);outline-offset:6px;border-radius:4px}
@keyframes eu-ping{0%{box-shadow:0 0 0 0 rgba(0,108,76,.5)}70%{box-shadow:0 0 0 22px rgba(0,108,76,0)}100%{box-shadow:0 0 0 0 rgba(0,108,76,0)}}
@media (prefers-reduced-motion:reduce){.eu-vband__play__ring{animation:none}}
/* the player replaces the band's media once activated */
.eu-vband.is-playing .eu-vband__scrim,.eu-vband.is-playing .eu-vband__inner{opacity:0;pointer-events:none;
  transition:opacity .4s ease}
.eu-vband__frame{position:absolute;inset:0;z-index:4;width:100%;height:100%;border:0;background:#000}
/* the same facade, hosted inside the CBAM band */
.eu-band__play{margin-top:30px}
.eu-band.is-playing .eu-band__inner,.eu-band.is-playing .eu-band__media{opacity:0;pointer-events:none;transition:opacity .4s ease}

/* the accent word keeps the method on every ground */
.eu-surface-navy .eu-accent,.eu-vband .eu-accent,.eu-mast .eu-accent{color:var(--eu-green-300)}

/* a full-bleed band with motion behind the copy */
.eu-vband{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:var(--eu-navy);padding-block:clamp(64px,7vw,116px)}
.eu-vband__media{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none}
.eu-vband__still{background-size:cover;background-position:50% 50%}
.eu-vband__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,rgba(11,38,61,.94) 0%,rgba(11,38,61,.80) 42%,rgba(11,38,61,.52) 100%)}
[dir="rtl"] .eu-vband__scrim{background:linear-gradient(255deg,rgba(11,38,61,.94) 0%,rgba(11,38,61,.80) 42%,rgba(11,38,61,.52) 100%)}
.eu-vband__inner{position:relative;z-index:2}
.eu-vband__inner>h2,.eu-vband__inner>.eu-vband__text{max-width:24ch}
.eu-vband__inner>.eu-vband__text{max-width:58ch}
.eu-vband .eu-kicker{color:var(--eu-green-300);margin-bottom:18px}
.eu-vband h2{color:#fff}
.eu-vband__text{margin:22px 0 0;color:rgba(255,255,255,.84);font-size:clamp(15.5px,1.05vw,17.5px);line-height:1.75}
.eu-vband .eu-actions{margin-top:32px}
@media (prefers-reduced-motion:reduce){.eu-vband__media{display:none}
  .eu-vband{background:var(--eu-navy)}}

/* funfact-two: figures as an icon list beside a standing statement */
.eu-funfact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.4vw,76px);align-items:center}
.eu-funfact__say .eu-kicker{margin-bottom:16px}
.eu-funfact__say p{margin:20px 0 0;color:var(--eu-ink-2);line-height:1.75;max-width:46ch}
.eu-funfact__say .eu-btn{margin-top:30px}
.eu-funfact__after{margin-top:26px;color:var(--eu-muted);font-size:14px}
.eu-metrics--list{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--eu-line);border:1px solid var(--eu-line);margin:0;padding:0;list-style:none}
.eu-metrics--list .eu-metric{display:flex;align-items:flex-start;gap:16px;
  padding:26px 24px;background:#fff;transition:background .4s ease}
.eu-metrics--list .eu-metric:hover{background:var(--eu-soft)}
.eu-metric__icon{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;background:var(--eu-navy);color:#fff;font-size:16px;
  box-shadow:0 0 0 5px rgba(11,38,61,.07)}
.eu-metric__body strong{display:block;color:var(--eu-navy);font-size:clamp(24px,2.3vw,34px);
  font-weight:700;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
[dir="rtl"] .eu-metric__body strong{letter-spacing:0}
.eu-metric__body>span{display:block;margin-top:7px;color:var(--eu-ink-2);font-size:15px;line-height:1.5}
.eu-metric__body small{display:block;margin-top:5px;color:var(--eu-muted);font-size:13px}
@media (max-width:900px){.eu-funfact{grid-template-columns:1fr}}
@media (max-width:575px){.eu-metrics--list{grid-template-columns:1fr}}

/* history-area: the dated list sits inside one bordered box */
.eu-histbox{padding:clamp(24px,3vw,44px);background:#fff;
  border:1px solid var(--eu-line);box-shadow:0 24px 56px rgba(11,38,61,.07)}

/* feature-two: an icon tile, a standard reference, and one emphasised card */
.eu-gov{position:relative;isolation:isolate;transition:transform .5s var(--eu-ease-out),
  border-color .4s ease,box-shadow .4s ease,background .4s ease}
.eu-gov__std{display:block;margin-bottom:10px;color:var(--eu-blue);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
[dir="rtl"] .eu-gov__std{letter-spacing:0;text-transform:none;font-size:12.5px}
[dir="rtl"] .eu-gov__arrow .fa-arrow-right{transform:scaleX(-1)}
.eu-gov__arrow{display:inline-grid;place-items:center;width:26px;height:26px;margin-inline-start:10px;
  border-radius:50%;border:1px solid currentColor;font-size:10px;vertical-align:middle;
  transition:background .35s ease,color .35s ease,transform .35s ease}
.eu-gov__link:hover .eu-gov__arrow{background:var(--eu-green);border-color:var(--eu-green);
  color:#fff;transform:translateY(-2px)}
.eu-gov.is-active{background:var(--eu-navy);border-color:var(--eu-navy);
  box-shadow:0 30px 64px rgba(11,38,61,.22)}
.eu-gov.is-active h3,.eu-gov.is-active .eu-gov__link{color:#fff}
.eu-gov.is-active p{color:rgba(255,255,255,.78)}
.eu-gov.is-active .eu-gov__std{color:var(--eu-green-300)}
.eu-gov.is-active /* the icon tile is identity, not a data reference */
.eu-gov__icon{background:rgba(255,255,255,.10);color:#fff}
.eu-gov:hover{transform:translateY(-6px)}

/* faq-one: numbered disclosure beside a standing panel */
.eu-faq2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,68px);align-items:start}
.eu-faq2__side .eu-kicker{margin-bottom:16px}
.eu-faq2__text{margin:20px 0 0;color:var(--eu-ink-2);line-height:1.75}
.eu-faq2__box{margin-top:28px;padding:26px 28px;background:var(--eu-soft);
  border:1px solid var(--eu-line);border-inline-start:3px solid var(--eu-navy)}
[dir="rtl"] .eu-faq2__box{border-inline-start:1px solid var(--eu-line);border-inline-end:3px solid var(--eu-navy)}
.eu-faq2__box h3{margin:0 0 14px;font-size:15.5px;font-weight:700;color:var(--eu-navy)}
.eu-faq2__side .eu-btn{margin-top:28px}
/* the numbered question row */
.eu-accordion__btn{display:flex;align-items:flex-start;gap:16px;width:100%;text-align:start}
.eu-accordion__n{flex:0 0 auto;min-width:30px;color:var(--eu-blue);
  font-size:12px;font-weight:700;letter-spacing:.06em;padding-top:.28em;font-variant-numeric:tabular-nums}
.eu-accordion__q{flex:1 1 auto}
.eu-accordion__item[data-open] .eu-accordion__n,
.eu-accordion__btn[aria-expanded="true"] .eu-accordion__n{color:var(--eu-green)}
@media (max-width:900px){.eu-faq2{grid-template-columns:1fr}}

html.eu-anim .eu-reveal:not(.is-in){opacity:0;transform:translateY(56px)}
html.eu-anim .eu-reveal.is-in{opacity:1;transform:none;
  transition:opacity 940ms var(--eu-ease-out),transform 940ms var(--eu-ease-out);
  transition-delay:calc(var(--eu-i,0) * 70ms)}
/* directional variants for split compositions */
html.eu-anim .eu-reveal--start:not(.is-in){opacity:0;transform:translateX(-58px)}
html.eu-anim[dir="rtl"] .eu-reveal--start:not(.is-in){transform:translateX(58px)}
html.eu-anim .eu-reveal--end:not(.is-in){opacity:0;transform:translateX(58px)}
html.eu-anim[dir="rtl"] .eu-reveal--end:not(.is-in){transform:translateX(-58px)}
html.eu-anim .eu-reveal--start.is-in,html.eu-anim .eu-reveal--end.is-in{transform:none}
/* a lift with scale for cards — depth, not just position */
html.eu-anim .eu-reveal--lift:not(.is-in){opacity:0;transform:translateY(64px) scale(.965)}
html.eu-anim .eu-reveal--lift.is-in{transform:none}
html.eu-anim .eu-reveal-mask:not(.is-in){clip-path:inset(0 100% 0 0)}
html.eu-anim .eu-reveal-mask.is-in{clip-path:inset(0 0 0 0);transition:clip-path 1100ms var(--eu-ease-out)}
html.eu-anim[dir="rtl"] .eu-reveal-mask:not(.is-in){clip-path:inset(0 0 0 100%)}
html.eu-anim .eu-stagger:not(.is-in)>*{opacity:0;transform:translateY(46px) scale(.978)}
html.eu-anim .eu-stagger.is-in>*{opacity:1;transform:none;
  transition:opacity 860ms var(--eu-ease-out),transform 860ms var(--eu-ease-out);
  transition-delay:calc(var(--eu-i,0) * 88ms)}
/* the image inside a revealed card settles out of a slow push-in */
html.eu-anim .eu-reveal img,html.eu-anim .eu-stagger img{will-change:transform}
html.eu-anim .eu-zoom{overflow:hidden}
html.eu-anim .eu-zoom>img:not(.is-in),html.eu-anim .eu-zoom picture:not(.is-in)>img{transform:scale(1.14)}
html.eu-anim .eu-zoom>img.is-in,html.eu-anim .eu-zoom picture.is-in>img{transform:none;
  transition:transform 1500ms var(--eu-ease-out)}
html:not(.eu-anim) .eu-preloader{display:none}
.eu-parallax{will-change:transform}

/* ---------------------------------------------------------------------
   19. ARABIC / RTL
   --------------------------------------------------------------------- */
html[lang="ar"] body,[dir="rtl"] body{font-family:"EU Arabic","Noto Sans Arabic",var(--eu-font);font-size:17px;line-height:1.9}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,[dir="rtl"] h5,[dir="rtl"] h6{
  font-family:"EU Arabic Display","Noto Kufi Arabic","EU Arabic",sans-serif;font-weight:600;letter-spacing:0;line-height:1.42}
[dir="rtl"] .eu-hero__title{font-size:clamp(28px,3.5vw,50px);line-height:1.32;letter-spacing:0;max-width:800px}
[dir="rtl"] .eu-pagehero h1{font-size:clamp(25px,3vw,42px);line-height:1.36;letter-spacing:0;max-width:820px}
[dir="rtl"] .eu-display-1{font-size:clamp(29px,3.6vw,50px);line-height:1.34;letter-spacing:0}
[dir="rtl"] .eu-display-2{font-size:clamp(25px,2.9vw,40px);line-height:1.38;letter-spacing:0}
[dir="rtl"] .eu-display-3{font-size:clamp(20px,1.9vw,28px);line-height:1.45;letter-spacing:0}
[dir="rtl"] .eu-kicker{letter-spacing:0;font-size:12.5px;text-transform:none;font-weight:700}
[dir="rtl"] .eu-hero__text,[dir="rtl"] .eu-leadtext,[dir="rtl"] .eu-pagehero p{line-height:1.9;font-size:17.5px}
[dir="rtl"] p,[dir="rtl"] li{line-height:1.9}
[dir="rtl"] .eu-badge,[dir="rtl"] .eu-topbar__accred,[dir="rtl"] .eu-accredstrip__cell span,
[dir="rtl"] .eu-evidence__tag,[dir="rtl"] .eu-article__cat,[dir="rtl"] .eu-related a span,
[dir="rtl"] .eu-eeat div span,[dir="rtl"] .eu-footer h3,[dir="rtl"] .eu-table thead th{letter-spacing:0;text-transform:none;font-size:12px}
[dir="rtl"] .eu-btn{font-size:15px;font-weight:600}
[dir="rtl"] .main-menu .main-menu__list>li>a{font-size:15.5px;padding-inline:11px}
@media (max-width:1700px){
  .main-menu .main-menu__list>li>a{padding-inline:10px;font-size:14px}
  [dir="rtl"] .main-menu .main-menu__list>li>a{padding-inline:9px;font-size:14.5px}
  .eu-header-cta .eu-btn--cta{padding:0 18px;font-size:13.5px}
  .main-header__logo img{height:48px;max-width:200px}
}
@media (max-width:1440px){
  .main-menu .main-menu__list>li>a{padding-inline:8px;font-size:13.5px}
  [dir="rtl"] .main-menu .main-menu__list>li>a{padding-inline:7px;font-size:14px}
  .main-header__logo img{height:44px;max-width:182px}
  .eu-header-cta .eu-btn--cta{padding:0 15px;font-size:13px}
}
@media (max-width:1320px){
  .main-menu .main-menu__list>li>a{padding-inline:6.5px;font-size:13px}
  [dir="rtl"] .main-menu .main-menu__list>li>a{padding-inline:6px;font-size:13.5px}
  .main-header__logo img{height:40px;max-width:166px}
}
[dir="rtl"] .eu-hero__grid,[dir="rtl"] .eu-marquee{direction:ltr}
[dir="rtl"] .eu-marquee__item{direction:rtl}
[dir="rtl"] .eu-steps li::before{font-family:var(--eu-font)}
[dir="rtl"] .eu-decision__num,[dir="rtl"] .eu-timeline__date,[dir="rtl"] .eu-metric strong,
[dir="rtl"] .eu-split__stat strong,[dir="rtl"] .eu-record__year{font-family:var(--eu-font)}
bdi,.eu-ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
[dir="rtl"] .eu-mega>ul{direction:rtl}
[dir="rtl"] .eu-split__media::after{inset-inline-end:auto;inset-inline-start:-16px;border-inline-end:0;border-inline-start:1px solid var(--eu-line-2)}

/* ---------------------------------------------------------------------
   20. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width:1399px){
  :root{--eu-container:1160px}
  .eu-hero__slide{min-height:600px}
}
@media (max-width:1240px){
  .main-header__inner{min-height:78px}
  .main-header__logo img{height:46px;max-width:202px}
  .eu-nav .main-menu{display:none}
  .eu-burger{display:flex}
  .eu-header-cta{margin-inline-start:auto}
}
@media (max-width:1199px){
  :root{--eu-sec:84px;--eu-sec-tight:60px;--eu-sec-air:112px}
  .main-menu .main-menu__list>li>a{padding-inline:9px;font-size:13.5px}
  .eu-header-cta .eu-btn{padding:0 16px;font-size:13.5px}
  .eu-grid--4{grid-template-columns:repeat(2,1fr)}
  .eu-metrics{grid-template-columns:repeat(2,1fr)}
  .eu-metric:nth-child(2n){border-inline-end:0}
  .eu-metric:nth-child(-n+2){border-bottom:1px solid var(--eu-line)}
  .eu-split{gap:44px}
  .eu-accredstrip__inner{grid-template-columns:repeat(2,1fr)}
  .eu-accredstrip__cell{border-bottom:1px solid var(--eu-line)}
  .eu-accredstrip__cell:nth-child(2n){border-inline-end:0}
  .eu-related{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991px){
  .eu-topbar__std,.eu-topbar__links .eu-hide-md{display:none}
  .eu-topbar__inner{gap:14px}
  .eu-topbar{font-size:11.5px}
  .main-header__inner{min-height:76px}
  .main-header__logo img{height:44px;max-width:196px}
  .eu-nav .main-menu,.eu-header-cta .eu-apply{display:none}
  .eu-burger{display:flex}
  .eu-hero__slide{min-height:auto;padding-block:82px 96px}
  .eu-hero__title{font-size:clamp(30px,5.2vw,42px)}
  .eu-accredstrip{margin-top:-30px}
  .eu-split,.eu-band__grid,.eu-compare,.eu-cta__inner{grid-template-columns:1fr;gap:36px}
  .eu-split--flip .eu-split__media{order:0}
  .eu-split__stat{position:static;margin-top:-40px;margin-inline-start:18px;max-width:none;width:calc(100% - 36px)}
  .eu-grid--3{grid-template-columns:repeat(2,1fr)}
  .eu-steps--split{columns:1}
  .eu-stepslayout{grid-template-columns:1fr;gap:36px}
  .eu-stepslayout__head{position:static}
  .eu-chain{grid-template-columns:1fr;gap:34px}
  .eu-chain__step{padding:0}
  .eu-chain__step::before{inset-inline-end:auto;inset-inline-start:27px;top:56px;bottom:-34px;width:1px;height:auto}
  .eu-chain__step:last-child::before{display:none}
  .eu-timeline li{grid-template-columns:1fr;gap:10px}
  .eu-pagehero{min-height:300px}
  .eu-pagehero__inner{padding-block:52px}
  .eu-footer__grid{grid-template-columns:1fr;gap:34px}
  .eu-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  .eu-footer__brand{grid-column:1/-1}
  .eu-result dl{grid-template-columns:1fr}
  .eu-result dt{margin-top:8px}
}
@media (max-width:767px){
  :root{--eu-sec:64px;--eu-sec-tight:48px;--eu-sec-air:84px;--eu-gutter:18px}
  body{font-size:16px}
  .eu-hero__slide{padding-block:64px 84px}
  .eu-hero__text{font-size:16.5px}
  .eu-hero .owl-dots{inset-inline-end:auto;inset-inline-start:var(--eu-gutter);bottom:30px}
  .eu-hero__index{display:none}
  .eu-hero__trust{font-size:12px;gap:8px 12px}
  .eu-hero__trust span+span::before{display:none}
  .eu-accredstrip{margin-top:0;padding-top:0}
  .eu-accredstrip__inner{grid-template-columns:1fr}
  .eu-accredstrip__cell{border-inline-end:0}
  .eu-accredstrip__cell:last-child{border-bottom:0}
  .eu-grid,.eu-grid--2,.eu-grid--3,.eu-grid--4,.eu-related{grid-template-columns:1fr}
  .eu-metrics{grid-template-columns:1fr}
  .eu-metric{border-inline-end:0;border-bottom:1px solid var(--eu-line)}
  .eu-metric:last-child{border-bottom:0}
  .eu-fields{grid-template-columns:1fr}
  .eu-formcard,.eu-tool__body{padding:24px 20px}
  .eu-tool__head{padding:22px 20px}
  .eu-tool__row{grid-template-columns:1fr}
  .eu-section-head{margin-bottom:36px}
  .eu-pagehero{min-height:280px}
  .eu-pagehero__frame{inset:10px}
  .eu-pagehero h1{font-size:clamp(26px,7vw,34px)}
  .eu-pagehero p{font-size:16px}
  .eu-steps li{padding-inline-start:60px}
  [dir="rtl"] .eu-steps li{padding-inline-start:0;padding-inline-end:60px}
  .eu-steps li::before{width:40px;height:40px;font-size:12px}
  .eu-steps::before,.eu-steps__progress{inset-inline-start:20px}
  .eu-doclist li{grid-template-columns:1fr;gap:12px}
  .eu-band__inner{padding-block:70px}
  .eu-cta__inner{padding-block:58px}
  .eu-float{inset-inline-end:14px;bottom:14px}
  .eu-whatsapp{width:52px;height:52px;font-size:24px}
  .eu-statuspanel{padding:26px 22px}
  .eu-quote{padding:22px 22px;font-size:19px}
  .eu-footer__grid{grid-template-columns:1fr}
  /* folded: one column of disclosures, contact and accreditation stay open */
  body.eu-foot-folded .eu-footer__cols{grid-template-columns:1fr;gap:0}
  body.eu-foot-folded .eu-footer__col{border-bottom:1px solid rgba(255,255,255,.10)}
  body.eu-foot-folded .eu-footer__col h3{margin:0;padding:0}
  body.eu-foot-folded .eu-footer__col h3::after{display:none}
  body.eu-foot-folded .eu-footer__fold{display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:15px 0;background:none;border:0;color:#fff;cursor:pointer;
    font:inherit;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:start}
  [dir="rtl"] body.eu-foot-folded .eu-footer__fold{letter-spacing:0;text-transform:none;font-size:13.5px}
  body.eu-foot-folded .eu-footer__fold i{color:var(--eu-green-300);font-size:12px;transition:transform .3s ease}
  body.eu-foot-folded .eu-footer__col.is-open .eu-footer__fold i{transform:rotate(45deg)}
  body.eu-foot-folded .eu-footer__col ul{display:none;padding-bottom:14px}
  body.eu-foot-folded .eu-footer__col.is-open ul{display:block}
  /* the office details are the one thing a phone visitor most often wants */
  body.eu-foot-folded .eu-footer__col--contact ul{display:grid}
  body.eu-foot-folded .eu-footer__col--contact .eu-footer__fold{pointer-events:none}
  body.eu-foot-folded .eu-footer__col--contact .eu-footer__fold i{display:none}
  .eu-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 20px}
  .eu-footer__col--contact{grid-column:1 / -1}
  .eu-footer__top{padding-block:54px 40px}
  .eu-marquee{mask-image:none}
}

/* ---------------------------------------------------------------------
   21. REDUCED MOTION / PRINT
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .eu-reveal,.eu-stagger>*{opacity:1!important;transform:none!important}
  .eu-reveal-mask{clip-path:none!important}
  .eu-marquee__track{animation:none!important}
  .eu-hero__media img{transform:none!important}
  .custom-cursor__cursor,.custom-cursor__cursor-two{display:none!important}
}
@media print{
  .eu-topbar,.main-header,.stricky-header,.eu-float,.eu-footer__legal,.eu-preloader,.mobile-nav__wrapper{display:none!important}
  body{font-size:11pt;color:#000}
  .eu-pagehero{min-height:auto;background:#fff;color:#000}
  .eu-pagehero__media,.eu-pagehero__scrim,.eu-pagehero__frame{display:none}
  .eu-pagehero h1,.eu-pagehero p{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}

/* =====================================================================
   MOBILE ERGONOMICS (360 / 390 / 430)
   Touch targets and label sizes measured on device widths rather than
   assumed: standalone links were landing at 23-24px high and several
   label styles at 10-11.5px, both below what a thumb and an eye need.
   ===================================================================== */
@media (pointer:coarse){
  /* standalone links get a real target. Links inline in prose are left
     alone — WCAG 2.5.8 exempts them, and padding there breaks line rhythm. */
  .eu-footer__col li a,.eu-footer__strip a,.eu-footer__legal a,
  .eu-topbar__links a,.eu-mast__more,.eu-textlink,.eu-gov__link,
  .eu-related a,.eu-crumbs a,.eu-mnav a{
    min-height:44px;display:inline-flex;align-items:center}
  .eu-footer__contact li a{min-height:40px}
  /* link lists inside content sections are navigation too, not prose */
  .eu-checklist li a,.eu-list li a,.eu-selector__note a,.eu-sectors a,
  .eu-card a:not(.eu-btn),.eu-links a,.eu-grid li a{min-height:44px;display:inline-flex;align-items:center}
  .eu-topbar__icon{width:38px;height:38px}
  .eu-topbar__lang{min-width:46px;min-height:38px;display:inline-grid;place-items:center}
  /* the accordion row is the primary control on the FAQ pages */
  .eu-accordion__btn{min-height:52px}
}
@media (max-width:767px){
  /* no label below 12px: uppercase letterspaced type at 10px is not
     readable at arm's length on a phone */
  .eu-kicker,.eu-menu-head,.eu-steps__role,.eu-evidence__tag,
  .eu-topbar__accred,.eu-mast__pill,.eu-mast__eyebrow,.eu-mast__place,
  .eu-mast__seal__k,.eu-mast__seal__s,.eu-mast__seal__m,
  .eu-phero__card__k,.eu-footer__seal__k,
  .eu-footer__accred,.eu-chip,.eu-badge{font-size:12.5px}
  /* the RTL variants carry higher specificity and would otherwise win */
  [dir="rtl"] .eu-mast__seal__k,[dir="rtl"] .eu-phero__card__k,
  [dir="rtl"] .eu-mast__place,[dir="rtl"] .eu-mast__eyebrow,
  [dir="rtl"] .eu-mast__pill,[dir="rtl"] .eu-footer__seal__k{font-size:13px}
  .eu-mast__seal__k,.eu-mast__place,.eu-menu-head{letter-spacing:.10em}
  .eu-footer h3,.eu-footer__fold{font-size:12.5px}
}

/* ---- bot trap -------------------------------------------------------
   Injected once inside every controlled form at build time. It must be
   unreachable by sight, by keyboard and by assistive technology, but must
   stay in the layout tree — display:none makes some bots skip it, which is
   the one thing it exists to catch. */
.eu-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}


/* =====================================================================
   FIXES FOLDED IN FROM THE INTERIM PATCH (eu-fixes.js)
   Cursor, top bar, carousel rail, card baselines, mast mask, flag
   glyphs, the accreditation dialog. Placed BEFORE the mobile block
   deliberately: these were injected at runtime and outranked the
   type and touch floors below.
   ===================================================================== */
html,
body,
.eu-has-cursor,
.eu-has-cursor a,
.eu-has-cursor button,
.eu-has-cursor [role="button"],
.eu-has-cursor input,
.eu-has-cursor textarea,
.eu-has-cursor select { cursor: auto !important; }
.eu-has-cursor a,
.eu-has-cursor button,
.eu-has-cursor [role="button"],
.eu-has-cursor label,
.eu-has-cursor summary { cursor: pointer !important; }
.eu-has-cursor input[type="text"],
.eu-has-cursor input[type="email"],
.eu-has-cursor input[type="search"],
.eu-has-cursor textarea { cursor: text !important; }
.custom-cursor,
.eu-cursor { display: none !important; }
.eu-topbar__accred {
  min-width: 0;                 
  overflow: hidden;
  text-overflow: ellipsis;      
}
@media (max-width: 767px) {
  .eu-topbar__accred { display: none; }
}
.eu-evidence { height: 100%; }
.eu-evidence__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.eu-evidence__std { margin-top: auto; }
.eu-carousel__rail {
  scrollbar-width: none;            
  -ms-overflow-style: none;         
}
.eu-carousel__rail::-webkit-scrollbar { width: 0; height: 0; }
.eu-mast__scape {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0,
                      rgba(0,0,0,.30) 10%, rgba(0,0,0,.72) 24%, rgba(0,0,0,1) 40%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0) 0,
                      rgba(0,0,0,.30) 10%, rgba(0,0,0,.72) 24%, rgba(0,0,0,1) 40%);
}
.eu-mast__shot img {
  object-position: 50% 44%;
}
@font-face {
  font-family: "EU Country Flags";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF;
  src: local("EU Country Flags");
}
.eu-x-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  min-width: 18px;
  font-size: 1.05em;
  line-height: 1;
  font-style: normal;
  font-family: "EU Country Flags", "Apple Color Emoji", "Segoe UI Emoji",
               "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}
.eu-x-flag--code {
  font-family: inherit;
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 4px;
  border: 1px solid currentColor;
  border-radius: 3px;
  opacity: .7;
}
.eu-x-sealbtn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .18s;
}
.eu-x-sealbtn:hover { text-decoration-color: rgba(0, 108, 76, .85); }
.eu-x-sealbtn:focus-visible { outline: 3px solid #0064A1; outline-offset: 3px; }
.eu-x-split--solo { display: block !important; }
.eu-x-split--solo > * { max-width: 62ch; }
.eu-x-modal[hidden] { display: none !important; }
.eu-x-modal {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.eu-x-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 38, 61, .55);
  backdrop-filter: blur(2px);
}
.eu-x-modal__box {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(11, 38, 61, .34);
  padding: 8px;
}
.eu-x-modal__box:focus { outline: none; }
.eu-x-modal__close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 38, 61, .06);
  color: #0B263D;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.eu-x-modal__close:hover { background: rgba(11, 38, 61, .12); }
.eu-x-modal__close:focus-visible { outline: 3px solid #0064A1; outline-offset: 2px; }
.eu-x-modal .eu-record-card {
  margin: 0;
  width: 100%;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .eu-x-sealbtn { transition: none; }
}

/* =====================================================================
   MOBILE CORRECTIONS
   Measured at 390x844 on the built site, not assumed:
   28 tap targets under the 44px minimum, 41 text nodes at 12–13px, a
   table 808px wide inside a 390px viewport, and 64px of padding on both
   ends of eleven stacked sections. The identity is untouched — these
   are floors and rhythm, not a restyle.
   ===================================================================== */
@media (max-width: 640px){

  /* 1 — Text floor. Nothing that carries meaning drops below 14px on a
     phone; label-like text keeps its role through weight and spacing
     rather than by shrinking below readable size. */
  .eu-hero__eyebrow, .eu-kicker, .eu-eyebrow, .eu-mast__tab, .eu-mast__eyebrow,
  .eu-card__std, .eu-evi__std, .eu-selector__std, .eu-field__hint,
  .eu-record-card__rows small, .eu-badge, .eu-chip, .eu-tag,
  .eu-accredstrip__cell small, .eu-accredstrip__cell span,
  .eu-foot small, .eu-note, .eu-note-inline, figcaption, small{
    font-size: .875rem !important;   /* 14px */
    line-height: 1.5;
  }
  .eu-mast__seal, .eu-mast__seal *{ font-size: .875rem }

  /* 2 — Touch floor. A control that can be tapped is at least 44px on its
     short side; the hero slide tabs were 40px and the social links 38px. */
  .eu-mast__tabs a, .eu-mast__tabs button, .eu-mast__nav a, .eu-mast__nav button,
  .eu-tabs a, .eu-tabs button, .eu-selector__tab,
  .eu-social a, .eu-foot a, .eu-utility a, .eu-breadcrumb a{
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .eu-foot a, .eu-breadcrumb a{ justify-content: flex-start }
  /* inline links inside running text are exempt — a 44px box mid-sentence
     breaks the line box and is not what the guidance is for */
  p a, li a, dd a, .eu-chair a{ min-height: 0; min-width: 0; display: inline }

  /* 3 — Wide content scrolls inside itself. The page body must never
     scroll sideways; a table that cannot fit gets its own scroller. */
  .eu-table, table{ display: block; overflow-x: auto; -webkit-overflow-scrolling: touch }
  .eu-table thead, table thead{ white-space: nowrap }
  pre, .eu-code{ overflow-x: auto }

  /* 4 — Vertical rhythm. Eleven sections at 64/64 spend 1,408px of a
     phone page on empty ends. 44/44 keeps the separation legible and
     returns roughly a screen and a half. */
  .eu-section{ padding-top: 2.75rem; padding-bottom: 2.75rem }
  .eu-section--tight{ padding-top: 2rem; padding-bottom: 2rem }
  .eu-split{ gap: 1.75rem }
  .eu-record-card__rows > div{ padding-block: .6rem }

  /* 5 — Stacked actions get full width so the thumb has a real target
     instead of two half-buttons competing on one line. */
  .eu-actions{ flex-direction: column; align-items: stretch; gap: .6rem }
  .eu-actions .eu-btn{ width: 100%; justify-content: center }
}

/* Second pass — the exact selectors the 390px measurement returned, not
   guessed ones. Sentence-carrying text gets the 14px floor; numerals,
   eyebrows and letter-spaced labels keep their size because shortness and
   spacing carry them. bdi inherits, so the parents are what get raised. */
@media (max-width: 640px){
  .eu-steps__role, .eu-record-card__label, .eu-record-card__foot,
  .eu-vwindow__meta, .eu-accredstrip__cell, .eu-accredstrip__cell strong,
  .eu-mast__card p, .eu-mast__card span, .eu-mast__card small,
  .eu-decision__std, .eu-evidence__std, .eu-apply__panel,
  .eu-doclist__meta, .eu-compare__col, .eu-consent, .eu-agree,
  .eu-field, .eu-field__error, .eu-evidence-record__facts{
    font-size: .875rem;
    line-height: 1.55;
  }
  /* a bdi never shrinks below its parent's floor */
  .eu-steps__role bdi, .eu-record-card__rows bdi, .eu-accredstrip__cell bdi,
  .eu-mast__card bdi, .eu-decision__std bdi, .eu-evidence__std bdi{
    font-size: inherit;
  }

  /* remaining touch targets, by their real selectors */
  .eu-footer__fold, .eu-topbar__icon, .main-header__logo, .eu-mast__pause,
  .eu-gov__link, .eu-textlink{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .eu-mast__pause{ min-width: 44px; justify-content: center }
  .main-header__logo{ min-width: 44px }
}

/* Third pass — the last three, by exact DOM path from the 390px run.
   What is deliberately left alone: the standards marquee (a decorative
   ticker inside an overflow-hidden track, not reading matter). */
@media (max-width: 640px){
  /* the masthead stat note carries the recognition sentence — it reads */
  .eu-mast__stat span, .eu-mast__stat p, .eu-mast__dot__l{
    font-size: .875rem;
    line-height: 1.5;
  }
  .eu-topbar__icon{ min-width: 44px }

  /* Sector cards: the title was the only tap target, 23px tall inside a
     large card. The pseudo-element makes the whole card the target
     without nesting a second link, so one card is one hit area. */
  .eu-evidence{ position: relative }
  .eu-evidence__body h3 a::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }
}

/* =====================================================================
   CHAIRMAN'S BAND
   The one place on the page where a person speaks rather than an
   organisation, so it takes the navy authority surface the CBAM band
   uses. The statement is set larger than body copy and narrower than the
   band, the signature is separated by a rule, and the whole thing moves
   with the site's own reveal — no new motion vocabulary.
   ===================================================================== */
/* The skyline carries the left of the band; the veil lives INSIDE the
   media layer so it can never outrank the copy in the stacking order —
   which is exactly what happened when it was a sibling pseudo-element. */
.eu-chairband .eu-band__media{position:absolute;inset:0;overflow:hidden}
.eu-chairband .eu-band__media img{
  opacity:1;
  filter:grayscale(.15) contrast(1.05) brightness(.8);
  object-position:22% 64%;
}
.eu-chairband .eu-band__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to left,
    rgba(11,38,61,.97) 0%, rgba(11,38,61,.95) 38%,
    rgba(11,38,61,.72) 58%, rgba(11,38,61,.42) 78%, rgba(11,38,61,.30) 100%);
}
[dir="ltr"] .eu-chairband .eu-band__media img{object-position:78% 64%}
[dir="ltr"] .eu-chairband .eu-band__media::after{
  background:linear-gradient(to right,
    rgba(11,38,61,.97) 0%, rgba(11,38,61,.95) 38%,
    rgba(11,38,61,.72) 58%, rgba(11,38,61,.42) 78%, rgba(11,38,61,.30) 100%);
}
@media (max-width:900px){
  .eu-chairband .eu-band__media img{object-position:50% 62%}
  .eu-chairband .eu-band__media::after,
  [dir="ltr"] .eu-chairband .eu-band__media::after{
    background:linear-gradient(to bottom, rgba(11,38,61,.88), rgba(11,38,61,.95));
  }
}
/* the band renders its copy in an 820px column; a chairman's statement
   needs the width to land in three or four lines, not seven */
.eu-chairband .eu-band__inner > div{max-width:1120px!important}
.eu-chairband .eu-display-2{
  max-width:24ch;
  font-size:clamp(1.6rem,3vw,2.6rem);
  line-height:1.42;          /* Arabic descenders collide below this */
  letter-spacing:0;
  text-wrap:balance;
}
[lang="en"] .eu-chairband .eu-display-2{line-height:1.24;letter-spacing:-.015em;max-width:26ch}
.eu-chair__body{
  max-width:62ch;
  margin-top:1.5rem;
  font-size:clamp(1rem,1.35vw,1.125rem);
  line-height:1.8;
  opacity:.93;
}
.eu-chair__body p+p{margin-top:.9rem}

.eu-chair__sign{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:2.4rem;
  padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.22);
  max-width:62ch;
}
.eu-chair__portrait{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;
  border:2px solid rgba(255,255,255,.3)}
.eu-chair__portrait img{width:100%;height:100%;object-fit:cover;display:block}
.eu-chair__id{display:flex;flex-direction:column;gap:.1rem;line-height:1.45}
.eu-chair__name{font-weight:700;font-size:1.06rem}
/* the role carries the signature when no name is set, so it holds weight */
.eu-chair__id .eu-chair__role{font-weight:600;font-size:1rem}
.eu-chair__name+.eu-chair__role{font-weight:500;font-size:.94rem;opacity:.86}
.eu-chair__org{font-size:.86rem;opacity:.7;letter-spacing:.02em}

@media (max-width:640px){
  .eu-chairband .eu-display-2{max-width:none;font-size:1.55rem}
  .eu-chair__body{font-size:1rem;margin-top:1.15rem}
  .eu-chair__sign{margin-top:1.8rem;gap:.85rem}
  .eu-chair__portrait{width:52px;height:52px}
}

/* The seal button opens the accreditation record dialog (F-24). It is a real
   control, not a word in a sentence, so it takes the touch floor. The card
   titles that the audit harness also flags are false positives: their ::after
   is absolutely inset to the card, so the hit area is the whole card. */
@media (max-width: 640px){
  .eu-x-sealbtn{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* =====================================================================
   CROSS-DOCUMENT VIEW TRANSITIONS
   Moving between pages used to mean a white flash, and — while the intro
   replayed on every click — a 1.1-second curtain. The intro now stands
   aside for internal navigation and this carries the reader instead: the
   outgoing page fades as the incoming one arrives, with the masthead and
   the header held as named elements so they appear to stay put rather
   than being rebuilt.
   Progressive: a browser without view transitions simply navigates.
   ===================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root){ animation: eu-vt-out .22s cubic-bezier(.4,0,1,1) both }
::view-transition-new(root){ animation: eu-vt-in  .32s cubic-bezier(0,0,.2,1) both }
@keyframes eu-vt-out{ to{ opacity:0 } }
@keyframes eu-vt-in { from{ opacity:0; transform:translateY(8px) } }

/* the chrome is the same object on both pages, so it should not re-enter */
.main-header{ view-transition-name: eu-header }
::view-transition-old(eu-header),
::view-transition-new(eu-header){ animation: none; mix-blend-mode: normal }

@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation: none }
}


/* f01 — original preloader signature restored 2026-09-03 */
.eu-preloader__stage{position:relative;display:grid;place-items:center;gap:26px}
.eu-preloader__stage::before,.eu-preloader__stage::after{content:none!important}
.eu-preloader__dots{display:block;width:168px;height:168px}
.eu-preloader__mark{width:212px;height:auto;opacity:0;transform:translateY(10px)}
.eu-preloader__bar{position:absolute;left:50%;bottom:16%;transform:translateX(-50%);width:min(320px,62vw);height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.eu-preloader__bar span{display:block;height:100%;width:0;background:var(--eu-green-300)}
.eu-preloader__promise{display:none!important}

/* ============ batch 4 — f01 seal marks · f02 why-verification · f03 routes ============ */
.eu-mast__sealwrap.is-inband{position:static!important;inset:auto!important;right:auto!important;left:auto!important;bottom:auto!important;top:auto!important;transform:none!important;margin:6px 0 22px;width:auto;max-width:620px}
.eu-mast__sealwrap.is-inband .eu-mast__place{margin:0 0 10px}
.eu-mast__sealwrap.is-inband .eu-mast__seal{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"marks k" "marks s" "marks m";align-items:center;column-gap:20px;row-gap:2px;padding:16px 22px;background:rgba(255,255,255,.94);border:1px solid var(--eu-line);border-radius:var(--eu-radius);box-shadow:var(--eu-e1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:start}
.eu-mast__sealwrap.is-inband .eu-mast__seal__k{grid-area:k;align-self:end}
.eu-mast__sealwrap.is-inband .eu-mast__seal__v{grid-area:marks}
.eu-mast__sealwrap.is-inband .eu-mast__seal__s{grid-area:s}
.eu-mast__sealwrap.is-inband .eu-mast__seal__m{grid-area:m;align-self:start}
.eu-mast__seal__v{display:inline-flex;align-items:center;gap:14px;padding-inline-end:20px;border-inline-end:1px solid var(--eu-line);line-height:0}
.eu-mast__seal__mark{height:54px;width:auto;display:block;transition:transform .45s var(--eu-ease-out)}
.eu-mast__seal__mark--iaf{height:36px}
.eu-mast__seal__v:hover .eu-mast__seal__mark{transform:translateY(-2px)}
@media (max-width:640px){
 .eu-mast__sealwrap.is-inband .eu-mast__seal{grid-template-columns:1fr;grid-template-areas:"marks" "k" "s" "m";row-gap:10px;padding:16px 18px}
 .eu-mast__seal__v{border-inline-end:0;padding-inline-end:0;padding-bottom:12px;border-bottom:1px solid var(--eu-line);width:100%}
 .eu-mast__seal__mark{height:44px}.eu-mast__seal__mark--iaf{height:30px}}
.eu-record-card__head--marks{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.eu-record-card__marks{display:inline-flex;align-items:center;gap:14px;line-height:0}
.eu-record-card__marks img{height:46px;width:auto;display:block}
.eu-record-card__marks img.is-iaf{height:30px}
.eu-stdmarks{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.eu-stdmarks img{height:46px;width:auto;display:block;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .55s var(--eu-ease-out),transform .55s var(--eu-ease-out)}
.eu-stdmarks.is-in img,.is-in .eu-stdmarks img{opacity:1;transform:none}
.eu-stdmarks img:nth-child(2){transition-delay:.09s}
.eu-stdmarks img:nth-child(3){transition-delay:.18s}
.eu-stdmarks img:nth-child(4){transition-delay:.27s}
.eu-record-card__progs dd{padding-top:6px}

/* ================= f02 — why verification matters ================= */
.eu-rev{opacity:0}
.eu-rev.is-shown{opacity:1}
.eu-rev.animated{animation-duration:.8s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.22,.61,.36,1)}

/* editorial split: headline holds the left, the lede holds the right */
.eu-why__intro{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:0 72px;align-items:start}
.eu-why__head h2{margin:0}
.eu-why__lede{padding-top:10px}
.eu-why__lede p{margin:0 0 18px;font-size:16.5px;line-height:1.78;color:var(--eu-ink-2)}
.eu-why__lede p:last-child{margin-bottom:0}

/* the pivot line — a green stem, not a highlighter */
.eu-why__pivot{margin-top:52px;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:0 72px;align-items:start}
.eu-why__statement{position:relative;margin:0;padding-inline-start:24px;max-width:22ch;font-size:clamp(23px,2.85vw,33px);line-height:1.28;font-weight:800;letter-spacing:-.015em;color:var(--eu-navy)}
.eu-why__statement::before{content:"";position:absolute;inset-inline-start:0;top:8px;bottom:8px;width:4px;border-radius:4px;background:var(--eu-green);transform:scaleY(0);transform-origin:top center;transition:transform .8s var(--eu-ease-out) .1s}
[dir=rtl] .eu-why__statement::before{transform-origin:top center}
.eu-why__statement.is-shown::before{transform:scaleY(1)}
.eu-why__after{margin:0;padding-top:10px;font-size:16.5px;line-height:1.78;color:var(--eu-ink-2)}

/* ---- the instrument panel ---- */
.eu-split2{position:relative;margin-top:58px;border-radius:var(--eu-radius);background:var(--eu-navy);color:#fff;overflow:hidden;box-shadow:0 34px 80px -46px rgba(9,41,61,.65)}
.eu-split2__label{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:28px 38px 6px}
.eu-split2__label__k{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.eu-split2__label__v{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.86)}
.eu-split2__body{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);align-items:stretch}
.eu-split2__half{padding:30px 38px 38px;opacity:0;transition:opacity .85s var(--eu-ease-out) .3s,transform .85s var(--eu-ease-out) .3s}
.eu-split2__half--other{transform:translateX(26px)}
.eu-split2__half--ours{position:relative;transform:translateX(-26px);background:linear-gradient(180deg,rgba(46,168,113,.16) 0%,rgba(46,168,113,0) 72%)}
[dir=rtl] .eu-split2__half--other{transform:translateX(-26px)}
[dir=rtl] .eu-split2__half--ours{transform:translateX(26px)}
.eu-split2.is-shown .eu-split2__half{transform:none;opacity:1}
.eu-split2.is-shown .eu-split2__half--other{opacity:.58}
.eu-split2__eyebrow{display:block;margin-bottom:14px;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.eu-split2__half--ours .eu-split2__eyebrow{color:var(--eu-green-300)}
.eu-split2__name{position:relative;margin:0 0 14px;font-family:var(--eu-display);font-size:clamp(21px,2.2vw,27px);line-height:1.25;font-weight:700;color:#fff}
.eu-split2__half--ours .eu-split2__name::after{content:"";position:absolute;bottom:-11px;inset-inline-start:0;height:2px;width:0;border-radius:2px;background:var(--eu-green-300);transition:width .75s var(--eu-ease-out) .95s}
.eu-split2.is-shown .eu-split2__half--ours .eu-split2__name::after{width:58px}
.eu-split2__half p{margin:0;max-width:34ch;font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.72)}
.eu-split2__half--ours p{margin-top:12px;color:rgba(255,255,255,.9)}
.eu-split2__flag{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:6px 12px 6px 10px;border:1px solid rgba(122,232,180,.34);border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#bff3d8}
.eu-split2__flag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--eu-green-300);box-shadow:0 0 0 4px rgba(122,232,180,.18)}
.eu-split2__seam{position:relative;background:rgba(255,255,255,.1)}
.eu-split2__seam i{position:absolute;top:0;inset-inline-start:0;width:1px;height:0;background:linear-gradient(180deg,rgba(122,232,180,0),var(--eu-green-300) 45%,rgba(122,232,180,0));transition:height .95s var(--eu-ease-out)}
.eu-split2.is-shown .eu-split2__seam i{height:100%}
.eu-split2__foot{margin:0;padding:20px 38px 26px;border-top:1px solid rgba(255,255,255,.1);font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.55)}

/* ---- closing row ---- */
.eu-why__close{margin-top:46px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.eu-why__ask{margin:0!important;padding:18px 22px;border-inline-start:3px solid var(--eu-blue);background:var(--eu-blue-050);border-radius:var(--eu-radius-sm);font-size:15.5px;line-height:1.7;color:var(--eu-ink-2)}
.eu-why__close .eu-actions{margin:0;flex-wrap:wrap}

@media (max-width:980px){
 .eu-why__intro,.eu-why__pivot{grid-template-columns:1fr;gap:24px}
 .eu-why__lede,.eu-why__after{padding-top:0}
 .eu-why__statement{max-width:none}
 .eu-split2__body{grid-template-columns:1fr}
 .eu-split2__half{padding:26px 24px 30px}
 .eu-split2__half--other,.eu-split2__half--ours{transform:translateY(20px)}
 .eu-split2__seam{height:1px}
 .eu-split2__seam i{top:0;width:0;height:1px;background:linear-gradient(90deg,rgba(122,232,180,0),var(--eu-green-300) 45%,rgba(122,232,180,0));transition:width .95s var(--eu-ease-out)}
 .eu-split2.is-shown .eu-split2__seam i{width:100%;height:1px}
 .eu-split2__label,.eu-split2__foot{padding-inline:24px}
 .eu-why__close{grid-template-columns:1fr;gap:22px}}

@media (prefers-reduced-motion:reduce){
 .eu-rev{opacity:1!important;animation:none!important}
 .eu-split2__half{opacity:1!important;transform:none!important;transition:none!important}
 .eu-split2__half--other{opacity:.58!important}
 .eu-split2__seam i{height:100%!important}
 .eu-split2__half--ours .eu-split2__name::after{width:58px!important}
 .eu-why__statement::before{transform:scaleY(1)!important}}
/* ================= end f02 ================= */

.eu-mast__seal__v,button.eu-mast__seal__v,.eu-x-sealbtn{background:none;border:0;border-inline-end:1px solid var(--eu-line);padding:0;padding-inline-end:20px;cursor:pointer;font:inherit;color:inherit}
.eu-mast__seal__v:focus-visible{outline:2px solid var(--eu-green);outline-offset:4px;border-radius:4px}

.eu-mast__sealwrap.is-inband .eu-mast__seal,.eu-mast__sealwrap.is-inband .eu-mast__place{opacity:1!important;transform:none!important;translate:none!important;visibility:visible!important}
.eu-mast__sealwrap.is-inband .eu-mast__seal__k{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--eu-muted)}
.eu-mast__sealwrap.is-inband .eu-mast__seal__s{font-size:13.5px;font-weight:600;color:var(--eu-navy)}
.eu-mast__sealwrap.is-inband .eu-mast__seal__m{font-size:12.5px;color:var(--eu-muted)}

.eu-mast__foot{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:20px;flex-wrap:nowrap!important}
.eu-mast__sealwrap.is-inband{order:-1}
.eu-mast__sealwrap.is-inband .eu-mast__place{background:transparent!important;color:var(--eu-muted)!important;padding:0!important;border:0!important;box-shadow:none!important;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.eu-mast__sealwrap.is-inband .eu-mast__place .eu-mast__pin{filter:none}

/* ---- f06 : chairman's message ---- */
.eu-chair__lead{margin:16px 0 26px;max-width:36ch;font-family:var(--eu-display);font-size:clamp(18px,1.9vw,22px);line-height:1.5;font-weight:600;color:#fff}
.eu-chair__body p{max-width:64ch}
.eu-chair__sign{margin-top:32px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);display:flex;align-items:center;gap:18px}
.eu-chair__sign::before{content:"";flex:none;width:34px;height:2px;border-radius:2px;background:var(--eu-green-300)}
.eu-chair__role{display:block;font-size:15.5px;font-weight:700;color:#fff}
.eu-chair__org{display:block;margin-top:4px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
/* ---- end f06 ---- */


/* ===== b6-f06 — inner-page intro removed, 2026-09-04 =====
   The navy loading screen painted before any script ran, so it was visible for the
   whole time the 18 vendor scripts were downloading. This file is loaded ONLY by the
   inner pages (the home ships its own inline CSS), so the rule cannot touch the home.
   No CSS anywhere depends on html.eu-entered, so nothing is gated behind it. */
#euPreloader,.eu-preloader{display:none!important}

/* b6-f05 — footer phone rows: the flag alone, one line per number */
.eu-flag + .eu-x-flag,.eu-flag + .eu-x-flag--code{display:none!important}

/* b6-f19b — inner-page header logo brought up to the home’s size, 2026-09-04.
   Inner pages rendered it at 117x46 against 176x69 on the home. The source PNG is
   442x174, so 177px wide is still a true 2x asset (2.50x). The header row is given
   room so the mark is not cramped against the nav. */
.main-header__logo img{width:clamp(150px,15vw,196px)!important;height:auto!important;max-width:none!important}
.main-header__inner{min-height:94px}
@media (max-width:991px){.main-header__logo img{width:clamp(132px,20vw,158px)!important}.main-header__inner{min-height:78px}}

/* b6 — consent checkbox rows, added with the /contact inquiry form 2026-09-04.
   The theme styles every .eu-field input as a full-width 52px control, which turned
   the consent tick into a giant empty box. Scoped to .eu-check so nothing else moves. */
.eu-check{display:flex!important;align-items:flex-start;gap:12px;font-weight:500;line-height:1.55;cursor:pointer}
.eu-check input[type="checkbox"]{-webkit-appearance:checkbox;appearance:checkbox;width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;min-height:20px!important;max-height:20px!important;flex:0 0 20px;margin:1px 0 0!important;padding:0!important;border-radius:4px!important;accent-color:#006C4C;cursor:pointer;box-shadow:none!important}
.eu-check>span{flex:1 1 auto}


/* ~~~~~ b7 — CBAM cluster: source lines, status chip, numbered stages ~~~~~ */
.eu-src{display:block;margin-top:9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.55;color:#6B8095;letter-spacing:.005em}
[dir~"rtl"] .eu-src{direction:rtl}
.eu-statuschip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:9px;margin:16px 0 0;padding:8px 15px;border:1px solid #E4D8BE;border-radius:999px;background:#FBF6EC;color:#5B4415;font-size:13px;line-height:1.45;font-weight:500}
.eu-statuschip__dot{width:8px;height:8px;border-radius:50%;background:#B4791A;flex:none}
.eu-statuschip a{color:#5B4415;text-underline-offset:3px}
.eu-phero .eu-statuschip{background:rgba(255,255,255,.90);border-color:rgba(180,121,26,.45)}
.eu-b7steps{list-style:none;margin:0;padding:0;counter-reset:eustep}
.eu-b7steps li{counter-increment:eustep;display:grid;grid-template-columns:38px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--eu-line,#E1E8EE)}
[dir~"rtl"] .eu-b7steps li{grid-template-columns:38px 1fr}
.eu-b7steps li:last-child{border-bottom:0}
.eu-b7steps li>*{grid-column:2}
.eu-b7steps li::before{grid-column:1;grid-row:1;content:counter(eustep,decimal-leading-zero);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#0E8A4F;padding-top:5px;font-weight:600}
.eu-b7steps h3{margin:0 0 4px;font-size:16.5px;line-height:1.3}
.eu-b7steps p{margin:0;font-size:15.5px;line-height:1.6}
.eu-deflist{list-style:none;margin:0;padding:0}
.eu-deflist li{padding:14px 0;border-bottom:1px solid var(--eu-line,#E1E8EE)}
.eu-deflist li:last-child{border-bottom:0}
.eu-deflist b{display:block;margin-bottom:4px;font-size:15.5px}
.eu-deflist span{display:block;font-size:15.5px;line-height:1.62;color:#3D5568}


/* ===== b8 CBAM cluster — index-4 language fixes ===== */
header.main-header--four .main-header__logo{flex:0 0 auto;margin-right:24px}
body.eu-family-cbam .faq-page__accordion .accrodion-title__icon::before{font-family:"Font Awesome 5 Free"!important;font-weight:900;content:"\f078"}
body.eu-family-cbam .faq-page__accordion .active .accrodion-title__icon::before{content:"\f077"}
body.eu-family-cbam .faq-four .inner__count i{display:block;font-size:32px;line-height:1;color:#fff;margin-top:4px}
body.eu-family-cbam .faq-four__text{margin:0 0 20px}

/* --- b8 solution-area-two : template dark panel, our identity navy --- */
body.eu-family-cbam .solution-area-two__inner::after{background-color:#0B263D}
@media (max-width:1199px){body.eu-family-cbam .solution-area-two{background-color:#0B263D}}
body.eu-family-cbam .solution-area-two,
body.eu-family-cbam .solution-area-two__content,
body.eu-family-cbam .solution-area-two__text,
body.eu-family-cbam .solution-area-two__feature__title,
body.eu-family-cbam .solution-area-two .sec-title__title{color:#fff}
body.eu-family-cbam .solution-area-two .solution-area-two__feature__text{color:rgba(255,255,255,.78)}
body.eu-family-cbam .solution-area-two .eu-src{color:#9FB3C6}
body.eu-family-cbam .solution-area-two .eu-src a{color:#CFE3D8}
body.eu-family-cbam .solution-area-two__feature__icon{color:#4FBF8B}

/* --- b8 cbam typography + square thumbs --- */
body.eu-family-cbam .eu-src{font-family:inherit;font-size:13px;line-height:1.62;letter-spacing:0;color:#5E7A93}
body.eu-family-cbam .solution-area-two .eu-src{color:#9FB3C6}
body.eu-family-cbam .process-area__item__thumb img{width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover;border-radius:50%;display:block}

/* --- b8 cbam button : identity green, navy sweep --- */
body.eu-family-cbam .garlon-btn{background-color:#006C4C}
body.eu-family-cbam .garlon-btn::before,body.eu-family-cbam .garlon-btn::after{background-color:#0B263D}
body.eu-family-cbam .garlon-btn:hover{background-color:#0B263D}

/* --- b8 cbam about-four thumbs + badge --- */
body.eu-family-cbam .about-four__thumb__box{align-items:stretch}
body.eu-family-cbam .about-four__thumb__item{flex:1 1 0;min-width:0}
body.eu-family-cbam .about-four__thumb__item img{width:100%;height:100%;aspect-ratio:4 / 5;object-fit:cover;display:block}
body.eu-family-cbam .about-four__thumb__icon-text{font-size:12.5px;line-height:1.2;letter-spacing:.01em}
body.eu-family-cbam .about-four__thumb__icon-text span{display:block;font-size:20px;line-height:1.1}

/* --- b8 cbam solution thumb + emphasis on dark --- */
body.eu-family-cbam .solution-area-two__thumb{height:100%;border-left-color:#fff}
body.eu-family-cbam .solution-area-two__thumb img{width:100%;height:100%;object-fit:cover;object-position:78% 50%;display:block}
body.eu-family-cbam .solution-area-two strong,body.eu-family-cbam .solution-area-two b,body.eu-family-cbam .solution-area-two em{color:#fff}

/* ===== b9 cbam index4 parity ===== */
body.eu-family-cbam .server-card__shape{position:absolute;top:30px;left:120px;width:189px;height:148px;z-index:1;color:#DCDCDC;pointer-events:none;transition:color .4s ease}
body.eu-family-cbam .server-card__shape svg{display:block;width:189px;height:148px}
body.eu-family-cbam .server-card:hover .server-card__shape{color:rgba(255,255,255,.5)}
body.eu-family-cbam .server-card__content__btn__icon i{transform:rotate(-45deg)}
body.eu-family-cbam .server-card:hover .server-card__title a,body.eu-family-cbam .server-card:hover .server-card__text,body.eu-family-cbam .server-card:hover .server-card__content__btn__text{color:#fff}
body.eu-family-cbam .about-four__thumb__item img{aspect-ratio:280 / 573}
body.eu-family-cbam .about-four__thumb__boxs::after{content:"";display:block;width:130px;height:130px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='50' cy='50' r='38'/%3E%3Ccircle cx='84' cy='50' r='11'/%3E%3Ccircle cx='79.4' cy='67' r='11'/%3E%3Ccircle cx='67' cy='79.4' r='11'/%3E%3Ccircle cx='50' cy='84' r='11'/%3E%3Ccircle cx='33' cy='79.4' r='11'/%3E%3Ccircle cx='20.6' cy='67' r='11'/%3E%3Ccircle cx='16' cy='50' r='11'/%3E%3Ccircle cx='20.6' cy='33' r='11'/%3E%3Ccircle cx='33' cy='20.6' r='11'/%3E%3Ccircle cx='50' cy='16' r='11'/%3E%3Ccircle cx='67' cy='20.6' r='11'/%3E%3Ccircle cx='79.4' cy='33' r='11'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;font-size:0}
body.eu-family-cbam .about-four__thumb__icon{position:relative;z-index:1;text-align:center}
body.eu-family-cbam .about-four__thumb__icon i{color:#006C4C;font-size:17px;line-height:1}
body.eu-family-cbam .about-four__thumb__icon-text{color:#006C4C;font-weight:700}
body.eu-family-cbam .about-four__thumb__icon-text span{color:#0B263D}
body.eu-family-cbam .about-four__thumb-shape-one,body.eu-family-cbam .about-four__thumb-shape-two{position:absolute;width:87px;height:126px;z-index:-1;background-image:radial-gradient(circle,#C7D2DC 1.7px,transparent 1.8px);background-size:14.5px 14.5px;animation:3s ease-in-out 0s infinite normal none running movebounce2}
body.eu-family-cbam .about-four__thumb-shape-one{top:5%;right:0}
body.eu-family-cbam .about-four__thumb-shape-two{bottom:5%;left:0}
body.eu-family-cbam .about-four__feature__thumb img{width:200px;height:225px;object-fit:cover;display:block;border-radius:4px}
body.eu-family-cbam .about-four__feature__list__item i{color:#006C4C}

/* ===== b9 cbam header metrics (index-4 reference: inner 1235x106, logo 63, li pad 0, a lh 106) ===== */
header.main-header--four .main-header__inner{max-width:calc(100% - 30px);padding:0 17px 0 30px}
header.main-header--four .main-header__logo img{height:63px!important;width:auto!important;max-width:240px!important}
header.main-header--four .main-menu .main-menu__list>li{padding-top:0;padding-bottom:0}
header.main-header--four .main-menu .main-menu__list>li>a{padding-top:0;padding-bottom:0;line-height:106px;font-size:15px}
.topbar-two__inner{height:50px}
.topbar-two__text{padding:10.5px 95px;font-size:16px;line-height:29px}

/* b9 scroll-to-top upright — garlon rotates it -90deg for its vertical label; our button is a circular icon */
.scroll-to-top{transform:none!important}
.scroll-to-top.show{transform:none!important}

/* b9 feature-four panel — index-4 uses a white shape PNG behind the cards (asset absent here) */
body.eu-family-cbam .feature-four__inner{position:relative;z-index:1}
body.eu-family-cbam .feature-four__inner::after{content:"";position:absolute;top:0;left:-10px;right:-10px;bottom:0;background:#fff;border-radius:2px;box-shadow:0 -2px 24px rgba(11,38,61,.06);z-index:-1}
body.eu-family-cbam .feature-four__item{min-height:243px}
body.eu-family-cbam .feature-four__item__title{min-height:36px}

/* b9 feature-four lift — index-4 uses -150px; our hero needs more air */
body.eu-family-cbam .feature-four__inner{margin-top:-80px}
@media (max-width:991px){body.eu-family-cbam .feature-four__inner{margin-top:-40px}}

/* ===== b9 cbam testimonial+blog mapping ===== */
body.eu-family-cbam .testimonial-four__start{gap:0}
body.eu-family-cbam .testimonial-four__start span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;white-space:nowrap}
body.eu-family-cbam .testimonial-four__item__quite i{font-size:42px;line-height:1;color:#006C4C;transition:color .4s ease}
body.eu-family-cbam .testimonial-four__item:hover .testimonial-four__item__quite i{color:#fff}
body.eu-family-cbam .testimonial-four__item:hover .testimonial-four__text,body.eu-family-cbam .testimonial-four__item:hover .testimonial-four__thumb__name,body.eu-family-cbam .testimonial-four__item:hover .testimonial-four__thumb__text{color:#fff}
body.eu-family-cbam .testimonial-four__item::after{background-color:#0B263D}
body.eu-family-cbam .blog-four__thumb{height:100%}
body.eu-family-cbam .blog-four__thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px}
body.eu-family-cbam .blog-four__list__title{font-size:18px;line-height:1.45}
body.eu-family-cbam .blog-four__list__meta i{color:#006C4C;margin-right:6px}

/* b9 accordion no-flash — before garlon.js runs, every answer is visible */
body.eu-family-cbam .faq-page__accordion .accrodion-content{display:none}
body.eu-family-cbam .faq-page__accordion .accrodion.active .accrodion-content{display:block}

/* ===== b9 cbam base token — garlon accent becomes our green on the CBAM cluster ===== */
body.eu-family-cbam{--garlon-base:#006C4C;--garlon-text-dark:#0B263D}
body.eu-family-cbam .testimonial-four__thumb img{width:100%;height:100%;aspect-ratio:1 / 1;object-fit:cover;display:block}
body.eu-family-cbam .testimonial-four__item{height:calc(100% - 53px)}
body.eu-family-cbam .skill-area-one__thumb__box img{width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;display:block}
body.eu-family-cbam .progress-box__title a{color:inherit}
body.eu-family-cbam .eu-scopenote{margin-top:40px;padding:18px 22px;border-left:4px solid #006C4C;background:#F1F6F3;border-radius:0 10px 10px 0}
body.eu-family-cbam .eu-scopenote p{margin:0;font-size:15px;line-height:1.6;color:#33475B}

/* b9 cbam tagline green */
body.eu-family-cbam .sec-title__tagline{color:#006C4C}

/* b9 cbam skill-area tune */
body.eu-family-cbam .skill-area-one__thumb{position:relative;z-index:0}
body.eu-family-cbam #cbam-sectors .eu-src{position:relative;z-index:2;margin-top:16px;display:block}
body.eu-family-cbam .skill-area-one__thumb__text{font-size:15px;line-height:1.55;text-transform:none;letter-spacing:0}
body.eu-family-cbam .skill-area-one__content .sec-title__title{max-width:520px}

/* b9 cbam basis badge — four-digit regulation numbers must fit the 69px badge */
body.eu-family-cbam .blog-four__list__date span{font-size:24px;line-height:1.2}
body.eu-family-cbam .blog-four__list__date{font-size:13px;line-height:1.2}

/* b9 cbam basis thumb crop — tall column, landscape source */
@media (min-width:992px){
  body.eu-family-cbam #cbam-basis .col-lg-5{align-self:flex-start;position:sticky;top:130px}
  body.eu-family-cbam #cbam-basis .blog-four__thumb{height:auto}
  body.eu-family-cbam #cbam-basis .blog-four__thumb img{height:620px;object-position:50% 45%}
}

/* ===== b10 cbam fixes ===== */
/* feature-four: keep copy inside the trapezoid, which narrows to 92%/8% at the base */
body.eu-family-cbam .feature-four__item__title{max-width:300px;margin-left:auto;margin-right:auto}
/* testimonial thumb: square, seated on the card edge */
body.eu-family-cbam .testimonial-four__thumb{width:90px;height:90px;border-radius:10px;overflow:hidden;margin:-45px 0 24px 0}
body.eu-family-cbam .testimonial-four__thumb img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;display:block}
/* skill-area thumb: theme positions the box absolutely inside a zero-height parent */
body.eu-family-cbam .skill-area-one__thumb{min-height:0;height:auto}
body.eu-family-cbam .skill-area-one__thumb__box{position:relative;top:auto;left:auto;width:100%;max-width:100%}
body.eu-family-cbam .skill-area-one__thumb__box img{width:100%;height:auto;aspect-ratio:4 / 3;object-fit:cover;border-radius:10px;display:block}
body.eu-family-cbam .skill-area-one__thumb__text-box{position:absolute;top:auto;bottom:24px;left:24px;right:24px;width:auto;max-width:none;padding:22px 24px;border-radius:10px}
body.eu-family-cbam .skill-area-one__thumb__text{margin:0}

/* b10 progress pin — the template pin carries a percentage; ours carries none, so it only collides with the group numerals */
body.eu-family-cbam .progress-box__number{display:none}

/* b10 faq circle seat — reference overlaps the image by ~160px; our containing block sits 47px further left */
@media (min-width:1200px){body.eu-family-cbam .faq-four__thumb__item__small{left:-63px}}
@media (min-width:992px) and (max-width:1199px){body.eu-family-cbam .faq-four__thumb__item__small{left:-40px}}
body.eu-family-cbam #cbam-basis .blog-four__thumb img{object-position:50% 40%}

/* b10 faq video centre — the button belongs in the middle of the circle, not on its rim */
body.eu-family-cbam .faq-four__thumb__video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;display:flex;align-items:center;justify-content:center}
/* b10 basis thumb keeps the sign legible: no tall crop */
@media (min-width:992px){body.eu-family-cbam #cbam-basis .blog-four__thumb img{height:auto;aspect-ratio:712 / 468;object-position:50% 50%}}

/* ===== b11 cbam nav motion + search ===== */
header.main-header--four .eu-nav{padding-right:26px}
header.main-header--four .main-menu .main-menu__list>li>a{padding-left:11px;padding-right:11px;position:relative;transition:color .3s ease}
header.main-header--four .main-menu .main-menu__list>li>a::after{content:"";position:absolute;left:11px;right:11px;bottom:34px;height:2px;background:#006C4C;transform:scaleX(0);transform-origin:right center;transition:transform .38s cubic-bezier(.22,.61,.36,1)}
header.main-header--four .main-menu .main-menu__list>li>a:hover{color:#006C4C}
header.main-header--four .main-menu .main-menu__list>li>a:hover::after,header.main-header--four .main-menu .main-menu__list>li.current>a::after{transform:scaleX(1);transform-origin:left center}
header.main-header--four .main-header__info{display:flex;align-items:center;gap:18px;margin-right:20px}
header.main-header--four .main-header__info__item{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#0B263D;border:1px solid rgba(11,38,61,.14);transition:.3s ease}
header.main-header--four .main-header__info__item:hover{background:#006C4C;border-color:#006C4C;color:#fff}
body.eu-family-cbam .search-popup__form input{font-size:16px}
body.eu-family-cbam .search-popup .garlon-btn{background-color:#006C4C}


/* ==========================================================================
   b12 : EU-HSEARCH  inline header search
   The theme search-toggler opened a full-screen overlay that covered the page.
   The popup is removed in energy-up-motion.js and replaced by this inline field.
   ========================================================================== */
header.main-header--four .main-header__info{display:flex;align-items:center;gap:10px}
.eu-hsearch{position:relative;display:flex;align-items:center}
.eu-hsearch__form{display:block;margin:0}
.eu-hsearch__input{width:0;min-width:0;height:40px;padding:0;border:0;border-bottom:1px solid transparent;border-radius:0;background:transparent;color:#0B263D;font-family:inherit;font-size:15px;line-height:40px;opacity:0;outline:none;-webkit-appearance:none;appearance:none;transition:width .38s cubic-bezier(.22,.61,.36,1),opacity .26s ease,padding .38s ease,border-color .3s ease}
.eu-hsearch__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.eu-hsearch__input::placeholder{color:#93A8B8}
.main-header__info.eu-hsearch-open .eu-hsearch__input{width:236px;opacity:1;padding:0 12px;border-bottom-color:rgba(11,38,61,.20)}
.main-header__info.eu-hsearch-open .eu-hsearch__input:focus{border-bottom-color:#006C4C}
.eu-hsearch__results{position:absolute;top:calc(100% + 12px);right:-48px;width:352px;max-width:84vw;padding:6px;background:#fff;border:1px solid rgba(11,38,61,.10);border-radius:10px;box-shadow:0 18px 44px rgba(11,38,61,.14);z-index:140;max-height:62vh;overflow:auto}
.eu-hsearch__hit{display:block;padding:9px 12px;border-radius:7px;text-decoration:none;color:#0B263D;transition:background .2s ease}
.eu-hsearch__hit.is-current,.eu-hsearch__hit:hover,.eu-hsearch__hit:focus{background:#EFF6F3;color:#0B263D}
.eu-hsearch__hit__title{display:block;font-size:14.5px;line-height:1.35;font-weight:600}
.eu-hsearch__hit__url{display:block;margin-top:2px;font-size:12px;line-height:1.5;color:#5E7A93}
.eu-hsearch__empty{padding:12px;font-size:13.5px;line-height:1.5;color:#5E7A93}
@media (max-width:1199px){.main-header__info.eu-hsearch-open .eu-hsearch__input{width:170px}.eu-hsearch__results{right:-12px;width:300px}}
@media (max-width:575px){.main-header__info.eu-hsearch-open .eu-hsearch__input{width:130px}.eu-hsearch__results{right:-12px;width:270px}}

/* b13 : about-four badge : icon only, no figure and no label */
body.eu-family-cbam .about-four__thumb__icon{display:flex;align-items:center;justify-content:center;min-height:60px}
body.eu-family-cbam .about-four__thumb__icon i{font-size:44px;line-height:1;color:#006C4C}

/* b14 : faq-four circle : anchored to the thumb, index-4 proportions
   reference: circle diameter 47.9% of the main image, its left edge 19% of the
   image width outside the image, vertically centred, 10px white ring */
body.eu-family-cbam .faq-four__thumb{position:relative}
body.eu-family-cbam .faq-four__thumb__item__small{left:-19%;right:auto;top:50%;bottom:auto;transform:translateY(-50%);width:48%;max-width:none;height:auto;aspect-ratio:1/1;border-width:10px}
@media (max-width:1199px){body.eu-family-cbam .faq-four__thumb__item__small{left:-9%;width:42%;border-width:8px}}
@media (max-width:767px){body.eu-family-cbam .faq-four__thumb__item__small{left:0;width:38%;border-width:6px}}

/* b15 : regulatory-basis cards link out to the act on EUR-Lex
   colour is left to the card (the active card is dark, the rest light);
   hover is an underline so contrast holds on both */
body.eu-family-cbam #cbam-basis .blog-four__list__item{position:relative}
body.eu-family-cbam #cbam-basis .blog-four__list__title a{color:inherit;text-decoration:none;text-decoration-color:currentColor;text-underline-offset:4px;transition:text-decoration-color .3s ease}
body.eu-family-cbam #cbam-basis .blog-four__list__title a::after{content:"";position:absolute;inset:0;z-index:3}
body.eu-family-cbam #cbam-basis .blog-four__list__title a .fa-external-link-alt{font-size:.6em;margin-left:7px;opacity:.5;vertical-align:middle;transition:opacity .3s ease}
body.eu-family-cbam #cbam-basis .blog-four__list__item:hover .blog-four__list__title a{text-decoration:underline}
body.eu-family-cbam #cbam-basis .blog-four__list__item:hover .blog-four__list__title a .fa-external-link-alt{opacity:1}
body.eu-family-cbam #cbam-basis .blog-four__list__title a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* header scope: site-wide */

/* b16 : index-4 header rolled out site-wide
   .main-header--sitenav marks a header carrying the full 10-item site menu.
   Between 1200 and 1599 that menu needs ~824px, so type, padding, logo and the
   CTA tighten there; nothing is removed from the menu. */
@media (min-width:1200px) and (max-width:1599px){
 header.main-header--sitenav .main-menu .main-menu__list>li>a{font-size:13.5px;padding-left:7px;padding-right:7px}
 header.main-header--sitenav .main-menu .main-menu__list>li>a::after{left:7px;right:7px}
 header.main-header--sitenav .main-header__logo img{height:52px!important}
 header.main-header--sitenav .main-header__logo{margin-right:14px}
 header.main-header--sitenav .main-header__info{gap:8px;margin-right:8px}
 header.main-header--sitenav .eu-nav{padding-right:10px}
 header.main-header--sitenav .eu-btn--cta{padding-left:18px;padding-right:18px;font-size:14px}
 header.main-header--sitenav .main-header__inner{padding:0 12px 0 20px}
}
@media (min-width:1200px) and (max-width:1359px){
 header.main-header--sitenav .main-menu .main-menu__list>li>a{font-size:13px;padding-left:5px;padding-right:5px}
 header.main-header--sitenav .main-menu .main-menu__list>li>a::after{left:5px;right:5px}
}

/* b17 : ribbon bar widened and kept on one line */
.main-header--four .topbar-two__inner{max-width:560px}
.main-header--four .topbar-two__text{padding:9px 104px;white-space:nowrap}
@media (max-width:1359px){.main-header--four .topbar-two__text{padding:9px 72px}}
@media (max-width:767px){.main-header--four .topbar-two__text{padding:8px 34px;font-size:11px;letter-spacing:.12em}}

/* b18 : ribbon length : bar sizes to its text, notches stay pinned to its edges */
.main-header--four .topbar-two__inner{max-width:none;width:-moz-max-content;width:max-content;margin-left:auto;margin-right:auto}
.main-header--four .topbar-two__inner::before{left:-59px}
.main-header--four .topbar-two__inner::after{right:-59px}
.main-header--four .topbar-two__text{padding:9px 150px;white-space:nowrap}
@media (max-width:1359px){.main-header--four .topbar-two__text{padding:9px 100px}}
@media (max-width:767px){.main-header--four .topbar-two__text{padding:8px 40px;font-size:11px;letter-spacing:.12em}}

/* b19 : the ribbon has to read as a shape, not merge into the dark strip
   strip stays navy; the trapezoid takes the brand green and the notches lighten */
.main-header--four .topbar-two__text{background-color:#006C4C}
.main-header--four .topbar-two__inner::before,.main-header--four .topbar-two__inner::after{background:rgba(255,255,255,.16)}

/* b20 : ribbon typography moved out of the per-page inline block into one place */
.main-header--four .topbar-two__inner{padding-top:6px}
.main-header--four .topbar-two__text{color:#fff;font-family:"EU Sans",Inter,Lato,system-ui,sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background-color:#006C4C;margin:0;clip-path:polygon(7% 0%,93% 0%,100% 100%,0% 100%)}

/* b21 : white notches either side of the ribbon, and a longer bar */
.main-header--four .topbar-two__inner::before,.main-header--four .topbar-two__inner::after{width:70px;background:#fff}
.main-header--four .topbar-two__inner::before{left:-69px}
.main-header--four .topbar-two__inner::after{right:-69px}
.main-header--four .topbar-two__text{padding:9px 220px}
@media (max-width:1599px){.main-header--four .topbar-two__text{padding:9px 160px}}
@media (max-width:1359px){.main-header--four .topbar-two__text{padding:9px 110px}}
@media (max-width:767px){.main-header--four .topbar-two__text{padding:8px 40px;font-size:11px;letter-spacing:.12em}}

/* b22 : notches back to the template grey, with the white wedge between them and
   the bar, and the bar lengthened again */
.main-header--four .topbar-two__inner::before,.main-header--four .topbar-two__inner::after{width:74px;background:#B9BEC4}
.main-header--four .topbar-two__inner::before{left:-66px}
.main-header--four .topbar-two__inner::after{right:-66px}
.main-header--four .topbar-two__text{padding:9px 250px}
@media (max-width:1599px){.main-header--four .topbar-two__text{padding:9px 170px}}
@media (max-width:1359px){.main-header--four .topbar-two__text{padding:9px 115px}}
@media (max-width:767px){.main-header--four .topbar-two__text{padding:8px 40px;font-size:11px;letter-spacing:.12em}}

/* b23 : ribbon rebuilt on the template's own geometry
   container hugs the bar, notches are the template's 60px wedge at the template's
   offset, type scaled up to the template's proportion, bar run out longer */
.main-header--four .topbar-two__inner{max-width:none;width:-moz-max-content;width:max-content;margin-left:auto;margin-right:auto;padding-top:6px}
.main-header--four .topbar-two__inner::before,.main-header--four .topbar-two__inner::after{width:60px;background:rgba(21,22,27,.3)}
.main-header--four .topbar-two__inner::before{left:-59px}
.main-header--four .topbar-two__inner::after{right:-59px}
.main-header--four .topbar-two__text{font-size:15px;letter-spacing:.14em;padding:10.5px 180px;white-space:nowrap}
@media (max-width:1599px){.main-header--four .topbar-two__text{padding:10.5px 130px}}
@media (max-width:1359px){.main-header--four .topbar-two__text{font-size:14px;padding:9px 90px}}
@media (max-width:767px){.main-header--four .topbar-two__text{font-size:11px;letter-spacing:.12em;padding:8px 40px}}

/* b24 : ribbon back to the proportions it was approved at
   (b18 and b21-b23 experiments on length are cancelled here) */
.main-header--four .topbar-two__inner{max-width:415px;width:auto;margin-left:auto;margin-right:auto;padding-top:6px}
.main-header--four .topbar-two__inner::before,.main-header--four .topbar-two__inner::after{width:60px;background:rgba(21,22,27,.3)}
.main-header--four .topbar-two__inner::before{left:-29px}
.main-header--four .topbar-two__inner::after{right:-29px}
.main-header--four .topbar-two__text{font-size:12.5px;letter-spacing:.18em;padding:9px 78px;white-space:nowrap;background-color:#006C4C}
@media (max-width:767px){.main-header--four .topbar-two__text{font-size:11px;letter-spacing:.12em;padding:8px 34px}}

/* b25 : navy stays a thin top strip only, white band under it, wider white card */
header.main-header--four{background-color:transparent}
@media (min-width:992px){
 header.main-header--four .main-header__inner{max-width:calc(100% - 12px);padding:0 20px 0 26px}
}

/* b26 : ribbon = the template's own geometry, verbatim
   container 415, notch 60 wide at -29, wedge rgba(21,22,27,.3), bar padding 10.5/95,
   both clip-paths untouched. Only the typeface and the dark are ours. */
.main-header--four .topbar-two__inner{display:flex;align-items:center;justify-content:center;max-width:415px;width:auto;margin-left:auto;margin-right:auto;position:relative;z-index:1;padding-top:6px}
.main-header--four .topbar-two__inner::before,.main-header--four .topbar-two__inner::after{content:"";position:absolute;top:0;height:100%;width:60px;background:rgba(21,22,27,.3);clip-path:polygon(50% 100%,0 0,100% 0);z-index:1}
.main-header--four .topbar-two__inner::before{left:-29px}
.main-header--four .topbar-two__inner::after{right:-29px}
.main-header--four .topbar-two__text{color:#fff;font-family:"EU Sans",Inter,Lato,system-ui,sans-serif;font-size:16px;font-weight:700;line-height:normal;letter-spacing:.16em;text-transform:uppercase;background-color:#0B263D;padding:10.5px 95px;margin:0;position:relative;z-index:1;white-space:nowrap;clip-path:polygon(7% 0%,93% 0%,100% 100%,0% 100%)}
@media (max-width:1359px){.main-header--four .topbar-two__text{font-size:14px;padding:9px 70px}}
@media (max-width:767px){.main-header--four .topbar-two__text{font-size:11px;letter-spacing:.12em;padding:8px 34px}}

/* b27 : the white card stops short of the edges, like the template
   (template caps the header container at 1680px on wide screens) */
@media (min-width:992px){
 header.main-header--four .main-header__inner{max-width:1680px;width:calc(100% - 60px);padding:0 30px}
}

/* b28 : notches sit against the bar
   the container hugs the bar so the 60px wedge at -29px always meets the bar's
   slanted edge, whatever the text length */
.main-header--four .topbar-two__inner{max-width:none;width:-moz-max-content;width:max-content}
.main-header--four .topbar-two__inner::before{left:-29px}
.main-header--four .topbar-two__inner::after{right:-29px}

/* b29 : ribbon sits flush against the top strip, no white line between the two navies */
.main-header--four .topbar-two__inner{padding-top:0}

/* b30 : card pulled in a bit more */
@media (min-width:992px){
 header.main-header--four .main-header__inner{max-width:1560px;width:calc(100% - 120px)}
}

/* b31 : card narrower on wide screens, but the subtraction stays small on laptops
   so the 10-item site menu still fits */
@media (min-width:992px){
 header.main-header--four .main-header__inner{max-width:1400px;width:calc(100% - 60px)}
}

/* b32 : the card was pinned left by the theme's margin:0 15px, so a fixed width
   left it off-centre and clipped on the right */
@media (min-width:992px){
 header.main-header--four .main-header__inner{margin-left:auto;margin-right:auto}
}

/* b33 : the white line was the 50px fixed height on the ribbon container
   centring a 40px bar inside it. Container now hugs the bar. */
.main-header--four .topbar-two__inner{height:auto;align-items:stretch}
.main-header--four .topbar-two__text{display:block}

/* b34 : one card geometry for every page, home included */
@media (min-width:992px){
 header.main-header--four .main-header__inner{max-width:1400px!important;width:calc(100% - 60px)!important;margin-left:auto!important;margin-right:auto!important;min-height:106px;padding:0 40px 0 56px!important;border-radius:100px}
}

/* b35 : the 10-item site menu was overrunning the logo once the card was capped
   at 1400px. The compact tier now applies at every desktop width, not only 1200-1599. */
@media (min-width:1200px){
 header.main-header--sitenav .main-menu .main-menu__list>li>a{font-size:13.5px;padding-left:7px;padding-right:7px}
 header.main-header--sitenav .main-menu .main-menu__list>li>a::after{left:7px;right:7px}
 header.main-header--sitenav .main-header__logo img{height:52px!important}
 header.main-header--sitenav .main-header__logo{margin-right:14px}
 header.main-header--sitenav .main-header__info{gap:8px;margin-right:8px}
 header.main-header--sitenav .eu-nav{padding-right:10px}
 header.main-header--sitenav .eu-btn--cta{padding-left:18px;padding-right:18px;font-size:14px}
 header.main-header--sitenav .main-header__inner{padding:0 24px 0 34px!important}
 header.main-header--sitenav .main-menu{margin-left:auto;margin-right:0}
}
@media (min-width:1200px) and (max-width:1439px){
 header.main-header--sitenav .main-menu .main-menu__list>li>a{font-size:12.5px;padding-left:5px;padding-right:5px}
 header.main-header--sitenav .main-menu .main-menu__list>li>a::after{left:5px;right:5px}
}

/* b36 : nav type back up to a readable size, sized per breakpoint against the
   measured natural width of the 10-item menu (803px at 15px, 640px at 13px) */
@media (min-width:1200px){
 header.main-header--sitenav .main-menu .main-menu__list>li>a{font-size:15px;font-weight:600;padding-left:9px;padding-right:9px}
 header.main-header--sitenav .main-menu .main-menu__list>li>a::after{left:9px;right:9px}
 header.main-header--sitenav .main-header__logo img{height:58px!important}
}
@media (min-width:1200px) and (max-width:1439px){
 header.main-header--sitenav .main-menu .main-menu__list>li>a{font-size:13px;padding-left:5px;padding-right:5px}
 header.main-header--sitenav .main-menu .main-menu__list>li>a::after{left:5px;right:5px}
 header.main-header--sitenav .main-header__logo img{height:50px!important}
}

/* b37 : the metric grid is a ul that never had its list marker reset, so every
   figure carried a bullet and the whole grid sat indented by the ua padding */
.eu-metrics{list-style:none;padding-left:0;margin-left:0}
.eu-metrics>li{list-style:none}
.eu-metrics>li::marker{content:""}

/* ==========================================================================
   b38 : newsletter pop-up
   ========================================================================== */
.eu-nl[hidden]{display:none!important}
.eu-nl{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:20px}
.eu-nl__scrim{position:absolute;inset:0;background:rgba(11,38,61,.55);opacity:0;transition:opacity .35s ease}
.eu-nl.is-open .eu-nl__scrim{opacity:1}
.eu-nl__panel{position:relative;z-index:1;width:100%;max-width:780px;background:#006C4C;color:#fff;border-radius:22px;padding:34px 38px;display:flex;align-items:center;gap:26px;box-shadow:0 30px 80px rgba(11,38,61,.35);transform:translateY(18px) scale(.98);opacity:0;transition:transform .4s cubic-bezier(.22,.61,.36,1),opacity .3s ease}
.eu-nl.is-open .eu-nl__panel{transform:none;opacity:1}
.eu-nl__icon{flex:0 0 auto;width:64px;height:64px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:26px}
.eu-nl__body{flex:1 1 auto;min-width:0}
.eu-nl__body h2{margin:0 0 8px;font-size:22px;line-height:1.25;font-weight:700;color:#fff}
.eu-nl__body>p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.86)}
.eu-nl__form{display:flex;align-items:stretch;gap:0;background:#fff;border-radius:999px;padding:6px;max-width:520px}
.eu-nl__form input[type=email]{flex:1 1 auto;min-width:0;border:0;outline:none;background:transparent;padding:0 18px;font-family:inherit;font-size:15px;color:#0B263D;height:46px}
.eu-nl__form input[type=email]::placeholder{color:#8FA4B5}
.eu-nl__form button{flex:0 0 auto;border:0;border-radius:999px;background:#0B263D;color:#fff;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:0 22px;height:46px;cursor:pointer;display:inline-flex;align-items:center;gap:9px;transition:background .3s ease}
.eu-nl__form button:hover{background:#123a5c}
.eu-nl__form button[disabled]{opacity:.6;cursor:default}
.eu-nl__note{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.7)}
.eu-nl__msg{margin:12px 0 0;font-size:14px;line-height:1.6;color:#fff;font-weight:600}
.eu-nl__hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.eu-nl__close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:background .3s ease}
.eu-nl__close:hover{background:rgba(255,255,255,.28)}
[dir="rtl"] .eu-nl__close{right:auto;left:14px}
@media (max-width:767px){
 .eu-nl__panel{flex-direction:column;align-items:flex-start;gap:16px;padding:28px 22px;border-radius:18px}
 .eu-nl__icon{width:52px;height:52px;font-size:22px}
 .eu-nl__body h2{font-size:19px}
 .eu-nl__form{flex-direction:column;border-radius:14px;gap:6px;max-width:none;width:100%}
 .eu-nl__form input[type=email]{height:44px;padding:0 14px}
 .eu-nl__form button{width:100%;justify-content:center;border-radius:10px}
}

/* ==========================================================================
   b39 : experience "on camera" band, client strip and video lightbox
   ========================================================================== */
.eu-vidsec{background:#0B263D;color:#fff;position:relative;overflow:hidden}
.eu-vidsec::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.055) 1.6px,transparent 1.7px);background-size:22px 22px;pointer-events:none}
.eu-vidsec .eu-container{position:relative;z-index:1}
.eu-vidsec .eu-kicker{color:#7FD1AE}
.eu-vidsec .eu-display-2{color:#fff}
.eu-vidsec .eu-accent{color:#7FD1AE}
.eu-vidgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:8px}
.eu-vid{margin:0}
.eu-vid__open{display:block;position:relative;width:100%;padding:0;border:0;background:#06182a;border-radius:16px;overflow:hidden;cursor:pointer;aspect-ratio:16 / 9}
.eu-vid__open img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,.61,.36,1);filter:saturate(.92)}
.eu-vid__open:hover img{transform:scale(1.05)}
.eu-vid__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,24,42,.10) 0%,rgba(6,24,42,.30) 55%,rgba(6,24,42,.78) 100%)}
.eu-vid__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;font-size:22px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 0 0 1px rgba(255,255,255,.35);transition:background .35s ease,box-shadow .35s ease,transform .35s ease}
.eu-vid__open:hover .eu-vid__play{background:#006C4C;box-shadow:0 0 0 10px rgba(0,108,76,.22);transform:translate(-50%,-50%) scale(1.05)}
.eu-vid__play i{margin-left:4px}
.eu-vid__cta{position:absolute;left:20px;bottom:18px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.9}
.eu-vid__meta{padding:18px 2px 0}
.eu-vid__tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7FD1AE;margin-bottom:6px}
.eu-vid__meta h3{margin:0;font-size:24px;line-height:1.25;color:#fff;font-weight:700}
.eu-clients{margin-top:54px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px}
.eu-clients__label{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.eu-clients__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.eu-clients__list li{font-size:20px;font-weight:700;color:#fff;line-height:1.2;position:relative}
.eu-clients__list li+li::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:1px;height:18px;background:rgba(255,255,255,.28)}
.eu-clients__note{flex:1 1 100%;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.58)}
@media (max-width:991px){.eu-vidgrid{grid-template-columns:1fr;gap:26px}.eu-vid__play{width:66px;height:66px;font-size:18px}.eu-vid__meta h3{font-size:21px}}
/* lightbox */
.eu-vlb[hidden]{display:none!important}
.eu-vlb{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}
.eu-vlb__scrim{position:absolute;inset:0;background:rgba(6,24,42,.86);opacity:0;transition:opacity .3s ease}
.eu-vlb.is-open .eu-vlb__scrim{opacity:1}
.eu-vlb__box{position:relative;z-index:1;width:100%;max-width:1040px;opacity:0;transform:scale(.985);transition:opacity .3s ease,transform .35s cubic-bezier(.22,.61,.36,1)}
.eu-vlb.is-open .eu-vlb__box{opacity:1;transform:none}
.eu-vlb__frame{position:relative;width:100%;aspect-ratio:16 / 9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.eu-vlb__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.eu-vlb__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.eu-vlb__title{font-size:18px;font-weight:700;color:#fff}
.eu-vlb__close{width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .3s ease}
.eu-vlb__close:hover{background:rgba(255,255,255,.3)}

/* ==========================================================================
   b40 : experience on the garlon home components
   funfact-three + project-one, in our palette, with the card media sized
   (the template relies on intrinsic image sizes; ours are mixed)
   ========================================================================== */
body.eu-family-experience .funfact-three{position:relative}
body.eu-family-experience .funfact-three__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:1}
body.eu-family-experience .funfact-three::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,38,61,.90) 0%,rgba(11,38,61,.82) 100%)}
body.eu-family-experience .funfact-three .container{position:relative;z-index:2}
body.eu-family-experience .funfact-three__inner{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;margin:0;padding:78px 0 0}
body.eu-family-experience .funfact-three__item{display:flex;align-items:flex-start;gap:16px}
body.eu-family-experience .funfact-three__item+.funfact-three__item{border-left:1px solid rgba(255,255,255,.14);padding-left:34px}
body.eu-family-experience .funfact-three__item__icon{flex:0 0 auto;width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.10);color:#7FD1AE;font-size:20px}
body.eu-family-experience .funfact-three__item__count{margin:0 0 4px;font-size:46px;line-height:1;font-weight:700;color:#fff}
body.eu-family-experience .funfact-three__item__text{margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.78)}
body.eu-family-experience .eu-funfact__note{position:relative;z-index:2;margin:40px 0 0;padding:22px 0 78px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;line-height:1.7;color:rgba(255,255,255,.6);max-width:840px}
body.eu-family-experience .project-one__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
body.eu-family-experience .project-one__top__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
body.eu-family-experience .project-one__top__list li{cursor:pointer;padding:9px 18px;border:1px solid rgba(11,38,61,.14);border-radius:999px;font-size:13.5px;font-weight:600;color:#0B263D;transition:.3s ease;line-height:1.2}
body.eu-family-experience .project-one__top__list li:hover{border-color:#006C4C;color:#006C4C}
body.eu-family-experience .project-one__top__list li.active{background:#006C4C;border-color:#006C4C;color:#fff}
body.eu-family-experience .project-one__card{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4 / 3;background:#0B263D}
body.eu-family-experience .project-one__card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
body.eu-family-experience .project-one__card:hover img{transform:scale(1.06)}
body.eu-family-experience .project-one__card__hover{position:absolute;inset:0;display:flex;align-items:flex-end;padding:24px;background:linear-gradient(180deg,rgba(11,38,61,0) 30%,rgba(11,38,61,.86) 100%);opacity:1}
body.eu-family-experience .project-one__card__hover__text{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7FD1AE}
body.eu-family-experience .project-one__card__hover__title{margin:0;font-size:20px;line-height:1.25;font-weight:700}
body.eu-family-experience .project-one__card__hover__title a{color:#fff;text-decoration:none}
body.eu-family-experience .project-one__card__hover__title a::after{content:"";position:absolute;inset:0}
body.eu-family-experience .project-one__card:hover .project-one__card__hover__title a{color:#7FD1AE}
body.eu-family-experience .eu-sectors__note{margin:38px 0 0;font-size:13px;line-height:1.75;color:#5E7A93;max-width:900px}
body.eu-family-experience .filter-item.is-hidden{display:none}
@media (max-width:991px){
 body.eu-family-experience .funfact-three__inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;padding-top:56px}
 body.eu-family-experience .funfact-three__item+.funfact-three__item{border-left:0;padding-left:0}
 body.eu-family-experience .funfact-three__item__count{font-size:38px}
 body.eu-family-experience .eu-funfact__note{padding-bottom:56px}
}
@media (max-width:575px){
 body.eu-family-experience .funfact-three__inner{grid-template-columns:1fr}
}

/* b41 : garlon lays funfact-three out as a grid, which turned the bg layer and
   the container into two columns */
body.eu-family-experience .funfact-three{display:block}

/* ==========================================================================
   b42 : experience page — final concept
   ========================================================================== */
body.eu-family-experience .eu-xhero{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;background:#0B263D;padding:150px 0 90px}
body.eu-family-experience .eu-xhero__media{position:absolute;inset:0}
body.eu-family-experience .eu-xhero__media img,body.eu-family-experience .eu-xhero__media video{width:100%;height:100%;object-fit:cover;display:block}
body.eu-family-experience .eu-xhero__veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(11,38,61,.94) 0%,rgba(11,38,61,.86) 42%,rgba(11,38,61,.66) 100%)}
body.eu-family-experience .eu-xhero__inner{position:relative;z-index:2;max-width:1160px}
body.eu-family-experience .eu-xhero .eu-crumbs{color:rgba(255,255,255,.62);margin-bottom:22px;font-size:13.5px;display:flex;gap:8px}
body.eu-family-experience .eu-xhero .eu-crumbs a{color:rgba(255,255,255,.62);text-decoration:none}
body.eu-family-experience .eu-xhero .eu-crumbs a:hover{color:#7FD1AE}
body.eu-family-experience .eu-xhero__eyebrow{color:#7FD1AE;display:block;margin-bottom:14px}
body.eu-family-experience .eu-xhero__title{margin:0 0 20px;color:#fff;font-size:clamp(34px,4.6vw,62px);line-height:1.06;font-weight:700;letter-spacing:-.01em}
body.eu-family-experience .eu-xhero__lead{margin:0 0 34px;max-width:640px;color:rgba(255,255,255,.82);font-size:16.5px;line-height:1.68}
body.eu-family-experience .eu-xhero__actions{display:flex;flex-wrap:wrap;gap:14px}
.eu-btn--onDark{border-color:rgba(255,255,255,.34)!important;color:#fff!important}
.eu-btn--onDark:hover{background:#fff!important;color:#0B263D!important;border-color:#fff!important}
body.eu-family-experience .eu-subnav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(11,38,61,.10)}
body.eu-family-experience .eu-subnav__inner{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
body.eu-family-experience .eu-subnav__inner::-webkit-scrollbar{display:none}
body.eu-family-experience .eu-subnav a{padding:16px 14px;font-size:13.5px;font-weight:600;color:#5E7A93;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:.25s ease}
body.eu-family-experience .eu-subnav a:hover,body.eu-family-experience .eu-subnav a.is-current{color:#0B263D;border-bottom-color:#006C4C}
body.eu-family-experience .eu-snap__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
body.eu-family-experience .eu-snap__item{padding:0 34px;border-left:1px solid rgba(11,38,61,.12)}
body.eu-family-experience .eu-snap__item:first-child{padding-left:0;border-left:0}
body.eu-family-experience .eu-snap__num{display:block;font-size:clamp(52px,6vw,86px);line-height:.95;font-weight:700;color:#0B263D;letter-spacing:-.03em}
body.eu-family-experience .eu-snap__label{display:block;margin-top:14px;font-size:14px;line-height:1.55;color:#5E7A93;max-width:230px}
body.eu-family-experience .eu-snap__note{margin:44px 0 0;font-size:12.5px;line-height:1.7;color:#8199AC;max-width:820px}
body.eu-family-experience .eu-engsec__lead{max-width:760px;font-size:16px;line-height:1.7;color:#42607A;margin:0 0 26px}
body.eu-family-experience .eu-engfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
body.eu-family-experience .eu-engfilter button{cursor:pointer;padding:9px 18px;border:1px solid rgba(11,38,61,.14);background:transparent;border-radius:999px;font-family:inherit;font-size:13.5px;font-weight:600;color:#0B263D;transition:.3s ease}
body.eu-family-experience .eu-engfilter button:hover{border-color:#006C4C;color:#006C4C}
body.eu-family-experience .eu-engfilter button.is-active{background:#006C4C;border-color:#006C4C;color:#fff}
body.eu-family-experience .eu-englist{display:grid;gap:26px}
body.eu-family-experience .eu-eng{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);background:#fff;border:1px solid rgba(11,38,61,.09);border-radius:16px;overflow:hidden;transition:box-shadow .4s ease,transform .4s ease}
body.eu-family-experience .eu-eng:hover{box-shadow:0 22px 60px rgba(11,38,61,.10);transform:translateY(-3px)}
body.eu-family-experience .eu-eng.is-hidden{display:none}
body.eu-family-experience .eu-eng__media{position:relative;background:#0B263D;min-height:280px}
body.eu-family-experience .eu-eng__media img{width:100%;height:100%;object-fit:cover;display:block}
body.eu-family-experience .eu-eng__body{padding:34px 38px}
body.eu-family-experience .eu-eng__svc{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;color:#006C4C;margin-bottom:10px}
body.eu-family-experience .eu-eng__client{margin:0 0 4px;font-size:26px;line-height:1.2;font-weight:700;color:#0B263D}
body.eu-family-experience .eu-eng__where{margin:0 0 22px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8199AC}
body.eu-family-experience .eu-eng__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:0 0 20px}
body.eu-family-experience .eu-eng__meta dt{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8199AC;margin-bottom:3px}
body.eu-family-experience .eu-eng__meta dd{margin:0;font-size:14.5px;line-height:1.45;font-weight:600;color:#0B263D}
body.eu-family-experience .eu-eng__note{margin:0;padding-top:18px;border-top:1px solid rgba(11,38,61,.08);font-size:13px;line-height:1.6;color:#5E7A93}
body.eu-family-experience .eu-engsec__note{margin:34px 0 0;font-size:13px;line-height:1.75;color:#5E7A93;max-width:900px}
body.eu-family-experience .eu-proggrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
body.eu-family-experience .eu-prog{position:relative;overflow:hidden;padding:40px 38px;border:1px solid rgba(11,38,61,.10);border-radius:16px;background:#fff}
body.eu-family-experience .eu-prog__ghost{position:absolute;right:-10px;bottom:-26px;font-size:104px;line-height:1;font-weight:800;color:rgba(11,38,61,.045);letter-spacing:-.04em;pointer-events:none}
body.eu-family-experience .eu-prog__std{position:relative;display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:#006C4C;margin-bottom:10px}
body.eu-family-experience .eu-prog h3{position:relative;margin:0 0 10px;font-size:26px;line-height:1.2;color:#0B263D}
body.eu-family-experience .eu-prog p{position:relative;margin:0 0 18px;font-size:15px;line-height:1.65;color:#42607A;max-width:420px}
body.eu-family-experience .eu-prog .eu-textlink{position:relative}
body.eu-family-experience .eu-regiongrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
body.eu-family-experience .eu-region{padding:32px 30px;background:#fff;border:1px solid rgba(11,38,61,.10);border-radius:14px}
body.eu-family-experience .eu-region__flag{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:#EFF6F3;color:#006C4C;margin-bottom:16px}
body.eu-family-experience .eu-region h3{margin:0 0 8px;font-size:22px;color:#0B263D}
body.eu-family-experience .eu-region p{margin:0;font-size:14.5px;line-height:1.6;color:#5E7A93}
body.eu-family-experience .eu-regions__note{margin:30px 0 0;font-size:13px;line-height:1.75;color:#5E7A93;max-width:900px}
body.eu-family-experience .eu-procflow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
body.eu-family-experience .eu-procflow li{position:relative;padding:0 20px 0 0;font-size:14.5px;line-height:1.4;font-weight:700;color:#0B263D}
body.eu-family-experience .eu-procflow li span{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;color:#006C4C;margin-bottom:12px}
body.eu-family-experience .eu-procflow li::after{content:"";position:absolute;left:0;top:-18px;width:100%;height:2px;background:rgba(11,38,61,.10)}
body.eu-family-experience .eu-procflow li::before{content:"";position:absolute;left:0;top:-22px;width:10px;height:10px;border-radius:50%;background:#006C4C}
body.eu-family-experience .eu-procsec__note{margin:44px 0 0;font-size:14.5px;line-height:1.75;color:#42607A;max-width:900px}
body.eu-family-experience .eu-accstrip{background:#0B263D;padding:52px 0}
body.eu-family-experience .eu-accstrip__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px}
body.eu-family-experience .eu-accstrip__title{margin:0;font-size:24px;line-height:1.3;color:#fff;font-weight:700;max-width:380px}
body.eu-family-experience .eu-accstrip__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
body.eu-family-experience .eu-accstrip__list li{font-size:14px;font-weight:600;color:rgba(255,255,255,.86);position:relative}
body.eu-family-experience .eu-accstrip__list li+li::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:1px;height:14px;background:rgba(255,255,255,.26)}
@media (max-width:1199px){
 body.eu-family-experience .eu-procflow{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 0}
}
@media (max-width:991px){
 body.eu-family-experience .eu-xhero{min-height:auto;padding:130px 0 70px}
 body.eu-family-experience .eu-snap__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 0}
 body.eu-family-experience .eu-snap__item{padding:0 20px}
 body.eu-family-experience .eu-snap__item:nth-child(odd){padding-left:0;border-left:0}
 body.eu-family-experience .eu-eng{grid-template-columns:1fr}
 body.eu-family-experience .eu-eng__media{min-height:220px;aspect-ratio:16/9}
 body.eu-family-experience .eu-eng__body{padding:28px 24px}
 body.eu-family-experience .eu-proggrid{grid-template-columns:1fr}
 body.eu-family-experience .eu-regiongrid{grid-template-columns:1fr}
}
@media (max-width:575px){
 body.eu-family-experience .eu-procflow{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.eu-family-experience .eu-eng__meta{grid-template-columns:1fr}
}

/* ==========================================================================
   b43 : experience hero + metrics ribbon (final concept)
   ========================================================================== */
body.eu-family-experience .eu-xh{position:relative;min-height:660px;display:flex;align-items:center;overflow:hidden;background:#0B263D;padding:170px 0 70px}
body.eu-family-experience .eu-xh__media{position:absolute;inset:0}
body.eu-family-experience .eu-xh__media img,body.eu-family-experience .eu-xh__media video{width:100%;height:100%;object-fit:cover;object-position:70% 50%;display:block}
body.eu-family-experience .eu-xh__veil{position:absolute;inset:0;background:linear-gradient(97deg,rgba(9,32,52,.96) 0%,rgba(9,32,52,.90) 34%,rgba(9,32,52,.58) 62%,rgba(9,32,52,.32) 100%)}
body.eu-family-experience .eu-xh__inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px}
body.eu-family-experience .eu-xh__copy{max-width:600px}
body.eu-family-experience .eu-xh__eyebrow{display:block;margin-bottom:22px;color:#5FCF9E;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1.7}
body.eu-family-experience .eu-xh__title{margin:0 0 22px;color:#fff;font-size:clamp(34px,4.4vw,58px);line-height:1.1;font-weight:400;letter-spacing:-.01em}
body.eu-family-experience .eu-xh__title strong{font-weight:700}
body.eu-family-experience .eu-xh__lead{margin:0 0 34px;max-width:520px;color:rgba(255,255,255,.80);font-size:16px;line-height:1.7}
body.eu-family-experience .eu-xh__actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-bottom:44px}
body.eu-family-experience .eu-xh__cta{display:inline-flex;align-items:center;gap:12px;padding:15px 30px;border-radius:999px;background:#0E9F6E;color:#fff;font-size:14.5px;font-weight:700;text-decoration:none;transition:background .3s ease,transform .3s ease}
body.eu-family-experience .eu-xh__cta:hover{background:#0b8459;transform:translateY(-2px);color:#fff}
body.eu-family-experience .eu-xh__play{display:inline-flex;align-items:center;gap:12px;border:0;background:transparent;color:#fff;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;padding:0}
body.eu-family-experience .eu-xh__play__ring{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.45);font-size:12px;transition:.3s ease}
body.eu-family-experience .eu-xh__play__ring i{margin-left:2px}
body.eu-family-experience .eu-xh__play:hover .eu-xh__play__ring{background:#fff;color:#0B263D;border-color:#fff}
body.eu-family-experience .eu-xh__chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 34px}
body.eu-family-experience .eu-xh__chips li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.78)}
body.eu-family-experience .eu-xh__chips i{color:#5FCF9E;font-size:14px}
body.eu-family-experience .eu-xh__side{margin:0;text-align:right;color:rgba(255,255,255,.62);font-size:12px;font-weight:700;letter-spacing:.20em;text-transform:uppercase;line-height:2;flex:0 0 auto}
body.eu-family-experience .eu-xh__side span{display:block;width:46px;height:2px;background:#5FCF9E;margin:14px 0 0 auto}
body.eu-family-experience .eu-ribbon{background:linear-gradient(90deg,#0B263D 0%,#0d4f3c 46%,#0E9F6E 100%);padding:30px 0}
body.eu-family-experience .eu-ribbon__inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
body.eu-family-experience .eu-ribbon__stats{list-style:none;margin:0;padding:0;display:flex;flex:1 1 auto;gap:0}
body.eu-family-experience .eu-ribbon__stats li{flex:1 1 0;min-width:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:6px 22px;border-right:1px solid rgba(255,255,255,.18)}
body.eu-family-experience .eu-ribbon__stats li:last-child{border-right:0}
body.eu-family-experience .eu-ribbon__stats li:first-child{padding-left:0}
body.eu-family-experience .eu-ribbon__stats i{grid-row:1 / span 2;color:#5FCF9E;font-size:20px}
body.eu-family-experience .eu-ribbon__n{font-size:34px;line-height:1;font-weight:700;color:#fff}
body.eu-family-experience .eu-ribbon__l{font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.80);margin-top:4px}
body.eu-family-experience .eu-ribbon__mark{display:flex;align-items:center;gap:16px;flex:0 0 auto;padding-left:26px;border-left:1px solid rgba(255,255,255,.18)}
body.eu-family-experience .eu-ribbon__mark img{width:62px;height:62px;object-fit:contain;opacity:.9}
body.eu-family-experience .eu-ribbon__mark span{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.8;color:rgba(255,255,255,.9)}
body.eu-family-experience .eu-ribbon__mark em{display:block;width:34px;height:2px;background:rgba(255,255,255,.5);margin-top:8px}
@media (max-width:1199px){
 body.eu-family-experience .eu-xh__side{display:none}
 body.eu-family-experience .eu-ribbon__mark{display:none}
 body.eu-family-experience .eu-ribbon__stats{flex-wrap:wrap}
 body.eu-family-experience .eu-ribbon__stats li{flex:1 1 44%;border-right:0;padding:10px 16px 10px 0}
}
@media (max-width:767px){
 body.eu-family-experience .eu-xh{min-height:auto;padding:140px 0 56px}
 body.eu-family-experience .eu-xh__media img{object-position:62% 50%}
 body.eu-family-experience .eu-xh__veil{background:linear-gradient(180deg,rgba(9,32,52,.92) 0%,rgba(9,32,52,.86) 60%,rgba(9,32,52,.78) 100%)}
 body.eu-family-experience .eu-ribbon__stats li{flex:1 1 100%}
 body.eu-family-experience .eu-ribbon__n{font-size:28px}
}

/* b44 : the site paints <strong> dark navy, which made the hero's bold words
   vanish against the photograph */
body.eu-family-experience .eu-xh__title,body.eu-family-experience .eu-xh__title strong,body.eu-family-experience .eu-xh__title b{color:#fff}
body.eu-family-experience .eu-xh__copy{text-align:left}

/* b45 : experience page adopts the compact section header of the concept
   (small bold title left, link right) and a darker metrics ribbon */
body.eu-family-experience .eu-ribbon{background:linear-gradient(90deg,#0B263D 0%,#0d3a3a 52%,#0d6b4e 100%)}
body.eu-family-experience .eu-ribbon__stats li{padding:6px 26px}
@media (min-width:1200px){body.eu-family-experience .eu-ribbon__stats{flex-wrap:nowrap}}
body.eu-family-experience .eu-h2row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 30px;margin-bottom:30px}
body.eu-family-experience .eu-h2row h2{margin:0;font-size:clamp(24px,2.4vw,32px);line-height:1.2;font-weight:700;color:#0B263D;letter-spacing:-.01em}
body.eu-family-experience .eu-h2row p{margin:8px 0 0;font-size:15px;line-height:1.6;color:#5E7A93;max-width:640px}
body.eu-family-experience .eu-h2row__link{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#006C4C;text-decoration:none;white-space:nowrap;padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .3s ease}
body.eu-family-experience .eu-h2row__link:hover{border-bottom-color:#006C4C;color:#006C4C}
body.eu-family-experience .eu-vidsec .eu-h2row h2{color:#fff}
body.eu-family-experience .eu-vidsec .eu-h2row p{color:rgba(255,255,255,.72)}
body.eu-family-experience .eu-vidsec .eu-h2row__link{color:#7FD1AE}
body.eu-family-experience .eu-vidsec .eu-h2row__link:hover{border-bottom-color:#7FD1AE;color:#7FD1AE}
body.eu-family-experience .eu-section{padding-top:74px;padding-bottom:74px}
body.eu-family-experience .eu-engsec__lead{display:none}

/* ================= b46 · EU-ENGCARDS · Selected Engagements (3-up) ================= */
.eu-engcards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
@media (max-width:1199px){.eu-engcards{grid-template-columns:repeat(2,1fr);gap:22px}}
@media (max-width:767px){.eu-engcards{grid-template-columns:1fr}}
.eu-engcard{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(11,38,61,.10);border-radius:18px;overflow:hidden;box-shadow:0 2px 10px rgba(11,38,61,.05);transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,border-color .35s ease}
.eu-engcard:hover{transform:translateY(-5px);box-shadow:0 18px 42px rgba(11,38,61,.13);border-color:rgba(0,108,76,.30)}
.eu-engcard__top{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(11,38,61,.09)}
.eu-engcard__brand{display:flex;align-items:center;justify-content:center;text-align:center;padding:18px 16px;min-height:112px;background:#fff}
.eu-engcard__logo{display:block;width:auto;height:auto;max-width:100%;max-height:58px;object-fit:contain}
.eu-engcard__wordmark{font-family:"EU Sans","Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:17px;font-weight:800;line-height:1.22;color:#0B263D}
.eu-engcard__logo+.eu-engcard__wordmark{display:none}
.eu-engcard__media{position:relative;min-height:112px;background:#eaeff3;overflow:hidden}
.eu-engcard__media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.eu-engcard:hover .eu-engcard__media img{transform:scale(1.05)}
.eu-engcard__body{display:flex;flex-direction:column;flex:1 1 auto;padding:20px 22px 22px}
.eu-engcard__title{margin:0 0 14px;font-size:19px;line-height:1.32;font-weight:700;color:#0B263D}
.eu-engcard__meta{margin:0 0 20px;padding:0;display:block}
.eu-engcard__meta>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;padding:9px 0;border-bottom:1px solid rgba(11,38,61,.075)}
.eu-engcard__meta>div:last-child{border-bottom:0}
.eu-engcard__meta dt{margin:0;flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6d7c89}
.eu-engcard__meta dd{margin:0;flex:1 1 auto;font-size:14px;font-weight:600;line-height:1.4;color:#0B263D;text-align:right}
.eu-engcard__cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:100px;background:#0B263D;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .3s ease,color .3s ease}
.eu-engcard__cta:hover,.eu-engcard__cta:focus{background:#006C4C;color:#fff}
.eu-engcard__cta i{font-size:11px;transition:transform .3s ease}
.eu-engcard:hover .eu-engcard__cta i{transform:translateX(3px)}
.eu-engsec__note{margin:26px 0 0;font-size:13px;line-height:1.65;color:#6d7c89;max-width:860px}

/* b46b · engagement card alignment */
.eu-engcard__title{min-height:2.64em;display:flex;align-items:flex-start}
.eu-engcard__meta>div{min-height:44px}
.eu-engcard__meta>div:nth-child(4){display:block;padding-top:8px;padding-bottom:9px}
.eu-engcard__meta>div:nth-child(4) dd{text-align:left;margin-top:4px}
@media (max-width:767px){.eu-engcard__title{min-height:0;display:block}}

/* b46c · brand panel balance */
.eu-engcard__top>*{min-width:0}
.eu-engcard__brand{border-right:1px solid rgba(11,38,61,.07);padding:16px 14px}
.eu-engcard__wordmark{font-size:15.5px;letter-spacing:.005em;overflow-wrap:anywhere}

/* ============ b47 - EU-ENGBLK - engagement blocks (solution-area pattern) ============ */
.eu-engblk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:46px;align-items:center;margin-top:44px}
.eu-engblk+.eu-engblk{margin-top:66px;padding-top:60px;border-top:1px solid rgba(11,38,61,.10)}
@media (max-width:991px){.eu-engblk{grid-template-columns:1fr;gap:26px;margin-top:32px}.eu-engblk+.eu-engblk{margin-top:44px;padding-top:40px}}
@media (min-width:992px){.eu-engblk--flip .eu-engblk__main{order:2}.eu-engblk--flip .eu-engblk__panel{order:1}}
.eu-engblk__brand{display:flex;align-items:center;min-height:62px;margin-bottom:18px}
.eu-engblk__logo{display:block;width:auto;height:auto;max-height:60px;max-width:250px;object-fit:contain}
.eu-engblk__wordmark{font-size:21px;font-weight:800;line-height:1.2;color:#0B263D}
.eu-engblk__logo+.eu-engblk__wordmark{display:none}
.eu-engblk__kicker{display:inline-flex;align-items:center;gap:11px;font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#006C4C;margin-bottom:10px}
.eu-engblk__kicker::before{content:"";display:inline-block;width:26px;height:2px;background:#006C4C}
.eu-engblk__title{margin:0 0 14px;font-size:clamp(23px,2.1vw,30px);line-height:1.26;font-weight:700;color:#0B263D}
.eu-engblk__lede{margin:0 0 20px;font-size:15.5px;line-height:1.75;color:#4b5a66;max-width:62ch}
.eu-engblk__pill{display:inline-flex;align-items:center;gap:14px;margin:0 0 18px;padding:7px 28px 7px 7px;border-radius:100px;background:#F1F4F6;font-size:15px;font-weight:700;color:#0B263D}
.eu-engblk__pillicon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#006C4C;color:#fff;font-size:13px}
.eu-engblk__note{margin:0 0 24px;padding:12px 18px;border-left:3px solid #006C4C;background:#F5F7F8;font-size:13.5px;line-height:1.65;color:#5b6a76;max-width:60ch}
.eu-engblk__cta{display:inline-flex;align-items:center;gap:10px;padding:13px 28px;border-radius:100px;background:#0B263D;color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .3s ease,color .3s ease}
.eu-engblk__cta:hover,.eu-engblk__cta:focus{background:#006C4C;color:#fff}
.eu-engblk__cta i{font-size:11px;transition:transform .3s ease}
.eu-engblk__cta:hover i{transform:translateX(3px)}
.eu-engblk__panel{border-radius:22px;padding:26px;background:linear-gradient(152deg,#0B263D 0%,#0d4437 58%,#006C4C 100%);box-shadow:0 18px 44px rgba(11,38,61,.18)}
.eu-engblk__pname{margin:0 0 6px;font-size:19px;font-weight:700;line-height:1.3;color:#fff}
.eu-engblk__pmeta{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.84)}
.eu-engblk__plist{list-style:none;margin:0 0 20px;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.22)}
.eu-engblk__plist li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;font-weight:600;line-height:1.55;color:#fff}
.eu-engblk__plist li+li{margin-top:10px}
.eu-engblk__plist i{flex:0 0 auto;margin-top:3px;font-size:14px;color:#7fe3bb}
.eu-engblk__media{position:relative;display:block;overflow:hidden;border:5px solid #fff;border-radius:14px;background:#0B263D;aspect-ratio:16/10}
.eu-engblk__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
a.eu-engblk__media:hover img,a.eu-engblk__media:focus img{transform:scale(1.05)}
.eu-engblk__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:64px;height:64px;padding-left:4px;border-radius:50%;background:rgba(255,255,255,.94);color:#006C4C;font-size:19px;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .3s ease,background .3s ease}
a.eu-engblk__media:hover .eu-engblk__play{background:#fff;transform:translate(-50%,-50%) scale(1.08)}
.eu-engblk__vcap{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;background:linear-gradient(180deg,rgba(11,38,61,0) 0%,rgba(11,38,61,.84) 100%);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}

/* b47b */
.eu-engblk__logo{max-height:72px;max-width:275px}
@media (max-width:991px){.eu-engblk__logo{max-height:58px;max-width:220px}}

/* ============ b48 - EU-LSTRIP - moving client logo strip ============ */
.eu-clientsec{padding-top:70px;padding-bottom:74px}
.eu-lstrip{position:relative;overflow:hidden;margin:34px 0 26px;border-top:1px solid rgba(11,38,61,.12);border-bottom:1px solid rgba(11,38,61,.12);background:linear-gradient(180deg,#FFF 0%,#F7FAF9 50%,#FFF 100%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.eu-lstrip__track{display:flex;width:max-content;animation:euLogoRoll 42s linear infinite;will-change:transform}
.eu-lgo__group{display:flex;flex:0 0 auto}
.eu-lstrip:hover .eu-lstrip__track,.eu-lstrip:focus-within .eu-lstrip__track{animation-play-state:paused}
@keyframes euLogoRoll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.eu-lgo{position:relative;flex:0 0 clamp(210px,18vw,270px);display:grid;place-items:center;min-height:clamp(128px,11vw,168px);padding:20px 14px}
.eu-lgo::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px;background:rgba(11,38,61,.12)}
.eu-lgo__in{position:relative;display:grid;place-items:center;width:100%;height:100%;line-height:0;text-decoration:none}
.eu-lgo img{width:auto;max-height:clamp(60px,5.4vw,86px);max-width:82%;object-fit:contain;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.eu-lgo img[src*="amoc"]{max-height:clamp(58px,5.2vw,82px);max-width:56%}
.eu-lgo img[src*="epc"]{max-height:clamp(62px,5.6vw,88px);max-width:62%}
.eu-lgo img[src*="oriental"]{max-height:clamp(52px,4.6vw,72px);max-width:84%}
.eu-lgo img[src*="energya"]{max-height:clamp(56px,5vw,78px);max-width:76%}
.eu-lgo:hover img{transform:scale(1.06)}
.eu-lgo__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding-left:3px;border-radius:50%;background:rgba(0,108,76,.95);color:#fff;font-size:14px;opacity:0;box-shadow:0 6px 18px rgba(11,38,61,.28);transition:opacity .32s ease,transform .32s ease;pointer-events:none}
a.eu-lgo__in:hover .eu-lgo__play,a.eu-lgo__in:focus-visible .eu-lgo__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (prefers-reduced-motion:reduce){.eu-lstrip__track{animation:none;width:100%;justify-content:center}.eu-lgo__group[aria-hidden="true"]{display:none}}
@media (max-width:767px){.eu-lstrip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}.eu-lgo{flex:0 0 170px;min-height:104px;padding:16px 12px}}

/* ============ b49 - art-direction pass on /experience ============ */
/* section rhythm: every band on the page is 74/74 */
body.eu-family-experience #sectors{padding-top:74px;padding-bottom:74px}
/* ribbon: reference proportions - larger marks, tabular figures so the counters do not jitter */
body.eu-family-experience .eu-ribbon{padding:34px 0}
body.eu-family-experience .eu-ribbon__stats li{column-gap:16px;padding:6px 26px}
body.eu-family-experience .eu-ribbon__stats li:first-child{padding-left:0}
body.eu-family-experience .eu-ribbon__stats i{font-size:26px}
body.eu-family-experience .eu-ribbon__n{font-size:38px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
body.eu-family-experience .eu-ribbon__l{font-size:12.5px;line-height:1.42;letter-spacing:.01em}
body.eu-family-experience .eu-ribbon__mark{padding-left:30px}
body.eu-family-experience .eu-ribbon__mark img{width:66px;height:66px}
@media (max-width:1199px){body.eu-family-experience .eu-ribbon__stats li{column-gap:14px;padding:10px 16px 10px 0}body.eu-family-experience .eu-ribbon__n{font-size:32px}}
/* logo strip fades in with the rest of the page */
body.eu-family-experience .eu-lstrip.eu-reveal{will-change:opacity,transform}

/* ============ b50 - art direction: programme cards + accreditation band ============ */
body.eu-family-experience .eu-proggrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:36px}
@media (max-width:1199px){body.eu-family-experience .eu-proggrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}
@media (max-width:767px){body.eu-family-experience .eu-proggrid{grid-template-columns:1fr}}
body.eu-family-experience .eu-prog{display:flex;flex-direction:column;padding:32px 30px 30px;border-radius:18px;box-shadow:0 2px 10px rgba(11,38,61,.05);transition:transform .42s cubic-bezier(.22,.61,.36,1),box-shadow .42s ease,border-color .42s ease}
body.eu-family-experience .eu-prog::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#006C4C 0%,#0E9F6E 100%);transform:scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
body.eu-family-experience .eu-prog:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(11,38,61,.14);border-color:rgba(0,108,76,.30)}
body.eu-family-experience .eu-prog:hover::after{transform:scaleX(1)}
body.eu-family-experience .eu-prog__ico{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin-bottom:20px;border-radius:16px;background:rgba(0,108,76,.10);color:#006C4C;font-size:21px;transition:background .42s ease,color .42s ease,transform .42s cubic-bezier(.22,.61,.36,1)}
body.eu-family-experience .eu-prog:hover .eu-prog__ico{background:#006C4C;color:#fff;transform:translateY(-3px) rotate(-4deg)}
body.eu-family-experience .eu-prog__ghost{right:20px;top:10px;bottom:auto;font-size:72px;color:rgba(11,38,61,.055);transition:color .42s ease}
body.eu-family-experience .eu-prog:hover .eu-prog__ghost{color:rgba(0,108,76,.10)}
body.eu-family-experience .eu-prog__std{font-size:11px;letter-spacing:.11em;margin-bottom:9px;text-transform:none}
body.eu-family-experience .eu-prog h3{font-size:21px;line-height:1.28;margin:0 0 11px;min-height:2.56em}
body.eu-family-experience .eu-prog p{font-size:14.5px;line-height:1.72;max-width:none;margin:0 0 22px;flex:1 1 auto}
body.eu-family-experience .eu-prog .eu-textlink{margin-top:auto;align-self:flex-start;padding-top:16px;border-top:1px solid rgba(11,38,61,.09);width:100%}

/* accreditation band */
.eu-accband{position:relative;overflow:hidden;background:linear-gradient(126deg,#0B263D 0%,#0c3348 52%,#0d4437 100%);padding:74px 0}
.eu-accband::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:22px 22px;opacity:.5;pointer-events:none}
.eu-accband__inner{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:52px;align-items:center}
@media (max-width:991px){.eu-accband{padding:58px 0}.eu-accband__inner{grid-template-columns:1fr;gap:34px}}
.eu-accband__kicker{display:inline-flex;align-items:center;gap:11px;margin-bottom:12px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7fe3bb}
.eu-accband__kicker::before{content:"";display:inline-block;width:26px;height:2px;background:#7fe3bb}
.eu-accband .eu-accstrip__title{margin:0 0 14px;font-size:clamp(25px,2.5vw,34px);line-height:1.24;font-weight:700;color:#fff;max-width:19ch}
.eu-accband__lede{margin:0 0 26px;font-size:15px;line-height:1.75;color:rgba(255,255,255,.80);max-width:52ch}
.eu-accband__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:575px){.eu-accband__grid{grid-template-columns:1fr}}
.eu-accband__grid li{display:flex;flex-direction:column;padding:22px 20px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.055);transition:background .4s ease,border-color .4s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
.eu-accband__grid li:hover{background:rgba(255,255,255,.10);border-color:rgba(127,227,187,.48);transform:translateY(-4px)}
.eu-accband__ico{display:grid;place-items:center;width:42px;height:42px;margin-bottom:14px;border-radius:12px;background:rgba(127,227,187,.16);color:#7fe3bb;font-size:16px}
.eu-accband__n{display:block;margin-bottom:6px;font-size:15.5px;font-weight:700;line-height:1.3;color:#fff}
.eu-accband__d{display:block;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.72)}
.eu-accband .eu-btn--onDark{position:relative;z-index:1}

/* ============ b51 - band alternation so the white cards read as cards ============ */
/* engagements(soft) - clients(white) - programmes(soft) - sectors(white) - regions(soft) - process(white) - accreditation(dark) */
body.eu-family-experience #programmes{background:#EBF4EF}
body.eu-family-experience .eu-prog{background:#fff;border-color:rgba(11,38,61,.12);box-shadow:0 4px 16px rgba(11,38,61,.06)}
body.eu-family-experience .eu-prog:hover{box-shadow:0 24px 50px rgba(11,38,61,.15)}
/* the client strip keeps its own white ground, so give the band a hairline top and bottom */
body.eu-family-experience #clients{background:#fff}

/* ============ b52 - photo ground on every programme card ============ */
body.eu-family-experience .eu-prog{isolation:isolate}
body.eu-family-experience .eu-prog::after{z-index:3}
body.eu-family-experience .eu-prog__bg{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;opacity:.13;
  -webkit-mask-image:linear-gradient(152deg,transparent 26%,rgba(0,0,0,.55) 62%,#000 100%);
          mask-image:linear-gradient(152deg,transparent 26%,rgba(0,0,0,.55) 62%,#000 100%);
  transition:opacity .5s ease}
body.eu-family-experience .eu-prog__bg img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform .9s cubic-bezier(.22,.61,.36,1)}
body.eu-family-experience .eu-prog__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(152deg,rgba(11,38,61,.95) 0%,rgba(11,38,61,.86) 44%,rgba(13,68,55,.66) 100%);opacity:0;transition:opacity .5s ease}
body.eu-family-experience .eu-prog:hover .eu-prog__bg{opacity:1;-webkit-mask-image:none;mask-image:none}
body.eu-family-experience .eu-prog:hover .eu-prog__bg::after{opacity:1}
body.eu-family-experience .eu-prog:hover .eu-prog__bg img{transform:scale(1.09)}
/* text flips to the dark-ground palette on hover */
body.eu-family-experience .eu-prog:hover{border-color:rgba(255,255,255,.20)}
body.eu-family-experience .eu-prog:hover h3{color:#fff}
body.eu-family-experience .eu-prog:hover p{color:rgba(255,255,255,.86)}
body.eu-family-experience .eu-prog:hover .eu-prog__std{color:#7fe3bb}
body.eu-family-experience .eu-prog:hover .eu-prog__ghost{color:rgba(255,255,255,.16)}
body.eu-family-experience .eu-prog:hover .eu-prog__ico{background:rgba(255,255,255,.16);color:#fff}
body.eu-family-experience .eu-prog:hover .eu-textlink{color:#fff;border-top-color:rgba(255,255,255,.28)}
body.eu-family-experience .eu-prog h3,body.eu-family-experience .eu-prog p,body.eu-family-experience .eu-prog .eu-prog__std,body.eu-family-experience .eu-prog .eu-textlink{transition:color .45s ease,border-color .45s ease}
@media (hover:none){body.eu-family-experience .eu-prog__bg{opacity:.16}}

/* ============ b53 - photo ground on the accreditation band and its tiles ============ */
.eu-accband{background-image:linear-gradient(126deg,rgba(11,38,61,.965) 0%,rgba(12,51,72,.935) 52%,rgba(13,68,55,.915) 100%),url("/assets/images/eu/aerial-landscape-1920.webp");background-size:cover,cover;background-position:center,center;background-repeat:no-repeat,no-repeat}
.eu-accband__grid li{position:relative;overflow:hidden;isolation:isolate}
.eu-accband__bg{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;opacity:.15;
  -webkit-mask-image:linear-gradient(150deg,transparent 28%,rgba(0,0,0,.6) 64%,#000 100%);
          mask-image:linear-gradient(150deg,transparent 28%,rgba(0,0,0,.6) 64%,#000 100%);
  transition:opacity .45s ease}
.eu-accband__bg img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform .85s cubic-bezier(.22,.61,.36,1)}
.eu-accband__grid li:hover .eu-accband__bg{opacity:.38;-webkit-mask-image:none;mask-image:none}
.eu-accband__grid li:hover .eu-accband__bg img{transform:scale(1.10)}
.eu-accband__ico,.eu-accband__n,.eu-accband__d{position:relative;z-index:1}
.eu-accband__grid li:hover .eu-accband__ico{background:rgba(127,227,187,.28);color:#fff}
.eu-accband__ico{transition:background .45s ease,color .45s ease}

/* ============ b54 - accreditation band: no photography, graphic depth only ============ */
/* body.eu-family-experience .eu-accstrip{background:#0B263D;padding:52px 0} beats a bare .eu-accband, so every rule here carries the same prefix */
body.eu-family-experience .eu-accband{position:relative;overflow:hidden;background:linear-gradient(126deg,#0B263D 0%,#0c3348 52%,#0d4437 100%);padding:74px 0}
@media (max-width:991px){body.eu-family-experience .eu-accband{padding:58px 0}}
body.eu-family-experience .eu-accband::after{content:"";position:absolute;top:-34%;right:-8%;width:62%;height:160%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(14,159,110,.20),rgba(14,159,110,0) 72%)}
body.eu-family-experience .eu-accband__inner{position:relative;z-index:1}
/* tiles: the standard mark itself is the ornament, drawn oversized and faint */
body.eu-family-experience .eu-accband__mark{position:absolute;right:-12px;bottom:-24px;z-index:0;font-size:104px;line-height:1;color:rgba(255,255,255,.055);pointer-events:none;transition:color .45s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
body.eu-family-experience .eu-accband__grid li:hover .eu-accband__mark{color:rgba(127,227,187,.17);transform:translate(-4px,-5px) rotate(-6deg)}
body.eu-family-experience .eu-accband__grid li{position:relative;overflow:hidden;isolation:isolate}
body.eu-family-experience .eu-accband__ico,body.eu-family-experience .eu-accband__n,body.eu-family-experience .eu-accband__d{position:relative;z-index:1}
body.eu-family-experience .eu-accband__ico{transition:background .45s ease,color .45s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
body.eu-family-experience .eu-accband__grid li:hover .eu-accband__ico{background:rgba(127,227,187,.26);color:#fff;transform:translateY(-2px)}

/* ============ b55 - public register lookup result (EU-VERIFY) ============ */
.eu-tool__result{display:none}
.eu-tool__result.is-shown{display:block;margin-top:22px;padding:22px 24px;border-radius:16px;border:1px solid rgba(11,38,61,.12);background:#fff}
.eu-tool__result.is-good{border-color:rgba(0,108,76,.34);background:linear-gradient(180deg,rgba(0,108,76,.05) 0%,#fff 60%)}
.eu-tool__result.is-warn{border-color:rgba(197,124,20,.40);background:linear-gradient(180deg,rgba(197,124,20,.06) 0%,#fff 60%)}
.eu-tool__result.is-none{border-color:rgba(11,38,61,.16);background:#F6F8F9}
.eu-tool__result.is-busy{border-style:dashed}
.eu-vres__lead{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 16px}
.eu-vres__pill{display:inline-flex;align-items:center;padding:6px 16px;border-radius:100px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:#6d7c89}
.eu-vres__pill.is-good{background:#006C4C}
.eu-vres__pill.is-warn{background:#B4720F}
.eu-vres__pill.is-none{background:#6d7c89}
.eu-vres__ent{font-size:18px;font-weight:700;line-height:1.3;color:#0B263D}
.eu-vres__meta{margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
@media (max-width:640px){.eu-vres__meta{grid-template-columns:1fr}}
.eu-vres__meta>div{display:flex;flex-wrap:wrap;gap:4px 14px;padding:9px 0;border-bottom:1px solid rgba(11,38,61,.08)}
.eu-vres__meta dt{margin:0;flex:0 0 auto;min-width:132px;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6d7c89;align-self:center}
.eu-vres__meta dd{margin:0;flex:1 1 160px;font-size:14.5px;font-weight:600;line-height:1.5;color:#0B263D}
.eu-vres__note{margin:0;font-size:14.5px;line-height:1.7;color:#4b5a66}
.eu-vres__note strong{color:#0B263D}
.eu-vres__gate{margin:18px 0 0;padding:12px 18px;border-left:3px solid #006C4C;background:#F5F7F8;font-size:13.5px;line-height:1.65;color:#4b5a66}
.eu-vres__doc{margin:20px 0 0;padding:0}
.eu-vres__doc img{display:block;width:100%;max-width:520px;height:auto;border:1px solid rgba(11,38,61,.14);border-radius:12px;background:#fff}
.eu-vres__doc figcaption{margin-top:10px;font-size:12.5px;line-height:1.6;color:#6d7c89;max-width:520px}

/* ============ b56 - register copy display (canvas, guarded) ============ */
.eu-vres__doc{position:relative;margin:22px 0 0;padding:0;max-width:560px}
.eu-vres__doc canvas{display:block;width:100%;height:auto;border:1px solid rgba(11,38,61,.16);border-radius:12px;background:#F2F5F7;min-height:120px}
.eu-vres__doc,.eu-vres__doc *{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.eu-vres__doc::after{content:"";position:absolute;left:0;right:0;top:0;bottom:34px;border-radius:12px;pointer-events:auto}
.eu-vres__doc figcaption{position:relative;z-index:1;margin-top:10px;font-size:12.5px;line-height:1.6;color:#6d7c89}
@media print{.eu-vres__doc canvas{display:none}.eu-vres__doc figcaption::after{content:" This copy is not printable. Use the register entry."}}

/* ================= b57 - RTL for everything built in b46-b56 =================
   dir="rtl" sits on <html> and the family class sits on <body>, so the only
   selector shape that matches is [dir="rtl"] <descendant>. Never
   [dir="rtl"].family and never .family [dir="rtl"].
   ========================================================================== */

/* arrows point the other way in an RTL reading order */
[dir="rtl"] .fa-arrow-right{transform:scaleX(-1)}
[dir="rtl"] .eu-engblk__cta:hover i,[dir="rtl"] .eu-prog:hover .eu-textlink i{transform:scaleX(-1) translateX(3px)}

/* ribbon */
[dir="rtl"] body.eu-family-experience .eu-ribbon__stats li{border-right:0;border-left:1px solid rgba(255,255,255,.18)}
[dir="rtl"] body.eu-family-experience .eu-ribbon__stats li:last-child{border-left:0}
[dir="rtl"] body.eu-family-experience .eu-ribbon__stats li:first-child{padding-left:26px;padding-right:0}
[dir="rtl"] body.eu-family-experience .eu-ribbon__mark{border-left:0;border-right:1px solid rgba(255,255,255,.18);padding-left:0;padding-right:30px}

/* engagement blocks */
[dir="rtl"] body.eu-family-experience .eu-engblk__note{border-left:0;border-right:3px solid #006C4C}

/* client strip */
[dir="rtl"] body.eu-family-experience .eu-lgo::before{left:auto;right:0}

/* programme cards */
[dir="rtl"] body.eu-family-experience .eu-prog::after{transform-origin:right center}
[dir="rtl"] body.eu-family-experience .eu-prog__ghost{right:auto;left:20px}
[dir="rtl"] body.eu-family-experience .eu-prog__bg{
  -webkit-mask-image:linear-gradient(208deg,transparent 26%,rgba(0,0,0,.55) 62%,#000 100%);
          mask-image:linear-gradient(208deg,transparent 26%,rgba(0,0,0,.55) 62%,#000 100%)}
[dir="rtl"] body.eu-family-experience .eu-prog__bg::after{background:linear-gradient(208deg,rgba(11,38,61,.95) 0%,rgba(11,38,61,.86) 44%,rgba(13,68,55,.66) 100%)}

/* accreditation band */
[dir="rtl"] body.eu-family-experience .eu-accband{background-image:linear-gradient(234deg,#0B263D 0%,#0c3348 52%,#0d4437 100%)}
[dir="rtl"] body.eu-family-experience .eu-accband::after{right:auto;left:-8%}
[dir="rtl"] body.eu-family-experience .eu-accband__mark{right:auto;left:-12px;transform:scaleX(-1)}
[dir="rtl"] body.eu-family-experience .eu-accband__grid li:hover .eu-accband__mark{transform:scaleX(-1) translate(4px,-5px) rotate(6deg)}

/* register lookup result */
[dir="rtl"] .eu-vres__meta dd{text-align:left}
[dir="rtl"] .eu-vres__gate{border-left:0;border-right:3px solid #006C4C}

/* Arabic type: letters join, so no tracking and no uppercase, and the lost
   visual weight is bought back with a touch more size */
[lang="ar"] .eu-engblk__kicker,[lang="ar"] .eu-prog__std,[lang="ar"] .eu-accband__kicker,
[lang="ar"] .eu-vres__pill,[lang="ar"] .eu-engblk__cta,[lang="ar"] .eu-lgo__play,
[lang="ar"] .eu-ribbon__l,[lang="ar"] .eu-vres__meta dt,[lang="ar"] .eu-engsec__note{
  letter-spacing:0;text-transform:none}
[lang="ar"] .eu-engblk__kicker,[lang="ar"] .eu-accband__kicker{font-size:13px}
[lang="ar"] .eu-prog__std{font-size:12.5px}
[lang="ar"] .eu-vres__meta dt{font-size:13px}
[lang="ar"] .eu-engblk__cta,[lang="ar"] .eu-prog .eu-textlink{letter-spacing:0;text-transform:none;font-size:14px}
[lang="ar"] .eu-ribbon__n{letter-spacing:0}

/* mobile: the split blocks stack, and the panel leads on a narrow column */
@media (max-width:767px){
  body.eu-family-experience .eu-engblk{gap:20px}
  body.eu-family-experience .eu-engblk__panel{padding:20px}
  body.eu-family-experience .eu-engblk__lede{font-size:15px}
  body.eu-family-experience .eu-prog{padding:26px 22px 24px}
  body.eu-family-experience .eu-prog__ghost{font-size:58px;top:8px}
  body.eu-family-experience .eu-accband__grid li{padding:18px 16px}
  .eu-vres__meta dt{min-width:0;flex:1 1 100%}
  .eu-vres__meta dd{flex:1 1 100%;text-align:start}
}

/* ============ b58 - RTL header geometry ============
   The desktop card is padded 0 40px 0 56px, the wider side being the logo
   side. In RTL the logo moves to the right, so the padding and the nav
   auto-margin have to move with it or the menu runs under the logo. */
@media (min-width:992px){
  [dir="rtl"] header.main-header--four .main-header__inner,
  [dir="rtl"] header.main-header--sitenav .main-header__inner{padding:0 56px 0 40px!important}
  [dir="rtl"] .mast .mast__in{padding:0 56px 0 40px!important}
}
/* superseded by b59 */
/* superseded by b59 */
@media (min-width:1200px){
  [dir="rtl"] header.main-header--sitenav .main-menu .main-menu__list{padding-right:18px}
}

/* ============ b59 - the actual RTL header fix ============
   Measured, not guessed: the logo carries margin-right:24px and the menu
   carries margin-right:auto. Both are PHYSICAL, so in RTL the logo gap and
   the auto push both have to move to the left edge, otherwise the menu is
   pushed under the logo — which is the overlap on the Arabic header.
   b58 mirrored the menu the wrong way; this replaces it. */
[dir="rtl"] header.main-header--four .main-header__logo,
[dir="rtl"] header.main-header--sitenav .main-header__logo{margin-right:0;margin-left:24px}
[dir="rtl"] header.main-header--four .main-menu,
[dir="rtl"] header.main-header--sitenav .main-menu{margin-right:0;margin-left:auto}
[dir="rtl"] .mast .brand{margin-right:0;margin-left:24px}
[dir="rtl"] .mast #site-nav{margin-right:0;margin-left:auto}
@media (min-width:1200px){
  [dir="rtl"] header.main-header--sitenav .main-menu .main-menu__list{padding-right:0;padding-left:18px}
}

/* ============ b60 - the video lightbox on a phone ============
   A 16:9 frame inside 24px padding leaves a postage stamp on a 390px
   screen, and a hosted Drive player needs the room. On small screens the
   box goes near full-bleed, the frame is capped by viewport height so it
   still fits in landscape, and an explicit escape hatch opens the file in
   its own tab when the embedded player misbehaves. */
@media (max-width:767px){
  .eu-vlb{padding:10px}
  .eu-vlb__box{max-width:100%}
  .eu-vlb__bar{gap:10px;margin-bottom:8px}
  .eu-vlb__title{font-size:14px;line-height:1.35}
  .eu-vlb__frame{border-radius:10px;max-height:72svh}
}
@media (max-width:767px) and (orientation:landscape){
  .eu-vlb{padding:6px}
  .eu-vlb__bar{margin-bottom:4px}
  .eu-vlb__title{display:none}
  .eu-vlb__frame{max-height:86svh}
}
.eu-vlb__out{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;border:1px solid rgba(255,255,255,.34);color:#fff;font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .3s ease,border-color .3s ease}
.eu-vlb__out:hover,.eu-vlb__out:focus{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);color:#fff}
.eu-vlb__acts{display:flex;align-items:center;gap:10px;flex:0 0 auto}
@media (max-width:767px){.eu-vlb__out{padding:7px 12px;font-size:11.5px}}


/* ============ b61 - RTL desktop nav fit ============
   Measured in a 1600px same-origin iframe, not guessed. The Arabic menu is
   intrinsically ~954px wide; .eu-nav is flex:1 1 auto with min-width:0 so it
   shrinks, but .main-menu keeps min-width:auto and refuses to, so the list
   overflowed to the RIGHT and sat under the logo. Two parts:
   1200-1399 the Arabic nav cannot fit at all -> burger.
   1400+ it fits once the RTL gap (margin-LEFT in garlon-rtl.css, not
   margin-right), the link padding and the font size are tightened.
   Verified clear at 1400/1440/1536/1600/1920: 44px gap to the logo. */
@media (min-width:1200px) and (max-width:1399px){
  [dir="rtl"] .eu-nav .main-menu{display:none}
  [dir="rtl"] .eu-burger,[dir="rtl"] .mobile-nav__toggler{display:inline-flex}
}
@media (min-width:1400px){
  [dir="rtl"] .main-menu .main-menu__list > li + li{margin-left:12px;margin-right:0}
  [dir="rtl"] .main-menu .main-menu__list > li > a{padding-left:6px;padding-right:6px;font-size:14.5px}
  [dir="rtl"] header.main-header--sitenav .eu-nav,
  [dir="rtl"] header.main-header--four .eu-nav{padding-right:0;padding-left:10px}
  [dir="rtl"] header.main-header--sitenav .eu-nav .main-menu,
  [dir="rtl"] header.main-header--four .eu-nav .main-menu{min-width:0}
}


/* ============ b62 - LTR desktop nav fit ============
   Same root cause as b61, and it was live in ENGLISH too: measured in a
   same-origin iframe the nav list sat 4-185px UNDER the logo at every width
   from 1280 to 1920 (worst at 1440, where a max-width:1499 rule adds a second
   20px gap on top of the base margin-left). Below 1400 the English nav cannot
   fit at all -> burger. Verified clear at 1400/1440/1499/1536/1600/1920:
   34-82px of clearance to the logo. */
@media (min-width:1200px) and (max-width:1399px){
  html:not([dir="rtl"]) .eu-nav .main-menu{display:none}
  html:not([dir="rtl"]) .eu-burger,
  html:not([dir="rtl"]) .mobile-nav__toggler{display:inline-flex}
}
@media (min-width:1400px){
  html:not([dir="rtl"]) .main-menu .main-menu__list > li + li{margin-left:8px!important;margin-right:0!important}
  html:not([dir="rtl"]) .main-menu .main-menu__list > li > a{padding-left:4px!important;padding-right:4px!important}
  html:not([dir="rtl"]) .eu-nav .main-menu{min-width:0}
}


/* b63 — video lightbox on phones. A 16/9 frame at 390px viewport is only ~190px
   tall, and a hosted Drive player spends most of that on its own chrome, so the
   picture is unusable. Give the frame real height on small screens, let the box
   use the full width, and keep the out-link a proper tap target. */
@media (max-width:640px){
  .eu-vlb{padding:12px}
  .eu-vlb__box{max-width:none}
  .eu-vlb__bar{gap:10px;margin-bottom:8px}
  .eu-vlb__title{font-size:14px;line-height:1.35}
  .eu-vlb__frame{aspect-ratio:auto;height:min(64vh,calc((100vw - 24px)*0.5625 + 120px));min-height:260px;border-radius:12px}
  .eu-vlb__out{min-height:40px;display:inline-flex;align-items:center;padding-inline:10px}
  .eu-vlb__close{min-width:40px;min-height:40px}
}
@media (max-width:640px) and (orientation:landscape){
  .eu-vlb{padding:8px}
  .eu-vlb__frame{height:min(80vh,calc((100vw - 16px)*0.5625));min-height:0}
}


/* b64 — header collision guard. The logo size was set twice, at two different
   sizes, in two stylesheets (energy-up-final.css 198x72, energy-up-premium.css
   auto x54). While the later file was still loading, the header painted with the
   oversized logo sitting on top of the first nav items. The two now agree; this
   block is the belt: a reserved gap the menu can never occupy, either direction. */
.main-header__logo{margin-inline-end:28px}
.eu-nav .main-menu,.eu-nav .main-menu__list{min-width:0}
@media (min-width:1200px){
  .main-header__inner{column-gap:20px}
}


/* b67 — mobile legibility and tap targets on the inner pages, from a 390px
   audit: an 11px topbar line and a 22px-tall breadcrumb link (WCAG 2.2 SC 2.5.8
   asks for 24px). */
@media (max-width:640px){
  .topbar-two__text,.eu-topbar__text{font-size:12px;line-height:1.45}
  .eu-crumbs a,.eu-crumbs li{min-height:24px;display:inline-flex;align-items:center}
  .eu-crumbs{gap:6px 10px;flex-wrap:wrap}
}


/* b70 — Ahmed: hide sitemap, cookie policy and accessibility from the footer,
   on mobile and desktop alike. The pages stay live and stay in the sitemap; only
   the footer links go. */
.eu-footer__legal li:has(a[href$="/sitemap"]),
.eu-footer__legal li:has(a[href$="/cookie-policy"]),
.eu-footer__legal li:has(a[href$="/accessibility"]){display:none}

/* b81 — reserve the Font Awesome icon box so the async font swap cannot resize
   buttons and wrap the hero action row. Measured on /experience at 376px:
   .eu-xh__actions was 54px before the icon font arrived and 118px after — a 64px
   push on everything below it, which is the CLS 0.119 on the inner pages. */
.eu-xh__actions i[class*="fa-"],
.eu-xh__cta i[class*="fa-"],
.eu-xh__play i[class*="fa-"],
.btn i[class*="fa-"],
a.eu-cta i[class*="fa-"]{
  display:inline-block;width:1em;min-width:1em;height:1em;line-height:1;
  text-align:center;font-style:normal;flex:0 0 auto}