@font-face {
  font-family: Fraunces;
  src: url("fonts/fraunces.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url("fonts/gilroy-regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url("fonts/gilroy-semibold.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Gilroy;
  src: url("fonts/gilroy-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
:root {
  --ink: #0c1113;
  --cream: #f4f0e6;
  --purple: #7738eb;
  --lilac: #dec7ff;
  --plum: #492477;
  --white: #f8f4ee;
  --campaign-gutter: clamp(20px, 6.2vw, 90px);
  --serif: Fraunces, Georgia, serif;
  --sans: Gilroy, system-ui, sans-serif;
}
body { font: 400 clamp(14px, 1.22vw, 17px)/1.45 var(--sans); }
body :is(h1, h2, h3) { font-family: var(--serif); font-weight: 480; }
body :is(.wrap, .container) {
  width: min(calc(100% - var(--campaign-gutter) * 2), 1330px);
}
body :is(a, button, summary):focus-visible {
  outline: 2px solid #b789ff;
  outline-offset: 4px;
}
body a[href^="https://calendly.com/shutaproductions/discovery"],
body .campaign-film-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  min-height: 44px;
  padding: .65em 1.25em;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--plum);
  color: white !important;
  font: 600 clamp(13px, 1.05vw, 15px)/1.2 var(--sans);
  white-space: normal;
  text-decoration: none;
}
body a[href^="https://calendly.com/shutaproductions/discovery"]:hover,
body .campaign-film-link:hover { background: #351859; }
body :is(.hero, .topbar, .site-header, .footer) { background-color: var(--ink); }
body[data-campaign="industrial"] :is(.case-info h3, .intro h2, .section-heading h2) {
  font-family: var(--serif);
  font-weight: 480;
}
body[data-campaign="industrial"] :is(.eyebrow, .tab, .button) { font-family: var(--sans); }
body[data-campaign="industrial"] .hero:after {
  background: linear-gradient(90deg, #0c1113 4%, #0c1113ef 24%, #0c111390 49%, transparent 92%),
              linear-gradient(0deg, #0c1113dc, transparent 44%);
}
body[data-campaign="law"] :is(.eyebrow-line, .row-count, .process-no) { color: var(--lilac); }
body[data-campaign="law"] :is(.section-dark .section-index, .section-purple .section-index) { color: var(--lilac); }
.campaign-film-link { margin-block: .65rem; }
#campaign-cookie-dialog {
  box-sizing: border-box;
  width: min(calc(100% - 32px), 500px);
  max-height: calc(100% - 32px);
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid #d6cce0;
  border-radius: 6px;
  background: var(--cream);
  color: var(--ink);
}
#campaign-cookie-dialog::backdrop { background: #050b0e9e; }
#campaign-cookie-dialog h2 { margin: 0 0 .45em; font-size: clamp(26px, 4vw, 34px); }
#campaign-cookie-dialog p { margin: 0 0 1rem; }
.campaign-cookie-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.campaign-cookie-actions button, #campaign-cookie-settings {
  min-height: 44px;
  padding: .55em .9em;
  border-radius: 4px;
  cursor: pointer;
  font: 600 14px var(--sans);
}
.campaign-cookie-actions button { color: var(--plum); border: 1px solid var(--plum); background: none; }
.campaign-cookie-actions [value="allow"] { color: white; background: var(--plum); }
#campaign-cookie-settings { color: var(--white); border: 1px solid #b7a9be; background: transparent; }
.campaign-footer-settings { padding-block: .85rem; }
.campaign-mux-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 4px;
  background: #111;
}
.campaign-mux-player:focus-visible { outline: 2px solid #b789ff; }
body button.campaign-film-link { cursor: pointer; }
body .campaign-film-link[aria-expanded="true"] { background: #351859; }