/* =========================================================
   Aura & Elegance 2026 – Main Stylesheet
   ========================================================= */

/* -------------------------------
   CSS Variables / Design Tokens
-------------------------------- */
:root{
  --ae-ink: #2e2e2e;
  --ae-muted: #6f6f6f;

  --ae-bg: #f7f4ef;
  --ae-surface: #ffffff;

  --ae-accent: #d4b883;          /* Champagne Gold */
  --ae-accent-soft: #f4efe6;

  --ae-sage: #7a8f73;
  --ae-beige: #e7dfd4;

  --ae-radius-sm: 10px;
  --ae-radius-lg: 18px;

  --ae-shadow-soft: 0 10px 30px rgba(0,0,0,.06);

  --ae-max-width: 1180px;
}

/* -------------------------------
   Base Reset
-------------------------------- */
*,
*::before,
*::after{
  box-sizing: border-box;
}

html, body{
  margin:0;
  padding:0;
}

body{
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--ae-bg);
  color: var(--ae-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  color: inherit;
  text-decoration: none;
}

/* -------------------------------
   Layout Helpers
-------------------------------- */
.ae-container{
  max-width: var(--ae-max-width);
  margin-inline: auto;
  padding: 0 18px;
}

.ae-section{
  padding: 72px 0;
}

@media (max-width: 768px){
  .ae-section{ padding: 56px 0; }
}

/* -------------------------------
   Typography
-------------------------------- */
.ae-h1,
.ae-h2,
.ae-h3{
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  letter-spacing: .3px;
}

.ae-h1{
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.1;
  margin: 12px 0;
}

.ae-h2{
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 10px;
}

.ae-h3{
  font-size: 22px;
  margin: 0 0 6px;
}

.ae-muted{
  color: var(--ae-muted);
}

/* -------------------------------
   Pills / Badges
-------------------------------- */
.ae-pill{
  display:inline-block;
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 999px;
  background: var(--ae-accent-soft);
  border: 1px solid rgba(46,46,46,.08);
  white-space: nowrap;
}

/* -------------------------------
   Buttons
-------------------------------- */
.ae-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(46,46,46,.15);
  background: rgba(255,255,255,.8);
  font-weight: 500;
  transition: transform .15s ease, box-shadow .15s ease;
}

.ae-btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--ae-shadow-soft);
}

.ae-btn--primary{
  background: var(--ae-accent);
  border-color: var(--ae-accent);
  color: #1f1f1f;
}

/* -------------------------------
   Cards
-------------------------------- */
.ae-card{
  background: var(--ae-surface);
  border-radius: var(--ae-radius-lg);
  border: 1px solid rgba(46,46,46,.08);
  box-shadow: var(--ae-shadow-soft);
}

/* =========================================================
   HERO SECTION
   ========================================================= */
.ae-hero{
  position: relative;
  overflow: hidden;
  border-radius: var(--ae-radius-lg);
  min-height: 520px;
  display: grid;
  align-items: end;
}

.ae-hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  object-position:center;
  transform: scale(1.02);
}

.ae-hero__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.55) 70%,
    rgba(0,0,0,.65) 100%
  );
}

.ae-hero__content{
  position: relative;
  z-index: 2;
  padding: 36px;
  max-width: 720px;
  color: #fff;
}

@media (max-width: 768px){
  .ae-hero{
    min-height: 460px;
  }
  .ae-hero__content{
    padding: 22px;
  }
}

/* =========================================================
   SERVICES GRID (generic)
   ========================================================= */
.ae-services{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 18px;
}

.ae-service{
  padding: 18px;
  border-radius: var(--ae-radius-lg);
  background: rgba(244,239,234,.85);
  border: 1px solid rgba(46,46,46,.08);
  transition: transform .15s ease;
}

.ae-service:hover{
  transform: translateY(-3px);
}

/* =========================================================
   BEFORE / AFTER SLIDER
   ========================================================= */
.ae-ba{
  padding: 18px;
}

.ae-ba__stage{
  position: relative;
  overflow: hidden;
  border-radius: var(--ae-radius-lg);
  aspect-ratio: 16/9;
  background:#000;
}

@media (max-width: 980px){
  .ae-ba__stage{ aspect-ratio: 4/5; }
}

.ae-ba__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  pointer-events:none;
}

.ae-ba__before{
  position:absolute;
  inset:0;
  width:50%;
  overflow:hidden;
}

.ae-ba__divider{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background: var(--ae-accent);
  box-shadow: 0 0 0 6px rgba(212,184,131,.14);
}

.ae-ba__handle{
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(46,46,46,.15);
  display:grid;
  place-items:center;
  cursor: ew-resize;
}

.ae-ba__handle-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--ae-accent);
  box-shadow: 0 0 0 8px rgba(212,184,131,.2);
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.ae-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  flex-wrap:wrap;
}

.ae-tmony{
  padding: 18px;
  margin-top: 18px;
}

.ae-tmony__viewport{
  overflow:hidden;
}

.ae-tmony__track{
  display:flex;
  gap: 14px;
  transition: transform .25s ease;
}

.ae-tmony__slide{
  flex: 0 0 100%;
  padding: 18px;
  border-radius: var(--ae-radius-lg);
  background: var(--ae-accent-soft);
  border: 1px solid rgba(46,46,46,.08);
  position: relative;
}

@media (min-width: 980px){
  .ae-tmony__slide{ flex-basis: calc(50% - 7px); }
}

.ae-tmony__quote{
  position:absolute;
  top: 10px;
  left: 14px;
  font-size: 40px;
  opacity:.35;
  color: var(--ae-accent);
}

.ae-tmony__text{
  font-size: 15px;
  line-height: 1.7;
}

.ae-tmony__meta{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top: 12px;
}

.ae-tmony__avatar{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--ae-accent), var(--ae-sage));
  opacity:.7;
}

.ae-tmony__name{
  font-weight: 600;
}

.ae-tmony__sub{
  font-size: 12px;
  opacity:.7;
}

/* Controls */
.ae-tmony__controls{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.ae-iconbtn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(46,46,46,.15);
  display:grid;
  place-items:center;
  font-size: 22px;
  cursor:pointer;
}

.ae-tmony__dots{
  display:flex;
  gap: 8px;
  flex:1;
  justify-content:center;
}

.ae-tmony__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background:#fff;
  border: 1px solid rgba(46,46,46,.15);
}

.ae-tmony__dot.is-active{
  background: var(--ae-accent);
  border-color: var(--ae-accent);
}

/* =========================================================
   FOOTER (basic)
   ========================================================= */
footer{
  padding: 48px 0;
  background: #1f1f1f;
  color:#eee;
}

footer a{ color:#eee; }

/* =========================================================
   WooCommerce safe basics
   ========================================================= */
.woocommerce ul.products{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap:18px;
}

.woocommerce ul.products li.product{
  border-radius: var(--ae-radius-lg);
  padding: 14px;
  background: var(--ae-surface);
  border: 1px solid rgba(46,46,46,.08);
}

/* Services grid card (with featured image) */
.ae-service-card{
  overflow: hidden;
  border-radius: var(--ae-radius-lg);
  display:flex;
  flex-direction: column;
  min-height: 380px;
}

.ae-service-card__media{
  position: relative;
  height: 180px;
  overflow:hidden;
}

.ae-service-card__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
}

.ae-service-card__shade{
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.20) 65%,
    rgba(0,0,0,0.28) 100%
  );
}

.ae-service-card__body{
  padding: 16px 16px 18px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.ae-service-meta{
  margin-top:auto;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

/* -----------------------------
   Services: balanced cards
------------------------------ */
.ae-services-grid{
  align-items: stretch;
}

.ae-service-card{
  overflow: hidden;
  border-radius: var(--ae-radius-lg);
  display:flex;
  flex-direction: column;
  min-height: 340px;
}

@media (max-width: 767px){
  .ae-service-card{ min-height: auto; }
}

.ae-service-card__media{
  position: relative;
  height: 140px;
  overflow:hidden;
  border-top-left-radius: var(--ae-radius-lg);
  border-top-right-radius: var(--ae-radius-lg);
}

@media (min-width: 768px){
  .ae-service-card__media{ height: 160px; }
}

.ae-service-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.01);
  transition: transform .35s ease;
}

.ae-service-card__shade{
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.03) 0%,
    rgba(0,0,0,0.12) 70%,
    rgba(0,0,0,0.18) 100%
  );
  transition: opacity .35s ease;
}

.ae-service-card__badge{
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(46,46,46,0.12);
  box-shadow: var(--ae-shadow-soft);
}

.ae-service-card__body{
  padding: 16px 16px 18px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.ae-service-meta{
  margin-top:auto;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Hover polish */
.ae-service-card{
  transition: transform .18s ease, box-shadow .18s ease;
}
.ae-service-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
}
.ae-service-card:hover .ae-service-card__media img{
  transform: scale(1.06);
}
.ae-service-card:hover .ae-service-card__shade{
  opacity: .85;
}

/* CTA reveal (subtle) */
.ae-service-card__cta{
  transition: transform .18s ease;
}
.ae-service-card:hover .ae-service-card__cta{
  transform: translateY(-1px);
}

/* -----------------------------
   Modal (Quick View)
------------------------------ */
.ae-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
  padding: 18px;
  background: rgba(18,18,18,0.55);
}

.ae-modal.is-open{
  display: grid;
  place-items: center;
}

.ae-modal__panel{
  width: min(920px, 100%);
  background: var(--ae-surface);
  border-radius: var(--ae-radius-lg);
  border: 1px solid rgba(46,46,46,0.10);
  box-shadow: 0 30px 80px rgba(0,0,0,.25);
  overflow: hidden;
}

.ae-modal__top{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(244,239,234,0.85);
  border-bottom: 1px solid rgba(46,46,46,0.08);
}

.ae-modal__title{
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  margin: 0;
}

.ae-modal__close{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(46,46,46,0.14);
  background: rgba(255,255,255,0.9);
  cursor: pointer;
  font-size: 18px;
}

.ae-modal__body{
  padding: 16px;
}

.ae-modal__grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
}

@media (max-width: 860px){
  .ae-modal__grid{ grid-template-columns: 1fr; }
}

.ae-modal__media{
  border-radius: var(--ae-radius-lg);
  overflow:hidden;
  border: 1px solid rgba(46,46,46,0.08);
  background: #000;
}
.ae-modal__media img{
  width:100%;
  height: 340px;
  object-fit: cover;
  display:block;
}

@media (max-width: 860px){
  .ae-modal__media img{ height: 260px; }
}

.ae-modal__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}