@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap");
:root {
--limestone: #F8F6F0;
--limestone-2: #F1EEE7;
--charcoal: #1C1E21;
--slate-2: #2A2D32;
--terracotta: #C85A32;
--terracotta-hover: #A84422;
--sage: #707E73;
--stone-border: #E5DFD5;
--text-primary: #1C1E21;
--text-muted: #5B626A;
--gold: #C59B27;
--max: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--limestone);
color: var(--text-primary);
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--terracotta); text-decoration: none; }
::selection { background: var(--terracotta); color: #fff; }
h1, h2, h3, h4, blockquote { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; line-height: 1.1; color: var(--charcoal); margin: 0; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1rem; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
@media (min-width: 768px) { .section { padding: 112px 0; } }
.eyebrow {
font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.25em;
font-weight: 700; color: var(--terracotta); margin-bottom: 16px; display: block;
}
.btn {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 600; font-size: 0.95rem; padding: 14px 28px;
transition: transform .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease;
border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--terracotta); color: #fff; }
.btn-primary:hover { background: var(--terracotta-hover); transform: translateY(-2px); color:#fff; }
.btn-outline { border-color: rgba(248,246,240,.4); color: var(--limestone); }
.btn-outline:hover { border-color: var(--terracotta); color: var(--terracotta); }
.btn-dark { background: var(--charcoal); color: var(--limestone); }
.btn-dark:hover { transform: translateY(-2px); color:#fff; } .site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(248,246,240,.9); backdrop-filter: blur(16px);
border-bottom: 1px solid var(--stone-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--charcoal); color: var(--limestone); font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; }
.brand-name { font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; color: var(--charcoal); display: block; line-height: 1.1; }
.brand-sub { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--text-muted); }
.main-nav { display: none; gap: 34px; }
.main-nav a { color: var(--charcoal); font-weight: 500; font-size: .92rem; position: relative; }
.main-nav a::after { content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background: var(--terracotta); transition: width .3s ease; }
.main-nav a:hover::after, .main-nav a.current-menu-item::after, .main-nav .current-menu-item > a::after { width:100%; }
.header-cta { display: none; align-items: center; gap: 16px; }
.header-cta .phone { color: var(--charcoal); font-weight: 600; font-size: .92rem; }
.menu-toggle { background: none; border: none; color: var(--charcoal); cursor: pointer; padding: 6px; }
.mobile-nav { display: none; border-top: 1px solid var(--stone-border); padding: 12px 24px 20px; }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 14px 0; color: var(--charcoal); font-weight: 500; border-bottom: 1px solid rgba(229,223,213,.6); }
@media (min-width: 900px) {
.main-nav, .header-cta { display: flex; }
.menu-toggle { display: none; }
} .hero { position: relative; background: var(--charcoal); color: var(--limestone); overflow: hidden; }
.hero-bg { position:absolute; inset:0; }
.hero-bg img { width:100%; height:100%; object-fit: cover; opacity: .4; }
.hero-overlay { position:absolute; inset:0; background: linear-gradient(90deg, var(--charcoal), rgba(28,30,33,.85) 45%, rgba(28,30,33,.3)); }
.hero-inner { position: relative; padding: 120px 0; }
@media (min-width:768px){ .hero-inner { padding: 168px 0; } }
.hero h1 { color: var(--limestone); max-width: 720px; }
.hero p { max-width: 520px; color: rgba(248,246,240,.8); font-size: 1.12rem; margin-top: 24px; }
.hero-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px; } .grid { display: grid; gap: 32px; }
.services-layout { grid-template-columns: 1fr; align-items: start; gap: 40px; }
@media (min-width: 992px){ .services-layout { grid-template-columns: 5fr 7fr; gap: 64px; } }
.list-two { display: grid; grid-template-columns: 1fr; gap: 0 32px; }
@media (min-width: 640px){ .list-two { grid-template-columns: 1fr 1fr; } }
.list-item { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--stone-border); transition: border-color .3s ease; }
.list-item:hover { border-color: var(--terracotta); }
.list-check { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--limestone-2); color: var(--terracotta); transition: all .3s ease; }
.list-item:hover .list-check { background: var(--terracotta); color: #fff; }
.list-item span.label { font-weight: 500; color: var(--charcoal); } .story { background: var(--charcoal); color: var(--limestone); }
.story-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px){ .story-grid { grid-template-columns: 1fr 1fr; } }
.story-img { min-height: 320px; position: relative; }
.story-img img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.story-text { padding: 64px 24px; }
@media (min-width: 992px){ .story-text { padding: 96px 64px; } }
.story blockquote { font-size: clamp(1.6rem,3vw,2.4rem); color: var(--limestone); line-height: 1.25; margin: 0; }
.story p { color: rgba(248,246,240,.7); max-width: 460px; margin-top: 24px; } .bg-stone { background: var(--limestone-2); }
.center-head { text-align:center; max-width: 640px; margin: 0 auto 56px; }
.cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px){ .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px){ .cards { grid-template-columns: 1fr 1fr 1fr; } }
.card { background: #fff; border: 1px solid var(--stone-border); padding: 32px; transition: transform .3s ease, box-shadow .3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(28,30,33,.06); }
.card-icon { width: 48px; height: 48px; display:flex; align-items:center; justify-content:center; background: var(--charcoal); color: var(--terracotta); }
.card h3 { margin-top: 24px; }
.card p { color: var(--text-muted); margin: 12px 0 0; }
.card-cta { background: var(--charcoal); color: var(--limestone); display:flex; flex-direction:column; justify-content:space-between; }
.card-cta p { color: var(--limestone); font-family:'Cormorant Garamond',serif; font-size:1.5rem; }
.card-cta a { color: var(--terracotta); font-weight:600; } .spab-band { background: var(--limestone); }
.spab-box { background:#fff; border:1px solid var(--stone-border); padding: 32px; display:flex; flex-direction:column; gap:24px; align-items:center; text-align:center; max-width: 960px; margin: 0 auto; }
@media (min-width: 768px){ .spab-box { flex-direction:row; text-align:left; padding: 56px; } }
.spab-badge { width:96px; height:96px; flex:none; border-radius:50%; background: var(--gold); color: var(--charcoal); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:2.4rem; }
.spab-box p { color: var(--text-muted); margin: 16px 0 0; } .page-hero { background: var(--charcoal); color: var(--limestone); padding: 88px 0; }
.page-hero h1 { color: var(--limestone); max-width: 720px; }
.page-hero p { color: rgba(248,246,240,.75); font-size: 1.12rem; max-width: 520px; margin-top: 24px; } .split { display:grid; grid-template-columns:1fr; gap:48px; align-items:center; }
@media (min-width: 992px){ .split { grid-template-columns:1fr 1fr; gap:64px; } }
.split img { width:100%; height:420px; object-fit:cover; }
.split .muted { color: var(--text-muted); } .filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 48px; }
.filter-btn { font-size:.9rem; font-weight:500; padding:10px 20px; background:#fff; border:1px solid var(--stone-border); color:var(--charcoal); cursor:pointer; transition: all .3s ease; }
.filter-btn:hover { border-color: var(--terracotta); color: var(--terracotta); }
.filter-btn.active { background: var(--terracotta); border-color: var(--terracotta); color:#fff; }
.portfolio-grid { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width: 640px){ .portfolio-grid { grid-template-columns:1fr 1fr; } }
@media (min-width: 992px){ .portfolio-grid { grid-template-columns:1fr 1fr 1fr; } }
.pf-item { position:relative; overflow:hidden; background: var(--charcoal); }
.pf-item img { aspect-ratio: 4/3; object-fit:cover; width:100%; transition: transform .7s ease; }
.pf-item:hover img { transform: scale(1.06); }
.pf-overlay { position:absolute; inset:0; background: linear-gradient(to top, rgba(28,30,33,.85), rgba(28,30,33,.1) 55%, transparent); }
.pf-caption { position:absolute; left:0; right:0; bottom:0; padding:20px; }
.pf-caption .eyebrow { margin-bottom:4px; }
.pf-caption p { color: var(--limestone); font-size:.9rem; margin:0; } .contact-grid { display:grid; grid-template-columns:1fr; gap:48px; }
@media (min-width: 992px){ .contact-grid { grid-template-columns:1fr 1fr; gap:64px; } }
.field { margin-bottom: 20px; }
.field label { display:block; font-size:.9rem; font-weight:500; margin-bottom:8px; color: var(--charcoal); }
.field input, .field textarea { width:100%; background:#fff; border:1px solid var(--stone-border); padding:12px 16px; font-family:inherit; font-size:1rem; color: var(--charcoal); outline:none; transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus { border-color: var(--terracotta); box-shadow:0 0 0 3px rgba(200,90,50,.15); }
.field-row { display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:640px){ .field-row { grid-template-columns:1fr 1fr; } }
.contact-card { background: var(--charcoal); color: var(--limestone); padding:32px; margin-top:32px; }
.contact-card h3 { color: var(--limestone); }
.contact-line { display:flex; gap:16px; align-items:flex-start; margin-top:18px; color: rgba(248,246,240,.8); font-size:.95rem; }
.contact-line a { color: rgba(248,246,240,.8); }
.contact-line a:hover { color: var(--terracotta); }
.contact-line .ico { color: var(--terracotta); flex:none; }
.reasons { background: var(--limestone-2); border:1px solid var(--stone-border); padding:32px; margin-top:24px; }
.reasons li { display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; list-style:none; color: var(--charcoal); }
.reasons ul { padding:0; margin:0; }
.notice { padding:14px 18px; margin-bottom:24px; font-size:.95rem; }
.notice-success { background:#eaf3ec; border:1px solid #cfe3d4; color:#2f6b3d; }
.notice-error { background:#f9ece6; border:1px solid #f0d2c5; color:#a84422; } .site-footer { background: var(--charcoal); color: var(--limestone); }
.footer-grid { display:grid; grid-template-columns:1fr; gap:48px; padding: 72px 0; }
@media (min-width: 768px){ .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-grid h4 { font-family:'Plus Jakarta Sans',sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.25em; color: var(--terracotta); margin-bottom:16px; font-weight:700; }
.footer-name { font-family:'Cormorant Garamond',serif; font-size:1.9rem; }
.site-footer p, .site-footer address, .site-footer li a { color: rgba(248,246,240,.72); font-size:.9rem; font-style:normal; line-height:1.7; }
.site-footer li { list-style:none; }
.site-footer ul { padding:0; margin:0; }
.site-footer li a:hover { color: var(--terracotta); }
.footer-badge { display:inline-flex; align-items:center; gap:12px; border:1px solid rgba(248,246,240,.25); padding:10px 16px; margin-top:24px; }
.footer-badge .b { width:36px; height:36px; border-radius:50%; background: var(--gold); color: var(--charcoal); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; }
.footer-bottom { border-top:1px solid rgba(248,246,240,.15); padding:24px 0; display:flex; flex-direction:column; gap:8px; justify-content:space-between; font-size:.75rem; color: rgba(248,246,240,.5); }
@media (min-width:640px){ .footer-bottom { flex-direction:row; } }
.social { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid rgba(248,246,240,.25); margin-top:20px; color: var(--limestone); }
.social:hover { border-color: var(--terracotta); color: var(--terracotta); }
.reveal { opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; } .pf-section { position: relative; overflow: hidden; background: var(--charcoal); padding: 64px 0; }
@media (min-width: 768px){ .pf-section { padding: 96px 0; } }
.pf-bg { position:absolute; inset:0; }
.pf-bg img { width:100%; height:100%; object-fit:cover; opacity:.12; }
.pf-glow { position:absolute; inset:0; background: radial-gradient(circle at 50% 0%, rgba(200,90,50,.35), transparent 55%); }
.pf-section .filters { position: relative; }
.pf-viewport { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 0 16px; }
.pf-viewport::-webkit-scrollbar { display: none; }
.pf-track { display: flex; gap: 0; }
.pf-slide {
scroll-snap-align: center; flex: 0 0 86%; max-width: 86%; padding: 0 12px;
transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease;
transform: scale(.8); opacity: .4;
}
.pf-slide.is-active { transform: scale(1); opacity: 1; }
@media (min-width: 640px){ .pf-slide { flex-basis: 62%; max-width: 62%; } }
@media (min-width: 992px){ .pf-slide { flex-basis: 46%; max-width: 46%; } }
.pf-frame { background: linear-gradient(135deg, var(--limestone), var(--limestone-2)); padding: 10px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); outline: 1px solid rgba(197,155,39,.5); outline-offset: 4px; }
.pf-inner { position: relative; overflow: hidden; border: 1px solid rgba(28,30,33,.15); aspect-ratio: 4/3; }
.pf-inner img { width:100%; height:100%; object-fit: cover; transition: transform 1.2s ease; }
.pf-frame:hover .pf-inner img { transform: scale(1.08); }
.pf-shade { position:absolute; inset:0; background: linear-gradient(to top, rgba(28,30,33,.9), rgba(28,30,33,.1) 55%, transparent); }
.pf-caption { position:absolute; left:0; right:0; bottom:0; padding: 24px; }
.pf-caption .eyebrow { margin-bottom: 6px; }
.pf-caption p { color: var(--limestone); font-family: 'Cormorant Garamond', serif; font-size: 1.35rem; line-height: 1.25; margin: 0; }
.pf-controls { position: relative; display:flex; align-items:center; justify-content:center; gap: 24px; margin-top: 32px; }
.pf-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(248,246,240,.3); background: transparent; color: var(--limestone); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .3s ease; }
.pf-arrow:hover { background: var(--terracotta); border-color: var(--terracotta); }
#jc-pf-prev svg { transform: rotate(180deg); }
.pf-dots { display:flex; align-items:center; gap: 8px; }
.pf-dot { height: 8px; width: 8px; border-radius: 999px; border: none; background: rgba(248,246,240,.3); cursor:pointer; transition: all .3s ease; padding:0; }
.pf-dot.active { width: 32px; background: var(--terracotta); } .testi-section { position: relative; overflow: hidden; background: var(--charcoal); }
.testi-grid { display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:640px){ .testi-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:992px){ .testi-grid { grid-template-columns:1fr 1fr 1fr; } }
.testi-card { background: rgba(42,45,50,.6); border:1px solid rgba(248,246,240,.1); padding:32px; margin:0; display:flex; flex-direction:column; }
.testi-quote { color: var(--terracotta); display:block; margin-bottom:16px; }
.testi-card blockquote { margin:0; color: rgba(248,246,240,.9); font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; line-height:1.7; flex:1; }
.testi-card figcaption { margin-top:24px; padding-top:20px; border-top:1px solid rgba(248,246,240,.15); }
.testi-name { display:block; font-family:'Cormorant Garamond',serif; font-size:1.35rem; color: var(--limestone); }
.testi-loc { display:block; font-size:.85rem; color: rgba(248,246,240,.6); } .blog-grid { display:grid; grid-template-columns:1fr; gap:32px; }
@media (min-width:640px){ .blog-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:992px){ .blog-grid { grid-template-columns:1fr 1fr 1fr; } }
.blog-card { background:#fff; border:1px solid var(--stone-border); overflow:hidden; display:flex; flex-direction:column; transition: transform .3s ease, box-shadow .3s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow:0 20px 40px rgba(28,30,33,.08); }
.blog-thumb { display:block; aspect-ratio:4/3; overflow:hidden; }
.blog-thumb img { width:100%; height:100%; object-fit:cover; transition: transform .7s ease; }
.blog-card:hover .blog-thumb img { transform: scale(1.05); }
.blog-body { padding:24px; display:flex; flex-direction:column; flex:1; }
.blog-date { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color: var(--text-muted); }
.blog-card h2 { font-size:1.6rem; margin-top:8px; }
.blog-card h2 a { color: var(--charcoal); }
.blog-card h2 a:hover { color: var(--terracotta); }
.blog-card p.excerpt { color: var(--text-muted); margin:12px 0; flex:1; }
.blog-readmore { color: var(--charcoal); font-weight:600; display:inline-flex; align-items:center; gap:6px; width:fit-content; }
.blog-readmore:hover { color: var(--terracotta); }
.single-post { max-width:800px; margin:0 auto; }
.single-post .post-hero-img { width:100%; max-height:520px; object-fit:cover; border:1px solid var(--stone-border); margin-bottom:48px; }
.single-post .post-body { max-width:660px; margin:0 auto; }
.single-post .post-body p { font-size:1.12rem; color: rgba(28,30,33,.9); line-height:1.8; margin-bottom:24px; }
.single-post .post-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:32px; }
@media (min-width:640px){ .single-post .post-gallery { grid-template-columns:repeat(4,1fr); } }
.single-post .post-gallery img { aspect-ratio:1; object-fit:cover; border:1px solid var(--stone-border); }