/* Open Summit's support pages: paper, photography and moving square frames. */
.brand-experience { --brand-coral:#e8483f; --brand-teal:#00bdb2; --brand-violet:#7752ff; }
.site-page .brand-hero {
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(40px,6vw,96px); align-items:center;
  padding-top:180px; padding-bottom:80px;
}
.brand-hero-copy { min-width:0; }
.site-page .brand-hero h1 { font-size:clamp(48px,6.2vw,88px); line-height:1.025; letter-spacing:-.05em; }
.site-page .brand-hero .lede { max-width:34ch; font-size:clamp(18px,1.8vw,22px); }
.brand-hero-actions { display:flex; flex-wrap:wrap; gap:12px 16px; margin-top:30px; align-items:center; }
.site-page .brand-hero .brand-hero-actions .btn { margin-top:0; }
.brand-hero-actions > p { width:100%; font-size:18px; line-height:1.5; }
.brand-photo { margin:0; min-width:0; position:relative; }
.brand-photo-media { position:relative; background:#080808; }
.brand-photo-media::before { content:''; position:absolute; inset:12px -12px -12px 12px; border:1px solid #dedfe1; pointer-events:none; z-index:-1; }
.brand-photo-media > img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 45%; }
.brand-photo figcaption { display:flex; align-items:center; gap:10px; margin:20px 0 0; color:#575b62; font-size:12px; line-height:1.5; }
.brand-caption-pixel { display:block; flex:0 0 5px; height:5px; background:#00bdb2; box-shadow:5px -5px #e8483f; margin-right:5px; }
.brand-frame-edge { position:absolute; left:0; right:0; height:20px; background:#fff; pointer-events:none; }
.brand-frame-edge--top { top:-1px; clip-path:polygon(0 0,100% 0,100% 100%,96% 100%,96% 50%,92% 50%,92% 0,8% 0,8% 50%,4% 50%,4% 100%,0 100%); }
.brand-frame-edge--bottom { bottom:-1px; clip-path:polygon(0 0,4% 0,4% 50%,8% 50%,8% 100%,92% 100%,92% 50%,96% 50%,96% 0,100% 0,100% 100%,0 100%); }
.brand-frame-pixels { position:absolute; width:48px; height:52px; top:-16px; right:-14px; pointer-events:none; }
.brand-frame-pixels i { position:absolute; width:8px; height:8px; background:var(--brand-coral,#e8483f); }
.brand-frame-pixels i:nth-child(1) { left:8px; top:0; }
.brand-frame-pixels i:nth-child(2) { left:24px; top:8px; background:var(--brand-teal,#00bdb2); }
.brand-frame-pixels i:nth-child(3) { left:0; top:16px; background:var(--brand-violet,#7752ff); }
.brand-frame-pixels i:nth-child(4) { left:16px; top:24px; }
.brand-frame-pixels i:nth-child(5) { left:32px; top:32px; background:var(--brand-teal,#00bdb2); }
.brand-frame-pixels i:nth-child(6) { left:8px; top:40px; background:var(--brand-teal,#00bdb2); }
.brand-photo.is-revealed .brand-frame-edge--top { animation:brand-frame-top 850ms cubic-bezier(.22,1,.36,1) both; }
.brand-photo.is-revealed .brand-frame-edge--bottom { animation:brand-frame-bottom 950ms cubic-bezier(.22,1,.36,1) both; }
.brand-photo.is-revealed .brand-frame-pixels i { animation:brand-pixel-turn 900ms cubic-bezier(.22,1,.36,1) both; animation-delay:calc(var(--pixel-index) * 45ms); }
.brand-photo.is-static :is(.brand-frame-edge,.brand-frame-pixels i) { animation:none!important; }
@keyframes brand-frame-top { from { transform:translateY(22px); } to { transform:translateY(0); } }
@keyframes brand-frame-bottom { from { transform:translateY(-22px); } to { transform:translateY(0); } }
@keyframes brand-pixel-turn { 0% { transform:translateY(12px) rotate(-90deg); opacity:.2; } 55% { opacity:1; } 100% { transform:translateY(0) rotate(0deg); opacity:1; } }
[data-brand-motion-paused] .brand-photo.is-revealed :is(.brand-frame-edge,.brand-frame-pixels i) { animation-play-state:paused; }
.site-page .brand-hero--compact { grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr); padding-bottom:56px; }
.site-page .brand-hero--compact h1 { font-size:clamp(44px,5.6vw,76px); }
.brand-hero--compact .brand-photo-media > img,.brand-photo--compact .brand-photo-media > img { aspect-ratio:4/3; }
.brand-experience > .section { position:relative; }
.brand-experience .form-card { position:relative; background:#f5f5f5; border:1px solid #e5e5e5; }
.brand-experience .form-card::after { content:''; position:absolute; width:8px; height:8px; background:#fff; bottom:-1px; right:-1px; box-shadow:-8px 0 #fff,0 -8px #fff; pointer-events:none; }
.brand-experience .card { position:relative; border-top:1px solid #dedfe1; }
.brand-experience .card::after { content:''; position:absolute; bottom:0; right:0; width:8px; height:8px; background:#fff; box-shadow:-8px 0 #fff,0 -8px #fff; pointer-events:none; }
.brand-experience .copy > .brand-photo { margin-top:32px; }
.brand-experience .section-heading .eyebrow { margin-top:0; }
.brand-experience .btn--outline { --button-bg:#eee8ff; --button-fg:#23134c; }
.brand-experience .btn:active { transform:scale(.985); }
.brand-experience .brand-section-number { color:#0a49ba; font-size:13px; letter-spacing:.07em; margin:0 0 16px; }
.brand-experience .prose { overflow-wrap:break-word; }
.brand-experience .prose h1 { font-size:clamp(42px,5vw,64px); }
@media(max-width:1000px) {
 .site-page .brand-hero { gap:36px; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
 .site-page .brand-hero--compact { grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr); }
}
@media(max-width:700px) {
 .site-page .brand-hero,.site-page .brand-hero--compact { grid-template-columns:1fr; gap:36px; padding-top:144px; padding-bottom:52px; }
 .site-page .brand-hero h1 { font-size:clamp(44px,10.5vw,64px); }
 .site-page .brand-hero .lede { max-width:40ch; }
 .brand-hero .brand-photo-media > img { aspect-ratio:4/3; }
 .brand-hero--compact .brand-photo-media > img { aspect-ratio:2/1; }
 .brand-hero .brand-photo { margin-right:12px; }
 .brand-hero-actions { align-items:stretch; }
 .brand-hero-actions .btn { flex:1 1 auto; }
 .brand-frame-edge { height:16px; }
}
@media(prefers-reduced-motion:reduce) {
 .brand-photo.is-revealed :is(.brand-frame-edge,.brand-frame-pixels i) { animation:none!important; }
 .brand-experience .btn:active { transform:none; }
}
@media print { .brand-frame-pixels { display:none; } .brand-photo.is-revealed :is(.brand-frame-edge,.brand-frame-pixels i) { animation:none!important; } }