/* ============================================================
   Ops Czar — global styles
   Brand tokens live in :root. Everything else in the page is
   inline-styled per element (kept from the original design so
   individual tweaks stay local); this file holds the resets,
   the pieces that can't be inlined (keyframes, pseudo-states),
   and the reusable component states (button/nav hovers).
   ============================================================ */

/* ============================================================
   Self-hosted fonts — WOFF2, latin + latin-ext subsets.
   Files live in /fonts/ relative to the site root.
   Variable-font ranges: Figtree 300–900, Lora 400–700.
   ============================================================ */

/* Figtree (variable weight 300–900) — latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree (variable weight 300–900) — latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Lora (variable weight 400–700) — latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora (variable weight 400–700) — latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Mono 700 — latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/spacemono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Mono 700 — latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/spacemono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper:        #F5F2EC;  /* page background            */
  --paper-warm:   #EFEBE3;  /* alt card background        */
  --ink:          #1C1C1A;  /* near-black headings        */
  --body:         #3A3632;  /* body copy                  */
  --muted:        #6B6560;  /* secondary / muted copy     */
  --muted-dark:   #9B9590;  /* muted copy on dark bg      */
  --line:         #DDD9D0;  /* hairline borders           */
  --line-warm:    #E8E4DC;  /* faint numerals / dividers  */
  --dark:         #1C1C1A;  /* dark section background     */
  --dark-line:    #2C2C29;  /* borders on dark bg         */
  --terra:        #B85C38;  /* terracotta accent          */
  --terra-hover:  #a34f2f;  /* accent, hover state        */
  --max:          1180px;   /* content max width          */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--paper); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--terra); color: var(--paper); }

/* form fields */
input:focus,
textarea:focus { outline: none; border-color: var(--terra) !important; }
input::placeholder,
textarea::placeholder { color: var(--muted); opacity: 0.7; }

/* blinking terminal caret in the wordmark */
@keyframes ocblink { 0%, 48% { opacity: 1; } 52%, 100% { opacity: 0; } }
.oc-caret {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  background: var(--terra);
  margin-left: 0.14em;
  animation: ocblink 1.1s step-end infinite;
}

/* primary terracotta button / CTA */
.btn-primary { transition: background 0.15s ease; }
.btn-primary:hover { background: var(--terra-hover) !important; }

/* nav link underline reveal */
.nav-link { border-bottom: 1px solid transparent; transition: border-color 0.15s ease; }
.nav-link:hover { border-bottom-color: var(--terra); }

/* ---- logo carousel ---------------------------------------- */
.logo-viewport { overflow: hidden; }
.logo-track {
  display: flex;
  transition: transform 0.7s ease;
  will-change: transform;
}
.logo-page {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
}
.logo-cell {
  display: flex;
  align-items: center;
  min-height: 56px;
  flex: 0 1 auto;
}
.logo-cell img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
}

/* ---- hero image: text wraps around it, book-style --------- */
.hero-cords {
  float: right;
  width: clamp(300px, 48%, 560px);
  height: auto;
  shape-outside: url('../images/cords-terra.png');
  shape-image-threshold: 0.4;
  shape-margin: 26px;
  margin: 0 -20px 6px 6px;
}
.hero-cords.hero-cords-fade {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hero-cords.hero-cords-fade.is-loaded {
  opacity: 1;
}
@media (max-width: 720px) {
  .hero-cords {
    float: none;
    width: 78%;
    max-width: 420px;
    shape-outside: none;
    margin: 8px 0 32px;
  }
}

/* ---- inline body-copy links --------------------------------- */
.body-link {
  color: var(--terra);
  text-decoration: underline;
  text-decoration-color: rgba(184, 92, 56, 0.35);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.body-link:hover,
.body-link:focus-visible {
  color: var(--terra-hover);
  text-decoration-color: currentColor;
}

/* ---- ghost button on dark sections ------------------------ */
.btn-ghost-dark { transition: border-color 0.15s ease; }
.btn-ghost-dark span { transition: transform 0.15s ease; }
.btn-ghost-dark:hover { border-color: var(--terra) !important; }
.btn-ghost-dark:hover span { transform: translateX(3px); }

/* ---- case-study screen flipper (work/*.html) ------
   Markup lives in the case-study page; js/case-study.js drives
   the flip + lightbox. Everything here is non-inlineable:
   hover/active states, transitions, keyframes, media queries. */
.pac-flip-grid {
  display: grid;
  grid-template-columns: minmax(min(100%, 280px), 1fr) minmax(min(100%, 380px), 1.8fr);
  gap: clamp(36px, 5vw, 56px);
  align-items: center;
}
@media (max-width: 900px) {
  .pac-flip-grid { grid-template-columns: 1fr; }
}

.pac-list-btn {
  display: flex;
  align-items: baseline;
  gap: 14px;
  text-align: left;
  background: none;
  border: none;
  font-family: 'Figtree', sans-serif;
  border-left: 2px solid rgba(245, 242, 236, 0.12);
  padding: 10px 0 10px 16px;
  cursor: pointer;
  transition: border-color 0.3s ease;
}
.pac-list-btn .pac-num {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
  transition: color 0.3s ease;
}
.pac-list-btn .pac-label {
  color: var(--muted-dark);
  font-weight: 400;
  font-size: 15.5px;
  transition: color 0.3s ease;
}
.pac-list-btn:hover .pac-label { color: var(--paper); }
.pac-list-btn.active { border-left-color: var(--terra); }
.pac-list-btn.active .pac-num { color: var(--terra); }
.pac-list-btn.active .pac-label { color: var(--paper); font-weight: 600; }

.pac-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid rgba(245, 242, 236, 0.3);
  border-radius: 16px;
  padding: 6px 14px 6px 12px;
  color: var(--muted-dark);
  font-family: 'Figtree', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pac-toggle-icon { font-size: 10px; line-height: 1; }
.pac-toggle:hover { border-color: var(--terra); color: var(--terra); }

.pac-stage {
  perspective: 1800px;
  perspective-origin: 30% 45%;
  cursor: zoom-in;
  display: flex;
  justify-content: center;
  padding: 30px 0 40px 20px;
}
.pac-rack {
  position: relative;
  width: min(520px, 100%);
  aspect-ratio: 4 / 3;
  transform-style: preserve-3d;
}
.pac-card {
  position: absolute;
  inset: 0;
  margin: 0;
  transform-origin: 0% 50%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(245, 242, 236, 0.16);
  background: var(--paper);
  box-shadow: -14px 18px 34px rgba(0, 0, 0, 0.4);
  transition: transform 0.7s ease, opacity 0.7s ease, box-shadow 0.7s ease;
}
.pac-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  filter: brightness(0.65);
  transition: filter 0.7s ease;
}
.pac-card.is-front { box-shadow: -26px 30px 60px rgba(0, 0, 0, 0.55); }
.pac-card.is-front img { filter: none; }
.pac-rack.no-anim .pac-card,
.pac-rack.no-anim .pac-card img { transition: none; }

.pac-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: rgba(28, 28, 26, 0.82);
  border: 1px solid rgba(245, 242, 236, 0.25);
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  font-size: 17px;
  line-height: 1;
}
.pac-card.is-front .pac-zoom { display: flex; }

@keyframes pacFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.pac-note-in { animation: pacFadeIn 0.45s ease; }

/* ---- case-study lightbox ---------------------------------- */
.pac-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 19, 18, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  animation: pacFadeIn 0.25s ease;
}
.pac-lightbox[hidden] { display: none; }
.pac-lightbox-head {
  width: min(980px, 100%);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.pac-lightbox-close {
  background: none;
  border: 1px solid rgba(245, 242, 236, 0.3);
  border-radius: 18px;
  width: 34px;
  height: 34px;
  color: var(--paper);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: 'Figtree', sans-serif;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pac-lightbox-close:hover { border-color: var(--terra); color: var(--terra); }
.pac-lightbox-scroll {
  width: min(980px, 100%);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid rgba(245, 242, 236, 0.2);
  background: var(--paper);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
  cursor: auto;
}
.pac-lightbox-scroll img { width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  .pac-card,
  .pac-card img,
  .pac-list-btn,
  .pac-list-btn .pac-num,
  .pac-list-btn .pac-label { transition: none; }
  .pac-note-in,
  .pac-lightbox { animation: none; }
}

/* keep the 3D stack from causing horizontal scroll on phones */
.pac-flip-section { overflow-x: hidden; overflow-x: clip; }
.pac-stage:focus-visible { outline: 2px solid var(--terra); outline-offset: 4px; }
.pac-lightbox-scroll:focus-visible { outline: 2px solid var(--terra); }
@media (max-width: 900px) {
  .pac-stage { padding: 20px 0 20px 10px; }
}

/* ============ Service detail popup (services.html) ============ */
[data-svc-card].svc-ready { cursor: pointer; position: relative; transition: background-color 0.18s ease; }
[data-svc-card].svc-ready:hover,
[data-svc-card].svc-ready:focus-visible { background-color: #EFEBE3 !important; }
[data-svc-card].svc-ready:focus-visible { outline: 2px solid var(--terra); outline-offset: -2px; }
.svc-more { margin-top: 14px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--terra); }
.svc-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.svc-scrim { position: absolute; inset: 0; background: rgba(28, 28, 26, 0.55); opacity: 0; transition: opacity 0.3s ease; }
.svc-overlay.svc-open .svc-scrim { opacity: 1; }
.svc-panel { position: relative; width: min(620px, 100%); max-height: min(84vh, 760px); overflow: auto; background: #F5F2EC; border: 1px solid #DDD9D0; box-shadow: 0 30px 80px rgba(28, 28, 26, 0.35); padding: clamp(28px, 4.5vw, 48px); transform-origin: top left; }
.svc-panel.svc-anim { transition: transform 0.4s cubic-bezier(0.22, 0.75, 0.25, 1); }
.svc-panel:focus { outline: none; }
.svc-panel-inner { opacity: 0; transition: opacity 0.2s ease; }
.svc-overlay.svc-open .svc-panel-inner { opacity: 1; transition-delay: 0.16s; }
.svc-panel-num { display: block; font-family: 'Lora', serif; font-weight: 700; font-size: 56px; line-height: 0.9; color: #E8E4DC; letter-spacing: -0.04em; margin: 0 0 18px; }
.svc-panel-rule { width: 36px; height: 2px; background: var(--terra); margin: 0 0 18px; }
.svc-panel h2 { margin: 0 0 20px; font-family: 'Lora', serif; font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -0.03em; color: #1C1C1A; }
.svc-panel-inner p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; color: #3A3632; }
.svc-panel-cta { display: inline-block; margin-top: 14px; text-decoration: none; background: var(--terra); color: #F5F2EC; padding: 14px 26px; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; }
.svc-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 40px; height: 40px; border: 0; background: transparent; color: #6B6560; font-size: 26px; line-height: 1; cursor: pointer; }
.svc-close:hover { color: #1C1C1A; }
.svc-close:focus-visible { outline: 2px solid var(--terra); }
.svc-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .svc-scrim,
  .svc-panel-inner,
  .svc-panel.svc-anim { transition: none; }
}

/* ============ Intake form (index.html) ============ */
.intake-field { transition: border-color 0.15s ease; }
.intake-field:hover { border-color: #6B6560 !important; }
.intake-field:focus { outline: none; border-color: var(--terra) !important; }
.intake-field[aria-invalid="true"] { border-color: var(--terra) !important; }
.intake-field::placeholder { color: #6B6560; }
.intake-error { font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--terra); }
/* Keep dark-field text legible if the browser autofills */
.intake-field:-webkit-autofill,
.intake-field:-webkit-autofill:hover,
.intake-field:-webkit-autofill:focus {
  -webkit-text-fill-color: #F5F2EC;
  transition: background-color 5000s ease-in-out 0s;
}

/* Success/error banner: fades and rises in, avatar arrives a beat later. */
.intake-status { opacity: 0; transform: translateY(10px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.intake-status.is-visible { opacity: 1; transform: translateY(0); }
.intake-status #intake-status-avatar { opacity: 0; transform: scale(0.8); transition: opacity 0.45s ease 0.18s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s; }
.intake-status.is-visible #intake-status-avatar { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .intake-status,
  .intake-status #intake-status-avatar { transition: none; opacity: 1; transform: none; }
}

/* ============ Page transitions (all pages) ============ */
/* Exit wipe: ink panel sweeps in from the left, terracotta leading edge. */
.oc-wipe { position: fixed; inset: 0; z-index: 2000; background: rgba(28, 28, 26, 0.88); transform: translateX(-102%); pointer-events: none; will-change: transform; }
.oc-wipe::after { content: ""; position: absolute; top: 0; right: 0; width: 3px; height: 100%; background: var(--terra); }
.oc-wipe.oc-wipe-in { transform: translateX(0); transition: transform 0.26s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.1s linear; }
/* Once fully covering, go opaque so the document swap is invisible behind it. */
.oc-wipe.oc-wipe-solid { background: #1C1C1A; }
/* Entrance cover: set pre-paint by the inline head snippet, swept out by js/transitions.js.
   Starts opaque (hides the swap), turns translucent as it sweeps away. */
html.oc-entering::after { content: ""; position: fixed; inset: 0; z-index: 2000; background: #1C1C1A; border-left: 3px solid var(--terra); pointer-events: none; }
html.oc-entering.oc-reveal::after { transform: translateX(103%); background: rgba(28, 28, 26, 0.88); transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1) 0.03s, background-color 0.12s linear 0.03s; }
/* Cross-document view transition: the browser freezes the old page's last frame
   (our opaque panel) on screen until the new page is ready to paint, eliminating
   the blank inter-document frame entirely. Near-instant swap — the visible motion
   stays with the wipe/reveal panels above. Unsupported browsers ignore this. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.05s; }
@media (prefers-reduced-motion: reduce) {
  .oc-wipe,
  html.oc-entering::after { display: none; }
  /* Keep the paint-hold (it prevents flashes) but remove all animation. */
  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ─── Hamburger button (desktop: hidden) ────────────── */
.oc-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5.5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.oc-ham-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
              opacity    0.18s ease,
              background 0.28s ease;
}

/* ─── Mobile nav: right-side drawer + scrim (≤ 719px) ── */
@media (max-width: 719px) {
  @keyframes oc-link-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: none; }
  }

  /* Header stays above drawer and scrim */
  header { z-index: 600 !important; }

  /* Show hamburger */
  .oc-hamburger { display: flex; }

  /* Bars morph into X */
  .oc-hamburger.is-open .oc-ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .oc-hamburger.is-open .oc-ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
  .oc-hamburger.is-open .oc-ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Scrim — tap anywhere outside the drawer to dismiss */
  .oc-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 490;
    background: rgba(28, 28, 26, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
  }
  body.oc-nav-open .oc-nav-scrim { opacity: 1; pointer-events: auto; }

  /* Right-side drawer panel */
  .oc-nav-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(76vw, 300px) !important;
    z-index: 500;
    background: var(--ink);
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center;
    gap: 0 !important;
    padding: 0 clamp(28px, 7vw, 48px) !important;
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }
  .oc-nav-links.is-open { transform: translateX(0); pointer-events: auto; }

  /* Drawer link styles */
  .oc-nav-links a {
    display: block !important;
    width: 100% !important;
    font-size: clamp(22px, 6vw, 30px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--paper) !important;
    text-decoration: none !important;
    border: none !important;
    border-top: 1px solid var(--dark-line) !important;
    white-space: normal !important;
    padding: 18px 0 !important;
    line-height: 1.1 !important;
  }
  .oc-nav-links a:first-child { border-top: none !important; }
  .oc-nav-links a:hover,
  .oc-nav-links a:focus { color: var(--terra) !important; }

  /* Stagger-in animation */
  .oc-nav-links.is-open a:nth-child(1) { animation: oc-link-in 0.3s ease 0.15s both; }
  .oc-nav-links.is-open a:nth-child(2) { animation: oc-link-in 0.3s ease 0.22s both; }
  .oc-nav-links.is-open a:nth-child(3) { animation: oc-link-in 0.3s ease 0.29s both; }

  /* Scroll lock while drawer is open */
  body.oc-nav-open { overflow: hidden !important; }
}

@media (max-width: 719px) and (prefers-reduced-motion: reduce) {
  .oc-nav-links, .oc-ham-bar, .oc-nav-scrim { transition: none !important; }
  .oc-nav-links.is-open a { animation: none !important; }
}