/* ============================================================
   nikhitabuilds.com — shared design system
   Palette kept from the original site: white base, dark
   "drawing sheet" panels, cobalt-blue accent.
   Typeface: Avenir (Montserrat web fallback). No bold.
   Emphasis = scale + letter-spacing + colour/opacity.
   ============================================================ */

:root{
  /* colour */
  --paper:#FFFFFF;
  --paper-2:#F6F7F9;
  --panel:#0B0D13;          /* dark blueprint panel */
  --panel-2:#12151E;        /* raised within panel */
  --ink:#15171D;            /* primary text on light */
  --ink-soft:#494E57;       /* secondary text on light */
  --muted:#8A9099;          /* labels / captions */
  --line:#E4E7EC;           /* hairlines on light */
  --grid:rgba(255,255,255,0.055); /* blueprint grid on dark */
  --line-dark:rgba(255,255,255,0.12);
  --accent:#2F6FE0;         /* cobalt blue */
  --accent-2:#7CA6EA;       /* lighter blue, on dark */
  --chip-bg:#EAF0FB;
  --chip-line:#D6E2F7;
  --on-dark:#E7EBF2;        /* text on dark panel */
  --muted-dark:#7A8390;

  /* type */
  --font: Avenir, "Avenir Next", Montserrat, system-ui, sans-serif;

  /* spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --maxw:1240px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--accent); color:#fff; }

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

/* ---------- type scale (no weight above 500) ---------- */
h1,h2,h3{ font-weight:300; margin:0; letter-spacing:-0.02em; line-height:1.04; }
h1{ font-size:clamp(48px, 8vw, 104px); }
h2{ font-size:clamp(30px, 4.4vw, 52px); }
h3{ font-size:clamp(20px, 2.4vw, 26px); font-weight:400; letter-spacing:-0.01em; }
p{ margin:0; }

.lead{ font-size:clamp(17px,1.9vw,21px); line-height:1.6; color:var(--ink-soft); font-weight:400; }
.body{ font-size:16px; line-height:1.65; color:var(--ink-soft); }
.small{ font-size:14px; line-height:1.6; color:var(--ink-soft); }

/* label — replaces monospace; Avenir 500, tracked caps */
.label{
  font-weight:500;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.label--accent{ color:var(--accent); }
.data{ font-weight:300; font-size:clamp(30px,4vw,40px); letter-spacing:-0.01em; line-height:1; }

/* accent word emphasis without bold */
.em{ color:var(--accent); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--s5); padding-right:var(--s5); }
.section{ padding-top:var(--s8); padding-bottom:var(--s8); scroll-margin-top:76px; }
@media (max-width:640px){ .section{ padding-top:var(--s7); padding-bottom:var(--s7); } }

/* ---------- signature: section callout ---------- */
.callout{ display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s5); }
.sheet-code{
  flex:none; width:46px; height:46px; border:1px solid var(--line);
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-weight:500; font-size:12px; letter-spacing:0.04em; color:var(--accent);
}
.callout .leader{ width:56px; height:1px; background:var(--line); flex:none; }

/* ---------- signature: dimension line ---------- */
.dimline{ position:relative; height:1px; background:var(--line); margin:var(--s7) 0 var(--s3);
  transform-origin:left center; }
.dimline::before,.dimline::after{
  content:""; position:absolute; top:-5px; width:1px; height:11px; background:var(--line);
}
.dimline::before{ left:0; }
.dimline::after{ right:0; }
.dimrow{ display:flex; justify-content:space-between; gap:var(--s4); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:500; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  padding:15px 26px; border:1px solid transparent; transition:background .18s, color .18s, border-color .18s;
  white-space:nowrap;
}
.btn--primary{ background:var(--accent); color:#fff; }
.btn--primary:hover{ background:#2560c8; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn--on-dark{ background:transparent; color:var(--on-dark); border-color:var(--line-dark); }
.btn--on-dark:hover{ border-color:var(--accent-2); color:#fff; }

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ max-width:var(--maxw); margin:0 auto; padding:14px var(--s5);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4); }
.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand .mark{ height:26px; width:auto; flex:none; display:block; }
.brand .name{ font-weight:500; font-size:15px; letter-spacing:0.02em; }
.nav-links{ display:flex; align-items:center; gap:2px; flex-wrap:wrap; justify-content:flex-end; }
.nav-links a{
  font-weight:400; font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); padding:8px 11px; border-bottom:2px solid transparent;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent); }
.nav-links .btn{ margin-left:8px; padding:9px 16px; }

/* ---------- dark panel (drawing sheet) ---------- */
.panel{
  position:relative; background:var(--panel); color:var(--on-dark);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:44px 44px;
  overflow:hidden;
}
.panel .label{ color:var(--muted-dark); }
.panel .label--accent{ color:var(--accent-2); }
.panel h1,.panel h2,.panel h3{ color:#fff; }
.panel .body,.panel .lead{ color:#B9C1CE; }

/* ---------- title block (proof bar) ---------- */
.titleblock{ border:1px solid var(--line); }
.titleblock__head{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--line); background:var(--paper-2); }
.titleblock__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.cell{ padding:18px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.titleblock__grid .cell:nth-child(4n){ border-right:0; }
.titleblock__grid .cell:nth-last-child(-n+4){ border-bottom:0; }
.cell .label{ margin-bottom:8px; display:block; }
.cell .val{ font-size:14px; line-height:1.4; color:var(--ink); }

/* ---------- cards ---------- */
.card{ border:1px solid var(--line); background:var(--paper); }
.card__media{ background:var(--paper-2); overflow:hidden; border-bottom:1px solid var(--line); }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__body{ padding:var(--s5); }
.grid{ display:grid; gap:var(--s5); }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }

.badge{ font-weight:500; font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:#fff; background:var(--accent); padding:6px 10px; }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-size:12px; letter-spacing:0.04em; color:var(--accent);
  background:var(--chip-bg); border:1px solid var(--chip-line); padding:7px 12px; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); }
.site-footer .wrap{ padding-top:var(--s6); padding-bottom:var(--s6);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s5); align-items:center; }
.foot-links{ display:flex; flex-wrap:wrap; gap:var(--s5); }
.foot-links a{ font-weight:400; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.foot-links a:hover{ color:var(--ink); }

/* ---------- motion: one orchestrated load moment ---------- */
@keyframes drawX{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.reveal{ animation:riseIn .7s cubic-bezier(.16,1,.3,1) both; }
.reveal.d1{ animation-delay:.06s; } .reveal.d2{ animation-delay:.12s; }
.reveal.d3{ animation-delay:.18s; } .reveal.d4{ animation-delay:.24s; }
.dimline.draw{ animation:drawX 1.1s cubic-bezier(.16,1,.3,1) .3s both; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* ---------- responsive ---------- */
.split{ display:grid; grid-template-columns:1.05fr 0.95fr; align-items:stretch; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }

.feature{ display:grid; grid-template-columns:1.5fr 1fr; gap:var(--s6); }
@media (max-width:760px){ .feature{ grid-template-columns:1fr; gap:var(--s5); } }

@media (max-width:720px){
  .titleblock__grid{ grid-template-columns:repeat(2,1fr); }
  .titleblock__grid .cell{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
  .titleblock__grid .cell:nth-child(2n){ border-right:0; }
}
@media (max-width:430px){
  .titleblock__grid{ grid-template-columns:1fr; }
  .titleblock__grid .cell{ border-right:0; }
  h1{ font-size:clamp(40px,12vw,60px); }
}