/* =========================================================
   ICS — OpenVoice AI Phone System page
   Page-specific styles. Loaded AFTER style.css, which provides
   the design tokens (:root), fonts, .container, .btn and the
   base .section-title / .body-text helpers.
   Only the sections unique to this page live here.
   ========================================================= */

/* local path shorthands:  images/openvoice/… */

/* =========================================================
   HERO  (centered variant)
   ========================================================= */
:root{
  --container: 1248px;
  --red: #CE0E2D;
}
.ai-page{
  font-family: 'gt_walsheim_proregular', arial;
}
.ai-page .section-title{
	letter-spacing: 0 !important;
	line-height: 1.3;
}
.ov-hero {
  position: relative;
  background: var(--navy);
  overflow: hidden;
}
.ov-hero__media {
  position: absolute;
  inset: 0;
  background: url("images/openvoice/hero-bg.jpeg") center right / cover no-repeat;
}

.ov-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--white);
  padding: clamp(150px, 53.51px + 13.78vw, 252px) clamp(18px, 11px + 1vw, 24px) clamp(50px, 10.27px + 5.68vw, 92px) !important;
}
.ov-hero__title {
  font-family: 'fjallaoneregular';
  font-weight: normal;
  font-size: clamp(35px, 3.50px + 4.50vw, 62px);
  line-height: 1.37;
  margin: 0 0 clamp(15px, -8.33px + 3.33vw, 35px);
}
.ov-hero__lead {
  max-width: 1120px;
  margin: 0 auto clamp(20px, -22px + 6vw, 56px);
  font-size: 18px;
  line-height: 1.77777777778;
  font-family: 'gt_walsheim_promedium', arial;
  font-weight: 500;
  text-transform: capitalize;
}
.ov-hero__btn { 
	font-size: 16px !important;
    padding: 18px 42px !important;
    text-transform: uppercase;
    font-family: 'gt_walsheim_probold', arial !important;
    font-weight: 700 !important;
	letter-spacing: 0.05em;
}

/* =========================================================
   INTRO  (text + image split, white background)
   Reuses the shared .split component from style.css.
   ========================================================= */
.ov-intro { background: var(--white); padding: clamp(50px, -17.67px + 9.67vw, 108px) 0 clamp(50px, -31.67px + 11.67vw, 120px); }
.ov-intro .split { gap: clamp(20px, -41.83px + 8.83vw, 73px); align-items: center; }
.ov-intro .split__text { max-width: 686px; }
.ov-intro .split__text .section-title {
  font-family: 'gt_walsheim_promedium', arial;
  font-size: clamp(28px, 7px + 3vw, 46px);
  line-height: 1.3;
  margin: 0 0 clamp(15px, -16.50px + 4.50vw, 42px);
}
.ov-intro .split__media { flex: 0 0 441px; max-width: 441px; }
.ov-intro .split__media img { height: 385px; border-radius: 6px; }
.ov-intro .split__text p {line-height: 1.77;}

/* =========================================================
   FEATURE GRID  ("Help Customers…" — 2×3 with dividers)
   ========================================================= */
.ov-features { background: var(--band); padding: clamp(50px, -14.17px + 9.17vw, 105px) 0 clamp(50px, -22.33px + 10.33vw, 112px); }
.ov-features__head { text-align: center; max-width: 1000px; margin: 0 auto clamp(25px, 7.50px + 2.50vw, 40px); }
.ov-features__head .section-title { 
	margin: 0 0 clamp(15px, -27px + 6vw, 51px);  
	font-family: 'gt_walsheim_promedium', arial;
  	font-size: clamp(28px, 7px + 3vw, 46px);
}
.ov-features__sub {
  font-size: 18px;
  line-height: 1.66;
  color: var(--body);
  margin: 0;
}

.ov-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 0;
}
.ov-row+.ov-row{
	padding-top: clamp(25px, 5.17px + 2.83vw, 42px);
	  border-top: 1px solid var(--divider);
	margin-top: clamp(25px, 5.17px + 2.83vw, 42px);
}
.ov-item { padding-left: 45px; }
/* dividers — vertical between the two columns, horizontal between rows */
.ov-item:nth-child(odd)  { border-right: 1px solid var(--divider); padding-left: 0; padding-right: 45px;}

.ov-item__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
}
.ov-item__icon { width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; }
.ov-item__title {
  font-family: 'gt_walsheim_promedium', arial;
  color: var(--blue);
  font-size: clamp(22px, 15px + 1vw, 28px);
  line-height: 1.2;
  margin: 0;
}
.ov-item__text {
  font-size: 18px;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}

/* =========================================================
   BENEFITS  ("What Better Communication…" — infographic + 2×2)
   ========================================================= */
.ov-benefits { background: var(--white); padding: clamp(50px, -3.67px + 7.67vw, 96px) 0 clamp(50px, -21.17px + 10.17vw, 111px); text-align: center; }
.ov-benefits .section-title{
	font-family: 'gt_walsheim_promedium', arial;
  	font-size: clamp(28px, 7px + 3vw, 46px);
}
.ov-benefits__sub {
  font-family: 'gt_walsheim_promedium', arial;
  max-width: 1100px;
  margin: 0 auto clamp(30px, -34.17px + 9.17vw, 85px);
  font-size: clamp(20px, 17.67px + 0.33vw, 22px);
  line-height: 1.45;
  color: var(--body);
}
.ov-benefits__graphic {
  width: 100%;
  max-width: 737px !important;
  height: auto;
  margin: 0 auto clamp(20px, -32.50px + 7.50vw, 65px);
}
.ov-benefits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(20px, -18.50px + 5.50vw, 53px);
  row-gap: clamp(20px, -11.50px + 4.50vw, 47px);
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
}
.ov-benefit__title {
  font-family: 'gt_walsheim_promedium', arial;
  font-weight: 500;
  font-size: clamp(22px, 15px + 1vw, 28px);
  line-height: 1.53;
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  position: relative;
  padding-left: 27px;
}
.ov-benefit__title::before {
  content: "";
  flex: 0 0 auto;
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #FF7C6D;
  top: clamp(9px, 4.33px + 0.67vw, 13px);
  position: absolute;
  left: 0;
}
.ov-benefit:nth-child(2) .ov-benefit__title::before{
	border-left-color: #5090BD !important;
}
.ov-benefit:nth-child(3) .ov-benefit__title::before{
	border-left-color: #CE0E2D !important;
}
.ov-benefit:nth-child(4) .ov-benefit__title::before{
	border-left-color: #0A4772 !important;
}

.ov-benefit__text {
  font-size: 18px;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}

/* =========================================================
   STEPS  ("Get the Guidance…" — 4 icon rows with dividers)
   ========================================================= */
.ov-steps { background: #F5F5F5; padding: clamp(50px, -6px + 8vw, 98px) 0 clamp(50px, -31.67px + 11.67vw, 120px); }
.ov-steps__head { text-align: center; margin: 0 auto clamp(30px, 0.83px + 4.17vw, 55px); }
.ov-steps__head .section-title { 
	margin: 0 0 clamp(20px, -22px + 6vw, 56px);     
	font-family: 'gt_walsheim_promedium', arial;
    font-size: clamp(28px, 7px + 3vw, 46px);
}
.ov-steps__sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--body);
  margin: 0;
}
.ov-steps__list { border-top: 1px solid #C6C8C9; }
.ov-step {
  display: grid;
  grid-template-columns: 100px 290px 1fr;
  align-items: center;
  gap: clamp(20px, -3.33px + 3.33vw, 40px);
  padding: clamp(20px, -3.33px + 3.33vw, 40px) 0px;
  border-bottom: 1px solid #C6C8C9;
}
.ov-step__icon { width: 94px; height: 94px; object-fit: contain; }
.ov-step__title {
  font-family: 'gt_walsheim_promedium', arial;
  font-weight: 700;
  color: var(--blue);
  font-size: clamp(23px, 14.83px + 1.17vw, 30px);
  line-height: 1.33;
  margin: 0;
}
.ov-step__text {
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  color: #353440;
}

/* =========================================================
   FAQ  (boxed accordion variant)
   Reuses the shared .accordion markup + openvoice.js toggle,
   restyled to match the boxed cards in the design.
   ========================================================= */
.ov-faq { background: var(--white); padding: clamp(50px, -7.17px + 8.17vw, 99px) 0; }
.ov-faq__title { 
	margin-bottom: clamp(30px, -10.83px + 5.83vw, 65px); 
	font-family: 'gt_walsheim_promedium', arial;
    font-size: clamp(28px, 7px + 3vw, 46px);
}

.accordion--boxed { border-top: 0; }
.accordion--boxed .accordion__item {
  margin-bottom: clamp(20px, 11.83px + 1.17vw, 27px);
  transition: border-color .2s ease;
	border-bottom: none;
}
.accordion--boxed .accordion__item:last-child {
	margin-bottom: 0 !important;
}
.accordion--boxed .accordion__head {  border: 1px solid #D8D8D8;   border-radius: 8px; padding: clamp(15px, 8.38px + 0.95vw, 22px) clamp(20px, 4.83px + 2.17vw, 33px); }
.accordion--boxed .accordion__q {
  font-family: 'gt_walsheim_promedium',
  color: var(--body);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.35;
}
.is-open .accordion__panel{
  border-radius: 8px;	
  margin-top: clamp(15px, 5.67px + 1.33vw, 23px);
  margin-bottom: clamp(30px, 10.17px + 2.83vw, 47px);
}
/* round icon badge with chevron */
.accordion--boxed .accordion__icon {
  width: 37px; height: 37px;
  background: var(--red);
}
.accordion--boxed .accordion__icon::before {
	width: 16px;
    height: 16px;
    border: none;
    background-image: url('/wp-content/uploads/2026/10/arrow.svg');
    transform: translate(-50%, -50%);
    background-size: 16px !important;
}
.accordion__item.is-open .accordion__icon::before {
    transform: translate(-50%, -50%) rotate(180deg);
}
/* open state — navy header bar, blue up-chevron */
.accordion--boxed .accordion__item.is-open { border: none;}
.accordion--boxed .accordion__item.is-open .accordion__head {
  background: var(--blue);
  border-bottom: 0;
}
.accordion--boxed .accordion__item.is-open .accordion__q { arial; color: var(--white); }
.accordion--boxed .accordion__item.is-open .accordion__icon { background: #2f6a99; }
.accordion--boxed .accordion__item.is-open .accordion__panel {
  background: var(--band);
  max-height: 500px;
  opacity: 1;
}
.accordion--boxed .accordion__panel .body-text { color: var(--body); }

/* =========================================================
   CTA  (contained rounded box with skyline background)
   ========================================================= */
.ov-cta-wrap { background: var(--white); padding: 0 0 clamp(50px, -31.67px + 11.67vw, 120px); }
.ov-cta {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: url("images/openvoice/cta-bg.jpeg") center / cover no-repeat;
}

.ov-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--white);
  padding: 78px 24px 82px;
  max-width: 990px;
  margin: 0 auto;
}
.ov-cta__title {
    font-family: 'gt_walsheim_probold', arial;
    font-size: clamp(28px, 7px + 3vw, 46px);
    margin: 0 0 clamp(25px, 2.83px + 3.17vw, 44px);
}
.ov-cta__text { font-size: 18px; line-height: 1.55; margin: 0 auto 12px; }
.ov-cta__trial {
  font-family: 'gt_walsheim_promedium', arial;
  font-size: 20px;
  line-height: 2.2;
  margin: 0 0 clamp(15px, 1px + 2vw, 27px);
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.ov-cta-wrap .btn--red{
	font-size: 16px !important;
    padding: 18px 42px !important;
    text-transform: uppercase;
    font-family: 'gt_walsheim_probold', arial !important;
    font-weight: 700 !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
  .ov-intro .split { flex-direction: column-reverse; gap: 34px; align-items: stretch; }
  .ov-intro .split__media { flex-basis: auto; max-width: none; }
  .ov-intro .split__media img { height: auto; aspect-ratio: 5 / 4; }
	.ov-intro .split__text{max-width: 100%}
.ov-row+.ov-row {
    padding-top: 0;
    border-top: none;
    margin-top: 0;
}
  .ov-row { grid-template-columns: 1fr; }
  .ov-item { padding: 30px 0 !important; border-bottom: 1px solid var(--divider); border-right: none !important;}

  .ov-benefits__grid { grid-template-columns: 1fr; column-gap: 0; }

  .ov-step {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "icon title"
      "text text";
  }
  .ov-step__icon { grid-area: icon; width: 56px; height: 56px; }
  .ov-step__title { grid-area: title; align-self: center; font-size: 23px; }
  .ov-step__text { grid-area: text; }
}

@media (max-width: 767px) {
  .ov-hero__inner { padding-block: 50px !important; }
  .ov-features, .ov-benefits, .ov-steps, .ov-faq { padding: 50px 0; }
  .ov-benefits__graphic { margin-bottom: 40px; }
  .ov-cta__inner { padding: 48px 20px 52px; }
  .ov-hero__btn,
  .ov-cta .btn--red { display: block; width: 100%; }
}

/* =========================================================
   ACF / WYSIWYG COMPATIBILITY
   The dynamic template (template-openvoice.php) outputs WYSIWYG
   and textarea fields as wpautop <p> inside these containers.
   Mirror the single-paragraph styling so dynamic output matches
   the static markup (no stray top/bottom margins).
   ========================================================= */
.ov-hero__lead p,
.ov-features__sub p,
.ov-steps__sub p,
.ov-benefits__sub p,
.ov-item__text p,
.ov-step__text p,
.ov-benefit__text p,
.ov-cta__text p { margin: 0 0 16px; }

.ov-hero__lead p:last-child,
.ov-features__sub p:last-child,
.ov-steps__sub p:last-child,
.ov-benefits__sub p:last-child,
.ov-item__text p:last-child,
.ov-step__text p:last-child,
.ov-benefit__text p:last-child,
.ov-cta__text p:last-child { margin-bottom: 0; }

/* inline links inside dynamic rich text */
.ov-item__text a,
.ov-step__text a,
.ov-benefit__text a,
.ov-cta__text a,
.ov-hero__lead a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.btn--red{
	transition: .4s all ease-in-out;
}
.btn--red:hover {
    background: #ffffff !important;
    color: var(--red) !important;
}