/* ════════════════════════════════════════════════════════════════
   JENNY LÖWE DESIGNS, Design System v2 "Gallery"
   Ivory paper · charcoal ink · bronze · oversized editorial type.
   Interaction language: clip reveals, magnetic hovers, blend nav,
   custom cursor, marquees, scrub sliders, lightbox.
   ════════════════════════════════════════════════════════════════ */
:root{
  --paper:#f7f4ee; --cream:#ece6d9; --ink:#191b1f; --ink-soft:#23262b;
  --mut:#6b6f77; --mut-d:#9a9eA6;
  --bronze:#a97e56; --bronze-l:#c9a97e; --bronze-d:#8a6544;
  --line:#dcd5c6; --line-d:#33363c;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.22,.7,.16,1);
  --ease-o:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,.9,.28,1);
  --radius:16px; --radius-lg:22px;
}
*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--bronze);color:#fff}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:300;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:var(--sans);background:none;border:none;cursor:pointer;color:inherit}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:.005em}
.si{font-family:var(--serif);font-style:italic;font-weight:500}
.h-xl{font-size:clamp(3rem,9vw,7.6rem)}
.h-lg{font-size:clamp(2.4rem,5.5vw,4.6rem)}
.h-md{font-size:clamp(1.8rem,3.2vw,2.7rem)}
.eyebrow{display:flex;align-items:center;gap:.9rem;font-size:.7rem;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--bronze);margin-bottom:1.6rem}
.eyebrow::before{content:"";width:2.6rem;height:1px;background:var(--bronze)}
.lede{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--mut);max-width:36em;font-weight:300}
.dark{background:var(--ink);color:#ece9e2}
.dark .lede{color:var(--mut-d)}
.cream{background:var(--cream)}
.wrap{width:min(1500px,92vw);margin:0 auto}
section{position:relative;padding:clamp(5rem,10vw,9rem) 0}

/* ── index numbers on sections ── */
.secnum{position:absolute;top:clamp(2rem,4vw,3.5rem);right:4vw;font-family:var(--serif);
  font-style:italic;font-size:clamp(3rem,7vw,6rem);line-height:1;opacity:.08;pointer-events:none}

/* ══ PRELOADER ══ */
#loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:1.4rem;transition:opacity .7s var(--ease),visibility .7s}
#loader.done{opacity:0;visibility:hidden}
#loader img{width:150px;animation:pulse 1.6s ease-in-out infinite}
#loader .bar{width:150px;height:1px;background:var(--line-d);overflow:hidden}
#loader .bar i{display:block;height:100%;background:var(--bronze);width:0;transition:width .3s}
@keyframes pulse{50%{opacity:.55}}

/* ══ SCROLL PROGRESS ══ */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--bronze);z-index:120}

/* ══ NAV, always pure white over any image, with a soft top scrim ══ */
#nav{position:fixed;inset:0 0 auto 0;z-index:110;display:flex;align-items:center;
  justify-content:space-between;padding:1.5rem 4vw;color:#fff;
  transition:transform .5s var(--ease)}
#nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,13,16,.5),rgba(12,13,16,0))}
#nav .logo img{filter:drop-shadow(0 1px 10px rgba(0,0,0,.35))}
#nav ul a{text-shadow:0 1px 12px rgba(0,0,0,.35)}
#nav.hide{transform:translateY(-110%)}
#nav .logo img{height:52px;width:auto}
#nav ul{display:flex;gap:2.6rem;list-style:none;align-items:center}
#nav ul a{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;font-weight:400;
  position:relative;padding:.3rem 0}
#nav ul a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
#nav ul a:hover::after,#nav ul a.active::after{transform:scaleX(1);transform-origin:left}
@media(max-width:980px){#nav ul{display:none}}

/* burger */
#burger{position:relative;z-index:130;width:52px;height:52px;display:grid;place-items:center}
#burger span{position:relative;width:26px;height:1.6px;background:#fff;display:block;transition:.4s var(--ease)}
#burger span::before,#burger span::after{content:"";position:absolute;left:0;width:100%;height:1.6px;background:#fff;transition:.4s var(--ease)}
#burger span::before{top:-8px}#burger span::after{top:8px}
body.menu-open #burger span{background:transparent}
body.menu-open #burger span::before{top:0;transform:rotate(45deg)}
body.menu-open #burger span::after{top:0;transform:rotate(-45deg)}

/* full-screen menu */
#menu{position:fixed;inset:0;z-index:105;background:var(--ink);color:#ece9e2;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-o);display:flex;align-items:center}
body.menu-open #menu{clip-path:inset(0 0 0% 0)}
#menu .inner{width:min(1500px,92vw);margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:4rem;align-items:center}
#menu nav a{display:block;font-family:var(--serif);font-size:clamp(2.6rem,7vw,5.2rem);line-height:1.14;
  color:#ece9e2;position:relative;width:max-content;max-width:100%;
  opacity:0;transform:translateY(40px);transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s}
body.menu-open #menu nav a{opacity:1;transform:none}
#menu nav a em{font-style:italic;color:var(--bronze);font-size:.4em;vertical-align:super;margin-right:1rem;letter-spacing:0}
#menu nav a:hover{color:var(--bronze-l)}
#menu .mimg{aspect-ratio:4/5;overflow:hidden;display:none}
#menu .mimg img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
#menu .mimg img.show{opacity:1}
@media(min-width:981px){#menu .mimg{display:block}}
#menu .mfoot{position:absolute;bottom:2.2rem;left:4vw;right:4vw;display:flex;justify-content:space-between;
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut-d)}

/* ══ HERO ══ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;z-index:-2;
  animation:kenburns 18s var(--ease) both}
@keyframes kenburns{from{transform:scale(1.14)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,13,16,.4),rgba(12,13,16,.06) 42%,rgba(12,13,16,.78))}
.hero .wrap{padding-bottom:9rem}
.hero .lede{color:#ddd8cf}
/* accent-colour label chip behind the hero eyebrow */
.hero .eyebrow{display:inline-flex;width:max-content;max-width:100%;
  background:var(--bronze);color:#fff!important;padding:.55rem .9rem;border-radius:7px;
  box-shadow:0 6px 22px rgba(12,13,16,.28)}
.hero .eyebrow::before{display:none}
/* word-rise animation */
.rise .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.rise .w i{display:inline-block;font-style:inherit;transform:translateY(115%);animation:rise 1s var(--ease-o) forwards}
@keyframes rise{to{transform:none}}
/* scroll hint */
.scrollhint{position:absolute;bottom:2.4rem;right:4vw;display:flex;flex-direction:column;align-items:center;
  gap:.8rem;font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:#fff;opacity:.85}
.scrollhint i{width:1px;height:56px;background:linear-gradient(#fff,transparent);display:block;
  animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ══ MARQUEE ══ */
.marquee{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);padding:1.1rem 0;position:relative}
.dark .marquee,.marquee.on-dark{border-color:var(--line-d)}
.marquee .track{display:inline-flex;gap:3.2rem;padding-right:3.2rem;animation:mq var(--mq-speed,26s) linear infinite;will-change:transform}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee .tk{font-family:var(--serif);font-size:clamp(1.2rem,2.4vw,2rem);font-style:italic;display:inline-flex;align-items:center;gap:3.2rem}
.marquee .tk::after{content:"✦";font-size:.55em;color:var(--bronze)}
/* image marquee */
.marquee.imgs{border:none;padding:0}
.marquee.imgs .track{gap:1.6rem;padding-right:1.6rem;animation-duration:var(--mq-speed,50s)}
.marquee.imgs figure{width:clamp(300px,32vw,480px);flex:none;position:relative;overflow:hidden;
  transition:transform .6s var(--ease-soft),box-shadow .6s var(--ease-soft)}
.marquee.imgs img{width:100%;aspect-ratio:16/10;object-fit:cover}
.marquee.imgs figure:hover{transform:scale(1.03);box-shadow:0 30px 60px -32px rgba(0,0,0,.5)}
.marquee.imgs figcaption{position:absolute;bottom:0;left:0;right:0;padding:1.4rem 1.2rem .8rem;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(10,11,13,.7))}

/* ══ BUTTONS ══ */
.btn{--c:var(--ink);position:relative;display:inline-flex;align-items:center;gap:.9rem;
  font-size:.72rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--c);
  padding:1.15rem 2.6rem;border:1px solid var(--c);overflow:hidden;isolation:isolate;transition:color .45s var(--ease),border-color .45s}
.btn::before{content:"";position:absolute;inset:0;background:var(--bronze);z-index:-1;
  transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover{color:#fff;border-color:var(--bronze)}
.btn:hover::before{transform:none}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(6px)}
.btn.light{--c:#fff}
.btn.solid{background:var(--bronze);border-color:var(--bronze);color:#fff}
.btn.solid::before{background:var(--ink)}
.link-u{position:relative;font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bronze);padding-bottom:.35rem}
.link-u::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--bronze);
  transform-origin:right;transition:transform .45s var(--ease)}
.link-u:hover::after{transform:scaleX(0);transform-origin:left}
/* magnetic wrapper */
.mag{display:inline-block;transition:transform .3s var(--ease)}

/* ══ REVEALS ══ */
.rv{opacity:0;transform:translateY(46px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-img{position:relative;overflow:hidden}
.rv-img::after{content:"";position:absolute;inset:0;background:var(--paper);transform-origin:top;transition:transform 1.1s var(--ease-o)}
.dark .rv-img::after{background:var(--ink)}
.rv-img img{transform:scale(1.15);transition:transform 1.4s var(--ease-o)}
.rv-img.in::after{transform:scaleY(0)}
.rv-img.in img{transform:scale(1)}
[data-stagger]>*{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(2){transition-delay:.12s}
[data-stagger].in>*:nth-child(3){transition-delay:.24s}
[data-stagger].in>*:nth-child(4){transition-delay:.36s}
[data-stagger].in>*:nth-child(5){transition-delay:.48s}

/* ══ ROUNDED CORNERS + GENTLE FRAME-GROW (site-wide) ══ */
.frame{border-radius:var(--radius);overflow:hidden;
  transition:transform .6s var(--ease-soft),box-shadow .6s var(--ease-soft);will-change:transform}
.frame:hover{transform:scale(1.02);box-shadow:0 30px 60px -32px rgba(12,13,16,.45)}
.rv-img,.ba,.modeview,#menu .mimg,.marquee.imgs figure,#lbox img{border-radius:var(--radius)}

/* ══ WORK CARDS ══ */
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.4rem,3vw,3rem)}
.work{position:relative;grid-column:span 6;cursor:pointer}
.work.w7{grid-column:span 7}.work.w5{grid-column:span 5}
.work.w12{grid-column:span 12}.work.w4{grid-column:span 4}
.work.push{margin-top:clamp(2rem,6vw,6rem)}
@media(max-width:900px){.work,.work.w7,.work.w5,.work.w4{grid-column:span 12}.work.push{margin-top:0}}
.work .frame{overflow:hidden;position:relative;border-radius:var(--radius);
  transition:transform .6s var(--ease-soft),box-shadow .6s var(--ease-soft);transform-origin:center;will-change:transform}
.work img{width:100%;aspect-ratio:15/10;object-fit:cover}
.work.w12 img{aspect-ratio:21/9}
.work:hover .frame{transform:scale(1.028);box-shadow:0 34px 70px -34px rgba(12,13,16,.5)}
.work .frame::after{content:"";position:absolute;inset:0;background:rgba(12,13,16,0);transition:.5s}
.work:hover .frame::after{background:rgba(12,13,16,.12)}
.work .cap{display:flex;justify-content:space-between;align-items:baseline;padding-top:1.1rem;gap:1rem}
.work .cap h3{font-size:clamp(1.3rem,2vw,1.8rem);transition:color .3s}
.work:hover .cap h3{color:var(--bronze-d)}
.dark .work:hover .cap h3{color:var(--bronze-l)}
.work .cap .idx{font-family:var(--serif);font-style:italic;color:var(--bronze);font-size:.95rem}
.work .cap p{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin-top:.15rem}
.tag{display:inline-block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;
  padding:.3rem .75rem;border:1px solid;border-radius:2rem;white-space:nowrap}
.t-3d{color:var(--bronze-d);border-color:var(--bronze-l)}
.t-hybrid{color:#3f6d7a;border-color:#9fc0c9}
.t-staging{color:#587247;border-color:#b3c9a1}
.dark .t-3d{color:var(--bronze-l)}.dark .t-hybrid{color:#a8ccd6}.dark .t-staging{color:#c2d8b0}

/* ══ FILTER CHIPS ══ */
.filterbar{display:flex;gap:.7rem;flex-wrap:wrap}
.chip{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;padding:.7rem 1.5rem;
  border:1px solid var(--line);border-radius:3rem;color:var(--mut);transition:.35s var(--ease)}
.chip:hover{border-color:var(--bronze);color:var(--bronze-d)}
.chip.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ══ STATS ══ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
@media(max-width:860px){.stats{grid-template-columns:1fr 1fr;gap:3rem 1.5rem}}
.stat{border-top:1px solid var(--line-d);padding-top:1.4rem}
.stat .n{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;color:var(--bronze-l)}
.stat .n sup{font-size:.4em;font-style:italic}
.stat .l{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mut-d);margin-top:.6rem}

/* ══ MODE ROWS (interactive service list) ══ */
.modes{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:start}
@media(max-width:980px){.modes{grid-template-columns:1fr}}
.mode{border-top:1px solid var(--line);padding:2.2rem 1rem 2.2rem 0;display:grid;
  grid-template-columns:auto 1fr auto;gap:1.6rem;align-items:center;transition:.4s;cursor:pointer;position:relative}
.mode:last-child{border-bottom:1px solid var(--line)}
.mode .no{font-family:var(--serif);font-style:italic;color:var(--bronze);font-size:1rem;width:2.4rem}
.mode h3{font-size:clamp(1.5rem,2.6vw,2.3rem);transition:transform .45s var(--ease)}
.mode p{grid-column:2;font-size:.95rem;color:var(--mut);max-width:34em;max-height:0;overflow:hidden;
  opacity:0;transition:max-height .6s var(--ease),opacity .5s,margin .5s}
.mode .arr{font-size:1.5rem;color:var(--bronze);transform:rotate(-45deg);transition:transform .45s var(--ease)}
.mode:hover h3,.mode.on h3{transform:translateX(10px);color:var(--bronze-d)}
.mode:hover .arr,.mode.on .arr{transform:rotate(0)}
.mode.on p{max-height:8em;opacity:1;margin-top:.6rem}
.modeview{position:sticky;top:14vh;aspect-ratio:4/3;overflow:hidden;display:none}
@media(min-width:981px){.modeview{display:block}}
.modeview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.08);transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.modeview img.show{opacity:1;transform:scale(1)}

/* ══ BEFORE / AFTER SCRUB ══ */
.ba{position:relative;overflow:hidden;user-select:none;touch-action:none;cursor:ew-resize}
.ba img{width:100%;aspect-ratio:16/9.5;object-fit:cover;pointer-events:none}
.ba .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x,50%))}
.ba .after img{position:absolute;inset:0;height:100%}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--x,50%);width:1px;background:#fff;pointer-events:none}
.ba .handle::after{content:"◂ ▸";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;color:var(--ink);width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-size:.8rem;letter-spacing:.06em;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.ba .lbl{position:absolute;top:1.2rem;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:#fff;background:rgba(12,13,16,.55);padding:.45rem 1rem;backdrop-filter:blur(6px);pointer-events:none}
.ba .lbl.b{left:1.2rem}.ba .lbl.a{right:1.2rem}

/* ══ LIGHTBOX ══ */
#lbox{position:fixed;inset:0;z-index:160;background:rgba(12,13,16,.94);display:flex;align-items:center;
  justify-content:center;opacity:0;visibility:hidden;transition:.45s;backdrop-filter:blur(8px)}
#lbox.open{opacity:1;visibility:visible}
#lbox img{max-width:92vw;max-height:86vh;object-fit:contain;transform:scale(.94);transition:transform .45s var(--ease)}
#lbox.open img{transform:none}
#lbox .x{position:absolute;top:2rem;right:4vw;color:#fff;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase}
#lbox .cap{position:absolute;bottom:2rem;left:0;right:0;text-align:center;color:#b9bcc2;
  font-size:.68rem;letter-spacing:.26em;text-transform:uppercase}
#lbox .pv,#lbox .nx{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:2rem;padding:1.5rem;opacity:.6;transition:.3s}
#lbox .pv:hover,#lbox .nx:hover{opacity:1}
#lbox .pv{left:1.5vw}#lbox .nx{right:1.5vw}
[data-lightbox]{cursor:zoom-in}

/* ══ DREAMLIFE BAND ══ */
.dl-note{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mut-d);
  border-left:2px solid var(--bronze);padding-left:1rem;max-width:44em;line-height:1.9}

/* ══ BIG FOOTER ══ */
footer{background:var(--ink);color:#b9bcc2;overflow:hidden}
footer .cta{padding:clamp(5rem,10vw,8rem) 0 3rem;text-align:left;border-bottom:1px solid var(--line-d)}
footer .cta h2{color:#ece9e2}
footer .giant{font-family:var(--serif);font-size:clamp(3.4rem,11.5vw,10.6rem);line-height:.95;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px #4a4e55;transition:.6s;display:block}
footer .giant:hover{color:var(--bronze);-webkit-text-stroke:1px var(--bronze)}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem;padding:4rem 0}
@media(max-width:900px){footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .cols{grid-template-columns:1fr}}
footer h4{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze);margin-bottom:1.3rem;font-weight:400}
footer .cols a{display:block;padding:.28rem 0;transition:.3s;width:max-content}
footer .cols a:hover{color:#fff;transform:translateX(6px)}
footer .fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;border-top:1px solid var(--line-d);
  padding:1.8rem 0 2.2rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#7c8088}
#totop{position:relative}
#totop:hover{color:var(--bronze)}

/* ══ PAGE HERO (interior pages) ══ */
.page-hero{padding:clamp(9rem,16vw,13rem) 0 clamp(3rem,6vw,5rem)}
.page-hero h1{font-size:clamp(2.8rem,7vw,5.6rem)}

/* ══ CASE STUDY EXTRAS ══ */
.meta-row{display:flex;gap:clamp(1.5rem,4vw,4rem);flex-wrap:wrap;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mut)}
.meta-row b{display:block;color:var(--ink);margin-bottom:.4rem;font-weight:400}
.dark .meta-row{color:var(--mut-d)}.dark .meta-row b{color:#ece9e2}

/* ══ PROJECT SHOTS (broken-out case-study figures) ══ */
.pshot{margin:0;cursor:zoom-in}
.pshot .frame img{width:100%;object-fit:cover}
.pshot.wide .frame img{aspect-ratio:16/9}
.pshot.tall .frame img{aspect-ratio:4/5}
.pshot figcaption{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mut);padding-top:1rem}

/* parallax figure */
.plx{overflow:hidden}
.plx img{transform:translateY(var(--py,0)) scale(1.15);will-change:transform}

/* utility */
.tac{text-align:center}
.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}.mt4{margin-top:4rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.noscroll{overflow:hidden}