:root{
  --ink:#0a1e17; --bg:#eaf7f0; --bg2:#f8fffb;
  --surface:#ffffff; --text:#0b1f17; --muted:#2d4f45;
  --brand:#0e6f5a; --brand-2:#169d82; --gold:#e3b341; --gold-2:#b78908;
  --border:#cfe7db; --card:#e8fbf1; --shadow: 0 16px 50px rgba(8,30,23,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,var(--bg),var(--bg2))}
img{max-width:100%;height:auto;display:block}
.container{max-width:1120px;margin:auto;padding:0 1rem}
h1,h2,h3{color:var(--brand);letter-spacing:.2px}

/* Scroll progress bar */
#scrollbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2));z-index:1000}

/* Header: glass + shrink */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.75);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--border);z-index:900;transition:all .25s ease}
.site-header.compact{box-shadow:0 6px 24px rgba(0,0,0,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.brand-text{font-weight:900;letter-spacing:.2px}
.menu{display:flex;gap:1rem;align-items:center}
.menu a{color:inherit;text-decoration:none;padding:.55rem .9rem;border-radius:999px;position:relative}
.menu a.active{background:rgba(227,179,65,.12);border:1px solid color-mix(in srgb, var(--gold) 50%, transparent)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--text);margin:4px 0;transition:.2s}

/* Buttons */
.btn{display:inline-block;border:2px solid var(--gold);padding:.6rem 1.05rem;border-radius:999px;text-decoration:none;font-weight:800;letter-spacing:.2px;transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(0,0,0,.12)}
.btn-outline{background:transparent}
.btn-solid{background:linear-gradient(90deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff}
/* Shimmer effect */
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.35) 30%,transparent 45%);transform:translateX(-120%);transition:transform .8s ease}
.shimmer:hover::after{transform:translateX(120%)}

.gold{color:var(--gold)}
.gold-glow{color:var(--gold);text-shadow:0 0 22px rgba(227,179,65,.45)}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f2fff8,var(--card))}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:4rem 0}
.hero h1{font-size:clamp(34px,5vw,56px);line-height:1.05;margin:.15em 0 0}
.hero p{color:var(--muted)}
.badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.chip{display:inline-block;border:2px dotted var(--gold);padding:.6rem 1.05rem;border-radius:999px;text-decoration:none;font-weight:800;letter-spacing:.2px;transition:transform .15s ease, box-shadow .15s ease}
.chip:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(0,0,0,.12)}
.chip-outline{background:transparent}
.chip-solid{background:linear-gradient(90deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff}
.blob{position:absolute;inset:-20% -30% auto -30%;height:120%;background:radial-gradient(40% 40% at 50% 30%, rgba(22,157,130,.18), transparent 60%);filter:blur(40px);animation:blob 12s ease-in-out infinite alternate;pointer-events:none}
@keyframes blob{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-18px) scale(1.03)}}
.divider.bottom{position:absolute;left:0;right:0;bottom:-1px;height:40px;background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.06));opacity:.18}
/* === Video hero (SASAN-inspired) === */
.hero.video-hero{background:#000; min-height:64vh; display:grid; align-items:end; position:relative}
.hero.video-hero .bg-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.06) brightness(.95)}
.hero.video-hero .overlay{position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.6) 100%),
    radial-gradient(40% 40% at 50% 10%, rgba(22,157,130,.25), transparent 60%);
  pointer-events:none}
.hero.video-hero .hero-inner{position:relative; padding:7rem 0 3rem}
.hero.video-hero h1{color:#fff}
.hero.video-hero .lead{color:#e8f7ef}
.hero.video-hero .chip{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.35)}
.hero.video-hero .btn-outline{border-color:#fff; color:#fff}
.hero.video-hero .btn-outline:hover{box-shadow:0 0 0 4px rgba(255,255,255,.25)}

/* Section titles */
.section-title{margin:.25rem 0 1rem}
.section-subtitle{margin:0 1rem 1rem; color:var(--muted); text-align:center}

/* === Slide-in animations === */
.slide-up{opacity:0; transform:translateY(24px)}
.slide-left{opacity:0; transform:translateX(-28px)}
.slide-right{opacity:0; transform:translateX(28px)}
.in-view{opacity:1; transform:none; transition:transform .7s cubic-bezier(.2,.65,.2,1), opacity .7s ease}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}
.delay-3{transition-delay:.36s}

/* === Marquee strip === */
.band.brand-lite{background:linear-gradient(180deg,var(--bg),#fff)}
.marquee{overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:rgba(255,255,255,.7); backdrop-filter:saturate(160%) blur(6px)}
.marquee .track{display:flex; gap:2.5rem; align-items:center; min-height:76px; padding:0 1rem; animation:marquee 22s linear infinite}
.marquee img{height:34px; width:auto; opacity:.8; filter:grayscale(1); transition:opacity .2s ease, filter .2s ease}
.marquee img:hover{opacity:1; filter:grayscale(0)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Slightly stronger gold for outlines on light surfaces */
.gold-outline{border-color:var(--gold)!important}

/* Tiles / Cards */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1.1rem;box-shadow:var(--shadow);transform-style:preserve-3d;transition:transform .2s ease, box-shadow .2s ease}
.tile:hover{box-shadow:0 20px 50px rgba(0,0,0,.18)}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:1rem;box-shadow:var(--shadow)}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2.2rem 0}
.stat-card{background:linear-gradient(180deg,#fff, #f9fbfa);border:1px solid var(--border);border-radius:16px;padding:1rem;text-align:center;box-shadow:var(--shadow)}
.stat-card .num{font-size:34px;font-weight:900;color:var(--brand)}

/* Bands / angled section */
.band{padding:2.2rem 0;margin:2.2rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.band-angled{position:relative;background:linear-gradient(180deg,#0f172a,#0b1422);color:#d6e2ea}
.band-angled::before{content:"";position:absolute;inset:-40px 0 auto 0;height:40px;background:linear-gradient(180deg,transparent,#0f172a)}
.band-angled .stat-card{background:#0b1220;border-color:#1e293b;color:#e5e7eb}

/* Footer */
.site-footer{margin-top:3rem;border-top:1px solid var(--border);padding:2rem 0;background:rgba(255,255,255,.7);backdrop-filter:saturate(160%) blur(10px)}
.small{font-size:.875rem;color:var(--muted)}

/* Forms */
.field{margin:.9rem 0}
.field label{display:block;font-weight:800;margin-bottom:.25rem}
.field input,.field select,.field textarea{width:100%;padding:.75rem .8rem;border:1.5px solid var(--border);border-radius:12px;background:var(--surface)}

/* Gallery + Lightbox */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0}
.gallery-item{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;cursor:zoom-in;box-shadow:var(--shadow);transform-style:preserve-3d}
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .25s ease}
.gallery-item:hover img{transform:scale(1.03)}
.gallery-item figcaption{padding:.5rem .75rem;font-weight:700;font-size:.95rem;background:var(--surface);border-top:1px solid var(--border)}
.lightbox{width:min(92vw,1100px);border:none;padding:0;background:transparent}
.lightbox::backdrop{background:rgba(0,0,0,.6)}
.lightbox img{display:block;max-width:100%;height:auto;border-radius:12px}
.lightbox-close{position:absolute;top:1rem;right:1rem;font-size:28px;line-height:1;border:2px solid var(--gold);background:#000;color:#fff;width:42px;height:42px;border-radius:999px;cursor:pointer}
.lightbox p{color:#fff;margin:.5rem 0 0;text-align:center}

/* Reveal + stagger */
.reveal-up{opacity:0;transform:translateY(18px)}
.reveal-in{opacity:1;transform:none;transition:transform .7s cubic-bezier(.2,.65,.2,1), opacity .7s ease}
.reveal-in[data-stagger]{transition-delay: calc(.06s * attr(data-stagger number))}
@media (prefers-reduced-motion: reduce){.reveal-up{opacity:1;transform:none}}

/* Float */
.float{will-change:transform;animation:float 7s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

/* Responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .menu{position:fixed;inset:74px 0 auto 0;background:rgba(255,255,255,.95);border-bottom:1px solid var(--border);padding:1rem;display:none;flex-direction:column}
  .menu.show{display:flex}
  .nav-toggle{display:block}
}
@media (max-width:560px){
  .gallery-grid{grid-template-columns:1fr}
}

/* Page fade transitions */
html.is-exiting body{ opacity:0; transition:opacity .25s ease }
body{ opacity:0; animation:page-in .35s ease forwards }
@keyframes page-in{ from{opacity:0} to{opacity:1} }

/* FAQ accordion */
.accordion{border:1px solid var(--border);border-radius:12px;margin:.5rem 0;background:#fff}
.accordion > summary{cursor:pointer;padding:.8rem 1rem;font-weight:800;list-style:none}
.ac-body{padding:.8rem 1rem;border-top:1px dashed var(--border)}
/* Contact layout */
.contact-grid{
  display:grid; grid-template-columns:1.1fr 1fr; gap:1.25rem; align-items:start;
}
@media (max-width: 920px){ .contact-grid{ grid-template-columns:1fr } }
.card.soft{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1rem; box-shadow:var(--shadow) }
.card.soft h3{ margin:.2rem 0 .35rem }
.card.soft .big{ font-size:1.15rem; font-weight:800 }
.link{ text-decoration:none; border-bottom:1px dashed var(--gold); }

/* Map block */
.map-card{ position:relative; border:2px solid var(--gold); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 12px 28px rgba(0,0,0,.08) }
.leaflet-map{ width:100%; height: clamp(320px, 46vh, 520px); }
.map-activate{
  position:absolute; inset:auto 12px 12px auto; z-index:10;
  border:2px solid var(--gold); background:rgba(255,255,255,.9); color:var(--text);
  padding:.45rem .75rem; border-radius:999px; font-weight:800; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.leaflet-map.interactive + .map-activate{ opacity:.35 }
.map-actions{ margin-top:.75rem; display:flex; gap:.5rem; flex-wrap:wrap }

/* Footer brand left */
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1rem; align-items:start }
.footer-brand{ display:flex; gap:.75rem; align-items:flex-start }
.footer-brand img{ flex:0 0 auto }
.footer-col h4{ margin:.2rem 0 .35rem }
@media (max-width: 920px){ .footer-grid{ grid-template-columns:1fr } }

/* Link tiles */
.link-tile{ text-decoration:none; color:inherit }
.link-tile h3{ margin:.2rem 0 }

/* Timeline */
.timeline{list-style:none;padding:0;margin:0;border-left:2px solid var(--border);padding-left:1rem}
.timeline li{position:relative;margin:.75rem 0}
.t-dot{position:absolute;left:-11px;top:.35rem;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px #fff}
.timeline h4{margin:.1rem 0 .25rem}

/* Badges grid */
.badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.badge-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1rem;box-shadow:var(--shadow)}
.badge{display:inline-block;background:#fff5d5;border:1px dashed var(--gold);border-radius:999px;padding:.25rem .6rem;font-weight:800}
@media (max-width:900px){ .badges-grid{grid-template-columns:1fr} }

/* Footer brand-left layout (shared) */
.footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1rem; align-items:start }
.footer-brand{ display:flex; gap:.75rem; align-items:flex-start }
.footer-col h4{ margin:.2rem 0 .35rem }
@media (max-width: 920px){ .footer-grid{ grid-template-columns:1fr } }
/* === Leadership grid === */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:1100px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.team-grid{grid-template-columns:1fr}}
.team-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:1rem;
  text-align:center;box-shadow:var(--shadow)
}
.team-card .avatar{width:120px;height:120px;margin:.25rem auto .6rem;overflow:hidden;border-radius:999px;border:2px solid var(--gold)}
.team-card .avatar img{width:100%;height:100%;object-fit:cover}
.team-card h3{margin:.15rem 0 .1rem}
.team-card .role{color:var(--brand);font-weight:800;margin:0 0 .25rem}
.team-card .bio{color:var(--muted);font-size:.95rem}

/* === Group companies strip === */
.company-strip{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:820px){.company-strip{grid-template-columns:1fr}}
.company-card{
  display:flex;gap:.9rem;align-items:center;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--border);border-radius:16px;padding:1rem;box-shadow:var(--shadow)
}
.company-card img{width:72px;height:72px;object-fit:contain;border-radius:12px;background:#f8faf9;border:1px solid var(--border)}
.company-meta h3{margin:.1rem 0}
.company-meta .uen{font-weight:800;margin:.1rem 0 .2rem}


/* === MERGE ADDITIONS (keeps your theme, adds our features) === */

/* Brand in CAPS */
.brand-text{ text-transform:uppercase }

/* Green CONTACT button + header actions (phone/whatsapp) */
.btn-green{ background:#169d82; color:#fff !important; border:2px solid var(--gold) }
.btn-green:hover{ transform:translateY(-1px); box-shadow:0 8px 26px rgba(22,157,130,.35) }
.header-actions{ display:flex; align-items:center; gap:.5rem; margin-left:.5rem }

/* Hero: 3-image slider */
.hero-slider{position:relative; background:#000; min-height:72vh; display:grid; align-items:end; overflow:hidden}
.hero-slider .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.76) 100%)}
.slider{position:absolute; inset:0; overflow:hidden}
.slides{position:absolute; inset:0}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .9s ease, transform 1.4s cubic-bezier(.2,.7,0,1); transform:scale(1.04)}
.slide.is-active{opacity:1; transform:scale(1)}
.slide img{width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.05) brightness(.9)}
.s-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; border:0; background:rgba(255,255,255,.18); color:#fff; font-size:34px; width:46px; height:46px; border-radius:999px; cursor:pointer; backdrop-filter:blur(6px)}
.s-nav.prev{left:14px} .s-nav.next{right:14px}
.dots{position:absolute; bottom:14px; left:0; right:0; display:flex; gap:8px; justify-content:center; z-index:3}
.dot{width:9px; height:9px; border-radius:999px; border:2px solid rgba(255,255,255,.85); background:transparent; cursor:pointer}
.dot.is-active{background:#fff}
.hero-slider .hero-inner{position:relative; padding:7rem 0 3rem}
.hero-slider h1, .hero-slider p, .hero-slider .btn, .hero-slider .chip{color:#fff}
.cta-row{display:flex; flex-direction:column; gap:.4rem; align-items:flex-start}
.cta-row .badges{margin-top:.35rem}

/* CTA Ribbon (Need a dependable partner) */
.ribbon-strong{display:grid; grid-template-columns:1.4fr .8fr; gap:1rem; align-items:center; border:2px solid var(--gold); border-radius:20px; padding:1.1rem 1rem; background:linear-gradient(180deg,#fffefd,#fff6da)}
.ribbon-strong .r-points{margin:.25rem 0 0; padding-left:1.1rem}
.ribbon-strong .r-cta{display:flex; gap:.6rem; justify-content:flex-end}
@media (max-width:900px){ .ribbon-strong{grid-template-columns:1fr} .ribbon-strong .r-cta{justify-content:flex-start}}

/* Footer (left column helpers) */
.footer-left-title{ font-weight:900; letter-spacing:.6px; font-size:1.05rem; align-items:justify}
.slogan{ font-style:italic; color:var(--gold-2); margin:.25rem 0 .5rem; font-weight:800 }
.co-name{ font-weight:800; letter-spacing:.4px }
.uen.small{ font-size:.85rem; color:var(--muted); margin:0 0 .4rem }


/* Helpers used on About/Services pages */
.grid-2{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.25rem; align-items:start }
@media (max-width: 920px){ .grid-2{ grid-template-columns:1fr } }
.check{ margin:.5rem 0 0; padding-left:1.1rem }
.check li{ margin:.25rem 0 }
.check li::marker{ color:var(--gold) }
.bullets{ padding-left:1.1rem }
.bullets li{ margin:.25rem 0 }
.band-dark{ background:linear-gradient(180deg,#0f172a,#0b1422); color:#d6e2ea; border-top:0; border-bottom:0 }
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:start }
@media (max-width: 920px){ .split{ grid-template-columns:1fr } }
.steps{ counter-reset: s; list-style:none; padding:0; margin:.5rem 0 0 }
.steps li{ counter-increment:s; margin:.35rem 0; padding-left:1.6rem; position:relative }
.steps li::before{ content: counter(s) "."; position:absolute; left:0; top:0; font-weight:900; color:var(--gold) }
.link-card{ text-decoration:none; color:inherit }
.link-card:hover{ transform:translateY(-2px); box-shadow:0 22px 60px rgba(0,0,0,.16) }
.page{ padding: 1.2rem 0 }

/* ================== MOTION UPGRADE (global) ================== */
/* Softer default easing */
:root{ --ease-snap: cubic-bezier(.2,.65,.2,1); --ease-slow: cubic-bezier(.16,.84,.44,1) }

/* Reveal/slide: stronger interpolation & GPU hint */
.reveal-in{ will-change: transform, opacity; transition: transform .7s var(--ease-snap), opacity .7s ease }
.in-view{  will-change: transform, opacity; transition: transform .7s var(--ease-snap), opacity .7s ease }

/* Cross-browser stagger (JS sets inline delays; this is a fallback) */
[data-stagger]{ transition-delay: .06s }

/* Ken Burns on active hero slide (duration follows JS interval) */
.hero-slider .slide.is-active img{
  animation: kb var(--kb, 3000ms) var(--ease-slow) both;
  transform-origin:center;
}
@keyframes kb{ from{transform:scale(1)} to{transform:scale(1.06)} }

/* Cards/tiles: subtle lift + depth */
.tile, .card.soft, .panel{ transition: transform .25s var(--ease-snap), box-shadow .25s ease }
.tile:hover, .card.soft:hover, .panel:hover{ transform: translateY(-3px); box-shadow: 0 20px 60px rgba(0,0,0,.16) }

/* 3D Tilt polish (JS drives the transform) */
.tilt{ transform-style: preserve-3d; perspective: 900px }
.tilt::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; 
  box-shadow: inset 0 0 0 0 rgba(227,179,65,.0); transition: box-shadow .25s ease }
.tilt:hover::after{ box-shadow: inset 0 0 0 1px rgba(227,179,65,.25) }

/* Buttons: tiny press/release + shimmer you already have */
.btn:active{ transform: translateY(0) scale(.98) }

/* Headings underline sweep (optional utility) */
.underline-sweep{
  background: linear-gradient(transparent 78%, color-mix(in srgb, var(--gold) 55%, transparent) 0) no-repeat;
  background-size: 0% 100%; transition: background-size .6s var(--ease-slow)
}
.underline-sweep.in-view{ background-size: 100% 100% }

/* Page transitions via View Transitions API (progressive) */
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.28s; }
::view-transition-old(root){ animation-name: vt-fade-out; }
::view-transition-new(root){ animation-name: vt-fade-in; }
@keyframes vt-fade-out{ from{opacity:1} to{opacity:0} }
@keyframes vt-fade-in { from{opacity:.92; filter:saturate(.96) blur(.2px)} to{opacity:1; filter:none} }

/* Hero parallax hint (JS sets transform) */
.hero .hero-inner, .hero .overlay{ will-change: transform }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-in, .in-view{ transition: none !important }
  .hero-slider .slide.is-active img{ animation: none !important }
  ::view-transition-old(root), ::view-transition-new(root){ animation: none !important }
}

/* Google Maps embed (RMR-style) */
.map-embed{
  width:100%;
  height: clamp(320px, 46vh, 520px);
  border:0;
  /* subtle polish so it blends with your theme */
  filter: grayscale(.06) saturate(1.05) contrast(1.02);
}

/* Icon buttons in header */
.header-actions{ display:flex; gap:.5rem; align-items:center }
.icon-btn{
  --size: 42px;
  width:var(--size); height:var(--size);
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--gold);
  border-radius:999px;
  background:linear-gradient(180deg,#ffffff,#f5fff9);
  color:var(--brand);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, filter .2s ease;
}
.icon-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(0,0,0,.16) }
.icon-btn:active{ transform:translateY(0) scale(.98) }
.icon-btn .ic{ width:20px; height:20px; display:block }

/* Specific looks */
.phone-btn{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;
}
.wa-btn{
  background:#25D366;
  color:#fff;
}

/* CONTACT button: green with gold outline */
.btn-green{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  color:#fff;
  border-color:var(--gold);
}

/* Accessibility helper */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Mobile fine-tune */
@media (max-width: 900px){
  .icon-btn{ --size: 38px }
}

/* Normalize address to match site body text */
address {
  font-style: normal;      /* remove browser italics */
  font-family: inherit;    /* use the same font as body */
  font-weight: 400;
  color: var(--text);
  line-height: 1.6;
  text-transform: none;    /* avoid accidental all-caps */
  letter-spacing: 0;
  margin: .25rem 0 0;
}

/* Common places we show addresses */
.footer-mid address,
.contact-grid address {
  white-space: normal;     /* keep <br> layout as-is */
  align-items:justify;
}