/* =========================================================
   RAGHUVEER AGENCIES — DESIGN TOKENS
   Industrial editorial system. Bold condensed type.
   Black + yellow blocks on warm off-white.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Barlow:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+Kannada:wght@400;500;600;700&display=swap');

:root {
  /* ---------- COLORS ---------- */
  --ra-bg:            #F5F0EB;   /* warm off-white page */
  --ra-bg-alt:        #EDE6DD;   /* subtle alt surface  */
  --ra-ink:           #1A1A1A;   /* primary text / black block */
  --ra-ink-2:         #2A2A2A;
  --ra-muted:         #666666;
  --ra-muted-2:       #8A8A8A;
  --ra-border:        #E0D8D0;
  --ra-border-strong: #C9BFB2;

  --ra-accent:        #F0C000;   /* industrial yellow-gold (accent text/icons) */
  --ra-yellow:        #F0C000;   /* yellow block fill */
  --ra-yellow-ink:    #1A1A1A;   /* text on yellow */

  --ra-white:         #FFFFFF;
  --ra-black:         #0A0A0A;

  /* semantic */
  --ra-success:       #3B6E3B;
  --ra-danger:        #8A2E1F;

  /* ---------- TYPE ---------- */
  --ra-font-display:  'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --ra-font-body:     'Barlow', 'Inter', system-ui, sans-serif;
  --ra-font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --ra-font-kannada:  'Noto Sans Kannada', 'Tiro Kannada', sans-serif;

  --ra-fs-display-xl: clamp(72px, 10vw, 168px);
  --ra-fs-display-l:  clamp(56px, 7vw,  112px);
  --ra-fs-display-m:  clamp(40px, 5vw,  72px);
  --ra-fs-display-s:  clamp(28px, 3vw,  44px);

  --ra-fs-h1:         40px;
  --ra-fs-h2:         28px;
  --ra-fs-h3:         20px;

  --ra-fs-body:       16px;
  --ra-fs-body-l:     18px;
  --ra-fs-small:      14px;
  --ra-fs-label:      11px;

  --ra-lh-body:       1.7;
  --ra-lh-tight:      1.1;
  --ra-lh-display:    0.92;

  /* ---------- SPACING ---------- */
  --ra-s-1:   4px;
  --ra-s-2:   8px;
  --ra-s-3:  12px;
  --ra-s-4:  16px;
  --ra-s-5:  24px;
  --ra-s-6:  32px;
  --ra-s-7:  48px;
  --ra-s-8:  64px;
  --ra-s-9:  96px;
  --ra-s-10:128px;

  /* ---------- RADII / STROKE ---------- */
  --ra-r-0: 0px;
  --ra-r-btn: 4px;
  --ra-stroke: 1px;
  --ra-stroke-bold: 2px;
  --ra-rule: 3px;

  /* ---------- LAYOUT ---------- */
  --ra-maxw: 1440px;
  --ra-gutter: clamp(20px, 4vw, 64px);
  --ra-nav-h: 96px;
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ra-bg);
  color: var(--ra-ink);
  font-family: var(--ra-font-body);
  font-size: var(--ra-fs-body);
  line-height: var(--ra-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* ============ TYPE UTILITIES ============ */
.ra-display,
.ra-display-xl,
.ra-display-l,
.ra-display-m,
.ra-display-s {
  font-family: var(--ra-font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: var(--ra-lh-display);
  letter-spacing: -0.01em;
  margin: 0;
}
.ra-display-xl { font-size: var(--ra-fs-display-xl); }
.ra-display-l  { font-size: var(--ra-fs-display-l); }
.ra-display-m  { font-size: var(--ra-fs-display-m); }
.ra-display-s  { font-size: var(--ra-fs-display-s); }

.ra-h1 { font-family: var(--ra-font-display); font-weight: 800; text-transform: uppercase; font-size: var(--ra-fs-h1); line-height: 1.05; margin: 0; letter-spacing: -0.005em; }
.ra-h2 { font-family: var(--ra-font-display); font-weight: 800; text-transform: uppercase; font-size: var(--ra-fs-h2); line-height: 1.1; margin: 0; }
.ra-h3 { font-family: var(--ra-font-display); font-weight: 700; text-transform: uppercase; font-size: var(--ra-fs-h3); line-height: 1.2; margin: 0; letter-spacing: 0.02em; }

.ra-body    { font-size: var(--ra-fs-body);   line-height: var(--ra-lh-body); color: var(--ra-ink); }
.ra-body-l  { font-size: var(--ra-fs-body-l); line-height: 1.6; color: var(--ra-ink); }
.ra-small   { font-size: var(--ra-fs-small);  line-height: 1.5; color: var(--ra-muted); }

.ra-label {
  font-family: var(--ra-font-body);
  font-size: var(--ra-fs-label);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ra-muted);
  font-weight: 500;
  line-height: 1;
}
.ra-label--ink { color: var(--ra-ink); }
.ra-label--yellow { color: var(--ra-accent); }
.ra-label--on-dark { color: #B8B8B8; }

.ra-mono { font-family: var(--ra-font-mono); font-size: 13px; letter-spacing: 0.02em; }

/* Kannada — local Mysore voice */
.ra-kn       { font-family: var(--ra-font-kannada); font-weight: 400; letter-spacing: 0; line-height: 1.5; }
.ra-kn-label { font-family: var(--ra-font-kannada); font-weight: 500; font-size: 13px; color: var(--ra-muted); line-height: 1.4; }
.ra-kn-strap { font-family: var(--ra-font-kannada); font-weight: 500; font-size: 14px; color: var(--ra-ink); line-height: 1.5; }
.ra-kn-head  { font-family: var(--ra-font-kannada); font-weight: 700; line-height: 1.35; }

/* accent underline for labels */
.ra-label-tick {
  display: inline-flex; align-items: center; gap: 10px;
}
.ra-label-tick::before {
  content: ""; width: 28px; height: 2px; background: currentColor; display: inline-block;
}

/* ============ BUTTONS ============ */
.ra-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ra-font-display);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 14px;
  padding: 14px 22px;
  border-radius: var(--ra-r-btn);
  border: 2px solid var(--ra-ink);
  background: var(--ra-ink);
  color: #fff;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.ra-btn:hover    { transform: translateY(-1px); }
.ra-btn:active   { transform: translateY(0); }
.ra-btn .ra-arrow { transition: transform .2s ease; }
.ra-btn:hover .ra-arrow { transform: translateX(3px); }

.ra-btn--yellow { background: var(--ra-yellow); border-color: var(--ra-yellow); color: var(--ra-ink); }
.ra-btn--yellow:hover { background: #F5E900; border-color: #F5E900; }

.ra-btn--ghost { background: transparent; color: var(--ra-ink); border-color: var(--ra-ink); }
.ra-btn--ghost:hover { background: var(--ra-ink); color: #fff; }

.ra-btn--ghost-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.ra-btn--ghost-on-dark:hover { background: #fff; color: var(--ra-ink); border-color: #fff; }

.ra-btn--sm { padding: 10px 16px; font-size: 12px; }
.ra-btn--lg { padding: 18px 28px; font-size: 15px; }

/* ============ FORMS ============ */
.ra-input, .ra-select, .ra-textarea {
  width: 100%;
  font-family: var(--ra-font-body);
  font-size: 15px;
  color: var(--ra-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ra-border-strong);
  padding: 12px 0;
  outline: none;
  transition: border-color .15s ease;
  border-radius: 0;
}
.ra-input:focus, .ra-select:focus, .ra-textarea:focus { border-color: var(--ra-ink); }
.ra-field { display: flex; flex-direction: column; gap: 6px; }
.ra-field > .ra-label { margin-bottom: 2px; }

/* ============ CARDS / BLOCKS ============ */
.ra-card {
  background: #fff;
  border: 1px solid var(--ra-border);
  padding: var(--ra-s-6);
}
.ra-block-black  { background: var(--ra-ink);    color: #fff; }
.ra-block-yellow { background: var(--ra-yellow); color: var(--ra-ink); }
.ra-block-cream  { background: var(--ra-bg-alt); color: var(--ra-ink); }

/* rule */
.ra-rule  { height: 1px;  background: var(--ra-border-strong); border: 0; margin: 0; }
.ra-rule--thick { height: var(--ra-rule); background: var(--ra-ink); }
.ra-rule--yellow { height: var(--ra-rule); background: var(--ra-yellow); }

/* badges */
.ra-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ra-font-body); font-weight: 600;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  padding: 6px 10px; border: 1px solid var(--ra-ink); color: var(--ra-ink);
  background: transparent; line-height: 1;
}
.ra-badge--solid { background: var(--ra-ink); color: #fff; }
.ra-badge--yellow { background: var(--ra-yellow); border-color: var(--ra-yellow); color: var(--ra-ink); }
.ra-badge--dot::before { content:""; width:6px; height:6px; background: var(--ra-yellow); display:inline-block; }

/* layout helpers */
.ra-container { max-width: var(--ra-maxw); margin: 0 auto; padding: 0 var(--ra-gutter); }
.ra-stack > * + * { margin-top: var(--ra-s-4); }
.ra-stack-lg > * + * { margin-top: var(--ra-s-6); }

/* focus */
:focus-visible { outline: 2px solid var(--ra-accent); outline-offset: 2px; }

/* selection */
::selection { background: var(--ra-yellow); color: var(--ra-ink); }

/* heritage photo hover — reveal colour */
.ra-hero-photo:hover .ra-hero-photo__inner { filter: none !important; }