/* Bella Interior Design — Styles Hub. Extends homepage typography, container and style-card system. */
.styles-hub{--sh-text:#191919;--sh-muted:#5f6362;--sh-sage:#718078;--sh-deep:#46534d;--sh-line:#d9dddb;--sh-mist:#f4f5f5;--sh-dark:#111312;color:var(--sh-text);font-family:"Plus Jakarta Sans",sans-serif;background:#fff;overflow:clip}
.styles-hub__hero{padding:clamp(92px,10vw,154px) 0 clamp(74px,8vw,118px);border-bottom:1px solid var(--sh-line)}
.styles-hub__hero-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.48fr);gap:clamp(44px,8vw,120px);align-items:end}
.styles-hub__script{font-family:"Parisienne",cursive;font-size:clamp(27px,2.4vw,34px);line-height:1;color:var(--sh-sage);margin-bottom:18px}
.styles-hub h1,.styles-hub h2,.styles-hub h3{color:var(--sh-text)}
.styles-hub__hero h1{max-width:980px;margin:0;font-size:clamp(46px,5.45vw,82px);line-height:.99;letter-spacing:-.055em;font-weight:600}
.styles-hub__hero-intro{max-width:900px;margin:30px 0 0;font-size:clamp(18px,1.45vw,22px);line-height:1.68;color:#363a38}
.styles-hub__hero-supporting{max-width:760px;margin:18px 0 0;font-size:15px;line-height:1.75;color:var(--sh-muted)}
.styles-hub__hero-actions,.styles-hub__closing-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.styles-hub__button{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:50px;padding:0 20px;border:1px solid var(--sh-deep);color:var(--sh-deep);text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.04em;transition:transform .25s ease,background .25s ease,color .25s ease}
.styles-hub__button:hover{transform:translateY(-2px);background:var(--sh-deep);color:#fff}.styles-hub__button--solid{background:var(--sh-deep);color:#fff}.styles-hub__button--solid:hover{background:var(--sh-dark)}
.styles-hub__hero-stats{border-top:1px solid var(--sh-line);border-bottom:1px solid var(--sh-line)}
.styles-hub__hero-stats>div{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--sh-line)}.styles-hub__hero-stats>div:last-child{border-bottom:0}
.styles-hub__hero-stats strong{font-size:clamp(30px,3vw,44px);line-height:1;letter-spacing:-.05em;font-weight:500;color:var(--sh-deep)}.styles-hub__hero-stats span{font-size:11px;line-height:1.45;text-transform:uppercase;letter-spacing:.13em;color:var(--sh-muted)}
.styles-hub__section{padding:clamp(78px,8.6vw,132px) 0}.styles-hub__section--mist{background:var(--sh-mist)}.styles-hub__section--dark{background:var(--sh-dark);color:#fff}.styles-hub__section--dark h2,.styles-hub__section--dark h3{color:#fff}.styles-hub__section--dark .styles-hub__lead,.styles-hub__section--dark p{color:#c9cdcb}.styles-hub__section--dark .styles-hub__script{color:#a9b4ae}
.styles-hub__split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:clamp(54px,8vw,122px);align-items:start}
.styles-hub__split h2,.styles-hub__section-head h2,.styles-hub__faq h2,.styles-hub__closing h2{margin:0;font-size:clamp(32px,3.25vw,48px);line-height:1.08;letter-spacing:-.045em;font-weight:600}
.styles-hub__lead,.styles-hub__section-head>p{margin:22px 0 0;font-size:16px;line-height:1.78;color:var(--sh-muted);max-width:850px}.styles-hub__section-head{max-width:980px;margin-bottom:clamp(42px,5vw,70px)}
.styles-hub__stack{display:grid}.styles-hub__numbered{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:24px 0;border-top:1px solid var(--sh-line)}.styles-hub__numbered:last-child{border-bottom:1px solid var(--sh-line)}.styles-hub__numbered>span{font-size:11px;letter-spacing:.14em;color:var(--sh-sage);padding-top:4px}.styles-hub__numbered h3{margin:0 0 8px;font-size:18px;line-height:1.3}.styles-hub__numbered p{margin:0;color:var(--sh-muted);font-size:14px;line-height:1.72}
.styles-hub__stack--dark .styles-hub__numbered{border-color:#303432}.styles-hub__stack--dark .styles-hub__numbered:last-child{border-bottom-color:#303432}.styles-hub__stack--dark .styles-hub__numbered>span{color:#9faaA4}
.styles-hub__context-link{margin:clamp(46px,5vw,72px) 0 0;padding:24px 0 0;border-top:1px solid var(--sh-line);font-size:14px;line-height:1.8;color:var(--sh-muted);max-width:1050px}.styles-hub__context-link a{color:var(--sh-deep);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.styles-hub__library.bella-styles{padding:clamp(84px,9vw,138px) 0}.styles-hub__library .bella-style-card{flex-basis:calc(25% - 22px);max-width:305px}.styles-hub__library .bella-style-card__back{overflow-y:auto}.styles-hub__library .bella-style-card__effect{font-size:10.5px;line-height:1.38}
.styles-hub__fundamentals{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--sh-line);border-bottom:1px solid var(--sh-line)}.styles-hub__fundamentals article{padding:25px 18px 26px;border-right:1px solid var(--sh-line)}.styles-hub__fundamentals article:last-child{border-right:0}.styles-hub__fundamentals span{display:block;margin-bottom:31px;font-size:10px;letter-spacing:.14em;color:var(--sh-sage)}.styles-hub__fundamentals h3{margin:0 0 8px;font-size:17px}.styles-hub__fundamentals p{margin:0;color:var(--sh-muted);font-size:12px;line-height:1.65}
.styles-hub__table-wrap{overflow-x:auto;border:1px solid var(--sh-line);background:#fff}.styles-hub__table{width:100%;border-collapse:collapse;min-width:900px}.styles-hub__table th,.styles-hub__table td{padding:20px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--sh-line);border-right:1px solid var(--sh-line);font-size:13px;line-height:1.55}.styles-hub__table tr:last-child th,.styles-hub__table tr:last-child td{border-bottom:0}.styles-hub__table th:last-child,.styles-hub__table td:last-child{border-right:0}.styles-hub__table thead th{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--sh-muted);font-weight:700}.styles-hub__table tbody th{width:150px;color:var(--sh-deep);font-size:14px}.styles-hub__table td{color:var(--sh-muted)}
.styles-hub__palettes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.styles-hub__palettes article{border:1px solid var(--sh-line);padding:28px;background:#fff}.styles-hub__palettes h3{margin:0 0 7px;font-size:20px}.styles-hub__palettes p{margin:0;color:var(--sh-muted);font-size:13px;line-height:1.6}.styles-hub__swatches{display:grid;grid-template-columns:repeat(4,1fr);margin-top:24px;border-top:1px solid var(--sh-line)}.styles-hub__swatches span{padding-top:16px;min-width:0}.styles-hub__swatches i{display:block;width:38px;height:38px;background:var(--swatch);border:1px solid rgba(17,19,18,.12);border-radius:50%;margin-bottom:10px}.styles-hub__swatches b,.styles-hub__swatches small{display:block}.styles-hub__swatches b{font-size:10px;line-height:1.3}.styles-hub__swatches small{margin-top:3px;font-size:9px;letter-spacing:.05em;color:var(--sh-muted)}
.styles-hub__style-notes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#303432;margin-top:54px;border:1px solid #303432}.styles-hub__style-notes article{background:#171a18;padding:24px}.styles-hub__style-notes strong{font-size:13px;color:#fff}.styles-hub__style-notes p{margin:9px 0 0;color:#aeb4b1!important;font-size:12px;line-height:1.65}
.styles-hub__four-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--sh-line);border-bottom:1px solid var(--sh-line)}.styles-hub__four-grid article{padding:28px 24px;border-right:1px solid var(--sh-line)}.styles-hub__four-grid article:last-child{border-right:0}.styles-hub__four-grid h3{margin:0 0 10px;font-size:18px}.styles-hub__four-grid p{margin:0;color:var(--sh-muted);font-size:13px;line-height:1.7}.styles-hub__note{max-width:990px;margin:34px 0 0;padding-left:18px;border-left:2px solid var(--sh-sage);font-size:13px;line-height:1.75;color:var(--sh-muted)}
.styles-hub__small-note{margin:22px 0 0;color:var(--sh-muted);font-size:12px;line-height:1.65}.styles-hub__text-link{display:inline-flex;gap:9px;margin-top:22px;color:var(--sh-deep);font-size:12px;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(70,83,77,.35);padding-bottom:4px}.styles-hub__micro-label{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--sh-muted);margin-bottom:15px}.styles-hub__benchmarks{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--sh-line);border-left:1px solid var(--sh-line);background:#fff}.styles-hub__benchmarks div{padding:20px;border-right:1px solid var(--sh-line);border-bottom:1px solid var(--sh-line)}.styles-hub__benchmarks span,.styles-hub__benchmarks strong{display:block}.styles-hub__benchmarks span{font-size:10px;line-height:1.4;text-transform:uppercase;letter-spacing:.08em;color:var(--sh-muted)}.styles-hub__benchmarks strong{margin-top:8px;font-size:20px;letter-spacing:-.025em;color:var(--sh-deep)}.styles-hub__drivers{margin:24px 0 0;padding:0;list-style:none}.styles-hub__drivers li{position:relative;padding:9px 0 9px 20px;border-bottom:1px solid var(--sh-line);font-size:12px;line-height:1.55;color:var(--sh-muted)}.styles-hub__drivers li:before{content:"";position:absolute;left:0;top:16px;width:5px;height:5px;border-radius:50%;background:var(--sh-sage)}
.styles-hub__uae-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--sh-line);border-left:1px solid var(--sh-line)}.styles-hub__uae-grid article{padding:28px;border-right:1px solid var(--sh-line);border-bottom:1px solid var(--sh-line)}.styles-hub__uae-grid span{display:block;margin-bottom:24px;font-size:10px;letter-spacing:.14em;color:var(--sh-sage)}.styles-hub__uae-grid h3{margin:0 0 8px;font-size:18px}.styles-hub__uae-grid p{margin:0;color:var(--sh-muted);font-size:13px;line-height:1.7}
.styles-hub__service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.styles-hub__service-grid a{display:flex;flex-direction:column;min-height:200px;padding:26px;border:1px solid var(--sh-line);background:#fff;color:inherit;text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.styles-hub__service-grid a:hover{transform:translateY(-3px);border-color:#b7c0bb;box-shadow:0 18px 42px rgba(17,19,18,.06)}.styles-hub__service-grid h3{margin:0 0 10px;font-size:18px}.styles-hub__service-grid p{margin:0;color:var(--sh-muted);font-size:12px;line-height:1.65}.styles-hub__service-grid span{margin-top:auto;padding-top:22px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--sh-deep);font-weight:700}
.styles-hub__faq-grid{display:grid;grid-template-columns:minmax(250px,.55fr) minmax(0,1fr);gap:clamp(50px,8vw,120px);align-items:start}.styles-hub__faq-list{border-top:1px solid var(--sh-line)}.styles-hub__faq-item{border-bottom:1px solid var(--sh-line)}.styles-hub__faq-item button{width:100%;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;text-align:left;border:0;background:transparent;padding:22px 0;color:var(--sh-text);font:600 15px/1.45 "Plus Jakarta Sans",sans-serif;cursor:pointer}.styles-hub__faq-item button i{font-style:normal;font-size:22px;font-weight:400;color:var(--sh-sage);transition:transform .25s ease}.styles-hub__faq-item.is-open button i{transform:rotate(45deg)}.styles-hub__faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}.styles-hub__faq-answer>p{overflow:hidden;margin:0;color:var(--sh-muted);font-size:13px;line-height:1.75;max-width:840px}.styles-hub__faq-item.is-open .styles-hub__faq-answer{grid-template-rows:1fr}.styles-hub__faq-item.is-open .styles-hub__faq-answer>p{padding-bottom:22px}
.styles-hub__closing{padding:clamp(80px,8vw,122px) 0;background:var(--sh-deep);color:#fff}.styles-hub__closing-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:60px;align-items:end}.styles-hub__closing h2{color:#fff;max-width:900px}.styles-hub__closing p{max-width:780px;margin:20px 0 0;color:#dce1de;font-size:15px;line-height:1.75}.styles-hub__closing .styles-hub__script{color:#c3cdc7}.styles-hub__closing .styles-hub__button{border-color:#fff;color:#fff}.styles-hub__closing .styles-hub__button--solid{background:#fff;color:var(--sh-deep)}.styles-hub__closing-actions{margin-top:0;justify-content:flex-end}
[data-styles-reveal]{opacity:0;transform:translateY(20px);transition:opacity .68s ease,transform .68s cubic-bezier(.2,.75,.2,1)}[data-styles-reveal].is-visible{opacity:1;transform:none}
@media(max-width:1180px){.styles-hub__fundamentals{grid-template-columns:repeat(4,1fr)}.styles-hub__fundamentals article:nth-child(4){border-right:0}.styles-hub__fundamentals article:nth-child(n+5){border-top:1px solid var(--sh-line)}.styles-hub__library .bella-style-card{flex-basis:calc(33.333% - 20px)}.styles-hub__service-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.styles-hub__hero-grid,.styles-hub__split,.styles-hub__faq-grid,.styles-hub__closing-grid{grid-template-columns:1fr}.styles-hub__hero-stats{display:grid;grid-template-columns:repeat(3,1fr)}.styles-hub__hero-stats>div{display:block;border-bottom:0;border-right:1px solid var(--sh-line);padding:18px}.styles-hub__hero-stats>div:last-child{border-right:0}.styles-hub__style-notes,.styles-hub__four-grid{grid-template-columns:repeat(2,1fr)}.styles-hub__four-grid article:nth-child(2){border-right:0}.styles-hub__four-grid article:nth-child(n+3){border-top:1px solid var(--sh-line)}.styles-hub__uae-grid{grid-template-columns:repeat(2,1fr)}.styles-hub__closing-actions{justify-content:flex-start}.styles-hub__library .bella-style-card{flex-basis:calc(50% - 12px);max-width:340px}}
@media(max-width:650px){.styles-hub__hero{padding-top:70px}.styles-hub__hero h1{font-size:clamp(42px,12vw,58px)}.styles-hub__hero-stats{grid-template-columns:1fr}.styles-hub__hero-stats>div{display:grid;border-right:0;border-bottom:1px solid var(--sh-line);padding:16px 0}.styles-hub__fundamentals,.styles-hub__palettes,.styles-hub__style-notes,.styles-hub__four-grid,.styles-hub__uae-grid,.styles-hub__service-grid,.styles-hub__benchmarks{grid-template-columns:1fr}.styles-hub__fundamentals article,.styles-hub__fundamentals article:nth-child(4){border-right:0;border-top:1px solid var(--sh-line)}.styles-hub__fundamentals article:first-child{border-top:0}.styles-hub__four-grid article,.styles-hub__four-grid article:nth-child(2){border-right:0;border-top:1px solid var(--sh-line)}.styles-hub__four-grid article:first-child{border-top:0}.styles-hub__swatches{grid-template-columns:repeat(2,1fr);gap:12px}.styles-hub__style-notes{gap:1px}.styles-hub__library .bella-style-card{width:min(100%,360px);max-width:360px;flex-basis:auto}.styles-hub__closing-actions,.styles-hub__hero-actions{display:grid;grid-template-columns:1fr}.styles-hub__button{width:100%}}
@media(prefers-reduced-motion:reduce){[data-styles-reveal]{opacity:1;transform:none;transition:none}.styles-hub__faq-answer,.styles-hub__faq-item button i,.styles-hub__button,.styles-hub__service-grid a{transition:none!important}}

/* =========================================================
   2026-10-04 v2 — Styles hub refinements
   - Hero now uses the exact Services hub hero component.
   - Style-card front copy is explicitly white and slightly smaller
     so long style names remain readable over photography.
   ========================================================= */
.styles-hub__library .bella-style-card__shade{
  background:linear-gradient(180deg,rgba(17,19,18,.03) 26%,rgba(17,19,18,.24) 56%,rgba(17,19,18,.92) 100%);
}
.styles-hub__library .bella-style-card__front-copy,
.styles-hub__library .bella-style-card__front-copy h3,
.styles-hub__library .bella-style-card__front-copy small,
.styles-hub__library .bella-style-card__number{
  color:#fff !important;
}
.styles-hub__library .bella-style-card__front-copy{
  left:20px;
  right:20px;
  gap:12px;
  text-shadow:0 2px 12px rgba(0,0,0,.34);
}
.styles-hub__library .bella-style-card__front-copy h3{
  font-size:clamp(17px,1.18vw,20px);
  line-height:1.08;
  letter-spacing:-.025em;
  font-weight:600;
}
.styles-hub__library .bella-style-card__front-copy small{
  margin-bottom:6px;
  font-size:9.5px;
  line-height:1.25;
  letter-spacing:.12em;
}
.styles-hub__library .bella-style-card__number{
  font-size:12px;
  padding-bottom:3px;
  opacity:.86;
}
.styles-hub__library .bella-style-card__flip{
  color:#fff !important;
  text-shadow:0 1px 8px rgba(0,0,0,.3);
}

@media(max-width:650px){
  .styles-hub__library .bella-style-card__front-copy h3{font-size:18px}
}