:root {
  --ink: #08090b;
  --paper: #f7f4ee;
  --line: rgba(255, 255, 255, .16);
  --dark-line: #d9d1c0;
  --muted: #625c52;
  --mint: #69f5d0;
  --violet: #9b7cff;
  --gold: #e6c35c;
  --blue: #86a8ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
  letter-spacing: 0;
}
a { color: inherit; text-decoration: none; }
.page { min-height: 100vh; overflow-x: hidden; }

.hero {
  position: relative;
  min-height: 92svh;
  background: #050608;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
#shift-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background: #050608;
}
.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5,6,8,.94) 0%, rgba(5,6,8,.72) 43%, rgba(5,6,8,.16) 100%), radial-gradient(circle at 75% 42%, rgba(105,245,208,.22), transparent 30%), radial-gradient(circle at 30% 85%, rgba(155,124,255,.18), transparent 32%);
}
.nav {
  width: min(1160px, calc(100% - 40px));
  height: 74px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 3;
}
.brand, .navlinks, .nav-cta { display: flex; align-items: center; }
.brand { gap: 9px; font-size: 18px; font-weight: 950; letter-spacing: .08em; }
.brand-mark {
  min-width: 76px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--mint), var(--blue));
  color: #05100d;
  font-size: 13px;
}
.navlinks { gap: 20px; color: rgba(255,255,255,.76); font-size: 14px; }
.navlinks a:hover { color: #fff; }
.nav-cta {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  background: var(--mint);
  color: #05100d;
  font-weight: 900;
}
.hero-inner {
  width: min(1160px, calc(100% - 40px));
  min-height: calc(92svh - 74px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 42px 0 78px;
  position: relative;
  z-index: 2;
}
.hero-copy { max-width: 790px; margin: 0 auto; text-align: center; }
.eyebrow, .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: rgba(255,255,255,.76);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
}
.eyebrow:before, .eyebrow:after, .kicker:before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--mint);
}
.kicker { color: #0d806c; }
.kicker:after { content: none; }
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 940px;
  margin: 0 auto;
  font-size: clamp(42px, 6.4vw, 88px);
  line-height: .94;
  letter-spacing: 0;
  text-wrap: balance;
}
.sub {
  margin: 22px auto 0;
  max-width: 690px;
  color: rgba(255,255,255,.84);
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.38;
}
.actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22);
  font-weight: 900;
}
.btn.primary { background: rgba(16,17,19,.58); color: #fff; }
.btn.secondary { background: rgba(255,255,255,.08); color: #fff; backdrop-filter: blur(12px); }
.hero-cta {
  position: relative;
  min-width: 292px;
  min-height: 58px;
  padding-left: 76px;
  border-radius: 999px;
  border-color: rgba(105,245,208,.36);
  box-shadow: 0 18px 46px rgba(0,0,0,.24), 0 0 0 1px rgba(105,245,208,.12), 0 0 34px rgba(155,124,255,.16);
  overflow: hidden;
  cursor: pointer;
}
.hero-cta:after {
  content: "";
  position: absolute;
  left: 58px;
  right: 13px;
  top: 50%;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(105,245,208,.42), rgba(134,168,255,.22), rgba(155,124,255,.18));
  transform: translateY(-50%);
  z-index: 0;
}
.hero-cta span { position: relative; z-index: 1; pointer-events: none; }
.hero-cta-orb {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 2;
  filter: drop-shadow(0 0 12px rgba(105,245,208,.55));
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.78), rgba(105,245,208,.38) 20%, rgba(134,168,255,.20) 48%, rgba(155,124,255,.16) 72%, transparent 100%);
}
.hero-thinking {
  width: min(780px, 100%);
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.think-card {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  background: rgba(16,17,19,.42);
  box-shadow: 0 18px 46px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  padding: 13px 14px;
  text-align: left;
}
.think-card:before {
  content: "";
  position: absolute;
  left: 13px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 5px rgba(105,245,208,.08), 0 0 18px rgba(105,245,208,.5);
}
.think-card:nth-child(2):before { background: var(--violet); box-shadow: 0 0 0 5px rgba(155,124,255,.08), 0 0 18px rgba(155,124,255,.5); }
.think-card:nth-child(3):before { background: var(--gold); box-shadow: 0 0 0 5px rgba(230,195,92,.08), 0 0 18px rgba(230,195,92,.45); }
.think-card b { display: block; padding-left: 18px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.58); }
.think-card span { display: block; margin-top: 9px; color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.32; }
.think-card.active { border-color: rgba(105,245,208,.36); background: rgba(16,17,19,.7); transform: translateY(-3px); }
.think-card.active span:after, .dynamic-line:after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 5px;
  border-right: 2px solid var(--mint);
  vertical-align: -2px;
  animation: caret .9s steps(2,end) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.value {
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: #050608;
  color: #fff;
  padding: 58px 0;
  position: relative;
  overflow: hidden;
}
.value:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% -18%, rgba(105,245,208,.24), transparent 34%), radial-gradient(circle at 76% 32%, rgba(155,124,255,.20), transparent 32%);
}
.value-inner, .section-inner {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.section { padding: 86px 0; }
.section.dark { background: #101113; color: #fff; }
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: end;
  margin-bottom: 26px;
}
.section-head.centered {
  display: block;
  max-width: 960px;
  margin: 0 auto 20px;
  text-align: center;
}
.section-head.centered .kicker { color: rgba(105,245,208,.9); }
h2 {
  margin-bottom: 0;
  font-size: clamp(34px, 5.2vw, 68px);
  line-height: .96;
  text-wrap: balance;
}
.section-lead, .section-head p, .card p, .portfolio-card p, .contact-panel p {
  color: var(--muted);
  line-height: 1.5;
}
.dark .section-lead, .dark .card p, .value .section-head p { color: rgba(255,255,255,.74); }
.dynamic-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 16px !important;
  padding: 0 16px;
  border: 1px solid rgba(105,245,208,.22);
  border-radius: 999px;
  background: rgba(105,245,208,.07);
  color: rgba(255,255,255,.9) !important;
  font-size: 15px;
  font-weight: 850;
}
.value-map { position: relative; min-height: 440px; color: #fff; overflow: visible; isolation: isolate; }
.value-map:before {
  content: "";
  position: absolute;
  inset: -18px 0 8px;
  background: radial-gradient(circle at 50% 44%, rgba(105,245,208,.12), transparent 30%), radial-gradient(circle at 55% 50%, rgba(155,124,255,.10), transparent 35%);
  z-index: 0;
}
.value-viz {
  position: absolute;
  inset: -92px 0 -28px;
  width: 100%;
  height: calc(100% + 120px);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(105,245,208,.26)) drop-shadow(0 0 18px rgba(155,124,255,.18));
}
.value-steps {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  min-height: 336px;
  padding: 82px 0 30px;
  align-items: center;
}
.value-steps article {
  min-height: 220px;
  padding: 14px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(8,9,11,.56);
  box-shadow: 0 20px 54px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
}
.value-steps article:nth-child(2), .value-steps article:nth-child(4) { transform: translateY(28px); }
.value-steps .featured {
  transform: translateY(-20px);
  border-color: rgba(105,245,208,.46);
  box-shadow: 0 22px 62px rgba(0,0,0,.32), 0 0 0 1px rgba(105,245,208,.13), 0 0 48px rgba(105,245,208,.12);
}
.value-steps span, .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #101113;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  margin-bottom: 20px;
  box-shadow: 0 0 0 5px rgba(105,245,208,.12), 0 0 30px rgba(105,245,208,.26);
}
.value-steps .featured span {
  width: 52px;
  height: 52px;
  position: relative;
  overflow: hidden;
  background: transparent;
}
#core-orb { position: absolute; inset: -13px; width: 78px; height: 78px; }
.value-steps h3 { margin-bottom: 10px; font-size: 21px; }
.value-steps p { margin-bottom: 0; color: rgba(255,255,255,.72); line-height: 1.42; font-size: 14px; }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card {
  min-height: 0;
  padding: 22px;
  border: 1px solid var(--dark-line);
  border-radius: 8px;
  background: #fff;
  overflow: visible;
  position: relative;
}
.dark .card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.num {
  width: 54px;
  height: 54px;
  margin-bottom: 34px;
  background: #101113;
  position: relative;
  overflow: hidden;
}
.morph-num span { position: relative; z-index: 1; }
.mini-orb { position: absolute; inset: -11px; width: 76px; height: 76px; }
.card h3 { font-size: 26px; line-height: 1.04; margin-bottom: 12px; }
.card h4 { margin: 18px 0 0; font-size: 13px; line-height: 1.4; letter-spacing: .09em; text-transform: uppercase; color: #71695e; }
.card ul, .portfolio-card ul, .usecase-copy ul {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}
.card li, .portfolio-card li, .usecase-copy li {
  position: relative;
  padding-left: 18px;
  color: #423d36;
  line-height: 1.35;
}
.dark .card li, .usecase-copy li { color: rgba(255,255,255,.78); }
.card li:before, .portfolio-card li:before, .usecase-copy li:before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
}
.capability-note { max-width: 760px; margin: 22px 0 0; color: var(--muted); line-height: 1.55; }
.audience-section { background: #f7f4ee; }
.audience-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.audience-grid article { min-height: 230px; padding: 22px; border: 1px solid var(--dark-line); border-radius: 8px; background: #fff; }
.audience-grid article > span { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; margin-bottom: 28px; border-radius: 50%; background: #101113; color: var(--mint); font-size: 12px; font-weight: 900; }
.audience-grid h3 { margin-bottom: 10px; font-size: 21px; }
.audience-grid p { margin-bottom: 0; color: var(--muted); line-height: 1.5; }

.usecase-shell {
  position: relative;
  min-height: 510px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: #050608;
  overflow: hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.25);
}
#usecase-morph { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .95; }
.usecase-copy {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  padding: 42px;
}
.usecase-copy span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(105,245,208,.12);
  color: var(--mint);
  font-weight: 900;
  font-size: 12px;
  margin-bottom: 20px;
}
.usecase-copy h3 { font-size: clamp(32px, 4vw, 56px); line-height: .98; margin-bottom: 16px; }
.usecase-copy p { max-width: 520px; color: rgba(255,255,255,.72); line-height: 1.52; }
.usecase-rail {
  position: absolute;
  z-index: 2;
  left: 42px;
  right: 42px;
  bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.usecase-rail button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.74);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.usecase-rail button.active { background: var(--mint); color: #05100d; border-color: transparent; }

.work { background: #fff; }
.portfolio-grid {
  display: grid;
  grid-template-columns: 1.1fr .95fr .95fr;
  gap: 14px;
}
.portfolio-group-title { margin: 34px 0 14px; color: #514b42; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.client-work-title { margin-top: 42px; }
.client-portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portfolio-card {
  min-height: 260px;
  padding: 22px;
  border: 1px solid #d8d0c2;
  border-radius: 8px;
  background: #fbfaf7;
  overflow: hidden;
  position: relative;
}
.portfolio-card:after {
  content: "";
  position: absolute;
  right: -56px;
  top: -58px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(105,245,208,.22);
  box-shadow: 0 0 0 34px rgba(134,168,255,.05), 0 0 54px rgba(105,245,208,.15);
}
.hero-work {
  grid-row: span 2;
  background: #101113;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-work p { color: rgba(255,255,255,.72); }
.portfolio-card h3 { font-size: 30px; line-height: 1.02; margin-bottom: 12px; position: relative; z-index: 1; }
.portfolio-card p, .portfolio-card ul, .portfolio-card .tag { position: relative; z-index: 1; }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #101113;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 18px;
}
.hero-work .tag { background: var(--mint); color: #05100d; }
.contact { background: #f7f4ee; }
.contact-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 36px;
  border-radius: 8px;
  background: #101113;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.contact-panel:after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -120px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  border: 1px solid rgba(105,245,208,.24);
  box-shadow: 0 0 0 48px rgba(134,168,255,.055), 0 0 100px rgba(105,245,208,.18);
}
.contact-panel > * { position: relative; z-index: 1; }
.contact-panel .kicker { color: rgba(105,245,208,.9); }
.contact-panel h2 { max-width: 760px; }
.contact-panel p { max-width: 650px; color: rgba(255,255,255,.72); margin-bottom: 0; }
.contact-button {
  flex: 0 0 auto;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--mint);
  color: #05100d;
  font-weight: 950;
}

@media (max-width: 940px) {
  .navlinks { display: none; }
  .hero { min-height: 88svh; }
  .hero-inner { min-height: calc(88svh - 74px); }
  .hero-thinking, .card-grid, .portfolio-grid, .section-head, .client-portfolio-grid { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-steps { grid-template-columns: 1fr; padding-top: 24px; }
  .value-steps article, .value-steps article:nth-child(2), .value-steps article:nth-child(4), .value-steps .featured { transform: none; min-height: auto; }
  .value-viz { opacity: .42; }
  .usecase-copy { padding: 28px; }
  .usecase-rail { left: 28px; right: 28px; }
  .hero-work { grid-row: auto; }
  .contact-panel { display: block; padding: 28px; }
  .contact-button { width: 100%; margin-top: 20px; }
}

@media (max-width: 620px) {
  .nav, .hero-inner, .value-inner, .section-inner { width: min(100% - 28px, 1160px); }
  .nav-cta { display: none; }
  h1 { font-size: clamp(42px, 13vw, 64px); }
  .sub { font-size: 16px; }
  .hero-cta { min-width: 100%; padding-right: 14px; }
  .btn.secondary { width: 100%; }
  .hero-thinking { grid-template-columns: 1fr; }
  .audience-grid { grid-template-columns: 1fr; }
  .section, .value { padding: 56px 0; }
  .usecase-shell { min-height: 610px; }
  .usecase-copy { padding: 22px; }
  .usecase-rail { left: 22px; right: 22px; bottom: 20px; }
  .card, .portfolio-card { min-height: auto; }
}

/* Expanded service catalogue and source-board portfolio */
.services-grid { align-items: stretch; }
.services-grid .card { display: flex; flex-direction: column; }
.services-grid .card ul { margin-top: 12px; }
.portfolio-grid.owned-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.owned-grid .hero-work { grid-row: auto; }
.portfolio-filters { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 20px; }
.portfolio-filters button { min-height:42px; padding:0 15px; border:1px solid #d8d0c2; border-radius:999px; background:#fff; color:#37332d; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.portfolio-filters button:hover, .portfolio-filters button.active { background:#101113; border-color:#101113; color:#fff; }
.client-portfolio-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
.project-card { min-height:0; padding:0; overflow:hidden; }
.project-image { display:block; position:relative; background:#e9e5dc; aspect-ratio: 4 / 3; overflow:hidden; }
.project-image img { display:block; width:100%; height:100%; object-fit:contain; }
.project-image span { position:absolute; right:10px; bottom:10px; padding:8px 11px; border-radius:999px; background:rgba(5,6,8,.84); color:#fff; font-size:12px; font-weight:800; }
.project-copy { padding:18px 20px 20px; }
.project-copy .tag { min-height:26px; margin:0 0 12px; padding:0 9px; background:#e8e3d8; color:#37332d; font-size:11px; }
.project-copy h3 { margin:0 0 9px; font-size:23px; }
.project-services { margin:0; color:#625c52; font-size:13px; line-height:1.55; }
.board-extra { display:inline-block; margin-top:10px; color:#3d544c; font-size:13px; font-weight:800; }
.portfolio-more-wrap { display:flex; justify-content:center; margin-top:26px; }
.portfolio-more { width:auto !important; min-height:48px; }
.portfolio-more[hidden] { display:none; }
.portfolio-note { max-width:800px; margin:24px auto 0; color:#71695e; font-size:13px; line-height:1.55; text-align:center; }
@media (max-width:940px) {
  .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .client-portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portfolio-grid.owned-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .services-grid, .client-portfolio-grid, .portfolio-grid.owned-grid { grid-template-columns:1fr; }
  .portfolio-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portfolio-filters button { padding:0 9px; font-size:12px; }
  .portfolio-filters button:first-child { grid-column:span 2; }
  .project-image { aspect-ratio:4 / 3; }
}

.service-catalog { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:18px; }
.service-group { min-width:0; padding:18px; border:1px solid var(--dark-line); border-radius:8px; background:#f7f4ee; }
.service-group h3 { margin:0 0 12px; font-size:16px; line-height:1.25; }
.service-group ul { display:grid; gap:9px; padding:0; margin:0; list-style:none; }
.service-group li { position:relative; padding-left:15px; color:#514b42; font-size:14px; line-height:1.4; }
.service-group li:before { content:""; position:absolute; left:0; top:.48em; width:6px; height:6px; border-radius:50%; background:#69dabc; }
@media (max-width:940px) { .service-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px) { .service-catalog { grid-template-columns:1fr; } }

#systems .offer-title { display:flex; flex-direction:column; gap:0; font-size:clamp(34px,3.1vw,44px); line-height:.98; }
#systems .offer-title span { display:block; }

.owned-image { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; margin:0 0 18px; border-radius:5px; position:relative; z-index:1; }
.hero-work .owned-image { margin:0 0 18px; }
.hero-work li { color:rgba(255,255,255,.78); }

/* Accessible portfolio dialogs */
body.modal-open { overflow:hidden; }
.project-image { width:100%; border:0; padding:0; color:inherit; text-align:left; cursor:zoom-in; }
.project-image:focus-visible,.owned-image-trigger:focus-visible,.case-gallery-item:focus-visible,.case-readmore:focus-visible { outline:3px solid #69dabc; outline-offset:3px; }
.owned-image-trigger { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.project-copy { position:relative; z-index:1; }
.case-readmore { margin-top:8px; min-height:44px; }
.case-dialog,.lightbox-dialog { border:0; padding:0; color:#211f1b; }
.case-dialog { width:min(960px,calc(100vw - 40px)); max-width:none; max-height:min(92dvh,1000px); overflow:auto; background:#f8f6f0; box-shadow:0 24px 100px rgba(0,0,0,.4); }
.case-dialog::backdrop { background:rgba(8,10,12,.78); backdrop-filter:blur(4px); }
.case-content { padding:clamp(24px,5vw,64px); }
.case-heading { padding-right:55px; border-bottom:1px solid #d8d2c7; padding-bottom:24px; }
.case-heading h2 { font-size:clamp(32px,5vw,56px); line-height:1; margin:8px 0 12px; }
.case-meta,.case-services { color:#625d54; line-height:1.6; }
.case-services { font-weight:650; }
.case-section { max-width:760px; margin:28px 0; }
.case-section h3 { margin:0 0 10px; font-size:20px; }
.case-section p { margin:0; color:#49453e; font-size:16px; line-height:1.72; }
.dialog-close { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid currentColor; border-radius:50%; color:inherit; background:rgba(255,255,255,.9); font-size:30px; line-height:1; cursor:pointer; }
.case-content > .case-close { position:sticky; top:10px; float:right; margin:-12px -12px -44px 12px; z-index:3; }
.lightbox-dialog { width:100vw; height:100dvh; max-width:none; max-height:none; overflow:hidden; background:#101215; color:#fff; }
.lightbox-dialog::backdrop { background:rgba(0,0,0,.92); }
.lightbox-layout { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:16px clamp(12px,3vw,40px) 12px; gap:10px; }
.lightbox-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lightbox-toolbar h2 { font-size:18px; margin:0 0 4px; }
.lightbox-counter,.lightbox-help { color:#c5c8cc; font-size:13px; }
.lightbox-actions { display:flex; gap:10px; align-items:center; }
.lightbox-actions button:not(.dialog-close) { min-height:42px; padding:0 14px; border:1px solid #696d72; border-radius:999px; color:#fff; background:#25282d; cursor:pointer; }
.lightbox-stage { min-height:0; display:grid; grid-template-columns:52px minmax(0,1fr) 52px; align-items:center; gap:12px; }
.lightbox-arrow { width:48px; height:64px; border:1px solid #555b62; border-radius:12px; color:#fff; background:#24272b; font-size:40px; cursor:pointer; }
.lightbox-arrow[hidden] { display:block; visibility:hidden; }
.lightbox-viewport { width:100%; height:100%; min-height:0; overflow:auto; display:flex; align-items:center; justify-content:center; overscroll-behavior:contain; touch-action:pan-y; }
.lightbox-viewport img { display:block; max-width:none; max-height:none; object-fit:contain; flex:none; }
.lightbox-help { text-align:center; margin:0; }
.case-gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.case-gallery-item { position:relative; width:100%; padding:0; border:1px solid #d8d2c7; background:#ebe7df; cursor:zoom-in; }
.case-gallery-item img { display:block; width:100%; max-height:340px; object-fit:contain; }
.case-gallery-item span { display:block; padding:8px; color:#38352f; font-size:13px; }
@media(max-width:680px) {
  .case-dialog { width:100vw; max-height:94dvh; margin:auto 0 0; }
  .case-dialog::backdrop { background:rgba(8,10,12,.78); }
  .case-content { padding:22px 18px 34px; }
  .case-heading { padding-right:42px; }
  .case-section { margin:24px 0; }
  .case-section p { font-size:15px; }
  .case-gallery-grid { grid-template-columns:1fr; }
  .lightbox-layout { padding:10px 8px; gap:6px; }
  .lightbox-toolbar h2 { font-size:15px; }
  .lightbox-stage { grid-template-columns:38px minmax(0,1fr) 38px; gap:4px; }
  .lightbox-arrow { width:36px; height:54px; font-size:32px; }
  .lightbox-actions { gap:6px; }
  .lightbox-actions button:not(.dialog-close) { min-height:40px; padding:0 10px; }
  .lightbox-toolbar .dialog-close { width:40px; height:40px; }
  .lightbox-help { font-size:11px; }
}
.case-content .eyebrow { color:#766c5b; }
.lightbox-arrow[hidden] { display:block; visibility:hidden; }