:root {
  --bg: #FAFAF8; --bg2: #F5F2ED; --bg3: #EDE8E0; --bg4: #E4DDD2;
  --border: #DDD6CA; --border2: #C8BFB0;
  --text: #1A1612; --text2: #5A5248; --text3: #9A9088;
  --accent: #8B6F47; --accent2: #C4A882; --accent3: #F0E8DC;
  --card: #FFFFFF;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Georgia, serif; background: var(--bg); color: var(--text); line-height: 1.6; }
.sans { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 0 2.5rem; display: flex; align-items: center; justify-content: space-between;
  height: 64px; background: rgba(250,250,248,.97);
  border-bottom: 1px solid var(--border); backdrop-filter: blur(8px);
}
.nav-logo { font-family: -apple-system, sans-serif; font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--text); text-decoration: none; font-weight: 500; }
.nav-links { display: flex; gap: 1.75rem; align-items: center; }
.nav-links a { font-family: -apple-system, sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text2); text-decoration: none; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-cta { background: var(--text) !important; color: var(--bg) !important; padding: 8px 16px; border-radius: 1px; transition: background .2s !important; }
.nav-cta:hover { background: var(--accent) !important; color: #fff !important; }

/* BACK ARROW */
.back-bar { margin-top: 64px; padding: .875rem 2.5rem; background: var(--bg3); border-bottom: 1px solid var(--border); }
.back-link { font-family: -apple-system, sans-serif; font-size: 12px; letter-spacing: .06em; color: var(--text2); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; transition: color .2s; }
.back-link:hover { color: var(--accent); }
.back-link svg { width: 14px; height: 14px; }

/* SECTION LABELS */
.sec-label { font-family: -apple-system, sans-serif; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: .6rem; text-align: center; }
.sec-title { font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 400; text-align: center; margin-bottom: .6rem; color: var(--text); }
.sec-sub { font-family: -apple-system, sans-serif; font-size: 17px; color: var(--text2); text-align: center; max-width: 480px; margin: 0 auto 2.5rem; line-height: 1.7; }

/* BUTTONS */
.btn-dark { font-family: -apple-system, sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: var(--text); color: var(--bg); border: none; padding: 13px 36px; border-radius: 1px; cursor: pointer; transition: background .2s; text-decoration: none; display: inline-block; }
.btn-dark:hover { background: var(--accent); }
.btn-outline { font-family: -apple-system, sans-serif; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: transparent; color: var(--text); border: 1px solid var(--text); padding: 12px 36px; border-radius: 1px; cursor: pointer; transition: all .2s; text-decoration: none; display: inline-block; }
.btn-outline:hover { background: var(--text); color: var(--bg); }

/* COMPARE SLIDER - hover activated */
.compare-wrap { position: relative; overflow: hidden; cursor: crosshair; user-select: none; }
.cp-after, .cp-before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.cp-after { z-index: 1; }
.cp-before { z-index: 2; overflow: hidden; }
.cp-before-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.cp-div { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(250,245,235,.9); z-index: 20; transform: translateX(-50%); pointer-events: none; }
.cp-handle { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(250,245,235,.95); display: flex; align-items: center; justify-content: center; z-index: 21; box-shadow: 0 2px 12px rgba(0,0,0,.2); pointer-events: none; }
.cp-handle svg { width: 14px; height: 14px; }
.cp-lbl { position: absolute; top: 16px; font-family: -apple-system, sans-serif; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 1px; z-index: 10; pointer-events: none; }
.cp-lbl.r { right: 16px; background: rgba(250,245,235,.92); color: var(--text2); }
.cp-lbl.l { left: 16px; background: rgba(26,22,18,.6); color: #FAF5EB; }

/* PRICING */
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; max-width: 820px; margin: 0 auto; border: 1px solid var(--border); }
.pc { background: var(--card); padding: 2rem 1.5rem; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.pc:last-child { border-right: none; }
.pc.feat { background: var(--text); color: var(--bg); }
.p-tier { font-family: -apple-system, sans-serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text3); margin-bottom: .5rem; }
.pc.feat .p-tier { color: rgba(250,245,235,.5); }
.p-price { font-size: 2.2rem; font-weight: 400; line-height: 1; margin-bottom: .25rem; }
.p-price span { font-family: -apple-system, sans-serif; font-size: 13px; color: var(--text3); }
.pc.feat .p-price span { color: rgba(250,245,235,.5); }
.p-div { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.pc.feat .p-div { border-color: rgba(250,245,235,.15); }
.p-what { font-family: -apple-system, sans-serif; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-bottom: .75rem; }
.pc.feat .p-what { color: rgba(250,245,235,.5); }
.p-feats { list-style: none; flex: 1; font-family: -apple-system, sans-serif; font-size: 14px; color: var(--text2); margin-bottom: 1.5rem; }
.pc.feat .p-feats { color: rgba(250,245,235,.85); }
.p-feats li { padding: 5px 0; display: flex; align-items: flex-start; gap: 8px; }
.p-feats li::before { content: '✓'; color: var(--accent); flex-shrink: 0; font-size: 12px; margin-top: 1px; }
.pc.feat .p-feats li::before { color: var(--accent2); }
.p-btn { font-family: -apple-system, sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 12px; border-radius: 1px; cursor: pointer; background: var(--text); color: var(--bg); border: none; transition: all .2s; width: 100%; }
.p-btn:hover { background: var(--accent); }
.pc.feat .p-btn { background: var(--bg); color: var(--text); }
.pc.feat .p-btn:hover { background: var(--accent2); }

/* FAQ */
.faq-list { max-width: 640px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 1.1rem 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: Georgia, serif; font-size: 15px; color: var(--text); transition: color .2s; }
.faq-q:hover { color: var(--accent); }
.faq-icon { font-size: 20px; color: var(--text3); transition: transform .3s; flex-shrink: 0; margin-left: 1rem; }
.faq-a { font-family: -apple-system, sans-serif; font-size: 14px; line-height: 1.8; color: var(--text2); max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s; }
.faq-a.open { max-height: 180px; padding-bottom: 1.1rem; }
.faq-icon.open { transform: rotate(45deg); }

/* FOOTER */
footer { background: var(--text); color: var(--bg); padding: 3rem 2.5rem; }
.foot-inner { max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.foot-logo { font-family: -apple-system, sans-serif; font-size: 16px; letter-spacing: .2em; text-transform: uppercase; }
.foot-links { display: flex; gap: 2rem; }
.foot-links a { font-family: -apple-system, sans-serif; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(250,245,235,.5); text-decoration: none; transition: color .2s; }
.foot-links a:hover { color: #FAF5EB; }
.foot-copy { width: 100%; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(250,245,235,.12); font-family: -apple-system, sans-serif; font-size: 11px; color: rgba(250,245,235,.3); text-align: center; }

/* NEW BADGE */
.new-badge { display: inline-block; font-family: -apple-system, sans-serif; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 1px; background: var(--accent); color: #fff; margin-left: 8px; vertical-align: middle; }

/* CTA BANNER */
.cta-banner { padding: 5rem 2rem; background: var(--bg3); text-align: center; }
.cta-banner h2 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 400; max-width: 500px; margin: 0 auto 1.75rem; line-height: 1.3; }
.cta-banner h2 em { font-style: italic; }

/* ============================================
   RESPONSIVE / MOBILE STYLES
   ============================================ */

@media (max-width: 768px) {

  /* NAV - hamburger style on mobile */
  nav {
    padding: 0 1.25rem;
    height: 56px;
  }
  .nav-logo {
    font-size: 13px;
  }
  .nav-links {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    background: rgba(250,250,248,.98);
    flex-direction: column;
    padding: 1.5rem 2rem;
    gap: 1.25rem;
    border-bottom: 1px solid var(--border);
    z-index: 199;
    backdrop-filter: blur(8px);
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a {
    font-size: 14px;
    letter-spacing: .08em;
  }
  .nav-cta {
    text-align: center;
    padding: 12px 20px !important;
  }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    margin-right: -10px;
    background: none;
    border: none;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all .3s;
  }

  /* HERO */
  .hero {
    height: 520px;
  }
  .hero h1 {
    font-size: 2.4rem;
  }
  .hero-btns {
    flex-direction: column;
    align-items: center;
    gap: .75rem;
  }
  .btn-hero, .btn-hero-ghost {
    width: 220px;
    text-align: center;
  }

  /* INTRO CARDS */
  .intro {
    padding: 3rem 1.25rem;
  }
  .intro-cards {
    grid-template-columns: 1fr;
  }
  .intro-card {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .intro-card:last-child {
    border-bottom: none;
  }

  /* BEFORE/AFTER SLIDERS - full image visible on mobile */
  .concepts {
    padding: 2rem 0;
  }
  .concepts-tabs {
    justify-content: flex-start;
    padding: 0 .75rem;
    gap: 0;
  }
  .ctab {
    padding: .625rem .875rem;
    font-size: 12px;
    letter-spacing: .04em;
  }
  .concept-display {
    height: auto;
    aspect-ratio: 4/3;
    position: relative;
  }
  .concept-panel {
    position: relative;
    height: 100%;
  }
  .concept-compare {
    height: 100%;
  }
  .cp-lbl {
    font-size: 9px;
    padding: 3px 8px;
    top: 10px;
  }

  /* STYLE CARDS */
  .style-sec {
    padding: 3rem 1.25rem;
  }
  .style-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .875rem;
  }
  .sc-img {
    height: 120px;
  }

  /* STEPS */
  .steps-sec {
    padding: 3rem 1.25rem;
  }

  /* SERVICES GRID */
  .services-preview {
    padding: 3rem 1.25rem;
  }
  .services-grid {
    grid-template-columns: 1fr;
  }
  .svc-card {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .svc-card:last-child {
    border-bottom: none;
  }

  /* PORTFOLIO - full images visible on mobile */
  .portfolio {
    padding: 2.5rem 1rem;
  }
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  .portfolio-item {
    height: auto !important;
    aspect-ratio: 4/3;
    grid-column: span 1 !important;
  }
  .portfolio-item img {
    height: 100%;
    width: 100%;
  }

  /* PRICING */
  .pricing-sec {
    padding: 3rem 1.25rem;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    border: none;
    gap: .75rem;
  }
  .pc {
    border-right: none !important;
    border: 1px solid var(--border);
    padding: 1.5rem;
  }
  .pc.feat {
    border: 2px solid var(--accent);
  }

  /* FAQ */
  .faq-list {
    padding: 0 .25rem;
  }

  /* CTA BANNER */
  .cta-banner {
    padding: 3.5rem 1.25rem;
  }

  /* FOOTER */
  footer {
    padding: 2.5rem 1.25rem;
  }
  .foot-inner {
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
  }
  .foot-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  /* SECTION LABELS & TITLES */
  .sec-title {
    font-size: 1.6rem;
  }
  .sec-sub {
    font-size: 15px;
    padding: 0 .5rem;
  }

  /* ORDER PAGE */
  .order-page {
    grid-template-columns: 1fr !important;
    margin-top: 56px;
  }
  .order-left {
    padding: 2rem 1.25rem;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .order-right {
    padding: 2rem 1.25rem;
  }
  .pkg-grid {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  /* ABOUT PAGE */
  .about-body {
    grid-template-columns: 1fr !important;
    gap: 2rem;
    padding: 3rem 1.25rem;
  }
  .about-photo {
    max-width: 260px;
    margin: 0 auto;
  }
  .about-stats {
    grid-template-columns: 1fr 1fr;
  }

  /* EXAMPLES - full images on mobile */
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
  .gallery-item {
    height: auto !important;
    aspect-ratio: 4/3;
    grid-column: span 1 !important;
  }
  .gallery-item img {
    height: 100%;
    width: 100%;
  }
  .filter-sec {
    padding: 1rem;
    gap: .4rem;
  }
  .filter-btn {
    font-size: 10px;
    padding: 5px 12px;
  }

  /* SERVICES PAGES */
  .page-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  .hero-compare {
    height: 260px !important;
  }
  .includes-grid {
    grid-template-columns: 1fr;
  }
  .inc-card {
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  /* LEGAL PAGE */
  .legal-page {
    padding: 2rem 1.25rem;
  }

  /* RUSH NOTE */
  .rush-note, [style*="max-width:820px;margin:2rem auto"] {
    flex-direction: column;
    text-align: center;
  }
}

/* Hamburger toggle - always hidden on desktop */
.nav-toggle {
  display: none;
}
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
}