/* ==========================================================================
   THE RAJPURIA GROUP — Premium Corporate Website
   style.css · Design System (tokens, reset, base, layout, buttons, motion)
   Built with HTML5 + CSS3 + Vanilla JS. No frameworks.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   Brand derived from the company brochure: navy heritage, luxury gold,
   maroon accent, soft-grey surfaces, warm beige.
--------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --navy-900:#0a1730; --navy-800:#0f1e3d; --navy-700:#16294f; --navy-600:#1e3a68;
  --gold-500:#c8a24a; --gold-400:#d9b968; --gold-100:#f2e6c7;
  --maroon-600:#7e1e26; --maroon-500:#97252e;

  /* Neutrals */
  --white:#ffffff; --grey-50:#f7f8fa; --grey-100:#eef1f5; --grey-200:#e2e7ee;
  --grey-300:#cbd3de; --grey-500:#7c8798; --grey-700:#454f5e;
  --charcoal:#1c222c; --beige:#f3ede1;

  /* Semantic */
  --bg:var(--grey-50); --surface:var(--white); --text:var(--charcoal);
  --text-muted:var(--grey-700); --border:var(--grey-200); --accent:var(--gold-500);

  /* Typography */
  --font-display:"Cormorant Garamond",Georgia,serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --font-util:"Inter",system-ui,sans-serif;

  /* Fluid type scale */
  --fs-hero:clamp(2.75rem,6vw + .5rem,6rem);
  --fs-h1:clamp(2.25rem,4vw + .5rem,4rem);
  --fs-h2:clamp(1.85rem,3vw + .4rem,3rem);
  --fs-h3:clamp(1.3rem,1.5vw + .5rem,1.75rem);
  --fs-lead:clamp(1.05rem,.6vw + .9rem,1.3rem);
  --fs-body:1rem; --fs-small:.875rem; --fs-eyebrow:.78rem;

  /* Spacing */
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --space-5:3rem; --space-6:4rem; --space-7:6rem; --space-8:8rem;

  /* Layout */
  --container:1240px; --container-narrow:900px;
  --radius-sm:8px; --radius:16px; --radius-lg:24px;

  /* Elevation */
  --shadow-sm:0 2px 8px rgba(15,30,61,.06);
  --shadow:0 12px 32px rgba(15,30,61,.10);
  --shadow-lg:0 28px 60px rgba(15,30,61,.16);

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1); --dur:.6s;
  --header-h:88px;
}

/* ---------------------------------------------------------------------------
   2. RESET & BASE
--------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--header-h)}
body{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:1.65;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
img{background:var(--grey-100)} /* subtle placeholder tone while loading */
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none;padding:0}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--navy-800)}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;border-radius:4px}
::selection{background:var(--gold-100);color:var(--navy-900)}

.skip-link{position:absolute;left:-999px;top:0;background:#fff;color:var(--navy-800);
  padding:.75rem 1rem;z-index:2000;border-radius:0 0 8px 0;font-family:var(--font-util);font-weight:600}
.skip-link:focus{left:0}

/* ---------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
--------------------------------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:clamp(4rem,8vw,8rem);position:relative}
.section--tight{padding-block:clamp(3rem,5vw,5rem)}
.section--dark{background:var(--navy-800);color:var(--white)}
.section--dark h1,.section--dark h2,.section--dark h3{color:var(--white)}
.section--grey{background:var(--grey-50)}
.section--beige{background:var(--beige)}
.grid{display:grid;gap:var(--space-4)}

/* ---------------------------------------------------------------------------
   4. TYPOGRAPHY HELPERS
--------------------------------------------------------------------------- */
.eyebrow{font-family:var(--font-util);font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-500);
  display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold-500)}
.section--dark .eyebrow{color:var(--gold-400)}
.section-title{font-size:var(--fs-h2);margin-block:var(--space-2);max-width:22ch}
.lead{font-size:var(--fs-lead);color:var(--text-muted);max-width:62ch;line-height:1.7}
.section--dark .lead{color:rgba(255,255,255,.78)}
.section-head{max-width:720px;margin-bottom:var(--space-5)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head--center .section-title{margin-inline:auto}
.accent-word{color:var(--gold-500);font-style:italic}
.maroon-word{color:var(--maroon-600)}

/* ---------------------------------------------------------------------------
   5. BUTTONS
--------------------------------------------------------------------------- */
.btn{--btn-bg:var(--navy-800);--btn-fg:var(--white);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--font-util);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  padding:.95rem 1.8rem;border-radius:100px;background:var(--btn-bg);color:var(--btn-fg);
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
  will-change:transform}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(-1px)}
.btn--gold{--btn-bg:var(--gold-500);--btn-fg:var(--navy-900)}
.btn--gold:hover{--btn-bg:var(--gold-400)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--white);border:1.5px solid rgba(255,255,255,.5)}
.btn--ghost:hover{border-color:var(--gold-500);color:var(--gold-400)}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--navy-800);border:1.5px solid var(--grey-300)}
.btn--outline:hover{--btn-fg:var(--navy-900);border-color:var(--gold-500)}
/* ripple */
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.4);pointer-events:none;animation:ripple .6s var(--ease)}
.btn--gold .ripple{background:rgba(15,30,61,.25)}
@keyframes ripple{to{transform:scale(3);opacity:0}}
.arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ---------------------------------------------------------------------------
   6. SCROLL REVEAL / ANIMATION UTILITIES
--------------------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="blur"]{filter:blur(12px)}
[data-reveal].is-visible{opacity:1;transform:none;filter:none}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.40s}

/* Image reveal wrapper */
.img-reveal{position:relative;overflow:hidden;border-radius:var(--radius)}
.img-reveal::after{content:"";position:absolute;inset:0;background:var(--navy-800);
  transform:translateX(0);transition:transform 1s var(--ease)}
.img-reveal.is-visible::after{transform:translateX(101%)}
.img-reveal img{transform:scale(1.15);transition:transform 1.4s var(--ease)}
.img-reveal.is-visible img{transform:scale(1)}

/* Zoom-on-hover */
.zoom{overflow:hidden}
.zoom img{transition:transform .8s var(--ease)}
.zoom:hover img{transform:scale(1.06)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none;filter:none}
  .img-reveal::after{display:none}
  .img-reveal img{transform:none}
}