/* The public mark remains the focus. Capability links are quiet doorways. */
.focus-home main { padding: 92px 32px 74px; }
.focus-home .hero { min-height: calc(100svh - 166px); }
.focus-home .jg-hero-mark { width: min(42vw, 490px, 63svh); margin: -32px 0 0; flex: none; }
.focus-home .hero-studio { margin: -90px 0 0; transform: translateX(-30px); }
.focus-band { order: 4; display: grid; grid-template-columns: 155px minmax(0,1fr); gap: 32px; width: 100%; align-items: center; margin-top: 66px; }
.focus-band .editorial-copy { position: static; order: 0; margin: 0; text-align: left; }
.focus-band .editorial-copy h1 { font-size: 11px; line-height: 1.5; letter-spacing: .11em; }
.focus-band .rule { width: 104px; margin: 12px 0 0; }
.focus-links { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.focus-link { display: flex; align-items: center; gap: 13px; min-height: 88px; min-width: 44px; padding: 18px 16px; border: 1px solid rgba(183,202,225,.19); border-radius: 5px; color: var(--paper); text-decoration: none; text-align: left; background: rgba(8,16,27,.36); transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease; }
.focus-link:hover { border-color: rgba(140,238,255,.6); background: rgba(140,238,255,.045); transform: translateY(-3px); }
.focus-link:focus-visible, .text-link:focus-visible, .gallery-open:focus-visible, .gallery-close:focus-visible, .motion-toggle:focus-visible, .sibling-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.focus-number { color: #8fa4be; font: 10px var(--mono); align-self: flex-start; padding-top: 2px; }
.focus-link strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; }
.focus-link small { display: block; color: #9aacc1; font-size: 11px; line-height: 1.5; margin-top: 6px; }
.focus-arrow { color: var(--cyan); margin-left: auto; font-size: 18px; }
/* Brands are distinct from the three service focuses. The entire card is a link. */
.brands-band { order: 5; display: grid; grid-template-columns: 155px minmax(0,1fr); align-items: center; gap: 32px; width: 100%; margin-top: 28px; }
.brands-band h2 { margin: 0; text-align: left; color: #9aacc1; font: 11px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.brands-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.brand-card { display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 100px; padding: 18px 16px; border: 1px solid rgba(183,202,225,.28); border-radius: 5px; background: rgba(8,16,27,.55); color: var(--paper); text-decoration: none; text-align: left; transition: border-color 200ms ease, background-color 200ms ease; }
.brand-card-copy { min-width: 0; }
.brand-card strong { display: block; font: 24px/1.15 Georgia,serif; letter-spacing: -.035em; }
.brand-trademark { font: 9px/1 var(--mono); vertical-align: super; margin-left: 3px; }
.brand-description { display: block; margin-top: 8px; color: #9aacc1; font-size: 11px; line-height: 1.5; }
.brand-card-arrow { color: var(--cyan); margin-left: auto; font-size: 18px; }
.brand-card:hover { border-color: rgba(140,238,255,.6); background: rgba(140,238,255,.045); }
.brand-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
@media (max-width: 1060px) { .brands-band { grid-template-columns: 1fr; gap: 14px; } .brands-band h2 { text-align: center; } .brands-grid { grid-template-columns: minmax(0,360px); justify-content: center; } }
@media (max-width: 640px) { .brands-band { max-width: 420px; margin-top: 26px; } .brands-grid { grid-template-columns: minmax(0,1fr); } .brand-card { padding: 16px 17px; } }
@media (max-width: 1060px) { .focus-band { grid-template-columns: 1fr; gap: 18px; margin-top: 44px; } .focus-band .editorial-copy { text-align: center; } .focus-band .editorial-copy h1 br { display: none; } .focus-band .rule { margin: 10px auto 0; width: 64px; } }
@media (max-width: 640px) { .focus-home main { padding: 90px 22px 76px; } .focus-home .hero { min-height: calc(100svh - 166px); } .focus-home .jg-hero-mark { width: min(85vw,350px); margin: -35px 0 0; } .focus-home .hero-studio { margin: -50px 0 0; transform: translateX(-22px); font-size: 1.35rem; } .focus-band { margin-top: 40px; gap: 22px; max-width: 420px; } .focus-links { grid-template-columns: 1fr; gap: 9px; } .focus-link { min-height: 66px; padding: 12px 17px; } .focus-number { align-self: center; padding: 0; } .focus-link strong { font-size: 13px; } .focus-link small { margin-top: 2px; } }
@media (max-height: 500px) and (orientation: landscape) { .focus-home main { padding: 82px 24px 62px; } .focus-home .jg-hero-mark { width: 160px; margin: -18px 0 0; } .focus-home .hero-studio { margin: -30px 0 0; font-size: 1rem; transform: translateX(-10px); } .focus-band { margin-top: 20px; gap: 12px; } .focus-links { grid-template-columns: repeat(3,minmax(0,1fr)); } .focus-link { min-height: 64px; padding: 10px 13px; } .focus-band .editorial-copy h1 { font-size: 10px; } .focus-band .rule { display: none; } }
@media (prefers-reduced-motion: reduce) { .focus-link:hover { transform: none; } }