/* ============================================================
   Plutonia — Unified Design-System Elevation Layer
   Loaded LAST on every page. Perfects the shared primitives
   (cards, buttons, kickers, tags, links, headings, focus)
   without altering any page's structural foundation.
   Keyed entirely off the universal brand tokens in :root.
   ============================================================ */

/* ---- Premium easing tokens (scoped, no global override) ---- */
:root{
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --elev-1:0 1px 2px rgba(11,25,41,.05);
  --elev-2:0 14px 38px rgba(11,25,41,.11),0 3px 10px rgba(11,25,41,.05);
  --elev-dark:0 18px 46px rgba(0,0,0,.34);
}

/* Smooth typographic rendering across the whole site */
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

/* Refined text selection */
::selection{background:rgba(78,201,224,.28);color:var(--navy);}

/* ---- Accessible focus (keyboard only) ---- */
a:focus-visible,button:focus-visible,
.btn-primary:focus-visible,.btn-secondary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:2px;
  border-radius:4px;
}

/* ============================================================
   BUTTONS — keep the existing palette, refine the motion + depth
   ============================================================ */
.btn-primary{
  position:relative;overflow:hidden;
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),background .4s var(--e-soft),color .4s var(--e-soft);
}
/* sheen sweep on hover */
.btn-primary::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .7s var(--e-out);pointer-events:none;
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(11,25,41,.26);}
.btn-primary:hover::after{left:130%;}
.btn-primary:active{transform:translateY(-1px);}

.btn-secondary{transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),border-color .4s var(--e-soft),color .4s var(--e-soft),background .4s var(--e-soft);}
.btn-secondary:hover{transform:translateY(-2px);}

/* ============================================================
   KICKER / EYEBROW — refined with a leading rule mark
   ============================================================ */
.kicker{display:inline-flex;align-items:center;gap:9px;}
.kicker::before{
  content:'';width:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--teal));
  flex:none;
}
/* centered kickers: rule on both sides reads as intentional, not broken */
.kicker[style*="center"]::after,.center .kicker::after{
  content:'';width:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--teal),var(--blue));flex:none;
}

/* ============================================================
   PILL TAGS (guides / heroes) — subtle glass refinement
   ============================================================ */
.g-tag{
  backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(11,25,41,.18),inset 0 1px 0 rgba(255,255,255,.08);
}

/* ============================================================
   CARDS — one unified tactile lift across every card variant.
   All these share the same #fff / --lgrey / --r base, so a single
   refined hover reads consistently site-wide.
   ============================================================ */
.rel-card,.scard,.fit-card,.help-card,.pain-card,.buyer-card,
.vcard,.policy-card,.sidebar-card,.svc-card,.related-card,
.cert-card,.std-card,.country-card,.continent-card,.client-card,
.value-card,.use-card,.team-card,.response-card,.project-card,
.panel-card,.market-card,.insp-card,.info-card,.industry-card,
.freight-card,.form-card,.division-card,.compliance-card,
.case-card,.path-card,.stage-card{
  transition:transform .5s var(--e-out),box-shadow .5s var(--e-out),border-color .4s var(--e-soft);
  will-change:transform;
}
.rel-card:hover,.scard:hover,.fit-card:hover,.help-card:hover,
.pain-card:hover,.buyer-card:hover,.vcard:hover,.policy-card:hover,
.svc-card:hover,.related-card:hover,.cert-card:hover,.std-card:hover,
.country-card:hover,.continent-card:hover,.client-card:hover,
.value-card:hover,.use-card:hover,.team-card:hover,.project-card:hover,
.panel-card:hover,.market-card:hover,.industry-card:hover,
.freight-card:hover,.division-card:hover,.compliance-card:hover,
.case-card:hover,.path-card:hover,.stage-card:hover{
  transform:translateY(-5px);
  border-color:#cfe0f0;
  box-shadow:var(--elev-2);
}

/* Linked cards: clearer affordance on the title */
.rel-card:hover,.svc-card:hover,.related-card:hover,
.buyer-card:hover,.market-card:hover{border-color:var(--blue);}

/* ============================================================
   SERVICE / SUB-CATEGORY ICONS (division pages) — premium SVG
   line-icons in a soft gradient chip, matching the homepage
   supply-card icon language. Replaces the old flat emoji.
   ============================================================ */
.svc-icon.svg{
  width:52px;height:52px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(158deg,#eaf4fb,#dcebf8);
  border:1px solid rgba(14,110,166,.16);
  box-shadow:0 6px 16px rgba(11,25,41,.08),inset 0 1px 0 rgba(255,255,255,.7);
  margin-bottom:16px;
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),background .4s var(--e-soft);
}
.svc-icon.svg svg{
  width:26px;height:26px;
  stroke:var(--blue);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.svc-card:hover .svc-icon.svg,
a:hover>.svc-icon.svg{
  transform:translateY(-2px);
  background:linear-gradient(158deg,#e3f0fa,#cfe3f5);
  box-shadow:0 10px 22px rgba(14,110,166,.16),inset 0 1px 0 rgba(255,255,255,.7);
}
@media (prefers-reduced-motion: reduce){
  .svc-icon.svg{transition:none !important;}
}

/* ============================================================
   IN-ARTICLE EMPHASIS BLOCKS (guides) — richer, calmer surfaces
   ============================================================ */
.answer{
  background:linear-gradient(180deg,#eef6fb,#e7f1f9);
  border-left-width:4px;
  box-shadow:0 6px 22px rgba(14,110,166,.08);
}
.takeaways{
  background:linear-gradient(180deg,#f7fafd,#eef4fa);
  box-shadow:0 4px 18px rgba(11,25,41,.05);
}

/* ============================================================
   EDITORIAL SECTION POLISH (guides + market pages)
   Section-level refinement applied through the shared layer so
   all 171 guides and 43 market pages gain a deliberate, premium
   reading rhythm without per-page edits.
   ============================================================ */

/* Guide hero — keep the navy gradient, add a calm teal aurora so
   the masthead feels lit rather than flat. */
.g-hero::after{
  content:'';position:absolute;top:-30%;right:-10%;
  width:60%;height:160%;pointer-events:none;z-index:1;
  background:radial-gradient(closest-side,rgba(78,201,224,.16),rgba(78,201,224,0) 70%);
}
.g-hero-inner{position:relative;z-index:2;}

/* Article section headings — a short gradient rule above each H2
   reads as intentional editorial structure. */
.article h2{position:relative;padding-top:6px;}
.article h2::before{
  content:'';position:absolute;top:-10px;left:0;
  width:34px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--teal));
}
.article h2:first-of-type::before{display:none;}

/* Editorial drop-cap on the first body paragraph after the intro
   blocks — a quiet magazine touch, guarded so it never lands on a
   short or boxed paragraph. */
.article>p:first-of-type::first-letter{
  font-family:Georgia,serif;font-weight:700;
  font-size:3.1em;line-height:.82;
  float:left;margin:6px 10px 0 0;color:var(--blue);
}

/* Market-page category chips & helper cards — give the flat bullet
   and marker glyphs a soft branded chip so sections feel designed. */
.cat-item{transition:transform .4s var(--e-out),box-shadow .4s var(--e-out),border-color .4s var(--e-soft);}
.cat-item:hover{transform:translateY(-3px);box-shadow:var(--elev-2);border-color:#cfe0f0;}
.cat-item .ci{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--teal);
}

/* FAQ disclosures (guides + markets) — calmer, tactile rows. */
.faq details{
  transition:background .35s var(--e-soft),box-shadow .35s var(--e-soft);
  border-radius:var(--r);
}
.faq details[open]{box-shadow:var(--elev-1);}
.faq summary{cursor:pointer;transition:color .3s ease;}
.faq summary:hover{color:var(--blue);}

/* Citation / important boxes — a quiet authoritative surface. */
.cite-box{
  background:linear-gradient(180deg,#f7fafd,#eef4fa);
  box-shadow:0 4px 18px rgba(11,25,41,.05);
}

@media (prefers-reduced-motion: reduce){
  .cat-item,.faq details,.faq summary{transition:none !important;}
}

/* ============================================================
   LINKS in body copy — elegant underline reveal
   ============================================================ */
.article a:not(.btn-primary):not(.btn-secondary):not(.rel-card){
  text-decoration:none;
  background-image:linear-gradient(var(--blue),var(--blue));
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s var(--e-out),color .3s ease;
}
.article a:not(.btn-primary):not(.btn-secondary):not(.rel-card):hover{
  background-size:100% 1.5px;color:var(--blue2);
}

/* ============================================================
   IMAGES — never ship a raw rectangle; soften + frame gently
   (only images that opt in via .media / .embed-img keep control;
   generic article imagery gets a calm radius)
   ============================================================ */
.article img:not([class]){border-radius:10px;box-shadow:var(--elev-1);}

/* ============================================================
   REDUCED MOTION — honor the user's setting everywhere
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .btn-primary,.btn-secondary,
  .rel-card,.scard,.fit-card,.help-card,.pain-card,.buyer-card,
  .vcard,.policy-card,.svc-card,.related-card,.cert-card,.std-card,
  .country-card,.continent-card,.client-card,.value-card,.use-card,
  .team-card,.project-card,.panel-card,.market-card,.industry-card,
  .freight-card,.division-card,.compliance-card,.case-card,
  .path-card,.stage-card,
  .article a:not(.btn-primary):not(.btn-secondary):not(.rel-card){
    transition:none !important;
  }
  .btn-primary::after{display:none;}
}