/* =============================================================
   CREST INTERIORS — Shared Stylesheet
   ============================================================= */

/* =============================================================
   COPY-PASTE SNIPPETS — Nav & Footer HTML
   =============================================================

   ── NAV ──────────────────────────────────────────────────────

   <nav class="site-nav">
     <a href="index.html" class="nav-brand">
       <img src="public/images/ci-logo.svg" alt="CI" class="nav-logo">
       <span class="brand-name">CREST INTERIORS</span>
     </a>
     <ul class="nav-links">
       <li><a href="index.html">Home</a></li>
       <li><a href="portfolio.html">Portfolio</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="contact.html">Contact</a></li>
     </ul>
     <a href="contact.html" class="btn btn-outline">Book a Consultation</a>
   </nav>

   ── FOOTER ───────────────────────────────────────────────────

   <footer class="site-footer">
     <div class="footer-inner">
       <div class="footer-brand">
         <img src="public/images/ci-logo.svg" alt="CI" class="footer-logo">
         <p class="footer-tagline">Crafted from the earth, designed for you.</p>
       </div>
       <div class="footer-cols">
         <div class="footer-col">
           <h4>Studio</h4>
           <ul>
             <li><a href="about.html">Our Story</a></li>
             <li><a href="about.html#team">Team</a></li>
             <li><a href="portfolio.html">Work</a></li>
           </ul>
         </div>
         <div class="footer-col">
           <h4>Services</h4>
           <ul>
             <li><a href="#">Residential</a></li>
             <li><a href="#">Commercial</a></li>
             <li><a href="#">Consultations</a></li>
           </ul>
         </div>
         <div class="footer-col">
           <h4>Connect</h4>
           <ul>
             <li><a href="contact.html">Contact</a></li>
             <li><a href="#">Instagram</a></li>
             <li><a href="#">Pinterest</a></li>
           </ul>
         </div>
       </div>
     </div>
     <div class="footer-bar">
       <p>&copy; 2026 Crest Interiors. All rights reserved.</p>
     </div>
   </footer>

   ============================================================= */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

/* ── CSS Variables ── */
:root {
  /* Brand palette */
  --color-linen:      #e1d3c5; /* background / base */
  --color-terracotta: #ab725e; /* warm mid-tone accent */
  --color-amber:      #c08332; /* gold / highlight accent */
  --color-rust:       #8c4d2e; /* deep warm accent, CTAs */
  --color-sage:       #a2a183; /* muted green-grey, secondary text */
  --color-moss:       #605b3d; /* darkest neutral, footer bg */
  --color-white:      #ffffff;

  /* Semantic aliases */
  --bg:               var(--color-linen);
  --text-primary:     var(--color-moss);
  --text-secondary:   var(--color-sage);
  --accent:           var(--color-amber);
  --accent-warm:      var(--color-terracotta);
  --accent-deep:      var(--color-rust);
  --footer-bg:        var(--color-moss);
  --nav-bg:           var(--color-linen);

  /* Typography */
  --font-brand:       'Monoton', cursive;
  /* Replace with Disket Mono when self-hosted: */
  --font-heading:     'Space Mono', monospace;
  --font-body:        'JetBrains Mono', monospace;

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;

  /* Nav */
  --nav-height: 86px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }


body {
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
}

img { display: block; max-width: 100%; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); /* replace with Disket Mono when self-hosted */
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.6rem); }
h4 { font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase; }
h5 { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; }

p { font-family: var(--font-body); font-size: 1rem; color: var(--text-primary); }

/* ── Buttons ── */
.btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.65rem 1.5rem;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  display: inline-block;
}

.btn-solid {
  background-color: var(--accent-deep);
  color: var(--color-white);
  border: 2px solid var(--accent-deep);
}
.btn-solid:hover {
  background-color: var(--accent-warm);
  border-color: var(--accent-warm);
}

.btn-outline {
  background-color: transparent;
  color: var(--text-primary);
  border: 2px solid var(--text-primary);
}
.btn-outline:hover {
  background-color: var(--text-primary);
  color: var(--bg);
}

/* ── Navigation ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--nav-height);
  padding: 0 var(--space-md);
  background-color: var(--nav-bg);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.site-nav.scrolled {
  border-color: var(--color-sage);
  box-shadow: 0 2px 12px rgba(96, 91, 61, 0.08);
}

.site-nav .btn {
  font-size: 0.9rem;
  padding: 0.75rem 1.75rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
}

.nav-logo {
  width: 60px;
  height: 60px;
  border-radius: 4px;
}

.brand-name-img {
  height: 34px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: var(--space-md);
  list-style: none;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
  position: relative;
  transition: color 0.2s ease;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--accent);
  transition: width 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a:hover { color: var(--accent-deep); }

/* ── Footer ── */
.site-footer {
  background-color: var(--footer-bg);
  color: var(--color-white);
  padding: var(--space-lg) var(--space-md) 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  flex-wrap: wrap;
}

.footer-logo {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

.footer-brand {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-sm);
}

.footer-brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-brand-name {
  font-family: var(--font-brand);
  font-size: 1.7rem;
  color: var(--color-white);
  letter-spacing: 0.05em;
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: 1.35rem;
  color: var(--color-sage);
  font-style: italic;
}

.footer-cols {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.footer-col h4 {
  font-family: var(--font-heading); /* replace with Disket Mono when self-hosted */
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-sm);
}

.footer-col ul { display: flex; flex-direction: column; gap: 0.4rem; }

.footer-col a {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--color-sage);
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--color-white); }

.footer-bar {
  padding: var(--space-sm) 0;
  text-align: center;
}

.footer-bar p {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-sage);
}

/* ── Layout Helpers ── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--space-lg) 0;
}

/* ── Utility ── */
.text-accent    { color: var(--accent); }
.text-muted     { color: var(--text-secondary); }
.text-center    { text-align: center; }
.uppercase      { text-transform: uppercase; letter-spacing: 0.1em; }

/* ── Lucide icon base ── */
.lucide {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Mobile nav toggle ── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-primary);
  line-height: 1;
}
.nav-toggle .lucide { width: 22px; height: 22px; }

/* ── Image placeholders (shown until real photos are added) ── */
.work-img-wrap,
.portfolio-img-wrap {
  background: linear-gradient(140deg, var(--color-terracotta) 0%, var(--color-linen) 100%);
}
.team-img-wrap {
  background: linear-gradient(140deg, var(--color-sage) 0%, var(--color-linen) 100%);
}
.philosophy-image .parallax-img,
.about-image .parallax-img {
  background: linear-gradient(140deg, var(--color-amber) 0%, var(--color-linen) 100%);
  aspect-ratio: 4/5;
}

/* ── Value card icons ── */
.value-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  margin-bottom: var(--space-sm);
}

/* ── Info block icons (contact page) ── */
.info-icon {
  width: 16px;
  height: 16px;
  color: var(--accent);
  margin-right: 6px;
  vertical-align: middle;
}

/* ── Footer social icon ── */
.footer-icon {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 6px;
}

/* ── Testimonials ── */
.testimonials-section {
  background-color: rgba(192, 131, 50, 0.05);
}
.testimonials-eyebrow { margin-bottom: 0.4rem; }
.testimonials-heading { margin-bottom: var(--space-lg); }

.swiper-testimonials {
  padding-bottom: calc(var(--space-md) + 16px) !important;
}

.testimonial-card {
  background-color: var(--color-white);
  padding: var(--space-md);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.testimonial-icon {
  color: var(--accent);
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-sm);
  flex-shrink: 0;
}

.testimonial-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.85;
  font-style: italic;
  flex: 1;
  margin-bottom: var(--space-sm);
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-top: 1px solid var(--color-linen);
  padding-top: var(--space-sm);
}

.testimonial-name {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--text-primary);
}

.testimonial-project {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ── Page Header (shared across inner pages) ── */
.page-header {
  padding: var(--space-lg) 0 var(--space-md);
}
.page-header .hero-subtitle {
  margin-top: var(--space-sm);
}

/* ── Hero (index.html) — two-column, full viewport ── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "left  right"
    "cta   right";
  height: calc(100vh - var(--nav-height));
}

.hero-left  { grid-area: left; }
.hero-right { grid-area: right; }
.hero-cta   { grid-area: cta; }

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-lg);
}

.hero-brand-img {
  max-width: 100%;
  height: auto;
  display: block;
  align-self: flex-start;
  /* PNG background is #e1d3c5 — matches linen bg, appears transparent */
}

.hero-brand-text {
  font-family: var(--font-brand);
  color: #ffffff;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.2;
  font-weight: 400;
  text-align: right;
  align-self: stretch;
}

.hero-tagline {
  font-family: var(--font-heading); /* Disket Mono when self-hosted */
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  color: var(--text-secondary);
  font-style: normal;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: right;
  align-self: stretch;
  width: 100%;
}

.hero-cta {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  padding: 0 var(--space-xl) var(--space-xl) var(--space-lg);
}

/* Image wrapper — flex makes inner div fill only the padded content area */
.hero-right {
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  display: flex;
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}

.hero-right-inner {
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.hero-right-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.85s ease;
}

.hero-right-inner:hover img {
  transform: scale(1.04);
}

@media (max-width: 900px) {
  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .hero-left {
    order: 1;
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }
  .hero-right {
    order: 2;
    height: 55vw;
    min-height: 280px;
    padding: var(--space-sm);
  }
  .hero-cta {
    order: 3;
    padding: var(--space-md);
    justify-content: center;
  }
}

/* ── Intro Strip (index.html) ── */
.intro-strip {
  border-top: 1px solid var(--color-sage);
  border-bottom: 1px solid var(--color-sage);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  margin-top: 0;
}
.intro-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.intro-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--accent-deep);
}
.stat-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* ── Work Grid (index.html) ── */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.work-card { overflow: hidden; }
.work-img-wrap {
  aspect-ratio: 4/5;
  background-color: var(--color-sage);
  overflow: hidden;
}
.work-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-info { padding: var(--space-sm) 0 0; }
.work-info h2 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
.work-tag {
  font-size: 0.72rem;
  display: block;
  margin-top: 0.35rem;
  margin-bottom: 0;
}

/* ── Philosophy (index.html) ── */
.philosophy-section { background-color: rgba(162, 161, 131, 0.1); }
.philosophy-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.philosophy-image { overflow: hidden; }
.philosophy-image img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

/* ── Materials section ── */
.materials-section {
  border-top: 1px solid var(--color-sage);
  border-bottom: 1px solid var(--color-sage);
}
.materials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.material-img {
  aspect-ratio: 2/3;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}
.material-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.85s ease;
}
.material-img:hover img { transform: scale(1.04); }

/* ── CTA Banner ── */
.cta-banner {
  padding: var(--space-lg) 0;
  background-color: rgba(192, 131, 50, 0.08);
  border-top: 1px solid rgba(192, 131, 50, 0.2);
  border-bottom: 1px solid rgba(192, 131, 50, 0.2);
}
.cta-banner h2 { margin-bottom: 0; }

/* ── Portfolio (portfolio.html) ── */
.filter-bar {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding-bottom: var(--space-sm);
}
.portfolio-grid-section { padding-top: var(--space-sm); }
.filter-btn {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--color-sage);
  color: var(--text-secondary);
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.filter-btn.active,
.filter-btn:hover {
  background-color: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg);
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.portfolio-card { overflow: hidden; }
.portfolio-img-wrap {
  aspect-ratio: 3/4;
  background-color: var(--color-sage);
  overflow: hidden;
}
.portfolio-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portfolio-info { padding: var(--space-sm) 0 0; }
.portfolio-info h2 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
.portfolio-desc {
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin-top: 0.4rem;
}

/* ── About (about.html) ── */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.about-image img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }

.values-section { background-color: rgba(162, 161, 131, 0.1); }
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.value-card { padding: var(--space-sm); }
.value-number {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  display: block;
  margin-bottom: var(--space-xs);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.team-img-wrap {
  aspect-ratio: 3/4;
  background-color: var(--color-sage);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}
.team-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

.press-section { border-top: 1px solid var(--color-sage); }
.press-logos {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.press-name {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-style: italic;
}

/* ── Contact (contact.html) ── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-lg);
  align-items: start;
}

.contact-form { display: flex; flex-direction: column; gap: var(--space-sm); }

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field-group label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}
.field-group input,
.field-group select,
.field-group textarea {
  font-family: var(--font-body);
  font-size: 0.9rem;
  background-color: transparent;
  border: 1px solid var(--color-sage);
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s ease;
  border-radius: 0;
  -webkit-appearance: none;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  border-color: var(--accent);
}
.field-group input::placeholder,
.field-group textarea::placeholder { color: var(--color-sage); }
.field-group textarea { resize: vertical; min-height: 140px; }

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-sm);
}
.info-block h4 { margin-bottom: 0.5rem; }
.info-block p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.info-block a { color: var(--text-secondary); transition: color 0.2s ease; }
.info-block a:hover { color: var(--accent-deep); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .work-grid,
  .portfolio-grid,
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .intro-grid { grid-template-columns: repeat(2, 1fr); }
  .materials-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
  .philosophy-inner,
  .about-split { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav-toggle { display: block; color: #ffffff; }
  .nav-brand  { display: none; }

  /* Hide desktop "Book" button; it appears in the mobile menu instead */
  .site-nav > .btn-outline { display: none; }

  .site-nav {
    height: auto;
    padding: var(--space-sm) var(--space-md);
    position: relative;
  }

  /* Mobile nav dropdown */
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 200;
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--color-sage);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-sm) var(--space-md);
  }
  .nav-links.nav-open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a {
    font-size: 0.9rem;
    padding: 0.6rem 0;
    display: block;
    border-bottom: 1px solid rgba(162,161,131,0.25);
  }
  .nav-links li:last-child a { border-bottom: none; }

  .work-grid,
  .portfolio-grid,
  .team-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .intro-grid { grid-template-columns: repeat(2, 1fr); }
  .press-logos { gap: var(--space-md); }
  .footer-inner { flex-direction: column; }
  .footer-cols  { flex-direction: column; gap: var(--space-md); }
}