/*
Theme Name: Trade Key SL
Author: TRADE KEY (SL) LTD
Description: Custom sapphire blue & white WordPress theme (with gold accents) for TRADE KEY (SL) LTD, a mining commodities merchant specializing in gold and diamond trade, based in Freetown, Sierra Leone.
Version: 1.18.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tradekey-sl
*/

/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */
:root{
  /* Sapphire blue & white — bright, international-trade palette.
     Note on naming: these custom-property NAMES are unchanged from the
     theme's original black/gold palette (to avoid rewriting every single
     var() reference across this file), but most of their VALUES are now
     the opposite of what the name suggests: --ground is now white (was
     near-black), --ivory is now a dark ink navy (was near-white), and
     --muted/--muted-2 are now dark slate tones (were light warm grays).
     The three places that still need light-text-on-dark-background —
     the header, the hero, and the footer — restore the original light
     values locally; see the "DARK-SURFACE OVERRIDES" block just below. */
  --ground:#ffffff;
  --surface:#eef4fb;
  --surface-2:#e1ebf8;
  --surface-3:#d2e1f4;
  --navy-deep:#0b2c54;
  --navy:#0f4c94;
  --blue-bright:#1a73c9;
  --gold:#b8863a;
  --gold-bright:#8f6423;
  --gold-deep:#6b4a18;
  --ivory:#132a4d;
  --muted:#54637c;
  --muted-2:#7c8aa0;
  --hairline:rgba(15,76,148,0.16);
  --shadow:rgba(16,40,70,0.14);
  --danger:#b3261e;
  --danger-bg:#fdecea;

  --font-display:"Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --font-body:"Work Sans", "Segoe UI", Arial, sans-serif;

  --container:1240px;
  --gap:clamp(1.25rem, 3vw, 2.5rem);
  --radius:2px;
}

/* ---------------------------------------------------------
   DARK-SURFACE OVERRIDES
   The header, the full-bleed hero (image + dark scrim), and the footer
   are the three places that intentionally stay dark even though the
   rest of the site is now bright white/sapphire — this restores
   light-on-dark text/accent values just within those three, so every
   existing rule inside them (which already reads var(--ivory)/
   var(--muted)/var(--gold) etc.) keeps working with no further changes.
   --------------------------------------------------------- */
.site-header,
.hero,
.page-hero,
.site-footer{
  --ivory:#f5f8fc;
  --muted:rgba(255,255,255,0.74);
  --muted-2:rgba(255,255,255,0.55);
  --gold:#c9a35c;
  --gold-bright:#ecce8c;
  --hairline:rgba(255,255,255,0.22);
}

/* =========================================================
   2. RESET
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--ivory);
  line-height:1.15;
  margin:0 0 0.5em;
  text-wrap:balance;
}
p{margin:0 0 1em;}
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}
.overflow-x{overflow-x:auto;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* =========================================================
   3. TYPE UTILITIES
   ========================================================= */
.kicker{
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  font-family:var(--font-body);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold-bright);
}
.kicker::before{
  content:"";
  width:2em;
  height:1px;
  background:var(--gold);
}
.eyebrow-line{
  width:56px;
  height:1px;
  background:var(--gold);
  margin:0.9em 0 1.4em;
}

/* =========================================================
   4. BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  padding:0.95em 1.9em;
  border:1px solid var(--gold);
  color:var(--ivory);
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:transparent;
  transition:background 0.35s ease, color 0.35s ease, border-color .35s ease;
  white-space:nowrap;
}
.btn:hover, .btn:focus-visible{
  background:var(--gold);
  color:var(--ground);
}
.btn-solid{
  background:var(--gold);
  color:var(--ground);
}
.btn-solid:hover, .btn-solid:focus-visible{
  background:var(--gold-bright);
  border-color:var(--gold-bright);
}
.btn svg{width:1em;height:1em;stroke:currentColor;}

/* =========================================================
   5. SITE HEADER
   ========================================================= */
.site-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:50;
  padding:2rem 0;
}
.site-header.is-solid{
  position:fixed;
  background:rgba(11,44,84,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hairline);
  padding:1.2rem 0;
  transition:padding .3s ease;
}
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.header-top-right{
  display:flex;
  align-items:center;
  gap:1.4rem;
}
.header-nav-row{
  margin-top:1.1rem;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--hairline);
}
@media (min-width:901px){
  .header-nav-row .primary-nav ul{
    justify-content:center;
  }
}
.site-brand{
  display:flex;
  align-items:center;
  gap:0.85rem;
}
.site-brand img{height:46px;width:auto;}
.site-brand .brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.site-brand .brand-name{
  font-family:var(--font-display);
  font-size:1.05rem;
  letter-spacing:0.04em;
  color:var(--ivory);
  font-weight:600;
}
.site-brand .brand-sub{
  font-size:0.62rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:2px;
}

.primary-nav ul{
  display:flex;
  align-items:center;
  gap:2.3rem;
}
.primary-nav a{
  font-size:1.08rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  position:relative;
  padding:0.45em 0;
}
.primary-nav a::before{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0%; height:1px;
  background:var(--gold);
  transition:width .3s ease;
}
.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav .current-menu-item > a{
  color:var(--ivory);
}
.primary-nav a:hover::before,
.primary-nav a:focus-visible::before,
.primary-nav .current-menu-item > a::before{
  width:100%;
}
.header-phone{
  font-size:0.85rem;
  color:var(--muted);
  letter-spacing:0.02em;
}
.header-phone strong{color:var(--gold-bright);font-weight:600;}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:0;
  padding:0.4rem;
}
.nav-toggle span{
  width:24px;height:1px;background:var(--ivory);display:block;
}

@media (max-width: 900px){
  .primary-nav{
    position:fixed;
    inset:0 0 0 auto;
    width:min(320px, 82vw);
    height:100vh;
    overflow-y:auto;
    background:var(--navy-deep);
    border-left:1px solid var(--hairline);
    padding:6rem 2rem 2rem;
    transform:translateX(100%);
    transition:transform .4s ease;
  }
  .primary-nav.is-open{transform:translateX(0);}
  .primary-nav ul{flex-direction:column;align-items:flex-start;gap:1.5rem;}
  .header-phone{display:none;}
  .nav-toggle{display:flex;}
  .header-nav-row{border-bottom:0;margin-top:0;padding-bottom:0;}
}

/* Services dropdown (Products, Storage, Register) — one set of rules
   styles both the fallback menu and a real custom menu assigned at
   Appearance > Menus, since both output the same "menu-item-has-
   children" / "sub-menu" classes (see tradekey_fallback_menu() and
   tradekey_flag_menu_items_with_children() in functions.php). */
.primary-nav li{position:relative;}
.primary-nav .menu-item-has-children > a{
  display:inline-flex;
  align-items:center;
  gap:.4em;
}
.primary-nav .menu-item-has-children > a::after{
  content:"";
  width:6px;height:6px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  flex-shrink:0;
}
.primary-nav .sub-menu{
  display:none;
  list-style:none;
  margin:0;
  padding:0;
}
@media (min-width:901px){
  .primary-nav .sub-menu{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    /* No margin-top here on purpose: a gap between the "Services" link
       and this panel is a dead zone the pointer has to cross with
       nothing hoverable underneath it, so :hover breaks and the
       dropdown vanishes before the mouse arrives. Touching the link
       directly (padding provides the visual breathing room instead)
       keeps the hover chain unbroken all the way from the link into
       the dropdown. */
    padding:.9rem 0 .6rem;
    min-width:220px;
    background:transparent;
    border:none;
    box-shadow:none;
    z-index:60;
  }
  .primary-nav .sub-menu li{width:100%;}
  .primary-nav .sub-menu a{
    display:block;
    padding:.75em 1.4em;
    font-size:.9rem;
    font-weight:500;
    letter-spacing:.02em;
    text-transform:none;
    white-space:nowrap;
  }
  .primary-nav .sub-menu a::before{display:none;}
  .primary-nav .menu-item-has-children:hover > .sub-menu,
  .primary-nav .menu-item-has-children:focus-within > .sub-menu{
    display:block;
  }
}
@media (max-width:900px){
  .primary-nav .sub-menu{
    display:block;
    margin:1rem 0 0 1.1rem;
    padding-left:1rem;
    border-left:1px solid var(--hairline);
  }
  .primary-nav .sub-menu li + li{margin-top:1.1rem;}
  .primary-nav .sub-menu a{
    font-size:.98rem;
    text-transform:none;
    color:var(--muted);
  }
  .primary-nav .menu-item-has-children > a::after{display:none;}
}

/* =========================================================
   6. HERO SLIDER
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  background:var(--ground);
}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity 1.1s ease;
  display:flex;
  align-items:center;
}
.hero-slide.is-active{
  opacity:1;
  visibility:visible;
  z-index:2;
}
.hero-slide-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-slide-bg img{
  width:100%;height:100%;object-fit:cover;
}
.hero-slide-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(6,26,49,.55) 0%, rgba(6,26,49,.35) 38%, rgba(6,26,49,.86) 100%),
    linear-gradient(90deg, rgba(6,26,49,.72) 0%, rgba(6,26,49,.15) 55%);
}
/* placeholder gradients per slide, replaced automatically once real photos are added */
.hero-slide[data-slide="1"] .hero-slide-bg{background:radial-gradient(120% 140% at 15% 15%, #17416f 0%, #0d2c4d 45%, #071b30 100%);}
.hero-slide[data-slide="2"] .hero-slide-bg{background:radial-gradient(120% 140% at 85% 20%, #1a4a7a 0%, #0e2f52 48%, #071b30 100%);}
.hero-slide[data-slide="3"] .hero-slide-bg{background:radial-gradient(120% 140% at 20% 85%, #143a63 0%, #0b2846 45%, #071b30 100%);}
.hero-slide[data-slide="4"] .hero-slide-bg{background:radial-gradient(120% 140% at 85% 85%, #17416f 0%, #0d2c4d 45%, #071b30 100%);}
.hero-slide[data-slide="5"] .hero-slide-bg{background:radial-gradient(120% 140% at 50% 10%, #12395f 0%, #0c2947 45%, #071b30 100%);}
.hero-slide[data-slide="6"] .hero-slide-bg{background:radial-gradient(120% 140% at 50% 92%, #163d68 0%, #0d2b4a 45%, #071b30 100%);}
.hero-slide-bg .motif{
  position:absolute;
  right:-4%;
  bottom:-8%;
  width:min(46vw, 620px);
  opacity:0.16;
  color:var(--gold);
  pointer-events:none;
}
.hero-slide[data-slide="1"] .hero-slide-bg .motif{ right:auto; left:-6%; top:-10%; bottom:auto; width:min(38vw,520px);}

.hero-content{
  position:relative;
  z-index:2;
  width:100%;
  padding-top:7.5rem;
}
@media (min-width:901px){
  .hero-content{padding-top:12.5rem;}
}
.hero-content .kicker{margin-bottom:1.1rem;}
.hero-content h1{
  font-size:clamp(2.1rem, 4.4vw, 3.6rem);
  max-width:16ch;
  font-weight:600;
  letter-spacing:-0.01em;
}
.hero-content .hero-desc{
  max-width:44ch;
  color:var(--muted);
  font-size:1.05rem;
  margin:1.1rem 0 2.1rem;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;}

.hero-controls{
  position:absolute;
  z-index:5;
  left:0; right:0;
  bottom:2.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(1.25rem, 4vw, 3rem);
}
.hero-dots{display:flex;gap:0.6rem;}
.hero-dot{
  width:34px;height:2px;
  background:rgba(255,255,255,0.32);
  border:0;
  padding:0;
  position:relative;
  overflow:hidden;
}
.hero-dot::after{
  content:"";
  position:absolute;inset:0;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.hero-dot.is-active::after{transform:scaleX(1);}
.hero-arrows{display:flex;gap:0.75rem;}
.hero-arrow{
  width:44px;height:44px;
  border:1px solid var(--hairline);
  background:rgba(6,26,49,0.45);
  display:flex;align-items:center;justify-content:center;
  color:var(--ivory);
  transition:border-color .3s ease, background .3s ease;
}
.hero-arrow:hover, .hero-arrow:focus-visible{
  border-color:var(--gold);
  background:rgba(198,161,91,0.12);
}
.hero-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;}
.hero-count{
  display:none;
  font-family:var(--font-display);
  font-size:0.85rem;
  color:var(--muted);
  letter-spacing:0.05em;
}
.hero-count strong{color:var(--gold-bright);font-weight:600;}

.scroll-cue{
  position:absolute;
  bottom:2.4rem; right:clamp(1.25rem, 4vw, 3rem);
  z-index:5;
  display:none;
}
@media (min-width:1000px){
  .scroll-cue{display:block;}
}

@media (max-width:640px){
  .hero{min-height:92vh;}
  .hero-controls{bottom:1.4rem;flex-wrap:wrap;gap:1rem;}
}

/* Single-image page hero (e.g. Compliance) — reuses .hero-slide-bg and
   .hero-content for identical image/overlay/typography treatment as
   the multi-slide heroes, without any slider chrome. */
.page-hero{
  position:relative;
  min-height:68vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:var(--ground);
}
.page-hero .hero-slide-bg{
  background:radial-gradient(120% 140% at 20% 15%, #143a63 0%, #0b2846 48%, #071b30 100%);
}
.page-hero .hero-content{padding-top:7.5rem;}
@media (min-width:901px){
  .page-hero .hero-content{padding-top:12.5rem;}
}
@media (max-width:640px){
  .page-hero{min-height:78vh;}
}

/* =========================================================
   7. SECTION LAYOUT
   ========================================================= */
section{position:relative;}
.section{padding:clamp(4.5rem,9vw,7.5rem) 0;}
/* Any section (or card) that's also a jump-link target (e.g. #gold,
   #seller, #buyer, #gold-storage) needs room so the fixed header
   doesn't cover its heading when the browser scrolls straight to it. */
.section[id],
.product-card[id]{scroll-margin-top:6rem;}
.section-alt{background:var(--surface);}
.section-head{max-width:640px;margin-bottom:3rem;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.8rem);}
.section-head p{color:var(--muted);font-size:1.02rem;}

/* About */
.about-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
.about-copy p{color:var(--muted);font-size:1.02rem;}
.about-points{margin-top:1.8rem;display:grid;gap:0.9rem;}
.about-points li{
  display:flex;align-items:flex-start;gap:0.75rem;
  color:var(--ivory);font-size:0.95rem;
}
.about-points svg{
  width:18px;height:18px;flex-shrink:0;margin-top:3px;
  color:var(--gold);
}
.about-figure{
  position:relative;
  border:1px solid var(--hairline);
  background:var(--surface-2);
  aspect-ratio:4/5;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.about-figure::before{
  content:"";
  position:absolute;inset:14px;
  border:1px solid var(--hairline);
}
.about-figure img{width:34%;opacity:0.92;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));}
.about-figure svg{width:42%;opacity:0.92;color:var(--gold);filter:drop-shadow(0 18px 30px rgba(0,0,0,.5));}
.about-grid.is-reversed .about-copy{order:2;}
.about-grid.is-reversed .about-figure{order:1;}
.about-grid--single{grid-template-columns:1fr;max-width:800px;margin-left:auto;margin-right:auto;}

/* Product photo card (Products page, Gold/Diamond sections) — a large
   landscape image card, sized for a real product photo rather than a
   small decorative emblem like .about-figure. */
.product-figure{
  position:relative;
  border:1px solid var(--hairline);
  background:var(--surface-2);
  aspect-ratio:5/4;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-figure img{width:100%;height:100%;object-fit:cover;display:block;}
.product-figure .motif{width:46%;opacity:0.85;color:var(--gold);}
.about-grid.is-reversed .product-figure{order:1;}

/* Company certificate card (About page, alongside Our Story) — a large,
   fully legible document image, deliberately sized much bigger than
   .about-figure's small emblem treatment since a certificate needs to
   be readable, not decorative. */
.cert-figure{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.cert-figure img{
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--hairline);
  box-shadow:0 22px 44px var(--shadow);
  background:var(--ground);
}
.cert-figure-placeholder{
  width:100%;
  aspect-ratio:4/5.1;
  border:1px dashed var(--hairline);
  background:var(--surface-2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.1rem;
  text-align:center;
  padding:1.6rem;
}
.cert-figure-placeholder svg{width:52px;height:52px;color:var(--gold);opacity:.85;}
.cert-figure-placeholder span{font-size:.88rem;color:var(--muted-2);max-width:20ch;}
.cert-caption{
  font-family:var(--font-display);
  font-size:.85rem;
  font-style:italic;
  letter-spacing:.02em;
  color:var(--muted);
  text-align:center;
}

/* Products */
.products-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline);
}
.product-card{
  background:var(--ground);
  padding:clamp(2.2rem,4vw,3.4rem);
  position:relative;
  transition:background .4s ease;
  display:flex;
  flex-direction:column;
}
.product-card:hover{background:var(--surface);}
.product-icon{
  width:52px;height:52px;
  border:1px solid var(--gold-deep);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
  margin-bottom:1.6rem;
}
.product-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.4;}
.product-card h3{font-size:1.55rem;margin-bottom:0.6rem;}
.product-card p{color:var(--muted);}
.product-link{
  display:inline-flex;align-items:center;gap:0.5em;
  margin-top:1.4rem;
  font-size:0.82rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--gold-bright);
  border-bottom:1px solid transparent;
}
.product-link:hover{border-color:var(--gold-bright);}
.product-link svg{width:14px;height:14px;}

/* Why choose us */
.trust-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap);
}
.trust-item{
  text-align:left;
  padding-top:1.6rem;
  border-top:1px solid var(--hairline);
}
.trust-item svg{width:26px;height:26px;color:var(--gold);stroke:currentColor;fill:none;stroke-width:1.3;margin-bottom:1rem;}
.trust-item h4{font-size:1.05rem;margin-bottom:0.4rem;}
.trust-item p{color:var(--muted);font-size:0.9rem;margin:0;}

/* Contact CTA strip */
.cta-strip{
  background:
    linear-gradient(120deg, rgba(184,134,58,0.14), rgba(184,134,58,0) 55%),
    var(--surface-3);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.cta-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:clamp(3rem,6vw,4rem) 0;
}
.cta-text h2{font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:0.5rem;}
.cta-text p{color:var(--muted);margin:0;}
.cta-details{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(1.5rem,3vw,3rem);
}
.cta-detail{display:flex;align-items:flex-start;gap:0.75rem;}
.cta-detail svg{width:20px;height:20px;color:var(--gold);stroke:currentColor;fill:none;stroke-width:1.4;flex-shrink:0;margin-top:2px;}
.cta-detail .label{font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:0.2rem;}
.cta-detail .value{font-size:0.95rem;color:var(--ivory);font-weight:500;}
.cta-actions{display:flex;}

/* 3-column variant of the hairline product/service grid (6 items) */
.products-grid.grid-3{grid-template-columns:repeat(3,1fr);}

@media (max-width:960px){
  .about-grid{grid-template-columns:1fr;}
  .about-figure{order:-1;max-width:280px;margin:0 auto;}
  .about-grid.is-reversed .about-copy,
  .about-grid.is-reversed .about-figure{order:revert;}
  .about-grid.is-reversed .about-figure{order:-1;}
  .cert-figure{order:-1;max-width:380px;margin:0 auto 1rem;}
  .product-figure{order:-1;max-width:420px;margin:0 auto 1.5rem;}
  .about-grid.is-reversed .product-figure{order:-1;}
  .products-grid{grid-template-columns:1fr;}
  .products-grid.grid-3{grid-template-columns:1fr;}
  .trust-bar{grid-template-columns:repeat(2,1fr);}
  .cta-inner{flex-direction:column;align-items:flex-start;}
}
@media (min-width:961px) and (max-width:1180px){
  .products-grid.grid-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .trust-bar{grid-template-columns:1fr;}
}

/* =========================================================
   8. FOOTER
   ========================================================= */
.site-footer{
  background:var(--navy-deep);
  padding-top:clamp(3.5rem,7vw,5.5rem);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 0.85fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  padding-bottom:3rem;
  border-bottom:1px solid var(--hairline);
}
.footer-brand .site-brand{margin-bottom:1.2rem;}
.footer-brand p{color:var(--muted);max-width:34ch;font-size:0.92rem;}
.footer-col h5{
  font-size:0.75rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.2rem;
}
.footer-col ul{display:grid;gap:0.75rem;}
.footer-col a{color:var(--muted);font-size:0.92rem;}
.footer-col a:hover{color:var(--gold-bright);}
.footer-contact li{display:flex;gap:0.65rem;color:var(--muted);font-size:0.92rem;align-items:flex-start;}
.footer-contact svg{width:16px;height:16px;color:var(--gold);stroke:currentColor;fill:none;stroke-width:1.4;flex-shrink:0;margin-top:3px;}
.footer-social{display:flex;gap:0.75rem;margin-top:1.4rem;}
.footer-social a{
  width:36px;height:36px;
  border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  transition:border-color .3s ease,color .3s ease;
}
.footer-social a:hover{border-color:var(--gold);color:var(--gold-bright);}
.footer-social svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.4;}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  padding:1.6rem 0;
  font-size:0.82rem;
  color:var(--muted-2);
}
.footer-bottom a{color:var(--muted-2);}
.footer-bottom a:hover{color:var(--gold-bright);}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr;}
}

/* =========================================================
   9. ABOUT PAGE COMPONENTS
   ========================================================= */

/* Story / editorial copy */
.story-copy{max-width:760px;}
.story-copy p{color:var(--muted);font-size:1.08rem;line-height:1.8;}
.story-copy p:first-of-type{color:var(--ivory);font-size:1.2rem;}

/* Generic WYSIWYG content (page.php fallback + anywhere the_content()
   is printed) — keeps hand-typed editor content on-brand. */
.entry-content{color:var(--muted);font-size:1.05rem;line-height:1.8;}
.entry-content > *:first-child{margin-top:0;}
.entry-content h2,.entry-content h3,.entry-content h4{color:var(--ivory);margin-top:1.6em;}
.entry-content p{margin:0 0 1.2em;}
.entry-content a{color:var(--gold-bright);text-decoration:underline;text-underline-offset:3px;}
.entry-content ul,.entry-content ol{padding-left:1.2em;margin:0 0 1.2em;}
.entry-content li{margin-bottom:.4em;}
.entry-content img{max-width:100%;height:auto;margin:1.6em 0;border:1px solid var(--hairline);}
.entry-content blockquote{border-left:2px solid var(--gold);padding-left:1.2em;color:var(--ivory);font-style:italic;margin:1.6em 0;}
.entry-content hr{border:none;border-top:1px solid var(--hairline);margin:2em 0;}

/* Value cards */
.value-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--hairline);
  border:1px solid var(--hairline);
}
.value-card{background:var(--ground);padding:clamp(2rem,3.5vw,2.6rem);transition:background .4s ease;}
.value-card:hover{background:var(--surface);}
.value-card .product-icon{margin-bottom:1.4rem;}
.value-card h3{font-size:1.2rem;margin-bottom:.6rem;}
.value-card p{color:var(--muted);font-size:.92rem;margin:0;}

/* Minerals breadth note (sits under the Gold/Diamond product-style cards) */
.mineral-note{
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--hairline);
  display:flex;
  gap:1rem;
  align-items:flex-start;
  max-width:760px;
}
.mineral-note svg{width:22px;height:22px;color:var(--gold);stroke:currentColor;fill:none;stroke-width:1.4;flex-shrink:0;margin-top:2px;}
.mineral-note p{color:var(--muted);margin:0;font-size:.98rem;}

/* Process / approach steps (a real sequence — numbering is meaningful here) */
.process-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap);
  counter-reset:step;
}
.process-step{padding-top:1.6rem;border-top:1px solid var(--hairline);}
.process-step .step-num{
  font-family:var(--font-display);
  font-size:1.7rem;
  color:var(--gold);
  display:block;
  margin-bottom:.9rem;
}
.process-step h4{font-size:1.05rem;margin-bottom:.5rem;}
.process-step p{color:var(--muted);font-size:.9rem;margin:0;}

/* Pull-quote / philosophy statement */
.quote-section{
  padding:clamp(5rem,10vw,8rem) 0;
  text-align:center;
  background:var(--surface);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.quote-mark{
  font-family:var(--font-display);
  font-size:4rem;
  color:var(--gold);
  line-height:1;
  display:block;
  margin-bottom:.5rem;
}
.quote-section blockquote{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.2vw,2.6rem);
  font-weight:500;
  max-width:840px;
  margin:0 auto 1.5rem;
  color:var(--ivory);
  text-wrap:balance;
  line-height:1.35;
}
.quote-section cite{
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-bright);
  font-style:normal;
}

@media (max-width:960px){
  .value-grid{grid-template-columns:repeat(2,1fr);}
  .process-steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .value-grid{grid-template-columns:1fr;}
  .process-steps{grid-template-columns:1fr;}
}

/* =========================================================
   10. SERVICES DIRECTORY (numbered service list, notices, flows)
   ========================================================= */

/* Jump-to nav pills */
.service-nav{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:2rem;
}
.service-nav a{
  padding:.55em 1.1em;
  border:1px solid var(--hairline);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  transition:border-color .3s ease,color .3s ease;
}
.service-nav a:hover,.service-nav a:focus-visible{border-color:var(--gold);color:var(--gold-bright);}

/* Numbered service blocks */
.service-directory{margin-top:1rem;}
.service-block{padding:3rem 0;border-top:1px solid var(--hairline);scroll-margin-top:6rem;}
.service-block:first-child{border-top:none;padding-top:0;}
.service-block h3{
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  display:flex;
  align-items:baseline;
  gap:.7rem;
  flex-wrap:wrap;
}
.service-num{
  font-family:var(--font-display);
  color:var(--gold);
  font-size:.85em;
  flex-shrink:0;
}
.service-block > p{color:var(--muted);font-size:1.02rem;max-width:76ch;}

/* Checklist bullets (single or 2-column) */
.check-list{display:grid;gap:.7rem;margin-top:1.4rem;max-width:920px;}
.check-list.cols-2{grid-template-columns:repeat(2,1fr);column-gap:2.2rem;}
.check-list li{display:flex;align-items:flex-start;gap:.65rem;font-size:.95rem;color:var(--ivory);}
.check-list svg{width:16px;height:16px;flex-shrink:0;margin-top:4px;color:var(--gold);}

/* Disclaimer / important-note callouts */
.notice{
  margin-top:1.6rem;
  padding:1.1rem 1.3rem;
  border-left:2px solid var(--gold);
  background:var(--surface-2);
  font-size:.9rem;
  line-height:1.7;
  color:var(--muted);
  max-width:76ch;
}
.notice p{margin:0 0 .6em;}
.notice p:last-child{margin-bottom:0;}

/* Scam Alert callout (Services page) — a deliberately more urgent red
   treatment, distinct from the calm gold .notice callouts used
   elsewhere, so a fraud-prevention warning reads as urgent rather than
   just informational. */
.scam-alert{
  margin-top:2.4rem;
  padding:2rem clamp(1.4rem, 4vw, 2.6rem);
  border:1px solid rgba(179,38,30,0.22);
  border-left:4px solid var(--danger);
  background:var(--danger-bg);
  border-radius:4px;
  max-width:920px;
}
.scam-alert-head{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  margin-bottom:1.2rem;
}
.scam-alert-head svg{width:30px;height:30px;color:var(--danger);flex-shrink:0;margin-top:2px;}
.scam-alert .kicker{color:var(--danger);}
.scam-alert-head h3{margin:.3rem 0 0;font-size:1.35rem;color:var(--ivory);}
.scam-alert p{color:var(--ivory);line-height:1.75;margin:0 0 1rem;max-width:70ch;}
.scam-alert p:last-child{margin-bottom:0;}
.scam-alert h4{
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:600;
  color:var(--ivory);
  margin:1.7rem 0 .9rem;
}
.scam-alert .check-list{max-width:100%;}
.scam-alert .check-list svg{color:var(--danger);}
.scam-alert-prevention{
  margin-top:2rem;
  padding-top:1.8rem;
  border-top:1px dashed rgba(179,38,30,0.3);
}
.scam-alert-prevention .check-list svg{color:var(--gold-bright);}

/* Simple relationship / flow lines (Seller -> Trade Key -> Buyer) */
.flow-line{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.7rem;
  margin:1.6rem 0;
  padding:1.1rem 1.4rem;
  border:1px solid var(--hairline);
  background:var(--surface-2);
  font-family:var(--font-display);
  font-size:1.05rem;
  color:var(--ivory);
  text-align:center;
  max-width:920px;
}
.flow-line .sep{color:var(--gold);font-size:.9em;}

/* Inline emphasis quote within a section (smaller than .quote-section) */
.inline-quote{
  border-left:2px solid var(--gold);
  padding-left:1.2rem;
  margin:1.6rem 0 0;
  max-width:70ch;
  font-family:var(--font-display);
  font-size:1.15rem;
  color:var(--ivory);
  font-style:italic;
  line-height:1.6;
}

/* Commitment word-list (Trust. Verification. Transparency. ...) */
.commitment-words{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin:2rem 0;
  border-top:1px solid var(--hairline);
  border-left:1px solid var(--hairline);
}
.commitment-words span{
  padding:1rem 1.6rem;
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-display);
  font-size:1.05rem;
  color:var(--gold-bright);
  flex:1 1 auto;
  text-align:center;
}

/* Buyer / Seller access cards */
.badge{
  display:inline-block;
  padding:.3em .8em;
  border:1px solid var(--gold-deep);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-bright);
  margin-bottom:1.2rem;
}
.access-card-foot{
  margin-top:1.8rem;
  padding-top:1.4rem;
  border-top:1px solid var(--hairline);
  display:flex;
  flex-direction:column;
  gap:.9rem;
  align-items:flex-start;
}

/* Fee breakdown box (Storage page's Gold/Diamond cards) — a compact
   label/value list for pricing, reusing the same surface/hairline
   tokens as the rest of the design system. */
.fee-box{
  margin-top:1.6rem;
  padding:.3rem 1.2rem;
  background:var(--surface-2);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
}
/* .product-card is a flex column (see above); letting the write-up
   text grow to fill any leftover height keeps a consistent gap above
   the fee box while still landing both cards' fee boxes level with
   each other, even when one write-up is longer than the other. */
.card-copy{flex:1 1 auto;}
.fee-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.2rem;
  padding:1rem 0;
}
.fee-row + .fee-row{border-top:1px solid var(--hairline);}
.fee-row .fee-label{font-size:.86rem;color:var(--muted);line-height:1.5;}
.fee-row .fee-label small{font-size:.82em;color:var(--muted-2);}
.fee-row .fee-value{
  font-weight:600;
  color:var(--gold-bright);
  font-size:1.05rem;
  text-align:right;
  white-space:nowrap;
}
.access-note{
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--hairline);
  color:var(--muted-2);
  font-size:.88rem;
  max-width:760px;
}

@media (max-width:700px){
  .check-list.cols-2{grid-template-columns:1fr;}
  .commitment-words span{flex:1 1 100%;}
}

/* ============ Contact page ============ */
.contact-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:start;
}
.contact-form-col h3,
.contact-details-col h3{font-size:1.4rem;margin-bottom:.5rem;}
.contact-form{
  display:grid;
  gap:1.3rem;
  margin-top:1.8rem;
}
.form-row{display:grid;grid-template-columns:1fr;gap:1.3rem;}
.form-row.cols-2{grid-template-columns:1fr 1fr;}
.form-field{display:flex;flex-direction:column;gap:.5rem;}
.form-field label{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:.95rem;
  padding:.8em .9em;
}
.form-field textarea{resize:vertical;min-height:130px;}
.form-field input::placeholder,
.form-field textarea::placeholder{color:var(--muted-2);}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--gold);
}
.form-field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8863a' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right .9em center;
  background-size:16px;
  padding-right:2.4em;
}
.contact-form .btn{justify-self:start;margin-top:.4rem;}
.notice-error{border-left-color:var(--gold-deep);}
.contact-details-col{padding-top:.2rem;}
.contact-details-list{margin-top:1.6rem;}
.contact-details-list li{font-size:.98rem;}
.contact-hours-heading{
  margin-top:2.4rem;
  padding-top:1.6rem;
  border-top:1px solid var(--hairline);
  font-size:1.05rem;
}
.contact-hours{color:var(--muted);font-size:.92rem;line-height:1.8;margin-top:.4rem;}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
  .form-row.cols-2{grid-template-columns:1fr;}
}

/* ============ SKR page: "Verify an SKR" lookup ============ */
.skr-verify-container{max-width:640px;margin:0 auto;}
.skr-verify-head{max-width:none;text-align:center;margin-left:auto;margin-right:auto;margin-bottom:2.2rem;}
.skr-verify-intro{margin-top:.6rem;}
.skr-verify-form{
  display:flex;
  gap:1rem;
  align-items:stretch;
}
.skr-verify-form .form-field{flex:1 1 auto;}
.skr-verify-form input{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:.95rem;
  padding:.9em 1em;
}
.skr-verify-form input:focus{outline:none;border-color:var(--gold);}
.skr-verify-form input::placeholder{color:var(--muted-2);}
.skr-verify-form .btn{flex:0 0 auto;}
.skr-verify-result{text-align:left;max-width:none;}
.skr-verify-valid p strong{color:var(--gold);}
.skr-verify-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.9rem 2rem;
  margin-top:1rem;
}
.skr-verify-grid > div{display:flex;flex-direction:column;gap:.2rem;}
.skr-verify-label{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.skr-verify-value{font-size:.98rem;color:var(--ivory);}
.skr-verify-download{margin-top:1.4rem;}
.skr-verify-download-note{font-size:.8rem;color:var(--muted-2);margin-top:.5rem;}

@media (max-width:640px){
  .skr-verify-form{flex-direction:column;}
  .skr-verify-grid{grid-template-columns:1fr;}
}

/* ============ Create SKR page: post-submission confirmation ============ */
.skr-confirm-container{max-width:640px;margin:0 auto;}
.skr-confirm-notice{max-width:none;}
.skr-confirm-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  margin-top:1.6rem;
  padding:1.4rem 1.6rem;
  background:var(--surface-2);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
}
.skr-confirm-number{display:flex;flex-direction:column;gap:.2rem;}
.skr-confirm-value{font-size:1.6rem;font-weight:700;color:var(--ivory);font-family:var(--font-display);}
.skr-confirm-qr{width:120px;height:120px;background:#fff;border-radius:6px;padding:6px;flex-shrink:0;}

@media (max-width:640px){
  .skr-confirm-grid{flex-direction:column;align-items:flex-start;}
}