/* ================================================================
   Arsh Art — Cabinet Refinishing  (v3 modern)
   Drop-in styles for Impreza CHILD theme
   Target: Impreza + WPBakery Page Builder
   Add to:  wp-content/themes/impreza-child/style.css
   ================================================================ */

/* --------------  1. Tokens  -------------- */
:root{
  --aa-ink:#0B0D10;
  --aa-graphite:#1F2328;
  --aa-slate:#4B5260;
  --aa-muted:#8A8F97;
  --aa-line:#E6E7EA;
  --aa-line-2:#F0F1F3;
  --aa-bg:#FFFFFF;
  --aa-bg-2:#F7F8FA;
  --aa-bg-3:#EFF1F4;
  --aa-brand:#E87B35;
  --aa-brand-dark:#C9621E;
  --aa-brand-soft:#FDF1E7;
  --aa-green:#0E7C5A;
  --aa-green-soft:#E6F4EE;
  --aa-radius:14px;
  --aa-radius-lg:20px;
  --aa-shadow-md:0 4px 12px rgba(11,13,16,0.06), 0 2px 4px rgba(11,13,16,0.04);
  --aa-shadow-lg:0 20px 40px rgba(11,13,16,0.08), 0 8px 16px rgba(11,13,16,0.06);
}

/* Load Inter only for .aa-scope so it never fights Impreza global type */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* --------------  2. Scope wrapper  --------------
   Every shortcode block is wrapped in .aa-scope so styles
   cannot leak into unrelated Impreza content.             */
.aa-scope{font-family:"Inter", -apple-system, system-ui, sans-serif;
  color:var(--aa-ink); line-height:1.55; -webkit-font-smoothing:antialiased;}
.aa-scope *,
.aa-scope *::before,
.aa-scope *::after{box-sizing:border-box;}
.aa-scope img{max-width:100%; display:block;}
.aa-scope a{color:inherit; text-decoration:none;}
.aa-scope h1,.aa-scope h2,.aa-scope h3,.aa-scope h4,.aa-scope h5{
  font-family:"Inter",sans-serif; font-weight:700; letter-spacing:-0.02em; line-height:1.1; margin:0;}
.aa-scope h1{font-size:clamp(40px,5.2vw,72px); letter-spacing:-0.035em;}
.aa-scope h2{font-size:clamp(30px,3.6vw,48px); letter-spacing:-0.03em;}
.aa-scope h3{font-size:26px;}
.aa-scope p{margin:0;}

.aa-wrap{max-width:1280px; margin:0 auto; padding:0 24px;}

/* --------------  3. Buttons  -------------- */
.aa-btn{display:inline-flex; align-items:center; gap:10px; padding:14px 22px;
  font-size:15px; font-weight:600; border-radius:100px; transition:all .18s ease;
  white-space:nowrap; border:0; cursor:pointer;}
.aa-btn.primary{background:var(--aa-ink); color:#fff;}
.aa-btn.primary:hover{background:var(--aa-brand); color:#fff;}
.aa-btn.accent{background:var(--aa-brand); color:#fff;}
.aa-btn.accent:hover{background:var(--aa-brand-dark); color:#fff;}
.aa-btn.ghost{background:transparent; color:var(--aa-ink); border:1.5px solid var(--aa-line);}
.aa-btn.ghost:hover{border-color:var(--aa-ink); background:var(--aa-bg-2); color:var(--aa-ink);}
.aa-btn.on-dark{background:#fff; color:var(--aa-ink);}
.aa-btn.on-dark:hover{background:var(--aa-brand); color:#fff;}
.aa-btn svg{width:16px; height:16px;}

.aa-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px;
  font-weight:600; color:var(--aa-brand-dark); background:var(--aa-brand-soft);
  padding:8px 14px; border-radius:100px;}
.aa-eyebrow .d{width:6px;height:6px;border-radius:50%;background:var(--aa-brand);}

.aa-section-head{max-width:780px; margin:0 auto 56px; text-align:center;}
.aa-section-head h2{margin-top:18px;}
.aa-section-head p{font-size:18px; color:var(--aa-slate); margin-top:18px;}

/* --------------  4. Hero  -------------- */
.aa-hero{padding:72px 0 40px;}
.aa-hero .grid{display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center;}
.aa-hero .chip-row{display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap;}
.aa-chip{display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  font-weight:500; color:var(--aa-graphite); background:#fff; border:1px solid var(--aa-line);
  padding:6px 12px; border-radius:100px;}
.aa-chip .star{color:var(--aa-brand);}
.aa-hero h1 em{font-style:normal; color:var(--aa-brand); display:inline-block; position:relative;}
.aa-hero h1 em::after{content:""; position:absolute; left:0; right:0; bottom:4px;
  height:8px; background:var(--aa-brand-soft); z-index:-1;}
.aa-hero .lede{font-size:18px; color:var(--aa-slate); margin-top:22px; max-width:520px;}
.aa-hero .ctas{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap;}
.aa-hero-meta{display:flex; gap:26px; margin-top:36px; padding-top:26px;
  border-top:1px solid var(--aa-line); align-items:center;}
.aa-av{display:flex;}
.aa-av .ph{width:32px;height:32px;border-radius:50%;border:2px solid #fff;margin-left:-8px;}
.aa-av .ph:nth-child(1){background:linear-gradient(135deg,#e9b97e,#b58246);}
.aa-av .ph:nth-child(2){background:linear-gradient(135deg,#b8a99a,#5c4a3a);}
.aa-av .ph:nth-child(3){background:linear-gradient(135deg,#a6b6c8,#3a4c62);}
.aa-av .ph:nth-child(4){background:linear-gradient(135deg,#d4c08a,#8b6f3d);}
.aa-rating .stars{color:var(--aa-brand); font-size:16px; letter-spacing:2px;}
.aa-rating .ct{font-size:13px; color:var(--aa-muted);}

.aa-hero-vis{position:relative; border-radius:var(--aa-radius-lg); overflow:hidden;
  aspect-ratio:1/1.1; background:linear-gradient(140deg,#e8d5ba 0%, #c49960 50%, #604731 100%);}
.aa-hero-vis .cabs{position:absolute; inset:8%; display:grid;
  grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:8px;}
.aa-hero-vis .cab{background:linear-gradient(160deg,#fcf8f0,#e4d5b4); border-radius:6px;
  position:relative; box-shadow:inset 0 0 0 1px rgba(11,13,16,0.06);}
.aa-hero-vis .cab::before{content:""; position:absolute; inset:10%;
  border:1px solid rgba(11,13,16,0.1); border-radius:4px;}
.aa-hero-vis .cab::after{content:""; position:absolute; right:10%; top:50%;
  width:4px; height:18px; background:var(--aa-ink); opacity:0.4; border-radius:2px;
  transform:translateY(-50%);}
.aa-hero-vis .floater{position:absolute; top:20px; right:20px; background:#fff;
  padding:16px 18px; border-radius:var(--aa-radius); box-shadow:var(--aa-shadow-lg);
  display:flex; gap:14px; align-items:center;}
.aa-hero-vis .floater .icn{width:40px; height:40px; background:var(--aa-brand-soft);
  color:var(--aa-brand-dark); border-radius:10px; display:grid; place-items:center;
  font-weight:700; font-size:18px;}
.aa-hero-vis .floater .t{font-size:13px; font-weight:700; line-height:1.2;}
.aa-hero-vis .floater .s{font-size:11px; color:var(--aa-muted); margin-top:2px;}
.aa-hero-vis .price{position:absolute; top:50%; left:-20px; background:#fff;
  padding:14px 18px; border-radius:var(--aa-radius); box-shadow:var(--aa-shadow-lg);}
.aa-hero-vis .price .l{font-size:10.5px; color:var(--aa-muted); font-weight:600;
  text-transform:uppercase; letter-spacing:0.06em;}
.aa-hero-vis .price .v{font-size:22px; font-weight:800; color:var(--aa-ink);
  letter-spacing:-0.02em; margin-top:2px;}
.aa-hero-vis .price .v span{color:var(--aa-brand); font-size:14px; font-weight:600;}

/* --------------  5. Announcement bar  -------------- */
.aa-announce{background:var(--aa-ink); color:#fff; font-size:13px;
  text-align:center; padding:10px 20px;}
.aa-announce .hi{color:var(--aa-brand); font-weight:600;}

/* --------------  6. Trust bar  -------------- */
.aa-trust{padding:50px 0; border-top:1px solid var(--aa-line);
  border-bottom:1px solid var(--aa-line); background:var(--aa-bg-2);}
.aa-trust .inner{display:flex; gap:40px; align-items:center;
  justify-content:space-between; flex-wrap:wrap;}
.aa-trust .tl{font-size:13px; color:var(--aa-muted); font-weight:500;}
.aa-trust .logos{display:flex; gap:48px; align-items:center; flex-wrap:wrap;}
.aa-trust .logos span{font-weight:700; color:var(--aa-slate); font-size:17px;}
.aa-trust .logos .italic{font-style:italic; font-weight:500;}

/* --------------  7. Section rhythm  -------------- */
.aa-block{padding:110px 0;}
.aa-bg-light{background:var(--aa-bg-2);}
.aa-bg-dark{background:var(--aa-ink); color:#fff;}
.aa-bg-dark .aa-section-head p{color:#B6BAC2;}
.aa-bg-dark h2,.aa-bg-dark h3,.aa-bg-dark h4{color:#fff;}

/* --------------  8. Service cards  -------------- */
.aa-svc-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.aa-svc-card{background:#fff; border:1px solid var(--aa-line);
  border-radius:var(--aa-radius-lg); padding:34px; transition:all .25s;
  display:flex; flex-direction:column;}
.aa-svc-card:hover{border-color:var(--aa-ink); transform:translateY(-4px); box-shadow:var(--aa-shadow-lg);}
.aa-svc-card .ic{width:52px; height:52px; border-radius:14px;
  background:var(--aa-brand-soft); color:var(--aa-brand-dark);
  display:grid; place-items:center; margin-bottom:22px;}
.aa-svc-card .ic svg{width:26px; height:26px;}
.aa-svc-card h3{font-size:22px; margin-bottom:10px;}
.aa-svc-card p{color:var(--aa-slate); font-size:14.5px; margin-bottom:20px;}
.aa-svc-card ul{list-style:none; margin:0 0 22px 0; padding:0;}
.aa-svc-card li{font-size:13.5px; color:var(--aa-graphite); padding:8px 0;
  border-bottom:1px solid var(--aa-line-2); display:flex;
  justify-content:space-between; align-items:center;}
.aa-svc-card li:last-child{border-bottom:0;}
.aa-svc-card li .v{color:var(--aa-muted); font-weight:500;}
.aa-svc-card .foot{display:flex; justify-content:space-between;
  align-items:flex-end; margin-top:auto; padding-top:18px;
  border-top:1px solid var(--aa-line);}
.aa-svc-card .foot .from{font-size:11.5px; color:var(--aa-muted); font-weight:600;
  text-transform:uppercase; letter-spacing:0.06em;}
.aa-svc-card .foot .p{font-size:24px; font-weight:700; letter-spacing:-0.02em;}
.aa-svc-card .foot .arw{width:36px; height:36px; border-radius:50%;
  background:var(--aa-bg-2); display:grid; place-items:center;
  transition:all .2s;}
.aa-svc-card:hover .foot .arw{background:var(--aa-brand); color:#fff;}
.aa-svc-card .foot .arw svg{width:16px; height:16px;}

/* --------------  9. Process  -------------- */
.aa-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.aa-p-step{background:#fff; border-radius:var(--aa-radius-lg); padding:30px;
  border:1px solid var(--aa-line);}
.aa-p-step .n{font-size:13px; font-weight:700; color:var(--aa-brand);
  letter-spacing:0.04em; margin-bottom:18px;}
.aa-p-step h4{font-size:20px; margin-bottom:10px;}
.aa-p-step p{font-size:14px; color:var(--aa-slate);}
.aa-p-step .when{display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-size:12px; font-weight:600; color:var(--aa-graphite);
  background:var(--aa-bg-2); padding:6px 12px; border-radius:100px;}
.aa-p-step .when svg{width:13px; height:13px; color:var(--aa-brand);}

/* --------------  10. Gallery  -------------- */
.aa-gallery-grid{display:grid; grid-template-columns:repeat(4,1fr);
  grid-template-rows:260px 260px; gap:14px;}
.aa-g-item{position:relative; border-radius:var(--aa-radius); overflow:hidden;
  cursor:pointer; transition:transform .25s;}
.aa-g-item:hover{transform:scale(0.99);}
.aa-g-item.big{grid-column:span 2; grid-row:span 2;}
.aa-g-item .ph{position:absolute; inset:0;}
.aa-g-item.g1 .ph{background:linear-gradient(155deg,#f0e6d2 0%, #b59666 55%, #4a3520 100%);}
.aa-g-item.g2 .ph{background:linear-gradient(155deg,#e7dcc5 0%, #c7b085 50%, #5c4a2f 100%);}
.aa-g-item.g3 .ph{background:linear-gradient(155deg,#2a3440 0%, #5a6676 50%, #c9a371 100%);}
.aa-g-item.g4 .ph{background:linear-gradient(155deg,#d3c8b1 0%, #7a6a4a 60%, #1a1a1a 100%);}
.aa-g-item.g5 .ph{background:linear-gradient(155deg,#e7dec8 0%, #a88e60 50%, #2d3f35 100%);}
.aa-g-item .ph::after{content:""; position:absolute; inset:0; background:
  repeating-linear-gradient(5deg, transparent 0 40px, rgba(11,13,16,0.04) 40px 41px),
  linear-gradient(180deg, transparent 50%, rgba(11,13,16,0.55));}
.aa-g-item .meta{position:absolute; bottom:18px; left:18px; right:18px; color:#fff;
  z-index:2; display:flex; justify-content:space-between; align-items:flex-end;}
.aa-g-item h5{font-size:17px; font-weight:600; color:#fff; margin:0;}
.aa-g-item.big h5{font-size:24px;}
.aa-g-item .loc{font-size:12px; opacity:0.85; margin-top:4px; font-weight:500;}
.aa-g-item .tag-chip{background:rgba(255,255,255,0.15); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.25); padding:5px 10px; border-radius:100px;
  font-size:11px; font-weight:600; color:#fff;}

/* --------------  11. Why cards (dark)  -------------- */
.aa-why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.aa-why-item{padding:28px; border-radius:var(--aa-radius-lg);
  background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);}
.aa-why-item .ic{width:44px; height:44px; border-radius:12px;
  background:var(--aa-brand); color:#fff; display:grid; place-items:center;
  margin-bottom:22px;}
.aa-why-item .ic svg{width:22px; height:22px;}
.aa-why-item h4{color:#fff; font-size:19px; margin-bottom:10px;}
.aa-why-item p{font-size:14px; color:#B6BAC2;}

/* --------------  12. Reviews  -------------- */
.aa-review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.aa-review{background:#fff; border-radius:var(--aa-radius-lg); padding:30px;
  border:1px solid var(--aa-line); display:flex; flex-direction:column;}
.aa-review .top{display:flex; justify-content:space-between; align-items:center;
  margin-bottom:18px;}
.aa-review .stars{color:var(--aa-brand); font-size:15px; letter-spacing:1.5px;}
.aa-review .src{font-size:11px; font-weight:600; color:var(--aa-muted);
  text-transform:uppercase; letter-spacing:0.06em;
  display:flex; align-items:center; gap:6px;}
.aa-review .verified{background:var(--aa-green-soft); color:var(--aa-green);
  padding:3px 8px; border-radius:100px; font-size:10px;}
.aa-review .body{font-size:15.5px; color:var(--aa-graphite); line-height:1.6;
  margin-bottom:22px; flex:1;}
.aa-review .who{display:flex; align-items:center; gap:12px; padding-top:18px;
  border-top:1px solid var(--aa-line-2);}
.aa-review .who .avatar{width:38px; height:38px; border-radius:50%;
  background:var(--aa-bg-3); font-weight:700; color:var(--aa-graphite);
  display:grid; place-items:center; font-size:14px;}
.aa-review .who .n{font-size:14px; font-weight:600;}
.aa-review .who .l{font-size:12px; color:var(--aa-muted);}
.aa-reviews-foot{display:flex; justify-content:center; align-items:center;
  gap:32px; margin-top:50px; flex-wrap:wrap;}
.aa-rs{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--aa-slate);}
.aa-rs strong{color:var(--aa-ink); font-weight:700;}

/* --------------  13. Pricing  -------------- */
.aa-pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  align-items:stretch;}
.aa-price-card{background:#fff; border:1px solid var(--aa-line);
  border-radius:var(--aa-radius-lg); padding:36px; position:relative;
  display:flex; flex-direction:column;}
.aa-price-card.featured{border-color:var(--aa-ink); border-width:2px;
  transform:translateY(-8px); box-shadow:var(--aa-shadow-lg);}
.aa-price-card .tier{font-size:13px; font-weight:600; color:var(--aa-brand-dark);
  letter-spacing:0.05em; text-transform:uppercase; margin-bottom:12px;}
.aa-price-card .featured-badge{position:absolute; top:-12px; left:50%;
  transform:translateX(-50%); background:var(--aa-ink); color:#fff;
  padding:6px 14px; border-radius:100px; font-size:11px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;}
.aa-price-card h3{font-size:32px; margin-bottom:8px;}
.aa-price-card .price{font-size:44px; font-weight:800; letter-spacing:-0.03em;
  margin:22px 0 6px; line-height:1;}
.aa-price-card .price .sub{font-size:15px; color:var(--aa-muted); font-weight:500;}
.aa-price-card .desc{font-size:14px; color:var(--aa-slate); margin-bottom:24px;}
.aa-price-card ul{list-style:none; margin:0 0 28px 0; padding:0;}
.aa-price-card li{padding:10px 0; font-size:14.5px; color:var(--aa-graphite);
  display:flex; align-items:flex-start; gap:10px;}
.aa-price-card li svg{width:16px; height:16px; color:var(--aa-green); flex-shrink:0; margin-top:3px;}
.aa-price-card .aa-btn{width:100%; justify-content:center;}

/* --------------  14. Area  -------------- */
.aa-area-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px;}
.aa-area-card{background:#fff; padding:20px; border-radius:var(--aa-radius);
  border:1px solid var(--aa-line); text-align:center; transition:all .2s; cursor:pointer;}
.aa-area-card:hover{border-color:var(--aa-brand); transform:translateY(-2px);}
.aa-area-card .n{font-size:18px; font-weight:700;}
.aa-area-card .p{font-size:12px; color:var(--aa-muted); margin-top:4px;}
.aa-area-card .d{display:inline-block; font-size:11px; font-weight:600;
  color:var(--aa-green); background:var(--aa-green-soft);
  padding:4px 8px; border-radius:100px; margin-top:10px;}

/* --------------  15. FAQ  -------------- */
.aa-faq-wrap{display:grid; grid-template-columns:0.9fr 1.3fr; gap:70px;
  align-items:flex-start;}
.aa-faq-left h2{font-size:42px;}
.aa-faq-left p{font-size:16px; color:var(--aa-slate); margin:18px 0 26px;}
.aa-faq-left .call-card{background:var(--aa-ink); color:#fff; padding:26px;
  border-radius:var(--aa-radius-lg); margin-top:20px;}
.aa-faq-left .call-card .l{font-size:12px; color:#EFB585; font-weight:600;
  text-transform:uppercase; letter-spacing:0.05em;}
.aa-faq-left .call-card .ph{font-size:28px; font-weight:700; margin-top:6px;}
.aa-faq-left .call-card .t{font-size:13px; color:#B6BAC2; margin-top:10px;}

.aa-faq-list{display:flex; flex-direction:column; gap:12px;}
.aa-faq-item{background:#fff; border:1px solid var(--aa-line);
  border-radius:var(--aa-radius); overflow:hidden;}
.aa-faq-item summary{list-style:none; padding:22px 26px; font-weight:600;
  font-size:16.5px; cursor:pointer; display:flex; justify-content:space-between;
  align-items:center; gap:20px;}
.aa-faq-item summary::-webkit-details-marker{display:none;}
.aa-faq-item summary::after{content:""; width:24px; height:24px; border-radius:50%;
  background:var(--aa-bg-2);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231F2328' stroke-width='2.5'><path d='M12 5v14M5 12h14'/></svg>");
  background-repeat:no-repeat; background-position:center; flex-shrink:0;
  transition:transform .2s;}
.aa-faq-item[open] summary::after{transform:rotate(45deg); background-color:var(--aa-brand);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'><path d='M12 5v14M5 12h14'/></svg>");}
.aa-faq-item .a{padding:0 26px 22px; font-size:15px; color:var(--aa-slate);
  line-height:1.7;}
.aa-faq-item .a strong{color:var(--aa-ink); font-weight:600;}

/* --------------  16. Big CTA  -------------- */
.aa-big-cta{background:var(--aa-brand); color:#fff; padding:90px 0;}
.aa-big-cta .inner{display:grid; grid-template-columns:1.3fr 1fr; gap:50px;
  align-items:center;}
.aa-big-cta h2{color:#fff; font-size:clamp(34px,4vw,54px);}
.aa-big-cta p{font-size:17px; margin-top:16px; opacity:0.9;}
.aa-big-cta .r{text-align:right;}
.aa-big-cta .phone-lbl{font-size:12px; opacity:0.85; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase;}
.aa-big-cta .phone-n{font-size:40px; font-weight:800; margin:6px 0 16px;}
.aa-big-cta .btn-row{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}
.aa-big-cta .aa-btn.on-dark-outline{background:transparent; color:#fff;
  border:1.5px solid rgba(255,255,255,0.4);}

/* --------------  17. Mobile breakpoints  -------------- */
@media (max-width: 1024px){
  .aa-hero .grid,
  .aa-faq-wrap,
  .aa-big-cta .inner{grid-template-columns:1fr; gap:40px;}
  .aa-big-cta .r{text-align:left;}
  .aa-big-cta .btn-row{justify-content:flex-start;}
  .aa-svc-cards,
  .aa-review-grid,
  .aa-pricing-grid,
  .aa-why-grid{grid-template-columns:repeat(2,1fr);}
  .aa-steps{grid-template-columns:repeat(2,1fr);}
  .aa-area-grid{grid-template-columns:repeat(3,1fr);}
  .aa-gallery-grid{grid-template-columns:repeat(2,1fr); grid-template-rows:none;}
  .aa-g-item.big{grid-column:span 2; grid-row:span 1;}
}
@media (max-width: 640px){
  .aa-block{padding:70px 0;}
  .aa-svc-cards,
  .aa-review-grid,
  .aa-pricing-grid,
  .aa-why-grid,
  .aa-steps,
  .aa-area-grid,
  .aa-gallery-grid{grid-template-columns:1fr;}
  .aa-price-card.featured{transform:none;}
  .aa-hero{padding:40px 0 20px;}
}