/* Shared multi-page navigation and page-specific layouts. */
.site-header nav { gap: 24px; font-size: 11px; }
.site-header nav a[aria-current="page"] { color: #56712e; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.site-header nav a:last-child { border: 1px solid #b8c2a8; border-radius: 30px; padding: 12px 18px; }
.site-footer { display: block; height: auto; padding-block: 32px 24px; }
.footer-main, .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer-main nav { display: flex; gap: 23px; flex-wrap: wrap; font-size: 10px; color: #65705c; }
.footer-main nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.footer-bottom { margin-top: 28px; color: #7d8372; font-size: 9px; }
.gateway-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.gateway { padding: 30px; border: 1px solid #d5deca; border-radius: 20px; transition: transform .2s; }
.gateway:hover { transform: translateY(-5px); }
.gateway-web { background: #e5edd8; }
.gateway-app { background: #e9e2f6; border-color: #dbd3e9; }
.gateway>.eyebrow { display: flex; justify-content: space-between; font-size: 8px; }
.gateway>.eyebrow>span { font-size: 7px; }
.gateway-icons { display: flex; align-items: center; gap: 22px; min-height: 147px; }
.gateway-icons img { padding: 12px; background: #ffffff75; border: 1px solid #fff9; border-radius: 18px; box-shadow: 0 10px 20px #5e675d09; }
.gateway-icons img:nth-child(2) { transform: rotate(-9deg) translateY(-8px); }
.gateway h3 { font-size: 23px; letter-spacing: -1px; margin: 0 0 14px; }
.gateway p { color: #717b65; font-size: 11px; line-height: 1.9; }
.gateway-link { display: flex; justify-content: space-between; align-items: center; margin-top: 27px; padding-top: 17px; border-top: 1px solid #bbc6ab80; font-size: 11px; }
.gateway-link>span { font-size: 21px; }
.page-intro { padding-top: 32px; padding-bottom: 60px; }
.breadcrumb { display: flex; gap: 13px; color: #7e8872; font-size: 9px; margin: 0 0 57px; }
.breadcrumb a:hover { text-decoration: underline; }
.page-intro>.eyebrow { margin-bottom: 25px; font-size: 9px; }
.catalog-heading { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-top: 32px; }
.catalog-heading h1 { font-size: clamp(40px, 5vw, 69px); letter-spacing: -.065em; line-height: 1.35; }
.page-description { color: #6f7963; font-size: 13px; line-height: 2; margin: 26px 0 0; max-width: 720px; }
.catalog-counter { font-size: clamp(100px, 17vw, 220px); line-height: .9; font-weight: 700; letter-spacing: -.1em; color: #d4dfbf; padding-right: 12px; }
.catalog-counter>span { display: block; text-align: right; font-size: 10px; letter-spacing: 3px; color: #71825a; margin-top: 18px; }
.page-app .catalog-counter { color: #ded5ef; }
.catalog-content { padding-bottom: 70px; }
.catalog-toolbar { display: flex; justify-content: space-between; align-items: center; border-block: 1px solid var(--line); padding-block: 20px; margin-bottom: 28px; }
.catalog-toolbar h2 { font-size: 10px; letter-spacing: 1.5px; margin: 0; }
.catalog-toolbar>span { font-size: 9px; color: #7c876e; }
.catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.catalog-grid .featured { grid-column: auto; }
.catalog-grid .card-art { height: 218px; }
.catalog-grid .featured .card-art>img { width: 65px; height: 65px; left: 22px; top: 46px; }
.catalog-grid .globe { width: 185px; height: 185px; right: -25px; top: 52px; }
.catalog-grid .visual-caption { left: 22px; bottom: 35px; max-width: 125px; font-size: 7px; }
.page-app .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-app .catalog-grid .card-art { height: 270px; }
.page-app .catalog-grid .card-art>img, .page-app .catalog-grid .featured .card-art>img { position: relative; width: 100px; height: 100px; left: auto; top: auto; }
.cross-navigation { display: flex; justify-content: space-between; gap: 30px; align-items: center; border-top: 1px solid var(--line); padding-block: 40px 60px; }
.cross-navigation .eyebrow { font-size: 8px; color: #7c876e; }
.cross-navigation h2 { font-size: 20px; margin-bottom: 0; }
.cross-navigation>div:last-child { display: flex; flex-wrap: wrap; gap: 20px; font-size: 11px; }
.cross-navigation a { padding-block: 10px; }
.cross-navigation a:hover { text-decoration: underline; text-underline-offset: 5px; }
.document-title { font-size: clamp(32px, 4.4vw, 59px); letter-spacing: -.055em; line-height: 1.5; }
.mobile-break { display: none; }
.document-layout { display: grid; grid-template-columns: 220px 1fr; gap: 70px; padding-bottom: 80px; }
.document-toc { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; font-size: 11px; padding-top: 15px; }
.document-toc .eyebrow { color: #89917e; font-size: 8px; }
.document-toc a:hover { text-decoration: underline; }
.document-content { max-width: 740px; }
.document-content section { padding-block: 30px; border-top: 1px solid var(--line); scroll-margin-top: 30px; }
.document-content h2, .contact-layout h2 { font-size: 21px; line-height: 1.7; letter-spacing: -.6px; }
.document-content p, .contact-layout p, .policy-items, .contact-guidance ul { font-size: 12px; line-height: 2.1; color: #6e7862; }
.document-content .eyebrow, .contact-layout .eyebrow { font-size: 8px; color: #89917e; }
.notice-label { display: inline-block; padding: 7px 11px; border-radius: 7px; background: #ece5d3; color: #7e6944; letter-spacing: 1px; font-size: 8px; }
.document-note { padding: 15px 18px; border-radius: 9px; background: #e9ecdf; }
.policy-items { padding-left: 20px; }
.policy-items li { margin-block: 8px; }
.text-link { display: inline-block; color: #526537; border-bottom: 1px solid #b7c2a6; padding-block: 9px; font-size: 12px; }
.contact-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; padding-bottom: 90px; align-items: start; }
.contact-panel { background: #e8eddc; border: 1px solid #dce4ce; padding: 36px; border-radius: 20px; }
.contact-panel .button { margin-top: 16px; }
.contact-address { overflow-wrap: anywhere; }
.contact-guidance { padding: 15px 0; }
.contact-guidance ul { padding-left: 20px; }
.not-found { padding-bottom: 100px; min-height: 65vh; }
.not-found .button { margin-top: 30px; }
@media(max-width:1100px) {
  .site-header nav { gap: 16px; font-size: 10px; }
  .site-header .brand-logo { width: 150px; }
  .catalog-grid { gap: 18px; }
  .document-layout { gap: 35px; grid-template-columns: 180px 1fr; }
  .footer-main { align-items: flex-start; }
  .footer-main nav { justify-content: flex-end; gap: 16px; }
}
@media(max-width:800px) {
  .site-header { height: auto; padding-block: 18px 0; flex-wrap: wrap; gap: 12px; }
  .site-header nav { width: 100%; gap: 22px; overflow-x: auto; white-space: nowrap; padding-bottom: 13px; }
  .site-header nav>a { padding-block: 9px; }
  .site-header nav a:last-child { border: 0; padding: 9px 0; }
  .site-header nav a[aria-current="page"] { text-underline-offset: 6px; }
  .gateway { padding: 23px; }
  .gateway-icons { gap: 14px; }
  .gateway-icons img { width: 56px; height: 56px; }
  .gateway h3 { font-size: 19px; }
  .gateway p { font-size: 10px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-counter { font-size: 110px; }
  .page-description { font-size: 12px; }
  .cross-navigation { display: block; }
  .cross-navigation>div:last-child { margin-top: 20px; }
  .document-layout { grid-template-columns: 1fr; gap: 20px; }
  .document-toc { flex-direction: row; flex-wrap: wrap; gap: 17px; padding-bottom: 20px; }
  .document-toc .eyebrow { width: 100%; margin: 0; }
  .contact-layout { gap: 25px; grid-template-columns: 1fr; }
  .footer-main { display: block; }
  .footer-main nav { justify-content: flex-start; margin-top: 23px; }
}
@media(max-width:560px) {
  .site-header nav { gap: 20px; font-size: 10px; }
  .site-header .brand-logo { width: 138px; }
  .site-header .studio-tag { font-size: 8px; }
  .gateway-grid { grid-template-columns: 1fr; gap: 17px; }
  .gateway-icons { min-height: 126px; gap: 22px; }
  .gateway-icons img { width: 65px; height: 65px; }
  .gateway h3 { font-size: 22px; }
  .gateway p { font-size: 11px; }
  .page-intro { padding-block: 24px 40px; }
  .breadcrumb { margin-bottom: 36px; font-size: 8px; }
  .catalog-heading { gap: 12px; padding-top: 25px; }
  .catalog-heading h1 { font-size: clamp(29px, 8vw, 42px); }
  .catalog-counter { font-size: 70px; padding-right: 4px; align-self: flex-start; margin-top: 10px; }
  .catalog-counter>span { font-size: 6px; letter-spacing: 1px; margin-top: 12px; }
  .page-description { font-size: 11px; margin-top: 20px; }
  .catalog-toolbar>span { font-size: 8px; }
  .catalog-grid, .page-app .catalog-grid { grid-template-columns: 1fr; gap: 20px; }
  .catalog-grid .card-art, .page-app .catalog-grid .card-art { height: 220px; }
  .catalog-grid .card-body { padding: 23px; }
  .catalog-grid .card-body h3 { font-size: 25px; }
  .catalog-grid .card-body>p { font-size: 11px; min-height: 0; }
  .catalog-grid .card-category { font-size: 10px; }
  .catalog-grid .card-open { font-size: 10px; }
  .catalog-grid .globe { width: 230px; height: 230px; right: 0; }
  .catalog-grid .featured .card-art>img { left: 32px; width: 80px; height: 80px; }
  .catalog-grid .visual-caption { left: 32px; }
  .catalog-content { padding-bottom: 45px; }
  .cross-navigation { padding-block: 30px 40px; }
  .cross-navigation h2 { font-size: 19px; }
  .cross-navigation>div:last-child { font-size: 10px; gap: 16px; }
  .document-title { font-size: clamp(29px, 7.5vw, 40px); }
  .mobile-break { display: initial; }
  .document-content h2, .contact-layout h2 { font-size: 19px; }
  .document-content p, .contact-layout p, .policy-items, .contact-guidance ul { font-size: 11px; }
  .contact-panel { padding: 26px; }
  .document-layout, .contact-layout { padding-bottom: 50px; }
  .footer-main nav { font-size: 9px; gap: 16px 20px; }
  .site-footer .brand { width: auto; }
}