/* ==========================================================================
   VILIT — Sandbox for IP & Talent
   Shared stylesheet for Home / Works listing / Work detail
   Built by NomiLogic Digital. Structured for conversion to a WP theme.
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. Tokens
   02. Reset & base
   03. Typography scale
   04. Layout helpers (container, section, wedges, notches)
   05. Buttons, pills, eyebrows
   06. Header / nav
   07. Marquee ticker
   08. Home — hero
   09. Home — what we are
   10. Home — pillars
   11. Home — process
   12. Home — CTA form
   13. Works — page hero
   14. Works — grid + pagination
   15. Works — showreel + media carousel
   16. Works — news
   17. Work detail — article header + featured image
   18. GUTENBERG / editor block styles  <-- keep in sync with editor-style.css
   19. Footer
   20. Responsive
   21. Accessibility & motion
   ========================================================================== */

/* ---------- 01. Tokens ---------- */
:root {
  /* palette */
  --beige: #F6E1D8;
  --beige-2: #F9D5B6;
  --cream: #FBF3EC;
  --white: #FFFFFF;
  --ink: #141110;
  --ink-80: rgba(20, 17, 16, .80);
  --ink-60: rgba(20, 17, 16, .62);
  --ink-15: rgba(20, 17, 16, .15);
  --red: #EC1D26;
  --red-2: #C4241B;
  --orange: #ffaa00;
  --orange-2: #FF7501;
  --orange-15: rgba(245, 144, 30, .15);
  --blue: #2372D2;
  --green: #2FA84F;
  --dark: #100F13;

  /* type */
  --display: "Anton", "Arial Narrow", Helvetica, sans-serif;
  --body: "Chakra Petch", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --condensed: "Saira Condensed", "Arial Narrow", Helvetica, sans-serif;

  /* type scale (desktop) */
  --fs-hero: 84px;
  --fs-page: clamp(46px, 6.4vw, 88px);
  --fs-h2: 64px;
  --fs-h3: 40px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-eyebrow: 18px;

  /* geometry */
  --wrap: 1320px;
  --gutter: 24px;
  --radius: 6px;
  --notch: 22px;
  --sect-y: 80px;

  /* elevation — the mockup uses a soft dark drop shadow, not a hard offset */
  --shadow-sm: 0 6px 16px rgba(78, 40, 22, .10);
  --shadow-md: 0 14px 30px rgba(78, 40, 22, .14);
  --shadow-lg: 0 22px 48px rgba(78, 40, 22, .18);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--beige);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
  height: auto;
	margin: 0 auto;
}

/* The UA rule for [hidden] is display:none, but ANY class rule that sets
   display beats it — .news-card{display:grid} did exactly that. The carousels
   hide slides with the hidden attribute, so without this they set the
   attribute and nothing visually changes. That is what "the arrows do
   nothing" looks like. Keep this rule. */
[hidden] {
  display: none !important;
}

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

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

/* ---------- 03. Typography ---------- */
h1,
h2,
h3,
h4,
h5,
h6,
.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1em;
  margin: 0;
}

p {
  margin: 0 0 1em;
  font-size: 20px
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 700;
}

.lede {
  font-size: 16px;
  color: var(--ink-80);
  max-width: 58ch;
}

.muted {
  color: var(--ink-60);
}

/* ---------- 04. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: 1320px;
}

.section {
  position: relative;
  padding-block: var(--sect-y);
}

.section--flat {
  padding-block: 0;
}

.section--white {
  background: var(--white);
}

.section--cream {
  background: var(--cream);
}

.section--beige2 {
  background: var(--beige-2);
}

.section>.container {
  position: relative;
  z-index: 2;
}

.background-pattern {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.background-pattern img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  max-width: none;   /* beats the global img{max-width:100%} */
  display: block;
}

.sect-head {
  text-align: center;
  margin-bottom: 44px;
}

.sect-head h2 {
  font-size: var(--fs-h2);
  margin-bottom: 14px;
}

.sect-head p {
  color: var(--ink-60);
  max-width: 60ch;
  margin-inline: auto;
}

/* Red diagonal wedges — the recurring graphic device across the mockup.
   Each one is decorative only. */
.wedge {
  position: absolute;
  background: var(--red);
  z-index: 1;
  pointer-events: none;
}

.wedge--tl {
  top: 0;
  left: 0;
  width: min(46%, 520px);
  height: 150px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.wedge--tr {
  top: 0;
  right: 0;
  width: min(46%, 520px);
  height: 150px;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.wedge--bl {
  bottom: 0;
  left: 0;
  width: min(46%, 520px);
  height: 150px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.wedge--br {
  bottom: 0;
  right: 0;
  width: min(46%, 520px);
  height: 150px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.wedge--slab {
  left: 0;
  right: 0;
  height: 120px;
  clip-path: polygon(0 0, 100% 62%, 100% 100%, 0 100%);
}

/* Corner notches (the cut-corner cards + thumbnails in the mockup) */
.notch-br {
  clip-path: polygon(0 var(--notch),
      var(--notch) 0,
      100% 0,
      100% calc(100% - var(--notch)),
      calc(100% - var(--notch)) 100%,
      0 100%);
}

.notch-bl {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}

.notch-tr {
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}

/* Small accent triangle used at card top-right */
.card-tri {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 12px solid var(--red);
}

.card-tri--orange {
  border-bottom-color: var(--orange-2);
}

.card-tri--blue {
  border-bottom-color: var(--blue);
}

/* Media frames keep a stable aspect ratio so placeholders don't shift layout */
.ratio {
  position: relative;
  overflow: hidden;
}

.ratio>img,
.ratio>iframe,
.ratio>video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-16x9 {
  aspect-ratio: 16/9;
}

.ratio-4x3 {
  aspect-ratio: 3/4;
}

.ratio-3x2 {
  aspect-ratio: 3/2;
}

.ratio-4x5 {
  aspect-ratio: 4/5;
}

.ratio-1x1 {
  height:100%;
}

/* ---------- 05. Buttons, pills, eyebrows ---------- */
.eyebrow {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 12px;
}

.eyebrow--center {
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 20px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  font-family: var(--body);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(0);
}

.btn--orange {
  background: linear-gradient(90deg, #FFAA00 0%, #FF7301 100%);
  ;
  color: #fff !important;
}

.btn--orange:hover {
  background: #E8850F;
}

.btn--red {
  background: var(--red);
  color: #fff;
}

.btn--red:hover {
  background: var(--red-2);
}

.btn--green {
  background: var(--green);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 10px 20px;
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--white);
}

.btn--sm {
  padding: 10px 20px;
  font-size: 16px;
  gap: 6px;
}

.btn--block {
  width: 100%;
}

.btn .ico {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.tag {
  display: inline-block;
  font-family: var(--condensed);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--red);
}

/* ---------- 06. Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--beige);
  border-bottom: 1px solid rgba(20, 17, 16, .06);
}

.site-header.is-stuck {
  box-shadow: 0 4px 18px rgba(78, 40, 22, .10);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
	justify-content:space-between;
}

.wordmark {
  font-family: var(--display);
  font-weight: 900;
  font-size: 28px;
  color: var(--red);
  font-style: italic;
  text-transform: uppercase;
  line-height: 1;
}

.wordmark svg {
  width: 120px;
}

.wordmark--white {
  color: var(--white);
}

.wordmark--lg {
  font-size: 44px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  height: 26px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav a {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  position: relative;
  transition: color .18s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--red);
  transition: right .22s ease;
}

.nav a:hover {
  color: var(--red);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  right: 0;
}

.nav a[aria-current="page"] {
  color: var(--red);
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 4px 0;
  transition: .2s;
}

/* ---------- 07. Marquee ticker ---------- */
.marquee {
  background: linear-gradient(90deg, #FFC790 0%, #FF989C 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 3;
  padding-block: 11px;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}

.marquee__group {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
}

.marquee__item {
  font-family: var(--body);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__star {
  font-size: 13px;
  opacity: .85;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ---------- 08. Home — hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(48px, 6vw, 84px) clamp(40px, 5vw, 72px);
  overflow: hidden;
  background-image: url('../img/Mask Group.png'), url('../img/vector.png');
  background-position: bottom center, bottom right;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.hero h1 {
  font-size: var(--fs-hero);
  margin-bottom: 20px;
}

.hero h1 .accent {
  color: var(--red);
}

.hero__copy p {
  color: var(--ink-80);
  max-width: 46ch;
  margin-bottom: 26px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__media {
  position: relative;
}

.hero__frame {
  position: relative;
  padding: 10px;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

.hero__frame img {
  border-radius: 6px;
}

/*hero badge is display flex*/
.hero__badge {
  position: absolute;
  display: none;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  z-index: 3;
}

.hero__badge b {
  display: block;
  font-family: var(--display);
  font-size: 14px;
}

.hero__badge span {
  font-weight: 500;
  opacity: .9;
  font-size: 11px;
}

.hero__badge--tl {
  left: -14px;
  bottom: 34px;
}

.hero__badge--tr {
  right: -10px;
  top: 26px;
}

/* ---------- 09. Home — what we are ---------- */
#about.section{
	padding-block:143px;
}

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.stack-wrap {
  filter: drop-shadow(10px 10px 0 var(--orange));
}

.stack-card {
  background: var(--cream);
  padding: 14px;
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
  gap: 14px;
  clip-path: polygon(0 var(--notch),
      var(--notch) 0,
      100% 0,
      100% calc(100% - var(--notch)),
      calc(100% - var(--notch)) 100%,
      0 100%);
}

.stack-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px 0 0 15px;
}

.stack-list li a {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--orange-2);
  color: #fff;
  border-radius: 5px;
  padding: 9px 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  transition: background-color .18s ease, transform .18s ease;
}

.stack-list li a:hover {
  background: var(--red);
  transform: translateX(3px);
}

.stack-list li span {
  background: white;
  padding: 5px;
  aspect-ratio: 1;
}

.stack-list .ico {
  font-size: 16px;
}

.about__body h2 {
  font-size: var(--fs-h2);
  margin-bottom: 20px;
}

.about__body h2 span {
  display: block;
}

.about__body p {
  color: var(--ink-80);
}

/* ---------- 10. Home — pillars ---------- */
#focus.section {
	padding-block: 54px;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.pillar-wrap {
  filter: drop-shadow(10px 10px 0 var(--accent-soft));
}

.pillar {
  position: relative;
  background: var(--white);
  padding: 30px;
  --notch: 26px;
  height: 100%;
}

.pillar__icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 19px;
  margin-bottom: 22px;
}

.pillar h3 {
  font-size: var(--fs-h3);
  margin-bottom: 12px;
}

.pillar p {
  font-size: 17px;
  color: var(--ink-60);
}

.pillar__rule {
  width: 34px;
  height: 4px;
  border-radius: 2px;
  margin-top: 20px;
}

.pillar--red {
  --accent: #EB1C26;
  --accent-soft: #F4BAB5;
}

.pillar--orange {
  --accent: #F5901E;
  --accent-soft: #f8cbad;
}

.pillar--blue {
  --accent: #3B7DD8;
  --accent-soft: #d0d1e0;
}

.pillar--red .pillar__icon,
.pillar--red .pillar__rule {
  background: var(--red);
}

.pillar--orange .pillar__icon,
.pillar--orange .pillar__rule {
  background: var(--orange-2);
}

.pillar--blue .pillar__icon,
.pillar--blue .pillar__rule {
  background: var(--blue);
}

/* ---------- 11. Home — process ---------- */
#process.section{
	padding-block:130px;
}

.process {
  border-radius: 10px;
  padding: clamp(28px, 4vw, 54px);
  position: relative;
  z-index: 2;
}

.process__head {
  text-align: center;
  margin-bottom: 38px;
}

.process__head h2 {
  font-size: var(--fs-h2);
  margin-bottom: 12px;
}

.process__head p {
  color: var(--ink-60);
}

.process__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
}

.steps li {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 18px;
  padding-block: 22px;
}

.steps li+li {
  border-top: 1px solid var(--ink-15);
}

.steps .num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 88px;
  color: transparent;
  -webkit-text-stroke: 1px var(--red);
}

.steps li div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.steps h3 {
  font-size: var(--fs-h3);
  margin-bottom: 8px;
}

.steps p {
  font-size: 18px;
  color: var(--ink-60);
}

/* ---------- 12. Home — CTA form ---------- */
#contact.section {
	padding-block:42px;
}

.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.cta h2 {
  font-size: var(--fs-h2);
  margin-bottom: 20px;
}

.cta p {
  color: var(--ink-80);
  max-width: 46ch;
}

.form-wrap {
  filter: drop-shadow(10px 10px 0 var(--orange));
}

.form-card {
  background: var(--beige-2);
  padding: 26px;
  clip-path: polygon(0 var(--notch),
      var(--notch) 0,
      100% 0,
      100% calc(100% - var(--notch)),
      calc(100% - var(--notch)) 100%,
      0 100%);
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.field input,
.field textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid rgba(20, 17, 16, .18);
  border-radius: 4px;
  padding: 11px 13px;
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-15);
}

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 20px;
}

.consent input {
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: var(--orange);
}

.consent label {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-60);
}

/* ---------- 13. Works — page hero ---------- */
.page-hero {
  text-align: center;
  padding-block: 110px;
	position:relative;
}

.page-hero .container{
	position:relative;
}

.page-hero h1 {
  font-size: var(--fs-page);
  margin-bottom: 20px;
}

.page-hero p {
  color: var(--ink-60);
  max-width: 74ch;
  margin-inline: auto;
}

/* ---------- 14. Works — grid + pagination ---------- */
#manga.section{
	padding-block:120px;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.work-card {
  background: var(--white);
  border-radius: 8px;
  padding: 10px 10px 16px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}

.work-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.work-card .ratio {
  --notch: 20px;
  border-radius: 5px;
}

.work-card__meta {
  padding: 12px 6px 0;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.work-card__meta .tag {
  margin-bottom: 4px;
}

.work-card h3 {
  font-size: 32px;
  margin-bottom: 12px;
}

.work-card__links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 44px;
}

.pagination a,
.pagination span {
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding-inline: 8px;
  font-family: var(--body);
  font-weight: 800;
  font-size: 14px;
  border-radius: 6px;
  color: var(--ink);
  transition: color .18s ease, background-color .18s ease;
}

.pagination a:hover {
  color: var(--red);
}

.pagination .current {
  color: var(--red);
  border-bottom: 3px solid var(--red);
  border-radius: 0;
}

.pagination .nav-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  min-width: auto;
  padding: 0;
}

.pagination .nav-arrow:hover {
  background: var(--red);
  color: #fff;
}

/* ---------- 15. Works — showreel + media carousel ---------- */
#media.section {
	padding-block:var(--sect-y);
}

.showreel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.showreel__media {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  filter: drop-shadow(0 14px 26px rgba(78, 40, 22, .16));
}

.showreel h2 {
  font-size: var(--fs-h2);
  margin-bottom: 16px;
}

.showreel p {
  color: var(--ink-60);
  margin-bottom: 22px;
}

.play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  background: rgba(16, 15, 19, .18);
  transition: background-color .2s ease;
}

.play:hover {
  background: rgba(16, 15, 19, .34);
}

.play__dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease;
}

.play:hover .play__dot {
  transform: scale(1.08);
}

.play__dot::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 4px;
  border-left: 15px solid var(--ink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.play--sm .play__dot {
  width: 42px;
  height: 42px;
}

.play--sm .play__dot::after {
  border-left-width: 12px;
  border-top-width: 7px;
  border-bottom-width: 7px;
}

.media-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 44px;
}

.media-card__legacy-ratio {
  --notch: 20px;
  border-radius: 6px;
  filter: drop-shadow(0 6px 14px rgba(78, 40, 22, .12));
}

.media-card__meta {
  padding-top: 12px;
}

.media-card h3 {
  font-size: 32px;
  margin-top: 4px;
}

.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.dots {
  display: flex;
  gap: 7px;
}

.dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(20, 17, 16, .22);
  transition: background-color .18s ease, width .18s ease;
}

.dots button[aria-selected="true"] {
  background: var(--orange);
  width: 20px;
  border-radius: 999px;
}

.carousel-nav .nav-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  transition: background-color .18s ease;
}

.carousel-nav .nav-arrow:hover {
  background: var(--red);
}

/* ---------- 16. Works — news ---------- */
#news.section{
	padding-block:150px 80px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.news-card {
  background: var(--white);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.news-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.news-card__body {
  padding: 20px 22px;
}

.news-card__date {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: 16px;
  color: var(--red);
  display: block;
  margin-bottom: 8px;
}

.news-card h3 {
  font-size: 32px;
  margin-bottom: 10px;
}

.news-card p {
  font-size: 18px;
  color: var(--ink-60);
  margin-bottom: 16px;
}

/* ---------- 17. Work detail ---------- */
.page .entry-header {
	padding-bottom:40px;
}

.entry-header .entry-date {
  font-family: var(--condensed);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 14px;
}

.entry-header h1 {
  font-size: clamp(40px, 4.6vw, 62px);
  max-width: 20ch;
}

.entry-header .entry-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.entry-header .entry-terms a {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--orange);
  color: #fff;
  padding: 5px 11px;
  border-radius: 999px;
  transition: background-color .18s ease;
}

.entry-header .entry-terms a:hover {
  background: var(--red);
}

.entry-featured {
  margin-block: 32px 44px;
}

.entry-featured .ratio {
  --notch: 34px;
  border-radius: 8px;
  filter: drop-shadow(0 14px 28px rgba(78, 40, 22, .16));
}

.entry-wrap {
  max-width: 820px;
  margin-inline: auto;
}

.entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--ink-15);
}

/* ==========================================================================
   18. GUTENBERG / EDITOR CONTENT
   Everything below styles what the client types into the block editor.
   Copy this block verbatim into editor-style.css when building the theme, and
   wrap it in `.editor-styles-wrapper` there.
   ========================================================================== */
.entry-content {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--ink-80);
}

.entry-content>* {
  margin-block: 0 1.15em;
}

.entry-content>*:last-child {
  margin-bottom: 0;
}

/* headings */
.entry-content h1 {
  font-size: clamp(30px, 3.4vw, 44px);
}

.entry-content h2 {
  font-size: clamp(26px, 2.8vw, 36px);
}

.entry-content h3 {
  font-size: clamp(21px, 2.1vw, 26px);
}

.entry-content h4 {
  font-size: 32px;
}

.entry-content h5 {
  font-size: 16px;
}

.entry-content h6 {
  font-size: 13px;
  color: var(--red);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  color: var(--ink);
  margin-top: 1.6em;
  margin-bottom: .55em;
}

.entry-content>h1:first-child,
.entry-content>h2:first-child,
.entry-content>h3:first-child {
  margin-top: 0;
}

/* inline */
.entry-content a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.entry-content a:hover {
  color: var(--red-2);
}

.entry-content strong,
.entry-content b {
  color: var(--ink);
  font-weight: 700;
}

.entry-content em {
  font-style: italic;
}

.entry-content mark,
.entry-content .has-inline-color {
  background: var(--orange-15);
  padding: 0 3px;
}

.entry-content s {
  opacity: .6;
}

.entry-content sub,
.entry-content sup {
  font-size: .72em;
}

.entry-content abbr {
  text-decoration: underline dotted;
}

.entry-content kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85em;
  background: var(--white);
  border: 1px solid var(--ink-15);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
}

/* lists */
.entry-content ul,
.entry-content ol {
  padding-left: 1.35em;
  margin-block: 0 1.15em;
}

.entry-content ul li {
  list-style: disc;
}

.entry-content ol li {
  list-style: decimal;
}

.entry-content li {
  margin-bottom: .5em;
}

.entry-content li::marker {
  color: var(--red);
}

.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
  margin-top: .5em;
  margin-bottom: 0;
}

.entry-content .wp-block-list.is-style-checklist li {
  list-style: none;
  position: relative;
}

/* quotes */
.entry-content blockquote,
.entry-content .wp-block-quote {
  margin: 2em 0;
  padding: 6px 0 6px 24px;
  border-left: 4px solid var(--orange);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
}

.entry-content blockquote p {
  margin-bottom: .6em;
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--ink-60);
}

.entry-content .wp-block-pullquote {
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  padding: 32px 0;
  margin: 2.4em 0;
  text-align: center;
}

.entry-content .wp-block-pullquote blockquote {
  border: 0;
  padding: 0;
}

.entry-content .wp-block-pullquote p {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 26px;
  line-height: 1.1;
}

/* images & figures */
.entry-content figure {
  margin: 2em 0;
}

.entry-content img {
  border-radius: 6px;
  height: auto;
}

.entry-content figcaption,
.entry-content .wp-element-caption {
  font-size: 12.5px;
  color: var(--ink-60);
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}

.entry-content .wp-block-image.is-style-rounded img {
  border-radius: 50%;
}

.entry-content .wp-block-gallery {
  display: grid;
  gap: 12px;
}

.entry-content .wp-block-gallery.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.entry-content .wp-block-gallery.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.entry-content .wp-block-gallery figure {
  margin: 0;
}

/* alignment (needs the theme to declare $content-width / wide sizes) */
.entry-content .alignleft {
  float: left;
  margin: .4em 1.8em 1.2em 0;
  max-width: 46%;
}

.entry-content .alignright {
  float: right;
  margin: .4em 0 1.2em 1.8em;
  max-width: 46%;
}

.entry-content .aligncenter {
  margin-inline: auto;
  text-align: center;
}

.entry-content .alignwide {
  width: min(1060px, 92vw);
  margin-inline: calc(50% - min(530px, 46vw));
  max-width: none;
}

.entry-content .alignfull {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  max-width: none;
}

.entry-content .alignfull img,
.entry-content .alignwide img {
  width: 100%;
}

.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

/* tables */
.entry-content table,
.entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.entry-content th {
  background: var(--ink);
  color: #fff;
  text-align: left;
  padding: 12px 14px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
}

.entry-content td {
  padding: 11px 14px;
  border-top: 1px solid var(--ink-15);
}

.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--cream);
}

.entry-content .wp-block-table figcaption {
  text-align: left;
}

/* separators, code, preformatted */
.entry-content hr,
.entry-content .wp-block-separator {
  border: 0;
  height: 2px;
  background: var(--ink-15);
  margin: 2.6em 0;
  max-width: none;
}

.entry-content .wp-block-separator.is-style-dots {
  background: none;
  text-align: center;
  height: auto;
}

.entry-content .wp-block-separator.is-style-wide {
  background: var(--red);
}

.entry-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--beige-2);
  border-radius: 4px;
  padding: 2px 6px;
}

.entry-content pre,
.entry-content .wp-block-code {
  background: var(--dark);
  color: #F4EDE6;
  border-radius: 8px;
  padding: 20px 22px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.6;
}

.entry-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.entry-content .wp-block-preformatted {
  background: var(--cream);
  padding: 18px;
  border-radius: 6px;
  white-space: pre-wrap;
}

.entry-content .wp-block-verse {
  font-style: italic;
  white-space: pre-wrap;
}

/* buttons */
.entry-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block: 1.8em;
}

.entry-content .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  border-radius: 10px;
  padding: 12px 24px;
  text-decoration: none;
  font-family: var(--body);
  font-weight: 800;
  font-size: 16px;
  transition: transform .18s ease, background-color .18s ease;
}

.entry-content .wp-block-button__link:hover {
  background: var(--red-2);
  color: #fff;
  transform: translateY(-2px);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--ink);
  color: #fff;
}

/* columns, groups, media & text, spacer */
.entry-content .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-block: 2em;
}

.entry-content .wp-block-column {
  flex: 1 1 0;
  min-width: 240px;
}

.entry-content .wp-block-group.has-background {
  padding: 28px;
  border-radius: 8px;
}

.entry-content .wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  margin-block: 2em;
}

.entry-content .wp-block-spacer {
  margin: 0;
}

/* embeds — keeps YouTube/Webtoon responsive, which this CPT relies on */
.entry-content .wp-block-embed {
  margin-block: 2em;
}

.entry-content .wp-block-embed__wrapper {
  position: relative;
}

.entry-content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.entry-content .wp-block-embed.wp-has-aspect-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 8px;
}

.entry-content iframe {
  max-width: 100%;
  border-radius: 8px;
}

/* palette classes — mirror these in theme.json so the client sees the brand swatches */
.has-vilit-red-color {
  color: var(--red);
}

.has-vilit-red-background-color {
  background-color: var(--red);
}

.has-vilit-orange-color {
  color: var(--orange);
}

.has-vilit-orange-background-color {
  background-color: var(--orange);
}

.has-vilit-ink-color {
  color: var(--ink);
}

.has-vilit-ink-background-color {
  background-color: var(--ink);
}

.has-vilit-cream-color {
  color: var(--cream);
}

.has-vilit-cream-background-color {
  background-color: var(--cream);
}

.has-vilit-beige-color {
  color: var(--beige);
}

.has-vilit-beige-background-color {
  background-color: var(--beige);
}

.has-small-font-size {
  font-size: 13px;
}

.has-medium-font-size {
  font-size: 18px;
}

.has-large-font-size {
  font-size: 24px;
}

.has-x-large-font-size {
  font-size: 34px;
}

.has-text-align-center {
  text-align: center;
}

.has-text-align-right {
  text-align: right;
}

.has-text-align-left {
  text-align: left;
}

/* ---- end Gutenberg block ---- */

/* ---------- 19. Footer ---------- */
.site-footer {
  background: var(--dark);
  color: #EFE6DE;
  padding-block: 200px 30px;
  position: relative;
}

.site-footer .container {
  position: relative;
  z-index: 2;
}

.footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.footer-social {
  display: flex;
  gap: 16px;
}

.footer-social a {
  opacity: .8;
  transition: opacity .18s ease, transform .18s ease;
}

.footer-social a:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.footer-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-legal {
  font-size: 14px;
  color: rgba(239, 230, 222, .6);
	margin:0;
}

.footer-legal a {
  color: rgba(239, 230, 222, .85);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* red slab that leads into the footer */
.footer-lead {
  height: 96px;
  background: var(--beige);
  position: relative;
  overflow: hidden;
}

/* footer legal links */
.footer-nav__list{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 22px; margin:0; padding:0;
}
.footer-nav__list li{ list-style:none; position:relative; }
.footer-nav__list li + li::before{
  content:""; position:absolute; left:-12px; top:50%;
  width:1px; height:12px; margin-top:-6px;
  background:rgba(239,230,222,.3);
}
.footer-nav__list a{
  font-size:13px; color:rgba(239,230,222,.75);
  transition:color .18s ease;
}
.footer-nav__list a:hover{ color:#fff; }



/* ---------- 20. Responsive ---------- */
@media (max-width: 900px) {
  :root {
    --fs-hero: 48px;
    --fs-page: 48px;
    --fs-h2:   40px;
    --fs-h3:   32px;
  }
	
	p{
		font-size:18px;
	}
	
	.background-pattern{
		display:none;
	}
	
	.process {
		padding:0;
	}
	
	.steps .num{
		line-height:1;
	}
	
	#about.section, #manga.section{
		padding-block:80px 40px;
	}
	
	#focus.section, #process.section, #media.section, #news.section {
		padding-block:40px;
	}
	
	#contact.section{
		padding-block:40px 80px;
	}
	
	.site-footer{
		padding-block:40px 20px;
	}
	
	.entry-actions {
		flex-wrap:unset;
	}
}

@media (max-width: 600px) {
  :root {
    --fs-hero: 48px;
    --fs-page: 48px;
    --fs-h2:   40px;
    --fs-h3:   32px;
  }
}

@media (max-width:1080px) {
  .work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stack-card {
    grid-template-columns: 130px minmax(0, 1fr);
  }
}

@media (max-width:900px) {
  .nav {
    position: fixed;
    inset: 76px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--beige);
    padding: 8px 24px 20px;
    border-bottom: 1px solid var(--ink-15);
    box-shadow: var(--shadow-md);
    display: none;
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    padding-block: 13px;
    border-bottom: 1px solid rgba(20, 17, 16, .08);
  }

  .nav .btn {
    margin-top: 12px;
  }

  .nav-toggle {
    display: block;
    margin-left: auto;
  }

  .brand {
    margin-right: 0;
  }

  .hero__grid,
  .about__grid,
  .process__grid,
  .cta__grid,
  .showreel__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__media {
    order: -1;
  }
	
	.stack-list {
		display:none;
	}

  .pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  .media-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-content .wp-block-media-text {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width:720px) {
  .work-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .work-card h3 {
    font-size: 32px;
  }

  .stack-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-card .ratio {
    aspect-ratio: 16/9;
  }

  .hero__badge--tl {
    left: 0;
    bottom: 14px;
  }

  .hero__badge--tr {
    right: 0;
    top: 10px;
  }

  .steps li {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 12px;
  }

  .steps .num {
    font-size: 38px;
  }

  .entry-content .alignleft,
  .entry-content .alignright {
    float: none;
    margin-inline: 0;
    max-width: 100%;
  }

  .entry-content .alignwide,
  .entry-content .alignfull {
    width: auto;
    margin-inline: 0;
  }
}

@media (max-width:460px) {
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-card__links {
    flex-direction: column;
  }

  .work-card__links .btn {
    width: 100%;
  }
}

/* ---------- 21. Accessibility & motion ---------- */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 6px 0;
}

.skip-link:focus {
  left: 0;
}

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

@media (prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .marquee__track {
    animation: none;
  }
}
/* ==========================================================================
   22. WORDPRESS ADDITIONS
   Everything below was added when the static build became a theme.
   ========================================================================== */

/* ---------- YouTube lightbox ---------- */
body.vlbox-open{ overflow:hidden; }

.vlbox{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; }
.vlbox[hidden]{ display:none; }
.vlbox__backdrop{
  position:absolute; inset:0; background:rgba(16,15,19,.88);
  animation:vlbox-fade .18s ease;
}
.vlbox__inner{
  position:relative; width:min(1100px, 92vw);
  animation:vlbox-rise .22s cubic-bezier(.2,.7,.3,1);
}
.vlbox__frame{
  position:relative; aspect-ratio:16/9; width:100%;
  background:#000; overflow:hidden;
  --notch:26px;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%, 0 100%);
}
.vlbox__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vlbox__close{
  position:absolute; top:-46px; right:0;
  width:38px; height:38px; border:0; border-radius:50%;
  background:var(--red); color:#fff; font-size:22px; line-height:1;
  cursor:pointer; display:grid; place-items:center;
  transition:background-color .18s ease, transform .18s ease;
}
.vlbox__close:hover{ background:#fff; color:var(--ink); transform:rotate(90deg); }

@keyframes vlbox-fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes vlbox-rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

@media (max-width:600px){
  .vlbox__inner{ width:94vw; }
  .vlbox__close{ top:-42px; }
}

/* "Watch Trailer" is a <button> now, not an <a> — keep it identical */
.work-card__links .btn,
.entry-actions .btn{ font-family:inherit; }
button.btn{ appearance:none; -webkit-appearance:none; }

/* ---------- Genre / category filter row ---------- */
.genre-filter{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center; margin-bottom:32px;
}
.genre-filter .btn.is-active{ background:var(--ink); color:var(--white); border-color:var(--ink); }

/* ---------- Creative Media archive grid ---------- */
.media-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px;
}
.media-card__meta p{ font-size:13.5px; color:var(--ink-60); margin-top:8px; }
@media (max-width:900px){ .media-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .media-grid{ grid-template-columns:minmax(0,1fr); } }

/* ---------- Contact Form 7 ---------- */
/* CF7 emits its own markup; these rules bend it into the design's form card. */
.form-card .wpcf7-form p{ margin:0; }
.form-card .wpcf7-form label{
  display:block; font-size:16px; font-weight:600; margin-bottom:6px;
}
.form-card .wpcf7-form-control-wrap{ display:block; margin-bottom:16px; }
.form-card input[type=text],
.form-card input[type=email],
.form-card input[type=tel],
.form-card input[type=url],
.form-card input[type=date],
.form-card input[type=number],
.form-card select,
.form-card textarea{
  width:100%; background:var(--white); border:1px solid rgba(20,17,16,.18);
  border-radius:4px; padding:11px 13px; font-size:14px; font-family:inherit;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{
  outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-15);
}
.form-card textarea{ min-height:120px; resize:vertical; }

/* consent checkbox */
.form-card .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
.form-card .wpcf7-acceptance label{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; line-height:1.5; color:var(--ink-60); font-weight:400;
}
.form-card .wpcf7-acceptance input[type=checkbox]{
  margin-top:3px; flex:0 0 auto; accent-color:var(--orange); width:auto;
}
.form-card .wpcf7-acceptance a{ color:var(--red); text-decoration:underline; }

/* submit */
.form-card input[type=submit],
.form-card .wpcf7-submit{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:20px; padding:12px 22px;
  background: linear-gradient(90deg, #FFAA00 0%, #FF7301 100%); color:#fff; border:0; border-radius:10px;
  font-family:var(--body); font-weight:700; font-size:18px;
   cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.form-card input[type=submit]:hover,
.form-card .wpcf7-submit:hover{ background:#E8850F; transform:translateY(-2px); box-shadow:var(--shadow-sm); }

/* CF7 messages */
.form-card .wpcf7-not-valid-tip{ color:var(--red); font-size:12px; margin-top:4px; }
.form-card .wpcf7-response-output{
  margin:18px 0 0 !important; padding:12px 14px !important;
  border-width:2px !important; border-radius:6px; font-size:13px;
}
.form-card .wpcf7 form.sent .wpcf7-response-output{ border-color:var(--green) !important; }
.form-card .wpcf7 form.invalid .wpcf7-response-output,
.form-card .wpcf7 form.failed .wpcf7-response-output{ border-color:var(--red) !important; }
.form-card .wpcf7-spinner{ margin:12px auto 0; display:block; }

/* ---------- WP core bits the design didn't cover ---------- */
.entry-content .wp-caption{ max-width:100%; }
.entry-content .sticky{ position:static; }
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.admin-bar .site-header{ top:32px; }
@media (max-width:782px){ .admin-bar .site-header{ top:46px; } }

/* pagination separator + any classes WP emits that we didn't remap */
.pagination .dots-sep{ color:var(--ink-60); }
.pagination .page-numbers{ /* fallback if the remap in vilit_pagination misses one */
  min-width:34px; height:34px; display:grid; place-items:center; padding-inline:8px;
  font-family:var(--body); font-weight:var(--w-bold); font-size:14px; border-radius:6px;
}
.search-form{ width:100%; }

/* ==========================================================================
   23. CREATIVE MEDIA SLIDER + NUMBERED CAROUSEL PAGINATION
   ========================================================================== */

/* ---------- Media cards: white box on a coloured offset ----------
   Same construction as the home page pillars — filter on the OUTER element,
   clip-path on the INNER. They cannot share an element: clip-path runs after
   the filter and would cut the offset layer off. ---------------------------- */
.media-card{
  --notch:26px;
  filter:drop-shadow(10px 10px 0 var(--accent-soft))
         drop-shadow(0 10px 20px rgba(78,40,22,.10));
  transition:transform .2s ease;
}
.media-card--red   { --accent:#EB1C26; --accent-soft:#F4BAB5; }
.media-card--orange{ --accent:#F5901E; --accent-soft:#FBDDB6; }
.media-card--blue  { --accent:#3B7DD8; --accent-soft:#C0D6F2; }

.media-card__inner{
  background:var(--white);
  padding:10px 10px 4px;
  height:100%;
  display:flex; flex-direction:column;
  clip-path:polygon(
    0 0, 100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%
  );
}
.media-card:hover{ transform:translateY(-4px); }
.media-card .ratio{ border-radius:3px; }
.media-card__meta{ padding:14px 8px 18px; }
.media-card__meta .tag{ display:block; margin-bottom:4px; }
.media-card__meta h3{ font-size:32px; }

/* keyboard focus, since strip cards are clickable */
.media-card:focus-visible{ outline:3px solid var(--red); outline-offset:4px; }

/* ---------- The reel strip ---------- */
.reel .media-row{ margin-top:100px; }


/* ---------- Numbered pagination inside a JS carousel ----------
   The buttons are <button>, not <a>, so they need the link styling reset. */
[data-carousel-pagination] .pagination{ margin-top:40px; }
[data-carousel-pagination] .pagination button{
  min-width:34px; height:34px; padding-inline:8px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:var(--ink);
  font-family:var(--body); font-weight:var(--w-bold); font-size:14px;
  border-radius:6px; transition:color .18s ease;
}
[data-carousel-pagination] .pagination button:hover{ color:var(--red); }
[data-carousel-pagination] .pagination button.nav-arrow{
  width:34px; min-width:auto; padding:0; border-radius:50%;
  background:var(--orange); color:#fff;
}
[data-carousel-pagination] .pagination button.nav-arrow:hover{ background:var(--red); color:#fff; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .reel .media-row{ margin-top:34px; }
}

/* Strip cards do double duty: the poster promotes the item to the stage,
   the play dot plays it. So the dot must NOT cover the whole poster —
   otherwise the card can only ever be played, never selected. */
.reel .media-card .play{
  inset:auto; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:auto; height:auto; background:none;
}
.reel .media-card .play:hover{ background:none; }
.reel .media-card .play:hover .play__dot{ transform:scale(1.12); }