/* ==========================================================================
   MBM Valkyrie Advisory — wallpaper edition
   Loads after mbm-site.css. Adds:
     1. The 3D roundel mark (header, footer, hero) — vector, crisp at any DPI
     2. The dial hero: concentric hairline rings with tick marks, slowly
        counter-rotating, with the roundel at the centre (per the wallpapers)
     3. Two tonal themes sampled from the wallpapers:
          body.theme-navy  — Core Navy / Brass  (About, Startups, Insights)
          body.theme-ivory — Light Ivory / Navy (Expertise, Approach, Resources)
   Colour values are sampled from the supplied 4K wallpapers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Roundel mark
   -------------------------------------------------------------------------- */
.mbm-sprite{position:absolute;width:0;height:0;overflow:hidden}
.roundel{display:block;aspect-ratio:1;width:100%;height:auto}

.brand-mark .roundel{
  width:42px;height:42px;flex:none;
  filter:drop-shadow(0 2px 3px rgba(2,8,16,.6)) drop-shadow(0 0 14px rgba(201,164,102,.16));
  transition:transform .38s cubic-bezier(.2,.7,.2,1),filter .38s;
}
.brand-mark:hover .roundel,
.brand-mark:focus-visible .roundel{
  transform:translateY(-1px) rotate(-7deg) scale(1.05);
  filter:drop-shadow(0 5px 7px rgba(2,8,16,.62)) drop-shadow(0 0 22px rgba(201,164,102,.34));
}
.site-footer .brand-mark .roundel{width:40px;height:40px}

/* --------------------------------------------------------------------------
   2. Theme tokens (override the :root palette of mbm-site.css)
   -------------------------------------------------------------------------- */
body.theme-navy,
body.theme-ivory{
  --ink:#0c1826;          /* wallpaper navy base            */
  --ink-900:#061019;      /* wallpaper navy edge            */
  --ink-800:#152435;
  --brass:#9c7639;        /* wallpaper brass, deep          */
  --brass-300:#c9a466;    /* wallpaper brass, light         */
  --paper:#f9f5ee;
  --cream:#f2eadf;        /* ivory wallpaper edge           */
  --line:#e2d9ca;
  --slate:#3e4b5b;
  --muted:#c3cad4;
  --shadow:0 24px 70px rgba(6,16,25,.16);
  --dial-glow:#333f4c;
}
body.theme-navy .site-header,
body.theme-ivory .site-header{background:rgba(6,16,25,.94);border-bottom-color:rgba(201,164,102,.22)}
body.theme-navy .section--white,
body.theme-ivory .section--white{background:#fffcf5}   /* ivory wallpaper highlight */
body.theme-navy .metric-strip,
body.theme-ivory .metric-strip{background:var(--line);border-color:var(--line)}

/* --------------------------------------------------------------------------
   3. Dial hero — shared geometry
   -------------------------------------------------------------------------- */
.page-hero--dial{
  --dial-x:74%;
  --dial-size:clamp(520px,60vw,900px);
  --roundel-size:clamp(124px,13vw,192px);
  overflow:hidden;
}
.page-hero--dial .page-hero__inner{
  position:relative;z-index:1;
  min-height:580px;
  padding-right:34%;                 /* keeps copy clear of the roundel */
  pointer-events:none;               /* let clicks reach the roundel link … */
}
.page-hero--dial .page-hero__inner>*{pointer-events:auto}   /* … while copy and buttons stay interactive */
.page-hero--dial h1{max-width:16ch}
.page-hero--dial .page-hero__lede{max-width:60ch}

/* film grain, as on the wallpapers */
.page-hero--dial::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .95 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:200px 200px;
  opacity:.16;mix-blend-mode:soft-light;
}

.page-hero__dial{
  position:absolute;
  left:calc(var(--dial-x) - var(--dial-size)/2);
  top:calc(50% - var(--dial-size)/2);
  width:var(--dial-size);height:var(--dial-size);
  pointer-events:none;                 /* rings never intercept clicks */
}
.dial{display:block;width:100%;height:100%;overflow:visible}
.dial__orbit{
  transform-box:view-box;transform-origin:500px 500px;
  animation:dialSpin var(--spin,160s) linear infinite;
  animation-direction:var(--dir,normal);
}
@keyframes dialSpin{to{transform:rotate(1turn)}}

.dial__ring,.dial__hi{fill:none;stroke-width:.85;vector-effect:non-scaling-stroke}
.dial__ring{stroke:var(--dial-line)}
.dial__hi{display:none;stroke:var(--dial-hi)}
.dial__ticks{fill:none;stroke:var(--dial-tick);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:butt}
.dial__orbit--a{opacity:1}
.dial__orbit--b{opacity:.82}
.dial__orbit--c{opacity:.56}
.dial__orbit--d{opacity:.34}
.dial__glint{fill:var(--dial-glint);filter:drop-shadow(0 0 6px var(--dial-glint-glow))}

.page-hero__roundel-link{
  position:absolute;left:50%;top:50%;z-index:3;   /* above the hero copy: always clickable */
  width:var(--roundel-size);height:var(--roundel-size);
  transform:translate(-50%,-50%);
  display:block;border-radius:50%;pointer-events:auto;cursor:pointer;
  filter:var(--roundel-shadow);
  transition:transform .4s cubic-bezier(.2,.7,.2,1),filter .4s;
}
.page-hero__roundel-link:hover,
.page-hero__roundel-link:focus-visible{transform:translate(-50%,-50%) scale(1.045)}
.page-hero__roundel-link:focus-visible{outline:2px solid var(--brass-300);outline-offset:10px}
.page-hero__roundel{width:100%;height:100%;display:block}

/* --------------------------------------------------------------------------
   3a. Navy dial hero  (About · Startups · Insights)
   -------------------------------------------------------------------------- */
body.theme-navy .page-hero--dial{
  --dial-line:rgba(201,164,102,.40);
  --dial-tick:rgba(201,164,102,.72);
  --dial-glint:#d9b56d;
  --dial-glint-glow:rgba(217,181,109,.95);
  --roundel-shadow:drop-shadow(0 22px 30px rgba(2,8,16,.7)) drop-shadow(0 0 46px rgba(201,164,102,.14));
  background:#0c1826;color:#f2eadf;
  border-bottom-color:rgba(201,164,102,.24);
}
body.theme-navy .page-hero--dial::before{
  background:
    radial-gradient(circle 62vw at var(--dial-x) 50%,
      #343f4c 0%,#2b3745 12%,#19242f 28%,#0c1723 50%,#07111b 78%,#06101a 100%);
}
body.theme-navy .page-hero--dial .eyebrow{color:#c9a466}
body.theme-navy .page-hero--dial h1{color:#f4ecdf}
body.theme-navy .page-hero--dial h1 em{color:#d3b273}
body.theme-navy .page-hero--dial .page-hero__lede{color:#c3cad4}

/* --------------------------------------------------------------------------
   3b. Ivory dial hero  (Expertise · Approach · Resources)
   -------------------------------------------------------------------------- */
body.theme-ivory .page-hero--dial{
  --dial-line:#d3c9bb;
  --dial-tick:#a59d90;
  --dial-hi:#fffbf2;
  --dial-glint:#9c7639;
  --dial-glint-glow:rgba(156,118,57,.7);
  --roundel-shadow:drop-shadow(0 16px 26px rgba(28,36,50,.30)) drop-shadow(0 2px 4px rgba(28,36,50,.18));
  background:#f2eadf;color:#0c1826;
  border-bottom:1px solid #e0d6c6;
}
body.theme-ivory .page-hero--dial::before{
  background:
    radial-gradient(circle 62vw at var(--dial-x) 50%,
      #e8dfd2 0%,#ebe3d7 16%,#efe7dc 38%,#f2eadf 68%,#f4ede3 100%);
}
body.theme-ivory .page-hero--dial::after{opacity:.09;mix-blend-mode:multiply}
body.theme-ivory .page-hero--dial .dial__hi{display:block}
body.theme-ivory .page-hero--dial .eyebrow{color:#86622a}
body.theme-ivory .page-hero--dial h1{color:#0b1626}
body.theme-ivory .page-hero--dial h1 em{color:#9a7434}
body.theme-ivory .page-hero--dial .page-hero__lede{color:#3e4b5b}
body.theme-ivory .page-hero--dial .button-ghost{color:#0c1826;border-color:#b79357}
body.theme-ivory .page-hero--dial .button-ghost:hover{color:#0c1826;background:rgba(156,118,57,.12)}
body.theme-ivory .page-hero--dial .button:hover{color:#fff}

/* --------------------------------------------------------------------------
   4. Dark-section variants (so the ivory pages can run ivory → navy → cream)
   -------------------------------------------------------------------------- */
.section--ink .service-grid{border-color:rgba(201,164,102,.22)}
.section--ink .service-card{
  background:rgba(255,255,255,.035);
  border-color:rgba(201,164,102,.22);
  color:var(--cream);
}
.section--ink .service-card p{color:var(--muted)}
.section--ink .service-card:hover{background:rgba(255,255,255,.07);box-shadow:0 24px 70px rgba(0,0,0,.45)}
.section--ink .service-number,
.section--ink .service-card .card-arrow{color:var(--brass-300)}

.section--ink .proof-card,
.section--ink .content-card,
.section--ink .insight-card,
.section--ink .resource-card{
  background:rgba(255,255,255,.035);
  border-color:rgba(201,164,102,.22);
  color:var(--cream);
}
.section--ink .proof-card p,
.section--ink .content-card p,
.section--ink .insight-card p,
.section--ink .resource-card p{color:var(--muted)}
.section--ink .insight-card:hover,
.section--ink .resource-card:hover{border-color:var(--brass-300);background:rgba(255,255,255,.065);box-shadow:0 24px 70px rgba(0,0,0,.45)}
.section--ink .card-meta{color:var(--brass-300)!important}
.section--ink .text-link{color:var(--brass-300)}
.section--ink .text-link:hover{color:var(--cream)}
.section--ink .steps-list,
.section--ink .steps-list li{border-color:rgba(201,164,102,.22)}
.section--ink .steps-list span:last-child{color:var(--muted)}
.section--ink .steps-list .step-no{color:var(--brass-300)}


/* --------------------------------------------------------------------------
   6. Brass-plate buttons — the same material as the roundel ring
   -------------------------------------------------------------------------- */
.button,
.primary-nav .nav-enquire,
.brief-actions a,
.brief-actions button[type=submit],
.advisor-input button{
  background:linear-gradient(180deg,#e9cf92 0%,#cfab6c 40%,#b48e4d 62%,#c9a466 100%);
  color:#0c1826;
  border:1px solid #7a5a21;
  box-shadow:
    inset 0 0 0 1px rgba(255,240,205,.55),   /* inner light line = double edge */
    inset 0 1px 0 rgba(255,246,222,.7),
    inset 0 -2px 0 rgba(58,38,8,.28),
    0 1px 2px rgba(6,16,25,.35),
    0 10px 20px -10px rgba(6,16,25,.55);
  text-shadow:0 1px 0 rgba(255,246,222,.45);
  font-family:Georgia,"Times New Roman",serif;
  font-weight:600;font-size:15px;letter-spacing:.01em;
  border-radius:4px;
  transition:transform .18s,box-shadow .18s,filter .18s;
}
.primary-nav .nav-enquire{font-size:14.5px;padding:9px 18px}
.button:hover,
.primary-nav .nav-enquire:hover,
.brief-actions a:hover,
.brief-actions button[type=submit]:hover,
.advisor-input button:hover{
  background:linear-gradient(180deg,#f2dca4 0%,#d9b676 40%,#bd9755 62%,#d2ad6d 100%);
  color:#0c1826;
  filter:saturate(1.05);
  transform:translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(255,240,205,.65),
    inset 0 1px 0 rgba(255,246,222,.75),
    inset 0 -2px 0 rgba(58,38,8,.28),
    0 2px 3px rgba(6,16,25,.25),
    0 16px 26px -10px rgba(6,16,25,.55);
}
.button:active,
.primary-nav .nav-enquire:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 5px rgba(58,38,8,.4),0 1px 2px rgba(6,16,25,.2);
}
.button:hover:after{transform:translate(3px)}

.button-ghost{
  color:var(--cream);border-radius:4px;
  font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:15px;
  border:1px solid rgba(201,164,102,.72);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));
  box-shadow:inset 0 1px 0 rgba(255,246,222,.12);
  letter-spacing:.03em;
}
.button-ghost:hover{background:rgba(201,164,102,.14);border-color:var(--brass-300);transform:translateY(-2px)}
body.theme-ivory .page-hero--dial .button-ghost{
  color:#0c1826;border-color:#b79357;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
body.theme-ivory .page-hero--dial .button-ghost:hover{background:rgba(201,164,102,.18);color:#0c1826}
body.theme-ivory .page-hero--dial .button:hover{color:#0c1826}

.advisor-launch .advisor-launch__mark{width:24px!important;height:24px!important}

/* --------------------------------------------------------------------------
   7. WhatsApp — header pill, contact-card button
   -------------------------------------------------------------------------- */
.wa-icon{width:18px;height:18px;flex:none;color:#25d366;filter:drop-shadow(0 0 4px rgba(37,211,102,.35))}
.primary-nav .nav-whatsapp,
.whatsapp-button{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;
  background:linear-gradient(180deg,#172840 0%,#0e1b2e 55%,#0a1524 100%);
  color:#f2eadf;border:1px solid #b9955a;
  font-family:Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:.01em;
  box-shadow:inset 0 0 0 1px rgba(6,16,25,.95),inset 0 1px 0 rgba(255,246,222,.10),0 2px 4px rgba(6,16,25,.4);
  text-shadow:0 1px 1px rgba(0,0,0,.45);text-decoration:none;
  transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;
}
.primary-nav .nav-whatsapp{margin-left:8px;padding:7px 14px 7px 10px;font-size:14.5px}
.whatsapp-button{margin:4px 0 16px;padding:10px 20px 10px 13px;font-size:15px}
.primary-nav .nav-whatsapp:hover,
.whatsapp-button:hover{
  color:#fff;border-color:#d9b56d;transform:translateY(-2px);
  background:linear-gradient(180deg,#1d3150 0%,#12223a 55%,#0c1a2c 100%);
  box-shadow:inset 0 0 0 1px rgba(6,16,25,.95),inset 0 1px 0 rgba(255,246,222,.14),0 6px 14px rgba(6,16,25,.45);
}
.primary-nav .nav-whatsapp::after{display:none}
.contact-alt{margin:14px 0 10px;font-size:15px;color:var(--slate)}
@media (max-width:860px){
  .primary-nav .nav-whatsapp{margin:10px 0 0;align-self:flex-start}
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .page-hero--dial{--dial-x:76%}
}
@media (max-width:860px){
  .page-hero--dial{--dial-size:min(96vw,540px);--roundel-size:clamp(108px,27vw,148px)}
  .page-hero__dial{
    position:relative;top:auto;left:auto;transform:none;
    width:100%;height:min(58vw,330px);
    margin:52px 0 -28px;
    display:grid;place-items:center;
  }
  .page-hero__dial .dial{
    position:absolute;left:50%;top:50%;
    width:var(--dial-size);height:var(--dial-size);
    transform:translate(-50%,-50%);
  }
  .page-hero__roundel-link{position:relative;left:auto;top:auto;transform:none}
  .page-hero__roundel-link:hover,.page-hero__roundel-link:focus-visible{transform:scale(1.045)}
  .page-hero--dial .page-hero__inner{padding-right:0;padding-top:20px;min-height:0}
  .page-hero--dial h1{max-width:none}
  body.theme-navy .page-hero--dial::before{
    background:radial-gradient(circle 80vw at 50% 210px,
      #343f4c 0%,#2b3745 10%,#19242f 24%,#0c1723 46%,#07111b 76%,#06101a 100%);
  }
  body.theme-ivory .page-hero--dial::before{
    background:radial-gradient(circle 80vw at 50% 210px,
      #e8dfd2 0%,#ebe3d7 14%,#efe7dc 36%,#f2eadf 66%,#f4ede3 100%);
  }
}
@media (max-width:680px){
  .brand-mark .roundel{width:38px;height:38px}
}

@media (prefers-reduced-motion:reduce){
  .dial__orbit{animation:none}
  .brand-mark .roundel{transition:none}
}