/*
Theme Name: Alphabet Puppets
Theme URI: https://alphabetpuppets.com.au
Author: Alphabet Puppets
Description: Custom theme for Alphabet Puppets, Rose Bay, Sydney. On activation it creates the Home, About, Prices and Contact pages, imports the photos and videos into the Media Library, sets Home as the front page and builds the main menu.
Version: 1.4.0
Requires at least: 6.3
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: alphabet-puppets
*/

/* ---------- Tokens ---------- */
:root {
  --red: #E3261C;
  --red-deep: #A8150D;
  --blue: #1F5FA8;
  --blue-deep: #123F75;
  --sky: #5B9BEA;
  --yellow: #FFC530;
  --pink: #F48C84;
  --green: #5DBB46;
  --timber: #C9925A;
  --timber-dark: #8E5E30;
  --stage: #161616;
  --ink: #13294B;
  --text: #24304A;
  --muted: #5A6478;
  --paper: #FFFFFF;
  --wash: #EEF4FB;

  --font-display: "Bagel Fat One", "Secular One", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", "Secular One", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1120px;
  --pad-x: max(var(--gutter), calc((100% - var(--max)) / 2));
  --section-y: clamp(28px, 3.2vw, 40px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: 0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.25rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
p { margin: 0 0 1em; max-width: 64ch; }
.screen-reader-text, .ap-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
  clip: auto; width: auto; height: auto; z-index: 100; top: 8px; left: 8px;
  background: var(--yellow); color: var(--ink); padding: 8px 16px; border-radius: 8px;
}

/* ---------- Header ---------- */
.ap-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 32px;
  padding: 18px var(--pad-x);
  background: var(--paper);
  border-bottom: 1px solid #E3E8F0;
}
.ap-logo {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.85rem);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.ap-logo .a1 { color: var(--blue); }
.ap-logo .a2 { color: var(--red); }
.ap-logo:hover .a1 { color: var(--blue-deep); }
.ap-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px 26px; flex-wrap: wrap; }
.ap-nav a {
  display: inline-block;
  padding: 6px 0;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.ap-nav a:hover { color: var(--red); }
.ap-nav a[aria-current="page"],
.ap-nav .current-menu-item > a { color: var(--red); border-bottom-color: var(--red); }

/* ---------- Content shell ---------- */
.ap-content > * { margin: 0; }
.ap-content figure { margin: 0; }
/* Fallback if WordPress still adds its classic-theme group wrapper (functions.php removes it). */
.ap-content .wp-block-group__inner-container { display: contents; }
.ap-content .ap-section {
  padding: var(--section-y) var(--pad-x);
  margin: 0;
}
.ap-content .ap-section.is-wash { background: var(--wash); }
/* two white sections in a row share one gap instead of doubling it */
.ap-content .ap-section:not(.is-wash):not(.ap-cta):not(.ap-goal) + .ap-section:not(.is-wash):not(.ap-cta):not(.ap-goal) { padding-top: 0; }
.ap-content .ap-section > *,
.ap-content .ap-split > *,
.ap-content .ap-grid > * { margin-block: 0; }
.ap-content .ap-section > * + * { margin-top: 1.25rem; }
.ap-lede { font-size: clamp(1.2rem, 2vw, 1.4rem); color: var(--text); }

/* Two-column image + text */
.ap-content .ap-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.ap-content .ap-split.is-reversed > :first-child { order: 2; }
.ap-split__text > * + * { margin-top: 1rem; }
.ap-split__text > * { margin-bottom: 0; }
.ap-photo img { border-radius: 22px; width: 100%; }
.ap-content .ap-photo.is-portrait { max-width: 400px; width: 100%; justify-self: center; }
.ap-photo figcaption { margin-top: 10px; font-size: 0.95rem; color: var(--muted); }

/* ---------- Buttons ---------- */
.ap-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }
.ap-content .wp-block-button .wp-block-button__link {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  padding: 15px 28px;
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.ap-content .ap-btn-primary .wp-block-button__link {
  background: var(--red); color: #fff; box-shadow: 0 5px 0 var(--red-deep);
}
.ap-content .ap-btn-secondary .wp-block-button__link {
  background: var(--blue); color: #fff; box-shadow: 0 5px 0 var(--blue-deep);
}
.ap-content .ap-btn-ghost .wp-block-button__link {
  background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7);
}
.ap-content .wp-block-button .wp-block-button__link:hover { transform: translateY(2px); }
.ap-content .ap-btn-primary .wp-block-button__link:hover { box-shadow: 0 3px 0 var(--red-deep); }
.ap-content .ap-btn-secondary .wp-block-button__link:hover { box-shadow: 0 3px 0 var(--blue-deep); }
.ap-content .ap-btn-ghost .wp-block-button__link:hover { box-shadow: inset 0 0 0 2px #fff; color: #fff; }
.ap-content .wp-block-button .wp-block-button__link:active { transform: translateY(5px); box-shadow: none; }

/* ---------- Hero: the puppet stage ---------- */
.ap-content .ap-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin: 0;
  padding: 38px var(--pad-x) clamp(56px, 7vw, 96px);
  background: var(--stage);
  color: #fff;
  overflow: hidden;
}
/* the timber controller bar the letters hang from */
.ap-content .ap-hero::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 24px; left: var(--gutter); right: var(--gutter);
  height: 14px;
  border-radius: 7px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 38px, rgba(110,62,20,.18) 38px 40px, rgba(255,255,255,0) 40px 91px),
    linear-gradient(180deg, #E2B07A 0%, var(--timber) 45%, var(--timber-dark) 100%);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.ap-content .ap-hero > * { margin: 0; position: relative; }
.ap-content .ap-hero__text {
  z-index: 2;
  /* column runs from the bar to the bottom so the strings always reach the bar */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* strings are clipped where they meet the bar */
  clip-path: inset(0 -100vw -100vw -100vw);
  padding-top: clamp(76px, 9vw, 110px);
}
.ap-content .ap-hero__text > * { margin-block: 0; }
.ap-content .ap-hero .ap-strung {
  color: #fff;
  font-size: clamp(3.1rem, 7.6vw, 6.4rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin: 0;
  isolation: isolate;
  text-wrap: balance;
}
.ap-content .ap-hero .ap-hero__sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  color: #F3EEE4;
  margin-top: clamp(22px, 3vw, 34px);
  max-width: 24ch;
}
.ap-content .ap-hero .wp-block-buttons { margin-top: 32px; }
.ap-content .ap-hero__media { z-index: 1; }
.ap-content .ap-hero__media > * { margin: 0; }
.ap-content .ap-hero__media .ap-hero__loop { margin-top: 18px; }
.ap-content .ap-hero__loop video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  background: #000;
}
.ap-content .ap-hero__photo img {
  width: 100%;
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 46%, #000 66%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 62% at 50% 46%, #000 66%, transparent 100%);
}
.ap-content .ap-hero__photo figcaption {
  text-align: center; margin-top: 4px; font-size: 0.95rem; color: #A9A9A9;
}
.ap-hero :focus-visible { outline-color: var(--yellow); }

/* letters on strings (built by strung.js) */
.ap-strung .ap-w { display: inline-block; white-space: nowrap; }
.ap-strung .ap-l {
  display: inline-block;
  position: relative;
  /* earlier letters sit in front, so strings from lower lines pass behind them */
  z-index: calc(200 - var(--i, 0));
  rotate: var(--tilt, 0deg);
  transform-origin: 50% -60px;
  text-shadow: 0 5px 0 rgba(0,0,0,.45);
  transition: translate 0.25s cubic-bezier(.3,1.6,.5,1);
}
.ap-strung .ap-l::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 70%;
  width: 1.5px;
  height: 120vh;
  background: linear-gradient(to top, rgba(255,255,255,.75), rgba(255,255,255,.35));
}
.ap-strung .ap-l:hover { translate: 0 -10px; }
.ap-strung .c0 { color: var(--red); }
.ap-strung .c1 { color: var(--yellow); }
.ap-strung .c2 { color: var(--sky); }
.ap-strung .c3 { color: #fff; }
.ap-strung .c4 { color: var(--pink); }
.ap-strung .c5 { color: var(--green); }

.js .ap-strung:not(.is-strung) { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .ap-strung.is-strung .ap-l {
    animation: ap-lower 1.9s cubic-bezier(.25,.8,.35,1) both;
    animation-delay: calc(var(--i) * 55ms + 150ms);
  }
}
@keyframes ap-lower {
  0%   { transform: translateY(-140%) rotate(0deg); }
  38%  { transform: translateY(0) rotate(7deg); }
  58%  { transform: translateY(0) rotate(-4.5deg); }
  76%  { transform: translateY(0) rotate(2deg); }
  90%  { transform: translateY(0) rotate(-0.8deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ---------- Video ---------- */
.ap-content .ap-videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: 2.25rem;
}
.ap-content .ap-videos > * { margin: 0; }
.ap-video h3 { margin-bottom: 14px; }
.ap-content .ap-video .wp-block-embed { margin: 0; }
.ap-content .ap-video .wp-block-embed .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--stage);
  border-radius: 18px;
}
/* replaces WordPress's padding-based aspect ratio with the one above */
.ap-content .ap-video .wp-block-embed .wp-block-embed__wrapper::before { display: none; }
.ap-content .ap-video .wp-block-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.ap-video.is-english h3 { color: var(--blue); }
.ap-video.is-hebrew h3 { color: var(--red); }

/* Vertical YouTube Short beside text */
.ap-content .ap-split > .ap-short { margin: 0; width: 100%; max-width: 340px; justify-self: center; }
.ap-content .ap-short .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--stage);
  border-radius: 22px;
}
.ap-content .ap-short .wp-block-embed__wrapper::before { display: none; }
.ap-content .ap-short iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Gallery ---------- */
.ap-content .ap-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: auto;
  gap: clamp(14px, 2vw, 24px);
  margin-top: 2.25rem;
  align-items: start;
}
.ap-content .ap-gallery > * { margin: 0; }
.ap-gallery img { width: 100%; border-radius: 18px; object-fit: cover; }
.ap-gallery .is-wide img { aspect-ratio: 4 / 3; }
.ap-gallery .is-tall img { aspect-ratio: 9 / 16; }
.ap-gallery figcaption { margin-top: 8px; font-size: 0.98rem; color: var(--muted); }

/* ---------- Call to action band ---------- */
.ap-content .ap-cta {
  background: var(--yellow);
  text-align: center;
}
.ap-content .ap-cta h2 { margin-inline: auto; max-width: 20ch; }
.ap-content .ap-cta p { margin-inline: auto; font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.45; max-width: 46ch; }
.ap-content .ap-cta .wp-block-buttons { justify-content: center; }

/* ---------- Page intro ---------- */
.ap-content .ap-intro h1 { margin-bottom: 0; }

/* ---------- About ---------- */
.ap-content .ap-dream {
  margin: 0;
  padding: 0;
  border: 0;
}
.ap-content .ap-dream p {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  line-height: 1.25;
  color: var(--blue);
  max-width: 30ch;
  margin: 0;
  text-wrap: pretty;
}
.ap-content .ap-dream cite { display: block; margin-top: 14px; font-style: normal; font-weight: 700; color: var(--muted); }
.ap-content .ap-goal {
  background: var(--red);
  color: #fff;
}
.ap-content .ap-goal h2 { color: #fff; }
.ap-content .ap-goal p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.25;
  max-width: 30ch;
  color: #fff;
}

/* ---------- Prices ---------- */
.ap-content .ap-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.ap-content .ap-prices > * { margin: 0; }
.ap-content .ap-set {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  padding: clamp(26px, 3.5vw, 40px);
  color: #fff;
}
.ap-content .ap-set > * { position: relative; z-index: 1; margin-block: 0; }
.ap-content .ap-set > * + * { margin-top: 1rem; }
.ap-content .ap-set.is-english { background: var(--blue); }
.ap-content .ap-set.is-hebrew { background: var(--red); }
.ap-content .ap-set::after {
  position: absolute; z-index: 0;
  right: -0.06em; top: -0.18em;
  font-family: var(--font-display);
  font-size: 13rem; line-height: 1;
  color: rgba(255,255,255,.13);
  pointer-events: none;
}
.ap-content .ap-set.is-english::after { content: "A"; }
.ap-content .ap-set.is-hebrew::after { content: "\05D0"; font-family: "Secular One", var(--font-display); }
.ap-content .ap-set h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.3rem); }
.ap-content .ap-price {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 3.6rem);
  line-height: 1;
  margin: 0;
}
.ap-content .ap-price .ap-cur { font-size: 0.42em; vertical-align: 0.9em; margin-right: 6px; }
.ap-content .ap-set ul { list-style: none; margin: 0; padding: 0; }
.ap-content .ap-set li {
  position: relative;
  padding: 10px 0 10px 30px;
  border-top: 1px solid rgba(255,255,255,.25);
}
.ap-content .ap-set li::before {
  content: "";
  position: absolute; left: 2px; top: 1.05em;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--yellow);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.18);
}
.ap-content .ap-addon {
  background: var(--yellow);
  color: var(--ink);
  border-radius: 18px;
  padding: 22px 24px;
}
.ap-content .ap-set .ap-addon { margin-top: 1.5rem; }
.ap-content .ap-addon > * { margin: 0; }
.ap-content .ap-addon > * + * { margin-top: 8px; }
.ap-content .ap-addon h3 { color: var(--ink); font-size: 1.35rem; }
.ap-content .ap-addon .ap-sofit {
  font-family: "Secular One", var(--font-display);
  font-size: 2rem; letter-spacing: 0.25em; line-height: 1.2; color: var(--red);
}
.ap-content .ap-addon p { max-width: none; }

/* ---------- Contact ---------- */
.ap-content .ap-contact { text-align: center; }
.ap-content .ap-contact p { margin-inline: auto; }
.ap-content .ap-section.ap-contact { padding-bottom: 28px; }
.ap-content .ap-section.ap-contact h1 { margin-bottom: 0; }
.ap-content .ap-section.ap-contact > .ap-lede { margin-top: 6px; }
.ap-content .ap-section.ap-contact > .ap-sign {
  position: relative;
  margin: 74px auto 0;
  max-width: 760px;
  padding: 22px clamp(20px, 3vw, 32px) clamp(20px, 3vw, 28px);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 2px 0 #E1E6EE, 0 18px 40px -18px rgba(19,41,75,.35);
}
/* the sign hangs from the timber bar on two strings */
.ap-content .ap-sign::before {
  content: "";
  position: absolute;
  left: 18%; right: 18%; top: -50px;
  height: 50px;
  border-left: 2px solid #B9C2D0; border-right: 2px solid #B9C2D0;
}
.ap-content .ap-sign::after {
  content: "";
  position: absolute;
  left: 10%; right: 10%; top: -62px;
  height: 14px; border-radius: 7px;
  background: linear-gradient(180deg, #E2B07A 0%, var(--timber) 45%, var(--timber-dark) 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
.ap-content .ap-sign > * { margin: 0; }
.ap-content .ap-sign > * + * { margin-top: 2px; }
.ap-content .ap-sign h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
.ap-content .ap-sign .ap-where { color: var(--muted); font-size: 1.15rem; margin-inline: auto; }
.ap-content .ap-sign .ap-email { margin-top: 14px; }
.ap-content .ap-sign .ap-email img { margin: 0 auto; width: 100%; max-width: 620px; }

/* ---------- FAQ ---------- */
:root { interpolate-size: allow-keywords; }
.ap-content .ap-section.ap-faq { padding-top: 28px; }
.ap-content .ap-faq h2 { text-align: center; margin-inline: auto; max-width: 22ch; }
.ap-content .ap-faq .ap-faq__list {
  max-width: 760px;
  margin: 1rem auto 0;
  display: grid;
  gap: 12px;
}
.ap-content .ap-faq__list > * { margin: 0; }
.ap-content .ap-faq details {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 0 #DCE5F1;
}
.ap-content .ap-faq summary {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  padding: 20px 72px 20px 24px;
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
  line-height: 1.35;
  color: var(--ink);
  border-radius: 16px;
}
.ap-content .ap-faq summary::-webkit-details-marker { display: none; }
.ap-content .ap-faq summary:hover { color: var(--red); }
/* round red "+" that turns into "×" when the answer is open */
.ap-content .ap-faq summary::before,
.ap-content .ap-faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}
.ap-content .ap-faq summary::before {
  width: 34px; height: 34px; margin-right: -2px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 3px 0 var(--red-deep);
}
.ap-content .ap-faq summary::after {
  width: 30px; height: 30px;
  background:
    linear-gradient(#fff, #fff) center / 14px 3px no-repeat,
    linear-gradient(#fff, #fff) center / 3px 14px no-repeat;
  transition: transform 0.25s ease;
}
.ap-content .ap-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.ap-content .ap-faq details[open] summary::before { background: var(--blue); box-shadow: 0 3px 0 var(--blue-deep); }
.ap-content .ap-faq summary:focus-visible { outline-offset: -3px; }
.ap-content .ap-faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}
.ap-content .ap-faq details[open]::details-content { block-size: auto; }
.ap-content .ap-faq details > :not(summary) { margin: 0; padding-inline: 24px; max-width: none; }
.ap-content .ap-faq details > :not(summary) + :not(summary) { margin-top: 10px; }
.ap-content .ap-faq details > :last-child { padding-bottom: 22px; }
.ap-content .ap-faq details ul { padding-left: 46px; }
.ap-content .ap-faq details li + li { margin-top: 4px; }

/* ---------- Footer ---------- */
.ap-footer {
  background: var(--ink);
  color: #DCE3EE;
  padding: 48px var(--pad-x) 40px;
  display: flex; flex-wrap: wrap; gap: 20px 48px;
  justify-content: space-between; align-items: flex-start;
  font-size: 1rem;
}
.ap-footer .ap-logo .a1 { color: #8DB8F0; }
.ap-footer .ap-logo .a2 { color: #FF7A70; }
.ap-footer p { margin: 10px 0 0; }
.ap-footer .ap-nav a { color: #fff; font-size: 1rem; }
.ap-footer .ap-nav a:hover { color: var(--yellow); }
.ap-footer .ap-nav a[aria-current="page"],
.ap-footer .ap-nav .current-menu-item > a { color: var(--yellow); border-bottom-color: var(--yellow); }
.ap-footer :focus-visible { outline-color: var(--yellow); }
.ap-footer .ap-copy { flex-basis: 100%; color: #9AA7BC; font-size: 0.92rem; margin: 0; }

/* Generic pages created later in WordPress */
.ap-page-title { padding: var(--section-y) var(--pad-x) 0; margin: 0; }
.ap-content > .wp-block-heading,
.ap-content > p,
.ap-content > ul,
.ap-content > .wp-block-image { padding-inline: var(--pad-x); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .ap-content .ap-hero { grid-template-columns: 1fr; padding-bottom: 48px; }
  .ap-content .ap-hero__media { max-width: 520px; width: 100%; justify-self: center; }
  .ap-content .ap-hero .ap-strung { font-size: clamp(3.1rem, 17vw, 6rem); }
  .ap-content .ap-split { grid-template-columns: 1fr; }
  .ap-content .ap-split.is-reversed > :first-child { order: 0; }
  .ap-content .ap-gallery { grid-template-columns: 1fr 1fr; }
  .ap-content .ap-gallery .is-wide { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .ap-content .ap-videos,
  .ap-content .ap-prices { grid-template-columns: 1fr; }
  .ap-header { justify-content: center; text-align: center; }
  .ap-nav ul { justify-content: center; gap: 4px 22px; }
  .ap-content .ap-set::after { font-size: 10rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}