/* KrazzyCreations — implemented from project/KrazzyCreations.dc.html */

:root {
  --accent: #FF5630;
  --ease: cubic-bezier(.16,.84,.44,1);

  --bg: #FBF6EF;
  --ink: #1C1714;
  --ink-2: #3A322B;
  --sub: #5A4F45;
  --muted: #6B5F54;
  --card: #FFFCF8;
  --line: #ECE0D0;
  --line-2: #E7DAC8;
  --line-3: #E2D4C2;
  --shadow-rgb: 28,23,20;
  --bg-rgb: 251,246,239;
  --footer-bg: #161210;
  --footer-sub: #9A8A7A;
  --footer-dim: #7C6E5F;
  --footer-link: #E4D8C9;
  --dark: #1C1714;
  --dark-ink: #F2E9DC;
  --dark-head: #FBF6EF;
  --dark-sub: #B7A593;

  /* Contact band (dark variant — the design default) */
  --c-bg: #1C1714;
  --c-ink: #F2E9DC;
  --c-head: #FBF6EF;
  --c-sub: #B7A593;
  --c-card: rgba(255,255,255,.05);
  --c-line: rgba(255,255,255,.12);

  --f-display: 'Bricolage Grotesque', sans-serif;
  --f-body: 'Hanken Grotesk', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  --gutter: clamp(20px,5vw,40px);
}

/* Light contact band variant (design "darkContact: false" tweak) */
.contact--light {
  --c-bg: #F3E9DB;
  --c-ink: #1C1714;
  --c-head: #1C1714;
  --c-sub: #6B5F54;
  --c-card: #FFFFFF;
  --c-line: #E7DAC8;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }

@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(10deg); } }
@keyframes spinslow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.78); } }

.page { position: relative; overflow-x: clip; }
.container { max-width: 1180px; margin: 0 auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.spark { display: block; flex: none; fill: var(--accent); }
.spark--ink { fill: var(--ink); }

.noise {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
  background-size: 140px 140px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-body); font-weight: 600;
  border-radius: 999px;
}
.btn--primary {
  color: #fff; background: var(--accent);
  transition: transform .2s ease, box-shadow .25s ease;
}
.btn--primary:hover { transform: translateY(-2px); }

.btn--nav {
  font-size: .92rem; padding: 11px 20px;
  box-shadow: 0 10px 26px -12px color-mix(in oklab, var(--accent), transparent 30%);
}
.btn--nav:hover { box-shadow: 0 16px 34px -14px color-mix(in oklab, var(--accent), transparent 20%); }

.btn--hero {
  font-size: 1.02rem; padding: 16px 30px;
  box-shadow: 0 14px 34px -12px color-mix(in oklab, var(--accent), transparent 28%);
}
.btn--hero:hover { box-shadow: 0 20px 44px -14px color-mix(in oklab, var(--accent), transparent 18%); }

.btn--ghost {
  font-size: 1.02rem; color: var(--ink); background: transparent;
  padding: 16px 28px; border: 1.6px solid rgba(var(--shadow-rgb),.18);
  transition: border-color .2s ease, background .2s ease;
}
.btn--ghost:hover { border-color: var(--accent); background: color-mix(in oklab, var(--accent), transparent 94%); }

.btn--cta {
  font-size: 1.05rem; padding: 17px 32px;
  box-shadow: 0 16px 38px -14px color-mix(in oklab, var(--accent), transparent 24%);
}
.btn--cta:hover { box-shadow: 0 22px 48px -16px color-mix(in oklab, var(--accent), transparent 14%); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(var(--bg-rgb),.55);
  transition: background .3s ease, box-shadow .3s ease;
}
.nav.is-scrolled {
  background: rgba(var(--bg-rgb),.88);
  box-shadow: 0 1px 0 rgba(var(--shadow-rgb),.07), 0 16px 40px -32px rgba(var(--shadow-rgb),.6);
}
.nav__inner {
  max-width: 1180px; margin: 0 auto; padding: 15px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand__word {
  font-family: var(--f-display); font-weight: 800; font-size: 1.24rem;
  letter-spacing: -.02em; color: var(--ink);
}
.brand__word span { color: var(--accent); }
.nav__links { display: flex; align-items: center; gap: clamp(14px,2.4vw,30px); flex-wrap: wrap; }
.nav__link {
  font-family: var(--f-body); font-weight: 600; font-size: .95rem; color: var(--ink-2);
  transition: color .2s;
}
.nav__link:hover { color: var(--accent); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(64px,11vh,140px) var(--gutter) clamp(56px,8vh,104px);
}
.hero__glow {
  position: absolute; top: -14%; right: -6%;
  width: min(640px,78vw); height: min(640px,78vw);
  background: radial-gradient(circle, color-mix(in oklab, var(--accent), transparent 52%), transparent 64%);
  filter: blur(36px); opacity: .6; pointer-events: none; z-index: 0;
}
.hero__spark-big {
  position: absolute; top: 11%; right: 9%; width: clamp(78px,13vw,180px); height: auto;
  opacity: .92; z-index: 1; animation: floaty 7.5s ease-in-out infinite; pointer-events: none;
}
.hero__spark-small {
  position: absolute; bottom: 6%; left: 4%; width: clamp(40px,5vw,72px); height: auto;
  opacity: .18; z-index: 0; animation: spinslow 26s linear infinite; pointer-events: none;
}
.hero__content { position: relative; z-index: 2; }
.badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,.55);
  font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  animation: rise .8s var(--ease) .04s both;
}
.badge__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: pulse 1.9s ease-in-out infinite;
}
.hero__title {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(2.9rem,8.2vw,6rem);
  line-height: .96; letter-spacing: -.032em; margin: 22px 0 0; max-width: 16ch;
  animation: rise .9s var(--ease) .14s both;
}
.hero__title span { color: var(--accent); }
.hero__lede {
  font-weight: 400; font-size: clamp(1.06rem,1.7vw,1.32rem); line-height: 1.55;
  color: var(--sub); max-width: 56ch; margin: 26px 0 0;
  animation: rise .9s var(--ease) .26s both;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px;
  animation: rise .9s var(--ease) .38s both;
}

/* ---------- Marquee ---------- */
.marquee {
  background: var(--dark); color: var(--dark-ink); overflow: hidden; padding: 17px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee__group {
  display: flex; align-items: center; gap: 30px; padding-right: 30px; margin: 0; list-style: none;
  font-family: var(--f-mono); font-size: .92rem; font-weight: 500; letter-spacing: .04em; white-space: nowrap;
}
.marquee__group li { display: contents; }
.marquee__group .spark { width: 13px; height: 13px; }

/* ---------- Sections ---------- */
.section { padding: clamp(72px,11vh,128px) var(--gutter); }
.eyebrow {
  font-family: var(--f-mono); font-size: .78rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
}
.h2 {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(2.1rem,4.8vw,3.5rem);
  line-height: 1.0; letter-spacing: -.025em; color: var(--ink); margin: 16px 0 0;
}

/* Services */
.services__intro { max-width: 62ch; }
.services__intro p { font-size: 1.08rem; line-height: 1.6; color: var(--muted); margin: 18px 0 0; }
.services__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(278px, 1fr));
  gap: 18px; margin-top: clamp(40px,6vh,64px);
}
.card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: 30px 28px;
  transition: transform .38s var(--ease), box-shadow .38s ease, border-color .38s ease;
}
.card:hover,
.js .card.is-settled:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--accent), var(--line) 35%);
  box-shadow: 0 26px 54px -30px rgba(var(--shadow-rgb),.45);
}
.card__top { display: flex; align-items: center; justify-content: space-between; }
.card__num { font-family: var(--f-mono); font-size: .82rem; font-weight: 600; letter-spacing: .1em; color: var(--accent); }
.card__top .spark { width: 18px; height: 18px; opacity: .85; }
.card h3 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.32rem; line-height: 1.14;
  letter-spacing: -.012em; color: var(--ink); margin: 20px 0 10px;
}
.card p { font-size: .98rem; line-height: 1.56; color: var(--muted); margin: 0; }

/* Approach (dark band) */
.approach {
  position: relative; background: var(--dark); color: var(--dark-ink);
  padding: clamp(72px,12vh,132px) var(--gutter); overflow: hidden;
}
.approach__glow {
  position: absolute; bottom: -30%; left: -8%;
  width: min(560px,70vw); height: min(560px,70vw);
  background: radial-gradient(circle, color-mix(in oklab, var(--accent), transparent 60%), transparent 66%);
  filter: blur(40px); opacity: .5; pointer-events: none;
}
.approach .container { position: relative; z-index: 1; }
.approach__intro { max-width: 60ch; }
.approach .h2 { color: var(--dark-head); }
.pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px,4vw,52px); margin-top: clamp(40px,6vh,60px);
}
.pillar { padding-top: 24px; border-top: 2px solid color-mix(in oklab, var(--accent), transparent 35%); }
.pillar h3 {
  font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em;
  color: var(--dark-head); margin: 0 0 12px;
}
.pillar p { font-size: 1rem; line-height: 1.6; color: var(--dark-sub); margin: 0; }

/* About */
.about__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px,5vw,72px); align-items: start;
}
.about .h2 { font-size: clamp(2.1rem,4.6vw,3.3rem); line-height: 1.02; }
.about__copy p { font-size: 1.08rem; line-height: 1.65; color: var(--sub); margin: 18px 0 0; }
.about__copy .h2 + p { margin-top: 22px; }
.founder {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(26px,3vw,34px); box-shadow: 0 30px 60px -44px rgba(var(--shadow-rgb),.5);
}
.founder__head { display: flex; align-items: center; gap: 18px; }
.founder__avatar {
  width: 66px; height: 66px; flex: none; border-radius: 18px;
  background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent), var(--ink) 32%));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 800; font-size: 1.42rem; letter-spacing: .01em;
  box-shadow: 0 12px 26px -12px color-mix(in oklab, var(--accent), transparent 35%);
}
.founder__name { font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; color: var(--ink); line-height: 1.1; margin: 0; }
.founder__role {
  font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin-top: 6px;
}
.founder__bio { font-size: 1rem; line-height: 1.62; color: var(--sub); margin: 20px 0 0; }
.founder__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pill {
  font-weight: 600; font-size: .9rem; color: var(--ink);
  border: 1.4px solid var(--line-3); border-radius: 999px; padding: 9px 16px;
  transition: border-color .2s ease, color .2s ease;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }

/* Contact */
.contact {
  position: relative; background: var(--c-bg); color: var(--c-ink);
  padding: clamp(76px,13vh,140px) var(--gutter); overflow: hidden;
}
.contact__spark {
  position: absolute; top: 14%; right: 7%; width: clamp(60px,9vw,128px); height: auto;
  opacity: .16; animation: spinslow 30s linear infinite; pointer-events: none;
}
.contact .container { position: relative; z-index: 1; }
.contact__intro { max-width: 58ch; }
.contact__title {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem,6vw,4.4rem);
  line-height: .98; letter-spacing: -.03em; color: var(--c-head); margin: 16px 0 0;
}
.contact__intro p { font-size: clamp(1.05rem,1.6vw,1.22rem); line-height: 1.55; color: var(--c-sub); margin: 20px 0 0; }
.contact__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-top: clamp(36px,5vh,52px);
}
.contact-card {
  display: block; background: var(--c-card); border: 1px solid var(--c-line);
  border-radius: 16px; padding: 22px 24px;
}
a.contact-card { transition: transform .25s ease, border-color .25s ease; }
a.contact-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.contact-card__label {
  font-family: var(--f-mono); font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.contact-card__value {
  font-weight: 600; font-size: 1.02rem; color: var(--c-head); margin-top: 10px; word-break: break-word;
}
.contact__cta { margin-top: 36px; }

/* Footer */
.footer {
  background: var(--footer-bg); color: var(--dark-ink);
  padding: clamp(48px,7vh,72px) var(--gutter) clamp(34px,5vh,48px);
  border-top: 1px solid rgba(255,255,255,.07);
}
.footer__top { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; }
.footer__about { max-width: 34ch; }
.footer .brand__word { font-size: 1.2rem; color: var(--dark-head); }
.footer__about p { font-size: .98rem; line-height: 1.55; color: var(--footer-sub); margin: 14px 0 0; }
.footer__cols { display: flex; gap: clamp(34px,6vw,72px); flex-wrap: wrap; }
.footer__heading {
  font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--footer-dim); margin: 0 0 14px;
}
.footer__links { display: flex; flex-direction: column; gap: 11px; }
.footer__links a { font-size: .96rem; color: var(--footer-link); transition: color .2s; }
.footer__links a:hover { color: var(--accent); }
.footer__bottom {
  max-width: 1180px; margin: 36px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: .76rem; color: var(--footer-dim);
}

/* ---------- Scroll reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(20px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
/* Once settled, hand transitions over to the card's hover state */
.js .card.is-in.is-settled {
  transition: transform .38s var(--ease), box-shadow .38s ease, border-color .38s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .noise, .nav { position: static; }
}