/* WOTKNOT About page v2 — scoped Elementor widget styles. */
.wotknot-widget.wkw-about-widget{width:100%;max-width:none;color:#f5f3ed;background:#050505;font-family:"Inter",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:visible}
.wotknot-widget.wkw-about-widget,.wotknot-widget.wkw-about-widget *,.wotknot-widget.wkw-about-widget *::before,.wotknot-widget.wkw-about-widget *::after{box-sizing:border-box}
.wotknot-widget.wkw-about-widget img{display:block;width:100%}
.wotknot-widget.wkw-about-widget a{color:inherit;text-decoration:none}
.wotknot-widget.wkw-about-widget button{font:inherit;color:inherit}
.wotknot-widget.wkw-about-widget .wkw-about-page{position:relative;overflow:hidden;background:var(--ink);color:var(--paper)}

    .wotknot-widget.wkw-about-widget .wkw-about-page{
      --ink: #050505;
      --ink-soft: #101010;
      --paper: #f5f3ed;
      --paper-dim: rgba(245, 243, 237, .65);
      --cream: #fff0c6;
      --rule: rgba(245, 243, 237, .16);
      --mono: "JetBrains Mono", monospace;
      --sans: "Montserrat", "Inter", sans-serif;
      --serif: "Bodoni Moda", Georgia, serif;
      --ease: cubic-bezier(.16, 1, .3, 1);
      --ease-editorial: cubic-bezier(.77, 0, .18, 1);
      --gutter: clamp(1.25rem, 4vw, 4rem);
    }

    .wotknot-widget.wkw-about-widget *,
.wotknot-widget.wkw-about-widget *::before,
.wotknot-widget.wkw-about-widget *::after{ box-sizing: border-box; }
    
    
    .wotknot-widget.wkw-about-widget img{ display: block; width: 100%; }
    .wotknot-widget.wkw-about-widget a{ color: inherit; text-decoration: none; }
    .wotknot-widget.wkw-about-widget button{ font: inherit; color: inherit; }
    .wotknot-widget.wkw-about-widget ::selection{ background: var(--cream); color: var(--ink); }
    .wotknot-widget.wkw-about-widget :focus-visible{ outline: 2px solid var(--cream); outline-offset: 4px; }

    /* Page scroll progress — hairline under the global header zone. */
    .wotknot-widget.wkw-about-widget .abt-progress{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 80;
      width: 100%;
      height: 2px;
      background: transparent;
      pointer-events: none;
    }
    .wotknot-widget.wkw-about-widget .abt-progress__bar{
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, var(--cream), rgba(255, 240, 198, .35));
      transform: scaleX(0);
      transform-origin: left center;
      will-change: transform;
    }

    .wotknot-widget.wkw-about-widget .abt-eyebrow{
      display: flex;
      align-items: center;
      gap: .9rem;
      margin: 0;
      font-family: var(--mono);
      font-size: clamp(.6rem, .7vw, .72rem);
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--paper-dim);
    }
    .wotknot-widget.wkw-about-widget .abt-eyebrow::before{
      content: "";
      width: 2.4rem;
      height: 1px;
      background: var(--paper-dim);
    }

    /* ============================================================
       01 — Hero: char-staggered title, parallax portrait,
       rotating circular badge
       ============================================================ */
    .wotknot-widget.wkw-about-widget .abt-hero{
      position: relative;
      min-height: 100svh;
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
      align-items: center;
      gap: clamp(2rem, 5vw, 5rem);
      overflow: hidden;
      padding: clamp(6rem, 13vh, 9rem) var(--gutter) clamp(3.5rem, 7vh, 5.5rem);
    }
    .wotknot-widget.wkw-about-widget .abt-hero::before{
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 14% 18%, rgba(255, 240, 198, .05), transparent 26%),
        radial-gradient(circle at 86% 84%, rgba(255, 255, 255, .028), transparent 30%);
    }
    .wotknot-widget.wkw-about-widget .abt-hero__copy{ position: relative; z-index: 2; }
    .wotknot-widget.wkw-about-widget .abt-hero .abt-eyebrow{ margin-bottom: clamp(1.5rem, 3vh, 2.4rem); }
    .wotknot-widget.wkw-about-widget .abt-hero__title{
      margin: 0 0 clamp(1.75rem, 4vh, 2.75rem);
      font-family: var(--sans);
      font-size: clamp(2.9rem, 8.2vw, 8rem);
      font-weight: 400;
      line-height: .94;
      letter-spacing: -.06em;
      text-transform: uppercase;
    }
    .wotknot-widget.wkw-about-widget .abt-hero__title em{
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      text-transform: none;
      letter-spacing: -.02em;
      color: var(--cream);
    }
    .wotknot-widget.wkw-about-widget .abt-hero__title .abt-word-mask{
      display: inline-block;
      overflow: hidden;
      vertical-align: bottom;
    }
    .wotknot-widget.wkw-about-widget .abt-hero__title .abt-char{
      display: inline-block;
      transform: translateY(112%);
      transition: transform .95s var(--ease-editorial);
      transition-delay: var(--char-delay, 0s);
      will-change: transform;
    }
    .wotknot-widget.wkw-about-widget .abt-hero.is-in .abt-char{ transform: none; }
    .wotknot-widget.wkw-about-widget .abt-hero__dek{
      max-width: 36ch;
      margin: 0;
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(1rem, 1.4vw, 1.3rem);
      line-height: 1.55;
      color: var(--paper-dim);
      opacity: 0;
      transform: translateY(1.2rem);
      transition: opacity .9s var(--ease) .55s, transform .9s var(--ease) .55s;
    }
    .wotknot-widget.wkw-about-widget .abt-hero.is-in .abt-hero__dek{ opacity: 1; transform: none; }

    .wotknot-widget.wkw-about-widget .abt-hero__stage{
      position: relative;
      z-index: 1;
      justify-self: end;
      width: min(100%, 460px);
    }
    .wotknot-widget.wkw-about-widget .abt-hero__portrait{
      position: relative;
      aspect-ratio: 4 / 5;
      overflow: hidden;
      border: 1px solid rgba(255, 245, 210, .74);
      background: #111;
      clip-path: inset(0 0 100% 0);
      transition: clip-path 1.25s var(--ease-editorial) .25s;
      box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .45);
    }
    .wotknot-widget.wkw-about-widget .abt-hero.is-in .abt-hero__portrait{ clip-path: inset(0); }
    .wotknot-widget.wkw-about-widget .abt-hero__portrait img{
      position: absolute;
      inset: -12% 0;
      height: 124%;
      object-fit: cover;
      will-change: transform;
    }
    .wotknot-widget.wkw-about-widget .abt-hero__badge{
      position: absolute;
      left: -3.4rem;
      bottom: -3.4rem;
      width: clamp(108px, 11vw, 150px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      opacity: 0;
      transform: scale(.7) rotate(-30deg);
      transition: opacity .8s var(--ease) .9s, transform 1s var(--ease) .9s;
    }
    .wotknot-widget.wkw-about-widget .abt-hero.is-in .abt-hero__badge{ opacity: 1; transform: none; }
    .wotknot-widget.wkw-about-widget .abt-hero__badge svg{ position: absolute; inset: 0; will-change: transform; animation: abtBadgeSpin 22s linear infinite; }
    .wotknot-widget.wkw-about-widget .abt-hero__badge svg text{
      font-family: var(--mono);
      font-size: 8.1px;
      letter-spacing: .34em;
      text-transform: uppercase;
      fill: var(--cream);
    }
    .wotknot-widget.wkw-about-widget .abt-hero__badge img{
      width: 34%;
      filter: drop-shadow(0 .4rem 1rem rgba(0,0,0,.5));
    }
    @keyframes abtBadgeSpin { to { transform: rotate(360deg); } }
    .wotknot-widget.wkw-about-widget .abt-hero__scroll{
      position: absolute;
      left: var(--gutter);
      bottom: clamp(1.4rem, 3vh, 2.4rem);
      display: flex;
      align-items: center;
      gap: .7rem;
      font-family: var(--mono);
      font-size: .58rem;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--paper-dim);
    }
    .wotknot-widget.wkw-about-widget .abt-hero__scroll::after{
      content: "";
      width: 1px;
      height: 2.2rem;
      background: linear-gradient(180deg, var(--cream), transparent);
      transform-origin: top;
      animation: abtScrollPulse 2.2s var(--ease) infinite;
    }
    @keyframes abtScrollPulse {
      0% { transform: scaleY(0); opacity: 0; }
      35% { transform: scaleY(1); opacity: 1; }
      100% { transform: scaleY(1) translateY(.5rem); opacity: 0; }
    }

    /* ============================================================
       02 — Velocity marquee
       ============================================================ */
    .wotknot-widget.wkw-about-widget .abt-marquee{
      position: relative;
      overflow: hidden;
      padding: clamp(1.1rem, 2.4vh, 1.7rem) 0;
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      user-select: none;
    }
    .wotknot-widget.wkw-about-widget .abt-marquee__track{
      display: flex;
      width: max-content;
      will-change: transform;
      font-family: var(--sans);
      font-size: clamp(1.1rem, 2.2vw, 2rem);
      font-weight: 300;
      letter-spacing: -.03em;
      text-transform: uppercase;
      white-space: nowrap;
      color: var(--paper-dim);
    }
    .wotknot-widget.wkw-about-widget .abt-marquee__track em{
      font-family: var(--serif);
      font-style: italic;
      color: var(--cream);
    }
    .wotknot-widget.wkw-about-widget .abt-marquee__track > span{
      display: flex;
      align-items: center;
      gap: 2.2rem;
      padding-right: 2.2rem;
      flex: 0 0 auto;
    }
    .wotknot-widget.wkw-about-widget .abt-marquee__dot{
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(255, 240, 198, .5);
      flex: 0 0 auto;
    }

    /* ============================================================
       03 — Manifesto: scroll-fill text
       ============================================================ */
    .wotknot-widget.wkw-about-widget .abt-manifesto{
      position: relative;
      padding: clamp(6rem, 14vh, 11rem) var(--gutter);
    }
    .wotknot-widget.wkw-about-widget .abt-manifesto .abt-eyebrow{ margin-bottom: clamp(2rem, 5vh, 3.25rem); }
    .wotknot-widget.wkw-about-widget .abt-manifesto__statement{
      margin: 0;
      max-width: 26ch;
      font-family: var(--sans);
      font-size: clamp(1.9rem, 4.4vw, 4.4rem);
      font-weight: 400;
      line-height: 1.28;
      letter-spacing: -.03em;
    }
    .wotknot-widget.wkw-about-widget .abt-manifesto__statement .abt-fill-word{
      color: rgba(245, 243, 237, .16);
      transition: color .35s linear;
    }
    .wotknot-widget.wkw-about-widget .abt-manifesto__statement .abt-fill-word.is-lit{ color: var(--paper); }
    .wotknot-widget.wkw-about-widget .abt-manifesto__statement .abt-fill-word.abt-fill-accent.is-lit{
      color: var(--cream);
      font-family: var(--serif);
      font-style: italic;
      letter-spacing: -.01em;
    }

    /* ============================================================
       04 — Chapters: sticky scrollytelling
       ============================================================ */
    .wotknot-widget.wkw-about-widget .abt-chapters{
      position: relative;
      border-top: 1px solid var(--rule);
    }
    .wotknot-widget.wkw-about-widget .abt-chapter{
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
      gap: clamp(2rem, 6vw, 6rem);
      padding: clamp(4.5rem, 10vh, 8rem) var(--gutter);
      border-bottom: 1px solid var(--rule);
    }
    .wotknot-widget.wkw-about-widget .abt-chapter:last-child{ border-bottom: 0; }
    .wotknot-widget.wkw-about-widget .abt-chapter__rail{
      position: sticky;
      top: clamp(5.5rem, 12vh, 8rem);
      align-self: start;
      display: grid;
      gap: 1.1rem;
    }
    .wotknot-widget.wkw-about-widget .abt-chapter__num{
      font-family: var(--mono);
      font-size: clamp(.62rem, .74vw, .76rem);
      letter-spacing: .26em;
      color: rgba(255, 240, 198, .42);
    }
    .wotknot-widget.wkw-about-widget .abt-chapter__title{
      margin: 0;
      font-family: var(--sans);
      font-size: clamp(2rem, 4.6vw, 4.4rem);
      font-weight: 500;
      line-height: .98;
      letter-spacing: -.045em;
      text-transform: uppercase;
    }
    .wotknot-widget.wkw-about-widget .abt-chapter__title .abt-line{ display: block; overflow: hidden; }
    .wotknot-widget.wkw-about-widget .abt-chapter__title .abt-line > span{
      display: inline-block;
      transform: translateY(112%);
      transition: transform 1s var(--ease-editorial);
    }
    .wotknot-widget.wkw-about-widget .abt-chapter.abt-in .abt-chapter__title .abt-line > span{ transform: none; }
    .wotknot-widget.wkw-about-widget .abt-chapter__title .abt-line:nth-child(2) > span{ transition-delay: .1s; }
    .wotknot-widget.wkw-about-widget .abt-chapter__body{ display: grid; gap: clamp(1.75rem, 4vh, 2.75rem); }
    .wotknot-widget.wkw-about-widget .abt-chapter__media{
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      border: 1px solid var(--rule);
      background: #111;
      clip-path: inset(0 0 100% 0);
      transition: clip-path 1.2s var(--ease-editorial);
    }
    .wotknot-widget.wkw-about-widget .abt-chapter.abt-in .abt-chapter__media{ clip-path: inset(0); }
    .wotknot-widget.wkw-about-widget .abt-chapter__media img{
      position: absolute;
      inset: -12% 0;
      height: 124%;
      object-fit: cover;
      filter: grayscale(1) brightness(.7) contrast(1.04);
      transition: filter 1s var(--ease) .3s;
      will-change: transform;
    }
    .wotknot-widget.wkw-about-widget .abt-chapter.abt-in .abt-chapter__media img{ filter: none; }
    .wotknot-widget.wkw-about-widget .abt-chapter__copy{
      margin: 0;
      max-width: 52ch;
      font-size: clamp(.95rem, 1.1vw, 1.08rem);
      line-height: 1.8;
      color: var(--paper-dim);
      opacity: 0;
      transform: translateY(1.4rem);
      transition: opacity .9s var(--ease) .2s, transform .9s var(--ease) .2s;
    }
    .wotknot-widget.wkw-about-widget .abt-chapter.abt-in .abt-chapter__copy{ opacity: 1; transform: none; }
    .wotknot-widget.wkw-about-widget .abt-chapter__copy strong{
      font-weight: 500;
      color: var(--paper);
    }
    .wotknot-widget.wkw-about-widget .abt-chapter__pull{
      margin: 0;
      max-width: 30ch;
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(1.15rem, 1.8vw, 1.6rem);
      line-height: 1.45;
      color: var(--cream);
      opacity: 0;
      transform: translateY(1.4rem);
      transition: opacity .9s var(--ease) .35s, transform .9s var(--ease) .35s;
    }
    .wotknot-widget.wkw-about-widget .abt-chapter.abt-in .abt-chapter__pull{ opacity: 1; transform: none; }

    /* ============================================================
       05 — Numbers: animated counters
       ============================================================ */
    .wotknot-widget.wkw-about-widget .abt-numbers{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      border-top: 1px solid var(--rule);
      border-bottom: 1px solid var(--rule);
      background: var(--ink-soft);
    }
    .wotknot-widget.wkw-about-widget .abt-number{
      position: relative;
      padding: clamp(2.25rem, 5vh, 3.75rem) clamp(1.25rem, 2.5vw, 2.5rem);
      border-left: 1px solid var(--rule);
      display: grid;
      gap: .9rem;
      align-content: start;
      overflow: hidden;
    }
    .wotknot-widget.wkw-about-widget .abt-number:first-child{ border-left: 0; }
    .wotknot-widget.wkw-about-widget .abt-number::after{
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 2px;
      background: linear-gradient(90deg, var(--cream), rgba(255, 240, 198, .05));
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 1.2s var(--ease-editorial) .2s;
    }
    .wotknot-widget.wkw-about-widget .abt-number.abt-in::after{ transform: scaleX(1); }
    .wotknot-widget.wkw-about-widget .abt-number__value{
      display: flex;
      align-items: baseline;
      gap: .3rem;
      font-family: var(--sans);
      font-size: clamp(3rem, 6.5vw, 6rem);
      font-weight: 300;
      line-height: 1;
      letter-spacing: -.05em;
      font-variant-numeric: tabular-nums;
    }
    .wotknot-widget.wkw-about-widget .abt-number__value small{
      font-family: var(--serif);
      font-style: italic;
      font-size: .3em;
      font-weight: 400;
      color: var(--cream);
      letter-spacing: 0;
    }
    .wotknot-widget.wkw-about-widget .abt-number__label{
      font-family: var(--mono);
      font-size: clamp(.56rem, .66vw, .68rem);
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--paper-dim);
    }
    .wotknot-widget.wkw-about-widget .abt-number__sub{
      margin: 0;
      max-width: 26ch;
      font-size: clamp(.82rem, .95vw, .92rem);
      line-height: 1.65;
      color: var(--paper-dim);
    }
    .wotknot-widget.wkw-about-widget .abt-number__clocks{
      display: grid;
      gap: .3rem;
      font-family: var(--mono);
      font-size: clamp(.6rem, .72vw, .74rem);
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--paper-dim);
      font-variant-numeric: tabular-nums;
    }
    .wotknot-widget.wkw-about-widget .abt-number__clocks span{ display: flex; justify-content: space-between; gap: 1rem; }
    .wotknot-widget.wkw-about-widget .abt-number__clocks b{ font-weight: 400; color: var(--paper); }

    /* ============================================================
       06 — Handoff: magnetic CTA (page ends here; global footer follows)
       ============================================================ */
    .wotknot-widget.wkw-about-widget .abt-handoff{
      display: grid;
      justify-items: center;
      gap: clamp(1.75rem, 4vh, 2.75rem);
      padding: clamp(5.5rem, 13vh, 10rem) var(--gutter);
      text-align: center;
    }
    .wotknot-widget.wkw-about-widget .abt-handoff__line{
      margin: 0;
      max-width: 24ch;
      font-family: var(--sans);
      font-size: clamp(1.7rem, 3.8vw, 3.6rem);
      font-weight: 400;
      line-height: 1.14;
      letter-spacing: -.04em;
      text-wrap: balance;
    }
    .wotknot-widget.wkw-about-widget .abt-handoff__line em{
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      color: var(--cream);
    }
    .wotknot-widget.wkw-about-widget .abt-magnetic{
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: .8rem;
      padding: 1.1rem 2.1rem;
      border: 1px solid rgba(255, 240, 198, .7);
      border-radius: 999px;
      font-family: var(--mono);
      font-size: clamp(.6rem, .74vw, .72rem);
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--cream);
      overflow: hidden;
      isolation: isolate;
      transition: color .35s ease;
      will-change: transform;
    }
    .wotknot-widget.wkw-about-widget .abt-magnetic::before{
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--cream);
      transform: translateY(101%);
      transition: transform .55s var(--ease-editorial);
    }
    .wotknot-widget.wkw-about-widget .abt-magnetic:hover{ color: var(--ink); }
    .wotknot-widget.wkw-about-widget .abt-magnetic:hover::before{ transform: none; }
    .wotknot-widget.wkw-about-widget .abt-magnetic svg{ transition: transform .4s var(--ease); }
    .wotknot-widget.wkw-about-widget .abt-magnetic:hover svg{ transform: translateX(.3rem); }

    /* ============================================================
       Reveals + responsive + reduced motion
       ============================================================ */
    .wotknot-widget.wkw-about-widget .js .abt-reveal{
      opacity: 0;
      transform: translateY(2rem);
      transition: opacity .9s var(--ease), transform .9s var(--ease);
    }
    .wotknot-widget.wkw-about-widget .js .abt-reveal.abt-in{ opacity: 1; transform: none; }

    @media (max-width: 900px) {
      .wotknot-widget.wkw-about-widget .abt-hero{
        grid-template-columns: 1fr;
        align-content: center;
        gap: 3rem;
      }
      .wotknot-widget.wkw-about-widget .abt-hero__stage{ justify-self: start; width: min(100%, 380px); }
      .wotknot-widget.wkw-about-widget .abt-hero__badge{ left: auto; right: -1.4rem; bottom: -2.6rem; }
      .wotknot-widget.wkw-about-widget .abt-hero__scroll{ display: none; }
      .wotknot-widget.wkw-about-widget .abt-chapter{ grid-template-columns: 1fr; gap: 2rem; }
      .wotknot-widget.wkw-about-widget .abt-chapter__rail{ position: static; }
      .wotknot-widget.wkw-about-widget .abt-numbers{ grid-template-columns: 1fr; }
      .wotknot-widget.wkw-about-widget .abt-number{ border-left: 0; border-top: 1px solid var(--rule); }
      .wotknot-widget.wkw-about-widget .abt-number:first-child{ border-top: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .wotknot-widget.wkw-about-widget .js .abt-reveal{ opacity: 1; transform: none; transition: none; }
      .wotknot-widget.wkw-about-widget .abt-hero__title .abt-char,
.wotknot-widget.wkw-about-widget .abt-chapter__title .abt-line > span{ transform: none; transition: none; }
      .wotknot-widget.wkw-about-widget .abt-hero__dek,
.wotknot-widget.wkw-about-widget .abt-chapter__copy,
.wotknot-widget.wkw-about-widget .abt-chapter__pull{ opacity: 1; transform: none; transition: none; }
      .wotknot-widget.wkw-about-widget .abt-hero__portrait,
.wotknot-widget.wkw-about-widget .abt-chapter__media{ clip-path: inset(0); transition: none; }
      .wotknot-widget.wkw-about-widget .abt-chapter__media img{ filter: none; transition: none; }
      .wotknot-widget.wkw-about-widget .abt-hero__badge{ opacity: 1; transform: none; transition: none; }
      .wotknot-widget.wkw-about-widget .abt-hero__badge svg{ animation: none; }
      .wotknot-widget.wkw-about-widget .abt-hero__scroll::after{ animation: none; }
      .wotknot-widget.wkw-about-widget .abt-number::after{ transform: scaleX(1); transition: none; }
      .wotknot-widget.wkw-about-widget .abt-manifesto__statement .abt-fill-word{ color: var(--paper); transition: none; }
      .wotknot-widget.wkw-about-widget .abt-manifesto__statement .abt-fill-word.abt-fill-accent{
        color: var(--cream);
        font-family: var(--serif);
        font-style: italic;
      }
      .wotknot-widget.wkw-about-widget .abt-magnetic,
.wotknot-widget.wkw-about-widget .abt-magnetic::before{ transition: none; }
    }