/* Official site, October 2026. This layer owns visual rhythm; existing URLs,
   content, forms and editor-managed component styles retain their behavior. */
body.wn-com-experience #site-main {
  --ex-paper: var(--c-paper);
  --ex-wash: color-mix(in srgb, var(--c-paper) 96%, var(--c-accent) 4%);
  --ex-soft: color-mix(in srgb, var(--c-paper) 92%, var(--c-accent) 8%);
  --ex-line: color-mix(in srgb, var(--c-ink) 15%, var(--c-paper));
  --ex-accent: var(--c-accent-text, var(--c-accent-deep));
  --ex-shadow: 0 18px 44px color-mix(in srgb, var(--c-ink) 7%, transparent);
  background: var(--ex-wash);
  background-image: none;
}
body.wn-com-experience[class] :is(.page-default, .page-default__content, .page-lp) { background: transparent; }
body.wn-com-experience[class] :is(.page-default, .page-default__header) { box-shadow: none; }
body.wn-com-experience[class] .page-default__header {
  padding-block: 46px 34px;
  border-bottom: 1px solid var(--ex-line);
  background: transparent;
  text-align: left;
}
body.wn-com-experience[class] .page-default__title {
  font-size: clamp(30px, 3.7vw, 52px);
  line-height: 1.45;
  letter-spacing: -.035em;
  color: var(--c-ink);
}
body.wn-com-experience[class] :is(.page-default__content, .wn-editorial) { line-height: 1.95; }
body.wn-com-experience[class] #site-main :is(a, button, summary):focus-visible { outline: 3px solid var(--ex-accent); outline-offset: 5px; }
body.wn-com-experience[class] :is(.r26-section, .wn-pf-sec, .wn-cr-sec, .wn-editorial__section) { scroll-margin-top: 160px; }

/* The arrival is a typographic stage, followed by three equally usable routes. */
body.wn-com-experience[class] .wn-r26 {
  max-width: 1200px;
  padding: 56px 40px 76px;
  background: transparent;
  --r-panel: var(--ex-soft);
  --r-line: var(--ex-line);
}
body.wn-com-experience[class] .wn-r26 .r26-arrival {
  grid-template-columns: minmax(0, 1fr) 250px;
  column-gap: 36px;
  row-gap: 28px;
  padding: 10px 0 46px;
  border: 0;
}
body.wn-com-experience[class] .wn-r26 .r26-arrival h1 {
  max-width: none;
  font-size: clamp(38px, 4.5vw, 60px)!important;
  line-height: 1.42!important;
  letter-spacing: -.055em!important;
  margin: 20px 0 24px!important;
}
body.wn-com-experience[class] .wn-com-title-line { display: block; }
body.wn-com-experience[class] .wn-com-title-line--accent { color: var(--ex-accent); }
body.wn-com-experience[class] .wn-r26 .r26-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px!important;
  letter-spacing: .055em!important;
}
body.wn-com-experience[class] .wn-r26 .r26-kicker::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
  flex: 0 0 7px;
}
body.wn-com-experience[class] .wn-r26 .r26-arrival .r26-lead { max-width: 38em; font-size: 17px; line-height: 2; }
body.wn-com-experience[class] .wn-r26 .r26-host {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 250px;
  padding: 22px 12px 0;
  align-self: center;
}
body.wn-com-experience[class] .wn-com-orbit {
  position: absolute;
  inset: 12px 0 34px;
  z-index: -1;
  border: 1px solid var(--ex-line);
  border-radius: 50%;
  background: var(--ex-soft);
  transform: rotate(-16deg);
}
body.wn-com-experience[class] .wn-com-orbit::before,
body.wn-com-experience[class] .wn-com-orbit::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  top: 10%;
  right: 6%;
  background: var(--c-accent);
}
body.wn-com-experience[class] .wn-com-orbit::after { width: 13px; height: 13px; top: auto; right: auto; left: 2%; bottom: 16%; background: var(--c-ink); }
body.wn-com-experience[class] .wn-r26 .r26-host .r26-character { width: 200px; margin: 0 auto; }
body.wn-com-experience[class] .wn-r26 .r26-host p { border: 0; font-size: 12px; padding: 9px 12px; border-radius: 20px; background: var(--ex-paper); }
body.wn-com-experience[class] .wn-r26 .r26-routes {
  gap: 16px;
  border: 0;
  margin-top: 20px;
}
body.wn-com-experience[class] .wn-r26 .r26-routes a {
  position: relative;
  min-width: 0;
  padding: 28px 24px 24px;
  border: 1px solid var(--ex-line);
  border-top: 3px solid var(--c-accent);
  border-radius: 4px 4px 18px 4px;
  gap: 14px;
  background: var(--ex-paper);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.wn-com-experience[class] .wn-r26 .r26-routes a:nth-child(2) { border-top-color: var(--c-ink); }
body.wn-com-experience[class] .wn-r26 .r26-routes a:nth-child(3) { border-top-color: var(--c-blue-mid); }
body.wn-com-experience[class] .wn-r26 .r26-routes a strong { font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.02em; }
body.wn-com-experience[class] .wn-r26 .r26-routes .r26-route-number { font-size: 12px; letter-spacing: .08em; padding-bottom: 8px; }
body.wn-com-experience[class] .wn-r26 .r26-routes .r26-route-next { padding-top: 22px; margin-top: auto; border-top: 1px solid var(--ex-line); text-decoration: none; font-weight: 700; font-size: 13px; }
body.wn-com-experience[class] .wn-r26 .r26-arrival-note { text-align: center; margin-inline: auto; color: var(--r-muted); font-size: 12px; }

/* A consistent numbered rhythm, restrained cards, and a visual project story. */
body.wn-com-experience[class] .wn-r26 .r26-section { padding-block: 64px; border-bottom-color: var(--ex-line); }
body.wn-com-experience[class] .wn-r26 .r26-section-head { gap: 20px; margin-bottom: 32px; align-items: baseline; }
body.wn-com-experience[class] .wn-r26 .r26-index { font-size: 14px; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
body.wn-com-experience[class] .wn-r26 h2 { font-size: clamp(25px, 2.6vw, 34px)!important; letter-spacing: -.025em!important; }
body.wn-com-experience[class] .wn-r26 .r26-proof { gap: 24px; }
body.wn-com-experience[class] .wn-r26 :is(.r26-proof, .r26-utility) a.r26-link {
  min-height: 78px;
  padding: 22px 24px;
  background: var(--ex-paper);
  border: 1px solid var(--ex-line);
  border-radius: 4px 4px 14px 4px;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.wn-com-experience[class] .wn-r26 .r26-project {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 48px;
  padding: 48px;
  margin-block: 36px 14px;
  border: 1px solid var(--ex-line);
  border-radius: 6px 6px 28px 6px;
  background: var(--ex-soft);
}
body.wn-com-experience[class] .wn-r26 .r26-project-story h2 { font-size: clamp(28px, 3.1vw, 38px)!important; line-height: 1.55!important; }
body.wn-com-experience[class] .wn-r26 .r26-project-story .r26-kicker { margin-bottom: 24px; }
body.wn-com-experience[class] .wn-r26 .r26-project-gallery { padding: 12px; border: 1px solid var(--ex-line); border-radius: 14px; box-shadow: var(--ex-shadow); background: var(--ex-paper); }
body.wn-com-experience[class] .wn-r26 .r26-project-image { border-radius: 6px; aspect-ratio: 6/5; height: auto; }
body.wn-com-experience[class] .wn-r26 .r26-project-image img { transition: transform .65s ease; }
body.wn-com-experience[class] .wn-r26 .r26-project-view figcaption { padding: 18px 8px 8px; }
body.wn-com-experience[class] .wn-r26 .r26-project-tabs { padding: 4px; border-radius: 8px; background: var(--ex-soft); }
body.wn-com-experience[class] .wn-r26 .r26-project-tabs button { border-radius: 5px; }
body.wn-com-experience[class] .wn-r26 .r26-steps { gap: 24px; }
body.wn-com-experience[class] .wn-r26 .r26-steps li { padding: 28px 24px 24px; border-top: 1px solid var(--ex-line); background: var(--ex-paper); }
body.wn-com-experience[class] .wn-r26 .r26-steps li > span { font-size: 42px; font-weight: 400; letter-spacing: -.05em; margin-bottom: 22px; }
body.wn-com-experience[class] .wn-r26 .r26-steps h3 { font-size: 20px!important; }
body.wn-com-experience[class] .wn-r26 .r26-steps p { font-size: 14px; margin-bottom: 0; }
body.wn-com-experience[class] .wn-r26 .r26-button {
  min-height: 54px;
  padding: 16px 24px;
  border-radius: 6px;
  box-shadow: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
body.wn-com-experience[class] .wn-r26 .r26-close {
  margin-top: 56px;
  padding: 38px 34px;
  gap: 28px;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  border: 1px solid var(--ex-line);
  border-radius: 6px 6px 24px 6px;
  background: var(--ex-soft);
}
body.wn-com-experience[class] .wn-r26 .r26-close h2 { font-size: 25px!important; }
body.wn-com-experience[class] .wn-r26 .r26-close p { font-size: 14px; }
body.wn-com-experience[class] .wn-r26 .r26-close > .r26-button { white-space: normal; max-width: 230px; }

/* Service information shares the same language as the home page. */
body.wn-com-experience[class] .wn-r26 .r26-hero { gap: 44px; padding-block: 34px 54px; align-items: start; }
body.wn-com-experience[class] .wn-r26 .r26-hero h1 { font-size: clamp(30px, 3.35vw, 43px)!important; line-height: 1.55!important; letter-spacing: -.035em!important; }
body.wn-com-experience[class] .wn-r26 .r26-brief { background: var(--ex-soft); border: 1px solid var(--ex-line); border-radius: 4px 4px 20px 4px; padding: 26px; }
body.wn-com-experience[class] .wn-r26 .r26-brief .r26-character { width: 100px; float: right; margin: 0 0 10px 12px; }
body.wn-com-experience[class] .wn-r26 .r26-brief ol { clear: both; }
body.wn-com-experience[class] .wn-r26 .r26-brief p:not(.r26-kicker) { font-size: 14px; }
body.wn-com-experience[class] :is(.r26-page-index, .wn-pf-index, .wn-cr-index) { gap: 10px 24px; padding-block: 16px; border-block: 1px solid var(--ex-line); background: transparent; }
body.wn-com-experience[class] .wn-r26 .r26-service-rows { gap: 18px; }
body.wn-com-experience[class] .wn-r26 .r26-service-rows article { padding: 28px 24px; border: 1px solid var(--ex-line); border-top: 3px solid var(--c-accent); border-radius: 4px 4px 16px 4px; background: var(--ex-paper); }
body.wn-com-experience[class] .wn-r26 .r26-service-rows article:nth-child(2) { border-top-color: var(--c-ink); }
body.wn-com-experience[class] .wn-r26 .r26-service-rows article:nth-child(3) { border-top-color: var(--c-blue-mid); }
body.wn-com-experience[class] .wn-r26 .r26-service-rows h3 { font-size: 20px!important; }
body.wn-com-experience[class] .wn-r26 .r26-service-rows p { font-size: 15px; }
body.wn-com-experience[class] .wn-r26 #r26-pricing .r26-proof > div { background: var(--ex-paper); border-radius: 4px 4px 16px 4px; }
body.wn-com-experience[class] .wn-r26 #r26-estimate dt { background: var(--ex-soft); }
body.wn-com-experience[class] .wn-r26 .r26-alert { background: var(--ex-soft); border-left-width: 3px; }

/* Profile, credentials, case studies and editorial pages keep their structures. */
body.wn-com-experience[class] :is(.wn-pf, .wn-cr) { gap: 64px; }
body.wn-com-experience[class] :is(.wn-pf-sec, .wn-cr-sec) { padding-top: 38px; border-top-color: var(--ex-line); }
body.wn-com-experience[class] :is(.wn-pf-h3, .wn-cr-h3) { letter-spacing: -.025em; }
body.wn-com-experience[class] .wn-pf .wn-pf-intro { background: var(--ex-soft); padding: 42px; border: 1px solid var(--ex-line); border-radius: 4px 4px 26px 4px; }
body.wn-com-experience[class] .wn-pf .wn-pf-intro__photo img { border-radius: 4px 4px 26px 4px; }
body.wn-com-experience[class] :is(.wn-pf-scopecard, .wn-pf-beforecard, .wn-cr-card, .wn-cr-case, .wn-cr-stat, .wn-editorial__section) {
  background: var(--ex-paper);
  border-color: var(--ex-line);
  border-radius: 4px 4px 16px 4px;
  box-shadow: none;
}
body.wn-com-experience[class] .wn-cr .wn-cr-stats { gap: 16px; }
body.wn-com-experience[class] .wn-cr .wn-cr-stat { padding: 26px 20px; border-top: 3px solid var(--c-accent); }
body.wn-com-experience[class] :is(.wn-pf-stat__num, .wn-cr-stat__num) { letter-spacing: -.05em; color: var(--ex-accent); }
body.wn-com-experience[class] :is(.wn-pf-note, .wn-cr-note){ background: var(--ex-soft); border-color: var(--ex-line); }
body.wn-com-experience[class] :is(.wn-pf-cta, .wn-cr-cta) { border-radius: 6px 6px 24px 6px; }
body.wn-com-experience[class] .wn-editorial__section { padding: 30px; }
body.wn-com-experience[class] .wn-editorial__links { border: 1px solid var(--ex-line); border-radius: 6px; background: var(--ex-soft); }
body.wn-com-experience[class] .wn-page-preparation { border-color: var(--ex-line); border-radius: 6px; }

/* Motion is progressive: no opacity/visibility gate can hide content if JS fails. */
/* Decorative layers exist only during finite, script-started effects. */
body.wn-com-experience #site-main .wn-com-shimmer-target { position: relative; overflow: hidden; }
body.wn-com-experience #site-main .wn-com-shimmer { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 20%, rgb(255 255 255 / .32), transparent 80%); }
body.wn-com-experience #site-main .wn-com-step-target { position: relative; }
body.wn-com-experience #site-main .wn-com-step-line { position: absolute; inset: -1px 0 auto; display: block; width: 100%; height: 2px; margin: 0; pointer-events: none; background: var(--ex-accent); transform-origin: left; }
body.wn-com-experience #site-main .r26-project-image { position: relative; }
body.wn-com-experience #site-main .wn-com-image-ghost { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.wn-com-experience[class] .wn-r26 :is(.r26-routes a, .r26-proof a.r26-link, .r26-utility a.r26-link):hover { transform: translateY(-5px); box-shadow: var(--ex-shadow); border-color: var(--c-accent); }
  body.wn-com-experience[class] .wn-r26 .r26-button:hover { transform: translateY(-3px); box-shadow: var(--ex-shadow); }
  body.wn-com-experience[class] .wn-r26 .r26-project-image:hover img { transform: scale(1.025); }
}
@media (min-width: 1000px) {
  body.wn-com-experience[class] .wn-r26 .r26-project-story { position: sticky; top: 150px; align-self: start; }
  body.wn-com-experience[class] .wn-pf .wn-pf-sec > .wn-pf-h3 { position: sticky; top: 150px; }
}
@media (max-width: 1000px) {
  body.wn-com-experience[class] .wn-r26 .r26-arrival { grid-template-columns: minmax(0, 1fr) 170px; gap: 24px; }
  body.wn-com-experience[class] .wn-r26 .r26-arrival h1 { font-size: clamp(34px, 4.6vw, 47px)!important; }
  body.wn-com-experience[class] .wn-r26 .r26-host .r26-character { width: 160px; }
  body.wn-com-experience[class] .wn-r26 .r26-project { gap: 28px; padding: 28px; }
  body.wn-com-experience[class] .wn-r26 .r26-close { grid-template-columns: 80px minmax(0, 1fr); }
  body.wn-com-experience[class] .wn-r26 .r26-close > .r26-button { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
  body.wn-com-experience[class] .wn-r26 { padding: 30px 22px 46px; }
  body.wn-com-experience[class] .wn-r26 .r26-arrival { grid-template-columns: 1fr; gap: 20px; padding-bottom: 26px; }
  body.wn-com-experience[class] .wn-r26 .r26-arrival-title { grid-column: 1; }
  body.wn-com-experience[class] .wn-r26 .r26-arrival h1 { font-size: clamp(29px, 7.6vw, 42px)!important; letter-spacing: -.05em!important; line-height: 1.5!important; margin-block: 18px 22px!important; }
  body.wn-com-experience[class] .wn-r26 .r26-arrival .r26-lead { font-size: 15px; line-height: 1.95; }
  body.wn-com-experience[class] .wn-r26 .r26-host { display: flex; align-items: center; justify-content: flex-start; gap: 18px; width: 100%; max-width: none; padding: 0; }
  body.wn-com-experience[class] .wn-r26 .r26-host .r26-character { width: 78px; margin: 0; }
  body.wn-com-experience[class] .wn-com-orbit { width: 78px; inset: 0 auto 0 0; }
  body.wn-com-experience[class] .wn-com-orbit::before { width: 10px; height: 10px; }
  body.wn-com-experience[class] .wn-com-orbit::after { width: 6px; height: 6px; }
  body.wn-com-experience[class] .wn-r26 .r26-host p { font-size: 12px; margin: 0; padding: 10px 14px; }
  body.wn-com-experience[class] .wn-r26 .r26-routes { grid-template-columns: 1fr; gap: 12px; margin-top: 0; }
  body.wn-com-experience[class] .wn-r26 .r26-routes a { padding: 20px; gap: 8px; }
  body.wn-com-experience[class] .wn-r26 .r26-routes a strong { font-size: 20px; }
  body.wn-com-experience[class] .wn-r26 .r26-routes .r26-route-number { padding-bottom: 3px; font-size: 11px; }
  body.wn-com-experience[class] .wn-r26 .r26-routes .r26-route-next { margin-top: 8px; padding-top: 12px; }
  body.wn-com-experience[class] .wn-r26 .r26-arrival-note { text-align: left; margin-inline: 0; line-height: 1.9; }
  body.wn-com-experience[class] .wn-r26 .r26-section { padding-block: 40px; }
  body.wn-com-experience[class] .wn-r26 .r26-section-head { gap: 12px; margin-bottom: 26px; }
  body.wn-com-experience[class] .wn-r26 h2 { font-size: 25px!important; line-height: 1.65!important; }
  body.wn-com-experience[class] .wn-r26 .r26-project { grid-template-columns: 1fr; padding: 24px 18px; gap: 28px; margin-block: 24px 0; }
  body.wn-com-experience[class] .wn-r26 .r26-project-story h2 { font-size: 29px!important; }
  body.wn-com-experience[class] .wn-r26 .r26-project-story .r26-kicker { margin-bottom: 18px; }
  body.wn-com-experience[class] .wn-r26 .r26-project-story .r26-button { margin-top: 10px; }
  body.wn-com-experience[class] .wn-r26 .r26-project-gallery { padding: 9px; }
  body.wn-com-experience[class] .wn-r26 .r26-steps { gap: 16px; }
  body.wn-com-experience[class] .wn-r26 .r26-steps li { padding: 24px; }
  body.wn-com-experience[class] .wn-r26 .r26-steps li > span { font-size: 34px; margin-bottom: 12px; }
  body.wn-com-experience[class] .wn-r26 .r26-close { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding: 26px 22px; margin-top: 36px; }
  body.wn-com-experience[class] .wn-r26 .r26-close > .r26-character { width: 74px; margin: 0; }
  body.wn-com-experience[class] .wn-r26 .r26-close > .r26-button { max-width: none; justify-content: center; }
  body.wn-com-experience[class] .wn-r26 .r26-close h2 { font-size: 23px!important; }
  body.wn-com-experience[class] .wn-r26 .r26-hero { grid-template-columns: 1fr; gap: 32px; padding-block: 26px 36px; }
  body.wn-com-experience[class] .wn-r26 .r26-hero h1 { font-size: clamp(26px, 6.6vw, 35px)!important; }
  body.wn-com-experience[class] .wn-r26 .r26-brief { padding: 22px; }
  body.wn-com-experience[class] .wn-r26 .r26-service-rows article { padding: 24px; }
  body.wn-com-experience[class] :is(.wn-pf, .wn-cr) { gap: 40px; }
  body.wn-com-experience[class] .wn-pf .wn-pf-intro { padding: 24px 20px; }
  body.wn-com-experience[class] .wn-cr .wn-cr-stat { padding: 22px 16px; }
  body.wn-com-experience[class] .wn-editorial__section { padding: 22px; }
  body.wn-com-experience[class] .page-default__header { padding-block: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  body.wn-com-experience #site-main :is(.wn-com-shimmer, .wn-com-step-line, .wn-com-image-ghost) { display: none; }
  body.wn-com-experience[class] .wn-r26 :is(a, button, img) { transition: none; }
}
@media print {
  body.wn-com-experience[class] :is(.r26-project-story, .wn-pf-sec > .wn-pf-h3) { position: static; }
}