.elementor-300 .elementor-element.elementor-element-c4a7097{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-300 .elementor-element.elementor-element-1273d64{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-300 .elementor-element.elementor-element-3b552b5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-300 .elementor-element.elementor-element-81e8325{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-300 .elementor-element.elementor-element-6dae0b3{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-300 .elementor-element.elementor-element-8463d5a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-fa0f281 *//* ==============================
   0) RESET & BASE
   ============================== */
html, body { margin: 0; padding: 0; }
* {
  transition: background-color 1.8s ease, color 1.8s ease,
              border-color 1.8s ease, box-shadow 1.8s ease;
}
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* ==============================
   1) THEME ROOT & PALETTE
   ============================== */
.theme-root{
  /* Dark section palette */
  --ink:#E9EEF9;
  --muted:#9EB0CF;
  --line:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.08);

  /* Netflix accents */
  --accent:#E50914;
  --accent2:#B20710;
  --accent3:#730308;

  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Inter,Roboto,sans-serif;
  color:var(--ink);
  min-height:100vh;
  position:relative;
  isolation:isolate;
}

/* Optional theme background layers (if you use them) */
.bg{position:fixed; inset:0; z-index:-1; pointer-events:none;}
.bg-layer{position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease;}
.bg-layer.active{opacity:1;}

}
.theme-white{ background:#fff; }

/* ==============================
   2) LAYOUT HELPERS
   ============================== */
.container{ max-width:1280px; margin:0 auto; padding:28px; }
@media (min-width:1400px){ .container{ max-width:1320px; } }
.section{ padding:88px 0; }
.grid{ display:grid; gap:24px; }
.flex{ display:flex; align-items:center; }
.flex-wrap{ flex-wrap:wrap; }
.gap-12{ gap:12px; }

/* ==============================
   3) TYPE & COMMON UI
   ============================== */
h1.title{
  font-weight:700; letter-spacing:-.6px; line-height:1.02;
  font-size:clamp(44px,4.5vw,96px); margin:12px 0 8px;
}
.lead{ font-size:clamp(20px,2.2vw,24px); color:var(--ink); max-width:70ch; }
h2{ font-size:clamp(28px,3.6vw,44px); margin:0 0 12px; }
h3{ font-size:clamp(20px,2.2vw,26px); margin:0 0 6px; }

.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 24px; border-radius:16px;
  border:1px solid var(--line); background:var(--glass); color:var(--ink);
  font-weight:700; text-decoration:none; font-size:clamp(14px,1.4vw,18px);
}
.btn:hover{ transform:translateY(-1px); }
.btn.accent{
  border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2) 60%,var(--accent3));
  color:#fff;
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  color:var(--muted); font-weight:700;
}
.glass{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border:1px solid var(--line); border-radius:22px;
}

/* ==============================
   4) HERO (Background image)
   ============================== */
.hero-bg{
  background-image:url("https://jpfluellen.com/wp-content/uploads/2025/05/20240811_124213-scaled.jpeg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:65% 50%; /* focal shift to the right */
  position:relative;
  color:#fff;
  width:100%;
  min-height:100svh; min-height:100dvh; min-height:100vh; /* fallbacks */
  display:flex;
  align-items:center;
  padding:110px 0;
}
.hero-bg::before{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.45);
}
.hero-bg > *{ position:relative; z-index:1; }

/* Focal point nudges for smaller screens */
@media (max-width:1200px){ .hero-bg{ background-position:70% 50%; } }
@media (max-width:980px) { .hero-bg{ background-position:75% 50%; } }
@media (max-width:720px) { .hero-bg{ background-position:80% 50%; } }

/* WordPress admin bar compensation */
body.admin-bar .hero-bg{ min-height:calc(100svh - 32px); }
@media (max-width:782px){
  body.admin-bar .hero-bg{ min-height:calc(100svh - 46px); }
}

/* ==============================
   5) HERO EMAIL FORM
   ============================== */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.cta-form{
  display:flex; align-items:stretch; gap:12px; flex-wrap:nowrap;
  max-width:820px; margin:16px 0 8px;
}
.cta-form input{
  flex:1;
  font:500 clamp(14px,1.6vw,16px)/1.2 Poppins,system-ui,-apple-system,Segoe UI,Inter,Roboto,sans-serif;
  padding:16px 18px; border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06); color:var(--ink);
  outline:none; box-shadow:inset 0 -2px 0 rgba(0,0,0,.06);
}
.cta-form input::placeholder{ color:var(--muted); }
.cta-form input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(229,9,20,.28);
  background:rgba(255,255,255,.08);
}
.cta-form .btn{ padding:16px 24px; border-radius:14px; }
.form-helper{
  margin:6px 0 0; color:var(--muted);
  font:500 clamp(12px,1.4vw,14px)/1.6 Poppins,system-ui,-apple-system,Segoe UI,Inter,Roboto,sans-serif;
}
@media (max-width:640px){
  .cta-form{ flex-direction:column; }
  .cta-form .btn{ width:100%; }
}

/* ==============================
   6) WORDPRESS FULL-WIDTH FIXES
   (Removes the theme’s page padding so alignfull is true full-bleed)
   ============================== */

/* Make alignfull blocks actually span the viewport width */
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-image.alignfull,
.hero-bg.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0;
  padding-right: 0;
}

/* Remove outer site padding some themes add */
.wp-site-blocks { padding-left: 0; padding-right: 0; }

/* Classic themes often wrap content in narrower containers */
.entry-content > .alignfull,
.site-main > .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Keep your hero’s inner content at a readable width */
.hero-bg .container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c95049a */#services-split{
  background:#fff;
  color:#0f172a;
  border-top:1px solid #eef3f8;
  border-bottom:1px solid #eef3f8;
}
#services-split .sv-wrap{
  max-width:1280px;
  margin:0 auto;
  padding:clamp(32px,6vw,72px) clamp(20px,4vw,40px);
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:clamp(24px,4vw,48px);
  align-items:start;
}
@media (max-width: 980px){
  #services-split .sv-wrap{ grid-template-columns:1fr; }
}

/* Left visual */
.sv-media{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid #e9eef6;
  min-height: min(64vh, 560px);
  background:#f6f8fb;
  display:grid;
  place-items:center;
  box-shadow:0 18px 48px rgba(15,23,42,.06);
}
.sv-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.02) contrast(1.02);
  transform:scale(1.02);
}
.sv-media::after{
  /* soft vignette for depth */
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(60% 60% at 60% 40%, rgba(0,0,0,.12), transparent 60%);
  pointer-events:none;
}
.sv-tag{
  position:absolute; left:16px; bottom:16px;
  padding:8px 12px; border-radius:999px;
  font:700 12px/1 Poppins,system-ui,sans-serif;
  color:#0b0f16; background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}

/* Right side */
.sv-title{
  margin:0 0 6px;
  font:800 clamp(28px,5.6vw,48px)/1.05 Poppins,system-ui,sans-serif;
  letter-spacing:-.02em; color:#0E1626;
}
.sv-title em{
  font-style:italic; font-family:"Playfair Display",serif;
}
.sv-sub{
  margin:0 0 clamp(16px,2.4vw,22px);
  color:#5b6b82;
  font:500 clamp(14px,1.8vw,16px)/1.7 Poppins,system-ui,sans-serif;
  max-width: 56ch;
}

/* Features grid (2 columns) */
.sv-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(16px,2.6vw,22px) clamp(16px,3vw,28px);
  margin-top: 8px;
}
@media (max-width: 780px){
  .sv-grid{ grid-template-columns:1fr; }
}
.sv-item{
  display:grid; grid-template-columns: 34px 1fr; gap:12px;
  align-items:flex-start;
  padding:14px 12px;
  border-radius:14px;
  border:1px solid #eef3f8;
  background: #fff;
  box-shadow:0 10px 26px rgba(15,23,42,.04);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sv-item:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(15,23,42,.08);
  border-color:#e6edf5;
}
.sv-glyph{
  width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center;
  color:#fff;
  background: radial-gradient(120% 120% at 30% 30%, var(--accent,#E50914) 0%, var(--accent2,#B20710) 55%, var(--accent3,#730308) 100%);
  box-shadow:0 8px 22px rgba(229,9,20,.25);
}
.sv-copy h3{
  margin:.1rem 0 .35rem;
  font:700 clamp(16px,2.4vw,20px)/1.2 Poppins,system-ui,sans-serif;
  color:#0f172a;
}
.sv-copy p{
  margin:0; color:#5b6b82; font:500 14px/1.7 Poppins,system-ui,sans-serif;
}

/* CTA row (uses your existing .btn styles) */
.sv-cta{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top: clamp(16px,2.6vw,22px);
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 22px; border-radius:14px;
  border:1px solid var(--line, rgba(0,0,0,.1));
  background: var(--glass, rgba(0,0,0,.04));
  color: var(--ink, #111);
  font-weight:700; text-decoration:none; font-size:16px;
  transition: transform .2s ease, background .25s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn.accent{
  border:none; color:#fff;
  background: linear-gradient(135deg, var(--accent,#E50914), var(--accent2,#B20710) 60%, var(--accent3,#730308));
  box-shadow:0 12px 28px rgba(229,9,20,.25);
}

/* === Services Split Fix === */
#services-split .sv-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* equal width columns */
  align-items: stretch;             /* make both sides equal height */
  gap: clamp(24px, 4vw, 48px);
}

/* Left visual matches right height */
.sv-media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;                     /* stretch to match text side */
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

/* Make the image fill the box */
.sv-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* crops but fills */
  display: block;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-11e34cc *//* ===== Why Choose Us (dark, Netflix accents) ===== */
.why-dark{
  position: relative;
  color:#FFFFFF;
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(229,9,20,.10), transparent 60%),
    radial-gradient(900px 520px at 0% 100%, rgba(115,3,8,.10), transparent 60%),
  #121416;            
    ; /* deep navy/black */
  padding: clamp(40px, 7vw, 100px) 0;
  overflow: hidden;
}

/* container */
.why-wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1.05fr 1.6fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

/* left intro */
.why-intro h2{
  margin: 0 0 12px;
  letter-spacing: -.4px;
  font: 800 clamp(24px, 4.6vw, 40px)/1.05 Poppins, system-ui, sans-serif;
}
.why-lead{
  margin: 0;
  color:#FFFFFF;
  font: 500 clamp(14px, 1.8vw, 18px)/1.7 Poppins, system-ui, sans-serif;
  max-width: 58ch;
}

/* right column */
.why-right{
  display: grid;
  gap: clamp(20px, 3vw, 34px);
}

/* each reason */
.why-item{
  position: relative;
  padding-top: clamp(16px, 2.4vw, 22px);
}

/* subtle glowing divider line above each item */
.why-item::before{
  content:"";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background:
    linear-gradient(90deg,
      rgba(229,9,20,.65) 0%,
      rgba(178,7,16,.55) 28%,
      rgba(115,3,8,.35) 56%,
      rgba(255,255,255,.12) 100%);
  box-shadow: 0 0 18px rgba(229,9,20,.25);
  opacity: .85;
}

/* heading + dot */
.why-h{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  letter-spacing: -.2px;
  font: 800 clamp(18px, 3vw, 26px)/1.15 Poppins, system-ui, sans-serif;
  color:#FFFFFF;
}

.why-dot{
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(45% 45% at 35% 35%, #ffb3b8 0%, var(--accent, #E50914) 60%, #730308 100%);
  box-shadow: 0 0 0 6px rgba(229,9,20,.15);
  flex: 0 0 12px;
}

/* body text */
.why-item p{
  margin: 0;
  color:#FFFFFF;;
  font: 500 clamp(14px, 1.8vw, 17px)/1.7 Poppins, system-ui, sans-serif;
  max-width: 80ch;
}

/* responsive: single column */
@media (max-width: 980px){
  .why-wrap{
    grid-template-columns: 1fr;
  }
  .why-intro{ max-width: 720px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d63bc3c *//* ===== Testimonials: auto scrolling marquee ===== */
.ts-section{
  --ink: var(--ink, #FFFFFF);
  --muted: var(--muted, #FFFFFF);
  --line: var(--line, rgba(0,0,0,.12));
  --glass: var(--glass, rgba(0,0,0,.04));
  --card-bg: rgba(255,255,255,.04);
  --title: #fff;
  --dot: #FFFFFF;
  --duration: 42s;                /* speed (bigger = slower) */
  background: radial-gradient(420px 240px at 12% 26%, rgba(255,90,31,.15), transparent 60%),
              #FFFFFF;            /* dark backdrop with subtle glow */
  padding: clamp(48px, 10vw, 96px) 0;
  color: var(--ink);
}

.ts-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
  text-align: center;
}

.ts-title{
  margin: 0 0 6px;
  font: 800 clamp(28px, 6vw, 56px)/1.05 Poppins, system-ui, sans-serif;
  letter-spacing: -.02em;
  color: black;
}
.ts-sub{
  margin: 0 0 clamp(22px, 4vw, 36px);
  color: black;
  font: 500 clamp(14px, 2vw, 18px)/1.7 Poppins, system-ui, sans-serif;
}

.ts-marquee{
  position: relative;
  overflow: hidden;
  /* fade edges like the reference */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.ts-track{
  display: flex;
  gap: clamp(16px, 3vw, 24px);
  width: max-content;           /* allow natural width */
  animation: tsScroll var(--duration) linear infinite;
  will-change: transform;
}
.ts-marquee:hover .ts-track{ animation-play-state: paused; }

@keyframes tsScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* because we duplicated the set */
}

/* Card */
.ts-card{
  width: clamp(280px, 32vw, 420px);
  padding: clamp(18px, 2.6vw, 24px);
  text-align: left;
  border-radius: 14px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.18) inset,
              0 0 0 1px rgba(255,255,255,.03);
}

.ts-stars{
  color: #ff7a33;        /* warm orange */
  letter-spacing: .12em;
  font-size: 16px;
  margin-bottom: 10px;
}
.ts-quote{
  margin: 0 0 16px;
  font: 600 clamp(15px, 2.1vw, 18px)/1.6 Inter, system-ui, sans-serif;
  color: var(--ink);
}

.ts-person{
  display: grid;
  grid-template-columns: 40px auto;
  align-items: center;
  gap: 10px;
}
.ts-person img{
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 1px solid rgba(255,255,255,.16);
}
.ts-person strong{
  display: block; color: var(--ink);
  font: 700 14px/1 Poppins, system-ui, sans-serif;
}
.ts-person span{
  display: block; color: var(--muted);
  font: 500 12px/1.4 Poppins, system-ui, sans-serif;
}

/* Responsive: stack height a bit tighter on small screens */
@media (max-width: 680px){
  .ts-card{ width: 84vw; }
  .ts-sub{ margin-bottom: 16px; }
}

/* Force light text inside the Testimonials section */
.ts-section{ color:#E9EEF9; }                 /* default text in section */
.ts-section .ts-title{ color:black; }           /* heading */
.ts-section .ts-sub{ color:#282829; }          /* subtitle */

/* Card text colors */
.ts-section .ts-card{ color:#080808; }
.ts-section .ts-card .ts-quote{ color:#242121; }
.ts-section .ts-card .ts-person strong{ color:#0c0c0c; }
.ts-section .ts-card .ts-person span{ color:#0c0c0c; }

/* Links in cards (if any) */
.ts-section .ts-card a{
  color: black;
  text-decoration-color: rgba(233,238,249,.35);
}
.ts-section .ts-card a:hover{
  text-decoration-color: rgba(233,238,249,.7);
}

/* Neutralize WP block color utilities that might force black */
.ts-section .has-black-color,
.ts-section .has-text-color.has-black-color,
.ts-section p.has-text-color,
.ts-section .wp-block-paragraph.has-black-color{
  color:#000000 !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bbdf365 *//* ==== Process Section (Dark Netflix style timeline) ==== */
.process-section{
  background: #0A0F1C;
  padding: clamp(60px, 8vw, 120px) 0;
  color: #E9EEF9;
}

.process-wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

/* ====== Impact section (dark, minimal, premium) ====== */
.impact{
  --ink:#E9EEF9;
  --muted:#AAB9D4;
  --bg:#121416;            
  --card:#1A1D20;          
  --line:rgba(255,255,255,.08);
  --accent:#E50914;        
  background: var(--bg);
  color: var(--ink);
  padding: clamp(48px, 8vw, 120px) 0;
}
.impact-wrap{
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1fr 2fr;   /* more space for cards */
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

/* Left column */
.impact-title{
  margin: 0;
  font: 800 clamp(40px, 7.8vw, 82px)/1 "Poppins", system-ui, sans-serif;
  letter-spacing: -.02em;
}
.impact-arrow{
  display: inline-flex;
  color: var(--ink);
  opacity: .28;
  margin-top: clamp(24px, 3vw, 40px);
}
.impact-arrow svg{
  width: clamp(60px, 7vw, 100px);
  height: auto;
}

/* Right column grid of cards */
/* ====== Impact Section (aligned + larger cards) ====== */
.impact-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* stay in 3 columns */
  gap: clamp(28px, 3vw, 40px);
  align-items: stretch; /* force equal card height */
}

.impact-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  padding-bottom: 20px;
  min-height: 520px;  /* taller cards */
}

.impact-card:hover{
  transform: translateY(-8px);
  border-color: rgba(229,9,20,.45);
  box-shadow: 0 28px 64px rgba(0,0,0,.5), 0 0 0 1px rgba(229,9,20,.18) inset;
}

/* Media (top of card) */
.impact-media{
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.impact-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease, filter .35s ease;
}
.impact-card:hover .impact-media img{
  transform: scale(1.08);
  filter: saturate(1.1);
}

/* Text bigger and more padding */
.impact-card-title{
  margin: 22px 24px 12px;
  font: 700 clamp(22px, 2vw, 28px)/1.3 "Poppins", system-ui, sans-serif;
}
.impact-card-sub{
  margin: 0 24px 24px;
  color: var(--muted);
  font: 500 clamp(16px, 1.4vw, 18px)/1.7 "Poppins", system-ui, sans-serif;
}

/* Responsive: stack on tablet */
@media (max-width: 1024px){
  .impact-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px){
  .impact-grid{ grid-template-columns: 1fr; }
}

/* Base desktop layout */
.impact-section{
  display: grid;
  grid-template-columns: 1fr 2fr;  /* left text, right cards */
  align-items: start;
  gap: clamp(32px, 4vw, 60px);
}

/* Card grid for desktop */
.impact-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 40px);
  align-items: stretch;
}

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

/* Tablet: stack headline above cards but keep 2 cards per row */
@media (max-width: 1024px){
  .impact-section{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .impact-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: full width, single column cards */
@media (max-width: 680px){
  .impact-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .impact-card{
    min-height: auto;              /* shrink cards for mobile */
    padding-bottom: 16px;
  }

  .impact-card-title{
    font-size: clamp(18px, 6vw, 22px); /* scale titles */
  }
  .impact-card-sub{
    font-size: clamp(14px, 4.5vw, 16px);
  }

  /* Center text block */
  .impact-section h2{
    text-align: center;
    margin-bottom: 18px;
  }
}

/* ===== Mobile polish (<= 720px) ===== */
@media (max-width: 720px){

  /* Hero: ease the top/bottom padding and stack CTAs */
  .hero-bg{
    min-height: 86vh;              /* avoid pushing content below the fold */
    padding: 72px 0;               /* was 110px */
  }
  .hero-cta{
    gap: 12px;
    flex-direction: column;
    align-items: stretch;
  }
  .btn{ padding: 14px 18px; }      /* comfy tap targets */

  /* Container side padding a bit tighter */
  .container{ padding: 20px; }

  /* Services split: make the image less tall on phones */
  #services-split .sv-wrap{
    grid-template-columns: 1fr;    /* you already switch to 1 col at 980px */
    gap: 18px;
  }
  .sv-media{
    min-height: 48vh;              /* was min(64vh, 560px) earlier */
    border-radius: 14px;
  }
  .sv-title{ font-size: clamp(24px, 8vw, 34px); }
  .sv-sub  { font-size: clamp(14px, 4.2vw, 16px); }

  /* Feature items: breathe a bit */
  .sv-item{
    grid-template-columns: 30px 1fr;
    padding: 12px;
  }
  .sv-copy h3{ font-size: clamp(16px, 4.6vw, 18px); }
  .sv-copy p { font-size: clamp(14px, 4vw, 15px); }

  /* Impact: stack headline above, one card per row, smaller gaps */
  .impact-wrap{
    grid-template-columns: 1fr;    /* headline above the cards */
    gap: 18px;
    text-align: center;
  }
  .impact-title{
    font-size: clamp(30px, 10vw, 44px);
    line-height: 1.05;
  }
  .impact-arrow{ display:none; }   /* save space on small screens */

  .impact-grid{
    grid-template-columns: 1fr;    /* 1 per row on phones */
    gap: 18px;
  }
  .impact-card{
    min-height: auto;              /* don’t force tall cards on phones */
    border-radius: 16px;
  }
  .impact-media{ aspect-ratio: 16/10; }
  .impact-card-title{ margin: 16px 18px 8px; }
  .impact-card-sub  { margin: 0 18px 18px; }

  /* Why choose: single column + tighter type */
  .why-wrap{ grid-template-columns: 1fr; gap: 18px; }
  .why-intro h2{ font-size: clamp(22px, 7vw, 28px); }
  .why-item p{ font-size: clamp(14px, 4vw, 16px); }
}

/* ===== Mid tablet tweaks (720–1024px) ===== */
@media (max-width: 1024px){
  .impact-grid{ grid-template-columns: repeat(2, 1fr); }
  .sv-grid{ grid-template-columns: 1fr; } /* already handled at 780px, this helps bigger tablets */
}

/* Force hide the arrow on smaller screens */
@media (max-width: 720px){
  .impact-arrow {
    display: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-08bdc3f *//* Give the FAQ block its own “page break” color */
#faq{
  background-color:#f9f9f9;          /* pick your color */
  padding: clamp(40px,5vw,80px) 0;   /* top/bottom breathing room */
}

/* Optional: if you're using a dark theme, define the vars used below */
:root{
  --ink:#111; 
  --muted:#4b5563; 
  --line:rgba(0,0,0,.12);
}

/* your existing CSS (unchanged) */
#faq .wrap{ max-width:1280px; margin:0 auto; padding:clamp(28px,4vw,44px); }
#faq .eyebrow{ display:inline-flex; align-items:center; gap:8px; font:700 12px/1 Poppins; letter-spacing:.16em; text-transform:uppercase; color:#4c5a3f; background:#eeffdc; border:1px solid #daf3b8; padding:8px 12px; border-radius:999px; }
#faq .eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:radial-gradient(45% 45% at 35% 35%,#d9ffad 0%,#a8e063 60%,#66bb2b 100%); box-shadow:0 0 0 6px rgba(168,224,99,.18); }
#faq .title{ margin:14px 0 8px; line-height:.98; letter-spacing:-.5px; color:var(--ink); }
#faq .title em{ display:block; font:italic clamp(42px,7.5vw,92px)/.98 "Playfair Display",serif; }
#faq .title strong{ display:block; font:800 clamp(44px,8.2vw,108px)/.95 Poppins; }
#faq .list{ margin-top:clamp(18px,2.6vw,28px); border-top:1px solid var(--line); }
#faq details.faq-item{ border-bottom:1px solid var(--line); padding:18px 0; }
#faq summary{ list-style:none; display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; cursor:pointer; }
#faq summary::-webkit-details-marker{ display:none; }
#faq .num{ font:700 clamp(14px,1.6vw,18px)/1 Poppins; color:#8c9aa9; }
#faq .q{ font:700 clamp(18px,2.2vw,28px)/1.35 Poppins; color:var(--ink); }
#faq .pill{ width:46px; height:28px; padding:0 10px; border-radius:999px; background:#101417; color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; letter-spacing:.04em; font-size:18px; border:1px solid rgba(0,0,0,.2); transition:transform .18s ease, background-color .18s ease, opacity .18s ease; }
#faq summary:hover .pill{ transform:translateY(-1px); }
#faq details[open] .pill{ background:#1b2a38; }
#faq .pill::before{ content:"+"; }
#faq details[open] .pill::before{ content:"–"; }
#faq .a{ margin:14px 0 6px 56px; color:var(--muted); font:500 clamp(15px,1.6vw,18px)/1.8 Poppins; max-width:92ch; }
#faq .cta{ display:flex; align-items:center; gap:14px; margin-top:clamp(22px,3vw,34px); color:var(--muted); }
#faq .cta .btn{ display:inline-flex; align-items:center; gap:10px; background:#0f1621; color:#fff; border:0; border-radius:999px; padding:12px 16px; font:700 14px/1 Poppins; text-decoration:none; }
.questions{ color:#831010; }/* End custom CSS */