/*
Theme Name:  Bull Tail Works
Theme URI:   https://bull-tail.works/
Author:      Ryota Ushio
Author URI:  https://bull-tail.works/
Description: Portfolio & Web tools site for Ryota Ushio (Bull Tail Works)
Version:     1.0.0
License:     Private
Text Domain: bull-tail-works
*/

/* =========================================
   Global base styles — tokens are in tokens.css
   ========================================= */

html {
  background: var(--bt-surface-page);
}

body {
  margin: 0;
  font-family: var(--bt-font-jp);
  color: var(--bt-ink-700);
  font-size: var(--bt-fs-15);
  line-height: var(--bt-lh-normal);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, h5, h6 {
  color: var(--bt-ink-900);
  font-weight: var(--bt-fw-bold);
  line-height: var(--bt-lh-tight);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--bt-primary);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Layout utility */
.bt-container {
  max-width: var(--bt-container-max);
  margin-inline: auto;
  padding-inline: var(--bt-gutter);
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px; /* -1px: standard visually-hidden offset to escape parent clipping */
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================
   Button
   ========================================= */

.bt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bt-space-2);
  border-radius: var(--bt-r-sm);
  font-weight: var(--bt-fw-semibold);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--bt-dur-base) var(--bt-ease-out);
  border: 1px solid transparent;
}
.bt-btn--primary {
  background: var(--bt-primary);
  color: var(--bt-white);
  border-color: var(--bt-primary);
}
.bt-btn--primary:hover {
  background: var(--bt-primary-hover);
  border-color: var(--bt-primary-hover);
  color: var(--bt-white);
}
.bt-btn--secondary {
  background: var(--bt-white);
  color: var(--bt-ink-900);
  border-color: var(--bt-ink-200);
}
.bt-btn--secondary:hover {
  border-color: var(--bt-ink-300);
  color: var(--bt-ink-900);
}
.bt-btn--sm { padding: var(--bt-space-2) 14px; font-size: var(--bt-fs-13); }
.bt-btn--md { padding: var(--bt-space-3) 22px; font-size: var(--bt-fs-14); }
.bt-btn--lg { padding: var(--bt-space-4) 28px; font-size: var(--bt-fs-15); }
.bt-btn--hidden { display: none; }

/* =========================================
   Site Header
   ========================================= */

.bt-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92); /* frosted glass — intentional non-token value */
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition:
    border-color var(--bt-dur-base) var(--bt-ease-out),
    box-shadow   var(--bt-dur-base) var(--bt-ease-out);
}
.bt-site-header.is-scrolled {
  border-bottom-color: var(--bt-ink-200);
  box-shadow: var(--bt-shadow-sm);
}
.bt-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px; /* 14px: between --bt-space-3(12) and --bt-space-4(16) by design */
}
.bt-site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* 10px: between --bt-space-2(8) and --bt-space-3(12) by design */
  text-decoration: none;
  color: var(--bt-ink-900);
}
.bt-mark { color: var(--bt-primary); flex-shrink: 0; }
.bt-site-header__logo-text { line-height: 1.15; }
.bt-site-header__logo-name {
  display: block;
  font-size: var(--bt-fs-18);
  font-weight: var(--bt-fw-bold);
  color: var(--bt-ink-900);
  letter-spacing: -0.01em;
}
.bt-site-header__logo-sub {
  display: block;
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  margin-top: 2px; /* 2px: sub-pixel nudge for logo sub-text vertical alignment */
  letter-spacing: 0.02em;
}

/* ---- Global Nav ---- */
.bt-nav {
  display: flex;
  align-items: center;
  gap: 28px; /* 28px: between --bt-space-6(24) and --bt-space-8(32) by design */
}
.bt-nav__list {
  display: flex;
  align-items: center;
  gap: 28px; /* 28px: between --bt-space-6(24) and --bt-space-8(32) by design */
  list-style: none;
  margin: 0;
  padding: 0;
}
.bt-nav__list a {
  font-size: var(--bt-fs-14);
  font-weight: var(--bt-fw-medium);
  color: var(--bt-ink-700);
  text-decoration: none;
  padding-bottom: var(--bt-space-1);
  border-bottom: 2px solid transparent;
  transition:
    color var(--bt-dur-fast) var(--bt-ease-out),
    border-color var(--bt-dur-fast) var(--bt-ease-out);
}
.bt-nav__list a:hover,
.bt-nav__list .current-menu-item > a,
.bt-nav__list .current-page-ancestor > a {
  color: var(--bt-primary);
  border-bottom-color: var(--bt-primary);
  font-weight: var(--bt-fw-semibold);
}
.bt-nav__cta { flex-shrink: 0; }

/* ---- Mobile nav toggle ---- */
.bt-nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px; /* 6px: between --bt-space-1(4) and --bt-space-2(8) by design */
  color: var(--bt-ink-700);
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.bt-nav-mobile {
  border-top: 1px solid var(--bt-ink-100);
  background: var(--bt-white);
  padding: var(--bt-space-4) var(--bt-gutter) var(--bt-space-6);
}
.bt-nav-mobile__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.bt-nav-mobile__list a {
  display: block;
  padding: var(--bt-space-3) 0;
  font-size: var(--bt-fs-15);
  font-weight: var(--bt-fw-medium);
  color: var(--bt-ink-700);
  text-decoration: none;
  border-bottom: 1px solid var(--bt-ink-100);
}
.bt-nav-mobile__cta {
  margin-top: var(--bt-space-4);
  width: 100%;
  justify-content: center;
}

@media (max-width: 768px) {
  .bt-nav { display: none; }
  .bt-nav-toggle { display: inline-flex; }
}

/* =========================================
   Site Footer
   ========================================= */

.bt-site-footer {
  background: var(--bt-white);
  border-top: 1px solid var(--bt-ink-200);
  padding: var(--bt-space-6) 0;
}
.bt-site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bt-space-4);
  flex-wrap: wrap;
}
.bt-site-footer__left {
  display: flex;
  align-items: center;
  gap: 18px; /* 18px: between --bt-space-4(16) and --bt-space-5(20) for logo-copy alignment */
  flex-wrap: wrap;
}
.bt-site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-space-2);
  text-decoration: none;
  color: var(--bt-primary);
}
.bt-site-footer__name {
  font-size: var(--bt-fs-15);
  font-weight: var(--bt-fw-bold);
}
.bt-site-footer__copy {
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
}
.bt-site-footer__nav-list {
  display: flex;
  gap: var(--bt-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bt-site-footer__nav-list a {
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-700);
  text-decoration: none;
  transition: color var(--bt-dur-fast) var(--bt-ease-out);
}
.bt-site-footer__nav-list a:hover {
  color: var(--bt-primary);
}

@media (max-width: 600px) {
  .bt-site-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* =========================================
   Shared: Section Head
   ========================================= */

.btw-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px; /* 28px: between --bt-space-6(24) and --bt-space-8(32) by design */
  gap: var(--bt-space-6);
  flex-wrap: wrap;
}

.btw-section-head__eyebrow,
.btw-panel__eyebrow,
.btw-about__eyebrow {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-500);
  font-weight: var(--bt-fw-medium);
  margin: 0 0 var(--bt-space-1);
}
.btw-section-head__eyebrow { letter-spacing: 0.02em; }

.btw-section-head__title {
  font-size: var(--bt-fs-28);
  color: var(--bt-ink-900);
  margin: 0;
}

/* =========================================
   Shared: Panel card (Flow / Skill / Blog / Contact)
   ========================================= */

.btw-panel {
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-lg);
  padding: var(--bt-space-8);
}

.btw-panel__title {
  font-size: var(--bt-fs-24);
  color: var(--bt-ink-900);
  margin: 0 0 var(--bt-space-6);
}

.btw-panel__footer {
  margin-top: var(--bt-space-6);
  text-align: center;
}

/* Button modifier: full width */
.bt-btn--full {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* =========================================
   Front Page — Hero
   ========================================= */

.btw-hero {
  background: var(--bt-surface-hero);
  position: relative;
  overflow: hidden;
}

.btw-hero__bg-img-wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 54%; /* 54%: right-bleed hero image — design spec */
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 1) 22%, rgba(0, 0, 0, 1) 100%);
  mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 1) 22%, rgba(0, 0, 0, 1) 100%);
  pointer-events: none;
}

.btw-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.btw-hero__inner {
  position: relative;
  max-width: var(--bt-container-max);
  margin-inline: auto;
  padding: 70px var(--bt-gutter) 110px; /* 70px/110px: design spec for hero top/bottom spacing */
  min-height: 540px; /* 540px: design spec for hero section minimum height */
}

.btw-hero__content {
  max-width: 620px; /* 620px: hero content width, leaves room for right-bleed image */
}

.btw-hero__eyebrow {
  font-size: var(--bt-fs-13);
  color: var(--bt-primary);
  font-weight: var(--bt-fw-semibold);
  margin: 0 0 22px; /* 22px: between --bt-space-5(20) and --bt-space-6(24) by design */
}

.btw-hero__title {
  font-size: 36px; /* 36px: between --bt-fs-32(32) and --bt-fs-40(40) — design spec for hero h1 */
  line-height: 1.5;
  margin-bottom: 26px; /* 26px: between --bt-space-6(24) and --bt-space-8(32) by design */
  color: var(--bt-ink-900);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.btw-hero__title-accent {
  color: var(--bt-primary);
  border-bottom: 3px solid var(--bt-primary);
  padding-bottom: 2px; /* 2px: sub-pixel underline clearance */
}

.btw-hero__desc {
  font-size: var(--bt-fs-15);
  color: var(--bt-ink-600);
  line-height: var(--bt-lh-loose);
  margin-bottom: 22px; /* 22px: between --bt-space-5(20) and --bt-space-6(24) by design */
}

.btw-hero__points {
  display: flex;
  gap: 22px; /* 22px: between --bt-space-5(20) and --bt-space-6(24) by design */
  margin: 0 0 28px; /* 28px: between --bt-space-6(24) and --bt-space-8(32) by design */
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.btw-hero__point {
  display: flex;
  align-items: center;
  gap: var(--bt-space-2);
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-900);
  font-weight: var(--bt-fw-medium);
}

.btw-hero__point-icon {
  width: 18px; /* 18px: check icon circle — between --bt-space-4(16) and --bt-space-5(20) by design */
  height: 18px;
  border-radius: var(--bt-r-full);
  background: var(--bt-primary);
  color: var(--bt-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btw-hero__actions {
  display: flex;
  gap: 14px; /* 14px: between --bt-space-3(12) and --bt-space-4(16) by design */
  flex-wrap: wrap;
}

.btw-hero__stats {
  position: absolute;
  bottom: 28px; /* 28px: between --bt-space-6(24) and --bt-space-8(32) by design */
  right: var(--bt-gutter);
  display: flex;
  gap: 10px; /* 10px: between --bt-space-2(8) and --bt-space-3(12) by design */
  z-index: 2;
}

.btw-hero__stat {
  background: var(--bt-white);
  border-radius: var(--bt-r-md);
  padding: 12px 18px; /* 12px/18px: compact stat card padding — design spec */
  display: flex;
  align-items: center;
  gap: 10px; /* 10px: between --bt-space-2(8) and --bt-space-3(12) by design */
  box-shadow: var(--bt-shadow-md);
}

.btw-hero__stat-icon {
  color: var(--bt-primary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.btw-hero__stat-info {
  display: flex;
  flex-direction: column;
}

.btw-hero__stat-label {
  font-size: 10.5px; /* 10.5px: sub-token fine-print label — design spec */
  color: var(--bt-ink-500);
  font-weight: var(--bt-fw-medium);
  white-space: nowrap;
}

.btw-hero__stat-value {
  font-size: var(--bt-fs-14);
  font-weight: var(--bt-fw-bold);
  color: var(--bt-ink-900);
  white-space: nowrap;
}

/* =========================================
   Front Page — About
   ========================================= */

/* 88px: design spec for standard section vertical padding */
.btw-about,
.btw-services,
.btw-works { padding: 88px 0; }

.btw-about {
  background: var(--bt-white);
}

.btw-about__inner {
  display: grid;
  grid-template-columns: 420px 1fr; /* 420px: fixed-width photo column — design spec */
  gap: 56px; /* 56px: between --bt-space-12(48) and --bt-space-16(64) by design */
  align-items: start;
}

.btw-about__img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--bt-r-md);
  overflow: hidden;
  background: var(--bt-ink-100);
}

.btw-about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.btw-about__body { padding-top: var(--bt-space-2); }

.btw-about__title {
  font-size: var(--bt-fs-28);
  margin-bottom: 22px; /* 22px: between --bt-space-5(20) and --bt-space-6(24) by design */
}

.btw-about__desc {
  font-size: var(--bt-fs-15);
  color: var(--bt-ink-600);
  line-height: var(--bt-lh-loose);
  margin-bottom: var(--bt-space-4);
}

.btw-about__actions { margin-top: 28px; /* 28px: between --bt-space-6(24) and --bt-space-8(32) by design */ }

/* =========================================
   Front Page — Pain Points
   ========================================= */

.btw-pain {
  padding: var(--bt-space-20) 0;
  background: var(--bt-surface-page);
}

.btw-pain__title {
  font-size: var(--bt-fs-28);
  text-align: center;
  margin-bottom: var(--bt-space-10);
}

.btw-pain__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--bt-space-4);
  margin: 0 0 var(--bt-space-8);
  list-style: none;
  padding: 0;
}

.btw-pain__item {
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-md);
  padding: var(--bt-space-6);
  text-align: center;
}

.btw-pain__item-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 14px; /* 14px: between --bt-space-3(12) and --bt-space-4(16) by design */
  color: var(--bt-ink-500);
}

.btw-pain__item-title {
  font-size: var(--bt-fs-14);
  font-weight: var(--bt-fw-bold);
  color: var(--bt-ink-900);
  margin-bottom: 10px; /* 10px: between --bt-space-2(8) and --bt-space-3(12) by design */
  line-height: 1.5;
}

.btw-pain__item-desc {
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  line-height: 1.75; /* 1.75: between --bt-lh-normal(1.7) and --bt-lh-loose(1.9) by design */
  margin: 0;
}

.btw-pain__cta { text-align: center; }

.btw-pain__cta-text {
  font-size: var(--bt-fs-14);
  color: var(--bt-ink-600);
  margin-bottom: 18px; /* 18px: between --bt-space-4(16) and --bt-space-5(20) by design */
}

.btw-pain__cta-btn {
  display: inline-block;
  min-width: 420px; /* 420px: CTA button minimum width — design spec */
}

/* =========================================
   Front Page — Services
   ========================================= */

.btw-services {
  background: var(--bt-white);
}

.btw-services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bt-space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.btw-services__card {
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-md);
  padding: 28px; /* 28px: between --bt-space-6(24) and --bt-space-8(32) by design */
  display: flex;
  flex-direction: column;
}

.btw-services__card-icon {
  width: 60px; /* 60px: service icon container — between --bt-space-12(48) and --bt-space-16(64) by design */
  height: 60px;
  border-radius: var(--bt-r-md);
  background: var(--bt-blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bt-primary);
  margin: 0 auto 18px; /* 18px: between --bt-space-4(16) and --bt-space-5(20) by design */
}

.btw-services__card-title {
  font-size: var(--bt-fs-16);
  color: var(--bt-ink-900);
  text-align: center;
  margin-bottom: var(--bt-space-3);
}

.btw-services__card-desc {
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-600);
  line-height: 1.8; /* 1.8: between --bt-lh-normal(1.7) and --bt-lh-loose(1.9) by design */
  margin-bottom: var(--bt-space-5);
  flex: 1;
}

.btw-services__card-link {
  font-size: var(--bt-fs-13);
  font-weight: var(--bt-fw-semibold);
  color: var(--bt-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--bt-space-1);
  text-decoration: none;
  margin-top: auto;
}

.btw-services__card-link:hover { color: var(--bt-primary-hover); }

/* =========================================
   Front Page — Works
   ========================================= */

.btw-works {
  background: var(--bt-surface-page);
}

.btw-works__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bt-space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.btw-work-card {
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-md);
  overflow: hidden;
}

.btw-work-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.btw-work-card__link:hover .btw-work-card__title { color: var(--bt-primary); }

.btw-work-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bt-ink-100);
}

.btw-work-card__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bt-dur-slow) var(--bt-ease-out);
}

.btw-work-card__link:hover .btw-work-card__thumb-img { transform: scale(1.03); }

.btw-work-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    135deg,
    var(--bt-blue-100) 0,
    var(--bt-blue-100) 10px,
    var(--bt-blue-50) 10px,
    var(--bt-blue-50) 20px
  );
}

.btw-work-card__body {
  padding: 16px 18px; /* 16px/18px: work card body padding — design spec */
  text-align: center;
}

.btw-work-card__title {
  font-size: var(--bt-fs-14);
  font-weight: var(--bt-fw-bold);
  color: var(--bt-ink-900);
  margin-bottom: var(--bt-space-1);
  transition: color var(--bt-dur-fast) var(--bt-ease-out);
}

.btw-work-card__cat {
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  margin: 0;
}

/* =========================================
   Front Page — Flow & Skill
   ========================================= */

.btw-flow-skill {
  padding: 20px 0 60px; /* 20px/60px: design spec — reduced top spacing after Works */
  background: var(--bt-surface-page);
}

.btw-flow-skill__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--bt-space-5);
  align-items: start;
}

/* Flow card */
.btw-flow-card__steps {
  display: flex;
  flex-direction: column;
  gap: 18px; /* 18px: between --bt-space-4(16) and --bt-space-5(20) by design */
  list-style: none;
  padding: 0;
  margin: 0;
}

.btw-flow-card__step {
  display: flex;
  gap: var(--bt-space-4);
  align-items: flex-start;
}

.btw-flow-card__step-num {
  flex-shrink: 0;
  width: 30px; /* 30px: step number circle — between --bt-space-6(24) and --bt-space-8(32) by design */
  height: 30px;
  border-radius: var(--bt-r-full);
  background: var(--bt-primary);
  color: var(--bt-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bt-font-en);
  font-weight: var(--bt-fw-bold);
  font-size: var(--bt-fs-13);
}

.btw-flow-card__step-title {
  font-size: var(--bt-fs-15);
  font-weight: var(--bt-fw-bold);
  color: var(--bt-ink-900);
  margin: 0 0 var(--bt-space-1);
}

.btw-flow-card__step-desc {
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-500);
  line-height: var(--bt-lh-normal);
  margin: 0;
}

/* Skill card */
.btw-tech-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--bt-space-5);
  margin-bottom: 22px; /* 22px: between --bt-space-5(20) and --bt-space-6(24) by design */
  list-style: none;
  padding: 0;
}

.btw-tech-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bt-space-2);
}

.btw-tech-badge__icon {
  width: 56px; /* 56px: tech badge icon size — between --bt-space-12(48) and --bt-space-16(64) by design */
  height: 56px;
  border-radius: var(--bt-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--bt-shadow-sm);
}

/* Brand background colors — intentional non-token values (third-party brand colors) */
.btw-tech-badge__icon--html5    { background: #E34F26; }
.btw-tech-badge__icon--css3     { background: #1572B6; }
.btw-tech-badge__icon--js       { background: #F7DF1E; }
.btw-tech-badge__icon--php      { background: #777BB4; }
.btw-tech-badge__icon--wordpress { background: #21759B; }
.btw-tech-badge__icon--mysql    { background: #4479A1; }
.btw-tech-badge__icon--tailwind { background: #06B6D4; }
.btw-tech-badge__icon--git      { background: #F05032; }

.btw-tech-badge__name {
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-700);
  font-weight: var(--bt-fw-medium);
  text-align: center;
}

.btw-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bt-space-2);
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.btw-skill-tags__tag {
  padding: 6px 14px; /* 6px/14px: tag pill padding — design spec */
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  color: var(--bt-ink-700);
  border-radius: var(--bt-r-full);
  font-size: var(--bt-fs-12);
  font-weight: var(--bt-fw-medium);
}

/* =========================================
   Front Page — Blog & Contact
   ========================================= */

.btw-blog-contact {
  padding: 20px 0 var(--bt-space-20); /* 20px: reduced top spacing — design spec */
  background: var(--bt-surface-page);
}

.btw-blog-contact__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--bt-space-5);
  align-items: start;
}

.btw-blog-box {
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-lg);
  padding: 28px; /* 28px: between --bt-space-6(24) and --bt-space-8(32) by design */
}

.btw-blog-box__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px; /* 22px: between --bt-space-5(20) and --bt-space-6(24) by design */
  gap: var(--bt-space-4);
  flex-wrap: wrap;
}

.btw-blog-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px; /* 14px: between --bt-space-3(12) and --bt-space-4(16) by design */
  list-style: none;
  padding: 0;
  margin: 0;
}

.btw-post-card {
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-md);
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: transform var(--bt-dur-base) var(--bt-ease-out), box-shadow var(--bt-dur-base) var(--bt-ease-out);
}

.btw-post-card:hover {
  transform: translateY(-2px); /* -2px: card lift hover — design spec */
  box-shadow: var(--bt-shadow-md);
}

.btw-post-card__thumb {
  position: relative; /* absolute fill for img / placeholder */
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bt-ink-100);
}

.btw-post-card__thumb-img,
.btw-post-card__thumb-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btw-post-card__thumb-placeholder {
  background: repeating-linear-gradient(
    135deg,
    var(--bt-blue-100) 0,
    var(--bt-blue-100) 10px,
    #CDDBEC 10px, /* #CDDBEC: design spec — intentional non-token between bt-blue-100/#DCE6F2 and bt-blue-200/#B6CAE3 */
    #CDDBEC 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bt-blue-700);
  font-family: var(--bt-font-mono);
  font-size: var(--bt-fs-11);
  letter-spacing: 0.02em;
}

.btw-post-card__body { padding: var(--bt-space-4); }

.btw-post-card__date {
  display: block;
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  margin-bottom: 6px; /* 6px: between --bt-space-1(4) and --bt-space-2(8) by design */
}

.btw-post-card__title {
  font-size: var(--bt-fs-14);
  font-weight: var(--bt-fw-bold);
  color: var(--bt-ink-900);
  margin-bottom: 10px; /* 10px: between --bt-space-2(8) and --bt-space-3(12) by design */
  line-height: 1.55; /* 1.55: between --bt-lh-snug(1.45) and --bt-lh-normal(1.7) by design */
  transition: color var(--bt-dur-fast) var(--bt-ease-out);
}

.btw-post-card:hover .btw-post-card__title { color: var(--bt-primary); }

.btw-post-card__tag {
  padding: 3px 10px; /* 3px/10px: compact tag pill — design spec */
  background: var(--bt-blue-50);
  color: var(--bt-blue-700);
  border-radius: var(--bt-r-xs);
  font-size: var(--bt-fs-12);
  font-weight: var(--bt-fw-semibold);
}

.btw-contact-box {
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-lg);
  padding: 28px; /* 28px: between --bt-space-6(24) and --bt-space-8(32) by design */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px; /* 280px: contact box minimum height for visual balance */
}

.btw-contact-box__title {
  font-size: var(--bt-fs-18);
  color: var(--bt-ink-900);
  margin-bottom: var(--bt-space-3);
}

.btw-contact-box__desc {
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  line-height: 1.75; /* 1.75: between --bt-lh-normal(1.7) and --bt-lh-loose(1.9) by design */
  margin-bottom: var(--bt-space-5);
}

.btw-contact-box__email {
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  margin-top: 14px; /* 14px: between --bt-space-3(12) and --bt-space-4(16) by design */
  text-align: center;
}

.btw-contact-box__email a {
  color: var(--bt-primary);
  font-weight: var(--bt-fw-semibold);
}

/* =========================================
   Front Page — Responsive (≤ 1024px)
   ========================================= */

@media (max-width: 1024px) {
  .btw-about__inner {
    grid-template-columns: 320px 1fr; /* 320px: narrower photo column on tablet */
    gap: var(--bt-space-8);
  }

  .btw-pain__grid { grid-template-columns: repeat(3, 1fr); }

  .btw-services__grid { grid-template-columns: repeat(2, 1fr); }

  .btw-works__grid { grid-template-columns: repeat(2, 1fr); }

  .btw-flow-skill__inner { grid-template-columns: 1fr; }

  .btw-blog-contact__grid { grid-template-columns: 1fr; }

  .btw-blog-posts { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================
   Front Page — Responsive (≤ 768px)
   ========================================= */

@media (max-width: 768px) {
  .btw-hero__inner {
    padding: 48px var(--bt-gutter) 200px; /* 48px: reduced top padding on mobile; 200px: space for stats */
    min-height: auto;
  }

  .btw-hero__bg-img-wrap {
    top: auto;
    height: 220px; /* 220px: hero image on mobile — design spec */
    bottom: 0;
    width: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 30%);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 1) 30%);
  }

  .btw-hero__stats {
    flex-direction: column;
    gap: var(--bt-space-2);
    bottom: var(--bt-space-4);
  }

  .btw-hero__stat { width: 100%; justify-content: flex-start; }

  .btw-about { padding: var(--bt-space-12) 0; }
  .btw-about__inner { grid-template-columns: 1fr; }
  .btw-about__img-wrap { max-width: 320px; margin: 0 auto; }

  .btw-pain { padding: var(--bt-space-12) 0; }
  .btw-pain__grid { grid-template-columns: 1fr 1fr; }
  .btw-pain__cta-btn { min-width: 0; width: 100%; }

  .btw-services { padding: var(--bt-space-12) 0; }
  .btw-services__grid { grid-template-columns: 1fr; }

  .btw-works { padding: var(--bt-space-12) 0; }
  .btw-works__grid { grid-template-columns: 1fr; }

  .btw-flow-skill { padding: var(--bt-space-4) 0 var(--bt-space-12); }

  .btw-blog-posts { grid-template-columns: 1fr; }

  .btw-contact-box { min-height: auto; }
}

/* =========================================
   Shared: Page Hero (interior pages)
   ========================================= */

.btw-page-hero {
  background: var(--bt-surface-hero);
  border-bottom: 1px solid var(--bt-ink-200);
}

.btw-page-hero__container {
  padding-top: 56px; /* 56px: between --bt-space-12(48) and --bt-space-16(64) — page hero top by design */
  padding-bottom: var(--bt-space-12);
}

.btw-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--bt-space-2);
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  margin-bottom: 18px; /* 18px: between --bt-space-4(16) and --bt-space-5(20) — breadcrumb-to-head gap */
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}

.btw-breadcrumb__sep { color: var(--bt-ink-400); }

.btw-breadcrumb__link {
  color: var(--bt-ink-500);
  text-decoration: none;
  transition: color var(--bt-dur-fast) var(--bt-ease-out);
}

.btw-breadcrumb__link:hover { color: var(--bt-primary); }

.btw-breadcrumb__current {
  color: var(--bt-ink-900);
  font-weight: var(--bt-fw-medium);
}

.btw-page-hero__head { margin-top: 0; }

.btw-page-hero__eyebrow {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-13);
  color: var(--bt-primary);
  font-weight: var(--bt-fw-semibold);
  letter-spacing: 0.04em;
  margin: 0 0 var(--bt-space-2);
}

.btw-page-hero__title {
  font-size: var(--bt-fs-32);
  color: var(--bt-ink-900);
  letter-spacing: -0.01em;
  line-height: 1.4; /* 1.4: between --bt-lh-tight(1.25) and --bt-lh-snug — page hero h1 by design */
  margin: 0;
}

/* =========================================
   Shared: Contact CTA Strip
   ========================================= */

.btw-cta-strip {
  padding: var(--bt-space-16) 0;
  background: var(--bt-white);
  border-top: 1px solid var(--bt-ink-100);
}

.btw-cta-strip__box {
  background: var(--bt-surface-hero);
  border-radius: var(--bt-r-lg);
  padding: 40px 48px; /* 40px/48px: CTA strip box padding — design spec */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bt-space-8);
  flex-wrap: wrap;
}

.btw-cta-strip__body { flex: 1; }

.btw-cta-strip__eyebrow {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-12);
  color: var(--bt-primary);
  font-weight: var(--bt-fw-semibold);
  letter-spacing: 0.04em;
  margin: 0 0 6px; /* 6px: between --bt-space-1(4) and --bt-space-2(8) — eyebrow-to-title gap */
}

.btw-cta-strip__title {
  font-size: var(--bt-fs-24);
  color: var(--bt-ink-900);
  margin: 0 0 var(--bt-space-2);
}

.btw-cta-strip__desc {
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-600);
  line-height: 1.75; /* 1.75: between --bt-lh-normal(1.7) and --bt-lh-loose(1.9) by design */
  margin: 0;
}

.btw-cta-strip__actions {
  display: flex;
  gap: var(--bt-space-3);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* =========================================
   Archive Works
   ========================================= */

.btw-works-archive {
  padding: var(--bt-space-16) 0 var(--bt-space-24);
  background: var(--bt-surface-page);
}

.btw-filter-tabs {
  display: flex;
  gap: var(--bt-space-2);
  flex-wrap: wrap;
  margin-bottom: 36px; /* 36px: between --bt-space-8(32) and --bt-space-10(40) — filter-to-count gap */
}

.btw-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-space-2);
  padding: 10px 18px; /* 10px/18px: filter tab vertical/horizontal padding — design spec */
  background: var(--bt-white);
  color: var(--bt-ink-700);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-full);
  font-size: var(--bt-fs-13);
  font-weight: var(--bt-fw-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: all 180ms var(--bt-ease-out); /* 180ms: between --bt-dur-fast(120) and --bt-dur-base(200) by design */
}

.btw-filter-tab:hover {
  border-color: var(--bt-ink-300);
  color: var(--bt-ink-900);
}

.btw-filter-tab--active,
.btw-filter-tab--active:hover {
  background: var(--bt-primary);
  color: var(--bt-white);
  border-color: var(--bt-primary);
}

.btw-filter-tab__count {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-11);
  padding: 1px var(--bt-space-2);
  background: var(--bt-ink-100);
  color: var(--bt-ink-500);
  border-radius: var(--bt-r-full);
}

.btw-filter-tab--active .btw-filter-tab__count,
.btw-filter-tab--active:hover .btw-filter-tab__count {
  background: rgba(255, 255, 255, 0.2); /* active tab count badge — intentional non-token value */
  color: var(--bt-white);
}

.btw-works-archive__count {
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-500);
  margin-bottom: var(--bt-space-5);
}

.btw-works-archive__count-num {
  color: var(--bt-ink-900);
  font-weight: var(--bt-fw-semibold);
}

.btw-works-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bt-space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.btw-works-archive__empty {
  padding: 60px 0; /* 60px: empty state vertical padding — design spec */
  text-align: center;
  color: var(--bt-ink-500);
  font-size: var(--bt-fs-14);
}

/* Works archive card */
.btw-works-archive-card {
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 220ms var(--bt-ease-out); /* 220ms: between --bt-dur-base(200) and --bt-dur-slow(320) by design */
}

.btw-works-archive-card:hover {
  transform: translateY(-2px); /* -2px: card lift hover — design spec */
  box-shadow: var(--bt-shadow-md);
}

.btw-works-archive-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.btw-works-archive-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bt-ink-100);
}

.btw-works-archive-card__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bt-dur-slow) var(--bt-ease-out);
}

.btw-works-archive-card:hover .btw-works-archive-card__thumb-img {
  transform: scale(1.04); /* 1.04: subtle zoom scale on hover — design spec */
}

.btw-works-archive-card__thumb-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    135deg,
    var(--bt-blue-100) 0,
    var(--bt-blue-100) 10px,
    var(--bt-blue-50) 10px,
    var(--bt-blue-50) 20px
  );
}

.btw-works-archive-card__body {
  padding: 20px 22px 22px; /* 20px/22px: archive card body padding — design spec */
  display: flex;
  flex-direction: column;
  gap: 10px; /* 10px: between --bt-space-2(8) and --bt-space-3(12) — card body item gap */
  flex: 1;
}

.btw-works-archive-card__meta {
  display: flex;
  align-items: center;
  gap: var(--bt-space-2);
}

.btw-works-archive-card__industry {
  padding: 3px 10px; /* 3px/10px: badge pill padding — design spec */
  background: var(--bt-blue-50);
  color: var(--bt-blue-700);
  border-radius: var(--bt-r-xs);
  font-size: var(--bt-fs-11);
  font-weight: var(--bt-fw-semibold);
}

.btw-works-archive-card__year {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-11);
  color: var(--bt-ink-500);
}

.btw-works-archive-card__title {
  font-size: 17px; /* 17px: between --bt-fs-15(15) and --bt-fs-18(18) — card title by design */
  color: var(--bt-ink-900);
  line-height: 1.5; /* 1.5: between --bt-lh-tight(1.25) and --bt-lh-snug — card title by design */
  margin: 0;
  transition: color var(--bt-dur-fast) var(--bt-ease-out);
}

.btw-works-archive-card__link:hover .btw-works-archive-card__title {
  color: var(--bt-primary);
}

.btw-works-archive-card__summary {
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-600);
  line-height: 1.8; /* 1.8: between --bt-lh-normal(1.7) and --bt-lh-loose(1.9) — card summary by design */
  margin: 0;
}

.btw-works-archive-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* 6px: between --bt-space-1(4) and --bt-space-2(8) — tag gap by design */
  margin-top: var(--bt-space-1);
  list-style: none;
  padding: 0;
}

.btw-works-archive-card__tag {
  padding: 3px 10px; /* 3px/10px: tag pill padding — design spec */
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  color: var(--bt-ink-600);
  border-radius: var(--bt-r-full);
  font-size: var(--bt-fs-11);
  font-weight: var(--bt-fw-medium);
}

/* =========================================
   Single Works — Lead
   ========================================= */

.btw-works-lead {
  padding: var(--bt-space-12) 0 var(--bt-space-8);
  background: var(--bt-white);
}

.btw-works-lead__inner {
  display: grid;
  grid-template-columns: 1fr 320px; /* 320px: sidebar fixed width — design spec */
  gap: 56px; /* 56px: between --bt-space-12(48) and --bt-space-16(64) — lead content-to-sidebar gap */
  align-items: start;
}

.btw-works-lead__main-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--bt-r-md);
  background: var(--bt-ink-100);
}

.btw-works-lead__main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btw-works-lead__main-img-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    135deg,
    var(--bt-blue-100) 0,
    var(--bt-blue-100) 10px,
    var(--bt-blue-50) 10px,
    var(--bt-blue-50) 20px
  );
}

.btw-works-lead__summary-wrap {
  margin-top: 28px; /* 28px: between --bt-space-6(24) and --bt-space-8(32) — image-to-summary gap */
}

.btw-works-lead__meta {
  display: flex;
  align-items: center;
  gap: var(--bt-space-2);
  margin-bottom: 14px; /* 14px: between --bt-space-3(12) and --bt-space-4(16) — meta-to-overview gap */
}

.btw-works-lead__industry {
  padding: 4px 12px; /* 4px/12px: lead industry badge padding — design spec */
  background: var(--bt-blue-50);
  color: var(--bt-blue-700);
  border-radius: var(--bt-r-xs);
  font-size: var(--bt-fs-12);
  font-weight: var(--bt-fw-semibold);
}

.btw-works-lead__year {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
}

.btw-works-lead__summary {
  font-size: 17px; /* 17px: between --bt-fs-15(15) and --bt-fs-18(18) — lead overview by design */
  color: var(--bt-ink-700);
  line-height: 1.95; /* 1.95: close to --bt-lh-loose(1.9) — lead overview by design */
  margin: 0;
}

/* Sidebar */
.btw-works-sidebar {
  background: var(--bt-surface-page);
  border-radius: var(--bt-r-md);
  padding: var(--bt-space-6);
  position: sticky;
  top: 88px; /* 88px: site header height + margin — sticky sidebar scroll offset */
}

.btw-works-sidebar__label {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--bt-fw-medium);
  margin: 0 0 var(--bt-space-4);
}

.btw-works-sidebar__dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px; /* 14px: between --bt-space-3(12) and --bt-space-4(16) — sidebar item gap */
}

.btw-works-sidebar__item {
  display: flex;
  flex-direction: column;
  gap: var(--bt-space-1);
}

.btw-works-sidebar__dt {
  font-size: var(--bt-fs-11);
  color: var(--bt-ink-500);
  font-weight: var(--bt-fw-medium);
}

.btw-works-sidebar__dd {
  margin: 0;
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-900);
  font-weight: var(--bt-fw-medium);
  line-height: 1.65; /* 1.65: between --bt-lh-snug(1.45) and --bt-lh-normal(1.7) — sidebar value */
}

.btw-works-sidebar__dd--link a {
  color: var(--bt-primary);
  text-decoration: none;
  word-break: break-all;
}

.btw-works-sidebar__dd--link a:hover { text-decoration: underline; }

.btw-works-sidebar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* 6px: between --bt-space-1(4) and --bt-space-2(8) — sidebar tag gap */
  list-style: none;
  padding: 0;
  margin: var(--bt-space-1) 0 0;
}

.btw-works-sidebar__tag {
  padding: 3px 9px; /* 3px/9px: sidebar tag pill padding — design spec */
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  color: var(--bt-ink-700);
  border-radius: var(--bt-r-full);
  font-size: var(--bt-fs-11);
  font-weight: var(--bt-fw-medium);
}

/* =========================================
   Single Works — Body
   ========================================= */

.btw-works-body {
  padding: 60px 0 72px; /* 60px/72px: works body section vertical padding — design spec */
  background: var(--bt-white);
}

.btw-works-body__inner {
  max-width: 880px; /* 880px: single works body content max-width — design spec */
  margin: 0 auto;
  padding: 0 var(--bt-gutter);
  display: flex;
  flex-direction: column;
  gap: 56px; /* 56px: between --bt-space-12(48) and --bt-space-16(64) — body section gap */
}

.btw-works-section__heading {
  margin-bottom: var(--bt-space-4);
}

.btw-works-section__num {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-12);
  color: var(--bt-primary);
  font-weight: var(--bt-fw-semibold);
  letter-spacing: 0.06em;
  margin: 0 0 var(--bt-space-1);
}

.btw-works-section__title {
  font-size: var(--bt-fs-24);
  color: var(--bt-ink-900);
  margin: 0;
}

.btw-works-section__content {
  font-size: var(--bt-fs-15);
  color: var(--bt-ink-700);
  line-height: 1.95; /* 1.95: close to --bt-lh-loose(1.9) — body content by design */
}

.btw-works-section__content p { margin-bottom: 1em; }
.btw-works-section__content p:last-child { margin-bottom: 0; }

.btw-works-section__content ul,
.btw-works-section__content ol {
  padding-left: var(--bt-space-5);
  margin: 0 0 1em; /* 1em: matches body line-height for paragraph-equivalent rhythm */
}

.btw-works-section__content li { margin-bottom: 0.4em; }

.btw-works-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px; /* 14px: between --bt-space-3(12) and --bt-space-4(16) — gallery image gap */
  margin-bottom: var(--bt-space-6);
}

.btw-works-gallery__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--bt-r-sm);
}

/* Client voice */
.btw-works-client-voice {
  margin: 0;
  padding: 28px 32px; /* 28px/32px: client voice blockquote padding — design spec */
  background: var(--bt-surface-page);
  border-left: 3px solid var(--bt-primary);
  border-radius: 0 var(--bt-r-md) var(--bt-r-md) 0;
  font-size: var(--bt-fs-15);
  color: var(--bt-ink-700);
  line-height: 1.95; /* 1.95: client voice line height — design spec */
}

.btw-works-client-voice p { margin-bottom: 14px; /* 14px: blockquote text-to-footer gap */ }
.btw-works-client-voice p:last-child { margin-bottom: 0; }

/* =========================================
   Single Works — Other Works
   ========================================= */

.btw-other-works {
  padding: var(--bt-space-12) 0 var(--bt-space-16);
  background: var(--bt-surface-page);
}

.btw-other-works__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--bt-space-5);
  gap: var(--bt-space-4);
}

.btw-other-works__eyebrow {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  font-weight: var(--bt-fw-medium);
  margin: 0 0 var(--bt-space-1);
}

.btw-other-works__title {
  font-size: 22px; /* 22px: between --bt-fs-18(18) and --bt-fs-24(24) — other works heading by design */
  color: var(--bt-ink-900);
  margin: 0;
}

.btw-other-works__link {
  font-size: var(--bt-fs-13);
  font-weight: var(--bt-fw-semibold);
  color: var(--bt-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* 6px: between --bt-space-1(4) and --bt-space-2(8) — link-icon gap */
  flex-shrink: 0;
  white-space: nowrap;
}

.btw-other-works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px; /* 18px: between --bt-space-4(16) and --bt-space-5(20) — other works card gap */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =========================================
   Works Pages — Responsive (≤ 1024px)
   ========================================= */

@media (max-width: 1024px) {
  .btw-works-archive__grid { grid-template-columns: repeat(2, 1fr); }

  .btw-works-lead__inner {
    grid-template-columns: 1fr;
    gap: var(--bt-space-8);
  }

  .btw-works-sidebar { position: static; }

  .btw-other-works__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   Works Pages — Responsive (≤ 768px)
   ========================================= */

@media (max-width: 768px) {
  .btw-page-hero__container {
    padding-top: var(--bt-space-12);
    padding-bottom: var(--bt-space-8);
  }

  .btw-page-hero__title { font-size: var(--bt-fs-28); }

  .btw-cta-strip__box {
    flex-direction: column;
    align-items: stretch;
    padding: var(--bt-space-6);
  }

  .btw-cta-strip__actions { width: 100%; }

  .btw-cta-strip__actions .bt-btn {
    flex: 1;
    justify-content: center;
  }

  .btw-works-archive__grid { grid-template-columns: 1fr; }

  .btw-works-gallery { grid-template-columns: 1fr; }

  .btw-other-works__grid { grid-template-columns: 1fr; }

  .btw-other-works__head { flex-direction: column; align-items: flex-start; }
}

/* =========================================
   Blog Archive — Layout & Cards
   ========================================= */

.btw-blog-archive {
  padding: var(--bt-space-16) 0 var(--bt-space-24);
}

.btw-blog-archive .btw-filter-tabs {
  margin-bottom: var(--bt-space-9); /* 36px = --bt-space-9 — tabs-to-content gap */
}

/* Featured card — horizontal layout */
.btw-blog-archive__featured {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--bt-space-8);
}

.btw-post-card--featured {
  display: flex;
  flex-direction: row;
  height: auto;
}

.btw-post-card--featured .btw-post-card__thumb {
  flex: 0 0 52%;
  aspect-ratio: 4 / 3; /* design spec: featured card image ratio */
}

.btw-post-card--featured .btw-post-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px; /* 10px: between --bt-space-2(8) and --bt-space-3(12) — featured body gap */
  padding: 32px 36px; /* 32px 36px: featured card body padding — design spec */
}

.btw-post-card--featured .btw-post-card__title {
  font-size: var(--bt-fs-22);
  margin-bottom: 0;
}

.btw-post-card--featured .btw-post-card__excerpt {
  -webkit-line-clamp: 3;
}

/* Grid */
.btw-blog-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bt-space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Grid card overrides — blog archive small cards */
.btw-blog-archive__grid .btw-post-card__body {
  padding: 18px 20px 22px; /* 18px/20px/22px: design spec for blog archive small cards */
}

.btw-blog-archive__grid .btw-post-card__title {
  font-size: var(--bt-fs-15);
}

/* Card additions for blog */
.btw-post-card__meta {
  display: flex;
  align-items: center;
  gap: 10px; /* 10px: between --bt-space-2(8) and --bt-space-3(12) — meta item gap */
}

.btw-post-card__meta .btw-post-card__date { margin-bottom: 0; }

.btw-post-card__excerpt {
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-600);
  line-height: 1.85; /* 1.85: between --bt-lh-normal(1.7) and --bt-lh-loose(1.9) — excerpt */
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btw-post-card__readtime {
  font-size: var(--bt-fs-11);
  color: var(--bt-ink-500);
  display: inline-flex;
  align-items: center;
  gap: var(--bt-space-1);
  margin: 0;
}

/* Empty state */
.btw-blog-archive__empty {
  padding: 80px 0; /* 80px: empty state vertical padding — design spec */
  text-align: center;
  color: var(--bt-ink-500);
  font-size: var(--bt-fs-14);
}

/* Pagination */
.btw-pagination {
  margin-top: 56px; /* 56px: between --bt-space-12(48) and --bt-space-16(64) — pagination top gap */
  display: flex;
  justify-content: center;
}

.btw-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 6px; /* 6px: between --bt-space-1(4) and --bt-space-2(8) — page item gap */
}

.btw-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px; /* 36px: pagination item min-width — design spec */
  height: 36px; /* 36px: pagination item height — design spec */
  padding: 0 var(--bt-space-2);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-sm);
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-13);
  font-weight: var(--bt-fw-semibold);
  color: var(--bt-ink-700);
  text-decoration: none;
  transition: all var(--bt-dur-fast) var(--bt-ease-out);
}

.btw-pagination .page-numbers:hover,
.btw-pagination .page-numbers.current {
  background: var(--bt-primary);
  border-color: var(--bt-primary);
  color: var(--bt-white);
}

.btw-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
  pointer-events: none;
}

/* =========================================
   Single Blog — Article Header
   ========================================= */

.btw-single-blog {
  background: var(--bt-white);
}

.btw-article-header {
  padding: var(--bt-space-12) var(--bt-gutter) 0;
}

.btw-article-header__inner {
  max-width: 920px; /* 920px: article header max-width — design spec */
  margin: 0 auto;
  text-align: center;
}

.btw-article-header__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--bt-space-3);
  margin-bottom: var(--bt-space-4);
  flex-wrap: wrap;
}

.btw-article-header__cat {
  padding: var(--bt-space-1) var(--bt-space-3);
  background: var(--bt-blue-50);
  color: var(--bt-blue-700);
  border-radius: var(--bt-r-xs);
  font-size: var(--bt-fs-12);
  font-weight: var(--bt-fw-semibold);
  text-decoration: none;
}

.btw-article-header__date {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-500);
}

.btw-article-header__sep {
  color: var(--bt-ink-300);
}

.btw-article-header__readtime {
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  display: inline-flex;
  align-items: center;
  gap: var(--bt-space-1);
}

.btw-article-header__title {
  font-size: var(--bt-fs-32);
  letter-spacing: -0.01em; /* -0.01em: heading tracking — design spec */
  line-height: 1.45; /* 1.45: between --bt-lh-tight(1.25) and --bt-lh-snug — article title */
}

/* =========================================
   Single Blog — Hero Image
   ========================================= */

.btw-article-hero {
  max-width: 1080px; /* 1080px: article hero max-width — design spec */
  margin: var(--bt-space-10) auto 0;
  padding: 0 var(--bt-gutter);
}

.btw-article-hero img {
  width: 100%;
  border-radius: var(--bt-r-lg);
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

/* =========================================
   Single Blog — Body Layout
   ========================================= */

.btw-article-layout {
  max-width: 1080px; /* 1080px: article body max-width — design spec */
  margin: 0 auto;
  padding: var(--bt-space-16) var(--bt-gutter) var(--bt-space-20);
  display: grid;
  grid-template-columns: 1fr 260px; /* 260px: TOC sidebar fixed width — design spec */
  gap: 56px; /* 56px: between --bt-space-12(48) and --bt-space-16(64) — body-sidebar gap */
  align-items: start;
}

/* =========================================
   Single Blog — Article Body
   ========================================= */

.btw-article-body {
  min-width: 0;
  font-size: var(--bt-fs-15);
  color: var(--bt-ink-700);
  line-height: 1.95; /* 1.95: close to --bt-lh-loose(1.9) — article body */
}

.btw-article-body h2 {
  font-size: var(--bt-fs-24);
  color: var(--bt-ink-900);
  margin-top: var(--bt-space-12);
  margin-bottom: 18px; /* 18px: between --bt-space-4(16) and --bt-space-5(20) — h2 bottom gap */
  line-height: 1.45; /* 1.45: h2 line-height — design spec */
  padding-bottom: var(--bt-space-3);
  border-bottom: 2px solid var(--bt-ink-100);
}

.btw-article-body h3 {
  font-size: var(--bt-fs-18);
  color: var(--bt-ink-900);
  margin-top: var(--bt-space-8);
  margin-bottom: var(--bt-space-3);
  line-height: 1.5; /* 1.5: between --bt-lh-tight(1.25) and --bt-lh-snug — h3 */
}

.btw-article-body p { margin-bottom: var(--bt-space-4); }
.btw-article-body p:last-child { margin-bottom: 0; }

.btw-article-body ul,
.btw-article-body ol {
  margin: 0 0 1em; /* 1em: matches body line-height for paragraph-equivalent rhythm */
  padding-left: var(--bt-space-5);
}

.btw-article-body li {
  margin-bottom: 0.4em; /* 0.4em: tighter inter-item spacing within a list (vs 1em between paragraphs) */
  line-height: 1.95; /* 1.95: matches body line-height */
}

.btw-article-body a { color: var(--bt-primary); text-decoration: underline; }

.btw-article-body code {
  background: var(--bt-ink-100);
  padding: 2px 6px; /* 2px/6px: inline code pill padding — design spec */
  border-radius: var(--bt-r-xs);
  font-family: var(--bt-font-mono);
  font-size: var(--bt-fs-13);
}

.btw-article-body pre {
  background: var(--bt-ink-900);
  color: #E1E5EB; /* code block text color — intentional non-token value */
  padding: 18px 22px; /* 18px/22px: code block padding — design spec */
  border-radius: var(--bt-r-sm);
  font-family: var(--bt-font-mono);
  font-size: var(--bt-fs-13);
  line-height: 1.65; /* 1.65: between --bt-lh-snug(1.45) and --bt-lh-normal(1.7) — code block */
  overflow-x: auto;
  margin-bottom: var(--bt-space-4);
}

.btw-article-body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: inherit;
}

.btw-article-body blockquote {
  margin: 0 0 var(--bt-space-4);
  padding: 18px 22px; /* 18px/22px: blockquote padding — design spec */
  background: var(--bt-blue-50);
  border: 1px solid var(--bt-blue-200);
  border-radius: var(--bt-r-md);
  font-size: var(--bt-fs-14);
  line-height: 1.85; /* 1.85: between --bt-lh-normal(1.7) and --bt-lh-loose(1.9) — blockquote */
}

.btw-article-body img { border-radius: var(--bt-r-md); }

/* Author strip */
.btw-article-author {
  margin-top: var(--bt-space-12);
  padding-top: 28px; /* 28px: between --bt-space-6(24) and --bt-space-8(32) — author top border gap */
  border-top: 1px solid var(--bt-ink-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bt-space-4);
  flex-wrap: wrap;
}

.btw-article-author__profile {
  display: flex;
  align-items: center;
  gap: 14px; /* 14px: between --bt-space-3(12) and --bt-space-4(16) — author avatar-text gap */
}

.btw-article-author__name {
  font-size: var(--bt-fs-13);
  font-weight: var(--bt-fw-bold);
  color: var(--bt-ink-900);
}

.btw-article-author__role {
  font-size: var(--bt-fs-11);
  color: var(--bt-ink-500);
}

/* =========================================
   Single Blog — TOC Sidebar
   ========================================= */

.btw-article-toc {
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-md);
  padding: 22px; /* 22px: between --bt-space-5(20) and --bt-space-6(24) — TOC padding */
  position: sticky;
  top: 88px; /* 88px: site header height + margin — sticky offset */
}

.btw-article-toc__label {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-11);
  text-transform: uppercase;
  letter-spacing: 0.08em; /* 0.08em: "Contents" label tracking — design spec */
  color: var(--bt-ink-500);
  font-weight: var(--bt-fw-semibold);
  margin-bottom: 14px; /* 14px: between --bt-space-3(12) and --bt-space-4(16) — label-list gap */
}

.btw-article-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 10px: between --bt-space-2(8) and --bt-space-3(12) — TOC item gap */
}

.btw-article-toc__item a {
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-600);
  text-decoration: none;
  line-height: 1.55; /* 1.55: between --bt-lh-snug(1.45) and --bt-lh-normal(1.7) — TOC item */
  padding-left: 10px; /* 10px: TOC active border indent — design spec */
  display: block;
  border-left: 2px solid transparent;
  transition: all var(--bt-dur-fast) var(--bt-ease-out);
}

.btw-article-toc__item a:hover,
.btw-article-toc__item--active a {
  color: var(--bt-primary);
  font-weight: var(--bt-fw-semibold);
  border-left-color: var(--bt-primary);
}

/* =========================================
   Single Blog — Related Posts
   ========================================= */

.btw-related-posts {
  padding: var(--bt-space-12) 0 var(--bt-space-16);
  background: var(--bt-surface-page);
}

.btw-related-posts__head {
  margin-bottom: var(--bt-space-5);
}

.btw-related-posts__eyebrow {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  font-weight: var(--bt-fw-medium);
  margin: 0 0 var(--bt-space-1);
}

.btw-related-posts__title {
  font-size: 22px; /* 22px: between --bt-fs-18(18) and --bt-fs-24(24) — related heading */
  color: var(--bt-ink-900);
  margin: 0;
}

.btw-related-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px; /* 18px: between --bt-space-4(16) and --bt-space-5(20) — related card gap */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =========================================
   Blog Pages — Responsive (≤ 1024px)
   ========================================= */

@media (max-width: 1024px) {
  .btw-blog-archive__grid { grid-template-columns: repeat(2, 1fr); }

  .btw-article-layout {
    grid-template-columns: 1fr;
    gap: var(--bt-space-8);
  }

  .btw-article-toc { position: static; }

  .btw-related-posts__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================
   Blog Pages — Responsive (≤ 768px)
   ========================================= */

@media (max-width: 768px) {
  .btw-blog-archive {
    padding: var(--bt-space-12) 0 var(--bt-space-16);
  }

  .btw-blog-archive__grid { grid-template-columns: 1fr; }

  .btw-post-card--featured { flex-direction: column; }

  .btw-post-card--featured .btw-post-card__thumb {
    flex: none;
    aspect-ratio: 16 / 9;
  }

  .btw-post-card--featured .btw-post-card__body {
    padding: var(--bt-space-4);
  }

  .btw-post-card--featured .btw-post-card__title {
    font-size: var(--bt-fs-18);
  }

  .btw-article-header {
    padding-top: var(--bt-space-8);
  }

  .btw-article-header__inner { text-align: left; }

  .btw-article-header__meta { justify-content: flex-start; }

  .btw-article-header__title { font-size: var(--bt-fs-24); }

  .btw-article-layout {
    padding: var(--bt-space-8) var(--bt-gutter) var(--bt-space-12);
  }

  .btw-related-posts__grid { grid-template-columns: 1fr; }
}

/* =========================================
   Contact — shared layout
   ========================================= */

.btw-contact-wrap {
  max-width: 760px;
  margin-inline: auto;
  padding: var(--bt-space-16) var(--bt-gutter) var(--bt-space-24);
}

/* Step indicator */
.btw-contact-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0 0 var(--bt-space-12);
  padding: 0;
  flex-wrap: wrap;
}
.btw-contact-steps__item {
  display: flex;
  align-items: center;
  gap: 10px; /* 10px: between --bt-space-2(8) and --bt-space-3(12) by design */
}
.btw-contact-steps__divider {
  width: 56px;
  height: 1px;
  background: var(--bt-ink-200);
  margin: 0 var(--bt-space-4);
  list-style: none;
}
.btw-contact-steps__circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  color: var(--bt-ink-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bt-fs-13);
  font-weight: var(--bt-fw-bold);
  font-family: var(--bt-font-en);
  flex-shrink: 0;
}
.btw-contact-steps__circle--done {
  background: var(--bt-blue-100);
  border-color: transparent;
  color: var(--bt-primary);
}
.btw-contact-steps__item--active .btw-contact-steps__circle {
  background: var(--bt-primary);
  border-color: transparent;
  color: var(--bt-white);
}
.btw-contact-steps__label {
  font-size: var(--bt-fs-13);
  font-weight: var(--bt-fw-medium);
  color: var(--bt-ink-400);
}
.btw-contact-steps__item--active .btw-contact-steps__label,
.btw-contact-steps__item--done .btw-contact-steps__label {
  color: var(--bt-ink-900);
}
.btw-contact-steps__item--active .btw-contact-steps__label {
  font-weight: var(--bt-fw-semibold);
}

/* =========================================
   Contact — input form
   ========================================= */

.btw-contact-form-card {
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-lg);
  padding: var(--bt-space-10) var(--bt-space-12);
  box-shadow: var(--bt-shadow-sm);
}
.btw-contact-form-card__head { margin-bottom: var(--bt-space-8); }
.btw-contact-form-card__title {
  font-size: var(--bt-fs-22);
  color: var(--bt-ink-900);
  margin-bottom: var(--bt-space-2);
}
.btw-contact-form-card__note {
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-600);
  line-height: var(--bt-lh-relaxed);
}
.btw-contact-required-mark {
  color: var(--bt-danger);
  font-weight: var(--bt-fw-semibold);
  margin-right: 2px; /* 2px: nudge between mark and text */
}

.btw-contact-field { margin-bottom: var(--bt-space-6); }

.btw-contact-label {
  display: block;
  font-size: var(--bt-fs-14);
  font-weight: var(--bt-fw-semibold);
  color: var(--bt-ink-900);
  margin-bottom: var(--bt-space-2);
}

.btw-contact-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--bt-fw-semibold);
  padding: 2px 6px; /* 2px 6px: badge intrinsic sizing below the 4px spacing scale by design */
  border-radius: var(--bt-r-xs);
  margin-left: var(--bt-space-2);
  vertical-align: middle;
  letter-spacing: 0.04em;
}
.btw-contact-badge--required {
  background: var(--bt-danger);
  color: var(--bt-white);
}
.btw-contact-badge--optional {
  background: var(--bt-ink-100);
  color: var(--bt-ink-500);
  border: 1px solid var(--bt-ink-200);
}

.btw-contact-input {
  width: 100%;
  padding: 12px 14px; /* 12px/14px: between tokens for comfortable tap target */
  font-size: var(--bt-fs-15);
  font-family: inherit;
  color: var(--bt-ink-900);
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-sm);
  outline: none;
  transition:
    border-color var(--bt-dur-fast) var(--bt-ease-out),
    box-shadow   var(--bt-dur-fast) var(--bt-ease-out);
  line-height: var(--bt-lh-normal);
}
.btw-contact-input:focus {
  border-color: var(--bt-primary);
  box-shadow: var(--bt-shadow-focus);
}
.btw-contact-input--textarea {
  resize: vertical;
  min-height: 180px;
}
.btw-contact-input.is-error { border-color: var(--bt-danger); }

.btw-contact-help {
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  line-height: var(--bt-lh-relaxed);
  margin-top: var(--bt-space-1);
}
.btw-contact-error {
  font-size: var(--bt-fs-12);
  color: var(--bt-danger);
  font-weight: var(--bt-fw-medium);
  margin-top: var(--bt-space-1);
  display: flex;
  align-items: center;
  gap: var(--bt-space-1);
  min-height: 1em;
}
.btw-contact-error:empty { display: none; }
.btw-contact-error--indent { margin-left: 30px; }

.btw-contact-field__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--bt-space-1);
  gap: var(--bt-space-3);
}
.btw-contact-charcount {
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  font-family: var(--bt-font-mono);
  white-space: nowrap;
  flex-shrink: 0;
}

.btw-contact-consent {
  background: var(--bt-ink-50);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-md);
  padding: 20px 22px; /* 20px/22px: between space-4(16) and space-6(24) by design */
  margin-bottom: var(--bt-space-7);
}
.btw-contact-consent__label {
  display: flex;
  align-items: flex-start;
  gap: var(--bt-space-3);
  cursor: pointer;
}
.btw-contact-consent__checkbox {
  width: 18px;
  height: 18px;
  margin-top: 2px; /* 2px: align checkbox to cap-height of adjacent text */
  flex-shrink: 0;
  accent-color: var(--bt-primary);
  cursor: pointer;
}
.btw-contact-consent__heading {
  font-size: var(--bt-fs-14);
  font-weight: var(--bt-fw-semibold);
  color: var(--bt-ink-900);
  margin-bottom: var(--bt-space-1);
}
.btw-contact-consent__text {
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-600);
  line-height: 1.7;
}

.btw-contact-turnstile { margin-bottom: var(--bt-space-8); }
.btw-contact-turnstile > .btw-contact-label { margin-bottom: 10px; /* 10px: design spec overrides general 8px for Turnstile label gap */ }
.btw-contact-turnstile__placeholder {
  padding: var(--bt-space-4);
  background: var(--bt-ink-50);
  border: 1px dashed var(--bt-ink-300);
  border-radius: var(--bt-r-sm);
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-600);
}

.btw-contact-actions {
  display: flex;
  justify-content: center;
  padding-top: var(--bt-space-2);
}

.btw-contact-alt {
  margin-top: var(--bt-space-8);
  text-align: center;
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-500);
  line-height: var(--bt-lh-relaxed);
}

/* =========================================
   Contact — confirm page
   ========================================= */

.btw-contact-confirm-card {
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-lg);
  box-shadow: var(--bt-shadow-sm);
  overflow: hidden;
}
.btw-contact-confirm-card__head {
  padding: var(--bt-space-10) var(--bt-space-12) var(--bt-space-7);
}
.btw-contact-confirm-card__title {
  font-size: var(--bt-fs-22);
  color: var(--bt-ink-900);
  margin-bottom: var(--bt-space-2);
}
.btw-contact-confirm-card__note {
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-600);
  line-height: var(--bt-lh-relaxed);
}

.btw-contact-confirm-table {
  border-top: 1px solid var(--bt-ink-200);
  margin: 0;
}
.btw-contact-confirm-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  padding: var(--bt-space-5) var(--bt-space-6);
  border-bottom: 1px solid var(--bt-ink-100);
  gap: var(--bt-space-6);
  align-items: start;
}
.btw-contact-confirm-row__label {
  font-size: var(--bt-fs-13);
  font-weight: var(--bt-fw-semibold);
  color: var(--bt-ink-700);
}
.btw-contact-confirm-row__value {
  font-size: var(--bt-fs-15);
  color: var(--bt-ink-900);
  line-height: var(--bt-lh-relaxed);
  word-break: break-word;
  margin: 0;
}
.btw-contact-confirm-row__value--mono { font-family: var(--bt-font-mono); }
.btw-contact-confirm-row__value--pre { white-space: pre-wrap; }
.btw-contact-confirm-empty {
  color: var(--bt-ink-400);
  font-style: italic;
}

.btw-contact-confirm-actions form {
  display: inline-flex; /* override block to let <form> size to its button content within flex container */
}

.btw-contact-confirm-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--bt-space-3);
  flex-wrap: wrap;
  padding: var(--bt-space-7) var(--bt-space-12) var(--bt-space-10);
  background: var(--bt-ink-50);
  border-top: 1px solid var(--bt-ink-100);
}

/* =========================================
   Contact — thanks page
   ========================================= */

.btw-contact-thanks-card {
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-lg);
  box-shadow: var(--bt-shadow-sm);
  padding: var(--bt-space-16) var(--bt-space-12);
  text-align: center;
}
.btw-contact-thanks-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bt-blue-50);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--bt-space-7);
}
.btw-contact-thanks-icon > svg {
  display: block;
  width: 56px;
  height: 56px;
  padding: 14px; /* 14px: center icon inside the inner circle by design */
  border-radius: 50%;
  background: var(--bt-primary);
  stroke: var(--bt-white);
}
.btw-contact-thanks-eyebrow {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-12);
  font-weight: var(--bt-fw-semibold);
  color: var(--bt-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--bt-space-3);
}
.btw-contact-thanks-title {
  font-size: var(--bt-fs-28);
  color: var(--bt-ink-900);
  letter-spacing: -0.01em;
  margin-bottom: var(--bt-space-4);
  line-height: var(--bt-lh-tight);
}
.btw-contact-thanks-body {
  font-size: var(--bt-fs-14);
  color: var(--bt-ink-600);
  line-height: var(--bt-lh-relaxed);
  max-width: 480px;
  margin: 0 auto var(--bt-space-8);
}
.btw-contact-thanks-note {
  background: var(--bt-ink-50);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-md);
  padding: 20px 24px; /* 20px/24px: between space-4(16) and space-6(24) by design */
  max-width: 480px;
  margin: 0 auto var(--bt-space-9);
  text-align: left;
  display: flex;
  align-items: flex-start;
  gap: var(--bt-space-3);
}
.btw-contact-thanks-note__icon {
  color: var(--bt-warning);
  flex-shrink: 0;
  margin-top: 2px; /* 2px: align icon to cap-height */
}
.btw-contact-thanks-note__text {
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-700);
  line-height: 1.75;
}
.btw-contact-thanks-actions {
  display: flex;
  justify-content: center;
  gap: var(--bt-space-3);
  flex-wrap: wrap;
}

/* =========================================
   Legal pages (page.php)
   ========================================= */

.btw-legal-layout {
  max-width: var(--bt-container-max);
  margin-inline: auto;
  padding: var(--bt-space-16) var(--bt-gutter) var(--bt-space-24);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--bt-space-12);
  align-items: start;
}

.btw-legal-toc {
  position: sticky;
  top: 96px; /* 96px: clear fixed header (60px) with comfortable breathing room */
}
.btw-legal-toc__label {
  font-family: var(--bt-font-en);
  font-size: 11px;
  color: var(--bt-ink-500);
  font-weight: var(--bt-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px; /* 14px: between space-3(12) and space-4(16) by design */
}
.btw-legal-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.btw-legal-toc__item { display: block; }
.btw-legal-toc__link {
  display: block;
  font-size: var(--bt-fs-13);
  color: var(--bt-ink-600);
  font-weight: var(--bt-fw-regular);
  padding: var(--bt-space-2) var(--bt-space-3);
  border-left: 2px solid var(--bt-ink-200);
  text-decoration: none;
  line-height: var(--bt-lh-normal);
  transition:
    color          var(--bt-dur-fast) var(--bt-ease-out),
    border-color   var(--bt-dur-fast) var(--bt-ease-out);
}
.btw-legal-toc__link:hover {
  color: var(--bt-ink-900);
  border-left-color: var(--bt-ink-400);
}
.btw-legal-toc__link.is-active {
  color: var(--bt-primary);
  font-weight: var(--bt-fw-semibold);
  border-left-color: var(--bt-primary);
}
.btw-legal-toc__num {
  display: inline-block;
  min-width: 22px;
  font-family: var(--bt-font-en);
  color: var(--bt-ink-400);
}
.btw-legal-toc__link.is-active .btw-legal-toc__num { color: var(--bt-primary); }

.btw-legal-body {
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-lg);
  box-shadow: var(--bt-shadow-sm);
  padding: var(--bt-space-12);
  max-width: 820px;
}

/* WordPress entry-content rhythm reset for legal pages */
.btw-legal-content p { margin: 0 0 14px; /* 14px: comfortable paragraph spacing in dense legal prose */ }
.btw-legal-content p:last-child { margin-bottom: 0; }
.btw-legal-content ul,
.btw-legal-content ol { margin: var(--bt-space-2) 0 var(--bt-space-4); padding-left: 22px; /* 22px: standard list indent */ }
.btw-legal-content li { margin-bottom: var(--bt-space-1); line-height: 1.85; }
.btw-legal-content strong { color: var(--bt-ink-900); font-weight: var(--bt-fw-semibold); }

/* Headings inside legal content become section anchors */
.btw-legal-content h2 {
  font-size: var(--bt-fs-20);
  color: var(--bt-ink-900);
  margin: var(--bt-space-12) 0 var(--bt-space-4);
  scroll-margin-top: 100px; /* 100px: clear header + some breathing room for anchor scroll */
  display: flex;
  align-items: baseline;
  gap: var(--bt-space-3);
  letter-spacing: -0.005em;
}
.btw-legal-content h2:first-child { margin-top: 0; }
.btw-legal-content h2 .btw-legal-section-num {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-13);
  color: var(--bt-primary);
  font-weight: var(--bt-fw-bold);
}

/* Updated-at badge */
.btw-legal-updated {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-space-2);
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  font-family: var(--bt-font-mono);
  margin-bottom: var(--bt-space-7);
  padding: 4px 10px; /* 4px/10px: compact metadata chip by design */
  background: var(--bt-ink-50);
  border-radius: var(--bt-r-xs);
}

/* =========================================
   404 Page
   ========================================= */

.btw-404-hero {
  background: var(--bt-surface-hero);
  border-bottom: 1px solid var(--bt-ink-200);
  position: relative;
  overflow: hidden;
}
.btw-404-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--bt-ink-200) 1px, transparent 1px),
    linear-gradient(90deg, var(--bt-ink-200) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 70%);
  pointer-events: none;
}
.btw-404-hero__inner {
  position: relative;
  max-width: var(--bt-container-max);
  margin-inline: auto;
  padding: 96px var(--bt-gutter) 80px; /* 96px/80px: generous hero vertical rhythm by design */
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--bt-space-16);
  align-items: center;
}
.btw-404-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px; /* 10px: between space-2(8) and space-3(12) by design */
  padding: 6px 12px; /* 6px/12px: compact pill badge by design */
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-full);
  font-size: var(--bt-fs-12);
  font-family: var(--bt-font-mono);
  color: var(--bt-ink-600);
  margin-bottom: var(--bt-space-6);
  box-shadow: var(--bt-shadow-xs);
}
.btw-404-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bt-warning);
  display: block;
}
.btw-404-hero__heading {
  font-size: var(--bt-fs-40);
  line-height: 1.15;
  color: var(--bt-ink-900);
  letter-spacing: -0.02em;
  margin-bottom: var(--bt-space-5);
}
.btw-404-hero__code {
  font-family: var(--bt-font-en);
  font-weight: var(--bt-fw-bold);
  color: var(--bt-primary);
  font-size: 88px; /* 88px: oversized display numeral by design */
  line-height: 1;
  display: block;
  margin-bottom: var(--bt-space-2);
  letter-spacing: -0.03em;
}
.btw-404-hero__body {
  font-size: var(--bt-fs-15);
  color: var(--bt-ink-600);
  line-height: var(--bt-lh-relaxed);
  margin-bottom: var(--bt-space-9);
  max-width: 540px;
}
.btw-404-hero__actions {
  display: flex;
  gap: var(--bt-space-3);
  flex-wrap: wrap;
}
.btw-404-hero__mark {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.btw-404-hero__mark-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(58, 101, 176, 0.10) 0%, rgba(58, 101, 176, 0) 70%); /* brand glow — intentional non-token value */
  filter: blur(4px);
}
.btw-404-hero__mark-wrap {
  display: inline-flex;
  padding: var(--bt-space-6);
}

@keyframes bt-drift {
  0%   { transform: translate(0, 0) rotate(-4deg); }
  50%  { transform: translate(0, -10px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(-4deg); }
}
.btw-404-mark { animation: bt-drift 6s var(--bt-ease-in-out) infinite; }

.btw-404-suggested {
  padding: var(--bt-space-20) 0;
  background: var(--bt-surface-page);
}
.btw-404-suggested__eyebrow {
  font-family: var(--bt-font-en);
  font-size: var(--bt-fs-12);
  color: var(--bt-primary);
  font-weight: var(--bt-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--bt-space-3);
}
.btw-404-suggested__title {
  font-size: var(--bt-fs-24);
  color: var(--bt-ink-900);
  margin-bottom: var(--bt-space-8);
  letter-spacing: -0.005em;
}
.btw-404-suggested__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--bt-space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.btw-404-suggested__card {
  display: block;
  background: var(--bt-white);
  border: 1px solid var(--bt-ink-200);
  border-radius: var(--bt-r-md);
  padding: 20px 22px; /* 20px/22px: between space-4(16) and space-6(24) by design */
  text-decoration: none;
  transition:
    border-color var(--bt-dur-base) var(--bt-ease-out),
    box-shadow   var(--bt-dur-base) var(--bt-ease-out),
    transform    var(--bt-dur-base) var(--bt-ease-out);
}
.btw-404-suggested__card:hover {
  border-color: var(--bt-primary);
  box-shadow: var(--bt-shadow-md);
  transform: translateY(-2px);
}
.btw-404-suggested__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bt-space-3);
  margin-bottom: var(--bt-space-1);
}
.btw-404-suggested__card-top svg { color: var(--bt-primary); flex-shrink: 0; }
.btw-404-suggested__card-label {
  font-size: var(--bt-fs-15);
  font-weight: var(--bt-fw-semibold);
  color: var(--bt-ink-900);
}
.btw-404-suggested__card-desc {
  font-size: var(--bt-fs-12);
  color: var(--bt-ink-500);
  line-height: 1.65;
}

/* =========================================
   Responsive — Contact / Legal / 404
   ========================================= */

@media (max-width: 768px) {
  .btw-contact-form-card { padding: var(--bt-space-6) var(--bt-space-5); }
  .btw-contact-confirm-card__head { padding: var(--bt-space-6) var(--bt-space-5) var(--bt-space-4); }
  .btw-contact-confirm-row { grid-template-columns: 1fr; gap: var(--bt-space-1); }
  .btw-contact-confirm-actions { padding: var(--bt-space-5) var(--bt-space-5) var(--bt-space-6); flex-direction: column; }
  .btw-contact-thanks-card { padding: var(--bt-space-10) var(--bt-space-5); }
  .btw-contact-steps__divider { width: 32px; }

  .btw-legal-layout {
    grid-template-columns: 1fr;
    padding-top: var(--bt-space-8);
  }
  .btw-legal-toc {
    position: static;
    border-bottom: 1px solid var(--bt-ink-200);
    padding-bottom: var(--bt-space-4);
    margin-bottom: var(--bt-space-4);
  }
  .btw-legal-body { padding: var(--bt-space-6) var(--bt-space-5); }

  .btw-404-hero__inner {
    grid-template-columns: 1fr;
    padding-top: var(--bt-space-16);
    padding-bottom: var(--bt-space-12);
    gap: var(--bt-space-10);
  }
  .btw-404-hero__mark { order: -1; }
  .btw-404-hero__mark-wrap { padding: var(--bt-space-3); }
  .btw-404-hero__code { font-size: 64px; /* 64px: scaled down for mobile by design */ }
  .btw-404-hero__heading { font-size: var(--bt-fs-28); }
}