.bo-wrap{--gold:#c9971c;--gold-dark:#7a5a12;--line:#ece6d8;--ink:#1c1c1c;--ease:cubic-bezier(.22,.61,.36,1);max-width:1200px;margin:0 auto;padding:70px 24px;box-sizing:border-box}
.bo-wrap *{box-sizing:border-box}

/* Header */
.bo-head{text-align:center;margin-bottom:56px}
.bo-eyebrow{display:inline-block;color:var(--gold);font-size:14px;letter-spacing:.5px;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid var(--gold)}
.bo-title{margin:16px 0 12px;font-size:32px;line-height:1.2;font-weight:700;text-transform:uppercase;color:var(--ink)}
.bo-title span{color:var(--gold)}
.bo-sub{margin:0;color:#333;font-size:15px;text-transform:capitalize}

/* Grid: 7/5 on the first row, 6/6 on the second (repeats every 4 cards) */
.bo-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bo-card:nth-child(4n+1){grid-column:span 6}
.bo-card:nth-child(4n+2){grid-column:span 6}
.bo-card:nth-child(4n+3),
.bo-card:nth-child(4n+4){grid-column:span 6}

/* Cards (white by default) */
.bo-card{
 position:relative;isolation:isolate;overflow:hidden;
 display:flex;flex-direction:column;align-items:flex-start;gap:14px;
 min-height:170px;padding:28px 32px 30px;
 background:#fff;border:1px solid var(--line);border-radius:14px;
 box-shadow:0 6px 24px rgba(28,28,28,.05);color:var(--ink);
 transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
 will-change:transform;
}
.bo-card > *{position:relative;z-index:1}

.bo-card-title{margin:0;font-size:22px;font-weight:700;line-height:1.25;color:var(--ink);transition:color .45s var(--ease)}
.bo-card-text{margin:0;max-width:430px;font-size:13px;line-height:1.7;color:#444;transition:color .45s var(--ease)}

.bo-btn{margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:6px;background:var(--gold);color:#fff;font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;text-decoration:none;transition:background-color .35s var(--ease),transform .35s var(--ease),color .35s var(--ease)}
.bo-btn span{display:inline-block;transition:transform .35s var(--ease)}
.bo-btn:hover{background:#b0820f;color:#fff}

/* Gold gradient layer: fades in on hover instead of being there from the start */
.bo-card::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(110deg,var(--gold-dark) 0%,#a67c1a 55%,var(--gold) 100%);
 opacity:0;transition:opacity .5s var(--ease);
}
/* Decorative circle + arc: fade/slide in with the gradient */
.bo-card::after{
 content:"";position:absolute;z-index:0;pointer-events:none;
 top:0;inset-inline-end:0;width:220px;height:260px;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='260' viewBox='0 0 220 260' fill='none' stroke='rgba(255,255,255,.16)' stroke-width='2'%3E%3Ccircle cx='175' cy='55' r='74'/%3E%3Cpath d='M148 120V212a28 28 0 0 0 28 28a28 28 0 0 0 28-28V120'/%3E%3C/svg%3E") no-repeat right top;
 opacity:0;transform:translateY(-10px);
 transition:opacity .5s var(--ease),transform .6s var(--ease);
}

/* Hover / keyboard focus state */
.bo-card:hover,
.bo-card:focus-within{
 transform:translateY(-4px);border-color:transparent;
 box-shadow:0 14px 34px rgba(122,90,18,.28);
 transform:scaleX(1.02);
}
.bo-card:hover::before,
.bo-card:focus-within::before{opacity:1}
.bo-card:hover::after,
.bo-card:focus-within::after{opacity:1;transform:none}
.bo-card:hover .bo-card-title,
.bo-card:focus-within .bo-card-title{color:#fff}
.bo-card:hover .bo-card-text,
.bo-card:focus-within .bo-card-text{color:rgba(255,255,255,.92)}
.bo-card:hover .bo-btn,
.bo-card:focus-within .bo-btn{background:rgba(255,255,255,.22)}
.bo-card:hover .bo-btn:hover,
.bo-card:focus-within .bo-btn:hover{background:rgba(255,255,255,.34)}
.bo-card:hover .bo-btn span{transform:translateX(3px)}
[dir="rtl"] .bo-card:hover .bo-btn span{transform:translateX(-3px)}

/* RTL */
[dir="rtl"] .bo-card,
[dir="rtl"] .bo-head{text-align:right}
[dir="rtl"] .bo-head{text-align:center}
[dir="rtl"] .bo-btn{letter-spacing:0}
[dir="rtl"] .bo-card::after{transform:scaleX(-1) translateY(-10px)}
[dir="rtl"] .bo-card:hover::after,
[dir="rtl"] .bo-card:focus-within::after{transform:scaleX(-1)}

/* Tablet (iPad): one column, full-width cards, normal-case subtitle */
@media (max-width:1024px){
 .bo-wrap{padding:60px 24px}
 .bo-head{margin-bottom:36px}
 .bo-title{font-size:28px}
 .bo-sub{text-transform:none}
 .bo-grid{grid-template-columns:1fr}
 .bo-card:nth-child(n){grid-column:auto}
 .bo-card{min-height:0}
 .bo-card-text{max-width:none}
}

/* Mobile */
@media (max-width:767px){
 .bo-wrap{padding:48px 24px}
 .bo-head{margin-bottom:28px}
 .bo-title{font-size:22px}
 .bo-sub{font-size:14px}
 .bo-grid{grid-template-columns:1fr;gap:16px}
 .bo-card:nth-child(n){grid-column:auto}
 .bo-card{gap:12px;padding:22px 22px 24px;border-radius:12px}
 .bo-card-title{font-size:18px}
 .bo-card-text{font-size:13px;line-height:1.65}
 .bo-btn{padding:10px 16px;font-size:11px}
 .bo-card::after{background-size:150px auto}
}

/* Touch devices: no sticky hover lift */
@media (hover:none){
 .bo-card:hover{transform:none}
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion:reduce){
 .bo-card,.bo-card::before,.bo-card::after,.bo-card-title,.bo-card-text,.bo-btn,.bo-btn span{transition:none}
}