/* ==========================================================================
   Kuwait Insurance House — site stylesheet
   One stylesheet serves LTR and RTL via logical properties.
   Fonts are self-hosted: no external requests, nothing to break offline.
   ========================================================================== */

/* Raleway carries English. One variable file, the whole 100-900 axis, Latin
   subset. The italic is declared but only downloads if italic text appears. */
@font-face{
  font-family:"Raleway";
  src:url("../fonts/raleway-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Raleway";
  src:url("../fonts/raleway-italic-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

/* Almarai carries Arabic — four static weights, unsubsetted so no Arabic
   shaping or contextual form is at risk. */
@font-face{font-family:"Almarai";src:url("../fonts/almarai-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Almarai";src:url("../fonts/almarai-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Almarai";src:url("../fonts/almarai-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Almarai";src:url("../fonts/almarai-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  /* Brand — sampled from the official KIH logo */
  --navy:        #3A4167;
  --rose:        #9C7975;

  /* Ramp */
  --navy-900:    #161B33;
  --navy-800:    #1D2340;
  --navy-700:    #262D50;
  --navy-400:    #6E7597;
  --navy-200:    #B9BDCE;

  --rose-600:    #8C6A66;   /* carries white text at 4.8:1 */
  --rose-700:    #7D5C58;   /* accessible on light grounds (5.1:1) */
  --rose-300:    #C9A9A4;   /* accessible on navy grounds */
  --rose-100:    #EADCD9;

  --paper:       #EDEFF4;   /* cool pale ground */
  --paper-2:     #F7F8FA;
  --white:       #FFFFFF;
  --ink:         #14161F;
  --rule:        #D3D8E3;
  --rule-dark:   rgba(201,169,164,.28);

  /* Type — one family per language. Hierarchy comes from weight and scale,
     not from a serif/sans contrast. */
  --display: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;

  --w-hero:   300;   /* Raleway is at its best light and large */
  --w-h:      500;
  --w-h3:     600;
  --w-body:   400;
  --w-strong: 600;
  --ls-hero: -.022em;
  --ls-h:    -.012em;

  --fs-hero:  clamp(2.5rem, 1.2rem + 4.2vw, 4.25rem);
  --fs-h1:    clamp(2rem, 1.1rem + 2.8vw, 3.125rem);
  --fs-h2:    clamp(1.55rem, 1.1rem + 1.5vw, 2.25rem);
  --fs-h3:    clamp(1.2rem, 1rem + .6vw, 1.5rem);
  --fs-lead:  clamp(1.075rem, 1rem + .45vw, 1.3rem);
  --fs-body:  1rem;
  --fs-sm:    .875rem;

  --lh-tight: 1.12;
  --lh-body:  1.7;

  /* Layout */
  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --wrap: 1240px;
  --section-y: clamp(3.5rem, 7vw, 7rem);
}

/* Arabic: same tokens, different faces and rhythm. Arabic needs more leading
   and has no serif/sans distinction — Kufi carries the display role because it
   echoes the geometric Kufic of the KIH monogram. */
[dir="rtl"]{
  --display: "Almarai", system-ui, sans-serif;
  --body:    "Almarai", system-ui, sans-serif;

  /* Arabic script reads lighter than Latin at the same nominal weight, so each
     role steps up one. Letter-spacing is ZEROED — tracking Arabic pulls the
     joins apart and breaks the word shapes. */
  --w-hero:   400;
  --w-h:      700;
  --w-h3:     700;
  --w-body:   400;
  --w-strong: 700;
  --ls-hero:  0;
  --ls-h:     0;

  --lh-tight: 1.4;
  --lh-body:  1.95;
  --measure: 60ch;
}

/* --------------------------------------------------------------- reset --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--rose-700);text-underline-offset:.22em;text-decoration-thickness:1px}
a:hover{color:var(--navy)}
h1,h2,h3,h4{font-family:var(--display);line-height:var(--lh-tight);color:var(--navy);margin:0}
h1,h2{font-weight:var(--w-h);letter-spacing:var(--ls-h)}
h3,h4{font-weight:var(--w-h3)}
strong,b{font-weight:var(--w-strong)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0}
:focus-visible{outline:2px solid var(--rose-700);outline-offset:3px;border-radius:2px}
[dir="rtl"] :focus-visible{outline-color:var(--rose)}

.wrap{width:min(100% - (var(--gutter) * 2), var(--wrap));margin-inline:auto}
.section{padding-block:var(--section-y)}
.measure{max-width:var(--measure)}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--navy-700)}
[dir="rtl"] .lead{line-height:1.9;font-weight:300}

.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--navy-900);color:#fff;padding:.75rem 1.25rem;z-index:200}
.skip:focus{inset-inline-start:0}

/* ---------------------------------------------------------- kufic motif --- */
/* Derived from the right-angle interlocking strokes of the KIH monogram.
   The one piece of ornament on the site; used at two scales only. */
.kufic{position:absolute;pointer-events:none;color:var(--rose);opacity:.16}
.kufic--hero{inset-block-start:-4%;inset-inline-end:-6%;width:min(46rem,70%)}
.pagehead .kufic{opacity:.10;inset-block-start:-18%;width:min(34rem,52%)}

/* -------------------------------------------------------------- header --- */
.masthead{position:sticky;top:0;z-index:100;background:var(--white);
  border-block-end:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;gap:2rem;min-height:5rem}
.brand{flex:none;display:block}
.brand img{height:clamp(2.4rem,4.5vw,3.1rem);width:auto}

.nav{margin-inline-start:auto;display:flex;gap:clamp(1rem,2.2vw,2.25rem);align-items:center}
.nav a{font-size:.95rem;color:var(--navy);text-decoration:none;padding-block:.4rem;
  border-block-end:2px solid transparent}
.nav a:hover{border-block-end-color:var(--rose)}
.nav a[aria-current="page"]{border-block-end-color:var(--navy)}
.nav__lang{font-weight:var(--w-strong);color:var(--rose-700) !important;
  padding-inline-start:clamp(1rem,2.2vw,2.25rem);
  border-inline-start:1px solid var(--rule);border-block-end:0 !important}
.nav__lang:hover{color:var(--navy) !important}

.burger{margin-inline-start:auto;display:none;background:none;border:1px solid var(--rule);
  padding:.55rem .7rem;cursor:pointer;color:var(--navy)}

@media (max-width:900px){
  
  .nav{position:fixed;inset-block-start:5rem;inset-inline:0;background:#fff;flex-direction:column;
    align-items:stretch;gap:0;padding:.5rem var(--gutter) 1.5rem;
    border-block-end:1px solid var(--rule);display:none}
  .nav[data-open="true"]{display:flex}
  .nav a{padding-block:.9rem;border-block-end:1px solid var(--rule)}
  .nav__lang{padding-inline-start:0;border-inline-start:0;border-block-end:1px solid var(--rule) !important}
  .burger{display:block}
}

/* ---------------------------------------------------------------- hero --- */
.hero{background:var(--navy-900);color:#fff;position:relative;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
  width:min(100%,1600px);margin-inline:auto}
.hero__copy{padding:clamp(3.5rem,7vw,7rem) var(--gutter);
  padding-inline-start:max(var(--gutter),calc((100vw - var(--wrap)) / 2));
  display:flex;flex-direction:column;justify-content:center;position:relative;z-index:1}
.hero h1{font-size:var(--fs-hero);font-weight:var(--w-hero);letter-spacing:var(--ls-hero);
  color:#fff;max-width:14ch;text-wrap:balance}
[dir="rtl"] .hero h1{max-width:18ch}
.hero__lead{margin-block-start:1.5rem;max-width:44ch;color:var(--navy-200);
  font-size:var(--fs-lead);line-height:1.6}
[dir="rtl"] .hero__lead{line-height:1.95;font-weight:300}
.hero__media{position:relative;min-height:clamp(20rem,42vw,34rem)}
.hero__media picture{position:absolute;inset:0}
.hero__img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to left,transparent 55%,var(--navy-900))}
[dir="rtl"] .hero__media::after{background:linear-gradient(to right,transparent 55%,var(--navy-900))}
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media{min-height:14rem;order:-1}
  .hero__media::after{background:linear-gradient(to top,var(--navy-900),transparent 70%)}
  [dir="rtl"] .hero__media::after{background:linear-gradient(to top,var(--navy-900),transparent 70%)}
}

/* buttons */
.btn{display:inline-block;padding:.95rem 1.9rem;text-decoration:none;font-weight:500;
  font-size:.95rem;transition:background .18s ease,color .18s ease;border:1px solid transparent}
.btn--rose{background:var(--rose-600);color:#fff}
.btn--rose:hover{background:#fff;color:var(--navy-900)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--rose-700);color:#fff}
.btn--ghost{border-color:var(--rose-300);color:#fff}
.btn--ghost:hover{background:#fff;color:var(--navy-900);border-color:#fff}
.hero .btn{margin-block-start:2.25rem;align-self:flex-start}

/* ------------------------------------------------------------ credence --- */
.credence{background:var(--navy-800);color:#fff;border-block-start:1px solid rgba(255,255,255,.08)}
.credence ul{display:grid;grid-template-columns:repeat(4,1fr);list-style:none}
.credence li{padding-block:clamp(1.6rem,3vw,2.4rem);
  padding-inline:clamp(1rem,2vw,1.75rem) 1rem;
  border-inline-start:1px solid rgba(255,255,255,.1)}
.credence b{display:block;font-family:var(--display);
  font-size:clamp(1.6rem,2.7vw,2.45rem);font-weight:var(--w-hero);
  letter-spacing:var(--ls-hero);line-height:1.05;color:#fff}
.credence span{display:block;margin-block-start:.55rem;font-size:var(--fs-sm);
  color:var(--rose-300);line-height:1.4}

/* The rule divides figures, so it comes off whichever item starts a row. */
.credence li:nth-child(4n+1){border-inline-start:0;padding-inline-start:0}
@media (max-width:820px){
  .credence ul{grid-template-columns:repeat(2,1fr)}
  .credence li:nth-child(4n+1){border-inline-start:1px solid rgba(255,255,255,.1);
    padding-inline-start:clamp(1rem,2vw,1.75rem)}
  .credence li:nth-child(2n+1){border-inline-start:0;padding-inline-start:0}
  .credence li{padding-block:1.35rem}
}

/* ------------------------------------------------------ section header --- */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  padding-block-end:1.75rem;border-block-end:1px solid var(--rule);margin-block-end:2.5rem}
.shead p{max-width:52ch;color:var(--navy-700);margin:0}
.shead h2{flex:none;max-width:22ch}
@media (max-width:760px){.shead{flex-direction:column;align-items:flex-start;gap:1rem}}

/* ------------------------------------------------------- coverage rows --- */
/* Marsh's ruled index, with the Kufic mark carrying the affordance. */
.rows{list-style:none}
.rows a{display:grid;grid-template-columns:1fr auto;gap:clamp(1rem,2.5vw,2.25rem);
  align-items:center;padding-block:clamp(1.35rem,2.2vw,1.9rem);
  border-block-end:1px solid var(--rule);text-decoration:none;color:inherit;
  transition:padding-inline-start .2s ease,background .2s ease}
.rows li:first-child a{border-block-start:1px solid var(--rule)}
.rows a:hover{padding-inline-start:1rem;background:var(--paper-2)}
.rows h2,.rows h3{font-size:var(--fs-h3);color:var(--navy);transition:color .18s ease}
.rows a:hover h2,.rows a:hover h3{color:var(--rose-700)}
.rows p{margin:.3rem 0 0;color:var(--navy-700);font-size:.95rem;max-width:56ch}
.rows__go{width:1.9rem;height:1.9rem;color:var(--rose-700);flex:none}
[dir="rtl"] .rows__go{transform:scaleX(-1)}

/* --------------------------------------------------------------- prose --- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.prose p{color:var(--navy-700)}

/* -------------------------------------------------------------- values --- */
.values{list-style:none;display:grid;gap:0;grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.values{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.values{grid-template-columns:1fr}}
.values li{padding:clamp(1.5rem,2.5vw,2rem);
  border-inline-start:1px solid var(--rule);
  border-block-start:1px solid var(--rule)}
.values h3{margin-block-end:.6rem}
.values p{font-size:.95rem;color:var(--navy-700);margin:0}

/* ---------------------------------------------------------- navy panel --- */
.wash{background:var(--navy-900);color:#fff;position:relative;overflow:hidden}
.wash--photo picture{position:absolute;inset:0}
.wash__img{width:100%;height:100%;object-fit:cover;opacity:.3}
.wash--photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--navy-900),rgba(22,27,51,.82))}
.wash--photo .wrap{position:relative;z-index:2}
.wash h2,.wash h3{color:#fff}
.wash__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:clamp(2rem,5vw,4.5rem)}
.wash ul{list-style:none;margin-block-start:1.25rem}
.wash li{padding-block:.85rem;border-block-end:1px solid var(--rule-dark);
  color:var(--navy-200);display:flex;gap:.85rem;align-items:flex-start}
.wash li:last-child{border-block-end:0}
.wash li svg{margin-block-start:.35rem}

/* -------------------------------------------------------------- cta band -- */
.band{background:var(--rose-600);color:#fff}
.band .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding-block:clamp(2.5rem,5vw,4rem);flex-wrap:wrap}
.band h2{color:#fff;max-width:20ch}
.band p{color:#fff;max-width:46ch;margin-block-start:.75rem}

/* ---------------------------------------------------------------- form --- */
.form{display:grid;gap:1.25rem}
.field{display:grid;gap:.45rem}
.field label{font-size:var(--fs-sm);color:var(--navy);font-weight:var(--w-strong)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.95rem;padding:.8rem .95rem;border:1px solid var(--rule);
  background:#fff;color:var(--ink);width:100%;border-radius:0}
.field textarea{min-height:8rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy)}
.field--half{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media (max-width:640px){.field--half{grid-template-columns:1fr}}
.form__note{font-size:var(--fs-sm);color:var(--navy-700)}
.form__status{padding:.9rem 1.1rem;border-inline-start:3px solid var(--rose);
  background:var(--paper-2);font-size:.95rem}
.form__status[hidden]{display:none}

/* -------------------------------------------------------------- footer --- */
.footer{background:var(--navy-900);color:var(--navy-200);font-size:.95rem}
.footer__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:1.4fr 1fr 1.1fr 1.2fr;padding-block:clamp(3rem,5vw,4.5rem)}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
.footer img{height:3.4rem;width:auto;margin-block-end:1.5rem}
.footer h3{color:#fff;font-family:var(--body);font-size:var(--fs-sm);font-weight:var(--w-strong);
  margin-block-end:1rem}
.footer ul{list-style:none}
.footer li{margin-block-end:.6rem}
.footer a{color:var(--navy-200);text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer address{font-style:normal;line-height:1.8}
.footer__base{border-block-start:1px solid rgba(255,255,255,.12);
  padding-block:1.5rem;display:flex;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;font-size:var(--fs-sm)}

/* ------------------------------------------------------------- inner ----- */
.pagehead{background:var(--navy-900);color:#fff;position:relative;overflow:hidden}
.pagehead--photo picture{position:absolute;inset:0}
.pagehead__img{width:100%;height:100%;object-fit:cover;opacity:.8}
/* Scrim weighted to the bottom, where the heading and lead sit. Measured
   against the brightest pixel behind each text block on every photo page:
   worst case is 6.2:1 for the heading and 6.7:1 for the lead. */
.pagehead--photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--navy-900) 0%,rgba(22,27,51,.66) 40%,rgba(22,27,51,.34) 100%)}
.pagehead--photo .wrap{position:relative;z-index:2}
.pagehead .wrap{padding-block:clamp(4.5rem,9vw,8rem);position:relative;z-index:1}
.pagehead--photo{display:flex;align-items:flex-end;
  min-height:clamp(19rem,34vw,27rem)}
.pagehead--photo .wrap{width:min(100% - (var(--gutter) * 2), var(--wrap))}
.pagehead h1{color:#fff;max-width:20ch;font-weight:var(--w-hero);letter-spacing:var(--ls-hero)}
.pagehead p{margin-block-start:1.25rem;max-width:56ch;color:var(--navy-200);
  font-size:var(--fs-lead);line-height:1.6}
.pagehead--photo p{color:#E8EAF1}
[dir="rtl"] .pagehead p{line-height:1.95;font-weight:300}

.checks{list-style:none;margin-block-start:1.5rem}
.checks li{display:flex;gap:.85rem;align-items:flex-start;padding-block:.7rem;
  border-block-end:1px solid var(--rule);color:var(--navy-700)}
.checks li:last-child{border-block-end:0}
.checks svg{margin-block-start:.4rem;flex:none}

.aside{background:var(--paper-2);border-block-start:3px solid var(--navy);
  padding:clamp(1.5rem,3vw,2.25rem);position:sticky;top:6rem}
.aside h2,.aside h3{font-size:var(--fs-h3);margin-block-end:.9rem}
.aside p{font-size:.95rem;color:var(--navy-700)}
@media (max-width:860px){.aside{position:static}}

.alt{background:var(--white)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ------------------------------------------------------- certifications --- */
/* Badges are typographic — the ISO mark itself is a trademark, and the number
   set in the site's own face reads cleaner than a borrowed logo. */
.shead--wash{border-block-end-color:var(--rule-dark)}
.shead--wash h2{color:#fff}
.shead--wash p{color:var(--navy-200)}

.iso{list-style:none;display:grid;gap:1px;background:var(--rule-dark);
  grid-template-columns:repeat(4,1fr);border:1px solid var(--rule-dark)}
.iso li{background:var(--navy-900)}
.iso a{display:flex;flex-direction:column;gap:.3rem;height:100%;
  padding:clamp(1.15rem,2.2vw,1.6rem);text-decoration:none;
  transition:background .18s ease}
.iso a:hover{background:var(--navy-700)}
.iso__no{font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.45rem);
  font-weight:var(--w-h);letter-spacing:var(--ls-h);color:#fff;line-height:1.1}
.iso__yr{font-size:var(--fs-sm);color:var(--rose-300)}
.iso__t{margin-block-start:.5rem;font-size:.875rem;line-height:1.5;color:var(--navy-200)}
.iso__more{margin-block-start:2rem}
.iso__more a{color:var(--rose-300)}
.iso__more a:hover{color:#fff}
.iso li:last-child{grid-column:span 2}
@media (max-width:900px){.iso{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.iso{grid-template-columns:1fr}.iso li:last-child{grid-column:auto}}

.certs{list-style:none;display:grid;gap:0}
.certs li{display:grid;grid-template-columns:minmax(9rem,13rem) 1fr;
  gap:clamp(1.5rem,4vw,3.5rem);padding-block:clamp(1.75rem,3vw,2.5rem);
  border-block-end:1px solid var(--rule)}
.certs li:first-child{border-block-start:1px solid var(--rule)}
.certs__badge{display:flex;flex-direction:column;gap:.2rem;
  border-inline-start:3px solid var(--rose);padding-inline-start:1.1rem;
  align-self:start}
.certs__badge .iso__no{color:var(--navy);font-size:clamp(1.25rem,2vw,1.6rem)}
.certs__badge .iso__yr{color:var(--rose-700)}
.certs h2{font-size:var(--fs-h3);font-weight:var(--w-h3);letter-spacing:normal}
.certs p{margin-block-start:.6rem;color:var(--navy-700);max-width:62ch}
@media (max-width:720px){
  .certs li{grid-template-columns:1fr;gap:1rem}
}

/* The KIH monogram, used once, on the ISO band. */
/* Bleeds off the trailing bottom corner. The ISO tiles are opaque, so the mark
   has to live below them; logical properties put it opposite the "what each
   standard covers" link in both directions. */
.mono{position:absolute;inset-block-end:-3.5rem;inset-inline-end:-3.5rem;
  width:min(21rem,32%);height:auto;opacity:.22;pointer-events:none}
@media (max-width:860px){.mono{width:min(14rem,42%);opacity:.16;
  inset-block-end:-2.5rem;inset-inline-end:-2.5rem}}
.wash .wrap{position:relative;z-index:2}

/* ---------------------------------------------------------- iso claim ----- */
.iso__claim{margin-block:-.5rem 2.25rem;font-family:var(--display);
  font-size:clamp(1.15rem,.9rem+.85vw,1.6rem);font-weight:var(--w-h);
  letter-spacing:var(--ls-h);line-height:1.3;color:#fff;
  text-wrap:balance}
.claim{font-family:var(--display);font-size:clamp(1.2rem,1rem+.9vw,1.65rem);
  font-weight:var(--w-h);letter-spacing:var(--ls-h);line-height:1.35;
  color:var(--navy);max-width:34ch;
  border-inline-start:3px solid var(--rose);padding-inline-start:1.25rem;
  margin-block-end:clamp(2.5rem,5vw,3.5rem)}

/* ------------------------------------------------------ footer credits ---- */
.footer__licence{max-width:36ch}
.footer__members{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin-block-start:1rem}
.footer__members span{font-size:var(--fs-sm);color:var(--navy-200)}
.footer__members b{font-family:var(--display);font-size:1.05rem;
  font-weight:var(--w-strong);color:#fff;letter-spacing:.02em;cursor:help}
.footer__social{display:inline-flex;align-items:center;gap:.55rem;
  margin-block-start:1.25rem;text-decoration:none}
.footer__social svg{flex:none}
.footer__social:hover{color:#fff;text-decoration:underline}

/* --------------------------------------------------------- consulting ---- */
/* An external destination, so it carries the arrow that says so. */
.nav__ext{display:inline-flex;align-items:center;gap:.4rem;
  color:var(--navy) !important}
.nav__ext svg{opacity:.65}
.nav__ext:hover{border-block-end-color:var(--rose)}
[dir="rtl"] .nav__ext svg{transform:scaleX(-1)}

/* ---------------------------------------------------- complaint stages --- */
/* Numbered because this genuinely is a sequence — the stages happen in order. */
.stages{list-style:none;counter-reset:none;display:grid;gap:0}
.stages li{display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1rem,2.5vw,2rem);padding-block:clamp(1.5rem,2.6vw,2.1rem);
  border-block-end:1px solid var(--rule)}
.stages li:first-child{border-block-start:1px solid var(--rule)}
.stages__n{font-family:var(--display);font-size:1.1rem;font-weight:var(--w-strong);
  color:var(--rose-700);inline-size:2.35rem;block-size:2.35rem;flex:none;
  display:grid;place-items:center;border:1px solid var(--rose-300);
  border-radius:50%;line-height:1}
.stages h3{margin-block-end:.45rem}
.stages p{color:var(--navy-700);max-width:64ch;margin:0}
@media (max-width:560px){
  .stages li{grid-template-columns:1fr;gap:.75rem}
}

/* -------------------------------------------------- footer policy links --- */
.footer__policies{display:flex;flex-wrap:wrap;gap:.5rem clamp(1rem,2.5vw,1.75rem)}
.footer__policies a{white-space:nowrap}

/* ----------------------------------------------------------- justify ----- */
/* Long-form prose only, and only where the column is wide enough to justify
   without opening rivers. English gets hyphenation to keep the word spacing
   even; Arabic justifies on its own natural elasticity and must not be
   hyphenated. Last line stays ranged, never stretched. */
@media (min-width:720px){
  .prose p,
  .certs p,
  .stages p{
    text-align:justify;
    text-align-last:start;
    hyphens:auto;
    -webkit-hyphens:auto;
  }
  [dir="rtl"] .prose p,
  [dir="rtl"] .certs p,
  [dir="rtl"] .stages p{hyphens:none;-webkit-hyphens:none}
}

/* ------------------------------------------------- footer accreditation --- */
/* A white band inside the navy footer, so the regulator and federation marks
   sit on the ground they were drawn for. The emblems are recoloured to the
   brand navy rather than reversed out. */
.footer__accred{background:#fff;color:var(--navy);
  padding-block:clamp(2rem,4vw,3rem)}
.footer__accred .wrap{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.accred__group > h3{font-family:var(--body);font-size:var(--fs-sm);
  font-weight:var(--w-strong);letter-spacing:.04em;color:var(--rose-700);
  margin-block-end:1.5rem;padding-block-end:.85rem;
  border-block-end:1px solid var(--rule)}
.accred__group ul{list-style:none;display:flex;flex-wrap:wrap;
  gap:clamp(1.5rem,3.5vw,3rem)}
.accred__group li{display:flex;flex-direction:column;align-items:center;
  gap:.75rem;text-align:center;inline-size:min(14rem,100%)}
.accred__group img{height:56px;width:auto}
.accred__group span{font-size:.8rem;line-height:1.5;color:var(--navy-700);
  max-width:20ch}
.accred__group small{font-size:.72rem;color:var(--rose-700)}
@media (max-width:760px){
  .footer__accred .wrap{grid-template-columns:1fr;gap:2.25rem}
  .accred__group ul{gap:1.5rem}
  .accred__group li{inline-size:min(11rem,45%)}
  .accred__group img{height:48px}
}

/* ----------------------------------------------------------- justify ----- */
/* Long-form prose only, and only where the column is wide enough to justify
   without opening rivers. English gets hyphenation to keep the word spacing
   even; Arabic justifies on its own natural elasticity and must not be
   hyphenated. Last line stays ranged, never stretched. */
@media (min-width:720px){
  .prose p,
  .certs p,
  .stages p{
    text-align:justify;
    text-align-last:start;
    hyphens:auto;
    -webkit-hyphens:auto;
  }
  [dir="rtl"] .prose p,
  [dir="rtl"] .certs p,
  [dir="rtl"] .stages p{hyphens:none;-webkit-hyphens:none}
}