/* =========================================================
   PARAMYTER — Design System v3
   Structural system: monopo saigon (transparent floating nav,
   iridescent gradient wash, whisper-weight display type, full-pill
   buttons/tags, 0px radius everywhere else, slow cubic-bezier glide,
   asymmetric 1078px-anchored editorial rhythm, rotating scroll badge).
   Palette: PARAMYTER's own — charcoal / gold / deep-gold / amber /
   sage / grey — kept identical in light and dark mode.
   Single typeface: Inter (weight does the work — 300 for display,
   400/500 body & UI, 600/700 for buttons, tags and emphasis).
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Brand palette (unchanged) */
  --charcoal: #4B484C;
  --gold: #C79517;
  --deep-gold: #8A6510;
  --amber: #EDC25C;
  --sage: #EBEFE1;
  --grey: #5E5B62;
  --white: #FFFFFF;

  /* Semantic roles — light mode */
  --bg: #FFFFFF;
  --bg-alt: var(--sage);
  --surface: #FFFFFF;
  --text: var(--charcoal);
  --text-secondary: var(--grey);
  --text-on-dark: #FFFFFF;
  --text-on-dark-secondary: var(--sage);
  --text-on-accent: #FFFFFF;
  --link: var(--deep-gold);
  --rule: rgba(75, 72, 76, 0.32);
  --rule-strong: var(--charcoal);
  --display-on-dark: var(--gold);
  --label-on-dark: var(--amber);
  --focus-ring: var(--deep-gold);
  --header-bg: #FFFFFF;
  --scrim: 15, 14, 17;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale (8px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  /* Layout */
  --container-max: 1180px;
  --editorial-max: 1078px;
  --header-h: 84px;
  --radius-pill: 999px;
  --ease-glide: cubic-bezier(0.19, 1, 0.22, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #1C1B20;
  --bg-alt: #26252B;
  --surface: #26252B;
  --text: #EDEAE6;
  --text-secondary: #B6B2B8;
  --link: var(--amber);
  --rule: rgba(255, 255, 255, 0.2);
  --rule-strong: rgba(255, 255, 255, 0.5);
  --display-on-dark: var(--gold);
  --label-on-dark: var(--amber);
  --focus-ring: var(--amber);
  --header-bg: #1C1B20;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #1C1B20;
    --bg-alt: #26252B;
    --surface: #26252B;
    --text: #EDEAE6;
    --text-secondary: #B6B2B8;
    --link: var(--amber);
    --rule: rgba(255, 255, 255, 0.2);
    --rule-strong: rgba(255, 255, 255, 0.5);
    --display-on-dark: var(--gold);
    --label-on-dark: var(--amber);
    --focus-ring: var(--amber);
    --header-bg: #1C1B20;
    color-scheme: dark;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; }
button { font-family: inherit; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--text);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
}
h1 { font-size: clamp(2.5rem, 1.85rem + 3.2vw, 4.75rem); }
h2 { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.75rem); }
h3 { font-weight: 500; letter-spacing: -0.005em; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem); }
p { margin: 0 0 var(--space-4); color: var(--text); }
.lede { font-size: 1.0625rem; color: var(--text-secondary); max-width: 58ch; font-weight: 400; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section { padding-block: var(--space-9); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--charcoal); }
.section--dark, .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--text-on-dark); }
.section--dark p { color: var(--text-on-dark-secondary); }
.section--dark .lede { color: var(--text-on-dark-secondary); }

.label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep-gold);
}
:root[data-theme="dark"] .label { color: var(--amber); }
.label--on-dark { color: var(--amber); }

.rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--space-7) 0;
}

/* ---------- Buttons: full pill, 0 radius everywhere else ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.95rem 2rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color .45s var(--ease-glide), color .45s var(--ease-glide), border-color .45s var(--ease-glide), transform .45s var(--ease-glide);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--white);
}
.btn--primary:hover { background: var(--deep-gold); border-color: var(--deep-gold); color: var(--white); }
.btn--primary:active { background: #6E5107; border-color: #6E5107; }
:root[data-theme="dark"] .btn--primary { background: var(--amber); border-color: var(--amber); color: #241C05; }
:root[data-theme="dark"] .btn--primary:hover { background: #F3D27E; border-color: #F3D27E; }

.btn--outline {
  background: transparent;
  color: var(--deep-gold);
  border-color: var(--deep-gold);
}
.btn--outline:hover { background: var(--deep-gold); color: var(--white); }
.btn--outline:active { background: #6E5107; border-color: #6E5107; }
:root[data-theme="dark"] .btn--outline { color: var(--amber); border-color: var(--amber); }
:root[data-theme="dark"] .btn--outline:hover { background: var(--amber); color: #241C05; }

.btn--on-dark { color: var(--white); border-color: rgba(255,255,255,0.65); background: transparent; }
.btn--on-dark:hover { background: var(--white); color: var(--charcoal); border-color: var(--white); }

.btn--lg { padding: 1.1rem 2.4rem; font-size: 0.875rem; }
.btn--block { width: 100%; }
.btn:disabled { background: var(--grey); border-color: var(--grey); color: var(--sage); cursor: not-allowed; transform:none; }

/* ---------- Header / Nav: transparent floating, solidifies on scroll ---------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(var(--scrim), .34) 0%, rgba(var(--scrim), 0) 100%);
  border-bottom: 1px solid transparent;
  color: var(--white);
  transition: background-color .5s var(--ease-glide), color .5s var(--ease-glide), border-color .5s var(--ease-glide);
}
.site-header.is-scrolled {
  background: var(--header-bg);
  border-bottom: 1px solid var(--rule);
  color: var(--text);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  color: inherit;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  background: var(--sage);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 6px;
  box-sizing: border-box;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}
.nav-links a:not(.btn) {
  color: inherit;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-block: var(--space-2);
  border-bottom: 1.5px solid transparent;
  opacity: 0.85;
  transition: opacity .3s var(--ease-glide), border-color .3s var(--ease-glide), color .3s var(--ease-glide);
}
.nav-links a:not(.btn):hover { text-decoration: none; opacity: 1; border-color: currentColor; }
.nav-links a[aria-current="page"]:not(.btn) { opacity: 1; color: var(--amber); border-color: var(--amber); }
.site-header.is-scrolled .nav-links a[aria-current="page"]:not(.btn) { color: var(--deep-gold); border-color: var(--deep-gold); }
:root[data-theme="dark"] .site-header.is-scrolled .nav-links a[aria-current="page"]:not(.btn) { color: var(--amber); border-color: var(--amber); }

.nav-right { display: flex; align-items: center; gap: var(--space-4); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.55);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color .3s var(--ease-glide), color .3s var(--ease-glide), background-color .3s var(--ease-glide);
}
.site-header.is-scrolled .theme-toggle { border-color: var(--rule); background: var(--surface); }
.theme-toggle:hover { border-color: var(--amber); color: var(--amber); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.55);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.site-header.is-scrolled .nav-toggle { border-color: var(--rule); background: var(--surface); }

@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--surface);
    color: var(--text);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-3) var(--space-5) var(--space-5);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s var(--ease-glide), opacity .3s var(--ease-glide);
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav-links a:not(.btn) { color: var(--text); opacity: 1; }
  .nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links li { border-bottom: 1px solid var(--rule); }
  .nav-links li:last-child { border-bottom: none; }
  .nav-links a:not(.btn) { display: block; padding-block: var(--space-4); }
  .nav-links .btn { margin-block: var(--space-3); }
  .nav-toggle { display: inline-flex; }
}

/* ---------- Iridescent wash — hero & page-header banners ---------- */
.hero, .page-header {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--deep-gold) 45%, var(--gold) 72%, var(--amber) 100%);
}
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .page-header {
  background: linear-gradient(135deg, #121116 0%, var(--deep-gold) 58%, var(--amber) 100%);
}
.hero::before, .page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(var(--scrim), .6) 0%, rgba(var(--scrim), .32) 42%, rgba(var(--scrim), .08) 68%, rgba(var(--scrim), 0) 85%);
  pointer-events: none;
}
.hero::after, .page-header::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(240px, 32%);
  pointer-events: none;
  background-image: radial-gradient(rgba(235, 239, 225, 0.9) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
  background-position: var(--space-6) var(--space-7);
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 60%, transparent 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .4) 60%, transparent 100%);
}
@media (max-width: 600px) {
  .hero::after, .page-header::after {
    width: 52px;
    background-size: 20px 20px;
    background-position: var(--space-3) var(--space-5);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, transparent 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, transparent 100%);
  }
}
.hero .container, .page-header .container { position: relative; z-index: 1; }
.hero h1, .page-header h1,
.hero p, .page-header p,
.hero .lede, .page-header .lede { color: var(--white); }

.hero {
  padding-block: calc(var(--header-h) + var(--space-8)) var(--space-9);
}
.hero .container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-8);
  align-items: start;
}
.hero-copy .label { display: block; margin-bottom: var(--space-4); color: var(--amber); }
.hero-copy h1 {
  max-width: 13ch;
  font-size: clamp(2.75rem, 1.7rem + 6.4vw, 6.5rem);
  line-height: 0.98;
}
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); }
.hero .btn--outline,
.page-header .btn--outline {
  color: var(--white);
  border-color: rgba(255,255,255,0.7);
  background: transparent;
}
.hero .btn--outline:hover,
.page-header .btn--outline:hover {
  background: rgba(255,255,255,0.18);
  color: var(--white);
  border-color: var(--white);
}

.hero-panel {
  border: none;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-panel-header {
  background: rgba(0,0,0,0.22);
  color: var(--white);
  padding: var(--space-4) var(--space-5);
}
.hero-panel-header .label { color: var(--amber); margin-bottom: var(--space-2); }
.hero-panel-header h2 { color: var(--white); font-size: 1.0625rem; font-weight: 500; margin: 0; }
.hero-panel-body { padding: var(--space-5); }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; }
.stat { border-top: 1px solid rgba(255,255,255,0.22); padding-block: var(--space-3); }
.stat:nth-child(-n+2) { border-top: none; }
.stat:nth-child(odd) { padding-right: var(--space-4); }
.stat-value { display: block; font-family: var(--font-sans); font-weight: 300; font-size: 1.625rem; color: var(--white); }
.stat-label { color: var(--sage); font-size: 0.8125rem; }

@media (max-width: 900px) {
  .hero .container { grid-template-columns: 1fr; }
}

/* Interior page header */
.page-header {
  padding-block: calc(var(--header-h) + var(--space-7)) var(--space-8);
}
.page-header--dark { background: linear-gradient(135deg, var(--charcoal) 0%, var(--deep-gold) 50%, var(--gold) 100%); }
:root[data-theme="dark"] .page-header--dark { background: linear-gradient(135deg, #121116 0%, var(--deep-gold) 55%, var(--amber) 100%); }
.page-header p.lede { max-width: 62ch; }
.page-header--compact { padding-block: calc(var(--header-h) + var(--space-6)) var(--space-7); }

/* ---------- Rotating scroll-indicator badge ---------- */
.scroll-badge {
  position: absolute;
  right: var(--space-5);
  bottom: -30px;
  width: 96px;
  height: 96px;
  z-index: 2;
}
.scroll-badge--sm { width: 72px; height: 72px; bottom: -22px; }
.scroll-badge::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: var(--radius-pill);
  background: var(--charcoal);
}
:root[data-theme="dark"] .scroll-badge::before { background: #16151A; }
.scroll-badge svg { position: relative; width: 100%; height: 100%; animation: paramyter-spin 13s linear infinite; }
.scroll-badge text { fill: var(--white); font-family: var(--font-sans); font-size: 8.4px; letter-spacing: 1.6px; }
.scroll-badge .scroll-arrow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 20px;
}
.scroll-badge--sm .scroll-arrow { font-size: 15px; }
@keyframes paramyter-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .scroll-badge svg { animation: none; } }
@media (max-width: 620px) { .scroll-badge { display: none; } }

/* ---------- Trust strip ---------- */
.trust-strip { padding-block: var(--space-6); border-bottom: 1px solid var(--rule); }
.trust-strip .trust-label {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.trust-strip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.trust-strip-row p { color: var(--text-secondary); margin: 0; font-size: 0.9375rem; }
.trust-strip-row .card-link { white-space: nowrap; font-weight: 600; font-size: 0.875rem; }
@media (max-width: 700px) {
  .trust-strip-row { flex-direction: column; align-items: flex-start; }
}
.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-7);
}
.logo-chip {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}

/* ---------- Section heads ---------- */
.section-head { max-width: 68ch; margin-bottom: var(--space-8); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- Capability grid (Home): flat panels + pill tags ---------- */
.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.capability-grid li {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  transition: background-color .35s var(--ease-glide);
}
.capability-grid li:hover { background: var(--bg-alt); }
.capability-grid li.is-featured { background: var(--bg-alt); }
.capability-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--charcoal);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
:root[data-theme="dark"] .capability-tag { background: var(--amber); color: #241C05; }
.capability-grid h3 { margin-bottom: var(--space-2); }
.capability-grid p { color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: var(--space-4); flex-grow: 1; }
.capability-grid .card-link {
  font-weight: 600;
  font-size: 0.875rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  align-self: flex-start;
  transition: border-color .3s var(--ease-glide);
}
.capability-grid li:hover .card-link { border-color: var(--deep-gold); text-decoration: none; }
:root[data-theme="dark"] .capability-grid li:hover .card-link { border-color: var(--amber); }

@media (max-width: 900px) {
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .capability-grid { grid-template-columns: 1fr; }
}

/* ---------- Process steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  counter-reset: step;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 21px; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  z-index: 0;
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } .steps::before { display: none; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: var(--space-6); background: var(--bg); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  width: 42px; height: 42px;
  border-radius: var(--radius-pill);
  background: var(--charcoal);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  position: relative;
  z-index: 1;
}
:root[data-theme="dark"] .step::before { background: var(--amber); color: #241C05; }
.step h3 { font-size: 1.0625rem; }
.step p { color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: 0; }

/* ---------- Definition-list style blocks (sectors, at-a-glance) ---------- */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.fact-grid > div {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-5);
}
.fact-grid dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-2); }
.fact-grid dd { margin: 0; font-family: var(--font-sans); font-weight: 300; font-size: 1.5rem; }
@media (max-width: 700px) { .fact-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Sector list (flat, no cards) ---------- */
.sector-list { border-top: 1px solid var(--rule); }
.sector-list > div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--rule);
}
.sector-list h3 { margin-bottom: 0; }
.sector-list p { color: var(--text-secondary); margin-bottom: 0; }
@media (max-width: 700px) {
  .sector-list > div { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ---------- Client register (real table) ---------- */
.register {
  font-size: 0.9375rem;
}
.register caption {
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.register th, .register td {
  text-align: left;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.register thead th {
  border-top: 1px solid var(--rule);
  border-bottom: 2px solid var(--rule-strong);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}
.register tbody th, .register tbody td:first-child {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  color: var(--text);
}
.register td:last-child, .register th:last-child { color: var(--text-secondary); }
@media (max-width: 620px) {
  .register-wrap { overflow-x: auto; }
  .register { min-width: 480px; }
}

/* ---------- Services detail: spec rows ---------- */
.spec-list { border-top: 1px solid var(--rule); }
.spec-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-7);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--rule);
}
.spec-row-head .capability-tag { margin-bottom: var(--space-3); }
.spec-row-head h2 { margin-bottom: 0; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); }
.spec-row-body p { max-width: 62ch; }
.spec-features {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-6);
}
.spec-features li {
  padding-left: var(--space-4);
  position: relative;
  font-size: 0.9375rem;
  color: var(--text);
}
.spec-features li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--deep-gold);
  font-weight: 700;
}
:root[data-theme="dark"] .spec-features li::before { color: var(--amber); }
@media (max-width: 800px) {
  .spec-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .spec-features { grid-template-columns: 1fr; }
}

/* ---------- Managed IT Support: coverage + CTA ---------- */
.coverage-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: var(--space-8);
  align-items: start;
}
.coverage-cta {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
}
@media (max-width: 900px) {
  .coverage-layout { grid-template-columns: 1fr; }
  .coverage-cta { position: static; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--charcoal);
  color: var(--white);
  padding: var(--space-8) var(--space-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
:root[data-theme="dark"] .cta-band { background: #2F2D34; }
.cta-band h2 { color: var(--white); margin-bottom: var(--space-2); font-size: clamp(1.75rem, 1.3rem + 2vw, 3rem); }
.cta-band p { color: var(--sage); margin-bottom: 0; }
.cta-band .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.875rem; }
.field .hint { font-size: 0.8125rem; color: var(--text-secondary); font-weight: 400; }
.field input,
.field select,
.field textarea {
  font: inherit;
  padding: 0.75rem 0.9rem;
  border-radius: 0;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--deep-gold);
  border-width: 2px;
  padding: calc(0.75rem - 1px) calc(0.9rem - 1px);
}
:root[data-theme="dark"] .field input:focus,
:root[data-theme="dark"] .field select:focus,
:root[data-theme="dark"] .field textarea:focus { border-color: var(--amber); }
.field textarea { resize: vertical; min-height: 120px; }

.checkbox-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.checkbox-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
  cursor: pointer;
  background: var(--surface);
}
.checkbox-chip input { accent-color: var(--deep-gold); }
.checkbox-chip:has(input:checked) { border-color: var(--deep-gold); background: var(--bg-alt); }

.form-note { font-size: 0.875rem; color: var(--text-secondary); margin-top: var(--space-3); }
.form-status {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--rule-strong);
  border-left: 3px solid var(--deep-gold);
  color: var(--text);
  display: none;
}
.form-status.is-visible { display: block; }

.form-panel {
  border: 1px solid var(--rule-strong);
  padding: var(--space-6);
}
.form-panel h2 { margin-bottom: var(--space-2); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }

/* Contact info row */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  margin-bottom: var(--space-8);
}
.contact-method {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-5);
}
.contact-method .label { display: block; margin-bottom: var(--space-2); }
.contact-method a { font-weight: 600; font-size: 1.0625rem; }
@media (max-width: 800px) { .contact-methods { grid-template-columns: 1fr; } }

.side-note {
  border: 1px solid var(--rule-strong);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.side-note h3 { margin-bottom: var(--space-2); font-weight: 500; }

/* ---------- Footer: editorial address-block ---------- */
.site-footer {
  background: var(--charcoal);
  color: var(--sage);
  padding-block: var(--space-9) var(--space-6);
}
:root[data-theme="dark"] .site-footer { background: #16151A; }
.site-footer a { color: var(--sage); transition: color .3s var(--ease-glide); }
.site-footer a:hover { color: var(--white); }
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
  margin-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255,255,255,0.16);
}
@media (max-width: 800px) { .site-footer .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .site-footer .footer-grid { grid-template-columns: 1fr; } }
.site-footer .footer-col:first-child .brand {
  font-weight: 300;
  font-size: clamp(2rem, 1.6rem + 2vw, 3.25rem);
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: var(--space-4);
}
.site-footer .brand .brand-mark {
  width: 0.62em; height: 0.62em;
  padding: 0.11em;
  background: var(--sage);
}
.site-footer p { color: var(--sage); max-width: 34ch; }
.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  margin-bottom: var(--space-4);
  font-weight: 600;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { font-size: 0.9375rem; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.8125rem;
  color: var(--sage);
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -60px;
  background: var(--charcoal);
  color: var(--white);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-pill);
  z-index: 200;
  font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Windows High Contrast / forced-colors ---------- */
@media (forced-colors: active) {
  .capability-grid li, .fact-grid > div, .contact-method,
  .capability-grid, .fact-grid, .register th, .register td,
  .sector-list > div, .spec-row, .hero-panel, .side-note, .form-panel,
  .site-header, .rule, .hero, .page-header, .coverage-cta {
    border-color: CanvasText !important;
  }
  .btn { border: 2px solid ButtonText !important; background: ButtonFace !important; color: ButtonText !important; }
  .hero::before, .page-header::before, .hero::after, .page-header::after, .scroll-badge { display: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .nav-toggle, .theme-toggle, .skip-link, .cta-band, .scroll-badge { display: none; }
  .hero, .page-header { background: none; color: #000; }
  .hero::before, .page-header::before, .hero::after, .page-header::after { display: none; }
  .hero h1, .page-header h1, .hero p, .page-header p, .hero .lede, .page-header .lede { color: #000; }
  .btn { border: 1px solid #000; color: #000; background: none; }
  .capability-tag, .site-footer, .hero-panel-header, .coverage-cta {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  a { text-decoration: underline; }
}