/* This section uses the approved projects window and models phone frame.
   It illustrates presentation, without adding controls or altering either block. */
.ap-sites-page .cs-content { scroll-margin-top: var(--cs-header-height,72px); }
.ap-sites-page .cs-content .cs-content-heading { margin-bottom: var(--space-6); }
.ap-sites-page .cs-content .cs-content-heading h2 { font-size: var(--type-display); line-height: var(--leading-display); }
.ap-sites-page .cs-content .cs-content-composition { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); align-items: center; gap: var(--space-6); padding: var(--space-5); border: 1px solid #dedede; border-radius: var(--radius); background: #fff; }
.ap-sites-page .cs-content .cs-content-list { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-4); min-width: 0; margin: 0; }
.ap-sites-page .cs-content .cs-content-list > div { padding: 0; border: 0; }
.ap-sites-page .cs-content .cs-content-list > div + div { padding-top: var(--space-4); border-top: 1px solid #dedede; }
.ap-sites-page .cs-content .cs-content-list p { margin-top: var(--space-2); }
.ap-sites-page .cs-content .cs-content-preview { min-width: 0; margin: 0; pointer-events: none; user-select: none; }
.ap-sites-page .cs-content .cs-content-scene { position: relative; min-width: 0; padding: var(--space-4) var(--space-5) var(--space-6) var(--space-4); border-radius: var(--radius-small); background: #080808; isolation: isolate; }
.ap-sites-page .cs-content .cs-content-window { position: relative; width: calc(100% - 30px); overflow: hidden; border: 1px solid #ccc; border-radius: 10px; color: #111; background: #fff; box-shadow: 0 16px 36px #0004; }
.ap-sites-page .cs-content .cs-content-browser { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; padding: 5px 10px; border-bottom: 1px solid #e5e5e5; color: #777; background: #fff; font-size: 9px; line-height: 1.2; }
.ap-sites-page .cs-content .cs-content-browser > span:first-child { color: #aaa; letter-spacing: 2px; }
.ap-sites-page .cs-content .cs-content-site { padding: 18px; background: var(--surface); }
.ap-sites-page .cs-content .cs-content-site-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.ap-sites-page .cs-content .cs-content-site-nav b { font-size: 16px; font-weight: 600; letter-spacing: -.04em; }
.ap-sites-page .cs-content .cs-content-site-nav > span { font-size: 8px; white-space: nowrap; }
.ap-sites-page .cs-content .cs-content-site-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.ap-sites-page .cs-content .cs-content-site-hero > div { display: flex; flex-direction: column; align-items: start; justify-content: center; }
.ap-sites-page .cs-content .cs-content-site-hero strong { font-size: clamp(24px,2.2vw,32px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.ap-sites-page .cs-content .cs-content-site-hero > img { display: block; width: 100%; height: 182px; object-fit: cover; object-position: 46% center; filter: grayscale(1); }
.ap-sites-page .cs-content .cs-content-example-contact { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; margin-top: 16px; padding: 6px 10px; border-radius: 999px; color: #fff; background: #111; font-size: 9px; font-weight: 600; line-height: 1.3; }
.ap-sites-page .cs-content .cs-content-example-contact > span { font-size: 13px; }
.ap-sites-page .cs-content .cs-content-phone { position: absolute; right: 18px; bottom: 14px; z-index: 1; width: clamp(110px,10vw,135px); aspect-ratio: 898 / 1751; filter: drop-shadow(0 10px 12px #0004); }
.ap-sites-page .cs-content .cs-content-phone-screen { position: absolute; left: 8.8%; top: 6.6%; width: 82.5%; height: 88.9%; overflow: hidden; border-radius: 8% / 4%; background: var(--surface); }
.ap-sites-page .cs-content .cs-content-phone-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg,#fff2,#fff0 64%); box-shadow: inset 0 0 0 1px #0003; }
.ap-sites-page .cs-content .cs-content-phone-page { display: flex; flex-direction: column; align-items: stretch; height: 100%; padding: 12px 9px 8px; color: #111; }
.ap-sites-page .cs-content .cs-content-phone-page > b { font-size: 10px; line-height: 1.2; letter-spacing: -.03em; }
.ap-sites-page .cs-content .cs-content-phone-page > strong { margin-top: 12px; font-size: clamp(14px,1.35vw,18px); font-weight: 600; line-height: 1.04; letter-spacing: -.04em; }
.ap-sites-page .cs-content .cs-content-phone-page > img { display: block; flex: 1; min-height: 0; width: 100%; margin-top: 10px; object-fit: cover; object-position: 46% center; filter: grayscale(1); }
.ap-sites-page .cs-content .cs-content-phone-page .cs-content-example-contact { flex: 0 0 auto; min-height: 22px; margin-top: 8px; padding: 5px 7px; font-size: 7px; gap: 4px; }
.ap-sites-page .cs-content .cs-content-phone-page .cs-content-example-contact > span { font-size: 11px; }
.ap-sites-page .cs-content .cs-content-phone-frame { position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%; }
.ap-sites-page .cs-content .cs-content-preview figcaption { margin-top: var(--space-2); color: var(--muted); font-size: var(--type-body-small); line-height: var(--leading-body); }
@media (min-width:901px) and (max-width:1100px) {
  .ap-sites-page .cs-content .cs-content-composition { gap: var(--space-5); padding: var(--space-4); }
  .ap-sites-page .cs-content .cs-content-scene { padding: 18px 18px 40px; }
  .ap-sites-page .cs-content .cs-content-site { padding: 12px; }
  .ap-sites-page .cs-content .cs-content-site-nav { margin-bottom: 14px; }
  .ap-sites-page .cs-content .cs-content-site-nav > span { display: none; }
  .ap-sites-page .cs-content .cs-content-site-hero { gap: 10px; }
  .ap-sites-page .cs-content .cs-content-site-hero strong { font-size: 24px; }
}
@media (max-width:900px) {
  .ap-sites-page .cs-content .cs-content-composition { grid-template-columns: minmax(0,1fr); gap: var(--space-5); }
  .ap-sites-page .cs-content .cs-content-preview { width: 100%; max-width: 660px; justify-self: center; }
  .ap-sites-page .cs-content .cs-content-list { grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-4); }
  .ap-sites-page .cs-content .cs-content-list > div + div { padding-top: 0; border-top: 0; }
}
@media (max-width:600px) {
  .ap-sites-page .cs-content .cs-content-heading { margin-bottom: var(--space-5); }
  .ap-sites-page .cs-content .cs-content-composition { padding: var(--space-4); }
  .ap-sites-page .cs-content .cs-content-list { grid-template-columns: minmax(0,1fr); }
  .ap-sites-page .cs-content .cs-content-list > div + div { padding-top: var(--space-4); border-top: 1px solid #dedede; }
  .ap-sites-page .cs-content .cs-content-scene { padding: 14px 14px 48px; }
  .ap-sites-page .cs-content .cs-content-window { width: calc(100% - 18px); }
  .ap-sites-page .cs-content .cs-content-site { padding: 12px; }
  .ap-sites-page .cs-content .cs-content-site-nav { margin-bottom: 14px; }
  .ap-sites-page .cs-content .cs-content-site-nav b { font-size: 13px; }
  .ap-sites-page .cs-content .cs-content-site-nav > span { display: none; }
  .ap-sites-page .cs-content .cs-content-site-hero { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 8px; }
  .ap-sites-page .cs-content .cs-content-site-hero strong { font-size: 21px; }
  .ap-sites-page .cs-content .cs-content-site-hero > img { height: 155px; }
  .ap-sites-page .cs-content .cs-content-example-contact { gap: 6px; padding-inline: 8px; font-size: 8px; }
  .ap-sites-page .cs-content .cs-content-phone { right: 8px; bottom: 12px; width: 104px; }
  .ap-sites-page .cs-content .cs-content-phone-page > strong { font-size: 15px; }
}
@media (max-width:350px) {
  .ap-sites-page .cs-content .cs-content-composition { padding: var(--space-3); }
  .ap-sites-page .cs-content .cs-content-scene { padding: 12px 12px 52px; }
  .ap-sites-page .cs-content .cs-content-site { padding: 10px; }
  .ap-sites-page .cs-content .cs-content-site-hero strong { font-size: 18px; }
  .ap-sites-page .cs-content .cs-content-phone { width: 96px; }
  .ap-sites-page .cs-content .cs-content-phone-page { padding: 10px 7px 8px; }
  .ap-sites-page .cs-content .cs-content-phone-page > strong { margin-top: 10px; font-size: 13px; }
}