/* Portfolio design system. Load this after styles.css, v5.css, and v6.css. */
:root {
  --type-family: Inter, Arial, Helvetica, sans-serif;
  --type-body-size: 16px;
  --type-body-leading: 1.6;
  --type-heading-weight: 650;
  --type-heading-tracking: -.02em;
  --type-label-size: 12px;
  --type-label-weight: 750;
  --type-button-size: 13px;
  --type-button-weight: 750;
  --type-button-tracking: .05em;
  --button-height: 44px;
  --button-padding-inline: 15px;
  --button-icon-size: 19px;
  --button-gap: 6px;
  --case-section-space: 32px;
  --case-surface-space: calc(var(--case-section-space) * 2);
  --case-cover-space: clamp(48px, 6vw, 96px);
  --case-cover-shadow: 0 12px 20px rgb(38 59 76 / 18%);
  --case-card-shadow: 0 8px 20px rgb(38 59 76 / 8%);
  --case-image-heading-space: 32px;
  --case-image-surface: var(--rangeme-theme);
  --case-list-gap: 32px;
  --case-list-gap-mobile: 24px;
  --case-insight-surface: var(--case-image-surface);
  --case-insight-gap: 24px;
  --case-insight-padding: 24px;
  --case-insight-radius: 10px;
  --project-thumbnail-padding: clamp(24px, 3vw, 40px);
  --project-thumbnail-padding-mobile: 16px;
  --project-image-radius: 8px;
  --text-link-underline-gap: 8px;
}

.v5-projects .v5-project-image,
.v5-projects .v5-project-image img {
  border-radius: var(--project-image-radius);
}

/* Give homepage project screens more space inside the shared blue canvas. */
.v5-projects .v5-project-image-contained {
  padding: var(--project-thumbnail-padding);
}

@media (max-width: 760px) {
  .v5-projects .v5-project-image-contained {
    height: clamp(200px, 65vw, 340px);
    padding: var(--project-thumbnail-padding-mobile);
  }
}

/* App actions pair the store badge with a text-only game link. */
.v5-game-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding-bottom: 6px;
}

.v5-game-actions .v5-store-link {
  display: block;
  flex: none;
  line-height: 0;
}

.v5-game-actions .v5-store-link img {
  display: block;
  width: 180px;
  max-width: 100%;
  height: auto;
  margin-left: -6px;
}

.v5-game-actions .ui-text-link {
  flex: none;
  margin-top: 0;
}

.ui-text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 3px 0;
  color: #414141;
  font-family: var(--type-family);
  font-size: var(--type-body-size);
  font-weight: 500;
  line-height: var(--type-body-leading);
  letter-spacing: .025em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.ui-text-link::before {
  content: "";
  position: absolute;
  left: -4px;
  /* Match View Work's content spacing without including the taller tap area. */
  bottom: calc(50% - .5lh - 3px - var(--text-link-underline-gap));
  width: calc(100% + 8px);
  aspect-ratio: 172 / 12;
  background: url('../assets/hero/view-work-scalloped-underline.svg') center / contain no-repeat;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.ui-text-link:is(:hover, :focus-visible)::before {
  opacity: 1;
  transform: translateY(0);
}

.ui-text-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--control-radius);
}

.ui-text-link .v5-link-arrow {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
}

.v6-view-work::before {
  bottom: calc(-1 * var(--text-link-underline-gap));
}

#games-title { scroll-margin-top: 100px; }

@media (max-width: 760px) {
  .v5-game-actions { gap: 8px; }
  .v5-game-actions .v5-store-link img {
    width: clamp(110px, 30vw, 140px);
  }
  .ui-text-link {
    min-height: 40px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-text-link::before { transition: none; }
}

/* Case study rhythm: adjacent text sections add up to 64px of space. */
.story-case .case-section {
  padding-top: var(--case-section-space);
  padding-bottom: var(--case-section-space);
}

/* Keep long case study titles inside their column beside the project summary. */
.story-case .campaign-hero-copy h1 {
  white-space: normal;
  overflow-wrap: break-word;
}

/* Rounded cover artwork needs equal blue space above and below the image. */
.campaign-case .case-cover--top-rounded img {
  border-radius: var(--project-image-radius) var(--project-image-radius) 0 0;
}

.campaign-case .case-cover--padded {
  padding-block: var(--case-cover-space);
}

.campaign-case .case-cover--padded img,
.campaign-case .case-cover--top-rounded img {
  filter: drop-shadow(var(--case-cover-shadow));
}

.plus-one-case .next-project a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 6px;
}

.plus-one-case .next-project strong > span {
  font: inherit;
  letter-spacing: inherit;
}

/* Full-width image sections scale to the page without cropping the artwork. */
.story-case .case-wide-image {
  width: 100%;
  max-width: 100%;
  margin-top: var(--case-section-space);
}

.story-case .case-wide-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* NielsenIQ reuses the campaign image-heading pattern and light-blue canvas. */
.story-case .niq-design-panel {
  padding-block: 0;
  background: var(--case-image-surface);
}

.story-case .niq-design-panel .campaign-image-heading {
  margin-top: 0;
  padding-top: var(--case-image-heading-space);
  background: inherit;
}

.story-case .niq-design-panel .case-wide-image {
  margin-top: 0;
}

.story-case .niq-journey-panel {
  padding-block: 0 var(--case-image-heading-space);
  background: var(--case-image-surface);
}

.story-case .niq-journey-panel img {
  background: transparent;
}

/* Research summaries keep readable findings inside the text content grid. */
.story-case .case-research-section {
  background: var(--case-insight-surface);
}

.story-case .case-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--case-insight-gap);
}

.story-case .case-insight-card {
  min-width: 0;
  padding: var(--case-insight-padding);
  border-radius: var(--case-insight-radius);
  background: var(--case-insight-surface);
}

.story-case .case-research-section .case-insight-card {
  background: var(--paper);
  box-shadow: var(--case-card-shadow);
}

.story-case .case-insight-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: var(--type-heading-weight);
  line-height: 1.25;
}

.story-case .case-insight-card p {
  margin: 0;
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.story-case .case-research-evidence {
  margin-top: var(--case-insight-gap);
}

.story-case .case-research-evidence summary {
  color: var(--accent);
  font-weight: var(--type-heading-weight);
  cursor: pointer;
}

.story-case .case-research-evidence summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.story-case .case-research-evidence a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.story-case .case-research-evidence ul {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding-left: 20px;
}

.story-case .case-research-evidence a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 600px) {
  .story-case .case-insight-grid {
    grid-template-columns: 1fr;
  }
}

/* All case-study artwork shares an accessible, closable zoom viewer. */
.case-artifact-trigger { display: block; cursor: zoom-in; }
.case-cover > .case-artifact-trigger { width: 100%; }
.case-artifact-trigger:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.case-artifact-dialog {
  box-sizing: border-box;
  width: min(1440px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  height: 90vh;
  height: 90dvh;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: var(--case-insight-radius);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}
.case-artifact-dialog[open] { display: flex; flex-direction: column; }
.case-artifact-dialog::backdrop { background: rgb(38 59 76 / 70%); }
.case-artifact-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
}
.case-artifact-heading { flex: 1; min-width: 0; }
.case-artifact-header h2 {
  margin: 0;
  font-family: var(--type-family);
  font-size: 20px;
  font-weight: var(--type-heading-weight);
  line-height: 1.25;
  letter-spacing: var(--type-heading-tracking);
}
.case-artifact-keyboard-help { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.case-artifact-toast {
  position: absolute;
  z-index: 1;
  bottom: 16px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 10px 16px;
  border-radius: var(--control-radius);
  box-shadow: var(--case-card-shadow);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.case-artifact-toast[hidden] { display: none; }
.case-artifact-close {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--button-height);
  height: var(--button-height);
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: var(--control-radius);
  box-shadow: 0 2px 0 var(--ink);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.case-artifact-close:is(:hover, :focus-visible) { background: var(--ink); color: #fff; }
.case-artifact-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.case-artifact-viewport {
  position: relative;
  box-sizing: border-box;
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: none;
  background: var(--case-image-surface);
}
.case-artifact-viewport::-webkit-scrollbar { display: none; }
.case-artifact-viewport:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.case-artifact-dialog[data-zoomed="true"] .case-artifact-viewport { cursor: grab; }
.case-artifact-dialog[data-dragging="true"] .case-artifact-viewport { cursor: grabbing; }
.case-artifact-stage { position: relative; }
.case-artifact-image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  max-width: none;
  max-height: none;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-select: none;
}
.case-artifact-dialog[data-shadow="true"] .case-artifact-image {
  filter: drop-shadow(var(--case-cover-shadow));
}
.case-artifact-image[hidden], .case-artifact-status[hidden] { display: none; }
.case-artifact-status { position: absolute; inset: 40% 16px auto; margin: 0; text-align: center; }
@media (max-width: 600px) {
  .case-artifact-dialog { width: calc(100% - 16px); max-width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .case-artifact-header { padding: 8px 16px; }
  .case-artifact-header h2 { font-size: 18px; }
}

.campaign-case .campaign-previous-experience {
  padding-top: 0;
}

.campaign-case .campaign-previous-experience .campaign-design-heading,
.campaign-case .campaign-solution-section .campaign-image-heading {
  padding-top: var(--case-image-heading-space);
}

.campaign-case .campaign-solution-section {
  padding-top: var(--case-section-space);
  padding-bottom: 0;
}

.campaign-case .campaign-solution-section .campaign-design-heading:not(.campaign-image-heading) {
  padding-top: 0;
}

/* Standalone solution text matches the 64px gap after other image surfaces. */
.campaign-case .campaign-solution-section.case-solution-text {
  padding-block: var(--case-surface-space);
}

.campaign-case .campaign-solution-section.case-solution-text .campaign-design-heading:not(.campaign-image-heading) {
  padding: 0;
}

.campaign-case .case-solution-text .campaign-solution-points {
  padding-bottom: 0;
}

.campaign-case .campaign-solution-section .campaign-design-heading.campaign-supplier-solution:not(.campaign-image-heading) {
  padding-top: calc(var(--case-section-space) * 2);
}

.campaign-case .campaign-solution-points {
  gap: var(--case-list-gap);
}

.campaign-case .campaign-solution-points strong {
  margin-bottom: 8px;
}

@media (max-width: 760px) {
  .campaign-case .campaign-solution-points {
    gap: var(--case-list-gap-mobile);
  }
}

body {
  font-family: var(--type-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.eyebrow, .section-label, .case-kicker, .case-num {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.v5-section-head h2, .v5-project h3, .v5-game-copy h3,
.v5-about h2, .v5-footer h2, .case-content h2 {
  font-weight: var(--type-heading-weight);
}

.contact-footer {
  background: var(--divider-color);
  color: #fff;
}

.contact-footer .v5-footer h2,
.contact-footer .v5-footer-description {
  color: #fff;
}

.contact-footer .v5-footer-bottom::before {
  top: 0;
  bottom: auto;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 1px;
  transform: none;
  background: rgba(255, 255, 255, .5);
}

/* Shared headline treatment; size and line height still follow each heading's role. */
:is(.v6-hero h1, .v5-section-head h2, .v5-project h3,
    .v5-game-copy h3, .v5-about h2, .v5-footer h2,
    .career-story h2, .plus-one-case .case-hero h1,
    .plus-one-case .case-content h2, .plus-one-case .case-content h3,
    .plus-one-case .result-section h2, .plus-one-case .next-project strong) {
  font-family: var(--type-family);
  letter-spacing: var(--type-heading-tracking);
  text-transform: none;
}

/* Case study section titles share one type scale and line spacing. */
.plus-one-case .case-content h2,
.plus-one-case .result-section h2 {
  font-size: clamp(35px, 5vw, 48px);
  line-height: 1.08;
  font-weight: var(--type-heading-weight);
}

/* One CTA component for navigation, project cards, and footers. */
:is(.nav .nav-cta, .v5-button, .v5-footer-cta).ui-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  width: auto;
  height: auto;
  min-height: var(--button-height);
  padding: 9px var(--button-padding-inline);
  border: 1.5px solid var(--ink);
  border-radius: var(--control-radius);
  box-shadow: 0 2px 0 var(--ink);
  background: #fff;
  color: var(--ink);
  font-family: var(--type-family);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  line-height: 1;
  letter-spacing: var(--type-button-tracking);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* Uppercase Inter sits high in its line box; one optical adjustment for every CTA. */
.ui-button__label {
  display: block;
  position: relative;
  top: 1px;
}

.nav .nav-cta.ui-button::after,
.v5-footer-cta.ui-button::after,
.ui-button .v5-link-arrow {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  flex: none;
}

:is(.nav .nav-cta, .v5-button, .v5-footer-cta).ui-button:is(:hover, :focus-visible) {
  background: var(--ink);
  color: #fff;
}

:is(.nav .nav-cta, .v5-button, .v5-footer-cta).ui-button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.v5-button.ui-button:focus-visible .v5-link-arrow {
  filter: brightness(0) invert(1);
}

/* Homepage contact CTA: outlined on the accent-blue surface. */
.contact-footer .v5-footer-cta.ui-button {
  border-color: #fff;
  box-shadow: 0 2px 0 #fff;
  background: transparent;
  color: #fff;
}

.contact-footer .v5-footer-cta.ui-button::after {
  background: url('../assets/Coffe_white.svg') center/contain no-repeat;
}

.contact-footer .v5-footer-cta.ui-button:is(:hover, :focus-visible) {
  background: #fff;
  color: var(--accent);
}

.contact-footer .v5-footer-cta.ui-button:is(:hover, :focus-visible)::after {
  background-image: url('../assets/Coffe_black.svg');
}

.contact-footer .v5-footer-cta.ui-button:focus-visible {
  outline-color: #fff;
}

@media (max-width: 680px) {
  :root {
    --type-button-size: 12px;
    --button-height: 40px;
    --button-padding-inline: 12px;
    --button-icon-size: 16px;
  }
}