/* ========================================
   FONTS
   ======================================== */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Overused Grotesk';
  src: url('../fonts/OverusedGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Overused Grotesk';
  src: url('../fonts/OverusedGrotesk-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Overused Grotesk';
  src: url('../fonts/OverusedGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto Mono';
  src: url('../fonts/RobotoMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Wasted Year';
  src: url('../fonts/Wasted Year Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --blue: blue;
  --orange: #f50;
  --white: #fff;
  --black: #000;
  --gap: 1rem;      /* 10px at 1920 */
  --margin: 6.5rem; /* 65px at 1920 */
}

::selection {
  background: #d0d0d0;
  color: var(--black);
}

html {
  /* Fluid scaling: 1rem = 10px at 1920px, min 5.33px at 1024px, max 13.33px at 2560px */
  font-size: clamp(5.33px, calc(100vw / 192), 13.33px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f3f3f3 url('../images/texture-bg.png') repeat;
  background-size: 512px 512px;
  overflow-x: clip;
}

body {
  max-width: 1920px;
  margin: 0 auto;
  color: var(--black);
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga" 1;
}

.page-wrap {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  z-index: 2;
  background: #f3f3f3 url('../images/texture-bg.png') repeat;
  background-size: 512px 512px;
}

/* Contact page: full-viewport page-wrap */
body.contact .page-wrap {
  min-height: 100vh;
}

/* Lenis smooth scroll */
html.lenis,
html.lenis body {
  height: auto;
}
html.lenis-smooth {
  scroll-behavior: auto !important;
}
html.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
html.lenis-stopped {
  overflow: clip;
}
html.lenis-smooth iframe {
  pointer-events: none;
}

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

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

/* Inline text links */
.body-text a,
.recipe-detail__blocks a,
.recipe-detail p a,
.about__intro-text a,
.info__content a,
.cc-body__text a,
.kirbytext a,
.page-footer__links a,
.social__links a,
p a {
  text-decoration: underline;
  transition: color 0.2s ease;
}
.body-text a:hover,
.recipe-detail__blocks a:hover,
.recipe-detail p a:hover,
.about__intro-text a:hover,
.info__content a:hover,
.cc-body__text a:hover,
.kirbytext a:hover,
.page-footer__links a:hover,
.social__links a:hover,
p a:hover {
  color: var(--blue);
}

/* ========================================
   TYPOGRAPHY UTILITIES
   ======================================== */
.font-geist { font-family: 'Geist', sans-serif; }
.font-overused { font-family: 'Overused Grotesk', sans-serif; }
.font-mono { font-family: 'Roboto Mono', monospace; }
.font-wasted { font-family: 'Wasted Year', sans-serif; }

.label {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: clamp(12px, 1.4rem, 14px);
  line-height: clamp(11px, 1.3rem, 13px);
  letter-spacing: -0.14px;
  text-transform: uppercase;
}

.body-text {
  font-family: 'Overused Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.6rem, 16px);
  line-height: clamp(18px, 2rem, 20px);
  font-style: normal;
}

.heading-large {
  font-family: 'Overused Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(42px, 7.6rem, 76px);
  line-height: clamp(38px, 8rem, 80px);
  letter-spacing: -0.38px;
  font-style: normal;
}

.heading-service {
  font-family: 'Overused Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(60px, 12rem, 120px);
  line-height: clamp(58px, 11rem, 110px);
  letter-spacing: -2.4px;
  font-style: normal;
}

.heading-medium {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 3rem, 30px);
  line-height: clamp(28px, 3.8rem, 38px);
  letter-spacing: -0.3px;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
/* Image utilities */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Visibility utilities */

/* Color utilities */
.text-white {
  color: var(--white);
}

.text-black {
  color: var(--black);
}


/* ========================================
   GRID SYSTEM
   ======================================== */
.grid-container {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--margin);
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}

/* ========================================
   COMPONENTS
   ======================================== */
.btn {
  display: flex;
  align-items: center;
  width: clamp(220px, 29rem, 290px);
  height: clamp(40px, 5rem, 50px);
  background: rgba(0, 0, 0, 0.05);
  padding: 0 2rem;
  position: relative;
  overflow: hidden;
  color: var(--black);
  text-decoration: none;
  transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: translateY(101%);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.btn:hover::before {
  transform: translateY(0);
}
.btn:hover {
  color: var(--white);
}
.btn .btn-label {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 28px;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  color: transparent;
  white-space: nowrap;
}
.btn:hover .btn-label {
  color: transparent;
}
.btn .btn-label::before,
.btn .btn-label::after {
  content: attr(data-label);
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.btn .btn-label::before {
  color: var(--black);
  top: 7px;
}
.btn .btn-label::after {
  color: var(--white);
  top: 37px;
}
.btn:hover .btn-label::before,
.btn:hover .btn-label::after {
  transform: translateY(-30px);
}
.btn .btn-arrow {
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  overflow: hidden;
  height: 28px;
  width: 24px;
  font-size: 0;
}
.btn .btn-arrow::before,
.btn .btn-arrow::after {
  content: attr(data-arrow);
  font-family: 'Wasted Year', sans-serif;
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -0.18px;
  position: absolute;
  left: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn .btn-arrow::before {
  color: var(--black);
  top: 4px;
}
.btn .btn-arrow::after {
  color: var(--white);
  top: 34px;
}
.btn:hover .btn-arrow::before,
.btn:hover .btn-arrow::after {
  transform: translateY(-30px);
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 5px 1px;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  letter-spacing: -0.14px;
  text-transform: uppercase;
}
.tag-black {
  background: var(--black);
  color: var(--white);
}
.tag-white {
  background: var(--white);
  color: var(--black);
}
.tag-light {
  background: rgba(0, 0, 0, 0.05);
  color: var(--black);
}

.link-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 5px 1px;
  background: rgba(0, 0, 0, 0.05);
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  transition: color 0.2s ease, background 0.2s ease;
}
.link-tag:hover {
  color: var(--blue);
}
.link-tag .arrow-icon {
  font-family: 'Wasted Year', sans-serif;
  font-size: 12px;
  letter-spacing: -0.12px;
}

.sample-img {
  background: var(--black);
  width: 100%;
  height: 100%;
  display: block;
}

.divider {
  width: 100%;
  height: 1px;
  background: var(--black);
}

/* ========================================
   TOP BAR
   ======================================== */
.topbar {
  position: relative;
  height: clamp(70px, 10.2rem, 102px);
  padding-top: clamp(20px, 3.2rem, 32px);
}
.topbar .grid-12 {
  align-items: start;
}
.topbar__varim {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.6rem, 16px);
  line-height: clamp(18px, 2rem, 20px);
  letter-spacing: -0.16px;
  grid-column: 1 / span 3;
}
.topbar__vypravim {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.6rem, 16px);
  line-height: clamp(18px, 2rem, 20px);
  letter-spacing: -0.16px;
  grid-column: 4 / span 1;
}
.topbar__logo {
  grid-column: 7 / span 1;
  justify-self: start;
  margin-top: -12px;
}
.topbar__logo img {
  width: clamp(50px, 7.3rem, 73px);
  height: auto;
}
.topbar__tagline {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.6rem, 16px);
  line-height: clamp(18px, 2rem, 20px);
  letter-spacing: -0.16px;
  grid-column: 8 / span 3;
  white-space: nowrap;
}
.topbar__menu {
  font-family: 'Wasted Year', sans-serif;
  font-size: clamp(16px, 2rem, 20px);
  letter-spacing: -0.2px;
  grid-column: 12;
  justify-self: end;
  margin-top: 2px;
}

@media (min-width: 1024px) {
  .topbar__menu {
    position: fixed;
    top: clamp(20px, 3.2rem, 32px);
    right: calc(50vw - min(50vw, 960px) + var(--margin));
    z-index: 900;
  }
}

/* ========================================
   HEADER
   ======================================== */
.header {
  position: relative;
  padding-top: clamp(100px, 13rem, 130px);
}
.header__text {
  grid-column: 8 / -1;
  width: clamp(400px, 71.6rem, 716px);
}
.header__hero {
  grid-column: 1 / -1;
  margin-top: clamp(40px, 8rem, 80px);
}
.header__hero--mobile {
  display: none;
}
.header__hero img {
  width: 100%;
  height: auto;
}

/* ========================================
   ZKUSENOSTI / EXPERIENCE
   ======================================== */
.experience {
  padding-top: clamp(80px, 15.5rem, 155px);
  position: relative;
}
.experience__text {
  grid-column: 1 / span 3;
  grid-row: 1;
}
.experience__text p {
  width: clamp(200px, 31.1rem, 311px);
}
.experience__label {
  grid-column: 1 / span 3;
  grid-row: 2;
  align-self: end;
}
.experience__images {
  grid-column: 5 / -1;
  grid-row: 1 / span 2;
  display: flex;
  gap: 10px;
  align-items: flex-end;
  min-width: 0;
  overflow: hidden;
}
.experience__image-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
  padding-bottom: 2.4rem;
}
.experience__image-col .label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.experience__image-col .img-wrapper {
  display: flex;
  justify-content: center;
}
.experience__img {
  max-width: 100%;
  max-height: clamp(300px, 50rem, 500px);
  width: auto;
  height: auto;
  display: block;
}

/* ========================================
   ABOUT
   ======================================== */
.about {
  padding-top: clamp(120px, 20rem, 200px);
  position: relative;
}
.about__intro {
  grid-column: 1 / -1;
  position: relative;
}
.about__intro-text {
  width: 100%;
  text-indent: clamp(150px, 29rem, 290px);
}
.about__intro-text .moment {
  position: relative;
  font-family: 'Wasted Year', sans-serif;
  font-size: clamp(50px, 7.2rem, 72px);
  font-weight: 400;
  letter-spacing: -0.72px;
  color: var(--blue);
  font-style: normal;
}
.about__intro-text .moment .annotation--hp-moment {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(25.5rem, 255px);
}
.about__photo {
  grid-column: 5 / span 4;
  margin-top: clamp(60px, 10rem, 100px);
  transform: translateY(var(--py, 0));
  will-change: transform;
}
.about__photo .img-wrapper {
  width: clamp(400px, 60rem, 600px);
  height: clamp(450px, 68rem, 680px);
  overflow: hidden;
  position: relative;
}
.about__photo-img {
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate3d(0, calc(-50% + var(--py, 0px)), 0);
  will-change: transform;
}
.about__my-myself {
  grid-column: 1 / -1;
  margin-top: clamp(-40px, -10rem, -100px);
  font-family: 'Wasted Year', sans-serif;
  font-size: min(24rem, 240px);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -2.4px;
  font-style: normal;
  text-align: center;
  position: relative;
  z-index: 2;
  isolation: isolate;
}
.about__details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  margin-top: clamp(60px, 10rem, 100px);
}
.about__detail-1 {
  grid-column: 4 / span 3;
  margin-top: clamp(60px, 10rem, 100px);
}
.about__detail-1 .detail-title {
  margin-bottom: 20px;
}
.about__detail-1 .detail-body {
  width: clamp(280px, 42.6rem, 426px);
}
.about__detail-2 {
  grid-column: 8 / span 2;
  margin-top: clamp(60px, 10rem, 100px);
  position: relative;
}
.about__detail-2 .detail-title {
  margin-bottom: 20px;
}

/* Annotations */
.annotation {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  height: auto;
}

.annotation--hp-1 {
  left: min(111rem, 1110px);
  top: min(152rem, 1520px);
  width: min(65.4rem, 654px);
}

.annotation--hp-2 {
  left: min(126rem, 1260px);
  top: min(10rem, 100px);
  width: min(25rem, 250px);
}

.annotation--hp-3 {
  left: min(41rem, 410px);
  top: min(14rem, 140px);
  width: min(30rem, 300px);
}

.annotation--hp-4 {
  left: min(99rem, 990px);
  top: min(118rem, 1180px);
  width: min(76rem, 760px);
}

.annotation--hp-5 {
  left: min(42rem, 420px);
  top: min(42rem, 420px);
  width: min(34rem, 340px);
}

.annotation--hp-6 {
  left: min(22.5rem, 225px);
  top: min(55rem, 550px);
  width: min(13rem, 130px);
}

.annotation--hp-7 {
  left: min(110rem, 1100px);
  top: min(35.5rem, 355px);
  width: min(6.5rem, 65px);
}

.annotation--hp-8 {
  left: min(128rem, 1280px);
  top: min(50rem, 500px);
  width: min(20rem, 200px);
}

.annotation--hp-9 {
  left: min(18.4rem, 184px);
  top: min(115rem, 1150px);
  width: min(20rem, 200px);
}

.annotation--hp-10 {
  left: min(75.8rem, 758px);
  top: min(10rem, 100px);
  width: min(28rem, 280px);
}

.annotation--hp-11 {
  left: min(16.5rem, 165px);
  top: min(5rem, 50px);
  width: min(21rem, 210px);
}

.annotation--hp-12 {
  left: min(45rem, 450px);
  top: min(-5rem, -50px);
  width: min(21rem, 210px);
}

.annotation--hp-13 {
  left: min(90rem, 900px);
  top: min(10rem, 100px);
  width: min(37rem, 370px);
}

.annotation--hp-14 {
  left: min(134rem, 1340px);
  top: min(15rem, 150px);
  width: min(25rem, 250px);
}

.annotation--hp-15 {
  left: min(140rem, 1400px);
  top: min(20rem, 200px);
  width: min(40rem, 400px);
}

/* Mobile-only annotation */
.annotation--hp-mobil-1 {
  display: none;
}

.annotation--cc-1 {
  left: min(118rem, 1180px);
  top: min(26rem, 260px);
  width: min(26.6rem, 266px);
}

.annotation--cc-2 {
  left: min(138rem, 1380px);
  top: min(39rem, 390px);
  width: min(34.1rem, 341px);
}

.annotation--cc-3 {
  left: min(45rem, 450px);
  top: min(16rem, 160px);
  width: min(32.3rem, 323px);
}

.annotation--cc-4 {
  left: min(25.1rem, 251px);
  top: min(50.9rem, 509px);
  width: min(8.3rem, 83px);
}

.annotation--cc-5 {
  left: min(139.5rem, 1395px);
  top: min(52.1rem, 521px);
  width: min(18.8rem, 188px);
}

.annotation--cc-6 {
  left: min(12.8rem, 128px);
  top: min(104.7rem, 1047px);
  width: min(28.8rem, 288px);
}

.annotation--cc-7 {
  left: min(113rem, 1130px);
  top: min(31.5rem, 315px);
  width: min(5rem, 50px);
}

.annotation--kontakt-1 {
  left: min(76rem, 760px);
  top: min(17.3rem, 173px);
  width: min(31.7rem, 317px);
}

.annotation--kontakt-2 {
  left: min(105rem, 1050px);
  top: min(43.4rem, 434px);
  width: min(19.3rem, 193px);
}

/* ========================================
   RYBA / FISH
   ======================================== */
.fish {
  position: relative;
  padding-top: clamp(38px, 5rem, 50px);
  padding-bottom: clamp(45px, 6rem, 60px);
  margin-bottom: -120px;
}
.fish__image {
  width: 100%;
  text-align: center;
}
.fish__image--mobile {
  display: none;
}
.fish__image img {
  max-width: 1000px;
  max-height: 800px;
  width: 100%;
  height: auto;
  object-fit: contain;
  display: inline-block;
}
.fish__container {
  position: relative;
  width: 1790px;
  height: 762px;
}
.fish__title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 49px;
  text-align: center;
  z-index: 2;
}
.fish__title .label + .label {
  margin-top: 5px;
}
.fish__svg {
  display: block;
  width: 503px;
  height: 712px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
.fish__annotations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.fish__annotation {
  position: absolute;
}

/* ========================================
   SLUZBY / SERVICES
   ======================================== */
.services {
  padding-top: 0;
}
.services__label {
  text-align: center;
  margin-bottom: clamp(40px, 12rem, 120px);
}
.service {
  position: relative;
}
.service__divider {
  padding: 30px 0 20px;
  height: 2px;
  background: url('../images/lines/divider-Line.svg') no-repeat center / 100% 100%;
  box-sizing: content-box;
}
.service__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.service__category {
  text-align: right;
}
.service__left-text {
  grid-column: 1 / span 2;
  grid-row: 1;
}
.service__left-text p {
  width: clamp(180px, 28.4rem, 284px);
}
.service__title {
  grid-column: 5 / span 6;
  grid-row: 1;
}
.service__category-label {
  grid-column: 12;
  grid-row: 1;
  text-align: right;
}
.service__image {
  grid-column: 11 / span 2;
  grid-row: 2;
  margin-top: 20px;
}
.service__image .img-wrapper {
  width: clamp(150px, 29rem, 290px);
  height: clamp(175px, 34rem, 340px);
}
.service__details {
  grid-column: 5 / span 3;
  grid-row: 2;
  margin-top: clamp(60px, 18rem, 180px);
}
.service__bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}
.service--no-image .service__title {
  grid-column: 5 / span 6;
}
.service--no-image .service__left-labels {
  grid-column: 1 / span 1;
  grid-row: 1;
}
.service__more-info {
  grid-column: 5 / span 3;
  margin-top: clamp(30px, 5rem, 50px);
}

/* ========================================
   CTA BUTTON
   ======================================== */
.cta {
  padding-top: clamp(120px, 20rem, 200px);
  padding-bottom: clamp(120px, 20rem, 200px);
  position: relative;
}
.cta__small-btn {
  grid-column: 5 / span 2;
  margin-bottom: 50px;
}
.cta__big-btn {
  grid-column: 5 / span 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(400px, 59rem, 590px);
  height: clamp(55px, 7rem, 70px);
  background: var(--black);
  color: var(--white);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.cta__big-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: translateY(-100%);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.cta__big-btn:hover::before {
  transform: translateY(0);
}
.cta__big-btn-label {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 35px;
  font-family: 'Wasted Year', sans-serif;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.2px;
  font-style: normal;
  color: transparent;
  white-space: nowrap;
}
.cta__big-btn:hover .cta__big-btn-label {
  color: transparent;
}
.cta__big-btn-label::before,
.cta__big-btn-label::after {
  content: attr(data-label);
  font-family: 'Wasted Year', sans-serif;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.2px;
  font-style: normal;
  color: var(--white);
  position: absolute;
  left: 0;
  top: 7px;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.cta__big-btn-label::after {
  top: -33px;
}
.cta__big-btn:hover .cta__big-btn-label::before,
.cta__big-btn:hover .cta__big-btn-label::after {
  transform: translateY(40px);
}
.cta__big-btn-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  overflow: hidden;
  height: 32px;
  width: 30px;
  font-size: 0;
}
.cta__big-btn-arrow::before,
.cta__big-btn-arrow::after {
  content: attr(data-arrow);
  font-family: 'Wasted Year', sans-serif;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--white);
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  transition: top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.cta__big-btn-arrow::before {
  top: 6px;
  transform: rotate(90deg);
}
.cta__big-btn-arrow::after {
  top: -34px;
  transform: rotate(90deg);
}
.cta__big-btn:hover .cta__big-btn-arrow::before {
  top: 46px;
}
.cta__big-btn:hover .cta__big-btn-arrow::after {
  top: 6px;
}
.cta__annotations {
  position: relative;
  grid-column: 1 / -1;
  height: 80px;
}

/* ========================================
   INFO / PORTFOLIO
   ======================================== */
.info {
  padding-top: clamp(80px, 12rem, 120px);
  position: relative;
}
.info__hero-image {
  grid-column: 7 / -1;
  transform: translateY(var(--py, 0));
  will-change: transform;
}
.info__hero-image .img-wrapper {
  width: clamp(500px, 89rem, 890px);
  height: clamp(400px, 60rem, 600px);
  overflow: hidden;
  position: relative;
}
.info__hero-img {
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate3d(0, calc(-50% + var(--py, 0px)), 0);
  will-change: transform;
}
.info__row2 {
  grid-column: 1 / -1;
  margin-top: clamp(100px, 16rem, 160px);
}
.info__subtitle {
  grid-column: 4 / span 2;
}
.info__image-left {
  grid-column: 1 / span 3;
}
.info__image-left .img-wrapper {
  width: clamp(300px, 44rem, 440px);
  height: clamp(355px, 52rem, 520px);
}
.info__big-text {
  grid-column: 1 / -1;
  margin-top: 70px;
}
.info__image-center {
  grid-column: 6 / span 2;
  justify-self: center;
  margin-top: -6rem;
  transform: translateY(var(--py, 0));
  will-change: transform;
  position: relative;
  z-index: 0;
}
.info__image-center .img-wrapper {
  width: clamp(200px, 29rem, 290px);
  height: clamp(250px, 36rem, 360px);
}
.info__content {
  position: relative;
  width: 100%;
}
.info__content .info__image-left {
  float: left;
  width: clamp(300px, 44rem, 440px);
  height: clamp(355px, 52rem, 520px);
  background: #8a5151;
  overflow: hidden;
  margin-right: clamp(12px, 4rem, 40px);
  margin-bottom: 0;
}
.info__content .info__image-left img,
.info__content .info__image-left .sample-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.info__small-text {
  margin-bottom: 20px;
}
.info__heading {
  margin: 0;
  margin-top: clamp(278px, 43.5rem, 435px);
  position: relative;
  z-index: 1;
  max-width: 100%;
}
.info__content::after {
  content: '';
  display: table;
  clear: both;
}

/* ========================================
   HOW IT WORKS
   ======================================== */
.how-it-works {
  padding-top: clamp(10px, 3rem, 30px);
  padding-bottom: clamp(20px, 3rem, 30px);
  position: relative;
}
.how-it-works__inner {
  position: relative;
  height: clamp(210px, 30rem, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-it-works__bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.how-it-works__bg img {
  display: block;
  width: clamp(440px, 66.4rem, 664px);
  height: auto;
}
.how-it-works__mobile-svg {
  display: none;
}
.how-it-works__step {
  position: absolute;
  z-index: 2;
}
.how-it-works__step-1 {
  right: calc(50% + min(34.2rem, 342px));
  top: calc(50% - min(11.75rem, 117.5px));
  text-align: right;
}
.how-it-works__step-2 {
  left: 50%;
  transform: translateX(-50%);
  top: min(20rem, 200px);
  text-align: center;
}
.how-it-works__step-3 {
  left: calc(50% + min(34.2rem, 342px));
  bottom: calc(50% - min(11.75rem, 117.5px));
  text-align: left;
}

/* ========================================
   NOVINKY / NEWS
   ======================================== */
.news {
  padding-top: clamp(80px, 20rem, 200px);
  position: relative;
}
.news__header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
  margin-bottom: 46px;
}
.news__header-left-label {
  grid-column: 1 / span 3;
}
.news__header-right-label {
  grid-column: 7 / span 3;
}
.news__header-archive {
  grid-column: 12;
  justify-self: end;
}
.news__divider {
  margin-bottom: 60px;
  height: 2px;
  background: url('../images/lines/divider-Line.svg') no-repeat center / 100% 100%;
}
.news__content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
}
.news__newsletter {
  grid-column: 1 / span 5;
}
.news__newsletter-text {
  margin-bottom: clamp(80px, 16rem, 160px);
}
.news__newsletter-form {
  width: 100%;
  max-width: clamp(300px, 44rem, 440px);
}
.news__newsletter-form .news__subscribe {
  display: block;
  margin-left: auto;
  margin-top: 30px;
}
.news__email-wrapper {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 22px;
  width: 100%;
}
.news__email-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: url('../images/lines/line-newsletter-form.svg') no-repeat left center;
  background-size: 100% 2px;
  display: block;
  image-rendering: crisp-edges;
}
.news__email-input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--black);
  padding: 0;
  margin: 0;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  box-sizing: border-box;
}
.news__email-input::placeholder {
  color: var(--black);
  opacity: 1;
}
.news__subscribe {
  font-family: 'Wasted Year', sans-serif;
  font-size: 30px;
  letter-spacing: -0.3px;
  font-style: normal;
  background: transparent;
  border: none;
  color: var(--black);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}
.news__subscribe:hover:not(:disabled) {
  color: var(--blue);
}
.news__thank-you {
  font-family: 'Wasted Year', sans-serif;
  font-size: 32px;
  letter-spacing: -0.32px;
  text-align: center;
  color: var(--black);
  padding: 100px 0;
  font-style: normal;
}
.news__article {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: clamp(380px, 58rem, 580px);
}
.news__article-1 {
  grid-column: 7 / span 3;
}
.news__article-2 {
  grid-column: 10 / span 3;
}
.news__article-title {
  text-decoration: underline;
  width: clamp(280px, 40.6rem, 406px);
  transition: color 0.3s ease;
}
.news__article .img-wrapper {
  width: 100%;
  height: clamp(240px, 36rem, 360px);
  margin-top: auto;
  overflow: hidden;
}
.news__article .img-wrapper img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.news__article:hover .news__article-title {
  color: var(--blue);
}
.news__article:hover .img-wrapper img {
  transform: scale(1.05);
}

/* ========================================
   REVIEWS
   ======================================== */
.reviews {
  padding-top: clamp(100px, 18rem, 180px);
  position: relative;
}
.reviews__inner {
  position: relative;
  height: 132rem;
  max-height: 1320px;
}
.reviews__heading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: clamp(450px, 73rem, 730px);
  text-align: center;
  white-space: nowrap;
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: min(29rem, 290px);
  position: absolute;
}
.review-card__image .img-wrapper {
  max-width: min(29rem, 290px);
  max-height: min(34rem, 340px);
}
.review-card__img {
  max-width: min(29rem, 290px);
  max-height: min(34rem, 340px);
  width: auto;
  height: auto;
  display: block;
}
.review-card__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Card positions from Figma - relative to section start */
.review-card--1 { left: 0; top: min(10rem, 100px); transform: translateY(var(--py, 0)); will-change: transform; }
.review-card--2 { left: 50%; transform: translateX(-50%) translateY(var(--py, 0)); top: 0; will-change: transform; }
.review-card--3 { right: 0; top: min(10rem, 100px); transform: translateY(var(--py, 0)); will-change: transform; }
.review-card--4 { left: 15%; top: min(66.5rem, 665px); transform: translateY(var(--py, 0)); will-change: transform; }
.review-card--5 { right: 15%; top: min(66.5rem, 665px); transform: translateY(var(--py, 0)); will-change: transform; }

/* ========================================
   LINKS / SOCIAL
   ======================================== */
.social {
  padding-top: clamp(60px, 18rem, 180px);
  padding-bottom: 30px;
  position: relative;
}
.social__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  align-items: start;
}
.social__yumgle {
  grid-column: 1 / span 4;
  width: clamp(400px, 59.2rem, 592px);
  background: var(--orange);
  height: clamp(480px, 66rem, 660px);
  overflow: hidden;
  position: relative;
  padding: 1.7rem 1.9rem 2rem;
  display: flex;
  flex-direction: column;
}
.social__yumgle-texture {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: plus-lighter;
  pointer-events: none;
}
.social__yumgle-texture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.social__yumgle-text {
  width: 100%;
  position: relative;
  z-index: 1;
}
.social__yumgle-image {
  width: clamp(200px, 29rem, 290px);
  height: clamp(200px, 29rem, 290px);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.social__yumgle:hover .social__yumgle-image {
  transform: translate(-50%, -50%) rotate(-6deg) scale(1.05);
}
.social__yumgle-link .arrow-icon {
  font-size: inherit;
}
.social__yumgle-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 20px;
  padding: 0 5px 1px;
  background: var(--black);
  color: var(--orange);
  width: calc(100% - 2 * 1px);
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  position: relative;
  z-index: 1;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 13px;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  margin-top: auto;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.social__yumgle:hover .social__yumgle-link {
  height: 50px;
}
.social__links {
  grid-column: 7 / -1;
  position: relative;
}
.social__links-heading {
  width: clamp(400px, 89rem, 890px);
}
.social__links-heading a {
  text-decoration: underline;
  color: inherit;
}
.social__podcast {
  margin-top: clamp(80px, 26rem, 260px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 2.3rem, 23px) clamp(10px, 1.4rem, 14px);
  align-items: center;
}
.social__podcast-icon {
  height: clamp(35px, 6.7rem, 67px);
  flex-shrink: 0;
}
.social__podcast-icon img {
  height: 100%;
  width: auto;
  display: block;
}
.social__podcast-title {
  font-size: clamp(36px, 7.6rem, 76px);
  line-height: clamp(38px, 8rem, 80px);
}
.social__podcast-links {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ========================================
   NEWSLETTER (standalone section)
   ======================================== */
.newsletter--mobile {
  display: none;
}
.newsletter {
  padding-top: 80px;
}
.newsletter__inner {
  max-width: 515px;
}
.newsletter__title {
  margin-bottom: 40px;
}
.newsletter__form {
  width: 100%;
}
.newsletter__form .newsletter__subscribe {
  display: block;
  margin-left: auto;
  margin-top: 30px;
}
.newsletter__email-wrapper {
  position: relative;
  margin-bottom: 30px;
  padding-bottom: 22px;
  width: 100%;
}
.newsletter__email-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: url('../images/lines/line-newsletter-form.svg') no-repeat left center;
  background-size: 100% 2px;
  display: block;
  image-rendering: crisp-edges;
}
.newsletter__email-input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  color: var(--black);
  padding: 0;
  margin: 0;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  box-sizing: border-box;
}
.newsletter__email-input::placeholder {
  color: var(--black);
  opacity: 1;
}
.newsletter__subscribe {
  font-family: 'Wasted Year', sans-serif;
  font-size: 30px;
  letter-spacing: -0.3px;
  font-style: normal;
  background: transparent;
  border: none;
  color: var(--black);
  cursor: pointer;
  padding: 0;
}
.newsletter__thank-you {
  font-family: 'Wasted Year', sans-serif;
  font-size: 32px;
  letter-spacing: -0.32px;
  text-align: center;
  color: var(--black);
  padding: 100px 0;
  font-style: normal;
}
.newsletter__error {
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.14px;
  color: var(--orange);
  margin-top: 15px;
}

/* ========================================
   IMAGE COLLAGE (mobile only)
   ======================================== */
.collage {
  display: none;
}

/* ========================================
   FORMULAR / CONTACT FORM
   ======================================== */
.form-section {
  background: var(--black);
  color: var(--white);
  padding: 0;
  position: relative;
  overflow: hidden;
  max-height: 1200px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

@media (min-width: 1024px) {
  body.peek-active .form-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1;
  }
}
.form-section__texture {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  mix-blend-mode: lighten;
  pointer-events: none;
}
.form-section__texture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.form-section__inner {
  position: relative;
  z-index: 1;
  padding: clamp(60px, 12rem, 120px) clamp(60px, 36.5rem, 365px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1920px;
  margin: 0 auto;
  box-sizing: border-box;
}
.form-section__title {
  font-family: 'Wasted Year', sans-serif;
  font-size: clamp(56px, 7.6rem, 76px);
  letter-spacing: -0.76px;
  text-align: center;
  margin-bottom: clamp(50px, 8.2rem, 82px);
  font-style: normal;
}
.form-section__form {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
}
.form-section__checkboxes {
  display: flex;
  gap: 50px;
  align-items: center;
}
.form-section__checkbox input {
  display: none;
}
.form-section__checkbox {
  display: flex;
  gap: 16px;
  align-items: center;
  cursor: pointer;
  transition: color 0.2s ease;
}
.form-section__checkbox:hover {
  color: var(--blue);
}
.form-section__checkbox-box {
  width: 29px;
  height: 29px;
  background: url('../images/lines/box.svg') no-repeat center / contain;
  flex-shrink: 0;
  position: relative;
}
.form-section__checkbox input:checked + .form-section__checkbox-box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 51px;
  background: url('../images/lines/cros.svg') no-repeat center / contain;
}
.form-section__inputs {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.form-section__input-row {
  display: flex;
  gap: 40px;
  width: 100%;
}
.form-section__input-group {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  gap: 20px;
  padding-bottom: 22px;
}
.form-section__input {
  width: 100%;
  flex: 1;
  background: transparent;
  border: none;
  color: var(--white);
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  padding: 0;
  outline: none;
  min-width: 0;
}
.form-section__input::placeholder {
  color: var(--white);
  opacity: 1;
}
.form-section__input-group::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--white);
  -webkit-mask: url('../images/lines/line-form.svg') no-repeat left center;
  mask: url('../images/lines/line-form.svg') no-repeat left center;
  -webkit-mask-size: 100% 2px;
  mask-size: 100% 2px;
  display: block;
  transition: background-color 0.2s ease;
}
.form-section__input-group:focus-within::after {
  background-color: var(--blue);
}
.form-section__message {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  padding-bottom: 42px;
}
.form-section__textarea {
  width: 100%;
  flex: 1;
  min-height: 60px;
  background: transparent;
  border: none;
  color: var(--white);
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  padding: 0;
  outline: none;
  resize: vertical;
  min-width: 0;
}
.form-section__textarea::placeholder {
  color: var(--white);
  opacity: 1;
}
.form-section__message::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--white);
  -webkit-mask: url('../images/lines/line-form-long.svg') no-repeat left center;
  mask: url('../images/lines/line-form-long.svg') no-repeat left center;
  -webkit-mask-size: 100% 2px;
  mask-size: 100% 2px;
  display: block;
  transition: background-color 0.2s ease;
}
.form-section__message:focus-within::after {
  background-color: var(--blue);
}
.form-section__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 60px;
}
.form-section__consent {
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 12px;
  line-height: 13px;
  letter-spacing: -0.12px;
  text-transform: uppercase;
  opacity: 0.4;
}
.form-section__submit {
  font-family: 'Wasted Year', sans-serif;
  font-size: 30px;
  letter-spacing: -0.3px;
  font-style: normal;
  background: transparent;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}
.form-section__submit:hover:not(:disabled) {
  color: var(--blue);
}
.form-section__thank-you {
  font-family: 'Wasted Year', sans-serif;
  font-size: 32px;
  letter-spacing: -0.32px;
  text-align: center;
  color: var(--white);
  padding: 100px 0;
  font-style: normal;
}
.form-section__honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.form-section__error {
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: -0.14px;
  color: #f50;
  text-align: center;
  margin-top: 20px;
}
.form-section__submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========================================
   PAGE FOOTER
   ======================================== */
.page-footer {
  color: var(--white);
  height: 63px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
.page-footer__inner {
  display: flex;
  align-items: center;
  width: 100%;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  letter-spacing: -0.14px;
  text-transform: uppercase;
}
.page-footer__copy {
  margin-right: auto;
}
.page-footer__links {
  display: flex;
  gap: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.page-footer__credit {
  margin-left: auto;
}
.page-footer__credit u {
  text-decoration: underline;
}

/* ========================================
   RESPONSIVE: FLUID SCALING 1024–1919px
   Zoom is set via JS in index.html
   ======================================== */

/* ========================================
   CONTACT PAGE
   ======================================== */
section.contact {
  position: relative;
  padding-top: clamp(100px, 14rem, 140px);
  padding-bottom: clamp(80px, 10rem, 100px);
}

.contact__grid {
  align-items: start;
}

.contact__item--left {
  grid-column: 1 / span 2;
  grid-row: 1;
}
.contact__item--left .img-wrapper {
  width: clamp(150px, 29rem, 290px);
  height: clamp(175px, 34rem, 340px);
}
.contact__label--left {
  grid-column: 3 / span 2;
  grid-row: 1;
}
.contact__label--right {
  grid-column: 7 / span 2;
  grid-row: 1;
  line-height: 18px;
}
.contact__item--right1 {
  grid-column: 9 / span 2;
  grid-row: 1;
}
.contact__item--right1 .img-wrapper {
  width: clamp(150px, 29rem, 290px);
  height: clamp(350px, 68.1rem, 681px);
}
.contact__item--right2 {
  grid-column: 11 / span 2;
  grid-row: 1;
}
.contact__item--right2 .img-wrapper {
  width: clamp(150px, 29rem, 290px);
  height: clamp(350px, 68.1rem, 681px);
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.contact__title {
  font-family: 'Wasted Year', sans-serif;
  font-size: clamp(80px, 12rem, 120px);
  line-height: clamp(75px, 11rem, 110px);
  letter-spacing: -1.2px;
  color: var(--black);
  position: absolute;
  left: clamp(280px, 43rem, 430px);
  top: 50%;
  transform: translateY(-50%) rotate(-10deg);
  pointer-events: none;
}

/* ========================================
   RECIPES LISTING
   ======================================== */
section.recipes {
  padding-top: clamp(120px, 18rem, 180px);
  padding-bottom: clamp(80px, 10rem, 100px);
}

.recipes__title {
  font-family: 'Wasted Year', sans-serif;
  font-size: clamp(80px, 12rem, 120px);
  line-height: clamp(75px, 11rem, 110px);
  letter-spacing: -1.2px;
  color: var(--black);
  text-align: center;
  transform: rotate(-10deg);
  margin-bottom: clamp(100px, 14rem, 140px);
}

.recipes__divider {
  margin-bottom: 20px;
  height: 2px;
  background: url('../images/lines/divider-Line.svg') no-repeat center / 100% 100%;
}

.recipes__grid {
  row-gap: 100px;
}

.recipe-card {
  grid-column: span 3;
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: var(--black);
}

.recipe-card__title {
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
  min-height: clamp(150px, 23rem, 230px);
  max-width: clamp(280px, 40.6rem, 406px);
}

.recipe-card__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recipe-card__date {
  text-transform: uppercase;
}

.recipe-card__image {
  width: 100%;
  height: clamp(260px, 36rem, 360px);
  overflow: hidden;
}
.recipe-card__image img {
  display: block;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.recipe-card:hover .recipe-card__title {
  color: var(--blue);
}
.recipe-card:hover .recipe-card__image img {
  transform: scale(1.05);
}

/* ========================================
   RECIPE DETAIL
   ======================================== */
.recipe-detail {
  padding-top: clamp(80px, 12rem, 120px);
  padding-bottom: 30px;
}

.recipe-detail__grid {
  align-items: start;
}

/* Left column: cols 1-6 */
.recipe-detail__content {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  gap: 120px;
}

.recipe-detail__title {
  font-family: 'Overused Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(50px, 7.6rem, 76px);
  line-height: clamp(52px, 8rem, 80px);
  letter-spacing: -0.38px;
  font-style: normal;
  color: var(--black);
}

.recipe-detail__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
}

.recipe-detail__perex {
  width: 100%;
}

/* Blocks content styling */
.recipe-detail__blocks {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.recipe-detail__blocks h1 {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.6rem, 36px);
  line-height: clamp(32px, 4.4rem, 44px);
  letter-spacing: -0.36px;
  margin-top: 1.6rem;
}

.recipe-detail__blocks h2 {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.6rem, 36px);
  line-height: clamp(32px, 4.4rem, 44px);
  letter-spacing: -0.36px;
  margin-top: 1.6rem;
}

.recipe-detail__blocks h3 {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(21px, 2.6rem, 26px);
  line-height: clamp(26px, 3.2rem, 32px);
  letter-spacing: -0.26px;
  margin-top: 1.4rem;
}

.recipe-detail__blocks h4 {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2.4rem, 24px);
  line-height: clamp(24px, 3rem, 30px);
  letter-spacing: -0.24px;
  margin-top: 1.2rem;
}

.recipe-detail__blocks p {
  font-family: 'Overused Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 2rem, 20px);
  line-height: clamp(22px, 2.8rem, 28px);
  font-style: normal;
}

.recipe-detail__blocks ul,
.recipe-detail__blocks ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-family: 'Overused Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 2rem, 20px);
  line-height: clamp(22px, 2.8rem, 28px);
  font-style: normal;
}

.recipe-detail__blocks ul li {
  padding-left: 16px;
  position: relative;
}

.recipe-detail__blocks ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--black);
  border-radius: 50%;
}

.recipe-detail__blocks ol li {
  padding-left: 30px;
  position: relative;
  counter-increment: recipe-step;
}

.recipe-detail__blocks ol {
  counter-reset: recipe-step;
}

.recipe-detail__blocks ol li::before {
  content: counter(recipe-step) ' /';
  position: absolute;
  left: 0;
}

.recipe-detail__blocks img {
  width: 100%;
  height: auto;
  display: block;
}

.recipe-detail__blocks figure {
  width: 100%;
}

.recipe-detail__blocks figure img {
  width: 100%;
  height: auto;
}

/* Yumgle CTA */
.recipe-detail__yumgle {
  background: var(--orange);
  padding: 17px 19px;
  position: relative;
  overflow: hidden;
  min-height: 185px;
}

.recipe-detail__yumgle-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: plus-lighter;
}
.recipe-detail__yumgle-texture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(180deg);
}

.recipe-detail__yumgle-text {
  position: relative;
  max-width: 751px;
}

.recipe-detail__yumgle-link {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--black);
  color: var(--orange);
  text-decoration: none;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  padding: 0 5px 1px;
  height: 20px;
  width: calc(100% - 38px);
  max-width: 850px;
}
.recipe-detail__yumgle-link .label {
  color: var(--orange);
}
.recipe-detail__yumgle-link span:last-child {
  font-family: 'Wasted Year', sans-serif;
  font-size: 14px;
  color: var(--orange);
}

/* Right sidebar: cols 9-12 */
.recipe-detail__sidebar {
  grid-column: 9 / span 4;
  grid-row: 1;
  position: sticky;
  top: 22.2rem;
}

.recipe-detail__cover {
  width: 100%;
  height: clamp(320px, 48.3rem, 483px);
  overflow: hidden;
}

.recipe-detail__date {
  margin-top: 14px;
  text-transform: uppercase;
}

/* ========================================
   COOKING CLASS
   ======================================== */
.cc-hero {
  padding-top: 80px;
  position: relative;
}
.cc-hero__inner {
  position: relative;
  height: clamp(550px, 74rem, 740px);
}
.cc-hero__title {
  position: absolute;
  left: clamp(60px, 36.5rem, 365px);
  top: 0;
  font-family: 'Wasted Year', sans-serif;
  font-size: clamp(80px, 12rem, 120px);
  line-height: clamp(75px, 11rem, 110px);
  letter-spacing: -1.2px;
  transform: rotate(-10deg);
  z-index: 2;
}
.cc-hero__image {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(var(--py, 0));
  will-change: transform;
  top: clamp(40px, 6rem, 60px);
  width: clamp(420px, 59rem, 590px);
  height: clamp(500px, 68rem, 680px);
  overflow: hidden;
}
.cc-hero__btn {
  position: absolute;
  width: clamp(220px, 29rem, 290px);
  height: clamp(55px, 7rem, 70px);
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  text-decoration: none;
  z-index: 2;
  overflow: hidden;
}
.cc-hero__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: translateY(100%);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.cc-hero__btn:hover::before {
  transform: translateY(0);
}
.cc-hero__btn-text {
  font-family: 'Wasted Year', sans-serif;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--white);
  position: relative;
  z-index: 1;
}
.cc-hero__btn-arrow {
  font-family: 'Wasted Year', sans-serif;
  font-size: 20px;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 20px;
  transform: rotate(90deg);
  position: relative;
  z-index: 1;
}
.cc-hero__btn--book {
  left: 10%;
  top: clamp(400px, 53rem, 530px);
}
.cc-hero__btn--do-it {
  left: auto;
  right: 10%;
  top: clamp(320px, 41rem, 410px);
}

/* Heading */
.cc-heading {
  padding-top: 100px;
}
.cc-heading__title {
  max-width: 1238px;
}

/* Body content */
.cc-body {
  padding-top: 100px;
  position: relative;
}
.cc-body__grid {
  position: relative;
}
.cc-body__image {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(200px, 29rem, 290px);
  height: clamp(220px, 32rem, 320px);
  overflow: hidden;
  transform: translateY(var(--py, 0));
  will-change: transform;
}
.cc-body__text {
  grid-column: 7 / -1;
}
.cc-body__text p {
  margin-bottom: 20px;
}
.cc-body__text p:last-child {
  margin-bottom: 0;
}

/* Included */
.cc-included {
  padding-top: clamp(120px, 20rem, 200px);
}
.cc-included__divider {
  grid-column: 1 / -1;
  height: 2px;
  background: url('../images/lines/divider-Line.svg') no-repeat center / 100% 100%;
  margin-bottom: 22px;
}
.cc-included__label {
  grid-column: 1 / span 3;
  align-self: start;
  padding-top: 12px;
}
.cc-included__items {
  grid-column: 7 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Closing */
.cc-closing {
  padding-top: clamp(100px, 16rem, 160px);
}
.cc-closing__text {
  max-width: 100%;
}

/* ========================================
   MENU OVERLAY
   ======================================== */
.topbar__menu {
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  visibility: hidden;
}
.menu-overlay.is-open {
  pointer-events: auto;
  visibility: visible;
}

.menu-overlay__backdrop {
  position: absolute;
  inset: 0;
}

.menu-overlay__panel {
  position: absolute;
  top: 0;
  right: max(0px, calc((100vw - 1920px) / 2));
  width: clamp(500px, 72.3rem, 723px);
  max-height: 100dvh;
  background: var(--black);
  clip-path: inset(0 0 100% 100%);
  transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.menu-overlay.is-open .menu-overlay__panel {
  clip-path: inset(0 0 0 0);
}

.menu-overlay__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: lighten;
}
.menu-overlay__texture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu-overlay__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 34px var(--margin) 0 68px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.menu-overlay__lang-link {
  font-family: 'Wasted Year', sans-serif;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--white);
  text-decoration: none;
  transition: opacity 0.2s;
}
.menu-overlay__lang-link:hover {
  opacity: 0.7;
}

.menu-overlay__close {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}
.menu-overlay__close-x {
  display: block;
}
.menu-overlay__close-label {
  font-family: 'Wasted Year', sans-serif;
  font-size: 20px;
  letter-spacing: -0.2px;
  color: var(--white);
}

.menu-overlay__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 80px 64px;
  position: relative;
  z-index: 1;
  gap: 0;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
}

.menu-overlay__link {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 3rem, 30px);
  line-height: clamp(28px, 3.8rem, 38px);
  letter-spacing: -0.3px;
  color: var(--white);
  text-decoration: none;
  text-align: right;
  width: 100%;
  padding: 18px 0;
  transition: opacity 0.2s;
}
.menu-overlay__link:hover {
  opacity: 0.7;
}
.menu-overlay__link.is-active {
  opacity: 0.5;
}

.menu-overlay__line {
  width: 100%;
  height: 5px;
  position: relative;
}
.menu-overlay__line img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  filter: none;
}

.menu-overlay__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 64px 60px 68px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-top: auto;
}

.menu-overlay__small-label {
  color: var(--white) !important;
  opacity: 0.5;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.menu-overlay__podcast-link {
  font-family: 'Overused Grotesk', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.menu-overlay__social {
  text-align: right;
}

.menu-overlay__social-links {
  font-family: 'Overused Grotesk', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--white);
  max-width: 395px;
}
.menu-overlay__social-links a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.menu-overlay__social-links a:hover {
  opacity: 0.7;
}

/* ========================================
   PARTNERI PAGE
   ======================================== */
section.partneri {
  position: relative;
  padding-top: clamp(80px, 18rem, 180px);
  padding-bottom: clamp(60px, 12rem, 120px);
}

.partneri__title {
  font-family: 'Wasted Year', sans-serif;
  font-weight: 400;
  font-size: clamp(60px, 12rem, 120px);
  line-height: clamp(58px, 11rem, 110px);
  letter-spacing: -1.2px;
  color: var(--black);
  text-align: center;
  transform: rotate(-10deg);
  margin-bottom: clamp(60px, 10rem, 100px);
}

.partneri__image-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 170px;
}

.partneri__image {
  width: 100%;
  height: auto;
  display: block;
}
.partneri__image--mobile {
  display: none;
}

.partneri__box {
  position: absolute;
  width: clamp(280px, 44rem, 440px);
  background: var(--white);
  border: 2px solid var(--black);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.partneri__box--peugeot {
  left: 8%;
  top: clamp(80px, 16.3rem, 163px);
}

.partneri__box--gaston {
  left: 16%;
  top: clamp(450px, 75.8rem, 758px);
}

.partneri__box--trznice {
  left: auto;
  right: 8%;
  top: clamp(80px, 16.3rem, 163px);
}

.partneri__box-text {
  font-family: 'Overused Grotesk', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  color: var(--black);
  margin: 0;
}

.partneri__box-ribbon {
  background: var(--black);
  color: var(--white);
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 13px;
  letter-spacing: -0.14px;
  text-transform: uppercase;
  padding: 4px 5px 3px;
  text-align: center;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
}

.partneri__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(30px, 5rem, 50px);
  width: clamp(500px, 74.9rem, 749px);
  margin: 0 auto;
}

.partneri__text {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 3rem, 30px);
  line-height: clamp(22px, 3.8rem, 38px);
  letter-spacing: -0.3px;
  color: var(--black);
  text-align: center;
  margin: 0;
}

.partneri__button {
  background: var(--black);
  color: var(--white);
  font-family: 'Wasted Year', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2rem, 20px);
  letter-spacing: -0.2px;
  padding: clamp(15px, 2.5rem, 25px) 0;
  width: clamp(400px, 59rem, 590px);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s;
}

.partneri__button:hover {
  opacity: 0.9;
}

/* ========================================
   RESPONSIVE: MOBILE-FIRST
   Base: 320px+ | Small: 640px+ | Tablet: 768px+ | Desktop: 1024px+ (JS zoom)
   ======================================== */


/* ========================================
   ANNOTATION VISIBILITY
   Hidden below 1024px (mobile breakpoint)
   ======================================== */
@media (max-width: 1023px) {
  .annotation {
    display: none;
  }
}

/* Mobile & Tablet (<1024px) - based on frontend/style.css */
@media (max-width: 1023px) {
  html {
    font-size: 16px; /* Reset fluid scaling for mobile */
  }

  :root {
    --gap: 10px;
    --margin: 15px;
  }

  body {
    width: 100%;
  }

  .grid-container {
    width: 100%;
    padding: 0 var(--margin);
  }

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

  /* Hide annotations on mobile */
  .annotation {
    display: none;
  }

  /* Mobile-only annotations */
  .annotation--hp-mobil-1 {
    display: block;
    position: static;
    width: 80%;
    max-width: 340px;
    margin: 30px 0 -20px;
  }

  /* Global: prevent overflow */
  .img-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }

  .sample-img {
    aspect-ratio: 3 / 4;
  }

  /* Typography scale */
  .heading-large {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -0.18px;
  }

  .heading-service {
    font-size: 56px;
    line-height: 56px;
    letter-spacing: -1px;
  }

  .heading-medium {
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.24px;
  }

  /* Hero — mobile logo */
  .header__hero--desktop {
    display: none;
  }
  .header__hero--mobile {
    display: block;
    grid-column: 1 / -1;
    text-align: center;
    margin: 40px 0; 
    order: -1;
  }
  .header__hero--mobile img {
    width: 78px;
    height: 88px;
    margin: 0 auto;
    display: block;
  }

  /* 1.2 Hero tagline — 20px/26px per Figma */
  .header__text {
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.15px;
  }

  /* MENU OVERLAY - full width on mobile */
  .menu-overlay__panel {
    width: 100%;
  }
  .menu-overlay__top {
    padding: 16px var(--margin) 0;
    min-height: 36px;
    align-items: center;
  }
  .menu-overlay__nav {
    padding: 40px var(--margin);
    align-items: flex-start;
  }
  .menu-overlay__link {
    font-size: 24px;
    line-height: 32px;
  }
  .menu-overlay__close-label {
    font-size: 20px;
  }
  .menu-overlay__bottom {
    padding: 0 var(--margin) 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .menu-overlay__social {
    text-align: left;
  }

  /* TOPBAR - fixed on mobile */
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 16px var(--margin);
    z-index: 900;
    transition: opacity 0.3s ease;
  }
  body.home {
    padding-top: 62px;
  }
  body:not(.home) {
    padding-top: 80px;
  }
  .topbar .grid-12 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
  }
  .topbar__varim {
    grid-column: 1;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    align-self: end;
  }
  .topbar__vypravim {
    grid-column: 1;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    align-self: start;
    margin-top: -2px;
  }
  .topbar__tagline {
    display: none;
  }
  .topbar__logo {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: block;
    justify-self: center;
    align-self: center;
    margin-top: 0;
  }
  .topbar__logo img {
    width: 52px;
    height: auto;
  }
  body.home .topbar__logo {
    display: none;
  }
  body.home .topbar {
    padding-top: 28px;
  }
  .topbar__menu {
    grid-column: 3;
    grid-row: 1 / span 2;
    font-size: 20px;
    line-height: 20px;
    justify-self: end;
    align-self: center;
  }

  /* HEADER */
  .header {
    padding-top: 0;
  }

  .header__text {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .header__hero--desktop img {
    width: 100%;
    height: auto;
  }

  /* EXPERIENCE */
  .experience {
    padding-top: 60px;
  }

  .experience__text {
    display: none;
  }

  .experience__label {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: center;
  }

  .experience__images {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    align-items: flex-end;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-left: calc(-1 * var(--margin));
    margin-right: calc(-1 * var(--margin));
    padding-left: var(--margin);
    padding-right: var(--margin);
  }

  .experience__images::-webkit-scrollbar {
    display: none;
  }

  .experience__image-col {
    flex: 0 0 200px;
    width: 200px !important;
  }

  .experience__image-col .img-wrapper {
    aspect-ratio: auto;
  }

  .experience__image-col .img-wrapper { height: auto !important; }

  .experience__image-col .label {
    position: static;
    margin-top: 8px;
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
  }

  /* ABOUT */
  .about {
    padding-top: 60px;
  }

  .about .grid-12 > * {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .about .heading-large {
    font-size: 30px;
    line-height: 34px;
    width: 100% !important;
    text-indent: 0;
    max-width: 100% !important;
  }

  .about .detail-body {
    width: 100% !important;
    max-width: 100% !important;
  }

  .about__photo {
    margin-top: 40px !important;
  }

  .about .img-wrapper {
    width: 100% !important;
    max-width: 273px !important;
    height: auto !important;
    aspect-ratio: 600 / 680;
    margin-left: auto;
    margin-right: auto;
  }

  .about .img-wrapper .sample-img {
    aspect-ratio: 600 / 680;
  }

  .about__my-myself {
    font-size: 50px;
    margin-top: -20px;
  }

  .about__detail-1,
  .about__detail-2 {
    margin-top: 40px !important;
  }

  .about .body-text {
    width: 100% !important;
    font-size: 14px;
    line-height: 20px;
  }

  .about .moment {
    font-size: 36px !important;
  }

  /* FISH */
  .fish {
    display: none;
  }

  /* SERVICES */
  .services {
    padding-top: 60px;
  }

  .services__label {
    margin-bottom: 0;
    padding-bottom: 40px;
    text-align: center;
    position: relative;
  }
  .services__label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--black);
  }
  .service__divider {
    background: var(--black);
    height: 1px;
    padding: 0;
    margin: 40px 0 0;
  }
  .services .btn {
    width: 100%;
    justify-content: space-between;
  }

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

  .service__grid > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .service__left-text {
    order: 3;
    text-align: left;
    margin-top: 30px;
    margin-bottom: 0px;
  }

  .service__left-text p {
    width: 100% !important;
  }

  .heading-service {
    font-size: 42px;
    line-height: 46px;
    letter-spacing: -0.2px;
    order: 1;
    text-align: center;
    padding-top: 40px;
  }

  .heading-service br {
    display: none;
  }

  .service__grid > .label {
    display: none;
  }

  .service__image {
    order: 2;
    margin-top: 20px !important;
  }

  .service__image .img-wrapper {
    width: 100% !important;
    max-width: 180px !important;
    height: 210px !important;
    margin: 0 auto;
  }

  .service__image .sample-img {
    aspect-ratio: 290 / 340;
  }

  .service__details {
    order: 4;
    margin-top: 25px !important;
  }

  /* CTA — skrýt na mobilu (integrováno do formuláře) */
  .cta {
    display: none;
  }

  /* INFO — na mobilu zobrazit jen heading text */
  .info {
    padding: 0 var(--margin);
  }
  .info .grid-12 > div:first-child,
  .info .grid-12 > div:last-child {
    display: none;
  }
  .info .grid-12 > div:nth-child(2) {
    margin-top: 0 !important;
  }
  .info__image-left,
  .info__small-text {
    display: none;
  }
  .info__heading {
    font-size: 30px;
    line-height: 34px;
    text-align: left;
    margin-top: 0;
  }

  /* IMAGE COLLAGE — mobile only */
  .collage {
    display: block;
    padding-top: 40px;
    margin-top: 60px;
    margin-bottom: 20px;
  }

  .collage__inner {
    position: relative;
    height: 340px;
  }

  .collage__img {
    position: absolute;
    z-index: 1;
  }
  .collage__img--1 {
    z-index: 2;
  }
  .collage__img--3 {
    z-index: 3;
  }

  .collage__img .img-wrapper {
    overflow: hidden;
  }

  .collage__img--1 .img-wrapper {
    width: 180px !important;
    height: 213px !important;
  }
  .collage__img--1 {
    left: 0;
    top: 0;
  }

  .collage__img--2 .img-wrapper {
    width: 270px !important;
    height: 182px !important;
  }
  .collage__img--2 {
    right: 0;
    top: 30px;
  }

  .collage__img--3 .img-wrapper {
    width: 130px !important;
    height: 161px !important;
  }
  .collage__img--3 {
    left: 20%;
    bottom: 0;
  }

  /* HOW IT WORKS */
  .how-it-works {
    padding-top: 80px;
  }

  .how-it-works__inner {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .how-it-works__bg {
    display: none;
  }

  .how-it-works__mobile-svg {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    width: 134px;
    height: auto;
    z-index: 0;
    pointer-events: none;
  }

  .how-it-works__step {
    position: relative;
    text-align: center !important;
    z-index: 1;
    padding: 0;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    transform: none;
  }

  .how-it-works__step .heading-medium {
    text-align: center !important;
    font-size: 30px;
    line-height: 34px;
    font-family: 'Overused Grotesk', sans-serif;
  }

  .how-it-works__step-1 {
    margin-bottom: 120px;
  }

  .how-it-works__step-2 {
    align-self: flex-start;
    margin-left: 18%;
    margin-bottom: 160px;
  }

  .how-it-works__step-3 {
  }

  /* NEWS */
  .news {
    padding-top: 80px;
  }

  .news__divider {
    display: none;
  }

  .news__header {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 24px;
  }

  .news__header-left-label {
    grid-column: 1;
    display: none;
  }

  .news__header-right-label {
    display: block;
    grid-column: 1;
  }

  .news__header-archive {
    grid-column: 2;
    justify-self: end;
  }

  .news__content {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 20px;
    margin-left: calc(-1 * var(--margin));
    margin-right: calc(-1 * var(--margin));
    padding-left: var(--margin);
    padding-right: var(--margin);
  }

  .news__content::-webkit-scrollbar {
    display: none;
  }

  .news__article {
    display: flex;
    flex: 0 0 240px;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 0;
    padding-bottom: 0;
    position: relative;
    min-height: auto;
  }

  .news__article::after {
    display: none;
  }

  .news__article .label {
    margin-bottom: 0;
  }

  .news__article-title {
    width: 100% !important;
    font-family: 'Overused Grotesk', sans-serif;
    font-size: 20px;
    line-height: 26px;
  }

  .news__article .img-wrapper {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 406 / 360;
    order: -1;
  }

  /* REVIEWS */
  .reviews {
    padding-top: 40px;
  }

  .reviews__inner {
    position: static;
    height: auto;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-left: calc(-1 * var(--margin));
    margin-right: calc(-1 * var(--margin));
    padding-left: var(--margin);
    padding-right: var(--margin);
  }

  .reviews__inner::-webkit-scrollbar {
    display: none;
  }

  .reviews__heading {
    position: static;
    transform: none;
    text-align: center;
    white-space: normal;
    margin-bottom: 30px;
    font-size: 30px;
    line-height: 34px;
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
  }

  .review-card {
    position: static;
    display: inline-block;
    vertical-align: top;
    width: 200px;
    white-space: normal;
    transform: none !important;
    margin-right: 7px;
  }

  .review-card:last-of-type {
    margin-right: 0;
  }

  .review-card__image .img-wrapper {
    width: 200px !important;
    max-width: 200px !important;
    height: auto !important;
  }

  .review-card__img {
    max-width: 100% !important;
    max-height: none !important;
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  .review-card__image {
    margin-bottom: 10px;
  }

  .review-card__info {
    gap: 10px;
  }

  /* SOCIAL */
  .social {
    padding-top: 60px;
  }

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

  .social__grid > * {
    grid-column: 1 / -1 !important;
  }

  .social__yumgle {
    width: 100%;
    height: 320px;
    padding: 16px;
  }

  .social__yumgle-text {
    width: 100%;
    font-size: 16px;
    line-height: 22px;
  }

  .social__yumgle-image {
    width: 120px !important;
    height: 120px !important;
    margin: 10px auto;
  }

  .social__yumgle-image .img-wrapper {
    width: 120px !important;
    height: 120px !important;
  }

  .social__yumgle-link {
    background: var(--black);
    color: var(--orange);
    width: 100%;
    height: 36px;
    font-size: 14px;
  }

  .social__links-heading {
    width: 100% !important;
    font-size: 30px;
    line-height: 38px;
    margin-top: 40px;
    text-align: center;
  }

  .social__links-heading > a {
    display: block;
  }

  .social__podcast {
    margin-top: 40px;
    padding-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    position: relative;
  }

  .social__podcast::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--black);
  }

  .social__podcast-icon {
    height: 40px;
  }

  .social__podcast-title {
    font-size: 30px !important;
    line-height: 40px !important;
    margin-bottom: 10px;
  }

  .social__podcast-label {
    display: none;
  }

  .social__podcast-links {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  /* NEWSLETTER */
  .news__newsletter {
    display: none;
  }

  .newsletter--mobile {
    display: block;
    padding-top: 100px;
    padding-bottom: 30px;
  }

  .newsletter__title {
    font-size: 30px;
    line-height: 38px;
    padding-bottom: 60px;
  }

  .newsletter__form .newsletter__subscribe {
    font-size: 20px;
    margin-left: 0;
  }

  .newsletter__label {
    margin-bottom: 20px;
  }

  .newsletter__inner {
    max-width: none;
  }

  .newsletter__email-wrapper::after {
    background: var(--black);
    background-size: 100% 2px;
  }

  /* FORM */
  .form-section {
    margin-top: 30px;
  }

  .form-section__inner {
    padding: 60px var(--margin) 0;
    min-height: auto;
  }

  .form-section__title {
    font-family: 'Wasted Year', serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.28px;
    text-transform: none;
    text-align: center;
    margin-bottom: 40px;
  }

  .form-section__form {
    max-width: 100%;
    gap: 20px;
    align-items: stretch;
  }

  .form-section__checkboxes {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 40px;
  }

  .form-section__inputs {
    gap: 40px;
  }

  .form-section__input-row {
    flex-direction: column;
    gap: 40px;
  }

  .form-section__input-group {
    padding-bottom: 10px;
  }

  .form-section__input-group::after {
    background: var(--white);
    height: 1px;
    left: 0;
    right: 0;
    -webkit-mask: none;
    mask: none;
  }

  .form-section__message {
    margin-top: 40px;
    padding-bottom: 30px;
  }

  .form-section__message::after {
    background: var(--white);
    height: 1px;
    left: 0;
    right: 0;
    -webkit-mask: none;
    mask: none;
  }

  .form-section__consent {
    font-size: 11px;
    max-width: 70%;
  }

  .form-section__submit {
    font-size: 20px;
  }

  .form-section__footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    padding-bottom: 40px;
  }

  /* FOOTER */
  .page-footer {
    height: auto;
    padding: 20px var(--margin);
  }

  .page-footer__inner {
    flex-wrap: wrap;
    gap: 27px;
    align-items: center;
    font-size: 11px;
  }

  .page-footer__copy {
    margin-right: 0;
  }

  .page-footer__links {
    position: static;
    transform: none;
    margin-left: auto;
  }

  .page-footer__credit {
    margin-left: 0;
    width: 100%;
    text-align: center;
    padding-bottom: 15px;
    order: -1;
  }

  /* RECIPES LISTING */
  section.recipes {
    padding-top: 60px;
  }
  .recipes__title {
    font-size: 48px;
    line-height: 46px;
    margin-bottom: 30px;
  }
  .recipes__grid {
    row-gap: 40px;
  }
  .recipe-card {
    grid-column: 1 / -1;
  }
  .recipe-card__title {
    font-size: 24px;
    line-height: 30px;
    min-height: auto;
    margin-bottom: 15px;
  }
  .recipe-card__image {
    height: 200px;
  }

  /* RECIPE DETAIL */
  .recipe-detail {
    padding-top: 60px;
    padding-bottom: 0;
  }
  .recipe-detail__grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .recipe-detail__content {
    grid-column: 1 / -1;
    gap: 40px;
  }
  .recipe-detail__title {
    font-size: 32px;
    line-height: 36px;
  }
  .recipe-detail__perex {
    font-size: 20px;
    line-height: 26px;
  }
  .recipe-detail__sidebar {
    grid-column: 1 / -1;
    position: static;
    order: -1;
  }
  .recipe-detail__cover {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .recipe-detail__yumgle {
    padding: 20px;
  }
  .recipe-detail__yumgle-text {
    font-size: 20px;
    line-height: 26px;
  }

  /* COOKING CLASS */
  .cc-hero {
    padding-top: 40px;
  }
  .cc-hero__inner {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .cc-hero__title {
    position: static;
    font-size: 48px;
    line-height: 46px;
    transform: rotate(-10deg);
    margin-left: 20px;
  }
  .cc-hero__image {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    aspect-ratio: 590 / 680;
  }
  .cc-hero__btn {
    position: static;
    width: 100%;
  }
  .cc-hero__btn--book,
  .cc-hero__btn--do-it {
    position: static;
  }

  /* Cooking Class - Heading */
  .cc-heading {
    padding-top: 40px;
  }
  .cc-heading__title {
    max-width: 100%;
  }

  /* Cooking Class - Body */
  .cc-body {
    padding-top: 40px;
  }
  .cc-body__grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .cc-body__image {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 290 / 320;
  }
  .cc-body__text {
    grid-column: 1 / -1;
    font-size: 20px;
    line-height: 26px;
  }

  /* Cooking Class - Included */
  .cc-included {
    padding-top: 60px;
  }
  .cc-included__grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .cc-included__divider {
    width: 100%;
  }
  .cc-included__label {
    grid-column: 1 / -1;
  }
  .cc-included__items {
    grid-column: 1 / -1;
    font-size: 20px;
    line-height: 26px;
  }

  /* Cooking Class - Closing */
  .cc-closing {
    padding-top: 60px;
  }
  .cc-closing__text {
    max-width: 100%;
    font-size: 20px;
    line-height: 26px;
  }

  /* CONTACT PAGE */
  section.contact {
    padding-top: 60px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
  }
  .contact__title {
    position: static;
    transform: none;
    font-size: 48px;
    line-height: 46px;
    text-align: center;
    margin-bottom: 30px;
    order: -1;
  }
  .contact__grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  /* Reorder: left label, left item, right label, right items */
  .contact__label--left { order: 1; }
  .contact__item--left { order: 2; }
  .contact__label--right { order: 3; margin-top: 20px; }
  .contact__item--right1 { order: 4; }
  .contact__item--right2 { order: 5; }

  .contact__item--left,
  .contact__item--right1,
  .contact__item--right2 {
    width: 100%;
  }
  .contact__item--left .img-wrapper,
  .contact__item--right1 .img-wrapper,
  .contact__item--right2 .img-wrapper {
    width: 100% !important;
    max-width: 290px !important;
    height: auto !important;
    aspect-ratio: 290 / 340;
  }
  .contact__info {
    margin-top: 15px;
  }

  /* PARTNERI PAGE - mobile layout */
  section.partneri {
    padding-top: 0;
    padding-bottom: 40px;
    padding-left: 0;
    padding-right: 0;
  }
  .partneri__image-wrapper {
    position: relative;
    margin-bottom: 20px;
    overflow-x: clip;
  }
  .partneri__image--desktop {
    display: none;
  }
  .partneri__image--mobile {
    display: block;
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: center top;
    margin-top: 40px;
    mix-blend-mode: multiply;
  }
  .partneri__title {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) rotate(-10deg);
    font-size: 40px;
    line-height: 40px;
    white-space: nowrap;
    z-index: 2;
    margin-bottom: 0;
  }
  .partneri__box {
    position: static;
    width: auto;
    margin-left: var(--margin);
    margin-right: var(--margin);
    transform: none;
  }
  .partneri__box--peugeot,
  .partneri__box--gaston,
  .partneri__box--trznice {
    left: auto;
    right: auto;
    top: auto;
  }
  .partneri__box-text {
    font-size: 14px;
    line-height: 20px;
  }
  .partneri__box-ribbon {
    font-size: 12px;
    padding: 6px 12px;
  }
  .partneri__cta {
    margin-top: 40px;
    padding-left: var(--margin);
    padding-right: var(--margin);
    align-items: stretch;
    width: 100%;
    gap: 30px;
  }
  .partneri__text {
    font-size: 16px;
    line-height: 22px;
    max-width: 100%;
    text-align: left;
  }
  .partneri__button.cta__big-btn {
    width: 100%;
  }
}

/* ========================================
   TABLET OVERRIDES (800px - 1023px)
   Applied on top of mobile <1024px styles
   ======================================== */
@media (min-width: 800px) and (max-width: 1023px) {
  :root {
    --margin: 30px;
  }

  /* HEADER — text left 70% */
  .header__text {
    width: 70% !important;
  }

  /* ABOUT — details 70% width */
  .about__detail-1,
  .about__detail-2 {
    max-width: 70%;
  }

  /* ABOUT — center photo + larger */
  .about .img-wrapper {
    max-width: 400px !important;
    margin-left: auto;
    margin-right: auto;
  }
  .about__my-myself {
    font-size: 80px;
  }

  /* EXPERIENCE — carousel with wider cards */
  .experience__image-col {
    flex: 0 0 260px;
    width: 260px !important;
  }

  /* SERVICES — image left, text+bullets right */
  .service__grid {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto auto;
    gap: 30px 30px;
    align-items: start;
  }
  .service__grid > * {
    grid-column: 1 / -1 !important;
  }
  .heading-service {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  .service__image {
    grid-column: 1 !important;
    grid-row: 2 / span 2 !important;
    margin-top: 0 !important;
  }
  .service__image .img-wrapper {
    max-width: 180px !important;
    height: 210px !important;
    margin: 0 !important;
  }
  .service__left-text {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-top: 0;
  }
  .service__details {
    grid-column: 2 !important;
    grid-row: 3 !important;
    margin-top: 0 !important;
  }
  .service:not(.service--no-image) .service__details .btn {
    position: relative;
    left: calc(-180px - 30px);
    width: calc(100% + 180px + 30px);
    margin-top: 15px;
  }

  /* IMAGE COLLAGE — proportionally larger */
  .collage__inner {
    height: 480px;
  }
  .collage__img--1 .img-wrapper {
    width: 260px !important;
    height: 307px !important;
  }
  .collage__img--2 .img-wrapper {
    width: 380px !important;
    height: 256px !important;
  }
  .collage__img--3 .img-wrapper {
    width: 190px !important;
    height: 235px !important;
  }

  /* NEWS — 2 columns, vertical cards */
  .news__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    overflow-x: visible;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .news__content > * {
    grid-column: auto !important;
  }
  .news__newsletter {
    grid-column: 1 / -1 !important;
  }
  .news__article {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    grid-template-columns: none;
    padding-bottom: 0;
    min-height: auto;
    gap: 20px;
  }
  .news__article:not(:last-child)::after {
    display: none;
  }
  .news__article .img-wrapper {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 406 / 360;
    grid-column: auto;
    grid-row: auto;
    order: -1;
  }
  .news__article-title {
    width: 100% !important;
  }

  /* REVIEWS — wider cards, horizontal scroll */
  .review-card {
    width: 260px;
    margin-right: 15px;
  }
  .review-card__image .img-wrapper {
    width: 260px !important;
    max-width: 260px !important;
    height: auto !important;
  }

  /* SOCIAL — yumgle full width, socials + fidel gastro side by side */
  .social__grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .social__yumgle {
    grid-column: 1 / -1 !important;
    height: auto;
    min-height: auto;
    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows: 1fr auto;
    gap: 0 20px;
    padding: 20px;
    width: fit-content;
    margin: 0 auto 30px;
  }
  .social__yumgle-image {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 160px !important;
    height: 160px !important;
    margin: 0;
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }
  .social__yumgle:hover .social__yumgle-image {
    transform: rotate(-6deg) scale(1.05);
  }
  .social__yumgle-image .img-wrapper {
    width: 160px !important;
    height: 160px !important;
  }
  .social__yumgle-text {
    grid-column: 2;
    grid-row: 1;
    font-size: 16px !important;
    line-height: 22px !important;
    align-self: center;
    max-width: 280px;
  }
  .social__yumgle-link {
    grid-column: 2;
    grid-row: 2;
    margin-top: 10px;
    justify-self: start;
  }
  .social__links {
    grid-column: 1 / -1 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
    padding: 0 120px;
  }
  .social__links-heading {
    font-size: 24px !important;
    line-height: 32px !important;
    margin-top: 0 !important;
  }
  .social__links-heading > a {
    display: block !important;
  }
  .social__podcast {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .social__podcast::before {
    display: none;
  }

  /* FORM — horizontal checkboxes + multi-column inputs */
  .form-section__checkboxes {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px 30px;
  }
  .form-section__input-row {
    flex-direction: row;
    gap: 30px;
  }

  /* RECIPES LISTING — 2 columns */
  .recipes__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 60px;
    column-gap: 20px;
  }
  .recipe-card {
    grid-column: auto;
  }

  /* COOKING CLASS — narrower hero image */
  .cc-hero__image {
    width: 70%;
    margin: 0 auto;
  }
  .cc-hero__btn {
    width: auto !important;
    min-width: 280px;
    margin: 0 auto;
  }

  /* CONTACT — right cards side by side */
  .contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .contact__label--left,
  .contact__item--left,
  .contact__label--right {
    grid-column: 1 / -1;
  }
}

/* ========================================
   COOKIE CONSENT OVERRIDES
   ======================================== */
#cc-main .cm,
#cc-main .pm {
  font-family: 'Geist', sans-serif;
}
#cc-main .cm__desc {
  color: var(--black);
}
@media (min-width: 1024px) {
  #cc-main .cm {
    border-bottom-left-radius: 20px;
  }
}
#cc-main .cm__title,
#cc-main .pm__title,
#cc-main .pm__section-title {
  font-family: 'Overused Grotesk', sans-serif;
  font-weight: 600;
}
#cc-main .cm__btn,
#cc-main .pm__btn {
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: -0.14px;
  border-radius: 0;
}
#cc-main .cm__btn--1 {
  background: var(--black);
  color: var(--white);
}
#cc-main .cm__btn--1:hover {
  background: #333;
}
#cc-main .cm__btn--2 {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--black);
}
#cc-main .cm__btn--2:hover {
  background: #f5f5f5;
}

/* ========================================
   ERROR PAGE (404)
   ======================================== */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.error-page__inner {
  text-align: center;
  padding: 80px 20px;
}
.error-page__code {
  font-family: 'Wasted Year', serif;
  font-weight: 400;
  font-size: clamp(100px, 20rem, 200px);
  line-height: 1;
  margin-bottom: 20px;
}
.error-page__text {
  font-family: 'Overused Grotesk', sans-serif;
  font-size: clamp(16px, 2rem, 20px);
  margin-bottom: 40px;
}
.error-page .btn {
  display: inline-flex;
  margin: 0 auto;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: none;
}

/* ========================================
   LEGAL PAGE (cookies, terms)
   ======================================== */
.legal-page {
  padding-top: clamp(40px, 6rem, 60px);
  padding-bottom: clamp(60px, 10rem, 100px);
}
.legal-page__title {
  font-family: 'Overused Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 4.8rem, 48px);
  margin-bottom: clamp(30px, 4rem, 40px);
}
.legal-page__content {
  font-family: 'Geist', sans-serif;
  font-size: clamp(14px, 1.6rem, 16px);
  line-height: 1.7;
  max-width: 800px;
}
.legal-page__content h2 {
  font-family: 'Overused Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2.4rem, 24px);
  margin-top: clamp(30px, 4rem, 40px);
  margin-bottom: 16px;
}
.legal-page__content h3 {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 1.8rem, 18px);
  margin-top: 24px;
  margin-bottom: 12px;
}
.legal-page__content p {
  margin-bottom: 16px;
}
.legal-page__content ul {
  margin-bottom: 16px;
  padding-left: 24px;
}
.legal-page__content li {
  margin-bottom: 8px;
}
.legal-page__content a {
  color: var(--blue);
  text-decoration: underline;
}
.legal-page__content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-size: clamp(12px, 1.4rem, 14px);
}
.legal-page__content th,
.legal-page__content td {
  padding: 10px 14px;
  border: 1px solid #ddd;
  text-align: left;
}
.legal-page__content th {
  background: #f5f5f5;
  font-weight: 600;
}