/*
 * Page overrides for Yarn Deying.
 *
 * Extracted from the page's own style block during migration. These sit on top
 * of the shared `fbi-fb-*` stylesheets and repaint the shared structures for
 * this page. Loaded by any shared-system widget set to this page.
 */



/* ===== HERO — gradient (site-wide standard) ===== */

/* ===== SECTIONS ===== */
.fbyd .kicker::before{content:"";width:34px;height:12px;border-radius:3px;
background:linear-gradient(90deg,var(--navy2) 0 25%,var(--blue) 25% 50%,var(--sky) 50% 75%,var(--cyan) 75%)} /* mini shade strip */
.fbyd .center{text-align:center;max-width:780px;margin:0 auto 48px}

/* ===== SIGNIFICANCE — image + SHADE CARD (SLOT 1) ===== */
.fbyd .sigduo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.fbyd .sigduo .txt>p{font-size:15.2px;color:var(--mut);line-height:1.8;margin-top:16px}
.fbyd .sigph{position:relative;border-radius:18px;overflow:hidden;margin-top:30px;
box-shadow:0 18px 44px rgba(4,24,83,.14);aspect-ratio:16/9.5}
.fbyd .sigph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.fbyd .sigph:hover img{transform:scale(1.05)}
.fbyd .sigph::after{content:"";position:absolute;inset:0;
background:linear-gradient(to top,rgba(4,24,83,.35),transparent 45%)}
.fbyd .sigph .lab{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;
font-family:'IBM Plex Sans',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;background:rgba(4,24,83,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
border:1px solid rgba(46,176,231,.5);padding:6px 13px;border-radius:100px}

/* the shade card — like a dyer's physical shade card */
.fbyd .shcard{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
box-shadow:0 14px 38px rgba(4,24,83,.1)}
.fbyd .shcard .shhead{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:18px 24px;color:#fff;background:linear-gradient(100deg,#03123E,var(--navy2) 60%,#05489B)}
.fbyd .shcard .shhead h3{font-size:15.5px;font-weight:700;color:#fff!important}
.fbyd .shcard .shhead span{font-family:'IBM Plex Sans',sans-serif;font-size:10.5px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;color:#7FDCFF;border:1px solid rgba(46,176,231,.5);
border-radius:100px;padding:4px 12px;white-space:nowrap}
.fbyd .shrow{display:flex;gap:18px;align-items:flex-start;padding:18px 24px;
border-bottom:1px solid var(--line);transition:.22s}
.fbyd .shrow:last-child{border-bottom:0}
.fbyd .shrow:hover{background:var(--bg)}
.fbyd .chip{flex:0 0 46px;width:46px;height:58px;border-radius:8px;position:relative;
box-shadow:inset 0 0 0 1px rgba(4,24,83,.08),0 4px 10px rgba(4,24,83,.14)}
.fbyd .chip::after{content:"";position:absolute;left:6px;right:6px;top:6px;height:6px;
border-radius:3px;background:rgba(255,255,255,.35)} /* chip gloss, like a dipped swatch */
.fbyd .c1{background:linear-gradient(180deg,#0A2E7A,var(--navy2))}
.fbyd .c2{background:linear-gradient(180deg,#1273D6,var(--blue))}
.fbyd .c3{background:linear-gradient(180deg,#3FA9E8,var(--sky))}
.fbyd .c4{background:linear-gradient(180deg,#7FD4F5,var(--cyan))}
.fbyd .shrow h3{font-size:15.2px;font-weight:700;color:var(--navy)!important;margin-bottom:4px}
.fbyd .shrow p{font-size:13.6px;color:var(--mut);line-height:1.62}

/* ===== JOURNEY — spool cards on a wavy thread ===== */
.fbyd .spools{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:56px}
.fbyd .spools::before{content:"";position:absolute;left:2%;right:2%;top:-26px;height:16px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='16' viewBox='0 0 80 16'%3E%3Cpath d='M0 8 Q20 0 40 8 T80 8' fill='none' stroke='%230B87D0' stroke-width='2' stroke-dasharray='5 6' opacity='.5'/%3E%3C/svg%3E");
background-repeat:repeat-x}
.fbyd .spool{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;
padding:26px 18px 22px;text-align:center;transition:.28s;box-shadow:0 4px 16px rgba(4,24,83,.06)}
/* spool flanges — wider bars on top & bottom */
.fbyd .spool::before,.fbyd .spool::after{content:"";position:absolute;left:-8px;right:-8px;height:9px;
border-radius:5px;background:linear-gradient(90deg,var(--sky),var(--blue));
box-shadow:0 3px 8px rgba(4,24,83,.18)}
.fbyd .spool::before{top:-5px}
.fbyd .spool::after{bottom:-5px;background:linear-gradient(90deg,var(--blue),var(--sky))}
.fbyd .spool:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(4,24,83,.14);
border-color:rgba(46,176,231,.5)}
.fbyd .spool .num{font-family:'IBM Plex Sans',sans-serif;font-size:12px;font-weight:700;
letter-spacing:.14em;color:var(--sky);margin-bottom:10px}
.fbyd .spool h3{font-size:14.8px;font-weight:700;color:var(--navy)!important;margin-bottom:8px;line-height:1.35}
.fbyd .spool p{font-size:12.9px;color:var(--mut);line-height:1.6}

/* ===== OUTCOMES — dip-dye ombré cards ===== */
.fbyd .dips{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fbyd .dip{position:relative;border:1px solid var(--line);border-radius:16px;padding:34px 28px 30px;
background:linear-gradient(180deg,rgba(46,176,231,.16),rgba(46,176,231,.05) 34%,#fff 62%);
transition:.28s;box-shadow:0 4px 16px rgba(4,24,83,.05);overflow:hidden}
.fbyd .dip::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
background:linear-gradient(90deg,var(--cyan),var(--blue))}
.fbyd .dip:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(4,24,83,.12);
border-color:rgba(46,176,231,.55)}
.fbyd .dip .dic{width:46px;height:46px;border-radius:13px;margin-bottom:18px;
background:linear-gradient(135deg,var(--cyan),var(--blue));
display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(4,24,83,.18)}
.fbyd .dip .dic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.fbyd .dip h3{font-size:16.5px;font-weight:700;color:var(--navy)!important;margin-bottom:10px}
.fbyd .dip p{font-size:14px;color:var(--mut);line-height:1.7}

/* ===== CTA — navy band with fine thread lines (SLOT 2) ===== */
.fbyd .cta{position:relative;color:#fff;overflow:hidden;
background:linear-gradient(115deg,#03123E,var(--navy2) 52%,#05489B);padding:84px 0}
.fbyd .cta::before{content:"";position:absolute;inset:0;opacity:.12;
background-image:repeating-linear-gradient(90deg,transparent 0 9px,rgba(127,220,255,.7) 9px 10px)} /* wound yarn threads */
.fbyd .cta .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;
gap:46px;align-items:center}
.fbyd .cta h2{color:#fff!important;margin-bottom:14px}
.fbyd .cta p{color:rgba(255,255,255,.9);font-size:15.3px;margin-bottom:28px;max-width:520px}
.fbyd .ctaph{position:relative;border-radius:18px;overflow:hidden;
box-shadow:0 18px 40px rgba(0,0,0,.32);aspect-ratio:16/11}
.fbyd .ctaph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.fbyd .ctaph:hover img{transform:scale(1.04)}
.fbyd .ctaph::before{content:"";position:absolute;left:-8px;right:-8px;top:-5px;height:9px;z-index:2;
border-radius:5px;background:linear-gradient(90deg,var(--cyan),var(--sky))} /* spool flange echo */




/* ===== PRODUCT EXPLORER ===== */
.fbyd .pxsec{padding:84px 0;background:#fff}
.fbyd .pxhead{text-align:center;max-width:800px;margin:0 auto 34px}
.fbyd .pxhead p{color:var(--mut);font-size:15.4px;margin-top:14px}
.fbyd .pxmeta{display:flex;justify-content:center;gap:26px;margin:22px 0 30px;flex-wrap:wrap}
.fbyd .pxmeta span{font-family:'IBM Plex Sans',sans-serif;font-size:12.5px;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.fbyd .pxmeta b{color:var(--blue);font-size:15px;margin-right:6px}
.fbyd .pxtabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.fbyd .pxtab{font-family:'IBM Plex Sans',sans-serif;font-size:13.5px;font-weight:600;
color:var(--navy2);background:var(--bg);border:1px solid var(--line);border-radius:100px;
padding:11px 24px;cursor:pointer;transition:.22s;user-select:none}
.fbyd .pxtab:hover{border-color:var(--sky);color:var(--blue)}
.fbyd .pxtab.on{background:linear-gradient(100deg,var(--blue),var(--sky));color:#fff;
border-color:transparent;box-shadow:0 8px 20px rgba(0,102,204,.26)}
.fbyd .pxsearch{position:relative;max-width:520px;margin:0 auto 36px}
.fbyd .pxsearch svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);
width:17px;height:17px;stroke:#9AA8BF;fill:none;stroke-width:2;stroke-linecap:round}
.fbyd .pxsearch input{width:100%;font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);
background:#fff;border:1px solid var(--line);border-radius:100px;padding:15px 20px 15px 48px;
outline:none;transition:.2s;box-shadow:0 4px 16px rgba(4,24,83,.06)}
.fbyd .pxsearch input:focus{border-color:var(--sky);box-shadow:0 0 0 3px rgba(46,176,231,.15)}
.fbyd .pxstage{display:none}
.fbyd .pxstage.on{display:block}
.fbyd .pxcat{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
margin-bottom:16px;box-shadow:0 3px 14px rgba(4,24,83,.05)}
.fbyd .pxcat>header{display:flex;align-items:center;gap:14px;padding:16px 24px;
background:linear-gradient(100deg,#F2F7FD,var(--bg));border-bottom:1px solid var(--line)}
.fbyd .pxcat>header::before{content:"";width:10px;height:10px;border-radius:3px;
background:linear-gradient(135deg,var(--cyan),var(--blue));transform:rotate(45deg)}
.fbyd .pxcat>header b{font-family:'IBM Plex Sans',sans-serif;font-size:14.8px;font-weight:700;
color:var(--navy2)}
.fbyd .pxcat>header i{font-style:normal;margin-left:auto;font-family:'IBM Plex Sans',sans-serif;
font-size:11px;font-weight:700;color:var(--sky);background:rgba(46,176,231,.1);
border:1px solid rgba(46,176,231,.35);border-radius:100px;padding:3px 12px;white-space:nowrap}
.fbyd .pxrows{display:grid;grid-template-columns:1fr 1fr}
.fbyd .pxrow{display:flex;align-items:center;gap:14px;padding:14px 24px;text-decoration:none;
border-bottom:1px solid var(--line);transition:.18s;position:relative}
.fbyd .pxrow:nth-child(odd){border-right:1px solid var(--line)}
.fbyd .pxrow:hover{background:var(--bg)}
.fbyd .pxrow .dot{flex:0 0 7px;width:7px;height:7px;border-radius:50%;
background:linear-gradient(135deg,var(--cyan),var(--blue));transition:.2s}
.fbyd .pxrow:hover .dot{transform:scale(1.5)}
.fbyd .pxrow b{font-family:'IBM Plex Sans',sans-serif;font-size:13.8px;font-weight:600;
color:var(--navy2);line-height:1.35;flex:1}
.fbyd .pxrow .go{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Sans',sans-serif;
font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky);
opacity:0;transform:translateX(-6px);transition:.22s;white-space:nowrap}
.fbyd .pxrow .go svg{width:13px;height:13px;stroke:var(--sky);fill:none;stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round}
.fbyd .pxrow:hover .go{opacity:1;transform:translateX(0)}
.fbyd .pxempty{display:none;text-align:center;color:var(--mut);font-size:14.5px;padding:34px 0}
.fbyd .pxnote{text-align:center;font-size:12.5px;color:var(--mut);margin-top:22px;font-style:italic}

/* ---- responsive: kept last so these are not overridden ---- */
@media(prefers-reduced-motion:reduce){
.fbyd .sigph img,.fbyd .ctaph img{transition:none!important}}
@media(max-width:940px){
.fbyd .sigduo{grid-template-columns:1fr;gap:38px}
.fbyd .spools{grid-template-columns:repeat(2,1fr);gap:26px 20px}
.fbyd .spools::before{display:none}
.fbyd .dips{grid-template-columns:1fr}
.fbyd .cta .wrap{grid-template-columns:1fr;gap:30px}}
@media(max-width:620px){
.fbyd .spools{grid-template-columns:1fr}}
@media(max-width:860px){.fbyd .pxrows{grid-template-columns:1fr}
.fbyd .pxrow:nth-child(odd){border-right:0}
.fbyd .pxrow .go{opacity:1;transform:none}}
@media(max-width:620px){.fbyd .pxsec{padding:56px 0}}