/* =========================================================================
   MEDIA BEEF -- MAIN STYLESHEET
   Static rebuild design system. Single file, CSS custom properties.
   No external requests, no build step, no framework.
   Brand colors and type are carried over from the live mediabeef.com theme
   (assets/css/MB-styles.css) -- see docs/case-study-template.html for the
   content-authoring conventions that pair with this file.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. RESET
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

/* -------------------------------------------------------------------------
   1b. BRAND FONT (self-hosted Open Sans variable, latin subset -- the
   legacy theme's font-family, kept without any external request)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/open-sans-var.woff2") format("woff2");
}

/* -------------------------------------------------------------------------
   2. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Brand colors (captured from live site) */
  --color-primary: #ec5b35;       /* primary orange accent */
  --color-primary-dark: #c7431f;  /* AA-safe darker orange for text/buttons */
  --color-primary-darker: #a8380f;
  --color-charcoal: #343434;      /* headings / dark surfaces */
  --color-body: #4a4a4a;          /* body copy */
  --color-muted: #444444;         /* secondary text */
  --color-bg-light: #f1f1f1;      /* light section background */
  --color-peach: #fbdad1;         /* light peach/pink accent */
  --color-white: #ffffff;
  --color-border: #cccccc;
  --color-maroon: #a93d54;
  --color-purple: #5e1b76;

  /* Contact-band gradient (matches legacy .section.contact). Uses
     --color-primary-dark (not --color-primary) at the 0% stop so white
     text stays >= 4.5:1 across the entire band -- luminance decreases
     monotonically stop-to-stop, so the 0% stop is the contrast floor. */
  --gradient-contact: linear-gradient(
    61deg,
    var(--color-primary-dark) 0%,
    var(--color-maroon) 49%,
    var(--color-purple) 100%
  );

  /* Type -- self-hosted Open Sans (the legacy brand font), system fallback */
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 820px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 2px 10px rgba(52, 52, 52, 0.1);
  --shadow-card-hover: 0 14px 30px rgba(52, 52, 52, 0.16);
  --header-height: 84px;

  color-scheme: light;
}

/* -------------------------------------------------------------------------
   3. BASE TYPOGRAPHY
   ------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  color: var(--color-body);
  background: var(--color-white);
  line-height: 1.6;
  font-size: 17px;
}

h1,
h2,
h3,
h4 {
  color: var(--color-charcoal);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 1rem;
}

h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3.1rem);
}

h2 {
  font-size: clamp(1.6rem, 2.2vw + 1rem, 2.5rem);
}

h3 {
  font-size: 1.35rem;
}

h4 {
  font-size: 1.1rem;
}

p {
  margin: 0 0 1.15rem;
}

a {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

strong {
  color: var(--color-charcoal);
}

/* Focus visibility -- never removed, only re-styled */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-primary-darker);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Dark surfaces: the orange ring is only 1.92:1 on charcoal -- use white. */
.site-header a:focus-visible,
.site-header summary:focus-visible,
.site-footer a:focus-visible,
.page-hero a:focus-visible,
.hero-photo a:focus-visible,
.section-primary a:focus-visible,
.section-contact a:focus-visible,
.divider-band a:focus-visible {
  outline-color: var(--color-white);
}

/* Sticky header: keep skip-link and anchor targets out from under it */
:target,
#main-content {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-white);
  color: var(--color-charcoal);
  padding: 0.9rem 1.4rem;
  z-index: 200;
  font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* -------------------------------------------------------------------------
   4. LAYOUT HELPERS
   ------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 4.5rem 0;
}

.section-light {
  background: var(--color-bg-light);
}

.section-primary {
  /* --color-primary-dark, not --color-primary: white text at 4.73:1
     clears WCAG AA (4.5:1) for normal-size text; the pure brand orange
     only clears 3.43:1, which fails for anything but large headings. */
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.section-primary h2,
.section-primary h3 {
  color: var(--color-white);
}

.section-contact {
  background: var(--gradient-contact);
  color: var(--color-white);
}

.section-contact h2 {
  color: var(--color-white);
}

.text-center {
  text-align: center;
}

.eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary-darker);
  margin-bottom: 0.6rem;
}

.page-hero .eyebrow {
  color: var(--color-peach);
}

.section-primary .eyebrow,
.section-contact .eyebrow {
  /* White, not peach: peach-on-primary-dark and peach-on-orange both
     fall short of 4.5:1 for this small bold label; white clears 4.5:1
     against every color used across these three section backgrounds. */
  color: var(--color-white);
}

.section-intro {
  max-width: 760px;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-intro h2 {
  margin-bottom: 0.75rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, transform 0.1s ease;
  font-size: 1rem;
  line-height: 1.2;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-primary-darker);
  color: var(--color-white);
}

.btn-outline-dark {
  background: transparent;
  border-color: var(--color-charcoal);
  color: var(--color-charcoal);
}

.btn-outline-dark:hover {
  background: var(--color-charcoal);
  color: var(--color-white);
}

.btn-white {
  background: var(--color-white);
  color: var(--color-primary-darker);
}

.btn-white:hover {
  background: var(--color-charcoal);
  color: var(--color-white);
}

.btn-outline-white {
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn-outline-white:hover {
  background: var(--color-white);
  color: var(--color-primary-darker);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-row.center {
  justify-content: center;
}

/* -------------------------------------------------------------------------
   6. HEADER + NAVIGATION (zero-JS: checkbox hack + native <details>)
   ------------------------------------------------------------------------- */
.site-header {
  background: var(--color-charcoal);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-height);
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  height: 40px;
  width: auto;
}

/* Hidden checkbox driving the mobile menu */
.nav-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.nav-toggle-label span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--color-white);
}

.nav-toggle:focus-visible ~ .nav-toggle-label {
  outline: 3px solid var(--color-white);
  outline-offset: 2px;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav > ul > li > a {
  display: inline-block;
  padding: 0.85rem 1rem;
  color: var(--color-border);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.site-nav > ul > li > a:hover,
.site-nav > ul > li > a.is-current {
  color: var(--color-white);
  background: rgba(236, 91, 53, 0.18);
}

/* Services dropdown, built on native <details> -- works with JS off */
.nav-dropdown {
  position: relative;
}

.nav-dropdown > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem;
  color: var(--color-border);
  font-weight: 600;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown > summary::after {
  content: "";
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  padding: 3px;
  transform: rotate(45deg);
  margin-top: -3px;
}

.nav-dropdown > summary:hover {
  color: var(--color-white);
  background: rgba(236, 91, 53, 0.18);
}

.nav-dropdown > summary.is-current {
  color: var(--color-white);
  background: rgba(236, 91, 53, 0.18);
}

.nav-dropdown .sub-menu a.is-current {
  background: var(--color-bg-light);
  color: var(--color-primary-darker);
}

.nav-dropdown .sub-menu {
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card-hover);
  min-width: 200px;
  padding: 0.5rem;
}

.nav-dropdown:hover .sub-menu,
.nav-dropdown:focus-within .sub-menu,
.nav-dropdown[open] .sub-menu {
  display: flex;
}

.nav-dropdown .sub-menu a {
  display: block;
  padding: 0.65rem 0.85rem;
  color: var(--color-charcoal);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.nav-dropdown .sub-menu a:hover {
  background: var(--color-bg-light);
  color: var(--color-primary-darker);
}

@media (min-width: 861px) {
  /* the mobile-menu checkbox must leave the tab order at desktop widths */
  .nav-toggle {
    display: none;
  }

  .nav-dropdown .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.4rem;
  }
}

/* Signal the latched-open state of the zero-JS dropdown */
.nav-dropdown[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}

.nav-dropdown[open] > summary {
  color: var(--color-white);
  background: rgba(236, 91, 53, 0.18);
}

/* Mobile nav layout */
@media (max-width: 860px) {
  .nav-toggle-label {
    display: flex;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }

  /* Paint the menu surface only when open -- an empty absolutely
     positioned box still casts its box-shadow otherwise. */
  .nav-toggle:checked ~ .site-nav {
    background: var(--color-charcoal);
    box-shadow: var(--shadow-card-hover);
  }

  .site-nav > ul {
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem 1.5rem 1.5rem;
    gap: 0.25rem;
  }

  .nav-toggle:checked ~ .site-nav > ul {
    display: flex;
  }

  .site-nav > ul > li > a {
    padding: 0.9rem 0.5rem;
    width: 100%;
  }

  .nav-dropdown > summary {
    padding: 0.9rem 0.5rem;
  }

  .nav-dropdown .sub-menu {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.06);
    padding-left: 1rem;
  }

  .nav-dropdown .sub-menu a {
    color: var(--color-border);
  }

  .nav-dropdown .sub-menu a:hover {
    background: rgba(236, 91, 53, 0.18);
    color: var(--color-white);
  }

  .nav-dropdown:hover .sub-menu {
    /* disable hover-open on touch/mobile widths; rely on tap-to-open */
    display: none;
  }

  .nav-dropdown[open] .sub-menu {
    display: flex;
  }
}

/* -------------------------------------------------------------------------
   7. PAGE HERO (used on inner pages)
   ------------------------------------------------------------------------- */
.page-hero {
  background: var(--color-charcoal);
  color: var(--color-white);
  padding: 3.5rem 0 3rem;
  text-align: center;
}

.page-hero h1 {
  color: var(--color-white);
  margin-bottom: 0.5rem;
}

.page-hero .page-hero-meta {
  color: var(--color-peach);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 auto;
  max-width: 760px;
}

.page-hero .page-hero-lede {
  color: #e6e6e6;
  max-width: 760px;
  margin: 0.75rem auto 0;
}

/* -------------------------------------------------------------------------
   8. HOME HERO
   ------------------------------------------------------------------------- */
.hero {
  padding: 4.5rem 0 3.5rem;
  background: var(--color-white);
}

/* Legacy photographic hero band (rockboy-img.jpg carried over from the
   old theme). Overlay keeps white copy above 4.5:1 regardless of photo. */
.hero-photo {
  background: linear-gradient(rgba(52, 52, 52, 0.62), rgba(52, 52, 52, 0.62)),
    url(/assets/img/hero-primary.jpg) center/cover no-repeat;
  min-height: 480px;
  display: grid;
  place-items: center;
}

.hero.hero-photo h1,
.hero.hero-photo p.lede {
  color: var(--color-white);
}

.hero.hero-photo .tagline {
  color: var(--color-peach);
}

.hero-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.hero .tagline {
  color: var(--color-primary-darker);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
}

.hero p.lede {
  font-size: 1.15rem;
  color: var(--color-muted);
}

.hero-rule {
  width: 64px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 0 auto 1.5rem;
}

/* -------------------------------------------------------------------------
   9. CARD GRIDS
   ------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: 2rem;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Service / feature cards */
.card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  height: 100%;
}

a.card {
  text-decoration: none;
  color: inherit;
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.card-icon {
  width: 56px;
  height: 56px;
  margin: 1.75rem auto 0.5rem;
}

.card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-body {
  padding: 0.5rem 1.75rem 1.85rem;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-body h3 {
  margin-bottom: 0.65rem;
}

.card-body p {
  color: var(--color-body);
  margin-bottom: 0;
  flex: 1;
}

/* Image-less case cards: one deliberate placeholder component instead of
   ad-hoc inline-styled divs */
.card-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(
    120deg,
    var(--color-charcoal),
    var(--color-primary-darker)
  );
  display: grid;
  place-items: center;
}

.card-placeholder img {
  width: 64px;
  height: 64px;
  filter: brightness(0) invert(1);
}

/* Work / case study preview cards */
.work-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.work-card .card-body {
  text-align: left;
  padding: 1.5rem;
}

.work-card .card-meta {
  display: block;
  color: var(--color-primary-darker);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}

.work-card h3 {
  margin-bottom: 0.5rem;
}

.work-card p {
  color: var(--color-body);
  margin-bottom: 0;
}

/* On the solid-orange "Our Work" band, cards stay white for AA contrast */
.section-primary .work-card {
  color: var(--color-body);
}

/* -------------------------------------------------------------------------
   10. DIVIDER BAND ("We mean business")
   ------------------------------------------------------------------------- */
.divider-band {
  /* Legacy statement band (gorilla-img.jpg) with a contrast overlay */
  background: linear-gradient(rgba(52, 52, 52, 0.62), rgba(52, 52, 52, 0.62)),
    url(/assets/img/band-statement.jpg) center/cover no-repeat;
  padding: 5.5rem 0;
  text-align: center;
}

.divider-band p {
  color: var(--color-white);
  font-size: clamp(1.4rem, 2.4vw + 0.8rem, 2.4rem);
  font-weight: 700;
  margin: 0;
  max-width: 900px;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------
   11. ICON LIST (TDM 7-item list)
   ------------------------------------------------------------------------- */
.icon-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.75rem;
  margin: 2.5rem 0;
}

.icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
}

.icon-list-item .icon-badge {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-list-item .icon-badge img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.icon-list-item h3 {
  margin: 0.3rem 0 0.3rem;
  font-size: 1.1rem;
}

.icon-list-item p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-body);
}

/* -------------------------------------------------------------------------
   12. CALLOUT / PLATFORM BLOCK
   ------------------------------------------------------------------------- */
.callout {
  background: var(--color-white);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.callout h3,
.callout h2 {
  margin-bottom: 0.6rem;
}

.callout h2 {
  font-size: 1.35rem;
}

.callout-full {
  max-width: 100%;
}

.measure-center {
  max-width: 560px;
  margin: 0 auto 1.5rem;
}

.stack-top {
  margin-top: 2.5rem;
}

.callout p:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   13. AWARDS
   ------------------------------------------------------------------------- */
.award-block {
  background: var(--color-white);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1.85rem 2rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

.award-block:last-child {
  margin-bottom: 0;
}

.award-block h3 {
  margin-bottom: 0.5rem;
}

.award-year-group {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
}

.award-year-group h3 {
  color: var(--color-primary-darker);
  margin-bottom: 0.4rem;
}

.award-year-group .award-year-note {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

.award-list li {
  padding: 0.55rem 0;
  border-top: 1px solid var(--color-border);
}

.award-list li:first-child {
  border-top: 0;
}

.award-thumb-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.award-thumb-row figure {
  margin: 0;
}

.award-thumb-row img {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.award-thumb-row figcaption {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 0.4rem;
}

.attribution-note {
  font-size: 0.9rem;
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  margin-top: 3rem;
}

/* -------------------------------------------------------------------------
   13b. STAT ROW (headline figures above the results box on case pages)
   ------------------------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
}

.stat {
  border-top: 4px solid var(--color-primary);
  padding-top: 0.85rem;
}

.stat-value {
  display: block;
  font-size: clamp(1.8rem, 3vw + 0.5rem, 2.6rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--color-charcoal);
}

.stat-label {
  display: block;
  font-size: 0.9rem;
  color: var(--color-muted);
  margin-top: 0.3rem;
}

/* -------------------------------------------------------------------------
   14. RESULTS BOX (case studies + program pages)
   ------------------------------------------------------------------------- */
.results-box {
  background: var(--color-bg-light);
  border-left: 5px solid var(--color-primary-dark);
  border-radius: var(--radius-md);
  padding: 2rem 2.25rem;
}

.results-box h2 {
  margin-bottom: 1rem;
}

.results-box ul li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.6rem;
}

.results-box ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-primary-dark);
}

/* Generic bullet list used in body copy ("what this looks like") */
.list-check li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.7rem;
}

.list-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-primary);
}

/* -------------------------------------------------------------------------
   15. CASE STUDY BODY
   ------------------------------------------------------------------------- */
.case-body {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.case-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
}

.case-gallery figure {
  margin: 0;
}

.case-gallery img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.case-gallery figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* Phone-screen gallery (app case studies) -- natural aspect, no crop */
.case-gallery-phones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
}

.case-gallery-phones figure {
  margin: 0;
}

.case-gallery-phones img {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  width: 100%;
  height: auto;
}

.case-gallery-phones figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* Campaign slideshow -- pure CSS scroll-snap, works with JS disabled */
.slideshow {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  margin: 2.5rem 0 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.slideshow figure {
  margin: 0;
  flex: 0 0 min(520px, 85%);
  scroll-snap-align: start;
}

.slideshow img {
  width: 100%;
  height: 420px;
  object-fit: contain;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.slideshow figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.slideshow-hint {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 2rem;
}

/* Portrait app screens shown in a 4/3 card slot without decapitation */
.work-card img.img-contain {
  object-fit: contain;
  background: var(--color-bg-light);
  padding: 0.9rem 0;
}

.case-nav-back {
  margin-top: 3rem;
  text-align: center;
}

/* -------------------------------------------------------------------------
   16. CONTACT ITEMS
   ------------------------------------------------------------------------- */
.contact-items {
  display: grid;
  gap: 1.25rem;
  max-width: 420px;
  margin: 2rem auto 0;
  text-align: left;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.contact-item img {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.contact-item a {
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
}

.contact-item a:hover {
  text-decoration: underline;
}

/* Contact page (light background variant) */
.contact-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: 2.5rem;
  max-width: 480px;
  margin: 0 auto;
}

.contact-card .contact-item a,
.contact-card .contact-item span {
  color: var(--color-charcoal);
}

.contact-card .contact-item {
  margin-bottom: 0.25rem;
}

.checklist-box {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: 2rem 2.25rem;
}

.checklist-box ol {
  counter-reset: item;
}

.checklist-box ol li {
  counter-increment: item;
  position: relative;
  padding: 0.5rem 0 0.5rem 2.25rem;
}

.checklist-box ol li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: var(--color-white);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------------------
   17. FOOTER
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-charcoal);
  color: var(--color-border);
  padding: 3.5rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
}

.footer-col p {
  color: var(--color-border);
}

.footer-brand img {
  height: 34px;
  margin-bottom: 1rem;
}

.footer-brand p {
  font-size: 0.95rem;
  max-width: 320px;
}

.footer-col .footer-heading {
  color: var(--color-white);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.footer-col ul li {
  margin-bottom: 0.6rem;
}

.footer-col a {
  color: var(--color-border);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

.footer-bottom p {
  margin: 0;
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

/* -------------------------------------------------------------------------
   18. 404 PAGE
   ------------------------------------------------------------------------- */
.error-page {
  padding: 6rem 0;
  text-align: center;
}

.error-page .error-code {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  color: var(--color-primary-dark);
  margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------------------
   19a. RELATED WORK LINK LIST (service pages, case studies)
   ------------------------------------------------------------------------- */
.related-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.related-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.4rem;
  text-decoration: none;
  color: var(--color-charcoal);
  font-weight: 700;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.related-link:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
}

.related-link::after {
  content: "";
  border: solid var(--color-primary-dark);
  border-width: 0 2px 2px 0;
  padding: 4px;
  transform: rotate(-45deg);
  flex-shrink: 0;
}

.service-body {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.service-body .lede {
  font-size: 1.15rem;
  color: var(--color-muted);
}

/* -------------------------------------------------------------------------
   19. RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .section {
    padding: 3rem 0;
  }

  body {
    font-size: 16px;
  }

  .results-box,
  .callout,
  .checklist-box {
    padding: 1.5rem;
  }
}

@media (max-width: 400px) {
  .header-inner {
    min-height: 68px;
  }

  .brand img {
    height: 32px;
  }
}