:root {
  --spinzo-red: #eb5a5a;
  --spinzo-red-light: #f4b8b8;
  --spinzo-red-soft: #fbeaea;
  --spinzo-blue: #0874c7;
  --spinzo-blue-light: #bcd4f6;
  --spinzo-blue-soft: #eaf2ff;
  --spinzo-orange: #ff8e17;
  --spinzo-orange-light: #ffd9a6;
  --spinzo-orange-soft: #fff2df;
  --spinzo-green: #35a852;
  --spinzo-green-light: #c4ebc2;
  --spinzo-green-soft: #edf8ea;
  --spinzo-purple: #7e3bb8;
  --spinzo-purple-light: #d8b8ea;
  --spinzo-purple-soft: #f3eaf9;
  --spinzo-teal: #0a9eaa;
  --spinzo-teal-soft: #e8f7f5;
  --spinzo-ink: #111827;
  --spinzo-body: #475569;
  --spinzo-muted: #64748b;
  --spinzo-border: #e2e8f0;
  --spinzo-soft-border: #e9eef5;
  --spinzo-canvas: #f8fafc;
  --spinzo-card: #ffffff;
  --shadow-card: 0 18px 45px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 24px 60px rgba(15, 23, 42, 0.14);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--spinzo-canvas);
  color: var(--spinzo-ink);
  font-family: "Poppins", system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(1200px, calc(100% - 48px));
  margin-inline: auto;

  @media (max-width: 640px) {
    width: min(100% - 30px, 1200px);
  }
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--spinzo-blue);
  color: white;
  font-weight: 600;
  transform: translateY(-150%);

  &:focus {
    transform: translateY(0);
  }
}

.site-header {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--spinzo-soft-border);
  backdrop-filter: blur(14px);
}

.header-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;

  img {
    width: 154px;
    height: auto;
  }

  &:focus-visible {
    outline: 3px solid var(--spinzo-blue);
    outline-offset: 5px;
  }
}

.header-brand {
  img {
    width: 240px;
  }

  @media (max-width: 480px) {
    img {
      width: 220px;
    }
  }
}

.hero {
  padding: 36px 0 52px;
  background: white;

  @media (max-width: 800px) {
    padding: 28px 0 42px;
  }
}

.hero-grid {
  min-height: 390px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--spinzo-border);
  border-radius: 32px;
  background: white;
  box-shadow: var(--shadow-card);

  @media (max-width: 800px) {
    min-height: auto;
    grid-template-columns: 1fr;
  }
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: 52px 24px 50px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  h1 {
    max-width: 560px;
    margin: 0;
    color: var(--spinzo-ink);
    font-size: clamp(44px, 4.8vw, 66px);
    font-weight: 800;
    letter-spacing: normal;
    line-height: 1.03;

    span {
      color: var(--spinzo-red);
    }
  }

  p {
    max-width: 535px;
    margin: 20px 0 0;
    color: var(--spinzo-body);
    font-size: 17px;
    line-height: 1.75;
  }

  @media (max-width: 960px) {
    padding-left: 36px;
  }

  @media (max-width: 640px) {
    padding: 38px 26px;

    h1 {
      font-size: 40px;
    }

    p {
      font-size: 15px;
    }
  }
}

.hero-link {
  width: fit-content;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--spinzo-blue);
  font-size: 14px;
  font-weight: 700;

  svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  &:focus-visible {
    outline: 3px solid var(--spinzo-blue-light);
    outline-offset: 6px;
    border-radius: 4px;
  }
}

.hero-media {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  background: var(--spinzo-blue-soft);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 82% center;
  }

  @media (max-width: 800px) {
    min-height: 300px;
    clip-path: none;

    img {
      object-position: 65% center;
    }
  }
}

.case-studies {
  padding: 76px 0 96px;

  @media (max-width: 640px) {
    padding: 70px 0 82px;
  }
}

.section-heading {
  margin-bottom: 38px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;

  h2 {
    margin: 0;
    font-size: clamp(34px, 4vw, 50px);
    letter-spacing: normal;
    line-height: 1.12;
  }

  p {
    max-width: 460px;
    margin: 0 0 4px;
    color: var(--spinzo-muted);
    font-size: 15px;
  }

  @media (max-width: 760px) {
    display: block;

    p {
      margin-top: 12px;
    }
  }
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;

  @media (max-width: 900px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: 620px) {
    grid-template-columns: 1fr;
  }
}

.case-card {
  --accent: var(--spinzo-red);
  --accent-soft: var(--spinzo-red-soft);
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--spinzo-border);
  border-radius: 26px;
  background: var(--spinzo-card);
  box-shadow: var(--shadow-card);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;

  &:hover {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--spinzo-border));
    box-shadow: var(--shadow-hover);

    .card-media img {
      transform: scale(1.035);
    }

    .card-link svg {
      transform: translateX(4px);
    }
  }

  &:focus-visible {
    outline: 4px solid color-mix(in srgb, var(--accent) 35%, white);
    outline-offset: 5px;
  }

}

.theme-red {
  --accent: var(--spinzo-red);
  --accent-soft: var(--spinzo-red-soft);
}

.theme-blue {
  --accent: var(--spinzo-blue);
  --accent-soft: var(--spinzo-blue-soft);
}

.theme-green {
  --accent: var(--spinzo-green);
  --accent-soft: var(--spinzo-green-soft);
}

.theme-orange {
  --accent: var(--spinzo-orange);
  --accent-soft: var(--spinzo-orange-soft);
}

.theme-purple {
  --accent: var(--spinzo-purple);
  --accent-soft: var(--spinzo-purple-soft);
}

.theme-teal {
  --accent: var(--spinzo-teal);
  --accent-soft: var(--spinzo-teal-soft);

  .card-link {
    color: #067580;
  }
}

.card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--accent-soft);

  &::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 34%;
    background: linear-gradient(transparent, rgba(17, 24, 39, 0.18));
    pointer-events: none;
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  }

}

.card-media-hawks img {
  object-position: center 46%;
}

.card-media-gift-pack,
.card-media-campaign {
  img {
    object-fit: cover;
    object-position: right center;
  }

  &::after {
    display: none;
  }
}

.case-card:hover :is(.card-media-gift-pack, .card-media-campaign) img {
  transform: none;
}

.card-media-product {
  background: linear-gradient(145deg, #062b55, #0874c7);

  img {
    object-fit: contain;
    object-position: center 24%;
  }
}

.card-media-retail img {
  object-position: 57% center;
}

.card-media-event {
  background: linear-gradient(145deg, var(--spinzo-orange-soft), var(--spinzo-orange-light));

  img {
    object-fit: cover;
    object-position: center 50%;
  }
}

.card-media-abstract {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  isolation: isolate;
  background:
    radial-gradient(circle at 80% 12%, rgba(235, 90, 90, 0.48), transparent 34%),
    linear-gradient(145deg, #111827, #242f43);

  &::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 210px;
    height: 210px;
    top: -72px;
    right: -46px;
    border: 38px solid rgba(126, 59, 184, 0.24);
    border-radius: 50%;
  }

  &::after {
    height: 42%;
    background: linear-gradient(transparent, rgba(17, 24, 39, 0.88));
  }
}

.program-line {
  position: absolute;
  left: 30px;
  height: 5px;
  border-radius: 999px;
  background: var(--spinzo-red);
  transform: rotate(-10deg);
  box-shadow: 0 0 0 8px rgba(235, 90, 90, 0.1);
}

.program-line-one {
  width: 48%;
  top: 40px;
}

.program-line-two {
  width: 31%;
  top: 82px;
  left: 82px;
}

.program-line-three {
  width: 39%;
  top: 124px;
  left: 52px;
}

.program-label {
  position: relative;
  z-index: 2;
  width: fit-content;
  padding: 6px 11px;
  border: 1px solid rgba(244, 184, 184, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 11px;
  font-weight: 500;
}

.card-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px;

  &::before {
    content: "";
    width: 32px;
    height: 4px;
    margin-bottom: 17px;
    border-radius: 999px;
    background: var(--accent);
  }

  @media (max-width: 640px) {
    padding: 24px;
  }
}

.team-name {
  margin: 0;
  color: var(--spinzo-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.5;
  text-transform: uppercase;
}

.case-year {
  margin: 9px 0 0;
  color: var(--spinzo-muted);
  font-size: 13px;
  font-weight: 500;
}

.card-body h3 {
  margin: 9px 0 28px;
  color: var(--spinzo-ink);
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.25;
}

.card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;

  svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 180ms ease;
  }
}

.site-footer {
  padding: 38px 0;
  border-top: 1px solid var(--spinzo-border);
  background: white;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: var(--spinzo-muted);
  font-size: 13px;

  p {
    margin: 0;
  }

  @media (max-width: 700px) {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}