/* ════════════════════════════════════════════════════════════════════
   W9 STUDIO — SHARED FLUENT 2 SITE CHROME
   Consumes canonical tokens from w9-fluent-tokens.css. No local palette.
   Load order: w9-fluent-tokens.css → w9-site.css → scoped page styles.
   ════════════════════════════════════════════════════════════════════ */

/* ── Base and accessibility ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
html[data-w9-theme="light"] { color-scheme: light; }
body {
  min-height: 100vh;
  background: var(--colorNeutralBackground4);
  color: var(--colorNeutralForeground2);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase400);
  line-height: 1.7;
  accent-color: var(--colorBrandBackground);
  text-rendering: optimizeLegibility;
}
button,
input,
select,
textarea { font: inherit; }
button,
a,
input,
select,
textarea { -webkit-tap-highlight-color: transparent; }
::selection {
  background: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand);
}
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible {
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: var(--spacingHorizontalXS);
}
a {
  color: var(--colorNeutralForeground2);
  text-decoration: none;
  transition:
    color var(--durationNormal) var(--curveEasyEase),
    background-color var(--durationNormal) var(--curveEasyEase),
    border-color var(--durationNormal) var(--curveEasyEase);
}
a:hover { color: var(--colorNeutralForeground1); }
section a:not(.cta),
.container a,
.faq-item a { color: var(--colorBrandForeground1); }
section a:not(.cta):hover,
.container a:hover,
.faq-item a:hover {
  color: var(--colorBrandForeground2);
  text-decoration: underline;
  text-underline-offset: var(--spacingHorizontalXS);
}

/* ── Skip link ── */
.w9-skip-link {
  position: fixed;
  z-index: 10000;
  top: var(--spacingHorizontalS);
  left: var(--spacingHorizontalS);
  transform: translateY(-160%);
  padding: var(--spacingHorizontalM) var(--spacingHorizontalL);
  border-radius: var(--borderRadiusMedium);
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  box-shadow: var(--shadow8);
}
.w9-skip-link:focus-visible { transform: translateY(0); }

/* ── Navigation ── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--navHeight);
  padding: var(--spacingHorizontalL) var(--spacingHorizontalXXL);
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalXXL);
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--colorNeutralBackground4) 94%, transparent);
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke3);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(var(--spacingHorizontalL));
}
nav .brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase400);
  font-weight: var(--fontWeightBold);
  letter-spacing: .1em;
  text-transform: uppercase;
}
nav .brand span { color: var(--colorBrandForeground1); }
nav .links {
  display: flex;
  align-items: center;
  gap: var(--spacingHorizontalXS);
  flex-wrap: wrap;
  font-size: var(--fontSizeBase300);
}
nav .links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--spacingHorizontalM);
  border-radius: var(--borderRadiusMedium);
  font-weight: var(--fontWeightSemibold);
}
nav .links a:hover {
  background: var(--colorSubtleBackgroundHover);
  color: var(--colorNeutralForeground1);
}
nav .links a.active,
nav .links a[aria-current="page"] {
  background: var(--colorSubtleBackgroundPressed);
  color: var(--colorBrandForeground1);
}
nav .links a.active:hover,
nav .links a[aria-current="page"]:hover { color: var(--colorBrandForeground1); }
.brand-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacingHorizontalSNudge);
}

/* ── Test Shoot Mode status pill ── */
.test-shoot-pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalXS);
  min-height: var(--spacingHorizontalXXL);
  padding: 0 var(--spacingHorizontalS);
  border: var(--strokeWidthThin) solid color-mix(in srgb, var(--colorBrandStroke1) 48%, transparent);
  border-radius: var(--borderRadiusCircular);
  background: color-mix(in srgb, var(--colorBrandBackground) 10%, transparent);
  color: var(--colorBrandForeground2);
  font-size: var(--fontSizeBase100);
  font-weight: var(--fontWeightBold);
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.rec-dot {
  width: var(--spacingHorizontalXS);
  height: var(--spacingHorizontalXS);
  border-radius: var(--borderRadiusCircular);
  background: var(--colorBrandForeground1);
  animation: recPulse 2.6s var(--curveEasyEase) infinite;
}
@keyframes recPulse {
  0%, 66%, 100% { opacity: .62; transform: scale(.82); box-shadow: none; }
  12%, 28% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 var(--spacingHorizontalM) color-mix(in srgb, var(--colorBrandForeground1) 72%, transparent);
  }
}

/* ── Hero and page title ── */
.hero {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 5rem) var(--spacingHorizontalXXL) 3rem;
}
.hero h1,
.container h1 {
  color: var(--colorNeutralForeground1);
  font-weight: var(--fontWeightBold);
  letter-spacing: -.035em;
}
.hero h1 {
  margin-bottom: var(--spacingHorizontalL);
  font-size: clamp(var(--fontSizeHero800), 5vw, var(--fontSizeHero900));
  line-height: 1.2;
}
.hero .subtitle {
  max-width: 780px;
  margin-bottom: var(--spacingHorizontalXXL);
  color: var(--colorNeutralForeground3);
  font-size: var(--fontSizeBase400);
}
.eyebrow {
  margin-bottom: var(--spacingHorizontalS);
  color: var(--colorBrandForeground1);
  font-family: var(--fontFamilyMonospace);
  font-size: var(--fontSizeBase200);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ── Content and Fluent surfaces ── */
section {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--spacingHorizontalXXL);
}
h2 {
  margin-bottom: var(--spacingHorizontalL);
  padding-left: var(--spacingHorizontalM);
  border-left: var(--strokeWidthThick) solid var(--colorBrandStroke1);
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase600);
  line-height: var(--lineHeightBase600);
}
h3 { color: var(--colorNeutralForeground1); }
p {
  margin-bottom: var(--spacingHorizontalXL);
  color: var(--colorNeutralForeground3);
}
ul {
  margin: 0 0 var(--spacingHorizontalXXL) var(--spacingHorizontalXXL);
  color: var(--colorNeutralForeground3);
}
li { margin-bottom: var(--spacingHorizontalS); }
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacingHorizontalXXXL) var(--spacingHorizontalXXL);
}
.container h1 {
  margin-bottom: var(--spacingHorizontalXS);
  font-size: var(--fontSizeHero700);
}
.container h2 {
  margin: var(--spacingHorizontalXXXL) 0 var(--spacingHorizontalS);
  padding-left: 0;
  border-left: none;
  font-size: var(--fontSizeBase400);
}
.container .subtitle {
  margin-bottom: var(--spacingHorizontalXXXL);
  color: var(--colorNeutralForeground4);
  font-size: var(--fontSizeBase400);
}
.panel,
.address-block,
.cta-panel {
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke3);
  border-radius: var(--borderRadiusLarge);
  background: var(--colorNeutralBackground3);
  box-shadow: var(--shadow4);
}
.panel { padding: var(--spacingHorizontalXL); }
.panel h3 {
  margin-bottom: var(--spacingHorizontalM);
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase400);
}

/* ── Fluent actions and controls ── */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: var(--spacingHorizontalXXL) var(--spacingHorizontalM) var(--spacingHorizontalXXL) 0;
  padding: var(--spacingHorizontalM) var(--spacingHorizontalXXL);
  border: var(--strokeWidthThin) solid var(--colorBrandBackground);
  border-radius: var(--borderRadiusMedium);
  background: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand);
  font-size: var(--fontSizeBase400);
  font-weight: var(--fontWeightSemibold);
  cursor: pointer;
  transition:
    background-color var(--durationFast) var(--curveEasyEase),
    border-color var(--durationFast) var(--curveEasyEase),
    box-shadow var(--durationFast) var(--curveEasyEase),
    transform var(--durationFast) var(--curveEasyEase);
}
.cta:hover,
.cta.brand:hover {
  background: var(--colorBrandBackgroundHover);
  border-color: var(--colorBrandBackgroundHover);
  color: var(--colorNeutralForegroundOnBrand);
  text-decoration: none;
  box-shadow: var(--shadow4);
}
.cta:active { transform: translateY(var(--strokeWidthThin)); }
.cta.brand { background: var(--colorBrandBackground); color: var(--colorNeutralForegroundOnBrand); }
.cta.secondary {
  border-color: var(--colorNeutralStroke1);
  background: var(--colorNeutralBackground2);
  color: var(--colorNeutralForeground1);
}
.cta.secondary:hover {
  border-color: var(--colorNeutralStrokeAccessible);
  background: var(--colorSubtleBackgroundPressed);
  color: var(--colorNeutralForeground1);
}
.cta[disabled],
.cta[aria-disabled="true"] {
  border-color: var(--colorNeutralStrokeDisabled);
  background: var(--colorNeutralBackground2);
  color: var(--colorNeutralForegroundDisabled);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}
.cta-panel {
  margin-top: var(--spacingHorizontalXXXL);
  padding: var(--spacingHorizontalXXL);
  text-align: center;
}
input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-radius: var(--borderRadiusMedium);
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  padding: var(--spacingHorizontalM);
  transition:
    border-color var(--durationFast) var(--curveEasyEase),
    box-shadow var(--durationFast) var(--curveEasyEase),
    background-color var(--durationFast) var(--curveEasyEase);
}
textarea { min-height: 132px; resize: vertical; }
input:hover,
select:hover,
textarea:hover { border-color: var(--colorNeutralStrokeAccessible); }
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--colorBrandStroke1);
  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
  outline-offset: var(--spacingHorizontalXXS);
}
input:disabled,
select:disabled,
textarea:disabled {
  border-color: var(--colorNeutralStrokeDisabled);
  background: var(--colorNeutralBackground2);
  color: var(--colorNeutralForegroundDisabled);
  cursor: not-allowed;
}

/* ── Status and feedback ── */
.w9-status,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacingHorizontalXS);
  min-height: var(--spacingHorizontalXXL);
  padding: 0 var(--spacingHorizontalS);
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-radius: var(--borderRadiusCircular);
  background: var(--colorNeutralBackground2);
  color: var(--colorNeutralForeground2);
  font-size: var(--fontSizeBase200);
  font-weight: var(--fontWeightSemibold);
}
.w9-status[data-status="success"],
.status-badge.success {
  border-color: var(--colorStatusSuccessForeground1);
  background: var(--colorStatusSuccessBackground1);
  color: var(--colorStatusSuccessForeground2);
}
.w9-status[data-status="warning"],
.status-badge.warning {
  border-color: var(--colorStatusWarningForeground1);
  background: var(--colorStatusWarningBackground1);
  color: var(--colorStatusWarningForeground1);
}
.w9-status[data-status="danger"],
.status-badge.danger {
  border-color: var(--colorStatusDangerForeground1);
  background: var(--colorStatusDangerBackground1);
  color: var(--colorStatusDangerForeground1);
}
.notice {
  margin: var(--spacingHorizontalXXL) 0;
  padding: var(--spacingHorizontalXL);
  border: var(--strokeWidthThin) solid var(--colorBrandStroke1);
  border-radius: var(--borderRadiusMedium);
  background: var(--colorBrandBackground2);
  color: var(--colorNeutralForeground2);
}
.notice strong { color: var(--colorNeutralForeground1); }

/* ── FAQ, location, rates, and process ── */
.faq {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--spacingHorizontalXXL);
}
.faq h2 { margin-bottom: var(--spacingHorizontalXXL); }
.faq-item {
  padding: var(--spacingHorizontalXL) 0;
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke3);
}
.faq-item h2,
.faq-item h3 {
  margin-bottom: var(--spacingHorizontalS);
  padding-left: 0;
  border-left: none;
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase400);
}
.faq-item p { margin-bottom: 0; color: var(--colorNeutralForeground3); }
.address-block {
  margin: var(--spacingHorizontalXXL) 0;
  padding: var(--spacingHorizontalXL) var(--spacingHorizontalXXL);
  font-size: var(--fontSizeBase400);
  line-height: 2;
}
.address-block strong { color: var(--colorNeutralForeground1); }
table {
  width: 100%;
  margin: var(--spacingHorizontalXXL) 0;
  border-collapse: collapse;
  table-layout: fixed;
}
th,
td {
  padding: var(--spacingHorizontalM) var(--spacingHorizontalL);
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke3);
  text-align: left;
}
th {
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase300);
  font-weight: var(--fontWeightSemibold);
}
td { color: var(--colorNeutralForeground3); }
td:last-child {
  color: var(--colorNeutralForeground1);
  font-weight: var(--fontWeightSemibold);
  white-space: nowrap;
}
.process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--strokeWidthThin);
  margin: var(--spacingHorizontalXXL) 0;
  border: var(--strokeWidthThin) solid var(--colorNeutralStroke3);
  background: var(--colorNeutralStroke3);
}
.step {
  min-height: 180px;
  padding: var(--spacingHorizontalXL);
  background: var(--colorNeutralBackground3);
}
.step strong {
  display: block;
  margin-bottom: var(--spacingHorizontalS);
  color: var(--colorBrandForeground1);
  font-family: var(--fontFamilyMonospace);
  font-size: var(--fontSizeBase200);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.step h3 {
  margin-bottom: var(--spacingHorizontalS);
  color: var(--colorNeutralForeground1);
  font-size: var(--fontSizeBase400);
}
.step p { margin: 0; color: var(--colorNeutralForeground3); font-size: var(--fontSizeBase300); }
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacingHorizontalL);
  margin: var(--spacingHorizontalXXL) 0;
}

/* ── Footer ── */
footer {
  margin-top: var(--spacingHorizontalXXXL);
  padding: var(--spacingHorizontalXXL);
  border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke3);
  color: var(--colorNeutralForeground4);
  font-size: var(--fontSizeBase300);
  text-align: center;
}
footer a { color: var(--colorNeutralForeground4); }
footer a:hover { color: var(--colorNeutralForeground2); }
footer .footer-links { margin-top: var(--spacingHorizontalM); }

/* ── Responsive and motion preferences ── */
@media (max-width: 900px) {
  .process { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  nav {
    padding: var(--spacingHorizontalL);
    align-items: flex-start;
    flex-direction: column;
    gap: var(--spacingHorizontalS);
  }
  nav .links {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .hero { padding: 3.5rem var(--spacingHorizontalL) var(--spacingHorizontalXXL); }
  .hero h1 { font-size: var(--fontSizeHero700); }
  section { padding: var(--spacingHorizontalXL) var(--spacingHorizontalL); }
  .container { padding: var(--spacingHorizontalXXL) var(--spacingHorizontalL); }
  .container h1 { font-size: var(--fontSizeBase600); }
  .process { grid-template-columns: 1fr; }
  .step { min-height: auto; }
  th,
  td {
    padding: var(--spacingHorizontalS) var(--spacingHorizontalXS);
    font-size: var(--fontSizeBase300);
    overflow-wrap: anywhere;
  }
  td:last-child { white-space: normal; }
  .cta { width: 100%; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: var(--durationUltraFast) !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: var(--durationUltraFast) !important;
  }
  .rec-dot { animation: none; }
}