:root {
      --navy: #1A2044;
      --coral: #FF5A36;
      --cream: #F8F9FA;
      --white: #FFFFFF;
      --muted: #536273;
      --line: #C7CCD0;
      --blue: #DCE4EA;
      --font: "Outfit", Arial, Helvetica, sans-serif;
      --body: "DM Sans", "Segoe UI", Arial, sans-serif;
      --gutter: clamp(1.25rem, 4.2vw, 5rem);
      --section: clamp(5rem, 9vw, 9.5rem);
      --ease: cubic-bezier(.22, .61, .36, 1);
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
    body { margin: 0; background: var(--cream); color: var(--navy); font-family: var(--body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
    body, button, a { -webkit-tap-highlight-color: transparent; }
    [hidden] { display: none !important; }
    ::selection { background: var(--coral); color: var(--navy); }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; }
    a, button { touch-action: manipulation; }
    button { cursor: pointer; }
    a:focus-visible, button:focus-visible { outline: 3px solid currentColor; outline-offset: 6px; }
    :target { scroll-margin-top: 1rem; }
    h1, h2, h3, p, figure { margin: 0; }
    ul { list-style: none; margin: 0; padding: 0; }
    h1, h2, h3 { font-family: var(--font); font-weight: 700; }
    .wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter); }
    .section { padding-block: var(--section); }
    .eyebrow { display: flex; align-items: center; gap: .7rem; font-size: .75rem; font-weight: 600; line-height: 1.5; letter-spacing: .11em; text-transform: uppercase; }
    .eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--coral); flex: 0 0 7px; }
    .section-id { font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
    .section-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
    .display { font-size: clamp(2.7rem, 5.7vw, 5.9rem); line-height: 1.02; letter-spacing: -.065em; text-wrap: balance; }
    .muted { color: var(--muted); }
    .arrow { display: inline-block; font-family: Arial, sans-serif; font-size: 1.4em; font-weight: 400; line-height: 1; transition: transform .25s var(--ease); }
    .button { display: inline-flex; justify-content: space-between; align-items: center; gap: 1.8rem; min-height: 54px; padding: .9rem 1.3rem; background: var(--navy); color: var(--cream); border: 1px solid var(--navy); font-family: "Open Sans", sans-serif; font-size: .875rem; font-weight: 600; line-height: 1.35; transition: background .25s, color .25s; }
    .button:hover { background: var(--coral); color: var(--navy); }
    .button:hover .arrow, .text-link:hover .arrow { transform: translate(3px, -3px); }
    .button--coral { background: var(--coral); color: var(--navy); border-color: var(--coral); }
    .button--coral:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }
    .text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.75rem; min-height: 44px; border-bottom: 2px solid var(--coral); font-size: .875rem; font-weight: 600; }
    .skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 100; transform: translateY(-180%); background: var(--navy); color: var(--cream); padding: .75rem 1.25rem; }
    .skip-link:focus { transform: translateY(0); }
    .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; }

    
    .header { position: sticky; top: 0; z-index: 30; background: var(--cream); border-bottom: 1px solid var(--line); }
    .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 94px; }
    .logo { display: inline-flex; align-items: center; width: 104px; line-height: 0; }
    .logo img { display: block; width: 100%; height: auto; }
    .footer .logo { width: 118px; }
    .nav { display: flex; align-items: center; gap: clamp(1.3rem, 2.7vw, 3rem); margin-left: auto; margin-right: clamp(1rem, 3vw, 3rem); }
    .nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; position: relative; }
    .nav a::after { position: absolute; content: ""; left: 0; right: 0; bottom: 7px; height: 2px; background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
    .nav a:hover::after { transform: scaleX(1); }
    .header-cta { min-height: 44px; background: transparent; color: var(--navy); padding: .6rem 1rem; gap: 2rem; }
    .menu-toggle { display: none; align-items: center; gap: .7rem; min-height: 44px; padding: .5rem 0 .5rem .5rem; border: 0; background: transparent; font-size: .875rem; }
    .menu-icon { position: relative; width: 22px; height: 14px; }
    .menu-icon::before, .menu-icon::after { position: absolute; content: ""; left: 0; width: 22px; height: 1px; background: currentColor; transition: transform .2s; }
    .menu-icon::before { top: 3px; }
    .menu-icon::after { bottom: 3px; }
    [aria-expanded="true"] .menu-icon::before { transform: translateY(3.5px) rotate(45deg); }
    [aria-expanded="true"] .menu-icon::after { transform: translateY(-3.5px) rotate(-45deg); }

    
    .hero { position: relative; padding-top: clamp(2.5rem, 5vw, 5rem); }
    .hero-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center; gap: 1.25rem; min-height: min(670px, calc(100svh - 220px)); padding-top: 2.3rem; padding-bottom: clamp(3rem, 5vw, 5rem); }
    .hero h1 { position: relative; z-index: 2; font-size: clamp(3.5rem, 7.8vw, 8.4rem); line-height: .98; letter-spacing: -.075em; }
    .hero h1 span { display: block; }
    .hero-copy { max-width: 34rem; margin-top: 2rem; color: var(--muted); font-size: clamp(1rem, 1.12vw, 1.125rem); line-height: 1.65; }
    .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2rem; }
    .hero-art { position: relative; width: 100%; aspect-ratio: 1; align-self: center; isolation: isolate; }
    .orbit { position: absolute; inset: 6%; border: 1px solid var(--line); border-radius: 50%; }
    .orbit::before, .orbit::after { position: absolute; content: ""; background: var(--line); }
    .orbit::before { top: 50%; left: -11%; width: 122%; height: 1px; }
    .orbit::after { left: 50%; top: -11%; width: 1px; height: 122%; }
    .co-form { position: absolute; width: 79%; height: 79%; left: 6%; top: 10%; border-radius: 50%; border: clamp(30px, 5.8vw, 96px) solid var(--navy); clip-path: polygon(0 0, 100% 0, 100% 31%, 50% 50%, 100% 69%, 100% 100%, 0 100%); transform: rotate(-14deg); }
    .co-point { position: absolute; width: 28%; aspect-ratio: 1; right: 1%; bottom: 17%; border-radius: 50%; background: var(--coral); animation: point-enter 1.4s var(--ease) both; }
    .art-coordinate { position: absolute; font-size: .75rem; letter-spacing: .08em; }
    .art-coordinate--top { top: 0; left: 8%; }
    .art-coordinate--bottom { bottom: 0; right: 6%; }
    .art-plus { position: absolute; left: 6%; bottom: 3%; width: 17px; height: 17px; }
    .art-plus::before, .art-plus::after { content: ""; position: absolute; background: var(--navy); }
    .art-plus::before { top: 8px; width: 17px; height: 1px; }
    .art-plus::after { left: 8px; height: 17px; width: 1px; }
    .hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-block: 1.25rem; border-top: 1px solid var(--line); font-size: .75rem; letter-spacing: .04em; }
    .hero-bottom .down { font-size: 1.5rem; line-height: 1; }
    @keyframes point-enter { from { transform: translate(-28px, -12px) scale(.85); opacity: 0; } to { transform: translate(0) scale(1); opacity: 1; } }

    
    .manifesto { border-top: 1px solid var(--line); }
    .manifesto .display { max-width: 1220px; font-size: clamp(2.9rem, 6.5vw, 6.75rem); }
    .manifesto .display span { display: block; }
    .manifesto-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-top: 3rem; }
    .manifesto-copy { max-width: 31rem; font-size: 1.125rem; }
    .manifesto-copy p + p { margin-top: .75rem; color: var(--muted); }
    .three-words { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .875rem; }
    .three-words i { width: 5px; height: 5px; border-radius: 50%; background: var(--coral); margin-inline: .35rem; }

    
    .services { padding-top: 0; }
    .services-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding-top: 2.5rem; padding-bottom: 4rem; border-top: 1px solid var(--navy); }
    .services-heading .eyebrow { align-self: start; }
    .service-row { display: grid; grid-template-columns: .25fr .85fr 1fr; gap: 2rem; padding-block: 2.7rem; border-top: 1px solid var(--line); }
    .service-number { font-size: .875rem; padding-top: .2rem; }
    .service-row h3 { max-width: 26rem; font-size: clamp(1.9rem, 2.7vw, 2.8rem); line-height: 1.08; letter-spacing: -.045em; }
    .service-description { max-width: 34rem; }
    .tags { display: flex; flex-wrap: wrap; gap: .35rem 0; margin-top: 1.35rem; color: var(--muted); font-size: .875rem; }
    .tags li:not(:last-child)::after { content: "/"; display: inline-block; padding-inline: .7rem; color: var(--muted); }
    .services-note { display: flex; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--navy); font-size: .875rem; }
    .services-note .arrow { color: var(--navy); }

    
    .difference { background: var(--blue); }
    .difference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); }
    .difference-intro { display: flex; flex-direction: column; align-items: flex-start; }
    .difference-intro .eyebrow { margin-bottom: 3rem; }
    .difference-intro .display { max-width: 36rem; }
    .overlap-mark { position: relative; width: 166px; height: 100px; margin-top: 3rem; }
    .overlap-mark::before, .overlap-mark::after { content: ""; position: absolute; width: 100px; height: 100px; border-radius: 50%; }
    .overlap-mark::before { left: 0; background: var(--coral); }
    .overlap-mark::after { right: 0; border: 1px solid var(--navy); }
    .principle { display: grid; grid-template-columns: 2rem 1fr; gap: 1.2rem; border-top: 1px solid #AAB6C0; padding-block: 1.6rem; }
    .principle:first-child { border-color: var(--navy); }
    .principle:last-child { padding-bottom: 0; }
    .principle-number { font-size: .75rem; padding-top: .4rem; }
    .principle h3 { font-size: 1.65rem; line-height: 1.3; letter-spacing: -.035em; }
    .principle p { color: var(--muted); max-width: 29rem; margin-top: .6rem; }

    
    .projects-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-bottom: 3.5rem; }
    .projects-heading .eyebrow { margin-bottom: 2rem; }
    .projects-intro { max-width: 23rem; font-size: .875rem; color: var(--muted); }
    .project-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(1.25rem, 3vw, 3rem); row-gap: 3.5rem; }
    .project:nth-child(even) { margin-top: 5rem; }
    .project-visual { position: relative; width: 100%; aspect-ratio: 1.3; overflow: hidden; background: var(--blue); cursor: crosshair; }
    .project-art { position: absolute; inset: 0; overflow: hidden; transition: transform .8s var(--ease); }
    .project-visual:hover .project-art { transform: scale(1.035); }
    .project-category { position: absolute; z-index: 2; top: 1.1rem; left: 1.1rem; padding: .35rem .75rem; background: var(--cream); color: var(--navy); font-size: .75rem; opacity: 0; transform: translateY(-5px); transition: opacity .25s, transform .25s; }
    .project-visual:hover .project-category { opacity: 1; transform: translateY(0); }
    .sample-number { position: absolute; right: 1.25rem; bottom: 1rem; font-size: .75rem; letter-spacing: .1em; }
    .art-brand { display: grid; place-items: center; background: var(--navy); color: var(--cream); }
    .art-brand .specimen { width: 55%; line-height: 0; }
    .art-brand .specimen img { display: block; width: 100%; height: auto; }
    .art-brand .specimen b { color: var(--coral); font-weight: inherit; }
    .art-brand::before { position: absolute; content: ""; width: 72%; aspect-ratio: 1; border: 1px solid #536273; border-radius: 50%; }
    .art-campaign { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--coral); color: var(--navy); }
    .art-campaign .specimen { font-family: var(--font); font-size: clamp(4rem, 9.2vw, 10rem); font-weight: 700; line-height: .84; letter-spacing: -.075em; transform: rotate(-8deg); }
    .art-campaign .outline-word { -webkit-text-stroke: 1.5px var(--navy); color: var(--coral); }
    .art-campaign .campaign-dot { position: absolute; width: 14%; aspect-ratio: 1; background: var(--cream); border-radius: 50%; right: 7%; top: 9%; }
    .art-illustration { background: var(--blue); }
    .art-illustration .disc { position: absolute; border-radius: 50%; aspect-ratio: 1; }
    .art-illustration .disc--one { width: 49%; background: var(--navy); left: 16%; top: 16%; }
    .art-illustration .disc--two { width: 49%; background: var(--coral); right: 16%; bottom: 12%; mix-blend-mode: multiply; }
    .art-illustration .disc--three { width: 64%; border: 1px solid var(--navy); left: 18%; top: 8%; }
    .art-editorial { background: #F8F9FA; color: var(--navy); }
    .art-editorial::before { position: absolute; content: ""; inset: 9%; border-top: 1px solid var(--navy); border-bottom: 1px solid var(--navy); }
    .art-editorial .specimen { position: absolute; bottom: 15%; left: 12%; font-family: Georgia, serif; font-size: clamp(5rem, 15vw, 16rem); line-height: 1; font-style: italic; letter-spacing: -.09em; }
    .editorial-label { position: absolute; top: 13%; left: 12%; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
    .art-packaging { background: var(--coral); }
    .art-packaging .stripe { position: absolute; width: 26%; height: 67%; top: 16%; border: 1px solid var(--navy); border-radius: 100px; transform: rotate(28deg); }
    .art-packaging .stripe:nth-child(1) { left: 19%; background: var(--navy); }
    .art-packaging .stripe:nth-child(2) { left: 37%; background: var(--cream); }
    .art-packaging .stripe:nth-child(3) { left: 55%; }
    .art-digital { background: var(--navy); color: var(--cream); }
    .digital-grid { position: absolute; inset: 12%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5%; }
    .digital-grid span { border: 1px solid #536273; }
    .digital-grid span:nth-child(2) { border-radius: 50%; background: var(--coral); border-color: var(--coral); }
    .digital-grid span:nth-child(3) { border-radius: 50% 0 0 0; background: var(--blue); }
    .digital-grid span:nth-child(4) { grid-column: span 2; display: grid; place-items: center; color: var(--cream); line-height: 1; }
    .digital-grid span:nth-child(4) img { width: 55%; height: auto; }
    .digital-grid span:nth-child(5) { border-radius: 0 0 50% 0; background: var(--coral); border-color: var(--coral); }
    .project-caption { padding-top: 1.15rem; }
    .project-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
    .project-title-row h3 { font-size: 1.5rem; letter-spacing: -.04em; }
    .project-title-row span { font-size: .75rem; }
    .project-caption p { color: var(--muted); font-size: .875rem; margin-top: .25rem; }
    .project-client { display: block; color: var(--muted); font-size: .75rem; margin-top: .6rem; }

    
    .audience { border-top: 1px solid var(--line); }
    .audience-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; margin-bottom: 4rem; }
    .audience-heading .eyebrow { align-self: start; }
    .audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
    .audience-item { border-top: 1px solid var(--navy); padding-top: 1.5rem; }
    .audience-item h3 { min-height: 3.2rem; max-width: 15rem; font-size: .875rem; font-weight: 600; letter-spacing: .02em; line-height: 1.45; text-transform: uppercase; }
    .audience-item p { margin-top: 1rem; color: var(--muted); }
    .process { background: var(--navy); color: var(--cream); }
    .process-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 3rem; margin-bottom: 4.5rem; }
    .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
    .process-step { position: relative; border-top: 1px solid #536273; padding-top: 2rem; padding-right: 2rem; }
    .process-step::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--coral); }
    .process-number { display: block; color: var(--coral); font-size: .75rem; margin-bottom: 2rem; }
    .process-step h3 { font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: -.045em; line-height: 1.15; }
    .process-step p { color: #C7CCD0; max-width: 15rem; margin-top: 1rem; }

    
    .studio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); }
    .studio-intro .eyebrow { margin-bottom: 2.5rem; }
    .studio-intro .display { font-size: clamp(4.3rem, 8.5vw, 9rem); }
    .studio-description { max-width: 36rem; padding-top: 3.7rem; font-size: 1.125rem; }
    .studio-description p + p { margin-top: 1.25rem; color: var(--muted); }
    .profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 4.5rem; }
    .profile { border-top: 1px solid var(--navy); padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1.5rem; }
    .profile h3 { font-size: clamp(2rem, 3.2vw, 3.5rem); letter-spacing: -.05em; }
    .profile ul { padding-top: .45rem; color: var(--muted); font-size: .875rem; line-height: 1.7; }

    
    .contact { background: var(--navy); color: var(--cream); padding-bottom: 0; }
    .contact-top { display: flex; justify-content: space-between; gap: 2rem; }
    .contact-heading { margin-top: 3rem; font-size: clamp(3.8rem, 9vw, 9.6rem); line-height: .98; letter-spacing: -.07em; }
    .contact-heading span { display: block; }
    .contact-main { position: relative; }
    .contact-mark { position: absolute; right: 3%; top: 15%; width: clamp(80px, 12vw, 180px); aspect-ratio: 1; border-radius: 50%; background: var(--coral); }
    .contact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin-top: 3rem; margin-bottom: 5rem; }
    .contact-email { font-size: 1rem; text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: .3em; text-decoration-thickness: 2px; overflow-wrap: anywhere; padding-block: .5rem; }
    .contact-email:hover { color: var(--coral); }
    .footer { padding-block: 2.5rem 1.5rem; background: var(--navy); color: var(--cream); }
    .footer-inner { border-top: 1px solid #536273; padding-top: 2rem; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 2rem; align-items: start; }
    .footer-descriptor { max-width: 24rem; color: #C7CCD0; font-size: .875rem; padding-top: .4rem; }
    .footer-links { display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; justify-content: flex-end; font-size: .875rem; }
    .footer-links a { min-height: 44px; display: inline-flex; align-items: center; gap: .3rem; text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: .3rem; }
    .footer-links a:hover { color: var(--coral); }
    .footer-links a[aria-disabled="true"] { text-decoration: none; color: #C7CCD0; cursor: default; }
    .footer-links small { font-size: .75rem; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 3rem; padding-top: 1rem; color: #C7CCD0; font-size: .75rem; }
    .back-top { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; margin-top: -1rem; }
    .back-top:hover { color: var(--coral); }

    
    .reveal-ready { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
    .reveal-ready.is-visible { opacity: 1; transform: none; }

    @media (min-width: 1700px) { .hero-main { min-height: 700px; } }
    @media (max-width: 1100px) {
      .hero-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); min-height: 580px; }
      .hero h1 { font-size: clamp(3.5rem, 7.9vw, 6rem); }
      .hero-actions { gap: 1rem 1.5rem; }
      .hero-actions .button { gap: 1rem; }
      .service-row { grid-template-columns: .15fr .85fr 1fr; gap: 1.5rem; }
      .audience-grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
      .audience-item h3 { min-height: auto; max-width: none; }
      .footer-inner { grid-template-columns: .5fr 1.4fr 1fr; }
      .footer-links { gap: 0 1rem; }
    }
    @media (max-width: 840px) {
      html { scroll-padding-top: 6rem; }
      .header-inner { min-height: 78px; gap: 1.5rem; flex-wrap: wrap; }
      .logo { font-size: 2.75rem; }
      .header-cta { margin-left: auto; }
      .has-js .menu-toggle { display: inline-flex; }
      .nav { order: 4; width: 100%; margin: 0; padding-bottom: 1rem; justify-content: space-between; }
      .has-js .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: 1rem var(--gutter) 1.5rem; gap: 0; background: var(--cream); border-bottom: 1px solid var(--navy); }
      .has-js .nav a { padding-block: .7rem; min-height: 54px; font-size: 1.4rem; border-top: 1px solid var(--line); }
      .has-js .nav a::after { display: none; }
      .hero-main { min-height: 0; padding-top: 3rem; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
      .hero h1 { font-size: clamp(3.1rem, 7.7vw, 4.5rem); }
      .hero-art { align-self: start; margin-top: 2rem; }
      .co-form { border-width: 5.5vw; }
      .hero-copy { font-size: 1rem; }
      .hero-bottom > span:first-child { max-width: 75%; }
      .manifesto-bottom { gap: 2rem; }
      .services-heading, .audience-heading { grid-template-columns: 1fr; gap: 2rem; }
      .service-row { grid-template-columns: 2rem 1fr; gap: 1.2rem; }
      .service-description { grid-column: 2; max-width: none; }
      .difference-grid { gap: 2rem; }
      .difference-intro .display { font-size: clamp(2.5rem, 5.4vw, 4rem); }
      .projects-heading { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
      .projects-intro { max-width: 34rem; }
      .project:nth-child(even) { margin-top: 3rem; }
      .process-heading { flex-direction: column; }
      .process-grid { grid-template-columns: 1fr 1fr; row-gap: 2.5rem; }
      .process-step { padding-bottom: 1rem; }
      .process-number { margin-bottom: 1.25rem; }
      .studio-grid { gap: 2rem; }
      .studio-description { padding-top: 0; font-size: 1rem; }
      .profiles { gap: 2rem; }
      .profile { flex-direction: column; gap: .5rem; }
      .contact-mark { right: 0; width: 14vw; top: 23%; }
      .footer-inner { grid-template-columns: .5fr 1.5fr; }
      .footer-links { grid-column: 2; justify-content: flex-start; }
    }
    @media (max-width: 600px) {
      :root { --section: 4.5rem; }
      .eyebrow { font-size: .75rem; letter-spacing: .08em; }
      .section-top { margin-bottom: 2.5rem; }
      .section-top .section-id { display: none; }
      .display { font-size: clamp(2.6rem, 10.2vw, 3.8rem); }
      .hero { padding-top: 2rem; }
      .hero-main { grid-template-columns: 1fr; padding-top: 2rem; padding-bottom: 2rem; gap: 2rem; }
      .hero h1 { font-size: clamp(3rem, 11.7vw, 4.5rem); line-height: 1; }
      .hero-copy { max-width: 33rem; margin-top: 1.5rem; }
      .hero-actions { gap: 1rem 1.5rem; margin-top: 1.5rem; }
      .hero-actions .button { padding-inline: 1rem; gap: 1.2rem; }
      .hero-actions .text-link { gap: 1rem; }
      .hero-art { width: 74%; max-width: 330px; margin: 0 0 0 auto; }
      .co-form { border-width: clamp(32px, 11vw, 53px); }
      .hero-bottom { font-size: .75rem; padding-block: 1rem; }
      .hero-bottom .hero-bottom-note { display: none; }
      .hero-bottom > span:first-child { max-width: 88%; }
      .manifesto .display { font-size: clamp(2.45rem, 9.4vw, 3.7rem); }
      .manifesto-bottom { grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
      .manifesto-copy { font-size: 1rem; }
      .three-words { order: 2; }
      .services-heading { padding-bottom: 2.5rem; }
      .service-row { padding-block: 2rem; gap: 1rem; grid-template-columns: 1.8rem 1fr; }
      .service-row h3 { font-size: 1.9rem; }
      .service-description { font-size: 1rem; }
      .services-note { align-items: flex-start; }
      .services-note .arrow { margin-top: .2rem; }
      .difference-grid { grid-template-columns: 1fr; gap: 3rem; }
      .difference-intro .eyebrow { margin-bottom: 2rem; }
      .difference-intro .display { font-size: clamp(2.6rem, 10.2vw, 3.8rem); }
      .overlap-mark { width: 113px; height: 68px; margin-top: 2rem; }
      .overlap-mark::before, .overlap-mark::after { width: 68px; height: 68px; }
      .principle { grid-template-columns: 1.5rem 1fr; gap: 1rem; }
      .project-grid { grid-template-columns: 1fr; row-gap: 2.5rem; }
      .project:nth-child(even) { margin-top: 0; }
      .project-visual { aspect-ratio: 1.2; }
      .project-category { opacity: 1; transform: none; }
      .art-brand .specimen { font-size: 41vw; }
      .art-campaign .specimen { font-size: 23vw; }
      .art-editorial .specimen { font-size: 34vw; }
      .digital-grid span:nth-child(4) { font-size: 17vw; }
      .audience-heading { margin-bottom: 2.5rem; }
      .audience-grid { column-gap: 1.25rem; }
      .audience-item h3 { min-height: 2.8rem; font-size: .875rem; }
      .audience-item p { font-size: 1rem; }
      .process-heading { gap: 2rem; margin-bottom: 3rem; }
      .process-step { padding-right: 1rem; }
      .process-step p { font-size: 1rem; }
      .process-step h3 { font-size: 2rem; }
      .studio-grid { grid-template-columns: 1fr; gap: 2rem; }
      .studio-intro .eyebrow { margin-bottom: 2rem; }
      .studio-intro .display { font-size: 4.7rem; }
      .profiles { margin-top: 3rem; gap: 1.25rem; }
      .profile h3 { font-size: clamp(1.85rem, 6.8vw, 2.5rem); }
      .contact-top .section-id { display: none; }
      .contact-heading { font-size: clamp(3.2rem, 11.9vw, 4.5rem); margin-top: 2.5rem; }
      .contact-mark { position: static; width: 48px; margin-top: 2rem; }
      .contact-actions { flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-top: 2rem; margin-bottom: 2.5rem; }
      .contact-actions .button { min-width: 200px; }
      .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
      .footer-links { grid-column: auto; gap: .25rem 1.5rem; }
      .footer-bottom { margin-top: 2rem; }
    }
    @media (max-width: 380px) {
      .header-inner { gap: .85rem; }
      .header-cta { padding: .6rem .75rem; gap: .75rem; }
      .menu-toggle { gap: .4rem; }
      .hero h1 { font-size: 11.2vw; }
      .audience-grid, .profiles { grid-template-columns: 1fr; }
      .audience-item h3 { min-height: auto; }
      .process-grid { grid-template-columns: 1fr; }
      .process-step { padding-right: 0; }
      .process-step p { max-width: none; }
      .footer-bottom { flex-wrap: wrap; }
    }
    @media (hover: none) {
      .project-category { opacity: 1; transform: none; }
      .project-visual { cursor: default; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation: none !important; transition: none !important; }
      .reveal-ready { opacity: 1; transform: none; }
      .project-visual:hover .project-art, .button:hover .arrow, .text-link:hover .arrow { transform: none; }
    }
    @media (forced-colors: active) {
      .button { border: 1px solid ButtonText; }
      .hero-art, .project-art, .overlap-mark, .contact-mark { forced-color-adjust: none; }
    }
    @media print {
      body { background: white; color: black; }
      .header { position: static; }
      .menu-toggle, .hero-art, .contact-mark, .skip-link, .back-top { display: none !important; }
      .nav { display: flex !important; position: static !important; }
      .section { padding-block: 2rem; }
      .hero-main, .studio-grid { display: block; }
      .hero h1, .contact-heading { font-size: 3.5rem; }
      .display { font-size: 2.5rem; }
      .hero-copy { max-width: none; }
      .reveal-ready { opacity: 1; transform: none; }
      .project, .service-row, .profile { break-inside: avoid; }
      .process, .contact, .footer { background: white; color: black; }
      .process p, .footer p, .footer a, .footer-bottom { color: black; }
    }
  
    
    .logo {flex:0 0 auto; padding:0; overflow:visible; width:104px;}
    .logo img {object-fit:contain; max-width:100%; height:auto;}
    .display,.hero h1,.contact-heading {letter-spacing:-.025em; line-height:1.06;}
    .service-row h3,.profile h3,.project-title-row h3,.principle h3 {letter-spacing:-.02em;}
    .hero h1 {font-weight:800;}
    .hero h1 span:last-child {text-decoration:underline; text-decoration-color:var(--coral); text-decoration-thickness:.075em; text-underline-offset:.1em;}
    .hero-copy {margin-top:2.5rem;}
    .service-row {position:relative; transition:background .25s ease; padding-inline:1.25rem;}
    .service-row:hover {background:var(--blue);}
    .service-row:nth-of-type(2) {background:var(--navy);color:var(--cream);border-top:4px solid var(--coral);padding-block:3.1rem;}
    .service-row:nth-of-type(2) .service-number {color:var(--coral);}
    .service-row:nth-of-type(2) .tags,.service-row:nth-of-type(2) .tags li::after {color:var(--blue);}
    .service-row:nth-of-type(2) h3 {color:var(--cream);}
    .studio-grid {grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;}
    .studio-intro .display {font-size:clamp(3.8rem,6vw,6.5rem);line-height:1.05;letter-spacing:-.025em;}
    .studio-title {display:flex;flex-direction:column;align-items:flex-start;gap:.35em;}
    .studio-logo {display:block;width:clamp(160px,23vw,300px);max-width:100%;height:auto;object-fit:contain;}
    .studio-description {padding-top:0;font-size:1.125rem;}
    .profiles {gap:0;border-top:1px solid var(--navy);margin-top:3.5rem;}
    .profile {border-top:0;padding:2rem;min-width:0;flex-direction:column;gap:1rem;background:var(--blue);}
    .profile:nth-child(2) {background:var(--coral);}
    .profile ul {color:var(--navy);display:flex;flex-wrap:wrap;gap:.25rem 1rem;}
    .profile h3 {font-size:clamp(2rem,3.2vw,3.5rem);}
    .art-brand .specimen {position:relative;width:62%;margin:0;}
    .art-brand .specimen img,.digital-grid img {object-fit:contain;}
    @media(max-width:700px){
      .studio-grid {grid-template-columns:1fr;gap:2rem;}
      .studio-title {flex-direction:row;flex-wrap:wrap;align-items:center;gap:.2em;}
      .studio-intro .display {font-size:3.6rem;}
      .studio-logo {width:155px;}
      .service-row {padding-inline:1rem;}
      .profiles {grid-template-columns:1fr;}
      .profile {padding:1.5rem;}
      .hero h1 {letter-spacing:-.025em;}
    }
  
.co-cases{display:grid;grid-template-columns:1fr 1fr;gap:64px 36px;align-items:start}.co-case{min-width:0}.co-case-cover{display:block;width:100%;height:440px;object-fit:contain;background:#fff;padding:24px}.co-case h3{font-family:Outfit,sans-serif;font-size:32px;margin:8px 0}.co-case-tag{font-size:14px;margin-top:20px;color:#536273}.co-case>p:not(.co-case-tag){font-size:18px}.co-case details{margin-top:20px;border-top:1px solid #DCE4EA}.co-case summary{cursor:pointer;padding:18px 0;font-size:16px;color:#1A2044;text-decoration:underline;text-decoration-color:#FF5A36;text-underline-offset:6px}.co-case summary:focus-visible{outline:2px solid #1A2044;outline-offset:5px}.co-case-body p{font-size:16px;margin:0 0 20px}.co-case-body h4{font-size:16px;margin:24px 0 10px}.co-case-body figure{margin:24px 0}.co-case-body img{width:100%;max-height:600px;object-fit:contain;background:white}.co-case-body figcaption{font-size:14px;color:#536273;margin-top:10px}.co-credits{font-size:14px;max-width:850px;margin-top:64px;color:#536273}@media(max-width:700px){.co-cases{grid-template-columns:1fr;gap:45px}.co-case-cover{height:360px;padding:15px}}@media print{.co-case details{display:block}.co-case-body{display:block}}

.co-case-cover{background:#F8F9FA;mix-blend-mode:darken;aspect-ratio:4/3;height:auto;padding:0;object-fit:contain}.co-case-body img{background:transparent;mix-blend-mode:darken}.co-case-body h4{font-family:Outfit,sans-serif}.co-portfolio{margin-top:48px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:#1A2044;color:#F8F9FA}.co-portfolio>img{width:100%;display:block}.co-portfolio h3{font-family:Outfit,sans-serif;font-size:clamp(30px,4vw,48px);line-height:1.05;margin:12px 0 20px}.co-portfolio p{max-width:440px}.co-portfolio .button{margin-top:22px;white-space:normal}.co-pdf-note{font-size:13px;color:#DCE4EA;margin-top:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:700px){.co-portfolio{grid-template-columns:1fr;padding:24px;gap:24px}.co-portfolio>img{max-height:220px;object-fit:cover}.co-case-cover{height:auto;padding:0}.co-portfolio .button{font-size:14px}}

[hidden]{display:none!important}.pf-wrap{width:min(1200px,calc(100% - 80px));margin:auto}#pf-app{color:#1A2044;background:#F8F9FA;padding-top:0}#pf-app a{color:inherit}#pf-app a:focus-visible,#pf-app h1:focus-visible{outline:3px solid #FF5A36;outline-offset:7px}#pf-app h1,#pf-app h2{font-family:Outfit,sans-serif;letter-spacing:-.045em}#pf-app figure{margin:0}#pf-app img{display:block;width:100%;object-fit:contain}#pf-app figcaption{font-size:13px;line-height:1.5;color:#536273;margin-top:14px}.pf-kicker{text-transform:uppercase;font-size:12px!important;letter-spacing:.1em;font-weight:500}.pf-hero{background:#1A2044;color:#F8F9FA;overflow:hidden}.pf-hero>.pf-wrap{position:relative;min-height:660px;display:flex;align-items:center}.pf-hero-copy{position:relative;z-index:1;width:52%;padding:60px 0}.pf-hero h1{font-size:clamp(48px,6.6vw,90px);line-height:1.02;margin:22px 0 28px}.pf-hero-copy>p:not(.pf-kicker){font-size:19px;line-height:1.65;max-width:460px}.pf-selection-link{display:inline-block;margin-top:32px;text-decoration:underline;text-underline-offset:8px;text-decoration-color:#FF5A36!important}.pf-letter{position:absolute;inset:0;width:100%!important;height:100%;object-fit:cover!important}.pf-intro{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:90px 0 58px;scroll-margin-top:100px}.pf-intro>p:last-child{font-size:24px;line-height:1.5;margin:0;max-width:770px}.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:65px 36px}.pf-card{display:block;text-decoration:none}.pf-card>img{aspect-ratio:4/3;mix-blend-mode:darken;transition:transform .25s ease}.pf-card:hover>img{transform:translateY(-5px)}.pf-card-meta{display:flex;justify-content:space-between;gap:20px;margin-top:22px;font-size:12px;line-height:1.5;color:#536273}.pf-card-meta>span:last-child{font-size:25px;color:#FF5A36}.pf-card h2{font-size:35px;margin:9px 0}.pf-card>p{font-size:17px;margin:0;line-height:1.5}.pf-credit{font-size:13px;line-height:1.6;color:#536273;max-width:800px;margin:75px 0}.pf-back{display:inline-block;margin-top:35px;text-decoration:none;font-size:14px}.pf-project-head{padding:65px 0 45px;max-width:950px}.pf-project h1{font-size:clamp(55px,8vw,110px);line-height:1.03;margin:15px 0 22px}.pf-deck{font-size:clamp(23px,3vw,34px);max-width:720px;line-height:1.3;margin:0}.pf-lead img{max-height:680px;mix-blend-mode:darken}.pf-story{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;padding:85px 0}.pf-story h2{font-size:44px;line-height:1.1;margin:20px 0}.pf-story p:not(.pf-kicker){font-size:20px;line-height:1.6;margin:0 0 25px}.pf-story dl{border-top:1px solid #DCE4EA;margin-top:32px}.pf-story dt{font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:27px 0 10px}.pf-story dd{font-size:16px;line-height:1.65;margin:0}.pf-gallery{display:grid;grid-template-columns:1fr 1fr;gap:55px 35px;align-items:start}.pf-gallery img{max-height:620px;mix-blend-mode:darken}.pf-gallery figure:only-child{grid-column:1/-1}.pf-next{display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid #DCE4EA;padding:32px 0 70px}.pf-next a{text-decoration:none}.pf-next a:last-child{font-family:Outfit,sans-serif;font-size:30px}.pf-next small{display:block;font:12px 'DM Sans',sans-serif;margin-bottom:12px}.pf-contact{padding:70px 0 85px;background:#1A2044;color:#F8F9FA}.pf-contact h2{font-size:clamp(40px,6vw,70px);line-height:1.05;margin:20px 0 35px}
@media(max-width:700px){.pf-wrap{width:calc(100% - 40px)}#pf-app{padding-top:0}.pf-hero>.pf-wrap{min-height:740px;align-items:flex-start}.pf-hero-copy{width:100%;padding-top:42px}.pf-hero h1{font-size:54px}.pf-hero-copy>p:not(.pf-kicker){font-size:16px;max-width:320px}.pf-letter{top:360px;height:370px!important;width:555px!important;left:calc(50% - 385px);object-fit:contain!important}.pf-selection-link{margin-top:15px;font-size:14px}.pf-intro{grid-template-columns:1fr;gap:15px;padding:50px 0 35px}.pf-intro>p:last-child{font-size:20px}.pf-grid{grid-template-columns:1fr;gap:42px}.pf-card h2{font-size:30px}.pf-project-head{padding:38px 0 30px}.pf-story{grid-template-columns:1fr;gap:15px;padding:45px 0}.pf-story h2{font-size:36px}.pf-story p:not(.pf-kicker){font-size:18px}.pf-gallery{grid-template-columns:1fr;gap:35px}.pf-next{align-items:flex-start;flex-direction:column}.pf-next a:last-child{font-size:27px}.pf-credit{margin:45px 0}.pf-contact{padding:45px 0}.pf-project h1{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.pf-card>img{transition:none}}
.pf-feature-link{display:inline-block;margin-top:20px;padding:12px 0;border-bottom:2px solid #FF5A36;text-decoration:none;color:#1A2044}.pf-feature-link:focus-visible{outline:2px solid #1A2044;outline-offset:5px}

.pf-card--co{position:relative}.pf-card--co:before{content:"PROYECTO CO.";position:absolute;z-index:2;top:18px;left:18px;background:#FF5A36;color:#fff;font-family:Outfit,sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;padding:7px 9px}.pf-card--co img{outline:1px solid rgba(26,32,68,.08)}



.co-case-cover,.pf-lead,.pf-gallery figure,.pf-gallery img,.pf-project img{background:#fff!important;}
.pf-lead img,.pf-gallery img{mix-blend-mode:normal!important;}



.co-case-cover,.pf-card>img,.pf-lead img{background:#fff!important;mix-blend-mode:normal!important;}
.pf-card>img{object-fit:contain!important;}
.co-case-cover{object-fit:contain!important;}



.pf-gallery--showcase{grid-template-columns:1fr 1fr;gap:64px 36px;}
.pf-gallery--showcase .pf-wide{grid-column:1/-1;}
.pf-gallery--showcase .pf-wide img{width:100%;height:auto;max-height:none!important;object-fit:contain!important;background:#fff!important;mix-blend-mode:normal!important;}
.pf-project[data-project="good-care-clinic"] .pf-lead img,
.pf-project[data-project="hg-abogados"] .pf-lead img{width:100%;height:auto;max-height:none!important;object-fit:contain!important;background:#fff!important;mix-blend-mode:normal!important;}
.co-case a[href="/portfolio/good-care-clinic/"] img,
.co-case a[href="/portfolio/hg-abogados/"] img{background:#fff!important;}
@media(max-width:700px){.pf-gallery--showcase{grid-template-columns:1fr;gap:40px}.pf-gallery--showcase .pf-wide{grid-column:auto}}



.pf-project[data-project="good-care-clinic"] .pf-lead,
.pf-project[data-project="hg-abogados"] .pf-lead{margin-bottom:18px;}
.pf-project[data-project="good-care-clinic"] .pf-lead img,
.pf-project[data-project="hg-abogados"] .pf-lead img,
.pf-project[data-project="good-care-clinic"] .pf-gallery img,
.pf-project[data-project="hg-abogados"] .pf-gallery img{background:#fff!important;mix-blend-mode:normal!important;object-fit:contain!important;height:auto!important;max-height:none!important;}
.pf-project[data-project="good-care-clinic"] .pf-gallery--showcase,
.pf-project[data-project="hg-abogados"] .pf-gallery--showcase{gap:58px;}
.pf-project[data-project="good-care-clinic"] .pf-gallery--showcase figure,
.pf-project[data-project="hg-abogados"] .pf-gallery--showcase figure{background:#fff;}
.pf-project[data-project="good-care-clinic"] .pf-gallery--showcase figcaption,
.pf-project[data-project="hg-abogados"] .pf-gallery--showcase figcaption{max-width:780px;margin-top:12px;}
.co-case-cover,.pf-card>img{background:#fff!important;mix-blend-mode:normal!important;object-fit:contain!important;}



.co-case-cover,
.co-case-body img,
.pf-index img,
.pf-project img,
.pf-project figure img,
.pf-contact img {
  display:block !important;
  border:0 !important;
  outline:0 !important;
  vertical-align:top !important;
  box-shadow:none;
  background:transparent;
  image-rendering:auto;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);
}
.co-case-body figure,
.pf-project figure {
  margin:24px 0;
  line-height:0;
  overflow:hidden;
  background:transparent;
}
.co-case-body figcaption,
.pf-project figcaption {
  line-height:1.45;
}