*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#FFFFFF;color:#242323;font-family:'Source Sans 3',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:#007AA8;text-decoration:none}
a:hover{color:#006B93}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:#EAF8FE}
:focus-visible{outline:2px solid #007AA8;outline-offset:3px}
[data-reveal]{opacity:1;animation:fabroRise .55s cubic-bezier(.22,1,.36,1) both}
@keyframes fabroRise{from{transform:translateY(16px)}to{transform:none}}
@keyframes fabroDraw{to{stroke-dashoffset:0}}
@keyframes fabroFade{from{opacity:0}to{opacity:1}}
@keyframes fabroWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fabroLoaderOut{0%,76%{opacity:1}100%{opacity:0}}
@media (max-width:980px){
[data-desktop-only]{display:none !important}
[data-mobile-only]{display:flex !important}
[data-stack]{flex-direction:column !important;align-items:stretch !important}
/* Once the axis flips, a flex-basis written for columns of a row becomes a
   fixed height, which leaves a block of dead space under any child shorter
   than its basis. Let stacked children take the height of their content. */
[data-stack]>*{flex-basis:auto !important}
}
/* Between the mobile menu breakpoint and roughly a small laptop, the nav links
   and the header button together are wider than the bar, which scrolls the
   whole page sideways. The button gives way: the links still fit, and every
   page carries the same call to action in its own content. */
@media (min-width:981px) and (max-width:1140px){
[data-header-cta]{display:none !important}
}
/* Six range chips wrap to three rows on a phone, and the bar they sit in is
   sticky under a sticky header: together they held 299px of an 812px screen
   before a single garment appeared. One row that scrolls sideways instead.
   `width:100%` gives the row of chips a definite width to overflow inside —
   without it the flex item sizes to its content and pushes the page sideways
   rather than scrolling within itself. */
@media (max-width:700px){
[data-filter-bar]{padding:12px 0 !important}
[data-filter-chips]{flex:1 1 100%;width:100%;min-width:0;flex-wrap:nowrap !important;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
[data-filter-chips]::-webkit-scrollbar{display:none}
[data-filter-chips]>button{flex:0 0 auto}
}
/* The brand logos sit two-up on a phone. One per full-width card wastes most of
   the card and turns six marks into six screenfuls. */
@media (max-width:560px){
[data-logo-grid]{grid-template-columns:repeat(auto-fit,minmax(128px,1fr)) !important}
[data-logo-grid]>li{min-height:88px !important;padding:14px !important}
}
@media (prefers-reduced-motion: reduce){
[data-reveal]{opacity:1 !important;transform:none !important;animation:none !important}
*{animation-duration:.001ms !important;animation-iteration-count:1 !important}
}

/* Re-renders that do not change the view (typing in a field) must not replay
   the section entry animations. */
#app.no-reveal [data-reveal]{animation:none !important}