/* ============================================================
   HIDDEN HOUSE — Colors & Type Foundation
   A monochrome, ultra-luxury system. Pure black canvas,
   white type, restrained greys. Helvetica World throughout.
   ============================================================ */

/* ---- Webfont ---------------------------------------------- */
/* NOTE: only the REGULAR weight of Helvetica World was supplied.
   Bold/medium weights fall back to the platform Helvetica/Arial
   Neue grotesque stack. Flag to client if exact bold is needed. */
@font-face {
  font-family: "Helvetica World";
  src: url("fonts/helvetica-world-regular.woff2") format("woff2"),
       url("fonts/helvetica-world-regular.woff") format("woff"),
       url("fonts/helvetica-world-regular.eot");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Type families ------------------------------------- */
  --font-grotesque: "Helvetica World", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: var(--font-grotesque);

  /* ---- Core palette -------------------------------------- */
  /* The system is intentionally near-monochrome. */
  --black:        #000000;   /* canvas — true black */
  --near-black:   #0a0a0a;   /* raised surfaces, menus */
  --ink-900:      #141414;   /* hairline panels */
  --white:        #ffffff;   /* primary type, logo */

  /* Greyscale ramp (cool-neutral, slightly warm at the top) */
  --grey-100:     #f4f4f4;
  --grey-300:     #c9c9c9;
  --grey-500:     #8a8a8a;   /* sub-captions */
  --grey-600:     #6e6e6e;   /* muted captions on black */
  --grey-700:     #4a4a4a;   /* dividers, hairlines */
  --grey-800:     #2a2a2a;   /* borders on black */

  /* The single accent — a faint cobalt seen in the top loader
     bar of the marketing site. Used sparingly, never decorative. */
  --accent:       #2b2bff;
  --accent-dim:   #1c1c8f;

  /* ---- Semantic tokens ----------------------------------- */
  --bg:           var(--black);
  --bg-raised:    var(--near-black);
  --fg1:          var(--white);          /* primary text */
  --fg2:          var(--grey-500);        /* secondary / captions */
  --fg3:          var(--grey-600);        /* tertiary / footnotes */
  --hairline:     rgba(255,255,255,0.14); /* thin dividers on black */
  --border:       rgba(255,255,255,0.20); /* icon strokes, outlines */
  --overlay-grad: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);

  /* ---- Type scale ---------------------------------------- */
  /* Helvetica set tight. Display is the signature: huge,
     regular weight, near-zero tracking, leading ~1.02. */
  --fs-mega:      clamp(3.5rem, 9vw, 8.5rem);   /* full-bleed statements */
  --fs-display:   clamp(2.75rem, 6vw, 5.5rem);  /* section questions */
  --fs-h1:        clamp(2rem, 4vw, 3.25rem);
  --fs-h2:        clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-h3:        1.5rem;
  --fs-lead:      1.25rem;
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-caption:   0.8125rem;  /* the grey service sub-labels */
  --fs-micro:     0.6875rem;  /* nav / eyebrow, tracked out */

  /* ---- Tracking ------------------------------------------ */
  --track-tight:  -0.02em;    /* display headlines */
  --track-normal: 0;
  --track-wide:   0.08em;     /* the HIDDEN HOUSE wordmark */
  --track-eyebrow:0.18em;     /* tiny uppercase labels */

  /* ---- Weights (regular is the only true webfont weight) - */
  --w-regular:    400;
  --w-bold:       700;        /* synthesized / platform fallback */

  /* ---- Spacing (8px base) -------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10:128px; --space-11:192px;

  /* ---- Radii (the brand is essentially square) ----------- */
  --radius-none: 0;
  --radius-pill: 999px;       /* only for circular icon buttons */

  /* ---- Motion -------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 200ms;
  --dur: 450ms;
  --dur-slow: 900ms;          /* cross-fades between statements */

  /* ---- Layout -------------------------------------------- */
  --page-margin: clamp(20px, 4vw, 64px);
  --maxw: 1680px;
}

/* ============================================================
   Base element styles
   ============================================================ */
body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-grotesque);
  font-size: var(--fs-body);
  font-weight: var(--w-regular);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Signature display statement — used full-bleed on black */
.hh-mega {
  font-size: var(--fs-mega);
  font-weight: var(--w-regular);
  line-height: 1.0;
  letter-spacing: var(--track-tight);
  color: var(--fg1);
  text-wrap: balance;
}

.hh-display {
  font-size: var(--fs-display);
  font-weight: var(--w-regular);
  line-height: 1.04;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

h1, .hh-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--w-regular);
  line-height: 1.08;
  letter-spacing: var(--track-tight);
}

h2, .hh-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--w-regular);
  line-height: 1.12;
  letter-spacing: var(--track-tight);
}

/* The wordmark / brand lockup — the ONE bold, tracked treatment */
.hh-wordmark {
  font-weight: var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: 1;
}

/* Tiny uppercase eyebrow / nav label */
.hh-eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg2);
}

/* The grey service sub-caption seen bottom-left of statements */
.hh-caption {
  font-size: var(--fs-caption);
  color: var(--fg2);
  line-height: 1.3;
  letter-spacing: 0;
}

p, .hh-body { font-size: var(--fs-body); line-height: 1.55; }
.hh-lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--grey-300); }

a { color: inherit; text-decoration: none; }