/* Page layouts and component refinements. Shared tokens and primitives live in
   base.css; Utilities opts in separately, and layout.css owns the shared shell. */
.ss-page [hidden] {
  display: none!important;
}

.ss-page-intro {
  margin: var(--space-15) 0;
}

.ss-section {
  padding: var(--space-15) 0;
  scroll-margin-top: 30px;
}

.ss-section-heading {
  margin-bottom: var(--space-10);
}

.ss-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: var(--space-10);
}

.ss-split,.ss-contact-grid,.ss-form-row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-10);
}

.ss-divisions:has(> :nth-child(2):last-child) {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.ss-card,.ss-item-card,.ss-division {
  min-width: 0;
}

.ss-division,.ss-item-card,.ss-service-link {
  text-decoration: none;
  padding: 0;
  color: inherit;
}

.ss-division {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.ss-service-group {
  margin: var(--space-15) 0;
}

.ss-service-group>p {
  margin: var(--space-6) 0 var(--space-10);
}

.ss-service-list {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap: var(--space-3);
  width: 100%;
}

.ss-service-link,.ss-pillar-content > .ss-actions > .ss-quote-button > .text-block-65 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  min-width: 0;
  padding: var(--space-4) 18px;
  border: 1px solid #ffffff80;
  border-radius: var(--radius-md);
  font-size: 18px;
  line-height: 1.5;
  text-decoration: none;
}

.ss-service-link {
  /* Match the black Lucide artwork at its existing 55% opacity. */
  color: rgb(0 0 0 / 55%);
  font-weight: 400;
  background: #ffffff40;
}

.ss-service-link img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
  opacity: .55;
}

.ss-service-link:is(:hover,:focus-visible) {
  color: rgb(0 0 0 / 55%);
  text-decoration: none;
  box-shadow: var(--shadow-glass-hover);
}

.ss-service-link:active {
  box-shadow: var(--shadow-control-inset);
}

.ss-text-link {
  padding: 0;
  font-size: inherit;
}

.about-invitation {
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-top: clamp(var(--space-12),6vw,96px);
  padding-block: clamp(var(--space-12),6vw,88px);
}

.about-invitation .div-block-41 {
  width: 100%;
  max-width: none;
  padding: clamp(var(--space-12),6vw,88px) clamp(var(--space-5),4vw,var(--space-16));
  background: var(--bg-base);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 0 40px 20px var(--bg-base);
}

.about-invitation .ss-split {
  align-items: center;
  gap: clamp(var(--space-8),4vw,var(--space-16));
}

.about-invitation-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.about-invitation-copy {
  min-width: 0;
  text-align: left;
}

.about-invitation h2 {
  margin: 0 0 var(--space-6);
  color: var(--brand-slate);
  font-size: clamp(32px,3vw,48px);
  line-height: 1.15;
}

.about-invitation .paragraph-6 {
  max-width: 760px;
  margin: 0 0 var(--space-10);
  background: transparent;
  text-align: left;
}

.about-invitation-rows {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: clamp(56px,7vw,96px);
}

.about-invitation .special_btn {
  display: inline-flex;
  max-width: 100%;
}

.about-invitation .text-block-65 {
  white-space: normal;
  text-align: center;
}

.ss-logo-panel {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-logo-panel img {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
}

.ss-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: contain;
  padding: 30px;
}

.ss-item-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ss-item-card .ss-text-link {
  margin-top: auto;
}

.ss-breadcrumb {
  flex-wrap: wrap;
  margin: var(--space-5) 0 var(--space-15);
  width: fit-content;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: none;
  gap: var(--space-2);
}

.ss-detail-hero {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(var(--space-6),4vw,var(--space-15));
  align-items: center;
  margin: var(--space-15) 0;
}

.ss-detail-layout {
  display: grid;
  grid-template-columns: 240px minmax(0,1fr);
  gap: var(--space-15);
}

.ss-detail-toc {
  position: sticky;
  top: 124px;
  align-self: start;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 1;
  max-height: calc(100svh - 148px);
  overflow-y: auto;
}

.ss-detail-toc a {
  display: block;
  padding: 10px var(--space-3);
  font-size: var(--content-compact-size);
  text-decoration: none;
  color: var(--brand-slate-dark);
}

.ss-article {
  max-width: 1000px;
  position: relative;
  background: var(--bg-base);
}

.ss-article>section {
  padding: var(--space-10) 0;
  scroll-margin-top: 30px;
}

.ss-article h2 {
  margin-bottom: var(--space-8);
}

.ss-price {
  margin: var(--space-10) 0;
  scroll-margin-top: 124px;
}

.ss-gallery-group {
  margin-bottom: var(--space-20);
}

.ss-gallery-group h3 {
  margin-bottom: var(--space-10);
}

.ss-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  border: 1px solid #ffffff66;
  border-radius: var(--radius-lg);
  background: var(--bg-base);
  box-shadow: var(--shadow-glass);
}

.ss-form label {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ss-form input,.ss-form select,.ss-form textarea {
  min-width: 0;
  width: 100%;
  margin-bottom: 0;
}

.ss-form textarea {
  resize: vertical;
  min-height: 180px;
}

.ss-form .ss-check {
  flex-direction: row;
  align-items: center;
}

.ss-form .special_btn {
  align-self: start;
}

.ss-page button.special_btn {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.ss-status {
  margin: var(--space-6) 0;
}

.ss-status:empty {
  display: none;
}

.ss-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ss-page :focus-visible:not(.portfolio-tile) {
  outline: 2px solid var(--brand-slate);
  outline-offset: 4px;
}

@media(max-width:991px) {
  .ss-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .ss-detail-layout,.ss-contact-grid {
    grid-template-columns: 1fr;
  }

  .ss-detail-toc {
    position: static;
  }

}

@media(max-width:767px) {
  .ss-grid,.ss-split,.ss-form-row,.ss-detail-hero,.ss-divisions:has(> :nth-child(2):last-child) {
    grid-template-columns: 1fr;
  }

  .ss-section {
    padding: var(--space-10) 0;
  }

  .ss-detail-toc {
    display: none;
  }

  .ss-breadcrumb span {
    display: inline;
  }

  body[data-content-page] .heading-12 {
    overflow-wrap: anywhere;
    font-size: clamp(32px,10vw,52px);
  }

}

/* Division content reuses the site's container, headings, buttons and palette. */
.ss-division-page .ss-page-intro {
  max-width: 900px;
}

.ss-pillar {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--space-15);
  align-items: center;
  background: var(--bg-base);
  border: 0;
  box-shadow: 0 0 40px 20px var(--bg-base);
}

.ss-pillar-photo {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-panel);
  background: var(--bg-base);
  box-shadow: var(--shadow-glass);
}

.ss-pillar-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 18px;
}

.ss-pillar-content {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.ss-pillar-content .heading-19 {
  margin-top: 0;
  margin-bottom: var(--space-6);
}

.ss-pillar-content > p {
  margin-bottom: 30px;
  max-width: 58ch;
}

/* Service actions begin at the same edge as their copy. */
.ss-pillar-content > .ss-actions {
  width: auto;
  max-width: 100%;
  margin-inline: 0;
  justify-content: flex-start;
  gap: var(--space-6);
}

.ss-pillar-content > .ss-actions > .ss-quote-link {
  color: var(--quote-primary);
}

.ss-pillar-content > .ss-actions > .ss-quote-button {
  flex: 0 0 auto;
  align-self: center;
  width: fit-content;
  margin: 0;
  padding: 0;
  min-height: 44px;
}

.ss-pillar-content > .ss-actions > .ss-quote-button > .text-block-65 {
  font-weight: 400;
  text-transform: none;
  box-shadow: none;
}

.ss-pillar-content > .ss-actions > .ss-quote-button > .btn_overlay {
  display: none;
}

.ss-division-page .ss-division {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-content: start;
  align-items: center;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  gap: var(--space-4);
}

.ss-division-page .ss-division h3,.ss-division-page .ss-division p {
  margin: 0;
}

.ss-division-page .ss-division p {
  grid-column: 1 / -1;
}

/* Count only service rows, excluding introductions and related content. */
@media(min-width:992px) {
  .ss-page > .sec-crop-60:nth-child(even of :has(.ss-pillar)) .ss-pillar-photo {
    order: 2;
  }

  .ss-page .ss-pillar {
    padding-block: var(--space-20);
  }

  .ss-page .ss-pillar-content {
    padding: var(--space-6) var(--space-4);
  }

}

@media(max-width:991px) {
  .ss-pillar {
    grid-template-columns: minmax(0,1fr);
    gap: var(--space-8);
  }

  .ss-pillar-photo {
    order: 0;
  }

  .ss-pillar-content {
    order: 1;
  }

}

@media(max-width:767px) {
  .ss-pillar {
    grid-template-columns: 1fr;
  }

  .ss-division-page .ss-division {
    padding: var(--space-6);
  }

  .ss-breadcrumb {
    padding: 6px 10px;
    gap: 6px;
  }

}

/* Parent divisions share a stronger panel; tablet layouts lead with imagery. */
.ss-services-intro {
  display: grid;
  grid-template-columns: minmax(0,3fr) minmax(0,2fr);
  gap: var(--space-15);
  align-items: center;
}

.ss-services-intro h2,.ss-services-intro p {
  margin: 0;
}

.ss-service-overview {
  align-items: center;
  gap: var(--space-6) clamp(var(--space-8),4vw,var(--space-16));
  margin-block: var(--space-6) var(--space-12);
}

.ss-services-page .ss-service-overview__header {
  min-width: 0;
  margin-bottom: var(--space-6);
}

.ss-service-overview .ss-pillar-content {
  padding: 0;
  order: 0;
}

.ss-service-overview .ss-pillar-photo {
  display: block;
  order: 1;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.ss-service-link > h3.heading-22 {
  margin: 0;
  font: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
}

.ss-service-overview .ss-actions {
  width: auto;
  margin: var(--space-6) 0 0;
  gap: var(--space-6);
  justify-content: flex-start;
}

@media(max-width:991px) {
  .ss-service-overview {
    grid-template-columns: 1fr;
  }

  .ss-service-overview .ss-pillar-photo {
    width: min(100%,480px);
    justify-self: center;
  }

}

@media(min-width:768px) and (max-width:991px) {
  .ss-service-overview {
    grid-template-columns: 1fr;
    row-gap: var(--space-8);
    margin-block: 0;
  }

  .ss-service-overview .ss-pillar-photo {
    justify-self: center;
    order: -2;
  }

}

@media(max-width:767px) {
  .ss-services-page .ss-service-overview {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .ss-pillar-content > .ss-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .ss-pillar-content > .ss-actions > .special_btn {
    flex: 0 0 auto;
    align-self: flex-start;
    width: fit-content;
  }

}

/* Contact fields use the existing solid palette and base typeface. */
.ss-division-page .ss-division,.ss-soft-surface {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.ss-division-page .ss-division::before,.ss-soft-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgb(54 73 91 / 10%);
  box-shadow:
    8px 10px var(--soft-surface-spread,20px) var(--soft-surface-shadow,rgb(34 51 62 / 0.33333333)),
    -8px -6px var(--soft-surface-spread,18px) var(--surface-glass);
  filter: blur(var(--soft-surface-blur,8px));
  pointer-events: none;
}

.ss-division-page .ss-possibilities-padding {
  padding: clamp(28px,4vw,48px) clamp(28px,5vw,64px);
  background: #576e83 url('../images/surface-service-gradient.svg') center / 100% 100% no-repeat;
}

.ss-possibilities-padding > .ss-actions {
  justify-content: center;
  padding-top: clamp(16px,2vw,24px);
}

.ss-division-page .ss-soft-panel--slate :is(h2,h3,p) {
  color: inherit;
}

.ss-division-page .ss-soft-panel--slate .ss-section-heading p {
  max-width: 60ch;
}

.ss-division-page .ss-soft-panel.ss-soft-panel--slate .ss-soft-link {
  color: var(--link-blue-on-dark);
}

.ss-division-page .ss-soft-panel--slate a:focus-visible {
  outline: 2px solid var(--link-blue-on-dark);
  outline-offset: 5px;
}

.ss-division-page .ss-division p {
  font-size: var(--content-compact-size);
  line-height: var(--content-reading-leading);
}

.ss-division-page .ss-division .ss-soft-link {
  margin-top: var(--space-2);
  font-size: 18px;
  justify-self: start;
}

.ss-contact-grid {
  align-items: start;
}

.ss-contact-grid > .ss-copy {
  padding-block: clamp(var(--space-8),5vw,var(--space-16));
}

.ss-contact-grid .ss-copy > :last-child {
  margin-bottom: 0;
}

@media(min-width:1280px) {
  .ss-contact-grid > .ss-copy {
    min-height: 0;
    margin: 0;
    padding: var(--space-16) 0;
    gap: var(--space-5);
    top: max(96px,calc(50vh - 180px));
  }

  .ss-contact-grid .ss-copy > :is(h2,p) {
    margin: 0;
  }

}

.ss-form .w-input,.ss-form .w-select {
  height: auto;
  min-height: 48px;
  padding: 14px var(--space-4);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  background: var(--bg-base);
  color: inherit;
  font: inherit;
  font-size: var(--content-compact-size);
  line-height: 1.5;
  box-shadow: var(--shadow-control-inset);
}

.ss-form label {
  font-weight: 400;
}

.ss-form input::placeholder,.ss-form textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.ss-form .ss-check input {
  accent-color: var(--brand-slate);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

@media(max-width:767px) {
  .ss-services-intro {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .ss-form {
    padding: 22px;
  }

}

.ss-form label small {
  font: inherit;
  color: var(--text-muted);
}

.ss-projects-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin-top: var(--space-8);
  text-align: center;
}

.ss-page :is(h2,h3,h4) {
  color: var(--brand-slate);
}

.ss-page .ss-text-link:where(:not(.ss-soft-link)),
.ss-page .ss-projects-more a:not(.special_btn,.ss-soft-link) {
  color: var(--link-blue);
}

@media(min-width:992px) {
  .ss-pillar {
    gap: var(--space-16);
  }

  .ss-pillar-content {
    padding-block: var(--space-3);
  }

}

@media(max-width:767px) {
  .ss-projects .portfolio-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .ss-projects [data-related-grid] > .ss-project:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  .ss-projects .ss-projects-more > .special_btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

}

/* Contact proportions and service selection share the catalogue and page typography. */
@media(min-width:992px) {
  .ss-contact-grid.home-showcase {
    grid-template-columns: minmax(0,2fr) minmax(0,3fr);
  }

}

/* Contact chat reuses the Utilities split, type and action components. */
.ss-contact-chat {
  align-items: center;
  gap: clamp(var(--space-10),5vw,var(--space-20));
  margin-bottom: clamp(var(--space-20),8vw,120px);
  scroll-margin-top: 120px;
}

.ss-contact-chat__copy {
  min-width: 0;
}

.ss-contact-chat__copy .heading-19 {
  margin: 0 0 var(--space-6);
}

.ss-contact-chat__copy .paragraph-6 {
  margin: 0 0 36px;
  text-align: left;
  font-size: 18px;
  line-height: var(--content-reading-leading);
}

.ss-contact-chat__benefits {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
}

.ss-contact-chat__benefits .ss-soft-panel {
  padding: 22px 28px;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}

.ss-contact-chat__benefits .heading-22 {
  margin: 0 0 var(--space-2);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
}

.ss-contact-chat__benefits p {
  margin: 0;
  font-size: var(--content-compact-size);
  line-height: var(--content-reading-leading);
}

.ss-contact-chat__hours {
  margin: 0;
  max-width: 58ch;
  font-size: var(--content-compact-size);
  line-height: var(--content-reading-leading);
}

.ss-contact-chat .ss-actions {
  justify-content: flex-start;
  margin-top: 28px;
}

.ss-contact-chat__artwork {
  position: relative;
  width: 100%;
  max-width: 580px;
  min-width: 0;
  aspect-ratio: 1;
  justify-self: center;
  overflow: visible;
}

/* The mark's SVG canvas has extra space on its left; center the visible artwork. */
.ss-contact-chat__placeholder {
  display: none;
  position: absolute;
  inset: 0 3.68% 0 0;
  z-index: 1;
  margin: auto;
  width: 86.4%;
  height: 86.4%;
  max-width: 504px;
  max-height: 504px;
  object-fit: contain;
  opacity: .2;
  pointer-events: none;
}

.ss-contact-chat__mobile-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media(min-width:992px) {
  .ss-contact-chat__placeholder {
    display: block;
  }

  .ss-contact-chat__mobile-image {
    display: none;
  }

}

@media(max-width:991px) {
  .ss-contact-chat {
    grid-template-columns: minmax(0,1fr);
    gap: 128px;
    margin-bottom: 0;
  }

  .ss-contact-chat__artwork {
    max-width: 380px;
    aspect-ratio: auto;
  }

  .ss-contact-chat + .ss-contact-grid > .ss-copy {
    padding-top: var(--space-3);
  }

}

@media(max-width:767px) {
  .ss-contact-chat__benefits .ss-soft-panel {
    padding: var(--space-5) var(--space-6);
  }

  .ss-contact-chat__artwork {
    max-width: 320px;
  }

}

.ss-service-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ss-service-trigger {
  text-align: left;
  cursor: pointer;
}

.ss-service-picker {
  width: min(950px,calc(100% - 32px));
  max-height: 85svh;
  box-sizing: border-box;
  margin: auto;
  padding: var(--space-8);
  border: 1px solid var(--border-col);
  border-radius: var(--radius-lg);
  background: var(--bg-base);
  color: var(--brand-ink);
  box-shadow: var(--shadow-glass);
}

.ss-service-picker::backdrop {
  background: rgb(34 51 62 / 0.40000000);
}

.ss-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}

.ss-picker-header h2 {
  margin: 0;
  font-size: 32px;
}

.ss-service-picker h3 {
  color: var(--brand-slate);
  margin: var(--space-6) 0 var(--space-5);
  font-size: 24px;
  font-weight: 500;
}

.ss-picker-option,.ss-picker-close {
  display: block;
  border: 0;
  background: none;
  color: var(--link-blue);
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: var(--space-2) 0;
}

.ss-picker-option[aria-pressed="true"] {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ss-picker-option:hover,.ss-picker-close:hover {
  text-decoration: underline;
}

.ss-service-picker button:focus-visible,.ss-service-trigger:focus-visible {
  outline: 2px solid var(--link-blue);
  outline-offset: 4px;
}

@media(max-width:767px) {
  .ss-service-picker {
    padding: var(--space-6);
  }

  .ss-service-picker .ss-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

}

.ss-service-picker .ss-picker-header {
  position: sticky;
  top: -32px;
  z-index: 2;
  padding-block: var(--space-4);
  background: var(--bg-base);
}

@media(min-width:992px) {
  .ss-service-picker .qc-tiles {
    grid-template-columns: repeat(5,minmax(0,1fr));
  }

}

.ss-gallery-group .ss-media {
  padding: 0;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Service details reuse the shared panel and bevelled button treatments. */
[data-service-detail] .special_btn {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
}

.ss-detail-hero.content-panel,.ss-service-more > .content-panel {
  padding: clamp(var(--space-6),3vw,var(--space-10));
}

.ss-detail-hero .ss-logo-panel {
  min-width: 0;
  align-self: center;
}

.ss-detail-hero .ss-logo-panel img {
  max-width: none;
  height: auto;
  border-radius: var(--radius-md);
}

[data-service-detail] .ss-detail-hero {
  margin-bottom: var(--space-6);
}

.ss-detail-hero .paragraph-14 {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(18px,1.7vw,26px);
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  text-align: left;
  color: var(--brand-slate-dark);
}

.ss-detail-hero .ss-actions {
  justify-content: flex-start;
  margin-top: var(--space-6);
  gap: var(--space-6);
}

.ss-detail-toc a[aria-current="location"] {
  background: var(--surface-toc);
  border-radius: 4px;
}

.ss-detail-toc a:hover,.ss-detail-toc a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ss-detail-layout .ss-article > section {
  scroll-margin-top: 124px;
}

.ss-price.ss-soft-panel h2 {
  font-size: clamp(32px,3.4vw,48px);
  font-weight: 500;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: 0;
}

.ss-price.ss-soft-strip > .ss-quote-button {
  align-self: center;
  margin: 0;
}

@media(max-width:991px) {
  .ss-detail-toc {
    max-height: none;
  }

}

/* JSON service sections: alternate only sections that have an image. */
.ss-article :is(.ss-service-intro,.ss-service-section) {
  padding: clamp(var(--space-6),3vw,var(--space-10));
}

.ss-service-intro > :last-child {
  margin-bottom: 0;
}

.ss-article .ss-service-section {
  margin-block: var(--space-8);
  background: var(--bg-base);
}

.ss-service-section--split {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-8);
  align-items: center;
}

.ss-service-section__copy {
  min-width: 0;
}

.ss-service-section__copy h2 {
  margin-top: 0;
}

.ss-service-section__copy .ss-actions {
  justify-content: flex-start;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.ss-service-section__image {
  margin: 0;
  background: var(--bg-base);
}

.ss-service-section__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: contain;
}

.ss-service-section--full {
  border: 0;
  box-shadow: none;
}

@media(min-width:992px) {
  .ss-service-section--image-first .ss-service-section__image {
    order: -1;
  }

}

@media(max-width:991px) {
  .ss-service-section--split {
    grid-template-columns: 1fr;
  }

}

/* Editorial headings keep the capitalization authored in the service content. */
.ss-page :is(.ss-service-section, .ss-service-more__intro) :is(h2.heading-19, h3.heading-22),
.ss-page .ss-pillar-content > :is(h2.heading-19, h2.heading-22, h3.heading-22) {
  font-size: clamp(32px,3.4vw,48px);
  font-weight: 500;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: 0;
}

.ss-page .ss-service-overview__header > h2.heading-19 {
  margin: 0;
  font-size: clamp(30px,3vw,40px);
  font-weight: 500;
  line-height: 1.1;
  color: var(--brand-ink);
  text-transform: none;
  letter-spacing: 0;
}

@media(max-width:479px) {
  .ss-page .ss-service-overview__header > h2.heading-19 {
    font-size: 30px;
  }

}

.ss-service-more__grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: clamp(var(--space-8),5vw,72px);
  align-items: center;
}

.ss-service-more__intro {
  min-width: 0;
}

.ss-service-more__intro h2 {
  margin: 0;
}

.ss-service-more__intro .ss-actions {
  justify-content: flex-start;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

@media(max-width:767px) {
  .ss-service-more__grid {
    grid-template-columns: 1fr;
  }

}

/* Section gutters belong to sec-crop-60; retain the existing content spacing inside. */
.ss-page > .sec-crop-60 > .container {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.ss-page > .sec-crop-60:first-child > .container {
  padding-top: var(--space-16);
}

.ss-page > .sec-crop-60:last-child > .container {
  padding-bottom: var(--space-16);
}

@media(max-width:767px) {
  .ss-page > .sec-crop-60:first-child > .container {
    padding-top: var(--space-10);
  }

  .ss-page > .sec-crop-60:last-child > .container {
    padding-bottom: var(--space-10);
  }

}

@media(max-width:767px) {
  .about-invitation .ss-split {
    grid-template-columns: minmax(0,1fr);
  }

  .about-invitation-photo {
    grid-row: 1;
  }

}

/* Division introductions retain the compact display treatment. */
.ss-division-page .ss-page-intro .paragraph-14 {
  font-size: 32px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--brand-gray-blue);
  font-weight: 400;
  text-align: left;
  position: relative;
  background: var(--bg-base);
  box-shadow: 0 0 18px 12px var(--bg-base);
}

@media(max-width:991px) {
  .ss-division-page .ss-page-intro .paragraph-14 {
    font-size: 26px;
  }

}

@media(max-width:767px) {
  .ss-division-page .ss-page-intro .paragraph-14 {
    font-size: 22px;
  }

}

/* Gallery image viewer, shared by server-rendered and JSON-rendered photos. */
.ss-gallery-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: zoom-in;
}

.ss-gallery-open .ss-media {
  display: block;
  width: 100%;
}

.ss-gallery-open:focus-visible {
  outline: 2px solid var(--link-blue);
  outline-offset: 4px;
}

.ss-gallery-modal {
  width: min(1400px,calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: var(--space-4);
  border: 0;
  border-radius: 16px;
  background: rgb(34 51 62 / 0.82000000);
  color: var(--text-on-dark);
  overflow: auto;
  -webkit-user-select: none;
  user-select: none;
}

.ss-gallery-modal::backdrop {
  background: rgb(34 51 62 / 0.72000000);
}

.ss-gallery-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.ss-gallery-modal__header .heading-19 {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-on-dark);
}

.ss-gallery-modal button {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-on-dark);
  cursor: pointer;
}

.ss-gallery-modal button:hover {
  background: rgba(255,255,255,.14);
}

.ss-gallery-modal button:focus-visible {
  outline: 2px solid var(--link-blue);
  outline-offset: 2px;
}

.ss-gallery-modal button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.ss-gallery-modal__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(78dvh,860px);
}

.ss-gallery-modal__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

.ss-gallery-modal__stage button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background: rgb(54 73 91 / 0.60000000);
}

.ss-gallery-modal__previous {
  left: 8px;
}

.ss-gallery-modal__next {
  right: 8px;
}

.ss-gallery-open img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

@media(max-width:767px) {
  .ss-gallery-modal {
    width: calc(100vw - 16px);
    padding: var(--space-2);
  }

  .ss-gallery-modal__header {
    padding-left: 4px;
    gap: var(--space-2);
  }

  .ss-gallery-modal__header .heading-19 {
    font-size: 11px;
  }

  .ss-gallery-modal__previous {
    left: 4px;
  }

  .ss-gallery-modal__next {
    right: 4px;
  }

}

/* Stable page width and reversible dialog motion; no scale or layout animation. */
html:has(body[data-content-page="gallery"]) {
  scrollbar-gutter: stable;
}

.ss-dialog-motion[open] {
  animation: none;
  will-change: transform,opacity;
}

.ss-dialog-motion[open]::backdrop {
  animation: ss-dialog-backdrop-in 460ms ease-out both;
}

.ss-dialog-motion.ss-dialog-closing::backdrop {
  animation: ss-dialog-backdrop-out 340ms ease-in both;
}

@keyframes ss-dialog-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}

@keyframes ss-dialog-backdrop-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }

}

@media(prefers-reduced-motion:reduce) {
  .ss-dialog-motion[open]::backdrop {
    animation: none;
  }

}

/* Compact service-page index: fixed under the shared logo, same links in a drawer. */
.ss-service-index-trigger {
  position: fixed;
  z-index: 99;
  display: none;
  padding: var(--space-2) var(--space-3);
  border: 1px solid #ffffff80;
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--brand-slate-dark);
  font: inherit;
  font-family: Kanit, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: var(--shadow-glass);
}

/* Light dialog controls share the existing panel edges without changing their frames. */
.ss-service-picker,.ss-service-index-trigger {
  border-top-color: var(--ss-prism-border-top);
  border-right-color: var(--ss-prism-border-right);
  border-bottom-color: var(--ss-prism-border-bottom);
  border-left-color: var(--ss-prism-border-left);
}

.ss-service-index-trigger[hidden],.menu-open .ss-service-index-trigger {
  display: none;
}

.ss-service-index-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(360px,calc(100vw - 32px));
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: var(--space-6) var(--space-5);
  border: 0;
  border-radius: 0 16px 16px 0;
  background: var(--bg-base);
  color: var(--brand-slate-dark);
  overflow: auto;
}

.ss-service-index-drawer::backdrop {
  background: rgb(34 51 62 / 0.50000000);
}

.ss-service-index-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.ss-service-index-header .heading-19 {
  margin: 0;
  font-size: 24px;
}

.ss-service-index-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--brand-slate-dark);
  cursor: pointer;
}

.ss-service-index-drawer .ss-detail-toc {
  display: block;
  position: static;
  max-height: none;
  overflow: visible;
}

.ss-service-index-drawer .ss-detail-toc a {
  padding: 14px var(--space-3);
  font-size: var(--content-compact-size);
  line-height: 1.5;
}

.ss-service-index-trigger:focus-visible,.ss-service-index-close:focus-visible {
  outline: 2px solid var(--link-blue);
  outline-offset: 3px;
}

@media(max-width:991px) {
  .ss-service-index-trigger:not([hidden]) {
    display: block;
  }

  .menu-open .ss-service-index-trigger {
    display: none;
  }

  [data-service-detail] .ss-article section[id],[data-service-detail] .ss-price {
    scroll-margin-top: 150px;
  }

}

/* Keep the reading index muted in each state; the active background/underline identify location. */
.ss-page .ss-detail-toc a,.ss-service-index-drawer .ss-detail-toc a,
.ss-page .ss-detail-toc a:is(:hover,:focus-visible,[aria-current="location"]),
.ss-service-index-drawer .ss-detail-toc a[aria-current="location"] {
  color: var(--brand-slate-dark);
}

/* Calm service surfaces keep imagery and the primary quote action in focus. */
.ss-detail-hero.content-panel,.ss-service-more > .content-panel {
  background: var(--bg-base);
  border: 1px solid #ffffff60;
  border-radius: 20px;
  box-shadow: var(--shadow-glass);
}

/* Legal pages share a compact reading column and a centered sticky brand mark. */
.ss-legal-page > .ss-section {
  padding-block: var(--space-8);
}

.ss-legal-layout {
  display: grid;
  grid-template-columns: minmax(0,760px) minmax(180px,240px);
  gap: var(--space-16);
  max-width: 1064px;
  margin-inline: auto;
  align-items: start;
}

.ss-legal-page .ss-article {
  min-width: 0;
  max-width: 100%;
}

.ss-legal-page .ss-article :is(h2,h3) {
  text-shadow: none;
  box-shadow: none;
  margin: 0 0 var(--space-3);
}

.ss-legal-page .ss-article > .heading-19 {
  font-size: clamp(28px,3vw,40px);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.ss-legal-page .ss-article :is(.heading-23,.heading-22) {
  font-size: 26px;
  line-height: var(--content-subheading-leading);
}

.ss-legal-page .ss-article > section {
  padding: var(--space-6) 0 0;
}

.ss-legal-page .ss-article p {
  margin: 0 0 var(--space-3);
}

.ss-legal-page .ss-article a {
  overflow-wrap: anywhere;
}

.ss-legal-brand {
  position: sticky;
  top: 80px;
  height: auto;
  box-sizing: border-box;
  padding: clamp(16px,2vw,24px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-legal-brand img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

@media(max-width:991px) {
  .ss-legal-layout {
    gap: var(--space-8);
    grid-template-columns: minmax(0,1fr) 180px;
  }

}

@media(max-width:767px) {
  .ss-legal-page > .ss-section {
    padding-block: var(--space-6);
  }

  .ss-legal-layout {
    grid-template-columns: minmax(0,1fr);
    gap: var(--space-6);
  }

  .ss-legal-brand {
    position: static;
    order: -1;
    height: auto;
  }

  .ss-legal-brand img {
    max-width: 220px;
  }

  .ss-legal-page .ss-article :is(.heading-23,.heading-22) {
    font-size: 22px;
  }

}

/* Gallery and staff introductions share a calm, responsive two-column layout. */
.ss-collection-intro {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: center;
  gap: var(--space-12);
  padding-block: var(--space-8);
  margin-bottom: 56px;
  text-align: left;
}

.ss-collection-intro > .heading-19 {
  margin: 0;
  text-align: left;
}

.ss-collection-intro > p {
  margin: 0;
  max-width: 60ch;
  font-size: var(--content-body-size);
  line-height: var(--content-reading-leading);
  text-align: left;
}

@media(max-width:767px) {
  .ss-collection-intro {
    grid-template-columns: minmax(0,1fr);
    gap: var(--space-6);
    padding-block: var(--space-6);
    margin-bottom: var(--space-8);
  }

  .ss-collection-intro > p {
    max-width: none;
  }

}

/* Shared point list for the About mission, vision and values. */
.about-purpose-points {
  list-style: none;
  padding: 0;
  margin: var(--space-6) auto 0;
  max-width: 720px;
  display: grid;
  gap: var(--space-8);
  text-align: left;
  opacity: 1;
}

.about-purpose-points li {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: var(--space-4);
  margin: 0;
}

.about-purpose-points img {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  opacity: 1;
}

.about-mission-panel .about-purpose-points img {
  opacity: .5;
}

.about-purpose-points strong {
  display: block;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 6px;
  color: var(--brand-yellow-ink);
}

.about-principles .about-purpose-points strong {
  color: var(--button-yellow-text);
}

.about-purpose-points p {
  margin: 0;
  font-size: var(--content-compact-size);
  line-height: var(--content-reading-leading);
  color: inherit;
  background: transparent;
}

.ss-soft-panel--slate .about-purpose-points img {
  filter: invert(1);
  opacity: 1;
}

.about-principles.ss-soft-panel--slate {
  background: #5d6e7d;
}

.about-principles .ss-soft-surface {
  padding: clamp(var(--space-6),3vw,var(--space-10));
  border-radius: var(--radius-lg);
  --soft-surface-spread: 28px;
  --soft-surface-shadow: rgb(34 51 62 / 55%);
  --soft-surface-blur: 10px;
}

.about-principles .ss-soft-surface::before {
  background: rgb(66 85 104 / 10%);
  box-shadow:
    8px 10px var(--soft-surface-spread,20px) var(--soft-surface-shadow,rgb(34 51 62 / 0%)),
    -8px -6px var(--soft-surface-spread,18px) #ffffff40;
}

/* Mission pairs a compact introduction with three clearly separated commitments. */
.about-mission-panel {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(0,3fr);
  align-items: center;
  gap: clamp(36px,5vw,72px);
  width: 100%;
  margin: 0 auto;
  padding: clamp(var(--space-8),5vw,72px);
  text-align: left;
  color: var(--brand-ink);
  scroll-margin-top: 120px;
}

/* Mission keeps neutral glass; the shared shell supplies its four-side edge colors. */
.about-mission-panel.ss-soft-panel {
  border-color: transparent;
  background: rgb(222 230 232 / 0.22000000);
  -webkit-backdrop-filter: blur(12px) saturate(1.04);
  backdrop-filter: blur(12px) saturate(1.04);
  box-shadow: var(--shadow-glass),inset 0 1px 0 #ffffff80;
}

.about-mission-panel .about-purpose-points strong {
  color: var(--brand-slate);
}

.about-mission-panel > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.about-mission-panel > div .ss-actions {
  justify-content: flex-start;
}

.about-mission-panel .heading-19 {
  width: 100%;
  text-align: left;
  margin: 0 0 var(--space-6);
}

.about-mission-panel .paragraph-8 {
  margin: 0;
  max-width: 34ch;
  font-size: 18px;
  line-height: 1.7;
  text-align: left;
}

.about-mission-panel .about-purpose-points {
  margin: 0;
  max-width: none;
  gap: var(--space-8);
}

.about-mission-panel .about-purpose-points p {
  font-size: var(--content-body-size);
  line-height: 1.65;
  color: var(--brand-ink);
}

@media(max-width:767px) {
  .about-mission-panel {
    grid-template-columns: 1fr;
    padding: var(--space-8) var(--space-6);
    gap: var(--space-10);
  }

}

:is(.about-mission-panel,.about-principles) :is(h2,p,strong,ul,li,img) {
  opacity: 1;
}

:is(.about-mission-panel,.about-principles) h2 {
  margin-left: 0;
}

html[data-site-page="about"] :is(.about-mission-panel,.about-principles,.staff-api-section) h2.heading-19 {
  font-size: clamp(40px,4.5vw,64px);
  line-height: 1.1;
  font-weight: 300;
  opacity: 1;
}

html[data-site-page="about"] :is(.about-mission-panel,.staff-api-section) h2.heading-19 {
  color: var(--brand-slate);
}

html[data-site-page="about"] .about-principles h2.heading-19 {
  color: var(--text-on-dark-muted);
}

@media(min-width:768px) {
  .about-mission-panel .heading-19 > span {
    display: block;
  }

}

/* Case studies keep the shared animated header and footer around the original PDF. */
.ss-procedure-page {
  padding: 160px var(--space-8) 144px;
  overflow-x: clip;
}

.ss-procedure-reader.container {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

.ss-procedure-pages {
  display: grid;
  gap: var(--space-8);
}

.ss-procedure-document-page {
  position: relative;
  min-width: 0;
}

.ss-procedure-sheet {
  position: relative;
  width: 100%;
  background: transparent;
  overflow: hidden;
}

/* Keep an unfinished canvas hidden: resizing its opaque bitmap can briefly paint black. */
.ss-procedure-sheet canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.ss-procedure-document-page[data-pdf-rendered="true"] .ss-procedure-sheet canvas {
  opacity: 1;
  transition: opacity .28s ease-out;
}

/* A faint brand mark holds the space while each PDF page loads. */
.ss-procedure-sheet::after {
  content: "";
  position: absolute;
  inset: 14%;
  pointer-events: none;
  background: url('../images/ssm-logo.svg') center / contain no-repeat;
  opacity: .1;
  animation: ss-procedure-logo-pulse 2s ease-in-out infinite;
}

.ss-procedure-document-page[data-pdf-rendered="true"] .ss-procedure-sheet::after {
  opacity: 0;
  animation: none;
  transition: opacity .28s ease-out;
}

@keyframes ss-procedure-logo-pulse {
  0%,100% {
    opacity: .07;
    transform: scale(.96);
  }

  50% {
    opacity: .14;
    transform: scale(1);
  }

}

@media(prefers-reduced-motion:reduce) {
  .ss-procedure-sheet::after {
    animation: none;
    opacity: .1;
  }

  .ss-procedure-document-page[data-pdf-rendered="true"] .ss-procedure-sheet canvas,
  .ss-procedure-document-page[data-pdf-rendered="true"] .ss-procedure-sheet::after {
    transition: none;
  }

}

/* Canvas content has an equivalent semantic reading order beneath each page. */
.ss-procedure-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: normal;
  border: 0;
}

.ss-procedure-reader [data-pdf-fallback][hidden] {
  display: none!important;
}

@media(max-width:767px) {
  .ss-procedure-page {
    padding: 112px var(--space-4);
  }

  .ss-procedure-pages {
    gap: var(--space-6);
  }

}

/* One square crop for photography throughout the service hierarchy. */
.ss-service-picture {
  display: block;
  width: 100%;
  min-width: 0;
}

.ss-services-page .ss-pillar-photo img,
.ss-division-page .ss-pillar-photo img,
[data-service-detail] .ss-logo-panel img,
.ss-service-section__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.ss-service-section__image {
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media(max-width:767px) {
  nav:is(.blog-breadcrumb,.team-breadcrumb,.ss-breadcrumb) {
    background: transparent;
    box-shadow: none;
    border: 0;
  }

  nav:is(.blog-breadcrumb,.team-breadcrumb,.ss-breadcrumb) :is(a,a:hover,[aria-current]) {
    background: transparent;
    box-shadow: none;
  }

}

/* Center complete service photo rows together in tablet layouts. */
@media(min-width:768px) and (max-width:991px) {
  .ss-page > .sec-crop-60 > .container:has(> .ss-pillar,> .ss-page-intro,> .ss-service-overview),
  .ss-page + .ss-brand-invitation--idea > .container {
    max-width: 600px;
    margin-inline: auto;
  }

  .ss-page :is(.ss-pillar-photo,.ss-logo-panel,.ss-service-section__image) {
    width: 100%;
    max-width: 600px;
    margin-inline: auto;
    justify-self: center;
  }

  .ss-service-overview .ss-pillar-photo {
    width: min(100%,600px);
  }

  /* One spacing rhythm for tablet service content and shared closing panels. */
  body:has(.ss-page:is(.ss-services-page,.ss-division-page)) {
    --service-section-space: var(--space-8);
  }

  .ss-page:is(.ss-services-page,.ss-division-page) > .sec-crop-60 > .container {
    padding-block: 0;
    margin-bottom: 0;
  }

  .ss-page:is(.ss-services-page,.ss-division-page) > .sec-crop-60 {
    padding-block: var(--service-section-space);
  }

  .ss-page:is(.ss-services-page,.ss-division-page) .ss-section:not(.ss-soft-panel) {
    padding-block: 0;
  }

  .ss-page:is(.ss-services-page,.ss-division-page) .ss-page-intro {
    margin-block: 0;
    padding-block: 0;
  }

  .ss-division-page .ss-page-intro > .ss-actions {
    justify-content: flex-start;
  }

  body:has(.ss-page:is(.ss-services-page,.ss-division-page)) .ss-brand-invitation {
    padding-block: var(--service-section-space);
  }

  body:has(.ss-page:is(.ss-services-page,.ss-division-page)) .ss-brand-invitation > .container {
    padding-block: 0;
    margin-bottom: 0;
  }

  body:has(.ss-page:is(.ss-services-page,.ss-division-page)) .ss-brand-invitation--idea > .container {
    max-width: 600px;
    margin-inline: auto;
  }

  .ss-page + .ss-brand-invitation--idea {
    margin-bottom: 100px;
  }

  /* Center the tablet service reading column within the shared page container. */
  [data-service-detail] .ss-service-intro,
  [data-service-detail] .ss-service-section__copy {
    width: 100%;
    max-width: 700px;
    margin-inline: auto;
    text-align: left;
  }

  [data-service-detail] .ss-service-section__copy .ss-actions {
    justify-content: flex-start;
  }

  [data-service-detail] .ss-service-section__image {
    max-width: 700px;
  }

}

/* Compact bold action labels on the Services overview. */
.ss-services-page .ss-service-overview .ss-actions .text-block-65 {
  font-size: 18px;
}

/* Browser-tested refinements apply only to the desktop layout. */
@media (min-width: 992px) {
  .ss-service-link,
  .ss-pillar-content > .ss-actions > .ss-quote-button > .text-block-65 {
    padding: 10px 18px;
  }

  .ss-pillar-photo {
    border-radius: 0;
  }

  .ss-service-overview .ss-pillar-photo {
    margin: -40px -40px -40px 0;
  }

  .ss-page .ss-service-overview__header > h2.heading-19 {
    color: #607689;
  }
}

/* About header text color saved from the browser. */
html[data-site-page="about"] .ss-subpage-hero .text-block-66 {
  color: #c7d2d48a;
}

/* Give the development introduction space below its title. */
.ss-service-overview .ss-pillar-content > p {
    padding-top: var(--space-4);
}

/* A compact, consistent reading rhythm across service detail pages. */
[data-service-detail] .ss-article :is(.ss-service-intro,.ss-service-section) {
  padding: 24px clamp(16px,2vw,24px);
  margin-block: 0;
}
[data-service-detail] .ss-article .ss-service-section + .ss-service-section {
  margin-top: 12px;
}
[data-service-detail] .ss-service-section__copy > h2.heading-19 {
  margin: 0 0 16px;
  font-size: clamp(26px,2.4vw,34px);
  font-weight: 500;
  line-height: 1.25;
}
[data-service-detail] :is(.ss-service-intro,.ss-service-section .w-richtext) {
  font-size: 17px;
  line-height: 1.65;
}
[data-service-detail] :is(.ss-service-intro,.ss-service-section .w-richtext) p {
  max-width: 68ch;
  margin: 0 0 14px;
  font-size: inherit;
  line-height: inherit;
}
[data-service-detail] .ss-service-section .w-richtext :is(h3,h4) {
  margin: 24px 0 12px;
  color: var(--brand-gray-blue);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}
[data-service-detail] .ss-service-section .w-richtext h4 { font-size: 19px; }
[data-service-detail] .ss-service-section .w-richtext :is(ul,ol) {
  margin: 0 0 18px;
  padding-left: 24px;
}
[data-service-detail] .ss-service-section .w-richtext li { margin-bottom: 8px; }
[data-service-detail] .ss-service-section .w-richtext > :last-child,
[data-service-detail] .ss-service-intro > :last-child { margin-bottom: 0; }
[data-service-detail] .ss-service-section__copy .ss-actions {
  margin-top: 20px;
  padding-top: 0;
  gap: 16px 24px;
}
[data-service-detail] .ss-service-section--split { gap: clamp(24px,3vw,40px); }
/* Text-only sections fill the article instead of retaining a reading-column cap. */
[data-service-detail] .ss-service-intro,
[data-service-detail] .ss-service-section--full .ss-service-section__copy {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
[data-service-detail] .ss-article .ss-service-intro p,
[data-service-detail] .ss-service-section--full .w-richtext p {
  max-width: none;
}
@media(max-width:767px) {
  [data-service-detail] .ss-article :is(.ss-service-intro,.ss-service-section) { padding: 20px 0; }
  [data-service-detail] :is(.ss-service-intro,.ss-service-section .w-richtext) { font-size: 16px; }
}

/* Project return link matches the supplied browser styling. */
.cms-content-section .cms-project-back {
  padding: 0 12px;
  font-size: 1.5rem;
}

/* Contained project artwork, with a blurred animated image behind it. */
.cms-project-media {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: min(750px, 70vh);
  max-height: 750px;
  margin: 36px 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-hero);
}
:is(.cms-article,.ss-procedure-intro) .cms-project-media > .cms-project-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 750px;
  min-height: 0;
  margin: 0;
  object-fit: contain;
  border-radius: 0;
}
:is(.cms-article,.ss-procedure-intro) .cms-project-media > .cms-project-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
  filter: blur(24px);
  opacity: .45;
  pointer-events: none;
  animation: ss-project-backdrop-drift 18s ease-in-out infinite alternate;
}
@keyframes ss-project-backdrop-drift {
  from { transform: scale(1.12) translate(-1%, -1%); }
  to { transform: scale(1.2) translate(1%, 1%); }
}
@media(prefers-reduced-motion:reduce) {
  :is(.cms-article,.ss-procedure-intro) .cms-project-media > .cms-project-backdrop {
    animation: none;
    transform: scale(1.12);
  }
}

.cms-project-tags a {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--control-surface);
  color: var(--link-blue-collection);
  font-family: Kanit, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
}
.cms-project-tags a:hover { color: var(--brand-blue-hover); }
.cms-project-actions { margin-top: 32px; justify-content: flex-end; align-items: center; gap: 24px; }
.cms-project-scope { margin: 24px 0; }
.cms-project-scope .heading-22 { margin-bottom: 16px; }
.cms-project-scope li { margin-bottom: 8px; }
.cms-article .cms-project-actions .ss-link-corner {
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: 0;
}

/* Procedure artwork sits on continuous white with softly blended outer edges. */
.ss-procedure-page .ss-procedure-pages,
.ss-procedure-page .ss-procedure-sheet,
.ss-procedure-page .ss-procedure-document-page {
  background: #fff;
}
.ss-procedure-page .ss-procedure-sheet {
  mask-image: none;
}
.ss-procedure-intro { margin-bottom: 48px; }
.ss-procedure-intro .heading-19 { font-size: clamp(28px, 3vw, 42px); }
.ss-procedure-intro .paragraph-14 { max-width: 68ch; }
.ss-procedure-intro .cms-project-media { margin: 24px 0 32px; }
.cms-project-layout--procedure {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 32px;
  align-items: start;
}
.cms-project-layout > .cms-article { min-width: 0; }
@media(min-width:992px) {
  .cms-project-layout--procedure {
    /* Give short projects enough scroll distance for the desktop preview to stick. */
    min-height: calc(100dvh + 320px);
    padding-bottom: 96px;
    margin-bottom: -96px;
  }
}
.cms-project-procedure {
  position: sticky;
  top: 112px;
  min-width: 0;
}
.cms-project-procedure__viewport {
  height: min(560px, 65vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 18px;
  mask-image: linear-gradient(to bottom, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.cms-project-procedure .ss-procedure-pages { gap: 0; background: #fff; }
.cms-project-procedure .ss-procedure-sheet { background: #fff; }
.cms-project-procedure .ss-actions { margin-top: 20px; }
.cms-project-procedure [data-pdf-fallback][hidden] { display: none; }
@media(max-width:991px) {
  .cms-project-layout--procedure { grid-template-columns: minmax(0, 1fr); }
  .cms-project-procedure { display: none; }
}

/* Procedure pages keep the shared base and motion, with a compact project card. */
.ss-procedure-page { padding-top: 160px; }
.ss-procedure-intro {
  padding: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(64px, 7vw, 112px);
  background: var(--surface-toc);
  border: 0;
  box-shadow: none;
  border-radius: var(--radius-panel);
}
.ss-procedure-intro__row {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.ss-procedure-intro__image { aspect-ratio: 1; width: 100%; }
.ss-procedure-intro__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.ss-procedure-intro h1.heading-19 {
  text-transform: none;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 24px;
}
.ss-procedure-intro__description { margin: 0; }
.ss-procedure-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(64px, 6vw, 96px);
  align-items: start;
}
.ss-procedure-detail__heading {
  position: sticky;
  top: 112px;
  min-height: clamp(280px, 32vw, 500px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.ss-page .ss-procedure-detail__heading h2.heading-19 {
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: none;
  margin: 0 0 24px;
}
.ss-procedure-detail__heading .paragraph-14 { margin: 0; max-width: 34ch; }
.ss-procedure-detail__heading .ss-soft-link { margin-top: 32px; }
/* Fade only the white background outside the PDF, leaving its artwork intact. */
.ss-procedure-detail__pages {
  min-width: 0;
  position: relative;
  isolation: isolate;
  background: transparent;
  border-radius: var(--radius-panel);
}
.ss-procedure-detail__pages .ss-procedure-pages {
  --procedure-edge: 12px;
  padding: var(--procedure-edge);
  border-radius: inherit;
  overflow: hidden;
  /* The masked strip is padding; the PDF itself remains fully visible. */
  mask-image:
    linear-gradient(to right, transparent, #000 var(--procedure-edge), #000 calc(100% - var(--procedure-edge)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--procedure-edge), #000 calc(100% - var(--procedure-edge)), transparent);
  mask-composite: intersect;
}
.ss-procedure-detail__pages::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: inherit;
  background: #fff;
  filter: blur(18px);
  box-shadow: 0 0 24px 12px #fff;
  pointer-events: none;
}
.ss-procedure-detail__pages .ss-procedure-document-page { box-shadow: none; }
.ss-procedure-detail__pages .ss-procedure-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 8px 4px #fff;
}
@media(max-width:767px) {
  .ss-procedure-page { padding-top: 136px; }
  .ss-procedure-intro__row, .ss-procedure-detail { grid-template-columns: minmax(0, 1fr); }
  .ss-procedure-intro__image { max-width: 320px; margin-inline: auto; }
  .ss-procedure-detail { gap: 48px; }
  .ss-procedure-detail__heading { position: static; min-height: 0; }
  .ss-procedure-detail__pages .ss-procedure-pages { --procedure-edge: 6px; }
  .ss-procedure-detail__pages .ss-procedure-sheet::before { box-shadow: inset 0 0 4px 2px #fff; }
  .ss-procedure-detail__pages::before { inset: -4px; filter: blur(12px); box-shadow: 0 0 16px 8px #fff; }
}
.cms-project-procedure {
  --procedure-top: -24px;
  --procedure-controls: 80px;
  top: var(--procedure-top);
  margin-top: -64px;
  margin-bottom: -96px;
}
.cms-project-procedure__viewport {
  height: max(180px, calc(100dvh + 48px - var(--procedure-controls)));
  cursor: grab;
  touch-action: pan-x;
}
.cms-project-procedure__viewport[data-dragging="true"] { cursor: grabbing; user-select: none; }

/* Full-height sticky procedure preview: wheel scrolls the page, drag moves the PDF. */
.portfolio-preview [data-preview-workflow] { display: none; }
.cms-project-procedure {
  --procedure-top: 0px;
  top: 0;
  height: 100dvh;
  margin-top: -38px;
  margin-bottom: -180px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  background-color: var(--bg-base);
}
.cms-project-procedure__viewport {
  height: calc(100dvh - var(--procedure-controls));
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: auto;
  touch-action: none;
  mask-image: linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.cms-project-procedure .ss-procedure-pages { padding-block: 32px; }
.cms-project-procedure .cms-project-procedure__controls {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  padding: 16px 12px;
  background: var(--bg-base);
  justify-content: center;
}
.cms-project-procedure__button {
  padding: 8px 14px;
  color: var(--brand-ink);
  background: var(--bg-base);
  font-family: Kanit, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  border-radius: 999px;
}
.cms-project-procedure__button:hover { color: var(--brand-blue); }
@media(max-width:991px) {
  .cms-project-procedure { display: none; }
}

/* Small shared corner artwork on the full procedure link. */
.cms-project-procedure__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cms-project-procedure__button::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-self: flex-start;
  margin-top: -4px;
  background: currentColor;
  -webkit-mask: url('../images/link-corner.svg') center / contain no-repeat;
  mask: url('../images/link-corner.svg') center / contain no-repeat;
}

/* Blend procedure artwork into the project page's base surface. */
.cms-project-procedure,
.cms-project-procedure__viewport {
  background-color: var(--bg-base);
}
.cms-project-procedure .ss-procedure-pages {
  mix-blend-mode: multiply;
  filter: brightness(1.05) saturate(1.05);
}

/* Portfolio preview uses the shared classic project button. */
.portfolio-preview__links a.special_btn {
  border: 0;
  margin-top: 8px;
  padding: 8px;
}
.portfolio-preview__links .special_btn .text-block-65 {
  font-family: Kanit, sans-serif;
  font-size: 28px;
  font-weight: 400;
  padding: 12px 30px;
}

/* Mobile access to the current project's dedicated working procedure. */
.cms-project-actions .cms-project-working-procedure { display: none; }
@media (max-width: 767px) {
    .cms-project-actions .cms-project-working-procedure { display: inline-flex; }
}

/* Mobile Services overview: keep each image with its own heading. */
@media (max-width: 767px) {
  .ss-services-page .ss-service-overview {
    row-gap: 16px;
    margin-block: 0;
  }
  .ss-services-page .ss-service-overview .ss-pillar-photo {
    order: -1;
    margin: 0;
  }
  .ss-services-page > .sec-crop-60:has(.ss-service-overview) {
    padding-block: 0;
  }
  .ss-services-page > .sec-crop-60:has(.ss-service-overview) + .sec-crop-60:has(.ss-service-overview) {
    margin-top: 96px;
  }
}


/* Related project sections: one featured square beside up to four smaller ones. */
@media (min-width: 768px) {
  .ss-projects[data-related-portfolio] [data-related-grid] {
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: auto;
    gap: clamp(12px,1.5vw,24px);
    align-items: stretch;
  }
  .ss-projects[data-related-portfolio] [data-related-grid] > .ss-project {
    margin: 0;
    min-width: 0;
  }
  .ss-projects[data-related-portfolio] [data-related-grid] > .ss-project:first-child {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }
  .ss-projects[data-related-portfolio] .portfolio-tile {
    display: block;
    height: 100%;
  }
  .ss-projects[data-related-portfolio] .portfolio-tile > .image-4 {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.cms-project-story { margin:28px 0; }
.cms-project-story .heading-22 { margin:24px 0 12px; }
.cms-project-story p { max-width:72ch; }
.cms-project-story + .ss-section { margin-top:32px; }
.cms-project-scope { padding-top:24px; border-top:1px solid var(--border-col); }
.cms-project-scope > p { margin:0 0 16px; }