/* Design tokens, reset, type, links, motion helpers. Light is the default; [data-theme="dark"] overrides colours only.
   Visual direction: Sai Constructions brand (navy from the logo, orange accent), Sora headings, DM Sans text.
   Every text and background pair was checked for 4.5:1 contrast in both themes. */

@font-face { font-family: "Sora"; src: url("/assets/fonts/sora-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/assets/fonts/dm-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }

:root, .light-surface {
  color-scheme: light;
  /* surfaces */
  --bg: #f4f7fa;
  --surface: #ffffff;
  --surface-2: #eef2f6;          /* table heads, wells, hovered rows */
  --line: #dde4eb;               /* card edges, row rules */
  --line-strong: #c3ced9;        /* control borders */
  --grid: rgba(0, 49, 83, .06);  /* grid-paper lines */
  /* text */
  --ink: #10202e;
  --ink-soft: #4a5a6a;
  --faint: #5f6f7e;              /* placeholders, hints */
  /* brand: navy from the logo, orange from the emblem */
  --brand: #003153;
  --brand-deep: #00243e;
  --brand-ink: #ffffff;
  --brand-soft: #a9c1d6;
  --primary: #003153;
  --primary-hover: #00497c;
  --primary-ink: #ffffff;
  --accent: #fc3500;             /* large text, icons, rules only */
  --accent-ink: #c42800;         /* small text */
  --accent-soft: #fff0ea;
  --link: #0a5a9c;
  --link-hover: #00406f;
  --sun: #ffb800;
  --sun-hover: #e5a600;
  --sun-ink: #10202e;
  /* tints */
  --tint: #e7f0f7;
  --tint-2: #d3e4f1;
  --tint-ink: #00324f;
  --sun-100: #fff3cd;
  /* status */
  --ok: #166534;   --ok-bg: #dcfce7;
  --warn: #8a4b00; --warn-bg: #fef3c7;  --warn-line: #f3d98a;
  --danger: #b42318; --danger-bg: #fee4e2; --danger-line: #f5b5b0;
  --info-line: #b4cfe4;
  /* effects */
  --ring: 0 0 0 3px rgba(10, 90, 156, .25);
  --shadow-card: 0 1px 2px rgba(0, 36, 62, .05), 0 10px 30px rgba(0, 36, 62, .07);
  --shadow-lift: 0 18px 40px rgba(0, 36, 62, .18);
  --shadow-pop: 0 14px 36px rgba(0, 24, 42, .22);
  --scrim: rgba(0, 24, 42, .55);
  --glass: rgba(255, 255, 255, .92);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5a6a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  /* legacy names still used by a few inline styles */
  --white: var(--surface);
  --blue-50: var(--tint);
  --blue-100: var(--tint-2);
  --blue-600: var(--link);
  --blue-700: var(--primary);
  --blue-800: var(--brand);
  --blue-900: var(--ink);
  --sun-500: var(--sun);
  --sun-600: var(--sun-hover);

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Tamil", Arial, sans-serif;
  --font-display: "Sora", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --radius: 16px;
  --radius-sm: 8px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #06121d;
  --surface: #0c2033;
  --surface-2: #12304a;
  --line: #1c3b57;
  --line-strong: #2f5373;
  --grid: rgba(150, 200, 240, .06);
  --ink: #e8f0f7;
  --ink-soft: #a9bccd;
  --faint: #8aa0b4;
  --brand: #00213a;
  --brand-deep: #00152a;
  --brand-ink: #ffffff;
  --brand-soft: #9bb6cc;
  --primary: #2d78bd;
  --primary-hover: #245f99;
  --primary-ink: #ffffff;
  --accent: #ff5a2b;
  --accent-ink: #ff8a63;
  --accent-soft: #33180f;
  --link: #7fc0ff;
  --link-hover: #b5dcff;
  --tint: #10304a;
  --tint-2: #18466a;
  --tint-ink: #bfe0ff;
  --sun-100: #3a2e0a;
  --ok: #6ee7a0;   --ok-bg: #10301f;
  --warn: #fbbf24; --warn-bg: #33270a;  --warn-line: #5c4712;
  --danger: #ff8a80; --danger-bg: #3a1715; --danger-line: #6b2a26;
  --info-line: #2c5278;
  --ring: 0 0 0 3px rgba(127, 192, 255, .32);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lift: 0 18px 44px rgba(0, 0, 0, .55);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, .6);
  --scrim: rgba(2, 8, 14, .7);
  --glass: rgba(12, 32, 51, .9);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a9bccd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }   /* the sticky banner never covers a focused field */
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15.5px/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* colours glide when the theme changes (class is added for ~0.45s by theme.js) */
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after {
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease),
              fill .35s var(--ease), stroke .35s var(--ease), box-shadow .35s var(--ease) !important;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 var(--s-3); color: var(--ink); font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; }
h1, h2, h3, .hero-title { text-wrap: balance; }
p { text-wrap: pretty; }
button, .btn, a, input, select, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1 em, h2 em, .accent-word { font-style: italic; color: var(--link); }
p { margin: 0 0 var(--s-3); }
img { max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
b, strong { font-weight: 650; }

/* small label above a heading: a short orange rule and letter-spaced capitals */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 var(--s-3);
  font-family: var(--font-display); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink);
}
.eyebrow::before { content: ""; width: 36px; height: 2px; background: var(--accent); border-radius: 2px; }

/* simple blue links, underlined on hover and focus */
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; transition: color .15s var(--ease); }
a:hover { color: var(--link-hover); text-decoration: underline; }
a:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; text-decoration: underline; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }
.hidden, [hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.muted { color: var(--ink-soft); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--sun); color: var(--sun-ink); padding: var(--s-2) var(--s-4); z-index: 100; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
::selection { background: var(--tint-2); color: var(--ink); }

/* grid-paper backdrop */
.grid-paper {
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(252, 53, 0, .45); } 100% { box-shadow: 0 0 0 12px rgba(252, 53, 0, 0); } }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* anything the page renders into its main area enters gently */
#main > *, #step > * { animation: rise .45s var(--ease) both; }
#main > *:nth-child(2), #step > *:nth-child(2) { animation-delay: .05s; }
#main > *:nth-child(3), #step > *:nth-child(3) { animation-delay: .1s; }
#main > *:nth-child(n+4), #step > *:nth-child(n+4) { animation-delay: .15s; }

/* reveal on scroll: add .reveal (optionally --d for a stagger); js/motion.js adds .in when it scrolls into view */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

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