@font-face{font-family:"Pixelify Sans";src:url('/assets/fonts/PixelifySans-Variable.ttf') format('truetype');font-style:normal;font-weight:400 700;font-display:swap}

/* One interface palette. Portfolio artwork has its own fixed colors below. */
:root{
  --brand-paper:#E7E0D2;--brand-carbon:#191B18;--brand-vermilion:#EF4B32;
  --brand-acid:#D5EC62;--brand-dust:#898A80;--brand-reading-gray:#5E6258;
  --surface-page:var(--brand-paper);--surface-inverse:var(--brand-carbon);
  --text-primary:var(--brand-carbon);--text-secondary:#53574E;--text-inverse:var(--brand-paper);
  --action-background:var(--brand-vermilion);--action-text:var(--brand-carbon);
  --paper:var(--surface-page);--ink:var(--text-primary);--muted:var(--text-secondary);
  --line:#a19f93;--accent:var(--brand-acid);--clay:var(--brand-carbon);--focus-color:var(--brand-carbon);
  --display:Anton,'Arial Narrow',Impact,sans-serif;--button-font:"Pixelify Sans",Arial,sans-serif;
  --screen-inset:12px;--screen-radius:clamp(20px,3vw,44px);--screen-grain-opacity:.32;--screen-vignette-opacity:.018;
  --grain-tile:url('/assets/textures/screen-grain.png');
}
html{background:var(--brand-carbon);scroll-padding-top:125px}
body,.is-logos{background:var(--surface-page);color:var(--text-primary)}
body{margin:var(--screen-inset);font-size:17px;line-height:1.6}
#site-shell{min-height:calc(100dvh - 2 * var(--screen-inset))}
::selection{background:var(--brand-acid);color:var(--brand-carbon)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex="-1"]:focus-visible{outline:2px solid var(--focus-color);outline-offset:5px}
.skip-link{background:var(--brand-acid);color:var(--brand-carbon)}
/* A viewport-sized decorative surround. The document itself is never clipped or transformed. */
.screen-frame{position:fixed;z-index:45;inset:0;border:var(--screen-inset) solid var(--brand-carbon);border-radius:var(--screen-radius);pointer-events:none;box-shadow:inset 0 0 11px #191b1809,0 0 0 24px var(--brand-carbon)}
.screen-frame::after{content:"";position:absolute;inset:0;border-radius:calc(var(--screen-radius) - var(--screen-inset));box-shadow:inset 0 1px 0 #ffffff25;pointer-events:none}
.screen-vignette{position:absolute;inset:0;border-radius:inherit;opacity:var(--screen-vignette-opacity);pointer-events:none;background:radial-gradient(ellipse at center,transparent 65%,#000 100%)}
main>section{background-color:var(--paper)}
main>section,.cj-about-page,.services,.faq,.closing,.footer.cj-footer{position:relative;isolation:isolate}
main>section::before,.testimonials.section-grid::before,.footer.cj-footer::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain-tile);background-size:256px 256px;mix-blend-mode:soft-light;opacity:var(--screen-grain-opacity);pointer-events:none;animation:screen-grain .6s steps(1,end) infinite!important}
/* Shift the reusable texture in discrete jumps; content and brightness stay steady. */
@keyframes screen-grain{
  0%,100%{background-position:0 0}
  16.667%{background-position:-31px 47px}
  33.333%{background-position:73px -29px}
  50%{background-position:-59px -83px}
  66.667%{background-position:19px 101px}
  83.333%{background-position:113px 37px}
}
/* Carbon sections carry their own readable inverse tokens. */
.cj-about-preview,.testimonials.section-grid,.process-section,.footer.cj-footer,.is-logos .logos-page{
  --screen-grain-opacity:.14;--paper:var(--brand-carbon);--ink:var(--brand-paper);--muted:var(--brand-dust);--line:#55584e;--clay:var(--brand-acid);--focus-color:var(--brand-acid);
  background:var(--brand-carbon);color:var(--brand-paper);
}
.header,.is-logos .header{left:var(--screen-inset);right:var(--screen-inset);top:var(--screen-inset);background:var(--brand-paper);color:var(--brand-carbon);border-bottom:1px solid var(--line);padding-block:20px}
.wordmark{color:var(--brand-carbon)}.wordmark-dot{color:var(--brand-vermilion)}
.desktop-nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;white-space:nowrap;font:500 16px/1.25 var(--button-font);text-transform:none;letter-spacing:0;gap:22px}
.desktop-nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.header-tools{margin-left:auto}
.mobile-nav,.is-logos .mobile-nav{background:var(--brand-paper);color:var(--brand-carbon);border-color:var(--line)}
.mobile-nav a{font:500 26px/1.3 var(--button-font);text-transform:none;letter-spacing:0}
.language-trigger{font:500 16px/1.3 var(--button-font)}
.language-trigger:hover,.language-trigger[aria-expanded="true"]{background:var(--brand-acid);color:var(--brand-carbon)}
.language-menu{width:260px;background:var(--brand-paper);color:var(--brand-carbon);border:1px solid var(--brand-carbon);box-shadow:none}
.language-menu a{position:relative;isolation:isolate;overflow:hidden;color:var(--brand-carbon);font:500 17px/1.4 var(--button-font)}
.language-menu a+a{border-color:var(--line)}
.language-menu a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.language-menu a:is(:hover,:focus-visible){background:var(--brand-acid);color:var(--brand-carbon)}
.language-menu a:focus-visible{outline:2px solid var(--brand-carbon);outline-offset:-3px}
.language-menu .language-check{transition:opacity .15s}
.language-menu a:is(:hover,:focus-visible) .language-check{opacity:0}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.06;text-transform:uppercase;overflow-wrap:break-word}
p{max-width:64ch}
button,.button{font-family:var(--button-font);font-weight:500}
.eyebrow,.mono{font-family:var(--button-font);font-size:14px;letter-spacing:0}
.eyebrow.light{color:var(--brand-paper)}
.inline-link,.cj-section-meta>a{font:500 17px/1.4 var(--button-font);text-transform:none;letter-spacing:0}
.inline-link:hover,.cj-section-meta>a:hover{text-decoration:underline;text-underline-offset:5px}
.cj-hero{max-width:none;margin-inline:0;grid-template-columns:minmax(0,1.85fr) minmax(240px,1fr);padding-top:72px;padding-bottom:84px}
.cj-hero-copy{max-width:none;min-width:0}
.cj-hero-copy>.eyebrow{font-size:15px;margin-bottom:26px;color:var(--text-secondary)}
.cj-hero h1{font-size:clamp(58px,6.2vw,102px);line-height:1.07;color:var(--brand-carbon);max-width:100%;text-wrap:balance}
.cj-hero h1>span{white-space:normal}
.cj-hero-intro{max-width:48ch;margin-top:26px;font:400 18px/1.6 var(--font);color:var(--text-primary)}
.hero-illustration{color:var(--brand-vermilion);justify-self:end}
.drawing-pencil{color:var(--brand-carbon)}.drawing-pencil>path:first-child{fill:var(--brand-paper)}.drawing-star>path:nth-child(2){stroke:var(--brand-paper)}
.drawing-orbit{opacity:1;color:var(--brand-reading-gray)}
.cj-selected{padding-top:36px;background:var(--surface-page);color:var(--text-primary)}
.cj-about-preview,.cj-service-preview,.cj-process-preview,.cj-about-text,.service-item,.process-step,.faq-item{border-color:var(--line)}
.cj-about-preview h2{font-size:clamp(46px,5.4vw,82px);max-width:13ch;color:var(--brand-paper)}
.cj-about-preview p{font-size:18px;line-height:1.65;letter-spacing:0;max-width:48ch;color:var(--brand-paper)}
.cj-service-preview,.services,.cj-process-preview,.faq,.contact-layout,.cj-about-page,.cj-work-page{background:var(--brand-paper);color:var(--brand-carbon)}
.cj-service-preview article{border-color:var(--line)}
.cj-service-preview h2{font-size:clamp(40px,4.3vw,66px);color:var(--brand-carbon)}
.cj-service-preview p,.services .service-description p,.aside-note{font-size:17px;line-height:1.6;color:var(--text-secondary);letter-spacing:0}
.services .section-title,.services .service-item>summary h3,.cj-process-preview h2,.faq .section-title{color:var(--brand-carbon)}
.service-item>summary>.mono{font-size:14px}
.services .service-lead{font-size:18px!important;color:var(--brand-carbon)!important}
.service-description>p:last-child{font-size:17px}
.cj-process-preview h2{max-width:17ch}
.cj-process-preview .eyebrow{width:max-content;padding:3px 7px;background:var(--brand-acid);color:var(--brand-carbon)}
.testimonials.section-grid{border-color:var(--line)}
.testimonials .testimonial-progress{background:var(--brand-dust)}
.testimonials .testimonial-progress>span{background:var(--brand-acid)}
.testimonials .testimonial-controls .circle-button{min-height:36px;width:36px;flex-basis:36px;color:var(--brand-paper)}
.testimonials .testimonial-controls .circle-button:is(:hover,:focus-visible){background:var(--brand-acid);color:var(--brand-carbon)}
.testimonials .testimonial-controls>[data-testimonial-counter],.testimonials .testimonial-controls .testimonial-pause,.testimonials .client-details>[data-testimonial-service],.testimonials .testimonial-slot>.testimonial-context{color:var(--brand-dust);font-size:14px}
.testimonials .testimonial-quote{font:400 18px/1.55 var(--font);letter-spacing:0;min-height:12em}
.testimonials .client-placeholder{color:var(--brand-paper);font-size:16px}
.testimonials .client-avatar{background:var(--avatar-color);color:var(--brand-carbon)}
.testimonials .testimonial-content .feedback-statement{font:600 clamp(28px,2.75vw,44px)/1.2 var(--font);letter-spacing:-.035em;max-width:31ch}
.testimonials .testimonial-content .feedback-closing{margin-top:1.25em}
.process-visual{background:var(--brand-paper);color:var(--brand-carbon);border-radius:24px}
.process-visual::before{border-color:var(--brand-reading-gray)}
.process-step>summary .mono{color:var(--brand-dust);font-size:13px}
.step-description{font-size:18px;line-height:1.65;color:var(--brand-paper);max-width:58ch}
.step-description>p+p{font-size:16px;color:var(--brand-dust)}
.process-visual-label{font:500 14px/1.4 var(--button-font)}
.faq .faq-item{border-color:var(--line)}.faq .faq-item p{font-size:17px;color:var(--text-secondary);line-height:1.6}
.cj-about-page{padding-top:70px}
.cj-about-hero h1,.cj-about-text>h2,.cj-page-title h1,.project-heading h1,.contact-heading>h1{color:var(--brand-carbon)}
.cj-portrait{background:var(--brand-carbon);border-color:var(--brand-carbon);color:var(--brand-acid)}
.cj-portrait>.eyebrow{color:var(--brand-paper);font-size:14px}
.cj-portrait>.mark-svg{color:var(--brand-acid)}
.cj-about-text .about-intro{font:400 22px/1.5 var(--font);letter-spacing:-.015em;max-width:52ch}
.cj-about-text .about-body{color:var(--text-secondary);font:400 18px/1.65 var(--font);max-width:58ch}
.cj-about-text .language-list>li{font-family:var(--button-font);font-weight:500;letter-spacing:0;border-color:var(--line)}
.cj-about-text .language-list>li>.mono{color:var(--text-secondary);font-family:var(--button-font)}
.philosophy-section h2{font-size:clamp(36px,3.2vw,50px);margin-top:22px;max-width:none;text-wrap:balance}
.philosophy-reading{max-width:64ch}
.philosophy-reading p{font-size:18px;line-height:1.65}
.philosophy-reading p+p{margin-top:1.3em}
.cj-about-page .cj-about-text:last-child{padding-bottom:75px}
.project-heading h1{font-size:clamp(58px,7vw,110px);overflow-wrap:anywhere}
.project-heading-grid>div>p,.contact-heading>p{color:var(--text-secondary);font-size:18px;line-height:1.6}
.project-heading-grid .project-year{margin-top:20px}
.story-block p{font-size:18px;line-height:1.65;color:var(--text-secondary);max-width:64ch}
.tags>span{color:var(--text-primary);border-color:var(--line);font-size:13px}
.contact-heading>h1{font-size:clamp(50px,6.5vw,98px);max-width:16ch}
.contact-layout .aside-note{font-size:17px;max-width:34ch}
.contact-layout .contact-pending{font:500 16px/1.5 var(--button-font);color:var(--text-secondary)}
form label,.form-field-label{font:400 16px/1.5 var(--font)}
input,textarea,form select{background:var(--brand-paper);color:var(--brand-carbon);border:1px solid var(--brand-reading-gray);font:400 17px/1.5 var(--font)}
input:focus,textarea:focus,form select:focus{outline-color:var(--brand-carbon)}
input::placeholder,textarea::placeholder{color:var(--brand-reading-gray);opacity:1}
.contact-select-trigger{font:500 18px/1.4 var(--button-font);border-color:var(--brand-reading-gray)}
.contact-options{background:var(--brand-paper);color:var(--brand-carbon);border-color:var(--brand-carbon);box-shadow:3px 3px 0 #191b1826}
.contact-option{font:500 17px/1.4 var(--button-font)}
.contact-option:is(:hover,[aria-selected="true"],:focus-visible){background:var(--brand-acid);color:var(--brand-carbon)}
.contact-option:focus-visible{outline-color:var(--brand-carbon)}
.contact-select-trigger[aria-invalid="true"]{border:2px solid var(--brand-carbon)}
.field-error,.form-status{color:var(--brand-carbon);font-size:16px}
.form-status:not(:empty){border-left:3px solid var(--brand-carbon);padding:10px 14px;margin:22px 0;background:var(--brand-acid)}
.brief-actions{margin-top:18px}.brief-output{margin-top:20px;min-height:340px;font:400 16px/1.6 var(--font)}
.closing{background:var(--brand-vermilion);color:var(--brand-carbon);border-color:var(--brand-carbon)}
.closing .eyebrow,.closing>div>p{color:var(--brand-carbon);font-size:17px}
.closing-link h2{font-size:clamp(42px,5.5vw,80px);max-width:18ch}
.closing-link:hover{text-decoration:underline;text-underline-offset:7px}
.footer.cj-footer,.is-logos .footer{border-color:var(--line)}
.cj-footer-nav-links>a{font:500 clamp(30px,3.5vw,58px)/1.15 var(--button-font);letter-spacing:-.025em;color:var(--brand-paper);border-color:var(--line);padding:9px 0 11px}
.cj-footer .cj-footer-label,.cj-footer .cj-footer-kicker{font:500 15px/1.5 var(--button-font);letter-spacing:0;color:var(--brand-dust)}
.cj-footer-mark>span{color:var(--brand-vermilion)}
.cj-footer-practice,.cj-footer-pending{font-size:17px;line-height:1.6;color:var(--brand-dust);letter-spacing:0}
.cj-footer-contact,.cj-footer-social-links>a,.cj-footer-social-label{font:500 20px/1.4 var(--button-font);color:var(--brand-paper);letter-spacing:0}
.cj-footer-contact{border-color:var(--brand-paper)}
.cj-footer-contact:hover,.cj-footer-social-links>a:hover{color:var(--brand-acid)}
.cj-footer-demo-email{display:block;margin-top:14px;font:500 15px/1.5 var(--button-font);color:var(--brand-dust);overflow-wrap:anywhere}
.cj-footer-languages>a{font:500 16px/1.3 var(--button-font);border-color:var(--brand-dust)}
.cj-footer-languages>a:is(:hover,[aria-current],:focus-visible){background:var(--brand-acid);color:var(--brand-carbon);border-color:var(--brand-acid)}
.cj-footer-languages>a[aria-current]{text-decoration:underline;text-underline-offset:3px}
.cj-footer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);border-color:var(--line);color:var(--brand-dust);font:500 14px/1.5 var(--button-font)}
.cj-footer-bottom>a{justify-self:end}.cj-footer-bottom>span.cj-footer-motto{display:inline-flex;align-items:center;gap:10px;max-width:48ch;color:var(--brand-paper);font:500 15px/1.5 var(--button-font)}
.cj-footer-heart{display:block;width:16px;height:16px;flex-shrink:0;background:#FFACD3;-webkit-mask:url('/assets/icons/heart-filled.svg') center/contain no-repeat;mask:url('/assets/icons/heart-filled.svg') center/contain no-repeat}
.preview-notice{background:var(--brand-carbon);color:var(--brand-paper);border:1px solid var(--brand-dust);font:500 13px/1.5 var(--button-font);max-width:calc(100vw - 40px);bottom:22px}
.preview-notice button{color:var(--brand-paper);min-width:32px;min-height:32px}
.preview-notice>span::before{background:var(--brand-acid)}
.not-found h1{color:var(--brand-carbon)}

/* Existing study artwork is intentionally independent of the interface palette. */
.art,.art-paper{background:#F7F4F0;color:#3B021D}.art .art-sheet,.art-paper .art-sheet{background:#3B021D;color:#F7F4F0}.art .art-small,.art-paper .art-small{background:#FFACD3;color:#3B021D}
.art-clay,.art-sand{background:#FFACD3;color:#3B021D}.art-clay .art-sheet,.art-sand .art-sheet{background:#171717;color:#FFACD3}.art-clay .art-small,.art-sand .art-small{background:#F7F4F0;color:#3B021D}
.art-ink,.art-blue{background:#3B021D;color:#F7F4F0}.art-ink .art-sheet,.art-blue .art-sheet{background:#FFACD3;color:#3B021D}.art-ink .art-small,.art-blue .art-small{background:#171717;color:#FFACD3}
.logo-preview{background:#171717;color:#FFACD3}.logo-pause{background:var(--brand-carbon);color:var(--brand-paper);border-color:var(--brand-dust)}
.logo-pause:is(:hover,:focus-visible){background:var(--brand-acid);color:var(--brand-carbon)}
.cj-work-grid .sample-tag{background:var(--brand-paper);color:var(--brand-carbon);font:500 13px/1.3 var(--button-font);opacity:1;padding:5px 8px}
.cj-work-grid .logo-preview .sample-tag{background:var(--brand-paper);color:var(--brand-carbon)}
.cj-work-grid .project-caption>h3,.cj-work-grid .project-caption-title{color:var(--brand-paper);font-family:var(--display);font-weight:400;text-transform:uppercase}
.cj-work-grid .logo-overlay{font-family:var(--display);text-transform:uppercase}
.is-logos .logo-gallery-item{color:var(--brand-paper)}
.is-logos .mark-dialog{background:var(--brand-paper);color:var(--brand-carbon);border:1px solid var(--brand-carbon)}
.logos-note{color:var(--brand-dust);font:500 16px/1.5 var(--button-font);max-width:64ch}
.reveal{opacity:1;transform:none;transition:none}

@media(max-width:1350px){.desktop-nav{font-size:14px;gap:16px}}
@media(max-width:1350px){.desktop-nav{display:none}.header .menu-toggle{display:grid}.mobile-nav{display:flex}}
@media(max-width:1700px){html:not([lang="en"]) .desktop-nav{display:none}html:not([lang="en"]) .header .menu-toggle{display:grid}html:not([lang="en"]) .header .language-control{display:none}html:not([lang="en"]) .mobile-nav{display:flex}}
@media(max-width:900px){.cj-hero{grid-template-columns:minmax(0,1.8fr) minmax(170px,1fr);gap:28px;padding-top:50px}.cj-hero h1{font-size:clamp(44px,6.5vw,60px)}.cj-footer-bottom{grid-template-columns:1fr 1fr}.cj-footer-bottom>span.cj-footer-motto{grid-column:1/-1;grid-row:2;justify-self:start}.cj-footer-bottom>a{grid-column:2;grid-row:1}}
@media(max-width:620px){
  :root{--screen-inset:5px;--screen-radius:20px;--screen-grain-opacity:.26;--screen-vignette-opacity:.015}
  .cj-about-preview,.testimonials.section-grid,.process-section,.footer.cj-footer,.is-logos .logos-page{--screen-grain-opacity:.12}
  body{font-size:16px}.header,.is-logos .header{padding-block:16px}.header .wordmark{font-size:30px}
  .cj-hero{grid-template-columns:minmax(0,1fr);gap:30px;padding-top:38px;padding-bottom:50px}.cj-hero h1{font-size:clamp(42px,10.5vw,64px);line-height:1.08}
  .cj-hero-copy>.eyebrow,.eyebrow,.cj-section-meta .eyebrow{font-size:14px}.cj-section-meta>a{font-size:14px}
  .cj-hero-intro{font-size:17px;line-height:1.6;max-width:40ch}.hero-illustration{max-width:200px;justify-self:end}
  .cj-selected{padding-top:26px}.cj-section-meta{gap:12px;align-items:flex-start}
  .cj-about-preview h2{font-size:46px}.cj-about-preview p{font-size:17px}.cj-service-preview h2{font-size:42px}
  .testimonials .testimonial-quote{font-size:17px;min-height:12em}.testimonials .testimonial-content .feedback-statement{font-size:28px;line-height:1.25}
  .step-description{padding-left:0;font-size:17px}.process-step>summary{grid-template-columns:50px 1fr 24px;gap:10px}.process-step>summary .mono{font-size:12px}
  .cj-about-text .about-intro{font-size:20px}.cj-about-text .about-body,.philosophy-reading p{font-size:17px}
  .cj-about-hero h1{font-size:clamp(42px,11vw,64px)}.cj-about-text>h2,.philosophy-section h2{font-size:38px}
  .project-heading h1{font-size:clamp(50px,12vw,76px)}.contact-heading>h1{font-size:48px;max-width:100%}
  .story-block p,.contact-heading>p,.contact-layout .aside-note{font-size:17px}
  .cj-footer-nav-links>a{font-size:32px}.cj-footer-bottom{font-size:13px}.cj-footer-bottom>span.cj-footer-motto{font-size:15px}
  .cj-work-grid .project-caption>h3{background:var(--brand-carbon);padding:8px 10px;font-size:23px;text-shadow:none}
}