/* =========================================================
   Hollywood Property Solutions — Site Stylesheet
   Built on HPS Design System v1.0
   ========================================================= */

:root {
  /* CORE INK */
  --ink-900: #0A0A0A; --ink-800: #171717; --ink-700: #2B2B2B;
  --ink-500: #5A5A5A; --ink-300: #A3A3A3; --ink-200: #D4D4D4;
  --ink-100: #E8E8E8; --ink-50: #F4F4F2; --paper: #FAFAF7;

  /* GOLDEN HOUR */
  --hour-50:#FFF4E6; --hour-100:#FFE3BF; --hour-300:#FFB057;
  --hour-500:#FF7A1A; --hour-600:#E65A00; --hour-700:#B84500;

  /* MIDNIGHT BOULEVARD */
  --blvd-200:#B7C0D4; --blvd-500:#3A4A6B; --blvd-700:#1E2A44; --blvd-900:#0E1628;

  /* ACCENT + SEMANTIC */
  --hivis:#F5E100;
  --ok:#1F8A4C; --warn:#E8A400; --stop:#D6352B; --info:#2668C9;

  /* TYPE */
  --font-display:'Archivo Black','Archivo',system-ui,sans-serif;
  --font-ui:'Archivo',system-ui,-apple-system,sans-serif;
  --font-stencil:'Oswald','Archivo',sans-serif;
  --font-script:'Dancing Script','Snell Roundhand',cursive;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

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

  /* RADII */
  --r-0:0; --r-1:2px; --r-2:4px; --r-3:8px; --r-full:999px;

  /* SHADOWS */
  --shadow-1:0 1px 2px rgba(10,10,10,.08), 0 1px 1px rgba(10,10,10,.04);
  --shadow-2:0 4px 12px rgba(10,10,10,.10), 0 2px 4px rgba(10,10,10,.06);
  --shadow-3:0 12px 32px rgba(10,10,10,.16), 0 4px 8px rgba(10,10,10,.08);
  --shadow-hard:6px 6px 0 var(--ink-900);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-ui); background:var(--paper); color:var(--ink-900);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:inherit; }

.container {
  max-width:1440px; margin:0 auto; padding:0 var(--s-9);
}
@media (max-width:900px){ .container{ padding:0 var(--s-5); } }

/* ============ TOP STRIP ============ */
.top-strip {
  background:var(--ink-900); color:var(--ink-300);
  font-family:var(--font-mono); font-size:12px;
  border-bottom:1px solid var(--ink-800);
}
.top-strip .row {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s-2) 0; gap:var(--s-5); flex-wrap:wrap;
}
.top-strip .row a { color:var(--paper); text-decoration:none; }
.top-strip .row a:hover { color:var(--hour-500); }
.top-strip .lic { color:var(--ink-300); }
.top-strip .lic b { color:var(--hour-500); font-weight:500; }

/* ============ HEADER / NAV ============ */
.site-header {
  background:var(--paper); border-bottom:1px solid var(--ink-100);
  position:sticky; top:0; z-index:50;
}
.site-header .row {
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-6); padding:var(--s-4) 0;
}
.site-header .brand { display:flex; align-items:center; gap:var(--s-4); }
.site-header .brand img { height:48px; width:auto; }
.site-header .brand .lockup {
  font-family:var(--font-stencil); text-transform:uppercase;
  font-size:11px; letter-spacing:.18em; color:var(--ink-500);
  border-left:2px solid var(--ink-100); padding-left:var(--s-4);
  line-height:1.4;
}
.site-header .brand .lockup b { display:block; color:var(--ink-900); font-weight:600; }
.site-header nav { display:flex; align-items:center; gap:var(--s-5); }
.site-header nav a {
  font-family:var(--font-stencil); text-transform:uppercase;
  letter-spacing:.14em; font-size:13px; font-weight:500;
  text-decoration:none; color:var(--ink-900); padding:6px 0;
  border-bottom:2px solid transparent; transition:border-color .15s;
}
.site-header nav a:hover, .site-header nav a.active { border-bottom-color:var(--hour-500); }
@media (max-width:1180px){
  .site-header .brand .lockup{ display:none; }
}
@media (max-width:900px){
  .site-header nav{ gap:var(--s-3); }
  .site-header nav a:not(.btn){ font-size:11px; }
}

/* ============ BUTTONS ============ */
.btn {
  font-family:var(--font-stencil); text-transform:uppercase;
  font-weight:600; letter-spacing:.1em; font-size:13px;
  padding:14px 24px; border-radius:var(--r-1);
  display:inline-flex; align-items:center; gap:10px;
  cursor:pointer; border:2px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .12s;
  text-decoration:none; line-height:1; white-space:nowrap;
}
.btn-primary {
  background:var(--hour-500); color:var(--ink-900);
  border-color:var(--ink-900); box-shadow:4px 4px 0 var(--ink-900);
}
.btn-primary:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink-900); }
.btn-primary:active { transform:translate(2px,2px); box-shadow:0 0 0 var(--ink-900); }
.btn-dark { background:var(--ink-900); color:var(--paper); border-color:var(--ink-900); }
.btn-dark:hover { background:var(--ink-700); }
.btn-ghost { background:transparent; color:var(--ink-900); border-color:var(--ink-900); }
.btn-ghost:hover { background:var(--ink-900); color:var(--paper); }
.btn-light { background:transparent; color:var(--paper); border-color:var(--paper); }
.btn-light:hover { background:var(--paper); color:var(--ink-900); }
.btn-sm { padding:8px 14px; font-size:11px; }
.btn-lg { padding:18px 32px; font-size:15px; }
.btn-link {
  font-family:var(--font-ui); text-transform:none; letter-spacing:0;
  font-weight:600; padding:0; background:none; color:var(--hour-600);
  border:none; border-bottom:2px solid var(--hour-500); border-radius:0;
  padding-bottom:2px;
}
.btn-link:hover{ color:var(--hour-700); }

/* ============ TYPE HELPERS ============ */
.eyebrow {
  font-family:var(--font-stencil); text-transform:uppercase;
  letter-spacing:.22em; font-size:12px; font-weight:500;
  color:var(--hour-600);
  display:inline-flex; align-items:center; gap:var(--s-2);
  margin-bottom:var(--s-3);
}
.eyebrow::before { content:""; width:24px; height:2px; background:var(--hour-500); }
.eyebrow.on-dark { color:var(--hour-500); }
.display-xl {
  font-family:var(--font-display); font-size:clamp(48px, 7vw, 96px);
  line-height:.95; letter-spacing:-.02em; text-transform:uppercase;
}
.display-lg {
  font-family:var(--font-display); font-size:clamp(36px, 4.5vw, 64px);
  line-height:.98; letter-spacing:-.015em; text-transform:uppercase;
}
.display-md {
  font-family:var(--font-display); font-size:clamp(28px, 3vw, 40px);
  line-height:1.05; letter-spacing:-.01em; text-transform:uppercase;
}
.lede { font-size:20px; line-height:1.5; color:var(--ink-700); max-width:62ch; }
.lede.on-dark { color:var(--ink-200); }
.script { font-family:var(--font-script); font-weight:600; }
.mono { font-family:var(--font-mono); font-size:12px; color:var(--ink-500); }

.accent-orange { color:var(--hour-500); }

/* ============ CAUTION TAPE ============ */
.caution-bar {
  height:14px; width:100%;
  background-image:repeating-linear-gradient(135deg,
    var(--ink-900) 0 20px, var(--hour-500) 20px 40px);
}
.caution-bar.thin { height:6px; }
.caution-bar.tall { height:22px; }

/* ============ SECTIONS ============ */
section.block { padding:var(--s-9) 0; }
section.block.tight { padding:var(--s-8) 0; }
section.block.dark { background:var(--ink-900); color:var(--paper); }
section.block.dark .lede { color:var(--ink-200); }
section.block.dark .eyebrow { color:var(--hour-500); }
@media (max-width:900px){ section.block{ padding:var(--s-8) 0; } }

/* ============ FORMS ============ */
.field { display:flex; flex-direction:column; gap:6px; }
.field label {
  font-family:var(--font-stencil); text-transform:uppercase;
  font-weight:500; letter-spacing:.14em; font-size:11px; color:var(--ink-700);
}
.field input, .field select, .field textarea {
  font-family:var(--font-ui); font-size:15px; padding:12px 14px;
  border:2px solid var(--ink-900); background:#fff; color:var(--ink-900);
  border-radius:var(--r-1); outline:none;
  transition:border-color .12s, box-shadow .12s; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--hour-500); box-shadow:0 0 0 3px rgba(255,122,26,.25);
}
.field input::placeholder, .field textarea::placeholder { color:var(--ink-300); }
.field .hint { font-size:12px; color:var(--ink-500); font-family:var(--font-mono); }

/* ============ BADGES ============ */
.badge {
  font-family:var(--font-stencil); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.12em;
  padding:5px 10px; border-radius:var(--r-1);
  display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid currentColor;
}
.badge-live { background:var(--hour-500); color:var(--ink-900); border-color:var(--ink-900); }
.badge-dark { background:var(--ink-900); color:var(--paper); border-color:var(--ink-900); }
.badge-outline { background:transparent; color:var(--ink-900); }
.badge-light-outline { background:transparent; color:var(--paper); border-color:var(--paper); }
.badge .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ============ PROJECT CARDS ============ */
.proj-card {
  background:#fff; border:1px solid var(--ink-100); border-radius:var(--r-3);
  overflow:hidden; transition:transform .2s, box-shadow .2s;
  text-decoration:none; color:inherit; display:block;
}
.proj-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-3); }
.proj-card .thumb {
  height:220px; position:relative; display:flex; align-items:flex-end;
  padding:var(--s-4); color:var(--ink-300);
}
.proj-card .thumb .tag {
  font-family:var(--font-mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.1em;
}
.proj-card .body { padding:var(--s-5); }
.proj-card .meta {
  font-family:var(--font-mono); font-size:11px; color:var(--ink-500);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--s-2);
}
.proj-card h3 {
  font-weight:800; font-size:20px; letter-spacing:-.01em;
  margin-bottom:var(--s-2);
}
.proj-card p { font-size:14px; color:var(--ink-500); line-height:1.5; }
.proj-card .stats {
  display:flex; gap:var(--s-5); padding-top:var(--s-3);
  border-top:1px solid var(--ink-100); margin-top:var(--s-4);
}
.proj-card .stats .stat {
  font-family:var(--font-mono); font-size:11px; color:var(--ink-500);
  text-transform:uppercase; letter-spacing:.08em;
}
.proj-card .stats .stat b {
  display:block; font-family:var(--font-display); font-size:22px;
  color:var(--ink-900); letter-spacing:-.01em; margin-bottom:2px;
}

/* placeholder thumbs (documentary feel via stripes) */
.thumb-stripes-1 { background-image:repeating-linear-gradient(135deg, var(--ink-800) 0 14px, var(--ink-700) 14px 28px); }
.thumb-stripes-2 { background-image:repeating-linear-gradient(135deg, var(--blvd-700) 0 14px, var(--blvd-900) 14px 28px); }
.thumb-stripes-3 { background-image:repeating-linear-gradient(135deg, var(--hour-700) 0 14px, var(--hour-600) 14px 28px); color:var(--ink-900); }
.thumb-stripes-3 .tag { color:rgba(10,10,10,.6); }
.thumb-stripes-4 { background:var(--ink-50); background-image:repeating-linear-gradient(0deg, var(--ink-50) 0 30px, var(--ink-100) 30px 60px); color:var(--ink-500); }
.thumb-stripes-4 .tag { color:var(--ink-500); }
.thumb-blueprint {
  background:var(--blvd-900); color:var(--blvd-200);
  background-image:
    linear-gradient(rgba(183,192,212,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183,192,212,.18) 1px, transparent 1px);
  background-size:24px 24px;
}
.thumb-caution {
  background-image:repeating-linear-gradient(135deg, var(--ink-900) 0 24px, var(--hour-500) 24px 48px);
  color:var(--ink-900);
}
.thumb-caution .tag { color:rgba(10,10,10,.7); font-weight:500; }

/* ============ FEATURE CARDS ============ */
.feature-card {
  background:var(--ink-900); color:var(--paper);
  border-radius:var(--r-3); padding:var(--s-6);
  position:relative; overflow:hidden;
}
.feature-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background-image:repeating-linear-gradient(135deg,
    var(--ink-900) 0 12px, var(--hour-500) 12px 24px);
}
.feature-card .num {
  font-family:var(--font-display); font-size:64px;
  color:var(--hour-500); line-height:1; margin-top:var(--s-2);
}
.feature-card h3 { color:var(--paper); margin-top:var(--s-3); font-size:20px; font-weight:800; }
.feature-card p { color:var(--ink-200); font-size:14px; margin-top:var(--s-2); line-height:1.5; }

/* ============ FOOTER ============ */
footer.site-footer { background:var(--ink-900); color:var(--ink-300); }
footer.site-footer .grid {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s-7);
  padding:var(--s-9) 0;
}
footer.site-footer h5 {
  font-family:var(--font-stencil); text-transform:uppercase;
  letter-spacing:.18em; font-size:12px; font-weight:500;
  color:var(--ink-300); margin-bottom:var(--s-4);
}
footer.site-footer img.logo { height:54px; background:var(--paper); padding:var(--s-3); border-radius:var(--r-2); margin-bottom:var(--s-4); }
footer.site-footer p, footer.site-footer a {
  color:var(--ink-200); text-decoration:none; font-size:14px;
  line-height:1.7;
}
footer.site-footer ul { list-style:none; }
footer.site-footer ul li { padding:3px 0; }
footer.site-footer ul li a:hover { color:var(--hour-500); }
footer.site-footer .legal {
  border-top:1px solid var(--ink-700); padding:var(--s-4) 0;
  display:flex; justify-content:space-between; gap:var(--s-4);
  font-family:var(--font-mono); font-size:11px; color:var(--ink-500);
  flex-wrap:wrap;
}
@media (max-width:900px){
  footer.site-footer .grid{ grid-template-columns:1fr 1fr; gap:var(--s-5); padding:var(--s-7) 0; }
}

/* ============ PAGE HERO (non-home) ============ */
.page-hero {
  background:var(--ink-900); color:var(--paper);
  padding:var(--s-9) 0; position:relative; overflow:hidden;
}
.page-hero::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(-45deg,
    transparent 0 22px, rgba(255,122,26,.05) 22px 44px);
}
.page-hero .container { position:relative; z-index:1; }
.page-hero h1 { color:var(--paper); }
.page-hero h1 .accent { color:var(--hour-500); }
.page-hero p.lede { color:var(--ink-200); margin-top:var(--s-5); }

/* ============ DIAGONAL SEPARATOR ============ */
.divider-stencil {
  display:flex; align-items:center; gap:var(--s-4);
  font-family:var(--font-stencil); text-transform:uppercase;
  font-size:12px; letter-spacing:.22em; color:var(--ink-500);
  margin:var(--s-7) 0;
}
.divider-stencil::before, .divider-stencil::after {
  content:""; flex:1; height:2px; background:var(--ink-100);
}

/* ============ UTILITY GRIDS ============ */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-7); align-items:start; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); }
@media (max-width:900px){
  .grid-3, .grid-4 { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; gap:var(--s-5); }
}