/* ===== Type scale ===== */
  :root {
    --h1: 64px;
    --h2: 48px;
    --h3: 32px;
    --btn: 24px;
    --b1: 24px;
    --brand: 32px;
    --tag: 14px;
  }
  @media (max-width: 1100px) {
    :root {
      --h1: 52px;
      --h2: 40px;
      --h3: 28px;
      --btn: 20px;
      --b1: 18px;
      --brand: 28px;
      --tag: 13px;
    }
  }
  @media (max-width: 720px) {
    :root {
      --h1: 40px;
      --h2: 30px;
      --h3: 24px;
      --btn: 18px;
      --b1: 18px;
      --brand: 24px;
      --tag: 12px;
    }
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    background: #efefef;
    -webkit-font-smoothing: antialiased;
    transition: background-color .6s ease, color .6s ease;
  } 
p, span{line-height:1.2;}
  #c {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    display: block;
    z-index: 1;
  }
  /* Custom cursor */
  .cursor { display: none; }
  .cursor-disabled {
    position: fixed; top: 0; left: 0;
    width: 12px; height: 12px;
    border: 1px solid rgba(20,20,20,.55);
    border-radius: 50%;
    pointer-events: none;
    z-index: 100;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    transition: width .25s ease, height .25s ease, opacity .3s ease;
  }
  .cursor::after {
    content: '';
    position: absolute;
    inset: 50%;
    width: 2px; height: 2px;
    background: #ff0199;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  /* UI overlay */
  /* ============== B&F PERSISTENT NAV ============== */
  .topnav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 70px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 36px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s ease;
  }
  .topnav.show { opacity: 1; }
  .topnav-brand {
    
    font-weight: 400;
    font-size: var(--brand);
    color: #ff0199;
    letter-spacing: -.02em;
    pointer-events: auto;
  }
  .topnav-brand .amp { margin: 0 2px; font-weight: 400; }
  .topnav-cta {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border: 1px solid rgba(20,20,20,.32);
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    
    font-size: var(--btn);
    
    color: #1a1a1a;
    transition: background-color .3s, border-color .3s, color .3s;
  }
  .topnav-cta:hover { border-color: #ff0199; color: #ff0199; }
  .brief-dash { display: inline-block; width: 16px; height: 1px; background: #ff0199; }
  .brief-menu { display: inline-flex; flex-direction: column; gap: 4px; }
  .brief-menu i { display: block; width: 16px; height: 1.5px; background: currentColor; }

  /* ============== HERO OVERLAY ============== */
  .hero {
    position: fixed;
    inset: 0;
    z-index: 15;
    pointer-events: auto;
    opacity: 1;
    transition: opacity .7s ease;
    overflow: hidden;
  }
  .hero.fade { opacity: 0; pointer-events: none; }
  .hero-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #f4e3eb 0%, #f1dbe4 60%, #efd9e6 100%);
  }
  .hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0, rgba(255,255,255,.55) 1px, transparent 1px, transparent 8px);
    opacity: .55;
  }
  .hero-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 36px;
  }
  .hero-brand {
    
    font-weight: 400;
    font-size: var(--brand);
    color: #ff0199;
    letter-spacing: -.02em;
  }
  .hero-brand .amp { margin: 0 2px; font-weight: 400; }
  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border: 1px solid rgba(20,20,20,.4);
    border-radius: 999px;
    background: rgba(255,255,255,.7);

    cursor: pointer;
    
    font-size: var(--btn);
    
    color: #1a1a1a;
    transition: border-color .3s, color .3s;
  }
  .hero-cta:hover { border-color: #ff0199; color: #ff0199; }
  .hero-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -58%);
    text-align: center;
    width: min(92%, 720px);
  }
  .hero-title {
    
    font-weight: 400;
    font-size: var(--h1);
    line-height: 1.16;
    letter-spacing: -.02em;
    color: #222;
  }
  .hero-sub {
    
    font-size: var(--b1);
    
    margin-top: 18px;
    color: #555;
    
    font-weight: 400;
  }
  .hero-card {
    position: absolute;
    bottom: 0; left: 0;
    padding: 38px 60px 38px 40px;
    background: rgba(255,255,255,.85);
    border-top-right-radius: 36px;
    color: #2a2a2a;
    
    font-size: var(--h3);
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: -.015em;
  }

  /* ============== CAPTIONS (3D phase) ============== */
  .caption {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 8;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    pointer-events: none;
    text-align: center;
  }
  .caption .text {
    
    font-weight: 400;
    color: #2a2a2a;
    line-height: 1.18;
    letter-spacing: -.015em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1.4s ease;
    max-width: 760px;
    padding: 0 24px;
  }
  .caption.show .text { opacity: 1; transform: translateY(0); }
  .caption .big {
    font-size: var(--h1);
    display: block;
    font-style: normal;
  }
  .caption .accent { color: #ff0199; }
  .caption .sub {
    display: block;
    
    font-size: var(--b1);
    
    margin-top: 16px;
    color: #555;
    
    font-weight: 400;
  }

  /* ============== CONTENT BLOCK (white HTML section) ============== */
  .content-block {
    position: relative;
    z-index: 5;
    background: #ffffff;
    color: #1a1a1a;
    padding: 60px 0 100px;
    
  }
  .cb-section {
    max-width: none;
    margin: 0;
    padding: 100px 360px;
  }
  .cb-awards {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
  }
  .cb-awards h2,
  .cb-muscles-header h2,
  .cb-work-header h2 {
    
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -.02em;
    margin: 0 0 18px;
    color: #1a1a1a;
  }
  .cb-awards h2 { font-size: var(--h2); }
  .cb-muscles-header h2 { font-size: var(--h2); }
  .cb-work-header h2 { font-size: var(--h2); }
  .content-block p {
    font-size: var(--b1);
    color: #555;
    
  }
  .cb-awards-art {
    position: relative;
    height: 280px;
    border-radius: 10px;
    overflow: hidden;
  }
  .iridescent {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 28% 20%, #82e9ff 0%, transparent 50%),
      radial-gradient(ellipse 70% 55% at 75% 80%, #ff66cc 0%, transparent 50%),
      radial-gradient(ellipse 60% 80% at 80% 30%, #c5a5ff 0%, transparent 50%),
      linear-gradient(135deg, #94aeff 0%, #c594ff 50%, #ff89d9 100%);
    filter: blur(2px) saturate(1.1);
  }
  .cb-muscles-header,
  .cb-work-header { margin-bottom: 50px; }
  .cb-muscle-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .muscle {
    position: relative;
    padding: 32px 30px;
    background: #ffffff;
    border: 1px solid rgba(20,20,20,.14);
    border-radius: 14px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: border-color .25s ease, transform .25s ease;
  }
  .muscle:hover { border-color: #ff0199; transform: translateY(-2px); }
  .muscle h3 {
    
    font-weight: 400;
    font-size: var(--h3);
    line-height: 1.1;
    margin: 0 0 10px;
    color: #1a1a1a;
  }
  .muscle h3 .thin {
    
    font-weight: 400;
    font-size: var(--b1);
    letter-spacing: 0;
    color: #999;
    display: inline-block;
    margin-left: 4px;
    vertical-align: baseline;
  }
  /* Top-left gradient image cell — fills with the iridescent decoration */
  .muscle-art {
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(20,20,20,.14);
  }
  .muscle-art:hover { transform: translateY(-2px); }
  .muscle-art .iridescent {
    position: absolute;
    inset: 0;
  }

  .cb-work-header p { max-width: 560px; }

  /* ============== SCROLL-DRIVEN STATEMENT SECTION ============== */
  /* Section is tall enough that the inner sticky text has scroll room
     to animate every word out (Float Up) before releasing.
     Uses higher-specificity selectors so .content-block p cannot override. */
  .content-block .cb-statement {
    height: 300vh;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .cb-statement .statement-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .content-block .statement-text {
    font-size: clamp(24px, 2.7vw, 38px) !important;    /* locked — sized to fit the longer manifesto */
    
    color: #2a2a2a;
    text-align: center;
    max-width: 1080px;
    margin: 0 auto;
    
    font-weight: 400;
  }

  /* During statement animation: fix the sticky container to viewport */
  .cb-statement.animating .statement-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    z-index: 10;
  }
  .cb-statement .statement-text .word {
    display: inline-block;
    opacity: 1;                /* start fully visible */
    transform: translateY(0);  /* at rest */
    will-change: transform, opacity;
    font-size: clamp(24px, 2.7vw, 38px);   /* inherit-safe lock against descendants */
  }
  .cb-statement .statement-text .word.accent { color: #ff0199; }

  body.theme-dark .cb-statement .statement-text { /*color: #e8e8e8; */}
  .cb-work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 595px));
    justify-content: center;
    column-gap: 10px;
    row-gap: 40px;
  }
.cb-work-grid a {
    display: block;
    text-decoration: none;
    position: relative;
}
  /* Each work item: image card (with tag overlay) → title → description */
  .work-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 595px;
  }
  /* Tag now lives inside the image card at top-right, 20px insets */
  /*.work-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(20,20,20,.12);
    font-size: var(--tag);
    
    color: #1a1a1a;
  }*/

.work-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
    transition: all .3s ease;
}

.work-tag.light-tag {
    background: #fff;
    color: #000 !important;
}

.work-tag.dark-tag {
    background: #000;
    color: #fff !important;
}
  /* The image box: target 595x463, scales down responsively while keeping aspect */
  .work-card {
    position: relative;
    width: 100%;
    max-width: 595px;
    aspect-ratio: 595 / 463;
    border-radius: 14px;
    overflow: hidden;
    background: #e9e9ee;
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .work-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0,0,0,.14); }
  .work-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Title and description live OUTSIDE the colored box */
  .work-info { padding: 4px 2px 0; }
  .work-info h3 {
    font-weight: 400;
    font-size: var(--h3);
    line-height: 1.1;
    margin: 0 0 15px;
    color: #1a1a1a;
  }
  .work-info p {
    font-size: var(--b1);
    color: #555;
    max-width: 90%;
  }
  .cb-work-more { text-align: center; margin-top: 40px; }
  .cb-work-more button {
    padding: 16px 40px;
    border: 1px solid rgba(20,20,20,.35);
    border-radius: 999px;
    background: transparent;
    
    font-size: var(--btn);
    
    cursor: pointer;
    color: #1a1a1a;
    transition: all .25s ease;
  }
  .cb-work-more button:hover { background: #ff0199; border-color: #ff0199; color: white; }

  /* ============== FINALE OVERLAY (sculpture) ============== */
  .finale {
    position: fixed;
    inset: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
    opacity: 0;
    transition: opacity 1.2s ease;
    gap: 32px;
    padding: 0 24px;
  }
  .finale.show { opacity: 1; }
  .finale-text {
    
    font-weight: 400;
    font-size: var(--h1);
    line-height: 1.13;
    letter-spacing: -.02em;
    color: #fafafa;
    text-shadow: 0 4px 30px rgba(0,0,0,.35);
  }
  .finale-text .accent { color: #ff0199; }
  .finale-cta {
	  text-decoration: none;
    pointer-events: auto;
    padding: 18px 40px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 999px;
    background: rgba(0,0,0,.32);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    
    font-size: var(--btn); 
    color: white;
    cursor: pointer;
    transition: all .3s ease;
    text-transform: uppercase;
  }
  .finale-cta:hover {color:var(--color-11);background: #FFFFFF; border-color: #ff0199; }

  /* Spacers — invisible, only generate scroll height */
  .spacer { pointer-events: none; }

  /* Loader */
  #loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #efefef;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 1.2s ease, visibility 1.2s;
  }
  #loader.hide { opacity: 0; visibility: hidden; }
  .loader-lbl {
    
    font-size: 10px;
    letter-spacing: .55em;
    color: #111;
    margin-bottom: 18px;
  }
  .loader-bar {
    width: 220px; height: 1px;
    background: rgba(0,0,0,.15);
    overflow: hidden;
  }
  .loader-bar i {
    display: block;
    height: 100%; width: 0%;
    background: #ff0199;
    transition: width .35s ease;
  }
  .loader-pct {
    
    font-size: 10px;
    letter-spacing: .3em;
    color: #555;
    margin-top: 14px;
  }

  /* Top noise grain overlay */
  .grain {
    position: fixed;
    inset: -50%;
    z-index: 7;
    pointer-events: none;
    opacity: .03;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    animation: grainShift 8s steps(8) infinite;
  }
  @keyframes grainShift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-2%, 3%); }
    50%  { transform: translate(2%, -2%); }
    75%  { transform: translate(-1%, 2%); }
    100% { transform: translate(0, 0); }
  }

  /* (Side glyphs removed) */

  /* Responsive scale-down of section padding from 360px on wide desktops */
  @media (max-width: 1600px) {
    .cb-section { padding: 90px 160px; }
  }
  @media (max-width: 1200px) {
    .cb-section { padding: 80px 80px; }
  }

  @media (max-width: 720px) {
    .topnav { padding: 0 18px; height: 60px; }
    .topnav-cta { padding: 10px 16px; gap: 10px; }
    .hero-header { padding: 18px; }
    .hero-cta { padding: 10px 16px; gap: 10px; }
    .hero-card { padding: 24px 36px 24px 20px; border-top-right-radius: 24px; }
    .cb-section { padding: 50px 22px; }
    .cb-awards { grid-template-columns: 1fr; gap: 36px; }
    .cb-awards-art { height: 200px; }
    .cb-muscle-grid { grid-template-columns: 1fr; }
    .cb-work-grid { grid-template-columns: 1fr; }
    .finale-cta { padding: 14px 28px; }
    .topnav-actions .theme-toggle { width: 32px; height: 32px; }
    .text-toggle  { right: 18px; bottom: 18px; top: auto; width: 28px; height: 28px; }
    body { cursor: auto; }
    .cursor { display: none; }
  }

  /* Immersive mode — when crossing into the chamber, strip foreground UI
     (we still want canvas + finale overlay visible, hence finale is excluded) */
  body.immersive .topnav,
  body.immersive .hero,
  body.immersive .cursor,
  body.immersive .theme-toggle,
  body.immersive .text-toggle {
    opacity: 0;
    transition: opacity 1.6s ease;
    pointer-events: none;
  }

  /* ========== TOGGLE BUTTONS ==========
     theme-toggle lives INSIDE .topnav-actions on the top-right (next to Send a brief).
     text-toggle stays fixed at bottom-right (small utility, doesn't need top placement). */
  .topnav-actions {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    pointer-events: auto;
  }
  .theme-toggle,
  .text-toggle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(20,20,20,.32);
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #1a1a1a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    pointer-events: auto;
    transition: border-color .35s ease, color .35s ease, background-color .35s ease, transform .35s ease, opacity 1.6s ease;
  }
  /* theme-toggle: relative flex child within topnav */
  .topnav-actions .theme-toggle {
    position: relative;
  }
  /* text-toggle: independently fixed at bottom-right */
  .text-toggle {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 30px;
    height: 30px;
    z-index: 14;
  }
  .theme-toggle:hover,
  .text-toggle:hover {
    border-color: #ff0199;
    color: #ff0199;
    transform: scale(1.06);
  }
  .theme-toggle:active,
  .text-toggle:active { transform: scale(.94); }
  .theme-toggle svg,
  .text-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform .55s cubic-bezier(.65,0,.35,1);
  }
  .text-toggle svg { width: 15px; height: 15px; }
  body.theme-dark .theme-toggle svg { transform: rotate(180deg); }
  body.theme-dark .theme-toggle,
  body.theme-dark .text-toggle {
    background: rgba(20,20,24,.55);
    border-color: rgba(240,240,240,.32);
    color: #e8e8e8;
  }
  .text-toggle .slash { opacity: 0; transition: opacity .35s ease; }
  body.text-hidden .text-toggle .slash { opacity: 1; }

  /* ========== TEXT-HIDDEN OVERRIDES (manual toggle) ========== */
  body.text-hidden .topnav,
  body.text-hidden .hero,
  body.text-hidden .caption,
  body.text-hidden .content-block,
  body.text-hidden .finale {
    opacity: 0;
    pointer-events: none;
    transition: opacity .8s ease;
  }

  /* ========== DARK THEME OVERRIDES ========== */
  body.theme-dark { background: #0a0a0e; /*color: #f4f4f4; */}
  body.theme-dark .topnav-brand { color: #ff0199; }
  body.theme-dark .topnav-cta {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.28);
    /*color: #f0f0f0;*/
  }
  body.theme-dark .topnav-cta:hover { border-color: #ff0199; color: #ff0199; }
  body.theme-dark .caption .text { color: #f0f0f0; }
  body.theme-dark .caption .sub { color: #aaa; }
  body.theme-dark .content-block { background: #0e0e10; color: #f0f0f0; }
  body.theme-dark .content-block h2 { color: #f0f0f0; }
  body.theme-dark .content-block p { color: #a5a5a5; }
  body.theme-dark .muscle { background: transparent; border-color: rgba(255,255,255,.16); }
  body.theme-dark .muscle:hover { border-color: #ff0199; }
  body.theme-dark .muscle h3 { color: #f0f0f0; }
  body.theme-dark .muscle p { color: #a5a5a5; }
  body.theme-dark .muscle h3 .thin { color: #888; }
  body.theme-dark .muscle-art { border-color: rgba(255,255,255,.18); }
  body.theme-dark .work-tag { color: #f0f0f0; border-color: rgba(255,255,255,.25); }
  body.theme-dark .work-card { background: #1a1a1d; }
  body.theme-dark .work-info h3 { color: #f0f0f0; }
  body.theme-dark .work-info p { color: #a5a5a5; }
  body.theme-dark .cb-work-more button {
    border-color: rgba(255,255,255,.3);
    color: #f0f0f0;
  }
  body.theme-dark .cb-work-more button:hover {
    background: #ff0199;
    border-color: #ff0199;
    color: white;
  }
  body.theme-dark .theme-toggle,
  body.theme-dark .text-toggle {
    border-color: rgba(255,255,255,.30);
    background: rgba(20,20,22,.55);
    color: #f0f0f0;
  }
  body.theme-dark .theme-toggle:hover,
  body.theme-dark .text-toggle:hover {
    border-color: #ff0199;
    color: #ff0199;
  }
  body.theme-dark #loader { background: #0a0a0e; }
  body.theme-dark .loader-lbl { color: #f0f0f0; }
  body.theme-dark .loader-pct { color: #999; }
  body.theme-dark .loader-bar { background: rgba(255,255,255,.13); }
  body.theme-dark .cursor { border-color: rgba(255,255,255,.55); }
  body.theme-dark .grain { mix-blend-mode: soft-light; opacity: .04; }

  /* ============== WO CARDS CAROUSEL (ported, scoped under .wo-cards) ============== */
  /* Tall scroll section: scrolling through it drives the active card.
     Inner .scene is sticky/pinned at 100vh; --wo-len controls scroll length. */
  .wo-cards{
    position:relative; width:100%;
    height:var(--wo-len, 480vh);
    color:#111;
    background:transparent;
    font-family:'DM Sans','Helvetica Neue',sans-serif;
    -webkit-font-smoothing:antialiased; user-select:none;
  }
  .wo-cards.bg-grey{ background:#F4F4F4; }
  .wo-cards .scene{
    position:absolute; top:0; left:0; right:0;
    width:100%; height:100vh;
    display:flex; flex-direction:column;
    align-items:center; overflow:hidden;
  }
  /* Pinning is driven by JS (sticky is broken here because body{overflow-x:hidden}
     makes body a scrollport) — mirrors how the .cb-statement section pins. */
  .wo-cards .scene.pin-fixed{ position:fixed; top:0; left:0; right:0; z-index:10; }
  .wo-cards .scene.pin-bottom{ position:absolute; top:auto; bottom:0; }
  .wo-cards .nav{
    display:flex; gap:6px; padding:96px 0 0; z-index:100; flex-shrink:0;
    flex-wrap:wrap; justify-content:center;
  }
  .wo-cards .nav-btn{
    background:#ECECEC;
    color:#111;
    border:none;
    padding:14px 24px;
    border-radius:2px;
    font-size: 18px;
    font-weight:500;
    font-family:inherit;
    cursor:pointer;
    transition:background .45s cubic-bezier(.22,1,.36,1), color .45s cubic-bezier(.22,1,.36,1), border-radius .45s cubic-bezier(.22,1,.36,1);
    white-space:nowrap;
  }
  .wo-cards .nav-btn:hover{ background:#ddd; }
  .wo-cards .nav-btn.active{ background:#171313; color:#fff; border-radius:999px; }
  .wo-cards .carousel-wrap{
    flex:1; width:100%; position:relative;
    display:flex; align-items:center; justify-content:center; cursor:default;
  }
  .wo-cards .track{
    position:absolute; width:2200px; height:2200px; border-radius:50%;
    border:2px dashed rgba(0,0,0,.06); top:50%; left:50%;
    transform:translate(-50%,-50%) translateY(720px); pointer-events:none; z-index:0;
  }
  .wo-cards .card{
    position:absolute; width:520px; height:680px; border-radius:20px; overflow:hidden;
    background:#fff; border:1px solid rgba(0,0,0,.06);
    transition:transform .8s cubic-bezier(.22,1,.36,1), opacity .8s cubic-bezier(.22,1,.36,1);
    will-change:transform,opacity; z-index:2; box-shadow:0 4px 24px rgba(0,0,0,.06);
  }
  .wo-cards .card-inner{ width:100%; height:100%; display:flex; flex-direction:column; padding:36px 36px 0; }
  .wo-cards .card-text{ flex-shrink:0; }
  .wo-cards .card-title{font-weight:500;line-height:1.15;letter-spacing:-0.5px;color:#1a1a1a;margin-bottom: 30px;}
  .wo-cards .card-sub{color:#777;font-weight:400;max-width:320px;}
  .wo-cards .card-img-wrap{ flex:1; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; padding-top:12px; }
  .wo-cards .card-img{ width:100%; max-width:400px; height:auto; object-fit:contain; pointer-events:none; }
  .wo-cards .dots{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:100; }
  .wo-cards .dot{ width:8px; height:8px; border-radius:50%; background:rgba(0,0,0,.15); cursor:pointer; transition:all .4s cubic-bezier(.22,1,.36,1); }
  .wo-cards .dot.active{ background:rgba(0,0,0,.5); transform:scale(1.4); }
  @media (max-width:900px){
    .wo-cards .card{ width:320px; height:460px; }
    .wo-cards .card-title{ font-size:22px; }
    .wo-cards .card-sub{ font-size:13px; }
    .wo-cards .nav-btn{ padding:10px 14px; font-size:13px; }
    .wo-cards .nav{ padding:14px 10px 0; gap:4px; }
  }
  body.theme-dark .wo-cards{ background:transparent; color:#f0f0f0; }
  body.theme-dark .wo-cards.bg-grey{ background:#0e0e10; }
  body.theme-dark .wo-cards .nav-btn{ background:#1d1d22; color:#f0f0f0; }
  body.theme-dark .wo-cards .nav-btn:hover{ background:#26262c; }
  body.theme-dark .wo-cards .nav-btn.active{ background:#fff; color:#111; }
  body.theme-dark .wo-cards .card{ background:#17171a; border-color:rgba(255,255,255,.08); }
  body.theme-dark .wo-cards .card-title{ color:#f0f0f0; }
  body.theme-dark .wo-cards .card-sub{ color:#999; }
  body.theme-dark .wo-cards .track{ border-color:rgba(255,255,255,.06); }
  body.theme-dark .wo-cards .dot{ background:rgba(255,255,255,.2); }
  body.theme-dark .wo-cards .dot.active{ background:rgba(255,255,255,.6); }