/* =====================================================================
   javiel.net — museum.css v3 ("Signal", 2026-10-08)
   The single design layer. The legacy portfolio.css / performance-archive.css /
   fable-card.css chains are no longer enqueued and the jp-performance-site /
   jp-fable-site body hooks are gone; everything is scoped to body.jp-27.

   Cascade note: these are comment-delimited layers, not @layer blocks.
   Elementor's per-post CSS is unlayered and uses 0,4,0 selectors, so the
   properties it hard-codes (fonts, sizes, colours, paddings, widths) are
   overridden here with !important; everything else relies on source order.

   L0  reset + tokens
   L1  typography
   L2  layout grid + chrome (header, nav, sections, buttons, footer)
   L3  home
   L4  subpages
   L5  motion states driven by museum-motion.js v3
   ===================================================================== */

/* ---------------------------------------------------------------------
   L0 — reset + tokens
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter Tight';
  src: url('assets/fonts/inter-tight-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@property --ps { syntax: '<number>'; inherits: false; initial-value: 1.12; }

:root {
  --white: #ffffff;
  --g95: #f3f3f3;
  --g90: #e7e7e7;
  --g85: #dcdcdc;
  --g60: #9d9d9d;   /* decorative / >=24px on white only */
  --g45: #6f6f6f;   /* AA labels on white (5.0:1) */
  --g25: #3e3e3e;   /* body copy (10.6:1) */
  --g12: #212121;
  --ink: #000000;
  --acc: #2b44ff;   /* acid signal: fills behind black ink only, never text on white */

  --sans: 'elza', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ui: 'Inter Tight', 'elza', 'Helvetica Neue', Arial, sans-serif;
  --cjk: 'elza', 'PingFang TC', 'PingFang SC', 'Hiragino Sans', 'Noto Sans TC', 'Noto Sans SC', 'Microsoft JhengHei', sans-serif;

  --max: 1440px;
  --gut: clamp(20px, 4.45vw, 64px);
  --cg: clamp(16px, 1.7vw, 24px);
  --cols: 12;
  --hdr: 72px;
  --sec: clamp(88px, 5.5rem + 4vw, 168px);   /* 145px @1440, 104px @390 */

  --t-hero: clamp(46px, 1.4rem + 5vw, 112px);
  --t-h1: clamp(42px, 1.2rem + 4.6vw, 104px);
  --t-h2: clamp(36px, 1rem + 3.9vw, 88px);
  --t-h3: clamp(24px, 1rem + 1.2vw, 36px);
  --t-xl: clamp(40px, 1rem + 4.8vw, 112px);
  --t-lede: clamp(18px, 1rem + .35vw, 22px);
  --t-body: 17px;
  --t-label: 13px;

  --e-expo: cubic-bezier(.16, 1, .3, 1);
  --e-sharp: cubic-bezier(.75, 0, .25, 1);
  --e-out: cubic-bezier(.215, .61, .355, 1);
}
@media (max-width: 1024px) { :root { --cols: 8; } }
@media (max-width: 767px)  { :root { --cols: 4; --hdr: 64px; --t-body: 16px; } }

/* Elementor kit globals (Roboto / #6EC1E4 / #61CE70) → ink + Elza */
body.jp-27 {
  --e-global-color-primary: #000;
  --e-global-color-secondary: #3e3e3e;
  --e-global-color-text: #3e3e3e;
  --e-global-color-accent: #000;
  --e-global-typography-primary-font-family: 'elza';
  --e-global-typography-secondary-font-family: 'elza';
  --e-global-typography-text-font-family: 'elza';
  --e-global-typography-accent-font-family: 'Inter Tight';
  --e-global-typography-primary-font-weight: 400;
  --e-global-typography-secondary-font-weight: 400;
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-weight: 400;
  --container-max-width: var(--max);
}

html { background: var(--white); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.jp-27 {
  margin: 0;
  background: var(--white) !important;
  color: var(--ink);
  font-family: var(--sans) !important;
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.jp-27 *, .jp-27 *::before, .jp-27 *::after { box-shadow: none; text-shadow: none; }
.jp-27 ::selection { background: var(--acc); color: var(--white); }
.jp-27 img { max-width: 100%; height: auto; }
.jp-27 main:focus { outline: none; }

/* one font system: Elza for everything, Inter Tight for UI (set later) */
.jp-27 .elementor :is(h1, h2, h3, h4, h5, h6, p, li, a, span, div, label, input, select, textarea, button, strong) {
  font-family: var(--sans) !important;
}
.jp-27 .elementor :is(h1, h2, h3, h4, h5, h6, .elementor-heading-title) { font-weight: 400 !important; }
.jp-27 .elementor :is(strong, b) { font-weight: 700 !important; }
.jp-27 .elementor em { font-style: normal !important; color: inherit !important; }

/* containers: zero Elementor's default chrome; components opt back in */
.jp-27 .e-con {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  --widgets-spacing: 0px;
}
.jp-27 .e-con > .e-con-inner {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  gap: 0 !important;
  background: transparent !important;
}
.jp-27 .e-con .e-con { width: auto !important; max-width: none !important; min-width: 0; flex: 0 1 auto; }
.jp-27 .elementor-widget { margin: 0 !important; min-width: 0; }
.jp-27 .elementor-widget-text-editor p { margin: 0; }
.jp-27 .elementor-widget-text-editor p + p { margin-top: 1em; }

/* skip link + focus */
.jp-27 .jp-skip-link {
  position: fixed; left: 16px; top: -100px; z-index: 10000;
  padding: 12px 18px; background: var(--ink); color: var(--white) !important;
  font: 400 14px/1 var(--ui); text-decoration: none; border-radius: 999px;
}
.jp-27 .jp-skip-link:focus { top: 12px; }
.jp-27 :focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px var(--acc) !important;
  border-radius: 2px;
}
.jp-27 .jp-footer :focus-visible { outline-color: var(--white) !important; }

/* grain: static SVG noise, decorative, no blend modes (cheap to composite) */
body.jp-27::after {
  content: '';
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 -1.65'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------------------------------------------------------------------
   L1 — typography
   --------------------------------------------------------------------- */
.jp-27 .elementor .elementor-heading-title {
  color: var(--ink) !important;
  letter-spacing: -.02em !important;
  line-height: 1.04 !important;
  text-wrap: balance;
  font-kerning: normal;
  margin: 0;
}

/* display H1s */
.jp-27 .jp-display .elementor-heading-title {
  font-size: var(--t-h1) !important;
  line-height: .96 !important;
  letter-spacing: -.035em !important;
}
.jp-27.home .jp-display .elementor-heading-title { font-size: var(--t-hero) !important; line-height: .94 !important; }

/* H2 — section titles */
.jp-27 :is(.jp-section-title, .jp-feature-title, .jp-contact-title) .elementor-heading-title {
  font-size: var(--t-h2) !important;
  line-height: .98 !important;
  letter-spacing: -.03em !important;
}
.jp-27 .jp-contact-title .elementor-heading-title { font-size: var(--t-xl) !important; line-height: .94 !important; letter-spacing: -.04em !important; }

/* H3 — card titles */
.jp-27 :is(.jp-card-title, .jp-video-title, .jp-tool-title, .jp-index-title, .jp-exp-role) .elementor-heading-title {
  font-size: var(--t-h3) !important;
  line-height: 1.08 !important;
  letter-spacing: -.015em !important;
}
.jp-27 .jp-video-title--cjk .elementor-heading-title,
.jp-27 .jp-video-title .elementor-heading-title:lang(zh) { font-family: var(--cjk) !important; letter-spacing: 0 !important; }
/* CJK runs inside any heading get the CJK stack (set by motion JS, harmless without it) */
.jp-27 .m-cjk { font-family: var(--cjk) !important; letter-spacing: 0; }

/* body copy — never under 16px */
.jp-27 :is(.jp-copy, .jp-lede, .jp-card-role, .jp-tool-copy, .jp-metric-copy, .jp-exp-company, .jp-index-role, .jp-contact-note) :is(p, li),
.jp-27 :is(.jp-copy, .jp-lede, .jp-card-role, .jp-tool-copy, .jp-metric-copy, .jp-exp-company, .jp-index-role, .jp-contact-note).elementor-widget-text-editor {
  font-size: var(--t-body) !important;
  line-height: 1.6 !important;
  color: var(--g25) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  max-width: 62ch;
}
.jp-27 .jp-lede :is(p),
.jp-27 .jp-lede.elementor-widget-text-editor { font-size: var(--t-lede) !important; line-height: 1.5 !important; max-width: 40ch; }

/* labels: Inter Tight small caps, AA grey, accent tick */
.jp-27 :is(.jp-kicker, .jp-meta, .jp-card-index, .jp-num, .jp-caption, .jp-tool-index, .jp-index-no, .jp-exp-year, .jp-web-visual-label, .jp-portrait-caption, .jp-hero-index, .jp-index-state) :is(.elementor-heading-title, p),
.jp-27 :is(.jp-kicker, .jp-meta, .jp-card-index, .jp-hero-index).elementor-widget-text-editor {
  font-family: var(--ui) !important;
  font-size: var(--t-label) !important;
  line-height: 1.45 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--g45) !important;
  font-weight: 400 !important;
}
.jp-27 :is(.jp-kicker, .jp-meta) :is(.elementor-heading-title, p)::before {
  content: '';
  display: inline-block;
  width: .62em; height: .62em;
  margin-right: .7em;
  background: var(--acc);
  outline: 1px solid var(--ink);
  outline-offset: -1px;
  vertical-align: .02em;
}

/* links in running text */
.jp-27 .elementor-widget-text-editor a {
  color: var(--ink) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.jp-27 .elementor-widget-text-editor a:hover { text-decoration-color: var(--g45); }

/* ---------------------------------------------------------------------
   L2 — layout grid + chrome
   --------------------------------------------------------------------- */
/* frame: every top-level band gets the same max width + gutters */
.jp-27 :is(.jp-site-header, .jp-footer, .jp-page-hero, .jp-section,
  .elementor-element-a1, .elementor-element-b1, .elementor-element-d1, .elementor-element-e1) > .e-con-inner {
  max-width: var(--max) !important;
  margin-inline: auto !important;
  padding-inline: var(--gut) !important;
  box-sizing: border-box;
}
.jp-27 :is(.jp-main, .jp-page-main) { width: 100% !important; }
.jp-27 :is(.jp-main, .jp-page-main) > .e-con-inner { display: block !important; }

/* sections: generous rhythm, hairline between bands */
.jp-27 .jp-section,
.jp-27 :is(.elementor-element-b1, .elementor-element-d1, .elementor-element-e1) {
  position: relative;
  padding-block: var(--sec) !important;
  width: 100% !important;
}
.jp-27 .jp-section > .e-con-inner::before,
.jp-27 :is(.elementor-element-b1, .elementor-element-d1, .elementor-element-e1) > .e-con-inner::before {
  content: '';
  position: absolute;
  top: 0; left: var(--gut); right: var(--gut);
  height: 1px;
  background: var(--g90);
  transform-origin: left;
}
.jp-27 :is(.jp-section, .elementor-element-b1, .elementor-element-d1, .elementor-element-e1) > .e-con-inner { position: static; }

/* 12/8/4 column grid helper */
.jp-27 .m-grid,
.jp-27 :is(.jp-page-hero, .jp-section-intro, .jp-spotlight, .jp-about, .jp-feature, .jp-contact, .jp-experience, .jp-toolkit,
  .elementor-element-a1, .elementor-element-b1, .elementor-element-d1, .elementor-element-e1) > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--cg) !important;
  row-gap: 0 !important;
  align-items: start;
}
.jp-27 :is(.jp-page-hero, .jp-section-intro, .jp-spotlight, .jp-about, .jp-feature, .jp-contact, .jp-experience, .jp-toolkit,
  .elementor-element-a1, .elementor-element-b1, .elementor-element-d1, .elementor-element-e1) > .e-con-inner > * { grid-column: 1 / -1; }

/* sections that simply stack (video sections, web, current practice) */
.jp-27 :is(.jp-video-section, .jp-web, .jp-current-practice) > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(48px, 3rem + 2vw, 96px) !important;
}

/* section intro grammar: label rail | headline + copy */
.jp-27 .jp-section-intro > .e-con-inner > .jp-meta { grid-column: 1 / span 3; padding-top: .7em; }
.jp-27 .jp-section-intro > .e-con-inner > .jp-section-title { grid-column: 4 / -1; }
.jp-27 .jp-section-intro > .e-con-inner > .jp-copy { grid-column: 4 / span 6; margin-top: clamp(20px, 2vw, 32px) !important; }
@media (max-width: 1024px) {
  .jp-27 .jp-section-intro > .e-con-inner > * { grid-column: 1 / -1 !important; }
  .jp-27 .jp-section-intro > .e-con-inner > .jp-meta { padding: 0 0 20px; }
}

/* ---- header ---- */
.jp-27 .jp-site-header {
  position: sticky !important;
  top: 0;
  z-index: 100;
  width: 100% !important;
  background: rgba(255, 255, 255, .86) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--g90) !important;
}
.jp-27 .jp-site-header > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: var(--hdr);
}
.jp-27 .jp-brand .elementor-heading-title,
.jp-27 .jp-brand .elementor-heading-title a {
  font-size: 19px !important;
  letter-spacing: -.01em !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  text-transform: none !important;
}
.jp-27 .jp-brand .elementor-heading-title a { display: inline-flex; align-items: center; min-height: 44px; }
.jp-27 .jp-brand .elementor-heading-title::after { content: none !important; }
.jp-27 .jp-site-header .jp-nav { width: auto !important; }
.jp-27 .jp-site-header .jp-nav .elementor-nav-menu--main .elementor-item {
  font-family: var(--ui) !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  fill: var(--ink) !important;
  padding: 0 14px !important;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  position: relative;
  background: none !important;
}
/* hover label: ink underline at exactly word width (padding inset left+right),
   drawn on the anchor rather than the ::after pseudo — Elementor's
   .elementor-item::after pseudo positions against a wider containing block,
   which made the hover line ~1.9x the word. */
.jp-27 .jp-site-header .jp-nav .elementor-nav-menu--main .elementor-item::after {
  background: var(--ink) !important;
  height: 1px !important;
  bottom: 9px !important;
  left: 14px !important; right: 14px !important;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--e-expo), opacity .2s linear !important;
}
.jp-27 .jp-site-header .jp-nav .elementor-nav-menu--main .elementor-item:hover {
  background: linear-gradient(var(--ink), var(--ink)) 14px 88% / calc(100% - 28px) 1px no-repeat !important;
}
.jp-27 .jp-site-header .jp-nav .elementor-nav-menu--main .elementor-item:hover::after { opacity: 0 !important; transform: none; }
.jp-27 .jp-site-header .jp-nav .elementor-nav-menu--main .elementor-item:focus::after { opacity: 0 !important; transform: none; }
.jp-27 .jp-site-header .jp-nav .elementor-nav-menu--main .elementor-item-active::after { opacity: 0 !important; }
.jp-27 .jp-site-header .jp-nav .elementor-nav-menu--main .elementor-item-active::before {
  display: none;
}
/* active label: acid underline with overshoot, matching the reference bar */
.jp-27 .jp-site-header .jp-nav .elementor-nav-menu--main .elementor-item-active {
  background: linear-gradient(var(--acc), var(--acc)) 14px 88% / calc(100% - 28px) .28em no-repeat !important;
}
/* burger + overlay (Elementor toggles .elementor-active; portfolio.js adds body.jp-menu-open) */
.jp-27 .jp-site-header .elementor-menu-toggle {
  width: 44px; height: 44px;
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 999px !important;
  --nav-menu-icon-size: 18px;
}
.jp-27 .jp-site-header .elementor-menu-toggle svg { fill: var(--ink) !important; width: 18px; height: 18px; }
.jp-27 .jp-site-header .elementor-nav-menu--dropdown {
  position: fixed !important;
  top: var(--hdr) !important;
  left: 0 !important; right: 0 !important;
  width: 100% !important;
  background: var(--white) !important;
  border-top: 1px solid var(--g90);
  z-index: 99;
}
.jp-27 .jp-site-header .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown {
  height: calc(100svh - var(--hdr));
  max-height: calc(100svh - var(--hdr)) !important;
  overflow-y: auto;
}
.jp-27 .jp-site-header .elementor-nav-menu--dropdown .elementor-nav-menu { padding: 24px var(--gut) 48px; }
.jp-27 .jp-site-header .elementor-nav-menu--dropdown .elementor-item {
  font-size: clamp(36px, 10vw, 56px) !important;
  letter-spacing: -.03em !important;
  line-height: 1.05 !important;
  color: var(--ink) !important;
  background: none !important;
  padding: 10px 0 !important;
  min-height: 44px;
  border-bottom: 1px solid var(--g90);
  justify-content: flex-start;
}
.jp-27 .jp-site-header .elementor-nav-menu--dropdown .elementor-item-active { background: linear-gradient(var(--acc), var(--acc)) 0 85% / 100% .32em no-repeat !important; }
body.jp-27.jp-menu-open { overflow: hidden; }

/* ---- buttons ---- */
.jp-27 .elementor-widget-button .elementor-button,
.jp-27 .elementor-field-type-submit .elementor-button {
  font-family: var(--ui) !important;
  font-size: 14px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  min-height: 48px;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  border: 1px solid var(--ink) !important;
  background: var(--white) !important;
  color: var(--ink) !important;
  fill: var(--ink) !important;
  text-decoration: none !important;
  transition: background-color .3s var(--e-out), color .3s var(--e-out), border-color .3s var(--e-out), transform .5s var(--e-expo);
}
.jp-27 .jp-primary .elementor-button,
.jp-27 .elementor-field-type-submit .elementor-button {
  background: var(--ink) !important;
  color: var(--white) !important;
}
.jp-27 .elementor-widget-button .elementor-button:hover,
.jp-27 .elementor-field-type-submit .elementor-button:hover {
  background: var(--acc) !important;
  color: var(--white) !important;
  border-color: var(--acc) !important;
}
.jp-27 .elementor-button .elementor-button-text { color: inherit !important; font: inherit !important; letter-spacing: inherit !important; }
/* single boundary: the link wrapper gets no border — the pill draws it once */
.jp-27 a .elementor-widget-button,
.jp-27 .elementor-widget-button:has(.elementor-button) { border: 0 !important; background: none !important; }
.jp-27 .elementor-widget-button { border: 0 !important; background: none !important; }
/* pill boundary: inset ring instead of a border — kills cap-seam aliasing at all zooms */
.jp-27 .elementor-widget-button .elementor-button,
.jp-27 .elementor-field-type-submit .elementor-button { border: 0 !important; box-shadow: inset 0 0 0 1px var(--ink) !important; }
.jp-27 .jp-primary .elementor-button,
.jp-27 .elementor-field-type-submit .elementor-button { box-shadow: inset 0 0 0 1px var(--ink) !important; }

.jp-27 .jp-actions > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}
.jp-27 .jp-actions .elementor-widget { width: auto !important; }

/* card-level actions read as arrow links, not pills */
.jp-27 :is(.jp-video-card, .jp-project-card) .jp-actions .elementor-button,
.jp-27 .jp-index-action .elementor-button {
  background: transparent !important;
  color: var(--ink) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 44px;
  background-image: linear-gradient(var(--ink), var(--ink)) !important;
  background-size: 100% 1px !important;
  background-position: 0 calc(50% + .9em) !important;
  background-repeat: no-repeat !important;
}
.jp-27 :is(.jp-video-card, .jp-project-card) .jp-actions .elementor-button:hover,
.jp-27 .jp-index-action .elementor-button:hover {
  background-color: transparent !important;
  background-image: linear-gradient(var(--acc), var(--acc)) !important;
  background-size: 100% 2px !important;
  background-position: 0 calc(100% - 3px) !important;
}

/* ---- text "plate" links (home) ---- */
.jp-27 .jp-plate-link a,
.jp-27 .jp-hlinks a {
  font-family: var(--ui) !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: linear-gradient(var(--ink), var(--ink)) 0 calc(50% + .95em) / 100% 1px no-repeat;
  transition: background-size .45s var(--e-expo);
}

/* ---- tags ---- */
.jp-27 .jp-tags > .e-con-inner { display: flex !important; flex-flow: row wrap !important; gap: 8px !important; }
.jp-27 .jp-tags .elementor-widget { width: auto !important; }
.jp-27 .jp-tags .elementor-heading-title {
  font-family: var(--ui) !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  color: var(--ink) !important;
  padding: 10px 16px;
  border: 1px solid var(--g85);
  border-radius: 999px;
  display: inline-block;
}

/* ---- footer: the one ink band ---- */
.jp-27 .jp-footer {
  width: 100% !important;
  background: var(--ink) !important;
  color: var(--white);
  padding-block: clamp(72px, 4rem + 4vw, 136px) clamp(40px, 3vw, 56px) !important;
}
.jp-27 .jp-footer > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--cg) !important;
  row-gap: 32px !important;
  align-items: end;
}
.jp-27 .jp-footer > .e-con-inner > :first-child { grid-column: 1 / -1; }
.jp-27 .jp-footer > .e-con-inner > :nth-child(2) { grid-column: 1 / span 6; }
.jp-27 .jp-footer > .e-con-inner > .jp-social-icons { grid-column: 7 / -1; }
.jp-27 .jp-footer .elementor-heading-title {
  color: var(--white) !important;
  font-size: clamp(36px, 1rem + 4.4vw, 96px) !important;
  letter-spacing: -.035em !important;
  line-height: .96 !important;
  max-width: 14ch;
}
.jp-27 .jp-footer .elementor-widget-text-editor,
.jp-27 .jp-footer .elementor-widget-text-editor p {
  font-family: var(--ui) !important;
  color: var(--g60) !important;   /* 7.4:1 on black */
  font-size: 14px !important;
  letter-spacing: .04em;
}
.jp-27 .jp-footer .elementor-social-icons-wrapper { justify-content: flex-end; gap: 10px !important; }
.jp-27 .jp-footer .elementor-social-icon {
  width: 52px !important; height: 52px !important;
  --icon-padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: #ffffff14 !important;
  border: 1px solid rgba(255, 255, 255, .42) !important;
  border-radius: 999px !important;
  transition: background-color .3s var(--e-out), border-color .3s var(--e-out);
}
.jp-27 .jp-footer .elementor-social-icon svg { fill: var(--white) !important; width: 21px; height: 21px; }
.jp-27 .jp-footer .elementor-social-icon i { color: var(--white) !important; }
.jp-27 .jp-footer .elementor-social-icon:hover { background: var(--acc) !important; border-color: var(--acc) !important; }
.jp-27 .jp-footer .elementor-social-icon:hover svg { fill: var(--ink) !important; }
@media (max-width: 767px) {
  .jp-27 .jp-footer > .e-con-inner > * { grid-column: 1 / -1 !important; }
  .jp-27 .jp-footer .elementor-social-icons-wrapper { justify-content: flex-start; }
}

/* ---- media frames ---- */
.jp-27 .m-frame { position: relative; overflow: hidden; background: var(--g95); isolation: isolate; }
.jp-27 .m-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------
   L3 — home
   --------------------------------------------------------------------- */
/* hero: copy 1–7 | portrait 8–12 */
.jp-27 .elementor-element-a1 { width: 100% !important; padding: 0 !important; }
.jp-27 .elementor-element-a1 > .e-con-inner {
  min-height: calc(100svh - var(--hdr));
  align-items: stretch !important;
  padding-block: clamp(40px, 6vh, 96px) clamp(40px, 6vh, 80px) !important;
}
.jp-27 .elementor-element-a2 { grid-column: 1 / span 7 !important; align-self: end; position: relative; z-index: 2; }
.jp-27 .elementor-element-a2 > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  height: 100%;
}
.jp-27 .elementor-element-a2k { margin-bottom: clamp(24px, 3vh, 40px) !important; }
.jp-27 .elementor-element-a2h .elementor-heading-title em {
  background: linear-gradient(var(--acc), var(--acc)) 0 88% / 100% .2em no-repeat;
  padding-inline: .02em;
}
.jp-27 .elementor-element-a2p { margin-top: clamp(28px, 4vh, 48px) !important; }
.jp-27 .elementor-element-a2l { margin-top: clamp(20px, 3vh, 36px) !important; }
.jp-27 .jp-hlinks { display: flex; flex-wrap: wrap; column-gap: 28px; row-gap: 0; white-space: normal; font-size: 0; }
.jp-27 .elementor-element-a2c { margin-top: 12px !important; padding-top: 16px; border-top: 1px solid var(--g90); }

.jp-27 .elementor-element-a3 {
  grid-column: 8 / -1 !important;
  position: relative;
  align-self: stretch;
  display: block !important;
  overflow: visible !important;
}
.jp-27 .elementor-element-a3 > .e-con-inner { overflow: visible !important; }
.jp-27 .elementor-element-a3 > .e-con-inner {
  position: relative;
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
}
.jp-27 .elementor-element-a3i {
  position: relative;
  z-index: 1;
  width: 86% !important;
  aspect-ratio: 1074 / 1464;
  max-height: calc(100svh - var(--hdr) - 120px);
  overflow: hidden;
  background: var(--g95);
}
.jp-27 .elementor-element-a3i img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}
/* hero WebGL accent: sits behind the portrait and bleeds into the gutter */
.jp-27 .m-gl {
  position: absolute;
  z-index: 0;
  top: -4%; bottom: 18%;
  left: -26%; right: 22%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s var(--e-out);
}
.jp-27 .m-gl.is-live { opacity: 1; }
.jp-27 .m-gl canvas { width: 100%; height: 100%; display: block; }

@media (max-width: 1024px) {
  .jp-27 .elementor-element-a2 { grid-column: 1 / span 5 !important; }
  .jp-27 .elementor-element-a3 { grid-column: 6 / -1 !important; }
  .jp-27 .elementor-element-a3i { width: 100% !important; }
}
@media (max-width: 767px) {
  .jp-27 .elementor-element-a1 > .e-con-inner { min-height: 0; padding-block: 40px 56px !important; row-gap: 40px !important; }
  .jp-27 .elementor-element-a2,
  .jp-27 .elementor-element-a3 { grid-column: 1 / -1 !important; }
  .jp-27 .elementor-element-a3i { width: 100% !important; aspect-ratio: 4 / 5; max-height: 72svh; }
  .jp-27 .jp-hlinks { column-gap: 20px; }
}

/* chapters: full-bleed index rows ("rooms") */
.jp-27 .elementor-element-b1k { grid-column: 1 / span 3 !important; padding-top: .7em; }
.jp-27 .elementor-element-b1h { grid-column: 4 / -1 !important; margin-bottom: clamp(56px, 6vw, 112px) !important; }
.jp-27 .jp-chapters { grid-column: 1 / -1 !important; }
.jp-27 .jp-chapters > .e-con-inner { display: block !important; border-bottom: 1px solid var(--ink); }
.jp-27 .jp-chapters > .e-con-inner > .e-con { position: relative; border-top: 1px solid var(--ink) !important; isolation: isolate; }
.jp-27 .jp-chapters > .e-con-inner > .e-con::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--acc);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .6s var(--e-expo);
}
.jp-27 .jp-chapters > .e-con-inner > .e-con:hover::before,
.jp-27 .jp-chapters > .e-con-inner > .e-con:focus-within::before { transform: scaleY(1); }
.jp-27 .jp-chapters > .e-con-inner > .e-con > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg) !important;
  align-items: center !important;
  min-height: clamp(120px, 14vw, 208px);
  padding-block: 28px !important;
}
.jp-27 .jp-chapters .e-con-inner > .elementor-widget:nth-child(1) { grid-column: 1 / span 2; }
.jp-27 .jp-chapters .e-con-inner > .elementor-widget:nth-child(2) { grid-column: 3 / span 5; }
.jp-27 .jp-chapters .e-con-inner > .elementor-widget:nth-child(3) { grid-column: 8 / span 3; }
.jp-27 .jp-chapters .e-con-inner > .elementor-widget:nth-child(4) { grid-column: 11 / span 2; justify-self: end; }
.jp-27 .jp-chapters .e-con-inner > .elementor-widget:nth-child(1) :is(p, .elementor-heading-title) {
  font-family: var(--ui) !important; font-size: var(--t-label) !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; color: var(--g45) !important;
}
.jp-27 .jp-chapters .e-con-inner > .elementor-widget:nth-child(2) .elementor-heading-title {
  font-size: clamp(40px, 1rem + 4.4vw, 104px) !important;
  line-height: .92 !important;
  letter-spacing: -.04em !important;
  transition: transform .6s var(--e-expo);
}
.jp-27 .jp-chapters > .e-con-inner > .e-con:hover .elementor-widget:nth-child(2) .elementor-heading-title { transform: translateX(clamp(8px, 1.4vw, 24px)); }
.jp-27 .jp-chapters .e-con-inner > .elementor-widget:nth-child(3) p {
  font-size: var(--t-body) !important; line-height: 1.5 !important; color: var(--g25) !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
.jp-27 .jp-chapters > .e-con-inner > .e-con:hover .elementor-widget:nth-child(1) p,
.jp-27 .jp-chapters > .e-con-inner > .e-con:hover .elementor-widget:nth-child(3) p,
.jp-27 .jp-chapters > .e-con-inner > .e-con:focus-within .elementor-widget:nth-child(1) p,
.jp-27 .jp-chapters > .e-con-inner > .e-con:focus-within .elementor-widget:nth-child(3) p { color: var(--white, #fff) !important; }
/* whole row is the hit target; the link keeps its accessible name */
.jp-27 .jp-chapters .jp-plate-link a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.jp-27 .jp-chapters .jp-plate-link a { background-size: 0 1px; }
.jp-27 .jp-chapters > .e-con-inner > .e-con:hover .jp-plate-link a { background-size: 100% 1px; }
@media (max-width: 1024px) {
  .jp-27 .elementor-element-b1k, .jp-27 .elementor-element-b1h { grid-column: 1 / -1 !important; }
  .jp-27 .elementor-element-b1k { padding: 0 0 20px; }
  .jp-27 .jp-chapters > .e-con-inner > .e-con > .e-con-inner { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: 12px !important; }
  .jp-27 .jp-chapters .e-con-inner > .elementor-widget:nth-child(1) { grid-column: 1 / span 4; grid-row: 1; }
  .jp-27 .jp-chapters .e-con-inner > .elementor-widget:nth-child(4) { grid-column: 5 / -1; grid-row: 1; }
  .jp-27 .jp-chapters .e-con-inner > .elementor-widget:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .jp-27 .jp-chapters .e-con-inner > .elementor-widget:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
}

/* works: staggered editorial grid */
.jp-27 .elementor-element-d1k { grid-column: 1 / span 3 !important; padding-top: .7em; }
.jp-27 .elementor-element-d1h { grid-column: 4 / -1 !important; margin-bottom: clamp(56px, 6vw, 112px) !important; }
.jp-27 .jp-works { grid-column: 1 / -1 !important; }
.jp-27 .jp-works > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg) !important;
  row-gap: clamp(64px, 6vw, 120px) !important;
  align-items: start !important;
}
.jp-27 .jp-works > .e-con-inner > .e-con:nth-child(1) { grid-column: 1 / span 7; }
.jp-27 .jp-works > .e-con-inner > .e-con:nth-child(2) { grid-column: 9 / span 4; margin-top: clamp(80px, 14vw, 240px) !important; }
.jp-27 .jp-works > .e-con-inner > .e-con:nth-child(3) { grid-column: 3 / span 6; }
.jp-27 .jp-works > .e-con-inner > .e-con { position: relative; }
.jp-27 .jp-works > .e-con-inner > .e-con > .e-con-inner { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.jp-27 .jp-works .jp-frame { aspect-ratio: 16 / 10; overflow: hidden; background: var(--g95); margin-bottom: 20px !important; position: relative; }
.jp-27 .jp-works .jp-frame > .e-con-inner { height: 100%; display: block !important; }
.jp-27 .jp-works .jp-frame .elementor-widget-image { height: 100%; }
.jp-27 .jp-works .jp-frame::before { content: '' !important; position: absolute; inset: 0; border: 1px solid var(--g90); background: none !important; opacity: 1 !important; pointer-events: none; z-index: 2; }
.jp-27 .jp-works .jp-frame img { width: 100% !important; height: 100% !important; object-fit: contain; display: block; }
.jp-27 .jp-works .jp-meta { order: 2; }
.jp-27 .jp-works .jp-card-title { order: 3; margin-top: 8px !important; }
.jp-27 .jp-works .jp-card-action { order: 4; margin-top: 4px !important; }
.jp-27 .jp-works .jp-card-title .elementor-heading-title { font-size: clamp(28px, 1rem + 2vw, 56px) !important; letter-spacing: -.03em !important; }
.jp-27 .jp-works .jp-plate-link a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.jp-27 .jp-works > .e-con-inner > .e-con:hover .jp-plate-link a { background-image: linear-gradient(var(--acc), var(--acc)); background-size: 100% 2px; background-position: 0 calc(100% - 3px); }
@media (max-width: 1024px) {
  .jp-27 .elementor-element-d1k, .jp-27 .elementor-element-d1h { grid-column: 1 / -1 !important; }
  .jp-27 .elementor-element-d1k { padding: 0 0 20px; }
  .jp-27 .jp-works > .e-con-inner { grid-template-columns: 1fr 1fr; }
  .jp-27 .jp-works > .e-con-inner > .e-con:nth-child(1) { grid-column: 1 / -1; }
  .jp-27 .jp-works > .e-con-inner > .e-con:nth-child(2) { grid-column: 1; margin-top: 0 !important; }
  .jp-27 .jp-works > .e-con-inner > .e-con:nth-child(3) { grid-column: 2; }
}
@media (max-width: 767px) {
  .jp-27 .jp-works > .e-con-inner { grid-template-columns: 1fr; row-gap: 56px !important; }
  .jp-27 .jp-works > .e-con-inner > .e-con:nth-child(n) { grid-column: 1 / -1; }
}

/* contact: oversized title + one quiet line */
.jp-27 .elementor-element-e1k { grid-column: 1 / span 3 !important; padding-top: .7em; }
.jp-27 .elementor-element-e1h { grid-column: 4 / -1 !important; }
.jp-27 .elementor-element-e1m { grid-column: 4 / -1 !important; margin-top: clamp(40px, 4vw, 72px) !important; }
.jp-27 .jp-mail { font-size: clamp(18px, 1rem + .4vw, 22px) !important; color: var(--g25) !important; line-height: 1.5 !important; }
.jp-27 .jp-mail a {
  font-size: clamp(28px, 1rem + 2.4vw, 56px) !important;
  letter-spacing: -.03em !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  display: inline-block;
  min-height: 44px;
  background: linear-gradient(var(--acc), var(--acc)) 0 92% / 100% .18em no-repeat;
  transition: background-size .5s var(--e-expo);
}
.jp-27 .jp-mail a:hover { background-size: 100% .9em; }
.jp-27 .jp-mail a + a,
.jp-27 .jp-mail a:last-child:not(:first-child) {
  font-size: inherit !important;
  letter-spacing: 0 !important;
  background: none;
  text-decoration: underline !important;
  text-underline-offset: .22em;
  display: inline-flex; align-items: center;
}
@media (max-width: 1024px) {
  .jp-27 :is(.elementor-element-e1k, .elementor-element-e1h, .elementor-element-e1m) { grid-column: 1 / -1 !important; }
  .jp-27 .elementor-element-e1k { padding: 0 0 20px; }
}

/* ---------------------------------------------------------------------
   L4 — subpages
   --------------------------------------------------------------------- */
/* page hero */
.jp-27 .jp-page-hero { width: 100% !important; position: relative; }
.jp-27 .jp-page-hero > .e-con-inner {
  padding-block: clamp(56px, 3rem + 6vw, 160px) clamp(56px, 3rem + 3vw, 104px) !important;
  min-height: min(calc(100svh - var(--hdr)), 980px);
  align-content: end;
  row-gap: clamp(40px, 5vw, 80px) !important;
}
.jp-27 .jp-hero-intro { grid-column: 1 / span 7 !important; grid-row: 1; align-self: end; }
.jp-27 .jp-hero-intro > .e-con-inner { display: flex !important; flex-direction: column !important; }
.jp-27 .jp-hero-intro .jp-kicker { margin-bottom: clamp(24px, 3vw, 40px) !important; }
.jp-27 .jp-hero-intro .jp-lede { margin-top: clamp(28px, 3vw, 48px) !important; }
.jp-27 .jp-hero-intro .jp-actions { margin-top: clamp(28px, 3vw, 44px) !important; }
.jp-27 .jp-hero-media { grid-column: 8 / -1 !important; grid-row: 1; align-self: stretch; position: relative; min-height: clamp(360px, 40vw, 600px) !important; }
.jp-27 .jp-hero-media > .e-con-inner { position: relative; height: 100%; display: block !important; }
.jp-27 .jp-hero-art { position: absolute !important; overflow: hidden; background: var(--g95); }
.jp-27 .jp-hero-art img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; border: 0 !important; }
.jp-27 .jp-hero-art--1 { top: 0; right: 0; width: 92% !important; aspect-ratio: 16 / 9; }
.jp-27 .jp-hero-art--2 { bottom: 0; left: 0; width: 58% !important; aspect-ratio: 16 / 9; z-index: 2; outline: 10px solid var(--white); }
.jp-27 .jp-hero-index { grid-column: 1 / -1 !important; grid-row: 2; padding-top: 18px; border-top: 1px solid var(--ink); }
.jp-27 .jp-hero-index .elementor-heading-title.m-ixs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg); }
.jp-27 .jp-hero-index .m-ixs br { display: none; }
@media (max-width: 767px) { .jp-27 .jp-hero-index .elementor-heading-title.m-ixs { grid-template-columns: 1fr; } }
/* hairline frames: most captures are white-on-white website screenshots */
.jp-27 :is(.jp-hero-art, .jp-media-primary, .jp-media-secondary, .jp-spotlight-media, .jp-web-visual .elementor-widget-image)::before {
  content: ''; position: absolute; inset: 0; border: 1px solid var(--g90); pointer-events: none; z-index: 2;
}
.jp-27 :is(.jp-media-primary, .jp-spotlight-media, .jp-web-visual .elementor-widget-image) { position: relative; }

/* text-only hero (web) */
.jp-27 .jp-performance-hero--text-only .jp-hero-intro { grid-column: 1 / span 10 !important; }
.jp-27 .jp-performance-hero--text-only .jp-display .elementor-heading-title { font-size: clamp(46px, 1.2rem + 6.4vw, 136px) !important; }

/* fullscreen portrait hero (about) */
.jp-27 .jp-fullscreen-hero .jp-hero-media { grid-column: 9 / -1 !important; min-height: 0 !important; }
.jp-27 .jp-fullscreen-hero .jp-hero-art--1 { position: relative !important; width: 100% !important; aspect-ratio: 1074 / 1464; max-height: calc(100svh - var(--hdr) - 200px); }
.jp-27 .jp-fullscreen-hero .jp-hero-art--1 img { object-position: 50% 20%; }
.jp-27 .jp-fullscreen-hero .jp-hero-intro { grid-column: 1 / span 8 !important; }

@media (max-width: 1024px) {
  .jp-27 .jp-hero-intro { grid-column: 1 / -1 !important; }
  .jp-27 .jp-hero-media { grid-column: 1 / -1 !important; grid-row: 2; min-height: clamp(280px, 60vw, 520px) !important; }
  .jp-27 .jp-hero-index { grid-row: 3; }
  .jp-27 .jp-fullscreen-hero .jp-hero-media { grid-column: 2 / span 6 !important; }
  .jp-27 .jp-page-hero > .e-con-inner { min-height: 0; }
}
@media (max-width: 767px) {
  .jp-27 .jp-hero-media { min-height: 0 !important; aspect-ratio: 5 / 4; }
  .jp-27 .jp-hero-art--2 { outline-width: 6px; }
  .jp-27 .jp-fullscreen-hero .jp-hero-media { grid-column: 1 / -1 !important; aspect-ratio: auto; }
}

/* video sections + cards */
.jp-27 .jp-video-grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--cg) !important;
  row-gap: clamp(56px, 5vw, 88px) !important;
}
.jp-27 .jp-video-grid--two > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jp-27 .jp-video-card > .e-con-inner { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.jp-27 .jp-video { margin-bottom: 20px !important; }
.jp-27 .jp-video .elementor-wrapper { aspect-ratio: 16 / 9; background: var(--g95); overflow: hidden; }
.jp-27 .jp-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.jp-27 .jp-video-card .jp-card-index { margin-bottom: 10px !important; }
.jp-27 .jp-video-card .jp-copy { margin-top: 12px !important; }
.jp-27 .jp-video-card .jp-actions { margin-top: 12px !important; }
.jp-27 .jp-video-section > .e-con-inner > .jp-actions { padding-top: 8px; }
/* discography feature: a full-width typographic row */
.jp-27 .jp-discography-feature-card {
  border-top: 1px solid var(--ink) !important;
  border-bottom: 1px solid var(--ink) !important;
  padding-block: clamp(32px, 4vw, 64px) !important;
}
.jp-27 .jp-discography-feature-card > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--cg) !important;
  row-gap: 16px !important;
  align-items: end !important;
}
.jp-27 .jp-discography-feature-card > .e-con-inner > * { grid-column: 1 / -1; }
.jp-27 .jp-discography-feature-card .jp-video-title { grid-column: 1 / span 8; }
.jp-27 .jp-discography-feature-card .jp-copy { grid-column: 1 / span 6; align-self: end; }
.jp-27 .jp-discography-feature-card .jp-actions { grid-column: 1 / span 6; justify-self: start; align-self: end; }
.jp-27 .jp-discography-feature-card .jp-video-title .elementor-heading-title { font-size: var(--t-xl) !important; letter-spacing: -.04em !important; line-height: .94 !important; max-width: 12ch; }
@media (max-width: 1024px) {
  .jp-27 .jp-video-grid > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jp-27 .jp-discography-feature-card > .e-con-inner > * { grid-column: 1 / -1 !important; grid-row: auto !important; justify-self: start !important; }
}
@media (max-width: 767px) {
  .jp-27 .jp-video-grid > .e-con-inner,
  .jp-27 .jp-video-grid--two > .e-con-inner { grid-template-columns: 1fr; }
}

/* feature (archive) */
.jp-27 .jp-feature-media { grid-column: 1 / span 7 !important; position: relative; }
.jp-27 .jp-feature-media > .e-con-inner { position: relative; display: block !important; padding-bottom: 18% !important; }
.jp-27 .jp-media-primary { width: 100% !important; aspect-ratio: 16 / 9; overflow: hidden; background: var(--g95); }
.jp-27 .jp-media-secondary { position: absolute !important; right: -6%; bottom: 0; width: 38% !important; aspect-ratio: 16 / 9; overflow: hidden; outline: 10px solid var(--white); background: var(--g95); z-index: 2; }
.jp-27 :is(.jp-media-primary, .jp-media-secondary) img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.jp-27 .jp-feature-copy { grid-column: 9 / -1 !important; align-self: center; }
.jp-27 .jp-feature-copy > .e-con-inner { display: flex !important; flex-direction: column !important; }
.jp-27 .jp-feature-copy .jp-meta { margin-bottom: 24px !important; }
.jp-27 .jp-feature-copy .jp-copy { margin-top: 24px !important; }
.jp-27 .jp-feature-copy .jp-tags { margin-top: 28px !important; }
.jp-27 .jp-feature-copy .jp-actions { margin-top: 32px !important; }
@media (max-width: 1024px) {
  .jp-27 .jp-feature-media, .jp-27 .jp-feature-copy { grid-column: 1 / -1 !important; }
  .jp-27 .jp-feature-media { margin-bottom: 56px !important; }
  .jp-27 .jp-media-secondary { right: 0; width: 44% !important; outline-width: 6px; }
}

/* contact band (sound/screen/web/about) */
.jp-27 .jp-contact > .e-con-inner > .jp-meta { grid-column: 1 / span 3; padding-top: .7em; }
.jp-27 .jp-contact > .e-con-inner > .jp-contact-title { grid-column: 4 / -1; }
.jp-27 .jp-contact > .e-con-inner > .jp-contact-email { grid-column: 4 / span 5; margin-top: clamp(40px, 4vw, 72px) !important; align-self: center; }
.jp-27 .jp-contact > .e-con-inner > .jp-actions { grid-column: 9 / -1; margin-top: clamp(40px, 4vw, 72px) !important; align-self: center; }
.jp-27 .jp-contact > .e-con-inner > .jp-actions > .e-con-inner { justify-content: flex-end !important; }
.jp-27 .jp-contact > .e-con-inner > .jp-contact-note { grid-column: 4 / -1; margin-top: 20px !important; }
.jp-27 .jp-contact-email .elementor-heading-title {
  font-size: clamp(26px, 1rem + 2vw, 48px) !important;
  letter-spacing: -.03em !important;
  display: inline;
  background: linear-gradient(var(--acc), var(--acc)) 0 92% / 100% .18em no-repeat;
}
/* about: form beside the title */
.jp-27 .jp-contact--form > .e-con-inner > .jp-contact-title { grid-column: 1 / span 6; grid-row: 2; }
.jp-27 .jp-contact--form > .e-con-inner > .jp-meta { grid-column: 1 / -1; grid-row: 1; padding: 0 0 clamp(28px, 3vw, 48px); }
.jp-27 .jp-contact--form > .e-con-inner > .jp-contact-email { grid-column: 1 / span 6; grid-row: 3; }
.jp-27 .jp-contact--form > .e-con-inner > .jp-contact-note { grid-column: 1 / span 5; grid-row: 4; }
.jp-27 .jp-contact--form > .e-con-inner > .jp-contact-form { grid-column: 8 / -1; grid-row: 2 / span 4; }
.jp-27 .jp-contact--form .jp-contact-title .elementor-heading-title { font-size: var(--t-h2) !important; }
@media (max-width: 1024px) {
  .jp-27 .jp-contact > .e-con-inner > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .jp-27 .jp-contact > .e-con-inner > .jp-meta { padding: 0 0 20px; }
  .jp-27 .jp-contact > .e-con-inner > .jp-actions { margin-top: 24px !important; }
  .jp-27 .jp-contact > .e-con-inner > .jp-actions > .e-con-inner { justify-content: flex-start !important; }
  .jp-27 .jp-contact--form > .e-con-inner > .jp-contact-form { margin-top: 48px !important; }
}

/* form */
.jp-27 .jp-contact-form .elementor-form-fields-wrapper { row-gap: 28px; margin: 0 -10px; }
.jp-27 .jp-contact-form .elementor-field-group { padding: 0 10px !important; margin-bottom: 0 !important; }
.jp-27 .jp-contact-form .elementor-field-label {
  font-family: var(--ui) !important;
  font-size: var(--t-label) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g25) !important;
  padding-bottom: 6px !important;
}
.jp-27 .jp-contact-form .elementor-field-textual,
.jp-27 .jp-contact-form .elementor-select-wrapper select {
  font-size: 18px !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  min-height: 52px;
}
.jp-27 .jp-contact-form textarea.elementor-field-textual { min-height: 140px; }
.jp-27 .jp-contact-form .elementor-field-textual::placeholder { color: var(--g45); opacity: 1; }
.jp-27 .jp-contact-form .elementor-field-textual:focus { outline: none !important; box-shadow: 0 2px 0 var(--acc), 0 3px 0 var(--ink) !important; }
.jp-27 .jp-contact-form .elementor-field-type-acceptance label,
.jp-27 .jp-contact-form .elementor-field-option label { font-size: 15px !important; color: var(--g25) !important; text-transform: none; letter-spacing: 0; }
.jp-27 .jp-contact-form input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--ink); vertical-align: -6px; margin-right: 8px; }
.jp-27 .jp-contact-form .elementor-field-type-submit { margin-top: 12px; }
.jp-27 .jp-contact-form .elementor-field-type-submit .elementor-button { min-height: 56px; width: 100%; }
.jp-27 .jp-contact-form .elementor-message { font-size: 15px; color: var(--ink); }

/* web: spotlight */
.jp-27 .jp-spotlight > .e-con-inner { row-gap: 0 !important; }
.jp-27 .jp-spotlight > .e-con-inner > .jp-meta { grid-column: 1 / span 3; padding-top: .9em; }
.jp-27 .jp-spotlight > .e-con-inner > .jp-domain { grid-column: 4 / -1; }
.jp-27 .jp-domain .elementor-heading-title { font-size: clamp(30px, .4rem + 5.9vw, 112px) !important; letter-spacing: -.045em !important; line-height: .92 !important; }
.jp-27 .jp-spotlight > .e-con-inner > .jp-spotlight-media { grid-column: 1 / -1; margin-block: clamp(40px, 5vw, 80px) !important; aspect-ratio: 16 / 9; overflow: hidden; background: var(--g95); }
.jp-27 .jp-spotlight-media img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: top; display: block; }
.jp-27 .jp-spotlight > .e-con-inner > .jp-section-title { grid-column: 1 / span 6; }
.jp-27 .jp-spotlight .jp-section-title .elementor-heading-title { font-size: clamp(30px, 1rem + 2.4vw, 60px) !important; }
.jp-27 .jp-spotlight > .e-con-inner > .jp-copy { grid-column: 8 / -1; padding-top: .5em; }
.jp-27 .jp-spotlight > .e-con-inner > .jp-tags { grid-column: 8 / -1; margin-top: 28px !important; }
.jp-27 .jp-spotlight > .e-con-inner > .jp-metrics { grid-column: 1 / span 6; margin-top: clamp(48px, 5vw, 88px) !important; }
.jp-27 .jp-spotlight > .e-con-inner > .jp-actions { grid-column: 8 / -1; margin-top: clamp(48px, 5vw, 88px) !important; align-self: end; }
.jp-27 .jp-metrics > .e-con-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  column-gap: var(--cg) !important;
  row-gap: 12px !important;
  border-top: 1px solid var(--ink);
  padding-top: 24px !important;
}
.jp-27 .jp-metric-value .elementor-heading-title { white-space: nowrap; font-size: clamp(40px, .8rem + 3.4vw, 84px) !important; letter-spacing: -.05em !important; line-height: .9 !important; font-variant-numeric: tabular-nums; }
.jp-27 .jp-metric-copy, .jp-27 .jp-metric-copy p { font-size: 15px !important; max-width: 30ch; }
@media (max-width: 767px) {
  .jp-27 .jp-metrics > .e-con-inner { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .jp-27 .jp-metric-copy { margin-bottom: 20px !important; }
}
@media (max-width: 1024px) {
  .jp-27 .jp-spotlight > .e-con-inner > * { grid-column: 1 / -1 !important; }
  .jp-27 .jp-spotlight > .e-con-inner > .jp-meta { padding: 0 0 16px; }
  .jp-27 .jp-spotlight > .e-con-inner > .jp-copy { margin-top: 24px !important; }
}

/* web: gallery — contain, never crop (ledger: fixed 16:10 wrapper) */
.jp-27 .jp-web-gallery > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--cg) !important;
  row-gap: clamp(48px, 5vw, 88px) !important;
}
.jp-27 .jp-web-gallery > .e-con-inner > .jp-web-visual:nth-child(even) { transform: translateY(clamp(0px, 8vw, 140px)); }
.jp-27 .jp-web-gallery > .e-con-inner > .jp-web-visual:last-child:nth-child(odd) { grid-column: 1 / span 1; }
.jp-27 .jp-web-gallery { margin-bottom: clamp(0px, 8vw, 140px) !important; }
.jp-27 .jp-web-visual > .e-con-inner { display: flex !important; flex-direction: column-reverse !important; gap: 14px !important; }
.jp-27 .jp-web-visual .elementor-widget-image { aspect-ratio: 16 / 10; background: var(--g95); overflow: hidden; }
.jp-27 .jp-web-visual .elementor-widget-image img { width: 100% !important; height: 100% !important; object-fit: contain; display: block; }
@media (max-width: 767px) {
  .jp-27 .jp-web-gallery > .e-con-inner { grid-template-columns: 1fr; }
  .jp-27 .jp-web-gallery > .e-con-inner > .jp-web-visual:nth-child(even) { transform: none; }
  .jp-27 .jp-web-gallery { margin-bottom: 0 !important; }
}

/* web: index table */
.jp-27 .jp-index > .e-con-inner { display: block !important; border-bottom: 1px solid var(--ink); }
.jp-27 .jp-index-row { border-top: 1px solid var(--g85) !important; position: relative; isolation: isolate; }
.jp-27 .jp-index-row:first-child { border-top-color: var(--ink) !important; }
.jp-27 .jp-index-row::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--g95);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--e-expo);
}
.jp-27 .jp-index-row:hover::before { transform: scaleY(1); }
.jp-27 .jp-index-row > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg) !important;
  align-items: center !important;
  min-height: 88px;
  padding-block: 16px !important;
}
.jp-27 .jp-index-no { grid-column: 1 / span 1; }
.jp-27 .jp-index-title { grid-column: 2 / span 5; }
.jp-27 .jp-index-role { grid-column: 7 / span 4; }
.jp-27 .jp-index-action, .jp-27 .jp-index-state { grid-column: 11 / span 2; justify-self: end; }
.jp-27 .jp-index-title .elementor-heading-title { font-size: clamp(22px, 1rem + 1.2vw, 36px) !important; }
.jp-27 .jp-index-role p { font-size: 15px !important; }
@media (max-width: 767px) {
  .jp-27 .jp-index-row > .e-con-inner { grid-template-columns: 40px 1fr auto; row-gap: 4px !important; }
  .jp-27 .jp-index-no { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding-top: .5em; }
  .jp-27 .jp-index-title { grid-column: 2; grid-row: 1; }
  .jp-27 .jp-index-role { grid-column: 2 / -1; grid-row: 2; }
  .jp-27 .jp-index-action, .jp-27 .jp-index-state { grid-column: 3; grid-row: 1; }
}

/* about: practice */
.jp-27 .jp-about > .e-con-inner { row-gap: 0 !important; }
.jp-27 .jp-about > .e-con-inner > .jp-meta { grid-column: 1 / -1; grid-row: 1; padding-bottom: clamp(32px, 4vw, 64px); }
.jp-27 .jp-about-portrait { grid-column: 1 / span 5 !important; grid-row: 2; }
.jp-27 .jp-about-portrait-archive { grid-column: 2 / span 3 !important; grid-row: 3; margin-top: clamp(32px, 4vw, 64px) !important; }
.jp-27 .jp-about-copy { grid-column: 7 / -1 !important; grid-row: 2 / span 2; }
.jp-27 :is(.jp-about-portrait, .jp-about-portrait-archive) .jp-portrait-image { overflow: hidden; background: var(--g95); }
.jp-27 .jp-about-portrait .jp-portrait-image { aspect-ratio: 4 / 5; }
.jp-27 .jp-about-portrait-archive .jp-portrait-image { aspect-ratio: 3 / 4; }
.jp-27 .jp-portrait-image img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 20%; display: block; }
.jp-27 .jp-portrait-caption { margin-top: 12px !important; }
.jp-27 .jp-about-copy > .e-con-inner { display: flex !important; flex-direction: column !important; }
.jp-27 .jp-about-copy .jp-copy { margin-top: 28px !important; }
.jp-27 .jp-about-copy .jp-copy + .jp-copy { margin-top: 16px !important; }
.jp-27 .jp-about-copy .jp-actions { margin-top: 40px !important; }
.jp-27 .jp-about-copy .jp-section-title .elementor-heading-title { font-size: clamp(32px, 1rem + 2.8vw, 68px) !important; }
@media (max-width: 1024px) {
  .jp-27 .jp-about-portrait { grid-column: 1 / span 5 !important; }
  .jp-27 .jp-about-portrait-archive { grid-column: 6 / -1 !important; grid-row: 2; margin-top: 30% !important; }
  .jp-27 .jp-about-copy { grid-column: 1 / -1 !important; grid-row: 3; margin-top: 56px !important; }
}
@media (max-width: 767px) {
  .jp-27 .jp-about-portrait { grid-column: 1 / span 3 !important; }
  .jp-27 .jp-about-portrait-archive { grid-column: 3 / -1 !important; grid-row: 3; margin-top: -25% !important; z-index: 2; outline: 6px solid var(--white); }
  .jp-27 .jp-about-copy { grid-row: 4; }
}

/* about: experience (table on desktop, swipe deck on small screens per its aria-label) */
.jp-27 .jp-experience > .e-con-inner > .jp-meta { grid-column: 1 / span 3; padding-top: .7em; }
.jp-27 .jp-experience > .e-con-inner > .jp-section-title { grid-column: 4 / -1; margin-bottom: clamp(48px, 5vw, 96px) !important; }
.jp-27 .jp-exp-list > .e-con-inner { display: block !important; border-bottom: 1px solid var(--ink); }
.jp-27 .jp-exp-row { border-top: 1px solid var(--g85) !important; }
.jp-27 .jp-exp-row:first-child { border-top-color: var(--ink) !important; }
.jp-27 .jp-exp-row > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--cg) !important;
  align-items: baseline !important;
  padding-block: 24px !important;
}
.jp-27 .jp-exp-year { grid-column: 1 / span 3; }
.jp-27 .jp-exp-role { grid-column: 4 / span 5; }
.jp-27 .jp-exp-company { grid-column: 9 / -1; }
.jp-27 .jp-exp-company p { font-size: 15px !important; }
@media (max-width: 1024px) {
  .jp-27 .jp-experience > .e-con-inner > * { grid-column: 1 / -1 !important; }
  .jp-27 .jp-experience > .e-con-inner > .jp-meta { padding: 0 0 20px; }
}
@media (max-width: 767px) {
  .jp-27 .jp-exp-list { margin-inline: calc(var(--gut) * -1) !important; }
  .jp-27 .jp-exp-list > .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--gut) !important;
    scroll-padding-inline: var(--gut);
    border: 0;
    padding-bottom: 8px !important;
  }
  .jp-27 .jp-exp-row { flex: 0 0 78% !important; width: 78% !important; scroll-snap-align: start; border: 1px solid var(--ink) !important; }
  .jp-27 .jp-exp-row > .e-con-inner { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 24px 20px !important; min-height: 200px; }
}

/* about: current practice grid */
.jp-27 .jp-current-practice-grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--cg) !important;
  row-gap: 48px !important;
}
.jp-27 .jp-project-card { border-top: 1px solid var(--ink) !important; padding-top: 24px !important; }
.jp-27 .jp-project-card > .e-con-inner { display: flex !important; flex-direction: column !important; height: 100%; }
.jp-27 .jp-project-card .jp-card-title { margin-top: 32px !important; }
.jp-27 .jp-project-card .jp-card-role { margin-top: 10px !important; }
.jp-27 .jp-project-card .jp-card-role p { font-family: var(--ui) !important; font-size: var(--t-label) !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--g45) !important; }
.jp-27 .jp-project-card .jp-copy { margin-top: 20px !important; }
.jp-27 .jp-project-card .jp-actions { margin-top: auto !important; padding-top: 24px; }
@media (max-width: 1024px) { .jp-27 .jp-current-practice-grid > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .jp-27 .jp-current-practice-grid > .e-con-inner { grid-template-columns: 1fr; } }

/* about: toolkit */
.jp-27 .jp-toolkit > .e-con-inner > .jp-meta { grid-column: 1 / span 3; padding-top: .7em; }
.jp-27 .jp-toolkit > .e-con-inner > .jp-section-title { grid-column: 4 / -1; margin-bottom: clamp(48px, 5vw, 96px) !important; }
.jp-27 .jp-tool-grid > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--cg) !important;
  row-gap: clamp(48px, 4vw, 72px) !important;
}
.jp-27 .jp-tool-group { border-top: 1px solid var(--ink) !important; padding-top: 20px !important; }
.jp-27 .jp-tool-group > .e-con-inner { display: flex !important; flex-direction: column !important; }
.jp-27 .jp-tool-title { margin-top: 28px !important; }
.jp-27 .jp-tool-copy { margin-top: 14px !important; }
.jp-27 .jp-tool-stack { margin-top: 18px !important; }
.jp-27 .jp-tool-stack p { font-family: var(--ui) !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--ink) !important; }
@media (max-width: 1024px) {
  .jp-27 .jp-toolkit > .e-con-inner > * { grid-column: 1 / -1 !important; }
  .jp-27 .jp-toolkit > .e-con-inner > .jp-meta { padding: 0 0 20px; }
  .jp-27 .jp-tool-grid > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) { .jp-27 .jp-tool-grid > .e-con-inner { grid-template-columns: 1fr; } }

/* ---- v1.3 structural pass (impeccable assessment A) ---- */
/* home: the work arrives inside ~1.2 viewports */
.jp-27 .elementor-element-a1 > .e-con-inner { min-height: min(calc(100svh - var(--hdr)), 760px); }
.jp-27 .elementor-element-b1 { padding-top: clamp(56px, 3rem + 2vw, 96px) !important; }
.jp-27 .elementor-element-b1h { margin-bottom: clamp(32px, 3vw, 48px) !important; }
.jp-27 .elementor-element-b1h .elementor-heading-title { font-size: clamp(32px, 1rem + 2.4vw, 64px) !important; }

/* chapter media rows: still | index + title | line | action; the row link covers everything */
.jp-27 .jp-chapters .jp-chapter-row > .e-con-inner { grid-template-rows: auto auto; min-height: 0; padding-block: 20px !important; row-gap: 6px !important; }
.jp-27 .jp-chapter-row > .e-con-inner > .jp-chapter-media { grid-column: 1 / span 3; grid-row: 1 / span 2; aspect-ratio: 16 / 10; overflow: hidden; background: var(--g95); position: relative; }
.jp-27 .jp-chapter-media img { width: 100% !important; height: 100% !important; object-fit: contain; display: block; transition: transform .8s var(--e-expo); }
.jp-27 .elementor-element-c4m img { object-position: 50% 58%; }
.jp-27 .jp-chapter-row:hover .jp-chapter-media img { transform: scale(1.04); }
.jp-27 .jp-chapters .jp-chapter-row .e-con-inner > .elementor-widget:nth-child(1) { grid-column: 4 / span 5; grid-row: 1; align-self: end; }
.jp-27 .jp-chapters .jp-chapter-row .e-con-inner > .elementor-widget:nth-child(2) { grid-column: 4 / span 5; grid-row: 2; align-self: start; }
.jp-27 .jp-chapters .jp-chapter-row .e-con-inner > .elementor-widget:nth-child(3) { grid-column: 8 / span 3; grid-row: 1 / span 2; align-self: center; }
.jp-27 .jp-chapters .jp-chapter-row .e-con-inner > .elementor-widget:nth-child(4) { grid-column: 11 / span 2; grid-row: 1 / span 2; align-self: center; justify-self: end; white-space: nowrap; }
.jp-27 .jp-chapters .jp-chapter-row .e-con-inner > .elementor-widget:nth-child(2) .elementor-heading-title { font-size: clamp(34px, 1rem + 3vw, 72px) !important; }
@media (max-width: 1024px) {
  .jp-27 .jp-chapters .jp-chapter-row > .e-con-inner { grid-template-rows: auto auto auto auto; row-gap: 8px !important; }
  .jp-27 .jp-chapter-row > .e-con-inner > .jp-chapter-media { grid-column: 1 / span 3; grid-row: 1 / span 2; }
  .jp-27 .jp-chapters .jp-chapter-row .e-con-inner > .elementor-widget:nth-child(1) { grid-column: 4 / -1; grid-row: 1; }
  .jp-27 .jp-chapters .jp-chapter-row .e-con-inner > .elementor-widget:nth-child(2) { grid-column: 4 / -1; grid-row: 2; }
  .jp-27 .jp-chapters .jp-chapter-row .e-con-inner > .elementor-widget:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .jp-27 .jp-chapters .jp-chapter-row .e-con-inner > .elementor-widget:nth-child(4) { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
}
@media (max-width: 767px) {
  .jp-27 .elementor-element-a3i { aspect-ratio: 4 / 3; max-height: 52svh; }
  .jp-27 .elementor-element-a1 > .e-con-inner { padding-block: 28px 40px !important; row-gap: 28px !important; }
  .jp-27 .elementor-element-b1 { padding-top: 40px !important; }
  .jp-27 .elementor-element-b1k { padding-bottom: 12px !important; }
  .jp-27 .jp-chapters .jp-chapter-row .e-con-inner > .elementor-widget:nth-child(2) .elementor-heading-title { font-size: 34px !important; }
}

/* sound: Dame Un Grrr full-width feature — title on one line, still, dated figure, link under copy */
.jp-27 .jp-dame-feature > .e-con-inner { align-items: start !important; row-gap: 0 !important; }
.jp-27 .jp-dame-feature > .e-con-inner > .jp-card-index { grid-column: 1 / -1; grid-row: 1; margin-bottom: 12px !important; }
.jp-27 .jp-dame-feature > .e-con-inner > .jp-video-title { grid-column: 1 / -1; grid-row: 2; }
.jp-27 .jp-dame-feature .jp-video-title .elementor-heading-title { font-size: min(var(--t-h2), 8.4vw) !important; line-height: 1 !important; white-space: nowrap; max-width: none; }
.jp-27 .jp-dame-feature > .e-con-inner > .jp-feature-thumb { grid-column: 1 / span 8; grid-row: 3 / span 4; margin-top: clamp(24px, 3vw, 40px) !important; aspect-ratio: 16 / 9; overflow: hidden; background: var(--g95); }
.jp-27 .jp-feature-thumb img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.jp-27 .jp-dame-feature > .e-con-inner > :is(.jp-stat-figure, .jp-stat-caption, .jp-copy, .jp-actions) { grid-column: 9 / -1; justify-self: start; }
.jp-27 .jp-dame-feature > .e-con-inner > .jp-stat-figure { grid-row: 3; margin-top: clamp(24px, 3vw, 40px) !important; }
.jp-27 .jp-dame-feature > .e-con-inner > .jp-stat-caption { grid-row: 4; }
.jp-27 .jp-dame-feature > .e-con-inner > .jp-copy { grid-row: 5; margin-top: clamp(24px, 3vw, 48px) !important; }
.jp-27 .jp-dame-feature > .e-con-inner > .jp-actions { grid-row: 6; margin-top: 16px !important; }
.jp-27 .jp-stat-figure .elementor-heading-title { font-size: var(--t-xl) !important; line-height: .9 !important; letter-spacing: -.045em !important; color: var(--ink) !important; }
.jp-27 .jp-stat-caption p { font-family: var(--ui) !important; font-size: var(--t-label) !important; letter-spacing: .08em !important; text-transform: uppercase; color: var(--g45) !important; margin: 10px 0 0 !important; max-width: 30ch; }
@media (max-width: 1024px) {
  .jp-27 .jp-dame-feature > .e-con-inner > .jp-feature-thumb { margin-bottom: 8px !important; }
  .jp-27 .jp-dame-feature > .e-con-inner > .jp-copy { margin-top: 20px !important; }
}

/* about: early contact strip directly under the hero */
.jp-27 .jp-quick-contact { width: 100% !important; }
.jp-27 .jp-quick-contact > .e-con-inner {
  max-width: var(--max) !important; margin-inline: auto !important; padding: 24px var(--gut) !important; box-sizing: border-box;
  display: flex !important; flex-flow: row wrap !important; align-items: center !important; justify-content: space-between !important; gap: 16px 40px !important;
}
.jp-27 .jp-quick-contact > .e-con-inner::before { content: ''; position: absolute; left: var(--gut); right: var(--gut); top: 0; height: 1px; background: var(--ink); }
.jp-27 .jp-quick-contact { position: relative; }
.jp-27 .jp-quick-contact .jp-quick-contact-note { width: auto !important; max-width: 52ch; }
.jp-27 .jp-quick-contact .jp-quick-contact-note p { margin: 0 !important; }
.jp-27 .jp-quick-contact .jp-actions { width: auto !important; }

/* about: the employment timeline sits behind a Full CV disclosure (portfolio.js moves the list in) */
.jp-27 .jp-cv summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
  min-height: 64px; padding-block: 16px; border-block: 1px solid var(--ink);
  font-family: var(--ui); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.jp-27 .jp-cv summary::-webkit-details-marker { display: none; }
.jp-27 .jp-cv summary::after { content: '+'; font-size: 24px; line-height: 1; width: 24px; text-align: center; transition: transform .4s var(--e-expo); }
.jp-27 .jp-cv[open] summary::after { transform: rotate(45deg); }
.jp-27 .jp-cv[open] summary { border-bottom-color: transparent; margin-bottom: -1px; }
.jp-27 .jp-cv .jp-cv-note { flex: 1 1 auto; text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--g25); }
.jp-27 .jp-cv summary:hover .jp-cv-label { background: linear-gradient(var(--acc), var(--acc)) 0 100% / 100% .3em no-repeat; }

/* footer: peak-end line left; contact + four rooms + socials fill the right half.
   Bottom padding clears the reveal observer's -8% band so the last row always reveals. */
.jp-27 .jp-footer { padding-bottom: max(clamp(40px, 3vw, 56px), calc(8svh + 24px)) !important; }
.jp-27 .jp-footer > .e-con-inner > :first-child { grid-column: 1 / span 7; grid-row: 1 / span 2; align-self: end; }
.jp-27 .jp-footer > .e-con-inner > :nth-child(2) { grid-row: 3; }
.jp-27 .jp-footer > .e-con-inner > .jp-footer-contact { grid-column: 9 / -1; grid-row: 1; align-self: start; }
.jp-27 .jp-footer > .e-con-inner > .jp-footer-rooms { grid-column: 9 / -1; grid-row: 2; align-self: end; }
.jp-27 .jp-footer > .e-con-inner > .jp-social-icons { grid-column: 9 / -1; grid-row: 3; }
.jp-27 .jp-footer .jp-social-icons :is(.elementor-widget-container, .elementor-social-icons-wrapper) { justify-content: flex-start !important; text-align: left !important; }
.jp-27 .jp-footer-contact > .e-con-inner { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
.jp-27 .jp-footer .jp-footer-label .elementor-heading-title {
  font-family: var(--ui) !important; font-size: var(--t-label) !important; letter-spacing: .08em !important; line-height: 1.4 !important;
  text-transform: uppercase; color: var(--g60) !important; max-width: none;
}
.jp-27 .jp-footer .jp-footer-cta .elementor-button { background: var(--white) !important; color: var(--ink) !important; box-shadow: none !important; }
.jp-27 .jp-footer .jp-footer-cta .elementor-button:hover { background: var(--acc) !important; color: var(--white) !important; }
.jp-27 .jp-footer .jp-footer-rooms p { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; letter-spacing: 0; }
.jp-27 .jp-footer .jp-footer-rooms a {
  font-family: var(--sans) !important; font-weight: 400; font-size: clamp(22px, 1rem + .9vw, 32px); letter-spacing: -.02em; line-height: 1.3;
  color: var(--white) !important; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px;
}
.jp-27 .jp-footer .jp-footer-rooms a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
@media (max-width: 767px) {
  .jp-27 .jp-footer > .e-con-inner > * { grid-row: auto !important; }
}

/* ---------------------------------------------------------------------
   L5 — motion (only under html.m-js; museum-motion.js v3 sets it.
   The head bootstrap never sets m-js under prefers-reduced-motion.)
   --------------------------------------------------------------------- */
/* top-edge scroll progress */
.m-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10001;
  background: var(--acc);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  pointer-events: none;
}

/* sticky side rails (≥1280px, decorative, aria-hidden) */
.m-rail { display: none; }
@media (min-width: 1280px) {
  .jp-27 .m-rail {
    display: block;
    position: absolute;
    top: var(--sec); bottom: var(--sec);
    left: max(12px, calc((100% - var(--max)) / 2 + 18px));
    width: 16px;
    pointer-events: none;
  }
  .jp-27 .m-rail__in {
    position: sticky;
    top: calc(var(--hdr) + 40px);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font: 400 12px/1 var(--ui);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g45);
    white-space: nowrap;
  }
  .jp-27 .m-rail__n { color: var(--ink); margin-bottom: 14px; display: inline-block; }
}

/* masked word rise */
.m-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .14em; margin: 0 -.04em -.14em; }
.m-wi { display: inline-block; }
html.m-js .m-split .m-wi {
  transform: translate3d(0, 112%, 0);
  transition: transform 1.05s var(--e-expo);
  transition-delay: calc(var(--l, 0) * 90ms + var(--w, 0) * 18ms);
}
html.m-js .m-split.is-in .m-wi { transform: none; }
/* until the split runs, keep reveal headings invisible (fails open: the head
   bootstrap drops m-js after 3s if motion never boots). Hero H1s only hide on
   ≥768px — on phones they are the LCP candidate and render statically. */
html.m-js :is(.jp-section-title, .jp-contact-title, .jp-feature-title, .jp-domain) .elementor-heading-title:not(.m-split) { visibility: hidden; }
html.m-js.m-hs .jp-display .elementor-heading-title:not(.m-split) { visibility: hidden; }

/* fade-rise blocks */
html.m-js [data-m-block] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s var(--e-out), transform 1.1s var(--e-expo);
  transition-delay: calc(var(--d, 0) * 1ms);
}
html.m-js [data-m-block].is-in { opacity: 1; transform: none; }

/* image curtain + settle (image stays painted: LCP-safe) */
html.m-js .m-curtain { position: relative; }
html.m-js .m-curtain::after {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  background: var(--ink);
  transform-origin: 50% 0;
  transition: transform 1.2s var(--e-sharp);
  transition-delay: calc(var(--d, 0) * 1ms);
  pointer-events: none;
}
html.m-js .m-curtain.is-in::after { transform: scaleY(0); }
html.m-js .m-curtain.m-acc::after { background: var(--acc); }

/* parallax: translate set by JS on --py; scale settles after reveal */
html.m-js .m-par img {
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps));
  transition: --ps 1.6s var(--e-expo);
  will-change: transform;
}
html.m-js .m-par.is-in img { --ps: 1.08; will-change: transform; }
html.m-js .m-par.is-in .m-par-el { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
html.m-js .m-par:not(.is-in) img,
html.m-js .m-par:not(.is-in) .m-par-el { will-change: auto; }

/* hairline draws */
html.m-js .jp-section > .e-con-inner::before,
html.m-js :is(.elementor-element-b1, .elementor-element-d1, .elementor-element-e1) > .e-con-inner::before { transform: scaleX(0); transition: transform 1.4s var(--e-expo); }
html.m-js .is-ruled > .e-con-inner::before { transform: scaleX(1) !important; }

/* magnetic */
html.m-js .m-mag { transition: transform .6s var(--e-expo), background-color .3s var(--e-out), color .3s var(--e-out); }

/* reduced motion: everything static, everything visible */
@media (prefers-reduced-motion: reduce) {
  .jp-27 *, .jp-27 *::before, .jp-27 *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .m-progress, .m-gl { display: none !important; }
  .m-wi, [data-m-block], .m-par img, .m-par-el { transform: none !important; opacity: 1 !important; }
  .m-curtain::after { display: none !important; }
  .elementor-heading-title { visibility: visible !important; }
}



/* Dame Un Grrr breakout card: full-width row, media left, total: title+stat+copy right */
.jp-27 .jp-video-grid .elementor-element-94b2fb7a { grid-column: 1 / -1 !important; }
.jp-27 .jp-video-grid .elementor-element-94b2fb7a > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  column-gap: var(--cg) !important;
  align-items: center !important;
  row-gap: 12px !important;
}
.jp-27 .jp-video-grid .elementor-element-94b2fb7a .jp-card-index { grid-column: 1 / -1; }
.jp-27 .jp-video-grid .elementor-element-94b2fb7a .jp-feature-thumb { grid-column: 1 / span 6; grid-row: 2 / span 4; }
.jp-27 .jp-video-grid .elementor-element-94b2fb7a .jp-video-title { grid-column: 7 / -1; grid-row: 2; }
.jp-27 .jp-video-grid .elementor-element-94b2fb7a .jp-stat-figure { grid-column: 7 / span 4; grid-row: 3; }
.jp-27 .jp-video-grid .elementor-element-94b2fb7a .jp-stat-caption { grid-column: 7 / span 4; grid-row: 4; }
.jp-27 .jp-video-grid .elementor-element-94b2fb7a .jp-copy { grid-column: 7 / -1; grid-row: 5; }
@media (max-width: 1024px) {
  .jp-27 .jp-video-grid .elementor-element-94b2fb7a > .e-con-inner { display: block !important; }
}