/* ============================================================================
   CYSTEMS — Concept 1 "The Atelier"
   Premium AI Systems Company · editorial luxury × systems precision
   Design system: cream/hueso grounds · hierro ink · a single disciplined gold line
   ========================================================================== */

/* ---- 0. Tokens ---------------------------------------------------------- */
:root {
  /* Brand color (CYSTEMS v2 — finca infected with AI) */
  --hierro:   #1A1714;   /* near-black ink */
  --hierro-2: #221E1A;   /* raised dark surface */
  --finca:    #3D4736;   /* deep olive-green */
  --finca-lit:#556149;   /* lighter olive for depth */
  --oro:      #9F7A40;   /* gold/brass — primary accent */
  --oro-lit:  #C9A25E;   /* brighter gold — highlight/hover */
  --arcilla:  #8C4A3B;   /* clay-terracotta — sparing emphasis */
  --piedra:   #CBB99A;   /* stone/beige */
  --piedra-2: #DFD2BB;   /* softer stone surface */
  --hueso:    #F4ECDF;   /* bone/cream — light ground */
  --hueso-2:  #EFE6D6;   /* second cream for section alternation */
  --linea:    #E4D8C6;   /* hairline on cream */
  --linea-dk: rgba(244,236,223,0.12); /* hairline on dark */

  /* Semantic */
  --ink:        var(--hierro);
  --ink-soft:   #57503F;         /* muted ink for body on cream */
  --ink-faint:  #8A7F6A;         /* captions / meta on cream */
  --paper:      var(--hueso);
  --paper-alt:  var(--hueso-2);
  --accent:     var(--oro);
  --accent-lit: var(--oro-lit);

  /* On-dark */
  --dark-ink:   #F1E9DB;
  --dark-soft:  rgba(241,233,219,0.62);
  --dark-faint: rgba(241,233,219,0.38);

  /* Type */
  --serif: "Fraunces", "GT Sectra", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "Space Mono", "Berkeley Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Scale (fluid) */
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem);
  --step-5:  clamp(3.2rem, 1.7rem + 7vw, 8rem);

  /* Space */
  --gap: clamp(1rem, 0.6rem + 1.6vw, 1.6rem);
  --pad-x: clamp(1.2rem, 0.6rem + 4vw, 6rem);
  --section-y: clamp(5rem, 3rem + 9vw, 11rem);
  --maxw: 1360px;
  --measure: 62ch;

  /* Motion */
  --ease-cine: cubic-bezier(.16, 1, .3, 1);   /* expo-out, weighted */
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --dur: .8s;

  --radius: 2px;
  --hairline: 1px;
}

/* ---- 1. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: clip;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; padding: 0; }
::selection { background: var(--oro); color: var(--hueso); }

/* ---- 2. Film grain + atmosphere ---------------------------------------- */
.grain {
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }

/* ---- 3. Layout primitives ---------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--section-y); position: relative; }
.section--dark { background: var(--hierro); color: var(--dark-ink); }
.section--green { background: var(--finca); color: var(--dark-ink); }
.section--stone { background: var(--piedra-2); }
.section--alt { background: var(--paper-alt); }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow::before {
  content: ""; width: 2.4em; height: 1px; background: currentColor; opacity: .55;
}
.section--dark .eyebrow, .section--green .eyebrow { color: var(--oro-lit); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.08; }
.display-italic { font-style: italic; font-optical-sizing: auto; }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: var(--measure); color: var(--ink-soft); }
.section--dark .lede, .section--green .lede { color: var(--dark-soft); }
.meta { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em; color: var(--ink-faint); }
.section--dark .meta, .section--green .meta { color: var(--dark-faint); }

/* Kinetic reveal primitives (JS-driven; CSS gives graceful default) */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > * { display: block; will-change: transform; }
[data-fade] { opacity: 1; }
.js [data-fade] { opacity: 0; transform: translateY(22px); }
/* Pre-hide masked / staggered content ONLY when motion is allowed + JS present,
   so it never flashes before GSAP sets initial state, yet stays visible if
   motion is reduced or JS is absent. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-mask] { clip-path: inset(0 0 100% 0); }
  .js [data-stagger] .reveal-line > * { transform: translateY(115%); }
}

/* ---- 4. Buttons -------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .8em;
  font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: .12em; text-transform: uppercase;
  padding: 1.05em 1.8em;
  border: 1px solid var(--ink);
  border-radius: 100px;
  color: var(--ink);
  transition: color .5s var(--ease-soft), background-color .5s var(--ease-soft), border-color .5s var(--ease-soft);
  overflow: hidden; isolation: isolate;
}
.btn .btn-label { position: relative; z-index: 2; display: inline-block; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--ink); transform: translateY(101%);
  transition: transform .55s var(--ease-cine);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--paper); }

.btn--primary { background: var(--oro); border-color: var(--oro); color: var(--hierro); }
.btn--primary::after { background: var(--hierro); }
.btn--primary:hover, .btn--primary:focus-visible { color: var(--oro-lit); }

.btn--ghost-dark { border-color: var(--linea-dk); color: var(--dark-ink); }
.btn--ghost-dark::after { background: var(--oro); }
.btn--ghost-dark:hover, .btn--ghost-dark:focus-visible { color: var(--hierro); border-color: var(--oro); }

.btn .arrow { transition: transform .5s var(--ease-cine); position: relative; z-index: 2; }
.btn:hover .arrow { transform: translateX(4px); }

.link-underline {
  position: relative; font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: .1em; text-transform: uppercase; padding-bottom: .3em;
}
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-cine);
}
.link-underline:hover::after { transform: scaleX(1); }

/* Magnetic wrapper */
.magnetic { display: inline-block; will-change: transform; }

/* ---- 5. Navigation ------------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1rem, 0.6rem + 1vw, 1.6rem) var(--pad-x);
  transition: background-color .5s var(--ease-soft), backdrop-filter .5s, border-color .5s, padding .5s var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--hueso) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--linea);
  padding-block: clamp(.7rem, .4rem + .6vw, 1rem);
}
.brand { display: inline-flex; align-items: center; gap: .7em; font-family: var(--serif); font-size: 1.35rem; letter-spacing: .02em; }
.brand .glyph { width: 24px; height: 24px; flex: none; }
.brand .glyph path, .brand .glyph circle { stroke: var(--accent); stroke-width: 1.4; fill: none; }
.brand b { font-weight: 400; }
.brand .tld { color: var(--ink-faint); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; align-self: flex-end; padding-bottom: .28em; }

.nav-links { display: flex; align-items: center; gap: clamp(1.2rem, .6rem + 1.4vw, 2.4rem); }
.nav-links a { font-size: var(--step--1); letter-spacing: .01em; color: var(--ink-soft); transition: color .35s; position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-cine);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { display: inline-flex; }

.nav-toggle { display: none; width: 42px; height: 42px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav-toggle span { width: 22px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease-cine), opacity .3s; }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--hierro); color: var(--dark-ink);
  display: flex; flex-direction: column; justify-content: center; padding: var(--pad-x);
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-cine);
  pointer-events: none;
}
.mobile-menu.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.mobile-menu a { font-family: var(--serif); font-size: clamp(2rem, 8vw, 3.2rem); padding-block: .18em; color: var(--dark-ink); opacity: .85; }
.mobile-menu a:hover { color: var(--oro-lit); }
.mobile-menu .mm-meta { margin-top: 2.4rem; }

/* ---- 6. Hero ------------------------------------------------------------ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-canvas { position: absolute; inset: 0; z-index: 0; }
.hero-canvas canvas { width: 100%; height: 100%; }
/* gradient-mesh fallback (also base atmosphere) */
.hero-mesh {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 55% at 72% 30%, rgba(201,162,94,.20), transparent 60%),
    radial-gradient(50% 60% at 20% 78%, rgba(61,71,54,.22), transparent 62%),
    radial-gradient(80% 80% at 50% 50%, rgba(203,185,154,.14), transparent 70%),
    var(--hueso);
}
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(26,23,20,.10));
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(3rem, 6vw, 6rem); padding-top: 8rem; }
.hero h1 { max-width: 15ch; margin-top: 1.4rem; }
.hero .hero-sub { margin-top: 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.4rem; align-items: center; }
.hero-scroll {
  position: absolute; right: var(--pad-x); bottom: clamp(2rem,5vw,3.4rem); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .8em;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
}
.hero-scroll .rule { width: 1px; height: 54px; background: linear-gradient(var(--accent), transparent); }
@media (max-width: 720px) { .hero-scroll { display: none; } }

/* ---- 7. Generic content grids ------------------------------------------ */
.grid { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 3rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.section-head { max-width: 42ch; }
.section-head h2 { margin-top: 1.2rem; }
.section-head .lede { margin-top: 1.6rem; }

/* Value trio (What CYSTEMS Does) */
.pillar { padding-top: 2rem; border-top: 1px solid var(--linea); }
.section--dark .pillar, .section--green .pillar { border-top-color: var(--linea-dk); }
.pillar .no { font-family: var(--mono); font-size: var(--step--1); color: var(--accent); letter-spacing: .1em; }
.pillar h3 { margin: 1rem 0 .8rem; font-size: var(--step-1); }
.pillar p { color: var(--ink-soft); }
.section--dark .pillar p { color: var(--dark-soft); }

/* ---- 8. The Ladder (three tiers) --------------------------------------- */
.ladder { display: grid; gap: 1px; background: var(--linea-dk); border: 1px solid var(--linea-dk); border-radius: var(--radius); overflow: hidden; }
.rung {
  background: var(--hierro-2); padding: clamp(1.6rem, 3vw, 2.8rem);
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem,3vw,2.4rem); align-items: center;
  transition: background-color .5s var(--ease-soft);
}
.rung:hover { background: #26211c; }
.rung .rung-no { font-family: var(--mono); font-size: var(--step--1); color: var(--oro-lit); letter-spacing: .1em; }
.rung h3 { font-size: var(--step-2); color: var(--dark-ink); }
.rung .rung-tag { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .08em; color: var(--dark-faint); text-transform: uppercase; margin-top: .5rem; }
.rung p { color: var(--dark-soft); max-width: 46ch; margin-top: .9rem; }
.rung .rung-mark { font-family: var(--mono); font-size: var(--step--1); color: var(--dark-faint); text-align: right; white-space: nowrap; }
.rung--flagship { background: linear-gradient(120deg, #2b2620, #211d18); }
.rung--flagship h3 { color: var(--oro-lit); }
@media (max-width: 820px) {
  .rung { grid-template-columns: auto 1fr; }
  .rung .rung-mark { grid-column: 1 / -1; text-align: left; }
}

/* ---- 9. Custom Builds (flagship, dark) --------------------------------- */
.flagship-head { display: grid; grid-template-columns: 1fr; gap: 1.4rem; max-width: 24ch; }
.deliverables { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 3rem; background: var(--linea-dk); border: 1px solid var(--linea-dk); }
.deliverable { background: var(--hierro); padding: clamp(1.4rem, 2.6vw, 2.2rem); }
.deliverable .no { font-family: var(--mono); font-size: var(--step--1); color: var(--oro-lit); letter-spacing: .12em; }
.deliverable h4 { font-family: var(--serif); font-size: var(--step-1); color: var(--dark-ink); margin: .9rem 0 .6rem; }
.deliverable p { color: var(--dark-soft); font-size: var(--step--1); line-height: 1.55; }
@media (max-width: 640px) { .deliverables { grid-template-columns: 1fr; } }

/* ---- 10. Triplet guarantee (Eco / Lazo / Pilar) ------------------------ */
.triplet { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.4rem,3vw,2.6rem); margin-top: 3rem; }
.tri {
  border: 1px solid var(--linea); border-radius: var(--radius); padding: clamp(1.6rem,3vw,2.4rem);
  background: color-mix(in srgb, var(--hueso) 60%, white);
  transition: transform .6s var(--ease-cine), border-color .5s;
}
.tri:hover { transform: translateY(-4px); border-color: var(--oro); }
.tri .tri-glyph { width: 46px; height: 46px; margin-bottom: 1.4rem; }
.tri .tri-glyph path, .tri .tri-glyph circle { stroke: var(--oro); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.tri h3 { font-size: var(--step-1); }
.tri .tri-es { font-family: var(--mono); font-size: var(--step--1); color: var(--accent); letter-spacing: .1em; text-transform: uppercase; }
.tri p { margin-top: .8rem; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.6; }
@media (max-width: 780px) { .triplet { grid-template-columns: 1fr; } }

/* ---- 11. OS modules ----------------------------------------------------- */
.modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 2.6rem; background: var(--linea); border: 1px solid var(--linea); }
.module {
  background: var(--hueso); padding: clamp(1.1rem, 2.2vw, 1.7rem); min-height: 132px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: background-color .5s var(--ease-soft), color .5s;
}
.module:hover { background: var(--finca); color: var(--dark-ink); }
.module .m-no { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-faint); letter-spacing: .1em; }
.module:hover .m-no { color: var(--oro-lit); }
.module h4 { font-family: var(--serif); font-size: var(--step-1); }
@media (max-width: 900px) { .modules { grid-template-columns: repeat(2,1fr); } }

/* ---- 12. Use cases ------------------------------------------------------ */
.cases { border-top: 1px solid var(--linea); margin-top: 2.4rem; }
.case {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: clamp(1rem,3vw,2.4rem);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--linea);
  transition: padding-left .5s var(--ease-cine);
}
.case:hover { padding-left: clamp(.6rem, 2vw, 1.4rem); }
.case .c-no { font-family: var(--mono); font-size: var(--step--1); color: var(--accent); letter-spacing: .1em; }
.case h3 { font-size: var(--step-2); transition: color .4s; }
.case:hover h3 { color: var(--arcilla); }
.case p { color: var(--ink-soft); max-width: 48ch; margin-top: .7rem; font-size: var(--step-0); }
.case .c-tag { font-family: var(--mono); font-size: var(--step--1); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
@media (max-width: 820px) { .case { grid-template-columns: auto 1fr; } .case .c-tag { grid-column: 2; } }

/* ---- 13. Process (green) ------------------------------------------------ */
.process { position: relative; margin-top: 3rem; }
.process-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--linea-dk); }
.process-rail .fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--oro-lit); }
.step { position: relative; padding: 0 0 clamp(2.4rem,5vw,4rem) clamp(2.6rem,5vw,4.4rem); }
.step:last-child { padding-bottom: 0; }
.step .dot { position: absolute; left: -5px; top: .4rem; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--oro-lit); background: var(--finca); }
.step .s-no { font-family: var(--mono); font-size: var(--step--1); color: var(--oro-lit); letter-spacing: .12em; }
.step h3 { font-size: var(--step-2); color: var(--dark-ink); margin: .6rem 0 .8rem; }
.step p { color: var(--dark-soft); max-width: 52ch; }

/* ---- 14. About / statement --------------------------------------------- */
.statement { max-width: 24ch; }
.statement .big { font-family: var(--serif); font-size: var(--step-3); line-height: 1.14; }
.founder-note { max-width: var(--measure); }
.founder-note p + p { margin-top: 1.2rem; }
.signature { font-family: var(--serif); font-style: italic; font-size: var(--step-1); margin-top: 1.8rem; color: var(--ink); }
.creed { display: grid; gap: 1px; background: var(--linea); border: 1px solid var(--linea); margin-top: 2.6rem; }
.creed li { background: var(--hueso); padding: 1.2rem 1.4rem; font-family: var(--serif); font-style: italic; font-size: var(--step-1); }

/* ---- 15. Apply (dark, terminal) ---------------------------------------- */
.apply-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem,6vw,6rem); align-items: start; }
.form-field { position: relative; margin-bottom: 1.7rem; }
.form-field label {
  display: block; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em;
  text-transform: uppercase; color: var(--oro-lit); margin-bottom: .6rem;
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--linea-dk);
  color: var(--dark-ink); font-family: var(--sans); font-size: var(--step-0);
  padding: .7em 0; transition: border-color .4s;
}
.form-field textarea { resize: vertical; min-height: 96px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-bottom-color: var(--oro); }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--dark-faint); }
.form-field select { -webkit-appearance: none; appearance: none; color: var(--dark-ink); }
.form-field select option { background: var(--hierro); color: var(--dark-ink); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.form-actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.form-note { font-family: var(--mono); font-size: var(--step--1); color: var(--dark-faint); margin-top: 1.4rem; }
.form-success {
  display: none; border: 1px solid var(--oro); border-radius: var(--radius); padding: 2rem;
  font-family: var(--serif); font-size: var(--step-2); color: var(--oro-lit); line-height: 1.2;
}
.form-success.is-shown { display: block; }
.apply-aside .qual { border-top: 1px solid var(--linea-dk); padding-top: 1.4rem; margin-top: 1.4rem; }
.apply-aside .qual .q-lead { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--dark-faint); }
.apply-aside ul.checks li { padding: .7rem 0 .7rem 1.8rem; position: relative; color: var(--dark-soft); border-bottom: 1px solid var(--linea-dk); }
.apply-aside ul.checks li::before { content: "—"; position: absolute; left: 0; color: var(--oro-lit); }
@media (max-width: 860px) { .apply-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }

/* ---- 16. Contact -------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,5rem); align-items: end; }
.contact-cta { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---- 17. Footer --------------------------------------------------------- */
.footer { background: var(--hierro); color: var(--dark-ink); padding-block: clamp(3.4rem, 6vw, 6rem) 2.4rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(2rem,5vw,4rem); }
.footer .brand { color: var(--dark-ink); }
.footer .brand .tld { color: var(--dark-faint); }
.footer-tag { max-width: 34ch; color: var(--dark-soft); margin-top: 1.4rem; }
.footer-col h5 { font-family: var(--mono); font-size: var(--step--1); letter-spacing: .12em; text-transform: uppercase; color: var(--dark-faint); margin-bottom: 1rem; }
.footer-col a { display: block; padding: .35rem 0; color: var(--dark-soft); transition: color .35s; }
.footer-col a:hover { color: var(--oro-lit); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(3rem,6vw,5rem); padding-top: 1.6rem; border-top: 1px solid var(--linea-dk); }
.footer-bottom .meta { color: var(--dark-faint); }
.footer-glyphrow { display: flex; gap: 1.2rem; margin-top: 2rem; }
.footer-glyphrow svg { width: 30px; height: 30px; opacity: .5; transition: opacity .4s; }
.footer-glyphrow svg:hover { opacity: 1; }
.footer-glyphrow path, .footer-glyphrow circle { stroke: var(--oro-lit); stroke-width: 1.4; fill: none; stroke-linecap: round; }
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

/* ---- 18. Responsive collapse ------------------------------------------- */
@media (max-width: 960px) {
  .split, .grid-2, .grid-3, .apply-grid, .contact-grid { grid-template-columns: 1fr; }
  .deliverables { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav.is-menu-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.is-menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.is-menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
}

/* ---- 19. Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-fade] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
  .hero-canvas { display: none; }
}

/* ---- 20. Utilities ------------------------------------------------------ */
.mt-s { margin-top: 1rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: 3.4rem; }
.center { text-align: center; } .maxw-content { max-width: 68ch; }
.divider { height: 1px; background: var(--linea); border: none; margin: 0; }
.section--dark .divider, .section--green .divider { background: var(--linea-dk); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pull-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: clamp(2.4rem,5vw,3.6rem); }