/*
 * GymGrit 2026 sitewide design system
 * Derived from THE RESET: warm wellness color, bold editorial type,
 * restrained motion and strong black/yellow interaction accents.
 */

:root {
  --color-primary: #151617;
  --color-primary-deep: #0d0e0f;
  --color-secondary: #5f625f;
  --color-accent: #e2a132;
  --color-accent-strong: #b77917;
  --color-accent-soft: #f2cf8e;
  --color-text: #202124;
  --color-muted: #696864;
  --color-background: #f7f3ea;
  --color-surface: #fffdf8;
  --color-surface-muted: #e9e9e6;
  --color-border: #cac6bc;
  --color-white: #fffdf8;
  --font-sans: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-serif: var(--font-sans);
  --gg-black: #151617;
  --gg-yellow: #e2a132;
  --gg-yellow-soft: #f2cf8e;
  --gg-cream: #f7f3ea;
  --gg-gray: #e9e9e6;
  --gg-white: #fffdf8;
  --gg-ease: cubic-bezier(.22, 1, .36, 1);
  --gg-hard-shadow: 7px 7px 0 var(--gg-black);
  --container: 78rem;
}

body {
  background: var(--gg-cream);
  color: var(--color-text);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  color: var(--gg-black);
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: -.045em;
}

h2 {
  font-size: clamp(1.9rem, 3.4vw, 3.25rem);
  line-height: 1.22;
}

.container {
  width: min(calc(100% - clamp(2rem, 6vw, 6rem)), var(--container));
}

.section {
  padding-block: clamp(5.5rem, 10vw, 9.5rem);
}

.section-heading {
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.eyebrow {
  display: inline-block;
  width: fit-content;
  margin-bottom: 1.35rem;
  padding: .18em .45em .28em;
  background: var(--gg-yellow);
  color: var(--gg-black) !important;
  font-size: clamp(.7rem, .9vw, .82rem);
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
}

.section-lead {
  color: var(--color-muted);
  font-size: clamp(.95rem, 1.3vw, 1.08rem);
  font-weight: 600;
  line-height: 2;
}

.button {
  min-height: 3.6rem;
  padding-inline: 1.75rem;
  border: 2px solid var(--gg-black);
  border-radius: 0;
  background: var(--gg-black);
  box-shadow: 4px 4px 0 var(--gg-yellow);
  color: #fff;
  font-weight: 900;
  letter-spacing: .06em;
  transition: background .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.button:hover,
.button:focus-visible {
  border-color: var(--gg-black);
  background: var(--gg-yellow);
  box-shadow: 2px 2px 0 var(--gg-black);
  color: var(--gg-black);
  transform: translate(2px, 2px);
}

.button--light {
  border-color: #fff;
  background: #fff;
  box-shadow: 4px 4px 0 var(--gg-yellow);
  color: var(--gg-black);
}

.text-link {
  gap: 1.5rem;
  min-height: 3rem;
  border-bottom: 2px solid currentcolor;
  font-weight: 900;
  letter-spacing: .06em;
}

/* Header and menu */
.site-header,
.js-enabled .site-header {
  position: sticky;
  min-height: 4rem;
  border-bottom: 1px solid rgba(21, 22, 23, .18);
  background: rgba(247, 243, 234, .94);
  color: var(--gg-black);
  backdrop-filter: blur(14px);
}

.site-header.is-scrolled {
  border-bottom-color: rgba(21, 22, 23, .22);
  background: rgba(247, 243, 234, .97);
}

.site-header__inner {
  min-height: 4rem;
}

.site-logo__image {
  width: clamp(8rem, 15vw, 10.5rem);
}

.desktop-nav__list a {
  position: relative;
  color: var(--gg-black);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.desktop-nav__list > li > a::after {
  position: absolute;
  right: 0;
  bottom: -.45rem;
  left: 0;
  height: 3px;
  background: var(--gg-yellow);
  content: "";
  opacity: 0;
  transform: scaleX(.2);
  transition: opacity .2s ease, transform .3s var(--gg-ease);
}

.desktop-nav__list > li > a:hover::after,
.desktop-nav__list > li > a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.nav-toggle {
  color: var(--gg-black);
  font-weight: 900;
}

.nav-toggle__icon span {
  height: 2px;
}

.global-nav,
.js-enabled .global-nav {
  inset: 0 0 0 auto;
  width: min(36rem, 100vw);
  padding: 1.75rem clamp(1.5rem, 5vw, 4rem) 3rem;
  background:
    linear-gradient(145deg, rgba(226, 161, 50, .08), transparent 42%),
    rgba(21, 22, 23, .98);
  color: #fff;
  transform: none;
}

.global-nav.is-open,
.js-enabled .global-nav.is-open {
  transform: none;
}

.global-nav__logo .site-logo__image {
  filter: brightness(0) invert(1);
}

.global-nav__list,
.js-enabled .global-nav__list {
  width: 100%;
  margin-top: clamp(2rem, 7vh, 4.5rem);
}

.global-nav__list a,
.js-enabled .global-nav__list a {
  min-height: 4.35rem;
  border-bottom-color: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: clamp(1.25rem, 3.2vw, 2rem);
  font-weight: 900;
}

.global-nav__list a span {
  letter-spacing: .08em;
}

.global-nav__list a small {
  color: rgba(255, 255, 255, .58);
}

.global-nav__list a[aria-current="page"],
.js-enabled .global-nav__list a[aria-current="page"] {
  color: var(--gg-yellow);
}

.global-nav__sublist a,
.js-enabled .global-nav__sublist a,
.global-nav__list .global-nav__sublist a,
.js-enabled .global-nav__list .global-nav__sublist a {
  min-height: 2.65rem;
  color: var(--gg-yellow-soft);
  font-size: .82rem;
}

body.nav-open .site-header {
  background: var(--gg-cream);
}

/* Home first view */
.hero {
  position: relative;
  min-height: calc(100svh - 4rem);
  border-bottom: 1px solid rgba(21, 22, 23, .24);
  background: var(--gg-cream);
}

.hero::before {
  position: absolute;
  z-index: 1;
  top: clamp(1.5rem, 5vw, 4rem);
  left: clamp(1rem, 4vw, 4rem);
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  color: transparent;
  font-family: var(--font-sans);
  font-size: clamp(4rem, 12vw, 11rem);
  font-weight: 900;
  letter-spacing: -.09em;
  line-height: .8;
  content: "GYM GRIT";
  opacity: .18;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--gg-black);
}

.hero__inner.container,
.hero__content {
  min-height: calc(100svh - 4rem);
}

.hero__content {
  padding-top: clamp(7rem, 14vh, 10rem);
}

.hero__title {
  color: var(--gg-black);
  font-family: var(--font-sans);
  font-size: clamp(3.25rem, 6.2vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: 1.08;
}

.hero__lead {
  border-left: 5px solid var(--gg-yellow);
  background: rgba(247, 243, 234, .78);
  color: #414441;
  font-weight: 700;
}

.hero .home-photo--hero .photo-slot__surface {
  filter: saturate(.74) contrast(1.03);
  transform: scale(1.02);
  transform-origin: center;
  transition: transform 1.2s var(--gg-ease);
}

.gymgrit-marquee {
  position: relative;
  z-index: 4;
  overflow: hidden;
  min-height: 4.75rem;
  border-top: 1px solid var(--gg-black);
  border-bottom: 1px solid var(--gg-black);
  background: var(--gg-yellow);
  color: var(--gg-black);
  white-space: nowrap;
}

.gymgrit-marquee__track {
  display: flex;
  width: max-content;
  min-height: 4.75rem;
  align-items: center;
  will-change: transform;
  animation: gg-marquee 22s linear infinite;
}

.gymgrit-marquee__line {
  flex: none;
  padding-right: 1.2em;
  font-size: clamp(1.65rem, 3vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1;
}

@keyframes gg-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

/* Shared lower-page hero */
.brand-hero,
.services-hero,
.projects-hero,
.company-hero,
.column-hero,
.contact-hero {
  position: relative;
  display: flex;
  min-height: clamp(30rem, 64svh, 44rem);
  align-items: flex-end;
  overflow: hidden;
  padding: clamp(8rem, 14vw, 12rem) 0 clamp(4rem, 7vw, 6.5rem);
  border-bottom: 1px solid rgba(21, 22, 23, .22);
  background:
    repeating-linear-gradient(-45deg, transparent 0 24px, rgba(21, 22, 23, .025) 24px 25px),
    var(--gg-cream);
}

.brand-hero::before,
.services-hero::before,
.projects-hero::before,
.company-hero::before,
.column-hero::before,
.contact-hero::before {
  position: absolute;
  z-index: 0;
  top: auto;
  right: -.04em;
  bottom: -.18em;
  left: auto;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  color: transparent;
  font-family: var(--font-sans);
  font-size: clamp(6rem, 17vw, 15rem);
  font-weight: 900;
  letter-spacing: -.09em;
  line-height: .8;
  opacity: .14;
  pointer-events: none;
  -webkit-text-stroke: 2px var(--gg-black);
}

.brand-hero::before { content: "BRAND"; }
.services-hero::before { content: "SERVICES"; }
.projects-hero::before { content: "PROJECTS"; }
.company-hero::before { content: "COMPANY"; }
.column-hero::before { content: "COLUMN"; }
.contact-hero::before { content: "CONTACT"; }

.projects-hero::after,
.column-hero::after,
.contact-hero::after {
  display: none;
}

.brand-hero__inner,
.services-hero__inner,
.projects-hero__inner,
.company-hero__inner,
.column-hero__inner,
.contact-hero__content {
  position: relative;
  z-index: 1;
}

/* Keep oversized page titles above adjacent hero images. */
.brand-hero__content,
.services-hero__content,
.projects-hero__heading,
.projects-hero__copy,
.column-hero__inner,
.contact-hero__content {
  position: relative;
  z-index: 4;
}

.company-hero__content {
  z-index: 4;
}

.photo-slot--brand-hero,
.service-photo--hero {
  position: relative;
  z-index: 1;
}

.company-photo--hero {
  z-index: 1;
}

.brand-hero .brand-hero__content h1,
.services-hero .services-hero__content h1,
.projects-hero .projects-hero__heading h1,
.company-hero .company-hero__content h1,
.column-hero .column-hero__inner h1,
.contact-hero .contact-hero__content h1 {
  color: var(--gg-black);
  font-family: var(--font-sans);
  font-size: clamp(3.75rem, 5.1vw, 4.6875rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.12;
}

/* Editorial cards and sections */
.photo-slot,
.service-photo,
.company-photo {
  border-radius: 0;
}

.photo-slot__surface,
.service-photo .photo-slot__surface,
.company-photo .photo-slot__surface {
  filter: saturate(.78) contrast(1.03);
  transition: filter .45s ease, transform .8s var(--gg-ease);
}

a:hover .photo-slot__surface,
.brand-story:hover .photo-slot__surface,
.service-showcase:hover .photo-slot__surface {
  filter: saturate(.92) contrast(1.04);
  transform: scale(1.025);
}

.business {
  background: var(--gg-gray) !important;
}

.business-copy::before {
  color: rgba(21, 22, 23, .07) !important;
  font-weight: 900 !important;
}

.business-diagram {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(21, 22, 23, .16);
  border-radius: 1rem;
  background: var(--gg-white);
  box-shadow: 12px 12px 0 rgba(21, 22, 23, .1);
}

.business-diagram::before {
  inset: 10%;
  border: 1px solid rgba(21, 22, 23, .2);
  background: var(--gg-cream) !important;
  box-shadow:
    inset 0 0 0 1px rgba(226, 161, 50, .16),
    0 0 0 1px rgba(255, 255, 255, .8);
}

.business-diagram::after {
  position: absolute;
  z-index: 5;
  top: 4%;
  right: 3.5%;
  color: rgba(21, 22, 23, .58);
  content: "GYM GRIT BUSINESS";
  font-size: clamp(.5rem, .72vw, .66rem);
  font-weight: 900;
  letter-spacing: .2em;
  line-height: 1;
  writing-mode: vertical-rl;
}

.business-diagram__core {
  border: 2px solid var(--gg-black);
  background: var(--gg-yellow) !important;
  box-shadow: var(--gg-hard-shadow);
}

.business-diagram__core::before {
  position: absolute;
  top: 13%;
  left: 50%;
  color: rgba(21, 22, 23, .64);
  content: "CORE / 04";
  font-size: clamp(.46rem, .65vw, .6rem);
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1;
  transform: translateX(-50%);
  white-space: nowrap;
}

.business-diagram__core strong {
  font-weight: 900;
  letter-spacing: -.035em;
}

.business-diagram__node {
  border: 2px solid var(--gg-black);
  background: var(--gg-black) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(226, 161, 50, .42),
    0 .8rem 1.8rem rgba(21, 22, 23, .12);
  transition: background .25s ease, color .25s ease, box-shadow .35s ease, transform .45s var(--gg-ease);
}

.business-diagram__node::before {
  position: absolute;
  top: 14%;
  left: 18%;
  color: var(--gg-yellow);
  content: var(--business-node-number);
  font-size: clamp(.45rem, .58vw, .56rem);
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
}

.business-diagram__node small {
  font-weight: 700;
  letter-spacing: .02em;
}

.business-diagram__node b {
  color: var(--gg-yellow);
  font-size: clamp(.72rem, 1.05vw, 1rem);
  font-weight: 800;
  letter-spacing: .1em;
}

.business-diagram__node:hover {
  background: var(--gg-yellow) !important;
  color: var(--gg-black) !important;
  box-shadow: 7px 7px 0 var(--gg-black);
  transform: translateY(-4px) scale(1.025);
}

.business-diagram__node:hover::before,
.business-diagram__node:hover b {
  color: var(--gg-black);
}

.brand-tile,
.business-card,
.column-card {
  border: 2px solid var(--gg-black);
  border-radius: 0;
  background: var(--gg-white);
  box-shadow: 7px 7px 0 rgba(21, 22, 23, .12);
  transition: box-shadow .3s ease, transform .45s var(--gg-ease);
}

.brand-tile:hover,
.business-card:hover,
.column-card:hover {
  box-shadow: 3px 3px 0 var(--gg-yellow);
  transform: translate(4px, 4px);
}

.brand-tile__content {
  border-top: 1px solid var(--gg-black);
  background: var(--gg-white);
}

.brand-tile h3 {
  font-family: var(--font-sans);
  font-weight: 900;
  letter-spacing: -.045em;
}

.service-card,
.services-index__list a,
.work-row,
.profile-list > div {
  transition: background .25s ease, padding .35s var(--gg-ease), color .25s ease;
}

.service-card:hover,
.services-index__list a:hover,
.work-row:hover {
  padding-right: 1rem;
  padding-left: 1rem;
  background: rgba(226, 161, 50, .13);
}

.service-showcase__number,
.service-card__head,
.purpose-list article > span,
.brand-feature__number,
.column-card__meta {
  color: var(--color-accent-strong);
  font-weight: 900;
}

.service-showcase__number {
  color: var(--gg-yellow);
  text-shadow:
    -1px -1px 0 var(--gg-black),
    1px -1px 0 var(--gg-black),
    -1px 1px 0 var(--gg-black),
    1px 1px 0 var(--gg-black);
}

.services-index,
.brand-story--next,
.company-purpose,
.column-archive,
.contact-form-section {
  background: var(--gg-gray);
}

.brand-story,
.service-showcase,
.representative-message,
.company-profile {
  background: var(--gg-white);
}

/* COMPANY: keep the representative message legible on the white design layer. */
.representative-message {
  color: var(--gg-black);
}

.representative-message .eyebrow--light {
  color: var(--color-accent-strong);
}

.representative-message__content h2,
.message-story p:nth-of-type(3),
.message-story p:nth-of-type(7),
.message-story p:nth-of-type(12) {
  color: var(--gg-black);
}

.message-story p {
  color: rgb(21 22 23 / 76%);
}

.message-keywords span {
  border-color: rgb(21 22 23 / 18%);
  background: transparent;
  color: var(--gg-black);
}

.message-keywords b {
  color: var(--gg-black);
}

.message-keywords small {
  color: var(--color-accent-strong);
}

.purpose-list article {
  position: relative;
  border-top: 2px solid var(--gg-black);
}

.purpose-list article::before {
  position: absolute;
  top: -2px;
  left: 0;
  width: 4.5rem;
  height: 6px;
  background: var(--gg-yellow);
  content: "";
}

.contact {
  border-top: 1px solid rgba(255, 255, 255, .16);
  background: var(--gg-black);
}

.contact h2,
.contact .contact__action {
  color: #fff;
}

.contact__link {
  transition: background .3s ease;
}

.contact__link:hover {
  background: rgba(226, 161, 50, .08);
}

.form-field input,
.form-field textarea {
  border: 2px solid var(--gg-black);
  border-radius: 0;
  background: var(--gg-white);
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--gg-black);
  box-shadow: 5px 5px 0 var(--gg-yellow);
}

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, .15);
  background: var(--gg-black);
}

.footer-nav a {
  position: relative;
  font-weight: 800;
  letter-spacing: .06em;
}

.footer-nav a:hover {
  color: var(--gg-yellow);
}

/* Reveal motion: JS only adds these classes when motion is allowed. */
.js-enabled .gg-reveal {
  opacity: 0;
  transform: translateY(2.5rem);
  transition:
    opacity .75s calc(var(--gg-delay, 0) * 70ms) ease,
    transform 1s calc(var(--gg-delay, 0) * 70ms) var(--gg-ease);
}

.js-enabled .gg-reveal.gg-visible {
  opacity: 1;
  transform: none;
}

/* Business diagram: four services assemble around the central support. */
.js-enabled .business-diagram.gg-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.js-enabled .business-diagram.gg-reveal:not(.gg-visible)::before,
.js-enabled .business-diagram.gg-reveal:not(.gg-visible) .business-diagram__core,
.js-enabled .business-diagram.gg-reveal:not(.gg-visible) .business-diagram__node {
  opacity: 0;
}

.business-diagram__orbit {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform-origin: 50% 50%;
}

.js-enabled .business-diagram.gg-visible::before {
  animation: business-ring-in 2.8s var(--gg-ease) backwards;
}

.js-enabled .business-diagram.gg-visible .business-diagram__core {
  animation: business-core-in 2.4s .35s var(--gg-ease) backwards;
}

.js-enabled .business-diagram.gg-visible .business-diagram__orbit {
  animation: business-orbit-in 3.6s .5s cubic-bezier(.16, 1, .3, 1) backwards;
}

.js-enabled .business-diagram.gg-visible .business-diagram__node {
  animation:
    business-node-unwind 3.6s .5s cubic-bezier(.16, 1, .3, 1) backwards,
    business-node-fade .95s var(--business-node-delay, .7s) ease-out backwards;
}

.business-diagram__node--01 {
  --business-node-delay: .7s;
  --business-node-number: "01";
}

.business-diagram__node--02 {
  --business-node-delay: .95s;
  --business-node-number: "02";
}

.business-diagram__node--03 {
  --business-node-delay: 1.2s;
  --business-node-number: "03";
}

.business-diagram__node--04 {
  --business-node-delay: 1.45s;
  --business-node-number: "04";
}

@keyframes business-ring-in {
  from {
    opacity: 0;
    transform: scale(.72) rotate(-10deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes business-core-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.72) rotate(-18deg);
  }
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.035) rotate(2.5deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes business-orbit-in {
  from { transform: rotate(-145deg) scale(.74); }
  to { transform: none; }
}

@keyframes business-node-unwind {
  from { transform: rotate(145deg) scale(.86); }
  to { transform: none; }
}

@keyframes business-node-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 63.99rem) {
  .brand-hero,
  .services-hero,
  .projects-hero,
  .company-hero,
  .column-hero,
  .contact-hero {
    min-height: 30rem;
  }

  .brand-hero::before,
  .services-hero::before,
  .projects-hero::before,
  .company-hero::before,
  .column-hero::before,
  .contact-hero::before {
    font-size: clamp(5rem, 20vw, 10rem);
  }
}

@media (max-width: 43.99rem) {
  .container {
    width: min(calc(100% - 2rem), var(--container));
  }

  .section {
    padding-block: 4.5rem;
  }

  .eyebrow {
    margin-bottom: 1rem;
  }

  .hero,
  .hero__inner.container,
  .hero__content {
    min-height: max(42rem, calc(100svh - 4rem));
  }

  .hero::before {
    top: 2rem;
    right: auto;
    left: .6rem;
    font-size: clamp(3.8rem, 19vw, 6rem);
    white-space: nowrap;
  }

  .hero__content {
    padding-top: 6.5rem;
  }

  .hero__title {
    font-size: clamp(2.2rem, 9.5vw, 3.1rem);
    line-height: 1.12;
  }

  .hero__lead {
    border-width: 3px;
  }

  .gymgrit-marquee,
  .gymgrit-marquee__track {
    min-height: 3.5rem;
  }

  .gymgrit-marquee__line {
    font-size: 1.45rem;
  }

  .brand-hero,
  .services-hero,
  .projects-hero,
  .company-hero,
  .column-hero,
  .contact-hero {
    min-height: 26rem;
    padding-top: 7rem;
    padding-bottom: 3rem;
  }

  .brand-hero .brand-hero__content h1,
  .services-hero .services-hero__content h1,
  .projects-hero .projects-hero__heading h1,
  .company-hero .company-hero__content h1,
  .column-hero .column-hero__inner h1,
  .contact-hero .contact-hero__content h1 {
    font-size: clamp(2rem, 8vw, 2.6rem);
  }

  .brand-tile,
  .business-card,
  .column-card {
    box-shadow: 5px 5px 0 rgba(21, 22, 23, .12);
  }

  .global-nav,
  .js-enabled .global-nav {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gymgrit-marquee__track {
    animation: none;
  }

  .js-enabled .gg-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-enabled .business-diagram,
  .js-enabled .business-diagram::before,
  .js-enabled .business-diagram .business-diagram__orbit,
  .js-enabled .business-diagram .business-diagram__core,
  .js-enabled .business-diagram .business-diagram__node {
    opacity: 1;
    animation: none;
  }

  .photo-slot__surface,
  .service-photo .photo-slot__surface,
  .company-photo .photo-slot__surface {
    transform: none !important;
    transition: none;
  }
}