/* Marketing pages (home and service pages). Loads after base.css. Holds the shared pieces:
   teal hero, section heads, offer cards, why grid, info cards, tour teaser and scroll reveals.
   Motion is deliberately light: a slow drift on the hero photo, gentle reveals, hover-to-play scenes. */

.sec-head { margin-bottom: 2.4rem; }
.sec-head .big { margin-bottom: 0; }
/* Section titles stay a step below the hero headline. */
.home .big { font-size: clamp(2.6rem, 4.8vw, 4.2rem); }

/* ---------- Hero ---------- */
.intro {
  position: relative;
  padding: calc(12px + var(--nav-h) + 48px) 0 130px; /* room for the stamp that hangs off the photo */
  color: var(--paper);
  /* A soft glow behind the photo, sinking to deep teal at the edges. */
  background:
    radial-gradient(ellipse 60% 75% at 74% 42%, #0b5d68 0%, rgba(0, 71, 80, 0) 70%),
    radial-gradient(ellipse 120% 90% at 50% 40%, var(--teal) 45%, var(--teal-deep) 100%);
  overflow: hidden;
}
/* Risograph halftone dots, densest in the bottom-left corner and fading out. */
.intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(152, 213, 212, .22) 1.7px, transparent 2.2px) 0 0 / 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 0% 100%, #000 0%, transparent 100%);
          mask-image: radial-gradient(ellipse 55% 70% at 0% 100%, #000 0%, transparent 100%);
}
/* The brand's print grit, flipped to light specks so it reads on teal. */
.intro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../assets/tex/grit.webp") center / 900px auto;
  filter: invert(1); opacity: .16;
}
.intro__grid { position: relative; z-index: 1; }
/* On teal, outlines and shadows switch to light brand colors so the shapes still read. */
.intro .btn { box-shadow: 4px 4px 0 var(--sun); }
.intro .btn:hover { box-shadow: 6px 6px 0 var(--sun); }
.intro .btn:active { box-shadow: 1px 1px 0 var(--sun); }
.intro .btn--paper { border-color: var(--paper); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.intro__eyebrow { display: inline-block; background: var(--sun); color: var(--teal); padding: .5em .9em; border-radius: 6px; }
/* The small lime tag above each headline lives inside the H1, so search engines read the keywords. */
.intro__title .intro__eyebrow { display: table; margin-bottom: 1rem; font-family: var(--body); font-variation-settings: normal; line-height: 1.3; }
.intro__title { font-size: clamp(3rem, 5.6vw, 5.2rem); margin: 0 0 1.4rem; }
.intro__title em { display: block; white-space: nowrap; color: var(--sun); }
.intro__lede { font-size: 1.15rem; font-weight: 700; max-width: 40ch; margin: 0 0 1.8rem; }
.intro__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.intro__map { position: relative; margin: 0; justify-self: end; width: min(100%, 440px); }
.intro__frame {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 3px solid var(--paper); border-radius: 14px; box-shadow: 10px 10px 0 var(--orange);
  transform: rotate(2deg);
  background: var(--sea);
}
.intro__frame > img { width: 100%; height: 100%; object-fit: cover; animation: drift 26s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.08) translate(0, -1%); } }
.intro__badge { position: absolute; width: 120px; left: -34px; bottom: -38px; transform: rotate(-10deg); transition: transform .6s ease; }
.intro__badge:hover { transform: rotate(350deg); }


/* ---------- Services ---------- */
.services-sec { position: relative; padding: 90px 0 120px; }
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.offer {
  display: flex; flex-direction: column;
  background: var(--white); border: 2px solid var(--teal); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow);
  scroll-margin-top: calc(var(--nav-h) + 40px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.offer:hover { transform: translate(-3px, -3px); box-shadow: 10px 10px 0 var(--teal); }
.offer__media { position: relative; aspect-ratio: 16 / 10; border-bottom: 2px solid var(--teal); background: var(--sea); }
.offer__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer__icon {
  position: absolute; left: 16px; bottom: -34px; width: 76px;
  transition: transform .35s cubic-bezier(.5, 1.6, .4, 1);
}
.offer:hover .offer__icon { transform: rotate(-10deg) scale(1.06); }
.offer__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 46px 26px 26px; }
.offer h3 { font-size: 2.3rem; margin-bottom: .6rem; }
.offer p { margin: 0 0 1rem; }
.offer .prices { align-self: stretch; margin-bottom: .8rem; }
.offer .prices b { font-size: 1.15rem; }
.offer .btn { margin-top: auto; }
.offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: auto; }
.offer__actions .btn { margin-top: 0; }
.offer__more { font-weight: 900; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); text-decoration: none; }
.offer--night .offer__more { color: var(--sun); }
.offer__more:hover { text-decoration: underline; text-underline-offset: 4px; }
.offer--night { background: var(--teal); color: var(--paper); border-color: var(--teal); box-shadow: 6px 6px 0 var(--sun); }
.offer--night:hover { box-shadow: 10px 10px 0 var(--sun); }
.offer--night em { color: var(--sun); }
.offer--night .prices li::before { border-color: rgba(251, 247, 236, .5); }
.offer--night .btn { border-color: var(--paper); box-shadow: 4px 4px 0 var(--paper); }

/* ---------- Why ---------- */
.why { position: relative; background: var(--teal); color: var(--paper); padding: 110px 0; }
.why .tear--top {
  background:
    linear-gradient(135deg, transparent 49%, var(--teal) 50%) 0 0 / 24px 24px repeat-x,
    linear-gradient(225deg, transparent 49%, var(--teal) 50%) 12px 0 / 24px 24px repeat-x;
}
.why em { color: var(--sun); }
.why__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why__grid li {
  padding: 26px; border: 2px solid var(--sea); border-radius: 12px;
  transition: background .25s ease, transform .25s ease;
}
.why__grid li:hover { background: var(--teal-deep); transform: rotate(-.8deg); }
.why__grid b {
  display: flex; align-items: baseline; height: 4.2rem;
  font-family: var(--display); font-weight: 900; font-size: 4.2rem; line-height: 1;
  font-variation-settings: "SOFT" 100, "opsz" 144; color: var(--sun);
}
.why__grid b small { font-size: .45em; margin-left: .08em; }
.why__grid b img { height: .85em; align-self: center; }
.why__grid h3 { font-size: 1.6rem; margin: .7rem 0 .5rem; }
.why__grid p { margin: 0; opacity: .9; }

/* ---------- Good to know ---------- */
.know { padding: 110px 0 60px; }
.know__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: start; }
.know__card {
  position: relative; padding: 30px 30px 26px;
  background: var(--white); border: 2px solid var(--teal); border-radius: 10px; box-shadow: var(--shadow);
  transform: rotate(-1deg);
}
.know__card--tilt { transform: rotate(.8deg); background: var(--sun); }
.know__card h2 { font-size: clamp(2.2rem, 3.6vw, 3rem); margin-bottom: 1.2rem; }

/* ---------- Tour teaser ---------- */
.teaser { padding: 60px 0 120px; }
.teaser__card {
  position: relative; display: block; overflow: hidden; min-height: 460px;
  border: 3px solid var(--teal); border-radius: 16px; box-shadow: 10px 10px 0 var(--orange);
  text-decoration: none; color: var(--paper); background: var(--teal);
}
.teaser__card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.teaser__card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 60, 70, .92) 0%, rgba(0, 60, 70, .7) 38%, rgba(0, 60, 70, 0) 70%);
}
.teaser__card:hover video { transform: scale(1.04); }
.teaser__copy { position: relative; z-index: 1; max-width: 460px; padding: 56px 48px; }
.teaser__copy h2 { font-size: clamp(2.6rem, 5vw, 4.4rem); margin-bottom: 1rem; }
.teaser__copy em { color: var(--sun); }
.teaser__copy p { font-weight: 700; font-size: 1.08rem; margin: 0 0 1.6rem; }
.teaser .btn { border-color: var(--paper); box-shadow: 4px 4px 0 var(--paper); }

/* ---------- Free trial day ---------- */
/* A clip-out coupon on a light blue band, shared by the homepage and the Daycare page. */
.trial { position: relative; background: var(--sea); padding: 90px 0; }
.trial .tear--top {
  background:
    linear-gradient(135deg, transparent 49%, var(--sea) 50%) 0 0 / 24px 24px repeat-x,
    linear-gradient(225deg, transparent 49%, var(--sea) 50%) 12px 0 / 24px 24px repeat-x;
}
.trial__ticket {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center;
  padding: 40px 44px; background: var(--paper);
  border: 3px dashed var(--teal); border-radius: 18px; box-shadow: 10px 10px 0 var(--teal);
}
.js .trial__ticket.reveal.is-in { transform: rotate(-.6deg); }
.trial__stamp {
  width: 150px; height: 150px; flex: none;
  display: grid; place-content: center; text-align: center;
  background: var(--orange); color: var(--paper);
  border-radius: 50%; box-shadow: 0 0 0 6px var(--paper), 0 0 0 9px var(--orange);
  transform: rotate(-12deg);
  transition: transform .5s cubic-bezier(.4, 1.6, .5, 1);
}
.trial__ticket:hover .trial__stamp { transform: rotate(6deg) scale(1.05); }
.trial__stamp span { font-weight: 900; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.trial__stamp b { font-family: var(--display); font-weight: 900; font-size: 2.9rem; line-height: .95; font-variation-settings: "SOFT" 100, "opsz" 144; }
.trial h2 { font-size: clamp(2.2rem, 3.8vw, 3.4rem); margin-bottom: .9rem; }
.trial h2 em { white-space: nowrap; }
.trial__copy > p:not(.eyebrow) { margin: 0; max-width: 58ch; }
.trial__checks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2rem 0 0; padding: 0; }
.trial__checks li {
  padding: .35em .85em .35em 2em; position: relative;
  background: var(--white); border: 2px solid var(--teal); border-radius: 999px;
  font-weight: 900; font-size: .82rem;
}
.trial__checks li::before {
  content: ""; position: absolute; left: .7em; top: 50%; width: .8em; height: .45em; margin-top: -.35em;
  border-left: 3px solid var(--orange); border-bottom: 3px solid var(--orange); transform: rotate(-45deg);
}
.trial__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.trial__call { font-weight: 700; font-size: .92rem; text-underline-offset: 3px; }

/* "First day free" sticker on hero photos. */
.intro__sticker {
  position: absolute; z-index: 2; top: -26px; right: -22px;
  width: 112px; height: 112px; display: grid; place-content: center; text-align: center;
  background: var(--orange); color: var(--paper); text-decoration: none;
  border: 3px solid var(--paper); border-radius: 50%; box-shadow: 4px 4px 0 var(--sun);
  transform: rotate(12deg); transition: transform .4s cubic-bezier(.4, 1.6, .5, 1);
}
.intro__sticker:hover { transform: rotate(-6deg) scale(1.08); }
.intro__sticker span { font-weight: 900; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.intro__sticker b { font-family: var(--display); font-weight: 900; font-size: 1.9rem; line-height: 1; font-variation-settings: "SOFT" 100, "opsz" 144; }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .know__card.reveal.is-in { transform: rotate(-1deg); }
.js .know__card--tilt.reveal.is-in { transform: rotate(.8deg); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .trial__ticket { grid-template-columns: auto 1fr; }
  .trial__cta { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
  .intro__grid { grid-template-columns: 1fr; gap: 48px; }
  .intro__map { width: min(100%, 420px); }
  .offers { grid-template-columns: 1fr; max-width: 620px; }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .trial { padding: 64px 0; }
  .trial__ticket { grid-template-columns: 1fr; gap: 22px; padding: 30px 22px 26px; box-shadow: 6px 6px 0 var(--teal); }
  .js .trial__ticket.reveal.is-in { transform: none; }
  .trial__stamp { width: 112px; height: 112px; }
  .trial__stamp b { font-size: 2.2rem; }
  .trial__cta { flex-direction: column; align-items: flex-start; }
  .intro__sticker { width: 92px; height: 92px; top: -20px; right: -8px; }
  .intro__sticker b { font-size: 1.55rem; }
  .intro { padding: calc(8px + var(--nav-h) + 28px) 0 96px; }
  .intro__eyebrow { font-size: .64rem; letter-spacing: .06em; }
  .intro__title { font-size: 3.1rem; }
  .intro__lede { font-size: 1.02rem; }
  .intro__frame { box-shadow: 6px 6px 0 var(--orange); }
  .intro__badge { width: 84px; left: -10px; bottom: -26px; }

  .services-sec, .why { padding: 80px 0; }
  .why__grid { grid-template-columns: 1fr; }
  .why__grid li { padding: 20px 22px; }
  .why__grid b { font-size: 3.2rem; height: 3.2rem; }
  .know { padding: 80px 0 40px; }
  .know__grid { grid-template-columns: 1fr; }
  .know__card, .js .know__card.reveal.is-in, .js .know__card--tilt.reveal.is-in { transform: none; padding: 24px 22px 20px; }
  .teaser { padding: 40px 0 80px; }
  .teaser__card { min-height: 520px; display: flex; align-items: flex-end; }
  .teaser__card::after { background: linear-gradient(0deg, rgba(0, 60, 70, .95) 0%, rgba(0, 60, 70, .75) 45%, rgba(0, 60, 70, 0) 75%); }
  .teaser__copy { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}