/* Luxerra refinement layer: shared tokens and reusable editorial components. */
:root {
  --type-hero: clamp(3.4rem, 6.6vw, 6rem);
  --type-section: clamp(2.1rem, 3.6vw, 3.1rem);
  --type-project: clamp(1.8rem, 2.8vw, 2.7rem);
  --type-subheading: clamp(1.4rem, 2vw, 1.75rem);
  --type-body: 1rem;
  --type-small: .875rem;
  --type-meta: .6875rem;
  --type-nav: .875rem;
  --space-section: clamp(3.5rem, 6vw, 5.5rem);
  --space-grid: clamp(1.5rem, 4vw, 4rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 3px;
  --header-height: 100px;
  --gray: #b3b0a6;
  --muted-light: #66645b;
  --gold-ink: #75601d;
  --line: #36362f;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --duration: 220ms;
}

body {
  font-size: var(--type-body);
  line-height: 1.7
}

h1,
h2,
h3 {
  font-weight: 500;
  letter-spacing: -.045em;
  text-wrap: balance
}

p {
  text-wrap: pretty
}

h2 {
  font-size: var(--type-section);
  line-height: 1.12
}

h3 {
  font-size: var(--type-subheading);
  line-height: 1.2
}

.container {
  width: calc(100% - var(--gutter)*2)
}

.section {
  padding-block: var(--space-section)
}

.section-head {
  margin-bottom: clamp(30px, 4vw, 48px)
}

.section-head>p,
.section-aside p {
  font-size: var(--type-small);
  line-height: 1.75
}

.section-head h2 {
  font-size: var(--type-section)
}

.eyebrow {
  font-size: var(--type-meta);
  line-height: 1.6;
  letter-spacing: .13em
}

.light .eyebrow,
.light h2 em {
  color: var(--gold-ink)
}

.light p {
  color: var(--muted-light)
}

.button {
  min-height: 48px;
  font-size: var(--type-small);
  border-radius: var(--radius);
  transition: background var(--duration), transform var(--duration), border-color var(--duration)
}

.button:hover {
  background: #d0ae40
}

.button-dark:hover {
  background: var(--gold);
  border-color: var(--gold)
}

.text-link {
  font-size: var(--type-small);
  min-height: 44px;
  gap: 20px
}

.text-link span {
  transition: transform var(--duration) var(--ease)
}

.text-link:hover span {
  transform: translate(3px, -3px)
}

.light :focus-visible {
  outline-color: var(--gold-ink)
}

/* One stable navigation container; dropdowns belong to the header, not the trigger. */
.header {
  background: #080808f5;
  border-bottom: 1px solid #ffffff16;
  transition: box-shadow var(--duration), background var(--duration)
}

.header.is-scrolled {
  background: #080808;
  box-shadow: 0 8px 28px #0003
}

.nav-shell {
  height: var(--header-height);
  width: calc(100% - var(--gutter)*2);
  max-width: 1280px;
  gap: 32px;
  position: relative
}

.brand {
  width: 176px
}

.brand img {
  width: 176px;
  height: auto
}

.header nav {
  display: flex;
  gap: 26px;
  font-size: var(--type-nav);
  align-items: center;
  position: static
}

.header nav>a:not(.button),
.nav-trigger {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  position: relative;
  white-space: nowrap
}

.header nav>a:not(.button):after {
  content: '';
  position: absolute;
  bottom: 7px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration)
}

.header nav>a:hover:after,
.header nav>a[aria-current=page]:after {
  transform: scaleX(1)
}

.nav-trigger {
  font-size: var(--type-nav);
  padding: 10px 0;
  gap: 5px
}

.nav-trigger span {
  transition: transform var(--duration);
  transform: translate(-2px, -5.3px);
}

.nav-trigger[aria-expanded=true] {
  color: var(--gold)
}

.nav-trigger[aria-expanded=true] span {
  transform: rotate(180deg)
}

.nav-group {
  position: static
}

.header .button-small {
  min-height: 44px;
  padding: 11px 16px;
  font-size: 13px;
  gap: 22px;
  margin-left: 10px
}

.dropdown.mega-menu {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  width: 100%;
  display: grid;
  grid-template-columns: .8fr 1.4fr;
  gap: clamp(30px, 5vw, 72px);
  padding: 36px 40px;
  background: #151515;
  border: 1px solid #3c3b32;
  box-shadow: 0 25px 50px #0006;
  border-top: 2px solid #8b742e;
  max-height: calc(100dvh - 120px);
  overflow-y: auto
}

.menu-intro h2 {
  font-size: 31px;
  line-height: 1.12;
  margin: 16px 0
}

.menu-intro>p:not(.eyebrow) {
  font-size: 14px;
  max-width: 32ch
}

.menu-intro .text-link {
  color: var(--gold);
  border: 0;
  margin-top: 16px;
  font-size: 13px
}

.dropdown .eyebrow {
  font-size: 10px;
  margin: 0
}

.dropdown .menu-links a {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 8px;
  border-bottom: 1px solid #3a3a31;
  min-height: 60px;
  transition: background var(--duration)
}

.dropdown .menu-links a:hover {
  background: #ffffff04
}

.menu-number {
  font-size: 11px;
  color: var(--gold)
}

.dropdown b {
  font-size: 18px;
  font-family: var(--heading);
  font-weight: 500
}

.dropdown small {
  font-size: 13px;
  line-height: 1.6;
  color: #b3b0a6;
  margin-top: 5px
}

.menu-links i {
  font-size: 22px;
  font-style: normal;
  color: var(--gold);
  margin-left: auto
}

.solution-menu-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px
}

.dropdown .solution-menu-links a {
  font-size: 14px
}

.mobile-contact {
  display: none
}

.menu-lines {
  display: block;
  width: 20px;
  height: 12px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transition: transform var(--duration)
}

.menu-toggle[aria-expanded=true] .menu-lines {
  transform: rotate(-45deg);
  height: 1px;
  border-bottom: 0
}

.menu-toggle[aria-expanded=true] .menu-lines:after {
  content: '';
  display: block;
  width: 20px;
  border-top: 1px solid currentColor;
  transform: rotate(90deg);
  margin-top: -1px
}

.menu-toggle span {
  margin: 0
}

/* Existing homepage narrative, with a clearer type hierarchy and denser rhythm. */
.hero {
  padding-top: 30px
}

.hero-grid {
  padding-top: 44px;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px
}

.hero h1 {
  font-size: var(--type-hero);
  line-height: 1.01;
  letter-spacing: -.058em
}

.hero-copy>p {
  font-size: clamp(16px, 1.5vw, 19px);
  max-width: 43ch;
  line-height: 1.65;
  margin-top: 25px
}

.hero-top .eyebrow {
  font-size: 11px
}

.location {
  font-size: 10px
}

.hero-actions {
  gap: 26px;
  flex-wrap: wrap
}

.hero-actions .text-link {
  font-size: 14px
}

.system-art {
  min-height: 400px;
  background: radial-gradient(ellipse at 55% 45%, #5946161a, transparent 66%)
}

.system-center strong {
  font-size: clamp(24px, 2.5vw, 33px)
}

.system-center .eyebrow {
  font-size: 9px
}

.art-label {
  font-size: 10px;
  letter-spacing: .05em;
  box-shadow: none
}

.label-two {
  right: 0
}

.art-foot {
  font-size: 9px
}

.hero-bottom {
  margin-top: 32px;
  padding-block: 20px
}

.hero-bottom p {
  font-size: 13px
}

.hero-bottom a {
  font-size: 11px
}

.philosophy {
  padding-block: var(--space-section)
}

.philosophy h2 {
  font-size: var(--type-section)
}

.philosophy-bottom p {
  font-size: var(--type-body);
  line-height: 1.75
}

.section-note {
  font-size: 12px;
  color: #6d6a61
}

.solution-layout {
  gap: var(--space-grid)
}

.challenge-list button {
  font-size: 16px;
  min-height: 68px;
  padding: 19px 8px
}

.challenge-list button>span {
  font-size: 11px;
  color: #a39f91
}

.solution-panel {
  border-radius: var(--radius);
  padding: 32px;
  min-height: 450px
}

.solution-panel h3 {
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2
}

.panel-top .eyebrow,
.panel-top>span:last-child {
  font-size: 11px
}

.solution-panel>p {
  font-size: 15px;
  line-height: 1.75
}

.solution-panel .panel-approach {
  font-size: 14px
}

.tags>span {
  font-size: 12px;
  padding: 5px 10px
}

.solution-panel .text-link {
  margin-top: 24px
}

.cap-title h3 {
  font-size: clamp(24px, 2.2vw, 30px)
}

.cap-title>span {
  font-size: 12px
}

.capability>p {
  font-size: 16px;
  min-height: 112px;
  line-height: 1.65
}

.capability ul {
  font-size: 14px;
  min-height: 156px
}

.capability ul li {
  line-height: 1.85
}

.cap-visual {
  background: #e7e3d8;
  border-color: #d4cec0
}

.visual-corner {
  font-size: 10px;
  color: #645b43
}

.process h3 {
  font-size: 26px
}

.process p {
  font-size: 15px;
  line-height: 1.7
}

.process li>span {
  font-size: 11px
}

.approach-note p {
  font-size: 16px
}

.contact h2 {
  font-size: clamp(40px, 4.5vw, 60px)
}

.contact-intro {
  font-size: 16px
}

.contact-email {
  font-size: clamp(22px, 2.4vw, 29px)
}

.contact-phones {
  font-size: 14px;
  gap: 12px 22px
}

.form-top p {
  font-size: 14px;
  line-height: 1.6
}

label {
  font-size: 14px;
  margin-bottom: 22px
}

label small {
  font-size: 12px
}

input,
textarea {
  font-size: 16px;
  line-height: 1.6;
  padding: 12px 0
}

.form-bottom p {
  font-size: 12px
}

.form-status {
  font-size: 14px
}

.button:disabled {
  opacity: .5;
  transform: none
}

form noscript p {
  font-size: 14px;
  margin: 18px 0
}

.section-aside .text-link {
  margin-top: 12px
}

/* Editorial client work: real engagements, explicitly contextual stock visuals. */
.selected-work {
  border-top: 1px solid #26261f
}

.project-list {
  display: flex;
  flex-direction: column;
  gap: 56px
}

.project-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: center
}

.project-row+.project-row {
  padding-top: 48px;
  border-top: 1px solid #32322b
}

.project-row:nth-child(even) {
  grid-template-columns: 1fr 1.3fr
}

.project-row:nth-child(even) .project-visual {
  order: 2
}

.project-row:nth-child(even) .project-copy {
  order: 1
}

.project-visual {
  position: relative;
  display: block;
  aspect-ratio: 1.36;
  overflow: hidden;
  border: 1px solid #444136;
  background: #1a1b16;
  border-radius: var(--radius)
}

.project-visual picture,
.project-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.project-visual img {
  filter: grayscale(.75) brightness(.65);
  transition: transform 550ms var(--ease), filter 550ms var(--ease)
}

.project-visual:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #08080890, transparent 45%, #080808ad)
}

.project-visual:hover img {
  transform: scale(1.025);
  filter: grayscale(.4) brightness(.75)
}

.project-visual-title {
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  z-index: 1
}

.project-visual-title .eyebrow {
  font-size: 10px;
  color: #f2e7bf
}

.project-visual-title strong {
  display: block;
  font-family: var(--heading);
  font-size: clamp(29px, 3.2vw, 45px);
  line-height: 1.15;
  font-weight: 500;
  letter-spacing: -.04em;
  margin-top: 12px
}

.visual-disclosure {
  position: absolute;
  bottom: 22px;
  left: 24px;
  font-size: 11px;
  color: #e0ddd0;
  z-index: 2;
  max-width: 70%;
  line-height: 1.6
}

.project-open {
  position: absolute;
  bottom: 18px;
  right: 22px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border: 1px solid #ada58a;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 25px;
  transition: background var(--duration)
}

.project-visual:hover .project-open {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black)
}

.project-kicker {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 20px
}

.project-kicker>span {
  font-size: 12px;
  color: #999585
}

.project-copy h3 {
  font-size: var(--type-project);
  line-height: 1.13
}

.project-copy h3 a:hover {
  color: #d8c98d
}

.project-copy>p {
  font-size: 16px;
  line-height: 1.75;
  margin-top: 20px;
  max-width: 48ch
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 24px 0 20px;
  padding: 0;
  font-size: 12px;
  color: #d7d1bc
}

.project-tags li {
  border-bottom: 1px solid #59523c;
  padding-bottom: 6px
}

.project-copy>.text-link {
  color: var(--gold)
}

/* Relevant industry imagery, without repeating another row of cards. */
.industry-layout {
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-grid)
}

.industry-media {
  min-width: 0
}

.industry-image {
  height: 300px;
  border-radius: var(--radius)
}

.industry-image picture {
  display: block;
  width: 100%;
  height: 100%
}

.industry-image img {
  filter: grayscale(.45) brightness(.75)
}

.industry-image figcaption {
  font-size: 10px;
  left: 20px;
  bottom: 18px;
  letter-spacing: .09em
}

.healthcare-image {
  height: 230px;
  width: 76%;
  margin: 1px 0 0 auto;
  z-index: 2;
  border: 8px solid var(--black);
  border-right: 0
}

.healthcare-image figcaption {
  font-size: 10px;
  left: 14px;
  bottom: 14px
}

.healthcare-image img {
  object-position: 50% 40%
}

.image-note {
  font-size: 11px;
  margin-top: 9px;
  color: #aaa697
}

.industry-list h3 {
  font-size: clamp(21px, 2vw, 26px)
}

.industry-list summary {
  padding: 25px 0;
  min-height: 72px
}

.industry-list summary>span {
  font-size: 11px
}

.industry-list details p {
  font-size: 16px
}

.industry-list .text-link {
  font-size: 14px
}

.industry-list details>div {
  padding-left: 30px;
  padding-right: 0
}

/* Footer: invitation first, compact information second. */
.site-footer {
  padding: 0 0 24px;
  background: var(--black)
}

.footer-invitation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 58px 0 52px;
  border-bottom: 1px solid var(--line)
}

.footer-invitation h2 {
  font-size: clamp(33px, 4vw, 52px);
  margin-top: 20px;
  line-height: 1.15
}

.footer-invitation h2 em {
  color: #cac5b6
}

.footer-project-link {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 16px;
  flex-shrink: 0
}

.round-arrow {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid #78652c;
  border-radius: 50%;
  font-size: 34px;
  color: var(--gold);
  transition: background var(--duration), color var(--duration)
}

.footer-project-link:hover .round-arrow {
  background: var(--gold);
  color: var(--black)
}

.site-footer .footer-main {
  padding-top: 44px;
  grid-template-columns: 1.3fr .85fr 1fr 1.1fr;
  gap: 36px
}

.footer-brand img {
  width: 180px
}

.site-footer .footer-brand p {
  font-size: 14px;
  line-height: 1.75;
  max-width: 29ch;
  margin: 22px 0
}

.site-footer .footer-main h3 {
  font-size: 13px;
  margin: 5px 0 20px;
  color: #dcd8cc
}

.site-footer .footer-main>div>a,
.site-footer .social-links a {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  min-height: 36px;
  display: flex;
  align-items: center;
  color: #b7b3a6
}

.site-footer .footer-brand>a {
  display: block
}

.site-footer .social-links {
  grid-template-columns: 1fr 1fr;
  gap: 0 10px
}

.site-footer .social-links a {
  font-size: 12px;
  min-height: 36px
}

.footer-address address {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 22px
}

.site-footer .footer-contact-link {
  margin-top: 22px !important;
  color: var(--gold) !important
}

.footer-address .eyebrow {
  font-size: 10px
}

.site-footer .footer-bottom {
  margin-top: 35px;
  font-size: 12px;
  padding-top: 18px;
  align-items: center
}

.footer-bottom a,
.footer-bottom button {
  min-height: 44px;
  display: inline-flex;
  align-items: center
}

.credit-list {
  padding-left: 18px;
  font-size: 14px
}

.credit-list li {
  margin-bottom: 12px
}

dialog h2 {
  font-size: 30px;
  line-height: 1.2
}

dialog p {
  font-size: 15px
}

.dialog-close {
  min-width: 44px;
  min-height: 44px
}

/* Shared multipage work and case-study templates. */
.inner-page h1 {
  font-size: clamp(40px, 5vw, 70px);
  line-height: 1.08;
  letter-spacing: -.045em
}

.inner-page h1 em {
  font-style: normal;
  color: var(--gold)
}

.work-intro {
  padding-block: 60px 42px
}

.work-intro h1 {
  margin: 22px 0
}

.work-intro>p:last-child {
  font-size: 18px;
  max-width: 55ch
}

.work-listing {
  padding-bottom: 80px
}

.work-list-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 22px 0 30px
}

.work-list-label h2 {
  font-size: 18px;
  letter-spacing: -.02em
}

.work-list-label>span {
  font-size: 11px;
  color: #b7b098;
  letter-spacing: .1em
}

.work-listing .project-row+.project-row {
  margin-top: 48px
}

.case-hero {
  padding-top: 30px
}

.breadcrumb {
  display: flex;
  position: static;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
  background: none;
  padding: 0;
  max-height: none;
  overflow: visible;
  border: 0;
  font-size: 13px;
  color: #b3ae9f
}

.breadcrumb a {
  min-height: 44px;
  display: flex;
  align-items: center
}

.breadcrumb a:hover {
  color: var(--gold)
}

.case-hero h1 {
  max-width: 1000px;
  margin: 18px 0 24px
}

.case-lead {
  max-width: 66ch;
  font-size: 18px;
  line-height: 1.7
}

.case-meta {
  display: grid;
  grid-template-columns: .9fr 1fr 1.6fr;
  gap: 30px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin: 36px 0
}

.case-meta dt {
  font-size: 10px;
  color: var(--gold);
  letter-spacing: .12em
}

.case-meta dd {
  font-size: 14px;
  line-height: 1.7;
  margin: 8px 0 0;
  color: #d5d1c3
}

.case-cover {
  margin: 0 0 44px
}

.case-cover picture {
  display: block;
  aspect-ratio: 2.65;
  overflow: hidden;
  background: #22251d
}

.case-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.65) brightness(.85)
}

.case-cover figcaption {
  position: static;
  font-size: 12px;
  color: #b3aea0;
  letter-spacing: 0;
  margin-top: 12px;
  display: block
}

.case-story-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 70px
}

.case-contents {
  position: sticky;
  top: 130px;
  align-self: start
}

.case-contents p {
  margin-bottom: 25px
}

.case-contents a {
  display: block;
  padding: 13px 0;
  font-size: 14px;
  border-bottom: 1px solid #d3cebe;
  color: #595748
}

.case-contents a:hover {
  color: var(--gold-ink)
}

.case-narrative {
  max-width: 810px
}

.case-narrative>section {
  margin-bottom: 54px;
  padding-bottom: 44px;
  border-bottom: 1px solid #d3cebe
}

.case-narrative>section:last-child {
  margin: 0;
  padding: 0;
  border: 0
}

.case-narrative h2 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.17;
  margin: 16px 0 22px
}

.case-narrative p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.8;
  max-width: 68ch
}

.delivery-step {
  display: flex;
  gap: 24px;
  border-top: 1px solid #d3cebe;
  padding: 28px 0
}

.delivery-step>span {
  font-size: 12px;
  color: var(--gold-ink);
  padding-top: 4px
}

.delivery-step h3 {
  font-size: 24px;
  margin-bottom: 13px
}

.delivery-step p {
  font-size: 16px !important
}

.deliverables {
  margin-top: 10px;
  padding: 28px;
  background: #e8e4d8;
  border-left: 2px solid #ac8c34
}

.deliverables h3 {
  font-size: 21px;
  margin-bottom: 17px
}

.deliverables ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 30px;
  padding-left: 18px;
  margin: 0;
  font-size: 14px;
  color: #555449;
  line-height: 1.7
}

.case-narrative .outcome-source {
  font-size: 12px !important;
  margin: 18px 0 25px;
  color: #726c58
}

.next-case {
  padding-block: 45px
}

.next-case>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--heading);
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.2;
  margin-top: 20px;
  min-height: 64px
}

.next-case>a span:last-child {
  color: var(--gold)
}

@media(max-width:1100px) and (min-width:1025px) {

  .brand,
  .brand img {
    width: 150px
  }

  .header nav {
    gap: 19px
  }

  .nav-shell {
    gap: 20px
  }

  .header .button-small {
    margin-left: 0
  }

  .footer-main {
    gap: 24px
  }
}

@media(max-width:1024px) {
  :root {
    --header-height: 84px
  }

  .brand,
  .brand img {
    width: 150px
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    border: 1px solid #69614a;
    min-height: 44px;
    padding: 8px 13px;
    font-size: 13px
  }

  .header nav {
    display: none;
    position: absolute;
    top: 84px;
    left: calc(-1*var(--gutter));
    right: calc(-1*var(--gutter));
    padding: 16px var(--gutter) 30px;
    background: #10100e;
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    border-bottom: 1px solid #484335;
    gap: 0
  }

  .header nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch
  }

  .header nav>a:not(.button),
  .header .nav-trigger {
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    min-height: 58px;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #34342b
  }

  .header nav>a:after {
    display: none
  }

  .header .button-small {
    margin: 22px 0 0;
    align-self: flex-start;
    min-height: 48px;
    padding-inline: 20px
  }

  .dropdown.mega-menu {
    position: static;
    display: block;
    width: 100%;
    padding: 8px 16px;
    margin: 0;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    border: 0;
    border-left: 1px solid #8b742e
  }

  .mega-menu .menu-intro {
    display: none
  }

  .dropdown .menu-links a {
    padding: 16px 0;
    gap: 14px;
    min-height: 56px
  }

  .dropdown b {
    font-size: 17px
  }

  .dropdown small {
    font-size: 13px
  }

  .solution-menu-links {
    display: block
  }

  .dropdown .solution-menu-links a {
    font-size: 15px
  }

  .mobile-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 28px
  }

  .mobile-contact>span {
    font-size: 10px;
    color: #aaa38e;
    letter-spacing: .1em
  }

  .mobile-contact a {
    font-size: 15px;
    min-height: 44px
  }

  .menu-open {
    overflow: hidden
  }

  .hero h1 {
    font-size: clamp(55px, 7.2vw, 78px)
  }

  .hero-grid {
    grid-template-columns: 1.1fr 1fr
  }

  .hero-actions {
    flex-direction: row;
    align-items: center;
    gap: 16px
  }

  .hero-actions .text-link {
    font-size: 13px
  }

  .system-art {
    min-height: 370px
  }

  .art-label {
    font-size: 8px;
    padding: 9px
  }

  .system-center .eyebrow {
    font-size: 8px
  }

  .system-center strong {
    font-size: 26px
  }

  .capability-grid {
    gap: 24px
  }

  .capability>p {
    min-height: 145px
  }

  .capability ul {
    min-height: 180px;
    font-size: 13px
  }

  .cap-title {
    gap: 10px
  }

  .cap-title h3 {
    font-size: 24px
  }

  .project-row,
  .project-row:nth-child(even) {
    grid-template-columns: 1.1fr 1fr;
    gap: 30px
  }

  .project-copy h3 {
    font-size: 32px
  }

  .project-visual {
    aspect-ratio: .95
  }

  .project-visual-title {
    left: 22px;
    top: 24px
  }

  .project-visual-title strong {
    font-size: 35px
  }

  .project-copy>p {
    font-size: 15px
  }

  .footer-invitation {
    gap: 28px
  }

  .footer-project-link {
    gap: 18px;
    font-size: 14px
  }

  .round-arrow {
    width: 58px;
    height: 58px;
    font-size: 29px
  }

  .site-footer .footer-main {
    grid-template-columns: 1.15fr 1fr;
    gap: 34px
  }

  .footer-brand {
    grid-column: auto
  }

  .footer-address {
    grid-column: auto;
    max-width: none
  }

  .footer-brand p {
    max-width: 34ch
  }

  .footer-main .social-links {
    max-width: 250px
  }

  .case-story-layout {
    grid-template-columns: 180px 1fr;
    gap: 35px
  }

  .case-meta {
    grid-template-columns: 1fr 1fr
  }

  .case-meta>div:last-child {
    grid-column: 1/-1
  }

  .case-contents {
    top: 110px
  }

  .contact-layout {
    grid-template-columns: 1fr 1.1fr;
    gap: 35px
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0
  }

  .contact h2 {
    font-size: 43px
  }

  .form-bottom {
    flex-direction: column;
    align-items: flex-start
  }

  .industry-layout {
    gap: 30px
  }

  .industry-image {
    height: 320px
  }

  .healthcare-image {
    height: 235px;
    width: 90%
  }

  .industry-list h3 {
    font-size: 22px
  }

  .industry-list details>div {
    padding-left: 0
  }

  .section-head>p {
    max-width: 32ch
  }
}

@media(max-width:700px) {
  :root {
    --type-hero: clamp(49px, 12.1vw, 76px);
    --type-section: clamp(31px, 7.5vw, 40px);
    --space-section: 52px
  }

  .hero-top .location {
    display: none
  }

  .hero-top .eyebrow {
    font-size: 10px
  }

  .hero-grid {
    grid-template-columns: 1fr;
    padding-top: 30px;
    gap: 14px
  }

  .hero h1 {
    font-size: var(--type-hero)
  }

  .hero-copy>p {
    font-size: 17px;
    max-width: 40ch
  }

  .hero-actions {
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 25px
  }

  .hero-actions .button {
    font-size: 14px;
    padding: 14px 18px
  }

  .hero-actions .text-link {
    font-size: 14px
  }

  .system-art {
    min-height: 300px;
    max-width: 390px;
    margin: 4px auto 0
  }

  .art-label {
    font-size: 9px
  }

  .system-center strong {
    font-size: 26px
  }

  .system-center .eyebrow {
    font-size: 8px
  }

  .hero-bottom {
    margin-top: 5px
  }

  .hero-bottom p {
    font-size: 12px
  }

  .hero-bottom a {
    font-size: 10px;
    gap: 10px
  }

  .split {
    gap: 22px
  }

  .philosophy h2 {
    font-size: var(--type-section)
  }

  .philosophy-bottom {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .philosophy-bottom p {
    font-size: 16px
  }

  .section-head {
    display: block
  }

  .section-head>p,
  .section-aside {
    margin-top: 20px;
    max-width: none
  }

  .solution-layout {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .challenge-list button {
    font-size: 15px;
    min-height: 62px;
    padding: 15px 4px
  }

  .solution-panel {
    padding: 25px;
    min-height: 430px
  }

  .solution-panel h3 {
    font-size: 29px
  }

  .solution-panel .panel-approach {
    font-size: 14px
  }

  .capability-grid {
    grid-template-columns: 1fr;
    gap: 38px
  }

  .capability>p {
    min-height: 0;
    font-size: 16px
  }

  .capability ul {
    min-height: 0;
    font-size: 14px;
    margin: 20px 0
  }

  .cap-title h3 {
    font-size: 28px
  }

  .cap-visual {
    height: 200px
  }

  .visual-corner {
    font-size: 10px
  }

  .project-list {
    gap: 36px
  }

  .project-row,
  .project-row:nth-child(even) {
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: stretch
  }

  .project-row:nth-child(even) .project-visual,
  .project-row:nth-child(even) .project-copy {
    order: initial
  }

  .project-row+.project-row {
    padding-top: 36px
  }

  .project-visual {
    aspect-ratio: 1.2
  }

  .project-visual-title strong {
    font-size: 35px
  }

  .project-visual-title .eyebrow {
    font-size: 9px
  }

  .project-kicker {
    margin-bottom: 14px
  }

  .project-copy h3 {
    font-size: 32px
  }

  .project-copy>p {
    font-size: 16px;
    margin-top: 16px
  }

  .project-tags {
    margin: 20px 0 12px
  }

  .project-open {
    width: 42px;
    height: 42px
  }

  .visual-disclosure {
    font-size: 10px;
    left: 20px;
    bottom: 20px
  }

  .industry-layout {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .industry-image {
    height: 250px
  }

  .healthcare-image {
    height: 190px;
    width: 76%
  }

  .industry-list h3 {
    font-size: 23px
  }

  .industry-list summary {
    min-height: 70px;
    padding: 22px 0
  }

  .industry-list details p {
    font-size: 16px
  }

  .process {
    grid-template-columns: 1fr 1fr;
    gap: 28px 22px
  }

  .process h3 {
    font-size: 24px
  }

  .process p {
    font-size: 15px
  }

  .process li>span {
    font-size: 10px
  }

  .approach-note p {
    font-size: 14px
  }

  .approach-note .text-link {
    font-size: 14px
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .contact h2 {
    font-size: 45px
  }

  .contact-email {
    font-size: 25px
  }

  .contact-intro {
    font-size: 16px
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 16px
  }

  .form-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px
  }

  .form-bottom .button {
    font-size: 14px;
    padding: 14px 20px
  }

  .form-bottom p {
    font-size: 12px
  }

  .footer-invitation {
    display: block;
    padding-block: 42px
  }

  .footer-invitation h2 {
    font-size: 35px
  }

  .footer-invitation .eyebrow {
    font-size: 10px
  }

  .footer-project-link {
    margin-top: 26px;
    justify-content: space-between;
    font-size: 16px
  }

  .site-footer .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 32px 22px;
    padding-top: 35px
  }

  .footer-brand {
    grid-column: 1/-1
  }

  .site-footer .footer-brand p {
    max-width: 42ch
  }

  .site-footer .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    max-width: none
  }

  .footer-address {
    grid-column: 1/-1
  }

  .site-footer .footer-main>div>a {
    font-size: 13px;
    min-height: 42px;
    overflow-wrap: anywhere
  }

  .site-footer .footer-contact-link {
    font-size: 12px !important
  }

  .site-footer .footer-bottom {
    display: block;
    font-size: 11px
  }

  .footer-bottom>div {
    gap: 18px;
    margin-top: 12px;
    flex-wrap: wrap
  }

  .work-intro {
    padding-block: 42px 30px
  }

  .work-intro h1 {
    font-size: 42px
  }

  .work-intro>p:last-child {
    font-size: 17px
  }

  .work-listing {
    padding-bottom: 52px
  }

  .work-list-label {
    gap: 20px
  }

  .case-hero {
    padding-top: 20px
  }

  .breadcrumb {
    font-size: 12px;
    margin-bottom: 22px
  }

  .case-hero h1 {
    font-size: 42px
  }

  .case-lead {
    font-size: 17px
  }

  .case-meta {
    gap: 20px;
    margin-top: 26px
  }

  .case-meta dd {
    font-size: 13px
  }

  .case-cover picture {
    aspect-ratio: 1.35
  }

  .case-cover figcaption {
    font-size: 11px
  }

  .case-story-layout {
    display: block
  }

  .case-contents {
    position: static;
    display: flex;
    gap: 5px 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid #c9c2b0;
    padding-bottom: 24px;
    margin-bottom: 35px
  }

  .case-contents p {
    width: 100%;
    margin-bottom: 5px
  }

  .case-contents a {
    font-size: 12px;
    border: 0;
    padding: 8px 0;
    min-height: 40px
  }

  .case-narrative h2 {
    font-size: 32px
  }

  .case-narrative p:not(.eyebrow) {
    font-size: 16px
  }

  .case-narrative>section {
    padding-bottom: 32px;
    margin-bottom: 38px
  }

  .delivery-step {
    gap: 16px
  }

  .delivery-step h3 {
    font-size: 23px
  }

  .deliverables {
    padding: 22px
  }

  .deliverables ul {
    grid-template-columns: 1fr
  }

  .next-case {
    padding-block: 32px
  }

  .next-case>a {
    font-size: 34px
  }

  .next-case .eyebrow {
    font-size: 10px
  }
}

@media(max-width:380px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0
  }

  .process {
    grid-template-columns: 1fr
  }

  .project-copy h3 {
    font-size: 29px
  }

  .hero-bottom {
    align-items: flex-start;
    gap: 15px
  }

  .hero-bottom a {
    font-size: 9px
  }

  .case-hero h1,
  .work-intro h1 {
    font-size: 36px
  }

  .site-footer .footer-main {
    grid-template-columns: 1fr
  }

  .footer-brand,
  .footer-address {
    grid-column: auto
  }

  .site-footer .footer-contact-link {
    font-size: 14px !important
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important
  }

  .project-visual:hover img {
    transform: none
  }
}

/* Keep the breadcrumb independent of the original navigation's mobile rules. */
.inner-page .breadcrumb a {
  width: auto;
  padding: 0;
  border: 0;
  min-height: 44px;
  font-size: inherit;
  display: inline-flex
}

.image-unavailable {
  background: linear-gradient(135deg, #29271e, #131412)
}