/*
 * GrapeKings site styles.
 *
 * TWO RULES GOVERN THIS FILE.
 *
 * 1. Every colour, size, space, radius, shadow and duration comes from a `--gk-*` token
 *    emitted by `src/lib/design-tokens.ts`. There is no `:root` block here on purpose: a
 *    second variable definition in this file would be a second source of truth, and the
 *    brand would then live in two places — which is exactly how a rebrand misses a hover
 *    state. To change the palette, edit the token module and nothing else.
 *
 * 2. The site works without JavaScript. Every page is static HTML and every control is a
 *    real form or a real link. Nothing here depends on a script to be usable.
 *
 * Hand-written and small on purpose. A content site does not need a framework: shipping
 * one adds tens of kilobytes and a build step to save a page of rules.
 */

/* ---- Base ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@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;
  }
}

body {
  margin: 0;
  font-family: var(--gk-font-sans);
  font-size: var(--gk-font-size-base);
  line-height: var(--gk-font-leading-normal);
  color: var(--gk-color-text-default);
  background: var(--gk-color-surface-page);
  -webkit-font-smoothing: antialiased;
}

/* A visible focus ring is a requirement, not a style preference. It is never removed;
   only the colour and offset are themed. */
:focus-visible {
  outline: 2px solid var(--gk-color-border-focus);
  outline-offset: 2px;
  border-radius: var(--gk-radius-sm);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

.wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--gk-space-lg);
}

.small {
  font-size: var(--gk-font-size-sm);
}

.muted {
  color: var(--gk-color-text-muted);
}

/* Links inside prose are distinguishable without colour alone, which matters for
   colour-blind readers and for printing. */
.page-body a,
.evidence a,
.faq a,
.site-footer a {
  color: var(--gk-color-text-link);
  text-underline-offset: 0.15em;
}

.page-body a:hover,
.evidence a:hover,
.faq a:hover,
.site-footer a:hover {
  color: var(--gk-color-text-link-hover);
}

/* ---- Skip link ---------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gk-color-brand-primary);
  color: var(--gk-color-brand-primary-contrast-text);
  padding: var(--gk-space-sm) var(--gk-space-md);
  z-index: 100;
  border-radius: 0 0 var(--gk-radius-md) 0;
}

.skip-link:focus {
  left: 0;
}

/* ---- Header ------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--gk-color-border-default);
  background: var(--gk-color-surface-raised);
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gk-space-md) var(--gk-space-xl);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--gk-space-md);
  padding-bottom: var(--gk-space-md);
}

.brand-logo {
  display: block;
  width: 208px;
  height: auto;
  /* The lockup already contains the wordmark, so no separate brand-name element is rendered. */
}

.header-cta {
  margin-left: var(--gk-space-lg);
  white-space: nowrap;
}

@media (max-width: 860px) {
  /* The logo is the only thing worth keeping in the bar on a phone; the CTA moves into the
     navigation drawer rather than squeezing the mark. */
  .header-cta { display: none; }
  .brand-logo { width: 156px; }
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--gk-space-xs);
  font-weight: var(--gk-font-weight-semibold);
  letter-spacing: var(--gk-font-tracking-tight);
  font-size: var(--gk-font-size-lg);
  color: var(--gk-color-text-default);
  text-decoration: none;
}

.brand-mark {
  color: var(--gk-color-brand-accent);
  font-size: var(--gk-font-size-lg);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gk-space-xxs) var(--gk-space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--gk-color-text-muted);
  text-decoration: none;
  padding: var(--gk-space-xs) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--gk-motion-fast) var(--gk-motion-easing);
}

.site-nav a:hover {
  color: var(--gk-color-text-default);
}

.site-nav a[aria-current='page'] {
  color: var(--gk-color-text-default);
  border-bottom-color: var(--gk-color-brand-accent);
}

/* ---- Breadcrumbs -------------------------------------------------------- */

.breadcrumbs {
  padding-top: var(--gk-space-md);
  font-size: var(--gk-font-size-sm);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gk-space-xxs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumbs li + li::before {
  content: '/';
  margin-right: var(--gk-space-xxs);
  color: var(--gk-color-text-muted);
}

.breadcrumbs a {
  color: var(--gk-color-text-link);
}

/* ---- Hero --------------------------------------------------------------- */

.hero {
  padding-top: var(--gk-space-xxl);
  padding-bottom: var(--gk-space-xl);
  max-width: var(--gk-space-measure);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--gk-font-tracking-wide);
  font-size: var(--gk-font-size-xs);
  font-weight: var(--gk-font-weight-semibold);
  color: var(--gk-color-brand-primary-text);
  margin: 0 0 var(--gk-space-sm);
}

h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, var(--gk-font-size-xxxxl));
  line-height: var(--gk-font-leading-tight);
  letter-spacing: var(--gk-font-tracking-tight);
  margin: 0 0 var(--gk-space-md);
  text-wrap: balance;
}

h2 {
  text-wrap: balance;
}

.lede {
  font-size: var(--gk-font-size-lg);
  line-height: var(--gk-font-leading-relaxed);
  color: var(--gk-color-text-muted);
  margin: 0 0 var(--gk-space-lg);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gk-space-sm);
  margin: 0;
}

/* ---- Buttons ------------------------------------------------------------ */

.button {
  display: inline-block;
  padding: var(--gk-space-sm) var(--gk-space-lg);
  border-radius: var(--gk-radius-md);
  border: 1px solid var(--gk-color-brand-primary);
  background: var(--gk-color-brand-primary);
  color: var(--gk-color-brand-primary-contrast-text);
  text-decoration: none;
  font-weight: var(--gk-font-weight-semibold);
  font-size: var(--gk-font-size-base);
  cursor: pointer;
  transition:
    background var(--gk-motion-fast) var(--gk-motion-easing),
    border-color var(--gk-motion-fast) var(--gk-motion-easing);
}

.button:hover {
  background: var(--gk-color-brand-primary-hover);
  border-color: var(--gk-color-brand-primary-hover);
  color: var(--gk-color-brand-primary-contrast-text);
}

.button:active {
  background: var(--gk-color-brand-primary-active);
  border-color: var(--gk-color-brand-primary-active);
}

.button-secondary {
  background: transparent;
  color: var(--gk-color-brand-primary-text);
  border-color: var(--gk-color-border-control);
}

.button-secondary:hover {
  background: var(--gk-color-brand-primary-soft);
  color: var(--gk-color-brand-primary-text);
  border-color: var(--gk-color-brand-primary-text);
}

.button-quiet {
  background: transparent;
  border-color: var(--gk-color-border-default);
  color: var(--gk-color-text-muted);
}

.button-quiet:hover {
  background: var(--gk-color-surface-sunken);
  color: var(--gk-color-text-default);
}

/* ---- Body content ------------------------------------------------------- */

.page-body {
  max-width: var(--gk-space-measure);
  padding-bottom: var(--gk-space-lg);
}

.section {
  padding: var(--gk-space-lg) 0;
  border-top: 1px solid var(--gk-color-border-default);
}

.section h2 {
  font-size: var(--gk-font-size-xxl);
  letter-spacing: var(--gk-font-tracking-tight);
  margin: 0 0 var(--gk-space-sm);
}

.section h3 {
  font-size: var(--gk-font-size-lg);
  margin: var(--gk-space-lg) 0 var(--gk-space-xs);
}

.section ul {
  padding-left: var(--gk-space-lg);
}

.section li {
  margin-bottom: var(--gk-space-xs);
}

/* ---- Evidence ----------------------------------------------------------- */

.evidence {
  margin-top: var(--gk-space-lg);
  padding: var(--gk-space-md) var(--gk-space-lg);
  background: var(--gk-color-brand-accent-soft);
  border-left: 3px solid var(--gk-color-brand-accent);
  border-radius: 0 var(--gk-radius-md) var(--gk-radius-md) 0;
}

.evidence-heading {
  font-size: var(--gk-font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--gk-font-tracking-wide);
  font-weight: var(--gk-font-weight-semibold);
  margin: 0 0 var(--gk-space-sm);
  color: var(--gk-color-brand-accent-strong);
}

.evidence ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.evidence li + li {
  margin-top: var(--gk-space-sm);
}

.evidence-claim {
  margin: 0 0 var(--gk-space-xxs);
}

.evidence-verification {
  display: inline-block;
  padding: 0.05rem var(--gk-space-xs);
  border: 1px solid var(--gk-color-border-control);
  border-radius: var(--gk-radius-sm);
  background: var(--gk-color-surface-raised);
  font-size: var(--gk-font-size-xs);
}

.evidence-index {
  max-width: var(--gk-space-measure);
  padding: var(--gk-space-lg) 0;
  border-top: 1px solid var(--gk-color-border-default);
}

.evidence-list {
  padding-left: var(--gk-space-lg);
}

.evidence-list li {
  margin-bottom: var(--gk-space-sm);
}

/* ---- FAQ ---------------------------------------------------------------- */

.faq {
  max-width: var(--gk-space-measure);
  padding: var(--gk-space-lg) 0;
  border-top: 1px solid var(--gk-color-border-default);
}

.faq dt {
  font-weight: var(--gk-font-weight-semibold);
  margin-top: var(--gk-space-md);
}

.faq dd {
  margin: var(--gk-space-xxs) 0 0;
  color: var(--gk-color-text-muted);
}

/* ---- Related ------------------------------------------------------------ */

.related {
  max-width: var(--gk-space-measure);
  padding: var(--gk-space-lg) 0 var(--gk-space-xxl);
  border-top: 1px solid var(--gk-color-border-default);
}

.related ul {
  list-style: none;
  padding: 0;
  margin: var(--gk-space-sm) 0 0;
}

.related li {
  margin-bottom: var(--gk-space-xs);
}

/* ---- Tool surfaces and forms -------------------------------------------- */

.tool-surface {
  max-width: var(--gk-space-measure);
  padding: var(--gk-space-lg) 0;
  border-top: 1px solid var(--gk-color-border-default);
}

.form {
  display: grid;
  gap: var(--gk-space-sm);
  margin-top: var(--gk-space-md);
  max-width: 34rem;
}

.form label {
  font-weight: var(--gk-font-weight-semibold);
}

.form .hint {
  color: var(--gk-color-text-muted);
  font-size: var(--gk-font-size-sm);
  margin: 0;
}

.form input[type='text'],
.form input[type='email'],
.form input[type='url'],
.form input[type='tel'],
.form select,
.form textarea {
  width: 100%;
  padding: var(--gk-space-sm) var(--gk-space-sm);
  border: 1px solid var(--gk-color-border-control);
  border-radius: var(--gk-radius-md);
  font: inherit;
  color: var(--gk-color-text-default);
  background: var(--gk-color-surface-raised);
}

.form textarea {
  min-height: 9rem;
  resize: vertical;
}

.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 2px solid var(--gk-color-border-focus);
  outline-offset: 1px;
}

/* Invalid state uses the danger colour AND text, never colour alone. */
.form [aria-invalid='true'] {
  border-color: var(--gk-color-state-danger);
}

.form .error {
  color: var(--gk-color-state-danger);
  font-size: var(--gk-font-size-sm);
  margin: 0;
}

.form button {
  justify-self: start;
}

.checkbox {
  display: flex;
  gap: var(--gk-space-xs);
  align-items: flex-start;
  font-weight: var(--gk-font-weight-normal);
}

.checkbox input {
  margin-top: 0.35rem;
  flex: 0 0 auto;
}

/* Status regions announced to assistive technology. */
.form-status {
  border-radius: var(--gk-radius-md);
  padding: var(--gk-space-sm) var(--gk-space-md);
  border: 1px solid var(--gk-color-border-default);
  background: var(--gk-color-surface-sunken);
}

.form-status[data-state='success'] {
  border-color: var(--gk-color-state-success);
  background: var(--gk-color-state-success-soft);
  color: var(--gk-color-state-success);
}

.form-status[data-state='error'] {
  border-color: var(--gk-color-state-danger);
  background: var(--gk-color-state-danger-soft);
  color: var(--gk-color-state-danger);
}

/* ---- Cards and grids ---------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--gk-space-md);
  grid-template-columns: 1fr;
  padding: 0;
  margin: var(--gk-space-lg) 0 0;
  list-style: none;
}

@media (min-width: 46rem) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 70rem) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-xs);
  padding: var(--gk-space-lg);
  border: 1px solid var(--gk-color-border-default);
  border-radius: var(--gk-radius-lg);
  background: var(--gk-color-surface-raised);
  box-shadow: var(--gk-shadow-sm);
  transition:
    box-shadow var(--gk-motion-base) var(--gk-motion-easing),
    border-color var(--gk-motion-base) var(--gk-motion-easing);
}

.card:hover {
  box-shadow: var(--gk-shadow-md);
  border-color: var(--gk-color-border-control);
}

.card h3 {
  margin: 0;
  font-size: var(--gk-font-size-lg);
}

.card p {
  margin: 0;
  color: var(--gk-color-text-muted);
}

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

.card a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.card {
  position: relative;
}

/* ---- Diagnostics (development only) ------------------------------------- */

.build-diagnostics {
  max-width: var(--gk-space-measure);
  margin: var(--gk-space-lg) auto;
  padding: var(--gk-space-md) var(--gk-space-lg);
  border: 1px dashed var(--gk-color-state-warning);
  background: var(--gk-color-state-warning-soft);
  color: var(--gk-color-text-default);
  border-radius: var(--gk-radius-md);
}

.build-diagnostics h2 {
  font-size: var(--gk-font-size-base);
  margin: 0 0 var(--gk-space-xs);
}

.fixture-banner {
  max-width: var(--gk-space-measure);
  margin: var(--gk-space-md) auto;
  padding: var(--gk-space-sm) var(--gk-space-md);
  background: var(--gk-color-state-danger-soft);
  border: 1px solid var(--gk-color-state-danger);
  border-radius: var(--gk-radius-md);
}

/* ---- Footer ------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--gk-color-border-default);
  background: var(--gk-color-surface-sunken);
  padding: var(--gk-space-xxl) 0;
  margin-top: var(--gk-space-xxl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gk-space-lg);
}

@media (min-width: 46rem) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

.footer-brand {
  font-weight: var(--gk-font-weight-semibold);
  margin: 0 0 var(--gk-space-xxs);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li {
  margin-bottom: var(--gk-space-xxs);
}

.site-footer a {
  color: var(--gk-color-text-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--gk-color-text-default);
  text-decoration: underline;
}

/* ---- Print -------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .hero-actions {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
  }
}

/* ---- Enquiry form ------------------------------------------------------- */

/*
 * The enquiry form is the conversion point of the whole site, so it gets its own block
 * rather than inheriting spacing from `.form`. A form that is visually cramped is a form
 * that does not get filled in.
 */
.enquiry {
  max-width: var(--gk-space-measure);
  padding: var(--gk-space-xxl) 0 var(--gk-space-xl);
  border-top: 1px solid var(--gk-color-border-default);
  margin-top: var(--gk-space-xxl);
}

.enquiry h2 {
  margin: 0 0 var(--gk-space-xs);
  font-size: var(--gk-font-size-xxl);
  letter-spacing: var(--gk-font-tracking-tight);
}

.form-row {
  display: grid;
  gap: var(--gk-space-xxs);
}

.form-row + .form-row {
  margin-top: var(--gk-space-sm);
}

/* Two short fields can share a line on a wide screen without becoming cramped. */
@media (min-width: 46rem) {
  .form-row--half {
    grid-template-columns: 1fr 1fr;
    gap: var(--gk-space-md);
  }
}

.enquiry .button {
  margin-top: var(--gk-space-sm);
}

/* Disabled state must be visible, not merely inert. */
.enquiry .button[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* ---- Landing pages ------------------------------------------------------ */

/*
 * Advertising pages reuse the site's tokens so they read as the same brand, but they are a
 * different template: no breadcrumbs, no evidence block, no related links. A visitor arriving
 * from an advert should see one offer, not a navigation system.
 */
.lp {
  padding-top: var(--gk-space-xxl);
  padding-bottom: var(--gk-space-xxl);
  max-width: var(--gk-space-measure);
}

.lp h1 {
  margin: 0 0 var(--gk-space-sm);
}

.lp-offer {
  margin: var(--gk-space-md) 0;
  padding: var(--gk-space-md) var(--gk-space-lg);
  border-left: 3px solid var(--gk-color-brand-accent);
  background: var(--gk-color-brand-accent-soft);
  border-radius: 0 var(--gk-radius-md) var(--gk-radius-md) 0;
}

.lp-bullets {
  margin: var(--gk-space-md) 0 var(--gk-space-lg);
  padding-left: var(--gk-space-lg);
}

.lp-bullets li {
  margin-bottom: var(--gk-space-xs);
}

.lp-form {
  margin-top: var(--gk-space-lg);
  padding-top: var(--gk-space-lg);
  border-top: 1px solid var(--gk-color-border-default);
}

.lp-unavailable {
  max-width: var(--gk-space-measure);
}

/* Static landing-page context: rendered without JavaScript so the page is useful before the
   variant arrives, and honest about what happens next. */
.lp-static {
  margin-top: var(--gk-space-xl);
  padding-top: var(--gk-space-lg);
  border-top: 1px solid var(--gk-color-border-default);
}

.lp-steps {
  margin: var(--gk-space-sm) 0 var(--gk-space-md);
  padding-left: var(--gk-space-lg);
}

.lp-steps li {
  margin-bottom: var(--gk-space-sm);
  max-width: var(--gk-space-measure);
}


/* ---------------------------------------------------------------------------
   Brand application
   The palette, type scale and radii come from packages/ui (single source). Nothing
   below restates a colour; every value resolves from a token.
   --------------------------------------------------------------------------- */

.hero {
  background:
    radial-gradient(120% 90% at 100% 0%, var(--gk-color-brand-accent-soft) 0%, transparent 55%),
    radial-gradient(100% 80% at 0% 10%, var(--gk-color-brand-primary-soft) 0%, transparent 60%),
    var(--gk-color-surface-page);
}

.eyebrow {
  display: inline-block;
  padding: var(--gk-space-xxs) var(--gk-space-sm);
  border: 1px solid var(--gk-color-brand-primary-soft);
  border-radius: var(--gk-radius-pill);
  background: var(--gk-color-surface-raised);
  color: var(--gk-color-brand-primary-text);
  font-size: var(--gk-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.button {
  border-radius: var(--gk-radius-md);
  font-weight: 600;
}

.button-secondary {
  background: var(--gk-color-surface-raised);
  color: var(--gk-color-brand-primary-text);
  border: 1px solid var(--gk-color-brand-primary);
}

.button-accent {
  background: var(--gk-color-brand-accent);
  /* Gold cannot carry white text; the dark brand ink is the only readable pairing. */
  color: var(--gk-color-text-default);
  border: 1px solid transparent;
}

.card {
  border: 1px solid var(--gk-color-border-default);
  border-radius: var(--gk-radius-lg);
  background: var(--gk-color-surface-raised);
  transition: border-color 120ms ease, transform 120ms ease;
}

.card:hover {
  border-color: var(--gk-color-brand-primary);
  transform: translateY(-2px);
}

/* ===========================================================================
   Homepage — hero, feature row, service cards
   Matches the supplied brand sheet: white surfaces, purple primary, gold accent,
   generous spacing, rounded cards on a light lavender page.
   =========================================================================== */

.hero-section {
  background:
    radial-gradient(70% 55% at 92% 8%, var(--gk-color-brand-accent-soft) 0%, transparent 60%),
    radial-gradient(60% 50% at 8% 0%, var(--gk-color-brand-primary-soft) 0%, transparent 65%),
    var(--gk-color-surface-page);
  border-bottom: 1px solid var(--gk-color-border-default);
  padding: var(--gk-space-section) 0 var(--gk-space-xxl);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--gk-space-xxxl);
  align-items: center;
}

.hero-copy h1 {
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: var(--gk-space-md) 0 var(--gk-space-md);
}

.accent-text {
  /* Gold cannot carry text on white, so the accent runs on the purple partner at full strength. */
  color: var(--gk-color-brand-primary);
}

.hero-lede {
  font-size: var(--gk-font-size-lg);
  line-height: 1.6;
  color: var(--gk-color-text-muted);
  max-width: 46ch;
  margin-bottom: var(--gk-space-lg);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gk-space-xs);
  padding: var(--gk-space-xxs) var(--gk-space-sm);
  border: 1px solid var(--gk-color-brand-primary-soft);
  border-radius: var(--gk-radius-pill);
  background: var(--gk-color-surface-raised);
  color: var(--gk-color-brand-primary-text);
  font-size: var(--gk-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- hero panel ---------------------------------------------------------- */

.hero-panel {
  background: var(--gk-color-surface-raised);
  border: 1px solid var(--gk-color-border-default);
  border-radius: var(--gk-radius-lg);
  box-shadow: 0 18px 50px rgba(15, 10, 31, 0.10);
  overflow: hidden;
}

.panel-bar {
  display: flex;
  align-items: center;
  gap: var(--gk-space-xxs);
  padding: var(--gk-space-sm) var(--gk-space-md);
  background: var(--gk-color-surface-sunken);
  border-bottom: 1px solid var(--gk-color-border-default);
}

.panel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--gk-radius-full);
  background: var(--gk-color-border-strong);
}

.panel-title {
  margin-left: var(--gk-space-sm);
  font-size: var(--gk-font-size-xs);
  color: var(--gk-color-text-muted);
}

.panel-body { padding: var(--gk-space-lg); }

.panel-kicker {
  font-size: var(--gk-font-size-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gk-color-brand-primary-text);
  margin-bottom: var(--gk-space-xs);
}

.panel-heading {
  font-size: var(--gk-font-size-xl);
  line-height: 1.25;
  margin-bottom: var(--gk-space-md);
}

.panel-list { list-style: none; margin: 0 0 var(--gk-space-md); padding: 0; }

.panel-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--gk-space-md);
  padding: var(--gk-space-xs) 0;
  border-bottom: 1px solid var(--gk-color-border-default);
  font-size: var(--gk-font-size-sm);
}

.panel-list li:last-child { border-bottom: 0; }
.panel-list strong { font-variant-numeric: tabular-nums; }

.panel-note {
  font-size: var(--gk-font-size-xs);
  color: var(--gk-color-text-muted);
  margin-bottom: var(--gk-space-sm);
}

.panel-link { font-weight: 600; color: var(--gk-color-brand-primary-text); }

/* --- feature row --------------------------------------------------------- */

.feature-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gk-space-lg);
  margin-top: var(--gk-space-xxl);
  padding-top: var(--gk-space-lg);
  border-top: 1px solid var(--gk-color-border-default);
}

.feature { display: flex; align-items: center; gap: var(--gk-space-sm); }

.feature-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--gk-radius-md);
  background: var(--gk-color-brand-primary-soft);
  color: var(--gk-color-brand-primary-text);
  font-size: var(--gk-font-size-xs);
  font-weight: 700;
}

.feature div { display: flex; flex-direction: column; }
.feature strong { font-size: var(--gk-font-size-sm); }
.feature span:last-child { font-size: var(--gk-font-size-xs); color: var(--gk-color-text-muted); }

/* --- service cards ------------------------------------------------------- */

.service-section { padding: var(--gk-space-section) 0; }

.section-title {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  margin-bottom: var(--gk-space-lg);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gk-space-lg);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-xs);
  padding: var(--gk-space-lg);
  border: 1px solid var(--gk-color-border-default);
  border-radius: var(--gk-radius-lg);
  background: var(--gk-color-surface-raised);
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.service-card:hover {
  border-color: var(--gk-color-brand-primary);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15, 10, 31, 0.08);
}

.service-card h3 { font-size: var(--gk-font-size-lg); margin: 0; }
.service-card p { margin: 0; color: var(--gk-color-text-muted); font-size: var(--gk-font-size-sm); }
.service-more { margin-top: auto; padding-top: var(--gk-space-sm); font-weight: 600; font-size: var(--gk-font-size-sm); color: var(--gk-color-brand-primary-text); }
.section-foot { margin-top: var(--gk-space-lg); }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--gk-space-xl); }
  .feature-row { grid-template-columns: 1fr; }
  .hero-section { padding-top: var(--gk-space-xxl); }
}