/* ===== Design tokens: change these to restyle the whole site ===== */
:root {
  --cream: #F6ECDD;
  --cream-deep: #EADBC3;
  --cobalt: #1F45D6;
  --cobalt-light: #7D97FF;     /* readable cobalt on dark backgrounds */
  --dark: #111111;
  --ink: #111111;
  --white: #FFFFFF;
  --wide: "Archivo", "Arial Black", sans-serif;   /* extra-wide display face */
  --font: "Inter Tight", system-ui, -apple-system, sans-serif;
  --script: "Kaushan Script", "Brush Script MT", cursive;
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(80px, 11vw, 150px);
  --tear: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'><path d='M0 40 L0 19 L12 20 L21 10 L46 11 L65 26 L74 24 L88 9 L98 21 L119 10 L134 10 L159 21 L168 26 L179 15 L205 9 L231 26 L251 9 L266 9 L291 12 L308 21 L320 25 L331 26 L348 25 L361 11 L387 26 L401 19 L412 25 L422 26 L431 14 L454 25 L475 18 L497 26 L519 19 L536 15 L549 15 L559 26 L576 24 L599 18 L621 17 L631 11 L655 21 L668 18 L680 23 L701 9 L711 25 L737 18 L755 19 L778 26 L800 10 L810 16 L833 10 L842 17 L868 22 L885 20 L904 8 L926 19 L939 11 L962 9 L976 17 L988 15 L1008 20 L1031 10 L1044 22 L1064 25 L1080 12 L1101 25 L1117 21 L1136 20 L1151 12 L1161 13 L1173 15 L1188 8 L1200 26 L1200 40 Z'/></svg>");
  --crumple: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.0065' numOctaves='5' seed='4'/><feDiffuseLighting lighting-color='white' surfaceScale='9'><feDistantLight azimuth='45' elevation='35'/></feDiffuseLighting></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--dark);
  color: var(--cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; }

.wrap { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: var(--section-y) 0; }

/* ===== Dark crumpled-paper sections ===== */
.paper { position: relative; background: var(--dark); color: var(--cream); }
.paper::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--crumple);
  background-size: 700px 700px;
  mix-blend-mode: screen;
  opacity: .15;
}

/* ===== Torn-paper edge at the top of a section ===== */
.torn::before {
  content: ""; position: absolute; left: 0; right: 0; top: -38px; height: 40px; z-index: 3;
  background: inherit;
  -webkit-mask: var(--tear) center / 100% 100% no-repeat;
          mask: var(--tear) center / 100% 100% no-repeat;
}
.brands, .about { background: var(--cobalt); color: var(--white); }
.work.torn::before { background: #2d2d2d; }  /* matches the textured paper tone */

/* ===== Type ===== */
.wordmark, .headline__main, .stat__num, .card__title, .pillar h3 {
  font-family: var(--wide);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  font-weight: 800;
  text-transform: uppercase;
}
.script { font-family: var(--script); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Big heading with a script word written across it */
.headline { position: relative; display: inline-block; margin-bottom: clamp(36px, 5vw, 56px); }
.headline__main {
  display: block;
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: .95;
  letter-spacing: -0.01em;
}
.headline__script {
  position: absolute;
  right: -0.7em; bottom: -0.85em;
  font-size: clamp(1.6rem, 3.8vw, 3.2rem);
  transform: rotate(-7deg);
  white-space: nowrap;
  color: var(--cobalt-light);
}
.brands .headline__script, .about .headline__script { color: var(--cream); }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  border: 2.5px solid var(--cobalt);
  transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--cobalt); color: var(--white); }
.btn--solid:hover { box-shadow: 0 8px 24px rgba(31, 69, 214, .45); }
.btn--outline { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn--outline:hover { background: var(--cream); color: var(--dark); }
.btn--white { background: var(--white); color: var(--cobalt); border-color: var(--white); }
.btn--white:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }

/* ===== Doodles ===== */
.doodle { position: absolute; z-index: 1; pointer-events: none; color: var(--cobalt-light); }
.doodle--hero-a { width: 120px; height: 40px; top: 6%; left: 5%; transform: rotate(-12deg); }
.doodle--hero-b { width: 80px; height: 58px; top: 30%; right: 7%; color: var(--cream); }
.doodle--hero-c { width: 34px; height: 34px; top: 9%; right: 22%; }
.doodle--brands { width: 130px; height: 44px; top: 70px; right: 8%; color: var(--cream); transform: rotate(10deg); }
.doodle--work-a { width: 80px; height: 58px; top: 90px; right: 9%; }
.doodle--work-b { width: 30px; height: 30px; top: 46%; left: 3%; color: var(--cream); }

/* ===== Hero ===== */
.hero { padding-top: clamp(90px, 13vw, 160px); padding-bottom: clamp(60px, 8vw, 110px); overflow: hidden; }
.hero__inner { text-align: center; }
.wordmark {
  position: relative;
  display: inline-block;
  font-size: clamp(2.5rem, 7.4vw, 7rem);
  white-space: nowrap;
  line-height: .9;
  letter-spacing: -0.02em;
  margin-bottom: clamp(56px, 7vw, 80px);
  isolation: isolate;
}
.wordmark__main { position: relative; z-index: 2; display: block; color: var(--cream); }
.wordmark__echo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--cobalt-light);
  opacity: .75;
}
.wordmark__echo--top    { transform: translate(-0.05em, -0.36em) scale(1.03, .55) skewX(10deg); }
.wordmark__echo--bottom { transform: translate(0.07em, 0.38em) scale(.98, .6) skewX(-14deg); }
.wordmark__script {
  position: absolute; z-index: 3;
  right: 4%; bottom: -0.42em;
  font-size: .42em;
  color: var(--cobalt-light);
  transform: rotate(-8deg);
  text-shadow: 0 2px 0 var(--dark);
}
.hero__tagline { font-size: clamp(1.05rem, 1.7vw, 1.3rem); max-width: 46ch; margin: 0 auto 32px; opacity: .9; }
.hero__doors { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ===== Cards ===== */
.card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .5);
}
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card--me img { object-position: 46% 26%; transform: scale(1.7); transform-origin: 46% 30%; }
.card--cobalt { background: var(--cobalt); color: var(--white); }
.card--cream  { background: var(--cream-deep); color: var(--ink); }
.card--white  { background: var(--white); color: var(--ink); }
.card--me     { background: linear-gradient(170deg, #cfcfcf, #8d8d8d); color: var(--white); }
.card__tag {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.card__title {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2;
  font-size: clamp(.8rem, 1.3vw, 1.15rem);
  line-height: 1.05;
}
.card:has(img)::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent 45%);
}
.card:has(img) { color: var(--white); }

/* ===== Fanned spread ===== */
.fan {
  --cw: clamp(150px, 16vw, 220px);
  position: relative; z-index: 2;
  height: calc(var(--cw) * 1.75);
  margin-top: clamp(48px, 6vw, 80px);
}
.fan .card {
  position: absolute; left: 50%; top: 0;
  width: var(--cw);
  margin-left: calc(var(--cw) / -2);
  transform-origin: 50% 120%;
  transform:
    translateX(calc(var(--i) * var(--cw) * .9))
    translateY(calc(var(--i) * var(--i) * var(--cw) * .09))
    rotate(calc(var(--i) * 9deg));
  z-index: calc(10 - var(--i) * var(--i));
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.fan .card:hover {
  transform:
    translateX(calc(var(--i) * var(--cw) * .9))
    translateY(calc(var(--i) * var(--i) * var(--cw) * .09 - 22px))
    rotate(calc(var(--i) * 9deg))
    scale(1.05);
  z-index: 20;
}

/* ===== Brands band ===== */
.brands__pitch { font-size: clamp(1.15rem, 2vw, 1.5rem); max-width: 44ch; margin-bottom: clamp(48px, 6vw, 72px); }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin-bottom: 18px;
  border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 32px;
}
.stat__num { display: block; font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1; margin-bottom: 12px; }
.stats__note { font-size: .85rem; opacity: .65; margin-bottom: clamp(44px, 6vw, 64px); }
.stat__label { font-size: 1.05rem; opacity: .85; max-width: 20ch; display: block; }

/* ===== Creative work ===== */
.work__copy { font-size: 1.15rem; max-width: 46ch; margin-bottom: clamp(44px, 6vw, 68px); opacity: .9; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.5vw, 32px); }
.pillar { text-decoration: none; color: var(--cream); display: block; }
.pillar .card { margin-bottom: 18px; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pillar:nth-child(odd)  .card { transform: rotate(-2deg); }
.pillar:nth-child(even) .card { transform: rotate(2deg); }
.pillar:hover .card { transform: rotate(0) translateY(-8px); }
.pillar h3 { font-size: 1.05rem; line-height: 1.1; margin-bottom: 6px; }
.pillar p { font-size: .98rem; opacity: .75; margin-bottom: 10px; }
.pillar__go { font-weight: 700; color: var(--cobalt-light); }

/* ===== About / footer ===== */
.about__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.about__bio { font-size: clamp(1.1rem, 1.8vw, 1.35rem); max-width: 40ch; margin-bottom: 36px; }
.about__links { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.about__links a {
  font-weight: 700; font-size: 1.05rem; text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, .45); padding-bottom: 2px;
  transition: border-color .2s;
}
.about__links a:hover { border-color: var(--white); }
.about__small { font-size: .9rem; opacity: .7; margin-top: clamp(56px, 7vw, 90px); }

/* Sticker cut-out with a white outline */
.sticker { position: relative; max-width: 340px; justify-self: center; width: 100%; }
.sticker img, .sticker__ph {
  display: block; width: 100%; height: auto;
  filter:
    drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff)
    drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff)
    drop-shadow(0 16px 22px rgba(0, 0, 0, .35));
  transform: rotate(3deg);
}
.sticker:has(img) .sticker__ph { display: none; }
.doodle--arrow { width: 130px; height: 86px; left: -120px; top: 18%; color: var(--cream); transform: scaleX(1); }

/* ===== Subtle fade-in on scroll ===== */
.fade { opacity: 0; translate: 0 18px; transition: opacity .7s ease, translate .7s ease; }
.fade.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .fade { opacity: 1; translate: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ===== Tablet / mobile ===== */
@media (max-width: 900px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .about__grid { grid-template-columns: 1fr; }
  .doodle--arrow { display: none; }
}
@media (max-width: 700px) {
  .fan {
    height: auto; display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 20px var(--gutter) 40px; scrollbar-width: none;
  }
  .fan::-webkit-scrollbar { display: none; }
  .fan .card, .fan .card:hover {
    position: relative; left: auto; margin: 0;
    flex: 0 0 52%; width: auto;
    transform: rotate(calc(var(--i) * 2deg));
    scroll-snap-align: center;
  }
  .card__title { font-size: .95rem; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .hero__doors .btn, .brands .btn { width: 100%; text-align: center; }
  .doodle--hero-a, .doodle--hero-b, .doodle--hero-c, .doodle--brands, .doodle--work-a, .doodle--work-b { display: none; }
  .headline__script { right: 0; }
  .sticker { max-width: 240px; }
  .wordmark { white-space: normal; font-size: clamp(2.6rem, 14vw, 4.2rem); }
  .wordmark__echo { display: none; }
  .wordmark__script { right: 0; bottom: -0.55em; font-size: .5em; }
}

/* ===== Hover-to-play videos (drop .mp4 files in videos/) ===== */
.card video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .3s ease; z-index: 1;
}
.card.is-playing video { opacity: 1; }
.card:has(video)::after { z-index: 1; }
.card:has(video) { color: var(--white); }

/* ===== Editorial edit showcase ===== */
.showreel {
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(28px, 5vw, 64px);
  align-items: center; margin-top: clamp(64px, 9vw, 120px);
}
.showreel__title {
  font-family: var(--wide); font-stretch: 125%; font-variation-settings: "wdth" 125;
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.05; margin-bottom: 14px;
}
.showreel__text p:last-child { opacity: .8; max-width: 34ch; }
.showreel__video {
  position: relative; border-radius: 22px; overflow: hidden;
  aspect-ratio: 16 / 9; background: #000;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .5);
  transform: rotate(-1deg);
}
.showreel__video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sound {
  position: absolute; right: 14px; bottom: 14px;
  font: 700 .85rem var(--font); color: var(--white);
  background: rgba(0, 0, 0, .55); border: 1.5px solid rgba(255, 255, 255, .6);
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  backdrop-filter: blur(6px);
}
.sound:hover { background: var(--cobalt); border-color: var(--cobalt); }
@media (max-width: 900px) { .showreel { grid-template-columns: 1fr; } }

/* Small uppercase labels */
.label { font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.label--blue { color: var(--cobalt-light); }
.showreel__link { display: inline-block; margin-top: 16px; text-decoration: none; }
.showreel__text p:last-of-type { opacity: .8; max-width: 34ch; }