/* ==========================================================================
   CarlosVA — site.css
   Single stylesheet: fonts, design tokens, base, components, motion.
   Design source of truth: design-system/carlosva/MASTER.md
   Motion snippets: transitions-dev (t-* classes) — pasted verbatim, do not
   collapse shorthands or strip reduced-motion guards.
   ========================================================================== */

/* ── Fonts (self-hosted, from former assets/fonts.css) ──────────────────── */
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/f0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/f1.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/f2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/f3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Comic Neue';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/f4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  /* Brand palette (LOCKED) */
  --ink: #1a0a2e;
  --purple-deep: #2A1245;
  --purple: #5D3A8E;
  --lavender: #C9B1E8;
  --lavender-pale: #E8DCF7;
  --yellow: #FFD93B;
  --red: #F2545B;
  --paper: #fff;
  --dot: #a986d6;
  /* Contrast-safe pairings (see MASTER.md) */
  --text-on-lavender: var(--purple-deep);
  --text-on-dark: var(--lavender-pale);
  --link-on-dark: var(--yellow);

  /* Typography */
  --font-display: 'Bangers', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
  --fs-display: clamp(2.9rem, 6.5vw + 1rem, 4.75rem);
  --fs-h2: clamp(2.1rem, 3.5vw + 0.9rem, 3.25rem);
  --fs-h3: clamp(1.5rem, 1vw + 1.1rem, 1.95rem);
  --fs-lg: clamp(1.15rem, 0.6vw + 1rem, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;

  /* Spacing / layout */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --section-pad: clamp(3.5rem, 8vw, 5rem);
  --container: 1180px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Neubrutalist effect system */
  --border-comic: 3px solid #000;
  --border-comic-thin: 2px solid #000;
  --shadow-pop-sm: 4px 4px 0 #000;
  --shadow-pop: 6px 6px 0 #000;
  --shadow-pop-lg: 9px 9px 0 #000;
  --shadow-card: 8px 8px 0 var(--purple-deep);
  --shadow-card-hover: 12px 14px 0 var(--purple-deep);

  /* Z scale */
  --z-nav: 50;
  --z-menu: 60;
  --z-skip: 100;

  /* ── transitions-dev motion tokens (shared scale — names are load-bearing,
        snippets below read them; do not rename) ─────────────────────────── */
  --duration-stagger: 40ms;
  --duration-micro: 80ms;
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-medium: 350ms;
  --duration-slow: 400ms;
  --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);
  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --distance-large: 30px;
  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-small: 0.98;
  --scale-tiny: 0.99;
  --blur-small: 2px;
  --blur-medium: 3px;
  --blur-large: 8px;

  /* transitions-dev per-snippet tunables (18 texts-reveal) */
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* (05 menu-dropdown) */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* (09 icon-swap) */
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  /* (10 success-check) */
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* (12 error-state-shake) */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  /* (24 learn-more-hover) */
  --learn-shift: 2px;
  --learn-spread: 8deg;
  --learn-in: 350ms;
  --learn-out: 350ms;
  --learn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* (11 avatar-group-hover — lift tuned up for large team cards) */
  --avatar-lift: -10px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.04;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  /* (25 checkbox-check) */
  --check-box: 150ms;
  --check-draw: 350ms;
  --check-delay: 0ms;
  --check-uncheck: 150ms;
  --check-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --check-len: 15;
  /* (23 like-button — particle burst, tuned for the hero bursts) */
  --like-color: #2A1245;
  --like-fill: 150ms;
  --like-pop: 350ms;
  --like-pop-ease: cubic-bezier(0.34, 1.96, 0.64, 1);
  --like-particle-dur: 600ms;
  --like-particle-dist: 36px;
  --like-particle-size: 4px;
  --like-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* (04 text-states-swap) */
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  /* (19 card-tilt) */
  --tilt-perspective: 1000px;
  --tilt-return: 1000ms;
  --tilt-return-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-follow: 400ms;
  --tilt-follow-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-glare-opacity: 0.32;
  --tilt-glare-fade: 300ms;
  --tilt-glare-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
}
h1, h2, h3, p, ul, figure, blockquote, fieldset { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--purple); }
a:hover { color: var(--purple-deep); }
button { font: inherit; }
a, button, input, select, textarea, label { touch-action: manipulation; }
[id] { scroll-margin-top: 96px; }
::selection { background: var(--yellow); color: var(--ink); }
::placeholder { color: #5f5375; opacity: 1; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.top-bar :focus-visible,
.site-nav :focus-visible,
.site-footer :focus-visible { outline-color: var(--yellow); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: 12px;
  z-index: var(--z-skip);
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 1.5px;
  text-decoration: none;
  padding: 10px 18px;
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop-sm);
}
.skip-link:focus-visible { top: 12px; }

/* ── Typography helpers ─────────────────────────────────────────────────── */
h1, h2, h3, legend {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 2px;
}
.comic-title {
  font-size: var(--fs-display);
  color: #fff;
  -webkit-text-stroke: 2px #000;
  text-shadow: 3px 3px 0 #000, 9px 9px 0 var(--purple);
  text-wrap: pretty;
}
.comic-title--purple {
  font-size: var(--fs-h2);
  color: var(--purple);
  text-shadow: 4px 4px 0 var(--lavender);
  text-wrap: pretty;
}
.comic-title--deep {
  font-size: var(--fs-h2);
  color: var(--purple-deep);
  text-shadow: 3px 3px 0 #fff;
  text-wrap: pretty;
}
.lead { font-size: var(--fs-lg); font-weight: 700; }

/* ── Layout utilities ───────────────────────────────────────────────────── */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }
.section { padding-block: var(--section-pad); }
.dot-bg {
  background-color: var(--lavender);
  background-image: radial-gradient(var(--dot) 13%, transparent 14%);
  background-size: 20px 20px;
}
.center { text-align: center; }
.stack-center { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

/* ── Top bar ────────────────────────────────────────────────────────────── */
.top-bar {
  background: var(--ink);
  color: var(--text-on-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 28px;
  padding: 8px 16px;
}
.top-bar a { color: var(--link-on-dark); }

/* ── Nav ────────────────────────────────────────────────────────────────── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--purple-deep);
  border-bottom: 3px solid #000;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
}
.nav-home {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
.nav-home img { width: 46px; height: 46px; object-fit: contain; border-radius: var(--radius-sm); }
.nav-home span {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 1.5px;
  color: #fff;
}
.site-nav .nav-toggle {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--purple-deep);
  color: #fff;
  border: var(--border-comic-thin);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1.5px;
}
.nav-menu a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 8px 2px; /* ≥44px touch target with line height */
  transition: color var(--duration-quick), transform var(--duration-quick);
}
.nav-menu a:hover { color: var(--yellow); transform: translateY(-2px) rotate(-2deg); }
body[data-page="home"]     .nav-menu a[data-nav="home"],
body[data-page="about"]    .nav-menu a[data-nav="about"],
body[data-page="services"] .nav-menu a[data-nav="services"],
body[data-page="book"]     .nav-menu a[data-nav="book"],
body[data-page="blog"]     .nav-menu a[data-nav="blog"],
.nav-menu a[aria-current="page"] { color: var(--yellow); }
.nav-menu .nav-cta {
  background: var(--yellow);
  color: var(--ink);
  padding: 8px 18px;
  border: var(--border-comic);
  border-radius: 10px;
  box-shadow: var(--shadow-pop-sm);
  transition: transform var(--duration-quick), box-shadow var(--duration-quick);
}
.nav-menu .nav-cta:hover {
  color: var(--ink);
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #000;
}

/* Mobile/tablet nav (<64em): hamburger + dropdown panel — the six wide
   Bangers items only fit on one line from 1024px up */
@media (max-width: 63.99em) {
  .js .site-nav .nav-toggle { display: inline-grid; }
  .js .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--purple-deep);
    border-bottom: 3px solid #000;
    padding: 8px 16px 16px;
  }
  .js .nav-menu a { padding: 12px 8px; }
  .js .nav-menu .nav-cta { margin-top: 10px; text-align: center; }
  /* No-JS fallback: menu renders in flow, stacked and usable */
  html:not(.js) .site-nav { flex-wrap: wrap; }
  html:not(.js) .nav-menu { width: 100%; flex-direction: column; align-items: flex-start; }
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1vw + 1.1rem, 1.55rem);
  letter-spacing: 1.5px;
  text-decoration: none;
  text-align: center;
  color: var(--ink);
  padding: 13px 30px;
  border: var(--border-comic);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  transition: transform var(--duration-quick), box-shadow var(--duration-quick);
}
.btn--primary { background: var(--yellow); }
.btn--secondary { background: var(--paper); }
.btn:hover, .btn:active {
  color: var(--ink);
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 #000;
}
.btn[disabled] { opacity: 0.5; cursor: progress; transform: none; box-shadow: var(--shadow-pop); }

/* ── Badges, bursts, bubbles, cards ─────────────────────────────────────── */
.badge {
  display: inline-block;
  background: var(--purple-deep);
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 1.125rem;
  letter-spacing: 2px;
  padding: 7px 18px;
  border: var(--border-comic-thin);
  border-radius: var(--radius-pill);
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 #000;
}
.burst {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  background: var(--yellow);
  border: var(--border-comic);
  border-radius: 50%;
  box-shadow: var(--shadow-pop-sm);
}
.burst--red { background: var(--red); color: #fff; }
.card {
  background: var(--paper);
  border: var(--border-comic);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 30px 32px;
}
.card--hover { transition: transform var(--duration-fast) var(--ease-smooth-out), box-shadow var(--duration-fast) var(--ease-smooth-out); }
.card--hover:hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: var(--shadow-card-hover); }
.speech-bubble {
  position: relative;
  background: var(--paper);
  border: var(--border-comic);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 30px;
}
.speech-bubble::after {
  content: '';
  position: absolute;
  left: 46px;
  bottom: -27px;
  border: 14px solid transparent;
  border-top-color: #000;
}
.tick-list li, .star-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.tick-list li { font-size: 1.125rem; font-weight: 700; }
.tick-list li + li, .star-list li + li { margin-top: 14px; }
.tick-list .glyph, .star-list .glyph {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--purple);
}

/* ── Marquee ────────────────────────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  background: var(--yellow);
  border-block: 3px solid #000;
  padding: 10px 0;
  transform: rotate(-1.2deg) scale(1.03);
}
.marquee__track { display: flex; width: max-content; }
.marquee__track span,
.marquee__static {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--ink);
  padding-right: 40px;
}
.marquee__static { display: none; }

/* ── Hero collage (Home) ────────────────────────────────────────────────── */
.hero-grid {
  display: grid;
  gap: 44px;
  align-items: center;
  padding-block: var(--section-pad);
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero-ctas { display: flex; gap: 18px; flex-wrap: wrap; }
.hero-art { position: relative; height: 500px; margin-inline: auto; width: min(100%, 520px); }
.hero-art__ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  background: repeating-conic-gradient(#b08fd9 0deg 10deg, transparent 10deg 20deg);
  opacity: 0.65;
}
.hero-art .polaroid {
  border: var(--border-comic);
  box-shadow: 6px 6px 0 var(--purple-deep);
  background: var(--paper);
  transition: transform var(--duration-fast);
}
.hero-art__side { position: absolute; }
.hero-art__side--1 { left: 0; top: 26px; transform: rotate(-7deg); }
.hero-art__side--2 { right: 0; top: 60px; transform: rotate(6deg); }
.hero-art__side--3 { left: 34px; bottom: 0; transform: rotate(5deg); }
.hero-art__side .polaroid { width: 150px; height: auto; }
.hero-art__side--2 .polaroid { width: 160px; }
.hero-art__side .polaroid:hover { transform: scale(1.06); }
.hero-art__founder {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -52%) rotate(-2deg);
  width: 245px; height: auto;
  z-index: 2;
  box-shadow: 9px 9px 0 var(--purple-deep);
}
.hero-art__founder:hover { transform: translate(-50%, -52%) rotate(0deg) scale(1.03); }
.hero-art .burst--pow {
  position: absolute;
  top: -6px; right: 64px;
  z-index: 3;
  width: 88px; height: 88px;
  font-size: 27px;
  transform: rotate(9deg);
}
.hero-art .burst--zap {
  position: absolute;
  bottom: 34px; right: 44px;
  z-index: 3;
  width: 76px; height: 76px;
  font-size: 24px;
  transform: rotate(-10deg);
}
@media (max-width: 29.99em) {
  .hero-art { height: 400px; }
  .hero-art__ring { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
  .hero-art__side .polaroid { width: 108px; }
  .hero-art__side--2 .polaroid { width: 116px; }
  .hero-art__founder { width: 190px; }
  .hero-art .burst--pow { width: 70px; height: 70px; font-size: 21px; right: 24px; }
  .hero-art .burst--zap { width: 60px; height: 60px; font-size: 19px; right: 12px; }
}

/* ── Team cards (About) ─────────────────────────────────────────────────── */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 34px;
}
.team-card { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 250px; }
.team-card img {
  width: 100%;
  background: var(--paper);
  border: var(--border-comic);
  box-shadow: 6px 6px 0 var(--purple-deep);
  transition: transform var(--duration-fast);
}
.team-card:nth-child(odd) img { transform: rotate(-3deg); }
.team-card:nth-child(even) img { transform: rotate(3deg); }
.team-card:hover img { transform: rotate(0deg); }
.team-card figcaption { text-align: center; }
.team-card figcaption h3 {
  display: block;
  font-size: 1.45rem;
  letter-spacing: 1.5px;
  color: var(--purple-deep);
}
.team-card figcaption span { font-weight: 700; font-size: var(--fs-sm); }

/* ── Testimonials scaffold ──────────────────────────────────────────────── */
.testimonial-grid { display: grid; gap: 40px 34px; }
.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}
.testimonial p { font-size: 1.0625rem; }
.testimonial footer { font-weight: 700; color: var(--purple-deep); margin-top: auto; }
.sample-flag {
  position: absolute;
  top: -16px; right: -10px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border: var(--border-comic-thin);
  border-radius: var(--radius-pill);
  transform: rotate(6deg);
  box-shadow: 2px 2px 0 #000;
}

/* ── City band ──────────────────────────────────────────────────────────── */
.city-band {
  border-block: 3px solid #000;
  background-image: url('cityscape-900.webp');
  background-size: cover;
  background-position: center;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 24px;
}
@media (min-width: 48em) {
  .city-band { background-image: url('cityscape-1600.webp'); }
}
.city-band img {
  width: 230px; height: 230px;
  border: var(--border-comic);
  box-shadow: var(--shadow-pop-lg);
  transform: rotate(-3deg);
  transition: transform var(--duration-fast);
}
.city-band img:hover { transform: rotate(0deg) scale(1.04); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-card {
  background: var(--paper);
  border: var(--border-comic);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 520px;
}
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row > .form-field { flex: 1 1 140px; }
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field > label, fieldset legend { font-weight: 700; font-size: var(--fs-sm); }
fieldset {
  border: var(--border-comic-thin);
  border-radius: var(--radius-sm);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
fieldset legend {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 1.5px;
  color: var(--purple);
  padding-inline: 6px;
}
input, select, textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: var(--border-comic-thin);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 44px;
  transition: box-shadow var(--duration-quick), border-color var(--duration-quick);
}
textarea { resize: vertical; min-height: 96px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--yellow);
}
.choice-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.choice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: var(--fs-sm);
  min-height: 44px;
  cursor: pointer;
}
.choice input { min-height: 0; width: 20px; height: 20px; accent-color: var(--purple); cursor: pointer; }
.form-hint { font-size: 0.875rem; font-weight: 700; color: var(--purple-deep); }
.form-status { font-weight: 700; text-align: center; min-height: 1.4em; }
.form-error-msg { color: #C11E27; }
form.is-sent .form-row, form.is-sent .form-field, form.is-sent fieldset,
form.is-sent .form-hint, form.is-sent button[type="submit"] { display: none; }
.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 12px 0 4px;
}
.form-success.is-visible { display: flex; }
.form-success .t-success-check { color: #178A3C; }
.form-success strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: 1.5px; color: var(--purple); }
.field-error { color: #C11E27; font-size: 0.875rem; font-weight: 700; }
input.t-input.is-error, textarea.t-input.is-error, select.t-input.is-error, fieldset.t-input.is-error { border-color: #C11E27; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  color: var(--text-on-dark);
  border-top: 3px solid #000;
  padding: 56px 28px 0;
  font-size: 1rem;
}
.site-footer .cols {
  max-width: 1080px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 44px;
  align-items: start;
}
.site-footer .col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; line-height: 1.5; }
.site-footer .col > img {
  width: 130px; height: 130px;
  border: var(--border-comic);
  box-shadow: 5px 5px 0 var(--purple);
  transform: rotate(-3deg);
}
.site-footer .col-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  color: var(--yellow);
  margin-bottom: 4px;
}
.site-footer .tagline {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 1.5px;
  color: var(--yellow);
  margin-top: 8px;
}
.site-footer a { color: var(--link-on-dark); }
.site-footer .social a {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 1px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: transform var(--duration-quick);
}
.site-footer .social { display: flex; gap: 16px; margin-top: 4px; }
.site-footer .social a:hover { transform: translateY(-2px) rotate(-2deg); }
.site-footer .legal {
  text-align: center;
  padding: 24px 0 20px;
  margin-top: 44px;
  border-top: 2px solid rgba(255, 255, 255, 0.15);
  font-size: var(--fs-sm);
}

/* ── Scroll reveal (JS-gated so no-JS users always see content) ─────────── */
.js .reveal { opacity: 0; translate: 0 26px; }
.js .reveal.is-revealed {
  opacity: 1;
  translate: 0 0;
  transition: opacity var(--duration-slow) var(--ease-smooth-out), translate var(--duration-slow) var(--ease-smooth-out);
}

/* ── Motion: brand keyframes (opt-in only — never run under reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 22s linear infinite; }
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track { animation-play-state: paused; }
  .hero-art__ring { animation: spin 90s linear infinite; }
  .floaty { animation: floaty 5s ease-in-out infinite; }
  .floaty--slow { animation-duration: 6s; animation-delay: 0.8s; }
  .pop-in { animation: popIn var(--duration-very-slow) ease-out both; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { transform: none; }
  .marquee__track { display: none; }
  .marquee__static {
    display: block;
    text-align: center;
    white-space: normal;
    padding: 0 16px;
  }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes popIn {
  from { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  60% { transform: scale(1.08) rotate(2deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ==========================================================================
   transitions-dev snippets (pasted verbatim; hooks documented per reference)
   ========================================================================== */

/* ── 18 texts-reveal (.t-stagger / .t-stagger-line, JS adds .is-shown) ──── */
.js .t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.js .t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.js .t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.js .t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }
.js .t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.js .t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ── 05 menu-dropdown (mobile nav panel) ────────────────────────────────── */
@media (max-width: 63.99em) {
  .js .t-dropdown {
    transform-origin: top left;
    transform: scale(var(--dropdown-pre-scale));
    opacity: 0;
    pointer-events: none;
    transition:
      transform var(--dropdown-open-dur) var(--dropdown-ease),
      opacity   var(--dropdown-open-dur) var(--dropdown-ease);
    will-change: transform, opacity;
  }
  .js .t-dropdown[data-origin="top-right"]     { transform-origin: top right; }
  .js .t-dropdown[data-origin="top-center"]    { transform-origin: top center; }
  .js .t-dropdown[data-origin="bottom-left"]   { transform-origin: bottom left; }
  .js .t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
  .js .t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }
  .js .t-dropdown.is-open {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
  }
  .js .t-dropdown.is-closing {
    transform: scale(var(--dropdown-closing-scale));
    opacity: 0;
    pointer-events: none;
    transition:
      transform var(--dropdown-close-dur) var(--dropdown-ease),
      opacity   var(--dropdown-close-dur) var(--dropdown-ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}

/* ── 09 icon-swap (hamburger ↔ close; submit label ↔ sending) ───────────── */
.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}
@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}

/* ── 10 success-check (form sent) ───────────────────────────────────────── */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path {
  stroke-dasharray: 49; /* path.getTotalLength() of the check path below, +1 */
  stroke-dashoffset: 49;
}
.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate {
  from { transform: rotate(var(--check-rotate-from)); }
  to   { transform: rotate(0deg); }
}
@keyframes t-check-blur {
  from { filter: blur(var(--check-blur-from)); }
  to   { filter: blur(0); }
}
@keyframes t-check-bob {
  from { translate: 0 var(--check-y-amount); }
  to   { translate: 0 0; }
}
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ── 12 error-state-shake (form validation) ─────────────────────────────── */
.t-input {
  transition: border-color 150ms ease-out;
  will-change: transform;
}
.t-input.is-error {
  transition: border-color var(--revert-dur, 280ms) ease-out;
}
.t-error-msg {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--revert-dur, 280ms) ease-out,
    visibility 0s linear var(--revert-dur, 280ms);
}
.t-input-wrap.is-error .t-error-msg {
  opacity: 1;
  visibility: visible;
  transition:
    opacity    var(--revert-dur, 280ms) ease-out,
    visibility 0s linear 0s;
}
.t-input.is-shaking {
  animation: t-input-shake calc(
      var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2
    ) linear;
}
@keyframes t-input-shake {
  0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }
  28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }
  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .t-input { animation: none !important; transform: none !important; }
}

/* ── 24 learn-more-hover (chevron links) ────────────────────────────────── */
.t-learn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 1.5px;
  text-decoration: none;
  color: var(--purple);
  min-height: 44px;
}
.t-learn:hover { color: var(--purple-deep); }
.t-learn-chevron {
  display: inline-flex;
  transform: translateX(0);
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn-arm {
  transform-box: view-box;
  transform-origin: 10px 8px;
  vector-effect: non-scaling-stroke;
  transition: transform var(--learn-out) var(--learn-ease);
}
.t-learn:hover .t-learn-chevron { transform: translateX(var(--learn-shift)); transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm { transition-duration: var(--learn-in); }
.t-learn:hover .t-learn-arm-top { transform: rotate(var(--learn-spread)); }
.t-learn:hover .t-learn-arm-bot { transform: rotate(calc(var(--learn-spread) * -1)); }
@media (prefers-reduced-motion: reduce) {
  .t-learn-chevron, .t-learn-arm { transition: none !important; }
}

/* ── 19 card-tilt (Services cards; pointer tracked on flat .t-tilt) ─────── */
.t-tilt-card {
  position: relative;
  border-radius: 14px;
  transform:
    perspective(var(--tilt-perspective))
    rotateX(var(--tilt-rx, 0deg))
    rotateY(var(--tilt-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--tilt-return) var(--tilt-return-ease);
  will-change: transform;
}
.t-tilt-card.is-tilting {
  transition: transform var(--tilt-follow) var(--tilt-follow-ease);
}
.t-tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.48), rgba(255,255,255,0.06) 52%, rgba(255,255,255,0) 84%),
    radial-gradient(circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.22), rgba(255,255,255,0.04) 58%, rgba(255,255,255,0) 78%),
    radial-gradient(circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.10), rgba(255,255,255,0) 88%);
  transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
}
.t-tilt.is-hover .t-tilt-glare { opacity: var(--tilt-glare-opacity); }
@media (prefers-reduced-motion: reduce) {
  .t-tilt-card { transform: none !important; transition: none !important; }
}

/* ── 11 avatar-group-hover (About team row; JS writes --shift/--scale-active) */
.t-avatar {
  transform-origin: center;
  /* translateY before scale so scale doesn't amplify the lift offset. */
  transform:
    translateY(var(--shift, 0px))
    scale(var(--scale-active, 1));
  transition: transform var(--avatar-dur) var(--avatar-ease-in);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .t-avatar { transition: none !important; transform: none !important; }
}

/* ── 25 checkbox-check (Book form; state driven by the native :checked) ─── */
.choice input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  cursor: pointer;
}
.choice { position: relative; }
.t-check {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  background: var(--paper);
  border: var(--border-comic-thin);
  border-radius: 7px;
  transition:
    background var(--check-box) var(--check-ease),
    box-shadow var(--check-box) var(--check-ease);
}
.t-check svg { width: 15px; height: 15px; overflow: visible; }
.t-check svg path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--check-len, 15);
  stroke-dashoffset: var(--check-len, 15);
  transition: stroke-dashoffset var(--check-uncheck) var(--check-ease);
}
.choice input[type="checkbox"]:checked ~ .t-check { background: var(--yellow); }
.choice input[type="checkbox"]:checked ~ .t-check svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--check-draw) var(--check-ease) var(--check-delay);
}
.choice input[type="checkbox"]:focus-visible ~ .t-check {
  box-shadow: 0 0 0 3px var(--yellow);
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .t-check, .t-check svg path { transition: none !important; }
}

/* ── 23 like-button particles + 04 text-swap (hero burst easter egg) ────── */
.t-like-particles { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; color: var(--like-color); }
.t-like-particles i {
  position: absolute;
  left: calc(var(--like-particle-size) * var(--psize, 1) / -2);
  top: calc(var(--like-particle-size) * var(--psize, 1) / -2);
  width: calc(var(--like-particle-size) * var(--psize, 1));
  height: calc(var(--like-particle-size) * var(--psize, 1));
  border-radius: 50%; background: currentColor; opacity: 0;
}
@keyframes t-like-burst {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4); }
  20%  { opacity: 1; transform: translate(calc(var(--px) * 0.25), calc(var(--py) * 0.25)) scale(1); }
  100% { opacity: 0; transform: translate(var(--px), var(--py)) scale(var(--p-end-scale, 0.6)); }
}
.t-like.is-bursting .t-like-particles i {
  animation: t-like-burst var(--pdur, var(--like-particle-dur)) ease-out var(--pdelay, 0ms) forwards;
}
.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter    var(--text-swap-dur) var(--text-swap-ease),
    opacity   var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .t-like-particles i { animation: none !important; }
  .t-text-swap { transition: none !important; }
}
.burst.t-like { position: absolute; cursor: pointer; user-select: none; }
.burst--pow.t-like .t-like-particles { color: var(--purple-deep); }
.burst--zap.t-like .t-like-particles { color: var(--yellow); }

/* ── Page-specific bits ─────────────────────────────────────────────────── */
/* Services */
.service-grid { display: grid; gap: 36px; max-width: 1120px; width: 100%; }
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 34px 30px 30px;
  height: 100%;
}
.service-card .num {
  position: absolute;
  top: -22px; left: 24px;
  width: 52px; height: 52px;
  font-size: 24px;
}
.service-card h2 { font-size: var(--fs-h3); letter-spacing: 1.5px; color: var(--purple); }
.service-card ul { display: flex; flex-direction: column; gap: 8px; font-size: 1rem; }
.service-card ul li { display: flex; gap: 10px; align-items: baseline; }
.service-card img {
  width: 100%;
  margin-top: auto;
  border: var(--border-comic-thin);
  box-shadow: 4px 4px 0 var(--lavender);
}
/* Contact section */
.contact-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
}
.contact-intro { display: flex; flex-direction: column; gap: 40px; max-width: 380px; }
.contact-intro > img {
  width: 230px; height: 230px;
  margin-left: 26px;
  border: var(--border-comic);
  box-shadow: 6px 6px 0 var(--purple-deep);
  transform: rotate(-2deg);
  transition: transform var(--duration-fast);
}
.contact-intro > img:hover { transform: rotate(0deg) scale(1.03); }
.speech-bubble h2 { font-size: clamp(2rem, 3vw + 0.8rem, 3.1rem); color: var(--purple); text-shadow: 3px 3px 0 var(--lavender); }
/* Empty state / 404 */
.empty-card { max-width: 560px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.empty-card .big {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3vw + 1rem, 2.6rem);
  letter-spacing: 1.5px;
  color: var(--purple);
}
/* Fact strip (About) */
.fact-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.fact-strip .badge { transform: rotate(0deg); font-size: 1.05rem; }
.fact-strip .badge:nth-child(odd) { transform: rotate(-2deg); }
.fact-strip .badge:nth-child(even) { transform: rotate(2deg); }

/* ── Breakpoints: grids ─────────────────────────────────────────────────── */
@media (min-width: 48em) {
  .hero-grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 47.99em) {
  .grid-2 { display: flex; flex-direction: column; gap: 34px; }
}

/* ── Global reduced-motion kill-switch (belt & braces) ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; translate: none; }
}