/*
Theme Name: Hiral Ritvi Digital Marketing
Theme URI: https://hiralritvi.com
Author: Hiral Ritvi
Author URI: https://hiralritvi.com
Description: A high-quality, animated digital marketing agency WordPress theme built for Hiral Ritvi. Includes a full homepage (hero, about, services, skills, FAQ, blog preview, contact), 4 service page template, blog, and a thank-you page. Fully editable through the WordPress Customizer and block editor.
Version: 1.3
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: hiralritvi
Tags: blog, e-commerce, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   0. CSS VARIABLES
   ========================================================================== */
:root{
  --hr-navy: #3B5B8B;
  --hr-navy-dark: #24345a;
  --hr-navy-light: #6f8fc0;
  --hr-gold: #F2B33D;
  --hr-gold-dark: #d99a25;
  --hr-gold-light: #ffd479;
  --hr-cream: #FBF7EF;
  --hr-ink: #1B2430;
  --hr-gray: #64707E;
  --hr-light-gray: #EFF2F6;
  --hr-white: #FFFFFF;
  --hr-radius: 22px;
  --hr-radius-sm: 10px;
  --hr-shadow: 0 10px 30px rgba(27, 36, 48, 0.08);
  --hr-shadow-lg: 0 20px 60px rgba(27, 36, 48, 0.14);
  --hr-transition: all 0.35s cubic-bezier(.22,.9,.32,1);
  --hr-font-head: 'Space Grotesk', 'Segoe UI', sans-serif;
  --hr-font-body: 'Inter', 'Segoe UI', sans-serif;
  --hr-container: 1220px;
  --hr-grad: linear-gradient(115deg, var(--hr-navy) 10%, var(--hr-navy-light) 50%, var(--hr-gold) 100%);
  --hr-grad-soft: linear-gradient(135deg, rgba(59,91,139,.24), rgba(242,179,61,.14));
  --hr-line: rgba(27,36,48,0.14);
}
.gradient-text{
  background-image: var(--hr-grad);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: hr-grad-shift 8s ease infinite;
}
@keyframes hr-grad-shift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* ==========================================================================
   1. RESET / BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--hr-font-body);
  color: var(--hr-ink);
  background: var(--hr-white);
  font-size: 16.5px;
  line-height: 1.7;
  overflow-x: hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5{
  font-family: var(--hr-font-head);
  font-weight:600;
  line-height:1.2;
  margin: 0 0 18px;
  color: var(--hr-navy-dark);
}
p{ margin:0 0 16px; color: var(--hr-gray); }
button{ font-family: inherit; cursor:pointer; }
.hr-container{ max-width: var(--hr-container); margin: 0 auto; padding: 0 24px; }
.hr-section{ padding: 100px 0; position:relative; }
.hr-section-alt{ background: var(--hr-cream); }
.hr-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--hr-gray); font-weight:500; letter-spacing:.02em;
  font-size:13px; margin-bottom:14px;
  padding:6px 14px 6px 8px; border:1px solid var(--hr-line); border-radius:100px;
  background: rgba(255,255,255,.02);
}
.hr-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background: var(--hr-grad); background-size:200% 200%; box-shadow:0 0 12px rgba(242,179,61,.6);
}
.hr-section-head{ max-width: 680px; margin-bottom: 56px; }
.hr-section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.hr-section-head h2{ font-size: clamp(28px, 4vw, 42px); }
.hr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 32px; border-radius: 100px; font-weight:600; font-size:15px;
  border: 2px solid transparent; transition: var(--hr-transition); white-space:nowrap;
}
.hr-btn-primary, .hr-btn-gold{
  background: var(--hr-grad); background-size:220% 220%; color:#08091a; border:none;
  box-shadow: 0 10px 40px -10px rgba(242,179,61,.45);
}
.hr-btn-primary:hover, .hr-btn-gold:hover{ box-shadow: 0 16px 55px -8px rgba(242,179,61,.6); transform: translateY(-3px); color:#08091a; }
.hr-btn-outline{ border-color: var(--hr-line); color: var(--hr-ink); background: rgba(255,255,255,.03); backdrop-filter: blur(6px); }
.hr-btn-outline:hover{ border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); transform: translateY(-3px); color: var(--hr-ink); }
.hr-btn-outline-light{ border-color: rgba(255,255,255,0.3); color: var(--hr-ink); background: rgba(255,255,255,.03); }
.hr-btn-outline-light:hover{ border-color: rgba(255,255,255,.5); }

/* ==========================================================================
   2. REVEAL ANIMATIONS
   ========================================================================== */
.hr-reveal{ opacity:0; transform: translateY(36px); transition: opacity .8s cubic-bezier(.22,.9,.32,1), transform .8s cubic-bezier(.22,.9,.32,1); }
.hr-reveal.is-visible{ opacity:1; transform: translateY(0); }
.hr-reveal-scale{ opacity:0; transform: scale(.92); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.9,.32,1); }
.hr-reveal-scale.is-visible{ opacity:1; transform: scale(1); }
.hr-reveal-left{ opacity:0; transform: translateX(-50px); transition: var(--hr-transition); }
.hr-reveal-left.is-visible{ opacity:1; transform: translateX(0); }
.hr-reveal-right{ opacity:0; transform: translateX(50px); transition: var(--hr-transition); }
.hr-reveal-right.is-visible{ opacity:1; transform: translateX(0); }
.hr-d1{ transition-delay:.08s; } .hr-d2{ transition-delay:.16s; } .hr-d3{ transition-delay:.24s; }
.hr-d4{ transition-delay:.32s; } .hr-d5{ transition-delay:.4s; } .hr-d6{ transition-delay:.48s; }

@keyframes hr-float{ 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-22px) rotate(4deg);} }
@keyframes hr-float-slow{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }
@keyframes hr-pulse{ 0%,100%{ transform: scale(1); opacity:.9;} 50%{ transform: scale(1.08); opacity:1;} }
@keyframes hr-spin-slow{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
@keyframes hr-marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@keyframes hr-shimmer{ 0%{ background-position: -200% 0;} 100%{ background-position: 200% 0;} }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
.hr-header{
  position: sticky; top:0; z-index: 999; background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(27,36,48,0.06); transition: var(--hr-transition);
}
.hr-header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 16px 24px; max-width: var(--hr-container); margin:0 auto; }
.hr-logo{ display:flex; align-items:center; gap:10px; font-family: var(--hr-font-head); font-weight:700; font-size:22px; color: var(--hr-navy-dark); font-style:normal; }
.hr-logo, .hr-logo *{ font-style:normal !important; }
.hr-logo img{ max-height:44px; width:auto; }
.hr-logo span{ color: var(--hr-gold-dark); }
.hr-nav ul{ display:flex; align-items:center; gap:36px; }
.hr-nav a{ font-weight:600; font-size:15px; color: var(--hr-navy-dark); position:relative; padding: 6px 0; }
.hr-nav a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--hr-gold); transition: var(--hr-transition); }
.hr-nav a:hover::after, .hr-nav .current-menu-item a::after{ width:100%; }
.hr-header-actions{ display:flex; align-items:center; gap:16px; }
.hr-header-actions .hr-btn{ padding:12px 26px; font-size:14px; }
.hr-burger{ display:none; flex-direction:column; gap:5px; width:30px; background:none; border:none; padding:0; }
.hr-burger span{ height:2px; background: var(--hr-navy-dark); border-radius:2px; transition: var(--hr-transition); }
.hr-mobile-menu{ display:none; }

@media (max-width: 900px){
  .hr-nav{ position:fixed; top:0; right:-100%; width: min(340px, 82vw); height:100vh; background: var(--hr-surface); box-shadow: -10px 0 40px rgba(0,0,0,.12); padding: 100px 32px 32px; transition: right .45s cubic-bezier(.22,.9,.32,1); z-index: 1000; }
  .hr-nav.is-open{ right:0; }
  .hr-nav ul{ flex-direction:column; align-items:flex-start; gap:26px; }
  .hr-burger{ display:flex; }
  .hr-header-actions .hr-btn-outline{ display:none; }
  body.hr-menu-open{ overflow:hidden; }
  .hr-nav-overlay{ display:none; position:fixed; inset:0; background:rgba(27,36,48,.4); z-index:998; }
  .hr-nav-overlay.is-open{ display:block; }
}
.hr-burger.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hr-burger.is-active span:nth-child(2){ opacity:0; }
.hr-burger.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   4. HERO
   ========================================================================== */
.hr-hero{
  position:relative; padding: 120px 0 140px; overflow:hidden;
  /* Translucent (not solid) so the site-wide ambient Three.js canvas behind
     the whole page reads through the Hero the same cinematic way it already
     does behind About — an off-white veil keeps the animation clearly
     visible while copy/buttons stay legible on the light theme. */
  background: linear-gradient(180deg, rgba(251,247,239,.55) 0%, rgba(240,233,214,.85) 100%);
}
.hr-hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:60px; align-items:center; }
.hr-hero-badge{
  display:inline-flex; align-items:center; gap:10px; background: var(--hr-surface); border:1px solid rgba(59,91,138,.15);
  padding:8px 18px 8px 8px; border-radius:100px; font-size:13px; font-weight:600; color:var(--hr-navy); box-shadow: var(--hr-shadow); margin-bottom:26px;
}
.hr-hero-badge .dot{ width:24px; height:24px; border-radius:50%; background: var(--hr-gold); display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; animation: hr-pulse 2.4s ease-in-out infinite; }
.hr-hero h1{ font-size: clamp(38px, 5.4vw, 64px); margin-bottom:22px; letter-spacing:-0.5px; }
.hr-hero h1 .accent{ color: var(--hr-gold-dark); position:relative; white-space:nowrap; }
.hr-hero h1 .accent.gradient-text{ color: transparent; }
.hr-hero h1 .accent svg{ position:absolute; left:0; bottom:-10px; width:100%; }
.hr-hero .lead{ font-size:19px; max-width:520px; margin-bottom:36px; font-weight:400; color: var(--hr-gray); }
.hr-hero-cta{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom: 48px; }
.hr-hero-stats{ display:flex; gap:40px; flex-wrap:wrap; }
.hr-hero-stats .stat b{ display:block; font-family: var(--hr-font-head); font-size:30px; color: var(--hr-navy-dark); }
.hr-hero-stats .stat span{ font-size:13px; color: var(--hr-gray); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }

.hr-hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; }
.hr-hero-visual .frame{
  position:relative; width:100%; aspect-ratio: 1/1.05; border-radius: 32px; overflow:hidden;
  background: linear-gradient(145deg, var(--hr-navy) 0%, var(--hr-navy-light) 100%); box-shadow: var(--hr-shadow-lg);
}
.hr-hero-visual .frame img{ width:100%; height:100%; object-fit:cover; mix-blend-mode: luminosity; opacity:.85; }
.hr-hero-visual .frame::after{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 30% 20%, rgba(242,179,61,.35), transparent 55%); }
/* Hovering info cards — direct children of .hr-hero, positioned across the
   whole hero (not tied to the now-removed image frame), like the reference. */
.hr-float-card{
  position:absolute; border-radius:16px; padding:14px 18px; font-size:13px;
  border:1px solid rgba(59,91,139,.15); background: rgba(255,255,255,.78); backdrop-filter: blur(14px);
  box-shadow: var(--hr-shadow);
  display:flex; align-items:center; gap:10px; font-weight:600; color: var(--hr-ink);
  z-index:3;
}
.hr-float-card .ic{ display:flex; }
.hr-float-card .ic svg{ width:18px; height:18px; }
#hr-fc1{ top:20%; left:7%; }
#hr-fc2{ top:34%; right:6%; }
#hr-fc3{ bottom:16%; left:12%; }
@media (max-width: 900px){ .hr-float-card{ display:none; } }

.hr-scroll-cue{ position:absolute; bottom:38px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; }
.hr-scroll-cue .line{ width:1px; height:44px; background: linear-gradient(var(--hr-gold), transparent); }
.hr-scroll-cue span:last-child{ font-size:11px; color: var(--hr-gray); letter-spacing:.08em; }
@media (max-width: 700px){ .hr-scroll-cue{ display:none; } }

.hr-blob{ position:absolute; border-radius:50%; filter: blur(60px); opacity:.5; z-index:0; }
.hr-blob-1{ width:340px; height:340px; background: var(--hr-gold); top:-120px; right:-100px; animation: hr-float-slow 9s ease-in-out infinite; }
.hr-blob-2{ width:280px; height:280px; background: var(--hr-navy-light); bottom:-100px; left:-80px; animation: hr-float-slow 11s ease-in-out infinite reverse; }

@media (max-width: 980px){
  .hr-hero-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   3b. SCROLL RAIL — right-edge section dot nav (homepage only)
   ========================================================================== */
#hr-scroll-rail{
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 400;
  display: flex; flex-direction: column; gap: 16px; align-items: flex-end;
}
@media (max-width: 980px){ #hr-scroll-rail{ display:none; } }
.hr-rail-item{ display:flex; align-items:center; gap:10px; cursor:pointer; background:none; border:none; padding:0; }
.hr-rail-item .lbl{ font-size:11px; color: var(--hr-gray); opacity:0; transform: translateX(6px); transition:.3s ease; white-space:nowrap; }
.hr-rail-item:hover .lbl{ opacity:1; transform: translateX(0); }
.hr-rail-item .node{ width:7px; height:7px; border-radius:50%; background: rgba(27,36,48,.12); border:1px solid rgba(27,36,48,.28); transition:.3s ease; }
.hr-rail-item.is-active .node{ background: var(--hr-grad); box-shadow: 0 0 10px rgba(242,179,61,.7); transform: scale(1.4); }
.hr-rail-item.is-active .lbl{ color: var(--hr-ink); opacity:1; transform: translateX(0); }

/* ==========================================================================
   5. LOGO / TRUST STRIP
   ========================================================================== */
.hr-trust{ padding: 40px 0; border-top:1px solid var(--hr-light-gray); border-bottom:1px solid var(--hr-light-gray); }
.hr-trust-inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.hr-trust p{ margin:0; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:1px; color: var(--hr-navy); }
.hr-trust-tags{ display:flex; gap:12px; flex-wrap:wrap; }
.hr-trust-tags span{ background: var(--hr-light-gray); color: var(--hr-navy-dark); font-weight:600; font-size:13px; padding:8px 16px; border-radius:100px; }

/* ==========================================================================
   6. ABOUT
   ========================================================================== */
.hr-section#about{ overflow:hidden; }
.hr-about-grid{ position:relative; z-index:1; display:grid; grid-template-columns: .85fr 1.15fr; gap:70px; align-items:center; }
/* Same glowing blobs used in the Hero, echoed here so the background
   animation visibly carries through from Hero into About. */
.hr-about-blob{ position:absolute; border-radius:50%; filter: blur(70px); opacity:.4; z-index:0; pointer-events:none; }
.hr-about-blob-1{ width:300px; height:300px; background: var(--hr-navy-light); top:-60px; right:4%; animation: hr-float-slow 10s ease-in-out infinite; }
.hr-about-blob-2{ width:260px; height:260px; background: var(--hr-gold); bottom:-80px; left:2%; animation: hr-float-slow 12s ease-in-out infinite reverse; }
.hr-about-visual{ position:relative; }
.hr-about-visual .img-wrap{ border-radius: var(--hr-radius); overflow:hidden; box-shadow: var(--hr-shadow-lg); aspect-ratio: 4/4.6; }
.hr-about-visual .img-wrap img{ width:100%; height:100%; object-fit:cover; }
.hr-about-badge{
  position:absolute; bottom:-28px; left:-28px; background: var(--hr-surface); border-radius: 18px; box-shadow: var(--hr-shadow-lg);
  padding:20px 24px; display:flex; align-items:center; gap:14px;
}
.hr-about-badge .num{ font-family: var(--hr-font-head); font-size:32px; font-weight:700; color: var(--hr-gold-dark); }
.hr-about-badge .txt{ font-size:13px; font-weight:600; color: var(--hr-navy-dark); line-height:1.3; max-width:120px; }
.hr-about-content ul.hr-check-list{ margin-top:26px; display:grid; gap:16px; }
.hr-check-list li{ display:flex; align-items:flex-start; gap:14px; font-weight:600; color: var(--hr-navy-dark); }
.hr-check-list li .tick{ flex:none; width:26px; height:26px; border-radius:50%; background: rgba(242,179,61,.2); color: var(--hr-gold-dark); display:flex; align-items:center; justify-content:center; font-size:13px; }
@media (max-width: 900px){ .hr-about-grid{ grid-template-columns:1fr; } .hr-about-visual{ max-width:400px; margin: 0 auto 50px; } }

/* ==========================================================================
   7. SERVICES
   ========================================================================== */
.hr-services-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:26px; }
.hr-service-card{
  background: var(--hr-surface); border:1px solid var(--hr-light-gray); border-radius: var(--hr-radius); padding: 38px 30px;
  transition: var(--hr-transition); position:relative; overflow:hidden;
}
.hr-service-card::before{ content:""; position:absolute; inset:0; background: linear-gradient(160deg, var(--hr-navy), var(--hr-navy-light)); opacity:0; transition: var(--hr-transition); z-index:0; }
.hr-service-card:hover{ transform: translateY(-10px); box-shadow: var(--hr-shadow-lg); border-color:transparent; }
.hr-service-card:hover::before{ opacity:1; }
.hr-service-card > *{ position:relative; z-index:1; }
.hr-service-card .num{ font-family: var(--hr-font-head); font-size:14px; font-weight:700; color: var(--hr-gold-dark); }
.hr-service-card .icon{ width:56px; height:56px; border-radius:14px; background: rgba(242,179,61,.15); display:flex; align-items:center; justify-content:center; font-size:26px; margin: 16px 0 20px; transition: var(--hr-transition); }
.hr-service-card:hover .icon{ background: rgba(255,255,255,.15); transform: scale(1.08) rotate(-6deg); }
.hr-service-card h3{ font-size:20px; margin-bottom:10px; transition: var(--hr-transition); }
.hr-service-card:hover h3{ color:#fff; }
.hr-service-card p{ font-size:14.5px; margin-bottom:20px; transition: var(--hr-transition); }
.hr-service-card:hover p{ color: rgba(255,255,255,.85); }
.hr-service-card .hr-more{ font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px; color: var(--hr-navy); transition: var(--hr-transition); }
.hr-service-card:hover .hr-more{ color: var(--hr-gold); gap:12px; }
@media (max-width: 1100px){ .hr-services-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .hr-services-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   8. SKILLS
   ========================================================================== */
.hr-skills{ background: var(--hr-navy); color:#fff; position:relative; overflow:hidden; }
.hr-skills::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 15%, rgba(242,179,61,.18), transparent 50%); }
.hr-skills .hr-section-head h2, .hr-skills .hr-section-head p{ color:#fff; }
.hr-skills .hr-section-head p{ color: rgba(255,255,255,.75); }
.hr-skills .hr-eyebrow{ color: var(--hr-gold-light); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.hr-skills-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; position:relative; z-index:1; }
.hr-skill-pill{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius: 14px;
  padding:18px 20px; display:flex; align-items:center; gap:14px; font-weight:600; font-size:14.5px; transition: var(--hr-transition);
}
.hr-skill-pill:hover{ background: var(--hr-gold); color: var(--hr-navy-dark); transform: translateY(-4px); border-color: transparent; }
.hr-skill-pill .n{ font-family: var(--hr-font-head); font-weight:700; font-size:13px; color: var(--hr-gold); flex:none; width:28px; height:28px; border-radius:50%; background: rgba(242,179,61,.16); display:flex; align-items:center; justify-content:center; transition: var(--hr-transition); }
.hr-skill-pill:hover .n{ background: rgba(27,36,48,.15); color: var(--hr-navy-dark); }
@media (max-width: 980px){ .hr-skills-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .hr-skills-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   9. PROCESS / WHY (mini steps, used on service pages)
   ========================================================================== */
.hr-steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:26px; counter-reset: hr-step; }
.hr-step{ position:relative; padding: 34px 26px; background: var(--hr-surface); border-radius: var(--hr-radius); border:1px solid var(--hr-light-gray); }
.hr-step::before{ counter-increment: hr-step; content: counter(hr-step); font-family: var(--hr-font-head); font-size:38px; font-weight:700; color: rgba(242,179,61,.35); display:block; margin-bottom:14px; }
@media (max-width: 900px){ .hr-steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .hr-steps{ grid-template-columns: 1fr; } }

/* ==========================================================================
   10. BLOG PREVIEW / GRID
   ========================================================================== */
.hr-blog-header-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.hr-blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:30px; }
.hr-blog-card{ background: var(--hr-surface); border-radius: var(--hr-radius); border:1px solid var(--hr-light-gray); transition: var(--hr-transition); display:flex; flex-direction:column; }
.hr-blog-card:hover{ box-shadow: var(--hr-shadow-lg); transform: translateY(-8px); border-color: rgba(242,179,61,.4); }
.hr-blog-card .body{ padding:32px 28px; flex:1; display:flex; flex-direction:column; }
.hr-blog-card .cat{ display:inline-block; background: rgba(242,179,61,.15); color: var(--hr-gold-dark); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.5px; padding:6px 14px; border-radius:100px; margin-bottom:18px; align-self:flex-start; }
.hr-blog-card h3{ font-size:20px; line-height:1.35; margin-bottom:14px; }
.hr-blog-card .body p{ font-size:14.5px; line-height:1.75; color: var(--hr-gray); margin-bottom:0; }
.hr-blog-card .meta{ margin-top:auto; padding-top:18px; display:flex; align-items:center; gap:10px; font-size:13px; color: var(--hr-gray); border-top:1px solid var(--hr-light-gray); }
@media (max-width: 980px){ .hr-blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .hr-blog-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.hr-faq-wrap{ max-width: 820px; margin: 0 auto; display:grid; gap:16px; }
.hr-faq-item{ background: var(--hr-surface); border:1px solid var(--hr-light-gray); border-radius: var(--hr-radius-sm); overflow:hidden; transition: var(--hr-transition); }
.hr-faq-item.is-open{ border-color: var(--hr-gold); box-shadow: var(--hr-shadow); }
.hr-faq-q{ width:100%; background:none; border:none; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 22px 26px; font-family: var(--hr-font-head); font-weight:600; font-size:16.5px; color: var(--hr-navy-dark); }
.hr-faq-q .plus{ flex:none; width:32px; height:32px; border-radius:50%; background: var(--hr-light-gray); display:flex; align-items:center; justify-content:center; transition: var(--hr-transition); font-size:16px; color: var(--hr-navy); }
.hr-faq-item.is-open .hr-faq-q .plus{ background: var(--hr-gold); color:#fff; transform: rotate(135deg); }
.hr-faq-a{ max-height:0; overflow:hidden; transition: max-height .4s ease; }
.hr-faq-a-inner{ padding: 0 26px 24px; color: var(--hr-gray); }

/* ==========================================================================
   12. CONTACT
   ========================================================================== */
.hr-contact{ background: var(--hr-cream); position:relative; overflow:hidden; }
.hr-contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap:50px; align-items:flex-start; }
.hr-contact-info{ background: var(--hr-navy); color:#fff; border-radius: var(--hr-radius); padding: 44px 38px; position:relative; overflow:hidden; }
.hr-contact-info::before{ content:""; position:absolute; width:220px; height:220px; background: rgba(242,179,61,.18); border-radius:50%; top:-80px; right:-80px; }
.hr-contact-info h3{ color:#fff; position:relative; }
.hr-contact-info p{ color: rgba(255,255,255,.78); position:relative; }
.hr-contact-list{ display:grid; gap:20px; margin-top:30px; position:relative; }
.hr-contact-list a, .hr-contact-list div{ display:flex; align-items:center; gap:14px; font-weight:600; color:#fff; }
.hr-contact-list .ic{ flex:none; width:44px; height:44px; border-radius:12px; background: rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:18px; transition: var(--hr-transition); }
.hr-contact-list a:hover .ic{ background: var(--hr-gold); transform: translateY(-3px); }
.hr-contact-social{ display:flex; gap:12px; margin-top:34px; position:relative; }
.hr-contact-social a{ width:42px; height:42px; border-radius:50%; background: rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; transition: var(--hr-transition); }
.hr-contact-social a:hover{ background: var(--hr-gold); transform: translateY(-4px) rotate(8deg); }
.hr-contact-form-wrap{ background: var(--hr-surface); border-radius: var(--hr-radius); padding: 44px 40px; box-shadow: var(--hr-shadow); }
.hr-contact-form-wrap h3{ margin-bottom:8px; }
.hr-form-placeholder-note{ font-size:13px; background: rgba(242,179,61,.12); border:1px dashed var(--hr-gold); color: var(--hr-navy-dark); padding:14px 16px; border-radius: 10px; margin-top:18px; }
@media (max-width: 900px){ .hr-contact-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   13. CTA BAND
   ========================================================================== */
.hr-cta-band{ background: linear-gradient(120deg, var(--hr-navy), var(--hr-navy-dark)); color:#fff; border-radius: 28px; padding: 60px 60px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; position:relative; overflow:hidden; }
.hr-cta-band::before{ content:""; position:absolute; width:300px; height:300px; border-radius:50%; background: rgba(242,179,61,.16); right:-100px; top:-120px; }
.hr-cta-band h2{ color:#fff; margin-bottom:8px; font-size: clamp(24px,3vw,32px); }
.hr-cta-band p{ color: rgba(255,255,255,.75); margin:0; }
.hr-cta-band-content{ position:relative; z-index:1; }
.hr-cta-band .hr-btn{ position:relative; z-index:1; }
@media (max-width: 700px){ .hr-cta-band{ flex-direction:column; text-align:center; padding:44px 30px; } }

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.hr-footer{ background: var(--hr-bg-alt); color: rgba(255,255,255,.7); padding-top: 80px; }
.hr-footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,.08); }
.hr-footer-logo{ font-family: var(--hr-font-head); font-size:22px; font-weight:700; color:#fff; margin-bottom:16px; display:block; }
.hr-footer-logo span{ color: var(--hr-gold); }
.hr-footer h4{ color:#fff; font-size:15px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:22px; }
.hr-footer ul{ display:grid; gap:14px; }
.hr-footer ul a{ transition: var(--hr-transition); font-size:14.5px; }
.hr-footer ul a:hover{ color: var(--hr-gold); padding-left:4px; }
.hr-footer-social{ display:flex; gap:10px; margin-top:22px; }
.hr-footer-social a{ width:40px; height:40px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition: var(--hr-transition); color:#fff; }
.hr-footer-social a:hover{ background: var(--hr-gold); color: var(--hr-navy-dark); transform: translateY(-4px); }
.hr-footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding: 26px 0; font-size:13px; flex-wrap:wrap; gap:10px; }
.hr-footer-bottom a:hover{ color: var(--hr-gold); }

/* ==========================================================================
   15. INNER / PAGE HEADER (services, blog, thank you)
   ========================================================================== */
.hr-page-header{ background: linear-gradient(160deg, var(--hr-navy) 0%, var(--hr-navy-dark) 100%); color:#fff; padding: 76px 0 80px; text-align:center; position:relative; overflow:hidden; }
.hr-page-header::before{ content:""; position:absolute; width:260px; height:260px; border-radius:50%; background: rgba(242,179,61,.16); top:-100px; right:10%; }
.hr-page-header .hr-eyebrow{ justify-content:center; color: var(--hr-gold); border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); }
.hr-page-header h1{ color:#fff; font-size: clamp(30px,4.4vw,48px); margin-bottom:14px; position:relative; }
.hr-page-header p{ color: rgba(255,255,255,.78); max-width:600px; margin:0 auto; position:relative; }
.hr-breadcrumb{ position:relative; display:flex; justify-content:center; gap:8px; font-size:13px; margin-top:18px; color: rgba(255,255,255,.6); }
.hr-breadcrumb a:hover{ color: var(--hr-gold); }

/* Service single page */
.hr-service-detail{ display:grid; grid-template-columns: 2fr 1fr; gap:60px; }
.hr-service-content h2{ font-size:26px; margin-top:40px; }
.hr-service-content h2:first-child{ margin-top:0; }
.hr-service-content ul{ display:grid; gap:14px; margin: 20px 0; }
.hr-service-content ul li{ display:flex; gap:12px; align-items:flex-start; color: var(--hr-gray); }
.hr-service-content ul li::before{ content:"\2713"; flex:none; width:24px; height:24px; border-radius:50%; background: rgba(242,179,61,.18); color: var(--hr-gold-dark); font-size:12px; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.hr-service-sidebar{ position:sticky; top:110px; align-self:start; display:grid; gap:24px; }
.hr-sidebar-card{ background: var(--hr-cream); border-radius: var(--hr-radius); padding: 32px 28px; }
.hr-sidebar-card h4{ margin-bottom:16px; }
.hr-sidebar-services{ display:grid; gap:4px; }
.hr-sidebar-services a{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius: 10px; font-weight:600; font-size:14.5px; color: var(--hr-navy-dark); transition: var(--hr-transition); }
.hr-sidebar-services a:hover, .hr-sidebar-services a.is-current{ background: var(--hr-surface); color: var(--hr-navy); box-shadow: var(--hr-shadow); }
.hr-sidebar-card.dark{ background: var(--hr-navy); color:#fff; }
.hr-sidebar-card.dark h4{ color:#fff; }
.hr-sidebar-card.dark p{ color: rgba(255,255,255,.75); }
@media (max-width: 960px){ .hr-service-detail{ grid-template-columns:1fr; } .hr-service-sidebar{ position:static; } }

/* Blog single */
.hr-post-wrap{ max-width: 780px; margin: 0 auto; }
.hr-post-thumb{ border-radius: var(--hr-radius); overflow:hidden; margin-bottom:40px; box-shadow: var(--hr-shadow); }
.hr-post-content{ font-size:17px; }
.hr-post-content h2{ font-size:26px; margin-top:38px; }
.hr-post-content h3{ font-size:21px; margin-top:28px; }
.hr-post-content p{ color: var(--hr-ink); opacity:.85; }
.hr-post-content ul, .hr-post-content ol{ margin: 0 0 20px 20px; color: var(--hr-ink); opacity: .85; }
.hr-post-content blockquote{ border-left: 4px solid var(--hr-gold); margin:28px 0; padding: 4px 26px; font-style:italic; color: var(--hr-navy-dark); font-size:19px; }
.hr-post-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:40px; padding-top:30px; border-top:1px solid var(--hr-light-gray); }
.hr-post-tags a{ background: var(--hr-light-gray); padding:8px 16px; border-radius:100px; font-size:13px; font-weight:600; color: var(--hr-navy-dark); }
.hr-post-tags a:hover{ background: var(--hr-gold); color:#fff; }
.hr-post-nav{ display:flex; justify-content:space-between; gap:20px; margin-top:50px; }
.hr-post-nav a{ flex:1; background: var(--hr-cream); padding:22px 26px; border-radius: var(--hr-radius-sm); font-weight:600; transition: var(--hr-transition); }
.hr-post-nav a:hover{ background: var(--hr-navy); color:#fff; }
.hr-post-nav span{ display:block; font-size:12px; text-transform:uppercase; opacity:.6; margin-bottom:6px; }

/* Pagination */
.hr-pagination{ display:flex; justify-content:center; gap:10px; margin-top:50px; }
.hr-pagination a, .hr-pagination span{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: var(--hr-light-gray); font-weight:700; transition: var(--hr-transition); }
.hr-pagination .current{ background: var(--hr-navy); color:#fff; }
.hr-pagination a:hover{ background: var(--hr-gold); color:#fff; }

/* ==========================================================================
   16. THANK YOU PAGE
   ========================================================================== */
.hr-thankyou{ min-height: 78vh; display:flex; align-items:center; justify-content:center; text-align:center; padding: 100px 0; background: linear-gradient(180deg, var(--hr-cream), #fff); position:relative; overflow:hidden; }
.hr-thankyou-check{ width:110px; height:110px; border-radius:50%; background: rgba(242,179,61,.16); display:flex; align-items:center; justify-content:center; margin: 0 auto 34px; animation: hr-pulse 2.6s ease-in-out infinite; }
.hr-thankyou-check .inner{ width:76px; height:76px; border-radius:50%; background: var(--hr-gold); display:flex; align-items:center; justify-content:center; color:#fff; font-size:34px; }
.hr-thankyou h1{ font-size: clamp(28px,4vw,44px); }
.hr-thankyou .lead{ max-width:560px; margin: 0 auto 40px; font-size:18px; }
.hr-thankyou-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:50px; }
.hr-thankyou-social{ display:flex; gap:14px; justify-content:center; }
.hr-thankyou-social a{ width:48px; height:48px; border-radius:50%; background: var(--hr-surface); box-shadow: var(--hr-shadow); display:flex; align-items:center; justify-content:center; transition: var(--hr-transition); color: var(--hr-navy); }
.hr-thankyou-social a:hover{ background: var(--hr-gold); color:#fff; transform: translateY(-5px); }

/* ==========================================================================
   17. MISC / UTIL
   ========================================================================== */
.hr-404{ text-align:center; padding: 140px 0; }
.hr-404 h1{ font-size:120px; color: var(--hr-gold); margin-bottom:0; }
.hr-404 h1.gradient-text{ color: transparent; }
.hr-comments{ max-width:780px; margin: 60px auto 0; }
.hr-cursor-dot{ position:fixed; width:10px; height:10px; background: var(--hr-gold); border-radius:50%; pointer-events:none; z-index:9999; transform: translate(-50%,-50%); transition: transform .15s ease; display:none; }
@media (min-width: 1200px){ .hr-cursor-dot{ display:block; } }
.screen-reader-text{ position:absolute !important; clip: rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }
::selection{ background: var(--hr-gold); color:#fff; }

/* Skip link */
.skip-link{ position:absolute; left:-9999px; top:0; background: var(--hr-navy); color:#fff; padding:14px 20px; z-index:9999; }
.skip-link:focus{ left:10px; top:10px; }

/* Form basic styling (works with WPForms + fallback) */
.hr-contact-form-wrap form input[type=text],
.hr-contact-form-wrap form input[type=email],
.hr-contact-form-wrap form input[type=tel],
.hr-contact-form-wrap form textarea,
.hr-contact-form-wrap form select{
  width:100%; padding:14px 16px; border:1px solid var(--hr-light-gray); border-radius:10px; margin-bottom:16px; font-family:inherit; transition: var(--hr-transition);
}
.hr-contact-form-wrap form input:focus, .hr-contact-form-wrap form textarea:focus{ outline:none; border-color: var(--hr-gold); box-shadow: 0 0 0 4px rgba(242,179,61,.15); }
.hr-contact-form-wrap form button, .hr-contact-form-wrap form input[type=submit]{
  background: var(--hr-navy); color:#fff; border:none; padding:15px 32px; border-radius:100px; font-weight:600; transition: var(--hr-transition);
}
.hr-contact-form-wrap form button:hover, .hr-contact-form-wrap form input[type=submit]:hover{ background: var(--hr-navy-dark); transform: translateY(-2px); }

@media (max-width: 780px){
  .hr-section{ padding: 70px 0; }
  .hr-cta-band{ border-radius:20px; }
}

/* ==========================================================================
   17b. CONTENT BUTTONS (block-editor "Buttons" block used inside service /
   blog page content) — made to look like proper premium buttons everywhere
   ========================================================================== */
.hr-service-content .wp-block-buttons,
.hr-post-content .wp-block-buttons{ display:flex; gap:16px; flex-wrap:wrap; margin: 28px 0; }
.hr-service-content .wp-block-button__link,
.hr-post-content .wp-block-button__link,
.hr-service-content a.button,
.hr-post-content a.button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 32px; border-radius: 100px; font-weight:600; font-size:15px;
  background: var(--hr-grad); background-size:220% 220%; color:#08091a !important;
  border:none; text-decoration:none !important; transition: var(--hr-transition);
  box-shadow: 0 10px 40px -10px rgba(242,179,61,.45);
}
.hr-service-content .wp-block-button__link:hover,
.hr-post-content .wp-block-button__link:hover{
  transform: translateY(-3px); box-shadow: 0 16px 55px -8px rgba(242,179,61,.6); color:#08091a !important;
}
.hr-service-content .wp-block-button.is-style-outline .wp-block-button__link,
.hr-post-content .wp-block-button.is-style-outline .wp-block-button__link{
  background: rgba(255,255,255,.03); color: var(--hr-ink) !important; border:2px solid var(--hr-line);
  box-shadow:none;
}
.hr-service-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.hr-post-content .wp-block-button.is-style-outline .wp-block-button__link:hover{
  border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06);
}

/* ==========================================================================
   18. HEADER OVERRIDE — Pill-style floating header
   ========================================================================== */
/* Pill-style floating header */
.hr-header{
	background: transparent !important;
	position: fixed;
	width: min(1000px, calc(100% - 40px));
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	transition: width .45s cubic-bezier(.22,.9,.32,1);
}
.hr-header-inner{
	max-width: 100%;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid rgba(59,91,138,0.15);
	border-radius: 999px;
	padding: 10px 20px 10px 28px;
	box-shadow: 0 8px 30px rgba(27,36,48,0.08);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 20px;
	transition: padding .45s cubic-bezier(.22,.9,.32,1), background .45s ease, box-shadow .45s ease;
}
.hr-header-inner .hr-nav{ justify-self: center; }
.hr-header-inner .hr-header-actions{ justify-self: end; }
/* Contracted state — mirrors the cinematic reference: the pill narrows and
   tightens its padding once the page has scrolled a little. */
.hr-header.is-scrolled{ width: min(760px, calc(100% - 40px)); }
.hr-header.is-scrolled .hr-header-inner{ padding: 8px 10px 8px 22px; box-shadow: 0 10px 34px rgba(27,36,48,0.14); }
.hr-logo{
	font-size: 18px;
	padding-right: 20px;
	border-right: 1px solid rgba(59,91,138,0.2);
	flex-shrink: 0;
	gap: 4px !important;
	transition: padding .45s ease;
}
.hr-header.is-scrolled .hr-logo{ padding-right: 14px; }
.hr-nav ul{
	display: flex;
	gap: 26px;
	align-items: center;
}
.hr-nav a{
	font-size: 14px;
	letter-spacing: 0.2px;
	text-transform: none;
	font-weight: 500;
}
.hr-header-actions .hr-btn{
	border-radius: 999px;
	padding: 10px 22px;
	font-size: 13px;
}

/* ---- Services dropdown (desktop: hover/focus, mobile: click-expand) ---- */
.hr-nav li{ position:relative; }
.hr-nav li.hr-has-dropdown > a{ display:inline-flex; align-items:center; gap:6px; }
.hr-caret{ width:6px; height:6px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform: rotate(45deg); transition: transform .3s ease; margin-top:-3px; flex:none; }
.hr-nav li.hr-has-dropdown:hover > a .hr-caret,
.hr-nav li.hr-has-dropdown:focus-within > a .hr-caret,
.hr-nav li.hr-has-dropdown.is-open > a .hr-caret{ transform: rotate(-135deg); margin-top:2px; }
.hr-dropdown-menu{
  position:absolute; top: calc(100% + 18px); left:50%; transform: translateX(-50%) translateY(8px);
  background: var(--hr-surface, #FFFFFF); border:1px solid var(--hr-light-gray); border-radius:16px;
  min-width:250px; padding:10px; box-shadow: 0 20px 60px rgba(27,36,48,.18);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .3s cubic-bezier(.22,.9,.32,1), transform .3s cubic-bezier(.22,.9,.32,1), visibility .3s;
  z-index:500; display:grid; gap:2px;
}
.hr-nav li.hr-has-dropdown:hover > .hr-dropdown-menu,
.hr-nav li.hr-has-dropdown:focus-within > .hr-dropdown-menu,
.hr-nav li.hr-has-dropdown.is-open > .hr-dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0);
}
.hr-dropdown-menu li{ list-style:none; }
.hr-dropdown-menu a{ display:block; padding:11px 14px; border-radius:10px; font-size:13.5px; font-weight:500; text-transform:none; letter-spacing:0; color: var(--hr-ink, #1B2430); white-space:nowrap; transition: var(--hr-transition); }
.hr-dropdown-menu a:hover{ background: rgba(242,179,61,.16); color: var(--hr-gold-dark); }
.hr-dropdown-menu a::after{ display:none !important; }

@media (max-width: 900px){
  .hr-dropdown-menu{
    position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border:none; background:rgba(27,36,48,.04); margin-top:8px;
    display:none; min-width:0; padding:4px 0 4px 14px; grid-template-columns:1fr;
  }
  .hr-nav li.hr-has-dropdown.is-open > .hr-dropdown-menu{ display:grid; }
  .hr-nav li.hr-has-dropdown > a{ justify-content:space-between; width:100%; }
  .hr-caret{ margin-left:6px; }
  .hr-dropdown-menu a{ color: var(--hr-ink); }
}

/* No extra push needed - header floats over hero, hero has its own top spacing */
main#hr-main-content{
	padding-top: 0 !important;
}

.hr-form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:0 16px; }
.hr-form-row input{ margin-bottom:16px; }
@media (max-width: 520px){ .hr-form-row{ grid-template-columns: 1fr; } }
.hr-hp-field{ position:absolute !important; left:-9999px !important; top:-9999px !important; width:1px; height:1px; overflow:hidden; }
.hr-form-note{ font-size:14px; padding:14px 18px; border-radius:12px; margin-bottom:20px; font-weight:600; }
.hr-form-note-success{ background: rgba(46,204,113,.14); border:1px solid rgba(46,204,113,.4); color:#2ecc71; }
.hr-form-note-error{ background: rgba(242,90,90,.12); border:1px solid rgba(242,90,90,.4); color:#f25a5a; }
.hr-native-contact-form button[type="submit"]{ width:100%; border-radius:100px; }

@media (max-width: 900px){
	.hr-header{
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		transform: none;
	}
	.hr-header-inner{
		border-radius: 0;
		max-width: 100%;
		padding: 14px 20px;
	}
	.hr-nav ul{
		display: none;
	}
	.hr-nav.is-open ul{
		display: flex;
	}
}
.hr-header{
	border: none !important;
	border-bottom: none !important;
}

.hr-hero{
	padding-top: 170px !important;
}
@media (max-width: 600px){
	.hr-hero{
		padding-top: 110px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	.hr-hero h1{
		font-size: 32px !important;
		line-height: 1.15 !important;
	}
	.hr-hero .lead{
		font-size: 15px !important;
	}
	.hr-hero-badge{
		font-size: 12px !important;
	}
	.hr-hero-cta{
		flex-direction: column;
		align-items: stretch;
		gap: 12px !important;
	}
	.hr-hero-cta a{
		text-align: center;
		font-size: 14px !important;
		padding: 12px 20px !important;
	}
	.hr-hero-stats{
		gap: 20px !important;
	}
	.hr-hero-stats .stat b{
		font-size: 22px !important;
	}
	.hr-hero-visual{
		max-width: 280px !important;
		margin: 0 auto 20px !important;
	}
	.hr-logo{
		font-size: 15px !important;
	}
	.hr-header-inner{
		padding: 10px 14px !important;
	}
}
.hr-page-header{
	padding-top: 170px !important;
}

@media (max-width: 600px){
	.hr-page-header{
		padding-top: 110px !important;
	}
}

/* ==========================================================================
   19. LIGHT THEME (same brand palette, off-white surfaces)
   ========================================================================== */
:root{
  --hr-bg: #FCF9F2;
  --hr-bg-alt: var(--hr-navy-dark);
  --hr-surface: #FFFFFF;
  --hr-surface-2: #F1EEE3;
}
body{ font-family: var(--hr-font-body); -webkit-font-smoothing: antialiased; }
body{ background: var(--hr-bg); }
::selection{ background: var(--hr-gold); color: var(--hr-navy-dark); }

/* header / nav text sits on the light glass pill — brand navy reads best */
.hr-logo, .hr-nav a, .hr-mobile-menu a{ color: var(--hr-navy-dark); }
.hr-burger span{ background: var(--hr-navy-dark); }

/* hero badge / floating cards sit over the off-white hero veil */
.hr-hero-badge{ color: var(--hr-navy); border-color: rgba(59,91,138,.2); }
.hr-trust-tags span{ color: var(--hr-navy-dark); }
.hr-sidebar-services a:hover, .hr-sidebar-services a.is-current{ color: var(--hr-navy); border:1px solid rgba(242,179,61,.35); }
.hr-thankyou-social a{ color: var(--hr-navy); }

/* form inputs: soft off-white fields instead of browser-default stark white */
.hr-contact-form-wrap form input[type=text],
.hr-contact-form-wrap form input[type=email],
.hr-contact-form-wrap form input[type=tel],
.hr-contact-form-wrap form textarea,
.hr-contact-form-wrap form select{
  background: var(--hr-surface-2); color: var(--hr-ink); border-color: var(--hr-light-gray);
}
.hr-contact-form-wrap form ::placeholder{ color: var(--hr-gray); opacity:.8; }

/* ==========================================================================
   20. NEON ICON GLOW (brand palette: gold + navy)
   ========================================================================== */
.hr-service-card .icon{
  background: var(--hr-grad) !important; background-size:220% 220% !important;
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 26px -8px rgba(242,179,61,.5);
  color: #fff;
}
.hr-service-card:hover .icon{
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 14px 34px -8px rgba(242,179,61,.7);
  transform: scale(1.06) rotate(-4deg);
}
.hr-float-card .ic{
  text-shadow: 0 0 8px rgba(92,124,171,.85), 0 0 18px rgba(92,124,171,.5);
  filter: drop-shadow(0 0 4px rgba(92,124,171,.4));
}
.hr-about-badge .num{
  text-shadow: 0 0 10px rgba(242,179,61,.7), 0 0 22px rgba(242,179,61,.35);
}
.hr-check-list li .tick{
  box-shadow: 0 0 10px rgba(242,179,61,.55), inset 0 0 6px rgba(242,179,61,.3);
}
.hr-contact-list .ic svg, .hr-contact-social a svg, .hr-footer-social a svg{
  filter: drop-shadow(0 0 5px rgba(242,179,61,.55));
  transition: filter .3s ease;
}
.hr-contact-social a:hover svg, .hr-footer-social a:hover svg{
  filter: drop-shadow(0 0 10px rgba(242,179,61,.95));
}
.hr-hero-badge .dot{
  background: var(--hr-grad) !important; background-size:200% 200%;
  box-shadow: 0 0 0 4px rgba(242,179,61,.15), 0 0 16px rgba(242,179,61,.7);
}
.hr-thankyou-check .inner svg{ width:32px; height:32px; }
.hr-eyebrow-icon{ display:inline-flex; }
.hr-eyebrow-icon svg{ width:16px; height:16px; }
.hr-service-card .icon svg{ width:24px; height:24px; }
.hr-check-list li .tick svg{ display:block; }
.hr-service-card{ transform-style: preserve-3d; will-change: transform; }
.hr-service-card .hr-glow{
  position:absolute; inset:-40%; background: var(--hr-grad); opacity:0; filter: blur(50px);
  transition: opacity .5s ease; z-index:0; pointer-events:none;
}
.hr-service-card:hover .hr-glow{ opacity:.18; }
.hr-service-card > *{ position:relative; z-index:1; }

/* ==========================================================================
   20b. AMBIENT THREE.JS BACKGROUND + FINAL CTA
   ========================================================================== */
#hr-bg-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85; }
.hr-final-cta{ text-align:center; padding:150px 0; position:relative; overflow:hidden; }
.hr-final-cta .hr-orb{
  position:absolute; width:520px; height:520px; left:50%; top:50%; transform:translate(-50%,-50%);
  border-radius:50%; background: radial-gradient(circle at 35% 30%, rgba(242,179,61,.5), rgba(59,91,139,.4) 42%, transparent 70%);
  filter: blur(30px); z-index:0; animation: hr-pulse 6s ease-in-out infinite;
}
.hr-final-cta h2{ position:relative; z-index:1; font-size: clamp(30px,5vw,58px); max-width:820px; margin:0 auto; }
.hr-final-cta .hr-btn{ position:relative; z-index:1; margin-top:40px; }
@media (max-width:700px){ .hr-final-cta{ padding:90px 0; } }

/* ==========================================================================
   21. CINEMATIC ENTRANCE — Three.js particles + GSAP word-by-word reveal
   ========================================================================== */
.hr-intro{
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: var(--hr-bg);
  transition: opacity .8s ease, visibility .8s ease;
}
.hr-intro.is-leaving{ opacity: 0; visibility: hidden; pointer-events: none; }
body.hr-intro-active{ overflow: hidden; height: 100vh; }

#hr-intro-canvas{ position:absolute; inset:0; width:100%; height:100%; }

.hr-intro-stage{
  position: relative; z-index: 2; max-width: 780px; padding: 0 32px; text-align: center;
}
.hr-intro-eyebrow{ opacity: 0; margin-bottom: 26px; justify-content: center; }
.hr-intro-line{
  font-family: var(--hr-font-head); font-weight: 600; color: var(--hr-ink);
  font-size: clamp(24px, 4.4vw, 48px); letter-spacing: -0.015em; line-height: 1.2;
}
.hr-intro-line .word{ display:inline-block; overflow:hidden; vertical-align:top; margin-right:.28em; }
.hr-intro-line .word span{ display:inline-block; transform: translateY(115%); }
.hr-intro-line .word.accent{ background-image: var(--hr-grad); background-size:200% 200%; -webkit-background-clip:text; background-clip:text; color:transparent; }
.hr-intro-btn{ position:relative; z-index:3; margin-top:40px; opacity:0; }

/* Skip stays available early — no one should feel trapped */
.hr-intro-skip{
  position: absolute; bottom: 28px; right: 28px; z-index: 3;
  color: var(--hr-gray); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.hr-intro-skip:hover{ color: var(--hr-ink); }

/* Static fallback for reduced-motion / no-JS: everything just appears */
.hr-intro.is-static .hr-intro-eyebrow,
.hr-intro.is-static .hr-intro-line .word span,
.hr-intro.is-static .hr-intro-btn{ opacity:1 !important; transform:none !important; }

@media (max-width: 600px){
  .hr-intro-btn{ padding: 15px 26px; font-size: 13.5px; }
}

@media (prefers-reduced-motion: reduce){
  .hr-intro-eyebrow, .hr-intro-line .word span, .hr-intro-btn{ opacity: 1 !important; transform: none !important; }
  #hr-intro-canvas{ display:none !important; }
}

/* ==========================================================================
   22. HERO — centered layout (mockup panel removed)
   ========================================================================== */
.hr-hero-grid{ grid-template-columns: 1fr; justify-items: center; }
.hr-hero-visual{ display: none; }
.hr-hero-content{ max-width: 760px; text-align: center; }
.hr-hero-badge{ justify-content: center; }
.hr-hero .lead{ margin-left: auto; margin-right: auto; }
.hr-hero-cta{ justify-content: center; }
.hr-hero-stats{ justify-content: center; }

/* ==========================================================================
   23. ANIMATED TEXT REVEAL (word-by-word, sentientx-style)
   ========================================================================== */
.hr-anim-text .hr-word{
  display: inline-block; opacity: 0; transform: translateY(30px);
  filter: blur(5px); transition: opacity .6s cubic-bezier(.22,.9,.32,1), transform .6s cubic-bezier(.22,.9,.32,1), filter .6s ease;
  will-change: transform, opacity;
}
.hr-anim-text.is-visible .hr-word{ opacity: 1; transform: translateY(0); filter: blur(0); }

@media (prefers-reduced-motion: reduce){
  .hr-anim-text .hr-word{ transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  #hr-bg-canvas{ display:none !important; }
}
@media (max-width: 780px){
  #hr-bg-canvas{ opacity:.55; }
}