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

/* The monogram itself, as a watermark behind the ISO band. Bled off the top
   and the inline-end edge so it reads as a mark the panel is cut from rather
   than a logo dropped into the corner. */
.mark{position:absolute;pointer-events:none;opacity:.14;
  inset-block-start:-12%;inset-inline-end:-5%;
  width:min(30rem,48%);height:auto}
@media (max-width:760px){.mark{width:min(22rem,70%);inset-block-start:-5%;opacity:.11}}

/* -------------------------------------------------------------- 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.55rem,2.5vw,2.3rem);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 —
   which changes with the column count. */
.credence li:nth-child(4n+1){border-inline-start:0;padding-inline-start:0}
@media (max-width:640px){
  .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}

/* --------------------------------------------------------------- steps --- */
/* The four stages of an engagement. Numbered, because unlike Vision/Mission
   these genuinely are a sequence. */
.steps{list-style:none;counter-reset:step;display:grid;gap:0;
  grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:step;padding:clamp(1.5rem,2.5vw,2rem);
  border-inline-start:1px solid var(--rule);
  border-block-start:1px solid var(--rule)}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;
  font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--rose);
  margin-block-end:.9rem}
.steps h3{margin-block-end:.6rem}
.steps p{font-size:.95rem;color:var(--navy-700);margin:0}
html[dir="rtl"] .steps li::before{font-family:var(--body);font-weight:700}

/* ---------------------------------------------------------------- team --- */
/* Names and titles only. No photographs, and no contact labels with nothing
   behind them. */
.team{list-style:none;display:grid;gap:0;grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.team{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.team{grid-template-columns:1fr}}
.team li{padding:clamp(1.25rem,2.2vw,1.75rem);
  border-inline-start:1px solid var(--rule);
  border-block-start:1px solid var(--rule)}
.team b{display:block;font-family:var(--display);font-weight:var(--w-h3);
  font-size:var(--fs-h3);line-height:1.3;color:var(--navy)}
.team span{display:block;margin-block-start:.4rem;font-size:.9rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--rose-700)}
html[dir="rtl"] .team span{text-transform:none;letter-spacing:normal}

/* ---------------------------------------------------------- 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. */
.mono{position:absolute;inset-block-start:50%;inset-inline-end:clamp(-3rem,-2vw,0rem);
  translate:0 -50%;width:min(26rem,38%);height:auto;opacity:.13;pointer-events:none}
@media (max-width:860px){.mono{width:min(18rem,52%);opacity:.09;
  inset-block-start:auto;inset-block-end:-2rem;translate:0 0}}
.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}