@layer reset, base, components, responsive;
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  body,
  h1,
  h2,
  h3,
  p,
  ul,
  dl,
  dd,
  figure {
    margin: 0;
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }
  button {
    font: inherit;
  }
  a {
    color: inherit;
  }
  ul {
    padding: 0;
    list-style: none;
  }
}
@layer base {
  :root {
    color-scheme: light;
    --ink: #182235;
    --muted: #576478;
    --blue: #254be2;
    --light: #f4f6fa;
    --line: #dde3ed;
    --navy: #14223b;
    --radius: 14px;
  }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 24px;
  }
  body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: white;
    font-size: 1rem;
    line-height: 1.7;
  }
  a {
    text-decoration: none;
  }
  button {
    cursor: pointer;
  }
  a,
  button {
    touch-action: manipulation;
  }
  a:focus-visible,
  button:focus-visible {
    outline: 3px solid var(--blue);
    box-shadow: 0 0 0 7px #fff;
    outline-offset: 5px;
  }
  ::selection {
    background: #d8e2ff;
  }
  .wrap {
    width: min(1240px, calc(100% - 96px));
    margin-inline: auto;
  }
  .blue {
    color: var(--blue);
  }
  .eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.13em;
  }
  .skip-link {
    position: fixed;
    top: -90px;
    left: 15px;
    padding: 12px 20px;
    background: var(--blue);
    color: white;
    z-index: 10;
  }
  .skip-link:focus {
    top: 15px;
  }
  h1,
  h2,
  h3 {
    font-weight: 750;
    letter-spacing: -0.045em;
    line-height: 1.08;
  }
  h2 {
    font-size: clamp(2rem, 3.6vw, 3.2rem);
  }
  p {
    overflow-wrap: break-word;
  }
}
@layer components {
  .site-header {
    border-bottom: 1px solid var(--line);
    background: white;
  }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-block: 24px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
  }
  .brand small {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.27em;
    margin-top: 7px;
  }
  .header-inner nav {
    display: flex;
    gap: 32px;
    font-size: 0.875rem;
    font-weight: 600;
  }
  .header-inner nav a:hover {
    color: var(--blue);
  }
  .language {
    display: flex;
    gap: 3px;
    align-items: center;
    font-size: 0.875rem;
  }
  .language button {
    background: transparent;
    border: 0;
    padding: 10px 6px;
    color: var(--muted);
    font-weight: 700;
  }
  .language button[aria-pressed="true"] {
    color: var(--blue);
  }
  .language > span {
    color: #8b95a5;
  }
  .hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: center;
    padding-block: 94px 100px;
  }
  .hero .eyebrow {
    color: var(--blue);
    margin-bottom: 25px;
  }
  .hero h1 {
    font-size: clamp(2.8rem, 4.8vw, 4.4rem);
    line-height: 1.1;
    letter-spacing: -0.058em;
  }
  .hero h1 .blue {
    font-size: 0.95em;
  }
  .hero-intro {
    color: var(--muted);
    font-size: 1.125rem;
    line-height: 1.75;
    margin-top: 28px;
    max-width: 500px;
  }
  .hero-actions {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 32px;
  }
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 19px;
    background: var(--blue);
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.5;
    border: 1px solid var(--blue);
    border-radius: 7px;
    text-align: center;
    transition:
      background 0.2s,
      transform 0.2s;
  }
  .button:hover {
    background: #193bca;
    transform: translateY(-2px);
  }
  .text-link {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--blue);
    border-bottom: 1px solid #254be250;
    padding-bottom: 2px;
  }
  .text-link:hover {
    border-bottom-color: var(--blue);
  }
  .service-directory {
    background: var(--light);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 27px 29px 13px;
    box-shadow: 0 12px 40px #1b2d5305;
  }
  .directory-label {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    color: var(--muted);
    font-weight: 700;
    margin-bottom: 15px;
  }
  .service-directory > a {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 24px 0;
    border-top: 1px solid var(--line);
  }
  .directory-number {
    font-family: monospace;
    font-size: 0.8rem;
    align-self: start;
    padding-top: 4px;
    color: var(--blue);
  }
  .service-directory h2 {
    font-size: 1.4rem;
    letter-spacing: -0.035em;
  }
  .service-directory p:not(.directory-label) {
    font-size: 0.875rem;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.5;
  }
  .directory-mark {
    margin-left: auto;
    color: var(--blue);
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
  }
  .service-directory > a:hover h2 {
    color: var(--blue);
  }
  .region-band {
    background: var(--navy);
    color: white;
  }
  .region-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-block: 24px;
  }
  .region-symbol {
    font-size: 1.9rem;
    color: #a4b8ff;
  }
  .region-inner p {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 0.875rem;
  }
  .region-inner strong {
    font-weight: 600;
  }
  .region-inner p > span {
    color: #c0cce0;
    border-left: 1px solid #526078;
    padding-left: 22px;
  }
  .region-inner > a {
    margin-left: auto;
    font-size: 0.875rem;
    border-bottom: 1px solid #aabadd;
  }
  .services {
    padding-block: 88px;
  }
  .section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
  }
  .section-heading .eyebrow {
    color: var(--blue);
    margin-bottom: 13px;
  }
  .section-heading > p {
    color: var(--muted);
    font-size: 1rem;
  }
  .shop-card {
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: white;
  }
  .shop-copy {
    padding: 38px 45px 40px;
  }
  .shop-heading {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
  }
  .shop-heading img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .service-type {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--muted);
  }
  .shop-copy h3 {
    font-size: 2.6rem;
  }
  .service-lead {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.025em;
    margin-top: 19px;
    color: var(--ink);
  }
  .shop-copy > p:not(.service-lead) {
    color: var(--muted);
    margin-top: 20px;
    max-width: 470px;
  }
  .shop-address {
    margin-top: 28px;
    border-top: 1px solid var(--line);
    padding-top: 20px;
  }
  .shop-address > span {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--muted);
  }
  .shop-address address {
    font-size: 1rem;
    font-style: normal;
    margin-top: 5px;
  }
  .button-dark {
    background: var(--ink);
    border-color: var(--ink);
    margin-top: 23px;
  }
  .button-dark:hover {
    background: #2e405a;
  }
  .subtle-link {
    display: block;
    width: fit-content;
    color: var(--muted);
    font-size: 0.875rem;
    margin-top: 13px;
    text-decoration: underline;
    text-decoration-color: #c1c8d4;
    text-underline-offset: 4px;
  }
  .subtle-link:hover {
    color: var(--blue);
  }
  .shop-image {
    position: relative;
    min-width: 0;
    min-height: 540px;
    display: flex;
    flex-direction: column;
    background: #e5dfd5;
    overflow: hidden;
  }
  .shop-image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 47%;
  }
  .shop-image figcaption {
    position: relative;
    z-index: 1;
    margin: auto 24px 24px;
    background: #fffffff0;
    border: 1px solid white;
    backdrop-filter: blur(8px);
    padding: 18px 22px;
    border-radius: 8px;
  }
  .shop-image figcaption span {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.015em;
  }
  .shop-image figcaption a {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--muted);
    margin-top: 3px;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .technical-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
  }
  .technical-card {
    display: flex;
    flex-direction: column;
    align-items: start;
    background: var(--light);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px 38px;
  }
  .technical-heading {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 27px;
  }
  .service-index {
    color: #bbc8ee;
    font-weight: 700;
    font-size: 2.7rem;
    line-height: 1;
    letter-spacing: -0.04em;
  }
  .technical-card h3 {
    font-size: clamp(1.8rem, 2.4vw, 2.1rem);
  }
  .technical-card .service-lead {
    font-size: 1.25rem;
    font-weight: 500;
    margin-top: 20px;
  }
  .technical-card > p:not(.service-lead):not(.help-note) {
    color: var(--muted);
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.75;
  }
  .service-area {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-block: 25px 23px;
    color: var(--blue);
  }
  .service-area::before {
    content: "";
    width: 7px;
    height: 7px;
    border: 2px solid var(--blue);
    border-radius: 50%;
  }
  .button-outline {
    background: white;
    color: var(--blue);
    border-color: #b7c5f6;
    margin-top: auto;
  }
  .button-outline:hover {
    background: #e8edff;
  }
  .help-note {
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 16px;
  }
  .computer-card {
    background: #f3f6f7;
  }
  .computer-card .service-index {
    color: #bacdd3;
  }
  .about-section {
    background: var(--navy);
    color: white;
  }
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 100px;
    padding-block: 78px;
  }
  .about-grid .eyebrow {
    color: #adbeee;
    margin-bottom: 22px;
  }
  .about-grid h2 {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 600;
  }
  .about-copy .large-copy {
    font-size: 1.55rem;
    line-height: 1.45;
    color: white;
    letter-spacing: -0.02em;
    margin: 0 0 22px;
  }
  .about-copy > p {
    color: #c3cfe2;
    margin-top: 15px;
    line-height: 1.8;
  }
  .about-copy .text-link {
    color: white;
    border-color: #778aae;
    margin-top: 24px;
  }
  .projects {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 65px;
    align-items: center;
    padding-block: 67px;
  }
  .projects .eyebrow {
    color: var(--muted);
    margin-bottom: 12px;
  }
  .projects h2 {
    font-size: 1.7rem;
    letter-spacing: -0.02em;
  }
  .projects-copy > p:not(.eyebrow) {
    color: var(--muted);
    font-size: 1rem;
    margin-top: 18px;
  }
  .projects .text-link {
    margin-top: 19px;
  }
  .game-icons {
    display: flex;
    justify-content: flex-end;
    align-items: start;
    gap: 27px;
  }
  .game-icons a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    max-width: 110px;
  }
  .game-icons img {
    width: 80px;
    height: 80px;
    border-radius: 18px;
    box-shadow: 0 8px 15px #1c2b4215;
    transition: transform 0.2s;
  }
  .game-icons a:hover img {
    transform: translateY(-4px);
  }
  .game-icons span {
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .contact-section {
    background: var(--light);
    border-top: 1px solid var(--line);
    padding-block: 72px 54px;
  }
  .contact-top {
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    gap: 96px;
  }
  .contact-top .eyebrow {
    color: var(--blue);
    margin-bottom: 17px;
  }
  .contact-top h2 {
    font-size: 2.6rem;
  }
  .contact-top > div > p:not(.eyebrow) {
    color: var(--muted);
    margin-top: 23px;
    max-width: 540px;
  }
  .email-link {
    display: inline-block;
    color: var(--blue);
    font-weight: 600;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    letter-spacing: -0.04em;
    margin-top: 22px;
    border-bottom: 1px solid #254be250;
    overflow-wrap: anywhere;
  }
  .email-link:hover {
    border-bottom-color: var(--blue);
  }
  .store-contact {
    border-left: 1px solid #cfd7e4;
    padding-left: 35px;
  }
  .store-contact .eyebrow {
    font-size: 0.75rem;
    color: var(--muted);
  }
  .store-contact h3 {
    font-size: 1.5rem;
    letter-spacing: -0.03em;
  }
  .store-contact > p:not(.eyebrow) {
    font-size: 1rem;
    color: var(--muted);
    margin: 18px 0;
  }
  .store-contact > a {
    display: block;
    width: fit-content;
    font-size: 1rem;
    line-height: 1.6;
    margin-top: 7px;
  }
  .store-contact > .text-link {
    font-size: 0.875rem;
    margin-top: 20px;
  }
  .company {
    border-top: 1px solid #cfd7e4;
    margin-top: 60px;
    padding-top: 32px;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 40px;
  }
  .company h3 {
    font-size: 1.15rem;
    letter-spacing: -0.02em;
  }
  .company dl {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 23px 40px;
  }
  .company dt {
    font-size: 0.875rem;
    color: var(--muted);
    margin-bottom: 5px;
  }
  .company dd {
    font-size: 0.875rem;
    line-height: 1.65;
  }
  .site-footer {
    border-top: 1px solid var(--line);
  }
  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding-block: 26px;
  }
  .footer-inner .brand {
    font-size: 0.875rem;
  }
  .footer-inner .brand small {
    font-size: 0.6rem;
  }
  .footer-inner > p,
  .footer-inner > a:last-child {
    font-size: 0.875rem;
    color: var(--muted);
  }
}
@layer responsive {
  @media (max-width: 1100px) {
    .wrap {
      width: calc(100% - 56px);
    }
    .hero {
      gap: 34px;
      grid-template-columns: 1.15fr 1fr;
      padding-block: 70px;
    }
    .hero h1 {
      font-size: clamp(2.4rem, 4.7vw, 3.5rem);
    }
    .hero-intro {
      font-size: 1rem;
    }
    .service-directory {
      padding: 23px 22px 7px;
    }
    .service-directory h2 {
      font-size: 1.2rem;
    }
    .service-directory > a {
      gap: 12px;
    }
    .region-inner p {
      display: block;
    }
    .region-inner p > span {
      display: block;
      padding-left: 0;
      border: 0;
      margin-top: 3px;
    }
    .shop-copy {
      padding: 32px;
    }
    .shop-image {
      min-height: 560px;
    }
    .technical-card {
      padding: 30px;
    }
    .about-grid {
      gap: 60px;
    }
    .projects {
      gap: 30px;
    }
    .game-icons {
      gap: 20px;
    }
    .contact-top {
      gap: 45px;
    }
    .company {
      grid-template-columns: 1fr 3fr;
      gap: 25px;
    }
  }
  @media (max-width: 760px) {
    .wrap {
      width: calc(100% - 40px);
    }
    .header-inner {
      gap: 16px;
      padding-block: 21px;
      flex-wrap: wrap;
    }
    .brand {
      font-size: 0.9rem;
    }
    .brand img {
      width: 37px;
      height: 37px;
    }
    .header-inner nav {
      order: 3;
      width: 100%;
      justify-content: center;
      gap: 24px;
      border-top: 1px solid var(--line);
      padding-top: 17px;
      font-size: 0.875rem;
    }
    .hero {
      grid-template-columns: 1fr;
      gap: 36px;
      padding-block: 46px;
    }
    .hero .eyebrow {
      margin-bottom: 18px;
    }
    .hero h1 {
      font-size: clamp(2.25rem, 8vw, 3.8rem);
      letter-spacing: -0.055em;
    }
    .hero h1 .blue {
      font-size: 1em;
    }
    .hero-intro {
      font-size: 1rem;
      margin-top: 24px;
    }
    .hero-actions {
      gap: 18px;
      margin-top: 25px;
      align-items: start;
      flex-direction: column;
    }
    .button {
      padding: 13px 17px;
    }
    .service-directory {
      padding: 22px 22px 6px;
    }
    .service-directory h2 {
      font-size: 1.25rem;
    }
    .service-directory > a {
      padding-block: 20px;
    }
    .region-inner {
      gap: 12px;
      align-items: start;
      flex-wrap: wrap;
      padding-block: 22px;
    }
    .region-symbol {
      line-height: 1.2;
    }
    .region-inner p {
      font-size: 0.875rem;
    }
    .region-inner > a {
      margin: 0 0 0 36px;
      font-size: 0.875rem;
    }
    .services {
      padding-block: 58px;
    }
    .section-heading {
      display: block;
      margin-bottom: 26px;
    }
    .section-heading h2 {
      font-size: 2.1rem;
    }
    .section-heading > p {
      margin-top: 17px;
    }
    .shop-card {
      grid-template-columns: 1fr;
    }
    .shop-copy {
      padding: 27px;
    }
    .shop-copy h3 {
      font-size: 2.2rem;
    }
    .shop-copy .service-lead {
      font-size: 1.3rem;
    }
    .shop-heading {
      gap: 18px;
    }
    .shop-heading img {
      width: 66px;
      height: 66px;
    }
    .shop-heading .service-type {
      font-size: 0.75rem;
    }
    .shop-image {
      min-height: 380px;
      max-height: 440px;
      aspect-ratio: 1;
    }
    .shop-image > img {
      object-position: center 42%;
    }
    .shop-image figcaption {
      margin: 20px;
      padding: 16px 18px;
    }
    .shop-image figcaption span {
      font-size: 1rem;
    }
    .technical-grid {
      grid-template-columns: 1fr;
      gap: 20px;
      margin-top: 20px;
    }
    .technical-card {
      padding: 27px;
    }
    .technical-card h3 {
      font-size: 1.8rem;
    }
    .technical-heading {
      margin-bottom: 23px;
    }
    .service-index {
      font-size: 2.3rem;
    }
    .technical-card .service-lead {
      font-size: 1.2rem;
    }
    .technical-card .button {
      width: 100%;
      font-size: 0.875rem;
    }
    .about-grid {
      grid-template-columns: 1fr;
      gap: 30px;
      padding-block: 55px;
    }
    .about-grid h2 {
      font-size: 3.3rem;
    }
    .about-copy .large-copy {
      font-size: 1.4rem;
    }
    .projects {
      grid-template-columns: 1fr;
      gap: 30px;
      padding-block: 52px;
    }
    .projects h2 {
      font-size: 1.5rem;
    }
    .game-icons {
      justify-content: flex-start;
      gap: 24px;
    }
    .game-icons a {
      flex: 1;
      max-width: 100px;
    }
    .game-icons img {
      width: 68px;
      height: 68px;
      border-radius: 15px;
    }
    .game-icons span {
      font-size: 0.8rem;
    }
    .contact-section {
      padding-block: 52px 40px;
    }
    .contact-top {
      grid-template-columns: 1fr;
      gap: 36px;
    }
    .contact-top h2 {
      font-size: 2.15rem;
    }
    .email-link {
      font-size: 1.9rem;
    }
    .store-contact {
      padding-left: 0;
      border-left: 0;
      border-top: 1px solid #cfd7e4;
      padding-top: 28px;
    }
    .company {
      grid-template-columns: 1fr;
      gap: 22px;
      margin-top: 36px;
      padding-top: 26px;
    }
    .company dl {
      grid-template-columns: 1fr 1fr;
      gap: 22px;
    }
    .company dl > div:nth-child(-n + 2) {
      grid-column: 1/-1;
    }
    .footer-inner {
      flex-wrap: wrap;
      gap: 22px;
    }
    .footer-inner > p {
      order: 3;
      width: 100%;
    }
    .footer-inner > a:last-child {
      font-size: 0.8rem;
    }
  }
  @media (max-width: 360px) {
    .hero h1 {
      font-size: 2.08rem;
    }
    .shop-copy,
    .technical-card {
      padding: 23px;
    }
    .technical-card h3 {
      font-size: 1.6rem;
    }
    .region-inner p {
      max-width: 230px;
    }
    .game-icons {
      gap: 14px;
    }
    .header-inner nav {
      gap: 16px;
    }
    .service-directory {
      padding-inline: 18px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    .button,
    .game-icons img {
      transition: none;
    }
  }
}