/* Chemion Lab: a working studio, with real work on the page. */
:root{--ink:#282e29;--muted:#656960;--dark:#252c27;--cyan:#eeb48a;--teal:#9b4d2d;--line:#d7d5c9;--paper:#f0eee5}
body{background:#fbfaf5}
::selection{background:#eeb48a;color:#282e29}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline-color:#a34d2c}
.section{padding-block:95px}
.eyebrow{font-size:11px;letter-spacing:.09em}
h2{font-size:clamp(34px,3.7vw,50px);font-weight:700;letter-spacing:-.045em}
.site-header{color:var(--ink);border-bottom:1px solid #373d2d1c}
.brand img{border-radius:3px}
.brand>span{font-weight:750}
.brand small,.company-page .brand small{color:#717668}
.desktop-nav a{color:#4f574d}
.desktop-nav a:hover,.language-link:hover{color:#a64c29}
.header-contact{border-color:#aeb1a1;border-radius:2px}
.header-contact:hover{background:#e9e7dc}
.motion-toggle,.language-link{color:#525c4f}
.menu-toggle span{background:var(--ink)}
.mobile-nav{background:#f5f2ea;border-color:#b6bbab;border-radius:2px;box-shadow:0 12px 26px #343d2917}
.mobile-nav a{color:var(--ink);border-color:#d7d5c9}
.button{border-radius:2px}
.button-cyan{background:#a24b2b;color:#fffaf3}
.button-cyan:hover{background:#823a20}
.button-outline{background:transparent;border-color:#a9ae9f;color:var(--ink)}
.button-outline:hover{background:#e7e7da}
.button-light{background:#e9e8df}
.hero,.company-hero{background:#f5f2ea;color:var(--ink)}
.hero{height:auto;min-height:760px;max-height:none}
.hero-grid,.hero-glow{display:none}
.hero-studio-layout{display:flex;align-items:center;position:relative;min-height:760px;padding-block:168px 126px}
.hero #hero-canvas{mask-image:linear-gradient(90deg,transparent 28%,#000 68%)}
.hero-content{padding-top:0!important;min-width:0;max-width:710px}
.hero-eyebrow{color:#66705e;margin-bottom:29px;font-size:11px}
.hero h1{font-size:clamp(54px,6.4vw,84px);font-weight:750;line-height:1.25;letter-spacing:-.065em;white-space:nowrap}
.hero h1 span{color:var(--ink);text-decoration:underline;text-decoration-color:#cc865f;text-decoration-thickness:2px;text-underline-offset:12px}
.hero-description{font-size:17px;line-height:1.9;color:#606858;max-width:510px;margin-top:32px;word-break:keep-all}
.hero-buttons{margin-top:28px}
.studio-signature{font-size:11px;letter-spacing:.04em;color:#818575;margin-top:30px}
.hero-bottom{color:#6d7564;border-color:#b7bcaa;font-size:12px}
.scroll-link{letter-spacing:.04em}
.scroll-track{border-color:#7b8470}
.scroll-track i{background:#a24b2b}
.discipline-strip{background:#e9e6da;border-block:1px solid #d3d2c4;padding-block:19px}
.discipline-strip .container{min-width:0;gap:20px}
.discipline-strip span{font-size:14px;letter-spacing:.015em;font-weight:550;color:#59614e}
.discipline-strip i{font-size:14px;color:#9c9f8b}
.section-heading{margin-bottom:42px}
.section-heading .eyebrow{color:#9b4d2d}
.company-overview{padding-bottom:35px}
.company-overview-grid{border:0;border-top:1px solid var(--line);border-radius:0;gap:60px}
.company-note,.company-product{padding:29px 0;background:none;border:none}
.company-product{border-left:0}
.note-label{color:#9b4d2d;font-size:11px}
.company-overview h3 small{color:#717864}
.capability-tags li{border:0;border-radius:0;border-right:1px solid #bbc1ab;background:none;padding:0 11px 0 0;color:#5b6750}
.text-link{color:#8e4426;border-color:#c1a68d}
.text-link:hover{color:#602e1b;border-color:#602e1b}
.services-grid,.english-services{grid-template-columns:repeat(2,1fr);gap:0 60px;border:0}
.service-card,.english-services article{padding:28px 0 30px;border:0;border-top:1px solid #c3c8b7;min-height:0;background:transparent;min-width:0}
.service-card:hover{background:transparent}
.service-top{margin-bottom:15px}
.service-top svg{display:block;width:35px;height:35px;stroke:#a05d3d;stroke-width:1.65}
.service-card:nth-child(3n) .service-top svg,.english-services article:nth-child(3n) .service-top svg{stroke:#697958}
.section-mark{display:block;width:38px;height:38px;margin-bottom:19px;color:#74825f}
.section-mark svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.section-mark-make{color:#a05d3d}
.section-mark-mail{color:#715f49}
.service-number,.english-services article>span{color:#967752;font-size:11px}
.service-card h3,.english-services h3{font-size:24px;letter-spacing:-.035em}
.english-services .service-top+h3{margin-top:0}
.service-tags{color:#7c826e;font-size:11px;margin-top:17px}
.work{background:#eeeee3}
.featured-grid{grid-template-columns:1fr 1fr;gap:43px 28px}
.featured-school{grid-row:auto;grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;padding-bottom:43px;border-bottom:1px solid #c6cab7}
.featured-school .featured-visual{height:auto;aspect-ratio:16/11;background:#dedfcf}
.featured-visual{border-radius:2px;height:310px}
.browser-frame{transform:none;left:22px;right:22px;top:77px;border-radius:2px;box-shadow:0 12px 20px #333c2515}
.school-visual:hover .browser-frame{transform:translateY(-3px)}
.featured-school .featured-copy{padding:0}
.featured-school .featured-copy h3{font-size:42px;line-height:1.3;margin-top:14px}
.featured-school .featured-copy h3 small{display:block;margin:7px 0 0;font-size:15px}
.featured-school .featured-copy p{font-size:17px;line-height:1.9;margin-top:20px}
.visual-label{font-family:monospace;font-size:10px;letter-spacing:.06em;border-radius:0}
.image-note{color:#656e51}
.project-type{color:#8e6944;font-size:11px}
.panorama-visual .visual-label,.game-visual .visual-label{background:#252c27cc}
.panorama-badge span{border-radius:2px;backdrop-filter:none;background:#252c2780}
.game-visual .image-note{border-radius:0;background:#f8f6eadb}
.round-button{border-radius:2px;border-color:#a7b096;color:#5e6c4d}
.round-button:hover{background:#dedfcf;border-color:#879773}
.project-filters button{border-radius:2px}
.project-filters button:hover:not([aria-pressed=true]){background:#dfe3d2}
.project-status{border-radius:0;background:#e3e7d8;border-color:#cbd1bf;color:#576448}
.project-row:hover .row-title{color:#954a27}
.school-section{background:#2d372d}
.school-section:before{display:none}
.school-copy .eyebrow{color:#d3b38f}
.school-copy h2 span{color:#e6ba90}
.school-copy>p:not(.eyebrow){color:#b8c3ae}
.school-workflow{border-radius:2px;border-color:#727d66;background:transparent;backdrop-filter:none}
.workflow-label,.flow-glyph{color:#a5b093}
.school-workflow li>span:first-child{border-radius:0;color:#d8bb91;border-color:#737e65;background:transparent}
.school-workflow li p{color:#abb89c}
.workflow-footer{color:#b3c0a2}
.process-grid{display:block}
.process-grid article{display:grid;grid-template-columns:120px 1fr 1.15fr;gap:30px;align-items:start;padding:27px 0;border-color:#c8cbb8}
.process-grid h3,.process-grid p{margin-top:0}
.process-grid article>span{color:#90734f;padding-top:6px}
.contact{background:#e4c4a3}
.contact-lines{display:none}
.contact .eyebrow{color:#786044}
.contact h2{font-weight:700}
.contact p{color:#675c4a}
.contact-details a{border-color:#bfa88b}
.contact-details a>span,.contact-details p{color:#776c56}
.contact-details a:hover strong{color:#8d4226}
.site-footer{background:#252c27;color:#a3ab98}
.footer-brand{color:#f0eee3}
.footer-brand span,.business-info{color:#acb59f}
.business-info{border-color:#6d776034}
.footer-bottom{color:#889579}
dialog{border-radius:3px;background:#fffef8}
.dialog-close{border-radius:2px;background:#e9ecdf}
.dialog-close:hover{background:#d5ddc5}
.detail-category,.dialog-top .eyebrow{color:#9b4d2d}
.detail-note{border-radius:0;background:#f0eee3;color:#72785f}
.detail-status{border-radius:0;background:#e7eadc;color:#5c6a47}
.detail-features li:before{color:#9a542d}
select,input,textarea{border-radius:2px;background:#fffef8;border-color:#b9c1a9}
.form-status{color:#705f40}
.company-hero-layout{padding-top:170px;padding-bottom:90px;min-height:785px}
.company-hero-copy .eyebrow{color:#6a745e}
.company-hero h1{font-weight:700;line-height:1.07;letter-spacing:-.045em;font-size:clamp(47px,4.9vw,70px)}
.company-hero h1 span{color:#965232;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-style:italic;letter-spacing:-.05em;font-size:1.16em}
.company-hero-copy>p:not(.eyebrow){color:#626c57}
.company-hero-footer{border-color:#b6bfaa;color:#707a62;font-size:10px}
.company-hero-footer a{color:#647353}
.product-preview{padding:23px;background:#fffef8;border-color:#afb8a0;border-radius:2px;box-shadow:5px 6px 0 #daddcd;transform:none}
.product-preview:hover{transform:translateY(-3px)}
.preview-heading{color:#7e704f;letter-spacing:.06em}
.preview-dot{background:#a45a34;border-radius:0}
.preview-screen{border:1px solid #dbdfcf;border-radius:1px;box-shadow:none}
.preview-caption strong{color:#323b2d;font-size:28px;font-weight:700}
.preview-caption span{color:#6c775c;font-size:13px}
.preview-note{color:#7b866d}
.product-state{background:none;border-left:2px solid #a65833;padding:2px 0 2px 10px;border-radius:0;color:#8a5936}
.product-capabilities article>span{color:#8e754d}
.team-section{background:#e5e8da;border-color:#d3d9c6}
.team-layout h2 span{color:#66764f;font-family:Georgia,'Times New Roman',serif;font-weight:400;font-style:italic}
.team-copy .team-lead{color:#3d4930}
.team-copy p{color:#687559}
.team-principles,.team-principles span{border-color:#b9c3a8;color:#5c6a48}
.team-principles span:before{color:#8d6845}
.work-samples{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:55px}
.work-samples figure{margin:0}
.work-samples img{width:100%;height:290px;object-fit:cover;border:1px solid #c5ccba}
.work-samples figcaption{padding-top:17px}
.work-samples figcaption>span{font-size:10px;font-family:monospace;color:#8b7453}
.work-samples h3{font-size:25px;font-weight:650;margin-top:7px}
.work-samples p{font-size:14px;color:#6a745c;margin-top:8px}
.research-section{background:#f0eee4}
.research-copy .eyebrow{color:#8d603a}
.research-copy h2 span{color:#737a60}
.research-status{border:none;border-radius:0;border-left:2px solid #a07850;padding:2px 0 2px 11px;color:#846845}
.research-prototype{border-radius:1px;background:#fffef7;border-color:#c5ccb6;box-shadow:5px 6px 0 #e2e4d6}
.prototype-heading{color:#695d40;border-color:#d3d7c7}
.prototype-heading>span:last-child{color:#838b73}
.research-prototype li{border-color:#d8dccd}
.research-prototype li>span{color:#957a51}
.research-prototype li p,.prototype-note{color:#737d60}

@media(max-width:1100px){
  .hero-studio-layout{padding-top:155px}
  .hero h1{font-size:clamp(48px,6.2vw,70px)}
  .featured-school{gap:32px}
  .featured-school .featured-copy h3{font-size:35px}
  .process-grid article{grid-template-columns:100px 1fr 1.2fr;gap:22px}
}
@media(max-width:950px){
  .hero-content{max-width:590px}
  .hero h1{font-size:clamp(42px,6.4vw,60px)}
  .hero-description br{display:block}
  .hero-description{font-size:16px}
  .services-grid,.english-services{gap:0 34px}
  .featured-school{grid-template-columns:1fr 1fr;gap:24px}
  .featured-school .featured-copy h3{font-size:28px}
  .browser-frame{top:65px;left:15px;right:15px}
  .featured-visual{height:270px}
  .company-overview-grid{gap:35px}
  .company-hero h1{font-size:clamp(40px,5.7vw,52px)}
  .company-hero-footer>span{max-width:400px;line-height:1.8}
}
@media(max-width:600px){
  .section{padding-block:69px}
  .hero{min-height:0}
  .hero-studio-layout{display:block;min-height:0;padding-block:132px 122px}
  .hero h1{font-size:clamp(32px,9.5vw,45px);line-height:1.3}
  .hero h1 span{text-underline-offset:8px;text-decoration-thickness:1px}
  .hero-eyebrow{font-size:10px;margin-bottom:24px;letter-spacing:.025em}
  .hero-description{margin-top:24px;font-size:16px;max-width:420px}
  .hero-description br{display:block}
  .hero-buttons{margin-top:25px}
  .studio-signature{font-size:10px;margin-top:22px}
  .hero #hero-canvas{mask-image:linear-gradient(90deg,transparent 15%,#000 85%)}
  .section-mark{width:32px;height:32px;margin-bottom:15px}
  .service-top svg{width:31px;height:31px}
  .hero-bottom>span{max-width:195px;line-height:1.7}
  .hero-bottom{bottom:29px;font-size:10px}
  .discipline-strip .container{min-width:0;gap:9px;flex-wrap:wrap;justify-content:center}
  .discipline-strip span{font-size:10px;letter-spacing:0}
  .discipline-strip i{font-size:10px}
  .company-overview{padding-bottom:10px}
  .company-overview-grid{gap:0}
  .company-product{border-top:1px solid var(--line)}
  .company-note,.company-product{padding:24px 0}
  .services-grid,.english-services{grid-template-columns:1fr;gap:0}
  .service-card,.english-services article{padding:23px 0 25px}
  .service-card h3,.english-services h3{font-size:22px}
  .featured-grid{display:flex;gap:34px}
  .featured-school{display:block;padding-bottom:32px;border-bottom:1px solid #c6cab7}
  .featured-school .featured-visual{aspect-ratio:16/12;height:auto}
  .browser-frame{top:72px;left:17px;right:17px}
  .featured-school .featured-copy{padding-top:23px}
  .featured-school .featured-copy h3{font-size:30px;margin-top:5px}
  .featured-school .featured-copy h3 small{display:inline;margin-left:9px;font-size:12px}
  .featured-school .featured-copy p{font-size:16px;margin-top:14px}
  .featured-visual{height:245px}
  .process-grid article{display:block;padding:25px 0}
  .process-grid article>span{display:block;padding:0}
  .process-grid h3{margin-top:15px;font-size:21px}
  .process-grid p{margin-top:11px}
  .contact h2,.company-page .contact h2{font-size:38px}
  .footer-top p{max-width:100%;line-height:1.8}
  .company-hero-layout{padding-top:139px;padding-bottom:46px;min-height:0}
  .company-hero h1{font-size:clamp(39px,10.7vw,51px);line-height:1.12}
  .company-hero-copy .eyebrow{font-size:9px;margin-bottom:26px}
  .product-preview{padding:18px;margin:38px 0 0}
  .company-hero-footer>span{max-width:180px;font-size:8px;letter-spacing:.04em}
  .company-hero-footer>a{font-size:10px}
  .work-samples{grid-template-columns:1fr;gap:32px;margin-top:35px}
  .work-samples img{height:230px}
  .team-layout h2{font-size:34px}
  .research-prototype{box-shadow:3px 4px 0 #e2e4d6}
}