:root {
  --root-px-val: 16;
  /* Default header height so calc(var(--headerHeight) …) in the hero margin is
     valid before the useHeaderHeight hook sets the measured value on
     #page-wrapper. Without this the shorthand is invalid at first paint →
     margin:0 (left-aligned, no top offset) → the hero visibly jumps down/right
     once JS defines the var. The measured value is also 64px, so no reflow. */
  --headerHeight: 64px;
  /* Colors: */
  --white: #fff;
  --black: #18181c;
  --orange: #f0ba53;
  --peach: #e8ad7d;
  --red: #b9775b;

  --orange-rgb: 240, 186, 83;
  --peach-rgb: 232, 173, 125;
  --red-rgb: 185, 119, 91;

  --error: #cc4444;
  /* Font/text values */
  --montserrat: Montserrat, "Montserrat Fallback", sans-serif;
  --cabin: Cabin, sans-serif;
  --fs-normal: normal;
  --fw-300: 300;
  --fw-600: 600;
  --fw-medium: medium;
  --fw-normal: normal;
  --fw-bold: bold;
  --fs-12: calc((12 / var(--root-px-val)) * 1rem);
  --fs-13: calc((13 / var(--root-px-val)) * 1rem);
  --fs-14: calc((14 / var(--root-px-val)) * 1rem);
  --fs-16: calc((16 / var(--root-px-val)) * 1rem);
  --fs-18: calc((18 / var(--root-px-val)) * 1rem);
  --fs-19: calc((19 / var(--root-px-val)) * 1rem);
  --fs-20: calc((20 / var(--root-px-val)) * 1rem);
  --fs-22: calc((22 / var(--root-px-val)) * 1rem);
  --fs-30: calc((30 / var(--root-px-val)) * 1rem);
  --fs-36: calc((36 / var(--root-px-val)) * 1rem);
  --fs-38: calc((38 / var(--root-px-val)) * 1rem);
  --fs-40: clamp(var(--fs-30), 3.5vw, calc((40 / var(--root-px-val)) * 1rem));
  --fs-41: calc((41 / var(--root-px-val)) * 1rem);
  --fs-44: clamp(var(--fs-30), 3.8vw, calc((44 / var(--root-px-val)) * 1rem));
  --fs-53: clamp(1em, 10vw, 53px);
  --character-spacing-0-6: 0.6px;
  --character-spacing-0: 0px;
  --character-spacing-1-4: 1.4px;
  --line-spacing-17: calc(17 / 14);
  --line-spacing-19: calc(19 / 13);
  --line-spacing-27: calc(27 / 16);
  --line-spacing-50: calc(50 / 38);
  --line-spacing-70: calc(70 / 53);
  --text-transform-uppercase: uppercase;

  --aspect-ratio-casestudy: 456/629;
  --aspect-ratio-discipline: 548/366;

  /* Fixed dark header height — inner pages offset their top edge by this plus a
   buffer so content is never cramped under the bar (mobile + desktop). */
  --header-h: 84px;
}

@media (min-width: 800px) {
  #site-footer {
    padding-top: 10vh;
  }
}
.font-heading {
  font-family: var(--montserrat);
  font-style: var(--fs-normal);
  font-weight: var(--fw-300);
  font-size: var(--fs-38);
  line-height: var(--line-spacing-50);
  letter-spacing: var(--character-spacing-0);
  color: var(--black);
}
@media (max-width: 450px) {
  .font-heading {
    font-size: var(--fs-30);
  }
}
.font-heading.font-heading--53 {
  font-size: var(--fs-53);
  line-height: 1;
}
@media (max-width: 650px) {
  .font-heading.font-heading--53 {
    margin-top: 100px;
    font-size: var(--fs-30);
  }
}
.font-heading a {
  font-weight: var(--fw-bold);
  position: relative;
  display: inline-block;
  transition: 0.2s ease;
}
.font-heading a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--black);
  top: calc(100% + 2px);
  transition: 0.2s ease;
}
.font-heading a:hover,
.font-heading a:focus {
  color: var(--red);
}
.font-heading a:hover:before,
.font-heading a:focus:before {
  background-color: var(--red);
}
.font-body {
  font-family: var(--montserrat);
  font-style: var(--fs-normal);
  font-weight: var(--fw-normal);
  font-size: var(--fs-13);
  line-height: var(--line-spacing-19);
  letter-spacing: var(--character-spacing-0);
  color: var(--black);
}
.font-cta {
  font-family: var(--cabin);
  font-style: 500;
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  line-height: var(--line-spacing-17);
  letter-spacing: var(--character-spacing-1-4);
  color: var(--black);
  text-transform: var(--text-transform-uppercase);
}
.fw-300 {
  font-weight: var(--fw-300);
}
.fw-600 {
  font-weight: var(--fw-600);
}
.fw-medium {
  font-weight: var(--fw-medium);
}
.fw-normal {
  font-weight: var(--fw-normal);
}
.fw-bold,
.bold {
  font-weight: var(--fw-bold);
}
.fs-12 {
  font-size: var(--fs-12);
}
.fs-13 {
  font-size: var(--fs-13);
}
.fs-14 {
  font-size: var(--fs-14);
}
.fs-18 {
  font-size: var(--fs-18);
}
.fs-19 {
  font-size: var(--fs-19);
}
.fs-30 {
  font-size: var(--fs-30);
}
.fs-36 {
  font-size: var(--fs-36);
}
.fs-38 {
  font-size: var(--fs-38);
}
.fs-41 {
  font-size: var(--fs-41);
}
.fs-53 {
  font-size: var(--fs-53);
}
.color-black {
  color: var(--black);
}
.color-orange {
  color: var(--orange);
}
.color-peach {
  color: var(--peach);
}
.color-red {
  color: var(--red);
}
.color-black {
  transition: 0.2s ease;
}
.hover-black:hover {
  color: var(--black);
}
.hover-black:focus {
  color: var(--black);
}
.color-orange {
  transition: 0.2s ease;
}
.hover-orange:hover {
  color: var(--orange);
}
.hover-orange:focus {
  color: var(--orange);
}
.color-peach {
  transition: 0.2s ease;
}
.hover-peach:hover {
  color: var(--peach);
}
.hover-peach:focus {
  color: var(--peach);
}
.color-red {
  transition: 0.2s ease;
}
.hover-red:hover {
  color: var(--red);
}
.hover-red:focus {
  color: var(--red);
}

/* A11y: a visible keyboard-focus ring on every interactive element — a
   non-color affordance, shown only on keyboard focus (not mouse), so hover/focus
   never depend on colour alone. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

/* Screen-reader-only (visually hidden but announced) — e.g. a page h1 whose
   visible heading is rich text that can't be an <h1>. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Character Styles */
.h1-montserrat-—-38pt {
  font-family: var(--montserrat);
  font-style: var(--fs-normal);
  font-weight: var(--fw-300);
  font-size: var(--fs-38);
  line-height: var(--line-spacing-50);
  letter-spacing: var(--character-spacing-0);
  color: var(--black);
}
.h3-montserrat-—-13pt {
  font-family: var(--montserrat);
  font-style: var(--fs-normal);
  font-weight: var(--fw-600);
  font-size: var(--fs-13);
  line-height: var(--line-spacing-19);
  letter-spacing: var(--character-spacing-0);
  color: var(--black);
}
.p-montserrat-—-13pt {
  font-family: var(--montserrat);
  font-style: var(--fs-normal);
  font-weight: var(--fw-medium);
  font-size: var(--fs-13);
  line-height: var(--line-spacing-19);
  letter-spacing: var(--character-spacing-0);
  color: var(--black);
}
/* v2 rework shared styles (Figma Alea-McKinley-1): uppercase eyebrow label and
   the outlined pill button used across About / grid / case study / CTA banner. */
.label-eyebrow {
  font-family: var(--montserrat);
  font-style: var(--fs-normal);
  font-weight: var(--fw-600);
  font-size: var(--fs-12);
  line-height: calc(19 / 12);
  letter-spacing: var(--character-spacing-0-6);
  color: var(--black);
  text-transform: var(--text-transform-uppercase);
}
.pill-button {
  appearance: none;
  display: inline-block;
  width: max-content;
  background: transparent;
  border: 1px solid var(--black);
  border-radius: 30px;
  padding: 6px 20px;
  cursor: pointer;
  font-family: var(--montserrat);
  font-weight: var(--fw-600);
  font-size: var(--fs-12);
  line-height: calc(19 / 12);
  letter-spacing: var(--character-spacing-0-6);
  color: var(--black);
  text-transform: var(--text-transform-uppercase);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.pill-button:hover,
.pill-button:focus-visible {
  background-color: var(--black);
  color: var(--bg-hex, var(--peach));
}
.main-nav-link-cabin-—-14pt {
  font-family: var(--cabin);
  font-style: var(--fs-normal);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  line-height: var(--line-spacing-17);
  letter-spacing: var(--character-spacing-1-4);
  color: var(--black);
  text-transform: var(--text-transform-uppercase);
}
html {
  scroll-behavior: smooth;
}

html * {
  box-sizing: border-box;
}

body {
  background: var(--black) !important;
  color: var(--text-color);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--body);
  line-height: var(--default);
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 0;
  /* cursor: url("./svg/circle.svg") 50 50, pointer; */
  /* cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20version=%221.1%22%20id=%22Layer_1%22%20x=%220px%22%20y=%220px%22%20width=%22100px%22%20height=%22100px%22%20viewBox=%220%200%2015%2015%22%20style=%22mix-blend-mode:%20difference;enable-background:new%200%200%2015%2015;%22%20xml:space=%22preserve%22%3E%0A%3Cpath%20d=%22M14,7.5c0,3.5899-2.9101,6.5-6.5,6.5S1,11.0899,1,7.5S3.9101,1,7.5,1S14,3.9101,14,7.5z%22/%3E%0A%3C/svg%3E") 32 32, pointer; */
}
a {
  color: currentColor;
  text-decoration: none;
  /* cursor: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20version=%221.1%22%20id=%22Layer_1%22%20x=%220px%22%20y=%220px%22%20width=%22100px%22%20height=%22100px%22%20viewBox=%220%200%2015%2015%22%20style=%22mix-blend-mode:%20difference;enable-background:new%200%200%2015%2015;%22%20xml:space=%22preserve%22%3E%0A%3Cpath%20d=%22M14,7.5c0,3.5899-2.9101,6.5-6.5,6.5S1,11.0899,1,7.5S3.9101,1,7.5,1S14,3.9101,14,7.5z%22/%3E%0A%3C/svg%3E") 32 32, pointer; */
}

a:hover {
  color: var(--primary);
}

a.active {
  font-weight: var(--bold);
}

tt,
code,
kbd {
  background: var(--black-fade-5);
  padding-bottom: 0.2em;
  padding-top: 0.2em;
}

tt,
code,
kbd {
  font-family: var(--font-monospace);
  font-size: 90%;
}

tt,
code {
  background-color: var(--black-fade-5);
  border-radius: var(--radius-sm);
  font-weight: var(--medium);
  padding: 0.2em 0;
}

code:before,
code:after,
tt:before,
tt:after {
  content: " ";
  letter-spacing: -0.2em;
}

pre,
code {
  font-family: var(--font-monospace);
}

/* body > div {
    background: var(--peach);
} */
.toggle-peach svg line {
  stroke: var(--peach);
}

/* .mobile-nav-toggle.toggle-isactive svg line#Line_5 {
    transform: translateY(20%) !important;
}

.mobile-nav-toggle.toggle-isactive svg line#Line_6 {
    transform: translateY(20%) !important;
}
    
.mobile-nav-toggle.toggle-isactive svg line#Line_7 {
    transform: translateY(20%) !important;
} */

.heading {
  text-align: left;
  font: normal normal 300 53px/70px Montserrat;
  letter-spacing: 0px;
  color: var(--black);
  opacity: 1;
}
.heading.bold {
  text-align: left;
  font: normal normal medium 53px/50px Montserrat;
  letter-spacing: 0px;
  color: #18181c;
  opacity: 1;
}
.indent {
  display: block; /* span used inside headings — keep the block line break */
  margin-top: 0;
  margin-left: 2em;
}
.bold {
  font-weight: 800;
}
/* .wrapper-orange {
    background: linear-gradient(transparent 0 0,var(--orange) 10% 90%, transparent 100% 100%);
} */
.current-bg--peach {
  background-color: var(--peach);
  --bg-rgb: var(--peach-rgb);
  --bg-hex: var(--peach);
  transition: 1.4s ease;
}
.current-bg--orange {
  background-color: var(--orange);
  --bg-rgb: var(--orange-rgb);
  --bg-hex: var(--orange);
  transition: 1.4s ease;
}
.current-bg--pink {
  background-color: var(--red);
  --bg-rgb: var(--red-rgb);
  --bg-hex: var(--red);
  transition: 1.4s ease;
}

/* #page-wrapper { */
/*   margin-top: -2em; */
/*   background-color: var(--bg-hex); */
/*   transition: 0.2s ease; */
/* } */

/* #page-wrapper.theme-color-peach {
    --theme-bg-main: var(--peach);
    --theme-bg-alt: var(--orange);
}
#page-wrapper.theme-color-orange {
    --theme-bg-main: var(--orange);
    --theme-bg-alt: var(--peach);
}

#page-wrapper .bg-alt {
    background: linear-gradient(transparent 0 0,var(--theme-bg-alt) 10% 90%, transparent 100% 100%);
}
#page-wrapper .bg-alt+.bg-alt+.bg-alt{
    background: linear-gradient(transparent 0 0,var(--theme-bg-main) 10% 90%, transparent 100% 100%) !important;
}
#page-wrapper .bg-alt+.bg-alt {
    background: linear-gradient(transparent -20% 0,var(--theme-bg-alt) -10% 90%, transparent 100% 100%);
}
#page-wrapper .bg-main {
    background: linear-gradient(transparent 0 0,var(--theme-bg-main) 10% 90%, transparent 100% 100%);
} */

.motionDiv {
  overflow-x: hidden;
}

/* Shared-element page transition: project-grid tiles and the case-study hero
   image carry matching view-transition-name values (cs-<slug>), so ClientRouter
   morphs the clicked tile into the detail page image. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
}
::view-transition-group(*) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.33, 0, 0.18, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

.cta,
a.cta,
button.cta,
.rte.rte.rte--featured a:not(.pill-button) {
  appearance: none;
  background-color: transparent;
  border: none;
  position: relative;
  padding: 1em 0;
  text-align: left;
  font-family: var(--montserrat);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0px;
  color: var(--black);
  transition: 0.2s ease;
}
.cta.cta--centered {
  display: block;
  width: max-content;
  text-align: center;
  margin: auto;
}
.cta:before,
.rte.rte.rte--featured a:not(.pill-button):before {
  transition: 0.2s ease;
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  background: var(--black);
}
.cta:hover:before,
.rte.rte.rte--featured a:not(.pill-button):hover:before,
.cta:focus:before,
.rte.rte.rte--featured a:not(.pill-button):focus:before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 1px;
  background: var(--black);
  transition: 0.2s ease;
}
.cta:after,
.rte.rte.rte--featured a:not(.pill-button):after {
  content: "+";
  display: inline-block;
  font-family: var(--montserrat);
  font-size: var(--fs-12);
  font-weight: medium;
  letter-spacing: 0px;
  color: var(--black);
  opacity: 0;
  transform: scaleY(0) translateY(4px);
  transition: 0.2s ease;
  width: 0;
}
.cta:hover:after,
.rte.rte.rte--featured a:not(.pill-button):hover:after,
.cta:focus:after,
.rte.rte.rte--featured a:not(.pill-button):focus:after {
  margin-left: 0.25em;
  margin-right: -0.75em;
  opacity: 1;
  transform: scaleY(1) translateY(0);
  width: 1.25em;
}
.cta.cta--white {
  color: var(--white);
}
.cta.cta--white:after {
  color: var(--white);
}
.cta.cta--white:before {
  background: var(--white);
}
.underline {
  position: relative;
}
.underline:before {
  transition: 0.2s ease;
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 0.05em;
  background: var(--black);
}
.rte {
}
.rte.rte--featured {
}
.testimonial-carousel span.swiper-pagination-bullet {
  display: block;
  width: 64px;
  height: 11px;
  /* Translucent ink reads on the terracotta/orange/peach section backgrounds
       (peach-on-terracotta was barely visible); the solid active bar stands out
       by fill, not colour alone. */
  background: rgba(24, 24, 28, 0.4);
}

.testimonial-carousel
  span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--black);
}
.testimonial-carousel .swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 2em;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(-100%);
  width: 100%;
  z-index: 5;
}
.testimonial-carousel .swiper-wrapper {
  display: flex;
}
.testimonial-carousel .swiper-slide-prev {
  opacity: 0.5 !important;
}
.testimonial-carousel .swiper-slide-next {
  opacity: 0.5 !important;
}

@keyframes pulse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}

button.swiper-nav-button {
  position: relative;
  appearance: none;
  border: 0;
  background: 0;
  padding: 0;
  cursor: pointer;
}
@media (max-width: 800px) {
  button.swiper-nav-button {
    pointer-events: none;
    visibility: hidden;
  }
}

/* button.swiper-nav-button:before {
    content: '';
    display: block;
    border: 15px solid transparent;
    border-left: 20px solid var(--black);
    border-right: 0px solid transparent;
    transition: .2s ease;
}
button.swiper-nav-button.swiper-nav-prev:before {
    border-right: 20px solid var(--black);
    border-left: 0px solid transparent;
} */
/* button.swiper-nav-button.swiper-nav-prev:hover:before,
button.swiper-nav-button.swiper-nav-prev:focus:before {
    border-right: 20px solid var(--peach);
    transform:translateY(-2px);
}
button.swiper-nav-button.swiper-nav-next:hover:before,
button.swiper-nav-button.swiper-nav-next:focus:before {
    border-left: 20px solid var(--peach);
    transform:translateY(-2px);
} */
button.swiper-nav-button.swiper-nav-prev svg,
button.swiper-nav-button.swiper-nav-next svg {
  width: 75px;
  height: auto;
  stroke-width: 3px;
}
button.swiper-nav-button.swiper-nav-prev,
button.swiper-nav-button.swiper-nav-next {
  position: absolute;
  height: 100%;
  padding: 4em;
  left: 0;
  top: 0%;
  z-index: 3;
  opacity: 0;
  display: block;
  transition: 0.2s ease;
  margin: 0;
}
button.swiper-nav-button.swiper-nav-next {
  left: 100%;
  transform: translateX(-100%);
}
button.swiper-nav-button.swiper-nav-next:focus,
button.swiper-nav-button.swiper-nav-next:hover {
  background: linear-gradient(
    270deg,
    var(--bg-hex),
    rgba(var(--bg-rgb), 0.98032) 9.99%,
    rgba(var(--bg-rgb), 0.92593) 19.07%,
    rgba(var(--bg-rgb), 0.84375) 27.44%,
    rgba(var(--bg-rgb), 0.74074) 35.26%,
    rgba(var(--bg-rgb), 0.62384) 42.72%,
    rgba(var(--bg-rgb), 0.5) 50%,
    rgba(var(--bg-rgb), 0.37616) 57.28%,
    rgba(var(--bg-rgb), 0.25926) 64.74%,
    rgba(var(--bg-rgb), 0.15625) 72.56%,
    rgba(var(--bg-rgb), 0.07407) 80.93%,
    rgba(var(--bg-rgb), 0.01968) 90.01%,
    rgba(var(--bg-rgb), 0)
  );
  background: linear-gradient(
    270deg,
    rgba(var(--bg-rgb), 0.75),
    rgba(var(--bg-rgb), 0.5) 60%,
    rgba(var(--bg-rgb), 0)
  );
  opacity: 1;
}
button.swiper-nav-button.swiper-nav-prev:focus,
button.swiper-nav-button.swiper-nav-prev:hover {
  opacity: 1;
  background: linear-gradient(
    90deg,
    var(--bg-hex),
    rgba(var(--bg-rgb), 0.98032) 9.99%,
    rgba(var(--bg-rgb), 0.92593) 19.07%,
    rgba(var(--bg-rgb), 0.84375) 27.44%,
    rgba(var(--bg-rgb), 0.74074) 35.26%,
    rgba(var(--bg-rgb), 0.62384) 42.72%,
    rgba(var(--bg-rgb), 0.5) 50%,
    rgba(var(--bg-rgb), 0.37616) 57.28%,
    rgba(var(--bg-rgb), 0.25926) 64.74%,
    rgba(var(--bg-rgb), 0.15625) 72.56%,
    rgba(var(--bg-rgb), 0.07407) 80.93%,
    rgba(var(--bg-rgb), 0.01968) 90.01%,
    rgba(var(--bg-rgb), 0)
  );
  background: linear-gradient(
    90deg,
    rgba(var(--bg-rgb), 0.75),
    rgba(var(--bg-rgb), 0.5) 60%,
    rgba(var(--bg-rgb), 0)
  );
}

.skip-link {
  appearance: none;
  position: fixed;
  left: 20px;
  top: 20px;
  font-family: var(--montserrat);
  background-color: black;
  color: var(--peach);
  padding: 20px;
  font-size: 28px;
  z-index: 99999999;
  transform: translateX(-200%);
}
.skip-link:focus {
  opacity: 1;
  transform: translateX(0);
}

.cursor {
  --cursor-scale: 1;
  --cursor-height: calc(var(--cursor-scale) * 50px);
  --cursor-clip: circle(50% at 50% 50%);
  position: fixed;
  clip-path: var(--cursor-clip);
  pointer-events: none;
  left: calc(-0.5 * var(--cursor-height));
  top: calc(-0.5 * var(--cursor-height));
  mix-blend-mode: difference;
  background-color: var(--black);
  z-index: 10000;
  height: var(--cursor-height);
  width: var(--cursor-height);
  transition: all 50ms ease-out;
  transform: translate3d(var(--cursor-x), var(--cursor-y), 0);
}
@media (max-width: 1040px) {
  .cursor {
    display: none;
  }
}
/* Touch / no-hover devices have no mouse to drive the cursor — hide it so it
   doesn't sit stuck in a corner. */
@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}
.twocolumn-text {
  display: block;
  text-align: left;
}

@media (min-width: 700px) {
  .twocolumn-text {
    display: grid;
    grid-column-gap: 4em;
    grid-row-gap: 0em;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 640px) {
  .gridItem {
    padding: 3em;
  }
  .skillColumn-null {
    grid-column: span 1;
  }
  .skillColumn-1 {
    grid-column: span 1;
  }
  .skillColumn-2 {
    grid-column: span 2;
  }
}

/* Respect users who ask for reduced motion: kill smooth scroll, the 1.4s
   scroll-driven background fades, and CSS transitions/animations. The
   framer-motion page slide and Swiper autoplay are handled in JS
   (useReducedMotion in Layout / the carousels). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .current-bg--peach,
  .current-bg--orange,
  .current-bg--pink {
    transition-duration: 0.01ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.testimonial-carousel .swiper-pagination {
  padding-inline: 15px;
}