/* ═══════════════════════════════════════════
   uxestele.com — Design Tokens & Base Styles
   ═══════════════════════════════════════════ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* --- Tokens: Light (default) --- */
:root {
  --ink: #1C2A35;
  --ink-soft: #4A5B68;
  --muted: #7A8B96;
  --rule: #D2D8DD;
  --card: #EEF0F3;
  --surface: #F5F6F8;
  --ground: #FFFFFF;
  --primary: #2B5F71;
  --primary-soft: #3A7D93;
  --primary-bg: #E8F1F4;
  --accent: #D4663A;
  --accent-hover: #BF5530;
  --accent-bg: #FDF0EB;
  --available: #2E9E63;
  --available-bg: #E6F5EC;
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --max-w: 1180px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --radius: 6px;
  --radius-lg: 12px;
}

/* --- Dark theme: system preference --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E4E8EB;
    --ink-soft: #B0BCC5;
    --muted: #7E8E98;
    --rule: #2E3D47;
    --card: #1E2D37;
    --surface: #152029;
    --ground: #0F1920;
    --primary: #5EB5CF;
    --primary-soft: #79C8DF;
    --primary-bg: #152D36;
    --accent: #E8845E;
    --accent-hover: #F09570;
    --accent-bg: #2D1F18;
    --available: #4FC98A;
    --available-bg: #12291D;
  }
}

/* --- Dark theme: explicit toggle --- */
:root[data-theme="dark"] {
  --ink: #E4E8EB;
  --ink-soft: #B0BCC5;
  --muted: #7E8E98;
  --rule: #2E3D47;
  --card: #1E2D37;
  --surface: #152029;
  --ground: #0F1920;
  --primary: #5EB5CF;
  --primary-soft: #79C8DF;
  --primary-bg: #152D36;
  --accent: #E8845E;
  --accent-hover: #F09570;
  --accent-bg: #2D1F18;
  --available: #4FC98A;
  --available-bg: #12291D;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--ground);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { max-width: 65ch; }

/* --- Utilities --- */
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--space-md); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
}

.section { padding: var(--space-xl) 0; }
.section--alt { background: var(--surface); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-hover); color: #fff; }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--rule);
}
.btn--outline:hover { border-color: var(--primary); color: var(--primary); }

/* --- Navigation --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(8px);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.nav__logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.nav__logo span { color: var(--accent); }
.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}
.nav__links a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav__links a:hover { color: var(--accent); }
.nav__links .active { color: var(--primary); }
.nav__cta {
  font-size: 0.85rem;
  padding: 0.6rem 1.4rem;
}

/* Dropdown */
.nav__dropdown { position: relative; }
.nav__dropdown-toggle {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.nav__dropdown-toggle:hover { color: var(--accent); }
.nav__dropdown-toggle svg { width: 12px; height: 12px; transition: transform 0.2s; }
.nav__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: -12px;
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 0.5rem;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
/* Invisible bridge across the 12px gap so the menu stays open while the
   pointer travels from the toggle down into it. */
.nav__dropdown-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu { display: block; }
.nav__dropdown:hover .nav__dropdown-toggle svg { transform: rotate(180deg); }
.nav__dropdown-menu a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav__dropdown-menu a:hover { background: var(--surface); color: var(--accent); }

/* Mobile nav */
.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--ink);
}
.nav__toggle svg { width: 24px; height: 24px; }

@media (max-width: 768px) {
  .nav__toggle { display: block; }
  .nav__links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    padding: var(--space-sm) var(--space-md);
    gap: 0;
  }
  .nav__links.open { display: flex; }
  .nav__links li { width: 100%; }
  .nav__links a, .nav__dropdown-toggle { padding: 0.8rem 0; display: block; width: 100%; }
  .nav__dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding-left: 1rem;
  }
  .nav__dropdown-menu::before { display: none; }
  .nav__dropdown:hover .nav__dropdown-menu { display: none; }
  .nav__dropdown.open .nav__dropdown-menu { display: block; }
}

/* --- Hero --- */
.hero {
  padding: var(--space-xl) 0 var(--space-lg);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  background: var(--available-bg);
  color: var(--available);
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.hero__badge::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--available);
  border-radius: 50%;
  animation: available-blink 1.6s ease-in-out infinite;
}
@keyframes available-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--available) 55%, transparent); }
  50%      { opacity: 0.35; box-shadow: 0 0 0 4px color-mix(in srgb, var(--available) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__badge::before { animation: none; }
}
.hero h1 { margin-bottom: var(--space-sm); }
.hero__sub {
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-md);
  max-width: 50ch;
}
.hero__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-md); }
  .hero__visual { order: -1; }
  .hero { padding: var(--space-lg) 0 var(--space-md); }
}

/* --- Stats --- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stat__number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* --- Service Cards --- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.service-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  color: var(--ink);
}
.service-card__icon {
  width: 48px;
  height: 48px;
  background: var(--primary-bg);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-sm);
  color: var(--primary);
}
.service-card h3 { margin-bottom: 0.5rem; }
.service-card p { color: var(--ink-soft); font-size: 0.92rem; flex: 1; }
.service-card__link {
  margin-top: var(--space-sm);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* --- Testimonials --- */
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.testimonial-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.testimonial-card__quote {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
  font-style: italic;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary);
  flex-shrink: 0;
}
.testimonial-card__name {
  font-weight: 600;
  font-size: 0.9rem;
}
.testimonial-card__role {
  font-size: 0.8rem;
  color: var(--muted);
}

/* --- CTA Banner --- */
.cta-banner {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  margin: var(--space-lg) 0;
}
.cta-banner h2 { color: #fff; margin-bottom: 0.5rem; }
.cta-banner p { color: rgba(255,255,255,0.85); margin: 0 auto var(--space-md); }
.cta-banner .btn--primary { background: var(--accent); }
.cta-banner .btn--primary:hover { background: var(--accent-hover); }

/* --- Footer --- */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding: var(--space-lg) 0 var(--space-md);
}
.footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-lg);
}
.footer__brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}
.footer__brand span { color: var(--accent); }
.footer__desc { color: var(--muted); font-size: 0.88rem; max-width: 30ch; }
.footer__col h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 0.5rem; }
.footer__col a { font-size: 0.9rem; color: var(--ink-soft); }
.footer__col a:hover { color: var(--accent); }
.footer__bottom {
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--muted);
}
.footer__social { display: flex; gap: 1rem; }
.footer__social a { color: var(--muted); }
.footer__social a:hover { color: var(--accent); }

@media (max-width: 768px) {
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .footer__bottom { flex-direction: column; gap: 0.5rem; }
}

/* --- Page Hero (inner pages) --- */
.page-hero {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--rule);
}
.page-hero h1 { margin-bottom: 0.5rem; }
.page-hero__sub { font-size: 1.1rem; color: var(--ink-soft); max-width: 55ch; }

/* --- Sub-service list --- */
.subservices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.subservice {
  padding: var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s;
}
.subservice:hover { border-color: var(--primary); }
.subservice h3 { margin-bottom: 0.5rem; }
.subservice p { color: var(--ink-soft); font-size: 0.92rem; }

/* --- Pricing Cards --- */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.pricing-card {
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  position: relative;
}
.pricing-card--featured {
  border-color: var(--primary);
  background: var(--primary-bg);
}
.pricing-card__badge {
  position: absolute;
  top: -12px;
  left: var(--space-md);
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
}
.pricing-card h3 { margin-bottom: 0.25rem; }
.pricing-card__price {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0.5rem 0;
}
.pricing-card__price span { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.pricing-card__rate {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin: -0.25rem 0 var(--space-sm);
  font-variant-numeric: tabular-nums;
}
.pricing-card__desc { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: var(--space-sm); }
.pricing-card__features {
  list-style: none;
  margin-bottom: var(--space-md);
  flex: 1;
}
.pricing-card__features li {
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding: 0.4rem 0;
  padding-left: 1.4rem;
  position: relative;
}
.pricing-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}
.pricing-card .btn { width: 100%; justify-content: center; }

/* --- Case Studies Grid --- */
.cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.case-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
}
.case-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  color: var(--ink);
}
.case-card__img {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
}
.case-card__body { padding: 1.25rem; }
.case-card__tag {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 0.4rem;
}
.case-card h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.case-card p { font-size: 0.88rem; color: var(--ink-soft); }

/* --- Blog Grid --- */
.blog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.blog-card { text-decoration: none; color: var(--ink); }
.blog-card:hover h3 { color: var(--accent); }
.blog-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--card);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-sm);
}
.blog-card__meta { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.3rem; }
.blog-card h3 { font-size: 1.1rem; transition: color 0.2s; margin-bottom: 0.4rem; }
.blog-card p { font-size: 0.88rem; color: var(--ink-soft); }

/* --- Contact Form --- */
.contact__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}
.form-group { margin-bottom: var(--space-sm); }
.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.75rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--ground);
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}
.form-group textarea { resize: vertical; min-height: 120px; }

.contact__info h3 { margin-bottom: var(--space-sm); }
.contact__info p { color: var(--ink-soft); font-size: 0.92rem; margin-bottom: var(--space-md); }
/* The Google scheduling widget renders its own light-themed UI inside the frame
   and cannot be restyled from here, so it gets a clipped, rounded shell on a
   white ground rather than the site's padded card — that way the widget's own
   background stops at the rounded corners instead of showing square edges over
   them, and it reads as deliberate on the dark theme too. */
.contact__scheduler {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #FFFFFF;
  line-height: 0;
}
.contact__scheduler iframe {
  display: block;
  width: 100%;
  border: 0;
  /* Heights are pinned to the widget's own internal breakpoint (it reflows at
     640px of frame width) so the whole scheduler is visible without a nested
     scrollbar inside the frame. */
  height: 760px;
}
.contact__lede {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: var(--space-xs) 0 var(--space-md);
}

@media (max-width: 700px) {
  /* Below this the frame is narrower than 640px, so the widget switches to its
     stacked layout and needs roughly twice the height. */
  .contact__scheduler iframe { height: 1500px; }
}

@media (max-width: 768px) {
  .contact__layout { grid-template-columns: 1fr; }
}

/* --- Process steps (service pages) --- */
.process__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
  counter-reset: step;
}
.process__step {
  counter-increment: step;
  padding-top: var(--space-sm);
  border-top: 2px solid var(--rule);
}
.process__step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.process__step h4 { margin: 0.5rem 0 0.3rem; }
.process__step p { font-size: 0.88rem; color: var(--ink-soft); }

/* --- Photography & Brand Marks --- */

.about__portrait {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

.life__photo {
  width: 100%;
  height: auto;
  display: block;
  margin-top: var(--space-md);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}

/* The client band spans the full content width and is set off from the section
   above by a rule, so the marks read as their own register rather than as a
   ragged tail hanging off the copy column. */
.client-band {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}
.client-band__label {
  /* Overrides the global 65ch measure so the label centres on the full band. */
  max-width: none;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-align: center;
  margin-bottom: var(--space-sm);
}

/* Client marks are dark artwork on transparent backgrounds, so they sit on a
   fixed light plate to stay legible in both the light and dark themes. An
   equal-fraction grid (rather than content-width flex items) keeps every plate
   the same size, so no single mark dominates the row. */
.logo-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-sm);
}
.logo-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding: 0.7rem 1rem;
  background: #F2F3F5;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.logo-strip__item img {
  display: block;
  height: 26px;
  width: auto;
  max-width: 100%;
  opacity: 0.82;
  transition: opacity 0.2s ease;
}
.logo-strip__item:hover img { opacity: 1; }

/* Six across only holds while the plates stay wider than the marks; below that
   step down to counts that still divide the six evenly (3x2, then 2x3) so the
   band never ends on a short, lopsided row. */
@media (max-width: 960px) {
  .logo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .logo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.case-card__img--brand {
  background: #F2F3F5;
  padding: var(--space-md);
}
.case-card__img--brand img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.case-card:hover .case-card__img--brand img { opacity: 1; }

.case-card__nda {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
}


.about__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-lg);
  align-items: start;
}

@media (max-width: 768px) {
  .about__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .about__portrait { max-width: 320px; }
  .logo-strip__item { padding: 0.55rem 0.85rem; min-height: 62px; }
  .logo-strip__item img { height: 22px; }
  .case-card__img--brand { padding: var(--space-sm) var(--space-md); }
}

/* --- Brand mark ------------------------------------------------------------
   The UXE monogram is a raster tile (images/uxe-logo.png) rather than inline
   SVG, so its colours are baked into the artwork instead of being restyled per
   theme. The palette below is kept as the source of truth for the brand
   colours the artwork uses; only --brand-orange is still referenced by CSS. */
:root {
  --brand-orange: #FB7746;
  --brand-blue: #77AAC2;
  --brand-navy: #0D1622;
  --brand-cream: #F1EAE1;
}

/* The brand mark is artwork on a fixed brand-navy tile, so unlike the previous
   inline monogram it carries its own colours in both themes; only the wordmark
   beside it tracks the theme ink. The tile reads as a badge on the light theme
   and sits all but flush with the ground on the dark one. */
.uxe-mark {
  display: block;
  height: auto;
  flex: none;
  border-radius: 7px;
  transition: opacity 0.2s ease;
}

/* Whole-mark hover: the tile dims slightly and the wordmark beside it follows. */
.nav__logo:hover .uxe-mark,
.nav__logo:focus-visible .uxe-mark,
.footer__identity:hover .uxe-mark,
.footer__identity:focus-visible .uxe-mark { opacity: 0.82; }

.nav__logo:hover,
.nav__logo:focus-visible,
.nav__logo:hover span,
.nav__logo:focus-visible span,
.footer__identity:hover .footer__brand,
.footer__identity:focus-visible .footer__brand,
.footer__identity:hover .footer__brand span,
.footer__identity:focus-visible .footer__brand span { color: var(--brand-orange); }

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition: color 0.2s ease;
}
.nav__logo .uxe-mark { width: 52px; }
.nav__logo span { transition: color 0.2s ease; }

.footer__identity {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--space-sm);
}
.footer__identity .uxe-mark { width: 56px; }
.footer__brand { margin-bottom: 0; transition: color 0.2s ease; }
.footer__brand span { transition: color 0.2s ease; }

/* --- Homepage illustrations ------------------------------------------------
   Original brand-matched SVG artwork. Each file carries its own
   prefers-color-scheme rules, so it re-tints with the rest of the site. */
.hero__art {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
}

.why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-top: var(--space-md);
}
.why__copy p {
  color: var(--ink-soft);
  margin-top: var(--space-sm);
  font-size: 1.05rem;
  max-width: 58ch;
}
/* Butt the first line up against the top of the art card beside it. */
.why__copy p:first-child { margin-top: 0; }
.why__art {
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
}
.why__art img {
  display: block;
  width: 100%;
  height: auto;
}
.why__art figcaption {
  margin-top: var(--space-sm);
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.service-card__art {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}
.service-card__art img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.service-card:hover .service-card__art img { opacity: 1; }

@media (max-width: 768px) {
  .why__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .why__art { padding: var(--space-sm); }
  .nav__logo .uxe-mark { width: 46px; }
}

/* --- Market-position charts (coaching) -------------------------------------
   Two forms, both JS-free. The package chart is an emphasis form: a recessive
   market-range band carrying the context, one accent dot carrying the price.
   The benchmark chart is an ordinal ramp — coach levels are an ordered scale,
   so the tiers get one hue in monotone lightness steps (validated light and
   dark) with our own row in the accent so it reads as "you are here".
   Every value is printed as a direct label, so no value is hover-gated. */
:root {
  --tier-1: #6E9FAF;
  --tier-2: #45849A;
  --tier-3: #2B5F71;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tier-1: #3C7B90;
    --tier-2: #58A5BE;
    --tier-3: #8AD0E6;
  }
}
:root[data-theme="dark"] {
  --tier-1: #3C7B90;
  --tier-2: #58A5BE;
  --tier-3: #8AD0E6;
}

.chart-panel {
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-top: var(--space-md);
}
.chart-panel__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
}
.chart-panel__sub {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-top: 0.3rem;
  max-width: 62ch;
}

/* Package price vs market range */
.market { margin-top: var(--space-md); }
.market__row {
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
.market__row:first-child { border-top: 0; }
.market__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.market__name { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.market__name span { font-weight: 400; color: var(--muted); }
.market__price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
}
/* 10px of side padding so a dot parked at either end keeps its full ring. */
.market__track {
  position: relative;
  height: 22px;
  margin: 0.55rem 10px 0;
}
.market__band {
  position: absolute;
  top: 7px;
  height: 8px;
  border-radius: 4px;
  background: var(--muted);
}
.market__dot {
  position: absolute;
  top: 3px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--ground);
}
.market__ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin: 0.2rem 10px 0;
}
.market__caption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}
.market__caption strong { color: var(--ink); font-weight: 600; }

/* Per-session benchmarks: a real table whose middle column is a shared-axis
   range chart. Table layout does the column alignment, so the tfoot axis lines
   up with the bars for free. */
.bench__scroll { overflow-x: auto; margin-top: var(--space-md); }
.bench {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.bench__caption {
  caption-side: top;
  text-align: left;
  font-size: 0.8rem;
  color: var(--muted);
  padding-bottom: var(--space-sm);
}
.bench thead th {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-align: left;
  padding: 0 var(--space-sm) 0.6rem 0;
}
.bench tbody th {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
}
.bench tbody th,
.bench tbody td {
  border-top: 1px solid var(--rule);
  padding: 0.75rem var(--space-sm) 0.75rem 0;
  vertical-align: middle;
}
.bench tbody td:last-child,
.bench thead th:last-child { padding-right: 0; }
/* The bar column is the plot; give it the room. */
.bench tbody td:nth-child(2),
.bench thead th:nth-child(2) { width: 45%; }
.bench__pkg { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bench__pkg span { display: block; font-size: 0.78rem; color: var(--muted); }
.bench__bar {
  position: relative;
  display: block;
  height: 10px;
  background: var(--rule);
  border-radius: 5px;
}
.bench__fill {
  position: absolute;
  top: 0;
  height: 10px;
  border-radius: 5px;
  min-width: 6px;
}
.bench__fill--t1 { background: var(--tier-1); }
.bench__fill--t2 { background: var(--tier-2); }
.bench__fill--t3 { background: var(--tier-3); }
.bench__fill--ours { background: var(--accent); }
.bench__val {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.bench__row--ours th,
.bench__row--ours .bench__pkg { color: var(--accent); }
.bench__row--ours .bench__pkg span { color: var(--accent); opacity: 0.75; }
.bench__here {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: var(--accent-bg);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  vertical-align: 0.1em;
}
.bench tfoot td { padding: 0 var(--space-sm) 0 0; }
.bench__axis {
  position: relative;
  display: block;
  height: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bench__axis span { position: absolute; top: 0.3rem; transform: translateX(-50%); }
.bench__axis span:first-child { transform: none; }
.bench__axis span:last-child { transform: translateX(-100%); }

.chart-note {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: var(--space-sm);
  max-width: 78ch;
}

/* Per-session ladder */
.ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.ladder__item {
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-sm);
}
.ladder__label { font-size: 0.8rem; color: var(--muted); }
.ladder__value {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.15rem;
}
.ladder__value span { font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.ladder__item--best { border-color: var(--accent); }
.ladder__item--best .ladder__value { color: var(--accent); }

@media (max-width: 700px) {
  .chart-panel { padding: var(--space-sm); }
  .bench { font-size: 0.85rem; }
  .bench tbody th { white-space: normal; }
}

/* --- Article (blog post) --- */
.article__title { max-width: 24ch; }
.article__lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-top: 0.75rem;
}
.article__meta {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: var(--space-sm);
}
.article__body { max-width: 720px; }
.article__body p,
.article__body li { font-size: 1.02rem; line-height: 1.75; color: var(--ink-soft); }
.article__body p { margin-bottom: var(--space-sm); }
.article__body h2 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  color: var(--ink);
}
.article__body h3 {
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
  color: var(--ink);
}
.article__body strong { color: var(--ink); font-weight: 600; }
.article__body ul,
.article__body ol {
  margin: 0 0 var(--space-sm) 1.25rem;
  display: grid;
  gap: 0.5rem;
}
.article__body li { padding-left: 0.25rem; }
.article__body a { color: var(--primary); }
.article__rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-md) 0;
}
.article__bio {
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
}
.article__bio p { font-size: 0.92rem; margin-bottom: 0; }
.article__back { margin-top: var(--space-md); }
.article__back a {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.article__back a:hover { color: var(--accent); }