/* =========================
   ROOT VARIABLES
========================= */

:root{
  --purple:#5B2C83;
  --purple-700:#4A236B;
  --purple-900:#2B163E;
  --lavender:#D6C7E6;

  --bg:#F8F5F1;
  --card:#FFFFFF;
  --muted:#5F5A63;

  --pink:#c71196;
}


/* =========================
   GLOBAL STYLES
========================= */

*{
  box-sizing:border-box;
}

body{
  margin:0;
  line-height:1.6;

  font-family:"Poppins", sans-serif;

  color:var(--purple-900);
  background: radial-gradient(circle at top, rgba(181,146,242,0.12), transparent 28%), #F8F5F1;
}

main{
  position:relative;
  padding-top:0;
}

.container,
.containers{
  font-family:"Poppins", sans-serif;
}

.containers{
  margin:0 auto;
  padding:0 100px;
}


/* =========================
   HERO SECTION
========================= */

.hero{
  position:relative;
  width:100%;
  min-height:40vh;

  z-index:10;

  padding:72px 0 56px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(91,44,131,0.04);
  border-top: 3px solid rgba(91,44,131,0.18);
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;

  align-items:center;
}

.hero-content h1{
  max-width:760px;

  margin:40px auto 18px;

  font-size:3rem;
  line-height:1.06;
  text-align:center;

  color:var(--purple-900);
}

.hero-brand{
  margin-bottom:18px;
}

/* Logo placed above the hero brand name */
.logo-container{
  text-align:center;
  margin-bottom:12px;
}
.site-logo{
  width:110px;
  height:auto;
  display:inline-block;
  margin-top: -60px;
}

.hero-brand-name{
  font-family:"Poppins", sans-serif;

  text-align:center;
  text-transform:uppercase;

  margin-top:30px;
  font-size:3.5rem;
  font-weight:700;
  letter-spacing:0.01em;
  max-width:1300px;
  color:var(--purple-900);
}

.hero-brand-sub{
  margin-top:-110px;

  text-align:center;
  text-transform:uppercase;

  font-size:1.25rem;
  letter-spacing:0.1em;

  color:var(--purple-900);
}

/* Kept last-declared values (they were winning the cascade anyway) */
.hero-tag{
  margin-top:-40px;
  margin-bottom:18px;

  text-align:center;
  text-transform:uppercase;

  font-size:1rem;
  letter-spacing:0.35em;

  color:var(--purple);
}

.lead{
  max-width:800px;

  margin:20px auto 18px;

  text-align:center;

  font-size:1.1rem;

  color:var(--purple);
}

.hero-visual{
  display:none;
}


/* =========================
   BUTTONS
========================= */

.hero-ctas{
  display:flex;
  justify-content:center;
  gap:24px;
}

.hero-ctas a{
  width:220px;
  text-align:center;
}

.hero-ctas .btn-primary{
  display:inline-block;

  padding:14px 22px;

  border-radius:14px;

  text-decoration:none;

  color:white;
  background: linear-gradient(135deg, #5B2C83, #7D4EB4);
  box-shadow: 0 16px 28px rgba(91,44,131,0.18);
}

.btn-ghost{
  display:inline-block;

  padding:14px 22px;

  border-radius:14px;

  text-decoration:none;

  background: rgba(255,255,255,0.92);

  color:var(--purple-900);

  border:1px solid rgba(91,44,131,0.18);
}

.btn-primary,
.btn-ghost,
.btn-outline{
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    opacity .22s ease,
    background .22s ease;
}

.btn-primary:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 20px 30px rgba(91,44,131,0.22);
}

.btn-ghost:hover{
  transform:translateY(-2px);
  opacity:0.98;
  background: rgba(255,255,255,1);
}

.btn-outline:hover{
  transform:translateY(-2px);
}


/* =========================
   SECTIONS
========================= */

.section{
  padding:72px 0;
}

#gallery.section{
  position:relative;
  margin-top:var(--header-h, 92px); /* sits flush below the fixed header */
  padding:0;
  height:calc(100vh - var(--header-h, 92px));
  display:flex;
  align-items:stretch;
  background:rgba(248,245,241,0.96);
}

.carousel-section{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.section.alt{
  background: linear-gradient(180deg, rgba(91,44,131,0.05), rgba(248,245,241,0.9));
}

.section-label{
  display:block;

  margin-top:20px;

  text-align:center;
  text-transform:uppercase;

  font-size:0.9rem;
  letter-spacing:0.28em;

  color:#8A7A6A;
}

.section-header{
  max-width:720px;

  margin:0 auto 24px;

  text-align:center;
}

.section-title{
  margin:0 0 16px;

  font-size:2rem;

  color:var(--purple-900);
}

/* Merged identical .section-sub and .section-note rules into one selector */
.section-sub,
.section-note{
  max-width:800px;

  margin-bottom:20px;
  margin-left:auto;
  margin-right:auto;

  text-align:center;

  color:var(--muted);
}


/* =========================
   ABOUT SECTION
========================= */

#about{
  background-color:#f8f5f1;
}

#about .section-title{
  max-width:600px;

  margin-left:auto;
  margin-right:auto;

  text-align:center;
}

#about .cards{
  grid-template-columns:repeat(2, 1fr);

  max-width:1200px;

  margin:0 auto;
}


/* =========================
   PHILOSOPHY SECTION
========================= */

#philosophy{
  background-color:#2B163E;
  background-image:none;
}

#philosophy .section-title{
  max-width:800px;

  margin-left:auto;
  margin-right:auto;

  text-align:center;

  color:white;
}

.philosophy-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  background: rgba(255,255,255,0.08);

  border: 1px solid rgba(255,255,255,0.14);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#philosophy .card:hover{
  transform: translateY(-12px) scale(1.03);

  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.12),
    rgba(255,255,255,0.05)
  );

  border: 1px solid rgba(255,255,255,0.18);

  box-shadow:
    0 22px 50px rgba(0,0,0,0.28),
    0 8px 20px rgba(255,255,255,0.04);
}

.philosophy-card h3{
  margin-bottom: 14px;
  color: white;
}

.philosophy-card p{
  color: #e1d3d3;
  max-width: 420px;
}

#philosophy .cards{
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

#philosophy .card{
  background: rgba(255,255,255,0.08);

  border: 1px solid rgba(255,255,255,0.12);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.15),
    0 1px 8px rgba(255,255,255,0.05) inset;
}

#philosophy .philosophy-card{
  width: 450px;
}


/* =========================
   SERVICES SECTION
========================= */

#services{
  background-color:#efe7f7;
}

#services .section-title{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}


/* =========================
   CATEGORIES SECTION
========================= */

#categories{
  background-color:#f8f5f1;
}

#categories .section-title{
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}


/* =========================
   HEADER
========================= */

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  padding:18px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
  background:rgba(248,245,241,0.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 18px rgba(0,0,0,0.05);
  z-index:1000;
}

.site-header .containers{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.header-nav{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.header-nav-link{
  text-decoration:none;
  font-size:0.88rem;
  font-weight:600;
  color:#423154;
  padding:8px 16px;
  border-radius:10px;
  letter-spacing:0.02em;
  transition:background .18s ease, color .18s ease;
}

.header-nav-link:hover{
  background:rgba(91,44,131,0.08);
  color:#5B2C83;
}

/* Contact Us — filled pill button */
.header-nav-cta{
  background:#5B2C83;
  color:#fff !important;
  padding:8px 20px;
}

.header-nav-cta:hover{
  background:#4a2270;
  color:#fff !important;
}

.header-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:inherit;
  text-decoration:none;
}

.header-brand .brand-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.header-brand-name{
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.02em;
  color:#2B163E;
  line-height:1.2;
  white-space:nowrap;
}

.header-brand-tagline,
.brand-tagline{
  font-size:1rem;
  font-weight:500;
  letter-spacing:0.03em;
  color:var(--purple);
  white-space:nowrap;
  margin-left:7px;
}

.site-header--scroll{
  /* Always visible - no hide/show animation needed */
}

.site-header--scroll.site-header--visible{
  padding:12px 0;
  box-shadow:0 24px 50px rgba(0,0,0,0.14);
}

.site-header--scroll.site-header--visible .brand-logo{
  height:28px;
}

.site-header--scroll.site-header--visible .header-brand-name{
  font-size:0.95rem;
}

.brand-logo{
  display:inline-block;
  height:48px;
  width:auto;
  object-fit:contain;
}


/* =========================
   PRODUCT GALLERY
========================= */

.product-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:18px;
}
/* product-gallery breakpoints are handled in the responsive section below */
.product-card{
  background:rgba(255,255,255,0.94);
  border-radius:18px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
  border:1px solid rgba(91,44,131,0.08);
  box-shadow:0 18px 35px rgba(91,44,131,0.08);
  transition: transform .28s ease, box-shadow .28s ease;
}
.product-desc{
  width:100%;
}
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 45px rgba(91,44,131,0.14);
}
.product-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:contain;
  border-radius:16px;
  background:linear-gradient(180deg,#f6f6f6,#eee);
}
.product-desc h4{
  margin:0;
  font-size:1.08rem;
}
.product-desc p{
  margin:0;
  color:var(--muted);
  font-size:0.95rem;
}


/* =========================
   CARDS
========================= */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

/* Make entire card clickable when wrapped in an anchor */
.card-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.card-link:focus-visible{
  outline:3px solid rgba(91,44,131,0.12);
  outline-offset:3px;
  border-radius:24px;
}

.card{
  position:relative;
  overflow:hidden;

  padding:32px;

  border-radius:28px;

  background:rgba(255,255,255,0.92);

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  border:1px solid rgba(91,44,131,0.12);

  box-shadow:
    0 18px 40px rgba(91,44,131,0.08),
    0 2px 10px rgba(255,255,255,0.3) inset;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease,
    border .28s ease;
}

.card:hover{
  transform:translateY(-10px);

  box-shadow:
    0 24px 48px rgba(91,44,131,0.14),
    0 10px 22px rgba(0,0,0,0.08);

  border:1px solid rgba(91,44,131,0.2);

  background:rgba(255,255,255,0.96);
}

.card h3{
  margin-bottom:14px;

  font-size:1.4rem;
  font-weight:600;
}

.card p{
  margin:0;

  font-size:1rem;
  line-height:1.7;
}


/* =========================
   CARD GLOW EFFECT
========================= */

.card::after{
  content:"";

  position:absolute;

  bottom:0;
  left:-100%;

  width:100%;
  height:3px;

  background:linear-gradient(
    90deg,
    transparent,
    var(--pink),
    transparent
  );

  transition:0.6s;
}

.card:hover::after{
  left:100%;
}

#philosophy .card::after{
  display:none;
}


/* =========================
   STEPS
========================= */

.steps{
  display:flex;
  gap:14px;

  flex-wrap:wrap;
}

.step{
  flex:1;
  min-width:160px;

  padding:16px;

  text-align:center;

  border-radius:10px;

  background:linear-gradient(
    180deg,
    var(--lavender),
    #F6F1FA
  );

  box-shadow:0 6px 18px rgba(91,44,131,0.06);
}


/* =========================
   TESTIMONIALS
========================= */

.testimonials{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;

  margin-top:12px;
}

.testimonial{
  padding:18px;

  border-radius:12px;

  background:var(--card);

  box-shadow:0 6px 20px rgba(0,0,0,0.03);
}

.testimonial cite{
  display:block;

  margin-top:12px;

  font-style:normal;

  color:var(--muted);
}


/* =========================
   FORMS
========================= */

.contact-form{
  max-width:760px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

input,
textarea{
  width:100%;

  padding:12px;

  border-radius:10px;

  background:white;

  border:1px solid rgba(0,0,0,0.06);
}

.form-actions{
  display:flex;
  gap:12px;

  margin-top:12px;
}

.form-note{
  margin-top:10px;

  font-size:0.9rem;

  color:var(--muted);
}


/* =========================
   REVEAL ANIMATIONS
========================= */

/* =========================
   KEYFRAMES
========================= */

@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}

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

@keyframes slideDown {
  from { opacity:0; transform:translateY(-100%); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes scaleIn {
  from { opacity:0; transform:scale(0.94); }
  to   { opacity:1; transform:scale(1); }
}

@keyframes progressBar {
  from { width:0; }
  to   { width:100%; }
}

@keyframes shimmer {
  0%   { background-position:200% center; }
  100% { background-position:-200% center; }
}

/* =========================
   PAGE LOAD PROGRESS BAR
========================= */

.page-progress {
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0;
  z-index:9999;
  background: linear-gradient(90deg, var(--purple), #c71196, var(--purple));
  background-size:200% auto;
  animation:
    progressBar .7s cubic-bezier(.4,0,.2,1) forwards,
    shimmer 1.4s linear infinite;
  pointer-events:none;
}

/* =========================
   HEADER ENTRANCE
========================= */

.site-header {
  animation: slideDown .5s cubic-bezier(.2,.9,.2,1) both;
}

/* =========================
   CAROUSEL ENTRANCE
========================= */

#gallery.section {
  animation: fadeIn .8s ease .1s forwards;
}

/* =========================
   HERO ENTRANCE ANIMATIONS
   Stagger child elements inside .hero-content when it becomes visible
========================= */
.hero-content h1,
.hero-content .lead,
.hero-content .hero-ctas {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2,.9,.2,1), transform .7s cubic-bezier(.2,.9,.2,1);
}

/* These fire when script.js adds .show to .hero-content after 200ms */
.hero-content.show h1        { transition-delay: 80ms;  opacity:1; transform:none; }
.hero-content.show .lead     { transition-delay: 180ms; opacity:1; transform:none; }
.hero-content.show .hero-ctas{ transition-delay: 280ms; opacity:1; transform:none; }

/* Safety: if h1/lead also carry .reveal, still reveal them when parent gets .show
   so they never stay stuck at opacity:0 */
.hero-content.show h1.reveal,
.hero-content.show .lead.reveal {
  opacity:1;
  transform:none;
}

/* =========================
   SCROLL REVEAL
========================= */

.reveal {
  opacity:0;
  transform:translateY(20px);
  transition:
    opacity .65s cubic-bezier(.2,.9,.2,1),
    transform .65s cubic-bezier(.2,.9,.2,1);
}

.reveal.show {
  opacity:1;
  transform:none;
}

/* Cards get a slight scale-in on top of the fade-up */
.card.reveal {
  transform: translateY(20px) scale(0.97);
  transition:
    opacity .6s cubic-bezier(.2,.9,.2,1),
    transform .6s cubic-bezier(.2,.9,.2,1);
}

.card.reveal.show {
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Section labels slide in from left */
.section-label.reveal {
  transform: translateX(-14px);
  transition:
    opacity .55s cubic-bezier(.2,.9,.2,1),
    transform .55s cubic-bezier(.2,.9,.2,1);
}

.section-label.reveal.show {
  opacity:1;
  transform:none;
}

/* =========================
   LOGO SHIMMER (on load)
========================= */

.brand-logo.shimmer-once {
  animation: shimmerLogo .9s ease .3s both;
}

@keyframes shimmerLogo {
  0%   { opacity:.4; filter:brightness(1.3); }
  100% { opacity:1;  filter:brightness(1); }
}

/* =========================
   ACCESSIBILITY — respect reduced motion
========================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .page-progress { display:none; }
}


/* =========================
   ACCESSIBILITY
========================= */

a:focus,
button:focus,
input:focus,
textarea:focus{
  outline:3px solid rgba(91,44,131,0.12);
  outline-offset:3px;
}


/* =========================
   GALLERY
========================= */

.horizontal-gallery{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  z-index:1;
}

.hg-viewport{
  overflow:hidden;
  position:relative;
  width:100%;
  height:100%;
}

.hg-track{
  display:flex;
  align-items:center;
  height:100%;
  gap:0;
  transform:translateZ(0);
}

.hg-slide{
  flex:0 0 100%;
  display:flex;
  align-items:stretch;
  justify-content:center;
  height:100%;
}

.hg-slide img{
  display:block;
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  margin:0 auto;
  border-radius:0 !important;
  box-shadow:none;
}

/* On mobile portrait screens, landscape images would leave huge blank gaps
   with object-fit:contain — switch to cover so they fill the container */
@media (max-width:700px){
  #gallery.section{
    height:56vw; /* natural landscape aspect ratio height for mobile width */
    min-height:220px;
    max-height:60vh;
  }

  .hg-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
}


/* =========================
   CONTACT SECTION
========================= */

#contact{
  background-color:#2B163E;
  padding:72px 0;
}

#contact .section-label{
  color:#b49ccc;
  letter-spacing:0.2em;
}

#contact .section-title{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  font-size:2rem;
  color:#ffffff;
}

#contact .section-sub{
  color:#9e87b3;
  font-size:1rem;
}

.contact-details{
  max-width:1000px;
  margin:40px auto 0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:32px;
}

.contact-card{
  padding:0 28px;
  border-right:1px solid rgba(255,255,255,0.08);
}

.contact-card:first-child{
  padding-left:0;
}

.contact-card:last-child{
  border-right:none;
}

.contact-card h3{
  margin:0 0 14px;
  font-size:0.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:#7a5e96;
}

.contact-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:10px;
}

.contact-row svg,
.contact-row .contact-icon{
  width:16px;
  height:16px;
  flex-shrink:0;
  margin-top:2px;
  color:#b49ccc;
}

.contact-row span,
.contact-row a{
  font-size:0.9rem;
  color:#e0d4ec;
  line-height:1.55;
  text-decoration:none;
  white-space:nowrap;
}

.contact-row a:hover{
  color:#ffffff;
  text-decoration:underline;
}

/* Follow Us bar */
.follow-bar{
  max-width:1000px;
  margin:24px auto 0;
  border-top:1px solid rgba(255,255,255,0.1);
  padding-top:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.follow-bar-label{
  font-size:0.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.18em;
  color:#7a5e96;
  margin:0;
}

.follow-links{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

.follow-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  color:#e0d4ec;
  text-decoration:none;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.12);
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.follow-link svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  color:#b49ccc;
  transition:color .18s ease;
}

.follow-link:hover{
  background:rgba(255,255,255,0.07);
  border-color:rgba(255,255,255,0.22);
  color:#ffffff;
  transform:translateY(-2px);
}

.follow-link:hover svg{
  color:#ffffff;
}

.site-footer{
  background:#2B163E;
  padding:48px 0 28px;
  margin-top:0;
}

.footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 60px;
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  gap:0;
  align-items:start;
}

.footer-brand{
  display:flex;
  align-items:center;
  gap:16px;
  padding-bottom:28px;
}

.footer-branding{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}

.footer-logo-new{
  height:41px;
  width:auto;
  object-fit:contain;
  flex-shrink:0;
}

.footer-name{
  margin:0 0 2px;
  font-weight:700;
  font-size:1.3rem;
  color:#fff;
  letter-spacing:0.04em;
  font-family:"Poppins", sans-serif;
  text-transform:uppercase;
}
.footer-name1{
  margin:0 0 2px;
  font-weight:700;  
  font-size:1.3rem;
  color:#fff;
  letter-spacing:0.04em;
  font-family:"Poppins", sans-serif;
  text-transform:uppercase;
  margin-top:-10px;
  margin-left: 15px;
}

.footer-tagline{
  margin:0px;
  font-size:0.8rem;
  color:#9e87b3;
  letter-spacing:0.08em;
  margin-top:-5px;
  margin-left: 15px;
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-end;
  padding-bottom:28px;
}

.footer-links a{
  color:#b49ccc;
  text-decoration:none;
  font-size:0.88rem;
  font-weight:500;
  letter-spacing:0.04em;
  transition:color .2s ease;
}

.footer-links a:hover{
  color:#fff;
}

.footer-copy{
  grid-column:1 / -1;
  margin:0;
  font-size:0.78rem;
  color:#6a5480;
  border-top:1px solid rgba(255,255,255,0.08);
  padding-top:20px;
  text-align:center;
}

@media (max-width:700px){
  .footer-inner{
    padding:0 20px;
    grid-template-columns:1fr;
  }
  .footer-brand{
    padding-bottom:20px;
    flex-wrap:wrap;
    gap:12px;
  }
  .footer-name1,
  .footer-tagline{
    margin-left:0;
  }
  .footer-links{
    flex-direction:row;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:16px;
    padding-bottom:20px;
  }
}



/* =========================
   FOUNDER'S NOTE SECTION
========================= */

#founder {
  background: #f8f5f1;
  position: relative;
  overflow: hidden;
}

/* Soft decorative tint behind the card */
#founder::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,44,131,0.07), transparent 65%);
  pointer-events: none;
}

/* Founder card — uses CSS animation so it ALWAYS plays, no JS needed */
.founder-card {
  max-width: 820px;
  margin: 0 auto;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 1px solid rgba(91,44,131,0.12);
  box-shadow:
    0 18px 48px rgba(91,44,131,0.09),
    0 2px 10px rgba(255,255,255,0.4) inset;
  padding: 52px 56px;
  position: relative;
  /* CSS-only entrance — fires as soon as element renders */
  animation: founderReveal .8s cubic-bezier(.2,.9,.2,1) .15s both;
  transition: transform .28s ease, box-shadow .28s ease;
}

@keyframes founderReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.founder-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 28px 60px rgba(91,44,131,0.13),
    0 2px 10px rgba(255,255,255,0.4) inset;
}

/* Left accent bar matching the site's purple→pink gradient */
.founder-card::before {
  content: "";
  position: absolute;
  left: 0; top: 32px; bottom: 32px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--purple), var(--pink));
}

/* Decorative large quote mark */
.founder-quote-mark {
  font-size: 7rem;
  line-height: 1;
  color: rgba(91,44,131,0.08);
  font-family: Georgia, serif;
  position: absolute;
  top: 12px;
  left: 44px;
  pointer-events: none;
  user-select: none;
}

.founder-body {
  position: relative;
  z-index: 1;
}

.founder-body p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--muted);
  margin: 0 0 18px;
}

.founder-body p:last-of-type {
  margin-bottom: 28px;
}

.founder-sig {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 22px;
  border-top: 1px solid rgba(91,44,131,0.12);
}

.founder-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--purple-900);
  letter-spacing: 0.02em;
}

.founder-title {
  font-size: 0.85rem;
  color: var(--purple);
  letter-spacing: 0.02em;
}

/* ── Mobile ── */
@media (max-width: 900px) {
  .founder-card {
    padding: 40px 36px 40px 40px;
  }
}

@media (max-width: 700px) {
  .founder-card {
    padding: 32px 20px 32px 24px;
    border-radius: 18px;
  }
  .founder-quote-mark {
    font-size: 4rem;
    left: 20px;
    top: 8px;
  }
  .founder-body p {
    font-size: 0.92rem;
    line-height: 1.75;
  }
  .founder-name {
    font-size: 0.95rem;
  }
  .founder-title {
    font-size: 0.8rem;
  }
  .founder-card::before {
    top: 20px; bottom: 20px;
  }
}

@media (max-width: 480px) {
  .founder-card {
    padding: 28px 16px 28px 20px;
  }
  .founder-quote-mark {
    font-size: 3rem;
    left: 16px;
    top: 6px;
  }
  .founder-body p {
    font-size: 0.88rem;
  }
}

/* =========================
   RESPONSIVE DESIGN
========================= */

@media (max-width:1200px){
  .containers{
    padding:0 40px;
  }

  .cards{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .product-gallery{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* Merged two identical @media (max-width:900px) blocks into one */
@media (max-width:900px){
  .hero-grid{
    grid-template-columns:1fr;
  }

  .cards{
    grid-template-columns:1fr;
  }

  .testimonials{
    grid-template-columns:1fr;
  }

  .form-grid{
    grid-template-columns:1fr;
  }

  .section-title{
    font-size:1.75rem;
  }

  .containers{
    padding:0 28px;
  }

  .hero-ctas{
    flex-direction:column;
    align-items:center;
    gap:20px;
  }

  .hero-ctas a{
    width:100%;
    max-width:320px;
  }

  .hero-brand-name{
    font-size:2.8rem;
  }

  .site-logo{
    width:88px;
  }

  .hero-brand-sub{
    margin-top:-40px;
    font-size:0.92rem;
  }

  .contact-details{
    grid-template-columns:1fr !important;
    gap:28px 0;
  }
  .contact-card{
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.08);
    padding:0 0 24px 0;
  }
  .contact-card:last-child{
    border-bottom:none;
  }
  .contact-row span,
  .contact-row a{
    white-space:normal;
  }

  /* Category pages: 2-col grid on tablets */
  .product-gallery{
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
  }

  /* Header: shrink logo and brand name */
  .brand-logo{
    height:28px !important;
    width:auto !important;
  }
  .site-header .containers .brand-text,
  .header-brand .brand-text{
    font-size:0.85rem;
  }
  .header-brand-name{
    font-size:0.88rem;
  }
  .header-brand-tagline,
  .brand-tagline{
    font-size:0.68rem;
  }

  /* Shrink nav link text slightly on tablet */
  .header-nav-link{
    font-size:0.82rem;
    padding:7px 13px;
  }
  .header-nav-cta{
    padding:7px 15px;
  }

  /* Section padding tighter on tablet */
  .section{
    padding:48px 0;
  }
}

@media (max-width:700px){
  .containers{
    padding:0 12px;
  }

  .site-header .containers{
    gap:8px;
  }

  .header-brand{
    gap:6px;
    flex-shrink:1;
    min-width:0;
  }

  .header-nav{
    flex-shrink:0;
  }

  .hero{
    padding:60px 0 32px;
  }

  .hero-content h1{
    font-size:2rem;
    margin:24px auto 16px;
  }

  .hero-brand-name{
    font-size:2.4rem;
  }

  .hero-tag{
    letter-spacing:0.18em;
  }

  .card{
    padding:24px;
  }

  .section-title{
    font-size:1.5rem;
  }

  .section-sub,
  .lead{
    font-size:1rem;
  }

  .hero-grid,
  .cards{
    gap:20px;
  }

  .follow-links{
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }

  /* Contact section and footer share the same background color, so on
     mobile (where they stack with generous default padding) they read as
     one undifferentiated block. Tighten the gap and add a visible seam. */
  #contact{
    padding:40px 0 32px;
  }

  .follow-bar{
    margin-top:20px;
    padding-top:16px;
  }

  .site-footer{
    padding:32px 0 24px;
    border-top:1px solid rgba(255,255,255,0.12);
  }

  /* Category pages: 2-col grid on mobile (compact cards) */
  .product-gallery{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }

  .product-card{
    padding:12px;
    gap:8px;
    border-radius:14px;
  }

  .product-desc h4{
    font-size:0.88rem;
    line-height:1.3;
  }

  .product-desc p{
    font-size:0.8rem;
  }

  /* Section vertical breathing room */
  .section{
    padding:36px 0;
  }

  /* Header: show brand name on mobile with smaller font */
  .site-header .containers .brand-text,
  .header-brand .brand-text{
    display:flex;
    flex-direction:column;
    gap:1px;
  }
  .header-brand-name{
    font-size:0.55rem;
    white-space:nowrap;
    color:#2B163E;
  }
  .header-brand-tagline,
  .brand-tagline{
    font-size:0.52rem;
    white-space:nowrap;
    color:#7a5c9a;
  }

  .brand-logo{
    height:26px !important;
    width:auto !important;
  }

  /* Nav on mobile: hide About Us, keep Contact Us only */
  .header-nav-link:not(.header-nav-cta){
    display:none;
  }
  .header-nav-cta{
    font-size:0.65rem;
    padding:6px 10px;
    white-space:nowrap;
  }

  /* Back-to-home button: full width on mobile */
  .hero-ctas .btn-ghost{
    width:100%;
    max-width:320px;
    text-align:center;
  }
}

/* =========================
   SMALL PHONES (≤480px)
========================= */

@media (max-width:480px){

  /* Product gallery stays 2-col but with minimal gap */
  .product-gallery{
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }

  .product-card{
    padding:10px;
    gap:6px;
    border-radius:12px;
    box-shadow:0 6px 16px rgba(91,44,131,0.08);
  }

  .product-desc h4{
    font-size:0.82rem;
  }

  .product-desc p{
    display:none; /* hide description on very small screens to keep cards clean */
  }

  /* Section label and sub tighter */
  .section-label{
    font-size:0.78rem;
    letter-spacing:0.2em;
  }

  .section-sub{
    font-size:0.9rem;
    padding:0 4px;
  }

  /* Contact section */
  #contact{
    padding:36px 0 28px;
  }
}