/* ==========================================================================
   Bell and Ring Tech Nirman — Get Started page
   /css/get-started.css
   Self-contained: design tokens + the utility classes the page uses + custom polish.
   Theme: orange + warm cream (matches home page)
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  --c-surface: #fffaf6;
  --c-surface-lowest: #ffffff;
  --c-surface-low: #fff4ec;
  --c-surface-container: #fdeee3;
  --c-on-surface: #14110f;
  --c-on-surface-variant: #5a524c;
  --c-outline: #8a7f77;
  --c-outline-variant: #ecdccf;
  --c-primary: #14110f;
  --c-on-primary: #ffffff;
  --c-secondary: #ff5a1f;
  --c-on-secondary: #ffffff;
  --c-on-secondary-container: #d94a10;
  --c-error: #b3261e;

  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 32px;
  --sp-xl: 56px;
  --margin-mobile: 20px;
  --margin-desktop: 48px;
  --max-width: 1280px;

  --ease: cubic-bezier(.22, .8, .24, 1);
  --font-head: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---------- 2. Reset (scoped to <main>; header/footer come from /css/styles.css) ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
main, main *, main *::before, main *::after {
  box-sizing: border-box;
}
main *, main *::before, main *::after {
  border-width: 0;
  border-style: solid;
  border-color: var(--c-outline-variant);
}
main {
  display: block;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-on-surface);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
main h1, main h2, main h3, main h4, main p, main ul, main ol, main figure { margin: 0; }
main ul, main ol { padding: 0; list-style: none; }
main a { color: inherit; text-decoration: none; }
main img, main svg { display: block; max-width: 100%; }
main button, main input, main select, main textarea {
  font: inherit; color: inherit; letter-spacing: inherit; margin: 0; border-radius: 0;
}
main button { background: none; padding: 0; cursor: pointer; }
main select { text-overflow: ellipsis; }
main textarea { display: block; }
main ::placeholder { opacity: 1; }
::selection { background: rgba(255, 90, 31, .2); }
main :focus-visible { outline: 2px solid var(--c-secondary); outline-offset: 3px; }

/* ---------- 3. Icon font ---------- */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  flex: none;
}
/* hide icon ligature text until the icon font has loaded (main.js adds .icons-ready) */
.js:not(.icons-ready) .material-symbols-outlined { opacity: 0; }
.material-symbols-outlined { transition: opacity .2s, transform .3s var(--ease); }

/* ---------- 4. Typography tokens ---------- */
.font-headline-xl, .font-headline-lg, .font-headline-md, .font-headline-sm { font-family: var(--font-head); }
.font-headline-xl { font-weight: 800; letter-spacing: -.03em; }
.font-headline-lg { font-weight: 800; letter-spacing: -.025em; }
.font-headline-md { font-weight: 700; letter-spacing: -.02em; }
.font-headline-sm { font-weight: 600; letter-spacing: -.01em; }
.font-body-lg, .font-body-md, .font-body-sm { font-family: var(--font-body); font-weight: 400; }
.font-label-md, .font-label-sm { font-family: var(--font-body); font-weight: 600; }
.font-semibold { font-weight: 600; }

.text-headline-xl { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.06; }
.text-headline-lg { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; }
.text-headline-md { font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.2; }
.text-headline-sm { font-size: 1.0625rem; line-height: 1.4; }
.text-body-lg { font-size: 1.125rem; line-height: 1.7; }
.text-body-md { font-size: 1rem; line-height: 1.6; }
.text-body-sm { font-size: .875rem; line-height: 1.6; }
.text-label-md { font-size: .875rem; line-height: 1.2; letter-spacing: .01em; }
.text-label-sm { font-size: .75rem; line-height: 1.2; letter-spacing: .02em; }
.text-\[18px\] { font-size: 18px; line-height: 1; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: .06em; }
.tracking-widest { letter-spacing: .14em; }
.text-center { text-align: center; }
.text-left { text-align: left; }

/* ---------- 5. Colours ---------- */
.bg-surface { background-color: var(--c-surface); }
.bg-surface\/90 { background-color: rgba(255, 250, 246, .9); }
.bg-surface-container { background-color: var(--c-surface-container); }
.bg-surface-container-low { background-color: var(--c-surface-low); }
.bg-surface-container-lowest { background-color: var(--c-surface-lowest); }
.bg-secondary { background-color: var(--c-secondary); }
.bg-primary\/10 { background-color: rgba(255, 90, 31, .10); }
.text-on-surface { color: var(--c-on-surface); }
.text-on-surface-variant { color: var(--c-on-surface-variant); }
.text-on-secondary { color: var(--c-on-secondary); }
.text-secondary { color: var(--c-secondary); }
.text-primary { color: var(--c-primary); }
.text-outline { color: var(--c-outline); }
.border-outline-variant { border-color: var(--c-outline-variant); }
.placeholder\:text-outline\/50::placeholder { color: rgba(138, 127, 119, .6); }

/* ---------- 6. Layout & spacing ---------- */
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.flex-col { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.shrink-0 { flex-shrink: 0; }
.self-start { align-self: flex-start; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.gap-xs { gap: var(--sp-xs); }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.gap-lg { gap: var(--sp-lg); }
.gap-xl { gap: var(--sp-xl); }
.gap-x-lg { column-gap: var(--sp-lg); }
.gap-y-sm { row-gap: var(--sp-sm); }

.p-lg { padding: var(--sp-lg); }
.px-md { padding-left: var(--sp-md); padding-right: var(--sp-md); }
.px-lg { padding-left: var(--sp-lg); padding-right: var(--sp-lg); }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-margin-mobile { padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }
.py-sm { padding-top: var(--sp-sm); padding-bottom: var(--sp-sm); }
.py-md { padding-top: var(--sp-md); padding-bottom: var(--sp-md); }
.py-lg { padding-top: var(--sp-lg); padding-bottom: var(--sp-lg); }
.py-xl { padding-top: var(--sp-xl); padding-bottom: var(--sp-xl); }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.pt-20 { padding-top: 5rem; }
.pt-lg { padding-top: var(--sp-lg); }
.pt-xl { padding-top: var(--sp-xl); }
.pb-md { padding-bottom: var(--sp-md); }
.pb-lg { padding-bottom: var(--sp-lg); }

.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mt-xs { margin-top: var(--sp-xs); }
.mb-xs { margin-bottom: var(--sp-xs); }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-lg { margin-bottom: var(--sp-lg); }
.mb-xl { margin-bottom: var(--sp-xl); }

.w-full { width: 100%; }
.w-auto { width: auto; }
.w-4 { width: 1rem; }
.w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.h-4 { height: 1rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-20 { height: 5rem; }
.min-w-\[200px\] { min-width: 200px; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-max-width { max-width: var(--max-width); }

.fixed { position: fixed; }
.relative { position: relative; }
.absolute { position: absolute; }
.top-0 { top: 0; }
.top-1\/2 { top: 50%; }
.right-3 { right: .75rem; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.overflow-hidden { overflow: hidden; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.resize-none { resize: none; }
.appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.rotate-180 { transform: rotate(180deg); }

/* ---------- 7. Borders, radius, shadows, effects ---------- */
.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.last\:border-b-0:last-child { border-bottom-width: 0; }
.rounded-lg { border-radius: .75rem; }
.rounded-xl { border-radius: 1rem; }
.rounded-2xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.shadow-sm { box-shadow: 0 1px 3px rgba(20, 17, 15, .06), 0 1px 2px rgba(20, 17, 15, .04); }
.shadow-md { box-shadow: 0 6px 16px rgba(255, 90, 31, .22); }
.shadow-xl { box-shadow: 0 30px 60px -20px rgba(20, 17, 15, .22), 0 12px 24px -12px rgba(20, 17, 15, .12); }
.shadow-\[0_1px_8px_rgba\(0\,0\,0\,0\.04\)\] { box-shadow: 0 1px 8px rgba(0, 0, 0, .04); }
.backdrop-blur-md { -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }

.transition-colors { transition: color .2s, background-color .2s, border-color .2s; }
.transition-all { transition: all .25s var(--ease); }
.transition-\[height\] { transition-property: height; transition-timing-function: var(--ease); }
.duration-300 { transition-duration: .3s; }

/* hover / focus states */
.hover\:text-on-surface:hover { color: var(--c-on-surface); }
.hover\:text-primary:hover { color: var(--c-primary); }
.hover\:text-secondary:hover { color: var(--c-secondary); }
.hover\:bg-surface-container:hover { background-color: var(--c-surface-container); }
.hover\:bg-secondary\/10:hover { background-color: rgba(255, 90, 31, .12); }
.hover\:bg-on-secondary-container:hover { background-color: var(--c-on-secondary-container); }
.hover\:shadow-lg:hover { box-shadow: 0 12px 28px rgba(255, 90, 31, .32); }
.focus\:outline-none:focus { outline: none; }
.focus\:border-secondary:focus { border-color: var(--c-secondary); }
.focus\:ring-2:focus { box-shadow: 0 0 0 4px var(--ring-c, rgba(255, 90, 31, .2)); }
.focus\:ring-secondary\/20 { --ring-c: rgba(255, 90, 31, .16); }

/* ---------- 8. Responsive ---------- */
@media (min-width: 640px) {
  .sm\:block { display: block; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:px-margin-desktop { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
  .md\:p-xl { padding: var(--sp-xl); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:flex-row { flex-direction: row; }
  .md\:self-stretch { align-self: stretch; }
}
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:block { display: block; }
  .lg\:hidden { display: none; }
  .lg\:py-xl { padding-top: var(--sp-xl); padding-bottom: var(--sp-xl); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:gap-\[64px\] { gap: 64px; }
  .lg\:self-start { align-self: flex-start; }
}

/* ==========================================================================
   9. Custom design layer
   ========================================================================== */

/* --- Page backdrop: soft orange glow + fading grid --- */
main > .relative.overflow-hidden::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: min(980px, 100%);
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px 420px at 90% 4%, rgba(255, 90, 31, .16), transparent 70%),
    radial-gradient(520px 380px at 2% 28%, rgba(20, 17, 15, .09), transparent 70%),
    linear-gradient(rgba(20, 17, 15, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(20, 17, 15, .045) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: linear-gradient(#000 35%, transparent);
  mask-image: linear-gradient(#000 35%, transparent);
}
main .bg-surface-container-low { position: relative; z-index: 1; }

/* --- Eyebrow --- */
main p.uppercase.tracking-widest { display: inline-flex; align-items: center; gap: 10px; }
main p.uppercase.tracking-widest::before {
  content: ""; width: 28px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--c-secondary), transparent);
}

/* --- Decorative route line --- */
.route-map {
  position: absolute; right: -6%; top: 6%;
  width: min(380px, 92%); height: auto;
  opacity: .5; pointer-events: none; z-index: 0;
}
.route-map path { animation: routeFlow 14s linear infinite; }
.route-map circle:nth-of-type(2), .route-map circle:nth-of-type(4) { transform-box: fill-box; transform-origin: center; animation: ping 2.8s ease-out infinite; }
@keyframes routeFlow { to { stroke-dashoffset: -240; } }
@keyframes ping { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }

/* --- Contact info block --- */
.bg-surface-container.shadow-sm { border: 1px solid rgba(20, 17, 15, .06); }
.bg-surface-container.shadow-sm > div { transition: transform .3s var(--ease); }
.bg-surface-container.shadow-sm > div:hover { transform: translateX(4px); }
.bg-surface-container.shadow-sm .rounded-full { transition: background-color .3s, transform .3s var(--ease); }
.bg-surface-container.shadow-sm > div:hover .rounded-full { background-color: var(--c-secondary); transform: rotate(-6deg) scale(1.06); }
.bg-surface-container.shadow-sm > div:hover .rounded-full .material-symbols-outlined { color: #fff; }

/* --- Form card --- */
.rounded-2xl.shadow-xl { border: 1px solid rgba(20, 17, 15, .05); }
.rounded-2xl.shadow-xl::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-secondary) 70%, #ffa066);
}
#contact-form label { display: block; }
#contact-form input:not([type="hidden"]):not([type="checkbox"]),
#contact-form select,
#contact-form textarea {
  width: 100%; min-width: 0;
  background-color: var(--c-surface);
  border-color: var(--c-outline-variant);
}
#contact-form input:not([type="hidden"]):not([type="checkbox"]):hover,
#contact-form select:hover,
#contact-form textarea:hover { border-color: #d8c3b3; }
#contact-form select { padding-right: 2.5rem; }
#contact-form select:invalid { color: rgba(138, 127, 119, .9); }
#contact-form select option { color: var(--c-on-surface); }
#contact-form input:user-invalid,
#contact-form select:user-invalid,
#contact-form textarea:user-invalid { border-color: var(--c-error); }
#contact-form .relative:focus-within > .material-symbols-outlined { color: var(--c-secondary); }

#contact-submit-btn { position: relative; overflow: hidden; }
#contact-submit-btn:hover { transform: translateY(-2px); }
#contact-submit-btn:active { transform: translateY(0); }
#contact-submit-btn:hover .material-symbols-outlined { transform: translateX(3px) rotate(-8deg); }
#contact-submit-btn:disabled { opacity: .75; cursor: progress; transform: none; }
#contact-submit-btn.is-sent { background: #0b7a4b; }

/* --- Orange gradient button (same as site buttons) --- */
#contact-submit-btn { background: linear-gradient(135deg, #ff7a2f, #ee4b0e); }
#contact-submit-btn:hover { background: linear-gradient(135deg, #ff5a1f, #d94a10); }
#contact-submit-btn.is-sent,
#contact-submit-btn.is-sent:hover { background: #0b7a4b; }

/* --- Form status --- */
.status { display: block; padding: 12px 16px; border-radius: 12px; border: 1px solid; font-weight: 500; animation: statusIn .35s var(--ease); }
.status-success { background: #e7f5ef; color: #0b5f3d; border-color: #b7e2cf; }
.status-error { background: #fdecea; color: #8c1d18; border-color: #f4c2be; }
@keyframes statusIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* --- FAQ --- */
.faq-item { transition: background-color .2s; }
.faq-toggle { transition: color .2s; }
.faq-toggle:hover span:first-child { color: var(--c-secondary); }
.faq-toggle[aria-expanded="true"] span:first-child { color: var(--c-secondary); }
.faq-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; background: rgba(255, 90, 31, .1);
  transition: transform .3s var(--ease), background-color .3s, color .3s;
}
.faq-toggle[aria-expanded="true"] .faq-icon { background: var(--c-secondary); color: #fff; }

/* --- Scroll reveal (main.js adds .js and .in) --- */
.js .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .75s var(--ease) var(--rd, 0s), transform .75s var(--ease) var(--rd, 0s);
}
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}