html,
body,
.container-fluid {
    background-color: #888888;
    min-height: 98vh;
    width:100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    position: static;
    margin: 0 auto;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    background-color: transparent;
}

h1 {
    color: #efcb00;
    font-weight: 500;
}

h2 {
    color: white;
}

.alert {
    padding-left: 15%;
    padding-right: 15%;
}

input {
    caret-color: #ac1010;
}

.container {
    min-width: 70vw;
}

/* NAVIGATION */
#myNav a {
    text-decoration: none;
}

#myNav a:hover, #myNav a:focus, #myNav a:active {
    color: rgb(177, 77, 216);
    text-decoration: none;
}

#myNav {
    position: static;
    top: 0;
    font-size: 1.3rem;
    background-color: rgba(18, 46, 68, 0.713);
    box-shadow: 0px 0px 5px rgb(0, 0, 0);
    z-index: 300;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* LEARNING PARK PORTAL V2 */
.portal-body{background:#d8e8dc url("../images/piano-background.jpg") center/cover fixed;color:#122e44;font-family:'Poppins',sans-serif;margin:0;min-height:100vh}
.portal-body::before{background:rgba(216,232,220,.8);content:"";inset:0;pointer-events:none;position:fixed;z-index:0}
.portal-header,.portal-main,.portal-footer{position:relative;z-index:1}
.portal-header{align-items:center;background:#122e44;border-bottom:4px solid #ffde24;display:grid;gap:22px;grid-template-columns:minmax(210px,.8fr) minmax(0,1.5fr) auto;padding:15px clamp(18px,4vw,58px)}
.portal-brand{color:#fff;display:grid;line-height:1.2;text-decoration:none}.portal-brand:hover,.portal-brand:focus{color:#ffde24}
.portal-brand-kicker{color:#9aff47;font-size:.72rem;font-weight:bold;text-transform:uppercase}.portal-brand strong{font-size:1.05rem}
.portal-nav{display:grid;gap:8px;grid-template-columns:repeat(4,minmax(0,1fr))}
.portal-nav-link{border:1px solid rgba(255,255,255,.28);border-radius:6px;color:#fff;font-size:.78rem;font-weight:bold;padding:10px 8px;text-align:center;text-decoration:none}
.portal-nav-link:hover,.portal-nav-link:focus,.portal-nav-link.is-active{background:#ffde24;border-color:#ffde24;color:#122e44}
.portal-logout button{background:transparent;border:1px solid #fff;border-radius:6px;color:#fff;font-size:.75rem;padding:9px 11px}.portal-logout button:hover{background:#fff;color:#122e44}
.portal-main{margin:0 auto;max-width:1180px;padding:28px 24px 70px}
.portal-status{align-items:stretch;background:#fff;border:2px solid #122e44;border-radius:8px;box-shadow:0 12px 28px rgba(18,46,68,.18);display:grid;grid-template-columns:minmax(180px,1.2fr) repeat(2,minmax(130px,.7fr)) minmax(160px,.8fr);overflow:hidden}
.portal-status.is-history{grid-template-columns:minmax(180px,1.2fr) repeat(2,minmax(130px,.7fr))}
.portal-status-welcome,.portal-status-item,.portal-status-history{display:grid;padding:14px 18px}.portal-status-welcome,.portal-status-item{border-right:1px solid #d4dde2}
.portal-status span{color:#5f6f78;font-size:.72rem;font-weight:bold;text-transform:uppercase}.portal-status strong{font-size:1.05rem}.portal-status .portal-status-name{color:#54217f}
.portal-status-history{align-items:center;background:#e8ffc1;color:#126b21;font-size:.8rem;font-weight:bold;justify-content:center;text-align:center;text-decoration:none}.portal-status-history:hover{background:#178f25;color:#fff}
.portal-status-history.is-current{background:#eef3f5;color:#50636d;cursor:default;text-transform:none}.portal-status-history.is-current:hover{background:#eef3f5;color:#50636d}
.portal-intro{background:#fff8dc;border-left:7px solid #dc6a00;margin:28px 0 20px;max-width:780px;padding:24px 28px}
.portal-intro h1{color:#122e44;font-family:'Belgrano',serif;font-size:clamp(2rem,5vw,3.6rem);line-height:1.05;margin:5px 0 12px}.portal-intro p:last-child{line-height:1.65;margin:0}
.portal-eyebrow{color:#6e2ab5;font-family:'Recursive',sans-serif;font-size:.72rem;font-weight:bold;margin:0;text-transform:uppercase}
.portal-practice-layout,.portal-progress-layout,.portal-achievement-grid{align-items:start;display:grid;gap:18px;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr)}
.portal-workspace,.portal-tool,.portal-conversation,.portal-achievement-section,.portal-personal-progress,.portal-prize-section,.portal-standings,.portal-legacy-recording{background:rgba(255,255,255,.97);border:2px solid #122e44;border-radius:8px;box-shadow:0 16px 36px rgba(18,46,68,.2)}
.portal-workspace,.portal-conversation,.portal-achievement-section,.portal-prize-section,.portal-standings{padding:26px}.portal-side-column{display:grid;gap:18px}.portal-tool{padding:22px}
.portal-section-heading{align-items:center;display:flex;gap:18px;justify-content:space-between;margin-bottom:20px}
.portal-section-heading h2,.portal-tool h2,.portal-achievement-section h2{color:#122e44;font-family:'Belgrano',serif;font-size:1.6rem;margin:3px 0 0}
.portal-state,.portal-count{background:#e8ffc1;border:1px solid #178f25;border-radius:999px;color:#126b21;flex:0 0 auto;font-family:'Recursive',sans-serif;font-size:.7rem;font-weight:bold;padding:6px 9px}
.portal-lesson-notes{color:#1d2930;font-family:'Recursive',sans-serif;line-height:1.65}.portal-lesson-notes h1,.portal-lesson-notes h2,.portal-lesson-notes h3{color:#6e2ab5;font-family:'Belgrano',serif;margin:24px 0 10px}.portal-lesson-notes h1{border-bottom:2px solid #d7c4ea;font-size:1.65rem;padding-bottom:9px}.portal-lesson-notes h2{font-size:1.25rem}.portal-lesson-notes h3{font-size:1.1rem}.portal-lesson-notes ol{display:grid;gap:10px;padding-left:0}.portal-lesson-notes blockquote,.history-notes blockquote{background:#fff8dc;border-left:5px solid #dc6a00;margin:12px 0;padding:12px 15px}.portal-lesson-notes blockquote p:last-child,.history-notes blockquote p:last-child{margin-bottom:0}
.portal-lesson-notes li{align-items:center;background:#f5f8f7;border:1px solid #d5dde1;border-radius:5px;display:grid;grid-template-columns:auto minmax(0,1fr);list-style:none;margin:0;padding:12px}.portal-lesson-notes li input{align-self:center;height:20px;margin:0 12px 0 0;width:20px}.portal-lesson-notes li label{cursor:pointer;display:block;width:auto}.portal-lesson-notes li label p{margin:7px 0}.portal-lesson-notes li input:checked+label{color:#66767f;text-decoration:line-through}
.portal-primary-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.portal-button{border:2px solid #122e44;border-radius:6px;display:inline-block;font-family:'Recursive',sans-serif;font-size:.82rem;font-weight:bold;padding:11px 14px;text-align:center;text-decoration:none}
.portal-button-primary{background:#122e44;color:#fff}.portal-button-primary:hover{background:#178f25;border-color:#178f25;color:#fff}.portal-button-quiet{background:#fff8dc;color:#122e44}.portal-button-quiet:hover{background:#ffde24;color:#122e44}
.tempo-stage{background:#122e44;border-radius:6px;height:150px;margin:18px 0;overflow:hidden;position:relative}.tempo-track{background:rgba(255,255,255,.24);bottom:30px;height:2px;left:18px;position:absolute;right:18px}
.tempo-pendulum{animation:portalPendulum calc(var(--beat-duration)*2) ease-in-out infinite;background:#ffde24;border-radius:4px;bottom:28px;height:94px;left:calc(50% - 4px);position:absolute;transform-origin:50% 100%;width:8px}
.tempo-pendulum::before{background:#dc6a00;border:2px solid #fff;border-radius:50%;content:"";height:22px;left:-7px;position:absolute;top:10px;width:22px}
.tempo-beat{animation:portalBeat var(--beat-duration) ease-out infinite;background:#9aff47;border-radius:50%;bottom:21px;height:16px;left:calc(50% - 8px);position:absolute;width:16px}
@keyframes portalPendulum{0%,100%{transform:rotate(-34deg)}50%{transform:rotate(34deg)}}@keyframes portalBeat{0%{box-shadow:0 0 0 0 rgba(154,255,71,.85);transform:scale(1)}100%{box-shadow:0 0 0 28px rgba(154,255,71,0);transform:scale(.8)}}
.tempo-form label,.portal-reflection-form label{display:block;font-family:'Recursive',sans-serif;font-size:.8rem;font-weight:bold;margin-bottom:8px}.tempo-control{align-items:center;display:grid;gap:7px;grid-template-columns:minmax(0,1fr) auto auto;margin-bottom:18px}.tempo-control output{color:#6e2ab5;font-size:1.1rem;font-weight:bold}
.tempo-result{background:#fff8dc;border-left:5px solid #dc6a00;display:grid;gap:16px;margin-top:18px;padding:18px}.tempo-result-success{border-color:#178f25}.tempo-result-copy>strong{display:block;font-size:1.2rem}.tempo-comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid #d8cfa8;background:#fff}.tempo-comparison div{padding:11px}.tempo-comparison div+div{border-left:1px solid #d8cfa8}.tempo-comparison span,.tempo-comparison strong{display:block}.tempo-comparison span{color:#63747a;font-size:.7rem;font-weight:bold;text-transform:uppercase}.tempo-comparison strong{color:#15364c;margin-top:3px}.tempo-feedback-stage{height:105px;margin:0}.portal-guide-tool{background:#fff8dc}@media(max-width:480px){.tempo-comparison{grid-template-columns:1fr}.tempo-comparison div+div{border-left:0;border-top:1px solid #d8cfa8}}
.portal-conversation,.portal-legacy-recording,.portal-standings{margin-top:18px}.portal-message-list{background:#eef3f5;border:1px solid #ccd8de;border-radius:6px;display:grid;gap:10px;max-height:390px;overflow-y:auto;padding:14px}
.portal-message{background:#fff;border-left:4px solid #dc6a00;border-radius:4px;max-width:82%;padding:12px 14px}.portal-message.is-hanford{border-color:#6e2ab5}.portal-message.is-student{justify-self:end}.portal-message strong{color:#6e2ab5;display:block;font-family:'Recursive',sans-serif;font-size:.72rem;margin-bottom:4px}.portal-message.is-student strong{color:#dc6a00}.portal-message p:last-child{margin-bottom:0}
.portal-reflection-form{display:grid;margin-top:18px}.portal-reflection-form textarea{background:#fff8dc;border:2px solid #122e44;border-radius:6px;color:#122e44;line-height:1.6;margin-bottom:12px;padding:13px;resize:vertical}
.portal-sent-note,.portal-empty-state{background:#e8ffc1;border-left:5px solid #178f25;color:#126b21;margin:15px 0 0;padding:15px}.portal-empty-state{display:grid;gap:4px}.portal-legacy-recording{padding:16px 20px}.portal-legacy-recording summary,.portal-standings summary{color:#122e44;cursor:pointer;font-family:'Recursive',sans-serif;font-weight:bold}.portal-legacy-recording .responsive-container{margin-top:16px}
.portal-achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-achievement-list{display:grid;gap:10px}.portal-achievement{align-items:start;background:#eef7f0;border:1px solid #b8d5bf;border-radius:6px;display:grid;gap:12px;grid-template-columns:34px minmax(0,1fr);padding:14px}.portal-achievement>span{color:#178f25;font-family:'Recursive',sans-serif;font-size:.75rem;font-weight:bold}.portal-achievement.is-performance{background:#fff8dc;border-color:#ead9a1}.portal-achievement.is-performance>span{color:#dc6a00}
.portal-personal-progress{background:#122e44;color:#fff;display:grid;padding:28px}.portal-personal-progress .portal-eyebrow{color:#9aff47}.portal-points-total{color:#ffde24;font-family:'Belgrano',serif;font-size:5rem;line-height:1;margin-top:12px}.portal-personal-progress>span{color:#d6e7ef;font-family:'Recursive',sans-serif;font-size:.8rem}.portal-personal-progress p{line-height:1.6;margin:24px 0}.portal-personal-progress .portal-button{background:#ffde24;border-color:#ffde24;color:#122e44}
.portal-prize-list{display:grid;gap:8px}.portal-prize-list article{align-items:center;border-bottom:1px solid #d5dde1;display:grid;gap:14px;grid-template-columns:minmax(0,1fr) auto;padding:10px 0}.portal-prize-list article div{display:grid}.portal-prize-list article span{color:#5f6f78;font-size:.82rem}.portal-prize-list article b{background:#e8ffc1;border-radius:6px;color:#126b21;padding:6px 8px}
.portal-standings-intro{border-left:5px solid #dc6a00;margin:20px 0 14px;padding-left:14px}.portal-standings-intro p{color:#5f6f78;margin:4px 0 0}.portal-standings-list{display:grid;gap:5px}.portal-standings-list>div{align-items:center;border-bottom:1px solid #d5dde1;display:grid;gap:12px;grid-template-columns:30px minmax(0,1fr) auto;padding:8px 10px}.portal-standings-list>div.is-current-student{background:#e8ffc1;border:2px solid #178f25;border-radius:6px}
.portal-footer{background:#122e44;color:#d6e7ef;font-size:.76rem;padding:18px;text-align:center}.portal-footer a{color:#ffde24}
.pwa-install-button{background:#ffde24;border:2px solid #122e44;border-radius:6px;bottom:16px;box-shadow:0 8px 24px rgba(18,46,68,.28);color:#122e44;font-family:'Recursive','Poppins',sans-serif;font-size:.76rem;font-weight:bold;padding:10px 13px;position:fixed;right:16px;z-index:1100}.pwa-install-button:hover,.pwa-install-button:focus{background:#9aff47}
.portal-body{animation:portalPageArrive .22s ease-out;transition:opacity .12s ease}.portal-body.portal-is-leaving{opacity:.72}
@keyframes portalPageArrive{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}
@view-transition{navigation:auto}::view-transition-old(root){animation:portalPageOut .12s ease both}::view-transition-new(root){animation:portalPageArrive .2s ease both}@keyframes portalPageOut{to{opacity:.55}}
.history-tools{align-items:end;background:rgba(255,255,255,.97);border:2px solid #122e44;border-radius:8px;display:grid;gap:14px;grid-template-columns:minmax(0,1.4fr) minmax(180px,.6fr);margin-bottom:18px;padding:18px}.history-tools label{display:grid;font-family:'Recursive',sans-serif;font-size:.76rem;font-weight:bold;gap:6px}.history-tools input,.history-tools select{background:#fff8dc;border:2px solid #122e44;border-radius:5px;color:#122e44;padding:10px 12px}.history-summary{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}.history-summary>div{background:#122e44;border-bottom:4px solid #ffde24;border-radius:7px;color:#fff;display:grid;padding:17px}.history-summary span{color:#b9ccd6;font-size:.7rem;font-weight:bold;text-transform:uppercase}.history-summary strong{color:#ffde24;font-family:'Belgrano',serif;font-size:1.55rem;overflow-wrap:anywhere}.history-list{display:grid;gap:12px}.history-entry{background:rgba(255,255,255,.97);border:2px solid #122e44;border-radius:8px;overflow:hidden}.history-entry[hidden]{display:none}.history-entry summary{align-items:center;cursor:pointer;display:grid;gap:16px;grid-template-columns:110px minmax(0,1fr) auto;list-style:none;padding:18px 20px}.history-entry summary::-webkit-details-marker{display:none}.history-entry summary:hover{background:#fff8dc}.history-date{color:#5f6f78;font-size:.76rem}.history-piece{display:grid}.history-piece strong{font-family:'Belgrano',serif;font-size:1.15rem}.history-piece span{color:#5f6f78;font-size:.8rem}.history-kind{background:#e8ffc1;border:1px solid #178f25;border-radius:999px;color:#126b21;font-size:.65rem;font-weight:bold;padding:5px 8px;text-transform:uppercase}.history-kind.is-legacy{background:#fff0e8;border-color:#dc6a00;color:#8b4300}.history-detail{border-top:1px solid #d5dde1;display:grid;gap:22px;grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);padding:24px}.history-notes{color:#1d2930;font-family:'Recursive',sans-serif;line-height:1.65}.history-notes h1,.history-notes h2,.history-notes h3{color:#6e2ab5;font-family:'Belgrano',serif;margin:18px 0 8px}.history-notes h1{font-size:1.5rem}.history-notes h2{font-size:1.2rem}.history-notes li{margin:8px 0}.history-evidence{display:grid;gap:14px;align-self:start}.history-ratings{display:grid;gap:7px;grid-template-columns:1fr 1fr}.history-rating{background:#eef3f5;border-left:4px solid #6e2ab5;display:grid;padding:8px 10px}.history-rating span{color:#5f6f78;font-size:.65rem}.history-rating strong{font-size:1rem}.history-tech{background:#fff8dc;border-left:4px solid #dc6a00;padding:12px}.history-tech strong,.history-tech span{display:block}.history-tech span{color:#5f6f78;font-size:.78rem}.history-empty{background:#e8ffc1;border-left:5px solid #178f25;color:#126b21;padding:18px}
.history-print{align-items:center;background:#fff;border:2px solid #122e44;border-radius:5px;color:#122e44;cursor:pointer;display:inline-flex;font-family:'Recursive',sans-serif;font-size:.75rem;font-weight:bold;justify-content:center;padding:9px 12px}.history-print:hover{background:#122e44;color:#fff}
@media print{body.print-history-entry *{visibility:hidden!important}body.print-history-entry .history-entry.is-printing,body.print-history-entry .history-entry.is-printing *{visibility:visible!important}body.print-history-entry .history-entry.is-printing{background:#fff;border:0;left:0;overflow:visible;position:absolute;top:0;width:100%}body.print-history-entry .history-entry.is-printing summary{border-bottom:2px solid #122e44;padding:12px 0}body.print-history-entry .history-entry.is-printing .history-detail{border:0;display:grid;padding:20px 0}body.print-history-entry .history-print{display:none!important}}
@media(prefers-reduced-motion:reduce){.tempo-pendulum,.tempo-beat,.portal-body{animation:none;transition:none;scroll-behavior:auto}::view-transition-old(root),::view-transition-new(root){animation:none}}
@media(max-width:820px){.portal-header{grid-template-columns:1fr auto}.portal-nav{grid-column:1/-1;grid-row:2}.portal-status{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-status-welcome,.portal-status-item{border-bottom:1px solid #d4dde2}.portal-practice-layout,.portal-progress-layout,.portal-achievement-grid,.history-detail{grid-template-columns:1fr}}
@media(max-width:520px){.portal-header{gap:12px;padding:12px}.portal-brand strong{font-size:.9rem}.portal-nav{gap:5px;grid-template-columns:repeat(2,minmax(0,1fr))}.portal-nav-link{font-size:.65rem;padding:9px 4px}.portal-main{padding:18px 12px 48px}.portal-status{grid-template-columns:1fr 1fr}.portal-status-welcome,.portal-status-history{grid-column:1/-1}.portal-status-item{border-right:0}.portal-intro{margin-top:18px;padding:20px 16px}.portal-workspace,.portal-conversation,.portal-achievement-section,.portal-prize-section,.portal-standings{padding:18px}.portal-section-heading{align-items:flex-start}.portal-primary-actions{display:grid}.portal-message{max-width:94%}.history-tools,.history-summary{grid-template-columns:1fr}.history-entry summary{grid-template-columns:1fr auto}.history-date{grid-column:1}.history-piece{grid-column:1}.history-kind{grid-column:2;grid-row:1/3}.history-detail{padding:18px 14px}.history-ratings{grid-template-columns:1fr}}

#navIcon, .navLink {
    color: rgb(182, 182, 182);
}

@media (max-width: 600px) {
    #myNav {
        position: relative;
    }

    
}

/* FONTS */

@font-face {
  font-family: 'Gagalin';
  src: url('../styles/fonts/Gagalin-Regular.otf') format('woff2'),
     url('../styles/fonts/Gagalin-Regular.otf') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hangyaboly';
  src:url('../styles/fonts/Hangyaboly.ttf') format('woff2'),
     url('../styles/fonts/Hangyaboly.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Garamond';
  src: url('../styles/fonts/EBGaramond-VariableFont_wght.ttf') format('woff2'),
  url('../styles/fonts/EBGaramond-VariableFont_wght.ttf') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.hangyaboly {
    font-family: 'Hangyaboly'
}

.gagalin {
    font-family: 'Gagalin';
}

.garamond {
    font-family: 'Garamond';
}

.allison {
    font-family: 'Allison', cursive;
}

.imfell {
    font-family: 'IM Fell English', serif;
}

.zcool {
    font-family: 'ZCOOL XiaoWei', serif;
    font-size: 1.5rem;
}

.ps2p {
    font-family: 'Press Start 2P', cursive;
}

.poppins {
    font-family: 'Poppins', sans-serif;
}

.caveat {
    font-family: 'Caveat', cursive;
}

.handlee {
    font-family: 'Handlee', cursive;
}

.bellota {
    font-family: 'Bellota', cursive;
}

.belgrano {
    font-family: 'Belgrano', serif;
}

.recursive,
.alert {
    font-family: 'Recursive', sans-serif;
}

#contactFormSubmit {
    font-family: 'Gagalin';
    font-size: 2rem;
}

#contactMessageInput, #contactEmailText, #contactEmailInput {
    font-family: 'Poppins';
    font-size: 1.3rem;
}

/*SHOP*/
#shop-blurb p{
    margin: 50px 50px 50px 50px;
}

/* HOME */
#home-html {
    background-image: url("../images/professional-teaching-studio.webp");
    background-blend-mode: none;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    overflow-x: hidden;
}

.home-display {
    background-color: rgba(255, 255, 255, 0.944);
    padding: 5px 10px;
    border-radius: 15px;
}

.home-display-orange {
    background-color: rgba(255, 173, 73, 0.784);
    padding: 5px 10px;
    border-radius: 15px;
}

.home-display-green {
    background-color: rgba(223, 255, 169, 0.989);
    padding: 5px 10px;
    border-radius: 15px;
}

.background-transparent {
    background-color: transparent;
}

#biographyContainer p, #ratesRow li {
    line-height: 1.8;
    font-size: 1rem;
    text-align: center;
}

.bioTitle {
    display: table;
    margin-top: 30px;
    margin: auto;
    text-align: center;
}

#photo1, #photo2, #hanford-lam-studio-min, #youtubeShowcase {
    width: 100%;
    border-radius: 20px;
    border: 2px solid white;
}

#bioRow, .featureVideoRow, #experienceRow, #pedagogyRow, #ratesRow, #mapRow {
    margin-bottom: 150px;
    margin-top: 100px;
    height: 100%;
}

/*IN PARENTS PAGE*/
.tooltip > .tooltip-arrow {
    display: none;
}

.tooltip > .tooltip-inner {
    border: 1px solid red;
    padding: 15px;
    margin: 15px;
}

.modal-body pre {
    white-space: pre-wrap;
    /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
}

.footer {
    margin-top: auto;
}

.row-border {
    border: 1px solid rgb(105, 105, 105);
}

.col-sm {
    display: block;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
}

.col-sm p {
    margin: 0;
}

.black-text {
 color: #000000;
} 

.grey-text {
    color:#969696;
}

.pink-text {
    color: #e8226a;
}

.green-text {
    color: #178f25;
}

.dark-green-text {
    color: #59b88e;
}

.red-text {
    color: #fa0000;
}

.palegreen-text {
    color: #9aff47;
}

.purple-text {
    color: #472282;
}

.orange-text {
    color: #ff810c;
}

.dark-orange-text {
    color: #dc6a00;
}

.blue-text {
    color: #45cdff;
}

.white-text {
    color: white;
}

.yellow-text {
    color: #f0ad4e;
}

.rhythm {
    background-color: rgba(255, 182, 198, 0.9);
}

.coordination {
    background-color: rgba(143, 194, 228, 0.9);
}

.tone {
    background-color: rgba(255, 232, 173, 0.9);
}

.dynamics {
    background-color: rgba(144, 218, 218, 0.9);
}

.stylistic {
    background-color: rgba(200, 173, 253, 0.9);
}

.rubric-icon {
    height: 40px;
    width: 40px;
    display: block;
    margin: 0 auto;
}


.practiceSuccessIcon {
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 25px;
}

.eagle {
    background-color: #d8ffc5;
}

.octopus {
    background-color: #b6dcff;
}

.koala {
    background-color: #ffd5bd;
}

.jellyfish {
    background-color: #ffeeba;
}

.bear {
    background-color: #cacaca;
}

.eagleSelected {
    background-color: #aaff7f;
}

.octopusSelected {
    background-color: #6cd5ff;
}

.koalaSelected {
    background-color: #ffc06e;
}

.jellyfishSelected {
    background-color: #ffdc73;
}

.bearSelected {
    background-color: #b1b1b1;
}


/* ASSESSMENT GRID */

.rubric-grid {
    background-color: rgb(0, 0, 0);
    border: 1px solid rgb(0, 0, 0);
    padding: 0;
    margin: 0;
}

.rubric-grid div div {
    border: 1px solid rgb(0, 0, 0);
}

.iconContainer {
    min-height: 9rem;
    display: flex;
    align-items: center;
    vertical-align: middle;
}

.interactiveIcon {
    height: 1.5rem;
    width: 1.5rem;
}

.interactiveText {
    font-size: 0.8rem;
    font-weight: 100;
    color:rgb(156, 156, 156);
}

.rubric-grid input[type="radio"] {
    opacity: 0;
    width: 0;
    height: 0;
}

.rubric-grid input[type="radio"] + label img {
    cursor: pointer;
    transition: width 0.5s, height 0.5s;
}

.rubric-grid input[type="radio"]:checked + label img {
    width: 3.5rem;
    height: 3.5rem;
}  

/* for text */
.rubric-grid input[type="radio"] + label .interactiveText {
    cursor: pointer;
    transition-property: color font-size font-weight;
    transition-duration: 0.5s;
}

.rubric-grid input[type="radio"]:checked + label .interactiveText {
    color:rgb(0, 0, 0);
    font-size: 1rem;
    font-family: recursive;
}  

hr {
    background-color: transparent;
    border-top: 1px solid white;
}

/* MISSIONS PAGE */
#missions-html {
    background-image: url("../images/sunset-bird.jpeg");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    overflow-x: hidden;
}

.task-div-complete {
    display: inline-block;
    position: relative;
    background-color: rgba(178, 255, 174, 0.9);
    padding: 1.5em;
    text-align: center;
    vertical-align: middle;
    margin: 0.8em 0.8em;
    color: rgb(17, 102, 0);
}

#missionsWrapper{
    text-align: center;
}

.section::before {
    display: block;
    content: " ";
    margin-top: -80px;
    height: 80px;
    visibility: hidden;
    pointer-events: none;
}

/*PRACTICE PAGE*/
#practice-html {
    background-image: url("../images/hamsters.jpeg");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    overflow-x: scroll;
}

#PracticeConvo ::placeholder {
    color:rgb(139, 230, 255);
}

.convo-p-wrapper > p {
    max-width: 100%;
    word-wrap: break-word;
}

#weeklySnapshot {
    font-size: 1.2rem;
    color: rgb(0, 0, 0);
    max-width: 1000px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.96);
}

#weeklySnapshot input[type="checkbox"] {
    appearance: none;
}

#weeklySnapshot input[type="checkbox"]:checked + label {
    text-decoration: line-through;
  }



#weeklySnapshot span {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 1rem;
    margin-top: 1rem;
}
  

.blue-box {
    margin: 0 auto;
    background-color: rgba(208, 255, 255, 0.953);
    color: rgb(0, 0, 0);
    font-size: 1.2rem;
    padding: 4px 5px;
}

#weeklySnapshot h1 {
    font-family: 'Belgrano', serif;
    font-size: 2rem;
    color: #000000;
    margin-bottom: 1.5rem;
    margin-top: 3rem;
    text-shadow: 1px 1px 3px rgb(0, 0, 0);
}

#weeklySnapshot ol li::marker, #weeklySnapshot ul li::marker {
    font-weight: bold;
}

.topShadow {
    box-shadow: 2px 2px 20px 20px rgba(0, 36, 91, 0.587);
    background-color: #4964ffc4;
    
}

#practiceConversation > div p {
    margin: 15px auto;
}

#practiceConversation > div hr {
    background-color: black;
    border: none;
}

#practiceConversation > div h1, #practiceConversation > div h2, #practiceConversation > div h3 {
    color: rgb(194, 53, 53);
    font-size: 1.5rem;
}

/*BE ON TOP OF SNOWFLAKES*/
.aboveFalling {
    z-index: 100;
    position: relative;
}

.transparentBG {
    background-color: transparent;
}   

/* downward arrow animated */
.arrowcontainer {margin: 0 auto; margin-top: 6rem; margin-bottom: 8rem; width:90px;height:90px;}
.circle {background: #267fbb; border-radius: 100%; text-align: center; padding: 15px 0 0 0; line-height: 50px; color: rgb(255, 247, 0);}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

/* customizable snowflake styling */
.snowflakes {
    color: #fff;
    font-size: 1em;
    font-family: Arial;
    text-shadow: 0 0 1px #000;
}
  
@-webkit-keyframes snowflakes-fall {
    0%{
        top:-10%
    }
    100%{
        top:100%
    }
}
@-webkit-keyframes snowflakes-shake{
    0%{
        -webkit-transform:translateX(0px);transform:translateX(0px)
    }
    50%{
        -webkit-transform:translateX(80px);transform:translateX(80px)
    }
    100%{
        -webkit-transform:translateX(0px);transform:translateX(0px)
    }
}
@keyframes snowflakes-fall{
    0%{
        top:-10%
    }100%{
        top:100%
    }
}
@keyframes snowflakes-shake{
    0%{
        transform:translateX(0px)
    }
    50%{
        transform:translateX(80px)
    }
    100%{
        transform:translateX(0px)
    }
}
.snowflake{
    position:fixed;
    z-index: 1;
    top:-10%;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
    -webkit-animation-name:snowflakes-fall,snowflakes-shake;
    -webkit-animation-duration:16s,5s;
    -webkit-animation-timing-function:linear,ease-in-out;
    -webkit-animation-iteration-count:infinite,infinite;
    -webkit-animation-play-state:running,running;
    animation-name:snowflakes-fall,snowflakes-shake;
    animation-duration:16s,6s;
    animation-timing-function:linear,ease-in-out;
    animation-iteration-count:infinite,infinite;
    animation-play-state:running,running
}
.snowflake:nth-of-type(0){
    left:1%;
    -webkit-animation-delay:0s,0s;
    animation-delay:0s,0s
}
.snowflake:nth-of-type(1){
    left:10%;
    -webkit-animation-delay:12s,3.5s;
    animation-delay:12s,2s
}
.snowflake:nth-of-type(2){
    left:20%;
    -webkit-animation-delay:6s,.5s;
    animation-delay:6s,.5s
}
.snowflake:nth-of-type(3){
    left:30%;
    -webkit-animation-delay:4s,2s;
    animation-delay:4s,2s
}
.snowflake:nth-of-type(4){
    left:40%;
    -webkit-animation-delay:2s,4s;
    animation-delay:2s,2s
}
.snowflake:nth-of-type(5){
    left:50%;
    -webkit-animation-delay:8s,4s;
    animation-delay:8s,3s
}
.snowflake:nth-of-type(6){
    left:60%;
    -webkit-animation-delay:6s,0s;
    animation-delay:6s,2s
}
.snowflake:nth-of-type(7){
    left:70%;
    -webkit-animation-delay:10s,2s;
    animation-delay:10s,2s
}
.snowflake:nth-of-type(8){
    left:80%;
    -webkit-animation-delay:14s,1.5s;
    animation-delay:14s,0s
}
.snowflake:nth-of-type(9){
    left:90%;
    -webkit-animation-delay:9s,1.5s;
    animation-delay:9s,1.5s
}

/* REPORTS */
#reports-guest-html {
    background-image: url("../images/road.jpeg");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    overflow-x: hidden;
}

.portal-login-wrap {
    margin-left: auto;
    margin-right: auto;
    max-width: 760px;
    padding-left: 16px;
    padding-right: 16px;
}

.portal-quote-card {
    background: rgba(255, 248, 220, 0.96);
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
    color: #000000;
    display: inline-block;
    margin: 0 auto 18px;
    max-width: 680px;
    padding: 24px 30px;
    position: relative;
}

.portal-quote-card::before {
    background: #122e44;
    border: 2px solid #ffffff;
    border-radius: 999px;
    color: #ffde24;
    content: "♪";
    font-family: 'Recursive', sans-serif;
    font-size: 1.1rem;
    height: 34px;
    left: 22px;
    line-height: 30px;
    position: absolute;
    top: -17px;
    width: 34px;
}

.portal-quote-card blockquote {
    color: #122e44;
    font-family: 'Handlee', cursive;
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: bold;
    line-height: 1.18;
    margin: 0 0 12px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.portal-quote-card figcaption {
    color: #dc6a00;
    font-family: 'Recursive', sans-serif;
    font-weight: bold;
}

#pikachuMusic {
    width: 15rem;
}

#pikachuDiv {
    text-align: center;
}

#registerForm h2 {
    font-family: 'Handlee', cursive;
}

#registration-form .form-control-lg {
    width: 30rem;
    margin: 0 auto;
    display: block;
    font-family: 'Handlee', cursive;
}

#registration-form input {
    background-color: #00000054;
    border: none;
    color:#ac1010;
}

#loginForm input, input:focus {
    background-color: #1e003d77;
    border: none;
    color:#5cc035;
}

#loginForm ::placeholder {
    color:rgba(30, 255, 0, 0.9);
}

/* WALLET */
.wallet-div {
    text-align: center;
    border-radius: 5px;
    border: 1px #505050 solid;
    margin: 0 auto;
    margin-top: 0.5rem;
    margin-left: 0;
    padding: 0.1rem 0.8rem;
    position: fixed;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.85);
    cursor: move;
}

#logoutButton {
    display: flex;
    flex-direction: column;
}

@media (max-width: 600px) {
    .wallet-div {
        display: none;
    }
}

/* TICKER */
.marquee {
    width: 100%;
	line-height: 50px;
	background-color: #ffde24d9;
	color: rgb(0, 0, 0);
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee div {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 35s linear infinite;
}
.marquee div span {
    padding-left: 20px
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/*QUIZ*/
.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.responsive-container {
    width: 100%;
	position: relative;
	padding-top: 56.25%; /* 16:9 */
	overflow: hidden;
}

.responsive-container-1-1 {
    width: 100%;
	position: relative;
	padding-top: 100%; /* 1:1 Aspect Ratio */
	overflow: hidden;

}
.responsive-container-3-2 {
    width: 100%;
	position: relative;
	padding-top: 66.66%; /* 3:2 Aspect Ratio */
	overflow: hidden;
}

.responsive-container iframe,
.responsive-container object,
.responsive-container embed,
.responsive-container video
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#quizContainer70 {
    max-width: 850px;
    margin: 0 auto;
}

#quizContainer70 textarea, #quizContainer70 input {
    background-color: #1f003d;
    caret-color: #5cc035;
    color: #b6dcff;
    border: 1px solid white;
    border-radius: 5px;
}

.quizQuestionContainer {
    background-color: transparent;
    border-radius: 25px;
    border: 1px dashed rgb(255, 225, 0);
    padding: 0px 25px 0px 25px;
    margin-top: 25px;
}

.quizQuestionContainer2 {
    background-color: transparent;
    border-radius: 25px;
    border: 1px dashed rgb(255, 0, 0);
    padding: 0px 25px 0px 25px;
    margin-top: 25px;
}

/* PERFORMANCES */
#performancesContainer {
    width: 1000px;
    max-width: 90%;
    margin: 0 auto;
}

#performancesContainer .performanceContainer textarea {
    width: 100%;
    background-color: #1f003d;
    caret-color: #5cc035;
    color: #b6dcff;
    border: 1px solid white;
    border-radius: 5px;
}

#performancesContainer .performanceContainer {
    width: 100%;
    border-radius: 25px;
    border: 1px dashed rgb(255, 255, 0);
    padding: 0px 25px 0px 25px;
    margin-top: 25px;
    background-color: rgba(43, 81, 106, 0.597);
}

/* LEADERBOARD PAGE */
#leaderboard-html {
    background-image: url("../images/road.jpeg");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    overflow-x: hidden;
}

#leaderboard-table {
    background-color: rgba(255, 255, 255, 0.885);
}

/* SHOWCASE PAGE */
#showcase-html {
    background-image: url("../images/stage.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    overflow-x: hidden;
}

/* FEEDBACK PAGE */
#feedback-html {
    background-image: url("../images/moon.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    overflow-x: hidden;
    font-size: 1.5rem;
}

.black-bg {
    background-color: rgba(0, 0, 0, 0.867);
}

.white-border {
    border: 2px solid white;
}

/* SCHEDULE */
.hover-past {
    color: rgb(130, 130, 130);
    text-decoration: line-through;
}
.hover-workshop {
    color: rgb(255, 136, 72);
}
.hover-livestream {
    color: rgb(0, 208, 255);
}
.hover-livestream1 {
    color: rgb(171, 240, 255);
}

.hover-excursion {
    color: rgb(96, 192, 0);
}
.hover-holiday {
    color: rgb(255, 80, 191);
}
.hover-performance {
    color: rgb(246, 246, 92);
}
.hover-extra {
    color: rgb(135, 255, 177);
}
.hover-extra1 {
    color: rgb(95, 207, 134);
}
.table-valign-middle {
    vertical-align: middle;
}

/* POLISHED HOME REFRESH */
.home-page {
    max-width: 1180px;
}

.home-section {
    margin: 92px auto;
}

.hero-section {
    margin-top: 74px;
}

.home-display {
    border-radius: 8px;
}

.hero-copy,
.music-value-panel,
.problem-panel,
.approach-panel,
.menu-panel,
.outcomes-panel,
.about-panel {
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

.hero-copy {
    padding: 34px;
    position: relative;
}

.hero-copy::before {
    background: #ffde24;
    border: 2px solid #000000;
    border-radius: 999px;
    content: "";
    height: 18px;
    position: absolute;
    right: 22px;
    top: 20px;
    width: 18px;
}

.section-kicker {
    color: #6e2ab5;
    font-family: 'Recursive', sans-serif;
    font-size: 0.86rem;
    font-weight: bold;
    letter-spacing: 0;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.hero-title {
    color: #dc6a00;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: 0.98;
    margin-bottom: 18px;
}

.hero-lede,
.section-copy,
.music-value-intro {
    font-size: 1.14rem;
    line-height: 1.75;
}

.hero-park-promise {
    background: rgba(255, 222, 36, 0.28);
    border-left: 5px solid #dc6a00;
    color: #122e44;
    font-size: 1.08rem;
    line-height: 1.6;
    margin: 22px 0 0;
    padding: 12px 14px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 18px;
}

.home-cta {
    border-radius: 8px;
    display: inline-flex;
    font-family: 'Recursive', sans-serif;
    font-weight: bold;
    justify-content: center;
    min-width: 150px;
    padding: 11px 18px;
    text-decoration: none;
}

.home-cta-primary {
    background: #122e44;
    border: 2px solid #122e44;
    color: #ffffff;
}

.home-cta-secondary {
    background: #fff8dc;
    border: 2px solid #dc6a00;
    color: #122e44;
}

.home-cta:hover,
.home-cta:focus {
    color: #ffffff;
    transform: translateY(-1px);
}

.home-cta-secondary:hover,
.home-cta-secondary:focus {
    background: #dc6a00;
}

.afterglow-cta {
    background: #122e44;
    border: 2px solid #122e44;
    color: #ffffff;
    margin-top: 10px;
}

.hero-proof,
.hero-caption {
    color: #122e44;
    font-size: 0.95rem;
    margin: 0;
}

.hero-caption {
    flex: 1 1 260px;
    line-height: 1.45;
}

.home-video-frame,
.image-frame {
    border-radius: 8px;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.32);
}

.image-frame {
    background: #122e44;
    border: 2px solid #ffffff;
    overflow: hidden;
}

.image-frame img {
    display: block;
    height: auto;
    max-width: 100%;
}

.afterglow-image img {
    aspect-ratio: 4 / 3;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.performance-card {
    background:
        linear-gradient(135deg, rgba(255, 248, 220, 0.98), rgba(255, 255, 255, 0.94)),
        repeating-linear-gradient(90deg, rgba(18, 46, 68, 0.1) 0 1px, transparent 1px 18px);
    border: 2px solid rgba(255, 255, 255, 0.94);
    border-radius: 8px;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32);
    padding: 16px;
    position: relative;
}

.performance-card::before {
    background: #ffde24;
    border: 2px solid #000000;
    border-radius: 999px;
    content: "";
    height: 16px;
    left: 18px;
    position: absolute;
    top: 18px;
    width: 16px;
}

.performance-card__header {
    padding: 8px 12px 14px 30px;
}

.performance-card__kicker {
    color: #6e2ab5;
    font-family: 'Recursive', sans-serif;
    font-size: 0.78rem;
    font-weight: bold;
    letter-spacing: 0;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.performance-card__header h2 {
    color: #122e44;
    font-family: 'Gagalin';
    font-size: clamp(1.9rem, 3.3vw, 3rem);
    line-height: 1;
    margin: 0 0 8px;
}

.performance-card__header p {
    color: #000000;
    font-family: 'Poppins', sans-serif;
    line-height: 1.55;
    margin: 0;
}

.performance-card__footer {
    align-items: center;
    background: rgba(255, 248, 220, 0.84);
    border: 2px solid #122e44;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-top: 12px;
    padding: 10px 12px;
}

.watch-youtube-link {
    background: #dc6a00;
    border: 2px solid #122e44;
    border-radius: 8px;
    color: #ffffff;
    display: inline-flex;
    font-family: 'Recursive', sans-serif;
    font-weight: bold;
    justify-content: center;
    padding: 8px 12px;
    text-decoration: none;
}

.watch-youtube-link:hover,
.watch-youtube-link:focus {
    background: #122e44;
    color: #ffffff;
}

.opening-attraction-section {
    margin-bottom: 58px;
    margin-top: 54px;
}

.opening-attraction-panel {
    background: #122e44;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34);
    color: #ffffff;
    display: grid;
    gap: 42px;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    overflow: hidden;
    padding: 40px;
    position: relative;
}

.opening-attraction-panel::before {
    background: #ffde24;
    border: 2px solid #000000;
    border-radius: 999px;
    content: "";
    height: 18px;
    position: absolute;
    right: 24px;
    top: 22px;
    width: 18px;
}

.opening-attraction-copy {
    min-width: 0;
}

.opening-attraction-kicker {
    color: #9aff47;
}

.opening-attraction-title {
    color: #ffde24;
    font-size: 4rem;
    line-height: 0.98;
    margin: 0 0 16px;
}

.opening-attraction-question {
    color: #ffffff;
    font-size: 1.85rem;
    line-height: 1.32;
    margin: 0 0 20px;
}

.opening-attraction-copy .section-copy {
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.65;
}

.opening-attraction-note {
    color: #9aff47;
    font-weight: bold;
    margin: 22px 0 0;
}

.opening-attraction-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 26px;
}

.attraction-cta {
    background: #dc6a00;
    border: 2px solid #ffffff;
    color: #ffffff;
}

.attraction-cta:hover,
.attraction-cta:focus {
    background: #178f25;
}

.opening-attraction-status {
    color: #ffffff;
    font-size: 0.86rem;
    line-height: 1.45;
    max-width: 250px;
}

.attraction-route {
    align-self: center;
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.attraction-route::before {
    background: rgba(255, 255, 255, 0.36);
    bottom: 25px;
    content: "";
    left: 20px;
    position: absolute;
    top: 25px;
    width: 2px;
}

.attraction-route li {
    display: grid;
    gap: 1px 12px;
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 74px;
    padding: 9px 0;
    position: relative;
}

.attraction-route li > span {
    align-items: center;
    background: #ffde24;
    border: 2px solid #000000;
    border-radius: 999px;
    color: #000000;
    display: flex;
    font-size: 0.72rem;
    font-weight: bold;
    grid-row: 1 / 3;
    height: 42px;
    justify-content: center;
    position: relative;
    width: 42px;
    z-index: 1;
}

.attraction-route strong {
    color: #ffffff;
    font-family: 'Gagalin';
    font-size: 1.2rem;
    line-height: 1.15;
}

.attraction-route small {
    color: #d6e7ef;
    font-family: 'Poppins', sans-serif;
    line-height: 1.35;
}

.music-cabinet-row {
    margin-top: 42px;
}

.music-value-panel {
    background: rgba(255, 255, 255, 0.96);
    padding: 30px;
}

.music-resource-grid {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 26px auto 0;
    max-width: 1040px;
}

.music-resource-card,
.wiki-music-widget {
    border-radius: 8px;
    min-height: 280px;
    padding: 22px;
}

.music-resource-card {
    border: 2px solid #ffffff;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
    text-decoration: none;
    transition: transform 160ms ease, filter 160ms ease;
}

.music-resource-card:hover,
.music-resource-card:focus {
    color: #ffffff;
    filter: saturate(1.12);
    transform: translateY(-3px) rotate(-0.4deg);
}

.resource-train {
    background: #122e44;
}

.resource-read {
    background: #6e2ab5;
}

.music-resource-label,
.wiki-music-widget__eyebrow {
    background: #ffde24;
    border: 2px solid #000000;
    border-radius: 999px;
    color: #000000;
    display: inline-block;
    font-family: 'Recursive', sans-serif;
    font-size: 0.86rem;
    font-weight: bold;
    padding: 4px 10px;
    width: fit-content;
}

.resource-mark {
    align-items: center;
    background: #122e44;
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.72rem;
    height: 25px;
    justify-content: center;
    line-height: 1;
    margin-right: 6px;
    min-width: 25px;
    padding: 0 6px;
    vertical-align: middle;
}

.music-resource-title {
    color: #ffffff;
    font-family: 'Gagalin';
    font-size: 1.8rem;
    line-height: 1.08;
}

.music-resource-copy {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    line-height: 1.55;
}

.music-resource-credit {
    color: #9aff47;
    font-family: 'Recursive', sans-serif;
    font-size: 0.9rem;
    margin-top: auto;
}

.wiki-music-widget {
    background: #fff8dc;
    border: 2px solid #dc6a00;
    color: #000000;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.wiki-music-widget__header {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.wiki-music-widget__button {
    background: #59b88e;
    border: 2px solid #000000;
    border-radius: 8px;
    color: #000000;
    font-family: 'Recursive', sans-serif;
    font-weight: bold;
    padding: 8px 12px;
    white-space: nowrap;
}

.wiki-music-widget__button:hover,
.wiki-music-widget__button:focus {
    background: #9aff47;
}

.wiki-music-widget__subtitle {
    color: #6e2ab5;
    font-family: 'Recursive', sans-serif;
    font-weight: bold;
    margin-bottom: 8px;
}

.wiki-music-widget__title {
    color: #122e44;
    font-family: 'Gagalin';
    font-size: 1.8rem;
    line-height: 1.12;
    margin-bottom: 12px;
}

.wiki-music-widget__extract {
    color: #000000;
    font-family: 'Poppins', sans-serif;
    font-size: 0.98rem;
    line-height: 1.55;
}

.wiki-music-widget__link {
    color: #dc6a00;
    font-family: 'Recursive', sans-serif;
    font-weight: bold;
    margin-top: auto;
    text-decoration: none;
}

.wiki-music-widget__link:hover,
.wiki-music-widget__link:focus {
    color: #178f25;
    text-decoration: underline;
}

.free-resource-section {
    margin-top: 46px;
}

.free-resource-panel {
    background: rgba(255, 248, 220, 0.97);
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    padding: 30px;
}

.free-resource-heading {
    margin: 0 auto 24px;
    max-width: 780px;
}

.free-resource-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.free-resource-card {
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid rgba(18, 46, 68, 0.2);
    border-radius: 8px;
    display: grid;
    gap: 16px;
    grid-template-columns: 126px minmax(0, 1fr);
    min-height: 205px;
    overflow: hidden;
    padding: 14px;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.free-resource-card:hover,
.free-resource-card:focus-within {
    border-color: #dc6a00;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}

.free-resource-card img {
    align-self: stretch;
    background: #122e44;
    border: 2px solid #ffffff;
    border-radius: 8px;
    height: 100%;
    max-height: 210px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.free-resource-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

.free-resource-type {
    background: #122e44;
    border-radius: 999px;
    color: #ffde24;
    display: inline-block;
    font-family: 'Recursive', sans-serif;
    font-size: 0.78rem;
    font-weight: bold;
    margin-bottom: 8px;
    padding: 4px 10px;
    width: fit-content;
}

.free-resource-copy h3 {
    color: #6e2ab5;
    font-family: 'Gagalin';
    font-size: 1.35rem;
    line-height: 1.14;
    margin-bottom: 8px;
}

.free-resource-copy p {
    color: #000000;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

.free-resource-copy a {
    background: #178f25;
    border: 2px solid #122e44;
    border-radius: 8px;
    color: #ffffff;
    display: inline-flex;
    font-family: 'Recursive', sans-serif;
    font-weight: bold;
    justify-content: center;
    margin-top: auto;
    padding: 8px 12px;
    text-decoration: none;
    width: fit-content;
}

.free-resource-copy a:hover,
.free-resource-copy a:focus {
    background: #122e44;
    color: #ffffff;
}

.free-resource-footer {
    color: #dc6a00;
    font-size: 1.35rem;
    line-height: 1.4;
    margin: 24px 0 0;
    text-align: center;
}

.performance-feedback-section {
    margin-top: -38px;
}

.fiverr-promo-card {
    align-items: center;
    background: #122e44;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
    color: #ffffff;
    display: grid;
    gap: 18px;
    grid-template-columns: 220px minmax(0, 1fr);
    margin: 24px auto 0;
    max-width: 820px;
    overflow: hidden;
    padding: 14px;
    text-decoration: none;
    transition: box-shadow 160ms ease, transform 160ms ease;
}

.fiverr-promo-card:hover,
.fiverr-promo-card:focus {
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
    color: #ffffff;
    transform: translateY(-2px);
}

.fiverr-promo-card img {
    border: 2px solid #ffffff;
    border-radius: 8px;
    display: block;
    width: 100%;
}

.fiverr-promo-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.fiverr-promo-copy strong {
    color: #ffde24;
    font-family: 'Gagalin';
    font-size: 1.75rem;
    line-height: 1.12;
}

.fiverr-promo-copy span:last-child {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    line-height: 1.55;
}

.problem-panel,
.approach-panel,
.menu-panel,
.outcomes-panel,
.about-panel {
    padding: 30px;
}

.problem-panel {
    background: rgba(255, 248, 220, 0.96);
}

.approach-panel {
    background: rgba(255, 255, 255, 0.96);
}

.menu-panel {
    background: rgba(223, 255, 169, 0.96);
}

.outcomes-panel {
    background: rgba(255, 255, 255, 0.96);
}

.about-panel {
    background: rgba(255, 248, 220, 0.96);
}

.signal-list {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 20px 0;
    padding: 0;
}

.signal-list li,
.menu-list li {
    background: rgba(18, 46, 68, 0.08);
    border: 2px solid rgba(18, 46, 68, 0.18);
    border-radius: 8px;
    color: #000000;
    font-family: 'Recursive', sans-serif;
    font-weight: bold;
    padding: 10px 12px;
}

.problem-list li {
    border-color: rgba(250, 0, 0, 0.28);
}

.outcome-list li {
    border-color: rgba(23, 143, 37, 0.3);
}

.approach-steps {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 24px 0;
}

.approach-steps-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.approach-steps span {
    background: #122e44;
    border: 2px solid #ffffff;
    border-radius: 8px;
    color: #ffffff;
    font-weight: bold;
    padding: 12px;
}

.section-note {
    color: #dc6a00;
    font-size: 1.25rem;
    line-height: 1.45;
    margin: 18px 0 0;
}

.soundcloud-strip {
    border-radius: 8px;
    margin-top: 20px;
}

.menu-list {
    display: grid;
    gap: 10px;
    margin: 24px 0;
}

.menu-list a {
    color: inherit;
    display: block;
    text-decoration: none;
}

.menu-list li {
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.menu-list li:hover,
.menu-list li:focus-within {
    background: rgba(255, 248, 220, 0.86);
    border-color: #dc6a00;
    transform: translateX(4px);
}

.park-map-section {
    margin-left: auto;
    margin-right: auto;
    max-width: 1080px;
}

.park-map-heading {
    background: rgba(255, 248, 220, 0.96);
    border-left: 6px solid #178f25;
    margin: 0 auto 24px;
    max-width: 820px;
    padding: 24px 28px;
}

.park-map-heading .bioTitle {
    margin-bottom: 12px;
}

.park-map-heading .section-copy {
    margin-bottom: 0;
}

.attraction-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.attraction-card {
    background: rgba(255, 255, 255, 0.97);
    border: 2px solid #122e44;
    border-radius: 8px;
    color: #000000;
    display: flex;
    flex-direction: column;
    min-height: 410px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transition: box-shadow 160ms ease, transform 160ms ease;
}

a.attraction-card:hover,
a.attraction-card:focus {
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
    color: #000000;
    transform: translateY(-4px);
}

.attraction-card-visual {
    aspect-ratio: 16 / 8;
    background: #122e44;
    border-bottom: 2px solid currentColor;
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    position: relative;
}

.attraction-card-visual::after {
    border: 1px solid rgba(255, 255, 255, 0.7);
    bottom: 10px;
    content: "";
    left: 10px;
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 10px;
}

.attraction-card-visual img {
    display: block;
    height: 100%;
    object-fit: cover;
    transition: filter 220ms ease, transform 300ms ease;
    width: 100%;
}

a.attraction-card:hover .attraction-card-visual img,
a.attraction-card:focus .attraction-card-visual img {
    filter: saturate(1.16) contrast(1.04);
    transform: scale(1.045);
}

.attraction-card-visual-practice img {
    object-position: center 48%;
}

.attraction-card-visual-listening img {
    object-position: center 52%;
}

.attraction-card-visual-theory img {
    object-position: center 48%;
}

.attraction-card-visual-pattern img {
    object-position: center 58%;
}

.attraction-card-visual-maestro img {
    object-position: center 38%;
}

.attraction-card-visual-stone img {
    object-position: center 48%;
}

.attraction-card-number {
    background: rgba(18, 46, 68, 0.82);
    border: 2px solid rgba(255, 255, 255, 0.88);
    border-radius: 8px;
    color: #ffffff;
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    padding: 7px 9px;
    position: absolute;
    right: 18px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.55);
    top: 18px;
    z-index: 2;
}

.attraction-card-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px 22px;
}

.attraction-card-status {
    background: #122e44;
    border-radius: 999px;
    color: #ffde24;
    font-size: 0.72rem;
    font-weight: bold;
    line-height: 1.3;
    max-width: calc(100% - 42px);
    padding: 5px 9px;
    width: fit-content;
    z-index: 1;
}

.attraction-card-copy strong {
    color: #6e2ab5;
    font-family: 'Gagalin';
    font-size: 1.65rem;
    line-height: 1.08;
    margin-top: auto;
    z-index: 1;
}

.attraction-card-copy > span:last-child {
    font-family: 'Poppins', sans-serif;
    line-height: 1.55;
    z-index: 1;
}

.attraction-card-open {
    background: #e8ffc1;
    border-color: #178f25;
}

.attraction-card-open .attraction-card-status {
    background: #178f25;
    color: #ffffff;
}

.attraction-card-pattern {
    border-color: #6e2ab5;
}

.attraction-card-stone {
    background: #122e44;
    border-color: #ffffff;
    color: #ffffff;
}

.attraction-card-stone .attraction-card-number {
    background: rgba(0, 0, 0, 0.7);
    color: #ffde24;
}

.attraction-card-stone .attraction-card-status {
    background: #ffde24;
    color: #000000;
}

.attraction-card-stone strong {
    color: #9aff47;
}

.connect-line a:hover,
.connect-line a:focus {
    color: #dc6a00;
    text-decoration: underline;
}

.connect-line {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-top: 18px;
}

.contact-connect-line {
    background: rgba(255, 248, 220, 0.92);
    border: 2px solid rgba(18, 46, 68, 0.18);
    border-radius: 8px;
    color: #122e44;
    margin: -6px 16px 0;
    padding: 10px 12px;
    text-align: center;
}

.keystone-feature {
    background: #fff8dc;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    overflow: hidden;
}

.keystone-feature-visual {
    align-items: center;
    background: #122e44;
    display: flex;
    justify-content: center;
    min-height: 440px;
    padding: 32px;
    position: relative;
}

.keystone-feature-visual::before {
    border: 1px solid rgba(255, 255, 255, 0.58);
    bottom: 16px;
    content: "";
    left: 16px;
    pointer-events: none;
    position: absolute;
    right: 16px;
    top: 16px;
}

.keystone-feature-visual img {
    border: 2px solid #ffffff;
    box-shadow: 12px 14px 0 #6e2ab5;
    display: block;
    max-height: 370px;
    max-width: 100%;
    object-fit: contain;
    position: relative;
    transform: rotate(-1.5deg);
    z-index: 1;
}

.keystone-price {
    background: #ffde24;
    border: 2px solid #000000;
    border-radius: 8px;
    bottom: 22px;
    color: #000000;
    font-size: 0.86rem;
    font-weight: bold;
    padding: 7px 10px;
    position: absolute;
    right: 22px;
    z-index: 2;
}

.keystone-feature-copy {
    align-self: center;
    padding: 38px 42px;
}

.keystone-positioning {
    background: #ffffff;
    border-left: 6px solid #6e2ab5;
    color: #122e44;
    font-size: 1.65rem;
    line-height: 1.35;
    margin: 22px 0;
    padding: 18px 20px;
}

.keystone-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.keystone-free-cta {
    background: #178f25;
    color: #ffffff;
}

.keystone-hardcopy-cta {
    background: #122e44;
    color: #ffffff;
}

.keystone-free-cta:hover,
.keystone-free-cta:focus,
.keystone-hardcopy-cta:hover,
.keystone-hardcopy-cta:focus {
    background: #6e2ab5;
    color: #ffffff;
}

.keystone-pages {
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
    margin-top: 18px;
    padding: 24px;
}

.keystone-pages-heading {
    align-items: end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.keystone-pages-heading p {
    margin-bottom: 0;
}

.keystone-pages-heading .Poppins {
    color: #122e44;
    font-size: 0.92rem;
    text-align: right;
}

.keystone-page-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.keystone-page-grid a {
    background: #122e44;
    border: 2px solid #122e44;
    border-radius: 6px;
    color: #ffffff;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.keystone-page-grid a:hover,
.keystone-page-grid a:focus {
    border-color: #ffde24;
    box-shadow: 0 12px 24px rgba(18, 46, 68, 0.24);
    color: #ffde24;
    transform: translateY(-3px) rotate(-0.35deg);
}

.keystone-page-grid img {
    aspect-ratio: 3 / 4;
    background: #ffffff;
    display: block;
    object-fit: cover;
    object-position: top center;
    width: 100%;
}

.keystone-page-grid span {
    display: block;
    font-size: 0.82rem;
    font-weight: bold;
    line-height: 1.35;
    padding: 10px 11px;
}

.contact-heading {
    margin-bottom: 30px;
}

.contact-section {
    margin-top: 30px;
}

.testimonial-section {
    margin-top: 40px;
}

.testimonial-panel {
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    padding: 28px;
}

.testimonial-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.testimonial-card {
    background: #fff8dc;
    border: 2px solid #dc6a00;
    border-radius: 8px;
    margin: 0;
    min-height: 190px;
    padding: 24px;
    position: relative;
}

.testimonial-card::before {
    background: #ffde24;
    border: 2px solid #000000;
    border-radius: 999px;
    content: "Q";
    font-family: 'Recursive', sans-serif;
    font-size: 0.78rem;
    font-weight: bold;
    height: 28px;
    left: 18px;
    line-height: 24px;
    position: absolute;
    text-align: center;
    top: -14px;
    width: 28px;
}

.testimonial-card-quirk {
    background: #122e44;
    border-color: #ffffff;
}

.testimonial-card blockquote {
    color: #122e44;
    font-family: 'Hangyaboly';
    font-size: 1.9rem;
    line-height: 1.2;
    margin: 10px 0 18px;
}

.testimonial-card-quirk blockquote {
    color: #ffffff;
}

.testimonial-card figcaption {
    color: #6e2ab5;
    font-family: 'Recursive', sans-serif;
    font-weight: bold;
}

.testimonial-card-quirk figcaption {
    color: #9aff47;
}

.contact-panel {
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    margin: 0 auto;
    max-width: 920px;
    padding: 28px;
}

.contact-panel form {
    margin-bottom: 0;
}

.contact-intro {
    color: #122e44;
    line-height: 1.65;
    margin: 0 auto;
    max-width: 720px;
}

.contact-panel .form-control,
.contact-panel .input-group-text {
    border: 2px solid #122e44;
}

.contact-panel .form-control {
    background-color: #fff8dc;
}

.contact-panel textarea.form-control {
    min-height: 190px;
}

.contact-panel #contactFormSubmit {
    background: #122e44;
    border: 2px solid #ffffff;
    border-radius: 8px;
    color: #ffffff;
    transition: background-color 160ms ease, transform 160ms ease;
}

.contact-panel #contactFormSubmit:hover,
.contact-panel #contactFormSubmit:focus {
    background: #178f25;
    transform: translateY(-2px);
}

.qualification-list {
    background: #122e44;
    border-radius: 8px;
    color: #ffffff;
    line-height: 1.6;
    margin: 20px auto;
    max-width: 760px;
    padding: 14px;
    overflow-wrap: anywhere;
}

.about-experience-line {
    white-space: normal;
}

.about-layout {
    align-items: center;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
}

.about-copy {
    text-align: center;
}

.about-portrait-frame {
    background: #122e44;
    border: 2px solid #ffffff;
    border-radius: 8px;
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.about-portrait-frame:hover,
.about-portrait-frame:focus-within {
    box-shadow: 0 22px 42px rgba(0, 0, 0, 0.34);
    transform: translateY(-3px) rotate(-0.35deg);
}

.about-portrait-frame img {
    display: block;
    height: 100%;
    max-height: 360px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

@media (max-width: 992px) {
    .home-section {
        margin: 64px auto;
    }

    .hero-video-column {
        margin-bottom: 24px;
    }

    .music-resource-grid,
    .free-resource-grid,
    .approach-steps,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .opening-attraction-panel {
        grid-template-columns: 1fr;
    }

    .keystone-feature {
        grid-template-columns: 1fr;
    }

    .keystone-feature-visual {
        min-height: 390px;
    }

    .keystone-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attraction-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .music-resource-card,
    .wiki-music-widget {
        min-height: auto;
    }

    .about-layout {
        grid-template-columns: 1fr;
    }

    .performance-card {
        margin: 0 auto;
        max-width: 720px;
    }
}

@media (max-width: 600px) {
    .hero-copy,
    .music-value-panel,
    .problem-panel,
    .approach-panel,
    .menu-panel,
    .outcomes-panel,
    .about-panel {
        padding: 20px 14px;
    }

    .hero-actions {
        display: grid;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-park-promise {
        font-size: 0.98rem;
    }

    .opening-attraction-panel {
        gap: 26px;
        padding: 28px 18px 22px;
    }

    .opening-attraction-title {
        font-size: 2.65rem;
    }

    .opening-attraction-question {
        font-size: 1.45rem;
    }

    .opening-attraction-actions {
        align-items: stretch;
        display: grid;
    }

    .opening-attraction-status {
        max-width: none;
    }

    .section-copy,
    .hero-lede,
    .music-value-intro {
        font-size: 1rem;
    }

    .free-resource-card {
        grid-template-columns: 1fr;
    }

    .keystone-feature-visual {
        min-height: 330px;
        padding: 28px;
    }

    .keystone-feature-visual img {
        max-height: 270px;
    }

    .keystone-feature-copy {
        padding: 28px 18px;
    }

    .keystone-positioning {
        font-size: 1.35rem;
        padding: 16px;
    }

    .keystone-actions {
        display: grid;
    }

    .keystone-actions .home-cta {
        text-align: center;
        width: 100%;
    }

    .keystone-pages {
        padding: 18px;
    }

    .keystone-pages-heading {
        align-items: flex-start;
        display: grid;
        gap: 6px;
    }

    .keystone-pages-heading .Poppins {
        text-align: left;
    }

    .park-map-heading {
        padding: 22px 16px;
    }

    .attraction-grid {
        grid-template-columns: 1fr;
    }

    .attraction-card {
        min-height: 220px;
    }

    .contact-sign {
        font-size: 2.2rem !important;
        padding: 28px 18px !important;
    }

    .contact-panel .input-group {
        display: grid;
        grid-template-columns: 1fr;
    }

    .contact-panel .input-group-prepend,
    .contact-panel .input-group-text,
    .contact-panel input.form-control {
        width: 100%;
    }

    .contact-panel .input-group-text {
        border-radius: 8px 8px 0 0;
    }

    .contact-panel input.form-control {
        border-radius: 0 0 8px 8px;
    }

    .free-resource-card img {
        aspect-ratio: 4 / 3;
        max-height: none;
    }

    .fiverr-promo-card {
        grid-template-columns: 1fr;
    }

    .performance-card {
        padding: 12px;
    }

    .performance-card__header {
        padding-left: 26px;
    }

    .performance-card__footer {
        align-items: stretch;
        display: grid;
    }

    .watch-youtube-link {
        width: 100%;
    }
}