/* VAYRENZA MOTION SYSTEM — restrained luxury interaction language */
:root{
  --vz-motion-fast:220ms;
  --vz-motion-base:360ms;
  --vz-motion-ease:cubic-bezier(.2,.7,.2,1);
  --vz-motion-lift:-4px;
  --vz-motion-bg:rgba(255,255,255,.24);
  --vz-motion-line:rgba(23,23,22,.72);
}

/* Shared interactive card treatment */
#solutions .grid>div,
#insights .insights-grid>article,
#about .about-grid>article{
  position:relative;
  transition:
    transform var(--vz-motion-base) var(--vz-motion-ease),
    background-color var(--vz-motion-base) var(--vz-motion-ease),
    box-shadow var(--vz-motion-base) var(--vz-motion-ease),
    border-color var(--vz-motion-base) var(--vz-motion-ease);
}

#solutions .grid>div::before,
#insights .insights-grid>article::before,
#about .about-grid>article::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:0;
  height:1px;
  background:var(--vz-motion-line);
  transition:width var(--vz-motion-base) var(--vz-motion-ease);
}

#solutions .grid>div:hover,
#insights .insights-grid>article:hover,
#about .about-grid>article:hover{
  transform:translateY(var(--vz-motion-lift));
  background:var(--vz-motion-bg);
  box-shadow:0 16px 34px rgba(30,27,22,.035);
}

#solutions .grid>div:hover::before,
#insights .insights-grid>article:hover::before,
#about .about-grid>article:hover::before{
  width:100%;
}

/* B2B solution identifiers — restrained SVG line icons using the VAYRENZA deep green. */
#solutions .solution-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:68px;
  height:68px;
  margin:10px auto 22px;
  border:1px solid rgba(31,90,54,.14);
  border-radius:50%;
  background:rgba(31,90,54,.035);
  color:#1F5A36;
  transition:transform var(--vz-motion-base) var(--vz-motion-ease),background-color var(--vz-motion-base) var(--vz-motion-ease),border-color var(--vz-motion-base) var(--vz-motion-ease);
}
#solutions .solution-icon svg{
  width:36px;
  height:36px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
#solutions .grid>div:hover .solution-icon{
  transform:translateY(2px);
  background:rgba(31,90,54,.055);
  border-color:rgba(31,90,54,.22);
}
#solutions .grid>div .solution-icon+h3{margin-top:0}

/* Animated cards — center the complete content block and keep every line safely inside its card. */
.cards article,
#solutions .grid>div,
#insights .insights-grid>article,
#about .about-grid>article{
  text-align:center;
  overflow:hidden;
}
.cards article>*,
#solutions .grid>div>*,
#insights .insights-grid>article>*,
#about .about-grid>article>*{
  width:100%;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
  text-align:center;
  overflow-wrap:anywhere;
  word-break:normal;
}
#solutions .grid>div,
.cards article{
  padding-left:24px;
  padding-right:24px;
}
#solutions .grid h3,
#solutions .grid p,
.cards h3,
.cards p{max-width:100%}

/* Editorial cards — taller, calmer proportions with true horizontal + vertical centering. */
#about .about-grid,
#insights .insights-grid{
  align-items:stretch;
}
#about .about-grid>article,
#insights .insights-grid>article{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-height:360px;
  padding:54px 42px;
  margin-left:0;
  margin-right:0;
}
#about .about-grid>article .eyebrow,
#insights .insights-grid>article .eyebrow{
  margin-top:0;
}
#about .about-grid>article>p:last-child,
#insights .insights-grid>article>p:last-child{
  margin-bottom:0;
}

/* Contact CTA inherits the same restrained lift language */
#contact .btn.primary{
  transition:
    transform var(--vz-motion-fast) var(--vz-motion-ease),
    background-color var(--vz-motion-fast) var(--vz-motion-ease),
    border-color var(--vz-motion-fast) var(--vz-motion-ease),
    box-shadow var(--vz-motion-fast) var(--vz-motion-ease);
}
#contact .btn.primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(30,27,22,.06);
}

/* Header links: consistent fine underline reveal */
.site-header nav a,
.search-link,
.header-actions .quote{position:relative}
.search-link::after,
.header-actions .quote::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-7px;
  width:0;
  height:1px;
  background:#171716;
  transition:width var(--vz-motion-base) var(--vz-motion-ease);
}
.search-link:hover::after,
.header-actions .quote:hover::after{width:100%}

/* Keep core collection as the reference interaction, but harmonize easing */
.cards article{
  transition:
    transform var(--vz-motion-base) var(--vz-motion-ease),
    background-color var(--vz-motion-base) var(--vz-motion-ease),
    box-shadow var(--vz-motion-base) var(--vz-motion-ease);
}
.cards article:hover{box-shadow:0 16px 34px rgba(30,27,22,.045)}
.cards article::before{transition:width var(--vz-motion-base) var(--vz-motion-ease)}

/* No decorative hover movement on primary editorial headings or body copy. */
.hero h1,
.section h2,
.section>.intro,
#custom>p,
#about>.split>p{transform:none}

/* Touch devices should stay calm and predictable. */
@media(hover:none){
  #solutions .grid>div:hover,
  #insights .insights-grid>article:hover,
  #about .about-grid>article:hover,
  .cards article:hover,
  #contact .btn.primary:hover{
    transform:none;
    box-shadow:none;
  }
  #solutions .grid>div:hover .solution-icon{transform:none}
}

@media(max-width:1100px){
  #solutions .grid>div,
  .cards article{
    padding-left:18px;
    padding-right:18px;
  }
  #solutions .solution-icon{width:62px;height:62px;margin-bottom:18px}
  #solutions .solution-icon svg{width:33px;height:33px}
  #about .about-grid>article,
  #insights .insights-grid>article{min-height:330px;padding:46px 28px}
}
@media(max-width:700px){
  #about .about-grid>article,
  #insights .insights-grid>article{min-height:300px;padding:42px 24px}
}

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