/* Mobile-first refinements within the existing SDS composition. */
[data-preview-frame]{position:relative}
[data-preview-frame] video[data-work-preview]{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  object-fit:contain;object-position:center;opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
[data-preview-frame] video[data-work-preview].is-playing{opacity:1}
.service-proof__visual,.commercials-head__visual,.work-feature__stage{min-width:0}
.preview-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.preview-toggle{display:block;justify-self:start;width:max-content;max-width:100%;border:1px solid #8f8f8a;padding:4px 10px;min-height:32px;background:#f5f5f2;color:#050505;text-shadow:none;font:400 13px/1.5 var(--sans);cursor:pointer}
.preview-toggle:hover{background:#fff;color:#050505}
.purpose-story>.preview-toggle{margin-top:18px}
.service-proof__frame video[data-work-preview]{position:absolute;inset:0}
.service-proofs .service-proof,
.service-proofs .service-proof:nth-child(n+2){grid-template-columns:minmax(0,1fr);gap:12px}
.service-proofs .service-proof__visual,
.service-proofs .service-proof__copy{grid-column:auto;grid-row:auto}
.service-proofs .service-proof__copy{gap:10px}
.service-proofs .service-proof__caption{padding-top:10px}
.service-proofs .service-proof:nth-child(n+2) .service-proof__title{font-size:24px;line-height:1.18}
.service-proofs .service-proof:nth-child(n+2) .service-proof__copy h3{font-size:26px;line-height:1.18}
.service-proofs .service-proof:nth-child(n+2) .frame-cue{min-height:64px;padding:0 16px 16px;font-size:15px}
.page-about .purpose-story__steps button{font-size:22px;color:var(--text-2);gap:10px}
.page-about .purpose-story__steps button[aria-selected="true"],
.page-about .purpose-story__steps button:hover{color:var(--text)}
.page-about .purpose-story__number{font-size:13px;color:var(--text-2)}
.page-about .purpose-story__image{overflow:visible}
.purpose-story__film{position:relative;display:block;width:100%;height:100%;overflow:hidden;background:#050505;border-radius:var(--radius)}
/* Keep the whole prepared film frame while the child approaches and recedes.
   The stable figure does not paint a second rectangle behind that movement. */
.page-about .about-principles .purpose-story__image{
  aspect-ratio:var(--ar,16/9);background:transparent;border-radius:0;
}
.page-about{
  --bg:#050505;--stage:#0b0b0b;--text:#f5f5f2;--text-2:#d6d6d1;
  --text-3:#b4b4b0;--text-4:#8f8f8a;--line:#232323;--line-2:#3a3a3a;--line-3:#6b6b67;
  background:var(--bg);color:var(--text);color-scheme:dark;
}
/* The Reel is immediately in view, including short landscape windows. */
.page-work .work-feature{padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 16px)}
.page-work .work-feature__stage{
  width:min(100%,calc(max(120px,100svh - var(--header-h) - env(safe-area-inset-top,0px) - 32px) * 1.777777778));
  justify-self:center;
}
/* Silver is also the preference/no-script fallback for the planning chapter. */
.page-commercials .commercial-offer.contrast-chapter{
  --bg:#dedfdf;--stage:#e7e8e8;--text:#000000;--text-2:#373736;
  --text-3:#54544f;--text-4:#5e5e59;--line:#bfc0c0;--line-2:#a9aaaa;--line-3:#686863;
}
.scroll-mood-ready.page-commercials main .commercial-offer[data-mood-chapter]{
  --bg:inherit;--stage:inherit;--text:inherit;--text-2:inherit;--text-3:inherit;--text-4:inherit;
  --line:inherit;--line-2:inherit;--line-3:inherit;
}
@media(min-width:768px){
  .page-about .purpose-story__steps button{font-size:25px}
  .page-about .purpose-story__number{font-size:14px}
  .service-proofs .service-proof:nth-child(n+2) .service-proof__title{font-size:clamp(24px,2.2vw,30px)}
  .service-proofs .service-proof:nth-child(n+2) .service-proof__copy h3{font-size:clamp(26px,2.3vw,34px)}
}
@media(prefers-reduced-motion:reduce){
  [data-preview-frame] video[data-work-preview]{transition:none}
}
.menu-foot .menu-motion{
  justify-self:start;min-height:44px;padding:10px 0;margin:2px 0;
  border:0;border-radius:0;color:#b4b4b0;background:transparent;
  font-size:13px;line-height:1.4;text-decoration:underline;text-underline-offset:4px;
}
.menu-foot .menu-motion:hover,.menu-foot .menu-motion:focus-visible{color:#fff}
.menu-foot .menu-motion:focus-visible{outline:1px solid #fff;outline-offset:5px}
@media(min-width:1024px){
  :is(.page-home,.page-work,.page-commercials,.page-about) .site-header .menu-btn{
    display:inline-flex;width:44px;min-height:44px;padding:0;flex:none;
  }
  :is(.page-home,.page-work,.page-commercials,.page-about) .site-header .menu-btn>span:last-child{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
}