/* ============================================================================================
   Made in Evolve — responsive sheet
   ≥ 1024px : the 1440×800 stage, scaled to the viewport width by the script (tablet landscape,
              laptops, large and very large screens all get the same composition, bigger or smaller)
   <  1024px : the stage is not scaled; every section flows at its natural height and is laid out
              here for tablets in portrait and phones (the script runs in its "mobile" mode)
   ============================================================================================ */

/* ---- tablets in portrait and phones ------------------------------------------------------- */
@media (max-width:1023px){
  :root{--gx:20px}                                   /* side gutter (the boards use 20) */
  html{overflow-x:hidden}
  body{overflow-x:clip}
  #wrap{width:100%!important;zoom:1}
  .st,#hero .st,#header .st,#growth .st,#sphere .st,#cases .st{position:static;left:auto;width:auto;height:auto;margin:0}   /* no fixed composition: everything flows */
  #hero,#growth,#sphere,#cases,#header,#contact,#track,.slide,#slides,#veil,.svcg,#statement,.stick,.row{width:100%}

  /* ---- header: logo and Contact Us; the compact menu only when there is room for it */
  #header{height:auto}
  #header .st{height:auto;display:flex;align-items:flex-start;gap:16px;padding:13px var(--gx) 0}
  #header::before{height:34px}                       /* the band is the desktop one: 34px (30.10) */
  #logo{position:static;width:150px;height:29px;flex:0 0 150px;margin-top:1px}
  #header .nav.fold,#header .nav.cn{display:none}
  #header .nav.cu{position:static;margin-left:auto;order:2;font-size:0;margin-top:1px}
  #header .nav.cu::after{content:"Menu";font-size:11px}   /* the board's Menu (it opens the contact card until a menu exists) */
  #wrap.dim #sphere,#wrap.dim #cases{filter:blur(12px)}

  /* ---- contact: the card is the whole screen and scrolls if it has to */
  #contact{width:100%;height:100%}
  #cpanel{left:0;right:auto;top:0;width:100%;height:100%;translate:100% 0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  #cpanel.in{translate:0 0}
  #cclose{left:auto;right:var(--gx);top:14px}
  #ctitle{left:var(--gx);top:40px;width:calc(100% - 2*var(--gx))}
  .clab{left:var(--gx)}
  .cin,.cline{left:calc(var(--gx) - 8px);width:calc(100% - 2*var(--gx) + 16px)}
  .cin{height:26px;font-size:14px}
  #csubmit{left:calc(var(--gx) - 8px);width:calc(100% - 2*var(--gx) + 16px)}
  :is(#ccons,#cmkt){left:calc(var(--gx) - 7px);width:calc(100% - 2*var(--gx) + 14px)}
  :is(#ccons,#cmkt) span{width:auto;flex:1}
  #cmail{left:var(--gx);top:600px}
  #clegal{left:var(--gx);top:660px}
  #cimg{left:auto;right:var(--gx);top:600px}
  #cpanel::after{content:"";position:absolute;left:0;top:0;width:1px;height:800px}   /* scroll room on short screens */
  .clab,.cin,.cline{margin-top:30px}                 /* the title sits lower here; the fields follow */
  #csubmit{top:405px}#ccons{top:461px}

  /* ---- hero: the footage fills the screen; title above, the seven services listed, the card below */
  #hero{height:100svh;min-height:640px;overflow:hidden}
  #track,.slide,#px,#veil{width:100%;height:100%}
  #px{left:0;top:0}
  #veil,#il{display:none!important}
  #title{left:var(--gx);right:var(--gx);top:20%;width:auto;text-align:center;font-size:clamp(34px,11.4vw,50px);line-height:1.02;letter-spacing:-.04em}
  #title p{white-space:normal}                       /* four lines, as on the board */
  #svcs{display:none;position:absolute;left:var(--gx);right:var(--gx);top:auto;bottom:156px;height:auto;grid-template-columns:1fr 1fr;gap:9px 14px;pointer-events:none}
  .svcg{position:static;width:auto;height:auto;display:flex;align-items:center;gap:8px}
  .svcg .plate{position:relative;flex:0 0 3px;width:3px!important;height:3px!important;transition:none}
  .svcg .plate .pt{display:none}
  .svcg .svc{position:static;margin:0;padding:0;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .svcg .sdesc{display:none}
  #hero.hov .svcg:not(.on) .svc,#hero.hov #cta{opacity:1}
  #cta{left:var(--gx);right:var(--gx);top:auto;bottom:24px;width:auto}
  #hero.intro #cta{translate:0 80px}
  #cta .card,#cta .bar,#cta .body{width:100%}

  /* ---- growth: text, the founding year, the client list, the statement as running text */
  /* one screen tall, as on the board: the description block (the desktop composition, 12/16), the clients,
     the statement pushed to the bottom */
  #growth{height:auto;min-height:100svh;padding:52px var(--gx) 28px;overflow:visible;display:flex;flex-direction:column}
  .stick{position:static;height:auto}
  #stickA{position:relative;height:66px}
  .desc{position:absolute;width:283px}
  .desc:nth-of-type(1){left:0!important;top:0!important}                                   /* over the inline desktop offsets */
  .desc:nth-of-type(2){left:min(78px, calc(100vw - 283px - 2*var(--gx)))!important;top:32px!important}
  #est{position:absolute;left:0;top:51px;width:auto;text-align:left}
  #stickB{display:block;margin-top:80px}
  .row{position:static;height:16px;display:grid;grid-template-columns:102px 1fr;gap:0 14px}
  .row .c{position:static;width:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #growth.hov .row:not(.on) .c{opacity:1}
  #statement{position:static;width:auto;height:auto;margin-top:auto;padding-top:64px}
  .big:not(.mst),.small{display:none}
  .mst{display:block;position:static;white-space:normal;font-size:clamp(26px,7.7vw,40px);letter-spacing:-.04em;line-height:.98}
  .mst .li{text-indent:60px}                          /* the first line steps in, like the desktop composition */
  .mst small{font-size:.36em;letter-spacing:-.02em;vertical-align:.42em;margin:0 .6em 0 .5em}   /* THAT / OF THE / IF THE, inline */

  /* ---- the sphere: the rings first, then the three descriptions, then the manifest */
  #sphere{height:auto;padding:64px 0 72px;overflow:clip}
  #sphere .st{display:flex;flex-direction:column}
  #orb{position:relative;inset:auto;width:100%;height:auto;order:0}
  #rings{position:relative;display:block;width:180%;height:auto;aspect-ratio:1440/800;margin-left:-40%}
  .rl,.rn{font-size:11px}
  .d3{position:static;width:62%;margin:0 var(--gx) 34px;order:1}
  .d3 .t{font-size:13px;line-height:18px}
  #orb+.d3,#yml+.d3{margin-top:8px}
  .d3:nth-of-type(3){margin-left:calc(var(--gx) + 18vw)}      /* II. and III. step to the right (#orb is the first div) */
  .d3:nth-of-type(4){margin-left:calc(var(--gx) + 26vw)}
  #yml{position:static;width:auto;order:2;margin:24px var(--gx) 0;font-size:9px;overflow:hidden}

  /* ---- cases: one column; the photo, then the name, the services and the results */
  #cases{height:auto;padding:96px 0 80px}
  #cases .st{display:grid;grid-template-columns:1fr;gap:100px 20px}
  .cwrap{position:static;width:auto!important;height:auto!important}
  .cstk{position:static}
  #cases .card{width:100%!important;height:auto!important;aspect-ratio:39/56;clip-path:inset(0)}   /* the clip also cuts the fixed preview to the photo */
  /* the site preview: one rectangle fixed in the middle of the screen, seen only through the photo it belongs to */
  .cfl{position:fixed;left:50%;top:50%;translate:-50% -50%;width:min(364px,78vw);height:auto;aspect-ratio:364/201;visibility:visible;will-change:auto}
  #cases .cprev{clip-path:none;transition:none}
  .cprev video{width:100%;height:100%}
  .cdots{display:none}
  .cinfo{height:auto;margin-top:22px;padding:0 var(--gx);display:grid;grid-template-columns:1fr 1fr;gap:22px 14px}
  .cinfo .cn,.cinfo .csb{position:static;margin:0}
  .cinfo .csb{line-height:1.2;padding-top:2px}
  .cinfo .csv,.cinfo .cres{position:static;width:auto;white-space:normal}

  /* ---- nucleo: the statement as running text, the two columns stacked */
  #nucleo{height:auto;min-height:100svh;padding:52px var(--gx) 48px;display:flex;flex-direction:column;overflow:visible}
  #nucleo .st{display:flex;flex-direction:column;gap:44px}
  #nstat{position:static;width:auto;height:auto;zoom:1;left:auto}
  #nyml{position:static;margin:0;width:auto;overflow:hidden;order:3}
  .ncol{position:static;left:auto!important;width:auto;height:auto}
  .ncol h3,.ncol .nt,.ncol .nbtn{position:static}
  .ncol .nt{width:auto;max-width:420px;margin:14px 0 18px}
  .ncol .nt span{display:inline;text-align:left}.ncol .nt span::after{content:" "}
  .ncol .nbtn{display:inline-flex}
}

/* ---- phones: the header lists the services beside the logo; two client columns; no manifest */
@media (max-width:599px){
  #header .nav.fold:nth-child(-n+7){display:block;position:absolute;left:53%!important;top:calc(14px + (var(--i,2) - 2)*14px)!important;font-size:11px}   /* over the inline desktop offsets */
  .row .c:nth-child(3){display:none}
  /* the card is the desktop card, scaled to the width between the gutters (--cz from the script) */
  #cta{zoom:var(--cz,1);left:calc(var(--gx)/var(--cz,1));right:auto;width:253px;bottom:calc(14px/var(--cz,1))}
  #cta .card,#cta .bar,#cta .body{width:253px}
  #yml,#nyml{display:none}
}

/* ---- tablets in portrait: a little more room */
@media (min-width:600px) and (max-width:1023px){
  :root{--gx:24px}
  #header .nav.cn{display:block;position:static;opacity:.96;translate:0 0;pointer-events:auto;transition:none;order:1}
  #header .nav.cn:first-of-type{margin-left:8px}
  #title{font-size:clamp(44px,7vw,64px)}
  #svcs{grid-template-columns:repeat(3,1fr);bottom:180px}
  .svcg .svc{font-size:11px}
  #cta{left:auto;right:var(--gx);width:253px}
  #cta .card,#cta .bar,#cta .body{width:253px}
  .row{grid-template-columns:1fr 1.3fr 1.2fr}
  .row .c{font-size:12px}
  #rings{width:120%;margin-left:-10%}
  #sphere{padding-left:var(--gx);padding-right:var(--gx)}
  #sphere .st{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
  #orb{grid-column:1/-1}
  #yml{grid-column:1;grid-row:2/span 3;margin:8px 0 0;order:0}
  .d3{grid-column:2;margin:8px 0 26px}
  #cases{padding-left:var(--gx);padding-right:var(--gx)}
  #cases .st{grid-template-columns:1fr 1fr;gap:64px 20px}
  .cwrap[data-i="3"]{grid-column:1/-1}
  .cfl{width:min(364px,42vw)}
  .cinfo{padding:0}
  #cpanel{left:auto;right:0;width:420px}            /* a card at the right, like the desktop one */
}

/* ---- phones in landscape: the hero is short, keep the card off the services */
@media (max-width:1023px) and (max-height:520px){
  #hero{min-height:520px}
  #title{top:14%}
  #svcs{bottom:140px;gap:5px 14px}
}

/* ---- reduced motion: the line masks and the header folds settle at once */
@media (prefers-reduced-motion:reduce){
  .li,#header .wm,#header .nav,.cprev,.cfl,.plate,#cpanel,#cpanel .cs,.cline{transition-duration:.01ms!important;transition-delay:0s!important}
}