/* bnbly.co.uk additions (loaded after style.css) */
section{padding-block:80px}
section.tight{padding-block:56px}
section.white{background:#fff}

/* header + navigation */
.nav{display:flex;align-items:center;gap:22px;font-family:var(--head);font-weight:500;font-size:15px}
.nav>a,.nav .dd>button{color:var(--ink);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:8px 0;display:inline-flex;align-items:center;gap:6px}
.nav>a:hover,.nav .dd>button:hover,.nav a.on{color:var(--magenta)}
.nav .dd{position:relative}
.nav .dd>button::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.nav .dd-menu{position:absolute;top:100%;left:-18px;min-width:270px;background:#fff;border-radius:18px;box-shadow:0 18px 40px rgba(0,0,0,.12);padding:10px;display:none;z-index:30}
.nav .dd:hover .dd-menu,.nav .dd:focus-within .dd-menu,.nav .dd.open .dd-menu{display:block}
.dd-menu a{display:block;padding:10px 14px;border-radius:12px;text-decoration:none;color:var(--ink);font-family:var(--sub);font-weight:600;font-size:15px}
.dd-menu a small{display:block;font-family:var(--body);font-weight:500;color:#8a8a8a;font-size:13px}
.dd-menu a:hover{background:var(--bg);color:var(--magenta)}
.nav .btn{padding:12px 22px}
.burger{display:none;background:none;border:0;width:44px;height:44px;border-radius:12px;cursor:pointer;color:var(--ink)}
.burger svg{width:26px;height:26px}
.mnav{display:none}
@media (max-width:980px){
  .nav{display:none}
  .burger{display:grid;place-items:center}
  .mnav{position:fixed;inset:0;top:69px;background:#fff;z-index:19;overflow-y:auto;padding:12px 20px 40px}
  .mnav.open{display:block}
  .mnav b{display:block;font-family:var(--sub);color:#8a8a8a;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:18px 0 6px}
  .mnav a{display:block;padding:11px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-family:var(--sub);font-weight:600;font-size:17px}
  .mnav .btn{margin-top:22px;width:100%;border:0;color:#fff}
  body.menu-open{overflow:hidden}
}

/* page hero */
.page-hero{background:var(--band);color:#fff;padding:72px 0 66px;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-120px;top:-140px;width:440px;height:440px;border-radius:50%;background:rgba(255,255,255,.08)}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .tag{display:block;font-family:var(--sub);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.92}
.page-hero h1{color:#fff;margin-top:8px;font-size:clamp(36px,5.4vw,58px);max-width:860px}
.page-hero p{font-size:18px;max-width:60ch;margin:16px 0 26px;opacity:.96}
.page-hero .actions,.actions{display:flex;gap:12px;flex-wrap:wrap}
.home-hero{padding:96px 0 104px}
.home-hero h1{font-size:clamp(42px,6.6vw,74px)}

/* section headings */
.center h2{font-size:clamp(30px,4.4vw,48px)}
.lead{font-size:18px;color:var(--ink)}

/* tiles */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tile{background:#fff;border-radius:22px;padding:28px;box-shadow:0 10px 30px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--text)}
.bg-white .tile,section.white .tile{background:var(--bg);box-shadow:none}
a.tile{transition:transform .15s,box-shadow .15s}
a.tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(224,20,162,.12)}
.tile h3{font-size:20px}
.tile p{font-size:15px}
.tile .more{margin-top:auto;padding-top:8px;font-family:var(--sub);font-weight:700;color:var(--magenta);font-size:14px}
.tile .ico{width:48px;height:48px;border-radius:14px;background:var(--btn);display:grid;place-items:center;margin-bottom:6px}
.tile .ico svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand-tile{color:#fff;border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:10px;text-decoration:none;transition:transform .15s}
.brand-tile:hover{transform:translateY(-3px)}
.brand-tile.b1{background:linear-gradient(135deg,#e9770e,#f0592e)}
.brand-tile.b2{background:linear-gradient(135deg,#f229a4,#ec29f2)}
.brand-tile.b3{background:linear-gradient(135deg,#2a2a2a,#55505e)}
.brand-tile .tag{font-family:var(--sub);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.brand-tile h3{color:#fff;font-size:24px}
.brand-tile p{opacity:.95;font-size:15px}
.brand-tile .more{margin-top:auto;padding-top:10px;font-family:var(--sub);font-weight:700;font-size:14px}

/* lists */
ul.ticks{list-style:none;padding:0;margin:0}
ul.ticks li{padding:9px 0 9px 30px;position:relative;border-top:1px solid var(--line);color:var(--ink)}
ul.ticks li:first-child{border-top:0}
ul.ticks li::before{content:"✓";position:absolute;left:2px;top:9px;color:var(--magenta);font-weight:800}
ul.ticks.cols{columns:2;column-gap:32px}
ul.ticks.cols li{break-inside:avoid;border-top:0;border-bottom:1px solid var(--line)}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pills span{background:#fff;border:1px solid var(--line);border-radius:30px;padding:8px 16px;font-family:var(--sub);font-weight:600;font-size:14px;color:var(--ink)}

/* detail layout */
.detail{display:grid;grid-template-columns:1.4fr .9fr;gap:44px;align-items:start}
.detail h2{margin:36px 0 12px;font-size:26px}
.detail h2:first-child{margin-top:0}
.detail p{margin-bottom:12px}
.side{background:#fff;border-radius:22px;padding:28px;position:sticky;top:96px;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.side h3{margin-bottom:14px;font-size:20px}
.side dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0 0 22px;font-size:15px}
.side dt{font-family:var(--sub);font-weight:700;color:var(--ink)}
.side dd{margin:0}
.side .btn{width:100%}
.side .alt{display:block;text-align:center;margin-top:12px;font-size:14px}

/* split with image */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split img{width:100%;border-radius:24px;aspect-ratio:4/3;object-fit:cover;background:#eee}
.split h2{font-size:clamp(28px,3.8vw,40px);margin-bottom:14px}
.split p+p{margin-top:12px}

/* results */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.result{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.05)}
.result img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:#eee}
.result div{padding:22px 24px 24px}
.result h3{font-size:19px;margin-bottom:8px}
.result ul{list-style:none;padding:0;margin:0}
.result li{padding:4px 0;font-size:15px}
.result strong{font-family:var(--head);background:var(--btn);-webkit-background-clip:text;background-clip:text;color:transparent}

/* stats strip */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.numbers strong{display:block;font-family:var(--head);font-size:clamp(30px,4vw,44px);letter-spacing:-.04em;background:var(--btn);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.numbers span{font-size:15px}

/* quotes */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.quote{background:#fff;border-radius:22px;padding:28px;box-shadow:0 10px 30px rgba(0,0,0,.05);margin:0}
.quote p{font-size:16px;color:var(--ink);line-height:1.6}
.quote p::before{content:"“";display:block;font-family:var(--head);font-size:56px;line-height:.6;margin-bottom:8px;background:var(--btn);-webkit-background-clip:text;background-clip:text;color:transparent}
.quote cite{display:block;margin-top:14px;font-size:14px;color:#8a8a8a;font-style:normal;font-weight:600}

/* logos */
.logos{display:flex;flex-wrap:wrap;gap:12px}
.logos span{background:#fff;border-radius:14px;padding:12px 18px;font-family:var(--sub);font-weight:700;color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.05)}

/* faq */
.faq-list{max-width:820px;margin:0 auto}

/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
.contact .ways{display:grid;gap:14px;margin-top:22px}
.contact .ways a,.contact .ways div{display:flex;gap:14px;align-items:center;background:#fff;border-radius:18px;padding:16px 18px;text-decoration:none;color:var(--ink);font-family:var(--sub);font-weight:700}
.contact .ways small{display:block;font-family:var(--body);font-weight:500;color:#8a8a8a;font-size:13px}
.contact .ways i{flex:none;width:42px;height:42px;border-radius:12px;background:var(--btn);display:grid;place-items:center}
.contact .ways i svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sent{background:#fff;border-radius:26px;padding:36px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.sent h3{font-size:26px;margin-bottom:8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-err{background:#fff5f5;color:#b91c1c;border-radius:12px;padding:10px 14px;font-weight:600;font-size:14px}

/* legal */
.legal ul{padding-left:20px}
.legal-wrap{padding-block:56px 80px}

/* footer */
.foot{grid-template-columns:1.3fr 1fr 1fr 1fr}
.foot-brand img{height:44px;width:auto;content:url(/bnbly-logo-dark.png);background:none;padding:0;border-radius:0}
.foot-base{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
.foot-base a{color:#8d8d8d;text-decoration:none;margin-left:16px}
.foot-base a:hover{color:#fff}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:38px;height:38px;border-radius:50%;background:#3a3a3a;display:grid!important;place-items:center;padding:0!important}
.social svg{width:18px;height:18px;fill:#fff}

@media (max-width:980px){
  .grid3,.results,.grid4{grid-template-columns:1fr 1fr}
  .detail,.split,.contact{grid-template-columns:1fr}
  .side{position:static}
  .numbers{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  section{padding-block:56px}
  .grid3,.grid2,.results,.quotes,.grid4{grid-template-columns:1fr}
  ul.ticks.cols{columns:1}
  .page-hero{padding:54px 0 50px}
  .home-hero{padding:64px 0 70px}
  .foot{grid-template-columns:1fr}
  .foot-base a{margin:0 16px 0 0}
  .center{margin-bottom:36px}
}
.nav>a.btn{background:var(--btn);color:#fff;padding:12px 22px;font-family:"Open Sans",var(--body);font-weight:700;font-size:13px}
.nav>a.btn:hover{color:#fff}
section.white .how li{background:var(--bg)}
.how.n3{grid-template-columns:repeat(3,1fr)}
@media (max-width:920px){.how.n3,.how.n4{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.how.n3,.how.n4{grid-template-columns:1fr}}
body.menu-open #bnbly-chat{display:none}
.foot{grid-template-columns:1.2fr repeat(4,1fr)}
@media (max-width:980px){.foot{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.foot{grid-template-columns:1fr}}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chips-row .chip{display:inline-block;padding:8px 15px;border-radius:30px;background:#fff;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-family:var(--sub);font-weight:600;font-size:14px}
.chips-row .chip:hover{border-color:var(--pink);color:var(--magenta)}
section.white .chips-row .chip{background:var(--bg)}
.area-group{margin-bottom:26px}.area-group h3{font-size:17px;margin-bottom:8px}
.ck-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:2147482000;max-width:720px;margin:0 auto;background:#fff;border-radius:20px;box-shadow:0 18px 50px rgba(0,0,0,.2);padding:16px 18px;display:flex;gap:14px;align-items:center;font-size:14px}
.ck-bar p{flex:1}.ck-bar a{color:var(--magenta);font-weight:700}
.ck-bar div{display:flex;gap:8px;flex:none}
.ck-bar button{font:inherit;font-weight:700;border:0;border-radius:30px;padding:10px 18px;cursor:pointer}
.ck-bar .ck-yes{background:var(--btn);color:#fff}.ck-bar .ck-no{background:#f1f1f3;color:var(--ink)}
@media (max-width:560px){.ck-bar{flex-direction:column;align-items:stretch}.ck-bar div button{flex:1}}
.detail .grid3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.statcard{background:var(--band);color:#fff;border-radius:24px;padding:34px;display:flex;flex-direction:column;gap:4px;min-height:260px;justify-content:center}
.statcard span{font-family:var(--sub);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.9;margin-top:10px}
.statcard span:first-child{margin-top:0}
.statcard b{font-family:var(--head);font-weight:600;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;line-height:1.1}
.statcard p{opacity:.95;margin:6px 0 4px}
.statcard .btn{align-self:flex-start;margin-top:14px}
/* ---- homepage ---- */
.hh{background:var(--band);color:#fff;position:relative;overflow:hidden;padding:72px 0 28px}
.hh::before{content:"";position:absolute;left:-160px;bottom:-220px;width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.07)}
.hh::after{content:"";position:absolute;right:-120px;top:-160px;width:460px;height:460px;border-radius:50%;background:rgba(255,255,255,.08)}
.hh-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;position:relative;z-index:1}
.hh-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:30px;padding:7px 14px;font-family:var(--sub);font-weight:700;font-size:13px}
.hh-pill i{width:8px;height:8px;border-radius:50%;background:#7CFFB2;box-shadow:0 0 0 3px rgba(124,255,178,.3)}
.hh h1{color:#fff;font-size:clamp(48px,7.4vw,92px);line-height:.95;margin:18px 0 0}
.hh-grad{color:#fff;text-shadow:0 6px 30px rgba(120,0,80,.25)}
.hh p{font-size:18px;max-width:52ch;margin:20px 0 26px;opacity:.96}
.hh-ticks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:700;font-size:14px}
.hh-ticks li::before{content:"✓ ";color:#fff}
.hh-visual{position:relative;height:460px}
.hh-photo{position:absolute;border-radius:26px;overflow:hidden;box-shadow:0 30px 60px rgba(90,0,60,.35);border:6px solid rgba(255,255,255,.9)}
.hh-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hh-photo.p1{left:0;top:10px;width:78%;height:320px;transform:rotate(-2deg)}
.hh-photo.p2{right:0;bottom:0;width:56%;height:230px;transform:rotate(3deg)}
.hh-float{position:absolute;background:#fff;color:var(--ink);border-radius:18px;padding:12px 16px;box-shadow:0 18px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:2px;font-size:13px;animation:bob 6s ease-in-out infinite}
.hh-float b{font-family:var(--head);font-size:20px;letter-spacing:-.02em;background:var(--btn);-webkit-background-clip:text;background-clip:text;color:transparent}
.hh-float span{color:#666;font-weight:600}
.hh-float.f1{left:-10px;bottom:120px}
.hh-float.f2{right:-6px;top:0;flex-direction:row;align-items:center;gap:10px;animation-delay:-2s}
.hh-float.f2 b{font-size:14px;font-family:var(--sub);color:var(--ink);background:none;-webkit-text-fill-color:var(--ink)}
.hh-float.f2 .dot{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2);flex:none}
.hh-float.f2 div{display:flex;flex-direction:column}
.hh-float.f3{left:22%;bottom:-6px;animation-delay:-4s}
.stars{display:inline-flex;gap:2px}.stars svg{width:16px;height:16px;fill:#ffb400}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hh-plat{position:relative;z-index:1;margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.25);display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;font-size:14px;opacity:.95}
.hh-plat span{font-weight:600}
.hh-plat b{font-family:var(--head);font-size:20px;letter-spacing:-.02em}
.ptile{display:flex;flex-direction:column;background:#fff;border-radius:24px;overflow:hidden;text-decoration:none;color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s}
.ptile:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(224,20,162,.14)}
.ptile img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#eee}
.ptile>div{padding:24px 26px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.ptile .tag{font-family:var(--sub);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta)}
.ptile h3{font-size:21px}.ptile p{font-size:15px}
.ptile .more{margin-top:auto;padding-top:8px;font-family:var(--sub);font-weight:700;color:var(--magenta);font-size:14px}
.ptile.dark{background:linear-gradient(160deg,#2a2a2a,#4a4352);color:#d8d4de}
.ptile.dark h3{color:#fff}.ptile.dark .tag,.ptile.dark .more{color:#ffb35c}
.ptile-ico{aspect-ratio:16/10;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,rgba(255,171,0,.35),transparent 60%),radial-gradient(circle at 70% 70%,rgba(236,41,242,.35),transparent 60%)}
.ptile-ico svg{width:72px;height:72px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tl{background:#fff;border-radius:24px;padding:26px 28px;box-shadow:0 18px 44px rgba(0,0,0,.08);border:1px solid var(--line)}
.tl-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.tl-head b{font-family:var(--sub);color:var(--ink);font-size:17px}
.tl-badge{background:#e6f7ee;color:#18794e;border-radius:30px;padding:5px 12px;font-size:12px;font-weight:700}
.tl ol{list-style:none;padding:0;margin:0;position:relative}
.tl ol::before{content:"";position:absolute;left:52px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl li{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:10px 0;position:relative}
.tl li::before{content:"";position:absolute;left:47px;top:16px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--pink)}
.tl li.ok::before{background:var(--pink)}
.tl time{font-family:var(--head);font-weight:600;color:var(--ink);font-size:14px;padding-top:2px}
.tl li div{padding-left:6px}
.tl li b{display:block;color:var(--ink);font-family:var(--sub);font-size:15px}
.tl li span{font-size:14px;color:#777}
.tl-note{font-size:12px;color:#9a9a9a;margin-top:10px}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.opt{background:#fff;border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.05);border:2px solid transparent}
.opt:first-child{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--btn) border-box;box-shadow:0 22px 44px rgba(224,20,162,.14)}
.opt .tag{align-self:flex-start;background:var(--blush,#fdf0f8);color:var(--magenta);border-radius:30px;padding:5px 12px;font-family:var(--sub);font-size:12px;font-weight:700}
.opt h3{font-size:24px}.opt-price{font-family:var(--sub);font-weight:700;color:var(--ink)}
.opt ul.ticks{flex:1;margin-bottom:10px}
.opt .btn{align-self:stretch}
.btn-ghost-dark{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn-ghost-dark:hover{box-shadow:inset 0 0 0 2px var(--pink);color:var(--magenta)}
.opts-note{text-align:center;margin-top:22px;font-size:14px;color:#777}
.feature-quote{background:linear-gradient(135deg,#2a2a2a,#4a4352);color:#fff;text-align:center;padding-block:76px}
.feature-quote blockquote{margin:16px auto 14px;max-width:820px;font-family:var(--head);font-weight:600;font-size:clamp(24px,3.4vw,38px);line-height:1.2;letter-spacing:-.02em}
.feature-quote cite{font-style:normal;color:#cfcbe0;font-weight:600}
.feature-quote .stars svg{width:22px;height:22px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.hh-float{animation:none}}
@media (max-width:980px){
  .hh-grid{grid-template-columns:1fr}
  .hh-visual{height:380px;max-width:560px}
  .opts{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hh{padding:48px 0 22px}
  .hh-visual{height:300px}
  .hh-photo.p1{height:210px;width:82%}
  .hh-photo.p2{height:150px;width:58%}
  .hh-float{font-size:12px;padding:10px 12px}
  .hh-float b{font-size:16px}
  .hh-float.f1{left:0;bottom:90px}
  .hh-float.f2{right:0;top:-6px}
  .hh-float.f3{left:4%;bottom:-10px}
  .hh-plat b{font-size:17px}
  .tl ol::before{left:46px}.tl li{grid-template-columns:40px 1fr;gap:16px}.tl li::before{left:41px}
}