/* Shared responsive layer. Loaded after each page stylesheet. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.page-main,
.section,
.container,
.container-wide,
.grid,
.grid-2,
.grid-3,
.site-header__inner,
.site-footer__inner {
  min-width: 0;
}

.container,
.container-wide {
  padding-left: clamp(16px, 5vw, 32px);
  padding-right: clamp(16px, 5vw, 32px);
}

/* Repairs the malformed reverse-layout media rule in experience.css. */
@media (min-width: 960px) {
  .experience-media-grid--reverse {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  .experience-media-grid--reverse .experience-media-image {
    order: 2;
  }

  .experience-media-grid--reverse .experience-media-text {
    order: 1;
  }
}

@media (max-width: 899px) {
  .nav-toggle span {
    transition: transform var(--transition-base), opacity var(--transition-fast);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  .site-nav__list {
    display: none;
  }

  .site-header__inner {
    padding-inline: clamp(14px, 5vw, 20px);
    gap: var(--space-3);
  }

  .site-nav {
    flex: 0 0 auto;
    gap: 0;
  }

  .site-nav--mobile {
    position: absolute;
    inset: 100% 0 auto;
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    padding: var(--space-5) clamp(20px, 6vw, 32px) var(--space-6);
    box-shadow: 0 16px 30px rgba(24, 59, 86, 0.12);
  }

  .site-nav--mobile ul {
    gap: 0;
  }

  .site-nav--mobile li + li {
    border-top: 1px solid rgba(184, 149, 90, 0.22);
  }

  .site-nav--mobile a:not(.btn) {
    display: block;
    padding: 12px 0;
  }

  .rt-ribbon-inner {
    min-height: 28px;
    padding: 5px clamp(14px, 5vw, 20px);
    justify-content: center;
  }

  .rt-ribbon-inner > p {
    display: none;
  }

  .rt-ribbon-message {
    justify-content: center;
    text-align: center;
    line-height: 1.45;
  }
}

@media (max-width: 767px) {
  :root {
    --nav-height: 64px;
  }

  h1 {
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  h2 {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  h3 {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }

  .section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .section-header {
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }

  .section-title {
    font-size: clamp(1.75rem, 8vw, 2.15rem);
  }

  .section-lead {
    font-size: 1rem;
  }

  .card,
  .contact-panel {
    padding: var(--space-5);
  }

  .btn {
    max-width: 100%;
    min-height: 44px;
    padding: 10px 18px;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
  }

  .paper-block,
  .card,
  .portfolio-card {
    max-width: 100%;
  }

  /* Home */
  .home-hero {
    padding-top: var(--space-8);
    padding-bottom: var(--space-10);
  }

  .home-hero__grid {
    gap: var(--space-7);
  }

  .home-hero__title {
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .home-hero__lead {
    font-size: 1rem;
    line-height: 1.65;
  }

  .home-hero__ctas {
    align-items: stretch;
    gap: var(--space-4);
  }

  .home-hero__ctas .btn,
  .home-hero__ctas .link-arrow {
    width: 100%;
  }

  .home-hero__fineprint {
    font-size: 0.76rem;
    line-height: 1.55;
  }

  .home-hero__board {
    padding: var(--space-3);
    border-radius: 22px;
    overflow: hidden;
  }

  .home-hero__image-frame {
    aspect-ratio: 4 / 4.6;
    border-radius: 18px;
  }

  .home-hero__image {
    height: 100%;
    object-position: center;
  }

  .home-hero__seal {
    top: 10px;
    right: 8px;
    width: 88px;
    height: 88px;
    padding: 10px;
    transform: rotate(4deg);
  }

  .home-hero__seal-inner {
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    line-height: 1.35;
  }

  .home-hero__seal-inner span {
    font-size: 0.52rem;
  }

  .home-hero__shape-cobalt,
  .home-hero__shape-apricot {
    display: none;
  }

  .home-hero__notes {
    right: 10px;
    bottom: 10px;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }

  .home-hero__caption {
    align-items: flex-start;
    font-size: 0.72rem;
  }

  .home-facts__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: var(--space-4) clamp(16px, 5vw, 24px);
    text-align: center;
  }

  .home-facts__item {
    justify-content: center;
    padding: 7px 0;
    white-space: normal;
  }

  .home-facts__item + .home-facts__item {
    border-top: 1px solid rgba(184, 149, 90, 0.2);
  }

  .home-facts__dot {
    display: none;
  }

  .home-intro__grid,
  .home-birthday__grid,
  .home-corporate__grid,
  .home-poker__grid {
    gap: var(--space-5);
  }

  .home-intro__panel,
  .home-birthday__panel,
  .home-corporate__content .paper-block,
  .home-poker__media,
  .home-cta {
    padding: var(--space-5);
  }

  /* Shared inner-page heroes and cards */
  .services-hero,
  .consultation-hero,
  .contact-hero,
  .experience-hero,
  .concepts-hero,
  .team-hero,
  .approach-hero,
  .portfolio-hero,
  .privacy-hero {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .services-hero__title,
  .contact-hero__title,
  .concepts-hero__title,
  .team-hero__title,
  .approach-hero__title {
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .services-hero__grid,
  .consultation-hero__grid,
  .contact-hero__inner,
  .experience-hero__layout,
  .concepts-hero__inner,
  .team-hero__inner,
  .approach-hero__layout {
    gap: var(--space-6);
  }

  .services-hero__board {
    padding: var(--space-3);
    overflow: hidden;
    border-radius: 22px;
  }

  .services-hero__image-frame {
    border-radius: 18px;
  }

  .services-hero__note-card {
    top: 10px;
    right: 10px;
    max-width: min(190px, 66%);
    padding: 10px 12px;
    transform: none;
  }

  .services-hero__badge {
    left: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    white-space: normal;
  }

  .consultation-hero__board {
    padding: var(--space-3);
    overflow: hidden;
    border-radius: 22px;
  }

  .consultation-hero__image-frame {
    border-radius: 18px;
  }

  .consultation-hero__note-card {
    display: none;
  }

  .consultation-hero__seal {
    top: 10px;
    right: 10px;
    width: 88px;
    height: 88px;
    padding: 10px;
    transform: rotate(4deg);
  }

  .consultation-hero__seal-inner {
    font-size: 0.56rem;
    letter-spacing: 0.14em;
  }

  .consultation-hero__seal-inner span {
    font-size: 0.52rem;
  }

  .service-card,
  .consultation-card,
  .consultation-aside,
  .privacy-block,
  .tc-toc,
  .tc-cta__inner,
  .portfolio-cta__inner,
  .team-cta,
  .approach-cta,
  .experience-cta__block,
  .concepts-cta__inner {
    padding: var(--space-5);
  }

  .input-inline,
  .consultation-form__row {
    flex-direction: column;
  }

  .input-group--half {
    flex-basis: auto;
    width: 100%;
  }
}

@media (max-width: 599px) {
  .rt-ribbon {
    font-size: 0.64rem;
    letter-spacing: 0.14em;
  }

  .rt-ribbon-message > span:nth-of-type(n + 2),
  .rt-ribbon-dot {
    display: none;
  }

  .rt-brand {
    min-width: 0;
    max-width: calc(100vw - 72px);
    gap: 8px;
    padding: 6px 9px;
  }

  .rt-brand__monogram {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
  }

  .rt-brand__text {
    min-width: 0;
  }

  .rt-brand__name {
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    white-space: normal;
  }

  .rt-brand__tagline {
    overflow: hidden;
    font-size: 0.64rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .nav-toggle {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
  }

  .site-nav--mobile .btn {
    align-self: stretch;
    width: 100%;
  }

  .age-modal__content {
    margin-inline: var(--space-3);
  }

  .age-modal__actions,
  .cookie-banner__actions {
    flex-direction: column;
  }

  .age-modal__actions .btn,
  .cookie-banner__actions .btn {
    width: 100%;
  }

  .site-footer__inner {
    padding: var(--space-7) var(--space-4) var(--space-5);
  }

  .site-footer__meta {
    flex-direction: column;
    padding: 0 var(--space-4) var(--space-5);
  }
}

@media (max-width: 359px) {
  .container,
  .container-wide {
    padding-left: 14px;
    padding-right: 14px;
  }

  .section {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }

  .card,
  .contact-panel,
  .home-intro__panel,
  .home-birthday__panel,
  .home-corporate__content .paper-block,
  .home-poker__media,
  .home-cta {
    padding: var(--space-4);
  }

  .home-hero__kicker {
    font-size: 0.68rem;
    letter-spacing: 0.17em;
  }

  .home-hero__board {
    padding: 10px;
  }

  .home-hero__seal {
    width: 78px;
    height: 78px;
    padding: 8px;
  }
}