/* Co-Creation uses the Exposome palette, shared typography and home shell.
   Editorial text stays in the document, independent from the supplied artwork. */
html:has(body.co-creation-page) { scroll-behavior: auto; }
body.co-creation-page {
  --cc-ink: #091963;
  --cc-muted: #536ba6;
  --cc-gutter: 150px;
  color: var(--cc-ink);
  background: #f9fcff;
}
.co-creation-page #main {
  --site-type-h2: clamp(34px, 3.25vw, 54px);
  --site-line-h2: 1.08;
  --site-letter-h2: -.035em;
  --arotec-body-size: clamp(18px, 1.4vw, 23px);
  --arotec-body-line-height: 1.45;
  padding: 110.6px 0 0;
  color: var(--cc-ink);
  background: #f9fcff;
}
.co-creation-page #main > section { margin: 0; border: 0; content-visibility: visible; }
.co-creation-page #main > section::before { display: none; }
.cc-shell { position: relative; z-index: 1; margin-inline: var(--cc-gutter); }
.co-creation-page #main :is(h1, h2, h3) { color: var(--cc-ink); }
html body.co-creation-page #main :is(h2, h3) { margin-bottom: 14px !important; }
.cc-panel { position: relative; isolation: isolate; background: #f9fcff; }
.cc-art { position: absolute; inset: 0; z-index: 0; display: block; }
.cc-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cc-panel .cc-shell { display: flex; align-items: center; min-height: inherit; }
.cc-hero { min-height: max(640px, calc(100svh - 110.6px)); }
.cc-hero-copy { width: min(670px, 47%); padding-block: 60px; }
.cc-hero-copy h1 { --site-line-h1: 1.02; --arotec-display-line-height: 1.02; }
.co-creation-page #main .cc-subtitle { margin: 0; font-size: clamp(20px, 1.6vw, 27px) !important; line-height: 1.35 !important; color: var(--cc-ink); }
.cc-intro { margin-top: clamp(38px, 4vw, 64px); padding-top: 32px; border-top: 2px solid #76b9dd; }
.cc-intro h2 { --site-type-h2: clamp(25px, 2.1vw, 34px); --site-line-h2: 1.2; --site-letter-h2: -.02em; }
.cc-intro p { max-width: 580px; margin: 22px 0 0; }
.cc-text-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; margin-top: 28px; color: var(--cc-ink); font-size: 16px; font-weight: 700; text-decoration: none; }
.cc-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.cc-text-link .ph { font-size: 21px; }
.cc-pathways { position: relative; isolation: isolate; min-height: 56.28vw; background: #f9fcff; }
.cc-pathways-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.cc-pathways-heading { padding-top: clamp(42px, 4.2vw, 70px); }
.cc-pathways-intro { margin: 26px 0 0; }
.cc-pathway { position: absolute; display: block; width: 17.3%; padding: 12px; color: var(--cc-ink); text-decoration: none; border: 1px solid transparent; border-radius: 10px; transition: background-color 160ms, border-color 160ms; }
.cc-pathway--product { left: 7.8%; top: 35.7%; width: 20%; }
.cc-pathway--sensory { left: 34.6%; top: 32.2%; }
.cc-pathway--brand { left: 57.1%; top: 30.7%; width: 19.3%; }
.cc-pathway--functional { left: 77.4%; top: 27.6%; width: 17.8%; }
.cc-pathway h3 { --site-type-h3: clamp(19px, 1.62vw, 28px); --site-line-h3: 1.08; --site-letter-h3: -.03em; }
html body.co-creation-page #main .cc-pathway h3 { margin-bottom: 8px !important; }
.co-creation-page #main .cc-pathway p { --arotec-body-size: clamp(14px, 1.1vw, 18px); --arotec-body-line-height: 1.35; margin: 0; }
.cc-pathway:hover { background: #ffffffb8; border-color: #b9d5e7; }
.cc-pathway:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.cc-service { min-height: 56.28vw; }
.cc-service .cc-copy { --site-type-h2: clamp(34px, 2.92vw, 50px); }
.cc-copy { width: 39%; padding-block: 60px; }
.cc-service--right .cc-shell { justify-content: flex-end; }
.cc-service--right .cc-copy { width: 39%; }
@media (min-width: 1200px) {
  /* Respect the different white copy areas in the supplied source panels. */
  #sensory-design .cc-copy { width: 34%; }
  #functional-innovation .cc-copy { width: 30%; }
}
.cc-description { margin: clamp(28px, 3vw, 46px) 0 0; }
.cc-senses { margin: 28px 0 0; font-weight: 500; }
.cc-senses + .cc-description { margin-top: 28px; }
.cc-list { --arotec-body-size: clamp(17px, 1.23vw, 20px); --arotec-body-line-height: 1.5; list-style: none; margin: 32px 0 0; padding: 0; }
.cc-list li { position: relative; padding-left: 36px; font-size: clamp(17px, 1.23vw, 20px); line-height: 1.5; }
.cc-list li::before { position: absolute; left: 0; top: .7em; width: 22px; border-top: 2px solid #395795; content: ''; }
.cc-list li + li { margin-top: 20px; }
.cc-contact { min-height: 56.28vw; }
.cc-contact-copy { width: 47%; padding-block: 72px; }
.cc-contact-copy h2 { --site-type-h2: clamp(44px, 4.3vw, 72px); --site-line-h2: 1.08; }
.co-creation-page #main .cc-contact-copy .cc-subtitle { font-weight: 700; }
.co-creation-page #main a:focus-visible { outline: 3px solid #317bc5; outline-offset: 5px; }
.co-creation-page #main section[id] { scroll-margin-top: 20px; }
@media (min-width: 1200px) and (max-width: 1399px) {
  .co-creation-page #main { --site-type-h2: 38px; --arotec-body-size: 18px; }
  .cc-hero-copy { width: 54%; }
  .cc-copy, .cc-service--right .cc-copy { width: 42%; }
  .cc-pathways { min-height: 740px; }
  .cc-pathways-art { object-fit: cover; }
  .cc-pathways-heading { padding-top: 38px; }
  .cc-pathways-intro { margin-top: 20px; }
  .cc-list { margin-top: 24px; }
  .cc-list li + li { margin-top: 14px; }
}
@media (max-width: 1199px) {
  body.co-creation-page { --cc-gutter: 40px; }
  .co-creation-page #main { --site-type-h2: 38px; --arotec-body-size: 20px; }
  .cc-panel { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
  .cc-panel .cc-shell { display: flex; margin: 0; min-width: 0; padding: 48px 36px; }
  .cc-art { position: relative; inset: auto; min-width: 0; min-height: 440px; }
  .cc-art img { object-fit: cover; }
  .cc-hero-copy, .cc-copy, .cc-service--right .cc-copy, .cc-contact-copy { width: 100%; padding: 0; }
  .cc-hero .cc-shell, .cc-service--left .cc-shell, .cc-contact .cc-shell { grid-column: 1; grid-row: 1; }
  .cc-hero .cc-art, .cc-service--left .cc-art, .cc-contact .cc-art { grid-column: 2; grid-row: 1; }
  .cc-hero-copy h1 { --site-type-h1: 56px; --site-line-h1: 1.05; --arotec-display-size: 56px; --arotec-display-line-height: 1.05; }
  .cc-intro { margin-top: 34px; padding-top: 28px; }
  .cc-pathways { padding: 52px 0; min-height: 0; }
  .cc-pathways-heading { padding: 0; }
  .cc-pathways-art { position: relative; display: block; z-index: 0; height: auto; margin: 28px 0 0; }
  .cc-pathway-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 28px var(--cc-gutter) 0; }
  .cc-pathway { position: static; width: auto; padding: 24px; border: 1px solid #dae4f4; border-top: 4px solid #76b9dd; border-radius: 12px; background: #fff; }
  .cc-pathway h3 { --site-type-h3: 25px; }
  .co-creation-page #main .cc-pathway p { --arotec-body-size: 17px; --arotec-body-line-height: 1.5; }
  .cc-service .cc-copy { --site-type-h2: 36px; }
  .cc-service { border-top: 1px solid #e5edf4 !important; }
  .cc-list { --arotec-body-size: 18px; }
  .cc-list li { font-size: 18px; }
  .cc-list li + li { margin-top: 16px; }
}
@media (max-width: 800px) {
  body.co-creation-page { --cc-gutter: 24px; }
  .co-creation-page #main { padding-top: 100px; --site-type-h2: 36px; --arotec-body-size: 18px; --arotec-body-line-height: 1.5; }
  .cc-panel { display: flex; flex-direction: column; }
  .cc-panel .cc-shell { order: 0; margin: 0; padding: 46px var(--cc-gutter) 36px; }
  .cc-art { order: 1; min-height: 0; }
  .cc-art img { width: 100%; height: auto; max-height: 620px; object-fit: cover; }
  .cc-hero-copy h1 { --site-type-h1: clamp(44px, 10vw, 64px); --arotec-display-size: clamp(44px, 10vw, 64px); }
  .co-creation-page #main .cc-subtitle { font-size: 20px !important; }
  .cc-intro { border-top-width: 2px; margin-top: 32px; padding-top: 25px; }
  .cc-intro p { margin-top: 16px; }
  .cc-text-link { margin-top: 20px; }
  .cc-pathways { padding: 44px 0; }
  .cc-pathways-intro { margin-top: 22px; }
  .cc-pathways-art { margin-top: 20px; }
  .cc-pathway-links { gap: 16px; margin-top: 20px; }
  .cc-pathway { padding: 20px; }
  .cc-copy h2 br { display: none; }
  .cc-description { margin-top: 26px; }
  .cc-list { --arotec-body-size: 17px; margin-top: 26px; }
  .cc-list li { padding-left: 30px; font-size: 17px; }
  .cc-list li::before { width: 18px; }
  .cc-contact-copy h2 { --site-type-h2: 46px; }
  .co-creation-page #main section[id] { scroll-margin-top: 18px; }
}
@media (max-width: 520px) {
  .cc-pathway-links { grid-template-columns: 1fr; }
  .cc-pathway h3 br { display: none; }
  .cc-pathway h3 { --site-type-h3: 25px; }
  .cc-pathway p br, .cc-pathways-intro br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-pathway { transition: none; }
}
