/* ================================================================
   CANCER REHAB PAKISTAN — SHARED STYLESHEET
   styles.css — linked by all page HTML files
   ================================================================ */

/* ================================================================
   SECTION 1 — GOOGLE FONTS IMPORT
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Libre+Baskerville:ital@1&family=Lora:wght@400;500;600;700&display=swap');

/* ================================================================
   SECTION 2 — CSS RESET
   ================================================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scrollbar-width:thin;
  scrollbar-color:var(--teal) #ebe6dc;
}
html::-webkit-scrollbar{width:12px;}
html::-webkit-scrollbar-track{
  background:linear-gradient(180deg, #f0ebe3, #ebe6dc 45%, #f0ebe3);
  border-left:1px solid rgba(42,157,143,0.12);
  box-shadow:inset -1px 0 0 rgba(255,255,255,0.6);
}
html::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--teal), var(--teal-dark));
  border-radius:999px;
  border:2px solid #f0ebe3;
  min-height:56px;
  animation:crpPageScrollThumbPulse 2.4s ease-in-out infinite;
}
html::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, var(--teal-dark), #14564f);
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0;}
ul,ol{list-style:none;}
a{text-decoration:none;color:inherit;}
img,picture,video,canvas,svg{display:block;max-width:100%;}
input,button,textarea,select{font:inherit;}
button{cursor:pointer;border:none;background:none;}
table{border-collapse:collapse;border-spacing:0;}

/* ================================================================
   SECTION 3 — DESIGN TOKENS
   ================================================================ */
:root{
  /* Colours */
  --teal:#2A9D8F;
  --teal-dark:#1a7a70;
  --teal-light:#E1F5EE;
  --cream:#FAF7F0;
  --sage:#A8D5BA;
  --peach:#F4B6A6;
  --amber:#F4A261;
  --charcoal:#1F2933;
  --gray:#6b7280;
  --gray-light:#e5e7eb;
  --white:#FFFFFF;

  /* Font families */
  --font-heading:'Lora',serif;
  --font-body:'Inter',sans-serif;
  --font-accent:'Libre Baskerville',serif;

  /* Font sizes */
  --text-xs:11px;
  --text-sm:13px;
  --text-base:15px;
  --text-md:18px;
  --text-lg:24px;
  --text-xl:32px;
  --text-2xl:42px;
  --text-3xl:52px;

  /* Spacing */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:48px;
  --space-2xl:80px;
  --space-3xl:120px;

  /* Border radius */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:20px;
  --radius-full:100px;

  /* Shadows */
  --shadow-sm:0 2px 8px rgba(31,41,51,0.06);
  --shadow-md:0 4px 20px rgba(31,41,51,0.10);
  --shadow-lg:0 8px 40px rgba(31,41,51,0.14);

  /* Transitions */
  --transition:all 0.2s ease;
  --transition-slow:all 0.4s ease;
}

/* ================================================================
   SECTION 4 — BASE STYLES
   ================================================================ */
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--charcoal);
  min-height:100vh;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;color:var(--charcoal);line-height:1.2;}
h1{font-size:var(--text-3xl);}
h2{font-size:var(--text-xl);}
h3{font-size:var(--text-lg);}
h4{font-size:var(--text-md);font-family:var(--font-body);font-weight:500;}
p{font-size:var(--text-base);color:var(--gray);line-height:1.75;}
a{text-decoration:none;color:var(--teal);transition:var(--transition);}
a:hover{color:var(--teal-dark);}
img{max-width:100%;display:block;}

@keyframes crpPageScrollThumbPulse{
  0%,100%{opacity:0.88;box-shadow:0 0 0 rgba(42,157,143,0);}
  50%{opacity:1;box-shadow:0 0 10px rgba(42,157,143,0.45);}
}

.page-hero-region{position:relative;overflow:hidden;background:var(--cream);}
.page-hero-region .pageHeroBgCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.page-hero-region .page-hero,
.page-hero-region .page-hero-archive,
.page-hero-region .page-hero-category,
.page-hero-region .post-header{position:relative;z-index:1;background:transparent!important;}

/* ================================================================
   SECTION 5 — TYPOGRAPHY UTILITIES
   ================================================================ */
.text-tagline{font-family:var(--font-accent);font-style:italic;font-size:var(--text-md);color:var(--teal);}
.section-label{font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;color:var(--teal);text-transform:uppercase;letter-spacing:0.1em;display:block;margin-bottom:12px;}
.text-muted{color:var(--gray);}
.text-white{color:var(--white);}
.text-teal{color:var(--teal);}
.text-charcoal{color:var(--charcoal);}
.text-center{text-align:center;}

/* ================================================================
   SECTION 6 — LAYOUT UTILITIES
   ================================================================ */
.container{max-width:1100px;margin:0 auto;padding:0 var(--space-xl);}
.container-sm{max-width:800px;margin:0 auto;padding:0 var(--space-xl);}
.section-padding{padding:var(--space-2xl) var(--space-xl);}
.section-padding-lg{padding:var(--space-3xl) var(--space-xl);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg);}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-lg);}
.flex-center{display:flex;align-items:center;justify-content:center;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}

/* ================================================================
   SECTION 7 — NAVBAR
   ================================================================ */
.navbar{
  position:fixed;top:0;left:0;right:0;
  height:72px;
  background:rgba(250,247,240,0);
  background-color:rgba(250,247,240,0);
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  border-bottom:1px solid rgba(42,157,143,0);
  box-shadow:0 2px 8px rgba(31,41,51,0);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;
  z-index:1000;
  transform:translateY(0);
  -webkit-backface-visibility:hidden;
  will-change:background-color,backdrop-filter,border-color,box-shadow,transform;
  transition:background-color 0.4s ease,
              backdrop-filter 0.4s ease,
              -webkit-backdrop-filter 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.4s ease,
              transform 0.3s ease;
}
.navbar.navbar-hidden{transform:translateY(-100%);}
.navbar.scrolled{
  background-color:rgba(250,247,240,0.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom-color:rgba(42,157,143,0.12);
  box-shadow:0 2px 8px rgba(31,41,51,0.06);
}
.nav-logo{display:flex;align-items:center;gap:14px;text-decoration:none;}
.nav-logo-icon{width:40px;height:40px;background:var(--teal);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--white);font-family:var(--font-heading);font-weight:700;font-size:16px;}
.nav-logo-text{display:flex;flex-direction:column;}
.nav-logo-name{font-family:var(--font-heading);font-size:15px;font-weight:600;color:var(--charcoal);line-height:1.2;}
.nav-logo-tagline{font-size:10px;color:var(--teal);letter-spacing:0.05em;}
.nav-links{display:flex;align-items:center;gap:36px;list-style:none;}
.nav-links a{font-size:14px;color:var(--charcoal);font-weight:400;transition:var(--transition);}
.nav-links a:hover{color:var(--teal);}
.nav-links a.active{color:var(--teal);font-weight:500;}
.nav-cta{display:inline-flex;align-items:center;gap:6px;background:var(--teal);color:var(--white);font-size:13px;padding:10px 22px;border-radius:var(--radius-md);font-weight:500;transition:var(--transition);border:none;cursor:pointer;text-decoration:none;}
.nav-cta:hover{background:var(--teal-dark);color:var(--white);transform:translateY(-1px);}
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px;}
.nav-hamburger span{width:24px;height:2px;background:var(--charcoal);border-radius:2px;transition:var(--transition);}
.navbar:not(.scrolled) .nav-links a{color:var(--charcoal);}
.navbar:not(.scrolled) .nav-hamburger span{background:var(--charcoal);}
.navbar.on-dark-hero:not(.scrolled) .nav-links a{color:#fff;}
.navbar.on-dark-hero:not(.scrolled) .nav-hamburger span{background:#fff;}
.navbar.on-dark:not(.scrolled) .nav-links a{color:#fff;}
.navbar.on-dark:not(.scrolled) .nav-hamburger span{background:#fff;}

/* ================================================================
   SECTION 8 — BUTTONS
   ================================================================ */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:500;font-size:14px;padding:12px 24px;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);border:none;text-decoration:none;min-width:0;word-break:break-word;}
.btn-primary{background:var(--teal);color:var(--white);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--teal-dark);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-primary:active{transform:scale(0.98);}
.btn-secondary{background:transparent;color:var(--teal);border:1.5px solid var(--teal);}
.btn-secondary:hover{background:var(--teal-light);color:var(--teal-dark);}
.btn-ghost{background:transparent;color:var(--teal);border:none;padding:13px 0;}
.btn-ghost:hover{color:var(--teal-dark);}
.btn-white{background:var(--white);color:var(--teal);border:none;}
.btn-white:hover{background:var(--cream);color:var(--teal);transform:translateY(-2px);}
.btn-outlined-white{background:transparent;color:var(--white);border:1.5px solid var(--white);}
.btn-outlined-white:hover{background:rgba(255,255,255,0.15);color:var(--white);}
.btn-sm{padding:10px 20px;font-size:13px;}
.btn-lg{padding:14px 30px;font-size:15px;}
.btn-full{width:100%;justify-content:center;}
.btn-round{width:40px;height:40px;border-radius:50%;padding:0;justify-content:center;background:var(--teal);color:var(--white);}
.btn-round:hover{background:var(--teal-dark);transform:translateY(-2px);}

/* ================================================================
   SECTION 9 — BADGES AND TAGS
   ================================================================ */
.badge-hero{display:inline-flex;align-items:center;gap:8px;background:var(--teal-light);color:var(--teal-dark);font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;padding:6px 14px;border-radius:var(--radius-full);margin-bottom:28px;}
.badge-hero::before{content:'';width:6px;height:6px;background:var(--teal);border-radius:50%;animation:pulse-dot 2s infinite;}
.tag{display:inline-block;font-size:11px;font-weight:500;padding:4px 12px;border-radius:var(--radius-full);}
.tag-oncology{background:rgba(244,162,97,0.15);color:#b85c00;}
.tag-lymphedema{background:rgba(244,182,166,0.2);color:#b54a35;}
.tag-headneck{background:rgba(168,213,186,0.25);color:#2a6b45;}
.tag-functional{background:var(--teal-light);color:var(--teal-dark);}
.tag-mode{background:var(--gray-light);color:var(--gray);font-size:12px;}

/* ================================================================
   SECTION 10 — CARDS
   ================================================================ */
.card{background:var(--white);border:0.5px solid var(--gray-light);border-radius:var(--radius-lg);padding:32px 24px;transition:var(--transition);}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--teal);}

/* Homepage Hero */
.hero .buttons{display:flex;gap:14px;margin-bottom:28px;}

/* Homepage Service Cards */
.services .card .icon{
  width:56px;height:56px;
  background:var(--teal-light);
  border-radius:var(--radius-md);
  margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.3s ease, transform 0.3s ease;
  border:none;
}
.services .card .icon svg{
  width:28px;height:28px;
  stroke:var(--teal);
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke 0.3s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.services .card:hover .icon{
  background:var(--teal);
  transform:translateY(-2px);
}
.services .card:hover .icon svg{
  stroke:#fff;
  transform:scale(1.15) rotate(-6deg);
}
.services .card .bottom-row{display:flex;justify-content:space-between;align-items:center;}
.services .card .wa-btn{background:var(--teal);color:#fff;border:none;padding:8px 16px;border-radius:var(--radius-md);font-size:11px;font-weight:500;cursor:pointer;transition:var(--transition);}
.services .card .wa-btn:hover{background:var(--teal-dark);}

/* Homepage Testimonials */
.testimonials{background:#f7f4ed;padding:80px 0;overflow:hidden;}
.testimonials .header{text-align:center;padding:0 72px;margin-bottom:40px;}
.testimonials .header h2{margin-bottom:10px;}
.testimonial-carousel-shell{
  position:relative;
  padding-left:20px;
  padding-right:20px;
  box-sizing:border-box;
}
.testimonials .carousel-viewport{
  position:relative;
  overflow:hidden;
  max-width:1400px;
  margin:0 auto;
  padding:12px 24px 28px;
  cursor:grab;
  touch-action:pan-x;
}
#testimonialViewport{
  max-width:1400px;
  margin:0 auto;
}
.testimonials .carousel-viewport::-webkit-scrollbar{display:none;}
.testimonials .carousel-viewport.is-dragging{
  cursor:grabbing;
  user-select:none;
}
.testimonials .carousel-viewport.is-dragging .t-card{
  pointer-events:none;
}
.testimonials .carousel-viewport.is-dragging .t-card:hover{
  transform:none;
  box-shadow:none;
  border-color:var(--gray-light);
}
.testimonials .carousel-track{
  display:flex;
  gap:24px;
  width:max-content;
  will-change:transform;
  backface-visibility:hidden;
}
.testimonials .t-card{
  width:344px;
  min-height:282px;
  flex:0 0 344px;
  background:#fff;
  border:.5px solid var(--gray-light);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  transition:box-shadow 0.2s,transform 0.2s,border-color 0.2s;
}
.testimonials .t-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--teal);}
.testimonials .t-card .quote-mark{font-family:var(--font-heading);font-weight:700;font-size:48px;color:var(--teal);line-height:1;margin-bottom:4px;}
.testimonials .t-card .quote{font-size:14px;color:var(--gray);line-height:1.7;margin-bottom:18px;font-style:italic;}
.testimonials .t-card .divider{border:none;border-top:.5px solid var(--gray-light);margin-bottom:14px;}
.testimonials .t-card .name{font-weight:500;font-size:14px;color:var(--charcoal);margin-bottom:6px;}
.testimonials .t-card .condition{display:inline-block;font-size:10px;font-weight:600;padding:3px 12px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.3px;}
.condition-oncology{background:var(--teal-light);color:var(--teal-dark);}
.condition-lymphedema{background:#e2f0e8;color:#3D7A53;}
.condition-headneck{background:#fef3e2;color:#C67A2E;}
.condition-recovery{background:#e2f0e8;color:#3D7A53;}
.testimonial-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--white);
  border:1.5px solid var(--teal);
  color:var(--teal);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s,color 0.2s,border-color 0.2s,box-shadow 0.2s,transform 0.2s;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.testimonial-arrow:hover:not(:disabled){
  background:var(--teal);
  color:var(--white);
  transform:translateY(-50%) scale(1.04);
}
.testimonial-arrow:disabled{
  opacity:0.35;
  cursor:not-allowed;
}
.testimonial-prev{left:24px;}
.testimonial-next{right:24px;}

/* Testimonial bone scrollbar */
.testimonial-scrollbar{
  max-width:min(420px, calc(100% - 48px));
  margin:28px auto 0;
  padding:0 8px;
}
.testimonial-scrollbar-track{
  position:relative;
  height:10px;
  background:linear-gradient(90deg, var(--gray-light), #ebe6dc, var(--gray-light));
  border-radius:999px;
  overflow:visible;
  box-shadow:inset 0 1px 2px rgba(31,41,51,0.08);
}
.testimonial-scrollbar-shine{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg, transparent 0%, rgba(42,157,143,0.45) 50%, transparent 100%);
  background-size:220% 100%;
  animation:testimonialTrackShine 2.8s linear infinite;
  pointer-events:none;
}
@keyframes testimonialTrackShine{
  0%{background-position:220% 0;}
  100%{background-position:-220% 0;}
}
.testimonial-scrollbar-thumb{
  position:absolute;
  top:50%;
  left:0;
  width:52px;
  height:26px;
  padding:0;
  border:none;
  background:transparent;
  color:var(--teal);
  cursor:grab;
  transform:translate(-50%, -50%);
  transition:left 0.1s linear;
  z-index:2;
}
.testimonial-scrollbar-thumb:active{cursor:grabbing;}
.testimonial-bone-wrap{
  display:block;
  width:100%;
  height:100%;
  animation:testimonialBoneWiggle 1.6s ease-in-out infinite;
}
.testimonial-bone-icon{
  width:100%;
  height:100%;
  display:block;
  filter:drop-shadow(0 2px 6px rgba(42,157,143,0.35));
}
@keyframes testimonialBoneWiggle{
  0%,100%{transform:rotate(-5deg) scale(1);}
  50%{transform:rotate(5deg) scale(1.06);}
}

.testimonials .dots{text-align:center;margin-top:28px;}
.testimonials .dots span{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--gray-light);margin:0 4px;cursor:pointer;transition:background 0.2s,transform 0.2s;}
.testimonials .dots span.active{background:var(--teal);transform:scale(1.12);}

/* Service Card */
.card-service{cursor:pointer;}
.card-service .icon-wrap{width:48px;height:48px;background:var(--teal-light);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.card-service h3{font-family:var(--font-heading);font-size:18px;text-align:center;margin-bottom:8px;}
.card-service p{font-size:14px;text-align:center;color:var(--gray);margin-bottom:16px;}
.card-service .card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:0.5px solid var(--gray-light);}

/* Blog Card */
.card-blog{padding:0;overflow:hidden;}
.card-blog .card-image-wrap{overflow:hidden;}
.card-blog .card-image{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--gray-light);transition:transform 0.4s ease;}
.card-blog:hover .card-image{transform:scale(1.05);}
.card-blog .card-content{padding:20px;}

/* Testimonial Card */
.card-testimonial{padding:28px 24px;}
.card-testimonial .quote-mark{font-family:var(--font-heading);font-size:48px;color:var(--teal);line-height:1;margin-bottom:8px;}
.card-testimonial .quote-text{font-size:15px;line-height:1.7;color:var(--charcoal);margin-bottom:16px;}
.card-testimonial .divider{height:0.5px;background:var(--gray-light);margin-bottom:12px;}
.card-testimonial .patient-name{font-size:14px;font-weight:500;color:var(--charcoal);}

/* Value Card */
.card-value{text-align:center;padding:24px;}
.card-value .icon-circle{width:48px;height:48px;background:var(--teal-light);border-radius:50%;margin:0 auto 12px;}
.card-value:hover{border-top:3px solid var(--teal);}

/* Contact Card */
.card-contact{text-align:center;padding:32px 24px;}
.card-contact .icon-circle{width:56px;height:56px;background:var(--teal-light);border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;}

/* Differentiator Block */
.differentiator-block{display:flex;gap:16px;align-items:flex-start;padding:16px 0;}
.differentiator-block .accent-line{width:3px;min-height:40px;background:var(--teal);border-radius:2px;flex-shrink:0;}
.differentiator-block h4{font-size:15px;font-weight:500;color:var(--charcoal);margin-bottom:4px;}
.differentiator-block p{font-size:13px;color:var(--gray);margin:0;}

/* ================================================================
   SECTION 11 — NAVIGATION COMPONENTS
   ================================================================ */
.breadcrumb{font-size:12px;color:var(--gray);margin-bottom:16px;display:flex;align-items:center;gap:6px;}
.breadcrumb a{color:var(--gray);}
.breadcrumb a:hover{color:var(--teal);}
.breadcrumb span.separator{color:var(--gray-light);}
.anchor-nav{display:flex;gap:8px;padding:16px 0;border-bottom:0.5px solid var(--gray-light);margin-bottom:48px;flex-wrap:wrap;}
.anchor-nav a{font-size:12px;font-weight:500;color:var(--gray);padding:6px 16px;border-radius:var(--radius-full);border:0.5px solid var(--gray-light);transition:var(--transition);}
.anchor-nav a:hover{color:var(--teal);border-color:var(--teal);}
.anchor-nav a.active{background:var(--teal);color:var(--white);border-color:var(--teal);}
.reading-progress{position:fixed;top:0;left:0;height:3px;background:var(--teal);z-index:9999;transition:width 0.1s linear;width:0%;}

/* ================================================================
   SECTION 12 — FORM COMPONENTS
   ================================================================ */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:20px;}
.form-label{font-size:13px;font-weight:500;color:var(--charcoal);}
.form-input{height:48px;border:1px solid var(--gray-light);border-radius:var(--radius-md);padding:0 16px;font-size:14px;font-family:var(--font-body);color:var(--charcoal);background:var(--white);transition:var(--transition);width:100%;}
.form-input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(42,157,143,0.1);}
.form-textarea{min-height:120px;padding:12px 16px;resize:vertical;border:1px solid var(--gray-light);border-radius:var(--radius-md);font-size:14px;font-family:var(--font-body);color:var(--charcoal);background:var(--white);transition:var(--transition);width:100%;}
.form-textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(42,157,143,0.1);}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%236b7280'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;}
.form-error{font-size:12px;color:#e53e3e;margin-top:4px;}
.form-success{background:var(--teal-light);border:1px solid var(--teal);border-radius:var(--radius-md);padding:16px;color:var(--teal-dark);font-size:14px;font-weight:500;}
.radio-group{display:flex;gap:8px;flex-wrap:wrap;}
.radio-btn{padding:8px 16px;border-radius:var(--radius-full);border:1px solid var(--gray-light);font-size:13px;color:var(--gray);cursor:pointer;transition:var(--transition);text-align:left;background:var(--white);}
.radio-btn:hover{border-color:var(--teal);color:var(--teal);}
.radio-btn.selected{background:var(--teal);color:var(--white);border-color:var(--teal);}

/* ================================================================
   SECTION 13 — SECTION COMPONENTS
   ================================================================ */

/* Stats Bar */
.stats-bar{border-top:0.5px solid var(--gray-light);border-bottom:0.5px solid var(--gray-light);padding:40px 72px;display:flex;align-items:center;}
.stat-block{text-align:center;flex:1;}
.stat-number{font-family:var(--font-heading);font-size:var(--text-2xl);font-weight:700;color:var(--charcoal);display:block;}
.stat-label{font-size:14px;color:var(--gray);margin-top:4px;}
.stat-divider{width:0.5px;background:var(--gray-light);align-self:stretch;}

/* Accordion */
.accordion{border:1px solid var(--gray-light);border-radius:var(--radius-lg);overflow:hidden;}
.accordion-item{border-bottom:0.5px solid var(--gray-light);}
.accordion-item:last-child{border-bottom:none;}
.accordion-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;cursor:pointer;font-size:15px;font-weight:500;color:var(--charcoal);transition:var(--transition);}
.accordion-header:hover{background:var(--teal-light);color:var(--teal);}
.accordion-arrow{transition:transform 0.3s ease;}
.accordion-item.open .accordion-arrow{transform:rotate(180deg);}
.accordion-body{max-height:0;overflow:hidden;transition:max-height 0.3s ease;padding:0 24px;}
.accordion-item.open .accordion-body{max-height:2000px;padding:0 24px 18px;}

/* Inline CTA */
.inline-cta{background:var(--teal-light);border-left:4px solid var(--teal);border-radius:var(--radius-md);padding:24px 28px;margin:32px 0;}
.inline-cta h4{font-size:15px;font-weight:500;color:var(--charcoal);margin-bottom:6px;}
.inline-cta p{font-size:14px;color:var(--gray);margin-bottom:16px;}

/* WhatsApp Banner */
.whatsapp-banner{background:var(--teal);padding:var(--space-2xl) var(--space-xl);text-align:center;}
.whatsapp-banner h2{color:var(--white);margin-bottom:12px;text-align:center;}
.whatsapp-banner p{color:rgba(255,255,255,0.85);margin-bottom:24px;text-align:center;}
.whatsapp-banner .sub-text{color:rgba(255,255,255,0.7);font-size:13px;margin-top:12px;text-align:center;}

/* Share Buttons */
.share-buttons{display:flex;gap:12px;align-items:center;padding:24px 0;border-top:0.5px solid var(--gray-light);}
.share-heading{font-size:13px;font-weight:500;color:var(--gray);text-transform:uppercase;letter-spacing:0.08em;margin-right:8px;}

/* Footer */
.footer{background:var(--charcoal);padding:80px 72px 40px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:48px;}
.footer-col h4{font-size:13px;font-weight:500;color:var(--teal);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:20px;}
.footer-col a{display:block;font-size:14px;color:rgba(255,255,255,0.6);margin-bottom:10px;transition:var(--transition);}
.footer-col a:hover{color:var(--white);}
.footer-col p{font-size:14px;color:rgba(255,255,255,0.6);margin-bottom:8px;}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.footer-logo .cr-mark{width:36px;height:36px;background:var(--teal);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--white);font-family:var(--font-heading);font-weight:700;font-size:14px;}
.footer-logo .wordmark{font-family:var(--font-heading);font-weight:700;font-size:16px;color:var(--white);}
.footer-tagline{font-family:var(--font-accent);font-style:italic;font-size:14px;color:rgba(255,255,255,0.5);margin-top:12px;margin-bottom:18px;}
.footer-socials{display:flex;gap:10px;}
.footer-socials a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(255,255,255,0.5);transition:var(--transition);}
.footer-socials a:hover{border-color:var(--teal);color:var(--teal);}
.footer-bottom{border-top:0.5px solid var(--teal);padding-top:24px;margin-top:48px;display:flex;align-items:center;justify-content:space-between;}
.footer-bottom p{font-size:13px;color:rgba(255,255,255,0.4);}

/* GlobalWebX footer credit shine (all public pages) */
.globalwebx-shine{position:relative;display:inline-block;overflow:hidden;}
.globalwebx-shine::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);animation:shine-sweep 3s ease-in-out infinite;}
@keyframes shine-sweep{0%{left:-100%;}40%{left:120%;}100%{left:120%;}}

/* Blog category pills — horizontal carousel when space is tight */
@media (max-width:992px){
  .category-filters .pills{
    display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:10px;
    overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scrollbar-width:none;
  }
  .category-filters .pills::-webkit-scrollbar{display:none;}
  .category-filters .pill{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;}
}

/* ================================================================
   SECTION 14 — FLOATING COMPONENTS
   ================================================================ */
.floating-whatsapp{position:fixed;bottom:24px;right:24px;width:48px;height:48px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.25),0 0 0 3px rgba(255,255,255,0.35);z-index:999;cursor:pointer;transition:var(--transition);animation:wa-heartbeat 2.5s ease-in-out infinite;}
.floating-whatsapp:hover{background:#1ebe5d;transform:scale(1.08);animation:none;box-shadow:0 6px 24px rgba(0,0,0,0.3),0 0 0 3px rgba(255,255,255,0.5);}
.floating-whatsapp svg{width:22px;height:22px;fill:var(--white);}
/* Inverted state — over teal/dark sections green clashes, so swap to a white button with a green mark */
.floating-whatsapp.wa-invert{background:var(--white);box-shadow:0 4px 16px rgba(0,0,0,0.28),0 0 0 2px rgba(37,211,102,0.45);}
.floating-whatsapp.wa-invert:hover{background:var(--cream);box-shadow:0 6px 24px rgba(0,0,0,0.32),0 0 0 2px rgba(37,211,102,0.6);}
.floating-whatsapp.wa-invert svg{fill:#25D366;}
@keyframes wa-heartbeat{0%,100%{transform:scale(1);box-shadow:0 4px 16px rgba(0,0,0,0.25),0 0 0 3px rgba(255,255,255,0.35);}15%{transform:scale(1.1);box-shadow:0 6px 24px rgba(0,0,0,0.3),0 0 0 3px rgba(255,255,255,0.45);}30%{transform:scale(1);box-shadow:0 4px 16px rgba(0,0,0,0.25),0 0 0 3px rgba(255,255,255,0.35);}45%{transform:scale(1.08);box-shadow:0 5px 20px rgba(0,0,0,0.28),0 0 0 3px rgba(255,255,255,0.4);}60%{transform:scale(1);box-shadow:0 4px 16px rgba(0,0,0,0.25),0 0 0 3px rgba(255,255,255,0.35);}}
.scroll-top{position:fixed;bottom:84px;right:24px;width:44px;height:44px;background:var(--white);border:1px solid var(--gray-light);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);z-index:998;cursor:pointer;transition:var(--transition);opacity:0;pointer-events:none;font-size:18px;color:var(--charcoal);}
.scroll-top.visible{opacity:1;pointer-events:all;}
.scroll-top:hover{border-color:var(--teal);color:var(--teal);}

/* Pre-Chat Popup */
.pre-chat-popup{position:fixed;bottom:84px;right:24px;width:320px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:24px;z-index:1001;display:none;}
.pre-chat-popup.open{display:block;}
.pre-chat-popup .step-title{font-size:13px;font-weight:500;color:var(--gray);margin-bottom:12px;}
.pre-chat-popup .options{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;padding-left:12px;padding-right:10px;scrollbar-width:none;}
/* Native scrollbar hidden — a custom DOM thumb (like the page scrollbar) is used instead. */
.pre-chat-popup .options::-webkit-scrollbar{width:0;height:0;display:none;}
.crp-inner-thumb{position:absolute;right:8px;top:0;width:8px;border-radius:999px;background:linear-gradient(180deg, var(--teal), var(--teal-dark));border:1px solid #f0ebe3;display:none;z-index:5;will-change:transform;animation:crpPageScrollThumbPulse 2.4s ease-in-out infinite;}
.crp-inner-thumb:hover{background:linear-gradient(180deg, var(--teal-dark), #14564f);}
.pre-chat-popup .option-btn{padding:10px 16px;border-radius:var(--radius-md);border:1px solid var(--gray-light);font-size:13px;color:var(--charcoal);cursor:pointer;transition:var(--transition);text-align:left;background:var(--white);}
.pre-chat-popup .option-btn:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-light);}
.pre-chat-popup .option-btn.selected{background:var(--teal);color:var(--white);border-color:var(--teal);}
.pre-chat-popup .popup-next{width:100%;margin-top:16px;}

/* ================================================================
   SECTION 15 — ANIMATIONS
   ================================================================ */
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.5;transform:scale(0.8);}
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes shimmer{
  from{background-position:-200% 0;}
  to{background-position:200% 0;}
}
/* ===== Recovery Rise — on-brand section entrance =====
   Fade + gentle rise + soft blur-to-focus, using the brand spring easing
   (same curve as the logo loader). Grouped items cascade. */
.fade-in-up{opacity:0;transform:translateY(24px);filter:blur(4px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1);}
.fade-in-up.visible{opacity:1;transform:translateY(0);filter:blur(0);}
.fade-in{opacity:0;transform:translateY(16px);filter:blur(4px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1);}
.fade-in.visible{opacity:1;transform:translateY(0);filter:blur(0);}
/* Fade-only — for sections with live canvas/iframe/carousel (no transform/blur
   so the running animation underneath is never disturbed). */
.fade-soft{opacity:0;transition:opacity .8s ease;}
.fade-soft.visible{opacity:1;}
/* Stagger group — direct children cascade in sequence. */
.fade-in-stagger{opacity:1;}
.fade-in-stagger > *{opacity:0;transform:translateY(24px);filter:blur(4px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),filter .6s cubic-bezier(.16,1,.3,1);}
.fade-in-stagger.visible > *{opacity:1;transform:translateY(0);filter:blur(0);}
.fade-in-stagger.visible > *:nth-child(1){transition-delay:0s;}
.fade-in-stagger.visible > *:nth-child(2){transition-delay:.08s;}
.fade-in-stagger.visible > *:nth-child(3){transition-delay:.16s;}
.fade-in-stagger.visible > *:nth-child(4){transition-delay:.24s;}
.fade-in-stagger.visible > *:nth-child(5){transition-delay:.32s;}
.fade-in-stagger.visible > *:nth-child(6){transition-delay:.4s;}
.fade-in-stagger.visible > *:nth-child(7){transition-delay:.48s;}
.fade-in-stagger.visible > *:nth-child(8){transition-delay:.56s;}
.fade-in-stagger.visible > *:nth-child(n+9){transition-delay:.60s;}
.stagger-1{transition-delay:0.1s;}
.stagger-2{transition-delay:0.2s;}
.stagger-3{transition-delay:0.3s;}
.stagger-4{transition-delay:0.4s;}
@media (prefers-reduced-motion: reduce){
  .fade-in-up,.fade-in,.fade-soft,.fade-in-stagger > *,
  .fade-in-left,.fade-in-right,.scale-in,.fade-in-down,
  .hero-enter,.hero-enter-down,.hero-enter-soft{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;}
}

/* Slide from left — 2-col split left columns */
.fade-in-left{opacity:0;transform:translateX(-32px);filter:blur(4px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1);}
.fade-in-left.visible{opacity:1;transform:translateX(0);filter:blur(0);}
/* Slide from right — 2-col split right columns */
.fade-in-right{opacity:0;transform:translateX(32px);filter:blur(4px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1);}
.fade-in-right.visible{opacity:1;transform:translateX(0);filter:blur(0);}
/* Scale in — icon circles, pills, badges */
.scale-in{opacity:0;transform:scale(0.75);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
.scale-in.visible{opacity:1;transform:scale(1);}
/* Drop from above — breadcrumbs and top-of-section labels */
.fade-in-down{opacity:0;transform:translateY(-16px);filter:blur(3px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),filter .6s cubic-bezier(.16,1,.3,1);}
.fade-in-down.visible{opacity:1;transform:translateY(0);filter:blur(0);}
/* Hero entrance — triggered by loader callback, NOT IntersectionObserver */
.hero-enter{opacity:0;transform:translateY(20px);filter:blur(3px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .7s cubic-bezier(.16,1,.3,1);}
.hero-enter.visible{opacity:1;transform:translateY(0);filter:blur(0);}
.hero-enter-down{opacity:0;transform:translateY(-14px);filter:blur(3px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),filter .6s cubic-bezier(.16,1,.3,1);}
.hero-enter-down.visible{opacity:1;transform:translateY(0);filter:blur(0);}
.hero-enter-soft{opacity:0;transition:opacity .9s ease;}
.hero-enter-soft.visible{opacity:1;}

/* ================================================================
   SECTION 16 — RESPONSIVE BREAKPOINTS
   ================================================================ */

/* Tablet — 1200px */
@media(max-width:1200px){
  .container,.container-sm{padding:0 32px;}
  .navbar{padding:0 32px;}
  .stats-bar{padding:40px 32px;}
  .footer{padding:60px 32px 32px;}
  .section-padding{padding:60px 32px;}
  .section-padding-lg{padding:80px 32px;}
}

/* ================================================================
   SECTION 17 — MOBILE HAMBURGER MENU
   ================================================================ */
/* Mobile drawer — slides from left */
.nav-links.mobile-open{
  display:flex!important;
  flex-direction:column;
  align-items:stretch;
  position:fixed;
  top:0;
  left:-100%;
  width:75vw;
  max-width:300px;
  height:100vh;
  background:var(--cream);
  border-right:1px solid var(--gray-light);
  padding:76px 24px 24px;
  gap:0;
  box-shadow:var(--shadow-lg);
  z-index:1002;
  transition:left 0.3s ease;
  overflow-y:auto;
  text-align:left;
}
.nav-links.mobile-open.drawer-visible{left:0;}
.nav-links.mobile-open li{width:100%;padding:14px 0;border-bottom:0.5px solid var(--gray-light);text-align:left;}
.nav-links.mobile-open li:last-child{border-bottom:none;}
.nav-links.mobile-open a{display:block;width:100%;text-align:left;}
.nav-menu-close-row{display:none;}
.nav-links.mobile-open .nav-menu-close-row{
  display:block;
  position:absolute;
  top:16px;
  right:16px;
  width:auto;
  padding:0;
  margin:0;
  border-bottom:none;
}
.nav-menu-close{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--gray-light);
  background:var(--white);
  color:var(--charcoal);
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:var(--transition);
}
.nav-menu-close:hover{border-color:var(--teal);color:var(--teal);}
.nav-hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.nav-hamburger.active span:nth-child(2){opacity:0;}
.nav-hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* ================================================================
   SECTION 18 — PRE-CHAT POPUP ENHANCED (3-step)
   ================================================================ */
.prechat-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;border:1px solid var(--gray-light);background:var(--white);color:var(--gray);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);z-index:2;}
.prechat-close:hover{border-color:var(--teal);color:var(--teal);}
.prechat-back,.prechat-fwd{position:absolute;top:12px;width:28px;height:28px;border-radius:50%;border:1px solid var(--gray-light);background:var(--white);color:var(--gray);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);z-index:2;padding:0;}
.prechat-back{left:12px;}
.prechat-fwd{left:46px;}
.prechat-back:not(:disabled):hover,.prechat-fwd:not(:disabled):hover{border-color:var(--teal);color:var(--teal);}
.prechat-back:disabled,.prechat-fwd:disabled{opacity:0.3;cursor:not-allowed;}
.prechat-step .step-title{font-size:13px;font-weight:600;color:var(--charcoal);margin-bottom:14px;padding:22px 36px 0;text-align:center;}

/* ================================================================
   SECTION 19 — PAGE LOADER
   ================================================================ */
body.loader-active{overflow:hidden;}
#pageLoader{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;background:var(--cream);transition:opacity 0.4s ease;}
#pageLoader.loader-exit{opacity:0;pointer-events:none;}

/* Tablet — 768px */
@media(max-width:768px){
  h1{font-size:36px;}
  h2{font-size:28px;}
  h3{font-size:20px;}
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .container,.container-sm{padding:0 24px;}
  .card{padding:26px 20px;}
  .card-service .card-footer{flex-direction:column;gap:12px;align-items:stretch;}
  .card-service .card-footer .btn,.card-service .card-footer .btn-sm{width:100%;justify-content:center;}
  .page-hero,.page-hero-archive,.page-hero-category,.post-header{padding-left:24px!important;padding-right:24px!important;}
  .page-hero h1,.page-hero-archive h1,.page-hero-category h1,.post-header h1{font-size:34px;line-height:1.15;}
  .breadcrumb{flex-wrap:wrap;justify-content:center;gap:6px;line-height:1.5;}
  .navbar{flex-direction:row;padding:0 20px;}
  .nav-hamburger{display:flex;order:-1;}
  .nav-logo{order:1;}
  .nav-cta{display:none;}
  .nav-links{display:none;}
  .btn{
    width:100%;
    justify-content:center;
    white-space:normal;
    text-align:center;
    font-size:13px;
    padding:11px 18px;
    border-radius:var(--radius-md);
    line-height:1.35;
  }
  .hero .buttons{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
  }
  .hero .buttons .btn{
    width:100%;
    font-size:13px;
    padding:12px 16px;
    border-radius:var(--radius-md);
    justify-content:center;
    text-align:center;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .services .card .wa-btn{
    font-size:10px;
    padding:7px 10px;
    border-radius:var(--radius-md);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:140px;
  }
  .services .card .bottom-row{
    flex-wrap:wrap;
    gap:8px;
  }
  .stats-bar{flex-direction:column;gap:24px;padding:32px 24px;}
  .stat-divider{width:80%;height:0.5px;align-self:center;}
  .section-padding{padding:48px 24px;}
  .section-padding-lg{padding:64px 24px;}
  .footer{padding:56px 24px 28px;text-align:center;}
  .footer-grid{grid-template-columns:1fr;gap:40px;margin-bottom:40px;}
  .footer-col{display:flex;flex-direction:column;align-items:center;}
  .footer-col h4{margin-bottom:14px;font-size:13px;}
  .footer-col a{font-size:14px;line-height:1.6;margin-bottom:8px;max-width:280px;}
  .footer-col p{font-size:14px;line-height:1.7;max-width:320px;}
  .footer-logo{justify-content:center;margin:0 auto 16px;}
  .footer-logo img{height:60px!important;max-width:230px;}
  .footer-tagline{max-width:340px;margin:10px auto 20px;font-size:14px;line-height:1.7;}
  .footer-socials{justify-content:center;gap:12px;}
  .footer-socials a{width:38px;height:38px;margin-bottom:0;}
  .footer-bottom{flex-direction:column;justify-content:center;gap:10px;margin-top:40px;padding-top:22px;text-align:center;}
  .footer-bottom p{font-size:13px;line-height:1.6;max-width:320px;}
  .testimonials{padding:60px 0;}
  .testimonials .header{padding:0 24px;}
  .testimonials .carousel-viewport{max-width:100%;padding:12px 24px 28px;}
  .testimonials .t-card{width:calc((100vw - 72px) / 2);flex-basis:calc((100vw - 72px) / 2);}
  .anchor-nav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:12px;}
  .pre-chat-popup{width:calc(100vw - 32px);right:16px;bottom:88px;}
  .blog-grid,.posts-grid,.archive-grid,.resources-grid{grid-template-columns:1fr!important;}
  .contact-grid,.what-is-grid{grid-template-columns:1fr!important;}
  .featured-img,.cat-img,.featured-img-placeholder,.card-image{max-width:100%;}
  /* Bug #6: Service cards on mobile — ensure full width, wrappable footer */
  .card-service{width:100%;}
  .card-service .card-footer{flex-wrap:wrap;gap:10px;}
  .card-service .card-footer .btn,.card-service .card-footer .btn-sm{
    flex:1 1 auto;min-width:0;white-space:normal;text-align:center;
    word-break:break-word;
  }
  .card-service .card-footer .learn-link{flex:0 0 auto;}
  /* Bug #10: Sidebar card on mobile — full width, wrap mode tags */
  .sidebar-card{position:static;}
  .sidebar-card .card{width:100%;padding:28px 20px;}
  .mode-tags{flex-wrap:wrap;gap:6px;}
  .mode-tags .tag-mode{white-space:nowrap;}
}

/* Small mobile — 480px */
@media(max-width:480px){
  h1{font-size:30px;}
  h2{font-size:24px;}
  p{font-size:14px;}
  .container,.container-sm{padding:0 18px;}
  .page-hero,.page-hero-archive,.page-hero-category,.post-header{padding:44px 18px 36px!important;}
  .page-hero h1,.page-hero-archive h1,.page-hero-category h1,.post-header h1{font-size:28px;}
  .btn{
    font-size:12px;
    padding:10px 14px;
    border-radius:var(--radius-md);
    white-space:normal;
    line-height:1.3;
  }
  .btn-lg{
    font-size:13px;
    padding:11px 16px;
  }
  .btn-sm{
    font-size:11px;
    padding:8px 12px;
  }
  .hero .buttons .btn{
    font-size:12px;
    padding:11px 14px;
    white-space:nowrap;
  }
  .nav-links.mobile-open{top:0;padding:76px 18px 24px;}
  .nav-links.mobile-open .nav-menu-close-row{top:16px;right:16px;}
  .footer{padding:48px 18px 26px;}
  .footer-grid{gap:36px;margin-bottom:36px;}
  .footer-logo img{height:54px!important;max-width:210px;}
  .footer-tagline{font-size:13px;line-height:1.65;max-width:300px;}
  .footer-col h4{font-size:12px;margin-bottom:12px;}
  .footer-col a,.footer-col p{font-size:13px;max-width:280px;}
  .footer-socials a{width:36px;height:36px;}
  .footer-bottom{gap:8px;margin-top:34px;}
  .footer-bottom p{font-size:12px;max-width:280px;}
  .testimonials .t-card{width:calc(100vw - 48px);flex-basis:calc(100vw - 48px);}
  .testimonial-arrow{display:none;}
}

/* Mobile — 375px */
@media(max-width:375px){
  h1{font-size:28px;}
  h2{font-size:24px;}
  .grid-4{grid-template-columns:1fr;}
  .container,.container-sm{padding:0 16px;}
  .section-padding{padding:40px 16px;}
  .btn{width:100%;justify-content:center;}
  .btn-sm{width:auto;}
  .navbar{padding:0 16px;}
  .footer{padding-left:16px;padding-right:16px;}
  .footer-logo img{height:50px!important;max-width:190px;}
  .footer-tagline,.footer-col a,.footer-col p,.footer-bottom p{max-width:250px;}
}

/* Blog post share buttons */
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--gray-light);
  background: var(--white);
  color: var(--charcoal);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.share-btn:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
  transform: translateY(-2px);
}
.share-whatsapp:hover { background: #25D366; border-color: #25D366; }
.share-facebook:hover { background: #1877F2; border-color: #1877F2; }
.share-linkedin:hover { background: #0A66C2; border-color: #0A66C2; }
.share-copy[data-copied="true"] { background: var(--teal); border-color: var(--teal); color: var(--white); }

/* ================================================================
   TEAL CURSOR (matches the scrollbar) + CLICK MICRO-PARTICLES
   ================================================================ */
/* JS custom cursor. The native cursor is hidden ONCE (not toggled), and this
   element is ALWAYS visible — only the ring scales in over clickable/text areas.
   Nothing appears/disappears per move, so there is no blinking. Teal by default,
   orange on click. The CSS var cursors above stay as the no-JS fallback. */
html.crp-cursor-on, html.crp-cursor-on *{ cursor: none !important; }
/* Remove the native/default cursor completely on mouse devices — even if the
   custom-cursor JS hasn't run yet. (Touch/coarse-pointer devices keep theirs.) */
@media (hover: hover) and (pointer: fine){
  html, body, * { cursor: none !important; }
}
.crp-cursor{
  position: fixed; left: 0; top: 0;
  width: 36px; height: 36px;
  pointer-events: none;
  z-index: 100000;
  transform: translate(-50%, -50%);
  will-change: left, top;
}
/* Round border around the dot, always visible, with a gap between dot and ring. */
.crp-cursor .cc-ring{
  position: absolute; inset: 0;
  border: 2px solid var(--teal);
  border-radius: 50%;
  background: transparent;
  opacity: 1;
  transform: scale(0.56);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.crp-cursor .cc-dot{
  position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--teal);
  transform: translate(-50%, -50%);
  transition: background 0.18s ease;
}
.crp-cursor.is-active .cc-ring{ transform: scale(1); }
/* On dark / greenish backgrounds the teal would blend in — switch to white. */
.crp-cursor.on-dark .cc-ring{ border-color: #ffffff; }
.crp-cursor.on-dark .cc-dot{ background: #ffffff; }
/* Click: brand orange (wins over the on-dark white). */
.crp-cursor.is-down .cc-ring{ border-color: var(--amber); transform: scale(0.92); }
.crp-cursor.is-down .cc-dot{ background: var(--amber); }
@media (hover: none), (pointer: coarse){
  .crp-cursor{ display: none !important; }
}

/* ================================================================
   CUSTOM PAGE SCROLLBAR — a real DOM scrollbar so the custom cursor
   (and hover/click effects) work over it. Keeps the teal look.
   ================================================================ */
html.crp-customscroll{ scrollbar-width: none; }
html.crp-customscroll::-webkit-scrollbar{ width: 0 !important; height: 0 !important; display: none !important; }
.crp-scrollbar{
  position: fixed; top: 0; right: 0;
  width: 12px; height: 100vh;
  z-index: 9999;
  background: linear-gradient(180deg, #f0ebe3, #ebe6dc 45%, #f0ebe3);
  border-left: 1px solid rgba(42,157,143,0.12);
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.crp-scrollbar.is-visible{ opacity: 1; pointer-events: auto; }
.crp-scrollbar-thumb{
  position: absolute; left: 1px; right: 1px; top: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--teal), var(--teal-dark));
  border: 2px solid #f0ebe3;
  min-height: 40px;
  will-change: transform;
  animation: crpPageScrollThumbPulse 2.4s ease-in-out infinite;
}
.crp-scrollbar-thumb:hover{ background: linear-gradient(180deg, var(--teal-dark), #14564f); }
@media (hover: none), (pointer: coarse){
  html.crp-customscroll{ scrollbar-width: auto; }
  html.crp-customscroll::-webkit-scrollbar{ width: initial; height: initial; display: initial; }
  .crp-scrollbar{ display: none !important; }
}

.crp-click-particle{
  position: fixed;
  width: 5px; height: 5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  opacity: 1;
  animation: crpClickParticle 0.6s ease-out forwards;
}
@keyframes crpClickParticle{
  to{ transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .crp-click-particle{ display: none; }
}