:root {
  --jvf-plum: #2e1e2b;
  --jvf-lavender: #a07a97;
  --jvf-lavender-dark: #7c5c75;
  --jvf-cream: #f5f4ef;
  --jvf-mist: #d9d9d3;
  --jvf-mustard: #a07a97;
  --jvf-olive: #a07a97;
  --jvf-white: #fff;
  --jvf-radius: 24px;
  --jvf-shadow: 0 18px 50px rgba(46, 30, 43, 0.09);
  --jvf-container: min(1240px, calc(100vw - 48px));
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
html { overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, p, a, li, .jvf-display, .jvf-title { overflow-wrap: break-word; word-break: break-word; hyphens: auto; max-width: 100%; }
.jvf-hero-copy, .jvf-hero-media, .jvf-split > *, .jvf-hero-grid > *, .jvf-header-inner > *, .jvf-brand, .jvf-main-nav { min-width: 0; }
body.admin-bar .jvf-site-header { top: 32px; }

*:focus-visible {
  outline: 3px solid var(--jvf-mustard);
  outline-offset: 4px;
}

a { text-underline-offset: 0.2em; }
.wp-site-blocks { padding: 0; }

.jvf-site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 14px 0;
  background: rgba(245, 244, 239, 0.94);
  border-bottom: 1px solid rgba(46, 30, 43, 0.09);
}

.jvf-header-inner { min-height: 58px; gap: 26px; }
.jvf-wordmark a,
.jvf-wordmark {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.jvf-wordmark a::after {
  content: "FLOW";
  display: block;
  margin-top: 4px;
  font-family: Lato, Arial, sans-serif;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.42em;
}

.jvf-main-nav { flex: 1; }
.jvf-main-nav a { text-decoration: none; }
.jvf-main-nav a:hover { color: var(--jvf-lavender-dark); }
.jvf-header-cta { flex-shrink: 0; }

.wp-element-button,
.wp-block-button__link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(46, 30, 43, .18);
  background: var(--jvf-lavender-dark);
  color: var(--jvf-white);
}

.is-style-outline > .wp-block-button__link {
  border: 1.5px solid var(--jvf-lavender);
  background: transparent;
  color: var(--jvf-plum);
}

.is-style-outline > .wp-block-button__link:hover {
  background: var(--jvf-lavender);
  color: var(--jvf-white);
}

.jvf-section {
  position: relative;
  padding: clamp(72px, 9vw, 126px) 0;
}

.jvf-section--compact { padding: clamp(52px, 7vw, 88px) 0; }
.jvf-section--lavender { background: var(--jvf-lavender); color: var(--jvf-white); }
.jvf-section--plum { background: var(--jvf-plum); color: var(--jvf-cream); }
.jvf-section--mist { background: rgba(217, 217, 211, .48); }
.jvf-section--white { background: rgba(255,255,255,.7); }

.jvf-section--lavender h2,
.jvf-section--lavender h3,
.jvf-section--lavender a,
.jvf-section--plum h2,
.jvf-section--plum h3,
.jvf-section--plum a { color: inherit; }

.jvf-container { width: var(--jvf-container); margin-inline: auto; }
.jvf-narrow { max-width: 820px; margin-inline: auto; }

.jvf-kicker {
  margin: 0 0 14px;
  color: var(--jvf-lavender-dark);
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.jvf-section--lavender .jvf-kicker,
.jvf-section--plum .jvf-kicker { color: var(--jvf-mustard); }

.jvf-display {
  max-width: 980px;
  margin: 0;
  font-size: clamp(2.55rem, 4.6vw, 5rem);
  letter-spacing: -.035em;
  hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;
}

.jvf-title {
  max-width: 860px;
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  letter-spacing: -.025em;
}

.jvf-lead {
  max-width: 760px;
  font-size: clamp(1.12rem, 2vw, 1.38rem);
  line-height: 1.65;
}

.jvf-script {
  display: inline-block;
  color: var(--jvf-lavender-dark);
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 500;
  line-height: 1.25;
  transform: rotate(-2deg);
}

.jvf-hero { padding-top: clamp(70px, 9vw, 130px); overflow: hidden; }
.jvf-hero::before {
  content: "";
  position: absolute;
  top: 15%;
  right: -9vw;
  width: 32vw;
  height: 32vw;
  border: 1px solid rgba(160,122,151,.32);
  border-radius: 50%;
}

.jvf-hero-grid,
.jvf-split { align-items: center !important; gap: clamp(38px, 7vw, 92px); }
.jvf-hero-copy { position: relative; z-index: 2; }
.jvf-hero-copy .wp-block-buttons { margin-top: 34px; }
.jvf-hero-media { position: relative; }
.jvf-hero-media img,
.jvf-hero-media .wp-block-cover {
  width: 100%;
  min-height: 450px;
  object-fit: cover;
  border-radius: 52% 48% 18% 34% / 24% 26% 42% 44%;
  box-shadow: var(--jvf-shadow);
}

.jvf-hero-media::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -28px;
  bottom: -28px;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--jvf-mustard);
}

.jvf-grid { display: grid !important; gap: 24px; }
.jvf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jvf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jvf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.jvf-card {
  position: relative;
  height: 100%;
  padding: clamp(26px, 3vw, 40px);
  overflow: hidden;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(46,30,43,.1);
  border-radius: var(--jvf-radius);
  box-shadow: 0 10px 32px rgba(46,30,43,.055);
}

.jvf-card h3 { margin-top: 0; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.jvf-card p:last-child,
.jvf-card ul:last-child { margin-bottom: 0; }

.jvf-card--service { padding-top: 78px; }
.jvf-card--service::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 32px;
  color: var(--jvf-lavender-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
}

.jvf-service-01::before { content: "01"; }
.jvf-service-02::before { content: "02"; }
.jvf-service-03::before { content: "03"; }
.jvf-service-04::before { content: "04"; }
.jvf-service-05::before { content: "05"; }
.jvf-service-06::before { content: "06"; }

.jvf-placeholder-image { margin: 0; }
.jvf-placeholder-image .wp-block-cover__inner-container {
  max-width: 300px;
  color: var(--jvf-plum);
  text-align: center;
}
.jvf-placeholder-image .wp-block-cover__inner-container strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.75rem;
}
.jvf-placeholder-image img {
  width: 100%;
  min-height: 380px;
  object-fit: cover;
  border-radius: 24px;
}

.jvf-card--service a { font-weight: 800; text-decoration-thickness: 1px; }
.jvf-checklist { padding: 0; list-style: none; }
.jvf-checklist li { position: relative; padding: 9px 0 9px 32px; }
.jvf-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 15px;
  height: 8px;
  border: solid var(--jvf-mustard);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

.jvf-number {
  display: inline-grid;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  place-items: center;
  border: 1px solid var(--jvf-lavender);
  border-radius: 50%;
  color: var(--jvf-lavender-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
}

.jvf-quote {
  position: relative;
  margin: 0;
  padding: clamp(30px, 5vw, 58px);
  background: var(--jvf-white);
  border-left: 5px solid var(--jvf-mustard);
  border-radius: 0 var(--jvf-radius) var(--jvf-radius) 0;
  box-shadow: var(--jvf-shadow);
}

.jvf-quote p:first-child {
  margin-top: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.22rem, 2.2vw, 1.7rem);
  line-height: 1.55;
}

.jvf-case {
  padding: clamp(34px, 6vw, 70px);
  background: var(--jvf-plum);
  border-radius: 34px;
  color: var(--jvf-cream);
}
.jvf-case h2, .jvf-case h3 { color: inherit; }

.jvf-cta {
  position: relative;
  padding: clamp(42px, 7vw, 78px);
  overflow: hidden;
  background: var(--jvf-lavender);
  border-radius: 36px;
  color: var(--jvf-white);
}
.jvf-cta::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 280px;
  height: 280px;
  border: 54px solid rgba(212,175,28,.55);
  border-radius: 50%;
}
.jvf-cta > * { position: relative; z-index: 1; }
.jvf-cta h2 { margin-top: 0; color: inherit; font-size: clamp(2rem, 4vw, 3.65rem); }
.jvf-cta .wp-block-button__link { background: var(--jvf-cream); color: var(--jvf-plum); }

.jvf-timeline { border-left: 1px solid var(--jvf-lavender); }
.jvf-timeline > * { position: relative; padding-left: 34px; }
.jvf-timeline > *::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 10px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--jvf-mustard);
}

.jvf-contact-card {
  padding: clamp(30px, 5vw, 50px);
  background: var(--jvf-plum);
  border-radius: var(--jvf-radius);
  color: var(--jvf-cream);
}
.jvf-contact-card h2,
.jvf-contact-card h3,
.jvf-contact-card a { color: inherit; }

.jvf-form { display: grid; gap: 20px; }
.jvf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.jvf-form-field label { display: block; margin-bottom: 7px; font-weight: 800; }
.jvf-form-field input,
.jvf-form-field textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(46,30,43,.28);
  border-radius: 10px;
  background: var(--jvf-white);
  color: var(--jvf-plum);
  font: inherit;
}
.jvf-form-field textarea { min-height: 170px; resize: vertical; }
.jvf-form-field input:focus,
.jvf-form-field textarea:focus { border-color: var(--jvf-lavender-dark); outline: 3px solid rgba(160,122,151,.22); }
.jvf-form-notice { padding: 15px 18px; border-radius: 10px; }
.jvf-form-notice--success { background: #e4ecdd; color: #28331f; }
.jvf-form-notice--error { background: #f1dddd; color: #602929; }
.jvf-honeypot { position: absolute !important; left: -9999px !important; }
.jvf-form .wp-element-button { border: 0; cursor: pointer; }

.jvf-faq details {
  padding: 20px 0;
  border-bottom: 1px solid rgba(46,30,43,.15);
}
.jvf-faq summary { cursor: pointer; font-family: "Playfair Display", Georgia, serif; font-size: 1.35rem; font-weight: 600; }
.jvf-faq details p { max-width: 760px; }

.jvf-site-footer {
  padding: 72px 0 28px;
  background: var(--jvf-plum);
  color: var(--jvf-cream);
}
.jvf-site-footer h3,
.jvf-site-footer a,
.jvf-site-footer .jvf-wordmark { color: inherit; }
.jvf-footer-grid { gap: clamp(36px, 6vw, 90px); }
.jvf-footer-links { padding: 0; list-style: none; }
.jvf-footer-links li { margin: 8px 0; }
.jvf-site-footer hr { opacity: .25; }
.jvf-empty { min-height: 60vh; padding-block: 120px; }

@media (max-width: 1020px) {
  .jvf-header-cta { display: none; }
  .jvf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jvf-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
  body.admin-bar .jvf-site-header { top: 46px; }
  :root { --jvf-container: min(100% - 32px, 1240px); }
  .jvf-section { padding-block: 64px; }
  .jvf-hero { padding-top: 54px; }
  .jvf-display { font-size: clamp(2.1rem, 6.5vw, 2.9rem); }
  .jvf-hero-grid,
  .jvf-split { gap: 36px; }
  .jvf-hero-media img { min-height: 350px; }
  .jvf-grid--2,
  .jvf-grid--3,
  .jvf-grid--4 { grid-template-columns: 1fr; }
  .jvf-form-row { grid-template-columns: 1fr; }
  .jvf-cta { border-radius: 26px; }
  .jvf-cta::after { opacity: .35; }
  .jvf-site-footer { padding-top: 58px; }
}

@media (max-width: 480px) {
  .jvf-display { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .jvf-title { font-size: 2.25rem; }
  .jvf-card { padding: 25px; border-radius: 20px; }
  .wp-block-buttons { width: 100%; }
  .wp-block-button { width: 100%; }
  .wp-block-button__link { width: 100%; box-sizing: border-box; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Reference-layout pass 1.1
   The design PNGs use compact editorial spacing, thin cards and warm arch
   photography. These rules intentionally keep every text and media block
   editable in Gutenberg while matching that visual system more closely.
   -------------------------------------------------------------------------- */

:root {
  --jvf-plum: #2b211b;
  --jvf-plum-deep: #2b211b;
  --jvf-lavender: #8b6a7f;
  --jvf-lavender-dark: #6f5566;
  --jvf-lilac-pale: #eee7ed;
  --jvf-cream: #e9e7e1;
  --jvf-paper: #fffdf9;
  --jvf-mist: #e0dcd4;
  --jvf-mustard: #d4a017;
  --jvf-mustard-dark: #aa8012;
  --jvf-olive: #5f6f4b;
  --jvf-olive-dark: #4c593c;
  --jvf-orange: #d4a017;
  --jvf-container: min(1180px, calc(100vw - 64px));
  --jvf-radius: 4px;
  --jvf-shadow: 0 13px 38px rgba(58, 37, 54, .07);
  --wp--preset--color--plum: #2b211b;
  --wp--preset--color--lavender: #8b6a7f;
  --wp--preset--color--cream: #e9e7e1;
  --wp--preset--color--mist: #e0dcd4;
  --wp--preset--color--mustard: #d4a017;
  --wp--preset--color--olive: #5f6f4b;
}

body {
  background: var(--jvf-cream);
  color: var(--jvf-plum-deep);
  font-size: 16px;
  line-height: 1.65;
}

/* Hostinger's authoring assistant is not part of the public site design. */
.float-btn__wrapper,
#chatbot-float-box,
.kodee-fab { display: none !important; }

.jvf-site-header {
  padding: 10px 0;
  background: rgba(248, 245, 239, .97);
  border-bottom-color: rgba(75, 48, 69, .11);
  box-shadow: 0 4px 24px rgba(52, 33, 48, .035);
}

.jvf-header-inner {
  min-height: 62px;
  gap: 28px;
}

.jvf-brand {
  flex: 0 0 190px;
  margin: 0 !important;
}

.jvf-wordmark,
.jvf-wordmark a {
  color: var(--jvf-plum) !important;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
}

.jvf-wordmark a::after { content: none !important; display: none !important; }
.jvf-wordmark,
.jvf-wordmark a { white-space: nowrap; }

.jvf-tagline {
  margin: 7px 0 0 !important;
  color: var(--jvf-plum);
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1;
  white-space: nowrap;
}

.jvf-main-nav { margin: 0 !important; }
.jvf-main-nav .wp-block-navigation-item { position: relative; }
.jvf-main-nav .wp-block-navigation-item__content {
  padding: 15px 1px 11px;
  color: var(--jvf-plum-deep);
  font-size: .83rem;
  font-weight: 700;
}

.jvf-main-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 2px;
  background: var(--jvf-lavender-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.jvf-main-nav .current-menu-item > a::after,
.jvf-main-nav .wp-block-navigation-item__content:hover::after {
  transform: scaleX(1);
}

.jvf-header-cta .wp-block-button__link {
  min-height: 43px;
  padding: 10px 17px;
  border-radius: 3px;
  background: var(--jvf-mustard);
  color: var(--jvf-plum-deep);
  font-size: .78rem;
  font-weight: 900;
}

.jvf-header-cta .wp-block-button__link:hover {
  background: var(--jvf-mustard-dark);
  color: var(--jvf-plum-deep);
}

.wp-element-button,
.wp-block-button__link {
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 3px;
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .01em;
}

.jvf-section {
  padding: clamp(58px, 6.4vw, 86px) 0;
}

.jvf-section--compact { padding: clamp(42px, 4.5vw, 60px) 0; }
.jvf-section--white { background: var(--jvf-paper); }
.jvf-section--mist { background: #f0ede7; }

.jvf-kicker {
  margin-bottom: 12px;
  color: var(--jvf-plum);
  font-size: .68rem;
  letter-spacing: .14em;
}

.jvf-display {
  max-width: 640px;
  font-size: clamp(2.75rem, 4.35vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.04;
}

.jvf-title {
  max-width: 700px;
  font-size: clamp(2.1rem, 3.2vw, 3.25rem);
  line-height: 1.08;
}

.jvf-lead {
  max-width: 660px;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.7;
}

.jvf-script {
  margin-bottom: 10px;
  color: var(--jvf-lavender-dark);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  transform: rotate(-1deg);
}

.jvf-script + .jvf-title::after,
.jvf-hero-copy .jvf-kicker::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin: 18px 0 23px;
  background: var(--jvf-orange);
}

.jvf-hero {
  min-height: 570px;
  padding: clamp(54px, 6vw, 82px) 0;
  background:
    radial-gradient(circle at 16% 20%, rgba(216, 173, 42, .08), transparent 24%),
    var(--jvf-cream);
}

.jvf-hero::before { display: none; }

.jvf-hero-grid {
  min-height: 470px;
  align-items: center !important;
  gap: clamp(44px, 6vw, 78px);
}

.jvf-hero-copy { flex-basis: 49% !important; }
.jvf-hero-media { flex-basis: 51% !important; }
.jvf-hero-copy .wp-block-buttons { margin-top: 25px; }

.jvf-placeholder-image {
  position: relative;
  min-height: 470px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 27%, rgba(255,255,255,.72) 0 10%, transparent 11%),
    linear-gradient(145deg, #d8c7b6 0%, #b99f91 40%, #887269 100%);
  border-radius: 48% 3px 3px 48% / 22% 3px 3px 22% !important;
  box-shadow: 0 18px 50px rgba(52, 33, 48, .12);
}

.jvf-placeholder-image::before {
  content: "";
  position: absolute;
  inset: 11% 12% 9% 22%;
  border: 1px solid rgba(255,255,255,.43);
  border-radius: 52% 48% 18% 42% / 44% 36% 64% 56%;
}

.jvf-placeholder-image::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -16px;
  width: 150px;
  height: 210px;
  opacity: .55;
  background:
    radial-gradient(ellipse at 26% 83%, transparent 0 45%, var(--jvf-olive) 46% 47%, transparent 48%),
    radial-gradient(ellipse at 47% 62%, transparent 0 45%, var(--jvf-olive) 46% 47%, transparent 48%),
    radial-gradient(ellipse at 66% 40%, transparent 0 45%, var(--jvf-olive) 46% 47%, transparent 48%);
  transform: rotate(-18deg);
}

.jvf-placeholder-image .wp-block-cover__background { opacity: 0 !important; }
.jvf-placeholder-image .wp-block-cover__inner-container {
  align-self: flex-end;
  max-width: 330px;
  margin: auto 22px 22px auto;
  padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 3px;
  background: rgba(248,245,239,.9);
  color: var(--jvf-plum-deep);
  text-align: left;
  backdrop-filter: blur(8px);
}

.jvf-placeholder-image .wp-block-cover__inner-container p { margin: 0; line-height: 1.4; }
.jvf-placeholder-image .wp-block-cover__inner-container strong { font-size: 1rem; }
.jvf-placeholder-image .wp-block-cover__inner-container small { font-size: .72rem; }

/* Original design PNGs are kept intact; only their photographic regions are
   revealed inside these responsive crop windows. */
.jvf-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1.42;
  margin: 0;
  overflow: hidden;
  border-radius: 48% 3px 3px 48% / 22% 3px 3px 22%;
  background: #d8c7b6;
  box-shadow: 0 18px 50px rgba(52, 33, 48, .12);
}

.jvf-hero-media .jvf-photo img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  transform: none;
}

.jvf-photo--design-01 { --crop-width: 174.1%; --crop-x: -42.56%; --crop-y: -6.44%; }
.jvf-photo--design-02 { --crop-width: 177.5%; --crop-x: -43.65%; --crop-y: -7.68%; }
.jvf-photo--design-03 { --crop-width: 170.4%; --crop-x: -41.31%; --crop-y: -7.16%; }
.jvf-photo--design-04 { --crop-width: 173.6%; --crop-x: -42.38%; --crop-y: -7.62%; }
.jvf-photo--design-05 { --crop-width: 186.4%; --crop-x: -46.36%; --crop-y: -6.15%; }
.jvf-photo--design-06 { --crop-width: 200.4%; --crop-x: -50.10%; --crop-y: -6.51%; }
.jvf-photo--design-07 { --crop-width: 173.9%; --crop-x: -42.48%; --crop-y: -7.29%; }
.jvf-photo--design-08 { --crop-width: 176.6%; --crop-x: -43.36%; --crop-y: -7.03%; }
.jvf-photo--design-09 { --crop-width: 192%; --crop-x: -47.92%; --crop-y: -6.04%; }

.jvf-grid { gap: 18px; }

.jvf-card {
  padding: 27px;
  background: rgba(255,253,249,.92);
  border: 1px solid rgba(75,48,69,.14);
  border-radius: 3px;
  box-shadow: 0 9px 28px rgba(52,33,48,.045);
}

.jvf-card h3 { font-size: clamp(1.18rem, 1.7vw, 1.48rem); }

.jvf-card--service {
  min-height: 410px;
  padding: 91px 27px 28px;
}

.jvf-card--service::before {
  top: 25px;
  left: 27px;
  display: grid;
  width: 49px;
  height: 49px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--jvf-lavender-dark);
  font-family: Georgia, serif;
  font-size: 1.08rem;
  font-style: normal;
}

.jvf-service-01::before { content: "✦"; color: var(--jvf-lavender); }
.jvf-service-02::before { content: "⌁"; color: var(--jvf-olive); }
.jvf-service-03::before { content: "↗"; color: var(--jvf-mustard); }
.jvf-service-04::before { content: "✓"; color: var(--jvf-lavender); }
.jvf-service-05::before { content: "§"; color: var(--jvf-olive); }
.jvf-service-06::before { content: "◎"; color: var(--jvf-mustard); }

.jvf-card--service::after,
.jvf-quote::after,
.jvf-cta::before {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -34px;
  width: 125px;
  height: 150px;
  opacity: .19;
  border-left: 1px solid var(--jvf-olive);
  border-radius: 50%;
  transform: rotate(-20deg);
}

.jvf-card--service h2,
.jvf-card--service h3 {
  position: relative;
  margin-bottom: 26px;
}

.jvf-card--service h2::after,
.jvf-card--service h3::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 0;
  width: 42px;
  height: 2px;
  background: var(--jvf-lavender);
}
.jvf-service-02 h2::after, .jvf-service-02 h3::after,
.jvf-service-05 h2::after, .jvf-service-05 h3::after { background: var(--jvf-olive); }
.jvf-service-03 h2::after, .jvf-service-03 h3::after,
.jvf-service-06 h2::after, .jvf-service-06 h3::after { background: var(--jvf-mustard); }

.jvf-card--service .jvf-checklist { font-size: .91rem; line-height: 1.45; }
.jvf-card--service .jvf-checklist li { padding-top: 6px; padding-bottom: 6px; }
.jvf-card--service p:last-child { margin-top: 20px; }
.jvf-card--service p:last-child a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--jvf-plum);
  border-radius: 2px;
  text-decoration: none;
}

.jvf-number {
  width: 48px;
  height: 48px;
  border-color: var(--jvf-lavender-dark);
  color: var(--jvf-lavender-dark);
}

.jvf-quote {
  overflow: hidden;
  padding: clamp(34px, 4.5vw, 54px) clamp(34px, 6vw, 72px);
  background: var(--jvf-lilac-pale);
  border: 0;
  border-radius: 3px;
  box-shadow: none;
}

.jvf-quote::before {
  content: "“";
  display: block;
  color: var(--jvf-lavender-dark);
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: .5;
}

.jvf-case {
  padding: clamp(38px, 5vw, 58px);
  background: var(--jvf-plum);
  border-radius: 3px;
}

.jvf-cta {
  min-height: 240px;
  padding: clamp(40px, 5vw, 58px) clamp(36px, 7vw, 82px);
  background: var(--jvf-lilac-pale);
  border-radius: 3px;
  color: var(--jvf-plum-deep);
}

.jvf-cta::after {
  right: 58px;
  bottom: -45px;
  width: 175px;
  height: 175px;
  border-width: 34px;
  opacity: .65;
}

.jvf-cta h2 {
  max-width: 720px;
  color: var(--jvf-plum-deep);
  font-size: clamp(2rem, 3.3vw, 3.35rem);
}

.jvf-cta .jvf-lead { max-width: 690px; }
.jvf-cta .wp-block-button__link {
  background: var(--jvf-mustard);
  color: var(--jvf-plum-deep);
}

.jvf-contact-card {
  border-radius: 3px;
  background: var(--jvf-plum);
}

.jvf-form-field input,
.jvf-form-field textarea {
  border-radius: 2px;
  background: var(--jvf-paper);
}

.jvf-site-footer { padding-top: 60px; }
.jvf-site-footer .jvf-wordmark,
.jvf-site-footer .jvf-wordmark a { color: var(--jvf-cream) !important; }

/* Services overview: exact three-column card rhythm from design 03. */
.jvf-page-palvelut .jvf-hero .jvf-kicker,
.jvf-page-ota-yhteytta .jvf-hero .jvf-kicker {
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.jvf-page-palvelut .jvf-hero + .jvf-section {
  padding: 46px 0 22px;
  text-align: center;
}

.jvf-page-palvelut .jvf-hero + .jvf-section::before {
  content: "Palvelut yhdellä silmäyksellä";
  display: block;
  margin-bottom: 12px;
  color: var(--jvf-plum-deep);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.1;
}

.jvf-page-palvelut .jvf-section--mist { background: var(--jvf-cream); }
.jvf-page-palvelut .jvf-section--mist .jvf-grid--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Service detail pages: four situation cards and compact icon-led sections. */
.jvf-service-detail .jvf-hero {
  min-height: 540px;
  padding-top: 66px;
}

.jvf-service-detail .jvf-hero-copy::before {
  content: "Etusivu  ›  Palvelut";
  display: block;
  margin-bottom: 30px;
  color: var(--jvf-lavender-dark);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
}

.jvf-service-detail .jvf-section--mist .jvf-grid--4 .jvf-card {
  min-height: 180px;
  padding: 28px 20px;
  text-align: center;
}

.jvf-service-detail .jvf-section--mist .jvf-grid--4 .jvf-number {
  margin-right: auto;
  margin-left: auto;
}

.jvf-service-detail .jvf-section--white .jvf-grid--3 .jvf-card {
  min-height: 155px;
  text-align: center;
}

/* Contact page: clearer process and editorial form panel from design 04. */
.jvf-page-ota-yhteytta .jvf-section--mist .jvf-grid--3 .jvf-card {
  min-height: 120px;
  padding: 24px;
}

.jvf-page-ota-yhteytta .jvf-grid--4 {
  gap: 0;
  border-top: 1px solid rgba(75,48,69,.17);
}

.jvf-page-ota-yhteytta .jvf-grid--4 .jvf-card {
  min-height: 230px;
  border-width: 0 1px 0 0;
  box-shadow: none;
}

.jvf-page-ota-yhteytta .jvf-grid--4 .jvf-card:last-child { border-right: 0; }
.jvf-page-ota-yhteytta #yhteydenottolomake {
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid rgba(75,48,69,.16);
  background: var(--jvf-paper);
}

@media (max-width: 1020px) {
  :root { --jvf-container: min(100% - 42px, 1180px); }
  .jvf-brand { flex: 1 1 auto; }
  .jvf-header-cta { display: none !important; }
  .jvf-main-nav .wp-block-navigation-item__content { font-size: .78rem; }
  .jvf-page-palvelut .jvf-section--mist .jvf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
  :root { --jvf-container: min(100% - 30px, 1180px); }
  .jvf-site-header { padding: 8px 0; }
  .jvf-header-inner { min-height: 54px; }
  .jvf-brand { min-width: 0; }
  .jvf-wordmark,
  .jvf-wordmark a { font-size: 1.25rem; }
  .jvf-tagline { font-size: .42rem; white-space: nowrap; }
  .jvf-main-nav { flex: 0 0 auto; }
  .jvf-hero { min-height: 0; padding: 46px 0 56px; }
  .jvf-hero-grid { min-height: 0; gap: 34px; }
  .jvf-hero-copy,
  .jvf-hero-media { flex-basis: 100% !important; }
  .jvf-placeholder-image { min-height: 390px !important; border-radius: 46% 3px 3px 46% / 18% 3px 3px 18% !important; }
  .jvf-card--service { min-height: 0; }
  .jvf-page-palvelut .jvf-section--mist .jvf-grid--2 { grid-template-columns: 1fr; }
  .jvf-page-ota-yhteytta .jvf-grid--4 { border-top: 0; }
  .jvf-page-ota-yhteytta .jvf-grid--4 .jvf-card { min-height: 0; border: 1px solid rgba(75,48,69,.14); }
}

@media (max-width: 480px) {
  .jvf-display { font-size: clamp(1.85rem, 7.5vw, 2.5rem); }
  .jvf-title { font-size: 2.05rem; }
  .jvf-section { padding-block: 50px; }
  .jvf-placeholder-image { min-height: 335px !important; }
  .jvf-placeholder-image .wp-block-cover__inner-container { margin: auto 14px 14px; }
  .jvf-cta { padding: 34px 26px; }
}


/* ==========================================================================
   Interactive hover animations
   ========================================================================== */

.jvf-grid { align-items: stretch; }
.jvf-card {
  height: 100%;
  box-sizing: border-box;
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, border-color .3s ease;
}
.jvf-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 26px 48px rgba(46, 30, 43, .16);
  border-color: var(--jvf-lavender);
}

.jvf-number {
  transition: background-color .3s ease, color .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.jvf-card:hover .jvf-number {
  background: var(--jvf-lavender-dark);
  color: var(--jvf-cream);
  transform: scale(1.15);
}

/* Touch devices: :hover doesn't persist, so give the same bounce feedback on tap */
@media (hover: none) {
  .jvf-card:active {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 22px 40px rgba(46, 30, 43, .16);
    border-color: var(--jvf-lavender);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease, border-color .25s ease;
  }
  .jvf-card:active .jvf-number {
    background: var(--jvf-lavender-dark);
    color: var(--jvf-cream);
    transform: scale(1.15);
  }
  .jvf-card--service:active p:last-child a {
    background: var(--jvf-plum);
    color: var(--jvf-cream);
  }
}




.jvf-card--service p:last-child a {
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.jvf-card--service::before {
  transition: color .28s ease;
}
.jvf-card--service:hover::before {
  color: var(--jvf-lavender-dark);
}
.jvf-service-02:hover::before,
.jvf-service-05:hover::before {
  color: var(--jvf-olive-dark);
}
.jvf-service-03:hover::before,
.jvf-service-06:hover::before {
  color: var(--jvf-mustard-dark);
}

.jvf-card--service:hover p:last-child a {
  background: var(--jvf-plum);
  color: var(--jvf-cream);
  transform: translateX(3px);
}

.jvf-footer-links a {
  transition: color .2s ease, padding-left .2s ease;
}
.jvf-footer-links a:hover {
  color: var(--jvf-lavender);
  padding-left: 4px;
}

.jvf-photo img { transition: transform .5s ease; }
.jvf-photo:hover img { transform: scale(1.05); }

.jvf-grid > * {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Cards keep their own light background even inside the lavender band section,
   so their text needs to stay dark for readability (not inherit the section's white). */
.jvf-section--lavender .jvf-card h3,
.jvf-section--lavender .jvf-card h2,
.jvf-section--lavender .jvf-card p,
.jvf-section--lavender .jvf-card li,
.jvf-section--lavender .jvf-card a:not(.jvf-number) {
  color: var(--jvf-plum-deep);
}


/* ==========================================================================
   Brand guide typography (Inter body, Lato Semibold subheadings,
   Playfair Display Semibold main headings, Inter Medium buttons/small text)
   ========================================================================== */
body, p, li, .jvf-checklist, .jvf-form-field input, .jvf-form-field textarea {
  font-family: 'Inter', Arial, sans-serif;
}
h1, .jvf-display {
  font-weight: 600;
}
h2, h3, .jvf-title {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
}
.wp-element-button, .wp-block-button__link, .jvf-kicker, .has-small-font-size,
.jvf-card--service p:last-child a, .jvf-footer-links a {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 500;
}


/* ==========================================================================
   Temporarily hide "Kokemuksia" nav link (page not part of final launch)
   ========================================================================== */
.wp-block-navigation-item:has(> a[href="/kokemuksia/"]) {
  display: none !important;
}
.jvf-footer-links li:has(> a[href="/kokemuksia/"]) {
  display: none !important;
}

/* ==========================================================================
   Mobile menu redesign: elegant, spacious, brand-matched overlay
   ========================================================================== */
.wp-block-navigation__responsive-container-open {
  background: transparent !important;
  border: none !important;
}
.wp-block-navigation__responsive-container-open svg {
  color: var(--jvf-plum-deep);
  width: 26px;
  height: 26px;
}
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--jvf-cream) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding: 100px 32px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  border-bottom: 1px solid rgba(43, 33, 27, 0.1);
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
  border-bottom: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: 1.7rem !important;
  font-weight: 600 !important;
  color: var(--jvf-plum-deep) !important;
  padding: 20px 4px !important;
  display: block !important;
  min-height: 0 !important;
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: var(--jvf-lavender-dark) !important;
  padding-left: 10px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a::after,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover::after {
  display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  background: var(--jvf-plum-deep) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  top: 24px !important;
  right: 24px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  fill: var(--jvf-cream) !important;
  color: var(--jvf-cream) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  animation: jvfMenuItemIn 0.5s cubic-bezier(.25,.8,.25,1) both;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: .06s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .12s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .18s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .24s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .30s; }
@keyframes jvfMenuItemIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Scroll reveal: cards and banners gently pop into view while scrolling
   ========================================================================== */
.jvf-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s cubic-bezier(.25,.8,.25,1), transform .6s cubic-bezier(.25,.8,.25,1);
  transition-delay: calc(var(--jvf-reveal-i, 0) * 80ms);
}
.jvf-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   Mobile header safety padding — prevent the wordmark/tagline from
   rendering flush against (or past) the viewport edge on narrow phones.
   ========================================================================== */
@media (max-width: 782px) {
  .jvf-site-header,
  .jvf-header-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  .jvf-header-inner {
    max-width: 100% !important;
  }
  .jvf-wordmark,
  .jvf-wordmark a {
    letter-spacing: 0.08em !important;
    font-size: 1.05rem !important;
  }
  .jvf-tagline {
    font-size: 0.55rem !important;
    letter-spacing: 0.06em !important;
  }
}


/* ==========================================================================
   Mobile footer safety padding — same fix as the header: WordPress's
   "constrained" layout wasn't giving enough side padding on narrow phones.
   ========================================================================== */
@media (max-width: 782px) {
  .jvf-site-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
  .jvf-footer-grid,
  .jvf-site-footer .wp-block-group.alignwide,
  .jvf-site-footer hr {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* ==========================================================================
   Testimonial carousel: slow, continuous auto-scroll so each quote has
   time to be read, pausing on hover. Cards are duplicated in the markup
   for a seamless infinite loop; reduced-motion users get a static row.
   ========================================================================== */
.jvf-testimonial-carousel {
  overflow: hidden;
  margin: 40px 0 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.jvf-testimonial-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: jvf-testimonial-scroll 90s linear infinite;
}
.jvf-testimonial-carousel:hover .jvf-testimonial-track {
  animation-play-state: paused;
}
@keyframes jvf-testimonial-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.jvf-testimonial-card {
  flex: 0 0 300px;
  background: var(--jvf-paper);
  border: 1px solid rgba(75, 48, 69, .1);
  border-radius: var(--jvf-radius);
  padding: 26px 24px 22px;
  box-shadow: var(--jvf-shadow);
}
.jvf-testimonial-mark {
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--jvf-lavender);
  margin-bottom: 6px;
}
.jvf-testimonial-text {
  font-size: .93rem;
  line-height: 1.55;
  color: var(--jvf-plum-deep);
  min-height: 132px;
}
.jvf-testimonial-name {
  font-weight: 700;
  margin: 14px 0 0;
  color: var(--jvf-plum-deep);
}
.jvf-testimonial-role {
  font-size: .84rem;
  color: var(--jvf-plum);
  margin: 2px 0 0;
  line-height: 1.4;
}
.jvf-testimonial-company {
  font-style: italic;
  opacity: .8;
}
@media (max-width: 600px) {
  .jvf-testimonial-card { flex-basis: 260px; padding: 22px 20px 18px; }
  .jvf-testimonial-text { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .jvf-testimonial-track { animation: none; }
  .jvf-testimonial-carousel { overflow-x: auto; }
}


/* ==========================================================================
   Now that real photos are set on the previously-empty "placeholder" cover
   blocks (front page, Minusta), hide the decorative placeholder-only
   elements (empty white caption box + border/dot patterning) that were
   only meant to dress up the blank gradient before a photo existed.
   ========================================================================== */
.jvf-placeholder-image:has(img.wp-block-cover__image-background)::before,
.jvf-placeholder-image:has(img.wp-block-cover__image-background)::after {
  display: none !important;
}
.jvf-placeholder-image:has(img.wp-block-cover__image-background) .wp-block-cover__inner-container {
  display: none !important;
}
.jvf-placeholder-image:has(img.wp-block-cover__image-background) {
  background: none !important;
}


/* ==========================================================================
   Fix head cropping on the Minusta page's first photo (tall portrait
   photo forced into a wide cover frame was cutting off the top of her
   head/forehead by default center positioning).
   ========================================================================== */
.jvf-placeholder-image img.wp-image-68 {
  object-position: 50% 25%;
}


/* Add a little headroom above her head on the Palvelut page hero photo
   (default center crop was placing the head too close to the top edge). */
.jvf-photo img[src*="palvelut-etusivu"] {
  object-position: 50% 38%;
}


/* Add headroom above her head on the Ota yhteytta hero photo. */
.jvf-photo:has(img[src*="Ota-yhteytta-paakuva"]) {
  aspect-ratio: 1.1;
}
.jvf-photo img[src*="Ota-yhteytta-paakuva"] {
  object-position: 50% 33%;
}

/* ===== 11.10. muutokset ===== */
/* Palvelut-sivun väliotsikko */
.jvf-page-palvelut .jvf-hero + .jvf-section::before { content: "Miten voin auttaa"; }

/* Etusivu: "Mitä tuon mukanani" laventelibandin otsikkona */
.jvf-section--lavender > .jvf-container > .jvf-script { color: var(--jvf-white); text-align: center; margin: 0 0 22px; }

/* Lakisääteiset: 3 korttia ylärivillä, 2 keskitettynä alarivillä */
@media (min-width: 1021px) {
  .jvf-page-lakisaateiset-henkilostoasiat .jvf-section--white .jvf-grid--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .jvf-page-lakisaateiset-henkilostoasiat .jvf-section--white .jvf-grid--3 > .jvf-card { grid-column: span 2; }
  .jvf-page-lakisaateiset-henkilostoasiat .jvf-section--white .jvf-grid--3 > .jvf-card:nth-child(4) { grid-column: 2 / span 2; }
  .jvf-page-lakisaateiset-henkilostoasiat .jvf-section--white .jvf-grid--3 > .jvf-card:nth-child(5) { grid-column: 4 / span 2; }
}
@media (min-width: 783px) and (max-width: 1020px) {
  .jvf-page-lakisaateiset-henkilostoasiat .jvf-section--white .jvf-grid--3 > .jvf-card:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 12px); }
}

/* Henkilöstön kehittäminen: kuva loitonnettu ja keskitetty */
.jvf-page-henkiloston-kehittaminen .jvf-hero .jvf-photo { aspect-ratio: 1.05; }
.jvf-page-henkiloston-kehittaminen .jvf-hero .jvf-photo img { object-position: 50% 55%; }

/* Minusta: päähenkilökuva loitonnettu, luontokuva rajattu */
@media (min-width: 783px) {
  .jvf-page-minusta .jvf-hero-media .jvf-placeholder-image { min-height: 680px !important; }
}
.jvf-placeholder-image img.wp-image-68 { object-position: 50% 16%; }
.jvf-placeholder-image img.wp-image-69 { object-position: 50% 74%; }

/* Minusta: "Oma polku" -osio */
@media (min-width: 783px) {
  .jvf-story-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important; align-items: start !important; }
  .jvf-story-split > .wp-block-column { flex-basis: auto !important; width: auto !important; }
}
.jvf-story-split .jvf-title { margin-bottom: 20px; }
.jvf-story-split .jvf-lead { margin-top: 0; }
.jvf-story p { font-size: 1.06rem; line-height: 1.85; color: var(--jvf-plum); margin: 0 0 1.25em; max-width: 64ch; }
.jvf-story p.jvf-story-closing { font-family: "Playfair Display", Georgia, serif; font-size: 1.35rem; line-height: 1.5; font-weight: 600; color: var(--jvf-plum-deep, var(--jvf-plum)); border-left: 3px solid var(--jvf-mustard); padding-left: 22px; margin-top: 1.9em; }

/* Ota yhteyttä: lomakkeen fontit isommiksi */
.jvf-form-field label { font-size: 1.08rem; font-weight: 600; }
.jvf-form-field input, .jvf-form-field textarea { font-family: inherit; font-size: 1.1rem; line-height: 1.5; padding: 15px 17px; }
.jvf-form .wp-element-button, .jvf-form button { font-family: inherit; font-size: 1.1rem; padding: 16px 32px; }
.jvf-form p, .jvf-form .has-small-font-size { font-size: .95rem !important; line-height: 1.6; }


/* ===== 11.11. Oma polkuni tasapainotettu ===== */
.jvf-story-head{text-align:center;margin-bottom:38px}
.jvf-story-head .jvf-script{margin:0 0 6px}
.jvf-story-head .jvf-title{margin:0 auto;max-width:22ch}
.jvf-story-head .jvf-title::after{content:"";display:block;width:56px;height:3px;background:var(--jvf-mustard);margin:20px auto 0}
.jvf-story-cols{gap:56px !important;align-items:flex-start;margin-bottom:0}
.jvf-story-cols .jvf-story p{max-width:none}
.jvf-story-cols .jvf-story p:last-child{margin-bottom:0}
.jvf-story-end{max-width:760px;margin:46px auto 0}
.jvf-story-end p.jvf-story-closing{margin-top:0;max-width:none}
@media (max-width:781px){.jvf-story-cols{gap:0 !important}.jvf-story-cols .wp-block-column:first-child .jvf-story p:last-child{margin-bottom:1.25em}.jvf-story-end{margin-top:30px}}



/* ===== 11.12. Yhteystietokortti ja lomake (mallikuvan mukaan), karusellin nopeus ===== */
.jvf-contact-head{margin:0 auto 42px;text-align:center}
.jvf-contact-head::after{content:"";display:block;width:56px;height:3px;background:var(--jvf-mustard);margin:20px auto 0}
.jvf-contact-split{align-items:stretch !important;gap:clamp(22px,3vw,34px) !important}
@media (min-width:783px){.jvf-contact-split>.wp-block-column{flex-basis:50% !important;display:flex;flex-direction:column}.jvf-contact-split>.wp-block-column>*{flex:1 1 auto}}
.jvf-contact-card{background:var(--jvf-mist,#eeebe6) !important;color:var(--jvf-plum) !important;padding:clamp(30px,4.4vw,52px) !important;border-radius:var(--jvf-radius);box-sizing:border-box}
.jvf-contact-card h2{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.9rem,3vw,2.5rem);font-weight:500;margin:0 0 14px;color:var(--jvf-plum)}
.jvf-contact-card p{font-size:1.12rem;line-height:1.55;margin:0}
.jvf-contact-card .jvf-ci-role{margin-bottom:26px;padding-bottom:24px;position:relative}
.jvf-contact-card .jvf-ci-role::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:2px;background:var(--jvf-mustard)}
.jvf-contact-card .jvf-ci{position:relative;padding-left:72px;min-height:50px;margin:0 0 18px;display:flex;flex-direction:column;justify-content:center;font-size:1.15rem}
.jvf-contact-card .jvf-ci::before{content:"";position:absolute;left:0;top:0;width:50px;height:50px;border-radius:50%;background:#7b4b5c}
.jvf-contact-card .jvf-ci::after{content:"";position:absolute;left:0;top:0;width:50px;height:50px;background:#fff;-webkit-mask:var(--jvf-ico) center/24px no-repeat;mask:var(--jvf-ico) center/24px no-repeat}
.jvf-contact-card .jvf-ci span{font-size:1rem;color:rgba(46,30,43,.62);margin-top:2px}
.jvf-contact-card .jvf-ci a{color:var(--jvf-plum);text-decoration:underline;text-underline-offset:3px}
.jvf-ci--mail{--jvf-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
.jvf-ci--phone{--jvf-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E")}
.jvf-ci--place{--jvf-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.jvf-contact-card .jvf-ci--in::after{-webkit-mask:none;mask:none;background:none;color:#fff;font:700 1.45rem/50px "Lato",Arial,sans-serif;text-align:center;width:50px;content:"in"}
#yhteydenottolomake{background:var(--jvf-white);border-radius:var(--jvf-radius);box-shadow:0 14px 40px rgba(46,30,43,.07);padding:clamp(28px,4vw,46px);box-sizing:border-box}
#yhteydenottolomake .jvf-title{margin-top:0}
.jvf-form-field:has(input[name="company"]) label::after,.jvf-form-field:has(input[name="phone"]) label::after{content:" (valinnainen)";font-weight:400}
.jvf-form .wp-element-button,.jvf-form button{width:100%;order:1}
.jvf-form button::after{content:"\00a0\00a0\2192"}
.jvf-form .has-small-font-size{order:2;margin:0}
.jvf-testimonial-track{animation-duration:170s}
@media (max-width:781px){.jvf-testimonial-track{animation-duration:210s}.jvf-contact-card{height:auto}}



/* ===== 11.13. Oma polkuni: automaattisesti tasapainotettu kaksipalstainen teksti ===== */
@media (min-width:783px){.jvf-story-flow{column-count:2;column-gap:64px;column-fill:balance}.jvf-story-flow p{orphans:3;widows:3}}
.jvf-story-flow p:last-child{margin-bottom:0}


@media (min-width:783px){.jvf-story-flow p{orphans:2 !important;widows:2 !important}}


/* ===== 11.14. Palvelut: "Miten voin auttaa" omalla taustavärillä ===== */
.jvf-page-palvelut .jvf-hero + .jvf-section{background:var(--jvf-paper)}



/* ===== 11.15. Palvelut: intro + palvelukortit samaa taustaa, hero erillinen ===== */
.jvf-page-palvelut .jvf-hero + .jvf-section,
.jvf-page-palvelut .jvf-hero + .jvf-section + .jvf-section{background:#dcd7cd}
.jvf-page-palvelut .jvf-hero + .jvf-section{padding-bottom:0}


.jvf-page-palvelut .jvf-hero + .jvf-section + .jvf-section{margin-block-start:0 !important}
.jvf-page-palvelut .jvf-hero + .jvf-section{margin-block-start:0 !important;padding-bottom:6px}


/* ===== 11.16. Palvelut: "Miten voin auttaa" muun sivuston otsikkotyyliin ===== */
.jvf-page-palvelut .jvf-hero + .jvf-section{text-align:left;padding:clamp(56px,7vw,84px) 0 0}
.jvf-page-palvelut .jvf-hero + .jvf-section::before{content:none !important;display:none}
.jvf-page-palvelut .jvf-hero + .jvf-section .jvf-lead{max-width:62ch;margin:18px 0 0}
.jvf-page-palvelut .jvf-hero + .jvf-section + .jvf-section{padding-top:38px}



/* ===== 11.17. Palvelut: Miten voin auttaa -tausta Minusta-sivun "Mitä tuon mukanani" -osion mukaan ===== */
.jvf-page-palvelut .jvf-hero + .jvf-section,
.jvf-page-palvelut .jvf-hero + .jvf-section + .jvf-section{background:#f0ede7 !important}



/* ===== 11.18. Ota yhteyttä: viimeistely esimerkkikuvan mukaan ===== */
.jvf-contact-head{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:clamp(2.2rem,4vw,3.2rem);letter-spacing:-.01em;color:var(--jvf-plum)}
.jvf-contact-head::after{width:66px;height:2px}
.jvf-contact-card{background:linear-gradient(160deg,#f3f0eb,#efebe5) !important}
.jvf-contact-card .jvf-ci-role{font-weight:400;color:rgba(46,30,43,.88)}
.jvf-contact-card .jvf-ci-role::after{height:2px;width:70px}
#yhteydenottolomake .jvf-title{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.01em}
.jvf-form-field label{font-size:1rem !important;font-weight:700 !important}
.jvf-form-field:has(input[name="company"]) label::after,.jvf-form-field:has(input[name="phone"]) label::after{font-weight:400}
.jvf-form-field input,.jvf-form-field textarea{border:1px solid #d8d3cb !important;border-radius:3px !important;background:#fffdfa;padding:14px 16px !important}
.jvf-form-field textarea{min-height:130px}
.jvf-form .wp-element-button,.jvf-form button{border-radius:3px !important;padding:19px 24px !important;font-size:1.15rem !important;letter-spacing:.01em}
.jvf-form .has-small-font-size{color:#857d74 !important;font-size:1rem !important;line-height:1.65}



/* ===== 11.19. Etusivu: esittelyosio erottuu herosta ===== */
.jvf-page-etusivu .jvf-hero + .jvf-section{background:var(--jvf-paper)}



/* ===== 11.20. Etusivu: Kokemuksia yhteistyöstä omalla taustasävyllä ===== */
.jvf-page-etusivu .jvf-section:has(.jvf-testimonial-carousel){background:#f0ede7}



/* ===== 11.21. Etusivu: Kokemuksia + loppu-CTA samalla pohjalla ===== */
.jvf-page-etusivu .jvf-section:has(.jvf-testimonial-carousel) + .jvf-section--compact{background:#f0ede7;margin-block-start:0 !important}
.jvf-page-etusivu .jvf-section:has(.jvf-testimonial-carousel){padding-bottom:12px}



/* ===== 11.22. Palvelut-pudotusvalikko ===== */
.jvf-main-nav .wp-block-navigation__submenu-icon{margin-left:5px;width:.7em}
.jvf-main-nav .wp-block-navigation__submenu-icon svg{stroke:var(--jvf-plum-deep);width:.7em;height:.7em}
@media (min-width:600px){
  .jvf-main-nav .wp-block-navigation__submenu-container{
    background:var(--jvf-paper,#fffdf9);border:1px solid rgba(46,30,43,.08);border-radius:12px;box-shadow:0 18px 44px rgba(46,30,43,.14);
    padding:10px 8px;min-width:290px;top:100% !important;left:-14px;margin-top:6px}
  .jvf-main-nav .wp-block-navigation__submenu-container::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .jvf-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
    display:block;padding:11px 16px;border-radius:8px;font-size:.92rem;font-weight:600;color:var(--jvf-plum-deep);white-space:nowrap}
  .jvf-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after{display:none}
  .jvf-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
  .jvf-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus{background:#f0ede7;color:var(--jvf-plum-deep)}
}
.jvf-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{padding-left:18px;gap:2px}
.jvf-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{font-size:1rem;font-weight:600;padding:8px 0}



/* ===== 11.23. Mobiilivalikon alavalikko siistimmäksi ===== */
.jvf-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{align-items:center !important;text-align:center;padding:2px 0 10px !important;gap:0;border:0;box-shadow:none;background:transparent}
.jvf-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{width:100%;border:0}
.jvf-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{font-family:inherit !important;font-size:1rem !important;font-weight:500 !important;padding:9px 0 !important;text-align:center;justify-content:center;color:var(--jvf-plum-deep)}
.jvf-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon{display:none}

/* 11.24 Käsinkirjoitusotsikot suoriksi */
.jvf-script{transform:none !important}

/* 11.25 Kokemuksia-otsikko vasempaan reunaan kickerin kanssa */
.jvf-section:has(.jvf-testimonial-carousel) .jvf-title{text-align:left !important;max-width:none}

/* 12. Artikkelit (HR ja johtaminen) */
.jvf-articles-section{background:#f0ede7}
.jvf-articles .wp-block-post-template{gap:28px;margin:0;padding:0;list-style:none}
.jvf-article-card{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--jvf-paper);border:1px solid rgba(46,30,43,.1);border-radius:var(--jvf-radius);box-shadow:0 10px 32px rgba(46,30,43,.055);transition:transform .35s ease,box-shadow .35s ease}
.jvf-article-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(46,30,43,.1)}
.jvf-article-card .wp-block-post-featured-image{margin:0;overflow:hidden}
.jvf-article-card .wp-block-post-featured-image img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s ease}
.jvf-article-card:hover .wp-block-post-featured-image img{transform:scale(1.04)}
.jvf-article-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 28px}
.jvf-article-date{margin:0 0 10px;font-size:.85rem;letter-spacing:.05em;color:var(--jvf-lavender-dark)}
.jvf-article-title{margin:0 0 12px;font-size:clamp(1.25rem,1.9vw,1.55rem);line-height:1.22;color:var(--jvf-plum)}
.jvf-article-title a{color:inherit;text-decoration:none}
.jvf-article-title a:hover{color:var(--jvf-lavender-dark)}
.jvf-article-excerpt{display:flex;flex-direction:column;flex:1;margin:0;color:rgba(43,33,27,.78);font-size:.98rem;line-height:1.6}
.jvf-article-excerpt p{margin:0 0 18px}
.jvf-article-excerpt .wp-block-post-excerpt__more-link{margin-top:auto;font-weight:800;color:var(--jvf-plum);text-decoration:underline;text-decoration-color:var(--jvf-mustard);text-decoration-thickness:2px;text-underline-offset:6px}
.jvf-article-excerpt .wp-block-post-excerpt__more-link:hover{color:var(--jvf-lavender-dark)}
.jvf-article-pagination{margin-top:48px;gap:18px}
.jvf-article-pagination a{color:var(--jvf-plum);font-weight:700}
@media (max-width:1000px){.jvf-articles .wp-block-post-template.is-layout-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:640px){.jvf-articles .wp-block-post-template.is-layout-grid{grid-template-columns:1fr !important}}
/* Yksittäinen artikkeli */
.jvf-article-head{padding-bottom:0}
.jvf-article-narrow{width:min(760px,calc(100% - 40px));margin-inline:auto}
.jvf-article-head .jvf-kicker a{color:inherit;text-decoration:none}
.jvf-article-head .jvf-kicker a:hover{text-decoration:underline}
.jvf-article-h1{margin-top:6px;font-size:clamp(2.1rem,4.6vw,3.4rem) !important;line-height:1.1}
.jvf-article-head .jvf-article-date{margin:18px 0 0}
.jvf-article-hero{width:min(1000px,calc(100% - 40px));margin:44px auto 0}
.jvf-article-hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--jvf-radius);box-shadow:0 18px 48px rgba(46,30,43,.12)}
.jvf-article-content-section{padding-top:clamp(40px,5vw,64px)}
.jvf-article-content{font-size:1.1rem;line-height:1.8}
.jvf-article-content .wp-block-post-content>*+*{margin-top:1.1em}
.jvf-article-content h2{margin-top:2em;font-size:clamp(1.55rem,2.8vw,2rem);line-height:1.2}
.jvf-article-content h3{margin-top:1.8em;font-size:clamp(1.25rem,2.2vw,1.5rem)}
.jvf-article-content a{color:var(--jvf-lavender-dark);text-decoration-thickness:1px;text-underline-offset:3px}
.jvf-article-content img{border-radius:var(--jvf-radius)}
.jvf-article-content blockquote{margin:1.8em 0;padding:4px 0 4px 24px;border-left:3px solid var(--jvf-mustard);font-size:1.15rem}
.jvf-article-content ul,.jvf-article-content ol{padding-left:1.4em}
.jvf-article-back{margin-top:2.6em;padding-top:1.4em;border-top:1px solid rgba(46,30,43,.12)}
.jvf-article-back a{font-weight:800;color:var(--jvf-plum);text-decoration:underline;text-decoration-color:var(--jvf-mustard);text-decoration-thickness:2px;text-underline-offset:6px}
.jvf-article-head,.jvf-article-content-section{background:var(--jvf-paper)}
.wp-site-blocks>main{margin-block-start:0 !important}
.jvf-article-head + .jvf-article-content-section{margin-block-start:0 !important}

/* 11.26 Palvelukortit: "Lue lisää" -painikkeet samalle korkeudelle */
.jvf-card--service{display:flex;flex-direction:column}
.jvf-card--service > p:last-child{margin-top:auto !important;padding-top:1.25rem}