/* ==========================================================================
   Ecole et Garderie Doudou Bonheur - stylesheet
   --------------------------------------------------------------------------
   Desktop (960px and wider) rebuilds the original 920px-wide layout.
   Desktop sizes are written as "original pixels x var(--u)": --u grows from
   1px to 1.2px with the window, so the whole design scales up by up to 20%
   and nothing moves relative to the footsteps trail on the homepage.
   Phones and tablets (below 960px) get a single-column layout.
   ========================================================================== */

/* ---------- Fonts (self-hosted; licences in /fonts) ---------- */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/lato-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/lato-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/roboto-slab-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/roboto-slab-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --u: 1px;
  --cream: #fbf5dd;
  --font-text: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-title: 'Roboto Slab', Rockwell, Georgia, serif;
  --radius: 10px;
  --shadow: 2px 2px 5px #888;
}
@media (min-width: 960px) {
  :root {
    --u: clamp(1px, (100vw - 80px) / 920, 1.2px);
    --radius: calc(10 * var(--u));
    --shadow: calc(2 * var(--u)) calc(2 * var(--u)) calc(5 * var(--u)) #888;
  }
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body { margin: 0; background: var(--cream); color: #000; font-family: var(--font-text); }
img { border: 0; }
:focus-visible { outline: 3px solid #1f2d3d; outline-offset: 2px; }

.skip {
  position: absolute; z-index: 100; top: -100px; left: 8px;
  padding: 8px 14px; border-radius: 6px;
  background: #fff; color: #000; text-decoration: none;
}
.skip:focus { top: 8px; }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.page { position: relative; }
@media (min-width: 960px) {
  /* the original .mainContent: 920px wide, centred, contains its floats */
  .page { display: flow-root; width: calc(920 * var(--u)); margin: 0 auto calc(50 * var(--u)); }
}

/* ==========================================================================
   Top menu (all pages): tabs hanging from the top edge
   ========================================================================== */
.top-menu {
  display: flex; align-items: flex-start; justify-content: flex-end; gap: 8px;
  padding: 0 10px;
}
.top-menu__tabs {
  display: flex; flex: 1 1 auto; justify-content: flex-end; gap: 3px; min-width: 0;
  margin: 0; padding: 0; list-style: none;
}
.top-menu__tabs li { flex: 1 1 0; min-width: 0; }
.tab {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: 38px; padding: 0 6px;
  background: var(--c); color: #fff;
  font: 600 13px/1.1 var(--font-title);
  text-align: center; text-decoration: none;
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .28);
  transition: height .15s ease;
}
.tab:hover { height: 42px; }
.tab[aria-current='page'] {
  height: 45px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 2px 4px rgba(0, 0, 0, .32);
}
.tab--home    { --c: #7cba42; }
.tab--gallery { --c: #a36eaf; }
.tab--songs   { --c: #ef4b30; }
.tab--contact { --c: #faa61a; }
.tab__short { display: none; }
@media (max-width: 599px) {
  .tab__full {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .tab__short { display: inline; }
}
@media (min-width: 600px) {
  .top-menu__tabs li { flex: 0 1 auto; }
  .tab { padding: 0 12px; }
}
.top-menu__fb { flex: none; display: block; }
.top-menu__fb img { display: block; width: 21px; height: 40px; transition: filter .15s ease; }
.top-menu__fb:hover img { filter: brightness(1.15); }

@media (min-width: 960px) {
  .top-menu { height: calc(40 * var(--u)); margin-right: calc(60 * var(--u)); padding: 0; gap: calc(5 * var(--u)); }
  .top-menu__tabs { flex: none; gap: calc(3 * var(--u)); }
  .top-menu__tabs li { flex: none; }
  .tab {
    height: calc(25 * var(--u)); padding: 0 calc(11 * var(--u));
    font-size: calc(12 * var(--u)); white-space: nowrap;
    border-radius: 0 0 calc(4 * var(--u)) calc(4 * var(--u));
    box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .2), 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .28);
  }
  .tab:hover { height: calc(29 * var(--u)); }
  .tab[aria-current='page'] {
    height: calc(31 * var(--u));
    box-shadow: inset 0 0 0 calc(1 * var(--u)) rgba(255, 255, 255, .2), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, .32);
  }
  .top-menu__fb img { width: calc(21 * var(--u)); height: calc(40 * var(--u)); }
}

/* ==========================================================================
   Homepage
   ========================================================================== */
.home { padding: 0 12px 76px; }
.home__logo { width: 150px; margin: 14px auto 18px; }
.home__logo img { display: block; width: 100%; height: auto; }

.sec {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'title plan' 'photo photo' 'text text';
  align-items: start;
  max-width: 560px; margin: 0 auto 18px; padding-bottom: 18px;
  background: var(--c); color: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow);
  scroll-margin-top: 12px;
}
.sec__title { grid-area: title; margin: 0; padding: 16px 16px 10px; font: 600 19px/1.25 var(--font-title); }
.sec__plan { grid-area: plan; width: 76px; height: auto; margin: 13px 14px 0 0; }
.sec__media { display: contents; }
.sec__photo { grid-area: photo; margin: 2px 16px 14px; aspect-ratio: 5 / 3; }
.sec__text { grid-area: text; margin: 0; padding: 0 16px; font-size: 15px; line-height: 1.55; }
.sec__baby { position: absolute; right: 12px; bottom: 8px; width: 98px; height: 97px; }
.sec--10 { padding-bottom: 112px; }
.br-d { display: none; }
/* white text on the two pale boxes gets a soft shadow so it stays readable */
.sec--5, .sec--7 { text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }

.sec--1  { --c: #83c555; }
.sec--2  { --c: #e26fab; }
.sec--3  { --c: #65cae0; }
.sec--4  { --c: #815aa5; }
.sec--5  { --c: #f8c1d7; }
.sec--6  { --c: #ed2024; }
.sec--7  { --c: #fdd028; }
.sec--8  { --c: #0ab04b; }
.sec--9  { --c: #4069b2; }
.sec--10 { --c: #b62b91; }

/* photo frames with a slow two-photo slideshow */
.slider {
  position: relative; overflow: hidden;
  border: 3px solid #fff; background: rgba(255, 255, 255, .3);
  touch-action: pan-y;
}
.slider__track { position: absolute; inset: 0; display: flex; transition: transform .45s ease; }
.slider__track img {
  display: block; flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none; user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .slider__track { transition: none; }
}

@media (min-width: 960px) {
  .page--home { background: url(../images/baby-trail.png) no-repeat 50% calc(44 * var(--u)) / calc(491 * var(--u)) auto; }
  .home { padding: 0; }
  .home__logo { float: left; width: calc(186 * var(--u)); margin: calc(54 * var(--u)) 0 0 calc(124 * var(--u)); }

  .sec { display: block; float: left; max-width: none; margin: 0; padding: 0; scroll-margin-top: calc(16 * var(--u)); }
  .sec__title { padding: calc(18 * var(--u)) 0 calc(9 * var(--u)) calc(18 * var(--u)); font-size: calc(15 * var(--u)); line-height: normal; }
  .sec__text { padding: 0 calc(18 * var(--u)); font-size: calc(11 * var(--u)); line-height: normal; }
  .sec__plan { width: calc(124 * var(--u)); height: calc(74 * var(--u)); margin: 0; }
  .sec__media { display: flow-root; }
  .sec__photo { margin: 0; aspect-ratio: auto; border-width: calc(3 * var(--u)); }
  .sec__baby { right: calc(9 * var(--u)); bottom: calc(3 * var(--u)); width: calc(98 * var(--u)); height: calc(97 * var(--u)); }
  .br-d { display: inline; }

  .sec--1  { float: right; width: calc(502 * var(--u)); min-height: calc(260 * var(--u)); margin: calc(21 * var(--u)) calc(-8 * var(--u)) 0 0; }
  .sec--1  .sec__plan  { margin: calc(30 * var(--u)) 0 0 calc(25 * var(--u)); }
  .sec--1  .sec__photo { float: right; width: calc(245 * var(--u)); height: calc(151 * var(--u)); margin: calc(9 * var(--u)) calc(18 * var(--u)) 0 0; }

  .sec--2  { width: calc(460 * var(--u)); min-height: calc(277 * var(--u)); margin: calc(49 * var(--u)) 0 0 calc(52 * var(--u)); }
  .sec--2  .sec__photo { float: left; width: calc(255 * var(--u)); height: calc(153 * var(--u)); margin: 0 0 calc(10 * var(--u)) calc(18 * var(--u)); }
  .sec--2  .sec__plan  { margin: calc(34 * var(--u)) 0 0 calc(25 * var(--u)); }

  .sec--3  { float: right; width: calc(555 * var(--u)); min-height: calc(324 * var(--u)); margin: calc(47 * var(--u)) calc(37 * var(--u)) 0 0; }
  .sec--3  .sec__plan  { float: left; margin: calc(64 * var(--u)) 0 0 calc(24 * var(--u)); }
  .sec--3  .sec__photo { float: right; width: calc(362 * var(--u)); height: calc(215 * var(--u)); margin: calc(5 * var(--u)) calc(18 * var(--u)) 0 0; }

  .sec--4  { width: calc(425 * var(--u)); min-height: calc(302 * var(--u)); margin: calc(39 * var(--u)) 0 0 calc(67 * var(--u)); }
  .sec--4  .sec__photo { float: left; width: calc(236 * var(--u)); height: calc(142 * var(--u)); margin: calc(15 * var(--u)) 0 0 calc(18 * var(--u)); }
  .sec--4  .sec__plan  { margin: calc(65 * var(--u)) 0 0 calc(20 * var(--u)); }

  .sec--5  { float: right; width: calc(513 * var(--u)); min-height: calc(196 * var(--u)); margin: calc(24 * var(--u)) calc(-2 * var(--u)) 0 calc(200 * var(--u)); }
  .sec--5  .sec__photo { float: left; width: calc(146 * var(--u)); height: calc(91 * var(--u)); margin: 0 0 calc(2 * var(--u)) calc(18 * var(--u)); }
  .sec--5  .sec__plan  { margin: calc(10 * var(--u)) 0 0 calc(15 * var(--u)); }

  .sec--6  { width: calc(570 * var(--u)); min-height: calc(268 * var(--u)); margin: calc(30 * var(--u)) 0 0 0; }
  .sec--6  .sec__photo { float: left; width: calc(220 * var(--u)); height: calc(126 * var(--u)); margin: 0 0 0 calc(18 * var(--u)); }
  .sec--6  .sec__plan  { margin: calc(50 * var(--u)) 0 0 calc(20 * var(--u)); }

  .sec--7  { float: right; width: calc(495 * var(--u)); min-height: calc(406 * var(--u)); margin: calc(34 * var(--u)) 0 0 0; }
  .sec--7  .sec__plan  { margin: calc(33 * var(--u)) 0 0 calc(35 * var(--u)); }
  .sec--7  .sec__photo { float: right; width: calc(216 * var(--u)); height: calc(132 * var(--u)); margin: calc(6 * var(--u)) calc(18 * var(--u)) 0 0; }

  .sec--8  { width: calc(532 * var(--u)); min-height: calc(306 * var(--u)); margin: calc(15 * var(--u)) 0 0 0; }
  .sec--8  .sec__plan  { margin: calc(39 * var(--u)) 0 0 calc(23 * var(--u)); }
  .sec--8  .sec__photo { float: right; width: calc(255 * var(--u)); height: calc(145 * var(--u)); margin: calc(3 * var(--u)) calc(18 * var(--u)) 0 0; }

  .sec--9  { float: right; width: calc(441 * var(--u)); min-height: calc(256 * var(--u)); margin: calc(26 * var(--u)) calc(20 * var(--u)) 0 0; }
  .sec--9  .sec__photo { float: left; width: calc(180 * var(--u)); height: calc(110 * var(--u)); margin: calc(3 * var(--u)) 0 0 calc(18 * var(--u)); }
  .sec--9  .sec__plan  { margin: calc(21 * var(--u)) 0 0 calc(21 * var(--u)); }

  .sec--10 { float: right; width: calc(363 * var(--u)); min-height: calc(189 * var(--u)); margin: calc(53 * var(--u)) calc(257 * var(--u)) 0 0; padding: 0; }
}

/* ==========================================================================
   Homepage section menu: paper tabs fixed at the bottom of the window
   Each tab is clipped to the slanted shape of the original menu picture.
   --t1/--t2: height of the top-left / top-right corner (original pixels)
   ========================================================================== */
.section-menu {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: -10px;
  filter: drop-shadow(0 -1px 1.5px rgba(0, 0, 0, .22));
}
.section-menu ul {
  position: relative; display: flex;
  margin: 0; padding: 8px 6px 0; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.section-menu ul::-webkit-scrollbar { display: none; }
.st { flex: none; scroll-snap-align: center; }
.stab {
  position: relative; display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: 52px;
  padding: calc((var(--t1) + var(--t2)) / 2 * var(--u)) 13px 10px;
  background: var(--c); color: #fff;
  font: 600 12px/1 var(--font-title); text-transform: uppercase; white-space: nowrap;
  text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .28);
  clip-path: polygon(0 calc(var(--t1) * var(--u)), 100% calc(var(--t2) * var(--u)),
                     calc(100% - var(--br, 0px)) 100%, var(--bl, 0px) 100%);
  transition: transform .15s ease;
}
.stab:hover { transform: translateY(-4px); z-index: 2; }
.stab.is-active { transform: translateY(-7px); z-index: 3; }
.stab:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .stab { transition: none; }
}
.st--1  { --c: #83c555; --t1: 7;  --t2: 8; }
.st--2  { --c: #e26fab; --t1: 6;  --t2: 14; }
.st--3  { --c: #65cae0; --t1: 18; --t2: 10; }
.st--4  { --c: #815aa5; --t1: 8;  --t2: 14; }
.st--5  { --c: #f8c1d7; --t1: 18; --t2: 8; }
.st--6  { --c: #ed2024; --t1: 5;  --t2: 10; }
.st--7  { --c: #fdd028; --t1: 16; --t2: 7; }
.st--8  { --c: #0ab04b; --t1: 3;  --t2: 7; }
.st--9  { --c: #4069b2; --t1: 10; --t2: 1; }
.st--10 { --c: #b62b91; --t1: 3;  --t2: 8; }

@media (min-width: 960px) {
  .section-menu {
    left: 50%; right: auto; bottom: calc(-10 * var(--u));
    width: calc(921 * var(--u)); height: calc(52 * var(--u)); margin-left: calc(-460 * var(--u));
    filter: drop-shadow(0 calc(-1 * var(--u)) calc(1.5 * var(--u)) rgba(0, 0, 0, .22));
  }
  .section-menu ul { display: block; height: 100%; padding: 0; overflow: visible; }
  .st { position: absolute; top: 0; bottom: 0; }
  .stab { height: 100%; padding-left: 0; padding-right: 0; padding-bottom: calc(10 * var(--u)); font-size: calc(11 * var(--u)); }
  .stab:hover { transform: translateY(calc(-4 * var(--u))); }
  .stab.is-active { transform: translateY(calc(-7 * var(--u))); }
  .st--1  { left: calc(1 * var(--u));   width: calc(78 * var(--u)); }
  .st--2  { left: calc(78 * var(--u));  width: calc(103 * var(--u)); --bl: calc(2 * var(--u)); }
  .st--3  { left: calc(174 * var(--u)); width: calc(105 * var(--u)); --bl: calc(7 * var(--u)); }
  .st--4  { left: calc(279 * var(--u)); width: calc(114 * var(--u)); --bl: calc(1 * var(--u)); --br: calc(8 * var(--u)); }
  .st--5  { left: calc(385 * var(--u)); width: calc(104 * var(--u)); }
  .st--6  { left: calc(482 * var(--u)); width: calc(132 * var(--u)); --bl: calc(7 * var(--u)); --br: calc(3 * var(--u)); }
  .st--7  { left: calc(610 * var(--u)); width: calc(66 * var(--u));  --bl: calc(1 * var(--u)); --br: calc(2 * var(--u)); }
  .st--8  { left: calc(673 * var(--u)); width: calc(74 * var(--u));  --bl: calc(2 * var(--u)); }
  .st--9  { left: calc(746 * var(--u)); width: calc(84 * var(--u));  --bl: calc(2 * var(--u)); --br: calc(5 * var(--u)); }
  .st--10 { left: calc(826 * var(--u)); width: calc(95 * var(--u)); }
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery {
  margin: 8px 12px 28px; padding: 12px 12px 14px;
  background: #a56eab; border-radius: var(--radius); box-shadow: var(--shadow);
}
.gallery__title {
  margin: 2px 0 12px; color: #fff;
  font: 600 22px/1.2 var(--font-title); text-transform: uppercase;
}
.gallery__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  margin: 0; padding: 6px; list-style: none; background: #fff;
}
.gallery__link {
  display: block; aspect-ratio: 203 / 192; overflow: hidden;
  background: #cbccce; cursor: zoom-in;
}
.gallery__link img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s ease;
}
.gallery__link:hover img { transform: scale(1.05); }
.gallery__link:focus-visible { outline-offset: -3px; }
@media (min-width: 600px) {
  .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .gallery {
    width: calc(855 * var(--u)); margin: calc(10 * var(--u)) auto 0; padding: calc(13 * var(--u)) calc(25 * var(--u)) calc(25 * var(--u));
  }
  .gallery__title { margin: 0 0 calc(13 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(19 * var(--u)); }
  .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(9 * var(--u)); padding: calc(8 * var(--u)); }
}

/* ==========================================================================
   Chantez avec nous
   ========================================================================== */
.chantez {
  margin: 8px 12px 0; padding: 16px;
  background: #ed2024; border-radius: var(--radius); box-shadow: var(--shadow);
}
.chantez__title {
  margin: 0 0 12px; color: #fff;
  font: 600 20px/1.3 var(--font-title); text-transform: uppercase;
}
.chantez__video { aspect-ratio: 845 / 400; background: #000; }
.chantez__video iframe { display: block; width: 100%; height: 100%; border: 0; }
.chantez__credits { margin: 14px 16px 28px; font-size: 15px; line-height: 1.5; text-align: center; }
@media (min-width: 960px) {
  .chantez { width: calc(869 * var(--u)); margin: calc(10 * var(--u)) 0 0 calc(25 * var(--u)); padding: calc(25 * var(--u)) 0 calc(25 * var(--u)) calc(25 * var(--u)); }
  .chantez__title { margin: 0 0 calc(12.7 * var(--u)); font-size: calc(19 * var(--u)); line-height: normal; }
  .chantez__video { width: calc(845 * var(--u)); height: calc(400 * var(--u)); aspect-ratio: auto; }
  .chantez__credits { width: calc(847 * var(--u)); margin: calc(12 * var(--u)) 0 0 calc(50 * var(--u)); font-size: calc(12 * var(--u)); line-height: normal; }
}

/* ==========================================================================
   Contactez-nous
   ========================================================================== */
.contact {
  display: flex; flex-direction: column; gap: 16px;
  box-sizing: border-box; max-width: 584px; margin: 8px auto 28px; padding: 0 12px;
}
.contact__box {
  padding: 14px 16px 18px;
  background: #faa619; color: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.contact__title {
  margin: 0 0 12px;
  font: 600 24px/1.1 var(--font-title); text-transform: uppercase;
}
.contact a { color: #fff; text-decoration: none; }
.contact a:hover { text-decoration: underline; }
.contact__baby img { display: block; width: 100%; max-width: 234px; height: auto; }
.contact__phones { margin: 12px 0 0; font-size: 16px; line-height: 1.5; }
.contact__email { margin: 10px 0 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.contact__map {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'plan plan' 'address gmaps';
  gap: 14px; align-items: end;
}
.contact__plan { grid-area: plan; display: block; cursor: zoom-in; }
.contact__plan img { display: block; width: 100%; max-width: 420px; height: auto; }
.contact__gmaps { grid-area: gmaps; display: block; transition: transform .2s ease; }
.contact__gmaps img { display: block; width: 110px; height: auto; }
.contact__gmaps:hover { transform: rotate(-4deg) scale(1.05); }
.contact__address { grid-area: address; font-style: normal; font-size: 16px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  .contact__gmaps { transition: none; }
}
@media (min-width: 960px) {
  .contact { flex-direction: row; justify-content: center; align-items: stretch; gap: calc(22 * var(--u)); max-width: none; margin: calc(10 * var(--u)) 0 0; padding: 0; }
  .contact__box { padding: calc(13 * var(--u)) 0 calc(19 * var(--u)) calc(23 * var(--u)); }
  .contact__title { margin: 0 0 calc(13 * var(--u)); font-size: calc(24 * var(--u)); line-height: calc(19 * var(--u)); }
  .contact__baby { display: flow-root; width: calc(234 * var(--u)); margin-right: calc(77 * var(--u)); }
  .contact__baby img { width: calc(234 * var(--u)); height: calc(290 * var(--u)); max-width: none; }
  .contact__phones { float: right; margin: calc(2 * var(--u)) 0 calc(13 * var(--u)); font-size: calc(11 * var(--u)); line-height: normal; text-align: right; }
  .contact__email { margin: calc(39 * var(--u)) 0 0; font-size: calc(16 * var(--u)); line-height: normal; text-align: center; }
  .contact__map { position: relative; display: block; width: calc(540 * var(--u)); }
  .contact__plan img { width: calc(331 * var(--u)); max-width: none; }
  .contact__gmaps { position: absolute; top: 0; left: calc(363 * var(--u)); }
  .contact__gmaps img { width: calc(121 * var(--u)); height: calc(116 * var(--u)); }
  .contact__address { position: absolute; right: calc(114 * var(--u)); bottom: 0; font-size: calc(11 * var(--u)); line-height: normal; }
}

/* ==========================================================================
   Lightbox (gallery photos and the directions map)
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; box-sizing: border-box;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 60px 12px 48px; border: 0;
  background: transparent; overflow: hidden;
  touch-action: pan-y pinch-zoom;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(0, 0, 0, .84); }
.lightbox__img {
  display: block; min-width: 0; min-height: 0;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, .6); cursor: pointer;
}
.lightbox__btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer;
}
.lightbox__btn:hover { background: rgba(0, 0, 0, .75); }
.lightbox__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.lightbox__close { top: 8px; right: 8px; }
.lightbox__prev, .lightbox__next { top: 50%; margin-top: -23px; }
.lightbox__prev { left: 8px; }
.lightbox__next { right: 8px; }
.lightbox__count {
  position: absolute; left: 0; right: 0; bottom: 14px; margin: 0;
  color: #e6e6e6; font: 14px/1 var(--font-text); text-align: center;
}
.lightbox[data-single] .lightbox__prev,
.lightbox[data-single] .lightbox__next,
.lightbox[data-single] .lightbox__count { display: none; }
:root:has(.lightbox[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lightbox__img { animation: lightbox-in .2s ease-out; }
}
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(.97); }
}

/* ==========================================================================
   Page not found
   ========================================================================== */
.notfound {
  box-sizing: border-box; width: min(520px, calc(100% - 24px));
  margin: 28px auto; padding: 22px 22px 26px;
  background: #a56eab; color: #fff; text-align: center;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.notfound h1 { margin: 0 0 10px; font: 600 24px/1.2 var(--font-title); text-transform: uppercase; }
.notfound p { margin: 0 0 18px; font-size: 16px; line-height: 1.5; }
.notfound a {
  display: inline-block; padding: 10px 18px; border-radius: 6px;
  background: #fff; color: #6f3f76; font: 600 15px/1.2 var(--font-title); text-decoration: none;
}
.notfound a:hover { background: #f3e9f5; }