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

:root {
  --black:      #1a1208;
  --off-black:  #2c1f10;
  --dark-brown: #3a2e22;
  --mid-brown:  #6b5e4e;
  --warm-gray:  #a0907a;
  --light-tan:  #d9cfc0;
  --pale-tan:   #e8dece;
  --off-white:  #f0e8d8;
  --cream:      #f7f3ec;
  --white:      #faf5ec;
  --serif: Georgia, 'Times New Roman', serif;
  --sans:  'Helvetica Neue', Arial, sans-serif;
  --max-w: 1100px;
  --nav-h: 72px;
  --tapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect width='18' height='18' fill='%23f0e8d8'/%3E%3Crect x='0' y='8' width='18' height='1' fill='%23c8b090' opacity='.35'/%3E%3Crect x='8' y='0' width='1' height='18' fill='%23c8b090' opacity='.35'/%3E%3Crect x='3' y='3' width='3' height='3' fill='%23c8b090' opacity='.18'/%3E%3Crect x='12' y='12' width='3' height='3' fill='%23c8b090' opacity='.18'/%3E%3Crect x='3' y='12' width='3' height='3' fill='%23c8b090' opacity='.18'/%3E%3Crect x='12' y='3' width='3' height='3' fill='%23c8b090' opacity='.18'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--black); background: var(--white); font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 2.5rem; }

h1 { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 400; line-height: 1.15; color: var(--black); }
h2 { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.2; color: var(--black); }
h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 400; color: var(--black); margin-bottom: 0.4rem; }
p  { color: var(--mid-brown); }

.serif-amp { font-family: Georgia, serif; font-style: italic; }

.btn-primary   { display:inline-block; background:var(--black); color:var(--cream)!important; font-family:var(--sans); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; padding:.9rem 2.2rem; border:1px solid var(--black); transition:background .2s; }
.btn-primary:hover { background:var(--dark-brown); }
.btn-secondary { display:inline-block; background:transparent; color:var(--black)!important; font-family:var(--sans); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; padding:.9rem 2.2rem; border:1px solid var(--light-tan); transition:background .2s; }
.btn-secondary:hover { background:var(--off-white); }
.btn-light     { display:inline-block; background:transparent; color:var(--off-white)!important; font-family:var(--sans); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; padding:.9rem 2.2rem; border:1px solid #7a6040; transition:background .2s; }
.btn-light:hover { background:rgba(255,255,255,.08); }

.tapa-divider { width:100%; height:18px; overflow:hidden; line-height:0; background-image:var(--tapa); background-size:18px 18px; }

.nav { position:sticky; top:0; z-index:100; background:var(--white); border-bottom:1px solid var(--light-tan); height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; padding:0 2.5rem; }
.nav-logo { display:flex; align-items:center; gap:.7rem; }
.nav-logo img { height:44px; width:auto; background:transparent !important; border:none !important; outline:none !important; box-shadow:none !important; }
.nav-logo-text { font-family:var(--serif); font-size:1.1rem; letter-spacing:.04em; color:var(--black); line-height:1.2; }
.nav-logo-sub { display:block; font-family:var(--sans); font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--warm-gray); margin-top:1px; }
.nav-links { display:flex; align-items:center; gap:2.5rem; }
.nav-links a { font-family:var(--sans); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mid-brown); transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--black); }
.nav-cta { border:1px solid var(--black)!important; padding:.5rem 1.2rem!important; color:var(--black)!important; }
.nav-cta:hover { background:var(--off-white)!important; }
.nav-toggle { display:none; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--black); }

.hero { display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - var(--nav-h)); align-items:stretch; }
.hero-inner { padding:5rem 2.5rem; max-width:560px; margin-left:auto; display:flex; flex-direction:column; justify-content:center; }
.hero-eyebrow { font-family:var(--sans); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--warm-gray); margin-bottom:1.4rem; }
.hero-inner h1 { margin-bottom:1.4rem; }
.hero-sub { font-family:var(--sans); font-size:1.05rem; line-height:1.85; color:var(--mid-brown); max-width:420px; }
.hero-visual { background:var(--off-white); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1rem; overflow:hidden; }
.hero-visual img { width:100%; height:100%; object-fit:cover; }
.hero-img-placeholder { width:100%; height:100%; min-height:480px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; background:var(--off-white); color:var(--warm-gray); font-family:var(--sans); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }

/* Tints the transparent logo mark to match the site palette wherever it's used as a placeholder. Uses the PNG's alpha channel as a mask, so the fill color comes entirely from --warm-gray rather than the source image's own color. */
.placeholder-mark {
  display:block;
  background-color: var(--warm-gray);
  -webkit-mask-image: url("logo-symbol-transparent.png");
  mask-image: url("logo-symbol-transparent.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: .55;
}

.local-banner { background:var(--black); padding:.9rem 1.5rem; display:flex; align-items:center; justify-content:center; gap:1.2rem; position:relative; overflow:hidden; flex-wrap:wrap; }
.local-banner::before { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0px,rgba(255,255,255,.025) 1px,transparent 1px,transparent 5px),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0px,rgba(255,255,255,.025) 1px,transparent 1px,transparent 5px); }
.local-banner span { font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:#c8a87a; position:relative; }
.local-banner .dot { color:#7a6040; font-size:8px; position:relative; }

.services-home { padding:5rem 2.5rem; background:var(--white); border-top:1px solid var(--light-tan); }
.services-home h2 { margin-bottom:.4rem; }
.services-home-sub { font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--warm-gray); margin-bottom:2.5rem; display:block; }
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.service-card { border:1px solid var(--pale-tan); padding:1.6rem 1.3rem; background:var(--cream); }
.service-card-label { font-family:var(--sans); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:#b5a080; display:block; margin-bottom:.7rem; }
.service-card h3 { margin-bottom:.5rem; }
.service-card p { font-family:var(--sans); font-size:.95rem; line-height:1.75; color:#7a6a58; }

.local-section { display:grid; grid-template-columns:1fr 1fr; background:var(--off-white); border-top:1px solid var(--light-tan); }
.local-text { padding:5rem 2.5rem; display:flex; flex-direction:column; justify-content:center; }
.local-text h2 { margin-bottom:1rem; }
.local-text p { font-family:var(--sans); font-size:1.05rem; line-height:1.85; color:var(--dark-brown); margin-bottom:1.2rem; }
.local-text p:last-child { margin-bottom:0; }
.local-visual { background:var(--pale-tan); display:flex; align-items:center; justify-content:center; padding:3rem; min-height:320px; position:relative; overflow:hidden; }
.local-visual-amp { font-family:Georgia,serif; font-style:italic; font-size:18rem; color:rgba(58,46,34,.08); line-height:1; user-select:none; position:absolute; }

.stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--light-tan); border-bottom:1px solid var(--light-tan); background:var(--cream); }
.stat { padding:3rem; text-align:center; border-right:1px solid var(--light-tan); }
.stat:last-child { border-right:none; }
.stat-num { font-family:var(--serif); font-size:2.8rem; font-weight:400; color:var(--black); display:block; margin-bottom:.3rem; }
.stat-label { font-family:var(--sans); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--warm-gray); }

.brands-section { padding:3.5rem 2.5rem; border-top:1px solid var(--light-tan); background:var(--cream); }
.brands-label { font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--warm-gray); text-align:center; display:block; margin-bottom:2.5rem; }
.brands-grid { display:grid; grid-template-columns:repeat(4,1fr); align-items:center; gap:2.5rem 2rem; max-width:960px; margin:0 auto; }
.brand-item { display:flex; align-items:center; justify-content:center; padding:.8rem; filter:grayscale(100%); opacity:.6; transition:opacity .3s, filter .3s; }
.brand-item:hover { opacity:1; filter:grayscale(0%); }
.brand-item img { max-height:56px; max-width:100%; width:auto; object-fit:contain; }
.brand-item.dark-logo { filter:none; opacity:.75; }
.brand-item.dark-logo:hover { opacity:1; }

.strip-cta { background:var(--black); padding:3.5rem 2.5rem; display:flex; align-items:center; justify-content:space-between; position:relative; overflow:hidden; }
.strip-cta::before { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0px,rgba(255,255,255,.025) 1px,transparent 1px,transparent 5px),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0px,rgba(255,255,255,.025) 1px,transparent 1px,transparent 5px); }
.strip-cta p { font-family:var(--serif); font-size:1.8rem; color:var(--off-white); position:relative; }

.page-header { padding:5rem 2.5rem 3.5rem; border-bottom:1px solid var(--light-tan); background:var(--cream); }
.page-header h1 { margin-bottom:.5rem; }
.page-header p { font-family:var(--sans); font-size:1.05rem; color:var(--mid-brown); max-width:480px; }

.services-list { padding:4rem 2.5rem; background-image:var(--tapa); background-size:18px 18px; }
.service-row { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; padding:4rem 3rem; border-bottom:1px solid var(--pale-tan); background:var(--white); margin-bottom:2rem; }
.service-row:last-child { border-bottom:none; margin-bottom:0; }
.service-row.reverse .service-text { order:2; }
.service-row.reverse .service-img  { order:1; }
.service-num { font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--warm-gray); display:block; margin-bottom:.8rem; }
.service-text h2 { margin-bottom:1rem; }
.service-text .desc { font-family:var(--sans); font-size:1rem; line-height:1.85; color:var(--mid-brown); margin-bottom:1.4rem; }
.service-text ul li { font-family:var(--sans); font-size:.95rem; color:var(--mid-brown); padding:.45rem 0 .45rem 1.2rem; border-bottom:1px solid var(--pale-tan); position:relative; }
.service-text ul li:last-child { border-bottom:none; }
.service-text ul li::before { content:'—'; position:absolute; left:0; color:var(--light-tan); }
.service-img { background:var(--off-white); aspect-ratio:4/3; overflow:hidden; }
.service-img-placeholder { overflow:visible; }
.service-img img { width:100%; height:100%; object-fit:cover; }
.service-img-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; font-family:var(--sans); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#c8b090; background:var(--off-white); aspect-ratio:4/3; }

.gallery-section { padding:3.5rem 2.5rem 5rem; background-image:var(--tapa); background-size:18px 18px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.gallery-item { background:var(--off-white); aspect-ratio:3/4; overflow:hidden; }
.gallery-placeholder { overflow:visible; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-item:hover img { transform:scale(1.03); }
.gallery-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; font-family:var(--sans); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#c8b090; background:var(--off-white); aspect-ratio:3/4; }
.gallery-caption { font-family:var(--sans); font-size:.88rem; color:var(--mid-brown); padding:.6rem 0 1rem; }

.about-section { padding:4rem 2.5rem 5rem; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.about-text h2 { margin-bottom:1.2rem; }
.about-text p { font-family:var(--sans); font-size:1rem; line-height:1.9; color:var(--mid-brown); margin-bottom:1.1rem; }
.values-list { margin-top:2.5rem; }
.value-item { padding:.9rem 0; border-bottom:1px solid var(--pale-tan); }
.value-item:first-child { border-top:1px solid var(--pale-tan); }
.value-item h4 { font-family:var(--serif); font-size:1.1rem; font-weight:400; color:var(--black); margin-bottom:.2rem; }
.value-item p { font-family:var(--sans); font-size:.92rem; color:var(--warm-gray); margin:0; }
.studio-photo { background:var(--off-white); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#c8b090; margin-bottom:1.5rem; overflow:hidden; }
.studio-photo img { width:100%; height:100%; object-fit:cover; }
.info-card { border:1px solid var(--light-tan); background:var(--cream); padding:1.6rem; }
.info-card-title { font-family:var(--serif); font-size:1.2rem; color:var(--black); display:block; margin-bottom:.8rem; }
.info-card p { font-family:var(--sans); font-size:.95rem; color:var(--mid-brown); line-height:1.8; margin-bottom:.4rem; }
.info-card .muted { font-size:.85rem; color:var(--warm-gray); margin-top:.3rem; }
.parking-note { background:var(--pale-tan); border-left:2px solid var(--light-tan); padding:.9rem 1rem; margin-top:.8rem; }
.parking-note p { font-family:var(--sans); font-size:.9rem; color:var(--dark-brown); line-height:1.7; margin:0; }
.map-embed { width:100%; height:200px; border:0; margin-top:1.2rem; filter:grayscale(20%) sepia(10%); }

.contact-section { padding:4rem 2.5rem 5rem; }
.contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:5rem; align-items:start; }
.contact-info h2 { margin-bottom:1rem; }
.contact-info .desc { font-family:var(--sans); font-size:1rem; line-height:1.85; color:var(--mid-brown); margin-bottom:2rem; }
.contact-detail { padding:.9rem 0; border-bottom:1px solid var(--pale-tan); }
.contact-detail-label { font-family:var(--sans); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--warm-gray); margin-bottom:.25rem; }
.contact-detail p { font-family:var(--sans); font-size:.95rem; color:var(--dark-brown); margin:0; line-height:1.7; }
.contact-form { display:flex; flex-direction:column; gap:1.3rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.form-group { display:flex; flex-direction:column; gap:.35rem; }
.form-group label { font-family:var(--sans); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--warm-gray); }
.form-group input, .form-group select, .form-group textarea { border:1px solid var(--light-tan); padding:.85rem 1rem; font-family:var(--sans); font-size:.95rem; color:var(--black); background:var(--white); outline:none; border-radius:0; -webkit-appearance:none; transition:border-color .2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--black); }
.form-group textarea { resize:vertical; min-height:130px; }

.form-status { display:none; text-align:center; padding:3rem 2rem; }
.form-status.visible { display:block; }
.spinner { width:40px; height:40px; border:2px solid var(--light-tan); border-top-color:var(--black); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 1.5rem; }
@keyframes spin { to { transform:rotate(360deg); } }
.form-confirm { display:none; text-align:center; padding:3rem 2rem; }
.form-confirm.visible { display:block; }
.form-confirm h3 { font-family:var(--serif); font-size:1.8rem; margin-bottom:.8rem; color:var(--black); }
.form-confirm p { font-family:var(--sans); font-size:1rem; color:var(--mid-brown); }
.form-confirm .amp { font-family:Georgia,serif; font-style:italic; font-size:3rem; color:var(--light-tan); display:block; margin-bottom:1rem; }

.footer { padding:2.5rem; border-top:1px solid var(--light-tan); background:var(--cream); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-logo { display:flex; align-items:center; gap:.6rem; }
.footer-logo img { height:32px; width:auto; background:transparent; border:none; box-shadow:none; }
.footer-logo-text { font-family:var(--serif); font-size:1.05rem; letter-spacing:.04em; color:var(--black); }
.footer p { font-family:var(--sans); font-size:.82rem; color:var(--warm-gray); }
.footer-links { display:flex; gap:1.8rem; }
.footer-links a { font-family:var(--sans); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mid-brown); transition:color .2s; }
.footer-links a:hover { color:var(--black); }

@media (max-width:860px) {
  .nav-toggle { display:block; }
  .nav-links { display:none; position:absolute; top:var(--nav-h); left:0; right:0; background:var(--white); border-bottom:1px solid var(--light-tan); flex-direction:column; padding:1.5rem 2.5rem; gap:1.4rem; align-items:flex-start; z-index:99; }
  .nav-links.open { display:flex; }
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-visual { min-height:240px; }
  .hero-inner { padding:3rem 1.5rem; margin:0; max-width:100%; }
  .hero-img-placeholder { min-height:240px; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .local-section { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr; }
  .stat { border-right:none; border-bottom:1px solid var(--light-tan); }
  .stat:last-child { border-bottom:none; }
  .brands-grid { grid-template-columns:repeat(2,1fr); }
  .service-row, .service-row.reverse { grid-template-columns:1fr; gap:2rem; }
  .service-row.reverse .service-text { order:1; }
  .service-row.reverse .service-img  { order:2; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .about-grid, .contact-grid { grid-template-columns:1fr; gap:3rem; }
  .form-row { grid-template-columns:1fr; }
  .strip-cta { flex-direction:column; text-align:center; gap:1.5rem; }
  .footer-inner { flex-direction:column; align-items:flex-start; gap:1.2rem; }
}
@media (max-width:520px) {
  .services-grid, .gallery-grid { grid-template-columns:1fr; }
}