*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --violet: #7B3FE4;
    --violet-light: #9D6EF0;
    --violet-dim: rgba(123,63,228,0.15);
    --black: #080808;
    --dark: #0f0f0f;
    --dark2: #161616;
    --white: #F7F7F7;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Manrope', system-ui, sans-serif;
  }

  html { scroll-behavior: smooth; }
  body {
    background: var(--black);
    color: var(--white);
    font-family: var(--sans);
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    cursor: none;
  }

  /* Cursor */
  .cursor {
    position: fixed; width: 8px; height: 8px;
    background: var(--violet); border-radius: 50%;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%,-50%);
    transition: width .2s, height .2s;
  }
  .cursor-ring {
    position: fixed; width: 34px; height: 34px;
    border: 1.5px solid rgba(123,63,228,0.5);
    border-radius: 50%; pointer-events: none; z-index: 9998;
    transform: translate(-50%,-50%);
    transition: left .07s ease-out, top .07s ease-out, width .2s, height .2s, border-color .2s;
  }
  .cursor.big { width: 5px; height: 5px; }
  .cursor-ring.big { width: 50px; height: 50px; border-color: var(--violet); }

  /* Nav */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.4rem 3.5rem;
    transition: background .3s, backdrop-filter .3s, border-color .3s;
    border-bottom: 1px solid transparent;
  }
  nav.scrolled {
    background: rgba(8,8,8,0.9);
    backdrop-filter: blur(18px);
    border-bottom-color: rgba(255,255,255,0.05);
  }
  .nav-logo img { height: 38px; width: auto; display: block; }
  .nav-links { display: flex; gap: 2.5rem; list-style: none; }
  .nav-links a {
    font-size: .75rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(247,247,247,0.4);
    text-decoration: none; transition: color .2s;
  }
  .nav-links a:hover { color: var(--white); }
  .nav-cta {
    font-size: .75rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--white);
    background: var(--violet); padding: .55rem 1.5rem;
    border-radius: 2px; text-decoration: none;
    transition: background .2s, transform .15s;
  }
  .nav-cta:hover { background: var(--violet-light); transform: translateY(-1px); }

  /* Hero */
  .hero {
    min-height: 100vh;
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: center; padding: 0 3.5rem; gap: 4rem;
    position: relative; overflow: hidden;
  }
  .hero-bg-glow {
    position: absolute; width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(123,63,228,0.14) 0%, transparent 65%);
    top: 50%; left: 40%; transform: translate(-50%,-50%);
    pointer-events: none;
  }
  .hero-left { position: relative; z-index: 1; }
  .hero-eyebrow {
    display: flex; align-items: center; gap: .7rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .2em;
    text-transform: uppercase; color: var(--violet);
    margin-bottom: 1.6rem;
    opacity: 0; animation: fadeUp .7s .15s forwards;
  }
  .hero-eyebrow::before { content:''; width:22px; height:1px; background:var(--violet); display:block; }
  h1.hero-title {
    font-family: var(--serif);
    font-size: clamp(3.2rem, 5.5vw, 6rem);
    font-weight: 900; line-height: .95; letter-spacing: -.03em;
    margin-bottom: 1.8rem;
    opacity: 0; animation: fadeUp .7s .3s forwards;
  }
  h1.hero-title em { font-style: italic; color: rgba(247,247,247,.45); }
  h1.hero-title strong { color: var(--violet); font-style: normal; }
  .hero-sub {
    font-size: .95rem; font-weight: 300;
    color: rgba(247,247,247,.5); max-width: 420px; line-height: 1.85;
    margin-bottom: 2.8rem;
    opacity: 0; animation: fadeUp .7s .45s forwards;
  }
  .hero-btns {
    display: flex; gap: 1.2rem; align-items: center;
    opacity: 0; animation: fadeUp .7s .6s forwards;
  }
  .btn-v {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--violet); color: var(--white);
    font-size: .78rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; padding: .9rem 1.9rem;
    border-radius: 2px; text-decoration: none;
    transition: background .2s, transform .15s, box-shadow .2s;
  }
  .btn-v:hover { background: var(--violet-light); transform: translateY(-2px); box-shadow: 0 12px 36px rgba(123,63,228,.3); }
  .btn-line {
    display: inline-flex; align-items: center; gap: .5rem;
    color: rgba(247,247,247,.5); font-size: .78rem; font-weight: 500;
    letter-spacing: .05em; text-decoration: none; transition: color .2s;
  }
  .btn-line:hover { color: var(--white); }
  .btn-line .arr { transition: transform .2s; }
  .btn-line:hover .arr { transform: translateX(4px); }

  /* Hero right */
  .hero-right {
    position: relative; z-index: 1;
    display: flex; justify-content: flex-end;
    opacity: 0; animation: fadeIn .9s .4s forwards;
  }
  .hero-card {
    width: 100%; max-width: 500px;
    aspect-ratio: 4/5;
    background: var(--dark2);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 4px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1.4rem; position: relative; overflow: hidden;
  }
  .hero-card-bg {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, #0e0e1c 0%, #16101e 60%, #0a0a0a 100%);
  }
  .hero-logo-big { position: relative; z-index: 1; }
  .hero-logo-big img { width: 120px; height: auto; display: block; }
  .hero-wordmark {
    position: relative; z-index: 1;
    font-family: var(--serif); font-size: 2.8rem; font-weight: 900;
    letter-spacing: -.04em; color: var(--white); line-height: 1;
  }
  .hero-wordmark span { color: var(--violet); }
  .hero-tagline-sm {
    position: relative; z-index: 1;
    font-size: .65rem; font-weight: 600; letter-spacing: .2em;
    text-transform: uppercase; color: rgba(255,255,255,.28);
  }
  .hero-badge {
    position: absolute; bottom: 1.4rem; left: 1.4rem; z-index: 2;
    background: rgba(0,0,0,.75); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.08); border-radius: 2px;
    padding: .65rem 1rem;
  }
  .hero-badge strong { display: block; font-family: var(--serif); font-size: 1.1rem; font-weight: 900; color: var(--violet); line-height: 1; }
  .hero-badge span { font-size: .65rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); }

  /* Ticker */
  .ticker-wrap {
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: var(--dark); padding: .95rem 0;
  }
  .ticker { display: flex; gap: 3rem; animation: ticker 24s linear infinite; white-space: nowrap; width: max-content; }
  .ticker-i { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(247,247,247,.28); display: flex; align-items: center; gap: 1rem; }
  .ticker-i b { color: var(--violet); font-size: .65rem; font-weight: 400; }
  @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* Statement */
  .statement {
    padding: 7rem 3.5rem; background: var(--dark);
    text-align: center; position: relative; overflow: hidden;
  }
  .statement-glow {
    position: absolute; top: 50%; left: 50%;
    width: 600px; height: 400px;
    background: radial-gradient(ellipse, rgba(123,63,228,.1), transparent 70%);
    transform: translate(-50%,-50%); pointer-events: none;
  }
  .statement-big {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 5vw, 5rem);
    font-weight: 900; line-height: 1.1; letter-spacing: -.025em;
    max-width: 850px; margin: 0 auto 1.5rem;
    position: relative; z-index: 1;
  }
  .statement-big em { color: var(--violet); font-style: italic; }
  .statement-sub {
    font-size: 1rem; font-weight: 300; color: rgba(247,247,247,.4);
    max-width: 520px; margin: 0 auto;
    position: relative; z-index: 1;
  }

  /* Services */
  .services { padding: 7rem 3.5rem; background: var(--black); }
  .section-label {
    display: flex; align-items: center; gap: .6rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .2em;
    text-transform: uppercase; color: var(--violet); margin-bottom: 1rem;
  }
  .section-label::before { content:''; width:20px; height:1px; background:var(--violet); display:block; }
  .section-title {
    font-family: var(--serif); font-size: clamp(2rem, 3.5vw, 3.5rem);
    font-weight: 900; line-height: 1.05; letter-spacing: -.025em;
  }
  .services-head { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 4rem; }
  .services-intro { font-size: .95rem; font-weight: 300; color: rgba(247,247,247,.45); line-height: 1.85; max-width: 380px; }
  .svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.05); }
  .svc-card {
    background: var(--dark); padding: 2.4rem;
    position: relative; overflow: hidden;
    transition: background .2s;
  }
  .svc-card::after {
    content:''; position: absolute; left:0; top:0;
    width:2px; height:0; background:var(--violet);
    transition: height .3s ease;
  }
  .svc-card:hover { background: #141414; }
  .svc-card:hover::after { height: 100%; }
  .svc-icon { font-size: 1.3rem; color: var(--violet); margin-bottom: 1.3rem; display: block; }
  .svc-name { font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; margin-bottom: .5rem; }
  .svc-desc { font-size: .84rem; font-weight: 300; color: rgba(247,247,247,.4); line-height: 1.7; }
  .svc-n { position: absolute; bottom: 1.2rem; right: 1.2rem; font-family: var(--serif); font-size: 3.2rem; font-weight: 900; color: rgba(255,255,255,.025); line-height: 1; }

  /* ===== PORTFOLIO — the main new section ===== */
  .portfolio { padding: 7rem 3.5rem; background: var(--dark); }
  .portfolio-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 3.5rem; }
  .portfolio-filter { display: flex; gap: .4rem; flex-wrap: wrap; }
  .filter-btn {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; padding: .4rem 1rem;
    border: 1px solid rgba(255,255,255,.12); border-radius: 2px;
    background: transparent; color: rgba(247,247,247,.4);
    cursor: none; transition: all .2s;
  }
  .filter-btn.active, .filter-btn:hover { border-color: var(--violet); color: var(--white); background: var(--violet-dim); }

  /* Masonry-style grid */
  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: auto;
    gap: 12px;
  }

  .pj { position: relative; overflow: hidden; border-radius: 3px; cursor: none; background: var(--dark2); border: 1px solid rgba(255,255,255,.05); }
  .pj:nth-child(1) { grid-column: span 7; grid-row: span 2; }
  .pj:nth-child(2) { grid-column: span 5; }
  .pj:nth-child(3) { grid-column: span 5; }
  .pj:nth-child(4) { grid-column: span 4; }
  .pj:nth-child(5) { grid-column: span 4; }
  .pj:nth-child(6) { grid-column: span 4; }

  .pj-media {
    width: 100%; display: block;
    background: var(--dark2);
    position: relative; overflow: hidden;
  }
  /* Placeholder backgrounds while no media loaded */
  .pj:nth-child(1) .pj-media { aspect-ratio: 16/12; background: linear-gradient(135deg, #0e0e20 0%, #1a0d2e 100%); }
  .pj:nth-child(2) .pj-media { aspect-ratio: 16/9;  background: linear-gradient(135deg, #100e1a 0%, #1c1c1c 100%); }
  .pj:nth-child(3) .pj-media { aspect-ratio: 16/9;  background: linear-gradient(135deg, #0a0a14 0%, #181018 100%); }
  .pj:nth-child(4) .pj-media { aspect-ratio: 4/3;   background: linear-gradient(135deg, #0d0d0d 0%, #1a1420 100%); }
  .pj:nth-child(5) .pj-media { aspect-ratio: 4/3;   background: linear-gradient(135deg, #0e1018 0%, #181818 100%); }
  .pj:nth-child(6) .pj-media { aspect-ratio: 4/3;   background: linear-gradient(135deg, #100a1a 0%, #0f0f0f 100%); }

  /* Actual img / video inside .pj-media */
  .pj-media img, .pj-media video, .pj-media iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: center; display: block;
    transition: transform .55s cubic-bezier(.25,.46,.45,.94);
  }
  .pj:hover .pj-media img,
  .pj:hover .pj-media video { transform: none; }

  /* Placeholder icon (shown when no real media) */
  .pj-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .pj-placeholder svg { width: 32px; height: 32px; fill: none; stroke: rgba(123,63,228,.35); stroke-width: 1.5; }

  /* Play button overlay for video items */
  .pj-play {
    position: absolute; top: 1rem; right: 1rem;
    width: 36px; height: 36px;
    background: rgba(123,63,228,.85); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .25s;
  }
  .pj-play svg { width: 14px; height: 14px; fill: #fff; margin-left: 2px; }
  .pj[data-type="video"]:hover .pj-play { opacity: 1; }

  /* Hover overlay */
  .pj-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8,8,8,.92) 0%, rgba(8,8,8,.2) 55%, transparent 100%);
    opacity: 0; transition: opacity .3s;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.5rem;
  }
  .pj:hover .pj-overlay { opacity: 1; }
  .pj-cat { font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--violet); margin-bottom: .3rem; }
  .pj-name { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--white); line-height: 1.2; margin-bottom: .5rem; }
  .pj-year { font-size: .68rem; font-weight: 400; color: rgba(247,247,247,.4); }

  /* Always-visible bottom strip on featured project */
  .pj:nth-child(1) .pj-strip {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(to top, rgba(8,8,8,.9) 0%, transparent 100%);
  }
  .pj-strip-cat { font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--violet); margin-bottom: .2rem; }
  .pj-strip-name { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: var(--white); }

  /* Load more */
  .portfolio-more { text-align: center; margin-top: 3rem; }
  .btn-outline {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(247,247,247,.55);
    border: 1px solid rgba(255,255,255,.12); border-radius: 2px;
    padding: .9rem 2rem; text-decoration: none;
    transition: all .2s;
  }
  .btn-outline:hover { border-color: var(--violet); color: var(--white); background: var(--violet-dim); }





  /* ===== PROJECT MODAL / CASE STUDIES ===== */
  .pj { isolation: isolate; }
  .pj-media::after {
    content:''; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%);
    pointer-events:none;
  }
  .pj-logo-cover {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    padding: 2rem; background: linear-gradient(135deg,#07070c 0%,#11101a 60%,#080808 100%);
  }
  .pj-logo-cover img { width: 88%; height: auto; max-height: 82%; object-fit: contain; }

  .project-modal {
    position: fixed; inset: 0; z-index: 500;
    display: none; align-items: center; justify-content: center;
    padding: 2rem; background: rgba(5,5,8,.78);
    backdrop-filter: blur(18px);
  }
  .project-modal.open { display: flex; }
  .project-modal__panel {
    width: min(1180px, 100%); max-height: 90vh; overflow: auto;
    background: linear-gradient(180deg,#111116 0%,#080808 100%);
    border: 1px solid rgba(123,63,228,.38); border-radius: 18px;
    box-shadow: 0 28px 90px rgba(0,0,0,.65);
    position: relative;
  }
  .project-modal__close {
    position: sticky; top: 0; margin-left: auto; z-index: 4;
    width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.12);
    background: rgba(8,8,8,.88); color: var(--white); display:flex;
    align-items:center; justify-content:center; font-size: 1.35rem;
    cursor: none; border-radius: 0 16px 0 12px;
  }
  .case-wrap { padding: 0 2rem 2rem; }
  .case-head { display:grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; align-items:end; margin-bottom: 2rem; }
  .case-kicker { color: var(--violet); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; margin-bottom:.55rem; }
  .case-title { font-family:var(--serif); font-size:clamp(2.2rem,4vw,4.8rem); line-height:.95; letter-spacing:-.04em; }
  .case-desc { color:rgba(247,247,247,.55); font-size:.95rem; font-weight:300; line-height:1.85; max-width: 560px; }
  .case-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.2rem; }
  .case-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.78rem 1.15rem; border-radius:999px; text-decoration:none;
    border:1px solid rgba(255,255,255,.13); color:rgba(247,247,247,.78);
    font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
    transition: .2s ease;
  }
  .case-btn:hover { border-color:var(--violet); color:var(--white); background:var(--violet-dim); }
  .case-btn.primary { background:var(--violet); border-color:var(--violet); color:white; }

  .case-hero {
    width:100%; border-radius:14px; overflow:hidden; background:#0c0c12;
    border:1px solid rgba(255,255,255,.08); margin-bottom: 1.3rem;
  }
  .case-hero video, .case-hero img { width:100%; display:block; max-height:72vh; object-fit:contain; background:#050505; }
  .case-hero iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: min(70vh, 620px);
    display: block;
    border: 0;
    background: #000;
  }
  .pj-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
  }

  .case-section { margin-top: 2.2rem; }
  .case-section-title {
    display:flex; align-items:center; gap:.75rem; color:var(--violet);
    font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
    margin-bottom:1rem;
  }
  .case-section-title::before { content:''; width:26px; height:1px; background:var(--violet); }
  .case-device-mobile { display:none; }
  .case-device-desktop { display:block; }
  .case-gallery { display:grid; grid-template-columns: 1fr; gap: 16px; }
  .case-gallery img, .case-gallery video {
    width:100%; height:auto; border-radius:12px; border:1px solid rgba(255,255,255,.08);
    background:#09090e; object-fit:contain; aspect-ratio:auto; display:block;
  }
  .case-gallery .portrait, .case-gallery .wide { grid-column:auto; aspect-ratio:auto; object-fit:contain; }
  .case-gallery video { object-fit:contain; }
  .zoom-img {
    width:100%; padding:0; border:0; background:transparent; display:block;
    cursor:none; text-align:left;
  }
  .image-zoom {
    position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center;
    padding:2rem; background:rgba(0,0,0,.9); backdrop-filter:blur(14px);
  }
  .image-zoom.open { display:flex; }
  .image-zoom img { max-width:96vw; max-height:90vh; object-fit:contain; border-radius:12px; }
  .image-zoom-close {
    position:fixed; top:1rem; right:1rem; width:44px; height:44px;
    border:1px solid rgba(255,255,255,.2); background:#080808; color:#fff;
    border-radius:999px; font-size:1.5rem; line-height:1; cursor:none;
  }

  .ba-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ba-card { border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden; background:#0b0b10; }
  .ba-media { position:relative; aspect-ratio:16/9; background:#070707; }
  .ba-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity .22s ease; }
  .ba-media img.ba-before { opacity:0; }
  .ba-card.show-before img.ba-before { opacity:1; }
  .ba-card.show-before img.ba-after { opacity:0; }
  .ba-foot { display:flex; justify-content:space-between; align-items:center; padding:.75rem .85rem; gap:.7rem; }
  .ba-title { font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:rgba(247,247,247,.65); }
  .ba-toggle { border:1px solid rgba(123,63,228,.45); background:var(--violet-dim); color:var(--white); border-radius:999px; padding:.45rem .75rem; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; cursor:none; }

  .loop-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .loop-card { border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden; background:#0b0b10; }
  .loop-card video { width:100%; display:block; aspect-ratio:9/16; object-fit:cover; background:#050505; }
  .loop-card__body { padding:.85rem; }
  .loop-card__title { font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--white); margin-bottom:.35rem; }
  .loop-card__meta { font-size:.72rem; color:rgba(247,247,247,.42); }

  /* Toolset */
  .toolset {
    padding: 7rem 3.5rem;
    background: linear-gradient(180deg, #0b0b10 0%, #101018 100%);
    position: relative;
    overflow: hidden;
  }
  .toolset::before {
    content:''; position:absolute; inset:auto auto 0 -120px;
    width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(123,63,228,.16) 0%, transparent 70%);
    pointer-events:none;
  }
  .toolset::after {
    content:''; position:absolute; top:70px; right:-80px;
    width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%);
    pointer-events:none;
  }
  .toolset-head { display:grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items:end; margin-bottom: 3.5rem; position:relative; z-index:1; }
  .toolset-intro { font-size:.95rem; font-weight:300; color:rgba(247,247,247,.45); line-height:1.9; max-width: 460px; }
  .tool-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; position:relative; z-index:1; }
  .tool-card {
    background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%);
    border:1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 1.35rem;
    min-height: 250px;
    display:flex; flex-direction:column; justify-content:space-between;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .tool-card:hover { transform: translateY(-4px); border-color: rgba(123,63,228,.45); box-shadow: 0 18px 40px rgba(0,0,0,.22); }
  .tool-logo {
    width: 96px; height: 76px;
    display:flex; align-items:center; justify-content:flex-start;
    margin-bottom: 1.25rem; overflow: visible;
    background: transparent; border: 0;
  }
  .tool-logo img { display:block; width: auto; height: auto; object-fit: contain; }
  .tool-logo .logo-davinci { width: 82px; }
  .tool-logo .logo-nuke { width: 86px; }
  .tool-logo .logo-comfyui { width: 112px; max-width: 128px; }
  .tool-logo .logo-adobe { width: 98px; max-width: 112px; }
  .tool-kicker { font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--violet); margin-bottom: .55rem; }
  .tool-name { font-family: var(--serif); font-size: 1.45rem; font-weight: 900; letter-spacing: -.03em; line-height: 1.05; margin-bottom: .75rem; }
  .tool-desc { font-size: .84rem; font-weight: 300; color: rgba(247,247,247,.42); line-height: 1.75; }
  .tool-meta { margin-top: 1.25rem; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(247,247,247,.28); }
  .tool-note { margin-top: 2rem; font-size: .78rem; color: rgba(247,247,247,.30); letter-spacing:.05em; position:relative; z-index:1; }

  /* Process */
  .process { padding: 7rem 3.5rem; background: var(--black); }
  .process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; margin-top: 4rem; }
  .ps { position: relative; }
  .ps::after {
    content:''; position: absolute; top: 1.5rem; left: calc(100% + 1rem);
    width: calc(100% - 2rem); height: 1px;
    background: linear-gradient(to right, rgba(123,63,228,.3), transparent);
  }
  .ps:last-child::after { display: none; }
  .ps-n { font-family: var(--serif); font-size: 4rem; font-weight: 900; color: rgba(123,63,228,.12); line-height: 1; margin-bottom: .4rem; }
  .ps-t { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .4rem; }
  .ps-d { font-size: .83rem; font-weight: 300; color: rgba(247,247,247,.38); line-height: 1.7; }

  /* Stats */
  .stats-band {
    display: grid; grid-template-columns: repeat(4,1fr);
    background: var(--violet); padding: 5rem 3.5rem; gap: 2rem; text-align: center;
  }
  .stat-n { font-family: var(--serif); font-size: 3.8rem; font-weight: 900; color: var(--white); line-height: 1; margin-bottom: .3rem; }
  .stat-l { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }

  /* Contact */
  .contact { padding: 7rem 3.5rem; background: var(--dark); }
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; margin-top: 3rem; }
  .contact-tag { font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1.4rem; }
  .contact-tag span { color: var(--violet); font-style: italic; }
  .contact-sub { font-size: .9rem; font-weight: 300; color: rgba(247,247,247,.4); line-height: 1.85; margin-bottom: 2rem; }
  .contact-links { display: flex; flex-direction: column; gap: .75rem; }
  .c-link { display: flex; align-items: center; gap: .7rem; font-size: .82rem; color: rgba(247,247,247,.45); text-decoration: none; transition: color .2s; }
  .c-link::before { content:'→'; color: var(--violet); }
  .c-link:hover { color: var(--violet); }
  .c-form { display: flex; flex-direction: column; gap: .9rem; }
  .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
  .f-field { display: flex; flex-direction: column; gap: .3rem; }
  .f-field label { font-size: .65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(247,247,247,.3); }
  .f-field input, .f-field textarea, .f-field select {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: 2px; padding: .75rem .95rem;
    font-family: var(--sans); font-size: .85rem; color: var(--white);
    outline: none; transition: border-color .2s, background .2s;
  }
  .f-field input:focus, .f-field textarea:focus, .f-field select:focus {
    border-color: rgba(123,63,228,.5); background: rgba(123,63,228,.05);
  }
  .f-field textarea { resize: vertical; min-height: 100px; }
  .f-field select option { background: var(--dark); }
  .f-submit {
    align-self: flex-start; background: var(--violet); color: var(--white);
    font-family: var(--sans); font-size: .75rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .95rem 2rem; border: none; border-radius: 2px;
    cursor: none; transition: background .2s, transform .15s, box-shadow .2s;
  }
  .f-submit:hover { background: var(--violet-light); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(123,63,228,.35); }

  /* Footer */
  footer {
    background: var(--black); border-top: 1px solid rgba(255,255,255,.05);
    padding: 2.5rem 3.5rem;
    display: flex; align-items: center; justify-content: space-between;
  }
  .foot-logo img { height: 30px; width: auto; }
  .foot-copy { font-size: .7rem; color: rgba(247,247,247,.2); }
  .foot-svc { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,247,247,.2); }

  /* Animations */
  @keyframes fadeUp { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  .reveal { opacity:0; transform:translateY(28px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.visible { opacity:1; transform:translateY(0); }

  /* Responsive */
  @media (max-width: 900px) {
    nav { padding: 1.2rem 1.5rem; }
    .nav-links { display: none; }
    .hero { grid-template-columns: 1fr; padding: 6rem 1.5rem 3rem; min-height: auto; }
    .hero-right { justify-content: center; }
    section, .services, .portfolio, .process, .contact { padding: 4.5rem 1.5rem; }
    .statement { padding: 5rem 1.5rem; }
    .services-head { grid-template-columns: 1fr; }
    .svc-grid { grid-template-columns: 1fr 1fr; }
    .portfolio-grid { grid-template-columns: 1fr; gap: 10px; }
    .pj:nth-child(n) { grid-column: span 1; grid-row: span 1; }
    .toolset-head { grid-template-columns: 1fr; }
    .tool-grid { grid-template-columns: 1fr 1fr; }
    .process-steps { grid-template-columns: 1fr 1fr; }
    .ps::after { display: none; }
    .stats-band { grid-template-columns: 1fr 1fr; padding: 3.5rem 1.5rem; }
    .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
    .f-row { grid-template-columns: 1fr; }
    footer { flex-direction: column; gap: 1rem; text-align: center; padding: 2rem 1.5rem; }
  }
  @media (max-width: 620px) {
    .tool-grid, .svc-grid, .process-steps, .stats-band { grid-template-columns: 1fr; }
  }


  @media (max-width: 900px) {
    .project-modal { padding: .7rem; }
    .project-modal__panel { max-height: 92vh; border-radius: 14px; }
    .case-wrap { padding: 0 1rem 1rem; }
    .case-head { grid-template-columns: 1fr; gap: .9rem; }
    .case-desc { font-size:.86rem; }
    .case-device-desktop { display:none; }
    .case-device-mobile { display:block; }
    .case-device-mobile .case-gallery { display:flex; overflow-x:auto; gap: 14px; scroll-snap-type:x mandatory; padding-bottom:.7rem; }
    .case-device-mobile .case-gallery .zoom-img { min-width: 86vw; max-width: 86vw; scroll-snap-align:center; }
    .case-device-mobile .case-gallery img { width:100%; height:auto; object-fit:contain; aspect-ratio:auto; }
    .case-device-desktop .case-gallery { display:none; }
    .ba-grid { grid-template-columns: 1fr; }
    .loop-grid { display:flex; overflow-x:auto; gap:12px; scroll-snap-type:x mandatory; padding-bottom:.4rem; }
    .loop-card { min-width: 72vw; scroll-snap-align:center; }
    .pj-overlay { opacity: 1; background: linear-gradient(to top, rgba(8,8,8,.84) 0%, transparent 72%); }
    .pj-play { opacity: 1; }
  }
  @media (max-width: 620px) {
    body { cursor: auto; }
    .cursor, .cursor-ring { display:none; }
    .filter-btn, .pj, .f-submit, .project-modal__close, .ba-toggle, .zoom-img, .image-zoom-close, .diag-avoid-tag { cursor:pointer; }
    .case-actions { flex-direction: column; }
    .case-btn { width:100%; }
    .hero-btns-refined { align-items: stretch; }
    .hero-btns-refined .btn-v, .hero-btns-refined .btn-line-pill { width:100%; justify-content:center; }
    .hero-btn-note { text-align:center; max-width:none; }
    .diag-options.style-cards { grid-template-columns:1fr; }
    .diag-style-card { min-height:132px; }
    .diag-avoid-tag { width:100%; justify-content:flex-start; text-align:left; }
  }


  /* ===== VISUAL SCOPE — herramienta interactiva ===== */
  .diag-section {
    padding: 7rem 3.5rem;
    background:
      radial-gradient(circle at 18% 12%, rgba(123,63,228,.16), transparent 34%),
      radial-gradient(circle at 82% 76%, rgba(157,110,240,.10), transparent 32%),
      linear-gradient(180deg, #080808 0%, #101018 100%);
    position: relative;
    overflow: hidden;
  }
  .diag-section::before {
    content:''; position:absolute; inset:0;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 50% 44%, rgba(0,0,0,.9), transparent 74%);
    pointer-events:none;
  }
  .diag-wrap { max-width: 1120px; margin: 0 auto; position: relative; z-index: 1; }
  .diag-head { display:none; }
  .diag-mini-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 auto 1rem; max-width:1120px; }
  .diag-mini-kicker { font-size:.66rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:var(--violet); }
  .diag-mini-note { color:rgba(247,247,247,.42); font-size:.78rem; }
  .diag-bubble {
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 26px;
    box-shadow: 0 24px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.055);
    overflow: hidden;
    backdrop-filter: blur(16px);
  }
  .diag-topbar { padding:1rem 1.15rem; border-bottom:1px solid rgba(255,255,255,.075); display:flex; align-items:center; gap:1rem; justify-content:space-between; }
  .diag-status { display:flex; align-items:center; gap:.7rem; min-width: 185px; }
  .diag-orb { width:13px; height:13px; border-radius:50%; background:var(--violet); box-shadow:0 0 24px rgba(123,63,228,.85); animation: diagPulse 2.4s ease-in-out infinite; }
  .diag-status span { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.16em; color:rgba(247,247,247,.55); }
  .diag-progress { flex:1; height:6px; background:rgba(255,255,255,.07); border-radius:999px; overflow:hidden; }
  .diag-progress-fill { height:100%; width:9%; background:linear-gradient(90deg,var(--violet),var(--violet-light)); border-radius:999px; transition:width .32s ease; }
  .diag-count { font-size:.68rem; font-weight:800; color:rgba(247,247,247,.42); letter-spacing:.12em; text-transform:uppercase; min-width:70px; text-align:right; }
  .diag-body { padding: clamp(1.25rem,3vw,2.2rem); min-height: 560px; display:flex; flex-direction:column; }
  .diag-step { display:none; animation: fadeUp .35s ease forwards; }
  .diag-step.active { display:block; }
  .diag-question { font-family:var(--serif); font-size:clamp(1.75rem,3vw,3rem); line-height:1.05; letter-spacing:-.035em; margin-bottom:.7rem; }
  .diag-help { color:rgba(247,247,247,.46); font-size:.92rem; font-weight:300; line-height:1.75; max-width:760px; margin-bottom:1.45rem; }
  .diag-options { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
  .diag-option {
    position:relative; min-height:105px; text-align:left; padding:1rem;
    background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09);
    border-radius:16px; color:var(--white); font-family:var(--sans); cursor:none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    overflow:hidden;
  }
  .diag-option::after { content:''; position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg,var(--violet),transparent); transform:scaleX(0); transform-origin:left; transition:.22s ease; }
  .diag-option:hover, .diag-option.selected { transform:translateY(-2px); border-color:rgba(123,63,228,.58); background:rgba(123,63,228,.10); box-shadow:0 16px 44px rgba(0,0,0,.24); }
  .diag-option.selected::after { transform:scaleX(1); }
  .diag-option b { display:block; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.45rem; }
  .diag-option span { display:block; font-size:.76rem; color:rgba(247,247,247,.46); line-height:1.55; }

  /* V10: tarjetas de análisis más editoriales y premium */
  .hero-btns-refined { flex-wrap: wrap; align-items: center; gap: 1rem; }
  .hero-btns-refined .btn-v, .hero-btns-refined .btn-line-pill { min-height: 46px; }
  .btn-line-pill {
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    padding:.78rem 1.25rem;
    background:rgba(255,255,255,.025);
  }
  .btn-line-pill:hover { border-color:rgba(123,63,228,.55); background:rgba(123,63,228,.10); }
  .hero-btn-note {
    flex-basis:100%;
    max-width: 430px;
    font-size:.74rem;
    line-height:1.55;
    color:rgba(247,247,247,.34);
    letter-spacing:.02em;
  }
  .diag-option { isolation:isolate; }
  .diag-option > * { position:relative; z-index:2; }
  .diag-option::before {
    content: attr(data-icon);
    position:absolute;
    top:.9rem; right:1rem;
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    color:rgba(247,247,247,.55);
    font-size:.95rem;
    background:rgba(0,0,0,.18);
    z-index:1;
  }
  .diag-option b { max-width: calc(100% - 42px); }
  .diag-option em {
    display:inline-flex;
    margin-top:.8rem;
    padding:.28rem .55rem;
    border:1px solid rgba(255,255,255,.09);
    border-radius:999px;
    color:rgba(247,247,247,.42);
    font-style:normal;
    font-size:.62rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    background:rgba(0,0,0,.18);
  }
  .diag-options.style-cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .diag-style-card {
    min-height:156px;
    padding:1.05rem;
    background:linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018));
  }
  .diag-style-card .style-pattern {
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.88;
    transition: transform .35s ease, opacity .25s ease;
    pointer-events:none;
  }
  .diag-style-card:hover .style-pattern, .diag-style-card.selected .style-pattern { transform:scale(1.045); opacity:1; }
  .style-premium .style-pattern { background:
    radial-gradient(circle at 18% 12%, rgba(157,110,240,.28), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.13) 0 1px, transparent 1px 12px),
    linear-gradient(160deg, rgba(123,63,228,.14), transparent 58%); }
  .style-cinema .style-pattern { background:
    linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,255,255,.10) 42%, rgba(0,0,0,.28)),
    radial-gradient(ellipse at 80% 16%, rgba(123,63,228,.32), transparent 45%); }
  .style-organic .style-pattern { background:
    radial-gradient(circle at 22% 24%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 72%, rgba(157,110,240,.18), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.055), transparent); background-size: 18px 18px, auto, auto; }
  .style-urban .style-pattern { background:
    repeating-linear-gradient(100deg, rgba(255,255,255,.08) 0 1px, transparent 1px 9px),
    linear-gradient(135deg, rgba(123,63,228,.18), transparent 62%); }
  .style-ai .style-pattern { background:
    radial-gradient(circle at 18% 18%, rgba(123,63,228,.36), transparent 24%),
    radial-gradient(circle at 78% 38%, rgba(157,110,240,.24), transparent 28%),
    conic-gradient(from 120deg at 50% 70%, rgba(123,63,228,.25), transparent, rgba(255,255,255,.05), transparent); }
  .style-commercial .style-pattern { background:
    linear-gradient(90deg, rgba(123,63,228,.23) 0 24%, transparent 24% 34%, rgba(255,255,255,.07) 34% 50%, transparent 50%),
    linear-gradient(145deg, rgba(255,255,255,.04), transparent); }
  .diag-tags { display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:1rem; }
  .diag-avoid-tag {
    border:1px solid rgba(255,255,255,.11);
    border-radius:999px;
    background:rgba(255,255,255,.035);
    color:rgba(247,247,247,.64);
    padding:.62rem .9rem;
    font-family:var(--sans);
    font-size:.74rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:none;
    transition:.18s ease;
  }
  .diag-avoid-tag:hover, .diag-avoid-tag.selected { border-color:rgba(123,63,228,.6); color:var(--white); background:rgba(123,63,228,.13); transform:translateY(-1px); }
  .diag-filebox {
    border:1px dashed rgba(123,63,228,.42);
    border-radius:18px;
    padding:1rem;
    background:linear-gradient(180deg, rgba(123,63,228,.075), rgba(255,255,255,.025));
  }

  .diag-form-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:14px; }
  .diag-field { display:flex; flex-direction:column; gap:.4rem; }
  .diag-field.full { grid-column:1 / -1; }
  .diag-field label { font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,247,247,.35); }
  .diag-field input, .diag-field textarea, .diag-field select {
    background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10); border-radius:12px;
    color:var(--white); font-family:var(--sans); font-size:.88rem; padding:.9rem 1rem; outline:none;
  }
  .diag-field textarea { min-height:125px; resize:vertical; }
  .diag-field input:focus, .diag-field textarea:focus, .diag-field select:focus { border-color:rgba(123,63,228,.62); background:rgba(123,63,228,.055); }
  .diag-field select option { background:#111; color:#fff; }
  .diag-filebox {
    border:1px dashed rgba(157,110,240,.36); border-radius:16px; padding:1rem;
    background:rgba(123,63,228,.055);
  }
  .diag-filebox small { display:block; margin-top:.45rem; color:rgba(247,247,247,.38); font-size:.72rem; line-height:1.55; }
  .diag-file-list { margin-top:.75rem; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.18); border-radius:12px; padding:.75rem .85rem; color:rgba(247,247,247,.52); font-size:.75rem; line-height:1.6; }
  .diag-file-list b { color:var(--white); }
  .diag-file-list ul { margin:.35rem 0 0 1rem; color:rgba(247,247,247,.62); }
  .diag-inline-note { border:1px solid rgba(123,63,228,.22); background:rgba(123,63,228,.08); color:rgba(247,247,247,.58); border-radius:16px; padding:.9rem 1rem; font-size:.78rem; line-height:1.65; margin-top:1rem; }
  .diag-inline-note b { color:var(--violet-light); }
  .diag-summary-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin-bottom:1rem; }
  .diag-summary-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:1rem; min-height:96px; }
  .diag-summary-card span { display:block; font-size:.62rem; color:var(--violet-light); font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.45rem; }
  .diag-summary-card b { display:block; font-size:.95rem; line-height:1.35; }
  .diag-reading { border:1px solid rgba(123,63,228,.28); border-radius:18px; padding:1.15rem; background:linear-gradient(135deg, rgba(123,63,228,.12), rgba(255,255,255,.03)); color:rgba(247,247,247,.68); line-height:1.75; font-size:.9rem; margin-top:1rem; }
  .diag-final-content { opacity:0; transform:translateY(10px); pointer-events:none; max-height:0; overflow:hidden; transition:opacity .35s ease, transform .35s ease, max-height .35s ease; }
  .diag-final-content.ready { opacity:1; transform:translateY(0); pointer-events:auto; max-height:1200px; }
  .diag-processing.is-done { display:none; }
  .diag-consent {
    margin-top:1rem; padding:1rem; border-radius:16px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09);
    display:flex; gap:.85rem; align-items:flex-start;
  }
  .diag-consent input { margin-top:.2rem; accent-color:var(--violet); min-width:18px; min-height:18px; }
  .diag-consent label { color:rgba(247,247,247,.56); font-size:.78rem; line-height:1.65; }
  .diag-hp { position:absolute !important; left:-10000px !important; top:auto !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }
  .diag-final-submit { width:100%; justify-content:center; margin-top:1rem; padding:1rem 1.4rem; }
  .diag-send-note { margin-top:.7rem; color:rgba(247,247,247,.38); font-size:.76rem; line-height:1.6; text-align:center; }
  .diag-nav { margin-top:auto; padding-top:1.4rem; display:flex; justify-content:space-between; align-items:center; gap:1rem; }
  .diag-btn {
    border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(255,255,255,.045); color:rgba(247,247,247,.65);
    padding:.82rem 1.2rem; font-family:var(--sans); font-size:.72rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
    cursor:none; transition:.18s ease;
  }
  .diag-btn:hover { border-color:rgba(123,63,228,.52); color:#fff; background:rgba(123,63,228,.13); }
  .diag-btn.primary { background:var(--violet); color:#fff; border-color:var(--violet); box-shadow:0 12px 34px rgba(123,63,228,.22); }
  .diag-btn.primary:hover { background:var(--violet-light); }
  .diag-btn:disabled { opacity:.35; pointer-events:none; }
  .diag-submit-status { color:rgba(247,247,247,.42); font-size:.76rem; }
  .diag-processing { display:flex; gap:.7rem; align-items:center; color:rgba(247,247,247,.58); font-size:.82rem; margin-bottom:1rem; }
  .diag-spinner { width:18px; height:18px; border:2px solid rgba(255,255,255,.14); border-top-color:var(--violet-light); border-radius:50%; animation:diagSpin .8s linear infinite; }
  @keyframes diagSpin { to { transform:rotate(360deg); } }
  @keyframes diagPulse { 0%,100%{ transform:scale(.85); opacity:.72; } 50%{ transform:scale(1.12); opacity:1; } }
  .btn-v.diag-hero-btn { position:relative; overflow:hidden; isolation:isolate; }
  .btn-v.diag-hero-btn::after { content:''; position:absolute; top:0; bottom:0; left:-120%; width:44%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform:skewX(-18deg); animation:diagShine 3.8s ease-in-out infinite; z-index:-1; }
  @keyframes diagShine { 0%,70%,100%{ left:-120%; } 20%,45%{ left:135%; } }

  @media (max-width: 900px) {
    .diag-section { padding:4.5rem 1.5rem; }
    .diag-topbar { align-items:flex-start; flex-direction:column; }
    .diag-status, .diag-count { min-width:auto; text-align:left; }
    .diag-options, .diag-summary-grid { grid-template-columns:1fr; }
    .diag-form-grid { grid-template-columns:1fr; }
    .diag-body { min-height:auto; }
  }
  @media (max-width: 620px) {
    .diag-option, .diag-btn { cursor:pointer; }
    .diag-nav { flex-direction:column-reverse; align-items:stretch; }
    .diag-btn { width:100%; }
  }



  /* ===== DIAGNÓSTICO MOBILE FIX v6 ===== */
  @media (max-width: 768px) {
    html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
    body { cursor: auto; }
    .diag-section {
      padding: 3.25rem .85rem;
      overflow: visible;
    }
    .diag-wrap,
    .diag-mini-head,
    .diag-bubble,
    .diag-body,
    .diag-step,
    .diag-form-grid,
    .diag-field,
    .diag-filebox,
    .diag-summary-grid,
    .diag-reading,
    .diag-consent {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }
    .diag-mini-head {
      flex-direction: column;
      align-items: flex-start;
      gap: .45rem;
      margin-bottom: .85rem;
    }
    .diag-mini-note { font-size: .72rem; line-height: 1.45; }
    .diag-bubble {
      border-radius: 18px;
      overflow: visible;
    }
    .diag-topbar {
      padding: .85rem;
      gap: .75rem;
    }
    .diag-status { width: 100%; }
    .diag-progress { width: 100%; flex: none; }
    .diag-count { width: 100%; text-align: left; }
    .diag-body {
      padding: 1rem;
      min-height: auto;
    }
    .diag-question {
      font-size: clamp(1.9rem, 10vw, 2.55rem);
      line-height: .98;
      overflow-wrap: anywhere;
    }
    .diag-help {
      font-size: .86rem;
      line-height: 1.65;
      margin-bottom: 1rem;
    }
    .diag-options {
      grid-template-columns: 1fr;
      gap: .7rem;
    }
    .diag-option {
      min-height: auto;
      padding: .95rem;
      border-radius: 14px;
      cursor: pointer;
    }
    .diag-option b {
      font-size: .76rem;
      letter-spacing: .07em;
    }
    .diag-option span { font-size: .74rem; }
    .diag-form-grid {
      grid-template-columns: 1fr;
      gap: .85rem;
    }
    .diag-field label {
      font-size: .6rem;
      letter-spacing: .12em;
      line-height: 1.35;
    }
    .diag-field input,
    .diag-field textarea,
    .diag-field select {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      font-size: 16px; /* evita zoom automático en iPhone */
      line-height: 1.35;
      padding: .9rem .85rem;
      border-radius: 12px;
    }
    .diag-field textarea {
      min-height: 135px;
    }
    .diag-field input[type="file"] {
      padding: .85rem;
      white-space: normal;
      font-size: .82rem;
    }
    .diag-filebox {
      padding: .9rem;
      overflow: hidden;
    }
    .diag-file-list {
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word;
      font-size: .72rem;
    }
    .diag-summary-grid {
      grid-template-columns: 1fr;
      gap: .7rem;
    }
    .diag-summary-card {
      min-height: auto;
      padding: .9rem;
      overflow-wrap: anywhere;
    }
    .diag-reading {
      padding: 1rem;
      font-size: .84rem;
      line-height: 1.65;
      overflow-wrap: anywhere;
    }
    .diag-consent {
      padding: .9rem;
      gap: .7rem;
      border-radius: 14px;
    }
    .diag-consent label {
      font-size: .74rem;
      line-height: 1.55;
    }
    .diag-nav {
      position: sticky;
      bottom: 0;
      z-index: 8;
      margin: 1rem -1rem -1rem;
      padding: .85rem 1rem;
      background: linear-gradient(180deg, rgba(16,16,24,0), rgba(8,8,8,.96) 22%, rgba(8,8,8,.98) 100%);
      backdrop-filter: blur(12px);
      flex-direction: column-reverse;
      align-items: stretch;
    }
    .diag-btn {
      width: 100%;
      min-height: 50px;
      cursor: pointer;
    }
    .diag-submit-status {
      text-align: center;
      font-size: .72rem;
      line-height: 1.45;
    }
  }

  @media (max-width: 390px) {
    .diag-section { padding-left: .65rem; padding-right: .65rem; }
    .diag-body { padding: .85rem; }
    .diag-question { font-size: clamp(1.65rem, 9.5vw, 2.2rem); }
    .diag-field input,
    .diag-field textarea,
    .diag-field select { padding-left: .75rem; padding-right: .75rem; }
  }


  /* ===== DIAGNÓSTICO MOBILE FIX v7: material y referencias ===== */
  @media (max-width: 768px) {
    .diag-step[data-step="5"] {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
    }
    .diag-step[data-step="5"] .diag-form-grid {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      gap: .85rem;
      overflow: hidden;
    }
    .diag-step[data-step="5"] .diag-field,
    .diag-step[data-step="5"] .diag-filebox,
    .diag-step[data-step="5"] .diag-inline-note {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      overflow: hidden;
    }
    .diag-step[data-step="5"] .diag-field textarea,
    .diag-step[data-step="5"] .diag-field input,
    .diag-step[data-step="5"] #diag_archivo {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      overflow: hidden;
      white-space: normal;
    }
    .diag-step[data-step="5"] #diag_archivo {
      font-size: 14px;
      line-height: 1.35;
    }
    .diag-step[data-step="5"] #diag_archivo::file-selector-button {
      max-width: 100%;
      margin: 0 0 .55rem 0;
      display: block;
      white-space: normal;
      border: 0;
      border-radius: 999px;
      padding: .65rem .8rem;
      background: rgba(123,63,228,.18);
      color: #fff;
      font-family: var(--sans);
      font-weight: 800;
      letter-spacing: .04em;
    }
    .diag-step[data-step="5"] .diag-file-list,
    .diag-step[data-step="5"] .diag-file-list ul,
    .diag-step[data-step="5"] .diag-file-list li,
    .diag-step[data-step="5"] .diag-inline-note,
    .diag-step[data-step="5"] small,
    .diag-step[data-step="5"] label {
      max-width: 100%;
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .diag-step[data-step="5"] .diag-file-list ul {
      margin-left: 0;
      padding-left: 1rem;
    }
  }

  @media (max-width: 390px) {
    .diag-step[data-step="5"] .diag-filebox,
    .diag-step[data-step="5"] .diag-inline-note {
      padding-left: .75rem;
      padding-right: .75rem;
    }
    .diag-step[data-step="5"] #diag_archivo {
      font-size: 13px;
    }
  }



  /* ===== V12 · Visual Scope: ajustes premium de tarjetas e iconos ===== */
  .diag-mini-kicker::after {
    content: '';
    display: none;
  }

  .diag-option {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 1.1rem 1.1rem 1rem;
  }
  .diag-option::before {
    width: 42px;
    height: 42px;
    top: 1rem;
    right: 1rem;
    font-size: 1.12rem;
    line-height: 1;
    border-color: rgba(255,255,255,.16);
    background: rgba(8,8,8,.38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 26px rgba(0,0,0,.18);
  }
  .diag-option b {
    max-width: calc(100% - 56px);
    min-height: 2.1em;
    display: flex;
    align-items: center;
    font-size: .86rem;
    line-height: 1.22;
  }
  .diag-option span {
    max-width: calc(100% - 8px);
    font-size: .78rem;
    line-height: 1.58;
  }

  .diag-options.style-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
  .diag-style-card {
    min-height: 178px;
    padding: 1.2rem;
    justify-content: flex-end;
    border-color: rgba(255,255,255,.115);
  }
  .diag-style-card::before {
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
    top: 1.05rem;
    right: 1.05rem;
    color: rgba(255,255,255,.76);
    border-color: rgba(157,110,240,.34);
    background: rgba(0,0,0,.34);
    backdrop-filter: blur(10px);
  }
  .diag-style-card::after {
    height: 3px;
    background: linear-gradient(90deg, rgba(157,110,240,.95), rgba(123,63,228,.45), transparent);
  }
  .diag-style-card .style-pattern::after {
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(8,8,8,.05) 0%, rgba(8,8,8,.42) 48%, rgba(8,8,8,.74) 100%);
  }
  .diag-style-card b {
    max-width: calc(100% - 58px);
    min-height: auto;
    font-size: .94rem;
    letter-spacing: .095em;
  }
  .diag-style-card span {
    max-width: 100%;
    color: rgba(247,247,247,.58);
    font-size: .79rem;
  }
  .diag-style-card em {
    width: fit-content;
    max-width: 100%;
    white-space: normal;
    line-height: 1.25;
  }
  .diag-style-card.selected {
    border-color: rgba(157,110,240,.74);
    box-shadow: 0 18px 55px rgba(0,0,0,.30), 0 0 0 1px rgba(123,63,228,.12) inset;
  }

  @media (max-width: 900px) {
    .diag-options.style-cards {
      grid-template-columns: repeat(2, minmax(0,1fr));
    }
    .diag-style-card {
      min-height: 170px;
    }
  }

  @media (max-width: 620px) {
    .diag-options,
    .diag-options.style-cards {
      grid-template-columns: 1fr !important;
      width: 100%;
    }
    .diag-option {
      width: 100%;
      min-height: 112px;
      padding: 1rem 1rem .95rem;
      border-radius: 15px;
    }
    .diag-option::before {
      width: 42px;
      height: 42px;
      top: .95rem;
      right: .95rem;
      font-size: 1.1rem;
    }
    .diag-option b {
      max-width: calc(100% - 56px);
      font-size: .86rem;
      line-height: 1.25;
      min-height: 2.2em;
    }
    .diag-option span {
      max-width: 100%;
      padding-right: 0;
      font-size: .78rem;
    }
    .diag-style-card {
      min-height: 158px !important;
      padding: 1.05rem;
    }
    .diag-style-card::before {
      width: 44px;
      height: 44px;
      font-size: 1.15rem;
      top: 1rem;
      right: 1rem;
    }
    .diag-style-card b {
      max-width: calc(100% - 58px);
      font-size: .92rem;
    }
    .diag-style-card span {
      font-size: .8rem;
      line-height: 1.55;
    }
    .diag-style-card em {
      font-size: .6rem;
      padding: .26rem .5rem;
      margin-top: .65rem;
    }
  }



  /* ===== V16 · Desktop breathing room + first step clarity ===== */
  @media (min-width: 901px) {
    .diag-section {
      padding-top: 8.5rem;
      padding-bottom: 8.5rem;
    }
    .diag-wrap,
    .diag-mini-head {
      max-width: 1280px;
    }
    .diag-mini-head {
      margin-bottom: 1.35rem;
    }
    .diag-bubble {
      border-radius: 30px;
    }
    .diag-topbar {
      padding: 1.25rem 1.45rem;
    }
    .diag-body {
      padding: clamp(2.65rem, 3.35vw, 4rem);
      min-height: 650px;
    }
    .diag-question {
      font-size: clamp(2.25rem, 3.55vw, 3.8rem);
      line-height: 1.02;
      max-width: 980px;
      margin-bottom: 1rem;
    }
    .diag-help {
      font-size: 1rem;
      line-height: 1.85;
      max-width: 870px;
      margin-bottom: 2rem;
    }
    .diag-options {
      gap: 18px;
    }
    .diag-option {
      min-height: 144px;
      padding: 1.35rem 1.35rem 1.2rem;
      border-radius: 20px;
    }
    .diag-option::before {
      width: 50px;
      height: 50px;
      top: 1.25rem;
      right: 1.25rem;
      font-size: 1.28rem;
    }
    .diag-option b {
      max-width: calc(100% - 68px);
      font-size: .92rem;
      line-height: 1.28;
      min-height: 2.35em;
      margin-bottom: .65rem;
    }
    .diag-option span {
      font-size: .84rem;
      line-height: 1.68;
      max-width: 95%;
    }
    .diag-option em {
      margin-top: 1rem;
      font-size: .66rem;
      padding: .34rem .66rem;
    }
    .diag-options.style-cards {
      gap: 18px;
    }
    .diag-style-card {
      min-height: 220px;
      padding: 1.45rem;
    }
    .diag-style-card::before {
      width: 54px;
      height: 54px;
      font-size: 1.35rem;
      top: 1.25rem;
      right: 1.25rem;
    }
    .diag-style-card b {
      font-size: 1rem;
    }
    .diag-style-card span {
      font-size: .86rem;
      line-height: 1.68;
    }
  }



  /* ===== V17 HERO / PRIMERA IMPRESIÓN — más aire y jerarquía ===== */
  @media (min-width: 901px) {
    nav {
      padding: 1.15rem 3.9rem;
      gap: 2rem;
    }
    .nav-links {
      gap: 2.05rem;
      margin-left: auto;
      margin-right: 1.75rem;
    }
    .nav-links a {
      font-size: .68rem;
      letter-spacing: .16em;
    }
    .nav-cta {
      padding: .48rem 1.05rem;
      font-size: .66rem;
      letter-spacing: .14em;
      background: rgba(123,63,228,.18);
      border: 1px solid rgba(123,63,228,.45);
      box-shadow: none;
    }
    .nav-cta:hover {
      background: var(--violet);
    }
    .hero {
      grid-template-columns: minmax(0, .98fr) minmax(360px, .82fr);
      gap: clamp(3.6rem, 6vw, 7rem);
      padding: 6.2rem 4.6rem 3.2rem;
      min-height: 100svh;
      align-items: center;
    }
    .hero-left {
      max-width: 760px;
    }
    h1.hero-title {
      font-size: clamp(4rem, 5vw, 5.45rem);
      line-height: .98;
      max-width: 760px;
      margin-bottom: 2.15rem;
    }
    .hero-sub {
      max-width: 500px;
      font-size: 1rem;
      line-height: 1.85;
      margin-bottom: 2.05rem;
    }
    .hero-btns-refined {
      display: flex;
      flex-wrap: wrap;
      gap: .95rem 1.15rem;
      align-items: center;
      max-width: 540px;
    }
    .hero-btns-refined .diag-hero-btn {
      padding: .88rem 1.8rem;
    }
    .hero-btns-refined .btn-line-pill {
      padding: .82rem 1.5rem;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      color: rgba(247,247,247,.68);
      background: rgba(255,255,255,.015);
    }
    .hero-btns-refined .btn-line-pill:hover {
      border-color: rgba(123,63,228,.55);
      background: rgba(123,63,228,.10);
      color: var(--white);
    }
    .hero-btn-note {
      flex-basis: 100%;
      display: block;
      margin-top: .1rem;
      font-size: .78rem;
      color: rgba(247,247,247,.30);
      letter-spacing: .01em;
    }
    .hero-right {
      justify-content: center;
      align-self: center;
      transform: translateY(1.2rem);
    }
    .hero-card {
      max-width: 430px;
      aspect-ratio: 4 / 4.55;
      gap: 1.15rem;
      border-radius: 6px;
      box-shadow: 0 26px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
    }
    .hero-logo-big img {
      width: 104px;
    }
    .hero-wordmark {
      font-size: 2.45rem;
    }
    .hero-tagline-sm {
      font-size: .6rem;
      letter-spacing: .18em;
    }
    .hero-card-mini {
      position: relative;
      z-index: 1;
      max-width: 260px;
      text-align: center;
      font-size: .75rem;
      line-height: 1.65;
      color: rgba(247,247,247,.42);
      margin-top: .1rem;
    }
    .hero-badge {
      bottom: 1.25rem;
      left: 1.25rem;
      padding: .58rem .88rem;
    }
    .hero-badge strong {
      font-size: 1rem;
    }
  }

  @media (max-width: 900px) {
    .hero-card-mini { display:none; }
  }



  /* ===== V18 · Consentimiento móvil visible + copy más natural ===== */
  .diag-final-content.ready {
    max-height: none !important;
    overflow: visible !important;
  }
  .diag-consent {
    position: relative;
    z-index: 3;
  }
  .diag-consent input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex: 0 0 22px;
    appearance: auto;
    -webkit-appearance: checkbox;
    accent-color: var(--violet);
    cursor: pointer;
  }
  .diag-consent label {
    display: block;
    min-width: 0;
  }
  .diag-consent label strong {
    color: rgba(247,247,247,.88);
  }

  @media (max-width: 620px) {
    .diag-final-content.ready {
      max-height: none !important;
      overflow: visible !important;
    }
    .diag-summary-grid {
      grid-template-columns: 1fr !important;
    }
    .diag-reading {
      font-size: .82rem;
      line-height: 1.65;
      padding: .95rem;
      border-radius: 16px;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .diag-consent {
      display: grid !important;
      grid-template-columns: 26px minmax(0, 1fr);
      gap: .75rem;
      align-items: start;
      padding: .95rem;
      border-radius: 16px;
      background: rgba(123,63,228,.075);
      border-color: rgba(123,63,228,.32);
      overflow: visible;
    }
    .diag-consent input[type="checkbox"] {
      margin: .12rem 0 0 0;
      width: 22px;
      height: 22px;
      min-width: 22px;
      min-height: 22px;
    }
    .diag-consent label {
      font-size: .74rem;
      line-height: 1.55;
      color: rgba(247,247,247,.68);
      overflow-wrap: anywhere;
      word-break: normal;
    }
    .diag-consent label strong {
      display: block;
      margin-bottom: .25rem;
      color: rgba(247,247,247,.92);
      font-size: .78rem;
      line-height: 1.45;
    }
    .diag-final-submit {
      margin-top: 1rem;
      width: 100%;
      white-space: normal;
      text-align: center;
      line-height: 1.35;
    }
    .diag-send-note {
      font-size: .72rem;
      line-height: 1.5;
      padding: 0 .2rem;
    }
  }



  /* Parche UX diagnóstico: anclaje correcto con nav fija */
  #diagnostico { scroll-margin-top: 96px; }
  @media (max-width: 900px) { #diagnostico { scroll-margin-top: 78px; } }
  .diag-file-list .diag-file-warning { color:#ffb86c; margin-top:.45rem; }
  .diag-file-list .diag-file-ok { color:rgba(247,247,247,.68); }
  .diag-final-submit.is-sending, .diag-btn.is-sending { opacity:.72; pointer-events:none; }



/* Accessible navigation, progressive content and project pages. */
body { cursor:auto; }
a, button, .pj, .diag-option, .diag-btn, .ba-toggle, .zoom-img { cursor:pointer; }
a.pj { display:block; color:inherit; text-decoration:none; }
.cursor, .cursor-ring { display:none; }
.reveal { opacity:1; transform:none; }
:focus-visible { outline:3px solid #bda0ff; outline-offset:5px; }
.skip-link { position:fixed; top:-100px; left:1rem; z-index:10000; background:#fff; color:#080808; padding:1rem; }
.skip-link:focus { top:1rem; }
.nav-menu-toggle { display:none; background:#161616; border:1px solid #7b3fe4; color:#fff; padding:.6rem .9rem; border-radius:8px; }
.site-service-links { font-size:.8rem; line-height:1.8; }
.site-service-links a, .response-page a, .content-page a { color:#bda0ff; }
.response-page { max-width:760px; margin:10vh auto; padding:2rem; line-height:1.8; }
.content-page { max-width:1100px; margin:auto; padding:3rem 1.5rem 4rem; }
.content-page h1 { font-size:clamp(2.1rem,5vw,4rem); line-height:1.15; margin:1rem 0; }
.content-page h2 { margin:2rem 0 1rem; }
.content-page p { max-width:76ch; margin:1rem 0; }
.content-page img, .content-page video, .content-page iframe { max-width:100%; height:auto; border-radius:12px; }
.content-page iframe { width:100%; aspect-ratio:16/9; }
.project-media-summary { margin:1.25rem 0 0; }
.project-media-summary a {
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.7rem 1rem;
  border:1px solid #7b3fe4;
  border-radius:999px;
  color:#fff;
  background:#15111f;
  font-weight:700;
  text-decoration:none;
}
.project-media-summary a:hover,
.project-media-summary a:focus-visible { background:#24183a; border-color:#bda0ff; }
.project-gallery-anchor { scroll-margin-top:1rem; }
.project-hero-media {
  display:grid;
  place-items:center;
  width:100%;
  margin:2rem 0;
  overflow:hidden;
  border-radius:12px;
  background:#09090e;
}
.project-hero-media img,
.project-hero-media video {
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:min(80vh,900px);
  object-fit:contain;
  background:#09090e;
}
.project-hero-media iframe {
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  aspect-ratio:16/9;
  border:0;
}
.project-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:1.5rem; margin:2rem 0; }
.project-gallery figure { display:flex; min-width:0; margin:0; flex-direction:column; }
.project-gallery img,
.project-gallery video {
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  aspect-ratio:auto;
  object-fit:contain;
  background:#09090e;
}
.project-gallery video {
  height:auto;
  aspect-ratio:auto;
}
.project-gallery figcaption { color:#c3c3c3; font-size:.85rem; margin:.5rem 0; }
.content-header { position:static; padding:1.2rem 1.5rem; border-bottom:1px solid #333; }
.content-header a { color:#fff; }
.content-page video { display:block; background:#161616; }
@media (max-width:620px) {
  .content-page { padding:2rem 1rem 3rem; }
  .project-hero-media img,
  .project-hero-media video { width:auto; max-width:100%; height:auto; max-height:80svh; }
  .project-gallery { grid-template-columns:1fr; gap:1.25rem; }
  .project-gallery img,
  .project-gallery video { width:100%; height:auto; max-height:none; aspect-ratio:auto; }
}
@media (max-width:900px) {
  h1.hero-title { font-size:clamp(1.9rem,8.8vw,3.2rem); line-height:1.05; }
  .nav-menu-toggle { display:block; }
  #nav.menu-open .nav-links { display:flex; position:absolute; top:100%; left:0; right:0; background:#0f0f0f; padding:1.5rem; flex-wrap:wrap; gap:1rem; border-bottom:1px solid #333; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .hero-eyebrow, h1.hero-title, .hero-sub, .hero-btns, .hero-right { opacity:1; transform:none; }
}