/* =====================================================================
   BasisWorks — basisworks.in
   The page carries its layout as inline styles (ported from the design
   file). This sheet holds the base, interaction states, and the hooks
   script.js toggles.
   Accent options from the design: #8C2F39 (default), #B4552A, #9A6A1F.
   ===================================================================== */
:root {
  --accent: #8C2F39;
  --nav-pos: static; /* set to sticky to pin the nav */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #F1F1ED;
  color: #14181C;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: #14181C; }
a:hover { color: var(--accent); }
img { max-width: 100%; }
input, textarea, button { font-family: 'IBM Plex Sans', sans-serif; }
input::placeholder, textarea::placeholder { color: #8E8E88; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------- Hover states */
.hov-fill { transition: background-color .18s ease, color .18s ease; }
.hov-fill:hover { background: var(--accent) !important; color: #F1F1ED !important; }
.hov-text { transition: color .15s ease; }
.hov-text:hover { color: var(--accent) !important; }
.hov-line { transition: border-color .15s ease, color .15s ease; }
.hov-line:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* -------------------------------------------------------- Form fields */
.inp:focus { outline: none; border-color: var(--accent) !important; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
#form-status.form__status--error { border-color: #7A3B44 !important; color: #E8C9CD !important; }

/* -------------------------------------- "What you get" sector switcher */
.sector-tab { transition: color .15s ease, border-color .15s ease; }
.sector-tab.is-active { border-bottom-color: #E8E8E2 !important; color: #E8E8E2 !important; }

/* ------------------------------------------ "How it connects" stepper */
.step-item { transition: background-color .2s ease; }
.step-item.is-active { background: #E9E9E3 !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}