/*
Theme Name: Metro Gems Work
Theme URI: https://metrogemswork.com
Author: Pworld Digital
Description: Luxury one-page theme for Metro Gems Work Nigeria Limited, a bead making and jewelry lapidary company. Gemstones are managed under "Gems" in the dashboard; contact details under Appearance > Customize > Metro Gems Work.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: metro-gems-work
*/

:root{--pearl:#fff;--mist:#f4f5f7;--line:#dfe2e8;--ink:#101a2b;--soft:#566074;--em:#0b6b57;--gold:#b08d3c;
--foil:linear-gradient(135deg,#8a6a22,#e3c779 45%,#a88532 70%,#d9b95f);color-scheme:light;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(80px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
*{box-sizing:border-box;margin:0}
body{color:var(--ink);font:400 16px/1.65 'Instrument Sans',system-ui,sans-serif;
background:
radial-gradient(900px 520px at 6% -4%,rgba(11,107,87,.09),transparent 62%),
radial-gradient(800px 520px at 100% 18%,rgba(29,63,143,.07),transparent 62%),
radial-gradient(700px 500px at 0% 62%,rgba(179,18,47,.05),transparent 62%),
radial-gradient(700px 500px at 100% 88%,rgba(122,79,163,.06),transparent 62%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23b08d3c' stroke-opacity='.17' stroke-width='.8'%3E%3Cpath d='M0 0L130 70L260 0M0 260L130 190L260 260M130 70L90 190M130 70L170 190M90 190L170 190M0 130L90 190M260 130L170 190M0 0V260M260 0V260'/%3E%3C/g%3E%3Cpolygon points='0,0 130,70 0,130' fill='%230b6b57' fill-opacity='.04'/%3E%3Cpolygon points='260,0 130,70 260,130' fill='%231d3f8f' fill-opacity='.035'/%3E%3Cpolygon points='130,70 90,190 170,190' fill='%23b08d3c' fill-opacity='.045'/%3E%3Cpolygon points='0,260 90,190 130,260' fill='%23b3122f' fill-opacity='.03'/%3E%3Cpolygon points='260,260 170,190 130,260' fill='%237a4fa3' fill-opacity='.035'/%3E%3C/svg%3E"),#fff}
.serif,h1,h2,h3,h4,.logo b{font-family:'Playfair Display',Georgia,serif}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--em);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:rgba(255,255,255,.93);backdrop-filter:blur(10px);border-bottom:1px solid transparent;border-image:var(--foil) 1}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.logo{display:flex;align-items:center;gap:12px}
.logo svg{width:36px;height:36px;color:var(--em)}
.logo b{font-weight:600;font-size:20px;line-height:1.1;display:block}
.logo small{font-size:12px;color:var(--soft);letter-spacing:.05em}
nav{display:flex;gap:26px;font-size:14.5px;color:var(--soft);font-weight:500}
nav a:hover{color:var(--em)}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border:1px solid var(--ink);font-weight:500;font-size:15px;transition:.25s;background:#fff}
.btn.fill{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4px #c9a64e;border-color:var(--ink)}
.btn.fill:hover{background:var(--em);border-color:var(--em)}
.btn:not(.fill):hover{background:var(--ink);color:#fff}
.btn svg,.wa svg{width:20px;height:20px}
.btn.wa-btn{background:#128c4a;border-color:#128c4a;color:#fff}.btn.wa-btn:hover{background:#0c6e39;border-color:#0c6e39}
.hero{padding:78px 0 96px;overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;right:-8%;top:-20%;width:62%;aspect-ratio:1;background:conic-gradient(from 20deg,rgba(11,107,87,.1),rgba(255,255,255,0) 18%,rgba(29,63,143,.08) 32%,rgba(255,255,255,0) 50%,rgba(176,141,60,.12) 66%,rgba(255,255,255,0) 82%,rgba(179,18,47,.07));border-radius:50%;filter:blur(8px)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative}
h1{font-weight:500;font-size:clamp(42px,5.8vw,84px);line-height:1.06;letter-spacing:-.01em}
h1 em{display:block;color:var(--em);font-style:italic;font-weight:400}
.hero p{max-width:46ch;margin:28px 0 36px;color:var(--soft);font-size:18px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.stage{position:relative;aspect-ratio:1;max-width:480px;margin-left:auto;width:100%}
.stage .ring{position:absolute;inset:0;border:1px solid var(--line);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,.35))}
.stage .ring.two{inset:11%;border:1px solid var(--gold);opacity:.6;background:none}
.stage .ring.three{inset:22%;border:1px dashed var(--gold);opacity:.35;background:none}
.stage .big{position:absolute;inset:20%;color:var(--em);filter:drop-shadow(0 26px 30px rgba(11,107,87,.28))}
.stage .s{position:absolute;filter:drop-shadow(0 8px 10px rgba(16,26,43,.18))}
.spark{position:absolute;color:#c9a64e;width:26px;height:26px;animation:tw 3.6s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}
.stage .tag{position:absolute;right:-6px;bottom:10%;background:#fff;border:1px solid var(--line);padding:10px 16px;font-size:13px;color:var(--soft);box-shadow:0 12px 24px -14px rgba(16,26,43,.35)}
.stage .tag b{display:block;font:600 17px/1.3 'Playfair Display',serif;color:var(--ink)}
.strip{border-block:1px solid var(--line);background:rgba(255,255,255,.7);overflow:hidden;padding:18px 0}
.strip div{display:flex;gap:56px;width:max-content;font:italic 400 24px/1 'Playfair Display',serif;color:var(--soft);animation:slide 40s linear infinite}
.strip span::after{content:"\25C6";font:12px sans-serif;color:var(--gold);margin-left:56px;vertical-align:middle}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.strip div,.spark{animation:none}}
section{padding:104px 0}
h2{font-weight:500;font-size:clamp(32px,4vw,52px);line-height:1.15;max-width:20ch}
.orn{display:flex;align-items:center;gap:12px;margin:22px 0 4px;width:150px}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:var(--foil)}
.orn i{width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.lead{color:var(--soft);max-width:54ch;margin-top:14px}
.about .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.about p+p{margin-top:16px}
.about .copy p{color:var(--soft);max-width:56ch;margin-top:16px}
.panel{background:rgba(255,255,255,.9);padding:40px;position:relative;border:1px solid var(--line);box-shadow:0 30px 50px -34px rgba(16,26,43,.4)}
.panel::after{content:"";position:absolute;inset:9px;border:1px solid var(--gold);opacity:.45;pointer-events:none}
.panel div+div{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.panel b{font:600 20px/1.3 'Playfair Display',serif;display:block}
.panel span{color:var(--soft);font-size:15px}
.what{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:48px}
.what article{padding:30px 0;border-top:1px solid var(--line)}
.what h3{font-weight:600;font-size:24px;line-height:1.25;margin-bottom:8px}
.what p{color:var(--soft)}
.gal{background:linear-gradient(180deg,rgba(244,245,247,.78),rgba(244,245,247,.55))}
.papers{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:52px}
.paper{background:#fff;position:relative;padding:22px 20px 20px;box-shadow:0 1px 0 var(--line),0 20px 32px -18px rgba(16,26,43,.3);transition:transform .35s}
.paper:hover{transform:translateY(-6px)}
.paper::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(180deg,#e9ecf0,#fff);clip-path:polygon(0 0,100% 0,50% 100%)}
.paper::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--foil)}
.paper .art{display:grid;place-items:center;height:170px;margin-top:34px}
.paper .art svg{width:104px;height:104px;filter:drop-shadow(0 12px 10px rgba(16,26,43,.18))}
.paper h4{font-weight:600;font-size:20px;line-height:1.25;margin-top:8px}
.paper dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin-top:10px;font-size:13px;color:var(--soft);border-top:1px dashed var(--line);padding-top:10px}
.paper dd{color:var(--ink);text-align:right}
.wide{grid-column:span 2}
.beads{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.beads svg{width:34px!important;height:34px!important;filter:drop-shadow(0 4px 4px rgba(16,26,43,.2))!important}
.band{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.band ol{list-style:none;padding:0;display:grid;gap:22px;counter-reset:n}
.band li{counter-increment:n;display:grid;grid-template-columns:44px 1fr;gap:14px}
.band li::before{content:counter(n);font:italic 500 30px/1 'Playfair Display',serif;color:var(--gold)}
.band li b{display:block;font-weight:600}
.band li span{color:var(--soft);font-size:15px}
.contact{background:linear-gradient(160deg,#0d1727,#101a2b 55%,#0c2a28);color:#fff;position:relative}
.contact::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23e3c779' stroke-opacity='.1' stroke-width='.8'%3E%3Cpath d='M0 0L130 70L260 0M0 260L130 190L260 260M130 70L90 190M130 70L170 190M90 190L170 190M0 130L90 190M260 130L170 190'/%3E%3C/g%3E%3C/svg%3E")}
.contact .wrap{position:relative}
.contact h2{color:#fff}.contact .lead{color:#c3cada}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:48px}
.card{background:#fff;color:var(--ink);padding:36px;border-top:3px solid transparent;border-image:var(--foil) 1}
.card h3{font-weight:600;font-size:26px;line-height:1.2}
.card p{color:var(--soft);font-size:15px;margin:6px 0 20px}
.card a.row{display:block;padding:12px 0;border-top:1px solid var(--line);font-weight:500}
.card a.row:hover{color:var(--em)}
.addr{margin-top:40px;color:#c3cada;font-size:15px}
footer{padding:26px 0;font-size:13px;color:var(--soft);background:#fff}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.note{background:#fff7de;border-bottom:1px solid #ead9a2;font-size:13px;text-align:center;padding:7px 12px;color:#6b5513}
.wa{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:9;display:flex;align-items:center;gap:10px;background:#128c4a;color:#fff;padding:13px 20px 13px 16px;border-radius:40px;font-weight:600;font-size:15px;box-shadow:0 14px 28px -8px rgba(18,140,74,.55);transition:.25s}
.wa:hover{background:#0c6e39;transform:translateY(-3px)}
.wa svg{width:26px;height:26px}
@media(max-width:1000px){nav{display:none}}
@media(max-width:900px){.hero .wrap,.band,.what,.cards,.about .wrap{grid-template-columns:1fr}.stage{margin:0 auto;max-width:360px}.papers{grid-template-columns:1fr 1fr}section{padding:72px 0}header .btn{display:none}}
@media(max-width:520px){.papers{grid-template-columns:1fr}.wide{grid-column:auto}.wrap{padding:0 20px}.wa span{display:none}.wa{padding:14px}}

.admin-bar header{top:32px}@media(max-width:782px){.admin-bar header{top:46px}}
.paper .art img{width:100%;height:170px;object-fit:cover;filter:none}
.screen-reader-text{position:absolute;left:-9999px}
.post{max-width:760px;margin:0 auto;padding:60px 0}.post h1,.post h2{font-size:34px;margin-bottom:12px}