.app-page {
  --app-blue: #597ea8;
  color: var(--ink, #23313d);
  padding: 44px 42px 34px;
  font-size: 13px;
  line-height: 1.8;
}

.app-page *, .app-page *::before, .app-page *::after { box-sizing: border-box; }
.app-page [hidden] { display: none !important; }
.app-page button, .app-page input, .app-page select, .app-page textarea { font: inherit; }
.app-page button { color: inherit; cursor: pointer; }
.app-page button svg { flex: 0 0 auto; }
.app-page button:focus-visible, .app-page summary:focus-visible { outline: 2px solid #6689b4; outline-offset: 4px; }
.app-page h1, .app-page h2, .app-page h3, .app-page p { margin: 0; }
.app-page button:disabled { opacity: .5; cursor: default; }
.app-heading { max-width: 610px; margin-bottom: 32px; }
.app-eyebrow { display: block; font-size: 9px; line-height: 1.5; font-weight: 600; letter-spacing: .17em; color: var(--muted, #73818f); }
.app-heading h1 { font-size: clamp(24px, 3.1vw, 36px); font-weight: 500; letter-spacing: -.045em; line-height: 1.55; margin-top: 11px; }
.app-heading > p { max-width: 480px; font-size: 12px; line-height: 1.9; color: var(--muted, #73818f); margin-top: 13px; }
.app-button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 43px; padding: 10px 18px; background: rgba(255, 255, 255, .68); border: 1px solid var(--line, rgba(128,145,165,.19)); border-radius: 7px; font-size: 11px !important; font-weight: 500 !important; transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.app-button:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 5px 15px #44556808; }
.app-button.app-button-primary { background: #344656; color: #fff; border-color: #344656; }
.app-button.app-button-primary:hover { background: #435a70; }
.app-section { margin-top: 36px; }
.app-section-top { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.app-section-top h2 { font-size: 18px; font-weight: 500; letter-spacing: -.03em; }
.app-section-top > span { font-size: 8px; color: var(--muted, #73818f); letter-spacing: .15em; }
.app-small-note { font-size: 10px; line-height: 1.9; color: var(--muted, #73818f); margin-top: 20px !important; }
.app-tone-blue { --tone: #749ec5; --tone-rgb: 116,158,197; --tone-bg: #e7eff7; }
.app-tone-purple { --tone: #a398c5; --tone-rgb: 163,152,197; --tone-bg: #efecf8; }
.app-tone-mint { --tone: #7bada5; --tone-rgb: 123,173,165; --tone-bg: #e8f2ef; }
.app-tone-peach { --tone: #c3a18a; --tone-rgb: 195,161,138; --tone-bg: #f5ece6; }
.app-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* About: a quiet editorial introduction inside the desktop. */
.app-page.app-about { padding-top: 28px; }
.app-about-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.app-edition { font-size: 8px; color: #97a2af; letter-spacing: .1em; white-space: nowrap; }
.app-about-hero { position: relative; padding: 65px 0 49px; overflow: hidden; container-type: inline-size; }
/* One line at any window width: fourteen characters, sized by the width they have to fit into. */
.app-about-hero h1 { position: relative; z-index: 2; font-size: clamp(17px, 6.9cqw, 49px); line-height: 1.6; letter-spacing: -.065em; font-weight: 500; white-space: nowrap; }
.app-about-hero h1 > span { color: #708596; }
.app-about-hero > p { position: relative; z-index: 2; margin-top: 22px; font-size: 10px; letter-spacing: .1em; color: #8493a2; }
.app-about-art { position: absolute; right: -20px; top: 28px; width: 235px; height: 270px; opacity: .83; }
.app-art-disc { position: absolute; width: 187px; height: 187px; top: 28px; right: 22px; border-radius: 50%; border: 21px solid rgba(230,235,247,.8); transform: rotateX(42deg) rotateY(-18deg); box-shadow: inset -7px -5px 12px #a4b2cd30, inset 6px 7px 12px #fff, 7px 11px 22px #9baac32a; background: linear-gradient(135deg, #ffffffe0, #d9e6f53b); }
.app-art-panel { position: absolute; width: 157px; height: 152px; top: 105px; right: 4px; border: 1px solid #fff; border-radius: 17px; transform: rotate(-19deg) skewY(9deg); background: linear-gradient(155deg, #ffffffd9, #c8d9ed42 56%, #fff9); box-shadow: 8px 12px 27px #93a9c529, inset 0 0 25px #ffffffb8; }
.app-art-sphere { position: absolute; width: 60px; height: 60px; top: 169px; right: 151px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff 5%, #edf2f9 28%, #c6d8ea 71%, #b8c7df 90%); box-shadow: 9px 13px 19px #6b86a922; }
.app-art-word { position: absolute; top: 119px; right: 20px; width: 141px; transform: rotate(-9deg); color: #7a8fa659; text-shadow: 1px 1px #fff; font-size: 29px; font-weight: 600; letter-spacing: .03em; text-align: center; white-space: nowrap; }
.app-art-word > span { display: inline-block; vertical-align: top; font-size: 11px; margin-top: 15px; margin-left: 4px; }
.app-about-intro { padding: 27px 0 29px; border-top: 1px solid var(--line, rgba(128,145,165,.19)); }
.app-about-intro h2 { margin-top: 12px; margin-bottom: 17px; font-size: 22px; line-height: 1.65; letter-spacing: -.035em; font-weight: 500; }
.app-about-intro > p { max-width: 520px; font-size: 12px; line-height: 2; color: #75818c; }
.app-about-intro > p + p { margin-top: 12px; }
.app-values { display: grid; grid-template-columns: repeat(3, 1fr); padding: 27px 0 31px; border-top: 1px solid var(--line, rgba(128,145,165,.19)); border-bottom: 1px solid var(--line, rgba(128,145,165,.19)); }
.app-value { padding: 0 22px; border-left: 1px solid var(--line, rgba(128,145,165,.19)); }
.app-value:first-child { padding-left: 0; border-left: 0; }
.app-value-letter { display: block; font-size: 54px; line-height: 1.05; font-weight: 400; letter-spacing: -.07em; color: #607c99; }
.app-value:nth-child(2) .app-value-letter { color: #968baa; }
.app-value:nth-child(3) .app-value-letter { color: #7c9b98; }
.app-value-letter > span { color: #b2c1d0; }
.app-value h3 { margin: 12px 0 3px; font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
.app-value p { color: #8c97a3; font-size: 10px; }
.app-about-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 27px; gap: 20px; }
.app-about-bottom > p { font-size: clamp(10px, 3.4vw, 12px); color: #82909d; line-height: 1.9; white-space: nowrap; }
.app-about-bottom .app-button { flex-shrink: 0; white-space: nowrap; }

/* Each business is a folder; its services are separate data-driven apps. */
.app-folder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Two columns in a window and on phones; a maximized desktop window has room for three. */
@media (min-width: 701px) { .os-window.is-maximized .app-folder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app-folder-card { position: relative; text-align: left; min-height: 213px; display: flex; flex-direction: column; padding: 20px 21px 17px; border: 1px solid #d7dfe680; border-radius: 12px; background: linear-gradient(145deg, #fff9, rgba(var(--tone-rgb), .035)); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.app-folder-card:hover { transform: translateY(-3px); border-color: rgba(var(--tone-rgb), .5); box-shadow: 0 9px 24px #6076900d; }
.app-folder-top { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; margin-bottom: 23px; }
.app-folder-index { padding-top: 1px; color: #a7b2bd; font-size: 9px; letter-spacing: .05em; }
.app-folder-art { display: grid; place-items: center; position: relative; isolation: isolate; width: 68px; height: 48px; border-radius: 5px 8px 8px 8px; margin-top: 9px; color: var(--tone); background: linear-gradient(140deg, #ffffffad, var(--tone-bg)); border: 1px solid rgba(var(--tone-rgb), .2); box-shadow: 0 5px 8px rgba(var(--tone-rgb), .075), inset 0 1px 0 #fff; }
.app-folder-art::before { content: ''; z-index: -1; position: absolute; top: -9px; left: -1px; width: 30px; height: 11px; background: var(--tone-bg); border: 1px solid rgba(var(--tone-rgb), .2); border-bottom: 0; border-radius: 5px 6px 0 0; }
.app-folder-card > strong { font-size: 12px; line-height: 1.4; font-weight: 550; letter-spacing: .02em; }
.app-folder-label { display: block; font-size: 10px; color: #82909c; margin-top: 6px; }
.app-folder-foot { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: auto; padding-top: 17px; color: #8b9cae; }
.app-folder-foot > span { font-size: 8px; letter-spacing: .13em; }
.app-detail-icon { width: 65px; height: 65px; border-radius: 16px; display: grid; place-items: center; background: var(--tone-bg); color: var(--tone); margin-bottom: 25px; }

/* Service library and reusable service details. */
.app-select-label { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 10px; color: #84909c; padding: 15px 0; border-top: 1px solid var(--line, rgba(128,145,165,.19)); border-bottom: 1px solid var(--line, rgba(128,145,165,.19)); margin-bottom: 28px; }
.app-select { max-width: 280px; min-height: 35px; padding: 6px 27px 6px 11px; font-size: 10px !important; color: #53677b; background: #fff8; border: 1px solid var(--line, rgba(128,145,165,.19)); border-radius: 5px; }
.app-service-group + .app-service-group { margin-top: 27px; }
.app-service-group-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.app-service-group-heading h2 { font-size: 10px; font-weight: 550; letter-spacing: .025em; }
.app-mini-icon { display: grid; place-items: center; background: var(--tone-bg); color: var(--tone); width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; }
.app-text-button { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 5px 0 5px 5px; border: 0; background: none; color: #8a9cad !important; font-size: 9px !important; white-space: nowrap; }
.app-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
/* Same as the business folders and brands: two columns in a window and on phones, three in a maximized desktop window. */
@media (min-width: 701px) { .os-window.is-maximized .app-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app-service-card { display: flex; flex-direction: column; justify-content: center; position: relative; text-align: left; padding: 16px 31px 16px 16px; min-height: 86px; border: 1px solid var(--line, rgba(128,145,165,.19)); border-radius: 8px; background: #ffffff5c; transition: background 180ms ease, border-color 180ms ease; }
.app-service-card:hover { background: #ffffffe8; border-color: #9cb3ca; }
.app-service-name { font-size: 9px; font-weight: 500; letter-spacing: .025em; overflow-wrap: anywhere; }
.app-service-label { font-size: 10px; color: #8b98a4; margin-top: 4px; overflow-wrap: anywhere; }
.app-card-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #96a7b8; line-height: 0; }
.app-backlink { display: flex; align-items: center; gap: 7px; font-size: 9px !important; letter-spacing: .04em; border: 0; padding: 3px 0; margin-bottom: 28px; background: transparent; color: #7d93a7 !important; }
.app-service-statement { display: flex; gap: 25px; align-items: center; background: linear-gradient(125deg, var(--tone-bg), #fff5); border: 1px solid rgba(var(--tone-rgb), .14); border-radius: 12px; padding: 25px; }
.app-service-statement > span { display: flex; color: var(--tone); }
.app-service-statement p { font-size: 12px; color: #74838f; line-height: 1.95; }
.app-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-feature { border: 1px solid var(--line, rgba(128,145,165,.19)); border-right: 0; padding: 20px 15px; }
.app-feature:first-child { border-radius: 8px 0 0 8px; }
.app-feature:last-child { border-right: 1px solid var(--line, rgba(128,145,165,.19)); border-radius: 0 8px 8px 0; }
.app-feature > span { font-size: 9px; color: #9aabba; }
.app-feature h3 { font-size: 12px; margin-top: 16px; font-weight: 500; }
.app-flow { list-style: none; padding: 0; margin: 0; }
.app-flow li { display: flex; align-items: flex-start; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line, rgba(128,145,165,.19)); }
.app-flow-step { width: 30px; height: 30px; border-radius: 50%; background: #edf1f6; display: grid; place-items: center; font-size: 9px; color: #88a0b5; flex-shrink: 0; }
.app-flow h3 { font-size: 13px; font-weight: 500; margin: 3px 0 6px; }
.app-flow p { color: #8b98a4; font-size: 11px; }

/* CMS works and projects; concept labels appear only on marked records. */
.app-filter-row { display: flex; gap: 8px; margin-bottom: 24px; }
.app-filter { display: inline-flex; gap: 7px; align-items: center; justify-content: center; padding: 6px 14px; min-height: 32px; border-radius: 5px; border: 1px solid transparent; background: transparent; font-size: 10px !important; color: #91a0ad !important; }
.app-filter > span { font-size: 8px; opacity: .6; }
.app-filter.is-active { background: #e9eef5; border-color: #dbe3ec; color: #506c86 !important; }
.app-filter:hover { background: #eef2f7; }
.app-works-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
.app-work-card { border: 0; padding: 0; background: none; text-align: left; min-width: 0; }
/* Two columns in a window and on phones; a maximized desktop window has room for three. */
@media (min-width: 701px) { .os-window.is-maximized .app-works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app-work-image { display: block; position: relative; overflow: hidden; border-radius: 9px; background: #eef1f5; aspect-ratio: 4 / 3; }
.app-work-image img { display: block; object-fit: cover; width: 100%; height: 100%; transition: transform 500ms ease; }
.app-work-card:hover img { transform: scale(1.035); }
.app-work-concept { position: absolute; top: 14px; left: 14px; background: #ffffffbd; border: 1px solid #fff8; border-radius: 4px; padding: 4px 7px; font-size: 7px; letter-spacing: .11em; color: #718091; font-weight: 500; line-height: 1.5; }
.app-work-number { position: absolute; bottom: 13px; right: 14px; font-size: 9px; color: #718096a6; letter-spacing: .1em; }
.app-work-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 15px; }
.app-work-caption .app-eyebrow { font-size: 7px; letter-spacing: .1em; }
.app-work-caption strong { display: block; font-size: 13px; line-height: 1.4; font-weight: 500; margin-top: 7px; letter-spacing: -.025em; }
.app-work-subtitle { display: block; font-size: 9px; margin-top: 5px; color: #909ca8; }
.app-work-arrow { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 1px solid #dce4ec; border-radius: 50%; color: #7a91a8; }
.app-project-hero { position: relative; overflow: hidden; margin: -44px -42px 35px; background: #e7edf5; aspect-ratio: 1.65; }
/* Desktop: the page leads with its words, the picture beside them. Phones keep the picture across the top. */
@media (min-width: 701px) {
  .app-page-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); gap: 30px; align-items: center; margin-bottom: 34px; }
  .app-page-intro .app-intro-text { order: 1; min-width: 0; }
  .app-page-intro .app-intro-text > *:last-child { margin-bottom: 0; }
  .app-page-intro .app-heading { margin-bottom: 0; }
  .app-page-intro .app-heading + .app-small-note, .app-page-intro .app-heading + .app-blog-detail-meta { margin-top: 16px; }
  .app-page-intro .app-project-hero { order: 2; margin: 0; border-radius: 12px; aspect-ratio: 4 / 3; }
  .app-page-intro .app-project-hero .app-work-concept { left: 14px; top: 14px; }
  .app-page-intro .app-detail-icon { margin-top: 0; }
}
/* Maximized on a desktop: the picture holds the left side while the text column scrolls past it.
   The intro's children join the page's own grid, so the picture can span every row beside the content. */
@media (min-width: 701px) {
  .os-window.is-maximized .app-page:has(> .app-page-intro > .app-project-hero) { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); column-gap: 42px; align-items: start; }
  .os-window.is-maximized .app-page:has(> .app-page-intro > .app-project-hero) > * { grid-column: 2; }
  .os-window.is-maximized .app-page-intro { display: contents; }
  /* The side-by-side order must be cleared here, or the heading would be placed after the body text. */
  .os-window.is-maximized .app-intro-text { grid-column: 2; order: 0; margin-bottom: 30px; }
  .os-window.is-maximized .app-project-hero[data-pinned] .app-hero-main { display: none; }
  .os-window.is-maximized .app-project-hero[data-pinned] .app-hero-pinned { display: block; }
  .os-window.is-maximized .app-page-intro .app-project-hero {
    grid-column: 1; grid-row: 1 / span 60; order: 0; position: sticky; top: 18px; align-self: start;
    margin: 0; border-radius: 12px; aspect-ratio: auto; height: calc(100svh - 210px); min-height: 260px;
  }
}
.app-project-hero img { width: 100%; height: 100%; object-fit: cover; }
/* The tall picture waits until a maximized window pins it to the side. */
.app-hero-pinned { display: none; }
.app-project-hero .app-work-concept { left: 25px; top: 25px; }
.app-body-text { font-size: 12px; line-height: 2; color: #7e8b97; }
.app-project-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin: 30px 0 0; padding: 23px 0; border-top: 1px solid var(--line, rgba(128,145,165,.19)); border-bottom: 1px solid var(--line, rgba(128,145,165,.19)); }
.app-project-meta dt { font-size: 8px; letter-spacing: .12em; color: #9aa7b5; }
.app-project-meta dd { margin: 7px 0 0; font-size: 11px; color: #718290; }
.app-project-detail > .app-button { margin-top: 24px; }

/* Contact form with accessible pending, error and persistent receipt states. */
.app-contact .app-heading { margin-bottom: 24px; }
.app-contact .app-heading h1 { font-size: 36px; }
.app-prototype-note { display: flex; align-items: flex-start; gap: 11px; border: 1px solid #dce5ed; border-radius: 7px; padding: 13px 15px; background: #edf3f778; color: #8599aa; margin-bottom: 27px; }
.app-prototype-note > svg { flex-shrink: 0; margin-top: 2px; }
.app-prototype-note p { font-size: 10px; line-height: 1.8; }
.app-prototype-note strong { font-weight: 500; color: #607587; display: block; }
.app-prototype-note span { display: block; margin-top: 2px; }
.app-contact-form > label { display: block; margin-top: 20px; }
.app-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
.app-contact-form label { font-size: 11px; font-weight: 500; color: #687a8a; }
.app-contact-form input:not([type='checkbox']), .app-contact-form select, .app-contact-form textarea { display: block; width: 100%; border: 1px solid #dce3eb; border-radius: 6px; color: #526575; background: #ffffff9e; padding: 11px 12px; margin-top: 7px; outline: 0; font-size: 12px; transition: border-color 150ms ease, box-shadow 150ms ease; }
.app-contact-form textarea { resize: vertical; min-height: 115px; }
.app-contact-form input::placeholder, .app-contact-form textarea::placeholder { color: #a9b3be; font-size: 11px; }
.app-contact-form input:focus, .app-contact-form select:focus, .app-contact-form textarea:focus, .app-select:focus-visible { border-color: #8eaecb; box-shadow: 0 0 0 3px #85a1c114; outline: none; }
.app-field-optional, .app-field-required { font-size: 8px; font-weight: 400; margin-left: 8px; color: #aab5bf; }
.app-field-required { color: #879daf; }
.app-privacy { margin-top: 20px; padding: 14px 0; border-top: 1px solid var(--line, rgba(128,145,165,.19)); border-bottom: 1px solid var(--line, rgba(128,145,165,.19)); }
.app-privacy summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: #7c8ea0; }
.app-privacy summary::-webkit-details-marker { display: none; }
.app-privacy[open] summary > svg { transform: rotate(45deg); }
.app-privacy p { font-size: 10px; line-height: 1.9; color: #8898a7; padding-top: 12px; }
.app-contact-form > .app-checkbox { display: flex; align-items: flex-start; gap: 9px; font-size: 10px; font-weight: 400; line-height: 1.8; }
.app-checkbox input { margin: 2px 0 0; width: 14px; height: 14px; flex: 0 0 auto; accent-color: #718ba6; }
.app-checkbox input:focus-visible { outline: 2px solid #6689b4; outline-offset: 3px; }
.app-submit { width: 100%; margin-top: 23px; min-height: 46px; }
.app-form-footnote { margin-top: 9px !important; text-align: center; font-size: 9px; color: #96a3af; }
.app-contact-preview { text-align: center; padding-top: 10px; outline: 0; }
.app-preview-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #e7f0ed; color: #7c9e93; margin: 0 auto 20px; }
.app-contact-preview h2 { font-weight: 500; font-size: 23px; margin-top: 11px; letter-spacing: -.03em; }
.app-contact-preview > p { font-size: 11px; line-height: 1.9; color: #8796a4; margin-top: 13px; }
.app-preview-fields { margin: 28px 0; border-top: 1px solid var(--line, rgba(128,145,165,.19)); text-align: left; }
.app-preview-fields > div { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line, rgba(128,145,165,.19)); }
.app-preview-fields dt { font-size: 10px; color: #93a1ad; }
.app-preview-fields dd { margin: 0; font-size: 11px; color: #667a8c; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .app-page { padding: 30px 24px 40px; }
  .app-heading h1 { font-size: 27px; }
  .app-heading > p { font-size: 12px; }
  .app-page.app-about { padding-top: 22px; }
  .app-edition { display: none; }
  .app-about-hero { padding-top: 53px; padding-bottom: 45px; }
  .app-about-art { right: -64px; top: 14px; transform: scale(.87); opacity: .55; }
  .app-art-word { right: 78px; }
  .app-about-hero > p { font-size: 8px; letter-spacing: .05em; }
  .app-about-intro h2 { font-size: 22px; }
  .app-value { padding: 0 12px; }
  .app-value-letter { font-size: 46px; }
  .app-value p { font-size: 8px; }
  .app-about-bottom { flex-direction: column; align-items: flex-start; }
  .app-folder-grid { gap: 11px; }
  .app-folder-card { padding: 17px 15px 14px; min-height: 210px; }
  .app-folder-card > strong { font-size: 10px; min-height: 28px; }
  .app-folder-label { font-size: 9px; }
  .app-folder-top { margin-bottom: 21px; }
  .app-folder-art { width: 57px; height: 41px; }
  .app-folder-foot > span { font-size: 7px; letter-spacing: .05em; }
  .app-service-grid { gap: 8px; }
  .app-service-card { padding: 13px 25px 13px 12px; min-height: 94px; }
  .app-service-name { font-size: 8px; }
  .app-service-label { font-size: 9px; }
  .app-card-arrow { right: 8px; }
  .app-card-arrow svg { width: 15px; }
  .app-service-group-heading { gap: 7px; flex-wrap: wrap; }
  .app-service-group-heading h2 { font-size: 9px; }
  .app-service-group-heading .app-text-button { font-size: 8px !important; }
  .app-select-label { align-items: flex-start; flex-direction: column; gap: 8px; }
  .app-select { width: 100%; max-width: none; min-height: 40px; }
  .app-service-statement { flex-direction: column; align-items: flex-start; gap: 15px; padding: 20px; }
  .app-feature { padding: 16px 10px; }
  .app-feature h3 { font-size: 10px; }
  .app-works-grid { gap: 24px 13px; }
  .app-work-image { aspect-ratio: 1 / 1.2; }
  .app-work-caption { gap: 6px; align-items: flex-start; }
  .app-work-caption strong { font-size: 10px; }
  .app-work-subtitle { font-size: 8px; }
  .app-work-caption .app-eyebrow { font-size: 6px; }
  .app-work-arrow { width: 22px; height: 22px; margin-top: 18px; }
  .app-work-arrow svg { width: 13px; }
  .app-work-concept { top: 9px; left: 9px; padding: 3px 5px; font-size: 6px; letter-spacing: .04em; }
  .app-filter-row { gap: 2px; }
  .app-filter { padding: 7px 11px; font-size: 10px !important; }
  .app-project-hero { margin: -30px -24px 29px; aspect-ratio: 1.2; }
  .app-project-meta { gap: 22px 14px; }
  .app-project-meta dd { font-size: 10px; }
  .app-contact .app-heading h1 { font-size: 31px; }
  .app-form-grid { grid-template-columns: 1fr; gap: 18px; }
  .app-contact-form input:not([type='checkbox']), .app-contact-form select, .app-contact-form textarea { font-size: 16px; }
  .app-contact-form label { font-size: 12px; }
  .app-contact-preview h2 { font-size: 21px; }
  .app-preview-fields > div { grid-template-columns: 75px minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 370px) {
  .app-page { padding-left: 18px; padding-right: 18px; }
  .app-about-art { right: -75px; }
  .app-art-word { right: 90px; }
  .app-folder-card { padding-left: 12px; padding-right: 12px; }
  .app-service-group-heading .app-text-button { margin-left: 37px; }
  .app-project-hero { margin-left: -18px; margin-right: -18px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-page *, .app-page *::before, .app-page *::after { transition-duration: .01ms !important; animation: none !important; }
  .app-work-card:hover img, .app-folder-card:hover, .app-button:hover { transform: none; }
}

/* Live CMS content retains the quiet typography and glass surfaces of the OS. */
.app-page { overflow-wrap: anywhere; }
.app-page a.app-button { text-decoration: none; color: inherit; }
.app-page a.app-button-primary { color: #fff; }
.app-page a:focus-visible { outline: 2px solid #6689b4; outline-offset: 4px; }
.app-empty-state { grid-column: 1 / -1; padding: 30px 18px; border: 1px dashed #cdd8e2; border-radius: 9px; color: #748697; font-size: 12px; text-align: center; }
.app-explore-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.app-explore-nav button { display: grid; grid-template-columns: 1fr auto; padding: 17px; text-align: left; border: 1px solid #d9e2ea; border-radius: 8px; background: #ffffff6b; color: #6e8294; }
.app-explore-nav button > span:first-child { grid-column: 1 / -1; font-size: 8px; letter-spacing: .12em; margin-bottom: 8px; }
.app-explore-nav strong { font-size: 12px; font-weight: 500; }
.app-explore-nav button > span:last-child { display: flex; align-items: center; gap: 7px; font-size: 9px; }
.app-explore-nav button:hover, .app-editorial-card:hover { background: #fff; border-color: #9fb7cd; }
.app-company-profile:empty { display: none; }
.app-editorial-list { display: grid; gap: 12px; }
.app-editorial-card { display: flex; gap: 17px; align-items: center; width: 100%; text-align: left; border: 1px solid #dbe3eb; border-radius: 10px; padding: 19px; background: #ffffff6b; }
.app-editorial-card > img { width: 84px; height: 84px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.app-editorial-card > span { min-width: 0; flex: 1; }
.app-editorial-card > svg { flex-shrink: 0; color: #8a9faf; }
.app-editorial-card strong, .app-editorial-card time, .app-editorial-card small, .app-editorial-card > span > span { display: block; }
.app-editorial-card time, .app-editorial-card small { color: #889cad; font-size: 9px; letter-spacing: .06em; }
.app-editorial-card strong { font-size: 14px; font-weight: 500; margin: 7px 0; }
.app-editorial-card > span > span { font-size: 11px; color: #8393a1; line-height: 1.8; }
.app-image-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: #a3b4c5; background: linear-gradient(130deg, #f3f7fa, #e2e9f2); }
.app-form-status { min-height: 20px; margin-top: 12px !important; font-size: 11px; line-height: 1.8; color: #6d897e; }
.app-form-status.is-error { color: #a34e51; }
.app-submit:disabled { opacity: .6; cursor: wait; }
.app-contact-honeypot { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-contact-reference { font-weight: 500; letter-spacing: .03em; }
.app-privacy p { white-space: pre-line; }
.app-load-state h1 { font-size: 22px; margin: 15px 0; font-weight: 500; }
.app-load-state p { color: #7d8d9b; font-size: 12px; line-height: 1.9; margin: 14px 0 22px; }
.cms-connection-status { position: fixed; z-index: 1500; left: 50%; bottom: 120px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 30px); width: max-content; padding: 13px 17px; border: 1px solid #cbd8e4; border-radius: 10px; background: #f8fafdf2; box-shadow: 0 8px 28px #60758c20; color: #62798e; font-size: 12px; }
.cms-connection-status[hidden] { display: none; }
.cms-connection-status button { flex-shrink: 0; border: 1px solid #b9cad9; border-radius: 5px; padding: 6px 10px; background: #fff; color: #516e86; }
.cms-block { margin: 26px 0; font-size: 12px; color: #708394; line-height: 1.95; }
.cms-block h2 { color: #4d6579; font-size: 23px; line-height: 1.5; font-weight: 500; margin: 0; }
.cms-block h3 { color: #566e82; font-size: 15px; line-height: 1.7; font-weight: 500; margin: 0 0 8px; }
.cms-block p { white-space: normal; }
.cms-block figure, .cms-block blockquote { margin: 0; }
.cms-block img, .cms-block video { display: block; width: 100%; max-height: 620px; object-fit: contain; border-radius: 9px; }
.cms-block figcaption { font-size: 10px; color: #8497a7; margin-top: 9px; text-align: center; }
.cms-block blockquote { border-left: 3px solid #aebfd1; padding: 10px 0 10px 22px; }
.cms-block blockquote p { font-size: 17px; }
.cms-block cite { display: block; font-style: normal; margin-top: 12px; color: #8f9dad; font-size: 10px; }
.cms-text-image { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: center; }
.cms-image-left img { grid-column: 1; grid-row: 1; }
.cms-image-left p { grid-column: 2; }
/* Gallery: the pictures stand side by side on a strip that slides. */
.cms-gallery { position: relative; }
.cms-gallery-track { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.cms-gallery-track::-webkit-scrollbar { display: none; }
.cms-gallery-track:focus-visible { outline: 2px solid #9db8d4; outline-offset: 2px; border-radius: 11px; }
.cms-slide { flex: 0 0 46%; margin: 0; scroll-snap-align: start; }
@media (min-width: 701px) { .os-window.is-maximized .cms-slide { flex-basis: 31%; } }
.cms-gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.cms-gallery-arrow { position: absolute; top: calc(50% - 30px); display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #d5e0ea; border-radius: 50%; background: #ffffffec; color: #5d7690; cursor: pointer; box-shadow: 0 8px 18px -12px #46617e99; transition: opacity 250ms ease, background 250ms ease; }
.cms-gallery-back { left: -7px; }
.cms-gallery-next { right: -7px; }
.cms-gallery-arrow:hover:not(:disabled) { background: #fff; }
.cms-gallery-arrow:disabled { opacity: .3; cursor: default; }
.cms-gallery-dots { display: flex; justify-content: center; gap: 7px; margin-top: 13px; }
.cms-gallery-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #c8d5e1; cursor: pointer; transition: width 250ms ease, background 250ms ease; }
.cms-gallery-dot[aria-current] { width: 19px; border-radius: 4px; background: #7f9bb5; }
/* One picture, or a strip that already fits: nothing to slide through. */
.cms-gallery.is-static .cms-gallery-arrow, .cms-gallery.is-static .cms-gallery-dots { display: none; }
.cms-features, .cms-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.cms-features > section, .cms-prices > section { padding: 20px; border: 1px solid #dbe4ec; border-radius: 9px; background: #ffffff5e; }
.cms-prices strong { display: block; font-weight: 500; color: #637f99; font-size: 22px; margin: 8px 0; }
.cms-numbers { display: flex; flex-wrap: wrap; gap: 22px; }
.cms-numbers > div { flex: 1 1 130px; display: flex; flex-direction: column-reverse; border-top: 1px solid #dbe4ec; padding-top: 10px; }
.cms-numbers dd { margin: 0; font-size: 39px; line-height: 1.6; letter-spacing: -.04em; color: #6d89a0; }
.cms-numbers dt { font-size: 11px; }
.cms-faq details { border-bottom: 1px solid #dbe4ec; padding: 15px 0; }
.cms-faq summary { cursor: pointer; color: #576f81; font-weight: 500; }
.cms-faq p { margin-top: 12px; padding-left: 15px; }
.cms-cta { display: flex; gap: 20px; justify-content: space-between; align-items: center; padding: 24px; background: #eaf0f67d; border: 1px solid #dce6ed; border-radius: 10px; }
.cms-cta .app-button { flex-shrink: 0; text-decoration: none; }
.cms-block-spacer { margin: 0; }
.cms-space-24 { height: 24px; }.cms-space-48 { height: 48px; }.cms-space-80 { height: 80px; }
.app-filter-row { flex-wrap: wrap; }
@media (max-width: 700px) {
  .cms-connection-status { bottom: 102px; font-size: 11px; }
  .cms-text-image { grid-template-columns: 1fr; gap: 18px; }
  .cms-image-left img, .cms-image-left p { grid-column: auto; grid-row: auto; }
  .cms-image-left img { order: -1; }
  .cms-gallery-track { gap: 10px; }
  .cms-slide { flex-basis: 82%; }
  .cms-gallery-arrow { display: none; }
  .cms-cta { flex-direction: column; align-items: flex-start; }
  .app-editorial-card { padding: 15px; gap: 12px; }
  .app-editorial-card > img { width: 60px; height: 60px; }
  .app-editorial-card strong { font-size: 12px; }
}
/* Brands — a logo wall that also reads well before covers are uploaded. */
.app-brands .app-heading h1 { line-height: 1.35; }
.app-brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; margin-bottom: 8px; }
/* Same as the business folders: two columns in a window and on phones, three in a maximized desktop window. */
@media (min-width: 701px) { .os-window.is-maximized .app-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app-brand-card { border: 0; padding: 0; background: none; text-align: left; min-width: 0; }
.app-brand-visual { display: grid; place-items: center; position: relative; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid #e0e8f0; border-radius: 10px; background: linear-gradient(135deg, #f6f9fc, #e4ecf5); transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease; }
.app-brand-visual::before { content: ""; position: absolute; width: 62%; aspect-ratio: 1; right: -18%; top: -34%; border-radius: 50%; border: 1px solid #ffffffd9; background: radial-gradient(circle at 35% 35%, #ffffffd6, #ffffff00 68%); }
.app-brand-tone-1 .app-brand-visual { background: linear-gradient(135deg, #f8f7fc, #e8e5f4); }
.app-brand-tone-2 .app-brand-visual { background: linear-gradient(135deg, #f5faf9, #e0eeeb); }
.app-brand-tone-3 .app-brand-visual { background: linear-gradient(135deg, #fbf8f6, #f1e8e1); }
.app-brand-visual img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; }
.app-brand-monogram { position: relative; font-size: 44px; font-weight: 300; letter-spacing: .04em; color: #6f8aa6; }
.app-brand-tone-1 .app-brand-monogram { color: #8a80b1; }
.app-brand-tone-2 .app-brand-monogram { color: #6a9c93; }
.app-brand-tone-3 .app-brand-monogram { color: #b08f78; }
.app-brand-number { position: absolute; left: 14px; bottom: 12px; font-size: 9px; color: #718096a6; letter-spacing: .1em; }
.app-brand-card:hover .app-brand-visual, .app-brand-card:focus-visible .app-brand-visual { transform: translateY(-3px); border-color: #b9cbdc; box-shadow: 0 14px 30px #5f789326; }
.app-brand-caption { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 14px; }
.app-brand-caption > span:first-child { min-width: 0; }
.app-brand-caption strong { display: block; font-size: 14px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; overflow-wrap: anywhere; }
.app-brand-summary { display: block; margin-top: 6px; font-size: 11px; line-height: 1.8; color: #8393a1; }
.app-brand-arrow { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border: 1px solid #dce4ec; border-radius: 50%; color: #7a91a8; }
@media (max-width: 700px) {
  .app-brand-grid { gap: 20px 12px; }
  .app-brand-visual { aspect-ratio: 1 / 1; }
  .app-brand-monogram { font-size: 32px; }
  .app-brand-caption strong { font-size: 12px; }
  .app-brand-summary { font-size: 10px; line-height: 1.7; }
  .app-brand-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .app-brand-visual { transition: none; } .app-brand-card:hover .app-brand-visual { transform: none; } }

/* Blog: cards in two columns (three in a maximized desktop window), a date and a category on each. */
.app-blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; margin-bottom: 8px; }
@media (min-width: 701px) { .os-window.is-maximized .app-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app-blog-card { border: 0; padding: 0; background: none; text-align: left; min-width: 0; }
.app-blog-visual { display: grid; place-items: center; position: relative; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid #e0e8f0; border-radius: 10px; background: linear-gradient(135deg, #f6f9fc, #e7eef6); transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease; }
.app-blog-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-blog-visual .app-image-placeholder { color: #9db3c8; }
.app-blog-card:hover .app-blog-visual, .app-blog-card:focus-visible .app-blog-visual { transform: translateY(-3px); border-color: #b9cbdc; box-shadow: 0 14px 30px #5f789326; }
.app-blog-tag { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; font-size: 9px; letter-spacing: .06em; color: #52708c; background: #ffffffe0; border: 1px solid #dbe6f0; }
.app-blog-caption { display: block; margin-top: 13px; position: relative; padding-right: 34px; }
.app-blog-caption time { display: block; color: #889cad; font-size: 9px; letter-spacing: .08em; }
.app-blog-caption strong { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; font-weight: 500; letter-spacing: -.01em; overflow-wrap: anywhere; }
.app-blog-summary { display: block; margin-top: 6px; font-size: 11px; line-height: 1.8; color: #8393a1; }
.app-blog-arrow { display: grid; place-items: center; position: absolute; right: 0; top: 10px; width: 30px; height: 30px; border: 1px solid #dce4ec; border-radius: 50%; color: #7a91a8; }
.app-blog-detail-meta { display: flex; align-items: center; gap: 10px; margin: -6px 0 18px; color: #889cad; font-size: 10px; letter-spacing: .08em; }
.app-blog-detail-meta .app-blog-tag { position: static; }
.app-blog-next { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 22px; text-align: left; }
.app-blog-next span { color: #8a9faf; font-size: 9px; letter-spacing: .1em; }
.app-blog-next strong { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.app-blog-more { margin-top: 34px; }
@media (max-width: 700px) {
  .app-blog-grid { gap: 20px 12px; }
  .app-blog-visual { aspect-ratio: 1 / 1; }
  .app-blog-caption { padding-right: 0; }
  .app-blog-caption strong { font-size: 12px; }
  .app-blog-summary { font-size: 10px; line-height: 1.7; }
  .app-blog-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .app-blog-visual { transition: none; } .app-blog-card:hover .app-blog-visual { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cms-gallery-track { scroll-behavior: auto; } .cms-gallery-arrow, .cms-gallery-dot { transition: none; } }
html[data-reduced-motion="true"] .cms-gallery-track { scroll-behavior: auto; }
html[data-reduced-motion="true"] .cms-gallery-arrow, html[data-reduced-motion="true"] .cms-gallery-dot { transition: none; }

/* A maximized window on a wide screen fits a fourth column. Detail pages keep three, because their
   picture holds the left side and the cards only have the rest of the width. */
@media (min-width: 1200px) {
  .os-window.is-maximized .app-page:not(:has(> .app-page-intro > .app-project-hero)) .app-folder-grid,
  .os-window.is-maximized .app-page:not(:has(> .app-page-intro > .app-project-hero)) .app-service-grid,
  .os-window.is-maximized .app-page:not(:has(> .app-page-intro > .app-project-hero)) .app-works-grid,
  .os-window.is-maximized .app-page:not(:has(> .app-page-intro > .app-project-hero)) .app-brand-grid,
  .os-window.is-maximized .app-page:not(:has(> .app-page-intro > .app-project-hero)) .app-blog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Links block: buttons that show what they are — a link mark, the words 外部リンク / サイト内,
   and where it leads. On a phone they stack full width. */
.cms-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cms-links > li { display: flex; max-width: 100%; }
.cms-link { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-height: 48px; padding: 9px 15px 9px 11px; border: 1px solid #ccd9e6; border-radius: 9px; background: rgba(255, 255, 255, .78); color: inherit; text-decoration: none; transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.cms-link:hover { background: #fff; transform: translateY(-2px); border-color: #9fbbd6; box-shadow: 0 6px 16px #4455681a; }
.cms-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.cms-link:focus-visible { outline: 2px solid #6689b4; outline-offset: 3px; }
.cms-link-icon { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #52708c; background: #e7eff7; }
.cms-link:hover .cms-link-icon { color: #37587a; background: #dae8f5; }
.cms-link-text { min-width: 0; }
.cms-link strong { display: block; font-size: 11.5px; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.cms-link small { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 3px; font-size: 9.5px; line-height: 1.5; color: #8497a7; }
.cms-link-kind { padding: 1px 6px; border: 1px solid #cfdcea; border-radius: 999px; color: #5d7a99; background: #f2f7fc; letter-spacing: .04em; white-space: nowrap; }
.cms-link-note { overflow-wrap: anywhere; }
.cms-link-mark { flex-shrink: 0; display: grid; place-items: center; color: #7a91a8; }
@media (max-width: 700px) {
  .cms-links > li { width: 100%; }
  .cms-link { width: 100%; padding: 9px 13px 9px 10px; }
  .cms-link-mark { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .cms-link { transition: none; } .cms-link:hover { transform: none; } }
html[data-reduced-motion="true"] .cms-link { transition: none; }
html[data-reduced-motion="true"] .cms-link:hover { transform: none; }

/* Equipment: cards that show the machine and what it can do. */
.app-equipment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; margin-bottom: 8px; }
@media (min-width: 701px) { .os-window.is-maximized .app-equipment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .os-window.is-maximized .app-page:not(:has(> .app-page-intro > .app-project-hero)) .app-equipment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.app-equipment-card { border: 0; padding: 0; background: none; text-align: left; min-width: 0; }
.app-equipment-visual { display: grid; place-items: center; position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid #e0e8f0; border-radius: 10px; background: linear-gradient(135deg, #f6f9fc, #e7eef6); transition: transform 320ms ease, box-shadow 320ms ease, border-color 320ms ease; }
.app-equipment-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-equipment-visual .app-image-placeholder { color: #9db3c8; }
.app-equipment-card:hover .app-equipment-visual, .app-equipment-card:focus-visible .app-equipment-visual { transform: translateY(-3px); border-color: #b9cbdc; box-shadow: 0 14px 30px #5f789326; }
.app-equipment-caption { display: block; position: relative; margin-top: 13px; padding-right: 34px; }
.app-equipment-caption strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.app-equipment-spec { display: block; margin-top: 4px; font-size: 10px; color: #8497a7; overflow-wrap: anywhere; }
.app-equipment-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.app-equipment-tags span { padding: 3px 8px; border: 1px solid #dbe6f0; border-radius: 999px; font-size: 9px; color: #52708c; background: #f4f9fd; }
.app-equipment-arrow { display: grid; place-items: center; position: absolute; right: 0; top: 6px; width: 30px; height: 30px; border: 1px solid #dce4ec; border-radius: 50%; color: #7a91a8; }
.app-equipment-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.app-equipment-list li { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border: 1px solid #dbe4ec; border-radius: 9px; background: #ffffff70; font-size: 12px; line-height: 1.8; }
.app-equipment-list svg { flex-shrink: 0; margin-top: 4px; color: #6a91b8; }
.app-equipment-meta { margin-top: 18px; }
@media (max-width: 700px) {
  .app-equipment-grid { gap: 18px 12px; }
  .app-equipment-caption { padding-right: 0; }
  .app-equipment-caption strong { font-size: 11px; }
  .app-equipment-arrow { display: none; }
  .app-equipment-list li { font-size: 11px; padding: 11px 13px; }
}
@media (prefers-reduced-motion: reduce) { .app-equipment-visual { transition: none; } .app-equipment-card:hover .app-equipment-visual { transform: none; } }

/* Product catalogue block: category chips, a search box, a dense grid of products and an enlarged view. */
.cms-catalog > h2 { font-size: 18px; font-weight: 500; letter-spacing: -.03em; }
.cms-catalog-note { margin-top: 8px !important; font-size: 11px; line-height: 1.9; color: #7e8b97; }
.cms-catalog-body { margin-top: 18px; }
.cms-catalog-status { padding: 26px 0; text-align: center; font-size: 11px; color: #8497a7; }
.cms-catalog-tools { display: grid; gap: 12px; }
.cms-catalog-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cms-catalog-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 5px 12px; border: 1px solid #dbe3ec; border-radius: 999px; background: #ffffff80; font-size: 10.5px !important; color: #5f768c !important; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; }
.cms-catalog-chip span { font-size: 9px; color: #9aa9b8; }
.cms-catalog-chip:hover { background: #fff; border-color: #bacbdb; }
.cms-catalog-chip.is-active { background: #344656; border-color: #344656; color: #fff !important; }
.cms-catalog-chip.is-active span { color: #c6d3df; }
.cms-catalog-search input { width: 100%; min-height: 42px; padding: 9px 14px; border: 1px solid #d3deea; border-radius: 9px; background: #fff; font-size: 16px; color: inherit; }
.cms-catalog-search input:focus { outline: 2px solid #6689b4; outline-offset: 2px; }
.cms-catalog-count { margin-top: 14px !important; font-size: 10px; letter-spacing: .06em; color: #8497a7; }
.cms-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.cms-catalog-grid > li { min-width: 0; }
.cms-catalog-card { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.cms-catalog-photo { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 1px solid #e0e8f0; border-radius: 9px; background: #f3f6fa; transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease; }
.cms-block .cms-catalog-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; }
.cms-catalog-card:hover .cms-catalog-photo, .cms-catalog-card:focus-visible .cms-catalog-photo { transform: translateY(-2px); border-color: #b9cbdc; box-shadow: 0 10px 22px #5f789322; }
.cms-catalog-nophoto { font-size: 9px; color: #9aa9b8; }
.cms-catalog-name { display: block; margin-top: 8px; font-size: 10.5px; line-height: 1.55; overflow-wrap: anywhere; }
.cms-catalog-code { display: block; margin-top: 2px; font-size: 9.5px; letter-spacing: .06em; color: #7f6aa6; font-weight: 600; }
.cms-catalog-empty { padding: 30px 0; text-align: center; font-size: 11px; color: #8497a7; }
@media (max-width: 700px) {
  .cms-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px 9px; }
  .cms-catalog-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px; padding: 0 24px 4px; scrollbar-width: none; }
  .cms-catalog-chips::-webkit-scrollbar { display: none; }
  .cms-catalog-chip { flex: 0 0 auto; }
}
/* The enlarged view sits above the windows and the Dock. */
.cms-catalog-viewer { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 18px; }
.cms-catalog-viewer[hidden] { display: none; }
.cms-catalog-viewer-backdrop { position: absolute; inset: 0; background: rgb(28 44 66 / 46%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.cms-catalog-viewer-panel { position: relative; display: grid; gap: 14px; width: min(560px, 100%); max-height: calc(100svh - 36px); overflow: auto; padding: 18px 18px 16px; border: 1px solid #ffffffd9; border-radius: 18px; background: #fbfdff; box-shadow: 0 30px 80px -30px #1f3350a6; color: #23313d; animation: cms-catalog-rise 220ms ease both; }
.cms-catalog-viewer-photo { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: min(58svh, 520px); overflow: hidden; border-radius: 12px; background: #eef2f7; }
.cms-catalog-viewer-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.cms-catalog-viewer-text { display: grid; gap: 3px; }
.cms-catalog-viewer-category { font-size: 9px; letter-spacing: .12em; color: #8497a7; }
.cms-catalog-viewer-text strong { font-size: 17px; font-weight: 500; line-height: 1.5; letter-spacing: -.02em; }
.cms-catalog-viewer-en { font-size: 10.5px; color: #8a99a8; }
.cms-catalog-viewer-code { margin-top: 5px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #7f6aa6; }
.cms-catalog-viewer-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cms-catalog-viewer-nav button, .cms-catalog-viewer-close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #d5e0ea; border-radius: 50%; background: #fff; color: #4f6a85; font-size: 20px; line-height: 1; cursor: pointer; }
.cms-catalog-viewer-nav button:disabled { opacity: .3; cursor: default; }
.cms-catalog-viewer-close { position: absolute; top: 10px; right: 10px; z-index: 1; box-shadow: 0 6px 16px -8px #46617e88; }
.cms-catalog-viewer-position { font-size: 10px; letter-spacing: .1em; color: #8497a7; }
.cms-catalog-viewer button:focus-visible { outline: 2px solid #6689b4; outline-offset: 2px; }
@keyframes cms-catalog-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cms-catalog-viewer-panel { animation: none; } .cms-catalog-photo, .cms-catalog-chip { transition: none; } .cms-catalog-card:hover .cms-catalog-photo { transform: none; } }
html[data-reduced-motion="true"] .cms-catalog-viewer-panel { animation: none; }
html[data-reduced-motion="true"] .cms-catalog-photo, html[data-reduced-motion="true"] .cms-catalog-chip { transition: none; }
html[data-reduced-motion="true"] .cms-catalog-card:hover .cms-catalog-photo { transform: none; }