@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

/* =========================================================
   L&D REMODELING SERVICES — FINAL CLEAN STYLESHEET
========================================================= */

:root{
    --ink:#17201b;
    --ink-2:#26322b;
    --muted:#6d756f;
    --cream:#f7f4ee;
    --cream-2:#eee9df;
    --sage:#76867a;
    --sage-dark:#59695d;
    --gold:#b78f58;
    --gold-dark:#997340;
    --line:#dedbd3;
    --white:#fff;
    --dark:#101713;

    --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
    --sans:'Manrope',Arial,Helvetica,sans-serif;

    --container:1220px;
    --radius:20px;
    --shadow:0 24px 65px rgba(18,27,22,.12);
    --transition:.25s ease;
}

*,
*::before,
*::after{box-sizing:border-box}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    margin:0;
    min-width:320px;
    overflow-x:hidden;
    background:#fff;
    color:var(--ink);
    font-family:var(--sans);
    font-size:15px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{font:inherit}

.container{
    width:min(var(--container),calc(100% - 64px));
    margin-inline:auto;
}

.skip-link{
    position:absolute;
    left:-9999px;
    top:0;
}

.skip-link:focus{
    left:18px;
    top:18px;
    z-index:9999;
    background:#fff;
    padding:10px 14px;
    border-radius:8px;
}

/* TYPOGRAPHY */

h1,h2,h3,h4,h5,h6,p{margin-top:0}

h1,h2,
.hero-contact-card h3,
.service-copy h3,
.process-item h3,
.showcase-grid figcaption strong,
.feature-box h3,
.text-call,
.hero-phone,
.cta-phone-link strong{
    font-family:var(--serif);
}

h1,h2{
    margin-bottom:20px;
    font-weight:600;
    line-height:1;
    letter-spacing:-.035em;
}

h1{font-size:clamp(54px,5.5vw,82px)}
h2{font-size:clamp(40px,4vw,58px)}

p{margin-bottom:18px}

.eyebrow,
.mini-label{
    display:inline-block;
    margin-bottom:14px;
    color:var(--sage);
    font-size:10px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.eyebrow.light{color:#dce4df}
.mini-label{color:var(--gold-dark)}

.lead-copy{
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
}

.text-link,
.service-link{
    display:inline-flex;
    align-items:center;
    gap:9px;
    font-size:12px;
    font-weight:700;
}

.text-link span,
.service-link span{transition:transform var(--transition)}

.text-link:hover span,
.service-link:hover span{transform:translateX(4px)}

/* TOP BAR */

.topbar{
    background:var(--dark);
    color:#dde5df;
    font-size:10px;
}

.topbar .container{
    width:min(1280px,calc(100% - 64px));
}

.topbar-inner{
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.topbar-message{
    color:#dde5df!important;
    font-weight:600;
}

.topbar-actions{
    display:flex;
    align-items:center;
    gap:12px;
    white-space:nowrap;
}

.topbar-actions a{
    color:#fff!important;
    font-weight:700;
}

.topbar-actions a:hover{color:#d6b27d!important}
.topbar-dot{opacity:.45}

/* HEADER */

.site-header{
    position:sticky;
    top:0;
    z-index:100;
    width:100%;
    background:rgba(255,255,255,.98);
    border-bottom:1px solid rgba(23,32,27,.08);
    backdrop-filter:blur(12px);
}

.site-header .container{
    width:min(1280px,calc(100% - 64px));
}

.nav-wrap{
    height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    transition:height .25s ease;
}

.site-header.header-scrolled{
    box-shadow:0 8px 30px rgba(15,22,18,.07);
}

.site-header.header-scrolled .nav-wrap{height:76px}

.brand{
    display:flex;
    align-items:center;
    gap:13px;
    flex-shrink:0;
}

.brand-mark{
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border:1.3px solid var(--ink);
    border-radius:50%;
    font-family:var(--serif);
    font-size:20px;
    line-height:1;
}

.brand-mark span{
    color:var(--gold);
    font-family:inherit;
    font-size:14px;
}

.brand-copy{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.brand-copy strong{
    font-size:15px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.brand-copy small{
    margin-top:7px;
    color:var(--muted);
    font-size:8px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:28px;
    font-size:12px;
    font-weight:600;
}

.main-nav>a,
.nav-drop>button{position:relative}

.main-nav>a:not(.btn)::after,
.nav-drop>button::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-9px;
    height:1.5px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform var(--transition);
}

.main-nav>a:not(.btn):hover::after,
.main-nav>a.active::after,
.nav-drop>button:hover::after,
.nav-drop.active-parent>button::after{transform:scaleX(1)}

.nav-drop{position:relative}

.nav-drop>button{
    padding:0;
    border:0;
    background:none;
    color:inherit;
    cursor:pointer;
    font-weight:600;
}

.drop-menu{
    position:absolute;
    top:34px;
    left:-24px;
    width:345px;
    padding:10px;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow);
    transition:all .2s ease;
}

.nav-drop:hover .drop-menu,
.nav-drop.open .drop-menu{
    opacity:1;
    visibility:visible;
    transform:none;
}

.drop-menu a{
    display:flex;
    flex-direction:column;
    padding:13px 14px;
    border-radius:11px;
}

.drop-menu a:hover{background:var(--cream)}
.drop-menu strong{font-size:12px}
.drop-menu small{margin-top:2px;color:var(--muted);font-size:10px}

.menu-btn{
    display:none;
    padding:7px;
    border:0;
    background:transparent;
    cursor:pointer;
}

.menu-btn span{
    display:block;
    width:27px;
    height:2px;
    margin:5px 0;
    background:var(--ink);
    transition:.2s;
}

.menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.open span:nth-child(2){opacity:0}
.menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* BUTTONS */

.btn{
    min-height:50px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 24px;
    border:1px solid var(--ink);
    border-radius:999px;
    background:var(--ink);
    color:#fff!important;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
    cursor:pointer;
    transition:transform var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition),color var(--transition);
}

.btn:hover{
    transform:translateY(-2px);
    background:var(--ink-2);
    box-shadow:0 10px 28px rgba(21,27,24,.13);
}

.btn-small{min-height:44px;padding-inline:20px}
.btn-lg{min-height:54px;padding-inline:27px}
.btn-block{width:100%}

.btn-light{
    background:#fff!important;
    border-color:#fff!important;
    color:var(--ink)!important;
}

.btn-light:hover{
    background:#efeae1!important;
    color:var(--ink)!important;
}

.btn-dark{
    background:var(--ink)!important;
    border-color:var(--ink)!important;
    color:#fff!important;
}

.btn-outline{
    background:transparent!important;
    border-color:#a9b0ab!important;
    color:var(--ink)!important;
}

.btn-outline:hover{
    background:var(--ink)!important;
    border-color:var(--ink)!important;
    color:#fff!important;
}

.btn-ghost{
    background:rgba(255,255,255,.04)!important;
    border-color:rgba(255,255,255,.55)!important;
    color:#fff!important;
}

.btn-ghost:hover{
    background:#fff!important;
    color:var(--ink)!important;
}

/* HERO */

.hero{
    position:relative;
    min-height:690px;
    display:flex;
    color:#fff;
    overflow:hidden;
    background:
        url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&q=88&w=2200')
        center/cover no-repeat;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(8,14,11,.89) 0%,rgba(8,14,11,.76) 42%,rgba(8,14,11,.45) 72%,rgba(8,14,11,.22) 100%);
}

.hero .container{
    width:min(var(--container),calc(100% - 64px));
}

.hero-grid{
    position:relative;
    z-index:2;
    min-height:690px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    align-items:center;
    gap:76px;
    padding:64px 0;
}

.hero-content{min-width:0;max-width:760px}

.hero .eyebrow{
    margin-bottom:20px;
    color:#f0ece5;
}

.hero h1{
    max-width:760px;
    margin-bottom:24px;
    color:#fff;
    font-size:clamp(58px,5.6vw,80px);
}

.hero h1 span{
    display:block;
    color:#f1ede5;
    font-family:inherit;
    font-weight:500;
}

.hero-lead{
    max-width:625px;
    margin-bottom:0;
    color:rgba(255,255,255,.83);
    font-size:15px;
    line-height:1.75;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:30px 0 34px;
}

.hero-proof{
    max-width:675px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.22);
}

.hero-proof>div{
    display:grid;
    grid-template-columns:25px 1fr;
    gap:8px;
}

.hero-proof>div>span{
    color:#d2b184;
    font-size:9px;
}

.hero-proof p{
    margin:0;
    color:rgba(255,255,255,.66);
    font-size:10px;
    line-height:1.5;
}

.hero-proof strong{
    display:block;
    margin-bottom:3px;
    color:#fff;
    font-size:11px;
}

.hero-contact-card{
    min-width:0;
    align-self:center;
    padding:32px;
    background:rgba(255,255,255,.97);
    color:var(--ink);
    border-radius:20px;
    box-shadow:0 28px 75px rgba(0,0,0,.22);
}

.hero-contact-card h3{
    margin:10px 0 13px;
    font-size:32px;
    font-weight:600;
    line-height:1.02;
}

.hero-contact-card p{
    color:var(--muted);
    font-size:12px;
    line-height:1.7;
}

.hero-phone{
    display:inline-block;
    color:var(--ink);
    font-size:25px;
    font-weight:600;
}

.hero-card-line{
    height:1px;
    margin:21px 0;
    background:var(--line);
}

.hero-location{margin-bottom:22px}

.hero-location small{
    display:block;
    margin-bottom:5px;
    color:var(--sage);
    font-size:8px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.hero-location strong{
    display:block;
    font-size:11px;
    line-height:1.55;
}

/* TRUST STRIP */

.trust-strip{
    border-bottom:1px solid var(--line);
    background:#fff;
}

.trust-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}

.trust-grid>div{
    min-width:0;
    padding:25px 24px;
    border-right:1px solid var(--line);
}

.trust-grid>div:first-child{padding-left:0}
.trust-grid>div:last-child{padding-right:0;border-right:0}

.trust-index{
    display:block;
    margin-bottom:5px;
    color:var(--gold);
    font-size:9px;
    font-weight:700;
}

.trust-grid strong{
    display:block;
    margin-bottom:3px;
    font-size:13px;
}

.trust-grid small{
    color:var(--muted);
    font-size:10px;
}

/* COMMON SECTIONS */

.section{padding:100px 0}

.section-heading-row{
    display:grid;
    grid-template-columns:minmax(0,760px) auto;
    align-items:end;
    justify-content:space-between;
    gap:60px;
    margin-bottom:48px;
}

.section-heading-copy{min-width:0}

.section-heading-copy h2{
    max-width:760px;
    margin-bottom:16px;
}

.section-heading-copy p{
    max-width:690px;
    margin-bottom:0;
    color:var(--muted);
}

.desktop-cta{justify-self:end}

/* INTRO */

.intro-section{padding:110px 0}

.intro-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    gap:100px;
    align-items:start;
}

.intro-heading h2{max-width:690px}
.intro-copy>p:not(.lead-copy){color:var(--muted)}

/* SERVICES */

.services-section{
    padding-top:96px;
    background:#fff;
}

.service-list{
    border-top:1px solid var(--line);
}

.service-row{
    display:grid;
    grid-template-columns:44px minmax(0,.94fr) minmax(0,1fr);
    gap:38px;
    align-items:center;
    padding:46px 0;
    border-bottom:1px solid var(--line);
}

.service-row-reverse{
    grid-template-columns:44px minmax(0,1fr) minmax(0,.94fr);
}

.service-row-reverse .service-image{grid-column:3}
.service-row-reverse .service-copy{grid-column:2;grid-row:1}

.service-number{
    align-self:start;
    padding-top:6px;
    color:#89918c;
    font-size:10px;
}

.service-image{
    height:350px;
    overflow:hidden;
    border-radius:18px;
    background:var(--cream-2);
}

.service-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.service-image:hover img{transform:scale(1.03)}

.service-copy{
    min-width:0;
    padding:20px 28px;
}

.service-copy h3{
    margin:9px 0 17px;
    font-size:clamp(34px,3vw,44px);
    font-weight:600;
    line-height:1.06;
    letter-spacing:-.025em;
}

.service-copy p{
    max-width:520px;
    color:var(--muted);
    font-size:13px;
}

.service-mini-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 18px;
    margin:0 0 24px;
    padding:0;
    list-style:none;
}

.service-mini-list li{
    position:relative;
    padding-left:14px;
    color:var(--muted);
    font-size:11px;
}

.service-mini-list li::before{
    content:"";
    position:absolute;
    left:0;
    top:.75em;
    width:6px;
    height:1px;
    background:var(--gold);
}

.service-link{
    padding-bottom:3px;
    border-bottom:1px solid var(--ink);
}

/* PROCESS */

.process-section{
    background:
        radial-gradient(circle at 10% 10%,rgba(183,143,88,.10),transparent 28%),
        var(--dark);
    color:#fff;
}

.process-grid{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:100px;
}

.process-intro p{
    max-width:520px;
    color:#b8c2bb;
}

.process-list{
    border-top:1px solid rgba(255,255,255,.17);
}

.process-item{
    display:grid;
    grid-template-columns:52px 1fr;
    gap:18px;
    padding:24px 0;
    border-bottom:1px solid rgba(255,255,255,.17);
}

.process-no{
    padding-top:5px;
    color:#91a096;
    font-size:10px;
}

.process-item small{
    display:block;
    margin-bottom:4px;
    color:var(--gold);
    font-size:8px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.process-item h3{
    margin:0 0 5px;
    font-size:28px;
    font-weight:600;
}

.process-item p{
    margin:0;
    color:#aeb9b2;
    font-size:12px;
}

/* PORTFOLIO */

.portfolio-heading{margin-bottom:42px}

.showcase-grid{
    display:grid;
    grid-template-columns:1.35fr .8fr;
    grid-template-rows:1fr 1fr;
    gap:16px;
}

.showcase-grid figure{
    position:relative;
    min-height:270px;
    margin:0;
    overflow:hidden;
    border-radius:18px;
    background:var(--cream-2);
}

.showcase-large{
    grid-row:1/3;
    min-height:556px!important;
}

.showcase-grid img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}

.showcase-grid figure:hover img{transform:scale(1.03)}

.showcase-grid figure::after{
    content:"";
    position:absolute;
    inset:40% 0 0;
    background:linear-gradient(transparent,rgba(8,13,11,.72));
}

.showcase-grid figcaption{
    position:absolute;
    left:24px;
    right:24px;
    bottom:22px;
    z-index:2;
    color:#fff;
}

.showcase-grid figcaption span{
    display:block;
    margin-bottom:4px;
    font-size:8px;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.showcase-grid figcaption strong{
    display:block;
    font-size:22px;
    font-weight:600;
    line-height:1.15;
}

.portfolio-disclaimer{
    margin:13px 0 0;
    color:#8b918d;
    font-size:9px;
}

/* HOMEOWNER */

.homeowner-section{background:var(--cream)}

.homeowner-grid{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:82px;
    align-items:center;
}

.homeowner-media{position:relative}

.homeowner-media img{
    width:100%;
    height:610px;
    object-fit:cover;
    border-radius:20px;
}

.media-tag{
    position:absolute;
    left:22px;
    bottom:22px;
    padding:10px 14px;
    background:#fff;
    border-radius:999px;
    box-shadow:0 10px 30px rgba(21,27,24,.09);
    font-size:10px;
    font-weight:700;
}

.homeowner-copy>p{color:var(--muted)}

.feature-points{margin-top:28px}

.feature-points>div{
    display:grid;
    grid-template-columns:30px 1fr;
    gap:14px;
    padding:17px 0;
    border-top:1px solid var(--line);
}

.feature-points>div:last-child{border-bottom:1px solid var(--line)}

.feature-points>div>span{
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--ink);
    color:#fff;
    font-size:10px;
}

.feature-points p{
    margin:0;
    color:var(--muted);
    font-size:12px;
}

.feature-points strong{
    display:block;
    margin-bottom:2px;
    color:var(--ink);
    font-size:13px;
}

/* PROJECT CTA */

.project-cta-section{
    padding:0 0 100px;
    background:var(--cream);
}

.project-cta{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);
    gap:60px;
    align-items:center;
    padding:52px 56px;
    background:linear-gradient(135deg,#718276,#4d6255);
    color:#fff;
    border-radius:26px;
    box-shadow:var(--shadow);
}

.project-cta h2{
    margin-bottom:14px;
    font-size:clamp(38px,3.8vw,54px);
}

.project-cta p{
    max-width:650px;
    margin:0;
    color:#e4ebe6;
}

.project-cta-actions{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
}

.cta-phone-link{
    display:flex;
    flex-direction:column;
}

.cta-phone-link small{
    font-family:var(--sans);
    font-size:8px;
    letter-spacing:.14em;
    text-transform:uppercase;
    opacity:.75;
}

.cta-phone-link strong{
    font-size:24px;
    font-weight:600;
}

/* FAQ */

.faq-grid{
    display:grid;
    grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
    gap:90px;
}

.faq-intro>p{color:var(--muted)}

.faq{border-top:1px solid var(--line)}

.faq details{border-bottom:1px solid var(--line)}

.faq summary{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:22px 0;
    list-style:none;
    cursor:pointer;
    font-size:13px;
    font-weight:700;
}

.faq summary::-webkit-details-marker{display:none}

.faq summary span{
    font-size:19px;
    font-weight:400;
    transition:transform .2s ease;
}

.faq details[open] summary span{transform:rotate(45deg)}

.faq details p{
    max-width:680px;
    margin:0;
    padding:0 45px 22px 0;
    color:var(--muted);
    font-size:12px;
}

/* FINAL CTA */

.final-home-cta{
    padding:102px 0;
    color:#fff;
    background:
        linear-gradient(rgba(10,16,13,.80),rgba(10,16,13,.84)),
        url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&q=86&w=2200')
        center/cover no-repeat;
}

.final-home-cta-inner{
    max-width:820px;
    text-align:center;
}

.final-home-cta h2{
    margin-bottom:17px;
    font-size:clamp(42px,4.8vw,64px);
}

.final-home-cta p{
    color:#dce4df;
    font-size:15px;
}

.final-home-actions{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin:28px 0 22px;
}

.final-home-cta small{color:#c5cec8}

/* INNER PAGES / SHARED COMPONENTS */

.page-hero{
    padding:100px 0;
    background:var(--cream);
}

.page-hero.refined{padding:105px 0 88px}

.page-hero-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:75px;
    align-items:end;
}

.page-hero h1{
    max-width:900px;
    font-size:clamp(48px,5vw,72px);
}

.page-hero p{
    max-width:700px;
    color:var(--muted);
    font-size:16px;
}

.page-hero.image{
    color:#fff;
    background:
        linear-gradient(90deg,rgba(12,19,15,.80),rgba(12,19,15,.34)),
        var(--hero-img) center/cover no-repeat;
}

.page-hero.image p{color:#eef3ef}

.split,
.content-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.split-media{position:relative}

.split-media img{
    width:100%;
    height:520px;
    object-fit:cover;
    border-radius:18px;
}

.split p,
.content-grid p{color:var(--muted)}

.floating-card{
    position:absolute;
    left:24px;
    bottom:24px;
    padding:19px 22px;
    background:#fff;
    border-radius:14px;
    box-shadow:var(--shadow);
}

.check-list{
    margin:24px 0 30px;
    border-top:1px solid var(--line);
}

.check-list div{
    position:relative;
    padding:13px 0 13px 27px;
    border-bottom:1px solid var(--line);
    font-size:13px;
}

.check-list div::before{
    content:"✓";
    position:absolute;
    left:0;
    color:var(--sage);
    font-weight:700;
}

.feature-box{
    padding:36px;
    background:var(--cream);
    border-radius:18px;
}

.feature-box h3{
    font-size:33px;
    font-weight:600;
}

/* CONTACT / FORMS */

.contact-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:55px;
}

.contact-card{
    padding:38px;
    background:var(--dark);
    color:#fff;
    border-radius:20px;
}

.contact-card p{color:#bdc7c0}
.contact-card a{display:block;margin:8px 0}

.form-card{
    padding:38px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 14px 40px rgba(21,27,24,.05);
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.field{display:grid;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:11px;font-weight:700}

.field input,
.field select,
.field textarea{
    width:100%;
    padding:13px 14px;
    outline:none;
    border:1px solid #d8d5ce;
    border-radius:10px;
    background:#fff;
    color:var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:var(--sage);
    box-shadow:0 0 0 3px rgba(113,130,117,.10);
}

.field textarea{min-height:145px;resize:vertical}

.alert{
    margin-bottom:20px;
    padding:14px 16px;
    border-radius:10px;
    font-size:12px;
}

.alert.success{background:#e8f3ea;color:#2f693a}
.alert.error{background:#fff0ee;color:#974035}

/* PORTFOLIO PAGE */

.portfolio-filter{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-bottom:34px;
}

.portfolio-filter button{
    padding:9px 15px;
    cursor:pointer;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
    font-size:11px;
    font-weight:700;
}

.portfolio-filter button.active,
.portfolio-filter button:hover{
    background:var(--ink);
    border-color:var(--ink);
    color:#fff;
}

.portfolio-masonry{
    columns:3 320px;
    column-gap:16px;
}

.portfolio-masonry figure{
    position:relative;
    margin:0 0 16px;
    overflow:hidden;
    break-inside:avoid;
    border-radius:16px;
}

.portfolio-masonry figure[hidden]{display:none}

.portfolio-masonry img{
    width:100%;
    min-height:280px;
    object-fit:cover;
}

/* CTA BAND */

.cta-band{
    padding:62px 0;
    background:var(--sage);
    color:#fff;
}

.cta-band-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:55px;
}

.cta-band h2{
    margin-bottom:10px;
    font-size:44px;
}

.cta-band p{
    max-width:650px;
    margin:0;
    color:#e4eae6;
}

.cta-actions{
    display:flex;
    align-items:center;
    gap:20px;
    flex-shrink:0;
}

.text-call{
    display:flex;
    flex-direction:column;
    font-size:22px;
}

.text-call span{
    font-family:var(--sans);
    font-size:8px;
    letter-spacing:.15em;
    text-transform:uppercase;
}

/* FOOTER */

.footer{
    padding:70px 0 18px;
    background:#0b100d;
    color:#c5cec8;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.45fr 1fr 1fr 1.25fr;
    gap:44px;
}

.brand-footer{
    margin-bottom:18px;
    color:#fff;
}

.brand-footer .brand-mark{border-color:#fff}

.footer h4{
    margin-bottom:15px;
    color:#fff;
    font-size:11px;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.footer a{
    display:block;
    margin:8px 0;
    color:#d5ddd7;
    font-size:12px;
}

.footer a:hover{color:#e3c28f}

.footer p{
    color:#abb7af;
    font-size:12px;
}

.footer-about>p{max-width:340px}

.footer-pill{
    display:inline-block!important;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:999px;
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-top:40px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.1);
    color:#89958e;
    font-size:10px;
}

/* FLOATING PHONE */

.floating-call{
    position:fixed!important;
    right:24px!important;
    bottom:24px!important;
    z-index:999!important;
    width:56px!important;
    height:56px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:var(--gold)!important;
    color:#fff!important;
    box-shadow:0 12px 30px rgba(15,21,18,.24)!important;
}

.floating-call:hover{
    background:var(--gold-dark)!important;
    transform:translateY(-2px);
}

.floating-call,
.floating-call span,
.floating-call i,
.floating-call svg{color:#fff!important}

.mobile-actions{display:none}

/* ADMIN */

.admin-body{min-height:100vh;background:#f3f4f1}

.admin-shell{
    width:min(1180px,calc(100% - 34px));
    margin:35px auto;
}

.admin-card{
    padding:28px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 10px 35px rgba(21,27,24,.04);
}

.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}

th,td{
    padding:13px;
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:top;
    font-size:11px;
}

th{
    color:var(--muted);
    font-size:9px;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.login-box{
    width:min(460px,calc(100% - 32px));
    margin:8vh auto;
}

/* TABLET */

@media(max-width:1050px){
    .main-nav{gap:20px}
    .hero-grid{gap:46px}
    .hero h1{font-size:62px}
    .service-row,
    .service-row-reverse{
        grid-template-columns:40px minmax(0,1fr) minmax(0,1fr);
        gap:26px;
    }
    .service-copy{padding:12px 10px 12px 18px}
}

/* MOBILE NAV / TABLET */

@media(max-width:900px){
    .container,
    .topbar .container,
    .site-header .container,
    .hero .container{
        width:calc(100% - 40px);
    }

    .menu-btn{display:block}

    .main-nav{
        position:fixed;
        top:124px;
        left:20px;
        right:20px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:12px;
        max-height:calc(100vh - 145px);
        overflow:auto;
        padding:18px;
        background:#fff;
        border:1px solid var(--line);
        border-radius:16px;
        box-shadow:var(--shadow);
    }

    .main-nav.open{display:flex}

    .main-nav>a,
    .nav-drop>button{padding:8px 4px}

    .main-nav>a:not(.btn)::after,
    .nav-drop>button::after{display:none}

    .nav-drop>button{width:100%;text-align:left}

    .drop-menu{
        position:static;
        width:100%;
        display:none;
        padding:6px 0 0 8px;
        opacity:1;
        visibility:visible;
        transform:none;
        border:0;
        box-shadow:none;
    }

    .nav-drop.open .drop-menu{display:block}

    .hero{min-height:auto}

    .hero-grid{
        min-height:620px;
        display:block;
        padding:72px 0 62px;
    }

    .hero-content{max-width:700px}
    .hero-contact-card{display:none}

    .hero h1{
        max-width:680px;
        font-size:clamp(50px,8vw,66px);
    }

    .trust-grid{grid-template-columns:1fr 1fr}

    .trust-grid>div:nth-child(2){border-right:0}
    .trust-grid>div:nth-child(3),
    .trust-grid>div:nth-child(4){border-top:1px solid var(--line)}

    .section{padding:78px 0}

    .intro-grid,
    .process-grid,
    .homeowner-grid,
    .faq-grid,
    .page-hero-grid,
    .split,
    .content-grid,
    .contact-grid{
        grid-template-columns:1fr;
        gap:46px;
    }

    .section-heading-row{
        grid-template-columns:1fr;
        gap:24px;
    }

    .desktop-cta{justify-self:start}

    .service-row,
    .service-row-reverse{
        grid-template-columns:34px 1fr;
        gap:22px;
    }

    .service-row .service-number,
    .service-row-reverse .service-number{
        grid-column:1;
        grid-row:1/3;
    }

    .service-row .service-image,
    .service-row-reverse .service-image{
        grid-column:2;
        grid-row:1;
    }

    .service-row .service-copy,
    .service-row-reverse .service-copy{
        grid-column:2;
        grid-row:2;
        padding:10px 0;
    }

    .service-image{height:320px}

    .showcase-grid{grid-template-columns:1fr 1fr}

    .showcase-large{
        grid-column:1/-1;
        grid-row:auto;
        min-height:420px!important;
    }

    .homeowner-media img{height:500px}

    .project-cta{
        grid-template-columns:1fr;
        gap:30px;
    }

    .project-cta-actions{
        flex-direction:row;
        align-items:center;
        flex-wrap:wrap;
    }

    .footer-grid{grid-template-columns:1fr 1fr}

    .cta-band-inner{
        align-items:flex-start;
        flex-direction:column;
    }

    .floating-call{bottom:82px!important}

    .mobile-actions{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:900;
        display:flex;
        gap:8px;
        padding:9px 12px;
        background:#fff;
        border-top:1px solid var(--line);
        box-shadow:0 -8px 30px rgba(21,27,24,.08);
    }

    .mobile-actions a{
        flex:1;
        padding:11px;
        text-align:center;
        background:var(--ink);
        color:#fff;
        border-radius:999px;
        font-size:11px;
        font-weight:700;
    }

    .mobile-actions a:first-child{
        background:var(--cream);
        color:var(--ink);
    }
}

/* PHONE */

@media(max-width:620px){
    .container,
    .site-header .container,
    .hero .container{
        width:calc(100% - 28px);
    }

    .topbar{display:none}

    .nav-wrap{height:76px}
    .main-nav{top:86px;left:14px;right:14px}

    .brand-mark{width:45px;height:45px;font-size:18px}
    .brand-copy strong{font-size:13px}
    .brand-copy small{font-size:7px}

    .hero{
        background-position:60% center;
    }

    .hero-grid{
        min-height:auto;
        padding:60px 0 54px;
    }

    .hero h1{
        font-size:45px;
        line-height:1;
    }

    .hero-lead{font-size:14px}

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
        margin:26px 0 31px;
    }

    .hero-actions .btn{width:100%}

    .hero-proof{
        grid-template-columns:1fr;
        gap:11px;
    }

    .trust-grid{grid-template-columns:1fr}

    .trust-grid>div{
        padding:17px 0;
        border-right:0;
        border-top:1px solid var(--line)!important;
    }

    .trust-grid>div:first-child{border-top:0!important}

    .section{padding:68px 0}
    .intro-section{padding:74px 0}

    h2{font-size:39px}

    .section-heading-row{margin-bottom:34px}

    .desktop-cta{width:100%}

    .service-row,
    .service-row-reverse{
        grid-template-columns:1fr;
        gap:15px;
        padding:30px 0;
    }

    .service-row .service-number,
    .service-row-reverse .service-number,
    .service-row .service-image,
    .service-row-reverse .service-image,
    .service-row .service-copy,
    .service-row-reverse .service-copy{
        grid-column:1;
        grid-row:auto;
    }

    .service-image{height:250px}

    .service-copy h3{font-size:35px}

    .service-mini-list{grid-template-columns:1fr}

    .showcase-grid{
        grid-template-columns:1fr;
        grid-template-rows:auto;
    }

    .showcase-large{
        grid-column:auto;
        min-height:300px!important;
    }

    .showcase-grid figure{min-height:280px}

    .homeowner-media img{height:380px}

    .project-cta-section{padding-bottom:68px}

    .project-cta{
        padding:34px 25px;
        border-radius:20px;
    }

    .project-cta-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .project-cta .btn{width:100%}
    .cta-phone-link{text-align:center}

    .faq details p{padding-right:0}

    .final-home-cta{padding:78px 0 96px}

    .final-home-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .final-home-actions .btn{width:100%}

    .form-grid{grid-template-columns:1fr}
    .field.full{grid-column:auto}

    .portfolio-masonry{columns:1}

    .cta-actions{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .footer-grid{grid-template-columns:1fr}
    .footer-bottom{flex-direction:column}

    .floating-call{display:none!important}
}

@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        transition-duration:.01ms!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
    }
}
/* =========================================================
   L&D REMODELING - FIXED HEADER ON SCROLL
========================================================= */

.site-header{
    position: relative;
    width: 100%;
    z-index: 9999;
    background: #ffffff;
}

/* Scroll করার পর header screen-এর উপরে freeze হবে */
.site-header.header-scrolled{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    background: rgba(255,255,255,.98) !important;

    box-shadow:
        0 8px 30px rgba(15,21,18,.12);

    border-bottom:
        1px solid rgba(15,21,18,.08);

    z-index: 99999 !important;

    animation: ldHeaderDown .25s ease;
}


/* Header appears smoothly */

@keyframes ldHeaderDown{

    from{
        transform:translateY(-100%);
        opacity:0;
    }

    to{
        transform:translateY(0);
        opacity:1;
    }

}


/* Keep dropdown visible */

.site-header.header-scrolled .drop-menu{
    z-index:100000 !important;
}


/* Compact logo while scrolling */

.site-header.header-scrolled .header-logo{
    height:40px !important;
    max-height:40px !important;
    max-width:165px !important;
}


/* Slightly compact navigation */

.site-header.header-scrolled .nav-wrap{
    min-height:66px !important;
}


/* Mobile */

@media(max-width:980px){

    .site-header.header-scrolled{
        top:0 !important;
    }

    .site-header.header-scrolled .header-logo{
        height:38px !important;
        max-height:38px !important;
        max-width:150px !important;
    }

}