/* The Mahotsav website · page layout only. Components come from components/components.css, values from tokens (via styles.css).
   Motion is a website-only exception to the system's "fades only" rule, using --ease-expressive and --duration-reveal. */
:root{--nav-h:calc(var(--space-6) + var(--space-2) + var(--space-4) * 2)}
@media (max-width:640px){:root{--nav-h:calc(var(--tap-min) + var(--space-3) * 2)}}
html{scroll-padding-top:var(--nav-h)}
html.lenis,html.lenis body{height:auto}.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);overflow-x:clip}
:where(a:not(.btn)){color:var(--link)}:where(a:not(.btn)):hover{color:var(--link-hover)}
::selection{background:var(--selection-bg);color:var(--selection-fg)}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--page-margin)}
.section{padding:var(--gap-section) 0}
.section--sunken{background:var(--bg-sunken)}
.big{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-56);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);margin:0}
.big em{font-style:italic;color:var(--text-accent)}
.on-deep .big em,.on-deep .section-header__title em{color:var(--text-on-deep-accent)}
.on-deep .section-header__label{color:var(--text-on-deep-accent)}
.section-header{margin-bottom:var(--space-8)}
.section-header .section-header__title{font-size:var(--size-56);letter-spacing:var(--tracking-tight)}
.section-header .section-header__intro{font-size:var(--type-body-lg-size)}

/* ---------- reveals ---------- */
[data-rv]{opacity:0;transform:translateY(var(--space-4));transition:opacity var(--duration-reveal) var(--ease-expressive),transform var(--duration-reveal) var(--ease-expressive);transition-delay:var(--d,0s)}
[data-rv].is-in{opacity:1;transform:none}
.m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em;margin:0 -.04em -.12em}
.m .w{display:inline-block;transform:translateY(110%);transition:transform var(--duration-reveal) var(--ease-expressive);transition-delay:calc(var(--i) * 60ms + var(--d0,0ms))}
.is-in .m .w{transform:none}
.img-rv{overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path calc(var(--duration-reveal) * 1.2) var(--ease-expressive);transition-delay:var(--d,0s)}
.img-rv>.zoom{height:100%;transform:scale(1.25);transition:transform calc(var(--duration-reveal) * 1.8) var(--ease-expressive);transition-delay:var(--d,0s)}
.img-rv.is-in{clip-path:inset(0)}.img-rv.is-in>.zoom{transform:none}

/* ---------- hero: editorial split. Copy on wine left; two photo columns drift in opposite directions right ---------- */
.hero{background:var(--gradient-deep);color:var(--text-on-deep)}
/* padding matches .nav__inner/.wrap exactly (same page-margin inset at every width, not just above content-max) so the hero text lines up with the nav logo regardless of whether the hero is capped or full-bleed */
.hero__inner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:minmax(0,1fr);height:calc(100svh - var(--nav-h));min-height:560px;max-width:var(--content-max);margin:0 auto;padding:0 var(--page-margin)}
.hero__copy{container-type:inline-size;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-5);padding:var(--space-8) var(--space-8) var(--space-8) 0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.hero__copy::-webkit-scrollbar{display:none}
.hero__label{color:var(--text-on-deep-accent);padding-left:var(--tracking-caps)}
/* sized off the copy column's own width (cqi), not the viewport's — the 5fr/6fr split means vw alone doesn't track how much room the headline actually has; vh still caps it on short windows. Floor matches the mobile breakpoint's own ceiling (56) so crossing 900px is continuous instead of a jump; wrapping to 2 lines in the tighter part of this range is fine since the hero no longer clips */
.hero__title{margin:0;display:flex;flex-direction:column;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:clamp(var(--size-56),min(14cqi,9vh),104px);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
.hero__title em{font-style:italic;color:var(--text-on-deep-accent)}
.hero__div{width:var(--divider-short);color:var(--text-on-deep-accent)}
.hero__sub{margin:0;max-width:min(40ch,90cqi);font-size:var(--type-body-lg-size);line-height:var(--leading-relaxed);color:var(--text-on-deep-muted);text-wrap:pretty}
.hero__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.hero__collage{position:relative;min-height:0;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:1fr 1fr;gap:var(--space-4);padding:0 var(--space-4);-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);animation:fade 1.6s ease .3s both}
.hc__col{overflow:hidden;height:100%}
.hc__run{display:flex;flex-direction:column;gap:var(--space-4);will-change:transform}
.hc__col--up .hc__run{animation:hc-up 48s linear infinite}
.hc__col--down .hc__run{animation:hc-down 48s linear infinite}
.hc__tile{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface-on-deep)}
.hc__tile--arch{aspect-ratio:3/4;border-radius:var(--radius-pill) var(--radius-pill) 0 0;outline:var(--border-frame);outline-offset:calc(var(--space-2) * -1)}
.hc__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.late{opacity:0;animation:fade-up var(--duration-reveal) var(--ease-expressive) forwards;animation-delay:var(--d,1.6s)}
@keyframes hc-up{from{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--space-4) / 2))}}
@keyframes hc-down{from{transform:translateY(calc(-50% - var(--space-4) / 2))}to{transform:translateY(0)}}
@media (max-height:700px){.hero__copy{gap:var(--space-4)}}
/* below this width the 5fr/6fr split leaves too little room for the headline to stay on its two intended lines, so the hero switches to the same stacked layout as mobile */
@media (max-width:900px){
.hero__inner{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:auto;min-height:calc(100svh - var(--nav-h));padding:0}
.hero__copy{padding:var(--space-6) var(--page-margin) var(--space-5);gap:var(--space-4);overflow:visible}
.hero__title{font-size:clamp(var(--size-40),8vw,var(--size-56))}
.hero__sub{font-size:var(--type-body-size)}
.hero__actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}.hero__actions .btn{min-width:0;padding-left:var(--space-3);padding-right:var(--space-3);white-space:normal;text-align:center}
.hero__actions .btn--on-deep,.hero__actions .btn--on-deep:hover{box-shadow:none;border:var(--border-width-hair) solid var(--text-on-deep-accent)}
.hero__collage{grid-template-columns:1fr;grid-template-rows:1fr;padding:0 0 var(--space-6);height:auto;min-height:260px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--space-3),#000 calc(100% - var(--space-3)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--space-3),#000 calc(100% - var(--space-3)),transparent)}
.hc__col--down{display:none}
.hc__run{flex-direction:row;gap:var(--space-3);height:100%;width:max-content}
.hc__col--up .hc__run{animation:hc-left 40s linear infinite}
.hc__tile{height:100%;aspect-ratio:3/4;width:auto;border-radius:var(--radius-pill) var(--radius-pill) 0 0;outline:var(--border-frame);outline-offset:calc(var(--space-2) * -1)}
.hero__collage::after{content:"";position:absolute;left:0;right:0;bottom:var(--space-6);height:var(--border-width-hair);background:var(--border-gold)}
@keyframes hc-left{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--space-3) / 2))}}
}
@media (max-width:640px){.hero__title{font-size:var(--size-40)}}


/* ---------- marquee (JS-driven, reacts to scroll speed and direction) ---------- */
.marquee{overflow:hidden;background:var(--bg-deep);border-block:var(--border-width-hair) solid var(--border-on-deep);padding:var(--space-6) 0}
.marquee__track{display:flex;width:max-content;will-change:transform}
.marquee__set{display:flex;align-items:center;gap:var(--space-7);padding-right:var(--space-7);font-family:var(--font-display);font-size:var(--size-56);line-height:1;white-space:nowrap}
.marquee__set span{color:var(--text-on-deep)}
.marquee__set span:nth-of-type(even){font-style:italic;color:var(--text-on-deep-accent)}
.marquee__set b{width:calc(var(--divider-ornament-size) * 1.6);height:calc(var(--divider-ornament-size) * 1.6);border:var(--border-frame);transform:rotate(45deg);flex:none}

/* ---------- why us: stacking cards (sticky; the card beneath scales back as the next arrives) ---------- */
.stack{display:flex;flex-direction:column;gap:var(--space-6);padding-bottom:var(--space-8)}
.scard{position:sticky;top:calc(var(--nav-h) + var(--space-6) + var(--i) * var(--space-4));transform-origin:50% 0;will-change:transform}
.scard__in{min-height:min(56vh,480px);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr auto;column-gap:var(--space-8);row-gap:var(--space-5);padding:var(--space-8);border:var(--border-card);outline:var(--border-frame);outline-offset:calc(var(--frame-inset) * -1)}
.scard__top{grid-column:1;display:flex;flex-direction:column;gap:var(--space-3)}
.scard__n{font-family:var(--font-display);font-size:calc(var(--size-72) * 1.5);line-height:1;color:var(--text-gold)}
.scard .t-label{color:var(--text-secondary)}
.scard__was{grid-column:1;grid-row:2;align-self:start;margin:0;font-size:var(--type-body-lg-size);line-height:var(--leading-relaxed);color:var(--text-secondary);max-width:28ch}
.scard .divider{display:none}
.scard__now{grid-column:2;grid-row:1/4;align-self:end;margin:0;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-72);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);text-wrap:balance}
.scard__now em{font-style:italic;color:var(--text-accent)}
.scard--cream .scard__in{background:var(--bg-page)}
.scard--sand .scard__in{background:var(--bg-sunken)}
.scard--wine .scard__in{background:var(--bg-primary);color:var(--text-on-deep);border-color:var(--border-on-deep)}
.scard--deep .scard__in{background:var(--bg-deep);color:var(--text-on-deep);border-color:var(--border-on-deep)}
.scard.on-deep .t-label,.scard.on-deep .scard__was{color:var(--text-on-deep-muted)}
.scard.on-deep .scard__now em,.scard.on-deep .scard__n{color:var(--text-on-deep-accent)}

/* ---------- how it works: scroll-drawn timeline ---------- */
.tl{position:relative;display:flex;flex-direction:column;gap:var(--space-10)}
.tl__line{position:absolute;top:0;bottom:0;left:50%;width:var(--border-width-hair);background:var(--border-hairline);transform:translateX(-50%)}
.tl__fill{position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:50% 0}
.tl__step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10);align-items:center}
.tl__step:nth-child(odd) .tl__media{order:2}
.tl__node{position:absolute;left:50%;top:50%;width:var(--space-5);height:var(--space-5);border:var(--border-frame);background:var(--bg-sunken);transform:translate(-50%,-50%) rotate(45deg);transition:background var(--duration-slow) var(--ease-standard),transform var(--duration-slow) var(--ease-expressive);z-index:1}
.tl__step.is-active .tl__node{background:var(--accent);transform:translate(-50%,-50%) rotate(45deg) scale(1.2)}
.tl__media{aspect-ratio:4/3;position:relative}
.tl__text{display:flex;flex-direction:column;gap:var(--space-3);max-width:40ch;opacity:.35;transform:translateY(var(--space-5));transition:opacity var(--duration-reveal) var(--ease-expressive),transform var(--duration-reveal) var(--ease-expressive)}
.tl__step:nth-child(even) .tl__text{justify-self:end}
.tl__step.is-active .tl__text{opacity:1;transform:none}
.tl__num{font-family:var(--font-display);font-size:var(--size-72);line-height:1;color:var(--text-gold)}
.tl__text .t-label{color:var(--text-accent)}
.tl__text h3{margin:0;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-40);line-height:var(--leading-snug)}
.tl__text p{margin:0;font-size:var(--type-body-lg-size);line-height:var(--leading-relaxed);color:var(--text-secondary)}

/* ---------- gallery: pinned horizontal scroll (GSAP pins .gal) ---------- */
.gal{position:relative;background:var(--bg-page);overflow:hidden}
.gal__stick{height:100vh;display:flex;align-items:center}
.gal__track{display:flex;align-items:center;gap:var(--space-7);padding:var(--nav-h) var(--page-margin) 0;will-change:transform}
.gal__intro{flex:none;width:min(440px,78vw)}
.gal__intro .section-header{margin:0}
.gal__item{flex:none;margin:0;display:flex;flex-direction:column;gap:var(--space-3)}
.gal__img{position:relative}
.gal__par{position:absolute;top:0;bottom:0;left:-8%;right:-8%}
.gal__cap{display:flex;gap:var(--space-3);align-items:baseline;font-size:var(--type-small-size);color:var(--text-secondary)}
.gal__cap .t-label{color:var(--text-gold)}
.g1{width:30vw}.g1 .gal__img{height:64vh}
.g2{width:42vw;align-self:flex-end}.g2 .gal__img{height:46vh}
.g3{width:26vw;align-self:flex-start}.g3 .gal__img{height:52vh}
.g4{width:36vw}.g4 .gal__img{height:68vh}
.g5{width:28vw;align-self:flex-end}.g5 .gal__img{height:50vh}
.gal__end{flex:none;width:min(360px,70vw);display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start}
.gal__progress{position:absolute;left:var(--page-margin);right:var(--page-margin);bottom:var(--space-7);height:calc(var(--border-width-hair) * 3);background:var(--border-hairline)}
.gal__progress::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--gp,0));transform-origin:0 50%}

/* ---------- contact ---------- */
.contact{background:var(--gradient-deep);color:var(--text-on-deep)}
.contact__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-9);align-items:start}
.contact__intro{display:flex;flex-direction:column;gap:var(--space-5);position:sticky;top:calc(var(--nav-h) + var(--space-6))}
.contact__intro .t-label{color:var(--text-on-deep-accent)}
.contact__intro p{margin:0;color:var(--text-on-deep-muted);font-size:var(--type-body-lg-size);line-height:var(--leading-relaxed)}
.contacts{display:flex;flex-direction:column;border-top:var(--border-width-hair) solid var(--border-on-deep)}
.contacts a{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap-min);padding:var(--space-3) 0;border-bottom:var(--border-width-hair) solid var(--border-on-deep);color:var(--text-on-deep);text-decoration:none;transition:color var(--duration-base) var(--ease-standard),padding var(--duration-slow) var(--ease-expressive)}
.contacts a:hover{color:var(--text-on-deep-accent);padding-left:var(--space-3)}
.contacts .icon{color:var(--text-on-deep-accent)}
.contacts small{margin-left:auto;font-size:var(--type-small-size);color:var(--text-on-deep-muted)}
.form[data-rv]{transform:none}
.form{background:var(--bg-page);color:var(--text-primary);padding:var(--space-7) var(--space-6);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-4);outline:var(--border-frame);outline-offset:var(--frame-inset)}
.form__full{grid-column:1/-1}
.form h3{margin:0;font-family:var(--font-display);font-size:var(--size-32);font-weight:var(--weight-medium)}
.form>.btn{justify-self:start}
.form .alert{display:none}.form.is-sent .alert{display:flex}

/* ---------- cta band ---------- */
.band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-6);align-items:center;background:var(--bg-page);border:var(--border-frame);outline:var(--border-width-hair) solid var(--border-gold-soft);outline-offset:calc(var(--frame-inset) * -1);padding:var(--space-8) var(--space-7)}
.band .t-label{color:var(--text-accent)}
.band h2{margin:var(--space-2) 0 0;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-40);line-height:var(--leading-snug)}
.band h2 em{font-style:italic;color:var(--text-accent)}
.band p{margin:var(--space-3) 0 0;color:var(--text-secondary);max-width:var(--text-max)}

/* ---------- vendors: founding band ---------- */
.founding{background:var(--bg-deep);color:var(--text-on-deep);text-align:center}
.founding .wrap{display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}
.founding .badge{align-self:center}
.founding h2{margin:0;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-72);line-height:var(--leading-tight);max-width:14ch;text-wrap:balance}
.founding h2 em{font-style:italic;color:var(--text-on-deep-accent)}
.founding .divider{width:var(--divider-short)}
.founding ul{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);width:100%}
.founding li{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);color:var(--text-on-deep-muted);padding:var(--space-5) var(--space-4);border-top:var(--border-width-hair) solid var(--border-on-deep)}
.founding li b{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--size-24);color:var(--text-on-deep)}

/* ---------- floating WhatsApp ---------- */
.wa{position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:60;box-shadow:var(--shadow-overlay);opacity:0;visibility:hidden;transform:translateY(var(--space-3)) scale(.98);transition:opacity var(--duration-slow) var(--ease-standard),transform var(--duration-slow) var(--ease-expressive),visibility 0s linear var(--duration-slow),background var(--duration-fast)}
.wa.is-on{opacity:1;visibility:visible;transform:none;transition:opacity var(--duration-slow) var(--ease-standard),transform var(--duration-slow) var(--ease-expressive),visibility 0s,background var(--duration-fast)}

/* ---------- loader: covers the page until fonts and first images are in; page animations wait behind it ---------- */
.loader{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-5);background:var(--gradient-deep);transition:opacity var(--duration-slow) var(--ease-standard),visibility 0s linear var(--duration-slow);animation:loader-out 0s 8s forwards}
@keyframes loader-out{to{opacity:0;visibility:hidden}}
.loader__mark{width:calc(var(--space-8) + var(--space-6));height:auto;animation:fade var(--duration-slow) var(--ease-standard) both}
.loader__bar{position:relative;width:calc(var(--space-10) + var(--space-6));height:var(--border-width-hair);background:var(--border-on-deep);overflow:hidden}
.loader__bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--lp,0));transform-origin:0 50%;transition:transform var(--duration-slow) var(--ease-standard)}
html.is-loading{overflow:hidden}html.is-loading body *:not(.loader):not(.loader *){animation-play-state:paused!important}
html:not(.is-loading) .loader{opacity:0;visibility:hidden}

/* ---------- keyframes ---------- */
@keyframes fade{to{opacity:1}}
@keyframes fade-up{from{opacity:0;transform:translateY(var(--space-4))}to{opacity:1;transform:none}}

/* ---------- tablet / mobile ---------- */
@media (max-width:900px){
.contact__grid{grid-template-columns:1fr;gap:var(--space-7)}
.contact__intro{position:static}
.founding ul{grid-template-columns:1fr;gap:0}
}
@media (max-width:640px){
.big,.section-header .section-header__title{font-size:var(--size-40)}
.founding h2{font-size:var(--size-40)}
.scard{top:calc(var(--nav-h) + var(--space-4) + var(--i) * var(--space-3))}
.scard__in{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;min-height:min(62vh,460px);padding:var(--space-6) var(--space-5);row-gap:var(--space-3)}
.scard__top,.scard__was,.scard__now{grid-column:1;grid-row:auto}
.scard__top{flex-direction:row;align-items:baseline;justify-content:space-between}
.scard__n{font-size:var(--size-56)}
.scard__now{font-size:var(--size-40);align-self:end}
.scard__was{align-self:start}
.tl{gap:var(--space-8)}
.tl__line{left:var(--space-3)}
.tl__step{grid-template-columns:1fr;gap:var(--space-4);padding-left:var(--space-8)}
.tl__step:nth-child(odd) .tl__media{order:0}
.tl__step:nth-child(even) .tl__text{justify-self:start}
.tl__node{left:var(--space-3);top:var(--space-4)}
.tl__num{font-size:var(--size-56)}
.tl__text h3{font-size:var(--size-32)}
.marquee{padding:var(--space-5) 0}.marquee__set{font-size:var(--size-32);gap:var(--space-5);padding-right:var(--space-5)}
.gal__stick{height:100svh}
.gal__track{gap:var(--space-4)}
.gal__intro{width:84vw}
.g1{width:70vw}.g1 .gal__img{height:52svh}
.g2{width:84vw}.g2 .gal__img{height:38svh}
.g3{width:62vw}.g3 .gal__img{height:44svh}
.g4{width:72vw}.g4 .gal__img{height:56svh}
.g5{width:64vw}.g5 .gal__img{height:42svh}
.gal__end{width:80vw}
.gal__progress{bottom:var(--space-6)}
.form{grid-template-columns:1fr;padding:var(--space-6) var(--space-4);outline-offset:calc(var(--space-1) + var(--space-1) / 2)}.form>.btn{justify-self:stretch}
.band{grid-template-columns:1fr;padding:var(--space-6) var(--space-5)}.band .btn{justify-self:stretch}
.wa{right:var(--space-4);bottom:var(--space-4)}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
[data-rv]{opacity:1;transform:none}.m .w{transform:none}.img-rv{clip-path:none}.img-rv>.zoom{transform:none}
.gal__track{overflow-x:auto}.tl__text{opacity:1;transform:none}
}