/* ==========================================================
   i-BnB | services.html  (loads after css/index.css)
   Concept: the hero is a real 4-week sprint board where all five
   services are scheduled on one timeline, then an interactive
   showroom where every service plays its own animated build.
   No circles, no tilted ticker.
   ========================================================== */
header nav a[aria-current="page"]{color:var(--red)}

/* ===== Hero ===== */
.hx{position:relative;overflow:hidden;min-height:calc(100svh - var(--hdr));display:flex;align-items:center;padding:56px 0 72px;background:var(--white)}
.hx-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask:radial-gradient(ellipse at 78% 50%,#000 0,transparent 70%);mask:radial-gradient(ellipse at 78% 50%,#000 0,transparent 70%)}
.hx-in{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.hx h1{font:700 clamp(42px,5.6vw,92px)/.95 var(--head);letter-spacing:-.045em;color:var(--brown-d);margin-bottom:26px}
.hx h1 .ln{display:block;white-space:nowrap;overflow:hidden;padding:.02em 0 .1em}
.hx h1 .ln>span{display:inline-block;transform:translateY(108%) rotate(5deg);animation:hxup 1.1s cubic-bezier(.16,1,.3,1) forwards}
.hx h1 .ln:nth-child(2)>span{animation-delay:.18s}
.hx h1 .red{color:var(--red)}
@keyframes hxup{to{transform:none}}@keyframes svup{from{opacity:0;transform:translateY(18px)}}
.hx .lead{max-width:46ch;animation:svup .9s .7s backwards}
.hx .cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px;animation:svup .9s .9s backwards}

/* sprint board */
.sb{position:relative;padding:22px 22px 20px;background:#fff;border:2px solid var(--brown-d);border-radius:14px;box-shadow:12px 12px 0 var(--red);animation:sbin 1s cubic-bezier(.16,1,.3,1) .35s backwards}
@keyframes sbin{from{opacity:0;transform:translate(24px,24px)}}
.sb-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sb-top b{font:700 clamp(18px,1.8vw,22px) var(--head);letter-spacing:-.02em;color:var(--brown-d)}
.sb-top span{font:500 13px var(--body);color:var(--brown-m)}
.sb-wk{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:8px}
.sb-wk span{padding-left:8px;border-left:2px solid var(--brown-d);font:600 12.5px var(--head);color:var(--brown-d)}
.sb-lanes{position:relative;display:grid;gap:10px;padding:10px 0;
  background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 25%)}
.sb-lane{display:grid;grid-template-columns:repeat(4,1fr);height:50px}
.sb-bar{grid-column:var(--s)/var(--e);display:flex;flex-direction:column;justify-content:center;min-width:0;padding:0 14px;border-radius:8px;color:#fff;transform-origin:left;
  animation:sx 1s cubic-bezier(.16,1,.3,1) calc(.9s + var(--d)*.22s) backwards}
.sb-bar b{font:600 15px/1.15 var(--head);white-space:nowrap}
.sb-bar small{font:500 12px/1.3 var(--body);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-ux{background:var(--red)}
.sb-br{background:#ff7a88;color:var(--brown-d)}
.sb-web{background:var(--brown-d)}
.sb-mob{background:#4a2f2a}
.sb-ai{background:var(--blush);color:var(--red);box-shadow:inset 0 0 0 2px var(--red)}
.sb-scan{position:absolute;z-index:2;top:0;bottom:0;left:0;width:3px;background:var(--red);box-shadow:0 0 0 4px #c8142b1f;animation:sbscan 7s cubic-bezier(.6,0,.4,1) 2.2s infinite}
@keyframes sbscan{0%{left:0;opacity:0}8%{opacity:1}88%{opacity:1}100%{left:calc(100% - 3px);opacity:0}}
.sb-foot{display:flex;justify-content:space-between;gap:12px;margin-top:6px;padding-top:14px;border-top:2px solid var(--brown-d)}
.sb-mk{display:flex;align-items:center;gap:10px;font:600 14px var(--head);color:var(--brown-d)}
.sb-mk i{width:14px;height:14px;rotate:45deg;background:var(--red)}
.sb-m2 i{background:var(--brown-d)}
.sb-m2{color:var(--red)}

/* ===== Promise ledger (replaces the tilted ticker) ===== */
.pf{padding:0;background:var(--cream);border-bottom:1px solid var(--line)}
.pf-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.pf-list li{display:flex;align-items:center;gap:14px;padding:26px 20px 26px 0;border-left:1px solid #2a1a1726;padding-left:22px;font:600 clamp(15px,1.4vw,18px)/1.25 var(--head);letter-spacing:-.01em;color:var(--brown-d);transition:color .3s}
.pf-list li:first-child{border-left:0;padding-left:0}
.pf-list i{position:relative;flex:none;width:24px;height:24px;border:2px solid var(--brown-d);border-radius:5px;transition:background .3s,border-color .3s}
.pf-list i::after{content:"";position:absolute;left:5px;top:3px;width:10px;height:5px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-45deg);clip-path:inset(0 100% 0 0);animation:tick .5s ease-out forwards;animation-play-state:paused}
.pf.in .pf-list i::after{animation-play-state:running}
.pf-list li:nth-child(2) i::after{animation-delay:.12s}.pf-list li:nth-child(3) i::after{animation-delay:.24s}.pf-list li:nth-child(4) i::after{animation-delay:.36s}.pf-list li:nth-child(5) i::after{animation-delay:.48s}
@keyframes tick{to{clip-path:inset(0)}}
.pf-list li:hover i{background:var(--red);border-color:var(--red)}
.pf-list li:hover i::after{border-color:#fff}

/* ===== Showroom ===== */
.sr{background:linear-gradient(180deg,#2a1a17,#1b100e);color:#fff;padding:clamp(72px,8vw,120px) 0 clamp(64px,8vw,110px)}
.sr-head{margin-bottom:clamp(32px,4vw,56px)}
.sr-head h2{color:#fff;max-width:18ch;font-size:clamp(32px,4.6vw,60px);line-height:1.02}
.sr .sub{color:#c9b8b3}
.sr-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:start}

.sr-list{display:flex;flex-direction:column;border-bottom:1px solid #ffffff1f}
.it{all:unset;box-sizing:border-box;position:relative;cursor:pointer;padding:22px 44px 22px 0;border-top:1px solid #ffffff1f;color:#ffffff50;transition:color .35s}
.it:hover{color:#ffffffb0}
.it:focus-visible{outline:2px solid #ff7a88;outline-offset:2px}
.it h3{font:600 clamp(26px,3.4vw,46px)/1.05 var(--head);letter-spacing:-.03em;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.it small{display:block;max-height:0;opacity:0;overflow:hidden;margin-top:0;font:400 16px/1.5 var(--body);color:#e9dcd8;transition:max-height .5s,opacity .5s,margin .5s}
.it::before{content:"→";position:absolute;right:6px;top:50%;translate:-10px -50%;font:600 26px var(--head);color:#ff7a88;opacity:0;transition:opacity .3s,translate .3s}
.it::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--red)}
.it.on{color:#fff}
.it.on h3{transform:translateX(10px)}
.it.on small{max-height:80px;opacity:1;margin-top:8px}
.it.on::before{opacity:1;translate:0 -50%}
.it.on::after{animation:fill var(--dur,7s) linear forwards}
.sr-grid.hold .it.on::after{animation-play-state:paused}
@keyframes fill{to{width:100%}}

.stage{position:relative;height:clamp(300px,34vw,380px);overflow:hidden;border-radius:26px;border:1px solid #ffffff1f;
  background:radial-gradient(70% 90% at 50% 110%,#c8142b66,transparent 70%),#241513}
.stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff0d 1px,transparent 1px),linear-gradient(90deg,#ffffff0d 1px,transparent 1px);background-size:34px 34px;-webkit-mask:radial-gradient(circle,#000,transparent 80%);mask:radial-gradient(circle,#000,transparent 80%)}
.sc{position:absolute;inset:0;display:none;align-items:center;justify-content:center}
.sc.on{display:flex}
.stage .fl{position:absolute;padding:8px 14px;border-radius:99px;background:#ffffff1a;border:1px solid #ffffff33;color:#ffd0d5;font:600 13px var(--head);font-style:normal;backdrop-filter:blur(6px);animation:bob 4s ease-in-out infinite alternate}
.stage .fl.a{left:6%;top:16%}.fl.b{right:6%;bottom:16%;animation-delay:-2s}
@keyframes bob{to{transform:translateY(-10px)}}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
@keyframes sx{from{transform:scaleX(0)}}@keyframes sy{from{transform:scaleY(0)}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}

/* 1 web */
.s1 .win{width:min(78%,420px);height:76%;display:flex;flex-direction:column;gap:12px;padding:0 14px 14px;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 30px 60px #0008;animation:rise .8s cubic-bezier(.16,1,.3,1)}
.s1 .wb{display:flex;align-items:center;gap:6px;height:26px;margin:0 -14px;padding:0 12px;background:var(--red)}
.s1 .wb i{width:8px;height:8px;border-radius:50%;background:#ffffffb0}
.s1 .wb u{flex:1;height:10px;margin-left:10px;border-radius:6px;background:#ffffff40}
.s1 .wh{height:54px;border-radius:8px;background:linear-gradient(90deg,var(--blush),#f6c9cf);transform-origin:left;animation:sx .8s .4s backwards}
.s1 .wc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.s1 .wc b{height:50px;border-radius:8px;border:1.5px solid var(--red);animation:pop .5s backwards}
.s1 .wc b:nth-child(1){animation-delay:.9s}.s1 .wc b:nth-child(2){animation-delay:1.05s}.s1 .wc b:nth-child(3){animation-delay:1.2s}
.s1 .wg{flex:1;display:flex;align-items:flex-end;gap:10px}
.s1 .wg s{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:var(--red);transform-origin:bottom;animation:sy .7s backwards}
.s1 .wg s:nth-child(1){animation-delay:1.4s}.s1 .wg s:nth-child(2){animation-delay:1.5s}.s1 .wg s:nth-child(3){animation-delay:1.6s}.s1 .wg s:nth-child(4){animation-delay:1.7s}.s1 .wg s:nth-child(5){animation-delay:1.8s}

/* 2 mobile */
.s2 .ph{position:relative;width:150px;height:86%;display:flex;flex-direction:column;gap:10px;padding:34px 12px 12px;border:4px solid #ffffff55;border-radius:26px;background:#fff;overflow:hidden;box-shadow:0 30px 60px #0008;animation:rise .8s cubic-bezier(.16,1,.3,1)}
.s2 .nt{position:absolute;left:50%;top:8px;width:44px;height:8px;margin-left:-22px;border-radius:6px;background:#2a1a17}
.s2 .ph u{display:block;height:44px;border-radius:10px;background:var(--blush);animation:rise .6s backwards}
.s2 .ph u:nth-of-type(1){background:var(--red);height:70px;animation-delay:.5s}
.s2 .ph u:nth-of-type(2){animation-delay:.7s}.s2 .ph u:nth-of-type(3){animation-delay:.9s}.s2 .ph u:nth-of-type(4){animation-delay:1.1s}
.s2 .toast{position:absolute;right:12%;top:24%;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;background:#fff;color:var(--brown-d);font:600 14px var(--head);box-shadow:0 18px 40px #0007;animation:pop .6s cubic-bezier(.3,1.6,.5,1) 1.6s backwards,bob 3s 2.2s ease-in-out infinite alternate}
.s2 .toast b{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--red);color:#fff;font-size:12px}

/* 3 ui/ux: wireframe fills with design */
.s3{flex-direction:column;gap:22px}
.stage .wf{position:relative;width:min(70%,380px);height:66%}
.stage .wf div{position:absolute;border:2px dashed #ffffff55;border-radius:10px;animation:fillin 6s ease-in-out infinite}
.stage .wf .x1{left:0;top:0;width:100%;height:18%;--c:#fff}
.stage .wf .x2{left:0;top:26%;width:34%;height:44%;--c:var(--red);animation-delay:.5s}
.stage .wf .x3{left:40%;top:26%;width:60%;height:18%;--c:var(--blush);animation-delay:1s}
.stage .wf .x4{left:40%;top:52%;width:28%;height:18%;--c:#ff7a88;animation-delay:1.5s}
.stage .wf .x5{left:72%;top:52%;width:28%;height:18%;--c:#fff;animation-delay:2s}
@keyframes fillin{0%,12%{background:transparent;border-style:dashed;border-color:#ffffff55}22%,80%{background:var(--c);border-style:solid;border-color:transparent}95%,100%{background:transparent;border-style:dashed;border-color:#ffffff55}}
.stage .cur{position:absolute;left:0;top:0;width:26px;height:26px;fill:#fff;stroke:#241513;stroke-width:1.2;filter:drop-shadow(0 4px 6px #0008);animation:cur 6s ease-in-out infinite}
@keyframes cur{0%{transform:translate(10px,10px)}18%{transform:translate(70px,70px)}35%{transform:translate(180px,50px)}50%{transform:translate(190px,115px)}65%{transform:translate(290px,115px)}85%,100%{transform:translate(10px,10px)}}
.stage .pal{display:flex;gap:12px}
.stage .pal i{width:26px;height:26px;border-radius:7px;animation:pop .5s backwards}
.stage .pal i:nth-child(1){background:var(--red);animation-delay:.4s}.pal i:nth-child(2){background:#ff7a88;animation-delay:.55s}.pal i:nth-child(3){background:var(--blush);animation-delay:.7s}.pal i:nth-child(4){background:#fff;animation-delay:.85s}

/* 4 branding: logo draws itself */
.s4{flex-direction:column;gap:22px}
.logo-draw{width:min(190px,44%);overflow:visible;animation:logoturn 8s ease-in-out 3s infinite alternate}
.logo-draw rect,.logo-draw path,.logo-draw circle:not(.dt){fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;animation:draw 1.2s cubic-bezier(.6,0,.2,1) backwards}
.logo-draw path:nth-of-type(1){animation-delay:.6s}.logo-draw path:nth-of-type(2){animation-delay:.8s}.logo-draw circle:not(.dt){animation-delay:1s}
.logo-draw .ac{stroke:#ff7a88;animation-delay:1.3s}
.logo-draw .dt{fill:#ff7a88;animation:pop .5s cubic-bezier(.3,1.6,.5,1) 1.5s backwards;transform-box:fill-box;transform-origin:center}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes logoturn{to{transform:rotate(-8deg) scale(1.06)}}
.stage .sw{display:flex;gap:10px}
.stage .sw i{width:44px;height:44px;border-radius:12px;animation:rise .6s backwards}
.stage .sw i:nth-child(1){background:var(--red);animation-delay:1.7s}.sw i:nth-child(2){background:#fff;animation-delay:1.85s}.sw i:nth-child(3){background:#3b2420;border:1px solid #ffffff44;animation-delay:2s}.sw i:nth-child(4){background:var(--blush);animation-delay:2.15s}

/* 5 ai: documents flow into an answer */
.s5{justify-content:space-between;padding:0 8%}
.stage .docs{display:flex;flex-direction:column;gap:12px}
.stage .docs i{width:60px;height:44px;border-radius:8px;background:#ffffff1f;border:1px solid #ffffff40;background-image:linear-gradient(#ffffff66 0 0),linear-gradient(#ffffff40 0 0);background-size:60% 4px,40% 4px;background-position:10px 12px,10px 24px;background-repeat:no-repeat;animation:feed 2.4s ease-in infinite}
.stage .docs i:nth-child(2){animation-delay:.4s}.docs i:nth-child(3){animation-delay:.8s}
@keyframes feed{0%{transform:translateX(0);opacity:1}70%{transform:translateX(70px);opacity:0}100%{opacity:0}}
.fw{display:none}
.stage .chat{width:min(60%,300px);display:flex;flex-direction:column;gap:12px}
.stage .chat p{padding:12px 16px;border-radius:16px;font:500 14px/1.4 var(--body);animation:rise .6s backwards}
.stage .chat .q{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:4px;animation-delay:.3s}
.stage .chat .a{background:#fff;color:var(--brown-d);border-bottom-left-radius:4px;animation:rise .5s 1.4s backwards,reveal 1.6s steps(24) 1.6s backwards}
.stage .chat .a b{display:none}
.stage .chat .ty{display:flex;gap:5px;align-self:flex-start;padding:12px 16px;background:#ffffff1f;animation:rise .4s .9s backwards,gone .1s 1.4s forwards}
.stage .chat .ty s{width:7px;height:7px;border-radius:2px;background:#fff;animation:dot 1s infinite}
.stage .chat .ty s:nth-child(2){animation-delay:.15s}.chat .ty s:nth-child(3){animation-delay:.3s}
@keyframes dot{40%{transform:translateY(-5px)}}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}}
@keyframes gone{to{opacity:0;height:0;padding:0;margin:-6px 0}}

/* detail panel */
.det{padding-top:28px}
.det h3{font-size:clamp(26px,3vw,36px);margin-bottom:10px;color:#fff}
.det>p{max-width:56ch;color:#c9b8b3}
.det-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;margin-top:22px}
.det h4{font:600 14px var(--head);color:#ff7a88;margin-bottom:8px}
.det li{position:relative;padding:9px 0 9px 28px;border-top:1px solid #ffffff1a;font-size:15.5px;color:#e9dcd8}
.det li::before{content:"";position:absolute;left:2px;top:14px;width:13px;height:7px;border-left:2.5px solid #ff7a88;border-bottom:2.5px solid #ff7a88;transform:rotate(-45deg)}
.det .for{padding-left:16px;border-left:3px solid var(--red);font-size:15.5px;color:#e9dcd8}
.det .tags{margin:16px 0 0}
.det .tags li{padding:4px 12px;border:0;background:#ffffff1f;color:#ffd0d5;font-size:13px}
.det .tags li::before{display:none}
.det .btn{margin-top:22px}
.det .btn span{display:inline-block;transition:transform .3s}.det .btn:hover span{transform:translateX(5px)}

/* ===== CTA ===== */
.cx{padding:clamp(64px,8vw,104px) 0;background:var(--cream)}
.cx .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 48px}
.cx h2{flex:1 1 380px;margin:0;max-width:15ch;font-size:clamp(34px,5vw,64px);line-height:1.02}
.cx p{flex:1 1 260px;max-width:36ch;color:var(--brown-m)}

/* ===== Footer (same as home) ===== */
footer.ftr{position:relative;overflow:hidden;padding:clamp(56px,7vw,96px) 0 28px;color:#e9dcd8;
  background:radial-gradient(60% 70% at 12% 0%,#c8142b40,transparent 70%),linear-gradient(180deg,#2a1a17,#1b100e)}
footer.ftr::before{content:"";position:absolute;right:-6%;top:0;width:55%;height:60%;pointer-events:none;
  background:repeating-linear-gradient(135deg,#ffffff0f 0 1px,transparent 1px 22px);
  -webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
footer.ftr .wrap{position:relative;z-index:1}
footer.ftr a{color:inherit;text-decoration:none}
footer.ftr a:focus-visible{outline:2px solid #ff7a88;outline-offset:4px;border-radius:2px}
footer.ftr .ft-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2.4fr) minmax(0,3.6fr);column-gap:clamp(32px,6vw,96px);padding:0 0 clamp(48px,6vw,72px)}
footer.ftr .ft-word{display:inline-block;font:700 clamp(56px,6.5vw,92px)/1 var(--head);letter-spacing:-.03em;color:#fff6f3}
footer.ftr .ft-word span{color:var(--red,#c8142b);display:inline-block;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
footer.ftr .ft-word:hover span{transform:scaleX(1.5)}
footer.ftr .ft-rule{display:block;width:100%;max-width:360px;height:3px;margin:22px 0 20px;background:linear-gradient(90deg,var(--red,#c8142b) 0 56px,#ffffff26 56px)}
footer.ftr .ft-brand p{max-width:38ch;margin:0;font-size:16px;line-height:1.65;color:#c9b8b3}
footer.ftr .ft-col{display:block;position:static;min-width:0}
footer.ftr h4{display:block;margin:0 0 14px;font:600 14px var(--head);color:#ff7a88}
footer.ftr .ft-col>a,footer.ftr .ft-loc{display:flex;align-items:center;gap:12px;margin:0;padding:11px 0;font-size:17px;color:#e9dcd8}
footer.ftr .ft-nav a{position:relative;justify-content:space-between;border-bottom:1px solid #ffffff14;transition:color .3s,padding .3s}
footer.ftr .ft-nav a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:#ff7a88;transition:width .4s cubic-bezier(.2,.8,.2,1)}
footer.ftr .ft-nav a:hover{color:#fff;padding-left:6px}
footer.ftr .ft-nav a:hover::after{width:100%}
footer.ftr .ft-nav i,footer.ftr .ft-social i{font-style:normal;color:#ff7a88;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
footer.ftr .ft-nav a:hover i{opacity:1;transform:none}
footer.ftr svg{flex:none;width:20px;height:20px;color:#ff7a88}
footer.ftr .ft-contact a{transition:color .3s}
footer.ftr .ft-contact a:hover{color:#fff}
footer.ftr .ft-legal{display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap;padding-top:24px;border-top:1px solid #ffffff1f;font-size:14px;color:#a8958f}
footer.ftr .ft-social{display:flex;gap:26px;flex-wrap:wrap}
footer.ftr .ft-social a{display:inline-flex;align-items:center;gap:6px;transition:color .3s}
footer.ftr .ft-social a:hover{color:#fff}
footer.ftr .ft-social i{transform:none;opacity:.6}
footer.ftr .ft-social a:hover i{opacity:1;transform:translate(2px,-2px)}

/* ===== Responsive ===== */
@media(max-width:1100px){
  .pf-list{grid-template-columns:repeat(3,1fr)}
  .pf-list li:nth-child(4){border-left:0;padding-left:0}
  .pf-list li:nth-child(n+4){border-top:1px solid #2a1a1726}
}
@media(max-width:900px){
  .hx-in,.sr-grid{grid-template-columns:1fr}
  .hx{padding:40px 0 64px}
  .sb{box-shadow:8px 8px 0 var(--red)}
  .sr-list{flex-direction:row;overflow-x:auto;border:0;gap:8px;scrollbar-width:none;padding-bottom:6px}
  .sr-list::-webkit-scrollbar{display:none}
  .it{flex:none;padding:12px 18px;border:1.5px solid #ffffff33;border-radius:99px}
  .it h3{font-size:17px}.it small,.it::before{display:none}
  .it.on{background:var(--red);border-color:var(--red)}
  .it.on h3{transform:none}.it::after{display:none}
  .det-cols{grid-template-columns:1fr}
  footer.ftr .ft-grid{grid-template-columns:1fr 1fr;row-gap:44px}
  footer.ftr .ft-brand{grid-column:1 / -1}
}
@media(max-width:640px){
  .pf-list{grid-template-columns:1fr 1fr}
  .pf-list li{padding:18px 8px 18px 14px;border-left:1px solid #2a1a1726!important;border-top:1px solid #2a1a1726}
  .pf-list li:nth-child(odd){border-left:0!important;padding-left:0}
  .pf-list li:nth-child(-n+2){border-top:0}
  .pf-list li:last-child{grid-column:1 / -1}
}
@media(max-width:560px){
  .sb{padding:16px 14px 14px;box-shadow:6px 6px 0 var(--red)}
  .sb-bar{padding:0 9px}.sb-bar b{font-size:13.5px}.sb-bar small{display:none}
  .sb-lane{height:40px}
  .sb-wk span{font-size:11px;padding-left:5px}
  .stage .wf{width:84%}.stage .cur{display:none}
  footer.ftr .ft-grid{grid-template-columns:1fr}
  footer.ftr .ft-col>a,footer.ftr .ft-loc{min-height:48px}
  footer.ftr .ft-nav i{opacity:1;transform:none}
  footer.ftr .ft-legal{flex-direction:column;align-items:flex-start}
  .cx .btn{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .sb,.sb-bar,.sb-scan,.fl,.docs i,.wf div,.cur,.logo-draw,.it.on::after{animation:none!important}
  .sb-scan{display:none}
  .pf-list i::after{animation:none;clip-path:none}
  .hx h1 .ln>span{animation:none;transform:none}
  .it.on::after{width:100%}
}

/* hero buttons: stop wrapping / stretching */
.hx .cta .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;width:auto;height:auto;white-space:nowrap;line-height:1.2}
.it{display:block}
.sb-lane{align-items:stretch}
.sb-bar{overflow:hidden}