/* Élevé Aesthetics — Dr. Abdulrahman Abdulbaky — global design tokens */
:root{
--ea-ink-1:#1B1C19;
--ea-ink-2:#2B2D28;
--ea-warm-gray-1:#6C6F66;
--ea-warm-gray-2:#8B8E83;
--ea-warm-gray-3:#C7CBBF;
--ea-cream-1:#FAF9F5;
--ea-cream-2:#F1F0E9;
--ea-sand:#EBE8E0;
--ea-gold-1:#7E9B76;
--ea-gold-2:#63805B;
--ea-terracotta:#7E9B76;
--ea-white:#FFFFFF;
--ea-sage-dark:#33402F;
--ea-font-display:'Newsreader', Georgia, 'Times New Roman', serif;
--ea-font-body:'Manrope', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
body, .et_pb_section, #main-content { background-color: var(--ea-cream-1); color: var(--ea-ink-2); font-family: var(--ea-font-body); }
h1,h2,h3,h4,h5,h6, .ea-display { font-family: var(--ea-font-display); color: var(--ea-ink-1); font-weight:500; line-height:1.1; letter-spacing:0; }
h1{ font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
h2{ font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); }
h3{ font-size:1.75rem; }
p, li { font-family: var(--ea-font-body); line-height:1.7; }
.ea-eyebrow{ display:inline-block; font-family: var(--ea-font-body); font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.14em; color: var(--ea-gold-1); margin-bottom:14px; }
.ea-eyebrow-light{ color: var(--ea-cream-2); }
.ea-section{ padding: 96px 0; }
.ea-section-sm{ padding: 64px 0; }
.ea-bg-dark{ background-color: var(--ea-sage-dark); }
.ea-bg-dark h1, .ea-bg-dark h2, .ea-bg-dark h3, .ea-bg-dark p, .ea-bg-dark li, .ea-bg-dark span{ color: var(--ea-cream-1); }
.ea-bg-alt{ background-color: var(--ea-cream-2); }
.ea-divider{ border-top:1px solid var(--ea-sand); }
.ea-btn{ display:inline-block; font-family: var(--ea-font-body); font-weight:600; font-size:0.875rem; letter-spacing:0.04em; text-transform:none; padding:16px 32px; border-radius:2px; text-decoration:none; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.ea-btn-primary{ background-color: var(--ea-gold-1); color:#fff; border:1px solid var(--ea-gold-1); }
.ea-btn-primary:hover{ background-color: var(--ea-gold-2); border-color: var(--ea-gold-2); color:#fff; }
.ea-btn-outline-light{ background-color:transparent; color: var(--ea-cream-1); border:1px solid rgba(250,245,238,0.6); }
.ea-btn-outline-light:hover{ background-color: rgba(250,245,238,0.12); }
.ea-btn-dark{ background-color: var(--ea-ink-1); color:#fff; border:1px solid var(--ea-ink-1); }
.ea-btn-dark:hover{ background-color: var(--ea-ink-2); }
.ea-btn-sm{ padding:10px 22px; font-size:0.8125rem; }
.ea-badge{ display:inline-block; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.08em; padding:6px 14px; border-radius:2px; }
.ea-badge-dark{ background-color: var(--ea-ink-1); color:#fff; }
.ea-badge-accent{ background-color: var(--ea-gold-1); color:#fff; }
.ea-pull-quote{ font-family: var(--ea-font-display); font-style:italic; font-size:1.25rem; color: var(--ea-ink-1); border-left:2px solid var(--ea-terracotta); padding-left:20px; }
.ea-timeline{ border-left:1px solid var(--ea-sand); }
.ea-timeline-item{ position:relative; padding:0 0 40px 28px; }
.ea-timeline-dot{ position:absolute; left:-6px; top:4px; width:11px; height:11px; border-radius:50%; background: var(--ea-gold-1); }
.ea-timeline-year{ font-family: var(--ea-font-body); font-size:0.8125rem; text-transform:uppercase; letter-spacing:0.1em; color: var(--ea-gold-1); margin-bottom:4px; }
.ea-timeline-title{ font-family: var(--ea-font-display); font-size:1.25rem; color: var(--ea-ink-1); }
.ea-award{ border-top:1px solid rgba(255,255,255,.18); padding-top:24px; }
.ea-trust-strip{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; padding:28px 0; font-size:0.8125rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--ea-warm-gray-1); }
.ea-card{ background: var(--ea-white); border-radius:10px; overflow:hidden; }
.ea-field{ display:flex; flex-direction:column; gap:6px; font-size:0.875rem; color: var(--ea-ink-2); margin-bottom:18px; }
.ea-field input, .ea-field textarea, .ea-field select{ font-family: var(--ea-font-body); border:1px solid var(--ea-sand); border-radius:2px; padding:12px 14px; font-size:0.9375rem; background: var(--ea-cream-1); color: var(--ea-ink-1); }
.ea-field input:focus, .ea-field textarea:focus, .ea-field select:focus{ outline:2px solid var(--ea-gold-1); outline-offset:1px; }
details.ea-accordion-item{ border-bottom:1px solid var(--ea-sand); padding:18px 0; }
details.ea-accordion-item summary{ cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-family: var(--ea-font-display); font-size:1.125rem; color: var(--ea-ink-1); list-style:none; }
details.ea-accordion-item summary::-webkit-details-marker{ display:none; }
details.ea-accordion-item .ea-price{ font-family: var(--ea-font-body); font-size:0.875rem; color: var(--ea-mustard-dark); margin-left:16px; }
.ea-tab-nav{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px; }
.ea-tab-nav a{ font-family: var(--ea-font-body); font-size:0.875rem; padding:10px 20px; border:1px solid var(--ea-sand); border-radius:2px; text-decoration:none; color: var(--ea-ink-2); }
.ea-tab-nav a.ea-active{ background: var(--ea-ink-1); border-color: var(--ea-ink-1); color:#fff; }
.ea-testimonial{ text-align:center; max-width:640px; margin:0 auto; }
.ea-testimonial .ea-quote-mark{ font-family: var(--ea-font-display); font-size:4rem; color: var(--ea-gold-1); line-height:1; }
.ea-testimonial p{ font-family: var(--ea-font-display); font-size:1.375rem; font-style:italic; color: var(--ea-cream-1); line-height:1.4; margin:16px 0 20px; }
.ea-map-placeholder{ background: var(--ea-cream-2); border:1px solid var(--ea-sand); border-radius:10px; padding:60px 24px; text-align:center; color: var(--ea-warm-gray-1); font-size:0.875rem; }
@media (max-width: 980px){
.ea-section{ padding:64px 0; }
}
/* Tab-panel + accordion plus-icon interactivity (added for real tab switching) */
.ea-tab-panel{ display:none; }
.ea-tab-panel.ea-panel-active{ display:block; }
.ea-accordion-item summary{ position:relative; padding-right:30px; }
.ea-plus-icon{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:16px; height:16px; display:inline-block; }
.ea-plus-icon::before, .ea-plus-icon::after{ content:''; position:absolute; background:var(--ea-gold-1); transition:transform .18s ease; }
.ea-plus-icon::before{ left:7px; top:0; width:2px; height:16px; }
.ea-plus-icon::after{ left:0; top:7px; width:16px; height:2px; }
details.ea-accordion-item[open] .ea-plus-icon::before{ transform:rotate(90deg); opacity:0; }
/* Sage Clinical direction additions */
.ea-display-italic{ font-family: var(--ea-font-display); font-style: italic; font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; color: var(--ea-ink-1); }
.ea-card{ background: var(--ea-white); border: 1px solid var(--ea-sand); border-radius: 20px; padding: 32px; box-shadow: 0 12px 32px -20px rgba(51,64,47,0.25); }
.ea-stat-card{ background: var(--ea-white); border: 1px solid var(--ea-sand); border-radius: 20px; padding: 28px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.ea-ring{ position:relative; width:64px; height:64px; }
.ea-ring svg{ transform: rotate(-90deg); }
.ea-ring-bg{ fill:none; stroke: var(--ea-sand); stroke-width: 6; }
.ea-ring-fg{ fill:none; stroke: var(--ea-gold-1); stroke-width: 6; stroke-linecap: round; }
.ea-ring-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family: var(--ea-font-body); font-weight:700; font-size:0.8rem; color: var(--ea-ink-1); }
.ea-status-badge{ display:inline-flex; align-items:center; gap:6px; font-size:0.75rem; font-weight:600; padding:5px 12px; border-radius:100px; background: rgba(126,155,118,0.12); color: var(--ea-gold-2); }
.ea-status-badge::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--ea-gold-1); }
.ea-toggle{ display:inline-flex; background: var(--ea-cream-2); border-radius: 100px; padding: 4px; gap:4px; }
.ea-toggle button{ font-family: var(--ea-font-body); font-size:0.875rem; font-weight:600; padding:10px 24px; border-radius:100px; border:none; background:transparent; color: var(--ea-warm-gray-1); cursor:pointer; transition: all .18s ease; }
.ea-toggle button.ea-toggle-active{ background: var(--ea-mustard); color:#241C16; }
.ea-compare-panel{ display:none; }
.ea-compare-panel.ea-panel-active{ display:grid; }
.ea-btn{ border-radius:4px !important; }
.ea-badge{ border-radius:4px !important; }
/* Hero dashboard + carousel additions */
.ea-float-card{ position:absolute; background:#fff; border:1px solid var(--ea-sand); border-radius:16px; padding:16px 18px; box-shadow:0 16px 40px -20px rgba(27,28,25,0.28); z-index:5; }
.ea-carousel-nav{ display:flex; align-items:center; gap:14px; margin-top:18px; }
.ea-carousel-nav button{ width:34px; height:34px; border-radius:50%; border:1px solid var(--ea-sand); background:#fff; cursor:pointer; font-size:1rem; color:var(--ea-ink-1); display:flex; align-items:center; justify-content:center; }
.ea-carousel-nav button:hover{ background:var(--ea-cream-2); }
.ea-carousel-count{ font-family:var(--ea-font-body); font-size:0.8125rem; color:var(--ea-warm-gray-1); }
.ea-img-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; border-radius:16px; overflow:hidden; margin-bottom:20px; }
.ea-img-grid img{ width:100%; height:180px; object-fit:cover; display:block; }
/* Header / footer restyle for Sage Clinical */
.ea-header-bar{ background:#FFFFFF; border-bottom:1px solid var(--ea-sand); }
/* Motion additions: scroll fade-in, floating cards, rotator (JS-gated so content stays visible if JS fails) */
body.ea-anim-ready .ea-section, body.ea-anim-ready .ea-section-sm { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
body.ea-anim-ready .ea-section.ea-in-view, body.ea-anim-ready .ea-section-sm.ea-in-view { opacity:1; transform:translateY(0); }
@keyframes ea-float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.ea-floaty { animation: ea-float 5s ease-in-out infinite; }
.ea-floaty-slow { animation: ea-float 6.5s ease-in-out infinite; animation-delay: .8s; }
.ea-rotator{ position:relative; min-height:96px; }
.ea-rotator-slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.ea-rotator-slide.ea-rotator-active{ opacity:1; }
@media (prefers-reduced-motion: reduce) {
body.ea-anim-ready .ea-section, body.ea-anim-ready .ea-section-sm { opacity:1 !important; transform:none !important; transition:none !important; }
.ea-floaty, .ea-floaty-slow { animation:none !important; }
}
/* Premium consultation form styling (Sage Clinical) */
.et_pb_contact_form_container{ background:#fff; border:1px solid var(--ea-sand); border-radius:20px; padding:36px; box-shadow:0 20px 48px -28px rgba(51,64,47,0.28); }
.et_pb_contact_form_container .et_pb_contact_field{ margin-bottom:18px !important; }
.et_pb_contact_form_container .et_pb_contact_form_label{ display:block; font-family:var(--ea-font-body); font-size:0.8125rem; font-weight:600; color:var(--ea-ink-1); margin-bottom:6px; }
.et_pb_contact_form_container .input,
.et_pb_contact_form_container select.et_pb_contact_select,
.et_pb_contact_form_container textarea{
width:100% !important; box-sizing:border-box; background:var(--ea-cream-1) !important; border:1px solid var(--ea-sand) !important;
border-radius:10px !important; padding:13px 16px !important; font-family:var(--ea-font-body) !important; font-size:0.9375rem !important;
color:var(--ea-ink-1) !important; transition:border-color .15s ease, background .15s ease; appearance:none; -webkit-appearance:none;
}
.et_pb_contact_form_container .input::placeholder{ color:var(--ea-warm-gray-2); }
.et_pb_contact_form_container .input:focus,
.et_pb_contact_form_container select.et_pb_contact_select:focus,
.et_pb_contact_form_container textarea:focus{ outline:none !important; border-color:var(--ea-mustard) !important; background:#fff !important; box-shadow:0 0 0 3px rgba(224,169,58,0.15) !important; }
.et_pb_contact_form_container select.et_pb_contact_select{
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important; background-position:right 14px center !important; background-size:16px !important; padding-right:40px !important;
}
.et_pb_contact_form_container input[type=date]{ font-family:var(--ea-font-body) !important; }
.et_pb_contact_form_container input[type=date]::-webkit-calendar-picker-indicator{ opacity:0.65; cursor:pointer; }
.et_pb_contact_form_container textarea{ min-height:120px; resize:vertical; }
.et_pb_contact_form_container .et_pb_contact_submit{
background:var(--ea-mustard) !important; color:#241C16 !important; border:1px solid var(--ea-mustard) !important; border-radius:8px !important;
padding:15px 34px !important; font-family:var(--ea-font-body) !important; font-weight:700 !important; font-size:0.9375rem !important; box-shadow:none !important; width:100% !important;
}
.et_pb_contact_form_container .et_pb_contact_trust_line{ display:block; text-align:center; font-family:var(--ea-font-body); font-size:0.8125rem; color:var(--ea-warm-gray-1); margin-top:14px; }
.et_pb_contact_form_container .et_pb_contact_submit:hover{ background:var(--ea-mustard-dark) !important; border-color:var(--ea-mustard-dark) !important; }
/* Hide the built-in math captcha visually; JS auto-fills the correct answer so validation still passes */
.et_pb_contact_form_container .et_pb_contact_right{ position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }
/* Honeypot field (added via JS) — invisible to humans, visible to bots */
.ea-honeypot{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
/* Before & After auto-scrolling marquee gallery */
.ea-marquee-wrap{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; user-select:none; }
.ea-marquee-wrap::-webkit-scrollbar{ display:none; }
.ea-marquee-wrap.ea-dragging{ cursor:grabbing; }
.ea-marquee-track{ display:flex; gap:20px; width:max-content; padding:4px 4px 20px; }
.ea-marquee-card{ flex:0 0 auto; width:320px; border-radius:20px; overflow:hidden; background:#fff; border:1px solid var(--ea-sand); box-shadow:0 16px 36px -24px rgba(51,64,47,0.3); }
.ea-marquee-card img{ width:320px; height:240px; object-fit:cover; display:block; }
@media (max-width:640px){ .ea-marquee-card{ width:240px; } .ea-marquee-card img{ width:240px; height:180px; } }
/* Before & After marquee nav arrows */
.ea-marquee-outer{ position:relative; }
.ea-marquee-nav-btn{
position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:44px; height:44px; border-radius:50%;
background:#fff; border:1px solid var(--ea-sand); box-shadow:0 10px 24px -14px rgba(51,64,47,0.35);
display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .18s ease, border-color .18s ease;
}
.ea-marquee-nav-btn svg{ width:18px; height:18px; stroke:var(--ea-ink-1); transition:stroke .18s ease; }
.ea-marquee-nav-btn:hover{ background:var(--ea-gold-1); border-color:var(--ea-gold-1); }
.ea-marquee-nav-btn:hover svg{ stroke:#fff; }
.ea-marquee-prev{ left:-8px; }
.ea-marquee-next{ right:-8px; }
@media (max-width:900px){ .ea-marquee-prev{ left:4px; } .ea-marquee-next{ right:4px; } .ea-marquee-nav-btn{ width:38px; height:38px; } }
/* Performance: hint the browser to composite these on the GPU */
.ea-floaty, .ea-floaty-slow, .ea-marquee-track, .ea-rotator-slide{ will-change: transform; }
/* Base (desktop) styling for the real .ea-nav-panel nav — confirmed via live HTML this is the actual
element rendering Home/About/Services/Contact. Previously only had rules inside the mobile media query,
so at desktop widths it fell back to unstyled