/* ============================================================
   Royal Associates — Custom Styles
   Brand tokens + components. Light theme, navy + amber.
   ============================================================ */

/* ---- Safety net: prevent horizontal overflow site-wide ---- */
*{ box-sizing: border-box; }
img, table, iframe, .card, .lead-card{ max-width: 100%; }
html, body{ overflow-x: hidden; }

:root{
  --ra-navy:        #1E3A5F;
  --ra-navy-dark:   #122740;
  --ra-amber:       #F2A20C;
  --ra-amber-dark:  #d6860a;
  --ra-light:       #F4F7FA;
  --ra-white:       #FFFFFF;
  --ra-text:        #1f2933;
  --ra-muted:       #5b6b7b;
  --ra-border:      #e2e8f0;
  --ra-wa:          #25D366;

  --ff-head: 'Montserrat', sans-serif;
  --ff-sub:  'Raleway', sans-serif;
  --ff-body: 'Lato', sans-serif;

  --radius: 14px;
  --shadow-sm: 0 2px 12px rgba(18,39,64,.08);
  --shadow-md: 0 14px 40px rgba(18,39,64,.14);
}

/* ---- Base ---- */
*{ scroll-behavior:smooth; }
body{
  background: var(--ra-light);
  color: var(--ra-text);
  font-family: var(--ff-body);
  overflow-x:hidden;
  padding-bottom: 0;
}

h1,h2,h3,h4,h5{ font-family: var(--ff-head); color: var(--ra-navy); font-weight:700; }
/* Never let a long word/heading force horizontal overflow on small screens. */
h1,h2,h3,h4,h5,.section-title,.hero h1{ overflow-wrap:anywhere; word-break:break-word; }
a{ text-decoration:none; }
p{ line-height:1.7; color: var(--ra-text); }
img{ max-width:100%; }
section{ position:relative; }

.bg-light-alt{ background: var(--ra-light); }
.bg-navy{ background: var(--ra-navy)!important; color:#fff; }
.bg-navy-dark{ background: var(--ra-navy-dark)!important; color:#fff; }
.text-amber{ color: var(--ra-amber)!important; }
.text-navy{ color: var(--ra-navy)!important; }
.text-muted-ra{ color: var(--ra-muted)!important; }

.section-pad{ padding: 4.5rem 0; }
@media (max-width:767.98px){ .section-pad{ padding:3rem 0; } }

/* ---- Eyebrow + section headings ---- */
.eyebrow{
  font-family: var(--ff-sub);
  text-transform: uppercase;
  letter-spacing:.12em;
  font-weight:600;
  font-size:.8rem;
  color: var(--ra-amber);
  display:inline-block;
  margin-bottom:.5rem;
}
.section-title{ font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom:.75rem; }
.section-sub{ color: var(--ra-muted); max-width:680px; }
.title-divider{ width:64px; height:4px; background:var(--ra-amber); border-radius:4px; margin:.75rem 0 1.25rem; }
.text-center .title-divider{ margin-left:auto; margin-right:auto; }

/* ---- Buttons ---- */
.btn{ font-family: var(--ff-sub); font-weight:600; border-radius:10px; padding:.6rem 1.3rem; transition:.2s; }
.btn-amber{ background: var(--ra-amber); color:#fff; border:none; }
.btn-amber:hover{ background: var(--ra-amber-dark); color:#fff; transform:translateY(-1px); }
.btn-navy{ background: var(--ra-navy); color:#fff; border:none; }
.btn-navy:hover{ background: var(--ra-navy-dark); color:#fff; transform:translateY(-1px); }
.btn-outline-navy{ border:2px solid var(--ra-navy); color:var(--ra-navy); background:#fff; }
.btn-outline-navy:hover{ background:var(--ra-navy); color:#fff; }
.btn-outline-light{ border:2px solid rgba(255,255,255,.7); color:#fff; background:transparent; }
.btn-outline-light:hover{ background:#fff; color:var(--ra-navy); }
.btn-wa{ background: var(--ra-wa); color:#fff; border:none; }
.btn-wa:hover{ background:#1da851; color:#fff; }

/* ---- Badges / pills ---- */
.badge-amber{ background:var(--ra-amber); color:#fff; font-family:var(--ff-sub); }
.badge-status{ font-family:var(--ff-sub); font-weight:600; padding:.4em .8em; border-radius:30px; }
.status-ongoing{ background:#fff3df; color:var(--ra-amber-dark); }
.status-completed{ background:#e3f4ea; color:#1da851; }
.status-upcoming{ background:#e7eefb; color:var(--ra-navy); }
.pill{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#fff; border:1px solid var(--ra-border); color:var(--ra-muted);
  border-radius:30px; padding:.45rem .9rem; font-family:var(--ff-sub); font-size:.85rem; font-weight:500;
}
.pill i{ color:var(--ra-amber); }

/* ============================================================
   UTILITY BAR + HEADER
   ============================================================ */
.utility-bar{ background:var(--ra-navy-dark); color:#cdd7e3; font-size:.85rem; font-family:var(--ff-sub); }
.utility-bar a{ color:#cdd7e3; }
.utility-bar a:hover{ color:var(--ra-amber); }
.utility-bar .social a{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; }

.navbar{ background:#fff; box-shadow:0 1px 0 rgba(18,39,64,.06); padding:.85rem 0; transition:.25s; }
.navbar.scrolled{ box-shadow:0 6px 24px rgba(18,39,64,.10); padding:.5rem 0; }
.navbar-brand{ display:flex; align-items:center; padding:0; margin-right:1.5rem; }
.brand-logo-img{ height:46px; width:auto; }
@media (max-width:991.98px){ .brand-logo-img{ height:40px; } }
.footer-logo{ height:48px; width:auto; margin-bottom:1rem; }
/* logo.png is a dark/navy logo — it blends into the navy footer, so render it
   white. For a brand-coloured mark, drop a light version at assets/img/logo-white.png
   and swap the <img src> in include/footer.php, then remove this filter. */
.footer-logo{ filter: brightness(0) invert(1); }
.brand-wordmark{ font-family:var(--ff-head); font-weight:800; font-size:1.4rem; letter-spacing:.02em; color:var(--ra-navy); line-height:1; white-space:nowrap; }
.brand-wordmark .brand-accent{ color:var(--ra-amber); margin-left:.18em; }
.navbar .nav-link{ font-family:var(--ff-sub); font-weight:600; font-size:.95rem; color:var(--ra-text); padding:.5rem .7rem!important; white-space:nowrap; }
.navbar .nav-link:hover,.navbar .nav-link.active{ color:var(--ra-amber); }
.navbar .navbar-nav{ align-items:center; }
@media (max-width:1199px){ .navbar .nav-link{ font-size:.9rem; padding:.5rem .55rem!important; } }
.navbar .dropdown-menu{ border:none; box-shadow:var(--shadow-md); border-radius:12px; padding:.5rem; }
.navbar .dropdown-item{ font-family:var(--ff-sub); border-radius:8px; padding:.5rem .8rem; }
.navbar .dropdown-item:hover{ background:var(--ra-light); color:var(--ra-amber); }

/* ---- Mobile bottom bar ---- */
.mobile-bottom-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:1040;
  display:flex; box-shadow:0 -2px 12px rgba(18,39,64,.15);
}
.mobile-bottom-bar a{
  flex:1; text-align:center; padding:.65rem .25rem; color:#fff;
  font-family:var(--ff-sub); font-weight:600; font-size:.8rem;
}
.mobile-bottom-bar a i{ display:block; font-size:1.1rem; margin-bottom:.15rem; }
.mbb-call{ background:var(--ra-navy); }
.mbb-wa{ background:var(--ra-wa); }
.mbb-inquire{ background:var(--ra-amber); }

/* ---- Floating WhatsApp bubble ---- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:1035;
  width:56px; height:56px; border-radius:50%;
  background:var(--ra-wa); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; box-shadow:0 6px 20px rgba(37,211,102,.5);
  animation: wa-pulse 2s infinite;
}
.wa-float:hover{ color:#fff; transform:scale(1.06); }
@media (min-width:992px){ .wa-float{ bottom:24px; } }
@keyframes wa-pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55); }
  70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; background:linear-gradient(135deg,#244a78 0%,#16273f 60%,#101d30 100%); color:#fff; overflow:hidden; }
.hero::before{ content:""; position:absolute; top:-20%; right:-10%; width:60%; height:140%; background:radial-gradient(circle, rgba(229,149,0,.18) 0%, transparent 60%); pointer-events:none; }
.hero::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:22px 22px; opacity:.5; }
.hero .hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.22; }
.hero-inner{ position:relative; z-index:2; padding:5.5rem 0 5rem; }
.hero h1{ color:#fff; font-size:clamp(2rem,4.4vw,3.3rem); line-height:1.12; letter-spacing:-.5px; }
.hero .hero-sub{ color:#cdd9e8; font-size:1.12rem; max-width:620px; }

.page-hero{ background:linear-gradient(135deg,#244a78 0%,#16273f 70%,#101d30 100%); color:#fff; position:relative; overflow:hidden; }
.page-hero::before{ content:""; position:absolute; top:-30%; right:-5%; width:45%; height:160%; background:radial-gradient(circle, rgba(242,162,12,.16) 0%, transparent 60%); pointer-events:none; }
.page-hero::after{ content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:22px 22px; opacity:.45; }
.page-hero .hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; }
.page-hero .hero-bg img{ width:100%; height:100%; object-fit:cover; }
.page-hero .container{ position:relative; z-index:2; padding:3.5rem 0; }
.page-hero h1{ color:#fff; }
.page-hero .breadcrumb a{ color:#cdd7e3; }
.page-hero .breadcrumb .active{ color:var(--ra-amber); }
.page-hero .breadcrumb-item+.breadcrumb-item::before{ color:#8aa0b8; }

/* ============================================================
   DARK-SECTION TEXT READABILITY (scoped overrides)
   Forces light text inside dark navy sections so global dark
   body text / .text-muted-ra never renders dark-on-dark.
   Light sections (white / .bg-light-alt) are untouched.
   ============================================================ */
.hero, .hero p, .hero .hero-sub,
.page-hero, .page-hero p, .page-hero .hero-sub, .page-hero .section-sub,
.bg-navy, .bg-navy p, .bg-navy .section-sub,
.bg-navy-dark, .bg-navy-dark p,
.cta-band, .cta-band p, .cta-band .section-sub,
.footer, .footer p, .footer li, .footer .section-sub{
  color:#cdd9e8 !important;
}

/* headings + eyebrow stay bright/amber inside dark sections */
.hero h1,.hero h2,.hero h3,
.page-hero h1,.page-hero h2,
.bg-navy h1,.bg-navy h2,.bg-navy h3,
.cta-band h1,.cta-band h2,
.footer h5{ color:#ffffff !important; }

.hero .eyebrow,.page-hero .eyebrow,.bg-navy .eyebrow,.cta-band .eyebrow,
.footer .text-amber{ color:var(--ra-amber) !important; }

/* page-hero subtitle specifically */
.page-hero .hero-sub{ color:#cdd9e8 !important; font-size:1.08rem; opacity:1; }

/* footer about paragraph + links readable */
.footer .footer-about p, .footer p.small{ color:#aebccf !important; }
.footer a{ color:#cbd5e1 !important; }
.footer a:hover{ color:var(--ra-amber) !important; }

/* footer social icons: make the circle + icon visible */
.footer .social a{ background:rgba(255,255,255,.08) !important; color:#cbd5e1 !important; }
.footer .social a:hover{ background:var(--ra-amber) !important; color:#fff !important; }

/* ---- Hero search box ---- */
.search-box{ background:#fff; border-radius:20px; box-shadow:0 28px 70px rgba(8,16,30,.4); padding:1.6rem; backdrop-filter:saturate(1.1); }
.search-box .nav-tabs{ border:none; gap:.4rem; background:var(--ra-light); padding:.35rem; border-radius:12px; }
.search-box .nav-link{ flex:1; color:var(--ra-muted); border:none!important; border-radius:9px; font-family:var(--ff-sub); font-weight:600; padding:.55rem 1rem!important; transition:.25s; }
.search-box .nav-link.active{ background:var(--ra-navy); color:#fff!important; box-shadow:0 6px 16px rgba(30,58,95,.3); }
.search-box .form-label{ font-family:var(--ff-sub); font-size:.78rem; font-weight:700; color:var(--ra-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.3rem; }
.search-box .form-select,.search-box .form-control{ border:1.5px solid var(--ra-border); border-radius:10px; padding:.65rem .8rem; transition:.2s; }
.search-box .form-select:focus,.search-box .form-control:focus{ border-color:var(--ra-amber); box-shadow:0 0 0 3px rgba(242,162,12,.15); }
.search-box .btn-amber{ background:linear-gradient(135deg,var(--ra-amber),var(--ra-amber-dark)); padding:.8rem; font-size:1.05rem; position:relative; overflow:hidden; }

/* ============================================================
   CARDS
   ============================================================ */
.card{ border:1px solid var(--ra-border); border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--shadow-sm); transition:.25s; }
.card.lift:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.card .card-img-wrap{ position:relative; overflow:hidden; aspect-ratio:16/10; }
.card .card-img-wrap img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.card.lift:hover .card-img-wrap img{ transform:scale(1.05); }
.card .card-img-wrap .badge-status{ position:absolute; top:12px; left:12px; }
.card .card-img-wrap .price-tag{
  position:absolute; bottom:12px; left:12px; background:rgba(18,39,64,.9); color:#fff;
  font-family:var(--ff-sub); font-weight:700; padding:.3rem .7rem; border-radius:8px; font-size:.95rem;
}

/* Service tile */
.service-tile{ background:#fff; border-radius:var(--radius); padding:1.8rem; height:100%; border:1px solid var(--ra-border); box-shadow:var(--shadow-sm); transition:.25s; }
.service-tile:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent; }
.icon-circle{
  width:60px; height:60px; border-radius:14px; background:#fff3df; color:var(--ra-amber);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1rem;
}
.service-tile:hover .icon-circle{ background:var(--ra-amber); color:#fff; }

/* Feature/why-us point */
.why-point{ display:flex; gap:1rem; }
.why-point .icon-circle{ flex:0 0 auto; width:52px; height:52px; font-size:1.25rem; }

/* Stats */
.stat-card{ text-align:center; padding:1.5rem .5rem; }
.stat-card .stat-num{ font-family:var(--ff-head); font-weight:800; font-size:2.4rem; color:var(--ra-amber); line-height:1; }
.stat-card .stat-label{ font-family:var(--ff-sub); color:#dbe4ef; margin-top:.4rem; }

/* Steps */
.step{ text-align:center; padding:1rem; }
.step .step-num{
  width:54px; height:54px; border-radius:50%; background:var(--ra-navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--ff-head); font-weight:700;
  font-size:1.3rem; margin:0 auto 1rem;
}
.step:hover .step-num{ background:var(--ra-amber); }

/* Testimonial */
.testimonial{ background:#fff; border-radius:var(--radius); padding:1.8rem; height:100%; box-shadow:var(--shadow-sm); border:1px solid var(--ra-border); }
.testimonial .stars{ color:var(--ra-amber); }
.testimonial .quote-mark{ font-size:2.2rem; color:var(--ra-amber); opacity:.35; line-height:1; }

/* Society tile */
.society-tile{ position:relative; border-radius:var(--radius); overflow:hidden; display:block; box-shadow:var(--shadow-sm); }
.society-tile img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:.4s; }
.society-tile:hover img{ transform:scale(1.06); }
.society-tile .society-label{
  position:absolute; inset:0; display:flex; align-items:flex-end;
  background:linear-gradient(to top, rgba(18,39,64,.85), transparent 60%);
  color:#fff; padding:1rem; font-family:var(--ff-sub); font-weight:600;
}

/* Trust strip */
.trust-strip{ background:#fff; border-top:1px solid var(--ra-border); border-bottom:1px solid var(--ra-border); }
.trust-strip .pill{ background:var(--ra-light); }

/* Filter chips */
.filter-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  border:1px solid var(--ra-border); background:#fff; color:var(--ra-muted);
  border-radius:30px; padding:.4rem 1rem; font-family:var(--ff-sub); font-weight:500; font-size:.88rem; cursor:pointer; transition:.2s;
}
.chip:hover, .chip.active{ background:var(--ra-navy); color:#fff; border-color:var(--ra-navy); }

/* CTA band */
.cta-band{ background: linear-gradient(135deg, var(--ra-navy) 0%, var(--ra-navy-dark) 100%); color:#fff; border-radius:0; }
.cta-band h2{ color:#fff; }
.cta-band-amber{ background:var(--ra-amber); color:#fff; }
.cta-band-amber h2,.cta-band-amber p{ color:#fff; }

/* Inline lead form card */
.lead-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-md); padding:1.8rem; }
.lead-card .form-control, .lead-card .form-select{ border-color:var(--ra-border); padding:.7rem .9rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ra-navy); color:#cbd5e1; font-family:var(--ff-body); }
.footer h5{ color:#fff; font-family:var(--ff-sub); font-weight:600; font-size:1.05rem; margin-bottom:1.1rem; }
.footer a{ color:#cbd5e1; }
.footer a:hover{ color:var(--ra-amber); }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer ul li{ margin-bottom:.55rem; }
.footer .social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; }
.footer .social a:hover{ background:var(--ra-amber); color:#fff; }
.footer-cta-strip{ background:var(--ra-amber); color:#fff; }
.footer-cta-strip a{ color:#fff; font-weight:700; }
.trust-row{ border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.trust-row .pill{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#dbe4ef; }
.footer-bottom{ background:var(--ra-navy-dark); color:#9fb1c5; font-size:.85rem; }
.footer-bottom a{ color:#9fb1c5; }

/* ============================================================
   DETAIL PAGE HELPERS
   ============================================================ */
.facts-bar{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.facts-bar .fact{ padding:1rem; text-align:center; border-right:1px solid var(--ra-border); }
.facts-bar .fact:last-child{ border-right:none; }
.facts-bar .fact .fact-label{ font-size:.78rem; color:var(--ra-muted); font-family:var(--ff-sub); text-transform:uppercase; letter-spacing:.05em; }
.facts-bar .fact .fact-val{ font-family:var(--ff-head); font-weight:700; color:var(--ra-navy); }
@media (max-width:767.98px){ .facts-bar .fact{ border-right:none; border-bottom:1px solid var(--ra-border); } }

.amenity{ display:flex; align-items:center; gap:.6rem; padding:.6rem 0; }
.amenity i{ color:var(--ra-amber); width:22px; }

.sticky-form{ position:sticky; top:90px; }

.payment-table th{ background:var(--ra-navy); color:#fff; font-family:var(--ff-sub); }
.payment-table td, .payment-table th{ vertical-align:middle; }

.agent-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.5rem; text-align:center; }
.agent-card .agent-photo{ width:90px; height:90px; border-radius:50%; object-fit:cover; margin:0 auto 1rem; }

/* Team */
.team-card .card-img-wrap{ aspect-ratio:1/1; }
.team-card .role{ color:var(--ra-amber); font-family:var(--ff-sub); font-weight:600; font-size:.9rem; }

/* Blog */
.blog-card .meta{ font-size:.82rem; color:var(--ra-muted); font-family:var(--ff-sub); }
.blog-card .cat-tag{ color:var(--ra-amber); font-family:var(--ff-sub); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }

/* Accordion / FAQ */
.accordion-button{ font-family:var(--ff-sub); font-weight:600; color:var(--ra-navy); }
.accordion-button:not(.collapsed){ background:var(--ra-light); color:var(--ra-navy); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; border-color:var(--ra-border); }

/* Misc */
.list-check{ list-style:none; padding:0; }
.list-check li{ padding:.4rem 0 .4rem 1.9rem; position:relative; }
.list-check li::before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--ra-amber); position:absolute; left:0; top:.45rem; }

.map-embed{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.map-embed iframe{ width:100%; min-height:340px; border:0; display:block; }

.value-block{ background:#fff; border-radius:var(--radius); padding:1.6rem; height:100%; border:1px solid var(--ra-border); box-shadow:var(--shadow-sm); }
.value-block .icon-circle{ margin-bottom:.8rem; }

/* ============================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ============================================================ */

/* ---- Scroll reveal ---- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity:1!important; transform:none!important; } }

/* ---- Hero entrance ---- */
.hero-inner > *{ animation: heroUp .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-inner .eyebrow{ animation-delay:.05s; }
.hero-inner h1{ animation-delay:.15s; }
.hero-inner .hero-sub{ animation-delay:.28s; }
.hero-inner .d-flex{ animation-delay:.4s; }
.hero .col-lg-6:last-child{ animation: heroUp .9s cubic-bezier(.2,.7,.2,1) .35s both; }
@keyframes heroUp{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none;} }

/* ---- Button shine + lift ---- */
.btn{ position:relative; overflow:hidden; transition:transform .2s, box-shadow .2s, background .2s; }
.btn::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); transition:.5s; }
.btn:hover::after{ left:120%; }
.btn-amber:hover,.btn-navy:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(18,39,64,.18); }

/* ---- Card hover (strengthen .lift) ---- */
.card.lift{ transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.card.lift:hover{ transform:translateY(-8px); box-shadow:0 20px 50px rgba(18,39,64,.16); }

/* ---- Service tile icon pop ---- */
.service-tile .icon-circle{ transition:transform .3s, background .3s, color .3s; }
.service-tile:hover .icon-circle{ transform:scale(1.1) rotate(-4deg); }

/* ---- Nav link underline grow (skip dropdown toggles so their caret survives) ---- */
.navbar .nav-link{ position:relative; }
.navbar .nav-link:not(.dropdown-toggle)::after{ content:""; position:absolute; left:.7rem; right:.7rem; bottom:.25rem; height:2px; background:var(--ra-amber); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.navbar .nav-link:not(.dropdown-toggle):hover::after,.navbar .nav-link:not(.dropdown-toggle).active::after{ transform:scaleX(1); }

/* ---- Chip + pill hover lift ---- */
.chip{ transition:.2s; } .chip:hover{ transform:translateY(-2px); }
.pill{ transition:.2s; } .pill:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }

/* ---- Step number hover ---- */
.step .step-num{ transition:transform .3s, background .3s; }
.step:hover .step-num{ transform:scale(1.12); }

/* ============================================================
   NAVBAR OFF-CANVAS (left drawer on mobile, inline navbar on desktop)
   ============================================================ */
@media (min-width:992px){
  /* Desktop: render the offcanvas as a normal inline navbar (no drawer). */
  .navbar .offcanvas{ position:static; transform:none; visibility:visible !important; background:transparent; border:0; box-shadow:none; width:auto; flex-grow:1; }
  .navbar .offcanvas-header{ display:none; }
  .navbar .offcanvas-body{ display:flex; align-items:center; }
  .navbar .offcanvas-body .navbar-nav{ flex-direction:row; align-items:center; margin-left:auto; }
  .navbar .btn-consult{ margin-left:1rem; }
}
@media (max-width:991.98px){
  /* Mobile: real left-slide drawer — side panel, not full width. */
  #raOffcanvas.offcanvas{ width:82% !important; max-width:320px !important; }

  /* nav list: vertical, LEFT aligned, full width */
  #raOffcanvas .offcanvas-body{ display:block; padding:1rem 1.1rem; overflow-y:auto; }
  #raOffcanvas .navbar-nav{ flex-direction:column !important; align-items:stretch !important; margin:0 !important; width:100%; gap:0; }
  #raOffcanvas .nav-item{ width:100%; text-align:left !important; }
  #raOffcanvas .nav-link{ text-align:left !important; padding:.8rem .25rem !important; font-size:1.05rem; color:var(--ra-text) !important; border-bottom:1px solid var(--ra-border); }
  #raOffcanvas .nav-link.active{ color:var(--ra-amber) !important; }
  #raOffcanvas .nav-link::after{ display:none !important; }  /* kill desktop underline accent */

  /* dropdowns inside drawer: left aligned, indented, static (not floating), no shadow */
  #raOffcanvas .dropdown-menu{ position:static !important; float:none !important; border:none !important; box-shadow:none !important; background:var(--ra-light) !important; padding:.25rem 0 .25rem 1rem !important; margin:0 !important; width:100% !important; text-align:left !important; }
  #raOffcanvas .dropdown-item{ text-align:left !important; padding:.55rem .5rem !important; white-space:normal; }

  /* consultation button: full width, clears the fixed bottom bar */
  #raOffcanvas .btn-consult, #raOffcanvas .btn-amber{ width:100% !important; margin-top:1.25rem !important; margin-bottom:5rem !important; }
}

/* ============================================================
   NAVBAR HOVER DROPDOWNS (desktop only)
   ============================================================ */
@media (min-width:992px){
  .navbar .dropdown:hover > .dropdown-menu{ display:block; margin-top:0; opacity:1; transform:translateY(0); pointer-events:auto; }
  .navbar .dropdown-menu{ display:block; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .22s ease, transform .22s ease; margin-top:.4rem; }
  .navbar .dropdown-toggle{ cursor:pointer; }
  /* keep a small hover bridge so the menu doesn't close in the gap */
  .navbar .dropdown::after{ content:""; position:absolute; left:0; right:0; top:100%; height:.6rem; }
}

/* ============================================================
   SCROLL-SNAP CAROUSEL (no library)
   ============================================================ */
.ra-carousel{ position:relative; }
.ra-track{ display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:.5rem .25rem 1rem; -ms-overflow-style:none; scrollbar-width:none; cursor:grab; }
.ra-track::-webkit-scrollbar{ display:none; }
.ra-track.dragging{ cursor:grabbing; scroll-behavior:auto; }
.ra-slide{ scroll-snap-align:start; flex:0 0 calc(25% - .94rem); min-width:260px; }
@media (max-width:991px){ .ra-slide{ flex:0 0 calc(50% - .63rem); } }
@media (max-width:575px){ .ra-slide{ flex:0 0 85%; } }
.ra-carousel-btn{ position:absolute; top:42%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%; border:none; background:#fff; color:var(--ra-navy); box-shadow:var(--shadow-md); cursor:pointer; transition:.2s; }
.ra-carousel-btn:hover{ background:var(--ra-navy); color:#fff; transform:translateY(-50%) scale(1.08); }
.ra-prev{ left:-12px; } .ra-next{ right:-12px; }
@media (max-width:575px){ .ra-prev{ left:2px; } .ra-next{ right:2px; } }

/* ============================================================
   RESPONSIVE / MOBILE
   ============================================================ */
@media (max-width: 991.98px){
  .section-pad{ padding: 2.5rem 0; }
  /* HERO: never clip the search box on mobile. overflow:hidden (used to contain
     the amber glow) was cutting the search card off — drop it here and disable the
     decorative pseudo-elements so they can't cause horizontal scroll either. */
  .hero{ overflow: visible; height: auto; }
  .hero::before, .hero::after{ display: none; }
  .hero-inner{ padding: 2.5rem 1.1rem 3rem; height: auto; }
  .hero .row{ row-gap: 1.75rem; }                      /* gap between stacked text + search box */
  .hero h1{ font-size: clamp(1.6rem, 7vw, 2.3rem); }
  .hero .hero-sub{ font-size: 1rem; }
  .page-hero .container{ padding: 2.2rem 1rem; }   /* ≥1rem side gutter so content never touches the edge */
  .page-hero h1{ font-size: clamp(1.5rem, 6.5vw, 2rem); }
  /* search box stacks full width below the hero text, never absolute/clipped */
  .search-box{ width: 100%; padding: 1.1rem; margin-top: 0; position: static; }
  .search-box .nav-tabs{ flex-wrap: wrap; }            /* tabs wrap instead of overflowing */
  .search-box .nav-link{ font-size:.85rem; padding:.45rem .5rem!important; }
  /* Disable hero entrance animation on mobile so nothing is ever left
     mid-animation (hidden/offset) — guarantees the search box is fully visible. */
  .hero-inner > *, .hero-inner .eyebrow, .hero-inner h1, .hero-inner .hero-sub,
  .hero-inner .d-flex, .hero .col-lg-6:last-child{
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  /* sticky sidebars should not stick on mobile */
  .sticky-form{ position: static !important; }
}

@media (max-width: 767.98px){
  h1{ font-size: clamp(1.5rem, 7vw, 2rem); }
  h2, .section-title{ font-size: clamp(1.35rem, 6vw, 1.8rem); }
  /* Inner-page hero: comfortable left+right gutter so content never touches the edge */
  .page-hero .container{ padding-left:1.1rem !important; padding-right:1.1rem !important; padding-top:2.2rem; padding-bottom:2.2rem; }
  .page-hero h1{ font-size:clamp(1.5rem,6.5vw,2rem); overflow-wrap:anywhere; }
  .page-hero .hero-sub{ font-size:1rem; }
  .page-hero .eyebrow{ font-size:.75rem; }
  .page-hero .breadcrumb{ font-size:.85rem; margin-bottom:0; }
  .section-pad{ padding: 2.2rem 0; }
  /* carousels: show ~1 card with peek, smaller arrows */
  .ra-slide{ flex: 0 0 86% !important; min-width: 0 !important; }
  .ra-carousel-btn{ width: 38px; height: 38px; }
  .ra-prev{ left: 0; } .ra-next{ right: 0; }
  /* stats: 2 per row, smaller */
  .stat-card .stat-num{ font-size: 1.9rem; }
  /* footer: stack, center, readable */
  .footer{ text-align: left; }
  .footer h5{ margin-top: 1rem; }
  .footer .row > [class*="col-"]{ margin-bottom: .5rem; }
  /* tables scroll horizontally instead of breaking layout */
  .table-responsive{ -webkit-overflow-scrolling: touch; }
  /* utility bar hidden on mobile already (d-none d-lg-block) — keep */
  /* CTA bands: reduce padding, stack buttons full width */
  .cta-band .lead-card, .cta-band-amber .lead-card{ margin-top: 1.25rem; }
  .cta-band .btn, .cta-band-amber .btn{ width: 100%; }
  /* hero CTA buttons stack full width */
  .hero-inner .d-flex.flex-wrap .btn{ flex: 1 1 100%; }
  /* floating WA sits above the bottom bar */
  .wa-float{ bottom: 20px; right: 16px; width: 50px; height: 50px; font-size: 1.5rem; }
}

@media (max-width: 575.98px){
  .ra-slide{ flex: 0 0 90% !important; }
  .stat-card{ padding: 1rem .25rem; }
  .lead-card, .value-block{ padding: 1.25rem; }
  .search-box .row > [class*="col-"]{ margin-bottom: .25rem; }
  .breadcrumb{ font-size: .85rem; }
  /* big section headings never overflow */
  .display-1,.display-2,.display-3{ font-size: 2rem; }
}