@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 800;
  font-stretch:75% 125%;
  font-display:swap;
  src:url(../fonts/archivo-variable.woff2) format('woff2');
}

/* ============================================================
   INSTA MOVE LLC — CONCEPT C, CINEMATIC
   Dark ground, floating rounded UI, one warm accent.
   Single committed dark-first identity; every colour explicit.
   ============================================================ */
:root{
  /* ---- DARK (default) ---- */
  --void:#0A0A0C;      --void-2:#101014;     --panel:#16161A;
  --panel-2:#1C1C21;   --paper:#F4F3F1;      --paper-2:#FFFFFF;
  /* El fondo real de la página. A diferencia de --void, NO se redeclara en
     .frame/.phead/.panel--dark, así que una banda oscura puede fundirse con
     la página en los dos temas. Ver 06-blocks.css. */
  --page-bg:#0A0A0C;
  --ink:#0A0A0C;
  --text:#F5F4F2;      --muted:#9B9BA1;      --muted-2:#8A8A91;
  --stroke:rgba(255,255,255,.11);
  --stroke-2:rgba(255,255,255,.20);
  --glass:rgba(18,18,22,.66);
  --field:rgba(255,255,255,.04);
  --tint:rgba(255,255,255,.06);
  --tint-2:rgba(255,255,255,.09);
  --shot-bg:#0D0D10;   --shot-grid:rgba(255,255,255,.04);
  --err:#FF8A80;       --err-line:#E5484D;   --placeholder:#85858C;
  --note-text:#D6D6DA;
  --shadow-lg:0 16px 40px rgba(0,0,0,.55);
  --shadow-md:0 10px 30px rgba(0,0,0,.35);
  --ember:#81DD21;     --ember-dk:#72C31D;   --ember-soft:rgba(129,221,33,.14);
  /* Client brand green. It is a LIGHT colour, so anything sitting on the fill
     uses --on-ember (11.58:1). White on #81DD21 is 1.71:1 and is unreadable.
     --ember is the accent for text and icons: 11.51:1 on the dark ground but
     only 1.58:1 on paper, so the light theme swaps it for a deep green. */
  --ember-fill:#81DD21;
  --on-ember:#0A0A0C;

  --f:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --gut:38px; --sec:96px;
  --r-xl:34px; --r-lg:22px; --r-md:16px; --r-pill:999px;
  --ease:cubic-bezier(.22,.75,.28,1);
  color-scheme:dark;
}

/* ---- LIGHT ---- Custom attribute, not data-theme: the artifact host stamps
   data-theme for the viewer's own preference and would override this site's. */
:root[data-im-theme="light"]{
  --void:#F7F6F4;      --void-2:#EFEDE9;     --panel:#FFFFFF;
  --panel-2:#FAF9F7;
  --page-bg:#F7F6F4;
  --ink:#14120F;
  --text:#14120F;      --muted:#5A5854;      --muted-2:#6E6B66;
  --stroke:rgba(20,18,15,.12);
  --stroke-2:rgba(20,18,15,.26);
  --glass:rgba(255,255,255,.74);
  --field:rgba(20,18,15,.03);
  --tint:rgba(20,18,15,.045);
  --tint-2:rgba(20,18,15,.07);
  --shot-bg:#EDEBE7;   --shot-grid:rgba(20,18,15,.05);
  --err:#B3261E;       --err-line:#B3261E;   --placeholder:#75726C;
  --note-text:#3A3833;
  --shadow-lg:0 16px 40px rgba(20,18,15,.14);
  --shadow-md:0 10px 28px rgba(20,18,15,.10);
  /* Brand green is 1.58:1 on paper. Accents drop to a deep green that clears
     4.5:1 on every light surface, --void-2 (#EFEDE9) included — it is the
     darkest of them and the one that a #497C13 failed on, at 4.30:1. */
  --ember:#437311;
  color-scheme:light;
}
/* Surfaces that stay dark in both themes: the hero photograph, the inner-page
   bands and the coverage map. They redeclare the dark token set locally, so
   everything inside keeps dark-mode contrast even when the page is light. */
.frame,.phead,.panel--dark,.topbar.over-dark{
  --text:#F5F4F2; --muted:#9B9BA1; --muted-2:#8A8A91;
  --panel:#16161A; --panel-2:#1C1C21;
  --stroke:rgba(255,255,255,.11); --stroke-2:rgba(255,255,255,.20);
  --glass:rgba(18,18,22,.66);
  --tint:rgba(255,255,255,.06); --tint-2:rgba(255,255,255,.09);
  --field:rgba(255,255,255,.04); --placeholder:#85858C;
  --ember:#81DD21; --note-text:#D6D6DA;
  /* mobile stacks copy under the photo inside .frame — keep that ground dark too */
  --void:#0A0A0C;
  color-scheme:dark;
}
.frame,.phead,.panel--dark{color:var(--text)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:var(--f);font-size:16.5px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
p{margin:0}
a{color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.03;text-wrap:balance}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:6px}
::selection{background:var(--ember-fill);color:var(--on-ember)}

/* ---------- Type ---------- */
/* Mismo tamaño que el titular del hero: era 4.6rem contra los 3.5rem del
   hero (74px contra 56px a 1440) y las internas gritaban más que la portada.
   Si se cambia uno, cambiar el otro — están emparejados a propósito. */
.d1{font-size:clamp(2.2rem,4.05cqi,3.5rem);letter-spacing:-.042em;line-height:1.04}
.d2{font-size:clamp(1.9rem,4.2cqi,3.4rem);letter-spacing:-.038em;line-height:1.06}
.d3{font-size:clamp(1.25rem,2cqi,1.7rem);letter-spacing:-.03em;line-height:1.14;font-weight:600}
.d2-sm{font-size:clamp(1.5rem,2.4cqi,2rem)}
.d4{font-size:1.06rem;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.lede{font-size:clamp(1rem,1.25cqi,1.14rem);line-height:1.62;color:var(--muted);max-width:56ch}
.sm{font-size:.93rem;line-height:1.6;color:var(--muted)}
.xs{font-size:.8rem;line-height:1.5;color:var(--muted-2)}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ember);
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ember);flex:none}
.num{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--ember);font-variant-numeric:tabular-nums}

/* Light surfaces flip the text roles */
.lite{background:var(--paper);color:var(--ink)}
.lite h1,.lite h2,.lite h3,.lite h4{color:var(--ink)}
.lite .lede,.lite .sm{color:var(--ink-muted)}
.lite .xs{color:#86868C}

/* ---------- Layout ---------- */
.wrap{width:min(1340px,100% - 2*var(--gut));margin-inline:auto}
.sec{padding:var(--sec) 0}
.stack{display:flex;flex-direction:column}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ---------- Pill buttons with a circular icon badge ---------- */
.pill{
  display:inline-flex;align-items:center;gap:12px;position:relative;
  padding:9px 9px 9px 24px;border-radius:var(--r-pill);text-decoration:none;
  font-size:.92rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  border:1px solid transparent;min-height:52px;overflow:hidden;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.pill-ico{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  position:relative;overflow:hidden;
  transition:background .35s var(--ease),transform .35s var(--ease);
}
.pill-ico svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.pill:hover .pill-ico{transform:rotate(45deg)}
.pill:hover .pill-ico svg{transform:rotate(-45deg)}

.pill--ember{background:var(--ember-fill);color:var(--on-ember)}
.pill--ember .pill-ico{background:var(--on-ember);color:var(--ember-fill)}
.pill--ember:hover{background:var(--ember-dk)}

.pill--light{background:var(--paper-2);color:var(--ink)}
.pill--light .pill-ico{background:var(--ink);color:#fff}
.pill--light:hover{background:var(--ember-fill);color:var(--on-ember)}
.pill--light:hover .pill-ico{background:var(--on-ember);color:var(--ember-fill)}

.pill--ghost{background:transparent;color:var(--text);border-color:var(--stroke-2)}
.pill--ghost .pill-ico{background:rgba(255,255,255,.12);color:var(--text)}
.pill--ghost:hover{background:rgba(255,255,255,.10);border-color:var(--stroke-2)}
.lite .pill--ghost{color:var(--ink);border-color:var(--line-lt)}
.lite .pill--ghost .pill-ico{background:rgba(10,10,12,.08);color:var(--ink)}
.lite .pill--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.lite .pill--ghost:hover .pill-ico{background:rgba(255,255,255,.16);color:#fff}

.pill--dark{background:var(--ink);color:#fff}
.pill--dark .pill-ico{background:var(--ember-fill);color:var(--on-ember)}
.pill--dark:hover{background:var(--ember-fill);color:var(--on-ember)}
.pill--dark:hover .pill-ico{background:var(--on-ember);color:var(--ember-fill)}

.pills{display:flex;flex-wrap:wrap;gap:11px;align-items:center}

/* Text link with sliding arrow */
.alink{
  display:inline-flex;align-items:center;gap:9px;font-size:.88rem;font-weight:600;
  text-decoration:none;color:var(--ember);transition:gap .3s var(--ease);
}
.alink:hover{gap:14px}
.alink svg{width:14px;height:14px}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ph{text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;text-underline-offset:4px;cursor:help}