@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/Figtree-Variable.woff2") format("woff2"); }

:root {
      --dark: #0F0E11;
      --dark-2: #151419;
      --surface: #1B191F;
      --surface-2: #222027;
      --paper: #F2F4F7;
      --white: #FFFFFF;
      --pink: #ED1456;
      --pink-light: #FFF0F5;
      --pink-mid: #FFD6E5;
      --text: #F9FAFB;
      --muted: #A5A2AC;
      --muted-dark: #667085;
      --line: rgba(255,255,255,.14);
      --border: #E4E7EC;
      --font: "Figtree", Arial, sans-serif;
      --page: min(1180px, calc(100% - 48px));
      --ease: cubic-bezier(.22,.72,.2,1);
      --project-radius: 12px;
      --project-gap: 12px;
      --project-border: rgba(255,255,255,.16);
    }

    *,*::before,*::after { box-sizing:border-box; }
    html { scroll-behavior:smooth; scroll-padding-top:148px; background:var(--dark); }
    ::-webkit-scrollbar { width:9px; background:var(--dark); }
    ::-webkit-scrollbar-thumb { border:2px solid var(--dark); border-radius:999px; background:#4A4650; }
    body { margin:0; background:var(--dark); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
    body,button,input,textarea { font-family:var(--font); }
    button,a { -webkit-tap-highlight-color:transparent; }
    a { color:inherit; text-decoration:none; }
    button { color:inherit; }
    ::selection { background:rgba(237,20,86,.35); color:#fff; }
    :focus-visible { outline:2px solid var(--pink); outline-offset:4px; }
    .skip-link { position:fixed; z-index:100; top:12px; left:12px; padding:11px 16px; border-radius:999px; background:var(--white); color:var(--dark); font-size:13px; font-weight:700; transform:translateY(-160%); }
    .skip-link:focus { transform:translateY(0); }
    .page-width { width:var(--page); margin-inline:auto; }
    .eyebrow { display:flex; align-items:center; gap:10px; margin:0; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
    .pill { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 17px; border:1px solid var(--line); border-radius:999px; color:var(--text); font-size:12px; font-weight:700; transition:background .2s ease,border-color .2s ease,transform .2s ease; }
    .pill:hover { border-color:rgba(237,20,86,.7); background:rgba(237,20,86,.1); transform:translateY(-1px); }
    .button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:6px 12px 6px 20px; border:1px solid rgba(16,24,40,.12); border-radius:999px; background:var(--paper); color:var(--dark); font-size:13px; font-weight:800; cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }
    .button:not(.nav-cta) { border-color:var(--pink); background:var(--pink); color:var(--white); }
    .button:hover { border-color:var(--pink); background:var(--pink); color:var(--white); transform:translateY(-2px); }
    .button:not(.nav-cta):hover { border-color:#C90F49; background:#C90F49; color:var(--white); }
    .button-arrow { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:50%; background:var(--dark); color:var(--white); transition:background .2s ease,color .2s ease,transform .2s ease; }
    .button-arrow svg { display:block; width:14px; height:14px; }
    .button:hover .button-arrow { background:var(--white); color:var(--dark); transform:translateX(1px); }
    .text-link { display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:700; }
    .text-link svg { width:15px; height:15px; transition:transform .2s ease; }
    .text-link:hover svg { transform:translate(3px,-3px); }

    /* Barra cápsula baseada na navegação da referência Valkeer */
    .site-header { position:fixed; z-index:50; inset:13px 0 auto; pointer-events:none; }
    .nav-capsule {
      width:min(1220px,calc(100% - 40px));
      min-height:68px;
      margin-inline:auto;
      padding:8px 10px 8px 22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      border:1px solid rgba(255,255,255,.15);
      border-radius:999px;
      background:rgba(15,14,17,.79);
      box-shadow:0 12px 44px rgba(0,0,0,.22);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      pointer-events:auto;
      transition:width .4s var(--ease),min-height .35s var(--ease),background .35s ease;
    }
    .site-header.is-scrolled .nav-capsule { width:min(760px,calc(100% - 40px)); min-height:60px; background:rgba(15,14,17,.96); }
    .site-header.is-scrolled .brand { min-width:150px; gap:8px; font-size:13px; }
    .site-header.is-scrolled .nav-links { gap:16px; }
    .site-header.is-scrolled .nav-links a { font-size:10px; }
    .site-header.is-scrolled .nav-cta { min-height:43px; padding:0 12px; gap:8px; font-size:11px; white-space:nowrap; }
    .brand { min-width:190px; height:33px; display:flex; align-items:center; }
    .brand img { display:block; width:96px; height:30px; object-fit:contain; object-position:left center; }
    .nav-links { display:flex; align-items:center; justify-content:center; gap:clamp(18px,2.7vw,36px); }
    .nav-links a { color:#D6D3DA; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; transition:color .2s ease; }
    .nav-links a:hover { color:var(--pink-mid); }
    .nav-cta { min-height:48px; padding:0 17px; gap:11px; }
    .nav-cta .button-arrow { width:32px; height:32px; flex-basis:32px; }
    .nav-cta .button-arrow svg { width:14px; height:14px; }
    .menu-toggle { display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:transparent; cursor:pointer; }
    .menu-toggle span { display:block; width:16px; height:1px; margin:5px auto; background:var(--white); transition:transform .2s ease; }
    .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3px) rotate(-45deg); }

    /* Navegação flutuante: transparente na hero, cápsula escura depois dela */
    @media (min-width:761px) {
      .site-header { inset:18px 0 auto; }
      .nav-capsule {
        border-color:transparent;
        border-radius:999px;
        background:transparent;
        box-shadow:none;
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
        transition:width .5s var(--ease),min-height .42s var(--ease),background-color .35s ease,border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease;
      }
      .site-header.is-scrolled .nav-capsule {
        width:min(820px,calc(100% - 48px));
        min-height:60px;
        border-color:rgba(255,255,255,.16);
        border-radius:999px;
        background:rgba(15,14,17,.92);
        box-shadow:0 16px 44px rgba(0,0,0,.35);
        -webkit-backdrop-filter:blur(20px) saturate(140%);
        backdrop-filter:blur(20px) saturate(140%);
      }
      .services .services-head { top:136px; }
    }

    /* Hero: marca e portfólio */
    .hero { position:relative; min-height:845px; padding:142px 0 0; overflow:hidden; background:var(--dark); isolation:isolate; }
    @media (min-width:761px) { .hero { padding-bottom:64px; } }
    .hero-background-video { position:absolute; z-index:-2; inset:0; display:block; width:100%; height:100%; object-fit:cover; opacity:.10; pointer-events:none; }
    .hero::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 47%,rgba(237,20,86,.095),transparent 47%),linear-gradient(180deg,rgba(255,255,255,.018),transparent 34%); }
    .hero-copy { width:var(--page); margin-inline:auto; text-align:center; }
    .hero h1 { max-width:1010px; margin:0 auto; font-size:clamp(43px,6.2vw,82px); line-height:.96; font-weight:700; letter-spacing:-.075em; }
    .hero h1 span { color:var(--pink); }
    .hero-intro { max-width:710px; margin:18px auto 0; color:#C9C6CE; font-size:clamp(15px,1.5vw,18px); line-height:1.55; }
    .hero-actions { display:flex; justify-content:center; align-items:center; gap:22px; margin-top:24px; }
    .hero-actions .text-link { color:#E8E5EB; }
    .hero-carousel { --hero-card-width:clamp(256px,20vw,360px); position:relative; width:100vw; height:calc(var(--hero-card-width) * 10 / 9 + 44px); margin:clamp(32px,3.2vw,40px) calc(50% - 50vw) 0; overflow:hidden; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; }
    .hero-carousel.is-dragging { cursor:grabbing; }
    .hero-carousel::before,.hero-carousel::after { content:""; position:absolute; z-index:5; top:0; bottom:0; width:clamp(32px,6vw,112px); pointer-events:none; }
    .hero-carousel::before { left:0; background:linear-gradient(90deg,var(--dark),rgba(15,14,17,.48) 24%,transparent); }
    .hero-carousel::after { right:0; background:linear-gradient(270deg,var(--dark),rgba(15,14,17,.48) 24%,transparent); }
    .hero-carousel-fade { position:absolute; z-index:6; left:0; right:0; bottom:0; height:32px; pointer-events:none; background:linear-gradient(0deg,var(--dark),transparent); }
    .ring-track { position:absolute; inset:0; }
    .ring-card { position:absolute; left:0; top:0; width:var(--hero-card-width); aspect-ratio:9/10; overflow:hidden; border:1px solid var(--project-border); border-radius:var(--project-radius); background:#151419; color:var(--dark); box-shadow:0 18px 44px rgba(0,0,0,.34); transition:none; will-change:transform; }
    .ring-card img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:top center; pointer-events:none; }
    .hero-ring-caption { position:absolute; z-index:7; left:50%; bottom:24px; margin:0; transform:translateX(-50%); color:#B6B2BC; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }

    /* Portfólio: projetos em uma grade direta, sem seletor intermediário */
    .portfolio { padding:98px 0 110px; background:#121115; }
    .section-heading-row { width:var(--page); margin-inline:auto; display:flex; align-items:flex-start; justify-content:space-between; gap:30px; }
    .portfolio-title { margin:0; color:var(--text); font-size:clamp(38px,5.1vw,68px); line-height:.98; font-weight:600; letter-spacing:-.075em; }
    .portfolio-title span { color:var(--pink); }
    .section-heading-row .method-lead { max-width:580px; margin-top:18px; text-wrap:balance; }
    .portfolio-top-link { flex:0 0 auto; margin-top:4px; }
    .portfolio-grid { width:var(--page); margin:34px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--project-gap); }
    .case-card { min-width:0; transition:transform .3s var(--ease); }
    .case-card:hover,.case-card:focus-within { transform:translateY(-4px); }
    .case-open { width:100%; display:block; padding:0; border:0; border-radius:var(--project-radius); background:transparent; text-align:left; cursor:pointer; }
    .case-open:focus-visible { outline:2px solid var(--pink); outline-offset:4px; }
    .case-art { position:relative; height:auto; aspect-ratio:1.28; overflow:hidden; isolation:isolate; border:1px solid var(--project-border); border-radius:var(--project-radius); background:#242229; }
    .case-art::after { content:""; position:absolute; z-index:1; right:0; bottom:0; left:0; height:35%; pointer-events:none; background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.58) 38%,rgba(0,0,0,.2) 72%,transparent 100%); }
    .case-image { position:absolute; z-index:0; top:0; left:0; display:block; width:100%; height:auto; max-width:none; transform:translateY(0); transition:transform var(--case-scroll-duration,6s) linear; }
    .case-image--cover { height:100%; object-fit:cover; object-position:center; }
    .case-card:hover .case-image,.case-card:focus-within .case-image { transform:translateY(var(--case-scroll-end,0px)); }
    @media (prefers-reduced-motion:reduce) {
      .case-image { transition:none; will-change:auto; }
      .case-card:hover .case-image,.case-card:focus-within .case-image { transform:none; }
    }
    .case-meta { position:absolute; z-index:2; right:auto; bottom:13px; left:14px; display:block; width:max-content; max-width:calc(100% - 28px); padding:0; overflow:visible; border:0; border-radius:0; background:transparent; color:var(--white); box-shadow:none; pointer-events:none; }
    .case-meta strong { display:block; color:var(--white); font-size:20px; line-height:1.08; font-weight:700; letter-spacing:-.04em; }
    .case-meta small { display:block; margin-top:2px; color:rgba(255,255,255,.86); font-size:12px; line-height:1.25; letter-spacing:.01em; }
    .portfolio-cta { width:var(--page); margin:24px auto 0; display:flex; align-items:center; justify-content:space-between; gap:24px; }
    .portfolio-cta .method-lead { max-width:480px; margin:0; text-wrap:balance; }

    /* Serviços em lista editorial, com identidade e portfólio da Gama */
    .services { position:relative; padding:108px 24px 116px; overflow:visible; background:var(--white); color:var(--dark); }
    .services::before { display:none; }
    .services-layout { width:min(1180px,100%); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:52px; }
    .services-head { position:sticky; top:106px; align-self:start; width:100%; margin:0; text-align:left; }
    .services-head .eyebrow { color:var(--muted-dark); }
    .services-title { max-width:550px; margin:24px 0 0; color:var(--dark); font-size:clamp(42px,3.8vw,58px); line-height:1.04; font-weight:600; letter-spacing:-.075em; text-wrap:balance; }
    .services-title span { color:var(--pink); }
    .services-subtitle { max-width:410px; margin:24px 0 0; color:#667085; font-size:15px; line-height:1.65; }
    .services-cta { margin-top:28px; }
    .services-showcase { display:flex; flex-direction:column; gap:96px; min-width:0; }
    .service-entry { min-width:0; }
    .service-index { display:block; color:var(--muted-dark); font-size:10px; font-weight:700; letter-spacing:.16em; line-height:1.2; }
    .service-entry h3 { margin:14px 0 0; color:var(--dark); font-size:clamp(27px,2.6vw,36px); font-weight:600; line-height:1.08; letter-spacing:-.055em; }
    .service-media { position:relative; height:clamp(230px,28vw,300px); margin:26px 0 0; overflow:hidden; border:1px solid rgba(16,24,40,.12); border-radius:18px; background:var(--bg); transition:box-shadow .6s cubic-bezier(.16,1,.3,1),border-color .6s cubic-bezier(.16,1,.3,1); }
    .service-photo { display:block; width:100%; height:100%; object-fit:cover; object-position:top center; transform:scale(1); transition:transform .9s cubic-bezier(.16,1,.3,1); }
    .service-photo--laptop { object-position:center 60%; }
    .service-media:hover { border-color:rgba(16,24,40,.2); box-shadow:0 22px 50px rgba(16,24,40,.16); }
    .service-media:hover .service-photo { transform:scale(1.05); }
    .service-description { max-width:560px; margin:26px 0 0; color:#475467; font-size:15px; line-height:1.7; }
    .service-deliverables-label { margin:24px 0 12px; color:var(--muted-dark); font-size:11px; font-weight:700; letter-spacing:.1em; line-height:1.2; text-transform:uppercase; }
    .service-deliverables { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; padding:0; list-style:none; }
    .service-deliverable { min-width:0; display:flex; align-items:flex-start; gap:12px; padding:13px 15px; border:1px solid rgba(16,24,40,.08); border-radius:14px; background:#FFFFFF; box-shadow:0 2px 8px rgba(16,24,40,.03); color:#101828; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; overflow-wrap:anywhere; }
    .service-deliverable:hover { transform:translateY(-2px); border-color:rgba(237,20,86,.28); box-shadow:0 10px 24px rgba(16,24,40,.07); }
    .service-deliverable-icon { width:32px; height:32px; flex:0 0 32px; border-radius:9px; background:rgba(16,24,40,.04); display:flex; align-items:center; justify-content:center; color:#344054; transition:background .2s ease,color .2s ease; }
    .service-deliverable:hover .service-deliverable-icon { background:rgba(237,20,86,.08); color:var(--pink); }
    .service-deliverable-icon svg { width:16px; height:16px; stroke-width:1.8; }
    .service-deliverable-body { display:flex; flex-direction:column; gap:2px; min-width:0; }
    .service-deliverable-name { display:block; color:#101828; font-size:13.5px; font-weight:600; line-height:1.3; }
    .service-deliverable-desc { display:block; color:#667085; font-size:12px; font-weight:400; line-height:1.35; }
    .service-entry.is-visible .service-deliverable { animation:service-deliverable-arrive .48s var(--ease) both; }
    .service-entry.is-visible .service-deliverable:nth-child(2) { animation-delay:60ms; }
    .service-entry.is-visible .service-deliverable:nth-child(3) { animation-delay:120ms; }
    .service-entry.is-visible .service-deliverable:nth-child(4) { animation-delay:180ms; }
    @keyframes service-deliverable-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    .services.is-reveal-ready .service-entry { opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
    .services.is-reveal-ready .service-entry.is-visible { opacity:1; transform:translateY(0); }
    .services.is-reveal-ready .service-entry:nth-child(2) { transition-delay:80ms; }
    .services.is-reveal-ready .service-entry:nth-child(3) { transition-delay:120ms; }
    .services.is-reveal-ready .service-entry:nth-child(4) { transition-delay:160ms; }
    .services.is-reveal-ready .service-entry:nth-child(5) { transition-delay:200ms; }
    .service-cursor { --cursor-x:-100px; --cursor-y:-100px; position:fixed; top:0; left:0; z-index:10000; display:flex; align-items:center; gap:8px; max-width:250px; padding:9px 13px 9px 10px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:var(--pink); color:var(--white); box-shadow:0 12px 28px rgba(237,20,86,.24); font-size:11px; font-weight:700; line-height:1.15; white-space:nowrap; pointer-events:none; opacity:0; visibility:hidden; transform:translate3d(var(--cursor-x),var(--cursor-y),0) translate(14px,14px) scale(.9); transition:opacity .16s ease,transform .22s cubic-bezier(.2,.75,.2,1),visibility .16s ease; will-change:transform; }
    .service-cursor.is-visible { opacity:1; visibility:visible; transform:translate3d(var(--cursor-x),var(--cursor-y),0) translate(14px,14px) scale(1); }
    .service-cursor svg { width:14px; height:17px; flex:0 0 auto; }
    @media (pointer:fine) { .service-media { cursor:none; } }

    /* Método: linha do tempo em leitura direta, com as quatro etapas abertas */
    .method { padding:91px 0 96px; background:#17161B; }
    .method-head { width:var(--page); margin:0 auto 36px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
    .method-title { max-width:690px; margin:11px 0 0; font-size:clamp(35px,4.7vw,58px); line-height:.98; letter-spacing:-.07em; }
    .method-title span { color:var(--pink); }
    .method-lead { max-width:330px; margin:0 0 3px; color:#AAA6B0; font-size:14px; line-height:1.55; }
    .method-sequence { position:relative; width:var(--page); margin:0 auto; padding:0; display:grid; gap:13px; list-style:none; }
    .method-sequence::before { content:""; position:absolute; z-index:0; top:43px; bottom:43px; left:42px; width:1px; background:rgba(255,255,255,.2); }
    .method-stage { position:relative; z-index:1; min-width:0; min-height:94px; padding:22px 28px 22px 20px; display:grid; grid-template-columns:44px minmax(0,1fr); align-items:start; gap:22px; scroll-margin-top:112px; border:1px solid rgba(255,255,255,.12); border-radius:16px; background:#1B191F; box-shadow:0 8px 24px rgba(0,0,0,.08); }
    .method-stage-index { width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(237,20,86,.42); border-radius:50%; background:#2B1A22; color:var(--pink-mid); font-size:11px; font-weight:800; letter-spacing:.08em; }
    .method-stage-copy { min-width:0; padding-top:1px; }
    .method-stage-copy h3 { margin:0 0 8px; color:var(--white); font-size:22px; line-height:1.15; font-weight:650; letter-spacing:-.045em; }
    .method-stage-copy p { max-width:820px; margin:0; color:#AAA6B0; font-size:14px; line-height:1.6; }

    /* Faixa clara para destacar o processo no percurso da página */
    @media (min-width:761px) {
      .method { background:var(--paper); color:var(--dark); }
      .method .eyebrow { color:var(--muted-dark); }
      .method-title { color:var(--dark); }
      .method-lead { color:#667085; }
      .method-sequence::before { background:rgba(237,20,86,.28); }
      .method-stage { border-color:var(--border); background:var(--white); box-shadow:0 8px 24px rgba(16,24,40,.045); }
      .method-stage-index { border-color:rgba(237,20,86,.22); background:var(--pink-light); color:var(--pink); }
      .method-stage-copy h3 { color:var(--dark); }
      .method-stage-copy p { color:#667085; }
    }

    @media (max-width:760px) {
      .method { padding:72px 0 78px; }
      .method-head { margin-bottom:27px; }
      .method-sequence { gap:10px; }
      .method-sequence::before { top:34px; bottom:34px; left:35px; }
      .method-stage { min-height:0; padding:17px 16px 18px 13px; grid-template-columns:44px minmax(0,1fr); gap:14px; border-radius:14px; }
      .method-stage-index { width:44px; height:44px; }
      .method-stage-copy h3 { margin-bottom:6px; font-size:19px; }
      .method-stage-copy p { font-size:13px; }
    }

    /* Sobre: retrato institucional e apresentação da Gama */
    .about { position:relative; padding:104px 0 110px; overflow:hidden; background:var(--dark); isolation:isolate; }
    .about::before { content:""; position:absolute; z-index:-1; top:6%; left:-250px; width:640px; aspect-ratio:1; border-radius:50%; pointer-events:none; background:radial-gradient(circle,rgba(237,20,86,.12),transparent 68%); }
    .about-layout { width:var(--page); margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr); gap:44px; align-items:center; }
    .about-portrait { position:relative; width:min(100%,470px); aspect-ratio:.79; margin:0 auto; isolation:isolate; }
    .about-portrait::before { content:""; position:absolute; z-index:-1; inset:16px -14px -14px 16px; border:1px solid rgba(237,20,86,.38); border-radius:22px; }
    .about-portrait::after { content:""; position:absolute; z-index:1; inset:0; border:1px solid rgba(255,255,255,.14); border-radius:20px; pointer-events:none; }
    .about-photo { width:100%; height:100%; display:block; border-radius:20px; background:#222027; object-fit:cover; object-position:center 43%; filter:grayscale(1) contrast(1.03); box-shadow:0 26px 76px rgba(0,0,0,.38); }
    .about-tool-dock { position:absolute; z-index:3; left:-44px; bottom:64px; display:flex; align-items:center; gap:4px; padding:7px; border:1px solid rgba(255,255,255,.13); border-radius:17px; background:linear-gradient(145deg,rgba(48,47,51,.97),rgba(31,30,34,.96)); box-shadow:0 18px 42px rgba(0,0,0,.42),0 4px 14px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.07); -webkit-backdrop-filter:blur(16px) saturate(125%); backdrop-filter:blur(16px) saturate(125%); animation:about-toolbar-drift 7.8s ease-in-out infinite; }
    .about-tool { width:42px; height:42px; flex:0 0 42px; display:flex; align-items:center; justify-content:center; gap:3px; border-radius:10px; color:rgba(255,255,255,.78); }
    .about-tool--dropdown { width:52px; flex-basis:52px; }
    .about-tool--active { color:var(--white); background:var(--pink); box-shadow:0 5px 16px rgba(237,20,86,.27),inset 0 1px rgba(255,255,255,.18); }
    .about-tool-dock svg { width:19px; height:19px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    .about-tool-dock .about-tool-caret { width:8px; height:8px; stroke-width:1.6; opacity:.72; }
    .about-tool-divider { width:1px; height:31px; flex:0 0 1px; margin-inline:3px; background:rgba(255,255,255,.15); }
    .about-tool--code { color:rgba(255,255,255,.7); background:rgba(255,255,255,.055); }
    @keyframes about-toolbar-drift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
    .about-copy { max-width:650px; }
    .about-title { margin:13px 0 23px; color:var(--white); font-size:clamp(42px,5.2vw,68px); line-height:.98; font-weight:700; letter-spacing:-.075em; text-wrap:balance; }
    .about-title span { color:var(--pink); }
    .about-lead { max-width:570px; margin:0; color:#D6D3DA; font-size:18px; line-height:1.58; }
    .about-body { max-width:570px; margin:15px 0 0; color:#AAA6B0; font-size:15px; line-height:1.68; }
    .about-facts { max-width:570px; margin:30px 0 0; padding-top:22px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; border-top:1px solid rgba(255,255,255,.12); }
    .about-fact { min-width:0; }
    .about-fact dt { color:var(--pink); font-size:clamp(14px,2vw,21px); line-height:1.1; font-weight:700; letter-spacing:-.045em; }
    .about-fact dd { margin:7px 0 0; color:#AAA6B0; font-size:11px; line-height:1.4; }
    @media (min-width:761px) {
      .about-layout { grid-template-columns:minmax(360px,.84fr) minmax(0,1fr); gap:clamp(48px,6.5vw,88px); }
      .about-portrait { width:100%; margin:0; }
    }
    @media (prefers-reduced-motion:reduce) { .about-tool-dock { animation:none; } }

    .faq-section { position:relative; padding:clamp(88px,9vw,126px) 24px; overflow:hidden; background:radial-gradient(ellipse at 10% 12%,rgba(237,20,86,.045),transparent 38%),var(--paper); color:var(--dark); }
    .faq-layout { width:min(1280px,100%); margin:0 auto; display:grid; grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr); align-items:start; gap:clamp(64px,8vw,132px); }
    .faq-intro { max-width:440px; }
    .faq-eyebrow { margin:0; color:var(--pink); font-size:10px; line-height:1.3; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
    .faq-title { max-width:430px; margin:19px 0 0; color:var(--dark); font-size:clamp(42px,4.1vw,58px); line-height:1.01; font-weight:650; letter-spacing:-.07em; text-wrap:balance; }
    .faq-copy { max-width:360px; margin:22px 0 0; color:#667085; font-size:15px; line-height:1.65; }
    .faq-cta { margin-top:27px; }
    .faq-list { display:block; border-top:1px solid rgba(16,24,40,.16); }
    .faq-item { overflow:visible; border:0; border-bottom:1px solid rgba(16,24,40,.16); border-radius:0; background:transparent; box-shadow:none; }
    .faq-item:hover,.faq-item[open] { border-color:rgba(16,24,40,.22); background:transparent; box-shadow:none; }
    .faq-item summary { min-height:68px; padding:18px 0; display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--dark); font-size:16px; line-height:1.4; font-weight:600; cursor:pointer; list-style:none; transition:color .18s ease; }
    .faq-item summary:hover { color:var(--pink); }
    .faq-item summary::-webkit-details-marker { display:none; }
    .faq-item summary::marker { content:""; }
    .faq-item summary:focus-visible { outline:2px solid var(--pink); outline-offset:-3px; border-radius:4px; }
    .faq-toggle { position:relative; width:20px; height:20px; flex:0 0 20px; display:block; color:var(--pink); }
    .faq-toggle::before,.faq-toggle::after { content:""; position:absolute; top:50%; left:50%; width:11px; height:1.5px; border-radius:2px; background:currentColor; transform:translate(-50%,-50%); transition:transform .2s ease,opacity .2s ease; }
    .faq-toggle::before { transform:translate(-50%,-50%) rotate(90deg); }
    .faq-item[open] .faq-toggle::before { transform:translate(-50%,-50%) rotate(90deg) scaleX(.15); opacity:0; }
    .faq-answer { padding:0 42px 22px 0; animation:faq-answer-in .22s ease both; }
    .faq-answer p { max-width:680px; margin:0; color:#667085; font-size:14px; line-height:1.7; }
    @keyframes faq-answer-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
    @media (prefers-reduced-motion:reduce) { .faq-item summary,.faq-toggle::before,.faq-toggle::after { transition:none; } .faq-answer { animation:none; } }
    

    .site-footer { position:relative; width:100%; margin:0; padding:clamp(68px,8vw,96px) 24px 0; color:#AAA6B0; font-size:12px; background:radial-gradient(ellipse at 82% 0,rgba(237,20,86,.08),transparent 38%),var(--dark); }
    .site-footer::before { content:""; position:absolute; top:0; left:24px; right:24px; max-width:1320px; height:1px; margin:0 auto; background:linear-gradient(90deg,rgba(237,20,86,.72),rgba(255,255,255,.12) 26%,rgba(255,255,255,.08) 72%,transparent); }
    .footer-shell { max-width:1320px; margin:0 auto; }
    .footer-main { display:grid; grid-template-columns:minmax(260px,.82fr) minmax(0,1.85fr); gap:clamp(54px,7vw,120px); padding-bottom:72px; }
    .footer-brand-block { max-width:360px; }
    .footer-brand { display:inline-flex; flex:0 0 auto; align-items:center; }
    .footer-brand img { display:block; width:132px; height:41px; object-fit:contain; object-position:left center; }
    .footer-statement { max-width:340px; margin:26px 0 0; color:#E8E5EB; font-size:16px; line-height:1.6; letter-spacing:-.015em; text-wrap:balance; }
    .footer-coverage { display:flex; align-items:flex-start; gap:9px; margin:22px 0 0; color:#8E8A94; font-size:11px; line-height:1.6; }
    .footer-coverage::before { content:""; width:6px; height:6px; flex:0 0 6px; margin-top:5px; border-radius:50%; background:var(--pink); }
    .footer-contact { display:flex; flex-direction:column; gap:8px; margin:20px 0 0; }
    .footer-contact-link { display:inline-flex; align-items:center; gap:8px; color:#C4C0CA; font-size:12px; transition:color .2s ease; }
    .footer-contact-link svg { width:14px; height:14px; color:var(--pink); flex-shrink:0; }
    .footer-contact-link:hover { color:var(--white); }
    .footer-contact-location { color:#7E7A84; font-size:11px; margin-top:2px; }
    .footer-nav-grid { display:grid; grid-template-columns:minmax(130px,.9fr) minmax(200px,1.35fr) minmax(150px,.9fr); gap:30px; }
    .footer-column { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
    .footer-column h3 { margin:0 0 5px; color:#8E8A94; font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
    .footer-column a { color:#C9C6CE; font-size:13px; line-height:1.4; transition:color .2s ease,transform .2s ease; }
    .footer-column a:hover { color:var(--pink-mid); transform:translateX(2px); }
    .footer-bottom { min-height:70px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-top:1px solid rgba(255,255,255,.12); color:#79757F; font-size:11px; }
    .footer-top-link { display:inline-flex; align-items:center; gap:10px; color:#D6D3DA; font-size:11px; font-weight:700; transition:color .2s ease; }
    .footer-top-link:hover { color:var(--pink-mid); }
    .footer-top-link span { color:var(--pink); font-size:16px; line-height:1; }
    @media (min-width:761px) and (pointer:fine) {
      body { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 2.5v17l5.1-4.8 3 6.8 3-1.3-3-6.7H19z' fill='%23ED1456' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,auto; }
    }

    .case-dialog { position:fixed; inset:0; display:grid; grid-template-columns:minmax(270px,330px) minmax(0,1fr); width:min(1440px,calc(100vw - 64px)); height:min(900px,calc(100dvh - 64px)); max-width:none; max-height:none; margin:auto; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.17); border-radius:22px; background:#17161B; color:var(--white); box-shadow:0 30px 110px rgba(0,0,0,.65); }
    .case-dialog:not([open]) { display:none; }
    .case-dialog[open] { display:grid; }
    .case-dialog::backdrop { background:rgba(7,6,8,.82); backdrop-filter:blur(7px); }
    html.dialog-open, html.dialog-open body { overflow:hidden; }
    .dialog-info { min-width:0; min-height:0; display:flex; flex-direction:column; padding:28px 26px; background:#17161B; }
    .dialog-top { display:flex; align-items:center; justify-content:space-between; gap:15px; }
    .dialog-index { color:#8E8A94; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
    .dialog-close { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--white); background:transparent; cursor:pointer; transition:background .2s ease,border-color .2s ease; }
    .dialog-close:hover { border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.07); }
    .dialog-close svg { width:18px; height:18px; }
    .dialog-project { margin-top:34px; }
    .dialog-tag { display:block; color:var(--pink-mid); font-size:10px; font-weight:800; letter-spacing:.13em; line-height:1.5; text-transform:uppercase; }
    .dialog-title { margin:13px 0 12px; font-size:clamp(30px,3vw,40px); line-height:.98; letter-spacing:-.065em; text-wrap:balance; }
    .dialog-copy { margin:0; color:#A5A2AC; font-size:14px; line-height:1.65; }
    .dialog-info-note { display:grid; gap:6px; margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); color:#8E8A94; font-size:11px; line-height:1.5; }
    .dialog-info-note strong { color:#D6D3DA; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
    .dialog-gallery { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); background:#0F0E11; }
    .dialog-toolbar { min-width:0; min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 18px; border-bottom:1px solid rgba(255,255,255,.1); background:#17161B; }
    .dialog-toolbar-title { min-width:0; display:grid; gap:4px; }
    .dialog-toolbar-kicker { color:#E8E5EB; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
    .dialog-toolbar-caption { color:#8E8A94; font-size:11px; line-height:1.3; }
    .dialog-zoom-controls { flex:0 0 auto; display:flex; align-items:center; gap:7px; }
    .dialog-zoom-button { min-width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); border-radius:10px; color:#E8E5EB; background:#222027; font-family:inherit; font-size:18px; font-weight:600; line-height:1; cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease; }
    .dialog-zoom-button:hover:not(:disabled) { border-color:rgba(255,255,255,.34); background:#222027; }
    .dialog-zoom-button:disabled { opacity:.42; cursor:not-allowed; }
    .dialog-zoom-fit { min-width:66px; padding:0 10px; color:#E8E5EB; font-size:11px; font-weight:700; }
    .dialog-zoom-fit[aria-pressed="true"] { border-color:rgba(237,20,86,.48); color:#FFD6E5; background:rgba(237,20,86,.1); }
    .dialog-zoom-value { min-width:42px; color:#A5A2AC; font-size:11px; font-variant-numeric:tabular-nums; text-align:center; }
    .dialog-preview { min-width:0; min-height:0; margin:0; overflow:auto; overscroll-behavior:contain; border:0; border-radius:0; background:#0F0E11; scrollbar-color:#7E7A84 #242229; scrollbar-width:thin; scrollbar-gutter:stable; }
    .dialog-preview:focus-visible { outline:2px solid var(--pink); outline-offset:-2px; }
    .dialog-preview img { display:block; width:100%; max-width:none; height:auto; margin-inline:auto; }
    @media (min-width:761px) {
      .dialog-close { position:absolute; z-index:2; top:13px; right:14px; }
      .dialog-toolbar { padding-right:68px; }
    }

    @media (max-width:1050px) {
      .brand { min-width:auto; }
      .nav-links { gap:17px; }
      .nav-links a { font-size:10px; }
      .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .faq-layout { grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr); gap:50px; }
      .footer-main { grid-template-columns:1fr; gap:46px; }
      .footer-brand-block { max-width:560px; }
    }
    @media (max-width:760px) {
      :root { --page:min(100% - 36px,600px); --project-gap:8px; }
      html { scroll-padding-top:88px; }
      .case-dialog { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); width:100vw; height:100dvh; border:0; border-radius:0; }
      .dialog-info { padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 12px; border-bottom:1px solid rgba(255,255,255,.12); }
      .dialog-top { min-height:38px; }
      .dialog-index { font-size:9px; }
      .dialog-close { width:36px; height:36px; flex-basis:36px; }
      .dialog-project { margin-top:7px; }
      .dialog-tag { font-size:9px; }
      .dialog-title { margin:5px 0 5px; font-size:clamp(23px,6vw,29px); line-height:1; }
      .dialog-copy { font-size:12px; line-height:1.45; }
      .dialog-info-note { display:none; }
      .dialog-gallery { padding-bottom:env(safe-area-inset-bottom,0px); }
      .dialog-toolbar { min-height:58px; gap:8px; padding:8px 12px; }
      .dialog-toolbar-title { gap:0; }
      .dialog-toolbar-kicker { font-size:8px; letter-spacing:.08em; white-space:nowrap; }
      .dialog-toolbar-caption { display:none; }
      .dialog-zoom-controls { gap:5px; }
      .dialog-zoom-button { min-width:40px; width:40px; height:40px; border-radius:10px; }
      .dialog-zoom-fit { width:auto; min-width:64px; padding:0 9px; font-size:10px; }
      .dialog-zoom-value { min-width:38px; font-size:10px; }
      .site-header { inset:9px 0 auto; }
      .nav-capsule { width:calc(100% - 24px); min-height:58px; padding:7px 8px 7px 15px; }
      .site-header.is-scrolled .nav-capsule { width:calc(100% - 24px); min-height:56px; }
      .nav-capsule { gap:16px; }
      .brand { min-width:0; }
      .site-header.is-scrolled .brand { min-width:0; }
      .nav-cta { min-height:40px; min-width:111px; padding:0 9px; font-size:10px; gap:6px; white-space:nowrap; flex:0 0 auto; }
      .site-header.is-scrolled .nav-cta { min-height:40px; min-width:111px; padding:0 9px; font-size:10px; gap:6px; }
      .nav-cta .button-arrow { width:26px; height:26px; }
      .site-header.is-scrolled .nav-cta .button-arrow { width:26px; height:26px; flex-basis:26px; }
      .menu-toggle { display:block; flex:0 0 auto; }
      .nav-links { position:absolute; top:calc(100% + 8px); left:0; right:0; display:none; padding:14px; flex-direction:column; align-items:stretch; gap:0; border:1px solid var(--line); border-radius:18px; background:rgba(15,14,17,.97); box-shadow:0 22px 45px rgba(0,0,0,.4); }
      .nav-links.is-open { display:flex; }
      .nav-links a { padding:13px 10px; border-bottom:1px solid rgba(255,255,255,.08); font-size:11px; }
      .nav-links a:last-child { border-bottom:0; }
      .hero { min-height:770px; padding-top:117px; padding-bottom:30px; }
      .hero h1 { font-size:clamp(42px,11vw,65px); }
      .hero-intro { max-width:500px; margin-top:15px; font-size:15px; }
      .hero-actions { gap:14px; margin-top:20px; }
      .hero-actions .button { min-height:44px; padding-inline:15px; }
      .hero-carousel { height:calc(var(--hero-card-width) * 10 / 9 + 28px); margin-top:28px; }
      .hero-ring-caption { bottom:10px; font-size:8px; }
      .portfolio { padding:72px 0 78px; }
      .section-heading-row { align-items:flex-start; flex-direction:column; gap:17px; }
      .portfolio-title { font-size:clamp(39px,10vw,59px); }
      .portfolio-top-link { margin-top:0; }
      .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .portfolio-cta { align-items:flex-start; flex-direction:column; gap:12px; }
      .portfolio-cta .method-lead { max-width:34ch; }
      .case-art { aspect-ratio:.98; }
      .case-meta { right:auto; bottom:11px; left:10px; max-width:calc(100% - 20px); padding:0; }
      .case-meta strong { font-size:14px; }
      .case-meta small { margin-top:4px; font-size:9px; }
      .services { padding:75px 18px 79px; }
      .services-layout { grid-template-columns:minmax(0,1fr); gap:52px; }
      .services-head { position:static; }
      .services-showcase { gap:64px; }      .service-deliverables { grid-template-columns:1fr; gap:8px; }
      .service-deliverable { padding:12px 14px; }
      .services-title { font-size:clamp(39px,10vw,58px); }
      .services-subtitle { font-size:13px; }
      .method { padding:69px 0 73px; }
      .method-head { align-items:flex-start; flex-direction:column; gap:12px; }
      .method-grid { grid-template-columns:1fr; gap:9px; }
      .method-item { min-height:140px; padding:18px; }
      .method-item h3 { margin-top:16px; }
      .faq-section { padding:74px 18px 82px; }
      .faq-layout { grid-template-columns:1fr; gap:34px; }
      .faq-title { max-width:520px; font-size:clamp(40px,9vw,54px); }
      .faq-copy { max-width:480px; font-size:14px; }
      .faq-item summary { min-height:64px; padding:16px 0; font-size:15px; }
      .faq-answer { padding-right:30px; }
      
      .site-footer { padding-inline:18px; }
      .footer-main { gap:42px; padding-bottom:44px; }
      .footer-nav-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px; }
      .footer-column--services { grid-column:1/-1; }
      .footer-bottom { min-height:78px; flex-wrap:wrap; gap:8px 20px; padding-block:18px 22px; }
    }
    @media (max-width:440px) {
      .nav-cta { padding:0 9px; font-size:10px; }
      .nav-cta .button-arrow { width:23px; height:23px; }
      .menu-toggle { width:37px; height:37px; }
      .hero { min-height:740px; }
      .hero h1 { font-size:42px; }
      .hero-carousel { margin-top:24px; }
      .portfolio-grid { grid-template-columns:1fr; }
      .case-art { aspect-ratio:1.18; }
      .case-meta { bottom:13px; left:12px; max-width:calc(100% - 24px); padding:0; }
      .case-meta strong { font-size:18px; }
      .case-meta small { font-size:12px; }
      .dialog-info { padding-inline:14px; }
      .dialog-title { font-size:clamp(22px,6vw,27px); }
    }
    @media (max-width:375px) {
      .nav-capsule { gap:10px; }
      .brand,.site-header.is-scrolled .brand { width:72px; min-width:0; flex:0 0 72px; }
      .brand img { width:72px; height:auto; max-height:30px; }
      .nav-cta,.site-header.is-scrolled .nav-cta { min-height:38px; min-width:0; padding:0 6px; gap:5px; font-size:10px; }
      .nav-cta .button-arrow,.site-header.is-scrolled .nav-cta .button-arrow { width:22px; height:22px; flex-basis:22px; }
      .menu-toggle { width:34px; height:34px; }
    }
    @media (prefers-reduced-motion:reduce) {
      html { scroll-behavior:auto; }
      *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
      .hero-carousel { cursor:default; }
    }