@font-face{
  font-family:'Georgia';
  src:url('../fonts/FONT_GEORGIA.TTF') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Georgia';
  src:url('../fonts/FONT_GEORGIAB.TTF') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Georgia';
  src:url('../fonts/FONT_GEORGIAI.TTF') format('truetype');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Georgia';
  src:url('../fonts/FONT_GEORGIAZ.TTF') format('truetype');
  font-weight:700; font-style:italic; font-display:swap;
}

/* =========================================================
   STC LIVING — Design tokens (colours exactly as supplied)
   ========================================================= */
:root{
  --espresso:#442F23;
  --espresso-deep:#442F23;
  --cream:#E2E1D5;
  --card:#E2E1D5;
  --gold:#BA8D5F;
  --gold-light:#BA8D5F;
  --text-brown:#442F23;
  --text-cream:#E2E1D5;
  --hair:rgba(186,141,95,0.35);

  --container:1200px;
  --radius-sm:4px;
  --radius-md:10px;
  --radius-lg:22px;
  --shadow-soft:0 20px 50px -25px rgba(68,47,35,0.35);
  --shadow-card:0 12px 30px -14px rgba(68,47,35,0.28);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
section[id]{scroll-margin-top:88px;}
body{
  font-family:'Georgia',serif;
  background:var(--cream);
  color:var(--text-brown);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.serif{font-family:'Georgia',serif;font-weight:700;color:var(--espresso);}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul{list-style:none;}
button,input,textarea{font-family:inherit;}

.eyebrow{
  display:inline-block;
  font-family:'Georgia',serif;
  letter-spacing:.3em;
  text-transform:uppercase;
  font-size:.72rem;
  font-weight:500;
  color:var(--gold);
  margin-bottom:16px;
}
.wrap{max-width:var(--container);margin:0 auto;padding:0 40px;}
.section{padding:100px 0;}
.section-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.section-head h2{font-size:2.5rem;line-height:1.2;}
.section-head p{margin-top:16px;color:var(--text-brown);opacity:.8;}
.center{text-align:center;}

/* signature stitched divider */
.stitch{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto;}
.stitch::before,.stitch::after{content:"";width:46px;height:1px;background:var(--gold);opacity:.55;}
.stitch-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);}

/* =========== buttons =========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 32px;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  border-radius:var(--radius-sm);cursor:pointer;border:1px solid transparent;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s,border-color .3s;
  white-space:nowrap;
}
.btn-primary{background:var(--espresso);color:var(--text-cream);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);background:var(--espresso-deep);}
.btn-outline{border-color:var(--gold);color:var(--espresso);background:transparent;}
.btn-outline:hover{background:var(--gold);color:var(--espresso-deep);transform:translateY(-3px);}
.btn-gold{background:var(--gold);color:var(--espresso-deep);}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-3px);box-shadow:var(--shadow-soft);}

/* =========== header / nav =========== */
header{
  position:sticky;top:0;z-index:100;
  background:var(--espresso-deep);
  border-bottom:1px solid rgba(186,141,95,.18);
}
nav{
  max-width:var(--container);margin:0 auto;padding:16px 40px;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:48px;width:auto;}
.brand-name{font-family:'Georgia',serif;color:var(--text-cream);font-size:1.32rem;letter-spacing:.12em;}
.brand-name b{color:var(--gold-light);font-weight:600;}
.navlinks{display:flex;gap:38px;}
.navlinks a{
  position:relative;color:var(--text-cream);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.82;padding-bottom:6px;
}

.navlinks a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold-light);
  transition:width .35s var(--ease);
}
.navlinks a:hover{opacity:1;}
.navlinks a:hover::after,.navlinks a.active::after{width:100%;}
.navlinks a.active{opacity:1;color:var(--gold-light);}
.nav-right{display:flex;align-items:center;gap:22px;}
.nav-cta{
  color:var(--gold-light) !important;
  border-color:var(--gold) !important;
}
.nav-cta:hover{
  background:var(--gold) !important;
  color:var(--espresso-deep) !important;
}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.menu-toggle span{width:24px;height:1px;background:var(--text-cream);transition:transform .3s,opacity .3s;}

/* =========== footer =========== */
footer{background:var(--espresso-deep);color:var(--text-cream);padding:72px 0 28px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(186,141,95,.16);}
.footer-brand p{margin-top:18px;opacity:.7;font-size:.92rem;max-width:260px;}
.footer-col h4{color:var(--gold-light);font-family:'Georgia',serif;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;margin-bottom:20px;}
.footer-col a,.footer-col li{display:block;color:var(--text-cream);opacity:.75;font-size:.92rem;margin-bottom:12px;transition:opacity .25s,transform .25s,color .25s;}
.footer-col a:hover{opacity:1;color:var(--gold-light);transform:translateX(4px);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;flex-wrap:wrap;gap:10px;}
.footer-bottom p{opacity:.55;font-size:.82rem;}
.footer-social{display:flex;gap:14px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(186,141,95,.35);
  display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s,border-color .3s;
}
.footer-social a:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-4px);}
.footer-social svg{width:16px;height:16px;stroke:var(--gold-light);}
.footer-social a:hover svg{stroke:var(--espresso-deep);}

/* =========== page hero (about/collections/contact) =========== */
.page-hero{
  background:linear-gradient(180deg,var(--espresso-deep) 0%,var(--espresso) 100%);
  padding:100px 0 90px;text-align:center;color:var(--text-cream);position:relative;overflow:hidden;
}
.page-hero h1{color:var(--text-cream);font-size:3rem;margin-top:16px;}
.page-hero p{color:var(--text-cream);opacity:.75;max-width:520px;margin:18px auto 0;}
.page-hero .stitch::before,.page-hero .stitch::after{background:var(--gold-light);}

/* =========== whatsapp floating button =========== */
.wa-float{
  position:fixed;right:26px;bottom:26px;z-index:200;
  width:60px;height:60px;border-radius:50%;background:var(--espresso);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -8px rgba(68,47,35,.55);
  border:1px solid var(--gold);
}
.wa-float svg{width:28px;height:28px;fill:var(--gold-light);}
.wa-float:hover{background:var(--gold);}
.wa-float:hover svg{fill:var(--espresso-deep);}

/* scroll reveal state (see animations.css for keyframes) */
.reveal{opacity:0;transform:translateY(28px);}
.reveal.in{opacity:1;transform:translateY(0);}

/* utility */
.mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;} .mt-4{margin-top:40px;}


/* WhatsApp Card Header Icon Container */
.wa-ic {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  border: 1px solid #C3935B;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* Force clean SVG rendering inside the Header Icon */
.wa-ic svg {
  width: 24px !important;
  height: 24px !important;
  stroke: none !important;
  fill: #C3935B !important;
  display: block;
}

/* WhatsApp Green Button Container */
.wa-btn-v2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100%;
  background: #268A36;
  color: #FFFFFF !important;
  padding: 14px;
  border-radius: 8px;
  font-family: 'Georgia', serif;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: background .25s var(--ease), transform .25s var(--ease);
  text-decoration: none;
  border: none;
}

/* Force clean SVG rendering inside the Green Button */
.wa-btn-v2 svg {
  width: 20px !important;
  height: 20px !important;
  stroke: none !important;
  fill: #FFFFFF !important;
  flex: 0 0 20px !important;
  display: block;
}

.wa-btn-v2:hover {
  background: #20782e;
  transform: translateY(-1px);
}


/* =========================================================
   CONTACT GRID & LAYOUT RESTORATION FIX
   ========================================================= */

/* 1. Main Grid: Forces 2 Columns Side-by-Side */
.contact-grid-v2 {
  display: grid !important;
  grid-template-columns: 380px 1fr !important; /* Left column fixed, Right column fills space */
  gap: 24px !important;
  align-items: stretch !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 2. Left Column Stack: Holds "Get in Touch" + "WhatsApp Card" vertically */
.contact-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  justify-content: space-between !important;
}

/* 3. WhatsApp Card Box Internal Alignment */
.wa-card-v2 {
  background: #3C281E;
  border-radius: 14px;
  padding: 26px 24px;
  color: #FFFFFF;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.wa-top {
  display: flex !important;
  align-items: flex-start !important;
  gap: 18px !important;
  margin-bottom: 22px !important;
}

/* 4. WhatsApp Button Alignment */
.wa-btn-v2 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  background: #268A36;
  color: #FFFFFF !important;
  padding: 14px;
  border-radius: 8px;
  font-family: 'Georgia', serif;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  border: none;
  box-sizing: border-box !important;
}

.wa-btn-v2 svg {
  width: 20px !important;
  height: 20px !important;
  stroke: none !important;
  fill: #FFFFFF !important;
  flex: 0 0 20px !important;
  display: block !important;
}

/* Responsive adjustment for small screen / mobile view */
@media (max-width: 992px) {
  .contact-grid-v2 {
    grid-template-columns: 1fr !important; /* Stacks gracefully on mobile devices */
  }
}

/* =========================================================
   GAP REDUCTION FIX: Removes big gap between contact and map
   ========================================================= */
#contact.section {
  padding-bottom: 30px !important; /* Removes 100px bottom padding from contact section */
}

.map-section {
  padding-top: 16px !important; /* Creates a clean, subtle 16px gap above the map */
}


/* =========================================================
   WHY STC LIVING: Smooth Icon Hover Swap
   ========================================================= */

/* Container positioning */
.why-card .ic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Common image styles */
.why-card .ic img {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Default state: Light Brown icon visible */
.why-card .ic .ic-default {
  opacity: 1;
}

/* Hover state: Hide default icon */
.why-card:hover .ic .ic-default {
  opacity: 0;
}

/* Hover icon setup: Absolutely positioned over default icon */
.why-card .ic .ic-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* Hover state: Show hover icon */
.why-card:hover .ic .ic-hover {
  opacity: 1;
}

/* Force Georgia font to render straight/flat numbers */
.about-stats b,
.stat-num {
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1 !important;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--espresso);
  line-height: 1;
}

/* =========================================================
   FIX: Force Straight Numbers in Contact Section
   ========================================================= */

#contact,
.contact-grid-v2,
.contact-left,
.contact-info,
.contact-card {
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1 !important;
}

/* Fallback for links or direct phone/address text elements */
#contact a,
#contact p,
#contact address {
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1 !important;
}

/* =========================================================
   FIX: Force Straight Numbers in Footer
   ========================================================= */

footer,
.footer-grid,
.footer-col,
.footer-bottom {
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1 !important;
}

/* Ensures all footer links and text inherit the lining figures */
footer a,
footer p,
footer span {
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1 !important;
}

/* =========================================================
   FIX: Force Straight Numbers in Map Section & Popup Cards
   ========================================================= */

.map-section,
#map,
.leaflet-popup-content,
.gm-style,
.map-info-box {
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1 !important;
}

.map-section *,
.map-info-box * {
  font-variant-numeric: lining-nums !important;
  font-feature-settings: "lnum" 1 !important;
}

/* =========================================================
   ENLARGED FOOTER LOGO (Standalone)
   ========================================================= */

.footer-grid {
  align-items: start;
}

.footer-logo-link {
  display: inline-block;
  margin-bottom: 8px;
  text-decoration: none;
}

.footer-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
  text-decoration: none;
}

.footer-logo {
  height: 90px; /* Increased size for strong visual impact */
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-brand p {
  margin-top: 0;
  opacity: 0.75;
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 280px;
}



/* =========================================================
   MOBILE RESPONSIVE FIXES (Does not affect desktop view)
   ========================================================= */

@media (max-width: 768px) {
  
  /* 1. FIX: Why STC Living Grid (1 Column or 2 Column Stack) */
  .why-grid,
  .why .why-grid {
    grid-template-columns: 1fr !important; /* Stack cleanly in a single responsive column */
    gap: 20px !important;
    padding: 0 16px !important;
  }

  .why-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. FIX: About Stats Left Alignment & Padding */
  .about-stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* Forces uniform left alignment */
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    gap: 24px !important;
  }

  .about-stats > div {
    width: 100% !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  .about-stats .stat-num,
  .about-stats b {
    display: block !important;
    text-align: left !important;
  }

  .about-stats span {
    display: block !important;
    text-align: left !important;
  }
}


/* =========================================================
   COMPLETE MOBILE RESPONSIVE SUITE (Screen width <= 768px)
   ========================================================= */

@media (max-width: 768px) {

  /* 1. CONTAINER & WRAPPER PADDING */
  .wrap, 
  .container, 
  section {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* 2. WHY STC LIVING GRID (Fixes clipped cards -> 1 clean column) */
  .why-grid,
  .why .why-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  .why-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. ABOUT STATS ALIGNMENT (Fixes 30+ left shift & aligns all numbers) */
  .about-stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    gap: 20px !important;
  }

  .about-stats > div,
  .about-stats .stat-item {
    width: 100% !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }

  .about-stats .stat-num,
  .about-stats b,
  .about-stats span {
    display: block !important;
    text-align: left !important;
    font-variant-numeric: lining-nums !important;
  }

  /* 4. MAP SECTION & POPUP VIEW */
  .map-section, 
  #map, 
  .map-info-box {
    width: 100% !important;
    font-variant-numeric: lining-nums !important;
  }

  .map-info-box {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin-top: 16px !important;
  }

  /* 5. FOOTER LAYOUT (Stacks cleanly on mobile) */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    align-items: flex-start !important;
  }

  .footer-brand {
    text-align: left !important;
  }

 
  .footer-logo-link {
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  .footer-brand .brand-name,
  .footer-brand p,
  .footer-brand .footer-social {
    transform: none !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }
}





/* =========================================================
   PERFECT ALIGNMENT FOR ABOUT STATS (30+, 100%, Up to 600TC)
   ========================================================= */

@media (max-width: 768px) {
  /* Parent Container: Force uniform left-alignment for all children */
  .about-stats {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* Target every stat item inside (including the first '30+' item) */
  .about-stats > div,
  .about-stats .stat-item,
  .about-stats > div:first-child {
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Force the stat number typography to start at the absolute left edge */
  .about-stats .stat-num,
  .about-stats h3,
  .about-stats b,
  .about-stats span {
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    display: block !important;
  }
}

/* =========================================================
   FOOTER ADDRESS STYLING MATCH
   ========================================================= */

.footer-col span {
  font-size: 0.95rem !important;  /* Matches the links size exactly */
  font-weight: 400 !important;      /* Removes the heavy bold look */
  line-height: 1.6 !important;
  opacity: 0.85 !important;         /* Matches standard link opacity */
  display: block !important;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .footer-logo-wrap {
    display: block !important;
    height: auto !important;      /* remove the fixed crop height */
    overflow: visible !important; /* stop clipping the mark */
    margin: 0 0 10px 0 !important;
  }
  .footer-brand .footer-logo,
  .footer-logo {
    height: 48px !important;      /* real visible size, no cropping */
    width: auto !important;
    max-width: 200px !important;
    display: block !important;
    transform: none !important;
    margin: 0 !important;
  }
  .footer-brand p {
    margin: 0 0 16px 0 !important;
  }
}

.footer-logo-link {
  display: inline-block;
  margin-bottom: 20px;
  text-decoration: none;
}

.footer-logo {
  height: 150px;
  width: auto;
  display: block;
  object-fit: contain;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;   /* try 4–8px */
}


.footer-brand p{
  margin-top:6px;
  opacity:.7;
  font-size:.92rem;
  max-width:260px;
}



.footer-logo-link{
  display:inline-block;
  margin-bottom:4px;
  text-decoration:none;
}

.footer-logo{
  height:55px;   /* pushed higher to compensate for empty canvas in the SVG */
  width:auto;
  display:block;
  object-fit:contain;
}


.flat-num {
  font-weight: 700;                  /* Bold style */
  font-variant-numeric: lining-nums; /* Keeps numbers flat */
}