:root {
  --cream: #f5f7fb;
  --paper: #ffffff;
  --ink: #102b57;
  --coral: #e32636;
  --yellow: #ffffff;
  --blue: #2855a6;
  --mint: #dce7f8;
  --line: rgba(16, 43, 87, .16);
}

body { background: var(--cream); }
.site-header { background: rgba(255, 255, 255, .94); }
.brand-mark { background: linear-gradient(90deg, #2855a6 0 33%, #fff 33% 66%, #e32636 66%); border: 1px solid rgba(16,43,87,.08); color: var(--ink); }
.hero { background: linear-gradient(105deg, #f5f7fb 0 57%, #edf2fa 57%); }
.main-card { background: #2855a6; }
.main-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0 34%, rgba(255,255,255,.95) 34% 66%, #e32636 66%); opacity: .27; }
.sun { background: rgba(255,255,255,.42); }
.program-card.coral { background: #e32636; color: #fff; }
.program-card.yellow { background: #fff; border: 1px solid var(--line); }
.program-card.blue { background: #2855a6; color: #fff; }
.program-card.green { background: #dce7f8; }
.method { background: #102b57; }
.method h2 em, .footer-label { color: #ff7a84 !important; }
.method-art { background: #f5f7fb; }
.face { background: #e32636; border-color: #102b57; }
.extra-grid.info-grid { grid-template-columns: repeat(2, 1fr); }
.info-grid .extra { min-height: 330px; position: relative; padding-bottom: 60px; }
.info-grid .extra:nth-child(1) .extra-symbol, .info-grid .extra:nth-child(4) .extra-symbol { background: #2855a6; color: #fff; }
.info-grid .extra:nth-child(2) .extra-symbol { background: #fff; border: 2px solid #e32636; color: #e32636; }
.info-grid .extra:nth-child(3) .extra-symbol { background: #e32636; color: #fff; }
.info-kicker { margin: 25px 0 0 !important; color: #2855a6; font-size: 11px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.info-grid .extra h3 { margin-top: 4px; }
.info-grid .extra > a, .update-badge { position: absolute; bottom: 30px; left: 32px; font-size: 12px; font-weight: 700; }
.info-grid .extra > a { border-bottom: 1px solid currentColor; }
.update-badge { padding: 6px 11px; border-radius: 999px; background: #edf2fa; color: #2855a6; }
.location { background: #fff; }
.location-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.location h2 { font-size: clamp(42px, 5.1vw, 68px); }
.location-copy > p:not(.eyebrow) { font-size: 18px; }
.address-block { display: flex; gap: 18px; margin: 30px 0; font-size: 17px; }
.address-block strong { font: 600 25px var(--serif); }
.address-block p { margin: 8px 0 0; color: rgba(16,43,87,.7); font-size: 13px; }
.address-pin { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50% 50% 50% 8px; background: #e32636; color: white; transform: rotate(-45deg); }
.location-card { position: relative; min-height: 470px; overflow: hidden; border-radius: 32px; background: #edf2fa; border: 1px solid var(--line); }
.location-card::before, .location-card::after { content: ""; position: absolute; background: #fff; border: 1px solid rgba(16,43,87,.12); }
.location-card::before { width: 125%; height: 72px; left: -12%; top: 46%; transform: rotate(-8deg); }
.location-card::after { width: 72px; height: 125%; left: 60%; top: -12%; transform: rotate(14deg); }
.map-road { position: absolute; z-index: 2; color: rgba(16,43,87,.42); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.road-one { left: 9%; top: 52%; transform: rotate(-8deg); }
.road-two { right: 5%; bottom: 12%; }
.map-pin { position: absolute; z-index: 3; left: 39%; top: 25%; display: flex; align-items: center; gap: 12px; padding: 10px 17px 10px 10px; border-radius: 999px; background: #fff; box-shadow: 0 14px 35px rgba(16,43,87,.17); }
.map-pin span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: #e32636; color: #fff; font: 700 19px var(--serif); }
.map-pin strong { font-size: 13px; }
.map-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(40,85,166,.2) 1.2px, transparent 1.2px); background-size: 22px 22px; }
.signup-box { background: #2855a6; }
footer { background: #102b57; }

@media (max-width: 850px) {
  .extra-grid.info-grid, .location-grid { grid-template-columns: 1fr; }
  .location-card { min-height: 380px; }
}

@media (max-width: 520px) {
  .location-card { min-height: 310px; }
  .map-pin { left: 20%; }
}

/* Cieplejszy, bardziej osobisty kierunek */
:root {
  --cream: #fbf6ee;
  --paper: #fffdf8;
  --ink: #18304f;
  --coral: #d9474c;
  --blue: #31548d;
  --mint: #e8eef6;
}

.site-header { background: rgba(251, 246, 238, .94); }
.hero { background: linear-gradient(110deg, #fbf6ee 0 61%, #f3e9dc 61%); }
.hero-grid { gap: 58px; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy::before {
  content: "“";
  position: absolute;
  left: -35px;
  top: 10px;
  color: rgba(217,71,76,.1);
  font: 700 210px/1 var(--serif);
  pointer-events: none;
}

.hero-photo-wrap { min-height: 510px; }
.hero-photo-frame {
  position: absolute;
  inset: 5px 5px 20px 18px;
  overflow: hidden;
  border: 10px solid #fffdf8;
  border-radius: 46% 46% 24px 24px;
  box-shadow: 0 24px 55px rgba(70,45,30,.2);
  transform: rotate(1.5deg);
}
.hero-photo-frame img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 57% center; }
.photo-note {
  position: absolute;
  z-index: 3;
  padding: 10px 18px;
  background: #fffdf8;
  box-shadow: 0 8px 22px rgba(70,45,30,.17);
  font: 600 25px/1.1 "Caveat", cursive;
}
.note-bonjour { left: -5px; top: 50px; color: #31548d; transform: rotate(-8deg); }
.note-heart { right: -18px; bottom: 30px; color: #18304f; transform: rotate(5deg); }
.note-heart span { color: #d9474c; }
.avatars span { border-color: #fbf6ee; }
.intro { position: relative; background: #fffdf8; }
.intro::after {
  content: "";
  position: absolute;
  right: 5%;
  bottom: 8%;
  width: 90px;
  height: 120px;
  border: 2px solid rgba(49,84,141,.12);
  border-radius: 50%;
  transform: rotate(18deg);
}
.handwritten { margin-top: 24px; color: #d9474c; font: 600 34px "Caveat", cursive; transform: rotate(-4deg); transform-origin: left; }
.personal-letter { position: relative; padding: 38px 40px; background: #fbf6ee; border-radius: 6px 32px 32px 32px; box-shadow: 0 12px 36px rgba(70,45,30,.08); }
.personal-letter::before { content: ""; position: absolute; left: 30px; top: -9px; width: 76px; height: 20px; background: rgba(217,71,76,.18); transform: rotate(-3deg); }
.personal-letter blockquote { margin: 25px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(24,48,79,.15); color: #31548d; font: italic 600 20px/1.45 var(--serif); }
.program-card, .extra, .signup-box, .location-card { box-shadow: 0 12px 32px rgba(70,45,30,.07); }
.program-card { border-radius: 18px 42px 18px 42px; }
.program-card.coral { background: #d9474c; }
.program-card.blue { background: #31548d; }
.method { background: #18304f; }
.method-art { background: #fbf6ee; }
.signup-box { background: #31548d; }
footer { background: #18304f; }

@media (max-width: 850px) {
  .hero-photo-wrap { min-height: 470px; }
  .personal-letter { padding: 32px; }
}

@media (max-width: 520px) {
  .hero-photo-wrap { min-height: 370px; }
  .hero-photo-frame { inset: 0 5px 18px; border-width: 7px; }
  .photo-note { font-size: 21px; }
  .note-heart { right: 0; }
  .personal-letter { padding: 28px 22px; }
}

.french-ribbon {
  position: relative;
  z-index: 4;
  overflow: hidden;
  padding: 14px 0;
  background: #31548d;
  color: #fffdf8;
  transform: rotate(-1deg) scale(1.01);
  box-shadow: 0 8px 20px rgba(49,84,141,.14);
}
.french-ribbon::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; background: #d9474c; }
.french-ribbon div { display: flex; justify-content: center; align-items: center; gap: clamp(18px, 3vw, 44px); min-width: max-content; font: 600 clamp(18px, 2vw, 28px) "Caveat", cursive; }
.french-ribbon i { color: #ef8b8e; font: normal 8px var(--sans); }
.programs-wrap, .info-wrap, .location-copy { position: relative; }
.side-note {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 10px;
  padding: 10px 17px;
  background: #fff3aa;
  color: #18304f;
  box-shadow: 0 8px 18px rgba(70,45,30,.12);
  font: 600 21px/1.05 "Caveat", cursive;
  transform: rotate(5deg);
}
.side-note::before { content: ""; position: absolute; width: 42px; height: 12px; left: 30%; top: -7px; background: rgba(255,255,255,.58); transform: rotate(-4deg); }
.doodle-stars { position: absolute; left: 25px; bottom: 40px; color: #d9474c; font: 600 27px "Caveat", cursive; transform: rotate(-9deg); }
.round-stamp {
  position: absolute;
  z-index: 2;
  right: 1%;
  top: 0;
  width: 92px;
  height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid rgba(217,71,76,.5);
  outline: 1px dashed rgba(217,71,76,.45);
  outline-offset: -7px;
  border-radius: 50%;
  color: #d9474c;
  font: 700 18px/1 var(--serif);
  text-align: center;
  transform: rotate(9deg);
}
.round-stamp span { display: block; margin-top: 7px; font: 600 13px/1 "Caveat", cursive; }
.info-grid .extra::before { content: ""; position: absolute; width: 44px; height: 10px; right: 24px; top: -5px; background: rgba(217,71,76,.13); transform: rotate(4deg); }
.info-grid .extra:nth-child(even)::before { background: rgba(49,84,141,.14); transform: rotate(-5deg); }
.postcard-label {
  display: inline-block;
  margin: 0 0 18px 70%;
  padding: 7px 14px;
  border: 1px solid rgba(49,84,141,.25);
  color: #31548d;
  font: 600 19px "Caveat", cursive;
  transform: rotate(5deg);
}
.location-card { border: 10px solid #fffdf8; box-shadow: 0 20px 48px rgba(70,45,30,.12); transform: rotate(1deg); }
.signup-handwritten { margin-top: 28px; color: #fff3aa; font: 600 26px "Caveat", cursive; transform: rotate(-2deg); }
.signup-box { position: relative; overflow: visible; }
.signup-box::after { content: "FR"; position: absolute; z-index: 0; left: 18px; bottom: 8px; color: rgba(255,255,255,.05); font: 700 170px/1 var(--serif); pointer-events: none; }
.signup-copy, .inquiry-form { position: relative; z-index: 1; }
footer::before { content: ""; display: block; height: 5px; margin-top: -65px; margin-bottom: 60px; background: linear-gradient(90deg,#31548d 0 33.33%,#fffdf8 33.33% 66.66%,#d9474c 66.66%); }

@media (max-width: 850px) {
  .side-note, .round-stamp { display: none; }
  .postcard-label { margin-left: 55%; }
}

@media (max-width: 520px) {
  .french-ribbon div { justify-content: flex-start; padding-left: 18px; }
  .french-ribbon span:nth-of-type(n+5), .french-ribbon i:nth-of-type(n+5) { display: none; }
  .postcard-label { margin-left: 45%; }
  .signup-handwritten { font-size: 22px; }
}

.card-face {
  position: absolute;
  z-index: 2;
  right: 28px;
  top: 24px;
  width: 92px;
  height: 92px;
  margin: 0;
  overflow: hidden;
  border: 5px solid #fffdf8;
  border-radius: 50% 48% 52% 45%;
  box-shadow: 0 9px 22px rgba(24,48,79,.2);
  transform: rotate(4deg);
}
.program-card:nth-child(even) .card-face { transform: rotate(-4deg); }
.card-face::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(24,48,79,.08); border-radius: inherit; }
.card-face img { width: 100%; height: 100%; display: block; object-fit: cover; }
.program-card .age { padding-right: 90px; }

@media (max-width: 520px) {
  .card-face { width: 76px; height: 76px; right: 20px; top: 20px; border-width: 4px; }
  .program-card .age { padding-right: 74px; }
}

.intro-welcome { position: relative; }
.intro-faces { display: flex; align-items: center; margin-top: 48px; }
.intro-faces img { width: 74px; height: 74px; display: block; object-fit: cover; border: 5px solid #fffdf8; border-radius: 50%; box-shadow: 0 8px 20px rgba(70,45,30,.14); margin-left: -15px; }
.intro-faces img:first-child { margin-left: 0; transform: rotate(-5deg); }
.intro-faces img:nth-child(2) { transform: rotate(4deg); }
.intro-faces img:nth-child(3) { transform: rotate(-2deg); }
.intro-faces span { margin-left: 18px; color: #31548d; font: 600 20px/1.05 "Caveat", cursive; transform: rotate(-3deg); }
.intro-welcome::after { content: "merci!"; position: absolute; right: 6%; bottom: -5px; color: rgba(217,71,76,.2); font: 600 46px "Caveat", cursive; transform: rotate(8deg); }

@media (max-width: 520px) {
  .intro-faces { margin-top: 34px; }
  .intro-faces img { width: 60px; height: 60px; border-width: 4px; }
  .intro-faces span { font-size: 17px; }
  .intro-welcome::after { display: none; }
}