@font-face { font-family: "Syne"; src: url("fonts/Syne.ttf") format("truetype"); font-style: normal; font-weight: 400 800; font-display: swap; }
:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #202325; background: #f4f6f7; line-height: 1.5; }
* { box-sizing: border-box; }
body { margin: 0; font-size: 1rem; }
a { color: inherit; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid #2971dc; outline-offset: 5px; }
h1, h2, p { margin: 0; }
p + p { margin-top: 1rem; }
h1, h2 { font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.wrap { width: calc(100% - 6rem); max-width: 1184px; margin: 0 auto; }
.skip { position: absolute; left: 1rem; top: -100px; background: white; color: #202325; padding: .75rem; z-index: 10; }
.skip:focus { top: 1rem; }
.brand { font-size: 1.25rem; font-weight: 650; text-decoration: none; letter-spacing: -.025em; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 104px; }
.nav { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.nav a { text-decoration: none; padding: .45rem 0; }
.nav a[aria-current="page"] { border-bottom: 2px solid currentColor; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; font-size: .875rem; }
.muted { color: #586066; }
.copy { max-width: 610px; font-size: 1.125rem; line-height: 1.65; }
.mail { display: inline-block; font-size: clamp(1.2rem, 2.4vw, 2rem); line-height: 1.4; overflow-wrap: anywhere; }
.privacy-text { max-width: 740px; padding: 3rem 0 4rem; }
.privacy-text h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1.5rem; }
.privacy-text h2 { font-size: 1.25rem; letter-spacing: -.025em; margin: 2rem 0 .75rem; }
.privacy-text p { line-height: 1.65; }
.privacy-text .updated { font-size: .875rem; margin-bottom: 1rem; color: #586066; }

.type { border-top: 8px solid #2159d8; min-height: 100svh; display: flex; flex-direction: column; }
.type .header { border-bottom: 1px solid #cdd3d8; }
.type .main { padding: 3.25rem 0 3rem; flex: 1; }
.type .wordmark { font-size: clamp(5rem, 17.3vw, 14.5rem); line-height: .88; letter-spacing: 0; display: flex; gap: .35rem; align-items: baseline; margin: .5rem 0 2.5rem; }
.type .suffix { font-size: .16em; letter-spacing: -.02em; margin-left: .5rem; }
.type .overview { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-bottom: 2.5rem; }
.type .overview h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); max-width: 470px; }
.type .footer { border-top: 1px solid #cdd3d8; }
.type .page-title { font-size: clamp(3.5rem, 9vw, 7.5rem); margin: .5rem 0 2rem; }
.type .detail { min-height: 510px; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-content: start; padding-top: 3.5rem; }
.type .detail .body { padding-top: 1rem; }
.type .contact-note { margin-top: 2rem; }
.type .company-list { margin: 2rem 0 0; border-top: 1px solid #cdd3d8; }
.type .company-list div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #cdd3d8; }
.type dt { color: #586066; }
.type dd { margin: 0; }

.split { background: #eb7f1a; color: #fff; }
.split-shell { min-height: 100svh; display: grid; grid-template-columns: 42% 58%; }
.split .identity { padding: 2.5rem 3rem; display: flex; flex-direction: column; }
.split .brand, .split .identity-title { font-family: "Syne", sans-serif; font-weight: 600; }
.split .identity .brand { color: #fff; }
.split .identity-title { font-size: clamp(5.25rem, 12.8vw, 12rem); letter-spacing: 0; margin: auto 0; line-height: .9; padding: 4rem 0; }
.split .identity-title span { display: block; font-size: 2rem; letter-spacing: -.03em; margin-top: 1rem; }
.split .identity-info { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid #ffffff59; padding-top: 1.2rem; font-size: .875rem; }
.split .content { background: #f0f3f3; color: #192d39; padding: 2.5rem 3rem 1.5rem; display: flex; flex-direction: column; }
.split .content main { flex: 1; display: flex; flex-direction: column; }
.split .content .contact { margin-top: auto; padding-top: 3rem; }
.split .content .nav { min-height: 32px; justify-content: flex-end; margin-bottom: 4.5rem; }
.split .content h1 { font-size: clamp(2.65rem, 4.7vw, 4.5rem); margin-bottom: 1.5rem; }
.split .contact h2 { font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: .75rem; }
.split .mail { font-size: clamp(1.15rem, 2.2vw, 1.75rem); }
.split .support-note { margin-top: 2rem; color: #41535e; }
.split .footer { border-top: 1px solid #bdc7cb; margin-top: 2.5rem; }
.split .privacy-header { border-bottom: 1px solid #ffffff59; }
.split .privacy-text { color: #fff; }
.split .privacy-text .updated { color: #fff; }

.tabs { background: #e9edf4; min-height: 100svh; display: flex; flex-direction: column; }
.tabs .header { border-bottom: 1px solid #b8c1d1; }
.tabs .tablist { display: flex; gap: 0; align-self: stretch; }
.tabs .tablist a { display: flex; align-items: center; padding: 0 1.5rem; border-bottom: 3px solid transparent; text-decoration: none; }
.tabs .tablist a[aria-selected="true"] { border-bottom-color: #2457d5; background: #dce4f3; }
.tabs .workspace { min-height: 605px; position: relative; flex: 1; }
.tabs .panel { min-height: 605px; padding: 4rem 0 3rem; }
.tabs .panel[hidden] { display: none; }
.tabs .panel h1, .tabs .panel h2 { font-size: clamp(3rem, 7.4vw, 6.75rem); margin-bottom: 2.5rem; max-width: 970px; }
.tabs .panel h1 span { color: #2457d5; }
.tabs .panel-content { display: grid; grid-template-columns: 1.25fr .75fr; gap: 5rem; align-items: start; }
.tabs .panel-meta { border-left: 4px solid #2457d5; padding-left: 1.5rem; font-size: 1rem; }
.tabs .panel-meta p + p { margin-top: .5rem; }
.tabs .footer { border-top: 1px solid #b8c1d1; }
.tabs .copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.tabs .copy-button { background: transparent; border: 1px solid #8c9db8; color: #202325; padding: .65rem 1rem; }
.tabs .copy-button:hover { background: #dce4f3; }
.tabs .copy-status { min-height: 1.5rem; margin-top: .5rem; font-size: .875rem; }
.tabs .contact-copy { margin-top: 2rem; }

.gallery { background: #f4f6f7; }
.gallery .gallery-head { margin: 3.5rem 0 2.5rem; }
.gallery h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .75rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.choice { text-decoration: none; border: 1px solid #cdd3d8; background: #fff; display: block; }
.choice:hover { border-color: #202325; }
.choice-cover { height: 240px; display: flex; align-items: center; justify-content: center; padding: 1.5rem; font-size: clamp(4rem, 7vw, 6rem); line-height: .85; letter-spacing: -.04em; font-weight: 650; }
.choice-cover sup { font-size: .18em; align-self: center; margin-top: 2rem; margin-left: .5rem; letter-spacing: -.02em; }
.cover-type { border-top: 8px solid #2159d8; background: #f4f6f7; }
.cover-split { background: #eb7f1a; color: #fff; }
.cover-tabs { background: #e9edf4; color: #2457d5; border-left: 12px solid #2457d5; }
.choice-caption { border-top: 1px solid #cdd3d8; padding: 1.5rem; }
.choice h2 { font-size: 1.3rem; margin-bottom: .65rem; }
.choice p { color: #586066; }
.gallery .footer { border-top: 1px solid #cdd3d8; margin-top: 3rem; }

@media (max-width: 1020px) {
  .split-shell { grid-template-columns: 38% 62%; }
  .split .identity, .split .content { padding-left: 2rem; padding-right: 2rem; }
  .split .identity-title { font-size: 11.5vw; }
  .tabs .panel-content { gap: 3rem; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 3rem); }
  .header { min-height: 90px; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; }
  .nav { gap: 1.3rem; }
  .type .main { padding-top: 2rem; }
  .type .wordmark { font-size: 24vw; margin-bottom: 2rem; }
  .type .overview, .type .detail { grid-template-columns: 1fr; gap: 1.5rem; }
  .type .detail { min-height: 490px; padding-top: 1.5rem; }
  .type .page-title { margin-bottom: 0; }
  .type .detail .body { padding-top: 0; padding-bottom: 2rem; }
  .split-shell { grid-template-columns: 1fr; }
  .split .identity { min-height: 330px; padding: 1.5rem; }
  .split .identity-title { font-size: 24vw; padding: 2rem 0; }
  .split .identity-title span { font-size: 1.25rem; margin-top: .5rem; }
  .split .content { padding: 1.5rem; }
  .split .content .nav { margin-bottom: 2.5rem; justify-content: flex-start; }
  .split .content h1 { font-size: clamp(2.5rem, 7.8vw, 3.5rem); }
  .tabs .header { padding-bottom: 0; }
  .tabs .tablist { min-height: 56px; }
  .tabs .tablist a { padding: 0 1rem; }
  .tabs .workspace, .tabs .panel { min-height: 560px; }
  .tabs .panel { padding-top: 2.5rem; }
  .tabs .panel h1, .tabs .panel h2 { font-size: clamp(2.8rem, 8.8vw, 4.5rem); margin-bottom: 2rem; }
  .tabs .panel-content { grid-template-columns: 1fr; gap: 2rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .choice-cover { font-size: clamp(4rem, 22vw, 6.5rem); }
}
@media (max-width: 420px) {
  .header .nav { width: 100%; }
  .tabs .tablist { width: 100%; }
  .tabs .tablist a { padding: 0 .8rem; }
  .copy { font-size: 1rem; }
}