/* Kiln Web Studio — shared styles.
   Dark charcoal + ember orange/amber. Craftsman, warm, human-made. */

:root {
  --char: #16130f;
  --char-2: #1f1a14;
  --char-3: #2a231a;
  --ink: #f4ede3;
  --ink-dim: #c9bfae;
  --ink-faint: #8d8271;
  --ember: #ff6a1a;
  --ember-deep: #d94f04;
  --amber: #ffb43a;
  --gold: #f5c65c;
  --line: #3a3129;
  --radius: 14px;
  --max: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--char);
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Subtle grain of the kiln floor */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,106,26,.045) 1px, transparent 1px);
  background-size: 26px 26px;
  z-index: 0;
}
body > * { position: relative; z-index: 1; }

/* Visible focus for keyboard users (chatbot + toolbar carry their own) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--amber); outline-offset: 2px;
}

/* Skip link: hidden until focused */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--char); color: var(--amber);
  padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

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

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--ember); }

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 0.6em; }
h3 { font-size: 1.2rem; margin-bottom: 0.35em; }

p { margin-bottom: 1em; color: var(--ink-dim); }
.lede { font-size: 1.15rem; color: var(--ink); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section.block { padding: 72px 0; }
section.block + section.block { border-top: 1px solid var(--line); }

/* ---- Top nav ---- */
header.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(22,19,15,.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 700; font-size: 1.1rem; }
.brand:hover { color: var(--ink); }
.brand small { display: block; font-size: 0.68rem; font-weight: 400; color: var(--ink-faint); letter-spacing: 0.14em; text-transform: uppercase; }

/* Logo: the flame inside a browser window */
.logo-mark { width: 44px; height: 34px; flex: 0 0 auto; }
.logo-mark rect.frame { fill: var(--char-3); stroke: var(--line); }
.logo-mark rect.bar { fill: var(--char-2); }
.logo-mark circle { fill: var(--ember); }
.logo-mark circle:nth-of-type(2) { fill: var(--amber); }
.logo-mark circle:nth-of-type(3) { fill: var(--gold); }

nav.links { display: flex; gap: 4px; flex-wrap: wrap; }
nav.links a {
  color: var(--ink-dim); font-size: 0.95rem; padding: 8px 12px; border-radius: 8px;
}
nav.links a:hover { color: var(--ink); background: var(--char-3); }
nav.links a.active { color: var(--amber); background: var(--char-3); }

/* Tricolor whisper: a 2px saffron/white/green hairline under the sticky nav,
   each band at ~40% opacity. Decorative only — no text sits on it. */
header.nav::after {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg,
    rgba(255,153,51,.4), rgba(244,237,227,.4), rgba(19,136,8,.4));
}

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; padding: 120px 0 110px; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,19,15,.7) 0%, rgba(22,19,15,.85) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 760px; }
.eyebrow {
  display: inline-block; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 18px; font-weight: 600;
}
.hero h1 .fire { color: var(--ember); }
.hero-ctas { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }

.btn {
  display: inline-block; padding: 14px 28px; border-radius: 999px;
  background: linear-gradient(180deg, #ff7a2a, #ef6c0d);
  color: #16130f; font-weight: 700; font-size: 1rem; border: none; cursor: pointer;
  box-shadow: 0 6px 24px rgba(255,106,26,.35);
}
.btn:hover { color: #16130f; filter: brightness(1.06); transform: translateY(-1px); }
.btn.ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line);
  box-shadow: none;
}
.btn.ghost:hover { border-color: var(--ember); color: var(--amber); }

.hero-photo {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,106,26,.08);
}
.hero-photo img { width: 100%; height: auto; }
.caption { font-size: 0.82rem; color: var(--ink-faint); padding: 10px 4px 0; }

/* ---- Flame divider ---- */
.flame-divider { display: flex; justify-content: center; padding: 8px 0; }
.flame-divider svg { width: 46px; height: 46px; opacity: .9; }

/* ---- Cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 32px; }
.card {
  background: var(--char-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; transition: transform .15s ease, border-color .15s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--ember-deep); }
.card .price { font-size: 2rem; font-weight: 800; color: var(--amber); margin: 6px 0 2px; font-family: Georgia, serif; }
.card .per { color: var(--ink-faint); font-size: 0.9rem; margin-bottom: 14px; }
ul.ticks { list-style: none; margin: 0 0 20px; }
ul.ticks li { padding: 7px 0 7px 30px; position: relative; color: var(--ink-dim); font-size: 0.97rem; }
ul.ticks li::before {
  content: "✓"; position: absolute; left: 2px; top: 7px;
  color: var(--ember); font-weight: 800;
}

/* ---- Process steps ---- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 22px; margin-top: 32px; counter-reset: step; }
.step {
  background: var(--char-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; position: relative;
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  display: block; font-family: Georgia, serif; font-size: 2.2rem; font-weight: 700;
  color: var(--ember); margin-bottom: 8px;
}

/* ---- CSS browser-window art (portfolio concept tiles) ---- */
.browser-art {
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--char-2); margin-bottom: 18px;
}
.browser-art .chrome {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  background: var(--char-3); border-bottom: 1px solid var(--line);
}
.browser-art .chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
.browser-art .chrome i:first-child { background: var(--ember); }
.browser-art .chrome i:nth-child(2) { background: var(--amber); }
.browser-art .chrome i:nth-child(3) { background: var(--gold); }
.browser-art .chrome .url {
  margin-left: 10px; flex: 1; font-size: 0.75rem; color: var(--ink-faint);
  background: var(--char); border-radius: 6px; padding: 3px 10px; white-space: nowrap; overflow: hidden;
}
.browser-art .page { padding: 22px; min-height: 150px; }
.browser-art .page .bar { height: 12px; border-radius: 6px; background: var(--char-3); margin-bottom: 10px; }
.browser-art .page .bar.hot { background: linear-gradient(90deg, var(--ember-deep), var(--amber)); }
.browser-art .page .cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.browser-art .page .cols div { height: 56px; border-radius: 8px; background: var(--char-3); }

.concept-tag {
  display: inline-block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--char); background: var(--gold); border-radius: 999px; padding: 4px 12px;
  font-weight: 700; margin-bottom: 12px;
}

/* ---- Forms ---- */
form.contact { max-width: 620px; margin-top: 28px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 10px;
  background: var(--char-2); border: 1px solid var(--line); color: var(--ink); font-size: 1rem;
  font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255,106,26,.18);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--ink-faint); margin-top: 14px; }

.phone-big {
  font-size: 1.6rem; font-weight: 800; color: var(--amber); font-family: Georgia, serif;
}

/* ---- Footer ---- */
footer {
  border-top: 1px solid var(--line); margin-top: 40px;
  padding: 36px 0 48px; color: var(--ink-faint); font-size: 0.9rem;
  /* Barely-there watermark: a simple, original outline of India at 4% opacity,
     bottom-right of the footer. CSS background => decorative, never announced. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 240'%3E%3Cpath d='M70 30L98 16 110 28 124 22 136 40 124 52 142 58 158 64 176 76 186 74 194 88 184 96 172 90 160 108 146 140 128 178 116 208 104 184 86 152 70 124 62 96 42 88 34 70Z' fill='%23f4ede3' fill-opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 94% 100%;
  background-size: 140px auto;
}
.footer-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
footer nav a { color: var(--ink-faint); }
footer nav a:hover { color: var(--amber); }
footer .legal-note { font-size: .82rem; margin-top: 10px; color: var(--ink-faint); }

/* ---- Two-column text/photo ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.split img.framed {
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

blockquote.pull {
  border-left: 3px solid var(--ember); padding: 6px 0 6px 20px; margin: 28px 0;
  font-family: Georgia, serif; font-size: 1.3rem; color: var(--ink); font-style: italic;
}

.kicker-list { display: grid; gap: 18px; margin-top: 24px; }
.kicker-list .item { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.kicker-list .flame { width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 50% 65%, var(--amber), var(--ember-deep) 70%);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }

/* ---- Responsive ---- */
@media (max-width: 820px) {
  .hero-grid, .split { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 40px; }
  section.block { padding: 52px 0; }
  .nav-inner { flex-wrap: wrap; }
  nav.links { width: 100%; }
}

/* ---------- founder ---------- */
.founder-grid { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
img.founder-pic { width: 210px; max-width: 45vw; border-radius: 14px; flex: 0 0 auto; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.founder-grid > div { flex: 1 1 300px; }
.founder-grid p { font-size: 1.02rem; }