/* ============================================================
   TRUOPNI MEISTRAI — Professional Redesign
   Palette: Deep Navy + Warm Gold + Cream
   Fonts: DM Serif Display + Inter
   ============================================================ */

/* ===== VARIABLES ===== */
:root {
    --dark:        #0c1120;
    --dark-2:      #131929;
    --dark-3:      #1c2540;
    --gold:        #c49a3c;
    --gold-lt:     #d9b468;
    --gold-glow:   rgba(196,154,60,.18);
    --cream:       #f5f1e9;
    --cream-2:     #ede8de;
    --text:        #1a1e2d;
    --text-mid:    #505a6e;
    --text-muted:  #8896a9;
    --white:       #ffffff;
    --border-d:    rgba(255,255,255,.07);
    --border-l:    rgba(0,0,0,.09);
    --wa:          #25D366;

    --f-disp:  'DM Serif Display', Georgia, serif;
    --f-sans:  'Inter', system-ui, -apple-system, sans-serif;

    --gap:     clamp(5rem, 8vw, 8rem);
    --cmax:    1280px;
    --cpx:     clamp(1.25rem, 4vw, 2.5rem);

    --r:   4px;
    --r2:  8px;
    --tr:  all 0.28s ease;
    --tr-f: all 0.18s ease;

    --sh-gold: 0 8px 28px rgba(196,154,60,.28);
    --sh-lg:   0 20px 60px rgba(0,0,0,.14);
    --sh-md:   0 8px 24px rgba(0,0,0,.1);
}

/* ===== RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--f-sans); font-size:16px; line-height:1.65; color:var(--text); background:var(--white); overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; transition:var(--tr-f); }
ul, ol { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input, textarea, select { font-family:inherit; }

/* ===== LAYOUT ===== */
.container {
    width:100%;
    max-width:var(--cmax);
    margin:0 auto;
    padding:0 var(--cpx);
}

.section        { padding:var(--gap) 0; background:var(--white); }
.section--dark  { padding:var(--gap) 0; background:var(--dark); }
.section--cream { padding:var(--gap) 0; background:var(--cream); }

/* ===== SECTION HEADERS ===== */
.section-label {
    display:inline-flex;
    align-items:center;
    gap:.625rem;
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:1.125rem;
}
.section-label::before {
    content:'';
    display:block;
    width:24px;
    height:2px;
    background:var(--gold);
    flex-shrink:0;
}
.section-label--gold { color:var(--gold); }
.section-label--gold::before { background:var(--gold); }

.section-head { text-align:center; max-width:680px; margin:0 auto 4rem; }
.section-head--light { color:var(--white); }

.section-title {
    font-family:var(--f-disp);
    font-size:clamp(2rem, 3.8vw, 3.25rem);
    font-weight:400;
    line-height:1.12;
    letter-spacing:-.02em;
    color:var(--text);
    margin-bottom:1.125rem;
}
.section-title em { font-style:italic; color:inherit; }
.section-title--light { color:var(--white); }

.section-sub { font-size:1.0625rem; color:var(--text-mid); line-height:1.7; }
.section-sub--light { color:rgba(255,255,255,.65); }

/* ===== BUTTONS ===== */
.btn {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.875rem 1.875rem;
    font-size:.9375rem;
    font-weight:600;
    letter-spacing:.01em;
    border:2px solid transparent;
    border-radius:var(--r);
    cursor:pointer;
    transition:var(--tr);
    white-space:nowrap;
}
.btn--lg { padding:1.0625rem 2.25rem; font-size:1rem; }
.btn--full { width:100%; justify-content:center; }

.btn--gold {
    background:var(--gold);
    color:var(--dark);
    border-color:var(--gold);
    box-shadow:var(--sh-gold);
}
.btn--gold:hover { background:var(--gold-lt); border-color:var(--gold-lt); transform:translateY(-2px); box-shadow:0 12px 36px rgba(196,154,60,.38); }

.btn--outline {
    background:transparent;
    color:var(--white);
    border-color:rgba(255,255,255,.35);
}
.btn--outline:hover { border-color:var(--white); background:rgba(255,255,255,.08); }

.btn--ghost {
    background:transparent;
    color:rgba(255,255,255,.75);
    border-color:transparent;
    padding-left:.5rem;
    padding-right:.5rem;
}
.btn--ghost:hover { color:var(--white); }

.btn--outline-gold {
    background:transparent;
    color:var(--gold-lt);
    border-color:rgba(196,154,60,.45);
}
.btn--outline-gold:hover { border-color:var(--gold); color:var(--gold); background:rgba(196,154,60,.08); }

.btn--wa {
    background:var(--wa);
    color:var(--white);
    border-color:var(--wa);
    box-shadow:0 8px 24px rgba(37,211,102,.3);
}
.btn--wa:hover { background:#1ebe5c; border-color:#1ebe5c; transform:translateY(-2px); }

/* ===== NAVIGATION ===== */
.nav {
    position:fixed;
    top:0; left:0; right:0;
    z-index:1000;
    background:rgba(12,17,32,.92);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border-d);
    transition:var(--tr);
}
.nav.scrolled { background:rgba(12,17,32,.98); border-bottom-color:rgba(196,154,60,.15); }

.nav__inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
    padding-top:.875rem;
    padding-bottom:.875rem;
}

.nav__logo {
    display:flex;
    align-items:center;
    gap:.625rem;
    flex-shrink:0;
}
.nav__logo-icon { width:36px; height:36px; }
.nav__logo-text {
    font-family:var(--f-sans);
    font-size:1.1875rem;
    font-weight:700;
    color:var(--white);
    letter-spacing:-.01em;
}
.nav__logo-text span { color:inherit; }

.nav__menu {
    display:flex;
    align-items:center;
    gap:.25rem;
}
.nav__link {
    padding:.5rem .875rem;
    font-size:.875rem;
    font-weight:500;
    color:rgba(255,255,255,.7);
    border-radius:var(--r);
    letter-spacing:.01em;
}
.nav__link:hover, .nav__link.active { color:var(--white); }

.nav__cta {
    padding:.5625rem 1.25rem;
    font-size:.875rem;
    font-weight:600;
    background:var(--gold);
    color:var(--dark);
    border-radius:var(--r);
    letter-spacing:.01em;
    transition:var(--tr-f);
}
.nav__cta:hover { background:var(--gold-lt); }

.nav__phone {
    display:flex;
    align-items:center;
    gap:.4rem;
    font-size:.875rem;
    font-weight:600;
    color:rgba(255,255,255,.8);
    flex-shrink:0;
}
.nav__phone:hover { color:var(--gold-lt); }

.nav__toggle {
    display:none;
    flex-direction:column;
    gap:5px;
    padding:.5rem;
    flex-shrink:0;
}
.nav__toggle span {
    display:block;
    width:22px;
    height:2px;
    background:var(--white);
    border-radius:2px;
    transition:var(--tr);
}
.nav__toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__toggle.open span:nth-child(2) { opacity:0; }
.nav__toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ===== HERO ===== */
.hero {
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding-top:5rem;
}

.hero__bg {
    position:absolute;
    inset:0;
    z-index:0;
}
.hero__bg img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 30%;
}
.hero__overlay {
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(12,17,32,.95) 0%,
        rgba(12,17,32,.78) 55%,
        rgba(12,17,32,.88) 100%
    );
}

.hero__body {
    position:relative;
    z-index:1;
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-top:clamp(3rem, 8vh, 6rem);
    padding-bottom:clamp(2rem, 5vh, 4rem);
}

.hero__tag {
    display:flex;
    align-items:center;
    gap:.75rem;
    font-size:.8125rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--gold-lt);
    margin-bottom:2rem;
}
.hero__dash {
    display:block;
    width:32px;
    height:2px;
    background:var(--gold);
    flex-shrink:0;
}

.hero__title {
    font-family:var(--f-disp);
    font-size:clamp(3rem, 7vw, 6rem);
    font-weight:400;
    line-height:1.06;
    letter-spacing:-.03em;
    color:var(--white);
    margin-bottom:1.75rem;
    max-width:820px;
}
.hero__accent { color:inherit; }

.hero__sub {
    font-size:clamp(1rem, 1.5vw, 1.1875rem);
    color:rgba(255,255,255,.7);
    line-height:1.65;
    max-width:560px;
    margin-bottom:2.75rem;
}

.hero__actions {
    display:flex;
    flex-wrap:wrap;
    gap:.875rem;
    align-items:center;
}

/* Hero stats bar */
.hero__stats-bar {
    position:relative;
    z-index:1;
    background:rgba(196,154,60,.12);
    border-top:1px solid rgba(196,154,60,.2);
    padding:2rem 0;
    backdrop-filter:blur(10px);
}

.hero__stats {
    display:flex;
    align-items:center;
    gap:0;
}
.hero__stat {
    flex:1;
    min-width:0;
    text-align:center;
}
.hero__stat strong, .hero__stat span:not(p) {
    font-family:var(--f-disp);
    font-size:clamp(2rem,3.5vw,2.875rem);
    font-weight:400;
    color:var(--gold-lt);
    line-height:1;
}
.hero__stat-num { display:inline; }
.hero__stat span:not(p) { display:inline; }
.hero__stat p {
    font-size:.8125rem;
    font-weight:500;
    color:rgba(255,255,255,.55);
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-top:.375rem;
}
.hero__stat-div {
    width:1px;
    height:36px;
    background:rgba(196,154,60,.25);
    flex-shrink:0;
}

/* ===== SERVICES ===== */
.services { background:var(--white); }

.services__grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--border-l);
    border:1px solid var(--border-l);
    border-radius:var(--r2);
    overflow:hidden;
}

.svc {
    display:flex;
    flex-direction:column;
    gap:.75rem;
    padding:2.25rem 2rem;
    background:var(--white);
    transition:var(--tr);
    position:relative;
    overflow:hidden;
    cursor:pointer;
}
.svc::after {
    content:'';
    position:absolute;
    bottom:0; left:0; right:0;
    height:2px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s ease;
}
.svc:hover { background:var(--cream); }
.svc:hover::after { transform:scaleX(1); }

.svc--highlight {
    background:var(--dark);
}
.svc--highlight:hover { background:var(--dark-3); }
.svc.svc--highlight .svc__num { color:rgba(255,255,255,.55); }
.svc.svc--highlight h3 { color:var(--white); }
.svc.svc--highlight p { color:rgba(255,255,255,.7); }
.svc.svc--highlight .svc__icon { color:var(--gold-lt); }
.svc.svc--highlight .svc__arrow { color:var(--gold-lt); }
.svc--highlight::after { background:var(--gold); }

.svc__num {
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--text-muted);
}
.svc__icon {
    width:44px;
    height:44px;
    color:var(--gold);
    margin-bottom:.25rem;
}
.svc__icon svg { width:100%; height:100%; }

.svc h3 {
    font-size:1.125rem;
    font-weight:700;
    color:var(--text);
    line-height:1.25;
}
.svc p {
    font-size:.9375rem;
    color:var(--text-mid);
    line-height:1.65;
    flex:1;
}
.svc__arrow {
    font-size:.875rem;
    font-weight:600;
    color:var(--gold);
    margin-top:.25rem;
    display:inline-block;
    transition:transform .2s ease;
}
.svc:hover .svc__arrow { transform:translateX(4px); }

/* ===== PROJECTS ===== */
.projects { background:var(--dark); }

.proj-soon {
    max-width:900px;
    margin:0 auto;
    padding:clamp(2rem, 5vw, 3.5rem);
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    border:1px solid var(--border-d);
    border-radius:var(--r2);
    text-align:center;
}

.proj-soon__frames {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1rem;
    margin-bottom:2.5rem;
}

.proj-frame {
    position:relative;
    overflow:hidden;
    aspect-ratio:4 / 3;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--r);
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 10px, transparent 10px 20px),
        var(--dark-2);
    color:rgba(196,154,60,.55);
}
.proj-frame svg { width:34px; height:34px; }
.proj-frame::after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
    background-size:220% 100%;
    animation:projShimmer 3.2s ease-in-out infinite;
}
.proj-frame:nth-child(2)::after { animation-delay:.5s; }
.proj-frame:nth-child(3)::after { animation-delay:1s; }
@keyframes projShimmer {
    0%   { background-position:140% 0; }
    100% { background-position:-40% 0; }
}

.proj-soon__badge {
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.4rem .875rem;
    border:1px solid rgba(196,154,60,.35);
    border-radius:50px;
    background:var(--gold-glow);
    color:var(--gold-lt);
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    margin-bottom:1.25rem;
}
.proj-soon__dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--gold);
    animation:projPulse 2s ease-in-out infinite;
}
@keyframes projPulse {
    0%, 100% { opacity:1;  transform:scale(1); }
    50%      { opacity:.35; transform:scale(.8); }
}

.proj-soon__title {
    font-family:var(--f-disp);
    font-size:clamp(1.5rem, 2.8vw, 2.125rem);
    font-weight:400;
    line-height:1.2;
    color:var(--white);
    margin-bottom:.875rem;
}

.proj-soon__text {
    max-width:560px;
    margin:0 auto 2rem;
    font-size:1rem;
    line-height:1.7;
    color:rgba(255,255,255,.62);
}

.proj-soon__actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.875rem;
}

/* ===== ABOUT ===== */
.about { background:var(--cream); }

.about__grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6rem;
    align-items:center;
}

.about__media {
    position:relative;
    height:580px;
}
.about__img-main {
    position:absolute;
    top:0; left:0;
    width:78%;
    height:72%;
    border-radius:var(--r2);
    overflow:hidden;
    box-shadow:var(--sh-lg);
}
.about__img-main img { width:100%; height:100%; object-fit:cover; }

.about__img-accent {
    position:absolute;
    bottom:0; right:0;
    width:56%;
    height:52%;
    border-radius:var(--r2);
    overflow:hidden;
    box-shadow:var(--sh-lg);
    border:6px solid var(--cream);
}
.about__img-accent img { width:100%; height:100%; object-fit:cover; }

.about__badge {
    position:absolute;
    top:50%;
    left:-2rem;
    transform:translateY(-50%);
    background:var(--gold);
    color:var(--dark);
    padding:1.625rem 1.375rem;
    border-radius:var(--r2);
    box-shadow:var(--sh-gold);
    text-align:center;
    z-index:2;
    min-width:120px;
}
.about__badge strong {
    display:block;
    font-family:var(--f-disp);
    font-size:2.75rem;
    font-weight:400;
    line-height:1;
    margin-bottom:.25rem;
}
.about__badge span {
    font-size:.8125rem;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    line-height:1.4;
}

.about__lead {
    font-size:1.125rem;
    line-height:1.7;
    color:var(--text);
    margin-bottom:1rem;
    font-weight:400;
}
.about__text {
    font-size:1rem;
    color:var(--text-mid);
    line-height:1.75;
    margin-bottom:2.5rem;
}

.about__pillars {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
}
.about__pillar {
    display:flex;
    gap:.875rem;
    align-items:flex-start;
}
.about__pillar-icon {
    width:40px;
    height:40px;
    border-radius:var(--r);
    background:var(--gold-glow);
    border:1px solid rgba(196,154,60,.25);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--gold);
    flex-shrink:0;
}
.about__pillar h4 {
    font-size:.9375rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:.25rem;
}
.about__pillar p {
    font-size:.875rem;
    color:var(--text-mid);
    line-height:1.55;
}

/* ===== PROCESS ===== */
.process__steps {
    display:flex;
    align-items:flex-start;
    gap:0;
}
.process__step {
    flex:1 1 0;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:0 1.25rem;
}
.process__step-num {
    font-family:var(--f-disp);
    font-size:3rem;
    font-weight:400;
    color:var(--gold);
    line-height:1;
    margin-bottom:1.25rem;
    opacity:.9;
}
.process__step h3 {
    font-size:1.0625rem;
    font-weight:700;
    color:var(--white);
    margin-bottom:.625rem;
}
.process__step p {
    font-size:.9375rem;
    color:rgba(255,255,255,.55);
    line-height:1.65;
}
.process__connector {
    width:80px;
    height:1px;
    background:rgba(196,154,60,.25);
    flex-shrink:0;
    margin-top:1.5rem;
}

/* ===== REVIEWS ===== */
.reviews { background:var(--white); }

.reviews__grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}

.review {
    padding:2.25rem;
    background:var(--cream);
    border-radius:var(--r2);
    border:1px solid var(--border-l);
    transition:var(--tr);
    display:flex;
    flex-direction:column;
    gap:1.25rem;
}
.review:hover { box-shadow:var(--sh-md); transform:translateY(-3px); }

.review__stars {
    color:var(--gold);
    font-size:1rem;
    letter-spacing:.1em;
}

.review blockquote {
    font-size:.9375rem;
    color:var(--text-mid);
    line-height:1.75;
    font-style:italic;
    flex:1;
    position:relative;
}
.review blockquote::before {
    content:'\201C';
    font-family:var(--f-disp);
    font-size:4rem;
    color:var(--gold);
    opacity:.25;
    position:absolute;
    top:-1rem;
    left:0;
    line-height:1;
}

.review__author {
    display:flex;
    align-items:center;
    gap:.875rem;
    padding-top:1.25rem;
    border-top:1px solid var(--border-l);
}
.review__avatar {
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--dark);
    color:var(--gold-lt);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.8125rem;
    font-weight:700;
    letter-spacing:.04em;
    flex-shrink:0;
}
.review__author strong {
    display:block;
    font-size:.9375rem;
    color:var(--text);
    font-weight:700;
    margin-bottom:.125rem;
}
.review__author span {
    font-size:.8125rem;
    color:var(--text-muted);
}

/* ===== FAQ ===== */
.faq__inner {
    display:grid;
    grid-template-columns:340px 1fr;
    gap:6rem;
    align-items:start;
}

.faq__head { position:sticky; top:6rem; }
.faq__sub {
    margin-top:1.5rem;
    font-size:.9375rem;
    color:var(--text-mid);
}
.faq__sub a { color:var(--gold); font-weight:600; }
.faq__sub a:hover { text-decoration:underline; }

.faq__list {
    display:flex;
    flex-direction:column;
    gap:.5rem;
}

.faq-item {
    border:1px solid var(--border-l);
    border-radius:var(--r);
    background:var(--white);
    overflow:hidden;
    transition:var(--tr);
}
.faq-item.open {
    border-color:var(--gold);
    box-shadow:0 4px 20px rgba(196,154,60,.1);
}

.faq-q {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    width:100%;
    padding:1.25rem 1.5rem;
    text-align:left;
    font-size:1rem;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
    transition:var(--tr-f);
    background:none;
    border:none;
}
.faq-q:hover { color:var(--gold); }
.faq-item.open .faq-q { color:var(--gold); }

.faq-ico {
    flex-shrink:0;
    width:24px;
    height:24px;
    border:1.5px solid currentColor;
    border-radius:50%;
    position:relative;
    opacity:.6;
    transition:var(--tr-f);
}
.faq-ico::before,
.faq-ico::after {
    content:'';
    position:absolute;
    background:currentColor;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
}
.faq-ico::before { width:10px; height:1.5px; }
.faq-ico::after  { width:1.5px; height:10px; transition:var(--tr-f); }
.faq-item.open .faq-ico::after { transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item.open .faq-ico { opacity:1; border-color:var(--gold); }

.faq-a {
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
}
.faq-a p {
    padding:0 1.5rem 1.375rem;
    font-size:.9375rem;
    color:var(--text-mid);
    line-height:1.75;
}
.faq-item.open .faq-a { max-height:400px; }

/* ===== CTA ===== */
.cta { background:var(--dark-2); border-top:1px solid var(--border-d); border-bottom:1px solid var(--border-d); }

.cta__inner {
    display:grid;
    grid-template-columns:1fr auto;
    gap:4rem;
    align-items:center;
}
.cta__actions {
    display:flex;
    flex-direction:column;
    gap:.75rem;
    min-width:220px;
}

/* ===== CONTACT ===== */
.contact { background:var(--cream); }

.contact__methods {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:1rem;
    max-width:920px;
    margin:0 auto;
}

.cmethod {
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1.125rem 1.25rem;
    background:var(--white);
    border:1px solid var(--border-l);
    border-radius:var(--r);
    transition:var(--tr);
}
.cmethod:hover { border-color:var(--gold); transform:translateY(-3px); box-shadow:var(--sh-md); }
.cmethod__icon {
    width:48px;
    height:48px;
    border-radius:var(--r);
    background:var(--gold-glow);
    color:var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:var(--tr-f);
}
.cmethod__icon--wa { background:rgba(37,211,102,.12); color:var(--wa); }
.cmethod:hover .cmethod__icon { background:var(--gold); color:var(--dark); }
.cmethod:hover .cmethod__icon--wa { background:var(--wa); color:var(--white); }
.cmethod > div { min-width:0; }
.cmethod strong { display:block; font-size:.875rem; font-weight:700; color:var(--text); margin-bottom:.125rem; text-transform:uppercase; letter-spacing:.04em; font-size:.75rem; }
.cmethod span { display:block; font-size:1rem; font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.cmethod em { display:block; font-size:.8125rem; color:var(--text-muted); font-style:normal; margin-top:.125rem; }

/* ===== FOOTER ===== */
.footer {
    background:var(--dark);
    padding:5rem 0 2rem;
    color:rgba(255,255,255,.6);
}

.footer__top {
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:5rem;
    padding-bottom:3.5rem;
    border-bottom:1px solid var(--border-d);
    margin-bottom:2rem;
}

.footer__logo { margin-bottom:1.25rem; }
.footer__brand p {
    font-size:.9375rem;
    color:rgba(255,255,255,.5);
    line-height:1.65;
    max-width:280px;
    margin-bottom:1.75rem;
}

.footer__social {
    display:flex;
    gap:.625rem;
}
.footer__social a {
    width:38px;
    height:38px;
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.6);
    border-radius:var(--r);
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--border-d);
    transition:var(--tr-f);
}
.footer__social a:hover { background:var(--gold); color:var(--dark); border-color:var(--gold); }

.footer__nav {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2rem;
}
.footer__nav > div h4 {
    font-size:.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--white);
    margin-bottom:1.25rem;
}
.footer__nav > div a,
.footer__nav > div span {
    display:block;
    font-size:.9rem;
    color:rgba(255,255,255,.5);
    margin-bottom:.625rem;
    transition:var(--tr-f);
}
.footer__nav > div a:hover { color:var(--gold-lt); }
.footer__hours { line-height:1.6; }

.footer__bottom {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
    font-size:.8125rem;
    color:rgba(255,255,255,.3);
}

.footer__credit a {
    color:rgba(255,255,255,.55);
    font-weight:600;
    border-bottom:1px solid rgba(196,154,60,.35);
    padding-bottom:1px;
    transition:var(--tr-f);
}
.footer__credit a:hover { color:var(--gold-lt); border-bottom-color:var(--gold); }

/* ===== FLOATING BUTTONS ===== */
.floats {
    position:fixed;
    bottom:1.5rem;
    right:1.5rem;
    display:flex;
    flex-direction:column;
    gap:.625rem;
    z-index:999;
}

.float {
    display:flex;
    align-items:center;
    gap:.5rem;
    padding:.75rem 1.125rem;
    border-radius:50px;
    font-size:.875rem;
    font-weight:600;
    color:var(--white);
    box-shadow:0 4px 20px rgba(0,0,0,.25);
    transition:var(--tr);
    opacity:0;
    transform:translateY(10px) scale(.95);
    animation:floatIn .5s forwards;
}
.float:nth-child(1) { animation-delay:.3s; }
.float:nth-child(2) { animation-delay:.45s; }

@keyframes floatIn { to { opacity:1; transform:translateY(0) scale(1); } }

.float--phone { background:var(--dark-3); border:1px solid rgba(255,255,255,.12); }
.float--phone:hover { background:var(--gold); color:var(--dark); transform:translateY(-2px); }

.float--wa { background:var(--wa); }
.float--wa:hover { background:#1ebe5c; transform:translateY(-2px); }

.float span { white-space:nowrap; }

/* ===== ANIMATIONS ===== */
[data-reveal] {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .7s ease, transform .7s ease;
}
[data-reveal].visible { opacity:1; transform:translateY(0); }

/* ===== RESPONSIVE ===== */
@media (max-width:1100px) {
    .services__grid { grid-template-columns:repeat(2,1fr); }
    .process__step { padding:0 .75rem; }
    .process__connector { width:32px; }
    .cta__inner { grid-template-columns:1fr; gap:2.5rem; }
    .cta__actions { flex-direction:row; flex-wrap:wrap; }
    .faq__inner { grid-template-columns:1fr; gap:3rem; }
    .faq__head { position:static; }
    .about__grid { grid-template-columns:1fr; gap:4rem; }
    .about__media { height:480px; max-width:560px; }
    .about__badge { left:0; }
}

@media (max-width:900px) {
    .nav__menu { display:none; flex-direction:column; align-items:stretch; position:fixed; top:62px; right:0; width:280px; height:calc(100vh - 62px); background:var(--dark); padding:2rem 1.5rem; gap:.25rem; overflow-y:auto; border-left:1px solid var(--border-d); transition:transform .3s ease; transform:translateX(100%); }
    .nav__menu.open { transform:translateX(0); display:flex; }
    .nav__link, .nav__cta { padding:1rem 1.125rem; font-size:1rem; border-radius:var(--r); display:block; }
    .nav__cta { margin-top:.5rem; text-align:center; }
    .nav__phone { display:none; }
    .nav__toggle { display:flex; }

    .hero__title { font-size:clamp(2.5rem, 7vw, 4.5rem); }
    .hero__stats { flex-wrap:wrap; gap:1rem; }
    .hero__stat { min-width:40%; }
    .hero__stat-div { display:none; }


    .reviews__grid { grid-template-columns:1fr; }

    .contact__methods { grid-template-columns:1fr; max-width:520px; }
    .footer__top { grid-template-columns:1fr; gap:3rem; }
    .footer__nav { grid-template-columns:1fr 1fr; }

    .process__steps { flex-direction:column; gap:2rem; align-items:flex-start; }
    .process__step { flex-direction:row; text-align:left; gap:1.5rem; align-items:flex-start; padding:0; }
    .process__step-num { margin-bottom:0; flex-shrink:0; }
    .process__connector { width:2px; height:32px; margin:0 0 0 1.5rem; }
}

@media (max-width:640px) {
    :root { --gap: 4rem 0; }
    .services__grid { grid-template-columns:1fr; }
    .proj-soon__frames { grid-template-columns:repeat(3, 1fr); gap:.625rem; }
    .proj-soon__actions .btn { width:100%; justify-content:center; }
    .about__pillars { grid-template-columns:1fr; }
    .footer__nav { grid-template-columns:1fr; }
    .footer__bottom { flex-direction:column; text-align:center; }
    .hero__actions { flex-direction:column; align-items:stretch; }
    .hero__actions .btn { width:100%; justify-content:center; }
    .cta__actions { flex-direction:column; align-items:stretch; }
    .cta__actions .btn { width:100%; justify-content:center; }
    .footer { padding-bottom:7rem; }
    .cmethod { gap:.875rem; padding:1rem; }
    .cmethod__icon { width:42px; height:42px; }
    .footer__nav > div a, .footer__hours { overflow-wrap:anywhere; }
    .footer__bottom { gap:.75rem; }
    .float span { display:none; }
    .float { padding:.875rem; border-radius:50%; }
}

@media (max-width:400px) {
    .cmethod { padding:.875rem; gap:.75rem; }
    .cmethod span { font-size:.875rem; }
    .cmethod em { font-size:.75rem; }
    .cmethod strong { letter-spacing:.03em; }
}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        animation-duration:.01ms !important;
        transition-duration:.01ms !important;
    }
}