/* Opulence Interiors — homepage section styles
 * Sourced from brief/opulence-interiors-homepage.html. Builds on tokens.css,
 * components.css, theme.css and chrome.css. Loaded only on the front page.
 */

/* ══════════════════ badges & live pills ══════════════════ */
.badge { font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid; border-radius: 2px; font-weight: 500; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.badge-in { color: #2f6a48; border-color: rgba(78, 140, 99, .5); background: rgba(78, 140, 99, .14); }
.badge-in::before { background: var(--stock-in); }
.badge-low { color: #8a6320; border-color: rgba(185, 131, 43, .5); background: rgba(185, 131, 43, .14); }
.badge-low::before { background: var(--stock-low); }
.badge-order { color: #5a554f; border-color: rgba(107, 101, 96, .4); background: rgba(107, 101, 96, .12); }
.badge-order::before { background: var(--stock-order); }
.badge-in.dark { background: rgba(78, 140, 99, .22); color: #9fd2b2; border-color: rgba(78, 140, 99, .5); }
.badge-low.dark { background: rgba(185, 131, 43, .22); color: #e3b871; border-color: rgba(185, 131, 43, .5); }
.badge-order.dark { background: rgba(107, 101, 96, .25); color: #c9c4bd; border-color: rgba(150, 145, 138, .4); }

.live-pill { display: inline-flex; align-items: center; gap: 10px; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); border: 1px solid rgba(246, 242, 232, .2); padding: 9px 15px; font-weight: 500; border-radius: 2px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--stock-in); animation: pulse 2.2s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(78, 140, 99, .6); } 70% { box-shadow: 0 0 0 10px rgba(78, 140, 99, 0); } 100% { box-shadow: 0 0 0 0 rgba(78, 140, 99, 0); } }

/* ══════════════════ hero ══════════════════ */
.hero { padding: 78px 0 86px; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; top: -220px; right: -160px; width: 640px; height: 640px; background: radial-gradient(circle, rgba(182, 144, 79, .10), transparent 65%); pointer-events: none; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; position: relative; }
.hero h1 { font-size: clamp(2.5rem, 4.6vw, 3.9rem); margin: 20px 0 18px; max-width: 15ch; }
.hero h1 em { font-style: italic; color: var(--gold-deep); }
.hero .lede { color: var(--muted); font-weight: 300; font-size: 1.02rem; max-width: 46ch; margin-bottom: 30px; }
.hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.hero-open { display: inline-flex; align-items: center; gap: 10px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--forest); border: 1px solid var(--line); padding: 9px 15px; border-radius: 2px; background: #fff; }
.hero-open.closed .live-dot, .live-pill.closed .live-dot { background: var(--stock-order); animation: none; }

/* gallery wall — frames hung like Nkuku mirrors */
.gallery { position: relative; height: 520px; }
.frame { position: absolute; background: linear-gradient(155deg, var(--cream-2), #e2d7c0); border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 14px 40px rgba(31, 45, 31, .10); display: flex; align-items: flex-end; padding: 14px; transition: transform .5s var(--ease); }
.frame::after { content: attr(data-ph); position: absolute; top: 12px; left: 14px; font-size: .54rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(90, 85, 72, .55); font-weight: 500; }
.frame .glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 3.4rem; color: rgba(154, 119, 57, .22); }
.frame-a { width: 58%; height: 66%; top: 0; right: 6%; background: linear-gradient(160deg, #e9dfcb, #d8c9a9); }
.frame-b { width: 44%; height: 46%; bottom: 0; left: 0; background: linear-gradient(150deg, #efe7d8, #ddd0b6); }
.frame-c { width: 30%; height: 32%; bottom: 14%; right: 0; background: linear-gradient(140deg, #e5dcc9, #d2c2a0); }
/* Frames carrying a real image: cover-fit the background and drop the
   placeholder glyph/label so only the photograph shows. */
.frame.has-img { background-size: cover; background-position: center; background-repeat: no-repeat; }
.frame.has-img::after { content: none; }
.frame.has-img .glyph { display: none; }
.gallery:hover .frame-a { transform: translateY(-5px); }
.gallery:hover .frame-b { transform: translateY(4px); }
.frame .flag { position: absolute; top: 12px; right: 12px; font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; background: var(--burgundy); color: var(--cream); padding: 4px 9px; font-weight: 500; }
.gallery .live-anchor { position: absolute; left: 0; top: 8%; background: var(--forest-deep); z-index: 2; }

/* ══════════════════ trust strip ══════════════════ */
.trust { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: #fbf8f1; }
.trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust .t { padding: 20px 24px; font-size: .74rem; letter-spacing: .05em; color: var(--muted); display: flex; align-items: center; gap: 12px; border-left: 1px solid var(--line-soft); }
.trust .t:first-child { border-left: none; padding-left: 0; }
.trust svg { width: 20px; height: 20px; stroke: var(--gold-deep); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ══════════════════ collection / category tiles ══════════════════ */
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: transform .35s var(--ease), box-shadow .35s; display: block; }
.cat:hover { transform: translateY(-4px); box-shadow: var(--elev); }
.cat .img { height: 190px; position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 2.6rem; color: rgba(154, 119, 57, .28); overflow: hidden; }
.cat .img img { width: 100%; height: 100%; object-fit: cover; }
.cat .img::after { content: attr(data-ph); position: absolute; bottom: 10px; left: 12px; font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(90, 85, 72, .5); font-weight: 500; }
.cat .b { padding: 18px 20px 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cat h3 { font-size: 1.35rem; }
.cat .sub { font-size: .72rem; color: var(--muted); letter-spacing: .03em; margin-top: 3px; font-family: var(--body); }
.cat .arrow { font-family: var(--display); color: var(--gold-deep); font-size: 1.2rem; transition: transform .35s var(--ease); }
.cat:hover .arrow { transform: translateX(5px); }

/* ══════════════════ live stock band ══════════════════ */
.stockband { background: var(--forest-deep); color: var(--cream); position: relative; overflow: hidden; }
.stockband::before { content: ""; position: absolute; bottom: -260px; left: -140px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(182, 144, 79, .10), transparent 65%); }
.stockband .wrap { position: relative; }
.stockband .intro { color: rgba(246, 242, 232, .7); }
.stock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stock-card { background: var(--forest-3); border: 1px solid rgba(246, 242, 232, .1); border-radius: var(--radius); padding: 20px; color: var(--cream); transition: transform .35s var(--ease), border-color .35s; display: flex; flex-direction: column; }
.stock-card:hover { transform: translateY(-4px); border-color: rgba(201, 169, 97, .45); }
.sc-img { height: 118px; background: linear-gradient(135deg, #2c4636, #1c3327); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 2.2rem; color: rgba(201, 169, 97, .28); border-radius: 2px; position: relative; overflow: hidden; }
.sc-img img { width: 100%; height: 100%; object-fit: cover; }
.sc-img::after { content: attr(data-ph); position: absolute; bottom: 8px; left: 10px; font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 242, 232, .3); font-weight: 500; }
.sc-display { position: absolute; top: 10px; left: 10px; font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); border: 1px solid rgba(201, 169, 97, .5); padding: 3px 8px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; background: rgba(31, 61, 47, .55); border-radius: 2px; z-index: 2; }
.sc-display svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sc-brand { font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 4px; font-weight: 500; }
.sc-name { font-family: var(--display); font-size: 1.2rem; margin-bottom: 4px; line-height: 1.2; }
.sc-name a { color: inherit; }
.sc-var { font-size: .7rem; color: rgba(246, 242, 232, .55); margin-bottom: 14px; }
.sc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.sc-price { font-family: var(--display); font-size: 1.25rem; color: var(--cream); }
.stockband .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; flex-wrap: wrap; gap: 18px; }
.stockband .foot p { font-size: .76rem; color: rgba(246, 242, 232, .55); max-width: 52ch; }

/* ══════════════════ showroom ══════════════════ */
.showroom .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.showroom-photo { height: 480px; background: linear-gradient(150deg, var(--cream-2), #ddd0b6); border: 1px solid var(--line); border-radius: var(--radius); position: relative; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 3rem; color: rgba(154, 119, 57, .24); overflow: hidden; }
.showroom-photo > img { width: 100%; height: 100%; object-fit: cover; }
.showroom-photo::after { content: "Photography · showroom, styled room sets"; position: absolute; bottom: 12px; left: 14px; font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(90, 85, 72, .55); font-weight: 500; }
.showroom-photo .plate { position: absolute; bottom: -24px; right: -24px; background: var(--forest-deep); color: var(--cream); padding: 24px 28px; border-radius: var(--radius); box-shadow: var(--elev); max-width: 250px; }
.showroom-photo .plate .n { font-family: var(--display); font-size: 2rem; color: var(--gold-2); line-height: 1.1; }
.showroom-photo .plate .l { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 242, 232, .65); margin-top: 6px; font-weight: 500; }
.showroom-photos { display: flex; flex-direction: column; gap: 18px; }
.showroom-photo--wide { height: 220px; }
.showroom-photo--wide::after { content: none; }
.showroom h2 { margin-top: 14px; }
.showroom .body { color: var(--muted); font-weight: 300; margin: 16px 0 26px; max-width: 50ch; }
.hours { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 26px; }
.hours .row { display: flex; justify-content: space-between; padding: 11px 18px; font-size: .8rem; border-bottom: 1px solid var(--line-soft); }
.hours .row:last-child { border-bottom: none; }
.hours .d { color: var(--muted); letter-spacing: .04em; }
.hours .h { color: var(--forest); font-weight: 500; }
.hours .row.today { background: var(--cream-2); }
.hours .row.today .d { color: var(--forest); font-weight: 500; }
.hours .row.today .d::after { content: "· today"; color: var(--gold-deep); margin-left: 6px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.addr { font-size: .82rem; color: var(--muted); margin-bottom: 26px; line-height: 1.7; }
.addr b { color: var(--forest); font-weight: 500; }

/* ══════════════════ pillars ══════════════════ */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.pillar { border-top: 2px solid var(--gold); padding-top: 22px; }
.pillar .n { font-family: var(--display); font-size: 1.2rem; color: var(--gold-deep); letter-spacing: .14em; margin-bottom: 10px; }
.pillar h4 { font-size: 1.4rem; margin-bottom: 8px; }
.pillar p { font-size: .84rem; color: var(--muted); }

/* ══════════════════ reviews ══════════════════ */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: #fff; display: flex; flex-direction: column; gap: 12px; }
.stars { color: var(--gold); letter-spacing: 3px; }
.review p { font-family: var(--display); font-style: italic; font-size: 1.2rem; color: var(--forest); line-height: 1.35; }
.review .by { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-top: auto; }

/* ══════════════════ journal ══════════════════ */
.journal { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.post { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: transform .35s var(--ease), box-shadow .35s; display: block; }
.post:hover { transform: translateY(-4px); box-shadow: var(--elev); }
.post .img { height: 200px; background: linear-gradient(150deg, var(--cream-2), #e0d4bc); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 2.4rem; color: rgba(154, 119, 57, .26); position: relative; overflow: hidden; }
.post .img img { width: 100%; height: 100%; object-fit: cover; }
.post .img::after { content: attr(data-ph); position: absolute; bottom: 10px; left: 12px; font-size: .52rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(90, 85, 72, .5); font-weight: 500; }
.post .b { padding: 24px 26px 26px; }
.post .meta { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); font-weight: 500; margin-bottom: 10px; }
.post h3 { font-size: 1.45rem; margin-bottom: 10px; line-height: 1.25; }
.post p { font-size: .84rem; color: var(--muted); }
.post .more { display: inline-block; margin-top: 14px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--forest); font-weight: 500; border-bottom: 1px solid var(--gold); }

/* ══════════════════ family / sister sites ══════════════════ */
.family { background: var(--cream-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.family-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fam-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 34px 36px; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s; }
.fam-card:hover { transform: translateY(-4px); box-shadow: var(--elev); }
.fam-card .eyebrow { margin-bottom: 12px; }
.fam-card h3 { font-size: 1.7rem; margin-bottom: 10px; }
.fam-card p { font-size: .86rem; color: var(--muted); margin-bottom: 22px; max-width: 48ch; }
.fam-card .btn { align-self: flex-start; margin-top: auto; }

/* ══════════════════ closing visit band ══════════════════ */
.news { background: var(--forest-deep); color: var(--cream); }
.news .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.news h2 { color: var(--cream); }
.news p { color: rgba(246, 242, 232, .7); font-weight: 300; margin-top: 10px; max-width: 44ch; }
.news form { display: flex; gap: 12px; }
.news input { flex: 1; background: #17301f; border: 1px solid rgba(246, 242, 232, .18); color: var(--cream); padding: 14px 16px; font-family: var(--body); font-size: .9rem; border-radius: var(--radius); transition: border-color .25s; }
.news input::placeholder { color: rgba(246, 242, 232, .4); }
.news input:focus { outline: none; border-color: var(--gold); }

/* ══════════════════ responsive ══════════════════ */
@media (max-width: 980px) {
    .hero .wrap { grid-template-columns: 1fr; gap: 48px; }
    .gallery { height: 400px; }
    .cats { grid-template-columns: repeat(2, 1fr); }
    .stock-grid { grid-template-columns: repeat(2, 1fr); }
    .showroom .wrap { grid-template-columns: 1fr; gap: 56px; }
    .showroom-photo { height: 340px; }
    .pillars { grid-template-columns: 1fr; gap: 30px; }
    .reviews { grid-template-columns: 1fr; }
    .journal { grid-template-columns: 1fr; }
    .family-grid { grid-template-columns: 1fr; }
    .news .wrap { grid-template-columns: 1fr; gap: 26px; }
    .trust .wrap { grid-template-columns: 1fr 1fr; }
    .trust .t { padding: 16px 18px; }
    .trust .t:nth-child(odd) { border-left: none; padding-left: 0; }
}
@media (max-width: 640px) {
    .cats { grid-template-columns: 1fr; }
    .stock-grid { grid-template-columns: 1fr; }
    .trust .wrap { grid-template-columns: 1fr; }
    .trust .t { border-left: none; padding: 12px 0; }
    .hero { padding: 56px 0 64px; }
    .gallery { height: 320px; }
    .showroom-photo .plate { right: 0; bottom: -20px; padding: 18px 20px; }
    .news form { flex-direction: column; }
    .sec-head.split { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------------
 * Enquiry / contact form
 * ------------------------------------------------------------------------- */
.enq-form { background: var(--cream); padding: 34px 32px; }
.enq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq-field { margin-bottom: 16px; }
.enq-field label { display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.enq-field input, .enq-field textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line); background: #fff; font-family: var(--body); font-size: .95rem; color: var(--ink); }
.enq-field input:focus, .enq-field textarea:focus { outline: none; border-color: var(--gold-deep); }
.enq-field textarea { min-height: 110px; resize: vertical; }
.enq-required-note { font-size: .78rem; color: var(--muted); margin: 0 0 16px; }
.enq-required-note .req, .enq-field .req { color: #8d3b3c; font-weight: 600; }
.enq-hint { display: block; font-size: .78rem; color: var(--muted); margin-top: 6px; text-transform: none; letter-spacing: 0; }
.enq-error { display: none; font-size: .78rem; color: #8d3b3c; margin-top: 6px; }
.enq-error:not(:empty) { display: block; }
.enq-field input.is-invalid, .enq-field textarea.is-invalid { border-color: #8d3b3c; }
.enq-notice { padding: 14px 16px; margin-bottom: 20px; font-size: .9rem; border: 1px solid; }
.enq-notice--success { color: #1f5136; background: rgba(62, 124, 90, .12); border-color: rgba(62, 124, 90, .5); font-weight: 600; display: flex; align-items: flex-start; gap: 10px; font-size: .95rem; }
.enq-notice--success::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #3e7c5a; color: #fff; font-size: .8rem; line-height: 1; }
.enq-notice--error { color: #7c2630; background: rgba(141, 59, 60, .1); border-color: rgba(141, 59, 60, .4); }