/* Supplied September 19 artwork; live text follows the homepage font and gutters. */
body.as-page { background: #fff; }
.as-main {
  --as-ink: #061334;
  --as-gutter: max(32px, var(--arotec-content-left, 0px));
  --as-heading-size: clamp(40px, 4.3vw, 80px);
  color: var(--as-ink);
  margin: 0;
  padding-top: var(--detail-header-space, 112px);
  overflow: clip;
}
.as-main *, .as-main *::before, .as-main *::after { box-sizing: border-box; }
.as-main .as-scene { position: relative; isolation: isolate; min-height: 56.28vw; margin: 0; padding: 0; background: #faf8f4; }
.as-backdrop { display: block; position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-copy { position: absolute; top: 8.2vw; left: var(--as-gutter); right: 45%; }
html body.as-page #main#main .as-heading {
  --arotec-display-size: var(--as-heading-size);
  --arotec-display-line-height: 1.04 !important;
  --arotec-display-letter-spacing: -.045em !important;
  --arotec-display-weight: 700;
  font-family: var(--site-font, "DM Sans", sans-serif) !important;
  font-size: var(--as-heading-size) !important;
  font-weight: 700 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
  margin: 0 0 1.5vw !important;
  color: var(--as-ink);
  text-transform: none;
  overflow-wrap: normal !important;
}
html body.as-page #main#main p { color: inherit; margin: 0 0 1.4vw; font-size: clamp(15px, 1.45vw, 25px) !important; line-height: 1.35 !important; }
html body.as-page #main#main .as-lead { font-size: clamp(20px, 2.15vw, 37px) !important; font-weight: 700 !important; line-height: 1.17 !important; letter-spacing: -.025em !important; margin-bottom: 1.05vw; }
html body.as-page #main#main .as-eyebrow { font-size: clamp(12px, 1.15vw, 22px) !important; line-height: 1.4 !important; letter-spacing: .18em !important; font-weight: 700 !important; margin-bottom: 1.7vw; }
html body.as-page #main#main .ss-more {
  position: absolute; right: var(--as-gutter); bottom: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  width: max-content; min-width: 154px; min-height: 42px; max-width: 100%;
  padding: 10px 24px; margin: 0; border: 1px solid #321273; border-radius: 999px;
  background: #321273; color: #fff !important; -webkit-text-fill-color: #fff !important;
  font-family: var(--site-font, "DM Sans", sans-serif); font-size: 16px !important; font-weight: 700 !important;
  line-height: 1.25 !important; letter-spacing: .06em !important; text-decoration: none; text-align: center;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
html body.as-page #main#main .ss-more:hover, html body.as-page #main#main .ss-more:focus-visible { background: #0b63c7; border-color: #0b63c7; transform: translateY(-1px); }
html body.as-page #main#main .ss-more:focus-visible { outline: 3px solid #1176ce; outline-offset: 4px; }
.as-feeling { --as-heading-size: clamp(40px, 3.65vw, 72px); }
.as-feeling .as-copy { top: 16.4vw; left: 66%; right: var(--as-gutter); }
/* Fit the opening artwork into the desktop viewport below the shared header. */
@media (min-width: 1000px) {
  .as-main .as-feeling {
    min-height: 0;
    height: calc(100vh - var(--detail-header-space, 112px));
    height: calc(100svh - var(--detail-header-space, 112px));
  }
  .as-feeling .as-copy { top: calc(50% - 24px); transform: translateY(-50%); }
}
html body.as-page #main#main .as-feeling p { font-size: clamp(15px, 1.55vw, 27px) !important; line-height: 1.45 !important; }
html body.as-page #main#main .as-feeling .as-heading { margin-bottom: 3.25vw !important; }
html body.as-page #main#main .as-opening { margin-top: 2.6vw; }
.as-senses { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.05vw; list-style: none; padding: 0; margin: 1.6vw 0 0; }
.as-senses li { min-width: 0; position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .45vw; }
.as-icon { display: inline-flex; align-items: center; justify-content: center; width: 4.8vw; height: 4.8vw; border: 2px solid currentColor; border-radius: 50%; flex: 0 0 auto; }
.as-icon .ph { font-size: 3vw; line-height: 1; }
.as-senses li > span:last-child { font-size: clamp(10px, .95vw, 17px); line-height: 1.2; font-weight: 700; }
.as-senses li:not(:last-child)::after { content: "\e06c"; font-family: "Phosphor"; font-weight: 400; position: absolute; top: 1.2vw; right: -1.1vw; font-size: 1.6vw; line-height: 1; }
.as-scent { --as-heading-size: clamp(34px, 3.65vw, 68px); }
.as-scent .as-copy { top: 12.5vw; right: auto; width: calc(38% - var(--as-gutter)); }
html body.as-page #main#main .as-scent .as-lead { font-size: clamp(17px, 1.48vw, 27px) !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.35 !important; margin-top: 1.8vw; margin-bottom: 1.7vw; }
html body.as-page #main#main .as-scent p { font-size: clamp(13px, 1.05vw, 20px) !important; line-height: 1.45 !important; color: #374b61; }
.as-emotions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9vw; margin-top: 4.2vw; }
.as-emotions .as-icon { color: #d8793e; width: 3.8vw; height: 3.8vw; }
.as-emotions .as-icon .ph { font-size: 2.8vw; }
.as-emotions li > span:last-child { font-size: clamp(9px, .78vw, 14px); }
.as-emotions li:not(:last-child)::after { color: #d8793e; top: 1vw; }
html body.as-page #main#main .as-scent-closing { margin-top: 2.5vw; }
.as-multisensory .as-copy { top: 6.5vw; right: auto; width: calc(53% - var(--as-gutter)); }
.as-scent-label { position: absolute; top: 2.8vw; right: 2.2vw; font-weight: 700; font-size: 1.7vw; transform: rotate(-7deg); }
.as-value { --as-heading-size: clamp(35px, 3.75vw, 70px); }
.as-value .as-copy { top: 5.8vw; right: auto; width: calc(56% - var(--as-gutter)); }
html body.as-page #main#main .as-value .as-eyebrow { letter-spacing: .06em !important; margin-bottom: 1vw; }
html body.as-page #main#main .as-value .as-lead { font-size: clamp(19px, 1.95vw, 35px) !important; }
html body.as-page #main#main .as-value .as-copy > p:last-child { font-size: clamp(13px, 1.12vw, 21px) !important; }
.as-benefits { position: absolute; top: 73.7%; left: var(--as-gutter); right: var(--as-gutter); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.6vw; text-align: center; }
html body.as-page #main#main .as-benefits h3 { font-size: clamp(11px, 1.02vw, 19px) !important; line-height: 1.22 !important; letter-spacing: -.02em !important; margin: 0 0 .4vw !important; }
html body.as-page #main#main .as-benefits p { font-size: clamp(12px, .95vw, 18px) !important; line-height: 1.3 !important; margin: 0; }
.as-value-chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3vw; position: absolute; left: var(--as-gutter); right: var(--as-gutter); bottom: 9%; list-style: none; padding: 0; margin: 0; }
.as-value-chain li { position: relative; font-weight: 700; font-size: clamp(12px, 1.3vw, 24px); letter-spacing: -.025em; text-align: center; }
.as-value-chain li:not(:last-child)::after { content: "\e06c"; font-family: "Phosphor"; position: absolute; right: -2.1vw; top: -.08em; font-size: 1.5em; font-weight: 400; }
.as-strategy { --as-heading-size: clamp(32px, 3.35vw, 64px); }
.as-strategy .as-backdrop { object-fit: fill; }
.as-strategy .as-copy { top: 5.8vw; right: auto; width: calc(57.5% - var(--as-gutter)); }
html body.as-page #main#main .as-strategy .as-eyebrow { font-size: clamp(11px, 1vw, 18px) !important; letter-spacing: .28em !important; margin-bottom: 1.1vw; }
html body.as-page #main#main .as-strategy .as-heading { margin-bottom: 1vw !important; }
html body.as-page #main#main .as-strategy .as-lead { font-size: clamp(19px, 2vw, 36px) !important; }
html body.as-page #main#main .as-strategy .as-copy > p:last-child { font-size: clamp(14px, 1.4vw, 25px) !important; }
.as-strategy-map { position: absolute; left: 18%; top: 44%; width: 40%; height: 39%; }
.as-mobile-petals { display: none; }
.as-strategy-map article { position: absolute; top: 5%; width: 29%; text-align: center; }
.as-strategy-map .as-intent { left: 3%; }
.as-strategy-map .as-expression { left: 35%; }
.as-strategy-map .as-response { left: 66%; }
.as-strategy-map .as-result { left: 35%; top: 64%; }
.as-strategy-map article > .ph { font-size: clamp(25px, 2.9vw, 53px); line-height: 1; display: block; margin-bottom: .4vw; }
html body.as-page #main#main .as-strategy-map h3 { font-size: clamp(10px, 1.05vw, 19px) !important; line-height: 1.2 !important; letter-spacing: -.025em !important; margin: 0 0 .4vw !important; }
html body.as-page #main#main .as-strategy-map p { font-size: clamp(11px, .98vw, 17px) !important; line-height: 1.25 !important; margin: 0; }
html body.as-page #main#main .as-strategy-closing { position: absolute; left: var(--as-gutter); bottom: 5%; width: calc(62% - var(--as-gutter)); font-size: clamp(17px, 1.65vw, 29px) !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -.04em !important; margin: 0; }
.as-main .as-services { background: #fff; padding-bottom: 110px; }
.as-services-hero { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 26vw; object-fit: fill; display: block; }
.as-services .as-copy { position: relative; top: auto; left: auto; right: auto; width: calc(53% - var(--as-gutter)); margin-left: var(--as-gutter); padding-top: 5.8vw; min-height: 25vw; }
html body.as-page #main#main .as-services .as-heading { margin-bottom: 1.4vw !important; }
html body.as-page #main#main .as-services .as-copy > p { font-size: clamp(14px, 1.45vw, 26px) !important; }
.as-service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 26px var(--as-gutter) 0; }
.as-service-grid > article { border: 1px solid #e1dfdc; border-radius: 16px; overflow: hidden; background: #fff; min-width: 0; }
.as-service-grid > article > img { display: block; width: 100%; aspect-ratio: 2.37; height: auto; object-fit: cover; }
.as-service-copy { position: relative; padding: 30px 18px 25px; text-align: center; }
.as-service-copy > .as-icon { position: absolute; left: 50%; top: 0; transform: translate(-50%, -55%); background: #fff; width: 4.4vw; height: 4.4vw; max-width: 74px; max-height: 74px; }
.as-service-copy > .as-icon .ph { font-size: 2.4vw; }
html body.as-page #main#main .as-service-copy h3 { font-size: clamp(17px, 1.8vw, 32px) !important; line-height: 1.1 !important; letter-spacing: -.04em !important; margin: 0 0 .7vw !important; }
html body.as-page #main#main .as-service-copy > p { font-size: clamp(13px, 1vw, 18px) !important; line-height: 1.35 !important; margin: 0 0 1vw; min-height: 3em; }
.as-service-copy ul { list-style: none; padding: 0; margin: 0; text-align: left; }
.as-service-copy li { display: flex; align-items: center; gap: 12px; padding: .4vw 0; border-bottom: 1px solid #e4e3e1; font-size: clamp(12px, .97vw, 17px); line-height: 1.3; }
.as-service-copy li:last-child { border: 0; }
.as-service-copy li .ph { font-size: 1.4em; flex: 0 0 1.1em; text-align: center; }
@media (min-width: 1800px) {
  .as-service-copy { padding-top: 42px; }
}
@media (max-width: 1199px) and (min-width: 1000px) {
  .as-main { --as-gutter: 32px; }
  .as-service-grid { gap: 14px; }
  .as-service-copy { padding-inline: 12px; }
  .as-service-copy li { gap: 8px; }
}
@media (width < 1000px) {
  .as-main { --as-gutter: 32px; --as-heading-size: clamp(36px, 5.7vw, 58px); }
  .as-main .as-scene { min-height: 0; padding-bottom: 104px; display: flex; flex-direction: column; }
  .as-backdrop { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; object-fit: cover; order: 0; }
  .as-copy, .as-feeling .as-copy, .as-scent .as-copy, .as-multisensory .as-copy, .as-value .as-copy, .as-strategy .as-copy, .as-services .as-copy {
    position: relative; top: auto; left: auto; right: auto; width: auto; margin: 0; padding: 36px var(--as-gutter) 0; order: 1;
  }
  .as-feeling, .as-scent, .as-value, .as-strategy { --as-heading-size: clamp(36px, 5.7vw, 58px); }
  html body.as-page #main#main .as-heading, html body.as-page #main#main .as-feeling .as-heading, html body.as-page #main#main .as-strategy .as-heading { margin-bottom: 22px !important; }
  html body.as-page #main#main p, html body.as-page #main#main .as-feeling p, html body.as-page #main#main .as-scent p, html body.as-page #main#main .as-value .as-copy > p:last-child, html body.as-page #main#main .as-strategy .as-copy > p:last-child, html body.as-page #main#main .as-services .as-copy > p { font-size: 18px !important; line-height: 1.5 !important; margin-bottom: 20px; }
  html body.as-page #main#main .as-lead, html body.as-page #main#main .as-scent .as-lead, html body.as-page #main#main .as-value .as-lead, html body.as-page #main#main .as-strategy .as-lead { font-size: 25px !important; line-height: 1.25 !important; margin: 0 0 18px; }
  html body.as-page #main#main .as-eyebrow, html body.as-page #main#main .as-strategy .as-eyebrow { font-size: 13px !important; margin-bottom: 18px; letter-spacing: .16em !important; }
  html body.as-page #main#main .as-opening { margin-top: 26px; }
  .as-wide-break { display: none; }
  .as-senses { gap: 20px; margin-top: 30px; }
  .as-icon { width: 64px; height: 64px; }
  .as-icon .ph { font-size: 38px; }
  .as-senses li { gap: 10px; }
  .as-senses li > span:last-child { font-size: 12px; }
  .as-senses li:not(:last-child)::after { top: 20px; right: -18px; font-size: 24px; }
  .as-emotions { margin-top: 32px; max-width: 580px; }
  .as-emotions .as-icon { width: 64px; height: 64px; }
  .as-emotions .as-icon .ph { font-size: 38px; }
  html body.as-page #main#main .as-scent-closing { margin-top: 30px; }
  .as-scent-label { top: 4vw; right: 4vw; font-size: 18px; }
  .as-value .as-copy { order: 0; padding-bottom: 12px; }
  .as-value .as-backdrop { order: 1; }
  .as-benefits { position: relative; top: auto; left: auto; right: auto; margin: 30px var(--as-gutter); gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); order: 2; }
  html body.as-page #main#main .as-benefits h3 { font-size: 15px !important; margin-bottom: 10px !important; }
  html body.as-page #main#main .as-benefits p { font-size: 15px !important; line-height: 1.4 !important; margin: 0; }
  .as-value-chain { position: relative; left: auto; right: auto; bottom: auto; margin: 15px var(--as-gutter) 0; gap: 30px; order: 3; }
  .as-value-chain li { font-size: 13px; }
  .as-value-chain li:not(:last-child)::after { right: -24px; }
  .as-strategy .as-backdrop { aspect-ratio: 2560 / 1200; object-fit: cover; }
  .as-strategy-map { position: relative; left: auto; top: auto; width: calc(100% - 64px); height: auto; aspect-ratio: 1020 / 490; margin: 16px auto 0; order: 2; }
  .as-mobile-petals { display: block; width: 100%; height: 100%; object-fit: contain; }
  .as-strategy-map article { top: 7%; }
  .as-strategy-map article > .ph { font-size: 36px; margin-bottom: 6px; }
  html body.as-page #main#main .as-strategy-map h3 { font-size: 14px !important; margin-bottom: 6px !important; }
  html body.as-page #main#main .as-strategy-map p { font-size: 14px !important; line-height: 1.25 !important; margin: 0; }
  html body.as-page #main#main .as-strategy-closing { position: relative; left: auto; bottom: auto; width: auto; margin: 28px var(--as-gutter) 0; order: 3; font-size: 23px !important; }
  .as-services-hero { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 2560 / 540; object-fit: cover; order: 0; }
  .as-services .as-copy { min-height: 0; }
  .as-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px var(--as-gutter) 0; gap: 24px; order: 2; }
  .as-service-copy { padding: 42px 24px 26px; }
  .as-service-copy > .as-icon { width: 64px; height: 64px; }
  .as-service-copy > .as-icon .ph { font-size: 36px; }
  html body.as-page #main#main .as-service-copy h3 { font-size: 26px !important; margin-bottom: 12px !important; }
  html body.as-page #main#main .as-service-copy > p { font-size: 16px !important; margin-bottom: 16px; }
  .as-service-copy li { font-size: 15px; padding: 8px 0; }
}
@media (max-width: 599px) {
  .as-main { --as-gutter: 22px; }
  .as-feeling, .as-scent, .as-value, .as-strategy, .as-main { --as-heading-size: clamp(32px, 8.6vw, 48px); }
  .as-copy, .as-feeling .as-copy, .as-scent .as-copy, .as-multisensory .as-copy, .as-value .as-copy, .as-strategy .as-copy, .as-services .as-copy { padding-top: 28px; }
  html body.as-page #main#main .as-heading { line-height: 1.07 !important; }
  html body.as-page #main#main p, html body.as-page #main#main .as-feeling p, html body.as-page #main#main .as-scent p, html body.as-page #main#main .as-value .as-copy > p:last-child, html body.as-page #main#main .as-strategy .as-copy > p:last-child, html body.as-page #main#main .as-services .as-copy > p { font-size: 16px !important; }
  html body.as-page #main#main .as-lead, html body.as-page #main#main .as-scent .as-lead, html body.as-page #main#main .as-value .as-lead, html body.as-page #main#main .as-strategy .as-lead { font-size: 22px !important; }
  html body.as-page #main#main .as-eyebrow { font-size: 12px !important; }
  html body.as-page #main#main .ss-more { min-width: 142px; font-size: 14px !important; bottom: 28px; }
  .as-senses { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
  .as-senses li:not(:last-child)::after { content: none; }
  .as-emotions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .as-senses li > span:last-child { font-size: 12px; }
  .as-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin-top: 24px; }
  .as-value-chain { grid-template-columns: 1fr; gap: 28px; }
  .as-value-chain li { font-size: 15px; }
  .as-value-chain li:not(:last-child)::after { content: "\e03e"; top: 22px; right: 50%; transform: translateX(50%); font-size: 20px; }
  .as-strategy-map { display: grid; grid-template-columns: 1fr; gap: 24px; width: auto; aspect-ratio: auto; margin: 12px var(--as-gutter) 0; }
  .as-mobile-petals { display: none; }
  .as-strategy-map article, .as-strategy-map .as-intent, .as-strategy-map .as-expression, .as-strategy-map .as-response, .as-strategy-map .as-result { position: relative; left: auto; top: auto; width: 100%; padding: 22px 16px; background: #fff; border: 1px solid #e4dfd8; border-radius: 16px; }
  .as-strategy-map article > .ph { font-size: 38px; margin-bottom: 10px; }
  html body.as-page #main#main .as-strategy-map h3 { font-size: 17px !important; margin-bottom: 10px !important; }
  html body.as-page #main#main .as-strategy-map p { font-size: 16px !important; margin: 0; }
  html body.as-page #main#main .as-strategy-closing { font-size: 22px !important; line-height: 1.35 !important; }
  .as-service-grid { grid-template-columns: 1fr; gap: 26px; }
  .as-service-copy { padding: 44px 24px 26px; }
  html body.as-page #main#main .as-service-copy > p { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html body.as-page #main#main .ss-more { transition: none; }
  html body.as-page #main#main .ss-more:hover, html body.as-page #main#main .ss-more:focus-visible { transform: none; }
}

/* Keep heading/anchor alignment stable; respect the requested site text frame. */
html:has(body.as-page) { scroll-behavior: auto; }
html body.as-page #main#main .as-feeling p { font-size: clamp(16px, 1.25vw, 23px) !important; }
html body.as-page #main#main .as-lead { font-weight: 500 !important; }
.as-senses li::after, .as-value-chain li::after { font-family: "Phosphor" !important; }
@media (max-width: 599px) {
  html body.as-page #main#main .as-feeling p { font-size: 16px !important; }
}
/* Preserve compact service rows inside the reference four-column composition. */
html body.as-page #main#main .as-service-copy li { font-size: clamp(14px, .97vw, 17px) !important; line-height: 1.3 !important; }
@media (width < 1000px) { html body.as-page #main#main .as-service-copy li { font-size: 16px !important; line-height: 1.4 !important; } }
/* Label arrows remain Phosphor glyphs through the global typography layer. */
html body.as-page #main#main .as-senses li::after,
html body.as-page #main#main .as-value-chain li::after { font-family: "Phosphor" !important; }
html body.as-page #main#main .as-value-chain li { font-size: clamp(12px, 1.3vw, 24px) !important; line-height: 1.25 !important; font-weight: 700 !important; }
@media (min-width: 1000px) {
  html body.as-page #main#main .as-value .ss-more { bottom: 14px; }
}
@media (max-width: 599px) {
  html body.as-page #main#main .as-value-chain li { font-size: 15px !important; }
}
@media (min-width: 1000px) {
  .as-scent .as-copy { width: calc(35% - var(--as-gutter)); }
  html body.as-page #main#main .as-service-copy h3 { font-size: clamp(17px, 1.48vw, 28px) !important; }
}
@media (min-width: 1000px) {
  html body.as-page #main#main .as-service-copy > p { min-height: 4.05em; }
}
