@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root{--black:#090909;--charcoal:#141414;--cream:#f5f2ea;--warm:#e7e1d4;--gold:#d5aa35;--gold2:#f0ca64;--muted:#98948c;--line:rgba(255,255,255,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:#151515;font-family:Manrope,Arial,sans-serif}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
.site-header{position:fixed;z-index:100;top:0;left:0;right:0;height:82px;padding:0 clamp(18px,5vw,70px);display:flex;align-items:center;justify-content:space-between;background:rgba(9,9,9,.86);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.09)}
.brand img{width:112px;height:58px;object-fit:cover}.nav{display:flex;align-items:center;gap:28px;color:#fff;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.nav a{opacity:.82;transition:.2s}.nav a:hover{opacity:1;color:var(--gold2)}.nav .cta{opacity:1;background:var(--gold);color:#111;padding:13px 17px}.hamb{display:none;border:0;background:none;color:#fff;font-size:25px}
.hero{min-height:760px;height:100vh;max-height:940px;position:relative;background:#0b0b0b;color:#fff;overflow:hidden}.hero-media{position:absolute;inset:0;background:center/cover no-repeat;transform:scale(1.02)}.hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.87) 0%,rgba(0,0,0,.60) 47%,rgba(0,0,0,.16) 100%),linear-gradient(0deg,rgba(0,0,0,.68),transparent 45%)}.hero-content{position:relative;z-index:2;padding:170px clamp(22px,8vw,120px) 60px;max-width:1000px}.eyebrow,.kicker{color:var(--gold2);font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}.eyebrow span{display:inline-block;width:40px;border-top:1px solid var(--gold);margin:0 12px 3px}.hero h1{font-size:clamp(58px,9vw,128px);line-height:.9;letter-spacing:-.055em;margin:24px 0;font-weight:800}.hero h1 em,.accent{font-family:"Playfair Display",serif;font-weight:500;font-style:italic;color:var(--gold2)}.lead{max-width:630px;color:#dedbd5;font-size:clamp(15px,1.7vw,20px);line-height:1.7}.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{padding:15px 20px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.btn.gold{background:var(--gold);color:#111}.btn.ghost{border:1px solid rgba(255,255,255,.35);color:#fff}.scrollhint{position:absolute;z-index:2;bottom:28px;right:6vw;color:#bbb;font-size:9px;letter-spacing:.2em}.scrollhint b{color:var(--gold2);font-size:18px;margin-left:8px}
.page-hero{min-height:470px;padding:160px clamp(22px,8vw,120px) 70px;background:var(--black);color:#fff;position:relative;overflow:hidden}.page-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(213,170,53,.15),transparent 38%)}.page-hero>*{position:relative;z-index:1}.page-hero h1{font-size:clamp(55px,9vw,105px);line-height:.92;letter-spacing:-.05em;margin:18px 0 0}.page-hero p{max-width:650px;color:#aaa;line-height:1.7;font-size:15px}
.section{padding:100px clamp(22px,7vw,100px)}.dark{background:var(--black);color:#fff}.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:48px}.section h2{font-size:clamp(42px,6vw,70px);line-height:.95;letter-spacing:-.05em;margin:15px 0 0}.section-head p{max-width:400px;color:#777;line-height:1.7}.dark .section-head p{color:#999}
.gallery{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-auto-rows:300px;gap:14px}.gallery-card{position:relative;overflow:hidden;background:#222;min-width:0}.gallery-card.big{grid-row:span 2}.gallery-card.wide{grid-column:span 2}.gallery-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.gallery-card:hover img{transform:scale(1.045)}.gallery-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 38%,rgba(0,0,0,.82))}.caption{position:absolute;z-index:2;left:20px;right:15px;bottom:18px;color:#fff}.caption small{color:var(--gold2);font-size:9px;font-weight:800;letter-spacing:.18em}.caption h3{font-family:"Playfair Display",serif;font-size:23px;margin:6px 0 0;font-weight:500}
.services-grid{border-top:1px solid #cfc9bc}.service{display:grid;grid-template-columns:60px 1fr 1.2fr 35px;gap:20px;align-items:center;padding:29px 0;border-bottom:1px solid #cfc9bc}.service .num{color:#a9a398;font-weight:700}.service h3{font-size:24px;letter-spacing:-.03em;margin:0}.service p{margin:0;color:#6d6a63;line-height:1.6;font-size:14px}.service .arrow{font-size:22px}
.standard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#3a3a3a;margin-top:50px}.standard-card{background:#141414;padding:42px}.standard-card .num{color:var(--gold2);font-size:11px;font-weight:800;letter-spacing:.15em}.standard-card h3{font-family:"Playfair Display",serif;font-size:32px;font-weight:500;margin:20px 0 10px}.standard-card p{color:#999;line-height:1.7;margin:0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;min-height:650px}.about-photo{min-height:550px}.about-photo img{width:100%;height:100%;object-fit:cover}.about-copy{padding:90px clamp(25px,7vw,100px);display:flex;flex-direction:column;justify-content:center;background:#111;color:#fff}.about-copy p{color:#aaa;line-height:1.8;max-width:600px}.signature{margin-top:28px;color:var(--gold2);font-family:"Playfair Display",serif;font-size:34px;font-style:italic}
.contact-wrap{display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:center}.contact-card{background:#111;color:#fff;padding:34px}.contact-card a{display:block;padding:20px 0;border-bottom:1px solid #333}.contact-card a:last-child{border-bottom:0}.contact-card small{display:block;color:#777;font-size:9px;letter-spacing:.18em;font-weight:800}.contact-card strong{display:block;font-size:21px;margin-top:7px;word-break:break-word}.contact-card span{display:block;color:var(--gold2);font-size:11px;margin-top:6px}
.footer{background:#050505;color:#777;padding:28px clamp(22px,6vw,80px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.footer-brand img{width:90px;height:48px;object-fit:cover}.footer-contact{display:flex;flex-direction:column;gap:7px;min-width:0}.footer-contact strong{color:#fff;font-size:11px;letter-spacing:.13em}.footer-contact span{color:#777;font-size:10px;letter-spacing:.08em}.footer-site{color:var(--gold2);font-weight:800;white-space:nowrap}
@media(max-width:850px){.site-header{height:70px}.brand img{width:100px;height:54px}.nav{display:none}.nav.open{display:flex;position:absolute;top:70px;left:0;right:0;background:#0b0b0b;flex-direction:column;align-items:stretch;padding:12px 22px 20px;gap:0;border-top:1px solid #222}.nav.open a{padding:14px 0;border-bottom:1px solid #222}.nav.open .cta{padding:14px;margin-top:8px;text-align:center}.hamb{display:block}.hero{min-height:700px;height:auto}.hero-content{padding:135px 22px 100px}.hero h1{font-size:clamp(52px,16vw,72px);line-height:.94;max-width:100%;overflow-wrap:normal}.lead{font-size:15px}.buttons{flex-direction:column;align-items:stretch;max-width:330px}.btn{text-align:center}.scrollhint{display:none}.page-hero{min-height:390px;padding:125px 22px 55px}.page-hero h1{font-size:clamp(48px,14vw,68px);max-width:100%;overflow-wrap:break-word}.section{padding:75px 22px}.section-head{display:block;margin-bottom:35px}.section-head p{margin-top:22px}.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:210px}.gallery-card.big,.gallery-card.wide{grid-row:span 1;grid-column:auto}.gallery-card.wide{grid-column:span 2}.caption{left:14px;bottom:13px}.caption h3{font-size:19px}.service{grid-template-columns:35px 1fr 25px;gap:10px;padding:25px 0}.service p{grid-column:2/4;margin-top:3px}.service h3{font-size:19px}.standard-grid{grid-template-columns:1fr}.standard-card{padding:32px 25px}.about-grid{grid-template-columns:1fr}.about-photo{min-height:360px}.about-copy{padding:65px 22px}.contact-wrap{grid-template-columns:1fr;gap:30px}.contact-card{padding:22px}.footer{grid-template-columns:1fr;gap:14px}.footer-brand img{width:90px;height:48px}.footer-contact{gap:6px}.footer-site{font-size:10px}}
@media(max-width:420px){.hero h1{font-size:55px}.page-hero h1{font-size:50px}.gallery{grid-template-columns:1fr;grid-auto-rows:280px}.gallery-card.wide{grid-column:auto}.service p{font-size:13px}.section h2{font-size:43px}}

/* Official ASPAINT CO watermark */
body{position:relative;isolation:isolate}
body::before{content:"";position:fixed;z-index:0;pointer-events:none;inset:0;background-image:url("logo-watermark.png");background-repeat:no-repeat;background-position:center 58%;background-size:min(520px,62vw) auto;opacity:.035;filter:saturate(.9)}
.site-header,main,.footer{position:relative;z-index:1}
.gallery-card .portfolio-watermark{position:absolute;z-index:3;right:12px;bottom:12px;width:92px;height:auto;max-width:none;opacity:.78;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));pointer-events:none}
@media(max-width:850px){body::before{background-size:min(430px,78vw) auto;background-position:center 52%;opacity:.032}.gallery-card .portfolio-watermark{width:72px;right:9px;bottom:9px}}

/* FINAL BRAND + MOBILE NAV FIX */
.brand img,.footer-brand img{object-fit:contain;background:transparent !important}
.hamb{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;align-items:center;gap:8px;position:relative;z-index:1201;padding:10px 0 10px 12px;line-height:1}
.hamb-icon{font-size:29px;line-height:1;display:inline-block}.hamb-label{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:850px){.site-header{overflow:visible}.nav.open{display:flex !important;position:fixed !important;top:70px !important;left:0 !important;right:0 !important;width:100% !important;z-index:1200 !important;max-height:calc(100vh - 70px);overflow-y:auto;background:rgba(8,8,8,.985) !important;box-shadow:0 20px 45px rgba(0,0,0,.45)}.nav.open a{min-height:48px;display:flex;align-items:center}}
/* Transparent official logo used as a subtle site watermark */
body::before{background-image:url("aspaint-logo-transparent.png") !important;background-size:min(560px,64vw) auto !important;background-position:center 56% !important;opacity:.045 !important;filter:none !important}
.gallery-card .portfolio-watermark{width:96px !important;height:auto !important;object-fit:contain !important;opacity:.88 !important;background:transparent !important}
@media(max-width:850px){body::before{background-size:min(440px,80vw) auto !important;opacity:.04 !important}.gallery-card .portfolio-watermark{width:78px !important}}


/* MOBILE NAV CONTENT VISIBILITY FIX */
@media (max-width:850px){
  .nav.open{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
    color:#fff !important;
  }
  .nav.open::before{
    content:"MENU";
    display:block;
    width:100%;
    padding:8px 0 14px;
    color:#d5aa35;
    font-size:10px;
    font-weight:800;
    letter-spacing:.22em;
    border-bottom:1px solid #333;
  }
  .nav.open a,
  .nav.open a:link,
  .nav.open a:visited{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase;
    width:100%;
    min-height:58px !important;
    padding:18px 4px !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border-bottom:1px solid rgba(255,255,255,.13) !important;
  }
  .nav.open a.cta{
    display:flex !important;
    justify-content:center !important;
    background:#d5aa35 !important;
    color:#111 !important;
    margin:16px 0 8px !important;
    padding:17px 14px !important;
    border:0 !important;
  }
  .site-header:has(.nav.open){background:#090909 !important;}
}


/* PORTFOLIO WATERMARK READABILITY FIX */
/* Keep branding in the bottom corner without obscuring project titles. */
.gallery-card .caption{z-index:4}
.gallery-card .portfolio-watermark{z-index:3;width:82px !important;right:10px !important;bottom:10px !important}
.gallery-card .portfolio-watermark-small{width:56px !important;right:9px !important;bottom:9px !important}
@media(max-width:850px){
  .gallery-card .portfolio-watermark{width:62px !important;right:8px !important;bottom:8px !important}
  .gallery-card .portfolio-watermark-small{width:46px !important;right:7px !important;bottom:7px !important}
}


/* === FINAL MOBILE MENU + PORTFOLIO TITLE SAFETY FIX === */
@media (max-width:850px){
  .site-header{
    z-index:9999 !important;
    overflow:visible !important;
  }

  .nav{display:none !important;}

  .nav.open,
  #site-nav.open{
    display:block !important;
    position:fixed !important;
    top:70px !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100vw !important;
    height:calc(100vh - 70px) !important;
    max-height:none !important;
    min-height:0 !important;
    overflow-y:auto !important;
    padding:20px 22px 36px !important;
    margin:0 !important;
    background:#090909 !important;
    color:#fff !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
    z-index:2147483647 !important;
  }

  .nav.open::before{
    content:"WEBSITE MENU" !important;
    display:block !important;
    padding:8px 0 16px !important;
    margin:0 0 4px !important;
    color:#d5aa35 !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:.22em !important;
    border-bottom:1px solid rgba(255,255,255,.16) !important;
  }

  .nav.open a,
  #site-nav.open a{
    display:block !important;
    width:100% !important;
    min-height:0 !important;
    padding:19px 4px !important;
    margin:0 !important;
    color:#fff !important;
    background:transparent !important;
    visibility:visible !important;
    opacity:1 !important;
    font-size:14px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    letter-spacing:.12em !important;
    text-transform:uppercase !important;
    border-bottom:1px solid rgba(255,255,255,.14) !important;
  }

  .nav.open a.cta,
  #site-nav.open a.cta{
    display:block !important;
    text-align:center !important;
    margin:18px 0 0 !important;
    padding:18px 12px !important;
    background:#d5aa35 !important;
    color:#111 !important;
    border:0 !important;
  }

  body.menu-open{overflow:hidden !important;}

  /* Reserve space for the logo so project titles can never run underneath it. */
  .gallery-card .caption{
    right:92px !important;
    bottom:13px !important;
  }

  .gallery-card .portfolio-watermark,
  .gallery-card .portfolio-watermark-small{
    width:54px !important;
    right:8px !important;
    bottom:9px !important;
  }

  .gallery-card .caption h3{
    font-size:18px !important;
    line-height:1.12 !important;
    overflow-wrap:anywhere;
  }
}

/* Desktop/tablet: reserve the bottom-right corner for the portfolio logo. */
@media (min-width:851px){
  .gallery-card .caption{
    right:122px !important;
  }

  .gallery-card .portfolio-watermark{
    width:76px !important;
    right:12px !important;
    bottom:12px !important;
  }

  .gallery-card .portfolio-watermark-small{
    width:52px !important;
    right:10px !important;
    bottom:10px !important;
  }
}

/* BEFORE & AFTER PORTFOLIO */
.before-after-section{padding-top:100px;padding-bottom:110px}
.before-after-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.before-after-card{position:relative;overflow:hidden;background:#141414;border:1px solid rgba(255,255,255,.08)}
.ba-images{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#050505}
.ba-image{position:relative;min-width:0;aspect-ratio:1/1;overflow:hidden;background:#222}
.ba-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.before-after-card:hover .ba-image img{transform:scale(1.035)}
.ba-image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.16),transparent 35%,rgba(0,0,0,.18))}
.ba-label{position:absolute;z-index:2;top:13px;left:13px;padding:7px 9px;background:rgba(9,9,9,.78);color:#fff;font-size:8px;font-weight:800;letter-spacing:.18em}
.before-after-card .caption{position:relative;left:auto;right:auto;bottom:auto;padding:20px 20px 22px;background:#141414}
.before-after-card .caption h3{font-size:24px}
@media(max-width:850px){
.before-after-section{padding-top:75px;padding-bottom:80px}
.before-after-grid{grid-template-columns:1fr;gap:14px}
.before-after-card .caption{padding:17px 14px 19px}
.before-after-card .caption h3{font-size:21px}
.ba-label{top:10px;left:10px;padding:6px 8px}
}
@media(max-width:420px){
.ba-images{grid-template-columns:1fr 1fr}
.ba-image{aspect-ratio:1/1}
}


/* COMPLETED WORK GALLERY */
.completed-work-section{padding-top:100px;padding-bottom:110px}
.completed-work-gallery{margin-top:10px}
@media(max-width:850px){.completed-work-section{padding-top:75px;padding-bottom:80px}}