/* Smile Savers shared Treatment Studio-style masthead — v1.
   Load AFTER page styles via Views/Shared/_Layout.cshtml.
   Does not replace any hero, form, menu script or page-specific layout file.
   Do NOT remove existing home-masthead.css / hero-contact-layout.css spacing fixes. */

/* These selectors identify branding-only headers present in the supplied Views.zip.
   They deliberately do NOT target every <header>, heading or video. */
body.ss-shared-masthead-on > header.site-header,
body.ss-shared-masthead-on > header.studio-header,
body.ss-shared-masthead-on #ss-kaman-page .kaman-primary-hero > header.kaman-site-header,
body.ss-shared-masthead-on #ss-pricing-content #new-landing-page-central-column > .central_text_container:first-child > .vc_column-inner > .wpb_wrapper > .vc_row:first-child {
    display: none !important;
}

/* Retain the original floating menu; only match its button's approved surface. */
body.ss-shared-masthead-on > .ss-nav { z-index: 1100; }
body.ss-shared-masthead-on > .ss-nav .ss-nav__panel > summary {
    border-radius: 11px;
    border: 1px solid rgba(177,195,212,.58);
    background: rgba(255,255,255,.97);
    box-shadow: 0 4px 20px rgba(21,43,65,.10);
}

/* Isolate this component from legacy header/nav/p styles in individual page CSS. */
#ss-site-masthead,
#ss-site-intro {
    display: block;
    float: none;
    clear: both;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    inset: auto;
    transform: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-style: normal;
    text-align: left;
    text-transform: none;
}
#ss-site-masthead a { letter-spacing: normal; text-transform: none; }
#ss-site-masthead nav { position: static; width: auto; height: auto; margin: 0; padding: 0; float: none; background: none; border: 0; box-shadow: none; }
#ss-site-masthead img { margin: 0; padding: 0; border: 0; border-radius: 0; float: none; }
#ss-site-intro p { float: none; width: auto; padding: 0; border: 0; text-align: left; text-transform: none; background: none; }
#ss-site-intro strong { text-transform: none; }

#ss-site-masthead,
#ss-site-masthead *,
#ss-site-intro,
#ss-site-intro * { box-sizing: border-box; }
#ss-site-masthead {
    position: relative;
    z-index: 2;
    background: rgba(255,255,255,.985);
    color: #172c43;
    box-shadow: 0 7px 28px rgba(35,55,80,.045);
    isolation: isolate;
}
#ss-site-masthead::after {
    content: "";
    display: block;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg,#05b9dd 0%,#369cf0 18%,#7869d8 39%,#ec75ac 61%,#ff6f55 79%,#f6af22 100%);
}
#ss-site-masthead .ss-site-masthead__inner {
    min-height: 112px;
    max-width: 1480px;
    margin: 0 auto;
    padding: 14px 32px 14px 82px; /* left clearance for the existing floating burger */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: clamp(14px,2vw,30px);
}
#ss-site-masthead a { text-decoration: none; }
#ss-site-masthead .ss-site-masthead__logo {
    width: 130px;
    flex: 0 0 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 74px;
}
#ss-site-masthead .ss-site-masthead__logo img {
    display: block;
    width: 130px;
    height: auto;
    max-height: 76px;
    object-fit: contain;
}
#ss-site-masthead .ss-site-masthead__identity {
    min-width: 0;
    flex: 1 1 300px;
}
#ss-site-masthead .ss-site-masthead__name {
    font-weight: 740;
    line-height: 1.17;
    color: #182e47;
    letter-spacing: -.035em;
    font-size: clamp(21px, 2vw, 28px);
}
#ss-site-masthead .ss-site-masthead__tagline {
    color: #58718a;
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .22em;
    margin-top: 7px;
}
#ss-site-masthead .ss-site-masthead__quicklinks {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px 18px;
    font-size: 13px;
    font-weight: 600;
}
#ss-site-masthead .ss-site-masthead__quicklinks a { color: #405870; white-space: nowrap; }
#ss-site-masthead .ss-site-masthead__quicklinks a:hover,
#ss-site-masthead .ss-site-masthead__quicklinks a:focus-visible { color: #077eaf; text-decoration: underline; text-underline-offset: 4px; }
#ss-site-masthead .ss-site-masthead__quicklinks .ss-site-masthead__phone {
    color: #173a59;
    font-weight: 750;
}
#ss-site-masthead .ss-site-masthead__cta {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    padding: 12px 16px 12px 20px;
    background: #f7fafc;
    border: 1px solid #dbe5ee;
    border-radius: 100px;
    color: #173149;
    font-size: 13px;
    font-weight: 760;
    line-height: 1.25;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
#ss-site-masthead .ss-site-masthead__cta:hover,
#ss-site-masthead .ss-site-masthead__cta:focus-visible {
    background: #fff;
    border-color: #9ccbe5;
    color: #153d5d;
    box-shadow: 0 0 0 3px rgba(106,142,219,.08), 0 7px 23px rgba(55,127,198,.16);
    transform: translateY(-1px);
}
#ss-site-masthead .ss-site-masthead__arrow { font-size: 18px; font-weight: 400; line-height: 0; }

#ss-site-intro {
    position: relative;
    z-index: 1;
    background: linear-gradient(105deg, #f0f8fc 0%, #f5f8fd 44%, #fcf4f9 80%, #fff8f0 100%);
    color: #253d56;
    border-bottom: 1px solid rgba(196,210,223,.65);
}
#ss-site-intro .ss-site-intro__inner {
    max-width: 1400px;
    margin: auto;
    min-height: 156px;
    padding: 25px clamp(24px,5vw,72px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
#ss-site-intro .ss-site-intro__copy { flex: 1 1 auto; min-width: 0; }
#ss-site-intro .ss-site-intro__eyebrow {
    font-weight: 770;
    font-size: 10px;
    letter-spacing: .18em;
    color: #567393;
    line-height: 1.6;
    margin: 0 0 8px;
}
#ss-site-intro .ss-site-intro__eyebrow span { opacity: .6; margin: 0 5px; }
#ss-site-intro .ss-site-intro__heading {
    font-size: clamp(25px, 2.75vw, 37px);
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: -.045em;
    color: #182e47;
    margin: 0 0 9px;
}
#ss-site-intro .ss-site-intro__heading span {
    background: linear-gradient(95deg, #009cc9, #477bde 33%, #9870cf 57%, #e17f9e 80%, #e7932d);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #416eb2;
}
#ss-site-intro .ss-site-intro__description {
    margin: 0;
    max-width: 710px;
    font-size: 14px;
    line-height: 1.55;
    color: #566b80;
}
#ss-site-intro .ss-site-intro__proof {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    border-left: 1px solid rgba(132,163,193,.25);
    padding-left: clamp(16px,3vw,42px);
    gap: 20px;
}
#ss-site-intro .ss-site-intro__proof > div { min-width: 128px; }
#ss-site-intro .ss-site-intro__proof strong {
    display: block;
    color: #244b6a;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: -.02em;
}
#ss-site-intro .ss-site-intro__proof span {
    display: block;
    color: #61788e;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
}

/* Mobile: make room for the preserved floating burger, avoid links overrun. */
@media (max-width: 1120px) {
    #ss-site-masthead .ss-site-masthead__quicklinks a:not(.ss-site-masthead__phone) { display: none; }
    #ss-site-masthead .ss-site-masthead__inner { padding-right: 20px; }
    #ss-site-intro .ss-site-intro__proof { gap: 10px; padding-left: 20px; }
    #ss-site-intro .ss-site-intro__proof > div { min-width: 104px; }
}
@media (max-width: 790px) {
    #ss-site-masthead .ss-site-masthead__inner { min-height: 90px; padding: 12px 18px 12px 66px; gap: 15px; }
    #ss-site-masthead .ss-site-masthead__logo, #ss-site-masthead .ss-site-masthead__logo img { width: 91px; }
    #ss-site-masthead .ss-site-masthead__logo { flex-basis: 91px; min-height: 55px; }
    #ss-site-masthead .ss-site-masthead__tagline { letter-spacing: .09em; font-size: 9px; }
    #ss-site-masthead .ss-site-masthead__quicklinks { display: none; }
    #ss-site-intro .ss-site-intro__inner { min-height: 0; flex-direction: column; align-items: stretch; padding: 22px 24px; gap: 15px; }
    #ss-site-intro .ss-site-intro__proof { border-left: 0; padding-left: 0; border-top: 1px solid rgba(132,163,193,.25); padding-top: 13px; justify-content: flex-start; gap: 32px; }
}
@media (max-width: 560px) {
    #ss-site-masthead .ss-site-masthead__inner { min-height: 82px; gap: 8px; padding-right: 12px; }
    #ss-site-masthead .ss-site-masthead__logo, #ss-site-masthead .ss-site-masthead__logo img { width: 78px; }
    #ss-site-masthead .ss-site-masthead__logo { flex-basis: 78px; }
    #ss-site-masthead .ss-site-masthead__name { font-size: 18px; }
    #ss-site-masthead .ss-site-masthead__tagline { font-size: 8px; letter-spacing: .04em; }
    #ss-site-masthead .ss-site-masthead__cta { padding: 11px; gap: 0; }
    #ss-site-masthead .ss-site-masthead__cta span:first-child { display: none; }
    #ss-site-masthead .ss-site-masthead__arrow { font-size: 22px; line-height: 1; }
    #ss-site-intro .ss-site-intro__inner { padding: 18px; }
    #ss-site-intro .ss-site-intro__heading { font-size: clamp(25px, 7.5vw, 32px); }
    #ss-site-intro .ss-site-intro__eyebrow { letter-spacing: .09em; font-size: 9px; }
    #ss-site-intro .ss-site-intro__proof strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    #ss-site-masthead .ss-site-masthead__cta { transition: none !important; transform: none !important; }
}

/* Keyboard focus stays visible even on pages with their own link reset. */
#ss-site-masthead a:focus-visible {
    outline: 3px solid #007eaf;
    outline-offset: 4px;
}
#ss-site-masthead .ss-site-masthead__cta { min-height: 44px; min-width: 44px; justify-content: center; }
@media (forced-colors: active) {
    #ss-site-intro .ss-site-intro__heading span {
        background: none;
        -webkit-text-fill-color: CanvasText;
        color: CanvasText;
    }
}