/* Yous & Co. — a shared editorial system for services and expertise.
   Loaded last. Portrait scenes, embedded demos and the dark Library stage
   retain their own art direction. Logical properties support all three locales. */
body.page-mode {
  --s87-paper: #fcfaf6;
  --s87-panel: #fffdf9;
  --s87-ink: #272521;
  --s87-copy: #5d584f;
  --s87-olive: #505b3e;
  --s87-line: #d9d3c5;
  --s87-wash: #eeeee2;
  --s87-lime: #c9ff24;
  --s87-radius: 14px;
}

/* One heading scale for the page introductions and section navigation. */
body.page-mode #main :is(.s87-head,.s87-detail-copy,.multipage-page-head,.profile-intro,.l83-intro,.conversion-contact .page-head) h1 {
  font-family: var(--font-display)!important;
  font-size: clamp(38px,4.8vw,66px)!important;
  font-weight: 650!important;
  line-height: 1.12!important;
  letter-spacing: -.045em!important;
  text-wrap: balance;
}
body.page-mode #main :is(.s87-head,.s87-detail-copy,.s87-group-head,.s87-home-strip) :is(.s87-kicker,.profile-kicker),
body.page-mode #main .s87-body :is(.s87-kicker,.profile-kicker) {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--s87-olive);
  margin: 0 0 16px;
}
body.page-mode #main :is(.multipage-section-head,.profile-section-heading,.s87-group-head,.l83-behind>header,.l83-directory>header) h2 {
  font-size: clamp(30px,3.25vw,46px)!important;
  line-height: 1.16!important;
  letter-spacing: -.035em!important;
  text-wrap: balance;
}
body.page-mode #main :is(.services87,.s87-detail,.s87-home-strip) {
  color: var(--s87-ink);
  font-family: var(--font-body);
}
body.page-mode #main .services87 {
  background: var(--s87-paper);
  padding-block-end: clamp(40px,6vw,80px);
}
:is(.services87,.s87-detail,.s87-home-strip) *,
.profile-skills .visual-skill * { box-sizing: border-box; }
:is(.services87,.s87-detail,.s87-home-strip) :is(p,li,a,article,section,div) { min-width: 0; }
:is(.services87,.s87-detail,.s87-home-strip) :is(a,button):focus-visible {
  outline: 2px solid var(--s87-olive);
  outline-offset: 5px;
}
:is(.services87,.s87-detail) :is(section[id],article[id]) { scroll-margin-top: 120px; }

/* A clear, calm opening: category, proposition, action. */
.s87-head { padding-block: clamp(32px,5vw,68px) 42px; max-width: 1000px; }
body.page-mode #main .s87-head h1 { max-width: 21ch; margin: 0 0 23px; }
body.page-mode #main :is(.s87-head,.s87-detail-copy) :is(.s87-lead,.lead) {
  max-width: 57ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--s87-copy);
  margin: 0;
}
.s87-head>p:not(.s87-kicker):not(.profile-kicker),
.s87-detail-copy>p:not(.s87-kicker):not(.profile-kicker):not(.s87-price-note) {
  max-width: 57ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--s87-copy);
}
.s87-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-block-start: 26px; }
.s87-actions :is(a,button) { max-width: 100%; }
body.page-mode #main .s87-cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 48px; padding: 11px 20px; max-width: 100%;
  border: 1px solid #2725212a; border-radius: 999px;
  background: var(--s87-lime); color: var(--s87-ink);
  font: 650 14px/1.5 var(--font-label); text-decoration: none;
  text-align: start; white-space: normal;
  transition: background .18s ease,border-color .18s ease;
}
body.page-mode #main .s87-cta.secondary { background: transparent; border-color: var(--s87-line); }
.s87-arrow { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; }
.s87-arrow svg { display: block; width: 18px; height: 18px; flex: none; }
body.page-mode #main .s87-price-note {
  font: 450 13px/1.65 var(--font-body); color: var(--s87-copy);
  margin-block: 18px 0; max-width: 64ch;
}

/* Nine services, one contact-sheet treatment. */
.s87-groups { padding-block: 28px 50px; border-top: 1px solid var(--s87-line); }
body.page-mode #main .s87-groups>h2 { font-size: clamp(26px,3vw,40px)!important; line-height: 1.2!important; margin: 0 0 28px; }
.s87-groups>section { min-width: 0; }
.s87-group-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-block: 22px; border-top: 1px solid var(--s87-line); }
.s87-group-head h2 { margin: 0; max-width: 24ch; }
.s87-group-head p { color: var(--s87-copy); font-size: 14px; line-height: 1.7; max-width: 46ch; margin: 0; }
.s87-directory { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.s87-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border: 1px solid var(--s87-line); border-radius: var(--s87-radius);
  background: var(--s87-panel); box-shadow: 0 3px 15px #3c352004;
}
.s87-art {
  position: relative; display: grid; place-items: center; flex: none;
  aspect-ratio: 1.8; overflow: hidden; border-bottom: 1px solid var(--s87-line);
  background: var(--s87-wash); color: #50593e;
}
.s87-art>svg { display: block; width: 100%; height: 100%; max-width: 100%; }
.s87-art[data-service-art="1"],.s87-art[data-service-art="4"],.s87-art[data-service-art="7"] { background: #f0eadd; }
.s87-art[data-service-art="2"],.s87-art[data-service-art="5"],.s87-art[data-service-art="8"] { background: #e9eddf; }
.s87-body { flex: 1; display: flex; flex-direction: column; align-items: start; padding: 25px 24px 22px; }
body.page-mode #main .s87-body :is(.s87-kicker,.profile-kicker) { margin-bottom: 11px; font-size: 10px; }
body.page-mode #main .s87-body h3 {
  font-family: var(--font-display)!important; font-size: clamp(23px,2vw,28px)!important;
  font-weight: 650!important; line-height: 1.23!important; letter-spacing: -.03em!important;
  color: var(--s87-ink)!important; margin: 0 0 13px; text-wrap: balance;
}
.s87-body>p { font: 400 14px/1.75 var(--font-body); color: var(--s87-copy); margin: 0 0 23px; }
.s87-body>a:not(.profile-button):not(.s87-cta) {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  align-self: stretch; min-height: 46px; margin-top: auto; padding-block: 14px 0;
  border-top: 1px solid var(--s87-line); color: var(--s87-ink);
  font: 650 13px/1.5 var(--font-label); text-decoration: none;
}
.s87-body>a:not(.profile-button):not(.s87-cta)>svg { width: 19px; height: 19px; flex: 0 0 19px; }
.s87-body>.s87-cta,.s87-body>.profile-button { margin-top: auto; }
.s87-body h3>a { color: inherit; text-decoration: none; }
body.page-mode #main .s87-body>.s87-price-note { font-size: 12px; margin: 0 0 22px; }
.s87-art>span { position: absolute; inset-inline: 16px; inset-block-end: 13px; color: var(--s87-copy); font: 500 11px/1.5 var(--font-label); letter-spacing: .06em; }
.s87-head>.profile-button,.s87-detail-copy>.profile-button { margin-top: 26px; }
.s87-detail.s87-head { max-width: none; padding-bottom: 48px; }

/* Dedicated service pages: brief, concrete outputs, relevant proof, next step. */
.s87-detail-hero,.s87-detail.s87-head {
  display: grid; grid-template-columns: minmax(0,1.13fr) minmax(0,.87fr);
  gap: clamp(28px,5.5vw,78px); align-items: center; padding-block: 45px 62px;
}
.s87-detail-copy { min-width: 0; }
body.page-mode #main .s87-detail-copy h1 { margin: 0 0 23px; max-width: 18ch; }
.s87-detail-art {
  display: grid; place-items: center; min-width: 0; aspect-ratio: 1.2;
  background: var(--s87-wash); border: 1px solid var(--s87-line);
  border-radius: var(--s87-radius); overflow: hidden; color: var(--s87-olive);
}
.s87-detail-art>svg { display: block; width: 100%; max-width: 100%; height: auto; }
.s87-detail-art>.s87-art { width: 100%; border: 0; background: transparent; }
.s87-detail-art>img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s87-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 30px; padding-block: 34px 50px; border-top: 1px solid var(--s87-line); }
.s87-facts article { min-width: 0; }
body.page-mode #main .s87-facts h2 { font-size: clamp(21px,2vw,26px)!important; line-height: 1.3!important; letter-spacing: -.025em!important; margin: 0 0 17px; }
.s87-facts p,.s87-facts li { color: var(--s87-copy); font: 400 14px/1.8 var(--font-body); }
.s87-facts p { margin: 0; }
.s87-facts ul,.s87-facts ol { margin: 0; padding-inline-start: 19px; }
.s87-facts li+li { margin-top: 7px; }
.s87-facts li::marker { color: #7b845c; }
.s87-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; align-items: center; padding-block: 36px; margin-top: 30px; border-block: 1px solid var(--s87-line); }
.s87-proof>div p:not(.profile-kicker) { font-size: 15px; line-height: 1.75; color: var(--s87-copy); max-width: 48ch; }
.s87-proof img { display: block; width: 100%; height: auto; border-radius: 10px; }
.s87-proof>a { padding: 20px; background: var(--s87-wash); border: 1px solid var(--s87-line); border-radius: var(--s87-radius); }
.s87-proof .s87-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; color: var(--s87-ink); font: 600 13px/1.5 var(--font-label); text-decoration: underline; text-underline-offset: 5px; }
body.page-mode #main .s87-proof h2 { font-size: clamp(27px,3vw,40px)!important; margin: 0 0 20px; }
.s87-proof>p { font: 400 15px/1.75 var(--font-body); max-width: 65ch; color: var(--s87-copy); }
.s87-proof>a { display: inline-flex; align-items: center; min-height: 44px; color: var(--s87-ink); font-weight: 600; text-underline-offset: 6px; }
.s87-next {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px 35px;
  padding: clamp(26px,4vw,44px); margin-top: 40px;
  border: 1px solid #d6dcc4; border-radius: var(--s87-radius); background: #eef1e3;
}
body.page-mode #main .s87-next h2 { font-size: clamp(28px,3vw,40px)!important; margin: 0; max-width: 22ch; }
.s87-next p { font: 400 15px/1.7 var(--font-body); max-width: 52ch; color: var(--s87-copy); margin: 16px 0 0; }
.s87-next>a { grid-column: 2; grid-row: 1 / span 2; max-width: 320px; justify-self: end; }
.s87-next>p { grid-column: 1; margin: 0; }

/* The opening service selector stays concise, before the cinematic portrait. */
.s87-home-strip {
  padding-block: 27px; border-bottom: 1px solid var(--s87-line);
  background: var(--s87-paper);
}
.s87-home-strip.profile-container,.s87-home-strip>.profile-container { display: grid; grid-template-columns: minmax(170px,.7fr) minmax(0,2fr); align-items: center; gap: 20px 35px; }
body.page-mode #main .s87-home-strip>div>p:not(.profile-kicker) { font-size: 13px; line-height: 1.65; color: var(--s87-copy); margin: 12px 0 0; max-width: 36ch; }
body.page-mode #main .s87-home-strip h2 { font-size: clamp(21px,2vw,27px)!important; line-height: 1.25!important; letter-spacing: -.025em!important; margin: 0; max-width: 24ch; }
body.page-mode #main .s87-home-strip :is(.s87-kicker,.profile-kicker) { font-size: 10px; margin-bottom: 8px; }
.s87-home-links,.s87-home-strip nav,.s87-home-strip ul { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0; }
.s87-home-links>a,.s87-home-strip nav>a,.s87-home-strip li>a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 100%;
  padding: 10px 14px; border: 1px solid #c8cbb7; border-radius: 7px;
  font: 600 12px/1.5 var(--font-label); color: var(--s87-ink); background: #f4f4ea;
  text-decoration: none; transition: background .18s ease,border-color .18s ease;
}
.s87-home-links :is(svg,.s87-arrow),.s87-home-strip nav>a>svg,.s87-home-strip li>a>svg { flex: none; width: 16px; height: 16px; }
.s87-home-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }

/* Profile expertise is the same visual family as the commercial directory. */
body.page-mode .profile-skills { gap: 24px; align-items: stretch; }
body.page-mode .profile-skills article.visual-skill {
  display: flex; flex-direction: column; align-self: stretch;
  border: 1px solid var(--s87-line); border-radius: var(--s87-radius);
  background: var(--s87-panel); box-shadow: 0 3px 15px #3c352004;
}
body.page-mode .profile-skills .skill-visual {
  height: auto; flex: none; aspect-ratio: 1.8; border-bottom: 1px solid var(--s87-line);
  background: var(--s87-wash); color: var(--s87-olive);
}
body.page-mode .profile-skills .skill-1 .skill-visual,
body.page-mode .profile-skills .skill-4 .skill-visual { background: #f0eadd; }
body.page-mode .profile-skills .skill-2 .skill-visual,
body.page-mode .profile-skills .skill-5 .skill-visual { background: #e9eddf; }
body.page-mode .profile-skills .skill-visual>svg { display: block; width: 100%; height: 100%; }
body.page-mode .profile-skills .skill-visual>img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
body.page-mode .profile-skills .skill-index { inset-inline-start: 16px; inset-inline-end: auto; color: var(--s87-copy); font: 500 10px/1.5 var(--font-body); }
body.page-mode .profile-skills .skill-copy { display: flex; flex-direction: column; flex: 1; padding: 24px; }
body.page-mode #main .profile-skills h3 { font-size: clamp(21px,1.8vw,25px)!important; line-height: 1.28!important; margin: 0 0 15px; }
body.page-mode .profile-skills .skill-tags { min-height: 0; gap: 7px; }
body.page-mode .profile-skills .skill-tags span { font-size: 11px; line-height: 1.5; padding: 5px 9px; border-radius: 5px; background: #f3f2e9; border-color: #d8d8c5; color: #50513e; }
body.page-mode .profile-skills details { margin-top: 20px; padding-block: 14px 0; border-color: var(--s87-line); }
body.page-mode .profile-skills details summary { min-height: 36px; font-size: 13px; line-height: 1.6; }
body.page-mode .profile-skills details p { font-size: 14px; color: var(--s87-copy); line-height: 1.75; }
body.page-mode .profile-skills .skill-evidence { min-height: 44px; display: flex; align-items: center; padding-block: 12px 0; margin-top: auto; font-size: 12px; line-height: 1.6; color: var(--s87-olive); border-color: var(--s87-line); }

@media(hover:hover) {
  body.page-mode #main .s87-cta:hover { background: #d8ff65; border-color: #93a35b; }
  body.page-mode #main .s87-cta.secondary:hover,.s87-home-links>a:hover,.s87-home-strip nav>a:hover,.s87-home-strip li>a:hover { background: #e9efd8; border-color: #929d75; }
  .s87-card:focus-within { border-color: #879465; }
  .s87-body>a:not(.profile-button):not(.s87-cta):hover { color: #50612f; text-decoration: underline; text-underline-offset: 5px; }
}
@media(max-width:1100px) {
  .s87-directory,.s87-home-grid { gap: 18px; }
  .s87-body { padding: 22px 20px 20px; }
  .s87-detail-hero,.s87-detail.s87-head { gap: 35px; }
  .s87-home-strip.profile-container,.s87-home-strip>.profile-container { grid-template-columns: minmax(150px,.7fr) minmax(0,2fr); gap: 25px; }
}
@media(max-width:900px) {
  .s87-directory,.s87-home-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .s87-detail-hero,.s87-detail.s87-head { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 25px; }
  .s87-facts { gap: 24px; }
  .s87-next { grid-template-columns: 1fr; align-items: start; }
  .s87-next>a { grid-column: 1; grid-row: auto; justify-self: start; }
  .s87-home-strip.profile-container,.s87-home-strip>.profile-container { grid-template-columns: 1fr; gap: 17px; }
}
@media(max-width:760px) {
  body.page-mode #main :is(.s87-head,.s87-detail-copy,.multipage-page-head,.profile-intro,.l83-intro,.conversion-contact .page-head) h1 { font-size: clamp(34px,7.5vw,48px)!important; }
  body.page-mode #main :is(.multipage-section-head,.profile-section-heading,.s87-group-head,.l83-behind>header,.l83-directory>header) h2 { font-size: clamp(28px,6.5vw,36px)!important; }
  .s87-head { padding-block: 30px 32px; }
  .s87-head>p:not(.s87-kicker):not(.profile-kicker),.s87-detail-copy>p:not(.s87-kicker):not(.profile-kicker):not(.s87-price-note),
  body.page-mode #main :is(.s87-head,.s87-detail-copy) :is(.s87-lead,.lead) { font-size: 16px; }
  .s87-group-head { display: block; }
  .s87-group-head p { margin-top: 16px; }
  .s87-detail-hero,.s87-detail.s87-head { grid-template-columns: 1fr; padding-block: 28px 35px; gap: 30px; }
  .s87-detail-art { aspect-ratio: 1.8; max-width: 580px; width: 100%; }
  .s87-facts { grid-template-columns: 1fr; gap: 25px; padding-block: 28px 34px; }
  .s87-facts article+article { border-top: 1px solid var(--s87-line); padding-top: 25px; }
  .s87-facts p,.s87-facts li { font-size: 15px; }
  .s87-proof { grid-template-columns: 1fr; padding-block: 30px; gap: 23px; }
  .s87-next { margin-top: 30px; padding: 25px; }
  .s87-home-strip { padding-block: 20px; }
  .s87-home-links,.s87-home-strip nav,.s87-home-strip ul { gap: 8px; }
  .s87-home-links>a,.s87-home-strip nav>a,.s87-home-strip li>a { padding: 10px 12px; }
  body.page-mode .profile-skills { gap: 18px; }
  body.page-mode .profile-skills .skill-copy { padding: 22px; }
}
@media(max-width:560px) {
  .s87-directory,.s87-home-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .s87-body { padding: 24px; }
  .s87-art { aspect-ratio: 1.9; }
  body.page-mode #main .s87-body h3 { font-size: 26px!important; }
  .s87-body>p { font-size: 15px; }
  .s87-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .s87-actions>a { align-self: flex-start; }
  .s87-next>a { flex-shrink: 1; }
  .s87-home-links,.s87-home-strip nav,.s87-home-strip ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .s87-home-links>a,.s87-home-strip nav>a,.s87-home-strip li>a { display: flex; justify-content: space-between; height: 100%; font-size: 11px; padding-inline: 11px; }
  body.page-mode .profile-skills { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:360px) {
  body.page-mode #main :is(.s87-head,.s87-detail-copy,.l83-intro) h1 { font-size: 33px!important; }
  .s87-body { padding: 21px; }
  .s87-home-links,.s87-home-strip nav,.s87-home-strip ul { grid-template-columns: minmax(0,1fr); }
}
html[lang=ar] body.page-mode #main :is(.s87-head,.s87-detail-copy,.multipage-page-head,.profile-intro,.l83-intro,.conversion-contact .page-head) h1,
html[lang=ar] body.page-mode #main :is(.s87-group-head,.s87-facts,.s87-proof,.s87-next,.s87-home-strip,.s87-body,.profile-skills) :is(h2,h3) {
  letter-spacing: 0!important; line-height: 1.5!important;
}
html[lang=ar] body.page-mode #main :is(.services87,.s87-detail,.s87-home-strip) :is(.s87-kicker,.profile-kicker) { letter-spacing: 0; }
[dir=rtl] :is(.s87-arrow,.s87-body>a>svg,.s87-home-links>a>svg,.s87-home-strip li>a>svg) { transform: scaleX(-1); }
@media(prefers-reduced-motion:reduce) {
  :is(.services87,.s87-detail,.s87-home-strip,.profile-skills) *,
  :is(.services87,.s87-detail,.s87-home-strip,.profile-skills) *::before,
  :is(.services87,.s87-detail,.s87-home-strip,.profile-skills) *::after { animation: none!important; transition: none!important; }
}
@media(forced-colors:active) {
  .s87-art,.s87-detail-art,.s87-home-links>a,.s87-home-strip li>a,.s87-card,.s87-next,
  body.page-mode .profile-skills article.visual-skill { border-color: CanvasText; }
}

body.page-mode :is(.s87-link,.s87-home-strip nav>a)>span[aria-hidden=true] { position: relative; display: inline-block; flex: 0 0 18px; width: 18px; height: 18px; font-size: 0; }
body.page-mode :is(.s87-link,.s87-home-strip nav>a)>span[aria-hidden=true]::after { content: ''; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--action-arrow85) center / 16px no-repeat; mask: var(--action-arrow85) center / 16px no-repeat; }
[dir=rtl] :is(.s87-link,.s87-home-strip nav>a)>span[aria-hidden=true] { transform: scaleX(-1); }

.s87-price{display:grid;gap:7px;padding:16px 0 20px;max-width:100%}.s87-price strong{font:650 16px/1.5 var(--font-body);color:#414a30}.s87-price span{font:400 12px/1.6 var(--font-body);color:#655e52}.s87-body .s87-price{margin-top:auto}.s87-detail-copy .s87-price{margin-top:20px}html[dir=rtl] .s87-price strong{letter-spacing:0}