[ng\:cloak], [ng-cloak], .ng-cloak {
    display: none !important;
}

.site-banner {
    color: #fff !important;
    text-align: center;
    padding: 10px 15px;
    font-weight: bold;
    position: relative;
    z-index: 1031;
    display: block !important;
}
.site-banner-warning { background-color: #d9534f !important; }
.site-banner-info { background-color: #f0ad4e !important; }
.site-banner-normal { background-color: #2a6496 !important; }
[ng-controller="bannerController"] {
    position: relative;
    z-index: 1031;
}
/* The header is in normal flow now, so the view needs no offset at all.
   This used to be a hardcoded margin that had to match the navbar and
   banner heights — when any of the three fell out of sync on deploy, the
   page title ended up hidden behind the navbar. */
.ng-view-offset {
    margin-top: 0;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#submit {
    height: 36px;
    background: #556cd6;
    color: white;
    width: 100%;
    font-size: 14px;
    border: 0;
    font-weight: 500;
    cursor: pointer;
    letter-spacing: 0.6;
    border-radius: 0 0 6px 6px;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
}
#submit:hover {
    opacity: 0.8;
}
/*
* Globals
*/

/* Links */
a,
a:focus,
a:hover {
    color: #fff;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
    color: #333;
    text-shadow: none; /* Prevent inheritence from `body` */
    background-color: #fff;
}


/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
    display: table;
    width: 100%;
    height: 100%; /* For at least Firefox */
    min-height: 100%;

    position: relative;
}
.site-wrapper-inner {
    display: table-cell;
    vertical-align: top;
}
.cover-container {
    margin-right: auto;
    margin-left: auto;
}

/* Padding for spacing */
.inner {
    padding: 30px;
}


/*
 * Header
 */
.masthead-brand {
    margin-top: 10px;
    margin-bottom: 10px;
}
.navbar-default .navbar-nav>li>a{
    color:white
}
.masthead-nav > li {
                       display: inline-block;
                   }
.masthead-nav > li + li {
                       margin-left: 20px;
                   }
.masthead-nav > li > a {
                               padding-right: 0;
                               padding-left: 0;
                               font-size: 16px;
                               font-weight: bold;
                               color: #fff;
                               border-bottom: 2px solid transparent;
                           }
.masthead-nav > li > a:hover,
                           .masthead-nav > li > a:focus {
                                                          background-color: transparent;
                                                          border-bottom-color: #a9a9a9;
                                                          border-bottom-color: rgba(255,255,255,.25);
                                                      }
.masthead-nav > .active > a,
                                .masthead-nav> .active> a:hover,
                                                                .masthead-nav > .active > a:focus {
                                                                                                    color: #fff;
                                                                                                    border-bottom-color: #fff;
                                                                                                }

@media (min-width: 768px) {
    .masthead-brand {
        float: left;
    }
    .masthead-nav {
        float: right;
    }
}


/*
 * Cover
 */

.cover {
    padding: 0 20px;
}
.cover .btn-lg {
    padding: 10px 20px;
    font-weight: bold;
}


/*
 * Footer
 */

.mastfoot {
    color: #999; /* IE8 proofing */
    color: rgba(255,255,255,.5);
}

.nav-pills>li>a{
    background:none
}
.nav-pills>li>a:hover{
    background:none;
    border:1px solid #fff
}

body{font-family:'Open Sans', sans-serif; !important;
    }
.locations {font-weight: bolder;
    color: white;
    text-align: center;}
.header{
    background-color: #428bca;

}
.lead{
    font-size: 16px;
}
.line{
    display:block;
    border:none;
    color:white;
    height:1px;
    background:black;
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350, from(#fff), to(#2a6496));
}
@media (min-width: 1200px){
    .footer{
        width: 1170px;
        margin:auto;
    }
}
.input {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 1em;
    vertical-align: top;
    font-size: 20px;
    color:#333;
}

.input__field {
    position: relative;
    display: block;
    float: right;
    padding: 0.8em;
    width: 60%;
    border: none;
    border-radius: 0;
    background: #f0f0f0;
    color: #aaa;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
    outline: none;
}

.input__label {
    display: inline-block;
    float: right;
    padding: 0 1em;
    width: 40%;
    color: #333;
    font-weight: bold;
    font-size: 70.25%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.input__label-content {
    position: relative;
    display: block;
    padding: 1.6em 0;
    width: 100%;
}

.graphic {
    position: absolute;
    top: 0;
    left: 0;
    fill: none;
}

.icon {
    color: #ddd;
    font-size: 150%;
}
.input__field--isao {
    z-index: 10;
    padding: 0.75em 0.1em 0.25em;
    width: 100%;
    background: transparent;
    color: #333;
}

.input__label--isao {
    position: relative;
    overflow: hidden;
    padding: 0;
    width: 100%;
    color: #333;
    text-align: left;
}

.input__label--isao::before {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 7px;
    background: #dadada;
    -webkit-transform: scale3d(1, 0.4, 1);
    transform: scale3d(1, 0.4, 1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
    transition: transform 0.3s, background-color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__label--isao::after {
    content: attr(data-content);
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.75em 0.15em;
    color: #428bca;
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    pointer-events: none;
}

.input__field--isao:focus + .input__label--isao::before {
    background-color: #428bca;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

.input__field--isao:focus + .input__label--isao {
    pointer-events: none;
}

.input__field--isao:focus + .input__label--isao::after {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.input__label-content--isao {
    padding: 0.75em 0.15em;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__field--isao:focus + .input__label--isao .input__label-content--isao {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}
.navbar-default .navbar-nav>li>a:hover{
    color:white
}
.navbar-default .navbar-nav>li>a:focus{
    color:white
}
.navbar-default .navbar-nav>li>a:visited{
    color:white
}

/* Day Badges */
.day-badge {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    font-size: 9px;
    font-weight: bold;
    margin-right: 1px;
}
.day-active {
    background-color: #337ab7;
    color: #fff;
}
.day-inactive {
    background-color: #eee;
    color: #ccc;
    position: relative;
}
.day-inactive::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 3px;
    right: 3px;
    height: 1px;
    background-color: #bbb;
    transform: rotate(-45deg);
    pointer-events: none;
}

/* Edit Class - Status Bar */
.edit-class-status-bar {
    display: flex;
    gap: 30px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e8e8e8;
}
.edit-class-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.edit-class-toggle span {
    font-size: 13px;
    color: #555;
}
.edit-class-switch {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    position: relative;
    transition: background 0.2s;
}
.edit-class-switch.off {
    background: #ccc;
}
.edit-class-switch.on {
    background: #5cb85c;
}
.edit-class-switch.on.full {
    background: #d9534f;
}
.edit-class-switch-knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.edit-class-switch.on .edit-class-switch-knob {
    left: 20px;
}

/* Registration - Summary Card */
.register-summary-card {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}
.register-summary-item {
    padding: 8px 0;
}
.register-summary-item .glyphicon {
    display: block;
    font-size: 20px;
    color: #337ab7;
    margin-bottom: 5px;
}
.register-summary-item strong {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 2px;
}
.register-summary-item span:last-child {
    font-size: 15px;
    color: #333;
}

/* Registration - Progress Steps */
.register-steps {
    display: flex;
    align-items: center;
    justify-content: center;
}
.register-step {
    text-align: center;
}
.register-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ddd;
    color: #999;
    line-height: 36px;
    font-weight: bold;
    font-size: 14px;
    margin: 0 auto 5px;
    transition: all 0.3s;
}
.register-step.active .register-step-circle {
    background: #337ab7;
    color: #fff;
}
.register-step-label {
    font-size: 12px;
    color: #999;
    transition: all 0.3s;
}
.register-step.active .register-step-label {
    color: #337ab7;
    font-weight: bold;
}
.register-step-line {
    flex: 1;
    height: 3px;
    background: #ddd;
    margin: 0 10px;
    margin-bottom: 20px;
    max-width: 120px;
    transition: all 0.3s;
}
.register-step-line.active {
    background: #337ab7;
}

/* Registration - Payment Cards */
.register-payment-card {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    min-height: 160px;
}
.register-payment-card:hover {
    border-color: #337ab7;
    box-shadow: 0 2px 8px rgba(51, 122, 183, 0.15);
}
.register-payment-card.selected {
    border-color: #337ab7;
    background: #f0f7ff;
    box-shadow: 0 2px 8px rgba(51, 122, 183, 0.2);
}
.register-payment-card-amount {
    font-size: 28px;
    font-weight: bold;
    color: #337ab7;
    margin-bottom: 5px;
}
.register-payment-card-label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}
.register-payment-card-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}

/* Registration - Validation */
.register-summary-card a,
.register-summary-card a:hover,
.register-summary-card a:focus {
    color: #337ab7;
}
/* =========================================================
   Home page
   ========================================================= */

:root {
    --ink: #101a2b;
    --ink-2: #475467;
    --ink-3: #8a94a4;
    --line: #e6e9ef;
    --tint: #f6f8fb;
    --brand: #2a6496;
    --brand-lift: #337ab7;
    --go: #16a34a;
    --go-dark: #128040;
}

.home,
.page {
    background: #fff;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

/* --- Split hero --- */
.hero {
    padding: 52px 0 58px;
    background: #2a6496;
    background: linear-gradient(155deg, #3b86c4 0%, #2a6496 48%, #1b476d 100%);
    color: #fff;
}
.hero-split {
    display: flex;
    flex-direction: column;
}
.hero-split::before,
.hero-split::after {
    display: none;
}
/* Classes lead on small screens; the pitch drops below them */
.hero-split-right { order: 1; }
.hero-split-left  { order: 2; margin-top: 34px; }

@media (min-width: 992px) {
    .hero-split {
        flex-direction: row;
        align-items: flex-start;
    }
    .hero-split-left  { order: 1; margin-top: 0; padding-right: 40px; }
    .hero-split-right { order: 2; }
}

/* --- Left: the pitch --- */
/* Headline runs the full width of the hero, above the split */
.hero-head {
    max-width: 800px;
    margin: 0 auto 42px;
    text-align: center;
}
.hero-title {
    margin: 0 0 16px;
    font-size: 50px;
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -1.7px;
    color: #fff;
}
.hero-lede {
    max-width: 640px;
    margin: 0 auto;
    font-size: 16.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .86);
}
.hero-eyebrow {
    margin: 0 0 16px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

/* --- Left: how it works --- */
/* The four steps read as a road trip: a lane-marked road runs down the
   step numbers, a car drives it, and each stop lights up as the car passes.
   Purely decorative — the whole thing is aria-hidden and switches off for
   prefers-reduced-motion. */
.journey {
    position: relative;
    margin-bottom: 26px;
}
.road {
    position: absolute;
    left: 14.5px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    border-radius: 2px;
    background-image: repeating-linear-gradient(180deg,
            rgba(255, 255, 255, .38) 0 7px,
            rgba(255, 255, 255, 0) 7px 15px);
}
.road-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background: #4ade80;
    transform-origin: top;
    transform: scaleY(0);
    /* tracks the car exactly, then runs the last stretch to the flag */
    animation: road-fill 4.9s linear .35s forwards;
}
.car {
    position: absolute;
    left: 50%;
    top: 0;
    width: 24px;
    height: 36px;
    margin: -18px 0 0 -12px;
    filter: drop-shadow(0 3px 6px rgba(6, 24, 40, .45));
    /* linear so each stop lights up exactly as the car reaches it */
    animation: home-drive 4.4s linear .35s both;
}
.car-svg {
    display: block;
    width: 24px;
    height: 36px;
    fill: #12293f;
}
.car-body   { fill: #fff; }
.car-glass  { fill: #8ecbf5; }
.car-roof   { fill: #d7e8f7; }
.car-light  { fill: #ffd97a; }

/* Destination marker the car parks at */
.finish {
    display: block;
    width: 31px;
    height: 31px;
    line-height: 29px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .8);
    animation: home-arrive .55s ease-out 4.53s both;
}
.finish-flag {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

/* Stops sit at 0 / 25 / 50 / 75% of the road and the car covers 0-89% in 4.4s,
   so the delays above put each pulse on the car's arrival. Measured against the
   desktop layout; other widths wrap differently and drift a little. */
@keyframes home-drive {
    from { top: 0%; }
    to   { top: 89%; }
}
@keyframes road-fill {
    0%    { transform: scaleY(0); }
    89.8% { transform: scaleY(.89); }
    100%  { transform: scaleY(1); }
}
@keyframes home-stop {
    0% {
        background: rgba(255, 255, 255, .14);
        border-color: rgba(255, 255, 255, .35);
        color: #fff;
        transform: scale(1);
    }
    40% {
        background: #4ade80;
        border-color: #4ade80;
        color: #08341c;
        transform: scale(1.18);
    }
    100% {
        background: #4ade80;
        border-color: #4ade80;
        color: #08341c;
        transform: scale(1);
    }
}
@keyframes home-arrive {
    0%   { color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .35); transform: scale(1); }
    40%  { color: #08341c; background: #4ade80; border-color: #4ade80; transform: scale(1.18); }
    100% { color: #08341c; background: #4ade80; border-color: #4ade80; transform: scale(1); }
}

.steps {
    margin: 0;
    padding: 0;
    list-style: none;
}
.step {
    display: flex;
    gap: 14px;
    /* enough clear road between stops for the car to read on its own */
    padding: 0 0 26px;
    position: relative;
}
.step-num {
    flex: 0 0 auto;
    width: 31px;
    height: 31px;
    line-height: 29px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    position: relative;
    z-index: 1;
}
.step .step-num {
    animation: home-stop .55s ease-out both;
}
.step:nth-child(1) .step-num { animation-delay: .12s; }
.step:nth-child(2) .step-num { animation-delay: 1.36s; }
.step:nth-child(3) .step-num { animation-delay: 2.60s; }
.step:nth-child(4) .step-num { animation-delay: 3.84s; }

.step-body {
    padding-top: 3px;
}
.step-title {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
}
.step-text {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .76);
}

.hero-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-foot .hero-link,
.hero-foot .hero-link:hover,
.hero-foot .hero-link:focus {
    color: rgba(255, 255, 255, .9);
}

/* --- Right: the schedule --- */
.class-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.class-list-title {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #fff;
}
.class-list-count {
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
    white-space: nowrap;
}
.class-loading {
    padding: 26px 4px;
    text-align: center;
    color: var(--ink-3);
    font-size: 14px;
}
.class-spinner {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid var(--line);
    border-top-color: var(--brand-lift);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.hero .class-loading {
    color: rgba(255, 255, 255, .8);
}
.hero .class-spinner {
    border-color: rgba(255, 255, 255, .3);
    border-top-color: #fff;
}

/* One class = one card floating on the blue */
.class-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 11px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 26, 43, .04);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.class-card:hover {
    border-color: #c9d6e6;
    box-shadow: 0 1px 2px rgba(16, 26, 43, .04), 0 12px 28px rgba(16, 26, 43, .1);
}
/* On the blue hero the cards float instead, so they drop the border */
.hero .class-card {
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(9, 25, 43, .1), 0 8px 22px rgba(9, 25, 43, .14);
}
.hero .class-card:hover {
    border-color: transparent;
    box-shadow: 0 2px 4px rgba(9, 25, 43, .12), 0 16px 34px rgba(9, 25, 43, .2);
}
.class-card,
.class-card:hover,
.class-card:focus {
    color: var(--ink);
    text-decoration: none;
}
.class-card:hover {
    transform: translateY(-2px);
}
.class-card:hover .class-go-arrow {
    transform: translateX(3px);
}

/* Calendar-style date tile */
.class-date {
    flex: 0 0 auto;
    width: 60px;
    padding: 8px 0 10px;
    border-radius: 12px;
    background: var(--tint);
    border: 1px solid var(--line);
    text-align: center;
}
.class-date-month {
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand-lift);
}
.class-date-day {
    display: block;
    margin-top: 1px;
    font-size: 23px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.8px;
    color: var(--ink);
}
.class-date-any .class-date-day {
    font-size: 18px;
    letter-spacing: -.4px;
}

.class-card-body {
    flex: 1 1 auto;
    min-width: 0;
}
.class-card-place {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand-lift);
}
.class-card-title {
    display: block;
    font-size: 17.5px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--ink);
}
.class-card-meta {
    display: block;
    margin-top: 3px;
    font-size: 13.5px;
    color: var(--ink-2);
}
.class-card-note {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--ink-3);
}
.class-card-action {
    flex: 0 0 auto;
}
.class-go {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 10px;
    background: var(--go);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .18s ease;
}
.class-card:hover .class-go {
    background: var(--go-dark);
}
.class-go-arrow {
    display: inline-block;
    margin-left: 3px;
    transition: transform .18s ease;
}
.class-pill {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 10px;
    background: var(--tint);
    border: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 12.5px;
    font-weight: 700;
}

/* A full class is still worth showing, but shouldn't invite a click */
.class-card.is-full {
    cursor: default;
    background: #f3f6f9;
    box-shadow: 0 1px 2px rgba(9, 25, 43, .08);
}
.class-card.is-full:hover {
    box-shadow: 0 1px 2px rgba(9, 25, 43, .08);
    transform: none;
}
.class-card.is-full .class-card-title,
.class-card.is-full .class-date-day {
    color: var(--ink-3);
}
.class-card.is-full .class-date {
    background: #eaeef3;
}

.class-card-online .class-date {
    background: #eef4fb;
    border-color: #d8e6f4;
}
.class-card-online .class-go {
    background: var(--brand-lift);
}
.class-card-online:hover .class-go {
    background: var(--brand);
}

/* --- Location groups --- */
.class-group + .class-group {
    margin-top: 22px;
}
.class-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 0 4px;
}
.class-group-name {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--ink-2);
}
.hero .class-group-name {
    color: rgba(255, 255, 255, .95);
}
.class-group-link,
.class-group-link:hover,
.class-group-link:focus {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-lift);
    text-decoration: none;
    white-space: nowrap;
}
.hero .class-group-link,
.hero .class-group-link:hover,
.hero .class-group-link:focus {
    color: rgba(255, 255, 255, .72);
}
.hero .class-group-link:hover {
    color: #fff;
}
.class-group-flag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ink-3);
}
.hero .class-group-flag {
    color: rgba(255, 255, 255, .72);
}

.class-empty {
    padding: 15px 18px;
    margin-bottom: 11px;
    border: 1px dashed #d9dfe8;
    border-radius: 14px;
    background: var(--tint);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-2);
}
.class-empty strong {
    color: var(--ink);
}
.class-empty a,
.class-empty a:hover,
.class-empty a:focus {
    color: var(--brand-lift);
    font-weight: 600;
    text-decoration: underline;
}
.hero .class-empty {
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85);
}
.hero .class-empty strong,
.hero .class-empty a,
.hero .class-empty a:hover,
.hero .class-empty a:focus {
    color: #fff;
}

/* --- Links --- */
.hero-link,
.hero-link:hover,
.hero-link:focus {
    color: var(--brand-lift);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.hero-link:hover {
    text-decoration: underline;
}

/* --- Sections below the hero --- */
.home-section {
    padding: 60px 0;
    background: #fff;
}
.home-band {
    padding: 60px 0;
    background: var(--tint);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.home-h2 {
    margin: 0 0 34px;
    text-align: center;
    font-size: 29px;
    font-weight: 800;
    letter-spacing: -.7px;
    color: var(--ink);
}

/* --- Video --- */
.home-video {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(16, 26, 43, .04), 0 16px 40px rgba(16, 26, 43, .09);
    background: #0b0f16;
}

/* --- Closing --- */
.home-contacts {
    max-width: 620px;
    margin: 0 auto;
}
.home-contact {
    padding: 22px 20px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    text-align: center;
}
.home-contact-name {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--brand-lift);
}
.home-contact-phone,
.home-contact-phone:hover,
.home-contact-phone:focus {
    display: block;
    margin: 6px 0 8px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--ink);
    text-decoration: none;
}
.home-closing-links {
    margin: 26px 0 0;
    text-align: center;
}
.home-btn,
.home-btn:hover,
.home-btn:focus {
    display: inline-block;
    margin: 0 5px 10px;
    padding: 12px 26px;
    border-radius: 11px;
    background: var(--brand);
    border: 1px solid var(--brand);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s ease;
}
.home-btn:hover,
.home-btn:focus {
    background: #1f4f79;
}
.home-btn-quiet,
.home-btn-quiet:hover,
.home-btn-quiet:focus {
    background: #fff;
    border-color: var(--line);
    color: var(--ink);
}
.home-btn-quiet:hover,
.home-btn-quiet:focus {
    background: #fff;
    border-color: #c9d6e6;
}

/* --- Small screens --- */
@media (max-width: 767px) {
    .hero {
        padding: 34px 0 40px;
    }
    .hero-head {
        margin-bottom: 30px;
    }
    .hero-title {
        font-size: 32px;
        letter-spacing: -1.1px;
    }
    .hero-lede {
        font-size: 15.5px;
    }
    .class-card {
        flex-wrap: wrap;
        gap: 13px;
        padding: 15px;
    }
    .class-card-body {
        flex: 1 1 55%;
    }
    .class-card-title {
        font-size: 16.5px;
    }
    .class-card-action {
        flex: 1 1 100%;
    }
    .class-go,
    .class-pill {
        display: block;
        text-align: center;
    }
    .home-section,
    .home-band {
        padding: 44px 0;
    }
    .home-h2 {
        font-size: 24px;
        margin-bottom: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .road-fill {
        transform: scaleY(1);
        animation: none;
    }
    .car {
        top: 89%;
        animation: none;
    }
    .finish,
    .step .step-num {
        background: #4ade80;
        border-color: #4ade80;
        color: #08341c;
        animation: none;
    }
}


/* =========================================================
   Sub-page shell — FAQ, requirements, drive tests, locations
   ========================================================= */

.page-head {
    padding: 34px 0 30px;
    background: #2a6496;
    background: linear-gradient(155deg, #3b86c4 0%, #2a6496 48%, #1b476d 100%);
    color: #fff;
}
.page-title {
    margin: 0;
    font-size: 34px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -1.1px;
    color: #fff;
}
.page-sub {
    margin: 10px 0 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .85);
}
.page-sub a,
.page-sub a:hover,
.page-sub a:focus {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    /* keep phone numbers from breaking across lines on narrow screens */
    white-space: nowrap;
}

/* Sub-navigation across a location's sections */
.page-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}
.page-nav a,
.page-nav a:hover,
.page-nav a:focus {
    display: block;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .92);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease;
}
.page-nav a:hover,
.page-nav a:focus {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .5);
}
.page-nav .is-current a,
.page-nav .is-current a:hover,
.page-nav .is-current a:focus {
    background: #fff;
    border-color: #fff;
    color: var(--brand);
}

.page-body {
    padding: 42px 0 62px;
    background: #fff;
}
.page-h2 {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--ink);
}
.page-h2 + .page-prose {
    margin-top: 0;
}
.page-section + .page-section {
    margin-top: 38px;
}

/* Body copy */
.page-prose p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink-2);
}
.page-prose p:last-child {
    margin-bottom: 0;
}
.page-prose b,
.page-prose strong {
    color: var(--ink);
    font-weight: 700;
}
.page-prose a,
.page-prose a:hover,
.page-prose a:focus {
    color: var(--brand-lift);
    font-weight: 600;
}
.page-narrow {
    max-width: 760px;
}

/* Q&A cards */
.qa {
    padding: 22px 24px;
    margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 26, 43, .04);
}
.qa-q {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ink);
}
.qa-a {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-2);
}

/* Sidebar */
.page-aside {
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--tint);
}
.page-aside-title {
    margin: 0 0 12px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--ink-3);
}
.page-aside p {
    margin: 0 0 6px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-2);
}
.page-aside a,
.page-aside a:hover,
.page-aside a:focus {
    color: var(--brand-lift);
    font-weight: 600;
}
.page-map {
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--tint);
    line-height: 0;
}
.page-map iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* Price rows */
.price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
    font-size: 14.5px;
    color: var(--ink-2);
}
.price-row:first-of-type {
    border-top: none;
}
.price-row b {
    color: var(--ink);
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}
/* the global `a { color: #fff }` would make these invisible on white */
.price-row a,
.price-row a:hover,
.price-row a:focus {
    color: var(--brand-lift);
    font-weight: 600;
}

/* Notice band */
.page-note {
    padding: 14px 18px;
    margin-bottom: 20px;
    border: 1px solid #d8e6f4;
    border-left: 3px solid var(--brand-lift);
    border-radius: 10px;
    background: #f2f7fc;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-2);
}

/* Route list on the "drives explained" section */
.route {
    padding: 16px 0;
    border-top: 1px solid var(--line);
}
.route:first-of-type {
    border-top: none;
    padding-top: 0;
}
.route-name {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
}
.route-focus {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--brand-lift);
}
.route-text {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-2);
}

/* Primary action */
.page-cta,
.page-cta:hover,
.page-cta:focus {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 11px;
    background: var(--go);
    border: 1px solid var(--go-dark);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .18s ease;
}
.page-cta:hover,
.page-cta:focus {
    background: var(--go-dark);
}

@media (max-width: 767px) {
    .page-head {
        padding: 26px 0 24px;
    }
    .page-title {
        font-size: 26px;
    }
    .page-body {
        padding: 32px 0 48px;
    }
    .page-nav a {
        font-size: 12.5px;
        padding: 6px 12px;
    }
}


/* =========================================================
   Location pages
   ========================================================= */

/* Wide class cards get more breathing room than the hero ones */
.class-card.is-wide {
    padding: 20px 22px;
    gap: 20px;
    margin-bottom: 12px;
}
.class-card.is-wide .class-date {
    width: 68px;
    padding: 10px 0 12px;
}
.class-card.is-wide .class-date-day {
    font-size: 26px;
}
.class-card.is-wide .class-card-title {
    font-size: 19px;
}

.page-body .class-list-head {
    margin-bottom: 18px;
}
.page-body .class-list-count {
    color: var(--ink-3);
}

.page-fineprint {
    max-width: 760px;
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-3);
}

/* Supporting info, demoted below the section content */
.page-foot {
    margin-top: 46px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}
.page-foot .page-aside-title {
    margin-bottom: 10px;
}
.page-foot .page-prose p {
    font-size: 14.5px;
    line-height: 1.65;
    margin-bottom: 10px;
}
.page-foot .price-row {
    font-size: 14px;
    padding: 8px 0;
}
.page-foot .price-row b {
    font-size: 15px;
}
.page-foot .page-map iframe {
    height: 220px;
}

@media (max-width: 991px) {
    .page-foot .page-map {
        margin-top: 20px;
    }
}
@media (max-width: 767px) {
    .class-card.is-wide {
        padding: 16px;
        gap: 13px;
    }
    .class-card.is-wide .class-date {
        width: 58px;
    }
}


/* =========================================================
   Site navigation
   ========================================================= */

.site-nav.navbar-fixed-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.site-nav {
    background-color: #2a6496;
    border: none;
    min-height: 100px;
    margin-bottom: 0;
}
.site-nav .navbar-brand {
    height: auto;
    padding: 14px 15px;
}
.site-nav .navbar-brand > img {
    display: block;
    height: 62px;
    width: auto;
}
.site-nav-list > li > a,
.site-nav-list > li > a:hover,
.site-nav-list > li > a:focus {
    color: #fff;
}

/* Hamburger — the Bootstrap default is grey on grey against this blue */
.site-nav .navbar-toggle {
    margin: 28px 0 0;
    padding: 10px 11px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 9px;
    background: rgba(255, 255, 255, .1);
    transition: background-color .18s ease, border-color .18s ease;
}
.site-nav .navbar-toggle:hover,
.site-nav .navbar-toggle:focus {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .7);
    outline: none;
}
.site-nav .navbar-toggle .icon-bar {
    background-color: #fff;
    width: 21px;
    height: 2px;
    border-radius: 2px;
}
.site-nav .navbar-toggle .icon-bar + .icon-bar {
    margin-top: 5px;
}

@media (min-width: 768px) {
    .site-nav-list {
        float: right;
        margin-top: 25px;
        font-size: 15pt;
    }
    .site-nav-list > li > a.site-nav-pay,
    .site-nav-list > li > a.site-nav-pay:hover,
    .site-nav-list > li > a.site-nav-pay:focus {
        padding: 11px 22px;
        margin-top: 4px;
        border-radius: 10px;
        background-color: #6F0101;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.4;
        white-space: nowrap;
        box-shadow: 0 1px 2px rgba(9, 25, 43, .25);
        transition: background-color .18s ease;
    }
    .site-nav-list > li > a.site-nav-pay:hover,
    .site-nav-list > li > a.site-nav-pay:focus {
        background-color: #8a0202;
    }
}

@media (max-width: 767px) {
    .site-nav {
        min-height: 0;
    }
    .site-nav .navbar-brand {
        padding: 12px 15px;
    }
    .site-nav .navbar-brand > img {
        height: 54px;
    }
    .site-nav .navbar-toggle {
        margin: 20px 0 0;
    }

    /* Full-bleed panel that pushes nothing — it sits under the fixed bar */
    .site-nav .navbar-collapse {
        margin: 0 -15px;
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, .18);
        background: #2a6496;
        box-shadow: 0 14px 26px rgba(9, 25, 43, .28);
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }

    /* Stack them: the desktop rules float the list right and make the
       items inline-block, which wrapped into ragged rows off-screen. */
    .site-nav-list {
        float: none;
        margin: 0;
    }
    .site-nav-list > li,
    .masthead-nav > li,
    .masthead-nav > li + li {
        display: block;
        margin-left: 0;
    }
    .site-nav-list > li > a,
    .masthead-nav > li > a {
        display: block;
        padding: 15px 20px;
        font-size: 16px;
        font-weight: 700;
        border-bottom: 1px solid rgba(255, 255, 255, .13);
        border-radius: 0;
    }
    .site-nav-list > li > a:hover,
    .site-nav-list > li > a:focus {
        background: rgba(255, 255, 255, .1);
    }

    .site-nav-pay-item {
        padding: 14px 20px 18px;
    }
    .site-nav-list > .site-nav-pay-item > a,
    .site-nav-list > .site-nav-pay-item > a:hover,
    .site-nav-list > .site-nav-pay-item > a:focus {
        padding: 14px 18px;
        border: none;
        border-radius: 10px;
        background-color: #6F0101;
        color: #fff;
        text-align: center;
    }
    .site-nav-list > .site-nav-pay-item > a:hover,
    .site-nav-list > .site-nav-pay-item > a:focus {
        background-color: #8a0202;
    }
}

/* Clicking a nav link left the browser's default focus ring boxed around it.
   Drop it for pointer clicks, keep a visible ring for keyboard users. */
.site-nav-list > li > a:focus,
.site-nav .navbar-brand:focus,
.site-nav .navbar-toggle:focus {
    outline: none;
}
.site-nav-list > li > a:focus-visible,
.site-nav .navbar-brand:focus-visible,
.site-nav .navbar-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 6px;
}