/* 1. Custom properties / tokens */
:root {
  --color-bg: #fff9f3;
  --color-surface: #ffffff;
  --color-text: #2b2621;
  --color-text-muted: #5e554d;
  --color-brand-red: #c81d14;
  --color-brand-red-hover: #a91710;
  --color-brand-olive: #6f8728;
  --color-border: #e4dad1;
  --color-focus: #2b2621;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --space-11: 120px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --container-max: 1200px;
  --text-measure: 44rem;
  --transition-fast: 150ms ease;

  /* v0.6 motion + smart-header tokens */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-move: 220ms;
  --logo-w: 180px;          /* Brand minimum visible lockup width */
  --logo-w-compact: 180px;  /* never below the 180px minimum */
  --header-pad: 10px;
  --header-pad-compact: 6px;
  --header-compact-h: 90px; /* used for anchor offset */
}

/* 2. Reset / global element defaults */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-compact-h) + 12px);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
}

p,
h1,
h2,
h3 {
  margin-block-start: 0;
}

p:last-child,
h1:last-child,
h2:last-child,
h3:last-child {
  margin-block-end: 0;
}

/* 3. Typography */
h1,
h2,
h3 {
  color: var(--color-text);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h1 {
  max-width: 15ch;
  margin-block-end: var(--space-5);
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
}

h2 {
  max-width: 18ch;
  margin-block-end: var(--space-5);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 780;
  line-height: 1.1;
}

h3 {
  margin-block-end: var(--space-3);
  font-size: clamp(1.15rem, 1.6vw, 1.32rem);
  font-weight: 750;
  line-height: 1.25;
}

p {
  margin-block-end: var(--space-4);
}

.eyebrow {
  margin-block-end: var(--space-4);
  color: var(--color-brand-red);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow--inverse {
  color: var(--color-surface);
}

/* 4. Layout primitives */
.container {
  width: calc(100% - 32px);
  max-width: var(--container-max);
  margin-inline: auto;
}

.section {
  padding-block: var(--space-8);
}

.section-heading {
  max-width: 48rem;
  margin-block-end: var(--space-7);
}

/* 5. Component / section styles */
.skip-link {
  position: fixed;
  z-index: 100;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  padding: var(--space-3) var(--space-4);
  transform: translateY(-160%);
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-surface);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  z-index: 50;
  inset-block-start: 0;
  border-bottom: 1px solid rgba(43, 38, 33, 0.08);
  background: var(--color-bg);
  transition: transform var(--header-move) var(--ease-out),
    background-color var(--header-move) ease-out,
    border-color var(--header-move) ease-out,
    box-shadow var(--header-move) ease-out;
}

/* Compact: semi-opaque warm cream, restrained blur, hairline edge. Not a glass card. */
.site-header.is-compact {
  border-bottom-color: rgba(43, 38, 33, 0.1);
  background: rgba(255, 249, 243, 0.91);
  box-shadow: 0 1px 2px rgba(43, 38, 33, 0.05);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-compact {
    background: rgba(255, 249, 243, 0.97);
  }
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

/* A focused control must never be translated off-screen. Raised specificity so
   it beats .site-header.is-hidden regardless of source order. */
.site-header:focus-within,
.site-header.is-hidden:focus-within {
  transform: none;
}

.site-header__inner {
  width: calc(100% - 16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--header-pad);
  transition: padding-block var(--header-move) var(--ease-out);
}

.site-header.is-compact .site-header__inner {
  padding-block: var(--header-pad-compact);
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 44px;
  align-items: center;
  text-decoration: none;
}

.brand__mark {
  width: var(--logo-w);
  max-width: none;
  height: auto;
  transition: width var(--header-move) var(--ease-out);
}

.site-header.is-compact .brand__mark {
  width: var(--logo-w-compact);
}

.header-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.header-cta__full {
  display: none;
}

/* Hero */
.hero {
  padding-block-start: var(--space-8);
}

.hero__grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.hero__copy {
  max-width: 44rem;
}

.hero__body {
  max-width: 40rem;
  margin-block-end: var(--space-6);
  color: var(--color-text-muted);
  font-size: 1.08rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/*
  Free-standing mascot composition. The single flat brand disc is a CSS-only
  approved-palette field used for separation behind the transparent artwork.
  It is intentionally not a card: no border, no card radius, no shadow.
*/
.hero__visual {
  position: relative;
  display: flex;
  width: fit-content;
  margin-inline: auto;
}

.hero__visual::before {
  content: "";
  position: absolute;
  inset-block-end: 3%;
  inset-inline-start: 50%;
  width: 100%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--color-border);
}

.hero__mascot {
  position: relative;
  width: min(76vw, 310px);
}

/*
  Origin story. Shares the warm cream page surface with the hero above it, so a
  single hairline rule carries the section boundary. No new colour, gradient,
  panel, card, or image is introduced: the hero Argus directly above remains the
  visual anchor for this story.
*/
.story {
  border-block-start: 1px solid var(--color-border);
}

.story__grid {
  display: grid;
  gap: var(--space-5);
}

.story__lead h2 {
  max-width: 16ch;
  margin-block-end: 0;
}

.story__body p {
  max-width: 38rem;
  color: var(--color-text-muted);
  font-size: 1.04rem;
}

/* Ordinary supporting sentence with subtle typographic emphasis only.
   Deliberately not a quote, testimonial, badge, or callout treatment. */
.story__body .story__emphasis {
  margin-block-start: var(--space-5);
  margin-block-end: 0;
  color: var(--color-text);
  font-weight: 650;
}

/*
  Documentary founder-story photograph. The illustrated Argus in the hero is the
  brand identity; this is the real dog, so it stays quiet beside it: no card, no
  border, no shadow, no overlay, no caption. The full approved 4:5 frame is
  always shown - never object-fit cropped - so the ears, muzzle, tongue and bowl
  context all remain visible at every width.
*/
.story__media {
  width: min(100%, 480px);
  margin: 0;
  justify-self: center;
}

.story__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/*
  The three principles sit inside the story section as a subordinate
  typographic band, not a second major section. Deliberately unlike the 01/02/03
  operational grid: no numbers, no icons, no cards, no background panels, no
  shadows, and no column dividers - a thin rule and compact padding only.
*/
.story__principles {
  display: grid;
  gap: 0;
  margin-block-start: var(--space-7);
}

.principle {
  padding-block: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--color-border);
}

.principle h3 {
  margin-block-end: var(--space-2);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.principle p {
  max-width: 30rem;
  margin-block-end: 0;
  color: var(--color-text-muted);
  font-size: 0.98rem;
}

/* Product development / editorial section */
.development {
  background: var(--color-surface);
}

.editorial {
  display: grid;
  gap: var(--space-5);
}

.editorial__lead h2 {
  max-width: 16ch;
  margin-block-end: 0;
}

.editorial__body p {
  max-width: 38rem;
  color: var(--color-text-muted);
  font-size: 1.04rem;
}

/* Ordinary supporting sentence with subtle typographic emphasis only.
   Deliberately not a quote, testimonial, badge, or callout treatment. */
.editorial__body .editorial__aside {
  margin-block-start: var(--space-5);
  margin-block-end: 0;
  color: var(--color-text);
  font-weight: 650;
}

/* Approach */
.approach-grid {
  display: grid;
  gap: 0;
}

.approach-item {
  padding-block: var(--space-5) var(--space-6);
  border-block-start: 1px solid var(--color-border);
}

.approach-item:last-child {
  border-block-end: 1px solid var(--color-border);
}

.approach-item__number {
  margin-block-end: var(--space-4);
  color: var(--color-brand-red);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}

.approach-item p:last-child {
  max-width: 28rem;
  color: var(--color-text-muted);
}

/* Partnerships */
.partnership-panel {
  max-width: var(--container-max);
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-brand-red);
  color: var(--color-surface);
  /* Soft ambient elevation, not a drop shadow. Two low-opacity diffuse layers
     with minimal offset and no spread, so there is no visible shadow edge.
     Static only: no hover elevation, no animated shadow, no inset, no tint. */
  box-shadow:
    0 8px 28px rgba(43, 38, 33, 0.07),
    0 2px 10px rgba(43, 38, 33, 0.04);
}

.partnership-panel h2 {
  max-width: 20ch;
  color: var(--color-surface);
}

.partnership-panel__body {
  max-width: 46rem;
  margin-block-end: var(--space-6);
  font-size: 1.04rem;
}

.partnership-panel__support {
  margin-block-start: var(--space-5);
  margin-block-end: 0;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
}

.partnership-panel__support a {
  font-weight: 700;
}

/* Follow / social */
.follow__inner {
  display: grid;
  gap: var(--space-6);
  align-items: end;
}

.follow__copy {
  max-width: 44rem;
}

.follow__copy > p:last-child {
  color: var(--color-text-muted);
  font-size: 1.04rem;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.social-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
}

.social-link__mark {
  width: 20px;
  height: 20px;
}

/* Footer */
.site-footer {
  padding-block-start: var(--space-8);
  /* Single restrained brand accent. The footer stays logo-free until a
     reversed Brand lockup exists for the dark surface. */
  border-top: 3px solid var(--color-brand-red);
  background: var(--color-text);
  color: #f8f1eb;
}

.site-footer__grid {
  display: grid;
  /* Mobile-only: groups stack, so a tighter rhythm reads better here.
     768px and above set their own gap and are unaffected. */
  gap: var(--space-6);
}

.site-footer p,
.site-footer a,
.site-footer span {
  color: inherit;
}

.site-footer__name {
  margin-block-end: var(--space-3);
  color: var(--color-surface);
  font-size: 1.25rem;
  font-weight: 800;
}

.site-footer__brand p:not(.site-footer__name) {
  margin-block-end: var(--space-1);
  color: #d9cdc3;
}

.site-footer__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__label {
  margin-block-end: var(--space-2);
  color: var(--color-surface);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.site-footer__group a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.site-footer__bottom {
  margin-block-start: var(--space-7);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  color: #d9cdc3;
  font-size: 0.88rem;
}

.site-footer__bottom p {
  margin: 0;
}

/* Calls to action */
.cta {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border: 2px solid transparent;
  border-radius: 12px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.cta--primary {
  background: var(--color-brand-red);
  color: var(--color-surface);
}

.cta--secondary {
  border-color: var(--color-text);
  background: transparent;
  color: var(--color-text);
}

.cta--inverse {
  background: var(--color-surface);
  color: var(--color-brand-red-hover);
}

/* 6. Interactive states */
a:focus-visible,
.cta:focus-visible,
.header-cta:focus-visible,
.brand:focus-visible,
.social-link:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.partnership-panel a:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--color-surface);
}

.cta,
.header-cta,
.social-link,
.site-footer__group a,
.partnership-panel__support a {
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.cta--primary:hover {
  background: var(--color-brand-red-hover);
}

.cta--secondary:hover,
.header-cta:hover {
  background: var(--color-text);
  color: var(--color-surface);
  border-color: var(--color-text);
}

.cta--inverse:hover {
  background: #f7eee7;
}

.social-link:hover {
  border-color: var(--color-text);
}

.site-footer__group a:hover,
.partnership-panel__support a:hover {
  text-decoration-thickness: 2px;
}

/* 7. Responsive overrides */
@media (min-width: 480px) {
  :root {
    --logo-w: 198px;
    --logo-w-compact: 180px;
  }

  .site-header__inner {
    width: calc(100% - 32px);
    gap: var(--space-4);
  }

  .header-cta {
    padding-inline: var(--space-4);
    font-size: 0.88rem;
  }

  .header-cta__full {
    display: inline;
  }

  .header-cta__short {
    display: none;
  }
}

@media (min-width: 768px) {
  :root {
    --logo-w: 216px;
    --logo-w-compact: 190px;
    --header-pad: 12px;
    --header-pad-compact: 8px;
    --header-compact-h: 99px;
  }

  body {
    font-size: 18px;
  }

  .container {
    width: min(calc(100% - 40px), var(--container-max));
  }

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

  .hero__mascot {
    width: min(52vw, 360px);
  }

  .partnership-panel {
    padding: var(--space-8) var(--space-7);
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7) var(--space-6);
  }
}

@media (min-width: 900px) {
  :root {
    --logo-w: 238px;
    --logo-w-compact: 210px;
    --header-pad: 14px;
    --header-pad-compact: 10px;
    --header-compact-h: 111px;
  }

  .container {
    width: min(calc(100% - 48px), var(--container-max));
  }

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

  .hero {
    padding-block-start: var(--space-9);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: clamp(40px, 4vw, 64px);
  }

  .hero__visual {
    justify-self: end;
    align-self: end;
    margin-inline: 0;
  }

  .hero__mascot {
    width: min(100%, clamp(360px, 31vw, 460px));
  }

  /*
    The story reads at 80px rather than inheriting the 96px desktop section
    rhythm, which left the band feeling loose against the hero above it.
    Scoped to .story only; global .section spacing is unchanged.
  */
  .story.section {
    padding-block: var(--space-9);
  }

  /*
    The photograph holds the left column on its own and spans both text rows,
    so the whole narrative - eyebrow, heading, both paragraphs and the emphasis
    line - runs down the right column instead of leaving the lower right empty.
    Source order is untouched: below 900px the photo still follows the copy.
  */
  .story__grid {
    grid-template-areas:
      "media lead"
      "media body";
    grid-template-columns:
      minmax(0, 0.82fr)
      minmax(0, 1.18fr);
    column-gap: clamp(48px, 5vw, 88px);
    row-gap: var(--space-5);
    align-items: start;
  }

  .story__lead {
    grid-area: lead;
  }

  .story__body {
    grid-area: body;
  }

  .story__media {
    grid-area: media;
    width: min(100%, 400px);
    margin: 0;
    justify-self: start;
  }

  .story__principles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

  /*
    Denser editorial band between the two open cream sections. The tighter
    surface is the section-rhythm device, in place of extra card components.
  */
  .development.section {
    padding-block: var(--space-9);
  }

  .editorial {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(48px, 5vw, 88px);
    align-items: start;
  }

  .follow__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .approach-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
  }

  .approach-item {
    padding-block: var(--space-5) var(--space-6);
  }

  .approach-item:last-child {
    border-block-end: 0;
  }

  .approach-item + .approach-item {
    padding-inline-start: var(--space-6);
    border-inline-start: 1px solid var(--color-border);
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-7);
  }
}

@media (min-width: 1280px) {
  :root {
    --logo-w: 252px;
    --logo-w-compact: 222px;
    --header-compact-h: 117px;
  }
}

/*
  Below 900px the two section edges either side of the partnership panel
  stacked into ~130px (mobile) and ~162px (tablet) of empty space. Only those
  four edges are rebalanced, to a matched ~72px on each side. Desktop rhythm
  at 900px and above is untouched, and the panel's own padding is unchanged.
*/
@media (max-width: 899px) {
  .approach.section {
    padding-block-end: var(--space-5);
  }

  .partnerships.section {
    padding-block: var(--space-7);
  }

  .follow.section {
    padding-block-start: var(--space-5);
  }
}

/*
  The same correction at 900px and above, where the two section edges either
  side of the partnership panel stacked into ~192px of empty space. Only those
  four edges are rebalanced, to a matched ~128px on each side. The panel's own
  padding, width, radius, colour, and elevation are unchanged.
*/
@media (min-width: 900px) {
  .approach.section {
    padding-block-end: var(--space-8);
  }

  .partnerships.section {
    padding-block: var(--space-8);
  }

  .follow.section {
    padding-block-start: var(--space-8);
  }
}

/* 8. v0.6 motion system
   One-time entrance and entry reveals only. Nothing animates continuously. */

@keyframes ac-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ac-rise-visual {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*
  Hero entrance is CSS-only, so it never depends on JavaScript. Opacity is set
  only inside the keyframes: if animations are unsupported the hero renders
  normally rather than staying invisible.
*/
.hero__copy .eyebrow,
.hero__copy h1,
.hero__body,
.hero__actions {
  animation: ac-rise 560ms var(--ease-out) both;
}

.hero__copy h1 {
  animation-delay: 70ms;
}

.hero__body {
  animation-delay: 140ms;
}

.hero__actions {
  animation-delay: 210ms;
}

.hero__visual {
  animation: ac-rise-visual 640ms var(--ease-out) both;
  animation-delay: 120ms;
}

/*
  Scroll entry reveals. Content is visible by default; the pending state is
  applied by JavaScript only to targets that start well below the fold, so
  nothing can flash or hide after first paint. No JS, no observer, or reduced
  motion all resolve to plain visible content.
*/
[data-reveal] {
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}

[data-reveal].is-pending {
  opacity: 0;
  transform: translateY(14px);
  transition: none;
}

.editorial__body[data-reveal] {
  transition-delay: 80ms;
}

.approach-item:nth-child(2)[data-reveal] {
  transition-delay: 75ms;
}

.approach-item:nth-child(3)[data-reveal] {
  transition-delay: 150ms;
}

.social-links[data-reveal] {
  transition-delay: 80ms;
}

/* Partnership panel is the one place a very small scale is approved. */
.partnership-panel[data-reveal].is-pending {
  transform: translateY(13px) scale(0.985);
}

/* 9. v0.6 microinteractions - transform/shadow only, never layout */
.cta,
.header-cta,
.social-link {
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), transform 180ms var(--ease-out),
    box-shadow 180ms var(--ease-out);
}

.cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(200, 29, 20, 0.22);
}

.cta--secondary:hover {
  transform: translateY(-2px);
}

.cta--inverse:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(43, 38, 33, 0.18);
}

.header-cta:hover,
.social-link:hover {
  transform: translateY(-1px);
}

.social-link:hover {
  box-shadow: 0 4px 12px rgba(43, 38, 33, 0.08);
}

.cta:active,
.header-cta:active,
.social-link:active {
  transform: translateY(0);
  box-shadow: none;
}

/* 10. Reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* No entrance, no reveal translation, no animated header movement. */
  .hero__copy .eyebrow,
  .hero__copy h1,
  .hero__body,
  .hero__actions,
  .hero__visual {
    animation: none;
  }

  [data-reveal],
  [data-reveal].is-pending {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-header,
  .site-header__inner,
  .brand__mark {
    transition: none;
  }

  .site-header.is-hidden {
    transform: none;
  }

  .cta,
  .header-cta,
  .social-link,
  .site-footer__group a,
  .partnership-panel__support a {
    transition-duration: 0.01ms;
  }

  .cta:hover,
  .cta:active,
  .header-cta:hover,
  .header-cta:active,
  .social-link:hover,
  .social-link:active {
    transform: none;
    box-shadow: none;
  }
}