:root {
--bg: #08070a;
--bg-soft: #0f0d0b;
--bg-card: #131110;
--gold: #f4c542;
--gold-bright: #ffe08a;
--gold-deep: #caa03c;
--cream: #f2e8ce;
--cream-dim: #cbbf9e;
--line: rgba(244, 197, 66, 0.25);
--glow-soft: 0 0 6px rgba(244,197,66,0.55), 0 0 18px rgba(244,197,66,0.35), 0 0 34px rgba(244,197,66,0.18);
--glow-strong: 0 0 8px rgba(255,224,138,0.85), 0 0 24px rgba(244,197,66,0.55), 0 0 60px rgba(244,197,66,0.3);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
background: var(--bg);
color: var(--cream);
font-family: 'Poppins', system-ui, sans-serif;
line-height: 1.7;
overflow-x: hidden;
position: relative;
}
h1, h2, h3, h4 {
font-family: 'Playfair Display', serif;
color: var(--gold-bright);
text-shadow: var(--glow-soft);
letter-spacing: 0.3px;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
.container {
max-width: 1160px;
margin: 0 auto;
padding: 0 24px;
}
.eyebrow {
display: inline-block;
font-size: 0.78rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
text-shadow: var(--glow-soft);
margin-bottom: 14px;
font-weight: 600;
}
.section-head {
text-align: center;
max-width: 680px;
margin: 0 auto 56px;
}
.section-head h2 {
font-size: clamp(1.9rem, 4vw, 2.7rem);
margin-bottom: 14px;
}
.section-head p {
color: var(--cream-dim);
font-size: 1.02rem;
}
section { padding: 100px 0; position: relative; scroll-margin-top: 84px; }
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 2px solid var(--gold-bright);
outline-offset: 3px;
}
#twinkle-field {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.bulb {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 6px 2px rgba(244,197,66,0.7);
animation: twinkle 3.5s ease-in-out infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.25; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.3); }
}
.light-strand {
position: relative;
height: 46px;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 34px;
overflow: hidden;
z-index: 2;
}
.light-strand::before {
content: "";
position: absolute;
top: 6px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-deep) 15%, var(--gold-deep) 85%, transparent);
opacity: 0.6;
}
.light-strand span {
width: 10px;
height: 14px;
border-radius: 50% 50% 45% 45%;
background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 60%, var(--gold-deep) 100%);
box-shadow: 0 0 8px 2px rgba(244,197,66,0.75), 0 0 20px 4px rgba(244,197,66,0.35);
margin-top: 6px;
animation: bulb-pulse 2.6s ease-in-out infinite;
}
.light-strand span:nth-child(odd) { animation-delay: 0.4s; margin-top: 12px; }
.light-strand span:nth-child(3n) { animation-delay: 0.9s; margin-top: 2px; }
@keyframes bulb-pulse {
0%, 100% { opacity: 0.75; }
50% { opacity: 1; }
}
header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(8, 7, 10, 0.85);
border-bottom: 1px solid var(--line);
}
nav {
max-width: 1160px;
margin: 0 auto;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
font-weight: 700;
color: var(--gold-bright);
text-shadow: var(--glow-strong);
letter-spacing: 0.5px;
}
.logo span { color: var(--cream); text-shadow: none; font-weight: 400; font-size: 0.95rem; display: block; letter-spacing: 3px; }
.nav-links {
display: flex;
gap: 34px;
align-items: center;
}
.nav-links a {
font-size: 0.92rem;
font-weight: 500;
color: var(--cream);
position: relative;
padding: 4px 0;
transition: color 0.25s;
}
.nav-links a:hover { color: var(--gold-bright); text-shadow: var(--glow-soft); }
.nav-cta {
border: 1px solid var(--gold);
padding: 9px 20px !important;
border-radius: 30px;
color: var(--gold-bright) !important;
box-shadow: 0 0 12px rgba(244,197,66,0.25);
}
.nav-cta:hover { box-shadow: var(--glow-strong); }
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
background: none;
border: none;
}
.nav-toggle span {
width: 26px;
height: 2px;
background: var(--gold);
box-shadow: var(--glow-soft);
}
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding-top: 110px;
position: relative;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 30%, rgba(244,197,66,0.12), transparent 60%);
pointer-events: none;
}
.hero-inner { max-width: 780px; margin: 0 auto; position: relative; z-index: 2; }
.hero h1 {
font-size: clamp(2.6rem, 7vw, 4.6rem);
font-weight: 800;
text-shadow: var(--glow-strong);
margin-bottom: 18px;
line-height: 1.1;
}
.hero-sub {
font-size: clamp(1.05rem, 2vw, 1.3rem);
color: var(--cream);
font-family: 'Playfair Display', serif;
font-style: italic;
margin-bottom: 22px;
}
.hero p.desc {
color: var(--cream-dim);
max-width: 560px;
margin: 0 auto 38px;
font-size: 1.02rem;
}
.btn-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.btn {
display: inline-block;
padding: 15px 34px;
border-radius: 40px;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
.btn-solid {
background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
color: #1a1305;
box-shadow: var(--glow-strong);
}
.btn-solid:hover { transform: translateY(-2px); box-shadow: 0 0 12px rgba(255,224,138,1), 0 0 40px rgba(244,197,66,0.7), 0 0 90px rgba(244,197,66,0.4); }
.btn-outline {
border: 1px solid var(--gold);
color: var(--gold-bright);
box-shadow: 0 0 10px rgba(244,197,66,0.2);
}
.btn-outline:hover { box-shadow: var(--glow-strong); }
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-media {
aspect-ratio: 4/5;
border-radius: 14px;
border: 1px solid var(--gold);
box-shadow: var(--glow-soft), inset 0 0 30px rgba(244,197,66,0.08);
background: linear-gradient(160deg, var(--bg-card), #1a1611);
display: flex;
align-items: center;
justify-content: center;
color: var(--cream-dim);
text-align: center;
padding: 30px;
font-size: 0.9rem;
}
.about-media .ph-icon { font-size: 2.4rem; margin-bottom: 10px; display: block; text-shadow: var(--glow-soft); }
.about-text h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin-bottom: 18px; }
.about-text p { color: var(--cream-dim); margin-bottom: 16px; }
.about-text p strong { color: var(--gold-bright); font-weight: 600; }
.badge-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 28px;
}
.badge {
border: 1px solid var(--line);
padding: 9px 16px;
border-radius: 30px;
font-size: 0.82rem;
color: var(--gold);
box-shadow: 0 0 8px rgba(244,197,66,0.15);
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 14px;
padding: 34px 28px;
text-align: center;
transition: box-shadow 0.3s, transform 0.3s;
}
.feature-card:hover { box-shadow: var(--glow-soft); transform: translateY(-4px); }
.feature-icon {
font-size: 1.8rem;
margin-bottom: 16px;
text-shadow: var(--glow-strong);
}
.feature-card h3 {
font-size: 1.15rem;
margin-bottom: 10px;
}
.feature-card p { color: var(--cream-dim); font-size: 0.92rem; }
.services-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
}
.service-card {
border: 1px solid var(--line);
border-radius: 16px;
padding: 40px 34px;
background: linear-gradient(160deg, var(--bg-card), rgba(19,17,16,0.4));
position: relative;
overflow: hidden;
}
.service-card h3 {
font-size: 1.5rem;
margin-bottom: 8px;
}
.service-card .tag {
display: inline-block;
color: var(--gold);
font-size: 0.78rem;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 18px;
}
.service-card ul { margin-top: 18px; }
.service-card li {
padding: 9px 0 9px 26px;
position: relative;
color: var(--cream-dim);
border-bottom: 1px solid rgba(244,197,66,0.08);
font-size: 0.95rem;
}
.service-card li:last-child { border-bottom: none; }
.service-card li::before {
content: "✦";
position: absolute;
left: 0;
color: var(--gold);
text-shadow: var(--glow-soft);
}
.service-card-wide { max-width: 900px; margin: 0 auto; }
.service-card ul.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
}
@media (max-width: 640px) {
.service-card ul.two-col { grid-template-columns: 1fr; }
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.portfolio-item {
aspect-ratio: 4/3;
border-radius: 12px;
border: 1.5px dashed var(--gold);
box-shadow: var(--glow-soft);
overflow: hidden;
position: relative;
background: var(--bg-card);
transition: transform 0.3s, box-shadow 0.3s;
}
.portfolio-item:hover { transform: translateY(-5px); box-shadow: var(--glow-strong); }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; }
.ph-inner {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--cream-dim);
text-align: center;
padding: 20px;
}
.ph-inner .ph-icon { font-size: 1.7rem; margin-bottom: 10px; text-shadow: var(--glow-soft); }
.ph-inner .ph-label { font-size: 0.82rem; letter-spacing: 0.5px; }
.portfolio-item .cat-tag {
position: absolute;
top: 12px;
left: 12px;
font-size: 0.68rem;
letter-spacing: 1px;
text-transform: uppercase;
background: rgba(8,7,10,0.7);
border: 1px solid var(--line);
color: var(--gold);
padding: 4px 10px;
border-radius: 20px;
}
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.svc-card {
display: flex; flex-direction: column;
border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
background: var(--bg-card);
transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.svc-card:hover, .svc-card:focus-visible { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--glow-strong); }
.svc-photo { aspect-ratio: 4/3; position: relative; background: var(--bg-soft); }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-body { padding: 24px 26px 28px; }
.svc-body h3 { font-size: 1.35rem; margin-bottom: 6px; }
.svc-body p { color: var(--cream-dim); font-size: 0.93rem; margin-bottom: 14px; }
.svc-link { color: var(--gold-bright); font-weight: 600; font-size: 0.9rem; text-shadow: var(--glow-soft); }
@media (max-width: 700px) { .svc-grid { grid-template-columns: 1fr; } }
.page-hero { padding: 150px 0 60px; text-align: center; }
.page-hero .back-link { display: inline-block; color: var(--cream-dim); font-size: 0.88rem; margin-bottom: 22px; }
.page-hero .back-link:hover { color: var(--gold-bright); }
.page-hero h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin-bottom: 16px; }
.page-hero p { max-width: 720px; margin: 0 auto 30px; color: var(--cream-dim); font-size: 1.02rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .gallery-grid { gap: 12px; } .gallery-grid .ph-label { font-size: 0.72rem; } }
.quote-band { text-align: center; border: 1px solid var(--gold); border-radius: 18px; padding: 50px 26px; box-shadow: var(--glow-soft); background: var(--bg-card); max-width: 820px; margin: 0 auto; }
.quote-band h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 10px; }
.quote-band p { color: var(--cream-dim); margin-bottom: 26px; }
.other-svcs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.other-svcs a { border: 1px solid var(--line); border-radius: 30px; padding: 9px 20px; font-size: 0.86rem; color: var(--cream-dim); }
.other-svcs a:hover { color: var(--gold-bright); border-color: var(--gold); }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step-card {
background: var(--bg-card);
border: 1px solid rgba(244,197,66,0.12);
border-radius: 18px;
padding: 30px 22px 28px;
text-align: center;
}
.step-icon { font-size: 1.9rem; display: block; margin-bottom: 12px; }
.step-num { display: block; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); opacity: 0.8; margin-bottom: 6px; }
.step-card h3 { font-size: 1.12rem; margin-bottom: 6px; }
.step-card p { color: var(--cream-dim); font-size: 0.88rem; }
@media (max-width: 900px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps-grid { gap: 14px; } .step-card { padding: 24px 16px; } }
.reviews-wrap { max-width: 760px; margin: 0 auto; }
.reviews-track { display: flex; flex-direction: column; gap: 18px; }
.review-card {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 14px;
padding: 24px 28px;
animation: reviewIn 0.45s ease;
}
.review-card[hidden] { display: none; }
@keyframes reviewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.review-card .stars { color: var(--gold); text-shadow: var(--glow-soft); margin-bottom: 8px; letter-spacing: 2px; }
.review-card p.quote { color: var(--cream-dim); font-style: italic; margin-bottom: 12px; font-size: 0.95rem; }
.review-card .author { color: var(--gold-bright); font-weight: 600; font-size: 0.9rem; }
.review-card .author span { display: inline; color: var(--cream-dim); font-weight: 400; font-size: 0.8rem; margin-left: 8px; }
.reviews-nav { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 26px; }
.reviews-arrow {
width: 46px; height: 46px; border-radius: 50%;
border: 1px solid var(--gold); background: transparent; color: var(--gold-bright);
font-size: 1.2rem; cursor: pointer; transition: box-shadow 0.25s, opacity 0.25s;
}
.reviews-arrow:hover:not(:disabled) { box-shadow: var(--glow-strong); }
.reviews-arrow:disabled { opacity: 0.3; cursor: default; }
.reviews-count { color: var(--cream-dim); font-size: 0.85rem; min-width: 70px; text-align: center; }
@media (max-width: 600px) { .review-card { padding: 20px 20px; } .review-card .author span { display: block; margin-left: 0; margin-top: 2px; } }
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item {
border: 1px solid var(--line);
border-radius: 12px;
margin-bottom: 14px;
overflow: hidden;
background: var(--bg-card);
}
.faq-question {
width: 100%;
background: none;
border: none;
color: var(--gold-bright);
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
text-align: left;
padding: 20px 24px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.faq-question .plus {
font-size: 1.3rem;
color: var(--gold);
text-shadow: var(--glow-soft);
transition: transform 0.3s ease;
flex-shrink: 0;
}
.faq-item.open .faq-question .plus { transform: rotate(45deg); }
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease, padding 0.35s ease;
padding: 0 24px;
}
.faq-item.open .faq-answer { max-height: 240px; padding: 0 24px 22px; }
.faq-answer p { color: var(--cream-dim); font-size: 0.92rem; }
.lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(4, 3, 2, 0.92);
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: 40px 20px;
}
.lightbox-overlay.open { display: flex; }
.lightbox-box {
max-width: 720px;
width: 100%;
background: var(--bg-card);
border: 1px solid var(--gold);
border-radius: 16px;
box-shadow: var(--glow-strong);
padding: 40px;
text-align: center;
position: relative;
}
.lightbox-box img { border-radius: 10px; margin: 0 auto; }
.lightbox-close {
position: absolute;
top: 14px;
right: 18px;
background: none;
border: none;
color: var(--gold-bright);
font-size: 1.6rem;
cursor: pointer;
text-shadow: var(--glow-soft);
line-height: 1;
}
.sticky-cta {
display: none;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 90;
padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
background: rgba(8,7,10,0.92);
border-top: 1px solid var(--line);
}
.sticky-cta a {
display: block;
text-align: center;
padding: 13px;
border-radius: 30px;
background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
color: #1a1305;
font-weight: 600;
box-shadow: var(--glow-strong);
}
@media (max-width: 640px) {
.sticky-cta { display: block; }
body { padding-bottom: 74px; }
}
.contact-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 60px;
}
.contact-info h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin-bottom: 16px; }
.contact-info p { color: var(--cream-dim); margin-bottom: 30px; }
.contact-item {
display: flex;
gap: 16px;
align-items: flex-start;
margin-bottom: 26px;
}
.contact-item .ic {
font-size: 1.2rem;
text-shadow: var(--glow-strong);
width: 30px;
}
.contact-item h4 { font-family: 'Poppins', sans-serif; color: var(--gold-bright); font-size: 0.95rem; text-shadow: none; margin-bottom: 3px; }
.contact-item p { margin: 0; color: var(--cream-dim); font-size: 0.92rem; }
form.quote-form {
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 40px;
box-shadow: var(--glow-soft);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 20px; }
.field label {
display: block;
font-size: 0.82rem;
color: var(--gold);
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.field input, .field select, .field textarea {
width: 100%;
background: var(--bg-soft);
border: 1px solid var(--line);
border-radius: 8px;
padding: 12px 14px;
color: var(--cream);
font-family: 'Poppins', sans-serif;
font-size: 0.92rem;
outline: none;
transition: box-shadow 0.25s, border-color 0.25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
border-color: var(--gold);
box-shadow: 0 0 10px rgba(244,197,66,0.35);
}
.field textarea { resize: vertical; min-height: 110px; }
.hidden-field { position: absolute; left: -9999px; }
form .btn-solid { width: 100%; border: none; cursor: pointer; font-family: 'Poppins', sans-serif; }
.form-note { font-size: 0.78rem; color: var(--cream-dim); margin-top: 12px; text-align: center; }
footer {
padding: 60px 0 30px;
text-align: center;
border-top: 1px solid var(--line);
background: var(--bg-soft);
}
footer .logo { justify-content: center; display: inline-block; margin-bottom: 16px; }
.footer-links {
display: flex;
justify-content: center;
gap: 28px;
flex-wrap: wrap;
margin: 20px 0 26px;
}
.footer-links a { color: var(--cream-dim); font-size: 0.88rem; }
.footer-links a:hover { color: var(--gold-bright); }
footer .fine-print { color: var(--cream-dim); font-size: 0.78rem; opacity: 0.75; }
@media (max-width: 860px) {
.about-grid, .services-grid, .contact-grid { grid-template-columns: 1fr; }
.features-grid { grid-template-columns: 1fr 1fr; }
.portfolio-grid { grid-template-columns: 1fr 1fr; }
.form-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.nav-toggle { display: flex; }
.features-grid, .portfolio-grid { grid-template-columns: 1fr; }
section { padding: 70px 0; }
}
:root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
header { transition: background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
nav { transition: padding 0.4s var(--ease-out); }
header.scrolled { background: rgba(8, 7, 10, 0.97); box-shadow: 0 8px 30px rgba(0,0,0,0.45); }
header.scrolled nav { padding-top: 11px; padding-bottom: 11px; }
.logo { white-space: nowrap; transition: transform 0.4s var(--ease-out); }
.logo:hover { transform: scale(1.02); }
.nav-links a:not(.nav-cta)::after {
content: ""; position: absolute; left: 50%; right: 50%; bottom: -2px; height: 1.5px;
background: var(--gold); box-shadow: var(--glow-soft);
transition: left 0.35s var(--ease-out), right 0.35s var(--ease-out);
}
.nav-links a:not(.nav-cta):hover::after { left: 0; right: 0; }
.nav-cta { transition: box-shadow 0.3s, background 0.3s, color 0.3s, transform 0.3s var(--ease-out) !important; }
.nav-cta:hover { background: var(--gold); color: #1a1305 !important; transform: translateY(-1px); }
.nav-toggle { position: relative; z-index: 3; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.3s; }
.nav-toggle:active { background: rgba(244,197,66,0.12); }
.nav-toggle span { transition: transform 0.45s var(--ease-out), opacity 0.3s, width 0.45s var(--ease-out); border-radius: 2px; }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.btn { position: relative; overflow: hidden; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background 0.35s; }
.btn:active, .reviews-arrow:active, .nav-cta:active, .nav-call:active, .sticky-cta a:active, .svc-card:active, .seg span:active, .faq-question:active, .other-svcs a:active { transform: scale(0.96) !important; transition-duration: 0.08s !important; }
.btn-solid::before {
content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
transform: translateX(-150%) skewX(-20deg); animation: shine 4.5s var(--ease-in-out) infinite; will-change: transform;
}
@keyframes shine { 0%, 65% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(350%) skewX(-20deg); } }
.btn-outline:hover { transform: translateY(-2px); background: rgba(244,197,66,0.08); }
.hero-inner > *, .page-hero .container > * { animation: riseIn 0.5s var(--ease-out) both; }
.hero-inner > *:nth-child(1), .page-hero .container > *:nth-child(1) { animation-delay: 0s; }
.hero-inner > *:nth-child(2), .page-hero .container > *:nth-child(2) { animation-delay: 0.06s; }
.hero-inner > *:nth-child(3), .page-hero .container > *:nth-child(3) { animation-delay: 0.12s; }
.hero-inner > *:nth-child(4), .page-hero .container > *:nth-child(4) { animation-delay: 0.18s; }
.hero-inner > *:nth-child(5), .page-hero .container > *:nth-child(5) { animation-delay: 0.24s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero h1 { animation: riseIn 0.5s var(--ease-out) 0.06s both; }
@keyframes glowPulse { 0%, 100% { text-shadow: var(--glow-strong); } 50% { text-shadow: 0 0 12px rgba(255,224,138,1), 0 0 34px rgba(244,197,66,0.65), 0 0 80px rgba(244,197,66,0.35); } }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease-out, transform 0.55s ease-out; transition-delay: var(--d, 0s); }
.reveal.in-view { opacity: 1; transform: none; }
.feature-card, .step-card, .review-card, .service-card, .faq-item, .contact-item {
transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), border-color 0.45s, opacity 0.85s var(--ease-out);
}
.feature-card:hover, .step-card:hover, .review-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--glow-soft); }
.reveal.feature-card:hover, .reveal.step-card:hover { transform: translateY(-6px); }
.step-card:hover .step-icon, .feature-card:hover .feature-icon { animation: bob 0.8s var(--ease-out); }
@keyframes bob { 0% { transform: none; } 40% { transform: translateY(-6px) scale(1.12); } 100% { transform: none; } }
.svc-card { transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), border-color 0.5s, opacity 0.85s var(--ease-out); }
.reveal.in-view.svc-card:hover { transform: translateY(-6px); }
.svc-photo { overflow: hidden; }
.svc-photo > * { transition: transform 0.8s var(--ease-out); }
.svc-card:hover .svc-photo > * { transform: scale(1.06); }
.svc-link { display: inline-block; transition: transform 0.35s var(--ease-out), letter-spacing 0.35s; }
.svc-card:hover .svc-link { transform: translateX(6px); }
.portfolio-item img, .portfolio-item .ph-inner { transition: transform 0.7s var(--ease-out); }
.portfolio-item:hover img, .portfolio-item:hover .ph-inner { transform: scale(1.05); }
.other-svcs a, .back-link, .footer-links a { transition: color 0.3s, border-color 0.3s, transform 0.35s var(--ease-out), box-shadow 0.3s; }
.other-svcs a:hover { transform: translateY(-3px); box-shadow: var(--glow-soft); }
.back-link:hover { transform: translateX(-4px); }
.faq-answer { transition: max-height 0.5s var(--ease-out), padding 0.5s var(--ease-out), opacity 0.4s; opacity: 0; }
.faq-item.open .faq-answer { opacity: 1; max-height: var(--h, 400px); }
.faq-item.open { border-color: var(--gold); box-shadow: var(--glow-soft); }
.faq-question .plus { transition: transform 0.45s var(--ease-out); }
.lightbox-overlay { display: flex !important; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease-out), visibility 0s linear 0.4s; }
.lightbox-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease-out), visibility 0s; }
.lightbox-box { transform: scale(0.92) translateY(14px); transition: transform 0.5s var(--ease-out); }
.lightbox-overlay.open .lightbox-box { transform: none; }
.reviews-track.dir-next .review-card { animation: slideFromRight 0.55s var(--ease-out) both; }
.reviews-track.dir-prev .review-card { animation: slideFromLeft 0.55s var(--ease-out) both; }
.reviews-track .review-card:nth-child(3n+2) { animation-delay: 0.07s; }
.reviews-track .review-card:nth-child(3n) { animation-delay: 0.14s; }
@keyframes slideFromRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes slideFromLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.reviews-count { transition: opacity 0.3s; }
input, textarea, select { transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; }
input:focus, textarea:focus, select:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(244,197,66,0.15), var(--glow-soft); outline: none; }
.sticky-cta { animation: slideUp 0.7s var(--ease-out) 0.9s both; }
@keyframes slideUp { from { transform: translateY(110%); } to { transform: none; } }
@media (max-width: 640px) {
header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(8,7,10,0.96); }
nav { padding: 12px 18px; }
.logo { font-size: 1.18rem; line-height: 1.2; position: relative; z-index: 3; }
.logo span { font-size: 0.6rem; letter-spacing: 2.6px; margin-top: 3px; }
.nav-links {
position: fixed; inset: 0; top: 0 !important; z-index: 2;
height: 100vh; height: 100dvh;
background: radial-gradient(ellipse at 50% 20%, rgba(244,197,66,0.10), transparent 60%), #08070a;
border-bottom: none !important;
flex-direction: column; justify-content: center; align-items: center;
gap: 6px !important; padding: 90px 24px 40px !important;
transform: none !important;
clip-path: circle(0% at calc(100% - 40px) 34px);
visibility: hidden;
transition: clip-path 0.65s var(--ease-in-out), visibility 0s linear 0.65s !important;
}
.nav-links.open {
clip-path: circle(150% at calc(100% - 40px) 34px);
visibility: visible;
transition: clip-path 0.75s var(--ease-in-out), visibility 0s !important;
}
.nav-links li { opacity: 0; transform: translateY(22px); transition: opacity 0.4s, transform 0.4s var(--ease-out); }
.nav-links.open li { opacity: 1; transform: none; transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.nav-links.open li:nth-child(1) { transition-delay: 0.25s; }
.nav-links.open li:nth-child(2) { transition-delay: 0.33s; }
.nav-links.open li:nth-child(3) { transition-delay: 0.41s; }
.nav-links.open li:nth-child(4) { transition-delay: 0.52s; }
.nav-links a:not(.nav-cta) {
display: block; padding: 12px 20px;
font-family: 'Playfair Display', serif; font-size: 1.9rem; font-weight: 600;
color: var(--cream); letter-spacing: 0.5px;
}
.nav-links a:not(.nav-cta)::after { bottom: 6px; }
.nav-links .nav-cta { display: inline-block; margin-top: 26px; padding: 14px 40px !important; font-size: 1rem; background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); color: #1a1305 !important; box-shadow: var(--glow-strong); }
body.menu-open { overflow: hidden; }
}
.page-veil {
position: fixed; inset: 0; z-index: 5000; pointer-events: none;
background: radial-gradient(circle at 50% 45%, rgba(244,197,66,0.16), transparent 45%), #08070a;
display: flex; align-items: center; justify-content: center;
animation: veilOut 0.35s ease-out both;
}
.page-veil::before {
content: ""; width: 14px; height: 14px; border-radius: 50%;
background: var(--gold-bright); box-shadow: 0 0 10px 4px rgba(255,224,138,0.9), 0 0 40px 14px rgba(244,197,66,0.5);
animation: veilBulb 0.35s ease-out both;
}
@keyframes veilOut { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes veilBulb { from { transform: scale(1.4); } to { transform: scale(0.2); opacity: 0; } }
@keyframes veilIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes veilBulbIn { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1.4); opacity: 1; } }
#contact.arrive .contact-form, #contact.arrive form { animation: formGlow 1.6s var(--ease-out); border-radius: 16px; }
@keyframes formGlow { 0% { box-shadow: 0 0 0 rgba(244,197,66,0); } 30% { box-shadow: 0 0 0 3px rgba(244,197,66,0.5), 0 0 50px rgba(244,197,66,0.45); } 100% { box-shadow: 0 0 0 rgba(244,197,66,0); } }
#contact.arrive .field, #contact.arrive .form-row, #contact.arrive form .btn { animation: riseIn 0.7s var(--ease-out) both; }
#contact.arrive .form-row { animation-delay: 0.1s; } #contact.arrive .field { animation-delay: 0.2s; } #contact.arrive form .btn { animation-delay: 0.35s; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/playfair-display-700.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('../fonts/playfair-display-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); }
.hero-inner > *:nth-child(6) { animation-delay: 0.3s; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 6000; background: var(--gold); color: #1a1305; padding: 10px 18px; border-radius: 8px; font-weight: 600; transition: top 0.2s; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { display: block; position: relative; z-index: 1; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-call {
display: inline-flex; align-items: center; gap: 8px;
border: 1px solid var(--line); border-radius: 30px; padding: 8px 14px;
color: var(--cream); font-size: 0.86rem; font-weight: 500; white-space: nowrap;
transition: border-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.nav-call:hover { border-color: var(--gold); color: var(--gold-bright); box-shadow: var(--glow-soft); }
.nav-call svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 900px) { .nav-call .nc-num { display: none; } .nav-call { padding: 0; width: 44px; height: 44px; justify-content: center; } }
@media (min-width: 641px) { .nav-right .nav-toggle { display: none; } }
.ico { width: 20px; height: 20px; display: inline-block; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico { width: 18px; height: 18px; margin-right: 8px; margin-top: -2px; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.btn-ghost { border: 1px solid var(--line); color: var(--cream); padding: 13px 26px; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); box-shadow: var(--glow-soft); transform: translateY(-2px); }
.urgency { margin-top: 26px; font-size: 0.86rem; color: var(--cream-dim); display: inline-flex; align-items: center; gap: 8px; }
.urgency .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: twinkle 2s ease-in-out infinite; }
.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); position: relative; z-index: 2; }
.trust-strip ul { max-width: 1160px; margin: 0 auto; padding: 18px 24px; display: flex; justify-content: center; gap: 14px 36px; flex-wrap: wrap; }
.trust-strip li { display: flex; align-items: center; gap: 9px; color: var(--cream); font-size: 0.88rem; }
.trust-strip .ico { color: var(--gold); width: 18px; height: 18px; }
.svc-photo { border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 50% 100%, rgba(244,197,66,0.10), transparent 70%), #0b0a0c; }
.illo { width: 100%; height: 100%; display: block; }
.illo .ln { stroke: var(--gold-deep); stroke-width: 2; fill: none; opacity: 0.75; }
.illo .ln-soft { stroke: rgba(244,197,66,0.35); stroke-width: 1.5; fill: none; }
.illo .wire { stroke: rgba(244,197,66,0.45); stroke-width: 1.2; fill: none; }
.illo .b { fill: #ffe08a; }
.illo g { animation: bulbBlink 3.2s ease-in-out infinite; will-change: opacity; }
.illo .win { fill: rgba(255,224,138,0.10); stroke: rgba(244,197,66,0.35); stroke-width: 1.2; }
@keyframes bulbBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.page-illo { max-width: 560px; margin: 0 auto 34px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--glow-soft); }
.page-illo .svc-photo { border: none; height: 100%; }
.feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--line); color: var(--gold-bright); background: rgba(244,197,66,0.06); font-size: 0; }
.feature-icon .ico, .step-icon .ico { width: 24px; height: 24px; }
.step-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); color: var(--gold-bright); background: rgba(244,197,66,0.06); margin-bottom: 14px; }
.price-box { max-width: 900px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--line); border-radius: 18px; padding: 40px 36px; }
.price-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 30px; margin: 22px 0 26px; }
.price-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--cream-dim); font-size: 0.94rem; }
.price-list li .ico { color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.price-list li strong { color: var(--cream); font-weight: 500; display: block; }
.price-note { color: var(--cream); text-align: center; font-size: 0.98rem; }
@media (max-width: 640px) { .price-list { grid-template-columns: 1fr; } .price-box { padding: 30px 22px; } }
.ask-box { max-width: 820px; margin: 0 auto; text-align: center; border: 1px dashed var(--line); border-radius: 18px; padding: 38px 24px; background: rgba(19,17,16,0.6); }
.ask-box h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin-bottom: 10px; }
.ask-box p { color: var(--cream-dim); margin-bottom: 22px; }
.contact-item .ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); color: var(--gold-bright); flex-shrink: 0; }
.contact-item .ci-label { font-family: 'Poppins', sans-serif; color: var(--gold-bright); font-size: 0.95rem; font-weight: 600; margin-bottom: 2px; }
.contact-item a.ci-val { color: var(--cream); border-bottom: 1px solid var(--line); }
.contact-item a.ci-val:hover { color: var(--gold-bright); border-color: var(--gold); }
.contact-quick { display: flex; gap: 12px; flex-wrap: wrap; margin: 4px 0 30px; }
.field .opt { color: var(--cream-dim); font-size: 0.75rem; letter-spacing: 0; margin-left: 4px; }
.field input[type="date"] { color-scheme: dark; min-height: 46px; }
.seg { display: flex; gap: 10px; flex-wrap: wrap; }
.seg label { margin: 0; flex: 1; min-width: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { -webkit-tap-highlight-color: transparent; display: block; text-align: center; padding: 11px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--cream-dim); font-size: 0.9rem; cursor: pointer; transition: all 0.25s; }
.seg input:checked + span { border-color: var(--gold); color: #1a1305; background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); font-weight: 600; box-shadow: var(--glow-soft); }
.seg input:focus-visible + span { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.consent { font-size: 0.76rem; color: var(--cream-dim); margin: 14px 0 0; text-align: center; }
.consent a { color: var(--gold-bright); border-bottom: 1px solid var(--line); }
.field-error { border-color: #ff8079 !important; box-shadow: 0 0 0 3px rgba(224,72,63,0.25) !important; }
.form-status { display: none; margin-top: 18px; border-radius: 12px; padding: 18px; text-align: center; }
.form-status.show { display: block; animation: riseIn 0.5s var(--ease-out) both; }
.form-status.fail { border: 1px solid #ff8079; background: rgba(224,72,63,0.08); }
.form-status.fail p { color: var(--cream); margin-bottom: 14px; font-size: 0.92rem; }
.form-status .btn { margin: 4px; padding: 12px 22px; }
form .btn-solid[disabled] { opacity: 0.7; cursor: wait; }
.btn-solid .spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(26,19,5,0.3); border-top-color: #1a1305; border-radius: 50%; margin-right: 8px; vertical-align: -3px; animation: spin 0.7s linear infinite; }
form.sending .btn-solid .spin { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.sticky-cta .sc-row { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 8px; }
.sticky-cta a.sc-alt { background: transparent; border: 1px solid var(--gold); color: var(--gold-bright); box-shadow: none; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.88rem; }
.sticky-cta a.sc-alt .ico { width: 16px; height: 16px; }
.footer-tag { color: var(--cream-dim); font-size: 0.88rem; margin-bottom: 6px; }
.footer-contact { display: flex; gap: 10px 24px; justify-content: center; flex-wrap: wrap; margin: 14px 0 6px; }
.footer-contact a { color: var(--gold-bright); font-size: 0.92rem; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.footer-links { gap: 6px 22px; margin: 10px 0 18px; }
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 1.4rem; margin: 34px 0 10px; }
.prose p, .prose li { color: var(--cream-dim); margin-bottom: 12px; }
.prose ul { list-style: disc; padding-left: 22px; }
.prose a { color: var(--gold-bright); border-bottom: 1px solid var(--line); }
.center-page { min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 140px; }
.center-page .big { font-family: 'Playfair Display', serif; font-size: clamp(4rem, 14vw, 7rem); color: var(--gold-bright); text-shadow: var(--glow-strong); line-height: 1; }
@media (max-width: 640px) {
.hide-sm { display: none; }
.hero-inner { padding: 0 20px; }
.hero .btn-row { gap: 10px; }
.hero .btn-row .btn { flex: 1 1 40%; padding: 13px 14px; }
.hero .btn-row .btn-solid { flex-basis: 100%; }
.hero-actions .btn { flex: 1; min-width: 140px; padding: 13px 16px; }
.trust-strip ul { justify-content: flex-start; gap: 10px 22px; }
.trust-strip li { font-size: 0.82rem; width: calc(50% - 12px); }
}
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.bulb { will-change: opacity, transform; }
.btn:not(.reveal), .nav-cta, .nav-call, .sticky-cta a, .svc-card:not(.reveal), .feature-card:not(.reveal),
.step-card:not(.reveal), .review-card, .other-svcs a, .back-link, .reviews-arrow, .seg span,
.faq-question, .footer-links a, .footer-contact a, .contact-item a, .logo {
transition: transform 0.16s ease-out, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
.btn:active, .nav-cta:active, .nav-call:active, .sticky-cta a:active, .svc-card:active, .reviews-arrow:active,
.seg span:active, .other-svcs a:active, .faq-question:active, .footer-contact a:active {
transform: scale(0.97) !important; transition-duration: 0.06s !important;
}
@media (hover: none) {
.btn:hover, .btn-solid:hover, .btn-outline:hover, .btn-ghost:hover, .nav-cta:hover, .logo:hover,
.svc-card:hover, .reveal.in-view.svc-card:hover, .feature-card:hover, .reveal.feature-card:hover,
.step-card:hover, .reveal.step-card:hover, .review-card:hover, .other-svcs a:hover, .back-link:hover,
.portfolio-item:hover { transform: none; }
.svc-card:hover .svc-photo > *, .portfolio-item:hover img, .svc-card:hover .svc-link { transform: none; }
.step-card:hover .step-icon, .feature-card:hover .feature-icon { animation: none; }
}