/* Extracted from index.html without altering the original rules. */

    :root {
      --bg: #0F1215;
      --panel: rgba(36,40,45,.58);
      --panel-strong: rgba(36,40,45,.78);
      --line: rgba(255,255,255,.095);
      --line-strong: rgba(207,230,90,.22);
      --text: #F3F5F6;
      --muted: #9CA0A5;
      --cobalt: #AFC63F;
      --violet: #CFE65A;
      --butter: #CFE65A;
      --ease: cubic-bezier(.2,.8,.2,1);
    }

    * { box-sizing: border-box; }
    html { background: var(--bg); }
    body {
      margin: 0;
      min-width: 320px;
      overflow-x: hidden;
      background: #0F1215;
      color: var(--text);
      font-family: Inter, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -2;
    }

    body::before {
      background:
        radial-gradient(circle at 14% 18%, rgba(175,198,63,.15), transparent 30%),
        radial-gradient(circle at 86% 24%, rgba(207,230,90,.11), transparent 28%),
        radial-gradient(circle at 55% 82%, rgba(207,230,90,.045), transparent 24%),
        linear-gradient(180deg, #0F1215 0%, #0F1215 100%);
    }

    body::after {
      z-index: -1;
      opacity: .45;
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    }

    main > section {
      background: transparent !important;
    }

    ::selection {
      background: rgba(207,230,90,.24);
      color: #fff;
    }

    a, button, input, textarea { -webkit-tap-highlight-color: transparent; }
    button, input, textarea { font: inherit; }

    .site-shell {
      width: min(1180px, calc(100% - 32px));
      margin-inline: auto;
    }

    .display { font-family: "Plus Jakarta Sans", sans-serif; }

    .glass {
      background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(10,10,14,.52);
      border: 1px solid var(--line);
      backdrop-filter: blur(22px) saturate(120%);
      -webkit-backdrop-filter: blur(22px) saturate(120%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 26px 80px rgba(0,0,0,.28);
    }

    .fine-grid {
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 44px 44px;
      mask-image: linear-gradient(to bottom, transparent, black 15%, black 82%, transparent);
    }

    .grain {
      position: fixed;
      inset: 0;
      z-index: 999;
      pointer-events: none;
      opacity: .024;
      mix-blend-mode: soft-light;
      background-image:
        radial-gradient(circle at 20% 20%, white 0 .6px, transparent .7px),
        radial-gradient(circle at 75% 35%, white 0 .5px, transparent .6px),
        radial-gradient(circle at 50% 80%, white 0 .7px, transparent .8px);
      background-size: 7px 7px, 9px 9px, 11px 11px;
    }

    .progress {
      position: fixed;
      inset: 0 0 auto;
      z-index: 1100;
      height: 2px;
      background: rgba(255,255,255,.025);
    }

    .progress > span {
      display: block;
      width: 100%;
      height: 100%;
      transform: scaleX(0);
      transform-origin: left center;
      background: linear-gradient(90deg, var(--cobalt), #B9D84B, var(--butter));
      box-shadow: 0 0 20px rgba(207,230,90,.5);
    }

    .gradient-orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(95px);
      pointer-events: none;
      will-change: transform;
    }

    .orb-a { width: 420px; height: 420px; background: rgba(175,198,63,.30); }
    .orb-b { width: 360px; height: 360px; background: rgba(207,230,90,.24); }
    .orb-c { width: 260px; height: 260px; background: rgba(207,230,90,.10); }

    .nav-blur {
      background: rgba(11,11,15,.58);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .gradient-text {
      background: linear-gradient(120deg, #fff 6%, #E7EFC8 42%, #CFE65A 69%, #CFE65A 100%);
      background-size: 220% 220%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: gradientShift 10s ease-in-out infinite alternate;
    }

    @keyframes gradientShift {
      from { background-position: 0% 50%; }
      to { background-position: 100% 50%; }
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #CFE65A;
      box-shadow: 0 0 0 6px rgba(207,230,90,.08), 0 0 24px rgba(207,230,90,.4);
      animation: pulseDot 2.4s ease-in-out infinite;
    }

    @keyframes pulseDot {
      50% { transform: scale(.72); opacity: .72; }
    }

    .magnetic {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transition: transform .25s var(--ease), border-color .25s ease, background .25s ease;
    }

    .magnetic::after {
      content: "";
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      left: var(--mx, 50%);
      top: var(--my, 50%);
      transform: translate(-50%, -50%) scale(0);
      background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 68%);
      transition: transform .35s ease;
      z-index: -1;
    }

    .magnetic:hover::after { transform: translate(-50%, -50%) scale(1); }

    .phone-shell {
      position: relative;
      width: min(100%, 330px);
      margin-inline: auto;
      padding: 7px;
      border-radius: 34px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.015)),
        #090A0E;
      border: 1px solid rgba(255,255,255,.11);
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.42),
        0 24px 80px rgba(0,0,0,.46);
      transform-style: preserve-3d;
    }

    .phone-shell::before {
      content: "";
      position: absolute;
      z-index: 6;
      top: 12px;
      left: 50%;
      width: 28%;
      height: 18px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: rgba(0,0,0,.82);
      border: 1px solid rgba(255,255,255,.035);
    }

    .phone-screen {
      position: relative;
      aspect-ratio: 9 / 16;
      overflow: hidden;
      border-radius: 27px;
      background: #0F1215;
    }

    .phone-screen video,
    .phone-screen img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .phone-screen::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(0,0,0,.03), transparent 60%, rgba(0,0,0,.22)),
        linear-gradient(90deg, rgba(255,255,255,.025), transparent 10%, transparent 90%, rgba(255,255,255,.02));
    }

    .mockup-stage {
      position: relative;
      min-height: 590px;
      display: grid;
      place-items: center;
      padding: 38px 20px;
      overflow: hidden;
      border-radius: 34px;
      border: 1px solid rgba(255,255,255,.07);
      background:
        radial-gradient(circle at 50% 40%, rgba(175,198,63,.14), transparent 34%),
        radial-gradient(circle at 78% 20%, rgba(207,230,90,.10), transparent 30%),
        rgba(255,255,255,.014);
    }

    .mockup-stage::before {
      content: "";
      position: absolute;
      width: 62%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(207,230,90,.14);
      filter: blur(72px);
      transform: translate(-22%, 18%);
      pointer-events: none;
    }

    .project-item {
      min-width: 0;
      transition: opacity .35s ease, transform .35s var(--ease);
    }

    .project-item.is-hidden {
      display: none;
    }

    .project-info-card {
      margin-top: 16px;
      padding: 22px;
      border-radius: 24px;
      min-height: 252px;
      transition:
        border-color .3s ease,
        transform .3s var(--ease),
        background .3s ease;
    }

    .project-item:hover .project-info-card {
      transform: translateY(-4px);
      border-color: rgba(255,255,255,.17);
      background:
        linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.03)),
        rgba(10,10,14,.58);
    }

    .project-item:hover .phone-shell {
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.42),
        0 32px 100px rgba(0,0,0,.50),
        0 0 70px rgba(175,198,63,.12);
    }

    .project-video,
    .project-image {
      transition: transform .7s var(--ease), filter .45s ease;
    }

    .project-item:hover .project-video,
    .project-item:hover .project-image {
      transform: scale(1.025);
    }

    .project-note {
      margin-top: 13px;
      color: #8F95A0;
      font-size: 13px;
      line-height: 1.6;
    }

    .tool-badge {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.085);
      background: rgba(255,255,255,.035);
      color: #AAB0BB;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .tool-badge-primary {
      color: #17140A;
      border-color: rgba(207,230,90,.75);
      background: linear-gradient(180deg, #E9F6A0, #CFE65A);
      box-shadow: 0 8px 24px rgba(207,230,90,.10);
    }

    .title-slide,
    .hero-title-slide {
      clip-path: inset(0 0 0 0);
      will-change: transform, opacity, clip-path;
    }

    .tab-btn {
      position: relative;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 999px;
      color: #9EA2AD;
      border: 1px solid rgba(255,255,255,.075);
      background: rgba(255,255,255,.025);
      transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s var(--ease);
    }

    .tab-btn:hover {
      color: #fff;
      transform: translateY(-1px);
    }

    .tab-btn.is-active {
      color: #0F1215;
      background: var(--butter);
      border-color: var(--butter);
      box-shadow: 0 10px 30px rgba(207,230,90,.10);
    }

    .desktop-frame {
      width: min(100%, 520px);
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.10);
      background: #0C0D12;
      box-shadow: 0 26px 80px rgba(0,0,0,.42);
    }

    .desktop-top {
      height: 40px;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 14px;
      border-bottom: 1px solid rgba(255,255,255,.07);
      background: rgba(255,255,255,.025);
    }

    .desktop-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,.16);
    }

    .code-canvas {
      min-height: 340px;
      padding: 26px;
      background:
        linear-gradient(180deg, rgba(175,198,63,.06), transparent 34%),
        #0A0B10;
      color: #AEB4C0;
      font: 500 12px/1.85 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    .code-line {
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 14px;
    }

    .code-n { color: #424754; text-align: right; }
    .code-k { color: #CFE65A; }
    .code-s { color: #CFE65A; }
    .code-c { color: #667085; }
    .code-v { color: #8DB7FF; }

    .method-slider {
      position: relative;
      overflow: hidden;
      border-radius: 32px;
    }

    .method-track {
      display: flex;
      width: 100%;
      will-change: transform;
      transition: transform .75s var(--ease);
    }

    .method-slide {
      flex: 0 0 100%;
      min-width: 0;
      padding: 1px;
    }

    .method-card {
      position: relative;
      min-height: 340px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 42px;
      padding: 30px;
      overflow: hidden;
      border-radius: 30px;
    }

    .method-card::before {
      content: "";
      position: absolute;
      inset: auto -12% -42% auto;
      width: 52%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(207,230,90,.10);
      filter: blur(56px);
      pointer-events: none;
    }

    .method-index {
      display: inline-grid;
      place-items: center;
      width: 44px;
      height: 44px;
      flex: 0 0 auto;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.035);
      color: #AAB0BB;
      font-size: 11px;
      letter-spacing: .08em;
    }

    .method-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 18px;
    }

    .method-dots {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .method-dot {
      width: 7px;
      height: 7px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(255,255,255,.16);
      transition: width .3s var(--ease), background .3s ease;
    }

    .method-dot.is-active {
      width: 30px;
      background: var(--butter);
    }

    .method-nav {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.035);
      color: #D7D9DF;
      transition: transform .25s var(--ease), background .25s ease, border-color .25s ease;
    }

    .method-nav:hover {
      transform: translateY(-1px);
      background: rgba(255,255,255,.07);
      border-color: rgba(255,255,255,.18);
    }

    .method-progress {
      position: absolute;
      inset: auto 0 0;
      height: 2px;
      background: rgba(255,255,255,.05);
      overflow: hidden;
    }

    .method-progress > span {
      display: block;
      width: 100%;
      height: 100%;
      transform: scaleX(0);
      transform-origin: left center;
      background: linear-gradient(90deg, var(--cobalt), #B9D84B, var(--butter));
    }

    @media (max-width: 768px) {
      .method-card {
        min-height: 390px;
        padding: 24px;
        gap: 34px;
        border-radius: 24px;
      }
    }

    .floating-field {
      position: relative;
    }

    .floating-field input,
    .floating-field textarea {
      width: 100%;
      outline: none;
      color: #fff;
      background: rgba(255,255,255,.025);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 18px;
      padding: 22px 16px 12px;
      transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
    }

    .floating-field textarea {
      min-height: 150px;
      resize: vertical;
    }

    .floating-field label {
      position: absolute;
      left: 16px;
      top: 18px;
      color: #777E89;
      pointer-events: none;
      transition: transform .2s ease, font-size .2s ease, color .2s ease;
      transform-origin: left top;
    }

    .floating-field input:focus,
    .floating-field textarea:focus {
      border-color: rgba(207,230,90,.42);
      background: rgba(255,255,255,.04);
      box-shadow: 0 0 0 4px rgba(207,230,90,.06);
    }

    .floating-field input:focus + label,
    .floating-field input:not(:placeholder-shown) + label,
    .floating-field textarea:focus + label,
    .floating-field textarea:not(:placeholder-shown) + label {
      transform: translateY(-10px) scale(.78);
      color: #B9C0CB;
    }

    .menu-panel {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-8px);
      transition: opacity .25s ease, transform .25s ease;
    }

    .menu-panel.is-open {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .filter-transition {
      animation: filterIn .45s var(--ease) both;
    }

    @keyframes filterIn {
      from { opacity: 0; transform: translateY(12px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (max-width: 1024px) {
      .mockup-stage { min-height: 520px; }
    }

    @media (max-width: 768px) {
      .site-shell { width: min(100% - 24px, 1180px); }
      .grain { display: none; }
      .mockup-stage { min-height: 470px; padding: 28px 16px; border-radius: 26px; }
      .phone-shell { width: min(100%, 290px); }
      .project-info-card { border-radius: 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
      }
    }

    /* 2026-09 mobile-first coherence pass */
    :root {
      --section-pad-mobile: 72px;
      --section-pad-desktop: 112px;
    }

    body {
      font-size: 16px;
      line-height: 1.6;
    }

    .site-shell {
      width: min(1180px, calc(100% - 24px));
    }

    #top,
    #projects,
    #method,
    #contact {
      scroll-margin-top: 76px;
    }

    #top {
      min-height: auto;
      padding-top: 104px;
      padding-bottom: 64px;
    }

    #top > .site-shell {
      gap: 44px;
    }

    #top h1 {
      max-width: 760px;
      font-size: clamp(2.55rem, 11.5vw, 4rem);
      line-height: .94;
      letter-spacing: -.052em;
      text-wrap: balance;
    }

    #top h1 span {
      text-wrap: balance;
    }

    #top .hero-reveal.text-\[11px\] {
      letter-spacing: .16em;
    }

    #top .hero-reveal.mt-8 {
      margin-top: 24px;
      font-size: clamp(1rem, 4.25vw, 1.16rem);
      line-height: 1.7;
    }

    #top .hero-reveal.mt-9 {
      margin-top: 28px;
    }

    #top .hero-reveal.mt-9 > a {
      min-height: 48px;
      justify-content: center;
    }

    #top .hero-reveal.mt-10 {
      margin-top: 30px;
      gap: 10px 18px;
      font-size: 9px;
      letter-spacing: .12em;
    }

    #top .hero-reveal.relative {
      width: 100%;
      max-width: 500px;
      margin-inline: auto;
    }

    #projects,
    #method,
    #contact {
      padding-top: var(--section-pad-mobile);
      padding-bottom: var(--section-pad-mobile);
    }

    #projects h2,
    #method h2,
    #contact h2 {
      font-size: clamp(2.35rem, 10.2vw, 4rem);
      line-height: .98;
      letter-spacing: -.048em;
      text-wrap: balance;
    }

    #projects > .site-shell > .grid {
      gap: 22px;
    }

    #projects [role="tablist"] {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 8px;
      overflow: visible;
      width: 100%;
      max-width: 390px;
      margin: 0 auto;
      padding-bottom: 4px;
    }

    .tab-btn {
      flex: 0 0 auto;
      min-height: 44px;
      padding-inline: 15px;
      font-size: 13px;
      white-space: nowrap;
      text-align: center;
    }

    #categoryDescription {
      width: 100%;
      max-width: 360px;
      margin: 16px auto 0;
      min-height: 48px;
      font-size: 13px;
      line-height: 1.65;
      text-align: center;
    }

    .project-category-row {
      text-align: center;
    }

    #projectGrid {
      margin-top: 40px;
      gap: 34px 18px;
    }

    .mockup-stage {
      min-height: 430px;
      padding: 24px 14px;
      border-radius: 24px;
    }

    .phone-shell {
      width: min(100%, 255px);
      border-radius: 30px;
    }

    .phone-screen {
      border-radius: 24px;
    }

    .project-info-card {
      min-height: auto;
      margin-top: 12px;
      padding: 18px;
      border-radius: 20px;
    }

    .project-info-card h3 {
      margin-top: 7px;
      font-size: clamp(1.22rem, 5.2vw, 1.42rem);
      line-height: 1.14;
      letter-spacing: -.032em;
      text-wrap: balance;
    }

    .project-info-card > div:first-child > div > p:first-child {
      font-size: 9px;
      letter-spacing: .13em;
    }

    .project-note {
      margin-top: 11px;
      font-size: 13px;
      line-height: 1.65;
      color: #949AA5;
    }

    .project-info-card .mt-5 {
      margin-top: 16px;
    }

    .tool-badge {
      min-height: 30px;
      padding: 0 10px;
      font-size: 10px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: .025em;
      text-transform: none;
      white-space: nowrap;
    }

    .desktop-frame {
      border-radius: 18px;
    }

    .code-canvas {
      min-height: 300px;
      padding: 18px 14px;
      font-size: 10px;
      line-height: 1.75;
      overflow-x: auto;
    }

    .method-slider {
      border-radius: 24px;
    }

    .method-card {
      min-height: 304px;
      padding: 22px;
      gap: 28px;
      border-radius: 23px;
    }

    .method-card h3 {
      max-width: 720px;
      font-size: clamp(1.72rem, 7vw, 2.4rem);
      line-height: 1.04;
      letter-spacing: -.04em;
      text-wrap: balance;
    }

    .method-card p {
      font-size: 14px;
      line-height: 1.7;
    }

    .method-index {
      width: 40px;
      height: 40px;
      font-size: 10px;
    }

    .method-controls {
      margin-top: 14px;
    }

    .method-nav {
      width: 44px;
      height: 44px;
    }

    #method .section-reveal.mt-12 {
      margin-top: 38px;
    }

    #contact > .site-shell > .glass {
      padding: 20px;
      border-radius: 24px;
    }

    #contact .relative.grid {
      gap: 34px;
    }

    #contact h2 {
      max-width: 640px;
    }

    #contact .floating-field input,
    #contact .floating-field textarea {
      border-radius: 16px;
      font-size: 16px;
    }

    #contact .floating-field textarea {
      min-height: 130px;
    }

    #contact button[type="submit"] {
      min-height: 56px;
      border-radius: 16px;
    }

    #contact footer {
      padding-top: 28px;
      line-height: 1.55;
    }


    @media (max-width: 639px) {
      header > .site-shell {
        height: 64px;
      }

      #mobileMenu {
        top: 64px;
      }

      header > .site-shell > a {
        font-size: 15px;
      }

      #top {
        padding-top: 92px;
      }

      #top .hero-reveal.mt-9 {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
      }

      #top .hero-reveal.mt-9 > a {
        width: 100%;
      }

      #top .hero-reveal.flex.flex-wrap.items-center.gap-3.mb-7 {
        align-items: flex-start;
        gap: 10px;
      }

      #top .hero-reveal.flex.flex-wrap.items-center.gap-3.mb-7 > span:last-child {
        width: 100%;
        padding-left: 2px;
      }

      #projects [role="tablist"] {
        margin-right: -12px;
        padding-right: 12px;
      }

      #contact .mt-8.flex.flex-col.gap-3.text-sm a {
        min-height: 40px;
        align-items: center;
      }
    }

    @media (max-width: 380px) {
      #top h1 {
        font-size: 2.45rem;
      }

      #projects h2,
      #method h2,
      #contact h2 {
        font-size: 2.25rem;
      }

      .project-info-card {
        padding: 16px;
      }

      .tool-badge {
        font-size: 9.5px;
        padding-inline: 9px;
      }

      .method-card {
        min-height: 322px;
        padding: 20px;
      }
    }

    @media (min-width: 640px) {
      .site-shell {
        width: min(1180px, calc(100% - 40px));
      }

      #top {
        padding-top: 116px;
        padding-bottom: 80px;
      }

      .mockup-stage {
        min-height: 500px;
        padding: 30px 18px;
      }

      .phone-shell {
        width: min(100%, 285px);
      }

      .project-info-card {
        padding: 20px;
      }

      #contact > .site-shell > .glass {
        padding: 30px;
        border-radius: 28px;
      }
    }

    @media (min-width: 768px) {
      .site-shell {
        width: min(1180px, calc(100% - 48px));
      }

      #top h1 {
        font-size: clamp(4.7rem, 8vw, 7.8rem);
        line-height: .90;
        letter-spacing: -.065em;
      }

      #projects,
      #method,
      #contact {
        padding-top: var(--section-pad-desktop);
        padding-bottom: var(--section-pad-desktop);
      }

      #projects h2,
      #method h2,
      #contact h2 {
        font-size: clamp(3.2rem, 6vw, 5.6rem);
      }

      #categoryDescription {
        min-height: 0;
        font-size: 14px;
      }

      #projectGrid {
        margin-top: 48px;
      }

      .mockup-stage {
        min-height: 520px;
        border-radius: 30px;
      }

      .phone-shell {
        width: min(100%, 300px);
      }

      .project-info-card {
        min-height: 236px;
        padding: 22px;
        border-radius: 22px;
      }

      .project-info-card h3 {
        font-size: 1.45rem;
      }

      .project-note {
        font-size: 13.5px;
      }

      .tool-badge {
        min-height: 31px;
        font-size: 10.5px;
      }

      .method-card {
        min-height: 322px;
        padding: 28px;
        border-radius: 28px;
      }

      .method-card p {
        font-size: 15px;
      }

      #contact > .site-shell > .glass {
        padding: 40px;
        border-radius: 32px;
      }
    }

    @media (min-width: 1024px) {
      #top {
        min-height: 100vh;
        padding-top: 128px;
        padding-bottom: 88px;
      }

      #top > .site-shell {
        gap: 64px;
      }

      #top .hero-reveal.relative {
        max-width: none;
      }

      #projectGrid {
        gap: 46px 20px;
      }

      .mockup-stage {
        min-height: 560px;
      }

      .project-info-card {
        min-height: 248px;
      }

      .method-card {
        min-height: 340px;
        padding: 32px;
      }

      #contact > .site-shell > .glass {
        padding: 48px;
      }
    }

    @media (min-width: 1280px) {
      .mockup-stage {
        min-height: 590px;
      }

      .phone-shell {
        width: min(100%, 320px);
      }
    }


    /* Methodology: process-detail cards */
    .method-layout {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
      align-items: stretch;
    }

    .method-copy {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-width: 0;
    }

    .method-side {
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding: 18px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.075);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        rgba(7,8,12,.36);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    }

    .method-kicker {
      margin: 0;
      color: #777E89;
      font-size: 9px !important;
      font-weight: 700;
      line-height: 1.2 !important;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .method-chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .method-chip {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.035);
      color: #C4C8D0;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .method-result {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(255,255,255,.07);
    }

    .method-result-copy {
      min-width: 0;
    }

    .method-result-label {
      display: block;
      color: #6F7580;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .method-result-value {
      display: block;
      margin-top: 4px;
      color: #F2F3F5;
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -.02em;
    }

    .method-result-icon {
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: #17140A;
      background: linear-gradient(180deg, #E9F6A0, #CFE65A);
      box-shadow: 0 8px 24px rgba(207,230,90,.08);
    }

    .method-card {
      min-height: auto;
      gap: 28px;
    }

    .method-card > .method-topline {
      position: relative;
      z-index: 2;
    }

    @media (max-width: 639px) {
      .method-card {
        padding: 20px;
        gap: 24px;
      }

      .method-layout {
        gap: 22px;
      }

      .method-card h3 {
        font-size: clamp(1.65rem, 7.4vw, 2.1rem);
      }

      .method-card .method-copy > p {
        margin-top: 12px;
        font-size: 13.5px;
      }

      .method-side {
        padding: 15px;
        gap: 15px;
        border-radius: 18px;
      }

      .method-chip {
        min-height: 32px;
        padding-inline: 10px;
        font-size: 10.5px;
      }

      .method-result-value {
        font-size: 13px;
      }
    }

    @media (min-width: 768px) {
      .method-card {
        padding: 28px;
      }

      .method-layout {
        grid-template-columns: minmax(0, 1.42fr) minmax(260px, .78fr);
        gap: 30px;
      }

      .method-copy {
        padding: 8px 4px 8px 0;
      }

      .method-side {
        padding: 20px;
      }
    }

    @media (min-width: 1024px) {
      .method-card {
        min-height: 360px;
        padding: 32px;
      }

      .method-layout {
        grid-template-columns: minmax(0, 1.48fr) minmax(300px, .72fr);
        gap: 42px;
      }

      .method-card h3 {
        max-width: 660px;
      }
    }


    /* Methodology ambient depth */
    #method {
      position: relative;
      isolation: isolate;
      overflow: hidden;
    }

    #method::before,
    #method::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      filter: blur(100px);
      pointer-events: none;
      z-index: 0;
      opacity: .34;
    }

    #method::before {
      width: min(48vw, 520px);
      height: min(48vw, 520px);
      top: 10%;
      left: -12%;
      background: rgba(207,230,90,.20);
    }

    #method::after {
      width: min(52vw, 560px);
      height: min(52vw, 560px);
      right: -14%;
      bottom: 2%;
      background: rgba(175,198,63,.18);
    }

    #method > .site-shell {
      position: relative;
      z-index: 1;
    }

    #method .section-reveal:first-child::after {
      content: "";
      display: block;
      width: min(460px, 72%);
      height: 1px;
      margin-top: 28px;
      background: linear-gradient(
        90deg,
        rgba(207,230,90,.34),
        rgba(207,230,90,.18),
        transparent
      );
    }

    .method-slider {
      position: relative;
      isolation: isolate;
      box-shadow:
        0 30px 90px rgba(0,0,0,.24),
        0 0 80px rgba(207,230,90,.045);
    }

    .method-slider::before {
      content: "";
      position: absolute;
      inset: 10% 6%;
      z-index: -1;
      border-radius: 34px;
      background:
        radial-gradient(circle at 18% 28%, rgba(207,230,90,.13), transparent 34%),
        radial-gradient(circle at 82% 72%, rgba(175,198,63,.13), transparent 38%),
        radial-gradient(circle at 55% 110%, rgba(207,230,90,.05), transparent 34%);
      filter: blur(34px);
      pointer-events: none;
    }

    .method-card {
      background:
        radial-gradient(circle at 88% 18%, rgba(207,230,90,.08), transparent 28%),
        radial-gradient(circle at 12% 90%, rgba(175,198,63,.07), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022)),
        rgba(9,10,14,.62);
      border-color: rgba(255,255,255,.095);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        inset 0 -1px 0 rgba(255,255,255,.015),
        0 24px 72px rgba(0,0,0,.26);
    }

    .method-card::before {
      content: "";
      position: absolute;
      width: 280px;
      height: 280px;
      top: -110px;
      right: -70px;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(207,230,90,.095) 0%,
        rgba(207,230,90,.045) 34%,
        transparent 72%
      );
      filter: blur(18px);
      pointer-events: none;
      z-index: 0;
    }

    .method-card::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.11) 36%,
        rgba(207,230,90,.14) 58%,
        transparent
      );
      pointer-events: none;
    }

    .method-side {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.016)),
        rgba(7,8,12,.46);
      border-color: rgba(255,255,255,.085);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.032),
        0 18px 44px rgba(0,0,0,.12);
    }

    .method-side::before {
      content: "";
      position: absolute;
      width: 150px;
      height: 150px;
      top: -80px;
      right: -55px;
      border-radius: 50%;
      background: rgba(175,198,63,.08);
      filter: blur(34px);
      pointer-events: none;
    }

    .method-chip {
      background:
        linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.022));
      border-color: rgba(255,255,255,.085);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    }

    .method-result-icon {
      box-shadow:
        0 8px 24px rgba(207,230,90,.12),
        0 0 28px rgba(207,230,90,.085);
    }

    .method-index {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 0 26px rgba(207,230,90,.06);
    }

    .method-controls {
      position: relative;
      z-index: 2;
    }

    @media (max-width: 639px) {
      #method::before {
        width: 320px;
        height: 320px;
        top: 18%;
        left: -38%;
        opacity: .24;
      }

      #method::after {
        width: 340px;
        height: 340px;
        right: -42%;
        bottom: 8%;
        opacity: .22;
      }

      #method .section-reveal:first-child::after {
        width: 62%;
        margin-top: 22px;
      }

      .method-slider {
        box-shadow:
          0 24px 64px rgba(0,0,0,.22),
          0 0 54px rgba(207,230,90,.04);
      }

      .method-card::before {
        width: 220px;
        height: 220px;
        top: -100px;
        right: -95px;
      }
    }


    /* Hero refinement: mobile-safe title + 9:16 device */
    #top {
      position: relative;
      isolation: isolate;
    }

    .hero-copy,
    .hero-device-wrap {
      min-width: 0;
    }

    .hero-eyebrow {
      margin-bottom: 18px;
      color: #777E89;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: .17em;
      text-transform: uppercase;
    }

    .hero-title-slide {
      max-width: 800px;
      margin: 0;
      font-size: clamp(2.65rem, 11.4vw, 4rem);
      line-height: 1;
      letter-spacing: -.052em;
      clip-path: none !important;
      overflow: visible;
      text-wrap: balance;
    }

    .hero-line {
      display: block;
      padding-block: .035em .08em;
      overflow: visible;
    }

    .hero-summary {
      max-width: 650px;
      margin-top: 24px;
      color: #A1A6B0;
      font-size: clamp(1rem, 4.25vw, 1.14rem);
      line-height: 1.7;
    }

    .hero-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 28px;
      max-width: 520px;
    }

    .hero-cta {
      min-height: 50px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 13px 20px;
      border-radius: 999px;
      font-weight: 650;
      transition:
        border-color .28s ease,
        background .28s ease,
        color .28s ease,
        box-shadow .28s ease,
        transform .28s var(--ease);
    }

    .hero-cta-primary {
      color: #0F1215;
      background: #F7F7FA;
      box-shadow: 0 14px 36px rgba(255,255,255,.06);
    }

    .hero-cta-primary:hover {
      background: var(--butter);
      box-shadow: 0 16px 42px rgba(207,230,90,.10);
    }

    .hero-cta-secondary {
      color: #F7F7FA;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.025);
    }

    .hero-cta-secondary:hover {
      border-color: rgba(255,255,255,.19);
      background: rgba(255,255,255,.05);
    }

    .hero-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 9px 16px;
      margin-top: 26px;
      color: #6F7580;
      font-size: 9px;
      font-weight: 650;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .hero-proof > span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .hero-proof svg {
      color: #939AA6;
    }

    .hero-device-wrap {
      width: 100%;
      max-width: 540px;
      margin-inline: auto;
    }

    .hero-device-stage {
      position: relative;
      min-height: 590px;
      display: grid;
      place-items: center;
      padding: 34px 20px 46px;
      overflow: hidden;
      border-radius: 34px;
      border: 1px solid rgba(255,255,255,.07);
      background:
        radial-gradient(circle at 50% 36%, rgba(175,198,63,.16), transparent 34%),
        radial-gradient(circle at 78% 18%, rgba(207,230,90,.11), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 30px 90px rgba(0,0,0,.25);
      perspective: 1200px;
    }

    .hero-device-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 38px 38px;
      mask-image: radial-gradient(circle at 50% 44%, black, transparent 72%);
    }

    .hero-device-glow {
      position: absolute;
      width: 58%;
      aspect-ratio: 1;
      left: 50%;
      top: 48%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: rgba(207,230,90,.15);
      filter: blur(76px);
      pointer-events: none;
    }

    .hero-phone-shell {
      position: relative;
      z-index: 3;
      width: min(100%, 286px);
      aspect-ratio: 9 / 16;
      padding: 7px;
      border-radius: 38px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.025) 28%, rgba(255,255,255,.07) 72%, rgba(255,255,255,.012)),
        #08090D;
      border: 1px solid rgba(255,255,255,.16);
      box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.74),
        inset 0 1px 0 rgba(255,255,255,.075),
        0 34px 90px rgba(0,0,0,.50),
        0 0 72px rgba(175,198,63,.11);
      transform-style: preserve-3d;
      transition:
        transform .45s var(--ease),
        box-shadow .45s ease;
      will-change: transform;
    }

    .hero-phone-shell::after {
      content: "";
      position: absolute;
      inset: 5px;
      pointer-events: none;
      border-radius: 32px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
      z-index: 8;
    }

    .hero-phone-screen {
      position: absolute;
      inset: 7px;
      overflow: hidden;
      border-radius: 31px;
      background: #050609;
    }

    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transform: scale(1.01);
      transition: transform .8s var(--ease), filter .5s ease;
    }

    .hero-device-stage:hover .hero-video {
      transform: scale(1.025);
    }

    .hero-phone-island {
      position: absolute;
      z-index: 10;
      top: 14px;
      left: 50%;
      width: 30%;
      height: 22px;
      transform: translateX(-50%);
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: rgba(0,0,0,.93);
      border: 1px solid rgba(255,255,255,.035);
      box-shadow: 0 3px 12px rgba(0,0,0,.35);
    }

    .hero-phone-island > span {
      width: 4px;
      height: 4px;
      margin-left: 52%;
      border-radius: 50%;
      background: rgba(71,85,105,.68);
      box-shadow: 0 0 5px rgba(89,122,170,.35);
    }

    .hero-phone-buttons {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    .hero-phone-button {
      position: absolute;
      width: 3px;
      border-radius: 3px 0 0 3px;
      background: linear-gradient(180deg, #343740, #111217);
      box-shadow: inset 1px 0 0 rgba(255,255,255,.08);
    }

    .hero-phone-button-a {
      left: -3px;
      top: 92px;
      height: 30px;
    }

    .hero-phone-button-b {
      left: -3px;
      top: 136px;
      height: 54px;
    }

    .hero-phone-button-c {
      right: -3px;
      top: 128px;
      height: 78px;
      border-radius: 0 3px 3px 0;
    }

    .hero-phone-vignette {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(0,0,0,.08), transparent 26%, transparent 68%, rgba(0,0,0,.42)),
        linear-gradient(90deg, rgba(255,255,255,.025), transparent 12%, transparent 88%, rgba(255,255,255,.02));
    }

    .hero-phone-meta {
      position: absolute;
      z-index: 5;
      inset: auto 13px 13px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
    }

    .hero-phone-meta-copy {
      min-width: 0;
      padding: 9px 11px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(10,10,14,.42);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .hero-phone-meta-copy span,
    .hero-phone-year {
      color: #A5ABB6;
      font-size: 8px;
      font-weight: 650;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .hero-phone-meta-copy strong {
      display: block;
      margin-top: 2px;
      color: #F7F7FA;
      font-size: 11px;
      font-weight: 650;
      letter-spacing: -.01em;
    }

    .hero-phone-year {
      padding: 8px 9px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(10,10,14,.42);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .hero-stage-label {
      position: absolute;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(10,10,14,.52);
      color: #9EA4AE;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      font-size: 8px;
      font-weight: 650;
      letter-spacing: .11em;
      text-transform: uppercase;
      box-shadow: 0 14px 34px rgba(0,0,0,.18);
    }

    .hero-stage-label-a {
      top: 17%;
      left: 6%;
      animation: heroFloatA 5.2s ease-in-out infinite;
    }

    .hero-stage-label-b {
      right: 5%;
      bottom: 23%;
      animation: heroFloatB 6.1s ease-in-out infinite;
    }

    .hero-stage-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #CFE65A;
      box-shadow: 0 0 14px rgba(207,230,90,.42);
    }

    .hero-stage-caption {
      position: absolute;
      z-index: 2;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      width: calc(100% - 40px);
      display: flex;
      align-items: center;
      gap: 10px;
      color: #626975;
      font-size: 8px;
      font-weight: 650;
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .hero-stage-caption-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.10));
    }

    .hero-orb {
      position: absolute;
      z-index: 0;
      border-radius: 50%;
      filter: blur(110px);
      pointer-events: none;
    }
.hero-orb-a {
      width: 420px;
      height: 420px;
      left: -180px;
      top: 15%;
      background: rgba(175,198,63,.13);
    }

    .hero-orb-b {
      width: 360px;
      height: 360px;
      right: -120px;
      bottom: 8%;
      background: rgba(207,230,90,.10);
    }

    @keyframes heroFloatA {
      50% { transform: translate3d(0,-5px,0); }
    }

    @keyframes heroFloatB {
      50% { transform: translate3d(0,5px,0); }
    }

    @media (max-width: 639px) {
      .hero-stage-label-b {
        display: none;
      }

      #top {
        padding-top: 90px;
        padding-bottom: 66px;
        overflow: hidden;
      }

      #top > .site-shell {
        gap: 38px;
      }

      .hero-meta-row {
        justify-content: center;
        text-align: center;
      }

      .hero-status {
        max-width: 100%;
        justify-content: center;
      }

      .hero-location {
        width: auto;
        padding-left: 0;
        text-align: center;
      }

      .hero-title-slide {
        width: 100%;
        max-width: none;
        font-size: clamp(2.42rem, 11vw, 3.05rem);
        line-height: 1.02;
        letter-spacing: -.044em;
      }

      .hero-line {
        padding: .025em .04em .10em 0;
      }

      .hero-summary {
        margin-top: 20px;
        max-width: none;
        font-size: 15.5px;
        line-height: 1.68;
      }

      .hero-actions {
        max-width: none;
        margin-top: 24px;
      }

      .hero-proof {
        margin-top: 22px;
        gap: 9px 13px;
        font-size: 8.5px;
      }

      .hero-device-wrap {
        max-width: 360px;
      }

      .hero-device-stage {
        min-height: 520px;
        padding: 26px 12px 38px;
        border-radius: 28px;
      }

      .hero-phone-shell {
        width: min(100%, 228px);
        border-radius: 34px;
      }

      .hero-phone-screen {
        border-radius: 27px;
      }

      .hero-phone-shell::after {
        border-radius: 28px;
      }

      .hero-phone-island {
        top: 13px;
        height: 20px;
      }

      .hero-stage-label-a {
        top: 13%;
        left: 3%;
      }

      .hero-stage-label-b {
        right: 3%;
        bottom: 20%;
      }

      .hero-stage-caption {
        bottom: 14px;
        width: calc(100% - 26px);
        font-size: 7px;
        letter-spacing: .09em;
      }
    }

    @media (max-width: 360px) {
      .hero-title-slide {
        font-size: 2.32rem;
      }

      .hero-device-stage {
        min-height: 500px;
      }

      .hero-phone-shell {
        width: min(100%, 216px);
      }

      .hero-stage-label-b {
        display: none;
      }

      .hero-stage-caption {
        font-size: 6.5px;
      }
    }

    @media (min-width: 640px) {
      .hero-actions {
        grid-template-columns: max-content max-content;
      }

      .hero-device-stage {
        min-height: 620px;
      }

      .hero-phone-shell {
        width: min(100%, 268px);
      }
    }

    @media (min-width: 768px) {
      .hero-title-slide {
        font-size: clamp(4.5rem, 8vw, 7.25rem);
        line-height: .94;
        letter-spacing: -.060em;
      }

      .hero-summary {
        margin-top: 28px;
        font-size: clamp(1.05rem, 1.7vw, 1.25rem);
      }

      .hero-proof {
        margin-top: 30px;
      }
    }

    @media (min-width: 1024px) {
      .hero-device-stage {
        min-height: 630px;
      }

      .hero-phone-shell {
        width: min(100%, 278px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-stage-label-b {
        animation: none !important;
      }
    }


    /* Selected projects: desktop 2-up horizontal carousel */
    .project-category-row {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      margin-top: 20px;
    }

    .project-carousel-controls[hidden] {
      display: none !important;
    }

    .project-carousel-controls {
      display: none;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }

    .project-carousel-status {
      min-width: 58px;
      margin-right: 4px;
      color: #6F7580;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      text-align: right;
      text-transform: uppercase;
    }

    .project-carousel-nav {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: #D7D9DF;
      transition:
        transform .25s var(--ease),
        background .25s ease,
        border-color .25s ease,
        opacity .25s ease;
    }

    .project-carousel-nav:hover:not(:disabled) {
      transform: translateY(-1px);
      border-color: rgba(255,255,255,.18);
      background: rgba(255,255,255,.07);
    }

    .project-carousel-nav:disabled {
      opacity: .28;
      cursor: default;
    }

    .project-carousel-viewport {
      min-width: 0;
    }

    @media (max-width: 1023px) {
      .project-category-row {
        display: block;
        margin-top: 16px;
      }

      #projectGrid {
        transform: none !important;
      }
    }

    @media (min-width: 1024px) {
      .project-carousel-viewport {
        overflow: hidden;
        margin-inline: -1px;
        padding-inline: 1px;
      }

      #projectGrid {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 20px;
        width: 100%;
        will-change: transform;
        transition: transform .7s var(--ease);
      }

      #projectGrid .project-item:not(.is-hidden) {
        flex: 0 0 calc((100% - 20px) / 2);
        min-width: 0;
      }

      #projectGrid.is-workflow {
        justify-content: center;
        transform: none !important;
      }

      #projectGrid.is-workflow .project-item:not(.is-hidden) {
        flex-basis: calc((100% - 20px) / 2);
      }

      .project-carousel-controls {
        display: flex;
      }

      .project-category-row {
        min-height: 48px;
      }

      #categoryDescription {
        margin-top: 0;
      }

      #projectGrid {
        margin-top: 38px;
      }
    }


    /* Mobile hero alignment */
    @media (max-width: 639px) {
      .hero-copy {
        text-align: center;
      }

      .hero-copy > .hero-reveal:first-child {
        justify-content: center;
      }

      .hero-status,
      .hero-location {
        margin-inline: auto;
      }

      .hero-location {
        width: auto;
        padding-left: 0;
      }

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

      .hero-title-slide {
        margin-inline: auto;
        text-align: center;
      }

      .hero-summary {
        margin-inline: auto;
        text-align: center;
      }

      .hero-actions {
        margin-inline: auto;
      }

      .hero-proof {
        justify-content: center;
        text-align: center;
      }
    }


    /* Mobile global centered editorial alignment */
    @media (max-width: 639px) {
      /* Navigation */
      #mobileMenu .site-shell,
      #mobileMenu a {
        text-align: center;
      }

      /* Section introductions */
      #projects > .site-shell > .grid,
      #method > .site-shell > .section-reveal:first-child,
      #contact .section-reveal {
        text-align: center;
      }

      #projects h2,
      #method h2,
      #contact h2,
      #projects > .site-shell > .grid p,
      #method > .site-shell > .section-reveal:first-child > p,
      #contact .section-reveal > p {
        margin-inline: auto;
        text-align: center;
      }

      /* Project tabs + category copy */
      #projects [role="tablist"] {
        justify-content: flex-start;
        text-align: center;
      }

      .tab-btn {
        text-align: center;
      }

      .project-category-row,
      #categoryDescription {
        text-align: center;
      }

      #categoryDescription {
        margin-inline: auto;
      }

      /* Project cards */
      .project-info-card {
        text-align: center;
      }

      .project-info-card > div:first-child {
        position: relative;
        display: block;
      }

      .project-info-card > div:first-child > div {
        width: 100%;
      }

      .project-info-card > div:first-child > span:last-child {
        display: block;
        margin-top: 10px;
        text-align: center;
      }

      .project-info-card h3,
      .project-note,
      .project-info-card p {
        margin-inline: auto;
        text-align: center;
      }

      .project-info-card .mt-5.flex.flex-wrap {
        justify-content: center;
      }

      .tool-badge {
        justify-content: center;
        text-align: center;
      }

      /* Methodology */
      #method .section-reveal:first-child .mt-7 {
        justify-content: center;
      }

      #method .section-reveal:first-child::after {
        margin-inline: auto;
      }

      .method-topline {
        display: grid !important;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px !important;
        text-align: center;
      }

      .method-topline > div {
        justify-content: center;
      }

      .method-copy,
      .method-card h3,
      .method-card .method-copy > p {
        text-align: center;
      }

      .method-card h3,
      .method-card .method-copy > p {
        margin-inline: auto;
      }

      .method-side {
        text-align: center;
      }

      .method-kicker {
        text-align: center;
      }

      .method-chip-list {
        justify-content: center;
      }

      .method-result {
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        text-align: center;
      }

      .method-result-copy,
      .method-result-label,
      .method-result-value {
        width: 100%;
        text-align: center;
      }

      .method-result-icon {
        margin-inline: auto;
      }

      .method-controls {
        justify-content: center;
        gap: 22px;
      }

      /* Contact */
      #contact .relative.grid {
        text-align: center;
      }

      #contact .mt-8.flex.flex-col {
        align-items: center;
      }

      #contact .mt-8.flex.flex-col a {
        justify-content: center;
        text-align: center;
      }

      #contact form {
        text-align: center;
      }

      .floating-field input,
      .floating-field textarea {
        text-align: center;
      }

      .floating-field label {
        left: 50%;
        width: max-content;
        max-width: calc(100% - 32px);
        transform: translateX(-50%);
        transform-origin: center top;
        text-align: center;
      }

      .floating-field input:focus + label,
      .floating-field input:not(:placeholder-shown) + label,
      .floating-field textarea:focus + label,
      .floating-field textarea:not(:placeholder-shown) + label {
        transform: translateX(-50%) translateY(-10px) scale(.78);
      }

      #contact button[type="submit"] {
        justify-content: center;
        gap: 14px;
        text-align: center;
      }

      #contact form > p {
        text-align: center;
      }

      #contact footer {
        align-items: center;
        text-align: center;
      }

      /* Preserve technical mockups as interfaces rather than prose */
      .code-canvas,
      .desktop-frame,
      .desktop-frame p,
      .desktop-frame span {
        text-align: left;
      }
    }


    /* Interactive workflow funnel */
    .funnel-shell {
      min-height: 420px;
      display: grid;
      grid-template-columns: minmax(0, 1.18fr) minmax(190px, .82fr);
      gap: 22px;
      align-items: center;
      padding: 24px;
      background:
        radial-gradient(circle at 32% 42%, rgba(207,230,90,.09), transparent 36%),
        radial-gradient(circle at 82% 72%, rgba(175,198,63,.08), transparent 32%),
        #0A0B10;
    }

    .funnel-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .funnel-step {
      position: relative;
      min-height: 46px;
      display: grid;
      grid-template-columns: 34px minmax(0,1fr);
      align-items: center;
      gap: 10px;
      padding: 0 15px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 14px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)),
        rgba(255,255,255,.018);
      color: #D7DAE0;
      text-align: left;
      transition:
        width .35s var(--ease),
        transform .28s var(--ease),
        border-color .28s ease,
        background .28s ease,
        box-shadow .28s ease;
    }

    .funnel-step::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0;
      background: linear-gradient(90deg, rgba(207,230,90,.10), rgba(207,230,90,.07), transparent);
      transition: opacity .28s ease;
      pointer-events: none;
    }

    .funnel-step:nth-child(1) { width: 100%; }
    .funnel-step:nth-child(2) { width: 90%; }
    .funnel-step:nth-child(3) { width: 80%; }
    .funnel-step:nth-child(4) { width: 70%; }
    .funnel-step:nth-child(5) { width: 60%; }
    .funnel-step:nth-child(6) { width: 50%; }

    .funnel-step:hover,
    .funnel-step:focus-visible,
    .funnel-step.is-active {
      transform: translateY(-1px) scale(1.012);
      border-color: rgba(207,230,90,.26);
      background:
        linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
        rgba(255,255,255,.025);
      box-shadow:
        0 10px 26px rgba(0,0,0,.18),
        0 0 26px rgba(207,230,90,.05);
      outline: none;
    }

    .funnel-step:hover::before,
    .funnel-step:focus-visible::before,
    .funnel-step.is-active::before {
      opacity: 1;
    }

    .funnel-step-number {
      position: relative;
      z-index: 1;
      color: #747B88;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .funnel-step-title {
      position: relative;
      z-index: 1;
      min-width: 0;
      color: #E8EAF0;
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: 12px;
      font-weight: 650;
      letter-spacing: -.01em;
    }

    .funnel-step.is-active .funnel-step-number {
      color: var(--butter);
    }

    .funnel-step.is-active .funnel-step-title {
      color: #fff;
    }

    .funnel-detail {
      position: relative;
      min-height: 248px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 20px;
      background:
        radial-gradient(circle at 90% 8%, rgba(207,230,90,.12), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.048), rgba(255,255,255,.018));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 18px 50px rgba(0,0,0,.16);
    }

    .funnel-detail::after {
      content: "";
      position: absolute;
      width: 160px;
      height: 160px;
      right: -80px;
      bottom: -90px;
      border-radius: 50%;
      background: rgba(175,198,63,.11);
      filter: blur(34px);
      pointer-events: none;
    }

    .funnel-detail-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .funnel-detail-kicker,
    .funnel-detail-index,
    .funnel-detail-output span {
      color: #747B88;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .funnel-detail-index {
      color: var(--butter);
    }

    .funnel-detail-title {
      position: relative;
      z-index: 1;
      margin-top: 24px;
      color: #F7F7FA;
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: clamp(1.35rem, 2vw, 1.7rem);
      font-weight: 650;
      line-height: 1.05;
      letter-spacing: -.035em;
    }

    .funnel-detail-copy {
      position: relative;
      z-index: 1;
      margin-top: 10px;
      color: #9CA2AD;
      font-size: 12px;
      line-height: 1.6;
    }

    .funnel-detail-output {
      position: relative;
      z-index: 1;
      margin-top: 24px;
      padding-top: 14px;
      border-top: 1px solid rgba(255,255,255,.07);
    }

    .funnel-detail-output strong {
      display: block;
      margin-top: 5px;
      color: #CFE65A;
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: 13px;
      font-weight: 650;
      letter-spacing: -.015em;
    }

    @media (max-width: 639px) {
      .funnel-shell {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 18px 14px;
      }

      .funnel-step {
        min-height: 44px;
        grid-template-columns: 30px minmax(0,1fr);
        padding-inline: 13px;
        text-align: center;
      }

      .funnel-step:nth-child(1) { width: 100%; }
      .funnel-step:nth-child(2) { width: 92%; }
      .funnel-step:nth-child(3) { width: 84%; }
      .funnel-step:nth-child(4) { width: 76%; }
      .funnel-step:nth-child(5) { width: 68%; }
      .funnel-step:nth-child(6) { width: 60%; }

      .funnel-detail {
        min-height: 210px;
        padding: 17px;
        text-align: center;
      }

      .funnel-detail-top {
        justify-content: center;
        gap: 12px;
      }

      .funnel-detail-title,
      .funnel-detail-copy,
      .funnel-detail-output,
      .funnel-detail-output strong,
      .funnel-detail-output span {
        text-align: center !important;
      }
    }


    /* Contact mail provider chooser */
    .mail-provider-picker[hidden] {
      display: none !important;
    }

    .mail-provider-picker {
      display: grid;
      gap: 16px;
      margin-top: 2px;
      padding: 18px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 20px;
      background:
        radial-gradient(circle at 88% 10%, rgba(207,230,90,.10), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
        rgba(9,10,14,.72);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 18px 50px rgba(0,0,0,.18);
      animation: mailPickerIn .3s var(--ease) both;
    }

    @keyframes mailPickerIn {
      from { opacity: 0; transform: translateY(8px) scale(.99); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .mail-provider-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .mail-provider-kicker {
      color: #747B88;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .mail-provider-title {
      margin-top: 5px;
      color: #F4F5F7;
      font-family: "Plus Jakarta Sans", sans-serif;
      font-size: 15px;
      font-weight: 650;
      letter-spacing: -.02em;
    }

    .mail-provider-close {
      width: 36px;
      height: 36px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.025);
      color: #AAB0BB;
      transition: background .25s ease, color .25s ease, border-color .25s ease;
    }

    .mail-provider-close:hover {
      color: #fff;
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.14);
    }

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

    .mail-provider-btn {
      min-width: 0;
      min-height: 72px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.075);
      background: rgba(255,255,255,.025);
      color: #DADDE3;
      text-align: left;
      transition:
        transform .25s var(--ease),
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
    }

    .mail-provider-btn:hover {
      transform: translateY(-2px);
      border-color: rgba(207,230,90,.22);
      background: rgba(255,255,255,.05);
      box-shadow: 0 12px 30px rgba(0,0,0,.14);
    }

    .mail-provider-icon {
      width: 34px;
      height: 34px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 10px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.06);
      color: var(--butter);
    }

    .mail-provider-btn strong {
      display: block;
      color: #F5F6F8;
      font-size: 12px;
      font-weight: 650;
    }

    .mail-provider-btn small {
      display: block;
      margin-top: 2px;
      color: #747B88;
      font-size: 9px;
    }

    .mail-provider-note {
      color: #656C78;
      font-size: 10px;
      line-height: 1.55;
    }

    @media (max-width: 639px) {
      .mail-provider-picker {
        padding: 15px;
        border-radius: 18px;
        text-align: center;
      }

      .mail-provider-head {
        align-items: center;
      }

      .mail-provider-head > div {
        flex: 1;
        padding-left: 36px;
      }

      .mail-provider-title,
      .mail-provider-kicker,
      .mail-provider-note {
        text-align: center !important;
      }

      .mail-provider-grid {
        grid-template-columns: 1fr;
      }

      .mail-provider-btn {
        min-height: 62px;
        justify-content: flex-start;
        text-align: left !important;
      }
    }


    /* Direct form submission */
    .form-status[hidden] {
      display: none !important;
    }

    .form-status {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 15px 16px;
      border-radius: 17px;
      border: 1px solid rgba(207,230,90,.14);
      background:
        linear-gradient(180deg, rgba(207,230,90,.055), rgba(255,255,255,.018)),
        rgba(255,255,255,.018);
      text-align: left;
    }

    .form-status.is-error {
      border-color: rgba(248,113,113,.16);
      background:
        linear-gradient(180deg, rgba(248,113,113,.05), rgba(255,255,255,.018)),
        rgba(255,255,255,.018);
    }

    .form-status-icon {
      width: 34px;
      height: 34px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(207,230,90,.08);
      color: #CFE65A;
    }

    .form-status.is-error .form-status-icon {
      background: rgba(248,113,113,.08);
      color: #FCA5A5;
    }

    .form-status strong {
      display: block;
      color: #F7F7FA;
      font-size: 13px;
      font-weight: 650;
    }

    .form-status p {
      margin-top: 3px;
      color: #858C97;
      font-size: 11px;
      line-height: 1.55;
    }

    .mail-fallback-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: max-content;
      margin-inline: auto;
      color: #777E89;
      font-size: 10px;
      font-weight: 650;
      letter-spacing: .02em;
      transition: color .25s ease;
    }

    .mail-fallback-link:hover {
      color: #D7DAE0;
    }

    @media (max-width: 639px) {
      .form-status {
        justify-content: center;
        text-align: center;
      }

      .form-status > div {
        text-align: center;
      }
    }


    /* Projects intro floating card */
    .project-intro-card {
      position: relative;
      min-height: 190px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 22px;
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,.09);
      background:
        radial-gradient(circle at 86% 12%, rgba(207,230,90,.16), transparent 34%),
        radial-gradient(circle at 10% 90%, rgba(175,198,63,.12), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
        rgba(10,10,14,.72);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 24px 70px rgba(0,0,0,.18);
      transform-style: preserve-3d;
      transition:
        transform .38s var(--ease),
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
      will-change: transform;
    }

    .project-intro-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(120deg, rgba(255,255,255,.045), transparent 28%, transparent 70%, rgba(207,230,90,.035));
      opacity: .9;
    }

    .project-intro-card:hover {
      transform: translateY(-5px) rotateX(.7deg) rotateY(-.7deg);
      border-color: rgba(207,230,90,.18);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 30px 90px rgba(0,0,0,.24),
        0 0 50px rgba(207,230,90,.06);
    }

    .project-intro-glow {
      position: absolute;
      width: 170px;
      height: 170px;
      right: -70px;
      top: -80px;
      border-radius: 50%;
      background: rgba(207,230,90,.18);
      filter: blur(44px);
      pointer-events: none;
      transition: transform .5s var(--ease), opacity .35s ease;
    }

    .project-intro-card:hover .project-intro-glow {
      transform: translate(-8px, 10px) scale(1.08);
      opacity: .95;
    }

    .project-intro-top {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .project-intro-kicker {
      color: #7F8692;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .project-intro-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid rgba(207,230,90,.16);
      background: rgba(207,230,90,.055);
      color: var(--butter);
      box-shadow: 0 0 26px rgba(207,230,90,.06);
      transition: transform .3s var(--ease), background .3s ease;
    }

    .project-intro-card:hover .project-intro-icon {
      transform: rotate(8deg) scale(1.05);
      background: rgba(207,230,90,.09);
    }

    .project-intro-copy {
      position: relative;
      z-index: 1;
      margin-top: 26px;
      color: #A4A9B2;
      font-size: 1rem;
      line-height: 1.7;
    }

    .project-intro-copy strong {
      color: #F5F6F8;
      font-weight: 600;
    }

    .project-intro-line {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 1px;
      margin-top: 22px;
      overflow: hidden;
      background: rgba(255,255,255,.055);
    }

    .project-intro-line::after {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 34%;
      background: linear-gradient(90deg, var(--butter), rgba(207,230,90,.65), transparent);
      transform-origin: left center;
      transition: width .45s var(--ease);
    }

    .project-intro-card:hover .project-intro-line::after {
      width: 72%;
    }

    @media (max-width: 639px) {
      .project-intro-card {
        min-height: 0;
        padding: 20px 18px;
        border-radius: 22px;
        text-align: center;
      }

      .project-intro-top {
        justify-content: center;
      }

      .project-intro-kicker {
        text-align: center;
      }

      .project-intro-icon {
        display: none;
      }

      .project-intro-copy {
        margin-top: 18px;
        text-align: center;
        font-size: 14px;
        line-height: 1.7;
      }

      .project-intro-line {
        width: 72%;
        margin-inline: auto;
        margin-top: 18px;
      }

      .project-intro-line::after {
        width: 48%;
      }
    }


    /* Desktop methodology density fix */
    @media (min-width: 1024px) {
      .method-card {
        min-height: 0 !important;
        justify-content: flex-start;
        gap: 24px;
        padding: 28px 30px;
      }

      .method-card > .method-topline {
        min-height: 44px;
        align-items: center;
      }

      .method-layout {
        grid-template-columns: minmax(0, 1.34fr) minmax(290px, .66fr);
        gap: 30px;
        align-items: center;
      }

      .method-copy {
        justify-content: center;
        padding: 2px 18px 2px 2px;
      }

      .method-card h3 {
        max-width: 620px;
        font-size: clamp(2rem, 2.75vw, 2.85rem);
      }

      .method-card .method-copy > p {
        max-width: 650px;
        margin-top: 14px;
      }

      .method-side {
        min-height: 190px;
        justify-content: space-between;
        padding: 18px;
      }

      .method-chip-list {
        gap: 7px;
      }

      .method-chip {
        min-height: 32px;
      }

      .method-result {
        padding-top: 14px;
      }
    }

    @media (min-width: 1280px) {
      .method-card {
        padding: 30px 34px;
      }

      .method-layout {
        grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
        gap: 36px;
      }
    }


    /* Interactive social contact links */
    .contact-socials {
      display: grid;
      gap: 10px;
      max-width: 430px;
    }

    .contact-social-link {
      --social-x: 50%;
      --social-y: 50%;
      position: relative;
      min-height: 72px;
      display: grid;
      grid-template-columns: 40px minmax(0,1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 13px 14px;
      overflow: hidden;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        rgba(255,255,255,.018);
      color: #D9DCE2;
      isolation: isolate;
      transition:
        transform .3s var(--ease),
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
    }

    .contact-social-link::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      opacity: 0;
      background:
        radial-gradient(
          150px circle at var(--social-x) var(--social-y),
          rgba(255,255,255,.12),
          transparent 58%
        );
      transition: opacity .25s ease;
      pointer-events: none;
    }

    .contact-social-link::after {
      content: "";
      position: absolute;
      inset: auto 12% -70% 12%;
      height: 80%;
      z-index: -3;
      border-radius: 50%;
      filter: blur(34px);
      opacity: .16;
      transition: opacity .3s ease, transform .35s var(--ease);
      pointer-events: none;
    }

    .contact-social-instagram::after {
      background: rgba(207,230,90,.55);
    }

    .contact-social-linkedin::after {
      background: rgba(183,211,63,.55);
    }

    .contact-social-link:hover,
    .contact-social-link:focus-visible {
      transform: translateY(-3px);
      border-color: rgba(255,255,255,.16);
      background:
        linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
        rgba(255,255,255,.022);
      outline: none;
    }

    .contact-social-instagram:hover,
    .contact-social-instagram:focus-visible {
      box-shadow:
        0 18px 42px rgba(0,0,0,.18),
        0 0 36px rgba(207,230,90,.08);
    }

    .contact-social-linkedin:hover,
    .contact-social-linkedin:focus-visible {
      box-shadow:
        0 18px 42px rgba(0,0,0,.18),
        0 0 36px rgba(183,211,63,.09);
    }

    .contact-social-link:hover::before,
    .contact-social-link:focus-visible::before,
    .contact-social-link:hover::after,
    .contact-social-link:focus-visible::after {
      opacity: 1;
    }

    .contact-social-link:hover::after,
    .contact-social-link:focus-visible::after {
      transform: translateY(-8px) scale(1.04);
    }

    .contact-social-light {
      position: absolute;
      top: 0;
      left: 14%;
      width: 72%;
      height: 1px;
      opacity: .65;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
      transition: opacity .3s ease, transform .4s var(--ease);
    }

    .contact-social-link:hover .contact-social-light {
      opacity: 1;
      transform: scaleX(1.15);
    }

    .contact-social-icon {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.07);
      background: rgba(255,255,255,.04);
      transition:
        transform .3s var(--ease),
        background .3s ease,
        box-shadow .3s ease;
    }

    .contact-social-instagram .contact-social-icon {
      color: #D9EC75;
    }

    .contact-social-linkedin .contact-social-icon {
      color: #D9EC75;
    }

    .contact-social-instagram:hover .contact-social-icon {
      transform: rotate(-5deg) scale(1.06);
      background: rgba(207,230,90,.08);
      box-shadow: 0 0 24px rgba(207,230,90,.12);
    }

    .contact-social-linkedin:hover .contact-social-icon {
      transform: rotate(5deg) scale(1.06);
      background: rgba(183,211,63,.08);
      box-shadow: 0 0 24px rgba(183,211,63,.13);
    }

    .contact-social-copy {
      min-width: 0;
    }

    .contact-social-copy small {
      display: block;
      color: #747B87;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    .contact-social-copy strong {
      display: block;
      margin-top: 3px;
      color: #F0F1F4;
      font-size: 13px;
      font-weight: 650;
      letter-spacing: -.01em;
    }

    .contact-social-cta {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #858C97;
      font-size: 9px;
      font-weight: 650;
      letter-spacing: .03em;
      white-space: nowrap;
      transition: color .25s ease, transform .25s var(--ease);
    }

    .contact-social-link:hover .contact-social-cta,
    .contact-social-link:focus-visible .contact-social-cta {
      color: var(--butter);
      transform: translateX(2px);
    }

    @media (max-width: 639px) {
      .contact-socials {
        width: 100%;
        max-width: 390px;
        margin-inline: auto;
      }

      .contact-social-link {
        grid-template-columns: 40px minmax(0,1fr);
        text-align: left;
      }

      .contact-social-cta {
        grid-column: 1 / -1;
        justify-self: center;
        margin-top: -2px;
      }

      .contact-social-copy,
      .contact-social-copy small,
      .contact-social-copy strong {
        text-align: left !important;
      }
    }


    /* Methodology horizontal intro */
    .method-intro {
      max-width: none;
    }

    .method-intro-label {
      margin-bottom: 18px;
    }

    .method-intro-grid {
      display: grid;
      grid-template-columns: minmax(0,1fr);
      gap: 24px;
      align-items: end;
    }

    .method-intro-title,
    .method-intro-meta {
      min-width: 0;
    }

    .method-intro-copy {
      max-width: 680px;
    }

    .method-intro-tools {
      margin-top: 22px;
    }

    @media (max-width: 639px) {
      .method-intro,
      .method-intro-grid,
      .method-intro-title,
      .method-intro-meta,
      .method-intro-copy {
        text-align: center;
      }

      .method-intro-label {
        margin-bottom: 14px;
      }

      .method-intro-copy {
        margin-inline: auto;
      }

      .method-intro-tools {
        justify-content: center;
        margin-top: 18px;
      }
    }

    @media (min-width: 1024px) {
      .method-intro-label {
        margin-bottom: 16px;
      }

      .method-intro-grid {
        grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr);
        gap: 64px;
        align-items: center;
      }

      .method-intro-title h2 {
        max-width: 650px;
        font-size: clamp(3.4rem, 4.9vw, 5.2rem);
      }

      .method-intro-meta {
        align-self: center;
        padding: 20px 0 4px 32px;
        border-left: 1px solid rgba(255,255,255,.07);
      }

      .method-intro-copy {
        max-width: 520px;
        font-size: 15px;
        line-height: 1.75;
      }

      .method-intro-tools {
        margin-top: 20px;
      }

      #method .section-reveal.mt-12 {
        margin-top: 36px;
      }

      #method .method-intro::after {
        width: 100%;
        margin-top: 30px;
      }
    }


    /* Center social contact cards on mobile */
    @media (max-width: 639px) {
      .contact-social-link {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center !important;
      }

      .contact-social-icon {
        margin-inline: auto;
      }

      .contact-social-copy,
      .contact-social-copy small,
      .contact-social-copy strong {
        width: 100%;
        text-align: center !important;
      }

      .contact-social-cta {
        grid-column: auto;
        justify-self: center;
        margin-top: 2px;
        text-align: center;
      }
    }


    /* Compact social cards side-by-side on mobile */
    @media (max-width: 639px) {
      .contact-socials {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        max-width: 100%;
      }

      .contact-social-link {
        min-height: 138px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        justify-items: center;
        align-content: center;
        gap: 9px;
        padding: 14px 10px;
        border-radius: 16px;
        text-align: center !important;
      }

      .contact-social-icon {
        width: 36px;
        height: 36px;
        border-radius: 11px;
      }

      .contact-social-copy {
        display: grid;
        gap: 2px;
      }

      .contact-social-copy small {
        font-size: 7.5px;
      }

      .contact-social-copy strong {
        margin-top: 0;
        font-size: 12px;
        line-height: 1.2;
      }

      .contact-social-cta {
        grid-column: auto;
        justify-self: center;
        margin-top: 0;
        font-size: 8.5px;
      }
    }


    /* Equal methodology card heights on mobile */
    @media (max-width: 639px) {
      #method .method-track {
        align-items: stretch;
      }

      #method .method-slide {
        display: flex;
        align-items: stretch;
        height: auto;
      }

      #method .method-card {
        width: 100%;
        min-height: 590px;
        align-self: stretch;
        justify-content: flex-start;
      }

      #method .method-layout {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
      }

      #method .method-copy {
        min-height: 178px;
        justify-content: flex-start;
      }

      #method .method-side {
        margin-top: auto;
        min-height: 250px;
        justify-content: space-between;
      }

      #method .method-chip-list {
        min-height: 72px;
        align-content: flex-start;
      }

      #method .method-result {
        margin-top: auto;
      }
    }

    @media (max-width: 380px) {
      #method .method-card {
        min-height: 610px;
      }

      #method .method-copy {
        min-height: 190px;
      }
    }


    /* Pato Creando brand palette: charcoal + acid lime */
    :root {
      --brand-charcoal: #0F1215;
      --brand-graphite: #24282D;
      --brand-lime: #CFE65A;
      --brand-lime-deep: #AFC63F;
      --brand-lime-soft: #E9F6A0;
      --brand-white: #F3F5F6;
    }

    body {
      background: var(--brand-charcoal);
    }

    body::before {
      background:
        radial-gradient(circle at 12% 18%, rgba(175,198,63,.105), transparent 30%),
        radial-gradient(circle at 86% 22%, rgba(207,230,90,.075), transparent 28%),
        radial-gradient(circle at 55% 82%, rgba(207,230,90,.035), transparent 24%),
        linear-gradient(180deg, #0F1215 0%, #0F1215 100%);
    }

    .nav-blur {
      background: rgba(15,18,21,.72);
    }

    .glass {
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
        rgba(24,27,31,.68);
      border-color: rgba(255,255,255,.085);
    }

    .gradient-text {
      background:
        linear-gradient(
          120deg,
          #F3F5F6 4%,
          #E7EFC8 38%,
          #CFE65A 70%,
          #AFC63F 100%
        );
      background-size: 220% 220%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .progress > span,
    .method-progress > span {
      background: linear-gradient(90deg, #7F922C, #CFE65A, #E9F6A0);
      box-shadow: 0 0 18px rgba(207,230,90,.30);
    }

    .status-dot {
      background: var(--brand-lime);
      box-shadow:
        0 0 0 6px rgba(207,230,90,.07),
        0 0 24px rgba(207,230,90,.34);
    }

    .tool-badge-primary {
      color: #10130A;
      border-color: rgba(207,230,90,.68);
      background: linear-gradient(180deg, #E9F6A0, #CFE65A);
      box-shadow: 0 8px 24px rgba(207,230,90,.10);
    }

    .tab-btn.is-active {
      color: #10130A;
      background: var(--brand-lime);
      border-color: var(--brand-lime);
      box-shadow: 0 10px 30px rgba(207,230,90,.10);
    }

    .method-result-icon {
      color: #10130A;
      background: linear-gradient(180deg, #E9F6A0, #CFE65A);
    }

    .text-violet-300,
    .text-blue-300,
    .text-butter {
      color: var(--brand-lime) !important;
    }

    .bg-butter {
      background-color: var(--brand-lime) !important;
    }

    .border-butter\/20 {
      border-color: rgba(207,230,90,.20) !important;
    }

    .hero-cta-primary:hover,
    #contact button[type="submit"]:hover {
      background: var(--brand-lime) !important;
    }

    .project-intro-card,
    .method-card,
    .method-side,
    .funnel-detail,
    .mail-provider-picker {
      --brand-card-glow: rgba(207,230,90,.075);
    }

    .project-intro-card {
      background:
        radial-gradient(circle at 86% 12%, rgba(207,230,90,.11), transparent 34%),
        radial-gradient(circle at 10% 90%, rgba(175,198,63,.08), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016)),
        rgba(18,21,24,.76);
    }

    .method-card {
      background:
        radial-gradient(circle at 88% 18%, rgba(207,230,90,.06), transparent 28%),
        radial-gradient(circle at 12% 90%, rgba(175,198,63,.05), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
        rgba(18,21,24,.76);
    }

    .method-side,
    .funnel-detail {
      background:
        linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.014)),
        rgba(20,23,27,.80);
    }

    .contact-social-instagram .contact-social-icon,
    .contact-social-linkedin .contact-social-icon {
      color: var(--brand-lime);
    }

    .contact-social-instagram::after,
    .contact-social-linkedin::after {
      background: rgba(207,230,90,.48);
    }

    .contact-social-instagram:hover,
    .contact-social-instagram:focus-visible,
    .contact-social-linkedin:hover,
    .contact-social-linkedin:focus-visible {
      box-shadow:
        0 18px 42px rgba(0,0,0,.18),
        0 0 34px rgba(207,230,90,.08);
    }

    .contact-social-instagram:hover .contact-social-icon,
    .contact-social-linkedin:hover .contact-social-icon {
      background: rgba(207,230,90,.07);
      box-shadow: 0 0 24px rgba(207,230,90,.11);
    }

    ::selection {
      background: rgba(207,230,90,.25);
      color: #0F1215;
    }


    /* Interactive floating hero title */
    .hero-title-slide {
      position: relative;
      isolation: isolate;
      perspective: 900px;
    }

    .hero-title-slide::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 52%;
      aspect-ratio: 1.35;
      left: 18%;
      top: 22%;
      border-radius: 50%;
      background: rgba(207,230,90,.075);
      filter: blur(58px);
      opacity: .55;
      pointer-events: none;
      transform: translate3d(
        var(--title-glow-x, 0px),
        var(--title-glow-y, 0px),
        0
      );
      transition: transform .35s var(--ease), opacity .35s ease;
    }

    .hero-title-slide:hover::before {
      opacity: .82;
    }

    .hero-line {
      --hero-drift-x: 0px;
      --hero-drift-y: 0px;
      --hero-float-y: -6px;
      position: relative;
      will-change: transform;
      transform-origin: center center;
      animation: heroLineFloat 5.6s ease-in-out infinite;
    }

    .hero-line:nth-child(2) {
      animation-duration: 6.4s;
      animation-delay: -.9s;
    }

    .hero-line:nth-child(3) {
      animation-duration: 5.9s;
      animation-delay: -1.8s;
    }

    @keyframes heroLineFloat {
      0%, 100% {
        transform: translate3d(
          var(--hero-drift-x),
          var(--hero-drift-y),
          0
        );
      }

      50% {
        transform: translate3d(
          var(--hero-drift-x),
          calc(var(--hero-drift-y) + var(--hero-float-y)),
          0
        );
      }
    }

    @media (max-width: 639px) {
      .hero-line {
        --hero-float-y: -3px;
      }

      .hero-title-slide::before {
        width: 62%;
        left: 19%;
        top: 28%;
        opacity: .38;
        filter: blur(44px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-line {
        animation: none !important;
      }

      .hero-title-slide::before {
        transform: none !important;
      }
    }


    /* Hero title: floating only */
    .hero-title-slide::before {
      transform: none !important;
      transition: opacity .35s ease;
    }

    .hero-title-slide:hover::before {
      opacity: .55;
    }

    .hero-line {
      --hero-drift-x: 0px !important;
      --hero-drift-y: 0px !important;
    }

    /* Interactive hero service card */
    .hero-summary-card {
      position: relative;
      max-width: 650px;
      margin-top: 24px;
      padding: 18px 19px 17px;
      overflow: hidden;
      border-radius: 21px;
      border: 1px solid rgba(255,255,255,.085);
      background:
        radial-gradient(circle at 88% 12%, rgba(207,230,90,.10), transparent 32%),
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.016)),
        rgba(18,21,24,.72);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 20px 56px rgba(0,0,0,.16);
      transform-style: preserve-3d;
      transition:
        transform .35s var(--ease),
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
    }

    .hero-summary-card:hover {
      transform: translateY(-4px);
      border-color: rgba(207,230,90,.18);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 26px 72px rgba(0,0,0,.20),
        0 0 34px rgba(207,230,90,.055);
    }

    .hero-summary-glow {
      position: absolute;
      width: 150px;
      height: 150px;
      top: -74px;
      right: -54px;
      border-radius: 50%;
      background: rgba(207,230,90,.13);
      filter: blur(38px);
      pointer-events: none;
      transition: transform .45s var(--ease), opacity .3s ease;
    }

    .hero-summary-card:hover .hero-summary-glow {
      transform: translate(-8px, 8px) scale(1.08);
      opacity: .95;
    }

    .hero-summary-head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .hero-summary-kicker {
      color: #7F8692;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .hero-summary-icon {
      width: 31px;
      height: 31px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      border: 1px solid rgba(207,230,90,.15);
      background: rgba(207,230,90,.055);
      color: var(--brand-lime);
      transition: transform .3s var(--ease), background .3s ease;
    }

    .hero-summary-card:hover .hero-summary-icon {
      transform: rotate(7deg) scale(1.05);
      background: rgba(207,230,90,.09);
    }

    .hero-summary-copy {
      position: relative;
      z-index: 1;
      margin-top: 14px;
      color: #A5ABB3;
      font-size: clamp(.98rem, 1.55vw, 1.12rem);
      line-height: 1.68;
    }

    .hero-summary-copy strong {
      color: #F3F5F6;
      font-weight: 600;
    }

    .hero-summary-line {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      height: 1px;
      margin-top: 16px;
      overflow: hidden;
      background: rgba(255,255,255,.05);
    }

    .hero-summary-line::after {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 34%;
      background: linear-gradient(90deg, var(--brand-lime), rgba(207,230,90,.32), transparent);
      transition: width .4s var(--ease);
    }

    .hero-summary-card:hover .hero-summary-line::after {
      width: 72%;
    }

    @media (max-width: 639px) {
      .hero-summary-card {
        max-width: 100%;
        margin: 20px auto 0;
        padding: 17px 16px 16px;
        text-align: center;
      }

      .hero-summary-head {
        justify-content: center;
      }

      .hero-summary-icon {
        display: none;
      }

      .hero-summary-copy {
        margin-top: 12px;
        text-align: center;
        font-size: 14.5px;
        line-height: 1.68;
      }

      .hero-summary-line {
        width: 72%;
        margin-inline: auto;
        margin-top: 15px;
      }

      .hero-summary-line::after {
        width: 46%;
      }
    }


    /* Services / commercial offer */
    .services-section {
      border-top: 1px solid rgba(255,255,255,.055);
      background:
        linear-gradient(180deg, rgba(207,230,90,.018), transparent 24%, transparent 76%, rgba(207,230,90,.012)) !important;
    }

    .services-orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(90px);
      pointer-events: none;
      opacity: .45;
    }

    .services-orb-a {
      width: 320px;
      height: 320px;
      top: 4%;
      right: -110px;
      background: rgba(207,230,90,.10);
    }

    .services-orb-b {
      width: 260px;
      height: 260px;
      bottom: -100px;
      left: -90px;
      background: rgba(175,198,63,.07);
    }

    .services-intro {
      max-width: 760px;
    }

    .services-label {
      color: #737982;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .19em;
      text-transform: uppercase;
    }

    .services-title {
      margin-top: 13px;
      font-size: clamp(2.55rem, 5.1vw, 4.9rem);
      line-height: .98;
      letter-spacing: -.052em;
      font-weight: 600;
    }

    .services-title span {
      display: block;
      color: #676D75;
    }

    .services-copy {
      max-width: 640px;
      margin-top: 20px;
      color: #989EA7;
      font-size: 15px;
      line-height: 1.75;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 38px;
    }

    .service-card {
      position: relative;
      min-height: 390px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 22px;
      border-radius: 25px;
      border: 1px solid rgba(255,255,255,.075);
      background:
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.014)),
        rgba(18,21,24,.76);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 22px 60px rgba(0,0,0,.16);
      transition:
        transform .35s var(--ease),
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
      isolation: isolate;
    }

    .service-card:hover {
      transform: translateY(-6px);
      border-color: rgba(207,230,90,.18);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 30px 80px rgba(0,0,0,.22),
        0 0 38px rgba(207,230,90,.055);
    }

    .service-card-glow {
      position: absolute;
      z-index: -1;
      width: 190px;
      height: 190px;
      top: -94px;
      right: -78px;
      border-radius: 50%;
      background: rgba(207,230,90,.10);
      filter: blur(44px);
      transition: transform .45s var(--ease), opacity .3s ease;
      pointer-events: none;
    }

    .service-card:hover .service-card-glow {
      transform: translate(-12px, 12px) scale(1.14);
      opacity: .95;
    }

    .service-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .service-icon {
      width: 43px;
      height: 43px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: var(--brand-lime);
      border: 1px solid rgba(207,230,90,.13);
      background: rgba(207,230,90,.05);
      transition: transform .3s var(--ease), background .3s ease;
    }

    .service-card:hover .service-icon {
      transform: translateY(-2px) rotate(-3deg);
      background: rgba(207,230,90,.09);
    }

    .service-index {
      color: #555B63;
      font-size: 10px;
      letter-spacing: .12em;
    }

    .service-card-body {
      margin-top: 34px;
    }

    .service-kicker {
      color: var(--brand-lime);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .service-card h3 {
      margin-top: 11px;
      color: #F3F5F6;
      font-size: clamp(1.45rem, 2.1vw, 1.9rem);
      line-height: 1.07;
      letter-spacing: -.04em;
      font-weight: 600;
    }

    .service-card-body > p:last-child {
      margin-top: 14px;
      color: #90969F;
      font-size: 13px;
      line-height: 1.67;
    }

    .service-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: auto;
      padding-top: 25px;
    }

    .service-chips span {
      min-height: 29px;
      display: inline-flex;
      align-items: center;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.07);
      background: rgba(255,255,255,.025);
      color: #8F959E;
      font-size: 9px;
      letter-spacing: .035em;
    }

    .service-cta {
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 18px;
      padding: 0 14px;
      border-radius: 13px;
      border: 1px solid rgba(207,230,90,.12);
      background: rgba(207,230,90,.045);
      color: #DDE9A4;
      font-size: 11px;
      font-weight: 600;
      transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s var(--ease);
    }

    .service-cta:hover,
    .service-cta:focus-visible {
      background: var(--brand-lime);
      border-color: var(--brand-lime);
      color: #11150A;
      outline: none;
      transform: translateY(-1px);
    }

    .service-cta svg {
      transition: transform .3s var(--ease);
    }

    .service-cta:hover svg,
    .service-cta:focus-visible svg {
      transform: translate(2px, -2px);
    }

    .services-foot {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-top: 26px;
    }

    .services-foot-line {
      width: 58px;
      height: 1px;
      flex: 0 0 auto;
      background: linear-gradient(90deg, var(--brand-lime), transparent);
    }

    .services-foot p {
      color: #636A72;
      font-size: 10px;
      letter-spacing: .04em;
    }

    @media (max-width: 900px) {
      .services-grid {
        grid-template-columns: 1fr;
      }

      .service-card {
        min-height: 0;
      }
    }

    @media (max-width: 639px) {
      .services-section {
        padding-block: 72px;
      }

      .services-intro {
        margin-inline: auto;
        text-align: center;
      }

      .services-title,
      .services-copy {
        margin-inline: auto;
        text-align: center;
      }

      .services-copy {
        max-width: 34rem;
        font-size: 14px;
      }

      .services-grid {
        gap: 10px;
        margin-top: 30px;
      }

      .service-card {
        padding: 19px 17px;
        border-radius: 21px;
        text-align: center;
      }

      .service-card-top {
        justify-content: center;
        position: relative;
      }

      .service-index {
        position: absolute;
        right: 0;
      }

      .service-card-body {
        margin-top: 24px;
      }

      .service-card h3 {
        max-width: 290px;
        margin-inline: auto;
      }

      .service-card-body > p:last-child {
        max-width: 330px;
        margin-inline: auto;
        margin-top: 12px;
      }

      .service-chips {
        justify-content: center;
        padding-top: 22px;
      }

      .service-cta {
        justify-content: center;
        gap: 10px;
        margin-top: 16px;
      }

      .services-foot {
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        text-align: center;
      }

      .services-foot-line {
        width: 52px;
      }
    }


    /* Compact deliverables block */
    .deliverables-card {
      margin-top: 24px;
      padding: 20px 22px;
      overflow: hidden;
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.075);
      background:
        radial-gradient(circle at 92% 12%, rgba(207,230,90,.075), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
        rgba(18,21,24,.68);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }

    .deliverables-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      padding-bottom: 17px;
      border-bottom: 1px solid rgba(255,255,255,.055);
    }

    .deliverables-kicker {
      color: var(--brand-lime);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .deliverables-head h3 {
      margin-top: 6px;
      color: #F3F5F6;
      font-size: clamp(1.2rem, 2vw, 1.6rem);
      line-height: 1.08;
      letter-spacing: -.035em;
      font-weight: 600;
    }

    .deliverables-badge {
      flex: 0 0 auto;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(207,230,90,.12);
      background: rgba(207,230,90,.045);
      color: #BECF68;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .deliverables-flow {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
      align-items: center;
      gap: 10px;
      padding-top: 17px;
    }

    .deliverable-step {
      position: relative;
      min-width: 0;
      display: grid;
      grid-template-columns: 34px minmax(0,1fr);
      column-gap: 10px;
      align-items: center;
    }

    .deliverable-index {
      position: absolute;
      top: -3px;
      right: 0;
      color: #4F555D;
      font-size: 7px;
      letter-spacing: .08em;
    }

    .deliverable-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      border: 1px solid rgba(207,230,90,.11);
      background: rgba(207,230,90,.045);
      color: var(--brand-lime);
    }

    .deliverable-step strong,
    .deliverable-step small {
      display: block;
    }

    .deliverable-step strong {
      color: #DEE1E4;
      font-size: 10px;
      font-weight: 600;
    }

    .deliverable-step small {
      margin-top: 3px;
      color: #717780;
      font-size: 8px;
      line-height: 1.35;
    }

    .deliverable-arrow {
      display: grid;
      place-items: center;
      color: rgba(207,230,90,.34);
    }

    /* Full-page visual rhythm refinement */
    #services {
      scroll-margin-top: 76px;
    }

    /* Hero: keep impact, reduce the gap before projects */
    #top {
      padding-bottom: 52px;
    }

    .hero-summary-card {
      margin-top: 20px;
    }

    .hero-actions {
      margin-top: 22px;
    }

    .hero-proof {
      margin-top: 20px;
    }

    /* Projects: faster transition from intro to work */
    #projects {
      padding-top: 88px;
      padding-bottom: 92px;
    }

    #projects > .site-shell > .grid {
      gap: 26px;
    }

    .project-intro-card {
      min-height: 166px;
      padding: 19px 20px;
    }

    .project-intro-copy {
      margin-top: 20px;
      line-height: 1.62;
    }

    .project-intro-line {
      margin-top: 17px;
    }

    #projects [role="tablist"] {
      margin-top: 30px;
    }

    .project-category-row {
      margin-top: 14px;
    }

    #projectGrid {
      margin-top: 30px;
    }

    .project-info-card {
      min-height: 220px;
      margin-top: 13px;
      padding: 20px;
    }

    .project-note {
      margin-top: 10px;
      line-height: 1.56;
    }

    .project-info-card .mt-5 {
      margin-top: 14px;
    }

    /* Services: cards no longer reserve CTA space */
    #services {
      padding-top: 82px;
      padding-bottom: 86px;
    }

    .services-copy {
      margin-top: 16px;
      line-height: 1.66;
    }

    .services-grid {
      margin-top: 30px;
      gap: 12px;
    }

    .service-card {
      min-height: 318px;
      padding: 20px;
    }

    .service-card-body {
      margin-top: 25px;
    }

    .service-card-body > p:last-child {
      margin-top: 11px;
      line-height: 1.58;
    }

    .service-chips {
      padding-top: 20px;
    }

    .deliverables-card {
      margin-top: 16px;
    }

    /* Methodology: compact enough to scan, still substantial */
    #method {
      padding-top: 86px;
      padding-bottom: 86px;
    }

    .method-intro-label {
      margin-bottom: 13px;
    }

    .method-intro-tools {
      margin-top: 16px;
    }

    #method .section-reveal.mt-12 {
      margin-top: 28px;
    }

    .method-controls {
      margin-top: 12px;
    }

    /* Contact: close the page without another oversized pause */
    #contact {
      padding-top: 88px;
      padding-bottom: 72px;
    }

    #contact .relative.grid {
      gap: 30px;
    }

    #contact .floating-field textarea {
      min-height: 118px;
    }

    #contact footer {
      padding-top: 22px;
    }

    @media (min-width: 768px) {
      #top {
        padding-bottom: 68px;
      }

      #projects {
        padding-top: 96px;
        padding-bottom: 100px;
      }

      #services {
        padding-top: 88px;
        padding-bottom: 92px;
      }

      #method {
        padding-top: 92px;
        padding-bottom: 92px;
      }

      #contact {
        padding-top: 96px;
        padding-bottom: 80px;
      }

      #projectGrid {
        margin-top: 32px;
      }
    }

    @media (min-width: 1024px) {
      .project-intro-card {
        min-height: 156px;
      }

      .project-info-card {
        min-height: 214px;
      }

      .service-card {
        min-height: 304px;
      }

      .method-intro-grid {
        gap: 52px;
      }

      .method-intro-meta {
        padding-top: 14px;
        padding-bottom: 2px;
      }

      #method .method-intro::after {
        margin-top: 24px;
      }

      #method .section-reveal.mt-12 {
        margin-top: 26px;
      }
    }

    @media (max-width: 639px) {
      #top {
        padding-bottom: 48px;
      }

      #projects,
      #services,
      #method,
      #contact {
        padding-top: 64px;
        padding-bottom: 64px;
      }

      #projects > .site-shell > .grid {
        gap: 18px;
      }

      .project-intro-card {
        min-height: 0;
        padding: 17px 16px;
      }

      .project-intro-copy {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.58;
      }

      .project-intro-line {
        margin-top: 14px;
      }

      #projects [role="tablist"] {
        margin-top: 24px;
      }

      #categoryDescription {
        min-height: 0;
        margin-top: 12px;
      }

      #projectGrid {
        margin-top: 28px;
        gap: 28px;
      }

      .mockup-stage {
        min-height: 408px;
        padding-block: 20px;
      }

      .project-info-card {
        min-height: 0;
        margin-top: 10px;
        padding: 16px;
      }

      .project-note {
        margin-top: 9px;
        line-height: 1.58;
      }

      .project-info-card .mt-5 {
        margin-top: 13px;
      }

      .services-grid {
        margin-top: 25px;
        gap: 9px;
      }

      .service-card {
        min-height: 0;
        padding: 17px 16px;
      }

      .service-card-body {
        margin-top: 20px;
      }

      .service-card-body > p:last-child {
        line-height: 1.56;
      }

      .service-chips {
        padding-top: 17px;
      }

      .deliverables-card {
        margin-top: 12px;
      }

      #method .method-card {
        min-height: 520px;
        padding: 20px 18px;
      }

      #method .method-copy {
        min-height: 145px;
      }

      #method .method-side {
        min-height: 218px;
      }

      #method .method-chip-list {
        min-height: 62px;
      }

      .method-controls {
        margin-top: 10px;
      }

      .contact-social-link {
        min-height: 116px;
        padding: 12px 9px;
        gap: 7px;
      }

      #contact > .site-shell > .glass {
        padding: 18px 15px;
      }

      #contact .relative.grid {
        gap: 27px;
      }

      #contact .section-reveal > p.mt-7 {
        margin-top: 20px;
      }

      #contact .contact-socials {
        margin-top: 22px;
      }

      #contact footer {
        padding-top: 22px;
      }
    }

    @media (max-width: 380px) {
      #method .method-card {
        min-height: 538px;
      }

      #method .method-copy {
        min-height: 154px;
      }
    }


    /* Pricing packs / value ladder */
    .pricing-packs {
      position: relative;
      margin-top: 28px;
      padding: 30px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 30px;
      background:
        radial-gradient(ellipse 42% 46% at 52% 18%, rgba(207,230,90,.075), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.01)),
        rgba(15,18,21,.74);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 30px 90px rgba(0,0,0,.16);
      isolation: isolate;
    }

    .pricing-packs::before {
      content: "";
      position: absolute;
      width: 460px;
      height: 260px;
      left: 50%;
      top: -160px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: rgba(207,230,90,.09);
      filter: blur(70px);
      pointer-events: none;
      z-index: -1;
    }

    .pricing-packs-head {
      display: grid;
      grid-template-columns: minmax(0,1.15fr) minmax(300px,.65fr);
      gap: 48px;
      align-items: end;
    }

    .pricing-packs-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }

    .pricing-packs-label,
    .pricing-packs-slots {
      min-height: 28px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 10px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 750;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .pricing-packs-label {
      color: #10140A;
      background: var(--brand-lime);
    }

    .pricing-packs-slots {
      color: #C5CD9C;
      border: 1px solid rgba(207,230,90,.14);
      background: rgba(207,230,90,.045);
    }

    .pricing-packs-head h3 {
      max-width: 720px;
      font-size: clamp(2.5rem,4.9vw,4.8rem);
      line-height: .95;
      letter-spacing: -.055em;
      font-weight: 600;
    }

    .pricing-packs-head h3 span {
      display: block;
      color: #777D84;
    }

    .pricing-packs-head > p {
      max-width: 430px;
      color: #969CA4;
      font-size: 15px;
      line-height: 1.7;
    }

    .pricing-packs-head-side {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      width: 100%;
      text-align: center;
    }

    .pricing-packs-head-side > p {
      max-width: 430px;
      margin-inline: auto;
      color: #B7BDC4;
      font-size: 15px;
      line-height: 1.7;
      text-align: center;
    }

    .pricing-packs-head-side .pricing-pack-shared-cta {
      width: min(100%, 320px);
      min-height: 50px;
      margin: 0 auto;
    }

    .pricing-pack-rail {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 12px;
      margin-top: 30px;
      align-items: stretch;
    }

    .pricing-pack {
      position: relative;
      min-width: 0;
      min-height: 470px;
      display: flex;
      flex-direction: column;
      padding: 22px;
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
        rgba(14,17,20,.82);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    }

    .pricing-pack-featured {
      transform: translateY(-8px);
      border-color: rgba(207,230,90,.30);
      background:
        radial-gradient(circle at 50% 0%, rgba(207,230,90,.10), transparent 36%),
        linear-gradient(180deg, rgba(207,230,90,.045), rgba(255,255,255,.014)),
        rgba(15,18,21,.92);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 28px 70px rgba(0,0,0,.20),
        0 0 52px rgba(207,230,90,.055);
    }

    .pricing-pack-badge {
      position: absolute;
      top: 14px;
      right: 14px;
      min-height: 25px;
      display: inline-flex;
      align-items: center;
      padding: 0 9px;
      border-radius: 999px;
      color: #11150A;
      background: var(--brand-lime);
      font-size: 7.5px;
      font-weight: 800;
      letter-spacing: .10em;
      text-transform: uppercase;
    }

    .pricing-pack-kicker {
      color: #8D949C;
      font-size: 10.5px;
      font-weight: 750;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .pricing-pack-top h4 {
      max-width: 290px;
      margin-top: 10px;
      font-size: 1.58rem;
      line-height: 1.06;
      letter-spacing: -.035em;
      font-weight: 600;
    }

    .pricing-pack-price {
      display: block;
      margin-top: 22px;
      color: #F3F5F6;
      font-size: clamp(1.85rem,2.6vw,2.7rem);
      line-height: 1;
      letter-spacing: -.045em;
      font-weight: 700;
    }

    .pricing-pack-featured .pricing-pack-price {
      color: var(--brand-lime);
    }

    .pricing-pack-summary {
      margin-top: 10px;
      color: #E3E6E9;
      font-size: 14px;
      font-weight: 650;
    }

    .pricing-pack-extra {
      margin-top: 4px;
      color: #B0B6BC;
      font-size: 13px;
    }

    .pricing-pack-list {
      display: grid;
      gap: 9px;
      margin-top: 22px;
      padding-top: 19px;
      border-top: 1px solid rgba(255,255,255,.065);
    }

    .pricing-pack-list span {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #C3C8CE;
      font-size: 12.5px;
      line-height: 1.4;
    }

    .pricing-pack-list svg {
      width: 13px;
      height: 13px;
      flex: 0 0 auto;
      color: var(--brand-lime);
    }

    .pricing-pack-note {
      margin-top: 18px;
      color: #A1A8AF;
      font-size: 12px;
      line-height: 1.55;
    }

    .pricing-pack-cta {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: auto;
      padding: 0 15px;
      border-radius: 15px;
      font-size: 10.5px;
      font-weight: 750;
      transition:
        transform .28s var(--ease),
        border-color .28s ease,
        background .28s ease,
        box-shadow .28s ease;
    }

    .pricing-pack-cta svg {
      width: 14px;
      height: 14px;
      transition: transform .28s var(--ease);
    }

    .pricing-pack-cta:hover,
    .pricing-pack-cta:focus-visible {
      transform: translateY(-2px);
      outline: none;
    }

    .pricing-pack-cta:hover svg,
    .pricing-pack-cta:focus-visible svg {
      transform: translate(2px,-2px);
    }

    .pricing-pack-cta-primary {
      color: #10140A;
      background: var(--brand-lime);
      box-shadow: 0 14px 34px rgba(207,230,90,.10);
    }

    .pricing-pack-cta-primary:hover,
    .pricing-pack-cta-primary:focus-visible {
      background: var(--brand-lime-soft);
      box-shadow: 0 18px 44px rgba(207,230,90,.16);
    }

    .pricing-pack-cta-secondary {
      color: #E8EAED;
      border: 1px solid rgba(255,255,255,.105);
      background: rgba(255,255,255,.03);
    }

    .pricing-pack-cta-secondary:hover,
    .pricing-pack-cta-secondary:focus-visible {
      border-color: rgba(255,255,255,.18);
      background: rgba(255,255,255,.055);
    }

    .pricing-packs-disclaimer {
      margin-top: 18px;
      color: #858C94;
      font-size: 12px;
      line-height: 1.6;
      text-align: center;
    }

    @media (max-width: 900px) {
      .pricing-packs-head {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .pricing-packs-head > p {
        max-width: 620px;
      }

      .pricing-pack {
        min-height: 500px;
      }
    }

    @media (max-width: 639px) {
      .pricing-packs {
        margin-top: 22px;
        padding: 24px 0 22px;
        border-radius: 26px;
      }

      .pricing-packs-head {
        padding-inline: 18px;
        text-align: center;
      }

      .pricing-packs-meta {
        justify-content: center;
      }

      .pricing-packs-head h3 {
        font-size: clamp(2.7rem,12vw,4rem);
        line-height: .94;
        text-align: center;
      }

      .pricing-packs-head > p {
        max-width: 350px;
        margin-inline: auto;
        text-align: center;
      }

      .pricing-packs-head-side {
        align-items: center;
        text-align: center;
      }

      .pricing-packs-head-side > p {
        max-width: 350px;
        margin-inline: auto;
        text-align: center;
      }

      .pricing-packs-head-side .pricing-pack-shared-cta {
        width: min(100%, 350px);
      }

      .pricing-pack-rail {
        display: flex;
        gap: 10px;
        margin-top: 24px;
        padding: 8px 18px 14px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .pricing-pack-rail::-webkit-scrollbar {
        display: none;
      }

      .pricing-pack {
        flex: 0 0 min(84vw, 330px);
        min-height: 460px;
        padding: 19px 18px;
        border-radius: 21px;
        scroll-snap-align: center;
        text-align: center;
      }

      .pricing-pack-featured {
        transform: none;
      }

      .pricing-pack-badge {
        position: static;
        align-self: center;
        margin-bottom: 12px;
      }

      .pricing-pack-top h4,
      .pricing-pack-list,
      .pricing-pack-note {
        margin-left: auto;
        margin-right: auto;
      }

      .pricing-pack-top h4 {
        max-width: 270px;
      }

      .pricing-pack-list {
        width: 100%;
        max-width: 280px;
      }

      .pricing-pack-list span {
        justify-content: center;
        text-align: center;
      }

      .pricing-pack-note {
        max-width: 270px;
      }

      .pricing-packs-disclaimer {
        padding-inline: 18px;
      }
    }


    /* Mobile hero video takeover */
    .hero-sound-toggle {
      display: none;
    }

    body.hero-takeover-active > header {
      transform: translateY(-110%);
      opacity: 0;
      pointer-events: none;
    }

    body > header {
      transition: transform .28s ease, opacity .24s ease;
    }

    @media (max-width: 639px) {
      .hero-device-wrap.mobile-takeover-enabled {
        width: 100%;
        max-width: none;
        height: 155svh;
        margin-inline: auto;
        position: relative;
        overflow: visible;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-device-stage {
        position: sticky;
        top: 0;
        width: 100vw;
        height: 100svh;
        min-height: 0;
        margin-left: calc(50% - 50vw);
        padding: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: #080a0c;
        box-shadow: none;
        perspective: none;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-device-stage::before,
      .hero-device-wrap.mobile-takeover-enabled .hero-device-glow,
      .hero-device-wrap.mobile-takeover-enabled .hero-stage-label,
      .hero-device-wrap.mobile-takeover-enabled .hero-stage-caption {
        display: none !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-shell {
        position: absolute;
        inset: 0;
        width: 100vw;
        height: 100svh;
        aspect-ratio: auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #080a0c;
        box-shadow: none !important;
        transform: translate3d(0,0,0);
        transform-origin: center center;
        clip-path: inset(0 0 100% 0);
        -webkit-clip-path: inset(0 0 100% 0);
        transition: none !important;
        will-change: clip-path;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-shell::after,
      .hero-device-wrap.mobile-takeover-enabled .hero-phone-island,
      .hero-device-wrap.mobile-takeover-enabled .hero-phone-buttons,
      .hero-device-wrap.mobile-takeover-enabled .hero-phone-vignette {
        display: none !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-screen {
        position: absolute;
        inset: 0;
        border-radius: 0;
        overflow: hidden;
        background: #080a0c;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: none !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .video-tap-fallback {
        z-index: 35;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-sound-toggle {
        position: absolute;
        z-index: 40;
        right: max(16px, env(safe-area-inset-right));
        bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 13px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.14);
        background: rgba(8,10,12,.60);
        color: #F3F5F6;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: opacity .2s ease, transform .2s ease, background .2s ease;
      }

      .hero-device-wrap.mobile-takeover-enabled.is-takeover .hero-sound-toggle {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .hero-sound-toggle:active {
        transform: scale(.97);
      }
    }

    /* Mobile video compatibility / low-memory Android */
    .video-tap-fallback {
      position: absolute;
      z-index: 8;
      left: 50%;
      top: 50%;
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(10,12,14,.76);
      color: #F3F5F6;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .03em;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%,-50%) scale(.96);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      transition: opacity .2s ease, transform .2s ease;
    }

    .video-tap-fallback.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%,-50%) scale(1);
    }

    .video-tap-fallback svg {
      width: 14px;
      height: 14px;
    }

    .hero-video,
    .project-video {
      background: #080A0C;
    }

    @media (max-width: 767px), (hover: none) and (pointer: coarse) {
      .hero-phone-shell,
      .phone-shell {
        transform-style: flat !important;
        -webkit-transform-style: flat !important;
      }

      .hero-video,
      .project-video {
        transform: none !important;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
      }

      .hero-device-stage:hover .hero-video,
      .project-item:hover .project-video {
        transform: none !important;
      }
    }


    /* Conversion architecture */
    .conversion-tension {
      padding: 104px 0 92px;
      border-top: 1px solid rgba(255,255,255,.055);
    }

    .conversion-tension-inner {
      max-width: 1040px;
    }

    .conversion-kicker {
      margin: 0 0 18px;
      color: #9EA875;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .conversion-tension-title {
      max-width: 980px;
      font-size: clamp(3rem, 7vw, 7.2rem);
      line-height: .92;
      letter-spacing: -.065em;
      font-weight: 600;
    }

    .conversion-tension-title span,
    .conversion-tension-title strong {
      display: block;
    }

    .conversion-tension-title span {
      color: #F3F5F6;
    }

    .conversion-tension-title strong {
      margin-top: 8px;
      color: #AAB29B;
      font-weight: 600;
      text-shadow: 0 0 34px rgba(207,230,90,.055);
    }

    .conversion-tension-copy {
      max-width: 660px;
      margin-top: 30px;
      color: #B0B5BB;
      font-size: 15px;
      line-height: 1.75;
    }

    .creative-paths {
      padding: 76px 0 88px;
      background:
        radial-gradient(circle at 85% 18%, rgba(207,230,90,.075), transparent 30%),
        transparent;
    }

    .creative-paths-head {
      display: grid;
      grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr);
      grid-template-areas:
        "kicker title"
        "copy title";
      column-gap: 64px;
      row-gap: 18px;
      align-items: start;
    }

    .creative-paths-head > .conversion-kicker {
      grid-area: kicker;
      margin-bottom: 0;
      align-self: start;
    }

    .creative-paths-title {
      grid-area: title;
      font-size: clamp(2.8rem, 5.6vw, 5.6rem);
      line-height: .96;
      letter-spacing: -.055em;
      font-weight: 600;
    }

    .creative-paths-title span {
      display: block;
      color: #7D838A;
    }

    .creative-paths-head > p:last-child {
      grid-area: copy;
      max-width: 430px;
      color: #92979D;
      font-size: 14px;
      line-height: 1.7;
    }

    .creative-paths-grid {
      display: grid;
      grid-template-columns: repeat(4,minmax(0,1fr));
      gap: 10px;
      margin-top: 34px;
    }

    .creative-path {
      position: relative;
      aspect-ratio: 2.15 / 1;
      min-height: 0;
      padding: 17px 18px;
      text-align: center;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
        rgba(15,18,21,.62);
    }

    .creative-path::after {
      content: "";
      position: absolute;
      width: 120px;
      aspect-ratio: 1;
      right: -55px;
      bottom: -55px;
      border-radius: 50%;
      background: rgba(207,230,90,.08);
      filter: blur(24px);
    }

    .creative-path-index,
    .fit-index {
      display: inline-flex;
      color: #666D74;
      font-size: 10px;
      letter-spacing: .12em;
    }

    .creative-path small {
      display: block;
      margin-top: 10px;
      text-align: center;
      color: #CFE65A;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .17em;
    }

    .creative-path h3 {
      margin-top: 5px;
      font-size: 1.28rem;
      letter-spacing: -.035em;
    }

    .creative-path p {
      max-width: 230px;
      margin: 8px auto 0;
      color: #8F959B;
      font-size: 11px;
      line-height: 1.5;
    }

    .fit-section {
      padding: 72px 0 76px;
      border-top: 1px solid rgba(255,255,255,.055);
    }

    .fit-head {
      display: block;
      max-width: 720px;
      margin-left: auto;
    }

    .fit-head > .conversion-kicker {
      margin: 0 0 12px;
      text-align: left;
    }

    .fit-title {
      max-width: 720px;
      margin-left: 0;
      font-size: clamp(2.8rem,5.5vw,5.4rem);
      line-height: .96;
      letter-spacing: -.055em;
      font-weight: 600;
    }

    .fit-title span {
      display: block;
      color: #7D838A;
    }

    .fit-grid {
      display: grid;
      grid-template-columns: repeat(3,minmax(0,1fr));
      gap: 12px;
      width: min(100%, 920px);
      margin: 22px 0 0 auto;
    }

    .fit-card {
      aspect-ratio: 2.65 / 1;
      min-height: 0;
      padding: 15px 18px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      border: 1px solid rgba(255,255,255,.075);
      border-radius: 24px;
      background: rgba(255,255,255,.018);
    }

    .fit-card h3 {
      margin-top: 0;
      font-size: 1.16rem;
      letter-spacing: -.03em;
    }

    .fit-card p {
      max-width: 260px;
      margin: 7px auto 0;
      color: #8E949A;
      font-size: 10.4px;
      line-height: 1.48;
    }

    .direction-principle {
      display: grid;
      grid-template-columns: minmax(0,1.08fr) minmax(260px,.72fr);
      gap: 46px;
      align-items: end;
      margin-top: 26px;
      padding: 30px;
      border: 1px solid rgba(207,230,90,.15);
      border-radius: 28px;
      background:
        radial-gradient(circle at 90% 20%, rgba(207,230,90,.09), transparent 28%),
        rgba(255,255,255,.018);
    }

    .direction-principle-kicker {
      margin-bottom: 12px;
      color: #CFE65A;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .direction-principle h3 {
      font-size: clamp(2rem,4vw,3.7rem);
      line-height: .98;
      letter-spacing: -.05em;
      font-weight: 600;
    }

    .direction-principle h3 span {
      display: block;
      color: #8A9096;
    }

    .direction-principle > p {
      max-width: 470px;
      color: #969BA0;
      font-size: 14px;
      line-height: 1.72;
    }

    @media (max-width: 900px) {
      .creative-paths-head,
      .direction-principle {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .creative-paths-head {
        grid-template-areas:
          "kicker"
          "title"
          "copy";
        row-gap: 14px;
      }

      .creative-paths-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
      }

      .fit-head {
        max-width: none;
        margin-left: 0;
      }

      .fit-grid {
        width: 100%;
        margin-left: 0;
      }

      .fit-head > .conversion-kicker {
        margin-bottom: 10px;
      }

      .fit-title {
        margin-left: 0;
      }

      .fit-grid {
        grid-template-columns: 1fr;
      }

      .fit-card {
        min-height: 0;
      }
    }

    @media (max-width: 639px) {
      .conversion-tension,
      .creative-paths,
      .fit-section {
        padding: 64px 0;
      }

      .creative-paths-title {
        font-size: clamp(3.15rem, 14vw, 4.7rem);
        line-height: .91;
        letter-spacing: -.062em;
      }

      .creative-paths-head > .conversion-kicker {
        margin-bottom: 2px;
      }

      .conversion-tension-inner,
      .creative-paths-head,
      .fit-head,
      .direction-principle {
        text-align: center;
      }

      .conversion-tension-title {
        font-size: clamp(2.8rem,13vw,4.5rem);
      }

      .conversion-tension-copy,
      .creative-paths-head > p:last-child,
      .direction-principle > p {
        margin-left: auto;
        margin-right: auto;
      }

      .creative-paths-grid {
        display: flex;
        gap: 9px;
        margin-top: 22px;
        margin-right: calc((100vw - 100%) / -2);
        padding-right: 18px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: none;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .creative-paths-grid::-webkit-scrollbar {
        display: none;
      }

      .creative-path {
        flex: 0 0 min(84vw, 330px);
        aspect-ratio: 2.1 / 1;
        min-height: 0;
        padding: 14px 16px;
        border-radius: 18px;
        text-align: center;
        display: block;
        scroll-snap-align: none;
      }

      .creative-path small {
        display: block;
        float: none;
        margin-top: 2px;
        text-align: center;
      }

      .creative-path h3 {
        clear: both;
        margin-top: 9px;
        font-size: 1.22rem;
      }

      .creative-path p {
        max-width: 250px;
        margin: 6px auto 0;
        font-size: 10.8px;
        line-height: 1.45;
      }

      .fit-head,
      .fit-head > .conversion-kicker {
        text-align: center;
      }

      .fit-title {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

      .fit-grid {
        display: flex;
        gap: 9px;
        margin-top: 24px;
        margin-right: calc((100vw - 100%) / -2);
        padding-right: 18px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
      }

      .fit-grid::-webkit-scrollbar {
        display: none;
      }

      .fit-card {
        flex: 0 0 min(78vw, 300px);
        aspect-ratio: 2.3 / 1;
        min-height: 0;
        padding: 13px 15px;
        border-radius: 18px;
        text-align: center;
      }

      .fit-card h3 {
        margin-top: 0;
        font-size: 1.18rem;
      }

      .fit-card p {
        max-width: 250px;
        margin: 7px auto 0;
        font-size: 10.8px;
        line-height: 1.45;
      }

      .direction-principle {
        margin-top: 18px;
        padding: 24px 18px;
      }
    }


    @media (max-width: 639px) {
      .creative-paths-grid .creative-path.is-loop-clone {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto;
      }
    }

    /* Ambient section system */
    #top,
    #bottleneck,
    #creativePaths,
    #projects,
    #fit,
    #services,
    #method,
    #contact {
      isolation: isolate;
    }

    #bottleneck > .site-shell,
    #creativePaths > .site-shell,
    #fit > .site-shell,
    #method > .site-shell {
      position: relative;
      z-index: 1;
    }

    /* HERO — same technical surface language used in Methodology */
    #top {
      background:
        radial-gradient(ellipse 42% 42% at 82% 18%, rgba(207,230,90,.06), transparent 72%),
        linear-gradient(180deg, #0e1114 0%, #101317 100%);
    }

    #top::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 52px 52px;
      background-position: center top;
      opacity: .7;
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.45) 68%, transparent 100%);
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.45) 68%, transparent 100%);
    }

    #top::after {
      content: "";
      position: absolute;
      inset: auto -12% -22% 28%;
      height: 52%;
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(ellipse at center, rgba(207,230,90,.05), transparent 68%);
      filter: blur(18px);
    }

    /* PAIN — quieter, denser atmosphere so the statement carries the section */
    #bottleneck {
      background:
        radial-gradient(ellipse 60% 70% at 18% 34%, rgba(243,245,246,.085), transparent 68%),
        radial-gradient(ellipse 52% 58% at 76% 42%, rgba(207,230,90,.085), transparent 70%),
        radial-gradient(ellipse 34% 40% at 92% 88%, rgba(207,230,90,.04), transparent 72%),
        linear-gradient(180deg, #111519 0%, #14191d 48%, #101316 100%);
    }

    #bottleneck::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,.024) 43%, rgba(207,230,90,.022) 66%, transparent 92%);
      opacity: .9;
    }

    #bottleneck::after {
      content: "";
      position: absolute;
      z-index: 0;
      pointer-events: none;
      width: 520px;
      height: 520px;
      right: -170px;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
      border: 1px solid rgba(207,230,90,.07);
      box-shadow:
        0 0 0 82px rgba(207,230,90,.014),
        0 0 0 164px rgba(255,255,255,.006);
      opacity: .78;
    }

    /* TRANSFORMATION — light progression supporting the four-stage story */
    #creativePaths {
      background:
        radial-gradient(ellipse 48% 46% at 78% 22%, rgba(207,230,90,.09), transparent 68%),
        radial-gradient(ellipse 34% 40% at 16% 82%, rgba(243,245,246,.035), transparent 72%),
        linear-gradient(180deg, #0f1215 0%, #111519 46%, #101316 100%);
    }

    #creativePaths::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg,
          transparent 0%,
          rgba(207,230,90,.022) 24%,
          rgba(207,230,90,.048) 51%,
          rgba(207,230,90,.02) 76%,
          transparent 100%);
    }

    .creative-path {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 28px 80px rgba(0,0,0,.13);
    }

    .creative-path:nth-child(2),
    .creative-path:nth-child(3) {
      border-color: rgba(207,230,90,.09);
    }

    /* PROJECTS — a neutral gallery field so the media reads brighter */
    #projects {
      background:
        radial-gradient(ellipse 46% 34% at 12% 15%, rgba(207,230,90,.045), transparent 70%),
        radial-gradient(ellipse 42% 38% at 92% 76%, rgba(243,245,246,.035), transparent 72%),
        linear-gradient(180deg, #101316 0%, #0f1215 50%, #111417 100%);
    }

    #projects::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(180deg, rgba(255,255,255,.014), transparent 18%, transparent 82%, rgba(255,255,255,.012));
    }

    /* FIT — cleaner chapter, lighter center to support identification */
    #fit {
      background:
        radial-gradient(ellipse 42% 40% at 73% 24%, rgba(207,230,90,.07), transparent 72%),
        radial-gradient(ellipse 34% 42% at 18% 58%, rgba(243,245,246,.028), transparent 74%),
        linear-gradient(180deg, #101316 0%, #121619 50%, #101316 100%);
    }

    #fit::before {
      content: "";
      position: absolute;
      z-index: 0;
      pointer-events: none;
      width: 430px;
      height: 430px;
      left: -150px;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 50%;
      border: 1px solid rgba(207,230,90,.055);
      box-shadow:
        0 0 0 70px rgba(207,230,90,.014),
        0 0 0 140px rgba(255,255,255,.006);
      opacity: .82;
    }

    #fit::after {
      content: "";
      position: absolute;
      z-index: 0;
      pointer-events: none;
      width: min(700px, 58vw);
      height: 220px;
      right: 2%;
      top: 8%;
      border-radius: 50%;
      background: rgba(207,230,90,.048);
      filter: blur(80px);
      opacity: .68;
    }

    .fit-card {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 24px 70px rgba(0,0,0,.12);
    }

    /* SERVICES — focused pools behind the commercial capabilities */
    #services {
      background:
        radial-gradient(ellipse 44% 40% at 18% 28%, rgba(207,230,90,.055), transparent 70%),
        radial-gradient(ellipse 46% 46% at 86% 66%, rgba(243,245,246,.035), transparent 74%),
        linear-gradient(180deg, #101316 0%, #111519 58%, #101316 100%);
    }

    .service-card {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 30px 90px rgba(0,0,0,.14);
    }

    .direction-principle {
      box-shadow:
        0 30px 90px rgba(0,0,0,.16),
        0 0 70px rgba(207,230,90,.035);
    }

    .launch-offer {
      box-shadow:
        0 36px 110px rgba(0,0,0,.24),
        0 0 90px rgba(207,230,90,.075);
    }

    /* METHOD — technical surface: restrained grid + localized light */
    #method {
      background:
        radial-gradient(ellipse 42% 42% at 82% 18%, rgba(207,230,90,.06), transparent 72%),
        linear-gradient(180deg, #0e1114 0%, #101317 100%);
    }

    #method::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 52px 52px;
      background-position: center top;
      opacity: .7;
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.45) 68%, transparent 100%);
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.45) 68%, transparent 100%);
    }

    /* CONTACT — a final spotlight instead of another flat dark field */
    #contact {
      background:
        radial-gradient(ellipse 48% 48% at 50% 55%, rgba(207,230,90,.06), transparent 70%),
        radial-gradient(ellipse 36% 34% at 10% 86%, rgba(243,245,246,.028), transparent 72%),
        linear-gradient(180deg, #101317 0%, #0d1013 100%);
    }

    #contact::before {
      content: "";
      position: absolute;
      inset: 10% 8% auto;
      height: 48%;
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(ellipse at center, rgba(243,245,246,.045), transparent 68%);
      filter: blur(26px);
    }

    /* Gentle chapter separators: visible enough to define rhythm, never decorative noise */
    #bottleneck,
    #creativePaths,
    #projects,
    #fit,
    #services,
    #method,
    #contact {
      box-shadow: inset 0 1px 0 rgba(255,255,255,.018);
    }

    @media (max-width: 639px) {
      #top {
        background:
          radial-gradient(ellipse 78% 38% at 76% 18%, rgba(207,230,90,.055), transparent 72%),
          linear-gradient(180deg, #0e1114 0%, #101317 100%);
      }

      #top::before {
        background-size: 42px 42px;
        opacity: .42;
      }

      #bottleneck {
        background:
          radial-gradient(ellipse 92% 44% at 50% 22%, rgba(243,245,246,.065), transparent 72%),
          radial-gradient(ellipse 88% 40% at 64% 68%, rgba(207,230,90,.055), transparent 74%),
          linear-gradient(180deg, #111519 0%, #12171b 54%, #101316 100%);
      }

      #bottleneck::after {
        display: none;
      }

      #creativePaths {
        background:
          radial-gradient(ellipse 86% 34% at 50% 10%, rgba(207,230,90,.06), transparent 72%),
          #101316;
      }

      #projects,
      #services,
      #contact {
        background: linear-gradient(180deg, #101316 0%, #0f1215 100%);
      }

      #fit {
        background:
          radial-gradient(ellipse 82% 34% at 50% 18%, rgba(207,230,90,.055), transparent 72%),
          linear-gradient(180deg, #101316 0%, #111519 54%, #0f1215 100%);
      }

      #fit::before,
      #fit::after {
        display: none;
      }

      #method::before {
        background-size: 42px 42px;
        opacity: .42;
      }

      #contact::before,
      #top::after {
        filter: none;
      }

      .launch-offer,
      .direction-principle,
      .service-card,
      .fit-card,
      .creative-path {
        box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
      }
    }


    /* Mobile centered editorial system */
    @media (max-width: 639px) {
      main section,
      main section h1,
      main section h2,
      main section h3,
      main section h4,
      main section p,
      main section small,
      main section strong {
        text-align: center;
      }

      /* Hero */
      .hero-copy,
      .hero-summary-card,
      .hero-summary-copy,
      .hero-eyebrow,
      .hero-title-slide {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

      .hero-reveal.flex,
      .hero-proof,
      .hero-actions,
      .hero-summary-head {
        justify-content: center;
      }

      .hero-actions {
        margin-left: auto;
        margin-right: auto;
      }

      .hero-proof {
        align-items: center;
      }

      /* Project chapter */
      #projects .section-reveal,
      #projects .project-intro-card,
      #projects .project-intro-copy,
      #categoryDescription {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

      #projects [role="tablist"],
      .project-category-row,
      .project-info-card .flex-wrap {
        justify-content: center;
      }

      .project-info-card > .flex:first-child {
        flex-direction: column;
        align-items: center;
      }

      .project-info-card > .flex:first-child > div {
        width: 100%;
        text-align: center;
      }

      .project-note {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

      /* Fit / capabilities */
      .fit-head,
      .services-intro,
      .services-copy,
      .service-card-body,
      .service-card-body p {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

      .service-card {
        align-items: center;
      }

      .service-card-top,
      .service-chips {
        width: 100%;
        justify-content: center;
      }

      .service-chips {
        flex-wrap: wrap;
      }

      /* Differentiator + offer */
      .direction-principle,
      .direction-principle > div,
      .direction-principle > p,
      .launch-offer,
      .launch-offer-main,
      .launch-offer-heading,
      .launch-offer-heading > p,
      .launch-offer-action {
        text-align: center;
      }

      .launch-offer-badges,
      .launch-offer-includes {
        justify-content: center;
      }

      .launch-offer-action {
        justify-items: center;
        align-items: center;
      }

      /* Method */
      .method-card,
      .method-copy,
      .method-side,
      .method-side > div,
      .method-result-copy {
        text-align: center;
      }

      .method-topline,
      .method-chip-list,
      .method-result {
        justify-content: center;
      }

      .method-copy > p,
      .method-intro-copy {
        margin-left: auto;
        margin-right: auto;
      }

      .method-result {
        flex-direction: column;
        align-items: center;
        gap: 8px;
      }

      /* Contact */
      #contact .section-reveal,
      #contact .section-reveal > p,
      #contact footer {
        text-align: center;
      }

      .contact-socials {
        margin-left: auto;
        margin-right: auto;
      }

      /* Mobile menu / footer copy */
      #mobileMenu .site-shell {
        text-align: center;
      }

      #mobileMenu a {
        text-align: center;
      }

      /* Keep functional fields and technical canvases readable */
      #contactForm,
      #contactForm input,
      #contactForm textarea,
      #contactForm label,
      .code-canvas,
      .code-canvas * {
        text-align: left;
      }

      #contactForm button,
      #formStatus,
      #formStatus * {
        text-align: center;
      }

      #contactForm button {
        justify-content: center;
        gap: 12px;
      }
    }

  
    /* Mobile hero takeover v2 — stable one-way reveal, no blank travel */
    @media (max-width: 639px) {
      .hero-device-wrap.mobile-takeover-enabled {
        height: 120dvh !important;
        min-height: 120dvh !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-device-stage {
        top: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        width: 100vw !important;
        overflow: hidden !important;
        background: #080a0c !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-shell {
        inset: 10px !important;
        width: auto !important;
        height: auto !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        opacity: .94;
        transform: scale(.985) !important;
        transition:
          inset .26s cubic-bezier(.2,.8,.2,1),
          border-radius .26s cubic-bezier(.2,.8,.2,1),
          transform .26s cubic-bezier(.2,.8,.2,1),
          opacity .2s ease !important;
        will-change: inset, border-radius, transform, opacity;
      }

      .hero-device-wrap.mobile-takeover-enabled.is-revealed .hero-phone-shell {
        inset: 0 !important;
        border-radius: 0 !important;
        opacity: 1;
        transform: scale(1) !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-screen,
      .hero-device-wrap.mobile-takeover-enabled .hero-video {
        width: 100% !important;
        height: 100% !important;
        border-radius: inherit !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-video {
        object-fit: cover !important;
        object-position: center center !important;
      }
    }

  
    /* Hero audio control — desktop + mobile */
    .hero-device-stage {
      position: relative;
    }

    .hero-sound-toggle {
      position: absolute;
      z-index: 60;
      right: 18px;
      bottom: 18px;
      min-height: 42px;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 13px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(8,10,12,.68);
      color: #F3F5F6;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      opacity: 1 !important;
      transform: none !important;
      pointer-events: auto !important;
      cursor: pointer;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: background .2s ease, border-color .2s ease, transform .18s ease !important;
      touch-action: manipulation;
    }

    .hero-sound-toggle:hover {
      background: rgba(18,21,23,.84);
      border-color: rgba(207,230,90,.34);
    }

    .hero-sound-toggle:active {
      transform: scale(.96) !important;
    }

    .hero-sound-toggle.is-audible {
      border-color: rgba(207,230,90,.42);
      background: rgba(21,25,19,.78);
    }

    @media (max-width: 639px) {
      .hero-device-wrap.mobile-takeover-enabled .hero-sound-toggle {
        right: max(14px, env(safe-area-inset-right)) !important;
        bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
      }
    }

  
    /* Hero desktop composition fix — keep audio inside the device */
    @media (min-width: 640px) {
      #top {
        min-height: auto !important;
        padding-bottom: 56px !important;
      }

      .hero-device-stage {
        min-height: 570px !important;
        padding: 24px 20px 38px !important;
      }

      .hero-phone-shell {
        width: min(100%, 268px) !important;
      }

      .hero-phone-screen .hero-sound-toggle {
        right: 10px !important;
        bottom: 10px !important;
        min-height: 36px !important;
        padding: 0 10px !important;
        font-size: 8px !important;
        letter-spacing: .07em !important;
        background: rgba(7,9,11,.64) !important;
        border-color: rgba(255,255,255,.14) !important;
      }

      .hero-phone-screen .hero-sound-toggle .hero-sound-icon svg {
        width: 13px !important;
        height: 13px !important;
      }

      .hero-stage-caption {
        bottom: 10px !important;
        width: calc(100% - 34px) !important;
      }
    }

    @media (min-width: 1024px) {
      .hero-device-stage {
        min-height: 585px !important;
      }

      .hero-phone-shell {
        width: min(100%, 272px) !important;
      }
    }

    @media (max-width: 639px) {
      .hero-device-wrap.mobile-takeover-enabled .hero-phone-screen .hero-sound-toggle {
        right: max(14px, env(safe-area-inset-right)) !important;
        bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)) !important;
      }
    }

  
    /* Higgsfield ambient motion — capability cards */
    .service-card {
      isolation: isolate;
    }

    .service-card-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      opacity: .12;
      pointer-events: none;
      transform: scale(1.035);
      filter: saturate(.78) contrast(1.03) brightness(.82);
      transition: opacity .35s ease, transform .7s var(--ease), filter .35s ease;
    }

    .service-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(180deg, rgba(15,18,21,.34) 0%, rgba(15,18,21,.58) 54%, rgba(15,18,21,.90) 100%),
        radial-gradient(circle at 78% 18%, rgba(207,230,90,.055), transparent 34%);
    }

    .service-card-top,
    .service-card-body,
    .service-chips {
      position: relative;
      z-index: 2;
    }

    .service-card:hover .service-card-media {
      opacity: .19;
      transform: scale(1.065);
      filter: saturate(.88) contrast(1.05) brightness(.88);
    }

    @media (max-width: 639px) {
      .service-card-media {
        opacity: .10;
      }

      .service-card:hover .service-card-media {
        opacity: .12;
        transform: scale(1.04);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .service-card-media {
        display: none !important;
      }
    }

  
    /* Methodology ambient motion — waves / liquid / smoke */
    .method-card {
      isolation: isolate;
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
        rgba(12,14,17,.84);
    }

    .method-card-media {
      position: absolute;
      inset: -4%;
      z-index: 0;
      width: 108%;
      height: 108%;
      object-fit: cover;
      object-position: center;
      opacity: .15;
      pointer-events: none;
      filter: saturate(.72) contrast(1.06) brightness(.78);
      transform: scale(1.02);
      transition: opacity .45s ease, transform 1.2s var(--ease), filter .45s ease;
    }

    .method-card::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(10,12,15,.84) 0%, rgba(10,12,15,.68) 48%, rgba(10,12,15,.78) 100%),
        linear-gradient(180deg, rgba(10,12,15,.12), rgba(10,12,15,.52));
    }

    .method-card::before {
      z-index: 1;
    }

    .method-card > .method-topline,
    .method-card > .method-layout {
      position: relative;
      z-index: 2;
    }

    .method-slide[aria-label="1 de 5"] .method-card-media {
      opacity: .17;
      object-position: 52% center;
    }

    .method-slide[aria-label="2 de 5"] .method-card-media {
      opacity: .18;
      filter: saturate(.78) contrast(1.08) brightness(.82);
    }

    .method-slide[aria-label="3 de 5"] .method-card-media {
      opacity: .13;
      object-position: 60% center;
      transform: scale(1.06) rotate(.2deg);
    }

    .method-slide[aria-label="4 de 5"] .method-card-media {
      opacity: .20;
      filter: saturate(.58) contrast(1.04) brightness(.72);
    }

    .method-slide[aria-label="5 de 5"] .method-card-media {
      opacity: .11;
      filter: saturate(.62) contrast(1.04) brightness(.76);
    }

    .method-slide:hover .method-card-media {
      opacity: .22;
      transform: scale(1.055);
    }

    @media (max-width: 639px) {
      .method-card-media {
        opacity: .10 !important;
      }

      .method-card::after {
        background: linear-gradient(180deg, rgba(10,12,15,.55), rgba(10,12,15,.86));
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .method-card-media {
        display: none !important;
      }
    }

  
    /* Brief transition animation for methodology slides */
    @keyframes methodCopyIn {
      0% { opacity: 0; transform: translateY(12px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes methodSideIn {
      0% { opacity: 0; transform: translateX(12px); }
      100% { opacity: 1; transform: translateX(0); }
    }

    @keyframes methodBgIn {
      0% { opacity: .07; transform: scale(1.075); }
      100% { opacity: var(--method-media-opacity, .15); transform: scale(1.02); }
    }

    .method-slide.is-method-animating .method-topline {
      animation: methodCopyIn .42s cubic-bezier(.22,.8,.26,1) both;
    }

    .method-slide.is-method-animating .method-copy {
      animation: methodCopyIn .48s .05s cubic-bezier(.22,.8,.26,1) both;
    }

    .method-slide.is-method-animating .method-side {
      animation: methodSideIn .48s .09s cubic-bezier(.22,.8,.26,1) both;
    }

    .method-slide.is-method-animating .method-card-media {
      animation: methodBgIn .72s cubic-bezier(.22,.8,.26,1) both;
    }

    .method-slide[aria-label="1 de 5"] { --method-media-opacity: .17; }
    .method-slide[aria-label="2 de 5"] { --method-media-opacity: .18; }
    .method-slide[aria-label="3 de 5"] { --method-media-opacity: .13; }
    .method-slide[aria-label="4 de 5"] { --method-media-opacity: .20; }
    .method-slide[aria-label="5 de 5"] { --method-media-opacity: .11; }

    @media (prefers-reduced-motion: reduce) {
      .method-slide.is-method-animating .method-topline,
      .method-slide.is-method-animating .method-copy,
      .method-slide.is-method-animating .method-side,
      .method-slide.is-method-animating .method-card-media {
        animation: none !important;
      }
    }

  
    /* Methodology visual refinement — localized atmospheric motion */
    #method .method-card::before {
      display: none !important;
    }

    #method .method-card-media {
      inset: -8% -4% -8% auto !important;
      width: 62% !important;
      height: 116% !important;
      object-fit: cover !important;
      object-position: center !important;
      opacity: .10 !important;
      filter: blur(7px) saturate(.62) contrast(1.04) brightness(.72) !important;
      transform: scale(1.06) !important;
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 22%, #000 62%);
      mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 22%, #000 62%);
    }

    #method .method-card::after {
      background:
        linear-gradient(90deg,
          rgba(10,12,15,.96) 0%,
          rgba(10,12,15,.93) 44%,
          rgba(10,12,15,.76) 72%,
          rgba(10,12,15,.66) 100%) !important;
    }

    #method .method-slide[aria-label="1 de 5"] .method-card-media,
    #method .method-slide[aria-label="2 de 5"] .method-card-media,
    #method .method-slide[aria-label="3 de 5"] .method-card-media,
    #method .method-slide[aria-label="4 de 5"] .method-card-media,
    #method .method-slide[aria-label="5 de 5"] .method-card-media {
      opacity: .10 !important;
    }

    #method .method-slide:hover .method-card-media {
      opacity: .13 !important;
      transform: scale(1.075) !important;
    }

    #method .method-progress {
      height: 1px !important;
      background: rgba(255,255,255,.035) !important;
    }

    #method .method-progress > span {
      opacity: .42;
      background: linear-gradient(90deg, rgba(175,198,63,.7), rgba(207,230,90,.82)) !important;
    }

    @keyframes methodBgInRefined {
      0% {
        opacity: .045;
        transform: scale(1.09) translateX(8px);
      }
      100% {
        opacity: .10;
        transform: scale(1.06) translateX(0);
      }
    }

    #method .method-slide.is-method-animating .method-card-media {
      animation: methodBgInRefined .85s cubic-bezier(.22,.8,.26,1) both !important;
    }

    @media (max-width: 639px) {
      #method .method-card-media {
        width: 82% !important;
        opacity: .07 !important;
      }

      #method .method-card::after {
        background:
          linear-gradient(180deg, rgba(10,12,15,.78), rgba(10,12,15,.92)) !important;
      }
    }

  
    /* Final proposal atmospheric motion */
    .contact-proposal-card {
      isolation: isolate;
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
        rgba(10,12,15,.84);
    }

    .contact-proposal-media {
      position: absolute;
      inset: -10% -4% -10% auto;
      z-index: 0;
      width: 58%;
      height: 120%;
      object-fit: cover;
      object-position: center;
      opacity: .10;
      pointer-events: none;
      filter: blur(8px) saturate(.58) contrast(1.03) brightness(.70);
      transform: scale(1.07);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.24) 20%, #000 62%);
      mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.24) 20%, #000 62%);
      transition: opacity .45s ease, transform 1s var(--ease);
    }

    .contact-proposal-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(90deg,
          rgba(9,11,14,.96) 0%,
          rgba(9,11,14,.90) 46%,
          rgba(9,11,14,.72) 74%,
          rgba(9,11,14,.66) 100%),
        radial-gradient(circle at 88% 16%, rgba(207,230,90,.055), transparent 30%);
    }

    .contact-proposal-card:hover .contact-proposal-media {
      opacity: .13;
      transform: scale(1.085);
    }

    @keyframes contactProposalAmbientIn {
      0% {
        opacity: .035;
        transform: scale(1.10) translateX(10px);
      }
      100% {
        opacity: .10;
        transform: scale(1.07) translateX(0);
      }
    }

    .contact-proposal-card.is-contact-ambient-active .contact-proposal-media {
      animation: contactProposalAmbientIn .9s cubic-bezier(.22,.8,.26,1) both;
    }

    @media (max-width: 639px) {
      .contact-proposal-media {
        width: 82%;
        opacity: .065;
      }

      .contact-proposal-overlay {
        background:
          linear-gradient(180deg, rgba(9,11,14,.78), rgba(9,11,14,.93));
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .contact-proposal-media {
        display: none !important;
      }
    }

  
    /* Hero editorial title composition */
    .hero-title-composition {
      position: relative;
      width: min(100%, 860px);
      margin-top: 2px;
      padding-top: 22px;
      isolation: isolate;
    }

    .hero-title-code {
      position: absolute;
      top: 0;
      right: 1px;
      color: rgba(207,230,90,.72);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: .20em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .hero-title-slide {
      position: relative;
      z-index: 2;
      max-width: none !important;
      overflow: visible;
      text-wrap: initial;
    }

    .hero-title-slide .hero-line {
      display: block;
      overflow: visible;
    }

    .hero-line-intro {
      width: fit-content;
      margin-bottom: .05em;
      color: #8C929A;
      font-size: .43em;
      font-weight: 550;
      line-height: 1;
      letter-spacing: -.025em;
    }

    .hero-line-main {
      position: relative;
      width: fit-content;
      font-size: 1.04em;
      line-height: .82;
      letter-spacing: -.072em;
    }

    .hero-main-copy,
    .hero-product-word {
      display: block;
    }

    .hero-main-copy {
      color: #F5F6F7;
      white-space: nowrap;
    }

    .hero-product-word {
      position: relative;
      width: fit-content;
      margin-top: .03em;
      color: transparent;
      -webkit-text-stroke: 1.4px rgba(245,246,247,.84);
      text-stroke: 1.4px rgba(245,246,247,.84);
      white-space: nowrap;
    }

    .hero-product-word::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: .04em;
      right: -.04em;
      bottom: .08em;
      height: .11em;
      background: rgba(207,230,90,.82);
      transform: scaleX(.54);
      transform-origin: left center;
      opacity: .82;
    }

    .hero-line-close {
      display: grid !important;
      grid-template-columns: max-content max-content;
      justify-content: end;
      align-items: baseline;
      gap: .22em;
      width: min(100%, 760px);
      margin-top: .28em;
      padding-right: .02em;
      color: #A0A6AD;
      font-size: .30em;
      font-weight: 550;
      line-height: 1.15;
      letter-spacing: -.018em;
    }

    .hero-line-close-accent {
      color: #F1F3F4;
      font-weight: 650;
    }

    .hero-title-rule {
      display: grid;
      grid-template-columns: minmax(80px,1fr) auto;
      align-items: center;
      gap: 13px;
      width: min(100%, 690px);
      margin-top: 18px;
    }

    .hero-title-rule > span {
      height: 1px;
      background:
        linear-gradient(90deg,
          rgba(207,230,90,.85) 0 18%,
          rgba(255,255,255,.13) 18% 100%);
    }

    .hero-title-rule small {
      color: #656B72;
      font-size: 7px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    @media (min-width: 768px) {
      .hero-title-composition {
        width: min(112%, 900px);
        padding-top: 25px;
      }

      .hero-title-slide {
        font-size: clamp(4.6rem, 7.35vw, 7.1rem) !important;
        line-height: .88 !important;
        letter-spacing: -.06em !important;
      }

      .hero-title-code {
        right: 4%;
        font-size: 8.5px;
      }

      .hero-line-intro {
        font-size: .34em;
      }

      .hero-line-main {
        font-size: 1em;
      }

      .hero-line-close {
        width: min(94%, 760px);
        font-size: .235em;
      }
    }

    @media (min-width: 1024px) {
      .hero-title-composition {
        width: 118%;
        margin-right: -18%;
      }

      .hero-title-slide {
        font-size: clamp(4.45rem, 6.6vw, 6.9rem) !important;
      }

      .hero-product-word::after {
        transform: scaleX(.62);
      }
    }

    @media (max-width: 639px) {
      .hero-title-composition {
        width: 100%;
        margin-inline: auto;
        padding-top: 20px;
      }

      .hero-title-code {
        position: static;
        display: block;
        margin: 0 auto 11px;
        text-align: center;
        font-size: 7px;
      }

      .hero-title-slide {
        width: 100%;
        font-size: clamp(2.62rem, 12.2vw, 3.48rem) !important;
        line-height: .90 !important;
        letter-spacing: -.055em !important;
        text-align: center !important;
      }

      .hero-line-intro {
        margin: 0 auto .16em;
        font-size: .40em;
        text-align: center;
      }

      .hero-line-main {
        width: 100%;
        margin-inline: auto;
      }

      .hero-main-copy,
      .hero-product-word {
        width: fit-content;
        margin-inline: auto;
      }

      .hero-product-word {
        -webkit-text-stroke-width: 1px;
        text-stroke-width: 1px;
      }

      .hero-product-word::after {
        left: 8%;
        right: 8%;
        transform: scaleX(.66);
        transform-origin: center center;
      }

      .hero-line-close {
        display: block !important;
        width: 100%;
        margin-top: .55em;
        padding: 0;
        font-size: .34em;
        line-height: 1.35;
        text-align: center;
      }

      .hero-line-close > span {
        display: inline;
      }

      .hero-line-close-accent {
        margin-left: .20em;
      }

      .hero-title-rule {
        grid-template-columns: 1fr;
        gap: 9px;
        width: 72%;
        margin: 16px auto 0;
      }

      .hero-title-rule small {
        text-align: center;
        white-space: normal;
      }
    }

    @media (max-width: 360px) {
      .hero-title-slide {
        font-size: 2.48rem !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-product-word::after {
        transform: scaleX(.62) !important;
      }
    }

  
    /* Hero title v2 — minimal premium composition */
    .hero-title-premium {
      position: relative;
      width: min(100%, 820px);
      margin-top: 2px;
      padding-bottom: 18px;
    }

    .hero-title-premium .hero-title-slide {
      max-width: none !important;
      margin: 0 !important;
      overflow: visible !important;
      text-wrap: initial !important;
    }

    .hero-premium-intro,
    .hero-premium-main,
    .hero-premium-close {
      display: block;
    }

    .hero-premium-intro {
      margin-bottom: .18em;
      color: #858B92;
      font-size: .34em;
      font-weight: 550;
      line-height: 1;
      letter-spacing: -.02em;
    }

    .hero-premium-main {
      max-width: 760px;
      color: #F5F6F7;
      font-size: 1em;
      line-height: .90;
      letter-spacing: -.064em;
    }

    .hero-premium-accent {
      position: relative;
      display: inline-block;
      color: #F5F6F7;
      z-index: 1;
    }

    .hero-premium-accent::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: .03em;
      right: -.03em;
      bottom: .04em;
      height: .075em;
      border-radius: 999px;
      background: rgba(207,230,90,.90);
      transform-origin: left center;
    }

    .hero-premium-close {
      width: fit-content;
      margin-top: .42em;
      margin-left: auto;
      padding-right: .04em;
      color: #92989F;
      font-size: .27em;
      font-weight: 520;
      line-height: 1.2;
      letter-spacing: -.015em;
    }

    .hero-premium-rule {
      display: block;
      width: min(100%, 620px);
      height: 1px;
      margin-top: 18px;
      background:
        linear-gradient(90deg,
          rgba(207,230,90,.72) 0 12%,
          rgba(255,255,255,.10) 12% 100%);
    }

    /* Neutralize previous title experiment */
    .hero-title-code,
    .hero-title-rule {
      display: none !important;
    }

    @media (min-width: 768px) {
      .hero-title-premium {
        width: min(110%, 860px);
      }

      .hero-title-premium .hero-title-slide {
        font-size: clamp(4.45rem, 7.25vw, 6.95rem) !important;
        line-height: .92 !important;
        letter-spacing: -.06em !important;
      }

      .hero-premium-intro {
        font-size: .30em;
      }

      .hero-premium-close {
        font-size: .22em;
      }
    }

    @media (min-width: 1024px) {
      .hero-title-premium {
        width: 112%;
        margin-right: -12%;
      }

      .hero-premium-main {
        max-width: 790px;
      }
    }

    @media (max-width: 639px) {
      .hero-title-premium {
        width: 100%;
        margin-inline: auto;
        padding-bottom: 14px;
      }

      .hero-title-premium .hero-title-slide {
        font-size: clamp(2.55rem, 11.7vw, 3.3rem) !important;
        line-height: .94 !important;
        letter-spacing: -.052em !important;
        text-align: center !important;
      }

      .hero-premium-intro {
        margin-bottom: .24em;
        font-size: .38em;
        text-align: center;
      }

      .hero-premium-main {
        max-width: 100%;
        line-height: .94;
        text-align: center;
      }

      .hero-premium-close {
        margin: .52em auto 0;
        padding: 0;
        font-size: .34em;
        line-height: 1.35;
        text-align: center;
      }

      .hero-premium-rule {
        width: 72%;
        margin: 16px auto 0;
      }

      .hero-premium-accent::after {
        left: 6%;
        right: 6%;
      }
    }

  
    /* Hero title v2.1 — separate product line + refined letter edging */
    .hero-premium-main-line,
    .hero-premium-product {
      display: block;
      width: fit-content;
      color: #F5F6F7;
      -webkit-text-stroke: .7px rgba(255,255,255,.24);
      text-stroke: .7px rgba(255,255,255,.24);
      paint-order: stroke fill;
      text-shadow:
        0 1px 0 rgba(255,255,255,.035),
        0 0 1px rgba(255,255,255,.16);
    }

    .hero-premium-product {
      position: relative;
      margin-top: .035em;
      font-size: 1.08em;
      line-height: .86;
      letter-spacing: -.072em;
    }

    .hero-premium-product::after {
      left: .025em;
      right: -.02em;
      bottom: .035em;
      height: .07em;
    }

    @media (max-width: 639px) {
      .hero-premium-main-line,
      .hero-premium-product {
        margin-left: auto;
        margin-right: auto;
        -webkit-text-stroke-width: .55px;
        text-stroke-width: .55px;
      }

      .hero-premium-product {
        margin-top: .08em;
        font-size: 1.06em;
      }
    }

  
    /* Hero title final — hard separated lines */
    #top .hero-title-final {
      position: relative;
      width: min(100%, 820px);
      margin-top: 2px;
      padding-bottom: 18px;
    }

    #top .hero-title-final .hero-title-slide {
      display: block !important;
      max-width: none !important;
      margin: 0 !important;
      overflow: visible !important;
      line-height: 1 !important;
      letter-spacing: 0 !important;
      text-wrap: initial !important;
    }

    #top .hero-final-intro,
    #top .hero-final-main,
    #top .hero-final-product,
    #top .hero-final-close {
      display: block !important;
      width: fit-content !important;
      float: none !important;
      clear: both !important;
    }

    #top .hero-final-intro {
      margin: 0 0 .30em 0 !important;
      color: #858B92 !important;
      font-size: clamp(1.35rem, 2.1vw, 1.85rem) !important;
      font-weight: 550 !important;
      line-height: 1 !important;
      letter-spacing: -.035em !important;
    }

    #top .hero-final-main,
    #top .hero-final-product {
      color: #F7F8F8 !important;
      font-weight: 650 !important;
      line-height: .84 !important;
      letter-spacing: -.075em !important;
      -webkit-text-stroke: 1px rgba(168,176,184,.58) !important;
      paint-order: stroke fill !important;
      text-shadow:
        0 1px 0 rgba(255,255,255,.04),
        0 0 16px rgba(255,255,255,.025) !important;
    }

    #top .hero-final-main {
      font-size: clamp(4.5rem, 7vw, 6.85rem) !important;
      margin: 0 !important;
    }

    #top .hero-final-product {
      position: relative;
      font-size: clamp(4.95rem, 7.6vw, 7.5rem) !important;
      margin: .07em 0 0 0 !important;
      -webkit-text-stroke: 1px rgba(207,230,90,.58) !important;
    }

    #top .hero-final-product::after {
      content: "";
      position: absolute;
      left: .03em;
      right: -.02em;
      bottom: .045em;
      height: .055em;
      border-radius: 999px;
      background: rgba(207,230,90,.82);
      pointer-events: none;
    }

    #top .hero-final-close {
      margin: .72em 0 0 auto !important;
      color: #92989F !important;
      font-size: clamp(.95rem, 1.5vw, 1.2rem) !important;
      font-weight: 520 !important;
      line-height: 1.2 !important;
      letter-spacing: -.02em !important;
    }

    #top .hero-final-rule {
      display: block;
      width: min(100%, 610px);
      height: 1px;
      margin-top: 18px;
      background: linear-gradient(90deg, rgba(207,230,90,.72) 0 14%, rgba(255,255,255,.10) 14% 100%);
    }

    @media (max-width: 639px) {
      #top .hero-title-final {
        width: 100%;
        margin-inline: auto;
        padding-bottom: 14px;
      }

      #top .hero-final-intro,
      #top .hero-final-main,
      #top .hero-final-product,
      #top .hero-final-close {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
      }

      #top .hero-final-intro {
        font-size: 1.05rem !important;
        margin-bottom: .45em !important;
      }

      #top .hero-final-main {
        font-size: clamp(2.7rem, 12.5vw, 3.55rem) !important;
        line-height: .88 !important;
      }

      #top .hero-final-product {
        font-size: clamp(3.0rem, 13.6vw, 3.88rem) !important;
        margin-top: .12em !important;
        line-height: .86 !important;
      }

      #top .hero-final-main,
      #top .hero-final-product {
        -webkit-text-stroke-width: .8px !important;
      }

      #top .hero-final-close {
        margin-top: .85em !important;
        font-size: .98rem !important;
      }

      #top .hero-final-rule {
        width: 72%;
        margin: 16px auto 0;
      }
    }

  
    @media (min-width: 640px) {
      #heroSoundToggle {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 80 !important;
      }
    }

  
    /* Hero title clean system */
    #top .hero-title-clean {
      position: relative;
      width: min(100%, 780px);
      margin-top: 4px;
      padding-bottom: 14px;
    }

    #top .hero-title-clean .hero-title-slide {
      display: block !important;
      max-width: none !important;
      margin: 0 !important;
      overflow: visible !important;
      text-wrap: initial !important;
    }

    #top .hero-clean-intro,
    #top .hero-clean-main,
    #top .hero-clean-product {
      display: block !important;
      width: fit-content !important;
      float: none !important;
      clear: both !important;
    }

    #top .hero-clean-intro {
      margin: 0 0 14px 0 !important;
      color: #8C9299 !important;
      font-size: clamp(1.1rem, 1.85vw, 1.55rem) !important;
      font-weight: 560 !important;
      line-height: 1.05 !important;
      letter-spacing: -.03em !important;
    }

    #top .hero-clean-main,
    #top .hero-clean-product {
      color: #F6F7F8 !important;
      font-weight: 650 !important;
      line-height: .90 !important;
      letter-spacing: -.062em !important;
      -webkit-text-stroke: .55px rgba(160,168,176,.44) !important;
      paint-order: stroke fill !important;
      text-shadow: 0 1px 0 rgba(255,255,255,.025) !important;
    }

    #top .hero-clean-main {
      margin: 0 !important;
      font-size: clamp(4.15rem, 6.5vw, 6.25rem) !important;
    }

    #top .hero-clean-product {
      position: relative;
      margin: 4px 0 0 0 !important;
      font-size: clamp(4.55rem, 7.05vw, 6.85rem) !important;
      -webkit-text-stroke-color: rgba(188,196,202,.48) !important;
    }

    #top .hero-clean-product::after {
      content: "";
      position: absolute;
      left: .02em;
      right: -.01em;
      bottom: .035em;
      height: 4px;
      border-radius: 999px;
      background: rgba(207,230,90,.86);
      pointer-events: none;
    }

    #top .hero-clean-subline {
      width: fit-content;
      margin: 20px 0 0 auto;
      color: #9AA0A6;
      font-size: clamp(.95rem, 1.4vw, 1.1rem);
      font-weight: 520;
      line-height: 1.4;
      letter-spacing: -.018em;
    }

    #top .hero-clean-rule {
      display: block;
      width: min(100%, 600px);
      height: 1px;
      margin-top: 16px;
      background:
        linear-gradient(90deg,
          rgba(207,230,90,.60) 0 11%,
          rgba(255,255,255,.085) 11% 100%);
    }

    @media (max-width: 639px) {
      #top .hero-title-clean {
        width: 100%;
        margin-inline: auto;
        padding-bottom: 10px;
      }

      #top .hero-clean-intro,
      #top .hero-clean-main,
      #top .hero-clean-product {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
      }

      #top .hero-clean-intro {
        margin-bottom: 10px !important;
        font-size: 1rem !important;
      }

      #top .hero-clean-main {
        font-size: clamp(2.55rem, 11.8vw, 3.35rem) !important;
        line-height: .92 !important;
      }

      #top .hero-clean-product {
        margin-top: 5px !important;
        font-size: clamp(2.85rem, 12.8vw, 3.72rem) !important;
        line-height: .90 !important;
      }

      #top .hero-clean-main,
      #top .hero-clean-product {
        -webkit-text-stroke-width: .45px !important;
      }

      #top .hero-clean-product::after {
        left: 8%;
        right: 8%;
        bottom: .02em;
        height: 3px;
      }

      #top .hero-clean-subline {
        margin: 18px auto 0;
        font-size: .95rem;
        text-align: center;
      }

      #top .hero-clean-rule {
        width: 70%;
        margin: 14px auto 0;
      }
    }

  
    /* Hero native audio — desktop hard override */
    @media (min-width: 640px) {
      #heroPhone .hero-phone-screen {
        position: absolute !important;
        inset: 7px !important;
        overflow: hidden !important;
      }

      #heroPhone .hero-video {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1 !important;
      }

      #heroPhone #heroSoundToggle {
        position: absolute !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 999 !important;
        right: 10px !important;
        bottom: 10px !important;
        cursor: pointer !important;
      }

      #heroPhone #heroSoundToggle * {
        pointer-events: none !important;
      }
    }
    /* Hero audio split — mobile native / desktop isolated */
    .hero-sound-toggle-desktop {
      display: none !important;
    }

    @media (min-width: 640px) {
      #heroSoundToggle {
        display: none !important;
      }

      #heroPhone #heroSoundToggleDesktop {
        position: absolute !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 999 !important;
        right: 10px !important;
        bottom: 10px !important;
        min-height: 36px !important;
        padding: 0 10px !important;
        cursor: pointer !important;
      }

      #heroPhone #heroSoundToggleDesktop * {
        pointer-events: none !important;
      }
    }

    @media (max-width: 639px) {
      #heroSoundToggleDesktop {
        display: none !important;
      }
    }

  
    /* Desktop hero sound hit-area fix: button lives above the screen layer */
    @media (min-width: 640px) {
      #heroPhone {
        position: relative !important;
      }

      #heroPhone > #heroSoundToggleDesktop {
        position: absolute !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 50 !important;
        right: 17px !important;
        bottom: 17px !important;
        min-height: 36px !important;
        padding: 0 10px !important;
        cursor: pointer !important;
      }

      #heroPhone > #heroSoundToggleDesktop * {
        pointer-events: none !important;
      }
    }

  
    /* Final desktop sound hit target */
    @media (min-width: 640px) {
      #heroPhone > #heroSoundToggleDesktop {
        pointer-events: auto !important;
        touch-action: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
      }
    }

  
    /* Hero sound cleanup — keep only working desktop control */
    @media (min-width: 640px) {
      #heroPhone .hero-phone-screen > #heroSoundToggle,
      #heroPhone .hero-phone-screen > .hero-sound-toggle-mobile,
      #heroPhone .hero-phone-screen > .video-tap-fallback {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }

      #heroPhone > #heroSoundToggleDesktop {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
      }
    }

    @media (max-width: 639px) {
      #heroPhone > #heroSoundToggleDesktop {
        display: none !important;
      }
    }

  
    /* Hero lockup pro — editorial campaign direction */
    #top .hero-lockup-pro {
      position: relative;
      width: min(100%, 820px);
      padding: 4px 0 20px;
    }

    #top .hero-lockup-meta {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 18px;
      color: #7E858D;
      font-size: 9px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: .17em;
      text-transform: uppercase;
    }

    #top .hero-lockup-meta i {
      width: 3px;
      height: 3px;
      border-radius: 999px;
      background: rgba(207,230,90,.78);
      box-shadow: 0 0 10px rgba(207,230,90,.18);
    }

    #top .hero-lockup-title {
      display: block !important;
      max-width: none !important;
      margin: 0 !important;
      overflow: visible !important;
      text-wrap: initial !important;
    }

    #top .hero-lockup-main,
    #top .hero-lockup-product {
      display: block !important;
      width: fit-content !important;
    }

    #top .hero-lockup-main {
      max-width: 780px;
      color: #F5F6F7;
      font-size: clamp(3.55rem, 5.55vw, 5.45rem);
      font-weight: 610;
      line-height: .94;
      letter-spacing: -.062em;
      -webkit-text-stroke: .45px rgba(255,255,255,.12);
      paint-order: stroke fill;
    }

    #top .hero-lockup-product {
      position: relative;
      isolation: isolate;
      margin-top: .08em;
      color: #F8F9F9;
      font-size: clamp(5rem, 8vw, 7.7rem);
      font-weight: 680;
      line-height: .82;
      letter-spacing: -.082em;
      -webkit-text-stroke: .7px rgba(173,181,188,.46);
      paint-order: stroke fill;
      text-shadow:
        0 1px 0 rgba(255,255,255,.04),
        0 12px 48px rgba(0,0,0,.22);
    }

    #top .hero-lockup-product::before {
      content: "";
      position: absolute;
      z-index: -1;
      left: -.025em;
      bottom: .035em;
      width: 36%;
      height: .16em;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(207,230,90,.95), rgba(207,230,90,.62));
      box-shadow: 0 0 28px rgba(207,230,90,.07);
      transform: rotate(-.8deg);
      transform-origin: left center;
    }

    #top .hero-lockup-product::after {
      content: "";
      position: absolute;
      left: calc(36% + .055em);
      right: 0;
      bottom: .102em;
      height: 1px;
      background: linear-gradient(90deg, rgba(255,255,255,.13), rgba(255,255,255,0));
      pointer-events: none;
    }

    #top .hero-lockup-footer {
      width: fit-content;
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 24px;
      padding: 0 14px;
      border: 1px solid rgba(255,255,255,.085);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
        rgba(12,14,16,.38);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 12px 34px rgba(0,0,0,.12);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    #top .hero-lockup-dot {
      width: 6px;
      height: 6px;
      flex: 0 0 auto;
      border-radius: 999px;
      background: #CFE65A;
      box-shadow: 0 0 0 5px rgba(207,230,90,.055), 0 0 18px rgba(207,230,90,.16);
    }

    #top .hero-lockup-footer p {
      margin: 0;
      color: #B3B8BE;
      font-size: 11px;
      font-weight: 570;
      line-height: 1;
      letter-spacing: .015em;
    }

    @media (min-width: 1024px) {
      #top .hero-lockup-pro {
        width: min(112%, 860px);
        margin-right: -12%;
      }
    }

    @media (max-width: 639px) {
      #top .hero-lockup-pro {
        width: 100%;
        padding-bottom: 12px;
        text-align: center;
      }

      #top .hero-lockup-meta {
        justify-content: center;
        margin-bottom: 14px;
        font-size: 8px;
        letter-spacing: .145em;
      }

      #top .hero-lockup-main,
      #top .hero-lockup-product {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

      #top .hero-lockup-main {
        max-width: 100%;
        font-size: clamp(2.55rem, 11.4vw, 3.35rem);
        line-height: .96;
        letter-spacing: -.055em;
      }

      #top .hero-lockup-product {
        margin-top: .13em;
        font-size: clamp(3.45rem, 15.8vw, 4.75rem);
        line-height: .86;
        letter-spacing: -.075em;
        -webkit-text-stroke-width: .5px;
      }

      #top .hero-lockup-product::before {
        left: 8%;
        width: 32%;
        height: .14em;
      }

      #top .hero-lockup-product::after {
        left: 42%;
        right: 8%;
      }

      #top .hero-lockup-footer {
        margin-top: 20px;
        margin-inline: auto;
        min-height: 36px;
        padding-inline: 13px;
      }

      #top .hero-lockup-footer p {
        font-size: 10px;
      }
    }

  
    /* Hero lockup pro refinement — tighter, cleaner */
    #top .hero-lockup-product::before {
      left: .015em !important;
      bottom: -.055em !important;
      width: 18% !important;
      height: 2px !important;
      border-radius: 999px !important;
      background: rgba(207,230,90,.86) !important;
      box-shadow: none !important;
      transform: none !important;
    }

    #top .hero-lockup-product::after {
      display: none !important;
    }

    #top .hero-lockup-footer {
      min-height: 0 !important;
      margin-top: 22px !important;
      margin-left: clamp(90px, 14vw, 190px) !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      gap: 8px !important;
    }

    #top .hero-lockup-dot {
      width: 5px !important;
      height: 5px !important;
      box-shadow: none !important;
      background: rgba(207,230,90,.88) !important;
    }

    #top .hero-lockup-footer p {
      color: #9EA4AB !important;
      font-size: clamp(.92rem, 1.25vw, 1.05rem) !important;
      font-weight: 520 !important;
      line-height: 1.25 !important;
      letter-spacing: -.015em !important;
    }

    @media (max-width: 639px) {
      #top .hero-lockup-product::before {
        left: 14% !important;
        width: 16% !important;
        bottom: -.07em !important;
      }

      #top .hero-lockup-footer {
        margin-top: 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        justify-content: center !important;
      }

      #top .hero-lockup-footer p {
        font-size: .92rem !important;
      }
    }

  
    /* Pipeline 08 — neon autoplay system */
    .funnel-shell-pro {
      position: relative !important;
      isolation: isolate;
      overflow: hidden;
      padding-top: 58px !important;
      background:
        radial-gradient(circle at 18% 36%, rgba(207,230,90,.11), transparent 32%),
        linear-gradient(180deg, rgba(7,9,11,.74), rgba(7,9,11,.92)) !important;
    }

    .funnel-ambient-media {
      position: absolute;
      inset: -4%;
      z-index: 0;
      width: 108%;
      height: 108%;
      object-fit: cover;
      object-position: center;
      opacity: .14;
      pointer-events: none;
      filter: saturate(.55) contrast(1.10) brightness(.52);
      transform: scale(1.035);
      transition: opacity .45s ease, transform 5s ease;
    }

    .funnel-shell-pro.is-auto-running .funnel-ambient-media {
      opacity: .18;
      transform: scale(1.075);
    }

    .funnel-ambient-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(6,8,10,.86) 0%, rgba(6,8,10,.60) 48%, rgba(6,8,10,.82) 100%),
        radial-gradient(circle at 70% 48%, rgba(207,230,90,.085), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.20));
    }

    .funnel-statusbar {
      position: absolute;
      z-index: 3;
      top: 16px;
      left: 20px;
      right: 20px;
      display: grid;
      grid-template-columns: max-content 1fr max-content;
      align-items: center;
      gap: 12px;
      pointer-events: none;
    }

    .funnel-status-label,
    .funnel-status-count {
      color: #8D949D;
      font-size: 8px;
      font-weight: 750;
      line-height: 1;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .funnel-status-count {
      color: rgba(207,230,90,.78);
      font-variant-numeric: tabular-nums;
    }

    .funnel-status-line {
      position: relative;
      height: 1px;
      overflow: hidden;
      background: rgba(255,255,255,.09);
    }

    .funnel-status-line > i {
      position: absolute;
      inset: 0 auto 0 0;
      width: 0;
      background: linear-gradient(90deg, rgba(207,230,90,.48), #CFE65A);
      box-shadow: 0 0 12px rgba(207,230,90,.38);
    }

    .funnel-shell-pro.is-auto-running .funnel-status-line > i {
      animation: funnelAutoProgress 3.4s linear forwards;
    }

    @keyframes funnelAutoProgress {
      from { width: 0; }
      to { width: 100%; }
    }

    .funnel-shell-pro .funnel-stack,
    .funnel-shell-pro .funnel-detail {
      position: relative;
      z-index: 2;
    }

    .funnel-shell-pro .funnel-step {
      border-color: rgba(255,255,255,.085);
      background:
        linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018)),
        rgba(6,8,10,.34);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .funnel-shell-pro .funnel-step::after {
      content: "";
      position: absolute;
      left: 10px;
      top: 50%;
      width: 4px;
      height: 4px;
      border-radius: 999px;
      background: #CFE65A;
      opacity: 0;
      transform: translateY(-50%) scale(.4);
      box-shadow:
        0 0 0 0 rgba(207,230,90,.18),
        0 0 0 rgba(207,230,90,0);
      transition: opacity .24s ease, transform .24s ease, box-shadow .24s ease;
    }

    .funnel-shell-pro .funnel-step.is-active {
      border-color: rgba(207,230,90,.62) !important;
      background:
        linear-gradient(90deg, rgba(207,230,90,.14), rgba(207,230,90,.045) 48%, rgba(255,255,255,.025)),
        rgba(8,11,9,.68) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.055),
        0 0 0 1px rgba(207,230,90,.07),
        0 0 26px rgba(207,230,90,.15),
        0 12px 28px rgba(0,0,0,.24) !important;
    }

    .funnel-shell-pro .funnel-step.is-active::after {
      opacity: 1;
      transform: translateY(-50%) scale(1);
      box-shadow:
        0 0 0 5px rgba(207,230,90,.075),
        0 0 16px rgba(207,230,90,.62);
    }

    .funnel-shell-pro .funnel-step.is-active .funnel-step-number {
      color: #CFE65A;
      text-shadow: 0 0 14px rgba(207,230,90,.32);
    }

    .funnel-shell-pro .funnel-step.is-active .funnel-step-title {
      color: #F8FAF2;
      text-shadow: 0 0 18px rgba(207,230,90,.12);
    }

    .funnel-shell-pro .funnel-detail {
      border-color: rgba(207,230,90,.14);
      background:
        radial-gradient(circle at 85% 12%, rgba(207,230,90,.14), transparent 34%),
        linear-gradient(180deg, rgba(16,20,16,.72), rgba(9,11,10,.66));
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 0 42px rgba(207,230,90,.055),
        0 20px 48px rgba(0,0,0,.22);
    }

    .funnel-shell-pro .funnel-detail.is-funnel-animating .funnel-detail-title,
    .funnel-shell-pro .funnel-detail.is-funnel-animating .funnel-detail-copy,
    .funnel-shell-pro .funnel-detail.is-funnel-animating .funnel-detail-output {
      animation: funnelDetailIn .42s var(--ease) both;
    }

    .funnel-shell-pro .funnel-detail.is-funnel-animating .funnel-detail-copy {
      animation-delay: .045s;
    }

    .funnel-shell-pro .funnel-detail.is-funnel-animating .funnel-detail-output {
      animation-delay: .085s;
    }

    @keyframes funnelDetailIn {
      from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
      to { opacity: 1; transform: translateY(0); filter: blur(0); }
    }

    .funnel-shell-pro .funnel-detail-title {
      font-size: clamp(1.5rem, 2.4vw, 2.15rem);
    }

    .funnel-shell-pro .funnel-detail-output strong {
      text-shadow: 0 0 18px rgba(207,230,90,.16);
    }

    @media (max-width: 639px) {
      .funnel-shell-pro {
        padding: 54px 12px 16px !important;
        gap: 14px !important;
      }

      .funnel-ambient-media {
        opacity: .10;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: none;
      }

      .funnel-shell-pro.is-auto-running .funnel-ambient-media {
        opacity: .13;
        transform: none;
      }

      .funnel-statusbar {
        top: 15px;
        left: 14px;
        right: 14px;
        gap: 8px;
      }

      .funnel-status-label {
        font-size: 7px;
      }

      .funnel-status-count {
        font-size: 7.5px;
      }

      .funnel-shell-pro .funnel-stack {
        align-items: stretch;
        gap: 7px;
      }

      .funnel-shell-pro .funnel-step,
      .funnel-shell-pro .funnel-step:nth-child(n) {
        width: 100% !important;
        min-height: 46px;
        grid-template-columns: 34px minmax(0,1fr);
        text-align: left;
      }

      .funnel-shell-pro .funnel-step.is-active {
        transform: translateX(3px) !important;
      }

      .funnel-shell-pro .funnel-detail {
        min-height: 190px;
        margin-top: 2px;
        padding: 18px;
      }

      .funnel-shell-pro .funnel-detail-title {
        font-size: 1.75rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .funnel-ambient-media {
        display: none !important;
      }

      .funnel-status-line > i,
      .funnel-detail-title,
      .funnel-detail-copy,
      .funnel-detail-output {
        animation: none !important;
        transition: none !important;
      }
    }

  
    /* Workflow code — one-shot desktop typewriter */
    @media (min-width: 768px) {
      #workflowCodeCanvas.workflow-code-armed .code-line > span:last-child {
        display: inline-block;
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        opacity: 0;
        vertical-align: bottom;
      }

      #workflowCodeCanvas.workflow-code-armed .code-line.is-typed > span:last-child,
      #workflowCodeCanvas.workflow-code-armed .code-line.is-typing > span:last-child {
        opacity: 1;
      }

      #workflowCodeCanvas.workflow-code-armed .code-line.is-typing > span:last-child {
        border-right: 1px solid rgba(207,230,90,.92);
        box-shadow: 1px 0 0 rgba(207,230,90,.16);
      }

      #workflowCodeCanvas.workflow-code-complete .code-line > span:last-child {
        max-width: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        border-right: 0 !important;
      }
    }

    @media (max-width: 767px), (prefers-reduced-motion: reduce) {
      #workflowCodeCanvas .code-line > span:last-child {
        max-width: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        border-right: 0 !important;
      }
    }

  
    /* Multiformato — ambient campaign motion, layout-safe */
    .pricing-pack-featured {
      position: relative;
      isolation: isolate;
      overflow: hidden;
    }

    .pricing-pack-media {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 58%;
      object-fit: cover;
      object-position: 50% 34%;
      opacity: .10;
      pointer-events: none;
      filter: saturate(.62) contrast(1.05) brightness(.55);
      transform: scale(1.025);
      transform-origin: center top;
      transition:
        opacity .45s ease,
        transform 1.1s var(--ease),
        filter .45s ease;
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
    }

    .pricing-pack-featured::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        radial-gradient(circle at 78% 10%, rgba(207,230,90,.085), transparent 31%),
        linear-gradient(180deg, rgba(12,15,17,.28) 0%, rgba(12,15,17,.64) 42%, rgba(15,18,21,.94) 72%, rgba(15,18,21,.98) 100%);
    }

    .pricing-pack-featured .pricing-pack-top,
    .pricing-pack-featured .pricing-pack-list,
    .pricing-pack-featured .pricing-pack-note,
    .pricing-pack-featured .pricing-pack-cta {
      position: relative;
      z-index: 2;
    }

    .pricing-pack-featured .pricing-pack-badge {
      position: absolute;
      z-index: 3;
      top: 14px;
      right: 14px;
    }

    .pricing-pack-featured:hover .pricing-pack-media,
    .pricing-pack-featured:focus-within .pricing-pack-media {
      opacity: .145;
      transform: scale(1.045);
      filter: saturate(.70) contrast(1.06) brightness(.60);
    }

    @media (max-width: 639px) {
      .pricing-pack-featured {
        overflow: hidden;
      }

      .pricing-pack-featured .pricing-pack-badge {
        position: static;
        z-index: 3;
        align-self: center;
        margin-bottom: 12px;
      }

      .pricing-pack-media {
        inset: 0;
        width: 100%;
        height: 46%;
        opacity: .07;
        object-position: 50% 28%;
        transform: scale(1.015);
        filter: saturate(.52) contrast(1.03) brightness(.48);
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 48%, transparent 100%);
      }

      .pricing-pack-featured:hover .pricing-pack-media,
      .pricing-pack-featured:focus-within .pricing-pack-media {
        opacity: .085;
        transform: scale(1.025);
      }

      .pricing-pack-featured::before {
        background:
          radial-gradient(circle at 50% 8%, rgba(207,230,90,.065), transparent 30%),
          linear-gradient(180deg, rgba(12,15,17,.40) 0%, rgba(12,15,17,.72) 38%, rgba(15,18,21,.96) 70%, rgba(15,18,21,.99) 100%);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .pricing-pack-media {
        display: none !important;
      }
    }

  
    /* Multiformato badge alignment fix */
    .pricing-pack-featured .pricing-pack-badge {
      position: relative !important;
      top: auto !important;
      right: auto !important;
      left: auto !important;
      align-self: center !important;
      margin: 0 auto 16px !important;
      z-index: 3 !important;
      text-align: center !important;
    }

    .pricing-pack-featured .pricing-pack-top {
      width: 100%;
      text-align: center;
    }

    .pricing-pack-featured .pricing-pack-top h4 {
      margin-left: auto;
      margin-right: auto;
    }

    @media (max-width: 639px) {
      .pricing-pack-featured .pricing-pack-badge {
        margin-bottom: 14px !important;
      }

      .pricing-pack-featured .pricing-pack-top {
        padding-top: 0 !important;
      }
    }

  
    /* Multiformato note-to-CTA spacing — mobile only */
    @media (max-width: 639px) {
      .pricing-pack-featured .pricing-pack-note {
        margin-bottom: 20px !important;
      }
    }

  
    /* Mobile hero fullscreen → stored 9:16 slide — no black gap */
    @media (max-width: 639px) {
      .hero-device-wrap.mobile-takeover-enabled {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        height: 132dvh !important;
        min-height: 132dvh !important;
        margin: 0 !important;
        /* Keep the 32dvh scroll runway for the fullscreen → card morph,
           but remove that runway from normal document flow so the next
           section rises immediately instead of leaving an empty band. */
        margin-bottom: -32dvh !important;
        overflow: visible !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-device-stage {
        position: sticky !important;
        top: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin-left: calc(50% - 50vw) !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        isolation: isolate;
        background:
          radial-gradient(ellipse 78% 42% at 50% 18%, rgba(207,230,90,.10), transparent 68%),
          radial-gradient(ellipse 72% 36% at 72% 72%, rgba(243,245,246,.055), transparent 72%),
          linear-gradient(180deg, #141a1e 0%, #11161a 52%, #0f1316 100%) !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-device-stage::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        pointer-events: none !important;
        z-index: 0 !important;
        background:
          linear-gradient(180deg, transparent 0%, transparent 70%, rgba(207,230,90,.018) 100%),
          repeating-linear-gradient(90deg, transparent 0 72px, rgba(255,255,255,.012) 73px 74px) !important;
        opacity: .72 !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-device-glow,
      .hero-device-wrap.mobile-takeover-enabled .hero-stage-label,
      .hero-device-wrap.mobile-takeover-enabled .hero-stage-caption {
        display: none !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-shell,
      .hero-device-wrap.mobile-takeover-enabled.is-revealed .hero-phone-shell {
        position: absolute !important;
        left: 50% !important;
        top: var(--hero-mobile-slide-top, 0px) !important;
        right: auto !important;
        bottom: auto !important;
        width: var(--hero-mobile-slide-width, 100vw) !important;
        height: var(--hero-mobile-slide-height, 100dvh) !important;
        max-width: none !important;
        padding: 0 !important;
        overflow: hidden !important;
        opacity: 1 !important;
        background:
          radial-gradient(circle at 50% 24%, rgba(207,230,90,.10), transparent 42%),
          linear-gradient(180deg, #161c20, #0f1316) !important;
        border: 1px solid rgba(255,255,255,var(--hero-mobile-slide-border, 0)) !important;
        border-radius: var(--hero-mobile-slide-radius, 0px) !important;
        box-shadow:
          0 28px 70px rgba(0,0,0,var(--hero-mobile-slide-shadow, 0)),
          inset 0 1px 0 rgba(255,255,255,.035) !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        transform: translate3d(-50%, 0, 0) !important;
        transform-origin: center center !important;
        transition: none !important;
        will-change: width, height, top, border-radius !important;
        z-index: 2 !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-shell::after,
      .hero-device-wrap.mobile-takeover-enabled .hero-phone-island,
      .hero-device-wrap.mobile-takeover-enabled .hero-phone-buttons,
      .hero-device-wrap.mobile-takeover-enabled .hero-phone-vignette {
        display: none !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-screen,
      .hero-device-wrap.mobile-takeover-enabled .hero-video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: inherit !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-screen {
        overflow: hidden !important;
        background:
          radial-gradient(circle at 50% 20%, rgba(207,230,90,.14), transparent 38%),
          linear-gradient(160deg, #1b2226 0%, #11161a 58%, #0e1215 100%) !important;
      }

      /* Visible fallback until the browser has decoded a real video frame. */
      .hero-device-wrap.mobile-takeover-enabled .hero-phone-screen::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 1 !important;
        pointer-events: none !important;
        opacity: 1 !important;
        background:
          radial-gradient(ellipse 70% 34% at 50% 30%, rgba(207,230,90,.18), transparent 72%),
          linear-gradient(145deg, #1b2226 0%, #12181c 50%, #0d1114 100%) !important;
        transition: opacity .18s ease !important;
      }

      .hero-device-wrap.mobile-takeover-enabled.is-video-ready .hero-phone-screen::before {
        opacity: 0 !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-video {
        z-index: 2 !important;
        object-fit: cover !important;
        object-position: center center !important;
        transform: none !important;
        background: transparent !important;
        opacity: 0 !important;
        transition: opacity .18s ease !important;
      }

      .hero-device-wrap.mobile-takeover-enabled.is-video-ready .hero-video {
        opacity: 1 !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-screen > #heroSoundToggle {
        position: absolute !important;
        z-index: 80 !important;
        right: max(14px, env(safe-area-inset-right)) !important;
        bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)) !important;
        display: inline-flex !important;
        opacity: clamp(.34, calc(1 - var(--hero-mobile-store-progress, 0)), 1) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
      }

      .hero-device-wrap.mobile-takeover-enabled.is-storing .hero-phone-screen > #heroSoundToggle {
        pointer-events: auto !important;
      }

      #bottleneck {
        margin-top: 0 !important;
      }
    }

  
    /* Hero typography + static ambient circle — matched to Methodology */
    #top .hero-orb-a,
    #top .hero-orb-b {
      display: none !important;
    }

    #top::after {
      content: "" !important;
      position: absolute !important;
      z-index: 0 !important;
      pointer-events: none !important;
      width: min(46vw, 520px) !important;
      height: min(46vw, 520px) !important;
      left: -6vw !important;
      top: 14% !important;
      inset: auto auto auto auto !important;
      border-radius: 50% !important;
      background:
        radial-gradient(circle at 46% 44%,
          rgba(207,230,90,.105) 0%,
          rgba(175,198,63,.075) 44%,
          rgba(117,130,55,.045) 66%,
          rgba(0,0,0,0) 76%) !important;
      filter: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    #top .hero-lockup-title {
      max-width: 760px !important;
    }

    #top .hero-lockup-main,
    #top .hero-lockup-product {
      font-size: clamp(3.6rem, 5.45vw, 5.35rem) !important;
      font-weight: 610 !important;
      line-height: .93 !important;
      letter-spacing: -.058em !important;
      -webkit-text-stroke: 0 !important;
      text-shadow: none !important;
    }

    #top .hero-lockup-main {
      color: #F1F3F4 !important;
    }

    #top .hero-lockup-product {
      margin-top: .08em !important;
      color: #62656C !important;
    }

    #top .hero-lockup-product::before,
    #top .hero-lockup-product::after {
      display: none !important;
    }

    @media (max-width: 639px) {
      #top::after {
        width: 360px !important;
        height: 360px !important;
        left: -155px !important;
        top: 19% !important;
        opacity: .68 !important;
      }

      #top .hero-lockup-main,
      #top .hero-lockup-product {
        font-size: clamp(2.6rem, 11.6vw, 3.35rem) !important;
        line-height: .96 !important;
        letter-spacing: -.052em !important;
      }
    }

  
    /* Clean campaign media — product/fashion without phone mockup */
    .project-item.project-clean-media .mockup-stage {
      min-height: 590px;
      padding: 24px;
      border-color: rgba(255,255,255,.055);
      background:
        radial-gradient(circle at 50% 44%, rgba(207,230,90,.075), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.008));
    }

    .project-item.project-clean-media .mockup-stage::before {
      width: 54%;
      opacity: .42;
      filter: blur(84px);
      transform: translate(-18%, 24%);
    }

    .clean-media-frame {
      position: relative;
      z-index: 2;
      width: min(100%, 360px);
      aspect-ratio: 9 / 16;
      overflow: hidden;
      border-radius: 26px;
      border: 1px solid rgba(255,255,255,.09);
      background: #0A0C0F;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 28px 80px rgba(0,0,0,.34),
        0 0 52px rgba(207,230,90,.045);
      transition:
        transform .45s var(--ease),
        border-color .35s ease,
        box-shadow .35s ease;
    }

    .clean-media-frame::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
      background:
        linear-gradient(180deg, rgba(255,255,255,.018), transparent 22%, transparent 74%, rgba(0,0,0,.14));
    }

    .clean-media-frame video,
    .clean-media-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .project-item.project-clean-media:hover .clean-media-frame {
      transform: translateY(-4px) scale(1.008);
      border-color: rgba(255,255,255,.14);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 34px 92px rgba(0,0,0,.38),
        0 0 64px rgba(207,230,90,.06);
    }

    /* Hero: floating phone, no heavy showcase base */
    #top .hero-device-stage {
      min-height: 590px;
      padding: 24px 16px 42px;
      overflow: visible;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    #top .hero-device-stage::before {
      display: none;
    }

    #top .hero-device-stage::after {
      content: "";
      position: absolute;
      z-index: 1;
      width: 250px;
      height: 34px;
      left: 50%;
      bottom: 58px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: rgba(0,0,0,.36);
      filter: blur(17px);
      opacity: .72;
      pointer-events: none;
    }

    #top .hero-device-glow {
      width: 52%;
      top: 45%;
      background: rgba(207,230,90,.11);
      filter: blur(92px);
      opacity: .82;
    }

    @media (max-width: 639px) {
      .project-item.project-clean-media .mockup-stage {
        min-height: 430px;
        padding: 16px 10px;
      }

      .clean-media-frame {
        width: min(100%, 255px);
        border-radius: 22px;
      }

      #top .hero-device-stage {
        min-height: 500px;
        padding: 20px 8px 32px;
      }

      #top .hero-device-stage::after {
        width: 190px;
        height: 28px;
        bottom: 42px;
        filter: blur(14px);
      }
    }

  
    /* Projects — one clean visual system across UGC / Campaigns / Workflow */
    #projects .mockup-stage,
    #projects .project-item.project-clean-media .mockup-stage {
      min-height: 590px !important;
      padding: 24px !important;
      border-radius: 30px !important;
      border: 1px solid rgba(255,255,255,.055) !important;
      background:
        radial-gradient(circle at 50% 44%, rgba(207,230,90,.07), transparent 38%),
        linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.008)) !important;
    }

    #projects .mockup-stage::before,
    #projects .project-item.project-clean-media .mockup-stage::before {
      width: 54% !important;
      opacity: .34 !important;
      filter: blur(86px) !important;
      transform: translate(-18%, 24%) !important;
    }

    #projects .phone-shell,
    #projects .clean-media-frame,
    #projects .desktop-frame {
      position: relative !important;
      z-index: 2 !important;
      width: min(100%, 360px) !important;
      aspect-ratio: 9 / 16 !important;
      margin-inline: auto !important;
      padding: 0 !important;
      overflow: hidden !important;
      border-radius: 26px !important;
      border: 1px solid rgba(255,255,255,.09) !important;
      background: #0A0C0F !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 28px 80px rgba(0,0,0,.34),
        0 0 52px rgba(207,230,90,.045) !important;
      transform: none !important;
      transform-style: flat !important;
      transition:
        transform .45s var(--ease),
        border-color .35s ease,
        box-shadow .35s ease !important;
    }

    #projects .phone-shell::before,
    #projects .phone-shell::after {
      display: none !important;
    }

    #projects .phone-screen {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      aspect-ratio: auto !important;
      border-radius: 0 !important;
      background: #0A0C0F !important;
    }

    #projects .phone-screen::after,
    #projects .clean-media-frame::after {
      border-radius: 0 !important;
    }

    #projects .desktop-top {
      display: none !important;
    }

    #projects .desktop-frame .code-canvas {
      width: 100% !important;
      height: 100% !important;
      min-height: 100% !important;
      overflow: auto !important;
      padding: 26px 22px !important;
      background:
        linear-gradient(180deg, rgba(175,198,63,.045), transparent 34%),
        #0A0B10 !important;
    }

    #projects .project-item:hover .phone-shell,
    #projects .project-item:hover .clean-media-frame,
    #projects .project-item:hover .desktop-frame {
      transform: translateY(-4px) scale(1.008) !important;
      border-color: rgba(255,255,255,.14) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 34px 92px rgba(0,0,0,.38),
        0 0 64px rgba(207,230,90,.06) !important;
    }

    @media (max-width: 639px) {
      #projects .mockup-stage,
      #projects .project-item.project-clean-media .mockup-stage {
        min-height: 430px !important;
        padding: 16px 10px !important;
      }

      #projects .phone-shell,
      #projects .clean-media-frame,
      #projects .desktop-frame {
        width: min(100%, 255px) !important;
        border-radius: 22px !important;
      }

      #projects .desktop-frame .code-canvas {
        padding: 18px 14px !important;
        font-size: 9.5px !important;
        line-height: 1.65 !important;
      }
    }

  
    /* Hero — lighter editorial copy / CTA system */
    #top .hero-summary-minimal {
      max-width: 560px;
      margin-top: 30px;
    }

    #top .hero-summary-minimal-kicker {
      display: block;
      margin-bottom: 10px;
      color: #CFE65A;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    #top .hero-summary-minimal-copy {
      max-width: 540px;
      margin: 0;
      color: #A3A8B1;
      font-size: clamp(1rem, 1.25vw, 1.12rem);
      line-height: 1.7;
      text-wrap: balance;
    }

    #top .hero-summary-minimal-copy strong {
      color: #F1F3F4;
      font-weight: 620;
    }

    #top .hero-desktop-link {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 24px;
      color: #D8DCE2;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -.01em;
      text-decoration: none;
      transition: color .25s ease;
    }

    #top .hero-desktop-link:hover {
      color: #CFE65A;
    }

    #top .hero-web-offer {
      min-width: 238px;
      margin-top: 30px;
      padding: 14px 18px;
      border: 1px solid rgba(207,230,90,.30);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(207,230,90,.10), rgba(255,255,255,.025)),
        rgba(15,18,21,.84);
      backdrop-filter: blur(14px) saturate(118%);
      -webkit-backdrop-filter: blur(14px) saturate(118%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 18px 44px rgba(0,0,0,.26),
        0 0 28px rgba(207,230,90,.035);
    }

    #top .hero-web-offer-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
      line-height: 1.1;
    }

    #top .hero-web-offer-copy strong {
      color: #F4F6F7;
      font-size: 13.5px;
      font-weight: 650;
    }

    #top .hero-web-offer-copy small {
      color: #D9EE79;
      font-size: 10.5px;
      font-weight: 750;
      letter-spacing: .045em;
      text-transform: uppercase;
    }

    #top .hero-web-offer:hover {
      border-color: rgba(207,230,90,.42);
      transform: translateY(-1px);
    }

    #top .hero-mobile-cta {
      display: none;
    }

    @media (max-width: 767px) {
      #top .hero-summary-minimal {
        margin-top: 24px;
      }

      #top .hero-summary-minimal-kicker {
        margin-bottom: 8px;
        font-size: 9px;
      }

      #top .hero-summary-minimal-copy {
        max-width: 34rem;
        font-size: 15px;
        line-height: 1.65;
      }

      #top .hero-desktop-link {
        display: none;
      }

      #top .hero-mobile-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        max-width: 260px;
        min-height: 50px;
        margin: 22px auto 0;
        border: 1px solid rgba(207,230,90,.38);
        border-radius: 14px;
        background: rgba(207,230,90,.075);
        color: #EEF6B7;
        font-size: 13.5px;
        font-weight: 720;
        letter-spacing: -.01em;
        text-decoration: none;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
      }
    }

  
    /* Mobile horizontal carousels — delayed autoplay loop */
    @media (max-width: 639px) {
      .creative-paths-grid,
      .fit-grid,
      .pricing-pack-rail {
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth;
      }

      .creative-path,
      .fit-card,
      .pricing-pack {
        scroll-snap-align: center !important;
        scroll-snap-stop: always;
      }
    }

  
    /* Continuous page surface — shared background, section artwork preserved */
    main {
      position: relative;
      background:
        radial-gradient(ellipse 62% 18% at 82% 8%, rgba(207,230,90,.035), transparent 72%),
        radial-gradient(ellipse 52% 20% at 14% 56%, rgba(243,245,246,.018), transparent 74%),
        linear-gradient(180deg, #0e1114 0%, #101316 34%, #101316 72%, #0e1114 100%);
    }

    #top,
    #bottleneck,
    #creativePaths,
    #projects,
    #fit,
    #services,
    #method,
    #contact {
      background: transparent !important;
      box-shadow: none !important;
    }

    .fit-section {
      border-top: 0 !important;
    }

    @media (max-width: 639px) {
      main {
        background:
          radial-gradient(ellipse 92% 14% at 78% 7%, rgba(207,230,90,.035), transparent 72%),
          radial-gradient(ellipse 82% 16% at 18% 60%, rgba(243,245,246,.016), transparent 74%),
          linear-gradient(180deg, #0e1114 0%, #101316 38%, #101316 74%, #0e1114 100%);
      }

      #top,
      #bottleneck,
      #creativePaths,
      #projects,
      #fit,
      #services,
      #method,
      #contact {
        background: transparent !important;
      }
    }

  
    /* Remove remaining chapter edge between hero and narrative */
    .conversion-tension {
      border-top: 0 !important;
    }

  
    /* Seamless section transitions — keep ambient artwork, fade its rectangular edges */
    #top,
    #bottleneck,
    #creativePaths,
    #projects,
    #fit,
    #services,
    #method,
    #contact {
      background: transparent !important;
      background-color: transparent !important;
      border-top: 0 !important;
      border-bottom: 0 !important;
      box-shadow: none !important;
    }

    #bottleneck::before,
    #creativePaths::before,
    #projects::before,
    #method::before,
    #contact::before {
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,.72) 12%,
        #000 24%,
        #000 76%,
        rgba(0,0,0,.72) 88%,
        transparent 100%
      ) !important;
      mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0,0,0,.72) 12%,
        #000 24%,
        #000 76%,
        rgba(0,0,0,.72) 88%,
        transparent 100%
      ) !important;
    }

    /* Keep the decorative circles / glows untouched. */
    #bottleneck::after,
    #fit::before,
    #fit::after,
    #top::after,
    #method::after {
      pointer-events: none;
    }

    @media (max-width: 639px) {
      #top,
      #bottleneck,
      #creativePaths,
      #projects,
      #fit,
      #services,
      #method,
      #contact {
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }

      #bottleneck::before,
      #creativePaths::before,
      #projects::before,
      #method::before,
      #contact::before {
        -webkit-mask-image: linear-gradient(
          to bottom,
          transparent 0%,
          #000 16%,
          #000 84%,
          transparent 100%
        ) !important;
        mask-image: linear-gradient(
          to bottom,
          transparent 0%,
          #000 16%,
          #000 84%,
          transparent 100%
        ) !important;
      }
    }

  
    /* Final seamless surface — no section clipping, no visible vertical fade */
    html,
    body {
      background: #101316 !important;
    }

    body,
    main {
      overflow-x: clip;
    }

    main {
      background: #101316 !important;
    }

    #top,
    #bottleneck,
    #creativePaths,
    #projects,
    #fit,
    #services,
    #method,
    #contact {
      overflow: visible !important;
      background: transparent !important;
      background-color: transparent !important;
      border-top: 0 !important;
      border-bottom: 0 !important;
      box-shadow: none !important;
    }

    #bottleneck::before,
    #creativePaths::before,
    #projects::before,
    #method::before,
    #contact::before {
      -webkit-mask-image: none !important;
      mask-image: none !important;
    }

    #bottleneck::before,
    #creativePaths::before,
    #projects::before,
    #contact::before {
      inset: -12% 0 !important;
    }

    #method::before {
      inset: -8% 0 !important;
      opacity: .42 !important;
    }

    /* Let decorative circles / halos bridge into the neighboring section. */
    #top::after,
    #bottleneck::after,
    #fit::before,
    #fit::after,
    #method::after,
    .services-orb {
      overflow: visible !important;
    }

    @media (max-width: 639px) {
      main {
        background: #101316 !important;
      }

      #top,
      #bottleneck,
      #creativePaths,
      #projects,
      #fit,
      #services,
      #method,
      #contact {
        overflow: visible !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
      }

      #bottleneck::before,
      #creativePaths::before,
      #projects::before,
      #method::before,
      #contact::before {
        -webkit-mask-image: none !important;
        mask-image: none !important;
      }
    }

  
    /* One continuous canvas — no per-section color bands */
    html,
    body,
    main {
      background-color: #101316 !important;
    }

    main {
      background-image:
        radial-gradient(circle at 86% 10%, rgba(207,230,90,.055) 0, rgba(207,230,90,.018) 16%, transparent 34%),
        radial-gradient(circle at 8% 42%, rgba(243,245,246,.024) 0, transparent 28%),
        radial-gradient(circle at 82% 72%, rgba(207,230,90,.035) 0, transparent 30%),
        linear-gradient(rgba(255,255,255,.010) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.010) 1px, transparent 1px) !important;
      background-size:
        auto,
        auto,
        auto,
        52px 52px,
        52px 52px !important;
      background-position:
        center,
        center,
        center,
        center top,
        center top !important;
      background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        repeat !important;
    }

    #top,
    #bottleneck,
    #creativePaths,
    #projects,
    #fit,
    #services,
    #method,
    #contact {
      background: transparent !important;
      background-image: none !important;
      background-color: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    /* Kill only the full-width washes that were creating rectangular seams. */
    #top::before,
    #bottleneck::before,
    #creativePaths::before,
    #projects::before,
    #method::before,
    #contact::before {
      background: none !important;
      background-image: none !important;
      opacity: 0 !important;
      -webkit-mask-image: none !important;
      mask-image: none !important;
      box-shadow: none !important;
    }

    /* Preserve the localized decorative geometry. */
    #top::after,
    #bottleneck::after,
    #fit::before,
    #fit::after,
    #method::after,
    .services-orb,
    .creative-path::after,
    .method-card::before,
    .method-slider::before {
      opacity: revert;
    }

    @media (max-width: 639px) {
      main {
        background-image:
          radial-gradient(circle at 82% 8%, rgba(207,230,90,.05) 0, transparent 30%),
          radial-gradient(circle at 12% 48%, rgba(243,245,246,.02) 0, transparent 26%),
          radial-gradient(circle at 78% 78%, rgba(207,230,90,.03) 0, transparent 28%),
          linear-gradient(rgba(255,255,255,.009) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.009) 1px, transparent 1px) !important;
        background-size:
          auto,
          auto,
          auto,
          42px 42px,
          42px 42px !important;
      }
    }

  
    /* Matched floating title circles — Hero + Methodology */
    @keyframes titleCircleFloatHero {
      0%   { translate: 0 0; scale: 1; }
      45%  { translate: 14px -10px; scale: 1.018; }
      100% { translate: 5px 12px; scale: .992; }
    }

    @keyframes titleCircleFloatMethod {
      0%   { translate: 0 0; scale: 1; }
      45%  { translate: -12px 11px; scale: .992; }
      100% { translate: 10px -9px; scale: 1.018; }
    }

    #top::after {
      animation: titleCircleFloatHero 8.8s ease-in-out infinite alternate !important;
      will-change: translate, scale;
    }

    #method .method-intro-title {
      position: relative;
      isolation: isolate;
      overflow: visible;
    }

    #method .method-intro-title::before {
      content: "";
      position: absolute;
      z-index: -1;
      pointer-events: none;
      width: min(46vw, 520px);
      height: min(46vw, 520px);
      left: -6vw;
      top: 50%;
      margin-top: min(-23vw, -260px);
      border-radius: 50%;
      background:
        radial-gradient(circle at 46% 44%,
          rgba(207,230,90,.105) 0%,
          rgba(175,198,63,.075) 44%,
          rgba(117,130,55,.045) 66%,
          rgba(0,0,0,0) 76%);
      opacity: 1;
      animation: titleCircleFloatMethod 9.6s ease-in-out -2.2s infinite alternate;
      will-change: translate, scale;
    }

    #method .method-intro-title > * {
      position: relative;
      z-index: 1;
    }

    @media (max-width: 639px) {
      #top::after {
        animation-duration: 8.2s !important;
      }

      #method .method-intro-title::before {
        width: 360px;
        height: 360px;
        left: -155px;
        top: 50%;
        margin-top: -180px;
        opacity: .68;
        animation-duration: 9s;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #top::after,
      #method .method-intro-title::before {
        animation: none !important;
        translate: 0 0 !important;
        scale: 1 !important;
      }
    }

  
    /* Mobile fast mode — prioritize rendering speed over decorative motion */
    @media (max-width: 639px) {
      .service-card-media,
      .method-card-media,
      .contact-proposal-media,
      .pricing-pack-media {
        display: none !important;
      }

      .service-card,
      .project-intro-card,
      .contact-social-link,
      .pricing-pack,
      .fit-card,
      .creative-path {
        transition-duration: .16s !important;
      }

      .service-card:hover,
      .project-intro-card:hover,
      .contact-social-link:hover,
      .pricing-pack:hover,
      .fit-card:hover,
      .creative-path:hover {
        transform: none !important;
      }
    }

  
    /* Mobile performance pass — keep important videos visible, cut expensive effects */
    @media (max-width: 639px) {
      #top {
        min-height: auto !important;
        padding-bottom: 44px !important;
      }

      .hero-device-wrap.mobile-takeover-enabled {
        width: min(100%, 360px) !important;
        max-width: 360px !important;
        height: auto !important;
        margin: 26px auto 0 !important;
        position: relative !important;
        overflow: visible !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-device-stage {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 9 / 16 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 24px !important;
        background: #0f1316 !important;
        box-shadow: 0 18px 52px rgba(0,0,0,.24) !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-device-stage::before,
      .hero-device-wrap.mobile-takeover-enabled .hero-device-glow,
      .hero-device-wrap.mobile-takeover-enabled .hero-stage-label,
      .hero-device-wrap.mobile-takeover-enabled .hero-stage-caption {
        display: none !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-shell,
      .hero-device-wrap.mobile-takeover-enabled.is-revealed .hero-phone-shell {
        position: absolute !important;
        inset: 0 !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        opacity: 1 !important;
        border: 0 !important;
        border-radius: 24px !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        transform: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-screen {
        inset: 0 !important;
        border-radius: 24px !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-video {
        opacity: 1 !important;
        visibility: visible !important;
        object-fit: cover !important;
        transform: none !important;
        transition: none !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-screen::before {
        z-index: 0 !important;
      }

      .hero-device-wrap.mobile-takeover-enabled .hero-phone-screen > #heroSoundToggle {
        z-index: 8 !important;
        opacity: .9 !important;
      }

      #projects .project-video {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
        background: #0b0e11 !important;
      }

      #projects .mockup-stage,
      #projects .phone-shell,
      #projects .clean-media-frame,
      #projects .project-info-card {
        box-shadow: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }

      #projects .mockup-stage {
        background: rgba(255,255,255,.018) !important;
      }

      .grain {
        opacity: .025 !important;
      }

      .service-card-media,
      .method-card-media,
      .contact-proposal-media,
      .pricing-pack-media {
        display: none !important;
      }
    }

  
    /* Instagram / Meta in-app browser video compatibility */
    html.instagram-inapp .hero-video,
    html.instagram-inapp #projects .project-video {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      background: #0b0e11 !important;
    }

    html.instagram-inapp .video-tap-fallback {
      display: inline-flex !important;
      opacity: 1;
      pointer-events: auto;
      min-height: 46px;
      padding: 0 16px;
      background: rgba(8,10,12,.88);
      border-color: rgba(255,255,255,.20);
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      transform: translate(-50%,-50%) scale(1);
    }

    html.instagram-inapp .video-tap-fallback.is-playing {
      opacity: 0 !important;
      pointer-events: none !important;
    }

    html.instagram-inapp .hero-phone-vignette {
      display: none !important;
    }

    html.instagram-inapp #projects .mockup-stage,
    html.instagram-inapp #projects .phone-shell,
    html.instagram-inapp #projects .clean-media-frame {
      filter: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
    }

    @media (max-width: 639px) {
      html.instagram-inapp .hero-device-wrap.mobile-takeover-enabled .hero-video {
        opacity: 1 !important;
      }

      html.instagram-inapp .hero-device-wrap.mobile-takeover-enabled .hero-phone-screen::before {
        opacity: 0 !important;
      }
    }

  
    /* Instagram WebView — native controls + low-decode mobile assets */
    html.instagram-inapp .hero-video,
    html.instagram-inapp #projects .project-video {
      pointer-events: auto !important;
      -webkit-transform: translateZ(0) !important;
      transform: translateZ(0) !important;
    }

    html.instagram-inapp video::-webkit-media-controls {
      display: flex !important;
    }

    html.instagram-inapp .hero-sound-toggle {
      display: none !important;
    }

    html.instagram-inapp .video-tap-fallback {
      z-index: 30 !important;
    }

    html.instagram-inapp .video-tap-fallback.is-playing {
      display: none !important;
    }

  
    /* Instagram Lite Mode — static UI, keep video playback and visual identity */
    html.instagram-inapp {
      scroll-behavior: auto !important;
    }

    html.instagram-inapp .grain {
      display: none !important;
    }

    html.instagram-inapp #top::after,
    html.instagram-inapp #method .method-intro-title::before,
    html.instagram-inapp [data-orb],
    html.instagram-inapp .gradient-text,
    html.instagram-inapp .method-progress > span,
    html.instagram-inapp .method-slide,
    html.instagram-inapp .method-card-media {
      animation: none !important;
      transition: none !important;
      will-change: auto !important;
    }

    html.instagram-inapp .hero-reveal,
    html.instagram-inapp .section-reveal,
    html.instagram-inapp .project-reveal,
    html.instagram-inapp .creative-path,
    html.instagram-inapp .fit-card,
    html.instagram-inapp .service-card,
    html.instagram-inapp .pricing-pack,
    html.instagram-inapp .project-intro-card,
    html.instagram-inapp .project-info-card,
    html.instagram-inapp .contact-social-link,
    html.instagram-inapp .tab-btn,
    html.instagram-inapp .magnetic {
      animation: none !important;
      transition: none !important;
      will-change: auto !important;
    }

    html.instagram-inapp .creative-paths-grid,
    html.instagram-inapp .fit-grid,
    html.instagram-inapp .pricing-pack-rail {
      scroll-behavior: auto !important;
    }

    html.instagram-inapp .method-track {
      transition: none !important;
    }

    @media (max-width: 639px) {
      html.instagram-inapp #top::after,
      html.instagram-inapp #method .method-intro-title::before {
        animation: none !important;
        translate: 0 0 !important;
        scale: 1 !important;
      }

      html.instagram-inapp .creative-path,
      html.instagram-inapp .fit-card,
      html.instagram-inapp .pricing-pack,
      html.instagram-inapp .service-card,
      html.instagram-inapp .contact-social-link,
      html.instagram-inapp .project-info-card {
        transform: none !important;
      }
    }

  
    /* Instagram hero audio — explicit user-gesture unlock */
    html.instagram-inapp #heroSoundToggle {
      display: inline-flex !important;
      position: absolute !important;
      z-index: 60 !important;
      right: 12px !important;
      bottom: 12px !important;
      min-height: 44px !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      padding: 0 14px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(255,255,255,.18) !important;
      background: rgba(8,10,12,.88) !important;
      color: #F3F5F6 !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      transform: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      touch-action: manipulation !important;
    }

    html.instagram-inapp #heroSoundToggle:active {
      transform: scale(.97) !important;
    }

    html.instagram-inapp #heroSoundToggleDesktop {
      display: none !important;
    }

  
    /* Methodology master ambient — single premium background video */
    #method .method-slider {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.075);
      background: #0b0e11;
      box-shadow:
        0 34px 92px rgba(0,0,0,.30),
        0 0 90px rgba(207,230,90,.045),
        inset 0 1px 0 rgba(255,255,255,.035);
    }

    #method .method-ambient-master {
      position: absolute;
      inset: -3%;
      z-index: 0;
      width: 106%;
      height: 106%;
      object-fit: cover;
      object-position: 58% center;
      opacity: .36;
      pointer-events: none;
      filter: saturate(.84) contrast(1.05) brightness(.64);
      transform: scale(1.025);
    }

    #method .method-slider::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(90deg,
          rgba(8,10,12,.90) 0%,
          rgba(8,10,12,.78) 38%,
          rgba(8,10,12,.52) 72%,
          rgba(8,10,12,.42) 100%),
        linear-gradient(180deg,
          rgba(8,10,12,.18) 0%,
          rgba(8,10,12,.10) 46%,
          rgba(8,10,12,.44) 100%);
    }

    #method .method-track {
      position: relative;
      z-index: 2;
    }

    #method .method-card {
      background:
        linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.010)),
        rgba(9,11,14,.16) !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    #method .method-card::after {
      background:
        linear-gradient(90deg,
          rgba(8,10,12,.56) 0%,
          rgba(8,10,12,.30) 48%,
          rgba(8,10,12,.22) 100%) !important;
    }

    #method .method-side {
      background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.020)),
        rgba(8,10,12,.62) !important;
      border-color: rgba(255,255,255,.10) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 18px 42px rgba(0,0,0,.16) !important;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    #method .method-chip {
      background: rgba(255,255,255,.045) !important;
      border-color: rgba(255,255,255,.09) !important;
    }

    #method .method-result-icon {
      box-shadow:
        0 10px 30px rgba(207,230,90,.14),
        0 0 36px rgba(207,230,90,.08) !important;
    }

    @media (max-width: 639px) {
      #method .method-ambient-master {
        display: none !important;
      }

      #method .method-slider {
        background:
          radial-gradient(circle at 82% 22%, rgba(207,230,90,.10), transparent 32%),
          linear-gradient(180deg, #101417, #0c0f12) !important;
      }

      #method .method-slider::before {
        background: linear-gradient(180deg, rgba(8,10,12,.26), rgba(8,10,12,.60)) !important;
      }

      #method .method-side {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #method .method-ambient-master {
        display: none !important;
      }
    }

    html.instagram-inapp #method .method-ambient-master {
      display: none !important;
    }

    html.instagram-inapp #method .method-side {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

  
    /* Methodology ambient edge fix — avoid clipped glow on Production slide */
    #method .method-ambient-master {
      inset: -11% !important;
      width: 122% !important;
      height: 122% !important;
      object-position: 56% center !important;
      transform: scale(1.055) !important;
      filter:
        blur(2px)
        saturate(.82)
        contrast(1.04)
        brightness(.64) !important;
    }

    #method .method-slider::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      border-radius: inherit;
      box-shadow:
        inset 26px 0 34px -28px rgba(8,10,12,.88),
        inset -26px 0 34px -28px rgba(8,10,12,.88),
        inset 0 22px 30px -28px rgba(8,10,12,.72),
        inset 0 -22px 30px -28px rgba(8,10,12,.72);
    }

    #method .method-slide[aria-label="4 de 5"] .method-card {
      overflow: visible !important;
    }

    #method .method-slide[aria-label="4 de 5"] .method-card::after {
      border-radius: 29px;
      background:
        linear-gradient(90deg,
          rgba(8,10,12,.58) 0%,
          rgba(8,10,12,.31) 48%,
          rgba(8,10,12,.24) 100%) !important;
    }

    @media (max-width: 639px) {
      #method .method-slide[aria-label="4 de 5"] .method-card {
        overflow: hidden !important;
      }

      #method .method-slider::after {
        display: none !important;
      }
    }

    html.instagram-inapp #method .method-slider::after {
      display: none !important;
    }

  
    /* Methodology surface continuity — remove hard card cutoff */
    #method .method-card,
    #method .method-slide[aria-label="4 de 5"] .method-card {
      background: transparent !important;
      overflow: hidden !important;
      border: 0 !important;
      box-shadow: none !important;
    }

    #method .method-card::after,
    #method .method-slide[aria-label="4 de 5"] .method-card::after {
      display: none !important;
      content: none !important;
    }

    #method .method-slider::before {
      background:
        linear-gradient(90deg,
          rgba(8,10,12,.88) 0%,
          rgba(8,10,12,.74) 38%,
          rgba(8,10,12,.48) 72%,
          rgba(8,10,12,.38) 100%),
        linear-gradient(180deg,
          rgba(8,10,12,.16) 0%,
          rgba(8,10,12,.10) 42%,
          rgba(8,10,12,.24) 76%,
          rgba(8,10,12,.42) 100%) !important;
    }

    /* The old progress bar read as a clipped green line under the card. */
    #method .method-progress {
      display: none !important;
    }

    #method .method-slider::after {
      box-shadow:
        inset 18px 0 28px -28px rgba(8,10,12,.72),
        inset -18px 0 28px -28px rgba(8,10,12,.72),
        inset 0 16px 24px -26px rgba(8,10,12,.54),
        inset 0 -16px 24px -26px rgba(8,10,12,.54) !important;
    }

    @media (max-width: 639px) {
      #method .method-card,
      #method .method-slide[aria-label="4 de 5"] .method-card {
        background: transparent !important;
      }
    }

  
    /* Header web-service CTA */
    .nav-web-cta {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-left: 7px;
      padding: 5px 13px;
      border-radius: 16px;
      border: 1px solid rgba(207,230,90,.34);
      background:
        linear-gradient(180deg, rgba(207,230,90,.085), rgba(207,230,90,.035)),
        rgba(255,255,255,.018);
      color: #DCE8A0;
      font-size: 11px;
      font-weight: 650;
      letter-spacing: -.01em;
      white-space: nowrap;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 0 26px rgba(207,230,90,.04);
      transition:
        color .22s ease,
        border-color .22s ease,
        background .22s ease,
        transform .22s var(--ease);
    }

    .nav-web-cta-copy {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1px;
      line-height: 1.05;
    }

    .nav-web-cta-price {
      display: none;
      color: #F1F7CB;
      font-size: 9px;
      font-weight: 750;
      letter-spacing: .055em;
      text-transform: uppercase;
      opacity: .78;
    }

    .nav-web-cta:hover {
      color: #10140A;
      border-color: rgba(207,230,90,.82);
      background: linear-gradient(180deg, #E9F6A0, #CFE65A);
      transform: translateY(-1px);
    }

    .nav-web-cta:hover .nav-web-cta-price {
      color: #10140A;
      opacity: .72;
    }

    .nav-web-cta-long {
      display: none;
    }

    @media (min-width: 1120px) {
      .nav-web-cta {
        position: relative;
        top: 8px;
        min-height: 50px;
        padding: 7px 14px 7px 15px;
        border-radius: 17px;
        border-color: rgba(207,230,90,.28);
        background:
          linear-gradient(145deg, rgba(207,230,90,.10), rgba(207,230,90,.025) 58%),
          rgba(15,18,21,.84);
        backdrop-filter: blur(16px) saturate(125%);
        -webkit-backdrop-filter: blur(16px) saturate(125%);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.045),
          0 18px 46px rgba(0,0,0,.36),
          0 0 30px rgba(207,230,90,.055);
      }

      .nav-web-cta:hover {
        transform: translateY(-2px);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,.12),
          0 22px 52px rgba(0,0,0,.32),
          0 0 34px rgba(207,230,90,.10);
      }

      .nav-web-cta-short {
        display: none;
      }

      .nav-web-cta-long,
      .nav-web-cta-price {
        display: inline;
      }
    }

    .nav-web-cta-mobile {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid rgba(207,230,90,.28);
      background: rgba(207,230,90,.055);
      color: #DCE8A0;
      font-size: 10.5px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }

    .nav-web-cta-mobile strong {
      color: #F1F7CB;
      font-weight: 800;
    }

    .mobile-menu-web-cta-copy {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .mobile-menu-web-cta-price {
      width: max-content;
      padding: 5px 8px;
      border-radius: 999px;
      background: rgba(207,230,90,.10);
      border: 1px solid rgba(207,230,90,.22);
      color: #E9F6A0;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .035em;
      text-transform: uppercase;
    }

    .mobile-menu-web-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: var(--brand-lime);
      font-weight: 650;
    }

    html.instagram-inapp .nav-web-cta,
    html.instagram-inapp .nav-web-cta-mobile {
      transition: none !important;
      transform: none !important;
    }

    @media (max-width: 380px) {
      .nav-web-cta-mobile span {
        display: none;
      }

      .nav-web-cta-mobile {
        width: 38px;
        padding: 0;
      }
    }

  
    /* Hero cleanup — remove redundant secondary tagline */
    #top .hero-lockup-pro {
      padding-bottom: 0 !important;
    }

    #top .hero-summary-minimal {
      margin-top: 24px !important;
    }

    @media (max-width: 639px) {
      #top .hero-summary-minimal {
        margin-top: 20px !important;
      }
    }

  
    /* Projects heading — centered on desktop */
    @media (min-width: 768px) {
      #projects > .site-shell > .max-w-4xl {
        margin-inline: auto !important;
        text-align: center;
      }

      #projects > .site-shell > .max-w-4xl h2 {
        margin-inline: auto !important;
      }
    }

  
    /* Projects section — fully centered editorial system */
    #projects > .site-shell > .max-w-4xl {
      margin-inline: auto !important;
      text-align: center !important;
    }

    #projects > .site-shell > .max-w-4xl h2,
    #projects > .site-shell > .max-w-4xl p {
      margin-inline: auto !important;
      text-align: center !important;
    }

    #projects [role="tablist"] {
      justify-content: center !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      text-align: center !important;
    }

    #projects .project-category-row {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 14px !important;
      text-align: center !important;
    }

    #projects #categoryDescription {
      margin: 0 auto !important;
      text-align: center !important;
    }

    .project-meet-cta {
      width: min(100%, 620px);
      margin: 24px auto 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 16px 18px;
      border-radius: 20px;
      border: 1px solid rgba(207,230,90,.18);
      background:
        linear-gradient(135deg, rgba(207,230,90,.055), rgba(255,255,255,.018)),
        rgba(255,255,255,.012);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 18px 48px rgba(0,0,0,.16);
    }

    .project-meet-cta-copy {
      min-width: 0;
      text-align: left;
    }

    .project-meet-cta-kicker {
      margin: 0 0 4px;
      color: #A6ACB6;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .project-meet-cta-title {
      margin: 0;
      color: #F3F5F6;
      font-size: 14px;
      font-weight: 650;
      line-height: 1.35;
      letter-spacing: -.015em;
    }

    .project-meet-cta-button {
      flex: 0 0 auto;
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid rgba(207,230,90,.42);
      background: rgba(207,230,90,.09);
      color: #E9F6A0;
      font-size: 11px;
      font-weight: 750;
      white-space: nowrap;
      transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        transform .22s var(--ease);
    }

    .project-meet-cta-button:hover {
      color: #10140A;
      background: linear-gradient(180deg, #E9F6A0, #CFE65A);
      border-color: rgba(207,230,90,.86);
      transform: translateY(-1px);
    }

    .project-meet-logo {
      width: 96px;
      height: 27px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      overflow: visible;
      border-radius: 0;
      background: transparent;
    }

    .project-meet-logo img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
    }

    @media (max-width: 639px) {
      .project-meet-cta {
        margin-top: 20px;
        padding: 16px;
        border-radius: 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
      }

      .project-meet-cta-copy {
        text-align: center;
      }

      .project-meet-cta-button {
        width: 100%;
        min-height: 46px;
      }
    }

    #projects .project-carousel-controls {
      justify-content: center !important;
      margin-inline: auto !important;
    }

    #projects .project-carousel-status {
      text-align: center !important;
    }

    #projects .project-item {
      text-align: center !important;
    }

    #projects .mockup-stage {
      margin-inline: auto !important;
    }

    #projects .project-info-card {
      width: 100%;
      max-width: 560px;
      margin-left: auto !important;
      margin-right: auto !important;
      text-align: center !important;
    }

    #projects .project-info-card > div:first-child {
      display: block !important;
      text-align: center !important;
    }

    #projects .project-info-card > div:first-child > div {
      width: 100% !important;
      text-align: center !important;
    }

    #projects .project-info-card h3,
    #projects .project-info-card p,
    #projects .project-note {
      margin-left: auto !important;
      margin-right: auto !important;
      text-align: center !important;
    }

    #projects .project-info-card .mt-5.flex.flex-wrap {
      justify-content: center !important;
    }

    #projects .tool-badge {
      justify-content: center !important;
      text-align: center !important;
    }

    @media (max-width: 639px) {
      #projects .project-category-row {
        gap: 10px !important;
      }

      #projects .project-info-card {
        max-width: 100% !important;
      }
    }

  
    /* Scroll and CTA rhythm */
    #projects,
    #fit,
    #services,
    #launchOffer,
    #method,
    #contact {
      scroll-margin-top: 86px;
    }

    #projects > .site-shell > .project-meet-cta {
      margin-top: 38px;
    }

    @media (max-width: 639px) {
      #projects,
      #fit,
      #services,
      #launchOffer,
      #method,
      #contact {
        scroll-margin-top: 78px;
      }

      #projects > .site-shell > .project-meet-cta {
        margin-top: 28px;
      }

      .project-meet-cta-title {
        max-width: 290px;
        margin-inline: auto;
      }
    }

  
    /* Project copy cards — compact */
    #projects .project-info-card {
      min-height: 0 !important;
      padding: 16px 18px !important;
      border-radius: 18px !important;
    }

    #projects .project-info-card h3 {
      margin-top: 5px !important;
      line-height: 1.10 !important;
    }

    #projects .project-note {
      margin-top: 8px !important;
      line-height: 1.48 !important;
    }

    #projects .project-info-card .mt-5 {
      margin-top: 11px !important;
    }

    #projects .tool-badge {
      min-height: 25px !important;
      padding-inline: 9px !important;
      font-size: 9.5px !important;
    }

    @media (max-width: 639px) {
      #projects .project-info-card {
        padding: 14px 15px !important;
        border-radius: 16px !important;
      }

      #projects .project-note {
        margin-top: 7px !important;
        font-size: 12.5px !important;
        line-height: 1.46 !important;
      }

      #projects .project-info-card .mt-5 {
        margin-top: 10px !important;
      }
    }

  
    /* Capabilities — compact and centered */
    #services .services-intro {
      max-width: 760px;
      margin-inline: auto;
      text-align: center;
    }

    #services .services-title,
    #services .services-copy {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      text-wrap: balance;
    }

    #services .services-copy {
      margin-top: 12px;
      max-width: 560px;
      line-height: 1.55;
    }

    #services .services-grid {
      margin-top: 24px;
      gap: 12px;
    }

    #services .service-card {
      min-height: 260px !important;
      align-items: center;
      justify-content: flex-start;
      padding: 17px 18px 16px !important;
      border-radius: 19px;
      text-align: center;
    }

    #services .service-card-top {
      width: 100%;
      justify-content: center;
    }

    #services .service-icon {
      width: 38px;
      height: 38px;
      border-radius: 12px;
    }

    #services .service-card-body {
      width: 100%;
      margin-top: 16px !important;
      text-align: center;
    }

    #services .service-kicker {
      text-align: center;
    }

    #services .service-card h3 {
      max-width: 300px;
      margin: 7px auto 0;
      font-size: clamp(1.32rem, 1.8vw, 1.68rem);
      line-height: 1.08;
      text-align: center;
      text-wrap: balance;
    }

    #services .service-card-body > p:last-child {
      max-width: 310px;
      margin: 8px auto 0 !important;
      font-size: 12.5px;
      line-height: 1.48 !important;
      text-align: center;
    }

    #services .service-chips {
      width: 100%;
      justify-content: center;
      margin-top: auto;
      padding-top: 14px !important;
      gap: 5px;
    }

    #services .service-chips span {
      min-height: 25px;
      padding-inline: 9px;
      font-size: 8.5px;
    }

    @media (max-width: 900px) {
      #services .service-card {
        min-height: 0 !important;
      }
    }

    @media (max-width: 639px) {
      #services .services-grid {
        margin-top: 22px;
        gap: 9px;
      }

      #services .service-card {
        padding: 15px 15px 14px !important;
        border-radius: 17px;
      }

      #services .service-card-body {
        margin-top: 14px !important;
      }

      #services .service-card h3 {
        max-width: 280px;
      }

      #services .service-card-body > p:last-child {
        max-width: 300px;
        font-size: 12.5px;
      }

      #services .service-chips {
        padding-top: 12px !important;
      }
    }

  
    /* Pricing packs — centered hierarchy */
    #launchOffer .pricing-packs-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      text-align: center;
    }

    #launchOffer .pricing-packs-meta {
      justify-content: center;
      margin-bottom: 10px;
    }

    #launchOffer .pricing-packs-head h3,
    #launchOffer .pricing-packs-head > p {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      text-wrap: balance;
    }

    #launchOffer .pricing-packs-head > p {
      max-width: 460px;
    }

    #launchOffer .pricing-pack {
      align-items: center;
      text-align: center;
    }

    #launchOffer .pricing-pack-top,
    #launchOffer .pricing-pack-top h4,
    #launchOffer .pricing-pack-summary,
    #launchOffer .pricing-pack-extra,
    #launchOffer .pricing-pack-note {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    #launchOffer .pricing-pack-badge {
      position: static;
      align-self: center;
      margin-bottom: 12px;
    }

    #launchOffer .pricing-pack-list {
      width: 100%;
      max-width: 300px;
      margin-left: auto;
      margin-right: auto;
    }

    #launchOffer .pricing-pack-list span {
      justify-content: center;
      text-align: center;
    }

    #launchOffer .pricing-pack-cta {
      width: 100%;
      justify-content: center;
      text-align: center;
    }

    #launchOffer .pricing-packs-disclaimer {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

  
  

    /* Readability pass: supporting copy stays legible during scroll */
    #bottleneck .conversion-tension-copy,
    #creativePaths .creative-paths-head > p:last-child,
    #projects .project-intro-copy,
    #categoryDescription,
    #services .services-copy,
    #method .method-intro-copy,
    #contact .section-reveal > p {
      color: #B7BDC4;
      text-shadow: 0 1px 18px rgba(0,0,0,.18);
    }

    .pricing-pack-shared-cta-wrap {
      display: flex;
      justify-content: center;
      margin-top: 24px;
    }

    .pricing-pack-shared-cta {
      width: min(100%, 430px);
      min-height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 0 24px;
      border: 1px solid rgba(207,230,90,.34);
      border-radius: 17px;
      background: var(--brand-lime);
      color: #10140A;
      box-shadow: 0 18px 42px rgba(0,0,0,.20), 0 0 34px rgba(207,230,90,.09);
      font-size: 13.5px;
      font-weight: 800;
      letter-spacing: -.01em;
      transition: transform .28s var(--ease), box-shadow .28s ease, filter .28s ease;
    }

    .pricing-pack-shared-cta svg {
      width: 16px;
      height: 16px;
      transition: transform .28s var(--ease);
    }

    .pricing-pack-shared-cta:hover,
    .pricing-pack-shared-cta:focus-visible {
      transform: translateY(-2px);
      filter: brightness(1.04);
      box-shadow: 0 22px 54px rgba(0,0,0,.24), 0 0 40px rgba(207,230,90,.14);
      outline: none;
    }

    .pricing-pack-shared-cta:hover svg,
    .pricing-pack-shared-cta:focus-visible svg {
      transform: translate(2px,-2px);
    }

    @media (max-width: 639px) {
      .pricing-pack-kicker { font-size: 10px; }
      .pricing-pack-top h4 { font-size: 1.46rem; }
      .pricing-pack-summary { font-size: 13.5px; }
      .pricing-pack-extra { font-size: 12.5px; }
      .pricing-pack-list span { font-size: 12px; line-height: 1.5; }
      .pricing-pack-note { font-size: 11.5px; }
      .pricing-packs-disclaimer { font-size: 12.5px; }
      .pricing-pack-shared-cta-wrap { margin-top: 20px; padding-inline: 4px; }
      .pricing-pack-shared-cta { min-height: 54px; font-size: 13px; }
    }


/* Portfolio conversion / accessibilty - incremental additions, 2026-10-09 */
.skip-link {position:fixed;z-index:2000;top:12px;left:12px;padding:12px 18px;background:#CFE65A;color:#0F1215;border-radius:10px;font-weight:700;transform:translateY(-160%);transition:transform .2s ease}
.skip-link:focus {transform:translateY(0)}
:where(a,button,input,textarea,select):focus-visible {outline:2px solid #CFE65A;outline-offset:4px}
:where(#projects,#caseMyWay,#bottleneck,#fit,#services,#creativePaths,#launchOffer,#method,#contact) {scroll-margin-top:86px}
.hero-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}
.hero-cta {display:inline-flex;min-height:50px;align-items:center;justify-content:center;gap:9px;padding:12px 22px;border-radius:999px;text-decoration:none;font-size:13px;font-weight:700;line-height:1.2;transition:background .2s ease,transform .2s ease,border-color .2s ease}
.hero-cta:hover {transform:translateY(-2px)}
.hero-cta-primary {background:#CFE65A;color:#0F1215;border:1px solid #CFE65A}
.hero-cta-primary:hover {background:#e2f48f}
.hero-cta-secondary {background:rgba(255,255,255,.045);color:#f3f5f6;border:1px solid rgba(255,255,255,.24)}
.hero-cta-secondary:hover {border-color:#CFE65A}
#caseMyWay {position:relative;padding:clamp(74px,8vw,124px) 0;background:transparent!important}
.case-study-wrap {max-width:1200px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);align-items:center;gap:clamp(24px,5vw,75px)}
.case-study-kicker {display:block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#CFE65A;margin-bottom:17px}
.case-study-title {max-width:740px;font-size:clamp(2.55rem,5vw,5.5rem);line-height:1;letter-spacing:-.065em;font-weight:700;margin:0;text-wrap:balance}
.case-study-title span {display:block;color:#a5abb0}
.case-study-description {max-width:600px;color:#bbc0c3;font-size:clamp(15px,1.3vw,17px);line-height:1.7;margin:23px 0 28px}
.case-study-steps {list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0}
.case-study-steps li {background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.095);padding:15px;border-radius:14px;min-height:92px;text-align:left}
.case-study-steps small {display:block;color:#CFE65A;font-size:10px;letter-spacing:.15em;font-weight:700;margin-bottom:8px}
.case-study-steps strong {display:block;font-size:14px;color:#f3f5f6}
.case-study-disclaimer {max-width:600px;color:#9ca0a5;font-size:12px;line-height:1.6;margin-top:22px}
.case-study-media {position:relative;width:min(100%,410px);margin-inline:auto;aspect-ratio:9/16;max-height:670px;overflow:hidden;border-radius:28px;border:1px solid rgba(207,230,90,.25);background:linear-gradient(140deg,#1f2924,#080b0d 70%);box-shadow:0 30px 85px rgba(0,0,0,.36)}
.case-study-media video {display:block;width:100%;height:100%;object-fit:cover}
.case-study-media-label {position:absolute;z-index:2;bottom:17px;left:17px;right:17px;padding:10px 14px;color:#f3f5f6;background:rgba(10,14,16,.72);border:1px solid rgba(255,255,255,.15);border-radius:12px;backdrop-filter:blur(9px);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.pricing-packs-mobile-hint {display:none;color:#b2b7b8;font-size:12px;text-align:center;margin:15px 18px 0}
@media(max-width:799px) {.case-study-wrap {grid-template-columns:1fr}.case-study-copy {max-width:650px;margin-inline:auto;text-align:center}.case-study-title,.case-study-description,.case-study-disclaimer {margin-left:auto;margin-right:auto}.case-study-media {width:min(100%,360px);max-height:none}}
@media(max-width:639px) {.hero-actions {justify-content:center;margin-top:24px}.hero-cta {flex:1 1 165px;max-width:240px}.case-study-steps {gap:9px}.case-study-steps li {padding:12px}.case-study-steps li strong {font-size:13px}.case-study-media {width:min(100%,320px)}.pricing-packs-mobile-hint {display:block}#pricingPackRail {scroll-behavior:auto}#pricingPackRail:focus-visible {outline:2px solid #CFE65A;outline-offset:4px}}
@media(prefers-reduced-motion:reduce) {.hero-cta,.skip-link {transition:none!important}.hero-cta:hover {transform:none}}

/* Mobile QA correction: readable four-step deliverables instead of squeezed 7-column rail. */
@media (max-width: 639px) {
  .deliverables-card { padding: 20px 16px; overflow: visible; }
  .deliverables-head { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
  .deliverables-head h3 { max-width: 280px; font-size: clamp(1.35rem, 6vw, 1.7rem); line-height: 1.15; }
  .deliverables-flow {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .deliverable-arrow { display: none !important; }
  .deliverable-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 15px 9px 13px !important;
    min-height: 108px;
    border: 1px solid rgba(255,255,255,.095);
    background: rgba(255,255,255,.025);
    border-radius: 14px;
    text-align: center;
  }
  .deliverable-step > div { min-width: 0; width: 100%; }
  .deliverable-step strong { font-size: 12px; line-height: 1.3; }
  .deliverable-step small { font-size: 10px; line-height: 1.45; color: #a5abb3; }
  .deliverable-icon { flex: 0 0 34px; }
  .deliverable-index { top: 8px; right: 10px; }
}