*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
    --tw-contain-size:  ;
    --tw-contain-layout:  ;
    --tw-contain-paint:  ;
    --tw-contain-style:  ;
}
.container {
    width: 100%;
}
@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}
@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
    }
}
/* Employee cards are content-dense (name, bio, contact links) so the
     previous lift + photo-zoom hover created more visual noise than signal
     and made the cursor feel "sticky" when moving between contact links.
     Keep the cards fully static — the cursor: pointer alone signals click. */
.cb-employee-card {
    overflow: hidden;
  }
.cb-employee-card .cb-employee-photo {
    overflow: hidden;
  }
/* Initials placeholder when no portrait is uploaded — matches the photo's
     3:4 ratio so cards in the grid line up and gives the empty area a distinct
     gradient so it reads as the card's media slot, not page background. */
.cb-employee-card .cb-employee-photo--initials {
    background: linear-gradient(
      135deg,
      var(--wp--preset--color--surface, #f4f5f7) 0%,
      color-mix(in srgb, var(--wp--preset--color--surface, #f4f5f7) 88%, var(--wp--preset--color--accent, #1e5bd8)) 100%
    );
  }
/* Card trigger button — resets native button chrome so it looks like a
     plain clickable card region. Visible focus ring per design-system
     spec (2px accent, 3px offset). Refactor note: the trigger used to
     be <article role="button" tabindex="0"> with focusable <a>
     descendants — a WCAG 2.1 4.1.2 nested-interactive violation. It's
     now a real <button> wrapping only the non-interactive card header;
     the email/phone/LinkedIn links sit outside it as siblings. */
.cb-employee-card__trigger {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
.cb-employee-card__trigger:focus-visible {
    outline: 2px solid var(--wp--preset--color--secondary, #0084AF);
    outline-offset: 3px;
    border-radius: 12px;
  }
/* Two-line max on the employee name (truncates with ellipsis if longer).
     No min-height reservation — that left empty padding under single-line
     names before the role pills. Cards still align across the grid because
     the grid stretches rows to equal heights and the trigger's flex-1
     absorbs the slack at the bottom of the photo column. */
.cb-employee-card h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
/* Role pills — one per `employee_role` term, wrapped in a list so they
     flow onto extra rows when an employee holds several roles. */
.cb-employee-card__roles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
.cb-employee-card .cb-employee-card__role {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 4px;
    border-left: 2px solid var(--wp--preset--color--accent, #1E5BD8);
    background: color-mix(in srgb, var(--wp--preset--color--accent, #1E5BD8) 8%, transparent);
    color: var(--wp--preset--color--accent, #1E5BD8);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
  }
.cb-testimonial-quote {
    position: relative;
  }
.cb-dept-badge {
    display: inline-flex;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--wp--preset--color--accent, var(--cb-accent));
    color: var(--cb-dark-text);
    opacity: 0.9;
  }
/* The accent-gradient default only applies when the admin HASN'T
   * picked a background via the Gutenberg color panel. With
   * `:not(.has-background)` the admin's chosen palette colour always
   * wins — this is the fix for the editor/frontend mismatch reported on
   * 2026-04-24, where blocks saved with a blue bg still rendered the
   * orange gradient because this class's shorthand `background:` was
   * clobbering the preset palette's inline `background-color`.
   * Same guard on the text-colour children so admins can pair a custom
   * dark bg with the default white text without the class forcing
   * --cb-dark-text on them. */
.cb-cta-accent:not(.has-background) {
    background: linear-gradient(135deg, color-mix(in srgb, var(--cb-accent) 55%, #000) 0%, var(--cb-accent) 50%, color-mix(in srgb, var(--cb-accent) 75%, #fff) 100%);
    color: var(--cb-dark-text);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 4px 32px var(--cb-accent-25);
  }
.cb-cta-accent:not(.has-background) h2,
  .cb-cta-accent:not(.has-background) p {
    color: var(--cb-dark-text);
  }
.cb-cta-section:not(.cb-cta-accent) {
    box-shadow: 0 1px 0 var(--wp--preset--color--muted, var(--cb-muted));
  }
.pointer-events-none {
    pointer-events: none;
}
.visible {
    visibility: visible;
}
.invisible {
    visibility: hidden;
}
.collapse {
    visibility: collapse;
}
.static {
    position: static;
}
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}
.inset-0 {
    inset: 0px;
}
.z-0 {
    z-index: 0;
}
.z-10 {
    z-index: 10;
}
.z-20 {
    z-index: 20;
}
.m-0 {
    margin: 0px;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.mb-10 {
    margin-bottom: 2.5rem;
}
.mb-12 {
    margin-bottom: 3rem;
}
.mb-14 {
    margin-bottom: 3.5rem;
}
.mb-16 {
    margin-bottom: 4rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.ml-0 {
    margin-left: 0px;
}
.ml-11 {
    margin-left: 2.75rem;
}
.ml-8 {
    margin-left: 2rem;
}
.ml-auto {
    margin-left: auto;
}
.mr-0 {
    margin-right: 0px;
}
.mr-auto {
    margin-right: auto;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-8 {
    margin-top: 2rem;
}
.box-border {
    box-sizing: border-box;
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.inline-flex {
    display: inline-flex;
}
.grid {
    display: grid;
}
.hidden {
    display: none;
}
.aspect-\[3\/4\] {
    aspect-ratio: 3/4;
}
.aspect-\[4\/3\] {
    aspect-ratio: 4/3;
}
.aspect-square {
    aspect-ratio: 1 / 1;
}
.h-10 {
    height: 2.5rem;
}
.h-12 {
    height: 3rem;
}
.h-14 {
    height: 3.5rem;
}
.h-7 {
    height: 1.75rem;
}
.h-full {
    height: 100%;
}
.min-h-\[70vh\] {
    min-height: 70vh;
}
.w-12 {
    width: 3rem;
}
.w-14 {
    width: 3.5rem;
}
.w-7 {
    width: 1.75rem;
}
.w-auto {
    width: auto;
}
.w-full {
    width: 100%;
}
.min-w-0 {
    min-width: 0px;
}
.max-w-3xl {
    max-width: 48rem;
}
.max-w-\[22ch\] {
    max-width: 22ch;
}
.max-w-\[640px\] {
    max-width: 640px;
}
.max-w-\[820px\] {
    max-width: 820px;
}
.max-w-\[980px\] {
    max-width: 980px;
}
.max-w-prose {
    max-width: 720px;
}
.max-w-screen-rts {
    max-width: 64rem;
}
.max-w-site {
    max-width: 1440px;
}
.flex-1 {
    flex: 1 1 0%;
}
.shrink-0 {
    flex-shrink: 0;
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
    cursor: pointer;
}
.select-none {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
.resize {
    resize: both;
}
.list-none {
    list-style-type: none;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flex-row {
    flex-direction: row;
}
.flex-col {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.items-center {
    align-items: center;
}
.items-baseline {
    align-items: baseline;
}
.items-stretch {
    align-items: stretch;
}
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.gap-0 {
    gap: 0px;
}
.gap-0\.5 {
    gap: 0.125rem;
}
.gap-1 {
    gap: 0.25rem;
}
.gap-10 {
    gap: 2.5rem;
}
.gap-12 {
    gap: 3rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-2\.5 {
    gap: 0.625rem;
}
.gap-3 {
    gap: 0.75rem;
}
.gap-4 {
    gap: 1rem;
}
.gap-5 {
    gap: 1.25rem;
}
.gap-6 {
    gap: 1.5rem;
}
.gap-8 {
    gap: 2rem;
}
.gap-y-6 {
    row-gap: 1.5rem;
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-muted > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--wp--preset--color--muted,     #d6eef5);
}
.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(229 229 229 / var(--tw-divide-opacity, 1));
}
.self-start {
    align-self: flex-start;
}
.self-end {
    align-self: flex-end;
}
.self-center {
    align-self: center;
}
.overflow-hidden {
    overflow: hidden;
}
.rounded {
    border-radius: 0.25rem;
}
.rounded-2xl {
    border-radius: 1rem;
}
.rounded-full {
    border-radius: 9999px;
}
.rounded-lg {
    border-radius: 0.5rem;
}
.rounded-md {
    border-radius: 0.375rem;
}
.rounded-sm {
    border-radius: 0.125rem;
}
.rounded-xl {
    border-radius: 0.75rem;
}
.border {
    border-width: 1px;
}
.border-2 {
    border-width: 2px;
}
.border-none {
    border-style: none;
}
.border-muted {
    border-color: var(--wp--preset--color--muted,     #d6eef5);
}
.border-neutral-100 {
    --tw-border-opacity: 1;
    border-color: rgb(245 245 245 / var(--tw-border-opacity, 1));
}
.border-primary {
    border-color: var(--wp--preset--color--primary,   #00486A);
}
.bg-accent {
    background-color: var(--wp--preset--color--accent,    #F5833C);
}
.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-neutral-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.bg-surface {
    background-color: var(--wp--preset--color--surface,   #fafaf8);
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.object-contain {
    -o-object-fit: contain;
       object-fit: contain;
}
.object-cover {
    -o-object-fit: cover;
       object-fit: cover;
}
.object-top {
    -o-object-position: top;
       object-position: top;
}
.p-0 {
    padding: 0px;
}
.p-6 {
    padding: 1.5rem;
}
.p-8 {
    padding: 2rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}
.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.py-section {
    padding-top: clamp(4rem, 8vw, 6rem);
    padding-bottom: clamp(4rem, 8vw, 6rem);
}
.py-section-sm {
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pb-3 {
    padding-bottom: 0.75rem;
}
.pb-5 {
    padding-bottom: 1.25rem;
}
.pb-section-sm {
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pt-0 {
    padding-top: 0px;
}
.pt-3 {
    padding-top: 0.75rem;
}
.pt-\[140px\] {
    padding-top: 140px;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-5xl {
    font-size: 3rem;
    line-height: 1;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-hero {
    font-size: clamp(1.75rem, 6.5vw, 5.5rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.text-hero-sub {
    font-size: clamp(1.15rem, 1vw + 1rem, 1.45rem);
    line-height: 1.625;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-quote {
    font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.375rem);
    line-height: 1.625;
}
.text-section-heading {
    font-size: clamp(2rem, 3vw + 0.5rem, 3.25rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.font-bold {
    font-weight: 700;
}
.font-medium {
    font-weight: 500;
}
.font-normal {
    font-weight: 400;
}
.font-semibold {
    font-weight: 600;
}
.uppercase {
    text-transform: uppercase;
}
.italic {
    font-style: italic;
}
.leading-none {
    line-height: 1;
}
.leading-relaxed {
    line-height: 1.625;
}
.leading-snug {
    line-height: 1.375;
}
.leading-tight {
    line-height: 1.25;
}
.text-accent {
    color: var(--wp--preset--color--accent,    #F5833C);
}
.text-neutral-900 {
    --tw-text-opacity: 1;
    color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}
.text-primary {
    color: var(--wp--preset--color--primary,   #00486A);
}
.text-secondary {
    color: var(--wp--preset--color--secondary, #0084AF);
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/85 {
    color: rgb(255 255 255 / 0.85);
}
.text-white\/90 {
    color: rgb(255 255 255 / 0.9);
}
.no-underline {
    text-decoration-line: none;
}
.opacity-60 {
    opacity: 0.6;
}
.opacity-70 {
    opacity: 0.7;
}
.opacity-80 {
    opacity: 0.8;
}
.opacity-85 {
    opacity: 0.85;
}
.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
    outline-style: solid;
}
.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-150 {
    transition-duration: 150ms;
}
.duration-200 {
    transition-duration: 200ms;
}
.duration-300 {
    transition-duration: 300ms;
}

/* ── Box-sizing reset ────────────────────────────────────────────────────────
   Tailwind utilities (w-full, px-*, gap-*, etc.) assume border-box sizing.
   WordPress does not apply a global reset, so every custom block element
   that carries a Tailwind layout class must use border-box explicitly.
   Without this, w-full + px-6 renders as (100% width) + 48 px = overflow.
*/
.cb-hero,            .cb-hero            *, .cb-hero            *::before, .cb-hero            *::after,
.cb-block-rich-text, .cb-block-rich-text *, .cb-block-rich-text *::before, .cb-block-rich-text *::after,
.cb-block-features,  .cb-block-features  *, .cb-block-features  *::before, .cb-block-features  *::after,
.cb-block-stats,     .cb-block-stats     *, .cb-block-stats     *::before, .cb-block-stats     *::after,
.cb-block-split,     .cb-block-split     *, .cb-block-split     *::before, .cb-block-split     *::after,
.cb-block-testimonial,.cb-block-testimonial *,.cb-block-testimonial *::before,.cb-block-testimonial *::after,
.cb-block-call-card, .cb-block-call-card *, .cb-block-call-card *::before, .cb-block-call-card *::after,
.cb-employee-modal,  .cb-employee-modal  *, .cb-employee-modal  *::before, .cb-employee-modal  *::after {
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BRAND TOKENS — re-skin for any client by editing these + theme.json
   ══════════════════════════════════════════════════════════════════════════════

   HOW TO RE-THEME A NEW CLIENT PROJECT:
   1. Edit the six palette colours in theme.json  → settings.color.palette
   2. Update the RGB companion variables below    → --cb-accent-r/g/b and
                                                     --cb-primary-r/g/b
   3. Rebuild CSS:  ./node_modules/.bin/tailwindcss -i src/style.css ...
   That's it. Every block, button, eyebrow, card and dark section updates.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Palette — mirrors theme.json ──────────────────────────────────────── */
  --cb-primary: var(--wp--preset--color--primary, var(--cb-primary));
  --cb-secondary: var(--wp--preset--color--secondary, #64748b);
  --cb-accent: var(--wp--preset--color--accent, var(--cb-accent));
  --cb-surface: var(--wp--preset--color--surface, var(--cb-surface));
  --cb-muted: var(--wp--preset--color--muted, var(--cb-muted));
  --cb-bg: var(--wp--preset--color--white, #ffffff);

  /* ── RGB channels — needed for rgba() tints. UPDATE when accent/primary changes ── */
  --cb-accent-r: 245;
  --cb-accent-g: 131;
  --cb-accent-b: 60;
  --cb-primary-r: 0;
  --cb-primary-g: 72;
  --cb-primary-b: 106;

  /* ── Pre-computed accent tints ──────────────────────────────────────────── */
  --cb-accent-10: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.1);
  --cb-accent-15: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.15);
  --cb-accent-20: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.2);
  --cb-accent-25: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.25);
  --cb-accent-28: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.28);
  --cb-accent-38: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.38);

  /* ── Dark section backgrounds (hero, footer, CTA, video block) ─────────── */
  --cb-dark-bg: var(--cb-primary);
  --cb-dark-text: #ffffff;
  --cb-dark-sub: rgba(255, 255, 255, 0.65);
  --cb-dark-border: rgba(255, 255, 255, 0.08);

  /* ── Text selection — always readable on every background ──────────────── */
  --cb-selection-bg: var(--cb-accent, #F5833C);
  --cb-selection-color: #ffffff;

  /* ── Shadows (neutral — keep as-is across all themes) ─────────────────── */
  --cb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --cb-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
  --cb-shadow-lg: 0 24px 64px -12px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --cb-shadow-xl: 0 32px 72px -12px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --cb-base-font-size: 18px;
}

@media (min-width: 769px) {
  :root { --cb-base-font-size: 19px; }
}
@media (min-width: 1025px) {
  :root { --cb-base-font-size: 20px; }
}

.wp-site-blocks {
  font-size: var(--cb-base-font-size);
  line-height: 1.75;
  color: var(--cb-primary);
}

/* ── Text selection — high-contrast on every background ────────────────── */
::-moz-selection {
  background: var(--cb-selection-bg, #F5833C);
  color: var(--cb-selection-color, #ffffff);
}
::selection {
  background: var(--cb-selection-bg, #F5833C);
  color: var(--cb-selection-color, #ffffff);
}
::-moz-selection {
  background: var(--cb-selection-bg, #F5833C);
  color: var(--cb-selection-color, #ffffff);
}

/* ── WordPress wrapper spacing reset ─────────────────────────────────────── */
/* WP injects inline padding/margin on .wp-block-group wrappers from the page
   template and theme spacing presets. Override so our blocks control spacing.
   Exclude .cb-page-main — inner pages (with the page-header block) need
   their own padding/layout so the template can breathe. */
.wp-site-blocks > main:not(.cb-page-main),
.wp-site-blocks > .wp-block-group:not(.cb-page-main) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.wp-site-blocks > main:not(.cb-page-main) > .wp-block-group,
.wp-site-blocks > main:not(.cb-page-main) > * {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.wp-block-template-part,
.wp-site-blocks {
  --wp--style--block-gap: 0 !important;
}

/* ── React header ─────────────────────────────────────────────────────────── */

/*
 * Header is position:absolute — it overlays the top of each page and scrolls
 * away naturally. Non-home pages need their first block offset so content
 * doesn't start hidden behind the header.
 *
 * Use body:not(.home) — WordPress renders this server-side, so the rule is
 * active from first paint with NO JavaScript dependency and NO layout shift.
 * (body.home = front page, added by WP core.)
 */

/* Desktop nav: visible on wide screens */
.rh-desktop-nav {
  display: flex !important;
}
/* Mobile toggle: hidden on wide screens */
.rh-mobile-toggle {
  display: none !important;
}

@media (max-width: 960px) {
  .rh-desktop-nav {
    display: none !important;
  }
  .rh-mobile-toggle {
    display: flex !important;
  }
}

/* ── Search trigger + overlay ─────────────────────────────────────────────
 *
 * The trigger is a magnifying-glass icon button next to the hamburger
 * (sits before it in DOM order). It carries the same colour as the
 * surrounding nav (inherits via `color: navColor` inline style on the
 * button element). On hover/focus the icon brightens.
 *
 * The overlay is a fixed dialog under a translucent backdrop. The
 * search-result dropdown lives inside the panel — desktop renders it
 * as a wide centred panel near the top, mobile fills the viewport. */

.rh-search-trigger {
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.rh-search-trigger:hover,
.rh-search-trigger:focus-visible {
  background: rgba( 255, 255, 255, 0.08 );
}
/* Inside a solid-navy header, the inherited rgba hover is too subtle —
 * replace with a slight brightening of the bg.  The selector matches
 * any solid-bg-mode header (data attribute set by render.php). */
.site-header-react[style*="rgb(0, 72, 106)"] .rh-search-trigger:hover,
.site-header-react[style*="rgb(0, 72, 106)"] .rh-search-trigger:focus-visible {
  background: rgba( 255, 255, 255, 0.14 );
}

.rh-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: rgba( 10, 15, 30, 0.55 );
  backdrop-filter: blur( 4px ) saturate( 140% );
  -webkit-backdrop-filter: blur( 4px ) saturate( 140% );
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp( 24px, 8vh, 96px ) 16px 16px;
  animation: rh-search-fade-in 0.15s cubic-bezier( 0.4, 0, 0.2, 1 );
}
@keyframes rh-search-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media ( prefers-reduced-motion: reduce ) {
  .rh-search-overlay { animation: none; }
}

.rh-search-panel {
  width: 100%;
  max-width: 720px;
  background: var( --wp--preset--color--surface, #fafaf8 );
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba( 0, 0, 0, 0.32 );
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Mobile: fill the viewport, no rounded corners — feels like the
 * standard mobile-app full-screen search pattern. */
@media (max-width: 640px) {
  .rh-search-overlay {
    padding: 0;
    align-items: stretch;
  }
  .rh-search-panel {
    max-width: 100%;
    border-radius: 0;
    height: 100%;
  }
}

.rh-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid color-mix(
    in srgb,
    var( --cb-search-panel-text, var( --cb-primary, #1F2937 ) ) 12%,
    transparent
  );
  /* The form's `color` is what <SearchIcon> and the close-button icon
     inherit (both render currentColor SVG strokes). */
  color: var( --cb-search-icon-color, var( --cb-primary, #6B7280 ) );
}
.rh-search-form input[ type="search" ] {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var( --cb-search-panel-text, var( --cb-primary, #1F2937 ) );
  outline: none;
  padding: 4px 0;
  min-width: 0;
}
.rh-search-form input[ type="search" ]::-moz-placeholder {
  color: var( --cb-search-panel-placeholder, color-mix( in srgb, var( --cb-primary, #1F2937 ) 50%, transparent ) );
}
.rh-search-form input[ type="search" ]::placeholder {
  color: var( --cb-search-panel-placeholder, color-mix( in srgb, var( --cb-primary, #1F2937 ) 50%, transparent ) );
}
.rh-search-form input[ type="search" ]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.rh-search-close {
  background: transparent;
  border: 0;
  color: var( --cb-search-icon-color, inherit );
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  border-radius: 6px;
  flex-shrink: 0;
}
.rh-search-close:hover,
.rh-search-close:focus-visible {
  background: var( --cb-search-close-hover-bg, rgba( 0, 0, 0, 0.06 ) );
}

.rh-search-results {
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (max-width: 640px) {
  .rh-search-results { max-height: none; flex: 1; }
}

.rh-search-result {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.rh-search-result.is-active,
.rh-search-result:hover {
  background: var( --cb-search-result-hover-bg, rgba( 0, 72, 106, 0.06 ) );
  border-color: color-mix(
    in srgb,
    var( --cb-search-result-hover-bg, rgba( 0, 72, 106, 0.06 ) ) 60%,
    transparent
  );
}
.rh-search-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rh-search-result__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: var( --cb-primary, #00486A );
  line-height: 1.3;
}
.rh-search-result__type {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var( --wp--preset--color--accent, #F5833C );
  background: rgba( 245, 131, 60, 0.10 );
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.rh-search-result__excerpt {
  margin: 4px 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: color-mix( in srgb, var( --cb-primary, #00486A ) 75%, transparent );
}

.rh-search-status {
  margin: 0;
  padding: 16px 20px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: color-mix( in srgb, var( --cb-primary, #00486A ) 60%, transparent );
}

.rh-search-all {
  display: block;
  text-align: center;
  padding: 14px;
  margin-top: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var( --cb-search-all-results-color, var( --cb-search-panel-text, var( --cb-primary, #1F2937 ) ) );
  text-decoration: none;
  border-top: 1px solid color-mix(
    in srgb,
    var( --cb-search-panel-text, var( --cb-primary, #1F2937 ) ) 12%,
    transparent
  );
}
.rh-search-all:hover,
.rh-search-all:focus-visible {
  background: var( --cb-search-all-results-hover-bg, rgba( 0, 72, 106, 0.06 ) );
}

/* ── Search results page (`/?s=…`) ──────────────────────────────────────────
 *
 * Rendered by the `[styrk_search_results]` shortcode (see
 * includes/search-render.php). The page has the same vertical rhythm
 * as a regular inner page — navy hero band on top, white surface
 * with results below. Empty state is loud (clear "no hits" message
 * + call-to-action back to home) so an empty results page never
 * looks broken.
 */

main.cb-search-page {
  padding: 0 !important;            /* hero handles its own top padding */
  margin: 0 !important;
}

.cb-search-page__hero {
  background: var( --wp--preset--color--primary, var( --cb-primary, #00486A ) );
  color: #fff;
  /* Clear the absolute FSE template-part header — same constants as
   * page-auto-hero. Keeps top safe across breakpoints. */
  padding: clamp( 108px, 14vh, 136px ) 24px clamp( 48px, 8vh, 72px );
}
.cb-search-page__hero-inner {
  max-width: 720px;
  margin-inline: auto;
}
.cb-search-page__eyebrow {
  color: var( --wp--preset--color--accent, var( --cb-accent, #F5833C ) ) !important;
  margin: 0 0 12px;
}
.cb-search-page__heading {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp( 32px, 5vw, 56px );
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 32px;
}
.cb-search-page__form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: rgba( 255, 255, 255, 0.08 );
  border: 1px solid rgba( 255, 255, 255, 0.15 );
  border-radius: 10px;
  padding: 6px;
  max-width: 540px;
}
.cb-search-page__form:focus-within {
  border-color: var( --wp--preset--color--accent, var( --cb-accent, #F5833C ) );
  background: rgba( 255, 255, 255, 0.12 );
}
.cb-search-page__form input[ type="search" ] {
  flex: 1;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 16px;
  padding: 10px 14px;
  outline: none;
  min-width: 0;
}
.cb-search-page__form input[ type="search" ]::-moz-placeholder {
  color: rgba( 255, 255, 255, 0.55 );
}
.cb-search-page__form input[ type="search" ]::placeholder {
  color: rgba( 255, 255, 255, 0.55 );
}
.cb-search-page__form input[ type="search" ]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.cb-search-page__form button {
  background: var( --wp--preset--color--accent, var( --cb-accent, #F5833C ) );
  color: #00486A;
  border: 0;
  padding: 8px 22px;
  font-weight: 600;
  font-size: 15px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cb-search-page__form button:hover,
.cb-search-page__form button:focus-visible {
  transform: translateY( -1px );
  box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.18 );
}

.cb-search-page__body {
  background: var( --wp--preset--color--surface, var( --cb-surface, #fafaf8 ) );
  padding: clamp( 48px, 8vh, 80px ) 24px clamp( 64px, 10vh, 120px );
}
.cb-search-page__body > * {
  max-width: 720px;
  margin-inline: auto;
}

.cb-search-page__count {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix( in srgb, var( --cb-primary, #00486A ) 60%, transparent );
  margin: 0 auto 24px;
}

.cb-search-page__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.cb-search-page__hit {
  margin: 0;
}
.cb-search-page__hit + .cb-search-page__hit {
  border-top: 1px solid color-mix( in srgb, var( --cb-primary, #00486A ) 12%, transparent );
}
.cb-search-page__hit-link {
  display: block;
  padding: 24px 16px;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  transition: background 0.15s;
}
.cb-search-page__hit-link:hover,
.cb-search-page__hit-link:focus-visible {
  background: color-mix( in srgb, var( --cb-primary, #00486A ) 4%, transparent );
}
.cb-search-page__hit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.cb-search-page__hit-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  color: var( --cb-primary, #00486A );
}
.cb-search-page__hit-link:hover .cb-search-page__hit-title {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.cb-search-page__hit-type {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var( --wp--preset--color--accent, #F5833C );
  background: rgba( 245, 131, 60, 0.10 );
  padding: 4px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}
.cb-search-page__hit-excerpt {
  display: block;
  margin-top: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: color-mix( in srgb, var( --cb-primary, #00486A ) 75%, transparent );
}

.cb-search-page__empty {
  text-align: center;
  padding: 48px 16px;
  background: #fff;
  border: 1px dashed color-mix( in srgb, var( --cb-primary, #00486A ) 18%, transparent );
  border-radius: 16px;
}
.cb-search-page__empty-line {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  color: var( --cb-primary, #00486A );
  margin: 0 0 12px;
}
.cb-search-page__empty-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: color-mix( in srgb, var( --cb-primary, #00486A ) 70%, transparent );
  margin: 0;
}
.cb-search-page__empty-hint a {
  color: var( --cb-primary, #00486A );
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cb-search-page__hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: color-mix( in srgb, var( --cb-primary, #00486A ) 70%, transparent );
  text-align: center;
  padding: 32px 16px;
}

@media ( max-width: 640px ) {
  .cb-search-page__heading { font-size: 32px; }
  .cb-search-page__form { flex-direction: column; padding: 8px; }
  .cb-search-page__form button { width: 100%; padding: 12px; }
  .cb-search-page__hit-link { padding: 18px 12px; }
  .cb-search-page__hit-title { font-size: 19px; }
  .cb-search-page__hit-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Nav link hover/focus — underline matches the rest of the site's link
 * hover convention (2 px thick, 4 px offset). `!important` is required
 * because the links set `text-decoration: none` as an inline style, and
 * inline styles beat pseudo-class rules without it. */
.rh-desktop-link:hover,
.rh-desktop-link:focus-visible,
.rh-mobile-link:hover,
.rh-mobile-link:focus-visible {
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.rh-desktop-link:focus-visible,
.rh-mobile-link:focus-visible {
  outline: none;
}

/*
 * Admin-bar offset — WP adds html{margin-top:46px} on mobile (32px desktop)
 * when the admin bar is visible. The react header uses position:absolute;top:0
 * relative to the template-part wrapper (also absolute from viewport top).
 * Offset it downward so it clears the fixed admin bar for logged-in admins.
 * Regular site visitors never see the admin bar, so top:0 is correct for them.
 */
body.admin-bar .site-header-react {
  top: 46px !important;
}
@media (min-width: 782px) {
  body.admin-bar .site-header-react {
    top: 32px !important;
  }
}

/* Ensure nothing from the OLD WP core navigation blocks interferes */
.site-header .wp-block-navigation__responsive-container-close,
.site-header .wp-block-navigation__responsive-container-open,
.react-header-live-wrapper .wp-block-navigation__responsive-container-close,
.react-header-live-wrapper .wp-block-navigation__responsive-container-open {
  display: none !important;
}

/* ── Hide default post title only on the FRONT PAGE (hero has its own h1).
   Inner pages keep the post title visible unless a page-header block
   handles the title role — that's scoped inline with page-header styles. */
body.home .wp-block-post-title {
  display: none !important;
}

/* ── React header — respect prefers-reduced-motion ────────────────────────────
 * The header's nav links, dropdown arrow, dropdown items, and mobile toggle
 * carry inline `transition: …` styles from view.tsx. There's no clean way
 * to wrap inline styles in a media query from JS, so kill every transition
 * and animation inside the header's subtree when the user prefers reduced
 * motion. `!important` is necessary to defeat the inline transition decls. */
@media (prefers-reduced-motion: reduce) {
  .site-header-react,
  .site-header-react *,
  .site-header-react *::before,
  .site-header-react *::after,
  .react-header-live-wrapper,
  .react-header-live-wrapper *,
  .react-header-live-wrapper *::before,
  .react-header-live-wrapper *::after {
    transition: none !important;
    animation:  none !important;
  }
}

/* ── Hero block ───────────────────────────────────────────────────────────── */
.cb-hero {
  background: var(--cb-hero-bg, var(--cb-primary, #00486A));
  /* PHP sets --hero-minh: 100vh (mobile default) */
  min-height: var(--hero-minh, var(--cb-hero-minh, 100vh));
  max-width: 2560px;
  margin-inline: auto;
}

/* Laptop / large screens → 80 vh */
@media (min-width: 1024px) {
  .cb-hero {
    --cb-hero-minh: 80vh;
  }
}

.cb-hero-overlay {
  opacity: var(--overlay-opacity, var(--cb-overlay-opacity, 0.4));
}

/*
 * Permanent top vignette — darkens the header zone (≈220 px) so white
 * logo + nav stay readable regardless of what the video shows at that moment.
 * Sits above the main overlay (z-10) but below text content (z-20).
 */
.cb-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 11;
  pointer-events: none;
}

.cb-hero h1,
.cb-hero p {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Solid-color auto-hero (no featured image) doesn't need the shadow —
 * on a flat navy surface it reads as a visible smudge below each letter,
 * worst on Fraunces's hooked glyphs (f, g, B). Only keep the shadow when
 * the hero actually has a background image/video that makes unshadowed
 * text hard to read. */
.cb-page-auto-hero:not(.cb-page-auto-hero--has-media) h1,
.cb-page-auto-hero:not(.cb-page-auto-hero--has-media) p {
  text-shadow: none;
}

.cb-hero h1 {
  word-break: keep-all;
  hyphens: none;
}

/* ── Page Auto Hero content column ─────────────────────────────────────────
 *
 * The auto-hero section is always alignfull (it's the branded surface that
 * extends edge-to-edge behind the header), but its INNER content must share
 * a column with the post-content group below. page.html sets post-content
 * to contentSize 720 / wideSize 1200, so the h1 sits inside the same
 * 720-centered-within-1200 rail. Admins editing a plain-text page see the
 * title and the first paragraph sharing the exact same left edge, which
 * reads as one continuous document column rather than a wide-title-over-
 * narrow-content mismatch.
 *
 * If `styrk-theme/templates/page.html` ever changes its contentSize or
 * wideSize, keep these values in sync so the column continues to align.
 */
/* Clear the absolute FSE header.
 * The header template-part is position:absolute;height:0 (see
 * styrk-theme/style.css) so it floats above siblings. The auto-hero,
 * being the next element in page.html, starts at viewport y=0. With
 * flex-center on the section and short h1s this was fine (content
 * naturally landed below the header). With long titles that wrap to
 * two+ lines the stack grew tall enough that flex-center pushed the
 * top of the stack (the eyebrow) behind the header. Explicit top
 * padding reserves the header's height so the flex-center happens
 * within the remaining box — eyebrow never hides. */
.cb-page-auto-hero {
  padding-top: clamp(108px, 14vh, 136px);
  padding-bottom: clamp(32px, 6vh, 56px);
}

.cb-page-auto-hero__wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;  /* matches .wp-block-post-content side padding */
  box-sizing: border-box;
}
.cb-page-auto-hero__inner {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

/* Section eyebrow on the auto-hero. Overrides the global .cb-eyebrow
 * default (navy text, invisible on a navy hero bg). Accent orange sits
 * on every hero background we produce at 4.5:1+ — tested against the
 * Logofarge navy fallback AND admin-picked featured image overlays.
 * Lives above the h1 with a small bottom margin so it reads as a
 * kicker, not part of the heading.
 *
 * Selector uses the compound form so it outranks the single-class
 * `.cb-eyebrow` rule defined later in the cascade (specificity 0,2,0
 * beats 0,1,0). Without this, the global rule wins and the eyebrow
 * renders navy — invisible on the navy hero bg. */
.cb-eyebrow.cb-page-auto-hero__eyebrow {
  color: var(--wp--preset--color--accent, var(--cb-accent, #F5833C));
  margin: 0 0 16px;
}

/* ── Breadcrumbs block ───────────────────────────────────────────────────
 * Placeable block (styrk-blocks/breadcrumbs) typically sitting just
 * below the hero. Low-weight visual — the job is to orient the reader,
 * not dominate the page. Uses admin-picked color via standard block
 * color controls when set (has-background / has-text-color), otherwise
 * defaults to muted body-color on surface.
 */
.cb-breadcrumbs {
  font-size: 14px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--cb-primary, #00486A) 72%, transparent);
}
.cb-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cb-breadcrumbs__item a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.cb-breadcrumbs__item a:hover,
.cb-breadcrumbs__item a:focus-visible {
  color: var(--cb-primary, #00486A);
  border-bottom-color: currentColor;
}
.cb-breadcrumbs__item--current span {
  color: var(--cb-primary, #00486A);
  font-weight: 500;
}
.cb-breadcrumbs__sep {
  opacity: 0.5;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media (max-width: 480px) {
  .cb-breadcrumbs {
    font-size: 13px;
  }
}

/* ── Media Grid ───────────────────────────────────────────────────────────── */

/* Horizontal breathing room so cells never bleed to the viewport edge */
.cb-media-grid__inner {
  padding-inline: 16px;
}

/* Tablet + mobile: cap at 2 columns regardless of the column setting */
@media (max-width: 1023px) {
  .cb-media-grid__inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Phones: stack to a single column. The 2-column tablet layout falls
   apart at < 480px — the cells get small enough that detail is lost,
   and an odd item count (e.g. 3) leaves a half-empty trailing row that
   reads as a bug. One column per row also lets each photo command the
   viewport for a moment, which fits the editorial feel of the rest of
   the home page better. */
@media (max-width: 480px) {
  .cb-media-grid__inner {
    grid-template-columns: 1fr !important;
    padding-inline: 16px;
  }
}

/* Play overlay — shown on non-autoplay video cells. Radial darkening behind
 * the icon for contrast against bright or busy first frames. */
.cb-media-grid__play {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  margin: 0;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.2) 55%,
    rgba(0, 0, 0, 0.05) 100%
  );
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.cb-media-grid__play:hover,
.cb-media-grid__play:focus-visible {
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.3) 55%,
    rgba(0, 0, 0, 0.1) 100%
  );
  outline: none;
}
.cb-media-grid__play svg {
  width: clamp(48px, 12%, 80px);
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
  transition: transform 0.18s ease;
}
.cb-media-grid__play:hover svg,
.cb-media-grid__play:focus-visible svg {
  transform: scale(1.08);
}
.cb-media-grid__play.is-hidden {
  display: none;
}

/* ── CTA section ──────────────────────────────────────────────────────────── */
.cb-cta-section {
  border-radius: var(--cb-section-radius, 0);
}

.cb-cta-btn {
  border-radius: var(--cb-btn-radius, 8px);
  background-color: var(--cb-btn-bg);
}

/* On narrow viewports stacked CTAs should fill the column instead of
   floating mid-width. Centers the label/icon so the button still reads
   as a button, not a banner. */
@media (max-width: 640px) {
  .cb-cta-btn,
  .cb-hero .cb-cta-btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }
}

.cb-cta-body {
  color: var(--wp--preset--color--secondary, #64748b);
}
.cb-cta-section.cb-cta-accent .cb-cta-body {
  color: inherit;
  opacity: 0.9;
}
.cb-cta-section.has-text-color .cb-cta-body {
  color: inherit;
  opacity: 1;
}

/* ── WP block text color — let it cascade into semantic text utilities ─────
   When the editor sets a block-level text colour WP adds has-text-color and
   an inline color style on the wrapper.  Our Tailwind utilities (.text-*)
   have explicit CSS rules that would otherwise win on child elements.
   These overrides restore the expected behaviour. */
.has-text-color .text-primary,
.has-text-color .text-secondary {
  color: inherit;
}
.has-text-color h1,
.has-text-color h2,
.has-text-color h3,
.has-text-color h4,
.has-text-color p {
  color: inherit;
}

/* ── Rich text body ───────────────────────────────────────────────────────── */
.cb-rich-text-body > p {
  margin-top: 0;
  margin-bottom: 0;
}
.cb-rich-text-body > p + p {
  margin-top: 1rem;
}
.cb-rich-text-body > ul,
.cb-rich-text-body > ol {
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}
.cb-rich-text-body a {
  color: var(--wp--preset--color--secondary, #0084AF);
}

/* ── Logo strip ───────────────────────────────────────────────────────────── */
.cb-logo-strip {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  background: var(--wp--preset--color--surface, var(--cb-surface));
  border-top: 1px solid var(--wp--preset--color--muted, var(--cb-muted));
  border-bottom: 1px solid var(--wp--preset--color--muted, var(--cb-muted));
  overflow: hidden;
}

.cb-logo-strip__eyebrow {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cb-secondary);
  margin: 0 0 32px;
}
@media (min-width: 769px)  { .cb-logo-strip__eyebrow { font-size: 16px; } }
@media (min-width: 1025px) { .cb-logo-strip__eyebrow { font-size: 18px; } }

.cb-logo-strip__viewport {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.cb-logo-strip__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  /* The block writes `--cb-logo-strip-duration:Ns` inline from its Speed
     setting; 32s remains the legacy default for blocks that never had it set. */
  animation: cb-logo-marquee var(--cb-logo-strip-duration, 32s) linear infinite;
}

.cb-logo-strip__track:hover {
  animation-play-state: paused;
}

.cb-logo-strip__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(48px, 6vw, 88px);
  list-style: none;
  margin: 0;
  padding: 0 clamp(24px, 3vw, 44px);
  flex-shrink: 0;
}

.cb-logo-strip__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.cb-logo-strip__img {
  /* Box logos in a fixed range of widths and let object-fit:contain
   * scale the SVG proportionally inside. SVGs uploaded without
   * explicit width/height attributes (only viewBox) compute as
   * naturalWidth: 0 in <img> context, so width:auto collapses to
   * 0px. Bounding the width here keeps every logo visible regardless
   * of how the source SVG was authored.
   */
  width: clamp(80px, 12vw, 160px);
  height: clamp(40px, 5vw, 64px);
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  display: block;
  flex-shrink: 0;
  transition:
    filter 0.3s ease,
    opacity 0.3s ease;
}

.cb-logo-strip__img--gs {
  filter: grayscale(1);
  opacity: 0.55;
}

/* White tint: knock the logos to pure white silhouettes for use on dark
   brand bands (where coloured logos can't read). Hover restores brightness. */
.cb-logo-strip__img--white {
  filter: brightness(0) invert(1);
  opacity: 0.72;
}
.cb-logo-strip__img--white:hover { opacity: 1; }

.cb-logo-strip__img--gs:hover {
  filter: grayscale(0);
  opacity: 1;
}

@keyframes cb-logo-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-logo-strip__track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    padding: 0 clamp(16px, 3vw, 40px);
  }
}

/* ── Contact page layout ─────────────────────────────────────────────────── */
/* Two-row layout:
     row 1 = header (eyebrow + heading + subheading) spans full width
     row 2 = body: form column + info column, evenly placed
   On mobile the body stacks; on ≥768px it's a 2-column grid. */
.contact-layout {
  max-width: 1440px;
  margin: 0 auto;
  /* Only horizontal padding here — the section wrapper (.block-contact)
   * already supplies vertical padding via .py-section. Stacking both
   * blew the section past one viewport height. */
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.contact-layout__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 780px;  /* Keep heading + subheading at comfortable reading width */
}

.contact-layout__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .contact-layout__cols {
    grid-template-columns: 1fr 1fr;
    /* Zero gap so columns touch in the centre. With the gap collapsed,
     * a coloured info column meets a transparent / white form column at
     * a single seam — no narrow strip of page bg leaking between them.
     * Each column's own padding handles internal breathing room. */
    gap: 0;
    align-items: stretch;
  }
  .contact-form-col,
  .contact-info-col {
    display: flex;
    flex-direction: column;
  }
  .contact-form-col > .contact-form,
  .contact-info-col > .contact-info {
    flex: 1;  /* Inner content stretches to fill the equalized column. */
  }
  /* Info column content stays top-aligned so its first line sits at the
   * same Y as the form's first field — a common pattern that reads as
   * "two columns side by side", not "form on the left, floating bio on
   * the right". */
}

/* When a column has a custom `color:` inline (user picked a text color),
   force every descendant to inherit it — otherwise the explicit color rules
   on `.contact-info__label`, `.contact-info__address`, `.contact-info__list a`,
   etc. would win and the user's choice wouldn't visually apply.
   The submit button is explicitly excluded so its admin-picked text colour
   keeps showing through (it sits inside .contact-form-col but is meant to
   contrast against the column's text colour). */
.contact-form-col[style*="color:"] *:not(.contact-form__submit):not(.contact-form__submit *),
.contact-info-col[style*="color:"] * {
  color: inherit !important;
}

/* Full half-fill column backgrounds — when a column has an inline background,
   the colour fills its entire half of the section: edge-to-edge horizontally
   AND top-to-bottom vertically (including the section's vertical padding).
   The pseudo sits behind the column (z-index: -1, parent has position:
   relative without an explicit z-index, so the pseudo drops behind the
   column box) so the column's own padding/content/radius still render on
   top. Section overflow is clipped so the pseudo doesn't bleed into
   adjacent blocks or trigger a horizontal scrollbar. */
.contact-form-col[style*="background"],
.contact-info-col[style*="background"] {
  position: relative;
}
.contact-form-col[style*="background"]::before,
.contact-info-col[style*="background"]::after {
  content: '';
  position: absolute;
  top: -100vh;
  bottom: -100vh;
  background-color: inherit;
  pointer-events: none;
  z-index: -1;
}
/* Form col on the left: fill from its right edge all the way to viewport-left. */
.contact-form-col[style*="background"]::before {
  right: 0;
  left: -100vw;
}
/* Info col on the right: fill from its left edge all the way to viewport-right. */
.contact-info-col[style*="background"]::after {
  left: 0;
  right: -100vw;
}
.block-contact:has(.contact-form-col[style*="background"], .contact-info-col[style*="background"]) {
  overflow: hidden;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-info__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--secondary, #0084AF);
  margin: 0;
}

.contact-info__address {
  font-style: normal;
  font-size: 18px;
  line-height: 1.8;
  color: var(--wp--preset--color--primary, var(--cb-primary));
}

.contact-info__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-info__list a {
  color: var(--wp--preset--color--secondary, #64748b);
  text-decoration: none;
  font-size: 18px;
  transition: color 0.15s;
}

.contact-info__list a:hover {
  color: var(--wp--preset--color--secondary, #0084AF);
}

.contact-info__hours {
  font-size: 18px;
  line-height: 1.7;
  color: var(--wp--preset--color--secondary, #64748b);
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--wp--preset--color--muted, var(--cb-muted));
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-form__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.contact-form__eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent, #F5833C);
  background: rgba(245, 131, 60, 0.1);
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 0 4px;
}

.contact-form__heading {
  font-size: clamp(1.75rem, 2.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--wp--preset--color--primary, var(--cb-primary));
  margin: 0;
}

.contact-form__subheading {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--wp--preset--color--secondary, #64748b);
  margin: 0;
}

.contact-form__row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.contact-form__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--wp--preset--color--secondary, #0084AF);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-form__input {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 2px solid var(--wp--preset--color--muted, var(--cb-muted));
  border-radius: 0;
  font-size: 18px;
  font-family: inherit;
  color: var(--wp--preset--color--primary, var(--cb-primary));
  background: transparent;
  transition: border-bottom-color 0.2s;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.contact-form__input::-moz-placeholder {
  /* Follow the form column's text colour so an admin-picked dark text on
   * a light bg gets a faded-dark placeholder, not a fixed pale teal that
   * looks broken on light columns. */
  color: currentColor;
  opacity: 0.45;
  font-weight: 400;
}

.contact-form__input::placeholder {
  /* Follow the form column's text colour so an admin-picked dark text on
   * a light bg gets a faded-dark placeholder, not a fixed pale teal that
   * looks broken on light columns. */
  color: currentColor;
  opacity: 0.45;
  font-weight: 400;
}

.contact-form__input:focus {
  border-bottom-color: var(--wp--preset--color--secondary, #0084AF);
}

.contact-form__textarea {
  resize: vertical;
  min-height: 96px;
}

/* `--submit-bg` / `--submit-text` are inline-style overrides set from the
   editor; they fall through to the theme defaults when not provided.
   Using CSS vars rather than plain `background:`/`color:` means the :hover
   state can lean on the same variables (via filter brightness) instead of
   fighting the user's inline color. */
.contact-form__submit {
  align-self: flex-start;
  padding: 16px 40px;
  background: var(--submit-bg, var(--wp--preset--color--primary, var(--cb-primary)));
  color: var(--submit-text, #fff);
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.03em;
  margin-top: 0.5rem;
  transition:
    filter 0.2s,
    transform 0.15s;
}

.contact-form__submit:hover {
  filter: brightness(0.92);
  transform: translateY(-2px);
}

.contact-form__submit:active {
  filter: brightness(0.85);
  transform: translateY(0);
}

/* ── Footer ───────────────────────────────────────────────────────────────────
 * Global footer: full-width navy anchor at every page bottom. Refactored
 * against the design system — palette via tokens (not raw teal, which was
 * failing WCAG AA at 1.9:1 on navy), Inter type scale, section-rhythm
 * padding, Feather focus rings, prefers-reduced-motion killswitch.
 * ------------------------------------------------------------------------- */
.site-footer {
  background: var(--wp--preset--color--primary, var(--cb-primary, #00486A));
  /* Text colour defaults to white-at-85 for body copy; headings + links
   * opt into full white, muted bottom-bar opts to white-at-70. All three
   * levels verified ≥ 4.5:1 against the navy primary. */
  color: rgba(255, 255, 255, 0.85);
  /* `position: relative` + `overflow: hidden` set up the flare below.
   * Children get z-index:1 so they sit above the gradient. */
  position: relative;
  overflow: hidden;
}

/* Subtle accent-coloured radial flare in the top-right — mirrors the
 * effect on .wp-block-styrk-blocks-split-section.has-primary-background-color.
 * Soft, blurred, low-alpha so it reads as ambient lighting, not as a shape. */
.site-footer::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  background: radial-gradient(
    circle,
    var(--wp--preset--color--accent, var(--cb-accent, #1E5BD8)),
    transparent 65%
  );
  opacity: 0.18;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.site-footer > * {
  position: relative;
  z-index: 1;
}

/* Inner content cap + horizontal padding match the react-header so the
 * two anchor bands' content edges land at the same x-coordinates across
 * the viewport — visually the page reads as one coherent frame, not a
 * "wide page, narrow footer" mismatch. Header uses 1440 + 24px padding;
 * we follow. (Per the design system, 1440 is the "wide" cap — correct
 * for full-viewport anchor bands like header/footer, distinct from the
 * 1200 reading-width cap used by prose-type content.) */
.site-footer__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding:
    clamp(4rem, 8vw, 6rem)               /* top — matches py-section */
    24px                                 /* sides — matches header */
    clamp(2rem, 4vw, 3rem);              /* bottom — slightly tighter before bar */
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
}

/* Desktop: logo column left, 3 content columns to its right */
@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(2.5rem, 5vw, 4rem);
  }

  /* Logo lives inside a WP shortcode wrapper — pin width at both levels so
   * column widths stay predictable regardless of whether the shortcode
   * resolver left the wrapper or inlined the anchor. */
  .site-footer__inner > .wp-block-shortcode,
  .site-footer__inner > .site-footer__logo {
    flex: 0 0 200px;
    min-width: 0;
  }
}

/* Logo treatment — white variant, or CSS-inverted colour logo as fallback. */
/* Wrapper <div> the shortcode now emits — prevents WP's wpautop from
 * auto-wrapping the inline <a> in a <p> (which was collapsing to height:0
 * when the SVG inside had no intrinsic dimensions). */
.site-footer__logo {
  flex: 0 0 auto;
  line-height: 0;            /* kill inline-element gap around the <a> */
}
.site-footer__logo-link {
  display: inline-block;
  /* Enlarged tap target with no visual change. */
  padding: 4px;
  margin: -4px;
  border-radius: 4px;
  /* Belt-and-braces: make sure the link itself reserves the logo's
   * footprint even if the inner <img> fails to report dimensions. */
  width: 208px;              /* 200 logo + 2×4 hit-target padding */
  min-height: 72px;          /* 64 logo + 2×4 hit-target padding */
}
.site-footer__logo-img {
  /* EXPLICIT size — SVGs without intrinsic width/height or viewBox
   * would render at 0×0 with the previous `width: auto; height: auto`
   * rule. Setting concrete dimensions + object-fit: contain guarantees
   * the logo always has a footprint, regardless of the uploaded asset
   * type or whether the SVG was exported with dimensions. */
  display: block;
  width: 200px;
  height: 64px;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
}
.site-footer__logo-img--invert {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* Columns wrapper (3 content columns beside the logo). */
.site-footer__cols.wp-block-columns {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin: 0;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .site-footer__cols.wp-block-columns {
    flex-direction: row;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

/* Force equal-width flex columns — neutralises any WP inline flex-basis. */
.site-footer__cols .wp-block-column {
  flex: 1 1 0%;
  min-width: 0;
}

/* ── Column headings (Kontakt / Følg oss / site name) ────────────────────
 * Design-system eyebrow spec: 14px Inter 600, UPPERCASE, 0.14em tracking,
 * pure white for maximum contrast (9.9:1 AAA on navy). 20px gap to the
 * first item in the column for clear hierarchy.
 *
 * Selectors include both `h2.*` and `p.*` variants: the hardcoded
 * "Kontakt" header is an <h2>, the shortcode-driven site-name + social
 * heading are also <h2> in v1.6+ but older markup that still emits <p>
 * (or WP block-editor previews) falls back gracefully. The tag chain
 * also raises specificity so WP's :where(.is-layout-flow) > * margin
 * reset can't swallow the bottom margin. */
.site-footer h2.site-footer__col-heading,
.site-footer p.site-footer__col-heading {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 20px;
}

/* ── Body copy in columns ──────────────────────────────────────────────── */
.site-footer .wp-block-column p,
.site-footer .wp-block-column address {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  font-style: normal;
  color: rgba(255, 255, 255, 0.85);   /* 6.7:1 on navy — AA */
  margin: 0;
}
.site-footer__address,
.site-footer__contact-info {
  margin-bottom: 8px;
}
.site-footer__contact-info + .site-footer__contact-info {
  margin-top: 0;
}
/* Org number sits at the bottom of the Kontakt column, visually muted —
 * regulatory context, not a contact action. The span holding the number
 * itself stays full-opacity so the digits are easy to copy.
 *
 * Specificity note: needs to outrank `.site-footer .wp-block-column p`
 * (0,3,1) above — hence the scope + element selector, otherwise that
 * rule's 16px / 0.85 opacity wins and the muted-regulatory vibe is lost.
 */
.site-footer .wp-block-column p.site-footer__org-number {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);  /* 4.6:1 on navy — AA */
  letter-spacing: 0.01em;
}
.site-footer .wp-block-column p.site-footer__org-number span {
  color: rgba(255, 255, 255, 0.85); /* same as other footer body — AA */
  font-variant-numeric: tabular-nums;
}

/* ── Links ─────────────────────────────────────────────────────────────── */
.site-footer a {
  color: inherit;                     /* inherits the surrounding opacity */
  text-decoration: none;
  border-radius: 2px;
  transition: color 0.15s, background-color 0.15s;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: #ffffff;                     /* bump to full white on interaction */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.site-footer a:focus-visible {
  outline: 2px solid var(--wp--preset--color--secondary, #0084AF);
  outline-offset: 3px;
}

/* ── Bottom bar: copyright + legal nav + credits ──────────────────────── */
.site-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__bar > .wp-block-group {
  /* Same 1440 + 24px-side-padding as .site-footer__inner so the
   * copyright/legal/credits row sits flush under the main footer
   * columns — no offset at the hairline divider. */
  max-width: 1440px;
  margin-inline: auto;
  padding: 1.25rem 24px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .site-footer__bar > .wp-block-group {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
}
.site-footer__bar p,
.site-footer__bar nav {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.70);   /* 5.8:1 on navy — AA */
  margin: 0;
}

/* Empty paragraph blocks left over at the end of saved page content
 * (a common Gutenberg artifact when an editor hits Enter on the last
 * block) used to add ~30px of accidental margin between the last real
 * block and the footer. They have nothing to render; collapse them. */
.wp-block-post-content > p:empty {
  display: none;
}

/* Styrk Reklame mark inline before the credits text. We use a CSS mask so
 * the source asset (black on white) inherits the footer's currentColor —
 * no need to ship a separate white variant or fight a filter chain. */
.site-footer__credits-mark-group {
  white-space: nowrap;
}
/* Start / end placement: keep the mark and the text on the same baseline
   and give the mark a little breathing room on the side it touches. The
   inline variant doesn't need either rule because the mark is already
   nested inside the .site-footer__credits-mark-group nowrap span. */
.site-footer__credits--logo-start .site-footer__credits-logo {
  margin-right: 0.5em;
  margin-left: 0;
}
.site-footer__credits--logo-end .site-footer__credits-logo {
  margin-right: 0;
  margin-left: 0.5em;
}
.site-footer__credits-logo {
  display: inline-block;
  width: 1.6em;
  height: 1em;
  margin-right: 0.5em;
  vertical-align: -0.18em;
  background-color: currentColor;
  -webkit-mask: var(--styrk-mark-img) center / contain no-repeat;
          mask: var(--styrk-mark-img) center / contain no-repeat;
}

/* Legal-nav inline list with · separators. */
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
.site-footer__legal a {
  position: relative;
  padding: 0.25rem 0;               /* bigger hit area */
}
.site-footer__legal a + a::before {
  content: '·';
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.40);
  pointer-events: none;
}

/* Reduced-motion: disable every transition inside the footer. Same pattern
 * used for the react-header killswitch. */
@media (prefers-reduced-motion: reduce) {
  .site-footer,
  .site-footer *,
  .site-footer *::before,
  .site-footer *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ── Post Excerpt block — full-width outer, 1024px inner ────────────────────
   WP's layout system generates:
     .is-layout-constrained > :where(:not(.alignfull)) { max-width: 1200px; }
   That caps the excerpt block to content-width.  We override max-width here
   so the outer wrapper fills the viewport (background bleeds edge-to-edge)
   while the inner paragraph text is centred at max 1024px.                */
.wp-block-post-excerpt {
  max-width: 100% !important; /* bust out of the 1200px content-width cap  */
  width: 100%;
  box-sizing: border-box;
  /* Remove inline horizontal padding — the inner elements carry their own  */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.wp-block-post-excerpt__excerpt,
.wp-block-post-excerpt__more-text {
  max-width: 64rem; /* 1024px */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}
.wp-block-post-excerpt__more-text {
  margin-top: 2rem;
}

/* ── Excerpt block: read-more CTA button ─────────────────────────────────── */
/* Matches .cb-cta-btn exactly: same size, weight, radius, shadow, hover.   */
.wp-block-post-excerpt__more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: 8px;
  background: var(--wp--preset--color--accent, var(--cb-accent));
  color: var(--cb-dark-text) !important;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none !important;
  letter-spacing: 0.01em;
  line-height: 1.75; /* matches site base — gives same height as .cb-cta-btn */
  box-shadow: 0 2px 12px var(--cb-accent-28);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.wp-block-post-excerpt__more-link:hover {
  background: var(--cb-accent);
  box-shadow: 0 4px 20px var(--cb-accent-38);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN UPLIFT — Air, Rhythm, Dividers, Polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Smooth scroll & selection colour ────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
::-moz-selection {
  background: var(--cb-selection-bg, #F5833C);
  color: var(--cb-selection-color, #ffffff);
}
::selection {
  background: var(--cb-selection-bg, #F5833C);
  color: var(--cb-selection-color, #ffffff);
}

/* ── Global section spacing — more generous ───────────────────────────────── */
:root {
  --cb-section-gap: clamp(5rem, 9vw, 7rem);
  --cb-section-gap-sm: clamp(3rem, 6vw, 5rem);
}

/* ── Eyebrow pill badge ───────────────────────────────────────────────────── */
.cb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Defaults below — NO !important so the per-block eyebrow color
     attributes (eyebrowBgColor / eyebrowTextColor / eyebrowRadius)
     wired through SectionHeader's inline `style` prop can override
     them. The earlier `!important` triplet silently nuked every
     user-picked colour and pill background. */
  padding: 0;
  background: none;
  color: var(--wp--preset--color--primary, #00486A);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
  border: none;
  line-height: 1;
  /* Never stretch to fill parent flex container — always fit content width */
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
}
/* Restore centering when inside a centered (items-center) flex column */
.items-center > .cb-eyebrow,
.items-center .cb-eyebrow {
  align-self: center;
}
/* Mobile/tablet: always center eyebrow + headings inside section headers */
@media (max-width: 1023px) {
  .cb-section-header .cb-eyebrow {
    align-self: center !important;
  }
  .cb-section-header h2,
  .cb-section-header p {
    text-align: center !important;
  }
}
@media (min-width: 769px) {
  .cb-eyebrow { font-size: 16px; }
}
@media (min-width: 1025px) {
  .cb-eyebrow { font-size: 18px; }
}

/* ── Section separators ───────────────────────────────────────────────────── */
/* Hairline rule between sections, excluding hero/logo-strip boundaries */
.cb-block-features,
.cb-block-stats,
.cb-block-rich-text,
.cb-block-split,
.cb-block-testimonial {
  position: relative;
}

.cb-block-features::before,
.cb-block-stats::before,
.cb-block-rich-text::before,
.cb-block-split::before,
.cb-block-testimonial::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: clamp(1rem, 5vw, 4rem);
  right: clamp(1rem, 5vw, 4rem);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(226, 232, 240, 0.8) 20%, rgba(226, 232, 240, 0.8) 80%, transparent);
  pointer-events: none;
}

/* ── Section header — tighter leading, larger heading gap ─────────────────── */
.cb-section-header {
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.cb-section-header h2 {
  max-width: 24ch;
}

/* ── Feature cards ─────────────────────────────────────────────────────────── */
.cb-block-features {
  background: var(--cb-bg);
}

.cb-feature-card {
  position: relative;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: var(--cb-shadow-sm);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
  background: var(--cb-bg);
  isolation: isolate;
}

/* Gradient top accent line on each card */
.cb-feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, rgba(var(--cb-primary-r), var(--cb-primary-g), var(--cb-primary-b), 0), rgba(0, 132, 175, 0));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.3s ease;
}

.cb-feature-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--wp--preset--color--primary, #00486A), var(--wp--preset--color--muted, #5DB6CF));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cb-feature-card:hover {
  box-shadow: var(--cb-shadow-md);
  transform: translateY(-3px);
  border-color: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.2);
}

.cb-feature-card:hover::after {
  opacity: 1;
}

/* ── Editor-only inline controls for feature-cards + service-list ─────────
   These class names are only emitted by edit.tsx (block editor canvas), not
   by template.php (front end), so the rules below are inert on the public
   site. Goal: per-card editing (icon, link, colours, remove) lives ON the
   card, not in the sidebar — admin doesn't have to hunt the right panel. */
.cb-feature-card__icon-slot { margin-bottom: 6px; }
/* Inline controls — URL on its own row at the top, colour swatches + trash
   grouped on a second row below. The buttons share a baseline and read as
   one cluster instead of wrapping unpredictably with the URL field. */
.cb-feature-card__actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.cb-feature-card__actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.cb-feature-card__url {
  width: 100%;
  min-width: 0;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 4px;
  background: rgba(255,255,255,0.85);
  color: #1e1e1e;
}
.cb-feature-card__url:focus { outline: 2px solid var(--wp-admin-theme-color, #007cba); outline-offset: 1px; }
.cb-feature-card__swatch,
.cb-feature-card__remove,
.cb-service-row__remove {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.85);
  border-radius: 4px;
  cursor: pointer;
  color: #1e1e1e;
}
.cb-feature-card__swatch:hover,
.cb-feature-card__remove:hover,
.cb-service-row__remove:hover { background: rgba(0,0,0,0.04); }
.cb-feature-card__swatch-dot {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.25);
  background: transparent;
}
.cb-feature-card__remove,
.cb-service-row__remove {
  border-color: rgba(190,0,0,0.25);
  color: rgba(150,0,0,0.85);
}
.cb-feature-card__remove:hover,
.cb-service-row__remove:hover { background: rgba(190,0,0,0.06); }

/* Service-list editor row: a 2-row grid so the inline-controls row sits
   directly under the service-name row without breaking the visual layout. */
.cb-service-row--edit {
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
}
.cb-service-row--edit .cb-service-row__lead { grid-row: 1; grid-column: 1; }
.cb-service-row--edit .cb-service-row__name { grid-row: 1; grid-column: 2; }
.cb-service-row--edit .cb-service-row__arr  { grid-row: 1; grid-column: 3; }
.cb-service-row__actions {
  grid-row: 2; grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0 4px;
  border-top: 1px dashed rgba(0,0,0,0.12);
  margin-top: 8px;
  position: relative;
}
.cb-service-row__url {
  flex: 1 1 200px;
  min-width: 0;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 4px;
  background: rgba(255,255,255,0.85);
  color: #1e1e1e;
}
.cb-service-row__url:focus { outline: 2px solid var(--wp-admin-theme-color, #007cba); outline-offset: 1px; }
/* Front-end service-row lead: number always shown; if an icon is set, it
   sits to the right of the number, separated by a thin same-colour pipe so
   they read as a paired marker. Companion themes refine the colours. */
.cb-service-row__lead {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.cb-service-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
/* The "|" separator inherits the lead's colour — same muted tone as the
   number — so it always sits at the same visual weight. */
.cb-service-row__icon::before {
  content: "|";
  font-family: inherit;
  font-weight: 300;
  font-size: 18px;
  opacity: 0.4;
}
.cb-service-row__icon svg { width: 22px; height: 22px; fill: none; }

/* Force fill:none on IconPicker preview SVGs — Gutenberg's editor-iframe
   reset and some block-editor button styles set `fill: currentColor` on
   svg children, which paints our outlined icons as solid silhouettes. */
.cb-icon-picker svg,
.cb-icon-picker svg *,
.cb-feature-card__icon-slot svg,
.cb-feature-card__icon-slot svg *,
.cb-service-row__lead svg,
.cb-service-row__lead svg * { fill: none !important; }

/* ── Inline "Add card / row" placeholder — dashed outline matching each
   card's shape, sits in the grid right after the last card so it's
   discoverable and shows admins exactly where the new card lands. */
.cb-feature-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.55);
  background: transparent;
  border: 2px dashed rgba(0,0,0,0.22);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.cb-feature-add:hover {
  color: var(--wp-admin-theme-color, #007cba);
  border-color: var(--wp-admin-theme-color, #007cba);
  background: rgba(0,124,186,0.04);
}
.cb-feature-add__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
}
/* Card-mode: same rounded-2xl + min-height as the cards so it visually
   reserves the next slot in the grid. */
.cb-feature-add--card {
  min-height: 220px;
  border-radius: 16px;
  flex-direction: column;
  padding: 32px;
}
/* List-mode: a row-shaped placeholder, padding matches the service rows. */
.cb-feature-add--list {
  padding: 18px 4px;
  border-radius: 6px;
  margin-top: 8px;
}

/* Feature icon — accent-tinted background with SVG line icon */
.cb-feature-icon {
  background: linear-gradient(135deg, rgba(0, 72, 106, 0.08), rgba(0, 132, 175, 0.08));
  border: 1px solid rgba(0, 132, 175, 0.15);
  border-radius: 12px;
  color: var(--wp--preset--color--secondary, #0084AF);
}
.cb-feature-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
}

/* ── Call Card phone hover ──────────────────────────────────────────────────── */
.call-card:hover .call-card__phone[data-hover-bg] {
  background: var(--call-card-hover-bg);
}

/* ── Stats section ──────────────────────────────────────────────────────────── */
.cb-block-stats {
  background: var(--wp--preset--color--surface, var(--cb-surface));
}

.cb-stats-grid {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.5rem;
  overflow: hidden;
  background: var(--cb-bg);
}

.cb-stat {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* Vertical dividers between stat cells */
.cb-stat + .cb-stat {
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

@media (min-width: 640px) {
  .cb-stats-grid.grid-cols-2 .cb-stat + .cb-stat,
  .cb-stats-grid.grid-cols-3 .cb-stat + .cb-stat,
  .cb-stats-grid.grid-cols-4 .cb-stat + .cb-stat {
    border-top: none;
    border-left: 1px solid rgba(226, 232, 240, 0.8);
  }
}

/* Gradient stat number */
.cb-stat-value {
  font-size: 48px;
  background: linear-gradient(135deg, var(--cb-primary) 0%, var(--wp--preset--color--secondary, #0084AF) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
@media (min-width: 769px) {
  .cb-stat-value { font-size: 56px; }
}
@media (min-width: 1025px) {
  .cb-stat-value { font-size: 64px; }
}

.cb-stat-label {
  color: var(--wp--preset--color--primary, #00486A);
  font-size: 16px;
  letter-spacing: 0.01em;
}

/* ── Rich text section ──────────────────────────────────────────────────────── */
.cb-block-rich-text {
  background: var(--cb-bg);
}

.cb-rich-text-link {
  position: relative;
  padding-bottom: 2px;
  transition: gap 0.15s ease;
}
.cb-rich-text-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  transition: opacity 0.15s ease;
}
.cb-rich-text-link:hover::after {
  opacity: 1;
}

/* ── Split section ──────────────────────────────────────────────────────────── */
.cb-block-split {
  background: var(--wp--preset--color--surface, var(--cb-surface));
}

.cb-split-image {
  box-shadow: var(--cb-shadow-lg);
  transition:
    box-shadow 0.3s ease,
    transform 0.4s ease;
}

.cb-split-image-wrap:hover .cb-split-image {
  box-shadow: var(--cb-shadow-xl);
  transform: scale(1.01);
}

/* ── Split section videos ───────────────────────────────────────────────────── */
.cb-split-video {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 1rem;
  box-shadow: var(--cb-shadow-lg);
  transition:
    box-shadow 0.3s ease,
    transform 0.4s ease;
}

.cb-split-image-wrap:hover .cb-split-video {
  box-shadow: var(--cb-shadow-xl);
  transform: scale(1.01);
}

/* Portrait video: always visible, constrained so it never blows out the viewport */
.cb-split-video--portrait {
  aspect-ratio: 9 / 16;
  height: auto; /* override height:100% from .cb-split-video base */
  width: auto; /* override width:100%  from .cb-split-video base */
  max-width: min(340px, 90%);
  max-height: 72vh;
  margin: 0 auto;
  display: block;
}

/* On desktop the portrait video sits in a 50% column — let it breathe a bit more */
@media (min-width: 640px) {
  .cb-split-video--portrait {
    max-width: min(420px, 100%);
    max-height: 80vh;
  }
}

/* Landscape video */
.cb-split-video--landscape {
  aspect-ratio: 4 / 3;
  display: block;
  width: 100%;
}

/*
 * When BOTH portrait and landscape videos are uploaded (.cb-has-both-videos):
 * show portrait on mobile, swap to landscape on ≥640 px.
 */
.cb-has-both-videos .cb-split-video--portrait {
  display: block;
}
.cb-has-both-videos .cb-split-video--landscape {
  display: none;
}

@media (min-width: 640px) {
  .cb-has-both-videos .cb-split-video--portrait {
    display: none;
  }
  .cb-has-both-videos .cb-split-video--landscape {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-split-video {
    transition: none;
    transform: none !important;
  }
  .cb-split-image-wrap:hover .cb-split-video {
    transform: none;
  }
}

/* ── Split Section: body paragraph rhythm ─────────────────────────────────
 * The body wrapper is a div (not a p) so authors can include their own
 * `<p>` tags. Tighten the inter-paragraph gap so 2-3 paragraphs read as
 * one continuous text block, not as floating disconnected statements. */
.cb-split-body p {
  margin: 0 0 0.75em;
}
.cb-split-body p:last-child {
  margin-bottom: 0;
}

/* ── Split Section: employee card variant ─────────────────────────────────
 * When mediaSource = 'employee', the media side renders a card pulled
 * from the Employees CPT (photo + name + role). Looks the same as a
 * single tile from the Employee Grid block. */
.cb-split-employee-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--wp--preset--color--muted, #e2e8f0);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  width: 100%;
}
.cb-split-employee-card__photo {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.cb-split-employee-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}
.cb-split-employee-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cb-split-employee-card__name {
  font-family: var(--wp--preset--font-family--display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--wp--preset--color--primary, #0F1B2D);
  line-height: 1.2;
}
.cb-split-employee-card__role {
  font-size: 1rem;
  color: rgba(15, 27, 45, 0.72);
  margin: 0;
  line-height: 1.45;
}

/* ── Split Section: floating stat badge ───────────────────────────────────
 * Optional dark card pinned bottom-left of the media side. Used for
 * "20+ år", "100+ prosjekter", etc. */
.cb-split-image-wrap {
  position: relative;
}
.cb-split-stat-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: var(--wp--preset--color--primary, #0F1B2D);
  color: #fff;
  padding: 20px 24px;
  border-radius: 8px;
  min-width: 180px;
  max-width: 240px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  z-index: 2;
  pointer-events: none;
}
.cb-split-stat-badge__number {
  font-family: var(--wp--preset--font-family--display, inherit);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
}
.cb-split-stat-badge__label {
  font-size: 0.8125rem;
  opacity: 0.85;
  margin-top: 6px;
  line-height: 1.35;
}
@media (max-width: 640px) {
  .cb-split-stat-badge {
    left: 12px;
    bottom: 12px;
    padding: 14px 18px;
    min-width: 140px;
  }
  .cb-split-stat-badge__number { font-size: 1.75rem; }
}

/* ── React Header — sticky + hide-on-scroll variants ──────────────────────
 * Settings → Header lets admins choose:
 *   - Position: relative (default) | sticky
 *   - Hide on scroll down (only effective with sticky)
 * The wrapper carries `data-position` and `data-hide-on-scroll` set in
 * view.tsx; CSS below promotes the parent template-part header to sticky
 * (wp-block-template-part wraps the React mount with position:absolute
 * height:0 by default — that traps a sticky child to a 0px range, so we
 * lift sticky to the outermost wp-block-template-part).
 *
 * Hide-on-scroll: when the inner wrapper gets `.is-hidden`, translate
 * the OUTER template-part header (which carries the bg + sticky) so the
 * whole strip slides off-screen. Translating only the inner wrapper
 * leaves the outer's dark bg painted as a hairline strip at the top. */
header.wp-block-template-part:has(> .react-header-live-wrapper--sticky) {
  position: sticky !important;
  top: 0 !important;
  height: auto !important;
  z-index: 10000;
  transition: transform 0.32s cubic-bezier( 0.32, 0.72, 0, 1 ) !important;
  /* IMPORTANT: do NOT add `will-change: transform` here. It creates a
   * new containing block which traps the `position: fixed` mobile menu
   * (rendered inside this header tree) to the header's 100px box. */
}
/* `!important` outranks the parent theme's blanket
 * `header { transform: none !important }` breakout-safety rule. */
header.wp-block-template-part:has(> .react-header-live-wrapper--sticky.is-hidden) {
  transform: translateY( -100% ) !important;
}

/* ── Testimonial ────────────────────────────────────────────────────────────── */
.cb-block-testimonial {
  /* Solid surface — the design system forbids gradients on section
   * backgrounds (stat numbers text-clip is the only allowed exception).
   * Surface keeps the alternating white ↔ surface ↔ primary rhythm. */
  background: var(--wp--preset--color--surface, var(--cb-surface, #fafaf8));
  position: relative;
  overflow: hidden;
}

.cb-block-testimonial::after {
  content: '\201C';
  position: absolute;
  /* Anchor the glyph to the BOTTOM of the section and centre it horizontally,
   * so it sits aligned with the author name / role (the "text under"). */
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 320px;
  line-height: 1;
  font-family: Georgia, serif;
  color: var(--wp--preset--color--secondary, #0084AF);
  opacity: 0.04;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 0;
}

.cb-testimonial-figure {
  position: relative;
  z-index: 1;
}

.cb-testimonial-quote p {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--cb-primary);
  font-style: italic;
  letter-spacing: -0.01em;
}
@media (min-width: 769px) {
  .cb-testimonial-quote p { font-size: 22px; }
}
@media (min-width: 1025px) {
  .cb-testimonial-quote p { font-size: 26px; }
}

/* Star rating decoration */
.cb-testimonial-figure::before {
  content: '★★★★★';
  display: block;
  color: #f59e0b;
  font-size: 18px;
  letter-spacing: 0.15em;
  margin-bottom: 8px;
}

/* ── Hero panel (glass card on right side) ──────────────────────────────────── */
.cb-hero-panel {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.cb-hero-panel-inner {
  position: relative;
}

.cb-hero-bar {
  background: rgba(255, 255, 255, 0.15);
}

/* Animated shimmer on hero bars */
@keyframes cb-shimmer {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.3;
  }
}
.cb-hero-panel .cb-hero-bar:nth-child(1) {
  animation: cb-shimmer 3s ease-in-out infinite;
}
.cb-hero-panel .cb-hero-bar:nth-child(2) {
  animation: cb-shimmer 3s ease-in-out 0.5s infinite;
}
.cb-hero-panel .cb-hero-bar:nth-child(3) {
  animation: cb-shimmer 3s ease-in-out 1s infinite;
}

/* backdrop-filter is now handled inline by the React component on all pages */

/* ── Process block — editor-only ───────────────────────────────────────────
 * The block's render template emits `<span class="cb-eyebrow">…</span>`
 * for the frontend (which is `display: inline-flex; width: fit-content;`
 * for layout reasons). That class shape was breaking the RichText
 * click-target inside the Gutenberg editor — admins couldn't click the
 * eyebrow to edit it. The editor uses a custom class
 * `.cb-process__eyebrow-edit` that mimics the visual look (uppercase,
 * accent colour, letter-spacing) but as a plain block element so
 * RichText's click area is the full text width. */
.cb-process__eyebrow-edit {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent, var(--cb-accent, #F5833C));
  margin: 0 0 12px;
  cursor: text;
}
@media (min-width: 769px) { .cb-process__eyebrow-edit { font-size: 16px; } }
@media (min-width: 1025px) { .cb-process__eyebrow-edit { font-size: 18px; } }

/* Inline per-step controls (move up / move down / remove) sit at the
 * right edge of each step row in the editor only. Hidden when the step
 * is not the actively-selected one to keep the canvas tidy. */
.cb-process__step-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  margin-left: 12px;
  opacity: 0.5;
  transition: opacity 0.15s;
}
.cb-process__step:hover .cb-process__step-controls,
.cb-process__step:focus-within .cb-process__step-controls {
  opacity: 1;
}

/* Two-column tasks editor row — RichText per item + remove button. */
.cb-process__step-col-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.cb-process__step-col-item .cb-process__step-col-text {
  flex: 1;
  min-width: 0;
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.55;
}
.cb-process__step-col-item .cb-process__step-col-text::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--wp--preset--color--accent, var(--cb-accent, #F5833C));
  font-weight: 600;
}

/* Add-step button + Add-task button — secondary visuals, sit below
 * the list on the canvas side. */
.cb-process__add {
  margin-top: 16px;
}

/* CTA preview — explicit dimensions so admins see what the rendered
 * button will look like, not a raw underline-link. */
.cb-process__cta-preview {
  pointer-events: none; /* click-through to the wrapping block selection */
}

/* Width-hint Notice in the inspector. Subtle, helps admins find the
 * align toolbar (which lives above the canvas, not in this panel). */
.cb-process__width-hint {
  margin-bottom: 12px !important;
  font-size: 12px !important;
}

/* ── Process block ──────────────────────────────────────────────────────────────
 *
 * "Slik jobber vi" — vertical numbered cards. Pattern researched 2026-04-27
 * across the Norwegian regnskap vertical (Sanna, Amesto, Regnskap og
 * Rådgivning); they all converge on big-numeral + title + body, no
 * connectors, no animations, vertical stack on every breakpoint.
 *
 * Responsive strategy:
 *   - Desktop (1024+): step number sits to the LEFT of the body in a
 *     wide row; two-column tasks render side-by-side.
 *   - Tablet (640–1023): number still left of body but tighter; two-column
 *     tasks still side-by-side (just enough room).
 *   - Mobile (≤640): number stacks ABOVE body; two-column tasks collapse
 *     to a single stacked column with the col-heading acting as a
 *     section label.
 */
.cb-process {
  background: var(--wp--preset--color--surface, var(--cb-surface, #fafaf8));
  padding-block: clamp(64px, 10vh, 120px);
}
.cb-process__inner {
  width: 100%;
  max-width: 1100px;
  /* Anchor the narrow process column to the same vertical axis as
   * full-width blocks. The template wraps this in an outer
   * `max-w-site mx-auto px-6` rail (see process/template.php) so on
   * wide viewports the column starts at the rail's left edge instead
   * of drifting all the way to viewport-left. (Centred process
   * layouts override this via .cb-process--align-center below.) */
  margin-inline-start: 0;
  margin-inline-end: auto;
  box-sizing: border-box;
}
.cb-process--align-center .cb-process__inner {
  /* When the block's heading is centre-aligned the entire column
   * centres on the viewport instead of left-anchoring. */
  margin-inline-start: auto;
}
.cb-process__header {
  margin-bottom: clamp(40px, 6vh, 72px);
}
.cb-process--align-center .cb-process__header {
  text-align: center;
}
.cb-process__heading {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--primary, var(--cb-primary, #00486A));
  margin: 12px 0 0;
}
.cb-process__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(24px, 4vh, 48px);
}
.cb-process__step {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: clamp(20px, 3vh, 32px) 0;
  border-top: 1px solid color-mix(in srgb, var(--cb-primary, #00486A) 12%, transparent);
}
.cb-process__step:first-child {
  border-top: 0;
  padding-top: 0;
}
.cb-process__step-marker {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.cb-process__step-number {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--accent, var(--cb-accent, #F5833C));
  font-variant-numeric: tabular-nums;
}
.cb-process__step-body {
  min-width: 0; /* allow text to wrap inside grid cell */
}
.cb-process__step-title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--wp--preset--color--primary, var(--cb-primary, #00486A));
  margin: 0 0 8px;
}
.cb-process__step-text {
  font-size: 17px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--cb-primary, #00486A) 80%, transparent);
  margin: 0;
  max-width: 56ch;
}

/* Two-column tasks ("Hva du må gjøre / Hva vi gjør") */
.cb-process__step-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  margin-top: 16px;
}
.cb-process__step-col-heading {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent, var(--cb-accent, #F5833C));
  margin: 0 0 12px;
}
.cb-process__step-col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cb-process__step-col-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--cb-primary, #00486A) 85%, transparent);
}
.cb-process__step-col-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--wp--preset--color--accent, var(--cb-accent, #F5833C));
  font-weight: 600;
}

/* Optional connector line between step markers (off by default; admin opt-in). */
.cb-process--connector .cb-process__step:not(:last-child) .cb-process__step-marker {
  position: relative;
}
.cb-process--connector .cb-process__step:not(:last-child) .cb-process__step-marker::after {
  content: '';
  position: absolute;
  top: clamp(60px, 7vw, 92px);
  left: clamp(20px, 2.5vw, 38px);
  width: 1px;
  height: 100%;
  background: color-mix(in srgb, var(--cb-accent, #F5833C) 35%, transparent);
}

/* CTA below the list */
.cb-process__cta {
  margin-top: clamp(32px, 5vh, 56px);
  display: flex;
  justify-content: flex-start;
}
.cb-process--align-center .cb-process__cta {
  justify-content: center;
}
.cb-process__cta a {
  background-color: var(--wp--preset--color--primary, var(--cb-primary, #00486A));
  color: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cb-process__cta a:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ── Tablet (≤1023px) ──────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .cb-process__step {
    grid-template-columns: 72px 1fr;
    gap: 24px;
  }
  .cb-process__step-number {
    font-size: 56px;
  }
  /* Two-col tasks still side-by-side at tablet */
}

/* ── Mobile (≤640px) ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cb-process {
    padding-inline: 20px;
  }
  /* Number stacks ABOVE body — vertical card pattern that the vertical's
   * mobile views all collapse to. */
  .cb-process__step {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0;
  }
  .cb-process__step-marker {
    margin-bottom: -4px;
  }
  .cb-process__step-number {
    font-size: 48px;
  }
  .cb-process__step-title {
    font-size: 22px;
  }
  /* Two-col tasks collapse to single column on mobile */
  .cb-process__step-cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* Connector line on mobile would be ugly diagonal — disable. */
  .cb-process--connector .cb-process__step:not(:last-child) .cb-process__step-marker::after {
    display: none;
  }
}

/* ── CTA section uplift ─────────────────────────────────────────────────────── */
/* Same admin-wins guard as the .cb-cta-accent rule above: when the admin
 * has picked a bg via the Gutenberg color panel, `.has-background` is set
 * and we step out of the way. */
.cb-cta-section:not(.cb-cta-accent):not(.has-background) {
  background: var(--wp--preset--color--surface, var(--cb-surface));
}

/* ── Logo strip uplift ──────────────────────────────────────────────────────── */
.cb-logo-strip {
  background: var(--cb-bg);
}

/* ── Footer — upgraded ──────────────────────────────────────────────────────── */
.site-footer {
  background: var(--cb-primary);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Global link hover in blocks ────────────────────────────────────────────── */
.cb-rich-text-body a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}

/* ── Refined heading styles ─────────────────────────────────────────────────── */
.text-section-heading,
h2.text-4xl {
  letter-spacing: -0.025em;
}

/* ── Reduce motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cb-feature-card,
  .cb-split-image,
  .cb-split-image-wrap:hover .cb-split-image {
    transition: none;
    transform: none;
  }
  .cb-feature-card:hover {
    transform: none;
  }
  .cb-hero-panel .cb-hero-bar {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORE TRYKKFLATER — Block-level hit areas
   ═══════════════════════════════════════════════════════════════════════════

   Pattern: cb-has-link = the containing block
            cb-stretched-link = an <a> stretched via ::after to cover the parent
            cb-link-above = explicit child links/buttons that sit above the stretch

   The ::after of cb-stretched-link fills the nearest position:relative ancestor.
   Everything else gets z-index:1 so it stays clickable and selectable.
   ─────────────────────────────────────────────────────────────────────────── */

/* Parent must be positioned */
.cb-has-link {
  position: relative;
  isolation: isolate;
}

/* The invisible stretched anchor — sits ABOVE content so any click on the
   card is routed to the link. Text selection on cards is a deliberate
   tradeoff (Bootstrap stretched-link convention). Explicit inner controls
   opt back on top via .cb-link-above. */
.cb-stretched-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  font-size: 0;
  color: transparent;
  text-decoration: none;
  outline: none !important;
  border: none !important;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.cb-stretched-link:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Visible cursor affordance */
.cb-has-link {
  cursor: pointer;
}

/* Non-link content stays in normal flow beneath the stretched link.
   IMPORTANT: position:relative ONLY, never a z-index — otherwise the
   wrapper forms its own stacking context and any nested .cb-link-above
   button (e.g. the call-card's "Ring" + "Send e-post" CTAs three levels
   deep) gets trapped below the stretched-link's z:2 even with its own
   z:3. With no z-index here, the inner buttons resolve their z:3
   against the .cb-has-link stacking context where they win. */
.cb-has-link > *:not(.cb-stretched-link):not(.cb-link-above) {
  position: relative;
}

/* Explicit child links/buttons float above the stretched link */
.cb-link-above {
  position: relative;
  z-index: 3;
}

/* ── Feature card hover highlight ────────────────────────────────────────── */
.cb-feature-card.cb-has-link:hover,
.cb-feature-card:has(.cb-stretched-link:hover) {
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-4px);
  border-color: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.3) !important;
}

.cb-feature-card.cb-has-link:hover::after,
.cb-feature-card:has(.cb-stretched-link:hover)::after {
  opacity: 1;
}

/* ── Split section hover highlight ──────────────────────────────────────── */
.cb-block-split .cb-has-link {
  transition: background 0.3s ease;
  border-radius: 1.5rem;
  padding: 2rem;
}

.cb-block-split .cb-has-link:hover,
.cb-block-split .max-w-site:has(.cb-stretched-link:hover) {
  background: color-mix(in srgb, var(--wp--preset--color--primary, #00486A) 4%, transparent);
}

.cb-block-split .cb-has-link:hover .cb-split-image {
  box-shadow:
    0 32px 72px -12px rgba(0, 0, 0, 0.3),
    0 0 0 1px color-mix(in srgb, var(--wp--preset--color--secondary, #0084AF) 20%, transparent);
  transform: scale(1.015);
}

/* Text and button colors are theme-set — do not override on hover */

/* ── CTA button color protection ────────────────────────────────────────────
   WordPress global styles set:
     a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--primary) }
   This overrides Tailwind's .text-white on <a> tags. We counter with explicit
   high-specificity selectors for every CTA button class. */

/* Default CTA button colors — only apply when the admin hasn't picked
 * an explicit colour via the block's color palette.
 *
 * The block's render template emits an inline `style="background-color:X;
 * color:Y;"` when the admin picked a palette value (and always emits a
 * contrast-safe text colour via cb_best_contrast_text on the server).
 * These class-based defaults used to force accent/white with !important,
 * which clobbered the admin's pick — flagged 2026-04-24 on the frontpage
 * hero where the admin picked navy + white and got rendered orange +
 * white. `:not([style*="background-color"])` / `:not([style*="color"])`
 * lets inline styles win. */
a.cb-link-above.bg-primary:not([style*="color"]),
a.cb-cta-btn.bg-accent:not([style*="color"]),
a.cb-cta-btn.bg-white:not([style*="color"]),
.cb-hero a[class*="bg-accent"]:not([style*="color"]) {
  color: #fff !important;
}
a.cb-link-above.bg-primary:not([style*="background-color"]) {
  background-color: var(--wp--preset--color--primary, #00486A) !important;
}
a.cb-cta-btn.bg-accent:not([style*="background-color"]) {
  background-color: var(--wp--preset--color--accent, #F5833C) !important;
}
a.cb-cta-btn.bg-white:not([style*="background-color"]) {
  background-color: #fff !important;
}
a.cb-cta-btn.bg-white:not([style*="color"]) {
  color: var(--wp--preset--color--primary, #00486A) !important;
}

/* Removed 2026-04-24: the A11Y "safety net" that forced every inline-
 * styled CTA button to navy + white regardless of the admin's pick.
 * The server-side cb_best_contrast_text helper already guarantees a
 * WCAG-AA text colour on whatever bg the admin chose — keeping the
 * admin's pick instead of silently replacing it with navy. */

/* Outlined CTA buttons: primary text, transparent bg */
a.cb-link-above.border-primary,
a.cb-cta-btn-secondary.border-primary {
  color: var(--wp--preset--color--primary, #00486A) !important;
  background: transparent !important;
}
a.cb-link-above.border-primary:hover,
a.cb-cta-btn-secondary.border-primary:hover {
  background-color: var(--wp--preset--color--primary, #00486A) !important;
  color: #fff !important;
}

/* Accent-bg CTA: white outline + text */
a.cb-cta-btn-secondary.border-white\/40,
.cb-cta-accent a.cb-cta-btn-secondary {
  color: #fff !important;
  background: transparent !important;
}

/* Employee contact links — prevent WP global link color override.
   A11Y: teal on #f0f8ff = 3.97:1 FAIL. Navy = 8.4:1 PASS. */
.cb-employee-card a.cb-employee-link {
  color: var(--wp--preset--color--primary, #00486A) !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.cb-employee-card a.cb-employee-link:hover {
  color: var(--wp--preset--color--accent, #F5833C) !important;
}
/* Contact-row icons — sized to read as tap targets next to the label
 * without overpowering the row text. The SVGs ship at 24 in markup;
 * this normalises all three (mail, phone, LinkedIn) to the same size. */
.cb-employee-card .cb-employee-link svg {
  width: 28px;
  height: 28px;
  flex: none;
}

/* Focus-visible ring on the parent container (keyboard nav) */
.cb-has-link:has(.cb-stretched-link:focus-visible) {
  outline: 2px solid var(--wp--preset--color--secondary, #0084AF) !important;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cb-feature-card.cb-has-link:hover,
  .cb-feature-card:has(.cb-stretched-link:hover) {
    transform: none;
  }
  .cb-block-split .cb-has-link:hover .cb-split-image {
    transform: none;
  }
}

/* ── Employee modal ─────────────────────────────────────────────────────── */
.cb-employee-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cb-employee-modal.is-open {
  pointer-events: auto;
  opacity: 1;
}
.cb-employee-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}
.cb-employee-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 32px 80px -12px rgba(0, 0, 0, 0.35);
  max-width: 720px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.25s ease;
}
.cb-employee-modal.is-open .cb-employee-modal__panel {
  transform: translateY(0) scale(1);
}
.cb-employee-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--wp--preset--color--primary, #00486A);
  transition: background 0.15s ease;
}
.cb-employee-modal__close:hover {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
.cb-employee-modal__body {
  padding: 0;
}
.cb-employee-modal__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 24px 32px;
}
.cb-employee-modal__photo {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
  display: block;
  flex-shrink: 0;
}
.cb-employee-modal__initials {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--wp--preset--color--accent, #F5833C);
  background: var(--wp--preset--color--surface, #f8fafc);
  flex-shrink: 0;
}
.cb-employee-modal__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  min-width: 0;
  flex: 1;
}
.cb-employee-modal__name {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--wp--preset--color--primary, #00486A);
  margin: 0;
  line-height: 1.25;
}
.cb-employee-modal__occupation {
  font-size: 1rem;
  color: var(--wp--preset--color--secondary, #0084AF);
  margin: 0;
}
.cb-employee-modal__bio {
  padding: 24px 32px 0;
}
.cb-employee-modal__bio p {
  font-size: 1.125rem;
  line-height: 1.65;
  color: #334155;
  margin: 0;
}
.cb-employee-modal__contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 32px 32px;
  border-top: 1px solid var(--wp--preset--color--muted, #e2e8f0);
  margin-top: 24px;
}
.cb-employee-modal__contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--wp--preset--color--primary, #00486A);
  text-decoration: none;
  transition: color 0.15s ease;
}
.cb-employee-modal__contact-link:hover {
  color: var(--wp--preset--color--accent, #F5833C);
}
.cb-employee-modal__contact-link svg {
  flex-shrink: 0;
  opacity: 0.6;
}

/* Mobile: tighten padding + shrink stamp + reserve space for the close
 * button so the heading doesn't run under it. */
@media (max-width: 480px) {
  .cb-employee-modal__header {
    padding: 20px 20px 20px 20px;
    /* Reserve a column on the right for the absolute-positioned close
     * button (40px wide + 16px gutter = 56px). */
    padding-right: 64px;
    gap: 16px;
  }
  .cb-employee-modal__photo,
  .cb-employee-modal__initials {
    width: 110px;
    height: 110px;
  }
  .cb-employee-modal__initials {
    font-size: 2rem;
  }
  .cb-employee-modal__bio,
  .cb-employee-modal__contacts {
    padding-left: 20px;
    padding-right: 20px;
  }
  /* Pin the close button into its reserved column. */
  .cb-employee-modal__close {
    top: 12px;
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cb-employee-modal,
  .cb-employee-modal__panel {
    transition: none;
  }
}

/* ── Testimonial quote typography ────────────────────────────────────────── */

/* Remove any stray quotes the editor might have saved previously */
.cb-quote-text {
  font-style: italic;
  font-weight: 400;
}

/* Curly opening quote — decorative, before the text */
.cb-quote-text::before {
  content: '\201C'; /* " */
  font-style: normal;
  font-weight: 700;
  margin-right: 0.05em;
}

/* Curly closing quote — after the text, inline */
.cb-quote-text::after {
  content: '\201D'; /* " */
  font-style: normal;
  font-weight: 700;
  margin-left: 0.05em;
}

/* Hide any trailing <br> that lands just before ::after
   (a <br> as the last child of <p> creates an empty line before the closing quote) */
.cb-quote-text br:last-child {
  display: none;
}

/* ── CTA button hover — underline only, no color blend ───────────────────────
   Uniform across all CTAs: background + text color stay exactly as configured;
   the only hover affordance is an underlined label. Keeps contrast pristine
   and the user's chosen palette visually stable. */
.cb-cta-btn,
.cb-cta-btn-secondary,
.cb-block-split .cb-has-link a.cb-link-above {
  text-decoration: none;
  transition: text-decoration-color 0.15s ease;
}
.cb-cta-btn:hover,
.cb-cta-btn-secondary:hover,
.cb-block-split .cb-has-link a.cb-link-above:hover {
  opacity: 1 !important;               /* neutralize any Tailwind hover:opacity-* */
  background: inherit;                 /* neutralize any Tailwind hover:bg-* */
  color: inherit;                      /* neutralize any Tailwind hover:text-* */
  border-color: inherit;               /* outlined variants stay on their color */
  filter: none;
  /* !important on text-decoration: `no-underline` Tailwind class is on the
   * anchor and keeps winning the cascade on some templates. */
  text-decoration: underline !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
}

/* ── Standalone Video Section ───────────────────────────────────────────────── */
.cb-block-video {
  background: var(--wp--preset--color--primary, var(--cb-primary));
  position: relative;
}

.cb-block-video::before {
  content: '';
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.08) 70%, transparent);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* Portrait / tall video — centred, never taller than the viewport */
.cb-video-portrait-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.cb-video-portrait {
  display: block;
  aspect-ratio: 9 / 16;
  width: auto;
  max-width: min(400px, 100%);
  max-height: 85vh;
  border-radius: 1.25rem;
  box-shadow:
    0 32px 80px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  background: #000;
}

/* Landscape video — full-width capped at 960 px */
.cb-video-landscape-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

.cb-video-landscape {
  display: block;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  box-shadow:
    0 24px 64px -12px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  background: #000;
}

.cb-video-caption {
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  max-width: 40ch;
}

.cb-video-placeholder {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 9 / 16;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 16px;
}

/* ── WordPress core video block overrides ───────────────────────────────────── */
/*
 * The default wp-block-video renders at the video's intrinsic size and can
 * easily be enormous. Constrain it to a sensible size on all devices.
 */
/* WordPress core video block with premium styling */
.wp-block-video {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--cb-dark-bg);
  border-radius: 0.75rem;
}

.wp-block-video video {
  display: block;
  width: 100%;
  max-height: 70vh;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow:
    0 32px 72px -12px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  background: #000;
  position: relative;
}

/* Optional: thin accent-coloured top border (camera shutter chrome strip) */
.wp-block-video video::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--wp--preset--color--accent, var(--cb-accent));
  border-radius: 0.75rem 0.75rem 0 0;
  z-index: 2;
}

/* Caption styling */
.wp-block-video figcaption {
  color: var(--wp--preset--color--secondary, #64748b);
  font-size: 14px;
  text-align: center;
  font-style: italic;
  margin-top: 1rem;
  padding: 0 1rem;
}

/* Portrait / tall videos placed via the core video block */
@media (max-width: 639px) {
  .wp-block-video {
    padding: clamp(1rem, 3vw, 1.5rem);
  }

  .wp-block-video video {
    max-height: 65vh;
  }
}

/* When the core video block is set to align:center, give it a sensible max-width */
.wp-block-video.aligncenter video,
.wp-block-video.alignnone video {
  max-width: 960px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   EDITOR OVERRIDES — ensure RichText is always interactive in Gutenberg
   ══════════════════════════════════════════════════════════════════════════════ */

/*
 * .editor-styles-wrapper is the Gutenberg editor canvas (including iframed).
 * These rules guarantee that inline-editable fields receive focus on click.
 */

/* RichText contentEditable divs must always capture pointer events */
.editor-styles-wrapper [contenteditable="true"] {
  pointer-events: auto !important;
  cursor: text;
}

/* Decorative overlays must never block editing in the editor */
.editor-styles-wrapper [aria-hidden="true"]:not([contenteditable]) {
  pointer-events: none;
}

/* CTA button wrappers — let clicks through to the RichText inside */
.editor-styles-wrapper .cta-button-text {
  pointer-events: auto;
  cursor: text;
  min-width: 2em;
  min-height: 1em;
}

/* Hero background img + overlay must never steal focus from text */
.editor-styles-wrapper .wp-block-styrk-blocks-hero img {
  pointer-events: none !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}
.editor-styles-wrapper .wp-block-styrk-blocks-hero [aria-hidden="true"] {
  pointer-events: none !important;
}

/* Editor: draggable item hover highlight — gives the user a clear target
 * indicator when hovering over an individual card/item inside a parent
 * block. Inline drag-state outlines set by useDragSort take precedence via
 * the cascade (inline style beats stylesheet). */
.editor-styles-wrapper [data-drag-index]:hover {
  outline:        2px solid var(--wp--preset--color--primary, #00486A);
  outline-offset: 3px;
  border-radius:  inherit;
}
.editor-styles-wrapper [data-drag-handle]:hover {
  background: #fff !important;
  color:      var(--wp--preset--color--primary, #00486A) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Page Header — "Atelier" direction.
   Editorial inversion of the homepage hero: light surface ground, Fraunces
   serif title at display scale, teal hairline, orange breadcrumb glyphs,
   generous whitespace. Signals "you entered the reading room" when scrolled
   in from the frontpage's dark marketing hero.
   Red thread with homepage: same palette tokens, same Inter for body copy,
   navy remains the body text colour.
   ══════════════════════════════════════════════════════════════════════════ */

/* Fraunces variable (display serif) — loaded server-side via wp_enqueue_style
   so the font is only fetched on pages that actually render this block. */

.cb-page-header {
  position:       relative;
  width:          100%;
  box-sizing:     border-box;
  background:     var(--cb-surface, #fafaf8);
  color:          var(--cb-primary, #00486A);
  padding:        calc(100px + 112px) 64px 160px;
  margin:         0;
  overflow:       hidden;
}

/* Soft decorative hairline at the very top, flush under the site nav.
   Teal, full-bleed, 1px — reads as editorial pagination. */
.cb-page-header::before {
  content:    '';
  position:   absolute;
  top:        100px; /* aligns with site-header bottom edge */
  left:       0;
  right:      0;
  height:     1px;
  background: rgba(0, 132, 175, 0.25); /* teal @ 25% */
}

.cb-page-header__inner {
  max-width:      1200px;
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  gap:            0;
}

/* Breadcrumb — true orange glyphs, Inter small caps feel via tracking. */
.cb-page-header__breadcrumb {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  gap:            12px;
  font-family:    var(--wp--preset--font-family--base, 'Inter', system-ui, sans-serif);
  font-size:      14px;
  font-weight:    500;
  letter-spacing: 0.02em;
  line-height:    1.4;
  color:          rgba(0, 72, 106, 0.6); /* navy @ 60 */
  margin:         0 0 64px;
}

.cb-page-header__crumb-link {
  color:           inherit;
  text-decoration: none;
  transition:      color 0.15s ease;
}

.cb-page-header__crumb-link:hover,
.cb-page-header__crumb-link:focus-visible {
  color:                  var(--cb-primary, #00486A);
  text-decoration:        underline;
  text-decoration-color:  var(--wp--preset--color--secondary, #0084AF);
  text-decoration-thickness: 1px;
  text-underline-offset:  4px;
}

.cb-page-header__crumb-sep {
  color:       var(--cb-accent, #F5833C);
  font-size:   14px;
  line-height: 1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.cb-page-header__crumb-current {
  color:       var(--cb-primary, #00486A);
  font-weight: 600;
}

/* Optional eyebrow — small, uppercase, teal (not orange). Sits above title. */
.cb-page-header__eyebrow {
  display:        inline-block;
  font-family:    var(--wp--preset--font-family--base, 'Inter', system-ui, sans-serif);
  font-size:      13px;
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--cb-secondary, #0084AF);
  margin:         0 0 24px;
}

/* Title — Fraunces display serif at editorial scale. The signature move. */
.cb-page-header__title {
  font-family:    'Fraunces', Georgia, 'Times New Roman', serif;
  font-size:      104px;
  font-weight:    400; /* serifs carry weight via contrast, not heaviness */
  font-variation-settings: 'opsz' 144, 'SOFT' 30; /* display optical size, softened terminals */
  line-height:    1.02;
  letter-spacing: -0.02em;
  color:          var(--cb-primary, #00486A);
  margin:         0;
  max-width:      14ch;
}

/* Teal hairline — swaps in for the former orange accent bar. Thinner + wider
   + a different hue so it reads as a deliberate editorial rule, not a badge. */
.cb-page-header__rule {
  display:       block;
  width:         96px;
  height:        2px;
  background:    var(--cb-secondary, #0084AF);
  border:        0;
  margin:        40px 0 0;
}

/* Subtitle — Inter, navy-80, narrow measure. */
.cb-page-header__subtitle {
  font-family: var(--wp--preset--font-family--base, 'Inter', system-ui, sans-serif);
  font-size:   20px;
  font-weight: 400;
  line-height: 1.55;
  color:       rgba(0, 72, 106, 0.82);
  margin:      32px 0 0;
  max-width:   52ch;
}

/* ── Header contrast override — REMOVED 2026-04-24 ──────────────────────────
   This rule used to force navy text + a navy-filtered logo inside the
   site header whenever a page-header block was present, based on the
   older assumption that the header was transparent-over-light-band in
   that mode. Since PR #32 the react-header renders solid Logofarge navy
   on every non-frontpage surface with cb_best_contrast_text choosing
   contrast-safe text server-side — forcing navy ON TOP of navy produced
   an invisible logo + invisible nav on every /tjenester/… sub-page that
   carries a page-header block (flagged on /bokforing/, 2026-04-24).
   The header now picks its own colour correctly; no override needed.
   `body.has-page-header` is still set by view.ts so future styling has
   a hook, but no styles currently target it. */

/* Responsive — tablet (≤1024px). */
@media (max-width: 1024px) {
  .cb-page-header {
    padding: calc(100px + 80px) 40px 112px;
  }
  .cb-page-header__title {
    font-size: 72px;
    max-width: 13ch;
  }
  .cb-page-header__breadcrumb { margin-bottom: 48px; }
  .cb-page-header__rule      { margin-top: 32px; }
  .cb-page-header__subtitle  { font-size: 18px; margin-top: 24px; }
}

/* Responsive — mobile (≤640px). */
@media (max-width: 640px) {
  .cb-page-header {
    padding: calc(100px + 48px) 24px 72px;
  }
  .cb-page-header::before {
    top: 100px;
  }
  .cb-page-header__breadcrumb {
    font-size:     13px;
    gap:           8px;
    margin-bottom: 36px;
  }
  .cb-page-header__eyebrow { font-size: 12px; margin-bottom: 16px; }
  .cb-page-header__title {
    font-size: 44px;
    max-width: none;
  }
  .cb-page-header__rule      { width: 72px; margin-top: 24px; }
  .cb-page-header__subtitle  { font-size: 16px; margin-top: 20px; }
}

/* Editor preview — match frontend. The band renders inside the Gutenberg
   iframe and must look identical to the live render, including the serif. */
.editor-styles-wrapper .cb-page-header {
  background: var(--cb-surface, #fafaf8);
  color:      var(--cb-primary, #00486A);
}

.editor-styles-wrapper .cb-page-header__title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  color:       var(--cb-primary, #00486A);
}

.editor-styles-wrapper .cb-page-header__title [data-rich-text-placeholder],
.editor-styles-wrapper .cb-page-header__subtitle [data-rich-text-placeholder],
.editor-styles-wrapper .cb-page-header__eyebrow [data-rich-text-placeholder] {
  color: rgba(0, 72, 106, 0.4) !important;
  opacity: 1 !important;
}

/* ── Single-project hero (rendered by [project_hero] shortcode) ───────── */
.cb-project-hero {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 65vh, 680px);
  background-size: cover;
  background-position: center;
  background-color: var(--wp--preset--color--primary, #0f1b2d);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.cb-project-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 27, 45, 0) 30%, rgba(15, 27, 45, 0.65) 75%, rgba(15, 27, 45, 0.85) 100%);
}
.cb-project-hero__inner {
  position: relative;
  width: 100%;
  /* Match the standard `styrk-blocks/hero` block's container exactly —
   * `max-w-site (1440px) + mx-auto + px-6 (24px)`. box-sizing: border-box
   * is required so the 1440 max-width includes the 24px padding (matching
   * the header's own container) — without it the hero h1 ended up 24px
   * to the LEFT of the site logo on wide viewports. */
  box-sizing: border-box;
  max-width: 1440px;
  margin-inline: auto;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: clamp(64px, 10vw, 140px);
  padding-bottom: clamp(56px, 8vw, 100px);
  color: #fff;
}
.cb-project-hero__title { max-width: 22ch; }
.cb-project-hero__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 16px;
}
.cb-project-hero__title {
  font-family: var(--wp--preset--font-family--display, serif);
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  color: #fff;
  max-width: 18ch;
}

/* ── Single-project meta bar (rendered by [project_meta] shortcode) ──────
 * Clean horizontal data strip — one bottom hairline only (no top border,
 * no per-cell vertical dividers) so it reads as a refined caption row
 * rather than a boxed table. Generous cell padding-bottom + tighter
 * label/value rhythm. */
.cb-project-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding: 0 0 24px;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(15, 27, 45, 0.10);
}
.cb-project-meta__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border-right: 0;
}
.cb-project-meta__row:last-child { padding-right: 0; }
.cb-project-meta dt {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--wp--preset--color--secondary, #1E5BD8);
  margin: 0;
}
.cb-project-meta dd {
  font-size: 18px;
  font-weight: 600;
  color: var(--wp--preset--color--primary, #0f1b2d);
  margin: 0;
  letter-spacing: -0.005em;
}
@media (max-width: 720px) {
  .cb-project-meta { grid-template-columns: repeat(2, 1fr); }
  .cb-project-meta__row { padding: 16px 16px 16px 0; }
  .cb-project-meta__row:nth-child(2n) { border-right: 0; padding-right: 0; }
}

/* Single-project body wrapper — horizontal gutter is fixed at 24px to
 * line up with the header logo on every viewport (the logo always sits
 * at x=24 regardless of width). Generous vertical block padding plus an
 * explicit flex gap between children gives meta / description / any
 * following block its own breathing room — without the gap, the meta
 * row touched the description and the description touched the next
 * section's heading. */
/* (Legacy `.cb-project-meta-band` styles removed — the single-project
 * template now drops breadcrumbs and the project-meta block straight into
 * the white body section, with no dark wrapper between hero and body.) */

/* Body section sits below the hero with a moderate top breathing zone for
 * the breadcrumb trail, then generous bottom padding so the section
 * closes cleanly before the footer. Specificity has to beat the global
 * `.wp-site-blocks > main:not(.cb-page-main) > *` zero-padding reset. */
.wp-site-blocks > main:not(.cb-page-main) > .cb-project-body {
  padding-top: clamp(28px, 3vw, 48px) !important;
  padding-bottom: clamp(96px, 12vw, 160px) !important;
}
.cb-project-body__inner {
  /* border-box so the 1440px max INCLUDES the 24px gutter, matching
   * `.cb-project-hero__inner`'s computation. Without it, body content
   * lands 24px to the LEFT of the hero h1 (the inner ends up 1488px wide
   * and centres differently from the hero's 1440px-wide inner). */
  box-sizing: border-box;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 24px;
  display: flex;
  flex-direction: column;
}
/* Per-child rhythm: breadcrumbs sit at the top of the body, project-meta
 * tucks tightly under them, then the post content gets a clear visual
 * break before the gallery / paragraph. Using adjacent-sibling margins
 * (instead of a flex gap) lets each transition have its own size. */
.cb-project-body__inner > .cb-breadcrumbs {
  margin: 0;
}
.cb-project-body__inner > .cb-project-meta {
  margin-top: clamp(16px, 1.5vw, 24px);
}
.cb-project-body__inner > .wp-block-post-content {
  margin-top: clamp(40px, 5vw, 64px);
}
/* Override the global `.wp-site-blocks .wp-block-post-content > p` rule
 * which centres post copy at a 720px reading column. Inside the project
 * body we want the description to align UNDER the meta row at the same
 * left edge — keep the 720px reading max for legibility but left-align
 * and drop the inherited 24px horizontal padding (the wrapper already
 * supplies the page gutter via .cb-project-body__inner). */
/* Specificity prefix `.wp-site-blocks` is required to beat the parent
 * styrk-theme's `.wp-site-blocks .wp-block-post-content > p` rule, which
 * loads later in the cascade and centres post copy at 720px. */
.wp-site-blocks .cb-project-body .wp-block-post-content > p,
.wp-site-blocks .cb-project-body .wp-block-post-content > h1,
.wp-site-blocks .cb-project-body .wp-block-post-content > h2,
.wp-site-blocks .cb-project-body .wp-block-post-content > h3,
.wp-site-blocks .cb-project-body .wp-block-post-content > h4,
.wp-site-blocks .cb-project-body .wp-block-post-content > h5,
.wp-site-blocks .cb-project-body .wp-block-post-content > h6,
.wp-site-blocks .cb-project-body .wp-block-post-content > ul,
.wp-site-blocks .cb-project-body .wp-block-post-content > ol {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ── Single-project post body typography ───────────────────────────────── */
.cb-project-body .wp-block-post-content {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(15, 27, 45, 0.82);
}
.cb-project-body .wp-block-post-content > * + * { margin-top: 1.2em; }
.cb-project-body .wp-block-post-content > p:first-child {
  font-size: 20px;
  line-height: 1.55;
  color: var(--wp--preset--color--primary, #0f1b2d);
  font-weight: 500;
  margin-bottom: 1.4em;
}
.cb-project-body .wp-block-post-content h2,
.cb-project-body .wp-block-post-content h3 {
  font-family: var(--wp--preset--font-family--display, serif);
  color: var(--wp--preset--color--primary, #0f1b2d);
  letter-spacing: -0.01em;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}
.cb-project-body .wp-block-post-content h2 { font-size: 28px; line-height: 1.2; }
.cb-project-body .wp-block-post-content h3 { font-size: 22px; line-height: 1.3; }
.cb-project-body .wp-block-post-content img,
.cb-project-body .wp-block-post-content .wp-block-image {
  border-radius: 12px;
  overflow: hidden;
}
.cb-project-body .wp-block-post-content figure { margin: 2em 0; }
.cb-project-body .wp-block-post-content blockquote {
  border-left: 3px solid var(--wp--preset--color--accent, #F5833C);
  padding: 8px 0 8px 24px;
  margin: 1.6em 0;
  font-family: var(--wp--preset--font-family--display, serif);
  font-size: 22px;
  line-height: 1.4;
  color: var(--wp--preset--color--primary, #0f1b2d);
}

/* ── Back-to-archive section ──────────────────────────────────────────────
 * Full-width band sitting after the testimonials. The inner container
 * matches the body / hero gutter so the button anchors at the same left
 * edge as everything above it instead of floating in a narrow centred
 * column. Button itself is a filled primary CTA — readable as a real
 * action, not a tertiary text link. */
.cb-project-back-wrap {
  background: var(--wp--preset--color--surface, #f4f5f7);
}
/* Same specificity-prefix dance as .cb-project-body above — needed so the
 * back-button section's vertical padding survives the global wrapper-spacing
 * reset that zero-pads every direct child of <main>. */
.wp-site-blocks > main:not(.cb-page-main) > .cb-project-back-wrap {
  padding-block: clamp(80px, 10vw, 128px) !important;
}
.cb-project-back-wrap__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 24px;
}
.cb-project-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--wp--preset--color--primary, #0f1b2d);
  color: #fff;
  border: 1.5px solid var(--wp--preset--color--primary, #0f1b2d);
  border-radius: 999px;
  font-family: var(--wp--preset--font-family--base, sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, gap 0.2s ease, transform 0.2s ease;
}
.cb-project-back:hover,
.cb-project-back:focus-visible {
  background: var(--wp--preset--color--primary, #0f1b2d);
  color: #fff;
  gap: 14px;
  transform: translateX(-2px);
}
.cb-project-back svg { transition: transform 0.2s ease; flex: 0 0 auto; }
.cb-project-back:hover svg { transform: translateX(-2px); }

/* ── Featured-projects card ────────────────────────────────────────────── */
.cb-project-card { transition: transform .2s ease, box-shadow .2s ease; }
.cb-project-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.cb-project-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--wp--preset--color--accent, #1E5BD8);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 1;
}
.cb-project-card__meta { color: var(--wp--preset--color--secondary, #475569); }

/* ── Testimonials card ─────────────────────────────────────────────────── */
.cb-testimonial-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  /* Right padding bumped so the long-form quote text never runs under the
   * decorative ::before quote glyph in the top-right corner. The glyph
   * occupies ~64px of horizontal space — 96px keeps a comfortable gap. */
  padding: 32px 96px 28px 32px;
  border: 1px solid rgba(15, 27, 45, 0.10);
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cb-testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 27, 45, 0.10);
  border-color: rgba(15, 27, 45, 0.16);
}
.cb-testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 12px;
  right: 28px;
  font-family: Georgia, serif;
  font-size: 96px;
  line-height: 1;
  color: var(--wp--preset--color--accent, #F5833C);
  opacity: 0.18;
  pointer-events: none;
}
.cb-testimonial-card__rating {
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--wp--preset--color--accent, #F5833C);
  margin: 0;
}
.cb-testimonial-card blockquote {
  font-family: var(--wp--preset--font-family--display, serif);
  font-style: normal;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.55;
  color: var(--wp--preset--color--primary, #0f1b2d);
  margin: 0;
  padding: 0;
  border: 0;
  position: relative;
}
.cb-testimonial-card__attr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(15, 27, 45, 0.08);
}
.cb-testimonial-card__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 27, 45, 0.08);
}
.cb-testimonial-card__attr-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cb-testimonial-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--wp--preset--color--primary, #0f1b2d);
  line-height: 1.3;
}
.cb-testimonial-card__role {
  font-size: 13px;
  color: rgba(15, 27, 45, 0.6);
  line-height: 1.3;
}

/* ── Featured-projects + testimonials shared section header ─────────────
   `text-align` USED to be hardcoded to center, but the FP block now lets
   editors pick left / centre / right via the headingAlign attr. The block
   template emits `text-left|text-center|text-right` on this element —
   AND we use the same class to align the 720px-capped box itself within
   the section so a "left" choice pushes the header to the section's left
   edge (matching the project cards below it), not just left-aligns the
   text inside a centred box. */
.cb-featured-projects__header,
.cb-testimonials__header {
  max-width: 720px;
  margin-bottom: clamp(24px, 4vw, 48px);
}
.cb-featured-projects__header.text-left {
  margin-left:  0;
  margin-right: auto;
}
.cb-featured-projects__header.text-center {
  margin-left:  auto;
  margin-right: auto;
}
.cb-featured-projects__header.text-right {
  margin-left:  auto;
  margin-right: 0;
}
.cb-testimonials__header {
  text-align: center;
  margin-left:  auto;
  margin-right: auto;
}
.cb-featured-projects__heading,
.cb-testimonials__heading {
  margin: 0 0 12px;
  color: var(--wp--preset--color--primary, #00486A);
}
.cb-featured-projects__intro,
.cb-testimonials__intro {
  margin: 0;
  color: var(--wp--preset--color--secondary, #475569);
  font-size: 18px;
  line-height: 1.6;
}

/* ── Hero block — accent line (frontend) + in-canvas toggle (editor) ───────
 * Frontend: `.cb-hero__accent-rule` is the 64×3px amber bar rendered by
 * template.php when the admin enables `showAccentLine`. Skin tokens (exact
 * colour, brand weight) live in the companion theme — the plugin ships
 * sensible default proportions only.
 *
 * Editor: `.cb-hero__accent-toggle` is the click-target rendered by
 * edit.tsx in place of the rule. Off-state shows a dashed amber ghost with a
 * "+ accent line" label; on-state shows the solid bar that still flips off
 * on click. Matches the page-builder feel — affordances live on the block,
 * not in the right pane.
 *
 * Heads-up: width/height stay in sync between the two states (and with
 * `.cb-page-header__rule` in companion themes) so the editor preview matches
 * the rendered frontend without per-skin overrides. */
/* Plugin default mirrors `.cb-page-header__rule` (cross-client neutral —
 * teal/blue secondary, 96×2px). Companion themes tune dimensions + colour
 * (Styrk overrides to 64×3px amber to match its page-header treatment). */
.cb-hero__accent-rule {
  display: block;
  width: 96px;
  height: 2px;
  background: var(--cb-secondary, #0084AF);
  border: 0;
  margin: 24px 0 0;
}
.cb-hero__accent-toggle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: block;
  width: 64px;
  height: 24px;             /* taller hit target than the 3px rule */
  padding: 0;
  margin: 12px 0 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  position: relative;
  color: var(--wp--preset--color--accent, #f0a83c);
  transition: opacity 0.15s ease;
}
.cb-hero__accent-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: currentColor;
}
.cb-hero__accent-toggle--off::before {
  background: transparent;
  border-top: 2px dashed currentColor;
  opacity: 0.55;
  height: 0;
  margin-top: -1px;
}
.cb-hero__accent-toggle--off:hover::before,
.cb-hero__accent-toggle--off:focus-visible::before {
  opacity: 0.9;
}
.cb-hero__accent-toggle--on:hover::before,
.cb-hero__accent-toggle--on:focus-visible::before {
  opacity: 0.7;
}
.cb-hero__accent-toggle-label {
  position: absolute;
  top: -16px;
  left: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  white-space: nowrap;
}
.cb-hero__accent-toggle--off:hover .cb-hero__accent-toggle-label,
.cb-hero__accent-toggle--off:focus-visible .cb-hero__accent-toggle-label {
  opacity: 1;
}
.cb-hero__accent-toggle:focus-visible {
  outline: 2px solid var(--wp-admin-theme-color, #007cba);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ── Video Reels — editor-only in-canvas meta editing ─────────────────────
 * The `.meta-right` block on the frontend shows the count + label + subtext
 * the admin sets. In the editor we want admins to edit those strings
 * directly on the block (no right-pane round-trip), per the page-builder
 * preference. When `hideMeta` is true, a "+ meta" pill takes its place so
 * admins can bring the block back without touching the right pane. */
.styrk-reels-edit__meta {
  position: relative;
  padding-right: 28px; /* space for the × close-button */
}
.styrk-reels-edit__meta-count-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.styrk-reels-edit__meta-label {
  display: inline-block;
  min-width: 6ch;
}
.styrk-reels-edit__meta-label[data-rich-text-placeholder]:empty::before,
.styrk-reels-edit__meta-label[data-rich-text-placeholder]:not(:focus):empty::before {
  opacity: 0.55;
  font-style: italic;
}
.styrk-reels-edit__meta-subtext { margin-top: 4px; }
.styrk-reels-edit__meta-hide {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  top: -2px;
  right: 0;
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  color: currentColor;
  opacity: 0.45;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  border-radius: 3px;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.styrk-reels-edit__meta-hide:hover,
.styrk-reels-edit__meta-hide:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}
.styrk-reels-edit__meta-toggle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  align-self: end;
  padding: 6px 12px;
  border: 1px dashed currentColor;
  background: transparent;
  color: var(--wp--preset--color--accent, #f0a83c);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.styrk-reels-edit__meta-toggle:hover,
.styrk-reels-edit__meta-toggle:focus-visible { opacity: 1; }

/* Block-level BG / Tekst colour chips — editor-only. Sits as an
 * absolutely-positioned cluster at the top-right corner of the block so
 * admins can change colours without leaving the canvas. Mirrors the
 * per-card BG/Tekst chips on feature-cards. The Popover that opens from
 * here is portalled into the editor root and styled by core. */
.styrk-reels--edit { position: relative; }
.styrk-reels-edit__color-chips {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: inline-flex;
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}
.styrk-reels-edit__chip {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}
.styrk-reels-edit__chip:hover,
.styrk-reels-edit__chip:focus-visible {
  background: rgba(255, 255, 255, 0.18);
}
.styrk-reels-edit__chip-dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  background-clip: padding-box;
  flex-shrink: 0;
}
.hover\:text-accent:hover {
    color: var(--wp--preset--color--accent,    #F5833C);
}
.hover\:opacity-100:hover {
    opacity: 1;
}
.hover\:grayscale-0:hover {
    --tw-grayscale: grayscale(0);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.focus-visible\:outline:focus-visible {
    outline-style: solid;
}
.focus-visible\:outline-2:focus-visible {
    outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
}
.focus-visible\:outline-offset-4:focus-visible {
    outline-offset: 4px;
}
.focus-visible\:outline-secondary:focus-visible {
    outline-color: var(--wp--preset--color--secondary, #0084AF);
}
.focus-visible\:outline-white:focus-visible {
    outline-color: #fff;
}
.group[open] .group-open\:rotate-45 {
    --tw-rotate: 45deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@media (prefers-reduced-motion: reduce) {
    .motion-reduce\:transition-none {
        transition-property: none;
    }
}
@media (min-width: 640px) {
    .sm\:aspect-auto {
        aspect-ratio: auto;
    }
    .sm\:w-40 {
        width: 10rem;
    }
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:flex-row {
        flex-direction: row;
    }
    .sm\:items-stretch {
        align-items: stretch;
    }
    .sm\:gap-8 {
        gap: 2rem;
    }
    .sm\:p-8 {
        padding: 2rem;
    }
}
@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .lg\:w-1\/2 {
        width: 50%;
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:flex-row {
        flex-direction: row;
    }
    .lg\:flex-row-reverse {
        flex-direction: row-reverse;
    }
    .lg\:gap-16 {
        gap: 4rem;
    }
    .lg\:gap-8 {
        gap: 2rem;
    }
    .lg\:text-left {
        text-align: left;
    }
}
@media (min-width: 1280px) {
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}