/* Forbes Strategy Group v7.12 — Executive Readability + Motion
   Keeps approved Brand v3.1 palette, Inter stack, approved logo, and brand speech.
   This layer standardizes readability and carries the copper motion language across every public page. */

:root{
  --fsg-readable-body:1rem;
  --fsg-readable-small:.94rem;
  --fsg-readable-line:1.72;
}

/* ---------- Readability ---------- */
body{font-size:16px}

.fsg-hero-v7 p,
.interior-hero-v77 p,
.page-hero p,
main.hero p,
.fsg-domain-card p,
.fsg-evidence-list p,
.explore-card-v77 p,
.capability-index-v74 p,
.delivery-standard-v74 p,
.method-intro p,
.method-axis p,
.control-rail p,
.operestra-intro-copy p,
.op-arch-card p,
.op-process-intro p,
.operestra-close p,
.about-intro-copy-v74 p,
.about-principles-v74 p,
.founder-profile-v74 p,
.fsg-founder-preview-copy p,
.contact-grid-v7 p,
.form-card p,
.side-card p,
.panel p{
  font-size:var(--fsg-readable-body)!important;
  line-height:var(--fsg-readable-line)!important;
}

.fsg-domain-card p,
.fsg-evidence-list p,
.explore-card-v77 p,
.method-axis p,
.op-arch-card p,
.about-principles-v74 p{
  max-width:64ch;
}

.capability-index-v74 li,
.op-process-list small,
.timeline-item span,
.help{
  font-size:var(--fsg-readable-small)!important;
  line-height:1.58!important;
}

.fsg-domain-head p,
.section-intro-v7 p,
.method-intro p,
.operestra-intro-copy,
.about-intro-copy-v74,
.contact-grid-v7 p{
  max-width:68ch;
}

.section-kicker-row{
  letter-spacing:.08em!important;
}

/* Four clear capability groups on the homepage instead of eight equally weighted cards. */
.fsg-domain-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.fsg-domain-card{
  min-height:245px!important;
}
.fsg-domain-card strong{
  font-size:1.08rem!important;
  line-height:1.35!important;
}
.fsg-domain-card p{
  font-size:1rem!important;
}

/* ---------- Signature copper motion ---------- */
.interior-hero-v77,
.page-hero,
main.hero{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
}
.interior-hero-v77>.container,
.page-hero>.container,
main.hero>.container{
  position:relative;
  z-index:2;
}
.interior-hero-v77::after,
.page-hero::after,
main.hero::after{
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
  width:2px;
  height:165%;
  right:15%;
  top:-40%;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(184,104,61,.10) 12%,
    rgba(184,104,61,.94) 42%,
    rgba(184,104,61,.48) 70%,
    transparent 100%
  );
  transform-origin:center;
  filter:drop-shadow(0 0 10px rgba(184,104,61,.10));
  animation:fsgCopperRailV712 16s cubic-bezier(.45,0,.2,1) infinite;
}

/* Home already has a physical rail element; use the same motion language. */
.fsg-copper-rail{
  animation:fsgCopperRailV712 16s cubic-bezier(.45,0,.2,1) infinite!important;
  filter:drop-shadow(0 0 10px rgba(184,104,61,.10));
}

@keyframes fsgCopperRailV712{
  0%{opacity:0;transform:translate3d(190px,-160px,0) rotate(29deg)}
  8%{opacity:.92}
  38%{opacity:.92;transform:translate3d(-130px,105px,0) rotate(27deg)}
  48%{opacity:0;transform:translate3d(-245px,190px,0) rotate(27deg)}
  58%{opacity:0;transform:translate3d(210px,-145px,0) rotate(24deg)}
  66%{opacity:.78}
  92%{opacity:.78;transform:translate3d(-150px,125px,0) rotate(24deg)}
  100%{opacity:0;transform:translate3d(-230px,185px,0) rotate(24deg)}
}

/* ---------- Home visual balance ---------- */
.fsg-kc-skyline{
  opacity:.54!important;
  filter:saturate(.82) contrast(1.07) brightness(.90)!important;
}
.fsg-kc-tint{
  background:linear-gradient(
    90deg,
    rgba(25,35,49,.97) 0%,
    rgba(25,35,49,.89) 36%,
    rgba(25,35,49,.55) 60%,
    rgba(25,35,49,.16) 86%,
    rgba(25,35,49,.08) 100%
  )!important;
}

/* ---------- Capabilities: easier mobile reading ---------- */
@media(max-width:720px){
  .capability-matrix{
    display:none!important;
  }
  .fsg-domain-grid{
    grid-template-columns:1fr!important;
  }
  .fsg-domain-card{
    min-height:0!important;
  }
}

/* ---------- Mobile ---------- */
@media(max-width:900px){
  .interior-hero-v77::after,
  .page-hero::after,
  main.hero::after{
    right:-8%;
    height:150%;
    opacity:.72;
  }
}

@media(max-width:720px){
  :root{
    --fsg-readable-body:1rem;
    --fsg-readable-small:.95rem;
  }

  .interior-hero-v77,
  .page-hero,
  main.hero{
    padding-top:56px!important;
    padding-bottom:52px!important;
  }

  .interior-hero-v77 h1,
  .page-hero h1,
  main.hero h1{
    font-size:clamp(2.35rem,11vw,3.35rem)!important;
    line-height:1!important;
    max-width:100%!important;
  }

  .interior-hero-v77 p,
  .page-hero p,
  main.hero p{
    max-width:100%!important;
  }

  .section-kicker-row{
    font-size:.68rem!important;
    line-height:1.45!important;
  }

  .fsg-kc-skyline{
    opacity:.42!important;
    object-position:61% 50%!important;
  }

  .fsg-kc-tint{
    background:linear-gradient(
      180deg,
      rgba(25,35,49,.78) 0%,
      rgba(25,35,49,.86) 48%,
      rgba(25,35,49,.97) 100%
    )!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .interior-hero-v77::after,
  .page-hero::after,
  main.hero::after,
  .fsg-copper-rail{
    animation:none!important;
    opacity:.48!important;
    transform:rotate(26deg)!important;
  }
}


/* ============================================================
   v7.12.1 — definitive mobile header/navigation correction
   Replaces legacy stacked/horizontal mobile header experiments.
   ============================================================ */
@media(max-width:900px){
  header{
    position:sticky!important;
    top:0!important;
    z-index:1600!important;
    overflow:visible!important;
    background:rgba(248,246,241,.985)!important;
    border-bottom:1px solid rgba(25,35,49,.16)!important;
    box-shadow:0 8px 24px rgba(25,35,49,.08)!important;
    backdrop-filter:blur(12px)!important;
    -webkit-backdrop-filter:blur(12px)!important;
  }

  header .container.nav{
    position:relative!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    width:min(calc(100% - 28px),1180px)!important;
    min-height:68px!important;
    height:68px!important;
    margin-inline:auto!important;
    padding:6px 0!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    overflow:visible!important;
    grid-template-columns:none!important;
    grid-template-areas:none!important;
  }

  header .brand{
    position:static!important;
    display:flex!important;
    align-items:center!important;
    flex:0 1 auto!important;
    width:auto!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    transform:none!important;
  }

  header .approved-logo{
    display:block!important;
    width:auto!important;
    height:48px!important;
    max-width:155px!important;
    object-fit:contain!important;
    filter:none!important;
  }

  header .mobile-toggle{
    position:static!important;
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
    flex:0 0 46px!important;
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border:1px solid rgba(25,35,49,.28)!important;
    border-radius:0!important;
    background:var(--ivory)!important;
    color:var(--midnight)!important;
    font-size:1.55rem!important;
    font-weight:500!important;
    line-height:1!important;
    cursor:pointer!important;
    z-index:3!important;
  }

  header .mobile-toggle:focus-visible{
    outline:2px solid var(--copper)!important;
    outline-offset:3px!important;
  }

  header .nav-links{
    position:absolute!important;
    z-index:2!important;
    top:100%!important;
    left:calc(50% - 50vw)!important;
    right:calc(50% - 50vw)!important;
    width:100vw!important;
    height:auto!important;
    max-height:calc(100svh - 68px)!important;
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    margin:0!important;
    padding:12px 22px 22px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    white-space:normal!important;
    background:var(--ivory)!important;
    border-top:1px solid rgba(25,35,49,.10)!important;
    border-bottom:4px solid var(--copper)!important;
    box-shadow:0 18px 34px rgba(25,35,49,.16)!important;
    transform:none!important;
  }

  header .nav-links.open{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }

  header .nav-links a{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    min-height:48px!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:flex-start!important;
    margin:0!important;
    padding:13px 4px!important;
    border:0!important;
    border-bottom:1px solid rgba(25,35,49,.12)!important;
    background:transparent!important;
    color:var(--midnight)!important;
    font-size:1rem!important;
    font-weight:800!important;
    line-height:1.25!important;
    white-space:normal!important;
    text-align:left!important;
  }

  header .nav-links a:not(.button)::after{display:none!important}

  header .nav-links a[aria-current="page"]{
    color:var(--copper)!important;
    background:transparent!important;
    border-left:3px solid var(--copper)!important;
    padding-left:12px!important;
  }

  header .nav-links .button{
    display:flex!important;
    justify-content:center!important;
    min-height:50px!important;
    margin-top:14px!important;
    padding:0 16px!important;
    border:1px solid var(--midnight)!important;
    background:var(--midnight)!important;
    color:var(--white)!important;
    text-align:center!important;
  }

  header .nav-links .button:hover,
  header .nav-links .button:focus-visible{
    background:var(--charcoal)!important;
    border-color:var(--copper)!important;
  }

  html.fsg-nav-open,
  html.fsg-nav-open body{
    overflow-x:hidden!important;
  }

  /* Mobile hero tuning from real-device review. */
  .fsg-hero-v7{
    padding-top:54px!important;
  }

  .hero-v7-topline{
    margin-bottom:26px!important;
  }

  .hero-v7-tagline,
  .hero-v7-label{
    font-size:.7rem!important;
    line-height:1.45!important;
  }

  .hero-v7-copy h1{
    font-size:clamp(2.55rem,11.5vw,3.65rem)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
  }

  .hero-v7-lead{
    font-size:1rem!important;
    line-height:1.6!important;
  }

  .hero-v7-actions .button,
  .hero-v7-actions .text-link{
    min-height:50px!important;
  }
}

@media(max-width:420px){
  header .container.nav{
    width:min(calc(100% - 22px),1180px)!important;
    min-height:64px!important;
    height:64px!important;
  }

  header .approved-logo{
    height:44px!important;
    max-width:142px!important;
  }

  header .mobile-toggle{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
  }

  header .nav-links{
    max-height:calc(100svh - 64px)!important;
    padding-inline:18px!important;
  }

  .hero-v7-copy h1{
    font-size:clamp(2.4rem,11.25vw,3.25rem)!important;
  }
}