/* Format composition follows the approved SiteGround projects block.
   Every selector is confined to this section. Small type belongs to the
   non-interactive site illustrations; product copy uses foundation tokens. */
.ap-sites-page .cs-formats .cs-section-heading h2 { font-size: var(--type-display); line-height: var(--leading-display); }
.ap-sites-page .cs-formats .cs-format-grid { grid-template-columns: minmax(0,5fr) minmax(0,7fr); grid-template-areas: "one site" "landing site"; gap: var(--grid-gap); }
.ap-sites-page .cs-formats .cs-format-panel { position: relative; display: grid; min-width: 0; border-radius: var(--radius); isolation: isolate; }
.ap-sites-page .cs-formats .cs-format-one,
.ap-sites-page .cs-formats .cs-format-landing { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: center; gap: var(--space-3); min-height: 272px; padding: var(--space-4); }
.ap-sites-page .cs-formats .cs-format-one { grid-area: one; background: #f3f3f3; }
.ap-sites-page .cs-formats .cs-format-landing { grid-area: landing; background: var(--background); }
.ap-sites-page .cs-formats .cs-format-site { grid-area: site; grid-template-rows: auto 1fr; min-height: 568px; padding: var(--space-5); color: #fff; background: #080808; }
.ap-sites-page .cs-formats .cs-format-copy { min-width: 0; position: relative; z-index: 1; }
.ap-sites-page .cs-formats .cs-format-copy h3 { margin: 0; }
.ap-sites-page .cs-formats .cs-format-site h3 { font-size: var(--type-heading); }
.ap-sites-page .cs-formats .cs-format-copy > p { margin: var(--space-3) 0 var(--space-4); }
.ap-sites-page .cs-formats .cs-format-site .cs-format-copy > p { color: #bcbcbc; font-size: var(--type-lead); line-height: var(--leading-lead); }
.ap-sites-page .cs-formats .cs-format-link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--cta-height); padding: var(--space-2) 18px; border-radius: 999px; color: #fff; background: #111; font-size: var(--type-body-small); font-weight: var(--weight-semibold); line-height: 1.4; text-decoration: none; }
.ap-sites-page .cs-formats .cs-format-link > span { font-size: 20px; line-height: 1; }
.ap-sites-page .cs-formats .cs-format-site .cs-format-link { color: #111; background: #fff; }
.ap-sites-page .cs-formats .cs-format-link:hover { box-shadow: inset 0 0 0 2px #999; }
.ap-sites-page .cs-formats .cs-format-link:focus-visible { outline: 3px solid #666; outline-offset: 5px; }
.ap-sites-page .cs-formats .cs-format-site .cs-format-link:focus-visible { outline-color: #fff; }

/* The window geometry comes from the approved projects illustrations. */
.ap-sites-page .cs-formats .cs-format-scene { min-width: 0; pointer-events: none; user-select: none; }
.ap-sites-page .cs-formats .cs-format-window { border: 1px solid #d1d1d1; border-radius: 10px; overflow: hidden; color: #111; background: #fff; box-shadow: 0 12px 28px #00000012; }
.ap-sites-page .cs-formats .cs-format-browser { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; padding: 5px 10px; border-bottom: 1px solid #e5e5e5; color: #777; background: #fff; font-size: 9px; line-height: 1.2; }
.ap-sites-page .cs-formats .cs-format-browser > span:first-child { color: #aaa; letter-spacing: 2px; }
.ap-sites-page .cs-formats .cs-format-one-scene { padding: 8px 6px; }
.ap-sites-page .cs-formats .cs-format-long-page { max-width: 188px; margin-inline: auto; transform: rotate(-4deg); }
.ap-sites-page .cs-formats .cs-format-long-content { padding: 14px; }
.ap-sites-page .cs-formats .cs-format-long-content > b { display: block; margin-bottom: 10px; font-size: 20px; line-height: 1.05; letter-spacing: -.045em; }
.ap-sites-page .cs-formats .cs-format-long-content > img { display: block; width: 100%; height: 60px; object-fit: cover; filter: grayscale(1); }
.ap-sites-page .cs-formats .cs-format-long-content > div { padding-top: 10px; margin-top: 10px; border-top: 1px solid #dedede; }
.ap-sites-page .cs-formats .cs-format-long-content > div > span { display: block; font-size: 10px; font-weight: 600; }
.ap-sites-page .cs-formats .cs-format-long-content i { display: block; width: 100%; height: 3px; margin-top: 5px; background: #e3e3e3; }
.ap-sites-page .cs-formats .cs-format-long-content i:last-child { width: 70%; }
.ap-sites-page .cs-formats .cs-format-site-scene { display: flex; flex-direction: column; justify-content: end; padding-top: var(--space-4); }
.ap-sites-page .cs-formats .cs-format-business-page { width: 100%; border-radius: 12px; box-shadow: 0 16px 40px #0004; }
.ap-sites-page .cs-formats .cs-format-business-page .cs-format-browser { min-height: 30px; }
.ap-sites-page .cs-formats .cs-format-site-content { padding: 20px; }
.ap-sites-page .cs-formats .cs-format-site-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ap-sites-page .cs-formats .cs-format-site-nav b { font-size: 15px; letter-spacing: -.04em; }
.ap-sites-page .cs-formats .cs-format-site-nav > span { display: flex; align-items: center; gap: 9px; font-size: 8px; white-space: pre; }
.ap-sites-page .cs-formats .cs-format-site-nav em { font-style: normal; border-bottom: 1px solid #111; }
.ap-sites-page .cs-formats .cs-format-site-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; min-height: 174px; }
.ap-sites-page .cs-formats .cs-format-site-hero > div { display: flex; flex-direction: column; align-items: start; justify-content: center; }
.ap-sites-page .cs-formats .cs-format-site-hero strong { font-size: clamp(25px,2.6vw,36px); line-height: 1.04; letter-spacing: -.05em; font-weight: 600; }
.ap-sites-page .cs-formats .cs-format-preview-button { display: inline-flex; align-items: center; justify-content: center; margin-top: 16px; padding: 9px 12px; border-radius: 999px; color: #fff; background: #111; font-size: 9px; font-weight: 600; line-height: 1.3; }
.ap-sites-page .cs-formats .cs-format-site-hero img { display: block; width: 100%; height: 174px; border-radius: 4px; object-fit: cover; object-position: 32% center; filter: grayscale(1); }
.ap-sites-page .cs-formats .cs-format-site-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #ddd; color: #777; font-size: 8px; }
.ap-sites-page .cs-formats .cs-format-focus-scene { padding-block: 12px; }
.ap-sites-page .cs-formats .cs-format-focus-page { width: 100%; max-width: 220px; margin-inline: auto; transform: rotate(4deg); }
.ap-sites-page .cs-formats .cs-format-focus-content { display: flex; flex-direction: column; align-items: center; padding: 18px 12px; text-align: center; background: var(--surface); }
.ap-sites-page .cs-formats .cs-format-focus-content > span:first-child { font-size: 9px; color: #666; }
.ap-sites-page .cs-formats .cs-format-focus-content > strong { margin-top: 10px; font-size: 23px; font-weight: 600; line-height: 1.08; letter-spacing: -.045em; }

@media (min-width:901px) and (max-width:1100px) {
  .ap-sites-page .cs-formats .cs-format-one,
  .ap-sites-page .cs-formats .cs-format-landing { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); padding: 20px; gap: 8px; }
  .ap-sites-page .cs-formats .cs-format-copy h3 { font-size: 24px; }
  .ap-sites-page .cs-formats .cs-format-site h3 { font-size: var(--type-heading); }
  .ap-sites-page .cs-formats .cs-format-one .cs-format-link,
  .ap-sites-page .cs-formats .cs-format-landing .cs-format-link { gap: 8px; padding-inline: 12px; font-size: 14px; white-space: nowrap; }
  .ap-sites-page .cs-formats .cs-format-long-content { padding: 10px; }
  .ap-sites-page .cs-formats .cs-format-focus-content > strong { font-size: 20px; }
  .ap-sites-page .cs-formats .cs-format-site-nav > span { gap: 6px; font-size: 7px; }
}
@media (max-width:900px) {
  .ap-sites-page .cs-formats .cs-format-grid { grid-template-columns: minmax(0,1fr); grid-template-areas: "one" "site" "landing"; }
  .ap-sites-page .cs-formats .cs-format-one,
  .ap-sites-page .cs-formats .cs-format-landing { min-height: 0; padding: var(--space-5); gap: var(--space-5); }
  .ap-sites-page .cs-formats .cs-format-site { min-height: 0; }
  .ap-sites-page .cs-formats .cs-format-site-scene { width: 100%; max-width: 600px; justify-self: center; }
}
@media (max-width:480px) {
  .ap-sites-page .cs-formats .cs-format-one,
  .ap-sites-page .cs-formats .cs-format-landing { grid-template-columns: minmax(0,1fr); padding: var(--space-4); gap: var(--space-4); }
  .ap-sites-page .cs-formats .cs-format-site { padding: var(--space-4); }
  .ap-sites-page .cs-formats .cs-format-scene { width: 100%; }
  .ap-sites-page .cs-formats .cs-format-long-page { max-width: 212px; }
  .ap-sites-page .cs-formats .cs-format-long-content { padding: 16px; }
  .ap-sites-page .cs-formats .cs-format-long-content > img { height: 74px; }
  .ap-sites-page .cs-formats .cs-format-site-content { padding: 14px; }
  .ap-sites-page .cs-formats .cs-format-site-nav { align-items: start; flex-direction: column; gap: 8px; }
  .ap-sites-page .cs-formats .cs-format-site-hero { min-height: 150px; gap: 10px; }
  .ap-sites-page .cs-formats .cs-format-site-hero img { height: 150px; }
  .ap-sites-page .cs-formats .cs-format-site-hero strong { font-size: 25px; }
  .ap-sites-page .cs-formats .cs-format-site-footer { font-size: 7px; }
}
@media (max-width:350px) {
  .ap-sites-page .cs-formats .cs-format-site-content { padding: 10px; }
  .ap-sites-page .cs-formats .cs-format-site-hero strong { font-size: 22px; }
}