/* Self-hosted fonts (SIL Open Font License; licences in ../assets/fonts). Only the weights the design uses. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-weight: 700;
  src: url(../assets/fonts/bricolage-grotesque-latin-700-normal.woff2)
    format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Inter;
  font-weight: 400;
  src: url(../assets/fonts/inter-latin-400-normal.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Inter;
  font-weight: 500;
  src: url(../assets/fonts/inter-latin-500-normal.woff2) format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Inter;
  font-weight: 600;
  src: url(../assets/fonts/inter-latin-600-normal.woff2) format("woff2");
  font-display: swap;
}

/* DESIGN TOKENS. Defaults only: site.js overwrites the colour tokens from the active theme
   and the layout tokens from settings.layout. Breakpoint-specific token values live in grid.css. */
:root {
  /* colour (default state) */
  --bg: #f2eee5;
  --alt: #ebe8e1;
  --ink: #1f392e;
  --muted: #5e6b62;
  --line: #dcd8cd;
  --strong: #6f7a70;
  --ph: #d4d5cd;
  --box: #f8f6f0;
  /* colour (hover state) */
  --hbg: #1f392e;
  --hink: #f2eee5;
  --hmuted: #c6cec3;
  /* layout */
  --card-h: 380px;
  --pad: 32px;
  --ad-h-mobile: 165px;
  --title: 30px;
  --art-h: 188px;
  --hdr-h: 56px;
  --ftr-h: 42px;
  /* type */
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --text: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* hover motion (written by hover-motion.js from data/hover.js) */
  --hv-dur: 560ms;
  --hv-art-dur: 644ms;
  --hv-ease: cubic-bezier(0.22, 0.72, 0.18, 1);
  --hv-stagger: 45ms;
  --hv-lift: -8;
  --hv-scale: 1.045;
  --hv-rot: -1.2;
  --hv-par: 7;
  --hv-title: -2;
  --hv-arrow: 7;
  --hv-dot: 0.35;
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* HEADER */
.hdr {
  height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--strong);
}
.logo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.045em;
  line-height: 1;
}
.nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav a {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 0 4px;
  border-bottom: 2px solid transparent;
  line-height: 1;
}
.nav a.on {
  border-bottom-color: var(--ink);
}

/* FOOTER */
.ftr {
  margin-top: auto;
  height: var(--ftr-h);
  border-top: 1px solid var(--strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  font-size: 10.5px;
  color: var(--ink);
}
.ftr nav {
  display: flex;
  gap: 18px;
}
.ftr nav a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

@media (max-width: 1023px) {
  .nav {
    gap: 22px;
  }
}
@media (max-width: 639px) {
  .logo {
    font-size: 20px;
  }
  .nav {
    gap: 16px;
  }
  .nav a {
    font-size: 10.5px;
    letter-spacing: 0.1em;
  }
  .hdr {
    padding: 0 16px;
  }
}

/* GRID + BREAKPOINTS. 1px lines come from the gap showing the line colour.
   desktop >= 1360 (4 cols) · laptop 1024-1359 (4 cols) · tablet 640-1023 (2 cols) · mobile < 640 (1 col)
   Breakpoint token values here are defaults; settings.layout can override card height/padding at runtime. */
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  flex: 0 0 auto;
  align-content: start;
  border-bottom: 1px solid var(--line);
}
.cell {
  background: var(--bg);
  position: relative;
  min-width: 0;
}
.cell.filler {
  min-height: var(--card-h);
}

@media (max-width: 1359px) {
  :root {
    --card-h: 360px;
    --pad: 28px;
    --title: 27px;
    --art-h: 166px;
  }
}
@media (max-width: 1023px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :root {
    --card-h: 364px;
    --pad: 16px;
    --title: 23px;
    --art-h: 182px;
    --hdr-h: 52px;
  }
}
@media (max-width: 639px) {
  .grid {
    grid-template-columns: 1fr;
  }
  :root {
    --card-h: 176px;
    --pad: 16px;
    --title: 26px;
    --hdr-h: 50px;
    --ftr-h: 44px;
  }
  .cell.filler {
    display: none;
  }
}

/* TOOL CARD (resting state). Hover motion lives in hover.css. */
.card {
  --c-ink: var(--ink);
  --c-muted: var(--muted);
  color: var(--c-ink);
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  height: var(--card-h);
  padding: var(--pad);
  padding-top: calc(var(--pad) - 2px);
  padding-bottom: calc(var(--pad) - 6px);
  overflow: hidden;
}
.card > .meta,
.card > .art,
.card > .foot {
  position: relative;
  z-index: 1;
}
.meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}
.num {
  color: var(--c-muted);
  font-weight: 500;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: inline-block;
}
.status.available i {
  background: currentColor;
}
.art {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 10px;
}
.art img {
  display: block;
  max-width: 92%;
  height: calc(var(--art-h) * var(--s, 1));
  width: auto;
  object-fit: contain;
}
.foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.foot h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--title);
  line-height: 0.94;
  letter-spacing: -0.052em;
}
.foot h3 span {
  display: block;
}
.foot p {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--c-muted);
  letter-spacing: -0.005em;
}
.arrow {
  flex: none;
  width: 20px;
  height: 20px;
  margin-bottom: 2px;
  color: currentColor;
}
.hide-desc .foot p {
  display: none;
}
a.card {
  cursor: pointer;
}

@media (max-width: 1023px) {
  .foot p {
    font-size: 11px;
  }
}
@media (max-width: 639px) {
  .card {
    position: relative;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 14px;
  }
  .card > .art {
    position: absolute;
    left: 42%;
    right: 0;
    top: 30px;
    bottom: 12px;
    padding: 0;
    pointer-events: none;
  }
  .art img {
    height: calc(116px * var(--s, 1));
    max-width: 84%;
  }
  .foot {
    margin-top: auto;
  }
  .foot h3 {
    font-size: var(--title);
  }
  .foot p,
  .arrow {
    display: none;
  }
  .num {
    position: absolute;
    left: 0;
  }
  .status {
    margin-left: auto;
  }
}

/* PREMIUM CARD HOVER. Everything is driven by custom properties so one rule set serves mouse hover,
   touch press (.is-active, set by hover-motion.js) and keyboard focus. Only transform + opacity + colour animate.
   State variable --w goes 0 → 1 on the one card that is hovered; nothing else on the grid changes.
   Tunables (data/hover.js): --hv-dur --hv-art-dur --hv-ease --hv-stagger --hv-lift --hv-scale --hv-rot --hv-par --hv-title --hv-arrow --hv-dot */

.card {
  --w: 0;
  --mx: 0;
  --my: 0;
  transition: color var(--hv-dur) var(--hv-ease);
}

/* 1 · hover background: a layer that fills the card (direction set by data-hv on the grid) */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--hbg);
  pointer-events: none;
  transition:
    transform var(--hv-dur) var(--hv-ease),
    opacity var(--hv-dur) var(--hv-ease);
  transform: scaleY(0);
  transform-origin: 50% 100%;
}
.hv-off .card::before {
  display: none;
}
[data-hv="wipe-up"] .card::before {
  transform: scaleY(var(--w));
  transform-origin: 50% 100%;
}
[data-hv="wipe-down"] .card::before {
  transform: scaleY(var(--w));
  transform-origin: 50% 0;
}
[data-hv="wipe-left"] .card::before {
  transform: scaleX(var(--w));
  transform-origin: 100% 50%;
}
[data-hv="wipe-right"] .card::before {
  transform: scaleX(var(--w));
  transform-origin: 0 50%;
}
[data-hv="fade"] .card::before {
  transform: none;
  opacity: var(--w);
}

/* 2 · text colours (the card text, numbers and descriptions all follow --c-ink / --c-muted) */
.num,
.foot p {
  transition: color var(--hv-dur) var(--hv-ease);
}

/* 3 · transitions for the moving parts. Transforms are set only in the active state (section 4) so the
   resting render stays pixel-identical to the approved layout (no compositing layers at rest). */
.art img {
  transition: transform var(--hv-art-dur) var(--hv-ease);
  transition-delay: calc(var(--hv-stagger) * 1.5);
}
.foot h3 {
  transition: transform var(--hv-dur) var(--hv-ease);
  transition-delay: var(--hv-stagger);
}
.arrow {
  transition: transform var(--hv-dur) var(--hv-ease);
  transition-delay: calc(var(--hv-stagger) * 1.5);
}
.status i {
  transition: transform var(--hv-dur) var(--hv-ease);
}

/* 4 · the active state: sets the variables, then the moving parts read them.
   Illustration: lift + scale + tilt + pointer-follow parallax (--mx/--my in -1…1, mouse only).
   Title nudge, arrow travel, status-dot growth. */
@media (hover: hover) {
  .hv-on .card:hover {
    --w: 1;
    --c-ink: var(--hink);
    --c-muted: var(--hmuted);
  }
  .hv-on .card:hover .art img {
    transform: translate3d(
        calc(var(--mx) * var(--hv-par) * 1px),
        calc(var(--my) * var(--hv-par) * 1px + var(--hv-lift) * 1px),
        0
      )
      scale(var(--hv-scale)) rotate(calc(var(--hv-rot) * 1deg));
  }
  .hv-on .card:hover .foot h3 {
    transform: translateY(calc(var(--hv-title) * 1px));
  }
  .hv-on .card:hover .arrow {
    transform: translateX(calc(var(--hv-arrow) * 1px));
  }
  .hv-on .card:hover .status i {
    transform: scale(calc(1 + var(--hv-dot)));
  }
}
.hv-on .card.is-active,
.hv-on a.card:focus-visible {
  --w: 1;
  --c-ink: var(--hink);
  --c-muted: var(--hmuted);
}
.hv-on .card.is-active .art img,
.hv-on a.card:focus-visible .art img {
  transform: translate3d(0, calc(var(--hv-lift) * 1px), 0)
    scale(var(--hv-scale)) rotate(calc(var(--hv-rot) * 1deg));
}
.hv-on .card.is-active .foot h3,
.hv-on a.card:focus-visible .foot h3 {
  transform: translateY(calc(var(--hv-title) * 1px));
}
.hv-on .card.is-active .arrow,
.hv-on a.card:focus-visible .arrow {
  transform: translateX(calc(var(--hv-arrow) * 1px));
}
.hv-on .card.is-active .status i,
.hv-on a.card:focus-visible .status i {
  transform: scale(calc(1 + var(--hv-dot)));
}
a.card:focus-visible {
  outline: 2px solid var(--hink);
  outline-offset: -4px;
}
.hv-off a.card:focus-visible {
  outline-color: var(--ink);
}

/* leave smoothly: the illustration returns without the entry stagger */
.card:not(:hover):not(.is-active) .art img,
.card:not(:hover):not(.is-active) .arrow {
  transition-delay: 0ms;
}

/* 6 · reduced motion: keep the colour change, remove all movement */
@media (prefers-reduced-motion: reduce) {
  .card::before {
    transition: none;
  }
  .card .art img,
  .foot h3,
  .arrow,
  .status i {
    transform: none !important;
    transition: none;
  }
  .card,
  .num,
  .foot p {
    transition: none;
  }
}

/* ADVERTISEMENT PLACEHOLDER CELLS */
.ad {
  height: var(--card-h);
  background: var(--alt);
  padding: var(--pad);
  padding-top: calc(var(--pad) - 2px);
  padding-bottom: calc(var(--pad) - 14px);
  display: flex;
  flex-direction: column;
}
.ad .lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
  min-height: 9px;
}
.ad-box {
  flex: 1;
  margin: calc(var(--pad) - 4px) 0 0;
  border: 1px solid var(--line);
  background: var(--box);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ad-img {
  flex: 0 0 51%;
  background: var(--ph);
}
.ad-copy {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ad-copy b {
  height: 8px;
  background: var(--ph);
  display: block;
}
.ad-copy b:nth-child(1) {
  width: 64%;
}
.ad-copy b:nth-child(2) {
  width: 94%;
}
.ad-copy b:nth-child(3) {
  width: 50%;
}
.ad-copy b.btn {
  width: 26%;
  height: 11px;
  margin: 14px auto 0;
}
.ad-cap {
  margin: 0;
  padding: 10px 0 0;
  text-align: right;
  font-size: 8.5px;
  font-weight: 600;
  color: #9ba095;
  letter-spacing: 0.02em;
  line-height: 1;
}

@media (max-width: 639px) {
  .ad {
    height: var(--ad-h-mobile);
    padding: 16px 16px 10px;
  }
  .ad-box {
    background: var(--box);
    border: 1px solid var(--line);
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 0;
    height: calc(var(--ad-h-mobile) - 78px);
    margin-top: 14px;
  }
  .ad-img {
    flex: 0 0 22%;
    align-self: stretch;
    margin: 12px;
    max-width: 62px;
  }
  .ad-copy {
    flex: 1;
    padding: 12px 14px 12px 0;
    gap: 9px;
  }
  .ad-copy b.btn {
    display: none;
  }
  .ad-cap {
    margin-top: auto;
    padding-top: 8px;
  }
}

/* Additive configurable tokens. Original source rules remain intact. */
.grid {
  grid-template-columns: repeat(var(--careerve-cols, 4), minmax(0, 1fr));
  gap: var(--careerve-gap, 1px);
}
.card {
  border-radius: var(--careerve-radius, 0);
  box-shadow: var(--careerve-shadow, none);
}
.grid {
  border-bottom-width: var(--careerve-border, 1px);
}
.foot p {
  font-size: var(--careerve-desc, 12px);
}
.careerve-section {
  min-width: 0;
  overflow-wrap: anywhere;
}
.careerve-section img {
  max-width: 100%;
  height: auto;
}
.careerve-section p {
  white-space: pre-line;
}
.hdr,
.ftr {
  flex-shrink: 0;
  min-width: 0;
}
.logo {
  flex-shrink: 0;
}
.logo img {
  display: block;
  max-width: 100%;
}
.adsbygoogle {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin-top: 16px;
  flex: 1;
  min-width: 0;
}
[data-device="desktop"] .careerve-hide-desktop,
[data-device="laptop"] .careerve-hide-laptop,
[data-device="tablet"] .careerve-hide-tablet,
[data-device="mobile"] .careerve-hide-mobile {
  display: none !important;
}
@media (max-width: 639px) {
  .art img {
    height: calc(var(--art-h, 116px) * var(--s, 1));
  }
  .foot p {
    display: none;
  }
  .foot h3 {
    overflow-wrap: anywhere;
  }
  .hdr {
    gap: 12px;
  }
  .nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .ftr {
    gap: 8px;
  }
}
@media (max-width: 359px) {
  .nav {
    gap: 9px;
  }
  .nav a {
    font-size: 9px;
  }
  .logo {
    font-size: 18px;
  }
  .hdr {
    padding: 0 12px;
  }
  .meta {
    font-size: 8px;
  }
  .foot h3 {
    font-size: min(var(--title), 23px);
  }
  .ftr {
    font-size: 9px;
  }
  .ftr nav {
    gap: 8px;
  }
}
html[data-orientation="horizontal"] .card {
  position: relative;
  justify-content: space-between;
}
html[data-orientation="horizontal"] .card > .art {
  position: absolute;
  left: 42%;
  right: 0;
  top: 30px;
  bottom: 12px;
  padding: 0;
  pointer-events: none;
}
html[data-orientation="horizontal"] .card .art img {
  height: calc(var(--art-h) * var(--s, 1));
  max-width: 84%;
}
html[data-orientation="horizontal"] .card .foot {
  margin-top: auto;
}
html[data-orientation="horizontal"] .card .foot p,
html[data-orientation="horizontal"] .card .arrow {
  display: none;
}
html[data-orientation="horizontal"][data-image-side="left"] .card > .art {
  left: 0;
  right: 48%;
}
html[data-orientation="horizontal"][data-image-side="left"] .card > .foot {
  margin-left: 56%;
}
html[data-orientation="vertical"] .card > .art {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  padding: 14px 0 10px;
}
html[data-orientation="vertical"] .card .foot {
  max-width: none;
}
html[data-orientation="vertical"] .card .foot p {
  display: block;
}
html[data-orientation="vertical"] .hide-desc .card .foot p {
  display: none;
}
html[data-orientation="vertical"] .card .arrow {
  display: block;
}
html[data-orientation="vertical"] .card .art img {
  height: calc(var(--art-h) * var(--s, 1));
}

@media (max-width: 359px) {
  html[data-orientation="horizontal"] .card .foot {
    max-width: 45%;
  }
}
.careerve-mobile-logo,
.careerve-menu-toggle,
[class*="careerve-only-"] {
  display: none;
}
.logo picture {
  display: block;
}
.careerve-block-grid {
  display: grid;
  grid-template-columns: repeat(var(--careerve-block-cols, 2), minmax(0, 1fr));
}
.careerve-block-button {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 3px;
}
.careerve-menu-toggle {
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--ink);
}
.careerve-menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  margin: 4px 0;
}
@media (max-width: 639px) {
  .careerve-mobile-logo {
    display: block;
  }
  .logo:has(.careerve-mobile-logo) .careerve-wordmark {
    display: none;
  }
  .careerve-menu-toggle {
    display: block;
  }
  .hdr:has(.careerve-menu-toggle) {
    position: relative;
  }
  .hdr:has(.careerve-menu-toggle) .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg);
    padding: 18px 16px;
    border-bottom: 1px solid var(--line);
    z-index: 5;
  }
  .hdr:has(.careerve-menu-toggle) .nav.careerve-nav-open {
    display: flex;
    justify-content: flex-start;
  }
  .careerve-block-grid {
    grid-template-columns: 1fr;
  }
}
.card.careerve-card-hover-off {
  --w: 0 !important;
  --c-ink: var(--ink) !important;
  --c-muted: var(--muted) !important;
}
.card.careerve-card-hover-off::before {
  display: none !important;
}
.card.careerve-card-hover-off .art img,
.card.careerve-card-hover-off h3,
.card.careerve-card-hover-off .arrow,
.card.careerve-card-hover-off .status i,
.card.careerve-card-motion-off .art img,
.card.careerve-card-motion-off h3,
.card.careerve-card-motion-off .arrow,
.card.careerve-card-motion-off .status i {
  transform: none !important;
  transition: none !important;
}
.logo:has(img) {
  min-width: 0;
  max-width: 45%;
  flex-shrink: 1;
}
.hdr,
.ftr,
.careerve-section {
  max-width: 100%;
}