/*
Theme Name: AI Training Institute
Theme URI: https://aitraininginstitute.in
Author: AI Training Institute
Description: Bespoke lightweight theme for aitraininginstitute.in — an online AI training institute teaching generative AI, ML/data science, AI automation and AI agent development. Rose/deep-purple light theme, fully responsive, no page builder, minimal JS, semantic HTML.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: aitraininginstitute
*/

/*
  AI Training Institute — single stylesheet, no build step.
  One file deliberately: one render-blocking request beats several, and the
  whole thing is small enough that splitting it buys nothing.

  Palette is rose + deep purple. Every other bespoke theme on this box already
  owns a hue — blue, orange, indigo, teal, magenta, violet, emerald, gold,
  lime and cyan — so rose/purple was the remaining distinct family, and reads
  energetic and modern for an edtech brand without clashing with any sibling.

  Brand and success are kept as two separate colours (rose is not a stand-in
  for "done") because rose reads as "in progress / call-to-action" as easily
  as "done" — a dedicated green avoids that ambiguity on status badges. Amber
  and red stay as the only other functional signals (caution and failure);
  neither is ever used decoratively.

  Every layout rule is mobile-first: base styles target the narrowest
  viewport and min-width media queries add columns as space allows.
*/

/* ---------- Tokens ---------- */
:root {
  --white: #ffffff;
  --gray-50: #fdf5f8;
  --gray-100: #fbe8f0;
  --border: #f0d3e2;
  --ink-900: #1f1730;
  --ink-800: #2c2242;
  --ink-700: #453a5e;
  --ink-600: #665875;
  --ink-500: #8a7d96;
  --ink-400: #b5abc0;

  --night-900: #1f1730;
  --night-800: #2c2242;
  --brand-900: #6d1140;
  --brand-800: #931655;
  --brand-700: #b81a68;
  --brand-600: #e0197a;
  --brand-500: #ec4899;
  --brand-400: #f472b6;
  --brand-100: #fce0ee;
  --brand-50: #fff0f7;

  --green-600: #15803d;
  --green-50: #eefdf3;
  --amber-600: #a15c07;
  --amber-50: #fff8ea;
  --red-600: #c02630;
  --red-50: #fdeef0;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(7, 17, 13, 0.05);
  --shadow-md: 0 1px 2px rgba(7, 17, 13, 0.05), 0 14px 30px -14px rgba(7, 17, 13, 0.25);
  --container: 1200px;
  --container-narrow: 760px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-700);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Guards against any single long string (a URL, a class name in a code
     sample) forcing a horizontal scrollbar on a 320px phone. */
  overflow-wrap: break-word;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--ink-900);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--gray-100);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Accessibility helpers ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  background: var(--brand-600);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.section {
  padding-block: 3.5rem;
}

.section-tight {
  padding-block: 2.5rem;
}

@media (min-width: 768px) {
  .section {
    padding-block: 5.5rem;
  }
}

.section-alt {
  background: var(--gray-50);
}

.section-dark {
  background: var(--night-900);
  color: #bcc9c2;
}

.section-dark h2,
.section-dark h3 {
  color: var(--white);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid var(--border);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

.section-head {
  max-width: 640px;
  margin-bottom: 2.5rem;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  margin-top: 0.75rem;
  font-size: clamp(1.55rem, 1.3rem + 1.4vw, 2.25rem);
}

.section-head p {
  margin-top: 0.9rem;
  color: var(--ink-500);
  font-size: 1.05rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  /* Long CTA labels wrap instead of overflowing a narrow phone. */
  text-align: center;
  line-height: 1.3;
}

.btn-primary {
  background: var(--brand-600);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--brand-800);
}

.btn-secondary {
  background: var(--white);
  color: var(--ink-700);
  border-color: var(--border);
}

.btn-secondary:hover {
  border-color: var(--brand-500);
  color: var(--brand-700);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 1rem 1.75rem;
  font-size: 1rem;
}

/* On the narrowest phones a pair of CTAs stacks full-width rather than
   squeezing two pills onto one line. */
@media (max-width: 400px) {
  .hero-ctas .btn,
  .cta-band-actions .btn {
    width: 100%;
  }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink-900);
  min-width: 0;
}

.brand-mark {
  color: var(--brand-600);
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.brand-name {
  font-weight: 800;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.brand-name .accent {
  color: var(--brand-600);
}

.brand-tagline {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Below 380px the tagline is the first thing to go, so the logo and the
   menu button always fit on one row. */
@media (max-width: 380px) {
  .brand-tagline {
    display: none;
  }
  .brand-name {
    font-size: 0.95rem;
  }
}

.main-nav {
  display: none;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.main-nav a {
  display: inline-block;
  padding: 0.5rem 0.7rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--ink-600);
  font-weight: 500;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--brand-700);
  background: var(--brand-50);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-700);
}

.mobile-nav {
  border-top: 1px solid var(--border);
  background: var(--white);
  /* A long menu stays scrollable instead of running off the viewport. */
  max-height: calc(100vh - 4.25rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav[hidden] {
  display: none;
}

.mobile-nav ul {
  padding: 0.75rem 0;
}

.mobile-nav a {
  display: block;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  color: var(--ink-700);
  font-weight: 500;
  border-bottom: 1px solid var(--gray-100);
}

.mobile-nav .btn {
  margin: 0.75rem 1.25rem;
}

@media (min-width: 1040px) {
  .main-nav {
    display: block;
  }
  .nav-toggle {
    display: none;
  }
  .mobile-nav {
    display: none !important;
  }
}

@media (max-width: 1039px) {
  .header-actions .btn-primary {
    display: none;
  }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  padding-block: 1rem;
  font-size: 0.85rem;
  color: var(--ink-500);
  border-bottom: 1px solid var(--border);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.breadcrumbs a {
  text-decoration: none;
  color: var(--ink-500);
}

.breadcrumbs a:hover {
  color: var(--brand-700);
}

.breadcrumbs [aria-current="page"] {
  color: var(--ink-700);
  font-weight: 600;
}

/* ---------- Hero ---------- */
.hero {
  padding-block: 2.75rem 3.25rem;
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--white) 65%);
}

@media (min-width: 768px) {
  .hero {
    padding-block: 4.5rem 5rem;
  }
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
  }
}

/* hero.jpg is 1536x1024 (3:2) — match that ratio exactly so object-fit
   never has to crop it, unlike .media-figure's 4:3 box used elsewhere. */
.hero-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  aspect-ratio: 3/2;
  max-width: 100%;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero h1 {
  font-size: clamp(1.85rem, 1.4rem + 2.2vw, 3rem);
  text-wrap: balance;
}

.hero-lede {
  margin-top: 1.1rem;
  font-size: 1.08rem;
  color: var(--ink-600);
  max-width: 46ch;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.hero-trust {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-500);
}

.hero-trust li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hero-trust svg {
  color: var(--green-600);
  flex-shrink: 0;
}

/* ---------- Project status mockup ---------- */
.dashboard {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.25rem;
}

@media (min-width: 480px) {
  .dashboard {
    padding: 1.5rem;
  }
}

.dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dashboard-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.dashboard-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--green-600);
  font-weight: 600;
}

.dashboard-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--green-600);
}

.score-ring-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.score-ring {
  --score: 98;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: conic-gradient(var(--brand-600) calc(var(--score) * 1%), var(--gray-100) 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.score-ring-inner {
  width: 5.1rem;
  height: 5.1rem;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-ring-inner strong {
  font-size: 1.6rem;
  color: var(--ink-900);
  line-height: 1;
}

.score-ring-inner span {
  font-size: 0.65rem;
  color: var(--ink-500);
  margin-top: 0.15rem;
}

.score-caption {
  min-width: 0;
}

.score-caption p:first-child {
  font-weight: 700;
  color: var(--ink-900);
}

.score-caption p {
  font-size: 0.9rem;
  color: var(--ink-500);
  margin-top: 0.2rem;
}

.metric-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem 0.6rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

@media (min-width: 480px) {
  .metric-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.metric-card {
  text-align: left;
  min-width: 0;
}

.metric-label {
  font-size: 0.68rem;
  color: var(--ink-500);
}

.metric-value {
  margin-top: 0.25rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink-900);
}

.metric-value.up { color: var(--green-600); }
.metric-value.down { color: var(--red-600); }
.metric-value.flat { color: var(--amber-600); }
.metric-value.brand { color: var(--brand-600); }

.dashboard-note {
  margin-top: 1rem;
  font-size: 0.72rem;
  color: var(--ink-400);
}

/* Build-progress rows inside the mockup */
.bar-rows {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.85rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.bar-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
}

.bar-row .bar-label {
  color: var(--ink-600);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--gray-100);
  overflow: hidden;
  min-width: 0;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand-500);
}

.bar-row .bar-value {
  color: var(--ink-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Status badges ---------- */
.severity {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}

.severity-brand { background: var(--brand-50); color: var(--brand-700); }
.severity-good { background: var(--green-50); color: var(--green-600); }
.severity-warn { background: var(--amber-50); color: var(--amber-600); }
.severity-bad { background: var(--red-50); color: var(--red-600); }

/* ---------- Icon tile ---------- */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand-600);
  flex-shrink: 0;
}

.icon-tile.dark {
  background: var(--night-900);
  color: var(--white);
}

/* ---------- Cards / grids ---------- */
.grid {
  display: grid;
  gap: 1.25rem;
}

/*
  Grid and flex children default to `min-width: auto`, which refuses to shrink
  below the intrinsic width of their content. One wide descendant — a
  min-width table inside a .table-scroll, a long unbreakable token — then
  forces its whole track wider than the viewport and the PAGE scrolls
  sideways, even though the .table-scroll itself was supposed to absorb it.

  Resetting min-width on every direct child is the standard fix. It is applied
  to the containers rather than to individual cards because the offending
  child is often a bare <div> with no class of its own.
*/
.grid > *,
.media-split > *,
.contact-layout > *,
.compare-grid > *,
.matrix-grid > *,
.pricing-grid > *,
.opt-grid > * {
  min-width: 0;
}

/* Belt and braces: the scroll container must never exceed its own column. */
.table-scroll {
  max-width: 100%;
}

/* Prose list items are flex rows, so the text side needs to be shrinkable
   too — otherwise a long URL in a legal page pushes the layout out. */
.prose ul li,
.category-card ul li,
.pricing-features li,
.contact-info-list li,
.hero-trust li,
.problem-item {
  min-width: 0;
}

.prose ul li > *,
.problem-item > span {
  min-width: 0;
  overflow-wrap: break-word;
}

.grid-2,
.grid-3 {
  grid-template-columns: 1fr;
}

.grid-4 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .grid-2,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 860px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
}

a.card {
  text-decoration: none;
  display: block;
  color: inherit;
}

a.card:hover {
  border-color: var(--brand-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card h3 {
  margin-top: 1rem;
  font-size: 1.05rem;
}

.card p {
  margin-top: 0.5rem;
  color: var(--ink-500);
  font-size: 0.92rem;
}

.card-link {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: none;
}

.card-img {
  margin: -1.5rem -1.5rem 1.25rem;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  aspect-ratio: 16/10;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Problem list */
.problem-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .problem-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .problem-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.problem-item {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--border);
  min-width: 0;
}

.problem-item svg {
  color: var(--red-600);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* ---------- Steps ---------- */
.steps-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  position: relative;
  min-width: 0;
}

.step-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--brand-100);
  -webkit-text-stroke: 1px var(--brand-500);
}

.step-card h3 {
  margin-top: 0.75rem;
  font-size: 1rem;
}

.step-card p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-500);
}

/* ---------- Media / split (image + text) ---------- */
.media-split {
  grid-template-columns: 1fr;
  gap: 2.25rem;
  align-items: center;
}

@media (min-width: 860px) {
  .media-split {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .media-split.reverse > .media-figure {
    order: 2;
  }
}

.media-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  aspect-ratio: 4/3;
  max-width: 100%;
}

.media-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-banner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 21/9;
  border: 1px solid var(--border);
  max-width: 100%;
}

.media-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Before / after ---------- */
.compare-grid {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .compare-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.compare-card {
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--border);
  min-width: 0;
}

@media (min-width: 480px) {
  .compare-card {
    padding: 1.75rem;
  }
}

.compare-card.before {
  background: var(--gray-50);
}

.compare-card.after {
  background: var(--brand-50);
  border-color: var(--brand-100);
}

.compare-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.compare-card.after .compare-label {
  color: var(--brand-700);
}

.compare-metrics {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.compare-metrics dt {
  font-size: 0.78rem;
  color: var(--ink-500);
}

.compare-metrics dd {
  margin: 0.2rem 0 0;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink-900);
}

.compare-card.after .compare-metrics dd {
  color: var(--brand-700);
}

.compare-note {
  margin-top: 1.5rem;
  font-size: 0.8rem;
  color: var(--ink-500);
  text-align: center;
}

/* ---------- Industries ---------- */
.industry-grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .industry-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .industry-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.industry-card {
  text-align: center;
  padding: 1.5rem 1rem;
}

.industry-card h3 {
  font-size: 0.92rem;
  margin-top: 0.75rem;
}

.industry-card .icon-tile {
  margin-inline: auto;
}

/* ---------- FAQ ---------- */
.faq-list {
  border-top: 1px solid var(--border);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-weight: 600;
  color: var(--ink-900);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary .faq-icon {
  flex-shrink: 0;
  transition: transform 0.15s ease;
  color: var(--brand-600);
}

.faq-item[open] summary .faq-icon {
  transform: rotate(45deg);
}

.faq-item p {
  padding-bottom: 1.1rem;
  color: var(--ink-500);
  max-width: 65ch;
}

/* ---------- Final CTA ---------- */
.cta-band {
  background: var(--night-900);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.25rem;
  text-align: center;
  color: var(--white);
}

@media (min-width: 640px) {
  .cta-band {
    padding: 3rem 1.5rem;
  }
}

.cta-band h2 {
  color: var(--white);
  font-size: clamp(1.4rem, 1.2rem + 1.2vw, 2rem);
}

.cta-band p {
  margin-top: 0.75rem;
  color: #bcc9c2;
  max-width: 46ch;
  margin-inline: auto;
}

.cta-band-actions {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.cta-band .btn-secondary {
  background: transparent;
  border-color: #2c4239;
  color: var(--white);
}

.cta-band .btn-secondary:hover {
  border-color: var(--brand-400);
  color: var(--brand-400);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--gray-50);
  border-top: 1px solid var(--border);
  padding-block: 3rem 1.5rem;
}

.footer-grid {
  display: grid;
  gap: 2.25rem;
  grid-template-columns: 1fr;
}

.location-suburbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.location-suburbs a {
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--gray-100);
  color: var(--ink-600);
  text-decoration: none;
}

.location-suburbs a:hover {
  color: var(--brand-600);
}

@media (min-width: 560px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer-about p {
  margin-top: 0.9rem;
  color: var(--ink-500);
  font-size: 0.9rem;
  max-width: 34ch;
}

.footer-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 0.9rem;
}

.footer-links li + li {
  margin-top: 0.55rem;
}

.footer-links a {
  text-decoration: none;
  color: var(--ink-600);
  font-size: 0.92rem;
}

.footer-links a:hover {
  color: var(--brand-700);
}

.footer-contact {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.footer-contact a {
  text-decoration: none;
  color: var(--ink-600);
  font-weight: 600;
}

.footer-contact a:hover {
  color: var(--brand-700);
}

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--ink-500);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.footer-legal a {
  text-decoration: none;
  color: var(--ink-500);
}

.footer-legal a:hover {
  color: var(--brand-700);
}

/* ---------- Content pages (blog, legal, article) ---------- */
.prose {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.prose h2 {
  margin-top: 2.25rem;
  font-size: 1.35rem;
}

.prose h3 {
  margin-top: 1.75rem;
  font-size: 1.08rem;
}

.prose p {
  margin-top: 1rem;
  color: var(--ink-600);
}

.prose ul,
.prose ol {
  margin-top: 1rem;
  display: grid;
  gap: 0.6rem;
}

.prose ul li {
  display: flex;
  gap: 0.6rem;
  color: var(--ink-600);
}

.prose ul li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--brand-500);
  margin-top: 0.55rem;
  flex-shrink: 0;
}

.prose a {
  color: var(--brand-700);
}

/* Tables scroll inside their own box rather than widening the page. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 1.25rem;
}

.prose table,
.table-scroll table {
  font-size: 0.92rem;
  min-width: 32rem;
}

.prose th,
.prose td,
.table-scroll th,
.table-scroll td {
  padding: 0.75rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.prose th,
.table-scroll th {
  background: var(--gray-50);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
  color: var(--ink-500);
  margin-top: 1rem;
}

.blog-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-card .category {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--ink-500);
}

/* ---------- Form ---------- */
.form-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .form-row-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 0.4rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  /* 16px stops iOS Safari zooming the page in on focus. */
  font-size: 1rem;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-500);
  outline: 2px solid var(--brand-100);
}

.field-note {
  margin-top: 1.25rem;
  font-size: 0.8rem;
  color: var(--ink-500);
}

/* Checkbox / radio rows used by the cost calculator */
.opt-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .opt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.opt {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  font-size: 0.9rem;
  min-width: 0;
}

.opt:hover {
  border-color: var(--brand-400);
}

.opt input {
  width: auto;
  margin: 0.2rem 0 0;
  flex-shrink: 0;
  accent-color: var(--brand-600);
}

.opt .opt-label {
  font-weight: 600;
  color: var(--ink-800);
}

.opt .opt-note {
  display: block;
  font-weight: 400;
  color: var(--ink-500);
  font-size: 0.82rem;
  margin-top: 0.15rem;
}

.opt:has(input:checked) {
  border-color: var(--brand-500);
  background: var(--brand-50);
}

/* Calculator result panel */
.calc-result {
  background: var(--night-900);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.calc-result .calc-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-400);
}

.calc-result .calc-range {
  margin-top: 0.6rem;
  font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.calc-result .calc-sub {
  margin-top: 0.6rem;
  color: #bcc9c2;
  font-size: 0.9rem;
}

.calc-breakdown {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.5rem;
  text-align: left;
  font-size: 0.85rem;
}

.calc-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
}

.calc-breakdown li span:last-child {
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Pricing ---------- */
.pricing-grid {
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 860px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  min-width: 0;
}

.pricing-card.featured {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-md);
  position: relative;
}

.pricing-featured-tag {
  position: absolute;
  top: -0.9rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand-600);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink-900);
}

.pricing-price {
  margin-top: 0.5rem;
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--ink-900);
}

.pricing-price span {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-500);
}

.pricing-desc {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-500);
}

.pricing-features {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.65rem;
  flex-grow: 1;
}

.pricing-features li {
  display: flex;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: var(--ink-600);
}

.pricing-features svg {
  color: var(--brand-600);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.pricing-card .btn {
  margin-top: 1.5rem;
}

/* ---------- Timeline (process) ---------- */
.timeline {
  position: relative;
  padding-left: 2.5rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--border);
}

.timeline-item {
  position: relative;
  padding-bottom: 2.25rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 0.3rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--brand-600);
  border: 3px solid var(--brand-100);
}

.timeline-item h3 {
  font-size: 1.05rem;
}

.timeline-item p {
  margin-top: 0.5rem;
  color: var(--ink-500);
  font-size: 0.92rem;
}

/* ---------- Misc ---------- */
.text-center {
  text-align: center;
}

.mt-lg {
  margin-top: 3rem;
}

.divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin-block: 3rem;
}

.contact-layout {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.contact-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

.contact-info-list svg {
  color: var(--brand-600);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.contact-info-list a {
  text-decoration: none;
  color: var(--ink-700);
  font-weight: 600;
}

.contact-info-list a:hover {
  color: var(--brand-700);
}

.error-hero {
  text-align: center;
  padding-block: 4rem;
}

@media (min-width: 768px) {
  .error-hero {
    padding-block: 5rem;
  }
}

.error-code {
  font-size: 4rem;
  font-weight: 800;
  color: var(--brand-600);
}

/* ---------- Mega menu ---------- */
.has-dropdown {
  position: relative;
}

.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-600);
  cursor: pointer;
}

.dropdown-trigger:hover,
.dropdown-trigger[aria-expanded="true"] {
  color: var(--brand-700);
  background: var(--brand-50);
}

.dropdown-trigger svg {
  transition: transform 0.15s ease;
}

.dropdown-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(54rem, 92vw);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  z-index: 60;
}

.dropdown-panel[hidden] {
  display: none;
}

.dropdown-col-heading {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 0.6rem;
}

.dropdown-links li + li {
  margin-top: 0.15rem;
}

.dropdown-links a {
  display: block;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-700);
  font-size: 0.88rem;
}

.dropdown-links a:hover {
  background: var(--gray-50);
  color: var(--brand-700);
}

/* Mobile: dropdown groups render as nested <details> inside the mobile menu */
.mobile-dropdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid var(--gray-100);
}

.mobile-dropdown summary::-webkit-details-marker {
  display: none;
}

.mobile-dropdown summary svg {
  transition: transform 0.15s ease;
}

.mobile-dropdown[open] summary svg {
  transform: rotate(180deg);
}

.mobile-dropdown .dropdown-links {
  padding: 0.25rem 1.25rem 0.75rem 2rem;
}

.mobile-dropdown .dropdown-links a {
  padding: 0.5rem 0;
  color: var(--ink-500);
}

/* ---------- Tech / capability chips ---------- */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-600);
}

.badge-chip .dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--brand-500);
}

/* ---------- Category grid ---------- */
.category-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  min-width: 0;
}

.category-card h3 {
  font-size: 1rem;
  color: var(--brand-700);
}

.category-card ul {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.5rem;
}

.category-card ul li {
  display: flex;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--ink-600);
}

.category-card ul li::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--brand-500);
  margin-top: 0.5rem;
  flex-shrink: 0;
}

/* ---------- Scope / deliverables matrix ---------- */
.matrix-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .matrix-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.matrix-cell {
  border-radius: var(--radius-md);
  padding: 1.5rem;
  border: 1px solid var(--border);
  min-width: 0;
}

.matrix-cell .matrix-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.matrix-cell h3 {
  margin-top: 0.5rem;
  font-size: 1.05rem;
}

.matrix-cell.included {
  background: var(--brand-50);
  border-color: var(--brand-100);
}
.matrix-cell.included .matrix-label {
  color: var(--green-600);
}

.matrix-cell.plan {
  background: var(--brand-50);
  border-color: var(--brand-100);
}
.matrix-cell.plan .matrix-label {
  color: var(--brand-700);
}

.matrix-cell.optional {
  background: var(--gray-50);
}
.matrix-cell.optional .matrix-label {
  color: var(--ink-500);
}

.matrix-cell.excluded {
  background: var(--red-50);
  border-color: #f2cdd0;
}
.matrix-cell.excluded .matrix-label {
  color: var(--red-600);
}

/* ---------- Flow / architecture diagrams ---------- */
.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow-node {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.flow-node .icon-tile {
  width: 2.25rem;
  height: 2.25rem;
}

.flow-node span.label {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-900);
}

.flow-node.accent {
  border-color: var(--brand-500);
  background: var(--brand-50);
}

.flow-connector {
  width: 2px;
  height: 1.4rem;
  background: var(--border);
  position: relative;
}

.flow-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--border);
}

/* Sprint / phase stages */
.funnel {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.funnel-stage {
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-100);
  background: var(--brand-50);
  padding: 1rem 1.25rem;
  margin-inline: auto;
  width: 100%;
  text-align: center;
}

.funnel-stage .stage-name {
  font-weight: 700;
  color: var(--brand-800);
  font-size: 0.95rem;
}

.funnel-stage .stage-desc {
  font-size: 0.85rem;
  color: var(--ink-500);
  margin-top: 0.25rem;
}

/* The taper only reads at tablet width and up; on a phone full-width
   stages are clearer than progressively narrower boxes. */
@media (min-width: 768px) {
  .funnel-stage.w1 { width: 100%; }
  .funnel-stage.w2 { width: 86%; }
  .funnel-stage.w3 { width: 72%; }
  .funnel-stage.w4 { width: 58%; }
}

/* ---------- Stat strip ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (min-width: 860px) {
  .stat-strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-item {
  text-align: center;
  min-width: 0;
}

.stat-value {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 800;
  color: var(--brand-600);
  line-height: 1.1;
}

.stat-label {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--ink-500);
}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-fab {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s ease;
}

.whatsapp-fab:hover {
  transform: scale(1.06);
}

@media (max-width: 640px) {
  .whatsapp-fab {
    left: 1rem;
    bottom: 1rem;
    width: 3.25rem;
    height: 3.25rem;
  }
}