@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root { --ink:#262421; --muted:#77716a; --cream:#f3f0eb; --paper:#fbfaf8; --sand:#d4c7b7; --line:#ded8d0; --dark:#282723; --accent:#a88c6b; --radius:0.65rem; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; font-size:15px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.container { width:min(1160px, calc(100% - 56px)); margin:0 auto; }
.section-padding { padding:126px 0; }
.eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 22px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.eyebrow span { width:34px; height:1px; background:var(--accent); display:block; }
.eyebrow.light { color:rgba(255,255,255,.7); }
.eyebrow.light span { background:#d4bfa3; }
.section-label { display:flex; align-items:center; gap:12px; color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.section-label-line { display:block; width:32px; height:1px; background:currentColor; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:'Playfair Display',serif; font-weight:500; line-height:1.06; letter-spacing:-.045em; }
h1 { color:#fff; font-size:clamp(58px, 8.5vw, 118px); margin:0 0 30px; }
h2 { font-size:clamp(46px, 6vw, 82px); margin:26px 0 0; }
h2 em,h1 em { font-style:italic; color:var(--accent); }
.site-nav { position:fixed; top:0; z-index:10; width:100%; display:flex; align-items:center; justify-content:space-between; padding:23px max(28px, calc((100vw - 1160px)/2)); color:#fff; transition:.25s ease; }
.site-nav-scrolled { background:rgba(251,250,248,.93); color:var(--ink); box-shadow:0 1px 0 rgba(38,36,33,.08); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border:1px solid currentColor; font-family:'Playfair Display',serif; font-size:18px; }
.brand strong,.brand small { display:block; line-height:1.05; }
.brand strong { font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.brand small { font-size:8px; margin-top:5px; letter-spacing:.35em; opacity:.65; }
.nav-links { display:flex; align-items:center; gap:29px; font-size:12px; font-weight:600; }
.nav-links a { position:relative; opacity:.85; }
.nav-links a:not(.nav-call)::after { position:absolute; content:""; left:0; bottom:-7px; width:0; height:1px; background:currentColor; transition:.2s; }
.nav-links a:not(.nav-call):hover::after { width:100%; }
.nav-call { display:flex; align-items:center; gap:8px; border:1px solid currentColor; padding:10px 15px; opacity:1!important; }
.mobile-menu-button { display:none; background:none; border:0; color:inherit; }
.hero { position:relative; min-height:800px; height:100vh; max-height:960px; background-size:cover; background-position:center; color:#fff; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(22,21,19,.76) 0%,rgba(22,21,19,.4) 52%,rgba(22,21,19,.08) 100%), linear-gradient(0deg,rgba(22,21,19,.58),transparent 45%); }
.hero-inner { position:relative; height:100%; display:flex; align-items:center; }
.hero-copy { max-width:620px; padding-top:70px; }
.hero-subtitle { max-width:400px; color:rgba(255,255,255,.82); font-size:17px; line-height:1.55; }
.hero-actions { display:flex; gap:12px; margin-top:38px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:15px; min-height:48px; padding:0 20px; border:1px solid transparent; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:.2s; }
.button:hover { transform:translateY(-2px); }
.button:active { transform:scale(.97); }
.button-light { background:#fff; color:var(--ink); }
.button-outline-light { color:#fff; border-color:rgba(255,255,255,.5); }
.button-dark { background:var(--dark); color:#fff; }
.scroll-cue { position:absolute; right:0; bottom:35px; display:flex; flex-direction:column; align-items:center; gap:9px; color:rgba(255,255,255,.75); font-size:9px; letter-spacing:.18em; text-transform:uppercase; writing-mode:vertical-rl; }
.hero-caption { position:absolute; bottom:36px; left:0; display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.7); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.caption-line { display:block; width:42px; height:1px; background:rgba(255,255,255,.5); }
.intro { background:var(--paper); }
.intro-grid,.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:120px; }
.intro-copy { padding-top:62px; max-width:490px; color:var(--muted); }
.lead,.contact-lead { color:var(--ink); font-family:'Playfair Display',serif; font-size:23px; line-height:1.4; }
.signature { display:flex; flex-direction:column; gap:3px; margin-top:39px; color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.signature-script { color:var(--ink); font-family:'Playfair Display',serif; font-size:27px; font-style:italic; letter-spacing:0; text-transform:none; }
.section-cream { background:var(--cream); }
.section-heading,.gallery-heading { display:flex; justify-content:space-between; align-items:end; gap:60px; margin-bottom:65px; }
.section-heading > p,.gallery-heading > p { max-width:315px; margin-bottom:5px; color:var(--muted); }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.service-card { position:relative; min-height:274px; padding:30px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:.25s; }
.service-card:hover { background:#fff; box-shadow:0 15px 35px rgba(50,40,30,.08); transform:translateY(-3px); }
.service-number,.process-number { color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.15em; }
.service-icon { color:var(--accent); margin:33px 0 21px; }
.service-card h3 { max-width:240px; font-family:'Playfair Display',serif; font-size:21px; font-weight:500; line-height:1.15; }
.service-card p { max-width:250px; color:var(--muted); font-size:13px; }
.service-card a { position:absolute; right:27px; bottom:27px; color:var(--accent); }
.gallery-heading { margin-bottom:56px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; align-items:start; }
.gallery-item { position:relative; min-height:285px; overflow:hidden; margin:0; background:#e6e1da; }
.gallery-item img { width:100%; height:100%; min-height:285px; object-fit:cover; transition:transform .6s cubic-bezier(.23,1,.32,1); }
.gallery-item:hover img { transform:scale(1.045); }
.gallery-wide { grid-column:span 2; }
.gallery-wide img { min-height:380px; }
.gallery-tall { grid-row:span 2; min-height:580px; }
.gallery-tall img { min-height:580px; }
.gallery-accent { min-height:380px; }
.gallery-accent img { min-height:380px; }
.gallery-item::after { position:absolute; content:""; inset:45% 0 0; background:linear-gradient(transparent,rgba(15,14,12,.7)); pointer-events:none; }
.gallery-item figcaption { position:absolute; z-index:1; right:20px; bottom:18px; left:20px; display:flex; justify-content:space-between; align-items:end; color:#fff; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.gallery-item figcaption span { opacity:.7; }
.gallery-item figcaption strong { font-weight:500; }
.section-dark { background:var(--dark); color:#fff; }
.why-grid { display:grid; grid-template-columns:1fr 1fr; gap:120px; }
.section-dark .section-label { color:#c4a783; }
.section-dark h2 { color:#fff; }
.why-intro { max-width:330px; margin-top:39px; color:rgba(255,255,255,.62); font-family:'Playfair Display',serif; font-size:22px; line-height:1.4; }
.why-list { border-top:1px solid rgba(255,255,255,.18); }
.why-item { display:grid; grid-template-columns:44px 1fr 20px; align-items:center; gap:12px; min-height:60px; border-bottom:1px solid rgba(255,255,255,.18); }
.why-item span { color:#c4a783; font-size:10px; }
.why-item strong { font-size:13px; font-weight:500; }
.why-item svg { color:#c4a783; }
.process-heading { margin-bottom:50px; }
.process-stamp { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; }
.process-list { border-top:1px solid var(--line); }
.process-row { display:grid; grid-template-columns:80px 1fr 1.3fr 24px; align-items:center; gap:30px; min-height:105px; border-bottom:1px solid var(--line); transition:.2s; }
.process-row:hover { padding-left:12px; background:var(--cream); }
.process-row h3 { margin:0; font-family:'Playfair Display',serif; font-size:22px; font-weight:500; }
.process-row p { max-width:310px; margin:0; color:var(--muted); font-size:13px; }
.process-row svg { color:var(--accent); }
.map-section { display:grid; grid-template-columns:38% 62%; min-height:470px; background:var(--cream); }
.map-copy { display:flex; flex-direction:column; justify-content:center; padding:75px max(36px, calc((100vw - 1160px)/2)); padding-right:50px; }
.map-copy h2 { font-size:clamp(44px, 5vw, 70px); }
.map-copy p { max-width:320px; color:var(--muted); margin:30px 0; }
.text-link { display:flex; align-items:center; gap:9px; color:var(--ink); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.map-frame { min-height:470px; filter:grayscale(1) sepia(.12); }
.map-frame iframe { width:100%; height:100%; min-height:470px; border:0; }
.contact-grid { gap:90px; }
.contact-lead { max-width:390px; margin:37px 0; }
.contact-details { display:flex; flex-direction:column; gap:13px; color:var(--muted); font-size:13px; }
.contact-details a,.contact-details span { display:flex; align-items:center; gap:12px; }
.contact-details svg { color:var(--accent); }
.form-wrap { padding:35px; background:#fff; border:1px solid var(--line); }
form { display:flex; flex-direction:column; gap:21px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
label { display:flex; flex-direction:column; gap:8px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
input,textarea { width:100%; padding:11px 0; border:0; border-bottom:1px solid var(--line); outline:none; resize:vertical; color:var(--ink); font:14px 'DM Sans',sans-serif; }
input:focus,textarea:focus { border-color:var(--accent); }
input::placeholder,textarea::placeholder { color:#aaa39a; }
.form-wrap .button { margin-top:9px; width:100%; }
.form-success { display:none; min-height:300px; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:var(--muted); }
.form-success svg { color:var(--accent); margin-bottom:17px; }
.form-success h3 { color:var(--ink); font-family:'Playfair Display',serif; font-size:27px; font-weight:500; }
.final-cta { background:#a88c6b; color:#fff; text-align:center; }
.final-cta-inner { display:flex; flex-direction:column; align-items:center; padding:105px 0 116px; }
.final-cta .eyebrow { color:rgba(255,255,255,.72); }
.final-cta h2 { font-size:clamp(53px,7vw,90px); margin:0 0 35px; }
.final-cta h2 em { color:#fff; }
footer { background:var(--dark); color:#fff; padding:70px 0 25px; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:50px; padding-bottom:70px; }
.brand-footer { align-self:start; }
.footer-copy,.footer-contact { color:rgba(255,255,255,.55); font-size:12px; }
.footer-copy p { margin:0 0 16px; }
.footer-contact { display:flex; flex-direction:column; gap:8px; justify-self:end; text-align:right; }
.footer-contact a { color:#fff; }
.footer-bottom { display:flex; align-items:center; gap:25px; padding-top:21px; border-top:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.4); font-size:10px; letter-spacing:.06em; }
.footer-bottom span:first-child { margin-right:auto; }
.footer-bottom a { color:#fff; }
.mobile-call { display:none; }
@media (max-width: 800px) { .container { width:min(100% - 36px, 600px); } .section-padding { padding:82px 0; } .site-nav { padding:18px; } .mobile-menu-button { display:block; } .nav-links { position:absolute; top:68px; right:18px; left:18px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:9px; color:var(--ink); background:var(--paper); box-shadow:0 15px 40px rgba(0,0,0,.12); } .nav-links-open { display:flex; } .nav-links a { padding:12px; } .nav-call { justify-content:center; margin-top:5px; } .hero { min-height:720px; } .hero-copy { padding-top:40px; } .hero-caption,.scroll-cue { display:none; } .intro-grid,.contact-grid,.why-grid { grid-template-columns:1fr; gap:45px; } .intro-copy { padding-top:0; } .section-heading,.gallery-heading { display:block; margin-bottom:42px; } .section-heading > p,.gallery-heading > p { margin-top:25px; } .service-grid { grid-template-columns:1fr 1fr; } .service-card { min-height:250px; padding:23px; } .service-card h3 { font-size:18px; } .gallery-grid { grid-template-columns:1fr 1fr; gap:10px; } .gallery-wide { grid-column:span 2; } .gallery-tall { grid-row:span 1; min-height:300px; } .gallery-tall img { min-height:300px; } .gallery-item,.gallery-item img,.gallery-wide img,.gallery-accent,.gallery-accent img { min-height:210px; } .gallery-wide img { min-height:260px; } .map-section { grid-template-columns:1fr; } .map-copy { padding:75px 18px; } .map-frame,.map-frame iframe { min-height:330px; } .process-row { grid-template-columns:45px 1fr 20px; gap:14px; padding:21px 0; } .process-row p { grid-column:2 / 3; } .process-row svg { grid-row:1; grid-column:3; } .footer-grid { grid-template-columns:1fr; gap:32px; } .footer-contact { justify-self:start; text-align:left; } .footer-bottom { flex-wrap:wrap; gap:10px 20px; } .footer-bottom span:first-child { width:100%; } .mobile-call { position:fixed; z-index:9; right:16px; bottom:16px; display:flex; align-items:center; gap:8px; padding:13px 17px; background:var(--dark); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 10px 25px rgba(0,0,0,.2); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } }
@media (max-width: 470px) { .hero-actions { flex-direction:column; align-items:flex-start; } .service-grid { grid-template-columns:1fr; } .gallery-grid { grid-template-columns:1fr; } .gallery-wide { grid-column:span 1; } .gallery-item,.gallery-item img,.gallery-wide img,.gallery-tall,.gallery-tall img,.gallery-accent,.gallery-accent img { min-height:260px; } .form-wrap { padding:23px 18px; } .form-row { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: no-preference) { .animate-in { animation:rise .75s both; } @keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } } }
