/*
Theme Name: Roots Dental - Landing
Theme URI: https://rootsdental.net/
Author: Roots Dental Marketing
Description: High-conversion, RTL Arabic landing page theme for Roots Dental Clinics, built for Google Ads traffic. Luxury gold & black brand identity, single-page design with Gravity Forms lead capture (Saudi-only phone validation), offers carousel, filterable doctors, technologies showcase, and sticky call-to-action.
Version: 2.9.4
License: GNU General Public License v2 or later
Text Domain: roots-landing
*/

/* ============================================================
   ROOTS DENTAL — LANDING PAGE
   Brand palette (sampled from new logo logo-new.png):
   gold #C9A66B / #D9C49A / #B8975A   ·   black #161310   ·   cream #faf7f1
   ============================================================ */

:root{
  /* gold family (mapped onto former teal/blue var names so all components recolor) */
  --teal:#C9A66B;          /* primary gold */
  --teal-light:#E2D2A8;    /* light champagne */
  --teal-dark:#A07E3F;     /* deep antique gold (for text on light) */
  --blue:#B8975A;          /* secondary gold */
  --blue-deep:#8a6a32;     /* darkest gold */
  --gold:#C9A66B;
  --gold-soft:#E7D9B6;
  --ink:#1b1714;           /* near-black brand ink */
  --ink-soft:#2b2620;
  --body:#5d574e;
  --muted:#9a9387;
  --bg:#faf7f1;            /* cream */
  --bg-deep:#f3ecdf;
  --white:#ffffff;
  --line:#ece4d6;
  --shadow:0 18px 50px rgba(40,30,12,.13);
  --shadow-sm:0 8px 24px rgba(40,30,12,.08);
  --grad:linear-gradient(135deg,#D9C49A 0%,#C9A66B 45%,#A07E3F 100%);
  --grad-ink:linear-gradient(135deg,#23201b 0%,#15120e 100%);
  --radius:16px;
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Tajawal','Segoe UI',Tahoma,sans-serif;
  color:var(--body);
  background:var(--white);
  line-height:1.8;
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{color:var(--ink);line-height:1.3;font-weight:800}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.lp-sections{display:flex;flex-direction:column}
.section{padding:84px 0}
.text-center{text-align:center}
.kicker{
  display:inline-block;color:var(--teal-dark);font-weight:800;
  letter-spacing:.5px;font-size:.95rem;margin-bottom:12px;
  background:rgba(201,166,107,.16);padding:6px 16px;border-radius:50px;
}
.section h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:14px}
.section .lead{max-width:640px;margin:0 auto 48px;color:var(--body);font-size:1.08rem}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  font-weight:800;font-size:1.05rem;padding:15px 32px;border-radius:50px;
  cursor:pointer;border:none;transition:.25s;font-family:inherit;
}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 12px 28px rgba(160,126,63,.32)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(160,126,63,.42)}
.btn-white{background:#fff;color:var(--blue-deep)}
.btn-white:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,.6);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.15)}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:.3s;
}
.site-header.is-stuck{background:rgba(255,255,255,.98);border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(40,30,12,.10)}
.site-header .container{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:14px}
.site-header .logo{margin-left:auto}
.site-header .logo img{height:64px;width:auto;display:block}
.main-nav{display:flex;gap:30px;align-items:center}
.main-nav a{font-weight:700;font-size:1.02rem;color:var(--ink);position:relative;padding:4px 0;transition:.2s}
.main-nav a::after{content:"";position:absolute;bottom:-2px;right:0;width:0;height:2px;background:var(--grad);transition:.25s}
.main-nav a:hover{color:var(--teal-dark)}
.main-nav a:hover::after{width:100%}
.header-cta{display:flex;gap:14px;align-items:center;margin-right:auto}
.header-phone{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--blue-deep);font-size:1.08rem;direction:ltr}
.header-phone svg{flex:none}

/* ---------- Hero (background image) ---------- */
.hero{
  position:relative;color:#fff;overflow:hidden;isolation:isolate;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,rgba(20,17,13,.90) 0%,rgba(40,33,22,.74) 40%,rgba(160,126,63,.42) 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 90% 15%,rgba(255,255,255,.16),transparent 45%);
  pointer-events:none;
}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .9fr;gap:54px;align-items:center;padding-top:88px;padding-bottom:108px}
.hero h1{color:#fff;font-size:clamp(2.4rem,5.4vw,4rem);margin-bottom:14px;font-weight:900;line-height:1.15;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.hero-title-before{display:block;font-size:var(--hero-title-before-size);line-height:1.15}
.hero h1 .hl{color:#E7D9B6;display:block;font-size:var(--hero-title-highlight-size)}
.hero p.sub{font-size:var(--hero-subtitle-size);color:#f5ede0;margin-bottom:30px;font-weight:500;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-actions .btn{font-size:var(--hero-button-size)}

/* Slim trust bar pinned to bottom of hero */
.hero-trust{position:absolute;bottom:0;left:0;right:0;z-index:2;background:rgba(20,16,10,.55);backdrop-filter:blur(6px);border-top:1px solid rgba(255,255,255,.12)}
.hero-trust .container{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 22px}
.hero-trust div{color:#f0e6d4;text-align:center;font-size:.95rem;font-weight:600}
.hero-trust b{color:#fff;font-size:1.35rem;font-weight:900;display:block;line-height:1.1}

/* ---------- Lead form card (in hero) ---------- */
.lead-card{
  background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:30px 28px;color:var(--body);
}
.lead-card h3{color:var(--ink);font-size:var(--hero-lead-title-size);margin-bottom:6px}
.lead-card .lc-sub{font-size:var(--hero-lead-subtitle-size);margin-bottom:18px;color:var(--body)}
.lead-card .lc-foot{margin-top:14px;font-size:var(--hero-lead-footer-size);color:var(--muted);text-align:center}

/* Gravity Forms reskin */
.lead-card .gform_wrapper.gravity-theme .gfield_label,
.lead-card .gform_wrapper .gfield_label{font-weight:700;color:var(--ink);margin-bottom:6px}
.lead-card .gform_wrapper input[type=text],
.lead-card .gform_wrapper input[type=email],
.lead-card .gform_wrapper input[type=tel],
.lead-card .gform_wrapper select,
.lead-card .gform_wrapper textarea{
  width:100%!important;border:1.5px solid var(--line)!important;border-radius:12px!important;
  padding:13px 15px!important;font-family:inherit!important;font-size:1rem!important;background:#fbfdff!important;
}
.lead-card .gform_wrapper input:focus,
.lead-card .gform_wrapper select:focus,
.lead-card .gform_wrapper textarea:focus{border-color:var(--teal)!important;outline:none!important;box-shadow:0 0 0 3px rgba(201,166,107,.22)!important}
.lead-card .gform_wrapper .gform_footer{padding:8px 0 0!important;margin:0!important}
.lead-card .gform_wrapper .gform_footer input[type=submit],
.lead-card .gform_wrapper .gform_footer button{
  width:100%!important;background:var(--grad)!important;color:#fff!important;border:none!important;
  border-radius:50px!important;padding:15px!important;font-size:1.1rem!important;font-weight:800!important;
  cursor:pointer!important;box-shadow:0 12px 28px rgba(160,126,63,.32)!important;transition:.25s!important;
}
.lead-card .gform_wrapper .gform_footer input[type=submit]:hover{transform:translateY(-2px)}
.lead-card .gform_wrapper .gfield{margin-bottom:14px!important}

/* ---------- Services ---------- */
.bg-soft{background:var(--bg)}
.grid{display:grid;gap:24px}
.services-grid{grid-template-columns:repeat(4,1fr)}
.svc-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;
  text-align:center;transition:.28s;
}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.svc-ic{
  width:74px;height:74px;border-radius:18px;
  background:linear-gradient(135deg,#fffaf0 0%,#eadbb8 100%);
  border:1px solid rgba(160,126,63,.22);
  display:grid;place-items:center;margin:0 auto 16px;
}
.svc-ic img{
  width:42px;height:42px;
  filter:brightness(0) saturate(100%) invert(38%) sepia(35%) saturate(746%) hue-rotate(5deg) brightness(91%) contrast(88%);
}
.svc-ic i,.svc-ic .roots-text-icon{font-size:2rem;color:var(--teal-dark)}
.svc-card h3{font-size:1.2rem;margin-bottom:8px}
.svc-card p{font-size:.96rem}

/* ---------- Why us ---------- */
.why-grid{grid-template-columns:repeat(3,1fr)}
.why-card{background:#fff;border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow-sm);border-top:4px solid var(--teal)}
.why-card .wnum{font-size:1.6rem;font-weight:900;color:var(--teal);margin-bottom:10px}
.why-card h3{font-size:1.18rem;margin-bottom:8px}

/* ---------- Split (tech / team) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.split img{border-radius:var(--radius);box-shadow:var(--shadow)}
.split ul{list-style:none;margin-top:18px;display:grid;gap:12px}
.split ul li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--ink)}
.split ul li::before{content:"✓";color:var(--teal-dark);font-weight:900;font-size:1.1rem;flex:none}

/* ---------- Offer banner ---------- */
.offer{background:var(--grad);color:#fff;border-radius:24px;padding:48px;text-align:center;position:relative;overflow:hidden}
.offer h2{color:#fff;font-size:clamp(1.6rem,3.2vw,2.3rem)}
.offer p{color:#f3ead9;font-size:1.12rem;max-width:620px;margin:12px auto 26px}

/* ---------- Testimonials ---------- */
.tst-grid{grid-template-columns:repeat(3,1fr)}
.tst-card{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm)}
.tst-stars{color:#ffb400;font-size:1.1rem;margin-bottom:10px;letter-spacing:2px}
.tst-card p{font-style:italic;margin-bottom:16px}
.tst-who{display:flex;align-items:center;gap:12px}
.tst-av{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.tst-who b{color:var(--ink);display:block}
.tst-who span{font-size:.85rem;color:var(--muted)}
.tst-source{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  color:var(--teal-dark);font-weight:800;font-size:.9rem;
}
.tst-source::before{content:"↗";font-size:.9rem}
.tst-source:hover{color:var(--ink)}

/* ---------- FAQ ---------- */
.faq-section{background:#fff}
.faq-list{max-width:860px;margin:0 auto;display:grid;gap:14px}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .25s,box-shadow .25s;
}
.faq-item[open]{border-color:rgba(201,166,107,.45);box-shadow:var(--shadow)}
.faq-item summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 24px;cursor:pointer;color:var(--ink);font-weight:800;font-size:1.08rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";width:32px;height:32px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:rgba(201,166,107,.15);color:var(--teal-dark);
  font-size:1.35rem;line-height:1;font-weight:800;transition:.2s;
}
.faq-item[open] summary::after{content:"−";background:var(--grad);color:#fff}
.faq-answer{padding:0 24px 22px;color:#544e44;font-size:1rem;line-height:1.8}
.faq-answer p:not(:last-child){margin-bottom:10px}

/* ---------- Final CTA / form section ---------- */
.cta-section{background:var(--ink);color:#d8cdb8}
.cta-section .split{align-items:center}
.cta-section h2{color:#fff}
.cta-section .lead-card{margin:0}
.cta-list{list-style:none;display:grid;gap:14px;margin-top:22px}
.cta-list li{display:flex;gap:12px;align-items:center;color:#e3d8c2;font-weight:600}
.cta-list li svg{flex:none}

/* ---------- Footer ---------- */
.site-footer{background:#1a1611;color:#b8ad99;padding:48px 0 26px;font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;margin-bottom:30px}
.site-footer img{height:46px;margin-bottom:14px}
.site-footer h4{color:#fff;margin-bottom:14px;font-size:1.05rem}
.site-footer a{color:#b8ad99}.site-footer a:hover{color:var(--teal-light)}
.footer-grid ul{list-style:none;display:grid;gap:9px}
.social-row{display:flex;gap:10px;margin-top:14px}
.social-row a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:.2s}
.social-row a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.social-row a:hover{background:var(--teal)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:18px;text-align:center;font-size:.88rem}

/* ---------- Sticky mobile call bar ---------- */
.mobile-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:60;display:none;
  grid-template-columns:1fr 1fr;gap:0;box-shadow:0 -6px 20px rgba(0,0,0,.15);
}
.mobile-cta a{padding:15px;text-align:center;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px}
.mobile-cta .m-call{background:var(--blue-deep)}
.mobile-cta .m-wa{background:#25D366}

/* floating whatsapp */
.wa-float{position:fixed;bottom:24px;left:24px;z-index:55;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 24px rgba(37,211,102,.5);transition:.2s}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .main-nav{display:none}
  .site-header .container{gap:14px}
  .site-header .logo{margin-left:0;margin-right:0}
  .hero .container{grid-template-columns:1fr;gap:34px;padding-top:60px;padding-bottom:120px}
  .hero-copy{text-align:center}
  .hero-actions{justify-content:center}
  .svc-grid,.services-grid{grid-template-columns:repeat(2,1fr)}
  .usp-grid,.tech-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid,.tst-grid{grid-template-columns:1fr 1fr}
  .doc-grid{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr;gap:30px}
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* ---- Tablet / large phone ---- */
@media(max-width:760px){
  .doc-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---- Phones ---- */
@media(max-width:680px){
  .container{padding:0 16px}
  .section{padding:52px 0}
  .section h2{font-size:clamp(1.45rem,6vw,1.9rem)}
  .section .lead{font-size:1rem;margin-bottom:34px}

  /* header: logo (right) + book button (left), drop phone (sticky bar covers it) */
  .site-header .container{padding-top:10px;padding-bottom:10px;gap:10px;justify-content:space-between;flex-wrap:nowrap}
  .site-header .logo{margin:0;flex:1 1 auto;min-width:0}
  .site-header .logo img{height:42px;max-width:100%;object-fit:contain;object-position:right center}
  .header-cta{margin:0;flex:0 0 auto}
  .header-phone{display:none}
  .header-cta .btn-sm{padding:10px 16px;font-size:.9rem;white-space:nowrap}

  /* hero text fits the screen */
  .hero .container{padding-top:44px;padding-bottom:128px;gap:24px}
  .hero h1{font-size:clamp(1.7rem,7.6vw,2.3rem);line-height:1.25;word-break:break-word;overflow-wrap:break-word}
  .hero-title-before{font-size:min(var(--hero-title-before-size),2.3rem)}
  .hero h1 .hl{font-size:min(var(--hero-title-highlight-size),2.3rem)}
  .hero p.sub{font-size:min(var(--hero-subtitle-size),1.2rem);margin-bottom:22px}
  .hero-actions .btn{font-size:min(var(--hero-button-size),1rem)}
  .hero-actions{gap:10px}
  .hero-actions .btn{width:100%}
  .lead-card{padding:24px 20px}

  .hero-trust .container{grid-template-columns:1fr 1fr;gap:14px;padding:14px}
  .hero-trust b{font-size:1.15rem}

  /* one-column content grids */
  .svc-grid,.services-grid,.usp-grid,.tech-grid,.why-grid,.tst-grid,.doc-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:26px;text-align:center}
  .social-row{justify-content:center}

  /* offers carousel: single card per view (JS already handles, ensure width) */
  .offer-card{flex:0 0 100%}

  .mobile-cta{display:grid}
  .wa-float{bottom:80px;width:52px;height:52px}
  .wa-float svg{width:26px;height:26px}
  body{padding-bottom:54px}
  .offer,.final-cta-inner{padding-left:4px;padding-right:4px}
  .btn{font-size:1rem;padding:14px 26px}
}

/* ---- Small phones ---- */
@media(max-width:380px){
  .hero h1{font-size:1.7rem}
  .hero-title-before{font-size:min(var(--hero-title-before-size),1.9rem)}
  .hero h1 .hl{font-size:min(var(--hero-title-highlight-size),1.9rem)}
  .hero-trust b{font-size:1.05rem}
  .hero-trust div{font-size:.82rem}
  .doc-filters{gap:7px}
  .doc-filter{padding:8px 14px;font-size:.82rem}
}

/* ============================================================
   v2 REDESIGN — visual-first components
   ============================================================ */

/* small button + outline */
.btn-sm{padding:11px 22px;font-size:.95rem}
.btn-outline{background:#fff;border:2px solid var(--teal);color:var(--teal-dark)}
.btn-outline:hover{background:var(--teal);color:#fff;transform:translateY(-2px)}

/* ---------- Offers carousel ---------- */
.offers-section{overflow:hidden}
.carousel{position:relative;padding:0 6px}
.carousel-track{display:flex;gap:24px;transition:transform .55s cubic-bezier(.22,.61,.36,1);will-change:transform}
.offer-card{
  flex:0 0 calc((100% - 48px)/3);background:#fff;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);
  display:flex;flex-direction:column;
}
.offer-img{height:210px;background-size:cover;background-position:center;position:relative}
.offer-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35))}
.offer-tag{position:absolute;top:14px;right:14px;z-index:2;background:var(--grad);color:#fff;font-weight:800;font-size:.82rem;padding:6px 14px;border-radius:50px;box-shadow:0 6px 16px rgba(160,126,63,.38)}
.offer-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:6px;flex:1}
.offer-body h3{font-size:1.25rem}
.offer-sub{color:var(--teal-dark);font-weight:700;font-size:.92rem}
.offer-body p{font-size:.95rem;margin:4px 0 14px;flex:1}
.carousel-btn{
  position:absolute;top:38%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;
  border:none;background:#fff;color:var(--blue-deep);font-size:1.7rem;line-height:1;cursor:pointer;
  box-shadow:var(--shadow-sm);transition:.2s;display:grid;place-items:center;
}
.carousel-btn:hover{background:var(--grad);color:#fff}
.carousel-btn.prev{right:-6px}
.carousel-btn.next{left:-6px}
.carousel-dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
.cdot{width:10px;height:10px;border-radius:50%;border:none;background:#d8cdb8;cursor:pointer;transition:.2s;padding:0}
.cdot.is-active{background:var(--teal);width:26px;border-radius:6px}

/* ---------- USPs ---------- */
.usp-grid{grid-template-columns:repeat(3,1fr)}
.usp-card{background:#fff;border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow-sm);transition:.28s;border:1px solid var(--line);position:relative;overflow:hidden}
.usp-card::before{content:"";position:absolute;top:0;right:0;width:64px;height:64px;background:var(--grad);opacity:.08;border-radius:0 0 0 64px}
.usp-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.usp-ic{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,rgba(226,210,168,.55),rgba(201,166,107,.22));display:grid;place-items:center;font-size:2rem;margin-bottom:16px}
.usp-ic i{font-size:1.75rem;color:var(--teal-dark)}
.usp-card h3{font-size:1.2rem;margin-bottom:8px}
.usp-card p{font-size:.96rem}

/* ---------- Services grid ---------- */
.svc-grid{grid-template-columns:repeat(4,1fr)}

/* ---------- Doctors filter + grid ---------- */
.doc-filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:38px}
.doc-filter{
  border:1.5px solid var(--line);background:#fff;color:var(--ink);font-family:inherit;font-weight:700;
  font-size:.95rem;padding:10px 22px;border-radius:50px;cursor:pointer;transition:.2s;
}
.doc-filter:hover{border-color:var(--teal)}
.doc-filter.is-active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(160,126,63,.28)}
.doc-grid{grid-template-columns:repeat(4,1fr)}
.doc-card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s,border-color .35s}
.doc-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .4s;z-index:3}
.doc-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(40,30,12,.18);border-color:transparent}
.doc-card:hover::before{transform:scaleX(1)}
.doc-card.is-hidden{display:none}
.doc-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(165deg,#fbf7ef 0%,#f1e6cd 60%,#e4d3ad 100%)}
.doc-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease}
.doc-card:hover .doc-photo img{transform:scale(1.06)}
/* soft fade from photo into the card body */
.doc-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to top,#fff 2%,rgba(255,255,255,.0) 100%);pointer-events:none}
.doc-body{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;padding:6px 20px 26px;text-align:center;margin-top:-30px;z-index:2}
.doc-rank{display:inline-block;background:var(--grad);color:#fff;font-weight:800;font-size:.74rem;letter-spacing:.3px;padding:5px 16px;border-radius:50px;margin-bottom:10px;box-shadow:0 6px 16px rgba(160,126,63,.3)}
.doc-body h3{font-size:1.14rem;margin-bottom:4px}
.doc-spec{font-size:.85rem;color:var(--teal-dark);font-weight:700;margin-bottom:12px;min-height:2.4em}
.doc-bullets{list-style:none;text-align:right;display:grid;gap:7px;width:100%;margin-top:12px;border-top:1px solid var(--line);padding-top:14px}
.doc-bullets li{font-size:.82rem;color:var(--body);display:flex;gap:8px;align-items:flex-start;line-height:1.55}
.doc-bullets li::before{content:"✦";color:var(--gold);font-size:.8rem;flex:none;margin-top:3px}
.doc-book{width:auto;min-width:132px;margin-top:auto;margin-bottom:0;padding:10px 22px;font-size:.86rem;line-height:1.2;justify-content:center}
.doc-bullets + .doc-book{margin-top:22px}

/* ---------- Before/after media ---------- */
.ba-media{position:relative}
.ba-media img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}
.ba-chip{position:absolute;bottom:18px;right:18px;background:#fff;color:var(--blue-deep);font-weight:800;padding:8px 18px;border-radius:50px;box-shadow:var(--shadow-sm)}
.check-list{list-style:none;margin-top:18px;display:grid;gap:12px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--ink)}
.check-list li::before{content:"✓";color:var(--teal-dark);font-weight:900;font-size:1.1rem;flex:none}

/* ---------- Final CTA ---------- */
.final-cta{background:linear-gradient(125deg,#1b1714 0%,#3a3024 45%,#A07E3F 100%);color:#fff;position:relative;overflow:hidden}
.final-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(255,255,255,.16),transparent 45%)}
.final-cta-inner{position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto}
.final-cta h2{color:#fff;font-size:clamp(1.7rem,3.4vw,2.6rem)}
.final-cta p{color:#f3ead9;font-size:1.12rem;margin:14px 0 28px}
.final-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive v2 (carousel offers only — grids handled above) ---------- */
@media(max-width:980px){
  .offer-card{flex:0 0 calc((100% - 24px)/2)}
}
@media(max-width:680px){
  .offer-card{flex:0 0 100%}
  .carousel-btn{display:none}
}

/* ---------- Saudi phone live validation ---------- */
.saudi-hint{font-size:.85rem;margin-top:6px;line-height:1.5;min-height:1px;transition:.2s}
.saudi-hint.ok{color:#16a34a;font-weight:700}
.saudi-hint.err{color:#dc2626;font-weight:600}
.lead-card .gfield.saudi-ok input[type=tel],
.lead-card .gfield.saudi-ok input[id^="input_1_3"]{
  border-color:#16a34a!important;box-shadow:0 0 0 3px rgba(22,163,74,.15)!important;background:#f3fdf6!important;
}
.lead-card .gfield.saudi-err input[type=tel],
.lead-card .gfield.saudi-err input[id^="input_1_3"]{
  border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.13)!important;background:#fff6f6!important;
}

/* ---------- Protected thank-you page ---------- */
.thank-you-page{background:var(--bg)}
.thank-you-hero{min-height:58vh;display:grid;align-items:center}
.thank-you-card{
  max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:46px 34px;text-align:center;
}
.thank-you-card h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:12px}
.thank-you-card p{font-size:1.12rem;color:var(--body);max-width:560px;margin:0 auto 28px}
.thank-you-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Technologies section ---------- */
.tech-section{
  background:var(--bg);
  position:relative;
}
.tech-panel{
  position:relative;
  padding:0;
}
.tech-panel::before{display:none}
.tech-heading{
  position:relative;text-align:center;max-width:760px;margin:0 auto 44px;
}
.tech-heading .kicker{
  color:var(--teal-dark);
  background:rgba(201,166,107,.14);
  border:1px solid rgba(201,166,107,.20);
}
.tech-heading h2{color:var(--ink);font-size:clamp(1.85rem,3.6vw,2.65rem)}
.tech-heading .lead{color:var(--body);margin-bottom:0}
.tech-grid{position:relative;grid-template-columns:repeat(3,1fr);gap:20px}
.tech-card{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:26px 24px;box-shadow:var(--shadow-sm);
  transition:transform .28s,box-shadow .28s,border-color .28s;
}
.tech-card::before{
  content:"";position:absolute;top:0;right:0;width:100%;height:4px;
  background:var(--grad);border-radius:18px 18px 0 0;
}
.tech-card:nth-child(4),.tech-card:nth-child(5){grid-column:auto}
.tech-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(201,166,107,.38)}
.tech-ic{
  flex:none;width:60px;height:60px;border-radius:16px;
  background:linear-gradient(135deg,#fffaf0 0%,#eadbb8 100%);
  border:1px solid rgba(160,126,63,.22);
  color:var(--teal-dark);display:grid;place-items:center;font-size:1.75rem;
  box-shadow:none;
}
.tech-ic svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tech-ic i,.tech-ic .roots-text-icon{font-size:1.75rem;color:var(--teal-dark)}
.tech-copy{min-width:0}
.tech-num{display:block;color:var(--teal-dark);font-weight:900;font-size:.78rem;margin-bottom:5px}
.tech-card h3{color:var(--ink);font-size:1.1rem;margin-bottom:8px;line-height:1.45}
.tech-card p{color:#544e44;font-size:.94rem;line-height:1.75}
.tech-actions{margin-top:34px;text-align:center}
@media(max-width:980px){
  .tech-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .tech-grid{grid-template-columns:1fr}
  .tech-card{min-height:auto;padding:20px 18px}
  .tech-heading{text-align:right}
}

/* doctor placeholder initial overlay */
.doc-photo{position:relative}
.doc-initial{position:absolute;inset:0;display:grid;place-items:center;font-size:4.5rem;font-weight:900;color:#fff;text-shadow:0 4px 16px rgba(120,90,40,.4);z-index:2}
.doc-card.is-ph .doc-photo img{opacity:.92}

/* ============================================================
   v2.5 — copy/color/mobile refinements
   ============================================================ */

/* Hide Gravity Forms "* indicates required fields" notice */
.lead-card .gform_required_legend,
.lead-card .gfield_required_text,
.gform_wrapper .gform_required_legend{display:none!important}

/* Stronger contrast on gold accent text (was too light on cream) */
:root{ --teal-dark:#8a6a32; }            /* deeper antique gold for readable text */
.doc-spec{color:#9a7838}
.svc-card p,.usp-card p,.tech-card p{color:#544e44}   /* darker body copy */
.section .lead{color:#544e44}

/* USP + Services mobile: comfortable single-column cards, left-aligned text */
@media(max-width:680px){
  .svc-card,.usp-card{padding:24px 22px;text-align:right}
  .svc-card .svc-ic,.usp-card .usp-ic{margin-right:0;margin-left:auto}
  .svc-card h3,.usp-card h3{font-size:1.15rem}
  .svc-card p,.usp-card p{font-size:.95rem;line-height:1.7}
  .faq-item summary{padding:18px 18px;font-size:1rem;align-items:flex-start}
  .faq-answer{padding:0 18px 18px;font-size:.95rem}
  .tech-card{padding:20px 18px}
  .grid{gap:16px}
}

/* Fix horizontal overflow on mobile (RTL): WP a11y-speak + datepicker
   off-screen regions widen the document in RTL. Clamp them out of flow. */
.a11y-speak-region,
#a11y-speak-assertive,
#a11y-speak-polite{
  position:absolute!important;width:1px!important;height:1px!important;
  margin:-1px!important;padding:0!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
  left:auto!important;right:auto!important;inset-inline-start:0!important;
}
#ui-datepicker-div{left:auto}
html,body{overflow-x:clip;max-width:100%}

/* ============================================================
   FINAL responsive overrides — placed last so they always win
   (base grid rules appear later in source than the earlier
    @media block, so we re-assert mobile columns here).
   ============================================================ */
@media(max-width:980px){
  .svc-grid,.usp-grid,.tech-grid{grid-template-columns:repeat(2,1fr)}
  .doc-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .doc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .svc-grid,.usp-grid,.tech-grid,.why-grid,.tst-grid,.doc-grid{grid-template-columns:1fr!important}
  .offer-card{flex:0 0 100%!important}
  #doctors .reveal{opacity:1!important;transform:none!important}
}

/* Technology redesign overrides */
.tech-section .tech-grid{grid-template-columns:repeat(3,1fr)}
.tech-section .tech-card p{color:#544e44}
@media(max-width:980px){
  .tech-section .tech-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .tech-section .tech-grid{grid-template-columns:1fr!important}
}

/* ---------- CTA button animations ---------- */
@keyframes rootsBookPulse{
  0%,100%{box-shadow:0 12px 28px rgba(160,126,63,.32),0 0 0 0 rgba(201,166,107,.34)}
  50%{box-shadow:0 16px 34px rgba(160,126,63,.42),0 0 0 10px rgba(201,166,107,0)}
}
@keyframes rootsWhatsAppPulse{
  0%,100%{transform:scale(1);box-shadow:0 10px 24px rgba(37,211,102,.42)}
  50%{transform:scale(1.07);box-shadow:0 14px 34px rgba(37,211,102,.58)}
}
@keyframes rootsMobileWhatsAppGlow{
  0%,100%{box-shadow:inset 0 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:inset 0 0 0 999px rgba(255,255,255,.08)}
}
.hero-actions .btn-primary,
.header-cta .btn-primary,
.final-cta-actions .btn-primary,
.tech-actions .btn-primary,
.lead-card .gform_wrapper .gform_footer input[type=submit],
.lead-card .gform_wrapper .gform_footer button{
  animation:rootsBookPulse 2.6s ease-in-out infinite;
}
.wa-float{
  animation:rootsWhatsAppPulse 2.8s ease-in-out infinite;
}
.mobile-cta .m-wa{
  animation:rootsMobileWhatsAppGlow 2.4s ease-in-out infinite;
}
.hero-actions .btn-primary:hover,
.header-cta .btn-primary:hover,
.final-cta-actions .btn-primary:hover,
.tech-actions .btn-primary:hover,
.lead-card .gform_wrapper .gform_footer input[type=submit]:hover,
.lead-card .gform_wrapper .gform_footer button:hover,
.wa-float:hover{
  animation-play-state:paused;
}
@media (prefers-reduced-motion: reduce){
  .hero-actions .btn-primary,
  .header-cta .btn-primary,
  .final-cta-actions .btn-primary,
  .tech-actions .btn-primary,
  .lead-card .gform_wrapper .gform_footer input[type=submit],
  .lead-card .gform_wrapper .gform_footer button,
  .wa-float,
  .mobile-cta .m-wa{
    animation:none!important;
  }
}