:root {
  --paper: #e6deca;
  --ink: #353839;
  --wine: #7a0b2a;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--paper); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-height: 100svh; color: var(--ink); overflow-x: hidden; }
.viewport { width: 100%; min-height: 100svh; background: var(--paper); }

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.poster {
  position: relative;
  width: 100%;
  min-height: max(100svh, 56.2044vw); /* desktop.png = 1918 x 1078 */
  overflow: hidden;
  background: var(--paper);
}

.deco,
.mobile-arrow,
.site-logo,
.brand-right,
.hero-title,
.contact-links {
  position: absolute;
}

.spring-arrow,
.mobile-arrow {
  position: absolute;
}

.deco {
  z-index: 1;
  display: block;
  overflow: hidden;
  pointer-events: none;
  fill: var(--wine);
  color: var(--wine);
}

.site-logo,
.brand-right,
.hero-title,
.contact-links { z-index: 3; }

.site-logo {
  display: block;
  height: auto;
  object-fit: contain;
}

.brand-right {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.015em;
  text-align: left;
  white-space: nowrap;
}

.hero-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "PT Serif", "Times New Roman", Times, serif;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-align: center;
  text-transform: uppercase;
}

.hero-title span { display: block; white-space: nowrap; }

.contact-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  text-align: center;
}

.contact-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.contact-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}

.press-pending {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: help;
}

.press-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  z-index: 20;
  width: max-content;
  max-width: min(340px, 82vw);
  padding: 9px 12px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.press-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 6px solid transparent;
  border-top-color: var(--ink);
  transform: translateX(-50%);
}

.press-pending:hover .press-tooltip,
.press-pending:focus-visible .press-tooltip,
.press-pending:focus .press-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}


.mobile-arrow {
  display: none;
  z-index: 2;
  pointer-events: none;
}

.mobile-arrow-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--wine);
}

/* The hand-written KISA mark is intentionally static. */
.signature-art {
  transform: none;
  animation: none;
}

/* Spring arrow: animation lives on an HTML wrapper, not an SVG <use>.
   This avoids old/current WebKit SVG animation edge cases on iPhone/iPad. */
.spring-arrow {
  z-index: 2;
  pointer-events: none;
  transform-origin: 100% 58%;
  -webkit-animation: spring-poke 2.8s cubic-bezier(.2,.75,.2,1) infinite;
  animation: spring-poke 2.8s cubic-bezier(.2,.75,.2,1) infinite;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.spring-arrow-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--wine);
}

@-webkit-keyframes spring-poke {
  0%, 64%, 100% { -webkit-transform: translateX(0) scaleX(1); transform: translateX(0) scaleX(1); }
  70% { -webkit-transform: translateX(-0.65vw) scaleX(1.10); transform: translateX(-0.65vw) scaleX(1.10); }
  76% { -webkit-transform: translateX(0.24vw) scaleX(.965); transform: translateX(0.24vw) scaleX(.965); }
  82% { -webkit-transform: translateX(-0.30vw) scaleX(1.045); transform: translateX(-0.30vw) scaleX(1.045); }
  88% { -webkit-transform: translateX(0.10vw) scaleX(.988); transform: translateX(0.10vw) scaleX(.988); }
  94% { -webkit-transform: translateX(0) scaleX(1); transform: translateX(0) scaleX(1); }
}

@keyframes spring-poke {
  0%, 64%, 100% { transform: translateX(0) scaleX(1); }
  70% { transform: translateX(-0.65vw) scaleX(1.10); }
  76% { transform: translateX(0.24vw) scaleX(.965); }
  82% { transform: translateX(-0.30vw) scaleX(1.045); }
  88% { transform: translateX(0.10vw) scaleX(.988); }
  94% { transform: translateX(0) scaleX(1); }
}

/* The hand-drawn cat enters once from the left. */
.cat-art {
  transform-box: border-box;
  transform-origin: 50% 50%;
  animation: cat-enter 1.05s cubic-bezier(.16,1,.3,1) both;
  animation-delay: .12s;
  will-change: transform, opacity;
}

@keyframes cat-enter {
  0% { transform: translateX(-108%) rotate(-2deg); opacity: 0; }
  72% { transform: translateX(3%) rotate(.5deg); opacity: 1; }
  88% { transform: translateX(-1.2%) rotate(-.2deg); opacity: 1; }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}

/* Eye blinking is implemented with native SVG <animate>/<animateTransform>
   on direct paths in index.html; do not animate SVG <use> with CSS in WebKit. */
.cat-eye { pointer-events: none; }

/* ========================================================================
   DESKTOP — layout follows desktop.png (1918 x 1078)
   Everything is expressed from viewport width, so a narrow browser does not
   crop a fixed 1280x720 canvas; the composition scales and the page can grow.
   ======================================================================== */
.top-left-art { left: .20vw; top: .20vw; width: 20.50vw; height: 18.20vw; }
.top-line-art { left: 35.92vw; top: 5.99vw; width: 27.74vw; height: 2.66vw; }
.spring-arrow { left: 75.29vw; top: 5.84vw; width: 21.06vw; height: 18.67vw; }
.signature-art { left: 62.40vw; top: 18.25vw; width: 34.05vw; height: 32.85vw; }
.cat-art { left: .20vw; top: 30.71vw; width: 29.72vw; height: 25.50vw; }
.press-underline { left: 38.69vw; top: 51.56vw; width: 25.24vw; height: 3.24vw; }

.site-logo { left: 4.28vw; top: 3.05vw; width: 10.60vw; }
.brand-right { right: 4.35vw; top: 5.12vw; font-size: 1.28vw; }

.hero-title {
  top: 10.72vw;
  left: 21.0vw;
  right: 18.0vw;
  font-size: 4.00vw;
}

/* Desktop headline is intentionally NOT conventionally centered.
   These six offsets reproduce the staggered composition from desktop.png
   (1918 x 1078): each line has its own horizontal axis, as in the designer
   reference. Vertical rhythm, font size and every other element stay intact. */
.hero-title span:nth-child(1) { transform: translateX(-2.02vw); }
.hero-title span:nth-child(2) { transform: translateX( 6.45vw); }
.hero-title span:nth-child(3) { transform: translateX(-4.13vw); }
.hero-title span:nth-child(4) { transform: translateX( 3.51vw); }
.hero-title span:nth-child(5) { transform: translateX(-7.16vw); }
.hero-title span:nth-child(6) { transform: translateX(-1.73vw); }

.contact-links {
  left: 50%;
  top: 42.88vw;
  transform: translateX(-50%);
  gap: 1.52vw;
  font-size: 1.62vw;
}

/* ========================================================================
   TABLET — strictly follows tablet.png (868 x 1152)
   ======================================================================== */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
  .poster { min-height: max(100svh, 132.7189vw); }

  .top-left-art { left: .46vw; top: .23vw; width: 30.41vw; height: 27.42vw; }
  .top-line-art { left: 35.60vw; top: 23.73vw; width: 27.42vw; height: 1.27vw; }
  .spring-arrow { left: 69.12vw; top: 55.07vw; width: 23.96vw; height: 27.88vw; }
  .signature-art { left: 35.83vw; top: 63.36vw; width: 57.26vw; height: 22.12vw; }
  .cat-art { left: .46vw; top: 100.23vw; width: 37.90vw; height: 32.14vw; }
  .press-underline { left: 39.40vw; top: 98.85vw; width: 23.73vw; height: 4.49vw; }

  .site-logo { left: 5.05vw; top: 3.95vw; width: 20.2vw; }
  .brand-right { right: 5.00vw; top: 8.30vw; font-size: 2.08vw; }

  .hero-title {
    top: 29.50vw;
    left: 7.5vw;
    right: 7.5vw;
    font-size: 5.98vw;
    line-height: .975;
    letter-spacing: -0.022em;
  }

  .hero-title span { transform: none; }

  .contact-links {
    left: 50%;
    top: 84.20vw;
    transform: translateX(-50%);
    gap: 2.18vw;
    font-size: 3.25vw;
  }

  .press-tooltip { font-size: 13px; }
}

/* ========================================================================
   MOBILE — compact single-screen composition.
   The reference artwork is 598x1292, but real phone browser viewports are
   usually much shorter once the address/tool bars are visible. On phones we
   therefore use the live dynamic viewport height instead of a 216vw poster.
   This keeps every important element visible without scrolling or clipping.
   ======================================================================== */
@media (max-width: 600px) and (orientation: portrait) {
  html,
  body,
  .viewport {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  body {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .viewport {
    height: 100dvh;
    min-height: 100dvh;
  }

  .poster {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  /* Top composition */
  .top-left-art {
    left: -1.5%;
    top: -3.5%;
    width: 47%;
    height: 31%;
  }

  .top-line-art {
    left: 36.5%;
    top: 24.8%;
    width: 27.5%;
    height: 2.4%;
  }

  .site-logo {
    left: 5.2%;
    top: 3.6%;
    width: clamp(106px, 29vw, 138px);
  }

  .brand-right {
    right: 5.3%;
    top: 8.1%;
    font-size: clamp(15px, 4.15vw, 21px);
    line-height: 1.12;
  }

  /* Headline gets its own protected band; decorative art stays behind it. */
  .hero-title {
    z-index: 5;
    top: 28.7%;
    left: 3.7%;
    right: 3.7%;
    font-size: clamp(22px, 6.55vw, 31px);
    line-height: .94;
    letter-spacing: -0.026em;
  }

  .hero-title span { transform: none; }

  /* The desktop spring sketch is too wide to stretch vertically on a phone. */
  .spring-arrow { display: none; }

  .mobile-arrow {
    display: block;
    right: 1.2%;
    top: 46.5%;
    width: 27%;
    height: 34%;
    transform-origin: 78% 100%;
    -webkit-animation: mobile-arrow-spring 3.2s cubic-bezier(.2,.78,.2,1) infinite;
    animation: mobile-arrow-spring 3.2s cubic-bezier(.2,.78,.2,1) infinite;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Contact block is kept clear of both the arrow and the signature. */
  .contact-links {
    z-index: 6;
    left: 50%;
    top: 54.0%;
    transform: translateX(-50%);
    gap: clamp(12px, 1.1dvh, 19px);
    font-size: clamp(17px, 4.55vw, 21px);
    line-height: 1.05;
  }

  .contact-link {
    min-height: 28px;
  }

  .press-underline {
    z-index: 4;
    left: 31%;
    top: 69.5%;
    width: 38%;
    height: 3.7%;
  }

  .press-tooltip {
    font-size: 12px;
    max-width: min(310px, 80vw);
  }

  /* Lower artwork is deliberately split left/right so it can overlap in Y
     without covering the interactive text. */
  .signature-art {
    z-index: 2;
    left: 16.5%;
    top: 73.0%;
    width: 77%;
    height: 18.5%;
    animation: none;
  }

  .cat-art {
    z-index: 2;
    left: -1.5%;
    top: auto;
    bottom: -2.0%;
    width: 47%;
    height: 20.5%;
  }
}

@-webkit-keyframes mobile-arrow-spring {
  0%, 62%, 100% { -webkit-transform: translate(0,0) rotate(0deg) scaleY(1); transform: translate(0,0) rotate(0deg) scaleY(1); }
  70% { -webkit-transform: translate(-1.0vw,-1.15dvh) rotate(-2.2deg) scaleY(1.055); transform: translate(-1.0vw,-1.15dvh) rotate(-2.2deg) scaleY(1.055); }
  77% { -webkit-transform: translate(.35vw,.35dvh) rotate(.9deg) scaleY(.982); transform: translate(.35vw,.35dvh) rotate(.9deg) scaleY(.982); }
  84% { -webkit-transform: translate(-.45vw,-.45dvh) rotate(-.8deg) scaleY(1.022); transform: translate(-.45vw,-.45dvh) rotate(-.8deg) scaleY(1.022); }
  91% { -webkit-transform: translate(.12vw,.12dvh) rotate(.25deg) scaleY(.995); transform: translate(.12vw,.12dvh) rotate(.25deg) scaleY(.995); }
}

@keyframes mobile-arrow-spring {
  0%, 62%, 100% { transform: translate(0,0) rotate(0deg) scaleY(1); }
  70% { transform: translate(-1.0vw,-1.15dvh) rotate(-2.2deg) scaleY(1.055); }
  77% { transform: translate(.35vw,.35dvh) rotate(.9deg) scaleY(.982); }
  84% { transform: translate(-.45vw,-.45dvh) rotate(-.8deg) scaleY(1.022); }
  91% { transform: translate(.12vw,.12dvh) rotate(.25deg) scaleY(.995); }
}

/* Extra-short browser viewport: compress the lower decoration a little more,
   but never move the headline or links off-screen. */
@media (max-width: 600px) and (orientation: portrait) and (max-height: 690px) {
  .hero-title { top: 27.6%; font-size: clamp(21px, 6.25vw, 28px); }
  .contact-links { top: 50.4%; gap: 1.65dvh; }
  .press-underline { top: 68.0%; }
  .mobile-arrow { top: 44.8%; height: 32%; }
  .signature-art { top: 72.0%; height: 17.0%; }
  .cat-art { height: 19.0%; bottom: -2.5%; }
}

/* Landscape phones/tablets use the desktop composition, scaled from width. */
@media (max-height: 560px) and (orientation: landscape) {
  .poster { min-height: max(100svh, 56.2044vw); }
}