/************************************ NYBS - NEW YORK BOAT SHOW 2027 ****************************************/
/*
    Scope   : views/themes/Material/nybs.hbs ONLY (pushed by the /nybs route in routes/index.js). Every
              selector sits under .nybs-page and every class is prefixed nybs-, so nothing here can reach
              another template, and the few site-wide rules that would bleed in (resets, .sale_new) are
              overridden explicitly below.
    Source  : "Strong's Marine - NY Boat Show 2027" design comp (1920px desktop artboard). Desktop values
              are the comp's; the comp is desktop-only, so the breakpoints at the end of each block are ours.
    Build   : standalone file, NOT part of the gulp CSS bundle (gulpfile.js lists its sources explicitly),
              so editing it needs no build step and cannot affect dist/css/styles.min.css.
    Assets  : /assets/nybs/ (referenced from nybs.hbs only, so the paths can be swapped for S3 in one place).
    HubSpot : the appointment form is created with css: "" (nybs.hbs), which drops HubSpot's theme and
              renders the form straight into #flibsAppointmentForm instead of an iframe, so section 7
              styles it from here. Bundle rules such as input.hs-button.primary.large (0,3,1) are beaten
              by specificity, not !important.
*/

/* ============================================================================
   0. TOKENS, SCOPED RESET AND LAYOUT PRIMITIVES
   ========================================================================== */
.nybs-page {
    --nybs-navy: #002468;
    --nybs-navy-deep: #001A4D;
    --nybs-indigo: #1E2253;
    --nybs-red: #B11F33;
    --nybs-red-dark: #961A2B;
    --nybs-link-hover: #1E4A9A;
    --nybs-muted: #4A5670;
    --nybs-bg-light: #F3F6FB;
    --nybs-line: #E3E8EF;
    --nybs-line-dark: #D5DCE8;
    --nybs-white: #FFFFFF;
    --nybs-gutter: 48px;
    --nybs-section-y: 140px;
    --nybs-anchor-offset: 120px; /* clearance for in-page #anchor jumps (sections, brand groups, form) */
    font-family: 'Open Sans', sans-serif;
    color: var(--nybs-navy);
    background: var(--nybs-white);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}
/* :where() keeps the reset at the specificity of .nybs-page alone, so every nybs- class below
   wins over it while it still beats Bootstrap's and the site bundle's bare element rules. */
.nybs-page :where(*, *::before, *::after) { box-sizing: border-box; }
.nybs-page :where(h1, h2, h3, p, ul, dl, dd) { margin: 0; padding: 0; font-family: inherit; }
.nybs-page :where(a) { color: inherit; text-decoration: none; }
.nybs-page a:hover { text-decoration: none; }
.nybs-page :where(img) { display: block; max-width: 100%; height: auto; }
.nybs-page :where(button) { font-family: inherit; }
.nybs-section[id] { scroll-margin-top: var(--nybs-anchor-offset); }

.nybs-container {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 var(--nybs-gutter);
}
.nybs-section { padding: var(--nybs-section-y) 0; }
.nybs-section--light { background: var(--nybs-bg-light); }
.nybs-section--dark { background: var(--nybs-indigo); color: var(--nybs-white); }
.nybs-section-head { text-align: center; }

/* Type */
.nybs-eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--nybs-red);
}
.nybs-section--dark .nybs-eyebrow { color: rgba(255, 255, 255, 0.6); }
.nybs-heading {
    margin-top: 18px;
    font-size: clamp(34px, 3.4vw, 64px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.nybs-lead {
    margin-top: 28px;
    font-size: 19px;
    line-height: 1.65;
    color: var(--nybs-muted);
}

/* Buttons */
.nybs-btn {
    display: inline-block;
    padding: 20px 36px;
    border-radius: 4px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.nybs-btn--red { background: var(--nybs-red); color: var(--nybs-white); }
.nybs-btn--red:hover { background: var(--nybs-red-dark); color: var(--nybs-white); }
.nybs-btn--navy { background: var(--nybs-navy); color: var(--nybs-white); }
.nybs-btn--navy:hover { background: var(--nybs-link-hover); color: var(--nybs-white); }
.nybs-btn--outline-white {
    padding: 19px 36px;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    color: var(--nybs-white);
}
.nybs-btn--outline-white:hover { background: rgba(255, 255, 255, 0.12); color: var(--nybs-white); }
.nybs-btn--outline-navy {
    padding: 19px 32px;
    border: 1.5px solid var(--nybs-navy);
    color: var(--nybs-navy);
}
.nybs-btn--outline-navy:hover { background: var(--nybs-navy); color: var(--nybs-white); }
.nybs-btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* Media tile: poster + play button that becomes a <video> or a YouTube iframe on click */
.nybs-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--nybs-navy-deep);
}
.nybs-media > video,
.nybs-media > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}
.nybs-media-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.nybs-media-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nybs-media-poster--top img,
.nybs-media--top > video { object-position: center 30%; }
.nybs-media-shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 20, 60, 0.12);
}
.nybs-media--dim .nybs-media-shade { background: rgba(0, 20, 60, 0.25); }
.nybs-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: var(--nybs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, -50%);
    transition: transform 0.2s;
}
.nybs-play--sm { width: 96px; height: 96px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.nybs-media-poster:hover .nybs-play { transform: translate(-50%, -50%) scale(1.06); }
.nybs-media.is-playing .nybs-media-poster { display: none; }

@media (max-width: 1199px) {
    .nybs-page { --nybs-gutter: 32px; --nybs-section-y: 96px; }
}
@media (max-width: 767px) {
    .nybs-page { --nybs-gutter: 20px; --nybs-section-y: 64px; }
    .nybs-lead { font-size: 17px; }
    .nybs-play { width: 72px; height: 72px; }
    .nybs-play--sm { width: 64px; height: 64px; }
    .nybs-play svg { width: 24px; height: 27px; }
}
@media (max-width: 575px) {
    .nybs-btn { padding: 16px 24px; font-size: 15px; }
    .nybs-btn--outline-white,
    .nybs-btn--outline-navy { padding: 15px 24px; }
    .nybs-btn-row .nybs-btn { flex: 1 1 auto; }
}

/* ============================================================================
   1. HERO
   ========================================================================== */
.nybs-hero {
    position: relative;
    min-height: clamp(560px, 48vw, 920px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--nybs-navy-deep);
    color: var(--nybs-white);
}
.nybs-hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}
.nybs-hero-shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 20, 60, 0.88) 0%, rgba(0, 20, 60, 0.62) 45%, rgba(0, 20, 60, 0.2) 80%);
}
.nybs-hero-content {
    position: relative;
    padding-top: 80px;
    padding-bottom: 120px;
}
.nybs-hero-kicker {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}
.nybs-hero-kicker::before {
    content: "";
    flex: 0 0 56px;
    height: 2px;
    background: var(--nybs-red);
}
.nybs-hero-title {
    max-width: 1200px;
    font-size: clamp(56px, 7.75vw, 148px);
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -0.03em;
}
.nybs-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 40px;
    margin-top: 40px;
    font-size: clamp(20px, 1.7vw, 32px);
    font-weight: 700;
}
.nybs-hero-meta-divider {
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.45);
}
.nybs-hero-venue { font-weight: 500; color: rgba(255, 255, 255, 0.9); }
.nybs-hero-text {
    margin-top: 28px;
    max-width: 760px;
    font-size: 20px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}
.nybs-hero .nybs-btn-row { margin-top: 44px; }

@media (max-width: 1199px) {
    .nybs-hero-content { padding-bottom: 72px; }
    .nybs-hero-text { font-size: 18px; }
}
@media (max-width: 575px) {
    .nybs-hero-content { padding-top: 56px; padding-bottom: 56px; }
    .nybs-hero-kicker { font-size: 12px; letter-spacing: 0.2em; margin-bottom: 20px; }
    .nybs-hero-kicker::before { flex-basis: 32px; }
    .nybs-hero-meta { gap: 10px 20px; margin-top: 28px; }
    .nybs-hero-meta-divider { display: none; }
    .nybs-hero-venue { flex-basis: 100%; }
    .nybs-hero-text { margin-top: 20px; font-size: 16px; }
    .nybs-hero .nybs-btn-row { margin-top: 32px; }
}

/* ============================================================================
   2. DATES / HOURS / LOCATION / PHONE STRIP
   ========================================================================== */
.nybs-info { border-bottom: 1px solid var(--nybs-line); }
.nybs-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.nybs-info-cell {
    padding: 48px 40px;
    border-right: 1px solid var(--nybs-line);
}
.nybs-info-cell:first-child { padding-left: 0; }
.nybs-info-cell:last-child { padding-right: 0; border-right: 0; }
.nybs-info-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nybs-red);
}
.nybs-info-value {
    display: block;
    margin-top: 14px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
}
.nybs-info-value--venue { font-size: 22px; }
a.nybs-info-value:hover { color: var(--nybs-link-hover); }
.nybs-info-sub {
    margin-top: 6px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--nybs-muted);
}
.nybs-info-hours {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 24px;
    margin-top: 14px;
    font-size: 17px;
}
.nybs-info-hours dt { font-weight: 700; }

@media (max-width: 1199px) {
    .nybs-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nybs-info-cell { padding: 36px 32px; }
    .nybs-info-cell:nth-child(2n + 1) { padding-left: 0; }
    .nybs-info-cell:nth-child(2n) { padding-right: 0; border-right: 0; }
    .nybs-info-cell:nth-child(-n + 2) { border-bottom: 1px solid var(--nybs-line); }
    .nybs-info-value { font-size: 24px; }
}
@media (max-width: 639px) {
    .nybs-info-grid { grid-template-columns: minmax(0, 1fr); }
    .nybs-info-cell {
        padding: 28px 0;
        border-right: 0;
        border-bottom: 1px solid var(--nybs-line);
    }
    .nybs-info-cell:last-child { border-bottom: 0; }
}

/* ============================================================================
   3. SAVINGS (text + YouTube) AND WHY BUY BEFORE DAY ONE (image + checklist)
   ========================================================================== */
.nybs-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 80px;
}
.nybs-savings-text { flex: 1 1 520px; min-width: 0; }
.nybs-savings-text .nybs-lead { max-width: 600px; }
.nybs-savings-text .nybs-btn-row { margin-top: 40px; }
.nybs-savings-media { flex: 1.15 1 640px; min-width: 0; }

.nybs-why-media {
    position: relative;
    flex: 1 1 640px;
    min-width: 0;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: #DCE2EA;
}
.nybs-why-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nybs-why-text { flex: 1 1 560px; min-width: 0; }
.nybs-why-text .nybs-heading { font-size: clamp(32px, 2.95vw, 56px); line-height: 1.08; }
.nybs-why-text p {
    margin-top: 28px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--nybs-muted);
}
.nybs-checklist {
    margin-top: 36px;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
}
.nybs-checklist li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}
.nybs-check {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--nybs-red);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nybs-why-text .nybs-btn { margin-top: 44px; }

/* The comp's flex-basis values only sit side by side from ~1380px; narrower laptops keep two columns. */
@media (max-width: 1440px) {
    .nybs-split { gap: 56px; }
    .nybs-savings-text { flex-basis: 440px; }
    .nybs-savings-media { flex-basis: 520px; }
    .nybs-why-media { flex-basis: 480px; }
    .nybs-why-text { flex-basis: 460px; }
}
@media (max-width: 991px) {
    .nybs-split { gap: 48px; }
    .nybs-why-text p { font-size: 17px; }
}
@media (max-width: 575px) {
    .nybs-split { gap: 32px; }
    .nybs-checklist { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .nybs-checklist li { font-size: 16px; }
}

/* ============================================================================
   4. BRANDS ON DISPLAY
   ========================================================================== */
.nybs-brands {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 64px;
}
.nybs-brand {
    position: relative;
    flex: 1 1 calc(33.333% - 16px);
    min-width: 320px;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    background: var(--nybs-navy-deep);
}
.nybs-brand--wide { flex-basis: calc(50% - 12px); }
.nybs-brand-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nybs-brand-shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 20, 60, 0.45);
}
.nybs-brand-logo { position: relative; width: 270px; height: auto; }
.nybs-brand-logo--lg { width: 300px; }
.nybs-brand-logo--cruisers { width: 260px; }
.nybs-brands-note {
    margin: 56px auto 0;
    max-width: 820px;
    text-align: center;
    font-size: 17px;
    line-height: 1.6;
    color: var(--nybs-muted);
}
.nybs-brands-note a { font-weight: 700; color: var(--nybs-navy); }
.nybs-brands-note a:hover { color: var(--nybs-link-hover); }

@media (max-width: 991px) {
    .nybs-brands { margin-top: 40px; }
    .nybs-brand { height: 320px; }
}
@media (max-width: 575px) {
    .nybs-brand { min-width: 100%; height: 220px; }
    .nybs-brand-logo { width: 55%; max-width: 220px; }
    .nybs-brands-note { margin-top: 32px; font-size: 16px; }
}

/* ============================================================================
   5. VIDEOS: BOAT SHOW CHAMPION + A MESSAGE FROM JEFF
   ========================================================================== */
.nybs-videos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
    gap: 32px;
    margin-top: 64px;
}
.nybs-video-title {
    margin-top: 28px;
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nybs-video-text {
    margin-top: 10px;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 1199px) {
    .nybs-videos { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
}
@media (max-width: 991px) {
    .nybs-videos { margin-top: 40px; }
}
@media (max-width: 575px) {
    .nybs-video-title { margin-top: 18px; font-size: 22px; }
    .nybs-video-text { font-size: 16px; }
}

/* ============================================================================
   6. INVENTORY ON DISPLAY
   ========================================================================== */
.nybs-inventory { padding-bottom: 60px; }
.nybs-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 96px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--nybs-line-dark);
    scroll-margin-top: var(--nybs-anchor-offset);
}
.nybs-section-head + .nybs-group .nybs-group-head { margin-top: 80px; }
.nybs-group-title {
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.nybs-group-count {
    font-size: 15px;
    font-weight: 600;
    color: var(--nybs-muted);
    white-space: nowrap;
}
.nybs-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 40px 24px;
    margin-top: 36px;
}
.nybs-card,
.nybs-card:hover { display: block; color: var(--nybs-navy); }
.nybs-card-media { position: relative; display: block; }
.nybs-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 6px;
}
.nybs-card-placeholder {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 0 16px;
    border-radius: 6px;
    background: var(--nybs-indigo);
    color: var(--nybs-white);
    text-align: center;
}
.nybs-card-placeholder-name {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.nybs-card-placeholder-note {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}
.nybs-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 12px;
    border-radius: 3px;
    background: var(--nybs-red);
    color: var(--nybs-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.nybs-card-title {
    display: block;
    margin-top: 18px;
    font-size: 20px;
    font-weight: 700;
}
.nybs-card:hover .nybs-card-title { color: var(--nybs-link-hover); }
/* "Call For Pricing" / "More Info Coming Soon" default; an MSRP line (helper output
   "MSRP: <span class=sale_new>$x</span>") is grey, struck through, with the amount in navy. */
.nybs-card-price {
    display: block;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nybs-red);
}
.nybs-card-price:has(.sale_new) {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--nybs-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.nybs-page .sale_new { color: var(--nybs-navy); font-weight: 700; text-decoration: none; }

@media (max-width: 991px) {
    .nybs-group-head { margin-top: 64px; }
    .nybs-section-head + .nybs-group .nybs-group-head { margin-top: 48px; }
    .nybs-group-title { font-size: 26px; }
}
@media (max-width: 575px) {
    .nybs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .nybs-card-title { margin-top: 12px; font-size: 16px; }
    .nybs-card-price { font-size: 14px; }
    .nybs-card-badge { top: 8px; left: 8px; padding: 5px 8px; font-size: 10px; }
    .nybs-card-placeholder { padding: 36px 12px 12px; }
    .nybs-card-placeholder-name { font-size: 16px; }
    .nybs-card-placeholder-note { font-size: 10px; }
}

/* ============================================================================
   7. APPOINTMENT (intro + HubSpot form card)
   ========================================================================== */
.nybs-appt { display: flex; flex-wrap: wrap; gap: 80px; }
.nybs-appt-intro { flex: 1 1 480px; min-width: 0; }
.nybs-appt-logo { width: 400px; max-width: 100%; margin-bottom: 40px; }
.nybs-appt-intro .nybs-heading { font-size: clamp(34px, 3.15vw, 60px); line-height: 1.06; }
.nybs-appt-intro .nybs-lead { max-width: 560px; }
.nybs-appt-phone {
    display: inline-block;
    margin-top: 32px;
    font-size: 20px;
    font-weight: 700;
    color: var(--nybs-navy);
}
.nybs-appt-phone:hover { color: var(--nybs-link-hover); }
.nybs-appt-form {
    flex: 1.2 1 640px;
    min-width: 0;
    padding: 56px;
    border-radius: 8px;
    background: var(--nybs-white);
    scroll-margin-top: var(--nybs-anchor-offset);
}

/* HubSpot markup: form > .hs-form-field (label + .input > .hs-input) ... .hs_submit > .actions > .hs-button */
.nybs-appt-form .hs-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
/* The form's own "Make your Appointment..." text repeats the heading on the left, and the
   submission target iframe must never take a grid cell. */
.nybs-appt-form .hs-form > :has(> .hs-richtext),
.nybs-appt-form .hs-form > iframe { display: none; }
.nybs-appt-form .hs-form fieldset { display: contents; }
.nybs-appt-form .hs-form-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.nybs-appt-form .hs-form-field > label {
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--nybs-navy);
}
.nybs-appt-form .hs-input {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border: 1px solid #C3CDE0;
    border-radius: 4px;
    background: var(--nybs-white);
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    color: var(--nybs-navy);
    outline: none;
}
.nybs-appt-form .hs-input:focus { border-color: var(--nybs-navy); }
.nybs-appt-form .hs-input.invalid,
.nybs-appt-form .hs-input.error { border-color: var(--nybs-red); }
.nybs-appt-form textarea.hs-input { height: auto; min-height: 128px; padding: 14px 16px; resize: vertical; }
.nybs-appt-form .hs_othersfield,
.nybs-appt-form .hs_submit,
.nybs-appt-form .hs_recaptcha,
.nybs-appt-form .hs_error_rollup,
.nybs-appt-form .legal-consent-container { grid-column: 1 / -1; }
.nybs-appt-form .hs-error-msgs { margin: 0; padding: 0; list-style: none; }
.nybs-appt-form .hs-error-msg {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--nybs-red);
}
.nybs-appt-form .hs_submit .actions { text-align: left; }
.nybs-page .nybs-appt-form .actions input.hs-button {
    width: 100%;
    height: 64px;
    margin: 0;
    padding: 0 24px;
    border: 0;
    border-radius: 4px;
    background: var(--nybs-red);
    color: var(--nybs-white);
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}
.nybs-page .nybs-appt-form .actions input.hs-button:hover { background: var(--nybs-red-dark); }
.nybs-appt-form .submitted-message { font-size: 18px; line-height: 1.6; }

@media (max-width: 1440px) {
    .nybs-appt { gap: 56px; }
    .nybs-appt-intro { flex-basis: 400px; }
    .nybs-appt-form { flex-basis: 520px; }
}
@media (max-width: 991px) {
    .nybs-appt { gap: 48px; }
    .nybs-appt-form { padding: 40px 32px; }
}
@media (max-width: 575px) {
    .nybs-appt { gap: 32px; }
    .nybs-appt-logo { margin-bottom: 28px; }
    .nybs-appt-form { padding: 28px 20px; }
    .nybs-appt-form .hs-form { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}