/*
Theme Name: Wisdom Trading V2
Theme URI: https://www.wisdomtrading.com/
Author: Wisdom Trading
Description: Managed Strategies design for Wisdom Trading — an independent futures and options brokerage. Futures, Option and Hedging strategy templates, Insights index and article layouts.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: Proprietary
Text Domain: wisdomv2
*/

:root{
  --navy:#07355a;
  --navy2:#082f4d;
  --blue:#0878c9;
  --ink:#0b3558;
  --muted:#46617a;
  --line:#d9e2e9;
  --soft:#f3f7fa;
  --white:#fff;
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max),calc(100% - 48px));margin:auto}
header{height:78px;background:#fff;display:flex;align-items:center;border-bottom:1px solid #eef2f5;position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:12px;font-family:Georgia,serif;color:var(--navy)}
.logo-mark{width:42px;height:34px;position:relative;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='90 138 332 256'><g fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'><path d='M120 300 L256 165 L392 300' stroke-width='47'/><path d='M150 366 L256 302 L362 366' stroke-width='34'/></g></svg>") no-repeat center/contain;mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='90 138 332 256'><g fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'><path d='M120 300 L256 165 L392 300' stroke-width='47'/><path d='M150 366 L256 302 L362 366' stroke-width='34'/></g></svg>") no-repeat center/contain}
.logo-mark:before,.logo-mark:after{display:none}

.logo-text{font-size:25px;letter-spacing:1px}
.logo-sub{display:block;font-family:Arial,sans-serif;font-size:8px;letter-spacing:3px;margin-top:-4px;text-align:center}
nav{display:flex;align-items:center;gap:35px;font-size:14px}
nav a:hover{color:var(--blue)}
.btn{display:inline-block;padding:14px 25px;background:var(--blue);color:#fff;font-size:12px;font-weight:bold;letter-spacing:1.2px;border-radius:2px}
.btn.outline{background:transparent;border:1px solid #fff}
.hero{min-height:470px;display:flex;align-items:center;background:
linear-gradient(90deg,rgba(5,40,67,.94) 0%,rgba(5,40,67,.82) 46%,rgba(5,40,67,.25) 100%),
linear-gradient(135deg,#123f61 0%,#244f6b 45%,#d59d64 100%);
color:#fff;position:relative;overflow:hidden}

/* Homepage hero photograph. Sits under the existing left-to-right scrim, which
   is what keeps the headline legible; the gradient below it stays as a fallback
   if the image ever fails to load. Interior banners (.page-hero) deliberately
   keep the plain gradient so the photo stays a homepage moment. */


/* The skewed wedge reads as a graphic device over a flat gradient but fights a
   photograph, so it is much softer on the homepage. */
.hero:not(.page-hero):after{opacity:.35}

@media(max-width:800px){
  /* Narrow screens crop toward the sun, so bias back to the darker ridgeline
     and deepen the scrim to hold the type. */

}
.hero:after{content:"";position:absolute;inset:auto -10% -80px -10%;height:230px;background:linear-gradient(160deg,transparent 30%,rgba(4,35,58,.9) 31% 58%,rgba(9,48,77,.95) 59%);transform:skewY(-5deg)}
.hero-content{position:relative;z-index:2;padding:76px 0}
.eyebrow{font-size:16px;letter-spacing:6px;font-weight:600;margin-bottom:12px}
h1{font-family:Georgia,"Times New Roman",serif;font-size:58px;line-height:1.04;font-weight:400;margin:0 0 20px}
.hero p{font-size:19px;max-width:620px;margin:0 0 30px}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.cred{font-size:10px;letter-spacing:2.4px;margin-top:36px;text-transform:uppercase}
section{padding:70px 0}
.section-kicker{font-size:12px;letter-spacing:4px;font-weight:bold;margin-bottom:30px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid var(--line);background:#fff;transition:.2s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(8,45,70,.10)}
.card-img{height:180px;background:linear-gradient(135deg,#163e59,#7894a8 52%,#d29b62);position:relative;overflow:hidden}
.card-img:after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,transparent 45%,rgba(0,0,0,.28))}

/* Card photography. Each image sits over the gradient it replaces, so the
   gradient still shows if an image fails to load. The sources are ~380x275
   while the slot is ~380x180, so `cover` crops vertically - the position on
   each rule keeps that card's subject in frame. */



.card-body{padding:25px;display:flex;flex-direction:column;flex:1}
.num{font-size:10px;letter-spacing:2px;margin-bottom:10px}
.card h2{font-family:Georgia,serif;font-size:30px;line-height:1.1;font-weight:400;margin:0 0 16px}
.card p{font-size:14px;color:var(--muted);margin:0 0 18px}
.card .link{margin-top:auto;color:#066db4;font-size:11px;font-weight:bold;letter-spacing:1.2px}
.trust{background:var(--soft);padding:45px 0}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.trust-item{padding:0 35px;border-right:1px solid #d3dee6}
.trust-item:first-child{padding-left:0}
.trust-item:last-child{border-right:0}
.trust h3{font-family:Georgia,serif;font-size:22px;margin:0 0 6px;font-weight:400}
.trust strong{display:block;font-size:12px;letter-spacing:1px}
.trust p{font-size:12px;color:var(--muted);max-width:250px}
.library{background:#fff}
.library-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lib{padding:30px 20px;text-align:center;border-right:1px solid var(--line)}
.lib:last-child{border-right:0}
.lib-icon{font-size:28px;margin-bottom:10px}
.lib h3{font-family:Georgia,serif;font-size:22px;font-weight:400;margin:0 0 6px}
.lib p{font-size:11px;color:var(--muted);margin:0}
.cta{padding:85px 0;background:linear-gradient(135deg,#0b3c61,#082d49);color:#fff;text-align:center}
.cta h2{font-family:Georgia,serif;font-size:42px;font-weight:400;margin:0 0 10px}
.cta p{max-width:620px;margin:0 auto 25px;color:#e2edf4}
footer{background:#06243a;color:#c7d7e2;padding:35px 0;font-size:12px}
.footer{display:flex;justify-content:space-between;gap:20px}
@media(max-width:800px){
  nav{display:none}
  h1{font-size:43px}
  .hero{min-height:500px}
  .cards,.trust-grid,.library-grid{grid-template-columns:1fr}
  .trust-item{border-right:0;border-bottom:1px solid #d3dee6;padding:22px 0}
  .trust-item:last-child{border-bottom:0}
  .lib{border-right:0;border-bottom:1px solid var(--line)}
  .lib:last-child{border-bottom:0}
  .footer{flex-direction:column}
}

/* ---------- mobile nav ---------- */
.menu-btn{display:none;width:46px;height:40px;border:1px solid var(--line);border-radius:2px;background:#fff;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{display:block;width:20px;height:2px;background:var(--navy);transition:.2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-btn:focus-visible,nav a:focus-visible,.btn:focus-visible,footer a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.mobile-nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(8,45,70,.10);display:none}
.mobile-nav.open{display:block}
.mobile-nav .container{padding-bottom:22px}
.mobile-nav a{display:block;padding:16px 0;border-bottom:1px solid #eef2f5;font-size:15px;color:var(--ink)}
.mobile-nav a:hover{color:var(--blue)}
.mobile-nav .btn{display:block;text-align:center;margin-top:20px;border-bottom:0;color:#fff;font-size:12px;padding:15px 25px}
@media(max-width:800px){.menu-btn{display:flex}}
@media(min-width:801px){.mobile-nav{display:none!important}}

/* ---------- footer ---------- */
footer{background:#06243a;color:#c7d7e2;padding:55px 0 32px;font-size:12px;line-height:1.7}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.13)}
@media(max-width:800px){.f-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}}
.f-brand .logo{color:#fff}
.f-brand .logo-mark:before,.f-brand .logo-mark:after{border-top-color:#fff}
.f-blurb{margin:16px 0 0;max-width:34em;color:#a6bed1}
.f-col h4{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:#8fb0c8;margin:0 0 15px;font-weight:bold}
.f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.f-col a,.f-col address a{color:#dbe8f1}
.f-col a:hover{color:#fff;text-decoration:underline}
.f-col address{font-style:normal;display:grid;gap:10px}
.f-col address span{color:#a6bed1}
.f-disc{margin:24px 0 0;font-size:10.5px;line-height:1.8;color:#7e9bb3;max-width:100ch}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.10);font-size:11px;color:#8fb0c8}
.f-bottom nav{display:flex;flex-wrap:wrap;gap:20px;font-size:11px}
.f-bottom a{color:#8fb0c8}
.f-bottom a:hover{color:#fff}

/* ---------- interior page hero ---------- */
.page-hero{min-height:0;align-items:flex-end}
.page-hero .hero-content{padding:56px 0 46px}
.crumbnav{display:block;margin-bottom:20px}
.crumb{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#a9c6db}
.crumb a{color:#d8e8f3}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb li:not(:last-child):after{content:"/";margin-left:8px;color:#6d90ad}
.page-hero h1{font-size:50px;margin-bottom:16px}
.page-hero p{font-size:18px;max-width:640px;margin:0}
@media(max-width:800px){.page-hero h1{font-size:38px}}

/* ---------- lede + fact panel ---------- */
.lede-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:start}
@media(max-width:860px){.lede-grid{grid-template-columns:1fr;gap:32px}}
.prose h2{font-family:Georgia,serif;font-size:32px;font-weight:400;line-height:1.2;margin:0 0 18px}
.prose h3{font-family:Georgia,serif;font-size:22px;font-weight:400;margin:32px 0 10px}
.prose p{font-size:16px;color:var(--muted);margin:0 0 16px;max-width:66ch}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:bold}
.factpanel{background:var(--soft);border:1px solid var(--line);border-top:3px solid var(--blue);padding:26px 26px 28px}
.factpanel h4{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--navy);margin:0 0 18px;font-weight:bold}
.factpanel dl{margin:0;display:grid;gap:16px}
.factpanel dt{font-family:Georgia,serif;font-size:17px;color:var(--ink)}
.factpanel dd{margin:3px 0 0;font-size:13px;color:var(--muted);line-height:1.6}
.factpanel .btn{margin-top:24px;display:block;text-align:center}

/* ---------- approaches ---------- */
.approach{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:700px){.approach{grid-template-columns:1fr}}
.approach article{background:#fff;padding:30px 28px}
.approach h3{font-family:Georgia,serif;font-size:24px;font-weight:400;margin:0 0 6px;color:var(--ink)}
.approach .tagline{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--blue);font-weight:bold;margin:0 0 14px}
.approach p{font-size:14px;color:var(--muted);margin:0}

/* ---------- markets ---------- */
.markets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:820px){.markets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.markets{grid-template-columns:1fr}}
.market{border-left:2px solid var(--blue);padding:4px 0 4px 18px}
.market h4{font-family:Georgia,serif;font-size:19px;font-weight:400;margin:0 0 4px;color:var(--ink)}
.market p{font-size:12.5px;color:var(--muted);margin:0;letter-spacing:.3px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;counter-reset:st}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
.step{counter-increment:st;border-top:1px solid var(--line);padding-top:18px}
.step:before{content:"0" counter(st);display:block;font-size:11px;letter-spacing:2px;font-weight:bold;color:var(--blue);margin-bottom:10px}
.step h4{font-family:Georgia,serif;font-size:20px;font-weight:400;margin:0 0 8px;color:var(--ink)}
.step p{font-size:13.5px;color:var(--muted);margin:0}

/* ---------- suitability ---------- */
.suit{background:var(--soft);border:1px solid var(--line);padding:34px 36px}
@media(max-width:560px){.suit{padding:26px 22px}}
.suit h3{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:0 0 14px;color:var(--ink)}
.suit-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:20px}
@media(max-width:700px){.suit-cols{grid-template-columns:1fr;gap:22px}}
.suit h4{font-size:10px;letter-spacing:2.2px;text-transform:uppercase;color:var(--navy);margin:0 0 12px;font-weight:bold}
.suit ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.suit li{font-size:14px;color:var(--muted);padding-left:18px;position:relative}
.suit li:before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--blue)}
.suit .note{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.75}

/* ---------- cross links ---------- */
.xlinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media(max-width:700px){.xlinks{grid-template-columns:1fr}}
.xlink{border:1px solid var(--line);padding:26px 28px;display:flex;flex-direction:column;gap:10px;transition:.2s}
.xlink:hover{border-color:#b9cddc;box-shadow:0 12px 28px rgba(8,45,70,.08);transform:translateY(-3px)}
.xlink .num{margin:0}
.xlink h3{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:0;color:var(--ink)}
.xlink p{font-size:14px;color:var(--muted);margin:0}
.xlink .link{color:#066db4;font-size:11px;font-weight:bold;letter-spacing:1.2px;margin-top:6px}

/* ============================================================
   Generic content pages, Insights index and single articles
   ============================================================ */
.prose-page{padding-block:clamp(44px,6vw,72px)}
.prose-wrap{max-width:760px}
.entry-content{font-size:16.5px;color:var(--ink)}
.entry-content > * + *{margin-top:20px}
.entry-content h2{font-family:Georgia,serif;font-size:30px;font-weight:400;line-height:1.2;margin-top:44px;color:var(--navy)}
.entry-content h3{font-family:Georgia,serif;font-size:23px;font-weight:400;line-height:1.25;margin-top:34px;color:var(--navy)}
.entry-content h4{font-size:15px;font-weight:bold;letter-spacing:.04em;margin-top:28px;color:var(--navy)}
.entry-content p{color:var(--muted);margin:0}
.entry-content a{color:var(--blue);text-decoration:underline}
.entry-content strong{color:var(--ink)}
.entry-content ul,.entry-content ol{color:var(--muted);padding-left:22px;margin:0}
.entry-content li + li{margin-top:8px}
.entry-content blockquote{margin:0;padding:4px 0 4px 22px;border-left:2px solid var(--blue);font-family:Georgia,serif;font-size:19px;color:var(--ink)}
.entry-content img{height:auto;border:1px solid var(--line)}
.entry-content figure{margin:0}
.entry-content figcaption{font-size:12.5px;color:var(--muted);margin-top:8px}
.entry-content hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.entry-content table{width:100%;border-collapse:collapse;font-size:14px}
.entry-content th,.entry-content td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.entry-content th{background:var(--soft);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--navy)}
.table-scroll{overflow-x:auto}

.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media(max-width:900px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}
.post-card{border:1px solid var(--line);display:flex;flex-direction:column;transition:.2s;background:#fff}
.post-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(8,45,70,.10)}
.post-card .thumb{aspect-ratio:16/9;background:var(--navy);overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* The article title cards were drawn in the old black-and-gold identity. Rather
   than leave them clashing, the image is screen-blended over a navy ground so
   its near-black background becomes navy, and the hue is rotated so the gold
   accents land on the brand blue. White headline type is unaffected by either.
   This is a transitional treatment - recolouring or redrawing the artwork is
   the permanent fix. */
.post-card .thumb{isolation:isolate}
.post-card .thumb img{mix-blend-mode:screen;filter:hue-rotate(158deg) saturate(.8) brightness(1.04)}
.post-card .pc-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.post-card time{font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--blue);font-weight:bold}
.post-card h2{font-family:Georgia,serif;font-size:22px;font-weight:400;line-height:1.22;margin:0;color:var(--navy)}
.post-card p{font-size:14px;color:var(--muted);margin:0}
.post-card .link{margin-top:auto;color:#066db4;font-size:11px;font-weight:bold;letter-spacing:1.2px;padding-top:6px}

.article-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#a9c6db}
.pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:44px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);font-size:13px;color:var(--ink)}
.pagination .page-numbers:hover{border-color:var(--blue);color:var(--blue)}
.pagination .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}

.notfound{padding-block:clamp(56px,8vw,96px);text-align:center}
.notfound h1{font-family:Georgia,serif;font-size:clamp(34px,6vw,58px);font-weight:400;color:var(--navy);margin:0 0 14px}
.notfound p{color:var(--muted);max-width:52ch;margin:0 auto 26px}
.notfound .ctas{justify-content:center}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:100;background:#fff;padding:12px 18px;border:2px solid var(--blue)}

/* ============================================================
   Legacy black-and-gold content blocks
   ------------------------------------------------------------
   Several older pages (Get Started, Why Wisdom, Request Commission
   Rates) have a black-and-gold palette hard-coded as inline style
   attributes in the page content. Inline styles beat stylesheets, so
   these rules map that palette onto the V2 light one until the content
   itself is rewritten.

   The panel backgrounds are matched on their legacy hex, then EVERY
   descendant is forced to a readable colour. That blanket rule is
   deliberate: those panels contain a whole family of cream text values
   (#E8E6DF, #F5F3EE, #C9C4B8 ...) all chosen for a black background, and
   enumerating them one at a time just leaves the next one invisible.

   Order matters below. The blanket rule comes first; the muted and accent
   mappings come after so that secondary text and gold accents keep their
   distinction instead of flattening to one colour.

   Gravity Forms sets its palette through custom properties in its own
   stylesheet rather than inline attributes, so none of this touches forms.
   ============================================================ */

/* 1. Panels: dark fill and gold hairline become a light surface. */
.entry-content [style*="#0E1016"],
.entry-content [style*="#0e1016"],
.entry-content [style*="#12151D"],
.entry-content [style*="#12151d"],
.entry-content [style*="#0A0C11"],
.entry-content [style*="#0a0c11"],
.entry-content .wt-principal{
  background:var(--soft)!important;
  border-color:var(--line)!important;
  color:var(--ink)!important;
}

/* 2. Everything inside a converted panel becomes readable. */
.entry-content [style*="#0E1016"] *,
.entry-content [style*="#0e1016"] *,
.entry-content [style*="#12151D"] *,
.entry-content [style*="#12151d"] *,
.entry-content .wt-principal *{
  color:var(--ink)!important;
  border-color:var(--line)!important;
}

/* 3. Secondary text keeps a lighter weight in the hierarchy. */
.entry-content [style*="#C9C4B8"],
.entry-content [style*="#c9c4b8"],
.entry-content [style*="#8A8578"],
.entry-content [style*="#8a8578"],
.entry-content [style*="#C9C4B8"] *,
.entry-content [style*="#8A8578"] *{color:var(--muted)!important}

/* 4. Gold accents become the brand blue. */
.entry-content [style*="#E8B23A"],
.entry-content [style*="#e8b23a"],
.entry-content [style*="#D9A441"],
.entry-content [style*="#d9a441"]{color:var(--blue)!important}
.entry-content [style*="rgba(232,178,58"],
.entry-content [style*="rgba(217,164,65"]{border-color:var(--line)!important}

/* 5. A gold fill becomes a brand-blue button, so its label stays white. */
.entry-content a[style*="background:#E8B23A"],
.entry-content a[style*="background:#e8b23a"],
.entry-content a[style*="background:#D9A441"],
.entry-content a[style*="background:#d9a441"],
.entry-content a[style*="background-color:#E8B23A"],
.entry-content a[style*="background-color:#D9A441"]{
  background:var(--blue)!important;
  border-color:var(--blue)!important;
  color:#fff!important;
}

/* ============================================================
   Hero and card photography
   ------------------------------------------------------------
   Longhand background properties rather than the position/size slash
   shorthand, which some engines parse unreliably. The gradient stays as a
   second layer so a failed image leaves a styled panel, not a blank box.
   ============================================================ */
.hero:not(.page-hero){
  background-image:
    linear-gradient(90deg,rgba(5,40,67,.90) 0%,rgba(5,40,67,.70) 42%,rgba(5,40,67,.20) 72%,rgba(5,40,67,.34) 100%),
    url("/wp-content/uploads/2026/09/hero-mountains-sunrise.jpg"),
    linear-gradient(135deg,#123f61 0%,#244f6b 45%,#d59d64 100%);
  background-position:center center,60% center,center center;
  background-size:cover,cover,cover;
  background-repeat:no-repeat,no-repeat,no-repeat;
}
.card:nth-child(1) .card-img{
  background-image:url("/wp-content/uploads/2026/09/card-futures-strategies.jpg"),linear-gradient(135deg,#163e59,#7894a8 52%,#d29b62);
  background-position:center 58%,center center;
  background-size:cover,cover;
  background-repeat:no-repeat,no-repeat;
}
.card:nth-child(2) .card-img{
  background-image:url("/wp-content/uploads/2026/09/card-option-strategies.jpg"),linear-gradient(135deg,#071f35,#23709c 50%,#86b7ce);
  background-position:center center,center center;
  background-size:cover,cover;
  background-repeat:no-repeat,no-repeat;
}
.card:nth-child(3) .card-img{
  background-image:url("/wp-content/uploads/2026/09/card-hedging-strategies.jpg"),linear-gradient(135deg,#8fa2ad,#d5c6a9 45%,#254a62);
  background-position:center 46%,center center;
  background-size:cover,cover;
  background-repeat:no-repeat,no-repeat;
}
@media(max-width:800px){
  /* Narrow screens crop toward the sun, so bias back to the darker
     ridgeline and deepen the scrim to hold the headline. */
  .hero:not(.page-hero){
    background-image:
      linear-gradient(180deg,rgba(5,40,67,.86) 0%,rgba(5,40,67,.72) 55%,rgba(5,40,67,.80) 100%),
      url("/wp-content/uploads/2026/09/hero-mountains-sunrise.jpg"),
      linear-gradient(135deg,#123f61 0%,#244f6b 45%,#d59d64 100%);
    background-position:center center,35% center,center center;
    background-size:cover,cover,cover;
    background-repeat:no-repeat,no-repeat,no-repeat;
  }
}

/* ============================================================
   Wordmark at phone width
   ------------------------------------------------------------
   At 25px with 1px tracking "WISDOM TRADING" wrapped onto two lines on a
   narrow screen, which pushed the mark out of line and let the
   STRATEGY / EXECUTION / RESULTS line wrap and overlap the hero. Hold the
   whole lockup on two tight lines instead, and let the header grow to fit
   rather than clipping at a fixed 78px.
   ============================================================ */
@media(max-width:600px){
  header{height:auto}
  .bar,.nav{min-height:66px;padding-block:9px}
  .logo{gap:9px;align-items:center}
  .logo-text{
    font-size:17px;
    letter-spacing:.4px;
    white-space:nowrap;
    display:block;
    line-height:1.05;
  }
  .logo-sub{
    font-size:5.8px;
    letter-spacing:1.25px;
    white-space:nowrap;
    margin-top:3px;
    text-align:left;
  }
}
@media(max-width:380px){
  .logo-text{font-size:15px}
  .logo-sub{font-size:5.2px;letter-spacing:1px}
}