/*!
 * Wise Consulting Enterprise - Hero + Benefits Strip
 * Styles for the WCE Hero Banner Elementor widget.
 * Brand tokens in the .wce block below are overridden per-widget by
 * Elementor's generated CSS (Style tab > Brand Colours / Layout).
 */

.wce{
  /* ---- BRAND TOKENS - edit these only ---- */
  --wce-navy:#0B1B3F;        /* headline + dark text */
  --wce-navy-icon:#12306E;   /* icon strokes/fills (SVGs use currentColor) */
  --wce-blue:#1552C9;        /* highlighted words, strip headings */
  --wce-blue-deep:#0E3E9E;   /* the arc behind the photo */
  --wce-blue-light:#2073E6;  /* arc highlight */
  --wce-gold:#F8C21A;        /* primary button, light end */
  --wce-gold-dark:#EFA800;   /* primary button, dark end */
  --wce-body:#3C4658;        /* paragraph text */
  --wce-line:#E6ECF5;        /* dividers */
  --wce-pill-bg:#E8F0FD;
  --wce-pill-text:#1B4EA8;
  --wce-promise-bg:#FEFBF0;
  --wce-promise-border:#F3C33F;
  --wce-promise-divider:#E3D19A;
  --wce-trust-text:#41506B;

  /* ---- TYPE ---- */
  /* inherit = use the site font. Or hard-code, e.g. "Poppins", sans-serif */
  --wce-font-heading:inherit;
  --wce-font-body:inherit;

  --wce-max:1280px;          /* match your Elementor content width */
  --wce-hero-height:90vh;    /* hero + strip target height. Lower it if you run
                                a tall fixed header, e.g. calc(100vh - 120px) */
  --wce-strip-overlap:64px;  /* how far the white cards pull up over the hero */

  font-family:var(--wce-font-body);
  color:var(--wce-body);
  line-height:1.5;
}

.wce *{box-sizing:border-box;}
.wce h1,.wce h2,.wce h3,.wce p{margin:0;padding:0;}

.wce-container{
  max-width:var(--wce-max);
  margin:0 auto;
  padding:0 24px;
}

/* screen-reader-only heading - keeps the h1 > h2 > h3 order valid */
.wce-sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

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

/* wrapper holds hero + strip to one screen height */
.wce-hero-wrap{
  display:flex;
  flex-direction:column;
  min-height:var(--wce-hero-height);
}

.wce-hero{
  position:relative;
  background:#fff;
  padding:48px 0 88px;
  overflow:hidden;
  flex:1 1 auto;          /* absorbs the leftover height */
  display:flex;
  align-items:center;     /* keeps copy centred as the block grows */
}

.wce-hero > .wce-container{width:100%;}

.wce-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:40px;
  align-items:center;
}

.wce-copy{
  max-width:620px;
}

.wce-eyebrow{
  display:inline-block;
  background:var(--wce-pill-bg);
  color:var(--wce-pill-text);
  font-size:13px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  padding:9px 16px;
  border-radius:6px;
  margin-bottom:22px;
}

.wce-title{
  font-family:var(--wce-font-heading);
  /* capped at 60px so "Denied for a Home," always fits one line in the column */
  font-size:clamp(38px,4.4vw,60px);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--wce-navy);
  margin-bottom:22px !important;
}

.wce-title .wce-accent{color:var(--wce-blue);}

.wce-text{
  font-size:19px;
  line-height:1.62;
  color:var(--wce-body);
  max-width:585px;
  margin-bottom:26px !important;
}

.wce-days{
  color:var(--wce-navy);
  font-weight:700;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}

/* guarantee box */
.wce-promise{
  display:inline-flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  background:var(--wce-promise-bg);
  border:1px solid var(--wce-promise-border);
  border-radius:8px;
  padding:16px 24px;
  margin-bottom:30px;
}

.wce-promise-item{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:19px;
  font-weight:700;
  color:var(--wce-navy);
}

.wce-promise-item svg{flex:none;}

.wce-promise-divider{
  width:1px;
  height:26px;
  background:var(--wce-promise-divider);
}

/* buttons */
.wce-actions{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:30px;
}

.wce-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:6px;
  padding:20px 32px;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, filter .15s ease;
}

.wce-btn svg{flex:none;}

.wce-btn-primary{
  background:linear-gradient(90deg,var(--wce-gold) 0%,var(--wce-gold-dark) 100%);
  color:var(--wce-navy);
  border:none;
  box-shadow:0 10px 24px rgba(238,166,0,.32);
  min-width:290px;
  justify-content:space-between;
}

.wce-btn-primary:hover,
.wce-btn-primary:focus-visible{
  color:var(--wce-navy);
  filter:brightness(1.06);
  transform:translateY(-1px);
}

.wce-btn-ghost{
  background:#fff;
  color:var(--wce-navy);
  border:1.5px solid var(--wce-navy);
}

.wce-btn-ghost:hover,
.wce-btn-ghost:focus-visible{
  color:var(--wce-navy);
  background:#F7F9FD;
  transform:translateY(-1px);
}

.wce a:focus-visible{
  outline:3px solid var(--wce-blue);
  outline-offset:3px;
}

/* small trust row - 22px gap + 14.5px text keeps all three on one line in the
   copy column. Widen the gap only if your theme font runs narrower than Inter. */
.wce-trustrow{
  display:flex;
  align-items:center;
  gap:14px 22px;
  flex-wrap:wrap;
}

.wce-trust-item{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14.5px;
  font-weight:500;
  color:var(--wce-trust-text);
}

.wce-trust-item svg{flex:none;color:var(--wce-navy-icon);}

/* PHOTO PANEL — the blue curved arc, with the photo banded across it.

   Why it is built this way: the hero copy makes the right-hand slot roughly
   square (~1:1), but the supplied asset is 3:2 AND carries baked-in graphics
   at both edges (the 7-21 DAYS seal top-right, the BEFORE card bottom-left).
   object-fit:cover on a square slot throws away ~30% of the width, which
   always cuts one of them off. So the arc runs the full height of the hero
   and the photo sits across its middle at its true 3:2 ratio — nothing in
   the composite is ever cropped, and the gradient fills the band above and
   below. Give us a photo-only version of this asset (no seal, no cards) and
   the seal/cards can be rebuilt in HTML over a full-bleed cover image. */
.wce-media{
  position:absolute;
  top:0;
  right:0;
  bottom:var(--wce-strip-overlap);  /* stop exactly where the white cards start */
  width:calc(50% - 12px);           /* never crosses into the copy column */
  pointer-events:none;
}

.wce-arc,
.wce-frame{
  position:absolute;
  inset:0;
  /* Ry 120% keeps the sweep of the mockup's arc while staying shallow enough
     that the curve never bites into the BEFORE card baked into the photo. */
  -webkit-clip-path:ellipse(110% 120% at 112% 50%);
  clip-path:ellipse(110% 120% at 112% 50%);
}

.wce-arc{
  background:linear-gradient(180deg,var(--wce-blue-deep) 0%,var(--wce-blue-light) 55%,var(--wce-blue-deep) 100%);
  transform:translateX(-17px) scaleY(1.015);
    background: image-set(url(hero-couple.gif) 1x, url(hero-couple.gif) 2x);
    /* transform: translateX(-17px) scaleY(1.015); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* same box, same clip as .wce-arc, so both curves line up exactly */
.wce-frame{
  display:flex;
  align-items:center;      /* bands the photo across the middle of the arc */
}

.wce-photo{
  /* 112% + a -12% pull scales the couple up and shrinks the blue bands. It
     bleeds the photo's left edge (empty room) out past the curve. 112 is the
     ceiling — past it the curve starts eating the BEFORE card.
     flex:none stops the flex parent shrinking it back to 100%. */
  flex:none;
  width:120%;
  margin-left:-12%;
  height:auto;
  aspect-ratio:3/2;        /* matches the 1536 x 1024 asset */
  object-fit:cover;        /* no-op at 3:2 — a safety net if the asset changes */
  object-position:center;
  display:block;
  pointer-events:auto;
}

/* ============ BENEFITS STRIP ============ */

.wce-strip{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  margin-top:calc(var(--wce-strip-overlap) * -1);
  padding-bottom:64px;
}

.wce-cards{
  background:#fff;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(11,27,63,.10);
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.wce-card{
  display:flex;
  align-items:center;      /* icons sit centred on the text, as in the mockup */
  gap:20px;                /* icon 58px + 20px gap + 22px padding matches the
                              mockup's icon-to-text proportion in a 1280 grid */
  padding:30px 22px;
  border-right:1px solid var(--wce-line);
}

.wce-card:last-child{border-right:none;}
.wce-card-icon{flex:none;display:flex;color:var(--wce-navy-icon);}

.wce-card-title{
  font-family:var(--wce-font-heading);
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--wce-blue);
  margin-bottom:8px !important;
}

/* first heading is navy in the approved mockup (static HTML fallback) */
.wce-card:first-child .wce-card-title{color:var(--wce-navy);}

/* Elementor sets one of these per card; 0,3,0 beats the :first-child rule above */
.wce-cards .wce-card .wce-card-title--navy{color:var(--wce-navy);}
.wce-cards .wce-card .wce-card-title--blue{color:var(--wce-blue);}

.wce-card-text{
  font-size:15.5px;
  line-height:1.55;
  color:var(--wce-body);
}

/* ============ RESPONSIVE ============ */

/* Below 1180px the copy column grows tall enough that the half-width photo slot
   turns portrait, which would crop the BEFORE/AFTER cards out of the composite.
   Stack instead and show the asset at its native 3:2. */
@media (max-width:1180px){
  .wce{--wce-strip-overlap:56px;}

  /* stacked layout is taller than a screen - let it flow naturally */
  .wce-hero-wrap{min-height:0;}
  .wce-hero{display:block;padding:40px 0 88px;}
  .wce-grid{grid-template-columns:1fr;gap:0;}
  .wce-copy{max-width:none;padding-bottom:8px;}

  .wce-title{font-size:clamp(34px,5vw,52px);}
  .wce-text{font-size:17px;}
  .wce-promise-item{font-size:17px;}
  .wce-btn{padding:17px 24px;font-size:15px;}
  .wce-btn-primary{min-width:250px;}
  .wce-trustrow{gap:24px;}

  .wce-media{
    position:relative;
    inset:auto;
    width:auto;
    height:auto;
    max-width:var(--wce-max);
    margin:32px auto 0;
    padding:0 24px;          /* line the photo up with the copy above it */
    pointer-events:auto;
  }
  .wce-arc{display:none;}
  .wce-frame{
    position:relative;
    inset:auto;
    display:block;
    -webkit-clip-path:none;
    clip-path:none;
  }
  .wce-photo{
    width:100%;
    margin-left:0;
    border-radius:16px;   /* full 3:2 asset, uncropped */
  }

  .wce-cards{grid-template-columns:repeat(2,1fr);}
  .wce-card:nth-child(2){border-right:none;}
  .wce-card:nth-child(-n+2){border-bottom:1px solid var(--wce-line);}
}

@media (max-width:620px){
  .wce{--wce-strip-overlap:48px;}
  .wce-container{padding:0 20px;}
  .wce-title{font-size:clamp(30px,7.6vw,40px);}
  .wce-title br{display:none;}   /* let the headline wrap naturally on phones */
  .wce-promise{width:100%;flex-direction:column;align-items:flex-start;gap:12px;}
  .wce-promise-divider{display:none;}
  .wce-actions{flex-direction:column;align-items:stretch;}
  .wce-btn{width:100%;min-width:0;}
  .wce-btn-primary{justify-content:center;}
  .wce-trustrow{gap:16px 24px;}
  .wce-media{padding:0 20px;}
  .wce-cards{grid-template-columns:1fr;}
  .wce-card{border-right:none;border-bottom:1px solid var(--wce-line);}
  .wce-card:nth-child(-n+2){border-bottom:1px solid var(--wce-line);}
  .wce-card:last-child{border-bottom:none;}
}

@media (prefers-reduced-motion:reduce){
  .wce *{transition:none !important;}
}