/* ===== BASE (from original index.html) ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.team {
padding: 20px 0 50px;
background: #fdf6ee;
}
.team-container {
width: 92%;
max-width: 1200px;
margin: auto;
}
.team-heading {
text-align: center;
margin-bottom: 28px;
}
.team-heading .heading-line {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.team-heading .heading-line span {
width: 65px;
height: 1px;
background: #d9a878;
}
.team-heading h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 32px;
font-weight: 700;
color: #8f1517;
text-transform: uppercase;
letter-spacing: 1px;
}
.team-star {
color: #8f1517;
font-size: 13px;
margin-top: 2px;
}
.team-subtitle {
font-size: 13px;
color: #333;
margin-top: 8px;
}
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.team-card {
background: #fffaf4;
border: 1px solid #e8c7a8;
border-radius: 12px;
overflow: hidden;
text-align: center;
transition: all 0.35s ease;
}
.team-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 25px rgba(100, 40, 20, 0.12);
}
.team-image {
width: 100%;
height: 240px;
overflow: hidden;
background: #ead7c5;
}
.team-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.team-card:hover .team-image img {
transform: scale(1.05);
}
.team-content {
padding: 18px 15px 20px;
}
.team-content h3 {
font-family: 'Cormorant Garamond', serif;
color: #8f1517;
font-size: 24px;
margin-bottom: 4px;
}
.team-role {
font-size: 11px;
font-weight: 600;
color: #555;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 10px;
}
.team-content p {
font-size: 12px;
line-height: 1.6;
color: #444;
max-width: 280px;
margin: auto;
}
.team-social {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 13px;
}
.team-social a {
width: 28px;
height: 28px;
border-radius: 50%;
background: #8f1517;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
transition: 0.3s;
}
.team-social a:hover {
background: #6f0f11;
transform: translateY(-2px);
}
.team-button-wrapper {
text-align: center;
margin-top: 28px;
}
.team-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 30px;
background: #8f1517;
color: #fff;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
transition: 0.3s;
}
.team-button:hover {
background: #6f0f11;
transform: translateY(-2px);
}
@media (max-width: 900px) {
.team-grid {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.team-image {
height: 200px;
}
}
@media (max-width: 768px) {
.team {
padding: 10px 0 35px;
}
.team-heading h2 {
font-size: 27px;
}
.team-heading .heading-line span {
width: 40px;
}
.team-subtitle {
font-size: 11px;
padding: 0 20px;
line-height: 1.5;
}
.team-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.team-card {
max-width: 360px;
width: 100%;
margin: auto;
}
.team-image {
height: 270px;
}
.team-content h3 {
font-size: 25px;
}
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: #fdf6ee;
color: #171717;
font-family: 'Montserrat', sans-serif;
overflow-x: hidden;
}
img {
max-width: 100%;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
button {
font-family: inherit;
}
:root {
--red: #8f1517;
--dark-red: #741012;
--cream: #fdf6ee;
--light-cream: #fffaf4;
--gold: #d9a878;
--border: #e8c7a8;
--black: #171717;
}
.container {
width: 92%;
max-width: 1500px;
margin: auto;
}
header {
width: 100%;
height: 92px;
background: rgba(255, 250, 244, 0.98);
display: flex;
align-items: center;
position: relative;
z-index: 1000;
border-bottom: 1px solid #eee0d3;
}
.header-inner {
width: 92%;
max-width: 1500px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
width: 145px;
display: flex;
align-items: center;
transform: translateY(-20px);
}
.logo img {
width: 100%;
height: auto;
display: block;
}
.nav {
display: flex;
align-items: center;
gap: 55px;
}
.nav a {
position: relative;
font-size: 14px;
font-weight: 600;
color: #171717;
padding: 37px 0;
transition: 0.3s;
}
.nav a:hover {
color: var(--red);
}
.nav a.active {
color: var(--red);
}
.nav a.active::after {
content: "";
position: absolute;
bottom: 17px;
left: 0;
width: 100%;
height: 3px;
background: var(--red);
}
.menu-btn {
display: none;
border: none;
background: transparent;
font-size: 27px;
color: var(--red);
cursor: pointer;
}
.hero {
min-height: 485px;
position: relative;
overflow: hidden;
background:
linear-gradient(
90deg,
#fffaf4 0%,
#fff7ef 47%,
rgba(253,246,238,0.7) 100%
);
}
.hero::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background:
radial-gradient(
circle at 4% 70%,
rgba(218,169,123,0.25) 0 2px,
transparent 3px
);
background-size: 18px 18px;
opacity: 0.5;
pointer-events: none;
}
.hero-inner {
width: 92%;
max-width: 1500px;
min-height: 485px;
margin: auto;
display: flex;
align-items: center;
position: relative;
z-index: 2;
}
.hero-content {
width: 54%;
text-align: center;
padding-left: 20px;
z-index: 5;
}
.hero-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(44px, 5vw, 75px);
line-height: 0.95;
font-weight: 600;
letter-spacing: 1px;
}
.hero-title .red {
display: block;
color: var(--red);
margin-top: 12px;
}
.title-decoration {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin: 22px 0 24px;
}
.title-decoration span {
width: 145px;
height: 1px;
background: #c98770;
}
.title-decoration i {
color: var(--red);
font-size: 18px;
}
.hero-text {
max-width: 600px;
margin: auto;
font-size: 17px;
line-height: 1.75;
font-weight: 500;
}
.main-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 265px;
height: 52px;
margin-top: 27px;
padding: 0 30px;
background: var(--red);
color: white;
border-radius: 6px;
border: 1px solid var(--red);
font-size: 15px;
font-weight: 600;
transition: 0.3s;
}
.main-btn:hover {
background: #6f0f11;
transform: translateY(-2px);
}
.hero-image {
width: 55%;
height: 100%;
position: absolute;
right: -4%;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hero-image::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background:
linear-gradient(
90deg,
#fffaf4 0%,
rgba(255,250,244,0) 35%
);
z-index: 2;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
mix-blend-mode: multiply;
}
.section-heading {
text-align: center;
margin-bottom: 30px;
}
.section-heading .heading-line {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.section-heading .heading-line span {
width: 70px;
height: 1px;
background: var(--gold);
}
.section-heading h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 34px;
font-weight: 700;
color: var(--red);
text-transform: uppercase;
letter-spacing: 1px;
}
.section-star {
color: var(--red);
font-size: 13px;
margin-top: 2px;
}
.section-subtitle {
font-size: 14px;
margin-top: 8px;
color: #222;
}
.brands {
padding: 40px 0 48px;
background: #fdf6ee;
}
.brand-slider-wrapper {
position: relative;
width: 100%;
display: flex;
align-items: center;
gap: 15px;
}
.brand-slider {
width: 100%;
overflow: hidden;
border-radius: 20px;
}
.brand-track {
display: flex;
transition: transform 0.7s ease-in-out;
will-change: transform;
}
.brand-slide {
flex: 0 0 33.333333%;
padding: 0 9px;
}
.brand-card {
position: relative;
height: 325px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 20px;
background: #f7e9da;
}
.brand-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.brand-card:hover img {
transform: scale(1.05);
}
.brand-overlay {
position: absolute;
inset: 0;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
background:
linear-gradient(
to top,
rgba(255,246,237,0.97) 0%,
rgba(255,246,237,0.50) 38%,
rgba(255,246,237,0.05) 75%
);
}
.brand-name {
font-family: 'Cormorant Garamond', serif;
font-size: 31px;
color: var(--red);
font-weight: 600;
line-height: 1;
}
.brand-name small {
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 10px;
letter-spacing: 1px;
margin-top: 5px;
font-weight: 600;
}
.brand-tagline {
font-family: 'Cormorant Garamond', serif;
font-size: 18px;
line-height: 1.2;
margin-top: 14px;
color: #171717;
}
.brand-btn {
margin-top: 18px;
padding: 11px 28px;
border-radius: 5px;
background: var(--red);
color: white;
font-size: 12px;
font-weight: 600;
transition: 0.3s;
}
.brand-btn:hover {
background: var(--dark-red);
}
.brand-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background:
radial-gradient(
circle at 20% 20%,
rgba(217,168,120,0.20),
transparent 35%
),
linear-gradient(
135deg,
#fffaf4,
#f3dfcd
);
}
.placeholder-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 32px;
font-weight: 700;
color: var(--red);
letter-spacing: 1px;
}
.brand-placeholder p {
margin-top: 18px;
font-family: 'Cormorant Garamond', serif;
font-size: 19px;
line-height: 1.25;
}
.brand-arrow {
position: absolute;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid #d5a783;
background: #fffaf4;
color: var(--red);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 20;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
transition: 0.3s;
}
.brand-arrow:hover {
background: var(--red);
color: white;
}
.brand-prev {
left: -20px;
}
.brand-next {
right: -20px;
}
.brand-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 22px;
}
.brand-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #dfc5ae;
cursor: pointer;
transition: 0.3s;
}
.brand-dot.active {
width: 25px;
border-radius: 10px;
background: var(--red);
}
.about {
padding: 20px 0 45px;
}
.about-grid {
display: grid;
grid-template-columns: 32% 1fr;
align-items: center;
gap: 35px;
max-width: 1200px;
margin: auto;
}
.about-image {
height: 230px;
border-radius: 18px;
overflow: hidden;
}
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-content {
padding-right: 30px;
}
.about-content .section-heading {
margin-bottom: 12px;
}
.about-content .section-heading .heading-line {
justify-content: flex-start;
}
.about-content .section-heading h2 {
font-size: 29px;
}
.about-content p {
font-size: 15px;
line-height: 1.7;
margin-bottom: 18px;
max-width: 650px;
}
.about-btn {
display: inline-block;
background: var(--red);
color: #fff;
padding: 12px 27px;
border-radius: 5px;
font-size: 12px;
font-weight: 600;
}
.cta {
width: 96%;
max-width: 1500px;
margin: 0 auto;
min-height: 90px;
background:
linear-gradient(
90deg,
#851113,
#941517
);
border-radius: 14px 14px 0 0;
color: white;
display: flex;
align-items: center;
padding: 15px 60px;
}
.cta-icon {
width: 60px;
height: 60px;
border: 1px solid rgba(255,255,255,0.7);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
flex-shrink: 0;
}
.cta-title {
font-family: 'Cormorant Garamond', serif;
font-size: 23px;
line-height: 1.05;
margin-left: 35px;
width: 35%;
}
.cta-divider {
width: 1px;
height: 45px;
background: rgba(255,255,255,0.6);
}
.cta-text {
margin-left: 40px;
font-size: 14px;
line-height: 1.6;
width: 28%;
}
.cta-button {
margin-left: auto;
min-width: 170px;
height: 45px;
border: 1px solid white;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
transition: 0.3s;
}
.cta-button:hover {
background: white;
color: var(--red);
}
footer {
min-height: 75px;
background: #fffaf4;
display: flex;
align-items: center;
padding: 12px 3%;
}
.footer-inner {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-logo {
width: 95px;
}
.copyright {
font-size: 12px;
color: #333;
}
.social {
display: flex;
align-items: center;
gap: 12px;
}
.follow {
font-size: 12px;
font-weight: 600;
margin-right: 5px;
}
.social a {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--red);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: 0.3s;
}
.social a:hover {
transform: translateY(-3px);
background: #5f0c0e;
}
@media (max-width: 1000px) {
.nav {
gap: 28px;
}
.hero-content {
width: 57%;
}
.logo {
width: 115px;
transform: translateY(-5px);
}
.hero-title {
font-size: 48px;
}
.hero-text {
font-size: 14px;
}
.brand-slide {
flex: 0 0 50%;
}
.brand-card {
height: 300px;
}
.cta {
padding: 15px 30px;
}
.cta-title {
font-size: 19px;
margin-left: 20px;
}
.cta-text {
margin-left: 20px;
}
}
@media (max-width: 768px) {
header {
height: 75px;
}
.header-inner {
width: 90%;
}
.menu-btn {
display: block;
}
.nav {
position: absolute;
top: 75px;
left: 0;
width: 100%;
background: #fffaf4;
display: none;
flex-direction: column;
align-items: center;
gap: 0;
padding: 10px 0 20px;
border-top: 1px solid #ead7c7;
box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.nav.show {
display: flex;
}
.nav a {
width: 100%;
text-align: center;
padding: 15px;
}
.nav a.active::after {
display: none;
}
.hero {
min-height: auto;
padding: 35px 0 0;
}
.hero-inner {
width: 92%;
min-height: auto;
display: flex;
flex-direction: column;
}
.hero-content {
width: 100%;
padding: 0;
order: 1;
}
.hero-title {
font-size: 43px;
line-height: 0.98;
}
.title-decoration {
margin: 17px 0;
gap: 10px;
}
.title-decoration span {
width: 55px;
}
.hero-text {
font-size: 13px;
line-height: 1.7;
max-width: 350px;
}
.main-btn {
height: 46px;
min-width: 210px;
margin-top: 20px;
font-size: 12px;
}
.hero-image {
position: relative;
width: 100%;
height: 300px;
right: auto;
top: auto;
order: 2;
margin-top: 10px;
}
.hero-image::before {
background:
linear-gradient(
180deg,
#fffaf4 0%,
rgba(255,250,244,0) 35%
);
}
.section-heading {
margin-bottom: 25px;
}
.section-heading h2 {
font-size: 28px;
}
.section-heading .heading-line span {
width: 40px;
}
.section-subtitle {
font-size: 11px;
padding: 0 20px;
line-height: 1.5;
}
.brands {
padding: 35px 0;
}
.brand-slide {
flex: 0 0 100%;
padding: 0 3px;
}
.brand-card {
height: 350px;
border-radius: 17px;
}
.brand-overlay {
padding: 25px;
}
.brand-name {
font-size: 29px;
}
.brand-tagline {
font-size: 18px;
}
.brand-arrow {
width: 35px;
height: 35px;
font-size: 12px;
}
.brand-prev {
left: -8px;
}
.brand-next {
right: -8px;
}
.about {
padding: 10px 0 35px;
}
.about-grid {
width: 90%;
grid-template-columns: 1fr;
gap: 20px;
}
.about-image {
height: 230px;
order: 1;
}
.about-content {
padding: 0;
order: 2;
}
.about-content .section-heading .heading-line {
justify-content: center;
}
.about-content .section-heading h2 {
font-size: 27px;
}
.about-content p {
text-align: center;
font-size: 13px;
line-height: 1.7;
}
.about-btn-wrapper {
text-align: center;
}
.cta {
width: 92%;
border-radius: 12px;
padding: 25px 20px;
display: flex;
flex-direction: column;
text-align: center;
gap: 13px;
}
.cta-icon {
width: 52px;
height: 52px;
font-size: 21px;
}
.cta-title {
width: 100%;
margin: 0;
font-size: 21px;
}
.cta-divider {
width: 60px;
height: 1px;
}
.cta-text {
width: 100%;
margin: 0;
font-size: 12px;
}
.cta-button {
margin: 5px 0 0;
width: 180px;
}
footer {
padding: 25px 0;
}
.footer-inner {
flex-direction: column;
gap: 18px;
text-align: center;
}
.copyright {
order: 2;
font-size: 10px;
}
.social {
order: 3;
flex-wrap: wrap;
justify-content: center;
}
.follow {
width: 100%;
margin: 0 0 5px;
}
}
@media (max-width: 400px) {
.hero-title {
font-size: 36px;
}
.hero-image {
height: 250px;
}
.section-heading h2 {
font-size: 25px;
}
.brand-card {
height: 300px;
}
.cta-title {
font-size: 19px;
}
}
/* ===== page-about overrides (from original about.html) ===== */
body.page-about { background: #fdf6ee; color: #171717; font-family: 'Montserrat', sans-serif; overflow-x: hidden; }
.page-about header { width: 100%; height: 92px; background: rgba(255, 250, 244, 0.98); border-bottom: 1px solid #eee0d3; display: flex; align-items: center; position: relative; z-index: 1000; }
.page-about .logo img { width: 100%; height: auto; }
.page-about .menu-btn { display: none; border: none; background: transparent; color: var(--red); font-size: 27px; cursor: pointer; }
.page-about .about-hero { min-height: 0; height: 320px; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient( circle at 10% 50%, rgba(217,168,120,0.16), transparent 30% ), radial-gradient( circle at 90% 30%, rgba(143,21,23,0.06), transparent 30% ), #fdf6ee; border-bottom: 1px solid #ead8c6; }
.page-about .about-hero-content { width: 90%; max-width: 900px; transform: translateY(-25px); }
.page-about .about-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(48px, 6vw, 72px); color: var(--red); line-height: 1; text-transform: uppercase; transform: none; }
.page-about .hero-decoration { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 18px 0; }
.page-about .hero-decoration span { width: 90px; height: 1px; background: var(--gold); }
.page-about .hero-decoration i { color: var(--red); font-size: 13px; }
.page-about .about-hero p { font-size: 14px; line-height: 1.7; color: #444; }
.page-about .section { padding: 70px 0; }
.page-about .container { width: 92%; max-width: 1200px; margin: auto; }
.page-about .section-heading { text-align: center; margin-bottom: 45px; }
.page-about .heading-line { display: flex; align-items: center; justify-content: center; gap: 15px; }
.page-about .heading-line span { width: 65px; height: 1px; background: var(--gold); }
.page-about .section-heading h2 { font-family: 'Cormorant Garamond', serif; color: var(--red); font-size: 35px; text-transform: uppercase; letter-spacing: 1px; }
.page-about .section-star { color: var(--red); font-size: 12px; margin-top: 8px; }
.page-about .about-main { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; align-items: center; }
.page-about .about-image { width: 100%; height: 430px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #ead7c5; }
.page-about .about-content h2 { font-family: 'Cormorant Garamond', serif; font-size: 42px; color: var(--red); margin-bottom: 18px; }
.page-about .about-content h3 { font-size: 16px; color: #222; margin-bottom: 15px; }
.page-about .about-content p { font-size: 13px; line-height: 1.9; color: #444; margin-bottom: 15px; }
.page-about .vision-section { background: #f8eee3; border-top: 1px solid #ecd9c5; border-bottom: 1px solid #ecd9c5; }
.page-about .vision-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
.page-about .vision-card { background: transparent; padding: 25px 35px; text-align: center; }
.page-about .vision-icon { width: 65px; height: 65px; margin: 0 auto 18px; border-radius: 50%; border: 1px solid var(--gold); color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 25px; }
.page-about .vision-card h3 { font-family: 'Cormorant Garamond', serif; color: var(--red); font-size: 30px; margin-bottom: 12px; }
.page-about .vision-card p { font-size: 13px; line-height: 1.8; color: #444; }
.page-about .what-we-do-section { background: #fdf6ee; }
.page-about .what-we-do-section .section-heading p { font-size: 13px; color: #555; margin-top: 10px; }
.page-about .pinterest-grid { columns: 2 350px; column-gap: 70px; max-width: 1000px; margin: 0 auto; }
.page-about .pinterest-item { break-inside: avoid; position: relative; padding: 35px 10px 35px 65px; margin-bottom: 35px; border-bottom: 1px solid var(--gold); }
.page-about .pinterest-item::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--gold); }
.page-about .pin-icon { position: absolute; left: -18px; top: 30px; width: 36px; height: 36px; background: #fdf6ee; border: 1px solid var(--red); border-radius: 50%; color: var(--red); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.page-about .pinterest-item h3 { font-family: 'Cormorant Garamond', serif; color: var(--red); font-size: 30px; margin-bottom: 8px; font-weight: 600; }
.page-about .pinterest-item p { font-size: 12px; line-height: 1.8; color: #555; max-width: 350px; margin-bottom: 15px; }
.page-about .pin-link { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--red); transition: 0.3s; }
.page-about .pin-link i { font-size: 9px; transition: 0.3s; }
.page-about .pin-link:hover { color: var(--dark-red); }
.page-about .pin-link:hover i { transform: translateX(5px); }
.page-about .cta { width: 96%; max-width: 1500px; margin: 0 auto; min-height: 95px; background: linear-gradient( 90deg, #851113, #941517 ); border-radius: 14px 14px 0 0; color: white; display: flex; align-items: center; padding: 15px 60px; }
.page-about .cta-icon { width: 60px; height: 60px; border: 1px solid rgba(255,255,255,0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 25px; flex-shrink: 0; }
.page-about footer { min-height: 75px; background: var(--light-cream); display: flex; align-items: center; padding: 12px 3%; }
@media (max-width: 1050px) {
.page-about .nav { gap: 30px; }
.page-about .cta { padding: 15px 30px; }
.page-about .cta-title { font-size: 19px; margin-left: 20px; }
.page-about .cta-text { margin-left: 20px; }
}
@media (max-width: 768px) {
.page-about header { height: 75px; }
.page-about .header-inner { width: 90%; }
.page-about .logo { width: 115px; transform: translateY(-5px); }
.page-about .menu-btn { display: block; }
.page-about .nav { position: absolute; top: 75px; left: 0; width: 100%; background: var(--light-cream); display: none; flex-direction: column; align-items: center; gap: 0; padding: 10px 0 20px; border-top: 1px solid #ead7c7; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.page-about .nav.show { display: flex; }
.page-about .nav a { width: 100%; text-align: center; padding: 15px; }
.page-about .nav a.active::after { display: none; }
.page-about .about-hero { min-height: 230px; display: flex; align-items: center; justify-content: center; text-align: center; padding-bottom: 60px; background: #fdf6ee; border-bottom: 1px solid #ead8c6; }
.page-about .about-hero h1 { font-size: 43px; }
.page-about .hero-decoration span { width: 50px; }
.page-about .about-hero p { font-size: 12px; line-height: 1.6; }
.page-about .section { padding: 45px 0; }
.page-about .section-heading { margin-bottom: 30px; }
.page-about .section-heading h2 { font-size: 29px; }
.page-about .heading-line span { width: 40px; }
.page-about .about-main { grid-template-columns: 1fr; gap: 25px; }
.page-about .about-image { height: 300px; }
.page-about .about-content h2 { font-size: 35px; }
.page-about .about-content p { font-size: 12px; line-height: 1.8; }
.page-about .vision-grid { grid-template-columns: 1fr; gap: 10px; }
.page-about .vision-card { padding: 25px 10px; }
.page-about .pinterest-grid { columns: 1; column-gap: 0; }
.page-about .pinterest-item { padding: 30px 10px 30px 55px; margin-bottom: 25px; }
.page-about .pinterest-item h3 { font-size: 28px; }
.page-about .pinterest-item p { font-size: 12px; max-width: 100%; }
.page-about .cta { width: 92%; border-radius: 12px; padding: 25px 20px; display: flex; flex-direction: column; text-align: center; gap: 13px; }
.page-about .cta-icon { width: 52px; height: 52px; font-size: 21px; }
.page-about .cta-title { width: 100%; margin: 0; font-size: 21px; }
.page-about .cta-divider { width: 60px; height: 1px; }
.page-about .cta-text { width: 100%; margin: 0; font-size: 12px; }
.page-about .cta-button { margin: 5px 0 0; width: 180px; }
.page-about footer { padding: 25px 0; }
.page-about .footer-inner { flex-direction: column; gap: 18px; text-align: center; }
.page-about .copyright { order: 2; font-size: 10px; }
.page-about .social { order: 3; flex-wrap: wrap; justify-content: center; }
.page-about .follow { width: 100%; margin: 0 0 5px; }
}
/* ===== page-team overrides (from original team.html) ===== */
body.page-team { background: #fdf6ee; color: #171717; font-family: 'Montserrat', sans-serif; overflow-x: hidden; }
.page-team header { width: 100%; height: 92px; background: rgba(255, 250, 244, 0.98); border-bottom: 1px solid #eee0d3; display: flex; align-items: center; position: relative; z-index: 1000; }
.page-team .logo img { width: 100%; height: auto; }
.page-team .menu-btn { display: none; border: none; background: transparent; color: var(--red); font-size: 27px; cursor: pointer; }
.page-team .team-hero { min-height: 290px; display: flex; align-items: center; justify-content: center; text-align: center; background: radial-gradient( circle at 10% 50%, rgba(217,168,120,0.16), transparent 30% ), radial-gradient( circle at 90% 30%, rgba(143,21,23,0.06), transparent 30% ), #fdf6ee; border-bottom: 1px solid #ead8c6; }
.page-team .team-hero-content { width: 90%; max-width: 900px; }
.page-team .team-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(48px, 6vw, 72px); color: var(--red); line-height: 1; text-transform: uppercase; }
.page-team .hero-decoration { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 18px 0; }
.page-team .hero-decoration span { width: 90px; height: 1px; background: var(--gold); }
.page-team .hero-decoration i { color: var(--red); font-size: 13px; }
.page-team .team-hero p { font-size: 14px; line-height: 1.7; color: #444; }
.page-team .team-section { padding: 55px 0 70px; }
.page-team .team-container { width: 92%; max-width: 1250px; margin: auto; }
.page-team .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.page-team .team-card { background: var(--light-cream); border: 1px solid var(--border); border-radius: 15px; overflow: hidden; text-align: center; transition: all 0.35s ease; }
.page-team .team-card:hover { transform: translateY(-7px); box-shadow: 0 15px 30px rgba(90, 40, 20, 0.12); }
.page-team .team-image { width: 100%; height: 300px; overflow: hidden; background: #ead7c5; }
.page-team .team-content { padding: 20px 18px 23px; }
.page-team .team-content h2 { font-family: 'Cormorant Garamond', serif; color: var(--red); font-size: 28px; margin-bottom: 5px; }
.page-team .team-role { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: #555; margin-bottom: 12px; }
.page-team .team-content p { font-size: 12px; line-height: 1.65; color: #444; min-height: 40px; }
.page-team .team-social { display: flex; justify-content: center; gap: 9px; margin-top: 15px; }
.page-team .team-social a { width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; transition: 0.3s; }
.page-team .team-social a:hover { background: var(--dark-red); transform: translateY(-3px); }
.page-team .cta { width: 96%; max-width: 1500px; margin: 0 auto; min-height: 95px; background: linear-gradient( 90deg, #851113, #941517 ); border-radius: 14px 14px 0 0; color: white; display: flex; align-items: center; padding: 15px 60px; }
.page-team .cta-icon { width: 60px; height: 60px; border: 1px solid rgba(255,255,255,0.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 25px; flex-shrink: 0; }
.page-team footer { min-height: 75px; background: var(--light-cream); display: flex; align-items: center; padding: 12px 3%; }
@media (max-width: 1050px) {
.page-team .nav { gap: 30px; }
.page-team .team-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.page-team .team-image { height: 260px; }
.page-team .cta { padding: 15px 30px; }
.page-team .cta-title { font-size: 19px; margin-left: 20px; }
.page-team .cta-text { margin-left: 20px; }
}
@media (max-width: 768px) {
.page-team header { height: 75px; }
.page-team .header-inner { width: 90%; }
.page-team .logo { width: 115px; transform: translateY(-5px); }
.page-team .menu-btn { display: block; }
.page-team .nav { position: absolute; top: 75px; left: 0; width: 100%; background: var(--light-cream); display: none; flex-direction: column; align-items: center; gap: 0; padding: 10px 0 20px; border-top: 1px solid #ead7c7; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.page-team .nav.show { display: flex; }
.page-team .nav a { width: 100%; text-align: center; padding: 15px; }
.page-team .nav a.active::after { display: none; }
.page-team .team-hero { min-height: 230px; }
.page-team .team-hero h1 { font-size: 43px; }
.page-team .hero-decoration span { width: 50px; }
.page-team .team-hero p { font-size: 12px; line-height: 1.6; }
.page-team .team-section { padding: 35px 0 45px; }
.page-team .team-grid { grid-template-columns: 1fr; gap: 20px; }
.page-team .team-card { max-width: 380px; width: 100%; margin: auto; }
.page-team .team-image { height: 300px; }
.page-team .cta { width: 92%; border-radius: 12px; padding: 25px 20px; display: flex; flex-direction: column; text-align: center; gap: 13px; }
.page-team .cta-icon { width: 52px; height: 52px; font-size: 21px; }
.page-team .cta-title { width: 100%; margin: 0; font-size: 21px; }
.page-team .cta-divider { width: 60px; height: 1px; }
.page-team .cta-text { width: 100%; margin: 0; font-size: 12px; }
.page-team .cta-button { margin: 5px 0 0; width: 180px; }
.page-team footer { padding: 25px 0; }
.page-team .footer-inner { flex-direction: column; gap: 18px; text-align: center; }
.page-team .copyright { order: 2; font-size: 10px; }
.page-team .social { order: 3; flex-wrap: wrap; justify-content: center; }
.page-team .follow { width: 100%; margin: 0 0 5px; }
}
/* ===== page-contact overrides (from original contact.html) ===== */
body.page-contact { background: #fdf6ee; color: #171717; font-family: 'Montserrat', sans-serif; }
.page-contact header { width: 100%; height: 92px; background: rgba(255, 250, 244, 0.98); border-bottom: 1px solid #eee0d3; display: flex; align-items: center; position: relative; z-index: 1000; }
.page-contact .logo img { width: 100%; height: auto; }
.page-contact .menu-btn { display: none; border: none; background: transparent; color: var(--red); font-size: 27px; cursor: pointer; }
.page-contact .contact-hero { min-height: 230px; display: flex; align-items: center; justify-content: center; text-align: center; padding-bottom: 35px; background: radial-gradient( circle at 10% 50%, rgba(217,168,120,0.16), transparent 30% ), radial-gradient( circle at 90% 30%, rgba(143,21,23,0.06), transparent 30% ), #fdf6ee; border-bottom: 1px solid #ead8c6; }
.page-contact .contact-hero-content { width: 90%; max-width: 900px; }
.page-contact .contact-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(48px, 6vw, 72px); color: var(--red); line-height: 1; text-transform: uppercase; }
.page-contact .hero-decoration { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 18px 0; }
.page-contact .hero-decoration span { width: 90px; height: 1px; background: var(--gold); }
.page-contact .hero-decoration i { color: var(--red); font-size: 13px; }
.page-contact .contact-hero p { font-size: 13px; color: #555; line-height: 1.7; }
.page-contact .contact-section { padding: 65px 0 80px; }
.page-contact .contact-container { width: 92%; max-width: 850px; margin: auto; }
.page-contact .contact-form { background: transparent; width: 100%; }
.page-contact .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin-bottom: 25px; }
.page-contact .form-group { display: flex; flex-direction: column; }
.page-contact .form-group.full { margin-bottom: 25px; }
.page-contact .form-group label { font-size: 11px; font-weight: 600; color: #333; margin-bottom: 9px; letter-spacing: 0.5px; text-transform: uppercase; }
.page-contact .form-group label span { color: var(--red); }
.page-contact .form-group input, .page-contact .form-group select, .page-contact .form-group textarea { width: 100%; border: none; border-bottom: 1px solid #cda984; background: transparent; padding: 12px 5px; font-family: 'Montserrat', sans-serif; font-size: 13px; color: #222; outline: none; transition: 0.3s; }
.page-contact .form-group input:focus, .page-contact .form-group select:focus, .page-contact .form-group textarea:focus { border-bottom-color: var(--red); }
.page-contact .form-group textarea { min-height: 110px; resize: vertical; }
.page-contact .form-group select { cursor: pointer; }
.page-contact .submit-area { text-align: center; margin-top: 35px; }
.page-contact .submit-btn { min-width: 190px; height: 48px; border: 1px solid var(--red); background: var(--red); color: white; border-radius: 5px; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; cursor: pointer; transition: 0.3s; }
.page-contact .submit-btn:hover { background: transparent; color: var(--red); }
.page-contact footer { min-height: 75px; background: var(--light-cream); display: flex; align-items: center; padding: 12px 3%; }
.page-contact .footer-logo img { width: 100%; }
.page-contact .social a:hover { transform: translateY(-3px); background: var(--dark-red); }
@media (max-width: 1050px) {
.page-contact .nav { gap: 30px; }
}
@media (max-width: 768px) {
.page-contact header { height: 75px; }
.page-contact .header-inner { width: 90%; }
.page-contact .logo { width: 115px; transform: translateY(-5px); }
.page-contact .menu-btn { display: block; }
.page-contact .nav { position: absolute; top: 75px; left: 0; width: 100%; background: var(--light-cream); display: none; flex-direction: column; align-items: center; gap: 0; padding: 10px 0 20px; border-top: 1px solid #ead7c7; box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.page-contact .nav.show { display: flex; }
.page-contact .nav a { width: 100%; text-align: center; padding: 15px; }
.page-contact .nav a.active::after { display: none; }
.page-contact .contact-hero { min-height: 210px; padding-bottom: 30px; }
.page-contact .contact-hero h1 { font-size: 43px; }
.page-contact .hero-decoration span { width: 50px; }
.page-contact .contact-hero p { font-size: 11px; }
.page-contact .contact-section { padding: 45px 0 55px; }
.page-contact .contact-container { width: 88%; }
.page-contact .form-row { grid-template-columns: 1fr; gap: 22px; margin-bottom: 22px; }
.page-contact .form-group.full { margin-bottom: 22px; }
.page-contact .form-group input, .page-contact .form-group select, .page-contact .form-group textarea { font-size: 12px; padding: 11px 4px; }
.page-contact .form-group textarea { min-height: 100px; }
.page-contact footer { padding: 25px 0; }
.page-contact .footer-inner { flex-direction: column; gap: 18px; text-align: center; }
.page-contact .copyright { order: 2; font-size: 10px; }
.page-contact .social { order: 3; flex-wrap: wrap; justify-content: center; }
.page-contact .follow { width: 100%; margin: 0 0 5px; }
}
/* ===== contact form feedback (added) ===== */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-alert { padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }
.form-alert-success { background: #e9f7ec; color: #1f6b34; border: 1px solid #bfe3c8; }
.form-alert-error { background: #fdecec; color: #8f1517; border: 1px solid #f2c2c2; }