:root { --ink: #26332e; --paper: #f6f0e9; --sage: #9da997; --peach: #e8a088; --blue: #a9b9c7; --line: rgba(38, 51, 46, .15); }
body { font-family: "Montserrat", sans-serif; font-size: 17px; letter-spacing: -.015em; }
.site-header { color: var(--ink); mix-blend-mode: multiply; }
.brand { font-size: 25px; font-weight: 700; letter-spacing: -.08em; text-transform: uppercase; }
.site-nav { gap: 2.6rem; }
.site-nav a { font-size: 13px; font-weight: 600; }
.hero { color: var(--ink); background: var(--paper) url("assets/watercolor-frame.png") center / cover no-repeat; }
.hero:before, .hero:after { display: none; }
.hero-art { background: radial-gradient(ellipse at 47% 63%, rgba(246,240,233,.96) 0 24%, transparent 68%); }
.hero-content { max-width: none; padding-top: 13vh; }
.hero .eyebrow { color: #5f7066; }
.hero h1 { font-size: clamp(54px, 8vw, 124px); font-weight: 600; line-height: .88; max-width: 1280px; text-transform: uppercase; }
.hero h1 em { display: inline-block; font-size: .78em; font-weight: 300; text-transform: none; }
.hero-copy { color: #536158; font-size: 16px; font-weight: 500; }
.button { background: var(--ink); border-color: var(--ink); color: #fff; border-radius: 99px; padding: 16px 20px 16px 23px; box-shadow: 0 12px 24px rgba(38,51,46,.12); }
.button, .eyebrow, .gallery-card span, .steps span, footer { font-size: 11px; }
.button:hover { background: transparent; color: var(--ink); }
.scroll-cue { color: var(--ink); font-weight: 600; }
.paint-title { font-weight: 600; letter-spacing: -.08em; text-transform: uppercase; }
.paint-title em { text-transform: none; font-weight: 300; }
.intro { position: relative; }
.intro:after { content: ""; position: absolute; width: 180px; height: 85px; left: 7%; bottom: 63px; background: url("assets/watercolor-frame.png") left bottom / 800px auto no-repeat; opacity: .72; pointer-events: none; }
.intro-copy { position: relative; z-index: 1; }
.intro-copy p, .section-heading > p, .gallery-card p, .steps p, .before-content > p:last-child, .contact-content > p:not(.eyebrow) { font-size: 15px; }
.image-frame { background: var(--peach); box-shadow: 18px 19px 0 rgba(157,169,151,.48); }
.paintings { background: #eee7de; }
.section-heading { border-bottom: 1px solid var(--line); padding-bottom: 31px; }
.section-heading h2, .intro h2, .before-after h2, .contact h2 { font-size: clamp(42px, 5vw, 77px); }
.gallery { gap: 15px; }
.gallery-card { border-radius: 2px; min-height: 330px; box-shadow: 0 16px 35px rgba(73,69,61,.08); }
.gallery-card.featured { min-height: 675px; }
.gallery-card:before { content: ""; position: absolute; z-index: 1; inset: 9px; border: 1px solid rgba(255,255,255,.33); pointer-events: none; }
.gallery-card div { bottom: 28px; left: 28px; }
.gallery-card h3 { font-size: clamp(25px, 2.4vw, 43px); font-weight: 500; text-transform: uppercase; }
.gallery-card span { font-weight: 600; }
.before-after { background: #768f80 url("assets/watercolor-frame.png") center / cover no-repeat; color: var(--ink); }
.before-after:before { background: radial-gradient(ellipse at 50% 50%, rgba(246,240,233,.79), rgba(246,240,233,.25) 48%, transparent 70%); animation: none; transform: none; inset: 0; }
.before-ghost { color: rgba(38,51,46,.1); font-weight: 600; }
.before-content { z-index: 1; }
.process { background: var(--paper); }
.steps article { transition: transform .4s ease, border-color .4s ease; }
.steps article:hover { transform: translateY(-8px); border-color: var(--peach); }
.steps h3 { font-size: 27px; font-weight: 600; text-transform: uppercase; letter-spacing: -.06em; }
.contact { background: #536d60; }
.contact:before, .contact:after { display: none; }
.contact-art { background: linear-gradient(90deg, rgba(45,74,61,.65), rgba(45,74,61,.08)), url("assets/watercolor-frame.png") center / cover no-repeat; opacity: .88; mix-blend-mode: screen; }
.contact h2 { color: #fff; }
.contact .eyebrow, .contact-content > p:not(.eyebrow) { color: #f6f0e9; }
.button-light { color: var(--ink); background: #f6f0e9; border-color: #f6f0e9; }
.contact-details a { font-size: 14px; }
.contact-details a:first-child { font-family: inherit; font-size: 18px; font-weight: 600; }
.word { display: inline-block; white-space: nowrap; }
.letter { animation-duration: .85s; }
@media (max-width: 820px) { .site-header { mix-blend-mode: normal; } .brand { font-size: 20px; } .site-nav { background: var(--ink); color: #fff; } .site-nav a { font-size: 12px; } .hero h1 { font-size: clamp(52px, 14vw, 80px); } .gallery-card.featured { min-height: 420px; } .intro:after { display: none; } }

/* One clean typographic rhythm across the whole site. */
*, *::before, *::after { letter-spacing: 0 !important; }