/* Marketing Frontiers 2025 — case study v2
   Base reference: autotraderbyoktra.com (full-bleed film, deep navy, uppercase statements, numbered chapters).
   Bar: c2mtl.koki-kiko.com (giant Neue Montreal, colliding circles, side rail, pinned sequences).
   Tokens match the Figma variables used in v1. */

@font-face{font-family:"PP Neue Montreal";font-weight:400;font-display:swap;src:url(assets/fonts/PPNeueMontreal-Book.woff2) format("woff2")}
@font-face{font-family:"PP Neue Montreal";font-weight:500;font-display:swap;src:url(assets/fonts/PPNeueMontreal-Medium.woff2) format("woff2")}
@font-face{font-family:"PP Neue Montreal";font-weight:700;font-display:swap;src:url(assets/fonts/PPNeueMontreal-Bold.woff2) format("woff2")}
@font-face{font-family:"PP Neue Montreal Mono";font-weight:400;font-display:swap;src:url(assets/fonts/PPNeueMontrealMono-Book.woff2) format("woff2")}
@font-face{font-family:"Barclays Effra";font-weight:900;font-style:italic;font-display:swap;src:url(assets/fonts/BarclaysEffra_HeIt.ttf) format("truetype")}

:root{
  --navy-950:#0b0e24;--navy-900:#1a2042;--navy-600:#3b4172;
  --blue-950:#00004f;--blue-700:#0900fe;--blue-500:#0a6dff;
  --cyan-500:#00aeef;--cyan-300:#6fe8ff;--cyan-100:#ddfbff;
  --paper:#f2f2f2;--panel:#e0e0e0;--ink:#141414;--black:#0d0d0d;
  --family-display:"PP Neue Montreal",system-ui,sans-serif;
  --family-mono:"PP Neue Montreal Mono",ui-monospace,monospace;
  --family-brand:"Barclays Effra","PP Neue Montreal",sans-serif;
  --rail:56px;
  --pad:clamp(20px,2.4vw,44px);
  --ease:cubic-bezier(.2,.7,.1,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--navy-950);color:#fff;font:400 16px/1.5 var(--family-display);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.is-loading{overflow:hidden}
img,video,canvas{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
main{margin-right:var(--rail)}
main > section:not(.hero){position:relative;z-index:1}

/* ---------- type ---------- */
.mono{font-family:var(--family-mono);font-size:12px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase}
.label{font-weight:500;font-size:clamp(13px,1.05vw,18px);letter-spacing:.04em;text-transform:uppercase}
.h-xl{font-weight:500;font-size:clamp(46px,9.2vw,200px);line-height:.86;letter-spacing:-.045em}
.body-l{font-size:clamp(18px,1.6vw,30px);line-height:1.3;letter-spacing:-.01em;max-width:30em}
.statement{font-weight:700;font-size:clamp(26px,4.1vw,88px);line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;text-align:right}
.statement--left{text-align:left}
.statement .w{display:inline-block;opacity:.14}
.l{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.l > span{display:block;will-change:transform}
.pill{display:inline-flex;align-items:center;border:1px solid currentColor;border-radius:999px;padding:12px 22px;font-size:14px;line-height:1;transition:background .4s var(--ease),color .4s var(--ease)}
.pill:hover{background:#fff;color:var(--navy-950)}
.tag{display:inline-block;border:1px solid currentColor;border-radius:999px;padding:6px 12px;font:400 11px/1 var(--family-mono);letter-spacing:.06em;text-transform:uppercase}
.clip{position:relative;overflow:hidden;background:var(--navy-900)}
.clip img,.clip video{width:100%;height:100%;object-fit:cover}
.r-16x9{aspect-ratio:16/9}.r-1x1{aspect-ratio:1/1}
.fig figcaption{margin-top:12px;opacity:.7}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;opacity:0}
.cursor span{display:grid;place-items:center;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--cyan-500);color:var(--navy-950);font:500 12px/1 var(--family-mono);text-transform:uppercase;letter-spacing:.06em;overflow:hidden;white-space:nowrap;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease)}
.cursor.is-label span{width:92px;height:92px;margin:-46px}
@media (hover:none){.cursor{display:none}}

/* ---------- rail ---------- */
.rail{position:fixed;right:0;top:0;bottom:0;padding-top:var(--rail);width:var(--rail);z-index:40;background:#fff;color:var(--ink);display:flex;flex-direction:column;align-items:center;font-size:13px;font-weight:500;line-height:1}
.rail__brand,.rail__nav a,.rail__cta{writing-mode:vertical-rl}
.rail__brand{padding:18px 0}
.rail__nav{margin-top:auto;display:flex;flex-direction:column;align-items:center}
.rail__nav a{padding:10px 0;opacity:.38;transition:opacity .3s}
.rail__nav a:hover,.rail__nav a.is-active{opacity:1}
.rail__pct{padding:14px 0}
.rail__cta{width:100%;height:132px;background:var(--cyan-500);color:var(--navy-950);display:flex;align-items:center;justify-content:center;gap:8px;flex:none;transition:background .3s}
.rail__cta:hover{background:var(--cyan-300)}
.rail__cta b{font-weight:500}

/* ---------- burger + slide-in menu ---------- */
.burger{position:fixed;right:0;top:0;z-index:60;width:56px;height:56px;padding:0;border:0;background:var(--ink);cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger i{display:block;width:26px;height:1.5px;background:#fff;transition:transform .5s var(--ease),opacity .25s}
.burger.is-open i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.burger:focus-visible,.menu a:focus-visible{outline:2px solid var(--cyan-300);outline-offset:3px}
.menu{position:fixed;left:0;top:0;bottom:0;right:var(--rail);z-index:45;background:var(--blue-700);color:#fff;padding:var(--pad);display:flex;flex-direction:column;justify-content:space-between;gap:2vh;overflow-y:auto;visibility:hidden}
.menu__bar{display:flex;justify-content:space-between}
.menu__list a{padding:.5vh 0 .7vh}
.menu__list .index__n{font-size:min(3vw,4.2vh)}
.menu__list .index__t b{font-size:min(4.2vw,5.1vh)}
.menu__list .index__t i{font-size:min(1.2vw,1.8vh);margin-top:.15em}

/* ---------- hero ---------- */
.hero{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;z-index:0;background:var(--navy-900)}
.hero__meta{position:absolute;left:var(--pad);right:var(--pad);top:var(--pad);display:flex;justify-content:space-between}
.hero__cta{position:absolute;right:var(--pad);bottom:var(--pad);color:#fff;backdrop-filter:blur(8px);background:rgba(11,14,36,.25)}
.hero__block{position:absolute;left:0;bottom:0;transform:translateY(101%);will-change:transform;background:var(--ink);padding:clamp(14px,1.6vw,28px) clamp(28px,5vw,96px) clamp(10px,1.2vw,22px) var(--pad)}
.hero__title{font-weight:500;font-size:clamp(54px,11.4vw,250px);line-height:.86;letter-spacing:-.05em}
.hero__title sup{font-size:.36em;letter-spacing:-.02em;vertical-align:top;position:relative;top:.22em;margin-left:.08em;color:var(--cyan-500)}

.hero__runway{height:280vh}
.hero__roll{--h:clamp(120px,16.32vw,300px);position:absolute;left:50%;top:45%;width:min(80vw,1100px);height:var(--h);transform:translate(-50%,-50%);perspective:1600px}
/* Each mark is one face of a cube var(--h) deep. Faces turn about the cube's centre, so the top edge of the
   face coming up from below stays joined to the bottom edge of the face leaving over the top. */
.roll{position:absolute;inset:0;display:grid;place-items:center;visibility:hidden;transform-origin:50% 50% calc(var(--h) * -.5);transform:rotateX(-90deg);backface-visibility:hidden;will-change:transform}
.roll > img{height:var(--h);width:auto;max-width:none}
.roll--eagle > img{height:calc(var(--h) * .672)}
/* G. + globe, sized from the Figma lockup: 154px type and a 120px globe inside the 235px box */
.roll__in{display:flex;align-items:center;height:var(--h);font-size:calc(var(--h) * .657);font-weight:500;line-height:.86;letter-spacing:-.01em}
.roll__in img{height:calc(var(--h) * .509);width:calc(var(--h) * .509);margin-left:-.02em}

/* ---------- intro ---------- */
.intro{background:var(--navy-950);padding:26vh var(--pad) 10vh}
.intro__grid{display:grid;grid-template-columns:1fr 2.6fr;gap:var(--pad);align-items:start}
.intro__side{display:flex;flex-direction:column;align-items:flex-start;gap:14vh;padding-top:.6vw}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad);margin-top:22vh}
.facts div{border-top:1px solid rgba(255,255,255,.22);padding-top:14px}
.facts dt{opacity:.5;margin-bottom:8px}

/* ---------- chapter index ---------- */
.index{background:var(--blue-700);padding:16vh var(--pad)}
.index__list a{display:grid;grid-template-columns:auto 1fr;align-items:start;padding:1.1vw 0 1.3vw;border-top:1px solid rgba(255,255,255,.28);transition:color .3s}
.index__list li:last-child a{border-bottom:1px solid rgba(255,255,255,.28)}
.index__n{font-weight:700;font-size:clamp(28px,3.6vw,72px);line-height:1;letter-spacing:-.03em}
.index__t{text-align:right}
.index__t b{display:block;font-weight:700;font-size:clamp(30px,4.7vw,100px);line-height:.98;letter-spacing:-.025em;text-transform:uppercase}
.index__t i{display:block;font-style:normal;font-size:clamp(14px,1.3vw,24px);opacity:.82;margin-top:.3em}
.index__t{transition:transform .5s var(--ease)}
.index__list a:hover{color:var(--cyan-300)}
.index__list a:hover .index__t{transform:translateX(-2.4vw)}

/* ---------- chapter header ---------- */
.chapter{position:relative;padding:20vh var(--pad) 10vh;overflow:hidden}
.chapter__n{position:absolute;right:var(--pad);top:4vh;font-weight:500;font-size:clamp(140px,30vw,620px);line-height:.8;letter-spacing:-.06em;color:rgba(20,20,20,.07);pointer-events:none}
.chapter--dark .chapter__n{color:rgba(255,255,255,.07)}
.chapter h2{position:relative}

/* ---------- 01 brief ---------- */
.brief{background:var(--paper);color:var(--ink)}
.brief__copy,.system__copy,.space__copy{display:grid;grid-template-columns:1fr 2.6fr;gap:var(--pad);padding:0 var(--pad) 16vh}
.stack{padding:0 var(--pad) 18vh}
.stack__card{position:sticky;top:8vh;height:68vh;min-height:420px;background:var(--bg);color:var(--fg);padding:clamp(20px,2.6vw,48px);display:flex;flex-direction:column;justify-content:space-between;margin-bottom:8vh;transform-origin:50% 0;will-change:transform}
.stack__card:nth-child(2){top:calc(8vh + 28px)}
.stack__card:nth-child(3){top:calc(8vh + 56px);margin-bottom:0}
.stack__n{font-weight:500;font-size:clamp(110px,19vw,380px);line-height:.78;letter-spacing:-.06em}
.stack__card h3{font-weight:500;font-size:clamp(28px,4vw,80px);line-height:.95;letter-spacing:-.035em;margin-bottom:.3em}
.stack__card p{font-size:clamp(16px,1.4vw,26px);line-height:1.3;max-width:26em;opacity:.8}

/* ---------- 02 idea ---------- */
.idea{background:var(--navy-900)}
.idea__pin{position:relative;height:100vh;height:100svh;overflow:hidden}
.idea__canvas{position:absolute;inset:0;width:100%;height:100%}
.idea__logo{position:absolute;left:50%;top:50%;width:min(52vw,900px);aspect-ratio:16/9;transform:translate(-50%,-50%);opacity:0;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side,#000 55%,transparent 100%)}
.idea__logo video{width:100%;height:100%;object-fit:cover}
.idea__tag{position:absolute;left:var(--pad);top:var(--pad);display:flex;gap:3em}
.idea__tag span:first-child,.motion__tag span:first-child{color:var(--cyan-500)}
.idea__lines{position:absolute;left:var(--pad);bottom:var(--pad);right:var(--pad);height:2em}
.idea__lines p{position:absolute;left:0;bottom:0;opacity:0}
.idea__lines p:first-child{opacity:1}
.idea__count{position:absolute;right:var(--pad);top:var(--pad)}
.idea__refs{display:grid;grid-template-columns:1.7fr 1fr;gap:var(--pad);padding:16vh var(--pad) 18vh;align-items:end}
.idea__note{display:flex;flex-direction:column;gap:8vh}
[data-inner]{transform:scale(1.18)}

/* ---------- early ideas (pinned warp) ---------- */
.ideas{background:#eee;color:var(--ink)}
.ideas__pin{position:relative;height:100vh;height:100svh;overflow:hidden}
.ideas__tag{position:absolute;left:var(--pad);right:var(--pad);top:var(--pad);display:flex;justify-content:space-between;z-index:3}
.ideas__title{position:absolute;left:var(--pad);bottom:var(--pad);z-index:3}
.ideas__field{position:absolute;inset:0}
.ideas__field img{position:absolute;left:50%;top:50%;width:38vw;max-width:none;height:auto;transform:translate(-50%,-50%);box-shadow:0 20px 50px -20px rgba(13,13,13,.35);will-change:transform,opacity}

/* ---------- big screen (fixed behind, revealed as the page scrolls off it) ---------- */
.bigscreen{position:relative;height:190vh;clip-path:inset(0);background:#000}
.bigscreen__fixed{position:fixed;left:0;top:0;right:var(--rail);height:100vh;height:100svh;overflow:hidden;background:#000}
.bigscreen__stage{position:absolute;left:50%;top:50%;width:max(100%,calc(100vh * 1.4953));aspect-ratio:1600/1070;transform:translate(-50%,-50%)}
.bigscreen__stage img{position:absolute;inset:0;width:100%;height:100%}
.bigscreen__stage video{position:absolute;left:calc(11.1% - 5px);top:calc(33.8% - 5px);width:calc(77.9% + 10px);height:calc(33.7% + 10px);object-fit:cover}
.bigscreen__cap{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);display:flex;justify-content:space-between}
.bigscreen__cap span:first-child{color:var(--cyan-500)}

/* ---------- 03 system ---------- */
.system{background:var(--navy-900);overflow:hidden}
.discs{display:flex;justify-content:center;padding:2vh 0 12vh}
.disc{flex:none;width:27vw;height:27vw;border-radius:50%;background:var(--c);margin:0 -5.2vw;mix-blend-mode:screen;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;color:#fff;will-change:transform}
.disc--ink{color:var(--navy-950)}
.disc b{font-weight:500;font-size:clamp(16px,1.7vw,32px);letter-spacing:-.02em}
.disc i{font:400 11px/1 var(--family-mono);letter-spacing:.06em}
.marquee{padding:4vh 0 10vh;overflow:hidden}
.marquee__row{display:flex;white-space:nowrap;font:italic 900 clamp(64px,13.5vw,280px)/.92 var(--family-brand);text-transform:uppercase;letter-spacing:-.02em;will-change:transform}
.marquee__row span{flex:none;padding-right:.25em}
.marquee__row--outline{color:transparent;-webkit-text-stroke:2px var(--cyan-500)}
.modes{display:grid;grid-template-columns:1fr 1fr}
.mode{background:var(--cyan-500);color:var(--navy-950);min-height:92vh;padding:9vh 5vw 5vh;display:flex;flex-direction:column;justify-content:space-between;gap:8vh}
.mode--alt{background:var(--blue-700);color:#fff}
.mode__art{box-shadow:0 40px 80px -30px rgba(0,0,40,.6);overflow:hidden}
.mode__art img{width:100%}
.mode figcaption{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.mode figcaption b{font-weight:500;font-size:clamp(44px,8vw,170px);line-height:.82;letter-spacing:-.05em}
.mode figcaption .mono{text-align:right;padding-bottom:.6em}

/* ---------- 04 motion ---------- */
.motion{background:var(--black);height:100vh;height:100svh;overflow:hidden}
.motion__track{display:flex;align-items:center;gap:4vw;height:100%;width:max-content;padding:0 var(--pad);will-change:transform}
.motion__intro{flex:none;width:44vw;display:flex;flex-direction:column;gap:5vh}
.motion__tag{display:flex;gap:3em}
.motion__intro .body-l{max-width:20em;opacity:.75}
.reel{flex:none;width:56vw}
.reel .clip{aspect-ratio:16/9}
.reel--xl{width:118vw}.reel--xl .clip{aspect-ratio:32/9}
.reel--photo{width:64vw}
.reel--photo img{width:116%;max-width:none;margin-left:-8%}
.reel figcaption{margin-top:14px;display:flex;gap:2em;opacity:.8}
.reel figcaption span{color:var(--cyan-500)}
.motion__end{flex:none;width:62vw;padding-left:6vw;color:var(--cyan-500)}

/* ---------- 05 space ---------- */
.space{background:var(--paper);color:var(--ink)}
.journey__pin{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--black);color:#fff}
.journey__img{position:absolute;inset:0;overflow:hidden;transform:translateY(100%);will-change:transform}
.journey__img.is-first{transform:none}
.journey__img img{width:100%;height:100%;object-fit:cover}
.journey__block{position:absolute;left:0;bottom:0;width:min(48vw,720px);background:var(--ink);padding:clamp(18px,2.2vw,40px) clamp(18px,2.2vw,40px) clamp(18px,2.2vw,40px) var(--pad)}
.journey__n{margin-bottom:2.4vw;opacity:.7}
.journey__n b{font-weight:400;color:var(--cyan-500)}
.journey__texts{position:relative;height:clamp(190px,17vw,330px)}
.journey__text{position:absolute;inset:0;opacity:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.journey__text:first-child{opacity:1}
.journey__text h3{font-weight:500;font-size:clamp(40px,6vw,120px);line-height:.88;letter-spacing:-.045em}
.journey__text p{font-size:clamp(16px,1.35vw,24px);line-height:1.3;max-width:22em;opacity:.8}
.journey__bar{position:absolute;left:0;top:0;width:100%;height:4px;background:rgba(255,255,255,.18)}
.journey__bar i{display:block;height:100%;background:var(--cyan-500);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- 06 kit ---------- */
.kit{background:var(--panel);color:var(--ink);overflow:hidden}
.kit__field{position:relative;height:210vh;margin:0 var(--pad)}
.piece{position:absolute;will-change:transform}
.piece img{width:100%;filter:drop-shadow(0 30px 40px rgba(13,13,13,.3))}
.piece figcaption{margin-top:14px;opacity:.6}
.piece--badge{left:2%;top:1%;width:23vw}
.piece--lightp{left:43%;top:7%;width:15vw}
.piece--cue{right:1%;top:0;width:27vw}
.piece--lectern{left:33%;top:50%;width:8.5vw}
.piece--lightl{right:3%;top:47%;width:36vw}
.piece--reg{left:2%;top:84%;width:52vw}
.kit__copy{position:absolute;left:2%;top:47%;width:24vw;max-width:none}

/* ---------- 07 outcome ---------- */
.outcome{background:var(--cyan-500);color:var(--navy-950);padding:14vh var(--pad) 20vh}
.outcome__tag{display:flex;gap:3em;margin-bottom:10vh}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad);margin-bottom:22vh}
.stats li{border-top:2px solid var(--navy-950);padding-top:16px}
.stats b{display:block;font-weight:500;font-size:clamp(80px,14vw,300px);line-height:.8;letter-spacing:-.06em;margin:0 0 .14em -.04em}
.outcome .statement{max-width:17em}

/* ---------- footer ---------- */
.footer{position:relative;z-index:1;background:var(--black);margin-right:var(--rail);padding:14vh 0 0;overflow:hidden}
.footer > p{padding:0 var(--pad);opacity:.6}
.footer__next{display:block;padding:2vh 0 10vh}
.footer .marquee__row{font:500 clamp(64px,14vw,300px)/1 var(--family-display);text-transform:none;letter-spacing:-.05em}
.footer__next:hover .marquee__row{color:var(--cyan-500)}
.footer__bar{display:flex;justify-content:space-between;padding:var(--pad);border-top:1px solid rgba(255,255,255,.2)}

/* ---------- small screens / reduced motion: no pins, natural flow ---------- */
@media (max-width:860px),(prefers-reduced-motion:reduce){
  .motion{height:auto;padding:14vh 0}
  .motion__track{flex-direction:column;align-items:stretch;width:auto;height:auto;gap:8vh}
  .motion__intro,.reel,.reel--xl,.reel--photo,.motion__end{width:100%;padding-left:0}
  .journey__pin{height:auto;overflow:visible;background:var(--ink)}
  .journey__img{position:relative;inset:auto;transform:none!important;aspect-ratio:4/3}
  .journey__block{position:relative;width:100%}
  .journey__texts{height:auto}
  .journey__text{position:relative;opacity:1;margin-bottom:28px}
  .journey__bar{display:none}
  .idea__lines p{opacity:1;position:relative;display:none}
  .idea__lines p:last-child{display:block}
  .idea__lines{height:auto}
  .statement .w{opacity:1}
  .hero__runway{height:120vh}
  .ideas__pin{height:auto;padding:14vh var(--pad) 10vh}
  .ideas__tag,.ideas__title{position:relative;left:auto;right:auto;top:auto;bottom:auto}
  .ideas__field{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8vh 0}
  .ideas__field img{position:relative;left:auto;top:auto;width:100%;transform:none}
  .bigscreen{height:auto;clip-path:none}
  .bigscreen__fixed{position:relative;right:auto;height:auto;aspect-ratio:1600/1070}
  .bigscreen__stage{width:100%}
}
@media (max-width:860px){
  :root{--rail:0px}
  .rail{display:none}
  .menu__bar{padding-right:64px}
  .menu__list .index__n{font-size:min(8vw,4.4vh)}
  .menu__list .index__t b{font-size:min(9vw,5vh)}
  .menu__list .index__t i{font-size:min(3.6vw,1.9vh)}
  .intro__grid,.brief__copy,.system__copy,.space__copy,.idea__refs,.modes,.facts{grid-template-columns:1fr}
  .intro__side{gap:24px;flex-direction:row;justify-content:space-between;width:100%}
  .statement{text-align:left}
  .facts{margin-top:10vh}
  .hero__meta span:nth-child(2){display:none}
  .hero__cta{display:none}
  .stats{grid-template-columns:1fr 1fr;row-gap:8vh}
  .disc{width:44vw;height:44vw;margin:0 -12vw}
  .mode{min-height:0}
  .kit__field{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:28px;padding-bottom:12vh}
  .piece,.kit__copy{position:relative;inset:auto;width:auto;left:auto;right:auto;top:auto}
  .kit__copy,.piece--reg,.piece--lightl{grid-column:1/-1}
  .footer__bar{flex-direction:column;gap:8px}
}