/* ---------- self-hosted fonts ----------
   Served from this origin instead of fonts.googleapis.com + fonts.gstatic.com,
   which removes two DNS lookups and two TLS handshakes from the critical path
   and lets these files be cached immutably.
   Only the latin and arabic subsets are shipped, and only the six weights the
   stylesheet actually uses. IBM Plex and Reem Kufi are both SIL OFL licensed,
   which permits self-hosting.
   Regenerate rather than hand-edit: weights must match the CSS below.
   ---------------------------------------------------------------- */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/ibm-plex-sans-arabic-400-arabic.woff2) format('woff2');
  unicode-range:U+60c, U+623, U+627, U+62f, U+631, U+639, U+644-646, U+651, U+654;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/ibm-plex-sans-arabic-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/ibm-plex-sans-arabic-500-arabic.woff2) format('woff2');
  unicode-range:U+60c, U+623, U+627, U+62f, U+631, U+639, U+644-646, U+651, U+654;
}
@font-face{
  font-family:'IBM Plex Sans Arabic';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/ibm-plex-sans-arabic-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Reem Kufi';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/reem-kufi-500-arabic.woff2) format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:'Reem Kufi';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/reem-kufi-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Reem Kufi';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/reem-kufi-600-arabic.woff2) format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
  font-family:'Reem Kufi';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(fonts/reem-kufi-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Digital Island Technology: MENA operations partner, Amman
   ------------------------------------------------------------
   PALETTE ONLY. The four colours of the Jordanian flag (black,
   white, green, red) used as an information system, never as
   flag imagery:
     crimson   = action, and the Grow track
     ink       = the Make track, and the dark reading surface
     green     = the Run track, and the closing surface
     limestone = the light reading surface (Amman stone)
   ============================================================ */

:root{
  --ink:         #101014;
  --ink-soft:    #1B1B21;
  --ink-line:    #2E2E36;
  --limestone:   #E8E4DA;
  --stone-line:  #C2BBA9;
  --stone-text:  #6B6455;   /* quiet text on limestone, 4.6:1, the lightest that passes */
  --green:       #0E6B3E;
  --green-deep:  #073C23;
  --crimson:     #C2172B;
  --white:       #FBFAF7;

  --font-display: "Reem Kufi", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --pad-band: clamp(72px, 9vw, 128px);
  --focus: var(--crimson);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

/* The header is sticky, so anchored targets must reserve room for it or they
   land jammed underneath. 70px header + breathing room. */
[id]{ scroll-margin-top:96px; }

body{
  margin:0;
  background:var(--limestone);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(16px,1.02vw,17.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }
a{ color:inherit; }

:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:2px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--crimson); color:var(--white);
  padding:12px 18px; font-family:var(--font-mono); font-size:.78rem;
}
.skip:focus{ left:0; }

/* ---------- brand mark: pixel island + signal pixel ----------
   Colours live in the <symbol> itself: the landmass takes currentColor so it
   works on ink and on green, and the signal pixel is fixed crimson. */

.logo{ width:25px; height:25px; flex:none; }

/* ---------- shared type ---------- */

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  margin:0 0 18px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.eyebrow::before{ content:""; width:34px; height:2px; background:var(--crimson); flex:none; }

.h-display{
  font-family:var(--font-display); font-weight:600;
  line-height:1.02; letter-spacing:-.015em; margin:0;
  font-size:clamp(2.6rem,5.6vw,4.7rem);
}
.h-section{
  font-family:var(--font-display); font-weight:600;
  line-height:1.08; letter-spacing:-.01em; margin:0 0 22px;
  font-size:clamp(2rem,4.1vw,3.15rem);
}
.h-sub{
  font-family:var(--font-display); font-weight:500;
  line-height:1.18; margin:0 0 12px;
  font-size:clamp(1.18rem,1.7vw,1.42rem);
}

.lede{ font-size:clamp(1.06rem,1.35vw,1.24rem); line-height:1.6; max-width:60ch; margin:0 0 32px; }
.ar{ font-weight:500; }

/* ---------- bands ---------- */

.band{ position:relative; padding:var(--pad-band) 0; }
.band--ink{ background:var(--ink); color:var(--white); --focus:var(--white); }
.band--stone{ background:var(--limestone); color:var(--ink); }
.band--green{ background:var(--green); color:var(--white); --focus:var(--white); }

.wrap{
  width:100%; max-width:var(--wrap);
  margin:0 auto; padding:0 var(--gut);
  position:relative; z-index:2;
}

/* ---------- header ---------- */

.site-head{
  position:sticky; top:0; z-index:40;
  background:var(--ink); color:var(--white);
  border-bottom:1px solid var(--ink-line);
  --focus:var(--white);
}
.head-in{
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
  height:70px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--white);
  font-family:var(--font-display); font-weight:600;
  font-size:1.16rem; white-space:nowrap;
}
.brand small{
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.2em;
  text-transform:uppercase; opacity:.55; align-self:flex-end; padding-bottom:5px;
}

.nav{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
.nav a{
  text-decoration:none;
  font-family:var(--font-mono); font-size:.74rem;
  letter-spacing:.11em; text-transform:uppercase;
  color:rgba(251,250,247,.72); padding:6px 0; position:relative;
}
.nav a:hover{ color:var(--white); }
.nav a[aria-current="page"]{ color:var(--white); }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--crimson);
}
.nav .btn-sm{ border:1px solid rgba(251,250,247,.28); padding:9px 16px; color:var(--white); }
.nav .btn-sm:hover{ background:var(--crimson); border-color:var(--crimson); }
.nav .btn-sm::after{ display:none; }

.nav-toggle{
  display:none; background:none; border:1px solid rgba(251,250,247,.28);
  color:var(--white); font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase; padding:9px 14px; cursor:pointer;
}

/* ---------- hero ---------- */

.hero{ background:var(--ink); color:var(--white); --focus:var(--white); }
.hero-in{
  max-width:var(--wrap); margin:0 auto; padding:clamp(70px,8vw,116px) var(--gut);
  display:grid; gap:clamp(38px,5vw,72px);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:940px){
  .hero-in{ grid-template-columns:minmax(0,1.3fr) minmax(280px,.85fr); }
}
.hero--short .hero-in{
  grid-template-columns:1fr;
  padding-top:clamp(56px,6vw,84px); padding-bottom:clamp(56px,6vw,84px);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* the hero's thesis: the eight functions, keyed by track colour */
.hero-index{ border-top:2px solid var(--crimson); padding-top:18px; }
.index-head{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(251,250,247,.5); margin:0 0 6px;
}
.index-list{ list-style:none; margin:0; padding:0; }
.index-list a{
  display:flex; align-items:center; gap:13px; width:100%;
  color:inherit; text-decoration:none; padding:10px 0;
  transition:color .16s ease;
}
.index-list a:hover{ color:var(--crimson); }
.index-list a:hover .chip{ transform:scale(1.35); }
.chip{ transition:transform .16s ease; }
.index-list li{
  font-size:.96rem;
  border-bottom:1px solid rgba(251,250,247,.15);
}
.chip{ width:9px; height:9px; flex:none; display:inline-block; }
.chip--grow{ background:var(--crimson); }
.chip--make{ background:var(--limestone); }
.chip--run{ background:var(--green); }

.index-key{
  display:flex; flex-wrap:wrap; gap:6px 20px; margin:16px 0 0;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(251,250,247,.6);
}
.index-key span{ display:inline-flex; align-items:center; gap:8px; }

/* ---------- capability strip ---------- */

.strip{ background:var(--ink-soft); color:var(--white); border-top:1px solid var(--ink-line); --focus:var(--white); }
.strip-in{
  max-width:var(--wrap); margin:0 auto; padding:26px var(--gut);
  display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.strip dt{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(251,250,247,.5); margin:0 0 5px;
}
.strip dd{ margin:0; font-size:.93rem; line-height:1.45; }

/* ---------- buttons ---------- */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.11em; text-transform:uppercase;
  padding:15px 26px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; background:var(--crimson); color:var(--white);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{ background:#9E101F; }
.btn--ghost{ background:transparent; border-color:currentColor; color:inherit; }
.btn--ghost:hover{ background:var(--white); color:var(--ink); border-color:var(--white); }
.btn--stone{ background:var(--ink); color:var(--white); }
.btn--stone:hover{ background:var(--crimson); }

/* ---------- section head ---------- */

.sec-head{ max-width:64ch; margin-bottom:clamp(44px,5vw,68px); }

/* ---------- services: three tracks ---------- */

.track{
  display:grid; grid-template-columns:minmax(180px,240px) 1fr;
  gap:clamp(24px,4vw,56px);
  padding:clamp(34px,4vw,52px) 0;
  border-top:1px solid var(--stone-line);
}
.track:last-of-type{ border-bottom:1px solid var(--stone-line); }

.track-key .rule{ display:block; width:44px; height:8px; margin-bottom:16px; }
.track--grow .rule{ background:var(--crimson); }
.track--make .rule{ background:var(--ink); }
.track--run .rule{ background:var(--green); }
.track-key h2{ font-family:var(--font-display); font-weight:600; font-size:1.62rem; margin:0 0 8px; line-height:1.1; }
.track-key p{ margin:0; font-size:.92rem; line-height:1.5; opacity:.72; }
.track-key .count{
  font-family:var(--font-mono); font-size:.67rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--stone-text); display:block; margin-top:14px;
}

/* one conversion route per track, straight into a pre-filled enquiry */
.track-cta{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  font-family:var(--font-mono); font-size:.69rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--crimson);
  text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px;
}
.track-cta:hover{ border-bottom-color:var(--crimson); }
.track-cta span{ transition:transform .18s ease; }
.track-cta:hover span{ transform:translateX(3px); }

.cards{ display:grid; gap:2px; background:var(--stone-line); }
@media (min-width:720px){ .cards{ grid-template-columns:1fr 1fr; } }

.card{ background:var(--limestone); padding:clamp(22px,2.4vw,30px); position:relative; transition:background .2s ease; }
.card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--crimson); transform:scaleY(0); transform-origin:top;
  transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.card:hover{ background:var(--white); }
.card:hover::before{ transform:scaleY(1); }
.card h3{ font-family:var(--font-display); font-weight:600; font-size:1.16rem; line-height:1.2; margin:0 0 10px; }
.card p{ margin:0 0 16px; font-size:.95rem; line-height:1.58; }
.card .out{
  font-family:var(--font-mono); font-size:.69rem; line-height:1.6;
  letter-spacing:.02em; color:var(--stone-text); margin:0;
  padding-top:13px; border-top:1px solid var(--stone-line);
}
.card .out b{ font-weight:500; letter-spacing:.12em; text-transform:uppercase; }

/* ---------- MENA markets ---------- */

.markets{ display:grid; gap:1px; background:rgba(251,250,247,.22); border:1px solid rgba(251,250,247,.22); }
@media (min-width:680px){ .markets{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .markets{ grid-template-columns:repeat(4,1fr); } }

.market{ background:var(--green); padding:clamp(24px,2.6vw,32px); }
.market h2,.market h3{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; margin:0 0 10px; }
.market .where{
  font-family:var(--font-mono); font-size:.69rem; line-height:1.7; letter-spacing:.04em;
  margin:0 0 16px; padding-bottom:16px;
  border-bottom:1px solid rgba(251,250,247,.24); color:rgba(251,250,247,.82);
}
.market p{ margin:0; font-size:.94rem; line-height:1.6; }

/* ---------- principles ---------- */

.principles{ display:grid; gap:1px; background:rgba(251,250,247,.22); border:1px solid rgba(251,250,247,.22); }
.principle{
  background:var(--green); padding:clamp(26px,3vw,38px);
  display:grid; gap:8px clamp(24px,5vw,56px); grid-template-columns:1fr;
}
@media (min-width:860px){ .principle{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start; } }
.principle h3{ font-family:var(--font-display); font-weight:600; font-size:1.4rem; line-height:1.2; margin:0; }
.principle p{ margin:0; font-size:.98rem; line-height:1.62; }

/* ---------- process steps ---------- */

.steps{ display:grid; gap:2px; background:var(--stone-line); }
@media (min-width:800px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step{ background:var(--limestone); padding:clamp(26px,3vw,38px); }
.step .n{
  font-family:var(--font-mono); font-size:.69rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--crimson); display:block; margin-bottom:14px;
}
.step h3{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; margin:0 0 10px; }
.step p{ margin:0; font-size:.95rem; line-height:1.6; }

/* ---------- prose ---------- */

.prose{ max-width:66ch; }
.prose p{ margin:0 0 20px; }
.prose p:last-child{ margin-bottom:0; }

.split{ display:grid; gap:clamp(28px,5vw,72px); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

.pull{
  border-left:3px solid var(--crimson); padding:6px 0 6px 24px;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.3rem,2.2vw,1.72rem); line-height:1.28; margin:0;
}

.facts{ margin:0; padding:0; list-style:none; border-top:1px solid var(--stone-line); }
.band--ink .facts,.band--green .facts{ border-color:rgba(251,250,247,.24); }
.facts li{
  display:grid; grid-template-columns:minmax(120px,190px) 1fr;
  gap:clamp(14px,3vw,32px); padding:18px 0; border-bottom:1px solid var(--stone-line);
}
.band--ink .facts li,.band--green .facts li{ border-color:rgba(251,250,247,.24); }
.facts .k{
  font-family:var(--font-mono); font-size:.69rem; letter-spacing:.15em;
  text-transform:uppercase; opacity:.8; margin:0;
}
.facts .v{ margin:0; font-size:.98rem; line-height:1.55; }

/* ---------- contact form ---------- */

.form-grid{ display:grid; gap:clamp(30px,5vw,72px); grid-template-columns:1fr; }
@media (min-width:940px){ .form-grid{ grid-template-columns:1.35fr 1fr; } }

.field{ margin-bottom:22px; }
.field label{
  display:block; font-family:var(--font-mono); font-size:.69rem;
  letter-spacing:.15em; text-transform:uppercase; margin-bottom:9px; opacity:.72;
}
.field input,.field textarea,.field select{
  width:100%; font-family:var(--font-body); font-size:1rem;
  color:var(--ink); background:var(--white);
  border:1px solid var(--stone-line); border-radius:0;
  padding:13px 15px; transition:border-color .16s ease;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:hover,.field textarea:hover,.field select:hover{ border-color:#9E9682; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--crimson); }
.field .hint{ font-family:var(--font-mono); font-size:.67rem; color:var(--stone-text); margin:7px 0 0; letter-spacing:.02em; }
.field .err{ display:none; font-family:var(--font-mono); font-size:.67rem; color:var(--crimson); margin:7px 0 0; letter-spacing:.02em; }
.field.is-bad input,.field.is-bad textarea{ border-color:var(--crimson); }
.field.is-bad .err{ display:block; }

/* shown when an enquiry arrives from a track link */
.form-prefill{
  border-left:3px solid var(--crimson); background:var(--white);
  padding:14px 18px; margin:0 0 26px; font-size:.93rem; line-height:1.5;
}

.form-note{ font-family:var(--font-mono); font-size:.69rem; line-height:1.7; color:var(--stone-text); margin:18px 0 0; letter-spacing:.02em; }

.form-ok{ display:none; border-left:3px solid var(--green); background:var(--white); padding:22px 24px; margin-bottom:26px; }
.form-ok.show{ display:block; }
.form-ok h2{ font-family:var(--font-display); font-size:1.2rem; margin:0 0 8px; }
.form-ok p{ margin:0; font-size:.95rem; }

.detail-block{ margin-bottom:34px; }
.detail-block h3{
  font-family:var(--font-mono); font-size:.69rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--stone-text); margin:0 0 10px; font-weight:500;
}
.detail-block p{ margin:0; font-size:1.02rem; line-height:1.6; }
.detail-block a{ text-decoration-color:var(--crimson); text-underline-offset:4px; }
.detail-block a:hover{ color:var(--crimson); }

/* ---------- footer ---------- */

.site-foot{ background:var(--green); color:var(--white); padding:clamp(52px,6vw,76px) 0 30px; --focus:var(--white); }
.foot-grid{
  display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding-bottom:38px; border-bottom:1px solid rgba(251,250,247,.24);
}
.foot-brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:600; font-size:1.16rem; }
.foot-h{
  font-family:var(--font-mono); font-size:.67rem; letter-spacing:.16em;
  text-transform:uppercase; opacity:.8; margin:0 0 12px; font-weight:500;
}
.foot-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.foot-grid li a{ text-decoration:none; font-size:.94rem; opacity:.86; }
.foot-grid li a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.foot-grid p{ margin:0; font-size:.94rem; line-height:1.6; opacity:.86; }
.foot-end{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; padding-top:22px;
  font-family:var(--font-mono); font-size:.67rem; letter-spacing:.08em; opacity:.8;
}

/* ---------- motion ----------
   Reveals only arm when scripting is available (the .js class is set by an
   inline head script), so without JS the content is simply there. */

.js .reveal{ opacity:0; transform:translateY(22px); }
.js .reveal.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }

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

/* ---------- responsive ---------- */

@media (max-width:900px){
  .nav-toggle{ display:inline-block; }
  .nav{
    display:none; position:absolute; top:70px; left:0; right:0;
    background:var(--ink); border-bottom:1px solid var(--ink-line);
    flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gut) 22px;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--ink-line); font-size:.84rem; }
  .nav a[aria-current="page"]::after{ width:34px; right:auto; }
  .nav .btn-sm{ margin-top:16px; text-align:center; border-bottom:1px solid rgba(251,250,247,.28); }
  .track{ grid-template-columns:1fr; }
  .facts li{ grid-template-columns:1fr; gap:5px; }
}

@media (max-width:620px){
  .hero-cta{ gap:10px; }
  .hero-cta .btn{ width:100%; justify-content:center; }
  .cards,.steps,.markets,.principles{ gap:1px; }
}