@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;src:url("./fonts/literata-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;src:url("./fonts/literata-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:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url("./fonts/onest-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url("./fonts/onest-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}

:root{
  color-scheme:light;
  --paper:#f2efe6;
  --ink:#181817;
  --muted:#5e5c57;
  --line:#c8c2b5;
  --line-soft:#ddd7ca;
  --blue:#2f5bea;
  --max:1440px;
  --gutter:max(24px,calc((100vw - 1280px)/2));
  --sans:"Onest",Arial,sans-serif;
  --serif:"Literata",Georgia,serif;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}

*{box-sizing:border-box}

section[id]{scroll-margin-top:84px}
html,body{min-width:320px;margin:0;overflow-x:clip}
body{position:relative;background:var(--paper);line-height:1.5}
a{color:inherit}
p,h1,h2,h3,ol{margin-top:0}
button{font:inherit}

.page-grid{
  display:grid;
  width:min(100%,var(--max));
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:24px;
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.eyebrow{margin:0;color:var(--muted);font-size:.7rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase}
.brand{font-weight:750;letter-spacing:-.035em;text-decoration:none}

.skip-link{position:fixed;top:8px;left:8px;z-index:100;padding:10px 14px;transform:translateY(-180%);background:var(--blue);color:#fff;font-weight:750}
.skip-link:focus{transform:translateY(0)}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}

/* ==========================================================
   GENERATIVE TOPOGRAPHY + MAGIC LENS
   Ambient существует постоянно. Detail и единая синяя линия находятся
   только в reveal-atlas, поэтому физически не могут быть видимы вне лупы.
   ========================================================== */
@property --lens-radius{syntax:"<length>";inherits:false;initial-value:210px}
.route-atlas,.route-atlas-base{
  --lens-x:-500px;
  --lens-y:-500px;
  --lens-radius:clamp(190px,16.5vw,252px);
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  width:100%;
  height:0;
  overflow:visible;
  pointer-events:none;
}
.route-atlas-base{display:block;opacity:1}
.route-atlas{
  display:none;
  opacity:0;
  -webkit-mask-image:radial-gradient(circle var(--lens-radius) at var(--lens-x) var(--lens-y),#000 0%,rgb(0 0 0/.99) 60%,rgb(0 0 0/.82) 78%,transparent 100%);
  mask-image:radial-gradient(circle var(--lens-radius) at var(--lens-x) var(--lens-y),#000 0%,rgb(0 0 0/.99) 60%,rgb(0 0 0/.82) 78%,transparent 100%);
  transition:opacity .16s ease;
  will-change:mask-image,opacity;
}
.route-atlas.is-visible{opacity:var(--atlas-opacity,.94)}
@media(hover:hover) and (pointer:fine){.route-atlas{display:block}}

.route-atlas path,.route-atlas-base path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.ambient-contour{stroke:#8d8f8c;opacity:.075}
.detail-contour{stroke:#8691a7;opacity:.26}
/* Один чистый картографический штрих: без glow/halo, полностью внутри линзы. */
.global-route{stroke:var(--blue);stroke-width:1.72;opacity:.90}

@supports not ((mask-image:radial-gradient(circle,#000,transparent)) or (-webkit-mask-image:radial-gradient(circle,#000,transparent))){
  .route-atlas{clip-path:circle(var(--lens-radius) at var(--lens-x) var(--lens-y));-webkit-mask-image:none;mask-image:none}
}

main,.site-footer{position:relative;z-index:1}

/* ==========================================================
   HEADER
   Непрозрачная поверхность скрывает начало маршрута: линия действительно
   начинается выше первого экрана и визуально выходит из-под шапки.
   ========================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:36px;
  min-height:68px;
  padding:8px var(--gutter);
  border-bottom:1px solid var(--line);
  background:rgb(242 239 230/.985);
  backdrop-filter:blur(10px);
}
.site-header .brand,.site-header nav a,.header-cta{display:inline-flex;min-height:44px;align-items:center}
.site-header nav{display:flex;gap:28px}
.site-header nav a,.header-cta{color:var(--muted);font-size:.82rem;text-decoration:none}
.site-header nav a:hover{color:var(--blue)}
.header-cta{position:relative;gap:8px;color:var(--ink);font-weight:560}
.header-cta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:0 0 auto;transition:transform .22s ease}
.header-cta:hover{color:var(--blue)}
.header-cta:hover::before{transform:scale(1.35)}

/* ==========================================================
   HERO
   ========================================================== */
.hero{position:relative;min-height:calc(100svh - 68px)}
.hero-grid{
  min-height:calc(100svh - 68px);
  grid-template-rows:minmax(48px,.65fr) auto minmax(84px,.55fr);
  align-content:stretch;
  padding-top:clamp(72px,7vw,108px);
  padding-bottom:clamp(88px,8.5vw,138px);
}
.hero-eyebrow{z-index:2;grid-column:3/8;align-self:end;margin-bottom:24px;font-size:.66rem;letter-spacing:.11em}
.hero h1{
  z-index:2;
  grid-column:3/13;
  align-self:center;
  max-width:12.6ch;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(4.45rem,6.85vw,6.95rem);
  font-weight:410;
  letter-spacing:-.052em;
  line-height:.955;
  text-wrap:balance;
}
.hero-copy{
  z-index:2;
  grid-column:8/12;
  align-self:end;
  max-width:430px;
  margin:58px 0 0;
  padding-top:15px;
  border-top:1px solid rgb(94 92 87/.38);
  color:var(--muted);
  font-size:clamp(.98rem,1.15vw,1.08rem);
  line-height:1.5;
}

/* ==========================================================
   COMMON SECTION RHYTHM
   Никаких overlap, отрицательных margin, scroll fade/scale и вуалей.
   ========================================================== */
.experience-section,.task-section,.process-section,.formats-section,.contact-section{position:relative;border-top:1px solid var(--line)}

.experience-grid,.task-grid,.formats-grid{
  align-items:start;
  padding-top:clamp(104px,9vw,148px);
  padding-bottom:clamp(112px,10vw,164px);
}
.experience-section h2,.task-section h2,.formats-section h2{
  grid-column:1/3;
  margin:.25rem 0 0;
  color:var(--muted);
  font-size:.82rem;
  font-weight:620;
  letter-spacing:.01em;
  line-height:1.25;
}

/* WHAT WE CREATE */
.experience-lead{
  grid-column:4/12;
  max-width:12.6ch;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(2.9rem,4.65vw,5rem);
  font-weight:410;
  letter-spacing:-.047em;
  line-height:1.015;
  text-wrap:balance;
}
.experience-copy{
  grid-column:8/12;
  max-width:520px;
  margin:clamp(64px,7vw,98px) 0 0;
  padding-left:22px;
  border-left:1px solid rgb(47 91 234/.52);
  color:var(--muted);
  font-size:clamp(.98rem,1.15vw,1.08rem);
  line-height:1.56;
}

/* TASK */
.task-lead{
  grid-column:4/12;
  max-width:13.3ch;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(2.8rem,4.45vw,4.85rem);
  font-weight:410;
  letter-spacing:-.047em;
  line-height:1.015;
  text-wrap:balance;
}
.task-copy{
  grid-column:4/8;
  max-width:500px;
  margin:clamp(72px,7vw,104px) 0 0;
  color:var(--muted);
  font-size:clamp(.98rem,1.14vw,1.07rem);
  line-height:1.58;
}
.task-result{
  position:relative;
  grid-column:8/12;
  max-width:540px;
  margin:clamp(72px,7vw,104px) 0 0;
  padding:0 0 0 26px;
  font-size:clamp(.98rem,1.14vw,1.07rem);
  line-height:1.58;
}
.task-result::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgb(47 91 234/.07)}
.task-result::after{content:"";position:absolute;left:3px;top:calc(.58em + 11px);width:1px;height:clamp(38px,4vw,56px);background:linear-gradient(to bottom,rgb(47 91 234/.64),rgb(47 91 234/0))}

/* PROCESS — редакционный маршрут без постоянно видимой соединительной линии. */
.process-section>.page-grid{align-content:start;padding-top:clamp(104px,9vw,148px);padding-bottom:clamp(112px,10vw,164px)}
.process-section h2{
  grid-column:1/7;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(3.25rem,5.35vw,6rem);
  font-weight:410;
  letter-spacing:-.055em;
  line-height:.96;
}
.process-list{
  grid-column:1/13;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:minmax(180px,auto) minmax(190px,auto);
  gap:22px 24px;
  min-height:430px;
  margin:clamp(84px,9vw,128px) 0 0;
  padding:30px 0 0;
  border-top:1px solid var(--line);
  list-style:none;
}
.process-list li{position:relative;align-self:start;padding:0 18px 0 0}
.process-list li:nth-child(1){grid-column:1/4;grid-row:1}
.process-list li:nth-child(2){grid-column:3/6;grid-row:2;align-self:end}
.process-list li:nth-child(3){grid-column:6/9;grid-row:1}
.process-list li:nth-child(4){grid-column:8/11;grid-row:2;align-self:end}
.process-list li:nth-child(5){grid-column:10/13;grid-row:1}
.process-list li::before{content:"";display:block;width:7px;height:7px;margin:0 0 18px;border-radius:50%;background:var(--paper);border:1.5px solid var(--blue);box-shadow:0 0 0 5px rgb(47 91 234/.05)}
.process-list span{display:block;margin:0 0 14px;color:var(--blue);font-size:.67rem;font-weight:760;letter-spacing:.04em}
.process-list strong{display:block;max-width:15ch;font-size:clamp(1.12rem,1.45vw,1.34rem);font-weight:610;letter-spacing:-.025em;line-height:1.13}
.process-list p{max-width:27ch;margin:14px 0 0;color:var(--muted);font-size:clamp(.88rem,1vw,.97rem);line-height:1.52}

/* FORMATS */
.formats-intro{
  grid-column:4/12;
  max-width:900px;
  margin:-.12em 0 0;
  font-family:var(--serif);
  font-size:clamp(2.9rem,4.65vw,5.05rem);
  font-weight:410;
  letter-spacing:-.052em;
  line-height:.995;
}
.format-list{
  grid-column:3/13;
  position:relative;
  margin:clamp(76px,8vw,116px) 0 0;
  padding:0;
  border-top:1px solid var(--line);
  list-style:none;
}
.format-list li{
  position:relative;
  display:grid;
  grid-template-columns:54px minmax(220px,1.08fr) minmax(0,1.55fr);
  gap:24px 30px;
  min-height:146px;
  align-items:start;
  padding:29px 0 30px;
  border-bottom:1px solid var(--line);
}
.format-list li::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--blue);opacity:.55;transition:width .42s cubic-bezier(.2,.75,.2,1)}
.format-list li:hover::after{width:18%}
.format-index{padding-top:.38rem;color:var(--blue);font-size:.66rem;font-weight:750;letter-spacing:.04em}
.format-list h3{max-width:11ch;margin:0;font-family:var(--serif);font-size:clamp(2rem,2.8vw,3.1rem);font-weight:430;letter-spacing:-.047em;line-height:.98}
.format-list p{max-width:590px;justify-self:start;margin:0;padding-top:.16rem;color:var(--muted);font-size:clamp(.94rem,1.08vw,1.04rem);line-height:1.57}
.format-list li:nth-child(2) h3{margin-left:clamp(8px,1.2vw,18px)}
.format-list li:nth-child(3) h3{margin-left:clamp(20px,2.25vw,34px)}
.format-list li:nth-child(4) h3{margin-left:clamp(5px,.8vw,13px)}

/* CONTACT */
.contact-section>.page-grid{align-content:center;padding-top:clamp(118px,10vw,164px);padding-bottom:clamp(112px,10vw,156px)}
.contact-section h2{
  grid-column:1/8;
  max-width:8.8ch;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(4rem,6.4vw,7rem);
  font-weight:410;
  letter-spacing:-.058em;
  line-height:.925;
}
.contact-list{grid-column:8/13;align-self:center;display:grid;min-width:0;margin-top:clamp(72px,8vw,118px);border-top:1px solid var(--line);font-style:normal}
.contact-list a{
  position:relative;
  display:grid;
  grid-template-columns:112px minmax(0,1fr) 18px;
  gap:18px;
  min-width:0;
  min-height:88px;
  align-items:center;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-size:clamp(1rem,1.3vw,1.14rem);
  text-decoration:none;
  overflow-wrap:anywhere;
  transition:color .24s ease,padding-left .28s cubic-bezier(.2,.75,.2,1);
}
.contact-list a::after{content:"↗";grid-column:3;grid-row:1;justify-self:end;color:var(--blue);font-size:.95rem;transform:translate3d(-5px,5px,0);opacity:0;transition:opacity .22s ease,transform .28s cubic-bezier(.2,.75,.2,1)}
.contact-list a[href^="tel:"]::after{content:"→"}
.contact-list span{grid-column:1;grid-row:1;margin:0;color:var(--muted);font-size:.65rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.contact-list a:hover{padding-left:8px;color:var(--blue)}
.contact-list a:hover::after{opacity:1;transform:none}

/* FOOTER */
.site-footer{
  display:grid;
  width:min(100%,var(--max));
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  min-height:104px;
  margin-inline:auto;
  padding-inline:var(--gutter);
  border-top:1px solid var(--line);
  background:var(--paper);
  color:var(--muted);
  font-size:.8rem;
}
.site-footer p{margin:0;text-align:center}
.site-footer>a:last-child{justify-self:end;transition:color .2s ease,transform .24s ease}
.site-footer a{display:inline-flex;min-height:44px;align-items:center;text-decoration:none}
.site-footer>a:last-child:hover{color:var(--blue);transform:translateY(-2px)}

/* ==========================================================
   TABLET
   ========================================================== */
@media(max-width:1100px){
  .hero-eyebrow{grid-column:2/8}
  .hero h1{grid-column:2/13;max-width:12.4ch;font-size:clamp(4rem,8.2vw,5.7rem)}
  .hero-copy{grid-column:7/12}
  .experience-section h2,.task-section h2,.formats-section h2{grid-column:1/4}
  .experience-lead,.task-lead,.formats-intro{grid-column:4/13}
  .experience-copy{grid-column:7/12}
  .task-copy{grid-column:4/8}
  .task-result{grid-column:8/13}
  .process-section h2{grid-column:1/8;font-size:clamp(3rem,6.2vw,5rem)}
  .process-list{grid-template-rows:minmax(170px,auto) minmax(180px,auto);min-height:400px}
  .process-list strong{font-size:1.08rem}
  .process-list p{font-size:.86rem}
  .format-list{grid-column:2/13}
  .format-list li{grid-template-columns:46px minmax(190px,.95fr) minmax(0,1.45fr);gap:20px}
  .format-list li:nth-child(n) h3{margin-left:0}
  .contact-section h2{grid-column:1/8;font-size:clamp(3.6rem,7vw,5.8rem)}
  .contact-list{grid-column:8/13}
  .contact-list a{grid-template-columns:88px minmax(0,1fr) 16px;gap:12px;font-size:.95rem}
}

/* ==========================================================
   MOBILE / TOUCH
   Лупу пальцем не имитируем. Ambient остаётся полноценным фоном.
   ========================================================== */
@media(max-width:700px){
  :root{--gutter:20px}
  section[id]{scroll-margin-top:118px}
  .page-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .site-header{grid-template-columns:1fr auto;gap:4px 12px;padding:8px 16px 0;background:rgb(242 239 230/.985);backdrop-filter:none}
  .site-header .brand{font-size:.86rem}
  .site-header nav{order:3;grid-column:1/-1;width:100%;justify-content:space-between;border-top:1px solid var(--line)}
  .site-header nav a{width:50%}
  .site-header nav a:last-child{justify-content:flex-end}
  .header-cta{font-size:.74rem}
  .header-cta::before{width:5px;height:5px}

  .hero,.hero-grid{min-height:calc(100svh - 106px)}
  .hero-grid{grid-template-rows:auto auto 1fr auto;padding-top:52px;padding-bottom:56px}
  .hero-eyebrow,.hero h1,.hero-copy{grid-column:1/-1}
  .hero-eyebrow{grid-row:1;margin:0 0 34px;font-size:.62rem;letter-spacing:.1em}
  .hero h1{grid-row:2;max-width:9.8ch;margin:0;font-size:clamp(2.75rem,12.6vw,3.55rem);letter-spacing:-.052em;line-height:.965}
  .hero-copy{grid-row:4;width:min(86%,360px);margin:48px 0 0 auto;padding-top:13px;font-size:.95rem;line-height:1.48}

  .experience-grid,.task-grid,.formats-grid{padding-top:76px;padding-bottom:92px}
  .experience-section h2,.experience-lead,.experience-copy,.task-section h2,.task-lead,.task-copy,.task-result,.formats-section h2,.formats-intro,.format-list{grid-column:1/-1}
  .experience-section h2,.task-section h2,.formats-section h2{font-size:.78rem}
  .experience-lead{max-width:10.5ch;margin-top:48px;font-size:clamp(2.55rem,11.7vw,3.45rem);letter-spacing:-.045em;line-height:1.015}
  .experience-copy{width:86%;margin:46px 0 0 auto;padding-left:16px;font-size:.98rem}
  .task-lead{max-width:10.6ch;margin-top:48px;font-size:clamp(2.48rem,11.5vw,3.38rem);letter-spacing:-.045em;line-height:1.015}
  .task-copy{width:88%;margin:48px 0 0;font-size:.98rem;line-height:1.55}
  .task-result{width:86%;margin:42px 0 0 auto;padding-left:22px;font-size:.98rem;line-height:1.55}
  .task-result::before{width:6px;height:6px}

  .process-section>.page-grid{padding-top:82px;padding-bottom:92px}
  .process-section h2,.process-list{grid-column:1/-1}
  .process-section h2{font-size:clamp(2.9rem,12.7vw,3.75rem)}
  .process-list{grid-template-columns:1fr;grid-template-rows:none;min-height:0;margin:58px 0 0;padding:0;border-top:1px solid var(--line)}
  .process-list li,.process-list li:nth-child(n){display:grid;grid-template-columns:42px minmax(0,1fr);grid-column:auto;grid-row:auto;align-self:auto;padding:22px 0 24px;border-bottom:1px solid var(--line)}
  .process-list li::before{display:none}
  .process-list span{grid-column:1;margin:3px 0 0;font-size:.66rem}
  .process-list strong{grid-column:2;max-width:16ch;font-size:1.12rem;line-height:1.16}
  .process-list p{grid-column:2;max-width:32ch;margin:11px 0 0;font-size:.94rem;line-height:1.5}

  .formats-intro{max-width:10.7ch;margin-top:48px;font-size:clamp(2.45rem,11vw,3.28rem);letter-spacing:-.046em;line-height:1.015}
  .format-list{margin-top:58px}
  .format-list li{grid-template-columns:38px minmax(0,1fr);gap:10px 14px;min-height:0;padding:22px 0 24px}
  .format-list h3{max-width:12ch;font-size:clamp(1.9rem,8.2vw,2.34rem);line-height:1}
  .format-list p{grid-column:2;max-width:30ch;font-size:.96rem;line-height:1.52}
  .format-list li:nth-child(n) h3{margin-left:0}

  .contact-section>.page-grid{padding-top:82px;padding-bottom:80px}
  .contact-section h2,.contact-list{grid-column:1/-1}
  .contact-section h2{max-width:8.4ch;font-size:clamp(3.05rem,13vw,3.85rem);letter-spacing:-.055em;line-height:.94}
  .contact-list{margin-top:56px}
  .contact-list a{display:grid;grid-template-columns:1fr 20px;min-height:80px;padding:14px 0;font-size:1rem}
  .contact-list span{grid-column:1;margin-bottom:4px}
  .contact-list a::after{grid-column:2;grid-row:1/3;align-self:center;opacity:1;transform:none}

  .site-footer{grid-template-columns:1fr;gap:4px;min-height:0;padding:28px 20px 30px}
  .site-footer p{text-align:left}
  .site-footer>a:last-child{justify-self:start}
}

@media(hover:none),(pointer:coarse){
  .route-atlas{display:none!important}
  .ambient-contour{opacity:.078!important}
}

@media(prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  *,*::before,*::after{scroll-behavior:auto!important}
  .route-atlas{transition:none}
  .format-list li::after,.contact-list a,.contact-list a::after,.header-cta::before,.site-footer>a:last-child{transition:none!important}
}