/* Supplied works reference: 793 × 1981. */
body[data-view="projects"] { --work-u:min(.126103405vw,1.61412358px); background:#f2f3f6; }
body[data-view="projects"] .site-header,body[data-view="about"] .site-header { background:transparent; }
body[data-view="projects"] .site-header,body[data-view="projects"] .header-inner { height:calc(64*var(--work-u)); }
body[data-view="projects"] .header-inner { width:calc(793*var(--work-u)); }
body[data-view="projects"] .brand { left:calc(58*var(--work-u));top:calc(24*var(--work-u)); }
body[data-view="projects"] .brand-symbol { width:calc(41*var(--work-u));height:calc(24*var(--work-u)); }
body[data-view="projects"] .brand-name,body[data-view="about"] .brand-name,body.contact-open .brand-name { display:none; }
body[data-view="projects"] nav { right:calc(58*var(--work-u));top:calc(27*var(--work-u));gap:calc(38*var(--work-u)); }
body[data-view="projects"] nav a { font-size:calc(14*var(--work-u));line-height:calc(22*var(--work-u));padding-bottom:calc(5*var(--work-u)); }
body[data-view="projects"] nav a.active::after,body[data-view="about"] nav a.active::after { width:100%;height:1px;bottom:0;border-radius:0; }
body[data-view="projects"] footer,body[data-view="about"] footer { display:none; }
.reference-projects { width:calc(793*var(--work-u));margin:0 auto;background:#f2f3f6; }
.projects-ref-intro { position:relative;height:calc(308*var(--work-u));text-align:center; }
.projects-ref-intro p,.projects-ref-intro h1 { margin:0; }
.projects-ref-eyebrow { position:absolute;top:calc(64*var(--work-u));left:0;width:100%;font:calc(10*var(--work-u))/calc(16*var(--work-u)) var(--mono);letter-spacing:calc(2*var(--work-u));color:#949bab; }
.projects-ref-intro h1 { position:absolute;top:calc(89*var(--work-u));left:0;width:100%;font:900 calc(64*var(--work-u))/calc(92*var(--work-u)) 'Reference Heading',var(--sans);font-feature-settings:'palt' 1;color:#030507;letter-spacing:calc(2*var(--work-u));padding-left:calc(10*var(--work-u)); }
.projects-ref-subtitle { position:absolute;top:calc(186*var(--work-u));left:0;width:100%;font:calc(16*var(--work-u))/calc(28*var(--work-u)) var(--sans);color:#8b94a5; }
.reference-projects .work-filters { position:absolute;top:calc(242*var(--work-u));left:0;width:100%;display:flex;justify-content:center;align-items:center;gap:calc(34*var(--work-u));margin:0;padding:0;border:0; }
.reference-projects .work-filter { position:relative;height:calc(34*var(--work-u));border-radius:calc(22*var(--work-u));padding:0;color:#646d7e;font:calc(14*var(--work-u))/calc(22*var(--work-u)) var(--sans);white-space:nowrap; }
.reference-projects .work-filter::after { display:none; }
.reference-projects .work-filter.active { background:#222730;color:#fff;padding:0 calc(18*var(--work-u)); }
.reference-projects .work-filter>span { margin-left:calc(6*var(--work-u));font:calc(9*var(--work-u))/1 var(--mono);color:#b9bec7; }
.reference-work { position:relative;margin:0;height:calc(522*var(--work-u)); }
.reference-work-inner { position:relative;width:100%;height:100%; }
.reference-work-copy { position:absolute;left:calc(72*var(--work-u));top:calc(124*var(--work-u));width:calc(357*var(--work-u)); }
.reference-work-copy p,.reference-work-copy h2 { margin:0; }
.reference-work-index { font:calc(10*var(--work-u))/calc(16*var(--work-u)) var(--mono);letter-spacing:calc(1.3*var(--work-u));color:#959fb1; }
.reference-work-copy h2 { margin-top:calc(22*var(--work-u));font:750 calc(40*var(--work-u))/calc(55*var(--work-u)) 'Reference Heading',var(--sans);color:#050709;letter-spacing:calc(-.5*var(--work-u));white-space:nowrap; }
.reference-work-description { margin-top:calc(8*var(--work-u))!important;font:calc(16*var(--work-u))/calc(27*var(--work-u)) var(--sans);color:#656f81; }
.reference-work-role { margin-top:calc(25*var(--work-u))!important;padding:calc(5*var(--work-u)) 0 calc(5*var(--work-u)) calc(17*var(--work-u));border-left:calc(2*var(--work-u)) solid #99a3b4;font:calc(14*var(--work-u))/calc(23*var(--work-u)) var(--sans);color:#727c8d; }
.reference-work-platform { margin-top:calc(22*var(--work-u))!important;font:calc(10*var(--work-u))/calc(18*var(--work-u)) var(--mono);letter-spacing:calc(.7*var(--work-u));color:#97a0b2; }
.reference-work-link { display:inline-flex;align-items:center;gap:calc(8*var(--work-u));margin-top:calc(28*var(--work-u));height:calc(30*var(--work-u));border-bottom:1px solid #858e9c;color:#343e4d;font:calc(14*var(--work-u))/calc(23*var(--work-u)) var(--sans); }
.reference-work-link span { transition:transform .2s ease; }
.reference-work-link:hover span { transform:translate(2px,-2px); }
.reference-work-art { display:block;position:absolute;background-image:url('assets/projects-design-reference.png');background-size:calc(793*var(--work-u)) calc(1981*var(--work-u));background-repeat:no-repeat;border-radius:calc(5*var(--work-u));box-shadow:calc(-20*var(--work-u)) calc(22*var(--work-u)) calc(28*var(--work-u)) calc(-20*var(--work-u)) rgba(34,45,65,.33);transition:transform .25s ease; }
.reference-work-art:hover { transform:translateY(-3px); }
.reference-work-aladdin .reference-work-art { left:calc(444*var(--work-u));top:calc(39*var(--work-u));width:calc(256*var(--work-u));height:calc(445*var(--work-u));background-position:calc(-444*var(--work-u)) calc(-411*var(--work-u)); }
.reference-work-muushig { height:calc(520*var(--work-u));background:#e9ebf0; }
.reference-work-muushig .reference-work-copy { left:calc(435*var(--work-u));top:calc(116*var(--work-u));width:calc(307*var(--work-u)); }
.reference-work-muushig .reference-work-art { left:calc(96*var(--work-u));top:calc(43*var(--work-u));width:calc(260*var(--work-u));height:calc(439*var(--work-u));background-position:calc(-96*var(--work-u)) calc(-937*var(--work-u)); }
.reference-work-muushig .reference-work-copy h2 { margin-top:calc(24*var(--work-u)); }
.reference-work-muushig .reference-work-role { margin-top:calc(25*var(--work-u))!important; }
.reference-work-gouji { height:calc(518*var(--work-u)); }
.reference-work-gouji .reference-work-copy { top:calc(116*var(--work-u));width:calc(372*var(--work-u)); }
.reference-work-gouji .reference-work-copy h2 { font-size:calc(36*var(--work-u));margin-top:calc(23*var(--work-u)); }
.reference-work-gouji .reference-work-art { left:calc(469*var(--work-u));top:calc(35*var(--work-u));width:calc(230*var(--work-u));height:calc(449*var(--work-u));background-position:calc(-469*var(--work-u)) calc(-1449*var(--work-u)); }
.reference-work-gouji .reference-work-role { margin-top:calc(30*var(--work-u))!important; }
.reference-work-gouji .reference-work-link { margin-top:calc(31*var(--work-u)); }
.projects-ref-end { margin:0 calc(45*var(--work-u));height:calc(49*var(--work-u));padding:calc(14*var(--work-u)) calc(10*var(--work-u)) 0;border-top:1px solid #d9dfe8;font:calc(12*var(--work-u))/calc(23*var(--work-u)) var(--sans);color:#919aaa; }

/* Shared subpage header, measured from the 921px about reference. */
body[data-view="about"] .site-header,body[data-view="about"] .header-inner { height:calc(64*var(--about-u)); }
body[data-view="about"] .header-inner { width:calc(921*var(--about-u)); }
body[data-view="about"] .brand { left:calc(79*var(--about-u));top:calc(26*var(--about-u)); }
body[data-view="about"] .brand-symbol { width:calc(45*var(--about-u));height:calc(27*var(--about-u)); }
body[data-view="about"] nav { right:calc(76*var(--about-u));top:calc(32*var(--about-u));gap:calc(35*var(--about-u)); }
body[data-view="about"] nav a { font-size:calc(15*var(--about-u));line-height:calc(24*var(--about-u));padding-bottom:calc(6*var(--about-u)); }

/* Contact reference: 1505 × 1045, with a real accessible modal. */
body.contact-open { overflow:hidden; }
body.contact-open { --contact-u:min(.066445183vw,1px); }
body.contact-open #main,body.contact-open footer { filter:blur(5px); }
body.contact-open .site-header { position:fixed;top:0;left:0;width:100%;background:transparent; }
body.contact-open .header-inner { width:100%; }
body.contact-open .brand { left:6vw;top:calc(26*var(--contact-u)); }
body.contact-open .brand-symbol { width:calc(63*var(--contact-u));height:calc(37*var(--contact-u)); }
body.contact-open nav { right:6vw;top:calc(32*var(--contact-u));gap:calc(50*var(--contact-u)); }
body.contact-open nav a { font-size:calc(21*var(--contact-u));line-height:calc(32*var(--contact-u));padding-bottom:calc(6*var(--contact-u)); }
body.contact-open[data-view="home"] .design-home { width:100%; }
body.contact-open[data-view="home"] .design-home::after { content:'';display:block;height:60vh; }
body.contact-open[data-view="home"] .cocos-feature { height:calc(1000*var(--contact-u)); }
body.contact-open[data-view="home"] .unity-feature .feature-link { visibility:hidden; }
body.contact-open[data-view="home"] .cocos-feature .section-kicker { top:calc(50*var(--contact-u));font-size:calc(21*var(--contact-u)); }
body.contact-open[data-view="home"] .cocos-feature h2 { top:calc(86*var(--contact-u));font-size:calc(49*var(--contact-u));line-height:calc(64*var(--contact-u)); }
body.contact-open[data-view="home"] .cocos-feature .feature-image { --scene-x:calc(90vw/728);--scene-y:calc(41.4vw/259);left:5vw;top:calc(169*var(--contact-u));width:90vw;height:41.4vw;background-size:calc(848*var(--scene-x)) calc(1855*var(--scene-y));background-position:calc(-60*var(--scene-x)) calc(-1394*var(--scene-y)); }
body.contact-open[data-view="home"] .cocos-feature .feature-link { top:calc(830*var(--contact-u)); }
#contact-dialog { --contact-u:min(.066445183vw,1px);position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:calc(783*var(--contact-u));max-width:none;max-height:calc(100dvh - 40px);height:calc(560*var(--contact-u));margin:0;padding:calc(52*var(--contact-u)) calc(61*var(--contact-u));border:1px solid rgba(255,255,255,.85);border-radius:calc(27*var(--contact-u));background:#f8f9fc;color:#161d28;box-shadow:0 25px 80px rgba(32,42,60,.12);overflow:auto; }
#contact-dialog::backdrop { background:rgba(33,42,57,.32);backdrop-filter:none; }
#contact-dialog { top:calc(50% + 8*var(--contact-u)); }
.contact-dismiss { position:absolute;right:calc(49*var(--contact-u));top:calc(40*var(--contact-u));margin:0; }
.contact-dismiss button { display:grid;place-items:center;width:calc(49*var(--contact-u));height:calc(49*var(--contact-u));padding:0;border:0;border-radius:50%;background:#e9ecf2;color:#616c7d;font:calc(29*var(--contact-u))/1 var(--sans); }
.contact-dialog-header { display:block;margin:0;padding:0;border:0; }
.contact-dialog-header .contact-eyebrow { margin:0;color:#818b9e;font:calc(18*var(--contact-u))/calc(27*var(--contact-u)) var(--mono);letter-spacing:calc(4*var(--contact-u)); }
.contact-dialog-header h2 { margin:calc(5*var(--contact-u)) 0 0;color:#070b12;font:900 calc(51*var(--contact-u))/calc(67*var(--contact-u)) 'Reference Heading',var(--sans);letter-spacing:calc(1*var(--contact-u)); }
.contact-dialog-header #contact-subtitle { margin:calc(1*var(--contact-u)) 0 0;color:#818b9c;font:600 calc(27*var(--contact-u))/calc(41*var(--contact-u)) var(--sans); }
#contact-details { padding:0;margin-top:calc(42*var(--contact-u)); }
.contact-channel,.contact-channel:last-child { position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:calc(20*var(--contact-u));width:100%;margin:0;padding:calc(17*var(--contact-u)) calc(4*var(--contact-u)) calc(30*var(--contact-u));border:0;border-radius:0;background:transparent;text-align:left; }
.contact-channel:hover { background:transparent;border-color:#d9dfe9; }
.contact-channel:first-child { border-bottom:1px solid #d9dfe9; }
.contact-channel:last-child { padding-top:calc(35*var(--contact-u));padding-bottom:0; }
.contact-channel>div { min-width:0; }
.contact-channel>div>span { display:block;color:#818c9e;font:calc(20*var(--contact-u))/calc(32*var(--contact-u)) var(--sans); }
.contact-channel strong { display:block;margin-top:calc(12*var(--contact-u));color:#17202e;font:500 calc(32*var(--contact-u))/calc(43*var(--contact-u)) var(--sans);white-space:nowrap; }
.contact-channel-action { display:inline-flex;align-items:center;justify-content:center;gap:calc(12*var(--contact-u));height:calc(57*var(--contact-u));padding:0 calc(28*var(--contact-u));border:0;border-radius:calc(32*var(--contact-u));background:#e9ecf2;color:#1c2635;font:550 calc(20*var(--contact-u))/1 var(--sans);white-space:nowrap; }
.contact-channel-action:hover,.contact-dismiss button:hover { background:#dfe4ed; }
.contact-channel-action i { font:inherit; }
.contact-channel-action svg { width:calc(21*var(--contact-u));height:calc(21*var(--contact-u)); }

@media(max-width:600px) {
 body.contact-open .brand { left:24px;top:23px; }
 body.contact-open .brand-symbol { width:37px;height:23px; }
 body.contact-open nav { right:24px;top:23px;gap:24px; }
 body.contact-open nav a { font-size:12px;line-height:21px;padding-bottom:4px; }
 body.contact-open[data-view="home"] .cocos-feature .section-kicker,body.contact-open[data-view="home"] .cocos-feature h2 { position:static; }
 body.contact-open[data-view="home"] .cocos-feature .section-kicker { font-size:9px; }
 body.contact-open[data-view="home"] .cocos-feature h2 { font-size:25px;line-height:35px; }
 body.contact-open[data-view="home"] .cocos-feature .feature-image { position:relative;top:auto;left:auto; }
 body.contact-open[data-view="home"] .cocos-feature .feature-link { top:auto; }
 body[data-view="projects"] .site-header,body[data-view="projects"] .header-inner,body[data-view="about"] .site-header,body[data-view="about"] .header-inner { height:64px;width:100%; }
 body[data-view="projects"] .brand,body[data-view="about"] .brand { left:24px;top:23px; }
 body[data-view="projects"] .brand-symbol,body[data-view="about"] .brand-symbol { width:37px;height:23px; }
 body[data-view="projects"] nav,body[data-view="about"] nav { right:24px;top:23px;gap:24px; }
 body[data-view="projects"] nav a,body[data-view="about"] nav a { font-size:12px;line-height:21px;padding-bottom:4px; }
 .projects-ref-intro { height:278px; }
 .projects-ref-eyebrow { top:35px;font-size:10px;line-height:18px;letter-spacing:2px; }
 .projects-ref-intro h1 { top:64px;font-size:54px;line-height:80px; }
 .projects-ref-subtitle { top:153px;padding:0 15px;font-size:13px;line-height:23px; }
 .reference-projects .work-filters { top:212px;gap:19px; }
 .reference-projects .work-filter { height:32px;font-size:11px;line-height:20px; }
 .reference-projects .work-filter.active { padding:0 13px; }
 .reference-projects .work-filter>span { font-size:8px;margin-left:4px; }
 .reference-work,.reference-work-muushig,.reference-work-gouji { height:auto;padding:34px 26px 38px; }
 .reference-work-inner { display:flex;flex-direction:column-reverse;align-items:center;gap:30px; }
 .reference-work-copy,.reference-work-muushig .reference-work-copy,.reference-work-gouji .reference-work-copy { position:static;width:100%; }
 .reference-work-art,.reference-work-aladdin .reference-work-art,.reference-work-muushig .reference-work-art,.reference-work-gouji .reference-work-art { position:relative;left:auto;top:auto;--work-u:.72px;border-radius:5px; }
 .reference-work-index { font-size:10px;line-height:18px;letter-spacing:1.3px; }
 .reference-work-copy h2,.reference-work-muushig .reference-work-copy h2,.reference-work-gouji .reference-work-copy h2 { margin-top:10px;font-size:30px;line-height:43px;letter-spacing:0; }
 .reference-work-description { font-size:13px;line-height:24px;margin-top:7px!important; }
 .reference-work-role,.reference-work-muushig .reference-work-role,.reference-work-gouji .reference-work-role { margin-top:18px!important;padding:4px 0 4px 13px;font-size:12px;line-height:22px;border-left-width:2px; }
 .reference-work-platform { font-size:9px;line-height:18px;margin-top:16px!important; }
 .reference-work-link,.reference-work-gouji .reference-work-link { font-size:13px;line-height:22px;height:29px;gap:7px;margin-top:16px; }
 .projects-ref-end { height:54px;margin:0 24px;padding:14px 0 0;font-size:11px;line-height:23px; }
 #contact-dialog { --contact-u:1px;width:calc(100% - 32px);height:auto;max-height:calc(100dvh - 32px);padding:30px 25px;border-radius:19px; }
 .contact-dismiss { right:20px;top:23px; }
 .contact-dismiss button { width:36px;height:36px;font-size:23px; }
 .contact-dialog-header .contact-eyebrow { font-size:11px;line-height:21px;letter-spacing:3px; }
 .contact-dialog-header h2 { font-size:34px;line-height:49px;margin-top:4px; }
 .contact-dialog-header #contact-subtitle { font-size:18px;line-height:30px;font-weight:500; }
 #contact-details { margin-top:22px; }
 .contact-channel { gap:10px;padding:15px 0 22px; }
 .contact-channel:last-child { padding-top:22px; }
 .contact-channel>div>span { font-size:13px;line-height:22px; }
 .contact-channel strong { font-size:18px;line-height:28px;margin-top:4px; }
 .contact-channel-action { height:37px;padding:0 13px;font-size:12px;gap:6px; }
 .contact-channel-action svg { width:16px;height:16px; }
}
@media(max-width:370px) { .contact-channel:first-child { flex-wrap:wrap;gap:12px; }.contact-channel strong { font-size:17px; } }
/* About reference artwork: 921 x 1708. The shared header occupies the first 64 reference pixels. */
body[data-view="about"] {
  --about-u: min(.108577633vw, 1.389794px);
  --about-header-height: calc(64 * var(--about-u));
  background: #f3f4f7;
}
body[data-view="about"] footer { display: none; }
.reference-about {
  position: relative;
  width: calc(921 * var(--about-u));
  height: calc(1708 * var(--about-u) - var(--about-header-height));
  margin: 0 auto;
  color: #121922;
  background: #f3f4f7;
}
.reference-about h1,
.reference-about h2,
.reference-about h3,
.reference-about p { margin: 0; }
.about-ref-intro { text-align: center; }
.about-ref-eyebrow {
  position: absolute;
  top: calc(153 * var(--about-u) - var(--about-header-height));
  left: 0;
  width: 100%;
  color: #929aaa;
  font: calc(14 * var(--about-u))/calc(22 * var(--about-u)) var(--mono);
  letter-spacing: calc(6 * var(--about-u));
  padding-left: calc(6 * var(--about-u));
}
.about-ref-intro h1 {
  position: absolute;
  top: calc(188 * var(--about-u) - var(--about-header-height));
  left: 0;
  width: 100%;
  color: #050709;
  font: 900 calc(80 * var(--about-u))/calc(110 * var(--about-u)) 'Reference Heading', var(--sans);
  letter-spacing: calc(3 * var(--about-u));
  font-feature-settings: 'palt' 1;
  padding-left: calc(10 * var(--about-u));
}
.about-ref-subtitle {
  position: absolute;
  top: calc(297 * var(--about-u) - var(--about-header-height));
  left: 0;
  width: 100%;
  color: #747e90;
  font: calc(21 * var(--about-u))/calc(34 * var(--about-u)) var(--sans);
  letter-spacing: calc(.5 * var(--about-u));
}
.about-ref-feature {
  position: absolute;
  top: calc(450 * var(--about-u) - var(--about-header-height));
  left: 0;
  width: 100%;
  height: calc(400 * var(--about-u));
}
.about-ref-logo {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(510 * var(--about-u));
  height: calc(400 * var(--about-u));
  background-image: url('assets/about-design-reference.png');
  background-repeat: no-repeat;
  background-size: calc(921 * var(--about-u)) calc(1708 * var(--about-u));
  background-position: 0 calc(-450 * var(--about-u));
}
.about-ref-feature-copy {
  position: absolute;
  top: calc(98 * var(--about-u));
  left: calc(531 * var(--about-u));
  width: calc(332 * var(--about-u));
  min-height: calc(227 * var(--about-u));
  border-left: 1px solid #dce0e8;
  padding: calc(10 * var(--about-u)) 0 calc(17 * var(--about-u)) calc(33 * var(--about-u));
}
.about-ref-feature-copy h2 {
  color: #111720;
  font: 900 calc(35 * var(--about-u))/calc(49 * var(--about-u)) 'Reference Heading', var(--sans);
  white-space: nowrap;
  letter-spacing: calc(.2 * var(--about-u));
}
.about-ref-feature-copy p {
  color: #758092;
  font: calc(20 * var(--about-u))/calc(30 * var(--about-u)) var(--sans);
  margin-top: calc(16 * var(--about-u));
  white-space: nowrap;
}
.about-ref-project-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: calc(8 * var(--about-u));
  min-width: calc(143 * var(--about-u));
  height: calc(43 * var(--about-u));
  margin-top: calc(30 * var(--about-u));
  padding: 0 calc(20 * var(--about-u));
  border: 1px solid #1d222a;
  border-radius: calc(25 * var(--about-u));
  background: #1d222a;
  color: #f9f9fa;
  font: calc(17 * var(--about-u))/1 var(--sans);
  white-space: nowrap;
  transition: background .2s ease;
}
.about-ref-project-link:hover { color: #fff; background: #333a45; }
.about-ref-explore {
  position: absolute;
  top: calc(966 * var(--about-u) - var(--about-header-height));
  left: calc(81 * var(--about-u));
  width: calc(761 * var(--about-u));
}
.about-ref-explore > h2 {
  color: #05080b;
  font: 900 calc(43 * var(--about-u))/calc(61 * var(--about-u)) 'Reference Heading', var(--sans);
  text-align: center;
  letter-spacing: calc(.5 * var(--about-u));
}
.about-ref-links {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(61 * var(--about-u)) calc(92 * var(--about-u));
  margin-top: calc(59 * var(--about-u));
}
.about-ref-links::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: calc(235 * var(--about-u));
  background: #dce0e8;
}
.about-ref-link {
  display: block;
  position: relative;
  min-width: 0;
  min-height: calc(113 * var(--about-u));
  padding-bottom: calc(25 * var(--about-u));
  border-bottom: 1px solid #dce0e8;
}
.about-ref-link h3 {
  color: #17202c;
  font: 800 calc(30 * var(--about-u))/calc(44 * var(--about-u)) 'Reference Heading', var(--sans);
  letter-spacing: calc(.4 * var(--about-u));
}
.about-ref-link p {
  margin-top: calc(6 * var(--about-u));
  color: #7e899b;
  font: calc(17 * var(--about-u))/calc(29 * var(--about-u)) var(--sans);
  white-space: nowrap;
}
.about-ref-arrow {
  position: absolute;
  right: 0;
  top: calc(6 * var(--about-u));
  font: calc(25 * var(--about-u))/1 var(--sans);
  color: #2c3544;
  transition: transform .2s ease;
}
.about-ref-link:hover .about-ref-arrow { transform: translate(2px,-2px); }
.about-ref-link:hover h3 { color: #000; }
.about-ref-stack {
  position: absolute;
  top: calc(1444 * var(--about-u) - var(--about-header-height));
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(21 * var(--about-u));
  width: 100%;
  color: #9aa5b8;
  font: calc(12 * var(--about-u))/calc(20 * var(--about-u)) var(--mono);
  letter-spacing: calc(3 * var(--about-u));
  white-space: nowrap;
}
.about-ref-stack::before,
.about-ref-stack::after {
  content: '';
  width: calc(59 * var(--about-u));
  height: 1px;
  background: #dce0e8;
}
.about-ref-implementation {
  position: absolute;
  top: calc(1538 * var(--about-u) - var(--about-header-height));
  left: 0;
  width: 100%;
  text-align: center;
}
.about-ref-implementation h2 {
  color: #18212d;
  font: 800 calc(24 * var(--about-u))/calc(36 * var(--about-u)) 'Reference Heading', var(--sans);
}
.about-ref-implementation p {
  margin-top: calc(13 * var(--about-u));
  color: #8994a7;
  font: calc(17 * var(--about-u))/calc(29 * var(--about-u)) var(--sans);
}
@media (max-width: 600px) {
  body[data-view="about"] { --about-header-height: 64px; }
  .reference-about {
    width: 100%;
    height: auto;
    padding: 35px 24px 54px;
  }
  .about-ref-eyebrow,
  .about-ref-intro h1,
  .about-ref-subtitle,
  .about-ref-feature,
  .about-ref-explore,
  .about-ref-stack,
  .about-ref-implementation { position: static; width: 100%; }
  .about-ref-eyebrow { font-size: 10px; line-height: 20px; letter-spacing: 4px; }
  .about-ref-intro h1 { margin-top: 8px; padding-left: 10px; font-size: 54px; line-height: 78px; letter-spacing: 2px; }
  .about-ref-subtitle { margin-top: 12px; font-size: 13px; line-height: 24px; letter-spacing: 0; }
  .about-ref-feature { height: auto; margin-top: 34px; }
  .about-ref-logo { position: relative; margin: 0 auto; width: calc(510 * var(--about-u)); height: calc(400 * var(--about-u)); }
  .about-ref-feature-copy { position: static; width: 100%; min-height: 0; border-left: 0; padding: 18px 0 0; text-align: center; }
  .about-ref-feature-copy h2 { font-size: 28px; line-height: 42px; }
  .about-ref-feature-copy p { margin-top: 12px; font-size: 14px; line-height: 26px; white-space: normal; }
  .about-ref-project-link { min-width: 128px; height: 39px; margin-top: 21px; border-radius: 25px; padding: 0 20px; gap: 7px; font-size: 13px; }
  .about-ref-explore { margin-top: 70px; }
  .about-ref-explore > h2 { font-size: 28px; line-height: 43px; letter-spacing: 0; }
  .about-ref-links { margin-top: 30px; gap: 31px 27px; }
  .about-ref-links::before { height: 190px; }
  .about-ref-link { min-height: 90px; padding-bottom: 17px; }
  .about-ref-link h3 { font-size: 21px; line-height: 34px; letter-spacing: 0; }
  .about-ref-link p { margin-top: 4px; font-size: 12px; line-height: 22px; white-space: normal; }
  .about-ref-arrow { top: 6px; font-size: 17px; }
  .about-ref-stack { margin-top: 49px; gap: 11px; font-size: 8px; line-height: 16px; letter-spacing: 1.3px; }
  .about-ref-stack::before, .about-ref-stack::after { width: 23px; }
  .about-ref-implementation { margin-top: 44px; }
  .about-ref-implementation h2 { font-size: 20px; line-height: 32px; }
  .about-ref-implementation p { margin-top: 11px; font-size: 12px; line-height: 24px; }
}
/* Soften only the crop boundary of the supplied metallic logo artwork. */
.about-ref-logo { -webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect; }
@media(min-width:601px) {
 .about-ref-intro h1 { top:calc(182*var(--about-u) - var(--about-header-height));transform:translateX(calc(6*var(--about-u))); }
 .about-ref-explore>h2 { font-size:calc(45*var(--about-u));transform:translateX(calc(14*var(--about-u))); }
}