/* IGANI donkey hero — drop-in, scoped under .dh so it won't touch the rest of your page.
   Palette: paper #ffffff · ink (hoodie navy) #14223b · slate #4b5568 · igani blue #1f55b5
   Type: Anton (the campaign mark) for "Dumb Ass" only; the site sans (DM Sans) for everything else. */
.dh, .dh *, .dh *::before, .dh *::after { box-sizing: border-box; }
.dh [hidden] { display: none !important; }

.dh {
  --dh-ink: #14223b;
  --dh-slate: #4b5568;
  --dh-blue: #1f55b5;
  --dh-blue-deep: #173f88;
  --dh-edge: clamp(24px, 6vw, 110px);

  position: relative;
  /* Fills the screen below your site header (--dh-top is set by dumb-hero.js) */
  height: calc(100vh - var(--dh-top, 0px));
  height: calc(100svh - var(--dh-top, 0px));
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
  background: #ffffff;
  color: var(--dh-ink);
  font-family: var(--sans, "DM Sans", "Helvetica Neue", Arial, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* Nav */
.dh-nav {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(32px + env(safe-area-inset-top, 0px)) var(--dh-edge) 0;
  animation: dh-fade 0.9s ease-out 0.15s both;
}
.dh-nav__brand { display: flex; align-items: baseline; gap: 12px; }
.dh-logo { font: 700 32px/1 var(--sans, "DM Sans", sans-serif); letter-spacing: -0.035em; color: var(--dh-ink); text-decoration: none; }
.dh-nav__x { font: 400 15px/1 var(--sans, "DM Sans", sans-serif); color: var(--dh-slate); }
.dh-nav__links { display: flex; gap: 36px; font: 500 16px/1 var(--sans, "DM Sans", sans-serif); }
.dh-nav__links a { color: var(--dh-ink); text-decoration: none; }
.dh-nav__links a:hover { color: var(--dh-blue); }

/* Donkey (back layer) */
.dh-donkey {
  position: absolute; z-index: 1;
  left: 25%; bottom: 0;
  height: 100%; width: auto; max-width: none;
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
  pointer-events: none;
  display: block;
  object-fit: contain;
}

/* Copy (front layer). Both headline lines scale with this column;
   "Dumb Ass" fills its width, the line above is a smaller lead-in. */
.dh-copy {
  position: absolute; z-index: 3;
  left: 54%; top: 52%;
  width: min(40vw, 660px);
  transform: translateY(-50%);
  container-type: inline-size;
  animation: dh-rise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
.dh-copy h1 { margin: 0; font-weight: 400; }
.dh-copy__pre {
  display: block;
  font: 500 8.4cqi/1.15 var(--sans, "DM Sans", sans-serif);
  letter-spacing: -0.028em;
  white-space: nowrap;
}
.dh-copy__mark {
  display: block;
  margin: 0.06em 0 0 -0.02em;
  font: 400 25.6cqi/0.86 "Anton", Impact, "Arial Narrow", sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  /* slanted, same as the site's "Don't be a dumb ass" button */
  transform: skewX(-9deg);
  transform-origin: left bottom;
}
.dh-copy__lede {
  margin: 1.6em 0 0;
  max-width: 30em;
  font: 400 clamp(16px, 1.25vw, 20px)/1.55 var(--sans, "DM Sans", sans-serif);
  color: var(--dh-slate);
  text-wrap: pretty;
}
.dh-copy__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 2.25rem; }

.dh-btn {
  display: inline-flex; align-items: center;
  padding: 17px 28px; border-radius: var(--r-sm, 8px);
  background: var(--dh-blue); color: #fff;
  font: 500 clamp(16px, 1.15vw, 18px)/1 var(--sans, "DM Sans", sans-serif);
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition: background-color 180ms, transform 180ms, box-shadow 180ms;
}
.dh-btn:hover { background: var(--dh-blue-deep); transform: translateY(-1px); box-shadow: var(--sh-2); }
.dh-link {
  font: 500 clamp(16px, 1.15vw, 18px)/1 var(--sans, "DM Sans", sans-serif);
  color: var(--dh-ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  transition: color 180ms;
}
.dh-link:hover { color: var(--dh-blue); }
.dh a:focus-visible { outline: 2px solid var(--dh-blue); outline-offset: 4px; border-radius: 4px; }

@keyframes dh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dh-rise { from { opacity: 0; transform: translateY(calc(-50% + 24px)); } to { opacity: 1; transform: translateY(-50%); } }

/* Landscape tablets: same layout, nudged so nothing collides */
@media (max-width: 1024px) and (min-width: 821px) and (orientation: landscape) {
  .dh-nav__x { display: none; }
  .dh-donkey { left: 22%; height: 90%; }
  .dh-copy { left: 53%; width: 41vw; }
  .dh-nav__links { gap: 26px; }
}

/* Phones and portrait tablets: donkey on top, copy underneath, no overlap */
@media (max-width: 820px), (max-width: 1024px) and (orientation: portrait) {
  .dh { display: flex; flex-direction: column; height: auto; min-height: 100svh; }
  .dh-nav { position: relative; padding-top: calc(22px + env(safe-area-inset-top, 0px)); }
  .dh-nav__x { display: none; }
  .dh-logo { font-size: 28px; }
  .dh-nav__links { gap: 20px; font-size: 15px; }
  .dh-donkey {
    position: relative; left: auto; bottom: auto; transform: none;
    align-self: center; flex: none;
    height: 46svh; min-height: 300px;
    margin-top: auto;
  }
  .dh-copy {
    position: relative; left: auto; top: auto; transform: none;
    width: auto; margin: 22px var(--dh-edge) auto;
    padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px));
    animation-name: dh-rise-m;
  }
  .dh-copy__lede { margin-top: 1.25em; font-size: 16px; }
  .dh-copy__btns { margin-top: 1.5rem; }
  .dh-btn { padding: 15px 22px; }
}
@media (max-width: 1024px) and (orientation: portrait) and (min-width: 600px) {
  .dh-copy { margin-left: 10vw; margin-right: 10vw; }
  .dh-copy__lede { font-size: 18px; }
}
@keyframes dh-rise-m { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .dh-nav, .dh-copy { animation: none; }
}

/* ---- Phones and tablets: the donkey turns as you scroll (added by dumb-hero.js) ----
   The hero sticks to the screen while you scroll; the buttons wait until he has finished turning. */
.dh-cue { display: none; }
.dh.dh--scrub { position: sticky; top: var(--dh-stick, 0px); height: calc(100vh - var(--dh-stick, 0px)); height: calc(100svh - var(--dh-stick, 0px)); min-height: 0; }
.dh--scrub .dh-donkey { aspect-ratio: 508 / 600; }
.dh--scrub .dh-copy__btns { position: relative; }
.dh--scrub .dh-copy__btns > .dh-btn,
.dh--scrub .dh-copy__btns > .dh-link {
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}
.dh--done .dh-copy__btns > .dh-btn,
.dh--done .dh-copy__btns > .dh-link {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.45s ease 0.05s, transform 0.45s ease 0.05s, visibility 0s;
}
.dh--scrub .dh-cue {
  display: flex; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  flex-direction: column; align-items: flex-start; gap: 12px;
  font: 500 15px/1.2 var(--sans, "DM Sans", sans-serif); color: var(--dh-slate);
  transition: opacity 0.3s ease, visibility 0s;
}
.dh--done .dh-cue { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.dh-cue__label { display: inline-flex; align-items: center; gap: 10px; color: var(--dh-ink); }
.dh-cue__arrow { width: 20px; height: 20px; flex: none; color: var(--dh-blue); animation: dh-bob 1.4s ease-in-out infinite; }
.dh-cue__bar { display: block; width: 100%; max-width: 240px; height: 3px; border-radius: 3px; background: rgba(20, 34, 59, 0.12); overflow: hidden; }
.dh-cue__bar i { display: block; height: 100%; background: var(--dh-blue); transform-origin: left; transform: scaleX(0); }
@keyframes dh-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@media (max-width: 820px), (max-width: 1024px) and (orientation: portrait) {
  .dh--scrub .dh-donkey { height: clamp(240px, 46svh, 620px); min-height: 0; margin-top: 4px; }
  .dh--scrub .dh-copy { margin-top: 10px; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .dh--scrub .dh-copy__lede { margin-top: 0.9em; }
}
@media (prefers-reduced-motion: reduce) { .dh-cue__arrow { animation: none; } }

/* Scroll mode: "Dumb" and "Ass" on two lines, both big. Sizes follow the screen height so everything, buttons included, fits. */
.dh--scrub .dh-copy__w { display: block; }
.dh--scrub .dh-copy__mark { font-size: min(34cqi, 10.5svh); line-height: 0.92; margin-top: 0.08em; }
@media (max-width: 820px), (max-width: 1024px) and (orientation: portrait) {
  .dh--scrub .dh-donkey { height: clamp(180px, 32svh, 560px); }
  .dh--scrub .dh-copy__lede { font-size: 15px; line-height: 1.45; }
}
@media (min-height: 800px) {
  .dh--scrub .dh-copy__mark { font-size: min(34cqi, 13svh); }
}
@media (min-height: 800px) and (max-width: 820px), (min-height: 800px) and (max-width: 1024px) and (orientation: portrait) {
  .dh--scrub .dh-donkey { height: clamp(220px, 38svh, 560px); }
}
/* Very short screens: drop the paragraph so the headline and buttons still fit */
@media (max-height: 640px) {
  .dh--scrub .dh-copy__lede { display: none; }
}

/* Phones and portrait tablets, scroll mode: the headline on top, the donkey underneath and sitting on the bottom edge of the screen,
   so the cut-off at the bottom of his body is simply the edge of the screen. */
@media (max-width: 820px), (max-width: 1024px) and (orientation: portrait) {
  .dh--scrub .dh-copy { order: 1; margin-top: 8px; margin-bottom: 0; padding-bottom: 10px; }
  .dh--scrub .dh-donkey { order: 2; margin-top: auto; margin-bottom: 0; height: clamp(190px, 36svh, 600px); }
}
@media (min-height: 800px) and (max-width: 820px), (min-height: 800px) and (max-width: 1024px) and (orientation: portrait) {
  .dh--scrub .dh-donkey { height: clamp(240px, 42svh, 620px); }
}

/* Phones only, scroll mode: the headline on top, then the donkey, then the description and the buttons under him.
   The bottom of his body fades into the page instead of ending in a hard edge.
   (display: contents lets the headline, paragraph and buttons be placed around the donkey; sizes use --cw, 1% of the text width,
   because the copy block is no longer a box for container units.) */
@media (max-width: 599px) {
  .dh--scrub { --cw: calc((100vw - 2 * var(--dh-edge)) / 100); }
  .dh--scrub .dh-copy { display: contents; }
  .dh--scrub .dh-copy h1 { order: 1; margin: 8px var(--dh-edge) 0; }
  .dh--scrub .dh-copy__pre { font-size: calc(var(--cw) * 6.2); }
  .dh--scrub .dh-copy__mark { font-size: min(calc(var(--cw) * 46), 15svh); line-height: 0.9; margin-top: 0.06em; }
  .dh--scrub .dh-donkey {
    order: 2; flex: 1 1 0; min-height: 150px; height: auto; max-width: 100%; margin: 4px 0 0; align-self: center;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  }
  .dh--scrub .dh-copy__lede { order: 3; margin: 2px var(--dh-edge) 0; }
  .dh--scrub .dh-copy__btns { order: 4; margin: 14px var(--dh-edge) 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}