:root {
      --gd:   #0d3318;
      --gm:   #1e6b28;
      --gs:   #2e7d32;
      --gl:   #4caf50;
      --gold: #c8922a;
      --glf:  #f0c060;
      --crm:  #f5f3ee;
      --wht:  #ffffff;
      --drk:  #0a1a0c;
      --mut:  #4e5e50;
      --bdr:  rgba(46,125,50,.13);
      --sh:   0 4px 28px rgba(0,0,0,.07);
      --shl:  0 14px 50px rgba(0,0,0,.13);
      --r:    18px;
      --rs:   10px;
      /* footer palette — rich dark green, not pure black */
      --ft-bg-top:    #071a0a;
      --ft-bg-btm:    #040f06;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:'Outfit',sans-serif;background:var(--crm);color:var(--drk);overflow-x:hidden}
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}
    ul{list-style:none}
    .container{max-width:1160px;margin:0 auto;padding:0 28px}
    .section{padding:90px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
      color:var(--gold);background:rgba(200,146,42,.08);
      border:1px solid rgba(200,146,42,.28);
      padding:5px 14px;border-radius:100px;margin-bottom:16px;
    }
    .eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold)}
    .s-title{
      font-family:'Playfair Display',serif;
      font-size:clamp(1.75rem,3.2vw,2.4rem);
      color:var(--gd);letter-spacing:-.02em;line-height:1.2;
    }
    .s-title::after{
      content:'';display:block;height:3px;width:52px;
      background:linear-gradient(90deg,var(--gold),transparent);
      margin-top:12px;border-radius:2px;
    }

    /* ── NAVBAR ── */
    #navbar{
      position:fixed;top:0;left:0;right:0;z-index:1000;
      padding:14px 28px;
      display:flex;align-items:center;justify-content:space-between;
      transition:background .35s,box-shadow .35s,padding .35s;
    }
    #navbar.scrolled{
      background:rgba(245,243,238,.96);backdrop-filter:blur(14px);
      box-shadow:0 2px 24px rgba(0,0,0,.07);padding:10px 28px;
    }
    .nav-brand{display:flex;align-items:center;gap:12px}
    .nav-logo{
      width:44px;height:44px;border-radius:50%;overflow:hidden;
      border:2.5px solid var(--gold);
      box-shadow:0 0 0 4px rgba(200,146,42,.15);
      flex-shrink:0;
    }
    .nav-logo img{width:100%;height:100%;object-fit:cover}
    .nav-brand-text strong{display:block;font-size:.88rem;font-weight:700;color:var(--gd);line-height:1.2}
    .nav-brand-text span{font-size:.7rem;color:var(--mut)}
    .nav-cta{
      background:linear-gradient(135deg,var(--gs),var(--gd));
      color:#fff;padding:10px 22px;border-radius:100px;
      font-size:.84rem;font-weight:600;
      box-shadow:0 4px 16px rgba(30,107,40,.3);
      transition:transform .2s,box-shadow .2s;
      display:flex;align-items:center;gap:8px;
    }
    .nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(30,107,40,.4)}

    /* ── HERO ── */
    #hero{
      position:relative;overflow:hidden;
      min-height:90vh;
      display:flex;flex-direction:column;
      background:linear-gradient(160deg, var(--gd) 0%, #163d1e 55%, #0d2e14 100%);
    }
    #hero::before,#hero::after{
      content:'';position:absolute;border-radius:50%;
      border:1px solid rgba(240,192,96,.07);pointer-events:none;z-index:0;
    }
    #hero::before{width:540px;height:540px;top:-210px;right:-180px}
    #hero::after{width:320px;height:320px;bottom:-110px;left:34%;border-color:rgba(240,192,96,.05)}
    .hero-inner{
      flex:1;position:relative;z-index:2;
      max-width:1220px;width:100%;margin:0 auto;
      padding:150px 28px 70px;
      display:grid;grid-template-columns:1.12fr 1fr;gap:36px;align-items:center;
    }
    .hero-content{max-width:520px}
    #hero .eyebrow{color:var(--glf);background:rgba(240,192,96,.12);border-color:rgba(240,192,96,.32)}
    .hero-tagline{
      font-family:'Playfair Display',serif;
      font-size:clamp(2.05rem,4vw,3.3rem);
      color:#fff;line-height:1.16;letter-spacing:-.02em;margin-bottom:20px;
    }
    .hero-tagline em{color:var(--glf);font-style:normal}
    .hero-desc{font-size:.98rem;color:rgba(255,255,255,.68);line-height:1.85;margin-bottom:32px;max-width:440px}
    .hero-btns{display:flex;gap:12px;flex-wrap:wrap}
    .btn-gold{
      display:inline-flex;align-items:center;gap:9px;
      background:linear-gradient(135deg,var(--gold),#9a6a14);
      color:#fff;padding:14px 28px;border-radius:100px;
      font-size:.9rem;font-weight:700;
      box-shadow:0 8px 24px rgba(200,146,42,.5);
      transition:transform .2s,box-shadow .2s;
    }
    .btn-gold:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(200,146,42,.65)}
    .btn-ghost{
      display:inline-flex;align-items:center;gap:9px;
      border:1.5px solid rgba(255,255,255,.4);color:#fff;
      padding:13px 26px;border-radius:100px;
      font-size:.9rem;font-weight:600;
      backdrop-filter:blur(6px);background:rgba(255,255,255,.06);
      transition:background .2s,transform .2s;
    }
    .btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
    .hero-trust{
      display:flex;align-items:center;gap:18px;flex-wrap:wrap;
      margin-top:38px;padding-top:24px;border-top:1px solid rgba(255,255,255,.13);
    }
    .trust-item{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:500;color:rgba(255,255,255,.65)}
    .trust-item i{color:var(--glf);font-size:.85rem}
    .trust-div{width:1px;height:14px;background:rgba(255,255,255,.18)}
    .hero-visual{display:flex;justify-content:center;align-items:center}
    .cup-cluster{position:relative;width:clamp(250px,30vw,420px);aspect-ratio:1/1}
    .ring{position:absolute;top:50%;left:50%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
    .ring-1{width:82%;height:82%;border:1.5px solid rgba(240,192,96,.32)}
    .ring-2{width:96%;height:96%;border:1.5px solid rgba(240,192,96,.16)}
    .ring-3{width:110%;height:110%;border:1px solid rgba(240,192,96,.07)}
    .ring-ping{
      position:absolute;top:50%;left:50%;width:80%;height:80%;border-radius:50%;
      border:1.5px solid rgba(240,192,96,.55);
      transform:translate(-50%,-50%) scale(.82);
      animation:ringPing 3.4s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none;
    }
    .ring-ping.delay{animation-delay:1.7s}
    @keyframes ringPing{
      0%{transform:translate(-50%,-50%) scale(.8);opacity:.55}
      70%{opacity:.12}
      100%{transform:translate(-50%,-50%) scale(1.28);opacity:0}
    }
    .cup-main{
      position:absolute;top:50%;left:50%;width:66%;height:66%;
      transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;
      border:6px solid rgba(255,255,255,.07);
      box-shadow:0 25px 60px rgba(0,0,0,.45),0 0 0 1px rgba(240,192,96,.25);
    }
    .cup-main img{width:100%;height:100%;object-fit:cover}
    .cup-shine{
      position:absolute;top:6%;left:10%;width:38%;height:38%;border-radius:50%;
      background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%);
      pointer-events:none;
    }
    .cup-mini{
      position:absolute;width:19%;height:19%;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,var(--gold),#8a5010);color:#fff;
      font-size:clamp(.85rem,1.6vw,1.15rem);
      box-shadow:0 10px 24px rgba(0,0,0,.4);border:3px solid var(--gd);
      animation:miniFloat 4.5s ease-in-out infinite;
    }
    .cup-mini-a{top:2%;right:0}
    .cup-mini-b{bottom:6%;left:-2%;animation-delay:1.4s}
    @keyframes miniFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
    .hero-wave{position:absolute;bottom:-2px;left:0;right:0;z-index:3;height:90px;overflow:hidden}
    .hero-wave svg{display:block;width:100%;height:100%}

    /* ── CONTACT STRIP ── */
    #contact-strip{
      background:var(--wht);padding:24px 0;
      box-shadow:0 4px 24px rgba(0,0,0,.06);z-index:10;position:relative;
    }
    .icon-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
    .icon-btn{
      display:flex;flex-direction:column;align-items:center;gap:6px;
      width:74px;padding:14px 0;border-radius:var(--rs);
      background:var(--crm);box-shadow:3px 3px 8px rgba(0,0,0,.05),-2px -2px 6px #fff;
      font-size:1.45rem;transition:transform .25s,box-shadow .25s;cursor:pointer;
    }
    .icon-btn:hover{transform:translateY(-5px);box-shadow:0 10px 26px rgba(0,0,0,.1)}
    .icon-btn span{font-size:.57rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--mut)}
    .icon-btn:nth-child(1) i{color:#25d366}
    .icon-btn:nth-child(2) i{color:#e53935}
    .icon-btn:nth-child(3) i{color:#e91e63}
    .icon-btn:nth-child(4) i{color:#3949ab}
    .icon-btn:nth-child(5) i{color:#1e88e5}

    /* ── ABOUT ── */
    #about{background:var(--wht)}
    .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
    .about-img-wrap{position:relative}
    .about-img-main{border-radius:var(--r);overflow:hidden;box-shadow:var(--shl)}
    .about-img-main img{width:100%;height:420px;object-fit:cover}
    .about-badge{
      position:absolute;bottom:-18px;right:-18px;
      background:var(--gd);color:#fff;
      border-radius:var(--rs);padding:18px 22px;
      text-align:center;box-shadow:var(--shl);border:3px solid var(--wht);
    }
    .about-badge .num{font-family:'Playfair Display',serif;font-size:2.1rem;color:var(--glf)}
    .about-badge .lbl{font-size:.74rem;color:rgba(255,255,255,.65);margin-top:2px}
    .about-text p{font-size:1rem;line-height:1.9;color:var(--mut);margin-top:16px}
    .stat-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
    .stat-card{
      background:var(--crm);border-radius:var(--rs);
      padding:18px;border:1px solid var(--bdr);position:relative;overflow:hidden;
    }
    .stat-card::before{
      content:'';position:absolute;top:0;left:0;width:3px;height:100%;
      background:linear-gradient(to bottom,var(--gs),var(--gold));
    }
    .stat-card .num{font-family:'Playfair Display',serif;font-size:1.85rem;color:var(--gm);font-weight:700}
    .stat-card .lbl{font-size:.77rem;color:var(--mut);font-weight:500;margin-top:3px}

    /* ── SERVICES ── */
    #services{background:var(--crm)}
    .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:22px;margin-top:42px}
    .service-card{
      background:var(--wht);border-radius:var(--r);padding:34px 24px;
      border:1px solid var(--bdr);box-shadow:var(--sh);
      transition:transform .35s,box-shadow .35s;position:relative;overflow:hidden;
    }
    .service-card:hover{transform:translateY(-8px);box-shadow:var(--shl)}
    .srv-bar{
      position:absolute;top:0;left:0;right:0;height:4px;
      background:linear-gradient(90deg,var(--gs),var(--gold));
      transform:scaleX(0);transform-origin:left;transition:transform .35s;
    }
    .service-card:hover .srv-bar{transform:scaleX(1)}
    .srv-icon{
      width:58px;height:58px;border-radius:15px;
      background:linear-gradient(135deg,rgba(30,107,40,.1),rgba(200,146,42,.07));
      display:flex;align-items:center;justify-content:center;
      font-size:1.75rem;margin-bottom:18px;
    }
    .service-card h3{font-size:1.08rem;font-weight:700;color:var(--gd);margin-bottom:12px}
    .service-card li{
      font-size:.85rem;color:var(--mut);line-height:1.75;
      padding-left:16px;position:relative;margin-bottom:6px;
    }
    .service-card li::before{content:'▸';position:absolute;left:0;color:var(--gold);font-size:.68rem;top:5px}

    /* ── PORTFOLIO ── */
    #portfolio{background:var(--wht)}
    .gallery-masonry{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      grid-template-rows:260px 200px;
      gap:14px;margin-top:42px;
    }
    .g-item{border-radius:var(--r);overflow:hidden;position:relative;cursor:zoom-in}
    .g-item:nth-child(1){grid-row:span 2}
    .g-item img{width:100%;height:100%;object-fit:cover;transition:transform .55s}
    .g-item:hover img{transform:scale(1.07)}
    .g-ov{
      position:absolute;inset:0;
      background:linear-gradient(to top,rgba(10,40,16,.55),transparent 60%);
      opacity:0;transition:opacity .35s;
      display:flex;align-items:flex-end;padding:18px;
    }
    .g-ov i{color:#fff;font-size:1.2rem}
    .g-item:hover .g-ov{opacity:1}

    /* ── CERTS ── */
    #certificates{background:var(--crm)}
    .cert-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-top:42px}
    .cert-card{
      border-radius:var(--rs);overflow:hidden;background:#fff;
      box-shadow:var(--sh);border:1px solid var(--bdr);
      transition:transform .3s,box-shadow .3s;
    }
    .cert-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:var(--shl)}
    .cert-card img{width:100%;height:174px;object-fit:cover}

    /* ── REVIEWS ── */
    #reviews{background:var(--wht);text-align:center}
    .reviews-wrap{display:flex;flex-direction:column;align-items:center;margin-top:42px;gap:26px}
    .rating-img img{width:270px}
    .review-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
    .btn-teal{
      background:linear-gradient(135deg,#00b4d8,#0090ab);color:#fff;
      padding:13px 28px;border-radius:100px;font-weight:700;font-size:.9rem;
      box-shadow:0 6px 20px rgba(0,180,216,.3);transition:transform .2s;
      display:inline-flex;align-items:center;gap:8px;
    }
    .btn-teal:hover{transform:translateY(-2px)}
    .btn-pink{
      background:linear-gradient(135deg,#ff477e,#c52050);color:#fff;
      padding:13px 28px;border-radius:100px;font-weight:700;font-size:.9rem;
      box-shadow:0 6px 20px rgba(255,71,126,.3);transition:transform .2s;
      display:inline-flex;align-items:center;gap:8px;
    }
    .btn-pink:hover{transform:translateY(-2px)}

    /* ── CONTACT / MAP ── */
    #contact{background:var(--gd)}
    .contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:start}
    #contact .eyebrow{color:var(--glf);background:rgba(240,192,96,.1);border-color:rgba(240,192,96,.3)}
    #contact .s-title{color:var(--glf)}
    #contact .s-title::after{background:linear-gradient(90deg,var(--glf),transparent)}
    .cinfo-list{margin-top:26px;display:flex;flex-direction:column;gap:16px}
    .cinfo-item{display:flex;align-items:flex-start;gap:13px}
    .cinfo-item .ic{
      width:40px;height:40px;border-radius:10px;flex-shrink:0;
      background:rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;
    }
    .cinfo-item .ic i{color:var(--glf);font-size:.95rem}
    .cinfo-item strong{color:#fff;font-size:.84rem;display:block;margin-bottom:2px}
    .cinfo-item p{color:rgba(255,255,255,.65);font-size:.86rem;line-height:1.6}
    .cinfo-item a{color:var(--glf)}
    .social-row{display:flex;gap:10px;margin-top:26px}
    .soc-btn{
      width:40px;height:40px;border-radius:50%;
      background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
      transition:background .2s,transform .2s;
    }
    .soc-btn i{color:#fff;font-size:.95rem}
    .soc-btn:hover{background:var(--gold);transform:translateY(-3px)}
    .map-wrap{border-radius:var(--r);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35);height:360px}
    .map-wrap iframe{width:100%;height:100%;border:0}

    /* ═══════════════════════════════════════
       FOOTER — Hyde-Out café inspired
       Deep dark-green luxury with gold accents
    ═══════════════════════════════════════ */
    /* ── FOOTER ── */
 footer {
  background: #060F09;
  padding: 52px 5% 28px;
  text-align: center;
}
.footer-powered { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.footer-powered span { font-size: 0.7rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.12em; }
.footer-powered img { height: 38px; width: auto; object-fit: contain; vertical-align: middle; }
.footer-links { display: flex; justify-content: center; gap: 28px; margin-bottom: 28px; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,.45); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--sun); }
.footer-section-label { font-size: 0.68rem; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px; }
.footer-social { display: flex; justify-content: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.65); font-size: 0.95rem; text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
}
.footer-social a:hover { transform: translateY(-3px); }
.footer-social a:nth-child(1):hover { background: #3b5999; border-color: #3b5999; color: #fff; }
.footer-social a:nth-child(2):hover { background: #1d9bf0; border-color: #1d9bf0; color: #fff; }
.footer-social a:nth-child(3):hover { background: #e4405f; border-color: #e4405f; color: #fff; }
.footer-social a:nth-child(4):hover { background: #ff0000; border-color: #ff0000; color: #fff; }
.footer-social a.wa-icon { background: rgba(37,211,102,0.15); border-color: rgba(37,211,102,0.3); color: #25D366; }
.footer-social a.wa-icon:hover { background: #25D366; border-color: #25D366; color: #fff; }
.footer-share-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; }
.fsr-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem; text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.fsr-btn:hover { transform: translateY(-3px) scale(1.08); box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.fsr-wa  { background: #25D366; }
.fsr-fb  { background: #3b5999; }
.fsr-tw  { background: #1d9bf0; }
.fsr-li  { background: #0077b5; }
.fsr-em  { background: #e8593f; }
.fsr-sm  { background: #4c53ef; }
.footer-bottom { font-size: 0.78rem; color: rgba(255,255,255,.28); border-top: 1px solid rgba(255,255,255,.07); padding-top: 20px; }



    /* ═══════════════════════════════════════
       FLOATING ACTION BUTTONS
       Left: Share (top) → WhatsApp (bottom)
       Right: Scroll-to-top only
    ═══════════════════════════════════════ */

    /* shared base */
    .fab {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: transform .25s, box-shadow .25s;
      flex-shrink: 0;
    }

    /* LEFT: WhatsApp only */
    .fab-wa {
      position: fixed;
      left: 22px;
      bottom: 26px;
      z-index: 999;
      width: 58px;
      height: 58px;
      background: linear-gradient(135deg,#25d366,#1da851);
      color: #fff;
      font-size: 1.75rem;
      box-shadow: 0 6px 22px rgba(37,211,102,.48);
      animation: waPulse 2.8s ease-in-out infinite;
    }
    .fab-wa:hover {
      transform: scale(1.1);
      animation-play-state: paused;
    }
    @keyframes waPulse {
      0%,100% { box-shadow: 0 6px 22px rgba(37,211,102,.48); }
      50%      { box-shadow: 0 8px 34px rgba(37,211,102,.78); }
    }

    /* RIGHT stack: Share (top) + Scroll-to-top (bottom) */
    .fab-right {
      position: fixed;
      right: 22px;
      bottom: 26px;
      z-index: 999;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Share button */
    .fab-share {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, var(--gs), var(--gd));
      color: #fff;
      font-size: 1.1rem;
      box-shadow: 0 4px 18px rgba(30,107,40,.42);
    }
    .fab-share:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 26px rgba(30,107,40,.58);
    }
    .fab-share.active {
      background: linear-gradient(135deg, var(--gold), #8a5010);
      transform: translateY(-3px);
      box-shadow: 0 8px 26px rgba(200,146,42,.55);
    }

    /* Scroll to top */
    #back-top {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg,var(--gold),#8a5010);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: .95rem;
      box-shadow: 0 4px 16px rgba(200,146,42,.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s, transform .2s;
      cursor: pointer;
      border: none;
    }
    #back-top.visible { opacity: 1; pointer-events: all; }
    #back-top:hover   { transform: translateY(-4px); }

    /* Share pop-up panel — anchored to right side */
    .share-pop {
      position: fixed;
      right: 22px;
      /* sits above: 26(bottom) + 48(scroll-top) + 12(gap) + 50(share) + 16(breathing room) */
      bottom: 164px;
      z-index: 998;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px);
      transition: opacity .25s ease, transform .25s ease;
    }
    .share-pop.open {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0);
    }

    .sp-pill {
      display: flex;
      align-items: center;
      gap: 9px;
      background: rgba(4,15,6,.88);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(200,146,42,.22);
      border-radius: 100px;
      padding: 8px 14px 8px 10px;
      color: rgba(255,255,255,.88);
      font-family: 'Outfit', sans-serif;
      font-size: .78rem;
      font-weight: 600;
      white-space: nowrap;
      transition: transform .2s, background .2s, border-color .2s;
      box-shadow: 0 4px 16px rgba(0,0,0,.22);
    }
    .sp-pill:hover {
      transform: translateX(-5px);   /* slides left when anchored right */
      background: rgba(13,51,24,.96);
      border-color: rgba(200,146,42,.5);
    }
    .sp-pill i {
      font-size: .95rem;
      width: 18px;
      text-align: center;
    }

    /* ═══════════════════════════════════════
       CERTIFICATE LIGHTBOX
    ═══════════════════════════════════════ */
    .lb-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      background: rgba(4, 15, 6, 0.96);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }
    .lb-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .lb-img-wrap {
      max-width: min(90vw, 860px);
      max-height: 88vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .lb-img-wrap img {
      max-width: 100%;
      max-height: 88vh;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 30px 80px rgba(0,0,0,.7);
      border: 1px solid rgba(200,146,42,.25);
      transition: transform .3s ease;
      display: block;
    }

    /* Close button */
    .lb-close {
      position: fixed;
      top: 18px;
      right: 22px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 1px solid rgba(200,146,42,.35);
      background: rgba(4,15,6,.75);
      color: rgba(255,255,255,.85);
      font-size: 1.5rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s, transform .2s, color .2s;
      z-index: 2001;
    }
    .lb-close:hover {
      background: var(--gold);
      color: var(--drk);
      transform: rotate(90deg);
    }

    /* Prev / Next arrows */
    .lb-nav {
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 1px solid rgba(200,146,42,.3);
      background: rgba(4,15,6,.7);
      color: rgba(255,255,255,.8);
      font-size: 1.8rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s, color .2s, transform .2s;
      z-index: 2001;
    }
    .lb-prev { left: 16px; }
    .lb-next { right: 16px; }
    .lb-nav:hover {
      background: var(--gold);
      color: var(--drk);
      transform: translateY(-50%) scale(1.1);
    }

    /* Counter badge */
    .lb-counter {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: .78rem;
      font-weight: 600;
      color: rgba(255,255,255,.5);
      letter-spacing: .08em;
      z-index: 2001;
    }


    /* ── REVEAL ── */
    .reveal{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
    .reveal.visible{opacity:1;transform:none}

    /* ── RESPONSIVE ── */
    @media(max-width:960px){
      .hero-inner{grid-template-columns:1fr;padding:130px 24px 70px;text-align:center}
      .hero-content{max-width:none;margin:0 auto}
      .hero-desc{margin-left:auto;margin-right:auto}
      .hero-btns,.hero-trust{justify-content:center}
      .hero-visual{margin-top:44px}
      .cup-cluster{width:clamp(220px,62vw,360px)}
      #hero::before,#hero::after{display:none}
      .about-grid,.contact-grid{grid-template-columns:1fr}
      .about-img-wrap{order:-1}
      .about-badge{right:10px;bottom:-12px}
    }
    @media(max-width:520px){
      .trust-div{display:none}
    }
    @media(max-width:640px){
      .gallery-masonry{grid-template-columns:1fr 1fr;grid-template-rows:auto}
      .g-item:nth-child(1){grid-column:span 2;grid-row:span 1}
      .services-grid{grid-template-columns:1fr}
      .stat-row{grid-template-columns:1fr 1fr}
      .section{padding:60px 0}
      .hero-tagline{font-size:1.9rem}

      /* compact footer on mobile */
      #site-footer { padding: 2.6rem 1.2rem 1.8rem; }
      .f-share-icon { width: 44px; height: 44px; font-size: .95rem; }
      .footer-share-row { gap: .7rem; }

      /* compact FABs on mobile */
      .fab-wa    { left: 14px; bottom: 18px; width: 52px; height: 52px; font-size: 1.55rem; }
      .fab-right { right: 14px; bottom: 18px; gap: 10px; }
      .fab-share { width: 44px; height: 44px; font-size: 1rem; }
      #back-top  { width: 42px; height: 42px; font-size: .88rem; }
      .share-pop { right: 14px; bottom: 146px; }
      .lb-nav    { width: 40px; height: 40px; font-size: 1.4rem; }
      .lb-prev   { left: 8px; }
      .lb-next   { right: 8px; }
    }
    @media(max-width:400px){
      .gallery-masonry{grid-template-columns:1fr}
      .g-item:nth-child(1){grid-column:span 1}
    }