/**
 * Component CSS — generated from component records.
 * Do not edit. Write CSS on the component via upsert-component / patch-component.
 */

/* delta-component:article */
.article { max-width: var(--layout-content); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-lg); font-size: var(--text-lg-size); line-height: var(--text-lg-leading); letter-spacing: var(--text-lg-tracking); }
.article h2 { font-size: var(--title-md-size); line-height: var(--title-md-leading); letter-spacing: var(--title-md-tracking); margin-top: var(--space-lg); }
.article blockquote { margin-block: var(--space-lg); padding-left: var(--space-lg); border-left: var(--border-width) solid var(--color-action); font-family: var(--font-title); font-style: italic; font-size: var(--title-sm-size); line-height: var(--title-sm-leading); letter-spacing: var(--title-sm-tracking); }
.article__hero { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); width: 100%; max-width: var(--layout-wide); margin-inline: auto; }
@supports (animation-timeline: view()) {
  .article__hero--grow { max-width: var(--layout-max); transform: scale(0.72); transform-origin: 50% 0; animation: hero-grow linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  @keyframes hero-grow { to { transform: scale(1); } }
}
.article__byline { display: flex; align-items: center; gap: var(--space-md); padding-top: var(--space-lg); border-top: var(--border-width) solid var(--color-border); color: var(--color-ink-muted); font-size: var(--text-sm-size); line-height: var(--text-sm-leading); }
.article__byline strong { color: var(--color-ink); font-weight: var(--weight-medium); }
.avatar { width: calc(var(--space-xl) + var(--space-xs)); height: calc(var(--space-xl) + var(--space-xs)); border-radius: var(--radius-full); overflow: hidden; flex: none; }

/* delta-component:bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(calc(var(--space-4xl) + var(--space-2xl)), auto); grid-auto-flow: dense; gap: var(--space-md); }
.tile { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-surface-subtle); border: var(--border-width) solid var(--color-border); min-height: 0; }
.tile--action { background: var(--color-action); border-color: transparent; color: var(--color-on-action); }
.tile--action .muted, .tile--action .eyebrow, .tile--action h2, .tile--action h3, .tile--action .tile__meta, .tile--action .service__text, .tile--action .service__link, .tile--action .service__icon { color: var(--color-on-action); }
.tile--action .service__icon { border-color: color-mix(in oklch, var(--color-on-action) 35%, transparent); }
.tile--photo { padding: 0; overflow: hidden; border: 0; }
.tile--photo > .photo { position: absolute; inset: 0; }
.tile--row { flex-direction: row; align-items: center; gap: var(--space-lg); }
.tile--center { justify-content: center; }
.tile__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.tile__meta { font-size: var(--text-xs-size); line-height: var(--text-xs-leading); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-muted); }
.tile__stat { font-family: var(--font-title); font-size: var(--title-xl-size); line-height: var(--title-xl-leading); letter-spacing: var(--title-xl-tracking); color: var(--color-ink); }

/* delta-component:button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-family: var(--font-text);
  font-size: var(--text-sm-size);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  border: var(--border-width) solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--color-action);
  color: var(--color-on-action);
}

.btn--primary:hover {
  background: var(--color-action-hover);
  /* color is restated deliberately. site.css has a:hover { color } at (0,1,1),
     which outranks .btn--primary at (0,1,0) — without this the label takes the
     hover action colour on a hover-action-coloured background and disappears. */
  color: var(--color-on-action);
}

.btn--ghost {
  background: var(--color-surface-subtle);
  color: var(--color-ink);
  border-color: var(--color-border);
}

.btn--ghost:hover {
  border-color: var(--color-ink-muted);
  color: var(--color-ink);
}

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

.btn--secondary:hover {
  border-color: var(--color-ink-muted);
  color: var(--color-ink);
}

/* delta-component:card */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-lg); border: var(--border-width) solid var(--color-border); background: var(--color-surface-subtle); }
.card__icon { display: grid; place-items: center; color: var(--color-action); }
.card__icon .icon { width: var(--space-2xl); height: var(--space-2xl); }
.card__icon svg { stroke-width: 1.25; }
.card__title { font-family: var(--font-title); font-size: var(--title-xs-size); line-height: var(--title-xs-leading); letter-spacing: var(--title-xs-tracking); }
.card__text { color: var(--color-ink-muted); font-size: var(--text-sm-size); line-height: var(--text-sm-leading); letter-spacing: var(--text-sm-tracking); }

/* delta-component:cta */
.cta { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2xl); }

/* delta-component:facts */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.fact { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-md); border-top: var(--border-width) solid var(--color-border); }
.fact__num { font-family: var(--font-title); font-size: var(--title-xl-size); line-height: var(--title-xl-leading); letter-spacing: var(--title-xl-tracking); color: var(--color-ink); }

/* delta-component:faq */
.faq { display: flex; flex-direction: column; border-top: var(--border-width) solid var(--color-border); max-width: var(--layout-wide); }
.faq__item { border-bottom: var(--border-width) solid var(--color-border); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg) 0; cursor: pointer; font-family: var(--font-title); font-size: var(--title-xs-size); line-height: var(--title-xs-leading); letter-spacing: var(--title-xs-tracking); color: var(--color-ink); list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q .icon { color: var(--color-action); transition: transform 0.25s; }
.faq__item[open] .faq__q .icon { transform: rotate(45deg); }
.faq__a { color: var(--color-ink-muted); padding-bottom: var(--space-lg); max-width: var(--layout-content); }

/* delta-component:form */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); max-width: var(--layout-wide); }
.field { display: flex; flex-direction: column; gap: var(--space-xs); }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: var(--text-sm-size); line-height: var(--text-sm-leading); font-weight: var(--weight-medium); color: var(--color-ink); }
.field__input { width: 100%; font-family: var(--font-text); font-size: var(--text-md-size); line-height: var(--text-md-leading); letter-spacing: var(--text-md-tracking); color: var(--color-ink); background: var(--color-surface-body); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }
.field__input::placeholder { color: var(--color-ink-muted); }
textarea.field__input { resize: vertical; min-height: calc(var(--space-4xl) + var(--space-lg)); }
.field__hint { font-size: var(--text-xs-size); line-height: var(--text-xs-leading); color: var(--color-ink-muted); }
.form__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.form__note { font-size: var(--text-sm-size); line-height: var(--text-sm-leading); color: var(--color-ink-muted); }
@media (max-width: 40rem) { .form { grid-template-columns: minmax(0, 1fr); } }

/* delta-component:gallery */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: calc(var(--space-4xl) * 2 - var(--space-md)); gap: var(--space-md); }
.gallery .photo { border-radius: var(--radius-lg); }

/* delta-component:icon */
.icon { display: inline-flex; width: calc(var(--space-md) + var(--space-2xs)); height: calc(var(--space-md) + var(--space-2xs)); flex: none; color: currentColor; }
.icon svg { width: 100%; height: 100%; display: block; stroke-width: 1.5; }
.icon--lg { width: var(--space-lg); height: var(--space-lg); }

/* delta-component:kali-nav */
.kali-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding-inline: var(--layout-section-inline); }
.kali-nav__inner { max-width: var(--layout-max); margin-inline: auto; display: flex; align-items: center; gap: var(--space-xl); height: calc(var(--space-2xl) + var(--space-lg)); }
.kali-nav__brand { font-family: var(--font-title); font-size: var(--title-xs-size); line-height: var(--title-xs-leading); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-on-contrast); }
.kali-nav__brand:hover { color: var(--color-ink-on-contrast); }
.kali-nav__links { display: flex; gap: var(--space-lg); margin-left: auto; }
.kali-nav__link { color: var(--color-ink-on-contrast); font-size: var(--text-sm-size); line-height: var(--text-sm-leading); font-weight: var(--weight-medium); }
.kali-nav__link:hover { color: var(--color-ink-muted-on-contrast); }

/* delta-component:photo */
.photo { position: relative; overflow: hidden; background: var(--color-surface-subtle); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* delta-component:post */
.posts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); }
.post { display: flex; flex-direction: column; gap: var(--space-md); color: var(--color-ink); }
.post:hover { color: var(--color-ink); }
.post:hover .post__title { color: var(--color-action); }
.inverted .post:hover .post__title { color: var(--color-ink-muted); }
.post__photo { aspect-ratio: 3 / 2; border-radius: var(--radius-lg); }
.post__meta { display: flex; gap: var(--space-sm); font-size: var(--text-xs-size); line-height: var(--text-xs-leading); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-muted); }
.post__meta a:not([class]) { color: var(--color-action); }
.post__title { font-family: var(--font-title); font-size: var(--title-sm-size); line-height: var(--title-sm-leading); letter-spacing: var(--title-sm-tracking); font-weight: var(--weight-regular); transition: color 0.2s; }
.post__excerpt { color: var(--color-ink-muted); }

/* delta-component:quote */
.quote { display: flex; flex-direction: column; gap: var(--space-lg); max-width: var(--layout-wide); }
.quote__text { font-family: var(--font-title); font-size: var(--title-lg-size); line-height: var(--title-lg-leading); letter-spacing: var(--title-lg-tracking); font-style: italic; }
.quote__by { color: var(--color-ink-muted); font-size: var(--text-sm-size); line-height: var(--text-sm-leading); }

/* delta-component:quotes */
.quotes { overflow: hidden; border-block: var(--border-width) solid var(--color-border); padding-block: var(--space-xl); }
.quotes__track { display: flex; gap: var(--space-3xl); width: max-content; animation: quotes-scroll 60s linear infinite; }
.quotes:hover .quotes__track { animation-play-state: paused; }
.quotes__item { display: flex; flex-direction: column; gap: var(--space-xs); width: calc(var(--layout-wide) / 2); flex: none; }
.quotes__text { font-family: var(--font-title); font-size: var(--title-xs-size); line-height: var(--title-xs-leading); letter-spacing: var(--title-xs-tracking); font-style: italic; }
.quotes__by { font-size: var(--text-xs-size); line-height: var(--text-xs-leading); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-muted); }
@keyframes quotes-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .quotes__track { animation: none; } }

/* delta-component:sched */
.sched { display: flex; flex-direction: column; border-top: var(--border-width) solid var(--color-border); }
.sched__row { display: grid; grid-template-columns: calc(var(--space-4xl) + var(--space-xl)) minmax(0, 1fr) calc(var(--space-4xl) + var(--space-3xl)) calc(var(--space-4xl) + var(--space-xl)) auto; gap: var(--space-lg); align-items: center; padding: var(--space-lg) 0; border-bottom: var(--border-width) solid var(--color-border); }
.sched__time { font-family: var(--font-title); font-size: var(--title-xs-size); line-height: var(--title-xs-leading); letter-spacing: var(--title-xs-tracking); }
.sched__name { font-family: var(--font-title); font-size: var(--title-sm-size); line-height: var(--title-sm-leading); letter-spacing: var(--title-sm-tracking); }
.sched__day { display: flex; align-items: baseline; gap: var(--space-md); padding-top: var(--space-2xl); }
.sched__day:first-child { padding-top: 0; }
.sched__list { gap: var(--space-xl); }

/* delta-component:service */
.service { display: flex; flex-direction: column; gap: var(--space-md); }
.service--tight { gap: var(--space-2xs); }
.service__icon { display: grid; place-items: center; width: calc(var(--space-xl) + var(--space-sm)); height: calc(var(--space-xl) + var(--space-sm)); border-radius: var(--radius-full); border: var(--border-width) solid var(--color-border); color: var(--color-action); }
.service__text { color: var(--color-ink-muted); font-size: var(--text-sm-size); line-height: var(--text-sm-leading); letter-spacing: var(--text-sm-tracking); }
.service__link { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm-size); line-height: var(--text-sm-leading); font-weight: var(--weight-medium); color: var(--color-action); }
.service__link:hover { color: var(--color-action-hover); }
.service__link--end { margin-left: auto; }

/* delta-component:split */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); align-items: center; }
.split__copy { display: flex; flex-direction: column; gap: var(--space-lg); }
.split__photo { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
.split__photo--wide { aspect-ratio: 4 / 3; }
.split__photo--square { aspect-ratio: 1; }
.split__photo--tall { aspect-ratio: 3 / 4; }

/* delta-component:strip */
.strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-block: var(--border-width) solid var(--color-border); }
.strip__item { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-lg) var(--space-md); }
.strip__item + .strip__item { border-left: var(--border-width) solid var(--color-border); }

/* delta-component:svc */
.svc-list { gap: 0; }
.svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; padding-block: var(--space-3xl); border-top: var(--border-width) solid var(--color-border); }
.svc:last-child { border-bottom: var(--border-width) solid var(--color-border); }
.svc:nth-child(even) .svc__photo { order: 2; }
.svc__photo { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.svc__copy { display: flex; flex-direction: column; gap: var(--space-md); }
.svc__meta { display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.svc__meta span { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm-size); line-height: var(--text-sm-leading); color: var(--color-ink-muted); }
.svc__meta .icon { width: var(--space-md); height: var(--space-md); color: var(--color-action); }