.compact-home .studio-hero{height:100svh;min-height:640px;max-height:none;padding:118px 38px 70px;display:flex;flex-direction:column}.compact-home .studio-kicker{flex:none}.compact-home .studio-default{height:auto;flex:1;justify-content:center}.compact-home .studio-default h1{font-size:clamp(54px,7.35vw,120px);margin:0 0 40px 14%;line-height:.96}.compact-home .studio-bottom{margin-left:35%;grid-template-columns:1fr 200px;gap:6vw}.compact-home .studio-bottom>p{font-size:20px;max-width:370px}.compact-home .position-note{min-height:105px;padding:15px}.compact-home .position-note strong{font-size:22px}.compact-home .preview-rail{top:40%}.compact-home .product-window{top:16%;bottom:13%}.landing-bottom{position:absolute;bottom:26px;left:38px;right:38px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #1113;padding-top:17px;font-size:13px}.landing-bottom>a{display:flex;gap:60px}.landing-bottom>span{margin-left:auto;margin-right:45px;color:#777}.replay-intro{background:none;color:var(--ink);border:1px solid #1113;border-radius:50%;width:32px;height:32px;font-size:20px;line-height:1}.detail-dialog{padding:0;margin:0 0 0 auto;inset:0 0 0 auto;width:min(1100px,92vw);height:100dvh;max-height:none;max-width:none;border:0;background:var(--paper);color:var(--ink);overscroll-behavior:contain;scroll-behavior:smooth}.detail-dialog[open]{animation:detailIn .65s var(--ease)}.detail-dialog::backdrop{background:#1118;backdrop-filter:blur(7px)}.detail-bar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:22px 35px;background:#f0eee8ed;backdrop-filter:blur(16px);border-bottom:1px solid #1113}.detail-bar>a{font-size:24px;font-weight:700;letter-spacing:-.045em}.detail-bar button{border:1px solid #1114;border-radius:25px;padding:9px 16px;background:transparent;color:var(--ink);font-size:14px}.detail-dialog .studio-intro{padding:55px 5vw;grid-template-columns:1fr 1fr;gap:35px}.detail-dialog .studio-intro>.eyebrow{grid-column:1/-1}.detail-dialog .studio-intro h2{font-size:65px}.detail-dialog .approach{padding:40px 5vw}.detail-dialog .approach-layout{padding:45px 0 0;gap:5vw}.detail-dialog .approach-title{position:static}.detail-dialog .approach-title h2{font-size:60px}.detail-dialog .audience{padding:55px 5vw}.detail-dialog .audience h2{font-size:75px}.detail-dialog .product-summary{padding:30px 5vw 60px}.detail-dialog .summary-image{height:230px}.detail-dialog .summary-copy h2{font-size:50px}.detail-dialog .contact-brief{padding:55px 5vw;gap:5vw}.detail-dialog .brief-intro h2{font-size:53px}.detail-open{overflow:hidden}.compact-home .nav{z-index:50}
@keyframes detailIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}@keyframes positionArrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes landingArrive{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media(min-width:701px) and (max-height:750px){.compact-home .studio-hero{padding-top:110px;min-height:590px}.compact-home .studio-default h1{font-size:6.7vw;margin-bottom:25px}.compact-home .studio-bottom>p{font-size:18px}.compact-home .position-note{min-height:90px}}
@media(max-width:1000px){.compact-home .studio-default h1{margin-left:17%;font-size:7.1vw}.compact-home .studio-bottom{margin-left:25%;gap:30px;grid-template-columns:1fr 180px}.compact-home .preview-rail{left:25px}.detail-dialog{width:96vw}.detail-dialog .contact-brief{display:block}.detail-dialog .brief-intro{margin-bottom:45px}}
@media(max-width:700px){.compact-home .studio-hero{height:100svh;min-height:700px;padding:108px 22px 80px;display:flex}.compact-home .studio-default{display:flex;flex:1;justify-content:center}.compact-home .studio-default h1{font-size:9.1vw;margin:0 0 28px;line-height:1.04}.compact-home .studio-bottom{display:block;margin:0}.compact-home .studio-bottom>p{font-size:18px;max-width:310px}.compact-home .position-note{margin-top:20px;min-height:0;max-width:340px;padding:10px 13px;flex-direction:row}.compact-home .position-note strong{font-size:17px}.compact-home .preview-system{flex:none}.compact-home .preview-rail{margin-top:15px}.compact-home .preview-rail>span{font-size:12px}.compact-home .preview-rail>a{padding-top:3px}.compact-home .product-window{top:150px;bottom:180px;min-height:0}.landing-bottom{left:22px;right:22px;bottom:20px;padding-top:14px;font-size:12px}.landing-bottom>span{display:none}.landing-bottom>a{gap:25px}.detail-dialog{width:100%;height:100dvh}.detail-bar{padding:17px 22px}.detail-dialog .studio-intro,.detail-dialog .approach,.detail-dialog .audience,.detail-dialog .product-summary{padding:40px 22px}.detail-dialog .studio-intro{display:block}.detail-dialog .studio-intro h2,.detail-dialog .approach-title h2{font-size:13vw}.detail-dialog .audience h2{font-size:12vw}.detail-dialog .summary-copy h2{font-size:43px}.detail-dialog .brief-intro h2{font-size:12vw}.detail-dialog .contact-brief{padding:35px 22px}}
@media(prefers-reduced-motion:reduce){.brand-intro{display:none!important}.intro-active .studio-default h1,.intro-active .preview-rail,.intro-active .studio-bottom{animation:none}.detail-dialog[open]{animation:none}}
.detail-dialog .studio-projects {
  background: var(--orange);
  color: var(--ink);
}
.studio-projects-link {
  display: block;
  padding: 40px clamp(28px, 5vw, 72px) 38px;
}
.studio-projects-kicker, .studio-projects-products {
  font-family: Graphie, Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
}
.studio-projects-kicker { display: block; }
.studio-projects-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin: 66px 0 56px;
}
.studio-projects-heading h2 {
  font-size: clamp(56px, 7.3vw, 100px);
  letter-spacing: -.06em;
  line-height: .96;
}
.studio-projects-heading h2 em { letter-spacing: inherit; }
.studio-projects-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 112px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  color: var(--orange);
  transition: background .45s var(--ease), color .45s var(--ease);
}
.studio-projects-arrow svg {
  width: 48%;
  transition: transform .55s var(--ease);
}
.studio-projects-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
#studio-projects-action {
  padding-block: 4px;
  border-bottom: 1px solid currentColor;
  font-size: 18px;
}
.studio-projects-link:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -9px;
}
.studio-projects-link:focus-visible .studio-projects-arrow {
  background: var(--paper);
  color: var(--ink);
}
.studio-projects-link:focus-visible .studio-projects-arrow svg { transform: translate(4px, -4px); }
@media (hover: hover) {
  .studio-projects-link:hover .studio-projects-arrow { background: var(--paper); color: var(--ink); }
  .studio-projects-link:hover .studio-projects-arrow svg { transform: translate(4px, -4px); }
}
@media (max-width: 700px) {
  .studio-projects-link { padding: 30px 22px 32px; }
  .studio-projects-heading { gap: 16px; margin: 48px 0 38px; }
  .studio-projects-heading h2 { font-size: clamp(40px, 9.5vw, 64px); }
  .studio-projects-arrow { width: clamp(58px, 15vw, 88px); }
  .studio-projects-bottom { align-items: flex-start; flex-direction: column; gap: 24px; }
  .studio-projects-products { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-projects-arrow, .studio-projects-arrow svg { transition: none; }
}

/* A single orange surface resolves into the already-dark homepage. */
html.intro-pending { background: var(--orange); }
html.intro-pending .brand-intro[hidden] { display: grid !important; }
.brand-intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-content: center; background: var(--orange); color: var(--ink); cursor: pointer; overflow: hidden; }
.brand-intro .intro-position { position: absolute; bottom: max(7vh, 28px); left: 24px; right: 24px; text-align: center; font-size: 16px; animation: positionArrive .45s .2s ease-out both; }
.brand-intro.is-ready { animation: introExit .95s .16s cubic-bezier(.76, 0, .24, 1) both; will-change: transform; }
.brand-intro .loading-ink { opacity: 1; }
.intro-active .studio-default h1 { animation: sceneCopyIn .7s .38s var(--ease) both; }
.intro-active .preview-rail, .intro-active .studio-bottom { animation: sceneCopyIn .65s .48s var(--ease) both; }
@keyframes sceneCopyIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes introExit { from { transform: translateY(0); } to { transform: translateY(-100%); visibility: hidden; } }