:root {
--ivory: #f4f1e8;
--parchment: #eae4d3;
--forest: #1f2d23;
--deep-forest: #162118;
--gold: #a4874b;
--muted-gold: #c1aa74;
--ink: #222015;
--card: #f8f5ec;
--line: #cdbb95;
}

* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: "Manrope", sans-serif;
background: radial-gradient(circle at 10% 10%, #fbf8f2 0%, var(--ivory) 45%, #ece4d3 100%);
color: var(--ink);
line-height: 1.65;
}

header {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 18px 34px;
background: rgba(22, 33, 24, 0.94);
border-bottom: 1px solid rgba(193, 170, 116, 0.45);
backdrop-filter: blur(6px);
}

.brand {
max-width: 100%;
min-width: 0;
}

.brand h1,
.eyebrow,
h2,
h3 {
font-family: "Cormorant Garamond", serif;
}

.brand h1 {
margin: 0;
font-size: clamp(1.2rem, 2vw + 0.35rem, 2rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: 0.025em;
overflow-wrap: anywhere;
color: #f0ead8;
}

.eyebrow {
margin: 0;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--muted-gold);
}

nav {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: flex-end;
}

nav a {
color: #efe8d9;
text-decoration: none;
font-size: 0.9rem;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 8px 10px;
border: 1px solid transparent;
transition: border-color 0.2s ease, color 0.2s ease;
}

nav a:hover {
border-color: rgba(193, 170, 116, 0.65);
color: var(--muted-gold);
}

.hero {
min-height: 76vh;
display: grid;
place-items: center;
padding: 110px 20px 95px;
background-image:
linear-gradient(to right, rgba(16, 23, 17, 0.74), rgba(16, 23, 17, 0.34)),
url("images/photo1.jpg.jpg");
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover, clamp(300px, 68vw, 920px);
position: relative;
}

.hero::after {
content: "";
position: absolute;
inset: 24px;
border: 1px solid rgba(193, 170, 116, 0.44);
pointer-events: none;
}

.hero-inner {
position: relative;
z-index: 1;
max-width: 820px;
text-align: center;
color: #f2ebdc;
padding: 30px 24px;
background: linear-gradient(rgba(20, 29, 21, 0.58), rgba(20, 29, 21, 0.38));
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}

.kicker {
margin: 0;
font-size: 0.86rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--muted-gold);
}

.hero h2 {
margin: 0;
font-size: clamp(2rem, 5vw, 4rem);
font-weight: 600;
line-height: 1.08;
letter-spacing: 0.03em;
}

.hero-logo {
margin: 0;
font-family: "Cormorant Garamond", serif;
font-size: clamp(1.15rem, 2.6vw, 1.85rem);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #efe4c7;
}

.lead {
margin: 0 auto;
max-width: 670px;
font-size: 1.05rem;
color: #e4dcc9;
}

.hero-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}

.btn {
display: inline-block;
padding: 12px 24px;
text-decoration: none;
font-size: 0.85rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: #f4eedf;
border: 1px solid var(--muted-gold);
background: rgba(164, 135, 75, 0.2);
transition: background 0.2s ease, transform 0.2s ease;
}

.btn:hover {
background: rgba(164, 135, 75, 0.4);
transform: translateY(-2px);
}

.call {
background: rgba(24, 38, 27, 0.85);
}

section {
max-width: 1100px;
margin: 0 auto;
padding: 78px 22px;
scroll-margin-top: 20px;
}

h2 {
margin: 0;
font-size: clamp(1.9rem, 4vw, 3rem);
font-weight: 600;
color: var(--forest);
letter-spacing: 0.02em;
text-align: center;
}

.section-line {
width: 96px;
height: 1px;
margin: 14px auto 34px;
background: linear-gradient(to right, transparent, var(--line), transparent);
}

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}

.card {
background: var(--card);
border: 1px solid rgba(166, 145, 101, 0.4);
padding: 24px;
box-shadow: 0 8px 20px rgba(35, 30, 20, 0.07);
}

.card h3 {
margin-top: 0;
margin-bottom: 10px;
font-size: 1.55rem;
font-weight: 600;
color: var(--deep-forest);
}

.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}

.gallery img {
width: 100%;
height: clamp(210px, 28vw, 280px);
object-fit: cover;
border: 8px solid #f0e8d8;
box-shadow: 0 10px 24px rgba(20, 22, 17, 0.14);
filter: contrast(1.03) saturate(0.9);
}

#about p {
max-width: 780px;
margin: 0 auto;
text-align: center;
font-size: 1.05rem;
}

form {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 28px;
background: rgba(248, 245, 236, 0.8);
border: 1px solid rgba(166, 145, 101, 0.45);
box-shadow: 0 8px 24px rgba(30, 27, 20, 0.08);
}

input,
textarea,
select {
font: inherit;
padding: 12px;
border: 1px solid rgba(64, 65, 56, 0.28);
background: #fffcf5;
color: var(--ink);
}

textarea {
min-height: 130px;
resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
outline: 1px solid var(--gold);
border-color: var(--gold);
}

button {
padding: 12px 14px;
font: inherit;
font-size: 0.88rem;
letter-spacing: 0.08em;
text-transform: uppercase;
border: 1px solid var(--forest);
background: var(--forest);
color: #f2ebdb;
cursor: pointer;
transition: background 0.2s ease;
}

button:hover {
background: var(--deep-forest);
}

#formMessage {
margin: 6px 0 0;
padding: 10px;
background: #ebf3e7;
border: 1px solid #96ad87;
color: #2f4a27;
display: none;
}

#formMessage:not(:empty) {
display: block;
}

#formError {
margin: 6px 0 0;
padding: 10px;
background: #f7ebe8;
border: 1px solid #c79b8d;
color: #6f2d1f;
display: none;
}

#formError:not(:empty) {
display: block;
}

[data-fs-error] {
min-height: 0.85rem;
font-size: 0.8rem;
color: #6f2d1f;
}

footer {
text-align: center;
padding: 28px 20px;
background: var(--forest);
color: #e4dbc5;
letter-spacing: 0.06em;
font-size: 0.85rem;
text-transform: uppercase;
}

.footer-phone {
color: #ffffff;
text-decoration: none;
}

.footer-phone:visited,
footer a[href^="tel"] {
color: #ffffff;
}

@media (max-width: 760px) {
header {
flex-direction: column;
gap: 12px;
padding: 16px 18px;
}

.brand {
width: 100%;
text-align: center;
}

.brand h1 {
font-size: clamp(1.15rem, 6.2vw, 1.6rem);
}

nav {
justify-content: center;
gap: 6px;
width: 100%;
}

nav a {
font-size: 0.76rem;
letter-spacing: 0.08em;
padding: 8px 7px;
}

.hero {
min-height: 66vh;
padding-top: 95px;
padding-bottom: 72px;
}

.hero::after {
inset: 14px;
}

.hero-inner {
padding: 22px 16px;
}

.lead {
font-size: 1rem;
}

.hero-actions {
flex-direction: column;
align-items: stretch;
gap: 10px;
}

.btn {
width: 100%;
text-align: center;
}

section {
padding: 58px 16px;
}

.grid,
.gallery {
grid-template-columns: 1fr;
}

.gallery img {
height: 230px;
}

form {
padding: 20px;
}
}

@media (max-width: 420px) {
.brand h1 {
font-size: clamp(1rem, 7.5vw, 1.35rem);
letter-spacing: 0.02em;
}

.eyebrow {
font-size: 0.72rem;
letter-spacing: 0.14em;
}

.hero h2 {
font-size: 2rem;
}

.kicker {
font-size: 0.75rem;
letter-spacing: 0.12em;
}

section {
padding: 52px 12px;
}
}