.sw-h27 { position: relative; min-height: 100vh; background: #17191C; color: #F2F3F5; font-family: 'Inter', sans-serif; display: flex; align-items: center; overflow: hidden; }
.sw-h27-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; clip-path: polygon(26% 0, 100% 0, 100% 100%, 4% 100%); background-image: url('/studio/components/images/beauty-5-fitness.jpg'); background-size: cover; background-position: 60% 35%; filter: grayscale(0.45) contrast(1.12); }
.sw-h27-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(23,25,28,0.88) 0%, rgba(23,25,28,0.3) 48%, rgba(23,25,28,0.62) 100%); }
.sw-h27-photo-credit { position: absolute; top: 18px; right: 16px; z-index: 2; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(242,243,245,0.85); background: rgba(23,25,28,0.55); padding: 5px 11px; border-radius: 2px; }
.sw-h27-edge { position: absolute; top: -4%; bottom: -4%; left: calc(50.7% - 2px); width: 4px; background: linear-gradient(to bottom, #FF4D2E, rgba(255,77,46,0.35)); transform: skewX(-13deg); box-shadow: 0 0 24px rgba(255,77,46,0.5); z-index: 2; }
.sw-h27-content { position: relative; z-index: 3; width: 52%; padding: 4.5rem 1rem 7.5rem clamp(2.5rem, 5vw, 4.5rem); }
.sw-h27-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.68rem; letter-spacing: 6px; text-transform: uppercase; font-weight: 700; color: #F2F3F5; margin-bottom: 1.7rem; }
.sw-h27-dot { width: 9px; height: 9px; background: #FF4D2E; }
.sw-h27-eyebrow-loc { font-style: normal; color: #8C929C; font-weight: 500; letter-spacing: 2px; }
.sw-h27-title { font-weight: 900; font-size: 112px; line-height: 0.86; letter-spacing: -4px; text-transform: uppercase; color: #F2F3F5; margin: 0 0 1.4rem; }
.sw-h27-italic { display: inline-block; font-style: italic; font-weight: 900; transform: skewX(-8deg); color: #FF4D2E; -webkit-text-stroke: 1px #FF4D2E; }
.sw-h27-sub { font-size: 16px; line-height: 1.6; color: rgba(242,243,245,0.85); max-width: 42ch; margin: 0 0 0.9rem; }
.sw-h27-emphasis { display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.64rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,77,46,0.9); margin-bottom: 1.7rem; }
.sw-h27-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sw-h27-cta-primary { display: inline-flex; align-items: center; gap: 10px; background: #FF4D2E; color: #17191C; font-size: 0.88rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 16px 30px; border-radius: 3px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sw-h27-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -14px rgba(255,77,46,0.6); }
.sw-h27-cta-secondary { display: inline-flex; align-items: center; color: #F2F3F5; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 15px 26px; border: 1.5px solid rgba(242,243,245,0.3); border-radius: 3px; text-decoration: none; transition: border-color 0.2s ease; }
.sw-h27-cta-secondary:hover { border-color: #FF4D2E; }
.sw-h27-counter { display: flex; align-items: center; gap: 18px; margin-top: 2.4rem; }
.sw-h27-digits { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 56px; font-weight: 800; letter-spacing: 2px; line-height: 1; color: #F2F3F5; }
.sw-h27-counter-body { display: flex; flex-direction: column; gap: 8px; }
.sw-h27-bar { position: relative; width: 190px; height: 3px; background: rgba(242,243,245,0.16); overflow: hidden; }
.sw-h27-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 68%; background: #FF4D2E; box-shadow: 0 0 12px rgba(255,77,46,0.7); }
.sw-h27-foot-meta { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8C929C; max-width: 32ch; }
.sw-h27-coach { position: absolute; right: 4%; bottom: 16%; z-index: 4; display: flex; flex-direction: column; gap: 5px; width: min(300px, 36%); background: rgba(20,22,25,0.82); border: 1px solid rgba(255,77,46,0.35); border-left: 3px solid #FF4D2E; padding: 1.1rem 1.3rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sw-h27-coach-kicker { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 700; color: #FF4D2E; }
.sw-h27-coach-name { font-size: 0.94rem; font-weight: 800; color: #F2F3F5; }
.sw-h27-coach-meta { font-size: 0.72rem; line-height: 1.55; color: #8C929C; }
.sw-h27-marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: stretch; border-top: 1px solid rgba(242,243,245,0.14); background: rgba(15,16,18,0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sw-h27-marquee-label { flex-shrink: 0; display: flex; align-items: center; padding: 0.95rem 1.6rem; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 700; color: #FF4D2E; border-right: 1px solid rgba(242,243,245,0.14); }
.sw-h27-marquee-clip { flex: 1; overflow: hidden; display: flex; align-items: center; }
.sw-h27-track { display: flex; width: max-content; animation: sw-h27-marq 28s linear infinite; }
.sw-h27-seq { display: flex; align-items: center; }
.sw-h27-seq i { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-style: normal; font-size: 0.74rem; letter-spacing: 0.04em; color: rgba(242,243,245,0.82); white-space: nowrap; padding: 0 22px; }
.sw-h27-seq b { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700; font-size: 0.7rem; color: #FF4D2E; }
@keyframes sw-h27-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 960px) { .sw-h27 { align-items: flex-start; } .sw-h27-photo { position: relative; width: 100%; height: 42vh; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); order: -1; } .sw-h27 { flex-direction: column; } .sw-h27-edge { display: none; } .sw-h27-content { width: 100%; padding: 1.6rem 1.5rem 8rem; } .sw-h27-title { font-size: 56px; letter-spacing: -2px; } .sw-h27-digits { font-size: 40px; } .sw-h27-coach { position: relative; right: auto; bottom: auto; width: 100%; margin: 0 0 1.4rem; order: 2; } .sw-h27-marquee { position: absolute; } }