/* ------------------------------------------------------------
   Brand layer — overrides + content-widget library on top of the
   (re-skinned) Dennis engine. Shell/animations stay 1:1 with the
   example; these classes only style MY content (numbers, cases,
   charts, accordions, reviews, education, formats).
   Colours mapped to the engine palette (var(--color-blue) etc.).
   ------------------------------------------------------------ */

:root{
  --b-canvas:#1C1D20;
  --b-white:#FFFFFF;
  --b-fog:#B4B8B9;
  --b-on-card:#D6D8D9;
  --b-graphite:#494A4D;
  --b-accent:var(--color-blue);        /* #72C7F6 */
  --b-accent-deep:var(--color-blue-dark); /* #13294E */
  --b-line:rgba(255,255,255,.12);
  --b-ring:rgba(255,255,255,.2);
  --b-rcard:10px;
  --b-rpill:36.72px;
  --b-gap:20px;
  --b-gap-sm:12px;
}

/* Cyrillic reads better slightly tighter than Neue Montreal */
h1, h2, h4 { letter-spacing:-0.01em; }

/* убрать точку в начале приветствий/слов на загрузочном экране (все переходы + главная) */
.loading-container .dot{ display:none; }

/* ---- brand logo (top-left, replaces "© Code by Dennis") ---- */
.nav-bar .credits-top{ display:flex; align-items:center; gap:clamp(14px,1.6vw,22px); }
.nav-bar .credits-top .brand-logo{ width:clamp(30px,2.4vw,40px); height:auto; display:block; }

/* ---- "open to new projects" badge, left of the logo ---- */
.open-badge{ display:flex; align-items:center; gap:.55em; }
.open-badge-dot{ width:11px; height:11px; border-radius:50%; background:#3ecf6a; flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(62,207,106,.6); animation:open-badge-pulse 1.8s ease-out infinite; }
.open-badge-text{ font-size:clamp(14px,1.2vw,19px); line-height:1.2; color:var(--color-white);
  white-space:nowrap; opacity:.85; }
@keyframes open-badge-pulse{
  0%{ box-shadow:0 0 0 0 rgba(62,207,106,.55); }
  70%{ box-shadow:0 0 0 6px rgba(62,207,106,0); }
  100%{ box-shadow:0 0 0 0 rgba(62,207,106,0); }
}

/* ---- location capsule: flag photo inside a GREY circle ---- */
.home-header .hanger .digital-ball{ background:var(--b-graphite); overflow:hidden; }
.home-header .hanger .flag-emoji{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:1.9em; height:1.9em; object-fit:cover; border-radius:50%; }

/* ---- photo: full height, natural width (transparent cutout, never cropped).
   max-width:none overrides the global `img{max-width:100%}` reset in
   styleguide.css, which otherwise silently caps/squishes this image. ---- */
.home-header .personal-image img{ left:50%; transform:translateX(-50%); width:auto; height:100%; max-width:none; }

/* desktop: shift the photo left so it doesn't crowd the h1 name underneath,
   and push it down a bit (top offset) so the portrait sits lower in the frame */
@media screen and (min-width:721px){
  .home-header .personal-image img{ left:36%; top:12%; }
}

/* ---- hero subtitle: to the RIGHT of the photo, bigger, closer to 3 lines ---- */
.home-header .row .flex-col h4{ font-size:clamp(20px,2vw,26px); line-height:1.4; max-width:32ch;
  font-weight:450; color:var(--color-white); }
.home-header .row .flex-col h4 span{ display:inline; font-weight:600; }

/* ---- mobile hero: tall dominant photo with the name + arrow/badge/subtitle
   overlaid at the bottom (like the reference). The photo is anchored to the
   BOTTOM (bottom:0), so its lower edge sits exactly on the hero's gray border
   with no gap. Because this is a transparent cutout (not a rectangular studio
   shot), the silhouette narrows to ~40-60% width through the torso but is
   ~90-99% wide near the bottom — so overlaying the text on the LOWER body
   keeps it on solid pixels, no ragged diagonal edge behind it. ---- */
.hero-meta-mobile{ display:none; }

@media screen and (max-width:720px){
  .nav-bar .open-badge{ display:none; }

  .home-header{
    display:flex; flex-direction:column; justify-content:flex-end;
    min-height:calc(var(--vh,1vh)*100); height:calc(var(--vh,1vh)*100); max-height:calc(var(--vh,1vh)*100);
    padding-top:0; padding-bottom:calc(var(--gap-padding)*1.5);
  }

  /* photo fills the header, anchored to the bottom edge → flush with the gray
     border, no gap. Sides crop under the header's overflow:hidden. */
  .home-header .personal-image{ position:absolute; inset:0; top:auto; bottom:0; left:0;
    width:100%; height:calc(var(--vh,1vh)*100); background:none; }
  /* height:100% + bottom:0 keeps the bottom flush; -64% (not -50%) centers on
     the real face, which sits at ~64% of the crop's width (the person is
     turned, so the image's own midpoint isn't where the face is) */
  .home-header .personal-image img{ position:absolute; bottom:0; top:auto; left:50%;
    transform:translateX(-64%); width:auto; height:100%; max-width:none; }

  /* name + arrow/badge/subtitle overlaid at the bottom, over the wide lower body */
  .home-header .big-name{ order:1; position:relative; top:auto; bottom:auto; left:auto; width:auto; padding-bottom:0; }
  .home-header .container{ order:2; padding-top:calc(var(--gap-padding)*1.4); padding-bottom:0; }
  /* arrow pinned in normal flow above the subtitle with a clear gap — no
     parallax/absolute offset on phones, so it never lands on the heading */
  .home-header .row .flex-col .header-above-h4{ position:relative !important; top:auto !important;
    transform:none !important; margin:0 0 1.5em; line-height:1; display:block; }
  .home-header .row .flex-col h4{ font-size:clamp(14px,3.6vw,18px); max-width:30ch; line-height:1.55; }

  /* the template's own badge/hanger are absolutely positioned for a one-line
     subtitle and collide with our longer copy — replace both with one row that
     lives in normal document flow, right above the arrow */
  .home-header .open-badge,
  .home-header .hanger{ display:none; }

  .hero-meta-mobile{ display:flex; align-items:center; flex-wrap:wrap; gap:.5em;
    margin-bottom:1.3em; font-size:12.5px; color:var(--color-white); opacity:.85; }
  .hero-meta-dot{ width:7px; height:7px; border-radius:50%; background:#3ecf6a; flex:0 0 auto; }
  .hero-meta-sep{ opacity:.5; }
  .hero-meta-flag{ width:16px; height:16px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
}

/* ---- "сейчас во Вьетнаме" — bigger, 2 lines (spans stay block from style-new.css) ---- */
.home-header .hanger p{ font-size:clamp(15px,1.5vw,19px); }
.home-header .hanger p span{ white-space:nowrap; }

/* ---- trust logos strip: bigger logos, running marquee.
   Two identical <ul> copies back to back, each with the same trailing margin
   as its own item gap, so translateX(-50%) of the whole track lands exactly
   on the second copy — a seamless loop with no jump. ---- */
.trust-logos{ background:var(--b-white); padding:clamp(32px,5vw,56px) 0; overflow:hidden; }
.trust-logos-track{ display:flex; width:max-content; animation:trust-marquee 26s linear infinite; }
.trust-logos-track:hover{ animation-play-state:paused; }
.trust-logos-list{ display:flex; flex-wrap:nowrap; align-items:center;
  gap:clamp(48px,7vw,96px); list-style:none; padding:0; margin:0 clamp(48px,7vw,96px) 0 0; flex:0 0 auto; }
.trust-logos-list img{ display:block; height:clamp(34px,4vw,52px); width:auto; max-width:180px; object-fit:contain; }
.trust-logos-list .trust-wordmark{
  display:block; white-space:nowrap; line-height:1;
  font-family:'Tilda Sans','Dennis Sans',sans-serif;
  font-size:20px; font-weight:400; letter-spacing:0;
  color:#121212;
  text-transform:none !important;
  font-variant:normal !important;
  font-variant-caps:normal !important;
  font-feature-settings:"smcp" 0,"c2sc" 0,"unic" 0,"titl" 0,"case" 0 !important;
}
.home-services h2,
.home-services h2.home-services-title,
.home-services h2.home-services-title *{
  text-transform:none !important;
  font-variant:normal !important;
  font-variant-caps:normal !important;
  font-feature-settings:"smcp" 0,"c2sc" 0,"unic" 0,"titl" 0,"case" 0 !important;
}
#case-perimetr .cs-ba,
main .cs-ba{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  gap:clamp(16px,2vw,28px) !important;
  width:100% !important;
}
#case-perimetr .cs-ba > .cs-ba__col,
main .cs-ba > .cs-ba__col{
  flex:1 1 0 !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  display:block !important;
}
@keyframes trust-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* halve the gap between logos strip and the intro (second screen) */
.trust-logos + .home-intro{ padding-top:calc(var(--section-padding) / 2); }

/* ---- footer lead under "Расскажите о задаче" ---- */
.footer-lead{ margin-top:var(--b-gap); color:var(--b-fog); font-size:clamp(15px,1.4vw,18px);
  line-height:1.55; max-width:36ch; }

/* ---- "Все кейсы" button — sit higher under the grid, but keep clear of the footer curve ---- */
.center-grid-btn-home{ padding-top:calc(var(--section-padding) / 5); padding-bottom:clamp(3.5em,9vh,7em); }

/* ---- cases grid on mobile: bring back as a compact stacked list (title + category, no photo) ---- */
@media screen and (max-width:1024px){
  .large-work-grid{ display:block; }
  .large-work-grid .row{ flex-direction:column; align-items:flex-start; padding:1.2em 0; }
  .large-work-grid .work-items .flex-col:nth-child(1),
  .large-work-grid .work-items .flex-col:nth-child(2){ width:100%; padding:0; }
  .large-work-grid .work-items h4{ font-size:clamp(22px,7vw,32px); }
  .large-work-grid .work-items .flex-col:nth-child(2) p{ margin-top:.3em; color:var(--b-fog); font-size:14px; }
}


/* ---- fullscreen menu: compact type so links + bottom bar fit ---- */
.fixed-nav-inner{ overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.fixed-nav .nav-row h5{ margin-bottom:1.4em; }
.fixed-nav .nav-row ul{ padding-top:2.5vh; }
.fixed-nav .nav-row .btn-text-inner{ font-size:clamp(24px,3vw,40px); line-height:1.22; }
.fixed-nav .social-row .btn-text-inner,
.fixed-nav .menu-bottom-contacts .btn-text-inner{ font-size:clamp(15px,1.4vw,19px); }
.fixed-nav .socials h5{ padding-left:0; }

@media screen and (max-width:540px){
  /* Bottom bar owns the lower edge; nav list scrolls inside remaining space. */
  .fixed-nav-inner{ overflow:hidden; }
  .fixed-nav .nav-row h5{ margin-bottom:.85em; }
  .fixed-nav .nav-row ul{ padding-top:.6vh; }
  .fixed-nav .nav-row .btn-text-inner{ font-size:clamp(22px,6.2vw,28px); line-height:1.26; }
  .fixed-nav .menu-bottom-contacts .btn-text-inner{ font-size:clamp(15px,3.8vw,17px); }
}

/* content colour on dark inner sections */
.theme-dark .b-muted, .b-muted{ color:var(--b-fog); }
.b-hl,.hl{ color:var(--b-accent); }
.b-lead{ font-size:clamp(17px,1.6vw,21px); line-height:1.55; color:var(--b-white); max-width:62ch; }
.b-eyebrow{ font-size:12px; font-weight:450; color:var(--b-fog); letter-spacing:.14em; text-transform:uppercase; display:inline-block; }

/* section head (no top rule — a hairline between same-colour dark screens reads
   as a broken seam; keep the eyebrow + number, drop the divider line) */
.b-sec-head{ display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding-top:0; margin-bottom:clamp(20px,3vw,36px); }
.b-sec-head .num{ font-size:12px; color:var(--b-fog); letter-spacing:.1em; }

/* ---- numbers ---- */
.b-nums{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); }
.b-numcard{ border-top:1px solid var(--b-line); padding-top:20px; }
.b-num{ font-size:clamp(44px,6vw,84px); font-weight:450; line-height:1; letter-spacing:-.01em; color:var(--b-white); }
.b-num small{ font-size:.42em; color:var(--b-fog); margin-left:.15em; }
.b-numcard p{ margin-top:14px; font-size:14px; line-height:1.5; color:var(--b-fog); }

/* ---- KPI ---- */
.b-kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--b-gap); }
.b-kpi{ background:var(--b-graphite); border-radius:var(--b-rcard); padding:16px 18px; }
.b-kpi .v{ font-size:clamp(24px,2.6vw,32px); font-weight:450; color:var(--b-accent); line-height:1; }
.b-kpi .l{ margin-top:8px; font-size:12.5px; line-height:1.4; color:var(--b-on-card); }

/* ---- cases ---- */
.b-case{ border-top:1px solid var(--b-line); padding-top:clamp(28px,4vw,48px); }
.b-case + .b-case{ margin-top:clamp(48px,7vw,110px); }
main[data-barba-namespace="cases"] .b-case{ border-top:0 !important; padding-top:clamp(18px,2.5vw,30px); }
.b-case__head{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.b-case__idx{ display:flex; align-items:center; gap:16px; }
.b-case__idx .n{ font-size:13px; color:var(--b-accent); font-weight:600; }
/* белые логотипы кейсов на тёмном фоне, без подложки */
.b-case__logo{ height:26px; width:auto; filter:brightness(0) invert(1); opacity:.9; }
.b-case__period{ font-size:12px; color:var(--b-fog); white-space:nowrap; }
.b-case__title{ margin-top:16px; font-size:clamp(22px,2.8vw,34px); font-weight:450; line-height:1.1; max-width:none; }
.b-case__task{ margin-top:16px; font-size:15px; line-height:1.6; color:var(--b-fog); max-width:70ch; }
.b-case__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); margin-top:32px; align-items:start; }
.b-list{ display:flex; flex-direction:column; gap:var(--b-gap); }
.b-list li{ font-size:14.5px; line-height:1.55; color:var(--b-fog); padding-left:22px; position:relative; list-style:none; }
.b-list li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--b-accent); }
.b-list b{ color:var(--b-white); font-weight:600; }
.b-links{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.b-inline{ color:var(--b-accent); text-decoration:underline; text-underline-offset:3px; }

/* ---- chart box ---- */
.b-chart{ background:var(--b-graphite); border-radius:var(--b-rcard); padding:20px; }
.b-chart .t{ font-size:13px; color:var(--b-white); font-weight:450; margin-bottom:6px; }
.b-chart svg{ width:100%; height:auto; }
.b-chart-note{ margin-top:10px; font-size:12px; color:var(--b-on-card); line-height:1.4; }
.b-brands{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.b-brand-pill{ font-size:12.5px; color:var(--b-white); padding:9px 15px; border-radius:var(--b-rpill); box-shadow:var(--b-ring) 0 0 0 1px inset; }

/* ---- steps ---- */
.b-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); }
.b-step{ border-top:1px solid var(--b-line); padding-top:22px; }
.b-step .k{ font-size:13px; color:var(--b-accent); font-weight:600; }
.b-step h4{ margin-top:14px; font-size:clamp(19px,2vw,24px); font-weight:450; }
.b-step p{ margin-top:12px; font-size:14px; line-height:1.55; color:var(--b-fog); }

/* ---- about / education ---- */
.b-about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
.b-about img{ width:100%; border-radius:var(--b-rcard); object-fit:cover; }
.b-facts{ margin-top:var(--b-gap); display:flex; flex-direction:column; gap:var(--b-gap); }
.b-facts li{ font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:var(--b-fog); padding-left:22px; position:relative; list-style:none; }
.b-facts li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:7px; border-radius:50%; background:var(--b-accent); }
.b-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px); }
.b-strip img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--b-rcard); }
.b-edu{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); }
.b-edu-item{ border-top:1px solid var(--b-line); padding:18px 0; }
.b-edu-item .name{ font-size:clamp(18px,1.7vw,22px); font-weight:450; color:var(--b-white); }
.b-edu-item .meta{ margin-top:8px; font-size:clamp(15px,1.4vw,18px); color:var(--b-fog); }
.b-certs{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--b-gap); }
.b-cert{ position:relative; border-radius:var(--b-rcard); overflow:hidden; display:block; }
.b-cert img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .4s; }
.b-cert:hover img{ transform:scale(1.03); }
.b-cert .cap{ position:absolute; left:0; right:0; bottom:0; padding:16px; font-size:12.5px;
  background:linear-gradient(0deg,rgba(0,0,0,.78),transparent); color:var(--b-white); }

/* ---- accordion: smooth open/close ----
   A native <details> pops open with zero animation. `::details-content` +
   `interpolate-size` let the browser animate to `height:auto` with no JS and no
   extra wrapper. Browsers without support simply keep the instant toggle.
   The height change is fed back to Locomotive via the `toggle` listener in
   index-new.js — it caches the scroll limit and would otherwise strand
   everything below the accordion. */
@supports (interpolate-size: allow-keywords) {
  :root{ interpolate-size: allow-keywords; }
  details::details-content{
    block-size:0; overflow:clip;
    transition:block-size .35s cubic-bezier(.4,0,.2,1), content-visibility .35s allow-discrete;
  }
  details[open]::details-content{ block-size:auto; }
  @media (prefers-reduced-motion:reduce){ details::details-content{ transition:none; } }
}

/* ---- accordion (services / faq) ---- */
.b-acc-list{ display:flex; flex-direction:column; }
.b-acc{ border-top:1px solid var(--b-line); }
.b-acc:last-child{ border-bottom:1px solid var(--b-line); }
.b-acc summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 0; font-size:clamp(17px,2vw,22px); font-weight:450; color:var(--b-white); }
.b-acc summary::-webkit-details-marker{ display:none; }
.b-acc .plus{ position:relative; width:18px; height:18px; flex:0 0 auto; }
.b-acc .plus::before,.b-acc .plus::after{ content:""; position:absolute; background:var(--b-accent); transition:transform .3s; }
.b-acc .plus::before{ top:8px; left:0; width:18px; height:2px; }
.b-acc .plus::after{ left:8px; top:0; width:2px; height:18px; }
.b-acc[open] .plus::after{ transform:scaleY(0); }
.b-acc__body{ padding:0 0 30px 0; font-size:clamp(19px,1.7vw,24px); line-height:1.6; color:var(--b-fog); max-width:none; }
.b-acc__body a{ color:var(--b-accent); text-decoration:underline; text-underline-offset:3px; }

/* ---- formats ---- */
.b-formats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--b-gap); }
.b-format{ background:var(--b-graphite); border-radius:var(--b-rcard); padding:24px; display:flex; flex-direction:column; gap:var(--b-gap); }
.b-format h3{ font-size:19px; font-weight:450; }
.b-format .price{ font-size:clamp(22px,2.4vw,28px); font-weight:450; color:var(--b-accent); line-height:1; }
.b-format p{ font-size:13.5px; line-height:1.55; color:var(--b-on-card); flex:1; }
.b-format ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px; flex:1;
}
.b-format ul li{
  position:relative; padding-left:1.15em;
  font-size:15px; line-height:1.45; color:var(--b-on-card);
}
.b-format ul li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--b-accent);
}
.b-formats-note{ margin-top:20px; font-size:13px; color:var(--b-fog); }

/* ---- reviews: clean video grid, no card frame around the videos ---- */
.b-reviews{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--b-gap); }
.b-review-card,
.b-review{
  border-radius:var(--b-rcard);
  overflow:hidden;
}
.b-review{
  position:relative; background:#141517; aspect-ratio:9/16;
  isolation:isolate;
}
.b-review__poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  border-radius:inherit; clip-path:inset(0 round var(--b-rcard));
}
.b-review iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  border-radius:inherit;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.b-review.is-ready iframe{ opacity:1; pointer-events:auto; }

/* ---- role / column sub-heading (about, reviews) ---- */
.b-role-title{ font-size:clamp(21px,2.4vw,28px); font-weight:450; color:var(--b-white); margin-bottom:18px; }

/* ---- FIX: inner pages must be fully dark. `theme-dark` only flips TEXT to
   white — it does NOT paint a dark background on a generic .section (only
   home-header / footer-wrap / default-header carry that bg). Without this the
   content sections render white text on the default WHITE base = unreadable.
   Paint every section on the inner pages dark, AND the footer transition curve
   (.rounded-div defaults to WHITE — meant for a white→dark homepage handoff; on
   an all-dark page it must be dark or it flashes a white arc before the footer).
   Any element with a .default-header is an inner page; the homepage uses
   .home-header, so :has() cleanly excludes it and auto-covers future pages. ---- */
main:has(.default-header),
main:has(.default-header) .main-wrap,
main:has(.default-header) .section,
main:has(.default-header) .footer-rounded-div .rounded-div{ background:var(--color-dark); }

/* ---- FIX: seamless dark-on-dark flow + tighter vertical rhythm on inner pages.
   1) The footer's curved reveal (.footer-rounded-div) exists to blend a WHITE
      content block into the dark footer on the homepage. On all-dark inner pages
      it only produces a faint crooked arc/seam between two same-colour screens —
      hide it so content flows flat into the footer. */
main:has(.default-header) .footer-rounded-div{ display:none; }
main:has(.default-header) .section + .section{ margin-top:-2px; }
/* 2) The default-header + first section stacked far too much empty space under
      the page title, and inner sections were as tall as the homepage's. Pull
      them together so the screens sit closer. */
main:has(.default-header) .default-header{ padding-bottom:0; }
main:has(.default-header) .section{ padding-top:clamp(2em,6vh,4em); padding-bottom:clamp(2em,6vh,4em); }
main:has(.default-header) .default-header + .section{ padding-top:clamp(1em,3vh,2em); }

/* ---- FIX round 3 (feedback): nav grid, active state, footer, typography ---- */
/* nav-bar on the same grid as content: logo aligns with the page title's left
   edge, menu with the content's right edge (was hugging the viewport edge) */
main:has(.default-header) .nav-bar{ left:50%; transform:translateX(-50%) rotate(0.001deg);
  width:100%; max-width:100em; padding-left:var(--container-padding); padding-right:var(--container-padding); }
/* page title sits below the nav; actual values live in the type-system block */
@media screen and (max-width:720px){
  main#case-perimetr-short .sk-hero{ padding-top:calc(var(--nav-pad-top) + 72px); }
}
/* the footer is a .section too, so the tightened section padding pulled it up;
   restore proper top breathing room on the last block */
main:has(.default-header) .footer{ padding-top:clamp(6em,13vh,10em); }
/* active page highlighted blue in BOTH the top nav and the fullscreen menu */
.btn-link.active .btn-text-inner{ color:var(--color-blue); }
.btn-normal.btn-blue .btn-click{ background:var(--color-blue); box-shadow:none; }
.btn-normal.btn-blue .btn-fill{ background:var(--color-blue); }
.btn-normal.btn-blue .btn-text .btn-text-inner,
.theme-dark .btn-round .btn-text-inner{ color:var(--color-white) !important; }
.case-header p{ opacity:1; color:var(--b-fog); }
/* Body/heading sizes live in the shared type-system block below. */

/* ---- responsive ---- */
@media (max-width:1080px){
  .b-nums{ grid-template-columns:repeat(2,1fr); }
  .b-steps{ grid-template-columns:repeat(2,1fr); }
  .b-formats{ grid-template-columns:repeat(2,1fr); }
  .b-reviews{ grid-template-columns:repeat(2,1fr); }
  .b-case__cols{ grid-template-columns:1fr; }
  .b-about,.b-edu{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .b-nums{ grid-template-columns:1fr 1fr; }
  /* KPI grids appear in every case and some pages set four columns inline.
     Keep the mobile layout readable by overriding those inline desktop grids. */
  .b-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .b-certs,.b-strip{ grid-template-columns:1fr; }
  .b-reviews{ grid-template-columns:1fr 1fr; }
}
@media (max-width:460px){
  .b-nums,.b-formats,.b-reviews{ grid-template-columns:1fr; }
}

/* ===== Image viewer ===== */
html.lb-open{ overflow:hidden; }
.lb-source{ position:relative; }
.lb-source--image{ display:block; min-width:0; overflow:hidden; border-radius:var(--b-rcard); }
.lb-source > img[data-lightbox], [data-lightbox-host] > img[data-lightbox]{ cursor:zoom-in; }
.lb-source__open{
  position:absolute; z-index:2; left:var(--lb-cursor-x,50%); top:var(--lb-cursor-y,50%); right:auto; bottom:auto; width:56px; height:56px; padding:0;
  display:grid; place-items:center; border:1px solid rgba(255,255,255,.8); border-radius:50%;
  background:#fff; color:#171217; cursor:none; visibility:hidden; transform:translate(-50%,-50%) scale(.14);
  transition:transform .32s cubic-bezier(.16,1,.3,1), box-shadow .22s ease;
  box-shadow:0 8px 20px rgba(0,0,0,.18); -webkit-tap-highlight-color:transparent;
}
.lb-source:hover > .lb-source__open, .lb-source:focus-within > .lb-source__open,
[data-lightbox-host]:hover > .lb-source__open, [data-lightbox-host]:focus-within > .lb-source__open{ visibility:visible; transform:translate(-50%,-50%) scale(1); transition-delay:0s; }
.lb-source__open:hover{ transform:translate(-50%,-50%) scale(1.08); box-shadow:0 12px 26px rgba(0,0,0,.24); }
.lb-source__open svg, .lb__control svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.lb{
  position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:clamp(18px,4vw,56px); background:rgba(12,13,15,.96); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .34s ease, visibility 0s linear .34s; -webkit-tap-highlight-color:transparent;
}
.lb.is-open{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.lb__fig{ position:relative; margin:0; max-width:100%; max-height:100%; transform:scale(.96); opacity:0; transition:transform .48s cubic-bezier(.16,1,.3,1), opacity .28s ease; }
.lb.is-open .lb__fig{ transform:scale(1); opacity:1; }
.lb__img{ max-width:92vw; max-height:82vh; width:auto; height:auto; object-fit:contain; border-radius:4px; display:block; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.lb__toolbar{
  position:fixed; z-index:2; left:50%; bottom:clamp(18px,4vh,48px); display:flex; align-items:center; justify-content:center; gap:36px;
  transform:translateX(-50%);
  color:#fff; pointer-events:none;
}
.lb__control, .lb__count{
  height:72px; min-width:72px; border:0; border-radius:50%; background:#fff; color:#171217;
  display:grid; place-items:center; box-shadow:0 9px 20px rgba(0,0,0,.13);
}
.lb__control{ padding:0; cursor:pointer; pointer-events:auto; transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; }
.lb__control:hover{ box-shadow:0 13px 26px rgba(0,0,0,.2); }
.lb__prev:hover{ transform:translateX(-4px) scale(1.06); }
.lb__next:hover{ transform:translateX(4px) scale(1.06); }
.lb__x{ height:88px; min-width:88px; }
.lb__x:hover{ transform:rotate(8deg) scale(1.08); }
.lb__count{ display:none !important; }
.lb__count i{ margin:0 4px; font-style:normal; opacity:.55; }
@media (max-width:640px){
  .lb-source__open{ display:none; }
  .lb__img{ max-width:94vw; max-height:76vh; }
  .lb__toolbar{ bottom:calc(12px + env(safe-area-inset-bottom, 0px)); gap:18px; }
  .lb__control{ height:58px; min-width:58px; }
  .lb__x{ height:70px; min-width:70px; }
}
@media (hover:hover) and (pointer:fine){
  .lb-source:hover, [data-lightbox-host]:hover,
  .lb-source:hover > img[data-lightbox], [data-lightbox-host]:hover > img[data-lightbox]{ cursor:none; }
}
@media (prefers-reduced-motion:reduce){
  .lb, .lb__fig, .lb-source__open, .lb__control{ transition:none; }
}

/* ===== SEO: heading semantics on the homepage =====
   The giant name is a brand visual, not the page topic, so it drops from <h1>
   to <p class="name-title">, and the descriptive hero line becomes the real
   <h1>. These rules re-apply the exact declarations the old tags used
   (.home-header .big-name h1 / .home-header .row .flex-col h4), so nothing
   moves visually. */
.home-header .big-name .name-title{
  position:relative; display:flex; align-items:center; color:var(--color-white);
  line-height:1; font-size:max(9em,15vw); white-space:nowrap; pointer-events:none;
  margin:0; padding:0;
}
.home-header .row .flex-col h1.hero-lead{
  font-size:clamp(20px,2vw,26px); line-height:1.4; max-width:32ch;
  font-weight:450; color:var(--color-white); margin:0; padding:0;
}
.home-header .row .flex-col h1.hero-lead span{ display:inline; font-weight:600; }
@media screen and (max-width:720px){
  .home-header .row .flex-col h1.hero-lead{ font-size:clamp(14px,3.6vw,18px); max-width:30ch; line-height:1.55; }
}

/* ===== Visible breadcrumbs (mirror the BreadcrumbList schema) ===== */
.b-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.5em;
  font-size:13px; line-height:1.4; color:var(--b-fog); margin-bottom:clamp(12px,1.6vw,20px); }
.b-crumbs a{ color:var(--b-fog); text-decoration:none; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; }
.b-crumbs a:hover{ color:var(--b-white); border-bottom-color:rgba(255,255,255,.35); }
.b-crumbs .sep{ opacity:.45; }
.b-crumbs [aria-current="page"]{ color:var(--b-white); }

/* intro lead promoted h4 -> h2 for heading order; keep the h4 metrics verbatim */
.home-intro h2.intro-lead{ font-size:clamp(1.55em,2.3vw,2.5em); line-height:1.45; margin-bottom:1em; }

/* homepage "Решения для вашего бизнеса" — heading on top, accordion full width.
   Light-theme sibling of .b-acc: that one targets the dark inner pages
   (--b-line / --b-fog) and is unreadable on this white section.
   Type scale is kept identical to .b-acc so the site has ONE accordion format. */
.home-services{ padding-bottom:calc(var(--section-padding) * .66); }
.home-services h2{ font-size:clamp(28px,3.4vw,44px); line-height:1.15; letter-spacing:-.01em;
  margin:0 0 clamp(18px,2.2vw,30px); }
.acc-light{ display:flex; flex-direction:column; }
.acc-light details{ border-top:1px solid rgba(28,29,32,.14); }
.acc-light details:last-child{ border-bottom:1px solid rgba(28,29,32,.14); }
.acc-light summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:24px 0; font-size:clamp(17px,2vw,22px); font-weight:450; color:var(--color-dark); }
.acc-light summary::-webkit-details-marker{ display:none; }
.acc-light summary:focus-visible{ outline:2px solid var(--color-dark); outline-offset:4px; border-radius:3px; }
.acc-light summary h3{ font:inherit; letter-spacing:inherit; color:inherit; margin:0; padding:0; display:inline; }
.acc-light .plus{ position:relative; width:18px; height:18px; flex:0 0 auto; }
.acc-light .plus::before,.acc-light .plus::after{ content:""; position:absolute; background:var(--color-dark); transition:transform .3s; }
.acc-light .plus::before{ top:8px; left:0; width:18px; height:2px; }
.acc-light .plus::after{ left:8px; top:0; width:2px; height:18px; }
.acc-light details[open] .plus::after{ transform:scaleY(0); }
.acc-light__body{ padding:0 0 30px 0; font-size:clamp(19px,1.7vw,24px); line-height:1.6;
  color:rgba(28,29,32,.66); max-width:72ch; }
@media (prefers-reduced-motion:reduce){ .acc-light .plus::before,.acc-light .plus::after{ transition:none; } }

/* Keep the interface usable for visitors who ask the OS to reduce motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* ===== Mobile: text must use the full column width =====
   style-new caps the intro paragraph at 14em and never resets it below 720px,
   so on a phone it wraps after ~4 words. */
@media screen and (max-width:720px){
  .home-intro .flex-col:nth-child(2) p{ max-width:none; }

  /* Мобильный CTA: круглая кнопка едет по линии, стрелка указывает на неё —
     тот же приём, что в футере. Кнопка выходит из absolute/transform, иначе
     GSAP не сможет анимировать её x (Locomotive на мобилке параллакс не даёт). */
  .home-intro h2.intro-lead{ margin-bottom:.55em; }
  .home-intro .flex-col:nth-child(2){ padding-top:clamp(16px,4.5vw,28px); align-items:stretch; }
  .home-intro .flex-col:nth-child(2) p{ margin-bottom:clamp(30px,9vw,48px); }

  /* Отступы над/под кнопкой были 34 / 203px — выравниваем. */
  .home-intro{ padding-bottom:clamp(28px,8vw,44px); }
  .home-services{ padding-top:clamp(60px,21vw,84px); }

  /* Стрелка рисует луч под 45°. Чтобы он попал в кнопку, она должна стоять
     ВЫШЕ центра кнопки примерно на столько же, на сколько правее (было 25 vs 126px).
     Отсюда padding-top у .intro-cta — стрелка живёт в нём, как в футере. */
  .home-intro .flex-col:nth-child(2) .intro-cta{
    --cta-btn:clamp(9em,12vw,11em);
    --cta-pt:clamp(56px,20vw,88px);
    position:relative; width:100%; display:flex; align-items:center; justify-content:flex-end;
    padding-top:var(--cta-pt); padding-right:clamp(52px,17vw,84px); }
  /* НЕТ overflow:hidden — магнитный эффект сдвигает кнопку на ±50px при наведении,
     и она обрезалась бы плоско по краю. Стартовую позицию вместо этого ограничивает JS. */
  .home-intro .flex-col:nth-child(2) .intro-cta .btn{
    position:static; inset:auto; transform:none; z-index:2; }
  .intro-stripe{ display:block; position:absolute; left:0; right:0;
    top:calc(var(--cta-pt) + var(--cta-btn) / 2); z-index:1; }
  .intro-arrow{ display:block; position:absolute; right:0; top:6px;
    width:clamp(1.5em,5vw,2em); z-index:2; }
  /* footer does the same: the extra 90° turns ↘ into ↙ so the arrow points AT the button */
  .intro-arrow svg{ display:block; width:100%; height:auto; transform:rotate(90deg); }
  .home-services h2{ font-size:clamp(24px,6.2vw,32px); }
  .acc-light summary{ font-size:clamp(16px,4.4vw,19px); padding:20px 0; }
  .acc-light__body{ font-size:clamp(15px,4vw,18px); max-width:none; padding-bottom:24px; }
  .footer-lead{ max-width:none; }
}

/* ===== Nav: 7 links + logo + badge stop fitting below ~840px.
   The template only swaps to the burger under 540px, so between 541–900px the
   links shrink and the labels break mid-word ("Как / работаю"). Keep labels on
   one line and hand over to the burger earlier. ===== */
.nav-bar .links-wrap li .btn-text-inner{ white-space:nowrap; }
@media screen and (max-width:900px){
  .nav-bar .links-wrap li{ display:none; }
  .nav-bar .links-wrap li:last-child{ display:block; }
}

/* service names become <h3> for heading order; font:inherit keeps <summary> look */
.b-acc summary h3,
.b-acc summary h4{ font:inherit; letter-spacing:inherit; color:inherit; margin:0; padding:0; display:inline; }

/* Case accordions: .b-acc__body is sized for the FAQ/services pages (24px, max-width:none).
   Inside a full-width case card that reproduces the wall of text — cap the measure. */
.b-case .b-acc-list{ margin-top:clamp(22px,2.6vw,32px); }
.b-case .b-acc__body{ font-size:clamp(16px,1.4vw,19px); line-height:1.7; max-width:78ch; padding-bottom:26px; }
.b-case .b-acc summary{ font-size:clamp(17px,1.5vw,21px); padding:clamp(16px,1.8vw,22px) 0; }

/* intro CTA is a mobile-only treatment; desktop keeps the template's floating button.
   Scoped to min-width so it can't out-cascade the mobile rules above. */
@media screen and (min-width:721px){
  .intro-stripe, .intro-arrow{ display:none; }
}

/* ---- Санкт-Петербург на экране перехода ----
   Линейный силуэт по нижнему краю loading-screen. Штрихи перекрашены в белый
   при экспорте (в исходнике они почти чёрные и на тёмном экране не читались).
   z-index:0 + isolation на родителе держат его под словом-заголовком.
   Ширина всегда во весь экран, поэтому высота слоя задана пропорцией картинки
   (1200×549 = 2.186). Никакого max-height: он бы включил `contain` и сжал
   рисунок по ширине. В низких окнах верх (пустое небо) просто уходит за край —
   .loading-container режет по overflow:hidden. */
/* стекинг-контекст уже создаёт will-change:transform на .loading-screen */
.loading-screen::after{
  content:""; position:absolute; z-index:0; left:0; right:0; bottom:0;
  height:calc(100vw / 2.186); pointer-events:none;
  background:url(../photos/perimetr/spb.webp) no-repeat bottom center / 100% auto;
  opacity:.17;
}
.loading-words{ position:relative; z-index:1; }

/* ---- footer + bottom bar on the same 12-col grid as the mini-case ----
   Content sections already use .container + --container-padding.
   The template footer sat on .container.medium (double inset) and the
   credits/INN/contacts bar used flex + leftover padding, so the last
   screen did not share a column track with the page. */
.footer{ --sk-cols:repeat(12,minmax(0,1fr)); }
.footer .container.medium,
.footer .container.no-padding{
  display:grid;
  grid-template-columns:var(--sk-cols);
  column-gap:var(--gap-padding);
  padding-left:var(--container-padding);
  padding-right:var(--container-padding);
  max-width:100em;
  width:100%;
}
.footer .container.medium > .row,
.footer .container.no-padding > .row{
  grid-column:1 / -1;
  width:100%;
  max-width:none;
}
.footer .bottom-footer{
  display:grid;
  grid-template-columns:var(--sk-cols);
  column-gap:var(--gap-padding);
  align-items:start;
  justify-content:unset;
  flex-direction:unset;
  padding:calc(var(--section-padding) / 1.3) 0 calc(var(--gap-padding) / 1.75);
}
.footer .bottom-footer .flex-col{
  display:contents;
  width:auto;
  padding:0;
  order:0;
}
.footer .bottom-footer .credits{ grid-column:1 / span 2; }
.footer .bottom-footer .time{ grid-column:3 / span 2; margin-top:0; }
.footer .bottom-footer .socials{ grid-column:8 / -1; justify-self:end; }
.footer .bottom-footer .credits,
.footer .bottom-footer .time,
.footer .bottom-footer .socials{
  width:auto;
  max-width:none;
  padding:0;
  order:0;
}
.footer .socials,
.footer .socials ul{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  width:auto;
  margin:0;
}
.footer .socials h5{ padding:0; text-align:right; width:auto; }
.footer .socials ul{
  flex-direction:row;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:0;
}
.footer .socials .btn-text{
  padding-left:calc(var(--gap-padding) / 2);
  padding-right:calc(var(--gap-padding) / 2);
}
.footer .socials li:last-child .btn-text,
.footer .socials li:last-child .btn-click{
  padding-right:0;
  margin-right:0;
}

@media screen and (max-width:720px){
  .footer .bottom-footer{
    row-gap:18px;
    padding:5vh 0 calc(var(--gap-padding) / 1.75);
  }
  .footer .bottom-footer .flex-col:nth-child(1),
  .footer .bottom-footer .flex-col:nth-child(2){
    display:contents;
    width:auto;
    padding:0;
    order:0;
  }
  .footer .bottom-footer .credits{ grid-column:1 / span 6; }
  .footer .bottom-footer .time{ grid-column:7 / span 6; }
  .footer .bottom-footer .socials{
    grid-column:1 / -1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-self:stretch;
    width:100%;
  }
  .footer .socials,
  .footer .socials ul{ width:auto; }
  .footer .socials h5{ text-align:left; }
  .footer .socials ul{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0 1.1em;
    padding:0;
    margin:0;
    list-style:none;
    width:100%;
  }
  .footer .socials li,
  .footer .socials .btn,
  .footer .socials .btn-click,
  .footer .socials .btn-text{
    margin:0;
    padding-left:0;
    padding-right:0;
  }
}

/* ===== Shared typography and spacing =====
   Inner pages only (`main:has(.default-header)`). Homepage keeps the original
   Dennis/brand hero, spacing, and type. */
:root{
  --type-title:clamp(36px,calc(8px + 3.889vw),64px);
  --type-section:clamp(24px,calc(16px + 1.12vw),32px);
  --type-card:clamp(20px,calc(18px + .28vw),24px);
  --type-body:clamp(17px,calc(16px + .22vw),19px);
  --type-caption:15px;
  --space-section:clamp(56px,calc(24px + 4.445vw),88px);
  --space-heading:clamp(18px,calc(12px + 1.112vw),28px);
  --space-grid:clamp(20px,calc(12px + 1.2vw),32px);
  --space-copy:clamp(14px,calc(10px + .6vw),20px);
  --space-block:clamp(36px,calc(24px + 1.4vw),48px);
  --nav-pad-top:calc(env(safe-area-inset-top,0px) + 22px);
  --nav-pad-bottom:18px;
}
main:has(.default-header){
  --section-padding:var(--space-section);
  --container-padding:clamp(20px,4.2vw,72px);
  --gap-padding:var(--space-grid);
  --b-gap:var(--space-grid);
  --b-gap-sm:16px;
}
main:has(.default-header) .section :is(h1,h2,h3,h4),
main:has(.default-header) .span-lines,
main:has(.default-header) .span-lines .span-line,
main:has(.default-header) .span-lines .span-line-inner{
  font-family:'Tilda Sans','Dennis Sans',sans-serif;
  font-weight:500;
  text-transform:none !important;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:manual;
}
main:has(.default-header) .section h1,
main:has(.default-header) .default-header h1{
  font-size:var(--type-title);
  line-height:1.22;
  letter-spacing:-.012em;
  max-width:18em;
  margin:0;
  text-wrap:pretty;
}
main:has(.default-header) .default-header h1 span{ display:inline; }
main:has(.default-header) .section:not(.footer) h2{
  font-size:var(--type-section);
  line-height:1.35;
  letter-spacing:-.01em;
  max-width:28em;
  margin:0 0 var(--space-heading);
  text-wrap:pretty;
  font-weight:500;
  text-transform:none;
}
main:has(.default-header) .section:not(.footer) h2::first-letter{ text-transform:uppercase; }
main:has(.default-header) .section :is(h3,h4),
main:has(.default-header) .section .work-items h4,
main:has(.default-header) .section .b-edu-item .name,
main:has(.default-header) .section :is(.b-acc,.acc-light) summary{
  font-size:var(--type-card);
  line-height:1.35;
  letter-spacing:-.008em;
  text-wrap:pretty;
}
main:has(.default-header) .section :is(.b-acc,.acc-light) summary :is(h3,h4){ margin:0; font:inherit; }
main:has(.default-header) .section .b-case__title{
  margin:var(--space-heading) 0 0;
  font-size:var(--type-section);
  line-height:1.35;
  letter-spacing:-.01em;
  text-wrap:pretty;
  font-weight:500;
}
main:has(.default-header) .section .b-role-title{ margin:0 0 var(--space-heading); }
main:has(.default-header) .section :is(p:not(.name-title):not(.b-lead):not(.footer-lead),.b-case__task,.b-list li,.b-facts li,.b-acc__body,.acc-light__body,.b-edu-item .meta){
  font-size:var(--type-body);
  line-height:1.65;
  overflow-wrap:break-word;
  text-wrap:pretty;
}
main:has(.default-header) .section .b-lead,
main:has(.default-header) .section p.b-lead{
  font-size:clamp(18px,calc(17px + .28vw),21px);
  line-height:1.65;
  color:var(--b-white);
  max-width:46em;
  text-wrap:pretty;
}
main:has(.default-header) .section p:not(.name-title){ margin-bottom:0; }
main:has(.default-header) .section .cs-statement{ font-size:var(--type-section); line-height:1.35; }
main:has(.default-header) .footer .bottom-footer :is(p,h5){ font-size:var(--type-caption); }
main:has(.default-header) .section .b-facts li{ max-width:42em; }
main:has(.default-header) .section .container > h3:not(:first-child){ margin-top:var(--space-block) !important; }
main:has(.default-header) .section :is(.b-muted,.b-case__task,.b-acc__body,.acc-light__body),
main:has(.default-header) .section > .container > p{
  max-width:42em;
  overflow-wrap:break-word;
}
main:has(.default-header) .section :is(.b-numcard p,.b-kpi .l,.b-chart-note,.b-chart .t,.b-brand-pill,.b-case__period,.b-case__idx .n,.b-step .k,.b-cert .cap,.b-formats-note,.b-eyebrow,.b-sec-head .num,.cs-cap){
  font-size:var(--type-caption);
  line-height:1.55;
}
main:has(.default-header) .b-crumbs{ font-size:var(--type-caption); margin-bottom:var(--space-heading); }
main:has(.default-header) .section :is(h2,h3) + :is(p,ul,div){ margin-top:var(--space-heading) !important; }
main:has(.default-header) .section p + p{ margin-top:var(--space-copy) !important; }
main:has(.default-header) .section :is(.b-nums,.b-kpis,.b-steps,.b-formats,.b-reviews,.b-about,.b-edu,.b-certs,.b-strip,.b-case__cols){
  gap:var(--space-grid);
}
main:has(.default-header) .section :is(.b-nums,.b-kpis,.b-steps,.b-formats,.b-reviews,.b-about,.b-edu,.b-certs,.b-strip,.b-case__cols) > *{
  min-width:0;
}
main:has(.default-header) .section .container > :is(.b-nums,.b-kpis,.b-steps,.b-formats,.b-reviews,.b-about,.b-edu,.b-certs,.b-strip){
  margin-top:var(--space-block) !important;
}
main:has(.default-header) .section .b-case + .b-case{ margin-top:var(--space-section); }
main:has(.default-header) .section .b-case__cols{ margin-top:var(--space-block); }
main:has(.default-header) .section :is(.b-kpi,.b-format,.b-chart){ padding:var(--space-grid); }
main:has(.default-header) .section .b-step :is(h4,p){ margin:var(--space-heading) 0 0; }
main:has(.default-header) .section .b-step p,
main:has(.default-header) .section .b-numcard p{ max-width:36em; }
main:has(.default-header) .section :is(.b-list,.b-facts){ gap:var(--space-copy); }
main:has(.default-header) .section :is(.b-list,.b-facts) li::before{ top:.65em; }
main:has(.default-header) .section .b-acc__body,
main:has(.default-header) .section .acc-light__body{ padding-bottom:var(--space-grid); }
main:has(.default-header) .section .b-format ul li{
  font-size:15px;
  line-height:1.45;
  max-width:none;
}
main:has(.default-header) .section :is(.b-acc,.acc-light) summary{ padding:var(--space-grid) 0; }
main:has(.default-header) .span-lines.animate .span-line{
  display:inline;
  overflow:visible;
  max-width:none;
}
main:has(.default-header) .span-lines.animate .span-line-inner{
  display:inline;
  max-width:none;
}
main:has(.default-header) .section .b-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
main:has(.default-header) .section:not(.default-header):not(.footer){
  padding-top:calc(var(--space-section) / 2);
  padding-bottom:calc(var(--space-section) / 2);
}
main:has(.default-header) .default-header{
  padding-top:calc(var(--nav-pad-top) + 88px);
  padding-bottom:0;
  border:0;
  box-shadow:none;
}
main:has(.default-header) .default-header + .section{
  padding-top:var(--space-heading);
  border:0;
}
main:has(.default-header) .default-header.cs-hero{
  padding-bottom:var(--space-section);
}
main:has(.default-header) .section.footer{ padding-top:calc(var(--space-section) / 2); }
main:has(.default-header) .container,
main:has(.default-header) .container.medium,
main:has(.default-header) .container.large,
main:has(.default-header) .footer .container.medium,
main:has(.default-header) .footer .container.no-padding,
main:has(.default-header) .nav-bar{
  max-width:1440px;
  padding-left:var(--container-padding);
  padding-right:var(--container-padding);
}
main:has(.default-header) .nav-bar{
  padding-top:var(--nav-pad-top);
  padding-bottom:var(--nav-pad-bottom);
}
main:has(.default-header) .container .flex-col{ min-width:0; }
main:has(.default-header) .nav-bar .btn-text-inner{ font-size:var(--type-body); }
main:has(.default-header) .section .b-acc summary:focus-visible{ outline:2px solid var(--b-accent); outline-offset:4px; }

/* Footer heading stays one line on every page, including homepage. */
main .footer h2{
  display:block;
  white-space:nowrap;
  max-width:100%;
  font-family:'Tilda Sans','Dennis Sans',sans-serif;
  font-size:clamp(20px,4.6vw,64px);
  font-weight:500;
  line-height:1.15;
  letter-spacing:-.015em;
}
main .footer h2 span{
  display:inline;
  white-space:nowrap;
  line-height:inherit;
  font-weight:inherit;
}
main .footer .footer-lead{ font-size:var(--type-body); max-width:42em; line-height:1.65; }

/* Footer CTA: stripe and circle share one row, both vertically centered.
   The row sits fully below the lead, so the button never covers copy. */
@media screen and (max-width:1024px){
  main .footer{ --footer-cta:clamp(8em,12vw,11em); }
  main .footer .footer-lead{ max-width:none; padding-right:0; }
  main .footer .container.medium .row:nth-child(1){
    padding-bottom:20px;
  }
  main .footer .container.medium .row:nth-child(2){
    position:relative;
    min-height:var(--footer-cta);
    padding-top:0;
    padding-bottom:0;
    margin:8px 0 20px;
  }
  main .footer .container.medium .row:nth-child(2) .flex-col{
    display:block;
    height:var(--footer-cta);
    position:relative;
  }
  main .footer .container.medium .row:nth-child(2) .stripe{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    margin:0;
    transform:translateY(-50%);
    z-index:1;
  }
  main .footer .container.medium .row:nth-child(2) .btn-fixed{
    position:absolute !important;
    top:50% !important;
    right:0 !important;
    left:auto !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    width:auto;
    margin:0;
    z-index:2;
  }
}

@media (max-width:720px){
  :root{
    --nav-pad-top:calc(env(safe-area-inset-top,0px) + 28px);
    --nav-pad-bottom:20px;
  }
  main:has(.default-header) .default-header{
    padding-top:calc(var(--nav-pad-top) + 72px);
    margin-bottom:-1px;
  }
  main .footer.section h2,
  main:has(.default-header) .footer.section h2{
    font-size:clamp(20px,5.4vw,28px);
    font-weight:600;
    letter-spacing:-.02em;
    white-space:normal !important;
  }
  main .footer h2,
  main .footer h2 span{ white-space:normal !important; }
  main .footer{ --footer-cta:8em; }
  main .footer .btn-round .btn-click{
    width:var(--footer-cta);
    height:var(--footer-cta);
  }
  .footer .footer-lead{ padding-right:0; }
  .footer .arrow{ display:none; }
  main:has(.default-header) .section .b-steps,
  main:has(.default-header) .section .b-nums{ grid-template-columns:1fr; }
  main:has(.default-header) .section .b-kpis{ grid-template-columns:1fr !important; }
  main:has(.default-header) .section :is(.b-numcard,.b-step,.b-edu-item,.b-case){
    border-top:0;
    padding-top:0;
  }
  main:has(.default-header) .section .b-acc-list > .b-acc:first-child{ border-top:0; }
  main:has(.default-header) :is(.default-header,.section,.container,.row,.flex-col,h1,h2,.b-strip,.b-about img,.b-strip img){
    border:0 !important;
    box-shadow:none !important;
    outline:0;
  }
}