.elementor-118 .elementor-element.elementor-element-ca10ce3{--display:flex;}.elementor-118 .elementor-element.elementor-element-d7c5787 .elementor-drop-cap{margin-inline-end:10px;}.elementor-118 .elementor-element.elementor-element-daad27b{--display:flex;}.elementor-118 .elementor-element.elementor-element-d0aff53{--display:flex;}/* Start custom CSS for page-settings */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us — Spruce</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
  :root {
    --cream: #F7F4EF;
    --dark: #1A1A18;
    --forest: #2D4A3E;
    --sage: #7A9E8C;
    --sand: #C9B99A;
    --blush: #E8D5C4;
    --text: #2C2C2A;
    --muted: #7A7A72;
    --border: rgba(44,44,42,0.12);
  }
 
  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--cream);
    color: var(--text);
    line-height: 1.6;
  }
 
  /* NAV */
  nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 48px;
    border-bottom: 1px solid var(--border);
    background: var(--cream);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .nav-logo {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--dark);
    text-decoration: none;
  }
  .nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
  }
  .nav-links a {
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--dark); }
  .nav-cta {
    font-size: 13px;
    padding: 9px 22px;
    background: var(--dark);
    color: var(--cream);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.2s;
  }
  .nav-cta:hover { background: var(--forest); }
 
  /* HERO */
  .hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px;
    border-bottom: 1px solid var(--border);
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.1s;
  }
  .hero-left {
    padding: 72px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    border-right: 1px solid var(--border);
  }
  .eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sage);
    font-weight: 500;
  }
  .hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 52px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--dark);
  }
  .hero-title em {
    font-style: italic;
    color: var(--forest);
  }
  .hero-sub {
    font-size: 15px;
    color: var(--muted);
    max-width: 380px;
    line-height: 1.7;
    font-weight: 300;
  }
  .tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
  }
  .tag {
    font-size: 12px;
    padding: 5px 14px;
    border-radius: 100px;
    border: 1px solid var(--border);
    color: var(--muted);
    background: white;
    letter-spacing: 0.02em;
  }
  .hero-right {
    background: var(--blush);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: var(--sand);
    font-size: 13px;
  }
  .hero-img-placeholder svg { opacity: 0.4; }
 
  /* STATS */
  .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--border);
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.25s;
  }
  .stat-item {
    padding: 36px 48px;
    border-right: 1px solid var(--border);
    transition: background 0.2s;
  }
  .stat-item:last-child { border-right: none; }
  .stat-item:hover { background: white; }
  .stat-num {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 600;
    color: var(--dark);
    line-height: 1;
    margin-bottom: 6px;
  }
  .stat-label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 300;
    letter-spacing: 0.02em;
  }
 
  /* STORY */
  .story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border);
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.4s;
  }
  .story-img {
    background: var(--forest);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sage);
    font-size: 13px;
    border-right: 1px solid var(--border);
    flex-direction: column;
    gap: 10px;
  }
  .story-content {
    padding: 64px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }
  .story-title {
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--dark);
  }
  .story-body {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.8;
    font-weight: 300;
  }
  blockquote {
    border-left: 3px solid var(--sage);
    padding-left: 20px;
    margin: 4px 0;
  }
  blockquote p {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 18px;
    color: var(--forest);
    line-height: 1.5;
  }
 
  /* VALUES */
  .values {
    padding: 72px 48px;
    border-bottom: 1px solid var(--border);
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.5s;
  }
  .section-header {
    display: flex;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 48px;
  }
  .section-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--dark);
  }
  .section-num {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.08em;
  }
  .values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
  }
  .value-card {
    background: var(--cream);
    padding: 32px 36px;
    display: flex;
    gap: 20px;
    transition: background 0.2s;
  }
  .value-card:hover { background: white; }
  .value-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .icon-green { background: #E1F5EE; }
  .icon-amber { background: #FAEEDA; }
  .icon-purple { background: #EEEDFE; }
  .icon-pink { background: #FBEAF0; }
  .value-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--dark);
  }
  .value-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    font-weight: 300;
  }
 
  /* COLLECTIONS */
  .collections {
    padding: 72px 48px;
    border-bottom: 1px solid var(--border);
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.6s;
  }
  .collections-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 48px;
  }
  .collection-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .collection-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  }
  .collection-img {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
  }
  .col-women { background: #2D4A3E; color: #7A9E8C; }
  .col-men { background: #1A1A18; color: #5a5a52; }
  .col-girls { background: #C9B99A; color: #8a7a6a; }
  .col-corporate { background: #3D3D35; color: #6a6a62; }
  .collection-label {
    padding: 14px 18px;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .collection-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--dark);
  }
  .collection-arrow {
    font-size: 16px;
    color: var(--muted);
    transition: transform 0.2s;
  }
  .collection-card:hover .collection-arrow { transform: translateX(4px); }
 
  /* MISSION + VISION */
  .mv-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border);
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.65s;
  }
  .mv-card {
    padding: 56px 52px;
    border-right: 1px solid var(--border);
  }
  .mv-card:last-child { border-right: none; }
  .mv-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sage);
    font-weight: 500;
    margin-bottom: 16px;
  }
  .mv-title {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.3;
  }
  .mv-body {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.8;
    font-weight: 300;
  }
 
  /* CTA */
  .cta-section {
    padding: 80px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    opacity: 0;
    animation: fadeUp 0.8s ease forwards 0.75s;
  }
  .cta-title {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.2;
    max-width: 440px;
  }
  .cta-title em { font-style: italic; color: var(--forest); }
  .cta-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
  }
  .btn-primary {
    font-size: 14px;
    padding: 13px 28px;
    background: var(--dark);
    color: var(--cream);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.2s;
  }
  .btn-primary:hover { background: var(--forest); }
  .btn-secondary {
    font-size: 14px;
    padding: 13px 28px;
    background: transparent;
    color: var(--dark);
    border: 1px solid var(--border);
    border-radius: 100px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
  }
  .btn-secondary:hover { border-color: var(--dark); }
 
  /* FOOTER */
  footer {
    border-top: 1px solid var(--border);
    padding: 28px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
  }
  .footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--dark);
    letter-spacing: 0.04em;
  }
  .footer-copy {
    font-size: 12px;
    color: var(--muted);
  }
  .footer-links {
    display: flex;
    gap: 24px;
    list-style: none;
  }
  .footer-links a {
    font-size: 12px;
    color: var(--muted);
    text-decoration: none;
  }
  .footer-links a:hover { color: var(--dark); }
 
  /* ANIMATIONS */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
 
  /* RESPONSIVE */
  @media (max-width: 768px) {
    nav { padding: 16px 20px; }
    .nav-links { display: none; }
    .hero, .story, .mv-section { grid-template-columns: 1fr; }
    .hero-left { padding: 48px 24px; }
    .hero-title { font-size: 36px; }
    .hero-right { min-height: 260px; }
    .story-img { min-height: 240px; border-right: none; border-bottom: 1px solid var(--border); }
    .story-content { padding: 40px 24px; }
    .stats { grid-template-columns: 1fr; }
    .stat-item { border-right: none; border-bottom: 1px solid var(--border); padding: 28px 24px; }
    .values { padding: 48px 20px; }
    .values-grid { grid-template-columns: 1fr; }
    .collections { padding: 48px 20px; }
    .collections-grid { grid-template-columns: repeat(2, 1fr); }
    .mv-section { grid-template-columns: 1fr; }
    .mv-card { border-right: none; border-bottom: 1px solid var(--border); padding: 40px 24px; }
    .cta-section { flex-direction: column; padding: 56px 24px; text-align: center; }
    .cta-title { font-size: 26px; }
    footer { flex-direction: column; gap: 16px; text-align: center; padding: 24px 20px; }
  }
</style>
</head>
<body>
 
<!-- NAV -->
<nav>
  <a href="https://spruce.global" class="nav-logo">spruce</a>
  <ul class="nav-links">
    <li><a href="https://spruce.global/product-category/co-ords/">Women</a></li>
    <li><a href="https://spruce.global/?page_id=84">Men</a></li>
    <li><a href="https://spruce.global/product-category/girls/">Girls</a></li>
    <li><a href="https://spruce.global/customized-tshirts-corporate/">Corporate</a></li>
  </ul>
  <a href="https://spruce.global" class="nav-cta">Shop now</a>
</nav>
 
<!-- HERO -->
<section class="hero">
  <div class="hero-left">
    <span class="eyebrow">Our story</span>
    <h1 class="hero-title">Born in color.<br><em>Built with grit.</em></h1>
    <p class="hero-sub">A women-led startup from a small town with a big heart — proving that premium style and fair prices can coexist.</p>
    <div class="tags">
      <span class="tag">Women-led</span>
      <span class="tag">Made in India</span>
      <span class="tag">Since 2024</span>
      <span class="tag">Coimbatore</span>
    </div>
  </div>
  <div class="hero-right">
    <div class="hero-img-placeholder">
      <!-- Replace this div with an <img> tag pointing to your brand photo -->
      <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
        <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/>
      </svg>
      <span>Add your brand photo here</span>
    </div>
  </div>
</section>
 
<!-- STATS -->
<section class="stats">
  <div class="stat-item">
    <p class="stat-num">4,000+</p>
    <p class="stat-label">Orders shipped</p>
  </div>
  <div class="stat-item">
    <p class="stat-num">12+</p>
    <p class="stat-label">Collections launched</p>
  </div>
  <div class="stat-item">
    <p class="stat-num">100%</p>
    <p class="stat-label">Women-led team</p>
  </div>
</section>
 
<!-- STORY -->
<section class="story">
  <div class="story-img">
    <!-- Replace with founder/team photo: <img src="..." style="width:100%;height:100%;object-fit:cover;"> -->
    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
      <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/>
    </svg>
    <span style="font-size:12px;">Founder / team photo</span>
  </div>
  <div class="story-content">
    <span class="eyebrow">Where it began</span>
    <h2 class="story-title">Small town.<br>Technicolor dreams.</h2>
    <p class="story-body">Spruce wasn't born in a boardroom. It started with a simple, defiant question: why should looking sharp come at such a high price?</p>
    <blockquote>
      <p>"We carry a heart full of hope into every stitch."</p>
    </blockquote>
    <p class="story-body">As unapologetic optimists, we believe everyone deserves a wardrobe that reflects their spark — without the luxury price tag.</p>
  </div>
</section>
 
<!-- VALUES -->
<section class="values">
  <div class="section-header">
    <h2 class="section-title">What we stand for</h2>
    <span class="section-num">04 values</span>
  </div>
  <div class="values-grid">
    <div class="value-card">
      <div class="value-icon icon-green">✦</div>
      <div>
        <p class="value-title">Quality without compromise</p>
        <p class="value-desc">Premium fabric at a price that doesn't make you think twice. Every piece built to last.</p>
      </div>
    </div>
    <div class="value-card">
      <div class="value-icon icon-amber">✦</div>
      <div>
        <p class="value-title">Inclusive sizing</p>
        <p class="value-desc">Fashion that fits every body, not just the ones on magazine covers.</p>
      </div>
    </div>
    <div class="value-card">
      <div class="value-icon icon-purple">✦</div>
      <div>
        <p class="value-title">Community first</p>
        <p class="value-desc">We grow with our customers — whether you're buying one piece or going bulk.</p>
      </div>
    </div>
    <div class="value-card">
      <div class="value-icon icon-pink">✦</div>
      <div>
        <p class="value-title">Technicolor thinking</p>
        <p class="value-desc">Bold ideas, bolder designs. We see the world in its most vivid, unfiltered colors.</p>
      </div>
    </div>
  </div>
</section>
 
<!-- COLLECTIONS -->
<section class="collections">
  <div class="section-header">
    <h2 class="section-title">Our collections</h2>
    <span class="section-num">Shop by category</span>
  </div>
  <div class="collections-grid">
    <a href="https://spruce.global/product-category/co-ords/" class="collection-card" style="text-decoration:none;">
      <div class="collection-img col-women">
        <!-- Replace with category image: <img src="..." style="width:100%;height:100%;object-fit:cover;"> -->
      </div>
      <div class="collection-label">
        <span class="collection-name">Women</span>
        <span class="collection-arrow">→</span>
      </div>
    </a>
    <a href="https://spruce.global/?page_id=84" class="collection-card" style="text-decoration:none;">
      <div class="collection-img col-men"></div>
      <div class="collection-label">
        <span class="collection-name">Men</span>
        <span class="collection-arrow">→</span>
      </div>
    </a>
    <a href="https://spruce.global/product-category/girls/" class="collection-card" style="text-decoration:none;">
      <div class="collection-img col-girls"></div>
      <div class="collection-label">
        <span class="collection-name">Girls</span>
        <span class="collection-arrow">→</span>
      </div>
    </a>
    <a href="https://spruce.global/customized-tshirts-corporate/" class="collection-card" style="text-decoration:none;">
      <div class="collection-img col-corporate"></div>
      <div class="collection-label">
        <span class="collection-name">Corporate</span>
        <span class="collection-arrow">→</span>
      </div>
    </a>
  </div>
</section>
 
<!-- MISSION + VISION -->
<section class="mv-section">
  <div class="mv-card">
    <p class="mv-label">Mission</p>
    <h3 class="mv-title">Bridge the gap between style and accessibility</h3>
    <p class="mv-body">To create premium-quality apparel that serves as a canvas for personal expression — ensuring quality never comes at a price that holds you back.</p>
  </div>
  <div class="mv-card">
    <p class="mv-label">Vision</p>
    <h3 class="mv-title">A global destination for unapologetic fashion</h3>
    <p class="mv-body">A community where every individual has the confidence to chase larger-than-life dreams, while feeling perfectly at home in what they wear.</p>
  </div>
</section>
 
<!-- CTA -->
<section class="cta-section">
  <h2 class="cta-title">Ready to wear something <em>real?</em></h2>
  <div class="cta-buttons">
    <a href="https://spruce.global" class="btn-primary">Shop now</a>
    <a href="mailto:contact@spruce.global" class="btn-secondary">Get in touch</a>
  </div>
</section>
 
<!-- FOOTER -->
<footer>
  <span class="footer-logo">spruce</span>
  <ul class="footer-links">
    <li><a href="#">Privacy Policy</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">FAQs</a></li>
  </ul>
  <span class="footer-copy">©2026 Spruce.Global</span>
</footer>
 
</body>
</html>/* End custom CSS */