/* Rebuild additions: replaces behaviour that webflow.js / IX2 used to provide. */
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 10000; padding: .75rem 1rem; background: #fff; color: #0b1a2b; font: 600 1rem/1 Inter, sans-serif; }
.skip-link:focus { top: 1rem; }

/* Content reveal (see scripts/reveal.ts): opacity plus 16px rise, 500ms ease-out, once. */
.js-reveal [data-reveal] { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .5s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms), transform .5s cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }


/* Menu button is a real <button> now. */
button.navbar19_menu-button { background: none; border: 0; cursor: pointer; color: inherit; }
.navbar19_menu-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Two-line toggle: the button is exactly as wide as the lines so its right edge sits on the nav's
   right edge and the CTA gap reads the same as phone-to-CTA; ::before widens the tap target. */
.navbar19_menu-button { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 44px; margin: 0; padding: 0; }
.navbar19_menu-button::before { content: ""; position: absolute; inset: 0 -8px; }
.nav-toggle { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; width: 28px; }
.nav-toggle-line { display: block; width: 28px; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s cubic-bezier(.65, 0, .35, 1), width .3s cubic-bezier(.65, 0, .35, 1); }
.nav-toggle-line:last-child { width: 18px; }
.navbar19_menu-button:hover .nav-toggle-line:last-child { width: 28px; }
.is-open .nav-toggle-line:first-child { transform: translateY(4.5px) rotate(45deg); }
.is-open .nav-toggle-line:last-child { width: 28px; transform: translateY(-4.5px) rotate(-45deg); }

/* Open menu: full-screen panel under the bar (was Webflow's w-nav-overlay). */
/* The panel sits outside .navbar19_container (whose floating transform/backdrop-filter would trap a fixed child),
   and nothing on the bar may be a containing block while it shows, so it is always viewport-sized.
   site-chrome.ts animates its clip-path from the bar out to the full screen and back. */
.navbar19_component:is(.is-open, .is-closing) {
  background-color: #061730;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  z-index: 1000;
}
.navbar19_component:is(.is-open, .is-closing) .w-nav-menu { display: block; position: fixed; inset: 0; height: auto; z-index: -1; will-change: clip-path; overflow: auto; }
.navbar19_component.is-open :is(.nav-links, .nav-phone) { visibility: hidden; }
/* The panel (z -1) still paints ABOVE the component's own background inside its stacking context, so the bar row itself carries the navy and sits above the panel. */
.navbar19_component:is(.is-open, .is-closing) .navbar19_container { position: relative; z-index: 1; background-color: #061730; }
/* Announcement bar stays above the scrolling menu panel and matches its navy */
html.menu-open { overflow: hidden; }
html.menu-open .utility-bar {
  position: relative;
  z-index: 1001;
  background-color: #061730;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* bugfix: horizontal scroll at 1024 (pricing grid) and 390 (legal nav); same ratios, tracks may shrink */
.pricing-grid > *, .pricing-grid-2 > *, .faq-layout > * { min-width: 0; }
.pricing-grid, .pricing-grid-2 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 1199px) { .pricing-grid, .pricing-grid-2 { gap: 64px; } }
@media (max-width: 991px) { .pricing-grid, .pricing-grid-2, .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 56px; } }
/* bugfix: Webflow exported an invalid process-rail track list (repeat(auto-fit, undefinedundefined)); last step overflowed at 1024 */
@media (min-width: 992px) { .process-rail, .process-rail-4 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .process-rail > *, .process-rail-4 > * { min-width: 0; } }
/* bugfix: long email addresses in legal copy overflowed at 390 */
.faq-answers a[href^="mailto:"], .faq-answers a { overflow-wrap: anywhere; }
picture{display:contents}
picture>source{display:none!important}
:where(img[data-a]){width:auto;height:auto}
.yt-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;overflow:hidden}
.yt-facade img{width:100%;height:100%;object-fit:cover;display:block}
.yt-facade_play{position:absolute;left:50%;top:50%;width:68px;height:48px;transform:translate(-50%,-50%);border-radius:12px;background:rgba(23,23,23,.8);transition:background-color .2s}
.yt-facade_play::after{content:"";position:absolute;left:27px;top:14px;border-style:solid;border-width:10px 0 10px 17px;border-color:transparent transparent transparent #fff}
.yt-facade:hover .yt-facade_play,.yt-facade:focus-visible .yt-facade_play{background:#f00}
.yt-facade:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.w-video .embedly-embed{position:absolute;inset:0;width:100%;height:100%}
#sbh-bg-brand{background-image:url('/images/stuart-boatworks-hero-center-console-1440.webp')}
@media (min-width:1440px){#sbh-bg-brand{background-image:url('/images/stuart-boatworks-hero-center-console-1920.webp')}}
[id]{scroll-margin-top:120px !important}
/* Section spacing tokens (dominant values: 120px desktop, 56px at 991px and below). Shared by .section and the home page sections. */
:root{--section-pad-y:120px}
@media (max-width:991px){:root{--section-pad-y:56px}}
.section,.section-2,.models,.final-cta,.why,.owners,.preowned,.process{padding-top:var(--section-pad-y);padding-bottom:var(--section-pad-y)}
/* same-colour neighbour under the navy sub-hero: no doubled padding */
.section--navy-2.half-top-pad{padding-top:0}
/* bugfix: single-column grids sized their track to min-content and pushed content past the viewport at 320 to 375 */
@media (max-width:767px){.final-cta-grid,.final-cta-grid-2,.process-header,.contact-grid,.section-header,.section-header-2,.specs-cta,.specs-cta-2{grid-template-columns:minmax(0,1fr)}.final-cta-grid>*,.final-cta-grid-2>*,.process-header>*,.contact-grid>*,.section-header>*,.section-header-2>*,.specs-cta>*,.specs-cta-2>*{min-width:0}}
@media (max-width:767px){.final-cta-inner{grid-template-columns:minmax(0,1fr)}.final-cta-inner>*{min-width:0}}
/* bugfix: long email in the contact card pushed the card past the viewport at 320 */
.contact-card-text{min-width:0}.contact-card-meta{overflow-wrap:anywhere}
/* bugfix: home hero buttons ran off the right edge at 320 to 375; stack them on narrow phones */
@media (max-width:400px){.sbh-strip .sbh-actions{flex-direction:column}.sbh-strip .sbh-btn{flex:none}}
/* bugfix: footer brand block and tagline ran 10px past the content edge at 320 */
.footer-brand{min-width:0}.footer-brand-tagline{max-width:min(280px,100%)}
/* bugfix at 320 to 400: big single words (CONVERSATION, EXCEPTIONALLY) overflowed; hero fact labels overlapped */
@media (max-width:479px){.process-title{font-size:min(60px,15vw)}.overbuild-statement{font-size:min(48px,13.4vw)}}
@media (max-width:400px){.sbh-readout--fact{flex-wrap:wrap;row-gap:14px}.sbh-readout--fact .sbh-cell{flex:1 1 50%}.sbh-readout--fact .sbh-cell:nth-child(2n){border-right:0}}
@media (max-width:479px){.process-title-thin{font-size:inherit}.section-title-2-2{font-size:min(68px,19vw)}}
.footer-grid>*{min-width:0}
/* decorative 250px ghost numeral pushed the page sideways at 320 */
.towing{overflow-x:clip}
/* tap targets: footer social icons were 32px; 44px hit area, same 44px icon pitch (gap folded into the box) */
.footer-social{gap:0;margin-left:-6px}.footer-social>a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.footer-col-link{overflow-wrap:anywhere}
/* Same-colour neighbours: the lower section drops its top padding so the gap is one token, not two */
:is(.section--navy,.section--navy-2)+:is(.section--navy,.section--navy-2),:is(.section--linen,.section--linen-2)+:is(.section--linen,.section--linen-2){padding-top:0}
/* Trailing margins inside sections (Webflow p/figure/w-form defaults) made bottom padding read 10 to 80px larger than top */
:is(.section,.section-2,.final-cta,.owners,.why,.process,.models,.preowned) :is(p,figure,.w-form,.owners-grid-2):last-child{margin-bottom:0}
.faq-group:last-child>.faq-item:last-child{padding-bottom:0}
/* same rule across the hidden .section.section--linen blocks on the model pages */
:is(.section--navy,.section--navy-2)+.section.section--linen+:is(.section--navy,.section--navy-2),:is(.section--navy,.section--navy-2)+.section.section--linen+.section.section--linen+:is(.section--navy,.section--navy-2){padding-top:0}
@media (max-width:991px){.origin-story{padding-bottom:0}}
/* bugfix: nav labels wrapped onto two lines ("THE / 23") from 992 to 1150 because the links could shrink; keep each on one line and tighten the bar instead */
.nav-links-link{white-space:nowrap}
@media (min-width:992px) and (max-width:1199px){.navbar19_container{padding-left:32px;padding-right:32px}.nav-links{gap:24px;padding:0 16px}.nav-links-link{font-size:13px;letter-spacing:.14em}.nav-cta-wrap{gap:16px}}
@media (min-width:992px) and (max-width:1099px){.nav-phone span:not(.phone-icon){display:none}}
/* bugfix: home hero buttons were pushed past the right edge from 861 to 1150; the fact readout can now shrink */
.sbh-readout{min-width:0}
@media (min-width:861px) and (max-width:1199px){.sbh-strip-inner{flex-wrap:wrap;row-gap:20px;gap:32px;padding-left:32px;padding-right:32px}.sbh-strip-divider--actions{display:none}.sbh-strip .sbh-actions{flex:1 1 100%;flex-direction:row}.sbh-strip .sbh-btn{flex:1}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* home pre-owned alert: was a fake div input; now a real form */
.preowned-footer-form{flex-wrap:wrap;margin:0}
input.preowned-footer-input{margin:0;border-radius:0;font-family:inherit}
input.preowned-footer-input:focus{outline:none;border-color:#0b2545}
.preowned-footer-btn{cursor:pointer}
.preowned-footer-btn:focus-visible{outline:2px solid #0b2545;outline-offset:2px}
/* bugfix: these two set Arial directly */
.testimonial-quote,.heritage-body{font-family:Inter,sans-serif}
/* bugfix: Webflow's base body font was Arial, so every paragraph not given its own family rendered in Arial; the brand body face is Inter (self-hosted, preloaded) */
body,input,select,textarea,button{font-family:Inter,"Helvetica Neue",Arial,sans-serif}
/* equipment lists: stray space before commas (margin on the bold lead-in) and markers centred on two-line items */
.equipment-item-text-item-2{margin-right:0}
.equipment-item-2{align-items:start}.equipment-item-marker-2{margin-top:10px}
/* footer email split mid-word in the half-width contact column on phones; give that column the full row */
@media (max-width:479px){.footer-grid>:last-child{grid-column:1/-1}}
/* engine cards: the top-speed row's bottom rule and the stats grid's top rule stacked 24px apart */
.power-perf-cell:nth-child(-n+2),.power-perf-cell-2:nth-child(-n+2){border-top:0}
/* home model cards: in the 2x2 spec grid only the first cell was flush left and the right column kept a divider at the card edge */
@media (max-width:991px){.model-spec:nth-child(odd){padding-left:0}.model-spec:nth-child(even){border-right:0;padding-right:0}.model-spec:nth-last-child(-n+2){border-bottom:0}}
/* walk-the-boat captions: the gradient began fully clear right behind the small label, which then sat on bright photo; start the scrim higher and darker */
.walk-tile-caption,.walk-tile-caption-2{padding-top:72px;background:linear-gradient(180deg,rgba(6,23,48,0) 0%,rgba(6,23,48,.55) 45%,rgba(6,23,48,.88) 100%)}
/* videos: the navy button sat on a navy section and read as disabled; invert it on dark backgrounds */
:is(.section--navy,.section--navy-2) .btn--navy{background-color:#fff;color:#0b2545;border-color:#fff}
@media (hover:hover){:is(.section--navy,.section--navy-2) .btn--navy:hover{background-color:transparent;color:#fff}}
/* phone heroes: copy spans the full width and sits mid-image, where the overlay was lightest (30%); hold contrast through the middle */
@media (max-width:767px){.page-hero-overlay,.page-hero-overlay-2,.about-hero-overlay{background:linear-gradient(180deg,rgba(11,37,69,.5) 0%,rgba(6,23,48,.62) 40%,rgba(6,23,48,.9) 100%)}.page-hero-tagline,.about-hero-sub{text-shadow:0 1px 12px rgba(6,23,48,.6)}}
/* price factor lists: every row sized its chip column to its own label, so the text started at a different x on each row; share one column */
.pricing-factors-list,.pricing-factors-list-2{display:grid;grid-template-columns:max-content minmax(0,1fr)}
.pricing-factor,.pricing-factor-2{grid-column:1/-1;grid-template-columns:subgrid}
.pricing-factor-label,.pricing-factor-label-2{justify-self:start}
/* keyboard focus: Webflow's base strips outlines in places; give every interactive element one clear ring */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid #6fa8dc;outline-offset:3px}
@media (max-width:479px){.pricing-factors-list,.pricing-factors-list-2{display:flex}.pricing-factor,.pricing-factor-2{grid-template-columns:minmax(0,1fr);gap:8px}}
/* footer and menu column labels were <h5> (heading outline jumped h2 to h5 on every page); now <p>, same box as before */
p.footer-col-heading{margin-top:10px;line-height:20px}
/* headings: balance line lengths so short words do not strand on their own line */
h1,h2,h3,h4{text-wrap:balance}

/* Nav right side: one gap between phone, CTA and toggle at every width */
.nav-cta-wrap { gap: 24px; }
@media (max-width: 1199px) { .nav-cta-wrap { gap: 20px; } }
@media (max-width: 479px) { .nav-cta-wrap { gap: 16px; } }

/* Open menu: content shares the nav container's max width and side padding, so the menu's left and
   right edges line up with the logo and the toggle at every breakpoint. */
.navbar19_menu { padding-left: 0; padding-right: 0; }
.navbar19_menu-wrapper { box-sizing: border-box; width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: 48px; padding-right: 48px; }
@media (min-width: 992px) and (max-width: 1199px) { .navbar19_menu-wrapper { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 991px) { .navbar19_menu-wrapper { padding-left: 24px; padding-right: 24px; } }

/* Menu hover states: an underline that draws in from the left, plus muted links brightening to white */
.navbar19_link-large, .navbar19_link-small, .navbar19_menu .footer-contact-value > :not(.footer-col-link) { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .25s ease, background-size .35s cubic-bezier(.65, 0, .35, 1); }
.navbar19_link-large { display: inline-block; justify-self: start; padding: 0; margin: .5rem 0; background-size: 0 2px; }
.navbar19_link-small { display: inline-block; padding: 0; margin: .5rem 0; }
.navbar19_link-large:hover { background-size: 100% 2px; }
.navbar19_link-small:hover, .navbar19_menu .footer-contact-block:hover .footer-contact-value > :not(.footer-col-link) { color: #fff; background-size: 100% 1px; }
.navbar19_menu .footer-contact-value > * { width: fit-content; }
.navbar19_menu .footer-contact-block .footer-col-link { text-decoration: none; transition: color .25s ease, border-color .25s ease; }
.navbar19_menu .footer-contact-block:hover .footer-col-link { color: #fff; border-bottom-color: #fff; }
.navbar19_menu .footer-social a { transition: opacity .25s ease, transform .25s ease; }
.navbar19_menu .footer-social a:hover { opacity: .7; transform: translateY(-2px); }


/* Mobile menu: air between the sticky logo/CTA/close row and the big-link grid.
   Pad accounts for the open bar height so the ~80px gap below the bar is preserved. */
@media (max-width: 991px) {
  .navbar19_menu-left-top { padding-top: calc(2rem + 56px); }
}
@media (max-width: 767px) {
  .navbar19_menu-left-top { padding-top: calc(1rem + 56px); }
}

/* ===== Nav: centered links, floating glass bar, section-aware colours (see site-chrome.ts) ===== */
/* Theme tokens. Dark is the default (over the hero, navy sections and photos); light is set when
   the bar sits over a linen section. The open menu is always dark. */
.navbar19_component { --nav-fg: #fff; --nav-glass: rgba(6, 23, 48, .72); --nav-line: rgba(255, 255, 255, .12); --nav-cta-bg: #fff; --nav-cta-fg: #061730; }
.navbar19_component[data-nav-theme="light"] { --nav-fg: #061730; --nav-glass: rgba(244, 241, 235, .82); --nav-line: rgba(6, 23, 48, .1); --nav-cta-bg: #061730; --nav-cta-fg: #fff; }

/* Logo row is a true three-column grid so the links sit dead centre regardless of side widths */
.navbar19_container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 24px; height: 72px; }
@media (max-width: 767px) { .navbar19_container { height: 64px; } }
.navbar19_logo-link { justify-self: start; }
.nav-cta-wrap { justify-self: end; grid-column: 3; }

/* Logo: SVG used as a mask so it can take the theme colour */
.navbar19_logo { display: block; height: 3.5rem; aspect-ratio: 292 / 109; background-color: var(--nav-fg); -webkit-mask: url(/images/stuart-boatworks-logo.svg) center / contain no-repeat; mask: url(/images/stuart-boatworks-logo.svg) center / contain no-repeat; transform-origin: left center; transition: background-color .35s ease, transform .45s cubic-bezier(.22, .61, .36, 1); }
@media (max-width: 767px) { .navbar19_logo { height: 2.52rem; } }

.nav-links-link { color: var(--nav-fg); transition: color .35s ease; }
.nav-links-link-after { background-color: currentColor; }
.nav-links-link:hover .nav-links-link-after, .nav-links-link.w--current .nav-links-link-after { transform: scaleX(1); }
.nav-toggle-line { background: var(--nav-fg); transition: transform .35s cubic-bezier(.65, 0, .35, 1), width .3s cubic-bezier(.65, 0, .35, 1), background-color .35s ease; }
.nav-cta { background-color: var(--nav-cta-bg); border-color: var(--nav-cta-bg); color: var(--nav-cta-fg); transition: color .3s ease, background-color .35s ease, border-color .35s ease; }
.nav-cta:hover { background-color: transparent; color: var(--nav-fg); }

/* nav-cta size shrink (~12%): tighter padding/font/tracking vs Webflow base 14px 22px / 13px / .2em */
.nav-cta { padding: 12px 19px; font-size: 12px; letter-spacing: .17em; }
@media (max-width: 991px) { .nav-cta { padding: 10px 16px; font-size: 11px; letter-spacing: .15em; } }


/* Floating state. The outer inset plus the inner padding equals the resting side padding, so the
   logo and toggle keep their exact x position; the bar just gains glass, a hairline and a shadow.
   transform (not margin) drops it off the top edge so page layout never shifts. */
.navbar19_container { transition: width .45s cubic-bezier(.22, .61, .36, 1), max-width .45s cubic-bezier(.22, .61, .36, 1), padding .45s cubic-bezier(.22, .61, .36, 1), height .45s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1), background-color .35s ease, border-color .35s ease, box-shadow .45s ease; border: 1px solid transparent; border-radius: 4px; }
.navbar19_component.is-floating { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* At rest the bar is fully clear: any backdrop blur over the hero video draws a visible band with a hard bottom edge (most visible on the bright stuart-23 footage). */
.navbar19_component:not(.is-floating):not(.is-open):not(.is-closing) { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: transparent; }
.is-floating .navbar19_container { width: calc(100% - 48px); max-width: 1392px; height: 64px; padding-left: 23px; padding-right: 23px; transform: translateY(8px); background-color: var(--nav-glass); border-color: var(--nav-line); box-shadow: 0 12px 32px -16px rgba(3, 13, 31, .5); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.is-floating .navbar19_logo { transform: scale(.82); }
@media (min-width: 992px) and (max-width: 1199px) { .is-floating .navbar19_container { width: calc(100% - 32px); max-width: none; padding-left: 15px; padding-right: 15px; } }
@media (max-width: 991px) { .is-floating .navbar19_container { width: calc(100% - 20px); max-width: none; height: 58px; padding-left: 13px; padding-right: 13px; transform: translateY(6px); } }

/* Menu hover photos: full-bleed behind the open menu, under a navy wash that keeps the right-hand
   columns readable. Hover devices at desktop widths only (loaded on first open). */
.menu-photos { display: none; }
@media (hover: hover) and (min-width: 992px) {
  .menu-photos { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .menu-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .6s ease, transform 1.4s cubic-bezier(.22, .61, .36, 1); }
  .menu-photos img.is-on { opacity: .5; transform: scale(1); }
  .menu-photos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 23, 48, .35) 0%, rgba(6, 23, 48, .75) 45%, rgba(6, 23, 48, .95) 70%); }
  .navbar19_menu-wrapper { position: relative; z-index: 1; }
}

/* FTD footer credit: snug stack with copyright + legal */
.footer-bottom{align-items:center;gap:12px 28px}
.footer-meta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;flex:1 1 240px}
.footer-copy{margin:0}
.footer-ftd{display:flex;align-items:center}
@media (max-width:767px){
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-meta{gap:8px}
  .footer-ftd{min-height:0}
}

/* Hero model-page stat circles: match thin icon stroke (~1px) and dead-center glyphs */
.spec-icon-circle {
  border: 1px solid #fff;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 0;
  line-height: 0;
}
.spec-icon-circle .icon-embed-xxsmall {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.spec-icon-circle .icon-embed-xxsmall svg {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  flex-shrink: 0;
  overflow: visible;
}


/* Sailfish eyebrow mark (replaces divider lines; color via currentColor / parent) */
.sb-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.eyebrow-sailfish {
  flex-shrink: 0;
  width: 40px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  overflow: visible;
}
.eyebrow-sailfish use {
  fill: currentColor;
}


/* Form selects: hide native chevron, draw custom arrow inset to match left text padding */
.form-select,
.form-select-2 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #ffffff0a;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.6) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.6) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  /* Inset from right edge ~= left text padding (16px desktop) */
  background-position: calc(100% - 16px - 6px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
  /* Right padding: inset + chevron + slack so long labels never underlap the arrow */
  padding: 14px 40px 14px 16px;
}
.form-select:focus,
.form-select-2:focus {
  /* Keep chevron on focus (base CSS was wiping background-image) */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.75) 50%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.75) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  background-position: calc(100% - 16px - 6px) calc(50% + 2px), calc(100% - 16px) calc(50% + 2px);
}
@media (max-width: 479px) {
  .form-select,
  .form-select-2 {
    background-position: calc(100% - 12px - 6px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
    padding: 14px 36px 14px 16px;
  }
  .form-select:focus,
  .form-select-2:focus {
    background-position: calc(100% - 12px - 6px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
  }
}


/* Arrow SVGs must track button text color via currentColor.
   .fb-svg-embed was hard-coded to stuart-white, so when buttons invert on hover
   (navy text on transparent bg) the arrow stayed white and vanished into the card. */
.fb-svg-embed { color: inherit; }
.fb-inline-svg-root,
.fb-inline-svg-root > svg { color: inherit; }