/* Home hero. The final, readable state is the CSS baseline.
   Outline, blank paper, pocket and zoom finish within 4.85s.
   Runs once; reduced-motion users see the finished state. */
body.homepage .site-header{
  height:var(--site-header-height);min-height:var(--site-header-height);
  padding-inline:max(20px,calc((100% - 1160px)/2));
}
body.homepage .hero{
  --hero-bleed:max(20px,calc((100vw - 1160px)/2));
  width:min(1160px,calc(100% - 40px));
  min-height:calc(100dvh - var(--site-header-height) - 132px);
  grid-template-columns:1fr 1fr;
  gap:56px;
  padding:28px 0 12px;
  align-content:stretch;
  overflow:visible;
}
body.homepage .hero-content{min-width:0}
body.homepage .hero h1{
  font-size:clamp(64px,6.2vw,92px)!important;
  line-height:1.02;
  letter-spacing:-.065em;
  margin-bottom:28px;
}
body.homepage .hero-thesis{
  font-size:24px!important;
  line-height:1.4;
  max-width:560px;
  margin-bottom:20px;
  letter-spacing:-.015em;
}
body.homepage .hero-lead{max-width:480px;margin-bottom:32px}
body.homepage .hero-actions{gap:26px}
body.homepage .hero-art.folder-animation{
  position:relative;
  grid-column:2;
  grid-row:1;
  align-self:stretch;
  width:calc(100% + var(--hero-bleed));
  height:auto;
  min-height:480px;
  margin-right:calc(-1 * var(--hero-bleed));
  overflow:hidden;
  border-radius:0;
  pointer-events:none;
}
.folder-animation-object{
  --folder-end-scale:1.48;
  position:absolute;
  top:50%;left:0;
  display:block;
  width:calc(100% - var(--hero-bleed));
  height:auto;
  transform:translateY(-50%) scale(var(--folder-end-scale));
  transform-origin:0 50%;
}
.folder-animation-back{fill:#f1e5df}
.folder-animation-outline{
  fill:none;stroke:var(--accent);stroke-width:1.4;
  stroke-linejoin:round;stroke-linecap:round;
}
.folder-animation-document{transform:translate(-9px,-23px)}
.folder-animation-paper{fill:var(--sheet);stroke:#bfc4b8;stroke-width:.5}
.folder-animation-service-row text{fill:var(--ink);font-size:5.8px!important;font-weight:400!important}
.folder-animation-pocket{fill:var(--accent)}
body.homepage .status-strip{
  width:min(1160px,calc(100% - 40px));
  margin:0 auto 32px;
  padding:18px 0 0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
body.homepage .status-strip p{padding-right:24px}
body.homepage .status-strip p:first-child{padding-left:0}
body.homepage .status-strip p+p{padding-left:24px}
body.homepage main>section[id]{scroll-margin-top:calc(var(--site-header-height) + 12px)}
body.homepage .client-opinion{width:min(1160px,calc(100% - 40px))}
body.homepage .audience{
  width:min(1160px,calc(100% - 40px));
  display:grid;
  grid-template-columns:1fr;
  align-items:start;
  gap:28px;
  margin:56px auto;
  padding:36px;
  border:0;
  border-radius:28px;
  background:var(--dark);
  color:var(--sheet);
}
body.homepage .audience-intro h2{max-width:780px}
body.homepage .audience-intro h2{font-size:38px!important;line-height:1.15}
body.homepage .audience .section-number{color:#ff9388}
body.homepage .audience-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body.homepage .audience-list article{
  grid-template-columns:28px minmax(0,1fr);
  column-gap:16px;
  min-height:148px;
  padding:20px 22px;
  border:0;
  border-radius:20px;
  background:rgba(255,255,255,.045);
  color:var(--sheet);
}
body.homepage .audience-list article:hover{background:rgba(255,255,255,.075);transform:none}
body.homepage .audience-list span{color:#ff9388}
body.homepage .audience-list h3{margin-bottom:8px;color:var(--sheet);font-size:19px!important;font-weight:500!important;line-height:1.3}
body.homepage .audience-list p{color:#bec2b9;font-size:15px!important;line-height:1.5}
body.homepage .audience + .pricing{padding-top:0}
body.homepage .contact{width:min(1160px,calc(100% - 40px))}
body.homepage .lead-form .error:empty{display:none}
body.homepage .price-table .price{
  font-size:clamp(30px,3vw,36px)!important;
  font-weight:400!important;
  line-height:1.12;
}
body.homepage .price-table .price small{
  font-size:12px!important;
  font-weight:500!important;
}
body.homepage .price-table .price.price-text{
  font-size:18px!important;
  line-height:1.35;
}

@media (prefers-reduced-motion:no-preference){
  .folder-animation.is-playing .folder-animation-outline{animation:folder-outline-draw 1.3s cubic-bezier(.32,0,.16,1) both}
  .folder-animation.is-playing .folder-animation-back{animation:folder-back-reveal .45s 1.95s ease-out both}
  .folder-animation.is-playing .folder-animation-document{animation:folder-document-reveal .7s 1.25s cubic-bezier(.2,.7,.2,1) both}
  .folder-animation.is-playing .folder-animation-pocket{animation:folder-pocket-reveal .6s 2.25s cubic-bezier(.2,.7,.2,1) both}
  .folder-animation.is-playing .folder-animation-object{animation:folder-finish-zoom 1.85s 3s cubic-bezier(.2,.7,.2,1) both}
  .folder-animation.is-playing .folder-animation-service-row{animation:folder-service-reveal .38s cubic-bezier(.2,.7,.2,1) both}
  .folder-animation.is-playing .folder-animation-service-row-1{animation-delay:3.35s}
  .folder-animation.is-playing .folder-animation-service-row-2{animation-delay:3.56s}
  .folder-animation.is-playing .folder-animation-service-row-3{animation-delay:3.77s}
  .folder-animation.is-playing .folder-animation-service-row-4{animation-delay:3.98s}
  .folder-animation.is-playing .folder-animation-service-row-5{animation-delay:4.19s}
  .folder-animation.is-playing .folder-animation-service-row-6{animation-delay:4.4s}
}
@keyframes folder-outline-draw{
  from{stroke-dasharray:1000 1000;stroke-dashoffset:1000}
  to{stroke-dasharray:1000 1000;stroke-dashoffset:0}
}
@keyframes folder-back-reveal{from{opacity:0}to{opacity:1}}
@keyframes folder-document-reveal{
  from{opacity:0;transform:translate(-9px,-12px)}
  to{opacity:1;transform:translate(-9px,-23px)}
}
@keyframes folder-service-reveal{
  from{opacity:0;transform:translateY(2px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes folder-pocket-reveal{
  from{clip-path:inset(100% 0 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes folder-finish-zoom{
  from{transform:translateY(-50%) scale(1)}
  to{transform:translateY(-50%) scale(var(--folder-end-scale))}
}
@media(max-height:800px) and (min-width:1024px){
  body.homepage .hero{min-height:calc(100dvh - var(--site-header-height) - 122px);gap:48px;padding:22px 0 8px}
  body.homepage .hero h1{font-size:72px!important;margin-bottom:20px}
  body.homepage .hero-lead{margin-bottom:24px}
  body.homepage .hero-art.folder-animation{min-height:400px}
  .folder-animation-object{--folder-end-scale:1.28}
  body.homepage .status-strip{margin-bottom:24px;padding-top:16px}
}
@media(max-width:1100px){
  body.homepage .hero{gap:32px}
  body.homepage .hero-thesis{font-size:20px!important}
  body.homepage .hero-actions{gap:18px}
}
@media(max-width:1023px){
  body.homepage .hero h1{font-size:64px!important}
}
@media(max-width:720px){
  body.homepage .site-header{padding-inline:20px}
  body.homepage main>section[id]{scroll-margin-top:0}
  body.homepage .hero{
    --hero-bleed:0px;
    width:calc(100% - 40px);
    min-height:calc(100dvh - var(--site-header-height));
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:28px 0 12px;
  }
  body.homepage .hero h1{font-size:56px!important;margin-bottom:22px}
  body.homepage .hero-thesis{font-size:20px!important}
  body.homepage .hero-lead{margin-bottom:24px}
  body.homepage .hero-art.folder-animation{
    align-self:center;
    width:min(100%,360px);
    height:280px;
    min-height:280px;
    margin:0 auto;
    border-radius:0;
    flex:none;
  }
  .folder-animation-object{width:100%}
  .folder-animation-object{--folder-end-scale:1.18}
  .folder-animation-service-row text{font-size:8.5px!important}
  body.homepage .status-strip{display:none}
  body.homepage .audience{gap:24px;margin:40px auto;padding:28px 24px;border-radius:24px}
  body.homepage .audience-intro h2{font-size:34px!important}
  body.homepage .audience-list{grid-template-columns:1fr;gap:12px}
  body.homepage .audience-list article{grid-template-columns:24px minmax(0,1fr);gap:10px;min-height:0;padding:18px 14px}
  body.homepage .audience-list h3{font-size:18px!important}
  body.homepage .audience-list p{font-size:14px!important}
}
@media(max-width:359px){body.homepage .hero h1{font-size:48px!important}}