/*
 * Site styles (homepage + the inner pages built on the same header, contact
 * band and footer). Desktop (>= 1000px) reproduces the Wix pages at
 * https://www.moral-marty.com/: every section is a fixed-height band with a
 * 980px content grid (.c) whose children are absolutely positioned at the
 * offsets measured from the live page at 1280px. Below 1000px the bands
 * collapse into a stacked layout modelled on Wix's mobile view.
 */

:root {
  --blue: #2e69ff;
  --navy: #1f46aa;
  --nav-blue: #0d63d1;
  --cta-blue: #0069ff;
  --submit: #1a2df3;
  --lime: #bada55;
  --affil-grey: #e3e1e1;
  --apply: #ff5f2e;
  --futura: "Jost", "Futura", "Century Gothic", sans-serif;
  --poppins: "Poppins", sans-serif;
  --raleway: "Raleway", sans-serif;
  --black: "Arial Black", "Archivo Black", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--blue);
  color: #000;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

h1, h2, h3, p, ul, figure, blockquote { margin: 0; }

.skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  background: #fff;
  color: var(--nav-blue);
  font: 600 14px var(--raleway);
}
.skip:focus { top: 8px; }

/* ---------- grid ---------- */

.s { position: relative; }

.c {
  position: relative;
  width: 980px;
  height: 100%;
  margin: 0 auto;
}

.c > *,
.char > *,
.quote,
.quote > *,
.contact-art > *,
.contact-form > *,
.contact-form .f,
.contact-form .f > * {
  position: absolute;
}

.char,
.contact-art,
.contact-form,
.contact-form form { position: static; }

.box {
  width: 1120px;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
}

.cover { object-fit: cover; }

/* ---------- header ---------- */

.s-head { height: 293px; }
/* The header stretches to the viewport: the CCS logo group is pinned to the
   left edge and the nav/CTA/social/login group is pinned to the right edge
   (both offsets measured from the live Wix page and constant across widths),
   so the layout no longer drifts or overlaps away from 1280px. */
.s-head .c { width: 100%; max-width: none; margin: 0; padding: 0; }

/* Logo group on the left. Wix pins the acorns at the very top-left of the
   page and the CCS mark/wordmark just right of them, at a fixed offset from
   the left edge (constant 1280-1920). The wordmark is a two-line lockup
   ("CREATIVE CUSTOM" / "STUDIOS UNLIMITED") that deliberately sits below and
   to the right of the mark, matching Wix; fixed `left` offsets keep it clear
   of both the mark and the right-pinned nav instead of riding through it (the
   old fixed 299px nav offset let the 352px wordmark collide at 1280px). */
.head-acorns { left: 28px; top: 15px; width: 200px; height: 152px; object-fit: cover; }
/* The icon + wordmark are wrapped in a home link. `display: contents` keeps
   the wrapper out of layout so the two imgs stay positioned (desktop) and
   ordered (mobile) exactly as before, while making both clickable. */
.head-logo { display: contents; }
.head-icon { position: absolute; left: 234px; top: 59px; width: 78px; height: 50px; object-fit: cover; }
.head-wordmark { position: absolute; left: 257px; top: 72px; width: 352px; height: 40px; object-fit: cover; }

/* Between the mobile breakpoint (999px) and full desktop (1366px+) there is
   not enough room for the 352px wordmark lockup plus the nav/CTA/social/login
   group (they collided from 1000-1365px). Hide the wordmark in that band and
   keep the icon (still the home link); below 1180px also tighten the nav and
   drop the social icons so the group cannot reach the icon. */
@media (min-width: 1000px) and (max-width: 1365px) {
  .head-wordmark { display: none; }
}
@media (min-width: 1000px) and (max-width: 1180px) {
  .head-right { gap: 10px; }
  .head-nav a { padding: 0 9px; font-size: 13px; letter-spacing: 0.3px; }
  .head-social { display: none; }
}

/* Right-hand control group: nav + CTA + social + login in one right-pinned
   flex row. Offsets and gaps are fluid (clamp/vw) so the group shrinks with
   the viewport and never reaches the left-pinned logo; the old per-element
   fixed `right` values collided with the 352px wordmark below ~1500px. */
.head-right {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  top: 50px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
}

.head-nav {
  display: flex;
  gap: 8px;
}

.head-nav a {
  display: block;
  height: 38px;
  padding: 0 14px;
  border: 1px solid #fff;
  background: var(--nav-blue);
  color: #fff;
  font: 400 14px/36px var(--raleway);
  letter-spacing: 0.7px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.head-nav a[aria-current="page"],
.head-nav a:hover,
.head-nav a:focus-visible {
  background: #fff;
  border-color: var(--nav-blue);
  color: var(--nav-blue);
}

.head-cta {
  width: 128px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 3px solid;
  border-image: linear-gradient(90deg, var(--cta-blue), #c7d2ea) 1;
  color: var(--cta-blue);
  font: 800 16px "Nunito Sans", "Avenir", sans-serif;
  text-decoration: none;
}
.head-cta:hover { background: #f1f5ff; }

.head-social { width: 40px; height: 40px; }
.head-social img { width: 40px; height: 40px; }

.head-login {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font: 400 17px/24px var(--raleway);
  text-decoration: none;
}
.head-login:hover span { text-decoration: underline; }

.head-burger { display: none; }

/* ---------- hero ---------- */

.s-hero { height: 735px; }
/* Wix lays the hero out across the full viewport: the city is centered and
   the circle/title are anchored to the right edge (measured offsets are
   constant at 1280-1920). Using the full width keeps the composition from
   drifting off-centre on wide screens. */
.s-hero .c { width: 100%; max-width: none; margin: 0; padding: 0; }

.hero-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 814px;
  overflow: hidden;
}

.hero-bg img {
  position: absolute;
  top: 5px;
  left: 50%;
  width: max(1358px, 106.1%);
  height: 864px;
  transform: translateX(-50%);
  object-fit: cover;
}

.hero-corner {
  right: 0;
  left: auto;
  top: -1px;
  width: max(418px, 34vw);
  height: 56px;
  fill: var(--blue);
  transform: scaleX(-1);
}

.hero-circle { right: 530px; left: auto; top: -19px; width: 657px; height: 643px; }

.hero-title { right: 284px; left: auto; top: 248px; }
.hero-title img { width: 1047px; height: 572px; object-fit: cover; }

.hero-curve {
  right: 570px;
  left: auto;
  top: 632px;
  width: 1120px;
  height: 103px;
  object-fit: cover;
  object-position: top;
}

/* ---------- about ---------- */

.s-about { height: 1217px; }

.about-poster { left: 0; top: 163px; width: 461px; height: 600px; object-fit: cover; }

.about-intro { left: 486px; top: 232px; width: 480px; }

.about-intro h2 {
  color: var(--navy);
  font: 500 25px/35px var(--futura);
  white-space: nowrap;
}

.about-intro p {
  margin-top: 4px;
  font: 400 25px/35px var(--futura);
}

.about-title {
  left: 0;
  right: 0;
  top: 819px;
  color: var(--navy);
  font: 700 50px/71px var(--poppins);
  letter-spacing: 0.5px;
  text-align: center;
}

.about-text {
  left: 3px;
  top: 918px;
  width: 956px;
  font: 500 20px/28px var(--futura);
  letter-spacing: -0.15px;
}

/* ---------- gallery ---------- */

.s-gallery { height: 617px; }

.gallery {
  left: -1px;
  top: 60px;
  width: 981px;
  height: 617px;
  z-index: 2;
  overflow: hidden;
  background: #2f2e2e;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.slide.is-active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption { display: none; }

.gallery-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  padding: 10px 100px 10px 10px;
  background: rgba(46, 105, 255, 0.7);
  opacity: 0;
  transition: opacity 0.3s;
}

.gallery-caption { font: 400 16px/22.4px var(--futura); }

.gallery-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font: 12px Arial, sans-serif;
}

.gallery-arrow {
  position: absolute;
  top: 274px;
  width: 45px;
  height: 70px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.gallery-arrow.prev { left: 20px; }
.gallery-arrow.next { right: 20px; }

.gallery:hover .gallery-panel,
.gallery:hover .gallery-arrow,
.gallery:focus-within .gallery-panel,
.gallery:focus-within .gallery-arrow { opacity: 1; }

@media (hover: none) {
  .gallery-arrow { opacity: 1; }
}

/* ---------- testimonials ---------- */

.s-testi { height: 466px; }

.testi-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 106px;
  height: 360px;
  background: #000;
}

.testi-bg { position: absolute; inset: 0; overflow: hidden; }
.testi-bg img { width: 100%; height: 100%; object-fit: cover; }

.quote {
  background: #fff;
  border-radius: 27px / 23px;
}

.quote blockquote {
  color: #000;
  font: 700 20px "Montserrat", Arial, sans-serif;
  text-shadow: rgba(0, 0, 0, 0.4) 0 4px 5px;
}

.quote figcaption {
  color: var(--lime);
  font: 700 22px/30.8px var(--poppins);
  white-space: nowrap;
}

.q1 { left: -53px; top: 99px; width: 322px; height: 104px; }
.q1 blockquote { left: 16px; top: 29px; width: 300px; line-height: 28px; }
.q1 figcaption { left: 84px; top: 105px; text-shadow: rgba(0, 0, 0, 0.3) 0 5px 0; }

.q2 { left: 375px; top: 94px; width: 299px; height: 104px; }
.q2 blockquote { left: 28px; top: 31px; width: 265px; line-height: 29.4px; }
.q2 figcaption { left: 106px; top: 104px; text-shadow: rgba(0, 0, 0, 0.4) 0 4px 5px; }

.q3 { left: 793px; top: 94px; width: 316px; height: 111px; }
.q3 blockquote { left: 12px; top: 19px; width: 304px; line-height: 23.8px; }
.q3 blockquote span { font-size: 21px; }
.q3 figcaption { left: 43px; top: 111px; }

/* ---------- scholarships ---------- */

.s-schol { height: 567px; }

.schol-title {
  left: 28px;
  top: 76px;
  color: #fff;
  font: 700 60px/84px var(--poppins);
  white-space: nowrap;
}

.schol-text {
  left: 68px;
  top: 196px;
  width: 900px;
  color: #fff;
  font: 700 17px/23.8px var(--raleway);
}
.schol-text ul { padding-left: 31px; }

.schol-logo img { width: 100%; height: 100%; object-fit: cover; }
.l-fl { left: -33px; top: 394px; width: 128px; height: 128px; }
.l-ut { left: 123px; top: 416px; width: 302px; height: 68px; }
.l-la { left: 470px; top: 422px; width: 303px; height: 56px; }
.l-wy { left: 793px; top: 394px; width: 187px; height: 106px; }

/* ---------- pricing ---------- */

.s-pricing { height: 700px; }
/* The checkout form is absolutely placed at top:606 and is ~210px tall, so
   when it opens it used to spill past the 700px band and get covered by the
   characters section. Grow the band only while the form is open. */
.s-pricing:has(#mm-pricing.is-open) { height: 900px; }

.pricing-title {
  left: 0;
  right: 0;
  top: 62px;
  color: #fff;
  font: 700 50px/70px var(--poppins);
  text-align: center;
}

.pricing-sub {
  left: 0;
  right: 0;
  top: 142px;
  color: #fff;
  font: 600 17px/24px var(--raleway);
  text-align: center;
}

.pricing-grid {
  position: absolute;
  left: 0;
  top: 200px;
  width: 980px;
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.plan {
  position: relative;
  flex: 1 1 0;
  min-height: 380px;
  padding: 32px 24px;
  background: #fff;
  border-radius: 14px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.18) 0 10px 24px;
}

.plan.is-featured {
  transform: translateY(-14px);
  border: 4px solid var(--lime);
}

.plan-badge {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--navy);
  font: 700 12px/1 var(--raleway);
  white-space: nowrap;
}

.plan h3 {
  color: var(--navy);
  font: 700 26px/34px var(--poppins);
}

.plan-price { margin-top: 10px; color: var(--blue); }
.plan-price .amount { font: 700 44px/1 var(--poppins); }
.plan-price .per { font: 600 16px/1 var(--raleway); color: #666; }

.plan-blurb {
  margin: 16px 0 24px;
  min-height: 66px;
  color: #333;
  font: 600 15px/22px var(--raleway);
}

.plan-cta {
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--cta-blue);
  color: #fff;
  font: 700 16px/1 var(--raleway);
  cursor: pointer;
}
.plan-cta:hover { background: var(--submit); }
.plan-cta:disabled { opacity: 0.6; cursor: default; }

.pricing-checkout { position: absolute; left: 0; top: 606px; width: 980px; }
.pricing-checkout.mm-hidden,
#mm-pricing-form.mm-hidden { display: none; }

#mm-pricing-form {
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.18) 0 10px 24px;
}
.pricing-checkout-title { font: 700 16px/22px var(--poppins); color: var(--navy); margin-bottom: 10px; }
#mm-pricing-form label { display: block; font: 600 14px/20px var(--raleway); color: #333; }
#mm-pricing-form input {
  width: 100%;
  height: 40px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font: 500 15px var(--raleway);
}
.pricing-checkout-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.pricing-cancel {
  border: 0;
  background: none;
  color: #555;
  font: 600 14px var(--raleway);
  cursor: pointer;
}
#mm-pricing-msg { margin-top: 12px; text-align: center; font: 600 14px/20px var(--raleway); color: #fff; }
#mm-pricing-msg.error { color: #ffd0d0; }
#mm-pricing-msg.ok { color: var(--lime); }

/* ---------- characters ---------- */

.s-chars { height: 785px; }

.chars-wave { position: absolute; inset: 0; overflow: hidden; }
.chars-wave img {
  position: absolute;
  left: -220px;
  top: 0;
  width: 1344px;
  height: 785px;
  object-fit: cover;
}

.chars-title {
  left: 0;
  right: 0;
  top: 43px;
  color: var(--navy);
  font: 700 50px/70px var(--poppins);
  text-align: center;
}

.char-ring {
  width: 250px;
  height: 250px;
  border: 9px solid var(--blue);
  border-radius: 50%;
}

.char h3 {
  top: 457px;
  width: 300px;
  color: var(--navy);
  font: 500 25px/33px var(--futura);
  text-align: center;
}

.char p { font: 500 17px/27.2px var(--futura); letter-spacing: -0.2px; }

.ch-marty .char-ring { left: 16px; top: 167px; background: #ffc8b8; }
.ch-marty .char-img { left: 39px; top: 143px; width: 182px; height: 274px; }
.ch-marty h3 { left: -5px; }
.ch-marty p { left: 16px; top: 496px; width: 254px; }

.ch-al .char-ring { left: 366px; top: 121px; background: #b9cdff; }
.ch-al .char-img { left: 208px; top: -80px; width: 386px; height: 564px; }
.ch-al h3 { left: 335px; }
.ch-al p { left: 356px; top: 529px; width: 262px; }

.ch-rw .char-ring { left: 703px; top: 187px; background: #e8a6f7; }
/* Right (angel) and Wrong (demon) are two separate figures. Wix overlaps them
   into one pair, but on this build they read as a collision, so they are
   scaled down and flanked around the ring with a clear gap (both keep their
   ~0.667 aspect ratio, so no distortion). */
.ch-rw .img-right { left: 848px; top: 249px; width: 260px; height: 390px; }
.ch-rw .img-wrong { left: 548px; top: 220px; width: 260px; height: 390px; }
.ch-rw h3 { left: 690px; }
.ch-rw p { left: 710px; top: 496px; width: 254px; }

/* ---------- quote + videos ---------- */

/* The 98px gap above is where the white curve fades the characters box out. */
.s-quote { height: 1050px; margin-top: 98px; }

.quote-curve {
  position: absolute;
  left: 0;
  top: -101px;
  width: 100%;
  height: 111px;
  object-fit: cover;
  object-position: bottom;
}

.quote-title {
  left: 0;
  right: 0;
  top: 85px;
  color: #fff;
  font: 700 50px/71px var(--poppins);
  text-align: center;
  white-space: nowrap;
}

.video { left: 0; width: 980px; height: 382px; border: 0; }
.v1 { top: 209px; }
.v2 { top: 631px; }

/* ---------- unique ---------- */

.s-unique { height: 482px; background: var(--navy); }

.unique-bg { position: absolute; inset: 0; overflow: hidden; }
.unique-bg img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 900px;
  object-fit: cover;
  will-change: transform;
}

.unique-title {
  left: 0;
  top: 93px;
  color: var(--navy);
  font: 700 40px/56px var(--poppins);
  white-space: nowrap;
}

.unique-box {
  left: 0;
  top: 194px;
  width: 1037px;
  height: 196px;
  padding: 25px 50px 0 29px;
  background: #fff;
}
.unique-box p { font: 600 17px/23.8px var(--poppins); }

/* ---------- privacy ---------- */

.s-privacy { height: 870px; }

.privacy-title {
  left: 0;
  right: 0;
  top: 113px;
  color: var(--navy);
  font: 700 50px/71px var(--poppins);
  text-align: center;
}

.privacy-box {
  left: 0;
  top: 231px;
  width: 980px;
  height: 476px;
  padding: 30px 6px 0 11px;
  background: var(--blue);
  color: #fff;
  font: 400 17px/23.8px var(--raleway);
}
.privacy-box .privacy-date { font: 700 20px/28px var(--raleway); }
.privacy-box h3 { font: 700 20px/28px var(--poppins); }

.privacy-curve {
  left: -70px;
  top: 763px;
  width: 1120px;
  height: 108px;
  object-fit: cover;
  object-position: top;
}

/* ---------- inner pages: white text card (privacy policy, log in) ---------- */

.s-doc .c { height: auto; }

.s-doc .doc-box {
  position: relative;
  min-height: 954px;
  padding: 85px 152px 150px 145px;
  border-radius: 60px 60px 0 0;
  background: #fff;
  color: #000;
  font: 400 17px/23.8px var(--raleway);
}

.doc-title {
  margin-bottom: 47px;
  color: var(--blue);
  font: 700 60px/72px var(--poppins);
}

.doc-body .doc-date { font: 700 20px/28px var(--raleway); }
.doc-body h2 { font: 700 20px/28px var(--poppins); }

.doc-acorns {
  position: absolute;
  right: 37px;
  bottom: -4px;
  width: 212px;
  height: 199px;
  pointer-events: none;
}

/* log in / create account */

.s-auth .auth-box { min-height: 700px; }
#mm-auth { max-width: 420px; }

.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}
.auth-tabs button {
  flex: 1;
  height: 40px;
  border: 1px solid var(--nav-blue);
  background: #fff;
  color: var(--nav-blue);
  font: 400 15px/38px var(--raleway);
  letter-spacing: 0.7px;
  cursor: pointer;
}
.auth-tabs button.active { background: var(--nav-blue); color: #fff; }

#mm-form label { display: block; margin-bottom: 18px; }
#mm-form label span {
  display: block;
  margin-bottom: 6px;
  font: italic 700 14px/14px Georgia, serif;
}
#mm-form input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 6px 10px;
  border: 0;
  border-bottom: 1px solid var(--submit);
  border-radius: 0;
  background: #e8eeff;
  color: #000;
  font: 16px var(--raleway);
}
#mm-form input:focus { outline: 2px solid var(--blue); }

.auth-submit {
  width: 160px;
  height: 46px;
  margin-top: 6px;
  border: 0;
  background: var(--submit);
  color: #fff;
  font: italic 700 15px/21px Georgia, serif;
  cursor: pointer;
}
.auth-submit:hover { background: #3346ff; }

#mm-msg { min-height: 24px; margin-top: 16px; font-weight: 600; }
#mm-msg.error { color: #c62828; }
#mm-msg.ok { color: #1b7a3a; }
.mm-hidden { display: none !important; }

/* ---------- affiliates ---------- */

.s-affil { padding: 40px; background: var(--affil-grey); }
.affil-box { background: var(--blue); }

.affil-grid {
  position: relative;
  width: 1200px;
  max-width: 100%;
  height: 830px;
  margin: 0 auto;
}

.affil-copy {
  position: absolute;
  left: 61px;
  top: 128px;
  width: 488px;
  z-index: 1;
  color: #000;
  font: 400 17px/23.8px var(--raleway);
}
.affil-copy h1 {
  margin-bottom: 25px;
  color: #fffffe;
  font: 400 44px/57px var(--black);
}
.affil-copy h2 {
  margin-top: 15px;
  color: #fff;
  font: 400 35px/39px var(--black);
}
.affil-copy p,
.affil-copy ul,
.affil-copy ol { margin: 0; }
.affil-copy ul,
.affil-copy ol { padding-left: 31px; }

.affil-copy .affil-apply { margin-top: 24px; font: 400 26px/36.4px var(--black); }
.affil-apply a { color: var(--apply); text-decoration: none; }
.affil-apply a:hover,
.affil-apply a:focus-visible { text-decoration: underline; }

.affil-chars,
.affil-acorns { position: absolute; pointer-events: none; }
.affil-chars { left: 480px; top: 17px; width: 645px; height: 624px; }
.affil-acorns { left: 903px; top: 636px; width: 241px; height: 180px; }

/* ---------- contact ---------- */

.s-contact { height: 646px; }

.contact-art img { object-fit: cover; pointer-events: none; }
.ca-al { left: 601px; top: -62px; width: 455px; height: 687px; }
.ca-marty { left: 674px; top: 77px; width: 285px; height: 428px; }
.ca-logo { left: 522px; top: 252px; width: 655px; height: 450px; }
.ca-wrong { left: 745px; top: 88px; width: 270px; height: 406px; }
.ca-right { left: 608px; top: 119px; width: 336px; height: 450px; }

.contact-form h2 {
  left: 10px;
  top: 72px;
  color: #fff;
  font: italic 500 30px/35px var(--futura);
  letter-spacing: 2.5px;
}

.contact-form .f { position: absolute; }
.contact-form label {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-left: 6px;
  color: #fff;
  font: italic 700 14px/14px Georgia, serif;
}
.contact-form .req { color: var(--submit); }

.contact-form input,
.contact-form textarea {
  position: absolute;
  left: 0;
  top: 23px;
  width: 150px;
  height: 26px;
  padding: 3px 6px;
  border: 0;
  border-bottom: 1px solid var(--submit);
  border-radius: 0;
  background: rgba(255, 218, 228, 0.5);
  color: #000;
  font: 14px Georgia, serif;
  outline-offset: 0;
}
.contact-form textarea { width: 330px; height: 79px; resize: none; }

.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid #fff; }

.f-first { left: 10px; top: 155px; width: 150px; }
.f-first input { height: 29px; }
.f-last { left: 196px; top: 155px; width: 150px; }
.f-email { left: 10px; top: 243px; width: 150px; }
.f-subject { left: 196px; top: 243px; width: 150px; }
.f-message { left: 16px; top: 328px; width: 330px; }
.f-message label { padding-left: 10px; }

.f-submit {
  position: absolute;
  left: 16px;
  top: 460px;
  width: 120px;
  height: 46px;
  border: 0;
  background: var(--submit);
  color: #fff;
  font: italic 700 15px/21px Georgia, serif;
  cursor: pointer;
}
.f-submit:hover { background: #3346ff; }

#mm-contact-msg {
  left: 16px;
  top: 520px;
  width: 400px;
  color: #fff;
  font: italic 700 14px/20px Georgia, serif;
}
#mm-contact-msg.error { color: #ffe066; }

/* ---------- footer ---------- */

.s-foot { height: 82px; background: #000; }

.foot-logo { left: 136px; top: 9px; width: 52px; height: 52px; object-fit: cover; }

.foot-text {
  left: 199px;
  top: 24px;
  color: #dbdbdb;
  font: 700 17px/22px "Sarabun", sans-serif;
  white-space: nowrap;
}

/* =================================================================
   Narrow screens: stacked layout, modelled on Wix's mobile view.
   ================================================================= */

@media (max-width: 999px) {
  .s,
  .box { height: auto; }

  .c {
    width: auto;
    max-width: 640px;
    padding: 0 16px;
  }

  .c > *,
  .char > *,
  .quote,
  .quote > *,
  .contact-art > *,
  .contact-form > *,
  .contact-form .f,
  .contact-form .f > *,
  .f-submit {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
  }

  /* header */
  .s-head .c {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 10px;
    padding: 18px 16px 14px;
  }
  .s-head .c::before { content: ""; order: 5; flex-basis: 100%; }
  .head-acorns { display: none; }
  /* Collapse the desktop right-group so its children (nav, CTA, social,
     login) become direct flex items of .c again and keep their orders. */
  .head-right { display: contents; }
  .head-icon { order: 1; position: static; width: 46px; height: 30px; transform: none; }
  .head-wordmark { order: 2; position: static; width: auto; height: 23px; margin-left: 0; transform: none; }
  .head-burger {
    order: 3;
    display: block;
    margin-left: auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .head-burger span,
  .head-burger span::before,
  .head-burger span::after {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
    position: relative;
  }
  .head-burger span::before,
  .head-burger span::after { content: ""; position: absolute; left: 0; }
  .head-burger span::before { top: -8px; }
  .head-burger span::after { top: 8px; }
  .head-nav {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
  }
  .nav-open .head-nav { display: flex; }
  .head-social,
  .head-social img { width: 32px; height: 32px; }
  .head-fb { order: 6; }
  .head-ig { order: 6; }
  .head-cta { order: 7; width: 156px; height: 42px; margin-left: 4px; }
  .head-login { order: 8; margin-left: auto; }

  /* hero — on phones Wix shows the city scene filling the whole hero band
     with the circle overlapping it and the title lockup at the bottom of the
     frame. The old build clipped the 1600x900 city into a sliver (buildings
     read as a flat edge, no "picture"). Cover-fill the band with the city so
     the skyline stays behind the circle, overlap the circle on it, and pull
     the title down so there is no dead blue gap between circle and title. */
  .s-hero { position: relative; aspect-ratio: 3 / 4; height: auto; overflow: hidden; background: var(--blue); }
  .s-hero .c { position: absolute; inset: 0; max-width: none; width: auto; padding: 0; }
  .hero-bg { position: absolute; inset: 0; overflow: hidden; }
  .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; transform: none; }
  .hero-corner,
  .hero-curve { display: none; }
  .hero-circle {
    position: absolute;
    left: 50%;
    top: 3%;
    width: 72%;
    height: auto;
    transform: translateX(-50%);
  }
  .hero-title { position: absolute; left: 50%; top: auto; bottom: 4%; width: 84%; transform: translateX(-50%); }
  .hero-title img { width: 100%; height: auto; }

  /* about */
  .s-about .c { padding-top: 24px; padding-bottom: 32px; }
  .about-poster { width: 100%; height: auto; max-width: 461px; margin: 0 auto 24px; }
  .about-intro h2 { font-size: 20px; line-height: 30px; }
  .about-intro p { font-size: 16px; line-height: 22px; margin-top: 12px; }
  .about-title { font-size: 32px; line-height: 44px; margin: 40px 0 16px; }
  .about-text { font-size: 16px; line-height: 23px; }

  /* gallery */
  .s-gallery .c { padding-top: 24px; padding-bottom: 24px; }
  .gallery { position: relative; width: 100%; height: auto; aspect-ratio: 981 / 617; }
  .gallery-panel { position: absolute; }
  .gallery-arrow { position: absolute; top: calc(50% - 35px); }

  /* testimonials */
  .testi-strip { position: relative; top: 0; height: auto; }
  .s-testi .c { display: grid; gap: 34px; padding-top: 24px; padding-bottom: 48px; }
  .quote { position: relative; padding: 14px 18px; }
  .s-testi .quote blockquote { width: auto; font-size: 16px; line-height: 22px; }
  .quote blockquote span { font-size: inherit; }
  .s-testi .quote figcaption {
    position: absolute;
    left: auto;
    top: auto;
    right: 8px;
    bottom: -30px;
    font-size: 18px;
  }

  /* scholarships */
  .s-schol .c { padding-top: 24px; padding-bottom: 32px; text-align: center; }
  .schol-title { white-space: normal; font-size: 30px; line-height: 38px; }
  .schol-text { margin: 24px 0; font-size: 14px; line-height: 19.6px; text-align: left; }
  .schol-text ul { padding-left: 24px; }
  .schol-logo { display: block; margin: 0 auto 16px; }
  .l-fl { width: 88px; height: 88px; }
  .l-ut { width: 210px; height: 47px; }
  .l-la { width: 210px; height: 39px; }
  .l-wy { width: 130px; height: 74px; }

  /* pricing */
  .s-pricing .c { padding-top: 32px; padding-bottom: 40px; }
  .pricing-title { font-size: 30px; line-height: 40px; }
  .pricing-sub { font-size: 15px; line-height: 21px; margin-top: 10px; }
  .pricing-grid { display: grid; gap: 20px; margin-top: 28px; }
  .plan { min-height: 0; padding: 28px 20px; }
  .plan.is-featured { transform: none; }
  .plan-blurb { min-height: 0; }
  .pricing-checkout { margin-top: 24px; }
  #mm-pricing-form { max-width: none; padding: 16px; }

  /* characters */
  .s-chars .c { padding-top: 24px; padding-bottom: 32px; }
  .chars-wave { display: none; }
  .chars-title { font-size: 30px; line-height: 40px; margin-bottom: 16px; }
  .char {
    position: relative;
    display: block;
    max-width: 280px;
    margin: 0 auto 32px;
    padding-top: 180px;
  }
  .s-chars .char-ring,
  .s-chars .char-img { position: absolute; top: 0; pointer-events: none; }
  .s-chars .char-ring { left: calc(50% - 90px); width: 180px; height: 180px; border-width: 7px; }
  .s-chars .ch-marty .char-img { left: calc(50% - 73px); top: -17px; width: 131px; height: 197px; }
  .s-chars .ch-al .char-img { left: calc(50% - 204px); top: -145px; width: 278px; height: 406px; }
  .s-chars .ch-rw .img-right { left: calc(50% - 11px); top: 45px; width: 229px; height: 340px; }
  .s-chars .ch-rw .img-wrong { left: calc(50% - 201px); top: 11px; width: 248px; height: 373px; }
  .s-chars .char h3 { position: relative; left: auto; top: auto; width: auto; margin: 16px 0 8px; font-size: 18px; line-height: 24px; text-align: center; }
  .s-chars .char p { position: relative; left: auto; top: auto; width: auto; font-size: 15px; line-height: 25px; letter-spacing: 0; }

  /* quote + videos */
  .s-quote { margin-top: 0; }
  .quote-curve { display: none; }
  .s-quote .c { display: grid; gap: 24px; padding-top: 40px; padding-bottom: 40px; }
  .quote-title { white-space: normal; font-size: 28px; line-height: 38px; }
  .video { width: 100%; height: auto; aspect-ratio: 16 / 9; }

  /* unique */
  .unique-bg img { height: 100%; transform: none !important; }
  .s-unique .c { padding-top: 40px; padding-bottom: 40px; }
  .unique-title { white-space: normal; font-size: 24px; line-height: 34px; margin-bottom: 16px; }
  .unique-box { padding: 16px; }
  .unique-box p { font-size: 14px; line-height: 20px; }

  /* privacy */
  .s-privacy .c { padding-top: 32px; padding-bottom: 32px; }
  .privacy-title { font-size: 28px; line-height: 40px; margin-bottom: 20px; }
  .privacy-box { padding: 20px 10px; }
  .privacy-curve { display: none; }

  /* inner pages */
  .s-doc .c { padding: 0 12px; max-width: none; }
  .s-doc .doc-box {
    min-height: 0;
    padding: 40px 20px 150px;
    border-radius: 32px 32px 0 0;
  }
  .doc-title { font-size: 36px; line-height: 44px; margin-bottom: 24px; }
  .doc-acorns { right: 12px; width: 132px; height: auto; }
  .s-auth .auth-box { min-height: 0; }
  #mm-auth { max-width: none; }

  .s-affil { padding: 16px; }
  .affil-grid { height: auto; padding: 36px 20px 24px; }
  .affil-copy { position: static; width: auto; }
  .affil-copy h1 { font-size: 32px; line-height: 40px; margin-bottom: 18px; }
  .affil-copy h2 { font-size: 26px; line-height: 32px; margin-top: 18px; }
  .affil-copy .affil-apply { font-size: 20px; line-height: 28px; }
  .affil-chars { position: static; width: 100%; max-width: 420px; height: auto; margin: 24px auto 0; }
  .affil-acorns { position: static; width: 150px; height: auto; margin: -8px 0 0 auto; }

  /* contact */
  .s-contact .c { display: flex; flex-direction: column; padding-top: 48px; }
  .contact-form { order: 1; max-width: 360px; margin: 0 auto; width: 100%; }
  .contact-form h2 { text-align: center; margin-bottom: 16px; }
  .contact-form .f { margin-bottom: 14px; }
  .contact-form label { display: block; margin-bottom: 8px; padding-left: 6px; }
  .contact-form .f input,
  .contact-form .f textarea { width: 100%; height: 36px; }
  .contact-form .f textarea { height: 90px; }
  .f-submit { display: block; width: 144px; height: 42px; margin: 8px auto 0; }
  #mm-contact-msg { margin-top: 12px; text-align: center; width: auto; }
  .contact-art { order: 2; position: relative; display: block; height: 0; padding-bottom: 72%; margin-top: 24px; }
  .contact-art img { position: absolute; }
  .ca-al { left: 13%; top: -9%; width: 70%; height: auto; }
  .ca-marty { left: 24%; top: 12%; width: 43%; height: auto; }
  .ca-logo { left: 0; top: 38%; width: 100%; height: auto; }
  .ca-wrong { left: 34%; top: 13%; width: 41%; height: auto; }
  .ca-right { left: 13%; top: 18%; width: 51%; height: auto; }

  /* footer */
  .s-foot .c { display: grid; justify-items: center; gap: 8px; padding-top: 14px; padding-bottom: 14px; }
  .foot-logo { width: 44px; height: 44px; }
  .foot-text { white-space: normal; text-align: center; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .slide,
  .gallery-panel,
  .gallery-arrow { transition: none; }
}