/*
 * Button endcaps and feedback adapted from ThreeUI Community RectangleButtons
 * (Understory Arrow Pill), revision 68802d5428071ada5c20db8094b1649e6bb770ed.
 * Copyright (c) 2026 Meng To. MIT: vendor/threeui-community-LICENSE.txt.
 * Kage's section navigation informs the native page dock below.
 */
.btn-primary { border-radius: 999px; }
.btn-flow {
  gap: 18px;
  min-height: 54px;
  padding: 10px 11px 10px 24px;
  transition: background 260ms ease, color 260ms ease, box-shadow 260ms ease, transform 260ms var(--ease);
}
.btn-flow .button-disc {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  color: #34234f;
  background: #f7f4ff;
  box-shadow: inset 0 0 0 1px #34234f0d;
}
.btn-flow .button-disc .ui-icon { width: 12px; height: 12px; transition: transform 260ms var(--ease); }
.btn-flow:hover .button-disc .ui-icon { transform: translateX(2px); }
.btn-flow:hover .button-disc .ui-icon-up-right { transform: translate(1.5px, -1.5px); }
.btn-flow:hover .button-disc .ui-icon-down { transform: translateY(2px); }
.btn-flow:active { transform: translateY(0); }
.btn-flow:focus-visible { outline: 2px solid #7251b5; outline-offset: 5px; box-shadow: 0 0 0 2px #fff; }
.home-page .btn-flow { padding: 10px 11px 10px 24px; }

/* The current ThreeUI Kage landing page and Sylva Living Green hero informed
   the chapter row, framed illustration and inset information cards. The
   security illustration, content, colors and layout implementation are local. */
.home-hero { padding-top: 130px; background: radial-gradient(ellipse at 75% 18%, #9b8cff1c, transparent 52%), #15151c; }
.home-hero-grid { grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4.2vw, 72px); align-items: center; }
.home-hero h1 { font-size: clamp(3.5rem, 7vw, 7.1rem); }
.home-lead { max-width: 440px; }
.security-map {
  align-self: center;
  border: 1px solid #524963;
  border-radius: 26px;
  padding: 20px 20px 10px;
  background: radial-gradient(ellipse at 70% 12%, #9b8cff16, transparent 60%), linear-gradient(145deg, #24212e, #1a1923 70%);
  box-shadow: 0 24px 80px #05050930, inset 0 1px 0 #ffffff0c;
}
.security-map-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #c7bfd7; font: .65rem / 1.5 ui-monospace, monospace; letter-spacing: .06em; }
.map-heading-mark { color: #c1b4ff; font-family: var(--font-sans); font-size: 1rem; font-weight: 700; }
.security-art { width: 100%; max-width: 460px; align-self: center; margin-block: -6px -12px; }
.security-summary { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.security-summary > div { padding: 15px; border: 1px solid #4a405a; border-radius: 14px; background: #292333; box-shadow: inset 0 1px #ffffff06; }
.security-summary span { display: block; margin-bottom: 9px; color: #c1b4ff; font: .6rem / 1.4 ui-monospace, monospace; letter-spacing: .05em; }
.security-summary strong { display: block; color: #f0ebf8; font-size: .82rem; line-height: 1.35; }
.security-summary p { margin: 7px 0 0; color: #b9b1ca; font-size: .7rem; line-height: 1.55; }
.security-caption { margin-top: 0; gap: 4px 12px; }
.hero-bottom { margin-top: 46px; gap: 24px; padding-block: 22px; }
.home-chapters { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.home-chapters a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: #c9c2d6; font-size: .74rem; text-decoration: none; }
.home-chapters a span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #61516f; border-radius: 50%; color: #b4a4cf; font: .6rem ui-monospace, monospace; transition: color 180ms, background 180ms, border-color 180ms; }
.home-chapters a:hover, .home-chapters a[aria-current="location"] { color: #f4f0fa; }
.home-chapters a:hover span, .home-chapters a[aria-current="location"] span { color: #271b3c; background: #c1b4ff; border-color: #c1b4ff; }
.page-hero, .article-hero, .report-hero, .sb-hero {
  background: radial-gradient(ellipse at 88% 12%, #9b8cff24, transparent 48%), linear-gradient(125deg, #15151c, #1b1825);
  border-bottom: 1px solid #40354f;
}
.page-hero { padding-block: calc(var(--header-height) + clamp(48px, 7vw, 96px)) clamp(52px, 6vw, 80px); }
.page-hero h1 { letter-spacing: -.05em; line-height: 1.08; }
.page-hero .button-row { margin-top: 28px; }
.article-hero { position: relative; }
.service-card, .coverage-card, .insight-card { border-radius: 18px; }
.service-card:focus-within, .coverage-card:focus-within, .insight-card:focus-within { border-color: #8f75bc; }

.page-flow {
  z-index: 45;
  background: #f5f3f0;
  border-block: 1px solid var(--line);
}
.js .page-flow { position: sticky; top: var(--header-height); }
.page-flow > .container { display: flex; align-items: center; gap: 32px; min-width: 0; }
.page-flow-label { flex: 0 0 auto; color: var(--muted); font-size: .72rem; }
.page-flow .section-jump {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: 0;
  padding: 10px 4px;
  scrollbar-width: thin;
}
.page-flow .section-jump a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}
.page-flow .section-jump a:hover { color: var(--ink); background: #e8e2f4; }
.page-flow .section-jump a[aria-current="location"] { color: #34234f; background: #e9e2fb; border-color: #c8b9e6; }
.has-page-flow.js { scroll-padding-top: calc(var(--header-height) + var(--flow-offset, 66px) + 24px); }
.has-article-flow { scroll-padding-top: calc(var(--header-height) + var(--flow-offset, 0px) + 24px); }
.has-article-flow .article-content h2 { scroll-margin-top: 0; }
.article-toc a { padding: 7px 10px; margin: 2px -10px; border-radius: 8px; transition: color 180ms ease, background 180ms ease; }
.article-toc a[aria-current="location"] { color: #34234f; background: #e9e2fb; }
.page-flow .section-jump a:focus-visible { outline-offset: -3px; }

#enquiry-form { scroll-margin-top: 24px; }
.table-scroll-hint { margin: 18px 0 10px; color: var(--muted); font-family: var(--font-sans); font-size: .78rem; line-height: 1.65; }
.table-scroll-hint[hidden] { display: none; }
.article-content .table-scroll-hint { font-family: var(--font-sans); font-size: .78rem; margin: 22px 0 10px; }
.table-scroll-hint:not([hidden]) + .scope-table-wrap { margin-top: 0; }
.scope-table-wrap.has-table-overflow { scrollbar-width: thin; scrollbar-color: #8b78ad #ece6f3; }
.scope-table-wrap:focus-visible { outline: 2px solid #7251b5; outline-offset: 4px; }

/* Controls and focused content must never wait for entrance effects. */
[data-reveal]:focus-within,
[data-motion-reveal]:focus-within,
[data-home-reveal]:focus-within,
.motion-focus-visible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}
:is(.page-hero, .report-hero, .sb-hero) [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.flow-still { scroll-behavior: auto; }
.flow-still .btn,
.flow-still .btn .ui-icon,
.flow-still .section-jump a { transition: none !important; transform: none !important; }

@media (max-width: 860px) {
  .page-flow-label { display: none; }
  .page-flow > .container { width: 100%; padding-inline: 12px; }
  .page-flow .section-jump a { padding-inline: 14px; font-size: .76rem; }
  .has-article-flow { --flow-offset: 78px; }
  .article-toc {
    position: sticky;
    top: calc(var(--header-height) + 8px);
    z-index: 40;
    display: flex;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    padding: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #f5f3f0;
    scrollbar-width: thin;
  }
  .article-toc strong { display: none; }
  .article-toc a { display: flex; flex: 0 0 auto; align-items: center; max-width: 250px; min-height: 44px; margin: 0; padding: 9px 14px; font-size: .75rem; }
  .home-hero { padding-top: 108px; }
  .home-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .home-hero h1 { font-size: clamp(3.4rem, 13.8vw, 5.8rem); }
  .home-lead { max-width: 580px; }
  .security-map { width: min(100%, 520px); max-width: 520px; padding: 16px 16px 8px; margin: 0; }
  .security-art { margin-block: -6px -10px; }
  .security-summary > div { padding: 12px; }
  .security-summary strong { font-size: .77rem; }
  .hero-bottom { align-items: flex-start; flex-direction: column; margin-top: 30px; gap: 18px; }
  .hero-bottom p { max-width: none; font-size: .7rem; }
  .home-chapters { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 4px 20px; }
  .home-chapters a { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce), (update: slow) {
  html { scroll-behavior: auto !important; }
  [data-reveal], [data-motion-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .btn, .btn .ui-icon, .section-jump a { transition: none !important; transform: none !important; }
}
@media print {
  .page-flow, .table-scroll-hint { display: none !important; }
  .home-chapters { display: none; }
  .page-hero, .article-hero, .report-hero, .sb-hero { background: #fff; color: #111; }
}