/*
 * Anvida School - Base styles
 * Pixel-fidelity implementation; no frameworks.
 */

/* ---------------------------------------------------------------------------
   Fonts
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Candy Beans';
  src: url('../fonts/CandyBeans.woff2') format('woff2'),
    url('../fonts/Candy%20Beans.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DB SaiKrok';
  src: url('../fonts/DBSaiKrokX.woff2') format('woff2'),
    url('../fonts/DB%20SaiKrok%20X.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DB SaiKrok';
  src: url('../fonts/DBSaiKrokBoldX.woff2') format('woff2'),
    url('../fonts/DB%20SaiKrok%20Bold%20X.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DB SaiKrok';
  src: url('../fonts/DBSaiKrokItalicX.woff2') format('woff2'),
    url('../fonts/DB%20SaiKrok%20Italic%20X.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   CSS variables - palette, spacing, radius
   --------------------------------------------------------------------------- */
:root {
  /* Palette - match Campus design (mustard, cream, wood) */
  --color-header-footer-bg: #f2bf50;
  /* C5 M25 Y80 K0 */
  --color-panel-bg: #FFF7E6;
  --color-panel-border: #2B3B6F;
  --color-carousel-border: #E0CCAB;
  --color-text-dark: #333333;
  --color-text-body: #333333;
  --color-nav-pill-bg: #FFF7E6;
  --color-nav-pill-border: #333333;
  --color-nav-text: #333333;
  --color-nav-active-bg: #2B3B6F;
  --color-nav-active-text: #FFF7E6;
  --color-logo-text: #ffffff;
  --color-tagline: #ffffff;
  --color-footer-text: #ffffff;
  --color-accent-red: #c0392b;
  --color-accent-blue: #5F6FD0;
  --color-map-heading: #104085;

  /* Spacing scale (8px base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border radius - design: very rounded main panel (40–60px) */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 48px;
  --radius-pill: 9999px;

  /* Typography */
  --font-heading: 'Candy Beans', sans-serif;
  --font-body: 'DB SaiKrok', sans-serif;
  --font-size-tagline: 0.875rem;
  --font-size-body: 1rem;
  --font-size-nav: 1rem;
  --font-size-section-title: 1.25rem;
  --font-size-logo: 1.5rem;
  --line-height-body: 1.6;
}

/* ---------------------------------------------------------------------------
   Reset & base
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
  background-color: var(--color-panel-bg);
  background-image: url('../images/wood background2.png');
  background-repeat: repeat;
  background-position: center center;
}

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

.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;
}

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

/* ---------------------------------------------------------------------------
   Layout - header
   --------------------------------------------------------------------------- */
/* SVG: curve at bottom; pin to bottom. cover = always fill header, no wood showing when responsive */
.site-header-bg {
  position: relative;
  z-index: 10;
  background-image: url('../images/home-background sections-01.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  min-height: 612px;
}

.site-header {
  background: none;
  padding: var(--space-md) var(--space-xl) var(--space-lg);
  position: relative;
}

.site-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.site-header__top {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.site-header__logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-header__logo-link {
  display: inline-block;
}

.site-header__logo-img {
  height: auto;
  width: auto;
  max-height: 104px;
  max-width: 364px;
  display: block;
  object-fit: contain;
}

/* Language menu - top right, image buttons */
.site-header__lang {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.site-header__lang-btn {
  display: inline-block;
  padding: 0;
  border: none;
  background: transparent;
  line-height: 0;
}

.site-header__lang-btn img {
  height: auto;
  width: auto;
  max-height: 36px;
  max-width: 80px;
  display: block;
  object-fit: contain;
}

/* Main nav - menu images, no blue border, more spacing */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  display: inline-block;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  transition: opacity 0.2s;
}

.site-nav__link:hover {
  opacity: 0.85;
}

.site-nav__link--active {
  opacity: 1;
}

.site-nav__img {
  height: auto;
  width: auto;
  max-height: 52px;
  max-width: 156px;
  display: block;
  object-fit: contain;
}

/* Wave separator (placeholder; exact shape in Step 3) */
.header-wave {
  display: block;
  width: 100%;
  min-height: 80px;
  margin-bottom: -1px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Layout - main content area
   --------------------------------------------------------------------------- */
.main-content {
  min-height: 40vh;
  padding: calc(var(--space-2xl) * 0.5) var(--space-xl) var(--space-2xl);
}

.main-content__placeholder {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-lg);
  background: var(--color-panel-bg);
  border: 2px solid var(--color-panel-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  color: var(--color-text-body);
}

/* ---------------------------------------------------------------------------
   Campus page
   --------------------------------------------------------------------------- */
.main-content--campus {
  position: relative;
  padding: 48px var(--space-xl) var(--space-2xl);
}

.campus-deco {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.campus-panel {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-2xl);
  background: var(--color-panel-bg);
  border-radius: var(--radius-2xl);
}

.campus-deco--traffic {
  top: -188px;
  right: 80px;
  width: 70px;
  height: auto;
  z-index: 3;
}

/* Bear car: bottom-left of panel, peeking from behind rounded corner */
.campus-deco--car {
  bottom: -24px;
  left: -24px;
  width: 180px;
  height: auto;
  z-index: 3;
}

.campus-panel__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.campus-carousel-box {
  position: relative;
  aspect-ratio: 1;
  min-height: 280px;
  background: var(--color-panel-bg);
  border: 2px dashed var(--color-carousel-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.campus-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  padding: var(--space-sm);
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.campus-carousel__btn:hover {
  color: rgba(255, 255, 255, 1);
}

.campus-carousel__btn--prev {
  left: var(--space-sm);
}

.campus-carousel__btn--next {
  right: var(--space-sm);
}

.campus-carousel__track {
  position: absolute;
  inset: 0;
}

.campus-carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.campus-carousel__slide--active {
  opacity: 1;
  z-index: 1;
}

.campus-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.campus-describe {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.campus-describe__img {
  max-width: 100%;
  height: auto;
}

.campus-describe__text {
  font-family: var(--font-body);
  font-size: 2.2rem;
  font-weight: normal;
  line-height: 1.3;
  color: var(--color-map-heading);
  margin: 0;
}

.campus-map__title {
  font-family: var(--font-heading);
  font-size: 1.44rem;
  color: var(--color-map-heading);
  text-transform: uppercase;
  margin: 0 0 var(--space-md);
}

.campus-map__frame {
  aspect-ratio: 16 / 9;
  min-height: 200px;
  background: var(--color-panel-bg);
  border: 2px solid var(--color-panel-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.campus-map__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.campus-map__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  font-family: var(--font-body);
  font-size: var(--font-size-tagline);
  color: var(--color-text-body);
}

/* ---------------------------------------------------------------------------
   Contact page
   --------------------------------------------------------------------------- */
.main-content--contact {
  padding: 0 var(--space-xl) var(--space-2xl);
  margin-top: -80px;
}

.contact-panel {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-2xl);
  background: var(--color-panel-bg);
  border-radius: var(--radius-xl);
}

.contact-map {
  margin-bottom: var(--space-2xl);
}

.contact-map__title {
  font-family: var(--font-heading);
  font-size: 1.44rem;
  color: var(--color-map-heading);
  text-transform: uppercase;
  margin: 0 0 var(--space-md);
}

.contact-map__frame {
  aspect-ratio: 16 / 9;
  min-height: 200px;
  background: var(--color-panel-bg);
  border: 2px solid var(--color-panel-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.contact-map__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-map__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  font-family: var(--font-body);
  font-size: var(--font-size-tagline);
  color: var(--color-text-body);
}

.contact-panel__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}

.contact-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ADDRESS, CONTACT, BOOKING - same size (match ADDRESS) */
.contact-heading {
  display: block;
  height: auto;
  width: auto;
  max-width: 220px;
  max-height: 55px;
  object-fit: contain;
}

.contact-address-img {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.contact-booking-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

.contact-booking-qr {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
}

.contact-booking-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-booking-pill {
  display: block;
  height: auto;
  width: auto;
  max-width: 220px;
  max-height: 55px;
  object-fit: contain;
}

.contact-booking-hint-img {
  display: block;
  height: auto;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

.contact-column--right {
  align-items: center;
}

.contact-contact-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: 260px;
}

.contact-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.contact-contact-item__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.contact-contact-item__text {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--color-text-body);
}

/* Phone, email, LINE, Facebook, TikTok - same size, ref TikTok (35px height) */
.contact-contact-item--full {
  display: block;
  height: 35px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

.contact-section-pill {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-header-footer-bg);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--font-size-section-title);
  color: var(--color-text-dark);
  text-transform: uppercase;
  margin: 0 0 var(--space-md);
}

.contact-address__text {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
  margin: 0 0 var(--space-lg);
}

.contact-booking {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}

.contact-booking__qr {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}

.contact-booking__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.contact-booking__btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-header-footer-bg);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--font-size-nav);
  color: var(--color-text-dark);
  text-transform: uppercase;
  text-align: center;
  width: fit-content;
}

.contact-booking__btn:hover {
  opacity: 0.9;
}

.contact-booking__hint {
  font-family: var(--font-body);
  font-size: var(--font-size-tagline);
  color: var(--color-text-body);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.contact-booking__hint-img {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  color: var(--color-text-body);
}

.contact-list__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* ---------------------------------------------------------------------------
   About page
   --------------------------------------------------------------------------- */
.main-content--about {
  padding: 0;
  min-height: 0;
}

.about-section {
  position: relative;
  z-index: 1;
}

.about-section--awards {
  margin-top: -2px;
}

.about-section__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
}

/* Section 1: pull yellow bg up so header overlaps */
.main-content--about .about-section--01 {
  margin-top: -450px;
  padding-top: 450px;
  min-height: 40vw;
  position: relative;
  z-index: 1;
}

.about-bg-01 {
  background-image: url('../images/about-background sections-01.svg');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
}

.about-section--01.about-bg-01 {
  background-color: #fff6e4;
}

/* Section 1: hide wood texture, use solid color + SVG only */
.page-about .main-content--about .about-section--01 {
  isolation: isolate;
}

/* sections-02: curve at bottom - pin bg to bottom so curve is visible */
.about-bg-02 {
  background-color: transparent;
  background-image: url('../images/about-background sections-02.svg'),
    linear-gradient(to bottom, #fff6e4 0%, #fff6e4 65%, transparent 65%);
  background-repeat: no-repeat;
  background-size: 100% auto, 100% 100%;
  background-position: center bottom, top center;
}

.about-section--awards.about-bg-02 {
  padding-bottom: 11vw;
}

.about-section--awards .about-section__inner {
  padding-top: calc(var(--space-2xl) + var(--space-xl));
  padding-bottom: var(--space-xl);
}

.about-section--unique .about-section__inner {
  padding-top: var(--space-xl);
}

/* sections-03: at TOP, full width stretched edge-to-edge, height squeezed */
.about-bg-03 {
  background-image: url('../images/about-background sections-03.svg');
  background-repeat: no-repeat;
  background-size: 100% 38%;
  background-position: top center;
  background-origin: border-box;
}

.about-section--why.about-bg-03 {
  background-color: transparent;
}

/* Why section: push content down to avoid overlapping green bg */
.about-section--why .about-section__inner {
  padding-top: 28vw;
  padding-bottom: 10rem;
}

/* Why section: heading image - same width as What is unique (58%) */
.about-section--why .about-heading.about-heading--why {
  max-width: 58%;
  margin-top: 3rem;
}

/* Why section: grid spacing below heading */
.about-section--why .about-why-grid {
  margin-top: var(--space-3xl);
}

/* Hero block: wood frame + bear outside frame (like campus traffic light) */
.about-hero-block {
  position: relative;
  margin-bottom: 0;
  margin-top: 180px;
}

/* Bear: floating at top-right corner, overlapping the wood frame */
.about-hero-img {
  position: absolute;
  top: 0;
  right: 40px;
  transform: translateY(-98%);
  width: auto;
  max-width: 749px;
  height: auto;
  z-index: -1;
}

/* Wood-grain rounded frame - same width as about-text-img--wide */
.about-wood-frame {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 400px;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background-image: url('../images/wood background2.png');
  background-repeat: repeat;
  border-radius: var(--radius-2xl);
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
}

.about-frame__left,
.about-frame__right {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-frame-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.about-text-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--space-lg);
}

.about-text-img--wide {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.about-text-img--full {
  margin-top: var(--space-lg);
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
}

.about-two-col {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  margin-top: var(--space-xl);
}

/* Responsive image replacing Officially Accredited paragraphs */
.about-accredited-img {
  display: block;
  width: 90%;
  max-width: 90%;
  height: auto;
  margin: 0;
}

/* Real text blocks replacing text-images */
.about-text-block {
  font-family: var(--font-body);
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.8;
  color: var(--color-map-heading);
  margin: 0;
}

.about-text-block p {
  margin: 0 0 0.8em;
}

.about-text-block p:last-child {
  margin-bottom: 0;
}

.about-text-block--wide {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.about-text-block--wide p {
  margin-bottom: 0.1em;
}

.about-text-block--officially {
  max-width: 100%;
}

.about-text-block--officially p {
  margin-bottom: 0.1em;
}

/* --- Programs: Nursery K3 & Grade 1-6 --- */
.about-programs {
  margin-top: var(--space-2xl);
}

.about-program {
  display: grid;
  grid-template-columns: 0.35fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
  /*margin-bottom: var(--space-lg);*/
}

.about-program__left {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.about-program:nth-child(1) .about-program__left {
  padding-top: 3.1rem;
}

.about-program:nth-child(2) .about-program__left {
  padding-top: 4rem;
}

.about-program__activities {
  width: 100%;
  max-width: 230px;
  height: auto;
  object-fit: contain;
  object-position: left top;
}

.about-program__activities--nursery {
  max-width: 230px;
  transform: scale(0.6);
  transform-origin: left top;
}

.about-program__right {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.about-program__heading {
  max-width: 190px;
  height: auto;
}

.about-program__desc {
  width: 100%;
  max-width: 580px;
  height: auto;
}

.about-program__photo {
  width: 100%;
  height: auto;
  margin-top: var(--space-2xl);
  /*border-radius: var(--radius-md);*/
}

.about-awards-finland-intro {
  text-align: center;
  font-size: 2.8rem;
  margin-top: calc(-1 * var(--space-lg) + var(--space-xs));
}

.about-awards-ranking-text {
  margin-top: 0;
  font-size: 2.2rem;
  text-align: center;
}

.about-awards-ranking-text p {
  margin-bottom: 0em;
}

/* Anvida School is officially: almost same size as "we believe that happy" */
.about-text-img--officially {
  max-width: 100%;
  width: auto;
}

.about-hei-logo {
  display: block;
  width: auto;
  max-width: 280px;
  height: auto;
}

/* Awards & Recognitions */
.about-awards {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Same column ratio as about-two-col so left aligns with HEI logo above */
.about-awards__row {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: var(--space-md);
  align-items: start;
}

/* Ribbon icon: center in left column to align with center of HEI logo */
.about-awards__left {
  display: flex;
  justify-content: center;
}

.about-awards__left .about-awards-icon {
  display: block;
  width: auto;
  max-width: 140px;
  height: auto;
}

.about-awards__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 100%;
}

/* Finland intro line: larger to match design */
.about-awards-finland-intro {
  max-width: 100%;
  width: auto;
  height: auto;
  transform: scale(1);
  transform-origin: left top;
  margin-bottom: var(--space-lg);
}

/* PISA logo: centered in about-awards__right */
.about-awards__pisa-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-sm);
}

.about-pisa {
  display: block;
  width: auto;
  max-width: 120px;
  height: auto;
}

/* Full-width block: same width as left+right, image larger */
.about-awards__full {
  margin-top: var(--space-lg);
  width: 100%;
}

.about-awards-ranking-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* What is unique - wood section, 2 cols × 3 rows */
.about-heading {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--space-xl);
}

.about-heading--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* What is unique: smaller heading, more space below before grid */
.about-heading--unique {
  max-width: 58%;
  margin-bottom: var(--space-3xl);
}

/* Section What is unique: all 6 items same size, larger, centered */
.about-unique-grid {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
  gap: 7rem 8rem;
  max-width: 100%;
  margin: 0 auto;
}

.about-unique-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 96px;
  width: 100%;
  max-width: 440px;
  justify-content: flex-start;
}

.about-unique-icon {
  width: 68px;
  height: 68px;
  object-fit: contain;
  flex-shrink: 0;
}

.about-unique-item .about-text-img {
  margin-bottom: 0;
  width: 312px;
  height: 68px;
  object-fit: contain;
  object-position: left center;
}

/* Why Anvida School - image + text rows */
.about-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem var(--space-3xl);
  justify-items: center;
}

/* All 6 items same size, 15% smaller */
.about-why-item {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  width: 100%;
  max-width: 500px;
  min-height: 190px;
  height: 190px;
}

.about-why-pic {
  width: 190px;
  min-width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.about-why-item .about-text-img {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
  width: 286px;
  max-width: 286px;
  height: 190px;
  max-height: 190px;
  object-fit: contain;
  object-position: left top;
}

.about-section--teachers {
  padding-bottom: var(--space-3xl);
  padding-top: var(--space-xl);
}

.about-section--teachers .about-heading {
  max-width: 45%;
}

.about-teachers-desc {
  max-width: 960px;
  margin: 0 auto var(--space-3xl);
}

.about-teachers-split {
  display: grid;
  grid-template-columns: 75% 30%;
  gap: var(--space-xl);
  align-items: center;
  margin-bottom: var(--space-2xl);
}

.about-teachers-split__right {
  display: flex;
  align-items: center;
}

.about-teachers-caption {
  /*border-left: 3px solid var(--color-panel-border);*/
  /*padding-left: var(--space-lg);*/
  display: block;
  width: auto;
  max-width: 60%;
  height: auto;
  transform: translateY(-25%);
}

.about-teachers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.about-teachers-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.about-teachers-img--main {
  border-radius: var(--radius-xl);
}

/* ---------------------------------------------------------------------------
   Home page
   --------------------------------------------------------------------------- */
.home-main {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
}

.home-section {
  position: relative;
  z-index: 1;
}

.home-section__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
}

/* School section: yellow fill + curves at top/bottom edges */
.home-section--school {
  position: relative;
  background-color: #f2bf50;
  margin-top: 14vw;
  margin-bottom: 17vw;
}

.home-curve {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  max-width: none;
}

.home-curve--head {
  top: 0;
  transform: translateY(-50%);
}

.home-curve--footer {
  bottom: 0;
  transform: translateY(50%);
}

.home-section--school .home-section__inner {
  position: relative;
  z-index: 1;
}

.home-bg-03 {
  background-image: url('../images/home-background sections-03.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

/* Hero */
/* Welcome: heading up 50%; circles & mascot per design */
.home-hero__heading {
  display: block;
  height: auto;
  width: auto;
  max-width: 420px;
  margin-top: -8vw;
  margin-bottom: var(--space-xl);
}

.home-hero__visual {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 420px;
}

.home-hero__circle {
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.02);
  position: absolute;
  object-fit: cover;
}

.home-hero__circle--left {
  width: 360px;
  height: 360px;
  left: 30%;
  top: 40px;
  transform: translateX(-50%);
}

.home-hero__circle--right {
  width: 440px;
  height: 440px;
  left: 92%;
  top: -28%;
  transform: translateX(-50%);
}

.home-hero__avatar {
  position: absolute;
  bottom: -185px;
  right: -240px;
  width: auto;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  animation: avatar-float 3s ease-in-out infinite;
}

@keyframes avatar-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

/* School information */
.home-heading {
  display: block;
  height: auto;
  width: auto;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-lg);
}

.home-heading--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.home-school__text-img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-bottom: var(--space-2xl);
}

.home-school__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.home-photo-rect {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: transparent;
}

.home-photo-rect img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  vertical-align: top;
}

/* Events & Activities */
.home-events__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.home-event-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}

.home-event {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.home-event--right {
  justify-content: flex-end;
}

.home-photo-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Event labels: same size for all (BOOK WEEK, INNOVATIVE WEEK, JUNGLE DAY, etc.) */
.home-event__label {
  height: 48px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

/* Parents / testimonial - sections-03.svg overlay on wood */
.home-section--parents.home-bg-03 {
  background-color: transparent;
}

/* Push Hear from Anvida Parents content down onto sections-03 (cream) background */
.home-section--parents .home-section__inner {
  padding-top: 15.6vw;
}

.home-testimonial {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.home-testimonial__frame {
  flex: 1;
  min-height: 260px;
  background: #ffffff;
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-panel-border);
}

.home-testimonial__arrow {
  border: none;
  background: transparent;
  color: var(--color-accent-blue);
  font-size: 2rem;
  cursor: pointer;
}

.home-testimonial__slides {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-testimonial__img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: auto;
  object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Layout - footer (expanded for visibility; uses footer-* assets only)
   --------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-header-footer-bg);
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  color: var(--color-footer-text);
}

.site-footer__inner {
  max-width: 1000px;
  margin: 0 auto;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.site-footer__block {
  margin: 0;
}

.site-footer__block--contact-social {
  grid-column: span 2;
}

.site-footer__contact-social-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--space-sm) var(--space-lg);
  justify-items: start;
  align-items: center;
}

.site-footer__contact-social-grid .site-footer__icon {
  justify-self: start;
  display: block;
  height: auto;
  width: auto;
  max-width: 242px;
  max-height: 35px;
  object-fit: contain;
}

.site-footer__heading {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--color-footer-text);
  margin: 0 0 var(--space-lg);
}

.site-footer__heading--pill {
  display: inline-block;
  padding: var(--space-md) var(--space-xl);
  background: var(--color-nav-pill-bg);
  color: var(--color-text-dark);
  border-radius: var(--radius-pill);
  font-size: 1.125rem;
  font-weight: bold;
}

/* Address / Contact label: 20% larger than normal icon (36px -> 43px) */
.site-footer__heading-img {
  display: block;
  height: auto;
  width: auto;
  max-width: 170px;
  max-height: 43px;
  margin-bottom: var(--space-sm);
  object-fit: contain;
}

.site-footer__address-img {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.site-footer__text {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.7;
  margin: 0 0 var(--space-md);
  color: var(--color-footer-text);
}

.site-footer__text .site-footer__icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--space-md);
  height: 32px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.site-footer__icons {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.site-footer__icons .site-footer__icon {
  display: block;
  margin-right: 0;
  height: auto;
  width: auto;
  max-width: 240px;
  max-height: 36px;
  object-fit: contain;
}


.footer-wave {
  display: block;
  width: 100%;
  height: 24px;
  background: var(--color-header-footer-bg);
  margin-top: -2px;
  position: relative;
  z-index: 2;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.site-footer__copy {
  font-family: var(--font-body);
  font-size: 1.14rem;
  margin: 0;
  color: var(--color-footer-text);
}

.site-footer__logo {
  margin-top: var(--space-md);
}

.site-footer__logo--bottom {
  margin-top: 0;
}

.site-footer__logo-img {
  height: 47px;
  width: auto;
}

/* ===========================================================================
   RESPONSIVE - Tablet landscape (<1200px)
   =========================================================================== */
@media (max-width: 1200px) {
  .main-content--campus {
    padding-top: 80px;
  }

  .main-content--contact {
    margin-top: 0;
    padding-top: 80px;
  }

  /* Booking row: stack vertically to prevent horizontal overflow on tablet/landscape */
  .contact-booking-row {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .contact-booking-info {
    align-items: flex-start;
    text-align: left;
  }

  /* Match address heading alignment, but booking is visually 10% smaller */
  .contact-heading {
    width: 200px;
    height: auto;
    object-position: left center;
    margin: 0;
  }

  .contact-booking-pill {
    width: 160px;
    height: auto;
    object-position: left center;
    margin: 0;
  }

  /* Hero: prevent circles + bear from overflowing on tablet portrait */
  .home-hero__visual {
    height: 320px;
    overflow: visible;
  }

  .home-hero__circle--left {
    width: 280px;
    height: 280px;
    left: 25%;
    top: 20px;
  }

  .home-hero__circle--right {
    width: 340px;
    height: 340px;
    left: 75%;
    top: -15%;
  }

  .home-hero__avatar {
    max-height: 200px;
    bottom: -140px;
    right: -60px;
  }

  /* About: fix header consistency + reduce gap before Awards */
  .main-content--about .about-section--01 {
    margin-top: -400px;
    padding-top: 400px;
    min-height: 0;
    padding-bottom: 0;
  }

  .main-content--about .about-section--01 .about-section__inner {
    padding-bottom: var(--space-lg);
  }

  /* About: Why Anvida - push heading further below green bush */
  .about-section--why .about-section__inner {
    padding-top: 34vw;
  }

  /* About: ensure page is tall enough to keep scrollbar stable */
  .main-content--about {
    min-height: 100vh;
  }
}

/* ===========================================================================
   RESPONSIVE - Tablet / Mobile Landscape (<1100px)
   =========================================================================== */
@media (max-width: 1100px) {
  .home-hero__avatar {
    right: 0;
    max-height: 200px;
  }

  /* Restrict wood frame height on landscape to prevent excessive vertical cropping of the teacher */
  .about-wood-frame {
    grid-template-rows: 250px;
    gap: var(--space-md);
    padding: var(--space-md);
  }

  /* Ensure the Unique Grid flexes onto smaller tablet resolutions without side-scrolling overflow */
  .about-unique-grid {
    grid-template-columns: minmax(0, 360px) minmax(0, 360px);
    justify-content: center;
    gap: 4rem 2rem;
    padding: 0 var(--space-md);
  }

  .about-unique-item {
    max-width: 100%;
  }

  .about-unique-item .about-text-img {
    width: 100%;
    max-width: 280px;
    height: auto;
  }

  /* Specifically constrain short text images so their font scale doesn't blow up relative to longer texts */
  .about-unique-item .about-unique-text--short {
    max-width: 210px;
  }

  /* Play Based text image requires an aggregated 33% reduction (141px) */
  .about-unique-item .about-unique-text--play-based {
    max-width: 141px;
  }

  /* Strength Based text image scaled down by an additional 2% (total 3%) */
  .about-unique-item .about-unique-text--strength-based {
    max-width: 271px;
  }

  .about-why-grid {
    grid-template-columns: 1fr;
  }

  /* Increase Inspiring Learning text image by 2% on tablet portrait */
  .about-why-item .about-text-img--inspiring-learning {
    width: 292px;
    max-width: 292px;
  }

  .about-section--why.about-bg-03 {
    background-size: 100% auto;
  }

  .about-section--why .about-section__inner {
    padding-top: 28vw;
  }

  /* Awards background: layer a responsive solid yellow gradient over the SVG curve to fit wrapped text dynamically */
  .about-section--awards.about-bg-02 {
    background-color: transparent;
    background-image: url('../images/about-background sections-02.svg'),
      linear-gradient(to bottom, var(--color-header-footer-bg) 0%, var(--color-header-footer-bg) calc(100% - 15vw), transparent calc(100% - 15vw));
    background-repeat: no-repeat;
    background-size: 100% auto, 100% 100%;
    background-position: center bottom, top center;
    padding-bottom: 20vw;
    padding-top: var(--space-2xl);
  }
}

/* ===========================================================================
   RESPONSIVE - Mobile Portrait (<768px)
   =========================================================================== */
@media (max-width: 768px) {

  /* --- Header --- */
  .site-header-bg {
    min-height: 360px;
  }

  .site-header {
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }

  .site-header__logo-img {
    max-height: 72px;
    max-width: 240px;
  }

  .site-nav {
    gap: var(--space-sm);
  }

  .site-nav__img {
    max-height: 36px;
    max-width: 100px;
  }

  .site-header__lang-btn img {
    max-height: 24px;
    max-width: 56px;
  }

  .header-wave {
    min-height: 40px;
  }

  /* --- General layout --- */
  .main-content {
    padding: var(--space-md) var(--space-md) var(--space-xl);
  }

  /* --- Campus page --- */
  .main-content--campus {
    padding: var(--space-md) var(--space-md) 6rem;
  }

  .campus-panel {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    margin-top: 80px;
  }

  .campus-describe__text {
    font-size: 1.54rem;
    font-weight: normal;
  }

  .campus-panel__row {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .campus-deco--traffic {
    top: -135px;
    right: 20px;
    width: 50px;
  }

  .campus-deco--car {
    width: 120px;
    bottom: -16px;
    left: -12px;
  }

  .campus-map__title,
  .contact-map__title {
    font-size: 1.1rem;
  }

  /* Map frames: prevent overflow, reduce aspect-ratio for mobile */
  .campus-map__frame,
  .contact-map__frame {
    aspect-ratio: 4 / 3;
    min-height: 0;
    max-width: 100%;
  }

  .campus-map__frame iframe,
  .contact-map__frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* --- Contact page --- */
  .main-content--contact {
    padding: 0 var(--space-md) var(--space-xl);
    margin-top: 0;
  }

  .contact-panel {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
  }

  .contact-panel__row {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Contact columns: stack vertically, centered */
  .contact-column {
    align-items: center;
  }

  .contact-column--right {
    align-items: center;
  }

  .contact-contact-list {
    max-width: 100%;
    align-items: center;
  }

  .contact-contact-item--full {
    height: auto;
    max-width: 100%;
    max-height: 35px;
  }

  /* Booking row: stack vertically */
  .contact-booking-row {
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--space-md);
  }

  .contact-booking-qr {
    width: 120px;
    height: 120px;
  }

  .contact-booking-info {
    align-items: center;
    text-align: center;
  }

  .contact-booking-pill {
    max-width: 180px;
  }

  .contact-booking-hint-img {
    max-width: 220px;
  }

  .contact-heading {
    max-width: 180px;
    max-height: 50px;
  }

  /* Reset tablet/landscape left-align to center for mobile portrait */
  .contact-heading,
  .contact-booking-pill {
    object-position: center center;
    margin: 0 auto;
  }

  .contact-address-img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }

  /* --- About page --- */
  .main-content--about .about-section--01 {
    margin-top: -360px;
    padding-top: 360px;
  }

  .about-section__inner {
    padding: var(--space-lg) var(--space-md);
  }

  .about-hero-block {
    margin-top: 120px;
  }

  .about-hero-img {
    max-width: 280px;
    right: 10px;
  }

  .about-wood-frame {
    grid-template-columns: 1fr;
    grid-template-rows: 200px 200px;
    border-radius: var(--radius-lg);
  }

  .about-two-col {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .about-hei-logo {
    max-width: 180px;
    margin: 0 auto;
  }

  .about-accredited-img {
    margin: 0 auto;
    width: 70%;
    max-width: 70%;
  }

  /* Programs: Nursery K3 & Grade 1-6 */
  .about-program {
    grid-template-columns: 0.35fr 1fr;
    gap: var(--space-md);
    text-align: left;
  }

  .about-program__left {
    justify-content: flex-end;
    padding-top: 2.2rem;
  }

  .about-program__activities {
    max-width: 180px;
    object-position: left top;
  }

  .about-program__heading {
    max-width: 105px;
    margin: 0;
  }

  .about-program__desc {
    max-width: 100%;
  }

  /* Awards */
  .about-awards__row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    justify-items: center;
    text-align: center;
  }

  .about-awards .about-awards__left .about-awards-icon {
    max-width: 80px;
  }

  .about-awards-finland-intro,
  .about-awards-ranking-text {
    font-size: 1.76rem;
    line-height: 1.4;
  }

  /* What is unique */
  .about-heading--unique {
    max-width: 70%;
  }

  .about-unique-grid {
    grid-template-columns: max-content;
    justify-content: center;
    gap: 1.5rem;
    max-width: 100%;
    padding: 0 var(--space-md);
  }

  .about-unique-item {
    max-width: 100%;
    min-height: auto;
    gap: var(--space-sm);
  }

  .about-unique-icon {
    width: 32px;
    height: 32px;
  }

  .about-unique-item .about-text-img {
    width: auto;
    max-width: calc(100vw - 80px);
    height: 42px;
    object-fit: contain;
    object-position: left center;
  }

  /* Why Anvida - bush uses auto height based on SVG natural aspect (~27vw) */
  .about-section--why.about-bg-03 {
    background-size: 100% auto;
  }

  .about-section--why .about-section__inner {
    padding-top: 24vw;
    padding-bottom: 5rem;
  }

  .about-section--why .about-heading.about-heading--why {
    max-width: 80%;
  }

  .about-why-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-why-item {
    max-width: 100%;
    height: auto;
    min-height: auto;
    flex-direction: column;
    align-items: center;
  }

  .about-why-pic {
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 16/9;
  }

  .about-why-item .about-text-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
  }

  /* Specifically scale down targeted Why Anvida description text images on mobile portrait */
  .about-why-item .about-text-img--personalised-care {
    width: 80%;
    align-self: flex-start;
  }

  /* Reduce Active Learning and Parent Involvement text images by 1% */
  .about-why-item .about-text-img--parent-involvement {
    width: 79%;
    align-self: flex-start;
  }

  /* Specifically scale down Active Learning by another 3% to 76% */
  .about-why-item .about-text-img--active-learning {
    width: 76%;
    align-self: flex-start;
  }

  /* Reduce Inspiring Learning text image by 1% */
  .about-why-item .about-text-img--inspiring-learning {
    width: 99%;
    align-self: flex-start;
  }

  /* Adjust Finland Certified Education text image size by 1% */
  .about-why-item .about-text-img--finland-desc {
    width: 81%;
    align-self: flex-start;
  }

  /* Reduce Play-Based Learning text image specifically by another 3% to 94% on mobile portrait */
  .about-why-item .about-text-img--play-based {
    width: 94%;
    align-self: flex-start;
  }

  /* Our Teachers */
  .about-section--teachers .about-heading {
    max-width: 80%;
  }

  .about-teachers-desc img {
    transform: scale(1.1);
    transform-origin: center top;
    margin-bottom: var(--space-xl);
  }

  .about-teachers-split {
    grid-template-columns: 75% 25%;
    gap: var(--space-md);
  }

  .about-teachers-caption {
    border-left: none;
    padding-left: 0;
    text-align: left;
    margin: 0;
    max-width: 100%;
    transform: translateY(-15%);
  }

  .about-teachers-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* --- Home page --- */
  .home-section__inner {
    padding: var(--space-lg) var(--space-md);
  }

  .home-hero__heading {
    max-width: 260px;
    margin-top: -4vw;
    margin-left: auto;
    margin-right: auto;
  }

  .home-hero__visual {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  .home-hero__circle {
    position: static;
    transform: none;
  }

  .home-hero__circle--left {
    width: 70vw;
    height: 70vw;
    left: auto;
    top: auto;
  }

  .home-hero__circle--right {
    width: 70vw;
    height: 70vw;
    left: auto;
    top: auto;
  }

  .home-hero__avatar {
    max-height: 140px;
    position: static;
    display: block;
    margin: 0 auto;
  }

  .home-section--school .home-section__inner {
    padding: var(--space-lg) var(--space-md);
  }

  .home-school__photos {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .home-heading {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .home-heading--center {
    max-width: 70%;
  }

  .home-event-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .home-event,
  .home-event--right {
    justify-content: center;
  }

  .home-photo-circle {
    width: 100px;
    height: 100px;
  }

  .home-event__label {
    width: 160px;
    height: auto;
    max-height: 36px;
    object-fit: contain;
    object-position: left center;
  }

  .home-section--parents .home-section__inner {
    padding-top: 20vw;
  }

  .home-testimonial {
    flex-direction: row;
    gap: var(--space-sm);
  }

  .home-testimonial__arrow {
    font-size: 1.6rem;
    padding: 0 var(--space-xs);
    flex-shrink: 0;
  }

  .home-testimonial__frame {
    min-height: 180px;
  }

  /* --- Footer --- */
  .site-footer {
    padding: var(--space-md);
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .site-footer__address-img {
    width: 100%;
    max-width: 65%;
  }

  .site-footer__block--contact-social {
    grid-column: span 1;
  }

  .site-footer__contact-social-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
}