/**
 * Jewellery shop setup & fit-out service page — the `.pjf` section system.
 *
 * Scope: /services/jewellery-business-setup-dubai/ ONLY. Enqueued from
 * functions.php (wp_style_basic) behind is_page('jewellery-business-setup-dubai').
 *
 * EVERY selector is scoped under `.pjf`. The design it implements uses bare
 * `section`, `h2`, `table`, `img` and `.btn` rules; unscoped they would hit the
 * whole site, so the page body wraps the sections in <div class="pjf"> and each
 * rule is prefixed. Do not add an unscoped selector to this file.
 *
 * The page hero is NOT styled here: it is the site's own pa-hero component
 * (css/area-pages.css), authored into the page body and sitting OUTSIDE .pjf,
 * so the service pages keep one hero language.
 *
 * The `!important` colours at the end exist for one reason: dark-compat.css has
 *   html.pi-dark .post_content a:not(.sc_button):not(.pi-btn):not([class*="button"])
 * at specificity (0,5,2), which otherwise repaints every link in here — it even
 * turned the gold CTA into gold-on-gold. This file is loaded after it and the
 * overrides are confined to .pjf.
 *
 * Fonts: Fraunces and Poppins already ship in the site's Google Fonts request;
 * Montserrat does not, so it is enqueued alongside this file.
 */

.pjf{--bg:#15120E;--alt:#1C1915;--deep:#110F0B;--panel:#1F1B17;--line:#3A352E;--line2:#4A453D;--text:#ECEAE3;--soft:#DCD7CD;--muted:#B5AFA4;--gold:#D3AC6E;--head:#F4F1EC;--wa:#25D366;color-scheme:dark;background:var(--bg);color:var(--text);font-family:Montserrat,sans-serif;font-size:16px;line-height:1.6}
.pjf *{box-sizing:border-box}
.pjf a{color:var(--text)}
.pjf a:hover{color:var(--gold)}
.pjf img{display:block;max-width:100%}
.pjf .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.pjf section{padding:96px 0;position:relative}
.pjf .alt{background:var(--alt)}
.pjf .deep{background:var(--deep)}
.pjf .eyebrow{margin:0 0 14px;font-size:14px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.pjf h1,.pjf h2,.pjf h3{font-family:Fraunces,Georgia,serif;font-weight:500;margin:0}
.pjf h2{font-size:40px;line-height:1.2;color:var(--head);margin-bottom:16px}
.pjf h3{font-size:24px;line-height:1.25;color:#fff}
.pjf .lead{color:var(--muted);max-width:640px;margin:0 0 40px}
.pjf .btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;font-family:Poppins,sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.pjf .btn-gold{background:var(--gold);color:var(--bg)}
.pjf .btn-gold:hover{color:var(--bg);filter:brightness(1.08)}
.pjf .btn-line{border:1px solid rgba(236,234,227,.45);color:var(--text)}
.pjf .btn-wa{border:1px solid var(--wa);color:var(--wa)}
.pjf .pill{border-radius:999px;min-height:44px}
.pjf .row{display:flex;flex-wrap:wrap;gap:24px}
.pjf .frame{position:relative;padding:14px 0 0 14px}
.pjf .frame:before{content:"";position:absolute;top:0;left:0;width:56px;height:56px;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}
.pjf .frame img{width:100%;object-fit:cover}
.pjf .rule{border-top:1px solid var(--line2);padding-top:26px}
.pjf .small{font-size:14px;color:var(--muted)}
.pjf .proof{display:flex;flex-wrap:wrap;border:1px solid var(--line);margin-top:56px}
.pjf .proof>div{flex:1 1 300px;padding:24px 26px;display:flex;gap:16px;align-items:center;border-right:1px solid var(--line)}
.pjf .ico{flex:0 0 46px;width:46px;height:46px;border:1px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold)}
.pjf .proof strong{display:block;color:#fff;font-size:15px}
.pjf .cols4>div{flex:1 1 230px}
.pjf .cols2>div{flex:1 1 460px}
.pjf .num{font-family:Fraunces,serif;font-size:18px;color:var(--gold);display:block;margin-bottom:10px}
.pjf .tbl{overflow-x:auto;border:1px solid var(--line)}
.pjf .tbl table{width:100%;min-width:740px;border-collapse:collapse;font-size:14px;margin:0}
.pjf .tbl th{background:var(--panel);text-align:left;padding:16px 20px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;border:0}
.pjf .tbl td{padding:16px 20px;border:0;border-top:1px solid var(--line);color:var(--soft)}
.pjf .tbl td:first-child{color:#fff;font-weight:500}
.pjf .tbl tr.ours{background:rgba(211,172,110,.07);box-shadow:inset 3px 0 0 var(--gold)}
.pjf .tbl tr.ours td:nth-child(2){color:var(--gold);font-weight:600}
.pjf .tl{list-style:none;margin:0;padding:0}
.pjf .tl li{display:grid;grid-template-columns:52px 1fr;gap:26px;position:relative;padding-bottom:30px}
.pjf .tl li:before{content:"";position:absolute;left:25px;top:52px;bottom:0;width:1px;background:var(--line)}
.pjf .tl li:last-child:before{display:none}
.pjf .circle{width:52px;height:52px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;background:var(--deep)}
.pjf .chip{display:inline-block;margin-left:12px;padding:3px 10px;border:1px solid var(--gold);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--gold);vertical-align:middle;font-family:Montserrat,sans-serif}
.pjf .callout{padding:18px 20px;background:var(--panel);border-left:2px solid var(--gold);font-size:14px;color:var(--soft)}
.pjf .card{border:1px solid var(--line);padding:32px;background:var(--bg)}
.pjf .card.gold{border-color:var(--gold)}
.pjf .check{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.pjf .check li{display:flex;gap:12px;font-size:15px;color:var(--soft)}
.pjf .check li:before{content:"\2713";color:var(--gold);font-weight:600}
.pjf .check.no li{color:var(--muted)}
.pjf .check.no li:before{content:"\2013";color:#8C867B}
.pjf dl.specs{margin:0;display:flex;flex-wrap:wrap;border-top:1px solid var(--line)}
.pjf dl.specs>div{flex:1 1 220px;padding:15px 16px 15px 0;border-bottom:1px solid var(--line)}
.pjf dt{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pjf dd{margin:4px 0 0;font-size:15px;color:var(--gold)}
.pjf .hand>div{flex:1 1 190px;padding:26px 22px;border:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;gap:14px;font-size:15px;color:#fff}
.pjf .case{flex:1 1 480px;border:1px solid var(--line);background:var(--alt)}
.pjf .case>img{width:100%;height:320px;object-fit:cover}
.pjf .case .in{padding:30px}
.pjf .chips{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 22px}
.pjf .chips span{padding:6px 12px;border:1px solid var(--line2);font-size:12px}
.pjf .gal figure{flex:1 1 340px;margin:0;position:relative}
.pjf .gal img{width:100%;height:240px;object-fit:cover}
.pjf .gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:11px 16px;background:rgba(21,18,14,.82);font-size:12px;font-weight:600;letter-spacing:.06em}
.pjf .chiplist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pjf .chiplist a,.pjf .chiplist span{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--line2);border-radius:999px;text-decoration:none;font-size:14px}
.pjf details{border-top:1px solid var(--line);padding:20px 0}
.pjf summary{cursor:pointer;font-family:Fraunces,serif;font-size:20px;color:#fff}
.pjf details p{margin:12px 0 0;font-size:15px;color:var(--muted)}
.pjf .cta{background:var(--gold);color:var(--bg);padding:58px 52px;display:flex;flex-wrap:wrap;gap:30px;align-items:center;justify-content:space-between}
.pjf .cta h2{color:var(--bg);font-size:42px}
.pjf .goldlink{color:var(--gold);font-size:13px;font-weight:600}
.pjf .caselink{color:var(--gold);font-family:Poppins,sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:760px){.pjf h2{font-size:32px}.pjf .hero h1{font-size:40px}.pjf section{padding:72px 0}.pjf .cta{padding:40px 26px}}
.pjf a{color:var(--text)!important}
.pjf a:hover{color:var(--gold)!important}
.pjf .btn-gold{color:var(--bg)!important}
.pjf .btn-line{color:var(--text)!important}
.pjf .btn-wa{color:var(--wa)!important}
.pjf .goldlink,.pjf .caselink{color:var(--gold)!important}
.pjf .chiplist a{color:var(--text)!important}
.pjf a:hover .num,.pjf .card:hover h3{color:var(--gold)!important}

/* ---------------------------------------------------------------------------
 * Theme overrides. The site fires ~1,000 `!important` declarations at page
 * content from inline stylesheets; these are the handful that land on this
 * design. Everything below is confined to `.pjf` — none of it can leak.
 * ------------------------------------------------------------------------- */

/* Image heights. `.post_content img{height:auto!important}` (inline sheet)
 * beats any specificity, so every fixed height here has to match it. Without
 * this the 240px gallery tiles render at 644-725px and the rows go ragged. */
.pjf .gal img{height:240px!important}
.pjf .case>img{height:320px!important}
.pjf .frame img{height:360px!important}
.pjf .shot{object-fit:cover;min-width:0}
.pjf .shot--lg{flex:1 1 100%;height:300px!important}
.pjf .shot--sm{flex:1 1 200px;height:190px!important}
.pjf .gal{align-items:flex-start}

/* The parent theme sets blockquote::before to a fontello quote glyph,
 * positioned absolutely at top:2.1rem/left:2.3rem — it lands on top of the
 * attribution line. area-pages.css suppresses the same glyph for .pa-quote;
 * this does it for .pjf. `.post_content blockquote` also forces padding-left. */
.pjf blockquote::before,.pjf blockquote::after{content:none!important}
.pjf .quote{padding:22px 26px!important}

/* Guide cards are anchors. A block-level child (an <h3>) gets split out of an
 * inline <a> by the content filter, which left 17 anchor fragments instead of
 * 6, each still painted with the .card border. The heading is a span instead. */
.pjf a.card{display:block}
.pjf a.card .eyebrow{display:block;margin:0 0 8px}
.pjf .card-t{display:block;margin:0;font-family:Fraunces,Georgia,serif;font-weight:500;font-size:21px;line-height:1.25;color:#fff}