/* ==========================================================================
   MARITA FASHION, INC. — "Dance Floor"
   Dopamine / Y2K. Saturated candy color, oversized type, maximalist.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Dopamine palette — pulled from their real stocked colorways, pushed hot */
  --pink:      #ff2d87;
  --pink-deep: #d4006a;
  --violet:    #7b2ff7;
  --violet-lo: #a56bff;
  --cyan:      #00d4e8;
  --lime:      #c4f000;
  --tangerine: #ff7a1a;
  --lemon:     #ffd83d;

  --ink:       #14001f;   /* deep aubergine, not black */
  --ink-2:     #2a0a3d;
  --cream:     #fff8fb;
  --white:     #ffffff;
  --mute:      #8b6f9c;

  --rail: clamp(1.15rem, 4vw, 4.5rem);
  --pop:  cubic-bezier(.34,1.56,.64,1);   /* overshoot */
  --ease: cubic-bezier(.16,1,.3,1);

  --shadow-hard: 6px 6px 0 var(--ink);
}

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color:var(--pink) var(--ink);
  caret-color:var(--pink);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Space Grotesk","Helvetica Neue",sans-serif;
  font-size:clamp(1rem,.95rem + .2vw,1.0938rem);
  line-height:1.55;
  overflow-x:hidden;
}

::selection{ background:var(--lime); color:var(--ink) }
::-webkit-scrollbar{ width:12px;height:12px }
::-webkit-scrollbar-track{ background:var(--ink) }
::-webkit-scrollbar-thumb{ background:var(--pink); border:3px solid var(--ink); border-radius:99px }
::-webkit-scrollbar-thumb:hover{ background:var(--lime) }

:focus-visible{ outline:3px solid var(--lime); outline-offset:3px }

img{ max-width:100%; display:block }

.skip{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--ink); color:var(--lime); padding:.9rem 1.3rem;
  font-weight:700; text-decoration:none; border-radius:0 0 14px 0;
}
.skip:focus{ left:0 }

/* ---------- Type ---------- */
.mega{
  font-family:"Bricolage Grotesque","Space Grotesk",sans-serif;
  font-weight:800;
  line-height:.86;
  letter-spacing:-.045em;
  margin:0;
  text-wrap:balance;
}
h1.mega{ font-size:clamp(3.1rem,1.4rem + 8.4vw,8.5rem) }
h2.mega{ font-size:clamp(2.4rem,1.4rem + 4.6vw,5rem) }
h3{
  font-family:"Bricolage Grotesque","Space Grotesk",sans-serif;
  font-weight:700; font-size:1.35rem; letter-spacing:-.02em; margin:0;
}

.tag{
  display:inline-block;
  font-size:.8125rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.5rem .9rem; border-radius:99px;
  background:var(--ink); color:var(--lime);
}
.num{ font-variant-numeric:tabular-nums }

p{ margin:0 0 1.1em; max-width:64ch }
p:last-child{ margin-bottom:0 }
a{ color:inherit }

.wrap{ width:100%; max-width:1340px; margin-inline:auto; padding-inline:var(--rail) }
.band{ padding-block:clamp(4rem,2.5rem + 7vw,8rem) }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:"Space Grotesk",sans-serif;
  font-size:.9375rem; font-weight:700; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  padding:1.05rem 1.9rem; min-height:52px;
  border:2.5px solid var(--ink); border-radius:99px;
  background:var(--lime); color:var(--ink);
  box-shadow:var(--shadow-hard);
  transition:transform .22s var(--pop), box-shadow .22s var(--pop), background .22s;
}
.btn:hover,.btn:focus-visible{
  transform:translate(-3px,-3px);
  box-shadow:9px 9px 0 var(--ink);
  background:var(--lemon);
}
.btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink) }
.btn--pink{ background:var(--pink-deep); color:var(--white) }
.btn--pink:hover,.btn--pink:focus-visible{ background:#a80054 }
.btn--ghost{ background:transparent; color:var(--ink) }
.btn--ghost:hover,.btn--ghost:focus-visible{ background:var(--white) }
.btn--sm{ padding:.75rem 1.3rem; min-height:46px; font-size:.875rem; box-shadow:4px 4px 0 var(--ink) }
.btn--sm:hover{ box-shadow:6px 6px 0 var(--ink) }

/* ==========================================================================
   HEADER
   ========================================================================== */
.mast{
  position:sticky; top:0; z-index:120;
  background:color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:2.5px solid transparent;
  transition:border-color .3s var(--ease);
}
.mast.stuck{ border-bottom-color:var(--ink) }
.mast__in{ display:flex; align-items:center; gap:1.25rem; min-height:76px }

.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; margin-right:auto; min-height:44px;
}
.brand__dot{
  width:16px; height:16px; border-radius:50%;
  background:var(--pink); border:2.5px solid var(--ink);
  flex:none;
}
.brand__txt{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:1.3rem; font-weight:800; letter-spacing:-.03em; line-height:1;
}

.nav{ display:flex; align-items:center; gap:1.9rem }
.nav a:not(.btn){
  text-decoration:none; font-weight:600; font-size:.9688rem;
  display:inline-flex; align-items:center; min-height:44px;
  position:relative;
}
.nav a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:14px; height:3px;
  background:var(--pink); border-radius:9px;
  transform:scaleX(0); transform-origin:right;
  transition:transform .34s var(--ease);
}
.nav a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left }

.burger{
  display:none; background:var(--lime); border:2.5px solid var(--ink);
  border-radius:12px; cursor:pointer; color:var(--ink);
  width:46px; height:46px; align-items:center; justify-content:center;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; overflow:hidden; padding-block:clamp(2rem,1rem + 4vw,4rem) 0 }

/* soft dopamine blooms */
.blob{
  position:absolute; border-radius:50%; filter:blur(90px);
  opacity:.42; pointer-events:none; z-index:0;
  mix-blend-mode:multiply;
}
.blob--1{ width:46vw; height:46vw; background:var(--pink);   top:-18%; left:-14% }
.blob--2{ width:40vw; height:40vw; background:var(--cyan);   top:18%;  right:-16% }
.blob--3{ width:30vw; height:30vw; background:var(--violet); bottom:-14%; left:26% }

.hero__grid{
  position:relative; z-index:2;
  display:grid; gap:clamp(2rem,3.5vw,4rem);
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:center;
}
@media (max-width:940px){ .hero__grid{ grid-template-columns:1fr } }

/* kinetic headline */
.mega .ln{ display:block; overflow:hidden }
.mega .ln > span{
  display:block;
  transform:translateY(105%);
  animation:riseIn .95s var(--ease) forwards;
}
.mega .ln:nth-child(1) > span{ animation-delay:.05s }
.mega .ln:nth-child(2) > span{ animation-delay:.15s }
.mega .ln:nth-child(3) > span{ animation-delay:.25s }
@keyframes riseIn{ to{ transform:translateY(0) } }

.hi-pink{ color:#d4006a }
.hi-violet{ color:var(--violet) }
/* outlined word — Y2K sticker feel */
.hi-out{
  color:transparent;
  -webkit-text-stroke:2.5px var(--ink);
  paint-order:stroke fill;
}

.hero__sub{
  font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  margin-top:1.6rem; max-width:44ch; font-weight:500;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.1rem }

.hero__stats{
  display:flex; flex-wrap:wrap; gap:1.4rem 2.6rem; margin-top:2.4rem;
}
.stat b{
  display:block; font-family:"Bricolage Grotesque",sans-serif;
  font-size:2.1rem; font-weight:800; line-height:1; letter-spacing:-.04em;
  color:#6a1fd8;
}
.stat span{ font-size:.875rem; font-weight:600; color:var(--ink); opacity:.72 }

/* hero photo — sticker frame */
.shot{
  position:relative; border:3px solid var(--ink); border-radius:26px;
  overflow:hidden; box-shadow:12px 12px 0 var(--violet);
  background:var(--violet-lo);
  transform:rotate(1.6deg);
}
.shot img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5 }
.shot__badge{
  position:absolute; z-index:3; left:-14px; bottom:20px;
  background:var(--lime); color:var(--ink);
  border:2.5px solid var(--ink); border-radius:99px;
  padding:.6rem 1.1rem; font-weight:800; font-size:.875rem;
  transform:rotate(-4deg); box-shadow:4px 4px 0 var(--ink);
}
.shot__spin{
  position:absolute; z-index:3; right:-20px; top:-20px;
  width:104px; height:104px;
}
.shot__spin svg{ width:100%; height:100%; animation:spin 16s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){
  .shot__spin svg{ animation:none }
  .mega .ln > span{ transform:none; animation:none }
}

/* ==========================================================================
   MARQUEE (deliberate: a fashion-show ticker, paused on hover/focus)
   ========================================================================== */
.strip{
  background:var(--ink); color:var(--cream);
  border-block:3px solid var(--ink);
  padding-block:.95rem; overflow:hidden;
}
.strip__track{ display:flex; gap:2.6rem; width:max-content; animation:slide 38s linear infinite }
.strip:hover .strip__track,.strip:focus-within .strip__track{ animation-play-state:paused }
.strip__item{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:800; font-size:1.05rem; letter-spacing:-.02em; white-space:nowrap;
}
.strip__dot{ width:13px;height:13px;border-radius:50%;background:var(--c);flex:none }
@keyframes slide{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){
  .strip__track{ animation:none; flex-wrap:wrap; width:auto }
}

/* ==========================================================================
   BENTO — the lines
   ========================================================================== */
.head{ margin-bottom:clamp(2.2rem,1.6rem + 2vw,3.4rem); max-width:56ch }
.head p{ margin-top:1rem; font-size:1.0625rem; opacity:.8 }

.bento{
  display:grid; gap:clamp(.85rem,1.4vw,1.3rem);
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(190px,auto);
}
@media (max-width:900px){ .bento{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:540px){ .bento{ grid-template-columns:1fr } }

.cell{
  position:relative; overflow:hidden;
  border:3px solid var(--ink); border-radius:24px;
  padding:1.6rem;
  display:flex; flex-direction:column; justify-content:space-between;
  background:var(--bg,var(--white));
  transition:transform .28s var(--pop), box-shadow .28s var(--pop);
}
.cell:hover{ transform:translate(-4px,-4px); box-shadow:10px 10px 0 var(--ink) }

.cell--wide{ grid-column:span 2 }
.cell--tall{ grid-row:span 2 }
@media (max-width:540px){ .cell--wide{ grid-column:span 1 } .cell--tall{ grid-row:span 1 } }

.cell__n{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(3rem,2rem + 3.4vw,4.6rem); font-weight:800;
  line-height:.85; letter-spacing:-.05em;
}
.cell h3{ margin-top:.35rem }
.cell p{ font-size:.9375rem; margin-top:.5rem; opacity:.85 }
.cell__foot{ margin-top:1.1rem; font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.6 }

/* photo cells */
.cell--photo{ padding:0; border-color:var(--ink) }
.cell--photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 28%; position:absolute; inset:0 }
.cell--wide.cell--photo img{ object-position:50% 8% }
.cell--wide.cell--photo{ min-height:230px }
.cell__cap{
  position:relative; z-index:2; margin-top:auto; padding:1.2rem 1.3rem;
  background:linear-gradient(to top,rgba(20,0,31,.92),rgba(20,0,31,.55) 60%,transparent);
  color:var(--cream); font-weight:700;
}

/* ==========================================================================
   STICKY SCROLL — terms
   ========================================================================== */
.terms{ background:var(--ink); color:var(--cream); position:relative; overflow:hidden }
.terms .mega{ color:var(--cream) }
.terms__grid{
  display:grid; gap:clamp(2rem,4vw,4.5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
}
@media (max-width:900px){ .terms__grid{ grid-template-columns:1fr } }

.terms__stick{ position:sticky; top:110px }
@media (max-width:900px){ .terms__stick{ position:static } }
.terms__lead{ margin-top:1.2rem; color:#e3d2ee; font-size:1.0625rem }

.tlist{ list-style:none; margin:0; padding:0; display:grid; gap:1rem }
.trow{
  border:3px solid var(--cream); border-radius:22px;
  padding:1.5rem 1.6rem;
  background:transparent;
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--pop);
}
.trow:hover{ background:var(--cream); color:var(--ink); transform:translateX(6px) }
.trow dt{
  font-size:.8125rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--lime); margin-bottom:.5rem;
}
.trow:hover dt{ color:#9c0050 }
.trow dd{ margin:0; font-family:"Bricolage Grotesque",sans-serif; font-size:1.4rem; font-weight:700; letter-spacing:-.02em }
.trow p{ margin:.5rem 0 0; font-size:.9375rem; color:#cbb6d9 }
.trow:hover p{ color:#4a3557 }

/* ==========================================================================
   SHOWROOM
   ========================================================================== */
.floor__grid{
  display:grid; gap:clamp(2rem,4vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;
}
@media (max-width:880px){ .floor__grid{ grid-template-columns:1fr } }

.facts{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.8rem }
.facts li{
  display:flex; align-items:baseline; gap:1rem;
  border:3px solid var(--ink); border-radius:18px; padding:1rem 1.2rem;
  background:var(--white);
}
.facts b{
  font-family:"Bricolage Grotesque",sans-serif; font-size:1.7rem; font-weight:800;
  letter-spacing:-.04em; color:var(--pink); flex:none; min-width:3.4ch;
}
.facts strong{ display:block; font-weight:700 }
.facts span{ font-size:.9375rem; opacity:.78 }

.shot--flat{ transform:rotate(-1.4deg); box-shadow:12px 12px 0 var(--cyan) }

/* ==========================================================================
   FORM
   ========================================================================== */
.apply{ background:var(--violet); color:var(--white); position:relative; overflow:hidden }
.apply .mega{ color:var(--white) }
.apply__grid{
  display:grid; gap:clamp(2rem,4vw,4rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
}
@media (max-width:880px){ .apply__grid{ grid-template-columns:1fr } }
.apply__lead{ margin-top:1.1rem; color:#eadcff; font-size:1.0625rem }

.form{ display:grid; gap:1.15rem; margin-top:2rem }
.row2{ display:grid; gap:1.15rem; grid-template-columns:1fr 1fr }
@media (max-width:560px){ .row2{ grid-template-columns:1fr } }
.field{ display:grid; gap:.45rem }
.field label{ font-size:.8125rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#eadcff }
.field input,.field select,.field textarea{
  font-family:inherit; font-size:1rem; color:var(--ink);
  background:var(--white);
  border:3px solid var(--ink); border-radius:14px;
  padding:.85rem 1rem; min-height:52px; width:100%;
  transition:box-shadow .2s var(--ease), border-color .2s;
}
.field textarea{ min-height:118px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--lime); box-shadow:0 0 0 4px rgba(196,240,0,.45);
}
.field input::placeholder,.field textarea::placeholder{ color:#8d7f99 }
.hint{ font-size:.8125rem; color:#eadcff; opacity:.9 }
.fstatus{ font-weight:700; min-height:1.4em; font-size:.9688rem }
.fstatus[data-s="ok"]{ color:var(--lime) }
.fstatus[data-s="err"]{ color:var(--lemon) }
.formnote{ font-size:.8125rem; color:#eadcff; opacity:.9; margin-top:.5rem }

.contact{
  background:var(--cream); color:var(--ink);
  border:3px solid var(--ink); border-radius:26px;
  padding:clamp(1.5rem,3vw,2.2rem); align-self:start;
  box-shadow:10px 10px 0 var(--ink);
}
.crow{ padding:.95rem 0; border-bottom:2px solid rgba(20,0,31,.14) }
.crow:last-child{ border-bottom:0; padding-bottom:0 }
.crow .k{ display:block; font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--violet); margin-bottom:.3rem }
.crow a{ font-weight:700; font-size:1.0625rem; text-decoration:none; display:inline-flex; align-items:center; min-height:44px }
.crow a:hover{ color:var(--pink-deep) }
.crow address{ font-style:normal; font-weight:700; font-size:1.0625rem; line-height:1.45 }
.crow .v{ font-weight:700; font-size:1.0625rem }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ background:var(--ink); color:#cbb6d9; padding-block:clamp(3rem,2rem + 3vw,4.5rem) 1.8rem }
.foot__grid{ display:grid; gap:2.4rem; grid-template-columns:1.5fr 1fr 1fr }
@media (max-width:760px){ .foot__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:460px){ .foot__grid{ grid-template-columns:1fr } }
.foot .brand__txt{ color:var(--cream) }
.foot h3{ font-size:.8125rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--lime); margin-bottom:.5rem }
.foot ul{ list-style:none; margin:0; padding:0 }
.foot a{ color:#cbb6d9; text-decoration:none; display:inline-flex; align-items:center; min-height:44px }
.foot a:hover{ color:var(--lime) }
.foot p{ font-size:.9375rem }
.foot__bar{
  margin-top:2.4rem; padding-top:1.4rem; border-top:2px solid #3d2150;
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between; font-size:.8125rem;
}
.foot__bar p{ margin:0; font-size:.8125rem }

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.rv.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1 !important; transform:none !important; transition:none }
  .blob{ display:none }
}

/* ---------- mobile nav ---------- */
@media (max-width:880px){
  .burger{ display:inline-flex }
  .nav{
    position:fixed; inset:76px 0 auto; background:var(--cream);
    flex-direction:column; align-items:stretch; gap:0;
    padding:1rem var(--rail) 2rem; border-bottom:3px solid var(--ink);
    transform:translateY(-14px); opacity:0; pointer-events:none;
    transition:opacity .28s var(--ease), transform .28s var(--ease);
    max-height:calc(100dvh - 76px); overflow-y:auto; z-index:110;
  }
  .nav.open{ opacity:1; transform:none; pointer-events:auto }
  .nav a:not(.btn){ padding-block:.4rem; border-bottom:2px solid rgba(20,0,31,.12); font-size:1.05rem }
  .nav .btn{ margin-top:1.1rem }
}