:root{
  --rose:#C95A65;
  --lavender:#CBBED9;
  --green:#7B8D7A;
  --cream:#FAF6F3;
  --charcoal:#3A3A3A;
  --muted:#6B6B6B;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color:var(--charcoal);
  background:var(--cream);
  line-height:1.6;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
.container{width:min(100% - 2rem, 1100px); margin-inline:auto}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#fff; padding:.5rem .75rem; border-radius:.5rem; box-shadow:var(--shadow)}

/* Header */
.site-header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(160%) blur(8px); background:#FAF6F3; border-bottom:1px solid rgba(0,0,0,.05)}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:56px}
.brand{display:inline-flex; gap:.5rem; align-items:center; font-weight:800; letter-spacing:.08em; text-decoration:none; color:var(--charcoal)}
.brand-logo{height:120px; width:auto; display:block; background:transparent}
.brand-logo.small{height:80px}
.nav-toggle{background:transparent; border:0; padding:.5rem; border-radius:.6rem; color:var(--charcoal)}
.nav-toggle:focus-visible{outline:2px solid var(--rose)}
.menu{list-style:none; margin:0; padding:0; display:none; gap:.5rem; ; height:fit-content}
.menu li{display:flex; align-items:stretch; height:100%}
.menu a{
  color:var(--charcoal);
  text-decoration:none;
  font-weight:600;
  display:flex;
  align-items:center;
  padding:0 1rem;
  border-radius:.5rem;
  transition:.2s ease;
  min-height:56px;
}
.menu a:hover{
  color:var(--rose);
  background:rgba(201,90,101,.08);
}

[data-collapsible][data-open]{
  display:flex;
  flex-direction:column;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#FAF6F3;
  border-top:1px solid rgba(0,0,0,.1);
  padding:.75rem;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  z-index:5;
}

[data-collapsible][data-open] a{
  padding:.75rem 1rem;
  border-radius:.5rem;
  transition:.2s ease;
}

[data-collapsible][data-open] a:hover{
  background:rgba(201,90,101,.1);
}

@media (min-width: 800px){
  .nav-toggle{display:none}
  .menu{display:flex; gap:.5rem; height:100%}
  .menu li{display:flex; align-items:stretch; height:100%}
  .menu a{
    display:flex;
    align-items:center;
    padding:0 1rem;
    border-radius:.5rem;
    transition:.2s ease;
    min-height:56px;
  }
  .menu a:hover{
    color:var(--rose);
    background:rgba(201,90,101,.08);
  }
  [data-collapsible]{display:flex !important; flex-direction:row !important; padding:0; position:static; background:transparent; border:none; box-shadow:none}
}

/* Hero */
.hero{
  position:relative;
  isolation:isolate;
  min-height:70vh;
  width:100vw;
  margin-left:calc(50% - 50vw);
  background-image:url('assets/img/hero.jpg');
  background-size:cover;
  background-position:85% top;
  background-repeat:no-repeat;
}
.hero-overlay{position:absolute; inset:0; display:grid; place-items:center; padding:1rem; text-align:center; background:linear-gradient(180deg, rgba(201,90,101,.90), rgba(203,190,217,.90))}
.hero-title{color:#fff; font-weight:800; line-height:1.2; letter-spacing:.02em; font-size:clamp(1.65rem, 1.1rem + 2vw, 3rem); text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero-ctas{display:flex; gap:.75rem; margin-top:1rem; flex-wrap:wrap; justify-content:center}

@media (min-width: 768px){
  .hero{background-position:center top}
}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:2px solid transparent; padding:.7rem 1rem; border-radius:999px; font-weight:700; text-decoration:none; cursor:pointer; transition:.3s ease; position:relative; overflow:hidden}
.btn:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,.15)}
.btn-primary{background:var(--rose); color:#fff}
.btn-primary:hover{filter:brightness(.95)}
.btn-secondary{background:var(--green); color:#fff}
.btn-secondary:hover{filter:brightness(1.05)}
.btn-ghost{background:rgba(255,255,255,.2); color:#fff; border-color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.3)}

/* Sections */
.section{padding:2rem 0; width:100vw; margin-left:calc(50% - 50vw); scroll-margin-top:120px}
.section-alt{background:#fff}
.section-title{font-size:clamp(1.4rem, 1.1rem + 1vw, 2rem); margin:0; text-align:left}
.lead{font-size:1.1rem}

@media (min-width: 768px){
  .section{padding:3rem 0}
}

/* About */
.grid{display:grid; gap:1.25rem}
.grid-about{grid-template-columns:1fr}
.about-media img{border-radius:var(--radius); box-shadow:var(--shadow)}
.checklist{padding-left:1.25rem}
.checklist li{margin:.4rem 0}

#about .container, #testimonials .container{
  max-width:1100px;
  margin:0 auto;
}

@media (max-width: 768px){
  #about{padding:2rem 1.5rem}
  #testimonials{padding:2rem 1.5rem}
}

@media (min-width: 900px){
  .grid-about{grid-template-columns:.8fr 1fr; align-items:start}
}

/* About Section Styling */
.about-subheading{
  margin-top:-.25rem;
  margin-bottom:.5rem;
  font-size:1rem;
  line-height:1.6;
  color:var(--rose);
  font-weight:600;
}

.about-subheading:last-of-type{
  margin-bottom:2rem;
}

/* About Quote */
.about-quote{
  position:relative;
  margin:1.5rem 0;
  padding:0 0 0 3rem;
  font-size:1.1rem;
  font-style:italic;
  color:var(--charcoal);
  line-height:1.7;
}

.about-quote::before{
  content:"\201C";
  position:absolute;
  left:0;
  top:-0.5rem;
  font-size:5rem;
  font-style:normal;
  color:var(--rose);
  line-height:1;
  font-family:Georgia, serif;
}

/* CTA Section */
.cta-section{
  margin-top:2.5rem;
  padding:2rem;
  background:linear-gradient(135deg, rgba(201,90,101,.05), rgba(203,190,217,.08));
  border-radius:var(--radius);
  border-left:4px solid var(--rose);
}

.cta-quote{
  font-size:1.25rem;
  font-weight:700;
  color:var(--rose);
  margin:0 0 1rem 0;
  font-style:italic;
}

.cta-text{
  font-size:1.05rem;
  line-height:1.7;
  color:var(--charcoal);
  margin:0 0 1.5rem 0;
}

.btn-cta{
  display:inline-block;
  margin-top:.5rem;
  font-size:1.05rem;
  padding:.85rem 1.5rem;
}

/* Services */
.grid-services{grid-template-columns:1fr; gap:1rem}
.card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.5rem; transition:.3s ease; position:relative}
.card:hover{transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,.12)}
.card-icon{display:grid; place-items:center; color:var(--rose); margin-bottom:.5rem; transition:.3s ease}
.card-icon .material-icons{font-size:32px}
.card:hover .card-icon{color:var(--charcoal); transform:scale(1.2)}
.card-title{margin:.5rem 0 .5rem; font-size:1.2rem; color:var(--charcoal)}
.card-subtitle{
  margin:0 0 1rem;
  font-size:.95rem;
  color:var(--rose);
  font-weight:600;
}
.card-text{margin:0; color:var(--muted)}
.card-list{
  margin:0;
  padding-left:1.25rem;
  list-style:none;
}
.card-list li{
  margin:.75rem 0;
  line-height:1.6;
  color:var(--charcoal);
  position:relative;
  padding-left:.5rem;
}
.card-list li::before{
  content:"•";
  position:absolute;
  left:-1rem;
  color:var(--rose);
  font-weight:bold;
}
.card-list strong{
  color:var(--rose);
}
@media (min-width:700px){
  .grid-services{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .grid-services{grid-template-columns:repeat(3,1fr)}
}

/* Training */
.training{background:linear-gradient(180deg, var(--cream), #fff)}
.grid-training{grid-template-columns:1fr; align-items:start}
.form-card{padding:1rem}
form label{display:grid; gap:.35rem; margin:.7rem 0}
input, textarea{font:inherit; padding:.7rem .8rem; border:1px solid rgba(0,0,0,.15); border-radius:.7rem; background:#fff}
input:focus, textarea:focus{outline:2px solid var(--lavender); border-color:transparent}
.form-msg{min-height:1.25rem; font-weight:600}
@media (min-width: 900px){
  .grid-training{grid-template-columns:1fr .9fr}
}

/* Testimonials */
#testimonials .section-title{
  text-align:left;
}

/* Carousel */
.carousel{position:relative; overflow:hidden; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow)}
.carousel-track{display:flex; gap:0; padding:0; margin:0; list-style:none; transform:translateX(0); transition:transform .4s ease}
.carousel-slide{min-width:100%; padding:1.25rem 4rem 1.25rem 4rem}
blockquote{margin:0; font-size:1.05rem}
cite{display:block; margin-top:.5rem; color:var(--muted); font-style:normal}
.carousel-btn{position:absolute; top:50%; transform:translateY(-50%); background:#fff; border:1px solid rgba(0,0,0,.1); width:40px; height:40px; border-radius:50%; display:grid; place-items:center; cursor:pointer; transition:.3s ease; z-index:2}
.carousel-btn:hover{background:var(--lavender); transform:translateY(-50%) scale(1.1); box-shadow:0 4px 12px rgba(0,0,0,.15)}
.carousel-btn .material-icons{font-size:20px}
.carousel-btn.prev{left:.5rem}
.carousel-btn.next{right:.5rem}

@media (max-width: 600px){
  .carousel-slide{padding:1.25rem 3rem 1.25rem 3rem}
  .carousel-btn{width:35px; height:35px}
  .carousel-btn .material-icons{font-size:18px}
}

/* Contact */
.contact{display:grid; gap:1rem; grid-template-columns:1fr}
.contact-form{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.contact-form .full{grid-column:1 / -1}

/* Contact links styling */
.contact a[href^="tel"], .contact a[href^="mailto"]{
  color:var(--rose);
  text-decoration:underline;
  text-decoration-color:rgba(201,90,101,.3);
  text-underline-offset:3px;
  font-weight:600;
  transition:.2s ease;
}

.contact a[href^="tel"]:hover, .contact a[href^="mailto"]:hover{
  color:var(--charcoal);
  text-decoration-color:var(--rose);
}

@media (max-width: 600px){
  .contact{gap:2rem}
  .contact-form{grid-template-columns:1fr; gap:.75rem}
  .contact-form .full{grid-column:1}
  .contact p{font-size:.9rem}
}

@media (min-width: 900px){
  .contact{grid-template-columns:1fr 1.2fr}
}

/* Flatpickr Custom Styles */
.flatpickr-calendar {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.1);
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--rose);
  border-color: var(--rose);
}

.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
  background: var(--rose);
  border-color: var(--rose);
  filter: brightness(0.95);
}

.flatpickr-day:hover {
  background: rgba(203,190,217,.2);
  border-color: var(--lavender);
}

.flatpickr-months .flatpickr-month {
  background: var(--rose);
  color: #fff;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--rose);
  color: #fff;
}

.flatpickr-weekdays {
  background: rgba(201,90,101,.1);
}

.span.flatpickr-weekday {
  color: var(--charcoal);
  font-weight: 600;
}

.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
  background: rgba(203,190,217,.2);
}

/* Footer */
.site-footer{background:#221f20; color:#eee; padding:2rem 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.site-footer .brand{color:#eee}
.site-footer a{color:#eee}
.policy{opacity:.8}

/* Fade-in animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in { animation: fadeIn 0.6s ease forwards; }
.fade-in-up { animation: fadeInUp 0.8s ease forwards; }

/* Stagger animations for cards */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important}
}


