/* ==================================================================
   Masdar Helpline - stylesheet
   ------------------------------------------------------------------
   Palette follows the official Masdar brand colours. All colours are
   defined once in :root below - change them there and the whole page
   follows.
   ================================================================== */

:root{
  --heading-blue: #006CA3;
  --helpline-gradient:
    /* Percentage ellipses keep cyan below the upper-right on wide
       banners and strips; circles expanded with panel width. */
    radial-gradient(ellipse 80% 100% at 100% 100%, #5FC2D9 0%, #50A0BF 25%, transparent 58%),
    radial-gradient(ellipse 90% 100% at 100% 0%, #3873A6 0%, transparent 62%),
    linear-gradient(90deg, #162C40 0%, #162C40 18%, #2F6073 62%, #50A0BF 100%);

  /* ---- Masdar brand palette ----------------------------------------
     Sampled from the supplied brand gradients and the footer logo. */
  --blue:#366CA4;        /* Masdar blue - matches the footer logo    */
  --blueD:#2A5580;       /* darker blue for hover                    */
  --cyan:#5EB8D7;        /* light accent from the gradients          */
  --cyanL:#66C3D5;       /* brightest accent (Gradient 4 highlight)  */
  --navy:#0C354B;        /* approved deep blue for text on white     */
  --navyD:#0F1B2F;       /* deepest navy from Gradient 3             */

  /* ---- approved text blues on white -------------------------------
     Only these two may be used for blue type on a white background. */
  --ink-blue:#0C354B;    /* HEX #0c354b - headings                   */
  --link-blue:#006CA3;   /* HEX #006ca3 - links & interactive text   */

  /* ---- brand gradient ---------------------------------------------
     The supplied gradient (image.png), rebuilt as CSS. Sampled:
       left  #1A2133 -> #202B3F -> #344B63 -> #4D7293 -> #5F90BE right
       top-right corner  #4C6AA8   bottom-right corner  #77B6D7
     Used for the banner overlay, the CEO panel, the Helpline Manual
     box and the tile icons. Use these tokens - do not mix new blues. */
  --grad-brand:
    radial-gradient(120% 135% at 100% 100%, #77B6D7 0%, rgba(119,182,215,0) 55%),
    radial-gradient(110% 120% at 100% 0%,   #4C6AA8 0%, rgba(76,106,168,0) 52%),
    linear-gradient(100deg, #1A2133 0%, #202B3F 22%, #344B63 42%, #4D7293 62%, #5F90BE 100%);

  /* Same ramp on a compact square, for the small tile icons. */
  --grad-brand-icon:
    radial-gradient(130% 130% at 100% 100%, #77B6D7 0%, rgba(119,182,215,0) 62%),
    linear-gradient(135deg, #1A2133 0%, #344B63 45%, #5680AC 100%);

  /* Soft tint of the same ramp, for light panels on white. */
  --grad-soft:
    /* top-right blend: #006BA1, the core blue sampled from the supplied artwork */
    radial-gradient(80% 120% at 100% 0%,  rgba(0,107,161,.16) 0%, rgba(0,107,161,0) 62%),
    radial-gradient(90% 120% at 0% 100%,  rgba(26,33,51,.10) 0%, rgba(26,33,51,0) 60%),
    linear-gradient(140deg, #FFFFFF 0%, #F1F7FB 58%, #E8F2F8 100%);

  /* ---- neutrals ---- */
  --ink:#1F2C33;
  --text2:#4A5A66;
  --text3:#6B7C88;
  --border:#DCE5EB;
  --tint:#EAF4F9;        /* light tint for panels */
  --tint2:#F5FAFD;       /* softest tint for card backgrounds */
  --white:#FFFFFF;
  --amber:#D98324;       /* emergency notice */
  --amberBg:#FFF4E0;

  /* ---- effects ---- */
  --ring:rgba(54,108,164,.35);
  --shadow-1:0 1px 2px rgba(12,53,75,.06);
  --shadow-2:0 10px 24px rgba(12,53,75,.10);
  --shadow-3:0 18px 40px rgba(12,53,75,.16);
  --radius:16px;
  --radius-sm:10px;
  --ease:cubic-bezier(.4,0,.2,1);

  /* ---- type -------------------------------------------------------
     DIN for Latin, GE SS for Arabic. See fonts/README.txt - drop the
     licensed files into fonts/ and these stacks pick them up.       */
  --font-regular:"DIN Pro","DIN Next LT Pro","DIN",Arial,Helvetica,sans-serif;
  --font-medium:"DIN Pro","DIN Next LT Pro","DIN",Arial,Helvetica,sans-serif;
  --font-bold:"DIN Pro","DIN Next LT Pro","DIN",Arial,Helvetica,sans-serif;

  /* legacy aliases kept so older rules/snippets keep working */
  --green:var(--blue);
  --greenD:var(--blueD);
  --dark:#3C4A55;
  --darkD:var(--navy);
}

/* ==================================================================
   FONTS - DIN
   ------------------------------------------------------------------
   Masdar's brand typeface (see the brand type sheet: DIN Bold for
   headlines and subheads, DIN Medium, DIN Regular for body).

   Shipped: DIN Pro Light, the one genuine DIN cut in the supplied
   folder with full Latin + Latin-Extended + Greek + Cyrillic
   coverage. Its proportions are the wide, open DIN Next/DIN Pro
   shapes shown on the brand sheet.

   DIN Regular, Medium and Bold were NOT supplied (those files came
   through empty - see fonts/README.txt). Until they are:
     Regular / Medium -> the shipped DIN Pro Light
     Bold             -> synthesised from DIN Pro by the browser,
                         which keeps the correct DIN proportions.

   DIN Alternate Bold was removed: it is a different, noticeably
   narrower cut and read as "tight" against the brand sheet.
   ================================================================== */
@font-face{
  font-family:"DIN Pro";
  src:local("DIN Pro Light"),local("DINPro-Light"),
      url("../fonts/DINPro-Light.woff") format("woff"),
      url("../fonts/DINPro-Light.otf")  format("opentype");
  /* declared narrow so the browser synthesises the bold weights
     rather than substituting a different family */
  font-weight:300 400;
  font-style:normal; font-display:swap;
}

/* If a real DIN is installed on the machine - or you drop the proper
   web fonts into fonts/ - these take priority automatically. */
@font-face{
  font-family:"DIN Pro";
  src:local("DIN Next LT Pro Medium"),local("DINNextLTPro-Medium"),
      local("DIN Pro Medium"),local("DINPro-Medium"),
      url("../fonts/DINPro-Medium.woff2") format("woff2"),
      url("../fonts/DINPro-Medium.woff")  format("woff");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"DIN Pro";
  src:local("DIN Next LT Pro Bold"),local("DINNextLTPro-Bold"),
      local("DIN Pro Bold"),local("DINPro-Bold"),
      url("../fonts/DINPro-Bold.woff2") format("woff2"),
      url("../fonts/DINPro-Bold.woff")  format("woff");
  font-weight:600 900; font-style:normal; font-display:swap;
}

/* Arabic / Urdu - GE SS is licensed and was not supplied. Drop the
   files into fonts/ and this activates with no code change; until
   then Arabic falls back to the system UI font. unicode-range keeps
   it off Latin pages entirely. */
@font-face{
  font-family:"GE SS Two";
  src:local("GE SS Two Light"),local("GESSTwoLight"),
      url("../fonts/GESSTwoLight.woff2") format("woff2"),
      url("../fonts/GESSTwoLight.woff")  format("woff");
  font-weight:300 500; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"GE SS Two";
  src:local("GE SS Two Bold"),local("GESSTwoBold"),
      url("../fonts/GESSTwoBold.woff2") format("woff2"),
      url("../fonts/GESSTwoBold.woff")  format("woff");
  font-weight:600 900; font-style:normal; font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}

/* Allow the synthetic bold described above. */
html{font-synthesis:weight;-webkit-font-synthesis:weight}

/* Hindi - DIN has no Devanagari, so name the good system faces
   explicitly rather than leaving it to a generic fallback. */
[lang="hi"]{
  --font-regular:"Nirmala UI","Kohinoor Devanagari","Noto Sans Devanagari","Mangal","Segoe UI",Arial,sans-serif;
  --font-medium:"Nirmala UI","Kohinoor Devanagari","Noto Sans Devanagari","Mangal","Segoe UI",Arial,sans-serif;
  --font-bold:"Nirmala UI","Kohinoor Devanagari","Noto Sans Devanagari","Mangal","Segoe UI",Arial,sans-serif;
}

/* Arabic and Urdu run on GE SS throughout. */
[lang="ar"], [lang="ur"], [dir="rtl"]{
  --font-regular:'GE SS Two',"Segoe UI",Tahoma,Arial,sans-serif;
  --font-medium:'GE SS Two',"Segoe UI",Tahoma,Arial,sans-serif;
  --font-bold:'GE SS Two',"Segoe UI",Tahoma,Arial,sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--font-regular);
  font-weight:400;
  color:var(--ink);
  background:var(--white);
  /* DIN Pro Light is a light cut, so body sits at 15px for weight on
     screen. Leading is 1.55 - the sheet's 110% is a print value and
     is too tight for running text at this size. */
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding-inline:max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right));
}
a{color:var(--link-blue)}
img{max-width:100%}

/* icons are declared once in the sprite at the top of index.html */
.svg-sprite{display:none}

/* shared outline treatment for every sprite icon on the page */
.icon svg,
.manual-icon svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------ */
header{
  /* solid white so the sticky bar always matches the logo artwork */
  background:var(--white);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(12,53,75,.06);
  position:sticky;
  top:0;
  z-index:30;
}

.hbar{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px 20px;
  flex-wrap:wrap;
  /* 16px above and below a 32px logo = 64px bar.
     padding-block only, so .wrap keeps its side margin - previously
     "padding:16px 0" zeroed it and the logo touched the screen edge. */
  padding-block:16px;
  min-height:64px;
}

.wordmark{display:inline-flex;align-items:center;line-height:0}

/* Header logo, sized to match masdar.ae's header mark. The source
   artwork is 236 x 50, so 150 x 32 keeps the exact 4.72 ratio. */
.wordmark img{
  width:150px;
  height:32px;
  max-width:100%;
  object-fit:contain;
}


/* The footer logo is a different asset with its own proportions. */
footer .wordmark img{width:auto;height:44px}

/* ------------------------------------------------------------------
   LANGUAGE SWITCHER (globe, top right)
   ------------------------------------------------------------------ */
/* training link + language switcher, grouped at the end of the bar */
.hbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-inline-start:auto;
  flex-wrap:wrap;
}

.training-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--white);
  color:var(--ink-blue);
  font-family:var(--font-medium);
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:var(--shadow-1);
  transition:border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.training-link:hover{border-color:var(--link-blue);color:var(--link-blue);box-shadow:var(--shadow-2)}
.training-icon{
  width:18px;height:18px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* small-screen header rules: see "compact header" below */

.lang{position:relative}

.lang-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--white);
  color:var(--ink-blue);
  font-family:var(--font-medium);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  box-shadow:var(--shadow-1);
  transition:border-color .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.lang-btn:hover{border-color:var(--link-blue);color:var(--link-blue);box-shadow:var(--shadow-2)}

/* Shared pill: Access Training (a link) and the language button (a
   native button) get identical box rules. Links inherit the page's
   1.55 line-height and buttons do not, which made the two pills
   different heights on some mobile browsers - so height, line-height,
   border and font are all pinned here explicitly. */
.training-link,
.lang-btn{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:36px;
  padding:0 14px;
  border:1px solid #DCE5EB;
  border-radius:999px;
  background:#FFFFFF;
  color:#0C354B;
  font-family:var(--font-medium);
  font-size:13px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  vertical-align:middle;
  box-shadow:0 1px 2px rgba(12,53,75,.06);
  -webkit-appearance:none;
          appearance:none;
  -webkit-tap-highlight-color:transparent;
}
.training-link:visited{color:#0C354B}
.training-link:hover,
.lang-btn:hover{border-color:#006CA3;color:#006CA3;box-shadow:var(--shadow-2)}

/* icons in both pills: fixed 18px whatever the browser */
.training-icon,
.globe{width:18px;height:18px;flex:0 0 18px;display:block}

.globe{
  width:18px;height:18px;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
}

.caret{
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  opacity:.7;
  transition:transform .2s var(--ease);
}
.lang.open .caret{transform:rotate(180deg)}

.lang-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:60;
  width:min(460px,86vw);
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-3);
  padding:16px;
  animation:menuIn .16s var(--ease);
}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
[dir="rtl"] .lang-menu{right:auto;left:0}

.lang-menu-head{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text2);
  margin-bottom:10px;
}

/* three languages per row */
.lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:520px){ .lang-grid{grid-template-columns:repeat(2,1fr)} }

.lang-opt{
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--tint2);
  color:var(--ink);
  font-family:var(--font-regular);
  font-size:13px;
  line-height:1.3;
  text-align:center;
  cursor:pointer;
  transition:.16s var(--ease);
}
.lang-opt:hover{border-color:var(--link-blue);background:var(--tint);color:var(--ink-blue)}
.lang-opt.is-current{
  background:var(--grad-brand);
  border-color:transparent;
  color:#fff;
  font-weight:500;
}

/* ------------------------------------------------------------------
   HERO
   The photograph sits on ::before and the brand gradient on ::after,
   so the heading stays readable over any image.
   ------------------------------------------------------------------ */
.hero{
  position:relative;
  color:#fff;
  overflow:hidden;
  /* same height as v8 */
  min-height:300px;
  display:flex;
  align-items:center;
  /* the supplied gradient is the base layer across the whole banner */
  background:#0E3E62 url('../img/banner-helpline.png') center/cover no-repeat;
}

.hero::before{
  /* v8.6: the supplied banner artwork already includes the photo
     and gradient, so this layer is switched off. */
  content:none;
}

@media (max-width:700px){
  .hero{min-height:260px}
  /* the mask would hide most of the photo on a narrow screen */
}

.hero::after{
  /* v8.6: the supplied banner artwork already includes the photo
     and gradient, so this layer is switched off. */
  content:none;
}

.hero-inner{position:relative;z-index:2;padding-block:64px} /* side margin comes from .wrap */

.hero h1{
  font-family:var(--font-bold);
  font-size:clamp(32px,5vw,46px);
  /* brand type sheet: Headline, leading 100% */
  line-height:1.0;
  margin:0;
  font-weight:700;
  letter-spacing:-.01em;
}
.hero h1::after{
  content:"";
  display:block;
  width:64px;height:4px;
  margin-top:18px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--cyanL),rgba(255,255,255,.28));
}

/* ------------------------------------------------------------------
   CARD GRID
   ------------------------------------------------------------------ */
.gridsec{
  padding:64px 0 76px;
  background:linear-gradient(180deg,#fff 0%,#F4F9FC 100%);
}
.gridsec h2{
  text-align:center;
  font-family:var(--font-bold);
  font-weight:700;
  color:var(--ink-blue);
  font-size:clamp(24px,3vw,30px);
  /* brand type sheet: Subhead, leading 110% */
  line-height:1.1;
  margin:0 0 8px;
  font-weight:700;
  letter-spacing:-.01em;
}
.gridsec h2::after{
  content:"";
  display:block;
  width:56px;height:3px;
  margin:14px auto 0;
  border-radius:2px;
  background:linear-gradient(90deg,var(--navy),var(--cyanL));
}
.gridsec .sub{text-align:center;color:var(--text2);max-width:720px;margin:0 auto 44px}
.gridsec .sub a{font-family:var(--font-medium);font-weight:500;color:var(--link-blue);text-decoration:none;white-space:nowrap;border-bottom:1px solid rgba(0,108,163,.4)}
.gridsec .sub a:hover{color:var(--ink-blue);border-bottom-color:var(--ink-blue)}

.grid9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
@media (max-width:900px){ .grid9{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .grid9{grid-template-columns:minmax(0,1fr)} }

.card{
  position:relative;
  background:linear-gradient(180deg,#fff 0%,var(--tint2) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 26px 26px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:var(--shadow-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

/* brand accent bar that grows across the top on hover */
.card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--navy),var(--blue),var(--cyanL));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
[dir="rtl"] .card::before{transform-origin:right}

.card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-3);
  border-color:var(--ring);
}
.card:hover::before{transform:scaleX(1)}

.icon{
  width:52px;height:52px;
  /* v8.6: each icon is a supplied artwork tile (icon + background) */
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  flex-shrink:0;
  transition:transform .2s var(--ease), filter .2s var(--ease);
}
.icon img{display:block;width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(12,53,75,.22))}
.card:hover .icon{transform:translateY(-2px) scale(1.05)}

.card h3{
  margin:0 0 10px;
  font-family:var(--font-bold);
  color:var(--ink-blue);
  font-size:18px;
  line-height:1.15;
  font-weight:700;
}
.card p{margin:0 0 16px;color:var(--text2);font-size:15px;line-height:1.55}
.card p:last-of-type{flex-grow:1}
.p-muted{color:var(--text3);font-size:13.5px}

/* ---- disclosure categories ---- */
.disc-list{
  margin:0 0 14px;
  padding:0;
  list-style:none;
  color:var(--text2);
  font-size:14px;
}
.disc-list li{position:relative;padding-inline-start:20px;margin-bottom:7px}
.disc-list li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.62em;
  width:7px;height:7px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--cyanL));
}
.disc-access{
  margin:0 0 16px !important;
  font-family:var(--font-medium);
  font-size:12.5px;
  font-weight:500;
  color:var(--ink-blue);
  opacity:.75;
}

/* ---- CEO feature card ---- */
/* Spans the full row so the grid below it stays gap-free at every
   breakpoint (3 columns, 2 columns, then 1). */
.card-feature{
  grid-column:1 / -1;
  padding:32px 30px;
  background:#0E3E62 url('../img/bg-ceo-message.png') center/cover no-repeat;
  border-color:transparent;
  color:#fff;
}
.card-feature h3{color:#fff}
.card-feature::before{background:linear-gradient(90deg,var(--cyanL),#fff)}

.ceo-body{display:flex;gap:26px;align-items:stretch;flex-grow:1}

.ceo-photo{
  width:180px;height:auto;
  align-self:flex-start;
  border-radius:12px;
  flex-shrink:0;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}

.ceo-quote{
  position:relative;
  margin:0;
  padding-inline-start:22px;
  border-inline-start:3px solid rgba(255,255,255,.35);
  color:#EAF3FA;
  /* scales with the panel so the quote fills the card on wide screens */
  font-size:clamp(17px,1.55vw,22px);
  font-style:italic;
  line-height:1.6;
  flex-grow:1;
  align-self:center;
}

/* The CEO message is English in every language. On Arabic and Urdu
   pages it keeps the same left-to-right layout and DIN typeface it has
   everywhere else (dir="ltr" lang="en" on the blockquote). */
[dir="rtl"] .ceo-quote{
  direction:ltr;
  text-align:left;
  unicode-bidi:isolate;
  font-family:"DIN Pro","DIN Next LT Pro","DIN",Arial,Helvetica,sans-serif;
}

@media (max-width:600px){
  .ceo-body{flex-direction:column;align-items:flex-start}
  .ceo-photo{width:130px}
  .ceo-quote{font-size:16px}
}

/* ------------------------------------------------------------------
   SPEAK UP WITH CONFIDENCE
   Full-width feature panel: soft brand wash, quote mark, and three
   pillars along the bottom.
   ------------------------------------------------------------------ */
.speakup{
  grid-column:1 / -1;
  background:var(--grad-soft);
  border-color:#D2E3EF;
  padding:34px 32px 30px;
}
/* nothing follows the copy now, so the last paragraph should not
   stretch the panel */
.speakup-body p:last-child{margin-bottom:0}

/* Collapsed state - fades the copy out behind a Read more button.
   The class is only added by main.js, so with JavaScript off the full
   text stays readable. */
.speakup-body.is-clamped{
  max-height:150px;
  overflow:hidden;
  position:relative;
}
.speakup-body.is-clamped::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:70px;
  background:linear-gradient(180deg,rgba(235,244,250,0) 0%,#EBF4FA 85%);
  pointer-events:none;
}

.read-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:16px;
  padding:9px 20px;
  border:1px solid var(--link-blue);
  border-radius:999px;
  background:transparent;
  color:var(--link-blue);
  font-family:var(--font-bold);
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  align-self:flex-start;
  transition:background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease);
}
.read-toggle:hover{background:var(--link-blue);color:#fff;box-shadow:var(--shadow-2)}
.read-toggle::after{
  content:"\25BE";
  font-size:11px;
  transition:transform .2s var(--ease);
}
.read-toggle[aria-expanded="true"]::after{transform:rotate(180deg)}
.speakup::before{transform:scaleX(1);background:linear-gradient(90deg,var(--navy),var(--blue),var(--cyanL))}
.speakup:hover{transform:none;box-shadow:var(--shadow-2);border-color:#D2E3EF}

.speakup-head{margin-bottom:6px}

.speakup h3{
  margin:0;
  font-family:var(--font-bold);
  font-weight:700;
  line-height:1.1;
  font-size:clamp(20px,2.4vw,24px);
  color:var(--ink-blue);
}

.speakup-body{
  /* single column, full width of the panel */
  margin-top:12px;
}
.speakup-body p{
  margin:0 0 14px;
  color:var(--text2);
  font-size:15px;
  line-height:1.6;
}

/* ------------------------------------------------------------------
   LINKS AND BUTTONS
   ------------------------------------------------------------------ */
.cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--link-blue);
  font-family:var(--font-bold);
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  margin-top:auto;
  align-self:flex-start;
}
.cta:hover{color:var(--ink-blue);text-decoration:underline}
.cta::after{content:"\2192";transition:transform .18s var(--ease)}
[dir="rtl"] .cta::after{content:"\2190"}
.cta:hover::after{transform:translateX(3px)}
[dir="rtl"] .cta:hover::after{transform:translateX(-3px)}

.btn{
  display:inline-block;
  padding:12px 24px;
  border-radius:999px;
  text-decoration:none;
  font-family:var(--font-bold);
  font-weight:700;
  font-size:14px;
  background:var(--grad-brand);
  color:#fff;
  text-align:center;
  border:0;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(12,53,75,.20);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(12,53,75,.28);filter:saturate(115%)}

/* ------------------------------------------------------------------
   CALL US card internals
   ------------------------------------------------------------------ */
.callout{
  display:flex;
  align-items:center;
  margin:0 0 16px;
  padding:10px 14px;
  background:linear-gradient(135deg,rgba(12,53,75,.05),rgba(0,182,221,.08));
  border:1px solid #D8E7F1;
  border-radius:var(--radius-sm);
}
.callout-number{
  font-family:var(--font-bold);
  font-size:15px;
  font-weight:700;
  color:var(--ink-blue);
  text-decoration:none;
  letter-spacing:.01em;
}
.callout-number:hover{color:var(--link-blue)}

select{
  width:100%;
  padding:11px 12px;
  font-size:14px;
  font-family:var(--font-regular);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--ink);
  margin-bottom:12px;
}
select:hover{border-color:var(--link-blue)}

#dial{
  background:var(--tint);
  border-inline-start:4px solid var(--blue);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  font-size:13px;
}
#dial h4{margin:0 0 10px;font-family:var(--font-bold);color:var(--ink-blue);font-size:15px;font-weight:700}

.dial-entry{margin:0 0 10px;padding-inline-start:10px;border-inline-start:2px solid rgba(12,53,75,.14)}
.dial-name{font-size:12px;color:var(--text2);margin-bottom:1px}

.num{font-family:var(--font-bold);font-size:19px;font-weight:700;color:var(--ink-blue);display:block;margin:2px 0}
.num a{color:inherit;text-decoration:none}
.num a:hover{text-decoration:underline;color:var(--link-blue)}

/* Emergency notice inside the country panel - plain text, no callout
   box, matching the body copy around it. */
.dial-note{
  margin:12px 0 0;
  font-size:13px;
  line-height:1.55;
  color:var(--text2);
}

/* ------------------------------------------------------------------
   HELPLINE MANUAL STRIP
   ------------------------------------------------------------------ */
.manual{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-top:28px;
  padding:22px 26px;
  background:#0E3E62 url('../img/bg-helpline-manual.png') center/cover no-repeat;
  border-radius:var(--radius);
  box-shadow:var(--shadow-2);
  color:#fff;
}
.manual-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  flex-shrink:0;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color:var(--cyan);
}
.manual-icon svg{width:24px;height:24px}
.manual-text{flex:1 1 320px}
.manual-text strong{display:block;font-family:var(--font-bold);font-weight:700;font-size:16px}
.manual-text p{margin:2px 0 0;color:#CFE3F1;font-size:14px}
.manual .btn{background:#fff;color:var(--navy);box-shadow:0 6px 16px rgba(0,0,0,.20)}
.manual .btn:hover{box-shadow:0 10px 22px rgba(0,0,0,.28)}

/* ------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------ */
footer{
  /* #366CA4 sampled from Masdarlogobluefotter.png, so the logo sits
     flush against the bar with no visible edge. */
  background:#0E3E62 url('../img/bg-footer.png') center/cover no-repeat;
  color:#EAF4FB;
  padding:38px 0;
  font-size:14px;
}
footer a{color:#FFFFFF}

.foot-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px 28px;
  flex-wrap:wrap;
}

/* bottom bar - sits under the brand row, link pushed to the far end
   (which flips to the left automatically for Arabic and Urdu) */
.foot-bottom{
  display:flex;
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.22);
}

.privacy-link{
  margin-inline-start:auto;
  color:#FFFFFF;
  font-size:13px;
  font-family:var(--font-medium);
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45);
  transition:border-color .18s var(--ease);
}
.privacy-link:hover{border-bottom-color:#FFFFFF}
.legal{margin:0;max-width:720px;color:#EAF4FB;font-size:13px}

/* v8.4: scoped heading colours only. No extra text backgrounds. */
.gridsec .section-heading,
.card .card-heading,
.manual .btn.helpline-manual-link{
  color:var(--heading-blue);
}

/* ------------------------------------------------------------------
   v9.1: language drop-down - each language chip takes the Helpline
   Manual artwork on hover. The selected language uses it too, so it
   reads as the same "active" state. Button and panel are unchanged
   (white, matching the Access Training button).
   ------------------------------------------------------------------ */
.lang-opt:hover,
.lang-opt:focus-visible,
.lang-opt.is-current{
  background:#0E3E62 url('../img/bg-helpline-manual.png') center/cover no-repeat;
  border-color:transparent;
  color:#FFFFFF;
}

/* ==================================================================
   RESPONSIVE & CROSS-BROWSER  (Final v2.0)
   ------------------------------------------------------------------
   Desktop is unchanged. These rules only tighten the layout on
   tablets and phones and smooth over browser differences.
   ================================================================== */

/* Stop mobile Edge / Safari / Chrome inflating small text, and never
   let anything push the page wider than the screen. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
@supports (overflow:clip){ body{overflow-x:clip} }

/* Long words (German compounds, URLs, phone labels) wrap instead of
   overflowing their box. */
h1,h2,h3,h4,p,li,blockquote,.dial-name,.num{overflow-wrap:break-word}

/* Header pieces may shrink; the logo never does. */
.wordmark{flex-shrink:0}
.hbar-actions,.lang{min-width:0}
.lang-current{
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Hover "lift" only on devices that really hover - on touch screens
   it otherwise sticks after a tap. */
@media (hover:none){
  .card:hover{transform:none;box-shadow:var(--shadow-1)}
  .card:hover::before{transform:scaleX(0)}
  .card:hover .icon{transform:none}
  .btn:hover{transform:none}
}

/* ---------- tablets (601-900px) ---------- */
@media (max-width:900px){
  .gridsec{padding:52px 0 64px}
}

/* ---------- compact header (up to 680px) ----------
   The full header needs ~626px in the longest language (Greek), so
   it switches to the compact one-row layout a little before that. */
@media (max-width:680px){
  .hbar{flex-wrap:nowrap;gap:12px;padding-block:12px;min-height:56px}
  .wordmark img{width:112px;height:auto}
  .hbar-actions{flex-wrap:nowrap;gap:6px}
  .training-link,.lang-btn{height:34px;padding:0 10px;gap:6px;font-size:12px}
  .training-link span{display:none}          /* icon only; label via aria-label/title */
  .lang-current{max-width:88px}
  .lang-menu{width:min(360px, calc(100vw - 32px))}
}

/* ---------- phones (up to 600px) ---------- */
@media (max-width:600px){
  .wrap{padding-inline:max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right))}


  .hero-inner{padding-block:48px}
  .gridsec{padding:40px 0 52px}
  .gridsec .sub{margin-bottom:32px}
  .grid9{gap:16px}

  .card{padding:22px 20px 20px}
  .card-feature{padding:24px 20px}
  .speakup{padding:24px 20px 22px}

  /* Helpline Manual: button goes full width and may wrap long translations */
  .manual{padding:20px;gap:14px}
  .manual .btn{white-space:normal;width:100%}

  /* 16px stops iPhone Safari zooming the page when the list is tapped */
  select{font-size:16px}

  .foot-grid{gap:14px}
}

/* ---------- small phones (up to 380px, e.g. iPhone SE) ---------- */
@media (max-width:380px){
  .wordmark img{width:96px}
  .lang-current{max-width:60px}
  .hbar{gap:8px}
}

/* ---------- landscape phones: keep the banner from filling the screen ---------- */
@media (max-height:500px) and (orientation:landscape){
  .hero{min-height:200px}
  .hero-inner{padding-block:36px}
}

/* ------------------------------------------------------------------
   MOTION PREFERENCES
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ------------------------------------------------------------------
   PRINT
   ------------------------------------------------------------------ */
@media print{
  header,.lang,.manual .btn,.read-toggle{display:none}
  .speakup-body.is-clamped{max-height:none;overflow:visible}
  .speakup-body.is-clamped::after{display:none}
  .hero{min-height:auto;color:#000}
  .hero{background:none}
  .card,.speakup,.manual{box-shadow:none;border:1px solid #ccc;background:#fff;color:#000}
}