/* ============================================================================
   RAJU — token contract + base. The :root block is the ACSS 3.3.6 contract
   resolved to literal values (RECON §7.1), shipped VERBATIM. Component CSS
   lives in style.css (@layer components). Layer order: base < components <
   utilities; :root is unlayered so tokens always resolve.
   --root-font-size:62.5% is LOAD-BEARING — every rem token assumes 1rem = 10px.
   ============================================================================ */
@layer base, components, utilities;

:root {
  /* ── BRAND COLOR (RAJU gold) ─────────────── */
  --color-primary:#E9C45C; --color-primary-hover:#efd48a;
  --color-primary-ultra-light:#fcf7e9; --color-primary-light:#f6e6bc;
  --color-primary-semi-light:#eac562; --color-primary-medium:#e0ad1f;
  --color-primary-semi-dark:#9d7915; --color-primary-dark:#70560f; --color-primary-ultra-dark:#2d2306;
  --color-primary-trans-10:rgba(233,196,92,.1); --color-primary-trans-20:rgba(233,196,92,.2);
  --color-primary-trans-30:rgba(233,196,92,.3); --color-primary-trans-50:rgba(233,196,92,.5);
  --color-primary-trans-70:rgba(233,196,92,.7); --color-primary-trans-90:rgba(233,196,92,.9);
  /* ── NEUTRALS / SURFACE (dark theme) ────── */
  --color-base:#1c1c1b; --color-base-hover:#222220; --color-base-ultra-light:#f3f3f2;
  --color-base-light:#dadad8; --color-base-semi-light:#a8a8a4; --color-base-medium:#82827d;
  --color-base-semi-dark:#5b5b57; --color-base-dark:#41413e; --color-base-ultra-dark:#1a1a19;
  --color-neutral:#000; --color-neutral-ultra-light:#f2f2f2; --color-neutral-light:#d9d9d9;
  --color-neutral-semi-light:#a6a6a6; --color-neutral-medium:#808080; --color-neutral-semi-dark:#595959;
  --color-neutral-dark:#404040; --color-neutral-ultra-dark:#1a1a1a;
  --color-white:#fff; --color-black:#000;
  --color-white-trans-10:rgba(255,255,255,.1); --color-white-trans-20:rgba(255,255,255,.2);
  --color-white-trans-50:rgba(255,255,255,.5); --color-black-trans-50:rgba(0,0,0,.5); --color-black-trans-70:rgba(0,0,0,.7);
  /* ── STATUS (forms / result badges) ─────── */
  --color-danger:#dc3545; --color-warning:#ffc10a; --color-info:#18a2b8; --color-success:#29a745;
  /* ── CONTEXTUAL ROLES ───────────────────── */
  --bg-page:var(--color-neutral-ultra-dark); --bg-ultra-light:var(--color-white);
  --bg-light:var(--color-neutral-ultra-light); --bg-dark:var(--color-neutral-ultra-dark); --bg-ultra-dark:var(--color-black);
  --text:var(--color-neutral-light); --text-muted:var(--color-neutral-light);
  --text-on-light:var(--color-black); --text-on-dark:var(--color-neutral-light); --heading-color:var(--color-white);
  /* ── TYPOGRAPHY ─────────────────────────── */
  --root-font-size:62.5%;                 /* 1rem = 10px — DO NOT change */
  --font-heading:"FS Industrie",sans-serif; --font-body:"RopaSansPro",sans-serif; --font-weight-heading:700;
  --text-xs:1.26rem; --text-s:1.42rem; --text-m:1.8rem; --text-l:2.025rem; --text-xl:2.28rem; --text-xxl:2.565rem;
  --h6:1.26rem; --h5:1.42rem; --h4:1.8rem; --h3:2.025rem; --h2:2.28rem; --h1:2.565rem;
  --line-height-heading:1.2; --line-height-body:1.5; --heading-text-wrap:balance; --body-text-wrap:pretty;
  /* ── SPACING ────────────────────────────── */
  --space-xs:1.896rem; --space-s:2.133rem; --space-m:2.4rem; --space-l:2.7rem; --space-xl:3.038rem; --space-xxl:3.42rem;
  --section-space-xs:3.84rem; --section-space-s:4.8rem; --section-space-m:6rem; --section-space-l:7.5rem; --section-space-xl:9.375rem; --section-space-xxl:11.719rem;
  --gutter:1.6rem; --section-padding-x:1.6rem; --section-padding-block:var(--section-space-m);
  --content-gap:var(--space-m); --container-gap:var(--space-xl); --grid-gap:var(--space-m);
  /* ── LAYOUT / WIDTHS ────────────────────── */
  --content-width:144rem;                 /* 1440px */
  --content-width-safe:min(var(--content-width),calc(100% - var(--gutter)*2));
  --width-xs:calc(var(--content-width)*.1); --width-s:calc(var(--content-width)*.2); --width-m:calc(var(--content-width)*.4);
  --width-l:calc(var(--content-width)*.6); --width-xl:calc(var(--content-width)*.8);
  --header-height:8.581rem;               /* xl 8.43 · l 7.978 · m 7.627 · s 7.175 */
  --grid-3:repeat(3,minmax(0,1fr));       /* the bout-card grid */
  /* ── RADII / BORDERS ────────────────────── */
  --radius:1rem; --radius-50:50%; --radius-circle:50vw; --radius-none:0;
  --border:1px solid var(--color-base-dark); --border-light:1px solid var(--color-white-trans-20);
  --border-dark:1px solid var(--color-base-dark); --divider:1px solid var(--color-base-light);
  /* ── BUTTONS (square, uppercase, outline) ─ */
  --btn-radius:0; --btn-text-transform:uppercase; --btn-letter-spacing:1.1px; --btn-font-weight:600;
  --btn-padding-block:.6em; --btn-padding-inline:1.25em; --btn-min-width:15rem; --btn-border-width:.2rem;
  --btn-font-size:clamp(1.8rem,0.357vw + 1.686rem,2.2rem);
  /* ── LINKS / FOCUS / MOTION / SHADOW ────── */
  --link-color:var(--color-primary-dark); --link-color-hover:var(--color-primary);
  --focus-color:var(--color-primary); --focus-width:.2rem;
  --transition-duration:.3s; --transition-timing:ease-in-out;
  --transition:background var(--transition-duration) var(--transition-timing),color var(--transition-duration) var(--transition-timing),border var(--transition-duration) var(--transition-timing);
  --box-shadow-m:0 4px 4px -10px rgba(0,0,0,.04),0 13px 13px -10px rgba(0,0,0,.06),0 40px 60px -10px rgba(0,0,0,.08);
  /* ── RAJU CUSTOM (carry VERBATIM) ───────── */
  --slant:polygon(6px 0,100% 0%,calc(100% - 6px) 100%,0% 100%);
  --slant-nav:polygon(5% 0,100% 0,95% 100%,0% 100%);
  --slant-card:polygon(2% 0,100% 0,98% 100%,0 100%);
  --stats:clamp(1.8rem,calc(1.4285714286vw + 1.3428571429rem),3.4rem);
  --stats-title:clamp(1rem,calc(0.5357142857vw + 0.8285714286rem),1.6rem);
  --stats-height:clamp(3rem,calc(1.6071428571vw + 2.4857142857rem),4.8rem);
  /* ── TEXT-ROLE ALIASES ──────────────────── */
  --text-light:var(--color-neutral-light); --text-light-muted:var(--color-neutral-light); /* #d9d9d9 */
  --text-dark:var(--color-black); --text-dark-muted:var(--color-neutral-dark);            /* #404040 */
  /* ── NAV TOKENS ─────────────────────────── */
  --nav-height:var(--header-height);
  --nav-gap:.25em;
  --nav-link-color:var(--text-light-muted); --nav-link-hover-color:var(--text-light); --nav-link-active-color:var(--text-light);
  --nav-item-background-color:transparent; --nav-item-background-hover-color:var(--color-white-trans-10);
  --nav-item-border-color:transparent; --nav-item-border-hover-color:var(--color-white-trans-10); --nav-item-active-border-color:var(--color-primary);
  --nav-item-block-padding:.75em; --nav-item-inline-padding:1em; --nav-item-border-radius:0;
  --nav-icon-color:var(--text-light-muted); --nav-icon-size:1em;
  /* ── DROPDOWN / MEGA-MENU TOKENS ────────── */
  --dd-bg-color:var(--color-neutral-ultra-dark); --dd-color:var(--text-light); --dd-color-hover:var(--text-light);
  --dd-link-color:var(--text-light); --dd-link-color-hover:var(--text-light);
  --dd-link-background-color:var(--color-neutral-ultra-dark); --dd-link-background-hover-color:var(--color-primary-dark);
  --dd-link-block-padding:.5em; --dd-link-inline-padding:3rem;
  --dd-content-padding:var(--space-l); --dd-item-gap:var(--space-xs); --dd-box-shadow:var(--box-shadow-m);
  --dd-border-width:0; --dd-border-color:var(--color-base-dark); --dd-border-radius:0;
  --dd-icon-color:var(--color-primary); --dd-icon-bg-color:transparent; --dd-min-inline-size:200px;
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { font-size: var(--root-font-size); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    background: var(--bg-page);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-m);
    line-height: var(--line-height-body);
    text-wrap: var(--body-text-wrap);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
  }
  /* subtle grain over the dark canvas (parity with the prod noise overlay) */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    opacity: .04; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    line-height: var(--line-height-heading);
    color: var(--heading-color);
    text-wrap: var(--heading-text-wrap);
  }
  h1 { font-size: var(--h1); } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); }
  h4 { font-size: var(--h4); } h5 { font-size: var(--h5); } h6 { font-size: var(--h6); }
  a { color: inherit; text-decoration: none; transition: var(--transition); }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  img { object-fit: cover; }
  ul, ol { list-style: none; padding: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; }
  :focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; }
  ::selection { background: var(--color-primary); color: var(--color-black); }

  /* container */
  .wrapper { width: var(--content-width-safe); margin-inline: auto; }
  .wrapper--narrow { max-width: 86rem; }

  /* base button (square, uppercase, slant brand CTA) */
  .btn {
    display: inline-flex; align-items: center; gap: .6em; justify-content: center;
    min-width: var(--btn-min-width);
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    font-family: var(--font-heading);
    font-size: var(--btn-font-size); font-weight: var(--btn-font-weight);
    text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing);
    border: var(--btn-border-width) solid var(--color-primary);
    color: var(--color-black); background: var(--color-primary);
    clip-path: var(--slant); transition: var(--transition);
  }
  .btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
  .btn--ghost { background: transparent; color: var(--color-primary); }
  .btn--ghost:hover { background: var(--color-primary); color: var(--color-black); }
  .btn--on-dark { background: transparent; color: var(--color-white); border-color: var(--color-white-trans-20); }
  .btn--on-dark:hover { background: var(--color-primary); color: var(--color-black); border-color: var(--color-primary); }
}

@layer utilities {
  .u-hide-s { } @media (max-width: 767px) { .u-hide-s { display: none !important; } }
  .u-show-s { display: none !important; } @media (max-width: 767px) { .u-show-s { display: revert !important; } }
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .section { padding-block: var(--section-padding-block); position: relative; z-index: 1; }
  .section--tight { padding-block: var(--section-space-s); }
  .eyebrow {
    font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .18em;
    color: var(--color-primary); font-size: var(--text-s); font-weight: 600;
  }
}