/*
Theme Name: CRAFT Portfolio Theme
Author: Cody
Version: 7.15
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: craft-theme
Tags: portfolio, custom-blocks, minimal, one-column, black-and-white
*/

/* ==========================================================================
   CSS RESET & BASE STYLES
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* Global variables */
:root {
  /* Main gaps between columns / layout elements */
  --craft-gap-grid: 2rem;

  /* Inner gaps between stacked items inside a column or block */
  --craft-gap-inner: 2rem;

  /* Header + content offset */
  --header-height: 72px; /* tweak to your actual header height */
  --header-offset-extra: 0px; /* always defined so main offset calc is valid */

  /* Featured Work row heights (easy knobs to tweak) */
  --featured-work-row-height-desktop: 450px; /* change this to make thumbs taller/shorter on desktop */
  --featured-work-row-height-tablet: 260px;  /* change this for tablet */

  /* Height control (consistent look) */
  --fw-wide-aspect: 16 / 9; /* wide tiles */
  --fw-small-aspect: 1 / 1; /* small tiles */

  /* match whatever your images use today */
  --media-radius: 8px;

  /* Controls hero/container viewport height */
  --hero-min: 100dvh;
}


/* ==========================================================================
   DESIGN TOKENS — EDIT TYPOGRAPHY HERE
   ========================================================================== */

:root {
  --site-max-width: 1600px;
  --site-gutter: clamp(1rem, 2.5vw, 2.5rem);

  /* Global color palette */
  --color-background: #1E1E1E;
  --color-text-primary: #E5E7EB;
  --color-text-secondary: #9CA3AF;

  /* Readable text measures */
  --measure-heading: 22ch;
  --measure-narrow: 45ch;
  --measure-reading: 65ch;
  --measure-wide: 80ch;

  --font-display: "Archivo", sans-serif;
  --font-body: "IBM Plex Mono", monospace;

  --body-size: clamp(.875rem, 1.5vw, 1rem);
  --body-line-height: 1.8;

  --eyebrow-size: .875rem;
  --eyebrow-line-height: 1.3;
  --eyebrow-letter-spacing: .1em;

  --hero-size-min: 2.75rem;
  --hero-size-fluid: 6vw;
  --hero-size-max: 4.25rem;
  --hero-width-axis: 120;
  --hero-weight-axis: 750;
  --hero-line-height: 1.08;
  --hero-letter-spacing: -.02em;

  --mega-h1-size-min: 3.5rem;
  --mega-h1-size-fluid: 8vw;
  --mega-h1-size-max: 7.5rem;
  --mega-h1-line-height: 1;
  --mega-h1-letter-spacing: -.035em;

  /* Shared Archivo styling for h1–h6 and display headings. */
  --heading-width-axis: var(--hero-width-axis);
  --heading-weight-axis: var(--hero-weight-axis);
  --heading-line-height: 1.2;
  --heading-letter-spacing: var(--hero-letter-spacing);

  --hero-arrow-size: 56px;
  --hero-arrow-color: var(--color-text-primary);

  /* Replace these SVG files to update the UI icons site-wide. */
  --ui-icon-menu: url("assets/icons/gothic-menu.svg");
  --ui-icon-close: url("assets/icons/gothic-close.svg");
  --ui-icon-down: url("assets/icons/gothic-down.svg");
}

body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
}

button,
input,
select,
textarea {
  font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-heading,
.home-hero__headline,
.featured-work__heading,
.featured-work__title,
.case-study-card__title,
.related__title-heading {
  font-family: var(--font-display);
  font-weight: var(--heading-weight-axis);
  font-variation-settings: "wdth" var(--heading-width-axis), "wght" var(--heading-weight-axis);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 800;
  line-height: var(--eyebrow-line-height);
  letter-spacing: var(--eyebrow-letter-spacing);
  text-transform: uppercase;
}

/* General: images + videos get the same rounding */
img,
video,
iframe {
  border-radius: var(--media-radius);
}

body {
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-background);
  overflow-x: hidden;
}

/* ===== Page Loader =====
   The white canvas is progressively covered by the site's background color.
   --loader-progress is controlled by js/main.js from 0 to 1. */
.page-loader {
  --loader-progress: 0;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #fff;
  opacity: 1;
  transform: translateZ(0);
  transition: opacity .18s linear, visibility 0s linear .18s;
  visibility: visible;
  pointer-events: auto;
  overflow: hidden;
}

.page-loader__fill {
  position: absolute;
  inset: 0;
  background: var(--color-background);
  transform: scaleY(var(--loader-progress));
  transform-origin: 50% 0%;
  will-change: transform;
}

.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-page-loading {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .page-loader {
    transition-duration: .01ms;
  }
}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1 {
  font-size: clamp(3rem, 6vw, 5rem);
  margin-bottom: 1.25rem;
}

@media (max-width: 480px) {
  h1 {
    font-size: clamp(2rem, 7.5vw, 2.4rem);
  }
}

h2 {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  margin-bottom: 1rem;
}

h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 0.875rem;
}

h4 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin-bottom: 0.75rem;
}

h5 {
  font-size: clamp(1.25rem, 2vw, 2rem);
  margin-bottom: 0.875rem;
}

h6 {
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
  margin-bottom: 0.75rem;
}

p {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: var(--color-text-secondary);
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

a:hover {
  opacity: .5;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main {
  flex-grow: 1;
  padding-top: calc(var(--header-height) + var(--header-offset-extra, 0px));
}

.craft-container {
  width: 100%;
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding-inline: var(--site-gutter);
}


/* Core 12-col grid used in Craft blocks */
.craft-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--craft-gap-grid);
  margin-bottom: 4rem;
}

/* Grid span helpers for .craft-grid ------------------------------------- */

/* Default: on small screens, every item is full-width */
.craft-grid > * {
  grid-column: 1 / -1;
}

/* On desktop (12-column grid), enable span helpers */
@media (min-width: 901px) {
  .craft-grid > .span-3 { grid-column: span 3; }
  .craft-grid > .span-4 { grid-column: span 4; }
  .craft-grid > .span-6 { grid-column: span 6; }
  .craft-grid > .span-8 { grid-column: span 8; }
  .craft-grid > .span-9 { grid-column: span 9; }
  .craft-grid > .span-12 { grid-column: span 12; }
}

@media (max-width: 900px) {
  .craft-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Simple margin helpers */
.margin-bottom-large { margin-bottom: 5rem; }
.margin-bottom-medium { margin-bottom: 4rem; }
.margin-bottom-small { margin-bottom: 2rem; }

/*
 * Two-column editorial alignment.
 * Add `craft-copy-align-heading` to a parent Columns block when the first
 * column starts with an eyebrow + heading and the second starts with body copy.
 */
@media (min-width: 782px) {
  .wp-block-columns.craft-copy-align-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 46%) minmax(0, 42%);
    justify-content: space-between;
    column-gap: 0;
    row-gap: 0;
    align-items: flex-start !important;
  }

  .wp-block-columns.craft-copy-align-heading > .wp-block-column:first-child,
  .wp-block-columns.craft-copy-align-heading > .wp-block-column:first-child > .craft-text-block-shell,
  .wp-block-columns.craft-copy-align-heading > .wp-block-column:first-child > .craft-text-block-shell > .craft-text-block {
    display: contents;
  }

  .wp-block-columns.craft-copy-align-heading > .wp-block-column:first-child > :is(.eyebrow, .craft-text-block__eyebrow),
  .wp-block-columns.craft-copy-align-heading > .wp-block-column:first-child > .craft-text-block-shell > .craft-text-block > :is(.eyebrow, .craft-text-block__eyebrow) {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 1.25rem;
  }

  .wp-block-columns.craft-copy-align-heading > .wp-block-column:first-child > :is(h1, h2),
  .wp-block-columns.craft-copy-align-heading > .wp-block-column:first-child > .craft-text-block-shell > .craft-text-block > :is(h1, h2, .craft-text-block__heading) {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 0;
  }

  .wp-block-columns.craft-copy-align-heading > .wp-block-column:nth-child(2) {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    padding-top: 0;
  }

  .wp-block-columns.craft-copy-align-heading > .wp-block-column:nth-child(2) > :first-child {
    margin-top: 0;
  }

  /*
   * Text Blocks include legacy vertical padding. Remove it from the right-hand
   * block so its first paragraph shares the heading's top edge and its final
   * line defines the bottom baseline used by the service pills.
   */
  .wp-block-columns.craft-copy-align-heading > .wp-block-column:nth-child(2) > .craft-text-block-shell > .craft-text-block {
    padding-block: 0;
  }

  /* v6.77: the copy column ends on the same edge as MENU and the images: no extra side
     padding, and the (readable-width) block sits against the right edge. */
  .wp-block-columns.craft-copy-align-heading > .wp-block-column:nth-child(2) > .craft-text-block-shell {
    padding-inline: 0;
  }

  .wp-block-columns.craft-copy-align-heading > .wp-block-column:nth-child(2) > .craft-text-block-shell > .craft-text-block {
    margin-left: auto;
    margin-right: 0;
  }
}

/* v6.77: phones/tablets — title, pills and copy start on the logo's edge (no doubled gutter). */
@media (max-width: 781px) {
  .wp-block-columns.craft-copy-align-heading .craft-text-block-shell,
  .wp-block-columns.craft-copy-align-heading > .wp-block-column:first-child > .craft-project-services-shell {
    padding-inline: 0 !important;
  }
}

/* ==========================================================================
   HEADER & FULLSCREEN NAV
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: transparent;
}

/* v6.78: when logged in, sit below the WordPress toolbar instead of under it. */
@media (min-width: 601px) {
  .admin-bar .site-header {
    top: var(--wp-admin--admin-bar--height, 32px);
  }
}

.site-header__inner {
  position: relative;
  z-index: 202;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  padding-block: .75rem;
}

.site-header__logo,
.site-header__logo > a {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-primary);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  transition: color .25s ease, filter .25s ease;
}

.site-header__logo .custom-logo {
  display: block;
  width: auto;
  height: 24px;
}

@media (max-width: 600px) {
  .site-header__logo,
  .site-header__logo > a {
    font-size: .75rem;
  }

  .site-header__logo .custom-logo {
    height: 20px;
  }
}

.site-header__toggle {
  position: relative;
  z-index: 203;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  height: 44px;
  padding: 0;
  color: var(--color-text-primary);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: color .25s ease;
}

.site-header__toggle-label {
  font-family: var(--font-display);
  font-size: clamp(.625rem, .7vw, .7rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.craft-ui-icon {
  display: inline-grid;
  place-items: center;
  width: 1em;
  height: 1em;
  color: currentColor;
}

.craft-ui-icon::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-image: var(--ui-icon);
  mask-image: var(--ui-icon);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.craft-ui-icon--menu { --ui-icon: var(--ui-icon-menu); }
.craft-ui-icon--close { --ui-icon: var(--ui-icon-close); }
.craft-ui-icon--down { --ui-icon: var(--ui-icon-down); }

.site-header__overlay {
  --menu-surface: #fff;
  --menu-text: #111;
  position: fixed;
  inset: 0;
  z-index: 201;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding-block: calc(var(--header-height) + 2rem) 3rem;
  color: var(--menu-text);
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  isolation: isolate;
  contain: paint;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: opacity, transform;
  transition:
    opacity .2s ease-out,
    visibility 0s linear .3s;
}

.site-header__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--menu-surface);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
}

.site-header__overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.site-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  backface-visibility: hidden;
  will-change: opacity, transform;
  transition:
    opacity .16s ease-out,
    transform .2s cubic-bezier(.22, 1, .36, 1);
}

.site-header__overlay.is-active .site-header__nav {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: .08s;
}

.site-header__overlay:not(.is-active) .site-header__nav {
  transition-delay: 0s;
}

.site-header__menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vh, 4rem);
  width: 100%;
  max-width: 900px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.site-header__menu + .site-header__menu {
  margin-top: clamp(2rem, 5vh, 4rem);
}

.site-header__menu li {
  margin: 0;
}

.site-header__menu > li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.site-header__menu > li > a {
  display: inline-block;
  color: var(--menu-text);
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: var(--heading-weight-axis);
  font-variation-settings: "wdth" var(--heading-width-axis), "wght" var(--heading-weight-axis);
  line-height: 1;
  letter-spacing: var(--heading-letter-spacing);
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity .2s ease;
}

.site-header__submenu-toggle {
  display: none !important;
}

.site-header__submenu-toggle:hover,
.site-header__submenu-toggle:focus-visible {
  opacity: .5;
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible {
  opacity: .5;
}

.site-header__menu .sub-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  width: 100%;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  text-align: center;
  transition: max-height .3s ease, margin .3s ease, opacity .2s ease, visibility .2s ease;
}

.site-header__menu .sub-menu a {
  color: var(--menu-text);
  font-family: var(--font-body);
  font-size: clamp(.875rem, 1.15vw, 1rem);
  font-weight: 400;
  letter-spacing: .08em;
  line-height: var(--body-line-height);
  text-decoration: none;
  text-transform: uppercase;
}

.site-header__menu .sub-menu a::before {
  content: none;
  display: none;
  margin: 0;
}

.site-header__nav.has-accordion .site-header__menu .sub-menu {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

.site-header__nav.has-accordion .site-header__menu > .is-submenu-open > .sub-menu {
  max-height: min(55vh, 40rem);
  margin-top: 1.25rem;
  margin-bottom: .5rem;
  overflow-y: auto;
  opacity: 1;
  visibility: visible;
}

body.menu-open {
  overflow: hidden;
}

body.menu-open .site-header__logo,
body.menu-open .site-header__logo > a,
body.menu-open .site-header__toggle {
  color: #111;
}

body.menu-open .site-header__logo .custom-logo {
  filter: brightness(0);
}

/* Fullscreen-menu motion classes.
   These can also be applied manually through the body_class filter.
   Diamond uses a transformed pseudo-element instead of clip-path to avoid
   repaint-heavy animation and produce a smoother close transition. */
.menu-animation-diamond .site-header__overlay {
  transition:
    opacity .14s ease-out,
    visibility 0s linear .3s;
}

.menu-animation-diamond .site-header__overlay::before {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 120vmax;
  height: 120vmax;
  transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.menu-animation-diamond .site-header__overlay.is-active {
  transition:
    opacity .12s ease,
    visibility 0s linear 0s;
}

.menu-animation-diamond .site-header__overlay.is-active::before {
  transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(1);
}

.menu-animation-diamond .site-header__overlay.is-active .site-header__nav {
  transition-delay: .1s;
}

.menu-animation-curtain .site-header__overlay {
  transform: translate3d(0, -100%, 0);
  transition:
    transform .3s cubic-bezier(.22, 1, .36, 1),
    opacity .16s ease-out,
    visibility 0s linear .3s;
}

.menu-animation-curtain .site-header__overlay.is-active {
  transform: translate3d(0, 0, 0);
  transition:
    transform .3s cubic-bezier(.22, 1, .36, 1),
    opacity .14s ease-out,
    visibility 0s linear 0s;
}

.menu-animation-slide .site-header__overlay {
  transform: translate3d(100%, 0, 0);
  transition:
    transform .3s cubic-bezier(.22, 1, .36, 1),
    opacity .16s ease-out,
    visibility 0s linear .3s;
}

.menu-animation-slide .site-header__overlay.is-active {
  transform: translate3d(0, 0, 0);
  transition:
    transform .3s cubic-bezier(.22, 1, .36, 1),
    opacity .14s ease-out,
    visibility 0s linear 0s;
}

.menu-animation-scale .site-header__overlay {
  transform: translate3d(0, 0, 0) scale(.96);
  transform-origin: center;
  transition:
    transform .26s cubic-bezier(.22, 1, .36, 1),
    opacity .2s ease-out,
    visibility 0s linear .26s;
}

.menu-animation-scale .site-header__overlay.is-active {
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    transform .26s cubic-bezier(.22, 1, .36, 1),
    opacity .18s ease-out,
    visibility 0s linear 0s;
}

.menu-animation-fade .site-header__overlay {
  transition:
    opacity .22s ease-out,
    visibility 0s linear .22s;
}

.menu-animation-fade .site-header__overlay.is-active {
  transition:
    opacity .22s ease-out,
    visibility 0s linear 0s;
}

@media (max-width: 600px) {
  .site-header__menu {
    gap: 2.5rem;
    max-width: none;
  }

  .site-header__menu + .site-header__menu {
    margin-top: 2.5rem;
  }

  .site-header__menu > li > a {
    font-size: clamp(2.75rem, 14vw, 4.25rem);
  }

  .site-header__submenu-toggle {
    top: 0;
    width: 44px;
    height: 44px;
    font-size: 1.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__overlay,
  .site-header__overlay::before,
  .site-header__nav {
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  padding: 0 0 2rem;
  margin-top: 8rem;
}

.footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: clamp(.625rem, .7vw, .7rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-section--nav {
  min-width: 0;
  justify-self: start;
}

#footer-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer-menu li {
  margin: 0;
}

#footer-menu a {
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  text-transform: uppercase;
}

#footer-menu a:hover {
  color: var(--color-text-primary);
}

.copyright {
  justify-self: center;
  white-space: nowrap;
}

.credits {
  justify-self: end;
  white-space: nowrap;
}

/* Footer responsive */
@media (max-width: 768px) {
  .site-footer {
    padding: 3rem 0 1.5rem;
    margin-top: 4rem;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.25rem;
    text-align: center;
  }

  .footer-section--nav,
  .copyright,
  .credits {
    justify-self: center;
  }

  #footer-menu {
    justify-content: center;
  }
}

/* ==========================================================================
   CASE STUDY LISTINGS
   ========================================================================== */

.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--craft-gap-grid);
}

.case-study-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--craft-gap-inner);
}

.case-study-card__image {
  overflow: hidden;
  background-color: #111111;
}

.case-study-card__image img {
  width: 100%;
  height: auto;
  display: block;
}

.case-study-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.case-study-card__title {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 500;
}

.case-study-card__tags {
  display: flex;
  gap: 0.75rem;
}

.case-study-card__tag {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(229, 231, 235, 0.12);
}

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

/* Case Study Archive – 2-column 60/40 grid */
.post-type-archive-case_study .craft-grid {
  /* override the default 12-col grid for this template only */
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); /* ~60/40 */
}

/* override span helper so each article just takes one column */
.post-type-archive-case_study .craft-grid > article,
.post-type-archive-case_study .craft-grid > .span-4 {
  grid-column: auto;
}

/* responsive: stack on small screens */
@media (max-width: 900px) {
  .post-type-archive-case_study .craft-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Case Study: Prev / Next Navigation ---------- */

.case-study-navigation {
  border-top: 1px solid hsla(0, 0%, 100%, .12);
  padding: 32px 0;
  margin-top: 48px;
}

.case-study-navigation .nav-links {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 64px);
}

/* Keep columns pinned to edges even if one side is missing */
.case-study-navigation .nav-previous { margin-right: auto; min-width: 0; }
.case-study-navigation .nav-next { margin-left: auto; min-width: 0; }

.case-study-navigation .nav-empty { visibility: hidden; width: 0; height: 0; }

.case-study-navigation .nav-label {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.case-study-navigation .nav-title {
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.2;
  margin: 0;
}

.case-study-navigation .nav-link {
  color: var(--text, var(--color-text-primary));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: opacity .2s ease, border-color .2s ease;
}

.case-study-navigation .nav-link:hover {
  opacity: .8;
  border-color: hsla(0, 0%, 100%, .35);
}

/* Arrow affordances */
.case-study-navigation .nav-link--prev::before,
.case-study-navigation .nav-link--next::after {
  content: "";
  display: inline-block;
  width: .75em;
  height: .75em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(-135deg);
  margin-right: .5em;
  vertical-align: .05em;
  opacity: .8;
}

.case-study-navigation .nav-link--next::after {
  transform: rotate(45deg);
  margin-right: 0;
  margin-left: .5em;
}

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .case-study-navigation .nav-links {
    flex-direction: column;
    gap: 24px;
  }

  .case-study-navigation .nav-previous,
  .case-study-navigation .nav-next {
    margin: 0;
  }
}

/* Optional: a stronger divider variant if desired */
.case-study-navigation.hr-strong {
  border-top: 1px solid hsla(0, 0%, 100%, .3);
}

/* ==========================================================================
   TYPOGRAPHY COMPONENTS
   ========================================================================== */

.eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
}

.large-heading {
  font-size: clamp(2.75rem, 5vw, 4rem);
  line-height: 1.05;
}

.body-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-primary);
}

.body-text p + p {
  margin-top: 1rem;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(229, 231, 235, 0.2);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.button:hover {
  background-color: rgba(229, 231, 235, 0.08);
  opacity: 1;
}

/* ==========================================================================
   IMAGES
   ========================================================================== */

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Full-bleed utility: ignores container width and spans the viewport */
.full-bleed {
  display: block;
  width: 100vw;                          /* span full viewport width */
  max-width: 100vw;
  margin-left: calc(50% - 50vw);         /* pull out of centered container */
  margin-right: calc(50% - 50vw);
}

/* Optional: keep media crisp and rounded if you like */
.full-bleed img,
.full-bleed video {
  width: 100%;
  height: auto;
  display: block;
  /* border-radius: 8px; */              /* uncomment if you want rounding */
}

/* If your container adds side padding, you can also nuke it for full bleed sections */
.full-bleed-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

figure { margin: 0; }

figcaption {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: 0.5rem;
  padding: 0 2rem;
}

/* ==========================================================================
   WORDPRESS ALIGNMENT CLASSES
   ========================================================================== */

.alignleft {
  float: left;
  margin-right: 2rem;
  margin-bottom: 1rem;
}

.alignright {
  float: right;
  margin-left: 2rem;
  margin-bottom: 1rem;
}

.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

.alignwide {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  max-width: 100%;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:focus {
  background-color: var(--color-background);
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: var(--color-text-primary);
  display: block;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ==========================================================================
   GUTENBERG BLOCKS: 
   ========================================================================== */

/* Hero Block Styles */
.craft-hero-block {
  padding: 4rem 0;
  margin-bottom: 4rem;
}

.craft-hero-block h1 {
  font-size: clamp(3rem, 6vw, 6rem);
  margin-bottom: 1.5rem;
}

.craft-hero-block .subtitle {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: var(--color-text-secondary);
}

/* Text Block Styles */
.craft-text-block {
  padding: 3rem 0;
}

.craft-text-block .craft-grid { gap: var(--craft-gap-grid); }

.craft-text-block h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  margin-bottom: 1.5rem;
}

.craft-text-block p { line-height: 1.7; }

/* Image Grid Styles */
.craft-image-grid { padding: 3rem 0; }

.craft-image-grid .craft-grid { gap: var(--craft-gap-inner); }

/* Two Column Styles */
.craft-two-column { padding: 4rem 0; }

.craft-two-column .craft-grid {
  align-items: center;
  gap: var(--craft-gap-grid);
}

.craft-two-column .column-content h3 { margin-bottom: 1rem; }
.craft-two-column .column-content p { margin-bottom: 1rem; }

@media (max-width: 768px) {
  .craft-two-column.reverse-mobile .craft-grid {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .craft-hero-block,
  .craft-text-block,
  .craft-image-grid,
  .craft-two-column {
    padding: 2rem 0;
  }
}
.gap-lg.wp-block-columns { --wp--style--block-gap: 8rem; }


/* ==========================================================================
   FEATURED WORK / WORK GRID
   ========================================================================== */

.featured-work,
.wp-block-craft-featured-work {
  width: 100%;
  max-width: var(--site-max-width);
  margin-inline: auto;
  padding: 0 var(--site-gutter) 8rem;
}

.featured-work__header {
  margin-bottom: 4rem;
}

.featured-work__grid {
  display: flex;
  flex-direction: column;
  gap: var(--craft-gap-grid);
}

.featured-work__row {
  display: grid;
  gap: var(--craft-gap-grid);
  align-items: stretch;
}

.featured-work__row--wide-left {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.featured-work__row--wide-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.featured-work__item,
.featured-work__link {
  position: relative;
  width: 100%;
  height: 100%;
}

.featured-work__link {
  z-index: 2;
  display: block;
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  transform-style: preserve-3d;
}

.featured-work__thumb {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-z: 0px;
  --tilt-glow-x: 50%;
  --tilt-glow-y: 50%;
  position: relative;
  width: 100%;
  height: var(--featured-work-row-height-desktop);
  overflow: hidden;
  background: #111111;
  border-radius: var(--media-radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0);
  transform:
    perspective(1200px)
    rotateX(var(--tilt-y))
    rotateY(var(--tilt-x))
    translateZ(var(--tilt-z));
  transform-origin: center;
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow .28s ease;
}

.featured-work__thumb img,
.featured-work__thumb video,
.featured-work__thumb .fw-image,
.featured-work__thumb .fw-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 350ms ease;
}

.featured-work__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .42), transparent 34%),
    linear-gradient(to top, rgba(0, 0, 0, .58), transparent 48%);
  pointer-events: none;
}

.featured-work__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      circle at var(--tilt-glow-x) var(--tilt-glow-y),
      rgba(255, 255, 255, .2),
      rgba(255, 255, 255, .05) 22%,
      transparent 48%
    );
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.featured-work__thumb.is-tilting {
  --tilt-z: 10px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .22);
}

.featured-work__thumb.is-tilting::before {
  opacity: 1;
}

.featured-work__link:hover {
  opacity: 1;
}

.featured-work__link:hover .featured-work__thumb img,
.featured-work__link:hover .featured-work__thumb video {
  transform: scale(1.03);
}

.featured-work__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: clamp(.8rem, 1.35vw, 1.25rem);
  color: #fff;
  pointer-events: none;
}

.featured-work__title {
  position: absolute;
  top: clamp(.8rem, 1.35vw, 1.25rem);
  left: clamp(.8rem, 1.35vw, 1.25rem);
  max-width: calc(100% - 5.5rem);
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(.85rem, 1.05vw, 1.1rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .38);
}

.featured-work__arrow {
  position: absolute;
  top: clamp(.65rem, 1.1vw, 1rem);
  right: clamp(.65rem, 1.1vw, 1rem);
  display: grid;
  place-items: center;
  width: clamp(2.35rem, 3vw, 2.85rem);
  height: clamp(2.35rem, 3vw, 2.85rem);
  color: #fff;
  background: rgba(24, 24, 24, .34);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  backdrop-filter: blur(12px);
  transition: color .25s ease, background-color .25s ease, transform .25s ease;
}

.featured-work__arrow span {
  position: relative;
  width: .82rem;
  height: .82rem;
}

.featured-work__arrow span::before,
.featured-work__arrow span::after {
  content: "";
  position: absolute;
}

.featured-work__arrow span::before {
  top: 0;
  right: 0;
  width: .58rem;
  height: .58rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.featured-work__arrow span::after {
  top: .08rem;
  right: .02rem;
  width: .98rem;
  border-top: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: right center;
}

.featured-work__services {
  position: absolute;
  left: clamp(.8rem, 1.35vw, 1.25rem);
  bottom: clamp(.8rem, 1.35vw, 1.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.featured-work__services li {
  margin: 0;
  padding: .38rem .68rem;
  color: #fff;
  background: rgba(40, 40, 40, .46);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: clamp(.56rem, .6vw, .65rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .32);
}

.featured-work__link:hover .featured-work__arrow,
.featured-work__link:focus-visible .featured-work__arrow {
  color: #171717;
  background: rgba(255, 255, 255, .9);
  transform: translate(2px, -2px);
}

@media (max-width: 1100px) {
  .featured-work__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .featured-work__row {
    display: contents;
  }

  .featured-work__row--wide-left > .featured-work__item:first-child,
  .featured-work__row--wide-right > .featured-work__item:last-child {
    grid-column: 1 / -1;
  }

  .featured-work__thumb {
    height: 320px;
  }
}

@media (max-width: 768px) {
  .featured-work,
  .wp-block-craft-featured-work {
    padding-block: 0 4rem;
  }

  .featured-work__grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .featured-work__row,
  .featured-work__row--wide-left,
  .featured-work__row--wide-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .featured-work__thumb {
    height: auto;
    aspect-ratio: 1 / 1;
  }

}

/* Desktop case-study media rhythm.
   Use one value for both the vertical space between media rows and the
   horizontal space between images inside a row. */
@media (min-width: 769px) {
  .single-case-study .cs-entry__content {
    --case-study-media-gap: clamp(2rem, 3vw, 3rem);
  }

  .single-case-study .cs-entry__content :where(
    .wp-block-columns:has(figure.wp-block-image),
    .wp-block-columns:has(figure.wp-block-video),
    .wp-block-columns:has(.wp-block-cover),
    .wp-block-gallery,
    .wp-block-group:has(> figure.wp-block-image),
    .wp-block-group:has(> figure.wp-block-video),
    .wp-block-group:has(> .wp-block-cover),
    .wp-block-group:has(> .wp-block-gallery),
    .wp-block-group:has(> .wp-block-columns)
  ) {
    --wp--style--block-gap: var(--case-study-media-gap);
    row-gap: var(--case-study-media-gap) !important;
    column-gap: var(--case-study-media-gap) !important;
  }

  .single-case-study .cs-entry__content > :where(
    figure.wp-block-image,
    figure.wp-block-video,
    .wp-block-cover,
    .wp-block-gallery,
    .wp-block-columns:has(figure.wp-block-image),
    .wp-block-columns:has(figure.wp-block-video),
    .wp-block-columns:has(.wp-block-cover),
    .wp-block-group:has(figure.wp-block-image),
    .wp-block-group:has(figure.wp-block-video),
    .wp-block-group:has(.wp-block-cover),
    .wp-block-group:has(.wp-block-gallery)
  ) {
    margin-block-end: 0 !important;
  }

  .single-case-study .cs-entry__content > :where(
    figure.wp-block-image,
    figure.wp-block-video,
    .wp-block-cover,
    .wp-block-gallery,
    .wp-block-columns:has(figure.wp-block-image),
    .wp-block-columns:has(figure.wp-block-video),
    .wp-block-columns:has(.wp-block-cover),
    .wp-block-group:has(figure.wp-block-image),
    .wp-block-group:has(figure.wp-block-video),
    .wp-block-group:has(.wp-block-cover),
    .wp-block-group:has(.wp-block-gallery)
  ) + :where(
    figure.wp-block-image,
    figure.wp-block-video,
    .wp-block-cover,
    .wp-block-gallery,
    .wp-block-columns:has(figure.wp-block-image),
    .wp-block-columns:has(figure.wp-block-video),
    .wp-block-columns:has(.wp-block-cover),
    .wp-block-group:has(figure.wp-block-image),
    .wp-block-group:has(figure.wp-block-video),
    .wp-block-group:has(.wp-block-cover),
    .wp-block-group:has(.wp-block-gallery)
  ) {
    margin-block-start: var(--case-study-media-gap) !important;
  }
}

/* v6.88/v6.89: case-study text sections (heading + paragraph, stacked, left column).
   Space above and below = 3x the gap between images. Change --cs-text-space-scale to tune (2 = double). */
.single-case-study .cs-entry__content {
  --cs-text-space-scale: 3;
}

.single-case-study .cs-entry__content .wp-block-columns.craft-cs-text {
  margin-block: calc(var(--case-study-media-gap, 2rem) * var(--cs-text-space-scale)) !important;
}

.single-case-study .cs-entry__content .craft-cs-text .wp-block-column > :first-child {
  margin-top: 0;
}

.single-case-study .cs-entry__content .craft-cs-text .wp-block-column > :last-child {
  margin-bottom: 0;
}

.single-case-study .cs-entry__content .craft-cs-text .wp-block-heading + p {
  margin-top: .75rem;
}

/* Mobile case-study media rhythm.
   Normalize WordPress block margins and nested column/group gaps so adjacent
   images and videos always use the same compact separation. */
@media (max-width: 768px) {
  .single-case-study .cs-entry__content {
    --case-study-media-gap: 1rem;
  }

  .single-case-study .cs-entry__content :where(
    figure.wp-block-image,
    figure.wp-block-video,
    .wp-block-cover,
    .wp-block-gallery
  ) {
    margin-block: 0;
  }

  .single-case-study .cs-entry__content > :where(
    figure.wp-block-image,
    figure.wp-block-video,
    .wp-block-cover,
    .wp-block-gallery
  ) + :where(
    figure.wp-block-image,
    figure.wp-block-video,
    .wp-block-cover,
    .wp-block-gallery
  ) {
    margin-top: var(--case-study-media-gap);
  }

  /* Keep the same gap when media is split across separate top-level
     Columns, Groups, Galleries, or individual media blocks. */
  .single-case-study .cs-entry__content > :where(
    figure.wp-block-image,
    figure.wp-block-video,
    .wp-block-cover,
    .wp-block-gallery,
    .wp-block-columns:has(figure.wp-block-image),
    .wp-block-columns:has(figure.wp-block-video),
    .wp-block-columns:has(.wp-block-cover),
    .wp-block-group:has(figure.wp-block-image),
    .wp-block-group:has(figure.wp-block-video),
    .wp-block-group:has(.wp-block-cover),
    .wp-block-group:has(.wp-block-gallery)
  ) {
    margin-block-end: 0 !important;
  }

  .single-case-study .cs-entry__content > :where(
    figure.wp-block-image,
    figure.wp-block-video,
    .wp-block-cover,
    .wp-block-gallery,
    .wp-block-columns:has(figure.wp-block-image),
    .wp-block-columns:has(figure.wp-block-video),
    .wp-block-columns:has(.wp-block-cover),
    .wp-block-group:has(figure.wp-block-image),
    .wp-block-group:has(figure.wp-block-video),
    .wp-block-group:has(.wp-block-cover),
    .wp-block-group:has(.wp-block-gallery)
  ) + :where(
    figure.wp-block-image,
    figure.wp-block-video,
    .wp-block-cover,
    .wp-block-gallery,
    .wp-block-columns:has(figure.wp-block-image),
    .wp-block-columns:has(figure.wp-block-video),
    .wp-block-columns:has(.wp-block-cover),
    .wp-block-group:has(figure.wp-block-image),
    .wp-block-group:has(figure.wp-block-video),
    .wp-block-group:has(.wp-block-cover),
    .wp-block-group:has(.wp-block-gallery)
  ) {
    margin-block-start: var(--case-study-media-gap) !important;
  }

  .single-case-study .cs-entry__content :where(
    .wp-block-columns,
    .wp-block-gallery,
    .wp-block-group:has(> figure.wp-block-image),
    .wp-block-group:has(> figure.wp-block-video),
    .wp-block-group:has(> .wp-block-cover),
    .wp-block-group:has(> .wp-block-gallery),
    .wp-block-group:has(> .wp-block-columns)
  ) {
    --wp--style--block-gap: var(--case-study-media-gap);
    row-gap: var(--case-study-media-gap) !important;
    column-gap: var(--case-study-media-gap) !important;
  }

  .single-case-study .cs-entry__content :where(
    .wp-block-columns,
    .wp-block-gallery,
    .wp-block-group:has(> figure.wp-block-image),
    .wp-block-group:has(> figure.wp-block-video),
    .wp-block-group:has(> .wp-block-cover),
    .wp-block-group:has(> .wp-block-gallery),
    .wp-block-group:has(> .wp-block-columns)
  ) > * {
    margin-block-start: 0 !important;
  }

  .single-case-study .cs-entry__content video {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
  }
}

/* Gutenberg Spacer blocks were previously adding an extra row of space
   between media blocks. Remove only spacers that sit directly between media,
   then let the shared media-gap token control both axes. */
.single-case-study .cs-entry__content .wp-block-group > .wp-block-spacer:not(:first-child):has(+ figure.wp-block-image),
.single-case-study .cs-entry__content .wp-block-group > .wp-block-spacer:not(:first-child):has(+ figure.wp-block-video),
.single-case-study .cs-entry__content .wp-block-group > .wp-block-spacer:not(:first-child):has(+ .wp-block-cover),
.single-case-study .cs-entry__content .wp-block-group > .wp-block-spacer:not(:first-child):has(+ .wp-block-gallery),
.single-case-study .cs-entry__content .wp-block-group > .wp-block-spacer:not(:first-child):has(+ .wp-block-columns) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
}

.single-case-study .cs-entry__content .wp-block-group:has(
  > figure.wp-block-image,
  > figure.wp-block-video,
  > .wp-block-cover,
  > .wp-block-gallery,
  > .wp-block-columns
) > :is(
  figure.wp-block-image,
  figure.wp-block-video,
  .wp-block-cover,
  .wp-block-gallery,
  .wp-block-columns:has(figure.wp-block-image),
  .wp-block-columns:has(figure.wp-block-video),
  .wp-block-columns:has(.wp-block-cover)
) {
  margin-block-start: var(--case-study-media-gap) !important;
  margin-block-end: 0 !important;
}

/* Keep mobile and tablet media locked to their actual layout positions.
   Fade-up transforms temporarily add 100px to visual row gaps. */
@media (max-width: 1024px) {
  .single-case-study .cs-entry__content :where(
    figure.wp-block-image,
    figure.wp-block-video,
    .wp-block-cover,
    .wp-block-gallery,
    .wp-block-columns:has(figure.wp-block-image),
    .wp-block-columns:has(figure.wp-block-video),
    .wp-block-columns:has(.wp-block-cover),
    .wp-block-group:has(> figure.wp-block-image),
    .wp-block-group:has(> figure.wp-block-video),
    .wp-block-group:has(> .wp-block-cover),
    .wp-block-group:has(> .wp-block-gallery),
    .wp-block-group:has(> .wp-block-columns)
  )[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-work__thumb {
    transform: none !important;
    box-shadow: none !important;
  }

  .featured-work__thumb::before {
    opacity: 0 !important;
  }
}

/* ==========================================================================
   HOME INTRO BLOCK
   100vh hero, left-aligned text, arrow at bottom-left
   ========================================================================== */

.craft-home-intro {
  position: relative;
  height: 90vh;              /* force full browser height */
  display: flex;
  align-items: center;        /* vertically center the text */
  padding: 4rem 0;
  overflow: hidden;
  color: var(--color-text-primary);
}

.craft-home-intro__content {
  position: relative;
  z-index: 1;
  margin: 0;                  /* left-aligned within span-12 */
  text-align: left;
}

.craft-home-intro__title {
  font-size: clamp(1.5rem, 3.5vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  max-width: 80%;
}

.craft-home-intro__body {
  font-size: 0.95rem;
  line-height: 1.8;
}

/* down arrow pinned to bottom-left of the hero */
.craft-home-intro__arrow {
  position: absolute !important;
  left: 24px !important;
  bottom: 24px !important;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transform: none !important; /* kill any old centering transforms */
}

.craft-home-intro__arrow-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.85;
  animation: craft-home-intro-arrow-bounce 1.4s infinite ease-in-out;
}

@keyframes craft-home-intro-arrow-bounce {
  0%, 20% { transform: translateY(0) rotate(-45deg); }
  50% { transform: translateY(6px) rotate(-45deg); }
  100% { transform: translateY(0) rotate(-45deg); }
}

@media (max-width: 768px) {
  .craft-home-intro { 
    padding: 3rem 0; 
  }

  .craft-home-intro__title {
    font-size: clamp(2.2rem, 5.5vw, 2.3rem);
    max-width: 100%; /* give it the full width to wrap nicely */
  }

  .craft-home-intro__arrow { 
    left: 16px !important; 
    bottom: 16px !important; 
  }
}

/* ==========================================================================
   WORK SLIDER BLOCK
   Full-width, fixed center slide, dimmed neighbors, sliding transform
   ========================================================================== */

.craft-work-slider {
  position: relative;
  padding: clamp(60px, 10vh, 90px) 0;

  /* 🎛 TUNING KNOBS */
  --craft-slider-gap: 60vw;            /* distance from center to side slides */
  --craft-slider-duration: 0.4s;       /* slide animation length */
  --craft-slider-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --craft-slider-scale-active: 1;      /* scale of center slide */
  --craft-slider-scale-side: 0.7;      /* scale of side slides */
}

/* Don't constrain to theme container width */
.craft-work-slider .craft-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Make the viewport full browser width, centered on page */
.craft-work-slider__viewport {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: visible;
}

/* Track is a stacking context (not a flex row) */
.craft-work-slider__track {
  position: relative;
  width: 100%;
  height: clamp(280px, 52vw, 720px); /* approximate hero height */
}

/* Base slide */
.craft-work-slider__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(80vw, var(--site-max-width));
  max-width: var(--site-max-width);
  transform: translate(-50%, -50%) scale(var(--craft-slider-scale-side));
  transform-origin: center center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: transform var(--craft-slider-duration) var(--craft-slider-ease);
}

.craft-work-slider__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Media wrapper */
.craft-work-slider__media {
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111;
}

.craft-work-slider__media img,
.craft-work-slider__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Caption */
.craft-work-slider__caption {
  margin-top: 14px;
  font-size: 0.9rem;
}

/* State styles ----------------------------------------------------------- */

.craft-work-slider__slide[data-state="active"] {
  transform: translate(-50%, -50%) scale(var(--craft-slider-scale-active));
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
  filter: none;
}

.craft-work-slider__slide[data-state="prev"],
.craft-work-slider__slide[data-state="next"] {
  opacity: 0.4;
  filter: grayscale(0.4) brightness(0.75);
  z-index: 2;
  pointer-events: auto;
}

.craft-work-slider__slide[data-state="prev"] {
  transform: translate(calc(-50% - var(--craft-slider-gap)), -50%) scale(var(--craft-slider-scale-side));
}

.craft-work-slider__slide[data-state="next"] {
  transform: translate(calc(-50% + var(--craft-slider-gap)), -50%) scale(var(--craft-slider-scale-side));
}

.craft-work-slider__slide[data-state="hidden"] {
  transform: translate(-50%, -50%) scale(var(--craft-slider-scale-side));
  opacity: 0;
  filter: grayscale(0.5) brightness(0.4);
  pointer-events: none;
  z-index: 1;
}

/* Hover zones + arrows --------------------------------------------------- */

.craft-work-slider__hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 4;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.craft-work-slider__hit--left { left: 0; justify-content: flex-start; }
.craft-work-slider__hit--right { right: 0; justify-content: flex-end; }

.craft-work-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-text-primary);
  color: var(--color-background);
  box-shadow: 0 0 0 0 rgba(229, 231, 235, 0);
  opacity: 0;
  margin: 0 clamp(28px, 4vw, 52px);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.craft-work-slider__arrow::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.craft-work-slider__hit--left:hover .craft-work-slider__arrow--prev {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(229, 231, 235, 0.2);
}

.craft-work-slider__hit--right:hover .craft-work-slider__arrow--next {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(229, 231, 235, 0.2);
}

/* Responsive tweaks ------------------------------------------------------ */

@media (max-width: 900px) {
  .craft-work-slider { --craft-slider-gap: 32vw; }
}

/* =========================================
   Work Slider – mobile layout
   One centered slide, no overflow
   ========================================= */

@media (max-width: 768px) {
  /* Slightly tighter padding on mobile */
  .craft-work-slider {
    padding: 3rem 0 4rem;
  }

  /* Viewport behaves like a normal container */
  .craft-work-slider__viewport {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    transform: none !important;
    padding-inline: 0;
    overflow: hidden;
  }

  /* Track just wraps the active slide height */
  .craft-work-slider__track {
    position: relative;
    width: 100%;
    height: auto;
  }

  /* Each slide becomes a simple centered block */
  .craft-work-slider__slide {
    position: static !important;
    width: 100%;
    max-width: 520px;          /* tweak this if you want wider/narrower */
    margin: 0 auto;
    transform: none !important;
    opacity: 0;
    pointer-events: none;
    filter: none;
  }

  /* Only the active slide is visible/clickable */
  .craft-work-slider__slide[data-state="active"] {
    opacity: 1;
    pointer-events: auto;
  }

  .craft-work-slider__slide[data-state="prev"],
  .craft-work-slider__slide[data-state="next"],
  .craft-work-slider__slide[data-state="hidden"] {
    display: none !important;
  }

  /* Media box – keep it clean and responsive */
  .slider-image {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #111;
  }

  .slider-image .video,
  .slider-image video,
  .slider-image img,
  .slider-image .related__ph {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Hide the big hover hit zones + arrows on touch */
  .craft-work-slider__hit,
  .craft-work-slider__arrow {
    display: none !important;
  }
}

/* ==========================================================================
   TEXT BLOCK
   ========================================================================== */

.craft-text-block-shell {
  width: 100%;
  max-width: var(--site-max-width);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
  box-sizing: border-box;
}

.craft-text-block {
  --text-block-max-width: var(--measure-reading);
  width: min(100%, var(--text-block-max-width));
  max-width: 100%;
  box-sizing: border-box;
  color: var(--color-text-primary);
}

.craft-text-block--width-compact { --text-block-max-width: var(--measure-heading); }
.craft-text-block--width-narrow { --text-block-max-width: var(--measure-narrow); }
.craft-text-block--width-readable { --text-block-max-width: var(--measure-reading); }
.craft-text-block--width-wide { --text-block-max-width: var(--measure-wide); }
.craft-text-block--width-full { --text-block-max-width: 100%; }

/* Manual aliases for Advanced → Additional CSS Classes. */
.craft-text-width-compact { --text-block-max-width: var(--measure-heading) !important; }
.craft-text-width-narrow { --text-block-max-width: var(--measure-narrow) !important; }
.craft-text-width-readable { --text-block-max-width: var(--measure-reading) !important; }
.craft-text-width-wide { --text-block-max-width: var(--measure-wide) !important; }
.craft-text-width-full { --text-block-max-width: 100% !important; }

.craft-text-block__eyebrow {
  margin: 0 0 .75rem;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 800;
  line-height: var(--eyebrow-line-height);
  letter-spacing: var(--eyebrow-letter-spacing);
  text-transform: uppercase;
}

.craft-text-block__heading {
  --heading-max-width: var(--text-block-max-width);
  max-width: min(100%, var(--heading-max-width));
  margin-top: 0;
  color: var(--color-text-primary);
}

.craft-text-block__heading--width-match { --heading-max-width: var(--text-block-max-width); }
.craft-text-block__heading--width-compact { --heading-max-width: var(--measure-heading); }
.craft-text-block__heading--width-narrow { --heading-max-width: var(--measure-narrow); }
.craft-text-block__heading--width-readable { --heading-max-width: var(--measure-reading); }
.craft-text-block__heading--width-wide { --heading-max-width: var(--measure-wide); }
.craft-text-block__heading--width-full { --heading-max-width: 100%; }

.craft-text-block__heading--mega {
  max-width: min(100%, var(--heading-max-width));
  font-size: clamp(var(--mega-h1-size-min), var(--mega-h1-size-fluid), var(--mega-h1-size-max));
  line-height: var(--mega-h1-line-height);
  letter-spacing: var(--mega-h1-letter-spacing);
}

@media (max-width: 900px) {
  .craft-text-block__heading--mega {
    font-size: clamp(2.5rem, 5.5vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -.025em;
  }
}

@media (max-width: 600px) {
  .craft-text-block__heading--mega {
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: 1.08;
    letter-spacing: -.02em;
  }
}

.mega-one-line .craft-text-block__heading--mega {
  max-width: none;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .mega-one-line .craft-text-block__heading--mega {
    white-space: normal;
  }
}

.wp-block-column .mega-one-line .craft-text-block__heading--mega {
  white-space: normal;
}

.craft-text-block__body {
  max-width: min(100%, var(--text-block-max-width));
  color: var(--color-text-secondary);
}

.craft-text-block__body > :first-child {
  margin-top: 0;
}

.craft-text-block__body > :last-child,
.craft-text-block > :last-child {
  margin-bottom: 0;
}

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

.craft-text-block--center :is(.craft-text-block__heading, .craft-text-block__body) {
  margin-inline: auto;
}

.craft-text-block--right {
  text-align: right;
}

.craft-text-block--right :is(.craft-text-block__heading, .craft-text-block__body) {
  margin-left: auto;
}

.craft-text-block--position-left {
  margin-left: 0;
  margin-right: auto;
}

.craft-text-block--position-center {
  margin-inline: auto;
}

.craft-text-block--position-right {
  margin-left: auto;
  margin-right: 0;
}

/* ==========================================================================
   PROJECT CREDITS BLOCK
   ========================================================================== */

/*
 * Project introduction shell.
 * Add `craft-project-intro` to the parent Columns block for an explicit hook.
 * Modern browsers also apply it automatically when the Columns block contains
 * Project Credits, keeping older pages centered without a manual class.
 */
:where(
  .wp-block-columns.craft-project-intro,
  .wp-block-columns:has(.craft-project-credits-shell)
) {
  width: 100%;
  max-width: var(--site-max-width);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
  column-gap: clamp(3rem, 7vw, 8rem);
  align-items: flex-start !important;
}

:where(
  .wp-block-columns.craft-project-intro,
  .wp-block-columns:has(.craft-project-credits-shell)
) > .wp-block-column {
  min-width: 0;
}

:where(
  .wp-block-columns.craft-project-intro,
  .wp-block-columns:has(.craft-project-credits-shell)
) .craft-text-block-shell {
  padding-inline: 0;
}

:where(
  .wp-block-columns.craft-project-intro,
  .wp-block-columns:has(.craft-project-credits-shell)
) .craft-text-block {
  padding: 1rem 0 0;
  border-top: 1px solid rgba(156, 163, 175, .35);
}

.craft-project-credits-shell {
  display: flex;
  width: 100%;
  max-width: 34rem;
  min-width: 0;
  box-sizing: border-box;
}

.wp-block-column > .craft-project-credits-shell {
  flex: 0 0 auto;
  height: auto;
}

.craft-project-credits--position-top {
  align-items: flex-start;
}

.craft-project-credits--position-center {
  align-items: center;
}

.craft-project-credits--position-bottom {
  align-items: flex-end;
}

.craft-project-credits {
  width: 100%;
  padding-top: 1rem;
  border-top: 1px solid rgba(156, 163, 175, .35);
}

.craft-project-credits__heading {
  margin: 0 0 2rem;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 800;
  line-height: var(--eyebrow-line-height);
  letter-spacing: var(--eyebrow-letter-spacing);
  text-transform: uppercase;
}

.craft-project-credits__list {
  display: grid;
  gap: 1.25rem;
  margin: 0;
}

.craft-project-credits__item {
  display: grid;
  grid-template-columns: minmax(8rem, .75fr) minmax(0, 1.25fr);
  gap: 1.5rem;
  align-items: baseline;
}

.craft-project-credits__role,
.craft-project-credits__name {
  margin: 0;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
}

.craft-project-credits__role {
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.craft-project-credits__name {
  color: var(--color-text-primary);
}

.craft-project-credits__name a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.craft-project-credits__name a:hover {
  color: var(--color-text-secondary);
}

/* Project Services sits at the foot of the heading column as portfolio pills. */
:where(
  .wp-block-columns.craft-project-intro,
  .wp-block-columns:has(.craft-project-credits-shell),
  .wp-block-columns:has(.craft-project-services-shell)
) > .wp-block-column:has(> .craft-project-services-shell) {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

@media (min-width: 782px) {
  .wp-block-columns.craft-copy-align-heading > .wp-block-column:first-child > .craft-project-services-shell {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: start;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }
}

.craft-project-services-shell {
  width: 100%;
  max-width: 34rem;
  min-width: 0;
  margin-top: auto;
  box-sizing: border-box;
}

.craft-project-services {
  width: 100%;
  padding: 0;
  border: 0;
}

.craft-project-services__heading {
  display: none;
}

.craft-project-services__list {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.craft-project-services__list li {
  margin: 0;
  padding: .38rem .68rem;
  color: var(--color-text-primary);
  background: rgba(40, 40, 40, .46);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  font-family: var(--font-mono);
  font-size: clamp(.56rem, .6vw, .65rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .32);
}

.craft-project-credits-shell + .craft-project-services-shell {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   v6.91 CASE-STUDY HERO + DETAILS SIDEBAR
   Columns block with class "craft-cs-hero":
     left  = eyebrow + headline, then the intro paragraphs
     right = column with class "craft-cs-details": Project Credits (Label | Value)
             + Project Services, shown as a plain list.
   -------------------------------------------------------------------------- */
.single-case-study .cs-entry__content .wp-block-columns.craft-cs-hero {
  padding-block: 3rem;
}

/* v6.99: no rules in the hero. main.js sets the top padding so the hero sits
   centered between the navigation and the first image. */
.single-case-study .cs-entry__content .wp-block-columns.craft-cs-hero {
  position: relative;
}

.craft-cs-hero {
  --cs-top-space: 0px;
}



/* Neutralize the older "columns with credits" intro styling inside this hero. */
.wp-block-columns.craft-cs-hero .craft-text-block-shell { padding-inline: 0; }
.wp-block-columns.craft-cs-hero .craft-text-block { padding: 0; border-top: 0; }
.wp-block-columns.craft-cs-hero > .wp-block-column:first-child > .craft-text-block-shell + .craft-text-block-shell { margin-top: 2rem; }

@media (min-width: 782px) {
  .single-case-study .cs-entry__content .wp-block-columns.craft-cs-hero {
    display: grid !important;
    /* v7.04: the details column sizes to its content (up to 45%), so its longest
       line ends exactly at the right content edge; values stay left-aligned. */
    grid-template-columns: minmax(0, var(--cs-overview-width, 50%)) fit-content(45%);  /* v7.05: overview 40% → 50% */
    justify-content: space-between;
    column-gap: 2rem;
    align-items: start !important;
  }

  .wp-block-columns.craft-cs-hero > .wp-block-column {
    flex-basis: auto !important;
    width: auto;
    min-width: 0;
  }
}

.craft-cs-details .craft-project-credits-shell,
.craft-cs-details .craft-project-services-shell {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Desktop: the hero's full-width rule (::before) is the only line; no rule of its own here. */
/* v7.00: main.js sets --cs-details-offset so the CLIENT label's cap height lines up
   with the top of the headline. */
.craft-cs-details .craft-project-credits {
  padding-top: var(--cs-details-offset, 0px);
  border-top: 0;
}

/* v6.95: one table — Client / Year / Role / Industry / Services — with a hairline between rows. */
.craft-cs-details {
  --cs-row-pad: .7rem;
  --cs-row-line: 0;                /* v6.99: no lines between rows */
}

.craft-cs-details .craft-project-credits__list {
  gap: 0;
}

.craft-cs-details .craft-project-credits__item,
.craft-cs-details .craft-project-services {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: var(--cs-row-pad);
}

/* v7.01: values left-aligned in their column (v6.98 right alignment reverted). */
.craft-cs-details .craft-project-credits__name {
  text-align: left;
}

.craft-cs-details .craft-project-credits__item:first-child {
  padding-top: 0;
}

.craft-cs-details .craft-project-credits__item + .craft-project-credits__item,
.craft-cs-details .craft-project-services {
  border-top: var(--cs-row-line);
}

/* Labels: body mono, grey, uppercase. Values: same face, lighter off-white. */
.craft-cs-details .craft-project-credits__role,
.craft-cs-details .craft-project-services__heading {
  margin: 0;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: .875rem;      /* = client eyebrow */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.craft-cs-details .craft-project-credits__name,
.craft-cs-details .craft-project-services__list li {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: .875rem;      /* = client eyebrow */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}

.craft-cs-details .craft-project-services-shell {
  margin-top: 0;
}

.craft-cs-details .craft-project-services__heading {
  display: block;
  margin-bottom: 0;
}

/* one service per line, in the value column */
.craft-cs-details .craft-project-services__list {
  display: block;
  margin: 0;
}

.craft-cs-details .craft-project-services__list li {
  display: block;
}

.craft-cs-details .craft-project-services__list li {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: none;
}

@media (max-width: 781px) {
  .wp-block-columns.craft-cs-hero > .wp-block-column.craft-cs-details {
    margin-top: 2.5rem;
  }

  .craft-cs-details .craft-project-credits {
    padding-top: 0;
    border-top: 0;
  }
}

/*
 * Case-study opening rhythm.
 * Give the introductory Columns block the same space above and below so the
 * sequence reads consistently: navigation → intro content → first image.
 */
.single-case-study .cs-entry__content {
  --case-study-intro-gap: clamp(2rem, 3vw, 3rem);
}

.single-case-study .cs-entry__content > :where(
  .wp-block-columns.craft-copy-align-heading,
  .wp-block-columns.craft-project-intro,
  .wp-block-columns:first-child
) {
  margin-block: var(--case-study-intro-gap) !important;
}

@media (max-width: 781px) {
  :where(
    .wp-block-columns.craft-project-intro,
    .wp-block-columns:has(.craft-project-credits-shell)
  ) {
    padding-inline: var(--site-gutter);
    row-gap: 0;
  }

  .craft-project-credits-shell,
  .craft-project-services-shell {
    max-width: none;
    height: auto !important;
    margin-top: 1rem;
  }

  .wp-block-columns.craft-copy-align-heading {
    row-gap: 2rem !important;
  }

  .wp-block-columns.craft-copy-align-heading > .wp-block-column:first-child > .craft-text-block-shell > .craft-text-block {
    padding-bottom: 0;
  }

  .wp-block-columns.craft-copy-align-heading > .wp-block-column:first-child > .craft-project-services-shell {
    margin-top: 2rem;
    padding-inline: var(--site-gutter);
  }

  .wp-block-columns.craft-copy-align-heading > .wp-block-column:nth-child(2) > .craft-text-block-shell > .craft-text-block {
    padding-top: 0;
  }

  .craft-project-credits--position-top,
  .craft-project-credits--position-center,
  .craft-project-credits--position-bottom {
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .craft-project-credits__item {
    grid-template-columns: 1fr;
    gap: .25rem;
  }
}

/* ==========================================================================
   HOME HERO
   ========================================================================== */

.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(var(--hero-min, 100dvh) - var(--header-height));
  padding-block: 0;
  overflow: hidden;
}

.home-hero__content {
  position: relative;
  width: 100%;
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding-inline: var(--site-gutter);
}

.home-hero__eyebrow {
  margin: 0 0 1rem;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--eyebrow-size);
  font-weight: 800;
  line-height: var(--eyebrow-line-height);
  letter-spacing: var(--eyebrow-letter-spacing);
  text-transform: uppercase;
}

.home-hero__headline,
.hero-heading {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: clamp(var(--hero-size-min), var(--hero-size-fluid), var(--hero-size-max));
  line-height: var(--hero-line-height);
}

.home-hero__headline-mobile {
  display: none;
}

@media (max-width: 900px) {
  .home-hero__headline,
  .hero-heading {
    font-size: clamp(2.25rem, 4.5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -.015em;
  }
}

@media (max-width: 600px) {
  .home-hero__headline-desktop {
    display: none;
  }

  .home-hero__headline-mobile {
    display: inline;
  }

  .home-hero__headline,
  .hero-heading {
    font-size: clamp(1.875rem, 8vw, 2.25rem);
    line-height: 1.12;
    letter-spacing: -.01em;
  }
}

.home-hero--interactive .home-hero__headline {
  cursor: default;
}

.home-hero__headline--liquid {
  transform: translateZ(0);
  will-change: filter;
}

.home-hero__effect-word {
  display: inline-block;
  font: inherit;
  letter-spacing: inherit;
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 62%;
  will-change: transform;
}

.home-hero__headline--chromatic {
  --effect-x: 0px;
  --effect-y: 0px;
  text-shadow:
    var(--effect-x) var(--effect-y) 0 rgba(0, 220, 255, .72),
    calc(var(--effect-x) * -1) calc(var(--effect-y) * -.65) 0 rgba(255, 48, 118, .68);
  will-change: text-shadow;
}

.home-hero__headline--tilt {
  transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0);
  transform-origin: 50% 50%;
  will-change: transform;
}

.home-hero__headline--glow {
  will-change: text-shadow;
}

.craft-liquid-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.home-hero--center {
  flex-direction: column;
}

.home-hero--center .home-hero__content {
  text-align: center;
}

.home-hero__down {
  position: absolute;
  left: max(var(--site-gutter), calc((100vw - var(--site-max-width)) / 2 + var(--site-gutter)));
  bottom: clamp(20px, 6vh, 56px);
  display: inline-grid;
  place-items: center;
  width: var(--hero-arrow-size);
  height: var(--hero-arrow-size);
  color: var(--hero-arrow-color);
  transform: none;
  animation: craftPulseAligned 2.6s ease-in-out 1.2s infinite;
  pointer-events: none;
}

.home-hero--center .home-hero__down {
  position: static;
  left: auto;
  bottom: auto;
  flex: 0 0 auto;
  margin-top: clamp(2rem, 4vh, 3rem);
}

.home-hero__down-icon {
  display: block;
  width: 70%;
  height: 70%;
}


.home-hero.on-light .home-hero__down {
  --hero-arrow-color: var(--color-background);
}

body.intro-locked {
  overflow: hidden;
}

body.intro-locked .site-main {
  height: var(--hero-min, 100dvh);
  overflow: hidden;
}

@media (min-width: 783px) {
  .admin-bar .home-hero {
    min-height: calc(var(--hero-min, 100dvh) - var(--header-height) - 32px);
  }
}

@media (max-width: 782px) {
  .admin-bar .home-hero {
    min-height: calc(var(--hero-min, 100dvh) - var(--header-height) - 46px);
  }
}

@keyframes craftPulseAligned {
  0%, 100% { transform: translateY(0) scale(1); opacity: .95; }
  50% { transform: translateY(0) scale(1.04); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__down {
    animation: none;
    transition: none;
  }

  .home-hero__headline--liquid {
    filter: none !important;
  }

  .home-hero__effect-word {
    transform: none !important;
  }

  .home-hero__headline--chromatic {
    text-shadow: none !important;
  }

  .home-hero__headline--tilt {
    transform: none !important;
  }

  .home-hero__headline--glow {
    text-shadow: none !important;
  }
}

/* --------------------------------------------------------------------------
   HOME HERO — Headline display style + sizing (v6.55)
   --custom-type: the hero's own display style (ignores site heading styles)
   --custom-size: fixed desktop/mobile sizes, fluid in between (1440px = desktop)
   --fit:         JS scales type so the longest phrase fills the container width
   -------------------------------------------------------------------------- */

.home-hero--custom-type .home-hero__headline {
  --heading-weight-axis: var(--hh-weight, 800);
  --heading-width-axis: var(--hh-width, 110);
  font-weight: var(--hh-weight, 800);
  font-variation-settings: "wdth" var(--hh-width, 110), "wght" var(--hh-weight, 800);
  line-height: var(--hh-line-height, .95);
  letter-spacing: var(--hh-tracking, -.04em);
}

.home-hero--upper .home-hero__headline {
  text-transform: uppercase;
}

.home-hero--custom-size .home-hero__headline {
  font-size: clamp(var(--hh-size-mobile), var(--hh-size-fluid), var(--hh-size));
}

/* Fit to width: CSS gives a close starting size; JS sets the exact size. */
.home-hero--fit .home-hero__headline {
  max-width: none;
  font-size: clamp(2.5rem, 11vw, 11rem);
}

.home-hero--fit .home-hero__typer {
  white-space: pre;
}

.home-hero__fit-probe {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  white-space: pre;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   HOME HERO — Typing headline (v6.54)
   -------------------------------------------------------------------------- */

.home-hero__typer {
  position: relative;
  display: block;
  min-height: calc(1em * var(--hh-line-height, var(--hero-line-height, 1.08)));
  white-space: pre-wrap;
}

.home-hero__typer-text.is-selected {
  background: var(--typing-select, var(--color-text-primary));
  color: var(--typing-select-text, var(--color-background));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.home-hero__caret {
  display: inline-block;
  width: .06em;
  height: .82em;
  margin-left: .04em;
  vertical-align: -.04em;
  background: var(--typing-caret, currentColor);
  animation: craftCaretBlink 1s steps(1) infinite;
}

.home-hero__caret.is-typing,
.home-hero__caret.is-static {
  animation: none;
}

.home-hero__caret.is-hidden {
  visibility: hidden;
}

.home-hero--no-caret .home-hero__caret {
  display: none;
}

@keyframes craftCaretBlink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__caret {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   HOME HERO — Subheadline + text scroll prompt (v6.58)
   -------------------------------------------------------------------------- */

.home-hero__subheadline {
  max-width: var(--measure-narrow);
  margin: clamp(1.25rem, 3vh, 2rem) 0 0;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: clamp(.9375rem, 1.2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  /* v6.72: even out the lines so a wrap never leaves one word alone on the last line */
  text-wrap: pretty;
  text-wrap: balance;
}

.home-hero__subheadline--small {
  font-size: clamp(.875rem, 1vw, 1rem);
}

.home-hero__subheadline--large {
  max-width: var(--measure-reading);
  font-size: clamp(1.0625rem, 1.6vw, 1.5rem);
  line-height: 1.5;
}

.home-hero__subheadline a {
  color: var(--color-text-primary);
}

.home-hero--center .home-hero__subheadline {
  margin-inline: auto;
}

/* Bottom bar (v6.59): static text pinned to the bottom of the hero
   (= bottom of the window at 100dvh). Left, middle and right slots. */
.home-hero__bottom {
  position: absolute;
  right: 0;
  bottom: clamp(1.25rem, 4vh, 2.5rem);
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1.5rem;
  width: 100%;
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding-inline: var(--site-gutter);
}

/* Matches the MENU/CLOSE label (.site-header__toggle-label) exactly. */
.home-hero__bottom-item {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: clamp(.625rem, .7vw, .7rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-hero__bottom-item--left   { grid-column: 1; justify-self: start;  text-align: left; }
.home-hero__bottom-item--center { grid-column: 2; justify-self: center; text-align: center; }
.home-hero__bottom-item--right  { grid-column: 3; justify-self: end;    text-align: right; }

.home-hero__bottom-item a {
  color: inherit;
  text-decoration: none;
}

.home-hero__bottom-item a:hover,
.home-hero__bottom-item a:focus-visible {
  opacity: .5;
}

.home-hero.on-light .home-hero__bottom-item {
  color: var(--color-background);
}

/* Phones: middle item on its own row, left and right share the row below. */
@media (max-width: 600px) {
  .home-hero__bottom {
    grid-template-columns: 1fr 1fr;
    row-gap: .75rem;
    column-gap: 1rem;
  }

  .home-hero__bottom-item--center { grid-column: 1 / -1; grid-row: 1; }
  .home-hero__bottom-item--left   { grid-column: 1; grid-row: 2; }
  .home-hero__bottom-item--right  { grid-column: 2; grid-row: 2; }
}

/* v6.84: phones — the contact links step aside (they're in the menu and footer) and the
   bar becomes one centered column with the Float / Grid switch at the bottom center. */
@media (max-width: 700px) {
  .home-hero__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
  }

  .home-hero__bottom-item {
    text-align: center;
  }

  .home-hero__bottom .home-hero__contact {
    display: none !important;
  }

  .home-hero__bottom .home-hero__switch {
    order: 9;
  }
}

/* --------------------------------------------------------------------------
   HOME HERO — Background textures (v6.59)
   Canvas sits behind the content. "Fade edges" softens it toward the borders.
   -------------------------------------------------------------------------- */

.home-hero__texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.home-hero--textured .home-hero__content,
.home-hero--textured .home-hero__bottom {
  z-index: 1;
}

/* v6.71: the edge fade is a static overlay in the background color instead of a
   CSS mask on the animated canvas (the mask halved the frame rate on large screens). */
.home-hero__texture-fade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 35%, var(--color-background) 100%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   COPY EMAIL LINKS (v6.55)
   mailto: links copy the address; the label slides up and "Copied" takes its
   place. Add class "no-copy" to a menu item to keep a normal mailto link.
   -------------------------------------------------------------------------- */

.craft-copy {
  cursor: copy;
}

/* Keep "Copied" fully visible even while the link is hovered (menu dims hovered links). */
.craft-copy.is-copied,
.craft-copy.is-copied:hover,
.craft-copy.is-copied:focus-visible {
  opacity: 1;
}

.craft-copy__swap {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
}

.craft-copy__label,
.craft-copy__done {
  grid-area: 1 / 1;
  justify-self: start;              /* v6.79: each layer keeps its own width (measurable) */
  white-space: nowrap;
  transition: transform .45s cubic-bezier(.7, 0, .2, 1), opacity .45s ease;
}

/* v6.79: the link is as wide as "Email"; it widens to fit "Copied" only while that shows. */
.craft-copy__swap.is-sized {
  width: var(--copy-w-label);
  transition: width .4s cubic-bezier(.7, 0, .2, 1);
}

.craft-copy.is-copied .craft-copy__swap.is-sized {
  width: var(--copy-w-done);
}

.craft-copy__done {
  white-space: nowrap;
}

/* "Copied" letters rise in one after another, then drop away on reset. */
.craft-copy__letter {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform .5s cubic-bezier(.2, .9, .25, 1.15),
    opacity .3s ease;
  transition-delay: calc(var(--i, 0) * 35ms);
}

.craft-copy.is-copied .craft-copy__label {
  transform: translateY(-105%);
  opacity: 0;
}

.craft-copy.is-copied .craft-copy__letter {
  transform: translateY(0);
  opacity: 1;
  transition-delay: calc(120ms + var(--i, 0) * 35ms);
}

@media (prefers-reduced-motion: reduce) {
  .craft-copy__label,
  .craft-copy__letter {
    transition: opacity .2s linear;
    transition-delay: 0s !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   WORK GRID — square layout (v6.62)
   Uniform 1:1 tiles, 3 columns by default (2–4 from the block settings).
   -------------------------------------------------------------------------- */

.featured-work--square .featured-work__grid {
  display: grid;
  grid-template-columns: repeat(var(--fw-columns, 3), minmax(0, 1fr));
  gap: var(--craft-gap-grid);
}

.featured-work--square .featured-work__thumb {
  height: auto;
  aspect-ratio: 1 / 1;
}

/* Tablets keep 3 columns for a 3x3 (no orphan tile); 2 and 4 columns become 2. */
@media (max-width: 1100px) {
  .featured-work--square .featured-work__grid {
    grid-template-columns: repeat(var(--fw-columns-tablet, 2), minmax(0, 1fr));
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .featured-work--square .featured-work__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

/* Mosaic layout: let row height grow with wider full-width tiles. */
body.craft-width-full .featured-work--mosaic {
  --featured-work-row-height-desktop: clamp(450px, 32vw, 820px);
}

/* --------------------------------------------------------------------------
   CASE STUDIES — full width + related tiles (v6.63)
   Media spans the same edges as the header and homepage grid. Text keeps a
   readable measure on the same left edge. Related projects reuse the square
   Work Grid tile.
   -------------------------------------------------------------------------- */

body.craft-width-full .single-case-study .case-study-content > .craft-container,
body.craft-width-full .single-case-study .related > .craft-container,
body.craft-width-full .single-case-study .cs-entry__content :where(
  .wp-block-columns.craft-project-intro,
  .wp-block-columns:has(.craft-project-credits-shell),
  .craft-text-block-shell
) {
  max-width: none;
}

/* The page container already supplies the gutter; drop the intro's second one
   so its text and top rule line up with the image edges (all screen sizes). */
body.craft-width-full .single-case-study .cs-entry__content :where(
  .wp-block-columns.craft-project-intro,
  .wp-block-columns:has(.craft-project-credits-shell)
) {
  padding-inline: 0 !important;
}

/* v6.86: text blocks inside a case-study column start on the page edge (with CRAFT,
   the service pills and the images) instead of picking up a second gutter. */
body.craft-width-full .single-case-study .cs-entry__content .wp-block-column > .craft-text-block-shell {
  padding-inline: 0;
}

/* v6.80: images and videos fill their figure on any screen. Without this an image stops
   at its own pixel width (often 1920px), so on very wide screens it ended short of MENU. */
.single-case-study .cs-entry__content .wp-block-image:not(.is-resized):not(.alignleft):not(.alignright):not(.aligncenter) img,
.single-case-study .cs-entry__content .wp-block-video video {
  width: 100%;
  height: auto;
}

/* Plain paragraphs, headings and lists placed directly in a case study. */
.single-case-study .cs-entry__content > :where(p, h2, h3, h4, ul, ol, blockquote) {
  max-width: var(--measure-reading);
}

.related .related__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--craft-gap-grid);
}

.related .featured-work__thumb {
  height: auto;
  aspect-ratio: 1 / 1;
}

.related__title-heading {
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

@media (max-width: 900px) {
  .related .related__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

@media (max-width: 600px) {
  .related .related__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}

/* --------------------------------------------------------------------------
   WORK GRID — editorial tiles (v6.64)
   Clean image (no radius, gradient or overlay), caption row below:
   project name left, "View project ↗" right with a hairline underline.
   -------------------------------------------------------------------------- */

.featured-work--square.featured-work--shape-portrait .featured-work__thumb,
.related--editorial .featured-work__thumb {
  aspect-ratio: 4 / 5;
}

.featured-work--caption-below .featured-work__grid,
.related--editorial .related__list {
  column-gap: clamp(.75rem, 1.1vw, 1.25rem);
  row-gap: clamp(2rem, 4vw, 4rem);
}

/* v6.90: Related projects use the same column gap as the case-study images above them. */
.single-case-study .related--editorial .related__list {
  column-gap: clamp(2rem, 3vw, 3rem);
}

@media (max-width: 768px) {
  .single-case-study .related--editorial .related__list {
    column-gap: 1rem;
  }
}

.featured-work--caption-below .featured-work__thumb,
.related--editorial .featured-work__thumb {
  border-radius: var(--media-radius);   /* v6.90: same rounding as every other image */
  box-shadow: none;
  transform: none;
}

.featured-work--caption-below .featured-work__thumb::before,
.featured-work--caption-below .featured-work__thumb::after,
.related--editorial .featured-work__thumb::before,
.related--editorial .featured-work__thumb::after {
  content: none;
}

.featured-work--caption-below .featured-work__thumb img,
.featured-work--caption-below .featured-work__thumb video,
.related--editorial .featured-work__thumb img,
.related--editorial .featured-work__thumb video {
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

.featured-work--caption-below .featured-work__link:hover .featured-work__thumb img,
.featured-work--caption-below .featured-work__link:hover .featured-work__thumb video,
.related--editorial .featured-work__link:hover .featured-work__thumb img,
.related--editorial .featured-work__link:hover .featured-work__thumb video {
  transform: scale(1.035);
}

.featured-work--caption-below .featured-work__item,
.featured-work--caption-below .featured-work__link,
.related--editorial .featured-work__item,
.related--editorial .featured-work__link {
  height: auto;
}

/* Caption row: name left, link right, sharing one baseline. */
.featured-work__caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.5rem;
  align-items: start;
  padding-top: .875rem;
  color: var(--color-text-primary);
}

/* v7.13: same type as the MENU label and footer links (Archivo 800, uppercase, .12em),
   a touch larger so project names stay easy to read. */
.featured-work__caption-title,
.featured-work__view {
  font-family: var(--font-display);
  font-size: clamp(.75rem, .8vw, .8125rem);
  font-weight: 800;
  font-variation-settings: "wdth" 100, "wght" 800;
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.featured-work__caption-title {
  margin: 0;
}

/* v7.14: name and services stack together on the left; VIEW PROJECT stays on the
   right, on the name's line, so the services never run underneath it. */
.featured-work__caption-title { grid-column: 1; grid-row: 1; }
.featured-work__view { grid-column: 2; grid-row: 1; }

.featured-work__caption-services {
  grid-column: 1;
  grid-row: 2;
  margin: .5rem 0 0;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: clamp(.6875rem, .7vw, .75rem);
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Underline spans label + arrow and sits just under the text. */
.featured-work__view {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding-bottom: .3em;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  white-space: nowrap;
}

.featured-work__view-arrow {
  display: block;
  flex: 0 0 auto;
  width: .72em;
  height: .72em;
  transition: transform .3s ease;
}

.featured-work__link:hover .featured-work__view-arrow,
.featured-work__link:focus-visible .featured-work__view-arrow {
  transform: translate(.12em, -.12em);
}

/* v6.90: the thumb clips to the 8px radius; media inside fills it with no radius of its own. */
.featured-work--caption-below .featured-work__thumb :is(img, video),
.related--editorial .featured-work__thumb :is(img, video) {
  border-radius: 0;
}

.featured-work--caption-below .featured-work__link:focus-visible,
.related--editorial .featured-work__link:focus-visible {
  outline: 1px solid var(--color-text-primary);
  outline-offset: 6px;
}

@media (max-width: 600px) {
  .featured-work__caption-title,
  .featured-work__view {
    font-size: .75rem;
  }

  /* v7.15: phones — name and services span the full width, VIEW PROJECT sits last. */
  .featured-work__caption-title,
  .featured-work__caption-services {
    grid-column: 1 / -1;
  }

  .featured-work__view {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: start;
    margin-top: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .featured-work--caption-below .featured-work__link:hover .featured-work__thumb img,
  .featured-work--caption-below .featured-work__link:hover .featured-work__thumb video,
  .related--editorial .featured-work__link:hover .featured-work__thumb img,
  .related--editorial .featured-work__link:hover .featured-work__thumb video {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   WORK GRID — floating view + Float/Grid switch (v6.66)
   -------------------------------------------------------------------------- */

.featured-work__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.featured-work__views {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-display);
  font-size: clamp(.625rem, .7vw, .7rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.featured-work__view-btn {
  min-height: 44px;
  padding: 0 .35em;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: .6;
  transition: opacity .25s ease;
}

.featured-work__view-btn[aria-pressed="true"],
.featured-work__view-btn:hover,
.featured-work__view-btn:focus-visible {
  opacity: 1;
}

.featured-work__views-sep { opacity: .6; }

/* Which view shows. Without JavaScript the grid always shows. */
.featured-work--has-float:not(.has-js) .featured-work__float,
.featured-work--has-float:not(.has-js) .featured-work__toolbar,
.featured-work--has-float.is-view-grid .featured-work__float,
.featured-work--has-float.has-js.is-view-float .featured-work__grid {
  display: none;
}

/* The field bleeds to the window edges so images drift in and out of frame. */
.featured-work__float {
  position: relative;
  height: clamp(560px, calc(100vh - var(--header-height)), 1100px);
  height: clamp(560px, calc(100svh - var(--header-height)), 1100px);
  margin-inline: calc(-1 * var(--site-gutter));
  overflow: hidden;
}

.featured-work__float-item {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  color: var(--color-text-primary);
  text-decoration: none;
  opacity: 0;
  will-change: transform;
  transition: opacity .5s ease;
}

.is-float-ready .featured-work__float-item,
.featured-work__float.is-ready .featured-work__float-item {
  opacity: 1;
}

.featured-work__float-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.featured-work__float-media.featured-work__ph {
  aspect-ratio: 4 / 5;
  background: #2a2a2a;
}

.featured-work__float.is-hovering .featured-work__float-item:not(.is-active) {
  opacity: .3;
}

.featured-work__float-item.is-active .featured-work__float-media {
  transform: scale(1.03);
}

.featured-work__float-item:focus-visible {
  outline: 1px solid var(--color-text-primary);
  outline-offset: 6px;
}

/* Cursor label (mouse/trackpad) */
.featured-work__float-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
  display: grid;
  gap: .3rem;
  max-width: 22rem;
  padding: .6rem .75rem;
  color: var(--color-text-primary);
  background: var(--color-background);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.featured-work__float-label.is-visible {
  opacity: 1;
}

.featured-work__float-label-title,
.featured-work__float-caption {
  font-family: var(--font-display);
  font-size: clamp(.8125rem, .85vw, .9375rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.featured-work__float-label-services {
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.featured-work__float-label-services:empty { display: none; }

/* Touch screens: caption under each image instead of the cursor label. */
.featured-work__float-caption {
  display: none;
  margin-top: .5rem;
}

@media (pointer: coarse) {
  .featured-work__float-caption { display: block; }
  .featured-work__float-label { display: none; }
}

/* Optional big word in the middle, inverted over the images. */
.featured-work__float-center {
  position: absolute;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 12rem);
  font-weight: 800;
  font-variation-settings: "wdth" 110, "wght" 800;
  line-height: .9;
  letter-spacing: -.04em;
  text-align: center;
  text-transform: uppercase;
  mix-blend-mode: difference;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   HOME HERO — floating projects behind the headline (v6.67)
   One page-wide Float / Grid switch (in a bottom-bar slot):
   Float = images drift behind the hero text, Work Grid hidden.
   Grid  = images leave the hero, Work Grid shows below.
   Add class "craft-grid-only" to any block that should hide in Float mode
   (e.g. the "Selected Work" heading above the grid).
   -------------------------------------------------------------------------- */

.home-hero .home-hero__float {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: auto;
  margin: 0;
  transition: opacity .6s ease, visibility .6s;
}

html.craft-view-grid .home-hero .home-hero__float {
  opacity: 0;
  visibility: hidden;
}

.home-hero--float .home-hero__content {
  z-index: 1;
  pointer-events: none;           /* let images under the headline be hovered/clicked */
}

.home-hero--float .home-hero__content a,
.home-hero--float .home-hero__content button {
  pointer-events: auto;
}

.home-hero--float .home-hero__bottom {
  z-index: 2;
}

.featured-work__float-label.is-hero-label {
  z-index: 5;
}

/* Behind the hero text, touch captions would clash with the headline: hide them. */
.home-hero .featured-work__float-caption {
  display: none !important;
}

/* Slightly dim images at rest so the headline and subheadline stay readable. */
.home-hero .featured-work__float.is-ready .featured-work__float-item {
  opacity: var(--hero-float-opacity, .85);
}

.home-hero .featured-work__float.is-ready .featured-work__float-item.is-active {
  opacity: 1;
}

.home-hero .featured-work__float.is-ready.is-hovering .featured-work__float-item:not(.is-active) {
  opacity: .3;
}

/* The switch inside the bottom bar inherits the MENU label style. */
.home-hero__switch {
  display: inline-flex;
  align-items: center;
  gap: .6em;
}

.craft-view-btn {
  /* v6.71: 44px tall hit area without changing the visual position */
  min-height: 44px;
  margin-block: -15px;
  padding: 0 .35em;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: .6;                    /* 5.7:1 on the background (was .4, 3.3:1) */
  transition: opacity .25s ease;
}

.craft-view-btn:focus-visible,
.featured-work__view-btn:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.craft-view-btn[aria-pressed="true"],
.craft-view-btn:hover,
.craft-view-btn:focus-visible {
  opacity: 1;
}

.craft-view-sep { opacity: .6; }

/* v6.75: contact links (Footer menu) in a bottom-bar slot, same type as the MENU label. */
.home-hero__contact {
  display: inline-flex;
  align-items: center;
  gap: .6em;
}

.home-hero__contact-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .6em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-hero__contact-list li {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0;
}

.home-hero__contact-list li + li::before {
  content: "/";
  opacity: .6;
}

.home-hero__contact a,
.home-hero__contact > span {
  color: inherit;
  text-decoration: none;
}

.home-hero__contact a {
  transition: opacity .25s ease;
}

.home-hero__contact a:hover,
.home-hero__contact a:focus-visible {
  opacity: .6;
}

.home-hero__contact a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

/* With floating projects in the hero, the Work Grid's own switch/float are not used. */
html.craft-has-hero-float .featured-work .featured-work__float,
html.craft-has-hero-float.craft-view-float .featured-work__toolbar {
  display: none !important;
}

html.craft-has-hero-float .featured-work--has-float.has-js.is-view-float .featured-work__grid {
  display: grid;
}

/* Float mode: the grid (and anything marked grid-only) steps aside. */
html.craft-has-hero-float.craft-view-float .craft-home .featured-work,
html.craft-has-hero-float.craft-view-float .craft-home .wp-block-craft-featured-work,
html.craft-has-hero-float.craft-view-float .craft-grid-only {
  display: none !important;
}

/* v6.71: other homepage blocks sit under the fixed hero in Float mode; take them out of
   the tab order and accessibility tree so keyboard focus can't land on invisible links. */
html.craft-has-hero-float.craft-view-float .craft-home__content > :not(.home-hero):not(:has(.home-hero)) {
  visibility: hidden;
}

/* Failsafe (work-float.js never ran): no lock, no hidden cards. */
html.craft-float-off .home-hero__float,
html.craft-float-off .home-hero__switch,
html.craft-float-off .featured-work__toolbar {
  display: none;
}

/* --------------------------------------------------------------------------
   WORK GRID — "G" tiles (v6.68)
   Landscape 3:2 images, service pills on the image (top-left), caption =
   hairline rule + project name (one line) + arrow. Related projects match.
   -------------------------------------------------------------------------- */

.featured-work--square.featured-work--shape-landscape .featured-work__thumb,
.related--pills .featured-work__thumb {
  aspect-ratio: 3 / 2;
}

.related--pills .related__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
  .related--pills .related__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.featured-work__pills {
  position: absolute;
  top: clamp(.625rem, 1vw, .875rem);
  right: clamp(.625rem, 1vw, .875rem);
  left: clamp(.625rem, 1vw, .875rem);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.featured-work__pills li {
  padding: 6px 10px;
  color: #fff;
  font-family: var(--font-body);
  font-size: clamp(.625rem, .7vw, .6875rem);
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(20, 20, 20, .72);   /* v6.71: ≥7.3:1 even over white covers */
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.featured-work__caption--arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;               /* v6.85: no rule above the caption */
}

/* v6.85: project names use the site's heading style (Archivo bold, wide axis, sentence
   case) — the same voice as the case-study titles and homepage tile titles. */
.featured-work__caption--arrow .featured-work__caption-title {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  font-weight: var(--heading-weight-axis);
  font-variation-settings: "wdth" var(--heading-width-axis), "wght" var(--heading-weight-axis);
  line-height: 1.2;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.featured-work__go {
  display: block;
  flex: 0 0 auto;
  width: 22px;
  height: 14px;
  transition: transform .3s ease;
}

.featured-work__link:hover .featured-work__go,
.featured-work__link:focus-visible .featured-work__go {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .featured-work__go { transition: none; }
}

/* --------------------------------------------------------------------------
   FLOAT / GRID as two page states (v6.70)
   Float: the hero locks to the screen and scrolling drives the cards in an
          endless loop (handled in js/work-float.js). The page itself doesn't move.
   Grid:  the hero animates away; only the portfolio grid (plus blocks marked
          craft-grid-only) shows, rising in from the top of the page.
   -------------------------------------------------------------------------- */

html.craft-has-hero-float.craft-view-float,
html.craft-has-hero-float.craft-view-float body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html.craft-has-hero-float.craft-view-float .home-hero--float {
  position: fixed;
  inset: 0;
  z-index: 100;                    /* under the fixed header (200) */
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--color-background);
  touch-action: pinch-zoom;        /* swipes drive the cards; pinch-zoom still works (WCAG 1.4.4) */
}

html.craft-has-hero-float.craft-view-float .site-footer {
  display: none;
}

/* Grid mode: hero gone, everything but the grid steps aside. */
html.craft-has-hero-float.craft-view-grid .home-hero--float {
  display: none !important;
}

/* Separate rule: browsers without :has() drop a whole selector list, which used to take the hero rule with it. */
html.craft-has-hero-float.craft-view-grid .craft-home__content > :not(.featured-work):not(.wp-block-craft-featured-work):not(.craft-grid-only):not(:has(.featured-work)) {
  display: none !important;
}

html.craft-has-hero-float.craft-view-grid .craft-home .featured-work {
  padding-top: clamp(1.5rem, 4vh, 3rem);
}

/* v6.82: Grid view heading row — the heading (hero typeface, statement size, two balanced
   lines) on the left, the Float / Grid switch on the right on its last line, then a
   hairline rule before the projects. */
.craft-home .featured-work:has(> .featured-work__header) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(1.5rem, 4vw, 4rem);
}

.craft-home .featured-work:has(> .featured-work__header) > * {
  grid-column: 1 / -1;
}

.craft-home .featured-work:has(> .featured-work__header) > .featured-work__header {
  grid-column: 1;
  grid-row: 1;
  align-self: last baseline;      /* v6.87: shares the headline's last baseline with the switch */
  margin-bottom: 0;
}

.craft-home .featured-work:has(> .featured-work__header) > .featured-work__toolbar {
  grid-column: 2;
  grid-row: 1;
  align-self: last baseline;
  margin-bottom: 0;
}

/* v6.83: "Heading area height" (Work Grid setting). The row grows to that share of the
   screen (less the fixed header and the section's top padding); heading, switch and rule
   stay anchored at the bottom. */
.featured-work[style*="--fw-intro-min"] > .featured-work__header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(0px, calc(var(--fw-intro-min) - var(--header-height, 72px) - clamp(1.5rem, 4vh, 3rem) - clamp(1.75rem, 3.5vw, 3rem)));
}

.craft-home .featured-work__header .featured-work__heading {
  max-width: 30ch;
  margin: 0;
  font-size: clamp(2rem, 1rem + 3.4vw, 5rem);
  text-wrap: balance;
}

.craft-home .featured-work:has(> .featured-work__header) > .featured-work__grid {
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
  padding-top: clamp(1.75rem, 3.5vw, 3rem);
  border-top: 1px solid rgba(229, 231, 235, .14);
}

@media (max-width: 700px) {
  .craft-home .featured-work:has(> .featured-work__header) > .featured-work__toolbar {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 1.25rem 0 0;
    justify-content: flex-start;
  }
}

/* Hero leaving: cards scatter outward and fade, text lifts away. */
html.craft-hero-leaving .home-hero__float {
  transform: scale(1.18);
  opacity: 0;
  transition: transform .65s cubic-bezier(.6, 0, .4, 1), opacity .55s ease;
}

html.craft-hero-leaving .home-hero--float .home-hero__content,
html.craft-hero-leaving .home-hero--float .home-hero__bottom {
  transform: translateY(-6vh);
  opacity: 0;
  transition: transform .6s cubic-bezier(.6, 0, .4, 1), opacity .45s ease;
}

/* Grid entering: toolbar, heading, then tiles rise in one after another. */
@keyframes craftRise {
  from { opacity: 0; transform: translateY(48px); }
  to   { opacity: 1; transform: none; }
}

html.craft-grid-entering .craft-grid-only,
html.craft-grid-entering .featured-work__toolbar {
  animation: craftRise .7s cubic-bezier(.2, .7, .2, 1) both;
}

html.craft-grid-entering .craft-home .featured-work__item {
  animation: craftRise .8s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(120ms + var(--i, 0) * 70ms);
}

/* Grid leaving (back to Float): grid sinks and fades. */
html.craft-grid-leaving .craft-home .featured-work,
html.craft-grid-leaving .craft-grid-only {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .35s ease, transform .38s cubic-bezier(.6, 0, .4, 1);
}

/* Hero entering: the field settles in from slightly zoomed, text fades up. */
@keyframes craftHeroIn {
  from { opacity: 0; transform: scale(1.12); }
  to   { opacity: 1; transform: none; }
}

@keyframes craftHeroTextIn {
  from { opacity: 0; transform: translateY(4vh); }
  to   { opacity: 1; transform: none; }
}

html.craft-hero-entering .home-hero__float {
  animation: craftHeroIn .75s cubic-bezier(.2, .7, .2, 1) both;
}

html.craft-hero-entering .home-hero--float .home-hero__content,
html.craft-hero-entering .home-hero--float .home-hero__bottom {
  animation: craftHeroTextIn .6s cubic-bezier(.2, .7, .2, 1) .15s both;
}

/* Toolbar above the grid is the way back to Float. */
html.craft-has-hero-float.craft-view-grid .featured-work__toolbar {
  justify-content: flex-end;
}

@media (prefers-reduced-motion: reduce) {
  html.craft-hero-leaving *, html.craft-grid-entering *, html.craft-grid-leaving *, html.craft-hero-entering * {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   SITE WIDTH — FULL (v6.61)
   Customizer → Layout → Site width. Header, fullscreen menu, home hero,
   homepage blocks and footer share one set of edges at the window, with
   gutters that grow on large screens. Case studies keep the 1600px maximum.
   ========================================================================== */

body.craft-width-full {
  --site-gutter: clamp(1rem, 2.5vw, 4.5rem);
}

body.craft-width-full .site-header__inner,
body.craft-width-full .site-header__nav,
body.craft-width-full .site-footer .craft-container,
body.craft-width-full .home-hero__content,
body.craft-width-full .home-hero__bottom,
body.craft-width-full .craft-home .featured-work,
body.craft-width-full .craft-home .wp-block-craft-featured-work,
body.craft-width-full .craft-home .craft-text-block-shell,
body.craft-width-full.page-template-page-featured-work .craft-work-gallery .craft-container {
  max-width: none;
}

/* v6.81: full width tops out at 1920px of content (images' native size), centered on
   bigger screens, with header, menu, hero, grid, case studies and footer on the same edges. */
body.craft-width-full {
  --craft-full-content: 1920px;
  --craft-full-max: calc(var(--craft-full-content) + 2 * var(--site-gutter));
}

body.craft-width-full .site-header__inner,
body.craft-width-full .site-header__nav,
body.craft-width-full .site-footer .craft-container,
body.craft-width-full .home-hero__content,
body.craft-width-full .home-hero__bottom,
body.craft-width-full .craft-home .featured-work,
body.craft-width-full .craft-home .wp-block-craft-featured-work,
body.craft-width-full .craft-home .craft-text-block-shell,
body.craft-width-full.page-template-page-featured-work .craft-work-gallery .craft-container,
body.craft-width-full .single-case-study .case-study-content > .craft-container,
body.craft-width-full .single-case-study .related > .craft-container {
  max-width: var(--craft-full-max);
  margin-inline: auto;
}

/* v7.02: case studies (body + related projects) top out at 1600px of content, centered.
   The header keeps the full site width. Change --craft-cs-content to adjust. */
body.single-case_study {
  --craft-cs-content: 1600px;
}

body.single-case_study .single-case-study .case-study-content > .craft-container,
body.single-case_study .single-case-study .related > .craft-container {
  max-width: calc(var(--craft-cs-content) + 2 * var(--site-gutter));
  margin-inline: auto;
}

/* v7.08: the home page portfolio grid (heading, toolbar and tiles) uses the same
   1600px content cap as the case studies; the header stays full width. */
body.craft-width-full .craft-home .featured-work,
body.craft-width-full .craft-home .wp-block-craft-featured-work {
  max-width: calc(1600px + 2 * var(--site-gutter));
  margin-inline: auto;
}

/* Keep the typing headline from growing past the 1600px measure on huge screens. */
body.craft-width-full .home-hero--fit .home-hero__headline {
  max-width: calc(var(--site-max-width) - (2 * var(--site-gutter)));
}

body.craft-width-full .home-hero--fit.home-hero--center .home-hero__headline {
  margin-inline: auto;
}

/* ==========================================================================
   HR / DIVIDERS
   ========================================================================== */

/* normalize any theme HR styles */
hr { border: 0; }

/* your thin line */
.craft-hr {
  border: 0; /* kill theme defaults */
  border-bottom: 1px solid hsla(0, 0%, 100%, .3);
  height: 0;
}

/* ==========================================================================
   RELATED PROJECTS – 16x9 thumbs + titles
   ========================================================================== */

.related {
  margin-top: 64px;
}

/* v7.06: on case studies, the space from the last image to "Related projects" matches the
   space around the text sections (3 x the image gap: 144px at 1920, ~130px at 1440, 48px on phones). */
.single-case-study .related {
  margin-top: calc(clamp(2rem, 3vw, 3rem) * 3);
}

@media (max-width: 768px) {
  .single-case-study .related {
    margin-top: calc(1rem * 3);
  }
}

/* Section heading */
.related__title-heading,
.related__title { /* support old + new class names */
  font-size: clamp(24px, 2.8vw, 36px);
  margin-bottom: 20px;
}

/* Grid of related cards */
.related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.related__item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 16x9 media frame */
.related__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* ⬅️ CHANGED from 1 / 1 */
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}

/* Make video/image/placeholder fill the frame */
.related__thumb .related__video,
.related__thumb img,
.related__thumb .related__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder styling */
.related__ph {
  background: rgba(229, 231, 235, .08);
  border: 1px dashed rgba(229, 231, 235, .25);
  border-radius: 14px;
}

/* Title under thumb */
.related__title {
  display: block;
  margin-top: 0.55rem;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

/* Responsive columns */
@media (max-width: 900px) {
  .related__list {
    grid-template-columns: 1fr 1fr;
  }
}

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

/* Hide visible captions/titles for project tiles/slides (SR-only behavior) */
.slider-caption,
.craft-work-slider__caption,
.featured-work__item .title,
.related__item .title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

/* ===== Custom cursor tooltip ===== */

.craft-cursor {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%); /* center on pointer */
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity .18s ease;
  will-change: transform, opacity;
}

.craft-cursor__bubble {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(229, 231, 235, 0.08);
  border: 1px solid rgba(229, 231, 235, 0.25);
  backdrop-filter: blur(6px);
  font-size: 12px;
  line-height: 1;
  color: var(--color-text-primary);
  white-space: nowrap;
  transform: translate3d(0, 0, 0);
}

.craft-cursor[data-pos="show"] { opacity: 1; }

.is-light-bg .craft-cursor__bubble {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(229, 231, 235, 0.35);
}

/* Cursor tooltip */
.craft-cursor-tip {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-9999px, -9999px);
  transition: opacity .18s ease;
  z-index: 99999;

  /* look & feel */
  font-size: 12px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--color-background);
  background: rgba(229, 231, 235, .95);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 999px;
  padding: 8px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  will-change: transform, opacity;
}

.craft-cursor-tip.is-visible { opacity: 1; }
.craft-cursor-tip.is-press { transform: scale(.98); }

/* Visually hide but keep for screen readers */
.u-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

/* Full-viewport vertical (and horizontal) centering */
.center-vert {
  min-height: 100vh;       /* fill the screen */
  display: flex;
  align-items: center;     /* vertical center */
  justify-content: center; /* horizontal center (optional) */
}

/* Make .slider-image a proper media frame */
.slider-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Ensure <img> and <video> cover the frame */
.slider-image img,
.slider-image .video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* match image cover behavior */
}

/* Optional: if your track relies on fixed slide heights */
.craft-work-slider__slide {
  /* keep your existing dimensions; example: */
  /* min-height: 420px; */
}

/* If your previous CSS expected .video-with-fallback, it remains */
.slider-image.video-with-fallback { /* keep any old rules here */ }

/* Media box gets an aspect-ratio so it has height even without media */
.slider-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;/* <-- sets height */
  border-radius: 8px;
  overflow: hidden;
  background: #111;/* safety bg */
}

/* Make video/img/placeholder fill the frame */
.slider-image .video,
.slider-image img,
.slider-image .related__ph{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Nice-looking placeholder (when no img/video) */
.slider-image .related__ph{
  background:
    linear-gradient(180deg, #1b1b1b, #121212);
  /* Optional checker */
  /* background-image: repeating-linear-gradient(45deg,#1a1a1a 0 10px,#141414 10px 20px); */
}

/* Caption base */
.slider-caption{
  margin-top:12px;
  font-weight:600;
  line-height:1.2;
}

.featured-work__media {
  position:relative;
  aspect-ratio: 16 / 9;   /* adjust to your look */
  overflow:hidden;
}

.featured-work__media .fw-image,
.featured-work__media .fw-video {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.featured-work__caption { margin-top:.6rem; }

/* Stop global link hover from fading slides */
.craft-work-slider .slide-wrap:hover { opacity: 1 !important; }

/* Offset for the hero down-arrow jump */
#work-slider {
  /* This value controls how far from the top the slider sits after the jump */
  scroll-margin-top: calc(var(--header-height) + 80px);
}


.craft-work-slider__slide:hover .slider-caption,
.craft-work-slider__slide:focus-within .slider-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Featured Work: tile defines aspect-ratio, media fills it */
.featured-work__thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Apply to both video + image inside Featured Work tiles */
.featured-work__thumb .fw-video,
.featured-work__thumb .fw-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fill the block, no letterboxing */
  object-position: center;    /* keep subject centered */
}

/* -------------------------------------------------------
   Logo Graveyard Wall
   ------------------------------------------------------- */

.logo-graveyard {
  margin-block: var(--space-xxl, 4rem);
}

.logo-graveyard--wall {
  width: 100%;
}

/* Logo Graveyard base layout (keep what you already have if similar) */
.logo-graveyard__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl, 2.5rem);
}

.logo-graveyard__tile {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;

  /* 👇 animation base state */
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 400ms ease-out,
    transform 400ms ease-out;
}

.logo-graveyard__tile.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.logo-graveyard__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or 'cover' if you like */
  display: block;
  transform: scale(var(--logo-graveyard-image-scale, 1.015));
  transform-origin: center;
  transition: filter .22s ease-out, transform .22s ease-out;
}

/* Shortcode image-filter presets. */
.logo-graveyard--filter-grayscale .logo-graveyard__tile img {
  filter: grayscale(1);
}

.logo-graveyard--filter-grayscale-hover .logo-graveyard__tile img {
  filter: grayscale(1);
}

.logo-graveyard--filter-grayscale-hover .logo-graveyard__tile:hover img,
.logo-graveyard--filter-grayscale-hover .logo-graveyard__tile:focus-within img {
  filter: grayscale(0);
}

.logo-graveyard--filter-high-contrast .logo-graveyard__tile img {
  filter: grayscale(1) contrast(1.75) brightness(.92);
}

/* Load more button */
.logo-graveyard__more {
  margin-top: var(--space-l, 1.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

/* Sentinel */
.logo-graveyard__sentinel {
  width: 100%;
  height: var(--space-xl, 2.5rem);
}

@media (max-width: 900px) {
  .logo-graveyard__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .logo-graveyard {
    margin-block: var(--space-xl, 2.5rem);
  }

  .logo-graveyard__grid {
    grid-template-columns: 1fr;
    gap: var(--space-l, 1.5rem);
  }
}

/* -------------------------------------------------------
   Logo Graveyard infinite slider
   Reuses the Work Slider block while sourcing every
   logo-graveyard-* Media Library image.
   ------------------------------------------------------- */

.craft-work-slider.craft-logo-marquee {
  width: 100%;
  padding-block: clamp(2.5rem, 7vw, 7rem);
  overflow: hidden;
}

.craft-logo-marquee__heading {
  width: min(100% - (2 * var(--site-gutter)), var(--site-max-width));
  margin: 0 auto clamp(1.5rem, 3vw, 3rem);
}

.craft-logo-marquee__viewport {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  overflow: hidden;
  transform: translateX(-50%);
}

.craft-logo-marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: craft-logo-marquee var(--craft-logo-marquee-duration, 36s) linear infinite;
}

.craft-logo-marquee--right .craft-logo-marquee__track {
  animation-direction: reverse;
}

.craft-logo-marquee--pause:hover .craft-logo-marquee__track,
.craft-logo-marquee--pause:focus-within .craft-logo-marquee__track {
  animation-play-state: paused;
}

.craft-logo-marquee__group {
  display: flex;
  flex: none;
  gap: var(--craft-logo-marquee-gap, 24px);
  padding-right: var(--craft-logo-marquee-gap, 24px);
}

.craft-logo-marquee__item {
  flex: 0 0 var(--craft-logo-marquee-item-width, calc(50vw - 12px));
  width: var(--craft-logo-marquee-item-width, calc(50vw - 12px));
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-text-primary) 5%, transparent);
}

.craft-logo-marquee__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--craft-logo-marquee-scale, 1.015));
  transform-origin: center;
  transition: filter .22s ease-out, transform .22s ease-out;
}

.craft-logo-marquee--filter-grayscale .craft-logo-marquee__item img,
.craft-logo-marquee--filter-grayscale-hover .craft-logo-marquee__item img {
  filter: grayscale(1);
}

.craft-logo-marquee--filter-grayscale-hover .craft-logo-marquee__item:hover img {
  filter: grayscale(0);
}

.craft-logo-marquee--filter-high-contrast .craft-logo-marquee__item img {
  filter: grayscale(1) contrast(1.75) brightness(.92);
}

.craft-logo-marquee__empty {
  width: min(100% - (2 * var(--site-gutter)), var(--site-max-width));
  margin-inline: auto;
  padding: 1rem;
  border: 1px dashed currentColor;
}

@keyframes craft-logo-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .craft-logo-marquee__viewport {
    overflow-x: auto;
  }

  .craft-logo-marquee__track {
    animation: none;
    will-change: auto;
  }

  .craft-logo-marquee__group[aria-hidden="true"] {
    display: none;
  }
}

/* -------------------------------------------------------
   Logo Graveyard pointer trail experience
   Inspired by the energetic reveal behavior of the supplied reference,
   while using the portfolio's own type, colors, and logo archive.
   ------------------------------------------------------- */

.logo-graveyard-experience {
  --lge-logo-size: 22vw;
  --lge-logo-opacity: 1;
  position: fixed;
  inset: 0;
  z-index: 150;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--color-text-primary);
  background: var(--color-background);
  cursor: crosshair;
  isolation: isolate;
  touch-action: none;
}

html.has-logo-graveyard-experience,
html.has-logo-graveyard-experience body {
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

.logo-graveyard-experience:focus-visible {
  outline: 1px solid rgba(255, 255, 255, .75);
  outline-offset: -1px;
}

.logo-graveyard-experience__stage {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.logo-graveyard-experience__content {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: min(calc(100vw - (2 * max(var(--site-gutter), 1rem))), 1200px);
  text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.logo-graveyard-experience__heading {
  --lge-heading-max-width: 45ch;
  max-width: min(100%, var(--lge-heading-max-width));
  margin: 0 auto;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.6vw, 6.8rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.logo-graveyard-experience__heading--width-match,
.logo-graveyard-experience__heading--width-full { --lge-heading-max-width: 100%; }
.logo-graveyard-experience__heading--width-compact { --lge-heading-max-width: var(--measure-heading); }
.logo-graveyard-experience__heading--width-narrow { --lge-heading-max-width: var(--measure-narrow); }
.logo-graveyard-experience__heading--width-readable { --lge-heading-max-width: var(--measure-reading); }
.logo-graveyard-experience__heading--width-wide { --lge-heading-max-width: var(--measure-wide); }

.logo-graveyard-experience__body {
  width: min(100%, 58ch);
  margin: clamp(1rem, 2.2vh, 1.65rem) auto 0;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: clamp(.72rem, .9vw, .9rem);
  line-height: 1.7;
  letter-spacing: .025em;
  text-wrap: pretty;
}

.logo-graveyard-experience__body p { margin: 0; }
.logo-graveyard-experience__body p + p { margin-top: .8em; }

.logo-graveyard-experience__instruction,
.logo-graveyard-experience__empty {
  position: absolute;
  left: 50%;
  bottom: clamp(1.4rem, 4vh, 3rem);
  z-index: 40;
  margin: 0;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: clamp(.65rem, .75vw, .75rem);
  line-height: 1.4;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
}

.logo-graveyard-experience__instruction::before {
  content: "↗";
  display: inline-block;
  margin-right: .55em;
  transition: transform .35s ease;
}
.logo-graveyard-experience.is-moving .logo-graveyard-experience__instruction::before {
  transform: rotate(45deg);
}

.logo-graveyard-experience__empty {
  bottom: auto;
  top: clamp(1.4rem, 4vh, 3rem);
  color: #fbbf24;
}

.logo-graveyard-experience__logo {
  --lge-x: 50vw;
  --lge-y: 50vh;
  --lge-scale: 1;
  --lge-rotate: 0deg;
  --lge-enter-x: 0px;
  --lge-enter-y: 48px;
  --lge-exit-x: 0px;
  --lge-exit-y: -80px;
  --lge-exit-rotate: 0deg;
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(100px, var(--lge-logo-size), 430px);
  max-width: 42vw;
  max-height: 42vh;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .28));
  transform: translate3d(calc(var(--lge-x) - 50% + var(--lge-enter-x)), calc(var(--lge-y) - 50% + var(--lge-enter-y)), 0) rotate(var(--lge-rotate)) scale(calc(var(--lge-scale) * .68));
  transition:
    transform .62s cubic-bezier(.16, 1, .3, 1),
    opacity .34s ease;
  will-change: transform, opacity;
  pointer-events: none;
}

.logo-graveyard-experience__logo.is-visible {
  opacity: var(--lge-logo-opacity);
  visibility: visible;
  transform: translate3d(calc(var(--lge-x) - 50%), calc(var(--lge-y) - 50%), 0) rotate(var(--lge-rotate)) scale(var(--lge-scale));
}

.logo-graveyard-experience__logo.is-leaving {
  opacity: 0;
  visibility: visible;
  transform: translate3d(calc(var(--lge-x) - 50% + var(--lge-exit-x)), calc(var(--lge-y) - 50% + var(--lge-exit-y)), 0) rotate(var(--lge-exit-rotate)) scale(calc(var(--lge-scale) * .82));
  transition-duration: .95s, .72s;
  transition-timing-function: cubic-bezier(.55, .02, .65, .22), ease;
}

.logo-graveyard-experience__logo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 42vh;
  object-fit: contain;
}

@media (max-width: 700px) {
  .logo-graveyard-experience { cursor: default; }
  .logo-graveyard-experience__heading {
    font-size: clamp(2rem, 10vw, 4.2rem);
    line-height: 1;
  }
  .logo-graveyard-experience__logo {
    width: clamp(90px, 40vw, 230px);
    max-width: 48vw;
    max-height: 34vh;
  }
  .logo-graveyard-experience__instruction {
    width: calc(100% - 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-graveyard-experience { cursor: default; }
  .logo-graveyard-experience__logo { display: none; }
  .logo-graveyard-experience__instruction::before { transform: none !important; }
}


/* ==========================================================================
   CLICKABLE PROJECT CARDS
   ========================================================================== */

.featured-work__link,
.craft-work-tile,
.craft-work-slider__slide[data-state="active"] .slide-wrap {
  position: relative;
  z-index: 5;
  display: block;
  pointer-events: auto;
  cursor: pointer;
}

/* ==========================================================================
   CONTACT PAGE LINKS
   ========================================================================== */

.page-contact .entry-content a {
  color: inherit;
  background: transparent;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: currentColor;
  opacity: 1;
}

.page-contact .entry-content a:hover {
  text-decoration-thickness: 2px;
  opacity: 1;
}

.page-contact .entry-content a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Keep linked media free of text-link decoration. */
.page-contact .entry-content figure a,
.page-contact .entry-content .wp-block-image a,
.page-contact .entry-content .wp-block-gallery a {
  display: block;
  text-decoration: none;
}

/* ==========================================================================
   GUTENBERG UTILITY CLASSES
   Add these in a block's Advanced → Additional CSS class(es) field.
   ========================================================================== */

/* Constrain the block itself. */
.craft-max-width {
  width: 100%;
  max-width: var(--measure-reading) !important;
}

.craft-max-width-narrow {
  width: 100%;
  max-width: var(--measure-narrow) !important;
}

.craft-max-width-wide {
  width: 100%;
  max-width: var(--measure-wide) !important;
}

.craft-max-width-heading {
  width: 100%;
  max-width: var(--measure-heading) !important;
}

/* Combine with a max-width class to center the constrained block. */
.craft-center-block {
  margin-inline: auto !important;
}

/* Apply to a Column or Group to constrain its nested copy without shrinking the container. */
.craft-readable-copy :where(p, ul, ol, blockquote),
:where(p, ul, ol, blockquote).craft-readable-copy {
  max-width: var(--measure-reading);
}

.craft-readable-copy :where(h1, h2, h3, h4, h5, h6),
:where(h1, h2, h3, h4, h5, h6).craft-readable-copy {
  max-width: var(--measure-heading);
}

/* Simple text alignment helpers. */
.craft-text-left { text-align: left !important; }
.craft-text-center { text-align: center !important; }
.craft-text-right { text-align: right !important; }