/* =========================================================
   HANNEKE VERHOEF
   PORTFOLIO PAGE
========================================================= */

.hv-portfolio {
  --navy: #223247;
  --navy-soft: #304158;
  --text: #323b46;
  --muted: #707985;

  --cream: #f5f1e9;
  --cream-light: #faf8f4;

  --border: #e4ded6;

  --gold: #d7a975;
  --bronze: #7f5b39;

  width: 100vw;
  max-width: 100vw;

  position: relative;
  left: 50%;

  margin-left: -50vw;

  overflow: hidden;

  color: var(--text);

  background: #fff;

  font-family: inherit;
}


.hv-portfolio *,
.hv-portfolio *::before,
.hv-portfolio *::after {
  box-sizing: border-box;
}


/* REMOVE KADENCE PAGE GAPS */

body:has(.hv-portfolio) .site-content,
body:has(.hv-portfolio) .content-area,
body:has(.hv-portfolio) .site-main,
body:has(.hv-portfolio) .entry-content-wrap,
body:has(.hv-portfolio) .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


body:has(.hv-portfolio) .entry-content-wrap {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}



/* =========================================================
   SHARED
========================================================= */

.hv-portfolio-inner {
  width: min(1450px, calc(100% - 64px));

  margin: 0 auto;
}


.hv-portfolio-eyebrow {
  display: inline-flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 14px;

  color: var(--bronze);

  font-size: 11px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: .13em;
}


.hv-portfolio-eyebrow::before {
  content: "";

  width: 28px;
  height: 1px;

  background: currentColor;
}



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

.hv-portfolio-hero {
  padding: 88px 0 72px;

  background:
    linear-gradient(
      135deg,
      #faf8f4 0%,
      #f5f1e9 100%
    );

  border-bottom: 1px solid var(--border);
}


.hv-portfolio-hero h1 {
  max-width: 920px;

  margin: 0 0 22px;

  color: var(--navy);

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(44px, 5.5vw, 72px);

  font-weight: 400;

  line-height: 1.04;

  letter-spacing: -.035em;
}


.hv-portfolio-hero p {
  max-width: 760px;

  margin: 0;

  color: var(--muted);

  font-size: 18px;
  line-height: 1.7;
}



/* =========================================================
   PROJECT AREA
========================================================= */

.hv-portfolio-projects {
  padding: 42px 0 110px;

  background: #fff;
}



/* =========================================================
   FILTERS
========================================================= */

.hv-portfolio-filter-wrap {
  margin-bottom: 36px;

  overflow-x: auto;

  scrollbar-width: none;
}


.hv-portfolio-filter-wrap::-webkit-scrollbar {
  display: none;
}


.hv-portfolio-filters {
  display: flex;

  gap: 7px;

  min-width: max-content;
}


.hv-portfolio-filter {
  padding: 9px 15px;

  border: 1px solid var(--border);
  border-radius: 100px;

  background: #fff;

  color: #68717c;

  font: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}


.hv-portfolio-filter:hover {
  border-color: #cfc6bc;

  color: var(--navy);
}


.hv-portfolio-filter.is-active {
  border-color: var(--navy);

  background: var(--navy);

  color: #fff;
}



/* =========================================================
   GRID
========================================================= */

.hv-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 30px 26px;
}



/* =========================================================
   CARD
========================================================= */

.hv-project-card {
  min-width: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border: 1px solid var(--border);
  border-radius: 14px;

  background: #fff;

  box-shadow:
    0 12px 34px rgba(34, 50, 71, .045);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    opacity .25s ease;
}


.hv-project-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 20px 45px rgba(34, 50, 71, .09);
}


.hv-project-card.is-hidden {
  display: none;
}



/* =========================================================
   IMAGE
========================================================= */

.hv-project-image {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 10;

  display: block;

  overflow: hidden;

  background: #eceff1;

  text-decoration: none !important;
}


.hv-project-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: top center;

  transition: transform .45s ease;
}


.hv-project-card:hover .hv-project-image img {
  transform: scale(1.025);
}


.hv-project-image-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 52%,
      rgba(26, 36, 50, .7) 100%
    );

  opacity: 0;

  transition: opacity .25s ease;
}


.hv-project-image-action {
  position: absolute;

  left: 20px;
  bottom: 17px;

  color: #fff;

  font-size: 12px;
  font-weight: 700;

  opacity: 0;

  transform: translateY(5px);

  transition:
    opacity .25s ease,
    transform .25s ease;
}


.hv-project-card:hover .hv-project-image-overlay,
.hv-project-card:hover .hv-project-image-action {
  opacity: 1;
}


.hv-project-card:hover .hv-project-image-action {
  transform: translateY(0);
}



/* =========================================================
   BODY
========================================================= */

.hv-project-body {
  flex: 1;

  padding: 23px 23px 21px;

  display: flex;
  flex-direction: column;
}


.hv-project-topline {
  margin-bottom: 13px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 12px;
}


.hv-project-status {
  padding: 5px 8px;

  border-radius: 100px;

  font-size: 8px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: .08em;
}


.hv-project-status-live {
  background: #eaf2ec;

  color: #526f5a;
}


.hv-project-status-beta {
  background: #edf0f5;

  color: #52627c;
}


.hv-project-status-development {
  background: #f4ede3;

  color: #876643;
}


.hv-project-type {
  color: #8a9199;

  font-size: 9px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .07em;

  text-align: right;
}


.hv-project-card h2 {
  margin: 0 0 10px;

  color: var(--navy);

  font-family: Georgia, "Times New Roman", serif;

  font-size: 26px;
  font-weight: 400;

  line-height: 1.1;

  letter-spacing: -.025em;
}


.hv-project-card p {
  margin: 0 0 18px;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.65;
}



/* =========================================================
   TAGS
========================================================= */

.hv-project-tags {
  margin-bottom: 21px;

  display: flex;
  flex-wrap: wrap;

  gap: 6px;
}


.hv-project-tags span {
  padding: 5px 8px;

  border: 1px solid #ebe6e0;
  border-radius: 5px;

  background: #faf8f5;

  color: #707982;

  font-size: 9px;
  font-weight: 600;
}



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

.hv-project-footer {
  margin-top: auto;

  padding-top: 17px;

  border-top: 1px solid #eee9e3;
}


.hv-project-primary {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color: var(--navy) !important;

  font-size: 12px;
  font-weight: 800;

  text-decoration: none !important;
}


.hv-project-primary span {
  transition: transform .2s ease;
}


.hv-project-primary:hover span {
  transform: translateX(4px);
}


.hv-project-private-cta {
  color: #9a928a;

  font-size: 11px;
  font-weight: 700;
}



/* =========================================================
   PRIVATE LABEL
========================================================= */

.hv-project-image-private {
  cursor: default;
}


.hv-project-private-label {
  position: absolute;

  right: 15px;
  top: 15px;

  padding: 6px 9px;

  border-radius: 100px;

  background: rgba(34,50,71,.9);

  color: #fff;

  font-size: 8px;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: .08em;
}



/* =========================================================
   NURTIVA MOCK
========================================================= */

.hv-project-mock {
  width: 100%;
  height: 100%;
}


.hv-project-mock-nurtiva {
  display: grid;
  grid-template-columns: 28% 1fr;

  background: #f5f8f6;

  padding: 19px;
}


.hv-mock-sidebar {
  padding: 15px 11px;

  display: flex;
  flex-direction: column;

  gap: 6px;

  border-radius: 10px 0 0 10px;

  background: #39574f;

  color: rgba(255,255,255,.55);
}


.hv-mock-sidebar strong {
  margin-bottom: 13px;

  color: #fff;

  font-family: Georgia, serif;

  font-size: 13px;
}


.hv-mock-sidebar span {
  padding: 6px 7px;

  border-radius: 5px;

  font-size: 7px;
}


.hv-mock-sidebar span.active {
  background: rgba(255,255,255,.13);

  color: #fff;
}


.hv-mock-main {
  padding: 18px;

  border: 1px solid #dfe7e2;
  border-left: 0;

  border-radius: 0 10px 10px 0;

  background: #fff;
}


.hv-mock-title {
  margin-bottom: 17px;

  color: #39574f;

  font-family: Georgia, serif;

  font-size: 15px;
}


.hv-mock-cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);

  gap: 7px;
}


.hv-mock-cards i {
  height: 47px;

  border: 1px solid #dfe7e2;
  border-radius: 6px;

  background: #edf4f0;
}


.hv-mock-lines {
  margin-top: 15px;
}


.hv-mock-lines i {
  width: 100%;
  height: 6px;

  display: block;

  margin-bottom: 8px;

  border-radius: 100px;

  background: #e8eeeb;
}


.hv-mock-lines i:nth-child(2) {
  width: 83%;
}


.hv-mock-lines i:nth-child(3) {
  width: 92%;
}


.hv-mock-lines i:nth-child(4) {
  width: 62%;
}



/* =========================================================
   QUOTE MOCK
========================================================= */

.hv-project-mock-quote {
  padding: 18px;

  background:
    linear-gradient(
      145deg,
      #e9edf1,
      #f7f4ef
    );
}


.hv-quote-browser {
  width: 100%;
  height: 100%;

  overflow: hidden;

  border: 1px solid #d7dce1;
  border-radius: 9px;

  background: #fff;

  box-shadow:
    0 8px 22px rgba(34,50,71,.11);
}


.hv-quote-browser-top {
  height: 24px;

  padding: 0 9px;

  display: flex;
  align-items: center;

  gap: 4px;

  border-bottom: 1px solid #e8ebed;

  background: #f5f6f7;
}


.hv-quote-browser-top span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #c4c9ce;
}


.hv-quote-app {
  height: calc(100% - 24px);

  display: grid;
  grid-template-columns: 26% 1fr;
}


.hv-quote-nav {
  padding: 13px 10px;

  background: var(--navy);
}


.hv-quote-nav strong {
  display: block;

  margin-bottom: 16px;

  color: #fff;

  font-size: 9px;
}


.hv-quote-nav i {
  width: 100%;
  height: 5px;

  display: block;

  margin-bottom: 9px;

  border-radius: 30px;

  background: rgba(255,255,255,.18);
}


.hv-quote-content {
  padding: 17px;

  background: #fafbfc;
}


.hv-quote-heading {
  margin-bottom: 14px;

  color: var(--navy);

  font-family: Georgia,serif;

  font-size: 14px;
}


.hv-quote-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 7px;
}


.hv-quote-summary > div {
  padding: 9px;

  border: 1px solid #e3e6e9;
  border-radius: 6px;

  background: #fff;
}


.hv-quote-summary small,
.hv-quote-summary strong {
  display: block;
}


.hv-quote-summary small {
  margin-bottom: 3px;

  color: #969da4;

  font-size: 6px;

  text-transform: uppercase;
}


.hv-quote-summary strong {
  color: #485564;

  font-size: 8px;
}


.hv-quote-price {
  margin-top: 10px;

  padding: 10px;

  display: flex;
  justify-content: space-between;

  border-radius: 6px;

  background: #f1e9de;
}


.hv-quote-price span {
  color: #83766b;

  font-size: 7px;
}


.hv-quote-price strong {
  color: var(--navy);

  font-size: 11px;
}



/* =========================================================
   CTA
========================================================= */

.hv-portfolio-cta {
  padding: 92px 32px;

  background: var(--navy);
}


.hv-portfolio-cta-inner {
  width: min(900px,100%);

  margin: 0 auto;

  text-align: center;
}


.hv-portfolio-eyebrow-light {
  color: #fff4e6;
}


.hv-portfolio-cta h2 {
  margin: 0 auto 17px;

  color: #fff;

  font-family: Georgia,"Times New Roman",serif;

  font-size: clamp(36px,4.5vw,58px);

  font-weight: 400;

  line-height: 1.06;

  letter-spacing: -.03em;
}


.hv-portfolio-cta p {
  max-width: 660px;

  margin: 0 auto 26px;

  color: rgba(255,255,255,.68);

  font-size: 16px;

  line-height: 1.7;
}


.hv-portfolio-cta-button {
  min-height: 48px;

  padding: 12px 19px;

  display: inline-flex;
  align-items: center;

  gap: 8px;

  border-radius: 6px;

  background: #fff;

  color: var(--navy) !important;

  font-size: 13px;
  font-weight: 800;

  text-decoration: none !important;

  transition: transform .2s ease;
}


.hv-portfolio-cta-button:hover {
  transform: translateY(-2px);
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .hv-portfolio-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

}


@media (max-width: 800px) {

  .hv-portfolio-inner {
    width: min(100% - 40px,1450px);
  }


  .hv-portfolio-hero {
    padding: 70px 0 58px;
  }


  .hv-portfolio-hero p {
    font-size: 16px;
  }


  .hv-portfolio-projects {
    padding-top: 32px;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

  .hv-portfolio-inner {
    width: calc(100% - 32px);
  }


  .hv-portfolio-hero {
    padding: 56px 0 48px;
  }


  .hv-portfolio-hero h1 {
    font-size: clamp(39px,11vw,52px);
  }


  .hv-portfolio-grid {
    grid-template-columns: 1fr;

    gap: 22px;
  }


  .hv-project-card h2 {
    font-size: 27px;
  }


  .hv-project-body {
    padding: 21px 19px;
  }


  .hv-portfolio-projects {
    padding-bottom: 72px;
  }


  .hv-portfolio-cta {
    padding: 68px 20px;
  }

}
/* =========================================================
   KNOWLEDGE BASE TERM LINKS
========================================================= */

.hv-term {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 1px dotted #7f5b39;
  cursor: help;
}

.hv-term:hover {
  color: #7f5b39 !important;
  border-bottom-style: solid;
}
.hv-project-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.hv-project-secondary,
.hv-project-secondary:link,
.hv-project-secondary:visited {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.hv-project-secondary:hover,
.hv-project-secondary:focus {
  color: #d7a975;
}

.hv-project-secondary span {
  margin-left: 4px;
}
.hv-project-footer .hv-project-primary,
.hv-project-footer .hv-project-secondary {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hv-project-footer .hv-project-primary span,
.hv-project-footer .hv-project-secondary span {
  margin-left: 0;
  font-size: 14px;
}