:root {
  --ink: #343989;
  --brand: #5259b2;
  --brand-deep: #30357e;
  --brand-soft: #f7f5ec;
  --yellow: #f4d83f;
  --paper: #fcfaf5;
  --cream: #f7f5ec;
  --orange: #f4d83f;
  --sky: #faf8f1;
  --line: #c7c9e4;
  --white: #fffefa;
}

body { background: var(--paper); }
.site-header, .footer { background: #fff; }
.site-nav .nav-cta,
.button-dark,
.button-light {
  background: var(--yellow);
  color: var(--brand-deep);
}
.site-nav .nav-cta:hover,
.button-dark:hover,
.button-light:hover { background: #ffe86b; }
.text-link { color: var(--brand-deep); }

.hero { background: #faf8f1; }
.hero h1 em {
  color: var(--brand);
  background: linear-gradient(transparent 68%, var(--yellow) 68%, var(--yellow) 88%, transparent 88%);
}
.hero-facts span { background: #fffefa; }
.hero-photo-main { background: #777dbc; }
.hero-photo-small {
  background: #888ec9;
  border-color: #faf8f1;
}
.art-paper {
  border: 1px solid var(--brand-deep);
  box-shadow: 7px 8px 0 rgba(52, 57, 137, .16);
}
.art-stamp { background: var(--yellow); }
.hero-bottom { border-top-color: #c6c8e1; }

.discover { background: #fff; }
.section-kicker,
.work-number,
.recruit-heading span,
.faq-no { color: var(--brand); }
.section h2 span { color: #6970bd; }
.work-explorer { box-shadow: 10px 10px 0 var(--brand); }
.work-tabs button[aria-selected="true"] {
  background: var(--yellow);
  color: var(--brand-deep);
}
.factory-scene { background: #e5e6fa; }
.site-scene { background: #dfe2f7; }
.care-scene { background: #f8edb8; }
.work-illustration:after {
  background: linear-gradient(transparent, rgba(34, 37, 101, .57));
}

.day-block { background: var(--brand); }
.day-block:after { color: #777dcc; }
.day-heading .section-kicker,
.day-steps li > span { color: var(--yellow); }
.day-steps,
.day-steps li { border-color: #aeb3e0; }
.day-steps small { color: #f0f1fc; }
.people-note { color: var(--brand); }
.people-photo { background: #b6b9e1; }
.people-photo span { background: var(--brand-deep); }
.team-board { background: var(--brand-deep); }
.team-number { border-bottom-color: #a5a9d5; }
.team-card { background: #464ca1; }
.team-card:nth-child(2) { background: #5359ad; }
.team-card:nth-child(3) { background: #6269b9; }
.team-card:nth-child(4) {
  background: var(--yellow);
  color: var(--brand-deep);
}

.guide { background: var(--brand-soft); }
.guide-sticker {
  background: var(--yellow);
  box-shadow: 13px 13px 0 #b8bce6;
}
.guide-sticker div { color: var(--brand); }
.recruit-summary { background: #fff; }
.recruit-summary dl > div { border-bottom-color: var(--line); }
.contact { background: var(--brand-deep); }
.contact .section-kicker { color: var(--yellow); }
.contact small { color: #e0e2f6; }
.contact-star { color: #474da3; }

@media (max-width: 900px) {
  .site-nav { background: #fff; }
}

.swipe-hint, .mobile-cta { display: none; }

@media (max-width: 680px) {
  html { scroll-padding-top: 82px; }
  #work, #people, #guide, #contact { scroll-margin-top: 82px; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 62px;
    padding-inline: 18px;
    box-shadow: 0 2px 0 rgba(48, 53, 126, .12);
  }
  .brand { gap: 8px; }
  .brand b { font-size: 16px; }
  .brand small { font-size: 6px; letter-spacing: .08em; }
  .menu-toggle { min-height: 44px; min-width: 78px; justify-content: flex-end; }
  .site-nav { top: 62px; box-shadow: 0 12px 20px rgba(48, 53, 126, .13); }
  .site-nav a { min-height: 50px; display: flex; align-items: center; }
  .site-nav .nav-cta { justify-content: center; }

  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    padding-top: 25px;
    padding-bottom: 22px;
  }
  .hero-copy { display: contents; }
  .hero .eyebrow { order: 1; font-size: 9px; margin-bottom: 13px; letter-spacing: .06em; }
  .hero h1 { order: 2; font-size: clamp(42px, 12.4vw, 68px); line-height: 1.1; margin-bottom: 0; }
  .hero-art { order: 3; height: clamp(235px, 74vw, 340px); margin: 13px -22px 14px; }
  .hero-photo-main { inset: 0 13% 4% 0; border-radius: 75px 8px 8px 8px; }
  .hero-photo-small { width: 37%; height: 43%; right: 1%; bottom: 0; border-width: 4px; }
  .art-paper, .art-caption { display: none; }
  .art-stamp { right: 2%; top: 0; width: 67px; height: 67px; font-size: 10px; }
  .art-stamp span { font-size: 12px; }
  .hero-lede { order: 4; font-size: 14px; line-height: 1.72; margin-bottom: 16px; }
  .hero-actions { order: 5; gap: 10px 17px; }
  .hero-actions .button { min-height: 49px; padding: 12px 19px; }
  .hero-actions .text-link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
  .hero-facts { order: 6; margin-top: 17px; }
  .hero-facts span { font-size: 10px; padding: 5px 8px; }
  .hero-bottom { height: 44px; }

  .section { padding-block: 57px; }
  .section-head { margin-bottom: 25px; }
  .section-head>p { margin-top: 14px; line-height: 1.7; }
  .work-explorer { box-shadow: 5px 5px 0 var(--brand); }
  .swipe-hint {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 11px 14px;
    background: var(--brand-deep);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
  }
  .swipe-hint span { color: var(--yellow); white-space: nowrap; }
  .work-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .work-tabs::-webkit-scrollbar { display: none; }
  .work-tabs button {
    flex: 0 0 53%;
    scroll-snap-align: start;
    min-height: 57px;
    padding: 10px 13px;
    font-size: 14px;
    gap: 8px;
    white-space: nowrap;
  }
  .work-tabs button span { font-size: 10px; }
  .work-illustration { min-height: 225px; }
  .work-text { padding: 25px 20px 30px; }
  .work-text h3 { font-size: 31px; }
  .work-text>p:not(.work-number) { line-height: 1.8; }
  .day-block { margin-top: 62px; }
  .people-block { padding-top: 68px; }
  .people-note { margin-bottom: 28px; }
  .guide-head { margin-bottom: 27px; }
  .recruit-summary { margin-bottom: 47px; padding: 24px 18px; }
  .recruit-summary dl>div { grid-template-columns: 76px minmax(0, 1fr); gap: 9px; font-size: 12px; }
  .recruit-summary>a { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; }
  .guide-sticker { width: 155px; height: 155px; margin-bottom: 33px; font-size: 16px; }
  .faq-list summary { min-height: 62px; line-height: 1.5; }
  .contact { margin-top: 60px; }
  .contact-actions { max-width: none; }
  .contact-actions .button { min-height: 52px; }
  .contact-phone { min-height: 55px; }

  .mobile-cta {
    display: block;
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    background: rgba(252, 250, 245, .97);
    border-top: 1px solid var(--line);
  }
  .mobile-cta a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    padding: 0 19px;
    border-radius: 99px;
    background: var(--yellow);
    color: var(--brand-deep);
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 3px 0 var(--brand-deep);
  }
  .mobile-cta a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--brand-deep); }
}