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

    :root {
      --bg:      #f2f1ed;
      --surface: #ffffff;
      --dark:    #0d0d0d;
      --gray:    #888;
      --border:  rgba(0,0,0,0.08);
      --accent:  #e8572a;
      --accent2: #fff2ee;
      --accent-r: 232; --accent-g: 87; --accent-b: 42;
    }



    /* ─── DARK MODE ─── */
    [data-theme="dark"] {
      --bg:      #111110;
      --surface: #1c1b19;
      --dark:    #f0efe9;
      --gray:    #999;
      --border:  rgba(255,255,255,0.09);
      --accent:  #e8572a;
      --accent2: #2d1a11;
    }
    [data-theme="dark"] nav.scrolled {
      background: rgba(17,17,16,.92);
    }
    [data-theme="dark"] .btn-outline {
      border-color: rgba(255,255,255,.18);
    }
    [data-theme="dark"] .modal-overlay {
      background: rgba(0,0,0,.72);
    }
    [data-theme="dark"] .carousel-btn svg path,
    [data-theme="dark"] .card-arrow svg path {
      stroke: var(--dark);
    }
    [data-theme="dark"] .hero-deco {
      background: radial-gradient(circle,rgba(var(--accent-r),var(--accent-g),var(--accent-b),.18) 0%,transparent 65%);
    }
    [data-theme="dark"] .hbg span { background: var(--dark); }

    /* botones CTA sólidos: en dark mode usan acento naranja en vez de --dark */
    [data-theme="dark"] .btn-primary { background: var(--accent); color: #fff; }
    [data-theme="dark"] .nav-cta     { background: var(--accent) !important; color: #fff !important; }

    /* ticker: invertir colores en dark mode */
    [data-theme="dark"] .ticker { background: var(--dark); color: var(--bg); border-top-color: var(--border); }

    /* fv-pill: texto oscuro sobre fondo blanco (la pill tiene rgba blanco) */
    [data-theme="dark"] .fv-pill { color: #111; }

    /* ─── THEME TRANSITIONS ─── */
    body, nav, .hero, .ticker, .featured-section,
    .stats, .stat, .carousel-section, .carousel-card, .card-body,
    .section-wrap, .service-card, .process-section, .process-step,
    .contact-wrap, .contact-form input, .contact-form textarea,
    .modal-card, #loader, .mob-menu, footer,
    .about-badge, .loader-logo, .hero-badge, .skill-tag,
    .btn-outline, .f-tag, .behance-link {
      transition: background-color .3s ease, color .3s ease,
                  border-color .3s ease, box-shadow .3s ease;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--dark);
      overflow-x: hidden;
    }

    /* ─── BACKGROUND EFFECTS ─── */

    /* grain */
    body::after {
      content: '';
      position: fixed; inset: 0; z-index: 4; pointer-events: none;
      opacity: .055;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
    }
    [data-theme="dark"] body::after { opacity: .09; }

    /* canvas único para todo el fondo */
    #bg-canvas {
      position: fixed; inset: 0; z-index: 2; pointer-events: none;
    }

    /* ensure content above */
    nav, main, section, footer, .hero, .ticker,
    .stats, .carousel-section, .featured-section,
    .video-section, .process-section, #contact, #about {
      position: relative; z-index: 5;
    }

    /* ensure content stays above bg effects */
    nav, main, section, footer, .hero, .ticker,
    .stats, .carousel-section, .featured-section,
    .video-section, .process-section, #contact, #about {
      position: relative; z-index: 3;
    }

    /* ─── LETTER HOVER ─── */
    .ltr {
      display: inline-block;
      transition: color .15s ease, transform .15s ease;
    }
    .ltr:hover {
      color: var(--accent);
      transform: translateY(-2px);
    }

    /* ─── CURSOR + ESTELA ─── */
    #cur-trail-canvas {
      position: fixed; inset: 0; z-index: 9997; pointer-events: none;
    }
    #cur, #cur-f {
      position: fixed; border-radius: 50%;
      pointer-events: none; z-index: 9999;
      transform: translate(-50%, -50%);
    }
    #cur {
      width: 8px; height: 8px; background: var(--accent);
      transition: width .25s, height .25s;
    }
    #cur-f {
      z-index: 9998; width: 40px; height: 40px;
      border: 1.5px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.35);
      transition: width .3s, height .3s, border-color .3s;
    }
    body.ch #cur { width: 14px; height: 14px; }
    body.ch #cur-f { width: 56px; height: 56px; border-color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),.6); }
    @media (hover: none) { #cur, #cur-f, #cur-trail-canvas { display: none; } }

    /* ─── MAGNETIC ─── */
    .magnetic { transition: transform .3s cubic-bezier(.23,1,.32,1); }

    /* ─── REVEAL ─── */
    .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
    .reveal.v { opacity: 1; transform: none; }
    .rl { opacity: 0; transform: translateX(-32px); transition: opacity .7s ease, transform .7s ease; }
    .rl.v { opacity: 1; transform: none; }
    .rr { opacity: 0; transform: translateX(32px); transition: opacity .7s ease, transform .7s ease; }
    .rr.v { opacity: 1; transform: none; }

    /* ─── NAV ─── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; justify-content: space-between; align-items: center;
      padding: 1.25rem 4rem;
      transition: background .3s, box-shadow .3s;
    }
    nav.scrolled {
      background: rgba(242,241,237,.92);
      backdrop-filter: blur(14px);
      box-shadow: 0 1px 0 var(--border);
    }
    .logo {
      font-family: 'Manrope', sans-serif; font-weight: 800;
      font-size: 1.25rem; letter-spacing: -.01em;
      color: var(--dark); text-decoration: none; z-index: 301;
      position: relative; cursor: pointer;
    }
    .logo span { color: var(--accent); }
    .logo:hover { animation: glitch .4s steps(1) forwards; }
    @keyframes glitch {
      0%   { text-shadow: none; }
      15%  { text-shadow: -3px 0 rgba(var(--accent-r),var(--accent-g),var(--accent-b),.8), 3px 0 #00e5ff; letter-spacing: .04em; }
      30%  { text-shadow: 3px 0 rgba(var(--accent-r),var(--accent-g),var(--accent-b),.8), -3px 0 #00e5ff; letter-spacing: -.03em; }
      45%  { text-shadow: -2px 0 #00e5ff, 2px 0 rgba(var(--accent-r),var(--accent-g),var(--accent-b),.8); }
      60%  { text-shadow: none; letter-spacing: -.01em; }
      75%  { text-shadow: 2px 0 rgba(var(--accent-r),var(--accent-g),var(--accent-b),.6); }
      100% { text-shadow: none; letter-spacing: -.01em; }
    }
    nav ul { list-style: none; display: flex; gap: 2.5rem; }
    nav ul a {
      color: var(--gray); text-decoration: none;
      font-size: .82rem; font-weight: 500;
      letter-spacing: .06em; text-transform: uppercase;
      transition: color .2s;
    }
    nav ul a:hover { color: var(--dark); }
    .nav-cta {
      background: var(--dark); color: #fff !important;
      padding: .5rem 1.25rem; border-radius: 100px;
    }
    .nav-cta:hover { background: var(--accent) !important; color: #fff !important; }

    /* ─── NAV TOOLS ─── */
    .nav-tools { display: flex; align-items: center; gap: .5rem; }
    .tool-btn {
      width: 34px; height: 34px; border-radius: 50%;
      border: 1.5px solid var(--border); background: transparent;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      color: var(--gray); font-size: .7rem; font-weight: 700; letter-spacing: .04em;
      transition: background .2s, border-color .2s, color .2s;
      flex-shrink: 0;
      position: relative; overflow: hidden;
    }
    .tool-btn:hover { border-color: var(--dark); color: var(--dark); }
    .tool-btn svg {
      position: absolute;
      top: 50%; left: 50%;
      margin-top: -8px; margin-left: -8px;
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    }
    .icon-moon {
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }
    .icon-sun {
      opacity: 0;
      transform: rotate(-90deg) scale(0);
    }
    [data-theme="dark"] .icon-moon {
      opacity: 0;
      transform: rotate(90deg) scale(0);
    }
    [data-theme="dark"] .icon-sun {
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }

    /* hamburger */
    .hbg {
      display: none; flex-direction: column; gap: 5px;
      background: none; border: none; cursor: pointer; padding: 4px; z-index: 301;
    }
    .hbg span {
      display: block; width: 24px; height: 2px;
      background: var(--dark); border-radius: 2px;
      transition: transform .3s, opacity .3s, background .3s;
    }
    .hbg.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hbg.open span:nth-child(2) { opacity: 0; }
    .hbg.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* mobile overlay */
    .mob-menu {
      position: fixed; inset: 0; background: var(--bg); z-index: 300;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 2.5rem; opacity: 0; visibility: hidden;
      transition: opacity .4s, visibility .4s, background-color .3s;
    }
    .mob-menu.open { opacity: 1; visibility: visible; }
    .mob-menu a {
      font-family: 'Manrope', sans-serif; font-weight: 700;
      font-size: 2rem; color: var(--dark); text-decoration: none;
      letter-spacing: -.02em; transition: color .2s;
    }
    .mob-menu a:hover { color: var(--accent); }
    .mob-social { display: flex; gap: 2rem; margin-top: 1rem; }
    .mob-social a {
      font-size: .75rem; font-weight: 500;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--gray); text-decoration: none;
    }

    /* ─── HERO ─── */
    .hero {
      min-height: 100vh; display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 8rem 4rem 5rem;
      position: relative; overflow: hidden;
      background: transparent; text-align: center;
    }
    .hero-deco {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      width: 75vw; height: 75vw; max-width: 900px; max-height: 900px;
      border-radius: 50%;
      background: radial-gradient(circle,rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1) 0%,transparent 65%);
      pointer-events: none; animation: pulse 7s ease-in-out infinite;
    }
    .hero-deco-ring {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      width: 42vw; height: 42vw; max-width: 560px; max-height: 560px;
      border-radius: 50%; border: 1px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12);
      pointer-events: none; animation: pulse 7s ease-in-out infinite reverse;
    }
    @keyframes pulse {
      0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
      50%      { transform: translate(-50%,-50%) scale(1.05); opacity: .6; }
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: .5rem;
      background: #1a9e5c; border: 1px solid rgba(255,255,255,.15);
      padding: .45rem 1rem; border-radius: 100px;
      font-size: .75rem; font-weight: 500; color: #fff;
      margin-bottom: 2.5rem;
    }
    .hero-badge .dot {
      width: 7px; height: 7px; background: #fff; border-radius: 50%;
      animation: blink 2s ease-in-out infinite; flex-shrink: 0;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
    @keyframes fadeDown {
      from { opacity:0; transform:translateY(-16px); }
      to   { opacity:1; transform:none; }
    }
    .hero h1 {
      font-family: 'Manrope', sans-serif; font-weight: 800;
      font-size: clamp(3.8rem,10vw,9.5rem);
      line-height: .92; letter-spacing: -.04em;
      max-width: 14ch; margin-bottom: 2rem;
    }
    .hero h1 .line { display: block; overflow: hidden; }
    .hero h1 .line span { display: block; }
    .hero h1 em { font-style: normal; color: var(--accent); }
    .hero-bottom { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
    .hero p {
      color: var(--gray); font-size: 1.05rem; max-width: 620px;
      line-height: 1.75;
    }
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(20px); }
      to   { opacity:1; transform:none; }
    }
    .hero-actions { display: flex; gap: 1rem; align-items: center; }

    /* ─── HERO ENTRADA (post-loader) ─── */
    .hero-badge,
    .hero h1,
    .hero-bottom > p,
    .hero-actions {
      opacity: 0;
      transform: translateY(24px);
    }
    @keyframes heroIn {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .hero-in {
      animation: heroIn 650ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-badge,
      .hero h1,
      .hero-bottom > p,
      .hero-actions {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
      }
    }

    /* buttons */
    .btn-primary {
      display: inline-flex; align-items: center; gap: .6rem;
      background: var(--dark); color: #fff; text-decoration: none;
      font-size: .85rem; font-weight: 600;
      padding: .9rem 1.8rem; border-radius: 100px;
      transition: background .25s, transform .25s, box-shadow .25s;
    }
    .btn-primary:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.35); }
    .btn-outline {
      display: inline-flex; align-items: center; gap: .6rem;
      background: transparent; color: var(--dark); text-decoration: none;
      font-size: .85rem; font-weight: 500;
      padding: .9rem 1.8rem; border-radius: 100px;
      border: 1.5px solid rgba(0,0,0,.15);
      transition: border-color .2s, transform .2s, box-shadow .2s, color .3s, background-color .3s;
    }
    .btn-outline:hover { border-color: var(--dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }

    /* ─── TICKER ─── */
    .ticker {
      background: var(--dark); color: #fff;
      overflow: hidden; padding: 1rem 0;
      border-top: 1px solid rgba(255,255,255,.05);
    }
    .ticker-track { display: flex; animation: ticker 22s linear infinite; width: max-content; }
    .ticker-track span {
      font-family: 'Manrope', sans-serif; font-weight: 700;
      font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
      padding: 0 2.5rem; white-space: nowrap;
    }
    .ticker-track span.sep { color: var(--accent); }
    @keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    /* ─── SECTION DIVIDER ─── */
    .section-divider {
      position: relative; height: 16px; width: 100%;
      display: flex; align-items: center;
      cursor: crosshair; overflow: visible;
    }
    .section-divider::before {
      content: '';
      position: absolute; left: 0; right: 0; top: 50%;
      height: 1px;
      background: linear-gradient(to right, transparent 0%, var(--border) 20%, var(--accent) 50%, var(--border) 80%, transparent 100%);
      transition: background .3s;
    }
    .section-divider .div-dot {
      position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 12px 4px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.5);
      transition: box-shadow .2s, width .2s, height .2s;
      pointer-events: none;
    }
    .section-divider .div-glow {
      position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 160px; height: 1px;
      background: linear-gradient(to right, transparent, rgba(var(--accent-r),var(--accent-g),var(--accent-b),.6), transparent);
      filter: blur(2px);
      transition: width .3s, opacity .3s;
      pointer-events: none;
    }
    .section-divider:hover .div-dot {
      width: 10px; height: 10px;
      box-shadow: 0 0 20px 8px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.7);
    }
    .section-divider:hover .div-glow {
      width: 320px;
    }

    /* ─── FEATURED WORK ─── */
    .featured-section { padding: 7rem 4rem; }
    .featured-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
    .featured-visual {
      aspect-ratio: 4/3; border-radius: 20px; overflow: hidden;
      background: linear-gradient(135deg,#ede9e0,#e0dbd0); position: relative;
    }
    .fv-inner {
      width: 100%; height: 100%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 1rem;
      transition: transform .6s ease;
    }
    .featured-visual:hover .fv-inner { transform: scale(1.03); }
    .fv-pill {
      position: absolute; top: 1.5rem; left: 1.5rem;
      background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
      padding: .4rem .9rem; border-radius: 100px;
      font-size: .72rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase; color: var(--dark);
    }
    .fv-year {
      position: absolute; bottom: 1.5rem; right: 1.5rem;
      font-family: 'Manrope', sans-serif; font-weight: 800;
      font-size: .9rem; color: rgba(0,0,0,.2);
    }
    .featured-content h2 {
      font-family: 'Manrope', sans-serif; font-weight: 800;
      font-size: clamp(2rem,3.5vw,3rem);
      letter-spacing: -.03em; line-height: 1.05; margin-bottom: 1.5rem;
    }
    .featured-content p {
      color: var(--gray); font-size: .95rem; line-height: 1.85;
      margin-bottom: 2.5rem; max-width: 44ch;
    }
    .f-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
    .f-tag {
      padding: .35rem .85rem; border-radius: 100px;
      border: 1.5px solid var(--border);
      font-size: .72rem; font-weight: 500; color: var(--gray);
    }

    /* ─── STATS ─── */
    .stats { display: grid; grid-template-columns: repeat(4,1fr); }
    .stat { padding: 3rem 2.5rem; border-right: 1px solid var(--border); }
    .stat:last-child { border-right: none; }
    .stat-num {
      font-family: 'Manrope', sans-serif; font-weight: 800;
      font-size: clamp(2.2rem,4vw,3.5rem);
      letter-spacing: -.04em; color: var(--dark);
      display: block; margin-bottom: .4rem;
    }
    .stat-num .accent { color: var(--accent); }
    .stat-label { font-size: .78rem; color: var(--gray); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

    /* ─── SECTION LABEL / TITLE ─── */
    .section-wrap { padding: 6rem 4rem; }
    .s-label {
      display: inline-flex; align-items: center; gap: .5rem;
      font-size: .72rem; font-weight: 600;
      letter-spacing: .15em; text-transform: uppercase; color: var(--accent);
      margin-bottom: 1rem;
    }
    .s-label::before { content:''; display:block; width:20px; height:2px; background:var(--accent); }
    .s-title {
      font-family: 'Manrope', sans-serif; font-weight: 800;
      font-size: clamp(2rem,4vw,3.5rem);
      letter-spacing: -.03em; line-height: 1.05;
    }

    /* ─── CAROUSEL ─── */
    .carousel-section { padding: 6rem 0; }
    .carousel-header {
      display: flex; justify-content: space-between; align-items: flex-end;
      padding: 0 4rem; margin-bottom: 3rem;
    }
    .carousel-controls { display: flex; align-items: center; gap: 1rem; }
    .carousel-btn {
      width: 48px; height: 48px; border-radius: 50%;
      border: 1.5px solid var(--border); background: var(--surface);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background .2s, border-color .2s, transform .2s;
    }
    .carousel-btn:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.05); }
    .carousel-btn:hover svg path { stroke: #fff !important; }
    .carousel-btn svg { pointer-events: none; color: var(--dark); transition: color .2s; }
    .carousel-btn:hover svg { color: #fff; }
    .carousel-btn svg path { transition: stroke .2s; }
    .behance-link {
      display: inline-flex; align-items: center; gap: .5rem;
      font-size: .82rem; font-weight: 600; color: var(--dark);
      text-decoration: none; border-bottom: 1.5px solid var(--dark);
      padding-bottom: 2px; transition: color .2s, border-color .2s;
    }
    .behance-link:hover { color: var(--accent); border-color: var(--accent); }
    .carousel-viewport { overflow: hidden; padding: 0 4rem; }
    .carousel-track {
      display: flex; gap: 1.5rem;
      transition: transform .6s cubic-bezier(.25,.46,.45,.94);
      will-change: transform;
      padding: 12px 0 16px;
    }
    .carousel-card {
      flex: 0 0 calc(50% - .75rem);
      background: var(--surface); border-radius: 16px;
      overflow: hidden; cursor: pointer;
      transition: box-shadow .35s, border-color .3s, outline .3s;
      text-decoration: none; color: inherit;
      border: 1.5px solid var(--border);
      outline: 2px solid transparent; outline-offset: 0px;
      transform-style: preserve-3d; will-change: transform;
    }
    .carousel-card:hover {
      box-shadow: 0 28px 60px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.22), 0 8px 24px rgba(0,0,0,.1);
      border-color: var(--accent);
      outline: 2px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),.25);
      outline-offset: 3px;
    }
    .carousel-card:hover .card-thumb img {
      transform: scale(1.07);
    }
    .card-thumb img { transition: transform .5s cubic-bezier(.16,1,.3,1); }
    .card-thumb { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; }
    .card-thumb .ph {
      width: 100%; height: 100%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: .75rem;
      transition: transform .5s ease;
    }
    .carousel-card:hover .ph { transform: scale(1.04); }
    .ph-circle {
      width: 52px; height: 52px; border-radius: 50%;
      background: rgba(0,0,0,.06);
      display: flex; align-items: center; justify-content: center;
    }
    .ph-circle svg { opacity: .3; }
    .ph-tag { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(0,0,0,.25); }
    .card-ph-1 { background: linear-gradient(135deg,#ede9e0,#e0dbd0); }
    .card-ph-2 { background: linear-gradient(135deg,#dfe6ed,#d0dde8); }
    .card-ph-4 { background: linear-gradient(135deg,#e0ede4,#d0e8d8); }
    .card-ph-5 { background: linear-gradient(135deg,#edece0,#e8e6d0); }
    .card-ph-6 { background: linear-gradient(135deg,#e0ede8,#d0e8dc); }
    .card-ph-7 { background: linear-gradient(135deg,#e8e0d5,#ddd0c8); }
    .card-body {
      padding: 1.5rem 1.75rem 1.75rem;
      display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
    }
    .card-body h3 {
      font-family: 'Manrope', sans-serif; font-weight: 700;
      font-size: 1.05rem; letter-spacing: -.01em; margin-bottom: .4rem;
    }
    .card-meta { font-size: .75rem; font-weight: 500; color: var(--gray); letter-spacing: .05em; }
    .card-arrow {
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--bg); border: none;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
      transition: background .2s, transform .2s;
    }
    .carousel-card:hover .card-arrow { background: var(--accent); transform: rotate(45deg); }
    .carousel-card:hover .card-arrow svg path { stroke: #fff !important; }
    .cdots { display: flex; gap: .5rem; justify-content: center; margin-top: 2.5rem; }
    .cdot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--border); border: 1.5px solid rgba(0,0,0,.15);
      cursor: pointer; transition: background .2s, width .3s;
    }
    .cdot.active { background: var(--dark); width: 22px; border-radius: 3px; border-color: var(--dark); }

    /* ─── ABOUT ─── */
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
    .about-img-wrap { position: relative; }
    .about-img { aspect-ratio: 4/5; border-radius: 20px; overflow: hidden; background: #e4e2db; }
    .about-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .about-badge {
      position: absolute; bottom: 1.5rem; right: -1.5rem;
      background: var(--accent); border-radius: 14px;
      padding: 1.1rem 1.35rem;
      box-shadow: 0 8px 32px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.45); font-size: .8rem;
      color: #fff;
    }
    .about-badge strong {
      font-family: 'Manrope', sans-serif; font-weight: 800;
      font-size: 1.5rem; display: block; color: #fff; letter-spacing: -.03em;
    }
    .about-text .s-title { margin-bottom: 1.5rem; }
    .about-text p { color: var(--gray); line-height: 1.85; margin-bottom: 1.2rem; font-size: .95rem; }
    .skills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
    .skill-tag {
      background: var(--surface); border: 1.5px solid var(--border);
      padding: .45rem 1rem; border-radius: 100px;
      font-size: .75rem; font-weight: 500; color: var(--dark);
      letter-spacing: .04em; cursor: default;
      transition: background .2s, border-color .2s, color .2s, transform .2s;
    }
    .skill-tag:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }

    /* ─── SERVICES ─── */
    .services-bg { background: transparent; }
    .services-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 4rem; }
    .service-card {
      background: var(--surface); border: 1.5px solid var(--border);
      border-radius: 20px; padding: 2.5rem;
      transition: border-color .3s, transform .3s, box-shadow .3s, background-color .3s;
    }
    .service-card:hover { border-color: var(--accent); transform: translateY(-6px); box-shadow: 0 20px 60px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.1); }
    .service-num {
      font-family: 'Manrope', sans-serif; font-weight: 800;
      font-size: .72rem; letter-spacing: .1em; color: var(--accent);
      margin-bottom: 1.5rem; display: block;
    }
    .service-icon {
      width: 48px; height: 48px; border-radius: 12px;
      background: var(--accent2);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1.75rem; transition: background .3s;
    }
    .service-card:hover .service-icon { background: var(--accent); }
    .service-icon svg path, .service-icon svg rect,
    .service-icon svg circle, .service-icon svg line { stroke: var(--accent); transition: stroke .3s; }
    .service-card:hover .service-icon svg path,
    .service-card:hover .service-icon svg rect,
    .service-card:hover .service-icon svg circle,
    .service-card:hover .service-icon svg line { stroke: #fff; }
    .service-card h3 {
      font-family: 'Manrope', sans-serif; font-weight: 700;
      font-size: 1.1rem; margin-bottom: 1rem; color: var(--dark);
    }
    .service-card p { color: var(--gray); font-size: .88rem; line-height: 1.85; }

    /* ─── VIDEO & MOTION ─── */
    .video-section {
      padding: 6rem 4rem;
    }
    .video-subtitle {
      color: var(--gray); font-size: 1rem; margin-top: .75rem;
    }
    .video-carousel-wrap {
      position: relative; margin-top: 3rem;
    }
    .video-row {
      display: flex; gap: 1.25rem;
      overflow-x: auto; scroll-snap-type: x mandatory;
      scrollbar-width: none; -ms-overflow-style: none;
      padding: 0.5rem 2rem 1rem;
      scroll-behavior: smooth;
    }
    .video-row::-webkit-scrollbar { display: none; }
    .vc-arrow {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 48px; height: 48px; border-radius: 50%;
      background: var(--surface); border: 1px solid var(--border);
      box-shadow: 0 4px 20px rgba(0,0,0,.12);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; z-index: 10;
      transition: background .2s, box-shadow .2s, opacity .2s;
      opacity: 0; pointer-events: none;
    }
    .vc-arrow svg { color: var(--dark); }
    .vc-arrow:hover { background: var(--accent); box-shadow: 0 6px 24px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.3); }
    .vc-arrow:hover svg { color: #fff; }
    .vc-arrow.prev { left: -24px; }
    .vc-arrow.next { right: -24px; }
    .vc-arrow.visible { opacity: 1; pointer-events: auto; }
    /* fade edge hint — shows there's more content */
    .video-carousel-wrap::after {
      content: ''; position: absolute; top: 0; right: 0;
      width: 80px; height: 100%; pointer-events: none; z-index: 5;
      background: linear-gradient(to right, transparent, var(--bg));
    }
    /* placeholder card styling when image not yet available */
    .card-thumb--placeholder {
      background: linear-gradient(135deg, var(--surface) 0%, var(--accent2) 100%);
      position: relative;
    }
    .card-placeholder-label {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--accent); opacity: .5;
    }
    .video-card {
      position: relative; flex: 0 0 360px;
      aspect-ratio: 9/16; border-radius: 20px; overflow: hidden;
      background: linear-gradient(155deg, #181714 0%, #2c1a0a 100%);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; scroll-snap-align: start;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .video-card:hover {
      transform: scale(1.04);
      box-shadow: 0 20px 50px rgba(0,0,0,.45);
    }
    /* orange glow corner accent */
    .video-card::after {
      content: ''; position: absolute; bottom: 0; right: 0;
      width: 60%; height: 40%;
      background: radial-gradient(ellipse at bottom right, rgba(var(--accent-r),var(--accent-g),var(--accent-b),.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .video-pill {
      position: absolute; top: 1rem; left: 1rem; z-index: 1;
      display: inline-flex; align-items: center;
      background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.2);
      padding: .35rem .85rem; border-radius: 100px;
      font-size: .68rem; font-weight: 700; color: #111;
      letter-spacing: .1em; text-transform: uppercase;
      white-space: nowrap;
    }
    .video-play {
      width: 54px; height: 54px; border-radius: 50%;
      background: var(--accent);
      display: flex; align-items: center; justify-content: center;
      transition: transform .25s ease, box-shadow .25s ease;
      flex-shrink: 0; position: relative; z-index: 1;
    }
    .video-card:hover .video-play {
      transform: scale(1.1);
      box-shadow: 0 0 0 10px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.2);
    }
    .video-title {
      position: absolute; bottom: 1rem; left: 1rem; right: 1rem; z-index: 1;
      font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.85);
      letter-spacing: .04em; line-height: 1.3;
      text-shadow: 0 1px 4px rgba(0,0,0,.6);
    }
    /* video preview inside card */
    .vc-preview {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; display: block;
    }


    @media (max-width: 1024px) {
      .video-section { padding: 4rem 0; }
      .video-section > .s-label,
      .video-section > .s-title,
      .video-section > .video-subtitle { padding: 0 1.5rem; }
      .video-carousel-wrap { margin-top: 2rem; }
      .vc-arrow { display: none; }
      .video-row {
        justify-content: flex-start;
        overflow-x: auto; scroll-snap-type: x mandatory;
        scrollbar-width: none; -ms-overflow-style: none;
        padding: 0 1.5rem 1rem;
      }
      .video-row::-webkit-scrollbar { display: none; }
      .video-card { flex: 0 0 300px; }
    }

    /* ─── PROCESS ─── */
    .process-section { padding: 6rem 4rem; }
    .process-header { margin-bottom: 4rem; }
    .process-grid { display: grid; grid-template-columns: repeat(4,1fr); }
    .process-step {
      padding: 2.5rem 2rem; border-right: 1px solid var(--border);
      position: relative; transition: background .3s;
    }
    .process-step:last-child { border-right: none; }
    .process-step::before {
      content: ''; position: absolute; top: 0; left: 2rem; right: 2rem;
      height: 2px; background: transparent; transition: background .3s;
    }
    .process-step:hover::before { background: var(--accent); }
    .process-num {
      font-family: 'Manrope', sans-serif; font-weight: 800;
      font-size: 3rem; letter-spacing: -.04em;
      color: rgba(0,0,0,.06); display: block;
      margin-bottom: .5rem; line-height: 1; transition: color .3s;
    }
    [data-theme="dark"] .process-num { color: rgba(255,255,255,.06); }
    .process-step:hover .process-num { color: rgba(var(--accent-r),var(--accent-g),var(--accent-b),.12); }
    .process-step h3 {
      font-family: 'Manrope', sans-serif; font-weight: 700;
      font-size: 1rem; margin-bottom: .75rem; color: var(--dark);
    }
    .process-step p { color: var(--gray); font-size: .85rem; line-height: 1.75; }

    /* ─── CONTACT ─── */
    .contact-wrap { text-align: center; padding: 8rem 4rem; }
    .contact-wrap .s-label { justify-content: center; }
    .contact-wrap .s-title { margin-bottom: 1.5rem; font-size: clamp(2.5rem,6vw,5rem); }
    .contact-wrap .s-title em { font-style: normal; color: var(--accent); }
    .contact-wrap > p { color: var(--gray); max-width: 44ch; margin: 0 auto 3rem; line-height: 1.75; }
    .contact-form {
      max-width: 560px; margin: 0 auto 2.5rem;
      display: flex; flex-direction: column; gap: 1rem; text-align: left;
    }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .contact-form input, .contact-form textarea {
      width: 100%; background: var(--surface);
      border: 1.5px solid var(--border); border-radius: 12px;
      padding: .9rem 1.1rem;
      font-family: 'Inter', sans-serif; font-size: .88rem; color: var(--dark);
      outline: none; transition: border-color .2s, box-shadow .2s, background-color .3s, color .3s; resize: none;
    }
    .contact-form input::placeholder, .contact-form textarea::placeholder { color: #bbb; }
    .contact-form input:focus, .contact-form textarea:focus {
      border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-r),var(--accent-g),var(--accent-b),.08);
    }
    .contact-form textarea { height: 120px; }
    .contact-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

    /* ─── SUCCESS MODAL ─── */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 500;
      background: rgba(13,13,13,.55);
      backdrop-filter: blur(6px);
      display: flex; align-items: center; justify-content: center;
      padding: 1.5rem;
      opacity: 0; visibility: hidden;
      transition: opacity .4s ease, visibility .4s ease;
    }
    .modal-overlay.open { opacity: 1; visibility: visible; }
    .modal-card {
      background: var(--surface); border-radius: 24px;
      padding: 3rem 2.5rem; max-width: 440px; width: 100%;
      text-align: center;
      box-shadow: 0 32px 80px rgba(0,0,0,.16);
      transform: scale(.92) translateY(16px);
      transition: transform .45s cubic-bezier(.16,1,.3,1), background-color .3s;
    }
    .modal-overlay.open .modal-card { transform: scale(1) translateY(0); }
    .modal-icon {
      width: 64px; height: 64px; border-radius: 50%;
      background: var(--accent2);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.75rem;
    }
    .modal-icon svg path { stroke: var(--accent); }
    .modal-title {
      font-family: 'Manrope', sans-serif; font-weight: 800;
      font-size: 1.4rem; letter-spacing: -.03em;
      color: var(--dark); margin-bottom: .75rem;
    }
    .modal-msg { color: var(--gray); font-size: .9rem; line-height: 1.75; margin-bottom: 2rem; }
    .modal-close {
      display: inline-flex; align-items: center; gap: .5rem;
      background: var(--dark); color: #fff;
      font-family: 'Inter', sans-serif; font-size: .85rem; font-weight: 600;
      padding: .85rem 2rem; border-radius: 100px; border: none; cursor: pointer;
      transition: background .25s, transform .25s;
    }
    .modal-close:hover { background: var(--accent); transform: translateY(-2px); }
    .btn-whatsapp {
      display: inline-flex; align-items: center; gap: .6rem;
      background: #25d366; color: #fff; text-decoration: none;
      font-size: .85rem; font-weight: 600;
      padding: .9rem 1.8rem; border-radius: 100px;
      transition: opacity .2s, transform .2s, box-shadow .2s;
    }
    .btn-whatsapp:hover { opacity: .9; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,211,102,.35); }

    /* ─── FOOTER ─── */
    footer {
      padding: 2rem 4rem; border-top: 1px solid var(--border);
      display: flex; justify-content: space-between; align-items: center;
      background: var(--surface);
    }
    footer p { color: var(--gray); font-size: .78rem; }
    .social-links { display: flex; gap: 1.5rem; }
    .social-links a {
      color: var(--gray); text-decoration: none;
      font-size: .78rem; font-weight: 500;
      letter-spacing: .06em; text-transform: uppercase; transition: color .2s;
    }
    .social-links a:hover { color: var(--accent); }

    /* ─── LOADER ─── */
    #loader {
      position: fixed; inset: 0; z-index: 999; background: var(--bg);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 2.5rem; transition: opacity .6s ease, visibility .6s ease;
    }
    #loader.hide { opacity: 0; visibility: hidden; }
    .loader-logo {
      font-family: 'Manrope', sans-serif; font-weight: 800;
      font-size: 2rem; letter-spacing: -.03em; color: var(--dark);
      animation: loaderFade .5s ease both;
    }
    .loader-logo span { color: var(--accent); }
    @keyframes loaderFade {
      from { opacity:0; transform:translateY(10px); }
      to   { opacity:1; transform:none; }
    }
    .loader-bar-wrap { width: 160px; height: 2px; background: rgba(0,0,0,.08); border-radius: 2px; overflow: hidden; }
    .loader-bar {
      height: 100%; width: 0%; background: var(--accent); border-radius: 2px;
      animation: loadBar 1.6s cubic-bezier(.4,0,.2,1) forwards;
    }
    @keyframes loadBar { 0%{width:0%} 40%{width:55%} 70%{width:80%} 100%{width:100%} }
    .loader-label {
      font-size: .7rem; font-weight: 600; letter-spacing: .18em;
      text-transform: uppercase; color: var(--gray);
      animation: loaderFade .5s .2s ease both;
    }
    body.loading { overflow: hidden; }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 960px) {
      nav { padding: 1rem 1.5rem; }
      nav ul { display: none; }
      .hbg { display: flex; }

      .hero { padding: 7rem 1.5rem 5rem; }
      .hero p { max-width: 100%; }
      .hero-actions { flex-direction: column; width: 100%; }
      .hero-actions a { justify-content: center; }

      .featured-section { padding: 4rem 1.5rem; }
      .featured-inner { grid-template-columns: 1fr; gap: 3rem; }

      .stats { grid-template-columns: repeat(2,1fr); }
      .stat:nth-child(2) { border-right: none; }

      .carousel-section { padding: 4rem 0; }
      .carousel-header { padding: 0 1.5rem; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
      .carousel-viewport { padding: 0 1.5rem; }
      .carousel-card { flex: 0 0 80vw; }

      .section-wrap { padding: 4rem 1.5rem; }
      .about-grid { grid-template-columns: 1fr; }
      .about-badge { right: 1rem; }
      .services-grid { grid-template-columns: repeat(2,1fr); }

      .process-section { padding: 4rem 1.5rem; }
      .process-grid { grid-template-columns: 1fr 1fr; }
      .process-step:nth-child(2) { border-right: none; }
      .process-step:nth-child(3),
      .process-step:nth-child(4) { border-top: 1px solid var(--border); }

      .contact-wrap { padding: 5rem 1.5rem; }
      .contact-actions { flex-direction: column; align-items: center; }
      .form-row { grid-template-columns: 1fr; }

      footer { padding: 1.5rem; flex-direction: column; gap: 1rem; text-align: center; }

      .nav-tools { gap: .35rem; }
      .tool-btn { width: 30px; height: 30px; }
    }
    @media (max-width: 480px) {
      .process-grid { grid-template-columns: 1fr; }
      .process-step { border-right: none; border-top: 1px solid var(--border); }
      .process-step:first-child { border-top: none; }
    }

    /* ─── SCROLL PROGRESS BAR ─── */
    .scroll-progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 0%;
      height: 4px;
      background: var(--accent);
      z-index: 1000;
      transition: width 0.1s ease-out;
    }

  
/* Damdesign refinements: instant content, quiet visual hierarchy, accessible controls. */
:root { --gray:#62615c; --accent:#bb421c; --accent-r:187; --accent-g:66; --accent-b:28; }
[data-theme="dark"] { --gray:#b5b3ad; --accent:#ff936f; --accent-r:255; --accent-g:147; --accent-b:111; }
[hidden] { display:none !important; }
html { scroll-padding-top:100px; }
body::after { display:none; }
button,input,textarea { font:inherit; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.skip-link { position:fixed; top:8px; left:8px; transform:translateY(-160%); z-index:9999; background:var(--dark); color:var(--bg); padding:14px; }
.skip-link:focus { transform:none; }
.hero-badge,.hero h1,.hero-bottom>p,.hero-actions,.reveal,.rl,.rr { opacity:1; transform:none; animation:none; }
.hero { min-height:730px; padding:150px 24px 90px; }
.hero h1 { max-width:1000px; font-size:clamp(3rem,7.8vw,7.4rem); line-height:1.02; letter-spacing:-.06em; }
.hero h1 .line { overflow:visible; }
.hero h1 .line span { display:inline; }
.hero-badge { background:transparent; border:1px solid var(--border); color:var(--gray); margin-bottom:32px; padding:10px 16px; line-height:1.5; }
.hero-badge .dot { background:#18824a; animation:none; }
.hero p { max-width:600px; font-size:1.08rem; }
.hero-deco { animation:none; opacity:.65; }
.hero-deco-ring { display:none; }
.logo:hover { animation:none; }
.hero-actions .btn-primary { background:var(--accent); }
.hero-actions .btn-primary,.btn-primary:hover,[data-theme="dark"] .btn-primary,[data-theme="dark"] .nav-cta { color:#fff !important; background:#ad3d1b; }
.tool-btn,.hbg { min-width:44px; min-height:44px; }
.hbg { justify-content:center; align-items:center; }
.mob-menu { gap:1.4rem; padding:90px 20px 24px; overflow-y:auto; }
.mob-menu a { font-size:clamp(1.25rem,5vw,2rem); }
.mob-social { flex-wrap:wrap; justify-content:center; gap:1.2rem; }
.mob-social a { font-size:.75rem; }
.ticker { padding:20px; }
.ticker-track { animation:none; flex-wrap:wrap; justify-content:center; gap:20px; width:auto; }
.ticker-track>*:nth-child(n+10) { display:none; }
.ticker-track span { font-size:.75rem; }
.section-divider { height:1px; background:var(--border); }
.section-divider span { display:none; }
.featured-section,.section-wrap,.process-section { max-width:1440px; margin:auto; }
.featured-section { padding-top:72px; padding-bottom:72px; }
.featured-visual { aspect-ratio:4/3; }
.featured-visual img { height:100%; }
.carousel-section { padding:60px 0; }
.carousel-header { margin-bottom:30px; }
.carousel-viewport { overflow:visible; }
.carousel-track { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; transform:none !important; transition:none; will-change:auto; }
.carousel-card { min-width:0; will-change:auto; transform:none; }
.carousel-card:hover { box-shadow:0 12px 30px #0000000d; }
.card-body { gap:12px; }
.card-body h3 { font-size:1.05rem; }
.card-meta { line-height:1.5; }
.carousel-controls { flex-wrap:wrap; }
.carousel-dots,.cdot { display:none; }
.field { display:flex; flex-direction:column; gap:8px; text-align:left; }
.field label { font-size:.85rem; font-weight:600; }
.contact-form input,.contact-form textarea { width:100%; color:var(--dark); }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:var(--gray); }
.contact-wrap { max-width:850px; }
#form-status { min-height:1.5em; font-size:.9rem; color:var(--gray); }
.btn-whatsapp { background:#137c43; }
.btn-primary:disabled { opacity:.6; cursor:wait; }
.modal-overlay { padding:0; color:var(--dark); border:none; background:transparent; width:min(90vw,480px); max-width:480px; height:auto; position:fixed; inset:0; margin:auto; opacity:1; visibility:visible; }
.modal-overlay:not([open]) { display:none; }
.modal-overlay::backdrop { background:#0009; }
.modal-card { transform:none; }
.video-card { flex-basis:280px; }
.video-card:hover { transform:none; }
.video-play { border:0; cursor:pointer; background:#ad3d1b; }
.video-card.playing .video-play,.video-card.playing .video-title,.video-card.playing .video-pill { display:none; }
.vc-preview { background:linear-gradient(145deg,#26221e,#542f22); }
.video-card:has(.video-play:focus-visible) { outline:3px solid var(--accent); outline-offset:4px; }
@media(min-width:961px) { .carousel-header,.carousel-viewport { padding-left:4rem; padding-right:4rem; } }
@media(max-width:1100px) { .carousel-track { grid-template-columns:repeat(2,minmax(0,1fr)); } nav ul { gap:1.2rem; } }
@media(max-width:960px) {
 nav { padding:12px 20px; background:var(--bg); gap:8px; }
 .nav-tools { margin-left:auto; gap:4px; }
 .hero { min-height:auto; padding:140px 24px 70px; }
 .hero h1 { font-size:clamp(2.6rem,10vw,5.2rem); max-width:760px; }
 .hero-actions { flex-direction:row; flex-wrap:wrap; justify-content:center; }
 .hero-actions a { min-height:48px; }
 .hero-badge { font-size:.7rem; max-width:100%; }
 .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .s-title { overflow-wrap:break-word; }
}
@media(max-width:600px) {
 .hero { padding:126px 20px 56px; }
 .hero h1 { font-size:clamp(2.4rem,10.6vw,3.8rem); line-height:1.06; letter-spacing:-.05em; }
 .hero h1 .line { display:inline; }
 .hero h1 .line+.line::before { content:' '; }
 .hero-badge { margin-bottom:24px; }
 .hero p { font-size:1rem; line-height:1.7; }
 .hero-bottom { gap:24px; }
 .hero-actions { gap:12px; flex-direction:column; align-items:stretch; }
 .hero-actions a { width:100%; }
 .carousel-track { grid-template-columns:1fr; gap:20px; }
 .carousel-card { width:100%; }
 .services-grid { grid-template-columns:1fr; }
 .hero-actions,.contact-actions { width:100%; }
 .contact-actions a { max-width:100%; overflow-wrap:anywhere; font-size:.85rem; }
 .video-card { flex-basis:76vw; }
 .social-links { flex-wrap:wrap; justify-content:center; gap:16px; }
 .s-title { font-size:clamp(1.8rem,8vw,2.8rem); }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }
@media(max-width:600px) {
 .ticker { padding:18px 20px; }
 .ticker-track { display:flex; flex-direction:row; flex-wrap:wrap; gap:12px 20px; }
 .ticker-track .sep { display:none; }
 .ticker-track span { font-size:.65rem; }
}
.video-poster { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.video-card.playing .video-poster { display:none; }
.video-status { position:absolute;bottom:3rem;left:12px;right:12px;z-index:2;background:#111e;color:#fff;padding:10px;font-size:.8rem; }
#navbar { background:var(--bg); border-bottom:1px solid var(--border); }
/* Second design pass — work-led editorial composition. */
.hero { display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,90px);max-width:1440px;margin:auto;padding:146px 64px 76px;text-align:left;min-height:760px;overflow:visible;align-items:center; }
.hero-copy { min-width:0; }
.hero-badge { font-size:.67rem;border:none;padding:0;background:none;margin-bottom:28px; }
.hero h1 { font-size:clamp(3.4rem,5.7vw,5.7rem);line-height:1;letter-spacing:-.065em;margin-bottom:28px;max-width:10ch; }
.hero h1 .line { display:inline; }
.hero h1 .line+.line::before { content:' '; }
.hero-bottom { align-items:flex-start;gap:28px; }
.hero p { font-size:.98rem;max-width:440px;line-height:1.8; }
.hero-actions { gap:12px;flex-wrap:wrap; }
.hero-actions a { padding:15px 23px;font-size:.8rem; }
.hero-signature { margin-top:42px;display:flex;flex-direction:column;gap:6px; }
.hero-signature>span:first-child { font-size:.87rem;font-weight:700;letter-spacing:-.02em; }
.hero-signature>span:last-child { font-size:.72rem;color:var(--gray); }
.hero-gallery { min-width:0;padding:20px;background:#e9e6df;border:1px solid #dedbd3;border-radius:8px;transform:rotate(2deg);box-shadow:0 24px 60px #2620110d; }
[data-theme="dark"] .hero-gallery { background:#25221d;border-color:#3a352e; }
.gallery-heading { display:flex;justify-content:space-between;margin-bottom:16px;font-size:.67rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; }
.hero-project { display:block;text-decoration:none;color:var(--dark);background:var(--surface);border-radius:3px;overflow:hidden; }
.hero-project img { width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;transition:filter .2s; }
.hero-project:hover img { filter:brightness(1.05); }
.hero-project-main img { aspect-ratio:16/10; }
.hero-project-caption { display:flex;justify-content:space-between;align-items:center;padding:13px 14px;gap:8px;font-size:.65rem; }
.hero-project-caption strong { font-size:.78rem; }
.hero-project-caption>span { color:var(--gray); }
.hero-project-pair { margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px; }
.hero-project-pair .hero-project-caption { padding:11px;font-size:.55rem; }
.hero-project-pair .hero-project-caption strong { font-size:.69rem; }
.ticker { background:transparent;color:var(--gray);border-block:1px solid var(--border);padding:20px 64px; }
.ticker-track { justify-content:space-between;max-width:1312px;margin:auto; }
.ticker-track .sep { color:var(--accent); }
[data-theme="dark"] .ticker { background:transparent;color:var(--gray); }
.featured-section { padding-block:100px; }
.featured-visual { border-radius:6px; }
.featured-content h2 { letter-spacing:-.045em; }
.carousel-track { grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px; }
.carousel-card { border:0;border-radius:0;background:transparent; }
.carousel-card:hover { box-shadow:none; }
.card-thumb { aspect-ratio:16/10;border-radius:5px; }
.card-body { padding:18px 0; }
.card-body h3 { font-size:1.1rem;letter-spacing:-.025em; }
.card-arrow { background:transparent;border:1px solid var(--border); }
.work-filters { padding:0 64px;display:flex;gap:8px;flex-wrap:wrap;margin:0 0 32px; }
.work-filters button { border:1px solid var(--border);border-radius:100px;padding:10px 19px;min-height:44px;font-size:.78rem;background:transparent;color:var(--gray);cursor:pointer; }
.work-filters button[aria-pressed="true"] { background:var(--dark);color:var(--bg);border-color:var(--dark); }
.work-filters button:hover { border-color:var(--dark); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.services-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px; }
.service-card { background:transparent;border:0;border-top:1px solid var(--border);border-radius:0;padding:30px 0; }
.service-card:hover { transform:none;box-shadow:none;border-color:var(--accent); }
.service-card h3 { font-size:1.3rem;letter-spacing:-.025em; }
.about-img { aspect-ratio:1/1;border-radius:6px; }
.process-step { background:transparent; }
.contact-wrap { border-radius:0; }
@media(min-width:961px) and (max-width:1150px) { .hero { padding-inline:40px;gap:36px; } .hero-gallery { padding:14px; } .hero h1 { font-size:4.4rem; } .hero-actions a { padding-inline:17px; } }
@media(max-width:960px) {
 .hero { grid-template-columns:1fr 1fr;padding:126px 24px 64px;gap:28px;min-height:auto; }
 .hero h1 { font-size:clamp(2.6rem,6.4vw,4rem); }
 .hero-gallery { padding:12px;transform:rotate(1deg); }
 .hero-project-pair { gap:8px;margin-top:8px; }
 .hero-project-pair .hero-project-caption>span { display:none; }
 .hero-actions { justify-content:flex-start; }
 .hero-signature { margin-top:28px; }
 .work-filters { padding-inline:24px; }
 .ticker { padding-inline:24px; }
 .featured-section { padding-block:64px; }
}
@media(max-width:680px) {
 .hero { display:flex;flex-direction:column;align-items:stretch;padding:112px 20px 42px;gap:40px; }
 .hero h1 { font-size:clamp(3rem,12.5vw,4.6rem);max-width:11ch; }
 .hero-badge { margin-bottom:24px;font-size:.65rem; }
 .hero-bottom { align-items:stretch; }
 .hero-actions { flex-direction:row;align-items:stretch; }
 .hero-actions a { width:auto;flex:1;min-width:130px;padding:14px 12px; }
 .hero-signature { display:none; }
 .hero-gallery { transform:none;padding:12px; }
 .hero-project-main img { aspect-ratio:16/8; }
 .hero-project-pair .hero-project-caption>span { display:inline; }
 .hero-project-caption { padding:10px; }
 .gallery-heading { font-size:.6rem; }
 .ticker { padding:18px 20px; }
 .ticker-track { justify-content:center;gap:12px 20px; }
 .carousel-track { grid-template-columns:1fr;gap:20px; }
 .work-filters { padding-inline:24px;gap:8px; }
 .work-filters button { padding:9px 15px;font-size:.72rem; }
 .services-grid { grid-template-columns:1fr; }
 .hero-project-pair .hero-project-caption { flex-wrap:wrap; }
}
/* Selected palette: charcoal + electric lime. */
:root {
 --bg:#f5f7ef;--surface:#fff;--dark:#171c15;--gray:#57604f;
 --border:#d9dfd1;--accent:#446600;--accent2:#eaf2d8;
 --accent-r:68;--accent-g:102;--accent-b:0;
 --action:#c2f45b;--action-text:#142007;
}
[data-theme="dark"] {
 --bg:#10120f;--surface:#1b1f18;--dark:#f0f3e9;--gray:#adb5a3;
 --border:#30372a;--accent:#c2f45b;--accent2:#232e16;
 --accent-r:194;--accent-g:244;--accent-b:91;
 --action:#c2f45b;--action-text:#142007;
 color-scheme:dark;
}
[data-theme="light"] { color-scheme:light; }
.hero-gallery,[data-theme="dark"] .hero-gallery { background:var(--surface);border-color:var(--border);box-shadow:0 24px 60px #0002; }
.hero-badge .dot { background:var(--accent);box-shadow:0 0 0 4px var(--accent2); }
.btn-primary,.hero-actions .btn-primary,.hero-actions .btn-primary:hover,.btn-primary:hover,[data-theme="dark"] .btn-primary,[data-theme="dark"] .btn-primary:hover,
#navbar .nav-cta,#navbar .nav-cta:hover,[data-theme="dark"] #navbar .nav-cta {
 background:var(--action) !important;color:var(--action-text) !important;
}
.btn-outline,[data-theme="dark"] .btn-outline { border-color:var(--border); }
.btn-outline:hover { border-color:var(--accent); }
.about-badge,.about-badge strong,.skill-tag:hover,.modal-close:hover { background:var(--action);color:var(--action-text); }
.service-icon { background:var(--accent2); }
.service-card:hover .service-icon { background:var(--action);color:var(--action-text); }
.service-card:hover .service-icon svg,.service-card:hover .service-icon svg path,.service-card:hover .service-icon svg rect,.service-card:hover .service-icon svg line { stroke:var(--action-text); }
.video-play { background:var(--action);color:var(--action-text); }
.video-play svg { fill:var(--action-text); }
.vc-preview { background:linear-gradient(145deg,#1a2015,#303c1e); }
.card-arrow { color:var(--dark); }
.carousel-card:hover .card-arrow { background:var(--action); }
.carousel-card:hover .card-arrow svg path { stroke:var(--action-text) !important; }
.vc-arrow { background:var(--surface);color:var(--dark);border-color:var(--border); }
.vc-arrow:hover { background:var(--action);color:var(--action-text); }
.contact-form input,.contact-form textarea { background:var(--surface);border-color:var(--border); }
#navbar,.mob-menu { background:var(--bg); }
.modal-icon { background:var(--accent2); }
.modal-icon svg { stroke:var(--accent); }

/* Art direction: independent editorial studio, charcoal paper and acid ink. */
:root { --bg:#eeeFE8;--surface:#e3e5dc;--dark:#171b15;--gray:#5c6356;--border:#ced2c5; }
[data-theme="dark"] { --bg:#141612;--surface:#1d2119;--dark:#f1f2e9;--gray:#a9afa1;--border:#363c2e; }
body { -webkit-font-smoothing:antialiased; }
#navbar { padding:22px 4.5%;background:var(--bg);border-bottom:1px solid var(--border); }
.logo { font-size:1.45rem;letter-spacing:-.06em; }
.logo::after { content:'✳';font-family:Arial,sans-serif;font-size:.6rem;vertical-align:super;margin-left:3px;color:var(--gray); }
#navbar ul a { font-size:.69rem;letter-spacing:.04em; }
#navbar .nav-cta { border-radius:2px;padding:12px 22px; }
.tool-btn { border-radius:2px;border-color:var(--border); }
.editorial-hero.hero { display:block;padding:132px 4.5% 64px;max-width:1600px;min-height:0;text-align:left; }
.editorial-meta { display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--border);padding-bottom:20px;font-size:.63rem;text-transform:uppercase;letter-spacing:.1em; }
.editorial-meta .hero-badge { margin:0;font-size:.63rem;letter-spacing:0;text-transform:none; }
.editorial-headline { position:relative;padding:42px 0 48px; }
.editorial-hero h1 { margin:0;max-width:none;font-size:clamp(5rem,10vw,10rem);letter-spacing:-.075em;line-height:.9; }
.editorial-hero h1>span { display:block;font-weight:500; }
.editorial-hero h1 em { display:block;font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1;letter-spacing:-.07em;font-size:1.24em;color:var(--accent);margin-left:12%; }
.editorial-mark { position:absolute;right:4%;top:20px;font-size:clamp(8rem,20vw,19rem);font-family:Georgia,serif;font-weight:400;line-height:1;color:var(--accent);transform:rotate(-12deg); }
.editorial-note { position:absolute;right:0;bottom:54px;width:130px;font-size:.7rem;line-height:1.65;color:var(--gray); }
.editorial-stage { display:grid;grid-template-columns:1fr 2.15fr;gap:7%;align-items:start;border-top:1px solid var(--border);padding-top:32px; }
.editorial-index { font-size:.58rem;letter-spacing:.11em;font-weight:500;color:var(--gray); }
.editorial-intro>p { font-size:.9rem;line-height:1.85;margin-top:24px;max-width:310px;color:var(--gray); }
.editorial-intro .hero-actions { display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:28px; }
.editorial-intro .btn-primary { border-radius:2px;font-size:.75rem;padding:16px 22px;min-height:48px;width:auto; }
.editorial-link { font-size:.73rem;color:var(--dark);text-decoration:none;border-bottom:1px solid var(--border);padding-bottom:8px; }
.editorial-link:hover { color:var(--accent);border-color:var(--accent); }
.editorial-name { display:block;margin-top:44px;font-size:.68rem;line-height:1.8;color:var(--dark); }
.editorial-name>span { color:var(--gray); }
.editorial-feature { display:block;color:var(--dark);text-decoration:none;min-width:0; }
.editorial-feature-image { overflow:hidden;background:#e5e8dd;aspect-ratio:16/10; }
.editorial-feature-image img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s; }
.editorial-feature:hover img { transform:scale(1.025); }
.editorial-feature-caption { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0; }
.editorial-feature-caption>span:first-child { display:flex;flex-direction:column;gap:6px; }
.editorial-feature-caption strong { font-size:1.05rem;font-weight:500;letter-spacing:-.025em; }
.editorial-feature-caption>span:last-child { font-size:.65rem;color:var(--gray); }
.editorial-feature-caption>span:last-child>span { margin-left:18px;font-size:1.3rem;color:var(--dark); }
.ticker { padding-block:22px; }
.ticker-track span { font-size:.63rem;letter-spacing:.12em; }
.section-divider { display:none; }
.carousel-section { padding-top:100px;padding-bottom:100px;max-width:1600px;margin:auto; }
.carousel-header,.carousel-viewport { padding-inline:4.5%; }
.carousel-header { align-items:end;margin-bottom:32px; }
.s-label { font-size:.63rem;letter-spacing:.13em;color:var(--gray); }
.s-label::before { background:var(--accent); }
.s-title { letter-spacing:-.06em;font-weight:500; }
.carousel-header .s-title { font-size:clamp(2.5rem,6vw,5.5rem);max-width:8ch;line-height:1; }
.work-filters { padding-inline:4.5%;margin-bottom:40px; }
.work-filters button { border-radius:0;border:0;border-bottom:1px solid var(--border);font-size:.67rem;padding:12px 16px; }
.work-filters button[aria-pressed="true"] { background:var(--accent);color:var(--bg);border-color:var(--accent); }
.carousel-track { grid-template-columns:1.3fr 1fr;gap:58px 5%;align-items:start; }
.carousel-card:nth-child(even) { margin-top:90px; }
.carousel-card .card-thumb { border-radius:0;aspect-ratio:4/3; }
.card-body h3 { font-size:1.05rem;font-weight:500; }
.card-meta { font-size:.65rem; }
.card-arrow { border:0;border-radius:0; }
.editorial-card-arrow { font-size:1.5rem; }
.section-wrap { padding:90px 4.5%;max-width:1600px; }
.about-grid { grid-template-columns:1fr 1.2fr;gap:10%; }
.about-img { border-radius:0;aspect-ratio:4/5; }
.about-badge { border-radius:0;right:-20px;bottom:30px; }
.about-badge strong { background:transparent; }
.about-text p { font-size:.9rem; }
.services-bg { border-top:1px solid var(--border); }
.services-grid { gap:0 7%; }
.service-card { padding-block:32px; }
.service-card h3 { font-size:1.2rem;font-weight:500; }
.service-card p { font-size:.85rem; }
.service-icon { border-radius:0; }
.skill-tag { border-radius:0;background:transparent; }
.video-section { padding-top:80px;padding-bottom:80px;border-top:1px solid var(--border); }
.video-card { border-radius:0; }
.video-play { border-radius:2px; }
.process-section { padding:80px 4.5%;max-width:1600px; }
.process-step h3 { font-weight:500; }
#contact { border-top:1px solid var(--border); }
.contact-wrap { max-width:950px;padding-top:100px; }
.contact-wrap .s-title { font-size:clamp(2.8rem,6vw,5.5rem);line-height:1; }
.contact-wrap .s-title em { font-family:Georgia,'Times New Roman',serif;color:var(--accent);font-weight:400; }
.contact-form input,.contact-form textarea { border-radius:0;font-size:1rem; }
.contact-form .btn-primary,.btn-outline,.btn-whatsapp { border-radius:2px; }
footer { font-size:.7rem;padding-inline:4.5%; }
@media(max-width:960px) {
 #navbar { padding:14px 24px; }
 .editorial-hero.hero { padding:115px 24px 40px; }
 .editorial-headline { padding-top:36px; }
 .editorial-hero h1 { font-size:11vw; }
 .editorial-mark { font-size:22vw;right:0; }
 .editorial-note { bottom:35px;width:110px;font-size:.6rem; }
 .editorial-stage { gap:5%;grid-template-columns:1fr 1.7fr; }
 .editorial-intro>p { font-size:.83rem;margin-top:16px; }
 .editorial-feature-image { aspect-ratio:4/5; }
 .editorial-feature-image img { object-fit:cover;object-position:center; }
 .editorial-name { margin-top:28px; }
 .carousel-header,.carousel-viewport,.work-filters { padding-inline:24px; }
 .carousel-card:nth-child(even) { margin-top:60px; }
 .about-grid { gap:6%; }
}
@media(max-width:600px) {
 #navbar { padding:12px 20px; }
 .editorial-hero.hero { padding:105px 20px 32px; }
 .editorial-meta { align-items:flex-start;font-size:.52rem;gap:12px;line-height:1.6;padding-bottom:18px; }
 .editorial-meta>span { max-width:110px; }
 .editorial-meta .hero-badge { font-size:.52rem;max-width:155px;text-align:right;align-items:flex-start;line-height:1.6; }
 .editorial-meta .hero-badge .dot { margin-top:4px;width:5px;height:5px; }
 .editorial-headline { padding:32px 0 36px; }
 .editorial-hero h1 { font-size:14vw;line-height:.98;letter-spacing:-.07em; }
 .editorial-hero h1 em { font-size:1.28em;margin-left:7%; }
 .editorial-mark { font-size:19vw;top:30px;right:0; }
 .editorial-note { display:none; }
 .editorial-stage { display:flex;flex-direction:column;gap:30px;padding-top:22px; }
 .editorial-index { font-size:.53rem; }
 .editorial-intro>p { max-width:100%;font-size:.86rem;margin-top:14px; }
 .editorial-intro .hero-actions { flex-direction:row;align-items:center;gap:18px;margin-top:22px; }
 .editorial-intro .btn-primary { font-size:.68rem;padding:14px 16px;min-width:0;flex:none; }
 .editorial-link { font-size:.65rem; }
 .editorial-name { display:none; }
 .editorial-feature { width:100%; }
 .editorial-feature-image { aspect-ratio:4/3; }
 .editorial-feature-caption { padding-block:14px; }
 .editorial-feature-caption strong { font-size:.95rem; }
 .editorial-feature-caption>span:last-child { font-size:.6rem; }
 .ticker { padding-block:18px; }
 .carousel-section { padding-block:60px; }
 .carousel-header .s-title { font-size:3.3rem; }
 .carousel-track { grid-template-columns:1fr;gap:28px; }
 .carousel-card:nth-child(even) { margin-top:0; }
 .work-filters { gap:4px;margin-bottom:28px; }
 .work-filters button { padding-inline:10px;font-size:.62rem; }
 .about-grid { grid-template-columns:1fr;gap:40px; }
 .section-wrap,.process-section { padding:60px 24px; }
 .about-img { max-height:430px; }
 .services-grid { grid-template-columns:1fr; }
 .contact-wrap { padding-block:70px; }
}
@media(prefers-reduced-motion:reduce) { .editorial-feature img { transition:none; } }