*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #1a1a18;
  --ink-soft: #252522;
  --cream: #f5f0e8;
  --cream-soft: #ede8e0;
  --gold: #b8924a;
  --gold-light: #d4aa6a;
  --warm-gray: #6b6560;
  --white: #faf7f2;
  --nav-h: 76px;
}

html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--ink); font-family: 'DM Sans', sans-serif; font-weight: 300; overflow-x: hidden; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--gold); }

/* ══ NAV ══ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 52px;
  background: rgba(26,26,24,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(184,146,74,0.18);
}
.nav-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.nav-logo-text { display: flex; flex-direction: column; }
.nav-brand {
  display: flex; align-items: baseline; gap: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px; letter-spacing: 0.1em;
}
.nav-brand-cleared { font-weight: 300; color: var(--cream); }
.nav-brand-by { font-style: italic; font-weight: 300; color: var(--gold); margin: 0 5px; }
.nav-brand-carper { font-weight: 600; color: var(--cream); }
.nav-logo-sub { font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }

.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,240,232,0.65); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-cta { padding: 10px 22px; border: 1px solid var(--gold) !important; color: var(--gold) !important; transition: all 0.25s !important; }
.nav-cta:hover { background: var(--gold) !important; color: var(--ink) !important; }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 1.5px; background: var(--cream); }
.mobile-menu { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--ink); border-bottom: 1px solid rgba(184,146,74,0.2); padding: 32px 28px; z-index: 99; flex-direction: column; gap: 24px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); text-decoration: none; }
.mobile-menu a:hover { color: var(--gold); }

/* ══ SHARED ══ */
.section { padding: 100px 52px; max-width: 1200px; margin: 0 auto; }
.section-label { font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.section-label::before { content: ''; display: block; width: 22px; height: 1px; background: var(--gold); }
.section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(30px,4vw,52px); font-weight: 300; color: var(--ink); line-height: 1.15; letter-spacing: 0.02em; margin-bottom: 18px; }
.section-title em { font-style: italic; color: var(--gold); }
.section-body { font-size: 15px; font-weight: 300; color: var(--warm-gray); line-height: 1.85; max-width: 500px; }

.btn-primary { padding: 14px 36px; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; border: none; cursor: pointer; transition: all 0.25s; text-decoration: none; display: inline-block; }
.btn-primary:hover { background: var(--gold-light); }
.btn-outline { padding: 14px 36px; background: transparent; color: var(--cream); font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid rgba(245,240,232,0.25); cursor: pointer; transition: all 0.25s; text-decoration: none; display: inline-block; }
.btn-outline:hover { border-color: var(--cream); }
.btn-dark { padding: 14px 38px; background: var(--ink); color: var(--cream); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; border: none; cursor: pointer; transition: all 0.25s; text-decoration: none; display: inline-block; margin: 0 8px 8px; }
.btn-dark:hover { background: #333330; }
.btn-outline-dark { padding: 14px 38px; background: transparent; color: var(--ink); font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid rgba(26,26,24,0.3); cursor: pointer; transition: all 0.25s; text-decoration: none; display: inline-block; margin: 0 8px 8px; }
.btn-outline-dark:hover { border-color: var(--ink); }

/* ══ CTA BANNER ══ */
.cta-banner { background: var(--gold); padding: 80px 52px; text-align: center; }
.cta-banner-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(26px,4vw,48px); font-weight: 300; color: var(--ink); margin-bottom: 14px; }
.cta-banner-sub { font-size: 14px; font-weight: 300; color: rgba(26,26,24,0.6); margin-bottom: 34px; }

/* ══ FOOTER ══ */
footer { background: var(--ink); border-top: 1px solid rgba(184,146,74,0.12); padding: 44px 52px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.footer-links { display: flex; gap: 26px; list-style: none; flex-wrap: wrap; }
.footer-links a { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,240,232,0.35); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--gold); }
.footer-copy { font-size: 11px; color: rgba(245,240,232,0.2); letter-spacing: 0.06em; }

/* ══ PROCESS ══ */
.process-section { background: var(--cream); padding: 100px 52px; }
.process-inner { max-width: 1200px; margin: 0 auto; }
.process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--cream-soft); margin-top: 56px; }
.process-step { background: var(--white); padding: 40px 30px; }
.process-step-num { font-family: 'Cormorant Garamond', serif; font-size: 52px; font-weight: 300; color: rgba(184,146,74,0.12); line-height: 1; margin-bottom: 14px; }
.process-step-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 10px; }
.process-step-body { font-size: 13px; font-weight: 300; color: var(--warm-gray); line-height: 1.75; }

/* ══ BEFORE & AFTER ══ */
.ba-section { background: var(--cream); padding: 100px 52px; }
.ba-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(2,1fr); gap: 36px; }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 14px; }
.ba-img { aspect-ratio: 4/3; overflow: hidden; }
.ba-caption { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 400; color: var(--ink); margin-bottom: 3px; }
.ba-meta { font-size: 11px; color: var(--warm-gray); letter-spacing: 0.06em; }

/* ══ SERVICES ══ */
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--cream-soft); }
.service-card { background: var(--white); padding: 50px 38px; position: relative; transition: background 0.3s; }
.service-card:hover { background: var(--cream); }
.service-card.featured { background: var(--ink); }
.service-card.featured:hover { background: #222220; }
.service-num { font-family: 'Cormorant Garamond', serif; font-size: 11px; font-weight: 400; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 28px; }
.service-name { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; color: var(--ink); margin-bottom: 8px; }
.service-card.featured .service-name { color: var(--cream); }
.service-price { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 300; color: var(--gold); margin-bottom: 20px; line-height: 1; }
.service-price span { font-size: 13px; color: var(--warm-gray); vertical-align: middle; }
.service-desc { font-size: 13px; font-weight: 300; color: var(--warm-gray); line-height: 1.75; margin-bottom: 24px; }
.service-card.featured .service-desc { color: rgba(245,240,232,0.55); }
.service-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.service-features li { font-size: 13px; font-weight: 300; color: var(--ink); padding-left: 18px; position: relative; }
.service-features li::before { content: '✦'; position: absolute; left: 0; color: var(--gold); font-size: 8px; top: 3px; }
.service-card.featured .service-features li { color: rgba(245,240,232,0.75); }
.featured-badge { position: absolute; top: 22px; right: 22px; background: var(--gold); color: var(--ink); font-size: 9px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 10px; }

/* ══ CONTACT ══ */
.contact-page { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--nav-h)); }
.contact-left { background: var(--ink); padding: 100px 60px; display: flex; flex-direction: column; justify-content: center; }
.contact-left .section-title { color: var(--cream); }
.contact-left .section-body { color: rgba(245,240,232,0.5); margin-bottom: 44px; }
.contact-info-items { display: flex; flex-direction: column; gap: 26px; }
.contact-info-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-info-icon { width: 34px; height: 34px; border: 1px solid rgba(184,146,74,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; }
.contact-info-label { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; }
.contact-info-value { font-size: 14px; color: var(--cream); }
.contact-right { background: var(--white); padding: 100px 60px; display: flex; flex-direction: column; justify-content: center; }
.form-group { margin-bottom: 22px; }
.form-label { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-gray); margin-bottom: 7px; }
.form-input, .form-select, .form-textarea { width: 100%; padding: 13px 15px; background: var(--cream); border: 1px solid var(--cream-soft); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 300; color: var(--ink); outline: none; transition: border-color 0.2s; appearance: none; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--gold); }
.form-textarea { resize: vertical; min-height: 110px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ══ LIGHTBOX ══ */
.lightbox-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(26,26,24,0.95); backdrop-filter: blur(8px); align-items: center; justify-content: center; cursor: zoom-out; }
.lightbox-overlay.active { display: flex; }
.lightbox-img { max-width: 92vw; max-height: 90vh; object-fit: contain; border: 1px solid rgba(184,146,74,0.25); box-shadow: 0 32px 80px rgba(0,0,0,0.6); cursor: default; }
.lightbox-close { position: fixed; top: 20px; right: 28px; color: var(--gold); font-size: 32px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 300; line-height: 1; z-index: 10000; background: none; border: none; padding: 8px; }
.lightbox-close:hover { color: var(--gold-light); }
.ba-img img { cursor: zoom-in; }

@keyframes fadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation: fadeUp 0.7s ease forwards; opacity:0; }
.delay-1{animation-delay:0.1s} .delay-2{animation-delay:0.25s} .delay-3{animation-delay:0.4s} .delay-4{animation-delay:0.55s}

@media(max-width:900px){
  nav { padding: 0 24px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .section { padding: 60px 24px; }
  .process-section, .cta-banner, .ba-section { padding: 60px 24px; }
  .process-steps { grid-template-columns: repeat(2,1fr); }
  .services-grid, .ba-grid { grid-template-columns: 1fr; }
  .contact-page { grid-template-columns: 1fr; }
  .contact-left, .contact-right { padding: 60px 24px; }
  .form-row { grid-template-columns: 1fr; }
  footer { padding: 32px 24px; flex-direction: column; align-items: flex-start; }
  .cta-banner { padding: 60px 24px; }
  /* Hero section */
  .hero-inner { grid-template-columns: 1fr !important; gap: 32px !important; padding: 60px 24px !important; }
  .hero-stats { grid-template-columns: 1fr 1fr !important; }
  /* About page */
  .about-hero-grid { grid-template-columns: 1fr !important; gap: 40px !important; padding: 80px 24px 60px !important; }
  .about-photo { width: 100% !important; aspect-ratio: 4/3 !important; }
  /* Blog cards — stack vertically, hide dark image panel */
  a[href*="/blog/"] { grid-template-columns: 1fr !important; }
  a[href*="/blog/"] > div:last-child { display: none !important; }
  a[href*="/blog/"] > div:first-child { padding: 32px 24px !important; }
}
@media(max-width:600px){
  .process-steps { grid-template-columns: 1fr; gap: 0; }
  .process-step { padding: 28px 22px; display: flex; align-items: flex-start; gap: 18px; }
  .process-step-num { font-size: 36px; margin-bottom: 0; flex-shrink: 0; width: 40px; line-height: 1.1; }
  .ba-pair { grid-template-columns: 1fr; gap: 3px; }
  .ba-img { aspect-ratio: 16/10; }
  .ba-grid { gap: 44px; }
  .hero-stats { grid-template-columns: 1fr !important; }
}