/* ===========================================================
   The Alpha's — Design System
   Dark charcoal/green background, cream text, gold accents.
   Fonts: Cormorant Garamond (display) + DM Sans (body)
   =========================================================== */

:root{
  --bg:#10140f;
  --bg-soft:#151b13;
  --fg:#f3ead9;
  --muted:#b3ae9f;
  --card:#1a2018;
  --card-hover:#1f271c;
  --border:rgba(217,169,78,.18);
  --border-strong:rgba(217,169,78,.4);

  --gold:#d9a94e;
  --gold-light:#e8c37a;
  --gold-dim:#a67f3a;

  --lavender:#cbbed8;
  --peach:#f0c9b8;
  --sage:#33402c;
  --beige:#e5ceb9;
  --taupe:#9b8b81;
  --green:#2a3524;
  --darkgreen:#1a2216;

  --danger:#e57373;
  --danger-bg:rgba(229,115,115,.08);
  --danger-border:rgba(229,115,115,.35);

  --radius:14px;
  --radius-lg:20px;
  --container:1280px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'DM Sans','Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
h1,h2,h3,h4{
  font-family:'Cormorant Garamond','Georgia',serif;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 .4em;
  color:var(--fg);
}
p{margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.25rem;
}
@media(min-width:1024px){ .container{padding:0 2rem;} }

.section{padding:5rem 0;}
@media(max-width:640px){ .section{padding:3.25rem 0;} }

.text-center{text-align:center;}
.text-left{text-align:left;}
.muted{color:var(--muted);}
.eyebrow{
  display:inline-block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow--gold{color:var(--gold);}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.85rem 1.6rem;
  border-radius:999px;
  font-size:.9rem;
  font-weight:600;
  font-family:'DM Sans',sans-serif;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--fg); color:var(--bg);}
.btn-primary:hover{opacity:.9;}
.btn-outline{background:var(--card); border-color:var(--border); color:var(--fg);}
.btn-outline:hover{background:var(--card-hover);}
.btn-gold{background:var(--gold); color:#181405;}
.btn-gold:hover{opacity:.92;}
.btn-dark{background:var(--bg); color:var(--fg); border:1px solid rgba(243,234,217,.25);}
.btn-dark:hover{background:rgba(243,234,217,.08);}
.btn-block{width:100%;}
.btn-row{display:flex; flex-wrap:wrap; gap:.75rem;}

/* Badge / pill */
.pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid var(--border);
  background:var(--card);
  padding:.4rem 1rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Cards */
.card{
  border:1px solid var(--border);
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:1.75rem;
}
.card-hover{transition:border-color .2s ease, box-shadow .2s ease;}
.card-hover:hover{border-color:var(--border-strong); box-shadow:0 12px 32px rgba(0,0,0,.35);}

/* Grids */
.grid{display:grid; gap:1.5rem;}
.grid-2{grid-template-columns:repeat(1,1fr);}
.grid-3{grid-template-columns:repeat(1,1fr);}
.grid-4{grid-template-columns:repeat(2,1fr);}
@media(min-width:640px){
  .grid-2{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1024px){
  .grid-3{grid-template-columns:repeat(3,1fr);}
  .grid-4{grid-template-columns:repeat(4,1fr);}
  .grid-5{grid-template-columns:repeat(5,1fr);}
}

.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:3rem;
}
.section-head h2{font-size:2.2rem; margin-top:.4rem;}
.section-head .link-more{
  font-size:.9rem; font-weight:600; display:inline-flex; align-items:center; gap:.35rem;
}
.section-head .link-more:hover{color:var(--gold);}

/* Icon chip */
.icon-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.75rem; height:2.75rem;
  border-radius:.85rem;
  background:rgba(203,190,216,.16);
  color:var(--fg);
  margin-bottom:1rem;
  font-size:1.3rem;
}
.icon-chip--gold{background:rgba(217,169,78,.16); color:var(--gold);}

/* ============ HEADER / NAV ============ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(16,20,15,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  height:4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--fg);
}
.nav-links{
  display:none;
  align-items:center;
  gap:1.75rem;
}
.nav-links a{
  font-size:.9rem; font-weight:500; color:var(--muted);
  transition:color .15s ease;
}
.nav-links a:hover, .nav-links a.active{color:var(--fg);}
.nav-cta-wrap{display:flex; align-items:center; gap:1rem;}
.nav-toggle{
  background:none; border:none; color:var(--fg); font-size:1.5rem; cursor:pointer;
  line-height:1; padding:.25rem;
}
@media(min-width:1024px){
  .nav-links{display:flex;}
  .nav-toggle{display:none;}
}
.mobile-menu{
  display:none;
  border-top:1px solid var(--border);
  padding:1.25rem;
  background:var(--bg);
}
.mobile-menu.open{display:flex; flex-direction:column; gap:1rem;}
.mobile-menu a{color:var(--muted); font-size:1rem; font-weight:500;}
.mobile-menu a:hover{color:var(--fg);}

/* ============ HERO ============ */
.hero{
  position:relative;
  overflow:hidden;
  padding:4rem 0;
}
.hero-grid{
  display:grid;
  gap:3rem;
  align-items:center;
}
@media(min-width:1024px){ .hero-grid{grid-template-columns:1fr 1fr;} }
.hero h1{
  font-size:2.6rem;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:1.1rem 0 1rem;
}
@media(min-width:640px){ .hero h1{font-size:3.4rem;} }
@media(min-width:1024px){ .hero h1{font-size:4.2rem;} }
.hero p.lede{font-size:1.1rem; color:var(--muted); max-width:34rem;}

.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.35; z-index:0;}
.blob-lavender{background:var(--lavender); width:280px; height:280px; top:-60px; right:-60px;}
.blob-peach{background:var(--peach); width:280px; height:280px; bottom:-60px; left:-60px;}

.hero-visual{
  position:relative; z-index:1;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg, var(--card), var(--darkgreen));
  padding:2.25rem;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.hero-visual .stat-row{display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:1.25rem;}
.hero-visual .stat-row div{flex:1; min-width:100px;}
.hero-visual b{display:block; font-family:'Cormorant Garamond',serif; font-size:1.8rem; color:var(--gold);}
.hero-visual span{font-size:.78rem; color:var(--muted);}

/* ============ TICKER ============ */
.ticker{
  overflow:hidden;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--fg);
  color:var(--bg);
  padding:.9rem 0;
}
.ticker-track{
  display:flex;
  width:max-content;
  gap:2.5rem;
  align-items:center;
  animation:ticker 32s linear infinite;
  white-space:nowrap;
}
.ticker-track span.sep{color:var(--gold); margin-left:2.5rem;}
.ticker-track .item{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.1rem;}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media(prefers-reduced-motion:reduce){ .ticker-track{animation:none;} }

/* ============ LOGO WALL ============ */
.logo-wall{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(255,255,255,.02);}
.logo-wall-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem 2rem; margin-top:2rem;
}
@media(min-width:640px){ .logo-wall-grid{grid-template-columns:repeat(4,1fr);} }
@media(min-width:1024px){ .logo-wall-grid{grid-template-columns:repeat(8,1fr);} }
.logo-wall-grid div{
  text-align:center; font-family:'Cormorant Garamond',serif; font-weight:600;
  color:rgba(243,234,217,.55); font-size:1.05rem;
}
.logo-wall-grid div:hover{color:var(--gold);}

/* ============ WORK / SERVICE / STAT CARDS ============ */
.service-card p{font-size:.9rem; color:var(--muted); margin:0;}
.service-card h3{font-size:1.25rem;}

.work-card{border-radius:var(--radius-lg); overflow:hidden; background:var(--card); border:1px solid var(--border);}
.work-card .thumb{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.92); font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:600;
  text-align:center; padding:1rem; position:relative;
}
.work-card .thumb span{position:relative; z-index:1;}
.work-card .body{padding:1.5rem;}
.work-card .cat{font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--taupe);}
.work-card h3{margin:.25rem 0 .35rem; font-size:1.4rem;}
.tag{
  display:inline-block; background:rgba(229,206,185,.14); color:var(--fg);
  font-size:.72rem; font-weight:600; padding:.3rem .7rem; border-radius:999px; margin:.2rem .35rem .2rem 0;
}

.stat-card{border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); padding:2rem; text-align:center;}
.stat-card .value{font-family:'Cormorant Garamond',serif; font-size:2.6rem; font-weight:700; color:var(--fg);}
.stat-card .label{font-size:.85rem; color:var(--muted); margin-top:.4rem;}

/* ============ TESTIMONIALS ============ */
.testi-card{display:flex; flex-direction:column; border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); padding:1.75rem;}
.testi-card .quote-mark{font-size:1.8rem; color:var(--gold); font-family:'Cormorant Garamond',serif;}
.testi-card blockquote{flex:1; margin:1rem 0; font-size:.92rem; color:rgba(243,234,217,.9);}
.stars{color:var(--gold); letter-spacing:.15em; margin-bottom:.5rem;}
.testi-card figcaption{border-top:1px solid var(--border); padding-top:.75rem; margin-top:.5rem;}
.testi-card .t-name{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.05rem;}
.testi-card .t-brand{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);}

/* ============ PROCESS TIMELINE ============ */
.timeline{position:relative; max-width:900px; margin:3rem auto 0; padding-left:2rem;}
.timeline::before{
  content:''; position:absolute; left:.4rem; top:0; bottom:0; width:2px;
  background:linear-gradient(var(--gold), var(--gold-dim), transparent);
}
.timeline-step{position:relative; padding-bottom:2.5rem;}
.timeline-step::before{
  content:''; position:absolute; left:-2rem; top:.35rem; width:.9rem; height:.9rem;
  border-radius:50%; background:var(--gold); border:2px solid var(--bg); box-shadow:0 0 0 3px rgba(217,169,78,.25);
}
.timeline-step .card{padding:1.5rem 1.75rem;}
.step-tag-row{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.75rem;}
.step-sign{
  background:var(--beige); color:#181405; font-family:'DM Sans',sans-serif; font-weight:700;
  font-size:.75rem; letter-spacing:.12em; padding:.3rem .8rem; border-radius:6px;
}
.step-timing{
  background:rgba(51,64,44,.6); color:var(--gold-light); font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px;
}
.timeline-step h3{font-size:1.5rem; text-transform:uppercase; letter-spacing:.02em;}
.timeline-step p{color:var(--muted); font-size:.92rem; margin:.5rem 0 0;}

.mini-steps{display:grid; gap:1rem; grid-template-columns:repeat(2,1fr);}
@media(min-width:1024px){ .mini-steps{grid-template-columns:repeat(5,1fr);} }
.mini-steps .card{padding:1.25rem;}
.mini-steps .num{font-family:'Cormorant Garamond',serif; font-size:1.9rem; font-weight:700; color:var(--gold);}
.mini-steps .name{font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:600; margin-top:.3rem;}

/* ============ PACKAGES ============ */
.pkg-card{position:relative; display:flex; flex-direction:column; border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); padding:2rem;}
.pkg-card.highlight{border-color:var(--gold); background:rgba(217,169,78,.07);}
.pkg-card .badge-pop{
  position:absolute; top:-.85rem; left:50%; transform:translateX(-50%);
  background:var(--fg); color:var(--bg); font-size:.7rem; font-weight:700;
  padding:.3rem 1rem; border-radius:999px; white-space:nowrap;
}
.pkg-card h3{font-size:1.5rem;}
.pkg-card .subtitle{font-size:.85rem; color:var(--muted); margin-top:.15rem;}
.pkg-card .price{font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:700; margin-top:1.25rem;}
.pkg-card .period{font-size:.82rem; color:var(--muted);}
.pkg-card ul{flex:1; margin:1.5rem 0; display:flex; flex-direction:column; gap:.65rem;}
.pkg-card li{display:flex; gap:.6rem; align-items:flex-start; font-size:.88rem; color:var(--muted);}
.pkg-card li .check{color:var(--sage); flex-shrink:0; margin-top:.15rem;}
.pkg-card li .check::before{content:'✓';}
.color-sage .check{color:#8fae70;}

/* ============ FAQ ============ */
.faq-item{
  border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); padding:1.5rem 1.75rem; margin-bottom:.85rem;
}
.faq-item[open]{border-color:var(--border-strong);}
.faq-item summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.15rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .chev{color:var(--gold); transition:transform .2s ease; font-size:1rem;}
.faq-item[open] summary .chev{transform:rotate(180deg);}
.faq-item p{margin:.9rem 0 0; color:var(--muted); font-size:.92rem;}

/* ============ FORMS ============ */
.field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem;}
.field label{font-size:.85rem; font-weight:600; color:var(--fg);}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--border); background:var(--bg); color:var(--fg);
  padding:.75rem 1rem; border-radius:.7rem; font-family:inherit; font-size:.9rem; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--gold);}
.form-grid{display:grid; gap:1rem;}
@media(min-width:640px){ .form-grid{grid-template-columns:1fr 1fr;} }
.hp-field{position:absolute; left:-9999px; top:auto;}

.alert{border-radius:.85rem; padding:1rem 1.25rem; font-size:.9rem; margin-bottom:1.25rem;}
.alert-success{background:rgba(203,190,216,.14); border:1px solid rgba(203,190,216,.4); color:var(--fg);}
.alert-error{background:var(--danger-bg); border:1px solid var(--danger-border); color:var(--danger);}

.contact-method{
  display:flex; gap:1rem; align-items:flex-start; border:1px solid var(--border); background:var(--card);
  border-radius:var(--radius-lg); padding:1.25rem; transition:border-color .2s ease;
}
.contact-method:hover{border-color:var(--border-strong);}
.contact-method .label{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);}
.contact-method .value{font-size:.92rem; font-weight:600; margin-top:.2rem;}

/* ============ FOOTER ============ */
.site-footer{background:var(--fg); color:var(--bg);}
.footer-grid{display:grid; gap:2.5rem; grid-template-columns:1fr;}
@media(min-width:768px){ .footer-grid{grid-template-columns:repeat(4,1fr);} }
.site-footer h3{color:var(--bg); font-size:1.5rem;}
.site-footer h4{
  color:rgba(16,20,15,.65); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; font-weight:700; margin-bottom:.9rem;
}
.site-footer p{color:rgba(16,20,15,.7); font-size:.9rem;}
.site-footer ul li{margin-bottom:.55rem;}
.site-footer ul a{color:rgba(16,20,15,.8); font-size:.9rem;}
.site-footer ul a:hover{color:var(--bg);}
.footer-legal a{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(16,20,15,.6);}
.footer-connect li{display:flex; align-items:center; gap:.5rem;}
.footer-bottom{
  margin-top:3rem; padding-top:2rem; border-top:1px solid rgba(16,20,15,.12);
  display:flex; flex-direction:column; gap:.6rem; align-items:center; justify-content:space-between; text-align:center;
}
@media(min-width:640px){ .footer-bottom{flex-direction:row; text-align:left;} }
.footer-bottom p{color:rgba(16,20,15,.6); margin:0; font-size:.85rem;}

/* ============ WHATSAPP FAB ============ */
.wa-fab{
  position:fixed; bottom:1.25rem; right:1.25rem; z-index:50;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--gold); color:#181405; font-weight:700; font-size:.88rem;
  padding:.9rem 1.2rem; border-radius:999px; box-shadow:0 10px 30px rgba(217,169,78,.35);
  transition:transform .15s ease;
}
.wa-fab:hover{transform:scale(1.05);}
@media(min-width:640px){ .wa-fab{bottom:2rem; right:2rem;} }
@media(max-width:639px){ .wa-fab-label{display:none;} }

/* ============ ADMIN ============ */
.admin-shell{background:var(--bg); min-height:100vh;}
.admin-login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:var(--bg-soft);}
.admin-login-box{width:100%; max-width:420px; border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); padding:2.5rem;}
.admin-header{border-bottom:1px solid var(--border); background:var(--bg);}
.admin-header .nav{justify-content:space-between;}
.admin-subnav{background:var(--bg-soft); border-bottom:1px solid var(--border); overflow-x:auto;}
.admin-subnav-inner{display:flex; gap:1.5rem; padding:.85rem 1.25rem; white-space:nowrap;}
.admin-subnav-inner a{font-size:.85rem; font-weight:600; color:var(--muted);}
.admin-subnav-inner a:hover, .admin-subnav-inner a.active{color:var(--gold);}
.admin-toolbar{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:1.5rem;}
.admin-toolbar input, .admin-toolbar select{
  border:1px solid var(--border); background:var(--card); color:var(--fg); padding:.6rem .9rem; border-radius:.6rem; font-size:.85rem;
}
.admin-form-card{border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); padding:1.75rem; margin-top:1.5rem;}
.admin-form-card h2{font-size:1.3rem;}
.badge-sm{display:inline-block; font-size:.7rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; background:rgba(217,169,78,.18); color:var(--gold);}
.row-actions{display:flex; gap:.5rem; flex-wrap:wrap;}
.row-actions .btn{padding:.4rem .8rem; font-size:.78rem;}
.pagination{display:flex; gap:.5rem; justify-content:center; margin-top:1.5rem;}
.pagination a, .pagination span{
  display:inline-flex; align-items:center; justify-content:center; min-width:2.2rem; height:2.2rem;
  border:1px solid var(--border); border-radius:.5rem; font-size:.82rem; color:var(--muted);
}
.pagination a:hover{border-color:var(--border-strong); color:var(--fg);}
.pagination .current{background:var(--gold); color:#181405; border-color:var(--gold); font-weight:700;}
.admin-table-wrap{border:1px solid var(--border); background:var(--card); border-radius:var(--radius-lg); overflow:hidden; margin-top:2rem;}
table.leads{width:100%; border-collapse:collapse; font-size:.88rem;}
table.leads thead{background:rgba(229,206,185,.08); text-transform:uppercase; font-size:.7rem; letter-spacing:.08em; color:var(--muted);}
table.leads th, table.leads td{padding:.85rem 1rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--border);}
table.leads tbody tr:hover{background:rgba(255,255,255,.02);}
table.leads .empty{text-align:center; color:var(--muted); padding:3rem 1rem;}

/* Section background helpers */
.bg-soft{background:var(--bg-soft);}
.bg-beige{background:rgba(229,206,185,.06);}
.bg-lavender{background:rgba(203,190,216,.06);}
.bg-peach{background:rgba(240,201,184,.06);}
.bg-sage{background:rgba(51,64,44,.25);}
.bg-dark{background:var(--fg); color:var(--bg);}
.bg-dark h2, .bg-dark p{color:var(--bg);}

/* Legal pages */
.legal h2{font-size:1.5rem; margin-top:2rem;}
.legal p, .legal li{color:var(--muted);}
.legal a{color:var(--gold); text-decoration:underline;}
.legal ul{list-style:disc; padding-left:1.4rem; margin-bottom:1em;}
.legal ul li{margin-bottom:.4em;}