/* ============================================================
   Agencia — site styles
   Design tokens and values from docs/design/handoff-agencia-home/README.md
   Deviations from the handoff are listed in site/README.md
   ============================================================ */

/* Geist, self-hosted: one variable file, latin subset, 29 KB. Replaces two
   third-party connections (fonts.googleapis.com + fonts.gstatic.com) that ran
   before any consent was given and blocked first render. See assets/fonts/README.md. */
@font-face{
  font-family:Geist;
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/geist.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;
}

:root{
  --ink:        #23282A;
  --ink-soft:   #2A2F31;
  --heading:    #2E3538;
  --body:       #4A5254;
  --body-alt:   #39413F;
  --muted:      #60686B;   /* handoff #6E7679 — darkened for WCAG AA down to the
                              darkest point of the .section--tint gradient (#E5E9EB): 4.66:1 */
  --muted-dark: #4F5659;   /* handoff #5C6467 — darkened for WCAG AA on sand  */
  --steel:      #55636B;
  --sand:       #DFCFB0;
  --sand-2:     #E9DEC6;
  --paper:      #F4F4F1;
  --paper-2:    #EFF1F1;
  --paper-3:    #E4E7E8;
  --page:       #D8DCDE;
  --on-dark:    #F2F1ED;
  --on-dark-2:  #E7EAEB;
  --on-dark-muted:  #AEB5B8;
  --on-dark-muted-2:#9AA3A6;
  --on-dark-muted-3:#8E9698;
  --line:       rgba(35,40,42,.14);
  --line-strong:rgba(35,40,42,.28);
  --line-dark:  rgba(255,255,255,.14);
  --wrap: 1280px;
  --font: Geist, "Helvetica Neue", Arial, sans-serif;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ font-family:var(--font); margin:0; text-wrap:balance; }
p,ul,ol{ margin:0; }
ul,ol{ list-style:none; padding:0; }
img{ max-width:100%; height:auto; display:block; }

a{ color:var(--ink); }
a:hover{ color:var(--steel); }

:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}
.section--dark :focus-visible,
.bottombar :focus-visible{ outline-color:var(--sand); }

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--on-dark);
  padding:12px 20px; z-index:100; text-decoration:none;
}
.skip:focus{ left:0; }

.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:56px;
}

.section{
  border-top:1px solid var(--line);
  padding-block:56px;
}
.section--dark{
  background:var(--ink);
  color:var(--on-dark);
  border-top:none;
}
/* Carries the hero's silver-blue through the light half of the page,
   so the middle sections don't flatten into plain white. */
.section--tint{
  background:linear-gradient(180deg, #F0F2F3 0%, #E5E9EB 100%);
}
.section--texture{
  background:
    linear-gradient(180deg, rgba(245,246,245,.95) 0%, rgba(234,238,240,.93) 100%),
    url("../img/bg-tech.jpg") center / cover no-repeat;
  /* same photo as the hero, so it is already in cache — but as WebP, not the
     216 KB JPEG the whole page used to pull in because of this one rule */
  background-image:
    linear-gradient(180deg, rgba(245,246,245,.95) 0%, rgba(234,238,240,.93) 100%),
    image-set(url("../img/bg-tech.webp") type("image/webp"),
              url("../img/bg-tech.jpg") type("image/jpeg"));
}
/* The photo can show through by a few percent, so the smallest text in this
   section drops a step darker to stay above 4.5:1 in the worst-case patch. */
.section--texture .eyebrow,
.section--texture .flow__tag{ color:var(--body); }

.eyebrow{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  display:block;
  width:36px; height:2px;
  background:var(--sand);
  margin-bottom:12px;
}
.section--dark .eyebrow{ color:var(--on-dark-muted-2); }

.h2{
  font-weight:600;
  text-transform:uppercase;
  font-size:38px;
  line-height:1.1;
}
.h3{
  font-weight:600;
  text-transform:uppercase;
  font-size:34px;
  line-height:1.1;
}

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

.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--page);
  padding-bottom:40px;
}
/* The photo lives on its own layer so it can drift without moving the text.
   Only transform is animated — it runs on the compositor, costs no layout
   and no repaint, and adds nothing to the page weight. The 3% bleed keeps
   the edges outside the frame at the end of the travel. */
.hero::before{
  content:"";
  position:absolute; inset:-3%;
  /* WebP with a JPEG fallback: 48 KB against 216 KB, same crop. The phone gets
     its own 900px file (16 KB) — see the media query below. */
  background:url("../img/bg-tech.jpg") center top / cover no-repeat;
  background-image:image-set(url("../img/bg-tech.webp") type("image/webp"),
                             url("../img/bg-tech.jpg") type("image/jpeg"));
  animation:hero-drift 18s ease-in-out infinite alternate;
  z-index:-2;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(236,239,240,.55) 0%, rgba(214,220,223,.55) 55%, rgba(196,204,208,.6) 100%);
  z-index:-1; pointer-events:none;
}
@keyframes hero-drift{
  from{ transform:scale(1.02) translate3d(1%,.7%,0); }
  to{   transform:scale(1.12) translate3d(-1.8%,-1.3%,0); }
}

.topbar{
  display:flex;
  align-items:center;
  gap:22px;
  padding:20px 0;
}
.wrap--topbar{ padding-inline:40px; }

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.brand__mark{
  width:34px; height:34px;
  border:2px solid var(--body);
  display:block; flex:none;
}
.brand__name{
  font-weight:700; font-size:17px; line-height:1.05;
  letter-spacing:.02em; text-transform:uppercase; color:var(--ink);
  display:block;
}
.brand__role{
  font-weight:400; letter-spacing:.14em; font-size:12px;
  color:var(--body); display:block;
}

.nav{
  display:flex; align-items:center; gap:22px;
  font-size:14px; white-space:nowrap;
}
.nav__link{ text-decoration:none; color:#3D4547; }

/* Services opens two addresses instead of jumping to one of them. The panel is
   pinned to the right edge of the header row, where the page has free margin —
   left-aligned it landed straight on the H1 underneath. <details> does the
   opening, the keyboard and the closing; the script only adds Escape and
   click-outside. */
.topbar{ position:relative; }
.nav__group{ position:static; }
.nav__summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:7px; }
.nav__summary::-webkit-details-marker{ display:none; }
.nav__summary::before{
  content:""; order:2;
  width:9px; height:9px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 3.5l5 5 5-5' fill='none' stroke='%233D4547' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform .2s ease;
}
.nav__group[open] .nav__summary::before{ transform:rotate(180deg); }
.nav__summary:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.nav__menu{
  position:absolute; top:calc(100% - 2px); right:0; z-index:70;
  width:262px;
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-top:2px solid var(--sand);
  box-shadow:0 18px 40px -26px rgba(35,40,42,.5);
}
.nav__group[open] .nav__menu{ animation:menu-in .16s ease-out; }
@keyframes menu-in{
  from{ opacity:0; transform:translateY(-5px); }
  to{ opacity:1; transform:none; }
}
.nav__menu li + li{ border-top:1px solid var(--line); }
.nav__menu a{
  display:block; padding:12px 16px;
  font-size:14px; line-height:1.35; color:var(--ink); text-decoration:none;
  transition:background-color .18s ease, box-shadow .18s ease;
}
.nav__menu a:hover{ background:var(--paper-2); box-shadow:inset 3px 0 0 var(--sand); }

.lang{
  display:inline-flex; align-items:stretch; flex:none;
  border:1px solid var(--line-strong);
  border-radius:999px; overflow:hidden;
  margin-left:8px;
}
.lang__opt{
  padding:5px 12px; font:400 12px/1.6 var(--font);
  letter-spacing:.06em; text-decoration:none;
  /* over the hero photo --muted measured 3.95:1 — below AA for this size */
  color:var(--body-alt); background:transparent;
}
.lang__opt:hover{ color:var(--ink); }
.lang__opt[aria-current="true"]{
  background:var(--sand); color:var(--ink); font-weight:500;
}

.btn{
  display:inline-block;
  font-size:14px; text-decoration:none;
  padding:9px 18px; border-radius:999px;
  border:1px solid rgba(35,40,42,.35);
  background:rgba(248,249,249,.75);
  color:var(--ink); white-space:nowrap;
  transition:background-color .15s ease, color .15s ease;
}
.btn:hover{ background:var(--ink); color:var(--paper); }

.btn--cta{
  background:var(--sand); color:var(--ink);
  font-size:15px; letter-spacing:.12em; text-transform:uppercase;
  padding:16px 34px; border:none;
}
.btn--cta:hover{ background:var(--ink); color:var(--paper); }

.burger{
  display:none;
  background:rgba(248,249,249,.75);
  border:1px solid rgba(35,40,42,.35);
  border-radius:999px;
  padding:9px 14px; font:500 14px var(--font);
  color:var(--ink); cursor:pointer;
}

.hero__head{
  position:relative;
  /* 118 instead of 70: the services panel drops 95px below the header row, and
     the headline has to start under it — at 1100px it used to clip the end of
     the first line. */
  padding:118px 120px 56px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
/* A feathered scrim instead of a plate behind the lede: it lifts the text off
   the photo for contrast without drawing a rectangle around it. */
.hero__head::before{
  content:"";
  position:absolute; inset:-10px -56px -10px;
  background:radial-gradient(68% 74% at 50% 46%,
    rgba(243,245,245,.92) 0%,
    rgba(243,245,245,.74) 46%,
    rgba(243,245,245,0) 76%);
  pointer-events:none;
}
.hero__head > *{ position:relative; }
/* Scale from the handoff §4.6 (h1 row): 48/34, no caps — the old 56px uppercase
   ran to four lines and read as a slogan, not as the visitor's own problem. */
.hero__title{
  font-weight:600; text-transform:none;
  font-size:48px; line-height:1.06; letter-spacing:-.02em;
  max-width:17ch; color:var(--heading);
}
.hero__lede{
  font-size:17px; line-height:1.55; color:var(--body-alt);
  max-width:62ch;
}

/* Positioning line (SITE-9) — replaces the old .hero__note footnote: it carries
   the offer, so it sits at lede weight, not at fine-print size. */
.hero__positioning{
  font-size:17px; font-weight:500; line-height:1.45;
  letter-spacing:.02em; color:var(--ink);
  margin-top:-8px;
}

.hero__grid{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:32px;
  align-items:start;
  padding-top:16px;
}
/* "column caption" row of §4.6 — the colour stays --ink, not --muted: these sit
   on the photo under the weak .hero::after wash (measured 3.95–4.27:1). */
.hero__col-title{
  font-size:16px; line-height:1.3; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink); margin-bottom:14px;
}

.tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tile{
  background:var(--ink-soft);
  padding:18px 18px 20px;
  display:flex; flex-direction:column; gap:26px;
  min-height:108px;
}
.tile__icon{
  width:38px; height:38px; border-radius:50%;
  background:var(--sand); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.tile__icon svg{ width:20px; height:20px; }
.tile__label{ font-size:15px; line-height:1.3; color:#EDEFEF; }

.stack{ display:flex; flex-direction:column; gap:8px; }
.plate{
  background:rgba(246,245,241,.86);
  border-left:3px solid var(--sand);
  padding:14px 20px;
  display:grid; grid-template-columns:56px 1fr; gap:14px;
  align-items:center;
}
.plate__n{ font-weight:400; font-size:30px; color:#3B4245; line-height:1; }
.plate__v{ font-size:15px; line-height:1.35; color:var(--ink); }

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

.split{
  background:linear-gradient(180deg, #F0F2F3 0%, #E5E9EB 100%);
  border-top:1px solid var(--line);
  overflow-x:clip;          /* the artwork below bleeds past the 1280px container */
}
.split__inner{
  max-width:var(--wrap);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1.05fr .95fr;
}
.split__left{ padding:52px 56px; }
.split__right{
  display:flex;            /* the artwork fills this half edge to edge */
  /* past 1280px the container stops but the artwork keeps going to the
     viewport edge; below 1280px the term is positive, so min() zeroes it */
  margin-right:min(0px, calc((var(--wrap) - 100vw) / 2));
}
.split__art{
  width:100%; height:100%;
  object-fit:cover; object-position:42% 50%;
  /* multiply sinks the artwork's near-white plate into the section gradient;
     the left edge fades so it meets the steps column without a seam */
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 15%);
          mask-image:linear-gradient(to right, transparent 0, #000 15%);
}
/* ------------------------------- sticky ---------------------------------- */
/* A compact bar that slides down once the hero is behind you: the brand, the
   sections and the call to action stay within reach without the header taking
   space on the first screen. Hidden with visibility, so it is out of the
   accessibility tree while off-screen. */

.sticky{
  position:fixed; top:0; left:0; right:0; z-index:60;
  background:rgba(244,244,241,.985);
  border-bottom:1px solid var(--line);
  transform:translateY(-100%); visibility:hidden;
  transition:transform .32s cubic-bezier(.22,.61,.36,1), visibility .32s;
}
.sticky--on{ transform:none; visibility:visible; }
/* Zero-height marker at the end of the first screen: once it scrolls out of
   sight the compact bar comes down. Tied to content rather than to a pixel
   count, so it behaves the same on a phone where the hero is far taller. */
.sticky-sentinel{ display:block; width:100%; height:1px; }
.sticky__inner{
  max-width:var(--wrap); margin-inline:auto;
  display:flex; align-items:center; gap:26px;
  padding:9px 40px;
}
.sticky__brand{
  font-weight:700; font-size:15px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; flex:none;
}
.sticky__nav{ display:flex; gap:22px; margin-right:auto; font-size:14px; }
.sticky__nav a{ position:relative; color:#3D4547; text-decoration:none; }
.sticky__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.sticky__nav a:hover::after,
.sticky__nav a[aria-current="true"]::after{ transform:scaleX(1); }
.sticky__nav a[aria-current="true"]{ color:var(--ink); }
.sticky__cta{ padding:9px 20px; font-size:13px; letter-spacing:.1em; flex:none; }

/* ------------------------------- motion ---------------------------------- */
/* Blocks arrive as they enter the viewport. Everything here is guarded by .js:
   with scripting off the page renders complete and static. Only opacity and
   transform animate — compositor work, no layout, no extra bytes. The hero is
   deliberately excluded: the first screen must be there instantly. */

.js .reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* Hover affordances, only on things that are actually clickable. */
.nav__link{ position:relative; }
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link[aria-current="true"]::after{ transform:scaleX(1); }
.nav__link[aria-current="true"]{ border-bottom:none; padding-bottom:0; }

.contacts__v{ transition:color .2s ease, transform .2s ease; }
.contacts__v:hover{ transform:translateX(2px); }

.faq__item > summary{ transition:color .2s ease; }
.faq__item > summary:hover{ color:var(--steel); }
.faq__item > summary::after{ transition:transform .25s ease; }

.team__more > summary{ transition:border-color .2s ease; }
.team__more > summary:hover{ border-color:var(--on-dark); }

/* The main call to action: the fill sweeps in rather than switching. */
.btn--cta{
  background-image:linear-gradient(var(--ink), var(--ink));
  background-repeat:no-repeat; background-size:0% 100%; background-position:left center;
  transition:background-size .32s cubic-bezier(.22,.61,.36,1), color .2s ease .06s;
}
.btn--cta:hover{ background-size:100% 100%; color:var(--paper); }

.steps{ display:flex; flex-direction:column; }
.steps li{
  display:grid; grid-template-columns:42px 1fr; gap:20px;
  padding:18px 0;
  border-top:1px solid var(--line);
}
.steps__n{ font-size:24px; color:var(--steel); }
.steps__title{ font-size:17px; font-weight:500; margin-bottom:6px; }
.steps__body{ font-size:15px; line-height:1.5; color:var(--body); }

/* ---------------------------------- who ----------------------------------- */

.who__title{ margin-bottom:32px; }
.who__grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 56px; }
.who__grid li{
  font-size:16px; line-height:1.55; color:var(--body);
  padding-top:14px; border-top:1px solid var(--line);
}

/* --------------------------------- packs ---------------------------------- */

.packs{ border-top:1px solid var(--line); }
.packs__inner{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; grid-template-columns:1fr 1fr;
}
.pack{ padding:52px 56px; }
.pack + .pack{ border-left:1px solid var(--line); }
.pack__name{ margin-bottom:10px; }
.pack__price{ font-size:17px; line-height:1.5; color:var(--steel); max-width:38ch; margin-bottom:28px; }
.pack__inc{ display:flex; flex-direction:column; gap:10px; }
.pack__inc li{
  font-size:15px; line-height:1.5; color:var(--body);
  display:grid; grid-template-columns:18px 1fr; gap:8px;
}
.pack__inc li::before{ content:"·"; color:var(--steel); }

/* ------------------------------- icon frame -------------------------------- */
/* 32px frame from the component system (handoff-agencia-home.md §4.2), first
   used by the team phases. The svg stays 19px in every variant. */

.icon-frame{
  flex:0 0 32px; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
}
.icon-frame svg{ width:19px; height:19px; }
.icon-frame--dark{
  background:transparent;
  border:1px solid var(--line-dark);
  color:var(--sand);
}

/* ---------------------------------- team ---------------------------------- */

.team__title{ max-width:22ch; margin-bottom:18px; color:var(--on-dark); }
.team__intro{
  font-size:17px; line-height:1.6; color:#C9CFD1;
  max-width:72ch; margin-bottom:40px;
}
/* The sixteen areas are grouped into the four phases of a real project
   (docs/ux/site-15-orden-fases.md): six rows stay open, the rest fold away
   in their real position inside each phase. */
.team__phases{ margin-bottom:40px; }
.team__phase + .team__phase{ margin-top:32px; }
/* "column caption" row of the type scale, same job as .hero__col-title —
   --on-dark-muted on solid --ink measures 7.2:1, no exception needed here. */
.team__phase-title{
  font-size:16px; line-height:1.3; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--on-dark-muted);
  margin-bottom:14px;
}
.team__roles{
  display:grid; grid-template-columns:1fr 1fr; gap:0 56px;
  margin-bottom:40px;
}
.team__phases .team__roles{ margin-bottom:0; }
.team__roles > div{
  display:grid; grid-template-columns:32px 1fr;
  column-gap:14px; row-gap:2px; align-items:start;
  padding:12px 0; border-top:1px solid var(--line-dark);
}
.team__roles > div > .icon-frame{ grid-row:1 / span 2; }
.team__role-k,
.team__role-v{ grid-column:2; }
/* Same sand rule as .plate in the hero — no new thickness. Marks the five roles
   whose boundary is explicit; the negative margin cancels the 3+12px shift so
   the icons stay on one line with the unmarked rows. */
/* selector kept at .team__roles > … so the 12px padding wins over the row
   shorthand `padding:12px 0` (and its 10px mobile twin), which would otherwise
   reset padding-left and leave the marked rows hanging 15px to the left */
.team__roles > .team__role--marker{
  border-left:3px solid var(--sand);
  padding-left:12px;
  margin-left:-15px;
}
/* Ten of the sixteen areas fold away: the list is proof, not reading matter. */
.team__more{ margin:14px 0; }
.team__more > summary{
  display:inline-block; cursor:pointer; list-style:none;
  font-size:15px; color:var(--on-dark);
  border-bottom:2px solid var(--sand); padding-bottom:4px;
}
.team__more > summary::-webkit-details-marker{ display:none; }
.team__more > summary:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }
.team__more[open] > summary{ margin-bottom:20px; }
.team__more .team__roles{ margin-bottom:0; }
.team__role-k{ font-size:15px; font-weight:500; color:var(--on-dark); }
.team__role-v{ font-size:15px; line-height:1.45; color:var(--on-dark-muted); }
.team__benefits{
  display:grid; grid-template-columns:repeat(5,1fr); gap:28px;
  margin-bottom:32px;
}
.team__benefits > li{ border-top:2px solid var(--sand); padding-top:14px; }
.team__benefit-k{ font-size:16px; font-weight:500; margin-bottom:8px; color:var(--on-dark); }
.team__benefit-v{ font-size:14px; line-height:1.5; color:var(--on-dark-muted); }
.team__boundaries{ font-size:15px; line-height:1.6; color:var(--on-dark-muted-2); max-width:86ch; }

/* ---------------------------------- n8n ----------------------------------- */

.n8n__title{ max-width:24ch; margin-bottom:18px; }
.n8n__intro{ font-size:17px; line-height:1.6; color:var(--body); max-width:76ch; margin-bottom:40px; }
.n8n__steps-title{
  font-weight:600; text-transform:uppercase; font-size:20px; line-height:1.15;
  margin-bottom:18px;
}
.n8n__steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:24px;
  margin-bottom:44px;
}
.n8n__step-n{ font-weight:600; font-size:24px; color:var(--steel); margin-bottom:8px; }
.n8n__step-v{ font-size:14px; line-height:1.5; color:var(--body); }

/* ---------------------------------- flow ---------------------------------- */
/* The routine-automation infographic, rebuilt in the page's own tokens:
   same five stages and the same wording as the source artwork, restyled —
   line icons, sand accents, connecting chevrons, and little screens that are
   real text rather than a flat picture. */

.flow{ margin-bottom:44px; }

.flow__intro{
  border-top:2px solid var(--sand); padding-top:24px;
  margin-bottom:32px;
}
.flow__title{ font-weight:600; text-transform:uppercase; font-size:26px; line-height:1.12; margin-bottom:10px; }
.flow__sub{ font-size:16px; line-height:1.6; color:var(--body); max-width:56ch; margin-bottom:16px; }

/* --- the five stages ------------------------------------------------------- */

.flow__case{ font-size:14px; line-height:1.55; color:var(--muted-dark); margin-bottom:22px; }
.flow__steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:28px 24px;
  margin-bottom:32px;
}
.flow__step{
  position:relative;
  display:flex; flex-direction:column;
  border-top:1px solid rgba(35,40,42,.16); padding-top:14px;
}
/* chevron sitting in the gutter, so the five stages read as one chain */
.flow__step:not(:last-child)::after{
  content:"";
  position:absolute; top:20px; right:-17px;
  width:11px; height:11px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1l5 5-5 5' fill='none' stroke='%2355636B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.flow__head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.flow__n{
  width:26px; height:26px; flex:none;
  display:grid; place-items:center;
  background:var(--ink); color:var(--on-dark);
  font-size:13px; font-weight:600;
}
.flow__ico{
  width:34px; height:34px; flex:none;
  display:grid; place-items:center;
  background:var(--sand-2); border:1px solid var(--sand);
  color:var(--ink);
}
.flow__ico svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
/* Two lines reserved so the five screens start on the same baseline. */
.flow__k{ font-size:16px; font-weight:500; line-height:1.3; min-height:2.6em; margin-bottom:12px; }
.flow__v{ font-size:14px; line-height:1.55; color:var(--body); margin-bottom:12px; }
.flow__tag{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-dark);
  border-top:2px solid var(--sand); padding-top:8px;
  margin-top:auto;   /* the sand rules line up along the bottom of the row */
}

/* --- the little screens ---------------------------------------------------- */

.mock{
  background:var(--paper);
  border:1px solid var(--line-strong);
  padding:12px;
  margin-bottom:14px;
}
.mock__head{ font-size:12px; font-weight:500; margin-bottom:10px; }
.mock__tabs{ display:flex; gap:6px; margin-bottom:10px; }
.mock__tab{ font-size:11px; padding:3px 8px; border:1px solid var(--line-strong); color:var(--body); }
.mock__tab--on{ background:var(--ink); border-color:var(--ink); color:var(--on-dark); }
.mock__chips{ display:flex; gap:6px; margin-bottom:12px; }
.mock__chip{ font-size:11px; padding:4px 7px; border:1px solid var(--line-strong); color:var(--body); }
.mock__chip--on{ background:var(--sand); border-color:var(--sand); color:var(--ink); font-weight:500; }
.mock__btn{ display:block; text-align:center; background:var(--ink); color:var(--on-dark); font-size:12px; padding:7px 10px; }

.mock__rows{ display:grid; gap:6px; }
.mock__row{
  display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center;
  border:1px solid var(--line); padding:5px 8px;
  font-size:12px; color:var(--body);
}
.mock__row--done{ border-color:var(--line-strong); }
.mock__row--next{ background:var(--sand-2); border-color:var(--sand); }
.mock__time{ font-weight:500; color:var(--ink); }
.mock__ok{ width:13px; height:13px; color:var(--steel); }
.mock__ok svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.mock__badge{
  margin-top:8px; display:inline-flex; align-items:center; gap:6px;
  background:var(--sand); color:var(--ink); font-size:11px; padding:4px 8px;
}
.mock__badge svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.mock__line{ display:flex; gap:8px; align-items:flex-start; margin-bottom:8px; }
.mock__line--client{ flex-direction:row-reverse; margin-bottom:0; }
.mock__avatar{
  width:22px; height:22px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line-strong); color:var(--steel); background:var(--paper-2);
}
.mock__avatar--client{ background:var(--sand); border-color:var(--sand); color:var(--ink); }
.mock__avatar svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.mock__bubble{ font-size:12px; line-height:1.45; padding:8px 10px; border:1px solid var(--line-strong); color:var(--body); }
.mock__bubble--client{ background:var(--sand); border-color:var(--sand); color:var(--ink); }

.mock__checks{ display:grid; gap:7px; }
.mock__checks li{
  font-size:12px; line-height:1.35; color:var(--body);
  padding-left:20px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%2355636B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left 1px top 1px / 13px 13px no-repeat;
}
.mock__checks--loose{ margin-bottom:14px; }
.mock__chart{ display:block; width:100%; height:auto; margin-bottom:10px; }
.mock__chart .bar{ fill:rgba(35,40,42,.16); }
.mock__chart .bar--on{ fill:var(--sand); }
.mock__chart .trend{ fill:none; stroke:var(--steel); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mock__chart .axis{ fill:none; stroke:rgba(35,40,42,.30); stroke-width:1.5; }

/* --- band, gains, close ---------------------------------------------------- */


.flow__gains-title{ font-weight:600; text-transform:uppercase; font-size:20px; line-height:1.15; margin-bottom:8px; }
.flow__gains-lede{ font-size:15px; line-height:1.6; color:var(--body); max-width:70ch; margin-bottom:24px; }
.flow__gains{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px 40px; margin-bottom:32px; }
.flow__gains > li{ border-top:2px solid var(--sand); padding-top:14px; }
.flow__gain-ico{
  width:36px; height:36px; margin-bottom:10px;
  display:grid; place-items:center;
  border:1px solid var(--line-strong); color:var(--steel);
}
.flow__gain-ico svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.flow__gain-k{ font-size:15px; font-weight:500; margin-bottom:6px; }
.flow__gain-v{ font-size:14px; line-height:1.5; color:var(--body); }

.flow__close{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px;
  border-top:1px solid var(--line-strong); padding-top:20px;
}
.flow__close-k{ font-size:17px; font-weight:500; flex:1 1 320px; }
.flow__close-v{ font-size:14px; line-height:1.5; color:var(--muted-dark); flex:1 1 220px; }
.flow__close .btn__arrow{ margin-left:8px; }



/* ---------------------------------- lead ---------------------------------- */
/* Request form in the footer — replaces the "coming soon" assistant mock-up.
   Field metrics come from docs/design/review-2026-09-21.md, P0-2. */

.lead{
  background:var(--sand-2);
  border:1px solid rgba(35,40,42,.16);
  padding:28px;
}
.lead__title{ font-weight:600; text-transform:uppercase; font-size:26px; line-height:1.15; margin-bottom:10px; }
.lead__lede{ font-size:15px; line-height:1.55; color:var(--muted-dark); margin-bottom:22px; }
.lead__form{ display:grid; gap:16px; }

.field{ display:grid; gap:6px; }
.field__k{ font-size:13px; font-weight:500; color:var(--ink); }
.field__i{
  height:48px; width:100%;
  padding:0 14px;
  font:400 15px/1.4 var(--font); color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line-strong); border-radius:0;
}
.field__i::placeholder{ color:var(--muted); }
.field__i:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.field__i:user-invalid{ border-color:#8C3B33; }
.field__h{ font-size:13px; line-height:1.4; color:var(--muted-dark); }

.field--check{ grid-template-columns:auto 1fr; gap:10px; align-items:start; margin-top:2px; }
.field__c{ width:20px; height:20px; margin:2px 0 0; accent-color:var(--ink); }
.field__c:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.field__ck{ font-size:14px; line-height:1.45; color:var(--muted-dark); }
.field__ck a{ color:var(--ink); }

/* Honeypot: off-screen rather than display:none, so bots still fill it in. */
.field--trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.lead__send{ justify-self:start; margin-top:4px; }
.lead__note{ font-size:13px; line-height:1.5; color:var(--muted-dark); }

/* ---------------------------------- faq ----------------------------------- */

.faq__title{ margin-bottom:32px; }
.faq__grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 56px; }
/* Questions carry the section; answers open on demand. */
.faq__item{ border-top:1px solid var(--line); }
.faq__item > summary{
  cursor:pointer; list-style:none;
  padding:16px 28px 16px 0; position:relative;
}
.faq__item > summary::-webkit-details-marker{ display:none; }
.faq__item > summary::after{
  content:""; position:absolute; right:4px; top:22px;
  width:11px; height:11px;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 3.5l5 5 5-5' fill='none' stroke='%2355636B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq__item[open] > summary::after{ transform:rotate(180deg); }
.faq__item > summary:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.faq__q{ font-size:17px; font-weight:500; display:inline; }
.faq__item .faq__a{ padding:0 28px 18px 0; }
.faq__a{ font-size:15px; line-height:1.6; color:var(--muted); }

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

.footer{ background:var(--sand); color:var(--ink); }
.footer__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:56px 48px 32px;
  display:grid; grid-template-columns:1.7fr 1fr; gap:56px;
  align-items:start;
}
.footer__label{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted-dark); margin-bottom:14px;
}
.footer__headline{
  font-weight:600; font-size:32px; line-height:1.2;
  max-width:24ch; margin-bottom:28px;
}
.contacts{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.contacts > li{ border-top:1px solid rgba(35,40,42,.2); padding-top:14px; }
.contacts__k{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted-dark); margin-bottom:10px;
}
.contacts__v{
  font-weight:600; font-size:20px; white-space:nowrap;
  color:var(--ink); text-decoration:none; line-height:1.2;
  display:block; margin-bottom:8px;
}
.contacts__v:hover{ color:var(--steel); }
.contacts__note{ font-size:14px; line-height:1.45; color:var(--muted-dark); }
.footer__cities{
  font-size:15px; line-height:1.55; color:var(--muted-dark);
  margin-top:32px; max-width:52ch;
}


/* ------------------------------- bottom bar ------------------------------- */

.bottombar{ background:var(--ink); }
.bottombar__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:16px 48px;
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.bottombar__contacts{ display:flex; gap:28px; flex-wrap:wrap; align-items:center; }
.bottombar__contacts a{ font-size:13px; color:var(--on-dark-2); text-decoration:none; }
.bottombar__contacts a:hover{ color:var(--sand); }
.bottombar__legal{ display:flex; gap:24px; flex-wrap:wrap; }
.bottombar__legal a{ font-size:13px; color:var(--on-dark-muted); text-decoration:none; }
.bottombar__legal a:hover{ color:var(--sand); }
.bottombar__rights{ font-size:13px; color:var(--on-dark-muted-3); }

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

@media (max-width:1199px){
  /* No intermediate H1 step here: §4.6 has two breakpoints only (48 → 34). */
  .hero__head{ padding:104px 56px 48px; }   /* same reason as at full width: the panel needs room */
  .team__benefits{ grid-template-columns:repeat(3,1fr); }
  .n8n__steps{ grid-template-columns:repeat(3,1fr); }
  .flow__steps{ grid-template-columns:repeat(3,1fr); }
  .flow__step:nth-child(3n)::after{ display:none; }
  .flow__gains{ grid-template-columns:1fr 1fr; }
}

@media (max-width:899px){
  .wrap, .wrap--topbar{ padding-inline:20px; }
  .sticky__inner{ padding:8px 20px; gap:14px; }
  .sticky__nav{ display:none; }
  .sticky__brand{ margin-right:auto; }
  .section{ padding-block:40px; }

  /* On a phone the wash (.88–.92 on .hero::after below) hides the photo entirely,
     so the ~16 KB image and its preload are dropped here instead of being animated:
     the hero falls back to --page plus that same gradient. (SITE-17, P2-18) */
  .hero::before{ display:none; }
  /* the texture block was still pulling the 48 KB desktop file on a phone */
  .section--texture{
    background-image:
      linear-gradient(180deg, rgba(245,246,245,.95) 0%, rgba(234,238,240,.93) 100%),
      image-set(url("../img/bg-tech-m.webp") type("image/webp"),
                url("../img/bg-tech.jpg") type("image/jpeg"));
  }
  .hero::after{
    background:linear-gradient(180deg, rgba(240,242,242,.88) 0%, rgba(219,224,226,.9) 60%, rgba(203,210,213,.92) 100%);
  }
  .hero__head{ padding:40px 0 36px; }  /* phone: the list opens in flow, no panel to clear */
  .hero__title{ font-size:34px; max-width:none; }
  .hero__lede{ font-size:16px; }
  /* the mobile hero already washes the photo to .88–.92, so the scrim only
     needs to close the gap at the edges */
  .hero__head::before{ inset:-16px -20px; background:radial-gradient(86% 70% at 50% 44%,
    rgba(243,245,245,.9) 0%, rgba(243,245,245,.7) 52%, rgba(243,245,245,0) 82%); }

  .topbar{ flex-wrap:wrap; gap:12px; }
  .burger{ display:none; }
  .js .burger{ display:inline-block; }
  /* On a phone the nav is a stack, so the list opens in flow instead of
     floating over the page. */
  /* On a phone the nav is a stack: the list opens in flow, no floating panel. */
  .nav__menu{
    position:static; width:auto;
    border:none; border-left:2px solid var(--sand);
    background:transparent; box-shadow:none;
    margin:8px 0 4px; padding:0 0 0 14px;
  }
  .nav__menu li + li{ border-top:none; }
  .nav__menu a{ padding:9px 0; }
  .nav__menu a:hover{ background:transparent; box-shadow:none; }

  .js .nav{
    display:none;
    order:5; width:100%;
    flex-direction:column; align-items:flex-start; gap:14px;
    white-space:normal;
    padding-top:6px;
  }
  .js .nav--open{ display:flex; }
  .nav{ flex-wrap:wrap; gap:14px; }

  .hero__grid{ grid-template-columns:1fr; }
  .stack{ padding-top:0; }

  .split__inner{ grid-template-columns:1fr; }
  .split__left{ padding:40px 20px 24px; }
  .split__right{ padding:0; }
  .split__art{
    aspect-ratio:1.45; height:auto;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 12%);
            mask-image:linear-gradient(to bottom, transparent 0, #000 12%);
  }

  .who__grid,
  .faq__grid{ grid-template-columns:1fr; gap:20px; }

  .packs__inner{ grid-template-columns:1fr; }
  .pack{ padding:40px 20px; }
  .pack + .pack{ border-left:none; border-top:1px solid var(--line); }

  /* Mobile height budget, recalculated in handoff-site-15-fases.md
     ("Update — mobile бюджет пересчитан"): the first pass measured ~1000px at
     375px with every <details> closed, because five closed <summary> boxes and
     two four-line rows were missing from the estimate. Only spacing and
     line-height are compressed here — type scale, touch targets, row order and
     the six open rows stay exactly as specified. */
  .team__phase + .team__phase{ margin-top:16px; }
  .team__phase-title{ margin-bottom:10px; }
  .team__roles{ grid-template-columns:1fr; gap:0; }
  .team__roles > div{
    grid-template-columns:32px 1fr;
    column-gap:10px; row-gap:2px;
    padding:8px 0;
  }
  .team__role-k{ line-height:1.2; }
  .team__role-v{ line-height:1.35; }
  .team__more{ margin:8px 0; }
  .team__more > summary{ line-height:1.2; }
  .team__benefits{ grid-template-columns:1fr; gap:20px; }

  .n8n__steps{ grid-template-columns:1fr; gap:18px; }

  .flow__steps{ grid-template-columns:1fr; gap:22px; }
  .flow__step::after{ display:none; }
  .flow__k{ min-height:0; }
  .mock{ max-width:340px; }
  .flow__title{ font-size:21px; }
  .flow__gains-title{ font-size:18px; }
  .flow__gains{ grid-template-columns:1fr; gap:18px; }
  .flow__gains{ grid-template-columns:1fr; gap:18px; }
  .flow__title{ font-size:18px; }

  .h2{ font-size:28px; }
  .h3{ font-size:26px; }

  .footer__inner{ grid-template-columns:1fr; gap:32px; padding:40px 20px 28px; }
  .contacts{ grid-template-columns:1fr; }
  .contacts__v{ white-space:normal; }

  .bottombar__inner{ flex-direction:column; align-items:flex-start; gap:12px; padding:16px 20px; }
}

@media (max-width:479px){
  .tiles{ grid-template-columns:1fr 1fr; }
  .plate{ grid-template-columns:40px 1fr; gap:10px; }
  .plate__n{ font-size:24px; }
}

/* On touch the small links get a 44px-tall hit area via padding, pulled back
   with a matching negative margin so nothing shifts. Pointer devices keep the
   current spacing — there every target already clears the 24px WCAG 2.2 AA
   minimum, and 44 is our own stricter house rule for fingers. */
@media (pointer:coarse){
  .nav__link,
  .nav__summary,
  .sticky__nav a,
  .bottombar a,
  .team__more > summary{ padding-block:12px; margin-block:-12px; }
  .sticky__brand{ padding-block:11px; margin-block:-11px; }
  /* measured after the first pass: burger 38, language 37.2 — both short of the
     44px house rule, so they get explicit heights */
  .lang__opt{ display:inline-flex; align-items:center; min-height:44px; padding-block:0; }
  .burger{ min-height:44px; padding-block:0; }
  .contacts__v{ padding-block:6px; margin-block:-6px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
  /* stopped outright, not sped up to a flicker */
  .hero::before{ animation:none !important; transform:none !important; }
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

@media print{
  .hero{ background:none; }
  .hero::before,
  .hero::after{ display:none; }
  .burger{ display:none; }
}