/* Creative Squid — rebuilt from the Squarespace original, 2026 */

:root{
  --purple-deep:#23074F;
  --purple-bright:#6A05D6;
  --pink:#FF0051;
  --orange:#FF4C00;
  --cream:#FAF9F5;
  --white:#fff;
  --black:#000;

  --display:'Unbounded',system-ui,sans-serif;
  --body:'Space Grotesk',system-ui,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1440px;
  --section-y:clamp(64px,9vw,140px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--purple-deep);
  color:var(--pink);
  font-family:var(--body);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:12px;z-index:99;background:var(--orange);color:var(--white);padding:10px 16px}

.display{
  font-family:var(--display);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:.95;
  text-transform:uppercase;
}

/* ---------- header ---------- */
.site-header{padding:clamp(28px,4vw,56px) var(--gutter);display:flex;justify-content:center}
.site-header__logo img{width:clamp(220px,26vw,464px)}

/* ---------- intro ---------- */
.intro{
  max-width:var(--maxw);margin-inline:auto;padding:var(--section-y) var(--gutter);
  display:grid;gap:clamp(28px,5vw,64px);align-items:center;
  grid-template-columns:1fr;
}
@media(min-width:720px){ .intro{grid-template-columns:1fr 1fr} }
.intro__text{
  font-size:clamp(18px,1.9vw,26px);line-height:1.45;max-width:26ch;margin:0;
  justify-self:end;
}
.intro__sticker{width:min(100%,460px)}

/* ---------- marquee ---------- */
.marquee{
  display:flex;overflow:hidden;user-select:none;gap:0;
  padding-block:clamp(18px,2.6vw,34px);
}
.marquee__run{
  flex:0 0 auto;display:flex;align-items:center;gap:.5em;padding-right:.5em;
  animation:scroll var(--speed,40s) linear infinite;
  font-family:var(--display);font-weight:900;letter-spacing:-.02em;text-transform:uppercase;
  white-space:nowrap;
}
.marquee--top .marquee__run{font-size:clamp(34px,5.4vw,84px);color:var(--white)}
.marquee--top .marquee__run span:nth-child(even){color:var(--orange)}
.marquee--bottom{background:var(--purple-deep)}
.marquee--bottom .marquee__run{font-size:clamp(30px,4.6vw,72px);color:var(--orange);font-style:italic}
.marquee--huge .marquee__run{font-size:clamp(48px,11vw,168px);color:var(--white)}
@keyframes scroll{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){ .marquee__run{animation:none} .marquee{overflow-x:auto} }

/* ---------- clients ---------- */
.clients{max-width:var(--maxw);margin-inline:auto;padding:var(--section-y) var(--gutter)}
.clients__head{
  display:grid;gap:clamp(20px,4vw,48px);align-items:center;margin-bottom:clamp(32px,5vw,64px);
  grid-template-columns:1fr;
}
@media(min-width:820px){ .clients__head{grid-template-columns:1.4fr 1fr} }
.clients__head h2{font-size:clamp(30px,4.4vw,64px);color:var(--white)}
.clients__meme{width:min(100%,420px);justify-self:end}
.clients__grid{width:100%}

/* ---------- reel ---------- */
.reel{position:relative;padding-block:clamp(24px,4vw,48px)}
.reel__track{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-inline:var(--gutter);
}
.reel__track::-webkit-scrollbar{display:none}
.reel__item{flex:0 0 auto;margin:0;scroll-snap-align:center}
.reel__item img{height:clamp(240px,34vw,520px);width:auto;object-fit:cover}
.reel__nav{
  position:absolute;top:50%;translate:0 -50%;z-index:2;
  width:46px;height:34px;border:0;cursor:pointer;
  background:var(--cream);color:var(--black);font-size:18px;line-height:1;
}
.reel__nav--prev{left:calc(var(--gutter) / 2)}
.reel__nav--next{right:calc(var(--gutter) / 2)}
.reel__nav:hover{background:var(--orange);color:var(--white)}

/* ---------- what we do ---------- */
.whatwedo{
  max-width:var(--maxw);margin-inline:auto;padding:var(--section-y) var(--gutter);
  display:grid;gap:clamp(24px,4vw,56px);align-items:center;grid-template-columns:1fr;
}
@media(min-width:820px){ .whatwedo{grid-template-columns:1fr 1fr} }
.whatwedo__art{width:min(100%,520px)}
.whatwedo__doge{width:min(100%,420px);justify-self:end}

/* ---------- services ---------- */
.services{background:var(--orange);color:var(--white);padding:clamp(48px,7vw,96px) var(--gutter)}
.services__grid{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;
}
@media(min-width:760px){ .services__grid{grid-template-columns:repeat(3,1fr)} }
.service__num{font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px;opacity:.9}
.service__title{
  font-family:var(--display);font-weight:700;font-size:clamp(15px,1.4vw,19px);
  letter-spacing:.02em;text-transform:uppercase;margin:0 0 14px;
}
.service__body{margin:0;max-width:34ch;font-size:clamp(14px,1vw,16px)}

/* ---------- how to work with us ---------- */
.howto{
  background-size:cover;background-position:center;
  min-height:clamp(340px,46vw,640px);
  display:flex;align-items:center;position:relative;overflow:hidden;
}
.howto::before{content:'';position:absolute;inset:0;background:rgba(35,7,79,.35)}
.howto .marquee{position:relative;width:100%}

/* ---------- free mockup ---------- */
.mockup{
  background:var(--purple-bright);
  padding:clamp(40px,6vw,88px) var(--gutter);
  display:flex;flex-direction:column;align-items:center;gap:clamp(24px,3vw,40px);
}
.mockup__art{width:min(100%,1075px)}

.btn{
  display:inline-block;background:var(--orange);color:var(--white);
  font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 40px;text-decoration:none;border:0;cursor:pointer;
}
.btn:hover{background:var(--white);color:var(--orange)}

/* ---------- contact ---------- */
.contact{max-width:1080px;margin-inline:auto;padding:var(--section-y) var(--gutter);text-align:center}
.contact__head{
  color:var(--orange);font-style:italic;
  font-size:clamp(26px,4.4vw,58px);margin-bottom:.3em;
}
.form{
  background:var(--purple-bright);color:var(--cream);
  padding:clamp(24px,4vw,48px);text-align:left;margin-top:clamp(28px,4vw,52px);
}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form__row{display:block;margin-bottom:22px;font-size:13px;letter-spacing:.04em}
.form__row--two{border:0;padding:0;margin:0 0 22px;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){ .form__row--two{grid-template-columns:1fr 1fr} }
.form__legend{padding:0;font-size:13px;letter-spacing:.04em;margin-bottom:8px}
.form__row--two label{display:block;font-size:13px}
.req{opacity:.6;font-size:11px}
.form__hint{display:block;opacity:.75;font-size:12px;margin:4px 0 6px}
.form input[type=text],.form input[type=email],.form select,.form textarea{
  width:100%;margin-top:7px;padding:12px 14px;
  background:rgba(35,7,79,.55);border:1px solid rgba(250,249,245,.28);color:var(--cream);
  font-family:var(--body);font-size:15px;border-radius:0;
}
.form textarea{resize:vertical}
.form :is(input,select,textarea):focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.form__check{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.btn--submit{width:100%;margin-top:8px}
.form__status{margin:16px 0 0;font-size:14px;min-height:1.2em}
.form__status[data-state=ok]{color:#8CFFC4}
.form__status[data-state=err]{color:#FFD5D5}
.form .field-error{border-color:#FFD5D5}

/* ---------- instagram ---------- */
.ig{max-width:var(--maxw);margin-inline:auto;padding:var(--section-y) var(--gutter)}
.ig__head{text-align:center;color:var(--orange);font-size:clamp(22px,3vw,40px);margin-bottom:clamp(24px,3vw,44px)}
.ig__grid{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){ .ig__grid{grid-template-columns:repeat(4,1fr)} }
.ig__item{display:block;overflow:hidden;aspect-ratio:1}
.ig__item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ig__item:hover img{transform:scale(1.05)}

/* ---------- footer ---------- */
.site-footer{
  background-size:cover;background-position:center;
  min-height:clamp(280px,36vw,520px);display:flex;align-items:flex-end;
}
.site-footer__bar{
  width:100%;background:rgba(35,7,79,.75);color:var(--cream);
  padding:20px var(--gutter);
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;
  font-size:13px;letter-spacing:.06em;
}
.site-footer__bar a{text-decoration:none}
.site-footer__bar a:hover{color:var(--orange)}