/* ==========================================================================
   MoroccoConsult — morocconsult.com
   Hand-written CSS. No framework, no build step. Light scheme only.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  color-scheme: light only;

  --ink:#14181C;
  --paper:#FAFAF7;
  --green:#006233;
  --red:#C1272D;
  --line:#E5E3DC;

  --ink-80:#3A4046;
  --ink-60:#5E656C;
  --ink-40:#8A9096;
  --paper-dim:#F3F2EC;
  --paper-warm:#F7F5EE;
  --green-dark:#004D28;
  --red-dark:#A11F24;

  --display:"Bricolage Grotesque","Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1200px;
  --gut:clamp(20px,5vw,64px);
  --sec:clamp(72px,9vw,132px);

  --r-s:6px;
  --r-m:12px;
  --r-l:20px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  color-scheme:light only;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.6;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,canvas,svg{max-width:100%;display:block}
button{font:inherit;color:inherit}

::selection{background:var(--green);color:#fff}

/* --- 2. Typography ------------------------------------------------------ */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6.4vw,5.1rem)}
h2{font-size:clamp(2rem,4.2vw,3.5rem)}
h3{font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.025em;line-height:1.15}
h4{font-size:1.05rem;letter-spacing:-.02em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.lede{
  font-size:clamp(1.1rem,1.65vw,1.375rem);
  line-height:1.5;
  color:var(--ink-80);
  letter-spacing:-.015em;
  max-width:60ch;
  text-wrap:pretty;
}

.eyebrow{
  font-family:var(--body);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  inline-size:26px;
  block-size:1px;
  background:var(--green);
  flex:none;
}
.eyebrow--red{color:var(--red)}
.eyebrow--red::before{background:var(--red)}
.eyebrow--paper{color:#fff}
.eyebrow--paper::before{background:rgba(255,255,255,.55)}

/* --- 3. Layout ---------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
section{position:relative}
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:calc(var(--sec) * .68)}
.sec--rule{padding-block-start:0}
.rule{block-size:1px;background:var(--line);border:0;margin:0}

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:22px;
  margin-block-end:clamp(40px,5vw,68px);
}
@media(min-width:900px){
  .sec-head{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;gap:48px}
  .sec-head--stack{grid-template-columns:minmax(0,1fr);max-width:none}
}

.skip{
  position:absolute;
  inset-block-start:-100px;
  inset-inline-start:12px;
  z-index:200;
  background:var(--ink);
  color:#fff;
  padding:12px 18px;
  border-radius:var(--r-s);
  text-decoration:none;
  transition:inset-block-start .2s;
}
.skip:focus{inset-block-start:12px}

:where(a,button,summary,input,textarea,select):focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:3px;
}

/* --- 4. Buttons --------------------------------------------------------- */
.btn{
  --bg:var(--red);
  --bgh:var(--red-dark);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 24px;
  background:var(--bg);
  border:1px solid var(--bg);
  border-radius:100px;
  font-family:var(--body);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:-.01em;
  text-decoration:none;
  cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
  white-space:nowrap;
}
/* Lock button text colour on every link state so forced dark mode can't break contrast */
.btn,.btn:link,.btn:visited,.btn:hover,.btn:active,.btn:focus{color:#FFFFFF}
.btn:hover{background:var(--bgh);border-color:var(--bgh);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.btn--ghost{--bg:transparent;--bgh:var(--ink);border-color:var(--ink)}
.btn--ghost,.btn--ghost:link,.btn--ghost:visited{color:var(--ink)}
.btn--ghost:hover,.btn--ghost:focus,.btn--ghost:active{color:#FFFFFF;background:var(--ink);border-color:var(--ink)}

.btn--onink{--bg:transparent;--bgh:#FFFFFF;border-color:rgba(255,255,255,.4)}
.btn--onink,.btn--onink:link,.btn--onink:visited{color:#FFFFFF}
.btn--onink:hover,.btn--onink:focus,.btn--onink:active{color:var(--ink);background:#FFFFFF;border-color:#FFFFFF}

.btn--green{--bg:var(--green);--bgh:var(--green-dark)}
.btn--sm{padding:10px 18px;font-size:.875rem}
.btn .ic{inline-size:17px;block-size:17px;flex:none}

.tlink{
  color:var(--ink);
  text-decoration:none;
  border-block-end:1px solid var(--line);
  padding-block-end:2px;
  transition:border-color .2s,color .2s;
}
.tlink:hover{border-color:var(--red);color:var(--red)}

/* --- 5. Header ---------------------------------------------------------- */
.hdr{
  position:sticky;
  inset-block-start:0;
  z-index:100;
  background:rgba(250,250,247,.82);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-block-end:1px solid transparent;
  transition:border-color .3s,background .3s;
}
.hdr.is-stuck{border-block-end-color:var(--line);background:rgba(250,250,247,.94)}
.hdr__in{
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,34px);
  block-size:74px;
}

.mark{
  font-family:var(--display);
  font-weight:800;
  font-size:1.32rem;
  letter-spacing:-.045em;
  text-decoration:none;
  color:var(--ink);
  flex:none;
  white-space:nowrap;
  line-height:1;
}
.mark span{color:var(--red)}
.mark:hover{opacity:.85}

.nav{
  display:none;
  align-items:center;
  gap:clamp(14px,1.7vw,28px);
  margin-inline-start:auto;
}
@media(min-width:1060px){.nav{display:flex}}
.nav a{
  color:var(--ink-80);
  text-decoration:none;
  font-size:.925rem;
  font-weight:500;
  letter-spacing:-.01em;
  position:relative;
  padding-block:6px;
  white-space:nowrap;
}
.nav a::after{
  content:"";
  position:absolute;
  inset-block-end:0;
  inset-inline-start:0;
  inline-size:0;
  block-size:1.5px;
  background:var(--red);
  transition:inline-size .25s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a.is-active::after{inline-size:100%}
.nav a.is-active{color:var(--ink)}

.hdr__end{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
@media(min-width:1060px){.hdr__end{margin-inline-start:0}}
.hdr .btn--cta{display:none}
@media(min-width:560px){.hdr .btn--cta{display:inline-flex}}

/* language dropdown */
.lang{position:relative;flex:none}
.lang__btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:100px;
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:border-color .2s,background .2s;
}
.lang__btn:hover{border-color:var(--ink-40);background:var(--paper-dim)}
.lang__btn .car{transition:transform .2s var(--ease);inline-size:11px;block-size:11px}
.lang__btn[aria-expanded="true"] .car{transform:rotate(180deg)}
.lang__menu{
  position:absolute;
  inset-block-start:calc(100% + 10px);
  inset-inline-end:0;
  min-inline-size:186px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:6px;
  margin:0;
  list-style:none;
  box-shadow:0 18px 44px -18px rgba(20,24,28,.28);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.lang__menu.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.lang__menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
  border-radius:7px;
  text-decoration:none;
  color:var(--ink-80);
  font-size:.9rem;
  font-weight:500;
}
.lang__menu a:hover{background:var(--paper-dim);color:var(--ink)}
.lang__menu a[aria-current="true"]{color:var(--ink);font-weight:600}
.lang__menu a[aria-current="true"]::after{content:"";inline-size:6px;block-size:6px;border-radius:50%;background:var(--green);flex:none}
.lang__code{font-size:.7rem;letter-spacing:.1em;color:var(--ink-40);text-transform:uppercase}
.lang__menu a[aria-current="true"] .lang__code{display:none}

/* mobile nav */
.burger{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  inline-size:42px;
  block-size:38px;
  padding:0 11px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:100px;
  cursor:pointer;
}
@media(min-width:1060px){.burger{display:none}}
.burger i{display:block;block-size:1.5px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.mnav{
  display:none;
  border-block-start:1px solid var(--line);
  background:var(--paper);
  padding:12px var(--gut) 26px;
}
.mnav.is-open{display:block}
@media(min-width:1060px){.mnav,.mnav.is-open{display:none}}
.mnav a{
  display:block;
  padding:14px 0;
  border-block-end:1px solid var(--line);
  color:var(--ink);
  text-decoration:none;
  font-family:var(--display);
  font-size:1.35rem;
  font-weight:600;
  letter-spacing:-.03em;
}
.mnav .btn{margin-block-start:22px;inline-size:100%}

/* --- 6. Hero ------------------------------------------------------------ */
.hero{
  position:relative;
  padding-block:clamp(46px,6vw,78px) clamp(30px,4vw,48px);
  overflow:hidden;
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(34px,4vw,56px);
  align-items:center;
}
@media(min-width:1000px){
  .hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,4vw,60px)}
}
.hero h1{margin-block-end:24px}
.hero h1 .br{display:block}
.hero h1 em{font-style:normal;color:var(--green)}
.hero__lede{margin-block-end:32px;max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero__note{
  margin-block-start:26px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:.85rem;
  color:var(--ink-60);
  letter-spacing:-.005em;
}
.hero__note::before{
  content:"";
  inline-size:7px;block-size:7px;border-radius:50%;
  background:var(--green);
  flex:none;
  box-shadow:0 0 0 3px rgba(0,98,51,.14);
}

.map{
  position:relative;
  inline-size:100%;
  aspect-ratio:1 / 1.05;
  max-block-size:min(74vh,660px);
  margin-inline:auto;
}
.map canvas{inline-size:100%;block-size:100%;display:block}
.map__cap{
  position:absolute;
  inset-block-end:2px;
  inset-inline-start:0;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-40);
  font-weight:600;
}
@media(max-width:999px){.map{order:-1;max-block-size:52vh}}

/* --- 7. Stats band ------------------------------------------------------ */
.stats{border-block:1px solid var(--line);background:var(--paper-warm)}
.stats__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line);
}
@media(min-width:860px){.stats__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{
  background:var(--paper-warm);
  padding:clamp(26px,3.4vw,42px) clamp(18px,2.4vw,32px);
}
.stat__n{
  font-family:var(--display);
  font-size:clamp(2.1rem,3.6vw,3rem);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1;
  font-variant-numeric:tabular-nums;
  margin-block-end:10px;
}
.stat__n .u{color:var(--green)}
.stat__l{font-size:.94rem;color:var(--ink-80);line-height:1.4;margin-block-end:8px;letter-spacing:-.01em}
.stat__s{font-size:.72rem;color:var(--ink-40);letter-spacing:.01em;line-height:1.35}

/* --- 8. Cards ----------------------------------------------------------- */
.grid{display:grid;gap:clamp(14px,1.5vw,20px)}
.grid--2{grid-template-columns:minmax(0,1fr)}
.grid--3{grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.grid--2,.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1020px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:clamp(24px,2.6vw,34px);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
  block-size:100%;
}
.card:hover{
  transform:translateY(-3px);
  border-color:#D6D3C7;
  box-shadow:0 22px 46px -30px rgba(20,24,28,.4);
}
.card__ix{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--ink-40);
  font-variant-numeric:tabular-nums;
  margin-block-end:22px;
  display:block;
}
.card h3{margin-block-end:12px}
.card p{color:var(--ink-60);font-size:.95rem;line-height:1.58}
.card__src{
  display:block;
  margin-block-start:16px;
  font-size:.72rem;
  color:var(--ink-40);
  letter-spacing:.005em;
  line-height:1.4;
}
.card__ic{
  inline-size:34px;block-size:34px;
  margin-block-end:20px;
  color:var(--green);
}
.card--svc{padding-block-end:clamp(26px,3vw,38px)}
.card--svc .card__ix{color:var(--red)}
.card--svc::after{
  content:"";
  position:absolute;
  inset-block-start:0;
  inset-inline-start:clamp(24px,2.6vw,34px);
  inline-size:0;
  block-size:2px;
  background:var(--red);
  transition:inline-size .35s var(--ease);
}
.card--svc:hover::after{inline-size:44px}

/* --- 9. Dark band ------------------------------------------------------- */
.band{
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.band::before{
  content:"";
  position:absolute;
  inset-block-start:-18%;
  inset-inline-end:-10%;
  inline-size:min(56vw,620px);
  aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(0,98,51,.42),rgba(0,98,51,0) 66%);
  pointer-events:none;
}
.band::after{
  content:"";
  position:absolute;
  inset-block-end:-24%;
  inset-inline-start:-12%;
  inline-size:min(48vw,520px);
  aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,rgba(193,39,45,.3),rgba(193,39,45,0) 68%);
  pointer-events:none;
}
.band .wrap{position:relative;z-index:1}
.band h2{color:#fff;max-width:19ch}
.band__lede{color:rgba(250,250,247,.74)}
.band__cols{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(30px,4vw,64px);
  margin-block-start:clamp(34px,4vw,52px);
}
@media(min-width:920px){.band__cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.band p{color:rgba(250,250,247,.72);font-size:1.02rem;line-height:1.62}
.band strong{color:#fff;font-weight:600}
.band__pull{
  font-family:var(--display);
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:600;
  line-height:1.16;
  letter-spacing:-.035em;
  color:#fff;
  margin-block:clamp(34px,4vw,50px) 0;
  padding-inline-start:22px;
  border-inline-start:2px solid var(--red);
  max-width:24ch;
}
.band__pull em{font-style:normal;color:#7FCB9F}
.band__disc{
  margin-block-start:clamp(30px,3.6vw,44px);
  padding-block-start:26px;
  border-block-start:1px solid rgba(250,250,247,.14);
  display:flex;
  gap:14px;
  align-items:flex-start;
  font-size:.9rem;
  color:rgba(250,250,247,.6);
  max-width:62ch;
}
.band__disc svg{inline-size:19px;block-size:19px;flex:none;margin-block-start:2px;color:#7FCB9F}

/* --- 10. Process -------------------------------------------------------- */
.steps{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  border-block-start:1px solid var(--line);
}
@media(min-width:800px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.step{
  padding:clamp(26px,2.8vw,36px) 0;
  border-block-end:1px solid var(--line);
  position:relative;
}
@media(min-width:800px){
  .step{
    border-block-end:0;
    border-inline-end:1px solid var(--line);
    padding-inline:clamp(18px,2vw,30px);
  }
  .step:first-child{padding-inline-start:0}
  .step:last-child{border-inline-end:0;padding-inline-end:0}
}
.step__n{
  font-family:var(--display);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--red);
  margin-block-end:18px;
  display:block;
  font-variant-numeric:tabular-nums;
}
.step h3{margin-block-end:11px}
.step p{color:var(--ink-60);font-size:.94rem;line-height:1.55}
.process__foot{
  margin-block-start:clamp(32px,3.6vw,46px);
  font-family:var(--display);
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  font-weight:600;
  letter-spacing:-.03em;
  color:var(--ink);
}

/* --- 11. Proof ---------------------------------------------------------- */
.cases{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:960px){.cases{grid-template-columns:repeat(3,minmax(0,1fr))}}
.case{
  background:var(--paper);
  padding:clamp(28px,3vw,40px) clamp(22px,2.4vw,34px);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.case__tag{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--green);
}
.case h3{font-size:clamp(1.12rem,1.55vw,1.3rem)}
.case p{color:var(--ink-60);font-size:.94rem;line-height:1.58}
.case__out{
  margin-block-start:auto;
  padding-block-start:16px;
  border-block-start:1px solid var(--line);
  font-size:.9rem;
  font-weight:600;
  color:var(--ink);
  display:flex;
  gap:9px;
  align-items:flex-start;
  letter-spacing:-.01em;
}
.case__out svg{inline-size:16px;block-size:16px;color:var(--red);flex:none;margin-block-start:3px}

.quote{
  margin-block-start:clamp(44px,5vw,68px);
  display:grid;
  gap:26px;
  align-items:start;
}
@media(min-width:840px){.quote{grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end}}
.quote blockquote{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.5rem,3vw,2.35rem);
  font-weight:600;
  line-height:1.14;
  letter-spacing:-.038em;
  text-wrap:balance;
}
.quote blockquote::before{content:"\201C"}
.quote blockquote::after{content:"\201D"}
.quote__by{font-size:.9rem;color:var(--ink-60);line-height:1.45;white-space:nowrap}
.quote__by b{display:block;color:var(--ink);font-weight:600;font-size:.98rem}

/* --- 12. Founder -------------------------------------------------------- */
.founder{background:var(--paper-warm);border-block:1px solid var(--line)}
.founder__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(30px,4vw,64px);
  align-items:center;
}
@media(min-width:880px){.founder__grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
.founder__ph{position:relative}
.founder__ph img{
  inline-size:100%;
  border-radius:var(--r-l);
  border:1px solid var(--line);
  aspect-ratio:4/5;
  object-fit:cover;
  background:var(--paper-dim);
}
.founder__badge{
  position:absolute;
  inset-block-end:-16px;
  inset-inline-start:-14px;
  background:var(--ink);
  color:#fff;
  padding:12px 18px;
  border-radius:100px;
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.02em;
  box-shadow:0 14px 30px -14px rgba(20,24,28,.5);
}
@media(max-width:879px){.founder__ph{max-inline-size:340px}.founder__badge{inset-inline-start:auto;inset-inline-end:-10px}}
.founder h2{margin-block-end:22px}
.founder__facts{
  list-style:none;
  margin:28px 0 0;
  padding:0;
  display:grid;
  gap:12px;
}
.founder__facts li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:.95rem;
  color:var(--ink-80);
  line-height:1.5;
}
.founder__facts svg{inline-size:17px;block-size:17px;color:var(--green);flex:none;margin-block-start:4px}
.founder__sig{
  margin-block-start:30px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}

/* --- 13. FAQ ------------------------------------------------------------ */
.faq{max-inline-size:900px;margin-inline:auto}
.faq details{
  border-block-end:1px solid var(--line);
}
.faq details:first-of-type{border-block-start:1px solid var(--line)}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:24px 0;
  display:flex;
  align-items:flex-start;
  gap:20px;
  font-family:var(--display);
  font-size:clamp(1.08rem,1.55vw,1.32rem);
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.24;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq summary .pm{
  margin-inline-start:auto;
  inline-size:22px;
  block-size:22px;
  flex:none;
  position:relative;
  margin-block-start:3px;
}
.faq summary .pm::before,.faq summary .pm::after{
  content:"";
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:0;
  inline-size:100%;
  block-size:1.5px;
  background:var(--ink);
  transition:transform .28s var(--ease);
}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq details[open] summary{color:var(--ink)}
.faq__a{
  padding-block:0 26px;
  padding-inline-end:44px;
  color:var(--ink-60);
  font-size:1rem;
  line-height:1.62;
  max-inline-size:74ch;
}
.faq__a p{margin-block-end:.85em}

/* --- 14. Languages row -------------------------------------------------- */
.langs{border-block-start:1px solid var(--line)}
.langs__row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-block-start:26px;
}
.langs__row a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  border:1px solid var(--line);
  border-radius:100px;
  background:#fff;
  text-decoration:none;
  color:var(--ink-80);
  font-size:.92rem;
  font-weight:500;
  transition:border-color .2s,color .2s,transform .2s var(--ease);
}
.langs__row a:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.langs__row a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* --- 15. Contact -------------------------------------------------------- */
.contact{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.contact::before{
  content:"";
  position:absolute;
  inset-block-start:-30%;
  inset-inline-start:38%;
  inline-size:min(60vw,700px);
  aspect-ratio:1;
  background:radial-gradient(circle,rgba(0,98,51,.3),rgba(0,98,51,0) 65%);
  pointer-events:none;
}
.contact .wrap{position:relative;z-index:1}
.contact h2{color:#fff}
.contact__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(36px,4vw,64px);
}
@media(min-width:940px){.contact__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.contact p{color:rgba(250,250,247,.72)}
.contact__direct{display:grid;gap:14px;margin-block-start:30px}
.contact__row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  border:1px solid rgba(250,250,247,.16);
  border-radius:var(--r-m);
  text-decoration:none;
  transition:background .22s,border-color .22s;
}
.contact__row:hover{background:rgba(250,250,247,.06);border-color:rgba(250,250,247,.34)}
.contact__row svg{inline-size:21px;block-size:21px;color:#7FCB9F;flex:none}
.contact__row span{display:block}
.contact__row .k{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,250,247,.5);margin-block-end:3px}
.contact__row .v{font-size:1rem;font-weight:600;color:#fff;word-break:break-word}

.form{
  background:rgba(250,250,247,.045);
  border:1px solid rgba(250,250,247,.14);
  border-radius:var(--r-l);
  padding:clamp(24px,3vw,38px);
}
.form__grid{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.form__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form__full{grid-column:1/-1}}
.field label{
  display:block;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(250,250,247,.62);
  margin-block-end:8px;
}
.field input,.field textarea,.field select{
  inline-size:100%;
  padding:13px 15px;
  background:rgba(250,250,247,.05);
  border:1px solid rgba(250,250,247,.2);
  border-radius:var(--r-s);
  color:#fff;
  font-family:var(--body);
  font-size:.97rem;
  transition:border-color .2s,background .2s;
}
.field textarea{min-block-size:118px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(250,250,247,.34)}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:#7FCB9F;
  background:rgba(250,250,247,.08);
  outline:none;
}
.form .btn{inline-size:100%;margin-block-start:20px}
.form__note{margin-block-start:16px;font-size:.78rem;color:rgba(250,250,247,.5);line-height:1.5}
.form__note a{color:rgba(250,250,247,.78)}
.hp{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sent{
  display:none;
  gap:13px;
  align-items:flex-start;
  padding:16px 20px;
  margin-block-end:24px;
  background:rgba(0,98,51,.22);
  border:1px solid rgba(127,203,159,.42);
  border-radius:var(--r-m);
  color:#fff;
  font-size:.95rem;
  line-height:1.5;
}
.sent.is-on{display:flex}
.sent svg{inline-size:19px;block-size:19px;color:#7FCB9F;flex:none;margin-block-start:3px}

/* --- 16. Footer --------------------------------------------------------- */
.ftr{background:var(--ink);border-block-start:1px solid rgba(250,250,247,.12)}
.ftr__in{
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  align-items:center;
  justify-content:space-between;
  padding-block:30px;
  font-size:.85rem;
  color:rgba(250,250,247,.55);
}
.ftr a{color:rgba(250,250,247,.72);text-decoration:none;border-block-end:1px solid rgba(250,250,247,.24)}
.ftr a:hover{color:#fff;border-color:#fff}

/* --- 17. Legal page ----------------------------------------------------- */
.legal{padding-block:clamp(56px,7vw,96px) clamp(64px,8vw,110px);max-inline-size:820px}
.legal h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-block-end:14px}
.legal .meta{color:var(--ink-40);font-size:.85rem;margin-block-end:44px}
.legal h2{font-size:clamp(1.25rem,2vw,1.6rem);margin-block:44px 14px}
.legal h2:first-of-type{margin-block-start:0}
.legal p,.legal li{color:var(--ink-80);font-size:1rem;line-height:1.68}
.legal ul{padding-inline-start:20px;margin:0 0 1em}
.legal li{margin-block-end:8px}
.legal .box{
  background:var(--paper-warm);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:24px 28px;
  margin-block-end:32px;
}
.legal .box p{margin-block-end:5px;font-size:.96rem}
.legal .box p:last-child{margin-block-end:0}
.legal .back{display:inline-flex;align-items:center;gap:8px;margin-block-end:34px;font-size:.9rem;color:var(--ink-60);text-decoration:none}
.legal .back:hover{color:var(--red)}
.legal .back svg{inline-size:15px;block-size:15px}
[dir="rtl"] .legal .back svg{transform:scaleX(-1)}

/* --- 18. Reveal (only when JS is running, so no-JS never hides content) -- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}
.js .rv-d1{transition-delay:.07s}
.js .rv-d2{transition-delay:.14s}
.js .rv-d3{transition-delay:.21s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js .rv{opacity:1;transform:none}
}

/* --- 19. RTL ------------------------------------------------------------ */
[dir="rtl"] body{letter-spacing:0}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,
[dir="rtl"] .band__pull,[dir="rtl"] .quote blockquote,
[dir="rtl"] .faq summary,[dir="rtl"] .stat__n,[dir="rtl"] .process__foot{letter-spacing:0}
[dir="rtl"] .eyebrow{letter-spacing:.06em}
[dir="rtl"] .mark{letter-spacing:-.03em;direction:ltr}
[dir="rtl"] .quote blockquote::before{content:"\201D"}
[dir="rtl"] .quote blockquote::after{content:"\201C"}
[dir="rtl"] .btn .ic,[dir="rtl"] .case__out svg{transform:scaleX(-1)}
[dir="rtl"] .lang__code{direction:ltr}
[dir="rtl"] .contact__row .v{direction:ltr;text-align:right;unicode-bidi:plaintext}
[dir="rtl"] .quote__by{white-space:normal}