/* =========================================================
   SZEGED KENDO CASE STUDY
   ========================================================= */

:root {
  --kendo-dark: #1b1b1b;
  --kendo-blue: #2d4990;
  --kendo-white: #ffffff;
  --kendo-soft: #f2f0eb;
  --kendo-grey: #7c7c7c;
}


.kendo-case {
  background: var(--kendo-white);
  color: var(--kendo-dark);
}


.kendo-header.scrolled {
  background: rgba(255,255,255,.92);
}


/* =========================================================
   SHARED LABELS
   ========================================================= */

.kendo-case .case-breadcrumb,
.kendo-case .case-section-label {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid rgba(27,27,27,.2);
  color: var(--kendo-grey);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}


.kendo-case .meta-label {
  display: block;
  margin-bottom: 8px;
  color: var(--kendo-grey);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}


/* =========================================================
   HERO
   ========================================================= */

.kendo-hero {
  min-height: 92svh;
  padding-top: clamp(125px, 16vh, 190px);
  padding-bottom: clamp(55px, 6vw, 90px);
}


.kendo-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
  gap: clamp(45px, 7vw, 110px);
  align-items: end;
  min-height: 68svh;
}


.kendo-title {
  margin: 0;
  font-size: clamp(70px, 10vw, 158px);
  line-height: .82;
  letter-spacing: -.075em;
  font-weight: 700;
}


.kendo-hero-side {
  padding-bottom: 12px;
}


.kendo-lead {
  max-width: 590px;
  margin: 0;
  font-size: clamp(24px, 2.6vw, 42px);
  line-height: 1.05;
  letter-spacing: -.035em;
}


.kendo-meta {
  display: grid;
  gap: 22px;
  margin-top: clamp(55px, 7vw, 90px);
  padding-top: 14px;
  border-top: 1px solid rgba(27,27,27,.18);
}


.kendo-meta p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.kendo-section {
  padding-top: clamp(80px, 10vw, 150px);
  padding-bottom: clamp(38px, 4vw, 62px);
}


.kendo-section .case-section-label {
  margin-bottom: clamp(42px, 5vw, 72px);
}


.kendo-section-dark {
  background: var(--kendo-dark);
  color: var(--kendo-white);
}


.kendo-section-dark .case-section-label {
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.55);
}


.kendo-section-blue {
  background: var(--kendo-blue);
  color: var(--kendo-white);
}


.kendo-section-blue .case-section-label {
  border-color: rgba(255,255,255,.26);
  color: rgba(255,255,255,.65);
}


.kendo-section-soft {
  background: var(--kendo-soft);
}


/* =========================================================
   PROBLEM
   ========================================================= */

.kendo-problem-grid {
  display: grid;
  grid-template-columns: 7fr 4fr 1fr;
  gap: 24px;
  align-items: end;
}


.kendo-big-copy {
  margin: 0;
  max-width: 980px;
  font-size: clamp(42px, 6vw, 92px);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 600;
}


.kendo-problem-copy {
  grid-column: 2 / 3;
  max-width: 560px;
}


.kendo-problem-copy p {
  margin: 0 0 18px;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
}


.before-figure {
  position: relative;
  margin: clamp(60px, 8vw, 110px) 0 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
}


.before-figure img {
  display: block;
  width: 100%;
  height: auto;
}


.before-label {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  padding: 8px 11px;
  background: var(--kendo-white);
  color: var(--kendo-dark);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}


/* =========================================================
   BEFORE / AFTER
   ========================================================= */

.before-after-copy {
  display: grid;
  grid-template-columns: 7fr 4fr 1fr;
  gap: 24px;
  margin-bottom: clamp(50px, 7vw, 95px);
}


.before-after-copy h2,
.visual-system-copy h2,
.digital-intro h2,
.campaign-intro h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 76px);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 600;
}


.before-after-copy p,
.visual-system-copy p,
.digital-intro p,
.campaign-intro p {
  grid-column: 2 / 3;
  align-self: end;
  max-width: 590px;
  margin: 0;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
}


.before-after-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}


.compare-card {
  margin: 0;
  border: 1px solid rgba(27,27,27,.15);
  overflow: hidden;
}


.compare-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}


.compare-before .compare-head {
  background: var(--kendo-dark);
  color: var(--kendo-white);
}


.compare-after .compare-head {
  background: var(--kendo-blue);
  color: var(--kendo-white);
}


.compare-card img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   INFORMATION ARCHITECTURE
   ========================================================= */

.ia-intro {
  display: grid;
  grid-template-columns: 7fr 4fr 1fr;
  gap: 24px;
  align-items: end;
}


.ia-copy {
  grid-column: 2 / 3;
  margin: 0;
  max-width: 590px;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
}


.ia-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: clamp(65px, 8vw, 110px);
  border-top: 1px solid rgba(255,255,255,.3);
  border-bottom: 1px solid rgba(255,255,255,.3);
}


.ia-card {
  min-height: 310px;
  padding: 18px;
  border-right: 1px solid rgba(255,255,255,.26);
  display: flex;
  flex-direction: column;
}


.ia-card:last-child {
  border-right: 0;
}


.ia-card > span {
  margin-bottom: auto;
  color: rgba(255,255,255,.58);
  font-size: 11px;
}


.ia-card strong {
  font-size: clamp(20px, 2vw, 31px);
  line-height: 1;
  letter-spacing: -.035em;
}


.ia-card p {
  margin: 18px 0 0;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  line-height: 1.5;
}


/* =========================================================
   VISUAL SYSTEM
   ========================================================= */

.visual-system-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(45px, 7vw, 100px);
  align-items: end;
}


.visual-system-copy p {
  margin-top: 24px;
}


.kendo-palette {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}


.kendo-palette > div {
  display: grid;
  gap: 8px;
}


.kendo-swatch {
  display: block;
  aspect-ratio: 1;
}


.kendo-swatch-white {
  border: 1px solid rgba(27,27,27,.16);
}


.kendo-palette small {
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--kendo-grey);
}


.system-principles {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-top: clamp(70px, 9vw, 120px);
}


.system-principles > div {
  padding-top: 13px;
  border-top: 1px solid rgba(27,27,27,.2);
}


.system-principles strong {
  display: block;
  margin-top: 30px;
  font-size: clamp(23px, 2.4vw, 38px);
  line-height: 1;
  letter-spacing: -.035em;
}


/* =========================================================
   DIGITAL
   ========================================================= */

.digital-intro,
.campaign-intro {
  display: grid;
  grid-template-columns: 7fr 4fr 1fr;
  gap: 24px;
  margin-bottom: clamp(50px, 7vw, 90px);
}


.kendo-browser {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(27,27,27,.16);
  background: var(--kendo-white);
}


.kendo-browser .browser-bar {
  height: 46px;
  padding: 0 15px;
  display: flex;
  gap: 7px;
  align-items: center;
  border-bottom: 1px solid rgba(27,27,27,.12);
}


.kendo-browser .browser-bar > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kendo-grey);
  opacity: .5;
}


.kendo-browser .browser-bar p {
  margin: 0 auto;
  transform: translateX(-18px);
  color: var(--kendo-grey);
  font-size: 10px;
}


.kendo-browser img {
  display: block;
  width: 100%;
  height: auto;
}


.kendo-web-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--gutter);
  margin-top: var(--gutter);
}


.kendo-web-shot {
  margin: 0;
}


.kendo-web-shot img {
  display: block;
  width: 100%;
  height: auto;
  background: #e9e9e9;
  object-fit: contain;
}


.kendo-web-shot figcaption,
.poster-feature figcaption {
  margin-top: 9px;
  color: var(--kendo-grey);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}


.kendo-device-grid {
  display: grid;
  grid-template-columns: minmax(0,3fr) minmax(220px,1fr);
  gap: clamp(30px,5vw,70px);
  align-items: center;
  margin-top: clamp(45px,6vw,85px);
}


.kendo-phone {
  padding: 8px;
  background: var(--kendo-dark);
  border-radius: 30px;
}


.kendo-phone-inner {
  overflow: hidden;
  border-radius: 23px;
  background: var(--kendo-white);
}


.kendo-phone img {
  display: block;
  width: 100%;
  height: auto;
}


.kendo-case .case-live-link {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}


.kendo-case .case-live-link a {
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: 13px;
}


/* =========================================================
   CAMPAIGN / PRINT
   ========================================================= */

.campaign-grid {
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr);
  gap: clamp(24px,4vw,60px);
  align-items: start;
}


.poster-feature {
  margin: 0;
}


.poster-feature img {
  display: block;
  width: 100%;
  height: auto;
}


.social-stack {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}


.social-card {
  margin: 0;
  overflow: hidden;
  background: #ededed;
}


.social-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
}


/* =========================================================
   FINAL SYSTEM
   ========================================================= */

.kendo-system {
  padding-top: clamp(95px,12vw,180px);
  padding-bottom: clamp(80px,10vw,145px);
  background: var(--kendo-dark);
  color: var(--kendo-white);
}


.kendo-system .case-section-label {
  margin-bottom: clamp(50px,7vw,95px);
  border-color: rgba(255,255,255,.24);
  color: rgba(255,255,255,.55);
}


.kendo-system-statement {
  max-width: 1250px;
  margin: 0;
  font-size: clamp(42px,6.3vw,98px);
  line-height: .92;
  letter-spacing: -.06em;
  font-weight: 600;
}


.kendo-system-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(60px,8vw,110px);
}


.kendo-system-tags span {
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  font-size: 11px;
}


/* =========================================================
   NEXT
   ========================================================= */

.kendo-case .case-next {
  min-height: 48svh;
  padding-top: clamp(75px,9vw,135px);
  padding-bottom: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 40px;
}


.kendo-case .back-work,
.kendo-case .next-live {
  display: flex;
  gap: 20px;
  align-items: center;
}


.kendo-case .back-work > span {
  font-size: 32px;
}


.kendo-case .back-work strong,
.kendo-case .next-live strong {
  display: block;
  font-size: clamp(25px,3vw,44px);
  letter-spacing: -.04em;
  font-weight: 500;
}


.kendo-case .next-live {
  justify-self: end;
  text-align: right;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .kendo-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }


  .kendo-title {
    font-size: clamp(78px,15vw,135px);
  }


  .kendo-hero-side {
    max-width: 720px;
  }


  .kendo-problem-grid,
  .before-after-copy,
  .ia-intro,
  .digital-intro,
  .campaign-intro {
    grid-template-columns: 1fr;
  }


  .kendo-problem-copy,
  .before-after-copy p,
  .ia-copy,
  .digital-intro p,
  .campaign-intro p {
    grid-column: auto;
  }


  .before-after-grid,
  .visual-system-grid,
  .campaign-grid {
    grid-template-columns: 1fr;
  }


  .ia-grid {
    grid-template-columns: repeat(2,1fr);
  }


  .ia-card {
    min-height: 240px;
    border-bottom: 1px solid rgba(255,255,255,.26);
  }


  .kendo-device-grid {
    grid-template-columns: minmax(0,2fr) minmax(180px,1fr);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .kendo-hero {
    min-height: auto;
    padding-top: 115px;
  }


  .kendo-hero-grid {
    gap: 55px;
  }


  .kendo-title {
    font-size: 18vw;
  }


  .kendo-section {
    padding-top: 78px;
    padding-bottom: 28px;
  }


  .kendo-section .case-section-label {
    margin-bottom: 40px;
  }


  .ia-grid {
    grid-template-columns: 1fr;
  }


  .ia-card {
    min-height: 190px;
    border-right: 0;
  }


  .system-principles {
    grid-template-columns: 1fr;
  }


  .kendo-palette {
    grid-template-columns: repeat(3,1fr);
  }


  .kendo-web-grid {
    grid-template-columns: 1fr;
  }


  .kendo-device-grid {
    grid-template-columns: 1fr;
  }


  .kendo-phone {
    width: min(260px,75%);
    margin: 15px auto 0;
  }


  .social-stack {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }


  .kendo-case .case-next {
    grid-template-columns: 1fr;
    min-height: 42svh;
  }


  .kendo-case .next-live {
    justify-self: start;
    text-align: left;
  }

}