/* =========================================================
   TRIVIA Mall — project identity (Direction A "Dynamic Strokes")
   Magenta #ad2c7e · Orange #e5722c · Yellow #fbae17 · Black · Cream #f5efe5
   ========================================================= */
:root {
  --tv-magenta: #ad2c7e;
  --tv-orange: #e5722c;
  --tv-orange-2: #f77d41;
  --tv-yellow: #fbae17;
  --tv-black: #0b0b0b;
  --tv-cream: #f5efe5;
  --tv-cream-2: #ece3d4;
  --tv-ink: #3d3a36;
  --tv-line: rgba(11, 11, 11, .12);
  --tv-grad: linear-gradient(135deg, #ad2c7e 0%, #ce5e4f 40%, #e5722c 62%, #fbae17 100%);
  --tv-font: "Readex Pro", system-ui, sans-serif;
  --tv-max: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='%23ffffff'%3E%3Crect x='6' y='6' width='52' height='12'/%3E%3Cpolygon points='24,30 40,18 40,58 24,58'/%3E%3C/g%3E%3C/svg%3E");
  --t-pattern-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='%23e5722c'%3E%3Crect x='6' y='6' width='52' height='12'/%3E%3Cpolygon points='24,30 40,18 40,58 24,58'/%3E%3C/g%3E%3C/svg%3E");
}

body.trivia { background: var(--tv-cream); }
.tv-main { font-family: var(--tv-font); color: var(--tv-black); }
.tv-main .en { font-family: inherit; }
:where(.tv-main) img { max-width: 100%; display: block; }
:where(.tv-main) a { color: inherit; text-decoration: none; }
:where(.tv-main) h1, :where(.tv-main) h2, :where(.tv-main) h3, :where(.tv-main) h4 { margin: 0; line-height: 1.25; letter-spacing: 0; }
:where(.tv-main) p { margin: 0 0 1em; }
.tv-wrap { width: min(var(--tv-max), 100% - 48px); margin-inline: auto; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.tv-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-weight: 600; font-size: 15px;
  border: 0; cursor: pointer; font-family: inherit; transition: transform .25s, background .25s, color .25s;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.tv-btn svg { width: 18px; height: 18px; transition: transform .25s; }
.tv-btn:hover svg { transform: translateX(4px); }
.tv-btn-black { background: var(--tv-black); color: #fff; }
.tv-btn-black:hover { background: var(--tv-magenta); }
.tv-btn-white { background: #fff; color: var(--tv-black); }
.tv-btn-white:hover { background: var(--tv-yellow); }
.tv-btn-grad { background: var(--tv-grad); color: #fff; }
.tv-btn-grad:hover { filter: brightness(1.08); }

/* ---------- Hero ---------- */
.tv-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; color: #fff; overflow: hidden; }
.tv-hero-panel { position: relative; background: var(--tv-grad); display: flex; align-items: center; padding: 150px 0 80px; isolation: isolate; }
.tv-hero-panel::before { content: ""; position: absolute; inset: 0; background: var(--t-pattern) 0 0 / 64px 64px; opacity: .08; z-index: -1; }
.tv-hero-copy { width: min(560px, 100% - 48px); margin-inline: auto; }
.tv-hero-copy .stack { width: min(300px, 70%); height: auto; margin-bottom: 30px; }
.tv-tagline-en { font-size: 13px; letter-spacing: .34em; font-weight: 500; text-transform: uppercase; display: flex; align-items: center; gap: 14px; justify-content: flex-start; }
.tv-tagline-en i { width: 6px; height: 6px; background: currentColor; display: inline-block; transform: rotate(45deg); }
.tv-hero h1 { font-size: clamp(40px, 5.4vw, 76px); font-weight: 700; margin: 22px 0 18px; line-height: 1.15; }
.tv-hero p { font-size: clamp(16px, 1.4vw, 19px); opacity: .92; max-width: 46ch; margin-bottom: 34px; }
.tv-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.tv-hero-media { position: relative; }
.tv-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tv-hero-media::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 90px; background: var(--tv-cream); clip-path: polygon(0 0, 100% 0, 0 100%); opacity: 0; }
.tv-hero-chip {
  position: absolute; inset-inline-end: 28px; bottom: 28px; background: var(--tv-black); color: #fff; padding: 18px 22px; font-size: 14px; max-width: 280px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.tv-hero-chip b { color: var(--tv-yellow); font-size: 22px; display: block; }

/* ---------- Stats strip ---------- */
.tv-strip { background: var(--tv-black); color: #fff; }
.tv-strip .tv-wrap { display: grid; grid-template-columns: repeat(5, 1fr); }
.tv-strip div.s { padding: 38px 22px; border-inline-start: 1px solid rgba(255, 255, 255, .12); }
.tv-strip div.s:first-child { border-inline-start: 0; padding-inline-start: 0; }
.tv-strip b { font-size: clamp(28px, 3vw, 42px); font-weight: 700; display: block; line-height: 1; }
.tv-strip div.s:nth-child(5n+1) b { color: var(--tv-yellow); }
.tv-strip div.s:nth-child(5n+2) b { color: var(--tv-orange-2); }
.tv-strip div.s:nth-child(5n+3) b { color: #e2599f; }
.tv-strip div.s:nth-child(5n+4) b { color: var(--tv-yellow); }
.tv-strip div.s:nth-child(5n+5) b { color: var(--tv-orange-2); }
.tv-strip span { font-size: 14px; opacity: .72; margin-top: 10px; display: block; }

/* ---------- Sections ---------- */
.tv-section { padding: clamp(80px, 10vw, 140px) 0; position: relative; }
.tv-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--tv-magenta); direction: ltr; }
.tv-kicker::before { content: ""; width: 16px; height: 16px; background: var(--t-pattern-o) center / 100% 100%; }
.tv-h2 { font-size: clamp(32px, 4.2vw, 58px); font-weight: 700; margin: 14px 0 22px; max-width: 16ch; }
.tv-lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--tv-ink); max-width: 58ch; }
.tv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 56px; }

/* About */
.tv-about { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.tv-about-art { position: relative; aspect-ratio: 1; background: var(--tv-magenta); overflow: hidden; display: grid; place-items: center; }
.tv-about-art .bigT { width: 48%; height: auto; }
.tv-about-art img.photo { position: absolute; inset-inline-end: 0; bottom: 0; width: 58%; height: 52%; object-fit: cover; }
.tv-about-art .stamp { position: absolute; inset-inline-start: 24px; top: 24px; color: #fff; font-size: 13px; letter-spacing: .24em; direction: ltr; }
.tv-points { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 0; }
.tv-points li { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--tv-line); font-size: 15.5px; }
.tv-points li b { font-weight: 600; }
.tv-points li span { color: var(--tv-ink); }

/* Components */
.tv-comp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.tv-card { position: relative; padding: 46px 38px 50px; color: #fff; min-height: 420px; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.tv-card::after { content: ""; position: absolute; inset-inline-end: -30px; bottom: -40px; width: 180px; height: 180px; background: var(--t-pattern) center / 100% 100%; opacity: .14; z-index: -1; transition: transform .6s var(--ease); }
.tv-card:hover::after { transform: rotate(-12deg) scale(1.1); }
.tv-card.m { background: var(--tv-magenta); }
.tv-card.o { background: var(--tv-orange); }
.tv-card.y { background: var(--tv-yellow); color: var(--tv-black); }
.tv-card.y::after { filter: invert(1); }
.tv-card .en { font-size: 13px; letter-spacing: .3em; font-weight: 600; text-align: start; opacity: .85; }
.tv-card h3 { font-size: 34px; margin: 22px 0 14px; }
.tv-card p { opacity: .92; font-size: 15.5px; }
.tv-card ul { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tv-card li { font-size: 13.5px; padding: 6px 14px; border: 1px solid currentColor; border-radius: 100px; opacity: .95; }

.tv-extras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.tv-extra { background: #fff; padding: 30px 26px; border-top: 4px solid var(--tv-magenta); }
.tv-extra:nth-child(2) { border-color: var(--tv-orange); }
.tv-extra:nth-child(3) { border-color: var(--tv-yellow); }
.tv-extra:nth-child(4) { border-color: var(--tv-black); }
.tv-extra svg { width: 36px; height: 36px; color: var(--tv-magenta); }
.tv-extra h4 { font-size: 19px; margin: 16px 0 8px; }
.tv-extra p { color: var(--tv-ink); font-size: 14.5px; margin: 0; }

/* Kids */
.tv-kids { background: var(--tv-black); color: #fff; overflow: hidden; }
.tv-kids .tv-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.tv-kids .tv-kicker { color: var(--tv-yellow); }
.tv-kids .tv-lead { color: rgba(255, 255, 255, .72); }
.tv-kids-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tv-kids-grid div { padding: 22px 20px; font-weight: 600; font-size: 16px; position: relative; }
.tv-kids-grid div small { display: block; font-weight: 400; opacity: .75; font-size: 12.5px; text-align: start; letter-spacing: .08em; }
.tv-kids-grid div:nth-child(4n+1) { background: var(--tv-magenta); }
.tv-kids-grid div:nth-child(4n+2) { background: var(--tv-orange); }
.tv-kids-grid div:nth-child(4n+3) { background: var(--tv-yellow); color: var(--tv-black); }
.tv-kids-grid div:nth-child(4n+4) { background: #222; }

/* Location */
.tv-loc { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.tv-dist { list-style: none; padding: 0; margin: 0; }
.tv-dist li { display: grid; grid-template-columns: 1fr auto auto; gap: 22px; align-items: center; padding: 18px 0; border-top: 1px solid var(--tv-line); }
.tv-dist li:last-child { border-bottom: 1px solid var(--tv-line); }
.tv-dist .t { font-weight: 700; font-size: 22px; color: var(--tv-magenta); min-width: 70px; text-align: center; line-height: 1.1; }
.tv-dist .t small { display: block; font-size: 12px; color: var(--tv-ink); font-weight: 400; }
.tv-dist .d { font-size: 14px; color: var(--tv-ink); direction: ltr; min-width: 64px; text-align: end; }
.tv-map { position: relative; height: 100%; min-height: 460px; border: 1px solid var(--tv-line); }
.tv-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.4); }

/* Gallery */
.tv-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 10px; }
.tv-gallery a { position: relative; overflow: hidden; display: block; }
.tv-gallery a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.tv-gallery a:nth-child(4) { grid-column: span 2; }
.tv-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.tv-gallery a:hover img { transform: scale(1.06); }
.tv-gallery a::after { content: ""; position: absolute; inset: 0; background: var(--tv-grad); opacity: 0; mix-blend-mode: multiply; transition: opacity .4s; }
.tv-gallery a:hover::after { opacity: .35; }
/* Floor plans */
.tv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
.tv-tabs button {
  font-family: inherit; font-size: 15px; font-weight: 600; padding: 12px 22px; border: 1px solid var(--tv-line); background: transparent; cursor: pointer; color: var(--tv-black);
  transition: background .2s, color .2s;
}
.tv-tabs button[aria-selected="true"] { background: var(--tv-black); color: #fff; border-color: var(--tv-black); }
.tv-tabs button:hover:not([aria-selected="true"]) { background: #fff; }
.tv-plan { display: grid; grid-template-columns: 1.7fr 1fr; gap: 0; background: #fff; border: 1px solid var(--tv-line); }
.tv-plan img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.tv-plan-info { background: var(--tv-cream-2); padding: 40px 34px; display: flex; flex-direction: column; }
.tv-plan-info .lvl { font-size: 13px; letter-spacing: .3em; color: var(--tv-magenta); font-weight: 600; text-align: start; }
.tv-plan-info h3 { font-size: 30px; margin: 10px 0 14px; }
.tv-plan-info p { color: var(--tv-ink); font-size: 15.5px; }
.tv-plan-info dl { margin: auto 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tv-plan-info dt { font-size: 13px; color: var(--tv-ink); }
.tv-plan-info dd { margin: 0; font-size: 24px; font-weight: 700; }

/* Units table */
.tv-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--tv-line); }
.tv-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15.5px; }
.tv-table th { text-align: start; background: var(--tv-black); color: #fff; font-weight: 600; padding: 18px 22px; font-size: 14px; }
.tv-table td { padding: 18px 22px; border-top: 1px solid var(--tv-line); }
.tv-table td.num { font-weight: 700; direction: ltr; text-align: end; }
.tv-table tr td:first-child { font-weight: 600; }
.tv-table .dot { display: inline-block; width: 10px; height: 10px; margin-inline-end: 10px; transform: rotate(45deg); }
.tv-table tfoot td { background: var(--tv-cream-2); font-weight: 700; }
.tv-note { font-size: 13.5px; color: var(--tv-ink); margin-top: 14px; }

/* Partners */
.tv-partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tv-partner { background: #fff; padding: 38px 32px; border: 1px solid var(--tv-line); display: flex; flex-direction: column; }
.tv-partner .lg { height: 84px; display: flex; align-items: center; margin-bottom: 22px; }
.tv-partner .lg img { max-height: 84px; width: auto; }
.tv-partner small { color: var(--tv-magenta); font-weight: 600; font-size: 13px; letter-spacing: .1em; }
.tv-partner h3 { font-size: 21px; margin: 6px 0 10px; }
.tv-partner p { color: var(--tv-ink); font-size: 15px; margin: 0; }

/* CTA / Contact */
.tv-cta { background: var(--tv-grad); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.tv-cta::before { content: ""; position: absolute; inset: 0; background: var(--t-pattern) 0 0 / 64px 64px; opacity: .08; z-index: -1; }
.tv-cta .tv-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.tv-cta h2 { font-size: clamp(32px, 4vw, 54px); margin-bottom: 18px; }
.tv-cta p { opacity: .92; font-size: 18px; }
.tv-phone { font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; direction: ltr; display: inline-block; margin-top: 10px; }
.tv-form { background: #fff; color: var(--tv-black); padding: clamp(28px, 4vw, 44px); clip-path: polygon(0 0, 100% 0, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.tv-form h3 { font-size: 24px; margin-bottom: 6px; }
.tv-form > p { color: var(--tv-ink); font-size: 15px; opacity: 1; }
.tv-field { margin-top: 16px; }
.tv-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.tv-field input, .tv-field select { width: 100%; font: inherit; font-size: 16px; padding: 13px 15px; border: 1px solid var(--tv-line); background: var(--tv-cream); color: var(--tv-black); }
.tv-field input:focus, .tv-field select:focus { outline: 2px solid var(--tv-magenta); outline-offset: -1px; background: #fff; }
.tv-form .tv-btn { width: 100%; justify-content: center; margin-top: 22px; }

/* v2 hover & motion */
.tv-extra, .tv-partner { transition: transform .5s var(--ease), box-shadow .5s var(--ease), opacity .9s var(--ease); }
.tv-extra:hover, .tv-partner:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -32px rgba(173, 44, 126, .45); }
.tv-extra svg { transition: transform .5s var(--ease); }
.tv-extra:hover svg { transform: rotate(-8deg) scale(1.1); }
.tv-card { transition: transform .6s var(--ease), opacity .9s var(--ease); }
.tv-card:hover { transform: translateY(-10px); z-index: 1; }
.tv-kids-grid div { transition: transform .4s var(--ease), opacity .9s var(--ease); }
.tv-kids-grid div:hover { transform: translateY(-4px) rotate(-1deg); }
.tv-dist li { transition: padding .4s var(--ease), background .4s; }
.tv-dist li:hover { padding-inline: 12px; background: #fff; }
.tv-hero-copy > * { opacity: 0; transform: translateY(24px); animation: tvIn 1s var(--ease) forwards; }
.tv-hero-copy > *:nth-child(2) { animation-delay: .12s; }
.tv-hero-copy > *:nth-child(3) { animation-delay: .24s; }
.tv-hero-copy > *:nth-child(4) { animation-delay: .36s; }
.tv-hero-copy > *:nth-child(5) { animation-delay: .48s; }
.tv-hero-panel::before { animation: tvPattern 40s linear infinite; }
@keyframes tvIn { to { opacity: 1; transform: none; } }
@keyframes tvPattern { to { background-position: 640px 640px; } }
@media (prefers-reduced-motion: reduce) { .tv-hero-copy > * { opacity: 1; transform: none; animation: none; } .tv-hero-panel::before { animation: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .tv-extras { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .tv-hero { grid-template-columns: 1fr; }
  .tv-hero-media { min-height: 52vh; }
  .tv-strip .tv-wrap { grid-template-columns: repeat(2, 1fr); }
  .tv-strip div.s { border-inline-start: 0; padding-inline: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .tv-about, .tv-kids .tv-wrap, .tv-loc, .tv-cta .tv-wrap { grid-template-columns: 1fr; }
  .tv-comp, .tv-partners { grid-template-columns: 1fr; }
  .tv-card { min-height: 0; }
  .tv-plan { grid-template-columns: 1fr; }
  .tv-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .tv-gallery a:nth-child(4) { grid-column: span 2; }
}
@media (max-width: 560px) {
  .tv-wrap, .tv-hero-copy { width: calc(100% - 32px); }
  .tv-extras { grid-template-columns: 1fr; }
  .tv-points li { grid-template-columns: 1fr; gap: 2px; }
  .tv-gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .tv-gallery a:nth-child(1), .tv-gallery a:nth-child(4) { grid-column: auto; grid-row: auto; }
  .tv-kids-grid { grid-template-columns: 1fr; }
  .tv-dist li { grid-template-columns: 1fr auto; }
  .tv-dist .d { display: none; }
}

/* ---------- In-page section bar (sits under the main header) ---------- */
.tv-subnav { position: sticky; top: var(--hdr-h, 72px); z-index: 40; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--tv-line); font-family: var(--tv-font); transition: top .35s var(--ease), box-shadow .35s; }
.tv-subnav.stuck { box-shadow: 0 14px 30px -24px rgba(11, 11, 11, .45); }
.tv-subnav .tv-wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.tv-subnav-logo { height: 22px; width: auto; flex: none; }
.tv-subnav-links { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.tv-subnav-links::-webkit-scrollbar { display: none; }
.tv-subnav-links a { position: relative; padding: 8px 14px; font-size: 14.5px; font-weight: 500; color: var(--tv-ink); white-space: nowrap; transition: color .25s; }
.tv-subnav-links a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -13px; height: 3px; background: var(--tv-grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.tv-subnav-links a:hover, .tv-subnav-links a.is-active { color: var(--tv-black); }
.tv-subnav-links a.is-active::after { transform: scaleX(1); }
.tv-subnav-cta { padding: 10px 20px; font-size: 14px; flex: none; }
.tv-hero-panel { padding-top: 190px; }
.tv-main section[id] { scroll-margin-top: calc(var(--hdr-h, 72px) + 70px); }
@media (max-width: 920px) {
  .tv-subnav-logo, .tv-subnav-cta { display: none; }
  .tv-subnav .tv-wrap { height: 54px; gap: 0; }
  .tv-subnav-links { margin-inline: -14px; }
  .tv-subnav-links a::after { bottom: -8px; }
  .tv-hero-panel { padding-top: 150px; }
}
.tv-hero h1 { font-size: clamp(38px, 4.1vw, 60px); line-height: 1.1; }
.tv-hero-copy .stack { width: min(230px, 55%); margin-bottom: 24px; }
.tv-hero-panel { padding-bottom: 60px; }
@media (min-width: 921px) { .tv-hero-panel { padding-top: 170px; } }
@media (min-width: 921px) { .tv-hero-panel { padding-top: 140px; } }
@media (max-width: 920px) { .tv-hero-panel { padding-top: 120px; } }