.sw-h40 { position: relative; min-height: 100vh; background: #DDEBC8; color: #28401F; font-family: 'Space Grotesk', 'Inter', sans-serif; display: flex; flex-direction: column; justify-content: center; padding: 3rem clamp(2rem, 5vw, 4.2rem) 2rem; overflow: hidden; }
.sw-h40::before { content: ""; position: absolute; inset: 0; background: radial-gradient(720px 420px at 88% 8%, rgba(255,255,255,0.5), transparent 65%); pointer-events: none; }
.sw-h40-path { position: absolute; right: 4%; top: 8%; width: 52%; height: 72%; opacity: 0.45; pointer-events: none; }
.sw-h40-ball { position: absolute; left: clamp(2rem, 6vw, 5rem); bottom: 26%; width: 16px; height: 16px; border-radius: 50%; background: #F08A24; box-shadow: 0 4px 0 rgba(40,64,31,0.25); }
.sw-h40-main { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.sw-h40-eyebrow { display: inline-flex; align-items: center; gap: 10px; background: #FFFFFF; border-radius: 999px; padding: 8px 18px; font-size: 0.68rem; letter-spacing: 4px; text-transform: uppercase; font-weight: 700; color: #28401F; box-shadow: 0 10px 22px -14px rgba(40,64,31,0.5); margin-bottom: 1.6rem; }
.sw-h40-dot { width: 8px; height: 8px; border-radius: 50%; background: #F08A24; }
.sw-h40-eyebrow-loc { font-style: normal; font-weight: 500; color: #5C7050; letter-spacing: 2px; }
.sw-h40-title { font-weight: 700; font-size: 58px; line-height: 0.98; letter-spacing: -1.6px; color: #28401F; margin: 0 0 1.2rem; }
.sw-h40-italic { font-family: 'Caveat', cursive; font-style: normal; font-weight: 700; font-size: 1.22em; color: #F08A24; }
.sw-h40-title-end { display: inline-block; font-size: 0.38em; font-weight: 600; letter-spacing: 0.02em; margin-top: 0.6rem; opacity: 0.85; }
.sw-h40-sub { font-size: 16px; line-height: 1.65; color: #5C7050; max-width: 46ch; margin: 0 0 0.9rem; }
.sw-h40-scribble { display: block; font-family: 'Caveat', cursive; font-size: 1.35rem; color: #28401F; transform: rotate(-1.5deg); margin: 0 0 1.6rem; }
.sw-h40-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sw-h40-cta-primary { display: inline-flex; align-items: center; gap: 10px; background: #F08A24; color: #FFFFFF; font-size: 0.92rem; font-weight: 700; padding: 15px 30px; border-radius: 999px; text-decoration: none; box-shadow: 0 14px 26px -14px rgba(240,138,36,0.8); transition: transform 0.25s ease; }
.sw-h40-cta-primary:hover { transform: translateY(-2px) rotate(-1deg); }
.sw-h40-cta-secondary { display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1.5px solid rgba(40,64,31,0.3); color: #28401F; font-size: 0.88rem; font-weight: 600; padding: 13px 26px; border-radius: 999px; text-decoration: none; transition: border-color 0.25s ease; }
.sw-h40-cta-secondary:hover { border-color: #F08A24; }
.sw-h40-collage { position: relative; justify-self: center; }
.sw-h40-photo { position: relative; width: min(420px, 38vw); aspect-ratio: 4 / 3.2; border-radius: 26px; border: 10px solid #FFFFFF; background-image: url('/studio/components/images/kleinunt-3-hundetrainer.jpg'); background-size: cover; background-position: center; transform: rotate(3deg); box-shadow: 0 28px 56px -26px rgba(40,64,31,0.5); }
.sw-h40-photo::before { content: ""; position: absolute; inset: -10px; border-radius: 26px; border: 2px dashed rgba(40,64,31,0.25); transform: rotate(-4.5deg); pointer-events: none; }
.sw-h40-credit { position: absolute; bottom: 10px; right: 12px; font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: #FFFFFF; background: rgba(40,64,31,0.55); padding: 4px 9px; border-radius: 999px; }
.sw-h40-tile { position: absolute; left: -34px; bottom: -22px; display: flex; flex-direction: column; gap: 3px; background: #FFFFFF; border-radius: 16px; padding: 16px 20px 14px; max-width: 250px; transform: rotate(-3deg); box-shadow: 0 22px 44px -20px rgba(40,64,31,0.5); }
.sw-h40-tile::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 74px; height: 18px; background: rgba(240,138,36,0.45); border-radius: 2px; }
.sw-h40-tile-kicker { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: #F08A24; }
.sw-h40-tile-title { font-size: 1rem; font-weight: 700; color: #28401F; }
.sw-h40-tile-meta { font-size: 0.74rem; line-height: 1.45; color: #5C7050; }
.sw-h40-week { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2.6rem; }
.sw-h40-week-label { display: inline-block; background: #28401F; color: #DDEBC8; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; padding: 9px 16px; border-radius: 10px; transform: rotate(-2deg); }
.sw-h40-class { display: inline-flex; align-items: baseline; gap: 10px; background: #FFFFFF; border: 1.5px solid rgba(40,64,31,0.22); border-radius: 999px; padding: 10px 18px; box-shadow: 0 12px 24px -16px rgba(40,64,31,0.45); }
.sw-h40-class-a { transform: rotate(-1.2deg); }
.sw-h40-class-b { transform: rotate(1.2deg); }
.sw-h40-class-time { font-size: 0.78rem; font-weight: 700; color: #F08A24; }
.sw-h40-class-style { font-size: 0.82rem; font-weight: 700; color: #28401F; }
.sw-h40-class-meta-label { font-size: 0.72rem; color: #5C7050; }
@media (max-width: 960px) { .sw-h40 { padding: 2.4rem 1.4rem 1.8rem; } .sw-h40-main { grid-template-columns: 1fr; } .sw-h40-title { font-size: 42px; } .sw-h40-photo { width: min(420px, 84vw); margin-top: 1rem; } .sw-h40-tile { left: 0; bottom: -28px; } .sw-h40-week { margin-top: 3rem; } .sw-h40-path, .sw-h40-ball { display: none; } }